/* PodlipnikDesk website + web admin. One stylesheet, no external fonts or CDNs (the server stays private). */
:root {
  --bg: #f5f7fb; --bg2: #edf1f8; --card: rgba(255, 255, 255, .88); --card-solid: #fff; --line: rgba(30, 42, 70, .10); --line2: rgba(30, 42, 70, .18);
  --text: #172033; --muted: #59657d; --faint: #7b879c;
  --accent: #5b66d6; --accent2: #347fd8; --sky: #168fb2; --ok: #219a66; --warn: #c47f19; --bad: #d94f68;
  --grad: linear-gradient(115deg, #5c68d8 0%, #5578d7 45%, #2b9fc7 100%);
  --radius: 22px; --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 30px 80px -30px rgba(45, 65, 110, .18), 0 2px 6px rgba(20, 30, 55, .10);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }



/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 600; text-decoration: none; background: var(--grad); color: #fff; box-shadow: 0 14px 34px -14px #5b5cff; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px #5b5cff; }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { filter: grayscale(.6) brightness(.8); cursor: default; transform: none; }
.btn.lg { padding: 18px 30px; font-size: 17px; border-radius: 16px; }
.btn.ghost { background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); box-shadow: none; }
.btn.ghost:hover { background: rgba(255, 255, 255, .09); }
.btn.sm { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn.ok { background: linear-gradient(115deg, #22c983, #19a8a0); box-shadow: 0 10px 26px -12px #22c983; }
.btn.bad { background: rgba(255, 93, 115, .12); color: #ffb3bf; border: 1px solid rgba(255, 93, 115, .35); box-shadow: none; }
.btn svg { width: 20px; height: 20px; flex: none; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 14px; }
.pill b { background: var(--grad); color: #fff; font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(47, 217, 138, .6); animation: ping 2s infinite; display: inline-block; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(47, 217, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 217, 138, 0); } }
h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -.035em; margin: 22px auto 20px; max-width: 900px; font-weight: 800; }
.meta { margin-top: 16px; color: var(--faint); font-size: 14px; min-height: 22px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- sections ---------- */
h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.025em; line-height: 1.1; margin: 10px 0 14px; }
.sub { color: var(--muted); max-width: 620px; font-size: 18px; }
.center { text-align: center; } .center .sub { margin: 0 auto; }
.ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(123, 108, 255, .14); border: 1px solid rgba(123, 108, 255, .3); }
.ico svg { width: 24px; height: 24px; stroke: #b9b0ff; }

/* scroll reveal */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }

/* ================= web admin ================= */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(420px, 100%); border-radius: 26px; border: 1px solid var(--line2); background: var(--card); backdrop-filter: blur(20px); padding: 40px 32px; box-shadow: var(--shadow); animation: pop .7s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.auth-card .brand { justify-content: center; margin-bottom: 26px; }
.auth-card h1 { font-size: 28px; margin: 0 0 6px; text-align: center; letter-spacing: -.02em; }
.auth-card .sub { text-align: center; font-size: 15px; margin: 0 auto 26px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 14px; color: var(--muted); font-weight: 500; }
.input { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(5, 7, 22, .55); outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(123, 108, 255, .2); }
.auth-card .btn { width: 100%; margin-top: 8px; }
.err { color: #ffb3bf; background: rgba(255, 93, 115, .1); border: 1px solid rgba(255, 93, 115, .3); padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.hidden { display: none !important; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.rail { border-right: 1px solid var(--line); background: rgba(7, 9, 26, .6); backdrop-filter: blur(18px); padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.rail .brand { padding: 0 8px 22px; }
.rail button.nav-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-weight: 500; transition: background .2s, color .2s; }
.rail button.nav-i svg { width: 20px; height: 20px; }
.rail button.nav-i:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.rail button.nav-i.on { background: rgba(123, 108, 255, .18); color: #fff; }
.rail .badge { margin-left: auto; background: var(--warn); color: #221400; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.rail .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); }
.av2 { width: 36px; height: 36px; border-radius: 11px; background: var(--grad); display: grid; place-items: center; font-weight: 700; flex: none; }
.me .who { min-width: 0; flex: 1; } .me .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me .who span { color: var(--faint); font-size: 12px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line2); background: transparent; cursor: pointer; color: var(--muted); }
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.icon-btn svg { width: 18px; height: 18px; }
.content { padding: 32px clamp(16px, 3vw, 40px) 60px; min-width: 0; }
.page { animation: rise .45s var(--ease) both; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.head h1 { font-size: 32px; margin: 0; text-align: left; letter-spacing: -.02em; }
.head p { margin: 4px 0 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat { border-radius: 18px; border: 1px solid var(--line); background: var(--card); padding: 20px; }
.stat span { color: var(--muted); font-size: 14px; }
.stat b { display: block; font-size: 34px; letter-spacing: -.02em; margin-top: 4px; }
.stat.ok b { color: var(--ok); } .stat.warn b { color: var(--warn); }
.panel { border-radius: 20px; border: 1px solid var(--line); background: var(--card); overflow: hidden; margin-bottom: 22px; }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-h h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.panel-h .input { max-width: 280px; margin-left: auto; padding: 9px 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
th { color: var(--faint); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
.st { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.st i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.st.on i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.st.busy i { background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.st.wait i { background: var(--warn); }
.muted { color: var(--muted); } .faint { color: var(--faint); font-size: 13px; }
.pending { display: grid; gap: 14px; padding: 18px 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pcard { border-radius: 16px; border: 1px solid rgba(255, 179, 71, .35); background: rgba(255, 179, 71, .06); padding: 18px; display: grid; gap: 6px; animation: rise .5s var(--ease) both; }
.pcard b { font-size: 17px; }
.pcard .acts { display: flex; gap: 10px; margin-top: 10px; }
.empty { padding: 34px 20px; text-align: center; color: var(--faint); }
.grid2 { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.dlcard { padding: 26px; display: grid; gap: 10px; align-content: start; }
.dlcard h3 { margin: 0; font-size: 20px; }
.dlcard .btn { justify-self: start; margin-top: 8px; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 20px; }
.form-row .field { margin: 0; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; padding: 14px 18px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--line2); box-shadow: var(--shadow); animation: pop .4s var(--ease) both; max-width: 380px; }
.toast.bad { border-color: rgba(255, 93, 115, .5); }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.menu-btn { display: none; }

@media (max-width: 900px) {
  .dl, .grid2 { grid-template-columns: 1fr; }
  .screen { grid-template-columns: 1fr; } .side { display: none; } .main { grid-template-columns: repeat(2, 1fr); }
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; z-index: 40; width: 260px; transform: translateX(-100%); transition: transform .35s var(--ease); }
  .rail.open { transform: none; }
  .menu-btn { display: grid; margin-bottom: 18px; }
  .hide-sm { display: none; }
  th, td { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

section.block { scroll-margin-top: 72px; }

.me .who { cursor: pointer; }
.ok-msg { color: #b6f5d6; background: rgba(47, 217, 138, .1); border: 1px solid rgba(47, 217, 138, .3); padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.check { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); margin:4px 0 12px; cursor:pointer; user-select:none; }
.check input { appearance:none; width:19px; height:19px; margin:0; border-radius:6px; border:1px solid var(--line2); background:rgba(5,7,22,.7); display:grid; place-items:center; transition:.18s ease; }
.check input::after { content:"✓"; font-size:13px; font-weight:800; color:white; transform:scale(0); transition:transform .16s ease; }
.check input:checked { background:var(--grad); border-color:transparent; box-shadow:0 0 0 4px rgba(123,108,255,.12); }
.check input:checked::after { transform:scale(1); }
.check input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 14px; margin-bottom:10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); color:var(--muted); cursor:pointer; user-select:none; }
.switch { position:relative; width:46px; height:26px; flex:none; }
.switch input { opacity:0; width:0; height:0; position:absolute; }
.switch i { position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid var(--line2); transition:.18s ease; }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); transition:.18s ease; }
.switch input:checked + i { background:var(--grad); border-color:transparent; }
.switch input:checked + i::after { transform:translateX(20px); }
.switch input:focus-visible + i { box-shadow:0 0 0 3px rgba(123,108,255,.22); }
.settings-grid { display:grid; gap:16px; }
.setting-card .panel-h { align-items:flex-start; }
.setting-card .panel-h > div { min-width:240px; flex:1; }
.settings-fields { padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.settings-fields .field { margin-bottom:15px; }
.settings-advanced { margin-top:4px; }
.remember-rd { padding-top:4px; }
@media (max-width:900px){ .settings-fields{grid-template-columns:1fr;} }
.linkish { display: block; margin: 12px auto 0; background: none; border: 0; color: #b9b0ff; cursor: pointer; font-size: 14px; }
.linkish:hover { color: #fff; text-decoration: underline; }
.code-input { font-size: 26px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.keybox { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: .12em; padding: 12px 14px; border-radius: 12px; background: rgba(5, 7, 22, .55); border: 1px dashed var(--line2); word-break: break-all; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; font-family: ui-monospace, Consolas, monospace; }

textarea.input { resize: vertical; min-height: 110px; font: inherit; }
.sub-block { border-top: 1px solid var(--line); }
.pad { padding: 0 20px; }

tr.clickable { cursor: pointer; }
.dv-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding: 20px; }
.dv-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-content: start; }
.dv-info div { display: grid; gap: 2px; } .dv-info b { font-weight: 600; font-size: 15px; word-break: break-word; }
.dv-actions { display: grid; gap: 10px; align-content: start; }
.dv-actions .field { margin: 6px 0 0; }
.connect-box { display: grid; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(5, 7, 22, .45); }
.connect-box div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
#dv .panel-h .st { margin-left: 4px; } #dv .panel-h .icon-btn { margin-left: auto; }
@media (max-width: 900px) { .dv-grid { grid-template-columns: 1fr; } }

.qr { display: block; background: #fff; padding: 10px; border-radius: 14px; margin: 8px 0 12px; image-rendering: pixelated; }

/* passkey list */
ul.plain { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
ul.plain li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }


.join-card { max-width: 420px; margin: 16px; padding: 22px; border-radius: 16px; background: #14173a; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.join-card p { margin: 10px 0 16px; line-height: 1.5; }
.join-btns { display: flex; gap: 10px; }


/* ================= ADMIN UI — MODERN REFRESH ================= */

#v-login{--admin-bg:#080b17;background:radial-gradient(900px 520px at 50% 0%,rgba(91,124,255,.17),transparent 62%),radial-gradient(700px 420px at 15% 85%,rgba(47,198,255,.08),transparent 65%),#080b17}
#v-login::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(160,170,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(160,170,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,#000 0,transparent 78%)}
#v-login .auth-card{position:relative;width:min(440px,100%);padding:34px;border-radius:28px;border:1px solid rgba(180,190,255,.14);background:linear-gradient(180deg,rgba(20,25,53,.92),rgba(11,15,34,.96));box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 0 1px rgba(123,108,255,.03),inset 0 1px 0 rgba(255,255,255,.035)}
#v-login .auth-card::before{content:"";position:absolute;width:180px;height:180px;right:-72px;top:-86px;border-radius:50%;background:rgba(91,124,255,.14);filter:blur(40px);pointer-events:none}
#v-login .auth-card .brand{position:relative;width:fit-content;justify-content:flex-start;margin:0 auto 34px 0;font-size:19px}
#v-login .auth-card .brand::after,#v-app .rail .brand::after{content:"ADMIN";margin-left:auto;padding:4px 8px;border:1px solid rgba(123,108,255,.24);border-radius:999px;color:#9ba3c7;background:rgba(123,108,255,.07);font-size:9px;font-weight:800;letter-spacing:.12em}
#v-login .auth-card h1{text-align:left;font-size:31px;line-height:1.1;margin-bottom:8px}
#v-login .auth-card .sub{text-align:left;margin:0 0 26px;color:#8e96b8}
#v-login .auth-card .field{margin-bottom:18px}
#v-login .auth-card .field label{color:#aeb5d1;font-size:13px;font-weight:650}
#v-login .auth-card .input{min-height:50px;border-radius:14px;border-color:rgba(180,190,255,.13);background:rgba(4,7,18,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
#v-login .auth-card .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring),0 10px 30px rgba(26,41,100,.16)}
#v-login .auth-card .btn.lg{min-height:50px;border-radius:14px;margin-top:10px}
#v-login .auth-card .linkish{color:#99a7da}
#v-login .auth-card .linkish:hover{color:#dce2ff}
#v-login .auth-card .faint{color:var(--faint)}

#v-app{--admin-panel:rgba(16,21,45,.78);--admin-border:rgba(172,183,255,.105);--admin-border-strong:rgba(172,183,255,.17);background:radial-gradient(1000px 600px at 78% -10%,rgba(91,124,255,.10),transparent 62%),#090c18}
#v-app .rail{width:274px;padding:18px 13px 14px;background:linear-gradient(180deg,rgba(10,14,30,.94),rgba(8,11,24,.9));border-right:1px solid var(--admin-border);box-shadow:18px 0 55px rgba(0,0,0,.16)}
#v-app .rail .brand{min-height:54px;padding:0 10px 18px;margin-bottom:4px;border-bottom:1px solid rgba(172,183,255,.07);font-size:18px}
#v-app .rail .brand::after{font-size:9px}
#v-app .rail button.nav-i{position:relative;min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:13px;color:#7f88aa;font-size:14px;font-weight:600}
#v-app .rail button.nav-i svg{width:19px;height:19px;opacity:.88}
#v-app .rail button.nav-i:hover{background:rgba(255,255,255,.035);border-color:rgba(172,183,255,.055);color:#c9d0e8}
#v-app .rail button.nav-i.on{color:#eef2ff;background:linear-gradient(135deg,rgba(91,124,255,.19),rgba(123,108,255,.09));border-color:rgba(118,137,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 24px rgba(48,65,150,.09)}
#v-app .rail button.nav-i.on::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#9f87ff,#63c7ff)}
#v-app .rail .badge{min-width:22px;text-align:center;padding:2px 7px;background:rgba(255,179,71,.13);border:1px solid rgba(255,179,71,.22);color:#ffc879}
#v-app .rail .me{margin:10px 2px 0;padding:10px;border-radius:15px;border-color:rgba(172,183,255,.09);background:rgba(255,255,255,.025)}
#v-app .av2{width:38px;height:38px;border-radius:12px;box-shadow:0 8px 22px rgba(74,77,187,.22)}
#v-app .icon-btn{border-color:rgba(172,183,255,.11);background:rgba(255,255,255,.025);transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s}
#v-app .icon-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.055);border-color:rgba(172,183,255,.2)}
#v-app .content{position:relative;padding:34px clamp(18px,3.2vw,48px) 72px}
#v-app .content::before{content:"";position:fixed;left:274px;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(107,137,255,.35),transparent);pointer-events:none}
#v-app .head{margin-bottom:24px;padding-bottom:2px}
#v-app .head h1{font-size:clamp(30px,3vw,38px);font-weight:780;letter-spacing:-.035em}
#v-app .head p{color:#7f88a9;font-size:14px;line-height:1.55}
#v-app .stats{gap:14px;margin-bottom:22px}
#v-app .stat{position:relative;overflow:hidden;min-height:104px;padding:18px 19px;border-radius:17px;border-color:var(--admin-border);background:linear-gradient(180deg,rgba(19,24,50,.82),rgba(13,17,37,.78));box-shadow:0 14px 36px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.02)}
#v-app .stat::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:rgba(123,108,255,.32)}
#v-app .stat.ok::before{background:rgba(47,217,138,.5)}
#v-app .stat.warn::before{background:rgba(255,179,71,.55)}
#v-app .stat span{display:block;color:#7f88a9;font-size:12px;font-weight:700}
#v-app .stat b{margin-top:7px;font-size:35px;font-weight:750}
#v-app .panel{border-radius:18px;border-color:var(--admin-border);background:var(--admin-panel);box-shadow:0 18px 44px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.018);margin-bottom:18px}
#v-app .panel-h{min-height:58px;padding:15px 19px;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);border-bottom-color:rgba(172,183,255,.07)}
#v-app .panel-h h2{font-size:15px;font-weight:700;color:#d9def3}
#v-app table th,#v-app table td{padding:14px 18px;border-bottom-color:rgba(172,183,255,.065)}
#v-app table th{color:#697391;font-size:10px;font-weight:800;letter-spacing:.11em}
#v-app tbody tr:hover{background:rgba(108,133,255,.045)}
#v-app .input{min-height:44px;border-radius:12px;border-color:rgba(172,183,255,.11);background:rgba(5,8,19,.54);color:#e9edff}
#v-app .input:focus{border-color:rgba(104,142,255,.82);box-shadow:0 0 0 4px rgba(91,124,255,.10)}
#v-app .btn{min-height:42px;border-radius:12px;padding:10px 17px;font-size:14px;box-shadow:0 12px 28px rgba(51,68,160,.17)}
#v-app .btn.lg{min-height:48px;border-radius:13px}
#v-app .btn.ghost{background:rgba(255,255,255,.035);border-color:rgba(172,183,255,.12)}
#v-app .btn.ghost:hover{background:rgba(255,255,255,.065)}
#v-app .btn.bad{background:rgba(255,93,115,.08);border-color:rgba(255,93,115,.2)}
#v-app .st{font-size:12px;font-weight:650}
#v-app .st i{width:8px;height:8px}
#v-app .pending{gap:12px;padding:16px}
#v-app .pcard{border-radius:15px;padding:16px;border-color:rgba(255,179,71,.2);background:linear-gradient(180deg,rgba(255,179,71,.07),rgba(255,179,71,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
#v-app .empty{padding:32px 20px;color:var(--faint)}
#v-app .grid2{gap:16px}
#v-app .dlcard{min-height:220px;padding:24px}
#v-app .dlcard h3{font-size:18px}
#v-app .form-row{padding:18px 20px}
#v-app .toast{right:22px;bottom:22px;border-radius:14px;background:rgba(16,20,42,.96);border-color:rgba(172,183,255,.14);box-shadow:0 24px 70px rgba(0,0,0,.35)}
#v-app .release-summary{border-radius:17px;border-color:rgba(123,108,255,.14);background:linear-gradient(135deg,rgba(95,80,220,.11),rgba(55,160,240,.055))}
#v-app .release-step{border:1px solid rgba(172,183,255,.06)}
#v-app .connect-box,#v-app .keybox{border-color:rgba(172,183,255,.1);background:rgba(5,8,19,.46)}
@media(max-width:900px){#v-app .content{padding:22px 16px 48px}#v-app .rail{width:278px}#v-app .content::before{left:0}}
@media(max-width:560px){#v-login .auth-card{padding:28px 22px;border-radius:23px}#v-login .auth-card h1{font-size:28px}#v-app .head h1{font-size:29px}#v-app .stat{min-height:92px}#v-app .panel-h{padding:14px 15px}#v-app .panel-h .input{max-width:none;width:100%;margin-left:0}}


/* ================= ADMIN UI — COMPONENT SYSTEM ================= */
#v-app { --ui-gap: 16px; }
#v-app .head { align-items: center; }
#v-app .head > div { min-width: 0; }
#v-app .head > :last-child { margin-left: auto; }
#v-app .panel-h > div { min-width: 0; }
#v-app .panel-h .input { flex: 0 1 300px; }
#v-app .form-row { align-items: end; }
#v-app .form-row .btn { align-self: end; }
#v-app .field { min-width: 0; }
#v-app .field > label { display: block; margin-bottom: 7px; line-height: 1.35; }
#v-app .btn { white-space: nowrap; }
#v-app td:last-child { vertical-align: middle; }
#v-app td .btn { margin: 2px 3px 2px 0; }
#v-app .release-actions { align-items: center; flex-wrap: wrap; }
#v-app .release-actions .btn { min-width: 150px; }
#v-app .release-files details { padding: 0 20px 18px; }
#v-app .release-files summary { cursor: pointer; color: var(--muted); font-weight: 650; padding-top: 6px; }
#v-app .release-files ul { padding-left: 0; }
#v-app .mail-pref-options { align-items: stretch; }
#v-app .mail-pref-option { min-height: 42px; }
#v-app .scope-list { max-height: 220px; overflow: auto; padding-right: 2px; }
#v-app .sub-block > .panel-h { margin-top: 2px; }
#v-app .qr { max-width: 220px; height: auto; }
#v-app .join-card, #v-app .ui-modal { color: #e9edff; }

/* Toasts */
.toast-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  width: min(430px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}
#v-app .toast-stack .toast,
.toast-stack .toast {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 28px;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 66px;
  padding: 12px 13px;
  border: 1px solid rgba(172,183,255,.14);
  border-radius: 16px;
  background: rgba(14,18,39,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  animation: none;
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, border-color .2s ease;
}
.toast-stack .toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-stack .toast.good { border-color: rgba(47,217,138,.24); }
.toast-stack .toast.bad { border-color: rgba(255,93,115,.28); }
.toast-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 850;
  background: rgba(123,108,255,.12);
  color: #c7caff;
}
.toast.good .toast-icon { background: rgba(47,217,138,.12); color: #7ae6ae; }
.toast.bad .toast-icon { background: rgba(255,93,115,.12); color: #ff9baa; }
.toast-body { min-width: 0; display: grid; gap: 3px; }
.toast-body b { font-size: 13px; color: #eef1ff; }
.toast-body span { font-size: 13px; line-height: 1.4; color: #9aa3c4; overflow-wrap: anywhere; }
.toast-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #697391;
  cursor: pointer;
  font-size: 20px;
}
.toast-close:hover { background: rgba(255,255,255,.05); color: #eef1ff; }

/* Custom modal */
.modal-host { position: relative; z-index: 200; }
.modal-open { overflow: hidden; }
.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3,6,16,.68);
  backdrop-filter: blur(10px);
  animation: uiFadeIn .18s ease both;
}
.ui-modal {
  position: relative;
  width: min(500px,100%);
  padding: 28px;
  border: 1px solid rgba(172,183,255,.16);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,25,54,.98), rgba(11,15,33,.99));
  box-shadow: 0 30px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.035);
  animation: uiModalIn .2s cubic-bezier(.2,.8,.2,1) both;
}
.ui-modal::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  background: rgba(123,108,255,.10);
  filter: blur(36px);
  pointer-events: none;
}
.ui-modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(172,183,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #7c85a6;
  cursor: pointer;
  font-size: 21px;
}
.ui-modal-close:hover { color: #eef1ff; background: rgba(255,255,255,.06); }
.ui-modal-content { display: grid; gap: 10px; padding-right: 34px; }
.ui-modal-content h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.02em; color: #eef1ff; }
.ui-modal-content p { margin: 0; color: #8e98bb; line-height: 1.55; font-size: 14px; }
.ui-modal-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 14px;
  background: rgba(123,108,255,.12);
  border: 1px solid rgba(123,108,255,.18);
  color: #bfc3ff;
  font-weight: 850;
  font-size: 18px;
}
.ui-modal-icon.danger { background: rgba(255,93,115,.10); border-color: rgba(255,93,115,.2); color: #ff9baa; }
.ui-modal-input { margin-top: 5px; }
.ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.ui-modal-actions .btn { min-width: 120px; }
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Release history */
.release-history {
  margin-top: 22px;
  padding: 18px 0 2px;
  border-top: 1px solid rgba(172,183,255,.07);
}
.release-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 13px;
  padding: 0 2px;
}
.release-history-head h3 { margin: 0; font-size: 17px; color: #e1e5f6; }
.release-history-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.verified-chip, .release-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(172,183,255,.10);
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.verified-chip span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #45d98b;
  box-shadow: 0 0 10px rgba(69,217,139,.45);
}
.release-history-list { display: grid; gap: 10px; }
.release-history-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(172,183,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}
.release-history-card.verified {
  border-color: rgba(69,217,139,.10);
  background: linear-gradient(180deg, rgba(69,217,139,.028), rgba(255,255,255,.012));
}
.release-history-main { min-width: 0; }
.release-history-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.release-history-title b { color: #dce2f4; font-size: 14px; }
.release-history-card p { margin: 5px 0 8px; overflow-wrap: anywhere; }
.release-state.live { color: #72dfaa; border-color: rgba(69,217,139,.14); background: rgba(69,217,139,.06); }
.release-history-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--faint); font-size: 12px; }
.release-history-meta .mono { color: #aab2d6; }
@media(max-width:760px){
  .toast-stack { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .ui-modal-backdrop { padding: 12px; }
  .ui-modal { padding: 24px 20px 20px; border-radius: 19px; }
  .ui-modal-actions { display: grid; grid-template-columns: 1fr; }
  .ui-modal-actions .btn { width: 100%; }
  .release-history-card { grid-template-columns: 1fr; align-items: stretch; }
  .release-history-card > .btn { width: 100%; }
}

#v-app .release-history-actions { display:flex; justify-content:flex-end; align-items:center; gap:7px; flex-wrap:wrap; }
#v-app .release-history-actions .btn { min-height:36px; padding:8px 11px; }
@media(max-width:760px){#v-app .release-history-actions{justify-content:stretch}#v-app .release-history-actions .btn{flex:1 1 120px}}


/* ---------- admin polish / alignment ---------- */
.content{max-width:1700px;width:100%;margin:0 auto;padding-top:30px}
.page{width:100%;min-width:0}
.page>.head{min-height:58px}
.head>div:first-child{min-width:0;flex:1}
.head .acts,.acts,.inline-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel{width:100%;box-shadow:0 18px 50px -34px rgba(0,0,0,.7)}
.panel-h>div{min-width:0}
.panel-h .input{margin-left:auto}
.grid2{align-items:start}
.form-row{align-items:end}
.form-row .field{min-width:0}
.field.grow{min-width:0}
table{table-layout:auto}
table td:last-child,table th:last-child{text-align:right}
table td:last-child .inline-actions{justify-content:flex-end}
.dv-tools{padding:0 20px 4px}
.tool-tabs{scrollbar-width:thin}
.tool-tab{font-size:13px}
.action-grid{grid-template-columns:repeat(4,minmax(150px,1fr))}
.action-grid.compact{grid-template-columns:repeat(4,minmax(150px,1fr))}
.tool-output{margin:14px 0;min-height:74px}
.screen-preview-box{padding:10px;border:1px solid var(--line2);border-radius:14px;background:#050716;overflow:auto}
.screen-preview{display:block;max-width:100%;height:auto;border-radius:10px;margin:0 auto}
.file-row{cursor:pointer}
.file-row:hover{border-color:var(--line2);background:rgba(255,255,255,.06)}
.metric-row{padding:10px 12px}
.chat-bubble{max-width:78%;padding:10px 13px;border-radius:14px;margin:8px 0;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.chat-bubble.outgoing{margin-left:auto;border-color:rgba(123,108,255,.26);background:rgba(123,108,255,.08)}
.chat-bubble.incoming{margin-right:auto;border-color:rgba(47,217,138,.20);background:rgba(47,217,138,.06)}
.permission-grid{align-content:start}
.nav-label{flex:none}
.me #theme-toggle{font-size:14px;padding:0;border:0;background:transparent}
.rail .me{min-width:0}
.rail .me .who{min-width:0}
.setting-card{min-width:0}
.settings-fields{align-items:start}
.page .stats{margin-top:2px}
#p-packages .panel,#p-security .panel,#p-automation .panel,#p-backups .panel,#p-monitoring .panel{min-width:0}
#p-packages .grid2,#p-security .grid2,#p-automation .grid2{align-items:stretch}
#p-packages .grid2>.panel,#p-security .grid2>.panel,#p-automation .grid2>.panel{height:100%}
#p-groups .grid2{align-items:start}
#p-groups form.panel{position:sticky;top:22px}
@media(max-width:1150px){
  .app{grid-template-columns:230px 1fr}
  .rail{padding-left:12px;padding-right:12px}
  .action-grid,.action-grid.compact{grid-template-columns:repeat(3,minmax(140px,1fr))}
}
@media(max-width:900px){
  .content{padding:24px 16px 48px}
  .grid2{grid-template-columns:1fr}
  #p-groups form.panel{position:static}
  .action-grid,.action-grid.compact{grid-template-columns:repeat(2,minmax(130px,1fr))}
  .panel-h{padding:14px 16px}
  .dv-tools{padding:0 16px 4px}
}
@media(max-width:600px){
  .action-grid,.action-grid.compact{grid-template-columns:1fr 1fr}
  .head h1{font-size:28px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:15px}
  .stat b{font-size:28px}
  table{min-width:680px}
  .panel{overflow-x:auto}
  .panel-h{overflow:hidden}
  .panel-h .input{width:100%;max-width:none;margin-left:0}
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6fb;--bg2:#edf1f8;--card:rgba(255,255,255,.90);--card-solid:#fff;
  --line:rgba(30,42,70,.10);--line2:rgba(30,42,70,.18);--text:#172033;--muted:#59657d;--faint:#7b879c;
}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] .rail{background:rgba(247,249,253,.82)}
html[data-theme="light"] .input{background:rgba(255,255,255,.86)}
html[data-theme="light"] .btn.ghost{background:rgba(20,30,55,.035)}
html[data-theme="light"] .tool-output,html[data-theme="light"] .screen-preview-box{background:#f1f4f9}
html[data-theme="light"] .dv-info b,html[data-theme="light"] .panel-h h2{color:var(--text)}

.drag-over{outline:2px dashed rgba(123,108,255,.72);outline-offset:-6px;background:rgba(123,108,255,.07)!important}
.device-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.table-scroll{width:100%;overflow:auto}
@media(max-width:600px){.rail button.nav-i::before{width:18px}.nav-label{margin-left:30px}}


/* ---------- light admin theme: no dark hard-coded surfaces ---------- */
html[data-theme="light"] #v-login {
  background: radial-gradient(900px 520px at 50% 0%, rgba(91,124,255,.13), transparent 62%), #f5f7fb;
}
html[data-theme="light"] #v-login::before {
  opacity: .5;
  background-image: linear-gradient(rgba(30,42,70,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,42,70,.035) 1px,transparent 1px);
}
html[data-theme="light"] #v-login .auth-card {
  border-color: rgba(30,42,70,.12);
  background: rgba(255,255,255,.94);
  box-shadow: 0 30px 80px rgba(39,52,86,.16), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] #v-login .auth-card .brand::after,
html[data-theme="light"] #v-app .rail .brand::after {
  border-color: rgba(65,80,125,.16);
  color: #65718a;
  background: rgba(91,124,255,.06);
}
html[data-theme="light"] #v-login .auth-card .sub,
html[data-theme="light"] #v-app .head p { color: #647087; }
html[data-theme="light"] #v-login .auth-card .field label { color: #56637a; }
html[data-theme="light"] #v-login .auth-card .input,
html[data-theme="light"] #v-app .input {
  background: rgba(255,255,255,.96);
  color: #172033;
  border-color: rgba(30,42,70,.15);
  box-shadow: inset 0 1px 0 rgba(20,30,55,.02);
}
html[data-theme="light"] #v-login .auth-card .input:focus,
html[data-theme="light"] #v-app .input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
html[data-theme="light"] #v-login .auth-card .linkish { color: #4c62a4; }
html[data-theme="light"] #v-login .auth-card .faint { color: var(--faint); }
html[data-theme="light"] #v-app {
  background: radial-gradient(1100px 680px at 82% -12%, rgba(91,124,255,.10), transparent 62%), #f5f7fb;
}
html[data-theme="light"] #v-app .rail {
  background: var(--rail);
  border-right-color: rgba(30,42,70,.10);
  box-shadow: 18px 0 55px rgba(44,58,90,.06);
}
html[data-theme="light"] #v-app .rail .brand {
  border-bottom-color: rgba(30,42,70,.07);
}
html[data-theme="light"] #v-app .rail button.nav-i {
  color: #66728a;
}
html[data-theme="light"] #v-app .rail button.nav-i:hover {
  background: rgba(76,98,164,.055);
  border-color: rgba(76,98,164,.08);
  color: #24304a;
}
html[data-theme="light"] #v-app .rail button.nav-i.on {
  color: #1b2740;
  background: linear-gradient(135deg, rgba(91,124,255,.13), rgba(123,108,255,.07));
  border-color: rgba(91,124,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(48,65,150,.05);
}
html[data-theme="light"] #v-app .rail .me {
  background: rgba(247,249,253,.9);
  border-color: rgba(30,42,70,.09);
}
html[data-theme="light"] #v-app .icon-btn {
  border-color: rgba(30,42,70,.12);
  background: rgba(255,255,255,.76);
  color: #65718a;
}
html[data-theme="light"] #v-app .icon-btn:hover {
  background: #fff;
  border-color: rgba(30,42,70,.18);
  color: #26324b;
}
html[data-theme="light"] #v-app .stat,
html[data-theme="light"] #v-app .panel {
  border-color: rgba(30,42,70,.10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 44px rgba(44,58,90,.07), inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] #v-app .stat::before { background: rgba(91,124,255,.3); }
html[data-theme="light"] #v-app .stat.ok::before { background: rgba(47,173,117,.42); }
html[data-theme="light"] #v-app .stat.warn::before { background: rgba(214,142,25,.48); }
html[data-theme="light"] #v-app .stat span,
html[data-theme="light"] #v-app .empty,
html[data-theme="light"] #v-app .faint { color: var(--faint); }
html[data-theme="light"] #v-app .head p { color: var(--muted); }
html[data-theme="light"] #v-app .stat b,
html[data-theme="light"] #v-app .panel-h h2,
html[data-theme="light"] #v-app .dlcard h3,
html[data-theme="light"] #v-app .release-history-head h3 { color: #1c2740; }
html[data-theme="light"] #v-app .panel-h { border-bottom-color: rgba(30,42,70,.08); }
html[data-theme="light"] #v-app th,
html[data-theme="light"] #v-app table th { color: #5d6880; }
html[data-theme="light"] #v-app table td { border-bottom-color: rgba(30,42,70,.08); }
html[data-theme="light"] #v-app tbody tr:hover { background: rgba(76,98,164,.035); }
html[data-theme="light"] #v-app .btn.ghost,
html[data-theme="light"] #v-app .tool-tab {
  background: rgba(30,42,70,.035);
  border-color: rgba(30,42,70,.13);
  color: #43516d;
}
html[data-theme="light"] #v-app .btn.ghost:hover,
html[data-theme="light"] #v-app .tool-tab:hover { background: rgba(30,42,70,.06); }
html[data-theme="light"] #v-app .tool-tab.on {
  color: #26324b;
  border-color: rgba(55,145,125,.34);
  background: rgba(55,145,125,.07);
}
html[data-theme="light"] #v-app .connect-box,
html[data-theme="light"] #v-app .keybox,
html[data-theme="light"] #v-app .tool-output,
html[data-theme="light"] #v-app .screen-preview-box {
  background: #f2f5f9;
  border-color: rgba(30,42,70,.10);
  color: #26324b;
}
html[data-theme="light"] #v-app .switch-row,
html[data-theme="light"] #v-app .mail-pref-option,
html[data-theme="light"] #v-app .data-card,
html[data-theme="light"] #v-app .release-step {
  background: rgba(30,42,70,.025);
  border-color: rgba(30,42,70,.10);
}
html[data-theme="light"] #v-app .pcard {
  background: linear-gradient(180deg, rgba(255,179,71,.12), rgba(255,179,71,.045));
  border-color: rgba(214,142,25,.20);
}
html[data-theme="light"] #v-app .toast,
html[data-theme="light"] .toast-stack .toast {
  background: rgba(255,255,255,.97);
  border-color: rgba(30,42,70,.12);
  box-shadow: 0 24px 70px rgba(44,58,90,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .toast-body b { color: #1c2740; }
html[data-theme="light"] .toast-body span { color: #67748b; }
html[data-theme="light"] .toast-close { color: #758198; }
html[data-theme="light"] .toast-close:hover { color: #1d2942; background: rgba(30,42,70,.05); }
html[data-theme="light"] .ui-modal-backdrop { background: rgba(33,43,66,.30); }
html[data-theme="light"] .ui-modal {
  background: rgba(255,255,255,.98);
  color: #1c2740;
  border-color: rgba(30,42,70,.13);
  box-shadow: 0 30px 100px rgba(44,58,90,.20), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .ui-modal-content h2 { color: #1c2740; }
html[data-theme="light"] .ui-modal-content p { color: #66748c; }
html[data-theme="light"] .ui-modal-close { color: #748097; background: rgba(30,42,70,.035); border-color: rgba(30,42,70,.10); }
html[data-theme="light"] .ui-modal-close:hover { color: #1d2942; background: rgba(30,42,70,.06); }
html[data-theme="light"] .release-summary,
html[data-theme="light"] .release-history-card {
  background: linear-gradient(180deg, rgba(91,124,255,.07), rgba(255,255,255,.7));
  border-color: rgba(30,42,70,.10);
}
html[data-theme="light"] .release-history-meta { color: var(--faint); }
html[data-theme="light"] .release-history-meta .mono,
html[data-theme="light"] .release-history-title b { color: #2a3550; }
html[data-theme="light"] .release-history-card.verified {
  background: linear-gradient(180deg, rgba(47,173,117,.05), rgba(255,255,255,.70));
  border-color: rgba(47,173,117,.15);
}
html[data-theme="light"] #v-app .join-card { background: #fff; color: #1c2740; border-color: rgba(30,42,70,.12); box-shadow: 0 20px 60px rgba(44,58,90,.18); }
html[data-theme="light"] #v-app .chat-bubble { background: rgba(30,42,70,.035); color: #26324b; border-color: rgba(30,42,70,.10); }
html[data-theme="light"] #v-app .chat-bubble.outgoing { background: rgba(123,108,255,.07); border-color: rgba(123,108,255,.18); }
html[data-theme="light"] #v-app .chat-bubble.incoming { background: rgba(47,173,117,.06); border-color: rgba(47,173,117,.18); }
html[data-theme="light"] .content::before { background: linear-gradient(90deg,transparent,rgba(107,137,255,.20),transparent); }

#v-app .rail .me { margin-top: auto; align-self: stretch; }
#v-app .rail { display:flex; flex-direction:column; min-height:100vh; }

/* Device workspace organization */
.action-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.action-group{border:1px solid var(--line,#293241);border-radius:14px;padding:12px;background:rgba(120,130,170,.035)}
.action-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.action-group-head h3{margin:0;font-size:13px;font-weight:700}
.action-group-head .faint{font-size:11px}
.action-group .action-grid{margin:0}
.history-tabs{display:flex;gap:7px;overflow:auto;margin-bottom:12px;padding-bottom:2px}
.command-center{border:1px solid var(--line,#293241);border-radius:14px;padding:14px;background:rgba(120,130,170,.035)}
.command-center-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.command-center-head h3{margin:0 0 4px;font-size:16px}
.command-center-head p{margin:0;max-width:760px}
.command-center-form{display:grid;gap:10px}
.command-center-meta{min-height:18px}
.command-center-actions{display:flex;gap:8px;flex-wrap:wrap}
.pill.faint{font-size:11px;border:1px solid var(--line,#293241);padding:5px 8px;border-radius:999px}
@media(max-width:900px){.action-groups{grid-template-columns:1fr}}
@media(max-width:760px){.command-center-head{display:block}.command-center-head .pill{display:inline-block;margin-top:10px}}

/* ================= ADMIN UI — FINAL MODERN SYSTEM ================= */
#v-app{
  --admin-bg:#f6f8fc;
  --admin-surface:#fff;
  --admin-surface-2:#f8fafc;
  --admin-border:rgba(25,39,65,.09);
  --admin-text:#172033;
  --admin-muted:#68758b;
  background:#f6f8fc;
  color:var(--admin-text);
}
#v-app .rail{
  width:252px;
  padding:16px 12px 12px;
  gap:4px;
  background:rgba(255,255,255,.97);
  border-right:1px solid var(--admin-border);
  box-shadow:10px 0 28px rgba(35,50,80,.045);
  backdrop-filter:none;
}
#v-app .rail .brand{
  min-height:50px;
  padding:0 9px 14px;
  margin:0 2px 8px;
  border-bottom:1px solid var(--admin-border);
}
#v-app .rail .brand::after{display:none}
#v-app .rail button.nav-i{
  min-height:42px;
  padding:9px 11px;
  border-radius:11px;
  color:#68758c;
  border:1px solid transparent;
  font-size:13px;
  font-weight:650;
}
#v-app .rail button.nav-i svg{width:18px;height:18px}
#v-app .rail button.nav-i:hover{background:#f4f6fa;color:#25314a}
#v-app .rail button.nav-i.on{
  color:#26325c;
  background:#eef1ff;
  border-color:#e0e5ff;
  box-shadow:none;
}
#v-app .rail button.nav-i.on::before{
  left:-2px;
  top:8px;
  bottom:8px;
  width:3px;
  background:#5969d8;
}
#v-app .nav-label{
  margin:14px 10px 6px;
  color:var(--faint);
  font-size:11px;
  letter-spacing:.08em;
}
#v-app .rail .me{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  margin:0;
  padding:9px;
  border:1px solid var(--admin-border);
  border-radius:13px;
  background:#f8f9fc;
  z-index:3;
}
#v-app .rail{
  position:sticky;
  top:0;
  height:100vh;
  min-height:100vh;
  box-sizing:border-box;
  padding-bottom:88px;
}
#v-app .icon-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
}
#v-app .icon-btn:hover{background:#eef1f6;color:#27334b;transform:none}
#v-app .content{
  max-width:1540px;
  padding:28px clamp(18px,3vw,42px) 64px;
}
#v-app .content::before{display:none}
#v-app .head{margin-bottom:20px}
#v-app .head h1{
  font-size:clamp(29px,2.7vw,37px);
  color:#182238;
  letter-spacing:-.035em;
}
#v-app .head p{color:#718097}
#v-app .stats{gap:12px;margin-bottom:20px}
#v-app .stat{
  min-height:94px;
  padding:16px 18px;
  border-radius:15px;
  border:1px solid var(--admin-border);
  background:#fff;
  box-shadow:0 8px 24px rgba(38,53,82,.055);
}
#v-app .stat::before{height:2px;background:#c7cff4}
#v-app .stat.ok::before{background:#95d8b9}
#v-app .stat.warn::before{background:#e8c57f}
#v-app .stat span{color:var(--faint);font-size:12px}
#v-app .stat b{margin-top:5px;font-size:31px;color:#1d2942}
#v-app .panel{
  margin-bottom:14px;
  border-radius:15px;
  border:1px solid var(--admin-border);
  background:#fff;
  box-shadow:0 8px 26px rgba(38,53,82,.045);
}
#v-app .panel-h{
  min-height:54px;
  padding:13px 17px;
  border-bottom:1px solid rgba(25,39,65,.07);
  background:none;
}
#v-app .panel-h h2{font-size:14px;font-weight:720;color:#1d2a43}
#v-app table th,#v-app table td{padding:12px 16px;border-bottom-color:rgba(25,39,65,.06)}
#v-app table th{color:var(--muted);font-size:11.5px;letter-spacing:.06em}
#v-app tbody tr:hover{background:#f8faff}
#v-app .input{
  min-height:42px;
  border-radius:10px;
  border:1px solid rgba(25,39,65,.14);
  background:#fff;
  color:#172033;
  box-shadow:none;
}
#v-app .input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}
#v-app .btn{
  min-height:40px;
  padding:9px 14px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(57,73,160,.10);
}
#v-app .btn.ghost{
  background:#f7f8fb;
  border:1px solid rgba(25,39,65,.095);
  color:#40506a;
  box-shadow:none;
}
#v-app .btn.ghost:hover{background:#f0f2f7}
#v-app .btn.bad{
  color:#b33a54;
  background:#fff5f6;
  border-color:#f0d0d6;
}
#v-app .dv-grid{gap:18px;padding:18px 20px}
#v-app .dv-info{gap:10px}
#v-app .dv-info>div{
  padding:10px 11px;
  border:1px solid rgba(25,39,65,.07);
  border-radius:11px;
  background:#fafbfc;
}
#v-app .dv-actions{gap:8px}
#v-app .dv-actions .field{margin:3px 0 0}
#v-app .dv-tools{padding:0 20px 6px}
#v-app .tool-tabs-main{
  gap:5px;
  padding:4px 0 12px;
}
#v-app .tool-tab{
  padding:8px 11px;
  border-radius:9px;
  border:1px solid transparent;
  background:transparent;
  color:#718097;
}
#v-app .tool-tab:hover{background:#f4f6f9}
#v-app .tool-tab.on{
  color:#26335c;
  background:#eef1ff;
  border-color:#e0e5ff;
  box-shadow:none;
}
#v-app .action-groups{gap:10px;margin-bottom:2px}
#v-app .action-group{
  padding:11px;
  border:1px solid rgba(25,39,65,.07);
  border-radius:13px;
  background:#fbfcfe;
}
#v-app .action-group-head{margin-bottom:9px}
#v-app .action-group-head h3{color:#3a4860;font-size:12px}
#v-app .action-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#v-app .action-grid .btn{min-height:38px;padding:8px 10px;font-size:12px}
#v-app .tool-result{
  margin-top:11px;
  border:1px solid rgba(25,39,65,.08);
  border-radius:12px;
  background:#f8fafc;
  overflow:hidden;
}
#v-app .tool-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 11px;
  border-bottom:1px solid rgba(25,39,65,.07);
  color:#56647b;
  font-size:12px;
  font-weight:700;
}
#v-app .tool-output{
  margin:0;
  min-height:0;
  max-height:360px;
  padding:12px;
  border:0;
  border-radius:0;
  background:#f8fafc;
  color:#33415a;
  font-size:12px;
  line-height:1.55;
}
#v-app .screen-preview{max-width:100%;height:auto;border-radius:9px}
#v-app .command-center{
  padding:16px;
  border:1px solid rgba(25,39,65,.07);
  border-radius:13px;
  background:#fbfcfe;
}
#v-app .command-center-head{margin-bottom:12px}
#v-app .command-center-head h3{font-size:15px;color:#202d45}
#v-app .command-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:9px;
}
#v-app .command-fields .field{margin:0}
#v-app .command-center-actions{margin-top:2px}
#v-app .pill.faint{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(25,39,65,.09);
  background:var(--surface-2);
  color:var(--muted);
}
#v-app .history-tabs{margin-bottom:10px}
#v-app .release-summary,#v-app .release-history-card{box-shadow:none}
#v-app .toast-stack .toast{
  background:#fff;
  border:1px solid rgba(25,39,65,.11);
  box-shadow:0 14px 40px rgba(38,53,82,.14);
}
#v-app .ui-modal{
  border-radius:17px;
  background:#fff;
  border-color:rgba(25,39,65,.12);
  box-shadow:0 24px 70px rgba(38,53,82,.18);
}
#v-app .ui-modal-content h2{color:#1e2b44}
#v-app .ui-modal-content p{color:#68758b}
#v-app .ui-modal-close{background:#f7f8fa;border-color:rgba(25,39,65,.09);color:#748198}
#v-app .ui-modal-icon{background:#eef1ff;border-color:#dfe5ff;color:#5667d6}
#v-app .ui-modal-icon.danger{background:#fff1f3;border-color:#f2d0d6;color:#bb3e57}

