/* ========== CryptoFeeScope — Phase1 UI ========== */

:root{
  --bg:#F9FAFB;
  --card:#FFFFFF;
  --fg:#111827;
  --muted:#6B7280;
  --line:#E5E7EB;
  --accent:#00C896;
  --accent-strong:#00E0A2;
  --good:#10B981;
  --warn:#F59E0B;
  --bad:#EF4444;
  --shadow:0 6px 20px rgba(17,24,39,0.06);
  --glow:0 0 0px rgba(0,200,150,0);
  --btn-text-strong:#ffffff;
}

[data-theme="dark"]{
  --bg:#0F172A;
  --card:#1E293B;
  --fg:#F1F5F9;
  --muted:#94A3B8;
  --line:#2B3647;
  --accent:#00E0A2;
  --accent-strong:#00FFC0;
  --shadow:0 10px 24px rgba(0,0,0,0.25);
  --glow:0 0 0px rgba(0,224,162,0);
  --btn-text-strong:#e6fff7;
}

*{box-sizing:border-box}

html,
body{
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{
  background:var(--bg);
  color:var(--fg);
  font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{color:inherit;}

.toolbar a,
a.btn,
.brand-link,
.global-nav a{color:inherit;text-decoration:none;}

/* Header */
header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(to bottom, rgba(249,250,251,.9), rgba(249,250,251,.6));
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] header{
  background:linear-gradient(to bottom, rgba(15,23,42,.9), rgba(15,23,42,.6));
}
.bar{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px;
}
.brand-link{display:flex;align-items:center;gap:10px;}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand img{width:22px;height:22px}
.brand .sub{
  font-size:12px;
  color:var(--muted);
}
.updated-label{font-size:13px;font-weight:600;color:var(--fg);margin:6px 0 10px;}
.freshness-note{font-size:12px;color:var(--muted);margin:0 0 10px;}
.health-details{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:12px;
}
.health-badge{font-size:11px;color:var(--muted);white-space:nowrap;letter-spacing:.2px;}
.health-badge.stale{color:var(--warn);font-weight:600;}
.health-details-popover{position:relative;}
.health-details-popover summary{
  font-size:11px;
  color:var(--accent);
  cursor:pointer;
  list-style:none;
  text-decoration:underline;
  text-underline-offset:2px;
}
.health-details-popover summary::-webkit-details-marker{display:none;}
.health-details-panel{
  position:absolute;
  right:0;
  margin-top:6px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  font-size:11px;
  color:var(--muted);
  display:grid;
  gap:4px;
  min-width:220px;
  max-width:min(280px, calc(100vw - 32px));
  white-space:normal;
  z-index:20;
}
.health-details-panel span{
  color:var(--fg);
  word-break:break-word;
}
.spacer{flex:1}
.toolbar{
  display:flex;
  gap:8px;
}
.share-feedback{
  font-size:12px;
  color:var(--muted);
  align-self:center;
}
.share-feedback.success{color:var(--good);}
.share-feedback.error{color:var(--bad);}

.nav-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;}
.nav-toggle .bar-line{display:block;width:16px;height:2px;background:var(--fg);border-radius:1px;box-shadow:0 5px var(--fg),0 -5px var(--fg);}

.global-nav{border-top:1px solid var(--line);}
.global-nav-inner{max-width:1100px;margin:0 auto;padding:0 16px;}
.global-nav ul{list-style:none;margin:0;padding:8px 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.global-nav a{font-weight:600;font-size:13px;}

/* Buttons */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.btn:hover{border-color:var(--accent)}
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--btn-text-strong);
  font-weight:600;
}
.btn-primary:hover{
  background:var(--accent-strong);
}
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--fg);
}
.btn-ghost:hover{
  border-color:var(--accent);
}
.btn.small{
  padding:4px 8px;
  font-size:12px;
}
.btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--btn-text-strong);
  font-weight:600;
}
.btn.full{
  width:100%;
}
.btn .icon{margin-right:2px}

