:root {
    --bg: oklch(1 0 0);
    --surface: oklch(0.972 0.006 80);
    --hairline: oklch(0.918 0.008 80);
    --track: oklch(0.936 0.006 80);
    --ink: oklch(0.235 0.014 77);
    --muted: oklch(0.46 0.014 77);
    --brand: oklch(0.72 0.135 77);
    --brand-deep: oklch(0.5 0.105 77);
    --brand-tint: oklch(0.965 0.03 88);
    --accent: oklch(0.45 0.1 255);
    --ok: oklch(0.52 0.12 152);
    --ok-tint: oklch(0.962 0.03 152);
    /* 4.5:1 起步:它承载「额度将尽 / key 临期」这类不能漏看的提示,原来的 0.6 只有 3.69:1 */
    --warn: oklch(0.52 0.13 60);
    --warn-tint: oklch(0.965 0.035 75);
    --bad: oklch(0.52 0.17 27);
    --bad-tint: oklch(0.962 0.025 27);
    --radius: 10px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  .hidden { display: none !important; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    background: var(--bg); color: var(--ink);
    font-size: 14px; line-height: 1.55;
    padding: 0 20px 72px;
  }
  .wrap { max-width: 1020px; margin: 0 auto; }
  a, .linkbtn { color: var(--accent); }

  /* ---- 头部 ---- */
  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 18px; }
  .brand { display: flex; align-items: center; gap: 10px; }
  .mark { width: 14px; height: 14px; border-radius: 4px; background: var(--brand); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.06); }
  .brand h1 { font-size: 16px; font-weight: 650; letter-spacing: 0.01em; }
  .brand .sub { color: var(--muted); font-size: 13px; margin-left: 2px; }
  .hstat { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
  .dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); }
  #who { color: var(--ink); font-weight: 550; }
  .linkbtn { background: none; border: 0; padding: 4px 6px; font-size: 13px; cursor: pointer; border-radius: 6px; }
  .linkbtn:hover { background: var(--surface); }

  /* ---- 登录 ---- */
  .login { display: flex; justify-content: center; padding: 9vh 0 0; }
  .login-box { width: 100%; max-width: 460px; text-align: center; }
  .login-box .mark { width: 34px; height: 34px; border-radius: 9px; margin: 0 auto 18px; }
  .login-title { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 4px; text-wrap: balance; }
  .login-sub { color: var(--muted); margin-bottom: 22px; }
  .login-row { display: flex; gap: 8px; }
  .hint { color: var(--muted); font-size: 12.5px; margin-top: 10px; }

  /* ---- 表单控件 ---- */
  input, select {
    font: inherit; color: var(--ink); background: var(--bg);
    border: 1px solid var(--hairline); border-radius: 8px; padding: 9px 12px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  }
  input::placeholder { color: oklch(0.55 0.012 77); }
  input:focus-visible, select:focus-visible, button:focus-visible, [data-copy]:focus-visible {
    outline: 2px solid var(--brand-deep); outline-offset: 2px; border-radius: 8px;
  }
  #keyInput { flex: 1; min-width: 0; }
  button {
    font: inherit; font-weight: 550; cursor: pointer; border: 0; border-radius: 8px;
    padding: 9px 16px; background: var(--ink); color: var(--bg);
    transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
  }
  button:hover { background: oklch(0.33 0.016 77); }
  button:disabled { opacity: 0.55; cursor: default; }
  button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
  button.ghost:hover { background: var(--surface); }
  button.mini { padding: 3px 10px; font-size: 12.5px; font-weight: 500; border-radius: 7px; }
  button.danger { color: var(--bad); border-color: oklch(0.85 0.05 27); }
  button.danger:hover { background: var(--bad-tint); }

  /* ---- 区块 ---- */
  main section { margin-top: 34px; }
  .sec-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
  .sec-head h2 { font-size: 14px; font-weight: 650; letter-spacing: 0.01em; }
  /* 荧光笔高亮:标题文字裹一层暖黄底,像马克笔划过 */
  .sec-head h2 > span, .hl {
    background: linear-gradient(180deg, transparent 8%, oklch(0.92 0.16 95 / 0.85) 8%, oklch(0.92 0.16 95 / 0.85) 88%, transparent 88%);
    padding: 0 3px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }
  .sec-head .muted { font-size: 12.5px; }
  .sec-head .spacer { flex: 1; }
  .muted { color: var(--muted); }
  #err { background: var(--bad-tint); color: var(--bad); border: 1px solid oklch(0.88 0.04 27); border-radius: var(--radius); padding: 10px 14px; margin-top: 18px; font-size: 13.5px; }
  /* ---- 预警横幅(余额将尽 / key 临期 / 窗口吃紧),仅普通 key 页面 ---- */
  #warnBox { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
  .warn-item { border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
  .warn-item.warn { background: var(--warn-tint); color: var(--warn); border: 1px solid oklch(0.88 0.06 75); }
  .warn-item.bad { background: var(--bad-tint); color: var(--bad); border: 1px solid oklch(0.88 0.04 27); }
  .warn-item b { font-weight: 650; }

  /* ---- 余额面板(唯一的"面板"待遇) ---- */
  .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 22px 24px; margin-top: 24px !important; }
  .bal-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
  .bal-label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .bal-big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
  .bal-big small { font-size: 15px; font-weight: 550; color: var(--muted); margin-left: 2px; }
  .bal-meta { display: flex; gap: 28px; flex-wrap: wrap; }
  .bal-meta dt { font-size: 12px; color: var(--muted); }
  .bal-meta dd { font-size: 16.5px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 1px; }
  .bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
  .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--brand); transition: width 0.5s var(--ease); }
  .bar i.warn { background: var(--warn); } .bar i.full { background: var(--bad); }
  .bar.quota { margin-top: 16px; }
  /* 窗口限额:环形仪表盘 */
  .gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px 20px; margin-top: 20px; }
  .gauge { display: flex; align-items: center; gap: 13px; }
  .ring { width: 58px; height: 58px; flex: none; }
  .ring circle { fill: none; stroke-width: 5.5; }
  .ring .tr { stroke: oklch(0.905 0.008 80); }
  .ring .pr { stroke: var(--brand); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray 0.7s var(--ease); }
  .ring .pr.warn { stroke: var(--warn); } .ring .pr.full { stroke: var(--bad); }
  .ring text { fill: var(--ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .gtxt .gl { font-size: 13px; font-weight: 550; }
  .gtxt .gv { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }

  /* ---- 表格 ---- */
  .tbl { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th { text-align: left; font-size: 12px; font-weight: 550; color: var(--muted); padding: 10px 12px 7px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
  td { padding: 9px 12px; border-bottom: 1px solid oklch(0.955 0.004 80); white-space: nowrap; vertical-align: middle; }
  tbody tr { transition: background 0.12s var(--ease); }
  tbody tr:hover { background: var(--surface); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
  .empty { color: var(--muted); padding: 26px 12px !important; text-align: center; }

  /* ---- 可点编辑单元格 ---- */
  td.editable { cursor: pointer; text-decoration: underline dotted var(--hairline); text-underline-offset: 3px; }
  td.editable:hover { background: var(--brand-tint); text-decoration-color: var(--brand); }
  /* 渠道顺序号:圆底徽标,数字即优先级(1 最优先) */
  td.ord-cell { white-space: nowrap; }
  .ord { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-deep); font-weight: 650; font-size: 12px; text-align: center; }
  /* 渠道协议标志:OpenAI / Claude logo */
  .prov-wrap { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; vertical-align: middle; min-width: 16px; }
  .prov { display: inline-flex; align-items: center; }
  .prov svg { display: block; }
  .prov-slot { display: inline-block; width: 15px; height: 15px; }

  /* ---- 分页条 ---- */
  .pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  .pager .pinfo { color: var(--muted); font-size: 12.5px; margin-right: auto; }
  .pager button { padding: 4px 10px; font-size: 12.5px; font-weight: 500; border-radius: 7px; background: transparent; color: var(--ink); border: 1px solid var(--hairline); min-width: 32px; }
  .pager button:hover:not(:disabled) { background: var(--surface); }
  .pager button:disabled { opacity: 0.4; cursor: default; }
  .pager button.cur { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .pager .gap { color: var(--muted); padding: 0 2px; }

  /* ---- 标签 ---- */
  .chip { display: inline-block; padding: 1.5px 9px; border-radius: 999px; font-size: 12px; font-weight: 550; line-height: 1.7; }
  .chip.ok { background: var(--ok-tint); color: var(--ok); }
  .chip.bad { background: var(--bad-tint); color: var(--bad); }
  .chip.off { background: var(--surface); color: var(--muted); border: 1px solid var(--hairline); }
  .chip.warn { background: var(--warn-tint); color: var(--warn); }
  .chip.vip { background: var(--surface); color: var(--muted); border: 1px solid var(--hairline); }
  .chip.svip { background: var(--brand-tint); color: var(--brand-deep); }
  .chip.ssvip { background: var(--brand-deep); color: var(--bg); }
  .chip.sssvip { background: var(--ink); color: var(--bg); }
  .chip[data-act], .chip[data-cact] { cursor: pointer; }
  /* 可点元素必须能被键盘聚焦并有可见焦点环,否则整块渠道管理与分组切换是鼠标独占的 */
  [role="button"] { cursor: pointer; }
  [role="button"]:focus-visible, td.editable:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

  /* ---- 签发工具条 / 新 key ---- */
  .issue { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 0 4px; }
  .issue input, .issue select { flex: 0 1 auto; }
  #newName { flex: 1 1 150px; min-width: 140px; }
  .w-s { width: 130px; } .w-m { width: 165px; }
  .newkey { background: var(--brand-tint); border: 1px solid oklch(0.88 0.055 85); color: var(--brand-deep); border-radius: var(--radius); padding: 11px 14px; margin: 10px 0 4px; font-size: 13px; word-break: break-all; }
  .newkey .mono { font-size: 12.5px; color: var(--ink); }

  /* ---- 图表 ---- */
  .chart { padding-top: 14px; }
  .chart svg { width: 100%; height: 150px; display: block; }
  .chart rect.v { fill: var(--brand); transition: fill 0.12s var(--ease); }
  .chart rect.v:hover { fill: var(--brand-deep); }
  .chart rect.z { fill: var(--track); }
  .chart text { fill: var(--muted); font-size: 9.5px; font-family: inherit; }

  /* ---- 模型测试 ---- */
  .test-res { font-size: 12.5px; margin-left: 10px; font-variant-numeric: tabular-nums; }
  .test-res.ok { color: var(--ok); } .test-res.bad { color: var(--bad); }

  /* ---- 模型价格与筛选 ---- */
  .key-binding { margin-top: 5px; }
  .key-binding button { max-width: 250px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .model-heading { flex-wrap: wrap; }
  .model-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 14px 0 4px; }
  .model-search { flex: 1 1 220px; }
  .model-family { flex: 0 1 160px; }
  .model-tools label { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 5px; }
  .model-tools input, .model-tools select { width: 100%; min-width: 0; min-height: 44px; }
  #modelCount { font-size: 12.5px; margin-left: auto; padding-bottom: 11px; }
  .model-peak-note { padding: 9px 12px; border-left: 2px solid var(--brand-deep); background: var(--surface); margin-bottom: 8px; }
  .model-table { table-layout: fixed; }
  .model-table th:first-child { width: 27%; }
  .model-table th.num { width: 10%; }
  .model-table th:nth-child(5) { width: 19%; }
  .model-table th:last-child { width: 24%; }
  .model-table td { white-space: normal; border-bottom-color: var(--hairline); }
  .model-id { overflow-wrap: anywhere; }
  .model-table .image-price { text-align: center; font-variant-numeric: tabular-nums; }
  .model-availability .test-res { display: block; margin: 5px 0 0; overflow-wrap: anywhere; }
  .model-table button { min-height: 34px; }
  .model-loading { padding: 12px 0; }
  .mobile-price-label { display: none; }
  .price-details { font-size: 12px; margin-top: 4px; }
  .price-details summary { cursor: pointer; color: var(--accent); width: fit-content; }
  .price-details summary:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; border-radius: 3px; }
  .price-detail-body { padding-top: 7px; color: var(--muted); overflow-wrap: anywhere; }
  .price-detail-body p { margin-top: 6px; }
  .price-detail-body > div + div { margin-top: 5px; }
  .model-tier > .chip { margin-bottom: 4px; }
  .image-token-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }

  /* ---- 骨架屏 ---- */
  .skel { border-radius: 8px; background: linear-gradient(100deg, var(--surface) 40%, oklch(0.99 0.003 80) 50%, var(--surface) 60%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
  .skel + .skel { margin-top: 10px; }
  @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }

  footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 56px; }

  @media (max-width: 640px) {
    .bal-big { font-size: 28px; }
    .bal-meta { gap: 18px; }
    header { flex-wrap: wrap; }
    .model-heading h2 { flex: 1 0 100%; }
    .model-heading .spacer { display: none; }
    .model-heading button, .model-table button, .key-binding button { min-height: 44px; }
    .model-search { flex-basis: 100%; }
    .model-family { flex: 1 1 150px; }
    .model-tools input, .model-tools select { font-size: 16px; }
    #modelCount { flex: 1 1 120px; text-align: right; }
    .model-table, .model-table tbody { display: block; }
    .model-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .model-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
    .model-table td { display: block; padding: 0; border: 0; min-width: 0; }
    .model-table .model-id { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
    .model-table .token-price, .model-table .image-price { padding: 8px 10px; text-align: left; background: var(--surface); border-radius: 7px; }
    .mobile-price-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .model-tier, .model-availability, .model-table td[colspan] { grid-column: 1 / -1; }
    .model-availability { display: flex !important; align-items: center; gap: 10px; }
    .model-availability .test-res { margin: 0; }
    .price-details { display: inline-block; margin: 0 0 0 9px; vertical-align: middle; }
    .price-details summary { min-height: 32px; line-height: 32px; }
    .price-details[open] { display: block; margin: 8px 0 0; }
    .price-detail-body { padding: 10px 12px; background: var(--surface); border-radius: 7px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }