/* Hallmark · genre: modern-minimal · macrostructure: Workbench · tone: precise · anchor hue: mint
 * design-system: DESIGN.md · designed-as-app · pre-emit critique: P5 H5 E5 S5 R5 V4
 * contrast: pass (40–41) · mobile: pass (34, 49, 50–57) · tokens: pass (48)
 */
@import url("../../tokens.css");

/* ============================================================
   Zenith — Design System (main.css)
   全ページ共通。トークン/コンポーネントはDESIGN.md参照。
   ============================================================ */

:root{
  --bg:#0A0C0F;
  --bg-elev:#0D1014;
  --panel:#11141A;
  --panel-2:#151920;
  --line:#1D222B;
  --line-soft:rgba(255,255,255,.05);
  --txt:#E9EDF4;
  --txt-2:#98A2B0;
  --txt-3:#606A78;
  --mint:#4FE0C4;
  --mint-soft:rgba(79,224,196,.12);
  --mint-ink:#04241E;
  --long:#2EBD85;
  --long-soft:rgba(46,189,133,.12);
  --short:#F6465D;
  --short-soft:rgba(246,70,93,.12);
  --warn:#F0B90B;
  --warn-soft:rgba(240,185,11,.12);

  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px;

  --r-s:6px; --r-m:10px; --r-l:14px; --r-full:999px;

  --topbar-h:52px;
  --bottomnav-h:56px;
  /* 日本語はヒラギノ優先(edgeX等と同じ見え方)。Noto Sans JPは非Apple環境のフォールバック */
  --font:var(--font-body);
  --font-mono:var(--font-outlier);
}
@media (min-width:1024px){ :root{ --topbar-h:56px; } }

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:var(--fs-13);
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
  min-height:100vh;
  overflow-x:clip;
}
body.has-bottomnav{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}
@media (min-width:1024px){ body.has-bottomnav{padding-bottom:0} }

h1,h2,h3,h4{
  min-width:0;overflow-wrap:anywhere;
  font-family:var(--font-display);font-style:normal;
  line-height:1.3;font-weight:600;
}
b,strong{font-weight:600}

/* ---------- 日本語タイポグラフィ調整 ----------
   字間をわずかに広げて可読性を上げる(数値・等幅は除外) */
html[lang="ja"] body{letter-spacing:.015em}
html[lang="ja"] .mono,html[lang="ja"] code,html[lang="ja"] .num{letter-spacing:0}
html[lang="ja"] .page-sub,html[lang="ja"] .note-box{line-height:1.75}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--mint-soft);color:var(--txt)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-scrollbar);border-radius:var(--space-3xs)}
::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}
*{scrollbar-width:thin;scrollbar-color:var(--color-scrollbar) transparent}

/* ---------- Utilities ---------- */
.up{color:var(--long)}
.down{color:var(--short)}
.muted{color:var(--txt-2)}
.dim{color:var(--txt-3)}
.num{font-variant-numeric:tabular-nums;font-weight:600}
.mono{font-family:var(--font-mono)}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nw{white-space:nowrap}
.link{color:var(--mint);cursor:pointer}
.link:hover{text-decoration:underline}
.hide-mobile{display:none !important}
@media (min-width:1024px){
  .hide-mobile{display:initial !important}
  .icon-btn.hide-mobile{display:inline-flex !important}
  .hide-desktop{display:none !important}
}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--topbar-h);
  background:var(--color-topbar-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;gap:12px;
}
@media (min-width:1024px){ .topbar{padding:0 20px} }
.topbar-left{display:flex;align-items:center;gap:24px;min-width:0}
.topbar-right{display:flex;align-items:center;gap:8px;min-width:0}
.topbar-right .btn.sm,.topbar-right .icon-btn{flex-shrink:0}

.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand svg{width:22px;height:22px}
.brand-name{font-family:var(--font-display);font-size:var(--fs-16);font-weight:700;letter-spacing:.02em}

.topnav{display:none}
@media (min-width:1024px){
  .topnav{display:flex;align-items:center;gap:4px}
  .topnav a{
    font-size:var(--fs-13);font-weight:500;color:var(--txt-2);
    padding:6px 10px;border-radius:8px;white-space:nowrap;
  }
  .topnav a:hover{color:var(--txt)}
  .topnav a.active{color:var(--txt);background:var(--panel-2)}
}