/* softer dark theme: slate/charcoal, without the previous near-black look */
html[data-theme="dark"] #v-app{
  background:#23272e;
  color:#eef1f5;
}
html[data-theme="dark"] #v-app .rail{
  background:#1f2329;
  border-right-color:rgba(255,255,255,.075);
  box-shadow:10px 0 28px rgba(0,0,0,.10);
}
html[data-theme="dark"] #v-app .rail .brand{border-bottom-color:rgba(255,255,255,.07)}
html[data-theme="dark"] #v-app .rail button.nav-i{color:#9ba4b0}
html[data-theme="dark"] #v-app .rail button.nav-i:hover{background:#292e35;color:#f0f2f5}
html[data-theme="dark"] #v-app .rail button.nav-i.on{background:#353b49;border-color:#444c5b;color:#f3f5f8}
html[data-theme="dark"] #v-app .rail .me{background:#292e35;border-color:rgba(255,255,255,.075)}
@media(max-width:900px){
  #v-app .rail{position:fixed;height:100vh;min-height:100vh;}
  #v-app .rail .me{left:12px;right:12px;bottom:12px;}
}
html[data-theme="dark"] #v-app .head h1{color:#f1f3f6}
html[data-theme="dark"] #v-app .head p{color:#aab2bd}
html[data-theme="dark"] #v-app .stat,
html[data-theme="dark"] #v-app .panel{background:#2a2f37;border-color:rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.09)}
html[data-theme="dark"] #v-app .stat span,
html[data-theme="dark"] #v-app .empty,
html[data-theme="dark"] #v-app .faint{color:#a0a9b5}
html[data-theme="dark"] #v-app .stat b,
html[data-theme="dark"] #v-app .panel-h h2{color:#eef1f5}
html[data-theme="dark"] #v-app .panel-h{border-bottom-color:rgba(255,255,255,.065)}
html[data-theme="dark"] #v-app .input{background:#2f343c;color:#eef1f5;border-color:rgba(255,255,255,.11)}
html[data-theme="dark"] #v-app .btn.ghost,
html[data-theme="dark"] #v-app .tool-tab{background:#30353d;border-color:rgba(255,255,255,.075);color:#b8c0ca}
html[data-theme="dark"] #v-app .btn.ghost:hover,
html[data-theme="dark"] #v-app .tool-tab:hover{background:#383d45}
html[data-theme="dark"] #v-app .tool-tab.on{background:#3a4253;border-color:#4a5365;color:#f0f2f6}
html[data-theme="dark"] #v-app .dv-info>div,
html[data-theme="dark"] #v-app .action-group,
html[data-theme="dark"] #v-app .command-center{background:#2d323a;border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] #v-app .action-group-head h3,
html[data-theme="dark"] #v-app .command-center-head h3{color:#e0e4e9}
html[data-theme="dark"] #v-app .tool-result,
html[data-theme="dark"] #v-app .tool-output{background:#252a31;color:#d8dee5}
html[data-theme="dark"] #v-app .tool-result-head{border-bottom-color:rgba(255,255,255,.065);color:#b9c1cb}
html[data-theme="dark"] #v-app .toast-stack .toast{background:#2c3138;border-color:rgba(255,255,255,.095)}
html[data-theme="dark"] #v-app .toast-body b{color:#f0f2f5}
html[data-theme="dark"] #v-app .toast-body span{color:#afb8c3}
html[data-theme="dark"] #v-app .ui-modal{background:#2d323a;color:#eef1f5;border-color:rgba(255,255,255,.10);box-shadow:0 24px 70px rgba(0,0,0,.26)}
html[data-theme="dark"] #v-app .ui-modal-content h2{color:#eef1f5}
html[data-theme="dark"] #v-app .ui-modal-content p{color:#adb6c1}
html[data-theme="dark"] #v-app table td{border-bottom-color:rgba(255,255,255,.065)}
html[data-theme="dark"] #v-app tbody tr:hover{background:#30353d}

