/* Self-hosted fonts (SIL Open Font License 1.1; licences in assets/fonts/OFL-*.txt) */
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/alexandria.6735614039.woff") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/cinzel-800.1742aa2936.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSansArabic-Regular.6f61141227.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSansArabic-SemiBold.597bd5502e.ttf") format("truetype"); }
/* SPDX-License-Identifier: GPL-3.0-or-later · © 2026 V7x / Vairous 7x and HorusOS contributors */
/* GENERATED file: mockup/index.html is assembled from mockup/src by mockup/tools/build.py — edit the sources. */
/* TOKENS:BEGIN css */
/* GENERATED from brand/tokens.json by mockup/tools/gen_tokens.py — do not edit by hand */
/* source sha256 b3e9c7f6acbd6c26c31fe14df32bf16e0629eced43765855ae8ba0ba49ccd443; brand/tokens-cyber.json sha256 9f70751b51d50e3035dcaa98f53f8f960b2aba4a595d9a2436223f0b4d2ad987 */
:root {
  --dur-instant: 0ms;
  --dur-micro: 80ms;
  --dur-micro-out: 140ms;
  --dur-quick: 140ms;
  --dur-base: 200ms;
  --dur-open: 240ms;
  --dur-move: 300ms;
  --dur-stage: 360ms;
  --dur-scene: 600ms;
  --dur-hero: 900ms;
  --dur-cinematic-min: 1100ms;
  --dur-cinematic-max: 4000ms;
  --stagger: 16ms;
  --min-start-opacity: 0.35;
  --ease-sahm: cubic-bezier(0.16,1,0.3,1);
  --ease-zill: cubic-bezier(0.4,0,1,1);
  --ease-mizan: cubic-bezier(0.2,0.8,0.2,1);
  --ease-mawj: cubic-bezier(0.3,1.32,0.5,1);
  --ease-fajr: cubic-bezier(0.7,0,0.1,1);
  --ease-linear: linear;
  --ease-natta: cubic-bezier(0.25,1.6,0.45,1);
  --font-ui: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic UI", "Noto Sans", sans-serif;
  --font-display: "Alexandria", "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans Mono", "IBM Plex Sans Arabic", monospace;
  --fs-display-2xl: 96px; --lh-display-2xl: 104px; --lh-ar-display-2xl: 120px; --fw-display-2xl: 200; --fw-ar-display-2xl: 400;
  --fs-display-xl: 56px; --lh-display-xl: 64px; --lh-ar-display-xl: 76px; --fw-display-xl: 300; --fw-ar-display-xl: 600;
  --fs-display-l: 40px; --lh-display-l: 48px; --lh-ar-display-l: 60px; --fw-display-l: 400; --fw-ar-display-l: 600;
  --fs-title-1: 28px; --lh-title-1: 36px; --lh-ar-title-1: 44px; --fw-title-1: 600; --fw-ar-title-1: 600;
  --fs-title-2: 20px; --lh-title-2: 28px; --lh-ar-title-2: 34px; --fw-title-2: 600; --fw-ar-title-2: 600;
  --fs-body-l: 16px; --lh-body-l: 24px; --lh-ar-body-l: 28px; --fw-body-l: 400; --fw-ar-body-l: 400;
  --fs-body: 14px; --lh-body: 20px; --lh-ar-body: 24px; --fw-body: 400; --fw-ar-body: 400;
  --fs-caption: 12px; --lh-caption: 16px; --lh-ar-caption: 20px; --fw-caption: 500; --fw-ar-caption: 500;
  --fs-mono: 13px; --lh-mono: 20px; --lh-ar-mono: 20px; --fw-mono: 400; --fw-ar-mono: 400;
  --p-layl: #05070F; --p-layl-rgb: 5 7 15;
  --p-fayrouz: #2EE6C9; --p-fayrouz-rgb: 46 230 201;
  --p-fayrouz-glow: #5FF0DA; --p-fayrouz-glow-rgb: 95 240 218;
  --p-fayrouz-deep: #006B5F; --p-fayrouz-deep-rgb: 0 107 95;
  --p-lazward: #2D4FD6; --p-lazward-rgb: 45 79 214;
  --p-dahab: #F4B740; --p-dahab-rgb: 244 183 64;
  --p-dahab-light: #FFD98A; --p-dahab-light-rgb: 255 217 138;
  --p-dahab-ink: #7E5200; --p-dahab-ink-rgb: 126 82 0;
  --p-raml: #ECE6DA; --p-raml-rgb: 236 230 218;
  --p-marjan: #FF6B81; --p-marjan-rgb: 255 107 129;
  --p-nile-blue: #1460C4; --p-nile-blue-rgb: 20 96 196;
  --p-nile-blue-glow: #6CAEF8; --p-nile-blue-glow-rgb: 108 174 248;
  --p-shafaq: #FF4FD8; --p-shafaq-rgb: 255 79 216;
  --p-shafaq-glow: #FF8AE2; --p-shafaq-glow-rgb: 255 138 226;
  --p-shafaq-ink: #9A157E; --p-shafaq-ink-rgb: 154 21 126;
  --stage-bg: #05070F; --stage-bg-bottom: #0B1020;
  --nd-bg-void: #05070F; --nd-bg-void-rgb: 5 7 15; --nd-bg-window: #0B1020; --nd-bg-window-rgb: 11 16 32; --nd-bg-view: #111830; --nd-bg-view-rgb: 17 24 48; --nd-bg-view-alt: #141C38; --nd-bg-view-alt-rgb: 20 28 56; --nd-bg-raised: #18213D; --nd-bg-raised-rgb: 24 33 61; --nd-bg-hover: #212C4E; --nd-bg-hover-rgb: 33 44 78; --nd-line-hairline: #2B3963; --nd-line-hairline-rgb: 43 57 99; --nd-line-control: #6B7BAA; --nd-line-control-rgb: 107 123 170; --nd-text-1: #EDF1FF; --nd-text-1-rgb: 237 241 255; --nd-text-2: #AEB8D6; --nd-text-2-rgb: 174 184 214; --nd-text-3: #8E99BC; --nd-text-3-rgb: 142 153 188; --nd-accent: #2EE6C9; --nd-accent-rgb: 46 230 201; --nd-accent-hover: #5FF0DA; --nd-accent-hover-rgb: 95 240 218; --nd-accent-press: #1CC3AA; --nd-accent-press-rgb: 28 195 170; --nd-on-accent: #021A16; --nd-on-accent-rgb: 2 26 22; --nd-accent-text: #2EE6C9; --nd-accent-text-rgb: 46 230 201; --nd-link: #5FF0DA; --nd-link-rgb: 95 240 218; --nd-visited: #B9A7FF; --nd-visited-rgb: 185 167 255; --nd-gold: #F4B740; --nd-gold-rgb: 244 183 64; --nd-on-gold: #1F1300; --nd-on-gold-rgb: 31 19 0; --nd-gold-text: #F4B740; --nd-gold-text-rgb: 244 183 64; --nd-lapis: #2D4FD6; --nd-lapis-rgb: 45 79 214; --nd-success: #3DDC97; --nd-success-rgb: 61 220 151; --nd-warning: #FF9E3D; --nd-warning-rgb: 255 158 61; --nd-error: #FF6B81; --nd-error-rgb: 255 107 129; --nd-on-error: #2A0008; --nd-on-error-rgb: 42 0 8; --nd-info: #62B6FF; --nd-info-rgb: 98 182 255; --nd-selection-bg: #2EE6C9; --nd-selection-bg-rgb: 46 230 201; --nd-selection-fg: #021A16; --nd-selection-fg-rgb: 2 26 22; --nd-selection-inactive-bg: #16403D; --nd-selection-inactive-bg-rgb: 22 64 61; --nd-selection-inactive-fg: #EDF1FF; --nd-selection-inactive-fg-rgb: 237 241 255; --nd-selection-alt-bg: #0E6B60; --nd-selection-alt-bg-rgb: 14 107 96; --nd-selection-alt-fg: #EDF1FF; --nd-selection-alt-fg-rgb: 237 241 255; --nd-focus-ring: #2EE6C9; --nd-focus-ring-rgb: 46 230 201;
  --cd-bg-void: #191B20; --cd-bg-void-rgb: 25 27 32; --cd-bg-window: #1F2127; --cd-bg-window-rgb: 31 33 39; --cd-bg-view: #272930; --cd-bg-view-rgb: 39 41 48; --cd-bg-view-alt: #2B2D35; --cd-bg-view-alt-rgb: 43 45 53; --cd-bg-raised: #2F323A; --cd-bg-raised-rgb: 47 50 58; --cd-bg-hover: #393C45; --cd-bg-hover-rgb: 57 60 69; --cd-line-hairline: #43474F; --cd-line-hairline-rgb: 67 71 79; --cd-line-control: #848A96; --cd-line-control-rgb: 132 138 150; --cd-text-1: #F2F3F5; --cd-text-1-rgb: 242 243 245; --cd-text-2: #C3C7CF; --cd-text-2-rgb: 195 199 207; --cd-text-3: #A5ABB6; --cd-text-3-rgb: 165 171 182; --cd-accent: #6CAEF8; --cd-accent-rgb: 108 174 248; --cd-accent-hover: #8CC0FA; --cd-accent-hover-rgb: 140 192 250; --cd-accent-press: #4F98EE; --cd-accent-press-rgb: 79 152 238; --cd-on-accent: #04172E; --cd-on-accent-rgb: 4 23 46; --cd-accent-text: #6CAEF8; --cd-accent-text-rgb: 108 174 248; --cd-link: #8CC0FA; --cd-link-rgb: 140 192 250; --cd-visited: #C2B1FF; --cd-visited-rgb: 194 177 255; --cd-gold: #F4B740; --cd-gold-rgb: 244 183 64; --cd-on-gold: #1F1300; --cd-on-gold-rgb: 31 19 0; --cd-gold-text: #F4B740; --cd-gold-text-rgb: 244 183 64; --cd-lapis: #2D4FD6; --cd-lapis-rgb: 45 79 214; --cd-success: #52C78F; --cd-success-rgb: 82 199 143; --cd-warning: #F5B24E; --cd-warning-rgb: 245 178 78; --cd-error: #FF8696; --cd-error-rgb: 255 134 150; --cd-on-error: #2A0008; --cd-on-error-rgb: 42 0 8; --cd-info: #6CAEF8; --cd-info-rgb: 108 174 248; --cd-selection-bg: #6CAEF8; --cd-selection-bg-rgb: 108 174 248; --cd-selection-fg: #04172E; --cd-selection-fg-rgb: 4 23 46; --cd-selection-inactive-bg: #2A3B5C; --cd-selection-inactive-bg-rgb: 42 59 92; --cd-selection-inactive-fg: #F2F3F5; --cd-selection-inactive-fg-rgb: 242 243 245; --cd-selection-alt-bg: #2F5E99; --cd-selection-alt-bg-rgb: 47 94 153; --cd-selection-alt-fg: #F2F3F5; --cd-selection-alt-fg-rgb: 242 243 245; --cd-focus-ring: #6CAEF8; --cd-focus-ring-rgb: 108 174 248;
  --fd-bg-void: #0F1113; --fd-bg-void-rgb: 15 17 19; --fd-bg-window: #141619; --fd-bg-window-rgb: 20 22 25; --fd-bg-view: #1B1E22; --fd-bg-view-rgb: 27 30 34; --fd-bg-view-alt: #1F2226; --fd-bg-view-alt-rgb: 31 34 38; --fd-bg-raised: #23272C; --fd-bg-raised-rgb: 35 39 44; --fd-bg-hover: #2B3036; --fd-bg-hover-rgb: 43 48 54; --fd-line-hairline: #3A4047; --fd-line-hairline-rgb: 58 64 71; --fd-line-control: #727984; --fd-line-control-rgb: 114 121 132; --fd-text-1: #E9ECEF; --fd-text-1-rgb: 233 236 239; --fd-text-2: #B7BEC6; --fd-text-2-rgb: 183 190 198; --fd-text-3: #959CA6; --fd-text-3-rgb: 149 156 166; --fd-accent: #4FD1C1; --fd-accent-rgb: 79 209 193; --fd-accent-hover: #6FDCCF; --fd-accent-hover-rgb: 111 220 207; --fd-accent-press: #3BB8A9; --fd-accent-press-rgb: 59 184 169; --fd-on-accent: #06201D; --fd-on-accent-rgb: 6 32 29; --fd-accent-text: #4FD1C1; --fd-accent-text-rgb: 79 209 193; --fd-link: #6FDCCF; --fd-link-rgb: 111 220 207; --fd-visited: #C2B1FF; --fd-visited-rgb: 194 177 255; --fd-gold: #F0B44A; --fd-gold-rgb: 240 180 74; --fd-on-gold: #1F1300; --fd-on-gold-rgb: 31 19 0; --fd-gold-text: #F0B44A; --fd-gold-text-rgb: 240 180 74; --fd-lapis: #2D4FD6; --fd-lapis-rgb: 45 79 214; --fd-success: #5BCB8F; --fd-success-rgb: 91 203 143; --fd-warning: #F0A653; --fd-warning-rgb: 240 166 83; --fd-error: #FF7B86; --fd-error-rgb: 255 123 134; --fd-on-error: #2A0008; --fd-on-error-rgb: 42 0 8; --fd-info: #6CB4F5; --fd-info-rgb: 108 180 245; --fd-selection-bg: #4FD1C1; --fd-selection-bg-rgb: 79 209 193; --fd-selection-fg: #06201D; --fd-selection-fg-rgb: 6 32 29; --fd-selection-inactive-bg: #1E3B38; --fd-selection-inactive-bg-rgb: 30 59 56; --fd-selection-inactive-fg: #E9ECEF; --fd-selection-inactive-fg-rgb: 233 236 239; --fd-selection-alt-bg: #1C5F57; --fd-selection-alt-bg-rgb: 28 95 87; --fd-selection-alt-fg: #E9ECEF; --fd-selection-alt-fg-rgb: 233 236 239; --fd-focus-ring: #4FD1C1; --fd-focus-ring-rgb: 79 209 193;
}
[data-world="nova"][data-scheme="dark"] {
  color-scheme: dark;
  --bg-void: #05070F; --bg-void-rgb: 5 7 15;
  --bg-window: #0B1020; --bg-window-rgb: 11 16 32;
  --bg-view: #111830; --bg-view-rgb: 17 24 48;
  --bg-view-alt: #141C38; --bg-view-alt-rgb: 20 28 56;
  --bg-raised: #18213D; --bg-raised-rgb: 24 33 61;
  --bg-hover: #212C4E; --bg-hover-rgb: 33 44 78;
  --line-hairline: #2B3963; --line-hairline-rgb: 43 57 99;
  --line-control: #6B7BAA; --line-control-rgb: 107 123 170;
  --text-1: #EDF1FF; --text-1-rgb: 237 241 255;
  --text-2: #AEB8D6; --text-2-rgb: 174 184 214;
  --text-3: #8E99BC; --text-3-rgb: 142 153 188;
  --accent: #2EE6C9; --accent-rgb: 46 230 201;
  --accent-hover: #5FF0DA; --accent-hover-rgb: 95 240 218;
  --accent-press: #1CC3AA; --accent-press-rgb: 28 195 170;
  --on-accent: #021A16; --on-accent-rgb: 2 26 22;
  --accent-text: #2EE6C9; --accent-text-rgb: 46 230 201;
  --link: #5FF0DA; --link-rgb: 95 240 218;
  --visited: #B9A7FF; --visited-rgb: 185 167 255;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #F4B740; --gold-text-rgb: 244 183 64;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #3DDC97; --success-rgb: 61 220 151;
  --warning: #FF9E3D; --warning-rgb: 255 158 61;
  --error: #FF6B81; --error-rgb: 255 107 129;
  --on-error: #2A0008; --on-error-rgb: 42 0 8;
  --info: #62B6FF; --info-rgb: 98 182 255;
  --selection-bg: #2EE6C9; --selection-bg-rgb: 46 230 201;
  --selection-fg: #021A16; --selection-fg-rgb: 2 26 22;
  --selection-inactive-bg: #16403D; --selection-inactive-bg-rgb: 22 64 61;
  --selection-inactive-fg: #EDF1FF; --selection-inactive-fg-rgb: 237 241 255;
  --selection-alt-bg: #0E6B60; --selection-alt-bg-rgb: 14 107 96;
  --selection-alt-fg: #EDF1FF; --selection-alt-fg-rgb: 237 241 255;
  --focus-ring: #2EE6C9; --focus-ring-rgb: 46 230 201;
  --glass-panel: rgb(11 16 32 / 0.78);
  --glass-popup: rgb(13 19 38 / 0.86);
  --glass-tooltip: rgb(13 19 38 / 0.92);
  --glass-opaque: rgb(11 16 32 / 0.96);
  --glow-accent: 0 0 24px rgba(46,230,201,0.45);
  --glow-gold: 0 0 20px rgba(244,183,64,0.35);
  --shadow-window-active: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(46,230,201,0.18);
  --shadow-window-inactive: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-popup: 0 12px 32px rgba(0,0,0,0.50);
  --r-chip: 4px;
  --r-control: 8px;
  --r-card: 12px;
  --r-window: 12px;
  --r-popup: 14px;
  --r-panel: 18px;
  --r-pill: 999px;
  --panel-h: 56px; --panel-icon: 32px; --panel-float-gap: 10px;
  --scheme-name: "V7xNovaDark";
}
[data-world="nova"][data-scheme="light"] {
  color-scheme: light;
  --bg-void: #ECE6DA; --bg-void-rgb: 236 230 218;
  --bg-window: #F7F3EC; --bg-window-rgb: 247 243 236;
  --bg-view: #FFFDF9; --bg-view-rgb: 255 253 249;
  --bg-view-alt: #FAF7F1; --bg-view-alt-rgb: 250 247 241;
  --bg-raised: #F0EADF; --bg-raised-rgb: 240 234 223;
  --bg-hover: #E6DFD1; --bg-hover-rgb: 230 223 209;
  --line-hairline: #D6CCBA; --line-hairline-rgb: 214 204 186;
  --line-control: #857B68; --line-control-rgb: 133 123 104;
  --text-1: #121829; --text-1-rgb: 18 24 41;
  --text-2: #3E4760; --text-2-rgb: 62 71 96;
  --text-3: #535B77; --text-3-rgb: 83 91 119;
  --accent: #006B5F; --accent-rgb: 0 107 95;
  --accent-hover: #00594F; --accent-hover-rgb: 0 89 79;
  --accent-press: #004A42; --accent-press-rgb: 0 74 66;
  --on-accent: #FFFFFF; --on-accent-rgb: 255 255 255;
  --accent-text: #006B5F; --accent-text-rgb: 0 107 95;
  --link: #006B5F; --link-rgb: 0 107 95;
  --visited: #6A3DBF; --visited-rgb: 106 61 191;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #7E5200; --gold-text-rgb: 126 82 0;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #186D42; --success-rgb: 24 109 66;
  --warning: #924700; --warning-rgb: 146 71 0;
  --error: #B3202F; --error-rgb: 179 32 47;
  --on-error: #FFFFFF; --on-error-rgb: 255 255 255;
  --info: #1858B8; --info-rgb: 24 88 184;
  --selection-bg: #006B5F; --selection-bg-rgb: 0 107 95;
  --selection-fg: #FFFFFF; --selection-fg-rgb: 255 255 255;
  --selection-inactive-bg: #D3E6E1; --selection-inactive-bg-rgb: 211 230 225;
  --selection-inactive-fg: #121829; --selection-inactive-fg-rgb: 18 24 41;
  --selection-alt-bg: #006B5F; --selection-alt-bg-rgb: 0 107 95;
  --selection-alt-fg: #FFFFFF; --selection-alt-fg-rgb: 255 255 255;
  --focus-ring: #006B5F; --focus-ring-rgb: 0 107 95;
  --accent-glow: #18C3A9;
  --glass-panel: rgb(247 243 236 / 0.8);
  --glass-popup: rgb(247 243 236 / 0.88);
  --glass-tooltip: rgb(247 243 236 / 0.94);
  --glass-opaque: rgb(247 243 236 / 0.97);
  --glow-accent: 0 0 16px rgba(24,195,169,0.30);
  --glow-gold: 0 0 16px rgba(176,122,16,0.25);
  --shadow-window-active: 0 14px 40px rgba(18,24,41,0.18);
  --shadow-window-inactive: 0 6px 18px rgba(18,24,41,0.12);
  --shadow-popup: 0 10px 28px rgba(18,24,41,0.16);
  --r-chip: 4px;
  --r-control: 8px;
  --r-card: 12px;
  --r-window: 12px;
  --r-popup: 14px;
  --r-panel: 18px;
  --r-pill: 999px;
  --panel-h: 56px; --panel-icon: 32px; --panel-float-gap: 10px;
  --scheme-name: "V7xNovaLight";
}
[data-world="classic"][data-scheme="light"] {
  color-scheme: light;
  --bg-void: #EEF0F3; --bg-void-rgb: 238 240 243;
  --bg-window: #F4F5F7; --bg-window-rgb: 244 245 247;
  --bg-view: #FFFFFF; --bg-view-rgb: 255 255 255;
  --bg-view-alt: #F7F8FA; --bg-view-alt-rgb: 247 248 250;
  --bg-raised: #FAFBFC; --bg-raised-rgb: 250 251 252;
  --bg-hover: #EAECF0; --bg-hover-rgb: 234 236 240;
  --line-hairline: #DADDE3; --line-hairline-rgb: 218 221 227;
  --line-control: #80868F; --line-control-rgb: 128 134 143;
  --text-1: #1A1C22; --text-1-rgb: 26 28 34;
  --text-2: #4A505C; --text-2-rgb: 74 80 92;
  --text-3: #5F6673; --text-3-rgb: 95 102 115;
  --accent: #1460C4; --accent-rgb: 20 96 196;
  --accent-hover: #1053AB; --accent-hover-rgb: 16 83 171;
  --accent-press: #0D4793; --accent-press-rgb: 13 71 147;
  --on-accent: #FFFFFF; --on-accent-rgb: 255 255 255;
  --accent-text: #1460C4; --accent-text-rgb: 20 96 196;
  --link: #1460C4; --link-rgb: 20 96 196;
  --visited: #6A3DBF; --visited-rgb: 106 61 191;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #7E5200; --gold-text-rgb: 126 82 0;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #17793B; --success-rgb: 23 121 59;
  --warning: #935600; --warning-rgb: 147 86 0;
  --error: #BF2E44; --error-rgb: 191 46 68;
  --on-error: #FFFFFF; --on-error-rgb: 255 255 255;
  --info: #1460C4; --info-rgb: 20 96 196;
  --selection-bg: #1460C4; --selection-bg-rgb: 20 96 196;
  --selection-fg: #FFFFFF; --selection-fg-rgb: 255 255 255;
  --selection-inactive-bg: #DCE6F5; --selection-inactive-bg-rgb: 220 230 245;
  --selection-inactive-fg: #1A1C22; --selection-inactive-fg-rgb: 26 28 34;
  --selection-alt-bg: #1460C4; --selection-alt-bg-rgb: 20 96 196;
  --selection-alt-fg: #FFFFFF; --selection-alt-fg-rgb: 255 255 255;
  --focus-ring: #1460C4; --focus-ring-rgb: 20 96 196;
  --glass-panel: rgb(244 245 247 / 0.9);
  --glass-popup: rgb(244 245 247 / 0.92);
  --glass-tooltip: rgb(250 251 252 / 0.95);
  --glass-opaque: rgb(244 245 247 / 0.98);
  --glow-accent: none;
  --glow-gold: none;
  --shadow-window-active: 0 12px 32px rgba(26,28,34,0.18);
  --shadow-window-inactive: 0 6px 16px rgba(26,28,34,0.12);
  --shadow-popup: 0 8px 24px rgba(26,28,34,0.16);
  --r-chip: 4px;
  --r-control: 6px;
  --r-card: 8px;
  --r-window: 8px;
  --r-popup: 8px;
  --r-panel: 0px;
  --r-pill: 999px;
  --panel-h: 48px; --panel-icon: 28px; --panel-float-gap: 0px;
  --scheme-name: "V7xClassicLight";
}
[data-world="classic"][data-scheme="dark"] {
  color-scheme: dark;
  --bg-void: #191B20; --bg-void-rgb: 25 27 32;
  --bg-window: #1F2127; --bg-window-rgb: 31 33 39;
  --bg-view: #272930; --bg-view-rgb: 39 41 48;
  --bg-view-alt: #2B2D35; --bg-view-alt-rgb: 43 45 53;
  --bg-raised: #2F323A; --bg-raised-rgb: 47 50 58;
  --bg-hover: #393C45; --bg-hover-rgb: 57 60 69;
  --line-hairline: #43474F; --line-hairline-rgb: 67 71 79;
  --line-control: #848A96; --line-control-rgb: 132 138 150;
  --text-1: #F2F3F5; --text-1-rgb: 242 243 245;
  --text-2: #C3C7CF; --text-2-rgb: 195 199 207;
  --text-3: #A5ABB6; --text-3-rgb: 165 171 182;
  --accent: #6CAEF8; --accent-rgb: 108 174 248;
  --accent-hover: #8CC0FA; --accent-hover-rgb: 140 192 250;
  --accent-press: #4F98EE; --accent-press-rgb: 79 152 238;
  --on-accent: #04172E; --on-accent-rgb: 4 23 46;
  --accent-text: #6CAEF8; --accent-text-rgb: 108 174 248;
  --link: #8CC0FA; --link-rgb: 140 192 250;
  --visited: #C2B1FF; --visited-rgb: 194 177 255;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #F4B740; --gold-text-rgb: 244 183 64;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #52C78F; --success-rgb: 82 199 143;
  --warning: #F5B24E; --warning-rgb: 245 178 78;
  --error: #FF8696; --error-rgb: 255 134 150;
  --on-error: #2A0008; --on-error-rgb: 42 0 8;
  --info: #6CAEF8; --info-rgb: 108 174 248;
  --selection-bg: #6CAEF8; --selection-bg-rgb: 108 174 248;
  --selection-fg: #04172E; --selection-fg-rgb: 4 23 46;
  --selection-inactive-bg: #2A3B5C; --selection-inactive-bg-rgb: 42 59 92;
  --selection-inactive-fg: #F2F3F5; --selection-inactive-fg-rgb: 242 243 245;
  --selection-alt-bg: #2F5E99; --selection-alt-bg-rgb: 47 94 153;
  --selection-alt-fg: #F2F3F5; --selection-alt-fg-rgb: 242 243 245;
  --focus-ring: #6CAEF8; --focus-ring-rgb: 108 174 248;
  --glass-panel: rgb(31 33 39 / 0.88);
  --glass-popup: rgb(31 33 39 / 0.92);
  --glass-tooltip: rgb(47 50 58 / 0.95);
  --glass-opaque: rgb(31 33 39 / 0.98);
  --glow-accent: none;
  --glow-gold: none;
  --shadow-window-active: 0 14px 36px rgba(0,0,0,0.45);
  --shadow-window-inactive: 0 6px 18px rgba(0,0,0,0.35);
  --shadow-popup: 0 10px 28px rgba(0,0,0,0.40);
  --r-chip: 4px;
  --r-control: 6px;
  --r-card: 8px;
  --r-window: 8px;
  --r-popup: 8px;
  --r-panel: 0px;
  --r-pill: 999px;
  --panel-h: 48px; --panel-icon: 28px; --panel-float-gap: 0px;
  --scheme-name: "V7xClassicDark";
}
[data-world="focus"][data-scheme="dark"] {
  color-scheme: dark;
  --bg-void: #0F1113; --bg-void-rgb: 15 17 19;
  --bg-window: #141619; --bg-window-rgb: 20 22 25;
  --bg-view: #1B1E22; --bg-view-rgb: 27 30 34;
  --bg-view-alt: #1F2226; --bg-view-alt-rgb: 31 34 38;
  --bg-raised: #23272C; --bg-raised-rgb: 35 39 44;
  --bg-hover: #2B3036; --bg-hover-rgb: 43 48 54;
  --line-hairline: #3A4047; --line-hairline-rgb: 58 64 71;
  --line-control: #727984; --line-control-rgb: 114 121 132;
  --text-1: #E9ECEF; --text-1-rgb: 233 236 239;
  --text-2: #B7BEC6; --text-2-rgb: 183 190 198;
  --text-3: #959CA6; --text-3-rgb: 149 156 166;
  --accent: #4FD1C1; --accent-rgb: 79 209 193;
  --accent-hover: #6FDCCF; --accent-hover-rgb: 111 220 207;
  --accent-press: #3BB8A9; --accent-press-rgb: 59 184 169;
  --on-accent: #06201D; --on-accent-rgb: 6 32 29;
  --accent-text: #4FD1C1; --accent-text-rgb: 79 209 193;
  --link: #6FDCCF; --link-rgb: 111 220 207;
  --visited: #C2B1FF; --visited-rgb: 194 177 255;
  --gold: #F0B44A; --gold-rgb: 240 180 74;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #F0B44A; --gold-text-rgb: 240 180 74;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #5BCB8F; --success-rgb: 91 203 143;
  --warning: #F0A653; --warning-rgb: 240 166 83;
  --error: #FF7B86; --error-rgb: 255 123 134;
  --on-error: #2A0008; --on-error-rgb: 42 0 8;
  --info: #6CB4F5; --info-rgb: 108 180 245;
  --selection-bg: #4FD1C1; --selection-bg-rgb: 79 209 193;
  --selection-fg: #06201D; --selection-fg-rgb: 6 32 29;
  --selection-inactive-bg: #1E3B38; --selection-inactive-bg-rgb: 30 59 56;
  --selection-inactive-fg: #E9ECEF; --selection-inactive-fg-rgb: 233 236 239;
  --selection-alt-bg: #1C5F57; --selection-alt-bg-rgb: 28 95 87;
  --selection-alt-fg: #E9ECEF; --selection-alt-fg-rgb: 233 236 239;
  --focus-ring: #4FD1C1; --focus-ring-rgb: 79 209 193;
  --glass-panel: rgb(20 22 25 / 1);
  --glass-popup: rgb(27 30 34 / 1);
  --glass-tooltip: rgb(35 39 44 / 1);
  --glass-opaque: rgb(20 22 25 / 1);
  --glow-accent: none;
  --glow-gold: none;
  --shadow-window-active: 0 4px 12px rgba(0,0,0,0.40);
  --shadow-window-inactive: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-popup: 0 4px 12px rgba(0,0,0,0.35);
  --r-chip: 2px;
  --r-control: 4px;
  --r-card: 6px;
  --r-window: 6px;
  --r-popup: 6px;
  --r-panel: 0px;
  --r-pill: 999px;
  --panel-h: 40px; --panel-icon: 22px; --panel-float-gap: 0px;
  --scheme-name: "V7xFocusDark";
}
[data-world="focus"][data-scheme="light"] {
  color-scheme: light;
  --bg-void: #EEF0F3; --bg-void-rgb: 238 240 243;
  --bg-window: #F4F5F7; --bg-window-rgb: 244 245 247;
  --bg-view: #FFFFFF; --bg-view-rgb: 255 255 255;
  --bg-view-alt: #F7F8FA; --bg-view-alt-rgb: 247 248 250;
  --bg-raised: #FAFBFC; --bg-raised-rgb: 250 251 252;
  --bg-hover: #EAECF0; --bg-hover-rgb: 234 236 240;
  --line-hairline: #DADDE3; --line-hairline-rgb: 218 221 227;
  --line-control: #80868F; --line-control-rgb: 128 134 143;
  --text-1: #1A1C22; --text-1-rgb: 26 28 34;
  --text-2: #4A505C; --text-2-rgb: 74 80 92;
  --text-3: #5F6673; --text-3-rgb: 95 102 115;
  --accent: #006B5F; --accent-rgb: 0 107 95;
  --accent-hover: #00594F; --accent-hover-rgb: 0 89 79;
  --accent-press: #004A42; --accent-press-rgb: 0 74 66;
  --on-accent: #FFFFFF; --on-accent-rgb: 255 255 255;
  --accent-text: #006B5F; --accent-text-rgb: 0 107 95;
  --link: #006B5F; --link-rgb: 0 107 95;
  --visited: #6A3DBF; --visited-rgb: 106 61 191;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #7E5200; --gold-text-rgb: 126 82 0;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #17793B; --success-rgb: 23 121 59;
  --warning: #935600; --warning-rgb: 147 86 0;
  --error: #BF2E44; --error-rgb: 191 46 68;
  --on-error: #FFFFFF; --on-error-rgb: 255 255 255;
  --info: #1460C4; --info-rgb: 20 96 196;
  --selection-bg: #006B5F; --selection-bg-rgb: 0 107 95;
  --selection-fg: #FFFFFF; --selection-fg-rgb: 255 255 255;
  --selection-inactive-bg: #D3E6E1; --selection-inactive-bg-rgb: 211 230 225;
  --selection-inactive-fg: #1A1C22; --selection-inactive-fg-rgb: 26 28 34;
  --selection-alt-bg: #006B5F; --selection-alt-bg-rgb: 0 107 95;
  --selection-alt-fg: #FFFFFF; --selection-alt-fg-rgb: 255 255 255;
  --focus-ring: #006B5F; --focus-ring-rgb: 0 107 95;
  --glass-panel: rgb(244 245 247 / 1);
  --glass-popup: rgb(255 255 255 / 1);
  --glass-tooltip: rgb(250 251 252 / 1);
  --glass-opaque: rgb(244 245 247 / 1);
  --glow-accent: none;
  --glow-gold: none;
  --shadow-window-active: 0 4px 12px rgba(26,28,34,0.16);
  --shadow-window-inactive: 0 2px 8px rgba(26,28,34,0.10);
  --shadow-popup: 0 4px 12px rgba(26,28,34,0.14);
  --r-chip: 2px;
  --r-control: 4px;
  --r-card: 6px;
  --r-window: 6px;
  --r-popup: 6px;
  --r-panel: 0px;
  --r-pill: 999px;
  --panel-h: 40px; --panel-icon: 22px; --panel-float-gap: 0px;
  --scheme-name: "V7xFocusLight";
}
[data-world="cyber"][data-scheme="dark"] {
  color-scheme: dark;
  --bg-void: #05070F; --bg-void-rgb: 5 7 15;
  --bg-window: #070B14; --bg-window-rgb: 7 11 20;
  --bg-view: #0A101C; --bg-view-rgb: 10 16 28;
  --bg-view-alt: #0D1422; --bg-view-alt-rgb: 13 20 34;
  --bg-raised: #111A2B; --bg-raised-rgb: 17 26 43;
  --bg-hover: #172338; --bg-hover-rgb: 23 35 56;
  --line-hairline: #1D3346; --line-hairline-rgb: 29 51 70;
  --line-control: #4F7F8C; --line-control-rgb: 79 127 140;
  --text-1: #E8FFFA; --text-1-rgb: 232 255 250;
  --text-2: #A8C8CC; --text-2-rgb: 168 200 204;
  --text-3: #88A7AE; --text-3-rgb: 136 167 174;
  --accent: #2EE6C9; --accent-rgb: 46 230 201;
  --accent-hover: #5FF0DA; --accent-hover-rgb: 95 240 218;
  --accent-press: #1CC3AA; --accent-press-rgb: 28 195 170;
  --on-accent: #021A16; --on-accent-rgb: 2 26 22;
  --accent-text: #2EE6C9; --accent-text-rgb: 46 230 201;
  --link: #5FF0DA; --link-rgb: 95 240 218;
  --visited: #FF8AE2; --visited-rgb: 255 138 226;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #F4B740; --gold-text-rgb: 244 183 64;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #3DDC97; --success-rgb: 61 220 151;
  --warning: #FF9E3D; --warning-rgb: 255 158 61;
  --error: #FF6B81; --error-rgb: 255 107 129;
  --on-error: #2A0008; --on-error-rgb: 42 0 8;
  --info: #62B6FF; --info-rgb: 98 182 255;
  --selection-bg: #2EE6C9; --selection-bg-rgb: 46 230 201;
  --selection-fg: #021A16; --selection-fg-rgb: 2 26 22;
  --selection-inactive-bg: #123B3A; --selection-inactive-bg-rgb: 18 59 58;
  --selection-inactive-fg: #E8FFFA; --selection-inactive-fg-rgb: 232 255 250;
  --selection-alt-bg: #0E6B60; --selection-alt-bg-rgb: 14 107 96;
  --selection-alt-fg: #E8FFFA; --selection-alt-fg-rgb: 232 255 250;
  --focus-ring: #2EE6C9; --focus-ring-rgb: 46 230 201;
  --shafaq: #FF4FD8; --shafaq-rgb: 255 79 216;
  --shafaq-hover: #FF7AE3; --shafaq-hover-rgb: 255 122 227;
  --on-shafaq: #2A0322; --on-shafaq-rgb: 42 3 34;
  --shafaq-text: #FF4FD8; --shafaq-text-rgb: 255 79 216;
  --glass-panel: rgb(7 11 20 / 0.8);
  --glass-popup: rgb(10 16 28 / 0.88);
  --glass-tooltip: rgb(10 16 28 / 0.94);
  --glass-opaque: rgb(7 11 20 / 0.97);
  --glow-accent: 0 0 18px rgba(46,230,201,0.55);
  --glow-shafaq: 0 0 16px rgba(255,79,216,0.45);
  --glow-gold: 0 0 20px rgba(244,183,64,0.35);
  --rim: inset 0 1px 0 rgba(46,230,201,0.70);
  --shadow-window-active: 0 16px 40px rgba(0,0,0,0.60), 0 0 0 1px rgba(46,230,201,0.35), 0 0 24px rgba(46,230,201,0.18);
  --shadow-window-inactive: 0 8px 24px rgba(0,0,0,0.50), 0 0 0 1px rgba(29,51,70,1);
  --shadow-popup: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(46,230,201,0.30);
  --r-chip: 2px;
  --r-control: 2px;
  --r-card: 2px;
  --r-window: 0px;
  --r-popup: 2px;
  --r-panel: 0px;
  --r-pill: 999px;
  --panel-h: 44px; --panel-icon: 28px; --panel-float-gap: 0px;
  --cut-control: 4px; --cut-card: 8px; --cut-popup: 10px; --cut-panel: 12px;
  --rim-w: 1px; --rim-top: 0.7; --rim-side: 0.35; --rim-bottom: 0.2;
  --halo-alpha: 0.3; --halo-r: 16px;
  --scheme-name: "V7xCyberDark";
}
[data-world="cyber"][data-scheme="light"] {
  color-scheme: light;
  --bg-void: #E6ECEE; --bg-void-rgb: 230 236 238;
  --bg-window: #F1F5F6; --bg-window-rgb: 241 245 246;
  --bg-view: #FFFFFF; --bg-view-rgb: 255 255 255;
  --bg-view-alt: #F5F8F9; --bg-view-alt-rgb: 245 248 249;
  --bg-raised: #FAFCFC; --bg-raised-rgb: 250 252 252;
  --bg-hover: #E2EAEC; --bg-hover-rgb: 226 234 236;
  --line-hairline: #C8D5D9; --line-hairline-rgb: 200 213 217;
  --line-control: #687E86; --line-control-rgb: 104 126 134;
  --text-1: #0A1418; --text-1-rgb: 10 20 24;
  --text-2: #34464D; --text-2-rgb: 52 70 77;
  --text-3: #4C5F66; --text-3-rgb: 76 95 102;
  --accent: #006B5F; --accent-rgb: 0 107 95;
  --accent-hover: #00594F; --accent-hover-rgb: 0 89 79;
  --accent-press: #004A42; --accent-press-rgb: 0 74 66;
  --on-accent: #FFFFFF; --on-accent-rgb: 255 255 255;
  --accent-text: #006B5F; --accent-text-rgb: 0 107 95;
  --link: #006B5F; --link-rgb: 0 107 95;
  --visited: #9A157E; --visited-rgb: 154 21 126;
  --gold: #F4B740; --gold-rgb: 244 183 64;
  --on-gold: #1F1300; --on-gold-rgb: 31 19 0;
  --gold-text: #7E5200; --gold-text-rgb: 126 82 0;
  --lapis: #2D4FD6; --lapis-rgb: 45 79 214;
  --success: #146C35; --success-rgb: 20 108 53;
  --warning: #935600; --warning-rgb: 147 86 0;
  --error: #B3202F; --error-rgb: 179 32 47;
  --on-error: #FFFFFF; --on-error-rgb: 255 255 255;
  --info: #1858B8; --info-rgb: 24 88 184;
  --selection-bg: #006B5F; --selection-bg-rgb: 0 107 95;
  --selection-fg: #FFFFFF; --selection-fg-rgb: 255 255 255;
  --selection-inactive-bg: #CFE5E0; --selection-inactive-bg-rgb: 207 229 224;
  --selection-inactive-fg: #0A1418; --selection-inactive-fg-rgb: 10 20 24;
  --selection-alt-bg: #006B5F; --selection-alt-bg-rgb: 0 107 95;
  --selection-alt-fg: #FFFFFF; --selection-alt-fg-rgb: 255 255 255;
  --focus-ring: #006B5F; --focus-ring-rgb: 0 107 95;
  --shafaq: #9A157E; --shafaq-rgb: 154 21 126;
  --shafaq-hover: #83106A; --shafaq-hover-rgb: 131 16 106;
  --on-shafaq: #FFFFFF; --on-shafaq-rgb: 255 255 255;
  --shafaq-text: #9A157E; --shafaq-text-rgb: 154 21 126;
  --glass-panel: rgb(241 245 246 / 0.84);
  --glass-popup: rgb(241 245 246 / 0.9);
  --glass-tooltip: rgb(250 252 252 / 0.95);
  --glass-opaque: rgb(241 245 246 / 0.98);
  --glow-accent: 0 0 12px rgba(0,107,95,0.25);
  --glow-shafaq: 0 0 10px rgba(154,21,126,0.25);
  --glow-gold: 0 0 14px rgba(126,82,0,0.20);
  --rim: inset 0 1px 0 rgba(0,107,95,0.55);
  --shadow-window-active: 0 12px 32px rgba(10,20,24,0.18), 0 0 0 1px rgba(0,107,95,0.45);
  --shadow-window-inactive: 0 6px 18px rgba(10,20,24,0.12), 0 0 0 1px rgba(200,213,217,1);
  --shadow-popup: 0 10px 28px rgba(10,20,24,0.16), 0 0 0 1px rgba(0,107,95,0.35);
  --r-chip: 2px;
  --r-control: 2px;
  --r-card: 2px;
  --r-window: 0px;
  --r-popup: 2px;
  --r-panel: 0px;
  --r-pill: 999px;
  --panel-h: 44px; --panel-icon: 28px; --panel-float-gap: 0px;
  --cut-control: 4px; --cut-card: 8px; --cut-popup: 10px; --cut-panel: 12px;
  --rim-w: 1px; --rim-top: 0.7; --rim-side: 0.35; --rim-bottom: 0.2;
  --halo-alpha: 0.3; --halo-r: 16px;
  --scheme-name: "V7xCyberLight";
}
/* TOKENS:END css */
/* ---------------------------------------------------------------------------------------
   Base: page, stage, scenes, type, focus, shared controls.
   Layout concept: one fixed 16:9-or-fullscreen "monitor" (the stage) that every scene of the
   boot → login → desktop story plays in; presenter chrome (director, captions) lives outside it.
   The page commits to one dark look (the night of the NAJM identity); the simulated desktop
   inside the stage switches between its own light and dark schemes from brand/tokens.json.
   --------------------------------------------------------------------------------------- */
@property --rv { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  color-scheme: dark;
  --page-bg: var(--p-layl);              /* Layl */
  --page-ink: var(--nd-text-1);             /* Nova Dark text-1 */
  --page-ink-2: var(--nd-text-2);           /* Nova Dark text-2 */
  --page-line: var(--nd-line-hairline);            /* Nova Dark line-hairline */
  --page-accent: var(--p-fayrouz);          /* Fayrouz */
  --page-gold: var(--p-dahab);            /* Dahab */
  --page-glass: rgb(13 19 38 / 0.92);
  /* HorusOS identity (HORUS-ADDENDUM §1, §3; not in the frozen tokens): the wordmark face and the
     lapis/electric blue of "OS" (#2D4FD6 Lazward -> #3A6BFF -> #8FB0FF) */
  --font-wordmark: "Cinzel", "Alexandria", serif;
  --hz-blue: #3A6BFF;
  --hz-blue-light: #8FB0FF;
  --hz-dahab-deep: #B7791A;
}
html, body { background: var(--page-bg); color: var(--page-ink); }
body { margin: 0; overflow: hidden; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.app {
  position: fixed;
  inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
  overflow: hidden;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }

/* The stage: logical size --sw × --sh, scaled by --k (letterbox mode on phones). */
.stage {
  position: absolute;
  left: 0; top: 0;
  width: var(--sw, 1280px);
  height: var(--sh, 720px);
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--stage-bg);
  color: var(--text-1);
  isolation: isolate;
  contain: layout paint;
}
.stage button, .stage input, .stage select, .stage textarea { font: inherit; color: inherit; }
.stage button { cursor: pointer; }
.ico { width: 20px; height: 20px; flex: none; display: block; }
.ico.s16 { width: 16px; height: 16px; }
.ico.s24 { width: 24px; height: 24px; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

.scene {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
}
.scene.on { display: block; }

/* Shared boot stage geometry (DESIGN-SPEC §9.1, tokens.boot.stage) */
.stage-bg { position: absolute; inset: 0; background: linear-gradient(180deg, var(--stage-bg) 0%, var(--stage-bg-bottom) 100%); }
.stage-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle calc(var(--sh) * 0.6) at 50% 45%, rgb(var(--p-lazward-rgb) / 0.35), rgb(var(--p-lazward-rgb) / 0) 100%);
  pointer-events: none;
}

/* Type */
/* The HorusOS wordmark (HORUS-ADDENDUM §1, brand/tools/render_wordmarks.py): Cinzel 800, "Horus" in
   metallic gold (Dahab light -> Dahab -> Dahab-deep) with a frozen light-sweep shine on the O, "OS" in
   lapis/electric blue, a four-point najm sparkling in the counter of the O. Arabic: «حورس» in
   Alexandria 800, the same gold, never letter-spaced. .shine plays one sweep (and the star twinkles). */
.wordmark { display: inline-block; position: relative; font-family: var(--font-wordmark); font-weight: 800; line-height: 1;
  letter-spacing: 0.01em; white-space: nowrap; unicode-bidi: isolate; font-kerning: normal; }
.wordmark .wm-ar { font-family: var(--font-display); font-weight: 800; letter-spacing: 0; font-size: 1.04em; }
.wordmark .wm-en, .wordmark .wm-ar { display: inline-block; }
html[lang="ar"] .wordmark:not(.wm-latin) .wm-en, html:not([lang="ar"]) .wordmark .wm-ar, .wordmark.wm-latin .wm-ar { display: none; }
.wm-gold, .wm-blue { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  background-repeat: no-repeat; background-size: 300% 100%, 100% 100%; }
.wm-gold { background-position: 38% 0, 0 0;
  background-image: linear-gradient(112deg, transparent 0 30%, rgb(255 248 225 / 0.75) 38%, transparent 46% 100%),
    linear-gradient(180deg, var(--p-dahab-light) 0%, var(--p-dahab) 48%, var(--hz-dahab-deep) 100%); }
.wm-blue { background-position: 100% 0, 0 0;
  background-image: linear-gradient(112deg, transparent 0 30%, rgb(236 242 255 / 0.8) 38%, transparent 46% 100%),
    linear-gradient(180deg, var(--hz-blue-light) 0%, var(--hz-blue) 50%, var(--p-lazward) 100%); }
.wm-o { position: relative; }
.wm-star { position: absolute; left: 50%; top: 50%; width: 0.36em; height: 0.36em; translate: -50% -50%; overflow: visible; pointer-events: none; }
.wordmark.shine .wm-gold { animation: wm-shine-gold 1400ms var(--ease-sahm) 1 both; }
.wordmark.shine .wm-blue { animation: wm-shine-blue 1400ms var(--ease-sahm) 1 both; }
.wordmark.shine .wm-star { animation: wm-twinkle 1400ms var(--ease-sahm) 1 both; }
@keyframes wm-shine-gold {
  0% { background-position: 38% 0, 0 0; }
  32% { background-position: 0% 0, 0 0; }
  32.01% { background-position: 100% 0, 0 0; }
  100% { background-position: 38% 0, 0 0; }
}
@keyframes wm-shine-blue {
  0%, 18% { background-position: 100% 0, 0 0; }
  48%, 100% { background-position: 0% 0, 0 0; }
}
@keyframes wm-twinkle {
  0%, 30% { transform: scale(1) rotate(0deg); opacity: 1; }
  42% { transform: scale(1.7) rotate(45deg); opacity: 1; }
  60%, 100% { transform: scale(1) rotate(90deg); opacity: 1; }
}
/* light grounds: Dahab-deep gold, a deeper blue and a star without glow (all >= 3:1 on white) */
.stage[data-scheme="light"] .scene-desktop .wm-gold {
  background-image: linear-gradient(112deg, transparent 0 30%, rgb(255 240 200 / 0.55) 38%, transparent 46% 100%),
    linear-gradient(180deg, var(--hz-dahab-deep) 0%, #9A6410 50%, var(--p-dahab-ink) 100%); }
.stage[data-scheme="light"] .scene-desktop .wm-blue {
  background-image: linear-gradient(112deg, transparent 0 30%, rgb(236 242 255 / 0.6) 38%, transparent 46% 100%),
    linear-gradient(180deg, var(--hz-blue) 0%, var(--p-lazward) 50%, #1E3BB0 100%); }
.lockup { display: inline-flex; align-items: center; gap: 0.5em; }
.lockup-mark { display: inline-block; height: 1.6em; aspect-ratio: 1; }
.lockup-mark svg { width: 100%; height: 100%; display: block; }
bdi, .num { unicode-bidi: isolate; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
:lang(ar), [lang="ar"] { letter-spacing: 0 !important; }

/* Focus: 2 px ring, 2 px offset, focus-ring role colour */
.app :focus { outline: none; }
.app :focus-visible { outline: 2px solid var(--focus-ring, var(--page-accent)); outline-offset: 2px; }
.app input:focus-visible, .app textarea:focus-visible { outline-offset: 0; }

/* Segmented control (used on dark presenter chrome and inside the OS) */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(var(--text-1-rgb, var(--nd-text-1-rgb)) / 0.08); }
.seg > button {
  border: 0; background: transparent; border-radius: 999px; min-height: 32px; padding: 0 14px;
  color: var(--text-2, var(--page-ink-2)); font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear;
}
.seg > button:hover { color: var(--text-1, var(--page-ink)); background: rgb(var(--text-1-rgb, var(--nd-text-1-rgb)) / 0.06); }
.seg > button[aria-checked="true"], .seg > button[aria-pressed="true"], .seg > button.on {
  background: var(--accent, var(--page-accent)); color: var(--on-accent, var(--nd-on-accent));
}

/* Letterbox caption (phones): shown under the 16:9 stage when there is room */
.lb-caption {
  position: absolute; left: 16px; right: 16px; bottom: 76px;
  display: none; flex-direction: column; gap: 6px; text-align: center;
  color: var(--page-ink-2);
}
.app.letterbox.tall .lb-caption { display: flex; }
.lb-caption p { margin: 0; }
.lb-title { color: var(--page-ink); font-size: 15px; }
.lb-title .wordmark { font-size: 17px; }
.lb-rotate { font-size: 13px; }

/* Utility motion: honour reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
.stage.rm *, .stage.rm *::before, .stage.rm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
/* ---------------------------------------------------------------------------------------
   Boot scenes: power card, firmware, GRUB, Plymouth "The Eye opens" (HORUS-ADDENDUM §4), splash.
   Geometry follows tokens.boot.stage, expressed in --sh (stage height). The Horus emblem's box
   is 0.15 H, as the real Plymouth theme (boot/tools/render_plymouth.py: 162 px at 1080, the size
   of GRUB's 160 px emblem); the falling-sand line sits 0.11 H under the emblem's centre.
   --------------------------------------------------------------------------------------- */
.stage { --mk-h: calc(var(--sh) * 0.15); --g: calc(var(--sh) / 1080); }

/* The Horus emblem, layered (built by JS: 04-mark.js). Each layer is a full-size SVG on the
   emblem's 1254-unit box; the wedjat overflows it while it draws. */
.mk { position: absolute; height: var(--mk-h); aspect-ratio: 1; }
.mk-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the emblem resolves ring by ring from the falcon's eye (--ex, --ey) outwards */
.mk-ring {
  -webkit-mask-image: radial-gradient(circle farthest-corner at var(--ex, 70.7%) var(--ey, 39.2%), #000 calc(var(--rv) - 9%), transparent var(--rv));
  mask-image: radial-gradient(circle farthest-corner at var(--ex, 70.7%) var(--ey, 39.2%), #000 calc(var(--rv) - 9%), transparent var(--rv));
}
.mk-3d, .mk-bloom, .mk-wj { will-change: opacity; }
.mk-bloom { mix-blend-mode: screen; }
.mk-glint, .mk-wj, .mk-sun { pointer-events: none; }
.mark-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The boot chain (power card, GRUB, Plymouth, splash, greeter, lock) always sits on Layl with
   Nova Dark roles: it must never inherit the light roles of the desktop world's scheme
   (e.g. shutting down from V7x Classic Light). */
.scene-power, .scene-grub, .scene-ply, .scene-splash, .scene-login, .scene-lock {
  color-scheme: dark; color: var(--nd-text-1);
  --text-1: var(--nd-text-1); --text-1-rgb: var(--nd-text-1-rgb);
  --text-2: var(--nd-text-2); --text-2-rgb: var(--nd-text-2-rgb);
  --text-3: var(--nd-text-3); --text-3-rgb: var(--nd-text-3-rgb);
  --accent: var(--nd-accent); --accent-rgb: var(--nd-accent-rgb); --on-accent: var(--nd-on-accent);
  --focus-ring: var(--nd-focus-ring); --focus-ring-rgb: var(--nd-focus-ring-rgb);
}

/* ---- Power card ---------------------------------------------------------------------- */
.scene-power { background: var(--stage-bg); }
.power-lattice {
  position: absolute; inset: 0; opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='-60 -60 120 120'%3E%3Cpolygon points='58.8,0 21.4,8.9 41.6,41.6 8.9,21.4 0,58.8 -8.9,21.4 -41.6,41.6 -21.4,8.9 -58.8,0 -21.4,-8.9 -41.6,-41.6 -8.9,-21.4 0,-58.8 8.9,-21.4 41.6,-41.6 21.4,-8.9' fill='none' stroke='%232EE6C9' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E");
  background-size: calc(var(--sh) * 0.16) calc(var(--sh) * 0.16);
  background-position: center calc(var(--sh) * 0.45);
  -webkit-mask-image: radial-gradient(circle calc(var(--sh) * 0.55) at 50% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(circle calc(var(--sh) * 0.55) at 50% 45%, #000 0%, transparent 100%);
  pointer-events: none;
}
.power-top {
  position: absolute; inset-inline: calc(var(--sh) * 0.05); top: calc(var(--sh) * 0.05);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.power-top .lockup { font-size: calc(var(--sh) * 0.026); color: var(--p-raml); }
.power-top .lockup-mark { height: 1.7em; }
.power-ver { color: var(--nd-text-2); font-size: calc(var(--sh) * 0.017); letter-spacing: 0.02em; }
.power-center {
  position: absolute; left: 0; right: 0; top: 45%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--sh) * 0.026);
  padding-inline: 16px;
}
.power-btn {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--sh) * 0.012);
  border: 0; background: transparent; color: var(--nd-text-1); padding: 8px 24px; border-radius: 16px;
}
.power-oct { width: calc(var(--sh) * 0.27); height: calc(var(--sh) * 0.27); overflow: visible; }
.po-ring { fill: rgb(13 19 38 / 0.72); stroke: var(--p-dahab); stroke-width: 1.2; stroke-linejoin: miter;
  transition: stroke var(--dur-micro) linear, filter var(--dur-quick) var(--ease-sahm); }
.po-ring2 { fill: none; stroke: var(--p-lazward); stroke-width: 0.8; opacity: 0.9; }
.po-glyph { fill: none; stroke: var(--p-fayrouz); stroke-width: 3.2; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgb(var(--p-fayrouz-rgb) / 0.6)); }
.power-btn:hover .po-ring, .power-btn:focus-visible .po-ring { stroke: var(--p-fayrouz-glow); filter: drop-shadow(0 0 10px rgb(var(--p-fayrouz-rgb) / 0.45)); }
.power-btn:active .power-oct { transform: scale(0.97); }
.power-btn:focus-visible { outline-offset: 6px; }
.power-label { font-family: var(--font-display); font-size: calc(var(--sh) * 0.036); line-height: 1.2; font-weight: 400; letter-spacing: -0.015em; }
[dir="rtl"] .power-label { font-weight: 600; }
.power-hint { margin: 0; color: var(--nd-text-2); font-size: calc(max(14px, var(--sh) * 0.018)); line-height: 1.5; text-align: center; max-width: 34em; }
.power-lang > button { min-height: 36px; }
.power-foot {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sh) * 0.045); margin: 0; padding-inline: 24px;
  text-align: center; color: var(--nd-text-3); font-size: calc(max(12px, var(--sh) * 0.015));
}
.scene-power .seg { background: rgb(var(--nd-text-1-rgb) / 0.07); }
.scene-power .seg > button { color: var(--nd-text-2); }
.scene-power .seg > button[aria-checked="true"] { background: var(--p-fayrouz); color: var(--nd-on-accent); }

/* ---- Firmware -------------------------------------------------------------------------- */
.scene-firmware { background: #000; }

/* ---- GRUB «الافتتاحية» (static; reference 1920×1080, everything × --g) ------------------- */
.scene-grub { background: var(--p-layl); font-family: "IBM Plex Sans", var(--font-ui); color: var(--nd-text-2); }
.grub-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grub-mark { position: absolute; left: 50%; top: 9%; height: calc(160 * var(--g)); aspect-ratio: 1; transform: translateX(-50%); }
.grub-word { position: absolute; left: 0; right: 0; top: calc(9% + 176 * var(--g)); text-align: center; font-size: calc(38 * var(--g)); line-height: 1; }
.grub-menu {
  position: absolute; left: calc(50% - 320 * var(--g)); width: calc(640 * var(--g)); top: 38%;
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--g));
}
.grub-menu:focus-visible { outline: none; }
.grub-item {
  position: relative; display: flex; align-items: center; gap: calc(16 * var(--g));
  height: calc(48 * var(--g)); padding-inline: calc(16 * var(--g));
  font-size: calc(20 * var(--g)); color: var(--nd-text-2); cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.grub-item .ico { width: calc(32 * var(--g)); height: calc(32 * var(--g)); color: var(--nd-text-2); }
.grub-item.sel { background: rgb(var(--nd-bg-raised-rgb) / 0.85); border-color: rgb(var(--p-fayrouz-rgb) / 0.6); color: var(--nd-text-1); font-weight: 600; }
.grub-item.sel::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--p-fayrouz); }
.grub-item.sel .ico { color: var(--nd-text-1); }
.grub-menu:focus-visible .grub-item.sel { box-shadow: 0 0 0 2px var(--p-fayrouz); }
.grub-ico-mark { width: calc(32 * var(--g)); height: calc(32 * var(--g)); flex: none; }
.grub-timeout { position: absolute; left: calc(50% - 320 * var(--g)); width: calc(640 * var(--g)); top: 80%; }
.grub-bar { height: max(2px, calc(3 * var(--g))); background: var(--nd-bg-raised); }
.grub-bar i { display: block; height: 100%; width: 100%; background: var(--p-fayrouz); transform-origin: 0 50%; }
.grub-count { margin-top: calc(12 * var(--g)); text-align: center; font-size: calc(16 * var(--g)); color: var(--nd-text-3); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.grub-keys { position: absolute; left: 0; right: 0; top: 87%; text-align: center; font-family: var(--font-mono); font-size: calc(14 * var(--g)); color: var(--nd-text-3); white-space: pre; }
.grub-ar { position: absolute; left: 0; right: 0; top: calc(87% + 28 * var(--g)); text-align: center; font-family: var(--font-ui); font-size: calc(20 * var(--g)); color: var(--nd-text-2); }
.grub-msg { position: absolute; left: 0; right: 0; top: calc(38% - 44 * var(--g)); text-align: center; font-size: calc(16 * var(--g)); color: var(--p-dahab); min-height: 1.2em; }

/* ---- Plymouth "The Eye opens" --------------------------------------------------------- */
.scene-ply { background: var(--p-layl); }
.ply-mark { left: 50%; top: 45%; translate: -50% -50%; }
/* The falling-sand line (the teaser's hourglass): 150 px at 1080 (the bead row of tokens.boot.stage),
   Dahab sand that never runs backwards, with a trickle of grains falling onto its head. */
.ply-line {
  position: absolute; left: 50%; top: calc(45% + var(--sh) * 0.11);
  width: calc(150 * var(--g)); height: max(2px, calc(2 * var(--g))); translate: -50% 0;
  background: rgb(var(--p-dahab-rgb) / 0.14); border-radius: 2px;
}
.ply-line > i {
  display: block; height: 100%; width: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(var(--p-dahab-rgb) / 0.55), var(--p-dahab) 70%, var(--p-dahab-light));
  box-shadow: 0 0 calc(6 * var(--g)) rgb(var(--p-dahab-rgb) / 0.55);
}
.ply-grains { position: absolute; left: 0; bottom: 100%; width: calc(6 * var(--g)); height: calc(16 * var(--g)); translate: -50% 0; pointer-events: none; }
.ply-grains > b {
  position: absolute; top: 0; left: 50%; width: max(1.5px, calc(1.6 * var(--g))); height: max(1.5px, calc(1.6 * var(--g)));
  border-radius: 50%; background: var(--p-dahab-light); opacity: 0;
}
.ply-grains > b:nth-child(2) { margin-left: calc(-1.4 * var(--g)); }
.ply-grains > b:nth-child(3) { margin-left: calc(1.2 * var(--g)); }
.ply-line.run .ply-grains > b { animation: ply-grain 480ms linear infinite; }
.ply-line.run .ply-grains > b:nth-child(2) { animation-delay: -160ms; }
.ply-line.run .ply-grains > b:nth-child(3) { animation-delay: -320ms; }
@keyframes ply-grain {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { transform: translateY(calc(15 * var(--g))); opacity: 0; }
}
.ply-msg { position: absolute; left: 0; right: 0; top: calc(45% + var(--sh) * 0.105); text-align: center; opacity: 0; }
.ply-msg p { margin: 0; color: var(--nd-text-2); }
.ply-msg .en { font-family: "IBM Plex Sans", var(--font-ui); font-size: calc(18 * var(--g)); }
.ply-msg .ar { font-family: var(--font-ui); font-size: calc(18 * var(--g)); margin-top: 6px; }

/* ---- KSplash «فجر» ---------------------------------------------------------------------- */
.scene-splash { background: var(--p-layl); }
.splash-mark { left: 50%; top: 45%; translate: -50% -50%; }
.splash-lattice {
  position: absolute; inset: -10%; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='-60 -60 120 120'%3E%3Cpolygon points='58.8,0 21.4,8.9 41.6,41.6 8.9,21.4 0,58.8 -8.9,21.4 -41.6,41.6 -21.4,8.9 -58.8,0 -21.4,-8.9 -41.6,-41.6 -8.9,-21.4 0,-58.8 8.9,-21.4 41.6,-41.6 21.4,-8.9' fill='none' stroke='%232EE6C9' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: calc(var(--sh) * 0.1667) calc(var(--sh) * 0.1667);
  background-position: center center;
  -webkit-mask-image: radial-gradient(circle calc(var(--sh) * 0.5) at 50% 45%, #000, transparent);
  mask-image: radial-gradient(circle calc(var(--sh) * 0.5) at 50% 45%, #000, transparent);
}
.splash-beads { position: absolute; left: 50%; top: 45%; width: 0; height: 0; }
.bead {
  position: absolute; width: calc(10 * var(--g)); height: calc(10 * var(--g)); translate: -50% -50%;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--nd-bg-raised); transition: background-color 120ms linear;
}
.bead::after { content: ""; position: absolute; inset: 1px; clip-path: inherit; background: var(--nd-bg-window); }
.bead.on { background: var(--p-fayrouz); }
.bead.on::after { background: var(--p-fayrouz); }
/* ---------------------------------------------------------------------------------------
   SDDM «الليل» greeter and the lock screen (DESIGN-SPEC §9.4, HORUS-ADDENDUM §4.3).
   Always drawn on the night sky with Nova Dark roles, whatever the desktop world is.
   --------------------------------------------------------------------------------------- */
.scene-login, .scene-lock { background: var(--p-layl); color: var(--nd-text-1); }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-fade { position: absolute; inset: 0; background: var(--p-layl); pointer-events: none; opacity: 0; }
.lock-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--p-layl-rgb) / 0.55), rgb(var(--p-layl-rgb) / 0.15) 45%, rgb(var(--p-layl-rgb) / 0.55)); }
/* Light lock wallpapers (Nil day, Graphite light): a deeper veil keeps the white clock and
   card text above 4.5:1. */
.scene-lock.on-light .lock-veil { background: linear-gradient(180deg, rgb(var(--p-layl-rgb) / 0.74), rgb(var(--p-layl-rgb) / 0.56) 45%, rgb(var(--p-layl-rgb) / 0.74)); }

.login-clock-wrap { position: absolute; left: 0; right: 0; top: 13%; text-align: center; pointer-events: none; }
.clock-big {
  font-family: var(--font-display); font-weight: 200; font-size: calc(96 * var(--g)); line-height: 1.08;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--nd-text-1);
  text-shadow: 0 2px 24px rgb(var(--p-layl-rgb) / 0.6);
}
.clock-big .ampm { font-weight: 400; font-size: 0.42em; margin-inline-start: 0.25em; letter-spacing: 0; }
[lang="ar"] .clock-big { font-weight: 400; }
.clock-date { margin-top: calc(6 * var(--g)); font-size: max(15px, calc(19 * var(--g))); line-height: 1.4; color: var(--nd-text-1); opacity: 0.92; text-shadow: 0 1px 12px rgb(var(--p-layl-rgb) / 0.7); }

.login-dim { position: absolute; inset: 0; transition: opacity 400ms linear; }
.login-dim.idle { opacity: 0.4; }
.login-card {
  position: absolute; left: 50%; top: calc(52% - 166 * var(--g)); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--g));
  width: min(92%, calc(520 * var(--g) + 80px));
}
/* the emblem ≈ 72 px above the user card; its eye glints every 4 s (not on Lite or reduced motion) */
.login-mark { height: calc(72 * var(--g)); aspect-ratio: 1; margin-bottom: calc(6 * var(--g)); }
.login-mark .mk-glint-s { opacity: 0; }
.login-mark.pulse .mk-glint-s { animation: eye-glint 4s linear infinite; }
@keyframes eye-glint {
  0%, 72% { opacity: 0; transform: scale(0.2) rotate(-20deg); animation-timing-function: var(--ease-sahm); }
  78% { opacity: 1; transform: scale(1.15) rotate(10deg); animation-timing-function: var(--ease-zill); }
  86%, 100% { opacity: 0; transform: scale(0.5) rotate(25deg); }
}
/* the wordmark under the clock: "Horus" gold, "OS" blue, one shine sweep on load (00-base.css) */
.login-word { margin-top: calc(14 * var(--g)); font-size: calc(30 * var(--g)); line-height: 1; }
.user-ring { position: relative; width: calc(150 * var(--g)); height: calc(150 * var(--g)); flex: none; }
.user-ring.small { width: calc(120 * var(--g)); height: calc(120 * var(--g)); }
.user-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ur-frame { fill: none; stroke: rgb(var(--p-fayrouz-rgb) / 0.55); stroke-width: 2; stroke-linejoin: miter; transition: stroke 200ms linear; }
.user-ring.err .ur-frame { stroke: var(--nd-error); }
.ur-vert { fill: var(--nd-line-hairline); transition: fill 120ms linear, filter 120ms linear; }
.ur-vert.lit { fill: var(--p-fayrouz); filter: drop-shadow(0 0 4px var(--p-fayrouz)); }
.avatar {
  position: absolute; inset: 9%;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: radial-gradient(circle at 50% 30%, var(--p-lazward), var(--nd-bg-view) 70%);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: calc(38 * var(--g)); color: var(--nd-text-1); letter-spacing: -0.02em;
}
.user-ring.small .avatar { font-size: calc(30 * var(--g)); }
.login-name { font-size: max(18px, calc(22 * var(--g))); line-height: 1.3; font-weight: 600; text-shadow: 0 1px 10px rgb(var(--p-layl-rgb) / 0.7); }
.pill {
  position: relative; display: flex; align-items: center;
  width: max(300px, calc(320 * var(--g))); height: max(44px, calc(44 * var(--g)));
  border-radius: 999px; background: rgb(13 19 38 / 0.86); border: 1px solid var(--nd-line-control);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: border-color var(--dur-micro) linear;
}
.stage.tier-lite .pill, .stage.no-transparency .pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--nd-bg-window-rgb) / 0.96); }
.pill:focus-within { border-color: var(--p-fayrouz); }
.pill input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding-inline: 20px 8px;
  font-size: 15px; color: var(--nd-text-1); letter-spacing: 0.12em;
}
.pill input::placeholder { color: var(--nd-text-2); letter-spacing: 0; }
.pill input:focus-visible { outline: none; }
.pill-go {
  flex: none; width: 44px; height: 44px; margin-inline-end: 0; border: 0; border-radius: 999px; background: transparent; color: var(--p-fayrouz);
  display: grid; place-items: center;
}
.pill-go:hover { background: rgb(var(--p-fayrouz-rgb) / 0.12); }
.chip-gold { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--p-dahab); color: var(--nd-on-gold); font-size: 12px; font-weight: 600; line-height: 16px; }
.chip-gold .ico { width: 14px; height: 14px; }
.login-msg { min-height: 20px; color: var(--nd-error); font-weight: 500; text-shadow: 0 1px 8px rgb(var(--p-layl-rgb) / 0.8); }
.login-hint { margin: 0; color: var(--nd-text-2); font-size: 13px; line-height: 18px; text-align: center; max-width: 30em; text-shadow: 0 1px 8px rgb(var(--p-layl-rgb) / 0.8); }

.login-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; padding-inline: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.lb-start, .lb-end { display: flex; align-items: center; gap: 6px; }
.lb-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding-inline: 12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--nd-text-1); font-size: 13px; justify-content: center;
}
.lb-btn.icon { padding: 0; }
.lb-btn:hover { background: rgb(var(--nd-text-1-rgb) / 0.1); }
.kbd-chip .kbd-label { min-width: 28px; height: 24px; padding-inline: 6px; border-radius: 6px; border: 1px solid var(--nd-line-control); display: grid; place-items: center; font-weight: 600; font-size: 12px; }

.login-iris {
  position: absolute; width: 200vmax; height: 200vmax; translate: -50% -50%; background: var(--p-layl); pointer-events: none;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}
.session-menu {
  position: absolute; bottom: 60px; min-width: 220px; padding: 6px; border-radius: 12px;
  background: rgb(13 19 38 / 0.94); border: 1px solid var(--nd-line-hairline); box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}
.session-menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding-inline: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--nd-text-1); text-align: start; }
.session-menu button:hover { background: var(--nd-bg-hover); }

.sleep-veil { position: absolute; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; color: #3a4060; font-size: 13px; cursor: pointer; }
.lock-card { top: calc(52% - 100 * var(--g)); }
/* ---------------------------------------------------------------------------------------
   Desktop shell: wallpaper, desktop icons, the three worlds' panels, tray, launchers,
   popups, notifications (Shihab), OSD, World Shift iris.
   Glass per tier: High = blur 8 (Nova) / 3 (Classic); Balanced = 4 / 2; Lite, Focus and
   Reduce transparency = no backdrop-filter and glass-opaque (DESIGN-SPEC §3.3, §12.2).
   --------------------------------------------------------------------------------------- */
.stage { --blur: blur(28px) saturate(1.45); }
.stage.tier-balanced { --blur: blur(14px) saturate(1.25); }
.stage[data-world="classic"].tier-high { --blur: blur(12px) saturate(1.2); }
.stage[data-world="classic"].tier-balanced { --blur: blur(8px) saturate(1.1); }
.stage.tier-lite, .stage.no-transparency, .stage[data-world="focus"] {
  --blur: none;
  --glass-panel: var(--glass-opaque);
  --glass-popup: var(--glass-opaque);
  --glass-tooltip: var(--glass-opaque);
}
.glass { background: var(--glass-popup); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

.scene-desktop { background: var(--bg-void); font-size: 14px; line-height: 20px; }
[lang="ar"] .scene-desktop, .stage[dir="rtl"] .scene-desktop { line-height: 24px; }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall-fade { position: absolute; inset: 0; pointer-events: none; }

/* Desktop icons (Folder View). Text uses the Complementary group = Nova Dark (§3.5). */
.desk-icons { position: absolute; inset-inline-start: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.desk-icon {
  width: 92px; min-height: 88px; padding: 8px 4px 6px; border: 1px solid transparent; border-radius: var(--r-control);
  background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--nd-text-1); font-size: 12.5px; line-height: 16px; text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / 0.85), 0 0 8px rgb(0 0 0 / 0.45);
}
.desk-icon svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.35)); }
.desk-icon:hover { background: rgb(var(--nd-text-1-rgb) / 0.12); border-color: rgb(var(--nd-text-1-rgb) / 0.18); }
.desk-icon.sel { background: rgb(var(--accent-rgb) / 0.28); border-color: rgb(var(--accent-rgb) / 0.6); }

/* ---- Panel (shared) ----------------------------------------------------------------- */
.panel-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.panel {
  position: absolute; bottom: 0; pointer-events: auto;
  display: flex; align-items: center; height: var(--panel-h);
  background: var(--glass-panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--text-1);
}
.panel button { border: 0; background: transparent; color: inherit; }
.pl-btn {
  position: relative; height: 100%; min-width: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-control); transition: background-color var(--dur-micro-out) linear;
}
.pl-btn:hover { background: rgb(var(--text-1-rgb) / 0.08); transition-duration: var(--dur-micro); }
.pl-btn:active { background: rgb(var(--text-1-rgb) / 0.14); }
.pl-btn[aria-expanded="true"] { background: rgb(var(--text-1-rgb) / 0.12); }
.pl-sep { width: 1px; align-self: stretch; margin-block: 12px; background: var(--line-hairline); flex: none; }
.pl-spacer { flex: 1; }
.pl-tasks { display: flex; align-items: center; gap: 2px; height: 100%; }
.task { gap: 8px; }
.task svg.app-ico { width: var(--panel-icon); height: var(--panel-icon); }
.task-label { display: none; }
.task-ind { position: absolute; left: 50%; bottom: 3px; translate: -50% 0; height: 3px; width: 0; border-radius: 3px; background: var(--text-3);
  transition: width var(--dur-base) var(--ease-mawj), background-color var(--dur-base) linear; }
.task.running .task-ind { width: 6px; }
.task.active .task-ind { width: 18px; background: var(--accent); box-shadow: var(--glow-accent); }
.task.attention .task-ind { background: var(--gold); width: 18px; }
.pl-tray { display: flex; align-items: center; height: 100%; gap: 0; }
.tray-btn { min-width: 34px; padding-inline: 6px; }
.tray-btn .ico { width: 18px; height: 18px; }
.tray-kbd .kbd-label { min-width: 26px; height: 22px; padding-inline: 5px; display: grid; place-items: center; border-radius: var(--r-chip); border: 1px solid var(--line-control); font-weight: 600; font-size: 12px; line-height: 1; }
.tray-badge { position: absolute; top: 9px; inset-inline-end: 5px; min-width: 14px; height: 14px; padding-inline: 3px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-size: 10px; line-height: 14px; font-weight: 700; text-align: center; }
.batt-fill { position: absolute; left: calc(50% - 6.5px); top: calc(50% - 2.3px); height: 4.6px; width: 0; border-radius: 1px; background: currentColor; }
.pl-clock { flex-direction: column; padding-inline: 10px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pl-clock .t { font-size: 13px; font-weight: 600; }
.pl-clock .d { font-size: 11px; color: var(--text-2); }

/* Nova: floating glass island, 56 px, radius 18, 1 px top hairline (dawn rim) */
.panel-nova {
  left: 50%; translate: -50% 0; bottom: var(--panel-float-gap); padding-inline: 8px; gap: 4px;
  border-radius: var(--r-panel);
  box-shadow: inset 0 1px 0 rgb(var(--text-1-rgb) / 0.12), 0 0 0 1px rgb(var(--line-hairline-rgb) / 0.55), var(--shadow-popup);
  transition: bottom var(--dur-base) var(--ease-mizan), border-radius var(--dur-base) var(--ease-mizan);
}
.panel-nova.defloat { bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.panel-nova .pl-btn { height: 44px; }
.panel-nova .task { width: 46px; }
.panel-nova .pl-launcher { width: 48px; }
/* the deep M on the panel: no glow on top (brand/README.md "Which file for which surface") */
.pl-mark { width: 34px; height: 34px; display: block; }

/* Classic: full width 48 px, centred Start + tasks */
.panel-classic { left: 0; right: 0; padding-inline: 4px; gap: 2px; border-top: 1px solid var(--line-hairline); }
.panel-classic .task, .panel-classic .pl-launcher { width: 44px; height: 42px; }
.panel-classic .task.running .task-ind { width: 6px; }
.panel-classic .task.active .task-ind { width: 16px; }
.panel-classic .pl-showdesk { width: 8px; min-width: 8px; height: 100%; border-radius: 0; border-inline-start: 1px solid var(--line-hairline); margin-inline-start: 6px; }
.pl-start-mark { width: 28px; height: 28px; }

/* Focus: opaque 40 px, start-aligned Start, tasks with labels */
.panel-focus { left: 0; right: 0; padding-inline: 4px; gap: 2px; border-top: 1px solid var(--line-hairline); }
.panel-focus .pl-btn { border-radius: var(--r-control); height: 34px; }
.panel-focus .pl-launcher { padding-inline: 10px; gap: 8px; font-weight: 600; }
.panel-focus .pl-tasks { flex: 1; min-width: 0; gap: 4px; overflow: hidden; }
.panel-focus .task { justify-content: flex-start; padding-inline: 10px; max-width: 200px; min-width: 120px; }
.panel-focus .task-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.panel-focus .task-ind { left: 8px; right: 8px; translate: none; width: auto !important; bottom: 1px; height: 2px; opacity: 0; transition: none; }
.panel-focus .task.running .task-ind { opacity: 1; background: var(--text-3); }
.panel-focus .task.active .task-ind { opacity: 1; background: var(--accent); box-shadow: none; }
.panel-focus .task.active { background: rgb(var(--text-1-rgb) / 0.08); }
.panel-focus .pl-clock { flex-direction: row; gap: 8px; }
.panel-focus .pl-clock .d { display: none; }

/* ---- Popups (launcher, tray, menus): glass-popup ------------------------------------ */
.popups { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.popup {
  position: absolute; pointer-events: auto; color: var(--text-1);
  background: var(--glass-popup); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--r-popup); box-shadow: 0 0 0 1px rgb(var(--line-hairline-rgb) / 0.8), var(--shadow-popup);
}
.stage[data-scheme="dark"] .popup { box-shadow: inset 0 1px 0 rgb(var(--text-1-rgb) / 0.07), 0 0 0 1px rgb(var(--line-hairline-rgb) / 0.8), var(--shadow-popup); }
.menu { min-width: 220px; padding: 6px; display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding-inline: 10px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-1); text-align: start; width: 100%;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-hover); }
.menu-item .ico { width: 18px; height: 18px; color: var(--text-2); }
.menu-sep { height: 1px; margin: 4px 8px; background: var(--line-hairline); }
.menu-item.danger:hover { background: rgb(var(--error-rgb) / 0.15); }

/* Launcher shared */
.launcher { display: flex; flex-direction: column; overflow: hidden; }
.l-search {
  display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 14px; border-radius: var(--r-control);
  background: rgb(var(--bg-view-rgb) / 0.75); border: 1px solid var(--line-hairline); color: var(--text-2);
}
.l-search:focus-within { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.l-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font-size: 15px; height: 100%; }
.l-search input::placeholder { color: var(--text-2); }
.l-search input:focus-visible { outline: none; }
.l-head { padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 12px; }
.l-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 14px 10px; }
.l-section-title { margin: 10px 4px 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.l-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.l-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; min-height: 96px;
  border: 0; border-radius: var(--r-card); background: transparent; color: var(--text-1); font-size: 12.5px; line-height: 16px; text-align: center;
}
.l-app svg { width: 48px; height: 48px; flex: none; }
.l-app span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l-app:hover, .l-app:focus-visible, .l-app.kb { background: var(--bg-hover); }
.l-list { display: flex; flex-direction: column; gap: 2px; }
.l-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-1); text-align: start; width: 100%;
}
.l-row svg.app-ico { width: 32px; height: 32px; flex: none; }
.l-row .ico { color: var(--text-2); }
.l-row:hover, .l-row:focus-visible, .l-row.kb { background: var(--bg-hover); }
.l-row .sub { display: block; font-size: 12px; line-height: 16px; color: var(--text-2); }
.l-empty { padding: 24px 8px; color: var(--text-2); text-align: center; }
.l-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  border-top: 1px solid var(--line-hairline); background: rgb(var(--bg-window-rgb) / 0.35);
}
.l-user { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text-1); padding: 4px 8px 4px 4px; border-radius: var(--r-control); font-weight: 600; min-height: 44px; }
.l-user:hover { background: var(--bg-hover); }
.oct-avatar {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: radial-gradient(circle at 50% 30%, var(--p-lazward), var(--nd-bg-view) 75%); color: var(--nd-text-1);
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
}
.l-power { display: flex; gap: 4px; }
.icon-btn {
  width: 40px; height: 40px; min-width: 40px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-1);
  display: inline-grid; place-items: center;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn.on { color: var(--accent-text); }

/* Nova «باب» */
.launcher-nova { width: 680px; max-width: calc(100% - 24px); }
.launcher-nova .seg { align-self: flex-start; }
/* Classic Kickoff-like */
.launcher-classic { width: 640px; max-width: calc(100% - 24px); }
.launcher-classic .l-grid { grid-template-columns: repeat(6, 1fr); }
.l-recent { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
/* Focus Kicker cascading list */
.launcher-focus { width: 280px; padding: 6px; overflow: visible; }
.k-cat {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding-inline: 10px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-1); text-align: start; width: 100%;
}
.k-cat .ico { width: 18px; height: 18px; color: var(--text-2); }
.k-cat .chev { margin-inline-start: auto; color: var(--text-3); }
.k-cat:hover, .k-cat[aria-expanded="true"], .k-cat:focus-visible { background: var(--bg-hover); }
.k-sub { position: absolute; width: 260px; padding: 6px; inset-inline-start: calc(100% + 4px); }
.k-search { margin: 6px 4px 2px; height: 38px; }
.k-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-hairline); }

/* Tray popups */
.tray-pop { width: 320px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tray-pop h3 { margin: 0; font-size: 14px; font-weight: 600; }
.tray-row { display: flex; align-items: center; gap: 12px; }
.tray-row .grow { flex: 1; min-width: 0; }
.tray-row .sub { color: var(--text-2); font-size: 12px; line-height: 16px; }
.cal-big { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 300; font-variant-numeric: tabular-nums; }
[lang="ar"] .cal-big { font-weight: 400; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-grid b { color: var(--text-2); font-weight: 500; }
.cal-grid span { height: 28px; display: grid; place-items: center; border-radius: var(--r-chip); }
.cal-grid span.today { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cal-grid span.out { color: var(--text-3); }

/* Range slider */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to var(--fill-dir, right), var(--accent) var(--fill, 50%), var(--line-hairline) var(--fill, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--bg-view); border: 2px solid var(--accent); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-hairline); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-view); border: 2px solid var(--accent); }
.stage[dir="rtl"] .range { --fill-dir: left; }

/* Toggle switch */
.switch { position: relative; width: 40px; height: 22px; flex: none; border: 0; border-radius: 999px; background: var(--line-control); padding: 0; transition: background-color 120ms linear; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start 160ms var(--ease-mawj); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { inset-inline-start: 21px; background: var(--on-accent); }

/* ---- Notifications «شهاب» ------------------------------------------------------------ */
.notif-stack {
  position: absolute; inset-inline-end: 14px; bottom: calc(var(--panel-h) + var(--panel-float-gap) + 12px);
  width: 372px; max-width: calc(100% - 28px); display: flex; flex-direction: column; gap: 10px; z-index: 55; pointer-events: none;
}
.notif {
  position: relative; pointer-events: auto; display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: start;
  padding: 14px 12px 14px 14px; padding-inline: 14px 10px; border-radius: var(--r-card); overflow: hidden;
  background: var(--glass-popup); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 0 0 1px rgb(var(--line-hairline-rgb) / 0.8), var(--shadow-popup); color: var(--text-1);
}
.notif-ico { width: 40px; height: 40px; border-radius: var(--r-control); display: grid; place-items: center; background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-text); }
.stage[data-scheme="light"] .notif-ico { color: var(--accent); }
.notif-ico.gold { background: transparent; }
.notif-ico svg { width: 22px; height: 22px; }
.notif-ico.app svg { width: 40px; height: 40px; }
.notif h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.notif p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 18px; }
.notif .when { color: var(--text-2); font-size: 11px; }
.notif-actions { grid-column: 2 / 4; display: flex; gap: 8px; margin-top: 8px; }
.notif-x { width: 28px; height: 28px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); display: grid; place-items: center; }
.notif-x:hover { background: var(--bg-hover); color: var(--text-1); }
.notif-thread { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--accent); box-shadow: var(--glow-accent); transform-origin: right center; }
.stage[dir="rtl"] .notif-thread { transform-origin: left center; }
.badge-oct {
  width: 40px; height: 40px; display: grid; place-items: center;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: linear-gradient(160deg, var(--p-dahab-light), var(--p-dahab) 55%, #B77712); color: var(--nd-on-gold);
}
.badge-oct svg { width: 22px; height: 22px; }
.notif .notif-by { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--gold-text, var(--text-2)); font-weight: 600; }
.notif .notif-by svg { width: 18px; height: 18px; flex: none; }

/* Buttons used inside the OS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px;
  border-radius: var(--r-control); border: 1px solid var(--line-control); background: var(--bg-raised); color: var(--text-1);
  font-weight: 500; white-space: nowrap; transition: background-color var(--dur-micro-out) linear;
}
.btn:hover { background: var(--bg-hover); transition-duration: var(--dur-micro); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-hover); }
.btn.sm { min-height: 30px; padding: 0 12px; font-size: 13px; }
.btn .ico { width: 16px; height: 16px; }

/* OSD */
.osd {
  position: absolute; left: 50%; bottom: calc(var(--panel-h) + 56px); translate: -50% 0; z-index: 65;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px; min-width: 260px; border-radius: 999px;
  background: var(--glass-popup); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 0 0 1px rgb(var(--line-hairline-rgb) / 0.8), var(--shadow-popup); color: var(--text-1);
}
.osd .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line-hairline); overflow: hidden; }
.osd .bar i { display: block; height: 100%; background: var(--accent); }
.osd .val { min-width: 3ch; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }

