/* BlockBloom "Night" theme (the default).
   Same layout as the paper theme, re-lit: deep indigo glass, an aurora that drifts
   behind the canvas and page headers, neon pink / sun / violet accents.
   Switch with the ☾/☀ button in the top bar; the choice is remembered. */

:root[data-theme='night'] {
  --paper: #0b0920;
  --panel: rgba(24, 20, 60, 0.72);
  --panel-solid: #17133a;
  --ink: #f2f0ff;
  --ink-2: #b7b2de;
  --line: rgba(255, 255, 255, 0.13);
  --tint: rgba(255, 255, 255, 0.055);
  --pink: #ff4f87;
  --sun: #ffce3a;
  --teal: #3ee6c1;
  --violet: #8b6bff;
  --edge: rgba(255, 255, 255, 0.16);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 60px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

@keyframes nt-aurora {
  0% { transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(6%, 4%, 0) rotate(160deg) scale(1.15); }
  100% { transform: translate3d(-8%, -6%, 0) rotate(360deg) scale(1); }
}
@keyframes nt-hue { to { filter: hue-rotate(360deg); } }
@keyframes nt-spin { to { --angle: 360deg; } }

[data-theme='night'] body { background: var(--paper); }
/* The aurora: three blurred color fields that slowly orbit behind everything. */
[data-theme='night'] body::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 32% at 22% 28%, rgba(255, 79, 135, 0.28), transparent 70%),
    radial-gradient(30% 34% at 78% 22%, rgba(139, 107, 255, 0.32), transparent 70%),
    radial-gradient(34% 30% at 60% 82%, rgba(62, 230, 193, 0.18), transparent 70%),
    radial-gradient(22% 24% at 30% 80%, rgba(255, 206, 58, 0.14), transparent 70%);
  filter: blur(40px) saturate(130%);
  animation: nt-aurora 38s ease-in-out infinite;
}
[data-theme='night'] body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px);
  background-size: 24px 24px;
}

[data-theme='night'] a { color: var(--ink); }
[data-theme='night'] a:hover { color: #fff; }
[data-theme='night'] .skip-link { background: var(--pink); }
[data-theme='night'] kbd { background: rgba(255, 255, 255, 0.08); border-color: var(--edge); color: var(--ink); }

/* ---------- top bar ---------- */
[data-theme='night'] .topbar {
  background: rgba(11, 9, 32, 0.6); border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
[data-theme='night'] .site-nav a[aria-current='page'] { background: linear-gradient(100deg, var(--pink), var(--violet)); color: #fff; box-shadow: 0 6px 20px -6px rgba(255, 79, 135, 0.7); }
[data-theme='night'] .site-nav a:hover { background: var(--tint); }

/* ---------- buttons ---------- */
[data-theme='night'] .btn { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); color: var(--ink); border-radius: 10px; }
[data-theme='night'] .btn:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); }
[data-theme='night'] .btn-primary, [data-theme='night'] .menu > summary.btn-primary {
  background: linear-gradient(100deg, var(--pink), var(--violet)); border-color: transparent; color: #fff;
  box-shadow: 0 8px 24px -8px rgba(255, 79, 135, 0.8);
}
[data-theme='night'] .btn-primary:hover { filter: brightness(1.1); }
[data-theme='night'] .btn-danger { color: #ff7b9f; border-color: rgba(255, 123, 159, 0.5); }
[data-theme='night'] .btn-bloom { border-color: transparent; box-shadow: 0 0 22px -4px rgba(255, 177, 58, 0.7); }
[data-theme='night'] .menu-list { background: var(--panel-solid); border: 1px solid var(--edge); box-shadow: 0 24px 60px -20px #000, 0 0 0 1px rgba(255, 79, 135, 0.2); }
[data-theme='night'] .menu-list button { color: var(--ink); }
[data-theme='night'] .icon-btn { color: var(--ink); }
[data-theme='night'] .icon-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--edge); }

