/* skins (أوضاع العرض) — fonts are self-hosted (SIL OFL, see /fonts/OFL-*.txt); a font file is downloaded only when its skin is on */
@font-face{font-family:'QH Plex';font-weight:400;font-display:swap;src:url(/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Plex';font-weight:400;font-display:swap;src:url(/fonts/plex-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Plex';font-weight:600;font-display:swap;src:url(/fonts/plex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Plex';font-weight:600;font-display:swap;src:url(/fonts/plex-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Plex';font-weight:700;font-display:swap;src:url(/fonts/plex-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Plex';font-weight:700;font-display:swap;src:url(/fonts/plex-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Kufi';font-weight:700;font-display:swap;src:url(/fonts/kufi-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Kufi';font-weight:700;font-display:swap;src:url(/fonts/kufi-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Kufi';font-weight:800;font-display:swap;src:url(/fonts/kufi-arabic-800.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Kufi';font-weight:800;font-display:swap;src:url(/fonts/kufi-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Readex';font-weight:400;font-display:swap;src:url(/fonts/readex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Readex';font-weight:400;font-display:swap;src:url(/fonts/readex-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Readex';font-weight:600;font-display:swap;src:url(/fonts/readex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Readex';font-weight:600;font-display:swap;src:url(/fonts/readex-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Tajawal';font-weight:400;font-display:swap;src:url(/fonts/tajawal-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Tajawal';font-weight:400;font-display:swap;src:url(/fonts/tajawal-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Tajawal';font-weight:500;font-display:swap;src:url(/fonts/tajawal-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Tajawal';font-weight:500;font-display:swap;src:url(/fonts/tajawal-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Tajawal';font-weight:700;font-display:swap;src:url(/fonts/tajawal-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Tajawal';font-weight:700;font-display:swap;src:url(/fonts/tajawal-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'QH Tajawal';font-weight:800;font-display:swap;src:url(/fonts/tajawal-arabic-800.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'QH Tajawal';font-weight:800;font-display:swap;src:url(/fonts/tajawal-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ───────── Skins (أوضاع العرض) — html[data-skin]. Purely visual: layout, permissions and features are the same in every skin.
   classic = the original look (no data-skin). Light/dark still apply to "sheet" and "line"; "andon" is always dark. */

/* ═════════ 1) ANDON — the shop-floor status board: steel, safety yellow, signal lights ═════════ */
:root[data-skin="andon"] {
  --bg: #1e2933; --bg2: #2a3946; --card: #26343f; --card2: #2e3e4b; --line: #3a4b59; --line2: #4b5f70;
  --tx: #e9eef2; --tx2: #a9b8c4; --tx3: #7d8f9e;
  --pri: #ffc20e; --pri2: #ffc20e; --pri-soft: rgba(255,194,14,.14); --acc: #ff8a3d; --acc-soft: rgba(255,138,61,.16);
  --ok: #2fbf71; --ok-soft: rgba(47,191,113,.16); --warn: #ffc20e; --warn-soft: rgba(255,194,14,.14); --bad: #ef5350; --bad-soft: rgba(239,83,80,.16);
  --shadow: 0 1px 0 rgba(0,0,0,.25);
  --r: 8px; --r2: 7px;
  --hdr: linear-gradient(135deg, #17212a, #22303c);
  --hz: repeating-linear-gradient(-45deg, #ffc20e 0 14px, #17212a 14px 28px);
  color-scheme: dark;
}
[data-skin="andon"] body, [data-skin="andon"] .num { font-family: 'QH Plex', 'Cairo', system-ui, sans-serif; }
[data-skin="andon"] body { font-feature-settings: "tnum"; }
[data-skin="andon"] .side { background: #17212a; border-color: var(--line); }
[data-skin="andon"] .brand { border-top: 7px solid transparent; border-image: var(--hz) 7; }
[data-skin="andon"] .brand .logo { background: var(--pri); border-radius: 8px; }
[data-skin="andon"] .nav a { border-radius: 6px; border-inline-start: 4px solid transparent; }
[data-skin="andon"] .nav a.on { background: linear-gradient(to left, rgba(255,194,14,.16), transparent); color: var(--tx); border-inline-start-color: var(--pri); }
[data-skin="andon"] .top { background: #17212a; border-bottom-color: var(--line); }
[data-skin="andon"] .top::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px; background: var(--hz); }
[data-skin="andon"] .btn.pri, [data-skin="andon"] .station-pills button.on { background: var(--pri); border-color: var(--pri); color: #17212a; }
[data-skin="andon"] .seg button.on { background: var(--pri); color: #17212a; box-shadow: none; }
[data-skin="andon"] .tabs button.on { color: var(--tx); border-color: var(--pri); background: linear-gradient(to top, rgba(255,194,14,.12), transparent); }
[data-skin="andon"] .kpi { background: var(--card); }
[data-skin="andon"] .kpi::after { width: 6px; box-shadow: 0 0 12px var(--c, var(--pri)); }
[data-skin="andon"] .kpi .v { font-weight: 700; }
[data-skin="andon"] .hero { background: #17212a; border: 1px solid var(--line); position: relative; overflow: hidden; }
[data-skin="andon"] .hero::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 5px; background: var(--hz); }
[data-skin="andon"] .hero .btn, [data-skin="andon"] .hero .herobtn { background: var(--pri); color: #17212a; border-color: var(--pri); }
[data-skin="andon"] .prog { background: #17212a; border-radius: 3px; }
[data-skin="andon"] .prog > i { border-radius: 3px; box-shadow: 0 0 8px var(--c, var(--pri2)); }
[data-skin="andon"] table.t th { background: #1b2630; color: var(--tx2); }
[data-skin="andon"] .att { border-inline-start: 4px solid var(--line2); }
[data-skin="andon"] .att.dirty { border-inline-start-color: var(--pri); }
[data-skin="andon"] .st-chips button.on { box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
[data-skin="andon"] .login { background: #17212a; }
[data-skin="andon"] .login .box { border-top: 8px solid transparent; border-image: var(--hz) 8; }
[data-skin="andon"] .toast { background: var(--pri); color: #17212a; }
@media (max-width: 900px) { [data-skin="andon"] .bottom { background: #17212a; } [data-skin="andon"] .bottom a.on { color: var(--pri); } }

/* ═════════ 2) SHEET — the QC check sheet on a clipboard: grid paper, ink, binder index tabs, red stamp ═════════ */
:root[data-skin="sheet"] {
  --bg: #dfe5ec; --bg2: #eef2f7; --card: #fbfcfd; --card2: #f4f7fa; --line: #c9d3df; --line2: #9fadbf;
  --tx: #1b2a4a; --tx2: #4f5d77; --tx3: #7d8aa0;
  --pri: #2457d6; --pri2: #2457d6; --pri-soft: #dfe8fb; --acc: #d98a00; --acc-soft: #fff3d6;
  --ok: #1e8e4e; --ok-soft: #e1f3e8; --warn: #b86e00; --warn-soft: #fff1d6; --bad: #c8102e; --bad-soft: #fbe3e7;
  --shadow: 0 1px 0 #c9d3df, 0 6px 16px rgba(27,42,74,.08);
  --r: 4px; --r2: 4px; --ink: #1b2a4a; --gridc: #e6ebf2;
  --hdr: linear-gradient(135deg, #1b2a4a, #2a3f6b);
  color-scheme: light;
}
:root[data-skin="sheet"][data-theme="dark"] {          /* dark = blueprint */
  --bg: #0f2547; --bg2: #16305a; --card: #132d55; --card2: #183564; --line: #2f4f82; --line2: #4a6ca3;
  --tx: #eaf1ff; --tx2: #b3c5e6; --tx3: #7f97c2;
  --pri: #8fb6ff; --pri2: #5b8ff2; --pri-soft: #1d3c70; --acc: #ffd166; --acc-soft: #3b3420;
  --ok: #6ee7a8; --ok-soft: #173f37; --warn: #ffd166; --warn-soft: #3b3420; --bad: #ff8a8a; --bad-soft: #4a2333;
  --shadow: 0 1px 0 rgba(0,0,0,.25); --ink: #b3c5e6; --gridc: rgba(143,182,255,.08);
  --hdr: linear-gradient(135deg, #0b1d3a, #16305a);
  color-scheme: dark;
}
[data-skin="sheet"] body { font-family: 'QH Readex', 'Cairo', system-ui, sans-serif; }
[data-skin="sheet"] .num { font-family: 'QH Readex', 'Cairo', system-ui; }
[data-skin="sheet"] h1, [data-skin="sheet"] h2, [data-skin="sheet"] h3, [data-skin="sheet"] .modal .mh, [data-skin="sheet"] table.t th, [data-skin="sheet"] .kpi .v { font-family: 'QH Kufi', 'Cairo', system-ui; }
[data-skin="sheet"] .main { background-color: var(--card); background-image: linear-gradient(var(--gridc) 1px, transparent 1px), linear-gradient(90deg, var(--gridc) 1px, transparent 1px); background-size: 24px 24px; }
[data-skin="sheet"] .top { background: color-mix(in srgb, var(--card) 92%, transparent); border-bottom: 1.5px solid var(--ink); }
[data-skin="sheet"] .side { background: var(--bg); border-left: 0; }
[data-skin="sheet"] .brand { background: transparent; color: var(--tx); }
[data-skin="sheet"] .brand .logo { background: var(--ink); border-radius: 4px; }
[data-skin="sheet"] .nav { gap: 5px; padding: 10px 0 10px 0; }
[data-skin="sheet"] .nav a { --t: #2457d6; background: var(--t); color: #fff; border-radius: 0 12px 12px 0; border-start-start-radius: 12px; border-end-start-radius: 12px; border-start-end-radius: 0; border-end-end-radius: 0; margin-inline-start: 10px; opacity: .86; box-shadow: inset -6px 0 0 rgba(0,0,0,.07); }
[data-skin="sheet"] .nav a:hover { opacity: 1; color: #fff; background: var(--t); }
[data-skin="sheet"] .nav a.on { background: var(--card); color: var(--tx); opacity: 1; font-family: 'QH Kufi', 'Cairo'; margin-inline-start: 0; padding-inline-start: 22px; border-inline-start: 6px solid var(--t); box-shadow: 0 1px 0 var(--line); }
[data-skin="sheet"] .nav a:nth-of-type(10n+1) { --t: #2457d6 } [data-skin="sheet"] .nav a:nth-of-type(10n+2) { --t: #1e8e4e } [data-skin="sheet"] .nav a:nth-of-type(10n+3) { --t: #0e8a8a }
[data-skin="sheet"] .nav a:nth-of-type(10n+4) { --t: #c47f00 } [data-skin="sheet"] .nav a:nth-of-type(10n+5) { --t: #7a4fd6 } [data-skin="sheet"] .nav a:nth-of-type(10n+6) { --t: #c8102e }
[data-skin="sheet"] .nav a:nth-of-type(10n+7) { --t: #5d6b84 } [data-skin="sheet"] .nav a:nth-of-type(10n+8) { --t: #2f6fd6 } [data-skin="sheet"] .nav a:nth-of-type(10n+9) { --t: #a0522d } [data-skin="sheet"] .nav a:nth-of-type(10n) { --t: #34466e }
[data-skin="sheet"] .nav .sep { color: var(--tx2); }
[data-skin="sheet"] .card, [data-skin="sheet"] .kpi, [data-skin="sheet"] .tw, [data-skin="sheet"] .att { border: 1.5px solid var(--ink); box-shadow: none; }
[data-skin="sheet"] .kpi::after { width: 0; }
[data-skin="sheet"] .kpi { border-top: 5px solid var(--c, var(--pri)); }
[data-skin="sheet"] table.t th { background: var(--bg2); border: 1px solid var(--line); color: var(--tx); }
[data-skin="sheet"] table.t td { border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
[data-skin="sheet"] .hero { background: var(--card); color: var(--tx); border: 1.5px solid var(--ink); }
[data-skin="sheet"] .hero .chip { background: var(--bg2); color: var(--tx2); }
[data-skin="sheet"] .hero .avatar { background: var(--ink); color: #fff; }
[data-skin="sheet"] .hero .btn, [data-skin="sheet"] .hero .herobtn { background: var(--pri); color: #fff; border-color: var(--pri); }
[data-skin="sheet"] .st-chips button { border-radius: 999px; border: 1.6px solid var(--line2); }
[data-skin="sheet"] .station-pills button { border-radius: 5px; border: 1.5px solid var(--ink); }
[data-skin="sheet"] .station-pills button.on { background: var(--ink); border-color: var(--ink); color: var(--card); }
[data-skin="sheet"] .seg { border-radius: 5px; border: 1.5px solid var(--ink); background: var(--card); }
[data-skin="sheet"] .seg button { border-radius: 3px; }
[data-skin="sheet"] .seg button.on { background: var(--ink); color: var(--card); box-shadow: none; }
[data-skin="sheet"] .badge.bad, [data-skin="sheet"] .chip.c[style*="dc2626"] { transform: rotate(-4deg); }
[data-skin="sheet"] .empty .i { filter: grayscale(1); }
[data-skin="sheet"] .login { background: var(--bg); background-image: linear-gradient(var(--gridc) 1px, transparent 1px), linear-gradient(90deg, var(--gridc) 1px, transparent 1px); background-size: 24px 24px; }
[data-skin="sheet"] .login .box { border: 1.5px solid var(--ink); border-radius: 4px; position: relative; }
[data-skin="sheet"] .login .box::before { content: ''; position: absolute; top: -12px; left: 50%; width: 110px; height: 22px; margin-left: -55px; background: linear-gradient(#9aa6b5, #7d8999); border-radius: 6px; }
@media (max-width: 900px) {
  [data-skin="sheet"] .side { background: var(--bg); }
  [data-skin="sheet"] .bottom { background: var(--bg); border-top: 0; gap: 4px; padding-top: 0; }
  [data-skin="sheet"] .bottom a { --t: #2457d6; background: var(--t); color: #fff; border-radius: 0 0 10px 10px; opacity: .86; }
  [data-skin="sheet"] .bottom a:nth-child(2) { --t: #1e8e4e } [data-skin="sheet"] .bottom a:nth-child(3) { --t: #c47f00 } [data-skin="sheet"] .bottom a:nth-child(4) { --t: #7a4fd6 } [data-skin="sheet"] .bottom a:nth-child(5) { --t: #0e8a8a }
  [data-skin="sheet"] .bottom a.on { background: var(--card); color: var(--tx); opacity: 1; border-bottom: 4px solid var(--t); }
}

/* ═════════ 3) LINE — the production line: one colour per workshop, soft rounded cards, floating dock ═════════ */
:root[data-skin="line"] {
  --bg: #eef1f4; --bg2: #e4e8ed; --card: #ffffff; --card2: #f6f8fa; --line: #e1e6ec; --line2: #c9d1da;
  --tx: #1d2733; --tx2: #5c6978; --tx3: #8b96a3;
  --pri: #1d2733; --pri2: #d9480f; --pri-soft: #fde8de; --acc: #d9480f; --acc-soft: #fde8de;
  --ok: #0f9d8a; --ok-soft: #dcf3ef; --warn: #e8890c; --warn-soft: #fdf0dc; --bad: #c2255c; --bad-soft: #fbe3ec;
  --shadow: 0 1px 2px rgba(29,39,51,.05);
  --r: 20px; --r2: 12px;
  --hdr: linear-gradient(120deg, #2563eb 0 20%, #0f9d8a 20% 40%, #d9480f 40% 60%, #7048e8 60% 80%, #c2255c 80%);
  --strip: linear-gradient(to left, #2563eb 0 20%, #0f9d8a 20% 40%, #d9480f 40% 60%, #7048e8 60% 80%, #c2255c 80%);
  color-scheme: light;
}
:root[data-skin="line"][data-theme="dark"] {
  --bg: #12171d; --bg2: #1b222a; --card: #1a2129; --card2: #202832; --line: #2a3440; --line2: #3a4655;
  --tx: #e8edf2; --tx2: #a3afbd; --tx3: #748191;
  --pri: #e8edf2; --pri2: #ff7a45; --pri-soft: #3a2418; --acc: #ff7a45; --acc-soft: #3a2418;
  --ok: #2dd4bf; --ok-soft: #123631; --warn: #fbbf24; --warn-soft: #3a2e10; --bad: #f06595; --bad-soft: #3d1b2a;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}
[data-skin="line"] body, [data-skin="line"] .num { font-family: 'QH Tajawal', 'Cairo', system-ui, sans-serif; }
[data-skin="line"] body { font-size: 15.5px; }
[data-skin="line"] .side { border-left: 0; background: var(--card); }
[data-skin="line"] .brand { background: var(--card); color: var(--tx); border-bottom: 5px solid transparent; border-image: var(--strip) 5; }
[data-skin="line"] .brand .logo { background: var(--bg2); border-radius: 50%; }
[data-skin="line"] .nav a { border-radius: 999px; }
[data-skin="line"] .nav a.on { background: var(--tx); color: var(--card); }
[data-skin="line"] .top { border-bottom: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); }
[data-skin="line"] .top::after { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--strip); opacity: .9; }
[data-skin="line"] .iconbtn { border-radius: 50%; border: 0; background: var(--card); }
[data-skin="line"] .card, [data-skin="line"] .kpi, [data-skin="line"] .tw { border: 0; }
[data-skin="line"] .kpi::after { inset-inline-start: 16px; top: auto; bottom: 0; height: 4px; width: 46px; border-radius: 4px 4px 0 0; }
[data-skin="line"] .kpi .v { font-weight: 800; }
[data-skin="line"] .btn { border-radius: 999px; }
[data-skin="line"] .btn.pri { background: var(--pri2); border-color: var(--pri2); }
[data-skin="line"] .seg { border-radius: 999px; background: var(--card); }
[data-skin="line"] .seg button { border-radius: 999px; }
[data-skin="line"] .seg button.on { background: var(--tx); color: var(--card); box-shadow: none; }
[data-skin="line"] .tabs button.on { color: var(--tx); border-image: var(--strip) 3; }
[data-skin="line"] .station-pills button { border: 0; background: var(--bg2); }
[data-skin="line"] .station-pills button.on { background: var(--pri2); color: #fff; }
[data-skin="line"] .station-pills button:nth-child(5n+1).on { background: #2563eb } [data-skin="line"] .station-pills button:nth-child(5n+2).on { background: #0f9d8a }
[data-skin="line"] .station-pills button:nth-child(5n+3).on { background: #d9480f } [data-skin="line"] .station-pills button:nth-child(5n+4).on { background: #7048e8 } [data-skin="line"] .station-pills button:nth-child(5n).on { background: #c2255c }
[data-skin="line"] .att { border: 0; border-radius: 18px; }
[data-skin="line"] .st-chips button { border-radius: 999px; border: 0; background: var(--bg2); }
[data-skin="line"] .hero { background: var(--card); color: var(--tx); position: relative; overflow: hidden; padding-bottom: 24px; }
[data-skin="line"] .hero::after { content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 6px; background: var(--strip); }
[data-skin="line"] .hero .chip { background: var(--bg2); color: var(--tx2); }
[data-skin="line"] .hero .avatar { background: var(--tx); color: var(--card); }
[data-skin="line"] .hero .btn, [data-skin="line"] .hero .herobtn { background: var(--pri2); color: #fff; border-color: var(--pri2); }
[data-skin="line"] .prog { height: 10px; }
[data-skin="line"] .savebar { border-radius: 999px; border: 0; box-shadow: 0 8px 24px rgba(29,39,51,.14); }
[data-skin="line"] .modal { border-radius: 24px; }
[data-skin="line"] .login { background: var(--bg); }
[data-skin="line"] .login .box { border-radius: 26px; box-shadow: 0 20px 50px rgba(29,39,51,.12); border-bottom: 8px solid transparent; border-image: var(--strip) 8; }
@media (max-width: 900px) {
  [data-skin="line"] .content { padding-bottom: 118px; }
  [data-skin="line"] .bottom { inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 22px; border: 0; background: #1d2733; padding: 7px 4px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  [data-skin="line"] .bottom a { color: #9aa6b4; }
  [data-skin="line"] .bottom a.on { color: #fff; }
  [data-skin="line"] .savebar { bottom: 92px; }
}

/* settings: skin picker */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.skin-opt { border: 2px solid var(--line); border-radius: 12px; padding: 8px; background: var(--card2); cursor: pointer; text-align: start; color: var(--tx); font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.skin-opt.on { border-color: var(--pri2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pri2) 25%, transparent); }
.skin-opt .pv { height: 64px; border-radius: 8px; display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.skin-opt .pv i { display: block; }
.skin-opt small { font-weight: 500; color: var(--tx2); font-size: 12px; line-height: 1.4; }
:root[data-skin="sheet"][data-theme="dark"] .hero .herobtn { color: #0b1d3a; }

/* ───────── home-page boards per skin (rendered only in that skin) */
/* andon: station tiles with a 3-lamp stack light */
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ab-tile { display: flex; gap: 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; color: inherit; }
.ab-tile:hover { border-color: var(--pri); }
.ab-tile.alert { border-color: var(--bad); background: linear-gradient(color-mix(in srgb, var(--bad) 14%, var(--card2)), var(--card2)); }
.ab-light { display: flex; flex-direction: column; gap: 5px; padding: 7px 5px; background: #17212a; border-radius: 6px; align-self: flex-start; }
.ab-light i { width: 13px; height: 13px; border-radius: 50%; background: #33424e; }
.ab-light i.on.r { background: #ef5350; box-shadow: 0 0 10px #ef5350; } .ab-light i.on.y { background: #ffc20e; box-shadow: 0 0 10px #ffc20e; } .ab-light i.on.g { background: #2fbf71; box-shadow: 0 0 10px #2fbf71; }
.ab-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ab-in > b { font-size: 19px; text-align: start; }
.ab-n { display: flex; justify-content: space-between; align-items: baseline; }
.ab-n b { font-size: 24px; } .ab-n b small { font-size: 13px; color: var(--tx2); font-weight: 600; } .ab-n > span { font-size: 12.5px; color: var(--tx2); }
.ab-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .ab-legend span { display: flex; align-items: center; gap: 6px; } .ab-legend i { width: 10px; height: 10px; border-radius: 50%; }
/* line: workshops as rings on a conveyor belt */
.lf-flow { position: relative; display: flex; justify-content: space-between; gap: 10px; overflow-x: auto; padding: 4px 4px 6px; scrollbar-width: thin; }
.lf-belt { position: absolute; top: 46px; inset-inline: 40px; height: 9px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--line2) 0 18px, var(--bg2) 18px 26px); }
.lf-node { position: relative; flex: 1 0 140px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lf-ring { position: relative; width: 88px; height: 88px; background: var(--card); border-radius: 50%; }
.lf-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; direction: ltr; }
.lf-ring b { font-size: 21px; font-weight: 800; } .lf-ring small { font-size: 12.5px; color: var(--tx2); }
.lf-name { font-size: 15px; font-weight: 800; }
.lf-st { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.lf-st a { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--bg2); color: var(--tx); }
.lf-st a.no { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
/* sheet: weekly check-sheet with a red stamp */
.sh-t th, .sh-t td { text-align: center; }
.sh-t td:first-child, .sh-t th:first-child { text-align: start; }
.sh-stamp { display: inline-block; border: 2.5px solid var(--bad); color: var(--bad); font-weight: 800; padding: 0 10px; border-radius: 6px; transform: rotate(-8deg); font-family: 'QH Kufi', 'Cairo', system-ui; }
@media (max-width: 600px) {
  .ab-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ab-tile { padding: 10px; gap: 8px; }
  .ab-light { padding: 5px 4px; gap: 4px; } .ab-light i { width: 10px; height: 10px; }
  .ab-in > b { font-size: 15px; } .ab-n b { font-size: 19px; } .ab-in .small { display: none; }
  .lf-node { flex-basis: 118px; } .lf-name { font-size: 13.5px; }
}