/* World Shift iris and other stage overlays */
.iris { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; display: none; }
.iris.on { display: block; pointer-events: auto; }
.iris path { fill: var(--bg-void); }
.shift-label {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 81; text-align: center; pointer-events: none;
  font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; color: var(--text-1); opacity: 0;
}
.flash { position: absolute; inset: 0; z-index: 85; background: #fff; opacity: 0; pointer-events: none; }
/* ROUND3-ADDENDUM §B.4: the apply's static, opaque progress card (Balanced, Lite, software renderers). The veil only
   holds the pointer; the card is opaque, never blurred or translucent, and nothing in it animates. */
.apply-veil { position: absolute; inset: 0; z-index: 82; display: grid; place-items: center; pointer-events: auto; background: transparent; }
.apply-veil.in-win { z-index: 40; border-radius: inherit; }
.apply-veil, .apply-veil * { animation: none !important; transition: none !important; }
.apply-card {
  width: min(420px, calc(100% - 48px)); display: grid; gap: 8px; padding: 20px 24px; text-align: start;
  background: var(--bg-window); color: var(--text-1); border: 1px solid var(--line-hairline); border-radius: var(--r-card);
  box-shadow: var(--shadow-popup);
}
.apply-card b { font-size: 16px; line-height: 24px; }
.apply-card p { margin: 0; color: var(--text-2); }
.apply-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line-hairline); overflow: hidden; }
.apply-bar i { display: block; width: 0; height: 100%; background: var(--accent); }
.win.applying, .win.applying * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.win.applying { background: var(--bg-window) !important; }

/* LOGO-ADDENDUM §2: on light surfaces the gold strokes darken to Dahab-deep (#B7791A, as in
   brand/logo/v7x-mark-light.svg) and the 3D glow layer is never shown */
.stage[data-scheme="light"] .scene-desktop .mk-gold-fill { fill: #B7791A; }
.stage[data-scheme="light"] .scene-desktop .mk-3d { display: none; }
/* markFlat: the deep master on dark surfaces, the light variant (bright layers in Dahab-deep) on light ones */
.mk-lt { display: none; }
.stage[data-scheme="light"] .scene-desktop .mk-lt { display: inline; }
.stage[data-scheme="light"] .scene-desktop .mk-dk { display: none; }
/* ---------------------------------------------------------------------------------------
   Windows: Breeze-like seamless title bar per world, active ring, resize handles, snap
   outline. Content is always solid (glass is for chrome only, DESIGN-SPEC §2.3).
   --------------------------------------------------------------------------------------- */
.windows { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  min-width: 320px; min-height: 200px;
  background: var(--bg-window); color: var(--text-1);
  border-radius: var(--r-window);
  box-shadow: var(--shadow-window-inactive), 0 0 0 1px rgb(var(--line-hairline-rgb) / 0.9);
  transform-origin: 50% 50%;
}
.win.active { box-shadow: var(--shadow-window-active), 0 0 0 1px rgb(var(--accent-rgb) / 0.18); }
.stage[data-scheme="light"] .win:not(.active) { box-shadow: var(--shadow-window-inactive), 0 0 0 1px var(--line-hairline); }
.win.max { border-radius: 0; box-shadow: none; }
.win.min-hidden { visibility: hidden; pointer-events: none; }
.win-clip { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: inherit; overflow: hidden; }
.win-bar {
  flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding-inline: 10px 6px;
  background: var(--bg-window); color: var(--text-1); user-select: none; -webkit-user-select: none; touch-action: none; cursor: default;
}
.stage[data-world="classic"] .win-bar { height: 34px; }
.stage[data-world="focus"] .win-bar { height: 30px; }
.win:not(.active) .win-bar { color: var(--text-2); }
.win-ico { width: 18px; height: 18px; flex: none; }
.win-title { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.wbtn {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2);
  display: grid; place-items: center; transition: background-color var(--dur-micro-out) linear, color var(--dur-micro-out) linear;
}
.wbtn .ico { width: 16px; height: 16px; }
.wbtn:hover { background: var(--bg-hover); color: var(--text-1); transition-duration: var(--dur-micro); }
.wbtn.close:hover { background: var(--error); color: var(--on-error); }
.stage[data-world="classic"] .wbtn { border-radius: var(--r-control); width: 36px; }
.stage[data-world="focus"] .wbtn { width: 26px; height: 24px; border-radius: var(--r-chip); }
/* Touch (full-size stage with a coarse pointer): each window button gets a 44 × 44 px hit area around its
   unchanged glyph, and the cluster spaces out so the hit areas never overlap. */
@media (pointer: coarse) {
  .wbtn { position: relative; }
  .wbtn::after { content: ""; position: absolute; inset: -7px; }
  .win-btns, .wel-top { gap: 14px; }
  .stage[data-world="classic"] .wbtn::after { inset: -7px -4px; }
  .stage[data-world="classic"] .win-btns, .stage[data-world="classic"] .wel-top { gap: 8px; }
  .stage[data-world="focus"] .wbtn::after { inset: -10px -9px; }
  .stage[data-world="focus"] .win-btns, .stage[data-world="focus"] .wel-top { gap: 18px; }
}
.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-window); position: relative; }

/* Resize handles: 6 px edges, 14 px corners (logical, so they mirror correctly) */
.rs { position: absolute; z-index: 2; touch-action: none; }
.rs-n { top: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rs-s { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rs-e { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rs-w { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rs-ne { right: -5px; top: -5px; width: 16px; height: 16px; cursor: nesw-resize; }
.rs-nw { left: -5px; top: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.rs-se { right: -5px; bottom: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.rs-sw { left: -5px; bottom: -5px; width: 16px; height: 16px; cursor: nesw-resize; }
.win.max .rs, .win.frameless .rs { display: none; }

/* Snap / tile outline «مغناطيس»: glass with a 1 px accent hairline */
.snap-preview {
  position: absolute; z-index: 19; pointer-events: none; border-radius: var(--r-window);
  background: rgb(var(--accent-rgb) / 0.10); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--accent);
  transition: left var(--dur-quick) var(--ease-mizan), top var(--dur-quick) var(--ease-mizan), width var(--dur-quick) var(--ease-mizan), height var(--dur-quick) var(--ease-mizan);
}

/* Dialog inside the desktop (e.g. the .exe helper) */
.win.dialog .win-title { text-align: start; }
.toolbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line-hairline); background: var(--bg-window); }
.toolbar .grow { flex: 1; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; padding: 0 6px; height: 34px; border-radius: var(--r-control); background: var(--bg-view); border: 1px solid var(--line-hairline); }
.crumbs button { border: 0; background: transparent; color: var(--text-1); padding: 4px 8px; border-radius: var(--r-chip); white-space: nowrap; }
.crumbs button:hover { background: var(--bg-hover); }
.crumbs .ico { width: 14px; height: 14px; color: var(--text-3); }
.side { flex: none; width: 196px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-window); border-inline-end: 1px solid var(--line-hairline); overflow: auto; }
.side h5 { margin: 10px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.side-item {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding-inline: 10px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-1); text-align: start; width: 100%;
}
.side-item .ico { width: 18px; height: 18px; color: var(--text-2); }
.side-item:hover { background: var(--bg-hover); }
.side-item.on { background: var(--selection-inactive-bg); color: var(--selection-inactive-fg); }
.side-item.on .ico { color: var(--accent-text); }
.win.active .side-item.on { background: rgb(var(--accent-rgb) / 0.16); color: var(--text-1); }
.view { flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--bg-view); }
.split { flex: 1; min-height: 0; display: flex; }
.statusbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; padding-inline: 12px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--line-hairline); background: var(--bg-window); }
/* ---------------------------------------------------------------------------------------
   App content: Files, Terminal, Settings, About, Text Editor, System Monitor,
   Calculator, Web Browser, Learn with V7x, the .exe helper.
   --------------------------------------------------------------------------------------- */
.pad { padding: 20px 24px; }
.h1 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.015em; }
.h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
[lang="ar"] .h1 { line-height: 44px; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; line-height: 18px; }
.card { background: var(--bg-view); border: 1px solid var(--line-hairline); border-radius: var(--r-card); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.cmd {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-control);
  background: var(--nd-bg-window); color: var(--nd-text-1); font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; direction: ltr; text-align: left; overflow-x: auto; white-space: pre;
}
.cmd .p { color: var(--p-fayrouz); }
.cmd code { font-family: inherit; flex: 1; min-width: 0; }
.note { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-control); background: rgb(var(--info-rgb) / 0.12); color: var(--text-1); font-size: 13px; line-height: 19px; }
.note .ico { width: 18px; height: 18px; color: var(--info); flex: none; margin-top: 1px; }
.note.warn { background: rgb(var(--warning-rgb) / 0.13); }
.note.warn .ico { color: var(--warning); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; border-radius: 999px; background: var(--bg-hover); color: var(--text-1); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip.accent { background: rgb(var(--accent-rgb) / 0.16); color: var(--accent-text); }
.stage[data-scheme="light"] .chip.accent { color: var(--accent); }
.chip.gold { background: var(--gold); color: var(--on-gold); }

/* Files */
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; padding: 12px; align-content: start; }
.f-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid transparent; border-radius: var(--r-control);
  background: transparent; color: var(--text-1); font-size: 12.5px; line-height: 16px; text-align: center; word-break: break-word;
}
.f-item svg { width: 52px; height: 52px; }
.f-item .fi { width: 52px; height: 52px; display: grid; place-items: center; color: var(--text-2); }
.f-item .fi svg { width: 40px; height: 40px; }
.f-item:hover { background: var(--bg-hover); }
.f-item.sel, .f-item:focus-visible { background: rgb(var(--accent-rgb) / 0.16); border-color: rgb(var(--accent-rgb) / 0.55); }
.files-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.files-list th { position: sticky; top: 0; background: var(--bg-view); text-align: start; font-weight: 500; color: var(--text-2); padding: 6px 12px; border-bottom: 1px solid var(--line-hairline); }
.files-list td { padding: 6px 12px; white-space: nowrap; }
.files-list tr:hover td { background: var(--bg-hover); }
.files-list tr.sel td { background: rgb(var(--accent-rgb) / 0.16); }
.files-list .fname { display: flex; align-items: center; gap: 8px; }
.files-list .fname svg { width: 20px; height: 20px; }
.empty-state { display: grid; place-items: center; height: 100%; min-height: 200px; color: var(--text-2); text-align: center; padding: 24px; }
.empty-state .ico { width: 40px; height: 40px; margin: 0 auto 8px; color: var(--text-3); }

/* Terminal (Konsole-like): always LTR, mono, dark */
.term {
  flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; background: var(--nd-bg-window); color: var(--nd-text-1);
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; direction: ltr; text-align: left; cursor: text;
}
.term:focus, .term:focus-visible { outline: none; }   /* focused only while a command runs (tabindex -1) */
.stage[data-world="classic"] .term, .stage[data-world="focus"] .term { background: var(--fd-bg-window); }
.term-line { white-space: pre-wrap; word-break: break-word; min-height: 20px; }
.term .p-user { color: var(--nd-success); font-weight: 600; }
.term .p-path { color: var(--nd-info); font-weight: 600; }
.term .dim { color: var(--nd-text-3); }
.term .ok { color: var(--nd-success); }
.term .warn { color: var(--nd-warning); }
.term .err { color: var(--cd-error); }
.term .acc { color: var(--p-fayrouz); }
.term .gold { color: var(--p-dahab); }
.term .laz { color: #6C8CFF; }
.term-input-line { display: flex; gap: 0; align-items: baseline; }
.term-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--nd-text-1); font: inherit; padding: 0; caret-color: var(--p-fayrouz); }
.term-input:focus-visible { outline: none; }
.term-input.secret { color: transparent; text-shadow: none; caret-color: var(--p-fayrouz); }
.explain {
  margin: 6px 0 10px; max-width: 640px; border-radius: 10px; border: 1px solid var(--nd-line-hairline); background: var(--nd-bg-view);
  font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--nd-text-1); overflow: hidden;
}
.explain[dir="rtl"] { text-align: right; line-height: 24px; }
.explain-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--p-fayrouz); padding: 6px 12px; font: inherit; font-weight: 600; min-height: 32px; }
.explain-btn:hover { background: rgb(var(--p-fayrouz-rgb) / 0.08); }
.explain-body { padding: 0 12px 10px; color: var(--nd-text-2); }
.explain-body b { color: var(--nd-text-1); }
/* the Horus falcon of neofetch (brand/dist/terminal/horus.ans): half-block cells drawn with CSS, each 1ch wide and one
   16 px row high (top half / bottom half), so the rows touch and no font has to carry the block glyphs */
.term-line.art-row { min-height: 0; line-height: 16px; white-space: pre; word-break: normal; }
.ansi-art { display: inline-flex; height: 16px; vertical-align: top; }
.ansi-art i { flex: none; width: calc(var(--n, 1) * 1ch); height: 16px; background: linear-gradient(var(--t, transparent) 50%, var(--b, transparent) 50%); }
.ansi-art .ty { --t: var(--p-dahab); }
.ansi-art .tb { --t: var(--hz-blue); }
.ansi-art .tc { --t: var(--hz-blue-light); }
.ansi-art .by { --b: var(--p-dahab); }
.ansi-art .bb { --b: var(--hz-blue); }
.ansi-art .bc { --b: var(--hz-blue-light); }

/* Settings */
.set-page { padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.set-group { display: flex; flex-direction: column; gap: 10px; }
.set-group > h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.set-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: var(--bg-view); border: 1px solid var(--line-hairline); border-radius: var(--r-card); }
.set-row .label { flex: 1; min-width: 0; }
.set-row .label b { display: block; font-weight: 500; }
.set-row .label span { display: block; color: var(--text-2); font-size: 12.5px; line-height: 18px; }
.world-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.world-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-card); border: 1px solid var(--line-hairline);
  background: var(--bg-view); color: var(--text-1); text-align: start;
}
.world-card:hover { border-color: var(--line-control); }
.world-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.world-card .wc-name { font-weight: 600; }
.world-card .wc-desc { color: var(--text-2); font-size: 12px; line-height: 16px; }
.mini { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--r-card) - 4px); overflow: hidden; background: var(--p-layl); }
.mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini .m-win { position: absolute; left: 18%; top: 16%; width: 52%; height: 50%; border-radius: 4px; }
.mini .m-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13%; border-bottom: 1px solid rgb(127 127 127 / 0.2); }
.mini .m-panel { position: absolute; }
.mini .m-notif { position: absolute; right: 5%; bottom: 20%; width: 26%; height: 13%; border-radius: 3px; }
.mini[dir="rtl"] .m-notif, [dir="rtl"] .mini .m-notif { right: auto; left: 5%; }
.mini .m-dot { position: absolute; width: 5%; aspect-ratio: 1; border-radius: 2px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); }
.ach .badge-oct.locked { background: var(--bg-hover); color: var(--text-3); }
.ach b { display: block; font-weight: 600; }
.ach span { display: block; font-size: 12px; line-height: 16px; color: var(--text-2); }
.ach-horus { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.ach-horus p { margin: 0; }

.chip .ico { width: 14px; height: 14px; }

/* About */
.about { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 28px 22px; text-align: center; }
.about .mk { position: relative; --mk-h: 156px; flex: none; }
.about-name { font-size: 36px; line-height: 44px; }
.about-guide { display: flex; align-items: center; gap: 12px; max-width: 470px; text-align: start; }
.guide-av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgb(var(--p-lazward-rgb) / 0.55), var(--nd-bg-view) 75%); }
.guide-av svg { width: 32px; height: 32px; }
.about-table { width: 100%; max-width: 440px; border-collapse: collapse; font-size: 13px; text-align: start; }
.about-table td { padding: 6px 4px; border-bottom: 1px solid var(--line-hairline); }
.about-table td:first-child { color: var(--text-2); width: 46%; }
.about p { margin: 0; max-width: 470px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.link { color: var(--link); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

/* Text editor */
.editor { flex: 1; min-height: 0; border: 0; resize: none; padding: 16px 20px; background: var(--bg-view); color: var(--text-1); font-family: var(--font-mono); font-size: 13.5px; line-height: 22px; }
.editor:focus-visible { outline: none; }

/* System monitor */
.mon-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mon-table th { text-align: start; font-weight: 500; color: var(--text-2); padding: 8px 12px; border-bottom: 1px solid var(--line-hairline); position: sticky; top: 0; background: var(--bg-view); }
.mon-table td { padding: 8px 12px; border-bottom: 1px solid var(--line-hairline); font-variant-numeric: tabular-nums; }
.mon-table td .row { gap: 10px; }
.mon-table svg.app-ico { width: 22px; height: 22px; }
.mon-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px; }
.mon-stat { padding: 12px; }
.mon-stat b { display: block; font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }
.mon-stat span { color: var(--text-2); font-size: 12px; }

/* Calculator */
.calc { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg-window); direction: ltr; }
.calc-display { padding: 10px 14px; min-height: 76px; border-radius: var(--r-card); background: var(--bg-view); border: 1px solid var(--line-hairline); text-align: right; display: flex; flex-direction: column; justify-content: flex-end; }
.calc-display .expr { color: var(--text-2); font-size: 13px; min-height: 18px; font-variant-numeric: tabular-nums; }
.calc-display .val { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.calc-keys { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-keys button { border: 0; border-radius: var(--r-control); background: var(--bg-raised); color: var(--text-1); font-size: 17px; min-height: 44px; }
.calc-keys button:hover { background: var(--bg-hover); }
.calc-keys button.op { color: var(--accent-text); font-weight: 600; }
.stage[data-scheme="light"] .calc-keys button.op { color: var(--accent); }
.calc-keys button.eq { background: var(--accent); color: var(--on-accent); }

/* Browser: Firefox wearing the HorusOS theme (brand/firefox/theme/manifest.json; ROUND4 Appendix M `firefox`).
   A Firefox theme is one look whatever the desktop's scheme, and its colours are Nova Dark's roles:
   frame Layl (bg-void), toolbar and selected tab bg-view, the field bg-void with a hairline, a gold tab line
   and a gold focus border, lapis highlights. The Horus start page follows system/settings/firefox/horusos/start. */
.ff { flex: 1; min-height: 0; display: flex; flex-direction: column; color-scheme: dark; color: var(--nd-text-1); background: var(--nd-bg-void);
  --text-1: var(--nd-text-1); --text-2: var(--nd-text-2); --text-1-rgb: var(--nd-text-1-rgb); --text-2-rgb: var(--nd-text-2-rgb); --bg-view: var(--nd-bg-void);
  --accent: var(--nd-gold); --focus-ring: var(--nd-gold); }
.ff-tabs { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 40px; padding: 6px 8px 0; background: var(--nd-bg-void); overflow: hidden; }
.ff-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 240px; flex: 0 1 240px; height: 34px; padding-inline: 10px;
  border-radius: 8px 8px 0 0; background: var(--nd-bg-view); color: var(--nd-text-1); font-size: 12.5px; }
.ff-tab::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 2px 2px 0 0; background: var(--nd-gold); }
.ff-fav { width: 16px; height: 16px; flex: none; }
.ff-fav svg { width: 100%; height: 100%; display: block; }
.ff-tab-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the theme's frame image: the emblem with a soft lapis glow, 200 px from the end edge (clear of the window buttons) */
.ff-frame-mark { position: absolute; top: 6px; inset-inline-end: 200px; width: 28px; height: 28px; pointer-events: none; }
.ff-frame-mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100px; height: 44px; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(var(--nd-lapis-rgb) / 0.32), rgb(var(--nd-lapis-rgb) / 0)); }
.ff-frame-mark svg { position: relative; width: 100%; height: 100%; display: block; }
.ff-nav { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--nd-bg-view); border-bottom: 1px solid var(--nd-line-hairline); }
.ff-nav .icon-btn { color: var(--nd-text-1); }
.ff-nav .icon-btn:hover:not(:disabled) { background: var(--nd-bg-hover); }
.ff-nav .icon-btn:disabled { opacity: 0.4; cursor: default; }
.ff-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 10px; border-radius: 6px;
  background: var(--nd-bg-void); border: 1px solid var(--nd-line-hairline); color: var(--nd-text-2); }
.ff-url:focus-within { border-color: var(--nd-gold); background: var(--nd-bg-window); }
.ff-url input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--nd-text-1); }
.ff-url input:focus-visible { outline: none; }
.ff-url input::selection { background: var(--nd-lapis); color: var(--nd-text-1); }
.ff-page { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgb(var(--nd-lapis-rgb) / 0.22), rgb(var(--nd-lapis-rgb) / 0) 70%), var(--nd-bg-void); }
.ff-home { min-height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 24px 18px; width: min(860px, 100%); margin: 0 auto; }
.ff-home p { margin: 0; }
.ff-emblem { width: 84px; height: 84px; }
.ff-h1 { margin: 6px 0 0; font: 800 28px/1.2 var(--font-wordmark); letter-spacing: 0.06em; color: var(--nd-gold); }
:lang(ar) .ff-h1, [dir="rtl"] .ff-h1 { font: 800 30px/1.3 var(--font-display); letter-spacing: 0; }
.ff-greet { margin-top: 18px !important; font: 300 17px/1.4 var(--font-display); color: var(--nd-text-2); }
.ff-clock { font: 200 48px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.ff-period { font-size: 0.4em; font-weight: 300; color: var(--nd-text-2); margin-inline-start: 0.2em; }
.ff-date { margin-top: 2px !important; color: var(--nd-text-2); }
.ff-tagline { margin-top: 16px !important; font: 400 16px/1.5 var(--font-display); color: var(--nd-gold); }
.ff-hint { margin-top: 4px !important; color: var(--nd-text-2); font-size: 13px; }
.ff-note { margin-top: 14px; max-width: 560px; text-align: start; }
.ff-h2 { margin: 26px 0 10px; font: 500 12px/1.4 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nd-text-2); }
:lang(ar) .ff-h2, [dir="rtl"] .ff-h2 { letter-spacing: 0; text-transform: none; font-size: 13px; }
.ff-links { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.ff-links a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 12px; text-decoration: none; text-align: start;
  color: var(--nd-text-1); background: var(--nd-bg-window); border: 1px solid var(--nd-line-hairline); transition: background-color var(--dur-micro) linear, border-color var(--dur-micro) linear; }
.ff-links a:hover { background: var(--nd-bg-raised); border-color: var(--nd-gold); }
.ff-label { font: 600 15px/1.4 var(--font-display); }
.ff-sub { font-size: 12px; line-height: 16px; color: var(--nd-text-2); }
.ff-foot { margin-top: auto !important; padding-top: 18px; color: var(--nd-text-2); font-size: 12px; }

