@font-face { font-family:"Satoshi"; src:url("/static/satoshi-regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/static/satoshi-medium.woff2") format("woff2"); font-weight:500 650; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/static/satoshi-bold.woff2") format("woff2"); font-weight:700 900; font-display:swap; }
:root { color-scheme:light; --ink:#16181d; --muted:#5c6169; --line:#e3e4e7; --canvas:#fafafb; --paper:#fff; --soft:#e8f6f4; --accent:#0f7a72; --danger:#91352c; font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; background:var(--canvas); font-size:14px; line-height:1.5; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid rgba(15,122,114,.58); outline-offset:2px; }
.site-header { position:sticky; z-index:10; top:0; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,4vw,56px); border-bottom:1px solid var(--line); background:rgba(248,249,251,.96); }
.brand { display:flex; align-items:center; gap:9px; font-weight:650; text-decoration:none; }
.brand-mark { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--accent); font-weight:800; }
.site-header nav { display:flex; gap:4px; }
.site-header nav a { min-height:44px; display:inline-flex; align-items:center; padding:7px 10px; border-radius:7px; color:var(--muted); font-size:13px; text-decoration:none; }
.site-header nav a:hover,.site-header nav a[aria-current="page"] { background:var(--soft); color:var(--accent); }
.settings-shell { width:min(1180px,100%); display:grid; grid-template-columns:210px minmax(0,1fr); gap:56px; margin:0 auto; padding:58px clamp(20px,4vw,52px) 100px; }
.settings-nav { position:sticky; top:94px; align-self:start; }
.eyebrow { margin:0 0 5px; color:#5d6878; font-size:12px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; }
.settings-nav h1 { margin:0 0 28px; font-size:30px; letter-spacing:-.035em; }
.settings-nav nav { display:grid; gap:3px; }
.settings-nav nav a { padding:8px 10px; border-radius:7px; color:var(--muted); font-size:13px; text-decoration:none; }
.settings-nav nav a:hover { background:var(--soft); color:var(--ink); }
.account-identity { margin:28px 10px 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.settings-content { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.settings-section { min-width:0; scroll-margin-top:76px; padding:32px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.settings-section > header { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,340px); gap:28px; align-items:end; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.settings-section h2 { margin:0; font-size:23px; letter-spacing:-.025em; }
.settings-section > header > p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.settings-form { display:grid; gap:16px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:grid; gap:6px; }
label > span,.scope-label { color:#455161; font-size:13px; font-weight:650; }
label small { color:var(--muted); font-weight:400; }
input,textarea,select { width:100%; padding:10px 11px; border:1px solid #ccd4df; border-radius:7px; background:#fff; }
textarea { resize:vertical; line-height:1.55; }
input:disabled { background:var(--soft); color:var(--muted); }
.form-actions { display:flex; justify-content:flex-end; align-items:center; gap:14px; padding-top:4px; }
.form-status { min-height:18px; flex:1; margin:0; color:var(--muted); font-size:12px; }
.form-status.error { color:var(--danger); }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border:1px solid #bdc7d4; border-radius:7px; background:#fff; font-weight:650; cursor:pointer; }
.button:hover { background:var(--soft); }
.button:disabled { cursor:not-allowed; opacity:.55; }
.button.primary { border-color:var(--ink); background:var(--ink); color:#fff; }
.button.danger { border-color:#edcbc7; color:var(--danger); }
.usage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.usage-grid > div { min-height:94px; padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.usage-grid dt { color:var(--muted); font-size:12px; font-weight:650; }
.usage-grid dd { margin:7px 0 0; font-size:23px; font-weight:650; letter-spacing:-.025em; }
.section-note { margin:14px 0 0; color:var(--muted); font-size:12px; }
.key-create-form { display:grid; grid-template-columns:minmax(240px,1fr) auto auto; gap:14px; align-items:end; }
.key-create-form code,.api-example code { font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.key-create-form > div { display:grid; gap:8px; padding-bottom:8px; }
.new-key { display:grid; gap:12px; margin-top:18px; padding:16px; border:1px solid #a9c2ab; border-radius:8px; background:#f2f8f2; }
.new-key p { margin:3px 0 0; color:#526054; font-size:12px; }
.key-secret-row { display:flex; gap:8px; }
.key-secret-row code { min-width:0; flex:1; overflow:auto; padding:10px; border:1px solid #cbdaca; border-radius:6px; background:#fff; white-space:nowrap; }
.api-example { margin-top:18px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.api-example > div { display:flex; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--line); }
.api-example a { min-height:34px; display:inline-flex; align-items:center; color:var(--accent); font-size:12px; }
.api-example pre { margin:0; overflow:auto; padding:14px; background:#111923; color:#e9eef5; }
.key-list { display:grid; margin-top:18px; border-top:1px solid var(--line); }
.key-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.key-row h3 { margin:0 0 3px; font-size:13px; }
.key-row p { margin:0; color:var(--muted); font-size:12px; }
.key-row code { color:#4f5968; }
.key-row.revoked { opacity:.6; }
.compact-form { max-width:560px; }
.settings-loading { grid-column:2; padding:50px 0; color:var(--muted); }
@media (max-width:760px) { .settings-shell { grid-template-columns:1fr; gap:24px; padding-top:30px; } .settings-nav { position:static; } .settings-nav h1 { margin-bottom:14px; } .settings-nav nav { display:flex; overflow-x:auto; } .account-identity { margin-top:14px; } .settings-section { padding:22px 18px; } .settings-section > header { grid-template-columns:1fr; gap:8px; align-items:start; } .field-grid { grid-template-columns:1fr; } .usage-grid { grid-template-columns:1fr 1fr; } .key-create-form { grid-template-columns:1fr; align-items:start; } .key-create-form > div { padding:0; } .settings-loading { grid-column:1; } }
@media (max-width:480px) { .site-header { padding:0 12px; } .site-header nav a { padding-inline:7px; } .settings-shell { padding-inline:12px; } .usage-grid { grid-template-columns:1fr; } .key-secret-row { align-items:stretch; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }