/* ==========================================================================
   AquaCubs — dark-mode.css
   "Night pool" theme: deep navy water, glowing aqua, softened sun accent.
   Activated by html[data-theme="dark"] (set before paint, see <head>).
   ========================================================================== */

/* ---------- Tokens ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061528;
  --bg-alt: #0B2140;
  --surface: #0F2A4D;
  --surface-2: #12325A;
  --ink: #EAF6FB;
  --ink-soft: #A7C3D8;
  --line: rgba(160, 220, 240, .14);
  --line-strong: rgba(160, 220, 240, .26);
  --brand-text: #6FE3EE;
  --aqua: #2FD3E2;
  --aqua-ink: #13A9BA;
  --aqua-soft: #12425E;
  --aqua-mist: #0E2C4A;
  --sun: #F5C451;
  --tile: rgba(47, 211, 226, .07);
  --ok: #4CD08A;
  --ok-soft: rgba(76, 208, 138, .14);
  --warn: #F3B451;
  --warn-soft: rgba(243, 180, 81, .14);
  --muted: #9AAABD;
  --muted-soft: rgba(154, 170, 189, .14);
  --danger: #FF8A7E;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(47, 211, 226, .06);
  --shadow-sm: 0 10px 26px -12px rgba(0, 0, 0, .7);
  --wave-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M1 5q3.25-4 6.5 0t6.5 0 6.5 0 6.5 0' fill='none' stroke='%236FE3EE' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(47, 211, 226, .10), transparent 60%),
    var(--bg);
}
html[data-theme="dark"] ::selection { background: var(--aqua); color: #061528; }
html[data-theme="dark"] .icon-btn .icon-sun { display: none; }
html[data-theme="dark"] .icon-btn .icon-moon { display: block; }
html[data-theme="dark"] img[src*="lesson-"], html[data-theme="dark"] img[src*="facility-"], html[data-theme="dark"] img[src*="instructor-"], html[data-theme="dark"] img[src*="hero-"], html[data-theme="dark"] img[src*="team"], html[data-theme="dark"] img[src*="video-"] { filter: brightness(.88) saturate(1.05); }

/* ---------- Logo ---------- */
html[data-theme="dark"] .logo-eye { fill: #061528; }
html[data-theme="dark"] .logo-drop { fill: var(--aqua); filter: drop-shadow(0 0 8px rgba(47, 211, 226, .5)); }

/* ---------- Header / menu ---------- */
html[data-theme="dark"] .site-header.is-scrolled { background: rgba(6, 21, 40, .74); }
html[data-theme="dark"] .nav-float { background: rgba(47, 211, 226, .16); box-shadow: inset 0 0 0 1px rgba(47, 211, 226, .35); }
html[data-theme="dark"] .nav-link[aria-current="page"],
html[data-theme="dark"] .nav-link.is-current { color: var(--aqua); }
html[data-theme="dark"] .nav-drop-menu a[aria-current="page"] {
  background: var(--aqua-soft);
  color: var(--ink);
}
html[data-theme="dark"] .menu-overlay { background: #030D1B; }
html[data-theme="dark"] .menu-overlay .menu-water { color: #030D1B; }
html[data-theme="dark"] .scroll-swimmer { color: var(--aqua); }

/* ---------- Buttons ---------- */
html[data-theme="dark"] .btn { --btn-bg: #EAF6FB; --btn-fg: #061528; }
html[data-theme="dark"] .btn-sun { --btn-bg: var(--sun); --btn-fg: #061528; box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); }
html[data-theme="dark"] .btn-sun:hover { box-shadow: 0 0 30px -6px rgba(245, 196, 81, .55); }
html[data-theme="dark"] .btn-aqua { --btn-bg: var(--aqua); --btn-fg: #061528; }
html[data-theme="dark"] .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
html[data-theme="dark"] .btn-light { --btn-bg: #EAF6FB; --btn-fg: #061528; }
html[data-theme="dark"] .icon-btn { background: var(--surface); }

/* ---------- Hero, water, bubbles ---------- */
html[data-theme="dark"] .porthole-img { box-shadow: 0 0 0 6px rgba(47, 211, 226, .15), 0 30px 80px -30px rgba(47, 211, 226, .45); }
html[data-theme="dark"] .porthole-ring { border-color: var(--aqua); opacity: .35; }
html[data-theme="dark"] .water-surface .w-back { fill: #13A9BA; opacity: .22; }
html[data-theme="dark"] .water-surface .w-mid { fill: #13A9BA; opacity: .32; }
html[data-theme="dark"] .water-surface .w-shine { stroke: var(--aqua); opacity: .8; filter: drop-shadow(0 0 6px rgba(47, 211, 226, .8)); }
html[data-theme="dark"] .bubble { border-color: rgba(47, 211, 226, .45); background: radial-gradient(circle at 30% 30%, rgba(160, 240, 250, .7) 0 12%, rgba(47, 211, 226, .05) 13%); }
html[data-theme="dark"] .tile-grid { background-color: transparent; }
html[data-theme="dark"] .safety-strip svg { color: var(--ok); }

/* ---------- Marquee & statement ---------- */
html[data-theme="dark"] .marquee { background: #030D1B; }
html[data-theme="dark"] .marquee.is-light { background: var(--sun); color: #061528; }
html[data-theme="dark"] .statement .w { color: rgba(234, 246, 251, .16); }
html[data-theme="dark"] .statement .w.is-lit { color: var(--ink); }
html[data-theme="dark"] .statement .w.hl.is-lit { color: var(--aqua); text-shadow: 0 0 24px rgba(47, 211, 226, .45); }
html[data-theme="dark"] .fill-text { -webkit-text-stroke-color: var(--aqua); }

/* ---------- Sections ---------- */
html[data-theme="dark"] .bg-deep { background: #030D1B; }
html[data-theme="dark"] .journey-stage { background: linear-gradient(#0E2C4A, #0E2C4A 46%, transparent 46%); }
html[data-theme="dark"] .journey-deck { background: #1B3A61; }
html[data-theme="dark"] .pool-map > svg { filter: brightness(.82) saturate(1.1); }
html[data-theme="dark"] .hotspot { background: var(--sun); color: #061528; }
html[data-theme="dark"] .prog-list, html[data-theme="dark"] .faq { border-top-color: var(--aqua); }
html[data-theme="dark"] .prog-row a:hover .go { color: #061528; }
html[data-theme="dark"] .badge-face.back { background: #030D1B; border-color: rgba(47, 211, 226, .35); }
html[data-theme="dark"] .medal-ribbon-a { fill: #1B3A61; }
html[data-theme="dark"] .medal-face { fill: #EAF6FB; }
html[data-theme="dark"] .medal-icon { stroke: #061528; }
html[data-theme="dark"] .big-cta { background: #030D1B; box-shadow: inset 0 0 0 1px rgba(47, 211, 226, .18); }
html[data-theme="dark"] .rise-water svg path { fill: #0A6E80; }
html[data-theme="dark"] .rise-water div { background: linear-gradient(#0A6E80, #06364A); }
html[data-theme="dark"] .faq details[open] .plus { color: #061528; }
html[data-theme="dark"] .mock-dash { background: var(--surface); }
html[data-theme="dark"] .mock-badges span { color: #061528; }
html[data-theme="dark"] .quote-dots button[aria-current="true"]::before { background: var(--aqua); }

/* ---------- Footer ---------- */
html[data-theme="dark"] .site-footer { background: #030D1B; }
html[data-theme="dark"] .footer-water .fw-a { fill: #030D1B; }
html[data-theme="dark"] .footer-wordmark .acc { color: var(--aqua); text-shadow: 0 0 40px rgba(47, 211, 226, .35); }

/* ---------- Forms ---------- */
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: #0A2240; }
html[data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%236FE3EE' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .check .box::before { background: var(--aqua); }
html[data-theme="dark"] .check .box::after { border-color: #061528; }
html[data-theme="dark"] .switch input:checked + .track { background: var(--aqua); }
html[data-theme="dark"] .chip input:checked + span, html[data-theme="dark"] button.chip[aria-pressed="true"] { background: var(--aqua); color: #061528; border-color: var(--aqua); }
html[data-theme="dark"] .newsletter .field input { background: rgba(255, 255, 255, .05); }

/* ---------- Panels, modals, tables, tabs, toasts ---------- */
html[data-theme="dark"] .side-panel { box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .overlay-backdrop { background: rgba(1, 6, 14, .7); }
html[data-theme="dark"] .data-table thead th { background: #0B2140; }
html[data-theme="dark"] .tab[aria-selected="true"] { color: #061528; }
html[data-theme="dark"] .tab-indicator { background: var(--aqua); }
html[data-theme="dark"] .toast { background: #12325A; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(47, 211, 226, .25); }

/* ---------- Home 2 (underwater) ---------- */
html[data-theme="dark"] .uw-bg { background: linear-gradient(180deg, #0B2140 0%, #0A2E4E 30%, #052238 62%, #010812 100%); background-size: 100% 400%; background-position: 0 calc(var(--depth) * 100%); }
html[data-theme="dark"] .kick-card { box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .kick-card:nth-child(1) { --card-bg: #EAF6FB; }
html[data-theme="dark"] .kick-card:nth-child(2) { --card-bg: #BDEFF4; }
html[data-theme="dark"] .kick-card:nth-child(3) { --card-bg: #FBE3A4; }
html[data-theme="dark"] .kick-card:nth-child(4) { --card-bg: #B5DCFA; }
html[data-theme="dark"] .kick-card .btn { --btn-bg: #061528; --btn-fg: #fff; }
html[data-theme="dark"] .kick-card .btn-ghost { --btn-bg: transparent; --btn-fg: #061528; }
html[data-theme="dark"] .plan.is-featured { box-shadow: 0 0 60px -20px rgba(245, 196, 81, .6); }
html[data-theme="dark"] .plan.is-featured .btn { --btn-bg: #061528; --btn-fg: #fff; }
html[data-theme="dark"] .vslider { box-shadow: 0 0 0 1px rgba(47, 211, 226, .25), 0 40px 80px -40px rgba(47, 211, 226, .4); }

/* ---------- About / Programs / Instructors ---------- */
html[data-theme="dark"] .milestone::before { background: var(--bg); }
html[data-theme="dark"] .method-step:nth-child(3) { background: #2A2410; }
html[data-theme="dark"] .method-step:nth-child(4) { background: #030D1B; }
html[data-theme="dark"] .cert .seal { background: #030D1B; }
html[data-theme="dark"] .program-view { background: #030D1B; box-shadow: inset 0 0 0 1px rgba(47, 211, 226, .2); }
html[data-theme="dark"] .ripple-wipe { background: var(--aqua-ink); }
html[data-theme="dark"] .quiz { background: #2A2410; color: var(--ink); --ink: #FCEFC8; --ink-soft: #D9C68E; --surface: #3A3218; --line-strong: rgba(245, 196, 81, .35); }
html[data-theme="dark"] .quiz .btn { --btn-bg: var(--sun); --btn-fg: #061528; }
html[data-theme="dark"] .quiz .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
html[data-theme="dark"] .quiz-progress i { background: rgba(245, 196, 81, .2); }
html[data-theme="dark"] .quiz-progress i b { background: var(--sun); }
html[data-theme="dark"] .quiz .chip input:checked + span { background: var(--sun); color: #061528; border-color: var(--sun); }
html[data-theme="dark"] .roadmap .level-stop .dot { background: var(--aqua); color: #061528; }
html[data-theme="dark"] .ratio-kids i.coach { background: var(--sun); }
html[data-theme="dark"] .coach-card .coach-photo::after { color: #061528; }

/* ---------- Auth ---------- */
html[data-theme="dark"] .auth-scene { background: linear-gradient(#0B2140 0 48%, transparent 48%), #030D1B; }
@media (max-width: 999px) { html[data-theme="dark"] .auth-scene { background: linear-gradient(#0B2140 0 132px, transparent 132px), #030D1B; } }
html[data-theme="dark"] .auth-scene .logo { color: #EAF6FB; }
html[data-theme="dark"] .steps-lane li.is-done .marker { background: var(--aqua); border-color: var(--aqua); color: #061528; }

/* ---------- 404 / Coming soon ---------- */
html[data-theme="dark"] .lost-num { color: #EAF6FB; text-shadow: 0 0 60px rgba(47, 211, 226, .3); }
html[data-theme="dark"] .lost-num span:nth-child(2) { color: var(--aqua); }
html[data-theme="dark"] .soon-water svg path { fill: var(--aqua); opacity: .25; }

/* ---------- Dashboard ---------- */
html[data-theme="dark"] .dash-sidebar { background: #030D1B; border-inline-end: 1px solid var(--line); }
html[data-theme="dark"] .dash-nav a[aria-current="page"] { background: var(--aqua); color: #061528; box-shadow: 0 0 24px -6px rgba(47, 211, 226, .6); }
html[data-theme="dark"] .dash-top { background: rgba(6, 21, 40, .82); }
html[data-theme="dark"] .dash-card.is-deep { background: #030D1B; border-color: rgba(47, 211, 226, .25); }
html[data-theme="dark"] .dash-card.is-sun { background: #2A2410; color: #FCEFC8; border-color: rgba(245, 196, 81, .4); --ink-soft: #D9C68E; }
html[data-theme="dark"] .quick-actions a { background: rgba(245, 196, 81, .1); }
html[data-theme="dark"] .child-switch .pill-bg { background: var(--aqua); }
html[data-theme="dark"] .child-switch button[aria-pressed="true"] { color: #061528; }
html[data-theme="dark"] .pring .ring-water { fill: #13A9BA; }
html[data-theme="dark"] .pring .ring-arc { stroke: var(--aqua); filter: drop-shadow(0 0 6px rgba(47, 211, 226, .6)); }
html[data-theme="dark"] .enroll-steps li.is-current { background: var(--aqua); color: #061528; }
html[data-theme="dark"] .enroll-steps li.is-current i { background: #061528; border-color: #061528; color: var(--aqua); }
html[data-theme="dark"] .lane-levels li.is-done .lv { background: var(--aqua); border-color: var(--aqua); color: #061528; }
html[data-theme="dark"] .lane-journey .lane-line { background: repeating-linear-gradient(90deg, var(--sun) 0 12px, #1B3A61 12px 24px, var(--aqua) 24px 36px, #1B3A61 36px 48px); }
html[data-theme="dark"] .lane-marker { color: var(--aqua); }
html[data-theme="dark"] .chart .line { stroke: var(--aqua); filter: drop-shadow(0 0 6px rgba(47, 211, 226, .5)); }
html[data-theme="dark"] .chart .pt { stroke: var(--aqua); }
html[data-theme="dark"] .cls, html[data-theme="dark"] .mday .mcls, html[data-theme="dark"] .upcoming .when { color: #061528; }
html[data-theme="dark"] .week-grid .wh.is-today b { background: var(--aqua); color: #061528; }

/* ---------- Cursor, preloader, page transition ---------- */
html[data-theme="dark"] .cursor-dot { background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
html[data-theme="dark"] .cursor-ring.is-big .cursor-label { color: #061528; }
html[data-theme="dark"] .preloader { background: #061528; }
html[data-theme="dark"] .preloader-count, html[data-theme="dark"] .preloader-brand { color: #EAF6FB; }
html[data-theme="dark"] .preloader-water div { background: linear-gradient(#13A9BA, #052238); }
html[data-theme="dark"] .preloader-water svg path { fill: #13A9BA; }
html[data-theme="dark"] .page-wave .pw-body { background: #0A6E80; }

/* Theme switch reveal circle (water fill from the toggle) */
.theme-reveal { position: fixed; z-index: 2500; pointer-events: none; border-radius: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; transform: scale(0); }

/* Underwater sections sink into an even deeper night-pool blue */
html[data-theme="dark"] .uw-dark { background: linear-gradient(#05203A, #020A16); }
html[data-theme="dark"] .uw-live .dive { background: linear-gradient(transparent 0 12%, rgba(5,32,58,.9) 42%, #05203A); }