@font-face {
  font-family:"Fraunces";
  src:url("vendor/fonts/fraunces-5.2.9-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:"Hanken Grotesk";
  src:url("vendor/fonts/hanken-grotesk-5.2.8-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:"IBM Plex Mono";
  src:url("vendor/fonts/ibm-plex-mono-5.2.7-latin-400.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"IBM Plex Mono";
  src:url("vendor/fonts/ibm-plex-mono-5.2.7-latin-500.woff2") format("woff2");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face {
  font-family:"IBM Plex Mono";
  src:url("vendor/fonts/ibm-plex-mono-5.2.7-latin-600.woff2") format("woff2");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}

:root {
  color-scheme:light;
  --paper:#f1ece1;
  --card:#fbf9f3;
  --panel:#f6f1e8;
  --ink:#23201a;
  --ink-soft:#5f594d;
  --ink-faint:#6d675b;
  --line:#ded7c6;
  --line-strong:#cdc5af;
  --navy:#1f3b54;
  --navy-soft:#3a5a76;
  --bull:#147442;
  --bear:#a93228;
  --gold:#8a5a14;
  --nested:var(--gold);
  --daily:#286f9e;
  --weekly:#6c5a94;
  --pos:var(--bull);
  --neg:var(--bear);
  /* 面板/卡片/按钮 hover 统一底色，行 hover 另有 --row-hover。 */
  --surface-hover:#eee8dd;
  /* 数据表行状态色(2026-07-15 组件层一期): 原 #efe7d6 硬编码散落 5 页、crypto 独用近似色,
     zebra alpha 在 .45/.5 间分叉——token 化收敛(审查 design-token/duplication P2)。 */
  --row-hover:#efe7d6;
  --row-zebra:rgba(246,241,232,.45);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk","Noto Sans JP Variable",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*, *::before, *::after { box-sizing:border-box; }

/* 暖纸双径向渐变页底(组件层一期): 原 A/B 两族渐变散落 5 页(差异仅 2% 径向中心, 肉眼不可辨),
   统一为 B 族取值; body 加 class="bg-warm" 使用。ranking/stockchar(扁平)与 index/crypto(专属)不参与。 */
.bg-warm {
  background:
    radial-gradient(115% 75% at 84% -14%, #faf6ee 0%, rgba(250,246,238,0) 56%),
    radial-gradient(82% 58% at -10% -6%, #ece5d6 0%, rgba(236,229,214,0) 52%),
    var(--paper);
  background-attachment:fixed;
}

/* 胶囊基形取 weekly 版；BULL/BEAR 涨跌色语义在组件层一期已上提。 */
.pill {
  display:inline-block;
  min-width:52px;
  padding:2px 8px;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:750;
  font-size:11.5px;
  text-align:center;
}
.pill.BULL { background:color-mix(in srgb, var(--bull) 13%, transparent); color:var(--bull); }
.pill.BEAR { background:color-mix(in srgb, var(--bear) 12%, transparent); color:var(--bear); }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline:3px solid #2f6db0;
  outline-offset:3px;
}

.masthead {
  padding:30px 40px 22px;
  border-bottom:1px solid var(--line-strong);
  display:flex;
  align-items:flex-end;
  gap:28px;
  flex-wrap:wrap;
}
.masthead nav { margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.masthead nav a {
  color:var(--navy);
  text-decoration:none;
  font-size:13px;
  padding-bottom:2px;
  border-bottom:1.5px solid transparent;
  white-space:nowrap;
}
.masthead nav a:hover, .masthead nav a.active, .masthead nav a[aria-current="page"] { border-color:var(--navy); }

.kira-global-nav {
  display:flex;
  align-items:center;
  gap:4px !important;
  flex-wrap:wrap;
}
.masthead .kira-global-nav { margin-left:auto; }
.kira-global-nav a {
  min-height:36px;
  display:inline-flex;
  align-items:center;
  padding:8px 10px !important;
  border:1px solid transparent !important;
  border-radius:8px;
  color:var(--ink-soft) !important;
  font-family:var(--sans);
  font-size:12.5px !important;
  font-weight:650;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.kira-global-nav a:hover {
  border-color:var(--line-strong) !important;
  background:var(--panel);
  color:var(--navy) !important;
}
.kira-global-nav a[aria-current] {
  border-color:var(--navy) !important;
  background:var(--navy);
  color:var(--card) !important;
}
.kira-session {
  min-width:0;
  margin-left:6px;
  padding-left:10px;
  border-left:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  gap:5px;
}
.kira-session .kira-admin-link {
  color:var(--navy) !important;
}
.kira-session-user {
  max-width:150px;
  overflow:hidden;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kira-session-form { margin:0; }
.kira-logout-button {
  min-height:34px;
  padding:7px 10px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--card);
  color:var(--navy);
  cursor:pointer;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:650;
}
.kira-logout-button:hover { background:var(--surface-hover); }
.kira-logout-button:disabled { cursor:wait; opacity:.7; }
.kira-global-nav-shell {
  padding:12px 40px;
  border-bottom:1px solid var(--line-strong);
  background:rgba(251,249,243,.84);
}
.kira-global-nav-shell > .kira-global-nav {
  width:min(1440px, 100%);
  margin:0 auto;
}
.kira-context-shell {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:8px 40px;
  border-bottom:1px solid var(--line);
  background:rgba(246,241,232,.72);
}
.kira-global-nav-shell .kira-context-shell {
  width:min(1440px, 100%);
  min-height:36px;
  margin:10px auto -4px;
  padding:8px 0 0;
  border-top:1px solid var(--line);
  border-bottom:0;
  background:transparent;
}
.kira-context-label {
  flex:0 0 auto;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kira-context-nav {
  display:flex;
  align-items:center;
  gap:6px;
  width:auto !important;
  margin-left:0 !important;
  overflow-x:auto;
  scrollbar-width:thin;
}
.kira-context-nav a {
  flex:0 0 auto;
  padding:5px 9px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.kira-context-nav a:hover {
  border-color:var(--line-strong);
  color:var(--navy);
}
.kira-context-nav a[aria-current] {
  border-color:var(--line-strong);
  background:var(--card);
  color:var(--navy);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.eyebrow {
  color:var(--navy-soft);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.field, .ctl { display:flex; flex-direction:column; gap:7px; }
.field > label, .ctl > label {
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.console {
  margin:26px 40px 0;
  padding:18px 22px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -32px rgba(35,32,26,.55);
  display:flex;
  gap:26px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.toolbar {
  padding:16px 18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 18px 40px -34px rgba(35,32,26,.55);
}
.seg {
  display:inline-flex;
  overflow:hidden;
  flex-wrap:wrap;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:var(--panel);
}
.seg button {
  border:0;
  padding:7px 13px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
}
.seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--navy); color:#fbf9f3; }
.seg button.on.bull { background:var(--bull); }
.seg button.on.bear { background:var(--bear); }
.seg button:not(.on):hover { background:var(--surface-hover); color:var(--ink); }
.datatable { width:100%; border-collapse:collapse; }
.datatable thead th {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
  text-align:right;
  padding:11px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:1;
}
.datatable thead th:first-child, .datatable thead th.l { text-align:left; }
.datatable tbody td {
  padding:9px 12px;
  text-align:right;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:13px;
  white-space:nowrap;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.datatable tbody td.l { text-align:left; font-family:var(--sans); }
.datatable tbody tr:nth-child(odd) td { background:var(--row-zebra); }
.datatable tbody tr:hover td { background:var(--row-hover); }
.datatable tbody tr:last-child td { border-bottom:0; }
.tablecard { scrollbar-gutter:stable; }
/* 涨跌 / 弱化文字的共享语义色(原 ranking/stockchar/weekly-nested/workbench 各写一份)。 */
.pos { color:var(--pos); }
.neg { color:var(--neg); }
.muted { color:var(--ink-faint); }

@media (max-width:640px) {
  :where(button, input, select) { min-height:44px; }
  .masthead nav { margin-left:0 !important; width:100%; flex-wrap:wrap; }
  .kira-global-nav-shell { padding:10px 12px; }
  .kira-global-nav {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .kira-global-nav a {
    min-height:42px;
    justify-content:center;
    padding:8px 6px !important;
  }
  .kira-session {
    grid-column:span 2;
    min-height:44px;
    margin-left:0;
    padding-left:0;
    border-left:0;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
  }
  .kira-session--admin {
    grid-column:1 / -1;
    grid-template-columns:minmax(0, 1fr) auto auto;
  }
  .kira-session-user { display:none; }
  .kira-session .kira-admin-link,
  .kira-session-form,
  .kira-logout-button { width:100%; }
  .kira-context-shell {
    gap:10px;
    padding:8px 12px;
    overflow:hidden;
  }
  .kira-global-nav-shell .kira-context-shell { margin-top:8px; }
  .kira-context-nav { padding:2px 1px; }
  .kira-context-nav a { min-height:34px; display:inline-flex; align-items:center; }
  .tablecard thead th:first-child,
  .tablecard tbody td:first-child {
    position:sticky;
    left:0;
    z-index:2;
    background:var(--card);
    box-shadow:1px 0 0 var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}