/* ===== FluffieProto Control Panel: application theme ===== */
:root{
--bg:#1b1d21;--panel:#23262b;--panel2:#2a2d33;--panel3:#32363d;--sunk:#17191c;
--line:#34383f;--line2:#40454e;
--ink:#dfe1e5;--ink2:#b4b8c0;--muted:#8b909a;
--mint:#3d7eff;--mint2:#5a92ff;--mint-ink:#ffffff;--mint-dim:rgba(61,126,255,.13);--mint-line:#2c4a80;
--ok:#3fb27f;--ok-dim:rgba(63,178,127,.12);--ok-line:#285c45;
--amber:#e0a33e;--amber-dim:rgba(224,163,62,.10);--amber-line:#5c4521;
--rose:#e5534b;--rose2:#f0706a;--rose-ink:#ffffff;--rose-dim:rgba(229,83,75,.11);--rose-line:#62302d;
--sp1:4px;--sp2:6px;--sp3:8px;--sp4:12px;--sp5:14px;--sp6:18px;--sp7:24px;
--r-xs:2px;--r-sm:3px;--r-md:3px;--r-lg:4px;
--fs-eyebrow:11px;--fs-micro:11.5px;--fs-small:12px;--fs-body:13px;--fs-base:13px;--fs-h3:12.5px;--fs-h2:15px;--fs-h1:16px;
--tr-eyebrow:.04em;
--ctl-h:28px;--ctl-bd:#454a53;--ctl-bg:#1c1e22;
--shadow:none;
--ring:0 0 0 1px var(--mint),0 0 0 3px rgba(61,126,255,.35);
--grad-bar:linear-gradient(180deg,#2e3137,#282b30);
--grad-btn:linear-gradient(180deg,#3a3e45,#31353b);
--grad-btn-hover:linear-gradient(180deg,#42464e,#383c43);
--grad-primary:linear-gradient(180deg,#4a88ff,#3571ea);
--sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',sans-serif;
--mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
}
html{scroll-behavior:auto}
body{font-size:13px;line-height:1.45;letter-spacing:0;font-feature-settings:'cv11'}
a{color:#7fa8ff}
:focus-visible{border-radius:var(--r-sm)}
code{background:var(--sunk);border-color:var(--line);border-radius:2px;font-size:.9em}

/* controls */
label{font-weight:500;color:var(--ink2);font-size:12px;margin-top:10px}
input,select,textarea{height:var(--ctl-h);margin-top:4px;padding:0 8px;border-radius:var(--r-sm);font-weight:400;font-size:13px;line-height:calc(var(--ctl-h) - 2px);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
textarea{padding:6px 8px;min-height:72px;line-height:1.5}
input::placeholder,textarea::placeholder{color:#6b707a}
input:focus,select:focus,textarea:focus{border-color:var(--mint);box-shadow:0 0 0 2px rgba(61,126,255,.25)}
select{padding-right:26px;background-position:right 8px center;background-color:var(--ctl-bg)}
input[type=checkbox]{accent-color:var(--mint);box-shadow:none}
label.inline{font-weight:400;color:var(--ink);margin-top:10px}
.fh{font-weight:400;color:var(--muted);font-size:11.5px;margin-top:4px}

button{min-height:28px;margin-top:10px;padding:0 12px;border-radius:var(--r-sm);font-weight:500;font-size:12.5px;background:var(--grad-primary);color:#fff;border:1px solid #2a5fcc;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
button:hover:not(:disabled){background:linear-gradient(180deg,#5a94ff,#407cf0)}
button:active:not(:disabled){transform:none;background:#3066d6;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
button.ghost{background:var(--grad-btn);color:var(--ink);border-color:#4a4f58;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
button.ghost:hover:not(:disabled){background:var(--grad-btn-hover);border-color:#565c66}
button.danger{background:linear-gradient(180deg,#ec625a,#d4453d);border-color:#a93530;color:#fff}
button.danger:hover:not(:disabled){background:linear-gradient(180deg,#f2736b,#dc4f47)}
button.sm{min-height:22px;padding:0 8px;font-size:11.5px}
.btn-row{gap:6px}

/* panels (cards) with a title strip */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 12px 12px;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.card>h3:first-child,.card>.section-title:first-child{margin:0 -12px 10px;padding:0 12px;min-height:30px;display:flex;align-items:center;gap:8px;background:var(--grad-bar);border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.card>.section-title:first-child h3{font-size:12.5px;font-weight:600}
.card>.section-title:first-child .chip{margin-left:auto}
.card>:first-child:not(h3):not(.section-title){margin-top:12px}
.card>h3:first-child+.hint,.card>.section-title:first-child+.hint{margin-top:0}
.card>form,.card>.btn-row,.card>.table-wrap,.card>table,.card>.status-grid,.card>.status,.card>.modgrid,.card>.livegrid,.card>.toolbar,.card>.empty-state,.card>.grid2,.card>.row{margin-top:10px}
.card>form>button,.card>form>.btn-row{margin-top:12px}
.card>form+form{margin-top:12px;padding-top:12px}
.card.is-alert{border-color:var(--rose-line)}
.card.is-alert>h3:first-child,.card.is-alert>.section-title:first-child{background:linear-gradient(180deg,#3a2426,#321f21);border-bottom-color:var(--rose-line)}
.card.is-warn{border-color:var(--amber-line)}
.card.is-warn>h3:first-child,.card.is-warn>.section-title:first-child{background:linear-gradient(180deg,#39301f,#31291b);border-bottom-color:var(--amber-line)}
h3{font-size:12.5px;font-weight:600;letter-spacing:.01em}
.hint{color:var(--ink2);font-size:12px}
.section-title{gap:8px}
.chip{border-radius:var(--r-sm);padding:1px 7px;font-size:11px;font-weight:500;background:var(--panel3);border-color:var(--line2);color:var(--ink2)}
.chip.alert{background:var(--rose-dim);border-color:var(--rose-line);color:var(--rose2)}

label>input,label>select,label>textarea{display:block}
label.inline>input{display:inline-block}
td.mono,td.t-time{white-space:nowrap}

/* tables: data grid */
table{border-collapse:separate;border-spacing:0}
th,td{padding:5px 9px;font-size:12.5px;border-bottom:1px solid var(--line)}
th{background:var(--grad-bar);color:var(--ink2);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--line2);border-right:1px solid var(--line)}
th:last-child{border-right:0}
td{border-right:1px solid rgba(255,255,255,.035)}
td:last-child{border-right:0}
tr:nth-child(even) td{background:rgba(255,255,255,.018)}
table tr:hover td{background:rgba(61,126,255,.07)}
.table-wrap{background:var(--sunk);border-color:var(--line2);border-radius:var(--r-sm)}
td.t-num,th.t-num,td.t-time{font-size:12px}

/* misc surfaces */
.toast{border-radius:var(--r-sm);font-weight:500;padding:8px 12px;font-size:12.5px;border-color:var(--ok-line);background:var(--ok-dim);color:#7fd8ad}
.toast.bad{border-color:var(--rose-line);background:var(--rose-dim);color:var(--rose2)}
.empty-state{border-radius:var(--r-sm);padding:18px 12px;background:var(--sunk)}
.empty-state b{font-weight:600}
.toggle{border-radius:var(--r-sm);padding:7px 10px;margin-top:6px;background:var(--panel2)}
.toggle .name{font-weight:500;font-size:12.5px}
.toggle .desc{font-weight:400;color:var(--muted);font-size:11.5px}
.toggle select{min-width:80px}
.toggle.lead{background:var(--panel2);border-color:var(--mint-line)}
.status{border-radius:var(--r-sm);padding:8px 10px;background:var(--panel2)}
.status strong{font-weight:600;letter-spacing:.04em;font-size:10.5px}
.status>div{font-weight:500;font-size:12.5px}
.k{border-radius:var(--r-lg);padding:10px 12px;box-shadow:none}
.kv{font-size:20px;font-weight:600;letter-spacing:-.01em}
.kv.sm{font-size:12.5px;font-weight:500}
.kl{font-weight:600;letter-spacing:.04em;font-size:10.5px}
.count-hero{background:var(--panel);border-color:var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:none}
.count-hero .lbl{color:var(--ink2);font-weight:600;letter-spacing:.05em}
.count-hero .num{font-size:52px;font-weight:600;letter-spacing:-.02em}
.live{border-radius:var(--r-sm);padding:7px 10px;border-color:var(--mint-line);background:var(--mint-dim)}
.live .w{font-weight:600;color:#8fb3ff}
.mod{border-radius:var(--r-sm);padding:6px 9px;font-weight:500;font-size:12px}
.mod .led{width:7px;height:7px;background:#50555e}
.mod.on .led{background:var(--ok);box-shadow:none}
.mod.on .st{color:var(--ok)}
.dot{background:var(--ok);box-shadow:none}
.dot.off{background:var(--rose);box-shadow:none}
details.adv{border-radius:var(--r-sm);background:var(--sunk)}
details.adv>summary{padding:6px 10px;font-weight:600;font-size:11px;letter-spacing:.04em}
.advbody{padding:2px 12px 12px}
.dirty-flag{font-weight:600}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 6px;border-radius:var(--r-xs);font-size:11px;font-weight:600;border:1px solid var(--line2);color:var(--ink2);background:var(--panel3);white-space:nowrap}
.badge.owner{color:#8fb3ff;border-color:var(--mint-line);background:var(--mint-dim)}
.badge.viewer{color:var(--amber);border-color:var(--amber-line);background:var(--amber-dim)}
.badge.remote{color:#c9a2ff;border-color:#4b3670;background:rgba(160,110,255,.10)}
.badge.bad{color:var(--rose2);border-color:var(--rose-line);background:var(--rose-dim)}
.badge.ok{color:#6fd3a3;border-color:var(--ok-line);background:var(--ok-dim)}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:#4a4f58 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#434850;border:2px solid transparent;background-clip:padding-box;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#565c66;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}