@media(max-width:1100px){
  #v-app .rail{width:238px}
  #v-app .content{padding-left:24px;padding-right:24px}
}
@media(max-width:900px){
  #v-app .content{padding:22px 16px 46px}
  #v-app .action-groups{grid-template-columns:1fr}
  #v-app .command-fields{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  #v-app .stats{grid-template-columns:1fr 1fr}
  #v-app .action-grid.compact{grid-template-columns:1fr}
  #v-app .command-fields{grid-template-columns:1fr}
}

/* ---------- contextual help ---------- */
.help-wrap{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;position:relative;max-width:100%}
.help-tip{width:19px;height:19px;display:inline-grid;place-items:center;flex:none;padding:0;border:1px solid rgba(25,39,65,.15);border-radius:50%;background:#f7f8fb;color:#68758c;font-size:11px;font-weight:800;line-height:1;cursor:help}
.help-tip:focus-visible{outline:2px solid #6072dc;outline-offset:2px}
.help-tip::after{content:attr(data-help);position:absolute;left:50%;bottom:calc(100% + 9px);z-index:300;width:min(370px,70vw);padding:10px 12px;border-radius:11px;background:#172033;color:#fff;box-shadow:0 14px 35px rgba(20,30,52,.22);font-size:12px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease}
.help-tip:hover::after,.help-tip:focus-visible::after{opacity:1;transform:translate(-50%,0)}
html[data-theme="dark"] #v-app .help-tip{background:#353b44;border-color:rgba(255,255,255,.12);color:#c5ccd5}
html[data-theme="dark"] #v-app .help-tip::after{background:#11151a}

/* mail page (moved from an inline <style>: the page policy forbids inline styles) */
.mail-add{display:flex;align-items:end;gap:12px;padding-top:18px;border-top:1px solid rgba(120,130,170,.14);margin-top:18px}
.mail-add .field{flex:1;margin:0}
.mail-recipient{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid rgba(120,130,170,.12)}
.mail-recipient:last-child{border-bottom:0}
.mail-recipient-main{display:flex;align-items:center;gap:11px;min-width:0}
.mail-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(100,90,220,.1);font-weight:700}
.mail-recipient-main b{display:block;overflow:hidden;text-overflow:ellipsis}
.mail-recipient-main small{display:block;color:var(--muted,#8b8fa8);margin-top:2px}
.mail-remove{flex:0 0 auto}
.mail-pref-list{display:grid;gap:10px}
.mail-pref-card{border:1px solid rgba(120,130,170,.16);border-radius:14px;padding:14px}
.mail-pref-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.mail-pref-head b{overflow:hidden;text-overflow:ellipsis}
.mail-pref-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mail-pref-option{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;background:rgba(120,130,170,.06);font-size:13px}
.release-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:16px;padding:8px 0 4px}
.release-summary{position:relative;overflow:hidden}
.release-summary:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent,#6d8dff);opacity:.9}
.release-summary h3{font-size:21px;line-height:1.2}
.release-summary .release-meta .stat{border-radius:11px}
.release-actions{padding-top:2px}
.release-actions .btn{min-height:42px;font-weight:700}
.release-actions .btn.ok{box-shadow:0 6px 18px rgba(40,160,100,.14)}
.release-preview{display:flex;flex-direction:column;gap:9px}
.release-preview .st{display:flex;align-items:center;gap:7px}
.release-preview .btn{align-self:flex-start}
.release-timeline{position:relative;gap:6px}
.release-step{min-height:42px}
.release-step.current{border-color:rgba(95,80,220,.22)}
.release-step.current .step-dot{box-shadow:0 0 0 4px rgba(95,80,220,.12)}
.release-blocked{border-color:rgba(220,160,60,.25);background:rgba(220,160,60,.06)}
@media(max-width:900px){.release-hero{grid-template-columns:1fr}.release-preview .btn{width:100%}}
@media(max-width:760px){.release-meta{grid-template-columns:1fr}.release-actions{display:grid;grid-template-columns:1fr}.release-actions .btn{width:100%}}
.release-blocked,.release-preview{margin-top:12px;padding:12px;border:1px solid rgba(220,100,100,.22);border-radius:12px;background:rgba(220,100,100,.06)}
.release-preview{border-color:rgba(90,110,220,.2);background:rgba(90,110,220,.05)}
.release-blocked b{display:block;margin-bottom:5px}
.release-blocked .btn{margin-top:10px}
.release-summary{padding:20px;border-radius:16px;background:linear-gradient(135deg,rgba(95,80,220,.12),rgba(55,160,240,.08));border:1px solid rgba(110,100,220,.16)}
.release-summary h3{margin:0 0 8px;font-size:20px}
.release-summary p{margin:6px 0}
.release-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.release-meta .stat{min-height:78px}
.release-files{margin-top:18px}
.release-files ul{max-height:260px;overflow:auto;margin:12px 0 0}
.release-timeline{display:grid;gap:8px}
.release-step{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;background:rgba(120,130,170,.06)}
.release-step .step-dot{width:9px;height:9px;border-radius:50%;background:#9aa0b8}
.release-step.done .step-dot{background:#35b879}
.release-step.current{background:rgba(95,80,220,.09)}
.release-actions{display:flex;gap:10px;margin-top:18px}
@media(max-width:760px){.mail-add,.release-hero{display:block}.mail-add .btn{margin-top:10px}.mail-pref-options,.release-meta{grid-template-columns:1fr}.release-actions .btn{width:100%}}
.nav-label{margin:16px 14px 7px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted,#8b93a8);font-weight:700}
.nav-i[data-page="groups"],.nav-i[data-page="sessions"],.nav-i[data-page="files"],.nav-i[data-page="monitoring"],.nav-i[data-page="backups"],.nav-i[data-page="packages"],.nav-i[data-page="automation"],.nav-i[data-page="security"]{padding-left:16px}
.dv-tools{margin-top:18px;border-top:1px solid rgba(120,130,170,.12);padding-top:4px}
.tool-tabs{display:flex;gap:7px;overflow:auto;padding:7px 0 14px}
.tool-tab{border:1px solid var(--line,#293241);background:var(--surface-alt,#121925);color:var(--muted,#8b93a8);border-radius:10px;padding:8px 11px;cursor:pointer;white-space:nowrap}
.tool-tab.on{color:var(--text,#eaf0f7);border-color:rgba(55,190,150,.4);box-shadow:0 0 0 1px rgba(55,190,150,.12) inset}
.action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.action-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.action-grid .btn{width:100%;justify-content:center}
.tool-toolbar,.file-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tool-output{white-space:pre-wrap;max-height:340px;overflow:auto;border:1px solid var(--line,#293241);background:rgba(0,0,0,.18);padding:12px;border-radius:12px;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}
.grow{flex:1}
.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.perm-chip{padding:9px 10px;border:1px solid var(--line,#293241);border-radius:10px;background:rgba(120,130,170,.05);font:12px ui-monospace,SFMono-Regular,Consolas,monospace}
.data-list{display:grid;gap:8px}
.data-card{padding:12px;border:1px solid var(--line,#293241);border-radius:12px;background:rgba(120,130,170,.045)}
.data-card .row{display:flex;justify-content:space-between;gap:12px;align-items:center}
.data-card .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px}
.inline-actions{display:flex;gap:7px;flex-wrap:wrap}
.check{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.check input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;margin:0;border:1px solid rgba(145,155,185,.38);border-radius:6px;background:var(--surface-alt,#121925);display:grid;place-items:center;transition:border-color .16s,background .16s,box-shadow .16s}
.check input[type="checkbox"]:checked{border-color:rgba(55,190,150,.9);background:rgba(55,190,150,.88);box-shadow:0 0 0 3px rgba(55,190,150,.1)}
.check input[type="checkbox"]:checked::after{content:"";width:8px;height:5px;border-left:2px solid #08130f;border-bottom:2px solid #08130f;transform:rotate(-45deg) translateY(-1px)}
.check input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(85,150,255,.22)}
select.input{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.btn{transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn:not(:disabled):active{transform:translateY(0)}
@media(max-width:760px){.check{min-height:38px}}
@media(max-width:1050px){.action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.action-grid,.action-grid.compact,.permission-grid{grid-template-columns:1fr 1fr}.dv-grid{grid-template-columns:1fr}.panel-h{align-items:flex-start;gap:10px}.content{padding-left:16px;padding-right:16px}}

/* start screen while the first answer from the server is awaited */
.boot{position:fixed;inset:0;display:grid;place-items:center;align-content:center;gap:14px;z-index:40;background:inherit;text-align:center}
.boot b{font-size:22px}
.boot .spin{width:26px;height:26px;border-width:3px;border-color:rgba(120,130,170,.35);border-top-color:var(--text)}

/* ======================================================================================================
   v8 polish: one consistent layer on top of the older rules (readable buttons, calmer cards, real dark theme)
   ====================================================================================================== */
:root { --surface: #ffffff; --surface2: #f6f8fc; --ring: rgba(91, 102, 214, .28); --r-card: 14px; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f1a; --bg2: #0f1524; --card: rgba(20, 27, 44, .92); --card-solid: #141b2c; --surface: #141b2c; --surface2: #1a2236;
  --line: rgba(160, 175, 220, .12); --line2: rgba(160, 175, 220, .22); --text: #e8ecf6; --muted: #a3aec6; --faint: #7d89a3;
  --accent: #8b95ff; --accent2: #5aa8ff; --ring: rgba(139, 149, 255, .35);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .rail { background: rgba(13, 18, 31, .88); border-color: var(--line); }
html[data-theme="dark"] .panel, html[data-theme="dark"] .stat, html[data-theme="dark"] .card, html[data-theme="dark"] #v-login .login-card { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface2); color: var(--text); border-color: var(--line2); }
html[data-theme="dark"] .btn.ghost { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] table th { background: transparent; color: var(--faint); }
html[data-theme="dark"] .tool-output, html[data-theme="dark"] .screen-preview-box { background: #0d1322; color: var(--text); }
html[data-theme="dark"] .empty { color: var(--faint); }

/* buttons: secondary buttons must be readable in every theme */
.btn.ghost, #v-app .btn.ghost, #v-login .btn.ghost { color: var(--text); background: var(--surface); border: 1px solid var(--line2); box-shadow: 0 1px 2px rgba(20, 30, 55, .06); }
.btn.ghost:hover { background: var(--surface2); border-color: var(--accent); box-shadow: 0 6px 18px -10px var(--ring); transform: translateY(-1px); }
.btn:focus-visible, .input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.bad { color: var(--bad); background: rgba(217, 79, 104, .08); border-color: rgba(217, 79, 104, .35); }
.btn.ok { color: #fff; }

/* sign-in: tidy, readable, one column */
#v-login .check { align-items: flex-start; line-height: 1.35; margin: 6px 0 16px; }
#v-login .check .faint { display: block; margin-top: 2px; font-size: 12.5px; }
#v-login .btn { width: 100%; }
#v-login .btn.ghost { margin-top: 10px; }
#v-login h1 { letter-spacing: -.02em; }

/* app shell: calmer, larger type, clearer hierarchy */
#v-app h1, #v-app .page-h h1 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; margin: 0 0 4px; }
#v-app .sub, #v-app .page-sub { color: var(--muted); font-size: 14.5px; }
#v-app .panel, #v-app .stat { border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 30, 55, .05), 0 14px 34px -22px rgba(30, 45, 90, .25); }
#v-app .stat b, #v-app .stat .num { font-size: 34px; letter-spacing: -.02em; }
#v-app .panel-h { padding: 16px 20px; }
#v-app .panel-h h2 { font-size: 15.5px; }
#v-app table td, #v-app table th { padding: 13px 16px; }
#v-app table tbody tr { transition: background .14s ease; }
#v-app table tbody tr:hover { background: rgba(91, 102, 214, .06); }
#v-app .nav-i { border-radius: 12px; font-size: 14.5px; padding: 11px 14px; }
#v-app .nav-i.on { background: rgba(91, 102, 214, .12); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.st i { box-shadow: 0 0 0 4px rgba(33, 154, 102, .14); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
#v-login .check span { display: block; }
#v-login .check small { display: block; font-size: 12.5px; margin-top: 2px; }


/* Entrance: the hero rises in once; later sections reveal as they scroll into view (IntersectionObserver adds .in). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ===== One look for selects and checkboxes everywhere on the web (site + admin), light and dark ===== */
select, select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b879c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 18px 18px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
select:hover { border-color: var(--accent); }
select option { background: var(--card-solid); color: var(--text); }
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; min-width: 20px; margin: 0; border-radius: 6px;
  border: 1.5px solid var(--line2); background: var(--card-solid);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.check input[type="checkbox"]:hover { border-color: var(--accent); }
.check input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .16s var(--ease); }
.check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91, 102, 214, .16); }
.check input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
html[data-theme="dark"] select, html[data-theme="dark"] .check input[type="checkbox"]:not(:checked) { background-color: var(--surface2); }

/* Admin: four overview numbers in one row, two on narrower screens; the live label shows the real state of the live channel. */
#v-app .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { #v-app .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#v-app .live.off .dot { background: var(--warn); box-shadow: none; animation: none; }
#v-app .live.off { color: var(--muted); }

/* Device metrics: small multiples, one hue, thin line, recessive grid, crosshair tooltip. */
.mcharts { display: grid; gap: 14px; }
.mchart { position: relative; margin: 0; padding: 14px 16px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-solid, var(--surface)); }
.mchart figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.mchart figcaption b { color: var(--text); font-weight: 600; }
.mc-now { color: var(--muted); font-variant-numeric: tabular-nums; }
.mchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.mc-grid { stroke: var(--line); stroke-width: 1; }
.mc-axis { fill: var(--faint, var(--muted)); font-size: 11px; font-variant-numeric: tabular-nums; }
.mc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mc-area { fill: var(--accent); opacity: .12; }
.mc-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.mc-cross.on { opacity: .8; }
.mc-dot { fill: var(--accent); stroke: var(--card-solid, var(--surface)); stroke-width: 2; }
.mc-hit { fill: transparent; cursor: crosshair; }
.mc-tip { position: absolute; top: 34px; padding: 4px 9px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 600; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-table { margin-top: 12px; }
.mc-table summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 6px 0; }
.mc-dot { opacity: 0; }
.mc-dot.on { opacity: 1; }
td.row-act { text-align: right; white-space: nowrap; width: 1%; }
td.row-act .btn { padding: 7px 14px; }

/* ===== Admin on a phone: one full-width column, a real top bar with the menu, computers as cards with a big "Poveži". ===== */
@media (max-width: 760px) {
  /* Only the shown shell: a hidden shell (sign-in page) must stay hidden on a phone too. */
  #v-app:not(.hidden) { display: block !important; grid-template-columns: none !important; }
  #v-app > main.content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 64px 16px 84px !important; /* 16 px side gutter; room for the fixed "?" help button */ }
  #v-app .menu-btn { position: fixed; top: 10px; left: 10px; z-index: 30; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--surface, var(--card-solid)); border: 1px solid var(--line2); box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
  #v-app .menu-btn svg { width: 22px; height: 22px; }
  #v-app .head { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
  #v-app .head h1 { font-size: 26px; line-height: 1.15; margin: 0; }
  #v-app .head p { margin: 2px 0 0; font-size: 14px; }
  #v-app .stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #v-app .stat { padding: 12px 14px !important; }
  #v-app .stat b { font-size: 26px !important; }
  #v-app .panel { border-radius: 16px; }
  #v-app .panel-h { padding: 12px 14px !important; flex-wrap: wrap; gap: 8px; }
  #v-app .panel-h .input { width: 100%; }
  /* Tables become a list of cards: name and state on top, details below, the action full width. */
  #v-app table, #v-app thead, #v-app tbody, #v-app tr, #v-app td { display: block; width: 100%; }
  #v-app table { min-width: 0 !important; }
  #v-app thead { display: none; }
  #v-app tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  #v-app tbody tr td { padding: 2px 0 !important; border: 0 !important; }
  #v-app tbody tr td.hide-sm { display: none; }
  #v-app tbody tr td:first-child b { font-size: 16px; }
  #v-app td.row-act { width: 100%; text-align: left; padding-top: 8px !important; }
  #v-app td.row-act .btn { width: 100%; min-height: 44px; }
  #v-app .dv-grid { grid-template-columns: 1fr !important; }
  #v-app .dv-info { grid-template-columns: 1fr 1fr !important; }
  #v-app .btn, #v-app .input, #v-app select { min-height: 44px; }
  #v-app .tool-toolbar, #v-app .dv-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 760px) {
  #v-app .dv-grid { display: flex !important; flex-direction: column; }
  #v-app .dv-actions { order: -1; }
  #v-app #dv .panel-h { padding-left: 64px !important; }
}
/* Phone menu: always reachable and scrollable, above everything, with a scrim. */
.rail-scrim { display: none; }
@media (max-width: 900px) {
  #v-app .rail { position: fixed !important; top: 0; left: 0; bottom: 0; height: 100dvh !important; min-height: 0 !important; z-index: 60 !important;
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(-105%);
    /* A closed menu is also out of the tab order and the accessibility tree: visibility goes off once the slide has finished. */
    visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; }
  #v-app .rail.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  #v-app .rail .nav-i { min-height: 46px; }
  .rail-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(5, 8, 18, .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .rail-scrim.on { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }
  #v-app:not(.hidden) { display: block !important; grid-template-columns: none !important; }
  #v-app > main.content { width: 100% !important; margin: 0 !important; padding-top: 64px !important; }
  #v-app .menu-btn { display: grid !important; position: fixed; top: 10px; left: 10px; z-index: 50; width: 44px; height: 44px; border-radius: 12px; place-items: center;
    background: var(--surface, var(--card-solid)); border: 1px solid var(--line2); }
}
@media (max-width: 900px) {
  #v-app .rail .me { position: static !important; margin-top: auto !important; inset: auto !important; flex: none; }
  #v-app .rail nav, #v-app .rail .nav { flex: none; }
}
/* Form dialogs: grouped checkbox lists that scroll, so long permission lists stay usable on a phone. */
.ui-form { max-height: min(86vh, 760px); overflow-y: auto; }
.ui-form .field { margin-bottom: 12px; }
.check-groups { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.check-group { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 6px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.check-group legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.check-group .check { margin: 4px 0; }
/* Checkboxes inside tables (old browser look) get the same style as everywhere else. */
#v-app table input[type="checkbox"], #v-app .panel input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1.5px solid var(--line2); background: var(--card-solid, var(--surface)); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
#v-app table input[type="checkbox"]::after, #v-app .panel input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px) scale(0); transition: transform .16s; }
#v-app table input[type="checkbox"]:checked, #v-app .panel input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
#v-app table input[type="checkbox"]:checked::after, #v-app .panel input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px,-1px) scale(1); }
.ui-form { overflow-x: hidden; } .ui-form .check-group { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .ui-form .input, .ui-form select { width: 100%; box-sizing: border-box; }
#v-app .alt-link { display: block; margin: 8px 0 4px; font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } #v-app .alt-link:hover { color: var(--text); }