*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  color:#1a1a1a;background:#eef1f4;
  font-size:14px;line-height:1.7;
}
a{color:#1e3a6f;text-decoration:none}
a:hover{text-decoration:underline}

/* ========== トップバー ========== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#0d2348,#1e3a6f);color:#fff;
  padding:18px 32px;
  position:sticky;top:0;z-index:50;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:"Inter",sans-serif;font-weight:900;font-size:22px;letter-spacing:-.04em;
}
.brand-title{font-family:"Noto Serif JP",serif;font-weight:500;font-size:19px;letter-spacing:.04em}
.brand-sub{font-size:11.5px;color:rgba(255,255,255,.7);letter-spacing:.08em;margin-top:2px}
.topbar-actions{display:flex;align-items:center;gap:14px}
.updated{font-size:12px;color:rgba(255,255,255,.75);font-family:"Inter",sans-serif;letter-spacing:.04em}
.btn-refresh{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:6px 14px;border-radius:999px;cursor:pointer;font-size:12.5px;
  transition:background .2s;
}
.btn-refresh:hover{background:rgba(255,255,255,.22)}

/* ========== メイン ========== */
.main{max-width:1480px;margin:0 auto;padding:28px 32px 60px;display:flex;flex-direction:column;gap:24px}

/* ========== KPIカード ========== */
.kpi-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.kpi-card{
  background:#fff;border-radius:14px;padding:22px 24px;
  box-shadow:0 2px 10px rgba(13,35,72,.06);
  border-top:3px solid #1e3a6f;
}
.kpi-label{font-size:11.5px;color:#6b7280;letter-spacing:.15em;font-weight:700;text-transform:uppercase}
.kpi-value{
  font-family:"Inter",sans-serif;font-weight:300;font-size:36px;color:#1a1a1a;
  letter-spacing:.01em;margin-top:8px;line-height:1.1;
}
.kpi-value.accent{color:#1e3a6f}
.kpi-sub{font-size:11.5px;color:#6b7280;margin-top:6px;line-height:1.5}

/* ========== パネル ========== */
.panel{
  background:#fff;border-radius:14px;padding:24px 26px;
  box-shadow:0 2px 10px rgba(13,35,72,.06);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.panel-title{
  font-family:"Noto Serif JP",serif;font-weight:500;font-size:17px;color:#1a1a1a;
  margin-bottom:14px;letter-spacing:.04em;
}
.panel-title small{font-family:"Noto Sans JP",sans-serif;font-size:12px;color:#6b7280;font-weight:400;margin-left:6px}
.panel-head .panel-title{margin-bottom:0}
.hint{font-size:11.5px;color:#6b7280;margin-top:10px;text-align:center}

.row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ========== チャート ========== */
.chart-wrap{position:relative;height:260px}
.chart-wrap.tall{height:360px}
.chart-wrap.wide{height:340px}
.legend{display:flex;justify-content:center;gap:18px;margin-top:10px;flex-wrap:wrap}
.legend .item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#1a1a1a}
.legend .dot{width:10px;height:10px;border-radius:50%}

/* ========== テーブル ========== */
.table-controls{display:flex;gap:10px;align-items:center}
.table-controls select,
.table-controls input{
  padding:7px 12px;border:1px solid #d4d4d8;border-radius:6px;
  font-family:inherit;font-size:13px;background:#fff;
}
.table-controls input{width:200px}
.table-wrap{overflow-x:auto;border:1px solid #e4e7ec;border-radius:10px}
.stock-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.stock-table th{
  background:#f6f8fb;color:#1a1a1a;font-weight:700;
  padding:11px 12px;text-align:left;border-bottom:1px solid #e4e7ec;
  position:sticky;top:0;cursor:pointer;user-select:none;
  font-size:11.5px;letter-spacing:.08em;
}
.stock-table th:hover{background:#eaeef4}
.stock-table th.num{text-align:right}
.stock-table td{padding:10px 12px;border-bottom:1px solid #f0f2f5}
.stock-table td.num{text-align:right;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums}
.stock-table tr:hover td{background:#f9fbfd}
.stock-table .badge{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.05em;
}
.badge.出品中{background:#dcfce7;color:#166534}
.badge.取引中{background:#fef3c7;color:#92400e}
.badge.完売{background:#e0e7ff;color:#3730a3}
.badge.unknown{background:#f3f4f6;color:#374151}
.stock-table .url-link{font-size:11px;color:#1e3a6f}

.footnote{text-align:center;font-size:11.5px;color:#6b7280;padding:24px 0 0}

/* ========== ローディング ========== */
.loading-overlay{
  position:fixed;inset:0;background:rgba(238,241,244,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  z-index:100;font-size:13px;color:#1e3a6f;
}
.loading-overlay.hidden{display:none}
.spinner{
  width:40px;height:40px;border:3px solid #d4d4d8;border-top-color:#1e3a6f;
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== レスポンシブ ========== */
@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .row.two-col{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{padding:14px 18px}
  .brand-title{font-size:16px}
  .main{padding:18px 14px 40px}
  .kpi-grid{grid-template-columns:1fr;gap:12px}
  .kpi-value{font-size:30px}
  .panel{padding:18px 16px}
  .chart-wrap{height:220px}
  .chart-wrap.tall{height:280px}
  .table-controls input{width:140px}
}