.wallet-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 10px;border-radius:var(--r-m);
  background:var(--panel-2);border:1px solid var(--line);
  font-size:var(--fs-12);font-weight:600;white-space:nowrap;
  min-width:0;overflow:hidden;
}
.wallet-chip .mono{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wallet-chip:hover{border-color:var(--color-border-hover)}
.wallet-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--long);flex-shrink:0}

.icon-btn{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;color:var(--txt-2);
}
.icon-btn:hover{background:var(--panel-2);color:var(--txt)}
.icon-btn svg{width:18px;height:18px}

/* ---------- Bottom Nav (mobile) ---------- */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--color-bottomnav-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex;
}
@media (min-width:1024px){ .bottomnav{display:none} }
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--txt-3);font-size:var(--fs-11);font-weight:500;
}
.bn-item svg{width:21px;height:21px}
.bn-item.active{color:var(--mint)}
.bn-item:active{opacity:.75}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border-radius:var(--r-m);
  background:var(--mint);color:var(--mint-ink);
  font-size:var(--fs-13);font-weight:600;white-space:nowrap;
  transition:filter .15s,opacity .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.95)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{height:30px;padding:0 12px;font-size:var(--fs-12)}
.btn.lg{height:44px;padding:0 20px;font-size:var(--fs-14);border-radius:var(--r-m)}
.btn.full{width:100%}
.btn-ghost{background:var(--panel-2);color:var(--txt)}
.btn-ghost:hover{filter:none;background:var(--color-surface-hover)}
.btn-outline{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn-outline:hover{filter:none;border-color:var(--color-border-hover);background:var(--panel-2)}
.btn-mint-soft{background:var(--mint-soft);color:var(--mint)}
.btn-long{background:var(--long);color:var(--color-on-market)}
.btn-short{background:var(--short);color:var(--color-on-market)}

/* ---------- Segmented control ---------- */
.seg{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);padding:3px;
}
.seg-item{
  height:28px;padding:0 12px;border-radius:7px;
  font-size:var(--fs-12);font-weight:500;color:var(--txt-2);
  display:inline-flex;align-items:center;white-space:nowrap;
}
.seg-item:hover{color:var(--txt)}
.seg-item.active{background:var(--panel-2);color:var(--txt);font-weight:600}

/* ---------- Tabs (underline) ---------- */
.tabs{
  display:flex;gap:20px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  height:40px;display:inline-flex;align-items:center;flex-shrink:0;
  font-size:var(--fs-13);font-weight:500;color:var(--txt-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--txt);border-bottom-color:var(--mint);font-weight:600}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  height:26px;padding:0 10px;border-radius:var(--r-s);
  background:var(--panel-2);color:var(--txt-2);
  font-size:var(--fs-12);font-weight:500;white-space:nowrap;
}
.chip:hover{color:var(--txt)}
.chip.active{background:var(--mint-soft);color:var(--mint);font-weight:600}

/* ---------- Cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);padding:16px;
}
.card-title{font-family:var(--font-display);font-size:var(--fs-14);font-weight:600;margin-bottom:12px}
.stat-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);padding:16px;
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.stat-label{font-size:var(--fs-11);font-weight:500;color:var(--txt-2);letter-spacing:.02em}
.stat-value{font-size:var(--fs-22);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
/* 「ラベル 1,234.56 USDT」等が数値の途中で折り返さないよう、空白位置でのみ改行 */
.stat-sub{font-size:var(--fs-12);color:var(--txt-3);word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:1024px){
  .stat-card.hero .stat-value{font-size:var(--fs-28)}
}