.theme-toggle { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 1.05rem; line-height: 1; }

/* ---------- studio panels ---------- */
[data-theme='night'] .shelf, [data-theme='night'] .inspector {
  background: var(--panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
[data-theme='night'] .shelf { border-right: 1px solid var(--edge); }
[data-theme='night'] .inspector { border-left: 1px solid var(--edge); }
[data-theme='night'] .tabs { background: var(--panel-solid); border-bottom-color: var(--edge); }
[data-theme='night'] .shelf-group h2 {
  background: linear-gradient(90deg, #fff, #c9bfff); -webkit-background-clip: text; background-clip: text; color: transparent;
}

[data-theme='night'] .tile {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--edge); box-shadow: 0 0 0 0 transparent, 3px 3px 0 rgba(255, 79, 135, 0.85);
}
[data-theme='night'] .tile:hover { box-shadow: 0 0 26px -6px rgba(255, 79, 135, 0.9), 4px 4px 0 var(--sun); border-color: rgba(255, 255, 255, 0.35); }
[data-theme='night'] .tile svg { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
[data-theme='night'] .template-card { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); }
[data-theme='night'] .template-card:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px -8px rgba(139, 107, 255, 0.9), 4px 4px 0 var(--pink); }
[data-theme='night'] .template-card.blank svg { background: rgba(255, 255, 255, 0.9); }

/* The stage: the canvas floats on a glowing, slowly rotating halo. */
[data-theme='night'] .canvas-frame { position: relative; isolation: isolate; }
[data-theme='night'] .canvas-frame::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(96%, 96vh); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--angle), #ff4f87, #ffce3a, #3ee6c1, #8b6bff, #ff4f87);
  filter: blur(70px); opacity: 0.38; animation: nt-spin 18s linear infinite;
}
[data-theme='night'] #canvas {
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 30px 90px -20px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(139, 107, 255, 0.55);
}
[data-theme='night'] .stage-hint, [data-theme='night'] .stage-status { color: var(--ink-2); }
[data-theme='night'] .monitor { background: rgba(11, 9, 32, 0.7); border-color: var(--edge); }
[data-theme='night'] .switch input, [data-theme='night'] .check input { accent-color: var(--pink); }

