/* ══════════════════════════════════════════════════════════════════════
   CorSch OS 2045 — Theme-Stylesheet
   Extrahiert aus:
     - corsch-os-2045-login.html
     - corsch-os-2045-windows.html
   Scope: body[data-theme-mode="os2045"]
   Einbindung später: <link rel="stylesheet" href="css/theme-os2045.css">
   Benötigt Google Fonts: Inter, JetBrains Mono, Instrument Serif
   ══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. TOKENS ───────────────────────── */
:root {
  /* Base backgrounds */
  --bg-0: #05070c;
  --bg-1: #0a0e17;

  /* Ink (text / foreground) */
  --ink:    #eef2ff;
  --ink-2:  #b5bdd1;
  --ink-3:  #6d7695;
  --ink-4:  #3d465f;

  /* Glass (surfaces / panels) */
  --glass:              rgba(22, 28, 44, 0.58);
  --glass-2:            rgba(14, 18, 30, 0.72);
  --glass-2-strong:     rgba(14, 18, 30, 0.78);  /* Login-Auth-Card */
  --glass-hi:           rgba(255, 255, 255, 0.08);
  --glass-edge:         rgba(255, 255, 255, 0.10);
  --glass-edge-strong:  rgba(255, 255, 255, 0.18);
  --glass-shadow:       0 30px 80px rgba(0,0,0,0.55),
                        0 2px 0 rgba(255,255,255,0.04) inset,
                        0 -1px 0 rgba(0,0,0,0.3) inset;
  --glass-shadow-xl:    0 40px 100px rgba(0,0,0,0.65),
                        0 2px 0 rgba(255,255,255,0.04) inset,
                        0 -1px 0 rgba(0,0,0,0.3) inset;

  /* Accents — warm */
  --a-amber:    #ffb86b;
  --a-amber-2:  #ff7a42;
  --a-rose:     #ff6b95;
  --a-gold:     #ffd76b;

  /* Accents — cool */
  --a-cyan:    #5fd1ff;
  --a-mint:    #7bffb8;
  --a-violet:  #b08bff;
  --a-sky:     #6b9dff;
  --a-lime:    #d4ff6b;

  /* User-customisable accent — overridable via body[data-os-accent="…"].
     Defaults to cyan (matches the original "cool" feel of links/lockscreen).
     Components that want to follow the user's theme should reference
     var(--theme-accent) rather than var(--a-cyan) directly. */
  --theme-accent:     var(--a-cyan);
  --theme-accent-rgb: 95, 209, 255;

  /* User-customisable UI scale — driven by the settings-app via
     body[data-os-scale="…"]. Defaults to 1 (no change). */
  --scale-factor: 1;

  /* Semantic */
  --a-ok:   #5fe4a6;
  --a-warn: #ffcb5f;
  --a-err:  #ff6b6b;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-3xl: 22px;
  --r-card: 24px;

  /* Layer z-indices */
  --z-bg: 0;
  --z-desktop: 1;
  --z-window: 4;
  --z-quickbar: 6;
  --z-ctx: 7;
  --z-taskbar: 8;
  --z-startmenu: 9;
  --z-scan: 999;
}

/* ───────────────────────── 2. THEME SCOPE + RESET ───────────────────────── */
body[data-theme-mode="os2045"],
body[data-theme-mode="os2045"] * {
  box-sizing: border-box;
}
body[data-theme-mode="os2045"] *:where(:not([class*="reset-preserve"])) {
  margin: 0;
  padding: 0;
}

body[data-theme-mode="os2045"] {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  user-select: none;
}
body[data-theme-mode="os2045"] button,
body[data-theme-mode="os2045"] input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}
body[data-theme-mode="os2045"] button { cursor: pointer; }
/* a11y: remove default UA outline only for mouse focus; restore an explicit
 * focus-ring on :focus-visible (keyboard navigation) so Tab is always visible.
 * Backlog 2b3ad40a — WCAG 2.4.7 Focus-Visible. */
body[data-theme-mode="os2045"] input  { outline: none; }
body[data-theme-mode="os2045"] input:focus-visible,
body[data-theme-mode="os2045"] button:focus-visible,
body[data-theme-mode="os2045"] textarea:focus-visible,
body[data-theme-mode="os2045"] select:focus-visible,
body[data-theme-mode="os2045"] a:focus-visible,
body[data-theme-mode="os2045"] [tabindex]:focus-visible {
  outline: 2px solid var(--theme-accent, var(--a-cyan, #5fd1ff));
  outline-offset: 2px;
}

/* ───────────────────────── 3. STAGE ───────────────────────── */
body[data-theme-mode="os2045"] .os-stage {
  position: fixed;
  top: 50%; left: 50%;
  width: 1440px; height: 900px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: var(--bg-0);
  overflow: hidden;
}

/* ───────────────────────── 4. WALLPAPER / ATMOSPHERE ───────────────────────── */
body[data-theme-mode="os2045"] .wall {
  position: absolute; inset: 0;
  z-index: var(--z-bg);
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(255,122,66,0.22), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(95,209,255,0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(176,139,255,0.14), transparent 60%),
    linear-gradient(180deg, #05070c 0%, #0a0d18 60%, #0e1220 100%);
}
body[data-theme-mode="os2045"] .wall::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 60%, rgba(255,184,107,0.14), transparent 50%),
    radial-gradient(ellipse 45% 35% at 70% 30%, rgba(123,255,184,0.10), transparent 50%);
  animation: os-drift 45s ease-in-out infinite alternate;
  filter: blur(30px);
}
body[data-theme-mode="os2045"] .wall::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}
body[data-theme-mode="os2045"] .horizon {
  position: absolute; left: 0; right: 0; top: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,184,107,0.5), rgba(95,209,255,0.4), transparent);
  filter: blur(1px);
  z-index: var(--z-bg);
}
body[data-theme-mode="os2045"] .bokeh { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-bg); }
body[data-theme-mode="os2045"] .bokeh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.6;
}
body[data-theme-mode="os2045"] .scan {
  position: absolute; inset: 0;
  z-index: var(--z-scan);
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 3px,
    rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px);
}

/* ───────────────────────── 5. GLASS RIM (utility) ───────────────────────── */
/* Inner highlight-border used on cards, windows, startmenu, ctx, toast */
body[data-theme-mode="os2045"] .os-rim {
  position: relative;
}
body[data-theme-mode="os2045"] .os-rim::before,
body[data-theme-mode="os2045"] .widget::before,
body[data-theme-mode="os2045"] .auth::before,
body[data-theme-mode="os2045"] .panel::before,
body[data-theme-mode="os2045"] .win::before,
body[data-theme-mode="os2045"] .start-menu::before,
body[data-theme-mode="os2045"] .ctx::before,
body[data-theme-mode="os2045"] .toast::before,
body[data-theme-mode="os2045"] .taskbar::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 40%, transparent);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
body[data-theme-mode="os2045"] .taskbar::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.03));
}

/* ───────────────────────── 6. TOP-BAR (Login only) ───────────────────────── */
body[data-theme-mode="os2045"] .topbar {
  position: absolute;
  top: 18px; left: 22px; right: 22px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
body[data-theme-mode="os2045"] .tb-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
body[data-theme-mode="os2045"] .tb-brand .mark {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--a-amber), var(--a-amber-2));
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(255,122,66,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
body[data-theme-mode="os2045"] .tb-brand .mark svg {
  width: 14px; height: 14px;
  stroke: #1a0800; fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-theme-mode="os2045"] .tb-brand b {
  font-family: 'Inter', sans-serif; font-weight: 500;
  letter-spacing: -0.01em; text-transform: none; font-size: 13px;
}
body[data-theme-mode="os2045"] .tb-meta { display: flex; align-items: center; gap: 14px; }
body[data-theme-mode="os2045"] .tb-meta .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.12); }
body[data-theme-mode="os2045"] .tb-meta .status { color: var(--a-ok); display: flex; align-items: center; gap: 6px; }
body[data-theme-mode="os2045"] .tb-meta .status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-ok); box-shadow: 0 0 8px var(--a-ok);
}

/* ───────────────────────── 7. FOOTER (Login only) ───────────────────────── */
body[data-theme-mode="os2045"] .footer {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--ink-4); text-transform: uppercase;
}
body[data-theme-mode="os2045"] .footer a { color: var(--ink-3); text-decoration: none; margin: 0 10px; }
body[data-theme-mode="os2045"] .footer a:hover { color: var(--ink); }

/* ───────────────────────── 8. LOGIN LAYOUT ───────────────────────── */
body[data-theme-mode="os2045"] .main {
  position: absolute; inset: 70px 0 70px 0;
  display: grid;
  grid-template-columns: 1fr 480px 1fr;
  align-items: center;
  z-index: 2;
  padding: 0 60px;
}

/* Hero (left) */
body[data-theme-mode="os2045"] .hero {
  padding-right: 40px;
  display: flex; flex-direction: column; gap: 22px;
  align-self: center;
  max-width: 440px;
}
body[data-theme-mode="os2045"] .hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--a-amber); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
body[data-theme-mode="os2045"] .hero-kicker::before {
  content: ''; width: 24px; height: 1px; background: var(--a-amber);
}
body[data-theme-mode="os2045"] .hero-time {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 58px; line-height: 1; color: var(--ink); letter-spacing: -0.01em;
}
body[data-theme-mode="os2045"] .hero-time small {
  font-family: 'JetBrains Mono', monospace; font-style: normal;
  font-size: 13px; color: var(--ink-3); letter-spacing: 0.18em;
  display: block; margin-top: 12px;
}
body[data-theme-mode="os2045"] .hero-greet {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 28px; line-height: 1.2; color: var(--ink-2);
}
body[data-theme-mode="os2045"] .hero-greet b {
  font-style: normal; font-family: 'Inter', sans-serif; color: var(--ink); font-weight: 500;
}
body[data-theme-mode="os2045"] .hero-sys {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--ink-2);
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 12px; row-gap: 6px;
}
body[data-theme-mode="os2045"] .hero-sys .k { color: var(--ink-4); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9.5px; }
body[data-theme-mode="os2045"] .hero-sys .v { color: var(--ink); }
body[data-theme-mode="os2045"] .hero-sys .v.ok { color: var(--a-ok); }

/* Auth-Card (center) */
body[data-theme-mode="os2045"] .auth {
  position: relative;
  background: var(--glass-2-strong);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow-xl);
  padding: 34px 34px 28px;
  z-index: 2;
  min-height: 520px;
  display: flex; flex-direction: column;
}

/* progress dots */
body[data-theme-mode="os2045"] .steps {
  display: flex; align-items: center; gap: 6px; margin-bottom: 18px;
}
body[data-theme-mode="os2045"] .steps .dot {
  width: 28px; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; transition: all 0.25s;
}
body[data-theme-mode="os2045"] .steps .dot.active {
  background: var(--a-amber);
  box-shadow: 0 0 10px rgba(255,184,107,0.5);
}
body[data-theme-mode="os2045"] .steps .dot.done { background: var(--a-ok); }
body[data-theme-mode="os2045"] .steps-lbl {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-4);
  letter-spacing: 0.15em; text-transform: uppercase;
}

body[data-theme-mode="os2045"] .auth-head { margin-bottom: 22px; }
body[data-theme-mode="os2045"] .auth-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-4); text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
body[data-theme-mode="os2045"] .auth-kicker svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body[data-theme-mode="os2045"] .auth-h {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 34px; line-height: 1.1;
  color: var(--ink); letter-spacing: -0.01em;
}
body[data-theme-mode="os2045"] .auth-h b {
  font-style: normal; font-family: 'Inter', sans-serif; font-weight: 500;
}
body[data-theme-mode="os2045"] .auth-sub {
  font-size: 13px; color: var(--ink-3);
  margin-top: 8px; line-height: 1.5;
}

/* user chip */
body[data-theme-mode="os2045"] .auth-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  margin-bottom: 18px;
}
body[data-theme-mode="os2045"] .auth-chip .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, var(--a-amber), var(--a-rose));
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; color: #1a0800;
}
body[data-theme-mode="os2045"] .auth-chip .n { font-size: 13px; color: var(--ink); font-weight: 500; }
body[data-theme-mode="os2045"] .auth-chip .e { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 2px; }
body[data-theme-mode="os2045"] .auth-chip .sw {
  margin-left: auto; font-size: 11px; color: var(--a-amber);
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm);
  transition: background 0.12s;
}
body[data-theme-mode="os2045"] .auth-chip .sw:hover { background: rgba(255,184,107,0.1); }

/* form field */
body[data-theme-mode="os2045"] .field { margin-bottom: 14px; }
body[data-theme-mode="os2045"] .field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--ink-4); text-transform: uppercase;
  margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .input-wrap {
  position: relative;
  display: flex; align-items: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  padding: 0 14px; height: 48px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-theme-mode="os2045"] .input-wrap:focus-within {
  border-color: rgba(255,184,107,0.5);
  box-shadow: 0 0 0 3px rgba(255,184,107,0.1);
}
body[data-theme-mode="os2045"] .input-wrap svg { width: 15px; height: 15px; stroke: var(--ink-4); fill: none; stroke-width: 1.8; flex-shrink: 0; }
body[data-theme-mode="os2045"] .input-wrap input {
  flex: 1; height: 100%;
  background: none; border: 0;
  color: var(--ink); font-size: 14px;
  padding: 0 12px; letter-spacing: -0.005em;
}
body[data-theme-mode="os2045"] .input-wrap input::placeholder { color: var(--ink-4); }
body[data-theme-mode="os2045"] .input-wrap .eye {
  color: var(--ink-4); cursor: pointer; padding: 4px; transition: color 0.12s;
}
body[data-theme-mode="os2045"] .input-wrap .eye:hover { color: var(--ink-2); }

/* remember row */
body[data-theme-mode="os2045"] .auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 18px; font-size: 12px;
}
body[data-theme-mode="os2045"] .auth-row .chk {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-2); cursor: pointer;
}
body[data-theme-mode="os2045"] .auth-row .chk .box {
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1px solid var(--glass-edge);
  background: rgba(0,0,0,0.25);
  display: grid; place-items: center;
  transition: all 0.12s;
}
body[data-theme-mode="os2045"] .auth-row .chk.on .box { background: var(--a-amber); border-color: var(--a-amber); }
body[data-theme-mode="os2045"] .auth-row .chk.on .box svg { display: block; }
body[data-theme-mode="os2045"] .auth-row .chk .box svg {
  width: 10px; height: 10px; stroke: #1a0800; fill: none; stroke-width: 3; display: none;
}
body[data-theme-mode="os2045"] .auth-row a { color: var(--a-amber); text-decoration: none; }
body[data-theme-mode="os2045"] .auth-row a:hover { color: var(--a-amber-2); }

/* CTA */
body[data-theme-mode="os2045"] .btn-primary {
  position: relative;
  width: 100%; height: 50px;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--a-amber), var(--a-amber-2));
  color: #1a0800; font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(255,122,66,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
}
body[data-theme-mode="os2045"] .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255,122,66,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
body[data-theme-mode="os2045"] .btn-primary:active { transform: translateY(0); }
body[data-theme-mode="os2045"] .btn-primary.loading { pointer-events: none; }
body[data-theme-mode="os2045"] .btn-primary.loading span { opacity: 0; }
body[data-theme-mode="os2045"] .btn-primary.loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(26,8,0,0.2);
  border-top-color: #1a0800;
  border-radius: 50%;
  animation: os-spin 0.7s linear infinite;
}

body[data-theme-mode="os2045"] .btn-ghost {
  width: 100%; height: 44px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  color: var(--ink-2);
  font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.15s;
}
body[data-theme-mode="os2045"] .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
body[data-theme-mode="os2045"] .btn-ghost svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

body[data-theme-mode="os2045"] .divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--ink-4);
  letter-spacing: 0.2em; text-transform: uppercase;
}
body[data-theme-mode="os2045"] .divider::before,
body[data-theme-mode="os2045"] .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--glass-edge);
}

/* Step 2 — verification ring */
body[data-theme-mode="os2045"] .ring-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  padding: 14px 0 22px;
}
body[data-theme-mode="os2045"] .ring { position: relative; width: 180px; height: 180px; }
body[data-theme-mode="os2045"] .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
body[data-theme-mode="os2045"] .ring .tr { stroke: rgba(255,255,255,0.08); stroke-width: 4; fill: none; }
body[data-theme-mode="os2045"] .ring .pr {
  stroke: url(#gGrad); stroke-width: 4; fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(255,184,107,0.5));
  transition: stroke-dashoffset 1s linear;
}
body[data-theme-mode="os2045"] .ring-code {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'Instrument Serif', serif; font-style: italic;
  color: var(--ink); text-align: center;
}
body[data-theme-mode="os2045"] .ring-code .nm { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-style: normal; letter-spacing: 0.2em; color: var(--a-amber); text-transform: uppercase; margin-bottom: 2px; }
body[data-theme-mode="os2045"] .ring-code .cd { font-size: 44px; letter-spacing: 0.06em; line-height: 1; }
body[data-theme-mode="os2045"] .ring-code .tt { font-size: 10px; font-family: 'JetBrains Mono', monospace; font-style: normal; letter-spacing: 0.15em; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; }

/* digit inputs */
body[data-theme-mode="os2045"] .digits {
  display: flex; gap: 10px; justify-content: center;
  margin: 6px 0 18px;
}
body[data-theme-mode="os2045"] .digits input {
  width: 52px; height: 58px;
  border-radius: var(--r-lg);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--glass-edge);
  color: var(--ink); font-size: 24px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-theme-mode="os2045"] .digits input:focus {
  border-color: rgba(255,184,107,0.6);
  box-shadow: 0 0 0 3px rgba(255,184,107,0.1);
  outline: none;
}
body[data-theme-mode="os2045"] .digits input.filled {
  background: rgba(255,184,107,0.1);
  border-color: rgba(255,184,107,0.3);
  color: var(--a-amber);
}

