/* HABI Docs — same visual language as HABI Studio and the approved mockup.
   Warm paper, charcoal ink, one orange for action and "you are here". */
:root{
  --bg:#F8F4ED; --surface:#FFFFFF; --sunk:#F1EBE1; --line:#E4DCCF; --fg:#2A221C; --muted:#6B6158;
  --accent:#F4A259; --accent-hover:#E98F44; --accent-ink:#A9561A; --accent-soft:#FCE9D4; --on-accent:#2B1C0E;
  --ok:#2E8F57; --ok-soft:#DFF1E6; --warn:#9A6B00; --warn-soft:#FBF0CC; --danger:#C7302C; --danger-soft:#FBE3E1;
  --tbd:#7A4FB5; --tbd-soft:#EFE6FA;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px; --shadow:0 1px 2px rgba(42,34,28,.06),0 8px 24px rgba(42,34,28,.06);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#13100D; --surface:#1D1814; --sunk:#181411; --line:#382F28; --fg:#F3ECE3; --muted:#A99E92;
  --accent-ink:#F6B377; --accent-soft:#3A2A1B;
  --ok:#5BC489; --ok-soft:#1C3326; --warn:#E9C25A; --warn-soft:#3A3018; --danger:#F05A57; --danger-soft:#3D1D1B;
  --tbd:#C3A2F0; --tbd-soft:#2E2340; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark}}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);margin:0}
body{font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0;letter-spacing:-.01em}
a{color:var(--accent-ink);text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--f-mono);font-size:.88em}
.muted{color:var(--muted)}
.small{font-size:13px}
.eyebrow{font:600 11px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1280px;margin:0 auto;width:100%;padding-inline:16px}
.logo{display:block;height:28px;width:auto}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){.logo-light-bg{display:none}.logo-dark{display:block}}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:18px;padding:10px 16px;max-width:1280px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.tag{font:600 13px var(--f-display);padding:2px 8px;border-radius:6px;background:var(--sunk);color:var(--muted)}
.topnav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.topnav a{padding:6px 10px;border-radius:6px;color:var(--fg);text-decoration:none;font-weight:500;font-size:14px}
.topnav a:hover{background:var(--sunk)}
.topnav a.on{color:var(--accent-ink)}
.who{font-size:13px;color:var(--muted);padding:0 6px}
.staffpill{display:inline-flex;font:600 12px var(--f-body);background:var(--fg);color:var(--bg);padding:3px 10px;border-radius:999px}
main{flex:1}
.foot{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot .in{display:flex;flex-wrap:wrap;gap:8px 24px;padding:18px 16px;max-width:1280px;margin:0 auto}
.foot .end{margin-left:auto}

/* buttons, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;border:1px solid transparent;font-weight:600;text-decoration:none;font-size:14px;background:none}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn.ghost:hover{background:var(--sunk)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.danger{color:var(--danger)}
.linkbtn{background:none;border:0;padding:6px 10px;font-size:14px;font-weight:500;color:var(--fg);border-radius:6px}
.linkbtn:hover{background:var(--sunk)}
form.stack{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-weight:500;font-size:13px}
.fld .miss{font:600 11px var(--f-body);color:var(--warn);background:var(--warn-soft);padding:1px 7px;border-radius:999px;margin-left:6px}
.fld .lock{font-size:11px;color:var(--muted);margin-left:6px;font-weight:400}
.input{width:100%;font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.input[readonly]{background:var(--sunk);color:var(--muted)}
.fld.missing .input{border-color:var(--warn)}
textarea.input{min-height:110px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.chk input{margin-top:3px;accent-color:var(--accent)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
legend{font:700 15px var(--f-display);padding:0;margin-bottom:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* messages */
.okmsg,.errmsg,.banner,.flash{padding:12px 14px;border-radius:var(--r);font-size:14px}
.okmsg,.flash{background:var(--ok-soft)}
.errmsg{background:var(--danger-soft)}
.banner{background:var(--warn-soft);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.off{background:var(--sunk);color:var(--muted)}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink)}
.tbd{font-family:var(--f-mono);font-size:.85em;color:var(--tbd);background:var(--tbd-soft);border-radius:4px;padding:0 4px}

