* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--text-body); line-height: var(--leading); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; font-size: var(--text-control); }
a { color: var(--accent); text-underline-offset: 0.2em; }
::selection { background: var(--accent); color: var(--accent-ink); }
.skip { position: fixed; top: -4rem; left: var(--space-4); z-index: 8; padding: var(--space-2) var(--space-4); background: var(--floating); border-radius: var(--radius-control); }
.skip:focus { top: var(--space-4); }

/* 窗口与导航：工作区连续铺开，无外包卡片。 */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; background: var(--navigation); }
aside { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-6) var(--space-3) var(--space-4); border-right: var(--line-width) solid var(--clear); }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-brand); font-weight: var(--weight-strong); letter-spacing: var(--tracking-title); }
.brand::before, .login h1::before { content: ''; width: 1.25rem; height: 1.25rem; flex: none; border: 3px solid var(--brand-color); border-right-width: 1px; border-bottom-width: 1px; border-radius: var(--radius-badge); }
nav { display: flex; flex-direction: column; gap: var(--space-1); }
nav a { display: flex; align-items: center; gap: var(--space-3); position: relative; min-height: var(--control-h); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--muted); text-decoration: none; transition: color var(--motion) var(--ease), background var(--motion) var(--ease); }
nav a:hover { background: var(--surface); color: var(--ink); }
nav a[aria-current='page'] { background: var(--selected); color: var(--accent); font-weight: var(--weight-medium); }
nav a[aria-current='page']::after { content: ''; width: var(--space-1); height: var(--space-1); margin-left: auto; border-radius: var(--radius-pill); background: var(--accent); }
nav svg, button svg { width: var(--icon-size); height: var(--icon-size); flex: none; fill: none; stroke: var(--current); stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
#logout { margin-top: auto; justify-content: flex-start; background: var(--clear); border-color: var(--clear); color: var(--muted); text-align: left; }
#logout:hover { background: var(--surface); color: var(--ink); }
main { min-width: 0; width: 100%; padding: var(--space-10) var(--space-10) var(--space-12); background: var(--workspace); }
main > section { min-width: 0; max-width: var(--main-max); margin: 0 auto; }
h1 { margin: 0 0 var(--space-8); font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); font-weight: var(--weight-strong); }
h2 { margin: var(--space-8) 0 var(--space-4); color: var(--secondary); font-size: var(--text-section); font-weight: var(--weight-medium); }
.lead, .hint, .muted { color: var(--muted); }
.lead { max-width: 52rem; margin: calc(-1 * var(--space-2)) 0 var(--space-6); line-height: 1.7; }
.hint { font-size: var(--text-sm); }

