/* ============ 设计变量：沿用演示站的白 · 留白语言（暖白底、黑色胶囊、细字重大数字、沙色颗粒画面） ============ */
:root {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --soft: #f3f2ef;
  --soft-2: #ebeae6;
  --text: #111111;
  --text-2: #62615d;
  --text-3: #6f6e68;
  --line: #e7e6e3;
  --line-2: #d9d8d3;
  --good: #2f7d5b;
  --warn: #946512;
  --bad: #b4442f;
  --sand: #e9e4dc;
  --r-s: 6px;
  --r-m: 12px;
  /* 只用系统字体：国内直连海外服务器带宽很低，网页字体会拖慢首屏 */
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, Menlo, "Microsoft YaHei", monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --click: linear(0, .25 8%, .6 18%, .92 32%, 1.04 44%, 1.02 58%, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.6; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* 按钮：黑色胶囊，按下陷下去再弹回 */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform .25s var(--click), background-color .2s, opacity .2s; }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn.dark { background: var(--text); color: #fff; }
.btn.dark:hover { background: #2a2a2a; }
.btn.soft { background: var(--soft); }
.btn.soft:hover { background: var(--soft-2); }
.btn.line { box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.line:hover { background: var(--soft); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #ffffff55; border-top-color: #fff; animation: sp .7s linear infinite; }
.btn.busy { pointer-events: none; }
.btn.busy .spin { display: block; }
@keyframes sp { to { transform: rotate(360deg); } }

/* 颗粒画面：低饱和的沙色与雾蓝 */
.plate { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-s); isolation: isolate; }
.plate::before { content: ""; position: absolute; inset: -30%; z-index: -1;
  background:
    radial-gradient(40% 55% at 18% 60%, #d9c7b0 0%, transparent 70%),
    radial-gradient(45% 60% at 62% 30%, #c9d3dc 0%, transparent 70%),
    radial-gradient(35% 50% at 88% 75%, #e6d3cf 0%, transparent 70%);
  filter: blur(30px); }
.plate::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 状态：颜色 + 文字，不单靠颜色 */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.good { color: var(--good); } .st.warn { color: var(--warn); } .st.bad { color: var(--bad); }

/* 输入 */
.field { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.input { height: 48px; padding: 0 48px 0 16px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); border: 0; outline: none; transition: box-shadow .15s; width: 100%; font-size: 16px; }
.input::placeholder { color: var(--text-3); }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--text); }
.input.err { box-shadow: inset 0 0 0 1.5px var(--bad); }
.hint { display: block; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.hint.err { color: var(--bad); margin-top: 8px; }
.small { font-size: 13px; }
.muted { color: var(--text-2); }

/* 提示条 */
.toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); opacity: 0; z-index: 100; background: var(--text); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 13.5px; transition: opacity .2s, transform .3s var(--ease-out); pointer-events: none; max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ 查询入口：照登录页的骨架 ============ */
.entry { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.entry-side { margin: 16px; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; }
.entry-side blockquote { font-weight: 300; font-size: 40px; line-height: 1.3; max-width: 520px; }
.entry-side small { display: block; margin-top: 18px; font-size: 14px; color: #4a4843; }
.entry-main { display: grid; place-items: center; padding: 48px 24px; }
.box { width: 100%; max-width: 380px; }
.box h1 { font-weight: 300; font-size: 36px; line-height: 1.2; }
.sub { margin-top: 10px; color: var(--text-2); font-size: 14.5px; }
#form { margin-top: 32px; }
.key-input { position: relative; }
.eye { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.eye:hover { background: var(--soft); color: var(--text); }
.eye[aria-pressed="true"] { color: var(--text); }
.key-input.shake { animation: shake .36s var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }
.agree { display: flex; gap: 8px; align-items: center; margin-top: 16px; min-height: 32px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.agree input { width: 15px; height: 15px; accent-color: var(--text); }
#form .btn.dark { width: 100%; height: 48px; margin-top: 18px; }
.intro .entry-side { animation: fadeIn .9s var(--ease-out) both; }
.intro .box { animation: rise .6s .1s var(--ease-out) both; }

/* ============ 查询结果：照控制台概览的骨架，去掉侧栏 ============ */
.report { max-width: 1240px; margin: 0 auto; padding: 0 56px 96px; }
.top { display: flex; align-items: center; gap: 16px; height: 84px; }
.top h1 { font-weight: 300; font-size: 30px; letter-spacing: -.005em; }
.top .r { margin-left: auto; display: flex; align-items: center; gap: 18px; min-width: 0; }
.who { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.who .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

h2.sh { font-weight: 400; font-size: 17px; }
.sec { margin-top: 56px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* 余额与关键数字 */
.ov-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding-top: 12px; }
.ov-bal small { font-size: 13.5px; color: var(--text-2); }
.ov-bal .big { font-weight: 200; font-size: 76px; line-height: 1.05; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ov-bal .big .cur { font-size: 36px; margin-right: 6px; }
.bal-track { max-width: 420px; height: 4px; margin-top: 16px; border-radius: 2px; background: var(--soft-2); overflow: hidden; }
.bal-track i { display: block; height: 100%; width: 100%; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.bal-track.low i { background: var(--warn); }
.bal-track.out i { background: var(--bad); }
.ov-bal p { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.ov-bal p b { color: var(--text); font-weight: 600; }
.ov-bal .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kpis { display: grid; grid-template-columns: repeat(4, auto); gap: 0 48px; }
.kpis div { display: grid; gap: 4px; align-content: start; }
.kpis span { font-size: 13px; color: var(--text-2); }
.kpis b { font-weight: 300; font-size: 30px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpis small { font-size: 12.5px; color: var(--text-3); }

/* 限额：名称 · 细条 · 数额 */
.limits { margin-top: 18px; display: grid; }
.limit { display: grid; grid-template-columns: 120px minmax(0, 1fr) 200px 150px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.limit:first-child { border-top: 1px solid var(--line); }
.limit .track { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.limit .track i { display: block; height: 100%; width: 100%; background: var(--text); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.limit .track.low i { background: var(--warn); }
.limit .track.out i { background: var(--bad); }
.limit .amt { font-family: var(--mono); font-size: 13.5px; text-align: right; }
.limit .amt span { color: var(--text-3); }
.limit .reset { font-size: 13px; color: var(--text-3); text-align: right; }

/* 分段控件：底板滑到选中项 */
.pill-group { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); }
.pill-group button { position: relative; z-index: 1; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--text-2); transition: color .2s; }
.pill-group button.on { color: var(--text); }
.pill-group .ink { position: absolute; top: 3px; left: 0; height: 30px; width: 0; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px #0000000f, 0 0 0 1px #0000000a; transition: transform .35s var(--click), width .35s var(--click); }
.pill-group.no-anim .ink { transition: none; }

/* 柱状图：黑色柱，悬停高亮当天 */
.chart-sum { margin-top: 6px; }
.chart { position: relative; margin-top: 18px; transition: opacity .2s; }
.updating .chart, .updating #usage, .updating #daily, .updating .chart-sum { opacity: .45; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .gl { stroke: var(--line); stroke-width: 1; }
.chart-svg .ax { font-size: 11px; fill: var(--text-3); font-family: var(--sans); }
.chart-svg .bar path { fill: var(--text); transition: opacity .15s; transform-box: fill-box; transform-origin: bottom; animation: grow .6s var(--ease-out) both; }
.chart.hovering .chart-svg .bar path { opacity: .28; }
.chart.hovering .chart-svg .bar.hot path { opacity: 1; }
@keyframes grow { from { transform: scaleY(0); } }
.tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--text); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; pointer-events: none; line-height: 1.5; }
.tip b { font-weight: 500; font-family: var(--mono); }
.chart-empty { padding: 56px 0; text-align: center; color: var(--text-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mix { padding: 28px 0 8px; }
.mix-bar { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; }
.mix-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.mix-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }
.mix-legend b { font-family: var(--mono); font-weight: 400; color: var(--text); margin-left: 4px; }
.range-status:empty { display: none; }
.range-status { margin-top: 10px; }

/* 各模型消费 与 每天 */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.share { margin-top: 18px; display: grid; gap: 14px; }
.share-row { display: grid; grid-template-columns: minmax(0, 170px) 1fr 76px 52px; gap: 14px; align-items: center; font-size: 13.5px; }
.share-row .name { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row .track { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.share-row .track i { display: block; height: 100%; background: var(--text); border-radius: 4px; transform-origin: left; }
.share-row .cost { font-family: var(--mono); text-align: right; }
.share-row .pct { font-family: var(--mono); text-align: right; color: var(--text-3); }
.mini { margin-top: 10px; }
.day { border-bottom: 1px solid var(--line); }
.day summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 11px 0; font-size: 13.5px; cursor: pointer; }
.day summary::-webkit-details-marker { display: none; }
.day summary:hover { background: linear-gradient(90deg, transparent, #1111110a, transparent); }
.day summary .cost { font-family: var(--mono); text-align: right; min-width: 72px; }
.day summary .n { color: var(--text-3); font-size: 13px; }
.day-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding: 2px 0 14px; font-size: 12.5px; color: var(--text-3); }
.day-detail b { display: block; font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--text); }
.more { margin-top: 14px; }
.empty { padding: 40px 0; text-align: center; color: var(--text-2); }

/* 今天：细字重数字一排 */
.today { margin-top: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.today div { padding: 18px 0; display: grid; gap: 4px; }
.today div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.today span { font-size: 13px; color: var(--text-2); }
.today b { font-weight: 300; font-size: 24px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today .muted-v b { color: var(--text-3); }

/* 可调用模型 */
.search { height: 36px; padding: 0 14px; border-radius: 999px; background: var(--soft); border: 0; outline: none; font-size: 13.5px; min-width: 240px; }
.search:focus { box-shadow: inset 0 0 0 1.5px var(--text); background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips button { height: 34px; padding: 0 14px; border-radius: 999px; font-family: var(--mono); font-size: 12.5px; background: var(--soft); color: var(--text-2); transition: background-color .15s, color .15s, transform .25s var(--click); }
.chips button:hover { background: var(--soft-2); color: var(--text); }
.chips button:active { transform: scale(.96); transition-duration: .08s; }
.chips button.on { background: var(--text); color: #fff; }
.chips .more-chip { font-family: var(--sans); background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.chips .empty { width: 100%; padding: 20px 0 4px; }
.chips .empty .btn { margin-left: 10px; }

/* 接入 */
.access { margin-top: 18px; display: grid; gap: 10px; }
.keybox { display: flex; gap: 16px; align-items: center; padding: 12px 12px 12px 18px; border-radius: 10px; background: var(--soft); font-size: 13.5px; }
.keybox .k { width: 72px; flex: none; color: var(--text-3); }
.keybox .v { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keybox .btn { flex: none; background: var(--surface); }
.cb { position: relative; margin-top: 10px; border-radius: 10px; background: #151515; }
.cb pre { padding: 18px 20px; padding-right: 110px; color: #e8e6e1; font-family: var(--mono); font-size: 13px; line-height: 1.75; overflow-x: auto; white-space: pre; }
.cb-copy { position: absolute; top: 12px; right: 12px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: #e8e6e1; box-shadow: inset 0 0 0 1px #ffffff2e; transition: background-color .15s; }
.cb-copy:hover { background: #ffffff14; }

/* 意见反馈：入口在表单下方，结果页在最底部 */
.feedback { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.foot { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.feedback a, .foot a { color: var(--text); white-space: nowrap; }

/* 首次出场：余额先到，其余按阅读顺序跟上 */
.enter [data-enter] { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ============ 平板与手机 ============ */
@media (max-width: 1000px) {
  .report { padding: 0 20px 80px; }
  .top h1 { font-size: 24px; }
  .who .mono { display: none; }
  .ov-head, .two { grid-template-columns: 1fr; gap: 36px; }
  .ov-bal .big { font-size: 56px; }
  .ov-bal .big .cur { font-size: 28px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .limit { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .limit .track { grid-column: 1 / -1; grid-row: 2; }
  .limit .reset { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .today { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .today div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .search { min-width: 0; flex: 1; }
}

@media (max-width: 900px) {
  .entry { grid-template-columns: 1fr; }
  .entry-side { display: none; }
  .entry-main { place-items: start center; padding-top: 12vh; }
}

@media (max-width: 600px) {
  .top { height: 68px; }
  .sec { margin-top: 44px; }
  .ov-bal .big { font-size: 48px; }
  .kpis b { font-size: 24px; }
  .row-between .pill-group { width: 100%; }
  .row-between .pill-group button { flex: 1; }
  .share-row { grid-template-columns: minmax(0, 1fr) 70px 40px; gap: 6px 10px; }
  .share-row .track { grid-column: 1 / -1; grid-row: 2; }
  .today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today div:nth-child(3n+1) { padding-left: 24px; border-left: 1px solid var(--line); }
  .today div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .today div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .today b { font-size: 20px; }
  .day-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keybox .k { width: auto; }
  .cb pre { padding-right: 20px; padding-top: 52px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}
#bal-value[data-unit]::after { content: " " attr(data-unit); font-size: 28px; }