/* landing / solo pages */
.landing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}
.brandside{position:relative;overflow:hidden;background:linear-gradient(180deg,#E98F44,#F4A259 55%,#F7B87A);color:#fff;padding:48px clamp(16px,5vw,64px);display:flex;flex-direction:column;gap:28px}
.brandside .sib{display:flex;align-items:center;gap:14px;position:relative}
.brandside .logo{height:40px}
.docs-tag{font:700 20px var(--f-display);color:#fff;padding:4px 12px;border:2px solid rgba(255,255,255,.7);border-radius:8px}
.brandside h1{font-size:clamp(30px,4vw,48px);font-weight:800;margin-top:auto;position:relative}
.brandside p{font-style:italic;color:#FFF4E6;max-width:42ch;margin:0;font-size:17px;position:relative}
.blob{position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;border-radius:48% 52% 60% 40%;background:rgba(255,255,255,.14)}
.blob.b2{left:140px;bottom:-240px;width:360px;height:360px;background:rgba(255,255,255,.09)}
.brandside .foot-note{position:relative;font-size:13px;color:#FFF4E6;margin-top:auto}
.signbox{align-self:center;justify-self:center;width:min(400px,100%);padding:40px 16px;display:flex;flex-direction:column;gap:16px}
.signbox h2{font-size:26px}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.staff-link{font-size:13px;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-decoration:none}
.staff-link:hover{color:var(--accent-ink)}
.solo{display:flex;justify-content:center;align-items:flex-start;padding:48px 16px;flex:1}
.card{width:min(560px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:28px clamp(18px,4vw,36px);display:flex;flex-direction:column;gap:16px}
.card.wide{width:min(760px,100%)}
.card h1{font-size:26px;font-weight:800}
.card .sub{margin:0;color:var(--muted)}

/* home */
.homehead{padding-block:40px 20px}
.homehead h1{font-size:clamp(28px,4vw,40px);font-weight:800;margin-top:8px}
.homehead p{color:var(--muted);max-width:60ch;font-size:17px}
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:20px 0 48px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.path h3{font-size:17px}
.path ul{list-style:none;margin:0;padding:0}
.path li a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--fg);font-size:14px}
.path li a:hover{color:var(--accent-ink)}
.kit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:16px}
.kit dl{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:14px}
.kit dt{color:var(--muted)} .kit dd{margin:0}

/* docs page */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;gap:40px;padding-block:28px 60px;align-items:start}
.sidenav{position:sticky;top:70px;font-size:14px}
.sidenav h4{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.sidenav ul{list-style:none;margin:0;padding:0 0 6px}
.sidenav a{display:block;padding:6px 10px;border-radius:6px;color:var(--fg);text-decoration:none}
.sidenav a:hover{background:var(--sunk)}
.sidenav a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
article.content{min-width:0;max-width:760px}
article h1{font-size:clamp(28px,3.4vw,38px);font-weight:800;margin:10px 0 12px}
article .intro{font-size:17px;color:var(--muted);margin:0 0 16px}
.applies{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;padding:10px 0;border-block:1px solid var(--line);margin-bottom:26px;color:var(--muted)}
article h2{font-size:23px;margin:34px 0 10px;scroll-margin-top:80px}
article h3{font-size:17px;margin:24px 0 8px}
article p,article li{max-width:66ch}
article table{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface);border:1px solid var(--line)}
article th,article td{text-align:left;padding:9px 14px;border-top:1px solid var(--line);vertical-align:top}
article thead th{border-top:0;font:600 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
article ol li{margin-bottom:8px}
.callout{display:grid;grid-template-columns:6px minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:var(--r);margin:18px 0;font-size:14px}
.callout p{margin:4px 0 0}
.callout b.t{font-family:var(--f-display);font-size:14px}
.callout .ci{border-radius:3px}
.callout.safety{background:var(--danger-soft)} .callout.safety .ci{background:var(--danger)}
.callout.note{background:var(--sunk)} .callout.note .ci{background:var(--muted)}
.callout.tip{background:var(--ok-soft)} .callout.tip .ci{background:var(--ok)}
.callout.studio{background:var(--accent-soft)} .callout.studio .ci{background:var(--accent)}
.toc{position:sticky;top:70px;font-size:13px}
.toc ul{list-style:none;padding:0;margin:8px 0 0;border-left:1px solid var(--line)}
.toc a{display:block;padding:4px 12px;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--accent-ink)}

/* account / admin */
.page{padding-block:28px 60px}
.page h1{font-size:clamp(26px,3vw,34px);font-weight:800}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.panels{display:flex;flex-direction:column;gap:18px;max-width:820px;margin-top:18px}
.panel h2{font-size:19px;margin-bottom:6px}
.adminhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:28px}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0;overflow-x:auto}
.subtabs a{padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.subtabs a.on{color:var(--fg);border-bottom-color:var(--accent)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.list{border-collapse:collapse;width:100%;font-size:14px}
table.list th,table.list td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
table.list thead th{border-top:0;font:600 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
table.list td .sub2{display:block;color:var(--muted);font-size:12px}
table.list a{color:var(--fg);font-weight:600;text-decoration:none}
table.list a:hover{color:var(--accent-ink)}
dl.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:6px 14px;margin:0;font-size:14px}
dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;overflow-wrap:anywhere}
.copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyrow code{user-select:all;background:var(--sunk);padding:6px 10px;border-radius:6px;font-family:var(--f-mono);font-size:13px;overflow-wrap:anywhere}
.results{border:1px solid var(--line);border-radius:8px;background:var(--surface);max-height:260px;overflow:auto}
.results button{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:8px 12px;font-size:14px}
.results button:first-child{border-top:0}
.results button:hover,.results button:focus{background:var(--accent-soft)}
.results .muted{padding:8px 12px;display:block}
.reqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.req{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.req.done{opacity:.6}
.req blockquote{margin:0;padding:6px 12px;border-left:2px solid var(--line);color:var(--muted);font-style:italic}
ul.log{list-style:none;margin:0;padding:0;font-size:14px}
ul.log li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
ul.log li:first-child{border-top:0}
ul.log time{color:var(--muted);font-variant-numeric:tabular-nums}

@media (max-width:1100px){.doc{grid-template-columns:220px minmax(0,1fr)}.toc{display:none}}
@media (max-width:860px){.landing{grid-template-columns:minmax(0,1fr)}.brandside h1{margin-top:0}
  .doc{grid-template-columns:minmax(0,1fr)}.sidenav{position:static}}
@media (max-width:600px){article table{display:block;overflow-x:auto}.grid2{grid-template-columns:minmax(0,1fr)}ul.log li,dl.kv{grid-template-columns:minmax(0,1fr)}.who{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.flashes{padding-top:16px;display:flex;flex-direction:column;gap:8px}

/* phone + field errors */
.phonerow{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px;text-overflow:ellipsis}
.fld.bad .input{border-color:var(--danger)}
.ferr{font-size:13px;color:var(--danger)}

/* blueprint */
.bp-head{padding:22px 0 8px}
.bp-head h1{font-size:clamp(24px,3vw,32px);margin:8px 0 6px}
.bp-head p{max-width:70ch}
.bp-head .eyebrow{color:var(--accent-ink)}
.bp-progress{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:14px}
svg.bar3{width:min(360px,100%);height:8px;border-radius:999px;background:var(--sunk);overflow:hidden}
svg.bar3 .ok{fill:var(--ok)} svg.bar3 .warn{fill:var(--warn)} svg.bar3 .tb{fill:var(--tbd)}
.pill.tb{background:var(--tbd-soft);color:var(--tbd)}
.section-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin:28px 0 12px}
.section-h h2{font-size:20px;margin:0}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.ideas ul,ul.plain{list-style:none;margin:0 0 12px;padding:0}
.ideas li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.ideas li:first-child{border-top:0}
.ideas li small{display:block;color:var(--muted);font-size:12px}
.ideaform{display:flex;gap:8px}
ul.plain li{padding:6px 0;font-size:14px}
.tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tree .col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;scroll-margin-top:80px}
.tree h3{font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0}
.tree .url{font:12px var(--f-mono);color:var(--muted);margin:4px 0 10px}
.tree ul{list-style:none;margin:0;padding:0}
.tree li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.tree li .pt{min-width:0}
.tree li .pt>a{color:var(--fg);text-decoration:none;font-weight:500}
.tree li .pt>a:hover{color:var(--accent-ink);text-decoration:underline}
.tree li small{display:block;color:var(--muted);font-size:12px}
.tree li small a{color:var(--accent-ink)}
.tree .warnt{color:var(--warn)}
.tree .note{font-style:italic}
.tree .pa{display:flex;align-items:center;gap:4px;flex:none}
.tree .pa .pill{cursor:pointer;border:0;font-family:inherit}
.iconbtn{background:none;border:0;color:var(--muted);font-size:13px;padding:2px 4px;border-radius:4px;cursor:pointer}
.iconbtn:hover:not(:disabled){background:var(--sunk);color:var(--fg)}
.iconbtn:disabled{opacity:.25;cursor:default}
.addlink{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.addsec{border-style:dashed!important;gap:8px!important}
.addsec .input{padding:7px 10px;font-size:13px}
.narrow{max-width:640px}
.delrow{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
@media (max-width:1000px){.tree{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tree{grid-template-columns:minmax(0,1fr)}.ideas li{flex-direction:column;align-items:flex-start}.phonerow{grid-template-columns:minmax(0,120px) minmax(0,1fr)}}

/* product switcher, firmware picker, firmware blocks */
.pnav{display:flex;flex-direction:column;gap:10px;padding:0 0 12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pswitch{border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.pswitch summary,.pswitch.single{display:flex;flex-direction:column;gap:1px;padding:8px 12px;cursor:pointer;list-style:none;position:relative}
.pswitch.single{cursor:default}
.pswitch summary::-webkit-details-marker{display:none}
.pswitch summary::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
.pswitch[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pswitch b{font:700 15px var(--f-display)}
.pswitch ul{list-style:none;margin:0;padding:4px;border-top:1px solid var(--line)}
.pswitch a{display:block;padding:6px 10px;border-radius:6px;color:var(--fg);text-decoration:none}
.pswitch a:hover{background:var(--sunk)}
.pswitch a.on{color:var(--accent-ink);font-weight:600}
.fwpick{display:flex;flex-direction:column;gap:4px}
.fwpick .row{flex-wrap:nowrap}
.fwpick select{padding:6px 28px 6px 10px;font-size:14px}
.sidenav .pindex{font-weight:600;margin-top:4px}
.fwblock{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 18px}
.fwblock .fwtag{display:inline-block;font:600 12px var(--f-body);color:var(--accent-ink);background:var(--accent-soft);padding:1px 8px;border-radius:999px;margin-bottom:4px}
details.fwblock.other{border-left-color:var(--line);color:var(--muted)}
details.fwblock.other summary{cursor:pointer;font-size:13px;font-weight:600}
.ptabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ptabs a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600;font-size:14px;background:var(--surface)}
.ptabs a.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
a.plink{text-decoration:none;color:var(--fg)}
a.plink:hover h3{color:var(--accent-ink)}
.ptabs{margin:14px 0}
.content .paths{margin-top:24px}
.content .path h3{margin:0}

/* downloads, support */
.dlgroup{margin-top:26px}
.dlgroup h2{font-size:18px;margin:0 0 10px}
.dllist{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.dllist li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--line)}
.dllist li:first-child{border-top:0}
.dlinfo{min-width:0}
.dlinfo small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.dlinfo .note{font-style:italic}
.panel.empty{margin-top:24px}
.panel.empty p{margin:6px 0 0}
.support{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.support aside{margin-top:62px}
.tickets li{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:8px 0}
.tickets li:first-child{border-top:0}
.tickets small{display:block;color:var(--muted);font-size:12px}
.row.between{justify-content:space-between;align-items:flex-start;flex-wrap:nowrap}
.row.nowrap{flex-wrap:nowrap;gap:2px}
.ticket h2{font-size:17px;margin:2px 0 0}
.ticket .msg{white-space:pre-wrap;background:var(--sunk);border-radius:8px;padding:12px 14px;font-size:14px;margin:10px 0}
.ticket.done{opacity:.75}
.ticket p{margin:6px 0}
.warnt{color:var(--warn)}
.linkbtn.danger{color:var(--danger)}
.dladmin{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}
tr.dim td{opacity:.6}
@media (max-width:900px){.support,.dladmin{grid-template-columns:minmax(0,1fr)}.support aside{margin-top:0}}
@media (max-width:600px){.dllist li{flex-direction:column;align-items:flex-start}}
.support h1{margin-bottom:14px}
aside.stack{display:flex;flex-direction:column;gap:14px}