/* Learn with V7x (side sheet + app) */
.learn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.course { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-decoration: none; color: var(--text-1); }
.course:hover { border-color: var(--accent); }
.course .meta { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: 12px; }
.course p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 19px; }
.tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font-size: 13px; line-height: 19px; }
kbd { display: inline-block; padding: 0 6px; min-width: 22px; text-align: center; border-radius: var(--r-chip); border: 1px solid var(--line-control); border-bottom-width: 2px; background: var(--bg-raised); font-family: var(--font-mono); font-size: 11.5px; line-height: 18px; color: var(--text-1); direction: ltr; unicode-bidi: isolate; }

/* .exe helper */
.exe-list { display: flex; flex-direction: column; gap: 8px; }
.exe-alt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.exe-alt svg { width: 36px; height: 36px; flex: none; }
/* ---------------------------------------------------------------------------------------
   V7x Store «متجر V7x» (STORE-SPEC §4): token variables only, logical properties (RTL),
   glyph + text badges, monogram tiles (never octagons; the octagon is kept for Horus, achievement
   badges and the pack progress beads), 44 × 44 px targets with a coarse pointer.
   --------------------------------------------------------------------------------------- */
.st { position: relative; flex: 1; min-height: 0; display: flex; background: var(--bg-view); container-type: inline-size; }
[data-tint="fayrouz"] { --tint: var(--p-fayrouz); --tint-rgb: var(--p-fayrouz-rgb); --tink: var(--p-layl); }
[data-tint="lazward"] { --tint: var(--p-lazward); --tint-rgb: var(--p-lazward-rgb); --tink: var(--nd-text-1); }
[data-tint="dahab"] { --tint: var(--p-dahab); --tint-rgb: var(--p-dahab-rgb); --tink: var(--p-layl); }
[data-tint="marjan"] { --tint: var(--p-marjan); --tint-rgb: var(--p-marjan-rgb); --tink: var(--p-layl); }
[data-tint="nile"] { --tint: var(--p-nile-blue); --tint-rgb: var(--p-nile-blue-rgb); --tink: var(--nd-text-1); }
[data-tint="raml"] { --tint: var(--p-raml); --tint-rgb: var(--p-raml-rgb); --tink: var(--p-layl); }

/* sidebar: start edge, bg-window, 232 px (64 px rail below 1000 px) */
.st-side { flex: none; width: 232px; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--bg-window); border-inline-end: 1px solid var(--line-hairline); overflow: auto; }
.st-navbox { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.st-search { display: flex; align-items: center; gap: 6px; height: 36px; padding-inline: 9px; margin-bottom: 8px; border-radius: var(--r-control); background: var(--bg-view); border: 1px solid var(--line-hairline); color: var(--text-2); }
.st-search:focus-within { border-color: var(--accent); }
.st-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font-size: 12.5px; }
.st-search input:focus-visible { outline: none; }
.st-search input::placeholder { font-size: 12px; color: var(--text-2); }      /* the whole hint fits the 232 px sidebar (en and ar) */
.st-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.st-search input:placeholder-shown::-webkit-search-cancel-button { display: none; }   /* its hidden box would clip the hint */
.st-nav { display: flex; align-items: center; gap: 10px; min-height: 36px; padding-inline: 10px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-1); text-align: start; width: 100%; }
.st-nav > .ico { width: 18px; height: 18px; color: var(--text-2); }
.st-nav:hover { background: var(--bg-hover); }
.st-nav.on { background: rgb(var(--accent-rgb) / 0.16); }
.st-nav.on > .ico { color: var(--accent-text); }
.stage[data-scheme="light"] .st-nav.on > .ico { color: var(--accent); }
.st-nav-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-nav-x { color: var(--text-3); transition: transform var(--dur-quick) var(--ease-mizan); }
.st-nav-x.open { transform: rotate(90deg); }
.st-subnav { display: flex; flex-direction: column; gap: 1px; padding-inline-start: 18px; }
.st-nav.sub { min-height: 30px; font-size: 13px; color: var(--text-2); }
.st-nav.sub.on { color: var(--text-1); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); flex: none; }
.st-count { min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; }
.st-side > .grow, .st-navbox > .grow { flex: 1; }
@container (max-width: 999px) {
  .st-side { width: 64px; padding-inline: 8px; align-items: center; }
  .st-navbox { align-items: center; }
  .st-nav { width: 44px; justify-content: center; padding: 0; }
  .st-nav-l, .st-nav-x, .st-subnav { display: none; }
  .st-search { width: 44px; padding: 0; justify-content: center; }
  .st-search input { position: absolute; width: 1px; opacity: 0; }
  .st-search:focus-within { position: absolute; z-index: 3; width: 220px; padding-inline: 10px; justify-content: flex-start; background: var(--bg-raised); }
  .st-search:focus-within input { position: static; width: auto; opacity: 1; }
  .st-nav .st-count { position: absolute; margin-inline-start: 26px; margin-top: -18px; min-width: 16px; height: 16px; font-size: 10px; }
}

/* content */
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-bar { flex: none; display: flex; align-items: center; gap: 2px; height: 44px; padding-inline: 8px; background: var(--bg-view); border-bottom: 1px solid var(--line-hairline); }
.st-bar .icon-btn { width: 36px; height: 36px; min-width: 36px; }
.st-bar .icon-btn:disabled { opacity: 0.35; cursor: default; }
.st-banner { flex: none; display: flex; flex-direction: column; }
.st-ban { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-size: 13px; background: rgb(var(--info-rgb) / 0.12); border-bottom: 1px solid var(--line-hairline); }
.st-ban.warn { background: rgb(var(--warning-rgb) / 0.16); }
.st-ban .ico { color: var(--info); }
.st-ban.warn .ico { color: var(--warning); }
.st-page { flex: 1; min-height: 0; overflow: auto; }
.st .st-page:focus, .st .st-page:focus-visible { outline: none; }
.st-pg { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.st-sec { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }
.st-sec h2 { margin: 0; font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: 600; }
[lang="ar"] .st-sec h2 { line-height: var(--lh-ar-title-2); }
.st-sec p { margin: 2px 0 0; font-size: 13px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.st-empty { color: var(--text-2); padding: 14px 4px; margin: 0; }
.st-lead { margin: 0; font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.st-prose { margin: 0; color: var(--text-1); line-height: 22px; max-width: 760px; }
.st-know { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-1); }

/* monogram tiles (vendor apps): rounded square, radius --r-card, vertical tint gradient 100 % → 80 % */
.st-tile {
  width: var(--sz); height: var(--sz); flex: none; display: inline-grid; place-items: center; border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--tint), color-mix(in srgb, var(--tint) 80%, var(--p-layl)));
  color: var(--tink); box-shadow: inset 0 0 0 1px rgb(var(--nd-text-1-rgb) / 0.08);
}
.st-tile b { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--sz) * 0.42); line-height: 1; letter-spacing: -0.02em; }
.st-tile b[data-n="2"] { font-size: calc(var(--sz) * 0.36); }
.st-tile b[data-n="3"] { font-size: calc(var(--sz) * 0.28); }
.st-tile-q { background: var(--bg-hover); color: var(--text-2); }
.st-tile-q .ico { width: calc(var(--sz) * 0.5); height: calc(var(--sz) * 0.5); }
.st-glyph { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r-card); background: rgb(var(--tint-rgb) / 0.18); color: var(--tint); }
.stage[data-scheme="light"] .st-glyph { color: var(--text-1); }
.st-glyph .ico { width: 26px; height: 26px; }
.st-glyph.big { width: 96px; height: 96px; }
.st-glyph.big .ico { width: 48px; height: 48px; }

/* badges (glyph + text, never colour alone) and chips */
.st-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-badge, .st-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 8px; border-radius: var(--r-chip);
  border: 1px solid var(--line-control); color: var(--text-2); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}
.st-badge .ico, .st-chip .ico { width: 14px; height: 14px; }
.st-badge.info { border-color: rgb(var(--info-rgb) / 0.7); color: var(--info); }
.st-badge.accent { border-color: rgb(var(--accent-rgb) / 0.7); color: var(--accent-text); }
.st-badge.ok, .st-chip.ok { border-color: rgb(var(--success-rgb) / 0.7); color: var(--success); }
.st-badge.warn, .st-chip.warn { border-color: rgb(var(--warning-rgb) / 0.8); color: var(--warning); }
.st-badge.warn-fill, .st-chip.warn-fill { background: var(--warning); border-color: var(--warning); color: var(--on-gold); }
.stage[data-scheme="light"] .st-badge.accent { color: var(--accent); }
.stage[data-scheme="light"] .st-badge.info, .stage[data-scheme="light"] .st-badge.ok, .stage[data-scheme="light"] .st-badge.warn,
.stage[data-scheme="light"] .st-chip.ok, .stage[data-scheme="light"] .st-chip.warn { color: var(--text-1); }
.st-badge span, .st-chip span { overflow: hidden; text-overflow: ellipsis; }
.st-tag { display: inline-block; padding: 0 6px; border-radius: var(--r-chip); background: var(--bg-hover); color: var(--text-2); font-size: 11.5px; }
.st-mono { font-family: var(--font-mono); font-size: 12.5px; unicode-bidi: isolate; overflow-wrap: anywhere; }
.st-line { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font-size: 12.5px; }

/* cards */
.st-card, .st-cat, .st-wtile, .st-pack-open {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--r-card); border: 1px solid var(--line-hairline);
  background: var(--bg-view); color: var(--text-1); text-align: start; min-width: 0;
  transition: background-color var(--dur-micro-out) linear, border-color var(--dur-micro-out) linear;
}
.st-card:hover, .st-cat:hover, .st-wtile:hover, .st-pack:hover { background: var(--bg-hover); border-color: var(--line-control); transition-duration: var(--dur-micro); }
.st-card:active, .st-cat:active, .st-wtile:active { transform: scale(0.97); }
.st-card-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.st-card-t > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.st-card-t > .muted { font-size: 12.5px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-cat { align-items: center; border-inline-start: 4px solid var(--tint); }
.st-cgrid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.st-wgrid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.st-wtile { flex-direction: column; align-items: stretch; gap: 8px; }
.st-wname { font-size: 12.5px; color: var(--text-2); }
.st-wtile .st-arrow { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.stage[data-scheme="light"] .st-wtile .st-arrow { color: var(--accent); }
.st-wapps { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.st-wnames { display: flex; flex-direction: column; min-width: 0; line-height: 17px; }     /* one name per line, never cut mid-list */
.st-wnames > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.st-pgrid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.st-pack { display: flex; flex-direction: column; border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); overflow: hidden; }
.st-pack-open { border: 0; border-radius: 0; background: transparent; align-items: center; }
.st-pack-open:hover { background: transparent; }
.st-pack-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.st-mini { display: inline-flex; gap: 3px; }
.st-mini .st-tile { border-radius: var(--r-chip); }
/* pack progress beads: one octagon per member (an allowed brand octagon) */
.st-beads { display: inline-flex; gap: 4px; }
.st-bead { width: 10px; height: 10px; display: inline-block; background: var(--line-control);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.st-bead.on { background: var(--accent); }

/* hero carousel: bg-raised + tint 18 % + the {8/3} lattice at 6 %, no autoplay */
.st-hero { position: relative; min-height: 240px; border-radius: var(--r-card); overflow: hidden; background: var(--bg-raised); color: var(--text-1); outline-offset: 2px; }
.st-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgb(var(--tint-rgb) / 0.18), rgb(var(--tint-rgb) / 0.06) 70%); }
.st-lat { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--tint); opacity: 0.06; }
.st-slide { position: relative; display: flex; align-items: center; gap: 24px; min-height: 240px; padding: 28px 64px 44px; }
.st-slide-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-slide-t h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: 600; letter-spacing: -0.015em; }
[lang="ar"] .st-slide-t h2 { line-height: var(--lh-ar-title-1); }
@container (min-width: 1040px) { .st-slide-t h2 { font-size: var(--fs-display-l); line-height: var(--lh-display-l); } [lang="ar"] .st-slide-t h2 { line-height: var(--lh-ar-display-l); } }
.st-slide-t p { margin: 0; color: var(--text-2); max-width: 520px; }
.st-slide-i { display: grid; grid-template-columns: repeat(2, 56px); gap: 10px; flex: none; }
.st-hero-arr { position: absolute; top: calc(50% - 18px); width: 36px; height: 36px; border: 0; border-radius: var(--r-pill); background: rgb(var(--bg-view-rgb) / 0.7); color: var(--text-1); display: grid; place-items: center; }
.st-hero-arr:hover { background: var(--bg-hover); }
.st-hero-arr.prev { inset-inline-start: 12px; }
.st-hero-arr.next { inset-inline-end: 12px; }
.st-dots { position: absolute; bottom: 12px; inset-inline: 0; display: flex; justify-content: center; gap: 4px; }
.st-dot-b { width: 24px; height: 24px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.st-dot-b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-control); }
.st-dot-b[aria-current="true"]::before { width: 20px; border-radius: var(--r-pill); background: var(--accent); }

/* app page */
.st-apphead { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.st-apphead-t { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.st-apphead-t p { margin: 0; }
.st-h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: 600; letter-spacing: -0.015em; }
[lang="ar"] .st-h1 { line-height: var(--lh-ar-title-1); }
.st-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 220px; }
.st-actions .row { gap: 6px; }
.st-primary { position: relative; overflow: hidden; min-width: 132px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.st-reason { margin: 0; color: var(--warning); font-size: 12.5px; }
.stage[data-scheme="light"] .st-reason { color: var(--text-1); }
.st-sources { margin: 0; padding: 8px 10px; border: 1px solid var(--line-hairline); border-radius: var(--r-control); display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.st-sources legend { padding-inline: 4px; font-size: 12px; color: var(--text-2); }
.st-src { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.st-src > span { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.st-src input, .st-check input, .st-member input { accent-color: var(--accent); margin-top: 3px; flex: none; width: 16px; height: 16px; }
.st-call { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0; border-radius: var(--r-control); font-size: 13px; line-height: 19px; background: rgb(var(--info-rgb) / 0.12); color: var(--text-1); }
.st-call > .ico { width: 18px; height: 18px; flex: none; color: var(--info); margin-top: 1px; }
.st-call.warning { background: rgb(var(--p-marjan-rgb) / 0.14); }
.st-call.warning > .ico { color: var(--p-marjan); }
.st-call.care { background: rgb(var(--p-dahab-rgb) / 0.14); }
.st-call.care > .ico { color: var(--gold-text); }
.stage[data-scheme="light"] .st-call.warning > .ico, .stage[data-scheme="light"] .st-call.care > .ico { color: var(--text-1); }
.st-call .btn { flex: none; }
.st-shots { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; height: 168px; }
.st-shots > i { grid-row: 1; border-radius: var(--r-card); background: linear-gradient(160deg, rgb(var(--tint-rgb) / 0.16), var(--bg-view-alt) 70%); border: 1px dashed var(--line-control); }
.st-shots > i:nth-child(1) { grid-column: 1; }
.st-shots > i:nth-child(2) { grid-column: 2; }
.st-shots > i:nth-child(3) { grid-column: 3; }
/* the honest caption sits in the large first frame */
.st-shots-t { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 12px 16px; color: var(--text-2); font-size: 12.5px; }
.st-shots-t svg { width: 36px; height: 36px; }
.st-shots-t b { color: var(--text-1); }
.st-details { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 13px; }
.st-details th { text-align: start; font-weight: 500; color: var(--text-2); padding: 8px 12px 8px 0; width: 32%; vertical-align: top; border-bottom: 1px solid var(--line-hairline); }
.st-details td { padding: 8px 0; border-bottom: 1px solid var(--line-hairline); overflow-wrap: anywhere; }
[dir="rtl"] .st-details th { padding: 8px 0 8px 12px; }
.st-linkish { border: 0; background: transparent; padding: 0; color: var(--link); font: inherit; font-weight: 500; text-align: start; }
.st-linkish:hover { text-decoration: underline; }

/* "Show me the commands": JetBrains Mono, LTR in both languages */
.st-cmd { border: 1px solid var(--line-hairline); border-radius: var(--r-control); background: var(--bg-view-alt); }
.st-cmd > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-inline: 12px; cursor: pointer; font-weight: 600; color: var(--accent-text); list-style: none; }
.stage[data-scheme="light"] .st-cmd > summary { color: var(--accent); }
.st-cmd > summary::-webkit-details-marker { display: none; }
.st-cmd-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.st-cmd-head { margin: 0; color: var(--text-2); font-size: 12.5px; }
.st-cmd h4 { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.st-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.st-pre {
  margin: 0; padding: 10px 12px; border-radius: var(--r-control); background: var(--nd-bg-window); color: var(--nd-text-1);
  font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); direction: ltr; text-align: left; unicode-bidi: isolate;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto;
}

/* answers (equivalence card, Windows-only page, lists) */
.st-eq { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-card); border: 1px solid rgb(var(--warning-rgb) / 0.5); background: rgb(var(--warning-rgb) / 0.06); }
.st-eq-h { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.st-eq-h h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.st-list { display: flex; flex-direction: column; gap: 8px; }
.st-ans { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); }
.st-ans-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--text-1); text-align: start; padding: 2px; border-radius: var(--r-control); }
button.st-ans-t:hover b { text-decoration: underline; }
.st-member { cursor: pointer; }
.st-wine { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-card); border: 1px dashed rgb(var(--warning-rgb) / 0.8); }
.st-wine h3 { margin: 0 0 4px; font-size: 15px; }
.st-wine p { margin: 0; }
.st-discover { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 14px; border-radius: var(--r-card); border: 1px dashed var(--line-control); background: transparent; color: var(--text-2); text-align: start; }
.st-discover:hover { color: var(--text-1); background: var(--bg-hover); }
.st-fold > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.st-iwrap { display: flex; flex-direction: column; gap: 6px; }

/* Horus strip: 40 px, octagon avatar, one tip (Horus is the guide, HORUS-ADDENDUM §3) */
.st-horus { flex: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px; border-top: 1px solid var(--line-hairline); background: var(--bg-window); font-size: 13px; }
.st-horus p { margin: 0; color: var(--text-2); }
.st-horus-av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, var(--p-lazward), var(--nd-bg-view) 75%);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.st-horus-av svg { width: 20px; height: 20px; }
/* a tip already said 3 times: only the avatar, at the inline-end of the bar (hover shows it, a click says it again) */
.st-horus-mini { width: 32px; height: 32px; flex: none; padding: 0; border: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, var(--p-lazward), var(--nd-bg-view) 75%);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.st-horus-mini svg { width: 22px; height: 22px; }
.st-horus-mini:focus-visible { clip-path: none; border-radius: var(--r-control); }

/* sheets, scrim, menu, toasts */
.st-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.st-layer > * { pointer-events: auto; }
.st-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(var(--nd-bg-void-rgb) / 0.45); }
.st-sheet { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 32px); display: flex; flex-direction: column; border-radius: var(--r-popup); background: var(--bg-window); color: var(--text-1); box-shadow: var(--shadow-popup), 0 0 0 1px var(--line-hairline); }
.st-sheet-in { flex: 1; min-height: 0; overflow: auto; padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.st-sheet-in > h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: 600; }
.st-sheet-acts { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 22px 16px; border-top: 1px solid var(--line-hairline); }
.st-rv { display: flex; flex-direction: column; gap: 8px; }
.st-rv h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.st-rv h4 { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); }
.st-rv p { margin: 0; }
.st-rv-item { display: flex; flex-direction: column; gap: 6px; }
.st-fp { display: inline-block; margin-inline: 4px; padding: 1px 6px; border-radius: var(--r-chip); background: var(--bg-hover); font-family: var(--font-mono); font-size: 12.5px; white-space: pre; direction: ltr; unicode-bidi: isolate; }
.st-keyring .st-fp { margin-inline: 6px 0; }
.st-pkgs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.st-file > summary { cursor: pointer; padding: 4px 0; color: var(--text-1); }
.st-file > summary .small { color: var(--link); }
.st-size { font-weight: 600; }
.st-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 8px 10px; border-radius: var(--r-control); background: var(--bg-view); border: 1px solid var(--line-hairline); }
.st-check.danger { border-color: rgb(var(--error-rgb) / 0.6); }
.st-danger { color: var(--error); }
.st-who p, .st-iline { display: flex; align-items: center; gap: 8px; }
.st-qsheet { position: absolute; inset-block: 0; inset-inline-end: 0; width: 380px; max-width: 100%; display: flex; flex-direction: column; background: var(--bg-window); box-shadow: var(--shadow-popup); border-inline-start: 1px solid var(--line-hairline); }
.st-scrim:has(> .st-qsheet) { justify-content: flex-end; background: rgb(var(--nd-bg-void-rgb) / 0.25); }
.st-qhead { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 18px; }
[dir="rtl"] .st-qhead { padding: 12px 18px 8px 12px; }
.st-qhead h2 { margin: 0; font-size: var(--fs-title-2); }
.st-qlist { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0 12px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.st-qitem { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-card); background: var(--bg-view); border: 1px solid var(--line-hairline); }
.st-qitem p { margin: 2px 0 0; color: var(--text-2); }
.st-qitem.s-failed { border-color: rgb(var(--error-rgb) / 0.6); }
.st-done, .st-fail { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: var(--nd-bg-void); }
.st-fail { background: var(--error); color: var(--on-error); }
.st-qsum { margin: 0; padding: 12px 18px 16px; font-weight: 600; border-top: 1px solid var(--line-hairline); }
.st-menu { position: absolute; min-width: 220px; padding: 6px; border-radius: var(--r-popup); background: var(--bg-raised); box-shadow: var(--shadow-popup), 0 0 0 1px var(--line-hairline); display: flex; flex-direction: column; }
.st-menu button { display: flex; align-items: center; gap: 10px; min-height: 36px; padding-inline: 10px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-1); text-align: start; }
.st-menu button:hover, .st-menu button:focus-visible { background: var(--bg-hover); }
.st-toasts { position: absolute; inset-inline: 0; bottom: 52px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.st-toast { max-width: min(560px, calc(100% - 32px)); padding: 10px 14px; border-radius: var(--r-control); background: var(--nd-bg-raised); color: var(--nd-text-1); box-shadow: var(--shadow-popup); font-size: 13px; }

/* the light thread: 3 px, fills from the start side; a slow 0.25 Hz sweep only while something waits */
.st-thread { display: block; position: relative; height: 3px; margin-top: 6px; border-radius: 2px; overflow: hidden; background: rgb(var(--accent-rgb) / 0.18); }
.st-thread > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform 100ms linear; }
[dir="rtl"] .st-thread > i { transform-origin: right center; }
.st-thread.ind > i { width: 28%; transform: none; animation: st-sweep 4s linear infinite; }
@keyframes st-sweep { from { inset-inline-start: -28%; } to { inset-inline-start: 100%; } }
.stage.rm .st-thread.ind > i { animation: none; width: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); }
.st-thread.in-btn { position: absolute; inset-inline: 0; bottom: 0; margin: 0; height: 3px; border-radius: 0; background: rgb(var(--on-accent-rgb) / 0.2); }
.st-thread.in-btn > i { background: var(--on-accent); }
.st-thread.mini { width: 36px; margin: 0; flex: none; }
.st-thread.mini.idle > i { transition: none; }

