/* ==========================================================================
   console.css — 账户体系与控制台（卡片 / 表格 / 模态框 / 表单 / 图表 / toast）
   ========================================================================== */

/* ---------------- 通用：卡片 / 表格 / 徽标 / 按钮 ---------------- */
.ui-card { background: var(--color-card); border: 1px solid var(--color-border-warm); border-radius: 10px; overflow: hidden; }
.ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border-warm); }
.ui-card__head h3 { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--color-text-strong); }
.ui-card__body { padding: 16px; }
.ui-hint { font-size: 12px; line-height: 18px; color: var(--color-text-secondary); }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
#view-tokens .ui-card { overflow-x: auto; }
#view-tokens .tbl { min-width: 1000px; }
.tbl th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-bg-section);
  border-bottom: 1px solid var(--color-border-warm);
  white-space: nowrap;
}
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--color-border-warm); color: var(--color-text); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--color-surface-hover); }
.tbl .m { font-family: var(--font-mono); font-size: 12px; }
.tbl .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl .mut { color: var(--color-text-secondary); }
.tbl .k { color: var(--color-text-strong); font-weight: 500; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: var(--r-999); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.badge--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.badge--off { background: var(--color-bg-section); color: var(--color-text-secondary); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* 模型广场：能力徽章与协议入口列按内容取宽，不被其它列挤压竖排 */
#modelTable th:nth-child(8), #modelTable td:nth-child(8),
#modelTable th:nth-child(9), #modelTable td:nth-child(9) { white-space: nowrap; }

.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--color-border-warm); border-radius: var(--r-6);
  background: var(--color-card); color: var(--color-text);
  font-size: 13px; font-family: var(--font-main);
  white-space: nowrap;
  transition: background-color .15s var(--ease-std), border-color .15s var(--ease-std), color .15s var(--ease-std);
}
.ui-btn:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }
.ui-btn--primary { background: var(--color-invert); border-color: var(--color-invert); color: var(--color-on-invert); }
.ui-btn--primary:hover { background: var(--color-primary-85); color: var(--color-on-invert); }
.ui-btn--danger { color: var(--color-danger); border-color: var(--color-danger-soft); }
.ui-btn--sm { height: 26px; padding: 0 9px; font-size: 12px; }
.ui-btn[disabled] { opacity: .5; cursor: not-allowed; }

.keybox {
  background: var(--color-bg-section); border: 1px solid var(--color-border-warm);
  border-radius: 8px; padding: 12px;
  font-family: var(--font-mono); font-size: 12px; line-height: 19px;
  color: var(--color-text-strong); word-break: break-all;
}
.keywarn { color: var(--color-danger); font-weight: 600; font-size: 12px; margin: 10px 0; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--color-border-warm); font-size: 12px; color: var(--color-text-secondary); }

/* ---------------- 页面骨架：顶栏 + 侧栏 + 内容 ---------------- */
.app { width: 100%; min-height: 100dvh; background: var(--color-bg-page); display: flex; flex-direction: column; }
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 20px;
  background: var(--nav-stuck-bg); backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--color-border-warm);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; }
.appbar__name { font-family: var(--font-hero); font-size: 20px; font-weight: 700; line-height: 20px; color: var(--color-text-strong); }
.appbar__tag { font-size: 11px; line-height: 16px; color: var(--color-text-secondary); font-family: var(--font-mono); white-space: nowrap; }
.appbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.appbar__user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }
.appbar__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-chip); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--color-text-strong); font-family: var(--font-mono); }
.nav__account { white-space: nowrap; }
@media (max-width: 480px) {
  .appbar { padding: 0 12px; gap: 10px; }
  .appbar__tag { display: none; }
  .appbar .nav__menu { display: none; }
}
/* appbar 页（模型 / Key 用量 / 工具 / 控制台）：窄屏保留导航，横向滑动而不是整组消失 */
@media (max-width: 760px) and (min-width: 481px) {
  .appbar .nav__menu { flex: 1; min-width: 0; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .appbar .nav__menu::-webkit-scrollbar { display: none; }
  .appbar .nav__menu .nav__link { padding-inline: 8px; font-size: 13px; }
}
/* 更窄时主题切换与品牌副标让位给导航；主题仍可在首页/文档页设置 */
@media (max-width: 640px) {
  .appbar .theme-dd { display: none; }
  .appbar__tag { display: none; }
  .appbar .nav__menu .nav__link { padding-inline: 7px; }
}

.appbody { flex: 1; display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 0; }
.side { border-right: 1px solid var(--color-border-warm); padding: 16px 12px; background: var(--color-card); }
.side__group { margin-bottom: 18px; }
.side__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-faint); font-family: var(--font-mono); padding: 0 10px 8px; }
.side__link {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px; border-radius: var(--r-6);
  font-size: 14px; color: var(--color-text);
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std);
}
.side__link:hover { background: var(--color-surface-hover); }
.side__link.is-on { background: var(--color-bg-section); color: var(--color-text-strong); font-weight: 600; }
.side__link .mono { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-secondary); margin-left: auto; }