body[data-theme-mode="os2045"] .resend {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .resend a { color: var(--a-amber); cursor: pointer; text-decoration: none; }
body[data-theme-mode="os2045"] .resend a:hover { color: var(--a-amber-2); }

body[data-theme-mode="os2045"] .trust {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(95,209,255,0.06);
  border: 1px solid rgba(95,209,255,0.18);
  border-radius: var(--r-lg);
  display: flex; align-items: center; gap: 12px;
}
body[data-theme-mode="os2045"] .trust .i {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: rgba(95,209,255,0.14);
  display: grid; place-items: center; flex-shrink: 0;
}
body[data-theme-mode="os2045"] .trust .i svg { width: 16px; height: 16px; stroke: var(--a-cyan); fill: none; stroke-width: 1.8; }
body[data-theme-mode="os2045"] .trust .t { flex: 1; }
body[data-theme-mode="os2045"] .trust .t .h { font-size: 12.5px; color: var(--ink); font-weight: 500; }
body[data-theme-mode="os2045"] .trust .t .s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
body[data-theme-mode="os2045"] .trust .tog {
  width: 34px; height: 20px; border-radius: 12px;
  background: rgba(255,255,255,0.08);
  position: relative; cursor: pointer;
  transition: background 0.15s;
}
body[data-theme-mode="os2045"] .trust .tog::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3);
  transition: all 0.15s;
}
body[data-theme-mode="os2045"] .trust .tog.on { background: rgba(255,184,107,0.4); }
body[data-theme-mode="os2045"] .trust .tog.on::after { left: 16px; background: var(--a-amber); }

/* Step 3 — launch */
body[data-theme-mode="os2045"] .launch {
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  padding: 30px 0 20px;
  text-align: center;
}
body[data-theme-mode="os2045"] .launch-check {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(95,228,166,0.5), rgba(95,228,166,0.15) 60%, transparent);
  display: grid; place-items: center; position: relative;
  animation: os-orbPulse 2s ease-in-out infinite;
}
body[data-theme-mode="os2045"] .launch-check::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(95,228,166,0.3);
  animation: os-orbRing 2s ease-out infinite;
}
body[data-theme-mode="os2045"] .launch-check svg {
  width: 40px; height: 40px; stroke: var(--a-ok); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-theme-mode="os2045"] .launch-h {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 28px; color: var(--ink);
}
body[data-theme-mode="os2045"] .launch-h b { font-style: normal; font-family: 'Inter', sans-serif; font-weight: 500; }
body[data-theme-mode="os2045"] .launch-sub { font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 340px; }
body[data-theme-mode="os2045"] .launch-bar {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
  position: relative;
}
body[data-theme-mode="os2045"] .launch-bar::after {
  content: ''; position: absolute;
  top: 0; left: 0; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--a-amber), var(--a-amber-2));
  border-radius: 2px;
  animation: os-fillBar 1.8s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* step transitions */
body[data-theme-mode="os2045"] .step {
  flex: 1;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  position: absolute;
  left: 34px; right: 34px;
  top: 60px; bottom: 28px;
}
body[data-theme-mode="os2045"] .step.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  left: auto; right: auto; top: auto; bottom: auto;
}

/* Right panel column */
body[data-theme-mode="os2045"] .right {
  padding-left: 40px;
  display: flex; flex-direction: column;
  gap: 16px;
  align-self: center;
  max-width: 340px;
  margin-left: auto;
}
body[data-theme-mode="os2045"] .panel {
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-2xl);
  padding: 16px 18px;
  position: relative;
}
body[data-theme-mode="os2045"] .p-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-theme-mode="os2045"] .p-ttl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-3); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
body[data-theme-mode="os2045"] .p-ttl .d { width: 6px; height: 6px; border-radius: 50%; background: var(--a-ok); box-shadow: 0 0 8px var(--a-ok); }
body[data-theme-mode="os2045"] .p-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-4); letter-spacing: 0.1em;
}
body[data-theme-mode="os2045"] .p-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
body[data-theme-mode="os2045"] .p-row:last-child { border: 0; }
body[data-theme-mode="os2045"] .p-row .k { color: var(--ink-3); }
body[data-theme-mode="os2045"] .p-row .v { color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
body[data-theme-mode="os2045"] .p-row .v.ok { color: var(--a-ok); }
body[data-theme-mode="os2045"] .p-row .v.warn { color: var(--a-amber); }
body[data-theme-mode="os2045"] .p-event { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.07); }
body[data-theme-mode="os2045"] .p-event:last-child { border: 0; }
body[data-theme-mode="os2045"] .p-event .tm { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.05em; flex-shrink: 0; width: 38px; padding-top: 1px; }
body[data-theme-mode="os2045"] .p-event .tt { flex: 1; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
body[data-theme-mode="os2045"] .p-event .tt b { color: var(--ink); font-weight: 500; }
body[data-theme-mode="os2045"] .p-event .tt .cat { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-4); letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-top: 2px; }

/* ───────────────────────── 9. DESKTOP STAGE ───────────────────────── */
body[data-theme-mode="os2045"] .desktop {
  position: absolute; inset: 0 0 84px 0;
  z-index: var(--z-desktop);
}

/* ───────────────────────── 10. QUICKBAR (right vertical) ───────────────────────── */
body[data-theme-mode="os2045"] .quickbar {
  position: absolute;
  top: 50%; right: 22px;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  padding: 10px 8px; gap: 8px;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-2xl);
  box-shadow: var(--glass-shadow);
  z-index: var(--z-quickbar);
}
body[data-theme-mode="os2045"] .qb-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ink-2);
  border-radius: var(--r-md);
  transition: all 0.2s;
  position: relative;
}
body[data-theme-mode="os2045"] .qb-btn:hover { background: var(--glass-hi); color: var(--ink); }
body[data-theme-mode="os2045"] .qb-btn.on    { color: var(--a-amber); background: rgba(255,184,107,0.1); }
body[data-theme-mode="os2045"] .qb-btn svg   { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
body[data-theme-mode="os2045"] .qb-sep { height: 1px; background: var(--glass-edge); margin: 2px 4px; }

/* ───────────────────────── 11. DESKTOP ICONS ───────────────────────── */
body[data-theme-mode="os2045"] .icons { position: absolute; inset: 0; }
body[data-theme-mode="os2045"] .icon {
  position: absolute;
  width: 82px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 6px;
  border-radius: var(--r-md);
  cursor: grab;
  user-select: none;
  transition: background 0.15s, transform 0.2s;
}
body[data-theme-mode="os2045"] .icon:hover { background: rgba(255,255,255,0.04); }
body[data-theme-mode="os2045"] .icon.selected {
  background: rgba(255,184,107,0.1);
  outline: 1px solid rgba(255,184,107,0.35);
}
body[data-theme-mode="os2045"] .icon.dragging { opacity: 0.75; z-index: 20; cursor: grabbing; }
body[data-theme-mode="os2045"] .icon.dragging .tile { transform: scale(1.08) rotate(-2deg); }
body[data-theme-mode="os2045"] .icon .tile {
  width: 52px; height: 52px;
  border-radius: var(--r-xl);
  display: grid; place-items: center;
  position: relative;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
body[data-theme-mode="os2045"] .icon:hover .tile { transform: translateY(-3px) scale(1.06); }
body[data-theme-mode="os2045"] .icon .tile svg { width: 26px; height: 26px; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme-mode="os2045"] .icon .lbl {
  font-size: 11px; color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  text-align: center; line-height: 1.2;
  max-width: 80px; letter-spacing: -0.005em;
}
body[data-theme-mode="os2045"] .icon .badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--a-err);
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  color: #fff;
  box-shadow: 0 0 0 2px var(--bg-0);
}

/* selection marquee */
body[data-theme-mode="os2045"] .selection-hint {
  position: absolute;
  border: 1px dashed rgba(255,184,107,0.5);
  background: rgba(255,184,107,0.06);
  pointer-events: none;
  z-index: 50;
}

/* ───────────────────────── 12. TILES (neutral glass, accent identifier) ─────────────────────────
 * Refactored 2026-04: alle .t-* Klassen nutzen denselben subtilen Glass-Background.
 * Die Identität der App trägt die Icon-Farbe (currentColor) und ein gedämpfter
 * 3px-Akzent-Stripe an der linken Kante (via inset box-shadow, damit border-radius
 * sauber bleibt). Klassen-Namen sind unverändert — kein JS-Refactor nötig.
 */
body[data-theme-mode="os2045"] [class*="t-"]:where(.tile, .dot) {
  /* Fallback-Block ist unten — diese Regel zielt nur ab, wenn .tile/.dot kombiniert sind */
}
/* Restored saturated tile gradients per app — user preferred the original
   colour identity over the neutral glass version. */