/* the demo password prompt: a system dialog over the desktop (no password field) */
.st-pk-scrim { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(var(--nd-bg-void-rgb) / 0.5); }
.st-pk { width: min(460px, calc(100% - 32px)); padding: 20px 22px 16px; border-radius: var(--r-popup); background: var(--bg-window); color: var(--text-1); box-shadow: var(--shadow-popup), 0 0 0 1px var(--line-hairline); }
.st-pk h2 { margin: 0 0 6px; font-size: var(--fs-title-2); line-height: var(--lh-title-2); }
.st-pk p { margin: 0 0 8px; }
.st-pk-ico { width: 36px; height: 36px; color: var(--gold-text); }
.st-pk-apps { font-weight: 600; }
.st-pk-demo { padding: 8px 10px; border-radius: var(--r-control); background: rgb(var(--info-rgb) / 0.12); }
.st-pk-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* "Installs are still running": the Store's own ChoiceDialog, over the Store window only */
.st-dlg-scrim { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgb(var(--nd-bg-void-rgb) / 0.45); }
.st-dlg .st-pk-ico { color: var(--accent-text); }
.stage[data-scheme="light"] .st-dlg .st-pk-ico { color: var(--accent); }

/* coarse pointers: every Store control is at least 44 × 44 px */
@media (pointer: coarse) {
  .st .btn, .st .icon-btn, .st-nav, .st-hero-arr, .st-dot-b, .st-menu button, .st-discover, .st-pk .btn, .st-cmd > summary, .st-linkish { min-height: 44px; min-width: 44px; }
  .st-search { height: 44px; }
  .st-src, .st-check, .st-member, .st-fold > summary, .st-file > summary { min-height: 44px; align-items: center; }
  .st-src input, .st-check input, .st-member input { width: 22px; height: 22px; margin-top: 0; }
}

/* review sheet: why a dependency is listed, the installer's SHA-256 (LTR monospace, wraps on a phone) */
.st-dep { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--text-2); }
.st-dep .ico { color: var(--accent-text); flex: none; }
.st-hash { margin: 0; color: var(--text-2); }
.st-sha { display: inline; padding: 1px 6px; border-radius: var(--r-chip); background: var(--bg-hover); color: var(--text-1); font-family: var(--font-mono); font-size: 12px;
  direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; word-break: break-all; }
.st-rt { margin: 0; }
/* ---------------------------------------------------------------------------------------
   Feel (FEEL-ADDENDUM §A, §B, §C, §G, §H; FEEL-MOCKUP-BRIEF §1–§4): the taskbar hover pop,
   the liquid / glass drag overlays, the HUD reveal pieces, the glass terminal with its line
   editor and settings sheet, the Feel page and the wallpaper picker. Token variables only;
   the terminal's colours are the active scheme's (TOKENS.term, set as --t-* by script).
   --------------------------------------------------------------------------------------- */

/* ---- taskbar hover pop «وثبة» (§H.2): only the icon moves; the button keeps its box ------------ */
.task .app-ico { transform-origin: 50% 100%; transition: transform var(--pop-out-ms, 0ms) var(--pop-out-ease, linear); }
.panel:not([data-pop="0"]) .task:hover { z-index: 1; }
.panel:not([data-pop="0"]) .task:hover .app-ico {
  transform: translateY(calc(-1 * var(--pop-lift, 0px))) scale(var(--pop-scale, 1));
  transition: transform var(--pop-in-ms, 0ms) var(--pop-in-ease, linear);
}
.panel[data-pop="3"] .task[data-dist="1"]:not(:hover) .app-ico {
  transform: translateY(calc(-1 * var(--pop-n1-lift, 0px))) scale(var(--pop-n1-scale, 1)); transition: transform var(--pop-in-ms, 0ms) var(--pop-in-ease, linear);
}
.panel[data-pop="3"] .task[data-dist="2"]:not(:hover) .app-ico {
  transform: translateY(calc(-1 * var(--pop-n2-lift, 0px))) scale(var(--pop-n2-scale, 1)); transition: transform var(--pop-in-ms, 0ms) var(--pop-in-ease, linear);
}
.panel:not([data-pop="0"]) .task:hover:active .app-ico { transform: translateY(calc(-1 * var(--pop-lift, 0px))) scale(calc(var(--pop-scale, 1) * 0.92)); transition-duration: 0ms; }
.panel:not([data-pop="0"]) .task.rel .app-ico { transition: transform var(--pop-rel-ms, 0ms) var(--ease-mawj); }
.task.attention { box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb, var(--p-dahab-rgb)) / 0.55); }

/* ---- liquid drag: the glass style's specular band and rim (High) -------------------------------- */
.win-sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(var(--sheen-a, 90deg), transparent 34%, rgb(255 255 255 / 0.08) 50%, transparent 66%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}
.win.off-desk { visibility: hidden; pointer-events: none; }

/* ---- V7x Cyber window open: the scan line and the one glitch (§F.12) ---------------------------- */
.hud-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4; pointer-events: none; background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.8); }
.hud-glitch { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.hud-glitch i {
  position: absolute; left: 0; right: 0; display: block;
  background: rgb(var(--accent-rgb) / 0.10); border-top: 1px solid rgb(var(--accent-rgb) / 0.8); border-bottom: 1px solid rgb(var(--p-shafaq-rgb) / 0.8);
}

/* ---- the glass terminal (§B.2, §C): solid chrome, glass content ---------------------------------- */
.win[data-app="terminal"], .win[data-app="terminal"] .win-body, .win[data-app="terminal"] .win-clip { background: transparent; }
.term-head {
  flex: none; display: flex; align-items: center; gap: 8px; height: 34px; padding-inline: 12px 6px;
  background: var(--bg-window); border-bottom: 1px solid var(--line-hairline); color: var(--text-2);
}
.term-head .grow { flex: 1; }
.term-scheme { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-set-btn .ico { width: 15px; height: 15px; }
.term-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.term-wrap > .term { flex: 1; }
.stage .term[data-scheme] {          /* beats the per-world terminal backgrounds of 50-apps.css */
  background-color: rgb(var(--t-bg) / var(--t-alpha, 1)); background-image: var(--t-tex, none); background-repeat: repeat;
  color: var(--t-fg); font-size: var(--t-fs, 13px); line-height: var(--t-lh, 20px); padding: 12px;
  -webkit-backdrop-filter: blur(var(--t-blur, 0px)); backdrop-filter: blur(var(--t-blur, 0px));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.term[data-scheme].t-light { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6); }
.term[data-scheme] .term-line { min-height: var(--t-lh, 20px); }
.term[data-scheme] .c0 { color: var(--t-c0); } .term[data-scheme] .c1 { color: var(--t-c1); } .term[data-scheme] .c2 { color: var(--t-c2); }
.term[data-scheme] .c3 { color: var(--t-c3); } .term[data-scheme] .c4 { color: var(--t-c4); } .term[data-scheme] .c5 { color: var(--t-c5); }
.term[data-scheme] .c6 { color: var(--t-c6); } .term[data-scheme] .c7 { color: var(--t-c7); } .term[data-scheme] .c8 { color: var(--t-c8); }
.term[data-scheme] .c9 { color: var(--t-c9); } .term[data-scheme] .c10 { color: var(--t-c10); } .term[data-scheme] .c11 { color: var(--t-c11); }
.term[data-scheme] .c12 { color: var(--t-c12); } .term[data-scheme] .c13 { color: var(--t-c13); } .term[data-scheme] .c14 { color: var(--t-c14); }
.term[data-scheme] .c15 { color: var(--t-c15); }
.term[data-scheme] .p-user, .term[data-scheme] .ok { color: var(--t-c2); }
.term[data-scheme] .p-path, .term[data-scheme] .laz { color: var(--t-c4); }
.term[data-scheme] .dim { color: var(--t-ghost); }
.term[data-scheme] .warn, .term[data-scheme] .gold { color: var(--t-c3); }
.term[data-scheme] .err { color: var(--t-c1); }
.term[data-scheme] .acc { color: var(--t-c6); }
.term[data-scheme] .p-user, .term[data-scheme] .p-path { font-weight: 600; }
.term[data-scheme] .ansi-art .ty { --t: var(--t-c3); } .term[data-scheme] .ansi-art .by { --b: var(--t-c3); }
.term[data-scheme] .ansi-art .tb { --t: var(--t-c4); } .term[data-scheme] .ansi-art .bb { --b: var(--t-c4); }
.term[data-scheme] .ansi-art .tc { --t: var(--t-c6); } .term[data-scheme] .ansi-art .bc { --b: var(--t-c6); }
.term[data-scheme] .term-line.art-row { line-height: 16px; min-height: 0; }
.term-line.ar-line { unicode-bidi: plaintext; text-align: left; }
/* the line editor: the input's own text is invisible; the overlay paints colours, ghost and a block cursor that never blinks */
.term-field { position: relative; flex: 1; min-width: 0; display: block; overflow: hidden; }
.term-hl { position: absolute; left: 0; top: 0; white-space: pre; pointer-events: none; line-height: inherit; }
.term[data-scheme] .term-input { position: relative; z-index: 1; width: 100%; color: transparent; caret-color: transparent; background: transparent; line-height: inherit; }
.term[data-scheme] .term-input.secret { caret-color: var(--t-cursor); }
.term[data-scheme] .term-input::selection { background: rgb(127 127 127 / 0.38); color: transparent; }
.term .ghost { color: var(--t-ghost); }
.term .unk { color: var(--t-c9); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.term i.cur { font-style: normal; background: var(--t-cursor); color: var(--t-cursor-text); }
.term i.cur.ghost { color: var(--t-cursor-text); }
.term i.cur.hollow { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--t-cursor); }
.term .typed { white-space: pre-wrap; }
.term-menu { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 2px 0 6px; }
.term-menu .tm-item { padding-inline: 4px; }
.term-menu .tm-item.on { background: var(--t-c6); color: rgb(var(--t-bg)); }

/* ---- the "Terminal settings" sheet (mirrors in Arabic; its preview stays LTR) ------------------- */
.tset {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; z-index: 6; width: min(372px, 100%); overflow: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px;
  background: var(--bg-window); color: var(--text-1); border-inline-start: 1px solid var(--line-hairline); box-shadow: var(--shadow-popup);
  font-family: var(--font-ui); font-size: 13px; line-height: 18px;
}
.tset:focus-visible { outline: none; }
.tset-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tset-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.tset h4 { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.tset .tset-preview { flex: none; overflow: hidden; padding: 8px 10px; border-radius: var(--r-card); border: 1px solid var(--line-hairline); min-height: 0; }
.tset-explain { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; color: var(--text-2); font-size: 12px; }
.tset-explain code { font-family: var(--font-mono); color: var(--text-1); background: var(--bg-view); padding: 1px 6px; border-radius: var(--r-chip); }
.tset-note { margin: 0; padding: 6px 10px; border-radius: var(--r-control); background: rgb(var(--gold-rgb, var(--p-dahab-rgb)) / 0.14); font-size: 12px; }
.tset-themes { display: flex; flex-direction: column; gap: 6px; }
.tset-theme {
  display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; padding: 6px; text-align: start;
  border: 1px solid var(--line-hairline); border-radius: var(--r-card); background: var(--bg-view); color: var(--text-1);
}
.tset-theme:hover { background: var(--bg-hover); }
.tset-theme[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tset-sw { display: flex; align-items: center; gap: 3px; height: 36px; padding-inline: 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.25); }
.tset-sw b { font-family: var(--font-mono); font-size: 13px; margin-inline-end: 3px; }
.tset-sw i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tset-sw i.gh { width: 12px; height: 3px; }
.tset-tname { display: flex; flex-direction: column; min-width: 0; }
.tset-tname b { font-weight: 600; }
.tset-tname span { color: var(--text-2); font-size: 11.5px; line-height: 15px; }
.tset-row { display: flex; align-items: center; gap: 10px; }
.tset-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tset-row .sub { color: var(--text-2); font-size: 11.5px; line-height: 15px; }
.tset-row .range { flex: 1; }
.tset-opv, .tset-fsv { min-width: 4.5ch; text-align: end; font-variant-numeric: tabular-nums; }
.tset-tex { flex-wrap: wrap; border-radius: var(--r-card); }
.tset-tex > button { font-size: 12px; }

/* ---- Settings → Feel «الإحساس» ------------------------------------------------------------------ */
.feel-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.feel-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; text-align: start;
  border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); color: var(--text-1);
}
.feel-card:hover { border-color: var(--line-control); }
.feel-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.feel-card .chip { align-self: flex-start; }
.fd-stage { position: relative; display: block; height: 62px; border-radius: 6px; overflow: hidden; background: linear-gradient(var(--bg-void), var(--bg-view-alt)); }
.fd-win { position: absolute; inset-inline-start: 12px; top: 11px; width: 54%; height: 40px; border-radius: 4px; background: var(--bg-raised); box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.45); transform-origin: 30% 0; }
.fd-win i { display: block; height: 9px; border-radius: 4px 4px 0 0; background: var(--bg-hover); }

/* ---- Settings → Wallpaper «الخلفية» ------------------------------------------------------------- */
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.wall-item {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: start;
  border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); color: var(--text-1);
}
.wall-item:hover { border-color: var(--line-control); }
.wall-item[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wall-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: max(0px, calc(var(--r-card) - 3px)); background: var(--bg-void); }
.wall-item b { font-weight: 600; font-size: 13px; }
.wall-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wall-chips .chip { height: 20px; padding-inline: 8px; font-size: 11px; }
.world-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.world-card .wc-desc { font-size: 12px; line-height: 16px; color: var(--text-2); }
.dir-select { min-height: 32px; max-width: 100%; border-radius: var(--r-control); border: 1px solid var(--line-control); background: var(--nd-bg-view); color: var(--nd-text-1); padding-inline: 8px; font: inherit; }
/* ---------------------------------------------------------------------------------------
   V7x Cyber «سايبر» (FEEL-ADDENDUM §F; FEEL-MOCKUP-BRIEF §5): "the observatory after
   midnight". Colours come from the generated [data-world="cyber"] blocks (brand/tokens-cyber.json),
   chamfers from --cut-*, rims from --rim-*, the halo from --halo-*. Two-tone interaction:
   Fayrouz (accent) is where you are (focus, selection, the active task), Shafaq is where you
   point (hover outlines and brackets). No pulsing, no flashing: the only moving light is the
   one-pass window reveal (21-wm.js). HUD captions: JetBrains Mono, uppercase, +6 % tracking,
   Latin only (Arabic captions: the UI face, 12 px, no tracking).
   --------------------------------------------------------------------------------------- */
.stage[data-world="cyber"] { --chamfer-c: var(--cut-popup); }

