:root {
  --marker: #FFD54A; /* activity dot — gold on dark themes */
  --bg: #07101d;
  --bg-grad: radial-gradient(circle at 50% -15%, #0d3a52 0%, #091a2b 35%, #07101d 70%);
  --card: #0f1d30;
  --card-2: #17273e;
  --card-hi: #1f3350;
  --border: #1d3047;
  --border-hi: #2a425f;
  --text: #f0f6fc;
  --text-2: #8ba3bd;
  --text-3: #56708c;
  --blue: #22d3ee;
  --blue-soft: rgba(34, 211, 238, 0.15);
  --blue2: #38bdf8;
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.15);
  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, 0.15);
  --purple: #c084fc;
  --purple-soft: rgba(192, 132, 252, 0.18);
  --yellow: #fbbf24;
  --red: #f87171;
  --glow: 0 0 24px rgba(34, 211, 238, 0.25);
  --btn-deep: #16344a;
  --nav-h: 84px;
  /* translucent panel bg for floating UI over content/video (nav, toast, media chip) */
  --glass: rgba(20, 26, 39, 0.94);
}

/* ── Themes ───────────────────────────────────────────── */

html[data-theme="mocha"] {
  --bg: #1e1e2e;
  --bg-grad: radial-gradient(circle at 50% -15%, #313244 0%, #24243a 35%, #1e1e2e 70%);
  --card: #181825;
  --card-2: #313244;
  --card-hi: #45475a;
  --border: #313244;
  --border-hi: #45475a;
  --text: #cdd6f4;
  --text-2: #a6adc8;
  --text-3: #6c7086;
  --blue: #89dceb;
  --blue-soft: rgba(137, 220, 235, 0.15);
  --blue2: #89b4fa;
  --green: #a6e3a1;
  --green-soft: rgba(166, 227, 161, 0.15);
  --orange: #fab387;
  --orange-soft: rgba(250, 179, 135, 0.15);
  --purple: #cba6f7;
  --purple-soft: rgba(203, 166, 247, 0.18);
  --yellow: #f9e2af;
  --red: #f38ba8;
  --glow: 0 0 24px rgba(137, 220, 235, 0.25);
  --btn-deep: #313244;
}

html[data-theme="macchiato"] {
  --bg: #24273a;
  --bg-grad: radial-gradient(circle at 50% -15%, #363a4f 0%, #2a2e45 35%, #24273a 70%);
  --card: #1e2030;
  --card-2: #363a4f;
  --card-hi: #494d64;
  --border: #363a4f;
  --border-hi: #494d64;
  --text: #cad3f5;
  --text-2: #a5adcb;
  --text-3: #6e738d;
  --blue: #91d7e3;
  --blue-soft: rgba(145, 215, 227, 0.15);
  --blue2: #8aadf4;
  --green: #a6da95;
  --green-soft: rgba(166, 218, 149, 0.15);
  --orange: #f5a97f;
  --orange-soft: rgba(245, 169, 127, 0.15);
  --purple: #c6a0f6;
  --purple-soft: rgba(198, 160, 246, 0.18);
  --yellow: #eed49f;
  --red: #ed8796;
  --glow: 0 0 24px rgba(145, 215, 227, 0.25);
  --btn-deep: #363a4f;
}

html[data-theme="frappe"] {
  --bg: #303446;
  --bg-grad: radial-gradient(circle at 50% -15%, #414559 0%, #373b50 35%, #303446 70%);
  --card: #292c3c;
  --card-2: #414559;
  --card-hi: #51576d;
  --border: #414559;
  --border-hi: #51576d;
  --text: #c6d0f5;
  --text-2: #a5adce;
  --text-3: #737994;
  --blue: #99d1db;
  --blue-soft: rgba(153, 209, 219, 0.15);
  --blue2: #8caaee;
  --green: #a6d189;
  --green-soft: rgba(166, 209, 137, 0.15);
  --orange: #ef9f76;
  --orange-soft: rgba(239, 159, 118, 0.15);
  --purple: #ca9ee6;
  --purple-soft: rgba(202, 158, 230, 0.18);
  --yellow: #e5c890;
  --red: #e78284;
  --glow: 0 0 24px rgba(153, 209, 219, 0.25);
  --btn-deep: #414559;
}

html[data-theme="latte"], html[data-theme="sherbet"], html[data-theme="bubblegum"],
html[data-theme="matcha"], html[data-theme="pop"], html[data-theme="voltage"] {
  --marker: #34409e;
  --glass: rgba(255, 255, 255, 0.94); /* light glass so theme-aware text stays readable */
}
html[data-theme="latte"] {
  --bg: #eff1f5;
  --bg-grad: radial-gradient(circle at 50% -15%, #dce0e8 0%, #e6e9ef 35%, #eff1f5 70%);
  --card: #ffffff;
  --card-2: #e6e9ef;
  --card-hi: #dce0e8;
  --border: #ccd0da;
  --border-hi: #bcc0cc;
  --text: #4c4f69;
  --text-2: #6c6f85;
  --text-3: #9ca0b0;
  --blue: #179299;
  --blue-soft: rgba(23, 146, 153, 0.12);
  --blue2: #1e66f5;
  --green: #40a02b;
  --green-soft: rgba(64, 160, 43, 0.12);
  --orange: #fe640b;
  --orange-soft: rgba(254, 100, 11, 0.12);
  --purple: #8839ef;
  --purple-soft: rgba(136, 57, 239, 0.12);
  --yellow: #df8e1d;
  --red: #d20f39;
  --glow: 0 0 24px rgba(23, 146, 153, 0.2);
  --btn-deep: #dce0e8;
}

html[data-theme="dracula"] {
  --bg: #282a36;
  --bg-grad: radial-gradient(circle at 50% -15%, #44475a 0%, #313342 35%, #282a36 70%);
  --card: #21222c;
  --card-2: #343746;
  --card-hi: #44475a;
  --border: #343746;
  --border-hi: #44475a;
  --text: #f8f8f2;
  --text-2: #b8bcd0;
  --text-3: #6272a4;
  --blue: #8be9fd;
  --blue-soft: rgba(139, 233, 253, 0.15);
  --blue2: #6272a4;
  --green: #50fa7b;
  --green-soft: rgba(80, 250, 123, 0.15);
  --orange: #ffb86c;
  --orange-soft: rgba(255, 184, 108, 0.15);
  --purple: #bd93f9;
  --purple-soft: rgba(189, 147, 249, 0.18);
  --yellow: #f1fa8c;
  --red: #ff5555;
  --glow: 0 0 24px rgba(139, 233, 253, 0.25);
  --btn-deep: #343746;
}

html[data-theme="sherbet"] {
  --bg: #fae7cb;
  --bg-grad: radial-gradient(circle at 50% -15%, #ffdca8 0%, #fce3bd 35%, #fae7cb 70%);
  --card: #fff6e6;
  --card-2: #f3dcb8;
  --card-hi: #ecd2a8;
  --border: #e6cda4;
  --border-hi: #d9bc8d;
  --text: #3c3228;
  --text-2: #7a6a55;
  --text-3: #a8957b;
  --blue: #1f8f76;
  --blue-soft: rgba(89, 178, 146, 0.18);
  --blue2: #59b292;
  --green: #4caf6d;
  --green-soft: rgba(76, 175, 109, 0.15);
  --orange: #e8a020;
  --orange-soft: rgba(255, 201, 77, 0.22);
  --purple: #d05fae;
  --purple-soft: rgba(250, 103, 129, 0.16);
  --yellow: #d99a00;
  --red: #fa6781;
  --glow: 0 0 24px rgba(31, 143, 118, 0.2);
  --btn-deep: #f0d9b2;
}

html[data-theme="twilight"] {
  --bg: #2a3157;
  --bg-grad: radial-gradient(circle at 50% -15%, #454f8a 0%, #333d6d 35%, #2a3157 70%);
  --card: #252b4d;
  --card-2: #3a4377;
  --card-hi: #475089;
  --border: #3a4377;
  --border-hi: #4b5590;
  --text: #fff0d9;
  --text-2: #bcc0e0;
  --text-3: #7d84b0;
  --blue: #9d6ef0;
  --blue-soft: rgba(157, 110, 240, 0.18);
  --blue2: #b18cf5;
  --green: #7dd6a8;
  --green-soft: rgba(125, 214, 168, 0.15);
  --orange: #ffcf95;
  --orange-soft: rgba(255, 207, 149, 0.16);
  --purple: #c9a2ff;
  --purple-soft: rgba(201, 162, 255, 0.18);
  --yellow: #ffcf95;
  --red: #ff7a8a;
  --glow: 0 0 24px rgba(157, 110, 240, 0.3);
  --btn-deep: #3a4377;
}

html[data-theme="bubblegum"] {
  --bg: #fbf5a7;
  --bg-grad: radial-gradient(circle at 50% -15%, #ffd0e8 0%, #fdf2c0 35%, #fbf5a7 70%);
  --card: #fffdea;
  --card-2: #f1ea9e;
  --card-hi: #e9e190;
  --border: #e4dc8b;
  --border-hi: #d4cb74;
  --text: #3a2a4a;
  --text-2: #75618c;
  --text-3: #a08fb5;
  --blue: #b331f1;
  --blue-soft: rgba(179, 49, 241, 0.14);
  --blue2: #ff62bb;
  --green: #3aa05f;
  --green-soft: rgba(58, 160, 95, 0.14);
  --orange: #f08a3c;
  --orange-soft: rgba(240, 138, 60, 0.15);
  --purple: #ff62bb;
  --purple-soft: rgba(255, 98, 187, 0.16);
  --yellow: #d9a400;
  --red: #e8447a;
  --glow: 0 0 24px rgba(179, 49, 241, 0.2);
  --btn-deep: #f0e89c;
}

html[data-theme="ember"] {
  --bg: #1e104e;
  --bg-grad: radial-gradient(circle at 50% -15%, #452e5a 0%, #2c1b54 35%, #1e104e 70%);
  --card: #190d40;
  --card-2: #3a2a52;
  --card-hi: #4a3866;
  --border: #382a55;
  --border-hi: #4a3a6a;
  --text: #fff3e0;
  --text-2: #c9b8d8;
  --text-3: #8b7aa8;
  --blue: #ffc85c;
  --blue-soft: rgba(255, 200, 92, 0.15);
  --blue2: #ff9d7a;
  --green: #7ed29a;
  --green-soft: rgba(126, 210, 154, 0.15);
  --orange: #ff653f;
  --orange-soft: rgba(255, 101, 63, 0.16);
  --purple: #b48ae8;
  --purple-soft: rgba(180, 138, 232, 0.18);
  --yellow: #ffc85c;
  --red: #ff5a4a;
  --glow: 0 0 24px rgba(255, 200, 92, 0.25);
  --btn-deep: #3a2a52;
}

html[data-theme="matcha"] {
  --bg: #e5eee4;
  --bg-grad: radial-gradient(circle at 50% -15%, #c0e1d2 0%, #d8e9db 35%, #e5eee4 70%);
  --card: #f6f4e8;
  --card-2: #d4e6d8;
  --card-hi: #c0e1d2;
  --border: #c6d8c8;
  --border-hi: #aac8b4;
  --text: #33433a;
  --text-2: #5f7468;
  --text-3: #8da294;
  --blue: #2e8b6a;
  --blue-soft: rgba(46, 139, 106, 0.14);
  --blue2: #4aa985;
  --green: #4a9e5f;
  --green-soft: rgba(74, 158, 95, 0.14);
  --orange: #c97b4a;
  --orange-soft: rgba(201, 123, 74, 0.15);
  --purple: #c47878;
  --purple-soft: rgba(220, 155, 155, 0.2);
  --yellow: #c9a23c;
  --red: #c75d5d;
  --glow: 0 0 24px rgba(46, 139, 106, 0.18);
  --btn-deep: #d4e6d8;
}

html[data-theme="midnight"] {
  --bg: #021a54;
  --bg-grad: radial-gradient(circle at 50% -15%, #0a2d7a 0%, #04205f 35%, #021a54 70%);
  --card: #021545;
  --card-2: #0d2a6e;
  --card-hi: #16367f;
  --border: #0e2a68;
  --border-hi: #1d3d85;
  --text: #f5f5f5;
  --text-2: #b9c4e6;
  --text-3: #6f80b5;
  --blue: #ff85bb;
  --blue-soft: rgba(255, 133, 187, 0.16);
  --blue2: #ffcee3;
  --green: #6fe0b2;
  --green-soft: rgba(111, 224, 178, 0.15);
  --orange: #ffb36e;
  --orange-soft: rgba(255, 179, 110, 0.15);
  --purple: #c39bff;
  --purple-soft: rgba(195, 155, 255, 0.18);
  --yellow: #ffd98a;
  --red: #ff6b8a;
  --glow: 0 0 24px rgba(255, 133, 187, 0.28);
  --btn-deep: #0d2a6e;
}

html[data-theme="pop"] {
  --bg: #f0ffc3;
  --bg-grad: radial-gradient(circle at 50% -15%, #9ccfff 0%, #e0f7c0 35%, #f0ffc3 70%);
  --card: #fcffee;
  --card-2: #e2f3ae;
  --card-hi: #d6eb9e;
  --border: #d8e8a4;
  --border-hi: #c3d788;
  --text: #2a2a4a;
  --text-2: #5c5c80;
  --text-3: #9090ad;
  --blue: #685aff;
  --blue-soft: rgba(104, 90, 255, 0.13);
  --blue2: #5aa6e8;
  --green: #4fa05a;
  --green-soft: rgba(79, 160, 90, 0.14);
  --orange: #f0823c;
  --orange-soft: rgba(240, 130, 60, 0.15);
  --purple: #a05ae8;
  --purple-soft: rgba(160, 90, 232, 0.14);
  --yellow: #c9a800;
  --red: #ff5b5b;
  --glow: 0 0 24px rgba(104, 90, 255, 0.2);
  --btn-deep: #e2f3ae;
}

html[data-theme="sherbet-dark"] {
  --bg: #16201c;
  --bg-grad: radial-gradient(circle at 50% -15%, #2a4038 0%, #1c2b25 35%, #16201c 70%);
  --card: #121b17;
  --card-2: #24332c;
  --card-hi: #2f4238;
  --border: #25352d;
  --border-hi: #35493e;
  --text: #fae7cb;
  --text-2: #b2c2b8;
  --text-3: #74867c;
  --blue: #59b292;
  --blue-soft: rgba(89, 178, 146, 0.15);
  --blue2: #7cc7aa;
  --green: #67bd7e;
  --green-soft: rgba(103, 189, 126, 0.15);
  --orange: #ffc94d;
  --orange-soft: rgba(255, 201, 77, 0.15);
  --purple: #fa6781;
  --purple-soft: rgba(250, 103, 129, 0.18);
  --yellow: #ffc94d;
  --red: #fa6781;
  --glow: 0 0 24px rgba(89, 178, 146, 0.25);
  --btn-deep: #24332c;
}

html[data-theme="bubblegum-dark"] {
  --bg: #221330;
  --bg-grad: radial-gradient(circle at 50% -15%, #3c1f57 0%, #2b1840 35%, #221330 70%);
  --card: #1c0f29;
  --card-2: #382050;
  --card-hi: #462a62;
  --border: #36204d;
  --border-hi: #482b64;
  --text: #f6eefc;
  --text-2: #c5b3d6;
  --text-3: #8a76a3;
  --blue: #ff62bb;
  --blue-soft: rgba(255, 98, 187, 0.16);
  --blue2: #ff97d0;
  --green: #7ed29a;
  --green-soft: rgba(126, 210, 154, 0.15);
  --orange: #f0a050;
  --orange-soft: rgba(240, 160, 80, 0.15);
  --purple: #cf7bff;
  --purple-soft: rgba(207, 123, 255, 0.18);
  --yellow: #f5e87a;
  --red: #ff5b7a;
  --glow: 0 0 24px rgba(255, 98, 187, 0.28);
  --btn-deep: #382050;
}

html[data-theme="matcha-dark"] {
  --bg: #1a241e;
  --bg-grad: radial-gradient(circle at 50% -15%, #31473a 0%, #243329 35%, #1a241e 70%);
  --card: #151e19;
  --card-2: #2a3a30;
  --card-hi: #36473c;
  --border: #2b3c31;
  --border-hi: #3a4e41;
  --text: #e5eee4;
  --text-2: #aec2b2;
  --text-3: #71857a;
  --blue: #8fd0b4;
  --blue-soft: rgba(143, 208, 180, 0.15);
  --blue2: #a8dcc4;
  --green: #7fc080;
  --green-soft: rgba(127, 192, 128, 0.15);
  --orange: #e0a070;
  --orange-soft: rgba(224, 160, 112, 0.15);
  --purple: #dc9b9b;
  --purple-soft: rgba(220, 155, 155, 0.18);
  --yellow: #d8c285;
  --red: #e08585;
  --glow: 0 0 24px rgba(143, 208, 180, 0.22);
  --btn-deep: #2a3a30;
}

html[data-theme="pop-dark"] {
  --bg: #1c1940;
  --bg-grad: radial-gradient(circle at 50% -15%, #353060 0%, #262252 35%, #1c1940 70%);
  --card: #171434;
  --card-2: #2e2a58;
  --card-hi: #3a356c;
  --border: #2d2956;
  --border-hi: #3d3870;
  --text: #f0f4ea;
  --text-2: #b6bcd8;
  --text-3: #767ca8;
  --blue: #9ccfff;
  --blue-soft: rgba(156, 207, 255, 0.15);
  --blue2: #8a7dff;
  --green: #c3e87a;
  --green-soft: rgba(195, 232, 122, 0.16);
  --orange: #ffab70;
  --orange-soft: rgba(255, 171, 112, 0.15);
  --purple: #a89aff;
  --purple-soft: rgba(168, 154, 255, 0.18);
  --yellow: #e5da7d;
  --red: #ff5b5b;
  --glow: 0 0 24px rgba(156, 207, 255, 0.25);
  --btn-deep: #2e2a58;
}

html[data-theme="neon-dark"] {
  --bg: #0c0a16;
  --bg-grad: radial-gradient(circle at 50% -15%, #2a1240 0%, #160e2a 35%, #0c0a16 70%);
  --card: #141022;
  --card-2: #221a3a;
  --card-hi: #2c2348;
  --border: #251d3f;
  --border-hi: #342a58;
  --text: #f3f1ff;
  --text-2: #b3a8d4;
  --text-3: #726c96;
  --blue: #63c8ff;
  --blue-soft: rgba(99, 200, 255, 0.16);
  --blue2: #4dffbe;
  --green: #4dffbe;
  --green-soft: rgba(77, 255, 190, 0.16);
  --orange: #ff2dd1;
  --orange-soft: rgba(255, 45, 209, 0.16);
  --purple: #ff2dd1;
  --purple-soft: rgba(255, 45, 209, 0.18);
  --yellow: #fdffb8;
  --red: #ff5b7a;
  --glow: 0 0 24px rgba(255, 45, 209, 0.28);
  --btn-deep: #221a3a;
}

html[data-theme="candy-dark"] {
  --bg: #181320;
  --bg-grad: radial-gradient(circle at 50% -15%, #322840 0%, #221b2e 35%, #181320 70%);
  --card: #15111d;
  --card-2: #271f33;
  --card-hi: #322942;
  --border: #2b2338;
  --border-hi: #3a3048;
  --text: #fff6ea;
  --text-2: #d8c8d4;
  --text-3: #948494;
  --blue: #c2e2fa;
  --blue-soft: rgba(194, 226, 250, 0.16);
  --blue2: #b7a3e3;
  --green: #9ad5c5;
  --green-soft: rgba(154, 213, 197, 0.16);
  --orange: #ff8f8f;
  --orange-soft: rgba(255, 143, 143, 0.16);
  --purple: #b7a3e3;
  --purple-soft: rgba(183, 163, 227, 0.2);
  --yellow: #fff1cb;
  --red: #ff8f8f;
  --glow: 0 0 24px rgba(183, 163, 227, 0.28);
  --btn-deep: #271f33;
}

html[data-theme="lilac-dark"] {
  --bg: #16131c;
  --bg-grad: radial-gradient(circle at 50% -15%, #2e2840 0%, #211c2e 35%, #16131c 70%);
  --card: #131019;
  --card-2: #25212f;
  --card-hi: #2f2a3c;
  --border: #292433;
  --border-hi: #383143;
  --text: #f2eae0;
  --text-2: #c4b8cf;
  --text-3: #837795;
  --blue: #b4d3d9;
  --blue-soft: rgba(180, 211, 217, 0.16);
  --blue2: #9b8ec7;
  --green: #a7cbb0;
  --green-soft: rgba(167, 203, 176, 0.16);
  --orange: #cba0b8;
  --orange-soft: rgba(203, 160, 184, 0.16);
  --purple: #bda6ce;
  --purple-soft: rgba(189, 166, 206, 0.2);
  --yellow: #e8dcc8;
  --red: #d98aa0;
  --glow: 0 0 24px rgba(155, 142, 199, 0.28);
  --btn-deep: #25212f;
}

html[data-theme="crimson-dark"] {
  --bg: #0c1a20;
  --bg-grad: radial-gradient(circle at 50% -15%, #163844 0%, #0f2730 35%, #0c1a20 70%);
  --card: #0b171d;
  --card-2: #15323c;
  --card-hi: #1d4250;
  --border: #173842;
  --border-hi: #245868;
  --text: #fff6f6;
  --text-2: #aac8c8;
  --text-3: #6b8e93;
  --blue: #8cc7c4;
  --blue-soft: rgba(140, 199, 196, 0.16);
  --blue2: #4a9aaf;
  --green: #8cc7c4;
  --green-soft: rgba(140, 199, 196, 0.16);
  --orange: #db1a1a;
  --orange-soft: rgba(219, 26, 26, 0.16);
  --purple: #c47b8c;
  --purple-soft: rgba(196, 123, 140, 0.18);
  --yellow: #ffd6a0;
  --red: #db1a1a;
  --glow: 0 0 24px rgba(219, 26, 26, 0.28);
  --btn-deep: #15323c;
}

html[data-theme="voltage"] {
  --bg: #f8f6ff;
  --bg-grad: radial-gradient(circle at 50% -15%, #e0d8ff 0%, #f0ecff 35%, #f8f6ff 70%);
  --card: #ffffff;
  --card-2: #ece8ff;
  --card-hi: #e0dbff;
  --border: #d8d2f0;
  --border-hi: #c8c0e6;
  --text: #1a1a3a;
  --text-2: #555580;
  --text-3: #8888aa;
  --blue: #0055DA;
  --blue-soft: rgba(0, 85, 218, 0.12);
  --blue2: #00C68D;
  --green: #00C68D;
  --green-soft: rgba(0, 198, 141, 0.12);
  --orange: #FFD400;
  --orange-soft: rgba(255, 212, 0, 0.18);
  --purple: #FF0052;
  --purple-soft: rgba(255, 0, 82, 0.12);
  --yellow: #FFD400;
  --red: #FF0052;
  --glow: 0 0 24px rgba(0, 85, 218, 0.2);
  --btn-deep: #e4e0f8;
}

html[data-theme="voltage-dark"] {
  --bg: #0e0a1e;
  --bg-grad: radial-gradient(circle at 50% -15%, #1a1240 0%, #140f2c 35%, #0e0a1e 70%);
  --card: #16102a;
  --card-2: #221a42;
  --card-hi: #2e2458;
  --border: #261e48;
  --border-hi: #342a62;
  --text: #f0eeff;
  --text-2: #b8b0d8;
  --text-3: #7870a0;
  --blue: #4d90ff;
  --blue-soft: rgba(77, 144, 255, 0.16);
  --blue2: #00e0a0;
  --green: #00e0a0;
  --green-soft: rgba(0, 224, 160, 0.16);
  --orange: #ffe040;
  --orange-soft: rgba(255, 224, 64, 0.16);
  --purple: #ff3370;
  --purple-soft: rgba(255, 51, 112, 0.18);
  --yellow: #ffe040;
  --red: #ff3370;
  --glow: 0 0 24px rgba(77, 144, 255, 0.28);
  --btn-deep: #221a42;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
html { background: var(--bg); }
body { background: var(--bg-grad); background-attachment: fixed; }
#app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-grad);
  background-attachment: fixed;
}

/* ===== Scroll area ===== */
.screen {
  display: none;
  flex-direction: column;
  padding: 0 1.25rem;
  padding-top: calc(var(--sat,env(safe-area-inset-top)) + 0.5rem);
  padding-bottom: calc(var(--nav-h) + var(--sab,env(safe-area-inset-bottom)) + 1rem);
  min-height: 100dvh;
  animation: fade 0.35s ease;
}
.screen.active { display: flex; }

@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Status bar mimic spacing ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0 1rem;
}

.page-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.title-center {
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem 0 1.25rem;
}

.round-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
}
.round-btn:active { transform: scale(0.93); }

/* ===== Stat strip (Detections / Persons / Vehicles) ===== */
.ic-blue { color: var(--blue); }
.ic-green { color: var(--green); }
.ic-purple { color: var(--purple); }

/* ===== Camera cards ===== */
.cam-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Last seen person card (top of cameras screen) */
.last-seen {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .6rem .8rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.last-seen:active { transform: scale(.99); }
.last-seen-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--card-2);
}
.last-seen-body { flex: 1; min-width: 0; }
.last-seen-title { font-weight: 700; font-size: .95rem; }
.last-seen-sub { font-size: .82rem; color: var(--text-2); margin-top: .1rem; }
.last-seen-go { color: var(--text-2); flex-shrink: 0; }

.cam-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.cam-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* continuous live video overlay; sits on top of the snapshot poster */
.cam-stage { position: absolute; inset: 0; display: block; }
grid-video.cam-stage { pointer-events: none; } /* taps fall through to .cam-media (opens lightbox) */
.cam-stage video, .cam-stage canvas {
  /* override the player's inline object-fit:contain so cards crop-fill */
  width: 100%; height: 100%; object-fit: cover !important; display: block;
}
.cam-dots, .media-chip { z-index: 2; }
.cam-dots {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  display: flex;
  gap: 0.4rem;
}
.cam-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3, #555); box-shadow: none; }
/* red = recording enabled, dim when off */
.cam-dot.rec { background: var(--red); box-shadow: 0 0 8px var(--red); }
.cam-dot.rec.off { background: var(--text-3, #555); box-shadow: none; opacity: 0.5; }
/* green = camera online (frames flowing), grey when offline/unknown */
.cam-dot.live { background: var(--text-3, #555); box-shadow: none; }
.cam-dot.live.online { background: var(--green); box-shadow: 0 0 8px var(--green); }

.media-chip {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--glass);
  color: var(--text);
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}
.cam-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
}
.cam-foot-l { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cam-name { font-size: 1.1rem; font-weight: 700; cursor: pointer; display: inline-block; }
.cam-name:active { opacity: .6; }
.cam-room-dots { display: inline-flex; gap: .35rem; margin-left: .45rem; vertical-align: middle; align-items: center; }
.cam-dot.light { background: #ffd400; box-shadow: 0 0 8px #ffd400; }
.cam-dot.ac { background: #5ad1ff; box-shadow: 0 0 8px #5ad1ff; }
.cam-badge {
  min-width: 28px;
  height: 28px;
  padding: 0 0.5rem;
  border-radius: 14px;
  background: var(--blue);
  color: #04141f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== Camera grid view (compact cards) ===== */
#cameraList.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
#cameraList.grid .cam-card { margin-bottom: 0; border-radius: 14px; }
#cameraList.grid .cam-foot { padding: 0.55rem 0.7rem; }
#cameraList.grid .cam-name {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cameraList.grid .cam-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  font-size: 0.72rem;
}
#cameraList.grid .cam-dot { width: 7px; height: 7px; }
@media (min-width: 700px) {
  #cameraList.grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Search + filters (Events) ===== */
.searchbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.searchbar input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
}
.searchbar input::placeholder { color: var(--text-3); }
.searchbar svg { color: var(--text-3); flex-shrink: 0; }

.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.7rem;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.arm-chips { padding-bottom: 0; flex: 0 1 auto; min-width: 0; }
/* mobile: drop the arm chips back to their own full-width row below the topbar */
@media (max-width: 768px) {
  #screen-cameras .topbar { flex-wrap: wrap; }
  #screen-cameras .arm-chips { order: 3; flex-basis: 100%; width: 100%; padding-top: 0.5rem; padding-bottom: 0.7rem; overflow-x: auto; }
}

.chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.18s;
}
.chip.danger { color: var(--red, #ff6b6b); border-color: var(--red, #ff6b6b); }
.chip.active { color: #04141f; }
.chip.active.cam { background: var(--purple); border-color: var(--purple); }
.chip.active.obj { background: var(--blue); border-color: var(--blue); }
.chip.active.size { background: var(--green); border-color: var(--green); }
.sync-man-row { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; }
.sync-man-row > span { flex: 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.sync-man-row .chips { padding-bottom: 0; flex-wrap: wrap; }

.adv-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin: 0.3rem 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.ev-date-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.8rem; }
.ev-date-row .select-trigger { flex: 1; }
#eventsLive { flex: 0 0 auto; }
#eventsLive.active,
#calToggle.active,
#tlapseBtn.active { background: var(--blue); border-color: var(--blue); color: #04141f; }
/* these toggle chips sit on their own line in panels */
#calToggle, #tlapseBtn { display: inline-flex; align-items: center; }
/* activity marker dot under a calendar day */
.date-sheet .cal-day { position: relative; }
.date-sheet .cal-day.has-activity::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--marker, #FFD54A); box-shadow: 0 0 6px 1px var(--marker, #FFD54A), 0 0 2px var(--marker, #FFD54A);
}
.adv-filter .left { display: flex; align-items: center; gap: 0.6rem; }
.adv-filter #advChevron { transition: transform 0.2s; display: inline-flex; color: var(--text-2); }
.adv-filter [data-icon] svg { width: 18px; height: 18px; }

/* custom select trigger + sheet */
.select-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.95rem; font-family: inherit;
  cursor: pointer; text-align: left;
}
.select-trigger:active { transform: scale(0.995); }
.select-trigger-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-2); }
.inline-fields .select-trigger { width: auto; }
.select-sheet-overlay {
  position: fixed; inset: 0; z-index: 3300;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.select-sheet-overlay.show { opacity: 1; }
.select-sheet {
  width: min(480px, 100%);
  max-height: 70vh; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: 18px 18px 0 0;
  padding: 0.5rem;
  padding-bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 0.5rem);
  transform: translateY(100%); transition: transform 0.22s ease;
}
.select-sheet-overlay.show .select-sheet { transform: translateY(0); }
@media (min-width: 640px) {
  .select-sheet-overlay { align-items: center; }
  .select-sheet { border-radius: 16px; transform: translateY(12px); }
}
.select-opt {
  width: 100%; text-align: left;
  padding: 0.85rem 1rem; margin: 0.1rem 0;
  background: none; border: none; border-radius: 10px;
  color: var(--text); font-size: 0.95rem; font-family: inherit; cursor: pointer;
}
.select-opt:active { background: var(--card-2); }
.select-opt.sel { background: var(--blue); color: #04141f; font-weight: 700; }

/* custom date picker sheet */
.date-sheet { padding: 1rem 1rem calc(var(--sab,env(safe-area-inset-bottom)) + 1rem); }
.date-sheet .cal-grid { gap: 5px; margin-bottom: 0; }
.date-sheet .cal-dow { color: var(--text-2); }
.date-sheet .cal-title { font-size: 1rem; font-weight: 700; }
.date-sheet .cal-head .text-btn { font-size: 1.5rem; line-height: 1; padding: 0 0.7rem; }
.date-sheet .cal-day {
  aspect-ratio: 1; font-size: 0.92rem; font-family: inherit; font-weight: 600;
  background: var(--card-2); color: var(--text); border: none; border-radius: 9px;
}
.date-sheet .cal-day:active { background: var(--border-hi); }
.date-sheet .cal-day.sel { background: var(--blue); color: #04141f; outline: none; }
.adv-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1rem 0.6rem;
  margin: -0.6rem 0 1rem;
}
.adv-panel .field { margin-bottom: 0.9rem; }
.adv-panel input[type="range"] { width: 100%; accent-color: var(--blue); }

/* ===== Event rows ===== */
.event-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.85rem;
  margin-bottom: 0.7rem;
  cursor: pointer;
  transition: transform 0.15s;
}
.event-row:active { transform: scale(0.985); }

.event-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--card-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }

.event-mid { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.event-headline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.98rem;
  font-weight: 700;
}
.event-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-2);
}
.tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 7px;
}
.tag-zone { background: var(--blue-soft); color: var(--blue); }
.tag-night { background: var(--purple-soft); color: var(--purple); display: inline-flex; align-items: center; gap: 0.25rem; }
.tag-night svg { width: 1em; height: 1em; }
.tag-plate { background: var(--yellow); color: #1a1400; font-weight: 800; letter-spacing: 0.5px; }
.tag-person { background: var(--green-soft, rgba(52,211,153,.15)); color: var(--green, #34d399); font-weight: 700; }


.event-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.score {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: 9px;
  background: var(--green-soft);
  color: var(--blue);
}
.event-ago { font-size: 0.78rem; color: var(--text-3); }

/* ===== Stats cards ===== */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.15rem;
  margin-bottom: 1rem;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.panel-title { font-size: 1.15rem; font-weight: 700; }
.panel-tag { font-size: 0.85rem; font-weight: 700; color: var(--blue); }

.ov-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.ov-cell {
  background: var(--card-2);
  border-radius: 14px;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ov-num { font-size: 1.6rem; font-weight: 800; }
.ov-label { font-size: 0.78rem; color: var(--text-2); }

.bar-row { margin-bottom: 1rem; }
.bar-row:last-child { margin-bottom: 0; }
.bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.bar-name { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.bar-fs { font-size: 0.72rem; color: var(--text-3); background: var(--card-2); padding: 0.1rem 0.4rem; border-radius: 5px; }
.bar-val { font-size: 0.85rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green), #4ade80); transition: width 0.6s; }
.bar-fill.blue { background: linear-gradient(90deg, var(--blue), #60a5fa); }

.net-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.net-label { color: var(--text-2); font-size: 0.9rem; }
.net-val { font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.9rem; }
.net-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--green); }

.muted-note { color: var(--text-3); font-size: 0.88rem; line-height: 1.5; }

/* ===== Settings ===== */
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--text-2); font-weight: 600; }
.field input, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.95rem;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); }
/* themed date picker chevron/calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="date"]::-webkit-inner-spin-button { display: none; }

/* Recordings */
.rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0 1rem 1rem; }
.rec-hour {
  position: relative;
  padding: 0.75rem 0;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}
.rec-hour:active { border-color: var(--blue); }
.rec-hour.off { opacity: 0.3; }
.rec-ev {
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--blue);
}
.lb-mode.rec { background: #a78bfa; color: #04141f; }

/* ===== Recordings: events sidebar ===== */
.rec-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1rem; }
.rec-body #recHours { width: 100%; }

/* ===== 24h Frigate-style review (video full-width top, vertical timeline fills the rest) =====
   The tab fills the viewport; only the timeline scrolls (the page itself is
   locked while this tab is open). Newest footage is at the top. */
/* lock the recordings screen to the viewport while the 24h tab is open so only
   the timeline scrolls, never the page */
body.rec24-lock { overflow: hidden; }
/* Fixed full-viewport overlay so the height is deterministic — the in-flow
   .screen is min-height:100dvh + padding (which scrolls and collapses the flex
   chain, leaving the timeline 0px tall). Sits below the bottom nav (z 100). */
#recTab24:not(.hidden) {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding-top: calc(var(--sat,env(safe-area-inset-top)) + .4rem);
}
.rec24-top { display: flex; align-items: center; gap: .5rem; padding: .1rem .6rem .4rem; flex: none; }
.rec24-top .rec24-title { font-weight: 700; margin: 0 auto; color: var(--text-2); }
.rec24-settings {
  position: absolute; top: calc(var(--sat,env(safe-area-inset-top)) + 3rem); right: .6rem; z-index: 21;
  display: flex; flex-direction: column; gap: .6rem; min-width: 230px;
  background: var(--card); border: 1px solid var(--border-hi); border-radius: 12px;
  padding: .8rem; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.rec24-settings.hidden { display: none; }
.rec24-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: .4rem; padding: 0 .6rem; padding-bottom: calc(var(--nav-h) + var(--sab,0px) + .6rem); overflow: hidden; }
.rec24-video { position: relative; width: 100%; aspect-ratio: 16/9; flex: none; background: #000; border-radius: 12px; overflow: hidden; max-height: 55dvh; position: relative; }
.rec24-video video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
/* All-cameras grid: tiles fill the video box, override single-video sizing */
.rec24-video:has(.rec24-grid) { width: 100% !important; aspect-ratio: 16/9; }
.rec24-grid { width: 100%; height: 100%; display: grid; gap: 3px; padding: 3px; box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: center; overflow: auto; }
.rec24-gtile { position: relative; aspect-ratio: 16/9; background: #111; overflow: hidden; border-radius: 6px; }
/* ring drawn over the video (inset box-shadow sits under the <video> child) */
.rec24-gtile.audio-on::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--purple);
  border-radius: 6px; pointer-events: none; z-index: 4; }
.rec24-gtile.audio-on .sync-label::after { content: ' 🔊'; }
.rec24-gtile video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.rec24-gap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #777; background: #0b0b0b; letter-spacing: .04em; }
.rec24-gap.hidden { display: none; }
/* tablet/landscape: cap video so scrubber stays visible; center via auto margins */
@media (min-width: 700px) and (orientation: landscape) {
  .rec24-video { aspect-ratio: auto; height: 45dvh; max-height: 45dvh; width: auto; max-width: 100%; margin: 0 auto; }
}
@media (min-width: 700px) and (orientation: portrait) {
  .rec24-video { max-height: 50dvh; }
}
.rec24-bar {
  display: flex; align-items: center; gap: .4rem; flex: none; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
}
.rec24-bar::-webkit-scrollbar { display: none; }
.rec24-bar .chip { flex: 0 0 auto; padding: .35rem .8rem; font-size: .8rem; }
.rec24-tlbox { position: relative; flex: 1; min-height: 0; width: 100%; }
.rec24-scroll {
  position: relative; overflow-y: auto; overflow-x: hidden; height: 100%; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  touch-action: pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior: none; cursor: ns-resize;
}
.rec24-scroll::-webkit-scrollbar { display: none; }
.rec24-track { position: relative; width: 100%; }
/* recorded footage spans (warmer = more activity); gaps show the track bg */
.rec24-seg { position: absolute; left: 54px; right: 10px; border-radius: 4px; background: rgba(120, 140, 170, .38); }
.rec24-ev { position: absolute; left: 30px; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--marker, #FFD54A); box-shadow: 0 0 4px rgba(0,0,0,.6); z-index: 2; }
.rec24-tick { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.09); }
.rec24-tick span { position: absolute; top: 2px; left: 8px; font-size: .6rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rec24-playhead {
  position: absolute; top: 50%; left: -2px; right: -2px; height: 2px;
  background: var(--red, #f4364c); transform: translateY(-50%);
  pointer-events: none; box-shadow: 0 0 7px var(--red, #f4364c); z-index: 5;
}
.rec24-playhead::before { content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--red, #f4364c); box-shadow: 0 0 6px var(--red, #f4364c); }
/* time pill centered on the playhead */
.rec24-phtime {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--red, #f4364c); color: #fff; font-weight: 800; font-size: .8rem;
  font-variant-numeric: tabular-nums; padding: .15rem .6rem; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Recording timeline scrubber */
.rec-timeline {
  position: relative;
  display: flex;
  height: 64px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}
.rec-tl-hour {
  flex: 1;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.rec-tl-hour:last-child { border-right: none; }
.rec-tl-hour.off { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 8px); }
.rec-tl-label {
  position: absolute; top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.rec-tl-ev {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  min-width: 14px; padding: 1px 4px;
  font-size: 0.56rem; font-weight: 700; line-height: 1.3;
  color: #fff; text-align: center;
  background: rgba(0,0,0,0.4); border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.rec-tl-cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; box-shadow: 0 0 6px #fff; }
.rec-tl-tip {
  position: absolute; top: 8px; transform: translateX(-50%);
  display: flex; gap: 4px; align-items: center;
  pointer-events: none; font-weight: 800;
}
.rec-tl-tip .tl-tip-time, .rec-tl-tip .tl-tip-ev {
  background: rgba(8, 12, 20, 0.92); border: 1px solid var(--border-hi);
  border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.72rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rec-tl-tip .tl-tip-ev { color: var(--marker, #FFD54A); }
.rec-tl-tip.na .tl-tip-time { color: var(--text-2); text-decoration: line-through; }
.rec-tl-tip.cancel { color: var(--red); font-size: 0.72rem; background: rgba(8,12,20,0.92); border: 1px solid var(--red); border-radius: 999px; padding: 0.15rem 0.5rem; }
/* mobile: declutter — drop the per-cell numbers, the scrub tip shows them */
@media (max-width: 600px) {
  .rec-tl-label, .rec-tl-ev { display: none; }
}
.rec-timeline.canceling { opacity: 0.45; }


#lbStage { position: relative; }

.clean-scrub-wrap { display: flex; align-items: stretch; padding-left: 0.5rem; }
.clean-scrub {
  position: relative;
  width: 100px;
  height: 68vh; max-height: 760px;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  touch-action: none; user-select: none; cursor: pointer;
}
.clean-seg { flex: 1; border-bottom: 1px solid rgba(255,255,255,0.04); }
.clean-seg:last-child { border-bottom: none; }
.clean-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: #fff; box-shadow: 0 0 6px #fff;
  pointer-events: none; transform: translateY(-50%); z-index: 2;
}
.clean-tip {
  position: absolute; left: 112px; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none; z-index: 2;
  background: rgba(8,12,20,0.92); border: 1px solid var(--border-hi);
  border-radius: 999px; padding: 0.15rem 0.5rem;
  font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Exports */
.export-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.export-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.export-name { font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-meta { font-size: 0.72rem; color: var(--text-2); }
.export-actions { display: flex; gap: 0.45rem; align-items: center; flex-shrink: 0; }
.export-actions button, .export-actions a {
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.6rem;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.export-actions button.danger { color: var(--red); }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; }

/* Favorites */
.lb-icon-btn.fav-on { color: #FFD700; }

/* Recordings sub-tabs */
.rec-tabs { display: flex; gap: 0.4rem; padding: 0 1rem 0.8rem; }
.rec-tab {
  flex: 1;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-2); font-weight: 700; font-size: 0.8rem;
  padding: 0.5rem; cursor: pointer; font-family: inherit;
}
.rec-tab.active { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); }

/* Event detail */
.info-modal.standalone { position: fixed; z-index: 3200; width: min(420px, calc(100vw - 2rem)); max-height: 82vh; }
.ev-snap { width: 100%; border-radius: 10px; margin-bottom: 0.7rem; display: block; }
.ev-info-btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-2); padding: 0.3rem 0.45rem; cursor: pointer;
}
.confirm-btn.play { background: var(--orange-soft); color: var(--orange); border: 1px solid var(--orange); }

/* Offline banner */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: calc(var(--sat,env(safe-area-inset-top)) + 0.5rem) 1rem 0.5rem;
  background: var(--red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  animation: fade 0.3s ease;
}
.offline-banner button {
  background: rgba(0, 0, 0, 0.25); border: none; border-radius: 8px;
  color: #fff; font-size: 0.75rem; font-weight: 800; padding: 0.3rem 0.7rem;
  cursor: pointer; font-family: inherit;
}

/* Pull-to-refresh */
.ptr-indicator {
  position: fixed;
  top: calc(var(--sat,env(safe-area-inset-top)) + 6px);
  left: 50%;
  transform: translate(-50%, -60px);
  z-index: 90;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,23,0.92);
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ptr-indicator.armed { border-color: var(--blue); box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 2px var(--blue); }
.ptr-indicator .spinner { width: 20px; height: 20px; margin: 0; }
.rec-events {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
  align-content: start;
}
.rec-events .empty { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .rec-events { grid-template-columns: 1fr; }
}
.rec-event {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem;
  cursor: pointer;
}
.rec-event:active { background: var(--orange-soft); transform: scale(0.97); }
.rec-event-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}
.rec-event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rec-fav {
  position: absolute;
  top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 20, 0.55);
  border: none; border-radius: 8px;
  padding: 5px;
  color: #fff;
  cursor: pointer;
}
.rec-fav svg { width: 18px; height: 18px; }
.rec-fav.on { color: #FFD700; }
.rec-fav.on svg { fill: currentColor; }
.rec-event-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  min-width: 0;
  padding: 0 0.15rem 0.1rem;
}
.rec-event-time {
  color: var(--orange);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rec-event-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-event-cam { font-size: 0.66rem; font-weight: 600; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Custom video controls ===== */
.vc-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding: 0.5rem 0.9rem calc(var(--sab,env(safe-area-inset-bottom)) + 0.6rem);
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  z-index: 15;
  transition: opacity 0.25s;
}
.vc-bar.vc-hidden { opacity: 0; pointer-events: none; }
.vc-seek {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  margin-bottom: 0.5rem;
  touch-action: none;
}
/* widen touch target beyond visible track */
.vc-seek::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.vc-buffer { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: rgba(255,255,255,0.3); }
.vc-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--orange, #fb923c); }
.vc-knob {
  position: absolute;
  top: 50%; left: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--orange, #fb923c);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(251,146,60,0.25);
}
.vc-row { display: flex; align-items: center; gap: 0.35rem; }
.vc-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: #fff; cursor: pointer;
  border-radius: 10px;
}
.vc-btn:active { background: rgba(255,255,255,0.12); }
.vc-time { font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.vc-spacer { flex: 1; }
.vc-speed { width: auto; min-width: 38px; padding: 0 0.4rem; font-size: 0.78rem; font-weight: 700; }
.vc-seek-label { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.primary-btn {
  width: 100%;
  padding: 0.95rem;
  background: var(--blue);
  color: #04141f;
  border: none;
  border-radius: 13px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn:active { transform: scale(0.985); }
/* secondary/soft variant: card background, so it needs readable theme text
   (the base .primary-btn text is dark for use on the light accent fill). */
.primary-btn.btn-soft { background: var(--card-2); border: 1px solid var(--border); color: var(--text); }

/* ===== Empty / loading ===== */
.empty { text-align: center; padding: 3.5rem 1rem; color: var(--text-3); }
.empty .big { font-size: 2.5rem; margin-bottom: 0.6rem; }
.spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Bottom nav ===== */
.nav {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 0.6rem);
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  max-width: 460px;
  height: 68px;
  background: var(--glass);
  border: 1px solid var(--border-hi);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-radius: 14px;
  transition: color 0.2s;
  position: relative;
}
.nav-item.active { color: var(--blue); }
.nav-item.active .nav-icon-wrap {
  background: var(--blue-soft);
}
.nav-icon-wrap {
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: background 0.2s;
}

/* ===== Lightbox (live) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.lightbox.active { display: flex; }
.lightbox-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: none; overflow: hidden; }
.lightbox-stage video, .lightbox-stage canvas, .lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lb-sync {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 6.5rem);
  z-index: 9;
  display: flex;
  flex-direction: row;
  justify-content: safe center;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  padding: 0.5rem 0.6rem;
  scrollbar-width: none;
}
/* Phones: bigger tiles = easier to tap and grab-scroll the strip. */
@media (max-width: 1023px) {
  .lb-sync .sync-tile { width: calc(170px * var(--sync-scale, 1)); }
}
.lb-sync::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .lb-sync .sync-tile { width: calc(280px * var(--sync-scale, 1)); }
}
.lb-sync.ptz-down { bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 5.6rem); }
.lb-sync.hidden { display: none; }
.lb-sync.collapsed { display: none; }
.sync-tile {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  width: calc(140px * var(--sync-scale, 1));
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.sync-tile:active { transform: scale(0.97); }
.sync-tile:hover { border-color: var(--blue); }
.sync-tile video { width: 100%; height: 100%; object-fit: cover !important; display: block; }
.sync-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
/* !important: the go2rtc player sets inline object-fit:contain, which would
   letterbox the small rail tiles. Rail previews always fill (cover). */
.sync-stage video, .sync-stage canvas, .sync-stage img { width: 100%; height: 100%; object-fit: cover !important; display: block; }
/* Inner media + overlays swallow touch on mobile, so horizontal swipes never
   reach the scrollable strip and the tile tap fights the <video>. Make them
   non-interactive — the .sync-tile div still gets the click (to switch camera)
   and the .lb-sync container gets the pan-x scroll. */
.sync-stage, .sync-stage video, .sync-stage canvas, .sync-stage img,
.sync-label, .sync-lat { pointer-events: none; }
.sync-label {
  position: absolute;
  left: 0.4rem; bottom: 0.4rem;
  max-width: calc(100% - 0.8rem);
  padding: 0.2rem 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.sync-lat {
  position: absolute;
  right: 0.4rem; top: 0.4rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.sync-lat:empty { display: none; }
/* Offline last-frame snapshot shown by the live player when all modes fail */
/* Event timeline scrubber (24h density bar above the events list) */
/* events multi-select */
.event-row.selecting { padding-left: .4rem; }
.event-row.selected { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.event-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff; margin-right: .2rem;
}
.event-row.selected .event-check { background: var(--blue); border-color: var(--blue); }
.ev-select-bar {
  position: sticky; bottom: .6rem; z-index: 5; margin: .6rem .2rem 0;
  display: flex; align-items: center; gap: .6rem; justify-content: space-between;
  background: var(--card-2); border: 1px solid var(--border); border-radius: .7rem;
  padding: .55rem .7rem; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.ev-select-bar.top { bottom: auto; top: .4rem; margin: 0 .2rem .6rem; }
.ev-sel-count { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.ev-sel-acts { display: flex; gap: .4rem; }
.ev-sel-act {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: .5rem; padding: .4rem .6rem; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.ev-sel-act:disabled { opacity: .4; cursor: default; }
.ev-sel-act.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.event-flash { animation: evflash 1.2s ease; }
@keyframes evflash {
  0%, 100% { background: transparent; }
  30% { background: color-mix(in srgb, var(--blue) 30%, transparent); }
}
.text-btn.danger { color: var(--red); }
/* Stream diagnostics cards (Settings -> Diagnostics -> Streams) */
.diag-card { background: var(--card-2); border: 1px solid var(--border); border-radius: .6rem; padding: .6rem .7rem; margin-bottom: .6rem; }
.diag-cam { font-weight: 700; margin-bottom: .4rem; }
.diag-mode { font-size: .7rem; font-weight: 700; color: var(--blue); margin-left: .3rem; }
.diag-grid { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .8rem; }
.diag-grid span { color: var(--text-2); }
.diag-grid b { font-variant-numeric: tabular-nums; }
.lp-offline { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-offline img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.7) brightness(.5); display: block; background: #000; }
.lp-offline-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: #fff;
  background: rgba(8,12,20,0.8); border: 1px solid rgba(255,255,255,0.18);
  white-space: nowrap;
}
.lp-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.lp-spinner {
  width: 26px; height: 26px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.sync-lat.ok { color: #4ade80; }
.sync-lat.warn { color: #fbbf24; }
.sync-lat.bad { color: #f87171; }
.sync-tile.sync-dead { opacity: 0.4; }
.sync-tile.sync-dead::after {
  content: 'no recording';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--text-2);
}

.lb-top {
  position: absolute;
  top: calc(var(--sat,env(safe-area-inset-top)) + 1rem);
  left: 1rem; right: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.lb-br {
  position: absolute;
  right: 1rem;
  bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 3rem);
  z-index: 10;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
}
.lb-cam {
  background: rgba(10,14,23,0.7);
  padding: 0.26rem 0.55rem;
  border-radius: 7px;
  font-size: 0.64rem;
  font-weight: 700;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.lb-cam:active { transform: scale(0.95); }

/* ===== Camera info mini modal ===== */
/* dim the page behind any open standalone modal (modals live outside #app) */
#app { transition: filter .2s ease; }
body:has(.info-modal.standalone:not(.hidden)) #app { filter: brightness(.82); }
/* dim the live video behind the in-lightbox info modal (non-standalone, lives inside .lightbox) */
.lightbox-stage { transition: filter .2s ease; }
.lightbox:has(.info-modal:not(.standalone):not(.hidden)) .lightbox-stage { filter: brightness(.5); }

.info-modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  width: min(340px, calc(100vw - 2.5rem));
  max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.info-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.info-head .lb-icon-btn { width: 30px; height: 30px; }
.info-body {
  padding: 0.75rem 1rem 1rem;
  overflow-y: auto;
  font-size: 0.78rem;
}
.info-section { margin-bottom: 0.7rem; }
.info-section-title {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-2);
  margin-bottom: 0.3rem;
}
.info-row {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.22rem 0;
}
.info-row .k { color: var(--text-2); flex-shrink: 0; }
.info-row .v { font-weight: 700; text-align: right; word-break: break-all; }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.confirm-btn {
  padding: 0.55rem 1.1rem; border-radius: 10px; border: none;
  font-size: 0.8rem; font-weight: 800; cursor: pointer; font-family: inherit;
}
.confirm-btn.cancel { background: var(--card-2); color: var(--text); border: 1px solid var(--border); }
.confirm-btn.danger { background: var(--red); color: #fff; }
.confirm-btn:active { transform: scale(0.95); }

/* ===== Login screen ===== */
.login-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #10243c, #07101d);
}
.login-box {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  width: min(300px, calc(100vw - 3rem));
}
.login-box h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.4rem; }
.login-box input {
  width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.85rem 1rem; color: #fff; font-size: 1rem; font-family: inherit;
}
.login-box .primary-btn { width: 100%; }
.login-err { color: var(--red); font-size: 0.82rem; font-weight: 600; }

/* ===== User management ===== */
.text-btn {
  background: none; border: none; color: var(--blue);
  font-size: 0.8rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.user-row .user-name { font-weight: 700; font-size: 0.9rem; }
.user-row .user-actions { display: flex; gap: 0.5rem; }
.user-row .user-actions button {
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px;
  color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.6rem;
  cursor: pointer; font-family: inherit;
}
.user-row .user-actions button.danger { color: var(--red); }
.field label.check-row, .check-row { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 0.6rem; cursor: pointer; line-height: 1.3; margin-bottom: 0; }
/* breathing room when several toggles stack in one field */
.check-row + .check-row { margin-top: 0.85rem; }
.field .check-row input[type="checkbox"], .check-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  align-self: center;
  width: 36px; height: 21px;
  padding: 0;
  margin: 0;
  position: relative;
  width: 36px; height: 21px;
  border-radius: 999px;
  background: var(--card-2, rgba(255,255,255,0.12));
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.check-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: left 0.2s;
}
.check-row input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.check-row input[type="checkbox"]:checked::after { left: 17px; }
.inline-fields { display: flex; gap: 0.5rem; }
.inline-fields input { flex: 1 1 auto; min-width: 110px; }
.inline-fields select {
  flex: 0 0 auto; width: auto;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
  color: #fff; padding: 0 0.9rem; font-family: inherit; font-size: 0.9rem;
}
.lb-mode {
  font-size: 0.54rem; font-weight: 800; letter-spacing: 0.4px;
  padding: 0.22rem 0.5rem; border-radius: 7px; color: #fff;
  border: none; cursor: pointer;
}
.lb-mode-menu {
  position: absolute;
  right: 1rem;
  bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 4rem);
  z-index: 11;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(10,14,23,0.92);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  overflow: hidden;
}
.lb-mode-menu button {
  padding: 0.7rem 1.3rem;
  background: transparent; border: none;
  color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.5px;
  cursor: pointer; text-align: left;
}
.lb-mode-menu button.active { color: var(--blue); }
.lb-mode.mse { background: var(--green); color: #04141f; }
.lb-mode.webrtc { background: var(--blue); color: #04141f; }
.lb-mode.jsmpeg { background: var(--orange); }
.lb-stream { color: #04141f; }
.lb-lat {
  font-size: 0.54rem; font-weight: 800; letter-spacing: 0.4px;
  padding: 0.22rem 0.5rem; border-radius: 7px;
  background: rgba(10,14,23,0.85);
  border: 1px solid var(--border-hi); color: #cbd5e1;
}
.lb-lat.hidden { display: none; }
.lb-lat.ok { color: #4ade80; }
.lb-lat.warn { color: #fbbf24; }
.lb-lat.bad { color: #f87171; }
.lb-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,14,23,0.7);
  border: none; color: #fff; font-size: 1.2rem; cursor: pointer;
}
.lb-status {
  position: absolute;
  bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 5.5rem);
  left: 50%; transform: translateX(-50%);
  background: rgba(10,14,23,0.8);
  padding: 0.55rem 1rem; border-radius: 10px;
  font-size: 0.82rem; display: flex; align-items: center; gap: 0.5rem; z-index: 10;
}
.lb-status.hidden { display: none; }
.lb-status .spinner { width: 16px; height: 16px; border-width: 2px; margin: 0; }
/* ===== Toast ===== */
/* styled like the info/confirm modals — glass card, just transient */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--sab,env(safe-area-inset-bottom)) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--glass);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  color: var(--text);
  padding: 0.7rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  max-width: min(420px, calc(100vw - 2.5rem));
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--red); }

/* scroll position time chip (next to the scrollbar thumb) */
.scroll-stamp {
  position: fixed;
  right: 20px;
  top: calc(var(--sat,env(safe-area-inset-top)) + 40px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  color: var(--text);
  padding: 0.5rem 0.9rem;
  z-index: 2900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.scroll-stamp.show { opacity: 1; }
.scroll-stamp .ss-day { font-size: 0.72rem; font-weight: 600; color: var(--text-2); }
.scroll-stamp .ss-time { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* slim, subtle scrollbars — grow on hover for easy grabbing */
* { scrollbar-width: thin; scrollbar-color: var(--border-hi, rgba(255,255,255,0.18)) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; transition: all 0.15s; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-hi, rgba(255,255,255,0.18));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3, rgba(255,255,255,0.35)); background-clip: content-box; }
/* widen the bar while hovering the scrollable area */
*:hover::-webkit-scrollbar { width: 13px; height: 13px; }
/* no up/down stepper arrows */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* OverlayScrollbars theme (desktop, incl. Firefox) — pill thumb, subtle */
.os-theme-light {
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-handle-border-radius: 999px;
  --os-handle-bg: var(--border-hi, rgba(255,255,255,0.22));
  --os-handle-bg-hover: var(--text-3, rgba(255,255,255,0.4));
  --os-handle-bg-active: rgba(255,255,255,0.55);
  --os-handle-interactive-area-offset: 4px;
}
/* grow the handle thicker when the scrollbar track is hovered */
.os-scrollbar:hover { --os-size: 15px; }

/* ===== Lightbox top actions + audio ===== */
/* Single row, never wrap. Buttons start at 40px (max) and shrink evenly to fit
   the screen width, so all visible buttons stay on one line. Icons scale with
   the button so they stay centred when shrunk. */
.lb-top-actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.lb-top-actions .lb-icon-btn { flex: 0 1 40px; height: auto; aspect-ratio: 1; min-width: 0; }
.lb-top-actions .lb-icon-btn svg { width: 50%; height: 50%; }
.lb-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,14,23,0.7);
  border: none; color: #fff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lb-icon-btn:active { transform: scale(0.92); }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  transition: opacity 0.25s;
}
/* fade prev/next together with the auto-hiding video controls */
.lightbox.chrome-hidden .lb-nav { opacity: 0; pointer-events: none; }
.lb-nav:active { transform: translateY(-50%) scale(0.92); }
.lb-nav.prev { left: 0.75rem; }
.lb-nav.next { right: 0.75rem; }
.lb-icon-btn.on { background: rgba(255,255,255,0.92); color: #0a0e17; }
.hidden { display: none !important; }

/* ===== PTZ single row (compact) ===== */
.ptz-pad {
  position: absolute;
  bottom: calc(var(--sab,env(safe-area-inset-bottom)) + 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  background: rgba(13,13,15,0.7);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  padding: 5px;
  z-index: 10;
}
.ptz-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--btn-deep);
  border: none;
  color: var(--blue);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.ptz-btn:active { background: var(--blue); color: #04141f; transform: scale(0.92); }
.ptz-btn.zin, .ptz-btn.zout { font-size: 1.15rem; }
.ptz-btn.home { display: none; }
.ptz-sep { width: 1px; background: var(--border-hi); margin: 4px 2px; }

/* ===== Brand (Submarine) ===== */
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.brand-logo { filter: drop-shadow(0 0 8px rgba(34,211,238,0.4)); flex-shrink: 0; }
/* cameras topbar is crowded (5 action buttons) — shrink brand + buttons so the
   brand + action row stay on one line (arm chips wrap to their own row below). */
#screen-cameras .brand { padding: .25rem .5rem .25rem .35rem; gap: .35rem; flex-shrink: 0; }
#screen-cameras .brand-logo { width: 20px; height: 20px; }
#screen-cameras .brand .page-title { font-size: 1.15rem; letter-spacing: -.5px; }
#screen-cameras .topbar-actions { gap: .35rem; flex-shrink: 0; }
#screen-cameras .topbar-actions .round-btn { width: 36px; height: 36px; }
#screen-cameras .topbar-actions .round-btn svg { width: 18px; height: 18px; }

/* ===== Viewpoint dropdown (⋮ menu) ===== */
.vp-menu {
  position: absolute;
  top: calc(var(--sat,env(safe-area-inset-top)) + 4rem);
  right: 1rem;
  width: 220px;
  background: rgba(12,24,40,0.95);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  z-index: 20;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6);
  animation: vpIn 0.2s cubic-bezier(.2,.8,.2,1);
  transform-origin: top right;
}
@keyframes vpIn { from { opacity: 0; transform: scale(0.92) translateY(-6px); } to { opacity: 1; transform: scale(1); } }
.vp-menu-head {
  padding: 0.85rem 1rem 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  font-weight: 700;
}
.vp-menu-list { padding: 0.25rem; padding-bottom: 0.5rem; }
.vp-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s;
  position: relative;
}
.vp-item:active { background: var(--blue-soft); }
/* tree line */
.vp-item::before {
  content: '';
  width: 7px; height: 7px;
  border-left: 1.5px solid var(--border-hi);
  border-bottom: 1.5px solid var(--border-hi);
  border-bottom-left-radius: 3px;
  margin-left: 0.4rem;
  flex-shrink: 0;
}
.vp-item .vp-ic { color: var(--blue); display: flex; }

/* ===== Live wall (2×2) ===== */
.lightbox-stage.wall { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 4px; }
.wall-tile { position: relative; background: #000; overflow: hidden; min-height: 0; border-radius: 6px; }
.wall-stage { width: 100%; height: 100%; }
.wall-tile video, .wall-tile canvas { width: 100%; height: 100%; object-fit: contain; }
.wall-name { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; padding: 2px 7px; border-radius: 4px; z-index: 2; pointer-events: none; }

/* ===== Review severity tag ===== */
.tag-alert { background: var(--red-soft, rgba(225,29,72,.15)); color: var(--red, #fb7185); }

/* ===== Stats sparklines ===== */
.spark { vertical-align: middle; margin-right: .35rem; opacity: .9; }
.bar-val, .net-val { display: inline-flex; align-items: center; }

/* ===== Topbar action group ===== */
.topbar-actions { display: flex; gap: .5rem; align-items: center; }

/* ===== Calendar month heatmap ===== */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: .5rem 0 .3rem; }
.cal-title { font-weight: 600; font-size: .85rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: .5rem; }
.cal-dow { text-align: center; font-size: .6rem; opacity: .55; padding: 2px 0; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: .7rem; cursor: pointer; background: var(--card-2); color: #0b0f19; font-weight: 600; }
.cal-day.off { color: inherit; opacity: .45; font-weight: 400; }
.cal-day.sel { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ===== Daily digest ===== */
.digest-strip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 26px; }
.digest-hour { position: relative; border-radius: 3px; background: var(--card-2); }
.digest-hour-label { position: absolute; top: 100%; left: 0; font-size: .55rem; opacity: .6; }

/* ===== Control button active state (neutral, theme-independent) ===== */
.lb-icon-btn.on { background: rgba(255,255,255,0.92); color: #0a0e17; }

/* ===== Clip seek-bar markers (event timeline) ===== */
.vc-marker { position: absolute; top: -2px; width: 4px; height: calc(100% + 4px); border-radius: 2px; background: #fbbf24; pointer-events: none; transform: translateX(-50%); }
.vc-marker.zone { background: #34d399; }

/* ===== Event snapshot bbox zoom ===== */
.ev-snap-wrap { position: relative; overflow: hidden; border-radius: 8px; cursor: zoom-in; }
.ev-snap-wrap .ev-snap { display: block; width: 100%; transition: transform .25s ease; }
.ev-snap-hint { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .65rem; padding: 2px 7px; border-radius: 4px; pointer-events: none; }

/* motion-only playback toggle active */
.vc-btn.on { color: var(--orange, #f97316); }

/* share modal must sit above the lightbox (z 2000) */
#shareModal { z-index: 2100; }

/* ── Theme picker ─────────────────────────────────────── */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.theme-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .7rem; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); font-size: .82rem; font-weight: 600;
  cursor: pointer; text-align: left;
}
.theme-btn.active { border-color: var(--blue); box-shadow: var(--glow); }
.theme-dots {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 38px; height: 26px; border-radius: 7px; border: 1px solid var(--border-hi);
}
.theme-dots i { width: 7px; height: 7px; border-radius: 50%; }

/* ===== Home room map ===== */
#screen-home { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.home-center { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: .2rem .5rem .6rem; border-radius: 28px; overflow: hidden; }
.home-map { width: 100%; max-width: 600px; margin: 0 auto; }
.home-map svg { width: 100%; height: auto; display: block; }
#homeMap .room.cam { cursor: pointer; }
/* idle rooms fade; the occupied one stays full + red */
#homeMap .cell { opacity: .45; transition: opacity .35s ease; }
#homeMap .cell.occupied { opacity: 1; }
#homeMap .cell.static { opacity: .22; }
#homeMap .room.cam.occupied { fill: url(#activeFill); stroke: #ff8a98; animation: homePulse 1.6s ease-in-out infinite; }
@keyframes homePulse {
  0%,100% { filter: drop-shadow(0 0 1px rgba(244,54,76,.2)); }
  50%     { filter: drop-shadow(0 0 16px rgba(244,54,76,.75)); }
}
.home-legend { display: flex; gap: 1.2rem; justify-content: center; align-items: center; color: var(--text-2); font-size: .82rem; margin-top: .6rem; }
.hl-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: .35rem; }
.hl-dot.idle { background: #3a4256; }
.hl-dot.active { background: #f4364c; }

/* hide per-tab page-title bars; keep only the product brand on Cameras */
.topbar:has(.page-title):not(:has(.brand)) { display: none; }

/* Home: vignette behind the map */

/* Home summary pills */
.home-summary { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: -1.4rem 0 1rem; }
.sum-pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .32rem .8rem; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.sum-pill b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.sum-pill.lit b { color: #ffce5a; }

/* Home legend as pills */
.home-legend { display: flex; gap: .6rem; justify-content: center; align-items: center; margin-top: .5rem; }
.lg-pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .28rem .7rem; font-size: .76rem; color: var(--text-2); }

/* Home radial action menu */
.home-radial { position: fixed; inset: 0; z-index: 120; }
.home-radial.hidden { display: none; }
.home-radial .hr-scrim { position: absolute; inset: 0; }
.hr-btn {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 74px; height: 34px; padding: 0 .8rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  background: var(--card);
  border: 1px solid var(--border-hi); border-radius: 999px;
  color: var(--text); font-size: .82rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  animation: hrPop .16s ease;
}
@keyframes hrPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.hr-btn.lights { color: var(--yellow); }

/* radial light button that's currently on */
.hr-btn.lights.on { color: #04141f; background: var(--yellow); border-color: var(--yellow); }
.hr-btn.ac { color: var(--blue); }
.hr-btn.ac.on { color: #04141f; background: var(--blue); border-color: var(--blue); }

/* panel enter animation */
#screen-home.active .home-map svg { animation: homeEnter .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes homeEnter { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }

/* Lightbox info chips hidden via Settings (overrides JS .hidden toggling) */
html.hide-lbLat #lbLat,
html.hide-lbStream #lbStream,
html.hide-lbMode #lbMode,
html.hide-lbCamName #lbCamName { display: none !important; }

/* ===== Camera groups (header in the grid) ===== */
.cam-group-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .3px;
  color: var(--text-2); text-transform: uppercase;
  padding: .7rem .2rem .3rem; cursor: pointer; user-select: none;
}
.cam-group-head .cgh-caret { transition: transform .2s; font-size: .7rem; }
.cam-group-head.collapsed .cgh-caret { transform: rotate(-90deg); }

/* ===== Layout sheet (arrange cameras) ===== */
.layout-sheet-wrap { position: fixed; inset: 0; z-index: 130; }
.layout-sheet-wrap.hidden { display: none; }
.layout-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.layout-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 80vh; display: flex; flex-direction: column;
  background: var(--card); border-top-left-radius: 18px; border-top-right-radius: 18px;
  border-top: 1px solid var(--border-hi);
  padding-bottom: calc(var(--sab,env(safe-area-inset-bottom)) + .6rem);
  animation: sheetUp .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetUp { from { transform: translateY(100%); } }
.layout-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem .4rem; font-weight: 800;
}
.layout-title { font-size: 1rem; }
#layoutList { overflow-y: auto; padding: .3rem .8rem; }
.layout-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .4rem; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); margin-bottom: .45rem;
  touch-action: none;
}
.layout-row.dragging { opacity: .85; border-color: var(--blue); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.layout-grip { cursor: grab; color: var(--text-2); font-size: 1rem; letter-spacing: -2px; padding: 0 .2rem; touch-action: none; }
.layout-name { flex: 1; font-weight: 600; font-size: .9rem; }
.layout-group {
  width: 7rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text); padding: .3rem .5rem; font-size: .82rem;
}

/* ===== Timelapse ===== */
.tl-body {
  padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .7rem;
  flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#tlPresets .chip.active { background: var(--blue); border-color: var(--blue); color: #04141f; }
.rec24-cams { gap: .4rem; padding: .1rem 0 .4rem; flex: 0 0 auto; }
.rec24-cams .chip { padding: .35rem .8rem; font-size: .8rem; }
.tl-row { display: flex; gap: .7rem; }
.tl-row .field { flex: 1; min-width: 0; }
.tl-actions { display: flex; gap: .6rem; margin-top: .4rem; }
.tl-actions .primary-btn { flex: 1; }
.tl-progress { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--text-2); }
.tl-progress .tl-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; position: relative; }
.tl-progress .tl-bar::after { content: ''; position: absolute; inset: 0 100% 0 0; background: var(--blue); transition: right .2s ease; }
.tl-progress .tl-bar[style*="--p"]::after { right: calc(100% - var(--p)); }