body[data-theme-mode="os2045"] .t-deck    { background: linear-gradient(145deg, #ff9a5a, #ff6a42); color:#2a0f00; }
body[data-theme-mode="os2045"] .t-rech    { background: linear-gradient(145deg, #ffd76b, #ffa838); color:#2b1800; }
body[data-theme-mode="os2045"] .t-euer    { background: linear-gradient(145deg, #d4ff6b, #88d13f); color:#0f1f00; }
body[data-theme-mode="os2045"] .t-briefe  { background: linear-gradient(145deg, #ffdfb0, #ffb978); color:#2a1500; }
body[data-theme-mode="os2045"] .t-files   { background: linear-gradient(145deg, #6b9dff, #3a6aff); color:#00122e; }
body[data-theme-mode="os2045"] .t-pm2     { background: linear-gradient(145deg, #7bffb8, #2fd48c); color:#002616; }
body[data-theme-mode="os2045"] .t-ssh     { background: linear-gradient(145deg, #3a3e55, #1a1d2c); color:#a5b1d5; border:1px solid rgba(255,255,255,0.12); }
body[data-theme-mode="os2045"] .t-guard   { background: linear-gradient(145deg, #ff6b95, #c42a5c); color:#31000e; }
body[data-theme-mode="os2045"] .t-chat    { background: linear-gradient(145deg, #b08bff, #7c52e5); color:#160030; }
body[data-theme-mode="os2045"] .t-proj    { background: linear-gradient(145deg, #5fd1ff, #2599d4); color:#001828; }
body[data-theme-mode="os2045"] .t-flutter { background: linear-gradient(145deg, #4fc3f7, #2196f3); color:#001628; }
body[data-theme-mode="os2045"] .t-node    { background: linear-gradient(145deg, #a4df6b, #5ca93a); color:#0c1a00; }
body[data-theme-mode="os2045"] .t-host    { background: linear-gradient(145deg, #9aa4c2, #616b8f); color:#0d1022; }
body[data-theme-mode="os2045"] .t-vault   { background: linear-gradient(145deg, #ffc145, #c7841a); color:#2a1300; }
body[data-theme-mode="os2045"] .t-term    { background: linear-gradient(145deg, #2fd48c, #1a8f5a); color:#002616; }
body[data-theme-mode="os2045"] .t-settings{ background: linear-gradient(145deg, #c9d1eb, #6e7896); color:#0c0f1d; }
body[data-theme-mode="os2045"] .t-loop    { background: linear-gradient(145deg, #ff7eb3, #8a5bff); color:#10002c; }
body[data-theme-mode="os2045"] .t-bsc     { background: linear-gradient(145deg, #2bd5b8, #0c8a79); color:#002b24; }
body[data-theme-mode="os2045"] [class*="t-"]:where(.tile, .dot) {
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s;
}
/* Hover-State: einheitlich, nutzt theme accent. Greift sowohl auf Desktop-Icons
 * (.icon:hover .tile) als auch auf Start-Menü (.sm-tile:hover .tile). */
body[data-theme-mode="os2045"] .icon:hover .tile[class*="t-"],
body[data-theme-mode="os2045"] .sm-tile:hover .tile[class*="t-"],
body[data-theme-mode="os2045"] .sm-r:hover .dot[class*="t-"] {
  background: rgba(255,255,255,0.08);
  border-color: var(--theme-accent, #5fd1ff);
}
/* Active/Focused: zarter Akzent-Tint */
body[data-theme-mode="os2045"] .icon.active .tile[class*="t-"],
body[data-theme-mode="os2045"] .icon:focus-visible .tile[class*="t-"],
body[data-theme-mode="os2045"] .sm-tile.active .tile[class*="t-"],
body[data-theme-mode="os2045"] .sm-tile:focus-visible .tile[class*="t-"] {
  background: rgba(95,209,255,0.10);
  border-color: rgba(95,209,255,0.45);
}

/* Gedämpfter Identifier-Stripe pro Klasse als CSS-Variable. Wird unten in
 * einer einzigen box-shadow-Regel mit den Standard-Drop-Shadows kombiniert,
 * damit wir die bestehende Tiefe (Drop + Inset-Highlights) nicht überschreiben. */
body[data-theme-mode="os2045"] .t-deck    { --tile-stripe: rgba(255,138,90,0.55); }
body[data-theme-mode="os2045"] .t-rech    { --tile-stripe: rgba(255,184,87,0.55); }
body[data-theme-mode="os2045"] .t-euer    { --tile-stripe: rgba(170,208,99,0.55); }
body[data-theme-mode="os2045"] .t-briefe  { --tile-stripe: rgba(255,200,150,0.50); }
body[data-theme-mode="os2045"] .t-files   { --tile-stripe: rgba(110,150,230,0.55); }
body[data-theme-mode="os2045"] .t-pm2     { --tile-stripe: rgba(110,210,160,0.55); }
body[data-theme-mode="os2045"] .t-ssh     { --tile-stripe: rgba(150,160,190,0.45); }
body[data-theme-mode="os2045"] .t-guard   { --tile-stripe: rgba(220,110,140,0.55); }
body[data-theme-mode="os2045"] .t-chat    { --tile-stripe: rgba(165,140,220,0.55); }
body[data-theme-mode="os2045"] .t-proj    { --tile-stripe: rgba(95,180,220,0.55); }
body[data-theme-mode="os2045"] .t-flutter { --tile-stripe: rgba(95,180,230,0.55); }
body[data-theme-mode="os2045"] .t-node    { --tile-stripe: rgba(150,200,110,0.55); }
body[data-theme-mode="os2045"] .t-host    { --tile-stripe: rgba(150,160,190,0.50); }
body[data-theme-mode="os2045"] .t-vault   { --tile-stripe: rgba(220,170,80,0.55); }
body[data-theme-mode="os2045"] .t-term    { --tile-stripe: rgba(123,255,184,0.55); }
body[data-theme-mode="os2045"] .t-settings{ --tile-stripe: rgba(170,180,210,0.50); }
body[data-theme-mode="os2045"] .t-loop    { --tile-stripe: rgba(220,140,200,0.55); }
body[data-theme-mode="os2045"] .t-bsc     { --tile-stripe: rgba(70,200,180,0.55); }

/* Stripe + Drop-Shadow für Desktop-Icons (52px tiles) */
body[data-theme-mode="os2045"] .icon .tile[class*="t-"] {
  box-shadow:
    inset 3px 0 0 var(--tile-stripe, transparent),
    0 10px 24px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}
/* Stripe + Drop-Shadow für Start-Menü-Tiles (44px) */
body[data-theme-mode="os2045"] .sm-tile .tile[class*="t-"] {
  box-shadow:
    inset 3px 0 0 var(--tile-stripe, transparent),
    0 6px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
/* Stripe für die kleinen Recent-Dots (28px) — schmaler 2px-Stripe */
body[data-theme-mode="os2045"] .sm-r .dot[class*="t-"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 2px 0 0 var(--tile-stripe, transparent);
  color: var(--ink);
}

/* ───────────────────────── 13. WIDGETS ───────────────────────── */
body[data-theme-mode="os2045"] .widget {
  position: absolute;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  padding: 16px 18px;
  color: var(--ink);
}
body[data-theme-mode="os2045"] .w-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
body[data-theme-mode="os2045"] .w-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-3); text-transform: uppercase;
}
body[data-theme-mode="os2045"] .w-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-ok); box-shadow: 0 0 8px var(--a-ok);
  margin-right: 6px; vertical-align: middle;
}

/* Auth widget */
body[data-theme-mode="os2045"] .w-guardian { top: 22px; left: 22px; width: 280px; }
body[data-theme-mode="os2045"] .g-ring { position: relative; width: 110px; height: 110px; margin: 8px auto; }
body[data-theme-mode="os2045"] .g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
body[data-theme-mode="os2045"] .g-track { stroke: rgba(255,255,255,0.08); stroke-width: 4; fill: none; }
body[data-theme-mode="os2045"] .g-fill {
  stroke: url(#gGrad); stroke-width: 4; fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,107,149,0.6));
}
body[data-theme-mode="os2045"] .g-code {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 34px; letter-spacing: 0.04em; color: var(--ink);
}
body[data-theme-mode="os2045"] .g-meta {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 10px; margin-top: 10px; font-size: 11px;
}
body[data-theme-mode="os2045"] .g-meta .k { color: var(--ink-3); }
body[data-theme-mode="os2045"] .g-meta .v { color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
body[data-theme-mode="os2045"] .g-meta .v.ok { color: var(--a-ok); }

/* Revenue widget */
body[data-theme-mode="os2045"] .w-rev { bottom: 24px; left: 22px; width: 300px; }
body[data-theme-mode="os2045"] .rev-big {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 42px; line-height: 1;
  margin: 4px 0 2px; color: var(--ink);
}
body[data-theme-mode="os2045"] .rev-big small {
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: 15px; color: var(--a-amber); font-weight: 500;
  margin-left: 4px; vertical-align: top;
}
body[data-theme-mode="os2045"] .rev-delta {
  font-size: 11px; color: var(--a-ok);
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 12px;
}
body[data-theme-mode="os2045"] .rev-chart {
  display: flex; align-items: flex-end;
  gap: 3px; height: 48px; margin-top: 4px;
}
body[data-theme-mode="os2045"] .rev-chart span {
  flex: 1;
  background: linear-gradient(180deg, var(--a-amber), var(--a-amber-2));
  border-radius: 3px 3px 1px 1px;
  min-height: 4px;
  box-shadow: 0 0 8px rgba(255,184,107,0.3);
  opacity: 0.9;
}
body[data-theme-mode="os2045"] .rev-chart span.now {
  background: linear-gradient(180deg, #fff, var(--a-amber));
  opacity: 1;
  box-shadow: 0 0 14px rgba(255,255,255,0.5);
}
body[data-theme-mode="os2045"] .rev-legend {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--ink-4);
  letter-spacing: 0.1em; margin-top: 6px;
}

/* PM2 widget */
body[data-theme-mode="os2045"] .w-pm { top: 22px; right: 22px; width: 300px; }
body[data-theme-mode="os2045"] .w-pm.shift-left { right: 102px; }
body[data-theme-mode="os2045"] .pm-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 7px 0; font-size: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
body[data-theme-mode="os2045"] .pm-row:last-child { border: 0; }
body[data-theme-mode="os2045"] .pm-dot { width: 8px; height: 8px; border-radius: 50%; }
body[data-theme-mode="os2045"] .pm-dot.ok { background: var(--a-ok); box-shadow: 0 0 8px var(--a-ok); }
body[data-theme-mode="os2045"] .pm-dot.w  { background: var(--a-warn); box-shadow: 0 0 8px var(--a-warn); }
body[data-theme-mode="os2045"] .pm-dot.e  { background: var(--a-err); box-shadow: 0 0 8px var(--a-err); }
body[data-theme-mode="os2045"] .pm-name { color: var(--ink); }
body[data-theme-mode="os2045"] .pm-cpu  { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); }
body[data-theme-mode="os2045"] .pm-cpu b { color: var(--ink); font-weight: 500; }
body[data-theme-mode="os2045"] .pm-spark { width: 40px; height: 16px; display: flex; align-items: flex-end; gap: 1px; }
body[data-theme-mode="os2045"] .pm-spark span { flex: 1; background: var(--a-mint); opacity: 0.8; border-radius: 1px; }

/* Copilot suggest widget */
body[data-theme-mode="os2045"] .w-suggest { bottom: 24px; right: 22px; width: 340px; }
body[data-theme-mode="os2045"] .w-suggest::after {
  content: '';
  position: absolute;
  top: -1px; left: 22px; right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--a-amber), transparent);
}
body[data-theme-mode="os2045"] .sug-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--a-amber); text-transform: uppercase;
  margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .sug-kicker svg { width: 12px; height: 12px; fill: var(--a-amber); }
body[data-theme-mode="os2045"] .sug-text {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; font-style: italic;
  line-height: 1.25; margin-bottom: 12px;
  color: var(--ink);
}
body[data-theme-mode="os2045"] .sug-text b {
  font-style: normal; font-family: 'Inter', sans-serif;
  background: linear-gradient(120deg, var(--a-amber), var(--a-rose));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 500;
}
body[data-theme-mode="os2045"] .sug-actions { display: flex; gap: 8px; }
body[data-theme-mode="os2045"] .sug-btn {
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-size: 11.5px; font-weight: 500;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
body[data-theme-mode="os2045"] .sug-btn.primary {
  background: linear-gradient(145deg, var(--a-amber), var(--a-amber-2));
  color: #1a0800;
  box-shadow: 0 6px 16px rgba(255,122,66,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
body[data-theme-mode="os2045"] .sug-btn.primary:hover { transform: translateY(-1px); }
body[data-theme-mode="os2045"] .sug-btn.ghost {
  background: var(--glass-hi);
  color: var(--ink-2);
  border: 1px solid var(--glass-edge);
}
body[data-theme-mode="os2045"] .sug-btn.ghost:hover { color: var(--ink); }

/* ───────────────────────── 14. WINDOW (App) ───────────────────────── */
body[data-theme-mode="os2045"] .win {
  position: absolute;
  width: 720px; height: 460px;
  background: var(--glass-2);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-2xl);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  z-index: var(--z-window);
  transition: opacity 0.18s, transform 0.22s cubic-bezier(0.2,0.9,0.2,1);
}
body[data-theme-mode="os2045"] .win.dragging { transition: none; user-select: none; }
body[data-theme-mode="os2045"] .win.focused {
  z-index: var(--z-quickbar);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,184,107,0.18),
    0 2px 0 rgba(255,255,255,0.06) inset;
}
body[data-theme-mode="os2045"] .win.minimized {
  opacity: 0;
  transform: translateY(120px) scale(0.6);
  pointer-events: none;
}
body[data-theme-mode="os2045"] .win.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 68px) !important;
  border-radius: 0;
}

body[data-theme-mode="os2045"] .win-chrome {
  height: 40px;
  display: flex; align-items: center;
  padding: 0 14px; gap: 12px;
  border-bottom: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  position: relative;
  cursor: grab;
  user-select: none;
}
body[data-theme-mode="os2045"] .win.dragging .win-chrome { cursor: grabbing; }
body[data-theme-mode="os2045"] .win-lights { display: flex; gap: 6px; }
body[data-theme-mode="os2045"] .win-lights span {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-4);
  cursor: pointer; position: relative;
  transition: all 0.15s;
}
body[data-theme-mode="os2045"] .win-lights span.close { background: #ff6b6b; }
body[data-theme-mode="os2045"] .win-lights span.min   { background: #ffcb5f; }
body[data-theme-mode="os2045"] .win-lights span.max   { background: #5fe4a6; }
body[data-theme-mode="os2045"] .win-lights span:hover::after {
  content: '';
  position: absolute; inset: 2px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
}
body[data-theme-mode="os2045"] .win-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em;
  flex: 1; text-align: center;
}
body[data-theme-mode="os2045"] .win-title b { color: var(--ink); font-weight: 500; margin-right: 6px; }
body[data-theme-mode="os2045"] .win-tools { display: flex; gap: 4px; }
body[data-theme-mode="os2045"] .win-tools button {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  display: grid; place-items: center;
}
body[data-theme-mode="os2045"] .win-tools button:hover { background: var(--glass-hi); color: var(--ink); }
body[data-theme-mode="os2045"] .win-tools svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }

body[data-theme-mode="os2045"] .win-body {
  flex: 1;
  display: grid; grid-template-columns: 180px 1fr;
  overflow: hidden;
}

/* Win sidebar */
body[data-theme-mode="os2045"] .ws {
  border-right: 1px solid var(--glass-edge);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,0.15);
}
body[data-theme-mode="os2045"] .ws-grp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em;
  color: var(--ink-4); text-transform: uppercase;
  padding: 8px 10px 4px;
}
body[data-theme-mode="os2045"] .ws-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
body[data-theme-mode="os2045"] .ws-item:hover { background: var(--glass-hi); color: var(--ink); }
body[data-theme-mode="os2045"] .ws-item.active {
  background: linear-gradient(90deg, rgba(255,184,107,0.14), rgba(255,184,107,0.04));
  color: var(--ink);
}
body[data-theme-mode="os2045"] .ws-item.active::before {
  content: '';
  display: inline-block;
  width: 3px; height: 16px;
  background: var(--a-amber);
  border-radius: 2px;
  margin-right: -3px;
}
body[data-theme-mode="os2045"] .ws-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
body[data-theme-mode="os2045"] .ws-item .count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-4);
}
body[data-theme-mode="os2045"] .ws-item.active .count { color: var(--a-amber); }

/* Win main (default: Rechnungen-style list) */
body[data-theme-mode="os2045"] .wm { padding: 18px 22px; overflow-y: auto; }
body[data-theme-mode="os2045"] .wm-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
body[data-theme-mode="os2045"] .wm-h {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 30px; line-height: 1; color: var(--ink);
}
body[data-theme-mode="os2045"] .wm-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-4); text-transform: uppercase;
}
body[data-theme-mode="os2045"] .wm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 16px;
}
body[data-theme-mode="os2045"] .wm-stat {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
}
body[data-theme-mode="os2045"] .wm-stat .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--ink-4);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 6px;
}
body[data-theme-mode="os2045"] .wm-stat .val {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 24px; line-height: 1;
}
body[data-theme-mode="os2045"] .wm-stat .val.ok   { color: var(--a-ok); }
body[data-theme-mode="os2045"] .wm-stat .val.warn { color: var(--a-warn); }
body[data-theme-mode="os2045"] .wm-stat .delta { font-size: 10px; color: var(--ink-3); margin-top: 4px; }

body[data-theme-mode="os2045"] .wm-list { margin-top: 4px; }
body[data-theme-mode="os2045"] .wm-row {
  display: grid;
  grid-template-columns: 70px 1fr 90px 80px 22px;
  gap: 12px;
  padding: 10px 6px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  border-radius: var(--r-sm);
  transition: background 0.12s;
  cursor: pointer;
}
body[data-theme-mode="os2045"] .wm-row:hover { background: var(--glass-hi); }
body[data-theme-mode="os2045"] .wm-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-4); letter-spacing: 0.1em; }
body[data-theme-mode="os2045"] .wm-cust { color: var(--ink); }
body[data-theme-mode="os2045"] .wm-cust small { color: var(--ink-3); display: block; font-size: 10px; margin-top: 2px; }
body[data-theme-mode="os2045"] .wm-amt { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; color: var(--ink); font-weight: 500; }
body[data-theme-mode="os2045"] .wm-st {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 3px 6px; border-radius: var(--r-xs);
}
body[data-theme-mode="os2045"] .wm-st.paid { color: var(--a-ok);   background: rgba(95,228,166,0.1); }
body[data-theme-mode="os2045"] .wm-st.open { color: var(--a-warn); background: rgba(255,203,95,0.12); }
body[data-theme-mode="os2045"] .wm-st.late { color: var(--a-err);  background: rgba(255,107,107,0.12); }
body[data-theme-mode="os2045"] .wm-arrow svg { width: 12px; height: 12px; stroke: var(--ink-4); fill: none; stroke-width: 2; }

/* ───────────────────────── 15. TASKBAR ───────────────────────── */
body[data-theme-mode="os2045"] .taskbar {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  height: 54px;
  display: flex; align-items: center;
  padding: 6px 10px; gap: 4px;
  background: var(--glass);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  z-index: var(--z-taskbar);
}
body[data-theme-mode="os2045"] .tb-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  transition: all 0.2s;
  color: var(--ink-2);
}
body[data-theme-mode="os2045"] .tb-btn:hover {
  background: var(--glass-hi);
  color: var(--ink);
  transform: translateY(-2px);
}
body[data-theme-mode="os2045"] .tb-btn.running::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 3px;
  background: var(--a-amber);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--a-amber);
}
body[data-theme-mode="os2045"] .tb-btn.active::after {
  width: 20px;
  box-shadow: 0 0 8px var(--a-amber);
}
body[data-theme-mode="os2045"] .tb-btn .ti {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
}
body[data-theme-mode="os2045"] .tb-btn .ti svg {
  width: 18px; height: 18px; stroke-width: 1.6;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

body[data-theme-mode="os2045"] .tb-start {
  width: 48px; height: 48px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--theme-accent, #5fd1ff);
  display: grid; place-items: center;
  margin-right: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.2s, background 0.15s, border-color 0.15s;
  cursor: pointer;
}
body[data-theme-mode="os2045"] .tb-start:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  border-color: color-mix(in srgb, var(--theme-accent, #5fd1ff) 50%, transparent);
}
body[data-theme-mode="os2045"] .tb-start svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }

body[data-theme-mode="os2045"] .tb-sep { width: 1px; height: 28px; background: var(--glass-edge); margin: 0 6px; }

body[data-theme-mode="os2045"] .tb-search {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  background: var(--glass-hi);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  color: var(--ink-3);
  font-size: 12px;
  min-width: 200px;
  cursor: text;
}
body[data-theme-mode="os2045"] .tb-search:hover { color: var(--ink-2); }
body[data-theme-mode="os2045"] .tb-search svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body[data-theme-mode="os2045"] .tb-search .kbd {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; padding: 1px 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px; color: var(--ink-3);
}

/* System tray */
body[data-theme-mode="os2045"] .tray {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 4px;
  height: 42px;
  border-radius: var(--r-lg);
  background: var(--glass-hi);
  border: 1px solid var(--glass-edge);
}
body[data-theme-mode="os2045"] .tray .ti {
  padding: 0 6px; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
body[data-theme-mode="os2045"] .tray .ti svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body[data-theme-mode="os2045"] .tray .ti.amber { color: var(--a-amber); }
body[data-theme-mode="os2045"] .tray .clock {
  padding: 0 10px 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink);
  line-height: 1.2; text-align: right;
}
body[data-theme-mode="os2045"] .tray .clock small {
  display: block; font-size: 9px;
  color: var(--ink-3); letter-spacing: 0.1em;
}
body[data-theme-mode="os2045"] .tray .tsep { width: 1px; height: 22px; background: var(--glass-edge); }

/* AI Orb */
body[data-theme-mode="os2045"] .tray-ai {
  width: 42px; height: 42px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(255,184,107,0.5), rgba(176,139,255,0.4) 55%, rgba(95,157,255,0.3));
  cursor: pointer;
  margin-left: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 14px rgba(255,184,107,0.25);
}
body[data-theme-mode="os2045"] .tray-ai::after {
  content: '';
  position: absolute; inset: 6px;
  background: radial-gradient(circle, rgba(255,255,255,0.9), transparent 55%);
  border-radius: 50%;
  animation: os-pulseOrb 3s ease-in-out infinite;
  opacity: 0.7;
}

/* ───────────────────────── 16. START MENU ───────────────────────── */
body[data-theme-mode="os2045"] .start-menu {
  position: absolute;
  bottom: 84px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 680px;
  background: var(--glass-2-strong);
  backdrop-filter: blur(50px) saturate(160%);
  -webkit-backdrop-filter: blur(50px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-3xl);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  padding: 22px 24px;
  z-index: var(--z-startmenu);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
}
body[data-theme-mode="os2045"] .start-menu.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
body[data-theme-mode="os2045"] .sm-greet {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 26px; line-height: 1.1;
  margin-bottom: 4px;
}
body[data-theme-mode="os2045"] .sm-greet b {
  font-style: normal; font-family: 'Inter', sans-serif;
  font-weight: 500; font-size: 16px;
  color: var(--ink-3); letter-spacing: 0.15em;
  text-transform: uppercase; display: block;
  margin-bottom: 6px;
}
body[data-theme-mode="os2045"] .sm-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
body[data-theme-mode="os2045"] .sm-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  color: var(--ink-3); font-size: 13px;
}
body[data-theme-mode="os2045"] .sm-search svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body[data-theme-mode="os2045"] .sm-sec {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--ink-4); text-transform: uppercase;
  margin: 4px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
body[data-theme-mode="os2045"] .sm-sec::after {
  content: ''; flex: 1; height: 1px; background: var(--glass-edge);
}
body[data-theme-mode="os2045"] .sm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-bottom: 20px;
}
body[data-theme-mode="os2045"] .sm-tile {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 12px 6px;
  border-radius: var(--r-lg);
  transition: background 0.12s;
  cursor: pointer;
}
body[data-theme-mode="os2045"] .sm-tile:hover { background: var(--glass-hi); }
body[data-theme-mode="os2045"] .sm-tile .tile {
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
body[data-theme-mode="os2045"] .sm-tile .tile svg { width: 22px; height: 22px; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme-mode="os2045"] .sm-tile .lbl {
  font-size: 11px; color: var(--ink-2);
  text-align: center; letter-spacing: -0.005em;
}
body[data-theme-mode="os2045"] .sm-recent {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
body[data-theme-mode="os2045"] .sm-r {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.1s;
}
body[data-theme-mode="os2045"] .sm-r:hover { background: var(--glass-hi); }
body[data-theme-mode="os2045"] .sm-r .dot {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body[data-theme-mode="os2045"] .sm-r .dot svg { width: 13px; height: 13px; stroke-width: 1.8; fill: none; }
body[data-theme-mode="os2045"] .sm-r .txt { flex: 1; min-width: 0; }
body[data-theme-mode="os2045"] .sm-r .tl { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-theme-mode="os2045"] .sm-r .ts { font-size: 10px; color: var(--ink-4); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; }
body[data-theme-mode="os2045"] .sm-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--glass-edge);
  display: flex; align-items: center; gap: 10px;
}
body[data-theme-mode="os2045"] .sm-user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.1s;
}
body[data-theme-mode="os2045"] .sm-user:hover { background: var(--glass-hi); }
body[data-theme-mode="os2045"] .sm-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg, var(--a-amber), var(--a-rose));
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #1a0800;
}
body[data-theme-mode="os2045"] .sm-user .n { font-size: 12px; color: var(--ink); }
body[data-theme-mode="os2045"] .sm-user .r { font-size: 10px; color: var(--ink-4); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; }
body[data-theme-mode="os2045"] .sm-power {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: var(--ink-3);
}
body[data-theme-mode="os2045"] .sm-power:hover { background: var(--glass-hi); color: var(--ink); }
body[data-theme-mode="os2045"] .sm-power svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ───────────────────────── 17. CONTEXT MENU ───────────────────────── */
body[data-theme-mode="os2045"] .ctx {
  position: absolute;
  width: 220px;
  background: var(--glass-2-strong);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
  padding: 6px;
  z-index: var(--z-ctx);
}
body[data-theme-mode="os2045"] .ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 12px; color: var(--ink);
  cursor: pointer;
}
body[data-theme-mode="os2045"] .ctx-item:hover { background: rgba(255,184,107,0.15); }
body[data-theme-mode="os2045"] .ctx-item.hi    { background: rgba(255,184,107,0.18); }
body[data-theme-mode="os2045"] .ctx-item svg {
  width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6;
}
body[data-theme-mode="os2045"] .ctx-item .kb {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-4);
  letter-spacing: 0.05em;
}
body[data-theme-mode="os2045"] .ctx-sep { height: 1px; background: var(--glass-edge); margin: 4px 6px; }

/* ───────────────────────── 18. TOAST ───────────────────────── */
body[data-theme-mode="os2045"] .toast {
  position: absolute;
  top: 22px; right: 116px;
  width: 320px;
  background: var(--glass-2);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  padding: 12px 14px;
  display: flex; gap: 12px;
  box-shadow: var(--glass-shadow);
  z-index: var(--z-ctx);
}
body[data-theme-mode="os2045"] .toast .ti {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--a-mint), #2fd48c);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body[data-theme-mode="os2045"] .toast .ti svg { width: 18px; height: 18px; stroke: #002616; fill: none; stroke-width: 2; }
body[data-theme-mode="os2045"] .toast .tt { flex: 1; }
body[data-theme-mode="os2045"] .toast .tt .n { font-size: 12px; color: var(--ink); font-weight: 500; }
body[data-theme-mode="os2045"] .toast .tt .d { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
body[data-theme-mode="os2045"] .toast .tt .app {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--ink-4);
  letter-spacing: 0.15em; margin-top: 6px; text-transform: uppercase;
}

/* ───────────────────────── 19. ANIMATIONS ───────────────────────── */
@keyframes os-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to   { transform: translate(4%, 2%) scale(1.05); }
}
@keyframes os-spin { to { transform: rotate(360deg); } }
@keyframes os-fillBar { to { width: 100%; } }
@keyframes os-orbPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes os-orbRing {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes os-pulseOrb {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50%      { transform: scale(1.1); opacity: 0.9; }
}

/* ───────────────────────── 20. REDUCED MOTION ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-theme-mode="os2045"] *,
  body[data-theme-mode="os2045"] *::before,
  body[data-theme-mode="os2045"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ───────────────────────── 21. MOBILE SHELL FALLBACK ───────────────────────── */
/* Below 900px viewport-width the fixed 1440x900 stage with transform: scale()
   becomes unusable. Replace it with a single-column, top-to-bottom flow. The
   visual identity (glass surfaces, accents, fonts) is preserved; layout
   collapses to a comfortable mobile shell. Taskbar moves to bottom (sticky).
   This is intentionally minimal — full-fidelity mobile work belongs in
   Phase 2. */
@media (max-width: 900px) {
  body[data-theme-mode="os2045"] {
    overflow: auto;
    user-select: text;
  }
  body[data-theme-mode="os2045"] .os-stage {
    position: static;
    width: 100%;
    height: auto;
    min-height: 100vh;
    transform: none !important;
    top: auto;
    left: auto;
    overflow: visible;
    padding-bottom: 64px; /* reserve space for fixed bottom taskbar */
  }
  body[data-theme-mode="os2045"] .topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(5,7,12,0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
  }
  body[data-theme-mode="os2045"] .main {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 18px;
    padding: 18px 14px;
  }
  body[data-theme-mode="os2045"] .hero,
  body[data-theme-mode="os2045"] .auth,
  body[data-theme-mode="os2045"] .right {
    width: 100%;
    max-width: 100%;
    position: static;
    transform: none !important;
  }
  body[data-theme-mode="os2045"] .auth {
    padding: 18px;
  }
  body[data-theme-mode="os2045"] .hero-time {
    font-size: 56px;
  }
  body[data-theme-mode="os2045"] .footer {
    position: static;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    text-align: center;
    justify-content: center;
  }
  body[data-theme-mode="os2045"] .taskbar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 100;
  }
  body[data-theme-mode="os2045"] .desktop-grid,
  body[data-theme-mode="os2045"] .desktop {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    padding: 14px;
  }
  body[data-theme-mode="os2045"] .scan {
    display: none;
  }
}

/* ───────────────────────── 22. LOGIN SCREEN VISIBILITY SWITCH ───────────────────────── */
/* Default: the OS 2045 login container is hidden in any theme except os2045. */
#loginScreenOs2045 {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 16;
  background: var(--bg-0, #05070c);
}
/* When OS 2045 is active AND the legacy loginScreen has the .active class,
   show the os2045 login full-screen and hide the matrix variant. */
body[data-theme-mode="os2045"] #loginScreen.active {
  display: none !important;
}
body[data-theme-mode="os2045"] #loginScreenOs2045.active {
  display: block;
}
/* Hotfix-2: once the user is logged in, force-hide the OS-2045 login surface
   even if the .active class was not removed in time (e.g. observer race in
   performGuestLogin). The desktop section sits at z-index 80 above this, but
   keeping the login mounted underneath stole keyboard focus on some browsers. */
body[data-theme-mode="os2045"].logged-in #loginScreenOs2045 {
  display: none !important;
}
/* Hotfix-8: hide legacy taskbar in os2045 — its own taskbar is .os-taskbar
   inserted by taskbar-os2045.js. Without this rule the legacy .wm-taskbar
   stays visible after login and overlaps the os2045 desktop. */
body[data-theme-mode="os2045"] .wm-taskbar,
body[data-theme-mode="os2045"] #wmTaskbar {
  display: none !important;
}
/* Hide legacy legal footer in os2045 — the lockscreen has its own Impressum/
   Datenschutz nav; without this rule the legacy footer overlaps it. */
body[data-theme-mode="os2045"] .legal-footer {
  display: none !important;
}
/* Status / error / link styles for the os2045 login form (light footprint) */
body[data-theme-mode="os2045"] .os2045-status {
  font-size: 12px; color: var(--ink-3); min-height: 16px;
  margin: 6px 0 4px;
}
body[data-theme-mode="os2045"] .os2045-error {
  font-size: 12px; color: var(--a-err); min-height: 16px;
  margin: 4px 0 8px; display: none;
}
body[data-theme-mode="os2045"] .os2045-error:not(:empty) { display: block; }
body[data-theme-mode="os2045"] .os2045-links {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 12px; font-size: 12px;
}
body[data-theme-mode="os2045"] .os2045-links .login-link-btn {
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
  font-size: 12px; padding: 4px 8px;
}
body[data-theme-mode="os2045"] .os2045-links .login-link-btn:hover {
  color: var(--a-amber);
}

/* Step-dot variant rendered when a step is not applicable for the current
   flow. The dot stays in the layout for visual continuity but is muted so it
   does not promise progress that won't happen. */
body[data-theme-mode="os2045"] .steps .dot.skipped {
  background: rgba(255,255,255,0.04);
  opacity: 0.45;
  box-shadow: none;
}

/* ───────────────────────── 23. LOGIN MOBILE FIX (hotfix-1) ─────────────────────────
   The shared mobile fallback above (section 21) collapses the login stage to
   a single column, but on tall narrow phones the auth card still grows past
   the viewport height — pushing the primary "Weiter / LOGIN / VERIFY" button
   off-screen, especially when the soft keyboard opens.

   Strategy:
     1. #loginScreenOs2045 itself becomes the scroll container with dynamic
        viewport units (100dvh) so iOS Safari keyboard collapses are handled.
     2. The auth card lifts above the decorative .right panels and renders
        first; min-height is removed (was 520px) so it never overflows.
     3. The submit button uses position: sticky bottom so it stays reachable
        even when the form scrolls. A safe-area inset keeps it clear of the
        iOS home indicator.
     4. Touch targets stay ≥ 48px (.btn-primary already 50px, .input-wrap
        48px). We bump .login-link-btn to 44px tap area for HIG compliance.
   Tested viewports: 320×568 (iPhone SE 1), 360×640, 412×915 (Pixel 6/7),
   390×844 (iPhone 14). */
@media (max-width: 900px) {
  #loginScreenOs2045 {
    /* dynamic vh accounts for mobile browser chrome / keyboard pop-ups */
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-theme-mode="os2045"] #loginScreenOs2045.active {
    display: flex;
    flex-direction: column;
  }
  /* Reset the fixed 1440x900 stage and let it flow naturally */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .os-stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    transform: none !important;
    overflow: visible;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .topbar {
    position: relative;
    top: auto; left: auto; right: auto;
    padding: 12px 14px;
  }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .footer {
    position: relative;
    bottom: auto; left: auto; right: auto;
  }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .main {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 14px 24px;
  }
  /* Auth card first, then decorative hero/right panels — keeps the form
     and its submit button above the fold on small viewports. */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .auth {
    order: 1;
    min-height: 0;            /* was 520px on desktop, breaks small phones */
    padding: 18px 18px 14px;
    width: 100%;
    max-width: 100%;
  }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .hero { order: 2; }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .right { order: 3; }

  /* Headline is huge (34px italic) — ease it on small phones */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .auth-h { font-size: 24px; }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .auth-head { margin-bottom: 16px; }

  /* Sticky submit button so it stays reachable while the form scrolls.
     16px bottom keeps it clear of viewport edges; safe-area inset handles
     iOS home indicator. */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .btn-primary {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    height: 48px;             /* HIG ≥ 44px tap target */
    margin-top: 12px;
  }

  /* Bump link buttons to a comfortable touch target */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .os2045-links .login-link-btn {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Step dots stay above the form; on very narrow viewports allow them to
     wrap so the label moves to a second row instead of pushing content out. */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .steps {
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .steps-lbl {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Inputs already use 48px height (input-wrap), keep that — but loosen
     internal padding so touch is comfortable on iOS Safari. */
  body[data-theme-mode="os2045"] #loginScreenOs2045 .input-wrap {
    height: 48px;
  }
}

/* Extra-narrow phones (iPhone SE 1 = 320×568): prioritise getting the form
   and button visible by hiding decorative right-side system panels. */
@media (max-width: 380px) {
  body[data-theme-mode="os2045"] #loginScreenOs2045 .right { display: none; }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .hero-sys { display: none; }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .hero-time { font-size: 40px; }
  body[data-theme-mode="os2045"] #loginScreenOs2045 .hero-greet { font-size: 18px; }
}

/* ───────────────────────── 24. PRE-LOGIN LOCKSCREEN ─────────────────────────
   Phase 1b — Windows-style lockscreen shown BEFORE the auth form. Big clock
   centered, four glass info cards (Projekte / Services / Tech-Stack / Kontakt)
   and a primary "Anmelden" CTA. Click anywhere or press any key to advance to
   #loginScreenOs2045. The legacy #mainContent landing is force-hidden in
   os2045 mode so we never paint two pre-login surfaces simultaneously.

   Visibility logic (mirrors the login pattern in section 22):
     - Default: hidden in any theme except os2045.
     - body[data-theme-mode="os2045"] #os2045Lockscreen.active → visible
     - body.logged-in or active login → hidden via JS toggling [hidden] attr.
   ────────────────────────────────────────────────────────────────────────── */

/* Force-hide the legacy matrix landing when OS-2045 owns the pre-login
   surface. Belt-and-suspenders: showLoginScreen() also adds .hidden to it. */
body[data-theme-mode="os2045"] #mainContent { display: none !important; }

#os2045Lockscreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 14;            /* below #loginScreenOs2045 (z-index: 16) */
  background: var(--bg-0, #05070c);
}
#os2045Lockscreen[hidden] { display: none !important; }
body[data-theme-mode="os2045"] #os2045Lockscreen.active { display: block; }
body[data-theme-mode="os2045"].logged-in #os2045Lockscreen { display: none !important; }

/* The lock stage reuses the same fixed 1440x900 → scale() mechanic the login
   uses, so a single transform: translate+scale fits any viewport. JS in
   lockscreen-os2045.js sets the scale; CSS owns the layout. */
body[data-theme-mode="os2045"] #os2045LockStage {
  position: fixed;
  top: 50%; left: 50%;
  width: 1440px; height: 900px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: var(--bg-0);
  overflow: hidden;
  cursor: pointer;        /* "click anywhere to unlock" affordance */
}

/* Wallpaper layer — slightly more saturated than the desktop's wall so the
   lockscreen reads as the "front door" of the experience. Inherits all
   tokens; reuse via .wall while applying a stronger amber/cyan tint. */
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-wall {
  background:
    radial-gradient(ellipse 80% 55% at 14% 18%, rgba(255,122,66,0.30), transparent 60%),
    radial-gradient(ellipse 65% 60% at 86% 78%, rgba(95,209,255,0.22), transparent 60%),
    radial-gradient(ellipse 55% 45% at 50% 110%, rgba(176,139,255,0.18), transparent 60%),
    linear-gradient(180deg, #05070c 0%, #0a0d18 60%, #0e1220 100%);
}

/* Top-bar */
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-top {
  position: absolute;
  top: 22px; left: 32px; right: 32px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 2;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-2);
  letter-spacing: 0.04em;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-brand b {
  font-weight: 600; color: var(--ink);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(145deg, var(--a-amber), var(--a-amber-2));
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(255,122,66,0.35);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-mark svg {
  width: 13px; height: 13px;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.06em;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-status .d {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--a-ok); box-shadow: 0 0 8px var(--a-ok);
}

/* Centered clock — the visual hero. Uses Instrument Serif for the time
   numerals (matches the login hero treatment) with a soft glow. */
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-clock-wrap {
  position: absolute;
  top: 130px; left: 0; right: 0;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-time {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic;
  font-size: 156px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-shadow:
    0 0 40px rgba(255,255,255,0.12),
    0 0 80px rgba(255,184,107,0.18),
    0 6px 20px rgba(0,0,0,0.5);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-date {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* Info-card grid — 4 cards in a 4-column row near the bottom */
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-grid {
  position: absolute;
  left: 80px; right: 80px;
  bottom: 160px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  z-index: 2;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-2xl);
  padding: 16px 18px;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-edge);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-card-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-card-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-list {
  list-style: none;
  margin: 0; padding: 0;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-list li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  padding: 3px 0;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-meta-text {
  color: var(--ink-3);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-list a {
  color: var(--a-amber);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-list a:hover {
  color: var(--a-amber-2);
  border-bottom-color: var(--a-amber-2);
}

/* Footer with primary CTA, hint and legal-links */
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-foot {
  position: absolute;
  bottom: 32px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  z-index: 5;
  /* Subtle gradient backdrop so that the footer reads clearly even when
     content (cards, clock, date) sits behind it on shorter viewports. */
  padding: 16px 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8,12,28,0.55) 60%, rgba(8,12,28,0.78) 100%);
  pointer-events: none;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-foot > * {
  pointer-events: auto;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--theme-accent), #2fa9e6);
  color: #00161f;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 12px 30px rgba(95,209,255,0.35),
    0 2px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(95,209,255,0.45),
    0 2px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-cta:active { transform: translateY(0); }
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-cta svg { stroke: #00161f; }

body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px;
  color: var(--ink-4);
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-meta a {
  color: var(--ink-3);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-meta a:hover {
  color: var(--a-amber);
  text-shadow: 0 0 8px rgba(255,184,107,0.45);
}

/* ─── Lockscreen mobile (<900px) ──────────────────────────────────────────
   Same approach as the login mobile fix — release the fixed 1440x900 stage
   and flow naturally from top to bottom. Clock stays prominent but smaller.
   CTA becomes sticky-bottom for easy thumb-reach. */
@media (max-width: 900px) {
  #os2045Lockscreen {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen.active {
    display: flex;
    flex-direction: column;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    transform: none !important;
    overflow: visible;
    padding: 16px 14px env(safe-area-inset-bottom, 16px);
    cursor: default;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-top {
    position: relative;
    top: auto; left: auto; right: auto;
    padding: 0 4px 16px;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-clock-wrap {
    position: relative;
    top: auto; left: auto; right: auto;
    padding: 12px 0 22px;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-time {
    font-size: 84px;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-date {
    font-size: 12px;
    letter-spacing: 0.22em;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-grid {
    position: relative;
    left: auto; right: auto; bottom: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 22px;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-foot {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: auto; right: auto;
    margin-top: 32px;
    padding: 16px 0 12px;
    background: linear-gradient(180deg, transparent 0%, rgba(8,12,28,0.65) 35%, rgba(8,12,28,0.88) 100%);
  }
  /* extra room below the cards so the sticky footer never overlaps text */
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-grid {
    margin-bottom: 140px;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-cta {
    height: 50px;
    padding: 0 32px;
  }
}

/* Extra-narrow viewports — drop the date subtitle's letter-spacing further
   and shrink the clock so 320px-wide phones stay readable. */
@media (max-width: 380px) {
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-time {
    font-size: 64px;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-date {
    letter-spacing: 0.16em;
  }
  body[data-theme-mode="os2045"] #os2045Lockscreen .os-lock-brand b {
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 3-STYLE — App content styling
   ────────────────────────────────────────────────────────────────────
   Generic overrides for any HTML inside .os-window-body so legacy admin
   modules (js/admin/*.js) get the OS-2045 look without per-module
   refactor. ALL rules scoped to body[data-theme-mode="os2045"]
   .os-window-body so Win3.11/classic themes are unaffected.

   Escape hatch: add `.raw-styles` to the .os-window OR .os-window-body
   to opt out (rules below use :not(.raw-styles) on the body wrapper).
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Window body baseline (typography, color) ────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  padding: 16px 18px;
  user-select: text;
}

/* Re-enable text selection inside app content (parent disables for OS UI) */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) * {
  user-select: text;
}

/* ─── Headings ───────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h1,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h2,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h3,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h4,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h5,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 12px;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h1 { font-size: 24px; }
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h2 { font-size: 20px; }
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h3 { font-size: 16px; }
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h4 { font-size: 14px; }
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h5,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) h6 {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 500;
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) p {
  margin: 0 0 10px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ─── Links ──────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) a {
  color: var(--theme-accent);
  text-decoration: none;
  transition: color 0.15s, text-shadow 0.15s;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) a:hover {
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.45);
  color: var(--theme-accent);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) a:focus-visible {
  outline: 2px solid rgba(95,209,255,0.5);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─── Buttons (generic glass style) ──────────────────────────────── */
/* Defensive guard: clickable table rows / cells use role="button" for
   a11y. Without this override they hit the generic [role="button"] rule
   below and get display:inline-flex — which collapses the table layout
   (the row shrinks to its content width and column-widths fall apart). */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) tr[role="button"] {
  display: table-row !important;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) td[role="button"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) th[role="button"] {
  display: table-cell !important;
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) [role="button"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="button"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="submit"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 34px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xs);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
  line-height: 1.2;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) [role="button"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="button"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="submit"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="reset"]:hover {
  background: var(--glass-hi);
  border-color: var(--glass-edge-strong);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button:active,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn:active,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) [role="button"]:active {
  transform: translateY(1px);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button:focus-visible,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn:focus-visible,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) [role="button"]:focus-visible {
  outline: 2px solid rgba(95,209,255,0.5);
  outline-offset: 2px;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button:disabled,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn:disabled,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) [role="button"][aria-disabled="true"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="button"]:disabled,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="submit"]:disabled,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="reset"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Primary button — cyan/accent glow */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.primary,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.btn-primary,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn.primary,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn-primary,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="submit"].primary {
  background: linear-gradient(145deg, rgba(95,209,255,0.22), rgba(95,209,255,0.12));
  border-color: rgba(95,209,255,0.45);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(95,209,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  font-weight: 600;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.primary:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.btn-primary:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn.primary:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn-primary:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="submit"].primary:hover {
  background: linear-gradient(145deg, rgba(95,209,255,0.32), rgba(95,209,255,0.18));
  border-color: rgba(95,209,255,0.65);
  box-shadow: 0 6px 18px rgba(95,209,255,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Danger button — red */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.danger,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.btn-danger,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn.danger,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn-danger {
  background: linear-gradient(145deg, rgba(255,107,107,0.22), rgba(255,107,107,0.12));
  border-color: rgba(255,107,107,0.45);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(255,107,107,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.danger:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.btn-danger:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn.danger:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn-danger:hover {
  background: linear-gradient(145deg, rgba(255,107,107,0.32), rgba(255,107,107,0.18));
  border-color: rgba(255,107,107,0.65);
}

/* Success / OK button */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) button.success,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .btn-success {
  background: linear-gradient(145deg, rgba(95,228,166,0.22), rgba(95,228,166,0.12));
  border-color: rgba(95,228,166,0.45);
  color: var(--ink);
}

/* ─── Inputs (text-like) ─────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="text"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="number"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="password"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="email"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="url"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="tel"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="search"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="date"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="datetime-local"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="time"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="month"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="week"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input:not([type]),
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) select,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) textarea {
  display: inline-block;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xs);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: 34px;
  line-height: 1.2;
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) textarea {
  min-height: 80px;
  line-height: 1.5;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="text"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="number"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="password"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="email"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="url"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="tel"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="search"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="date"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="datetime-local"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="time"]:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input:not([type]):hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) select:hover,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) textarea:hover {
  border-color: var(--glass-edge-strong);
  background: rgba(255,255,255,0.06);
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="text"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="number"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="password"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="email"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="url"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="tel"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="search"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="date"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="datetime-local"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="time"]:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input:not([type]):focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) select:focus,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) textarea:focus {
  border-color: rgba(95,209,255,0.55);
  box-shadow: 0 0 0 3px rgba(95,209,255,0.12);
  background: rgba(255,255,255,0.06);
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input::placeholder,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) textarea::placeholder {
  color: var(--ink-4);
}

body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input:disabled,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) select:disabled,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Custom select arrow indicator */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d7695' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) select option {
  background: #0e121e;
  color: var(--ink);
}

/* Checkbox + radio (custom-look using accent-color where supported) */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="checkbox"],
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  accent-color: var(--theme-accent);
  cursor: pointer;
}

/* Range slider */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="range"] {
  accent-color: var(--theme-accent);
  cursor: pointer;
}

/* File input — keep native chrome, just style the surrounding text */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) input[type="file"] {
  color: var(--ink-2);
  font-size: 12px;
}

/* Labels */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) label {
  display: inline-block;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}

/* Fieldset / legend */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) fieldset {
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xs);
  padding: 12px 14px;
  margin: 0 0 14px;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) legend {
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0 6px;
}

/* ─── Tables ─────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) thead {
  background: rgba(255,255,255,0.03);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) th {
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-edge);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--ink);
  vertical-align: middle;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) tbody tr {
  transition: background 0.12s;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) tbody tr:last-child td {
  border-bottom: 0;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 6px 0;
  text-align: left;
}

/* ─── Lists ──────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) ul,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) ol {
  margin: 0 0 12px;
  padding-left: 22px;
  color: var(--ink-2);
  line-height: 1.55;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) li {
  margin-bottom: 4px;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) ul ul,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) ol ol,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) ul ol,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) ol ul {
  margin: 4px 0 4px;
}

/* Description list */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) dt {
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 8px;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) dd {
  color: var(--ink);
  margin: 2px 0 8px;
}

/* ─── Cards / panels ─────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .card,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .box,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin: 0 0 12px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Highlight rim on cards (light from top-left) */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .card::before,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 40%, transparent);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ─── Modals / dialog ────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) dialog,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .modal {
  background: var(--glass-2);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-2xl);
  color: var(--ink);
  padding: 18px 22px;
  box-shadow: var(--glass-shadow-xl);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) dialog::backdrop {
  background: rgba(5,7,12,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ─── HR ─────────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) hr {
  border: 0;
  border-top: 1px solid var(--glass-edge);
  margin: 14px 0;
}

/* ─── Code / pre — preserve mono, add subtle bg ─────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) code,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) kbd,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) samp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-edge);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--a-mint);
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) pre {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xs);
  padding: 12px 14px;
  margin: 0 0 12px;
  overflow-x: auto;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
}
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ─── Blockquote ─────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) blockquote {
  border-left: 3px solid var(--theme-accent);
  padding: 4px 14px;
  margin: 0 0 12px;
  color: var(--ink-2);
  font-style: italic;
}

/* ─── Form layout helpers (.form-row, .form-group) ──────────────── */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .form-row,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── Emoji accent (legacy modules use 🧾 👥 etc.) ────────────────
   Subtle drop-shadow gives them coherence with theme glow. */
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) .emoji,
body[data-theme-mode="os2045"] .os-window-body:not(.raw-styles) [data-emoji] {
  filter: drop-shadow(0 0 4px rgba(255,184,107,0.35));
}

/* ─── Custom scrollbar inside window body ────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
body[data-theme-mode="os2045"] .os-window-body::-webkit-scrollbar,
body[data-theme-mode="os2045"] .os-window-body *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body[data-theme-mode="os2045"] .os-window-body::-webkit-scrollbar-track,
body[data-theme-mode="os2045"] .os-window-body *::-webkit-scrollbar-track {
  background: transparent;
}
body[data-theme-mode="os2045"] .os-window-body::-webkit-scrollbar-thumb,
body[data-theme-mode="os2045"] .os-window-body *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body[data-theme-mode="os2045"] .os-window-body::-webkit-scrollbar-thumb:hover,
body[data-theme-mode="os2045"] .os-window-body *::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
  background-clip: padding-box;
  border: 2px solid transparent;
}
body[data-theme-mode="os2045"] .os-window-body::-webkit-scrollbar-corner,
body[data-theme-mode="os2045"] .os-window-body *::-webkit-scrollbar-corner {
  background: transparent;
}

/* ─── Targeted exemptions (modules with their own styling) ──────
   These selectors tell the override layer to back off where the
   underlying module already provides a tuned look. */

/* Terminal: keep its xterm/monospace prompt untouched */
body[data-theme-mode="os2045"] .os-window-body .terminal-output,
body[data-theme-mode="os2045"] .os-window-body .terminal-prompt,
body[data-theme-mode="os2045"] .os-window-body .xterm,
body[data-theme-mode="os2045"] .os-window-body .xterm * {
  font-family: 'JetBrains Mono', monospace;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}

/* Files-app table is column-tuned — soften only the chrome */
body[data-theme-mode="os2045"] .os-window-body .files-table {
  /* allow legacy widths/grid; keep typography only */
  border-collapse: collapse;
}
body[data-theme-mode="os2045"] .os-window-body .files-table th,
body[data-theme-mode="os2045"] .os-window-body .files-table td {
  white-space: normal;
}

/* Code editor (CodeMirror / Monaco-like) — skip generic input rules */
body[data-theme-mode="os2045"] .os-window-body .CodeMirror,
body[data-theme-mode="os2045"] .os-window-body .CodeMirror *,
body[data-theme-mode="os2045"] .os-window-body .monaco-editor,
body[data-theme-mode="os2045"] .os-window-body .monaco-editor * {
  font-family: 'JetBrains Mono', monospace;
}

/* Game / emulator canvases — no padding/background interference */
body[data-theme-mode="os2045"] .os-window-body canvas,
body[data-theme-mode="os2045"] .os-window-body .emulator-stage,
body[data-theme-mode="os2045"] .os-window-body .game-stage {
  background: #000;
  border-radius: var(--r-xs);
}
/* ──────── End Phase 3-Style ──────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   Phase Settings — User-driven theme overrides + Settings-App chrome
   ──────────────────────────────────────────────────────────────────
   All rules are scoped to body[data-theme-mode="os2045"] so the
   Win3.11 / classic themes stay untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Accent override (driven by body[data-os-accent]) ─────────────── */
body[data-theme-mode="os2045"][data-os-accent="cyan"]   { --theme-accent: var(--a-cyan);   --theme-accent-rgb: 95, 209, 255;  }
body[data-theme-mode="os2045"][data-os-accent="amber"]  { --theme-accent: var(--a-amber);  --theme-accent-rgb: 255, 184, 107; }
body[data-theme-mode="os2045"][data-os-accent="mint"]   { --theme-accent: var(--a-mint);   --theme-accent-rgb: 123, 255, 184; }
body[data-theme-mode="os2045"][data-os-accent="rose"]   { --theme-accent: var(--a-rose);   --theme-accent-rgb: 255, 107, 149; }
body[data-theme-mode="os2045"][data-os-accent="violet"] { --theme-accent: var(--a-violet); --theme-accent-rgb: 176, 139, 255; }
body[data-theme-mode="os2045"][data-os-accent="sky"]    { --theme-accent: var(--a-sky);    --theme-accent-rgb: 107, 157, 255; }
body[data-theme-mode="os2045"][data-os-accent="lime"]   { --theme-accent: var(--a-lime);   --theme-accent-rgb: 212, 255, 107; }

/* ─── Accent broadcast: surface the chosen accent on the load-bearing UI
   chrome so the picker has visible effect across the shell. Uses
   --theme-accent (set by [data-os-accent] above) — applied with a low
   specificity selector so existing state-coloured rules (warn/err) win.
   ─────────────────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"][data-os-accent] .btn-primary {
  background: linear-gradient(145deg, var(--theme-accent), rgba(var(--theme-accent-rgb), 0.65));
  box-shadow:
    0 8px 20px rgba(var(--theme-accent-rgb), 0.35),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
body[data-theme-mode="os2045"][data-os-accent] .btn-primary:hover {
  box-shadow:
    0 10px 26px rgba(var(--theme-accent-rgb), 0.4),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
body[data-theme-mode="os2045"][data-os-accent] .tb-start {
  /* Neutral glass tile — accent only via the icon stroke + the hover border.
     The amber gradient was misleading users into thinking the start button
     was a separate "themed" element; it now matches the rest of the tray. */
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
body[data-theme-mode="os2045"][data-os-accent] .tb-brand .mark {
  background: linear-gradient(145deg, var(--theme-accent), rgba(var(--theme-accent-rgb), 0.65));
  box-shadow:
    0 4px 14px rgba(var(--theme-accent-rgb), 0.4),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
body[data-theme-mode="os2045"][data-os-accent] .tb-btn.running::after {
  background: var(--theme-accent);
  box-shadow: 0 0 6px rgba(var(--theme-accent-rgb), 0.85);
}
body[data-theme-mode="os2045"][data-os-accent] .tb-btn.active::after {
  box-shadow: 0 0 8px rgba(var(--theme-accent-rgb), 0.85);
}
body[data-theme-mode="os2045"][data-os-accent] .ws-item.active {
  background: linear-gradient(90deg, rgba(var(--theme-accent-rgb), 0.14), rgba(var(--theme-accent-rgb), 0.04));
}
body[data-theme-mode="os2045"][data-os-accent] .ws-item.active::before {
  background: var(--theme-accent);
}
body[data-theme-mode="os2045"][data-os-accent] .ws-item.active .count {
  color: var(--theme-accent);
}
/* Active window-titlebar bottom border picks up the accent so the user can
   spot which window is focused at a glance. */
body[data-theme-mode="os2045"][data-os-accent] .os-window.active > .os-window-titlebar,
body[data-theme-mode="os2045"][data-os-accent] .os-window.is-active > .os-window-titlebar,
body[data-theme-mode="os2045"][data-os-accent] .os-window.focused > .os-window-titlebar {
  border-bottom-color: rgba(var(--theme-accent-rgb), 0.45);
  box-shadow: inset 0 -1px 0 rgba(var(--theme-accent-rgb), 0.35);
}
/* Settings nav active tab — already uses --theme-accent-rgb, repeat for
   parity in case picker is opened before any other accent surface. */
body[data-theme-mode="os2045"][data-os-accent] .os-settings-nav button.active {
  background: rgba(var(--theme-accent-rgb), 0.18);
  border-color: rgba(var(--theme-accent-rgb), 0.45);
}

/* ─── Wallpaper override (driven by body[data-os-wallpaper]) ───────── */
/* Default wallpaper is the gradient stack defined in os2045-shell.css.
   These rules only apply when the user picked a non-default option. */
body[data-theme-mode="os2045"][data-os-wallpaper="solid-dark"] .os-wall {
  background: #080c1c;
}
body[data-theme-mode="os2045"][data-os-wallpaper="solid-dark"] .os-wall-horizon,
body[data-theme-mode="os2045"][data-os-wallpaper="solid-dark"] .os-wall-bokeh {
  display: none;
}

body[data-theme-mode="os2045"][data-os-wallpaper="solid-light"] .os-wall {
  background: #e8eef8;
}
body[data-theme-mode="os2045"][data-os-wallpaper="solid-light"] .os-wall-horizon,
body[data-theme-mode="os2045"][data-os-wallpaper="solid-light"] .os-wall-bokeh {
  display: none;
}
/* Solid-Light: lift the icon labels so they stay legible on the bright field. */
body[data-theme-mode="os2045"][data-os-wallpaper="solid-light"] .os-desktop-icon .lbl {
  color: #1a2236;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

body[data-theme-mode="os2045"][data-os-wallpaper="bokeh-bright"] .os-wall {
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(255,184,107,0.45), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(95,209,255,0.40), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(176,139,255,0.32), transparent 60%),
    linear-gradient(180deg, #c8d4ec 0%, #d8e2f2 60%, #e8eef8 100%);
}
body[data-theme-mode="os2045"][data-os-wallpaper="bokeh-bright"] .os-desktop-icon .lbl {
  color: #1a2236;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Eigenes Bild — driven by --user-wallpaper-url set inline on body */
body[data-theme-mode="os2045"][data-os-wallpaper="custom"] .os-wall {
  background-color: var(--bg-0);
  background-image: var(--user-wallpaper-url, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
body[data-theme-mode="os2045"][data-os-wallpaper="custom"] .os-wall-horizon,
body[data-theme-mode="os2045"][data-os-wallpaper="custom"] .os-wall-bokeh {
  display: none;
}

/* ─── UI scale (driven by body[data-os-scale]) ─────────────────────── */
body[data-theme-mode="os2045"][data-os-scale="small"]   { font-size: 12px; }
body[data-theme-mode="os2045"][data-os-scale="default"] { font-size: 13px; }
body[data-theme-mode="os2045"][data-os-scale="large"]   { font-size: 15px; }

/* ─── Settings-App chrome ─────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-settings-app {
  display: grid;
  grid-template-columns: 168px 1fr;
  height: 100%;
  min-height: 0;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}

body[data-theme-mode="os2045"] .os-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 8px;
  border-right: 1px solid var(--glass-edge);
  background: rgba(8, 12, 22, 0.35);
  overflow-y: auto;
}
body[data-theme-mode="os2045"] .os-settings-nav-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 10px 10px;
}
body[data-theme-mode="os2045"] .os-settings-nav button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body[data-theme-mode="os2045"] .os-settings-nav button:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
body[data-theme-mode="os2045"] .os-settings-nav button.active {
  background: rgba(var(--theme-accent-rgb), 0.14);
  border-color: rgba(var(--theme-accent-rgb), 0.35);
  color: var(--ink);
}
body[data-theme-mode="os2045"] .os-settings-nav button .ico {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

body[data-theme-mode="os2045"] .os-settings-content {
  padding: 24px;
  overflow-y: auto;
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-settings-section {
  display: none;
}
body[data-theme-mode="os2045"] .os-settings-section.active {
  display: block;
}
body[data-theme-mode="os2045"] .os-settings-h {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
body[data-theme-mode="os2045"] .os-settings-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
body[data-theme-mode="os2045"] .os-settings-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 14px;
}

/* ─── Color picker tiles ──────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-settings-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .os-settings-color {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--swatch, #5fd1ff);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
body[data-theme-mode="os2045"] .os-settings-color:hover { transform: translateY(-2px) scale(1.04); }
body[data-theme-mode="os2045"] .os-settings-color.active {
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.4),
    0 8px 22px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
body[data-theme-mode="os2045"] .os-settings-color.active::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 12px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: translate(-50%, -65%) rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
body[data-theme-mode="os2045"] .os-settings-color-label {
  display: block;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

/* ─── Wallpaper tiles ─────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-settings-wallpapers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .os-settings-wp {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius: var(--r-md);
  border: 2px solid var(--glass-edge);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  background: rgba(255,255,255,0.04);
}
/* Generic .os-window-body button override (line ~2258) sets a flat
   background that overrides our preview gradients. Force !important
   on every wallpaper tile so the previews actually show. */
body[data-theme-mode="os2045"] .os-window-body button.os-settings-wp { background: rgba(255,255,255,0.04); }
body[data-theme-mode="os2045"] .os-settings-wp:hover { transform: translateY(-2px); border-color: var(--glass-edge-strong); }
body[data-theme-mode="os2045"] .os-settings-wp.active {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.25);
}
body[data-theme-mode="os2045"] .os-settings-wp .lbl {
  position: absolute;
  left: 8px; bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
}
/* Preview backgrounds */
body[data-theme-mode="os2045"] .os-settings-wp.wp-default {
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(255,122,66,0.30), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(95,209,255,0.22), transparent 60%),
    linear-gradient(180deg, #05070c 0%, #0a0d18 60%, #0e1220 100%) !important;
}
body[data-theme-mode="os2045"] .os-settings-wp.wp-solid-dark { background: #080c1c !important; }
body[data-theme-mode="os2045"] .os-settings-wp.wp-solid-light { background: #e8eef8 !important; }
body[data-theme-mode="os2045"] .os-settings-wp.wp-solid-light .lbl { color: #1a2236; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
body[data-theme-mode="os2045"] .os-settings-wp.wp-bokeh-bright {
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(255,184,107,0.55), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(95,209,255,0.50), transparent 60%),
    linear-gradient(180deg, #c8d4ec 0%, #e8eef8 100%) !important;
}
body[data-theme-mode="os2045"] .os-settings-wp.wp-bokeh-bright .lbl { color: #1a2236; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
body[data-theme-mode="os2045"] .os-settings-wp.wp-custom {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0 6px,
      rgba(255,255,255,0.08) 6px 12px),
    var(--bg-0);
  display: grid; place-items: center;
}
body[data-theme-mode="os2045"] .os-settings-wp.wp-custom .plus {
  font-size: 28px;
  color: var(--ink-2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Animated wallpaper preview tiles. Pure-CSS hints — the actual canvas
   only runs on the live desktop, not inside the picker. */
body[data-theme-mode="os2045"] .os-settings-wp.wp-matrix {
  background:
    repeating-linear-gradient(180deg,
      rgba(123,255,184,0.20) 0 1px,
      transparent 1px 6px),
    radial-gradient(ellipse at 50% 100%, rgba(123,255,184,0.18), transparent 70%),
    #04070a !important;
}
body[data-theme-mode="os2045"] .os-settings-wp.wp-matrix .lbl {
  color: #d3ffe7;
}
body[data-theme-mode="os2045"] .os-settings-wp.wp-particles {
  background:
    radial-gradient(2px 2px at 18% 30%, rgba(95,209,255,0.9), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,184,107,0.8), transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(176,139,255,0.8), transparent 60%),
    radial-gradient(2px 2px at 85% 25%, rgba(123,255,184,0.8), transparent 60%),
    linear-gradient(135deg, #06090e 0%, #0a0e18 100%) !important;
}
/* Hide the static wall gradients/horizon when an animated canvas runs.
   The canvas is appended into .os-wall and gets z-index 1; we keep the
   wall background dark so canvas trails feel intentional. */
body[data-theme-mode="os2045"][data-os-wallpaper="matrix"] .os-wall,
body[data-theme-mode="os2045"][data-os-wallpaper="particles"] .os-wall {
  background: #04070a;
}
body[data-theme-mode="os2045"][data-os-wallpaper="matrix"] .os-wall-horizon,
body[data-theme-mode="os2045"][data-os-wallpaper="matrix"] .os-wall-bokeh,
body[data-theme-mode="os2045"][data-os-wallpaper="particles"] .os-wall-horizon,
body[data-theme-mode="os2045"][data-os-wallpaper="particles"] .os-wall-bokeh {
  display: none;
}

/* ─── Scale buttons ───────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-settings-scale {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .os-settings-scale button {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body[data-theme-mode="os2045"] .os-settings-scale button:hover {
  background: var(--glass-hi);
  color: var(--ink);
}
body[data-theme-mode="os2045"] .os-settings-scale button.active {
  background: rgba(var(--theme-accent-rgb), 0.18);
  border-color: rgba(var(--theme-accent-rgb), 0.5);
  color: var(--ink);
}

/* ─── Reset row ───────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-settings-reset {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-edge);
}
body[data-theme-mode="os2045"] .os-settings-reset button {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,107,107,0.4);
  background: rgba(255,107,107,0.08);
  color: #ffb0b0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
body[data-theme-mode="os2045"] .os-settings-reset button:hover {
  background: rgba(255,107,107,0.16);
  border-color: rgba(255,107,107,0.6);
}

/* ─── Settings file input (hidden) ────────────────────────────────── */
body[data-theme-mode="os2045"] .os-settings-file-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ─── Account tab (Konto) ─────────────────────────────────────────── */
/* Cards inside the account section reuse the global --glass tokens so
   they stay visually consistent with the rest of the OS-2045 surface.
   Inputs follow the same compact form-style as elsewhere. */
body[data-theme-mode="os2045"] .os-settings-card {
  position: relative;
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-edge);
  background: var(--glass, rgba(255,255,255,0.04));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
body[data-theme-mode="os2045"] .os-settings-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
body[data-theme-mode="os2045"] .os-settings-card .acct-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 10px;
}
body[data-theme-mode="os2045"] .os-settings-card input[type="password"],
body[data-theme-mode="os2045"] .os-settings-card input[type="text"] {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
  background: rgba(0,0,0,0.25);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
body[data-theme-mode="os2045"] .os-settings-card input[type="password"]:focus,
body[data-theme-mode="os2045"] .os-settings-card input[type="text"]:focus {
  outline: none;
  border-color: rgba(var(--theme-accent-rgb), 0.55);
  background: rgba(0,0,0,0.35);
}
body[data-theme-mode="os2045"] .os-settings-card button {
  margin-top: 4px;
  margin-right: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
body[data-theme-mode="os2045"] .os-settings-card button:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--glass-edge-strong, rgba(255,255,255,0.22));
}
body[data-theme-mode="os2045"] .os-settings-card button.primary {
  border-color: rgba(var(--theme-accent-rgb), 0.55);
  background: rgba(var(--theme-accent-rgb), 0.18);
}
body[data-theme-mode="os2045"] .os-settings-card button.primary:hover {
  background: rgba(var(--theme-accent-rgb), 0.28);
}

/* Inline status messages — success (mint) / error (rose) variants. */
body[data-theme-mode="os2045"] .acct-msg {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
  min-height: 16px;
}
body[data-theme-mode="os2045"] .acct-msg.is-error {
  color: #ff9aa6;
}
body[data-theme-mode="os2045"] .acct-msg.is-success {
  color: #7bffb8;
}
body[data-theme-mode="os2045"] .acct-spinner {
  font-size: 12px;
  color: var(--ink-3);
}

/* Status pill — mint when 2FA active, amber when inactive. */
body[data-theme-mode="os2045"] .acct-2fa-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
}
body[data-theme-mode="os2045"] .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
body[data-theme-mode="os2045"] .badge-mint {
  color: #7bffb8;
  background: rgba(123,255,184,0.12);
  border-color: rgba(123,255,184,0.45);
}
body[data-theme-mode="os2045"] .badge-amber {
  color: #ffb86b;
  background: rgba(255,184,107,0.12);
  border-color: rgba(255,184,107,0.45);
}

/* QR-code container — Authenticator apps need a high-contrast white
   background to scan reliably. We give a small white card around the
   <img> rather than touching the underlying glass. */
body[data-theme-mode="os2045"] .acct-qr {
  display: inline-block;
  padding: 10px;
  margin: 8px 0 10px;
  background: #ffffff;
  border-radius: var(--r-sm);
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
}
body[data-theme-mode="os2045"] .acct-qr img {
  display: block;
  width: 180px;
  height: 180px;
  image-rendering: pixelated;
}
body[data-theme-mode="os2045"] .acct-code-box {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink);
  word-break: break-all;
  margin: 4px 0 10px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.30);
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
}
body[data-theme-mode="os2045"] .acct-backup-codes {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
body[data-theme-mode="os2045"] .acct-backup-codes li code {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.30);
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
}

/* Trusted-device list rows. */
body[data-theme-mode="os2045"] .acct-devices-list {
  margin-bottom: 10px;
}
body[data-theme-mode="os2045"] .acct-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
  background: rgba(0,0,0,0.18);
  margin-bottom: 6px;
}
body[data-theme-mode="os2045"] .acct-device-info { min-width: 0; flex: 1 1 auto; }
body[data-theme-mode="os2045"] .acct-device-ua {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme-mode="os2045"] .acct-device-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
body[data-theme-mode="os2045"] .acct-device button {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
}

/* ──────── End Phase Settings ───────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   Bugsweep-2 — targeted overrides for legacy admin modules whose
   inline / dark theme conflicts with the OS-2045 glass surface.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── PM2 Monitor — readable on the OS-2045 surface ──────────────── */
/* The original module hard-codes near-black backgrounds + light grey
   text. On OS-2045's translucent surface the text disappears. We lift
   the foreground to var(--ink) and drop hard-coded backgrounds inside
   the window body so the glass layer shines through. */
body[data-theme-mode="os2045"] .os-window-body .pm2-process,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-header,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-stats,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-metrics,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-actions,
body[data-theme-mode="os2045"] .os-window-body [class^="pm2-"],
body[data-theme-mode="os2045"] .os-window-body [class*=" pm2-"] {
  color: var(--ink, #eef2ff);
  background: transparent;
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  border-radius: var(--r-md, 10px);
  padding: 12px 14px;
  margin-bottom: 10px;
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process-name,
body[data-theme-mode="os2045"] .os-window-body .pm2-stat-value,
body[data-theme-mode="os2045"] .os-window-body .pm2-metric-value {
  color: var(--ink, #eef2ff) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  font-size: 16px;
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process-id,
body[data-theme-mode="os2045"] .os-window-body .pm2-stat-label,
body[data-theme-mode="os2045"] .os-window-body .pm2-metric-label {
  color: var(--ink-2, #c8d0e8) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 1 !important;
}
/* Action-Buttons (Restart/Stop/Logs) need contrast — generic table
   override may have made them invisible. */
body[data-theme-mode="os2045"] .os-window-body .pm2-process-actions button {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ink, #eef2ff) !important;
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.12)) !important;
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process-actions button:hover {
  background: rgba(255,255,255,0.12) !important;
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process-status {
  color: var(--ink, #eef2ff);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  border-radius: var(--r-sm, 6px);
  padding: 2px 8px;
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process.online .pm2-process-status,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-status.online {
  color: #7bffb8;
  background: rgba(123,255,184,0.14);
  border-color: rgba(123,255,184,0.35);
}
body[data-theme-mode="os2045"] .os-window-body .pm2-process.stopped .pm2-process-status,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-status.stopped,
body[data-theme-mode="os2045"] .os-window-body .pm2-process-status.errored {
  color: #ff9a9a;
  background: rgba(255,107,107,0.14);
  border-color: rgba(255,107,107,0.35);
}
body[data-theme-mode="os2045"] .os-window-body .pm2-action-btn {
  color: var(--ink, #eef2ff);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
}
body[data-theme-mode="os2045"] .os-window-body .pm2-action-btn:hover {
  background: rgba(255,255,255,0.10);
}

/* ─── Email — make the right-hand reader pane fill the window ────── */
/* The legacy email module relies on a flex chain (container → tab-content
   → layout → reader). Inside the OS-2045 glass window the chain occasionally
   collapsed because parents were not guaranteed to be 100 % tall. We pin
   every link in the chain explicitly so the reader uses the full height. */
body[data-theme-mode="os2045"] .os-window-body .email-container {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
body[data-theme-mode="os2045"] .os-window-body .email-tab-content {
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-window-body .email-tab-content.active {
  display: flex;
  flex: 1 1 auto !important;
  height: auto;
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-window-body .email-layout {
  display: flex;
  flex: 1 1 auto !important;
  min-height: 0;
  height: 100%;
}
body[data-theme-mode="os2045"] .os-window-body .email-list-panel,
body[data-theme-mode="os2045"] .os-window-body .email-reader {
  flex: 1 1 auto !important;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}
body[data-theme-mode="os2045"] .os-window-body .email-reader {
  display: flex;
  flex-direction: column;
}
body[data-theme-mode="os2045"] .os-window-body .email-reader-body {
  flex: 1 1 auto;
  min-height: 0;
}
/* Email module has its own `padding` chrome — drop the generic body padding
   so the layout reaches the window edges. */
body[data-theme-mode="os2045"] .os-window-body:has(> .email-container),
body[data-theme-mode="os2045"] .os-window-body:has(.email-container) {
  padding: 0;
}
/* Force the email-container itself into a vertical flex column so
   .email-tab-content (style="flex:1") actually stretches to fill the
   window. Without these, the container only sized to its content and
   the reader pane was capped at ~50% of the window. */
body[data-theme-mode="os2045"] .os-window-body .email-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-window-body .email-container > .email-tab-content {
  flex: 1 1 auto;
  min-height: 0;
}
/* ──────── End Bugsweep-2 overrides ─────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   Bugsweep-3 — Email search field, Files browser, CorVault list, Titlebar
   ──────────────────────────────────────────────────────────────────
   Each rule scoped to body[data-theme-mode="os2045"] so legacy themes
   (Win3.11 / classic) stay untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Bug 1: Email search input was sitting visually under the reader
   pane (#emailReaderPanel/.email-reader). The toolbar uses default
   z-index and sometimes the right-pane overlapped on narrow widths.
   Lift the toolbar (which contains the search input) above the reader. */
body[data-theme-mode="os2045"] .os-window-body .email-list-toolbar {
  position: relative;
  z-index: 5;
  background: rgba(15, 18, 32, 0.85);
  flex-shrink: 0;
}
body[data-theme-mode="os2045"] .os-window-body #emailSearchInput,
body[data-theme-mode="os2045"] .os-window-body .email-list-toolbar input[type="text"] {
  position: relative;
  z-index: 6;
}
body[data-theme-mode="os2045"] .os-window-body .email-list-panel {
  position: relative;
  z-index: 4;
  min-width: 280px;
}
body[data-theme-mode="os2045"] .os-window-body .email-reader {
  z-index: 1;
}

/* ─── Bug 2: Files browser — buttons in the header (.files-actions) had
   black-on-theme-color contrast which becomes white-on-white when the
   user picks a light accent. Force readable contrast inside the OS
   window. The .files-table layout is column-tuned; we keep it but
   ensure the header chrome and content reflow properly when the window
   resizes. */
body[data-theme-mode="os2045"] .os-window-body #filesBrowser {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
body[data-theme-mode="os2045"] .os-window-body .files-header {
  background: rgba(20, 24, 40, 0.85);
  color: var(--ink, #eef2ff);
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  flex-shrink: 0;
}
body[data-theme-mode="os2045"] .os-window-body .files-path {
  color: var(--ink, #eef2ff);
}
body[data-theme-mode="os2045"] .os-window-body .files-actions button {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ink, #eef2ff) !important;
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.18)) !important;
  border-radius: 4px;
}
body[data-theme-mode="os2045"] .os-window-body .files-actions button:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
body[data-theme-mode="os2045"] .os-window-body .files-close {
  color: var(--ink, #eef2ff);
}
/* .files-content holds the table — make sure it grows + reflows */
body[data-theme-mode="os2045"] .os-window-body .files-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  width: 100%;
}
body[data-theme-mode="os2045"] .os-window-body .files-table {
  width: 100% !important;
  table-layout: auto;
}
/* Force icon column to stay narrow + inline so it doesn't stack
   above the name on narrow widths. */
body[data-theme-mode="os2045"] .os-window-body .files-table td.icon,
body[data-theme-mode="os2045"] .os-window-body .files-table th.icon {
  width: 28px;
  min-width: 28px;
  white-space: nowrap;
  vertical-align: middle;
}
body[data-theme-mode="os2045"] .os-window-body .files-table td,
body[data-theme-mode="os2045"] .os-window-body .files-table th {
  vertical-align: middle;
}
body[data-theme-mode="os2045"] .os-window-body .files-footer {
  flex-shrink: 0;
}
/* The window body sometimes adds inner padding around the legacy
   filesBrowser — drop it so the browser fills edge-to-edge.
   ALSO clip the body's own scrollbar so we don't get two scrollbars
   stacked (.files-content has its own). */
body[data-theme-mode="os2045"] .os-window-body:has(> #filesBrowser),
body[data-theme-mode="os2045"] .os-window-body:has(#filesBrowser) {
  padding: 0 !important;
  overflow: hidden !important;
}
/* Make the legacy #filesBrowser fill the window completely.
   The original index.html declares `#filesBrowser { ... max-width: 900px; ... }`
   for the floating-modal version; that max-width caps the WM-mounted
   instance at 900 px no matter how wide the OS-window is. Reset it. */
body[data-theme-mode="os2045"] .os-window-body #filesBrowser {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Files-table: 4 columns (Name | Size | Modified | Perms). Icon + name
   live in one cell (.fx-name-cell). With table-layout:fixed and
   explicit widths on size/modified/perm, the name cell absorbs the
   remaining width — and the table reflows on window resize because the
   outer .files-table is set to width:100%. */
body[data-theme-mode="os2045"] .os-window-body .files-table {
  table-layout: fixed !important;
  width: 100% !important;
}
body[data-theme-mode="os2045"] .os-window-body .files-table td,
body[data-theme-mode="os2045"] .os-window-body .files-table th {
  padding: 6px 10px;
  vertical-align: middle !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell !important;
  box-sizing: border-box;
}
body[data-theme-mode="os2045"] .os-window-body .files-table tr {
  display: table-row !important;
}
/* Header sticky: every th needs the same opaque background, otherwise the
   scrolling rows bleed through (only `Name` had the background and the
   other column-headers visually disappeared on scroll). */
body[data-theme-mode="os2045"] .os-window-body .files-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2;
  background: var(--bg-1, #14171f) !important;
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
}
/* Name column: flex-row with icon next to label, soaks up leftover width. */
body[data-theme-mode="os2045"] .os-window-body .files-table .fx-name-cell {
  width: auto;
  overflow: hidden;
}
body[data-theme-mode="os2045"] .os-window-body .files-table .fx-row-icon {
  display: inline-block;
  width: 22px;
  min-width: 22px;
  text-align: center;
  margin-right: 6px;
  vertical-align: middle;
}
body[data-theme-mode="os2045"] .os-window-body .files-table .fx-row-name {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
}
body[data-theme-mode="os2045"] .os-window-body .files-table th.size,
body[data-theme-mode="os2045"] .os-window-body .files-table td.size {
  width: 90px;
  text-align: right;
}
body[data-theme-mode="os2045"] .os-window-body .files-table th.modified,
body[data-theme-mode="os2045"] .os-window-body .files-table td.modified {
  width: 160px;
}
body[data-theme-mode="os2045"] .os-window-body .files-table th.perm,
body[data-theme-mode="os2045"] .os-window-body .files-table td.perm {
  width: 80px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
/* ─── CorVault user tab: rows full-width + columns aligned ──────────
   The user (Benutzer) tab uses an actual <table class="cv-table">
   with inline styles. The Phase 3-Style table override added 12px
   padding which mismatched the inline-styled <th> 12px/8px and
   separated header from rows. Force consistent layout. */
/* Earlier rule used table-layout:auto which fought the later fixed-layout
   override. Drop the layout-mode here and let the explicit-column block
   below own it. */
body[data-theme-mode="os2045"] .os-window-body .cv-table {
  border-spacing: 0 !important;
}
body[data-theme-mode="os2045"] .os-window-body .cv-table th,
body[data-theme-mode="os2045"] .os-window-body .cv-table td {
  vertical-align: middle !important;
}
body[data-theme-mode="os2045"] .os-window-body .cv-tab-benutzer,
body[data-theme-mode="os2045"] .os-window-body .cv-tab-firmenkunden,
body[data-theme-mode="os2045"] .os-window-body .cv-tab-registrierungen {
  width: 100%;
}
body[data-theme-mode="os2045"] .os-window-body .cv-content-area {
  width: 100%;
}

/* ─── Bug 3: CorVault — list items inside .cv-fk-list and .cv-reg-list
   were narrower than the surrounding header because they live inside
   a flex column with default min-width. Force full width + box-sizing. */
body[data-theme-mode="os2045"] .os-window-body .cv-content-area {
  width: 100%;
  box-sizing: border-box;
}
body[data-theme-mode="os2045"] .os-window-body .cv-tab-firmenkunden,
body[data-theme-mode="os2045"] .os-window-body .cv-tab-registrierungen,
body[data-theme-mode="os2045"] .os-window-body .cv-tab-benutzer {
  width: 100%;
  box-sizing: border-box;
}
body[data-theme-mode="os2045"] .os-window-body .cv-fk-list,
body[data-theme-mode="os2045"] .os-window-body .cv-reg-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body[data-theme-mode="os2045"] .os-window-body .cv-fk-card {
  width: 100%;
  box-sizing: border-box;
}
body[data-theme-mode="os2045"] .os-window-body .cv-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}
body[data-theme-mode="os2045"] .os-window-body .cv-tab-benutzer {
  width: 100% !important;
  /* display intentionally NOT !important — corvaultSwitchTab() flips
     style.display = 'none' to hide the inactive tab, and !important
     would defeat that and pin the Benutzer-tab as the only visible
     panel. The default `display: block` (or whatever JS sets) wins. */
  box-sizing: border-box !important;
}
body[data-theme-mode="os2045"] .os-window-body .cv-content-area {
  min-width: 0;
}
/* Header sticky-Zeile darf nicht kollabieren — th-padding auf 8px 12px halten,
   tbody-Zellen erben von .cv-table-Override (sonst rutschen Spaltenbreiten).
   Inline-Styles aus corvault.js explizit re-overriden.
   Plus table-layout:fixed needs explicit column widths so the header and
   the tbody rows stay in sync — pre-fix the header's sticky-row was
   stretching to fill while tbody fell back to natural-content width. */
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th,
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td {
  padding: 8px 12px !important;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Column widths for the Benutzer table (8 cols: E-Mail | Name | Abo |
   freeAccess | Vaults | Speicher | Zuletzt aktiv | Aktion). E-Mail gets
   the leftover width via auto, the rest are fixed. */
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(1),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(1) { width: auto; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(2),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(2) { width: 140px; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(3),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(3) { width: 80px; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(4),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(4) { width: 90px; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(5),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(5) { width: 70px; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(6),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(6) { width: 100px; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(7),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(7) { width: 110px; }
body[data-theme-mode="os2045"] .os-window-body .cv-table > thead > tr > th:nth-child(8),
body[data-theme-mode="os2045"] .os-window-body .cv-table > tbody > tr > td:nth-child(8) { width: 70px; }

/* ─── Bug 4: Titlebar — bigger title, app icon slot, more breathing room. */
body[data-theme-mode="os2045"] .os-window-titlebar {
  height: 44px;
  padding: 0 0 0 14px;
}
body[data-theme-mode="os2045"] .os-window-titlebar .win-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-2, #c0c8e0);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}
body[data-theme-mode="os2045"] .os-window-titlebar .win-title b,
body[data-theme-mode="os2045"] .os-window-titlebar .win-title .os-win-title-text {
  color: var(--ink, #eef2ff);
  font-weight: 600;
}
body[data-theme-mode="os2045"] .os-window-titlebar .win-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-2, #c0c8e0);
  opacity: 0.85;
}
body[data-theme-mode="os2045"] .os-window-titlebar .win-title-icon svg {
  width: 100%;
  height: 100%;
}
body[data-theme-mode="os2045"] .os-window-titlebar .win-title-icon:empty {
  display: none;
}

/* ─── Bug 6: Context-menu submenu — eliminate the gap between parent
   row and submenu so the cursor doesn't traverse a "dead zone" that
   would close the submenu. The 4px gap is now 0px (handled in JS) but
   we also style the submenu to butt up cleanly. */
body[data-theme-mode="os2045"] .os-ctx.os-ctx-sub {
  margin-left: 0;
}

/* ────────────────────────────────────────────────────────────────────
   Browser App (OS-2045) — chrome, panes, modal.
   ──────────────────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .browser-mount {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Strip the standard 16/18 px window-body padding when the browser app
   is mounted — browser-mount class is added by mountBrowser() ON the
   os-window-body itself (not a child), so we match it directly. The
   absolute-position fallback is the safety net: if a child somehow doesn't
   stretch (Flexbox quirks across browsers), inset:0 forces it to fill the
   window-body anyway. */
body[data-theme-mode="os2045"] .os-window-body.browser-mount {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0;
  position: relative;
}
body[data-theme-mode="os2045"] .os-window-body.browser-mount > .browser-shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(20, 22, 32, 0.65);
  color: var(--ink-1, #d6d8e2);
}
body[data-theme-mode="os2045"] .browser-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: rgba(20, 22, 32, 0.65);
  color: var(--ink-1, #d6d8e2);
}
body[data-theme-mode="os2045"] .browser-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
body[data-theme-mode="os2045"] .browser-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-1, #d6d8e2);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-width: 32px;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .browser-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}
body[data-theme-mode="os2045"] .browser-btn.primary {
  background: linear-gradient(180deg, #7c8cff 0%, #5b6dff 100%);
  border-color: rgba(124, 140, 255, 0.6);
  color: #fff;
}
body[data-theme-mode="os2045"] .browser-btn.primary:hover {
  filter: brightness(1.08);
}
body[data-theme-mode="os2045"] .browser-url {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-1, #d6d8e2);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
}
body[data-theme-mode="os2045"] .browser-url:focus {
  border-color: rgba(124, 140, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
}

body[data-theme-mode="os2045"] .browser-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body[data-theme-mode="os2045"] .browser-tab {
  background: transparent;
  border: 0;
  color: var(--ink-3, #6d7695);
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
body[data-theme-mode="os2045"] .browser-tab:hover { color: var(--ink-1, #d6d8e2); }
body[data-theme-mode="os2045"] .browser-tab.active {
  color: #7c8cff;
  border-bottom-color: #7c8cff;
}

body[data-theme-mode="os2045"] .browser-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0a0c14;
}
body[data-theme-mode="os2045"] .browser-pane {
  position: absolute;
  inset: 0;
  display: none;
  overflow: auto;
}
body[data-theme-mode="os2045"] .browser-pane.active {
  display: block;
}
body[data-theme-mode="os2045"] .browser-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
body[data-theme-mode="os2045"] .browser-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
body[data-theme-mode="os2045"] .browser-blocked-card {
  background: rgba(30, 33, 48, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 420px;
  text-align: center;
}
body[data-theme-mode="os2045"] .browser-blocked-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
body[data-theme-mode="os2045"] .browser-blocked-sub {
  font-size: 12px;
  color: var(--ink-3, #6d7695);
  margin-bottom: 16px;
  line-height: 1.5;
}
body[data-theme-mode="os2045"] .browser-blocked-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
body[data-theme-mode="os2045"] .browser-blocked button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #c8cdd6;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
body[data-theme-mode="os2045"] .browser-blocked button:hover {
  background: rgba(255,255,255,0.10);
  border-color: color-mix(in srgb, var(--theme-accent, #7c8cff) 40%, transparent);
  color: #fff;
}
body[data-theme-mode="os2045"] .browser-blocked .primary {
  background: linear-gradient(180deg, #7c8cff 0%, #5b6dff 100%);
  border: 1px solid rgba(124, 140, 255, 0.6);
  color: #fff;
}

/* Reader-Mode (Backend-proxied content view) needs the surf-pane as a
   positioning context. The base .browser-pane rule already sets
   position:absolute + inset:0 so the pane fills .browser-stage entirely —
   we keep absolute (NOT relative, otherwise the pane collapses to
   intrinsic iframe height and the iframe shows at 1/4 of the window). */
body[data-theme-mode="os2045"] .browser-pane.browser-surf {
  position: absolute;
  inset: 0;
}
body[data-theme-mode="os2045"] .browser-reader {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,26,38,0.98), rgba(10,15,24,0.98));
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 6;
}
body[data-theme-mode="os2045"] .browser-reader-head {
  padding: 16px 24px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
body[data-theme-mode="os2045"] .browser-reader-title {
  font-size: 22px; font-weight: 600; margin: 0 36px 6px 0;
  color: #f1f4f9;
  font-family: 'Instrument Serif', Georgia, serif;
}
body[data-theme-mode="os2045"] .browser-reader-meta {
  font-size: 11.5px; color: #99a2af;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  word-break: break-all;
}
body[data-theme-mode="os2045"] .browser-reader-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; color: #aab3c0;
  font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
body[data-theme-mode="os2045"] .browser-reader-close:hover {
  background: rgba(255,255,255,0.06); color: #fff;
}
body[data-theme-mode="os2045"] .browser-reader-body {
  flex: 1; overflow: auto;
  padding: 18px 28px 40px;
  max-width: 760px; margin: 0 auto;
  color: #d6dbe5;
  font-size: 15px;
  line-height: 1.7;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-theme-mode="os2045"] .browser-reader-body h1,
body[data-theme-mode="os2045"] .browser-reader-body h2,
body[data-theme-mode="os2045"] .browser-reader-body h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  color: #f1f4f9;
  margin: 1.2em 0 0.4em;
}
body[data-theme-mode="os2045"] .browser-reader-body img {
  max-width: 100%; height: auto;
  border-radius: 6px;
  margin: 14px auto;
  display: block;
}
body[data-theme-mode="os2045"] .browser-reader-body a {
  color: var(--theme-accent, #7cc4ff);
  text-decoration: underline;
}
body[data-theme-mode="os2045"] .browser-reader-body blockquote {
  border-left: 3px solid var(--theme-accent, #7cc4ff);
  margin: 14px 0;
  padding: 6px 14px;
  color: #aab3c0;
  font-style: italic;
}
body[data-theme-mode="os2045"] .browser-reader-loading {
  text-align: center; padding: 40px 12px; color: #99a2af; font-size: 13px;
}

/* Homepage */
body[data-theme-mode="os2045"] .browser-home-wrap {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: linear-gradient(135deg, #0d1020 0%, #161b35 100%);
  z-index: 2;
}
body[data-theme-mode="os2045"] .browser-home {
  padding: 40px;
  max-width: 760px;
  margin: 0 auto;
}
body[data-theme-mode="os2045"] .browser-home-greet {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  color: var(--ink-1, #d6d8e2);
}
body[data-theme-mode="os2045"] .browser-home-search {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
body[data-theme-mode="os2045"] .browser-home-search input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-1, #d6d8e2);
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  outline: none;
}
body[data-theme-mode="os2045"] .browser-home-search input:focus {
  border-color: rgba(124, 140, 255, 0.7);
}
body[data-theme-mode="os2045"] .browser-home-search .primary {
  background: linear-gradient(180deg, #7c8cff 0%, #5b6dff 100%);
  border: 1px solid rgba(124, 140, 255, 0.6);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
body[data-theme-mode="os2045"] .browser-home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
body[data-theme-mode="os2045"] .browser-home-tile {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink-1, #d6d8e2);
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
body[data-theme-mode="os2045"] .browser-home-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 140, 255, 0.4);
}
body[data-theme-mode="os2045"] .browser-home-tile-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme-mode="os2045"] .browser-home-tile-url {
  font-size: 11px;
  color: var(--ink-3, #6d7695);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
body[data-theme-mode="os2045"] .browser-home-empty {
  color: var(--ink-3, #6d7695);
  font-size: 13px;
  padding: 16px;
  text-align: center;
  grid-column: 1 / -1;
}

/* Image pane */
body[data-theme-mode="os2045"] .browser-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0c14;
}
body[data-theme-mode="os2045"] .browser-image-view {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body[data-theme-mode="os2045"] .browser-image-view:not([src]) {
  display: none;
}
body[data-theme-mode="os2045"] .browser-image-view[src=""] {
  display: none;
}
body[data-theme-mode="os2045"] .browser-image-empty {
  color: var(--ink-3, #6d7695);
  font-size: 13px;
}

/* Bookmarks + History list */
body[data-theme-mode="os2045"] .browser-bookmarks,
body[data-theme-mode="os2045"] .browser-history {
  background: #0c0f1c;
  padding: 8px 0;
}
body[data-theme-mode="os2045"] .browser-bookmarks-list,
body[data-theme-mode="os2045"] .browser-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-theme-mode="os2045"] .browser-bookmarks-item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body[data-theme-mode="os2045"] .browser-bookmarks-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
body[data-theme-mode="os2045"] .browser-bm-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: 0;
  color: var(--ink-1, #d6d8e2);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .browser-bm-title {
  font-size: 13px;
  font-weight: 500;
}
body[data-theme-mode="os2045"] .browser-bm-url {
  font-size: 11px;
  color: var(--ink-3, #6d7695);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}
body[data-theme-mode="os2045"] .browser-bm-del {
  background: transparent;
  border: 0;
  color: var(--ink-3, #6d7695);
  width: 36px;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .browser-bm-del:hover { color: #ff7070; }
body[data-theme-mode="os2045"] .browser-bookmarks-empty {
  color: var(--ink-3, #6d7695);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}

/* Status bar */
body[data-theme-mode="os2045"] .browser-statusbar {
  font-size: 11px;
  color: var(--ink-3, #6d7695);
  font-family: 'JetBrains Mono', monospace;
  padding: 4px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Download modal */
body[data-theme-mode="os2045"] .browser-download-modal {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-theme-mode="os2045"] .browser-download-modal[hidden] { display: none; }
body[data-theme-mode="os2045"] .browser-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme-mode="os2045"] .browser-modal-card {
  position: relative;
  background: rgba(30, 33, 48, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 22px 26px;
  width: 480px;
  max-width: 92%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
body[data-theme-mode="os2045"] .browser-modal-card h3 {
  margin: 0 0 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1, #d6d8e2);
}
body[data-theme-mode="os2045"] .browser-modal-card label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--ink-3, #6d7695);
}
body[data-theme-mode="os2045"] .browser-modal-card input,
body[data-theme-mode="os2045"] .browser-modal-card select {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-1, #d6d8e2);
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
  font-family: inherit;
  outline: none;
}
body[data-theme-mode="os2045"] .browser-modal-card input:focus,
body[data-theme-mode="os2045"] .browser-modal-card select:focus {
  border-color: rgba(124, 140, 255, 0.7);
}
body[data-theme-mode="os2045"] .browser-modal-msg {
  font-size: 12px;
  margin: 6px 0 12px;
  min-height: 16px;
  font-family: 'JetBrains Mono', monospace;
}
body[data-theme-mode="os2045"] .browser-modal-msg.error { color: #ff8080; }
body[data-theme-mode="os2045"] .browser-modal-msg.success { color: #6dffa6; }
body[data-theme-mode="os2045"] .browser-modal-msg.info { color: #a0adff; }
body[data-theme-mode="os2045"] .browser-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
body[data-theme-mode="os2045"] .browser-modal-buttons button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink-1, #d6d8e2);
  padding: 7px 16px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .browser-modal-buttons .primary {
  background: linear-gradient(180deg, #7c8cff 0%, #5b6dff 100%);
  border-color: rgba(124, 140, 255, 0.6);
  color: #fff;
}
body[data-theme-mode="os2045"] .browser-modal-buttons .primary:hover {
  filter: brightness(1.08);
}

/* ──────── End Bugsweep-3 overrides ─────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   Files Explorer (Windows-Style) — Phase files-explorer
   Overrides legacy .files-* rules with a multi-pane layout:
   toolbar + actions row + sidebar + content + statusbar.
   ═══════════════════════════════════════════════════════════════════ */
body[data-theme-mode="os2045"] .os-window-body .fx-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  background: var(--bg-0, transparent);
  color: var(--ink, #eef2ff);
  min-width: 0;
  min-height: 0;
}
/* fx-toolbar / fx-actions-row / fx-statusbar shrink to content; fx-body grows */
body[data-theme-mode="os2045"] .os-window-body .fx-shell > .fx-toolbar,
body[data-theme-mode="os2045"] .os-window-body .fx-shell > .fx-actions-row,
body[data-theme-mode="os2045"] .os-window-body .fx-shell > .fx-statusbar {
  flex: 0 0 auto;
}
body[data-theme-mode="os2045"] .os-window-body .fx-shell > .fx-body {
  flex: 1 1 auto;
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-window-body .fx-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
}
body[data-theme-mode="os2045"] .os-window-body .fx-toolbar .fx-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #eef2ff);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-theme-mode="os2045"] .os-window-body .fx-toolbar .fx-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--glass-edge, rgba(255,255,255,0.18));
}
body[data-theme-mode="os2045"] .os-window-body .fx-toolbar .fx-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
body[data-theme-mode="os2045"] .os-window-body .fx-address {
  flex: 1 1 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.18));
  border-radius: 6px;
  min-width: 200px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
body[data-theme-mode="os2045"] .os-window-body .fx-address-input {
  flex: 1 1 auto;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 6px 10px;
  color: var(--ink, #eef2ff);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
body[data-theme-mode="os2045"] .os-window-body .fx-address:focus-within {
  border-color: var(--theme-accent, #7c8cff);
}
body[data-theme-mode="os2045"] .os-window-body .fx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
body[data-theme-mode="os2045"] .os-window-body .fx-breadcrumb .crumb {
  color: var(--theme-accent, #7c8cff);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
}
body[data-theme-mode="os2045"] .os-window-body .fx-breadcrumb .crumb:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: underline;
}
body[data-theme-mode="os2045"] .os-window-body .fx-breadcrumb .sep {
  color: var(--ink-3, rgba(255,255,255,0.5));
  margin: 0 2px;
  cursor: default;
}
body[data-theme-mode="os2045"] .os-window-body .fx-search {
  width: 200px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.18));
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--ink, #eef2ff);
  font-size: 12px;
  outline: none;
}
body[data-theme-mode="os2045"] .os-window-body .fx-search:focus {
  border-color: var(--theme-accent, #7c8cff);
}
body[data-theme-mode="os2045"] .os-window-body .fx-view-toggle {
  display: flex;
  gap: 2px;
}
body[data-theme-mode="os2045"] .os-window-body .fx-view-toggle button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-3, rgba(255,255,255,0.6));
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-theme-mode="os2045"] .os-window-body .fx-view-toggle button:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink, #eef2ff);
}
body[data-theme-mode="os2045"] .os-window-body .fx-view-toggle button.active {
  background: rgba(124, 140, 255, 0.15);
  color: var(--theme-accent, #7c8cff);
  border-color: var(--glass-edge, rgba(255,255,255,0.18));
}

/* Actions row (Mkdir / Upload / ZIP + current path) */
body[data-theme-mode="os2045"] .os-window-body .fx-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  /* Override legacy .files-actions inline button styles */
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--ink, #eef2ff) !important;
}
body[data-theme-mode="os2045"] .os-window-body .fx-action {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--glass-edge, rgba(255,255,255,0.18)) !important;
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--ink, #eef2ff) !important;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .os-window-body .fx-action:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
body[data-theme-mode="os2045"] .os-window-body .fx-spacer { flex: 1; }
body[data-theme-mode="os2045"] .os-window-body .fx-current-path {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3, rgba(255,255,255,0.55));
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-theme-mode="os2045"] .os-window-body .fx-current-path:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink, #eef2ff);
}

/* Body: sidebar + main */
body[data-theme-mode="os2045"] .os-window-body .fx-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
  overflow: hidden;
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar {
  background: rgba(255,255,255,0.02);
  border-right: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  padding: 8px 0;
  overflow-y: auto;
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-section {
  margin-bottom: 8px;
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3, rgba(255,255,255,0.55));
  text-transform: uppercase;
  padding: 8px 16px 4px;
  letter-spacing: 0.08em;
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-list li {
  padding: 6px 16px;
  color: var(--ink, #eef2ff);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
/* Make sure clicks anywhere inside the sidebar row land on the <li>
   (which carries the data-action attribute). Without this, a click on
   the icon-span or the text-span has e.target === that span, the
   CSP-dispatcher's e.target.closest('[data-action]') still bubbles up
   to the li, but pointer-events on the inner spans pinned to none keeps
   the bubble path clean and avoids text-selection oddities. */
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-list li * {
  pointer-events: none;
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-list li:hover {
  background: rgba(255,255,255,0.06);
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-list li.active {
  background: rgba(124, 140, 255, 0.15);
  color: var(--theme-accent, #7c8cff);
}
body[data-theme-mode="os2045"] .os-window-body .fx-sidebar-list .fx-ico {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
}
body[data-theme-mode="os2045"] .os-window-body .fx-pin-current {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 6px;
  background: transparent;
  border: 1px dashed var(--glass-edge, rgba(255,255,255,0.18));
  color: var(--ink-3, rgba(255,255,255,0.55));
  cursor: pointer;
  font-size: 11px;
  border-radius: 4px;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .os-window-body .fx-pin-current:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink, #eef2ff);
}

body[data-theme-mode="os2045"] .os-window-body .fx-main {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
body[data-theme-mode="os2045"] .os-window-body .fx-content {
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 0;
}

/* View-mode switching (table vs grid) */
body[data-theme-mode="os2045"] .os-window-body[data-files-view="details"] #filesGrid { display: none; }
body[data-theme-mode="os2045"] .os-window-body[data-files-view="icons-large"] #filesTable,
body[data-theme-mode="os2045"] .os-window-body[data-files-view="icons-small"] #filesTable,
body[data-theme-mode="os2045"] .os-window-body[data-files-view="list"] #filesTable { display: none; }

body[data-theme-mode="os2045"] .os-window-body[data-files-view="icons-large"] #filesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
body[data-theme-mode="os2045"] .os-window-body[data-files-view="icons-small"] #filesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
body[data-theme-mode="os2045"] .os-window-body[data-files-view="list"] #filesGrid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Grid item presentation */
body[data-theme-mode="os2045"] .os-window-body .fx-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  color: var(--ink, #eef2ff);
}
body[data-theme-mode="os2045"] .os-window-body .fx-grid-item:hover {
  background: rgba(255,255,255,0.06);
}
body[data-theme-mode="os2045"] .os-window-body .fx-grid-item.selected {
  background: rgba(124, 140, 255, 0.18);
}
body[data-theme-mode="os2045"] .os-window-body .fx-grid-item .icon {
  font-size: 32px;
  margin-bottom: 4px;
  line-height: 1;
}
body[data-theme-mode="os2045"] .os-window-body[data-files-view="icons-small"] .fx-grid-item .icon {
  font-size: 22px;
}
body[data-theme-mode="os2045"] .os-window-body .fx-grid-item .name {
  font-size: 12px;
  color: var(--ink, #eef2ff);
  word-break: break-word;
  line-height: 1.3;
  max-width: 100%;
}
body[data-theme-mode="os2045"] .os-window-body .fx-grid-item .meta {
  font-size: 10px;
  color: var(--ink-3, rgba(255,255,255,0.55));
  margin-top: 2px;
}

/* List variant: rows instead of icons */
body[data-theme-mode="os2045"] .os-window-body[data-files-view="list"] .fx-grid-item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 4px 8px;
  gap: 8px;
}
body[data-theme-mode="os2045"] .os-window-body[data-files-view="list"] .fx-grid-item .icon {
  font-size: 18px;
  margin-bottom: 0;
}
body[data-theme-mode="os2045"] .os-window-body[data-files-view="list"] .fx-grid-item .meta {
  margin-left: auto;
  margin-top: 0;
}

/* Statusbar */
body[data-theme-mode="os2045"] .os-window-body .fx-statusbar {
  display: flex;
  gap: 16px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  font-size: 11px;
  color: var(--ink-3, rgba(255,255,255,0.55));
  flex-shrink: 0;
}

/* Keep "Modified" + perm columns visible only when wide */
body[data-theme-mode="os2045"] .os-window-body .files-table th.modified,
body[data-theme-mode="os2045"] .os-window-body .files-table td.modified {
  font-size: 11px;
  color: var(--ink-3, rgba(255,255,255,0.6));
  white-space: nowrap;
}

/* Mobile: collapse sidebar */
@media (max-width: 720px) {
  body[data-theme-mode="os2045"] .os-window-body .fx-body {
    grid-template-columns: 1fr;
  }
  body[data-theme-mode="os2045"] .os-window-body .fx-sidebar {
    display: none;
  }
  body[data-theme-mode="os2045"] .os-window-body .fx-search {
    width: 120px;
  }
}
/* ──────── End Phase files-explorer ─────────────────────────────── */

/* ──────── Wave-B Browser-Polish ─────────────────────────────────── */
/* Find-in-Page bar, URL-Autocomplete, Zoom-Controls, Inkognito */

body[data-theme-mode="os2045"] .browser-url-wrap {
  position: relative;
  flex: 1;
  display: flex;
}
body[data-theme-mode="os2045"] .browser-url-wrap .browser-url {
  flex: 1;
}
body[data-theme-mode="os2045"] .browser-url-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #14182a;
  border: 1px solid rgba(124, 140, 255, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
body[data-theme-mode="os2045"] .browser-url-suggest-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink-1, #d6d8e2);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
body[data-theme-mode="os2045"] .browser-url-suggest-item:hover,
body[data-theme-mode="os2045"] .browser-url-suggest-item.active {
  background: rgba(124, 140, 255, 0.18);
}
body[data-theme-mode="os2045"] .browser-url-suggest-icon {
  font-size: 13px;
  color: var(--ink-3, #6d7695);
  text-align: center;
}
body[data-theme-mode="os2045"] .browser-url-suggest-label {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme-mode="os2045"] .browser-url-suggest-url {
  font-size: 11px;
  color: var(--ink-3, #6d7695);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* Find-in-Page bar — sits below toolbar, above stage */
body[data-theme-mode="os2045"] .browser-find-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #11142a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body[data-theme-mode="os2045"] .browser-find-bar[hidden] {
  display: none;
}
body[data-theme-mode="os2045"] .browser-find-input {
  flex: 1;
  background: #0c0f1c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--ink-1, #d6d8e2);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
}
body[data-theme-mode="os2045"] .browser-find-input:focus {
  border-color: rgba(124, 140, 255, 0.6);
}
body[data-theme-mode="os2045"] .browser-find-count {
  font-size: 12px;
  color: var(--ink-3, #6d7695);
  font-family: 'JetBrains Mono', monospace;
  min-width: 48px;
  text-align: center;
}

/* Zoom label button — narrow, monospace, looks like a chip */
body[data-theme-mode="os2045"] .browser-zoom-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  min-width: 48px;
  padding: 0 6px;
}

/* Inkognito-button & shell tinting */
body[data-theme-mode="os2045"] .browser-btn[data-act="incognito"].active {
  background: rgba(124, 140, 255, 0.25);
  color: #c9d0ff;
}
body[data-theme-mode="os2045"] .browser-incognito .browser-toolbar,
body[data-theme-mode="os2045"] .browser-incognito .browser-tabs {
  background: linear-gradient(180deg, #15182d 0%, #0e1020 100%);
  border-bottom-color: rgba(124, 140, 255, 0.25);
}
body[data-theme-mode="os2045"] .browser-incognito .browser-statusbar::before {
  content: '◐ Inkognito ';
  color: #9aa6ff;
  margin-right: 6px;
  font-weight: 600;
}

/* Loading indicator — animated underline below toolbar */
body[data-theme-mode="os2045"] .browser-shell.browser-loading .browser-toolbar {
  position: relative;
}
body[data-theme-mode="os2045"] .browser-shell.browser-loading .browser-toolbar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 30%;
  background: linear-gradient(90deg, transparent, #7c8cff, transparent);
  animation: browser-loading-bar 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes browser-loading-bar {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* ──────── End Wave-B Browser-Polish ──────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────
   Multi-Instance Files-Pane (.fxp-*).
   Mounted by mountFilesPane() into a fresh OS-window content container.
   ──────────────────────────────────────────────────────────────────── */
body[data-theme-mode="os2045"] .os-window-body.fxp-mount {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0;
}
body[data-theme-mode="os2045"] .fxp-mount,
body[data-theme-mode="os2045"] .fxp-window-host {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body[data-theme-mode="os2045"] .fxp-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(20, 22, 32, 0.55);
  color: var(--ink-1, #d6d8e2);
  font-family: inherit;
  min-height: 0;
}
body[data-theme-mode="os2045"] .fxp-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
body[data-theme-mode="os2045"] .fxp-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-1, #d6d8e2);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
body[data-theme-mode="os2045"] .fxp-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}
body[data-theme-mode="os2045"] .fxp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
body[data-theme-mode="os2045"] .fxp-address {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-1, #d6d8e2);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
}
body[data-theme-mode="os2045"] .fxp-address:focus {
  border-color: rgba(124, 140, 255, 0.7);
  background: rgba(0, 0, 0, 0.35);
}
body[data-theme-mode="os2045"] .fxp-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
body[data-theme-mode="os2045"] .fxp-sidebar {
  width: 200px;
  flex: 0 0 200px;
  background: rgba(0, 0, 0, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  overflow-y: auto;
  padding: 10px 0;
  font-size: 12.5px;
}
body[data-theme-mode="os2045"] .fxp-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-theme-mode="os2045"] .fxp-sidebar li {
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
  color: var(--ink-2, #aab1c5);
  user-select: none;
}
body[data-theme-mode="os2045"] .fxp-sidebar li:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-1, #d6d8e2);
}
body[data-theme-mode="os2045"] .fxp-sidebar li.active {
  background: rgba(124, 140, 255, 0.12);
  border-left-color: #7c8cff;
  color: var(--ink-1, #d6d8e2);
}
body[data-theme-mode="os2045"] .fxp-sidebar-title {
  padding: 12px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, #6d7695);
  font-weight: 600;
}
body[data-theme-mode="os2045"] .fxp-content {
  flex: 1;
  overflow: auto;
  position: relative;
  outline: none;
}
body[data-theme-mode="os2045"] .fxp-content:focus {
  box-shadow: inset 0 0 0 2px rgba(124, 140, 255, 0.18);
}
body[data-theme-mode="os2045"] .fxp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
body[data-theme-mode="os2045"] .fxp-table thead th {
  position: sticky;
  top: 0;
  background: rgba(20, 22, 32, 0.95);
  text-align: left;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3, #6d7695);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1;
}
body[data-theme-mode="os2045"] .fxp-table th.size,
body[data-theme-mode="os2045"] .fxp-table td.size {
  width: 90px;
  text-align: right;
}
body[data-theme-mode="os2045"] .fxp-table th.modified,
body[data-theme-mode="os2045"] .fxp-table td.modified {
  width: 160px;
  white-space: nowrap;
}
body[data-theme-mode="os2045"] .fxp-table tbody tr {
  cursor: default;
  user-select: none;
}
body[data-theme-mode="os2045"] .fxp-table tbody tr td {
  padding: 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
body[data-theme-mode="os2045"] .fxp-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}
body[data-theme-mode="os2045"] .fxp-table tbody tr.selected {
  background: rgba(124, 140, 255, 0.18);
}
body[data-theme-mode="os2045"] .fxp-table tbody tr.dir td.name {
  color: #8fb6ff;
}
body[data-theme-mode="os2045"] .fxp-table tbody tr.symlink td.name {
  color: #ffd479;
  font-style: italic;
}
body[data-theme-mode="os2045"] .fxp-table .ic {
  margin-right: 4px;
}
body[data-theme-mode="os2045"] .fxp-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-3, #6d7695);
}
body[data-theme-mode="os2045"] .fxp-error {
  color: #ff6e6e;
  padding: 12px;
}
body[data-theme-mode="os2045"] .fxp-statusbar {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--ink-3, #6d7695);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.25);
}
body[data-theme-mode="os2045"] .fxp-spacer { flex: 1; }
body[data-theme-mode="os2045"] .fxp-dropoverlay {
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(124, 140, 255, 0.6);
  background: rgba(124, 140, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #b8c3ff;
  pointer-events: none;
  z-index: 2;
}
body[data-theme-mode="os2045"] .fxp-table tbody tr.fxp-droprow {
  background: rgba(124, 140, 255, 0.32) !important;
  outline: 2px solid rgba(124, 140, 255, 0.7);
  outline-offset: -2px;
}
/* Drag feedback in the singleton too */
body[data-theme-mode="os2045"] #filesBrowser .fx-drop-active {
  outline: 2px dashed rgba(124, 140, 255, 0.6);
  outline-offset: -3px;
}
body[data-theme-mode="os2045"] #filesBrowser tr.fx-droprow,
body[data-theme-mode="os2045"] #filesBrowser .fx-grid-item.fx-droprow {
  background: rgba(124, 140, 255, 0.32) !important;
  outline: 2px solid rgba(124, 140, 255, 0.7);
  outline-offset: -2px;
}
/* Desktop drop hint while dragging files */
body[data-theme-mode="os2045"].os-desktop-drop-hint .os-desktop-grid::before {
  content: 'Hier loslassen → Verknüpfung erstellen';
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(124, 140, 255, 0.85);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  pointer-events: none;
  z-index: 9999;
}
/* ──────── End Multi-Instance Files-Pane ─────────────────────────── */