/* ---- the HUD panel: bottom, full width, 44 px, rim on top, halo ---------------------------------- */
.panel-cyber {
  left: 0; right: 0; padding-inline: 4px 6px; gap: 2px;
  box-shadow: inset 0 var(--rim-w) 0 rgb(var(--accent-rgb) / var(--rim-top)), 0 0 var(--halo-r) rgb(var(--accent-rgb) / calc(var(--halo-alpha) * 0.5));
}
.panel-cyber .pl-btn { height: 38px; border-radius: 0; }
.panel-cyber .pl-launcher { width: 44px; }
.panel-cyber .task { width: 44px; }
.panel-cyber .pl-start-mark { width: 28px; height: 28px; }
.panel-cyber .pl-tasks { gap: 2px; }
.panel-cyber .task-ind { border-radius: 0; bottom: 2px; }
.panel-cyber .task.running .task-ind { width: 6px; height: 1px; background: rgb(var(--text-1-rgb) / 0.4); }
.panel-cyber .task.active .task-ind { width: 18px; height: 2px; background: var(--accent); box-shadow: var(--glow-accent); }
/* hover brackets in Shafaq (60 %), attention brackets at 100 % (static) */
.panel-cyber .pl-btn::before, .panel-cyber .pl-btn::after {
  content: ""; position: absolute; width: 8px; height: 8px; border: 0 solid var(--shafaq); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-micro-out) linear;
}
.panel-cyber .pl-btn::before { top: 3px; inset-inline-start: 3px; border-top-width: 1.5px; border-inline-start-width: 1.5px; }
.panel-cyber .pl-btn::after { bottom: 3px; inset-inline-end: 3px; border-bottom-width: 1.5px; border-inline-end-width: 1.5px; }
.panel-cyber .pl-btn:hover { background: rgb(var(--shafaq-rgb) / 0.07); }
.panel-cyber .pl-btn:hover::before, .panel-cyber .pl-btn:hover::after { opacity: 0.6; transition-duration: var(--dur-micro); }
.panel-cyber .task.attention::before, .panel-cyber .task.attention::after { opacity: 1; }
.panel-cyber .task.attention { box-shadow: none; }
/* octagon-pip pager: four desktops (current = Fayrouz, others hairline) */
.pl-pager { display: flex; align-items: center; gap: 0; padding-inline: 2px; }
.panel-cyber .pl-pip { width: 22px; min-width: 22px; color: var(--line-control); }
.pl-pip svg { width: 10px; height: 10px; }
.pl-pip[aria-checked="true"] { color: var(--accent); --pip-fill: var(--accent); }
.panel-cyber .pl-pip::before, .panel-cyber .pl-pip::after { content: none; }
.pl-pip:hover { color: var(--shafaq); }
/* sensors: only what the browser reports (20-desktop.js) */
.pl-sensors { display: flex; align-items: center; gap: 14px; padding-inline: 10px; height: 100%; }
.hud-sensor { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-val { direction: ltr; unicode-bidi: isolate; }
.hud-cap { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.stage[dir="rtl"] .hud-cap { font-family: var(--font-ui); font-size: 12px; text-transform: none; letter-spacing: 0; }
.panel-cyber .pl-clock { flex-direction: row; gap: 8px; padding-inline: 10px; }
.panel-cyber .pl-clock .t { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.panel-cyber .pl-clock .d { font-family: var(--font-mono); font-size: 11px; }

/* ---- windows: square, 1 px outline, the Fayrouz halo on the active window only ------------------ */
.stage[data-world="cyber"] .win { box-shadow: var(--shadow-window-inactive); }
.stage[data-world="cyber"] .win.active { box-shadow: var(--shadow-window-active); }
.stage[data-world="cyber"] .win-bar { box-shadow: inset 0 var(--rim-w) 0 rgb(var(--accent-rgb) / calc(var(--rim-top) * 0.5)); }
.stage[data-world="cyber"] .win.active .win-bar { box-shadow: inset 0 var(--rim-w) 0 rgb(var(--accent-rgb) / var(--rim-top)); }
.stage[data-world="cyber"][dir="ltr"] .win-title { font-family: var(--font-mono); font-size: 12.5px; text-align: start; letter-spacing: 0.01em; }
.stage[data-world="cyber"][dir="rtl"] .win-title { text-align: start; }
.stage[data-world="cyber"] .wbtn { border-radius: 0; }
.stage[data-world="cyber"] .wbtn:hover { background: rgb(var(--shafaq-rgb) / 0.12); color: var(--text-1); box-shadow: inset 0 0 0 1px rgb(var(--shafaq-rgb) / 0.6); }
.stage[data-world="cyber"] .wbtn.close:hover { background: var(--error); color: var(--on-error); box-shadow: none; }

/* ---- popups and menus: 10 px chamfers, the rim (70 / 35 / 20 %), a bracket at the top-start ------ */
.stage[data-world="cyber"] .popup, .stage[data-world="cyber"] .notif, .stage[data-world="cyber"] .osd {
  border-radius: 0; box-shadow: none;
  clip-path: polygon(var(--chamfer-c) 0, calc(100% - var(--chamfer-c)) 0, 100% var(--chamfer-c), 100% calc(100% - var(--chamfer-c)),
    calc(100% - var(--chamfer-c)) 100%, var(--chamfer-c) 100%, 0 calc(100% - var(--chamfer-c)), 0 var(--chamfer-c));
}
.stage[data-world="cyber"] .popup::after, .stage[data-world="cyber"] .notif::after, .stage[data-world="cyber"] .osd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(rgb(var(--accent-rgb) / var(--rim-top)), rgb(var(--accent-rgb) / var(--rim-side)) 28%, rgb(var(--accent-rgb) / var(--rim-side)) 72%, rgb(var(--accent-rgb) / var(--rim-bottom)));
  /* a 1 px chamfered frame: the outer outline minus the inner one (even-odd) */
  clip-path: polygon(evenodd,
    var(--chamfer-c) 0, calc(100% - var(--chamfer-c)) 0, 100% var(--chamfer-c), 100% calc(100% - var(--chamfer-c)), calc(100% - var(--chamfer-c)) 100%, var(--chamfer-c) 100%, 0 calc(100% - var(--chamfer-c)), 0 var(--chamfer-c), var(--chamfer-c) 0,
    calc(var(--chamfer-c) + 0.4px) 1px, calc(100% - var(--chamfer-c) - 0.4px) 1px, calc(100% - 1px) calc(var(--chamfer-c) + 0.4px), calc(100% - 1px) calc(100% - var(--chamfer-c) - 0.4px),
    calc(100% - var(--chamfer-c) - 0.4px) calc(100% - 1px), calc(var(--chamfer-c) + 0.4px) calc(100% - 1px), 1px calc(100% - var(--chamfer-c) - 0.4px), 1px calc(var(--chamfer-c) + 0.4px), calc(var(--chamfer-c) + 0.4px) 1px);
}
.stage[data-world="cyber"] .popup::before {
  content: ""; position: absolute; top: 5px; inset-inline-start: 5px; width: 10px; height: 10px; pointer-events: none; z-index: 1;
  border-top: 1.5px solid var(--accent); border-inline-start: 1.5px solid var(--accent); opacity: 0.8;
}
.stage[data-world="cyber"] .notif-thread { z-index: 2; }

/* ---- cards and rows: 8 px chamfers (containers only: focus rings of controls are never clipped) --- */
.stage[data-world="cyber"] .set-row, .stage[data-world="cyber"] .card, .stage[data-world="cyber"] .explain {
  border-radius: 0;
  clip-path: polygon(var(--cut-card) 0, 100% 0, 100% calc(100% - var(--cut-card)), calc(100% - var(--cut-card)) 100%, 0 100%, 0 var(--cut-card));
}
.stage[data-world="cyber"] .seg { border-radius: var(--r-control); }
.stage[data-world="cyber"] .seg > button { border-radius: var(--r-control); }

/* ---- two-tone interaction: hover outlines in Shafaq; focus, selection, active in Fayrouz ---------- */
.stage[data-world="cyber"] .btn:hover:not(.primary):not(.gold),
.stage[data-world="cyber"] .menu-item:hover, .stage[data-world="cyber"] .side-item:hover,
.stage[data-world="cyber"] .l-app:hover, .stage[data-world="cyber"] .l-row:hover,
.stage[data-world="cyber"] .world-card:hover, .stage[data-world="cyber"] .wall-item:hover, .stage[data-world="cyber"] .feel-card:hover,
.stage[data-world="cyber"] .desk-icon:hover { box-shadow: inset 0 0 0 1px rgb(var(--shafaq-rgb) / 0.55); }
.stage[data-world="cyber"] .side-item.on, .stage[data-world="cyber"] .win.active .side-item.on { box-shadow: inset 2px 0 0 var(--accent); }
.stage[data-world="cyber"][dir="rtl"] .side-item.on, .stage[data-world="cyber"][dir="rtl"] .win.active .side-item.on { box-shadow: inset -2px 0 0 var(--accent); }
.stage[data-world="cyber"] .desk-icon.sel { background: rgb(var(--accent-rgb) / 0.18); border-color: rgb(var(--accent-rgb) / 0.8); }
.stage[data-world="cyber"] .l-search:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- Welcome and Settings: the HUD marks as decor ------------------------------------------------ */
.hud-mark { width: 10px; height: 10px; color: var(--accent); flex: none; }
.hud-mark.knot { width: 11px; height: 11px; margin-inline-end: 6px; vertical-align: -1px; color: var(--p-fayrouz); }
.pl-hud { display: inline-flex; align-items: center; height: 100%; padding-inline: 4px; color: var(--accent); opacity: 0.7; }
.pl-hud .hud-mark { width: 7px; height: 7px; }
.panel-cyber .pl-hud:has(use[href="#hud-ticks"]) .hud-mark { width: 16px; height: 6px; color: var(--line-control); }
.stage[dir="rtl"] .hud-mark.mirror { transform: scaleX(-1); }
/* ---------------------------------------------------------------------------------------
   V7x Welcome «اختر عالمك» (DESIGN-SPEC §10.5): frameless 960×640, guided by Horus.
   --------------------------------------------------------------------------------------- */
.win.frameless { border-radius: var(--r-popup); }
.wel { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px 1fr; background: var(--bg-window); }
.wel-rail {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 14px; min-height: 0;
  background: linear-gradient(180deg, rgb(var(--bg-void-rgb) / 0.9), rgb(var(--bg-window-rgb) / 0.9));
  border-inline-end: 1px solid var(--line-hairline);
}
.wel-drag { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; }
.wel-drag .lockup { font-size: 15px; }
.wel-drag .lockup-mark { height: 1.9em; }
.wel-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wel-step {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding-inline: 8px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-2); text-align: start; font-size: 13px;
}
.wel-step .n {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--bg-hover); color: var(--text-2);
}
.wel-step:hover { background: var(--bg-hover); color: var(--text-1); }
.wel-step[aria-current="step"] { color: var(--text-1); font-weight: 600; background: rgb(var(--accent-rgb) / 0.12); }
.wel-step[aria-current="step"] .n { background: var(--accent); color: var(--on-accent); }
.wel-step.done .n { background: rgb(var(--accent-rgb) / 0.25); color: var(--text-1); }
.wel-guide { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-card); background: rgb(var(--bg-view-rgb) / 0.7); border: 1px solid var(--line-hairline); }
.wel-guide .who { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.wel-guide .who .guide-av { width: 34px; height: 34px; }
.wel-guide .who svg { width: 28px; height: 28px; }
.wel-guide p { margin: 0; font-size: 13px; line-height: 19px; color: var(--text-1); }
.wel-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wel-top { display: flex; justify-content: flex-end; gap: 2px; padding: 8px 8px 0; height: 44px; touch-action: none; }
.wel-page { flex: 1; min-height: 0; overflow: auto; padding: 0 36px 16px; }
.wel-nav { display: flex; align-items: center; gap: 10px; padding: 12px 24px 16px; border-top: 1px solid var(--line-hairline); }
.wel-nav .count { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.wel-hero { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 300; letter-spacing: -0.015em; margin: 6px 0 4px; }
[lang="ar"] .wel-hero, .stage[dir="rtl"] .wel-hero { font-weight: 600; line-height: 60px; letter-spacing: 0; }
.wel-sub { margin: 0 0 18px; color: var(--text-2); font-size: 15px; line-height: 23px; max-width: 46em; }
.wel-reveal { display: flex; align-items: center; gap: 28px; margin-bottom: 18px; }
.wel-reveal .mk { position: relative; --mk-h: 150px; flex: none; }
.wel-reveal .txt { min-width: 0; }
.wel-reveal .tag { color: var(--gold-text); font-weight: 600; font-size: 14px; }
.lang-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.lang-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--line-hairline);
  background: var(--bg-view); color: var(--text-1); text-align: start;
}
.lang-card b { font-size: 18px; line-height: 26px; font-weight: 600; }
.lang-card span { color: var(--text-2); font-size: 12.5px; line-height: 18px; }
.lang-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kbd-demo { display: flex; align-items: center; gap: 22px; padding: 18px; margin-bottom: 14px; }
.kbd-big {
  width: 92px; height: 92px; flex: none; display: grid; place-items: center; font-size: 34px; font-weight: 700; font-family: var(--font-display);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--accent); color: var(--on-accent);
}
.kbd-try { width: 100%; height: 42px; padding-inline: 12px; border-radius: var(--r-control); border: 1px solid var(--line-control); background: var(--bg-view); color: var(--text-1); font-size: 15px; }
.wel-worlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }   /* four worlds: V7x Cyber is the fourth card */
.wel-wcard { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); text-align: start; color: var(--text-1); position: relative; }
.wel-wcard[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wel-wcard ul { margin: 0; padding-inline-start: 16px; color: var(--text-2); font-size: 12px; line-height: 16px; }
.wel-wcard .best { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 2; }
.wel-wcard .seg { align-self: flex-start; }
.wel-wcard .seg > button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.tier-say { display: flex; gap: 16px; align-items: center; padding: 16px; margin-bottom: 14px; }
.tier-say .badge-oct { width: 52px; height: 52px; }
.found { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.found .card { padding: 10px 12px; }
.found b { display: block; font-variant-numeric: tabular-nums; }
.found span { color: var(--text-2); font-size: 12px; }
.snd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.snd-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; text-align: start; border-radius: var(--r-card); border: 1px solid var(--line-hairline); background: var(--bg-view); color: var(--text-1); }
.snd-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.snd-card p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 18px; }
.snd-card .row { justify-content: space-between; }
.apps-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-card .cmd, .sw-card .cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.app-card .top { display: flex; align-items: center; gap: 12px; }
.app-card .top svg { width: 40px; height: 40px; flex: none; }
.app-card p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 19px; }
.ready { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.ready-badge { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ready-badge .badge-oct { width: 120px; height: 120px; }
.ready-badge .badge-oct svg { width: 64px; height: 64px; }
.summary { width: 100%; border-collapse: collapse; font-size: 14px; }
.summary td { padding: 8px 4px; border-bottom: 1px solid var(--line-hairline); }
.summary td:first-child { color: var(--text-2); width: 40%; }
/* ---------------------------------------------------------------------------------------
   The public demo only (tools/build_public.py; src/public/public.js): the "Interactive preview"
   badge with its mute switch, the phone note, the live ISO's boot menu and the installer's
   slideshow. Token variables only; the boot chain and the installer keep Nova Dark's roles.
   --------------------------------------------------------------------------------------- */

/* ---- the badge: outside the stage, bottom start corner, above any bar that reaches it ------- */
.pv {
  position: absolute; z-index: 150; inset-inline-start: 14px; bottom: calc(14px + var(--pv-lift, 0px));
  display: flex; align-items: center; gap: 2px; padding: 3px; padding-inline-start: 10px; border-radius: 999px;
  background: rgb(var(--nd-bg-void-rgb) / 0.62); border: 1px solid rgb(var(--nd-line-hairline-rgb) / 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--nd-text-2); font: 500 12px/16px var(--font-ui); opacity: 0.82;
  pointer-events: none; transition: opacity 160ms linear, bottom 160ms var(--ease-mizan);
}
.pv:hover, .pv:focus-within { opacity: 1; }
.pv.away { opacity: 0; }
.pv.away .pv-mute { pointer-events: none; }
.pv-badge { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pv-mark { width: 16px; height: 16px; flex: none; }
.pv-mark svg { width: 100%; height: 100%; display: block; }
.pv-mute {
  pointer-events: auto; width: 30px; height: 30px; border: 0; border-radius: 999px; margin-inline-start: 6px;
  display: grid; place-items: center; background: transparent; color: var(--nd-text-1); cursor: pointer;
}
.pv-mute:hover { background: rgb(var(--nd-text-1-rgb) / 0.1); }
.pv-mute[aria-pressed="true"] { color: var(--nd-gold); }
.pv-mute .ico { width: 18px; height: 18px; }
.app.pv-touch .pv-mute { width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) { .pv { transition: none; } }
/* phones: the caption under the upright stage already says "Interactive preview", so the badge keeps only the
   emblem and the mute switch: centred under the caption, or in the side bar when the phone lies sideways */
.app.letterbox .pv { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; translate: -50% 0; padding: 4px; padding-inline-start: 12px; }
[dir="rtl"] .app.letterbox .pv, .app.letterbox[dir="rtl"] .pv { translate: 50% 0; }
.app.letterbox .pv-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.letterbox:not(.tall) .pv { inset-inline-start: 8px; translate: none; bottom: 8px; flex-direction: column; padding: 4px; gap: 4px; }
.app.letterbox:not(.tall) .pv-mute { margin: 0; }
.app.letterbox .lb-caption { bottom: 84px; }
.lb-note { font-size: 13px; color: var(--nd-gold); }

/* "Best on a computer": on the power card, for touch screens and small windows only */
.pv-mobile { display: none; margin: 0; color: var(--nd-gold); font-size: calc(var(--sh) * 0.017); text-align: center; }
.app.pv-touch .pv-mobile { display: block; }
.app.letterbox .pv-mobile { font-size: 26px; }
.app.letterbox.tall .pv-mobile { display: none; }          /* the caption under the stage says it, larger */

/* ---- the live ISO's boot menu (ROUND4-ADDENDUM §F) --------------------------------------------- */
.grub-glyph {
  width: calc(32 * var(--g)); height: calc(32 * var(--g)); flex: none; display: grid; place-items: center;
  border: 1px solid rgb(var(--p-dahab-rgb) / 0.55); border-radius: calc(6 * var(--g)); color: var(--p-dahab);
  font: 600 calc(19 * var(--g)) / 1 var(--font-ui);
}
.grub-chev { margin-inline-start: auto; opacity: 0.8; }
.scene-grub.live .grub-item [dir="rtl"] { font-family: var(--font-ui); }

/* ---- the installer's slideshow (ROUND4-ADDENDUM §E) --------------------------------------------- */
.scene-install {
  color-scheme: dark; color: var(--nd-text-1); background: var(--stage-bg);
  --text-1: var(--nd-text-1); --text-1-rgb: var(--nd-text-1-rgb); --text-2: var(--nd-text-2); --text-2-rgb: var(--nd-text-2-rgb);
  --text-3: var(--nd-text-3); --text-3-rgb: var(--nd-text-3-rgb);
  --accent: var(--nd-accent); --accent-rgb: var(--nd-accent-rgb); --accent-hover: var(--nd-accent-hover); --on-accent: var(--nd-on-accent);
  --bg-raised: var(--nd-bg-raised); --bg-hover: var(--nd-bg-hover); --line-control: var(--nd-line-control); --line-hairline: var(--nd-line-hairline);
  --focus-ring: var(--nd-focus-ring);
}
.in-win {
  position: absolute; inset: max(24px, 5%) max(24px, 6%) max(64px, 8%); display: flex; overflow: hidden;
  border-radius: 14px; background: var(--nd-bg-window); border: 1px solid var(--nd-line-hairline);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
}
.in-side { flex: none; width: clamp(180px, 17%, 240px); display: flex; flex-direction: column; gap: 22px; padding: 22px 14px; background: var(--nd-bg-void); border-inline-end: 1px solid var(--nd-line-hairline); }
.in-brand { display: flex; align-items: center; gap: 10px; padding-inline: 6px; }
.in-brand-mark { width: 30px; height: 30px; flex: none; }
.in-brand-mark svg { width: 100%; height: 100%; display: block; }
.in-title { font: 600 14px/18px var(--font-display); }
.in-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.in-steps li { padding: 8px 10px; border-radius: 8px; color: var(--nd-text-3); font-size: 13px; }
.in-steps li.done { color: var(--nd-text-2); }
.in-steps li.cur { background: var(--nd-accent); color: var(--nd-on-accent); font-weight: 600; }
.in-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.in-deck { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--nd-bg-void); }
.in-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4%; padding: 3% 5%; }
.in-copy { order: -1; display: flex; flex-direction: column; gap: 14px; }
.in-copy p, .in-copy h2 { margin: 0; }
.in-kicker { color: var(--nd-gold); font: 600 13px/18px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.in-h { font: 600 clamp(28px, calc(var(--sh) * 0.046), 52px) / 1.15 var(--font-display); color: var(--nd-text-1); }
.in-h span { display: inline-block; }
.in-line { color: var(--nd-text-2); font-size: clamp(15px, calc(var(--sh) * 0.019), 21px); line-height: 1.5; max-width: 32em; }
[dir="rtl"] .in-kicker { letter-spacing: 0; text-transform: none; font-size: 15px; }
[dir="rtl"] .in-h { line-height: 1.35; }
.in-art { position: relative; height: 100%; max-height: 520px; display: grid; place-items: center; transform-origin: 50% 50%; }
.ia-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgb(var(--p-lazward-rgb) / 0.42), rgb(var(--p-lazward-rgb) / 0) 62%); }
.ia-emblem { position: relative; width: min(62%, 300px); aspect-ratio: 1; }
.ia-emblem.small { width: min(34%, 170px); }
.ia-emblem svg { width: 100%; height: 100%; display: block; }
.ia-worlds { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; animation: ia-drift 12s linear both; }
.ia-world { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgb(0 0 0 / 0.45); }
.ia-world:nth-child(2n) { translate: 0 14%; }
@keyframes ia-drift { from { transform: translateX(3%); } to { transform: translateX(-3%); } }
.art-pace { align-content: center; gap: 28px; }
.ia-sand { position: relative; width: 82%; height: 3px; border-radius: 3px; background: rgb(var(--p-dahab-rgb) / 0.18); overflow: visible; }
.ia-sand i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--p-dahab-rgb) / 0), var(--p-dahab)); transform-origin: 0 50%; animation: ia-wind 2.6s var(--ease-sahm) infinite; }
.ia-sand b { position: absolute; top: -7px; width: 3px; height: 3px; border-radius: 50%; background: var(--p-dahab); animation: ia-grain 2.6s linear infinite; }
.ia-sand b:nth-of-type(2) { animation-delay: -0.9s; top: -12px; }
.ia-sand b:nth-of-type(3) { animation-delay: -1.7s; top: -4px; }
[dir="rtl"] .ia-sand i { transform-origin: 100% 50%; background: linear-gradient(270deg, rgb(var(--p-dahab-rgb) / 0), var(--p-dahab)); }
@keyframes ia-wind { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ia-grain { from { inset-inline-start: 0%; opacity: 0; } 15% { opacity: 1; } to { inset-inline-start: 100%; opacity: 0; } }
.ia-orbit { position: absolute; inset: 0; margin: auto; width: min(90%, 420px); aspect-ratio: 1; animation: ia-spin 48s linear infinite; }
.ia-orbit span {
  position: absolute; left: 50%; top: 50%; width: 2em; height: 2em; margin: -1em 0 0 -1em; display: grid; place-items: center;
  font: 600 clamp(20px, calc(var(--sh) * 0.03), 34px) / 1 var(--font-display); color: var(--nd-text-2);
  transform: rotate(calc(var(--i) * 45deg)) translateY(calc(-1 * min(42vh, 190px))) rotate(calc(var(--i) * -45deg));
}
.ia-orbit span:nth-child(2n) { color: var(--p-dahab); }
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-door { position: absolute; inset: 8% 30%; border-radius: 10px; background: linear-gradient(180deg, rgb(var(--p-fayrouz-rgb) / 0.5), rgb(var(--p-fayrouz-rgb) / 0.05)); filter: blur(6px); animation: ia-door 1.6s var(--ease-sahm) both; }
@keyframes ia-door { from { transform: scaleX(0.08); opacity: 0.2; } to { transform: scaleX(1); opacity: 1; } }
.ia-store { position: relative; width: min(40%, 200px); aspect-ratio: 1; }
.ia-store-ico { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 40px rgb(0 0 0 / 0.5)); }
.ia-ring { position: absolute; width: min(78%, 380px); aspect-ratio: 1; overflow: visible; }
.ia-ring circle { fill: none; stroke: var(--p-dahab); stroke-width: 1.4; stroke-dasharray: 352 352; stroke-dashoffset: 352; animation: ia-close 2.2s var(--ease-sahm) 0.4s both; }
@keyframes ia-close { to { stroke-dashoffset: 0; } }
.ia-glint { position: absolute; width: 12%; aspect-ratio: 1; inset-inline-end: 24%; top: 22%; color: var(--p-dahab); animation: ia-glint 1.2s var(--ease-sahm) 1.6s both; }
@keyframes ia-glint { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1.3) rotate(45deg); opacity: 1; } 100% { transform: scale(0.8) rotate(90deg); opacity: 0.9; } }
.ia-path { width: 100%; height: 100%; overflow: visible; }
.ia-path polyline { fill: none; stroke: rgb(var(--p-dahab-rgb) / 0.35); stroke-width: 0.5; stroke-dasharray: 1.5 1.5; }
.ia-path use { color: var(--p-dahab); opacity: 0.18; animation: ia-star 600ms var(--ease-sahm) calc(400ms + var(--i) * 700ms) both; }
@keyframes ia-star { to { opacity: 1; } }
.in-slide.hero { display: block; padding: 0; }
.in-slide.hero .in-art { position: absolute; inset: 0; max-height: none; }
.ia-dawn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.in-slide.hero .in-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 8% 5% 4%; background: linear-gradient(180deg, rgb(var(--nd-bg-void-rgb) / 0), rgb(var(--nd-bg-void-rgb) / 0.86) 45%); }
.stage.tier-lite .scene-install .in-art *, .stage.rm .scene-install .in-art * { animation: none !important; }
.in-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px 0; background: var(--nd-bg-window); }
.in-ctl .icon-btn { width: 32px; height: 32px; min-width: 32px; color: var(--nd-text-2); }
.in-ctl .icon-btn:hover { background: var(--nd-bg-hover); color: var(--nd-text-1); }
.in-dots { display: flex; gap: 6px; }
.in-dot { width: 22px; height: 22px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.in-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--nd-text-1-rgb) / 0.28); transition: background-color var(--dur-micro) linear, transform var(--dur-micro) linear; }
.in-dot[aria-current="true"]::before { background: var(--nd-accent); transform: scale(1.25); }
.in-foot { padding: 10px 18px 14px; background: var(--nd-bg-window); display: flex; flex-direction: column; gap: 10px; }
.in-prog { height: 4px; border-radius: 4px; background: var(--nd-bg-raised); overflow: hidden; }
.in-prog i { display: block; height: 100%; background: var(--nd-accent); transform-origin: 0 50%; transform: scaleX(0); }
[dir="rtl"] .in-prog i { transform-origin: 100% 50%; }
.in-row { display: flex; align-items: center; gap: 14px; }
.in-status { color: var(--nd-text-1); font-weight: 500; }
.in-note { flex: 1; color: var(--nd-text-3); font-size: 12.5px; text-align: center; }
.in-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px; background: var(--nd-bg-window); }
.in-done[hidden] { display: none; }
.in-done-mark { width: 110px; height: 110px; }
.in-done-mark svg { width: 100%; height: 100%; display: block; }
.in-done-t { margin: 0; font: 600 34px/1.2 var(--font-display); }
.in-done-b { margin: 0; color: var(--nd-text-2); font-size: 17px; }
.in-done .in-note { flex: none; }
.in-done .btn { min-height: 42px; padding: 0 22px; font-size: 15px; margin-top: 6px; }
/* the scaled 1280 × 720 stage on phones: one column of copy over the art */
.app.letterbox .in-side { width: 150px; }

/* Without JavaScript nothing can run: say so, in both languages */
.noscript { position: fixed; inset: 0; z-index: 300; margin: 0; padding: 24px; display: grid; place-items: center; text-align: center;
  background: var(--p-layl); color: var(--nd-text-1); font: 16px/1.6 var(--font-ui); }
:root { --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Noto Sans Mono", "Liberation Mono", monospace; }