/* ══════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════ */
.theme-toggle {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg3); border: 1.5px solid var(--card-border);
    border-radius: 50px; padding: 5px 10px; cursor: pointer;
    transition: all var(--transition); height: 36px;
    color: var(--muted);
}
.theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-dim); color: var(--accent); }

.toggle-icon { display: flex; align-items: center; line-height: 0; transition: opacity var(--transition), color var(--transition); }

.toggle-slider {
    position: relative; width: 38px; height: 22px;
    background: var(--bg4); border-radius: 11px;
    border: 1px solid var(--card-border); flex-shrink: 0;
    transition: background var(--transition);
}
.toggle-thumb-inner {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 2px 6px var(--accent-glow);
    display: flex; align-items: center; justify-content: center;
    transition: left var(--transition), background var(--transition);
}
[data-theme="light"] .toggle-thumb-inner {
    left: calc(100% - 18px);
    background: linear-gradient(135deg, #FFB300, #FF6B00);
    box-shadow: 0 2px 8px rgba(255,150,0,0.4);
}

.toggle-thumb-inner svg { width: 10px; height: 10px; stroke: white; }
.icon-dark-inner  { display: block; }
.icon-light-inner { display: none; }
[data-theme="light"] .icon-dark-inner  { display: none; }
[data-theme="light"] .icon-light-inner { display: block; }

[data-theme="dark"]  .icon-moon { color: var(--accent); opacity: 1; }
[data-theme="dark"]  .icon-sun  { color: var(--muted);  opacity: 0.45; }
[data-theme="light"] .icon-sun  { color: #FF8C00; opacity: 1; }
[data-theme="light"] .icon-moon { color: var(--muted); opacity: 0.45; }

/* light mode extra polish */
[data-theme="light"] .hero-title { text-shadow: 0 2px 16px rgba(0,100,200,0.1); }
[data-theme="light"] .hero-gradient { opacity: 0.85; }
[data-theme="light"] .hero-grid    { opacity: 0.2; }
[data-theme="light"] .scroll-hint span { color: var(--muted); }
[data-theme="light"] .particle { background: var(--accent); box-shadow: 0 0 6px var(--accent); opacity: 0.5; }
[data-theme="light"] .timeline-line { opacity: 0.3; }