/* Screenwhere — KAC Design System styles.
Extracted verbatim from the approved prototype (prototype/index.html, tag
prototype-final). Semantic-token theming (light/dark); see prototype/README.md.
NOTE: a few PROTOTYP-harness-only rules (.harness/.watermark/.rolebadge/
.offlinebar) are kept for fidelity but unused by the real shell. */
/* ===== KAC tokens — base palette + LIGHT semantics ===== */
:root{
--green-950:#04330a; --green-900:#0d6614; --green-800:#0f7a17; --green-700:#149a1f;
--green-500:#2dd140; --green-200:#c4ecc8; --green-100:#e8f6ea; --green-50:#f3faf4;
--ink-950:#0a0d0a; --ink-900:#14181a; --ink-800:#1d2324; --ink-700:#2c3437;
--ink-500:#5b6469; --ink-400:#7d878c; --ink-300:#b4bcc0; --ink-200:#d5dadc; --ink-100:#ebeeef; --ink-50:#f5f7f7;
--white:#fff;
--font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-num:"Montserrat Alt1","Inter",system-ui,sans-serif;
--fs-h3:1.35rem; --fs-h4:1.15rem; --fs-base:16px; --fs-sm:.92rem; --fs-xs:.82rem;
--radius-sm:10px; --radius:18px; --radius-lg:26px; --radius-pill:999px;
--ease-out:cubic-bezier(.2,.7,.2,1); --dur:.35s; --dur-fast:.2s;
/* semantic — LIGHT */
--color-fg:var(--ink-900); --color-fg-muted:var(--ink-700); --color-fg-subtle:var(--ink-500);
--color-bg:#fafbfa; --color-bg-soft:#f3f6f3; --color-border:var(--ink-100); --color-border-strong:var(--ink-200);
--color-accent:var(--green-900); --color-accent-2:var(--green-700); --color-accent-bright:var(--green-500);
--color-accent-fg:var(--green-900); --color-accent-bg:var(--green-100); --color-on-accent:#fff;
--login-glow:rgba(13,102,20,.10); /* subtle brand aura behind the login lockup (light) */
--tok-kw:#7c3aed;
--gauge-cap:var(--color-accent-fg); /* power-gauge level dot: a readable green on the light card (near-white would vanish) */
--color-surface:#fff; --color-surface-alt:#eef1ee; --color-ink:var(--ink-950); --color-placeholder:var(--ink-300);
--sk-base:#e4e8e4; --sk-glow:#f4f6f4; /* loading-skeleton block + shimmer glow (light) */
--color-success-bg:var(--green-100); --color-success-fg:var(--green-950); --color-success-border:var(--green-200);
--color-error-bg:#fdecec; --color-error-fg:#6e1818; --color-error-border:#f3c4c4;
--warn-bg:#fbf2dd; --warn-fg:#8a5a00; --warn-border:#f0d9a6; --warn-dot:#d99a2b;
--star:#d99a2b; /* active ★ (favourite device / kept recording) — darker gold for light surfaces */
--priv-edge:#b98f35; --priv-bg:rgba(164,118,26,.07); /* privileged-info band (amber): edge stripe + row/card tint */
--pkteam-fg:#215f9e; --pkteam-bg:#e7f0fa; /* package-ownership "team" tint (own = accent, super = warn amber) */
--color-overlay:rgba(10,15,10,.45);
--shadow-1:0 1px 2px rgba(10,15,10,.04),0 4px 14px rgba(10,15,10,.06);
--shadow-2:0 8px 30px rgba(13,102,20,.08),0 2px 6px rgba(10,15,10,.05);
--shadow-glow:0 16px 40px -16px rgba(13,102,20,.35);
--shadow-focus:0 0 0 4px rgba(13,102,20,.12);
}
/* ===== DARK (re-points semantics; from tokens-dark.css) ===== */
html[data-theme="dark"]{
--color-fg:#eef2f0; --color-fg-muted:#c0c8c4; --color-fg-subtle:#8a938e;
--tok-kw:#c792ea;
--color-bg:#0a0e0c; --color-bg-soft:#101513; --color-border:#252d28; --color-border-strong:#36403b;
--color-accent:#138a1c; --color-accent-2:#19a826; --color-accent-bright:#2dd140;
--color-accent-fg:#41dd51; --color-accent-bg:#13251b; --color-on-accent:#fff;
--login-glow:rgba(45,209,64,.22); /* brand aura behind the login lockup (dark) */
--gauge-cap:#eafff0; /* power-gauge level dot: bright near-white pops on the dark card */
--color-surface:#161c19; --color-surface-alt:#1f2723; --color-ink:#05080a; --color-placeholder:#4b534e;
--sk-base:#232a26; --sk-glow:#2e3631; /* loading-skeleton block + shimmer glow (dark) */
--color-success-bg:#0f2417; --color-success-fg:#7fe08c; --color-success-border:#1e4a2b;
--color-error-bg:#2a1413; --color-error-fg:#ff9d9d; --color-error-border:#5a2625;
--warn-bg:#2a2310; --warn-fg:#e6b450; --warn-border:#4a3d18; --warn-dot:#e0a23a;
--star:#f5c542;
--priv-edge:#a98a4a; --priv-bg:rgba(224,180,92,.07);
--pkteam-fg:#7fb4ec; --pkteam-bg:#152638;
--color-overlay:rgba(0,0,0,.66);
--shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.5);
--shadow-2:0 12px 38px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4);
--shadow-glow:0 18px 46px -14px rgba(45,209,64,.4);
--shadow-focus:0 0 0 4px rgba(45,209,64,.18); color-scheme:dark;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){
--color-fg:#eef2f0; --color-fg-muted:#c0c8c4; --color-fg-subtle:#8a938e;
--tok-kw:#c792ea;
--color-bg:#0a0e0c; --color-bg-soft:#101513; --color-border:#252d28; --color-border-strong:#36403b;
--color-accent:#138a1c; --color-accent-2:#19a826; --color-accent-bright:#2dd140;
--color-accent-fg:#41dd51; --color-accent-bg:#13251b; --color-on-accent:#fff;
--login-glow:rgba(45,209,64,.22); /* brand aura behind the login lockup (dark) */
--gauge-cap:#eafff0; /* power-gauge level dot: bright near-white pops on the dark card */
--color-surface:#161c19; --color-surface-alt:#1f2723; --color-ink:#05080a; --color-placeholder:#4b534e;
--sk-base:#232a26; --sk-glow:#2e3631; /* loading-skeleton block + shimmer glow (dark) */
--color-success-bg:#0f2417; --color-success-fg:#7fe08c; --color-success-border:#1e4a2b;
--color-error-bg:#2a1413; --color-error-fg:#ff9d9d; --color-error-border:#5a2625;
--warn-bg:#2a2310; --warn-fg:#e6b450; --warn-border:#4a3d18; --warn-dot:#e0a23a;
--star:#f5c542;
--priv-edge:#a98a4a; --priv-bg:rgba(224,180,92,.07);
--pkteam-fg:#7fb4ec; --pkteam-bg:#152638;
--shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.5);
--shadow-2:0 12px 38px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4);
--shadow-glow:0 18px 46px -14px rgba(45,209,64,.4); --shadow-focus:0 0 0 4px rgba(45,209,64,.18); color-scheme:dark;
}}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{ font-family:var(--font-ui); font-size:var(--fs-base); line-height:1.55; color:var(--color-fg);
background:var(--color-bg); -webkit-font-smoothing:antialiased; transition:background .25s, color .25s; }
::selection{ background:var(--color-accent); color:#fff; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums; }
.kicker{ font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-fg); }
.muted{ color:var(--color-fg-subtle); }
.t-lede{ font-size:1.05rem; color:var(--color-fg-muted); line-height:1.5; }
.t-h3{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.t-small{ font-size:var(--fs-sm); color:var(--color-fg-muted); }
.tlink{ color:var(--color-accent-fg); font-weight:600; text-decoration:none; }
.tlink:hover{ text-decoration:underline; }
/* ===== prototype harness (NOT part of design) ===== */
.harness{ position:fixed; top:0; left:0; right:0; height:42px; z-index:1000; display:flex; align-items:center; gap:10px;
padding:0 12px; background:#05080a; color:#9aa39d; font:12px/1 var(--font-ui); border-bottom:1px solid #1b231e; }
.harness .tag{ background:#13251b; color:#41dd51; padding:3px 7px; border-radius:6px; font-weight:600; }
.harness b{ color:#fff; } .harness .spacer{ flex:1; }
.harness select,.harness .seg button{ background:#161c19; color:#eef2f0; border:1px solid #2c3437; font:12px var(--font-ui); }
.harness select{ border-radius:7px; padding:5px 8px; }
.harness .seg{ display:flex; border:1px solid #2c3437; border-radius:7px; overflow:hidden; }
.harness .seg button{ border:0; border-right:1px solid #2c3437; padding:5px 9px; cursor:pointer; }
.harness .seg button:last-child{ border-right:0; }
.harness .seg button.on{ background:#138a1c; color:#fff; }
.harness .hbtn{ background:#161c19; color:#eef2f0; border:1px solid #2c3437; border-radius:7px; padding:5px 9px; cursor:pointer; font:12px var(--font-ui); }
@media (max-width:600px){ .harness .hide-sm{ display:none; } }
/* ===== app shell ===== */
.app{ max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.screen{ display:none; flex:1; flex-direction:column; } .screen.active{ display:flex; }
header.bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:14px 18px;
background:color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter:saturate(160%) blur(12px);
border-bottom:1px solid var(--color-border); }
header.bar h1{ font-size:var(--fs-h4); font-weight:800; letter-spacing:-.01em; margin:0; }
header.bar .sub{ color:var(--color-fg-subtle); font-size:var(--fs-xs); }
.grow{ flex:1; }
.back,.iconbtn{ background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg);
border-radius:12px; cursor:pointer; }
.back{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; font:600 14px var(--font-ui); color:var(--color-accent-fg); }
.iconbtn{ width:38px; height:38px; display:grid; place-items:center; }
.iconbtn.power{ color:var(--color-accent-fg); }
.iconbtn.avatar{ border-radius:50%; background:var(--color-accent-bg); color:var(--color-accent-fg); border-color:transparent; font-weight:700; font-size:13px; position:relative; }
/* avatar = the single account/settings control: initials by default, morphs to a
spinning gear on hover; clicking it goes straight to Settings */
.iconbtn.avatar .ini, .iconbtn.avatar .gear{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity .18s ease; }
.iconbtn.avatar .gear{ opacity:0; }
.iconbtn.avatar:hover .ini, .iconbtn.avatar:focus-visible .ini{ opacity:0; }
.iconbtn.avatar:hover .gear, .iconbtn.avatar:focus-visible .gear{ opacity:1; animation:gear-spin .7s ease; }
@keyframes gear-spin{ from{ transform:rotate(-150deg); } to{ transform:rotate(0); } }
body.admin:not(.superadmin) .avatar{ outline:2px dashed var(--color-accent-bright); outline-offset:2px; }
body.superadmin .avatar{ outline:2px solid var(--color-accent-bright); outline-offset:2px; box-shadow:0 0 12px 2px rgba(45,209,64,.55); }
/* account dropdown on avatar hover */
.account{ position:relative; display:inline-flex; }
.acctmenu{ position:absolute; right:0; top:calc(100% + 8px); min-width:190px; z-index:50; display:none;
background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-2); padding:6px; }
.acctmenu::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
.account:hover .acctmenu, .acctmenu:hover, .account.open .acctmenu{ display:block; }
.hdr-actions{ display:inline-flex; align-items:center; gap:8px; }
.kebab{ display:none; }
@media (max-width:560px){ .hdr-actions{ display:none; } .kebab{ display:inline-flex; } }
.searchwrap .clearsearch{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:0; border-radius:50%;
background:var(--color-surface-alt); color:var(--color-fg-subtle); cursor:pointer; display:none; place-items:center; font-size:15px; line-height:1; }
.searchwrap.has-text .clearsearch{ display:grid; }
.acctmenu .role{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-subtle); padding:8px 10px 6px; }
.acctitem{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--color-fg); padding:9px 10px; border-radius:9px; font:600 14px var(--font-ui); cursor:pointer; }
.acctitem:hover{ background:var(--color-surface-alt); }
.acctitem.danger{ color:var(--color-error-fg); }
.mark{ width:30px; height:30px; border-radius:8px; flex:none; }
.brandrow{ display:flex; align-items:center; gap:10px; } .brandrow .name{ font-weight:800; letter-spacing:-.01em; }
/* two-tone brand wordmark: "screen" in ink, "where" in the brand green (theme-aware) */
.wordmark{ font-weight:800; letter-spacing:-.01em; } .wordmark .wm-accent{ color:var(--color-accent-fg); }
/* login: the brand is the hero — by far the biggest logo in the app. A stacked lockup (bare mark
over the two-line wordmark) per assets/screenwhere-logo-handoff.md §5. Theme-aware via CSS vars
(mark + "where" = accent green, "screen" = fg); fluid clamp() so it's huge on desktop and scales
down on a phone. */
.sw-login{ display:flex; flex-direction:column; align-items:center; gap:clamp(14px,3vw,26px); position:relative; }
/* soft ambient brand glow behind the lockup (from the design mock — not part of the logo itself);
centred on the mark, theme-aware via --login-glow, sits behind the text on the page canvas. */
.sw-login::before{ content:""; position:absolute; z-index:-1; pointer-events:none;
left:50%; top:34%; transform:translate(-50%,-50%);
width:min(760px,128vw); height:min(600px,82vh);
background:radial-gradient(closest-side, var(--login-glow), transparent 70%); }
.sw-login .sw-login-mark{ width:clamp(84px,15vw,120px); height:auto; color:var(--color-accent-fg); flex:none; }
.sw-login .sw-login-word{ display:flex; flex-direction:column; align-items:center; line-height:.9;
font-weight:800; letter-spacing:-.035em; font-size:clamp(46px,10vw,84px); color:var(--color-fg); }
.sw-login .sw-login-word .wm-accent{ color:var(--color-accent-fg); }
.body{ padding:18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.center{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; flex:1; padding:30px 24px; }
.pill{ font-size:var(--fs-xs); padding:4px 11px; border-radius:var(--radius-pill); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.pill.free{ background:var(--color-success-bg); color:var(--color-success-fg); border:1px solid var(--color-success-border); }
.pill.inuse{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-border); }
.pill.offline{ background:var(--color-surface-alt); color:var(--color-fg-subtle); border:1px solid var(--color-border); }
.pill.blocked{ background:var(--color-error-bg); color:var(--color-error-fg); border:1px solid var(--color-error-border); }
.dot.blocked{ background:var(--color-error-fg); }
.pill .sg{ width:13px; height:13px; flex:none; }
.sg.pulse{ animation:sgpulse 1.4s ease-in-out infinite; }
@keyframes sgpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.banner.blocked{ background:var(--color-error-bg); color:var(--color-error-fg); border:1px solid var(--color-error-border); }
.pill.mine{ background:var(--color-accent-bg); color:var(--color-accent-fg); border:1px solid transparent; }
/* a held device's pill morphs "Používáte" → "Uvolnit" (release) on hover */
.pill .pn, .pill .pr{ display:inline-flex; align-items:center; gap:7px; }
.pill.releasable{ cursor:pointer; transition:.16s var(--ease-out); }
.pill.releasable .pr{ display:none; }
.pill.releasable:hover{ background:var(--color-error-bg); color:var(--color-error-fg); }
.pill.releasable:hover .pn{ display:none; }
.pill.releasable:hover .pr{ display:inline-flex; }
.dot.mine{ background:var(--color-accent-bright); animation:minepulse 1.8s ease-out infinite; }
@keyframes minepulse{ 0%{ box-shadow:0 0 0 0 rgba(45,209,64,.55); } 70%,100%{ box-shadow:0 0 0 5px rgba(45,209,64,0); } }
.tile .thumb .lkbar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.12); }
.tile .thumb .lkbar > i{ display:block; height:100%; background:var(--color-accent-bright); transition:width 1s linear; }
.banner.mine{ background:var(--color-accent-bg); color:var(--color-accent-fg); border:1px solid transparent; display:flex; align-items:center; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.dot.free{ background:var(--color-accent-bright); } .dot.inuse{ background:var(--warn-dot); } .dot.offline{ background:var(--color-fg-subtle); }
/* card availability states */
.set.busy,.set.offline,.tile.busy,.tile.offline{ opacity:.92; }
.set.offline,.tile.offline{ opacity:.6; }
.lock{ width:14px; height:14px; vertical-align:-2px; }
/* detail banner + locked pane */
.banner{ display:none; gap:9px; align-items:center; padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; margin:14px 18px 0; }
.banner.show{ display:flex; } .banner svg{ width:18px; height:18px; flex:none; }
.banner.inuse{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-border); }
.banner.offline{ background:var(--color-surface-alt); color:var(--color-fg-subtle); border:1px solid var(--color-border); }
.pane{ position:relative; }
.pane.locked > *:not(.panelock){ opacity:.38; pointer-events:none; filter:grayscale(.4); }
.panelock{ position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center;
gap:13px; text-align:center; padding:22px; background:color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter:blur(2px); border-radius:var(--radius); }
.panelock.show{ display:flex; }
.panelock .msg{ font-size:.92rem; color:var(--color-fg-muted); max-width:32ch; display:flex; gap:8px; align-items:center; justify-content:center; }
.panelock .btn{ max-width:280px; }
/* opaque camera lock — no frame leaks when in use by non-team / offline */
.camlock{ position:absolute; inset:0; z-index:2; display:none; flex-direction:column; align-items:center; justify-content:center;
gap:9px; text-align:center; padding:18px; background:var(--color-ink); color:var(--color-fg-subtle); font-size:.9rem; }
.camlock.show{ display:flex; } .camlock svg{ width:26px; height:26px; color:var(--color-fg-subtle); }
/* phone remote-tab camera PiP (mockups/mobile-pass.html, floating variant — owner pick
2026-07-10): FLOATS over the remote, default top-right, drag-snaps to any corner
(persisted per set), dismissible per set; hidden entirely ≥740 via .mobile-only */
.pip{ position:fixed; width:150px; aspect-ratio:16/9; border-radius:14px; z-index:70;
overflow:hidden; border:1px solid var(--color-border-strong); background:#000;
box-shadow:0 12px 34px rgba(0,0,0,.55); touch-action:none; cursor:grab;
transition:left .18s ease, top .18s ease; }
.pip.drag{ transition:none; cursor:grabbing; }
.pip[hidden]{ display:none; }
.pip video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.pip .pipbtn{ position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:8px; border:0;
background:rgba(0,0,0,.55); color:#d7ddd8; display:grid; place-items:center; font-size:12px; cursor:pointer; z-index:1; }
.pip .pipbtn:hover{ background:rgba(0,0,0,.8); color:#fff; }
.pip .pipbtn.go{ top:auto; bottom:5px; }
.pipchip{ display:block; margin:0 0 12px auto; border:1px dashed var(--color-border-strong); color:var(--color-fg-muted);
background:none; border-radius:var(--radius-pill); padding:7px 14px; font:600 12.5px var(--font-ui); cursor:pointer; }
.pipchip[hidden]{ display:none; }
.pipchip:hover{ color:var(--color-accent-fg); border-color:var(--color-accent-2); }
/* teams admin */
.teamname{ font-weight:700; letter-spacing:-.01em; margin-bottom:4px; }
.members{ display:flex; flex-wrap:wrap; gap:8px; }
.memb{ display:inline-flex; align-items:center; gap:6px; background:var(--color-surface-alt); border:1px solid var(--color-border);
border-radius:var(--radius-pill); padding:5px 6px 5px 12px; font-size:13px; }
.memb button{ background:none; border:0; color:var(--color-fg-subtle); cursor:pointer; font-size:15px; line-height:1; padding:0 4px; }
.memb button:hover{ color:var(--color-error-fg); }
.addmemb{ display:flex; gap:8px; margin-top:12px; }
.addmemb input{ flex:1; background:var(--color-surface); border:1px solid var(--color-border-strong); color:var(--color-fg);
border-radius:var(--radius-pill); padding:9px 14px; font:14px var(--font-ui); }
.addmemb input:focus{ outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
.addmemb .add{ background:var(--color-accent-bg); color:var(--color-accent-fg); border:0; border-radius:var(--radius-pill); padding:0 16px; font:600 14px var(--font-ui); cursor:pointer; }
.teamhead{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.teamedit{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.teamedit input{ flex:1; padding:8px 12px; border:1.5px solid var(--color-accent); border-radius:8px; background:var(--color-accent-bg); color:var(--color-fg); font:600 14px var(--font-ui); outline:none; }
.teamedit button{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; cursor:pointer; flex:none; }
.teamedit .okrn{ background:var(--color-accent); border:0; }
.teamedit .cancelrn{ background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg); font-size:18px; line-height:1; }
.teamhead .teamname{ margin-bottom:0; }
.teamsub{ font-size:12px; color:var(--color-fg-subtle); margin:2px 0 10px; }
.renbtn{ background:none; border:0; color:var(--color-fg-subtle); cursor:pointer; display:grid; place-items:center; padding:2px; }
.renbtn:hover{ color:var(--color-accent-fg); }
.mlist{ display:flex; flex-direction:column; }
.mrow{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--color-border); }
.mrow:last-child{ border-bottom:0; }
.mrow .mem{ flex:1; font-size:14px; word-break:break-all; }
.mrow .adm{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid var(--color-border); background:none; color:var(--color-fg-subtle); }
.mrow .adm.on{ background:var(--color-accent-bg); color:var(--color-accent-fg); border-color:transparent; }
.mrow .adm:hover{ border-color:var(--color-border-strong); color:var(--color-fg); }
.mrow .adm.on:hover{ border-color:transparent; color:var(--color-accent-fg); filter:brightness(1.04); }
.mrow .rm{ background:none; border:0; color:var(--color-fg-subtle); cursor:pointer; font-size:17px; line-height:1; padding:0 4px; }
.mrow .rm:hover{ color:var(--color-error-fg); }
/* incoming-request notification sheet (recipient side) + leave/confirm/scan dialogs */
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:1100; display:none; }
.sheet.show{ display:block; }
/* dim backdrop so the bottom-sheet dialogs clearly stand out. NB: no backdrop-filter
blur — a full-screen blur is re-rasterised every frame over the live camera video
behind it, which pegs the GPU/CPU on weaker machines. A solid dim reads just as well. */
.sheet.show::before{ content:""; position:fixed; inset:0; z-index:-1; background:rgba(0,0,0,.55);
animation:sheetFade .22s var(--ease-out) both; }
@keyframes sheetFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sheetUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.sheet .scard{ max-width:480px; margin:0 auto; background:var(--color-surface); border:1px solid var(--color-border);
border-bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:18px; box-shadow:var(--shadow-2); animation:sheetUp .26s var(--ease-out) both; }
.sheet .srow{ display:flex; align-items:center; gap:12px; }
.sheet .sava{ width:40px; height:40px; border-radius:50%; background:var(--color-accent-bg); color:var(--color-accent-fg);
display:grid; place-items:center; font-weight:700; flex:none; }
.sheet .chan{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:8px; }
.sheet .actions{ display:flex; gap:10px; margin-top:14px; } .sheet .actions .btn{ flex:1; }
/* toast */
.toast{ position:fixed; left:50%; bottom:74px; transform:translateX(-50%); z-index:1200; background:var(--color-ink);
color:#fff; padding:11px 16px; border-radius:var(--radius-pill); font-size:.9rem; box-shadow:var(--shadow-2); display:none; max-width:90%; text-align:center; }
.toast.show{ display:block; }
/* audit */
.audit .arow{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--color-border); font-size:14px; align-items:baseline; }
.audit .arow:last-child{ border-bottom:0; }
.audit .aday{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-subtle); padding:12px 0 2px; }
.audit .at{ color:var(--color-fg-subtle); font-size:var(--fs-xs); min-width:44px; flex:none; }
.audit .aset{ color:var(--color-fg-subtle); font-size:var(--fs-xs); }
.audit .aoff{ color:var(--color-danger, #e0457b); font-weight:600; }
.audit .aon{ color:var(--color-ok, #41dd51); font-weight:600; }
/* set-health dashboard */
.hsum{ display:flex; gap:8px; margin:2px 0 4px; }
.hpill{ font-size:var(--fs-xs); font-weight:600; padding:4px 10px; border-radius:999px; }
.hpill.on{ color:var(--color-ok, #41dd51); background:color-mix(in srgb, var(--color-ok, #41dd51) 14%, transparent); }
.hpill.off{ color:var(--color-danger, #e0457b); background:color-mix(in srgb, var(--color-danger, #e0457b) 14%, transparent); }
.hrow{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--color-border); }
.hrow:last-child{ border-bottom:0; }
.hrow .rt{ flex:1; }
.hrow .rs{ color:var(--color-fg-subtle); font-size:var(--fs-xs); margin-top:2px; }
/* Set-detail Záznamy tab list: clearer day separators + tidier, hoverable rows */
#recList .aday{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--color-fg-subtle); padding:18px 2px 7px; }
#recList .aday::after{ content:''; flex:1; height:1px; background:var(--color-border); }
#recList .aday:first-child{ padding-top:4px; }
#recList .hrow{ padding:10px 10px; border-bottom:0; border-radius:10px; transition:background .12s ease; }
#recList .hrow + .hrow{ margin-top:2px; }
#recList .hrow:hover{ background:var(--color-bg-soft); }
#recList .hrow .rt > div:first-child{ font-weight:600; font-size:15px; }
.hdot{ width:10px; height:10px; border-radius:50%; flex:none; }
.hdot.on{ background:var(--color-ok, #41dd51); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-ok, #41dd51) 22%, transparent); }
.hdot.off{ background:var(--color-danger, #e0457b); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-danger, #e0457b) 22%, transparent); }
.hstat{ font-size:var(--fs-xs); font-weight:600; }
.hstat.on{ color:var(--color-ok, #41dd51); }
.hstat.off{ color:var(--color-danger, #e0457b); }
/* recordings key-track */
#recKeys{ margin:2px 0 10px; max-height:220px; overflow:auto; }
#recKeys .krow{ display:flex; gap:12px; padding:6px 0; border-bottom:1px solid var(--color-border); font-size:13px; align-items:baseline; }
#recKeys .krow:last-child{ border-bottom:0; }
/* scenario replay (Scénář sub-tab) — steps list + the glyph pop on the camera stage */
.rsetup{ font-size:var(--fs-xs); color:var(--color-fg-muted); background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; }
#scenSteps .krow{ display:flex; gap:12px; align-items:center; padding:8px; border-radius:8px; font-size:14px; cursor:pointer; }
#scenSteps .krow:hover{ background:var(--color-surface-alt); }
#scenSteps .krow.start{ box-shadow:inset 3px 0 0 var(--color-accent-bright); }
#scenSteps .krow.on{ background:var(--color-accent-bg); }
#scenSteps .krow .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
#scenSteps .krow svg{ flex:none; width:16px; height:16px; color:var(--color-fg-muted); }
#scenSteps .krow .at{ color:var(--color-fg-subtle); font-size:var(--fs-xs); min-width:74px; font-variant-numeric:tabular-nums; }
#scenSteps .krow .k{ font-weight:700; }
#scenSteps .krow .who{ color:var(--color-fg-subtle); font-size:var(--fs-xs); margin-left:auto; }
#scenSteps .krow .okt{ font-weight:800; font-size:13px; color:var(--color-fg-muted); }
#scenSteps .krow.flash{ animation:scenflash .9s ease-out; }
@keyframes scenflash{ 0%{ background:var(--color-accent-bg); } 100%{ background:transparent; } }
.kpop{ position:absolute; left:50%; bottom:14%; transform:translateX(-50%) scale(.6); opacity:0; display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none; z-index:6; }
.kpop svg{ width:40px; height:40px; filter:drop-shadow(0 0 9px currentColor); }
.kpop .klabel{ font-size:13px; font-weight:700; color:#fff; opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.kpop.go{ animation:kpopgo 1.8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes kpopgo{ 0%{ opacity:0; transform:translateX(-50%) scale(.6) translateY(8px); } 9%{ opacity:1; transform:translateX(-50%) scale(1.1) translateY(0); } 16%{ transform:translateX(-50%) scale(1); } 72%{ opacity:1; transform:translateX(-50%) scale(1); } 100%{ opacity:0; transform:translateX(-50%) scale(1) translateY(-12px); } }
/* scenario target picker (choose which TV to replay onto) */
.scenpick{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); }
/* override the global bottom-sheet `.sheet` (display:none; position:fixed bottom) so the
centred picker card is visible and flow-positioned inside the flex `.scenpick` overlay */
.scenpick .sheet{ display:block; position:static; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:18px; width:min(420px,92vw); max-height:80vh; overflow:auto; box-shadow:0 16px 50px rgba(0,0,0,.4); }
.scenpick .tvopt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px; border-radius:10px; border:1px solid var(--color-border); background:var(--color-bg-soft); margin-top:8px; cursor:pointer; color:var(--color-fg); }
.scenpick .tvopt:hover{ border-color:var(--color-accent-bright); }
.scenpick .tvopt .on{ margin-left:auto; font-size:var(--fs-xs); color:var(--color-fg-subtle); white-space:nowrap; }
.scenpick .tvopt[disabled]{ opacity:.45; cursor:not-allowed; }
/* Camera calibration overlay (device definition — calibrate.js) */
.calib-sheet{ width:min(760px,94vw) !important; }
.calib-step{ display:flex; gap:11px; margin-top:14px; }
.calib-dot{ flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--color-border-strong); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--color-fg-subtle); background:var(--color-surface-alt); }
.calib-live{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--color-border-strong); background:#000; min-height:120px; }
.calib-live img{ display:block; width:100%; height:auto; }
.calib-live canvas{ position:absolute; inset:0; cursor:crosshair; }
/* --hc = the handle's corner colour (set per handle in calibrate.js); a white ring
keeps it visible over any hue disc. */
.calib-hnd{ position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
background:rgba(255,255,255,.18); border:2.5px solid var(--hc,#41dd51); cursor:grab; touch-action:none; z-index:5;
box-shadow:0 0 0 1.5px rgba(255,255,255,.8); }
.calib-hnd:active{ cursor:grabbing; background:rgba(255,255,255,.35); }
.calib-hnd::after{ content:""; position:absolute; inset:8px; border-radius:50%; background:var(--hc,#41dd51);
box-shadow:0 0 0 1px rgba(255,255,255,.9); }
.calib-badge{ position:absolute; top:8px; left:8px; border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; background:rgba(0,0,0,.55); color:#e8c34a; border:1px solid rgba(232,195,74,.4); }
.calib-badge.ok{ color:var(--color-accent-fg); border-color:var(--color-accent-fg); }
.calib-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.calib-chip{ border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; border:1px solid var(--color-border-strong); color:var(--color-fg-muted); }
.calib-chip.ok{ background:var(--color-accent-bg); color:var(--color-accent-fg); border-color:var(--color-accent-fg); }
.calib-chip.off{ background:color-mix(in srgb, var(--color-error-fg) 12%, var(--color-surface)); color:var(--color-error-fg); border-color:currentColor; }
.calib-chip.tolhint{ border-style:dashed; color:var(--color-fg-subtle); }
.calib-done{ margin-top:12px; padding:12px 14px; border:1px solid var(--color-accent-fg); background:var(--color-accent-bg); border-radius:12px; color:var(--color-fg); font-size:13.5px; }
/* Scénář target picker: section labels + richer device cards, source ("stay here") highlighted */
.scenpick .sp-sec{ font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--color-fg-subtle); margin:14px 2px 2px; }
.scenpick .sp-ic{ display:flex; flex:0 0 34px; width:34px; height:34px; align-items:center; justify-content:center; border-radius:9px; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg-subtle); }
.scenpick .sp-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.scenpick .sp-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scenpick .sp-sub{ font-size:var(--fs-xs); color:var(--color-fg-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scenpick .tvopt.src{ border-color:var(--color-accent-bright); background:color-mix(in srgb, var(--color-accent-bright) 9%, var(--color-bg-soft)); }
.scenpick .tvopt.src .sp-ic{ border-color:var(--color-accent-bright); color:var(--color-accent-fg); background:var(--color-accent-bg); }
.scenpick .tvopt.src .sp-tag{ margin-left:auto; font-size:var(--fs-xs); font-weight:700; color:var(--color-accent-fg); white-space:nowrap; }
.scenpick input{ background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:10px; padding:9px 12px; color:var(--color-fg); font:inherit; }
/* ── Scénáře SCREEN (scenario library + multi-TV runner, backlog #4) ── */
#scnLibView .filterbar input{ flex:1; min-width:160px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:9px 12px; color:var(--color-fg); font:inherit; }
.scnrow{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--color-border); cursor:pointer; }
.scnrow:last-child{ border-bottom:0; }
.scnrow:hover .scn-name{ color:var(--color-accent-fg); }
.scn-ic{ display:flex; flex:0 0 38px; width:38px; height:38px; align-items:center; justify-content:center; border-radius:11px; background:var(--color-accent-bg); color:var(--color-accent-fg); }
.scn-ic.big{ flex-basis:44px; width:44px; height:44px; }
.scn-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.scn-name{ font-weight:650; letter-spacing:-.01em; transition:color .12s; }
.scn-meta{ font-size:var(--fs-xs); color:var(--color-fg-subtle); display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.scn-meta .star{ color:#d39a2a; }
.scn-tag{ font-size:11px; border:1px solid var(--color-border-strong); border-radius:999px; padding:1px 8px; color:var(--color-fg-muted);
cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.scn-tag:hover, .scn-tag:focus-visible{ border-color:var(--color-accent-fg); color:var(--color-accent-fg); background:var(--color-accent-bg); }
/* origin badge on unified library rows (audit batch D: one list, two sources) */
.scn-src{ font-size:11px; border-radius:999px; padding:1px 8px; background:var(--color-surface-alt); color:var(--color-fg-subtle); }
.scn-team{ font-size:11px; border:1px solid var(--color-border-strong); border-radius:999px; padding:1px 8px; color:var(--color-accent-fg); }
.scn-edit{ flex:none; width:32px; height:32px; }
.scn-chev{ color:var(--color-fg-subtle); font-size:20px; flex:none; }
.scn-runhead{ display:flex; align-items:center; gap:13px; margin-bottom:6px; }
.scn-rname{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.scn-rmeta{ font-size:var(--fs-xs); margin-top:2px; }
.seclbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-subtle); margin:16px 0 6px; }
.scn-tvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media(max-width:560px){ .scn-tvgrid{ grid-template-columns:1fr; } }
.scnopt{ display:flex; align-items:center; gap:11px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:12px; padding:11px 13px; cursor:pointer; transition:border-color .12s, background .12s; }
.scnopt:hover{ border-color:var(--color-border-strong); }
.scnopt.sel{ border-color:var(--color-accent-fg); background:var(--color-accent-bg); }
.scnopt.disabled{ opacity:.5; cursor:not-allowed; }
.scnopt .cbox{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--color-border-strong); flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--color-ink); }
.scnopt.sel .cbox{ background:var(--color-accent-bright); border-color:var(--color-accent-bright); }
.scnopt .tn{ font-weight:600; font-size:.95rem; }
.scnopt .ts{ font-size:11px; color:var(--color-fg-subtle); }
.scn-orig{ font-size:10px; font-weight:700; color:var(--color-accent-fg); border:1px solid var(--color-accent-fg); border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:1px; }
.scn-badge{ margin-left:auto; font-size:11px; border-radius:999px; padding:2px 9px; white-space:nowrap; flex:none; }
.scn-badge.free{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.scn-badge.mine{ background:color-mix(in srgb, #3a8dff 16%, var(--color-surface)); color:#3a8dff; }
.scn-badge.busy{ background:color-mix(in srgb, #d39a2a 14%, var(--color-surface)); color:#d39a2a; }
.scn-badge.off{ background:var(--color-surface-alt); color:var(--color-fg-subtle); }
.scn-runbar{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.scn-runbar .btn{ width:auto; padding:10px 16px; }
.scnrr{ background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:12px; padding:12px 14px; margin:9px 0; }
.scnrr .top{ display:flex; align-items:center; gap:10px; }
.scnrr .tn{ font-weight:650; }
.scn-st{ margin-left:auto; font-size:var(--fs-xs); padding:3px 10px; border-radius:999px; white-space:nowrap; }
.scn-st.idle{ background:var(--color-surface-alt); color:var(--color-fg-subtle); }
.scn-st.run{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.scn-st.done{ background:var(--color-accent-bg); color:var(--color-accent-bright); }
.scn-st.err{ background:color-mix(in srgb, #d6453f 16%, var(--color-surface)); color:#d6453f; }
.scnrr .prog{ height:6px; border-radius:999px; background:var(--color-surface-alt); margin-top:9px; overflow:hidden; }
.scnrr .prog>i{ display:block; height:100%; width:0; background:var(--color-accent-bright); transition:width .25s; }
.scnrr .now{ font-size:var(--fs-xs); color:var(--color-fg-muted); margin-top:7px; display:flex; align-items:center; gap:7px; min-height:18px; }
.scnrr .kkey{ display:inline-flex; align-items:center; gap:5px; background:var(--color-surface-alt); border-radius:7px; padding:2px 8px; font-size:11px; }
.scnrr .kkey svg{ width:14px; height:14px; }
.scnrr .kdot{ width:8px; height:8px; border-radius:50%; flex:none; }
.scn-stopx{ background:none; border:0; color:var(--color-fg-subtle); cursor:pointer; font:inherit; font-size:var(--fs-xs); }
.scn-stopx:hover{ color:#d6453f; }
/* recordings list SCREEN (Záznamy — aggregate) */
#recFilters input{ flex:1; min-width:160px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:9px 12px; color:var(--color-fg); font:inherit; }
.fieldpick{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-xs); margin:10px 0 2px; }
.fieldpick .chip{ border:1px solid var(--color-border-strong); background:transparent; color:var(--color-fg-subtle); border-radius:999px; padding:5px 11px; cursor:pointer; font-size:var(--fs-xs); }
.fieldpick .chip.on{ border-color:var(--color-accent-fg); color:var(--color-accent-fg); background:var(--color-accent-bg); }
.recoff{ font-size:var(--fs-xs); color:#d39a2a; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:9px; padding:8px 12px; margin:8px 0; }
/* storage-usage banner (own quota bar + super grand-total/disk) */
.recusage{ margin:12px 0 2px; padding:11px 14px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:11px; }
.recusage[hidden]{ display:none; }
.ru-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ru-lbl{ font-size:var(--fs-xs); font-weight:600; color:var(--color-fg-muted); }
.ru-val{ font-size:var(--fs-xs); color:var(--color-fg); font-variant-numeric:tabular-nums; }
.ru-bar{ height:7px; border-radius:4px; background:var(--color-surface-alt); overflow:hidden; margin-top:7px; }
.ru-bar > i{ display:block; height:100%; background:var(--color-accent-bright); transition:width .3s ease; }
.ru-bar > i.warn{ background:var(--warn-dot); }
.ru-bar > i.over{ background:#e0635e; }
.ru-admin{ font-size:11.5px; margin-top:8px; }
/* day section label (Dnes / Včera) — small, spaced uppercase divider in both list + grid */
#recAggList .aday{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--color-fg-subtle); padding:18px 2px 8px; }
#recAggList .aday:first-child{ padding-top:4px; }
.recrow{ display:flex; gap:13px; align-items:center; padding:13px 0; border-bottom:1px solid var(--color-border); border-radius:8px; transition:background .12s ease; }
.recrow:last-child{ border-bottom:0; }
.recrow.selected{ background:var(--color-accent-bg); }
.recsel{ display:flex; align-items:center; flex:none; padding:0 2px 0 4px; cursor:pointer; }
.recsel input{ width:18px; height:18px; accent-color:var(--color-accent-fg); cursor:pointer; }
.recsel input[disabled]{ opacity:.3; cursor:not-allowed; }
/* bulk-action bar (shown in select mode) */
.recselbar{ display:flex; align-items:center; gap:10px; margin:8px 0 2px; padding:9px 13px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:10px; font-size:var(--fs-xs); }
.recselbar .btn{ width:auto; padding:6px 13px; font-size:var(--fs-xs); } /* compact — the default .btn is a full-width block */
.recselbar[hidden]{ display:none; }
.recselbar #recSelCount{ font-weight:600; color:var(--color-fg-muted); }
.recthumb{ position:relative; width:64px; height:40px; flex:none; border-radius:7px; background:linear-gradient(135deg,#1b231f,#0d120f); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color:#3a463e; cursor:pointer; overflow:hidden; }
.recthumb .thumbglyph{ font-size:18px; }
/* poster frame: covers the placeholder glyph, fades in on load; OS badge stays on top */
.recthumb .thumbimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease; }
.recthumb .thumbimg.ok{ opacity:1; }
/* Záznamy reuse the device-tile OS ribbon (.osbadge); lift it above the poster ![]()
*/
.recthumb .osbadge, .gthumb .osbadge{ z-index:2; }
/* the list-row thumb is tiny (64×40) → scale the same ribbon down to fit it */
.recthumb .osbadge{ font-size:8px; padding:2px 5px; border-bottom-right-radius:6px; letter-spacing:0; }
.recmeta{ flex:1; min-width:0; cursor:pointer; }
.recname{ font-weight:600; display:flex; align-items:baseline; gap:9px; }
.recname .who{ font-weight:400; color:var(--color-fg-subtle); font-size:var(--fs-xs); }
.recmeta .devinfo{ color:var(--color-fg-muted); font-size:var(--fs-xs); margin-top:2px; }
.recmeta .specline{ color:var(--color-fg-subtle); font-size:var(--fs-xs); margin-top:3px; }
.teamchip{ display:inline-block; padding:1px 7px; border-radius:999px; background:var(--color-surface-alt); border:1px solid var(--color-border); font-size:11px; }
/* recording author (shown only when it's NOT you — see recByHTML): a colour-coded dot + name */
.recby{ display:inline-flex; align-items:center; gap:5px; }
.recby .bydot{ width:8px; height:8px; border-radius:50%; flex:none; }
/* Záznamy-tab row actions (Přehrát / Scénář): leading icon hover. Unified base — BOTH icons
scale up symmetrically (centred, no direction), so play isn't the static one. The clapperboard
additionally opens its hinged top arm (.claparm), but smoothly (plain ease-out, no spring whip
"from the left") so it reads as a gentle clap rather than a directional swing. */
.recbtn{ display:inline-flex; align-items:center; gap:6px; }
.recbtn .ricon{ width:15px; height:15px; flex:none; transition:transform .26s ease-out; }
.recbtn:hover .ricon{ transform:scale(1.15); }
.recbtn.scen .claparm{ transform-box:fill-box; transform-origin:left bottom; transition:transform .26s ease-out; }
.recbtn.scen:hover .claparm{ transform:rotate(-20deg); }
@media (prefers-reduced-motion: reduce){ .recbtn .ricon, .recbtn.scen .claparm{ transition:none; } }
.ttl{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--color-surface-alt); color:var(--color-fg-subtle); white-space:nowrap; }
.ttl.warn{ color:var(--warn-fg); } .ttl.perm{ color:var(--color-accent-fg); background:var(--color-accent-bg); }
.recright{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none; }
.kcount{ font-size:var(--fs-xs); color:var(--color-fg-subtle); font-variant-numeric:tabular-nums; }
.recacts{ display:flex; gap:6px; align-items:center; }
.recacts .iconbtn{ width:34px; height:32px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-bg-soft); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.recacts .keepbtn.on{ border-color:color-mix(in srgb, var(--star) 55%, transparent); color:var(--star); background:color-mix(in srgb, var(--star) 13%, transparent); }
.recacts .delbtn:hover:not([disabled]){ border-color:#d6453f; }
.recacts .iconbtn[disabled]{ opacity:.35; cursor:not-allowed; }
/* tab Záznamy: per-recording team-share toggle + "sdíleno" meta flag + selected row */
.recacts .sharebtn.on{ border-color:color-mix(in srgb, var(--pkteam-fg) 55%, transparent); color:var(--pkteam-fg); background:color-mix(in srgb, var(--pkteam-fg) 13%, transparent); }
.recacts .sharebtn svg{ width:17px; height:17px; }
.recacts .keepbtn:hover:not([disabled]){ border-color:color-mix(in srgb, var(--star) 55%, transparent); color:var(--star); }
.recacts .sharebtn:hover:not([disabled]){ border-color:color-mix(in srgb, var(--pkteam-fg) 55%, transparent); color:var(--pkteam-fg); }
.recsharedflag{ color:var(--pkteam-fg); font-weight:600; }
#recList .hrow.selected{ background:var(--color-accent-bg); }
/* Záznamy — GRID (Mřížka) view; same metrics + inset-thumb card as the device grid (#devices.grid/.tile) */
.recgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:16px; margin:6px 0 4px; }
/* the recordings container is itself the grid (flat children) so day headers + the lazy-load
sentinel span the full width and pages append with a plain insert */
.recgrid > .aday, .recgrid > .recoff, .recgrid > .recmore{ grid-column:1 / -1; }
.recmore{ text-align:center; padding:18px 0 6px; color:var(--color-fg-subtle); font-size:var(--fs-sm); }
.gcard{ position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
padding:14px; cursor:pointer; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.gcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.gcard.selected{ border-color:var(--color-accent-fg); box-shadow:0 0 0 1px var(--color-accent-fg) inset; }
.gthumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; margin-bottom:12px; background:linear-gradient(135deg,#1b231f,#0d120f); display:flex; align-items:center; justify-content:center; color:#3a463e; }
.gthumb .thumbglyph{ font-size:30px; }
.gthumb .thumbimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease; }
.gthumb .thumbimg.ok{ opacity:1; }
.gdur{ position:absolute; left:6px; bottom:6px; z-index:1; font-size:11px; color:#dfe6e2; background:rgba(8,12,10,.72); border-radius:6px; padding:2px 6px; }
.gthumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
.gcard:hover .gthumb .play{ opacity:1; }
.gthumb .play span{ width:38px; height:38px; border-radius:50%; background:rgba(8,12,10,.7); border:1px solid rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }
.gtime{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.gtime .gname{ color:var(--color-fg-subtle); font-weight:400; margin-left:7px; font-size:12.5px; }
.gmeta{ font-size:12px; color:var(--color-fg-muted); margin-top:3px; }
.gfoot{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.gfoot .ttl{ flex:none; }
/* key-press count moved off the thumbnail into the info block (with a keyboard glyph) */
.gkeys{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; flex:none; font-size:12px; color:var(--color-fg-subtle); font-variant-numeric:tabular-nums; }
.gkeys svg{ width:14px; height:14px; }
/* keep/delete overlay the inset thumb's top-right (14px card padding + 6px); reveal on hover/select */
.gacts{ position:absolute; top:20px; right:20px; z-index:2; display:flex; gap:5px; opacity:0; transition:opacity .12s ease; }
.gcard:hover .gacts, .gcard.selected .gacts{ opacity:1; }
/* overlays the (always-dark) thumbnail → icon must be a FIXED light colour, not the
theme's --color-fg (which is dark in the light theme → invisible dark-on-dark) */
.gacts .iconbtn{ width:30px; height:28px; font-size:13px; border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(8,12,10,.78); color:#eef2f0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.gacts .keepbtn.on{ border-color:color-mix(in srgb, var(--star) 55%, transparent); color:var(--star); background:color-mix(in srgb, var(--star) 13%, transparent); }
.gacts .delbtn:hover:not([disabled]){ border-color:#d6453f; }
.gacts .iconbtn[disabled]{ opacity:.35; cursor:not-allowed; }
.gsel{ position:absolute; top:18px; left:18px; z-index:3; background:rgba(8,12,10,.72); border-radius:6px; padding:3px; line-height:0; }
.gsel input{ width:18px; height:18px; accent-color:var(--color-accent-fg); cursor:pointer; display:block; }
/* action-button icons: SVG sized + delete goes red on hover (replaces the dark-on-dark emoji) */
.recacts .iconbtn svg, .gacts .iconbtn svg{ width:16px; height:16px; display:block; }
.recacts .delbtn:hover:not([disabled]) svg, .gacts .delbtn:hover:not([disabled]) svg{ color:#e0635e; }
/* keep (★) hover affordance — hint the gold it turns when pinned (was missing in both views) */
.recacts .keepbtn:hover:not([disabled]), .gacts .keepbtn:hover:not([disabled]){ border-color:var(--star); }
.recacts .keepbtn:hover:not([disabled]) svg, .gacts .keepbtn:hover:not([disabled]) svg{ color:var(--star); }
/* review player (přehrání čistého záznamu §9.6) — mirrors the frozen mockup */
.rvstage{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; cursor:pointer; }
.rvstage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; cursor:pointer; }
.rvstage .rvcue{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; border:0; background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; cursor:pointer; transition:opacity .2s, transform .2s; z-index:3; }
.rvstage.playing .rvcue{ opacity:0; transform:translate(-50%,-50%) scale(.7); pointer-events:none; }
.rvcue.nudge{ animation:rvcuepulse 1.1s ease-out; }
@keyframes rvcuepulse{ 0%{ transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(65,221,81,.6); } 60%{ transform:translate(-50%,-50%) scale(1.18); box-shadow:0 0 0 22px rgba(65,221,81,0); } 100%{ transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 0 rgba(65,221,81,0); } }
.rvstage .rvlbl{ position:absolute; left:10px; bottom:10px; font-size:var(--fs-xs); color:rgba(255,255,255,.9); background:rgba(0,0,0,.55); padding:3px 8px; border-radius:6px; } /* fixed light on the dark video, theme-independent */
.rvstage .rvtime{ position:absolute; right:10px; bottom:10px; font-size:var(--fs-xs); color:#fff; background:rgba(0,0,0,.55); padding:3px 8px; border-radius:6px; }
.rvstage .fsbtn{ position:absolute; right:10px; top:10px; width:34px; height:34px; border:0; border-radius:8px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; display:grid; place-items:center; z-index:4; }
/* in-fullscreen overlay control bar (progress + speed + time) */
.rvfsbar{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:none; align-items:center; gap:14px; padding:14px 18px; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.rvstage:fullscreen .rvfsbar, .rvstage:-webkit-full-screen .rvfsbar{ display:flex; }
.rvstage:fullscreen .rvlbl, .rvstage:fullscreen .rvtime{ display:none; }
/* the key-track is its own scroll box → the active row auto-scrolls to its top WITHOUT
moving the video/page (the video stays put on the player) */
#rvSteps{ max-height:46vh; overflow-y:auto; overscroll-behavior:contain; }
.rvfstime{ color:#fff; font-size:var(--fs-xs); flex:none; }
.rvfsprog{ position:relative; flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.25); cursor:pointer; }
.rvfsfill{ position:absolute; left:0; top:0; height:6px; border-radius:3px; background:var(--color-accent-bright); width:0; }
.rvfsspeed{ flex:none; background:rgba(255,255,255,.15); }
.rvfsspeed button{ color:#dfe; } .rvfsspeed button.on{ background:rgba(65,221,81,.25); color:#fff; }
/* timeline (richer than a scrubber): rail + progress + playhead + markers + trim */
.tl{ position:relative; height:46px; margin:16px 0 4px; }
.tl .track{ position:absolute; left:0; right:0; top:20px; height:6px; border-radius:3px; background:var(--color-surface-alt); cursor:pointer; }
.tl .prog{ position:absolute; left:0; top:20px; height:6px; border-radius:3px; background:var(--color-accent-bright); width:0; pointer-events:none; }
.tl .rvhead{ position:absolute; top:13px; width:3px; height:20px; background:#fff; border-radius:2px; transform:translateX(-1px); pointer-events:none; box-shadow:0 0 0 2px rgba(0,0,0,.4); left:0; }
.tl .rvmarks{ position:absolute; inset:0; }
.tl .rvmark{ position:absolute; top:8px; width:10px; height:10px; border-radius:50%; transform:translateX(-5px); cursor:pointer; border:2px solid var(--color-bg); transition:transform .1s; }
.tl .rvmark:hover{ transform:translateX(-5px) scale(1.4); }
.tl .rvmark.flash{ animation:rvflash .9s ease-out; }
@keyframes rvflash{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); } 100%{ box-shadow:0 0 0 14px rgba(255,255,255,0); } }
.tl .rvcluster{ position:absolute; top:5px; height:16px; min-width:18px; padding:0 5px; transform:translateX(-50%); border-radius:9px; background:var(--color-fg-subtle); color:var(--color-bg); font-size:11px; font-weight:800; display:grid; place-items:center; cursor:pointer; border:2px solid var(--color-bg); }
.rvclpop{ position:absolute; top:42px; transform:translateX(-50%); z-index:25; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:12px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,.35); min-width:190px; max-height:220px; overflow:auto; }
.rvclpop .cl{ display:flex; gap:9px; align-items:center; padding:6px; border-radius:8px; font-size:13px; cursor:pointer; }
.rvclpop .cl:hover{ background:var(--color-surface-alt); }
.rvclpop .cl .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.rvclpop .cl svg{ width:15px; height:15px; flex:none; color:var(--color-fg-muted); }
.rvclpop .cl .at{ color:var(--color-fg-subtle); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
/* trim (export range) handles + band on the timeline */
.rvtrimband{ position:absolute; top:18px; height:10px; background:rgba(45,209,64,.16); border-left:2px solid var(--color-accent-bright); border-right:2px solid var(--color-accent-bright); pointer-events:none; z-index:1; }
.rvtrimh{ position:absolute; top:13px; width:12px; height:20px; border-radius:4px; background:var(--color-accent-bright); cursor:ew-resize; transform:translateX(-6px); z-index:6; box-shadow:0 0 0 2px rgba(0,0,0,.4); }
.rvtrimh:focus{ outline:2px solid var(--color-accent-fg); outline-offset:2px; }
.rvtrimh::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:10px; background:var(--color-ink); border-radius:1px; }
.scrubrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px; min-height:28px; }
.rvtriminfo{ font-size:var(--fs-xs); color:var(--color-accent-fg); }
.speedseg{ display:inline-flex; background:var(--color-surface-alt); border-radius:999px; padding:3px; }
.speedseg button{ border:0; background:none; color:var(--color-fg-subtle); padding:5px 12px; border-radius:999px; cursor:pointer; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.speedseg button.on{ background:var(--color-accent-bg); color:var(--color-accent-fg); font-weight:700; }
.speedseg.sm button{ padding:4px 9px; }
.rvactions{ display:flex; align-items:center; gap:8px; margin:14px 0; flex-wrap:wrap; }
.rvactions .btn{ width:auto; padding:10px 18px; }
.rvactions .rvright{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.rvactions .ttl{ margin-right:4px; }
.rvactions .iconbtn{ width:38px; height:36px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-bg-soft); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }
.rvactions #rvKeep.on{ border-color:var(--color-accent-fg); color:var(--color-accent-fg); background:var(--color-accent-bg); }
.rvactions .iconbtn.dgr:hover{ border-color:#d6453f; }
.dlwrap{ position:relative; }
.dlmenu{ position:absolute; right:0; bottom:calc(100% + 6px); z-index:20; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:12px; padding:6px; min-width:200px; box-shadow:0 12px 32px rgba(0,0,0,.3); }
.dlmenu button{ display:block; width:100%; text-align:left; border:0; background:none; color:var(--color-fg); font:inherit; font-size:14px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.dlmenu button:hover{ background:var(--color-surface-alt); }
.keyshdr{ display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; row-gap:8px; } /* toggles wrap on phones instead of pushing the page wide */
.legtog{ background:none; border:0; color:var(--color-accent-fg); font:inherit; font-size:var(--fs-xs); cursor:pointer; padding:8px 0; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:10px; }
.legend[hidden]{ display:none; }
.legend .lg{ display:inline-flex; align-items:center; gap:6px; }
.legend .lg i{ width:9px; height:9px; border-radius:50%; }
.clstog{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--color-fg-muted); }
.clstog.sm .toggle{ width:34px; height:20px; } .clstog.sm .toggle::after{ width:14px; height:14px; top:2px; left:2px; } .clstog.sm .toggle.on::after{ left:17px; }
/* hover affordances — every interactive element gets feedback */
.rvstage .rvcue:hover{ background:rgba(0,0,0,.7); transform:translate(-50%,-50%) scale(1.07); }
.rvstage .fsbtn:hover{ background:rgba(0,0,0,.78); }
.speedseg button:hover:not(.on){ color:var(--color-fg); background:var(--color-surface); }
.rvactions .iconbtn:hover{ border-color:var(--color-border-strong); background:var(--color-surface-alt); color:var(--color-fg); }
.rvactions #rvKeep.on:hover{ filter:brightness(1.08); }
.rvactions .iconbtn svg{ width:18px; height:18px; display:block; }
.rvactions .iconbtn.dgr:hover svg{ color:#e0635e; }
.legtog:hover{ text-decoration:underline; }
.clstog{ cursor:pointer; } .clstog:hover{ color:var(--color-fg); }
.tl .track:hover{ background:var(--color-border-strong); }
.rvtrimh:hover{ filter:brightness(1.15); }
.tl .rvcluster:hover{ filter:brightness(1.12); }
.rvfsprog:hover .rvfsfill{ filter:brightness(1.1); }
.rvfsbar .rvfsbtn:hover{ background:rgba(4,51,10,.78); }
/* fullscreen: key markers on the bar + an on-demand semi-transparent key list */
.rvfsmarks{ position:absolute; inset:0; pointer-events:none; }
.rvfsmarks .fsmk{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid rgba(0,0,0,.5); }
.rvfsmarks .fsmk.flash{ animation:rvflash .9s ease-out; }
.rvfsbtn{ flex:none; width:34px; height:34px; border:0; border-radius:9px; background:rgba(4,51,10,.5); color:#fff; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(4px); }
.rvfskeys{ display:none; position:absolute; right:16px; top:16px; bottom:74px; z-index:7; width:280px;
background:rgba(8,14,10,.22); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.18); border-radius:16px; overflow:hidden; color:#fff; box-shadow:0 10px 34px rgba(0,0,0,.45); }
.rvstage:fullscreen.show-keys .rvfskeys{ display:flex; flex-direction:column; }
.rvfskeys .hd{ padding:9px 12px; font:700 12px var(--font-ui); background:rgba(255,255,255,.08); display:flex; align-items:center; gap:8px; }
.rvfskeys .bd{ padding:6px; overflow:auto; }
.rvfskeys .krow{ display:flex; gap:10px; align-items:center; padding:7px 8px; border-radius:8px; font-size:13px; cursor:pointer; }
.rvfskeys .krow:hover{ background:rgba(255,255,255,.10); }
.rvfskeys .krow.played{ opacity:.5; }
.rvfskeys .krow .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.rvfskeys .krow svg{ width:15px; height:15px; flex:none; }
.rvfskeys .krow .at{ font-size:11px; color:#bcd; font-variant-numeric:tabular-nums; }
.rvfskeys .krow .who{ margin-left:auto; font-size:11px; color:#9ab; }
/* key list: scales with the viewport height, and the user can drag the bottom edge to
make it as tall as they like; themed scrollbar (correct in light + dark) */
#rvSteps{ height:clamp(200px, 40vh, 600px); min-height:120px; max-height:none; overflow:auto; margin-top:12px; resize:vertical;
scrollbar-width:thin; scrollbar-color:var(--color-border-strong) transparent; }
#rvSteps::-webkit-scrollbar{ width:11px; }
#rvSteps::-webkit-scrollbar-track{ background:transparent; }
#rvSteps::-webkit-scrollbar-thumb{ background:var(--color-border-strong); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
#rvSteps::-webkit-scrollbar-thumb:hover{ background:var(--color-fg-subtle); background-clip:padding-box; }
#rvSteps .krow{ display:flex; gap:12px; align-items:center; padding:8px; border-radius:8px; font-size:14px; cursor:pointer; transition:background var(--dur-fast); }
#rvSteps .krow:hover{ background:var(--color-surface-alt); }
#rvSteps .krow.played{ background:var(--color-bg-soft); }
#rvSteps .krow.played .k{ color:var(--color-fg-subtle); }
#rvSteps .krow.flash{ animation:scenflash .9s ease-out; }
#rvSteps .krow .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
#rvSteps .krow svg{ flex:none; width:16px; height:16px; color:var(--color-fg-muted); }
#rvSteps .krow .at{ color:var(--color-fg-subtle); font-size:var(--fs-xs); min-width:74px; font-variant-numeric:tabular-nums; cursor:pointer; }
#rvSteps .krow .k{ font-weight:700; }
#rvSteps .krow .who{ color:var(--color-fg-subtle); font-size:var(--fs-xs); margin-left:auto; }
#rvSteps .krow .okt{ font-weight:800; font-size:13px; color:var(--color-fg-muted); }
/* info pane (about the TV) */
.irow{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--color-border); font-size:14px; }
.irow:last-child{ border-bottom:0; } .irow .ik{ color:var(--color-fg-subtle); }
.irow .iv{ font-weight:600; text-align:right; }
body:not(.admin) .adminonly{ display:none; }
body:not(.superadmin) .superonly{ display:none; }
/* Privileged-info marking (amber) — set-detail Informace: role-gated rows/cards
are banded (edge stripe + tint), the .adminhint legend explains the colour.
Only admins ever see the banded elements, so the styles need no role gate.
Variant C from mockups/adminonly-marking.html; whole live-power card counts
as gated (superonly), not its individual values. */
.adminhint{ font-size:var(--fs-xs); color:var(--color-fg-subtle); padding:22px 2px; display:flex; align-items:center; gap:8px; }
body:not(.admin) .adminhint{ display:none; }
.adminhint .swatch{ flex:none; width:16px; height:12px; border-radius:3px; background:color-mix(in srgb, var(--priv-edge) 16%, transparent); box-shadow:inset 2px 0 0 var(--priv-edge); }
#infoPanel .irow.adminonly{ background:var(--priv-bg); box-shadow:inset 3px 0 0 var(--priv-edge); margin:0 -16px; padding-left:16px; padding-right:16px; }
#infoPanel .irow.adminonly:last-child{ border-bottom-left-radius:24px; border-bottom-right-radius:24px; }
/* non-admin: the DOM-last rows (the admin-only IPs) are hidden, so :last-child
misses and the visually-last row kept its divider — drop it explicitly */
body:not(.admin) #infoPanel .irow:has(+ .irow.adminonly){ border-bottom:0; }
#infoPanel .card.superonly{ background:linear-gradient(var(--priv-bg),var(--priv-bg)) var(--color-surface); box-shadow:inset 3px 0 0 var(--priv-edge), var(--shadow-1); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; width:100%; padding:.85rem 1.3rem;
border-radius:var(--radius-pill); border:1px solid transparent; font:600 .98rem var(--font-ui); cursor:pointer;
color:var(--color-on-accent); background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); box-shadow:var(--shadow-glow);
transition:box-shadow var(--dur) var(--ease-out), filter var(--dur-fast); }
.btn:hover{ filter:brightness(1.08); }
.btn.ghost{ background:transparent; color:var(--color-fg); border-color:var(--color-border-strong); box-shadow:none; }
.btn.ghost.danger-btn{ color:var(--color-error-fg); border-color:var(--color-error-border); }
.btn.ghost:hover{ border-color:var(--color-accent); color:var(--color-accent-fg); }
.btn svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease-out); } .btn:hover svg{ transform:translateX(4px); }
/* Base look for any bare text-ish input. Screens style their own variants on top —
:where() keeps specificity at zero so every scoped rule (.field input, .addmemb
input, …) still wins. Without this, an input outside a styled scope falls back
to the UA's color-scheme default box (grey fill + light border on dark). */
input:where([type="text"],[type="url"],[type="email"],[type="password"],[type="search"],[type="number"],:not([type])){
font:inherit; background:var(--color-surface); border:1px solid var(--color-border-strong);
border-radius:var(--radius-sm); color:var(--color-fg); padding:.55rem .8rem;
transition:border-color .2s, box-shadow .2s; }
input:where([type="text"],[type="url"],[type="email"],[type="password"],[type="search"],[type="number"],:not([type])):focus{
outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
input::placeholder{ color:var(--color-placeholder); }
.field{ display:flex; flex-direction:column; gap:6px; }
.capslock{ display:none; font-size:var(--fs-xs); color:var(--warn-fg); font-weight:600; }
.capslock.show{ display:block; }
.field label{ font-size:12px; font-weight:600; color:var(--color-fg-muted); letter-spacing:.02em; }
.field input,.field select{ font:inherit; padding:.78rem .95rem; border:1px solid var(--color-border-strong);
border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-fg); width:100%; transition:border-color .2s, box-shadow .2s; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:2.6rem;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right .95rem center; }
.field input:focus,.field select:focus{ outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
/* secondary MAC sub-input under an IP field: smaller, muted, monospace-ish for hex */
.field input.macin{ padding:.5rem .7rem; font:500 13px var(--font-mono,ui-monospace,Menlo,monospace); letter-spacing:.02em; color:var(--color-fg-muted); }
.field input.macin::placeholder{ color:var(--color-placeholder); font:inherit; } /* a filled MAC must read as a value, not as more placeholder */
/* Add/edit form — SÍŤ section grid (v1.72.0, owner-approved mockups/device-form-redesign.html):
one row per component, IP/MAC column headers once, one 40px control height, aligned actions */
.netgrid{ display:grid; grid-template-columns:100px 1fr 1fr auto; gap:12px; align-items:start; }
.netgrid .ngh{ font:600 11px var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-subtle); margin-bottom:-6px; }
.netgrid .ngdev{ display:flex; align-items:center; gap:8px; height:40px; font:600 13.5px var(--font-ui); color:var(--color-fg-muted); }
.netgrid .ngdev svg{ width:17px; height:17px; color:var(--color-accent-fg); flex:none; }
.netgrid .field{ min-width:0; }
.netgrid .field input{ height:40px; box-sizing:border-box; width:100%; }
.netgrid .scanBtn{ width:auto; height:40px; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; padding:0 14px; font-size:13px; white-space:nowrap; }
.netgrid .scanBtn svg{ width:15px; height:15px; flex:none; }
.netgrid .ngsub{ grid-column:1 / 5; padding-left:112px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:-4px; }
.netgrid .ngsub[hidden]{ display:none; }
.netgrid .ngsub .btn{ width:auto; height:32px; box-sizing:border-box; padding:0 13px; font-size:12.5px; border-radius:999px; display:inline-flex; align-items:center; }
.calchip{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; font:600 12px var(--font-ui);
background:var(--color-success-bg); color:var(--color-success-fg); border:1px solid var(--color-success-border); }
.calchip:empty{ display:none; }
.calchip:not(.ok){ background:none; border-color:var(--color-border); color:var(--color-fg-subtle); } /* "Zatím nekalibrováno" reads muted, not green */
@media (max-width:720px){
.netgrid{ grid-template-columns:1fr 1fr; }
.netgrid .ngh{ display:none; }
.netgrid .ngdev{ grid-column:1 / 3; height:auto; margin:6px 0 -4px; }
.netgrid .scanBtn{ grid-column:1 / 3; justify-content:center; }
.netgrid .ngsub{ grid-column:1 / 3; padding-left:0; }
}
.field .errmsg{ font-size:var(--fs-xs); color:var(--color-error-fg); display:none; }
.field.err input,.field.err select,.field.invalid input{ border-color:var(--color-error-border); box-shadow:0 0 0 4px rgba(192,57,43,.15); }
.field.err .errmsg{ display:block; }
.req{ color:var(--color-error-fg); font-weight:700; }
/* app install: dropzone + progress */
.dropzone{ border:1.5px dashed var(--color-border-strong); border-radius:var(--radius); padding:22px 16px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--color-fg-subtle); transition:border-color .15s, background .15s; }
.dropzone svg{ width:30px; height:30px; opacity:.85; }
.dropzone.drag{ border-color:var(--color-accent-2); background:var(--color-accent-bg); color:var(--color-accent-fg); }
.installstatus{ margin-top:12px; display:none; }
.installstatus.show{ display:block; }
.istat-row{ display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:8px; color:var(--color-fg); }
.istat-row .pkg{ color:var(--color-fg-subtle); }
.istat-row.ok{ color:var(--color-accent-fg); font-weight:600; } .istat-row.err{ color:var(--color-error-fg); font-weight:600; }
.istat-row svg{ width:16px; height:16px; flex:none; }
.ibar{ height:8px; border-radius:6px; background:var(--color-surface-alt); overflow:hidden; }
.ibar > i{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-2)); transition:width .35s ease; }
.ibar.err > i{ background:var(--color-error-fg); }
/* bulk app install: target picker + per-device results */
.insthead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.linkbtn{ background:none; border:0; color:var(--color-accent-fg); font:600 13px var(--font-ui); cursor:pointer; padding:0; }
.linkbtn:hover{ text-decoration:underline; }
.trow{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px dashed var(--color-border); cursor:pointer; }
.trow:last-child{ border-bottom:0; }
.trow.dis{ opacity:.5; cursor:not-allowed; }
.trow .tck{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--color-border-strong); display:grid; place-items:center; flex:none; }
.trow.sel .tck{ background:var(--color-accent); border-color:transparent; }
.trow .tck svg{ width:13px; height:13px; stroke:#fff; opacity:0; } .trow.sel .tck svg{ opacity:1; }
.trow.dis .tck{ visibility:hidden; }
.trow .mini{ width:46px; height:30px; border-radius:8px; overflow:hidden; background:var(--color-ink); flex:none; }
.trow .mini svg{ width:100%; height:100%; display:block; }
.trow .tname{ font-weight:600; } .trow .tsub{ font-size:12.5px; color:var(--color-fg-subtle); }
.treason{ margin-left:auto; font-size:11.5px; color:var(--color-fg-subtle); background:var(--color-surface-alt); border:1px solid var(--color-border); padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
.iresrow{ display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px dashed var(--color-border); font-size:13.5px; }
.iresrow:last-child{ border-bottom:0; } .iresrow .nm{ font-weight:600; } .iresrow .rt{ margin-left:auto; font-size:12.5px; color:var(--color-fg-subtle); }
.iresrow.ok .rt{ color:var(--color-accent-fg); font-weight:600; }
.iresrow .okmark{ color:var(--color-accent-fg); flex:none; }
.spin{ width:15px; height:15px; border:2px solid var(--color-border-strong); border-top-color:var(--color-accent-fg); border-radius:50%; animation:spin .8s linear infinite; flex:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn:disabled{ opacity:.5; cursor:default; box-shadow:none; filter:saturate(.6); }
.filterbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filterbar select{ appearance:none; -webkit-appearance:none; background:var(--color-surface); border:1px solid var(--color-border);
color:var(--color-fg); border-radius:9px; padding:7px 30px 7px 11px; font:600 12.5px var(--font-ui); cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center; }
.filterbar select.act{ border-color:var(--color-accent-2); color:var(--color-accent-fg); }
/* multi-select filter: a select-look button + checkbox popover (picker filters) */
.filterbar .msel{ position:relative; display:inline-block; }
.filterbar .msbtn{ appearance:none; -webkit-appearance:none; background:var(--color-surface); border:1px solid var(--color-border);
color:var(--color-fg); border-radius:9px; padding:7px 30px 7px 11px; font:600 12.5px var(--font-ui); cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center; }
.filterbar .msel.act .msbtn{ border-color:var(--color-accent-2); color:var(--color-accent-fg); }
.filterbar .mspop{ display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:40; min-width:168px;
flex-direction:column; gap:1px; padding:7px; background:var(--color-surface); border:1px solid var(--color-border-strong);
border-radius:11px; box-shadow:var(--shadow-2); }
.filterbar .msel.open .mspop{ display:flex; }
.filterbar .msopt{ display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:8px; border:0; background:none;
font:500 13px var(--font-ui); color:var(--color-fg); cursor:pointer; white-space:nowrap; text-align:left; width:100%; box-sizing:border-box; }
.filterbar .msopt:hover{ background:color-mix(in srgb, var(--color-fg) 7%, transparent); }
.filterbar .msopt.on{ color:var(--color-accent-fg); font-weight:700; } /* active sort field / direction */
.filterbar .msdiv{ height:1px; background:var(--color-border); margin:4px 2px; }
/* custom checkbox — the native accent-color box read wrong on the light theme */
.filterbar .msopt input{ appearance:none; -webkit-appearance:none; width:16px; height:16px; margin:0; flex:none;
border:1.5px solid var(--color-border-strong); border-radius:5px; background:var(--color-surface); cursor:pointer;
display:grid; place-items:center; transition:background .15s var(--ease-out), border-color .15s var(--ease-out); }
.filterbar .msopt input:checked{ background:var(--color-accent-2); border-color:var(--color-accent-2); }
.filterbar .msopt input:checked::after{ content:""; width:10px; height:10px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.filterbar .clrf{ background:none; border:0; color:var(--color-fg-subtle); font:600 12.5px var(--font-ui); cursor:pointer; text-decoration:underline; }
.iresrow[data-open]{ cursor:pointer; border-radius:8px; } .iresrow[data-open]:hover{ background:var(--color-surface-alt); }
.iresrow .chev{ color:var(--color-fg-subtle); margin-left:6px; font-size:16px; }
/* embedded Chrome DevTools (mock of the real iframe) */
.dt{ background:#0b0f14; color:#c9d3df; font:12px/1.6 ui-monospace,Menlo,Consolas,monospace; }
.dttabs{ display:flex; align-items:center; gap:2px; padding:0 8px; background:#11161d; border-bottom:1px solid #1f2630; }
.dttab{ padding:9px 10px; font:600 11.5px var(--font-ui); color:#8a95a3; cursor:pointer; border-bottom:2px solid transparent; }
.dttab.on{ color:#e8eef5; border-bottom-color:#4f8cff; }
.dtspacer{ flex:1; }
.dtlive{ display:inline-flex; align-items:center; gap:6px; font:600 11px var(--font-ui); color:#41dd51; padding-right:4px; }
.dtlive i{ width:7px; height:7px; border-radius:50%; background:#41dd51; box-shadow:0 0 6px #41dd51; }
.dtbody{ padding:10px 12px; height:240px; min-height:140px; overflow:auto; resize:vertical; }
.dttree{ margin:0; white-space:pre; font:12px/1.7 ui-monospace,Menlo,Consolas,monospace; }
.dttree .tag{ color:#7fb3e8; } .dttree .att{ color:#d7a35a; } .dttree .val{ color:#8fd39a; } .dttree .pnt{ color:#5a6675; }
.dttree .dtsel{ background:rgba(79,140,255,.18); border-radius:4px; box-shadow:0 0 0 1px rgba(79,140,255,.35); }
.dtcon{ border-top:1px solid #1f2630; padding:8px 12px; color:#9aa6b4; display:flex; gap:8px; align-items:center; font:12px ui-monospace,Menlo,Consolas,monospace; }
.dtcon .pr{ color:#5db0d7; font-weight:700; }
.dthead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.dtpop{ background:none; border:0; color:#8a95a3; font-size:14px; cursor:pointer; padding:4px 8px; line-height:1; }
.dtpop:hover{ color:#e8eef5; }
.dtpop.on{ color:#4f8cff; }
.dthint{ display:none; }
@media (max-width:739.98px){ .dthint{ display:block; } }
.dt.dtmax{ position:fixed; inset:8px; z-index:300; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; }
.dt.dtmax .dtbody{ flex:1; height:auto; max-height:none; resize:none; }
.dtlive.off{ color:var(--color-fg-subtle); } .dtlive.off i{ background:var(--color-fg-subtle); box-shadow:none; }
.dtlive.connecting{ color:var(--color-accent-fg); } .dtlive.connecting i{ background:var(--color-accent-fg); box-shadow:none; animation:dtpulse 1s ease-in-out infinite; }
@keyframes dtpulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.dtoff{ display:none; padding:26px 18px; text-align:center; flex-direction:column; align-items:center; gap:8px; color:var(--color-fg-subtle); }
.dtoff svg{ width:30px; height:30px; opacity:.8; } .dtoff .t{ font-weight:600; color:var(--color-fg); }
#dtWrap.dbg-off .dtpanel{ display:none; } #dtWrap.dbg-off .dtoff{ display:flex; }
/* ── add-debug (chii-inject) flow — backlog #8 ── */
.inj-actions{ display:flex; gap:10px; margin-top:6px; }
.inj-actions .btn{ width:auto; padding:9px 18px; }
.inj-offer .inj-actions{ margin-top:10px; }
.inj-relink{ background:none; border:0; color:var(--color-accent-fg); font:600 12.5px var(--font-ui); cursor:pointer; padding:4px 2px; }
.inj-relink:hover{ text-decoration:underline; }
.inj-pre{ display:flex; flex-direction:column; gap:6px; margin:12px 0 2px; }
.inj-pre .prq{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--color-fg-subtle); }
.inj-pre .ok{ color:var(--color-accent-fg); flex:none; display:inline-flex; }
.inj-pre b{ color:var(--color-fg); font-weight:600; }
.inj-src{ margin-top:4px; display:flex; flex-direction:column; gap:10px; }
.inj-last{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--color-border); border-radius:12px;
background:var(--color-surface); cursor:pointer; text-align:left; width:100%; font:inherit; color:var(--color-fg); transition:border-color .15s; }
.inj-last:hover{ border-color:var(--color-border-strong); }
.inj-last.on{ border-color:var(--color-accent-fg); }
.inj-last .ic{ flex:none; width:34px; height:34px; border-radius:9px; background:var(--color-accent-bg); display:flex; align-items:center; justify-content:center; color:var(--color-accent-fg); }
.inj-last .nm{ display:block; font-weight:600; font-size:13.5px; }
.inj-last .sub{ display:block; font-size:11.5px; color:var(--color-fg-subtle); margin-top:2px; }
.inj-last .pick{ margin-left:auto; flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--color-border-strong); }
.inj-last.on .pick{ border-color:var(--color-accent-fg); background:var(--color-accent-fg); box-shadow:inset 0 0 0 4px var(--color-surface); }
/* package ownership (v1.80.0 — mockups/pkg-library-unified.html variant B): tinted icon
tile + chip; own = accent green, superadmin = the app's amber privileged palette,
team = its own blue (--pkteam-* in the token blocks) */
.inj-last.team .ic{ background:var(--pkteam-bg); color:var(--pkteam-fg); }
.inj-last.sup .ic{ background:var(--warn-bg); color:var(--warn-fg); }
.ochip{ display:inline-flex; align-items:center; font:700 10px var(--font-ui); letter-spacing:.02em; padding:1.5px 7px; border-radius:var(--radius-pill); margin-right:6px; vertical-align:1px; }
.ochip.own{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.ochip.team{ background:var(--pkteam-bg); color:var(--pkteam-fg); }
.ochip.sup{ background:var(--warn-bg); color:var(--warn-fg); }
/* the shared library layout (Instalace): dashed upload row + one action bar below the list */
.inj-last.uprow{ border-style:dashed; width:100%; text-align:left; font:inherit; cursor:pointer; }
/* discard-✕ on the picked-upload row (DevTools source picker) */
.inj-last .upx{ flex:none; margin-left:auto; color:var(--color-fg-subtle); font-size:13px; line-height:1; padding:4px 7px; border-radius:7px; transition:.15s; }
.inj-last .upx:hover{ color:var(--color-fg); background:var(--color-bg-soft); }
.inj-last .upx + .pick{ margin-left:6px; }
/* picked-file state (v1.80.1, mockups/install-toggles.html variant 4): the dropzone swaps
for a file card + a two-cell options bar; install runs on the button, not on drop */
.aipick{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--color-border); border-radius:14px; background:var(--color-surface-alt); padding:12px 14px; }
.aipick .fic{ flex:none; width:36px; height:36px; border-radius:10px; background:var(--color-accent-bg); color:var(--color-accent-fg); display:flex; align-items:center; justify-content:center; font:800 10px var(--font-ui); }
.aipick .fn{ display:block; font-weight:650; font-size:13.5px; word-break:break-all; }
.aipick .fs{ display:block; font-size:11.5px; color:var(--color-fg-subtle); margin-top:1px; }
/* metrics 1:1 with mockups/install-toggles.html (the owner compared them side by side):
30px icon tile, 12.5px label + 11px one-line sub, tight line-height */
.optbar{ display:flex; border:1px solid var(--color-border); border-radius:14px; margin-top:10px; overflow:hidden; background:var(--color-surface-alt); }
.optcell{ flex:1; display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; transition:background .15s; min-width:0; }
.optcell + .optcell{ border-left:1px solid var(--color-border); }
.optcell .oic{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--color-bg-soft); color:var(--color-fg-subtle); display:flex; align-items:center; justify-content:center; transition:.15s; }
.optcell .oic svg{ width:16px; height:16px; }
.optcell .ol{ font-size:12.5px; font-weight:600; color:var(--color-fg-muted); line-height:1.25; min-width:0; }
.optcell .ol > span, .optcell .ol small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.optcell .ol small{ font-weight:500; font-size:11px; color:var(--color-fg-subtle); margin-top:1px; }
/* the mockup's daintier switch (36×21) — the app default 46×28 dwarfed the cells.
Off-track = border-strong grey: the default surface-alt track vanishes here
(the cell background IS surface-alt), in both themes. */
.optcell .toggle{ margin-left:auto; flex:none; width:36px; height:21px; background:var(--color-border-strong); border-color:transparent; }
.optcell .toggle::after{ width:15px; height:15px; top:2px; left:2px; }
.optcell .toggle.on::after{ left:17px; }
.optcell.on .oic{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
@media (max-width:560px){ .optbar{ flex-direction:column; } .optcell + .optcell{ border-left:0; border-top:1px solid var(--color-border); } }
.pkgbar{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--color-border); }
.pkgbar .sp{ flex:1; }
.pkgbar button[disabled]{ opacity:.45; pointer-events:none; }
.inj-or{ display:flex; align-items:center; gap:10px; color:var(--color-fg-subtle); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.inj-or::before,.inj-or::after{ content:""; flex:1; height:1px; background:var(--color-border); }
.inj-warn{ margin-top:12px; font-size:12px; color:var(--color-fg-subtle); display:flex; gap:8px; align-items:flex-start; }
.inj-warn svg{ flex:none; width:15px; height:15px; margin-top:1px; color:var(--warn,#e6b450); }
.inj-steps{ display:flex; flex-direction:column; }
.inj-step{ display:flex; align-items:center; gap:12px; padding:9px 2px; position:relative; }
.inj-step + .inj-step::before{ content:""; position:absolute; left:12px; top:-8px; width:1.5px; height:14px; background:var(--color-border); }
.inj-step .dot{ flex:none; width:25px; height:25px; border-radius:50%; border:1.5px solid var(--color-border-strong);
display:flex; align-items:center; justify-content:center; color:var(--color-fg-subtle); font:600 11px var(--font-ui); background:var(--color-surface); }
.inj-step .lb{ font-size:13.5px; color:var(--color-fg-subtle); }
.inj-step .sub{ display:block; font-size:11.5px; color:var(--color-fg-subtle); opacity:.75; }
.inj-step .st{ margin-left:auto; font:600 11.5px var(--font-ui); color:var(--color-fg-subtle); display:flex; align-items:center; gap:7px; }
.inj-step.run .lb{ color:var(--color-fg); font-weight:600; } .inj-step.run .dot{ border-color:var(--color-accent-fg); color:var(--color-accent-fg); } .inj-step.run .st{ color:var(--color-accent-fg); }
.inj-step.done .dot{ border-color:var(--color-accent-fg); background:var(--color-accent-bg); color:var(--color-accent-fg); } .inj-step.done .lb{ color:var(--color-fg); } .inj-step.done .st{ color:var(--color-accent-fg); }
.inj-step.fail .dot{ border-color:var(--danger,#e05252); color:var(--danger,#e05252); } .inj-step.fail .lb{ color:var(--color-fg); font-weight:600; } .inj-step.fail .st{ color:var(--danger,#e05252); }
.inj-err{ margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in srgb,var(--danger,#e05252) 45%, transparent);
background:color-mix(in srgb,var(--danger,#e05252) 10%, transparent); font-size:12.5px; color:var(--color-fg); }
.inj-h{ font:600 12px/1 var(--font-ui); letter-spacing:.04em; text-transform:uppercase; color:var(--color-fg-subtle); }
.sgn-spin{ width:14px; height:14px; border:2px solid rgba(128,128,128,.3); border-top-color:var(--color-accent-fg); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; vertical-align:-2px; }
.pwwrap{ position:relative; } .pwwrap input{ padding-right:46px; }
.pweye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid;
place-items:center; background:none; border:0; color:var(--color-fg-subtle); cursor:pointer; border-radius:8px; }
.pweye:hover{ color:var(--color-fg); } .pweye svg{ width:20px; height:20px; }
.alert{ display:none; gap:9px; align-items:flex-start; background:var(--color-error-bg); color:var(--color-error-fg);
border:1px solid var(--color-error-border); border-radius:var(--radius-sm); padding:11px 13px; font-size:.9rem; line-height:1.4; text-align:left; }
.alert.show{ display:flex; } .alert svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.alert a{ color:var(--color-error-fg); font-weight:700; }
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); }
/* device list */
.list{ display:flex; flex-direction:column; gap:12px; }
.set{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; background:var(--color-surface);
border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.set .rowbar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.10); }
.set .rowbar > i{ display:block; height:100%; background:var(--color-accent-bright); transition:width 1s linear; }
.cd{ display:inline-flex; align-items:center; gap:4px; } .cd .cdico{ width:13px; height:13px; color:var(--color-accent-fg); flex:none; }
.set:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
/* power gauge as a left-edge accent on the row (glow only; W value lives on the card/detail) */
.set > .thumb, .set > .meta, .set > .setright, .set > .rowctl, .set > .chev{ position:relative; z-index:1; }
.set .gx{ z-index:0; width:66px; }
.set .gx .col{ width:24px; -webkit-mask:linear-gradient(90deg,#000,#000 3px,transparent 24px); mask:linear-gradient(90deg,#000,#000 3px,transparent 24px); }
.set .gx .spread{ background:radial-gradient(calc(66px + var(--pw,0)*70px) circle at 3px calc(100% - 4px - (100% - 8px) * var(--pw,0)), rgba(45,209,64,calc(.07 + var(--pw,0)*.22)), transparent 62%); }
.set .thumb{ position:relative; width:76px; height:50px; border-radius:10px; background:var(--color-ink); overflow:hidden; flex:none; }
.set .thumb svg{ width:100%; height:100%; display:block; }
.set .thumb .osbadge{ font-size:8.5px; padding:2px 6px; letter-spacing:0; } /* OS ribbon on the list thumb, scaled down */
/* status-tinted thumb background — unified with the dashboard/grid (.dash .dthumb / .tile .thumb) */
.set .thumb.st-free{ background:#0c1a10; } .set .thumb.st-mine{ background:#0c2014; }
.set .thumb.st-inuse{ background:#1b1408; } .set .thumb.st-blocked{ background:#241011; } .set .thumb.st-offline{ background:var(--color-ink); }
.set .meta{ flex:1; min-width:0; } .set .name{ font-weight:700; letter-spacing:-.01em; }
.set .specline{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.set .setright{ display:flex; align-items:center; gap:10px; flex:none; }
.set .setright .sub{ font-size:11.5px; color:var(--color-fg-subtle); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set .desc{ font-size:var(--fs-xs); color:var(--color-fg-subtle); display:flex; align-items:center; gap:8px; margin-top:3px; }
.chip{ font-size:11px; padding:2px 8px; border-radius:var(--radius-pill); background:var(--color-surface-alt); color:var(--color-fg-subtle); border:1px solid var(--color-border); }
.chip.year{ background:var(--color-accent-bg); color:var(--color-accent-fg); border-color:transparent; letter-spacing:.02em; }
.ipline{ font-size:11px; color:var(--color-fg-subtle); }
.set .chev{ color:var(--color-fg-subtle); display:flex; align-items:center; }
.chev svg{ width:18px; height:18px; display:block; }
/* phone: the fixed rails (thumb + status chip + icon controls) outweigh 390px and crush
.meta to zero width, so its text paints under the chip — wrap the rails onto a second
line below the title instead, and cap the title at two lines */
@media (max-width:600px){
.set{ flex-wrap:wrap; }
.set .meta{ flex:1 1 auto; min-width:calc(100% - 105px); }
.set .name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.set .setright, .set .rowctl{ flex-wrap:wrap; }
}
/* device toolbar: search + list/grid toggle */
.toolbar{ display:flex; gap:10px; align-items:center; }
.searchwrap{ position:relative; flex:1; }
.searchwrap > svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--color-fg-subtle); }
.searchwrap input{ width:100%; background:var(--color-surface); border:1px solid var(--color-border-strong); color:var(--color-fg);
border-radius:var(--radius-pill); padding:10px 14px 10px 40px; font:15px var(--font-ui); }
.searchwrap input:focus{ outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
.seg.icons button{ padding:8px 11px; display:grid; place-items:center; } .seg.icons button svg{ width:18px; height:18px; display:block; }
.countline{ font-size:var(--fs-xs); color:var(--color-fg-subtle); }
/* grid view */
#devices.list{ display:flex; flex-direction:column; gap:12px; }
#devices.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; }
.tile{ position:relative; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
padding:14px; cursor:pointer; transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
/* power gauge runs the WHOLE left border of the tile — but BEHIND the opaque poster, so the
poster keeps its clean frame; the glow shows in the left gutter + over the lower content */
.tile > .thumb{ position:relative; z-index:2; }
.tile > .tbody, .tile > .tilectl{ position:relative; z-index:2; }
.tile .gx{ z-index:1; width:120px; }
.tile .gx .col{ width:32px; -webkit-mask:linear-gradient(90deg,#000,#000 4px,transparent 30px); mask:linear-gradient(90deg,#000,#000 4px,transparent 30px); }
.tile .gx .spread{ background:radial-gradient(calc(96px + var(--pw,0)*130px) circle at 3px calc(100% - 4px - (100% - 8px) * var(--pw,0)), rgba(45,209,64,calc(.09 + var(--pw,0)*.26)), transparent 64%); }
.tile .thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--color-ink); margin-bottom:12px; }
.tile .thumb svg{ width:100%; height:100%; display:block; }
/* P3 — flat colour tab flush in the top-left corner */
.osbadge{ position:absolute; top:0; left:0; font-size:11.5px; font-weight:800; letter-spacing:.01em;
padding:5px 12px; border-bottom-right-radius:12px; background:var(--oc,#41dd51); color:#06140c; }
.tile .name{ font-weight:700; letter-spacing:-.01em; margin:0 0 2px; font-size:16px; }
/* availability encoded into the tile image (colour + subtle background wash) */
.tile .thumb.st-free{ background:#0c1a10; } .tile .thumb.st-mine{ background:#0c2014; } .tile .thumb.st-inuse{ background:#1b1408; } .tile .thumb.st-blocked{ background:#241011; } .tile .thumb.st-offline{ background:var(--color-ink); }
.stat-free{ color:var(--color-success-fg); } .stat-mine{ color:var(--color-accent-fg); } .stat-inuse{ color:var(--warn-fg); } .stat-blocked{ color:var(--color-error-fg); } .stat-offline{ color:var(--color-fg-subtle); }
/* structured spec block */
.tile .specs{ margin-top:12px; padding-top:10px; border-top:1px solid var(--color-border); display:flex; flex-direction:column; gap:7px; }
.tile .specrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; min-height:18px; }
[hidden]{ display:none !important; }
.tile .specrow .k{ color:var(--color-fg-subtle); flex:none; } .tile .specrow .v{ color:var(--color-fg); font-weight:600; text-align:right; }
.emptynote{ text-align:center; color:var(--color-fg-subtle); padding:26px 0; font-size:var(--fs-sm); }
.emptybox{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:46px 20px; color:var(--color-fg-subtle); }
.emptybox .emptyill{ width:66px; height:66px; color:var(--color-border-strong); margin-bottom:2px; }
.emptybox .t{ font-weight:700; font-size:16px; color:var(--color-fg); }
.emptybox .muted{ max-width:34ch; font-size:var(--fs-sm); }
/* set detail */
.tabs{ display:flex; gap:4px; padding:8px 18px 0; border-bottom:1px solid var(--color-border); }
.tabs button{ flex:1; background:none; border:0; border-bottom:2px solid transparent; color:var(--color-fg-subtle);
padding:11px 0; font:600 14px var(--font-ui); cursor:pointer; margin-bottom:-1px; }
.tabs button.on{ color:var(--color-fg); border-color:var(--color-accent); }
.panes{ display:flex; flex-direction:column; gap:14px; padding:18px; }
.detail-left{ display:flex; flex-direction:column; gap:14px; min-width:0; } /* camera + info/devtools stacked, independent of the remote's height */
.pane{ display:none; flex-direction:column; gap:14px; min-width:0; } .pane.on{ display:flex; }
.stage{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:inset 0 0 60px rgba(0,0,0,.6);
min-width:240px; max-width:none; }
.stage svg{ width:100%; height:100%; display:block; }
.stage:fullscreen{ width:100vw !important; height:100vh !important; max-width:none; border-radius:0; aspect-ratio:auto; }
.fsbtn,.reshandle{ position:absolute; z-index:2; display:grid; place-items:center; background:rgba(4,51,10,.5); color:#fff; border:0;
backdrop-filter:blur(4px); }
.fsbtn{ top:10px; right:10px; width:34px; height:34px; border-radius:9px; cursor:pointer; }
.fsbtn:hover{ background:rgba(4,51,10,.78); }
.fsbtn.kb{ right:52px; } /* ⌨ arm-the-keyboard button, next to fullscreen */
.stage:focus .fsbtn.kb{ background:var(--color-accent-2); } /* armed = the ⌨ lights up app-green */
.stage:focus .fsbtn.kb:hover{ background:var(--color-accent); }
/* keyboard control armed = the stage owns focus: quiet ring + a floating hint chip */
.stage:focus{ outline:2px solid var(--color-accent-2); outline-offset:-2px; }
.stage .kbchip{ display:none; position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:5; align-items:center; gap:6px;
background:rgba(4,51,10,.72); color:#eafff0; font:600 12px var(--font-ui); border-radius:999px; padding:5px 13px;
backdrop-filter:blur(3px); pointer-events:none; white-space:nowrap; }
.stage:focus .kbchip{ display:flex; }
/* a keyboard hit flashes the matching on-page remote button (D-pad zones incl.) */
.kbhit{ box-shadow:inset 0 0 0 3px rgba(45,209,64,.5) !important; border-radius:inherit; }
/* resize grip: flush into the bottom-right corner, matching the stage radius */
.reshandle{ right:0; bottom:0; width:30px; height:30px; border-radius:13px 0 var(--radius) 0; background:rgba(0,0,0,.32);
color:rgba(255,255,255,.82); cursor:nwse-resize; touch-action:none; backdrop-filter:none; }
.reshandle svg{ width:13px; height:13px; }
.reshandle:hover{ background:rgba(0,0,0,.55); color:#fff; }
.stage:fullscreen .reshandle{ display:none; }
/* fullscreen: floating, translucent, draggable & resizable remote over the video */
.crtoggle{ position:absolute; z-index:2; display:none; place-items:center; top:10px; right:52px; width:34px; height:34px;
border-radius:9px; background:rgba(4,51,10,.5); color:#fff; border:0; cursor:pointer; backdrop-filter:blur(4px); }
.crtoggle:hover{ background:rgba(4,51,10,.78); }
.stage:fullscreen .crtoggle{ display:grid; }
.camremote{ display:none; position:absolute; right:16px; bottom:16px; z-index:6; width:220px;
background:rgba(8,14,10,.20); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.18); border-radius:16px;
overflow:hidden; color:#fff; box-shadow:0 10px 34px rgba(0,0,0,.45); }
.stage:fullscreen.show-remote .camremote{ display:block; }
.crhead{ display:flex; align-items:center; justify-content:space-between; padding:7px 11px; cursor:move; user-select:none;
touch-action:none; font:600 12px var(--font-ui); background:rgba(255,255,255,.08); }
.crclose{ background:none; border:0; color:#fff; font-size:16px; line-height:1; cursor:pointer; opacity:.85; }
.crbody{ padding:10px; display:flex; flex-direction:column; gap:7px; }
.crgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.crrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.crk{ aspect-ratio:1.25; border-radius:11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
color:#fff; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; font:600 12px var(--font-ui); }
.crk:active{ background:rgba(45,209,64,.5); } .crk.accent{ background:rgba(45,209,64,.55); border-color:transparent; font-weight:800; }
.crk svg{ width:18px; height:18px; }
.crresize{ position:absolute; right:2px; bottom:2px; width:18px; height:18px; cursor:nwse-resize; touch-action:none;
background:linear-gradient(135deg, transparent 48%, rgba(255,255,255,.5) 48%); border-radius:0 0 14px 0; }
.crtabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.crtab{ flex:none; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:999px; padding:5px 11px; font:600 11px var(--font-ui); cursor:pointer; }
.crtab.on{ background:rgba(45,209,64,.6); border-color:transparent; }
.stage .hud{ position:absolute; top:10px; left:10px; background:rgba(4,51,10,.5); color:#fff; font-size:11px; font-weight:700;
padding:5px 9px; border-radius:var(--radius-pill); display:flex; align-items:center; gap:7px; backdrop-filter:blur(4px); }
.stage .hud .dot{ width:7px; height:7px; background:var(--color-accent-bright); box-shadow:0 0 0 3px rgba(45,209,64,.3); }
/* per-session recording pill (under the ŽIVĚ badge). on = recording (red, pulsing);
off = idle (grey dot); ro = read-only for a non-holder (dimmed, no pointer). */
.stage .recpill{ position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:7px;
background:rgba(4,51,10,.5); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border:0;
border-radius:var(--radius-pill); backdrop-filter:blur(4px); cursor:pointer; transition:background .15s, opacity .15s; }
.stage .recpill:hover:not(:disabled){ background:rgba(4,51,10,.82); }
.stage .recpill .rdot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); transition:background .15s, box-shadow .15s; }
.stage .recpill.on{ background:rgba(150,22,22,.62); }
.stage .recpill.on:hover:not(:disabled){ background:rgba(150,22,22,.84); }
.stage .recpill.on .rdot{ background:#ff4d4d; box-shadow:0 0 0 3px rgba(255,77,77,.32); animation:recpulse 1.8s ease-in-out infinite; }
.stage .recpill.ro{ cursor:default; opacity:.72; }
@keyframes recpulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,77,77,.34); } 50%{ box-shadow:0 0 0 5px rgba(255,77,77,.1); } }
/* stream stats on the video + quality folded into the tab bar */
.camstat{ position:absolute; left:10px; bottom:10px; z-index:2; font-size:11px; font-weight:600; color:#fff;
background:rgba(8,12,9,.55); border:1px solid rgba(255,255,255,.14); padding:3px 9px; border-radius:var(--radius-pill); backdrop-filter:blur(4px); }
.stage:fullscreen .camstat{ display:none; }
.detailbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qsel{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; }
/* picture controls: a slim right-aligned bar directly UNDER the stage (they belong to
the video, not the content tabs); the pair wraps together, rectify = the app toggle */
.camctl{ display:flex; justify-content:flex-end; align-items:center; gap:16px; flex-wrap:wrap; margin:8px 0 0; }
.camctl .qsel{ margin-left:0; }
#rectifyBar{ cursor:pointer; }
#rectifyBar .toggle{ width:38px; height:22px; }
#rectifyBar .toggle::after{ width:16px; height:16px; top:2px; left:2px; }
#rectifyBar .toggle.on::after{ left:18px; }
.qsel .qlbl{ font-size:12px; color:var(--color-fg-subtle); }
.qsel select{ appearance:none; -webkit-appearance:none; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg);
border-radius:9px; padding:7px 30px 7px 11px; font:600 12.5px var(--font-ui); cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center; }
.qsel.disabled{ opacity:.45; } .qsel.disabled select{ pointer-events:none; }
/* spinner + loading + app-offline (R4/R5) */
.spinner{ width:32px; height:32px; border:3px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
.spinner.sm{ width:15px; height:15px; border-width:2px; }
.camload{ position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px;
background:rgba(5,12,8,.72); color:#dff0e4; font-size:13px; font-weight:600; backdrop-filter:blur(2px); padding:0 20px; }
.camload span{ max-width:52ch; text-align:center; line-height:1.55; }
.camload.still .spinner{ display:none; } /* terminal state — the retry loop ended */
.camload.show{ display:flex; }
/* fancy quality-switch overlay: equalizer bars + shimmer sweep + pulsing label */
.camswitch{ position:absolute; inset:0; z-index:4; display:none; flex-direction:column; align-items:center; justify-content:center; gap:13px;
background:radial-gradient(120% 90% at 50% 38%, rgba(8,22,13,.74), rgba(3,9,6,.9)); color:#eafff0; backdrop-filter:blur(3px); overflow:hidden; }
.camswitch.show{ display:flex; }
.camswitch::before{ content:''; position:absolute; inset:-30%; background:linear-gradient(115deg,transparent 38%,rgba(45,209,64,.14) 50%,transparent 62%);
transform:translateX(-100%); animation:cs-shimmer 1.9s ease-in-out infinite; }
@keyframes cs-shimmer{ to{ transform:translateX(100%); } }
.camswitch .eq{ display:flex; align-items:flex-end; gap:4px; height:30px; position:relative; }
.camswitch .eq i{ width:5px; height:100%; border-radius:3px; background:linear-gradient(180deg,var(--color-accent-bright),#13702a);
transform-origin:bottom; animation:cs-eq 1s ease-in-out infinite; box-shadow:0 0 6px rgba(45,209,64,.25); }
.camswitch .eq i:nth-child(2){ animation-delay:-.18s } .camswitch .eq i:nth-child(3){ animation-delay:-.36s }
.camswitch .eq i:nth-child(4){ animation-delay:-.54s } .camswitch .eq i:nth-child(5){ animation-delay:-.72s }
@keyframes cs-eq{ 0%,100%{ transform:scaleY(.26) } 50%{ transform:scaleY(1) } }
.camswitch.done .eq i{ animation:none; transform:scaleY(1); }
.camswitch .cs-label{ font-size:15px; font-weight:700; letter-spacing:.2px; position:relative; }
.camswitch .cs-sub{ font-size:12px; font-weight:600; opacity:.78; position:relative; animation:cs-fade 1.4s ease-in-out infinite; }
@keyframes cs-fade{ 0%,100%{ opacity:.5 } 50%{ opacity:.92 } }
.camswitch.done .cs-sub{ animation:none; opacity:.92; }
.offlinebar{ display:none; align-items:center; justify-content:center; gap:10px; background:var(--warn-bg); color:var(--warn-fg);
border-bottom:1px solid var(--warn-border); padding:9px 14px; font-size:13px; font-weight:600; }
body.app-offline .offlinebar{ display:flex; }
body.app-offline .app{ pointer-events:none; opacity:.9; }
.seg button:disabled{ opacity:.4; cursor:not-allowed; }
/* remote — kac-remote style */
.volrow{ display:flex; gap:10px; }
.volrow .vbtn{ flex:1; height:64px; border-radius:18px; background:var(--color-surface); border:1px solid var(--color-border);
color:var(--color-fg); font-size:22px; cursor:pointer; display:grid; place-items:center; }
.volrow .vbtn:active{ border-color:var(--color-accent); color:var(--color-accent-fg); }
.volbar{ display:flex; align-items:center; gap:4px; }
.volbar .seg{ flex:1; height:6px; border-radius:3px; background:var(--color-surface-alt); }
.volbar .seg.on{ background:var(--color-accent-bright); }
.volbar .lvl{ margin-left:8px; font-size:var(--fs-xs); color:var(--color-fg-subtle); min-width:18px; text-align:right; }
.remotezone{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,72px);
place-items:center; padding:8px 0; }
.nav{ width:62px; height:62px; border-radius:16px; background:var(--color-surface); border:1px solid var(--color-border);
color:var(--color-fg); font-size:18px; cursor:pointer; display:grid; place-items:center; }
.nav:active{ border-color:var(--color-accent); color:var(--color-accent-fg); }
.nav.up{ grid-area:1/2; } .nav.left{ grid-area:2/1; } .nav.right{ grid-area:2/3; } .nav.down{ grid-area:3/2; }
.okbtn{ grid-area:2/2; width:108px; height:108px; border-radius:50%; border:0; cursor:pointer; color:#fff; font:800 19px var(--font-ui);
background:radial-gradient(circle at 50% 38%, var(--color-accent-2), var(--color-accent)); box-shadow:var(--shadow-glow), 0 0 0 8px color-mix(in srgb,var(--color-accent-bright) 14%, transparent); }
.okbtn:active{ transform:scale(.97); }
.widebtn{ width:100%; height:54px; border-radius:18px; background:var(--color-surface); border:1px solid var(--color-border);
color:var(--color-fg); font:600 15px var(--font-ui); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.widebtn.danger:active{ border-color:#b3402f; color:#ff9d9d; }
/* remote deck (virtual pages + custom buttons), à la kac-remote */
.deckhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.deckhead .dname{ font-weight:700; letter-spacing:-.01em; }
.deckheadbtns{ display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
/* single 3↔4 column toggle next to the finish button (glyph = current column count) */
.coltoggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface); color:var(--color-accent-fg); cursor:pointer; }
.coltoggle:hover{ background:var(--color-accent-bg); border-color:var(--color-accent-2); }
.coltoggle svg{ width:18px; height:15px; display:block; }
.dnameedit{ background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:9px; padding:6px 11px;
font:700 15px var(--font-ui); color:var(--color-fg); max-width:62%; }
.dnameedit:focus{ outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
.editbtn{ background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-accent-fg); border-radius:var(--radius-pill); padding:6px 14px; font:600 13px var(--font-ui); cursor:pointer; }
/* finish-editing = a check (fajka), matching the app's other confirm buttons */
.editbtn.done{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; background:var(--color-accent-bg); border-color:transparent; }
.editbtn.done svg{ width:17px; height:17px; display:block; }
/* ── condition inspector (editor · v1.36) ─────────────────────────────────── */
.inspsheet{ max-width:720px; width:min(720px, 94vw); }
.inspgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
.inspgrid > div:empty{ display:none; }
.inspframe{ position:relative; border:1px solid var(--color-border-strong); border-radius:12px; overflow:hidden; background:#000; }
.inspframe img{ display:block; width:100%; height:auto; min-height:80px; }
.inspregion{ position:absolute; border:2px solid var(--color-accent-bright); box-shadow:0 0 0 200vmax color-mix(in srgb, #000 45%, transparent); pointer-events:none; }
.inspknobs{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.inspknobs select, .inspknobs input[type="text"], .inspknobs input:not([type]){ width:100%; }
.inspknobs input[type="range"]{ width:100%; accent-color:var(--color-accent-fg); }
.insplbl{ font-size:12px; color:var(--color-fg-subtle); display:flex; justify-content:space-between; margin-top:4px; }
.inspresult{ margin-top:12px; padding:10px 13px; border-radius:12px; font:600 13px var(--font-ui); background:var(--color-surface-alt); }
.inspresult.pass{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.inspresult.fail{ background:var(--color-error-bg, #2a1515); color:var(--color-error-fg, #ff9d9d); }
/* ── 🎯 element picker (editor, mockup v2's last layer) ─────────────────────── */
.elpsheet{ width:min(560px, 94vw); }
.elpsub{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:4px; }
.elpfilter{ width:100%; margin-top:10px; }
.elplist{ margin-top:8px; max-height:46vh; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.elprow{ display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; padding:9px 11px; border-radius:10px;
border:1px solid var(--color-border); background:var(--color-bg-soft); cursor:pointer; color:var(--color-fg); }
.elprow:hover, .elprow:focus-visible{ border-color:var(--color-accent-bright); }
.elpsel{ font:600 12.5px var(--font-mono, monospace); color:var(--color-accent-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; flex:none; }
.elptxt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.elptxt.dim{ color:var(--color-fg-subtle); }
.elpmeta{ margin-left:auto; flex:none; font-size:var(--fs-xs); color:var(--color-fg-subtle); white-space:nowrap; }
.elpmeta .elpfoc{ color:var(--color-accent-fg); }
/* ── global nav (UX audit batch B, variant C: icon tabs + active chip) ─────── */
.gnav{ position:sticky; top:0; z-index:60; background:var(--color-surface); border-bottom:1px solid var(--color-border-strong); box-shadow:0 6px 22px rgba(0,0,0,.16); }
/* expand-on-top: at the very top the bar is taller and shows the wordmark; it shrinks to the
compact bar (the previous look) as soon as the user scrolls down — JS toggles .shrunk. */
.gnav .in{ max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:6px; padding:13px 18px; position:relative; transition:padding .28s var(--ease-out, cubic-bezier(.4,0,.2,1)); }
.gnav.shrunk .in{ padding:8px 18px; }
.gnav .glogo{ border:0; background:none; padding:2px 8px 2px 0; cursor:pointer; display:flex; align-items:center; }
.gnav .glogo .mark{ width:40px; height:40px; border-radius:11px; display:block; transition:width .28s var(--ease-out, cubic-bezier(.4,0,.2,1)), height .28s var(--ease-out, cubic-bezier(.4,0,.2,1)), border-radius .28s var(--ease-out, cubic-bezier(.4,0,.2,1)); }
.gnav.shrunk .glogo .mark{ width:30px; height:30px; border-radius:9px; }
/* optical centre: the wordmark is all-lowercase (x-height mass sits low in the em box), so the
geometrically-centred line box reads ~2px low next to the icon/tabs — nudge the ink up. */
.gnav .glogo .gname{ font-size:20px; margin-left:10px; max-width:220px; opacity:1; overflow:hidden; white-space:nowrap; line-height:1; transform:translateY(-2px);
font-weight:800; letter-spacing:-.01em; color:var(--color-fg); /* "screen" = theme fg (the button is white — would vanish on a light bar); "where" stays accent green */
transition:max-width .28s var(--ease-out, cubic-bezier(.4,0,.2,1)), opacity .2s ease, margin-left .28s var(--ease-out, cubic-bezier(.4,0,.2,1)), font-size .28s var(--ease-out, cubic-bezier(.4,0,.2,1)); }
.gnav.shrunk .glogo .gname{ max-width:0; opacity:0; margin-left:0; font-size:15px; }
@media (prefers-reduced-motion: reduce){ .gnav .in, .gnav .glogo .mark, .gnav .glogo .gname{ transition:none; } }
.gtabs{ display:flex; gap:4px; }
.gtab{ border:0; background:none; color:var(--color-fg-subtle); font:600 14px var(--font-ui); padding:8px 14px; border-radius:12px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.gtab:hover{ color:var(--color-fg); background:var(--color-surface-alt); }
.gtab.on{ background:var(--color-accent-bg); color:var(--color-accent-fg); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-accent-fg) 30%, transparent); }
.gtab svg{ width:16px; height:16px; flex:none; }
.gtab .bdg{ display:inline-block; min-width:17px; padding:1px 5px; border-radius:999px; background:var(--color-error-bg, #2a1515); color:var(--color-error-fg, #ff9d9d); font-size:11px; font-weight:700; text-align:center; }
/* section tooltip: one shared card under the hovered tab */
.navtip{ position:absolute; top:calc(100% + 8px); transform:translateX(-50%) translateY(-4px); max-width:300px; z-index:70;
background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:14px; padding:11px 14px;
box-shadow:0 14px 40px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.25); opacity:0; transition:opacity .16s ease, transform .16s var(--ease-out, ease-out); pointer-events:none; }
.navtip.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.navtip::before{ content:""; position:absolute; top:-5px; left:50%; width:9px; height:9px; transform:translateX(-50%) rotate(45deg);
background:var(--color-surface); border-left:1px solid var(--color-border-strong); border-top:1px solid var(--color-border-strong); }
.navtip b{ display:block; font-size:13.5px; color:var(--color-fg); margin-bottom:3px; }
.navtip span{ display:block; font-size:12.5px; line-height:1.45; color:var(--color-fg-muted); }
/* mobile: tabs collapse into a classic dropdown under the burger (owner pick 2026-07-09
— was a bottom sheet; anchored to the sticky .gnav, so absolute = right below the bar) */
.gburger{ display:none; }
@media (max-width:739.98px){
.gtabs{ display:none; }
.gburger{ display:grid; }
.navtip{ display:none; }
.gsheet{ position:absolute; top:calc(100% + 6px); right:10px; width:min(300px, calc(100vw - 20px)); background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:14px; padding:8px; z-index:80; box-shadow:var(--shadow-2, 0 14px 40px rgba(0,0,0,.45)); }
.gsheet .gtab{ display:flex; width:100%; font-size:15px; padding:12px 13px; border-radius:10px; }
}
/* dashboard: the collapsed operations section (charts live inside) */
details.provoz{ border:1px solid var(--color-border); border-radius:var(--radius-lg, 18px); background:var(--color-bg-soft); padding:0 16px; margin-top:18px; }
details.provoz summary{ cursor:pointer; padding:13px 2px; font:600 14px var(--font-ui); color:var(--color-fg-muted); list-style:none; display:flex; align-items:center; gap:9px; }
details.provoz summary::-webkit-details-marker{ display:none; }
details.provoz .chev{ margin-left:auto; transition:transform .15s; color:var(--color-fg-subtle); }
details[open].provoz .chev{ transform:rotate(180deg); }
details.provoz > *:not(summary){ margin-bottom:14px; }
/* kac-remote button: surface, soft shadow, rounded; active = accent tint */
.rkey,.deckbtn{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:22px; box-shadow:var(--shadow-1);
color:var(--color-fg); cursor:pointer; font:600 14px var(--font-ui); display:flex; align-items:center; justify-content:center; }
.rkey:active,.deckbtn:active{ background:var(--color-accent-bg); border-color:transparent; color:var(--color-accent-fg); }
.rkey.disabled,.rkey:disabled{ opacity:.4 !important; cursor:default; pointer-events:none; box-shadow:none; }
.rkey{ height:64px; gap:6px; }
.rkey .rl{ white-space:nowrap; }
/* volume — segmented pill (3 keys as one control) */
.volseg{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--color-surface); border:1px solid var(--color-border); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-1); }
.vseg{ height:64px; display:flex; align-items:center; justify-content:center; gap:7px; background:none; border:0; border-right:1px solid var(--color-border);
color:var(--color-fg); cursor:pointer; font:600 14px var(--font-ui); }
.vseg:last-child{ border-right:0; }
.vseg:active{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.vseg svg{ width:22px; height:22px; }
.rkey.accent{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); color:#fff; border-color:transparent; box-shadow:var(--shadow-glow); }
.rkey.danger:active{ background:var(--color-error-bg); color:var(--color-error-fg); }
/* D-pad: square panel, 4 corner-to-corner wedge zones, edge arrows, square OK */
.dpad{ position:relative; aspect-ratio:1/1; margin-top:14px; background:var(--color-surface-alt);
border:1px solid var(--color-border); border-radius:26px; overflow:hidden; }
.dpad .dx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.55; }
.dpad .dx path{ stroke:var(--color-border); stroke-width:1; vector-effect:non-scaling-stroke; }
.dz{ position:absolute; inset:0; cursor:pointer; z-index:1; -webkit-tap-highlight-color:transparent; transition:background .12s; }
.dz.up{ clip-path:polygon(0 0,100% 0,50% 50%); }
.dz.down{ clip-path:polygon(0 100%,100% 100%,50% 50%); }
.dz.left{ clip-path:polygon(0 0,0 100%,50% 50%); }
.dz.right{ clip-path:polygon(100% 0,100% 100%,50% 50%); }
.dz:active{ background:var(--color-accent-bg); }
.dico{ position:absolute; width:56px; height:56px; border-radius:16px; background:var(--color-surface); border:1px solid var(--color-border);
display:grid; place-items:center; pointer-events:none; box-shadow:var(--shadow-1); color:var(--color-fg); z-index:1; transition:background .12s,color .12s; }
.dico svg{ width:22px; height:22px; }
.dico.up{ top:14px; left:50%; transform:translateX(-50%); }
.dico.down{ bottom:14px; left:50%; transform:translateX(-50%); }
.dico.left{ left:14px; top:50%; transform:translateY(-50%); }
.dico.right{ right:14px; top:50%; transform:translateY(-50%); }
.dico.on{ background:var(--color-accent-bg); color:var(--color-accent-fg); border-color:transparent; }
.dok{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:34%; height:34%; border-radius:50%;
background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); color:#fff; border:0; cursor:pointer;
font:800 22px var(--font-ui); letter-spacing:-.02em; box-shadow:var(--shadow-glow); }
.dok:active{ background:linear-gradient(135deg,#04330a,var(--color-accent)); }
/* back = dominant full-width; home/settings/power = secondary row */
.rkey.backwide{ width:100%; height:62px; margin-top:12px; border-color:var(--color-border-strong); }
.rkey.backwide svg{ width:24px; height:24px; } .rkey.backwide .rl{ font-size:15px; font-weight:700; color:var(--color-fg); }
.rrow3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.rrow3.secondary .rkey{ height:52px; opacity:.82; min-width:0; overflow:hidden; }
.rrow3.secondary .rkey svg{ width:20px; height:20px; flex:none; } .rrow3.secondary .rkey .rl{ font-size:12px; }
/* text entry (types into the TV's focused field) — a low-key toggle + an input row */
/* "Text a aplikace": button + panel live in ONE shaded card when open (owner: the shaded
area used to start below the button, reading as two unrelated things) */
.akcewrap{ margin-top:10px; border-radius:18px; }
.akcewrap.open{ border:1px solid var(--color-border); background:var(--color-bg-soft); padding:8px; }
.rkey.textopen{ width:100%; height:44px; opacity:.72; }
.rkey.textopen svg{ width:19px; height:19px; } .rkey.textopen .rl{ font-size:12px; }
.rkey.textopen.on{ opacity:1; border-color:var(--color-border-strong); }
.rkey.textopen .chev{ display:inline-flex; margin-left:2px; }
.rkey.textopen .chev svg{ width:14px; height:14px; opacity:.55; transition:transform .2s var(--ease-out); }
.rkey.textopen.on .chev svg{ transform:rotate(180deg); }
.akcebody{ padding:2px 2px 4px; margin-top:6px; }
/* the app launcher as a real select, in the panel's control voice (52px pill) */
.lnsel{ flex:1; min-width:0; height:52px; padding:0 44px 0 16px; background:var(--color-surface); border:1px solid var(--color-border);
border-radius:22px; color:var(--color-fg); font:600 14px var(--font-ui); box-shadow:var(--shadow-1); cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 16px center; }
.lnsel:focus{ outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
.akcelbl{ font-size:11px; color:var(--color-fg-subtle); margin:6px 4px 4px; }
.akcebody .textrow{ margin-top:0; }
.textrow{ display:flex; gap:8px; margin-top:8px; }
.textrow input{ flex:1; min-width:0; height:52px; padding:0 16px; background:var(--color-surface); border:1px solid var(--color-border);
border-radius:22px; color:var(--color-fg); font:600 14px var(--font-ui); box-shadow:var(--shadow-1); }
.textrow input:focus{ outline:none; border-color:var(--color-accent-2); box-shadow:var(--shadow-focus); }
.textrow .txsend{ width:64px; height:52px; flex:none; }
.textrow .txsend svg{ width:20px; height:20px; }
/* the remote column is camera-resizable down to ~250px; below a threshold the
multi-column rows (vol pill + home/settings/power) collapse to icon-only so
labels never overflow the rounded buttons (titles keep them discoverable). The
labels slide/fade away (max-width+opacity) so the collapse animates with the drag. */
.pane.remote{ container-type:inline-size; }
.rrow3.secondary .rkey .rl, .volseg .vseg .rl{ overflow:hidden; max-width:90px;
transition:max-width .2s var(--ease-out), opacity .16s linear; }
@container (max-width:340px){
.rrow3.secondary .rkey .rl, .volseg .vseg .rl{ max-width:0; opacity:0; }
.rrow3.secondary .rkey{ gap:0; } .volseg .vseg{ gap:0; }
}
.deckgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.deckbtn{ position:relative; aspect-ratio:1/1; flex-direction:column; gap:5px; padding:4px; font-weight:600; }
/* in the deck, tiles fill the spanned cells (1×1 … 2×2) — square cells come from grid-auto-rows set in JS */
.deckgrid .deckbtn{ aspect-ratio:auto; width:100%; height:100%; }
.deckbtn .g{ font-size:22px; line-height:1; } .deckbtn .l{ font-size:10.5px; color:var(--color-fg-subtle); text-align:center; }
.deckbtn.add{ border-style:dashed; box-shadow:none; color:var(--color-fg-subtle); }
.deckbtn[draggable]{ cursor:grab; } .deckbtn.dragging{ opacity:.35; cursor:grabbing; }
.deckbtn .del{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; background:var(--color-error-bg);
color:var(--color-error-fg); border:1px solid var(--color-error-border); display:grid; place-items:center; font-size:14px; z-index:5; }
/* resize handle (bottom-right corner, edit mode) — drag to 1×1 … 2×2 */
.deckbtn .rsz{ position:absolute; right:-7px; bottom:-7px; width:23px; height:23px; border-radius:50%; background:var(--color-surface);
border:1px solid var(--color-success-border); display:grid; place-items:center; cursor:nwse-resize; touch-action:none;
color:var(--color-accent-fg); z-index:5; box-shadow:var(--shadow-1); }
.deckbtn .rsz svg{ width:13px; height:13px; }
.deckbtn.resizing{ outline:2px solid var(--color-accent-bright); outline-offset:1px; }
/* spacer: empty space in view; faint dashed placeholder in edit */
.deckbtn.spacer{ background:transparent; border:0; box-shadow:none; cursor:default; }
.deckbtn.spacer.editing{ border:1.5px dashed var(--color-border-strong); background:rgba(128,128,128,.06); cursor:grab; }
.deckbtn.spacer .sl{ font-size:10.5px; color:var(--color-fg-subtle); }
.spacerface{ display:grid; place-items:center; } .spacerface svg{ width:26px; height:26px; opacity:.7; }
.gtxt{ font-size:18px; font-weight:800; line-height:1; }
.crk.cspan{ aspect-ratio:auto; width:100%; height:100%; min-width:0; overflow:hidden; }
.crk.cspan .l{ display:none; } /* floating overlay = icon-only, always fits the width */
.crk.cspan .gnum,.crk.cspan .gtxt{ font-size:15px; }
.appfoot{ display:flex; align-items:center; justify-content:center; gap:10px; padding:22px 16px 28px; margin-top:8px;
border-top:1px solid var(--color-border); color:var(--color-fg-subtle); font-size:13px; }
.appfoot .dotsep{ opacity:.5; } .appfoot a{ color:var(--color-accent-fg); text-decoration:none; font-weight:600; }
.appfoot a:hover{ text-decoration:underline; }
.appfoot .appver{ opacity:.7; font-size:12px; }
/* subtle pre-auth controls (theme + language) — visible ONLY on the login screen;
inner screens carry the theme toggle in the global nav instead */
.appfoot .footctl{ display:none; align-items:center; justify-content:center; width:24px; height:24px;
padding:0; border:none; border-radius:99px; background:none; color:inherit; opacity:.45; cursor:pointer;
transition:opacity .15s ease, transform .3s ease; }
.appfoot .footctl:hover, .appfoot .footctl:focus-visible{ opacity:1; }
.appfoot .footctl[data-theme-toggle]:hover{ transform:rotate(-14deg); }
.appfoot .footctl svg{ width:15px; height:15px; }
.appfoot .footctl.lng{ width:auto; padding:0 4px; font-size:11px; font-weight:700; letter-spacing:.06em; }
body:has(.screen[data-screen=login].active) .appfoot .footctl{ display:inline-flex; }
@media (max-width:560px){ .appfoot{ flex-wrap:wrap; gap:6px 10px; } }
.echip{ display:inline-flex; align-items:center; gap:4px; background:var(--color-surface-alt); border:1px solid var(--color-border);
border-radius:var(--radius-pill); padding:5px 5px 5px 12px; font-size:13px; margin:0 6px 6px 0; }
.echip button{ width:20px; height:20px; border-radius:50%; border:0; background:transparent; color:var(--color-fg-subtle); cursor:pointer; font-size:15px; line-height:1; }
.echip button:hover{ background:var(--color-error-bg); color:var(--color-error-fg); }
/* page switcher: named tabs (no swipe) */
.pagetabs{ display:flex; gap:8px; margin-top:18px; overflow-x:auto; padding-bottom:2px; }
.ptab{ flex:none; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg-muted);
border-radius:var(--radius-pill); padding:8px 15px; font:600 13px var(--font-ui); cursor:pointer; transition:.16s var(--ease-out); }
.ptab:not(.on):hover{ color:var(--color-fg); border-color:var(--color-border-strong); background:var(--color-bg-soft); }
.ptab.on{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); color:#fff; border-color:transparent; }
.ptab.padd{ color:var(--color-accent-fg); background:var(--color-accent-bg); border-color:transparent; }
/* remote workspace (plane) switcher — clearly its own control */
.deckpager{ margin-top:20px; padding-top:14px; border-top:1px solid var(--color-border); min-width:0; } /* below the deck; #deckView's locked min-height keeps it from jumping */
.deckhint{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-fg-subtle); margin-bottom:9px; }
.deckhint svg{ width:14px; height:14px; }
.deckrow{ display:flex; align-items:center; gap:10px; }
.deckscrollwrap{ position:relative; flex:1; min-width:0; }
.deckscroll{ overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.deckscroll::-webkit-scrollbar{ display:none; }
/* right-edge fade hints there are more planes to scroll to — only while the strip can
actually scroll further right (toggled by JS via .more); hidden at the end / no overflow */
.deckscrollwrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none;
background:linear-gradient(to right, transparent, var(--color-bg)); opacity:0; transition:opacity .15s ease; }
.deckscrollwrap.more::after{ opacity:1; }
.deckseg{ flex:none; }
.deckseg button{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.deckseg button svg{ width:14px; height:14px; opacity:.9; }
.deckadd{ flex:none; display:inline-flex; align-items:center; gap:6px; background:none; border:1px dashed var(--color-border-strong);
color:var(--color-accent-fg); border-radius:var(--radius-pill); padding:8px 14px; font:600 13px var(--font-ui); cursor:pointer; }
.deckadd:hover{ border-color:var(--color-accent-2); background:var(--color-accent-bg); }
.deckadd svg{ width:15px; height:15px; }
/* padding gives the tile shadows room so overflow:auto doesn't clip them at the edges */
.catgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; max-height:46vh; overflow:auto; padding:6px 7px 9px; }
.rkey svg{ width:22px; height:22px; } .rkey .rl{ font-size:13px; }
.deckbtn .g{ display:grid; place-items:center; } .deckbtn .g svg{ width:24px; height:24px; }
.gnum{ font-size:20px; font-weight:700; line-height:1; }
/* no overflow:hidden — it would clip the edit ×/resize handles that sit at the tile's
negative corners; the sheen is instead self-clipped via border-radius:inherit */
.colortile{ background:var(--c); color:#fff; border:0; position:relative; box-shadow:0 1px 2px rgba(10,15,10,.06); }
.colortile::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%); }
.colortile .l{ color:rgba(255,255,255,.95); position:relative; font-size:11px; font-weight:700; letter-spacing:.04em; }
.colortile:active{ filter:brightness(.92); }
.kv{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--color-border); font-size:14px; }
.kv:last-child{ border-bottom:0; } .kv .k{ color:var(--color-fg-subtle); }
/* settings rows + toggles + segmented */
.rows{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid var(--color-border); }
.row:last-child{ border-bottom:0; }
.row .rt{ flex:1; } .row .rt .rs{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:2px; }
.toggle{ width:46px; height:28px; border-radius:999px; background:var(--color-surface-alt); border:1px solid var(--color-border); position:relative; cursor:pointer; flex:none; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; transition:left var(--dur-fast); }
.toggle.on{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); border-color:transparent; }
.toggle.on::after{ left:20px; }
.seg{ display:inline-flex; background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:12px; padding:3px; gap:3px; }
.seg button{ background:none; border:0; color:var(--color-fg-muted); padding:7px 14px; border-radius:9px; font:600 13px var(--font-ui); cursor:pointer; }
.seg button.on{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); color:#fff; }
.seg.sm{ border-radius:9px; padding:2px; } .seg.sm button{ padding:4px 10px; border-radius:7px; font-size:12px; }
.stepper{ display:inline-flex; align-items:center; gap:10px; }
.stepper .sb{ width:34px; height:34px; border-radius:10px; background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg); font-size:18px; cursor:pointer; }
.note{ font-size:var(--fs-xs); color:var(--color-fg-subtle); text-align:center; padding:8px; }
.hint{ font-size:var(--fs-xs); color:var(--color-fg-muted); background:var(--color-accent-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 12px; }
.footer{ padding:18px; text-align:center; color:var(--color-fg-subtle); font-size:var(--fs-xs); border-top:1px solid var(--color-border); margin-top:auto; }
.watermark{ position:fixed; bottom:8px; right:10px; z-index:900; font-size:10px; color:var(--color-fg-subtle); opacity:.6; pointer-events:none; }
.rolebadge{ position:fixed; bottom:8px; left:10px; z-index:900; font-size:11px; font-weight:600; padding:5px 11px; border-radius:999px;
border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-fg-muted); box-shadow:var(--shadow-1); }
body.admin:not(.superadmin) .rolebadge{ background:var(--color-success-bg); color:var(--color-success-fg); border-color:var(--color-success-border); }
body.superadmin .rolebadge{ background:linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); color:#fff; border-color:transparent; }
/* one tablet threshold (740): the split layout and the horizontal nav flip together, so
iPad mini portrait (744) gets the desktop arrangement and no width shows desktop nav
on a phone layout (the old 720/760 pair left a hybrid 721-759 zone) */
@media (min-width:740px){ .app{ max-width:1000px; } .tabs{ display:none; } .mobile-only{ display:none !important; }
.panes{ display:grid; grid-template-columns:1.3fr minmax(0,1fr); align-items:start; } .pane{ display:flex !important; }
.detail-left{ grid-column:1; } /* normal: camera + info stacked here, independent of the remote's height */
/* wide + full: flatten .detail-left so camera/remote sit on top, panels span full width below;
camera widens, remote stays compact (300px) so the two line up along the bottom */
/* dt-wide gets a narrower remote (270px) than inst-wide: the camera stretches to the max
the two-column layout allows and the compacted remote ends with it, so the DevTools
row below starts right under the tab strip (owner: no gap there) */
.panes.dt-wide{ grid-template-columns:1fr 270px; } .panes.inst-wide{ grid-template-columns:1fr 300px; }
.panes.dt-wide .detail-left, .panes.inst-wide .detail-left{ display:contents; }
.panes.inst-wide .pane.cam{ grid-column:1; grid-row:1; } .panes.inst-wide .pane.remote{ grid-column:2; grid-row:1; align-self:start; } .panes.inst-wide .pane.panels{ grid-column:1 / -1; grid-row:2; }
.panes.inst-wide #appPanel{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.panes.inst-wide #appPanel > *{ margin-top:0 !important; }
.panes.dt-wide .pane.cam{ grid-column:1; grid-row:1; } .panes.dt-wide .pane.remote{ grid-column:2; grid-row:1; align-self:start; } .panes.dt-wide .pane.panels{ grid-column:1 / -1; grid-row:2; } .panes.dt-wide #dtFrame{ height:72vh; }
/* full (largest): only DevTools breaks out to the full browser width */
.panes.dt-full .pane.panels{ width:100vw; margin-inline:calc(50% - 50vw); } .panes.dt-full #dtFrame{ height:82vh; }
/* compact the remote in the wide/full layout so it lines up with the camera's bottom:
trim the volume / back / home-settings-power rows and slim the plane switcher to one row */
.panes.dt-wide .vseg{ height:44px; } .panes.dt-wide .dpad{ margin-top:8px; }
.panes.dt-wide .rkey.backwide{ height:44px; margin-top:6px; } .panes.dt-wide .rrow3{ margin-top:6px; } .panes.dt-wide .rrow3.secondary .rkey{ height:40px; }
.panes.dt-wide .akcewrap{ margin-top:6px; } .panes.dt-wide .akcewrap > .rkey.textopen{ height:40px; }
.panes.dt-wide .deckpager{ margin-top:8px; padding-top:8px; } .panes.dt-wide .deckhint{ display:none; } }
/* picker per-row ★ favourite + Záznamy(count) controls (mirrors the dashboard) */
.set .rowctl{ display:flex; align-items:center; gap:6px; }
.tile .tilectl{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:10px; }
.rowfav, .rowrec, .rowedit{ display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid transparent; cursor:pointer; color:var(--color-fg-subtle); border-radius:9px; padding:5px 8px; font:inherit; font-size:12px; line-height:1; transition:.16s var(--ease-out); }
.rowfav, .rowedit{ line-height:0; padding:5px; }
.rowfav svg, .rowrec svg, .rowedit svg{ width:17px; height:17px; }
.rowedit:hover{ color:var(--color-accent-fg); background:var(--color-bg-soft); border-color:var(--color-border); }
.rowfav:hover{ color:var(--star); background:var(--color-bg-soft); }
.rowfav.on{ color:var(--star); }
.rowrec:hover:not(:disabled){ color:var(--color-accent-fg); background:var(--color-bg-soft); border-color:var(--color-border); }
.rowrec:disabled{ opacity:.4; cursor:not-allowed; }
.rowrec .n{ font-family:var(--font-num); }
/* ===== Dashboard (Přehled) — home. Ported from the approved mockup, scoped under
.dash so it never touches the picker/other screens. Header/toolbar/toast are the
app's; only dashboard-specific widgets live here. ===== */
.dash .summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 18px; }
.dash .stat{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:14px 16px; }
.dash .stat .big{ font-family:var(--font-num); font-size:1.7rem; line-height:1; }
.dash .stat .lbl{ color:var(--color-fg-subtle); font-size:12px; margin-top:6px; }
.dash .stat .dots{ display:flex; gap:6px; margin-top:8px; font-size:11px; color:var(--color-fg-muted); flex-wrap:wrap; }
.dash .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:4px; }
.dash .d-free{ background:var(--green-500); } .dash .d-use{ background:#e6b450; } .dash .d-off{ background:#5b6469; }
.dash .stat.link{ cursor:pointer; transition:.16s var(--ease-out); }
.dash .stat.link:hover{ border-color:var(--color-accent-bright); transform:translateY(-1px); }
.dash .stat.link:focus-visible{ outline:2px solid var(--color-accent-bright); outline-offset:2px; }
/* storage quota — linear meter (Drive/Dropbox pattern) */
.dash .stat.storage{ display:flex; flex-direction:column; justify-content:center; gap:9px; }
.dash .sthead{ display:flex; align-items:baseline; justify-content:space-between; }
.dash .stnums{ font-family:var(--font-num); font-size:1.15rem; }
.dash .stnums b{ font-weight:600; } .dash .stnums .of{ color:var(--color-fg-subtle); font-size:.78rem; }
.dash .meter{ height:8px; border-radius:var(--radius-pill); background:var(--color-bg-soft); border:1px solid var(--color-border); overflow:hidden; }
.dash .meter .mfill{ display:block; height:100%; border-radius:var(--radius-pill); transform-origin:left; animation:dbgrow .9s var(--ease-out) both;
background:linear-gradient(90deg,var(--color-accent),var(--color-accent-bright)); box-shadow:0 0 8px rgba(45,209,64,.35); }
.dash .meter.warn .mfill{ background:linear-gradient(90deg,#b8860b,#e6b450); box-shadow:0 0 8px rgba(230,180,80,.35); }
.dash .meter.crit .mfill{ background:linear-gradient(90deg,#8a2020,#ff6b6b); box-shadow:0 0 8px rgba(255,107,107,.4); }
.dash .stfoot{ display:flex; align-items:baseline; justify-content:space-between; font-size:12px; }
.dash .stfoot .free{ color:var(--color-accent-fg); font-weight:600; }
.dash .stfoot .pct{ color:var(--color-fg-subtle); font-family:var(--font-num); }
/* phone: the 4-up grid can't fit — a swipeable snap row with a peeking next card
(owner pick 2026-07-09: variant B over a 2×2 grid); position dots under it */
.dash .swdots{ display:none; gap:5px; justify-content:center; margin-top:8px; }
.dash .swdots i{ width:5px; height:5px; border-radius:50%; background:var(--color-border-strong); }
.dash .swdots i.on{ background:var(--color-accent-fg); }
@media (max-width:600px){
.dash .summary{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none; margin-bottom:0; }
.dash .summary::-webkit-scrollbar{ display:none; }
.dash .stat{ flex:0 0 168px; scroll-snap-align:start; }
.dash .swdots{ display:flex; margin-bottom:18px; }
.dash .sthead{ flex-wrap:wrap; column-gap:8px; }
.dash .stnums{ font-size:1rem; }
}
/* chart panel + carousel */
/* live-egress panel (#10) — super-only infra glance */
.dash .egress-panel{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:13px 16px; margin-bottom:18px; box-shadow:var(--shadow-1); }
.dash .egress-panel[hidden]{ display:none; }
.dash .eg-head{ display:flex; align-items:center; gap:10px; }
.dash .eg-ttl{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--color-fg-subtle); letter-spacing:.02em; text-transform:uppercase; }
.dash .eg-ttl svg{ width:16px; height:16px; color:var(--color-accent-fg); }
.dash .eg-info{ display:inline-grid; place-items:center; padding:2px; margin-left:1px; background:none; border:0; cursor:help; color:var(--color-fg-subtle); border-radius:50%; transition:.16s var(--ease-out); }
.dash .eg-info svg{ width:14px; height:14px; }
.dash .eg-info:hover{ color:var(--color-accent-fg); background:var(--color-bg-soft); }
.dash .eg-total{ margin-left:auto; display:flex; align-items:baseline; gap:5px; }
.dash .eg-total b{ font-size:20px; color:var(--color-accent-fg); }
.dash .eg-total .eg-u{ font-size:12px; color:var(--color-fg-subtle); }
.dash .eg-total.warn b{ color:#cf9b2f; } .dash .eg-total.crit b{ color:var(--color-error-fg); }
/* utilization gauge: current egress vs the operating budget, green→amber→red */
.dash .eg-gauge{ margin:11px 0 2px; }
.dash .eg-gtrack{ height:10px; border-radius:var(--radius-pill); background:var(--color-bg-soft); border:1px solid var(--color-border); overflow:hidden; }
.dash .eg-gfill{ display:block; height:100%; min-width:2px; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--color-accent),var(--color-accent-bright)); transition:width .45s var(--ease-out), background .3s; }
.dash .eg-gauge.warn .eg-gfill{ background:linear-gradient(90deg,#e6b450,#f0c64a); }
.dash .eg-gauge.crit .eg-gfill{ background:linear-gradient(90deg,#e0795f,#e23b2e); }
.dash .eg-gscale{ display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:var(--color-fg-subtle); }
.dash .eg-empty{ margin-top:7px; font-size:13px; color:var(--color-fg-subtle); }
.dash .eg-sets{ margin-top:9px; display:flex; flex-wrap:wrap; gap:8px; }
.dash .eg-chip{ display:inline-flex; flex-direction:column; gap:1px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:5px 12px; }
.dash .eg-chip .eg-name{ font-size:13px; font-weight:600; }
.dash .eg-chip .eg-meta{ font-size:11.5px; color:var(--color-fg-subtle); }
.dash .eg-chip .eg-meta b{ color:var(--color-fg); }
.dash .eg-note{ margin-top:9px; font-size:11px; }
/* Energy panel (2a) — super-only consumption + cost. cost = amber, ghost = prev period */
.dash .energy-panel{ --en-cost:#e6b450; --en-ghost:#5b6b62; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:16px 18px 18px; margin-bottom:18px; box-shadow:var(--shadow-1); }
.dash .energy-panel[hidden]{ display:none; }
.dash .en-head{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.dash .energy-panel.expanded .en-head{ margin-bottom:14px; }
.dash .en-mini{ font-size:12.5px; color:var(--color-fg-muted); white-space:nowrap; }
.dash .en-chev{ color:var(--color-fg-subtle); font-size:15px; transition:transform .2s var(--ease-out,ease); flex:none; }
.dash .energy-panel.expanded .en-chev{ transform:rotate(90deg); }
.dash .energy-panel:not(.expanded) .en-sub{ display:none; } /* collapsed = one compact line */
.dash .energy-panel.expanded .en-mini{ display:none; } /* expanded = tiles show the numbers */
.dash .energy-panel:not(.expanded) .en-body{ display:none; }
.dash .en-head:hover .en-chev{ color:var(--color-fg-muted); }
.dash .en-ic{ width:32px; height:32px; border-radius:9px; background:var(--color-accent-bg); color:var(--color-accent-fg); display:grid; place-items:center; flex:none; } .dash .en-ic svg{ width:18px; height:18px; }
.dash .en-ttl{ font-weight:700; font-size:15px; } .dash .en-sub{ font-size:12px; color:var(--color-fg-subtle); }
.dash .en-super{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#e6b450; border:1px solid color-mix(in srgb,#e6b450 40%,transparent); border-radius:var(--radius-pill); padding:3px 8px; }
.dash .en-ctl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.dash .en-seg{ display:inline-flex; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:3px; flex-wrap:wrap; }
.dash .en-seg button{ border:0; background:none; color:var(--color-fg-subtle); padding:5px 12px; border-radius:var(--radius-pill); cursor:pointer; font:inherit; font-size:12px; white-space:nowrap; }
.dash .en-seg button.on{ background:var(--color-accent-bg); color:var(--color-accent-fg); font-weight:700; }
.dash .en-price{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--color-fg-muted); background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:4px 6px 4px 12px; }
.dash .en-price input{ width:62px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; color:var(--color-fg); font:inherit; font-size:12px; text-align:right; padding:4px 9px; }
.dash .en-delta{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:650; padding:3px 9px; border-radius:var(--radius-pill); }
.dash .en-delta.down{ color:var(--color-success-fg); background:var(--color-success-bg); }
.dash .en-delta.up{ color:#e6b450; background:color-mix(in srgb,#e6b450 14%,transparent); }
.dash .en-delta.flat{ color:var(--color-fg-subtle); background:var(--color-bg-soft); }
.dash .en-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.dash .en-tile{ background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:14px; padding:13px 15px; }
.dash .en-lab{ font-size:12px; color:var(--color-fg-subtle); }
.dash .en-val{ font-family:var(--font-num); font-size:1.6rem; font-weight:700; margin-top:6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dash .en-val small{ font-size:.82rem; font-weight:600; color:var(--color-fg-muted); margin-left:4px; }
.dash .en-tile.cost .en-val .big{ color:var(--en-cost); }
.dash .en-charth{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.dash .en-ctt{ font-size:12px; color:var(--color-fg-muted); font-weight:600; }
.dash .en-leg{ display:inline-flex; gap:14px; font-size:11px; color:var(--color-fg-subtle); margin-left:auto; }
.dash .en-leg i{ width:11px; height:11px; border-radius:3px; display:inline-block; vertical-align:-1px; margin-right:5px; }
.dash .en-leg .now{ background:var(--color-accent-bright); } .dash .en-leg .prev{ border:1.5px dashed var(--en-ghost); }
.dash .en-chart{ position:relative; height:170px; display:flex; align-items:flex-end; gap:5px; padding:0 2px 22px 30px; border-bottom:1px solid var(--color-border); }
.dash .en-col{ flex:1; display:flex; align-items:flex-end; justify-content:center; height:100%; position:relative; cursor:pointer; }
.dash .en-col.en-empty{ align-items:center; justify-content:center; color:var(--color-fg-subtle); font-size:12px; cursor:default; }
.dash .en-bars{ position:relative; width:100%; max-width:30px; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.dash .en-fill{ width:64%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--color-accent-bright),color-mix(in srgb,var(--color-accent-bright) 28%,var(--color-accent-bg))); position:relative; z-index:2; transition:filter .15s, transform .15s; }
.dash .en-ghost{ position:absolute; left:0; right:0; margin:auto; width:100%; border:1.5px dashed var(--en-ghost); border-bottom:0; border-radius:5px 5px 0 0; background:color-mix(in srgb,var(--en-ghost) 12%,transparent); z-index:1; }
.dash .en-col:hover .en-fill{ filter:brightness(1.22); transform:translateY(-2px); }
.dash .en-xl{ position:absolute; bottom:-19px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--color-fg-subtle); white-space:nowrap; }
.dash .en-tip{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--color-bg); border:1px solid var(--color-border-strong,var(--color-border)); border-radius:9px; padding:7px 10px; font-size:12px; white-space:nowrap; box-shadow:var(--shadow-2,var(--shadow-1)); opacity:0; pointer-events:none; transition:opacity .12s; z-index:5; line-height:1.5; }
.dash .en-tip b{ color:var(--color-accent-fg); } .dash .en-tip .k{ color:var(--en-cost); } .dash .en-tip .pv{ color:var(--color-fg-subtle); }
.dash .en-col:hover .en-tip{ opacity:1; }
.dash .en-yaxis{ position:absolute; left:0; top:0; bottom:22px; width:26px; display:flex; flex-direction:column; justify-content:space-between; font-size:10px; color:var(--color-fg-subtle); text-align:right; pointer-events:none; }
.dash .en-plugs{ margin-top:8px; }
.dash .en-kicker{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-fg-subtle); margin:12px 0 2px; }
.dash .en-plug{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--color-border); }
.dash .en-pic{ width:29px; height:29px; border-radius:8px; background:var(--color-accent-bg); color:var(--color-accent-fg); display:grid; place-items:center; flex:none; } .dash .en-pic svg{ width:15px; height:15px; }
.dash .en-pname{ font-size:14px; } .dash .en-pmeta{ font-size:12px; color:var(--color-fg-subtle); }
.dash .en-pright{ margin-left:auto; text-align:right; } .dash .en-pkwh{ font-weight:650; } .dash .en-pcost{ font-size:12px; color:var(--en-cost); }
.dash .en-note{ font-size:11px; color:var(--color-fg-subtle); margin-top:14px; line-height:1.5; }
/* Live-power sparkline (2b) — set detail. Curve visible to all; W value + stats are .superonly */
#livePowerCard .lp-head{ display:flex; align-items:center; gap:10px; }
#livePowerCard .lp-badge{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--color-accent-fg); }
#livePowerCard .lp-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--color-accent-bright); animation:lp-pulse 1.6s infinite; }
@keyframes lp-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent-bright) 55%,transparent);} 70%{ box-shadow:0 0 0 7px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
#livePowerCard .lp-row{ display:flex; align-items:center; gap:16px; margin-top:10px; }
#livePowerCard .lp-now{ flex:none; min-width:78px; }
#livePowerCard .lp-w{ font-family:var(--font-num); font-size:1.7rem; font-weight:750; line-height:1; }
#livePowerCard .lp-w small{ font-size:.82rem; font-weight:600; color:var(--color-fg-muted); margin-left:4px; }
#livePowerCard .lp-cap{ font-size:12px; color:var(--color-fg-subtle); margin-top:2px; }
#livePowerCard .lp-chart{ flex:1; min-width:0; }
#livePowerCard .lp-chart svg{ width:100%; height:64px; display:block; }
#livePowerCard .lp-stats{ flex:none; text-align:right; font-size:12px; color:var(--color-fg-subtle); line-height:1.7; white-space:nowrap; }
#livePowerCard .lp-stats b{ color:var(--color-fg); font-weight:650; }
/* Left-edge power gauge on device cards (dashboard card + picker tile). Fill = live draw,
glowing column (no dark hole, reaches both edges), bright cap at the level; W badge
(super) floats at the cap. The parent (.card/.tile) is position:relative; overflow:hidden
and reserves left padding. --pw (0..1) is set on the parent. */
.gx{ position:absolute; left:0; top:0; bottom:0; width:150px; z-index:0; pointer-events:none; }
.gx .col{ position:absolute; left:0; top:0; bottom:0; width:56px; filter:blur(.4px);
background:linear-gradient(to top, rgba(45,209,64,calc(.22 + var(--pw,0)*.10)), rgba(45,209,64,.06));
-webkit-mask:linear-gradient(90deg,#000,#000 5px,transparent 50px); mask:linear-gradient(90deg,#000,#000 5px,transparent 50px); }
.gx .spread{ position:absolute; inset:0; background:radial-gradient(calc(120px + var(--pw,0)*170px) circle at 3px calc(100% - 4px - (100% - 8px) * var(--pw,0)), rgba(45,209,64,calc(.10 + var(--pw,0)*.30)), transparent 66%); transition:background .6s var(--ease-out); }
.gx .fill{ position:absolute; left:0; bottom:4px; width:4px; height:calc((100% - 8px) * var(--pw,0)); border-radius:99px; background:linear-gradient(var(--color-accent-bright),var(--color-accent-fg)); box-shadow:0 0 7px rgba(45,209,64,.7); transition:height .5s var(--ease-out); }
.gx .cap{ position:absolute; left:-1px; width:6px; height:6px; border-radius:50%; bottom:calc(4px + (100% - 8px) * var(--pw,0) - 3px); background:var(--gauge-cap,#eafff0); box-shadow:0 0 11px 3px rgba(90,245,135,calc(.55 + var(--pw,0)*.4)); transition:bottom .5s var(--ease-out); }
.wl{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--color-fg-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wl .ps-ic{ width:11px; height:11px; color:var(--color-accent-fg); flex:none; }
.wl.cap{ position:absolute; z-index:4; bottom:calc(4px + (100% - 8px) * var(--pw,0) - 10px); border-radius:9px; padding:2px 9px 2px 7px; transition:bottom .5s var(--ease-out); }
.wl.cap.right{ left:16px; background:color-mix(in srgb,var(--color-ink) 62%, transparent); backdrop-filter:blur(2px); } /* inside, next to the level (dashboard card) */
.wl.cap.left{ right:calc(100% + 9px); background:var(--color-surface); border:1px solid var(--color-border-strong); box-shadow:var(--shadow-2); } /* callout outside on the left (grid tile + dashboard card) — theme-aware surface so it reads on light too */
.wl.cap.left::after{ content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--color-border-strong); }
.wl.cap.left::before{ content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--color-surface); z-index:1; } /* arrow fill over the border-coloured arrow → a clean bordered pointer */
.twrap{ position:relative; } /* wraps a grid tile so the left W-callout isn't clipped */
.wl.corner{ position:absolute; z-index:4; left:10px; bottom:10px; padding:3px 10px 3px 8px; border-radius:999px;
background:var(--color-surface); border:1px solid var(--color-border-strong); box-shadow:var(--shadow-2); } /* static chip in the grid tile's corner — never overlaps a neighbour */
/* App-sign plane (Phase 1) — the set-detail "Instalace" tab: upload signing certs + sign a .wgt */
.sgn-sec{ margin-top:16px; }
.sgn-h{ font:600 12px/1 var(--font-ui); letter-spacing:.04em; text-transform:uppercase; color:var(--color-fg-subtle); margin-bottom:10px; }
.sgn-cert{ display:flex; gap:10px; }
.sgn-cert .field{ flex:1; min-width:0; }
.sgn-cert .field:last-child{ flex:0 0 118px; }
.sgn-file{ cursor:pointer; }
.sgn-status{ background:var(--color-bg-soft,#101513); border:1px solid var(--color-border); border-radius:12px; padding:4px 14px; }
.sgn-status .iv{ font-weight:600; }
.sgn-status .iv.ok{ color:var(--color-accent-fg); }
.sgn-status .sub{ display:block; font-size:11.5px; color:var(--color-fg-subtle); font-weight:400; }
.sgn-actions{ display:flex; gap:10px; margin-top:12px; }
.sgn-actions .btn{ width:auto; padding:9px 16px; }
.sgn-result{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px 14px; border-radius:12px;
background:var(--color-accent-bg); border:1px solid var(--color-accent-border,#1f4a2f); }
.sgn-result .ck{ color:var(--color-accent-fg); font-weight:700; display:flex; align-items:center; gap:7px; }
.sgn-result .btn{ width:auto; padding:8px 14px; margin-left:auto; }
.sgn-spin{ width:16px; height:16px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; display:inline-block; animation:spin .7s linear infinite; vertical-align:-3px; }
/* DUID helper row (cert section) — the value the operator enrolls in Certificate Manager */
.sgn-duid{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; border-top:1px solid var(--color-border); padding-top:14px; }
.sgn-duid code{ font:600 13px/1 var(--font-mono,monospace); color:var(--color-accent-fg); background:var(--color-bg-soft,#101513);
border:1px solid var(--color-border); border-radius:8px; padding:6px 10px; user-select:all; }
.sgn-duid .btn{ width:auto; padding:6px 14px; margin-left:auto; }
/* Cert-generation panel (mint certs straight from Samsung's CA — no Certificate Manager).
v1.72.0 redesign (mockups/device-form-redesign.html): segmented auto/manual choice,
numbered stepper, one 40px control height, dark command line that truncates (no scrollbar). */
.sgnseg{ display:inline-flex; background:var(--color-surface-alt); border-radius:11px; padding:3px; margin:12px 0 16px; }
.sgnseg button{ border:0; background:none; border-radius:9px; padding:8px 16px; font:600 13px var(--font-ui); color:var(--color-fg-subtle); cursor:pointer; }
.sgnseg button.on{ background:var(--color-surface); color:var(--color-accent-fg); box-shadow:0 1px 4px rgba(0,0,0,.14); }
#asMan[hidden]{ display:none; }
.sgn-gen-steps{ list-style:none; margin:0; padding:0; counter-reset:sgnstep; display:flex; flex-direction:column; gap:16px; font-size:13px; color:var(--color-fg-subtle); }
.sgn-gen-steps li{ counter-increment:sgnstep; display:grid; grid-template-columns:28px 1fr; gap:2px 12px; line-height:1.4; }
.sgn-gen-steps li::before{ content:counter(sgnstep); grid-row:1 / span 9; width:26px; height:26px; border-radius:50%;
background:var(--color-surface-alt); color:var(--color-accent-fg); display:grid; place-items:center; font:700 13px var(--font-ui); margin-top:1px; }
.sgn-gen-steps li > *{ grid-column:2; min-width:0; } /* the nowrap command must truncate, not widen the track */
.sgn-step-t{ display:block; font:600 13.5px var(--font-ui); color:var(--color-fg); margin:3px 0 6px; }
.sgn-cmd{ display:flex; align-items:center; gap:8px; height:40px; box-sizing:border-box; background:var(--color-ink); border-radius:10px; padding:0 6px 0 14px; }
.sgn-cmd code{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; font:500 12.5px/1.4 var(--font-mono,monospace); color:#7fe08c; user-select:all;
-webkit-mask:linear-gradient(90deg,#000 92%,transparent); mask:linear-gradient(90deg,#000 92%,transparent); } /* fade-out truncation, no scrollbar */
.sgn-cmd .btn{ width:auto; height:30px; padding:0 12px; flex:0 0 auto; border:0; background:rgba(255,255,255,.13); color:#eafff0; font-size:12px; border-radius:8px; }
.sgn-token{ display:flex; align-items:center; gap:7px; margin-top:8px; font-size:12.5px; color:var(--color-fg-subtle); }
.sgn-token .ck-mini{ color:var(--color-accent-fg); font-weight:700; }
.sgn-sel{ display:block; height:40px; box-sizing:border-box; width:220px; max-width:100%; padding:0 34px 0 12px; border-radius:10px; border:1px solid var(--color-border-strong); background:var(--color-bg); color:var(--color-fg); font:500 14px var(--font-ui);
appearance:none; -webkit-appearance:none; /* custom caret, inset from the right edge (the native one hugged the border) */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center; }
.sgn-grp{ display:flex; }
.sgn-grp input{ flex:1; min-width:0; height:40px; box-sizing:border-box; padding:0 12px; border:1px solid var(--color-border-strong); border-right:0; border-radius:10px 0 0 10px; background:var(--color-bg); color:var(--color-fg); font:500 14px var(--font-ui); }
.sgn-grp input:focus{ outline:none; border-color:var(--color-accent-2); }
.sgn-grp .btn{ width:auto; height:40px; padding:0 14px; border-radius:0 10px 10px 0; margin:0; }
.sgn-actr{ display:flex; justify-content:flex-end; margin-top:16px; }
.sgn-actr .btn{ width:auto; padding:10px 22px; }
/* Per-step install results (connect → push → install → launch) */
.sgn-steps{ margin-top:14px; background:var(--color-bg-soft,#101513); border:1px solid var(--color-border); border-radius:14px; padding:14px 16px; }
/* auto-install progress (drop → sign → push → install → launch) */
.aip-file{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; margin-bottom:8px; }
.aip-fico{ font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--color-accent-fg); background:var(--color-accent-bg); border-radius:7px; padding:5px 6px; flex:none; }
.aip-fn{ overflow-wrap:anywhere; }
.aip-list{ display:flex; flex-direction:column; }
.aip-step{ display:flex; align-items:center; gap:11px; padding:8px 0; font-size:14px; color:var(--color-fg-subtle); border-top:1px dashed var(--color-border); }
.aip-step:first-child{ border-top:0; }
.aip-step.done, .aip-step.run, .aip-step.bad{ color:var(--color-fg); }
.aip-dot{ width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; }
.aip-pend{ width:13px; height:13px; border:2px solid var(--color-border-strong); border-radius:50%; display:inline-block; }
.aip-lbl{ flex:1; }
.aip-step.run .aip-lbl{ font-weight:600; }
.aip-det{ font-size:12px; color:var(--color-fg-subtle); text-align:right; overflow-wrap:anywhere; max-width:52%; }
.aip-step.bad .aip-det{ color:var(--danger,#e05d5d); }
.aip-step.hasdet{ cursor:pointer; }
.aip-step.hasdet:hover .aip-lbl{ color:var(--color-accent-fg); }
.aip-chev{ color:var(--color-fg-subtle); flex:none; display:flex; transition:transform .15s ease; margin-left:6px; }
.aip-chev svg{ width:15px; height:15px; }
.aip-step.open .aip-chev{ transform:rotate(90deg); }
.aip-detbox{ margin:2px 0 8px 33px; padding:10px 12px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.55; color:var(--color-fg-muted); white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto; }
.aip-dot .sgn-spin{ width:16px; height:16px; border-width:2.5px; border-color:color-mix(in srgb, var(--color-accent) 22%, transparent); border-top-color:var(--color-accent); vertical-align:0; }
.dropzone.busy{ opacity:.5; pointer-events:none; }
.sgn-steps .irow .ik{ display:flex; align-items:center; gap:8px; }
.sgn-steps .st-ok{ color:var(--color-accent-fg); }
.sgn-steps .st-bad{ color:var(--danger,#e05d5d); }
.sgn-steps .iv{ font-size:12px; color:var(--color-fg-subtle); text-align:right; overflow-wrap:anywhere; max-width:70%; }
.sgn-steps .iv.bad{ color:var(--danger,#e05d5d); }
/* Mini live-power sparkline — kept for picker LIST rows (list view unchanged) */
.pspark{ display:inline-flex; align-items:center; gap:6px; margin-top:5px; }
.pspark .ps-ic{ width:12px; height:12px; color:var(--color-fg-subtle); flex:none; }
.pspark.on .ps-ic{ color:var(--color-accent-fg); }
.pspark .ps-svg{ width:52px; height:16px; display:block; }
.pspark .ps-svg path{ fill:none; stroke:var(--color-fg-subtle); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
.pspark.on .ps-svg path{ stroke:var(--color-accent-bright); }
.pspark .ps-w{ font-size:11px; color:var(--color-fg-muted); font-weight:600; }
.dash .chart-panel{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:18px 20px 10px; margin-bottom:18px; box-shadow:var(--shadow-1); }
.dash .chart-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:8px; } /* controls align to the title row, not the big number */
.dash .chart-head .ttl{ font-size:13px; color:var(--color-fg-subtle); letter-spacing:.02em; text-transform:uppercase; }
.dash .chart-head .val{ font-family:var(--font-num); font-size:1.9rem; line-height:.9; }
.dash .chart-head .grow{ flex:1; }
.dash .trend{ font-size:12px; font-weight:600; padding:4px 9px; border-radius:var(--radius-pill); background:var(--color-success-bg); color:var(--color-success-fg); border:1px solid var(--color-success-border); }
.dash .trend.neutral{ background:var(--color-bg-soft); color:var(--color-fg-muted); border-color:var(--color-border); }
.dash .rangeseg{ display:flex; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:2px; }
.dash .rangeseg button{ border:0; background:none; color:var(--color-fg-subtle); padding:5px 11px; border-radius:var(--radius-pill); cursor:pointer; font:inherit; font-size:12px; }
.dash .rangeseg button.on{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.dash .ch-title .ttl{ margin-bottom:11px; } /* breathe between the title and the big count */
.dash .ch-title .vu{ font-size:.8rem; color:var(--color-fg-subtle); }
.dash .chart{ position:relative; width:100%; }
.dash .chart svg{ display:block; width:100%; height:150px; overflow:visible; }
.dash .chart .area{ animation:dbfade .9s var(--ease-out) both; }
.dash .chart .line{ fill:none; stroke:var(--color-accent-bright); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 4px 10px rgba(45,209,64,.35)); }
.dash .chart .line.draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:dbdraw 1.1s var(--ease-out) forwards; }
.dash .chart .gln{ stroke:var(--color-border); stroke-width:1; stroke-dasharray:3 4; opacity:.5; }
.dash .chart .xlab{ fill:var(--color-fg-subtle); font-size:10px; font-family:var(--font-ui); }
.dash .chart .cross{ stroke:var(--color-accent-bright); stroke-width:1; opacity:0; }
.dash .chart .cdot{ fill:var(--color-accent-bright); stroke:var(--color-surface); stroke-width:2.5; opacity:0; }
.dash .chart .hit{ fill:transparent; cursor:crosshair; }
.dash .chart .pt{ fill:var(--color-accent-bright); }
/* vector-effect keeps the thin marker lines crisp despite the SVG's horizontal stretch */
.dash .chart .mk{ stroke-width:1.6; vector-effect:non-scaling-stroke; }
.dash .chart .mk.med{ stroke:var(--color-accent-bright); }
.dash .chart .mk.avg{ stroke:#e6b450; stroke-dasharray:4 4; }
.dash .chart .mk.all{ stroke:#7fb0ff; stroke-dasharray:2 3; opacity:.8; }
/* crisp HTML overlays for chart text (SVG blurs under the horizontal stretch) */
.dash .chart .mkcaps{ position:absolute; left:0; right:0; top:1px; pointer-events:none; }
.dash .chart .mko{ position:absolute; transform:translateX(-50%); font-size:10px; font-family:var(--font-ui); font-weight:600; white-space:nowrap; }
.dash .chart .xlabs{ position:absolute; left:0; right:0; top:132px; pointer-events:none; }
.dash .chart .xlo{ position:absolute; top:0; transform:translateX(-50%); font-size:10px; font-family:var(--font-ui); color:var(--color-fg-subtle); white-space:nowrap; }
.dash .chart .mko.med{ color:var(--color-accent-fg); }
.dash .chart .mko.avg{ color:#cf9b2f; }
.dash .chart .mko.all{ color:#5f8fe0; }
.dash .ctip{ position:absolute; pointer-events:none; transform:translate(-50%,-100%); background:var(--color-surface-alt); border:1px solid var(--color-accent-bright);
color:var(--color-fg); padding:6px 10px; border-radius:10px; font-size:12px; white-space:nowrap; opacity:0; transition:opacity .12s; box-shadow:var(--shadow-2); z-index:5; }
.dash .ctip b{ font-family:var(--font-num); }
.dash .leg{ display:flex; gap:16px; justify-content:center; margin-top:2px; font-size:11px; color:var(--color-fg-subtle); flex-wrap:wrap; }
.dash .leg span{ display:flex; align-items:center; gap:6px; }
.dash .leg i{ width:14px; height:2.5px; border-radius:2px; display:inline-block; }
.dash .leg i.med{ background:var(--color-accent-bright); } .dash .leg i.avg{ background:#e6b450; } .dash .leg i.all{ background:#7fb0ff; }
.dash .demo{ font:inherit; font-size:11px; cursor:pointer; border:1px solid var(--color-border); background:var(--color-bg-soft); color:var(--color-fg-subtle);
border-radius:var(--radius-pill); padding:5px 10px; margin-left:8px; transition:.16s var(--ease-out); }
.dash .demo:hover{ border-color:var(--color-accent-bright); color:var(--color-fg); }
.dash .emptychart{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--color-fg-subtle); font-size:13px; padding:0 30px; }
.dash .carousel{ display:flex; align-items:center; gap:9px; }
.dash .cnav{ width:30px; height:30px; border-radius:50%; border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-fg); cursor:pointer; font-size:17px; line-height:1; display:grid; place-items:center; transition:.16s var(--ease-out); }
.dash .cnav:hover{ border-color:var(--color-accent-bright); color:var(--color-accent-fg); }
.dash .dots{ display:flex; gap:6px; }
.dash .dots i{ width:7px; height:7px; border-radius:50%; background:var(--color-border-strong); cursor:pointer; transition:.18s var(--ease-out); }
.dash .dots i.on{ background:var(--color-accent-bright); width:20px; border-radius:var(--radius-pill); }
.dash .chwrap{ animation:dbswap .3s var(--ease-out) both; }
/* chart-3 device ranking */
.dash .rank{ display:flex; flex-direction:column; gap:20px; padding:12px 0 8px; } /* roomier vertical rhythm */
.dash .rk{ display:grid; grid-template-columns:26px 1fr; align-items:center; gap:14px; }
.dash .rk .pos{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-num); font-size:12.5px; color:var(--color-fg-subtle); background:var(--color-bg-soft); border:1px solid var(--color-border); }
.dash .rk .rkmid{ min-width:0; display:flex; flex-direction:column; gap:5px; } /* tight name↔bar */
.dash .rk .rkname{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash .rk .rkbar{ display:flex; align-items:center; gap:14px; } /* value vertically centred on the bar */
.dash .rk .track{ flex:1; height:8px; border-radius:var(--radius-pill); background:var(--color-bg-soft); border:1px solid var(--color-border); overflow:hidden; }
.dash .rk .fill{ display:block; height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--color-accent),var(--color-accent-bright)); transform-origin:left; animation:dbgrowx .8s var(--ease-out) both; } /* span needs block for width/height to apply */
.dash .rk.dim .fill{ opacity:.66; }
.dash .rk:hover .fill{ opacity:1; }
.dash .rk .rkval{ flex:0 0 auto; min-width:56px; text-align:right; font-family:var(--font-num); font-size:14px; }
.dash .rk .rkval small{ color:var(--color-fg-subtle); font-family:var(--font-ui); font-size:11px; }
.dash .rk.fav-row .pos{ background:var(--color-accent-bg); color:var(--color-accent-fg); border-color:var(--color-accent-border); } /* #1 = on-brand accent badge */
.dash .rk.fav-row .rkname{ font-weight:600; }
.dash .rk.fav-row .rkval{ color:var(--color-accent-fg); }
/* juicy 1st-place trophy */
.dash .fav{ position:relative; display:inline-flex; align-items:center; margin-left:8px; color:var(--star); vertical-align:middle; }
.dash .fav svg{ width:15px; height:15px; animation:dbbeat 1.6s var(--ease-out) infinite; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--star) 85%, transparent)); }
.dash .fav .ping{ position:absolute; left:7.5px; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; border:1.5px solid var(--star); opacity:0; animation:dbping 1.8s var(--ease-out) infinite; }
.dash .fav .ping.p2{ animation-delay:.9s; }
/* device cards */
.dash .dgrid{ display:flex; flex-direction:column; gap:12px; }
.dash .dgrid.tiles{ display:grid; grid-template-columns:repeat(2,1fr); }
.dash .dcardw{ position:relative; } /* wraps a device card so the left W-callout isn't clipped by the card's overflow:hidden (mirrors .twrap in the grid) */
.dash .card{ position:relative; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:16px 18px 16px 22px; box-shadow:var(--shadow-1); transition:.18s var(--ease-out); }
.dash .card:hover{ border-color:var(--color-border-strong); }
.dash .card > .ctop, .dash .card > .actions{ position:relative; z-index:1; } /* above the power gauge */
.dash .card.off{ opacity:.72; }
.dash .ctop{ display:flex; align-items:flex-start; gap:14px; }
/* #7: match the picker's device thumb — a dark, status-tinted TV thumbnail with the OS
ribbon in the top-left corner (same thumb() glyph + .st-* tints as .set .thumb / .tile) */
.dash .dthumb{ position:relative; width:76px; height:50px; flex:0 0 auto; border-radius:10px; overflow:hidden; background:var(--color-ink); }
.dash .dthumb svg{ width:100%; height:100%; display:block; }
.dash .dthumb.st-free{ background:#0c1a10; } .dash .dthumb.st-mine{ background:#0c2014; }
.dash .dthumb.st-inuse{ background:#1b1408; } .dash .dthumb.st-blocked{ background:#241011; } .dash .dthumb.st-offline{ background:var(--color-ink); }
.dash .dthumb .osbadge{ font-size:8.5px; padding:2px 6px; letter-spacing:0; }
.dash .cmeta{ flex:1; min-width:0; }
.dash .cname{ font-size:1.06rem; font-weight:600; letter-spacing:-.01em; }
.dash .cspec{ color:var(--color-fg-subtle); font-size:13px; margin-top:3px; }
.dash .dpill{ flex:0 0 auto; font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap; }
.dash .dpill.free{ background:var(--color-success-bg); color:var(--color-success-fg); border-color:var(--color-success-border); }
.dash .dpill.use{ background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-border); }
.dash .dpill.off{ background:var(--color-bg-soft); color:var(--color-fg-subtle); border-color:var(--color-border); }
.dash .actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.dash .act{ display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; font:inherit; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:14px; padding:12px 14px; color:var(--color-fg); transition:.16s var(--ease-out); }
.dash .act:hover{ border-color:var(--color-accent-bright); background:var(--color-surface-alt); transform:translateY(-1px); }
.dash .act:disabled{ opacity:.45; cursor:not-allowed; transform:none; border-color:var(--color-border); background:var(--color-bg-soft); }
.dash .act .ic{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; }
.dash .act.live .ic{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.dash .act.rec .ic{ background:#1d1f2e; color:#b9b6ff; }
.dash .act .ic svg{ width:18px; height:18px; }
.dash .act .tx{ min-width:0; }
.dash .act .t1{ font-size:14px; font-weight:600; }
.dash .act .t2{ font-size:12px; color:var(--color-fg-subtle); margin-top:2px; }
.dash .act .cnt{ font-family:var(--font-num); }
.dash .secthead{ display:flex; align-items:baseline; justify-content:space-between; margin:4px 2px 12px; }
.dash #dashRecSection{ margin-top:28px; } /* separate the Záznamy section from the devices above it */
.dash .secthead .stt{ font-size:13px; color:var(--color-fg-subtle); letter-spacing:.02em; text-transform:uppercase; }
.dash .secthead a{ color:var(--color-accent-fg); font-size:13px; cursor:pointer; text-decoration:none; }
.dash .secthead a:hover{ text-decoration:underline; }
/* ★ favourite toggle on device cards */
.dash .favbtn{ background:none; border:0; cursor:pointer; padding:4px; color:var(--color-fg-subtle); border-radius:8px; line-height:0; transition:.16s var(--ease-out); flex:0 0 auto; }
.dash .favbtn svg{ width:18px; height:18px; }
.dash .favbtn:hover{ color:var(--star); background:var(--color-bg-soft); }
.dash .favbtn.on{ color:var(--star); background:color-mix(in srgb, var(--star) 14%, transparent); } /* gold = the one active-★ colour everywhere */
/* recordings highlights strip */
.dash .recstrip{ display:flex; flex-direction:column; gap:8px; }
.dash .recrow-d{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--color-fg);
background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:8px 12px; transition:.16s var(--ease-out); }
.dash .recrow-d:hover{ border-color:var(--color-accent-bright); transform:translateY(-1px); }
.dash .rposter{ position:relative; width:64px; height:40px; flex:0 0 auto; border-radius:8px; overflow:hidden; background:var(--color-surface-alt); display:grid; place-items:center; }
.dash .rposter img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.dash .rposter img.ok{ opacity:1; }
.dash .rposter .kept{ position:absolute; top:2px; right:2px; color:var(--star); line-height:0; filter:drop-shadow(0 0 2px rgba(0,0,0,.7)); }
.dash .rposter .kept svg{ width:13px; height:13px; }
.dash .rmeta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash .rname{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash .rsub{ font-size:12px; color:var(--color-fg-subtle); }
/* loading skeleton — grey blocks with a left→right shimmer: a lighter glow sweeps across via
an animated gradient position. base/glow are theme-specific (--sk-*) so the sweep reads on
both light and dark. Reuses the dashboard's real layout containers, so blocks land where the
content will (no jump on swap). */
.dash-skel{ animation:dbfade .3s var(--ease-out) both; }
.sk{ border-radius:6px; background:var(--sk-base);
background-image:linear-gradient(90deg, var(--sk-base) 0%, var(--sk-glow) 50%, var(--sk-base) 100%);
background-size:200% 100%; background-repeat:no-repeat; animation:sk-shimmer 1.6s ease-in-out infinite; }
.sk-num{ width:54px; height:26px; border-radius:7px; }
.sk-line{ width:72%; height:13px; }
.sk-line.sm{ width:46%; height:11px; }
.sk-line.xs{ width:34px; height:11px; }
.sk-line.w{ width:120px; height:13px; }
.sk-thumb{ width:76px; height:50px; border-radius:10px; flex:0 0 auto; }
.sk-circle{ width:22px; height:22px; border-radius:50%; flex:0 0 auto; }
.sk-pill{ width:74px; height:30px; border-radius:var(--radius-pill); }
.sk-act{ height:58px; border-radius:14px; }
.sk-chart{ height:150px; margin-top:12px; border-radius:8px; }
.sk-poster{ width:64px; height:40px; border-radius:8px; flex:0 0 auto; }
.sk-ttile{ width:100%; aspect-ratio:16/9; border-radius:12px; }
.sk-recthumb{ width:64px; height:40px; border-radius:7px; flex:0 0 auto; }
/* skeleton rows/tiles reuse the real .set/.tile/.recrow/.gcard shells but are inert (no hover/cursor) */
.set.skel,.tile.skel,.recrow.skel,.gcard.skel{ cursor:default; pointer-events:none; animation:dbfade .3s var(--ease-out) both; }
.gcard.skel:hover{ transform:none; box-shadow:var(--shadow-1); }
.tile.skel .specs{ margin-top:12px; }
@keyframes sk-shimmer{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none; background:var(--sk-base); } .dash-skel,.set.skel,.tile.skel,.recrow.skel,.gcard.skel{ animation:none; } }
@keyframes dbgrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes dbgrowx{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes dbfade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dbdraw{ to{ stroke-dashoffset:0; } }
@keyframes dbswap{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes dbbeat{ 0%,100%{ transform:scale(1) rotate(0); } 45%{ transform:scale(1.22) rotate(-5deg); } 60%{ transform:scale(1.1) rotate(4deg); } }
@keyframes dbping{ 0%{ transform:scale(.5); opacity:.7; } 70%,100%{ transform:scale(2.8); opacity:0; } }
/* ── Scenario EDITOR screen (authored DSL — SCENARIO-DSL-PLAN §editor, phase 1) ── */
.edcard{ padding:0; overflow:hidden; }
.edtop{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--color-border); flex-wrap:wrap; }
.edname{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; background:none; border:1px solid transparent; color:var(--color-fg); border-radius:8px; padding:6px 9px; min-width:170px; flex:1; }
.edname:hover, .edname:focus{ border-color:var(--color-border-strong); outline:none; background:var(--color-bg-soft); }
.edtags{ background:var(--color-bg-soft); border:1px solid var(--color-border); color:var(--color-fg-muted); border-radius:8px; padding:6px 10px; font-size:var(--fs-xs); min-width:150px; }
.edsave{ font-size:var(--fs-xs); color:var(--color-fg-subtle); }
.edsave.dirty{ color:#d39a2a; }
.edtop .btn{ width:auto; padding:8px 14px; font-size:14px; }
.edtabs{ display:flex; align-items:center; gap:2px; padding:8px 12px 0; border-bottom:1px solid var(--color-border); background:var(--color-bg-soft); }
.edtabs button{ border:1px solid transparent; border-bottom:0; background:none; color:var(--color-fg-subtle); padding:8px 16px; cursor:pointer; border-radius:10px 10px 0 0; font:inherit; font-size:.88rem; font-weight:600; }
.edtabs button.on{ background:var(--color-surface); border-color:var(--color-border); color:var(--color-fg); position:relative; top:1px; }
.edhint{ margin-left:auto; font-size:11px; color:var(--color-fg-subtle); padding-right:6px; }
.edcm{ min-height:320px; max-height:62vh; overflow:auto; font-size:13.5px; }
.edcm .cm-editor{ background:var(--color-surface); color:var(--color-fg); outline:none; }
/* token colours (classes from the editor's HighlightStyle) — variable-driven, theme-aware */
.edcm .tok-prop{ color:var(--color-accent-fg); }
.edcm .tok-kw{ color:var(--tok-kw); }
.edcm .tok-str{ color:var(--color-fg); }
.edcm .tok-num{ color:var(--warn, #e6b450); }
.edcm .tok-comment{ color:var(--color-fg-subtle); font-style:italic; }
.edcm .cm-editor .cm-content{ caret-color:var(--color-accent-fg); font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.edcm .cm-gutters{ background:var(--color-bg-soft); color:var(--color-fg-subtle); border-right:1px solid var(--color-border); }
.edcm .cm-activeLine{ background:color-mix(in srgb, var(--color-accent-bg) 55%, transparent); }
.edcm .cm-activeLineGutter{ background:transparent; color:var(--color-fg-muted); }
.edcm .cm-selectionBackground, .edcm .cm-editor ::selection{ background:color-mix(in srgb, var(--color-accent-bg) 80%, var(--color-fg) 6%) !important; }
.edcm .cm-cursor{ border-left-color:var(--color-accent-fg); }
.edcm .cm-tooltip{ background:var(--color-surface); border:1px solid var(--color-border-strong); color:var(--color-fg); }
.edcm .cm-tooltip-autocomplete ul li[aria-selected]{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.edval{ display:flex; align-items:center; gap:10px; padding:9px 16px; border-top:1px solid var(--color-border); font-size:var(--fs-xs); background:var(--color-bg-soft); color:var(--color-fg-muted); }
.edval .dot{ width:9px; height:9px; border-radius:50%; background:var(--color-accent-bright); flex:none; }
.edval.bad .dot{ background:#e05c5c; }
.edval.bad{ color:#e05c5c; }
.edrec{ display:flex; align-items:center; gap:10px; padding:8px 16px; border-bottom:1px solid var(--color-border); background:color-mix(in srgb, #e05c5c 12%, var(--color-bg-soft)); color:#e05c5c; font-size:var(--fs-xs); }
.edrec .btn{ width:auto; padding:6px 11px; font-size:13px; }
.edrecdot{ width:10px; height:10px; border-radius:50%; background:#e05c5c; animation:edblink 1s steps(1) infinite; flex:none; }
@keyframes edblink{ 50%{ opacity:.25; } }
.edhl{ background:color-mix(in srgb, var(--color-accent-bg) 80%, transparent) !important; }
.edcon{ border-top:1px solid var(--color-border); background:var(--color-bg-soft); }
.edcontop{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--color-border); flex-wrap:wrap; }
.edtvchips{ display:flex; gap:7px; flex-wrap:wrap; }
.edtv{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--color-border-strong); border-radius:999px; padding:5px 12px; font:inherit; font-size:var(--fs-xs); cursor:pointer; background:var(--color-surface); color:var(--color-fg); }
.edtv .st{ width:8px; height:8px; border-radius:50%; background:var(--color-accent-bright); flex:none; }
.edtv.off{ opacity:.45; cursor:not-allowed; } .edtv.off .st{ background:var(--color-fg-subtle); }
.edtv.on{ border-color:var(--color-accent-fg); background:var(--color-accent-bg); color:var(--color-accent-fg); font-weight:700; }
.edrows{ padding:4px 10px 8px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; max-height:260px; overflow:auto; }
.edrows:empty{ padding:0; }
.edrow{ display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:8px; }
.edrow:hover{ background:color-mix(in srgb, var(--color-fg) 4%, transparent); }
.edrow .st{ width:18px; flex:none; text-align:center; }
.edrow .clock{ width:96px; flex:none; color:var(--color-fg-subtle); }
.edrow .off{ width:64px; flex:none; color:var(--color-fg-subtle); text-align:right; }
.edrow .what{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-fg-muted); }
.edrow .ms{ color:var(--color-fg-subtle); width:70px; text-align:right; flex:none; }
.edrow.run{ background:var(--color-accent-bg); } .edrow.run .st, .edrow.run .what{ color:var(--color-accent-fg); }
.edrow.ok .st{ color:var(--color-accent-bright); }
.edrow.pend{ opacity:.42; }
.edverdict{ margin:6px 16px 12px; padding:9px 13px; border-radius:11px; font-weight:700; font-size:var(--fs-xs); }
.edverdict.pass{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.edverdict.fail{ background:color-mix(in srgb, #e05c5c 14%, var(--color-bg-soft)); color:#e05c5c; }
.edrow.fail{ background:color-mix(in srgb, #e05c5c 14%, transparent); }
.edrow.fail .st, .edrow.fail .what{ color:#e05c5c; }
/* ── Monitoring screen (Ideas #3–4: schedules + run history) ── */
.mon-scheds{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
@media(max-width:640px){ .mon-scheds{ grid-template-columns:1fr; } }
.mon-sched{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:13px 15px; display:flex; gap:12px; align-items:center; }
.mon-sched.off{ opacity:.55; }
.mvchip{ width:60px; flex:none; text-align:center; border-radius:11px; padding:8px 0; font-weight:800; font-size:.85rem; }
.mvchip.pass{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.mvchip.fail{ background:#2a1515; color:var(--danger); }
.mvchip.none{ background:var(--color-bg-soft); color:var(--color-fg-subtle); }
.mon-sched .body{ flex:1; min-width:0; }
.mname{ font-weight:650; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtvs{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.montv{ font-size:11px; border:1px solid var(--color-border-strong); border-radius:999px; padding:1px 8px 1px 6px; color:var(--color-fg-muted); display:inline-flex; align-items:center; gap:5px; }
.montv::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--color-fg-subtle); flex:none; }
.montv.pass::before{ background:var(--color-accent-fg); }
.montv.fail{ border-color:#5a2b2b; color:var(--danger); } .montv.fail::before{ background:var(--danger); }
.mmeta{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:5px; display:flex; gap:7px; flex-wrap:wrap; }
.macts{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.mtgl{ width:38px; height:22px; border-radius:99px; background:var(--color-surface-alt); border:1px solid var(--color-border-strong); position:relative; cursor:pointer; }
.mtgl i{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--color-fg-subtle); transition:all .15s; }
.mtgl.on{ background:var(--color-accent-bg); border-color:var(--color-accent-fg); }
.mtgl.on i{ left:18px; background:var(--color-accent-fg); }
.mon-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; align-items:center; }
.mon-filters .fchip{ border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-fg-muted); border-radius:999px; padding:5px 12px; font-size:var(--fs-xs); cursor:pointer; }
.mon-filters .fchip.on{ background:var(--color-accent-bg); border-color:var(--color-accent-fg); color:var(--color-accent-fg); font-weight:700; }
.mon-filters .fchip.fail.on{ background:#2a1515; border-color:var(--danger); color:var(--danger); }
.mon-filters select{ background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-fg); border-radius:10px; padding:7px 10px; font:inherit; font-size:var(--fs-xs); }
.mon-run{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--color-border); cursor:pointer; }
.mon-run:last-child{ border-bottom:0; }
.mon-run:hover .mrname{ color:var(--color-accent-fg); }
.mrv{ width:54px; flex:none; text-align:center; border-radius:9px; padding:4px 0; font-weight:800; font-size:.72rem; }
.mrv.pass{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.mrv.fail{ background:#2a1515; color:var(--danger); }
.mrv.skip{ background:var(--color-surface-alt); color:var(--warn); }
.mon-run .body{ flex:1; min-width:0; }
.mrname{ font-weight:600; transition:color .12s; }
.mrmeta{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }
.tico{ width:14px; height:14px; vertical-align:-2px; flex:none; }
.mrfail{ font-size:12px; color:var(--danger); margin-top:3px; font-family:ui-monospace,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrwhen{ text-align:right; font-size:var(--fs-xs); color:var(--color-fg-subtle); flex:none; }
.mon-more{ display:flex; justify-content:center; padding:10px 0 12px; }
.mon-more .btn{ width:auto; padding:7px 16px; font-size:var(--fs-xs); }
/* detail drawer */
.mdrawer{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:60; }
.mdrawer.show{ display:block; }
.mdpanel{ position:absolute; top:0; right:0; bottom:0; width:min(560px,94vw); background:var(--color-bg-soft); border-left:1px solid var(--color-border-strong); box-shadow:var(--shadow-2, 0 12px 38px rgba(0,0,0,.55)); overflow:auto; padding:18px; }
.mdpanel h3{ margin:2px 0 2px; font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.mdsub{ font-size:var(--fs-xs); color:var(--color-fg-subtle); margin-bottom:12px; }
.mdfail{ font-size:var(--fs-xs); color:var(--danger); margin-bottom:12px; font-family:ui-monospace,Menlo,monospace; }
/* the standing camera pre-check line in the run detail (calibrated sets) */
.mdcam{ font-size:var(--fs-xs); color:var(--color-fg-muted); margin:2px 0 10px; }
.mdcam.bad{ color:var(--color-error-fg); font-weight:600; }
.mfailshot{ margin:4px 0 12px; }
.mfailshot .h{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--danger); margin-bottom:6px; }
.mfailshot img{ width:100%; border-radius:10px; border:1px solid #5a2b2b; display:block; }
.msteps{ font-family:ui-monospace,Menlo,monospace; font-size:12.5px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:8px 10px; }
.msrow{ display:flex; gap:10px; padding:5px 4px; border-bottom:1px dashed var(--color-border); }
.msrow:last-child{ border-bottom:0; }
.msrow .st{ width:16px; text-align:center; color:var(--color-accent-fg); }
.msrow .clock{ width:80px; color:var(--color-fg-subtle); flex:none; }
.msrow .what{ flex:1; color:var(--color-fg-muted); }
.msrow.failr{ background:#2a1515; border-radius:6px; } .msrow.failr .st, .msrow.failr .what{ color:var(--danger); }
.mdfoot{ display:flex; gap:8px; margin-top:14px; align-items:center; }
/* new-schedule dialog additions (rides .scenpick/.sheet) */
.monpick .mlbl{ display:block; font-size:var(--fs-xs); color:var(--color-fg-muted); margin:10px 0 4px; }
.monpick .tvhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.monpick .tvhead input{ flex:1; min-width:140px; }
.monpick .tvhead .btn{ width:auto; }
.monpick .tvhead .cnt{ font-size:11px; color:var(--color-fg-subtle); white-space:nowrap; }
.monpick .mtvpick{ display:flex; flex-direction:column; gap:6px; max-height:200px; overflow:auto; margin-top:6px; }
.monpick .mtvopt{ display:flex; align-items:center; gap:10px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:10px; padding:9px 11px; cursor:pointer; }
.monpick .mtvopt.sel{ border-color:var(--color-accent-fg); background:var(--color-accent-bg); }
.monpick .mtvopt .cb{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--color-border-strong); flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--color-ink); }
.monpick .mtvopt.sel .cb{ background:var(--color-accent-fg); border-color:var(--color-accent-fg); }
.monpick .mtvopt .tn{ flex:1; font-size:var(--fs-xs); }
.monpick .mteamopt{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--color-fg-muted); margin-top:8px; }
.monpick .mrow2{ display:flex; gap:10px; align-items:center; margin-top:2px; }
.monpick .mnote{ font-size:11px; color:var(--color-fg-subtle); margin-top:10px; line-height:1.5; }
/* dashboard monitoring strip */
.dashmon{ margin-top:2px; }
.dashmon .mline{ display:flex; align-items:center; gap:10px; padding:7px 2px; font-size:var(--fs-xs); }
.dashmon .d{ width:8px; height:8px; border-radius:50%; flex:none; }
.dashmon .d.fail{ background:var(--danger); } .dashmon .d.ok{ background:var(--color-accent-fg); }
.dashmon .nm{ flex:1; color:var(--color-fg-muted); } .dashmon .nm b{ color:var(--color-fg); }
/* ── phone polish (mobile pass, batch 2 — docs/MOBILE-TABLET-PLAN.md §3 P2/P3) ── */
@media (max-width:600px){
/* set-detail sticky header: one-line title instead of a third of the screen */
header.bar{ padding:10px 14px; }
header.bar > div{ min-width:0; }
header.bar h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header.bar .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* long titles clamp instead of wrapping 3-4 lines */
.dash .cname{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.scn-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* settings rows: a wide control (segmented, input, slider) drops under the label
instead of squeezing it into a six-line sliver; small toggles stay inline */
.rows .row{ flex-wrap:wrap; }
.rows .row .rt{ flex:1 1 auto; min-width:65%; }
.rows .row > .seg, .rows .row > input, .rows .row > .stepper{ flex:1 1 100%; }
/* editor: the three-notations hint has no room next to the tabs */
.edhint{ display:none; }
/* install panel: cert file + password stack; the generator heading wraps cleanly */
.sgn-cert{ flex-wrap:wrap; }
.sgn-cert .field, .sgn-cert .field:last-child{ flex:1 1 100%; }
}