.currency-toggle{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Layout */
main{
  max-width:1180px;
  margin:16px auto;
  padding:0 18px 24px;
  /* メイン領域を伸ばしてフッターを画面下端に押し下げる */
  flex:1 0 auto;
}
main.single{
  max-width:960px;
  margin:18px auto 24px;
}
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:900px){
  .cards{grid-template-columns: 1fr 2fr;}
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.card .inner{padding:14px}

.estimate-box{
  border:1px solid var(--line);
  background:rgba(107,114,128,0.08);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:12px;
  font-size:13px;
  line-height:1.5;
}
.estimate-line{margin:0 0 6px 0;}
.estimate-line:last-of-type{margin-bottom:8px;}
.estimate-link-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.estimate-link{color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;}
.estimate-link:hover{color:var(--accent);border-color:var(--accent);}

/* Search & filters */
.search{
  display:flex;
  gap:10px;
  align-items:center;
}
.filters{
  display:flex;
  gap:10px;
  margin-top:8px;
}
input[type="search"],
select{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg);
  padding:10px 12px;
  border-radius:10px;
  outline:0;
}
.hint{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}
.hint.subtle{
  font-size:11px;
}
.controls-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  margin:8px 0 12px;
}
.controls-row .control{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
  flex:1 1 200px;
}
.controls-row .control-title{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.controls-row input,
.controls-row select{
  width:100%;
  max-width:100%;
}
.empty-note{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
}
.state-panel{
  margin:12px 0;
  padding:12px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:var(--card);
  font-size:13px;
}
.state-panel .state-title{
  font-weight:600;
}
.state-panel .state-message{
  margin-top:4px;
  color:var(--muted);
}
.state-panel .state-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.state-panel .state-details{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.state-panel .state-details pre{
  margin-top:6px;
  padding:8px;
  background:rgba(15,23,42,0.05);
  border-radius:8px;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Table */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.fee-table{width:100%;table-layout:fixed;}
.fee-table-wrapper{width:100%;overflow-x:hidden;}
thead th{
  font-size:12px;
  text-align:left;
  color:var(--muted);
  font-weight:600;
  padding:0.45rem 0.55rem;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--card);
  word-wrap:break-word;
  overflow-wrap:anywhere;
}
tbody td{
  padding:0.45rem 0.55rem;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  word-break:break-word;
  overflow-wrap:anywhere;
}
tbody tr{line-height:1.35;}
tbody tr:hover{
  background:rgba(0,200,150,0.08);
}
[data-theme="dark"] tbody tr:hover{
  background:rgba(0,224,162,0.09);
}
.fee-table .chain-cell{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:150px;
}
.fee-table .chain-label{font-weight:700;}
.method-link{
  margin-left:6px;
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
}
.method-link:hover{color:var(--accent);}
.fee-table .chain-ticker{
  font-size:12px;
  color:var(--muted);
}
.fee-table th,
.fee-table td{
  white-space:nowrap;
}
.fee-table .chain-cell{
  white-space:nowrap;
}
.fee-table .ticker-cell{
  white-space:nowrap;
  font-weight:600;
}
.status-legend{
  font-size:12px;
  opacity:0.85;
  margin-bottom:8px;
}
.status-legend-title{
  font-weight:600;
  margin-bottom:4px;
}
.status-legend-list{
  list-style:none;
  padding:0;
  margin:0;
}
.status-legend-list li{margin:2px 0;}
.status-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}
.status-dot.fast{background:var(--good);}
.status-dot.normal{background:var(--muted);}
.status-dot.slow{background:var(--warn);}
.status-dot.degraded{background:var(--muted);}
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.fee{font-weight:700}
.fee-cell{font-weight:700;}
.fee-cell .fee-tier-hint{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
}
.fee-cell .tier-note{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
}
.fee-val{
  display:inline-flex;
  align-items:center;
}
.fee-val[role="button"]{cursor:pointer;}
.fee-val:focus{
  outline:2px solid var(--muted);
  outline-offset:2px;
}
.fee-exact{
  font-size:12px;
  opacity:.7;
  margin-top:4px;
  word-break:break-word;
  line-height:1.4;
}
.fee-inline-raw{
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.status-cell{
  text-transform:capitalize;
  font-weight:600;
}
.status-cell.status-fast{color:var(--good);}
.status-cell.status-normal{color:var(--muted);}
.status-cell.status-slow{color:var(--warn);}
.status-cell.status-unknown{color:var(--muted);}
.status-cell.status-degraded{color:var(--muted);}
.change-cell{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.change-pos{
  color:#0a8f3c;
}
.change-neg{
  color:#c62828;
}
.change-flat{
  color:inherit;
  opacity:.8;
}

@media(min-width:768px){
  .fee-table{table-layout:fixed;width:100%;}
  .fee-table .chain-cell{flex-direction:row;align-items:center;gap:10px;}
  .fee-table .chain-label{font-size:14px;}
  .fee-table td{padding-top:8px;padding-bottom:8px;}
}

@media(min-width:481px) and (max-width:799px){
  .fee-table th,
  .fee-table td{font-size:13px;padding:0.4rem 0.45rem;}

  .fee-table .chain-cell{white-space:normal;}

  .fee-table th:nth-child(1),
  .fee-table td:nth-child(1){
    width:26%;
    padding-right:10px;
  }

  .fee-table th:nth-child(2),
  .fee-table td:nth-child(2){
    width:12%;
    padding-right:8px;
  }

  .fee-table th:nth-child(3),
  .fee-table td:nth-child(3){
    width:20%;
    padding-inline:8px;
    text-align:right;
    font-size:0.9rem;
  }

  .fee-table th:nth-child(4),
  .fee-table td:nth-child(4){
    width:14%;
    padding-inline:6px;
    text-align:right;
    font-size:0.9rem;
  }

  .fee-table th:nth-child(5),
  .fee-table td:nth-child(5){
    width:14%;
    padding-inline:6px;
    font-size:0.9rem;
  }

  .fee-table th:nth-child(6),
  .fee-table td:nth-child(6){
    width:14%;
    padding-inline:6px;
    font-size:0.9rem;
  }
}

@media(min-width:800px) and (max-width:959px){
  .fee-table th,
  .fee-table td{font-size:13px;}

  .fee-table th:nth-child(1),
  .fee-table td:nth-child(1){
    width:27%;
    padding-right:12px;
  }

  .fee-table th:nth-child(2),
  .fee-table td:nth-child(2){
    width:12%;
    padding-right:10px;
  }

  .fee-table th:nth-child(3),
  .fee-table td:nth-child(3){
    width:18%;
    padding-left:8px;
    text-align:right;
  }

  .fee-table th:nth-child(4),
  .fee-table td:nth-child(4){
    width:14%;
    text-align:right;
  }

  .fee-table th:nth-child(5),
  .fee-table td:nth-child(5){
    width:14%;
  }

  .fee-table th:nth-child(6),
  .fee-table td:nth-child(6){
    width:15%;
  }
}

@media(min-width:960px){
  .fee-table th:nth-child(1),
  .fee-table td:nth-child(1){
    width:28%;
    padding-right:14px;
  }

  .fee-table th:nth-child(2),
  .fee-table td:nth-child(2){
    width:11%;
    padding-right:12px;
  }

  .fee-table th:nth-child(3),
  .fee-table td:nth-child(3){
    width:17%;
    padding-left:10px;
    text-align:right;
  }

  .fee-table th:nth-child(4),
  .fee-table td:nth-child(4){
    width:14%;
    text-align:right;
  }

  .fee-table th:nth-child(5),
  .fee-table td:nth-child(5){
    width:15%;
  }

  .fee-table th:nth-child(6),
  .fee-table td:nth-child(6){
    width:15%;
  }
}

/* Details 列（▾ボタン） */
.col-details{
  width:40px;
  text-align:center;
}
.fee-details-toggle{
  font:inherit;
  font-size:16px;
  line-height:1;
  width:26px;
  height:26px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#f3f4f6;
  color:#374151;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fee-details-toggle:hover{
  background:#e5e7eb;
}
[data-theme="dark"] .fee-details-toggle{
  background:#020617;
  border-color:#1f2937;
  color:#e5e7eb;
}

/* Status tag */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}
.tag.good{
  color:#0a3;
  border-color:rgba(16,185,129,.35);
}
.tag.warn{
  color:#b36a00;
  border-color:rgba(245,158,11,.35);
}
.tag.bad{
  color:#b00;
  border-color:rgba(239,68,68,.35);
}

/* Refresh glow */
.rowglow{
  box-shadow: var(--glow);
  transition: box-shadow .6s ease;
}
.rowglow.on{
  box-shadow: 0 0 0 4px rgba(0,200,150,.25);
}
[data-theme="dark"] .rowglow.on{
  box-shadow: 0 0 0 4px rgba(0,224,162,.25);
}

/* Gas / fee details 行 */
.fee-details-row td.fee-details-cell{
  background:#f9fafb;
  padding:8px 16px 10px;
  font-size:13px;
}
[data-theme="dark"] .fee-details-row td.fee-details-cell{
  background:#0b1220;
}
.fee-details-block{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.gas-tiers-wrapper{
  display:grid;
  grid-template-columns:1fr;
  row-gap:4px;
}

/* Donate CTA */
.donate-cta{
  border-top:1px solid var(--line);
  background:var(--card);
  color:var(--fg);
}
.donate-cta-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.donate-cta-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.donate-cta-title{
  font-size:13px;
  font-weight:600;
}
.donate-cta-sub{
  font-size:12px;
  color:var(--muted);
}
.donate-cta-button{
  font-size:12px;
  padding:6px 14px;
  white-space:nowrap;
}
@media(max-width:640px){
  .donate-cta-inner{
    align-items:flex-start;
  }
  .donate-cta-button{
    width:100%;
    justify-content:center;
  }
}

/* Footer */
footer{
  color:var(--muted);
  border-top:1px solid var(--line);
  flex-shrink:0;
  margin-top:auto;
}
footer .inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
  font-size:12px;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.logo svg{width:22px;height:22px}
footer .links a{
  text-decoration:underline;
}
footer .note{
  margin-top:4px;
}

/* Utility */
.hidden{display:none!important}

/* Donate page */
.page-main{
  max-width:960px;
  margin:0 auto;
  padding:24px 16px 48px;
}

.donate-card,
.wallets-card{
  margin-bottom:24px;
}

.donate-card h2,
.donate-card h3{
  margin-top:0;
  margin-bottom:8px;
}

.donate-card p{margin-top:0;}

.donate-note{
  color:var(--muted);
  margin-top:10px;
  font-size:13px;
}

.donate-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.donate-buttons .btn{flex:0 0 auto;}

.btn-secondary{
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}
.btn-secondary:hover{border-color:var(--accent-strong);color:var(--accent-strong);}

.wallet-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin-top:10px;
}

.wallet-table td,
.wallet-table th{
  padding:8px 12px;
  vertical-align:middle;
  border-bottom:1px solid var(--line);
}

.wallet-table th{color:var(--muted);font-size:12px;text-align:left;}

.wallet-table .wallet-address{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  word-break:break-all;
}

.wallet-table .wallet-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.btn-copy{
  font-size:12px;
  padding:4px 8px;
}

@media(max-width:640px){
  .wallet-table th:nth-child(1),
  .wallet-table td:nth-child(1){
    width:80px;
  }
}

@media(max-width:480px){
  .donate-buttons{flex-direction:column;align-items:stretch;}
  .donate-buttons .btn{width:100%;text-align:center;}
}

/* Responsive tweaks */
@media(min-width:769px){
  .nav-toggle{display:none;}
  .global-nav{max-height:none!important;overflow:visible;}
  .global-nav ul{justify-content:flex-start;}
  .fee-table .chain-cell{flex-direction:row;align-items:center;gap:8px;}
  .fee-table .chain-label{font-size:14px;}
}

@media(max-width:767px){
  .fee-table th,
  .fee-table td,
  .fee-table .chain-cell{white-space:normal;}
}

@media(max-width:768px){
  .brand .sub{display:none;}
  .bar{
    padding-inline:12px;
    flex-wrap:wrap;
  }
  .brand,
  .toolbar{width:100%;}
  .health-details{
    width:100%;
    margin-right:0;
    justify-content:flex-start;
  }
  .toolbar{
    gap:6px;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  main{padding:0 14px 20px;}
  .nav-toggle{display:inline-flex;}
  .global-nav{overflow:hidden;max-height:0;transition:max-height .25s ease;}
  .global-nav.open{max-height:280px;}
  .global-nav ul{flex-direction:column;align-items:flex-start;padding:10px 16px;}
}

@media(min-width:571px){
  #fee-table-body-mobile{display:none;}
}

@media(max-width:570px){
  .controls-row .control{flex:1 1 100%;min-width:140px;}
  #fee-table-body{display:none;}
  #fee-table-body-mobile{display:table-row-group;}
  .fee-table{table-layout:auto;}
  thead{display:none;}
  .fee-table-wrapper{overflow-x:hidden;}
  #fee-table-body-mobile tr.fee-row-mobile{
    border-bottom:1px solid var(--line);
  }
  #fee-table-body-mobile tr.fee-row-mobile:last-child{border-bottom:0;}
  #fee-table-body-mobile tr.fee-row-mobile td{
    padding:0.35rem 0.55rem;
    vertical-align:middle;
  }
  .fee-row-mobile{
    font-size:13px;
  }
  .cell-mobile-left{
    width:45%;
    vertical-align:middle;
    padding-right:0.4rem;
  }
  .cell-mobile-right{
    width:55%;
    vertical-align:middle;
    padding-left:0.4rem;
  }
  .cell-mobile-left,.cell-mobile-right{word-break:break-word;}
  .chain-name-mobile{font-weight:700;}
  .chain-ticker-mobile{color:var(--muted);font-size:12px;}
  .metrics-top,
  .metrics-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px;
    font-size:12px;
    line-height:1.4;
  }
  .metrics-bottom{margin-top:2px;}
  .fee-value-mobile{font-weight:700;}
  .change-value-mobile{font-variant-numeric:tabular-nums;}
  .speed-mobile{font-size:12px;}
  .status-mobile{font-size:12px;text-transform:capitalize;}
}

