/* OpenCC 控制台页面级样式。只使用 tokens 变量，无硬编码颜色/阴影/滤镜 */

.skip-link {
  position: absolute;
  top: -999px;
  left: var(--sp-4);
  z-index: 1000;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--sp-4);
}

.account-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
}
.account-device-info { overflow-wrap: anywhere; }

/* 应用双栏布局 */
.console-layout {
  display: flex;
  min-height: calc(100vh - var(--site-header-height, 64px));
}

.console-sidebar {
  width: var(--w-side);
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-sunken);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-4);
}

.auth-brand-mark {
  display: block;
  width: 80px;
  height: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sidebar-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-3);
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}

.sidebar-nav .nav-item:hover {
  color: var(--ink);
  background: var(--surface);
}

.sidebar-nav .nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sidebar-nav .nav-item[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--surface);
  border-color: var(--line);
  font-weight: 600;
}

.sidebar-nav .nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-3);
  bottom: var(--sp-3);
  width: 3px;
  background: var(--accent);
  border-radius: var(--r-pill);
}

.nav-item-icon {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color var(--t-fast);
}

.nav-item:hover .nav-item-icon,
.nav-item[aria-current="page"] .nav-item-icon {
  color: currentColor;
}

.sidebar-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sidebar-email {
  font-size: var(--fs-2);
  color: var(--ink-3);
  word-break: break-all;
  padding: 0 var(--sp-1);
}

/* 主内容区域 */
.console-main {
  flex: 1;
  min-width: 0;
  max-width: var(--w-console);
  padding: var(--sp-6) var(--sp-5);
  margin: 0 auto;
}

/* 密码标签行：base.css 的 .field > .label 会把 flex 行压成 block，这里还原 */
.field > .row-between.label { display: flex; }

/* 登录：将品牌与表单收拢到同一个居中的阅读区域。 */
.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: center;
  gap: var(--sp-9);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
  min-height: calc(100vh - var(--site-header-height, 64px));
}

.auth-hero {
  min-width: 0;
  padding-block: var(--sp-5);
}

.auth-hero h1 {
  margin-top: var(--sp-5);
  font-size: var(--fs-8);
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.auth-hero-heading {
  margin: var(--sp-5) 0 var(--sp-4);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.6;
}

.auth-hero-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-4);
  line-height: 1.9;
}

.auth-product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2);
  color: var(--ink-3);
}

.auth-product-meta a {
  color: var(--accent-ink);
  text-underline-offset: 4px;
}

.auth-form-wrap {
  min-width: 0;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.auth-form-header { margin-bottom: var(--sp-5); text-align: center; }
.auth-form-header h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.4;
}
.auth-form { display: grid; gap: 20px; }
.auth-form > :empty { display: none; }
.auth-form .field > label { margin-bottom: var(--sp-2); }
.auth-form .field-error:empty, .auth-form .hint:empty { display: none; }
.auth-form .input, .auth-form .btn { min-height: 48px; }
.auth-form .input { font-size: 16px; }
.auth-form .email-code-row { gap: var(--sp-2); }
.auth-form .email-code-send { font-size: var(--fs-2); padding-inline: var(--sp-3); }
.auth-form .auth-referral-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.auth-referral-label .small { font-size: var(--fs-1); font-weight: 400; }
.auth-form .btn-primary { font-weight: 600; }
.auth-form .auth-dev-button {
  min-height: 40px;
  font-size: var(--fs-2);
  color: var(--ink-3);
}
.auth-form-footer {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.auth-form-footer a { color: inherit; text-decoration: none; }
.auth-form-footer a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 1000px) {
  .auth-page { gap: var(--sp-7); grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .auth-page { padding-block: var(--sp-5); }
}

/* 概览统计条 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
  gap: var(--sp-4);
}

.stat-item {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
}

.stat-label {
  font-size: var(--fs-2);
  color: var(--ink-3);
  margin-bottom: var(--sp-1);
}

.stat-value {
  font-size: var(--fs-6);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}

/* 开始使用清单 */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  gap: var(--sp-3);
}