.content { padding: 24px; min-width: 0; }
.content__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.content__head h1 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--color-text-strong); }
.content__head p { margin-top: 4px; font-size: 13px; color: var(--color-text-secondary); }
.view[hidden] { display: none; }

/* 概览卡 */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--color-card); border: 1px solid var(--color-border-warm); border-radius: 10px; padding: 16px; }
.stat__k { font-size: 12px; color: var(--color-text-secondary); }
.stat__v { margin-top: 6px; font-family: var(--font-mono); font-size: 24px; line-height: 30px; color: var(--color-text-strong); }
.stat__t { margin-top: 2px; font-size: 12px; color: var(--color-faint); }

/* 登录卡 */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; background: var(--color-bg-page); }
.auth__card { width: min(420px, 100%); background: var(--color-card); border: 1px solid var(--color-border-warm); border-radius: var(--r-12); padding: 28px; }
.auth__brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.auth__name { font-family: var(--font-hero); font-size: 26px; font-weight: 700; color: var(--color-text-strong); }
.auth__sub { text-align: center; font-size: 13px; color: var(--color-text-secondary); }
.auth__tabs { display: flex; gap: 4px; margin: 20px 0 18px; padding: 3px; background: var(--color-bg-section); border-radius: var(--r-6); }
.auth__tab { flex: 1; height: 32px; border-radius: 4px; font-size: 14px; color: var(--color-text-secondary); }
.auth__tab[aria-selected="true"] { background: var(--color-card); color: var(--color-text-strong); font-weight: 600; box-shadow: 0 1px 2px var(--color-shadow); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--color-text-secondary); }
.field input {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--color-border-warm); border-radius: var(--r-6);
  background: var(--color-bg-page); color: var(--color-text);
  font-size: 14px; font-family: var(--font-main);
}
.field input:focus { outline: none; border-color: var(--color-text-secondary); }
.auth__note { margin-top: 14px; font-size: 12px; line-height: 19px; color: var(--color-text-secondary); }
.auth__alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border-warm); display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); }
.auth__alt a { color: var(--color-text-strong); text-decoration: underline; text-underline-offset: 3px; }

/* 模型价格页 */
.price-hero { padding: 56px 0 8px; }
.price-hero h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14; font-weight: 600; color: var(--color-text-strong); letter-spacing: -.02em; }
.price-hero p { margin-top: 12px; font-size: 15px; line-height: 24px; color: var(--color-text-secondary); max-width: 68ch; }
.filter { display: flex; align-items: center; gap: 8px; margin: 20px 0 14px; flex-wrap: wrap; }
.filter input {
  height: 34px; padding: 0 12px; min-width: 220px;
  border: 1px solid var(--color-border-warm); border-radius: var(--r-999);
  background: var(--color-card); color: var(--color-text); font-size: 13px;
}
.chipbtn { height: 30px; padding: 0 12px; border-radius: var(--r-999); border: 1px solid var(--color-border-warm); font-size: 12px; color: var(--color-text-secondary); background: var(--color-card); }
.chipbtn.is-on { background: var(--color-invert); border-color: var(--color-invert); color: var(--color-on-invert); }

@media (max-width: 919px) {
  .appbody { grid-template-columns: 1fr; }
  /* 侧栏变成横向导航条后吸顶在 appbar 下方：点完导航不会随页面滚动消失 */
  .side { display: flex; gap: 6px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--color-border-warm); padding: 10px 12px;
    position: sticky; top: 56px; z-index: 19; background: var(--color-card); }
  .side__group { margin: 0; display: flex; gap: 6px; }
  .side__label, .side__link .mono { display: none; }
  .side__link { white-space: nowrap; }
  .content { padding: 16px; }
  .content__head { flex-wrap: wrap; align-items: flex-start; }
  .stat-grid { grid-template-columns: 1fr; }
  /* 窄屏不砍列：表格横向滚动，保留额度/耗时/状态等关键信息 */
  .appbody .ui-card { overflow-x: auto; }
  .appbody .tbl { min-width: 720px; }
}

