/* Nexxus Shared App Shell — themes + layout + sentinel mode + clearance gate.
 *
 * 10 public themes ship enabled below; 10 architect-tier themes are
 * declared but reach the same default palette until the Pouffekey-gated
 * unlock sets `data-architect-theme` on the body.
 *
 * Each theme defines:
 *   --bg, --bg-2          background base + secondary
 *   --panel               panel background (translucent)
 *   --line                hairline border
 *   --ink, --dim          primary + secondary text
 *   --accent, --accent-2  brand colours
 *   --good, --warn, --bad, --panic  semantic colours
 *   --font-display        title font stack
 *   --font-body           body font stack
 *   --font-mono           code/security-report font stack
 *   --bg-image            optional PNG/SVG background reference
 *   --motif-svg           per-theme decorative SVG fragment
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--ink);
  font-family: var(--font-body, ui-monospace, "JetBrains Mono", Consolas, monospace);
  background: var(--bg);
  transition: background 0.5s, color 0.3s;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Theme: Living Lotus (default) ─────────────────────────────── */
body, body[data-theme="living-lotus"] {
  --bg: #1a0a14; --bg-2: #2a1525;
  --panel: rgba(42, 21, 37, 0.85);
  --line: #4a2a3a; --ink: #f5e6d8; --dim: #b08a98;
  --accent: #e6b07a; --accent-2: #f0c490;
  --good: #88d9a8; --warn: #f0c46d; --bad: #e88379; --panic: #d96fc1;
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --bg-image: url("/assets/themes/living-lotus/bg-1.png");
}
body[data-theme="living-lotus"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(230,176,122,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 82%, rgba(217,111,193,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(136,217,168,0.06) 0%, transparent 70%),
    linear-gradient(160deg, #1a0a14 0%, #2a1525 100%);
  animation: nx-pulse 16s ease-in-out infinite alternate;
}

/* ─── Theme: Star Court ─────────────────────────────────────────── */
body[data-theme="star-court"] {
  --bg: #06081a; --bg-2: #0c1130;
  --panel: rgba(12, 17, 48, 0.85);
  --line: #2a3260; --ink: #d8dcff; --dim: #7e84b6;
  --accent: #c8c8e8; --accent-2: #9b9fff;
  --good: #6fd99a; --warn: #f0c46d; --bad: #ee6b6b; --panic: #d96fc1;
  --font-display: "Cinzel", "Trajan Pro", serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bg-image: url("/assets/themes/star-court/bg-1.png");
}
body[data-theme="star-court"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 8%, #ffffff 0px, transparent 1.5px),
    radial-gradient(circle at 28% 36%, #ffffff 0px, transparent 1px),
    radial-gradient(circle at 64% 18%, #ffffff 0px, transparent 1.5px),
    radial-gradient(circle at 82% 78%, #ffffff 0px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(155,159,255,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #06081a 0%, #0c1130 100%);
  animation: nx-drift 30s ease-in-out infinite alternate;
}

/* ─── Theme: Glass Cathedral ────────────────────────────────────── */
body[data-theme="glass-cathedral"] {
  --bg: #0e1422; --bg-2: #16213a;
  --panel: rgba(220, 235, 255, 0.10);
  --line: rgba(255, 255, 255, 0.18);
  --ink: #eef4ff; --dim: #9eb1cd;
  --accent: #a8c8ff; --accent-2: #d4e4ff;
  --good: #88d9a8; --warn: #f0c46d; --bad: #f0848c; --panic: #c884f0;
  --font-display: "Inter", -apple-system, sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --bg-image: url("/assets/themes/glass-cathedral/bg-1.png");
}
body[data-theme="glass-cathedral"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(120deg, rgba(168,200,255,0.12) 0%, transparent 40%),
    linear-gradient(60deg, rgba(212,228,255,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0e1422 0%, #16213a 100%);
  backdrop-filter: blur(16px);
}
body[data-theme="glass-cathedral"] .panel {
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* ─── Theme: Liquid Aurora ──────────────────────────────────────── */
body[data-theme="liquid-aurora"] {
  --bg: #050818; --bg-2: #0a1230;
  --panel: rgba(10, 18, 48, 0.78);
  --line: #2a3870; --ink: #e0eaff; --dim: #8a98c0;
  --accent: #6effa0; --accent-2: #c47aff;
  --good: #6effa0; --warn: #f0c46d; --bad: #ff7088; --panic: #c47aff;
  --font-display: "Manrope", "Inter", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --bg-image: url("/assets/themes/liquid-aurora/bg-1.png");
}
body[data-theme="liquid-aurora"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    conic-gradient(from 200deg at 30% 60%, transparent, rgba(110,255,160,0.20), transparent, rgba(196,122,255,0.18), transparent),
    radial-gradient(ellipse at 80% 30%, rgba(255,112,136,0.14) 0%, transparent 50%),
    linear-gradient(180deg, #050818 0%, #0a1230 100%);
  animation: nx-aurora 22s ease-in-out infinite alternate;
}

/* ─── Theme: Vellum & Ink ───────────────────────────────────────── */
body[data-theme="vellum-ink"] {
  --bg: #ede4d2; --bg-2: #e3d6bd;
  --panel: rgba(255, 250, 240, 0.92);
  --line: #b09a78; --ink: #2c1810; --dim: #6a584a;
  --accent: #6e2a1a; --accent-2: #8a3a28;
  --good: #4a7a3e; --warn: #b08220; --bad: #a8302a; --panic: #6e2a4a;
  --font-display: "EB Garamond", "Garamond", Georgia, serif;
  --font-body: "EB Garamond", serif;
  --font-mono: "Source Code Pro", monospace;
  --bg-image: url("/assets/themes/vellum-ink/bg-1.png");
}
body[data-theme="vellum-ink"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(110,42,26,0.06) 0%, transparent 50%),
    radial-gradient(circle at 12% 88%, rgba(110,42,26,0.04) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(110,90,50,0.025) 6px 7px),
    linear-gradient(180deg, #ede4d2 0%, #e3d6bd 100%);
}

/* ─── Theme: Tide Pool ──────────────────────────────────────────── */
body[data-theme="tide-pool"] {
  --bg: #02141c; --bg-2: #042430;
  --panel: rgba(4, 36, 48, 0.85);
  --line: #1d5d7a; --ink: #d6f4ff; --dim: #6e9ab4;
  --accent: #4ff0d9; --accent-2: #9c8aff;
  --good: #6fdcc0; --warn: #f0c46d; --bad: #ff7a8a; --panic: #c570ff;
  --font-display: "Spectral", Georgia, serif;
  --font-body: "Spectral", serif;
  --font-mono: "JetBrains Mono", monospace;
  --bg-image: url("/assets/themes/tide-pool/bg-1.png");
}
body[data-theme="tide-pool"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(79,240,217,0.20) 0%, transparent 55%),
    radial-gradient(circle at 30% 30%, rgba(156,138,255,0.10) 0%, transparent 30%),
    linear-gradient(180deg, #02141c 0%, #051f30 100%);
  animation: nx-tide 18s ease-in-out infinite alternate;
}

/* ─── Theme: Bone Architecture ──────────────────────────────────── */
body[data-theme="bone-architecture"] {
  --bg: #0a0a0a; --bg-2: #141414;
  --panel: rgba(26, 26, 26, 0.92);
  --line: #5a3a3a; --ink: #f4ebd8; --dim: #b09a8a;
  --accent: #f4ebd8; --accent-2: #c44a3a;
  --good: #88c47a; --warn: #f0c46d; --bad: #c44a3a; --panic: #a02a6e;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --bg-image: url("/assets/themes/bone-architecture/bg-1.png");
}
body[data-theme="bone-architecture"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(244,235,216,0.04) 60px 61px),
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(244,235,216,0.04) 60px 61px),
    linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
}

/* ─── Theme: Soul Lantern ───────────────────────────────────────── */
body[data-theme="soul-lantern"] {
  --bg: #1a0e0a; --bg-2: #2a1a14;
  --panel: rgba(42, 26, 20, 0.88);
  --line: #6a4830; --ink: #f4d4a8; --dim: #b89880;
  --accent: #e88830; --accent-2: #f0c060;
  --good: #88c870; --warn: #f0c060; --bad: #d04a3a; --panic: #c870a8;
  --font-display: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Shippori Mincho", serif;
  --font-mono: "JetBrains Mono", monospace;
  --bg-image: url("/assets/themes/soul-lantern/bg-1.png");
}
body[data-theme="soul-lantern"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 22% 30%, rgba(232,136,48,0.20) 0%, transparent 30%),
    radial-gradient(circle at 78% 70%, rgba(240,192,96,0.12) 0%, transparent 35%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(232,136,48,0.018) 4px 5px),
    linear-gradient(180deg, #1a0e0a 0%, #2a1a14 100%);
  animation: nx-pulse 20s ease-in-out infinite alternate;
}

/* ─── Theme: Quartz Helix ───────────────────────────────────────── */
body[data-theme="quartz-helix"] {
  --bg: #1a0a2a; --bg-2: #2a1a4a;
  --panel: rgba(42, 26, 74, 0.85);
  --line: #5a3a8a; --ink: #f0eaff; --dim: #a0a0d0;
  --accent: #c4a8ff; --accent-2: #ffd0e0;
  --good: #80f0c0; --warn: #f0c46d; --bad: #ff7090; --panic: #d070ff;
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --bg-image: url("/assets/themes/quartz-helix/bg-1.png");
}
body[data-theme="quartz-helix"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(196,168,255,0.08) 60deg, transparent 120deg, rgba(255,208,224,0.06) 180deg, transparent 240deg, rgba(128,240,192,0.05) 300deg, transparent 360deg),
    linear-gradient(180deg, #1a0a2a 0%, #2a1a4a 100%);
  animation: nx-spin 60s linear infinite;
}

/* ─── Theme: Hex-Grid Neural ────────────────────────────────────── */
body[data-theme="hex-grid-neural"] {
  --bg: #050010; --bg-2: #08001a;
  --panel: rgba(8, 0, 26, 0.90);
  --line: #00b4d8; --ink: #c8f4ff; --dim: #5e8eaf;
  --accent: #00f0ff; --accent-2: #ff70d0;
  --good: #62ff8c; --warn: #ffd166; --bad: #ff4d6d; --panic: #ff2bd6;
  --font-display: "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --bg-image: url("/assets/themes/hex-grid-neural/bg-1.png");
}
body[data-theme="hex-grid-neural"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(60deg, transparent 0 18px, rgba(0,240,255,0.05) 18px 19px),
    repeating-linear-gradient(-60deg, transparent 0 18px, rgba(0,240,255,0.05) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,240,255,0.04) 18px 19px),
    linear-gradient(180deg, #050010 0%, #08001a 100%);
  animation: nx-scanline 8s linear infinite;
}

/* Architect-tier themes (10) — declared, palette ships as variants
   of public themes for now; the user calibrates the final aesthetic
   later. Each retains a unique data-theme attribute so the JS can
   gate hidden capabilities by name. */
body[data-theme="obsidian-mirror"]   {
  --bg:#000; --bg-2:#0a0a18; --panel:rgba(10,10,24,0.92); --line:#3a2a4a;
  --ink:#e8e0f0; --dim:#7a708a; --accent:#9c70d0; --accent-2:#c4a8ff;
  --good:#80c8a0; --warn:#d8b860; --bad:#d06070; --panic:#a04ad8;
  --font-display:"Cormorant Garamond",serif; --font-body:"Inter",sans-serif; --font-mono:"JetBrains Mono",monospace;
  --bg-image:url("/assets/themes/obsidian-mirror/bg-1.png");
}
body[data-theme="iron-veil"] {
  --bg:#1a1a18; --bg-2:#28281c; --panel:rgba(40,40,28,0.92); --line:#5a4818;
  --ink:#e8d8b0; --dim:#a89878; --accent:#f0c060; --accent-2:#d8a040;
  --good:#80b888; --warn:#f0c060; --bad:#d8503a; --panic:#a83078;
  --font-display:"Inter",sans-serif; --font-body:"Inter",sans-serif; --font-mono:"IBM Plex Mono",monospace;
  --bg-image:url("/assets/themes/iron-veil/bg-1.png");
}
body[data-theme="ash-garden"] {
  --bg:#181818; --bg-2:#222; --panel:rgba(34,34,34,0.92); --line:#5a3030;
  --ink:#e0d8d0; --dim:#807870; --accent:#d04830; --accent-2:#f06848;
  --good:#80b888; --warn:#d8a840; --bad:#d04830; --panic:#a83078;
  --font-display:"EB Garamond",serif; --font-body:"Inter",sans-serif; --font-mono:"JetBrains Mono",monospace;
  --bg-image:url("/assets/themes/ash-garden/bg-1.png");
}
body[data-theme="verdant-pact"] {
  --bg:#0a1a0a; --bg-2:#142814; --panel:rgba(20,40,20,0.88); --line:#3a5a30;
  --ink:#e0f0c8; --dim:#80a080; --accent:#c8a040; --accent-2:#80b860;
  --good:#a0d870; --warn:#f0c060; --bad:#c84840; --panic:#a83080;
  --font-display:"Cormorant Garamond",serif; --font-body:"Inter",sans-serif; --font-mono:"JetBrains Mono",monospace;
  --bg-image:url("/assets/themes/verdant-pact/bg-1.png");
}
body[data-theme="arctic-sigil"] {
  --bg:#e8eef4; --bg-2:#dde4ed; --panel:rgba(255,255,255,0.88); --line:#90a8c0;
  --ink:#1a2838; --dim:#607890; --accent:#3070b0; --accent-2:#6090c8;
  --good:#308860; --warn:#a07028; --bad:#a03038; --panic:#704098;
  --font-display:"Inter",sans-serif; --font-body:"Inter",sans-serif; --font-mono:"IBM Plex Mono",monospace;
  --bg-image:url("/assets/themes/arctic-sigil/bg-1.png");
}
body[data-theme="cinder-halo"] {
  --bg:#180808; --bg-2:#281010; --panel:rgba(40,16,16,0.92); --line:#7a3018;
  --ink:#f0d0b8; --dim:#b08070; --accent:#f06040; --accent-2:#f8a070;
  --good:#80b888; --warn:#f0c060; --bad:#f06040; --panic:#c84090;
  --font-display:"Cinzel",serif; --font-body:"Inter",sans-serif; --font-mono:"IBM Plex Mono",monospace;
  --bg-image:url("/assets/themes/cinder-halo/bg-1.png");
}
body[data-theme="bronze-reliquary"] {
  --bg:#1a1408; --bg-2:#2a1c0c; --panel:rgba(42,28,12,0.92); --line:#6a4818;
  --ink:#f0d8a8; --dim:#a08868; --accent:#c08840; --accent-2:#3070b0;
  --good:#80b888; --warn:#c08840; --bad:#a83828; --panic:#704098;
  --font-display:"Cormorant Garamond",serif; --font-body:"EB Garamond",serif; --font-mono:"Source Code Pro",monospace;
  --bg-image:url("/assets/themes/bronze-reliquary/bg-1.png");
}
body[data-theme="onyx-tongue"] {
  --bg:#0a0014; --bg-2:#180028; --panel:rgba(24,0,40,0.92); --line:#4a2870;
  --ink:#f0e0f8; --dim:#9080a8; --accent:#c870ff; --accent-2:#ffd0f0;
  --good:#80d8a0; --warn:#f0c060; --bad:#d06080; --panic:#c870ff;
  --font-display:"Cormorant Garamond",serif; --font-body:"Inter",sans-serif; --font-mono:"JetBrains Mono",monospace;
  --bg-image:url("/assets/themes/onyx-tongue/bg-1.png");
}
body[data-theme="cedar-court"] {
  --bg:#1c1208; --bg-2:#2c1c0c; --panel:rgba(44,28,12,0.92); --line:#7a5028;
  --ink:#f0d8b0; --dim:#a89070; --accent:#c89048; --accent-2:#e8c070;
  --good:#80b878; --warn:#c89048; --bad:#a83828; --panic:#704098;
  --font-display:"EB Garamond",serif; --font-body:"EB Garamond",serif; --font-mono:"Source Code Pro",monospace;
  --bg-image:url("/assets/themes/cedar-court/bg-1.png");
}
body[data-theme="helios-crown"] {
  --bg:#1c1810; --bg-2:#2c2818; --panel:rgba(44,40,24,0.92); --line:#7a6028;
  --ink:#f8e8b8; --dim:#b8a878; --accent:#f0c440; --accent-2:#ffe890;
  --good:#a0c870; --warn:#f0c440; --bad:#c84830; --panic:#a850a0;
  --font-display:"Cinzel",serif; --font-body:"Inter",sans-serif; --font-mono:"IBM Plex Mono",monospace;
  --bg-image:url("/assets/themes/helios-crown/bg-1.png");
}

/* ─── Theme PNG art layer ─────────────────────────────────────── */
/*
 * Every theme defines --bg-image (defaulting to its bg-1.png).
 * This rule overlays a soft, blended copy of the image *behind* the
 * panel content but *above* the ::before gradient. The result: themes
 * have real painterly imagery without the imagery overpowering text.
 *
 * Pages can opt into a different art slot by setting
 * <body data-art="bg-3"> or similar; the JS shell rewrites
 * --bg-image accordingly.
 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
  filter: saturate(1.1);
}

/* When the 3D WebGL layer is present, dim the PNG slightly so they
   don't compete. */
body:has(.nx-3d-canvas)::after {
  opacity: 0.22;
}

/* ─── Animations ──────────────────────────────────────────────── */
@keyframes nx-pulse    { 0%{filter:brightness(1)} 100%{filter:brightness(1.18)} }
@keyframes nx-drift    { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(8deg)} }
@keyframes nx-aurora   { 0%{background-position:0 0,0 0,0 0} 100%{background-position:30% 30%,60% -10%,0 0} }
@keyframes nx-tide     { 0%{filter:brightness(1)} 100%{filter:brightness(1.1)} }
@keyframes nx-scanline { 0%{background-position:0 0,0 0,0 0,0 0} 100%{background-position:18px 18px,-18px 18px,18px 0,0 0} }
@keyframes nx-spin     { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes nx-shimmer  { 0%{opacity:0.7} 100%{opacity:1} }

/* ─── Universal layout ────────────────────────────────────────── */
.nx-shell { padding: 18px 24px 36px; max-width: 1180px; margin: 0 auto; }
.nx-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; backdrop-filter: blur(8px);
  font-family: var(--font-body);
}
.nx-topbar h1 {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0; font-size: 18px;
}
.nx-topbar .nx-tagline { color: var(--dim); font-size: 11px; }
.nx-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nx-controls select, .nx-controls button {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
}
.nx-controls select:hover, .nx-controls button:hover {
  border-color: var(--accent); color: var(--accent);
}
.nx-controls button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.nx-main { font-family: var(--font-body); }

/* Locked-app overlay (clearance gate) */
.nx-locked {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-family: var(--font-display);
}
.nx-locked-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px 40px; max-width: 420px;
  text-align: center; color: var(--ink);
}
.nx-locked-card h2 {
  color: var(--accent); margin: 0 0 8px 0; font-size: 20px;
  letter-spacing: 0.15em; text-transform: uppercase; border: 0; padding: 0;
}
.nx-locked-card p { color: var(--dim); font-size: 13px; line-height: 1.5; margin: 8px 0; }
.nx-locked-card .nx-tier {
  font-family: var(--font-mono); font-size: 28px; color: var(--accent);
  margin: 12px 0;
}
.nx-locked-card button {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: 10px 16px; border-radius: 4px; cursor: pointer; font-family: var(--font-mono);
  margin-top: 16px;
}
.nx-locked-card button:hover { background: var(--accent); color: var(--bg); }

/* Pouffekey display canvas — animated mandala. */
.nx-pouffekey-display {
  width: 240px; height: 240px;
  margin: 16px auto;
  background: var(--bg-2);
  border: 2px solid var(--accent);
  border-radius: 16px;
  display: block;
}

/* Sentinel mode */
.nx-sentinel-banner {
  display: none; padding: 8px 16px; font-size: 11px;
  background: rgba(238,107,107,0.15); border-left: 3px solid var(--bad);
  color: var(--bad); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 8px;
}
body.nx-sentinel-tripped .nx-sentinel-banner { display: block; }
body.nx-sentinel-tripped .nx-protected {
  font-family: monospace !important; color: transparent !important;
  text-shadow: 0 0 8px var(--bad); animation: nx-shimmer 0.4s steps(2) infinite;
}

/* Living Wallpaper degraded states */
body.nx-vpn-down::before, body.nx-kissmar-down::before {
  filter: saturate(0.3) brightness(0.6);
}
body.nx-killswitch-tripped::before {
  filter: grayscale(1) contrast(1.3) brightness(0.4);
  animation: none !important;
}
body.nx-vpn-down::after, body.nx-kissmar-down::after, body.nx-killswitch-tripped::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: var(--bad); z-index: 9999;
  animation: nx-shimmer 0.6s steps(2) infinite;
}

/* NXL terminal panel */
.nx-terminal {
  position: fixed; left: 0; right: 0; bottom: -45vh;
  height: 45vh; max-height: 600px;
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid var(--accent);
  font-family: var(--font-mono);
  z-index: 8500;
  display: flex; flex-direction: column;
  transition: bottom 0.25s ease-out;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
}
.nx-terminal.open { bottom: 0; }
.nx-terminal-bar {
  padding: 6px 12px; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.nx-terminal-bar .nx-tclose {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 2px 8px; cursor: pointer; font-family: inherit; font-size: 10px;
  border-radius: 3px;
}
.nx-terminal-out {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  font-size: 12px; color: #e0e8f0; white-space: pre-wrap;
  line-height: 1.45;
}
.nx-terminal-line { margin: 0 0 4px 0; }
.nx-terminal-line.cmd { color: var(--accent); }
.nx-terminal-line.err { color: var(--bad); }
.nx-terminal-line.ok  { color: var(--good); }
.nx-terminal-input-row {
  display: flex; align-items: center; padding: 6px 14px;
  border-top: 1px solid var(--line);
}
.nx-terminal-prompt { color: var(--accent); margin-right: 8px; user-select: none; }
.nx-terminal-input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: #e0e8f0; font-family: inherit; font-size: 12px; padding: 4px 0;
}

/* Pills & badges (used by pages) */
.nx-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line); margin-right: 4px;
  font-family: var(--font-mono);
}
.nx-pill.real { color: var(--good); border-color: var(--good); }
.nx-pill.warn { color: var(--warn); border-color: var(--warn); }
.nx-pill.bad { color: var(--bad); border-color: var(--bad); }
.nx-pill.panic { color: var(--panic); border-color: var(--panic); }