/* PlusDesk design system (desktop + mobile). All assets are local: the app works offline. */
@font-face { font-family: 'Vazirmatn'; font-weight: 400; font-display: swap; src: url('vendor/fonts/Vazirmatn-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 500; font-display: swap; src: url('vendor/fonts/Vazirmatn-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 600; font-display: swap; src: url('vendor/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; font-display: swap; src: url('vendor/fonts/Vazirmatn-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 800; font-display: swap; src: url('vendor/fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 900; font-display: swap; src: url('vendor/fonts/Vazirmatn-Black.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('vendor/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url('vendor/fonts/jetbrains-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('vendor/fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root {
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-soft: rgba(59, 130, 246, 0.12);
    --accent-border: rgba(59, 130, 246, 0.35);
    --accent-glow: rgba(59, 130, 246, 0.25);
    --bg-base: #0a0d14;
    --bg-sidebar: #0f1420;
    --bg-surface: #141b2a;
    --bg-card: #192336;
    --border-color: #202c42;
    --border-hover: #2f3e5c;
    --ui-scale: 1;
    /* category hues */
    --c-blue: 59, 130, 246;
    --c-violet: 139, 92, 246;
    --c-emerald: 16, 185, 129;
    --c-amber: 245, 158, 11;
    --c-rose: 244, 63, 94;
    --c-cyan: 6, 182, 212;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Vazirmatn', system-ui, sans-serif;
    background: var(--bg-base);
    color: #cbd5e1;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font-family: inherit; }
.mono, .code-num { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.code-num { letter-spacing: 0.12em; direction: ltr; display: inline-block; }

/* ---------- ambient background ---------- */
.ambient { position: relative; isolation: isolate; }
.ambient::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(var(--c-violet), .07), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, var(--accent-soft), transparent 60%);
}

/* ---------- buttons ---------- */
.btn-accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent)); color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 70%, black); transition: filter .2s var(--ease), transform .12s, box-shadow .2s; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 14px -8px rgba(0,0,0,.6); }
.btn-accent:hover { filter: brightness(1.08); }
.btn-accent:active { transform: translateY(1px) scale(.99); }
.btn-ghost { background: rgba(255,255,255,.03); border: 1px solid var(--border-color); color: #e2e8f0; transition: background .2s, border-color .2s, transform .12s; }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--border-hover); }
.btn-ghost:active { transform: translateY(1px); }
.btn-danger { background: linear-gradient(180deg, #f43f5e, #e11d48); color: #fff; border: 1px solid #be123c; transition: filter .2s; }
.btn-danger:hover { filter: brightness(1.08); }
.text-accent { color: var(--accent); }
.bg-accent-soft { background: var(--accent-soft); }
.border-accent { border-color: var(--accent-border); }

.field { background: rgba(0,0,0,.25); border: 1px solid var(--border-color); color: #fff; outline: none; border-radius: .8rem; transition: border-color .2s, box-shadow .2s; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field:disabled { opacity: .45; }

/* ---------- surfaces ---------- */
.glass { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border: 1px solid var(--border-color); backdrop-filter: blur(12px); }
.panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 1.1rem; }
.lift { transition: transform .25s var(--ease), border-color .25s, background .25s; }
.lift:hover { transform: translateY(-2px); border-color: var(--border-hover); }

/* gradient-ring card (device ID) */
.ring-card { position: relative; border-radius: 1.1rem; background: var(--bg-surface); }
.ring-card::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, var(--accent), rgba(var(--c-violet), .7) 45%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- icon chips (category hues) ---------- */
.ichip { --h: var(--c-blue); width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: rgb(var(--h)); background: linear-gradient(145deg, rgba(var(--h), .22), rgba(var(--h), .06)); border: 1px solid rgba(var(--h), .28); font-size: .85rem; }
.ichip.sm { width: 1.85rem; height: 1.85rem; font-size: .72rem; border-radius: .55rem; }
.ichip.lg { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; border-radius: 1rem; }
.h-blue { --h: var(--c-blue); } .h-violet { --h: var(--c-violet); } .h-emerald { --h: var(--c-emerald); }
.h-amber { --h: var(--c-amber); } .h-rose { --h: var(--c-rose); } .h-cyan { --h: var(--c-cyan); }

/* ---------- status chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .69rem; font-weight: 600; border: 1px solid; white-space: nowrap; }
.chip-ok { color: #34d399; border-color: rgba(var(--c-emerald), .35); background: rgba(var(--c-emerald), .1); }
.chip-warn { color: #fbbf24; border-color: rgba(var(--c-amber), .35); background: rgba(var(--c-amber), .1); }
.chip-bad { color: #fb7185; border-color: rgba(var(--c-rose), .35); background: rgba(var(--c-rose), .1); }
.chip-info { color: #93c5fd; border-color: var(--accent-border); background: var(--accent-soft); }
.chip-mute { color: #94a3b8; border-color: var(--border-color); background: rgba(255,255,255,.03); }
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.dot.live { animation: livepulse 2s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- settings layout ---------- */
.rail-btn { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border-radius: .95rem; text-align: right; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.rail-btn:hover { background: rgba(255,255,255,.035); }
.rail-btn .t { color: #e2e8f0; font-weight: 700; font-size: .78rem; }
.rail-btn .d { color: #94a3b8; font-size: .69rem; margin-top: .1rem; }
.rail-btn.active { background: linear-gradient(90deg, transparent, var(--accent-soft)); border-color: var(--accent-border); }
.rail-btn.active .t { color: #fff; }

.hero { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--border-color); padding: 1.35rem 1.5rem;
    background: linear-gradient(120deg, rgba(var(--h, var(--c-blue)), .16), rgba(var(--h, var(--c-blue)), .03) 55%, transparent), var(--bg-surface); }
.hero::after { content: ''; position: absolute; width: 18rem; height: 18rem; left: -5rem; top: -9rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--h, var(--c-blue)), .22), transparent 70%); filter: blur(10px); animation: drift 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes drift { to { transform: translate(3rem, 2rem) scale(1.15); } }
.hero h2 { color: #fff; font-weight: 900; font-size: 1.05rem; margin: 0; }
.hero p { color: #a5b4c8; font-size: .72rem; margin: .3rem 0 0; line-height: 1.5rem; }

.card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 1.1rem; overflow: hidden; transition: border-color .25s; }
.card:hover { border-color: var(--border-hover); }
.card-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem .85rem; }
.card-head h3 { color: #fff; font-weight: 800; font-size: .84rem; margin: 0; }
.card-head p { color: #94a3b8; font-size: .69rem; margin: .15rem 0 0; }
.card-body { padding: .2rem 1.15rem 1.1rem; }

/* setting row with switch */
.row { display: flex; align-items: center; gap: .8rem; padding: .78rem 0; border-top: 1px solid rgba(255,255,255,.045); cursor: pointer; }
.row:first-child { border-top: 0; }
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; color: #e2e8f0; font-weight: 600; font-size: .77rem; }
.row .rt small { display: block; color: #8b9bb2; font-size: .69rem; line-height: 1.25rem; margin-top: .12rem; }
.row.disabled { opacity: .42; cursor: not-allowed; }

.switch { position: relative; width: 2.6rem; height: 1.45rem; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #243049; border: 1px solid #2c3a57; transition: background .25s var(--ease), border-color .25s; }
.switch .knob { position: absolute; top: .17rem; right: .18rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #cbd5e1; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .3s var(--ease), background .25s; }
.switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked ~ .knob { transform: translateX(-1.15rem); background: #fff; }
.switch input:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--accent-soft); }
.switch input:disabled { cursor: not-allowed; }

/* option tiles (radio cards) */
.tiles { display: grid; gap: .6rem; }
.tile { position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .85rem; border-radius: .95rem; cursor: pointer;
    border: 1px solid var(--border-color); background: rgba(255,255,255,.02); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.tile:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile b { display: block; color: #e2e8f0; font-size: .76rem; font-weight: 700; }
.tile small { display: block; color: #8b9bb2; font-size: .69rem; line-height: 1.2rem; margin-top: .12rem; }
.tile .check { position: absolute; top: .55rem; left: .55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--border-hover);
    display: flex; align-items: center; justify-content: center; font-size: .55rem; color: transparent; transition: all .2s var(--ease); }
.tile:has(input:checked) { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), transparent 80%); }
.tile:has(input:checked) .check { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.05); }
.tile:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* segmented control */
.seg { display: inline-flex; padding: .25rem; gap: .2rem; border-radius: .85rem; background: rgba(0,0,0,.28); border: 1px solid var(--border-color); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: .4rem .85rem; border-radius: .6rem; font-size: .72rem; color: #94a3b8; font-weight: 600; transition: all .2s var(--ease); }
.seg label:hover span { color: #fff; }
.seg input:checked + span { background: var(--accent); color: #fff; box-shadow: 0 2px 6px -2px rgba(0,0,0,.5); }
.seg input:disabled + span { opacity: .4; }

/* range with value pill */
input[type=range].slider { -webkit-appearance: none; appearance: none; height: .35rem; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), #243049 var(--p, 50%)); outline: none; }
input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer; transition: transform .15s; }
input[type=range].slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range].slider:disabled { opacity: .4; }
.vpill { min-width: 3rem; text-align: center; padding: .2rem .5rem; border-radius: .5rem; background: var(--accent-soft); border: 1px solid var(--accent-border); color: #fff; font-size: .7rem; }

/* tag chips (allowlist) */
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .6rem; border-radius: .55rem; background: rgba(var(--c-cyan), .1); border: 1px solid rgba(var(--c-cyan), .3); color: #a5f3fc; font-size: .7rem; animation: pop .25s var(--ease); }
.tag button { color: #67e8f9; width: 1rem; height: 1rem; border-radius: .3rem; display: inline-flex; align-items: center; justify-content: center; }
.tag button:hover { background: rgba(var(--c-rose), .25); color: #fff; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

/* strength meter */
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.meter i { height: .3rem; border-radius: 999px; background: #243049; transition: background .3s; }

/* ---------- nav ---------- */
.nav-btn { position: relative; width: 100%; display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: .85rem; font-weight: 600; color: #94a3b8; border: 1px solid transparent; transition: background .2s, color .2s; }
.nav-btn i { width: 1rem; text-align: center; }
.nav-btn:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-btn.active { color: #fff; background: linear-gradient(90deg, transparent, var(--accent-soft)); border-color: var(--accent-border); }
.nav-btn.active::after { content: ''; position: absolute; right: -.75rem; top: 25%; bottom: 25%; width: 3px; border-radius: 3px; background: var(--accent); }
.nav-btn.active i { color: var(--accent); }
.subtab { padding: .45rem .95rem; border-radius: .7rem; font-size: .75rem; color: #94a3b8; border: 1px solid transparent; transition: all .2s; }
.subtab:hover { color: #fff; }
.subtab.active { color: #fff; background: var(--bg-card); border-color: var(--border-color); }

/* window controls */
.wbtn { width: 2.6rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; border-radius: .5rem; transition: background .15s, color .15s; }
.wbtn:hover { background: rgba(255,255,255,.07); color: #fff; }
.wbtn.close:hover { background: #e11d48; color: #fff; }

/* ---------- motion ---------- */
.enter { animation: enter .45s var(--ease) both; }
.stagger > * { animation: enter .5s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: .05s; } .stagger > *:nth-child(3) { animation-delay: .1s; }
.stagger > *:nth-child(4) { animation-delay: .15s; } .stagger > *:nth-child(5) { animation-delay: .2s; } .stagger > *:nth-child(6) { animation-delay: .25s; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
.spin-slow { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }

.toast-show { transform: translate(-50%, 0) !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- legacy (mobile sheet) ---------- */
.box { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 1rem; overflow: hidden; }
.box-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; background: linear-gradient(90deg, var(--accent-soft), transparent 70%); border-bottom: 1px solid var(--border-color); }
.box-head i.ico { width: 1.9rem; height: 1.9rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: .8rem; }
.box-head h3 { color: #fff; font-weight: 800; font-size: .85rem; margin: 0; }
.box-head p { color: #94a3b8; font-size: .69rem; margin: .15rem 0 0; }
.box-body { padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.opt { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-size: .78rem; color: #e2e8f0; }
.opt input[type=checkbox], .opt input[type=radio] { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--accent); flex-shrink: 0; }

/* ======================= PlusDesk additions ======================= */

/* colored nav / tool icons */
.nc-amber { color: #fbbf24 !important; } .nc-emerald { color: #34d399 !important; } .nc-cyan { color: #22d3ee !important; }
.nc-blue { color: #60a5fa !important; } .nc-rose { color: #f472b6 !important; } .nc-violet { color: #a78bfa !important; }
.nav-btn i[class*="nc-"] { filter: drop-shadow(0 0 6px currentColor); opacity: .95; }
.nav-btn.active i[class*="nc-"] { opacity: 1; }

/* title-bar server switch */
.srv-switch { display: flex; gap: .3rem; padding: .22rem; border-radius: .9rem; background: rgba(0,0,0,.35); border: 1px solid var(--border-color); }
.srv-btn { position: relative; display: flex; align-items: center; gap: .5rem; padding: .25rem .65rem .25rem .5rem; border-radius: .7rem; border: 1px solid transparent; color: #94a3b8; transition: background .2s, border-color .2s, color .2s; }
.srv-btn:hover { background: rgba(255,255,255,.05); color: #e2e8f0; }
.srv-ico { --h: var(--c-blue); width: 1.6rem; height: 1.6rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem;
    color: rgb(var(--h)); background: linear-gradient(145deg, rgba(var(--h), .25), rgba(var(--h), .06)); border: 1px solid rgba(var(--h), .3); }
.srv-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: right; }
.srv-txt b { font-size: .69rem; font-weight: 700; }
.srv-txt small { font-size: .62rem; color: #8392ab; margin-top: .1rem; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #475569; margin-right: .1rem; }
.srv-btn.active { color: #fff; background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.02)); border-color: var(--accent-border); }
.srv-btn.active .srv-dot.ok { background: #34d399; color: #34d399; animation: livepulse 2s infinite; }
.srv-btn.active .srv-dot.wait { background: #fbbf24; }
.srv-btn.active .srv-dot.bad { background: #fb7185; }

/* plan / account card */
.plan-card { position: relative; overflow: hidden; border-radius: 1.15rem; padding: .95rem; border: 1px solid var(--border-color);
    background: linear-gradient(160deg, rgba(var(--pc, var(--c-blue)), .14), rgba(255,255,255,.015) 55%), var(--bg-surface); }
.plan-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, rgba(var(--pc, var(--c-blue)), .7), transparent 45%, rgba(var(--c-violet), .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plan-glow { position: absolute; width: 9rem; height: 9rem; top: -4.5rem; left: -3rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--pc, var(--c-blue)), .35), transparent 70%); filter: blur(6px); pointer-events: none; }
.plan-avatar { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
    background: linear-gradient(145deg, rgb(var(--pc, var(--c-blue))), rgba(var(--c-violet), .9)); box-shadow: 0 6px 16px -6px rgba(var(--pc, var(--c-blue)), .7); }
.plan-card li { display: flex; align-items: center; gap: .45rem; }
.plan-card li i { width: .9rem; font-size: .66rem; color: rgb(var(--pc, var(--c-blue))); }
.plan-bar { background: linear-gradient(90deg, rgb(var(--pc, var(--c-blue))), rgb(var(--c-cyan))); }
.btn-upgrade { color: #1a1205; background: linear-gradient(180deg, #fcd34d, #f59e0b); border: 1px solid #d97706; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 18px -10px rgba(245,158,11,.8); transition: filter .2s, transform .12s; }
.btn-upgrade:hover { filter: brightness(1.06); }
.btn-upgrade:active { transform: translateY(1px); }
.plan-card.paid .btn-upgrade { color: #e2e8f0; background: rgba(255,255,255,.05); border-color: var(--border-color); box-shadow: none; }

/* plan tiers (modal) */
.tier { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; border-radius: 1.2rem; border: 1px solid var(--border-color); background: rgba(255,255,255,.02); transition: transform .25s var(--ease), border-color .25s; }
.tier:hover { transform: translateY(-3px); border-color: var(--border-hover); }
.tier.featured { border-color: rgba(var(--c-amber), .55); background: linear-gradient(170deg, rgba(var(--c-amber), .12), rgba(255,255,255,.02) 60%); box-shadow: 0 18px 40px -24px rgba(var(--c-amber), .7); }
.tier .price { color: #fff; font-weight: 900; font-size: 1.45rem; }
.tier .price small { font-size: .7rem; color: #94a3b8; font-weight: 600; }
.tier ul { display: flex; flex-direction: column; gap: .5rem; font-size: .72rem; color: #cbd5e1; flex: 1; }
.tier li { display: flex; gap: .5rem; align-items: flex-start; }
.tier li i { margin-top: .2rem; font-size: .65rem; }
.tier .ribbon { position: absolute; top: -.65rem; left: 1rem; padding: .15rem .6rem; border-radius: 999px; font-size: .66rem; font-weight: 800; color: #1a1205; background: linear-gradient(180deg, #fcd34d, #f59e0b); }

/* session tools */
.tool-btn { position: relative; width: 2.25rem; height: 2.25rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    background: rgba(255,255,255,.03); border: 1px solid var(--border-color); color: #e2e8f0; transition: background .2s, border-color .2s, transform .12s; }
.tool-btn:hover { background: rgba(255,255,255,.07); border-color: var(--border-hover); }
.tool-btn:active { transform: translateY(1px); }
.tool-btn.on { border-color: var(--accent-border); background: var(--accent-soft); }
.tool-btn.off i { opacity: .4; }
.tool-btn.rec { width: auto; padding: 0 .6rem; border-color: rgba(var(--c-rose), .5); background: rgba(var(--c-rose), .12); }
.tool-btn.rec i { animation: livepulse 1.6s infinite; border-radius: 50%; }
.tool-badge { position: absolute; top: -.3rem; left: -.3rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; font-size: .6rem; font-weight: 800; color: #fff; background: #e11d48; display: inline-flex; align-items: center; justify-content: center; }

/* drawer */
.drawer { position: absolute; top: .6rem; bottom: .6rem; left: .6rem; width: 21rem; z-index: 25; display: flex; flex-direction: column; border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-surface) 95%, transparent); border: 1px solid var(--border-color); backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); transform: translateX(-110%); opacity: 0; transition: transform .35s var(--ease), opacity .25s; pointer-events: none; }
.drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.bubble { max-width: 85%; padding: .5rem .75rem; border-radius: .9rem; font-size: .76rem; line-height: 1.35rem; white-space: pre-wrap; word-break: break-word; -webkit-user-select: text; user-select: text; animation: pop .2s var(--ease); }
.bubble.me { margin-right: auto; background: var(--accent-hover); color: #fff; border-bottom-left-radius: .3rem; }
.bubble.them { margin-left: auto; background: var(--bg-card); color: #e2e8f0; border: 1px solid var(--border-color); border-bottom-right-radius: .3rem; }
.bubble time { display: block; font-size: .62rem; opacity: .75; margin-top: .15rem; }
.xfer { padding: .65rem .75rem; border-radius: .85rem; background: rgba(255,255,255,.025); border: 1px solid var(--border-color); animation: pop .2s var(--ease); }
.xfer .bar { height: .3rem; border-radius: 999px; background: rgba(0,0,0,.4); overflow: hidden; margin-top: .45rem; }
.xfer .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), rgb(var(--c-cyan))); transition: width .25s; }
.xfer.done .bar i { background: linear-gradient(90deg, #10b981, #34d399); }
.xfer.fail .bar i { background: #f43f5e; }

/* servers page */
.srv-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; border-radius: 1.2rem; border: 1px solid var(--border-color); background: var(--bg-surface); transition: border-color .25s, box-shadow .25s; }
.srv-card.active { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), 0 20px 40px -28px var(--accent-glow); }
.srv-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .7rem; color: #94a3b8; padding: .6rem .75rem; border-radius: .8rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.04); }
.srv-meta b { color: #e2e8f0; font-weight: 600; }
.srv-meta i { color: #64748b; margin-left: .2rem; }
.srv-mini { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: 1.1rem; border: 1px solid var(--border-color); background: var(--bg-surface); }
.srv-mini b { display: block; color: #fff; font-size: .78rem; font-weight: 800; }
.srv-mini small { display: block; color: #8b9bb2; font-size: .68rem; line-height: 1.2rem; margin-top: .2rem; }
.srv-mini .srv-state { position: absolute; top: .7rem; left: .7rem; }
.srv-state:empty { display: none; }
.use-btn.active { background: var(--accent-hover); border-color: var(--accent); color: #fff; }

/* mini updater (PlusDev updater design, themed by the accent color) */
.upd-card { width: 100%; max-width: 30rem; border-radius: .9rem; overflow: hidden; background: rgba(15, 23, 42, .92); border: 1px solid rgba(148,163,184,.18); backdrop-filter: blur(20px);
    box-shadow: 0 0 40px -6px var(--accent-glow), 0 30px 60px -20px rgba(0,0,0,.8); transition: border-color .5s, box-shadow .5s; }
.upd-card.ok { border-color: rgba(16,185,129,.45); box-shadow: 0 0 40px -6px rgba(16,185,129,.35), 0 30px 60px -20px rgba(0,0,0,.8); }
.upd-title { height: 2.3rem; display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; background: rgba(15,23,42,.9); border-bottom: 1px solid rgba(51,65,85,.6); font-size: .69rem; color: #cbd5e1; font-weight: 500; }
.upd-badge { width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); transition: all .5s; }
.upd-card.ok .upd-badge { color: #34d399; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); }
.upd-pill { display: flex; align-items: center; padding: .25rem .6rem; border-radius: .55rem; font-size: .69rem; font-family: 'JetBrains Mono', monospace; background: rgba(15,23,42,.9); border: 1px solid rgba(51,65,85,.8); }
.upd-card.ok #updTo { color: #34d399; }
.upd-notes { max-height: 8.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; font-size: .72rem; color: #cbd5e1; padding: .65rem .8rem; border-radius: .7rem; background: rgba(2,6,23,.6); border: 1px solid rgba(51,65,85,.6); }
.upd-notes li { display: flex; gap: .45rem; } .upd-notes li::before { content: "•"; color: var(--accent); }
.upd-track { width: 100%; height: .8rem; padding: .12rem; border-radius: 999px; background: rgba(15,23,42,.9); border: 1px solid rgba(51,65,85,.8); overflow: hidden; }
.upd-fill { position: relative; height: 100%; width: 0; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, var(--accent), #22d3ee, var(--accent)); transition: width .2s; }
.upd-card.ok .upd-fill { background: linear-gradient(90deg, #10b981, #2dd4bf, #34d399); }
.upd-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); animation: shimmer 1.8s infinite linear; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.upd-primary { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: .6rem; font-size: .72rem; font-weight: 700; color: #fff; background: var(--accent-hover); border: 1px solid var(--accent-border); transition: filter .2s, transform .12s, background .4s; }
.upd-primary:hover { filter: brightness(1.1); } .upd-primary:active { transform: scale(.96); }
.upd-primary:disabled { opacity: .5; cursor: not-allowed; }
.upd-card.ok .upd-primary { background: #047857; border-color: rgba(16,185,129,.5); }
.upd-step { display: flex; align-items: center; gap: .6rem; color: #64748b; transition: color .3s; }
.upd-dot { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #334155; flex-shrink: 0; transition: all .3s var(--ease); }
.upd-step.run { color: #e2e8f0; } .upd-step.run .upd-dot { border-color: var(--accent); border-top-color: transparent; animation: spin .7s linear infinite; }
.upd-step.ok { color: #a7f3d0; } .upd-step.ok .upd-dot { border-color: #10b981; background: #10b981 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M4 8.5l2.5 2.5L12 5.5%22 stroke=%22white%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center/80% no-repeat; transform: scale(1.08); }
.upd-step.bad { color: #fda4af; } .upd-step.bad .upd-dot { border-color: #f43f5e; background: #f43f5e; }
.upd-check { width: 4.2rem; height: 4.2rem; }
.upd-check.big { width: 5.5rem; height: 5.5rem; }
.upd-check circle { stroke: #10b981; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .7s var(--ease) forwards; filter: drop-shadow(0 0 8px rgba(16,185,129,.55)); }
.upd-check path { stroke: #34d399; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .55s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* server wizard */
.wz-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,.015); }
.wz-nav { display: flex; align-items: center; gap: .4rem; padding: .7rem 1.3rem; border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,.2); font-size: .72rem; }
.wz-nav .st { display: flex; align-items: center; gap: .45rem; color: #7c8aa3; white-space: nowrap; }
.wz-nav .st b { width: 1.3rem; height: 1.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; background: #1e293b; border: 1px solid #334155; }
.wz-nav .st.cur { color: #fff; font-weight: 700; } .wz-nav .st.cur b { background: var(--accent-hover); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-nav .st.done { color: #34d399; } .wz-nav .st.done b { background: #10b981; border-color: #10b981; color: #052e1c; }
.wz-nav .ln { flex: 1; max-width: 3rem; height: 2px; border-radius: 2px; background: #1e293b; overflow: hidden; }
.wz-nav .ln i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }
.wz-nav .ln.done i { width: 100%; }
.wz-foot { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.3rem; border-top: 1px solid var(--border-color); background: rgba(0,0,0,.25); }
.scan-tile { padding: .75rem .85rem; border-radius: .9rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.05); }
.scan-tile small { display: block; font-size: .66rem; color: #8b9bb2; }
.scan-tile b { display: block; margin-top: .25rem; font-size: .76rem; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- immersive (full-screen) session */
#titlebar, #sidebar, #footer { transition: margin .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
#tab-session { height: calc(100vh - 7.6rem); transition: height .35s; }
body.immersive #titlebar { margin-top: -3rem; transform: translateY(-100%); opacity: 0; pointer-events: none; }
body.immersive #footer { margin-bottom: -1.75rem; opacity: 0; }
body.immersive #sidebar { margin-right: -17rem; transform: translateX(100%); opacity: 0; pointer-events: none; }
body.immersive main > div { padding: .5rem; }
body.immersive #tab-session { height: calc(100vh - 1rem); }
body.immersive.peek-header #titlebar { margin-top: 0; transform: none; opacity: 1; pointer-events: auto; }
body.immersive.peek-header #tab-session { height: calc(100vh - 4rem); }
body.immersive.peek-side #sidebar { margin-right: 0; transform: none; opacity: 1; pointer-events: auto; }
.peek-handle { display: none; position: fixed; z-index: 40; align-items: center; justify-content: center; color: #cbd5e1;
  background: rgba(15, 20, 32, .82); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); transition: background .2s, color .2s, transform .35s; }
.peek-handle:hover { background: var(--accent); color: #fff; }
body.immersive .peek-handle { display: flex; }
.peek-top { top: 0; left: 50%; transform: translateX(-50%); width: 3.2rem; height: 1.15rem; border-top: 0; border-radius: 0 0 .7rem .7rem; font-size: 10px; }
body.peek-header .peek-top { transform: translate(-50%, 3rem) rotate(180deg); border-radius: .7rem .7rem 0 0; }
.peek-right { right: 0; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 3.2rem; border-right: 0; border-radius: .7rem 0 0 .7rem; font-size: 10px; }
body.peek-side .peek-right { transform: translate(-17rem, -50%); }