:root { color-scheme:dark; --page:#0b151b; --panel:#111f27; --field:#0b171e; --text:#eef5f4; --muted:#bacbd0; --line:#627f8a; --accent:#82d9c4; --accent-ink:#10221e; --focus:#c1f3e6; --warning:#f0d7a4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--text); font:16px/1.55 "Avenir Next","Segoe UI",sans-serif; }
header,main { max-width:1264px; margin:auto; padding:24px 32px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.identity { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-mark { color:var(--accent); font-size:36px; }
h1 { font-size:24px; font-weight:600; line-height:1.3; letter-spacing:-.025em; margin:0; }
h2 { font-size:20px; font-weight:600; line-height:1.4; margin:0; }
p { margin:12px 0; }
.eyebrow { font-size:14px; letter-spacing:.045em; color:var(--muted); margin:0 0 4px; }
.hint,footer { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.notice { font-size:14px; color:var(--warning); overflow-wrap:anywhere; }
#connection-status { margin:0 0 20px; }
.account-actions { display:flex; align-items:center; gap:16px; font-size:14px; color:var(--muted); flex-wrap:wrap; }
.account-panel { padding:28px; border:1px solid var(--line); border-radius:8px; max-width:760px; background:var(--panel); }
.account-panel > p { max-width:64ch; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.subscription { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.subscription .hint { margin:4px 0 0; }
.quota { display:flex; flex-wrap:wrap; gap:12px 28px; margin:0; }
dt { color:var(--muted); font-size:14px; } dd { margin:0; }
.quota dd { font-size:26px; line-height:1.4; font-variant-numeric:tabular-nums; }
.workspace-nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin:12px 0; }
.workspace-nav a { display:inline-flex; align-items:center; min-height:44px; }
a { color:var(--accent); text-underline-offset:4px; }
.workbench { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }
.section-heading { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.input-panel,.result-panel { min-width:0; }
.result-panel { padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.field { margin:20px 0; }
.field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
fieldset { border:0; padding:0; margin:20px 0; min-width:0; }
legend { font-weight:600; margin-bottom:8px; }
label { display:block; color:var(--muted); font-size:14px; margin-bottom:6px; }
input,select,textarea { display:block; width:100%; min-width:0; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:5px; background:var(--field); color:var(--text); font:inherit; }
input[type=file] { padding:6px; }
input::file-selector-button { min-height:44px; padding:8px 12px; margin-right:10px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:4px; font:inherit; cursor:pointer; }
textarea { resize:vertical; }
button,.button,summary { min-height:46px; padding:10px 16px; border:1px solid var(--accent); border-radius:5px; font:inherit; font-size:16px; line-height:1.5; cursor:pointer; overflow-wrap:anywhere; }
button,.button { background:var(--accent); color:var(--accent-ink); font-weight:600; text-decoration:none; display:inline-block; }
button.secondary,summary { background:var(--field); color:var(--text); border-color:var(--line); font-weight:400; }
button.text-button { background:transparent; color:var(--accent); border-color:var(--line); font-weight:400; }
button:disabled,input:disabled,select:disabled,textarea:disabled { cursor:not-allowed; background:var(--panel); color:var(--muted); border-color:var(--line); }
:is(button,.button,summary):not(:disabled):hover { border-color:var(--focus); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
#compute { width:100%; margin-top:20px; }
#run-status { min-height:3.1em; }
.result-panel .actions button { flex:1 1 180px; }
.history { border-top:1px solid var(--line); margin-top:20px; padding-top:16px; }
.result-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,6em),1fr)); gap:12px; border-top:1px solid var(--line); padding-top:16px; margin-top:20px; }
.result-summary dt { overflow-wrap:anywhere; }
.result-summary dd { font-size:20px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metadata { display:grid; gap:12px; margin:20px 0; }
.metadata dd { font-size:14px; overflow-wrap:anywhere; }
.digest { font-family:ui-monospace,SFMono-Regular,monospace; }
details { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
summary { display:list-item; list-style-position:inside; }
details[open] > :is(label,form) { margin-top:16px; }
.purchase-documents { max-width:760px; margin:0 0 24px; padding:0; border:0; }
.documents-content { padding:20px; border:1px solid var(--line); border-top:0; background:var(--panel); overflow-wrap:anywhere; }
.documents-content section + section { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.documents-content ol { padding-left:24px; }
.documents-content li + li { margin-top:10px; }
.document-link { display:block; min-height:46px; padding:11px 0; }
#close-purchase-documents { margin-top:12px; }
footer { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); max-width:1000px; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px; z-index:10; background:var(--field); }
.skip-link:focus { top:8px; }
[hidden] { display:none!important; }
@media(max-width:1000px) { .field-pair { grid-template-columns:1fr; } }
@media(max-width:760px) { header,main { padding:16px; } header { align-items:flex-start; flex-direction:column; gap:12px; } h1 { font-size:22px; } .brand-mark { font-size:30px; } .subscription { flex-direction:column; align-items:flex-start; gap:16px; } .workbench { grid-template-columns:1fr; gap:24px; } .result-panel,.account-panel { padding:16px; } }
@media(max-width:350px) { header,main { padding-left:12px; padding-right:12px; } .quota { gap:16px; } .result-summary { grid-template-columns:1fr; } }

#purchase-activation label { display: flex; align-items: center; gap: 12px; min-height: 44px; }
#confirm-activation { flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; margin: 10px; padding: 0; }
footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }