:root { --ink:#151b20; --muted:#65717a; --line:#dce1e4; --soft:#f3f5f5; --red:#e11919; --red-dark:#b90e16; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Manrope",Arial,sans-serif; font-size:14px; line-height:1.55; letter-spacing:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.portal-brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.portal-brand img { width:48px; height:48px; object-fit:contain; }
.portal-brand span { display:flex; flex-direction:column; line-height:1.15; }
.portal-brand strong { font-size:13px; }
.portal-brand small { margin-top:4px; color:var(--muted); font-size:9px; text-transform:uppercase; }
.auth-page { min-height:100vh; background:var(--soft); }
.auth-header { display:flex; height:76px; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid var(--line); background:#fff; }
.auth-header > a:last-child { color:var(--muted); font-size:11px; font-weight:600; text-decoration:none; }
.auth-layout { display:grid; min-height:calc(100vh - 76px); grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr); }
.auth-copy { display:flex; flex-direction:column; justify-content:center; padding:8vw; color:#fff; background:#151b20; }
.eyebrow,.section-tag,.section-header p { margin:0 0 17px; color:var(--red); font-size:9px; font-weight:700; text-transform:uppercase; }
.auth-copy h1,.registration-intro h1 { max-width:590px; margin:0; font-size:clamp(42px,5vw,68px); line-height:1.05; font-weight:600; }
.auth-copy > p:last-child { max-width:570px; margin:28px 0 0; color:#aeb8bd; font-size:15px; }
.auth-form-wrap { display:grid; place-items:center; padding:50px 5vw; }
.auth-form { width:min(100%,520px); padding:38px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.auth-form h2 { margin:0; font-size:29px; }
.auth-form > div:first-child > p:last-child,.form-heading > p:last-child { margin:8px 0 28px; color:var(--muted); font-size:12px; }
.auth-form label { display:flex; flex-direction:column; gap:7px; margin-top:18px; color:#3d474e; font-size:10px; font-weight:700; text-transform:uppercase; }
.auth-form input,.auth-form select { width:100%; height:45px; padding:0 12px; border:1px solid #cbd2d6; border-radius:4px; color:var(--ink); background:#fff; outline:none; text-transform:none; }
.auth-form input:focus,.auth-form select:focus,.tester-section textarea:focus { border-color:var(--ink); box-shadow:0 0 0 2px rgba(21,27,32,.08); }
.auth-form label small { color:var(--muted); font-size:8px; font-weight:500; text-transform:none; }
.primary-action,.command-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:0 16px; border:0; border-radius:4px; color:#fff; background:var(--red); font-size:10px; font-weight:700; }
.primary-action { width:100%; margin-top:26px; }
.text-action { display:block; margin:16px auto 0; padding:0; border:0; color:var(--muted); background:transparent; font-size:10px; font-weight:700; text-decoration:underline; }
.forgot-action { margin:10px 0 -10px auto; }
.primary-action:hover,.command-button:hover { background:var(--red-dark); }
.primary-action svg,.command-button svg { width:15px; }
button:disabled { cursor:not-allowed; opacity:.58; }
.form-foot { margin:25px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.form-foot a { color:var(--ink); font-weight:700; }
.notice { margin:18px 0; padding:12px 14px; border-left:3px solid var(--red); color:#7d171b; background:#fff0f0; font-size:11px; }
.notice.success { border-color:#159570; color:#0d6950; background:#edf9f5; }
.registration-layout { display:grid; min-height:calc(100vh - 76px); grid-template-columns:minmax(320px,.65fr) minmax(560px,1.35fr); }
.registration-intro { padding:80px 5vw; color:#fff; background:#151b20; }
.registration-intro h1 { font-size:clamp(38px,4vw,58px); }
.registration-intro ol { margin:60px 0 0; padding:0; list-style:none; }
.registration-intro li { display:flex; align-items:center; gap:15px; padding:18px 0; border-top:1px solid #354047; color:#c2cbd0; font-size:11px; }
.registration-intro li span { color:var(--red); font-family:"DM Mono",monospace; font-size:9px; }
.registration-form { align-self:start; width:min(100% - 10vw,850px); margin:55px auto; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.field-grid .wide { grid-column:1 / -1; }
.check-row { flex-direction:row!important; align-items:flex-start; gap:10px!important; text-transform:none!important; }
.check-row input { width:16px; height:16px; margin:2px 0 0; }
.human-check { min-height:65px; margin-top:20px; }
.auth-dialog { width:min(92vw,470px); padding:0; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.auth-dialog::backdrop { background:rgba(17,24,29,.65); }
.auth-dialog form { padding:28px; }
.auth-dialog h2 { margin:0; font-size:24px; }
.auth-dialog > form > p { margin:12px 0 20px; color:var(--muted); font-size:11px; }
.auth-dialog label { display:flex; flex-direction:column; gap:7px; margin-top:16px; color:#3d474e; font-size:10px; font-weight:700; text-transform:uppercase; }
.auth-dialog input { width:100%; height:45px; padding:0 12px; border:1px solid #cbd2d6; border-radius:4px; outline:none; }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-heading .section-tag { margin-bottom:5px; }
.dialog-close { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--line); border-radius:4px; background:#fff; }
.dialog-close svg { width:15px; }

.dashboard-page { min-height:100vh; background:var(--soft); }
.sidebar { position:fixed; z-index:20; inset:0 auto 0 0; display:flex; width:240px; flex-direction:column; padding:24px 18px; color:#fff; background:#11181d; }
.sidebar .portal-brand { padding:0 8px 25px; border-bottom:1px solid #2d383e; }
.sidebar .portal-brand small { color:#87949b; }
.sidebar nav { display:flex; flex-direction:column; gap:3px; margin-top:25px; }
.sidebar nav a,.logout-button { display:flex; align-items:center; gap:11px; min-height:42px; padding:0 12px; border:0; border-radius:4px; color:#9eabb2; background:transparent; font-size:10px; font-weight:600; text-decoration:none; }
.sidebar nav a:hover,.sidebar nav a.active { color:#fff; background:#263138; }
.sidebar nav a.active { box-shadow:inset 2px 0 var(--red); }
.sidebar nav svg,.logout-button svg { width:16px; }
.logout-button { margin-top:auto; }
.dashboard-main { min-height:100vh; margin-left:240px; padding:0 4vw 70px; }
.dashboard-header { display:flex; min-height:96px; align-items:center; gap:18px; border-bottom:1px solid var(--line); }
.dashboard-header > div:first-of-type { flex:1; }
.dashboard-header p { margin:0; color:var(--muted); font-size:9px; text-transform:uppercase; }
.dashboard-header h1 { margin:3px 0 0; font-size:24px; }
.account-chip { display:flex; align-items:center; gap:10px; }
.account-chip > span { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:var(--ink); font-size:9px; font-weight:700; }
.account-chip div { display:flex; flex-direction:column; }
.account-chip strong { font-size:10px; }
.account-chip small { color:var(--muted); font-size:8px; }
.sidebar-toggle { display:none; width:38px; height:38px; place-items:center; border:1px solid var(--line); border-radius:4px; background:#fff; }
.dashboard-section { padding:42px 0; border-bottom:1px solid var(--line); }
.dashboard-view[hidden] { display:none; }
.dashboard-view { animation:dashboard-view-in 180ms ease-out both; }
.dashboard-view.view-leaving { animation:dashboard-view-out 120ms ease-in both; pointer-events:none; }
@keyframes dashboard-view-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes dashboard-view-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-4px); } }
.operations-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,.7fr); gap:16px; margin-top:16px; }
.usage-chart-panel,.health-panel article { border:1px solid var(--line); background:#fff; }
.usage-chart-panel { min-width:0; padding:20px 24px 14px; }
.chart-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.chart-heading > div:first-child { display:flex; flex-direction:column; }
.chart-heading span,.health-panel span,.health-panel small { color:var(--muted); font-size:9px; }
.chart-heading strong { margin-top:3px; font-size:13px; }
.chart-range { display:flex; border:1px solid var(--line); border-radius:4px; }
.chart-range button { width:38px; height:30px; border:0; border-right:1px solid var(--line); color:var(--muted); background:#fff; font-size:8px; font-weight:700; }
.chart-range button:last-child { border-right:0; }
.chart-range button.active { color:#fff; background:var(--ink); }
#usageChart { display:block; width:100%; height:220px; margin-top:14px; }
.chart-axis { display:flex; justify-content:space-between; color:var(--muted); font-size:8px; }
.health-panel { display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.health-panel article { display:flex; min-height:130px; flex-direction:column; justify-content:center; padding:22px; }
.health-panel strong { margin:14px 0 3px; font-size:24px; }
.health-value.operational { color:#0d8060; }
.health-value.degraded,.health-value.not-configured { color:var(--red); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--line); gap:1px; }
.metric-grid article { min-height:145px; padding:24px; background:#fff; }
.metric-grid span,.metric-grid small { display:block; color:var(--muted); font-size:9px; }
.metric-grid strong { display:block; margin:24px 0 4px; font-size:30px; line-height:1; }
.usage-band { margin-top:16px; padding:20px 24px; border:1px solid var(--line); background:#fff; }
.usage-band > div:first-child { display:flex; justify-content:space-between; font-size:10px; }
.usage-track { height:5px; margin-top:14px; overflow:hidden; background:#e4e8ea; }
.usage-track i { display:block; width:0; height:100%; background:var(--red); transition:width .3s; }
.billing-band { display:flex; align-items:center; gap:10px; margin-top:16px; padding:18px 20px; border:1px solid var(--line); background:#fff; }
.billing-band > div { flex:1; }
.billing-band span { font-size:10px; font-weight:700; }
.billing-band p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.billing-band select { height:42px; padding:0 10px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:10px; }
.secondary-button { min-height:42px; padding:0 14px; border:1px solid var(--ink); border-radius:4px; color:var(--ink); background:#fff; font-size:10px; font-weight:700; }
.section-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-header p { margin-bottom:5px; }
.section-header h2 { margin:0; font-size:22px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); background:#fff; }
table { width:100%; border-collapse:collapse; }
th,td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); background:#fafbfb; font-size:8px; text-transform:uppercase; }
td { font-size:10px; }
tbody tr:last-child td { border-bottom:0; }
.empty-row { padding:35px; color:var(--muted); text-align:center; }
.icon-action { display:grid; width:30px; height:30px; place-items:center; margin-left:auto; border:1px solid var(--line); border-radius:4px; background:#fff; }
.icon-action svg { width:14px; }
.icon-action.danger { color:var(--red); }
.key-reveal { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(250px,1fr) 34px; gap:18px; align-items:center; margin-bottom:16px; padding:18px 20px; border:1px solid #d1a116; background:#fff9e6; }
.key-reveal[hidden] { display:none; }
.key-reveal strong { font-size:11px; }
.key-reveal p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.key-reveal code { min-width:0; overflow:hidden; font-family:"DM Mono",monospace; font-size:10px; text-overflow:ellipsis; }
.key-reveal button { display:grid; width:34px; height:34px; place-items:center; border:1px solid #d8c785; border-radius:4px; background:#fff; }
.key-reveal svg { width:14px; }
.tester-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid #313a41; background:#151d22; }
.tester-grid > div { min-width:0; padding:22px; }
.tester-grid > div:first-child { border-right:1px solid #344049; }
.tester-grid label { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; color:#b5c0c6; font-size:9px; text-transform:uppercase; }
.tester-grid select { height:40px; padding:0 10px; border:1px solid #46535b; border-radius:4px; color:#e5ecef; background:#1d272d; }
.tester-section textarea { width:100%; min-height:330px; resize:vertical; padding:16px; border:1px solid #46535b; border-radius:4px; color:#dbe6eb; background:#10171b; font:10px/1.7 "DM Mono",monospace; outline:none; }
.response-panel { display:flex; flex-direction:column; }
.response-panel > div { display:flex; justify-content:space-between; color:#a7b6bf; font-size:9px; text-transform:uppercase; }
.response-tools,.request-detail-grid section > div,.request-detail-grid section > div > div { display:flex; align-items:center; gap:7px; }
.tool-button { display:grid; width:30px; height:30px; place-items:center; border:1px solid currentColor; border-radius:4px; color:inherit; background:transparent; }
.tool-button svg { width:13px; }
.response-panel pre { min-height:370px; margin:18px 0 0; overflow:auto; color:#dbe6eb; font:10px/1.7 "DM Mono",monospace; white-space:pre-wrap; }
.request-dialog { width:min(94vw,1100px); padding:0; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.request-dialog::backdrop { background:rgba(17,24,29,.68); }
.request-dialog-header { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.request-dialog-header p { margin:0; color:var(--red); font-size:8px; font-weight:700; text-transform:uppercase; }
.request-dialog-header h2 { margin:3px 0 0; font-size:20px; }
.request-detail-grid { display:grid; grid-template-columns:1fr 1fr; background:#151d22; }
.request-detail-grid section { min-width:0; padding:20px; }
.request-detail-grid section:first-child { border-right:1px solid #344049; }
.request-detail-grid section > div { justify-content:space-between; color:#b5c0c6; font-size:9px; text-transform:uppercase; }
.request-detail-grid pre { min-height:360px; max-height:60vh; margin:14px 0 0; overflow:auto; color:#dbe6eb; font:10px/1.7 "DM Mono",monospace; white-space:pre-wrap; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); gap:16px; }
.settings-panel { padding:24px; border:1px solid var(--line); background:#fff; }
.settings-heading { display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.settings-heading > svg { width:19px; color:var(--red); }
.settings-heading div { display:flex; flex-direction:column; }
.settings-heading strong { font-size:11px; }
.settings-heading span { margin-top:2px; color:var(--muted); font-size:9px; }
.settings-fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:20px 0; }
.settings-fields.single-column { grid-template-columns:1fr; }
.settings-fields label { display:flex; min-width:0; flex-direction:column; gap:6px; color:#3d474e; font-size:8px; font-weight:700; text-transform:uppercase; }
.settings-fields label.wide { grid-column:1 / -1; }
.settings-fields input { width:100%; height:42px; padding:0 11px; border:1px solid #cbd2d6; border-radius:4px; outline:none; text-transform:none; }
.settings-fields input:focus { border-color:var(--ink); box-shadow:0 0 0 2px rgba(21,27,32,.08); }
.settings-fields input[readonly] { color:var(--muted); background:#f5f6f6; }
.settings-fields small { color:var(--muted); font-size:8px; font-weight:500; text-transform:none; }

@media (max-width:1050px) { .metric-grid { grid-template-columns:1fr 1fr; } .tester-grid,.settings-grid,.operations-grid { grid-template-columns:1fr; } .health-panel { grid-template-columns:1fr 1fr; grid-template-rows:auto; } .tester-grid > div:first-child { border-right:0; border-bottom:1px solid #344049; } .billing-band { align-items:flex-start; flex-wrap:wrap; } .billing-band > div { flex-basis:100%; } }
@media (max-width:820px) { .auth-layout,.registration-layout,.request-detail-grid { grid-template-columns:1fr; } .request-detail-grid section:first-child { border-right:0; border-bottom:1px solid #344049; } .auth-copy { min-height:420px; padding:70px 7vw; } .registration-intro { padding:60px 7vw; } .registration-form { width:calc(100% - 36px); margin:30px auto; } .sidebar { transform:translateX(-100%); transition:transform .2s; } .sidebar-open .sidebar { transform:none; } .dashboard-main { margin-left:0; padding-right:18px; padding-left:18px; } .sidebar-toggle { display:grid; } }
@media (max-width:560px) { .auth-header { padding:0 18px; } .auth-header > a:last-child { font-size:9px; } .auth-form-wrap { padding:25px 18px; } .auth-form { padding:26px 20px; } .field-grid,.settings-fields { grid-template-columns:1fr; } .field-grid .wide,.settings-fields label.wide { grid-column:auto; } .metric-grid,.health-panel { grid-template-columns:1fr; } .dashboard-header { min-height:82px; } .account-chip div { display:none; } .section-header { align-items:flex-start; flex-direction:column; } .key-reveal { grid-template-columns:1fr 34px; } .key-reveal > div { grid-column:1 / -1; } }
@media (prefers-reduced-motion:reduce) { .dashboard-view,.dashboard-view.view-leaving { animation:none; } }