/* === IGCSE Physics Design Tokens (injected) === */
:root {
  --surface-page: #0f0f1a;
  --surface-card: #1a1a2e;
  --surface-elevated: #22223a;
  --surface-hover: #2a2a48;
  --surface-glass: rgba(26,26,46,0.85);
  --brand: #7DB6B1;
  --brand-light: #a3d4cf;
  --brand-dark: #5a9e98;
  --brand-glow: rgba(125,182,177,0.25);
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(125,182,177,0.2);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
  --font-sans: Lato, -apple-system, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-med: 400ms;
}

/* Variables (keep — used by custom page elements) */

:root {
            --primary: #3B82F6; --primary-dark: #1E40AF; --primary-light: #60A5FA;
            --accent: #0EA5E9; --secondary: #1E3A8A;
            --green: #10B981; --orange: #F59E0B; --red: #EF4444;
            --n100: #F8FAFC; --n200: #E2E8F0; --n300: #CBD5E1; --n400: #94A3B8;
            --n500: #64748B; --n600: #475569; --n700: #334155; --n800: #1E293B; --n900: #0F172A;
            --bg: linear-gradient(135deg, #3B82F6 0%, #1E3A8A 50%, #0EA5E9 100%);
            --card-bg: rgba(255,255,255,0.95); --card-border: rgba(255,255,255,0.2);
            --text: #334155; --text-light: #64748B;
            --sidebar-w: 260px;
        }
        .dark {
            --bg: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
            --card-bg: rgba(30,41,59,0.95); --card-border: rgba(51,65,85,0.5);
            --text: #E2E8F0; --text-light: #94A3B8;
            --n100: #1E293B; --n200: #334155; --n700: #E2E8F0; --n800: #F1F5F9;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6;
            color: var(--text); background: var(--bg); min-height: 100vh;
            overflow-x: hidden; transition: background 0.5s;
        }
        /* Floating decorations */
        .floats { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
        .floats span { position: absolute; opacity: 0.08; font-size: 2rem; animation: drift 8s ease-in-out infinite; }
        .floats span:nth-child(1) { top:8%; left:5%; animation-delay:0s; }
        .floats span:nth-child(2) { top:60%; right:8%; animation-delay:2s; animation-duration:10s; }
        .floats span:nth-child(3) { bottom:15%; left:15%; animation-delay:4s; animation-duration:12s; }
        .floats span:nth-child(4) { top:30%; right:20%; animation-delay:1s; animation-duration:9s; }
        @keyframes drift { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-25px) rotate(8deg);} }

        /* Top bar */
        .topbar {
            position: fixed; top:64px; left:0; right:0; height:56px; z-index:1000;
            background: rgba(15,23,42,0.85); backdrop-filter: blur(12px);
            display:flex; align-items:center; padding:0 1.5rem; gap:1rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .topbar .hamburger { display:none; background:none; border:none; color:white; font-size:1.5rem; cursor:pointer; padding:0.25rem; }
        .topbar .title { color:white; font-weight:700; font-size:1.1rem; flex:1; }
        .topbar .dark-toggle {
            background: rgba(255,255,255,0.15); border:none; color:white; padding:0.4rem 0.8rem;
            border-radius:9999px; cursor:pointer; font-size:0.9rem; transition:all 0.3s;
        }
        .topbar .dark-toggle:hover { background: rgba(255,255,255,0.25); }

        /* Sidebar */
        .sidebar {
            position: fixed; top:120px; left:0; bottom:0; width:var(--sidebar-w);
            background: rgba(15,23,42,0.9); backdrop-filter: blur(12px);
            overflow-y: auto; z-index:999; padding:1rem 0;
            border-right: 1px solid rgba(255,255,255,0.1);
            transition: transform 0.3s;
        }
        .sidebar a {
            display:block; padding:0.5rem 1.25rem; color:rgba(255,255,255,0.7);
            text-decoration:none; font-size:0.85rem; border-left:3px solid transparent;
            transition: all 0.2s;
        }
        .sidebar a:hover, .sidebar a.active { color:white; background:rgba(59,130,246,0.15); border-left-color: var(--primary); }
        .sidebar a.active { font-weight:600; }

        /* Main content */
        .main { margin-left: var(--sidebar-w); margin-top: 120px; padding: 2rem; max-width: 960px; position:relative; z-index:1; }

        /* Cards */
        .card {
            background: var(--card-bg); backdrop-filter: blur(20px);
            border: 1px solid var(--card-border); border-radius: 1.5rem;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); padding: 2rem;
            margin-bottom: 2rem; position:relative; overflow:hidden;
            transition: transform 0.3s, box-shadow 0.3s; opacity:0; transform:translateY(30px);
        }
        .card.visible { opacity:1; transform:translateY(0); transition: opacity 0.6s, transform 0.6s; }
        .card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--primary), var(--accent)); }
        .card:hover { transform:translateY(-3px); box-shadow: 0 25px 30px -5px rgba(0,0,0,0.15), 0 0 20px rgba(59,130,246,0.1); }
        .card.visible:hover { transform:translateY(-3px); }

        h1 { font-size:2.5rem; font-weight:700; color:white; text-align:center; margin:2rem 0 3rem;
             background:linear-gradient(135deg,#fff,#e2e8f0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        h2 { font-size:1.5rem; font-weight:700; color:var(--primary-dark); margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; }
        .dark h2 { color: var(--primary-light); }
        h2::before { content:''; width:4px; height:28px; background:linear-gradient(180deg,var(--primary),var(--accent)); border-radius:4px; flex-shrink:0; }
        h3 { font-size:1.2rem; font-weight:600; color:var(--primary); margin:1rem 0 0.5rem; }
        h4 { font-size:1.05rem; font-weight:600; color:var(--n700); margin:0.75rem 0 0.5rem; }

        p, li { margin-bottom:0.5rem; }
        ul { padding-left:1.5rem; }
        strong { color: var(--n800); }
        .dark strong { color: var(--n100); }

        /* Styled boxes */
        .outcomes { background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(14,165,233,0.05));
            border:1px solid rgba(59,130,246,0.2); border-radius:0.75rem; padding:1rem 1.25rem; margin-bottom:1.25rem; }
        .outcomes h4 { color:var(--primary-dark); }
        .outcomes li { list-style:none; padding-left:1.5rem; position:relative; }
        .outcomes li::before { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }

        .example { background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(217,119,6,0.05));
            border-left:4px solid var(--orange); border-radius:0.75rem; padding:1rem 1.25rem; margin:1rem 0; }
        .warning { background:linear-gradient(135deg,rgba(239,68,68,0.1),rgba(220,38,38,0.05));
            border-left:4px solid var(--red); border-radius:0.75rem; padding:1rem 1.25rem; margin:1rem 0; }
        .practical-box { background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(5,150,105,0.05));
            border-left:4px solid var(--green); border-radius:0.75rem; padding:1rem 1.25rem; margin:1rem 0; }
        .formula-box {
            background:linear-gradient(135deg,var(--primary-light),var(--primary));
            color:white; padding:1.25rem; border-radius:0.75rem; text-align:center;
            margin:1rem 0; font-weight:600; font-size:1.1rem; box-shadow:0 4px 12px rgba(59,130,246,0.3);
        }
        .formula-box p { margin:0.25rem 0; color:white; }

        /* Simulation containers */
        .sim-box {
            background:linear-gradient(135deg,rgba(59,130,246,0.04),rgba(14,165,233,0.02));
            border:1px solid rgba(59,130,246,0.15); border-radius:1rem; padding:1.25rem; margin:1.25rem 0;
        }
        .sim-box h3 { margin-top:0; }
        .sim-box canvas { display:block; margin:0.5rem auto; border:1px solid var(--n300); border-radius:0.5rem; max-width:100%; background:white; }
        .dark .sim-box canvas { background: #1a2332; border-color: var(--n600); }

        /* Controls */
        .controls { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; margin:0.75rem 0; }
        .controls label { font-size:0.85rem; font-weight:500; color:var(--text-light); min-width:100px; }
        .controls .ctrl-group { display:flex; flex-direction:column; gap:0.25rem; }
        input[type="range"] { width:180px; accent-color:var(--primary); }
        input[type="number"], select {
            font-family:inherit; font-size:0.9rem; padding:0.4rem 0.6rem; border:2px solid var(--n300);
            border-radius:0.5rem; background:white; color:var(--text); width:140px;
        }
        .dark input[type="number"], .dark select { background:var(--n800); border-color:var(--n600); color:var(--text); }
        input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
        button, .btn {
            font-family:inherit; font-size:0.9rem; font-weight:600; padding:0.5rem 1.25rem;
            background:linear-gradient(135deg,var(--primary),var(--accent)); color:white;
            border:none; border-radius:0.5rem; cursor:pointer; transition:all 0.2s;
            box-shadow:0 2px 8px rgba(59,130,246,0.3);
        }
        button:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(59,130,246,0.4); }
        button:active { transform:translateY(0); }
        .btn-sm { padding:0.35rem 0.75rem; font-size:0.8rem; }
        .btn-green { background:linear-gradient(135deg,var(--green),#059669); box-shadow:0 2px 8px rgba(16,185,129,0.3); }
        .btn-red { background:linear-gradient(135deg,var(--red),#DC2626); box-shadow:0 2px 8px rgba(239,68,68,0.3); }
        .btn-orange { background:linear-gradient(135deg,var(--orange),#D97706); }

        .result-box {
            background:rgba(255,255,255,0.9); border:1px solid var(--n200); border-radius:0.5rem;
            padding:1rem; margin-top:0.75rem; font-size:0.9rem; color:var(--text);
            opacity:0; transform:translateY(10px); transition:all 0.3s;
        }
        .result-box.show { opacity:1; transform:translateY(0); }
        .dark .result-box { background:rgba(30,41,59,0.9); border-color:var(--n600); }

        .data-table { width:100%; border-collapse:collapse; margin:0.75rem 0; font-size:0.85rem; }
        .data-table th, .data-table td { padding:0.4rem 0.75rem; border:1px solid var(--n300); text-align:center; }
        .data-table th { background:var(--primary); color:white; font-weight:600; }
        .dark .data-table td { border-color: var(--n600); }

        .display-val { font-size:0.85rem; font-weight:600; padding:0.25rem 0.5rem; background:rgba(59,130,246,0.1);
            border-radius:0.25rem; display:inline-block; margin:0.15rem; color:var(--primary-dark); }
        .dark .display-val { color: var(--primary-light); }

        /* Quiz */
        .quiz-card { background:white; border-radius:0.75rem; padding:1.25rem; margin-bottom:1rem; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
        .dark .quiz-card { background: var(--n800); }
        .quiz-card label { display:block; padding:0.35rem 0.5rem; margin:0.2rem 0; border-radius:0.35rem; cursor:pointer; transition:background 0.15s; }
        .quiz-card label:hover { background:rgba(59,130,246,0.08); }
        .quiz-card input[type="radio"] { width:auto; margin-right:0.5rem; accent-color:var(--primary); }
        .progress-bar { height:6px; background:var(--n200); border-radius:3px; margin-bottom:1rem; overflow:hidden; }
        .progress-bar .fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:3px; transition:width 0.3s; }

        .flex-row { display:flex; flex-wrap:wrap; gap:1rem; }
        .flex-row > * { flex:1; min-width:250px; }

        .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

        /* Planet bars */
        .planet-bar-wrap { display:flex; align-items:center; gap:0.5rem; margin:0.3rem 0; }
        .planet-icon { font-size:1.4rem; width:2rem; text-align:center; }
        .planet-name { width:60px; font-size:0.8rem; font-weight:600; }
        .planet-bar { flex:1; height:24px; background:var(--n200); border-radius:12px; overflow:hidden; position:relative; }
        .planet-bar .fill { height:100%; border-radius:12px; transition:width 0.8s ease-out; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; font-size:0.7rem; font-weight:700; color:white; }

        footer { text-align:center; color:rgba(255,255,255,0.5); padding:2rem; font-size:0.85rem; position:relative; z-index:1; }

        @media (max-width:900px) {
            .sidebar { transform:translateX(-100%); }
            .sidebar.open { transform:translateX(0); }
            .main { margin-left:0; }
            .topbar .hamburger { display:block; }
            h1 { font-size:1.8rem; }
            .grid-2 { grid-template-columns:1fr; }
        }