:root{--bg:#0b0b12;--card:#13131f;--card2:#1b1b2b;--text:#eceaff;--muted:#8a88a8;--accent:#8b7bff;--border:#26263a;--bad:#f87171;--ok:#4ade80;--warn:#fbbf24}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,sans-serif}
h1,h2,b,button,label,.chip,.brand,small{font-family:ui-monospace,Menlo,Consolas,monospace}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.brand{color:var(--accent);font-weight:700;font-size:20px;text-decoration:none;letter-spacing:.04em}
#menu{width:44px;background:var(--card2);color:var(--text);border:1px solid var(--border)}
#drawer{position:fixed;top:56px;left:0;bottom:0;width:260px;background:var(--card);border-right:1px solid var(--border);padding:12px;z-index:4;overflow:auto}
#drawer a,#drawer .sec{display:block;padding:10px;border-radius:8px;color:var(--text);text-decoration:none}
#drawer .sec{color:var(--muted);font-size:11px;letter-spacing:.1em;padding-bottom:2px;margin-top:10px}
#drawer a:hover{background:var(--card2)}
.hidden{display:none!important}
main{max-width:640px;margin:0 auto;padding:20px 16px 80px}
.card,.bot{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
input,select{width:100%;padding:12px;margin:6px 0 12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;font:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
button{padding:11px 14px;border:0;border-radius:10px;background:var(--accent);color:#0b0b12;font-weight:700;cursor:pointer}
button.ghost{background:var(--card2);color:var(--text);border:1px solid var(--border)}button.ghost.on{border-color:var(--accent)}
button.bad{background:transparent;color:var(--bad);border:1px solid var(--bad)}
button:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.row>*{flex:1}
.muted{color:var(--muted)}.err{color:var(--bad);min-height:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bot{position:relative;display:flex;flex-direction:column;gap:6px;margin:0}.bot img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--card2)}
.bot p{margin:0;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{position:absolute;top:10px;left:10px;background:var(--warn);color:#201800;font:700 11px ui-monospace,monospace;padding:3px 8px;border-radius:6px;z-index:1}
.chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px}.chip{background:var(--card2);color:var(--muted);border:1px solid var(--border);border-radius:999px;white-space:nowrap}.chip.on{background:var(--accent);color:#0b0b12}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.stats div{background:var(--card2);border-radius:10px;padding:12px;text-align:center}.stats b{display:block;font-size:22px}
.st{display:inline-block;padding:2px 10px;border-radius:999px;font:700 12px ui-monospace,monospace;background:var(--card2)}
.st.running{color:var(--ok)}.st.deploying,.st.connecting,.st.restarting{color:var(--warn)}.st.offline,.st.expired,.st.failed,.st.needs_repair{color:var(--bad)}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--card2);border:1px solid var(--accent);padding:12px 16px;border-radius:10px;z-index:9;max-width:90%}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted)}.chk input{width:auto;margin:3px 0 0}
a{color:var(--accent)}
.st.deploying,.st.connecting,.st.restarting{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.st{animation:none!important}}

.st.awaiting_payment{color:var(--warn)}

/* ===== colour system ===== */
:root,html[data-skin="aurora"]{--bg:#0a0a14;--card:#13131f;--card2:#1b1b2e;--text:#eeecff;--muted:#9a98bb;--border:#2a2a44;--accent:#a99bff;--g1:#6d5bff;--g2:#c026d3;--glow1:rgba(109,91,255,.22);--glow2:rgba(192,38,211,.16);--c1:#22d3ee;--c2:#4ade80;--c3:#fbbf24;--c4:#f472b6}
html[data-skin="ocean"]{--bg:#06131c;--card:#0c1f2c;--card2:#12303f;--text:#e6f8ff;--muted:#86b4c6;--border:#1b3b4d;--accent:#38bdf8;--g1:#0369a1;--g2:#0f766e;--glow1:rgba(14,165,233,.2);--glow2:rgba(20,184,166,.14)}
html[data-skin="sunset"]{--bg:#140a0a;--card:#211010;--card2:#2e1717;--text:#fff1ea;--muted:#c9a39a;--border:#43211f;--accent:#fb923c;--g1:#c2410c;--g2:#be185d;--glow1:rgba(249,115,22,.2);--glow2:rgba(236,72,153,.14)}
html[data-skin="light"]{--bg:#f5f6fb;--card:#fff;--card2:#eceef7;--text:#14162b;--muted:#5d6382;--border:#dcdff0;--accent:#5b3df5;--g1:#5b3df5;--g2:#a21caf;--glow1:rgba(91,61,245,.12);--glow2:rgba(162,28,175,.08);--c1:#0e7490;--c2:#15803d;--c3:#b45309;--c4:#be185d;--ok:#15803d;--warn:#b45309;--bad:#dc2626;color-scheme:light}
body{background:radial-gradient(900px 500px at 8% -10%,var(--glow1),transparent 60%),radial-gradient(800px 480px at 100% 0%,var(--glow2),transparent 55%),var(--bg);background-attachment:fixed}
.top{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px)}
.brand,main h1{background:var(--grad,linear-gradient(135deg,var(--g1),var(--g2)));-webkit-background-clip:text;background-clip:text;color:transparent}
main h1{background:linear-gradient(90deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text}
button:not(.ghost):not(.bad):not(.chip):not(#menu){background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;box-shadow:0 6px 18px -8px var(--glow1)}
.chip.on{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border-color:transparent}
.badge{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff}
.bot{transition:transform .15s,border-color .15s}.bot:hover{border-color:var(--accent);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.bot:hover{transform:none}}
.stats div{border:1px solid var(--border);border-top:3px solid var(--c1)}.stats div b{color:var(--c1)}
.stats div:nth-child(2){border-top-color:var(--c2)}.stats div:nth-child(2) b{color:var(--c2)}
.stats div:nth-child(3){border-top-color:var(--c3)}.stats div:nth-child(3) b{color:var(--c3)}
.stats div:nth-child(4){border-top-color:var(--c4)}.stats div:nth-child(4) b{color:var(--c4)}
.card[class*="bs-"]{border-left:4px solid var(--muted)}
.card.bs-running{border-left-color:var(--ok)}
.card.bs-deploying,.card.bs-connecting,.card.bs-restarting,.card.bs-awaiting_payment{border-left-color:var(--warn)}
.card.bs-offline,.card.bs-expired,.card.bs-failed,.card.bs-needs_repair{border-left-color:var(--bad)}
#drawer a{display:flex;align-items:center;gap:10px}.ic{width:24px;text-align:center}
.iconbtn{width:42px;height:38px;padding:0;position:relative;margin-left:auto}
.nbadge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px ui-monospace,monospace;display:flex;align-items:center;justify-content:center;padding:0 4px}
.inbox{position:fixed;top:62px;right:10px;width:min(92vw,380px);max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;z-index:8;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.ihead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ihead button{padding:6px 10px;font-size:12px}
.nitem{padding:10px;border-radius:8px;border-bottom:1px solid var(--border)}.nitem p{margin:2px 0}.nitem.unread{background:var(--card2);border-left:3px solid var(--accent)}
.afab{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;font-size:24px;padding:0;z-index:7}
.apanel{position:fixed;right:16px;bottom:84px;width:min(92vw,360px);height:min(70vh,520px);background:var(--card);border:1px solid var(--border);border-radius:14px;z-index:8;display:flex;flex-direction:column;overflow:hidden}
.ahead{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
.amsgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.amsg{padding:8px 12px;border-radius:12px;max-width:85%;font-size:14px;white-space:pre-wrap}
.amsg.bot{background:var(--card2);align-self:flex-start}.amsg.user{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;align-self:flex-end}
.ainput{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}.ainput input{margin:0}
.alink{display:block;text-align:center;padding:8px;font-size:13px;border-top:1px solid var(--border)}
.avatar{flex:none!important;width:72px;height:72px;border-radius:50%;background:var(--card2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid var(--border)}
pre.logs{background:#05050a;color:#cbd5e1;border:1px solid var(--border);border-radius:12px;padding:12px;height:60vh;overflow:auto;font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap;word-break:break-all}
.warnbox{border-color:var(--warn)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sw{height:56px;padding:0;border-radius:10px;border:2px solid var(--border);color:#fff;font-size:12px}.sw.on{border-color:var(--text)}
.banned{position:fixed;inset:0;background:var(--bg);z-index:20;display:flex;align-items:center;justify-content:center;padding:24px}
details.faq{border-bottom:1px solid var(--border);padding:12px 0}details.faq summary{cursor:pointer;font-weight:700}details.faq p{color:var(--muted);margin:8px 0 0}
.friend{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}.ok{color:var(--ok)}
.perks li{margin:6px 0}
textarea{width:100%;padding:12px;margin:6px 0 12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;font:inherit;min-height:110px}
.tag{display:inline-block;font:700 11px ui-monospace,monospace;padding:2px 8px;border-radius:999px;background:var(--g1);color:#fff;margin-left:6px;vertical-align:middle}
.actline{padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;word-break:break-word}.act{margin-top:12px}
.note{background:var(--card2);border-left:3px solid var(--warn);padding:10px 12px;border-radius:8px;font-size:13px;margin:10px 0}