/* ---------- Tables ---------- */
.tbl{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;
}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;border-collapse:collapse}
.tbl th{
  font-size:var(--fs-11);font-weight:500;color:var(--txt-3);
  text-align:left;padding:10px 12px;white-space:nowrap;
  border-bottom:1px solid var(--line-soft);
}
.tbl td{
  font-size:var(--fs-13);padding:12px;white-space:nowrap;
  border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;
}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--panel-2)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl.dense td{padding:9px 12px;font-size:var(--fs-12)}
.tbl .sticky-row td{background:var(--mint-soft)}
.tbl .sticky-row:hover td{background:var(--mint-soft)}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  height:20px;padding:0 8px;border-radius:6px;
  font-size:var(--fs-11);font-weight:600;white-space:nowrap;
}
.badge.long{background:var(--long-soft);color:var(--long)}
.badge.short{background:var(--short-soft);color:var(--short)}
.badge.mint{background:var(--mint-soft);color:var(--mint)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.soft{background:var(--panel-2);color:var(--txt-2)}

/* ---------- Forms ---------- */
.field{
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-s);padding:8px 12px;
  display:flex;flex-direction:column;gap:2px;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.field:focus-within{border-color:var(--color-focus-ring)}
.field-label{font-size:var(--fs-11);color:var(--txt-3)}
.field-row{display:flex;align-items:center;gap:8px}
.input{
  background:transparent;border:none;outline:none;
  color:var(--txt);font-size:var(--fs-14);font-weight:600;
  width:100%;min-width:0;font-variant-numeric:tabular-nums;
}
.input::placeholder{color:var(--txt-3);font-weight:400}
.input-unit{font-size:var(--fs-12);font-weight:600;color:var(--txt-2);flex-shrink:0}

/* ---------- Slider ---------- */
.zslider{
  --slider-pct:0%;
  width:100%;display:block;-webkit-appearance:none;appearance:none;
  height:36px;background:transparent;cursor:pointer;touch-action:pan-y;
}
.zslider::-webkit-slider-runnable-track{
  height:4px;
  background:linear-gradient(90deg,var(--mint) 0 var(--slider-pct),var(--line) var(--slider-pct) 100%);
  border-radius:2px;
}
.zslider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--txt);border:2px solid var(--mint);
  margin-top:-7px;
}
.zslider::-moz-range-track{height:4px;background:var(--line);border-radius:2px}
.zslider::-moz-range-progress{height:4px;background:var(--mint);border-radius:2px}
.zslider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--txt);border:2px solid var(--mint)}

/* ---------- Checkbox ---------- */
.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:var(--fs-12);color:var(--txt-2);user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:16px;height:16px;border-radius:4px;flex-shrink:0;
  border:1px solid var(--line);background:var(--bg-elev);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s;
}
.check .box svg{width:10px;height:10px;opacity:0;stroke:var(--mint-ink)}
.check input:checked + .box{background:var(--mint);border-color:var(--mint)}
.check input:checked + .box svg{opacity:1}
.check:hover .box{border-color:var(--color-border-hover)}

