/* Specula palette and typography, adapted from https://isitdeadyet.dev/. */
@font-face{font-family:Inter;src:url('./inter-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('./space-grotesk-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{
 color-scheme:dark;
 --paper:#070b12;--ink:#fff;--muted:#a9bccd;--line:#2a3849;
 --green:#d8c48c;--lime:#d8c48c;--orange:#ec8f5a;--white:#0f1724;--soft:#142131;
 --panel:#0f1724;--panel-2:#142131;--line-soft:#1b2634;--dimmer:#8ea3b7;
 --accent:#d8c48c;--accent-ink:#101722;--cyan:#7fc9e8;
 --active:#4fbfa0;--finished:#a394ec;--warning:#e8b23c;--error:#e58aa8;
 --sans:Inter,system-ui,sans-serif;--display:'Space Grotesk',Inter,system-ui,sans-serif;
}
body{font-family:var(--sans);background:radial-gradient(640px 420px at 82% 0%,#7fc9e80d,transparent 70%),radial-gradient(520px 380px at 8% 22%,#d8c48c0a,transparent 70%),var(--paper)}
h1,h2,h3,.brand,.stat-value,.eyebrow,th{font-family:var(--display)}
h1{color:var(--accent);font-size:clamp(30px,3vw,44px);line-height:1.13;letter-spacing:-.045em}
h2{letter-spacing:-.025em}h3{letter-spacing:-.015em}
.stat-value{color:var(--accent);font-weight:600;font-size:36px}
.stat-value span{font-family:var(--sans);font-weight:400}
.eyebrow{letter-spacing:.08em;color:var(--muted)}
.subtitle{line-height:1.8}
aside{background:#0b121e;color:var(--muted);border-right:1px solid var(--line-soft)}
.brand{color:var(--ink);gap:9px;font-size:21px;font-weight:600;letter-spacing:-.9px}
.brand-mark{color:var(--accent)}
.env,.nav-label,.side-footer small{color:var(--dimmer)}
nav button{color:var(--muted);border:1px solid transparent;border-radius:9px;min-height:44px}
nav button:hover{background:#7fc9e808;border-color:#7fc9e830}
nav button.active{border-color:var(--accent);background:#d8c48c14;color:var(--accent)}
.side-line{background:var(--line)}
.server-light{color:var(--muted)}.dot{background:var(--active)}
.avatar{background:var(--panel-2);color:var(--accent);border:1px solid var(--line)}
.identity strong{color:var(--ink)}
.topbar{background:#0f1724ed;backdrop-filter:blur(18px)}
.tag{background:#d8c48c12;color:var(--accent);border:1px solid #d8c48c35;border-radius:6px}
.role{color:var(--ink);background:var(--paper);border-radius:9px;padding:8px}
.demo-note{background:#d8c48c08;color:var(--accent);border:1px solid #d8c48c40;border-radius:9px}
.btn{background:var(--panel-2);color:var(--ink);border-color:var(--line);border-radius:9px;min-height:42px}
.btn:hover{background:#1b2b3c;border-color:var(--accent);box-shadow:0 0 0 2px #d8c48c15}
.btn.primary,.btn.dark{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover,.btn.dark:hover{background:#e6d4a3;color:var(--accent-ink)}
.btn.link{color:var(--cyan);background:transparent;min-height:32px}
.btn.small{min-height:34px}.icon-btn{color:var(--muted)}.icon-btn:hover{color:var(--cyan);background:#7fc9e80c}
button{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan)}
:is(input,select):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
input::placeholder{color:var(--dimmer);opacity:1}
.stat,.app-card,.panel{border-color:var(--line);border-radius:16px;background:linear-gradient(168deg,#7fc9e809,transparent 65%),var(--panel);box-shadow:inset 0 1px 0 #bedcf510,0 8px 28px #00061030}
.stat-top svg{color:var(--cyan)}
.stat-bottom b{color:var(--active);font-weight:500}
.meter{background:var(--panel-2);height:5px}.meter span{background:var(--accent)}
.app-card:hover{border-color:#7fc9e86b}
.app-icon{background:#4fbfa014;color:var(--active);border:1px solid #4fbfa026;border-radius:11px}
.app-icon.orange{background:#ec8f5a14;color:var(--orange);border-color:#ec8f5a26}
.app-icon.blue{background:#7fc9e814;color:var(--cyan);border-color:#7fc9e826}
.app-icon.purple{background:#a394ec14;color:var(--finished);border-color:#a394ec26}
.app-card .arrow{color:var(--dimmer)}
.app-meta{color:var(--muted)}.app-meta svg{color:var(--dimmer)}
.app-card .btn{background:#070b1266}.app-card .btn:hover{background:var(--panel-2)}
.panel-head{background:transparent}
.db-mini{border-color:var(--line-soft)}
.db-symbol{background:#7fc9e80c;color:var(--cyan);border:1px solid #7fc9e830;border-radius:9px}
.badge{border-color:#4fbfa035;color:var(--active);background:#4fbfa010;border-radius:6px;font-weight:500}
.badge svg{width:13px;height:13px}
.badge.restricted{color:var(--warning);border-color:#e8b23c35;background:#e8b23c10}
.badge.gray{color:var(--muted);background:#a9bccd0a;border-color:#a9bccd26}
.badge.orange{color:var(--orange);border-color:#ec8f5a35;background:#ec8f5a10}
.backup-visual{background:#7fc9e808;border:1px solid #7fc9e825;border-radius:10px}
.backup-visual svg{color:var(--cyan)}
.search{background:var(--paper);border-color:var(--line);border-radius:9px;min-height:44px}
.search input{color:var(--ink)}
th{background:#070b1266;color:var(--muted);font-size:11px;letter-spacing:.07em}
td{border-color:var(--line-soft)}tbody tr:hover{background:#7fc9e808}
pre{background:var(--paper);border:1px solid var(--line);border-radius:10px;color:#dbe6f2}
.notice{background:#d8c48c08;border-color:#d8c48c40;color:var(--accent);border-radius:10px}
.notice.green{background:#4fbfa00a;border-color:#4fbfa035;color:var(--active)}
.setting input,.field>input,.field>select{color:var(--ink);background:var(--paper);border-color:var(--line);border-radius:9px}
label.field>input,label.field>select{color:var(--ink);background:var(--paper);border-color:var(--line);border-radius:9px}
input::file-selector-button{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px 9px;margin-right:10px;cursor:pointer}
.switch,.task input{accent-color:var(--accent)}
.activity svg{color:var(--cyan)}
.modal-overlay{background:#000610b3;backdrop-filter:blur(8px)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 100px #00061099}
.modal-head{background:#0f1724f5}
.modal .panel{background:var(--paper);box-shadow:none}
.tabs button{color:var(--muted)}
.tabs .active{color:var(--accent);border-color:var(--accent)}
.credential{background:var(--paper);border:1px solid var(--line);border-radius:9px;color:var(--cyan)}
.chart span{background:#7fc9e855}.chart span:nth-child(even){background:var(--accent)}
#toast{color:var(--ink);background:var(--panel-2);border:1px solid #7fc9e85c;border-radius:10px;box-shadow:0 8px 40px #00061080}
.footer{color:var(--dimmer)}
.storage-legend i{background:var(--accent)}.storage-legend i.orange{background:var(--orange)}
@media(max-width:1150px){.brand{font-size:18px}}
@media(max-width:720px){.brand{font-size:21px}.stat-value{font-size:29px}h1{font-size:30px}nav button{min-height:40px}.topbar{padding:0 17px}.role{font-size:11px}.main-content{padding-top:22px}.app-card{border-radius:14px}.demo-note{line-height:1.6}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Native controls follow Specula, including option menus and disabled states. */
:root{color-scheme:dark}
select,.role,.setting select,.field>select,label.field>select{appearance:none;color:var(--ink);background-color:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 32px 8px 11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23d8c48c' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;color-scheme:dark}
option,optgroup{background:var(--panel-2);color:var(--ink)}
select:disabled{opacity:.65;cursor:default}
select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.backup-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;flex-wrap:wrap}