.checklist-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.checklist-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-1);
  color: var(--ink-3);
}

.checklist-check.is-done {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 600;
}

/* 密钥等宽前缀 */
.key-prefix {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--ink);
}

/* 表格横向滚动容器 */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
}

.table-scroll .table {
  min-width: 600px;
}

.table-scroll .table td {
  vertical-align: middle;
}

/* 用户选定的冷灰蓝用量表；颜色仅作用于本页，不改共享设计令牌。 */
.usage-page {
  --usage-blue: light-dark(hsl(218 64% 44%), hsl(216 100% 81%));
  --usage-tint: color-mix(in srgb, var(--usage-blue) 7%, var(--surface));
  --usage-line: color-mix(in srgb, var(--usage-blue) 22%, var(--line));
}

.usage-pricing-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-2);
}

.usage-pricing-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
}

.usage-pricing-note strong { font-weight: 600; }
.usage-table-scroll { border-color: var(--usage-line); border-radius: var(--r-card); }
.usage-table-scroll .usage-table { min-width: 800px; }
.usage-table th { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); border-color: var(--line); padding-block: calc(var(--sp-3) / 2); }
.usage-table th.usage-token-heading { text-align: center; }
.usage-table td { padding-block: calc(var(--sp-3) / 2); }
.usage-table tbody tr:hover { background: color-mix(in srgb, var(--usage-blue) 3%, var(--surface)); }
.usage-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--sp-1) / 2); }
.usage-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-time-clock { color: var(--ink); font-weight: 500; }
.usage-time-date { color: var(--ink-3); font-size: var(--fs-1); }
.usage-model { color: var(--ink); font-weight: 600; white-space: nowrap; }
.usage-request-id.btn { min-height: 24px; padding: 0; border: 0; border-radius: var(--sp-1); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-1); font-weight: 400; }
.usage-request-id.btn:hover { color: var(--usage-blue); background: var(--usage-tint); }

.usage-token-group {
  display: grid;
  gap: calc(var(--sp-1) / 2);
  min-width: 106px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--usage-line);
  border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--usage-blue) 3%, var(--surface));
}

.usage-token-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.usage-token-label { color: var(--ink-3); font-family: var(--font-sans); font-size: var(--fs-1); }
.usage-token-value { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.usage-cost { display: inline-block; padding: var(--sp-1) var(--sp-2); border-radius: var(--sp-1); color: var(--usage-blue); background: var(--usage-tint); font-family: var(--font-mono); font-weight: 600; }
.usage-discount { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-1); }
.usage-status { min-width: 84px; max-width: 220px; }
.usage-status > .row { flex-wrap: wrap; }

@media (pointer: coarse) {
  .usage-request-id.btn { min-height: 44px; }
}

.usage-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.usage-page-label {
  min-width: 5.5em;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
}

/* 单选框强调色 */
input[type="radio"] {
  accent-color: var(--accent);
}

/* 实用语义类（替代内联样式） */
.form-narrow {
  max-width: 440px;
}

.row-gap-1 {
  gap: var(--sp-1);
}

.row-gap-2 {
  gap: var(--sp-2);
}

.row-gap-3 {
  gap: var(--sp-3);
}

.radio-chip {
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.radio-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--ink);
}

.radio-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mt-2 {
  margin-top: var(--sp-2);
}

.mt-3 {
  margin-top: var(--sp-3);
}

.code-scroll {
  max-height: 240px;
  overflow-y: auto;
}

.snippet-row {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}

.disclosure {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
}

.disclosure > summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: var(--fs-3);
}

.disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.disclosure[open] > summary {
  margin-bottom: var(--sp-3);
  color: var(--ink);
}