/* inspector */
[data-theme='night'] .insp-head .kind { color: var(--teal); }
[data-theme='night'] .insp-head input[type='text'] { color: var(--ink); }
[data-theme='night'] .insp-head input[type='text']:focus { border-color: var(--pink); }
[data-theme='night'] .section { border-top-color: var(--line); }
[data-theme='night'] .section > summary::before { border-color: var(--ink); }
[data-theme='night'] input[type='number'], [data-theme='night'] select, [data-theme='night'] .field input[type='text'],
[data-theme='night'] input[type='color'] {
  background: rgba(8, 6, 26, 0.7); color: var(--ink); border-color: var(--edge);
}
[data-theme='night'] select option { background: var(--panel-solid); color: var(--ink); }
[data-theme='night'] input[type='range'] { accent-color: var(--pink); }
[data-theme='night'] .swatch { border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 12px -2px rgba(0, 0, 0, 0.6); }
[data-theme='night'] .repeat-card { background: linear-gradient(160deg, rgba(139, 107, 255, 0.14), rgba(255, 79, 135, 0.06)); border: 1px solid var(--edge); }
[data-theme='night'] .repeat-card header .order { background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; }
[data-theme='night'] .repeat-card .warn { color: #ffe29a; background: rgba(255, 206, 58, 0.12); }

/* layers */
[data-theme='night'] .layers { border-top: 1px solid var(--edge); }
[data-theme='night'] .layer:hover { background: var(--tint); }
[data-theme='night'] .layer.is-selected { background: linear-gradient(90deg, rgba(255, 79, 135, 0.85), rgba(139, 107, 255, 0.85)); box-shadow: 0 6px 20px -8px rgba(255, 79, 135, 0.9); }
[data-theme='night'] .layer-name { color: var(--ink); }

/* toast + dialog */
[data-theme='night'] .toast { background: linear-gradient(100deg, #2a2266, #3a2358); color: #fff; border: 1px solid var(--edge); box-shadow: 0 20px 50px -15px #000, 0 0 30px -10px rgba(255, 79, 135, 0.8); }
[data-theme='night'] dialog { background: var(--panel-solid); color: var(--ink); border: 1px solid var(--edge); box-shadow: 0 30px 90px -20px #000, 0 0 0 1px rgba(255, 79, 135, 0.3); }
[data-theme='night'] dialog::backdrop { background: rgba(5, 3, 18, 0.7); backdrop-filter: blur(4px); }

/* ---------- reading pages ---------- */
[data-theme='night'] .page-read { background: transparent; }
[data-theme='night'] .read-hero { background: transparent; border-bottom: 1px solid var(--edge); position: relative; overflow: hidden; isolation: isolate; }
[data-theme='night'] .read-hero::before {
  content: ''; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--angle) at 70% 50%, rgba(255, 79, 135, 0.4), rgba(255, 206, 58, 0.25), rgba(62, 230, 193, 0.25), rgba(139, 107, 255, 0.45), rgba(255, 79, 135, 0.4));
  filter: blur(90px); animation: nt-spin 24s linear infinite;
}
[data-theme='night'] .read-hero h1 { color: #fff; text-shadow: 0 0 40px rgba(139, 107, 255, 0.55); }
[data-theme='night'] .hero-strip svg { border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 16px 40px -14px #000, 0 0 30px -12px rgba(255, 79, 135, 0.8); }
[data-theme='night'] .prose h2 { border-top: 1px solid var(--edge); }
[data-theme='night'] .prose h2::before { content: ''; display: block; width: 3.5rem; height: 4px; border-radius: 4px; margin: -1.1rem 0 0.9rem; background: linear-gradient(90deg, var(--pink), var(--sun)); }
[data-theme='night'] .demo svg { border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 14px 34px -16px #000; }
[data-theme='night'] .demo figure:hover svg { box-shadow: 0 0 34px -8px rgba(255, 79, 135, 0.8); }
[data-theme='night'] .callout { background: linear-gradient(100deg, rgba(255, 206, 58, 0.12), rgba(255, 255, 255, 0.03)); }
[data-theme='night'] .ref-list li { background: rgba(255, 255, 255, 0.045); border-color: var(--edge); }
[data-theme='night'] .ref-list li:hover { border-color: rgba(255, 79, 135, 0.6); }
[data-theme='night'] .ref-list .tag { color: var(--teal); }
[data-theme='night'] .toc { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--edge); border-radius: 16px; padding: 1rem 1.1rem; backdrop-filter: blur(10px); }
[data-theme='night'] .site-foot { background: rgba(11, 9, 32, 0.7); border-top: 1px solid var(--edge); }
[data-theme='night'] .playground { background: var(--panel-solid); border: 1px solid var(--edge); box-shadow: 0 30px 70px -30px #000, 0 0 40px -18px rgba(255, 206, 58, 0.7); }
[data-theme='night'] .playground .pg-view { border-right-color: var(--edge); }
[data-theme='night'] .playground .pg-readout { background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }
[data-theme='night'] .playground .seg { border-color: var(--edge); }
[data-theme='night'] .playground .seg button { background: transparent; color: var(--ink); }
[data-theme='night'] .playground .seg button[aria-pressed='true'] { background: linear-gradient(100deg, var(--pink), var(--violet)); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  [data-theme='night'] body::before, [data-theme='night'] .canvas-frame::before, [data-theme='night'] .read-hero::before { animation: none; }
}
@media (max-width: 760px) {
  [data-theme='night'] .playground .pg-view { border-bottom-color: var(--edge); }
}