@media(max-width:480px){
  html,
  body{overflow-x:hidden;}
  .pill{white-space:normal;font-size:11px;}
  .updated-label{display:block;margin-top:4px;font-size:11px;}
  .card .inner{padding:12px;}
  .btn .label{display:none;}
  .btn{padding-inline:8px;}

  .filters{
    flex-direction:column;
  }

  .controls-row{gap:6px;}
}

/* ========== Phase3: history chart ========== */

.cfs-history-card{
  margin-top:12px;
}
.cfs-history-card .inner{
  padding-top:12px;
  padding-bottom:12px;
  max-height:220px;
}

.cfs-history-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}

.cfs-history-title{
  font-size:14px;
  font-weight:600;
}

.cfs-history-controls{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
}

.cfs-history-select{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  font-size:12px;
  color:var(--fg);
}

#historyCanvas{
  width:100%;
  height:160px;
  max-height:160px;
  display:block;
}

/* Stats page */
.stats-grid{display:grid;gap:16px;grid-template-columns:1fr;}
.stats-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px;}
.stats-controls .control{display:flex;flex-direction:column;gap:6px;font-size:14px;min-width:140px;}
.stats-controls select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);}
.stats-controls .range-toggle{display:inline-flex;gap:6px;}
.stats-controls .status{margin-left:auto;font-size:13px;color:var(--muted);}
.stats-controls .status.error{color:var(--warn);}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.summary-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);}
.summary-card .label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.summary-card .value{font-size:18px;font-weight:700;}
.chart-wrap{width:100%;min-height:260px;position:relative;}
.chart-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.chart-subtle{font-size:12px;color:var(--muted);}
.chart-note{font-size:12px;color:var(--muted);margin-top:6px;}
.chart-tooltip{position:absolute;transform:translate(-50%,-110%);padding:6px 8px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.08);font-size:12px;line-height:1.3;color:var(--fg);white-space:nowrap;pointer-events:none;opacity:1;transition:opacity 0.12s ease;}
.chart-tooltip.hidden{opacity:0;}
.chart-tooltip .tooltip-value{font-weight:700;}
.table-wrap{overflow-x:auto;margin-top:12px;}

@media (min-width:900px){
  .stats-grid{grid-template-columns:360px 1fr;align-items:start;}
}