/* 组件：40px 控件、内凹输入、三种按钮、完整键盘焦点。 */
label { display: block; margin: 0 0 var(--space-2); color: var(--secondary); font-size: var(--text-sm); }
.field { min-width: 0; }
.field:focus-within > label { color: var(--ink); }
label.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); margin: 0; }
input, select, textarea { min-width: 0; width: 100%; min-height: var(--control-h); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-control); background: var(--field); transition: border-color var(--motion) var(--ease), background var(--motion) var(--ease); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:disabled, select:disabled { color: var(--disabled-ink); background: var(--disabled-bg); }
label.check input { width: 1rem; min-height: 0; height: 1rem; accent-color: var(--accent); }
button, input:not([type='checkbox']), select { height: var(--control-h); }
textarea { min-height: 5rem; resize: vertical; }
button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) var(--space-4); border: var(--line-width) solid var(--clear); border-radius: var(--radius-control); background: var(--surface); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease), transform var(--motion) var(--ease); }
button:hover { background: var(--hover); border-color: var(--line-strong); }
button:active:not(:disabled) { background: var(--pressed); transform: translateY(1px); }
button.primary { background: var(--button-primary); color: var(--button-primary-ink); border-color: var(--clear); font-weight: var(--weight-strong); }
button.primary:hover { background: var(--button-primary-hover); border-color: var(--clear); }
button.primary:active:not(:disabled) { background: var(--button-primary-pressed); border-color: var(--clear); }
button.danger { color: var(--danger); background: var(--clear); border-color: var(--clear); }
button.danger:hover { background: var(--danger-bg); border-color: var(--danger-line); }
button:disabled, button.primary:disabled { background: var(--disabled-bg); border-color: var(--line); color: var(--disabled-ink); cursor: not-allowed; }
.panel { width: min(var(--panel-max), 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); padding: var(--space-6); border: var(--line-width) solid var(--clear); border-radius: var(--radius-panel); background: var(--surface); }
.panel > button { justify-self: start; }
.panel > p, .panel > label.check { grid-column: 1 / -1; }
.panel > p { margin: 0; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.form-actions > button { min-width: var(--action-min); }
.form-actions > button:not(.primary) { background: var(--field); }
.form-actions > button:not(.primary):hover:not(:disabled) { background: var(--hover); }
.form-actions > button:disabled { background: var(--disabled-bg); }
.source-section { display: grid; grid-template-columns: var(--source-label) minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-6); }
.source-section > h2 { margin: var(--space-6) 0 0; color: var(--ink); }
.source-form { width: 100%; grid-template-columns: minmax(0, 1fr); }
.source-general, .source-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: end; }
.source-general > .field { grid-column: 2 / 4; }
.source-proxy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: end; }
.source-form > .hint { line-height: var(--leading); overflow-wrap: anywhere; }
.account-editor { padding: var(--space-6); border-radius: var(--radius-panel); background: var(--surface); }
.account-editor > .field { max-width: var(--picker-max); margin-bottom: var(--space-6); }
.account-form { width: 100%; padding: 0; border: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--clear); }
.accounts > .table-scroll { margin-top: var(--space-6); }
.settings-base { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-section { display: grid; grid-template-columns: var(--settings-label) minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
.settings-section h2 { margin: 0; color: var(--ink); }
.section-intro > .hint { margin: var(--space-3) 0 0; }
.key-body { min-width: 0; }
.key-body > .table-scroll { margin-top: var(--space-4); }
.key-body > .key-reveal { margin: var(--space-4) 0; }
.password-form { width: 100%; }
.source-form:has(.error) .source-proxy input:not([type='checkbox']), .password-form:has(.error) .field:first-child input, .login form:has(.error:not(:empty)) > input { border-color: var(--danger-line); }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.models > .row { margin-bottom: var(--space-5); }
.models > .row > p { width: 100%; margin: 0; }

/* 来源使用横向状态轨，调用记录使用紧凑数据表。 */
.table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow: auto; border: var(--line-width) solid var(--clear); border-radius: var(--radius-panel); background: var(--surface); scrollbar-color: var(--line-strong) var(--field); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: middle; padding: 0.625rem var(--space-4); border-bottom: var(--line-width) solid var(--line-soft); font-size: var(--text-sm); white-space: nowrap; }
th { color: var(--muted); background: var(--clear); font-size: var(--text-xs); font-weight: var(--weight-medium); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tbody tr:focus-within td { background: var(--hover); }
td.row { display: table-cell; }
td.row button + button { margin-left: var(--space-1); }
td button { white-space: nowrap; background: var(--clear); color: var(--secondary); }
.accounts td.row { padding-left: var(--space-2); padding-right: var(--space-2); }
.accounts td.row button { padding-left: var(--space-3); padding-right: var(--space-3); }
.accounts td.row button.danger { margin-left: var(--space-3); }
.accounts td:first-child { font-weight: var(--weight-medium); }
.source-table :is(th, td):nth-child(n + 2):nth-child(-n + 5), .request-table :is(th, td):nth-child(5), .request-table :is(th, td):nth-child(6), .models table :is(th, td):nth-child(3) { text-align: right; }
.models table td:last-child, .key-body table td:last-child { text-align: right; }
.overview > .table-scroll:first-of-type { border: 0; border-radius: var(--radius-none); background: var(--clear); }
.source-table { border-spacing: 0 var(--space-2); margin-top: calc(-1 * var(--space-2)); }
.source-table th { background: var(--clear); border-bottom: 0; padding-top: 0; padding-bottom: var(--space-1); }
.source-table tbody td { padding-top: var(--space-4); padding-bottom: var(--space-4); background: var(--surface); border-top: var(--line-width) solid var(--clear); border-bottom: var(--line-width) solid var(--clear); }
.source-table tbody tr:last-child td { border-bottom: var(--line-width) solid var(--clear); }
.source-table tbody td:first-child { border-left: var(--line-width) solid var(--clear); border-radius: var(--radius-panel) var(--radius-none) var(--radius-none) var(--radius-panel); color: var(--ink); font-weight: var(--weight-medium); }
.source-table tbody td:last-child { border-right: var(--line-width) solid var(--clear); border-radius: var(--radius-none) var(--radius-panel) var(--radius-panel) var(--radius-none); color: var(--danger); }
.source-table tbody tr:hover td { background: var(--hover); }
.source-table td[colspan] { border-radius: var(--radius-panel); }
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--badge-h); padding: 0 var(--space-2); border-radius: var(--radius-badge); color: var(--success); background: var(--clear); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.status-badge::before { content: ''; width: var(--space-1); height: var(--space-1); background: var(--current); border-radius: var(--radius-pill); flex: none; }
.availability .status-badge { min-width: 3rem; height: var(--count-h); justify-content: flex-end; padding: 0; font-size: var(--text-count); font-weight: var(--weight-medium); }
.source-table tr[data-available='false'] .status-badge { color: var(--warn); background: var(--clear); }
.request-table tr[data-failed='true'] .status-badge { color: var(--danger); background: var(--danger-bg); }
.request-table tr[data-failed='true'] td:first-child { border-left: 2px solid var(--danger-line); padding-left: calc(var(--space-4) - 2px); }
.accounts td[data-state='已禁用'] .status-badge { color: var(--muted); background: var(--clear); }
.accounts td[data-state='待续期'] .status-badge, .accounts td[data-state^='冷却'] .status-badge { color: var(--warn); background: var(--warn-bg); }
.accounts td[data-state='无法续期'] .status-badge { color: var(--danger); background: var(--danger-bg); }
.accounts td:nth-child(6):not(:empty) { color: var(--danger); }
.mono, td.mono, code, pre, #try-model { font-family: var(--mono); font-size: var(--text-mono); }
p.mono, .msg-link { overflow-wrap: anywhere; }
pre { max-width: 100%; max-height: 22rem; overflow: auto; padding: var(--space-5); border: var(--line-width) solid var(--line); border-radius: var(--radius-panel); background: var(--field); color: var(--log-ink); line-height: 1.9; }
.grid, .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.overview > form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4); border: var(--line-width) solid var(--clear); border-radius: var(--radius-panel); background: var(--surface); }
.overview > form > p { grid-column: 1 / -1; margin: 0; }
p:empty { display: none; }
p.error, p.ok, p.warn { padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-control); font-size: var(--text-sm); overflow-wrap: anywhere; }
.error { color: var(--danger); }
p.error { background: var(--danger-bg); border-color: var(--clear); }
.ok { color: var(--success); }
p.ok { background: var(--success-bg); border-color: var(--clear); }
.warn { color: var(--warn); }
p.warn { background: var(--warn-bg); border-color: var(--clear); }
.empty { white-space: normal; color: var(--muted); padding: var(--space-8) var(--space-6); text-align: center; }
.source-table tbody td.empty { color: var(--muted); font-weight: var(--weight-normal); padding: var(--space-8) var(--space-6); }
.msg-link { display: block; margin-top: var(--space-2); }
.key-reveal:not(:empty) { padding: var(--space-5); border: var(--line-width) solid var(--clear); border-left: 2px solid var(--key-line); border-radius: var(--radius-control); background: var(--key-bg); color: var(--key-ink); user-select: all; word-break: break-all; }
form:has(button:disabled) > p.hint { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--disabled-bg); color: var(--muted); }
main > p { padding: var(--space-5); border: var(--line-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface); }