/* 账户类页面不用 mimo 的 .scroller 外壳：body 恢复成普通文档流，
   否则 base.css 的 body{overflow:hidden} 会把长页面裁掉 */
body.plain { display: block; height: auto; overflow: auto; }
body.plain .app { min-height: 100dvh; }

/* ==========================================================================
   以下为门户交互层补充：模态框 / 表单控件 / 分段选择 / 白名单芯片 /
   七日用量图 / 模型标签 / toast / 空态 / 四列统计
   ========================================================================== */

/* ---------------- 模态框（创建令牌 / 一次性 Key） ---------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(17, 24, 39, .45); backdrop-filter: blur(2px); }
.modal[hidden] { display: none; }
.modal__box { width: min(520px, 100%); max-height: calc(100dvh - 48px); overflow: auto;
  background: var(--color-card); border: 1px solid var(--color-border-warm); border-radius: var(--r-12);
  box-shadow: 0 20px 60px var(--color-shadow); }
.modal__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--color-card); border-bottom: 1px solid var(--color-border-warm);
  font-weight: 600; font-size: 14px; color: var(--color-text-strong); }
.modal__x { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-6);
  color: var(--color-text-secondary); font-size: 18px; line-height: 1; }
.modal__x:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }
.modal__body { padding: 18px; }
.modal__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 0 18px 18px; }

/* ---------------- 表单控件 ---------------- */
.field select, .field textarea {
  border: 1px solid var(--color-border-warm); border-radius: var(--r-6);
  background: var(--color-bg-page); color: var(--color-text);
  font-size: 14px; font-family: var(--font-main);
}
.field select { height: 38px; padding: 0 10px; }
.field textarea { padding: 9px 12px; min-height: 64px; resize: vertical; line-height: 20px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-text-secondary); }
.field .sub { font-size: 11px; line-height: 17px; color: var(--color-faint); }
.field__row { display: flex; gap: 10px; }
.field__row .field { flex: 1; }

/* 分段单选（额度模式 / 有效期） */
.seg { display: flex; gap: 4px; padding: 3px; background: var(--color-bg-section); border-radius: var(--r-6); }
.seg button { flex: 1; height: 30px; border-radius: 4px; font-size: 13px; color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std); }
.seg button.is-on { background: var(--color-card); color: var(--color-text-strong); font-weight: 600; box-shadow: 0 1px 2px var(--color-shadow); }

/* 模型白名单芯片（多选） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 1px solid var(--color-border-warm); border-radius: var(--r-999);
  font-size: 12px; font-family: var(--font-mono); color: var(--color-text-secondary); cursor: pointer;
  transition: border-color .15s var(--ease-std), color .15s var(--ease-std), background-color .15s var(--ease-std); }
.chips label:hover { border-color: var(--color-text-secondary); color: var(--color-text); }
.chips input { display: none; }
.chips input:checked + span { color: var(--color-text-strong); font-weight: 600; }
.chips label:has(input:checked) { background: var(--color-bg-section); border-color: var(--color-text-secondary); }

/* ---------------- 七日用量图（零依赖 SVG） ---------------- */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding: 4px 2px 0; }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.chart__bar { width: 100%; max-width: 46px; border-radius: 5px 5px 2px 2px; background: var(--chart-bar, var(--color-chip));
  position: relative; transition: background-color .15s var(--ease-std); min-height: 3px; }
.chart__col:hover .chart__bar { background: var(--color-text-secondary); }
html[data-theme="dark"] .chart__bar { background: rgba(255, 255, 255, .26); }
html[data-theme="dark"] .chart__col:hover .chart__bar { background: rgba(255, 255, 255, .5); }
.chart__val { font-family: var(--font-mono); font-size: 10px; color: var(--color-faint); white-space: nowrap; }
.chart__day { font-size: 11px; color: var(--color-text-secondary); font-family: var(--font-mono); white-space: nowrap; }
.chart__day.is-today { color: var(--color-text-strong); font-weight: 700; }

