:root {
  --ink: #050b0f; --surface: rgba(10, 20, 27, .86); --paper: #edf5f2;
  --muted: #89a098; --muted-bright: #afc3bc; --phosphor: #67ff91;
  --phosphor-dim: #2cac60; --rule: rgba(144, 185, 171, .17);
  --rule-bright: rgba(103, 255, 145, .38); --alarm: #ff7474;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--ink); color: var(--paper); font: 400 15px/1.6 var(--sans); padding: env(safe-area-inset-top) clamp(20px, 4vw, 64px) calc(28px + env(safe-area-inset-bottom)); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -3; background-image: linear-gradient(rgba(127,181,163,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(127,181,163,.035) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,black,transparent 70%); }
.ambient { position: fixed; z-index: -2; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .18; }
.ambient-one { width: 40vw; height: 40vw; min-width: 400px; min-height: 400px; right: -16vw; top: -18vw; background: #00ff66; }
.ambient-two { width: 32vw; height: 32vw; left: -20vw; bottom: -12vw; background: #15789a; opacity: .12; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 10px 16px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 3px; }
.app-header { max-width: 1320px; min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--paper); text-decoration: none; font-size: 20px; letter-spacing: -.7px; }
.brand img { width: 29px; height: 29px; }
.brand strong { color: var(--muted-bright); font-weight: 400; margin-left: 4px; }
.account-actions { display: flex; align-items: center; gap: 22px; }
#who { color: var(--muted); font: 400 11px var(--mono); }
.back-link, .text-action { color: var(--muted-bright); background: none; border: 0; padding: 10px 0; font-size: 12px; text-decoration: none; }
.back-link span { color: var(--phosphor); margin-left: 6px; }
.back-link:hover, .text-action:hover { color: var(--paper); }
main { max-width: 1320px; margin: 0 auto; }
.eyebrow, .micro-label { margin: 0; color: var(--muted); font: 500 9px/1.4 var(--mono); letter-spacing: 1.8px; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--phosphor); box-shadow: 0 0 12px var(--phosphor); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-weight: 350; letter-spacing: -2.2px; line-height: 1.08; }
h1 em { color: #9fb9b0; font-style: normal; }
h2, h3 { font-weight: 450; letter-spacing: -.45px; }
.loading-state { min-height: calc(100vh - 170px); display: grid; place-content: center; justify-items: center; color: var(--muted); }
.loader { display: flex; gap: 7px; margin-bottom: 15px; }
.loader i { width: 5px; height: 5px; border-radius: 50%; background: var(--phosphor); animation: pulse 1s ease-in-out infinite; }
.loader i:nth-child(2) { animation-delay: .16s; } .loader i:nth-child(3) { animation-delay: .32s; }
.load-error { max-width: 470px; text-align: center; } .load-error h1 { color: var(--paper); font-size: 32px; margin-bottom: 10px; }
@keyframes pulse { 0%,70%,100% { opacity:.2; transform:translateY(0) } 35% { opacity:1; transform:translateY(-4px) } }
.auth-layout { min-height: calc(100vh - 165px); display: grid; grid-template-columns: 1.1fr .8fr; gap: clamp(60px,10vw,150px); align-items: center; padding: 70px clamp(0px,4vw,54px); }
.auth-intro { max-width: 620px; }
.auth-intro h1 { font-size: clamp(46px,5.2vw,76px); margin: 26px 0 25px; }
.auth-lead { max-width: 540px; color: var(--muted-bright); font-size: clamp(16px,1.5vw,20px); line-height: 1.7; }
.benefit-list { list-style: none; padding: 0; margin: 48px 0 0; display: grid; max-width: 560px; }
.benefit-list li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); }
.benefit-list li > span { color: var(--phosphor-dim); font: 400 10px var(--mono); padding-top: 4px; }
.benefit-list strong, .benefit-list small { display: block; } .benefit-list strong { font-weight: 450; margin-bottom: 4px; } .benefit-list small { color: var(--muted); font-size: 12px; }
.auth-card, .panel { background: linear-gradient(145deg,rgba(15,29,38,.92),rgba(7,15,20,.88)); border: 1px solid var(--rule); box-shadow: 0 30px 80px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.02); }
.auth-card { position: relative; padding: clamp(28px,4vw,52px); }
.auth-card::before { content:''; position:absolute; left:-1px; top:40px; width:2px; height:74px; background:var(--phosphor); box-shadow:0 0 20px rgba(103,255,145,.5); }
.access-layout { min-height:calc(100vh - 165px); display:grid; place-items:center; padding:60px 0; }
.access-card { width:min(100%,620px); }
.access-card h1 { font-size:clamp(36px,4vw,54px); margin:35px 0 20px; }
.access-card p { max-width:500px; color:var(--muted-bright); }
.access-card a { color:var(--phosphor); }
.access-card .primary-button { margin-top:20px; }
.licence-expiry { color:var(--phosphor-dim) !important; font:400 11px var(--mono); margin-top:10px !important; }
.card-kicker { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font:500 9px var(--mono); letter-spacing:1.6px; }
.auth-card h2 { font-size:clamp(28px,3vw,39px); margin:55px 0 14px; }
.auth-card > p { color:var(--muted-bright); font-size:13px; max-width:390px; }
label { display:block; color:var(--muted-bright); font-size:11px; margin-bottom:8px; } label > span { color:var(--muted); }
.auth-card form { margin-top:31px; }
.field-action { display:flex; gap:9px; }
.auth-card .field-action { flex-direction:column; }
.auth-card .primary-button { width:100%; }
input { min-width:0; width:100%; min-height:50px; padding:12px 15px; border:1px solid var(--rule); border-radius:2px; background:rgba(2,8,11,.72); color:var(--paper); }
input::placeholder { color:#50645e; } input:focus { border-color:var(--rule-bright); }
/* A visible ring on keyboard focus, as everywhere else: the border change
   alone was too faint to find the field (2026-09-27 review). */
input:focus-visible { outline:2px solid var(--phosphor); outline-offset:2px; }
.primary-button, .secondary-button, .download-button { min-height:50px; border-radius:2px; padding:12px 18px; display:inline-flex; align-items:center; justify-content:center; gap:16px; text-decoration:none; white-space:nowrap; transition:transform .18s,background .18s,border-color .18s; }
.primary-button { border:1px solid var(--phosphor); background:var(--phosphor); color:#06110a; font-weight:600; }
.primary-button:hover { background:#91ffac; border-color:#91ffac; transform:translateY(-1px); }
.primary-button:disabled, .secondary-button:disabled { cursor:wait; opacity:.58; transform:none; }
.secondary-button { border:1px solid var(--rule-bright); background:rgba(28,74,54,.12); color:var(--phosphor); }
.secondary-button:hover { background:rgba(57,139,94,.14); border-color:var(--phosphor); }
.form-note, .inline-note { margin:14px 0 0; padding:11px 13px; border-left:2px solid var(--phosphor); background:rgba(49,135,82,.1); color:var(--muted-bright); font-size:12px; }
.error { color:#ffaaaa !important; border-color:var(--alarm) !important; background:rgba(255,85,85,.07) !important; }
.privacy-note { display:flex; gap:10px; margin:28px 0 0 !important; padding-top:21px; border-top:1px solid var(--rule); color:var(--muted) !important; font-size:10px !important; }
.privacy-note span { color:var(--phosphor); }
.dashboard { padding:62px 0 40px; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:end; gap:45px; margin-bottom:39px; }
.dashboard-heading h1 { font-size:clamp(42px,5vw,68px); margin:20px 0 10px; }
.dashboard-heading > div:first-child > p:last-child { color:var(--muted); margin:0; }
.progress-summary { min-width:220px; padding-bottom:8px; }
.progress-summary > span { display:block; margin-bottom:11px; color:var(--muted-bright); text-align:right; font:400 10px var(--mono); letter-spacing:1px; }
.progress-track { height:2px; background:var(--rule); overflow:hidden; } .progress-track i { display:block; width:0; height:100%; background:var(--phosphor); box-shadow:0 0 10px var(--phosphor); transition:width .4s ease; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.78fr); gap:20px; align-items:start; }
.primary-column, .side-column { display:grid; gap:20px; }
.panel { overflow:hidden; }
.panel-heading { min-height:92px; display:flex; align-items:center; gap:20px; padding:23px 27px; border-bottom:1px solid var(--rule); }
.panel-heading.simple { min-height:auto; align-items:flex-start; }
.panel-heading > div:nth-child(2), .panel-heading.simple > div:first-child { flex:1; }
.panel-index { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--rule); color:var(--phosphor-dim); font:400 9px var(--mono); }
.panel-heading h2 { font-size:20px; margin:4px 0 0; }
.status-badge, .version { margin-left:auto; padding:6px 10px; color:var(--muted); border:1px solid var(--rule); font:500 8px var(--mono); letter-spacing:1.2px; text-transform:uppercase; }
.status-badge.online { color:var(--phosphor); border-color:var(--rule-bright); background:rgba(42,157,82,.08); }
.status-badge.offline { color:#e0ad7f; border-color:rgba(224,173,127,.25); }
.panel-body { padding:25px 27px; }
.split-body { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.state { margin:0 0 7px; font-size:16px; } .support-copy { color:var(--muted); font-size:12px; line-height:1.8; margin:0; max-width:530px; }
.compact { min-height:40px; padding:8px 13px; font-size:11px; }
.credential { border-top:1px solid var(--rule); padding:25px 27px; background:rgba(4,13,17,.7); }
.credential > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:20px; } .credential > div:first-child > p:last-child { color:var(--muted); font-size:11px; }
.secret { max-height:190px; overflow:auto; margin:13px 0; padding:17px; border:1px solid var(--rule-bright); background:#020706; color:#caffd7; white-space:pre-wrap; overflow-wrap:anywhere; font:400 11px/1.7 var(--mono); }
.credential-hint { margin:0 0 15px; color:var(--muted); font-size:12px; line-height:1.6; } .credential-hint code { font:400 11px var(--mono); color:#caffd7; } .credential-hint a { color:inherit; }
.credential-actions { display:flex; align-items:center; gap:18px; } .credential-actions .secondary-button { min-height:41px; font-size:11px; } .credential-actions .text-action { margin-left:auto; }
.relay-panel > .inline-note { margin:0 27px 24px; }
.relay-replaced { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 27px 24px; padding:14px 16px; border:1px solid var(--rule-bright); } .relay-replaced p { margin:0; color:var(--muted-bright); font-size:12px; line-height:1.6; } .relay-replaced .secondary-button { flex:none; }
.update-button { display:block; padding:6px 0 0; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
#devices, #relays { list-style:none; padding:0; margin:0; }
#devices li, #relays li { display:flex; align-items:center; gap:16px; padding:18px 27px; border-bottom:1px solid var(--rule); } #devices li:last-child, #relays li:last-child { border-bottom:0; }
.relay-list { border-top:1px solid var(--rule); }
.relay-list .list-label { padding:18px 27px 0; }
.relay-list > .support-copy { padding:12px 27px 20px; }
.relay-list > .inline-note { margin:0 27px 20px; }
.update-available { color:#e0ad7f !important; text-transform:none !important; letter-spacing:0 !important; font:400 11px var(--sans) !important; margin-top:6px !important; }
.relay-waiting { color:var(--muted) !important; text-transform:none !important; letter-spacing:0 !important; font:400 11px var(--sans) !important; margin-top:6px !important; }
#relays .status-badge { flex:none; }
.credential-step { margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); display:flex; align-items:baseline; justify-content:space-between; gap:20px; } .credential-step > p:last-child { color:var(--muted); font-size:11px; margin:0; }
.pair-explainer { padding:20px 27px; border-bottom:1px solid var(--rule); background:rgba(4,13,17,.5); }
.pair-explainer p { margin:0; color:var(--muted-bright); font-size:12px; line-height:1.7; max-width:620px; }
.pair-explainer strong { color:var(--paper); font-weight:500; }
.pair-explainer a { color:var(--phosphor); }
.pair-explainer code { font:400 11px var(--mono); color:#caffd7; }
.device-glyph { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--rule); color:var(--phosphor); font:400 17px var(--mono); }
.device-info { flex:1; } .device-info strong, .device-info small { display:block; } .device-info strong { font-size:13px; font-weight:500; } .device-info small { color:var(--muted); margin-top:2px; font:400 9px var(--mono); text-transform:uppercase; letter-spacing:1px; }
.revoke-button { min-height:38px; padding:7px 10px; color:var(--muted); background:transparent; border:1px solid transparent; font-size:10px; } .revoke-button:hover { color:var(--alarm); border-color:rgba(255,116,116,.25); }
.empty-state { display:flex; align-items:center; gap:20px; padding:29px 27px; } .device-orbit { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--rule-bright); border-radius:50%; color:var(--phosphor); }
.empty-state strong { font-weight:450; } .empty-state p { color:var(--muted); font-size:12px; margin:4px 0 0; }
.pair-form { padding:27px; border-top:1px solid var(--rule); background:rgba(3,11,14,.42); }
.form-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; } .form-heading h3, .pairing-copy h3 { font-size:22px; margin:5px 0 0; }
.icon-button { width:38px; height:38px; background:none; color:var(--muted); border:1px solid var(--rule); font-size:24px; line-height:1; }
.device-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 21px; padding:0; border:0; }
.device-option { position:relative; display:grid; grid-template-columns:30px 1fr 12px; align-items:center; gap:12px; min-height:80px; margin:0; padding:15px; border:1px solid var(--rule); cursor:pointer; }
.device-option:hover { border-color:rgba(103,255,145,.3); } .device-option:has(input:checked) { border-color:var(--rule-bright); background:rgba(43,126,73,.08); }
.device-option input { position:absolute; opacity:0; pointer-events:none; } .option-icon { color:var(--phosphor); font:400 24px var(--mono); }
/* The radio itself is invisible, so its focus ring goes on the whole option. */
.device-option:has(input:focus-visible) { outline:2px solid var(--phosphor); outline-offset:3px; }
.device-option strong, .device-option small { display:block; } .device-option strong { color:var(--paper); font-size:12px; font-weight:500; } .device-option small { color:var(--muted); font-size:9px; margin-top:3px; }
.device-option i { width:9px; height:9px; border-radius:50%; border:1px solid var(--muted); } .device-option input:checked ~ i { border:2px solid var(--ink); background:var(--phosphor); box-shadow:0 0 0 1px var(--phosphor); }
.pairing-result { display:grid; grid-template-columns:1fr minmax(200px,260px); align-items:center; gap:28px; padding:30px 27px; border-top:1px solid var(--rule-bright); background:radial-gradient(circle at 90% 40%,rgba(56,163,92,.14),transparent 38%),#07110f; }
.pairing-copy > p:not(.micro-label) { color:var(--muted-bright); font-size:12px; max-width:430px; } .one-time-note { color:var(--muted) !important; font-size:10px !important; } .pairing-copy .primary-button { margin-top:8px; }
#qr { display:grid; place-items:center; padding:14px; background:white; } #qr img, #qr canvas, #qr table { display:block; width:100%; max-width:230px; height:auto; image-rendering:pixelated; }
.setup-steps { list-style:none; padding:0 27px; margin:0; } .setup-steps li { display:flex; align-items:center; gap:15px; min-height:73px; border-bottom:1px solid var(--rule); } .setup-steps li:last-child { border-bottom:0; }
.setup-steps li > span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border:1px solid var(--rule); border-radius:50%; color:var(--muted); font:400 10px var(--mono); }
.setup-steps strong, .setup-steps small { display:block; } .setup-steps strong { font-size:12px; font-weight:500; } .setup-steps small { color:var(--muted); font-size:9px; margin-top:2px; }
.setup-steps li.complete > span { color:#06110a; background:var(--phosphor); border-color:var(--phosphor); } .setup-steps li.current > span { color:var(--phosphor); border-color:var(--phosphor); box-shadow:0 0 14px rgba(103,255,145,.12); }
.next-action { margin:0; padding:17px 27px; border-top:1px solid var(--rule); color:var(--phosphor-dim); font:400 10px var(--mono); }
.install-panel > .support-copy { padding:21px 27px 0; }
.download-button { margin:20px 27px; justify-content:space-between; border:1px solid var(--rule-bright); color:var(--paper); background:rgba(35,93,58,.1); }
.download-button:hover { border-color:var(--phosphor); background:rgba(54,129,80,.14); }
.download-button span, .download-button small, .download-button strong { display:block; } .download-button small { color:var(--muted); font:400 7px var(--mono); letter-spacing:1.2px; } .download-button strong { font-size:11px; margin-top:4px; } .download-button b { color:var(--phosphor); font-size:18px; }
.install-guide { border-top:1px solid var(--rule); }
.install-guide summary { list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:57px; padding:12px 27px; color:var(--muted-bright); cursor:pointer; font-size:11px; }
.install-guide summary::-webkit-details-marker { display:none; } .install-guide summary span { color:var(--phosphor); font-size:19px; transition:transform .2s; } .install-guide[open] summary span { transform:rotate(45deg); }
.install-guide ol { list-style:none; padding:0 27px 18px; margin:0; } .install-guide li { display:grid; grid-template-columns:27px 1fr; gap:8px; border-top:1px solid var(--rule); padding:13px 0; }
.install-guide li > span { color:var(--phosphor-dim); font:400 8px var(--mono); } .install-guide li p { color:var(--muted); font-size:10px; margin:0; } .install-guide strong { color:var(--muted-bright); font-weight:500; }
.security-note { display:flex; gap:14px; padding:4px 12px; color:var(--muted); font-size:11px; line-height:1.6; } .security-note > span { color:var(--phosphor-dim); font-size:17px; } .security-note p { margin:0; } .security-note strong { color:var(--muted-bright); font-weight:500; }
footer { max-width:1320px; margin:24px auto 0; padding-top:24px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:20px; color:#62766f; font:400 8px var(--mono); letter-spacing:1.2px; }
footer a { color:var(--muted); text-decoration:none; }
.account-steps { padding-left:19px; margin:24px 0; color:var(--muted-bright); font-size:12px; line-height:1.8; }
.account-steps li + li { margin-top:10px; }
.auth-card .account-switch, .auth-card .account-legal { font-size:12px; line-height:1.8; }
.account-switch a, .account-legal a { color:var(--paper); text-underline-offset:3px; }
/* Links inside running text are underlined: colour alone does not tell every
   reader that a word is a link (WCAG 1.4.1). */
.support-copy a, .credential-hint a, .access-card p a, .pair-explainer a, .security-note a, .account-legal a, .account-switch a, .consent p a { text-decoration:underline; text-underline-offset:3px; }

/* GET /auth: "Continue as <address>". A single card, no script. */
.confirm-main { min-height:calc(100vh - 60px); display:grid; place-items:center; padding:48px 0; }
.confirm-card { width:min(100%,560px); }
.confirm-card h1 { font-size:clamp(30px,4vw,44px); margin:32px 0 16px; overflow-wrap:anywhere; }
.confirm-email { color:var(--phosphor); }
.confirm-card > p { color:var(--muted-bright); font-size:13px; }
.confirm-card form { margin-top:26px; }
.confirm-card .primary-button { width:100%; white-space:normal; overflow-wrap:anywhere; }
.activation-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
@media (max-width:980px) {
  .auth-layout { grid-template-columns:1fr; gap:50px; padding-block:55px; } .auth-intro { max-width:720px; }
  .benefit-list { grid-template-columns:repeat(3,1fr); max-width:none; gap:20px; } .benefit-list li { grid-template-columns:1fr; }
  .dashboard-grid { grid-template-columns:1fr; } .side-column { grid-template-columns:1fr 1fr; align-items:start; } .security-note { grid-column:1/-1; }
}
@media (max-width:680px) {
  body { padding-inline:17px; } .app-header { min-height:68px; } .brand { font-size:17px; } .brand img { width:25px; height:25px; } .back-link { display:none; }
  #who { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account-actions { gap:12px; }
  .auth-layout { min-height:0; padding:48px 0; gap:40px; } .auth-intro h1 { font-size:43px; } .benefit-list { grid-template-columns:1fr; margin-top:34px; } .benefit-list li { grid-template-columns:34px 1fr; }
  .auth-card { padding:27px 22px; } .auth-card h2 { margin-top:40px; } .field-action { flex-direction:column; } .field-action .primary-button { width:100%; }
  .dashboard { padding-top:43px; } .dashboard-heading { align-items:stretch; flex-direction:column; gap:25px; } .dashboard-heading h1 { font-size:44px; } .progress-summary { min-width:0; } .progress-summary > span { text-align:left; }
  .panel-heading { padding-inline:18px; gap:13px; } .panel-heading .compact { width:40px; padding:0; font-size:0; } .panel-heading .compact span { font-size:20px; }
  .panel-body, .credential, .pair-form { padding-inline:18px; } .split-body { align-items:stretch; flex-direction:column; } .split-body .secondary-button { width:100%; }
  .credential > div:first-child, .credential-step { display:block; } .pair-explainer, .relay-list .list-label, .relay-list > .support-copy { padding-inline:18px; } #relays li { padding-inline:18px; } .credential-actions { align-items:stretch; flex-direction:column; gap:5px; } .credential-actions .text-action { margin-left:0; } .relay-panel > .inline-note, .relay-replaced { margin-inline:18px; } .relay-replaced { align-items:stretch; flex-direction:column; }
  .device-options { grid-template-columns:1fr; } .pairing-result { grid-template-columns:1fr; padding-inline:18px; } #qr { grid-row:1; max-width:260px; margin:auto; }
  .side-column { grid-template-columns:1fr; } .security-note { grid-column:auto; } footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* The consent banner, as on the public pages (landing.css), in this page's
   tokens. The portal is where the conversions happen, so it asks too. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 34rem; margin: 0 auto; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 18px 50px #00000059; color: var(--paper);
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.5;
  backdrop-filter: blur(12px);
}
.consent p { margin: 0 0 0.85rem; color: var(--muted-bright); }
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent button {
  font: inherit; min-height: 2.6rem; padding: 0.5rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--phosphor); background: transparent; color: var(--phosphor); cursor: pointer;
}
/* Refusing is exactly as visible as accepting (2026-09-27 review): the
   banner asks a question and must not steer the answer. */
.consent button.quiet { border-color: var(--phosphor); color: var(--phosphor); }
.consent button:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }