/* Themes: Dark (default), Light, Blueprint Lab (physics), Enchanted Realm (fantasy), and seasonal Winter / Monsoon / Diwali / Spring.
 *  - New pages (.hop-page) are themed through CSS variables.
 *  - Older pages get a light-mode inversion or a soft colour wash, so every screen follows the chosen theme.
 *  - theme.js adds the drifting particles (snow, rain, fireflies, petals, sparks).
 */

/* ── variables for the .hop-page family ───────────────────────────────── */
html[data-theme="light"] .hop-page { --hop-bg: #f2f5fb; --hop-surface: #ffffff; --hop-surface-2: #eef2f9; --hop-border: rgba(30, 41, 59, 0.14); --hop-text: #172033; --hop-muted: #5b6880; --hop-accent: #0891b2; --hop-accent-2: #b7791f; --hop-shadow: 0 8px 28px rgba(30, 41, 59, 0.12); }
html[data-theme="physics"] .hop-page { --hop-bg: #04182b; --hop-surface: #072742; --hop-surface-2: #0a3357; --hop-border: rgba(56, 189, 248, 0.28); --hop-text: #dff4ff; --hop-muted: #7fb4d4; --hop-accent: #38bdf8; --hop-accent-2: #67e8f9; }
html[data-theme="fantasy"] .hop-page { --hop-bg: #150b2e; --hop-surface: #22124a; --hop-surface-2: #2c1a5e; --hop-border: rgba(216, 180, 254, 0.25); --hop-text: #f3e8ff; --hop-muted: #b9a4dd; --hop-accent: #c084fc; --hop-accent-2: #fbbf24; }
html[data-theme="winter"] .hop-page { --hop-bg: #0b1a2d; --hop-surface: #12294a; --hop-surface-2: #183760; --hop-border: rgba(186, 230, 253, 0.28); --hop-text: #eaf6ff; --hop-muted: #93b6d3; --hop-accent: #7dd3fc; --hop-accent-2: #e0f2fe; }
html[data-theme="monsoon"] .hop-page { --hop-bg: #0a1a17; --hop-surface: #10302a; --hop-surface-2: #163d35; --hop-border: rgba(110, 231, 183, 0.22); --hop-text: #e6fbf3; --hop-muted: #86b8a8; --hop-accent: #34d399; --hop-accent-2: #a7f3d0; }
html[data-theme="diwali"] .hop-page { --hop-bg: #1c0a05; --hop-surface: #33140a; --hop-surface-2: #431c0e; --hop-border: rgba(251, 191, 36, 0.28); --hop-text: #fff2dc; --hop-muted: #d3a878; --hop-accent: #f59e0b; --hop-accent-2: #fde68a; }
html[data-theme="spring"] .hop-page { --hop-bg: #0c1f14; --hop-surface: #143423; --hop-surface-2: #1b4630; --hop-border: rgba(249, 168, 212, 0.25); --hop-text: #effdf3; --hop-muted: #93c2a3; --hop-accent: #f472b6; --hop-accent-2: #bef264; }
html[data-theme="sanctuary"] .hop-page { --hop-bg: #0a1712; --hop-surface: #10261d; --hop-surface-2: #163425; --hop-border: rgba(134, 239, 172, 0.24); --hop-text: #eaf6ee; --hop-muted: #93b8a2; --hop-accent: #5eead4; --hop-accent-2: #f5c451; }
html[data-theme="light"] body.hop-page, html[data-theme="light"] .du-body, html[data-theme="light"] .vt-body { background: var(--hop-bg) !important; }
html[data-theme="light"] .hop-btn.primary { color: #04141a; }
html[data-theme="light"] .hop-input, html[data-theme="light"] .hop-select, html[data-theme="light"] .hop-textarea { background: #fff; }
html[data-theme="light"] .hop-table th { background: #e6ecf6; }

/* ── legacy pages: light mode by inverting the page, keeping pictures natural ─ */
html[data-theme="light"]:not(:has(body.hop-page)) { filter: invert(0.93) hue-rotate(180deg); background: #fff; }
html[data-theme="light"]:not(:has(body.hop-page)) :is(img, video, canvas, iframe, .pg-paper-card, .gm-sheet, .gm-node button, .gm-toast) { filter: invert(1) hue-rotate(180deg); }

/* ── colour washes for everything else ──────────────────────────────────── */
html[data-theme="physics"] body::after,
html[data-theme="fantasy"] body::after,
html[data-theme="winter"] body::after,
html[data-theme="monsoon"] body::after,
html[data-theme="diwali"] body::after,
html[data-theme="spring"] body::after,
html[data-theme="sanctuary"] body::after {
  content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none; mix-blend-mode: soft-light;
}
html[data-theme="physics"] body::after { background: linear-gradient(rgba(56, 189, 248, 0.18) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(56, 189, 248, 0.18) 1px, transparent 1px) 0 0 / 34px 34px, rgba(14, 116, 200, 0.28); mix-blend-mode: normal; opacity: 0.55; }
html[data-theme="fantasy"] body::after { background: radial-gradient(ellipse at 50% 0%, rgba(192, 132, 252, 0.6), transparent 70%), rgba(88, 28, 135, 0.45); }
html[data-theme="winter"] body::after { background: linear-gradient(180deg, rgba(186, 230, 253, 0.7), rgba(59, 130, 246, 0.4)); }
html[data-theme="monsoon"] body::after { background: linear-gradient(180deg, rgba(16, 185, 129, 0.45), rgba(15, 118, 110, 0.5)); }
html[data-theme="diwali"] body::after { background: radial-gradient(ellipse at 50% 100%, rgba(251, 191, 36, 0.65), rgba(220, 38, 38, 0.35) 70%); }
html[data-theme="sanctuary"] body::after { background: radial-gradient(ellipse at 50% 0%, rgba(245, 196, 81, 0.35), transparent 60%), linear-gradient(180deg, rgba(20, 90, 60, 0.4), rgba(6, 40, 30, 0.5)); }
html[data-theme="spring"] body::after { background: linear-gradient(180deg, rgba(244, 114, 182, 0.4), rgba(132, 204, 22, 0.4)); }

/* ── theme + install button (dashboard only — see js/theme.js) ───────────── */
.hop-fab { position: fixed; right: 14px; bottom: 96px; z-index: 9999; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 22, 36, 0.92); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.hop-fab:hover { border-color: #22d3ee; transform: scale(1.06); }
.hop-panel { position: fixed; right: 14px; bottom: 150px; z-index: 9999; width: min(300px, calc(100vw - 28px)); padding: 14px; border-radius: 18px; background: rgba(12, 18, 32, 0.97); border: 1px solid rgba(148, 163, 184, 0.3); color: #e6ebf5; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); font-family: 'Outfit', system-ui, sans-serif; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); overflow-y: auto; }
.hop-panel h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fcd34d; }
.hop-panel .t { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; margin-bottom: 6px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.hop-panel .t.on { border-color: #22d3ee; background: rgba(34, 211, 238, 0.12); }
.hop-panel .t.locked { opacity: 0.55; }
.hop-panel .t i { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.25); }
.hop-panel small { color: #8b97ad; display: block; font-size: 11px; }
.hop-panel a.more { display: block; text-align: center; margin-top: 8px; font-size: 12px; color: #67e8f9; }
.hop-panel .install { width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; background: linear-gradient(135deg, #c9a84c, #e8a825); color: #1a1a2e; }
html[data-theme="light"] .hop-fab, html[data-theme="light"] .hop-panel { filter: invert(1) hue-rotate(180deg); }
.t.dark i { background: linear-gradient(135deg, #0b1220, #1e293b); } .t.light i { background: linear-gradient(135deg, #fefce8, #dbeafe); } .t.physics i { background: linear-gradient(135deg, #062a4a, #0ea5e9); }
.t.fantasy i { background: linear-gradient(135deg, #2e1065, #d4a017); } .t.winter i { background: linear-gradient(135deg, #cfe8ff, #4a90d9); } .t.monsoon i { background: linear-gradient(135deg, #12372a, #4b8f8c); }
.t.sanctuary i { background: linear-gradient(135deg, #0f3d2a, #5eead4 55%, #f5c451); }
.t.diwali i { background: linear-gradient(135deg, #3b0a0a, #f59e0b); } .t.spring i { background: linear-gradient(135deg, #14532d, #f9a8d4); }

@media print { .hop-fab, .hop-panel, body::after { display: none !important; } }

/* light-mode touch-ups for the newer pages (their dark-mode accents are too pale on white) */
html[data-theme="light"] .hop-tab.on { color: #0e7490; background: rgba(8, 145, 178, 0.12); }
html[data-theme="light"] .hop-btn:hover { color: #0e7490; }
html[data-theme="light"] .hop-alert.ok { color: #166534; } html[data-theme="light"] .hop-alert.err { color: #b91c1c; } html[data-theme="light"] .hop-alert.info { color: #0e7490; }
html[data-theme="light"] .hop-muted { color: #5b6880; } html[data-theme="light"] .ws-rankline, html[data-theme="light"] .ws-h { color: #b7791f; }
html[data-theme="light"] .hop-pill.easy { color: #15803d; } html[data-theme="light"] .hop-pill.medium { color: #b45309; } html[data-theme="light"] .hop-pill.hard { color: #b91c1c; }
html[data-theme="light"] .hop-btn.danger { color: #b91c1c; } html[data-theme="light"] .vt-card .ext { color: #0e7490; } html[data-theme="light"] .cm-pod strong { color: #b45309; }
html[data-theme="light"] .hop-table th { color: #475569; } html[data-theme="light"] .hop-crumb { color: #475569; }