/* ---------------- 账单折线图 ---------------- */
.linechart { width: 100%; min-height: 200px; }
.linechart svg { width: 100%; height: 200px; display: block; }
.linechart .lc-grid { stroke: var(--color-line); stroke-dasharray: 3 3; }
.linechart .lc-axis { fill: var(--color-text-secondary); font-family: var(--font-mono); font-size: 10px; }
.linechart .lc-area { fill: var(--accent-soft); }
.linechart .lc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .lc-dot { fill: var(--accent); stroke: var(--color-bg-page); stroke-width: 1.5; }
.linechart .lc-empty { fill: var(--color-text-secondary); font-size: 13px; }

/* ---------------- Key 体检：额度环 ---------------- */
.rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.ring { border: 1px solid var(--color-border-warm); border-radius: 12px; background: var(--color-card); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ring__viz { position: relative; width: 108px; height: 108px; }
.ring svg { width: 108px; height: 108px; transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-width: 8; }
.ring .track { stroke: var(--color-line); }
.ring .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease-std); }
.ring--danger .bar { stroke: var(--color-danger); }
.ring__pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--color-text-strong); }
.ring__label { font-size: 12px; color: var(--color-text-secondary); }
.ring__sub { font-family: var(--font-mono); font-size: 11px; color: var(--color-faint); text-align: center; }

.keymeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-border-warm); border-radius: 12px; overflow: hidden; }
.keymeta__cell { background: var(--color-card); padding: 14px 16px; }
.keymeta__k { font-size: 11.5px; color: var(--color-text-secondary); }
.keymeta__v { margin-top: 4px; font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--color-text-strong); }

/* 模型用量排行 */
.rank { display: flex; flex-direction: column; gap: 10px; }
.rank__row { display: grid; grid-template-columns: 150px 1fr 74px; align-items: center; gap: 10px; }
.rank__name { font-family: var(--font-mono); font-size: 12px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__track { height: 8px; border-radius: 4px; background: var(--color-bg-section); overflow: hidden; }
.rank__fill { height: 100%; border-radius: 4px; background: var(--color-text-secondary); }
.rank__v { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- 协议 / 能力小标签 ---------------- */
.tag { display: inline-block; height: 19px; line-height: 19px; padding: 0 7px; margin: 1px 2px 1px 0;
  border-radius: 4px; font-size: 11px; font-family: var(--font-mono);
  background: var(--color-bg-section); color: var(--color-text-secondary); }
.tag--native { background: var(--color-invert); color: var(--color-on-invert); font-weight: 600; }

/* ---------------- toast ---------------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 80;
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  background: var(--color-invert); color: var(--color-on-invert); border-radius: var(--r-999);
  font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px var(--color-shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-std), transform .25s var(--ease-std); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--warn { background: var(--color-warn); color: #fff; }

/* ---------------- 空态 / 引导 ---------------- */
.empty { padding: 36px 16px; text-align: center; }
.empty p { font-size: 13px; color: var(--color-text-secondary); }
.empty .ui-btn { margin-top: 12px; }

/* ---------------- 杂项 ---------------- */
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gate { max-width: 400px; margin: 48px auto; text-align: center; }
.gate h2 { font-size: 20px; color: var(--color-text-strong); margin-bottom: 6px; }
.gate p { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 1199px) { .grid-2 { grid-template-columns: 1fr; } .stat-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* 复制按钮态 */
.ui-btn.is-done { background: var(--color-ok-soft); border-color: var(--color-ok-soft); color: var(--color-ok); }

/* ---------------- 新 Key 快速接入（弹窗 + 概览共用） ---------------- */
.quickstart { margin-top: 14px; border: 1px solid var(--color-border-warm); border-radius: 8px; background: var(--color-bg-section); padding: 12px; }
.quickstart__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.quickstart__head b { font-size: 12.5px; color: var(--color-text-strong); }
.quickstart__line { font-size: 12px; color: var(--color-text-secondary); margin: 4px 0; }
.quickstart__code { margin: 8px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--color-card); border: 1px solid var(--color-border-warm);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 18px; color: var(--color-text-strong);
  white-space: pre-wrap; word-break: break-all; max-height: 168px; overflow: auto; }
.quickstart__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.quickstart__step { border: 1px solid var(--color-border-warm); border-radius: 8px; background: var(--color-card); padding: 10px 12px; }
.quickstart__step b { display: block; font-size: 12px; color: var(--color-text-strong); margin-bottom: 2px; }
.quickstart__step span { font-size: 11.5px; line-height: 17px; color: var(--color-text-secondary); }
@media (max-width: 919px) { .quickstart__grid { grid-template-columns: 1fr; } }