/* Hallmark · shape: app screen · genre: modern-minimal · theme: Cobalt (deal 1/3)
 * nav: top bar and view links · signature: independent quota ledger · states: login/loading/empty/error/full
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: H, kept status and freshness beside each quota */
@import url('./tokens.css');
@import url('./base.css');
:root { --font-body: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; --font-display: var(--font-body); --font-outlier: Consolas, monospace; --container: 1360px; --gutter: 40px; --tracking-display: 0; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.topbar { border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.bar { display: flex; align-items: center; gap: var(--space-lg); min-height: 76px; }
.brand { font-size: var(--text-lg); font-weight: 700; text-decoration: none; }
.policy { color: var(--color-muted); font-size: var(--text-sm); flex: 1; }
button, input { min-height: 44px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); font: inherit; padding: var(--space-xs) var(--space-md); }
button { cursor: pointer; font-weight: 600; }
button:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy=true] { cursor: progress; }
button:active { transform: translateY(1px); }
.primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.primary:hover { background: var(--color-accent-deep); }
.quiet { background: var(--color-paper); color: var(--color-ink-2); }
.quiet:hover { background: var(--color-paper-3); }
input { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-muted); min-width: 0; width: 100%; }
input::placeholder { color: var(--color-muted); }
input:invalid:not(:placeholder-shown) { border-color: var(--color-error); }
label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.login { max-width: 600px; margin: var(--space-3xl) auto; }
.intro { margin-top: var(--space-md); color: var(--color-muted); }
#login-form { margin-top: var(--space-xl); }
#login-form button { margin-top: var(--space-lg); width: 100%; }
#login-message { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.login-note { display: flex; gap: var(--space-lg); border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }
.summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: var(--space-xl) 0; }
.summary > div { padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.summary > div:first-child { border: 0; padding-left: 0; }
dt { font-size: var(--text-sm); color: var(--color-muted); }
dd { margin: var(--space-xs) 0 0; font-variant-numeric: tabular-nums; }
.summary dd { font-size: var(--text-3xl); font-weight: 600; }
.summary .time { font-size: var(--text-lg); padding-top: var(--space-xs); }
.tabs { display: flex; gap: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.tabs a { padding-block: var(--space-md); font-size: var(--text-sm); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--color-accent); }
.tabs a[aria-current=page] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.panel { padding-block: var(--space-lg); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.section-head span, .help { font-size: var(--text-sm); color: var(--color-muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { color: var(--color-muted); background: var(--color-paper-2); font-size: var(--text-sm); font-weight: 500; }
th, td { padding: var(--space-md); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
td { font-size: var(--text-sm); }
td:first-child { min-width: 200px; }
td small { display: block; color: var(--color-muted); margin-top: var(--space-xs); overflow-wrap: anywhere; }
td strong { font-weight: 600; font-size: var(--text-md); }
.good { color: var(--color-success); }.attention { color: var(--color-error); }
.help { padding-block: var(--space-md); line-height: 1.7; }
#notice { min-height: 24px; margin-top: var(--space-md); color: var(--color-error); font-size: var(--text-sm); }
.copy-row { display: flex; gap: var(--space-sm); max-width: 760px; }
.copy-row button { flex-shrink: 0; }
.connection { margin: var(--space-lg) 0; }
.connection > div { display: grid; grid-template-columns: 140px minmax(0,1fr); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.connection dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
code { font-family: var(--font-outlier); }
.footer { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
@media(max-width:700px) { :root { --gutter: 16px; } .bar { gap: var(--space-sm); flex-wrap: wrap; padding-block: var(--space-sm); } .brand { font-size: var(--text-md); } .policy { font-size: var(--text-xs); } .summary { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: var(--space-lg); } .summary > div:nth-child(3) { border: 0; padding-left: 0; } .summary .time { font-size: var(--text-md); } .tabs { gap: var(--space-lg); } .section-head { align-items: flex-start; flex-direction: column; } .heading { align-items: flex-start; } .heading button { flex-shrink: 0; } .login { margin-block: var(--space-2xl); } .login-note { gap: var(--space-md); flex-wrap: wrap; } .footer { flex-direction: column; } .connection > div { grid-template-columns: 1fr; gap: var(--space-xs); } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

@media(max-width:700px) { table, tbody, tr, td { display: block; } thead { display: none; } tr { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); } td { padding: var(--space-xs) 0; border: 0; } td:first-child { min-width: 0; font-size: var(--text-md); font-weight: 600; } td::before { content: attr(data-label); display: block; color: var(--color-muted); font-size: var(--text-xs); margin-bottom: var(--space-2xs); } td:first-child::before { display: none; } td small { margin-top: var(--space-2xs); font-weight: 400; } }