/* 登录浮层沿用同一套表面，不引入品牌装饰区。 */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--canvas); }
.login form { width: min(var(--login-max), 100%); padding: var(--space-8); border: var(--line-width) solid var(--clear); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-floating); }
.login h1 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); font-size: var(--text-login); }
.login .lead { margin: 0 0 var(--space-8); }
.login button { width: 100%; margin-top: var(--space-5); }
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); box-shadow: var(--focus-ring); }
.table-scroll:focus-visible { outline-offset: calc(-1 * var(--focus-offset)); box-shadow: var(--shadow-none); }

main > p.muted::before, form:has(button:disabled) > p.hint::before { content: ''; display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: var(--space-2); border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: var(--radius-pill); vertical-align: -0.1em; animation: waiting var(--motion-loading) linear infinite; }
@keyframes waiting { to { transform: rotate(360deg); } }

@media (min-width: 760px) and (max-width: 1099px) {
  main { padding-left: var(--space-6); padding-right: var(--space-6); }
  .source-section, .settings-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .source-section > h2 { margin: 0; }
  .account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  aside { position: static; height: auto; display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-right: 0; border-bottom: var(--line-width) solid var(--line); }
  .brand { padding: 0; }
  nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
  nav a { justify-content: center; padding: var(--space-2); flex: 1; gap: 0; }
  nav svg, nav a[aria-current='page']::after { display: none; }
  #logout { margin: 0; padding: 0 var(--space-2); }
  main { padding: var(--space-6) var(--space-4) var(--space-12); }
  h1 { margin-bottom: var(--space-5); }
  .panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .panel > button { justify-self: stretch; }
  .source-section, .settings-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .source-section > h2 { margin: 0; }
  .source-general { grid-template-columns: auto minmax(0, 1fr); }
  .source-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-proxy { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .source-general > .field { grid-column: auto; }
  .account-editor { padding: var(--space-4); }
  .account-editor > .field { max-width: none; margin-bottom: var(--space-4); }
  .account-form { padding: 0; }
  .form-actions { gap: var(--space-2); }
  .form-actions > button { flex: 1; }
  .field-row, .overview > form { grid-template-columns: minmax(0, 1fr); }
  .source-table td:first-child, .accounts td:first-child:not([colspan]), .accounts th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .accounts tr:hover td:first-child { background: var(--hover); }
  .source-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--workspace); }
  th, td { padding-left: var(--space-3); padding-right: var(--space-3); }
  .request-table tr[data-failed='true'] td:first-child { padding-left: calc(var(--space-3) - 2px); }
  .row > button { flex: 1; }
  .login { padding: var(--space-5); }
  .login form { padding: var(--space-8) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--motion-reduced) !important; animation-duration: var(--motion-reduced) !important; animation-iteration-count: 1 !important; }
}