/* ---------- Modal / Sheet ---------- */
.modal-bg{
  position:fixed;inset:0;z-index:100;
  background:var(--color-modal-scrim);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;
}
.modal-bg.open{display:flex}
.modal{
  width:100%;max-height:86vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-l) var(--r-l) 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  animation:sheetUp var(--dur-ui) var(--ease-out);
}
@media (min-width:720px){
  .modal-bg{align-items:center;padding:24px}
  .modal{
    width:420px;border-radius:var(--r-l);
    padding:20px;animation:popIn var(--dur-ui) var(--ease-out);
  }
}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes popIn{from{transform:scale(.97);opacity:.6}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h3{font-size:var(--fs-16);font-weight:600}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(var(--topbar-h) + 12px);z-index:200;
  background:var(--color-surface-hover);border:1px solid var(--line);
  border-radius:var(--r-m);padding:10px 16px;
  font-size:var(--fs-13);font-weight:500;
  display:flex;align-items:flex-start;gap:8px;
  box-shadow:0 8px 24px var(--color-shadow);
  animation:toastIn var(--dur-ui) var(--ease-out);max-width:calc(100vw - 32px);
}
.toast .tick{color:var(--mint)}
.toast>span:last-child{min-width:0}
@keyframes toastIn{from{transform:translate(-50%,-8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ---------- Empty / Skeleton ---------- */
.empty{
  padding:40px 16px;text-align:center;color:var(--txt-3);font-size:var(--fs-13);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.empty svg{width:28px;height:28px;opacity:.45}
.skel{
  background:linear-gradient(90deg,var(--panel-2) 25%,var(--color-surface-hover) 37%,var(--panel-2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s infinite;border-radius:6px;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Rank badge ---------- */
.rank-badge{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-12);font-weight:600;
  background:var(--panel-2);color:var(--txt-2);
}
.rank-badge.r1{background:var(--warn-soft);color:var(--warn)}
.rank-badge.r2{background:var(--color-rank-silver-soft);color:var(--color-rank-silver)}
.rank-badge.r3{background:var(--color-rank-bronze-soft);color:var(--color-rank-bronze)}

/* ---------- Page scaffold ---------- */
.page{max-width:1200px;margin:0 auto;padding:20px 16px 48px}
@media (min-width:1024px){ .page{padding:28px 24px 64px} }
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:24px;
}
.page-head h1{font-size:var(--fs-22)}
@media (min-width:1024px){ .page-head h1{font-size:var(--fs-28)} }
.page-sub{font-size:var(--fs-13);color:var(--txt-2);margin-top:4px;max-width:560px}
.page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.section-title{
  font-family:var(--font-display);font-size:var(--fs-16);font-weight:600;
  margin:var(--space-2xl) 0 var(--space-sm);
}
.section-title.section-title--compact{margin-top:var(--space-xl);margin-bottom:var(--space-xs)}
.section-title.section-title--open{margin-top:var(--space-3xl);margin-bottom:var(--space-md)}

/* ---------- Grid helpers ---------- */
.grid{display:grid;gap:12px}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

/* ---------- Menu sheet items ---------- */
.menu-list{display:flex;flex-direction:column}
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 4px;font-size:var(--fs-14);font-weight:500;
  border-bottom:1px solid var(--line-soft);
}
.menu-item:last-child{border-bottom:none}
.menu-item svg{width:20px;height:20px;color:var(--txt-2)}
.menu-item:active{opacity:.7}
.menu-item .arrow{margin-left:auto;color:var(--txt-3)}
.menu-item .lang-check{visibility:hidden;color:var(--mint);font-weight:700}
.menu-item.active .lang-check{visibility:visible}
.lang-flag{
  position:relative;width:28px;height:28px;border-radius:50%;overflow:hidden;
  flex-shrink:0;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.lang-flag.ja{background:#fff}
.lang-flag.ja::after{
  content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:#bc002d;left:50%;top:50%;transform:translate(-50%,-50%);
}
.lang-flag.en{
  background:repeating-linear-gradient(to bottom,#b22234 0 2px,#fff 2px 4px);
}
.lang-flag.en::after{
  content:"";position:absolute;left:0;top:0;width:14px;height:14px;
  background:#3c3b6e;
}

/* ---------- Wallet options ---------- */
.wallet-opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--panel-2);margin-bottom:8px;
  font-size:var(--fs-14);font-weight:600;text-align:left;
}
.wallet-opt:hover{border-color:#2C3542}
.wallet-opt .w-ic{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev);font-size:16px;overflow:hidden;
}
.wallet-opt .w-ic img{width:22px;height:22px;object-fit:contain;display:block}
.wallet-opt .tag{margin-left:auto;font-size:var(--fs-11);font-weight:500;color:var(--txt-3)}

/* ---------- Network / asset rows (deposit modal) ---------- */
.net-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-m);
  margin-bottom:8px;font-size:var(--fs-13);font-weight:600;
}
.net-row.active{border-color:rgba(79,224,196,.5);background:var(--mint-soft)}
.net-row.disabled{opacity:.45}
.net-row .n-ic{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-elev);font-size:12px;font-weight:700;overflow:hidden}
.net-row .n-ic img{width:100%;height:100%;border-radius:50%;display:block}
.net-row .tag{margin-left:auto;font-size:var(--fs-11);font-weight:500;color:var(--txt-3)}
.net-row.active .tag{color:var(--mint)}

.addr-box{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-s);
  padding:10px 12px;margin-top:8px;
}
.addr-box code{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--txt);word-break:break-all}

.note-box{
  background:var(--panel-2);border-radius:var(--r-s);
  padding:10px 12px;font-size:var(--fs-12);color:var(--txt-2);
  margin-top:12px;line-height:1.7;
}
.note-box b{color:var(--warn);font-weight:600}

.balance-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:8px;font-size:var(--fs-12);color:var(--txt-2);
}
.balance-row .v{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.input-action{
  flex-shrink:0;color:var(--mint);font-size:var(--fs-12);font-weight:700;
  padding:4px 2px;min-width:34px;text-align:center;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:48px;padding:20px 16px calc(20px + env(safe-area-inset-bottom));
}
.site-footer .inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  font-size:var(--fs-12);color:var(--txt-3);
}
.site-footer a:hover{color:var(--txt-2)}
.site-footer .links{display:flex;gap:16px}

/* ---------- Spark (inline svg sparkline) ---------- */
.spark{display:block}

/* ---------- Mobile tap targets ---------- */
@media (max-width:1023px){
  .chip{height:32px}
  .seg-item{height:32px}
  .btn.sm{height:32px}
}

/* ---------- Price flash ---------- */
@keyframes flashUp{0%{background:var(--long-soft)}100%{background:transparent}}
@keyframes flashDown{0%{background:var(--short-soft)}100%{background:transparent}}
.flash-up{animation:flashUp .5s var(--ease-out)}
.flash-down{animation:flashDown .5s var(--ease-out)}