/* 响应式调整 */
@media (max-width: 900px) {
  .console-layout {
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }
  .console-sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
  }
  .console-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--sp-5) var(--sp-4);
  }
  .sidebar-nav {
    flex-direction: row;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--sp-2);
    padding: var(--sp-1);
    scroll-padding-inline: var(--sp-1);
  }
  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .sidebar-nav .nav-item {
    flex-shrink: 0;
    gap: var(--sp-2);
    min-height: 44px;
    white-space: nowrap;
    padding: var(--sp-2) var(--sp-3);
  }
  .sidebar-nav .nav-item[aria-current="page"]::before {
    left: var(--sp-2);
    right: var(--sp-2);
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
  }
  .sidebar-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 0;
    padding-top: var(--sp-2);
  }
  .sidebar-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  .auth-page {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    max-width: 480px;
    min-height: 0;
    padding: var(--sp-6) var(--sp-4) var(--sp-7);
  }
  .auth-hero { display: none; }
  .auth-form-wrap {
    padding: var(--sp-5);
  }
}

@media (max-width: 640px) {
  .btn, .input {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

.email-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.email-code-row > .input {
  min-width: 0;
}

.email-code-send {
  white-space: nowrap;
  padding-inline: 12px;
}

/* 概览：暖色工作台，统计与趋势保持独立层次。 */
@media (min-width: 901px) {
  .console-main:has(.overview-page) { max-width: 1440px; }
}
.overview-page { gap: var(--sp-5); }
.overview-header, .overview-toolbar, .overview-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.overview-header h1 { font-size: var(--fs-6); margin-bottom: var(--sp-2); }
.overview-eyebrow { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .12em; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.overview-range { display: inline-flex; gap: var(--sp-1); background: var(--bg-sunken); padding: var(--sp-1); border-radius: var(--r-ctl); }
.overview-range-btn { border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--ink-3); padding: 5px 12px; cursor: pointer; font: inherit; font-size: var(--fs-2); white-space: nowrap; }
.overview-range-btn[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); }
.overview-range-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.overview-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.overview-page > div:empty { display: none; }
.overview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.overview-stat { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); min-width: 0; }
.overview-stat-label { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-2); }
.overview-stat-label .icon { color: var(--accent); }
.overview-stat-value { font-family: var(--font-serif); font-size: clamp(24px, 2.2vw, 36px); font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
.overview-balance { background: var(--bg-sunken); border-color: var(--line-strong); }
.overview-balance .btn { align-self: flex-start; margin-top: var(--sp-1); }
.overview-gift { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.overview-gift-heading { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.overview-gift .overview-stat-label, .overview-gift .overview-stat-value { color: var(--accent-ink); }
.overview-gift-badge { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--sp-1); padding: 1px 6px; font-size: var(--fs-1); color: var(--accent-ink); }
.overview-gift .btn { align-self: flex-start; margin-top: auto; color: var(--accent-ink); border-color: var(--accent); background: transparent; }
.overview-usage-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-2); }
.overview-usage-metrics > div { min-width: 0; }
.overview-usage-metrics > div + div { border-left: 1px solid var(--line); padding-left: var(--sp-3); }
.overview-usage-metrics .overview-stat-value { font-size: clamp(22px, 1.8vw, 30px); margin-block: var(--sp-1); }
.registration-gift-dialog { position: relative; max-width: 440px; text-align: center; }
.registration-gift-dialog h2 { margin: 0; font-size: var(--fs-5); }
.registration-gift-eyebrow { color: var(--accent-ink); font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.registration-gift-close { position: absolute; top: var(--sp-2); right: var(--sp-2); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-3); cursor: pointer; }
.registration-gift-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.registration-gift-dialog .business-cooperation-qr { max-height: min(44dvh, 360px); }
.registration-gift-next { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.overview-finance { padding-inline: var(--sp-1); }
.overview-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--sp-5); }
.overview-panel { min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
.overview-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-5); border-bottom: 1px solid var(--line); }
.overview-panel-head h2 { font-family: var(--font-sans); font-size: var(--fs-4); font-weight: 600; margin-bottom: var(--sp-1); }
.overview-models { padding: var(--sp-5); }
.overview-chart-body { padding: var(--sp-4) var(--sp-5); }
.overview-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; min-height: 208px; color: var(--ink-2); }
.overview-chart-empty > .icon { color: var(--ink-3); margin-bottom: var(--sp-2); }
.overview-chart { display: block; width: 100%; height: auto; min-height: 160px; }
.overview-gridline { stroke: var(--line); stroke-width: 1; }
.overview-chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.overview-chart-area { fill: var(--accent); fill-opacity: .07; }
.overview-chart-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; transition: r .12s; }
.overview-chart-wrap { position: relative; }
.overview-chart-hit { outline: none; cursor: crosshair; }
.overview-chart-hitbox { fill: transparent; }
.overview-chart-guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.overview-chart-hit:hover .overview-chart-guide, .overview-chart-hit:focus .overview-chart-guide { opacity: .6; }
.overview-chart-hit:hover .overview-chart-dot, .overview-chart-hit:focus .overview-chart-dot { r: 6; fill: var(--accent); }
.overview-chart-tip { position: absolute; z-index: 2; min-width: 168px; padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); font-size: var(--fs-1); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.overview-chart-tip[hidden] { display: none; }
.overview-chart-tip[data-align="start"] { transform: translate(-12px, calc(-100% - 12px)); }
.overview-chart-tip[data-align="end"] { transform: translate(calc(-100% + 12px), calc(-100% - 12px)); }
.overview-chart-tip .row-between { display: flex; justify-content: space-between; gap: var(--sp-4); }
.overview-chart-axis { display: flex; justify-content: space-between; margin-top: var(--sp-2); }
.overview-chart-details { margin-top: var(--sp-3); color: var(--ink-3); }
.overview-chart-details summary { cursor: pointer; }
.overview-models { max-height: 320px; overflow: auto; }
.overview-model + .overview-model { margin-top: var(--sp-5); }
.overview-model strong { font-size: var(--fs-2); overflow-wrap: anywhere; }
.overview-model meter { display: block; width: 100%; height: 10px; margin: var(--sp-2) 0; }
.overview-model meter::-webkit-meter-bar { background: var(--bg-sunken); border: 0; }
.overview-model meter::-webkit-meter-optimum-value { background: var(--accent); }
.overview-model meter::-moz-meter-bar { background: var(--accent); }
.overview-recent-empty { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); flex-wrap: wrap; }
.overview-recent-empty > .icon { color: var(--ink-3); }
.overview-recent-empty > div { flex: 1; }
.overview-recent-empty .btn { white-space: nowrap; }
.overview-panel .table-scroll { margin: 0; }
.overview-panel .table { margin: 0; }
.overview-footer { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
@media (max-width: 1200px) {
  .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .overview-analysis-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-stats { gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
  .overview-stat { padding: var(--sp-4); }
  .overview-stat-value { font-size: var(--fs-5); }
  .overview-toolbar { width: 100%; justify-content: space-between; gap: var(--sp-2); }
  .overview-toolbar > .overview-range { width: 100%; }
  .overview-range-btn { min-height: 44px; padding: 5px 10px; }
  .overview-panel-head { padding: var(--sp-4); }
  .overview-models, .overview-chart-body { padding: var(--sp-4); }
  .overview-recent-empty > div { flex-basis: calc(100% - 40px); }
  .overview-finance { overflow-wrap: anywhere; }

  body[data-page="console"] {
    --site-header-height: 64px;
  }
  body[data-page="console"] .site-header {
    height: 64px;
  }
  body[data-page="console"] .site-nav {
    flex-wrap: nowrap;
    height: 64px;
    min-height: 64px;
    padding: 0;
    gap: var(--sp-2);
  }
  body[data-page="console"] .brand-link {
    min-width: 0;
  }
  body[data-page="console"] .brand-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-page="console"] .site-nav-actions {
    flex-wrap: nowrap;
    gap: var(--sp-1);
    min-width: 0;
  }
  body[data-page="console"] .site-nav-actions .nav-link,
  body[data-page="console"] .nav-btn-lang {
    white-space: nowrap;
    flex-shrink: 0;
  }
  body[data-page="console"] .nav-btn-announcements {
    position: relative;
    width: 44px;
    justify-content: center;
    padding: 0;
  }
  body[data-page="console"] .nav-btn-announcements[data-unread="true"]::after {
    left: calc(50% + 2px);
  }
  body[data-page="console"] .nav-btn-announcements > span,
  body[data-page="console"] .nav-user-email {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body[data-page="console"] .nav-tab-console {
    display: none;
  }
  body[data-page="console"] .site-user-link {
    position: relative;
    width: 44px;
    max-width: 44px;
    justify-content: center;
    padding: 0;
  }

  .console-main {
    padding-bottom: 96px;
  }
  .console-sidebar {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
  }
  .sidebar-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    overflow: visible;
    gap: var(--sp-2);
    padding: 0;
  }
  .sidebar-nav .nav-item {
    justify-content: center;
    min-width: 0;
    padding: var(--sp-2);
    font-size: var(--fs-2);
    gap: var(--sp-1);
  }
  .nav-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .console-main h1,
  .overview-header h1 {
    font-size: var(--fs-5);
  }
  .console-main .row-between {
    align-items: flex-start;
  }
  .console-main .row-between > * {
    min-width: 0;
  }
  .console-main form.row,
  .console-main .row:has(> .input) {
    flex-direction: column;
    align-items: stretch;
  }
  .console-main form.row > .input,
  .console-main .row:has(> .input) > .input,
  .console-main form.row > .btn,
  .console-main .row:has(> .input) > .btn {
    width: 100%;
  }
  .notice.row-between {
    flex-direction: column;
    align-items: stretch;
  }
  .notice.row-between > .btn {
    align-self: flex-start;
  }
  .stat-value {
    overflow-wrap: anywhere;
    font-size: var(--fs-5);
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  body[data-page="console"] .sc-launcher {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  body[data-page="console"] .sc-launcher > span:not(.sc-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body[data-page="console"] .sc-launcher .sc-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    margin: 0;
  }
}

.invite-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.invite-page > * { min-width: 0; }
.invite-hero {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-sunken);
}
.invite-kicker {
  margin: 0;
  color: var(--accent-ink);
  font-size: var(--fs-2);
  font-weight: 600;
}
.invite-hero h1 {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-6);
  line-height: 1.25;
}
.invite-lead { margin: 0; max-width: 66ch; color: var(--ink-2); }
.invite-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.invite-offer {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
}
.invite-offer-value {
  font-family: var(--font-serif);
  font-size: var(--fs-6);
  font-weight: 560;
  line-height: 1.1;
}
.invite-offer-title { margin-top: var(--sp-2); font-weight: 600; }
.invite-offer-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.invite-commission-button { min-height: 32px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1); }
.invite-offer-text { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: var(--fs-2); }
.invite-share {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.invite-code-label { margin: 0 0 var(--sp-2); color: var(--ink-3); font-size: var(--fs-2); }
.invite-code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-6);
  letter-spacing: 0.14em;
  line-height: 1;
}
.invite-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.invite-link {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-2);
  word-break: break-all;
}
.invite-withdraw {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.invite-withdraw .input { flex: 1 1 180px; width: auto; max-width: 240px; }
@media (max-width: 720px) {
  .invite-hero { padding: var(--sp-5); }
  .invite-offers { grid-template-columns: 1fr; }
  .invite-code { font-size: var(--fs-5); letter-spacing: 0.08em; }
  .invite-withdraw .input { max-width: none; }
}

/* Keep header actions visible without changing their touch targets. */
@media (max-width: 360px) {
  body[data-page="console"] .nav-brand { min-width: 0; }
  body[data-page="console"] .brand-link { max-width: 100%; }
  body[data-page="console"] .site-nav-actions { flex-shrink: 0; }
}