/* =====================================================================
   EARTHS — Map Animator Pro
   Refined Iridescent Glass Design System
   =====================================================================
   Principles:
   - Sophisticated tri-color palette (sky / indigo / violet) — Tailwind 300/400
   - Gradients used SELECTIVELY: logo, sliders, badges, focus, signature touches
   - Solid (not gradient) backgrounds for buttons — they get colored borders + tinted hover
   - Glow used as a precision tool — focus rings, slider thumbs, status, never noise
   - Subtle noise texture + iridescent edge highlights for tactile glass
   - Strict 4px spacing grid + tight typographic rhythm
   ===================================================================== */

/* ----------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------- */
:root {
    /* ---- Color: Surfaces (transparent glass) ---- */
    --c-bg:                #07080F;
    --c-surface-1:         rgba(15, 18, 30, 0.34);   /* primary glass — more transparent */
    --c-surface-2:         rgba(13, 16, 26, 0.30);   /* timeline glass — more transparent */
    --c-surface-raise:     rgba(255, 255, 255, 0.035);
    --c-surface-press:     rgba(255, 255, 255, 0.07);
    --c-surface-deeper:    rgba(0, 0, 0, 0.12);

    /* ---- Color: Borders ---- */
    --c-border:            rgba(255, 255, 255, 0.08);
    --c-border-strong:     rgba(255, 255, 255, 0.14);
    --c-border-iridescent: rgba(129, 140, 248, 0.30);
    --c-border-focus:      rgba(103, 232, 249, 0.45);

    /* ---- Color: Text ---- */
    --c-text-1: #F8FAFC;
    --c-text-2: rgba(248, 250, 252, 0.78);
    --c-text-3: rgba(248, 250, 252, 0.52);
    --c-text-4: rgba(248, 250, 252, 0.32);

    /* ---- Color: Accent — Tailwind 300/400 (refined, not pure) ---- */
    --c-cyan:    #67E8F9;     /* cyan-300 */
    --c-cyan-2:  #38BDF8;     /* sky-400 */
    --c-indigo:  #818CF8;     /* indigo-400 */
    --c-violet:  #C4B5FD;     /* violet-300 */

    /* ---- Signature gradient (atmospheric, not garish) ---- */
    --grad-aurora: linear-gradient(135deg,
        #67E8F9 0%,
        #818CF8 50%,
        #C4B5FD 100%);

    --grad-aurora-soft: linear-gradient(135deg,
        rgba(103, 232, 249, 0.16) 0%,
        rgba(129, 140, 248, 0.16) 50%,
        rgba(196, 181, 253, 0.16) 100%);

    --grad-aurora-faint: linear-gradient(135deg,
        rgba(103, 232, 249, 0.06) 0%,
        rgba(196, 181, 253, 0.06) 100%);

    --grad-aurora-line: linear-gradient(90deg,
        transparent 0%,
        rgba(103, 232, 249, 0.55) 30%,
        rgba(196, 181, 253, 0.55) 70%,
        transparent 100%);

    --grad-glass-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0) 35%);

    /* ---- SVG noise (very subtle) ---- */
    --noise-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.50'/></svg>");

    /* ---- Type ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    --fs-micro:    11px;
    --fs-caption:  12px;
    --fs-body:     13px;
    --fs-headline: 15px;
    --fs-display:  18px;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-uppercase: 0.08em;

    /* ---- Spacing (4px grid) ---- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  48px;

    /* ---- Radii ---- */
    --r-1: 6px;
    --r-2: 8px;
    --r-3: 10px;
    --r-4: 14px;
    --r-panel: 18px;

    /* ---- Elevation ---- */
    --el-card:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 4px 14px rgba(0, 0, 0, 0.30);
    --el-panel:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 16px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset;
    --el-pop:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;

    /* ---- Glass blur ---- */
    --glass-blur: blur(18px) saturate(1.35) brightness(1.02);

    /* ---- Layout ---- */
    --layout-gutter:        20px;
    --layout-top-bar:       58px;
    --layout-timeline:      260px;
    --layout-panel-width:   320px;
    --panel-left-w:         320px;
    --panel-right-w:        320px;
    --panel-strip-w:        40px;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 140ms;
    --t-base: 220ms;
}

/* ----------------------------------------------
   2. RESET / GLOBAL FONT
   ---------------------------------------------- */
body,
input,
button,
select,
textarea,
.app-container,
.left-panel,
.right-panel,
.timeline-panel,
.top-toolbar,
.panel-section,
h1, h2, h3, h4, h5, h6,
label, span, div, p, a {
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    letter-spacing: var(--tracking-normal);
}

body {
    background: var(--c-bg);
    color: var(--c-text-1);
}

/* ----------------------------------------------
   3. APP LAYOUT
   ---------------------------------------------- */
.app-container {
    display: block !important;
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--c-bg);
}

.main-viewport {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    grid-row: unset !important;
    grid-column: unset !important;
}

.main-viewport #map {
    width: 100% !important;
    height: 100% !important;
}

/* Atmospheric map overlay — soft sky tint + side vignette */
.main-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%,
            rgba(129, 140, 248, 0.10) 0%,
            rgba(196, 181, 253, 0.06) 35%,
            transparent 70%),
        radial-gradient(ellipse 90% 80% at center,
            transparent 0%,
            transparent 55%,
            rgba(0, 0, 0, 0.50) 100%);
    z-index: 4;
}

/* Slow-drifting grain overlay on the map — adds atmospheric texture */
.main-viewport::before {
    content: "";
    position: absolute;
    inset: -30px;
    pointer-events: none;
    background-image: var(--noise-svg);
    background-size: 320px 320px;
    opacity: 0.06;
    mix-blend-mode: overlay;
    z-index: 5;
    animation: drift 28s linear infinite;
}
@keyframes drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-22px, 12px); }
    50%  { transform: translate(12px, -16px); }
    75%  { transform: translate(-12px, 22px); }
    100% { transform: translate(0, 0); }
}

/* ----------------------------------------------
   4. TOP BAR
   ---------------------------------------------- */
.top-toolbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--layout-top-bar);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-5);
    gap: var(--sp-3);
    background:
        var(--grad-glass-sheen),
        var(--grad-aurora-faint),
        var(--c-surface-1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: none;
    border-bottom: 1px solid var(--c-border);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.4) inset;
    z-index: 200;
    grid-row: unset !important;
    grid-column: unset !important;
    overflow: visible;
}

/* Subtle noise texture overlay */
.top-toolbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-svg);
    background-size: 240px 240px;
    opacity: 0.20;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

/* Iridescent bottom edge */
.top-toolbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--grad-aurora-line);
    opacity: 0.50;
    pointer-events: none;
    z-index: 1;
}

.top-toolbar > * {
    position: relative;
    z-index: 2;
}

/* ---- Logo ---- */
.toolbar-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-right: var(--sp-4);
    margin-right: var(--sp-2);
    border-right: 1px solid var(--c-border);
    height: 32px;
}

.toolbar-logo h1 {
    font-size: var(--fs-headline);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0;
    text-transform: none;
    text-shadow: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    filter: drop-shadow(0 0 18px rgba(103, 232, 249, 0.20));
}

/* Iridescent logo mark — conic gradient orb */
.toolbar-logo h1::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 40%),
        conic-gradient(from 200deg at 50% 50%,
            #67E8F9 0deg,
            #818CF8 130deg,
            #C4B5FD 230deg,
            #67E8F9 360deg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
        0 0 22px rgba(103, 232, 249, 0.40),
        0 0 36px rgba(196, 181, 253, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.4);
    -webkit-text-fill-color: initial;
    flex-shrink: 0;
}

/* ---- Nav tabs ---- */
.toolbar-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    height: 100%;
}

.toolbar-nav-link {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-2);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    text-decoration: none;
    border: none;
    background: transparent;
    position: relative;
}
.toolbar-nav-link:hover {
    color: var(--c-text-1);
    background: transparent;
}
.toolbar-nav-link.active {
    color: var(--c-text-1);
    background: transparent;
}
.toolbar-nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-aurora);
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.7);
}

/* ---- Toolbar groups ---- */
.top-toolbar .toolbar-group {
    border: none !important;
    padding: 0 !important;
    gap: 2px !important;
    display: flex;
    align-items: center;
}

.top-toolbar .toolbar-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--r-2);
    background: transparent;
    border: none;
    color: var(--c-text-3);
    transition: all var(--t-fast) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top-toolbar .toolbar-btn:hover {
    background: var(--c-surface-raise);
    color: var(--c-text-1);
}
.top-toolbar .toolbar-btn:active {
    background: var(--c-surface-press);
}
.top-toolbar .toolbar-btn:disabled {
    color: var(--c-text-4);
    cursor: not-allowed;
}
.top-toolbar .toolbar-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.7;
}

.top-toolbar .toolbar-group:has(#toolbar-snap) {
    display: none;
}

.toolbar-spacer {
    flex: 1;
}

/* ---- Toolbar flex order: Logo → Search → Nav → Groups → Spacer → ... ---- */
.toolbar-logo        { order: -3 !important; }
.top-bar-search      { order: -2 !important; margin-left: var(--sp-2); }
.toolbar-nav         { order: -1 !important; margin-left: var(--sp-3); }
/* remaining items keep default order: 0 */

/* ---- Top bar search ---- */
.top-bar-search {
    display: flex !important;
    align-items: center;
    height: 34px;
    width: 300px;
    max-width: 28vw;
    padding: 0 var(--sp-3) 0 var(--sp-7);
    border-radius: var(--r-3) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 4px 14px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    position: relative;
    transition: all var(--t-base) var(--ease-out);
}
.top-bar-search:hover {
    border-color: var(--c-border-strong) !important;
}
.top-bar-search:focus-within {
    border-color: var(--c-border-focus) !important;
    box-shadow:
        0 0 0 3px rgba(103, 232, 249, 0.12),
        0 0 24px rgba(129, 140, 248, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 4px 14px rgba(0, 0, 0, 0.30);
}
.top-bar-search .search-icon {
    display: none !important;
}
.top-bar-search::before {
    content: "";
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>");
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.4));
}
.top-bar-search input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: var(--c-text-1) !important;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
}
.top-bar-search input::placeholder {
    color: var(--c-text-4);
}
.top-bar-search::after {
    content: "⌘K";
    position: absolute;
    right: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: var(--fw-semibold);
    color: var(--c-text-3);
    padding: 2px 6px;
    border-radius: var(--r-1);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--c-border);
    pointer-events: none;
    letter-spacing: var(--tracking-wide);
}

#top-search-dropdown {
    position: absolute !important;
    top: calc(100% + var(--sp-2));
    left: 0;
    right: 0;
    z-index: 300;
}

/* ---- Restore session button ---- */
.restore-session-btn {
    height: 30px !important;
    padding: 0 var(--sp-3) !important;
    border-radius: var(--r-2) !important;
    background: var(--c-surface-raise) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text-2) !important;
    font-size: var(--fs-micro) !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: 0 !important;
    text-transform: none;
    box-shadow: none;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: var(--sp-2);
    transition: all var(--t-fast) var(--ease-out);
}
.restore-session-btn:hover {
    background: var(--c-surface-press) !important;
    border-color: var(--c-border-strong) !important;
    color: var(--c-text-1) !important;
}
.restore-session-btn svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
}

/* ---- Status pill — signature element with subtle aurora pulse ---- */
.toolbar-status {
    font-size: var(--fs-micro) !important;
    color: var(--c-text-2) !important;
    padding: 0 var(--sp-3) 0 var(--sp-2) !important;
    font-family: var(--font-sans);
    display: inline-flex !important;
    align-items: center;
    gap: var(--sp-2);
    height: 28px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
        rgba(0, 0, 0, 0.20);
    border: 1px solid var(--c-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 2px 8px rgba(0, 0, 0, 0.25);
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--fw-medium);
}
.toolbar-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #B6F3FF 0%, #67E8F9 50%, #0EA5E9 100%);
    box-shadow:
        0 0 0 2px rgba(103, 232, 249, 0.18),
        0 0 10px rgba(103, 232, 249, 0.7),
        0 0 18px rgba(129, 140, 248, 0.4);
    flex-shrink: 0;
    margin-left: var(--sp-1);
    animation: status-pulse 2.8s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(103, 232, 249, 0.18),
            0 0 10px rgba(103, 232, 249, 0.7),
            0 0 18px rgba(129, 140, 248, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(103, 232, 249, 0.10),
            0 0 16px rgba(103, 232, 249, 1.0),
            0 0 26px rgba(129, 140, 248, 0.55);
    }
}

/* ---- Avatar ---- */
.toolbar-icon-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2);
    background: var(--c-surface-raise);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
}
.toolbar-icon-btn:hover {
    background: var(--c-surface-press);
    color: var(--c-text-1);
    border-color: var(--c-border-strong);
}
.toolbar-icon-btn svg {
    width: 14px;
    height: 14px;
}

.toolbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 50%),
        linear-gradient(135deg, #67E8F9 0%, #818CF8 60%, #C4B5FD 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 4px 12px rgba(103, 232, 249, 0.30),
        0 0 0 2px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-micro);
    cursor: pointer;
    flex-shrink: 0;
}
.toolbar-avatar svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ----------------------------------------------
   5. LEFT PANEL
   ---------------------------------------------- */
.left-panel {
    position: absolute !important;
    top: calc(var(--layout-top-bar) + var(--layout-gutter)) !important;
    left: var(--layout-gutter) !important;
    bottom: calc(var(--layout-timeline) + var(--layout-gutter) + var(--layout-gutter)) !important;
    width: var(--panel-left-w) !important;
    min-width: var(--panel-left-w) !important;
    max-width: var(--panel-left-w) !important;
    border-radius: var(--r-panel) !important;
    transform: translateX(0) !important;
    transition:
        transform var(--t-slow) var(--ease-out),
        width var(--t-slow) var(--ease-out),
        opacity var(--t-slow) var(--ease-out) !important;
    background:
        var(--grad-glass-sheen),
        var(--grad-aurora-faint),
        var(--c-surface-1) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--el-panel) !important;
    overflow: hidden;
    z-index: 100 !important;
    grid-row: unset !important;
    grid-column: unset !important;
    flex-direction: row !important;
}

/* Subtle noise overlay */
.left-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-svg);
    background-size: 240px 240px;
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Iridescent right edge */
.left-panel::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(103, 232, 249, 0.30) 25%,
        rgba(129, 140, 248, 0.40) 50%,
        rgba(196, 181, 253, 0.30) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.left-panel > * {
    position: relative;
    z-index: 2;
}

.left-panel-resize {
    display: none !important;
}

/* Tabs column */
.left-panel .panel-tabs {
    width: 48px;
    min-width: 48px;
    padding: var(--sp-4) var(--sp-2);
    gap: var(--sp-2);
    background: transparent;
    border-right: 1px solid var(--c-border);
    border-radius: var(--r-panel) 0 0 var(--r-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-panel .panel-tab {
    width: 34px;
    height: 34px;
    border-radius: var(--r-2);
    border: 1px solid transparent;
    background: transparent;
    color: var(--c-text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast) var(--ease-out);
    position: relative;
}
.left-panel .panel-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}
.left-panel .panel-tab:hover {
    color: var(--c-text-1);
    background: transparent;
}
.left-panel .panel-tab.active {
    color: #FFFFFF;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.left-panel .panel-tab.active svg {
    filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.55));
}
.left-panel .panel-tab.active::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 18%;
    bottom: 18%;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--grad-aurora);
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.85);
}

.left-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-6) var(--sp-4) calc(var(--sp-7) + var(--sp-4)) var(--sp-5);
    background: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 232, 249, 0.32) rgba(255, 255, 255, 0.04);
    scrollbar-gutter: stable;
}
.left-panel-content::-webkit-scrollbar {
    width: 10px;
}
.left-panel-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0;
    margin: var(--sp-2) 0;
}
.left-panel-content::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(103, 232, 249, 0.45), rgba(196, 181, 253, 0.40));
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.left-panel-content::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(103, 232, 249, 0.70), rgba(196, 181, 253, 0.60));
    background-clip: padding-box;
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20),
                0 0 12px rgba(103, 232, 249, 0.35);
}

/* ----------------------------------------------
   6. PANEL SECTIONS
   ---------------------------------------------- */
.left-panel .panel-section,
.right-panel .panel-section {
    padding: 0 0 var(--sp-5) 0 !important;
    margin-bottom: var(--sp-5);
    border: none !important;
    border-bottom: 1px solid var(--c-border) !important;
    background: transparent !important;
}

.left-panel .panel-section:last-child,
.right-panel .panel-section:last-child {
    border-bottom: none !important;
    margin-bottom: 0;
    padding-bottom: 0 !important;
}

.left-panel .section-header-row,
.right-panel .section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0 0 var(--sp-3) 0 !important;
    user-select: none;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Also kill any dark background inherited from other stylesheets */
.left-panel .section-header-row *,
.right-panel .section-header-row *,
.left-panel .section-header,
.right-panel .section-header,
.left-panel .panel-section > h3,
.right-panel .panel-section > h3 {
    background: transparent !important;
    background-color: transparent !important;
}

.left-panel .section-header-left,
.right-panel .section-header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.left-panel .section-collapse-icon,
.right-panel .section-collapse-icon {
    font-size: 0 !important;
    color: transparent;
    width: 12px;
    height: 12px;
    background-color: var(--c-text-3);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    display: inline-block;
    transition: transform var(--t-fast) var(--ease-out);
}
.left-panel .panel-section.collapsed .section-collapse-icon,
.right-panel .panel-section.collapsed .section-collapse-icon {
    transform: rotate(-90deg);
}

.left-panel .panel-section h3,
.right-panel .panel-section h3 {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-semibold) !important;
    text-transform: none !important;
    letter-spacing: var(--tracking-tight) !important;
    color: var(--c-text-1) !important;
    margin: 0 !important;
}

/* Section badges — gradient signature */
.left-panel .section-badge,
.right-panel .section-badge {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--c-text-1);
    background: var(--grad-aurora-soft);
    padding: 1px var(--sp-2);
    border-radius: var(--r-1);
    border: 1px solid rgba(129, 140, 248, 0.30);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.10);
    text-shadow: none;
    font-variant-numeric: tabular-nums;
    min-width: 18px;
    text-align: center;
}

.left-panel .section-content,
.right-panel .section-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* ----------------------------------------------
   7. SEARCH BOX (left panel)
   ---------------------------------------------- */
.left-panel .search-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.left-panel .search-box input,
.left-panel #region-search {
    flex: 1;
    height: 34px;
    padding: 0 var(--sp-3) 0 var(--sp-7);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        rgba(0, 0, 0, 0.20) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-3) !important;
    color: var(--c-text-1);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    transition: all var(--t-base) var(--ease-out);
    width: 100%;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.left-panel .search-box input:hover,
.left-panel #region-search:hover {
    border-color: var(--c-border-strong) !important;
}
.left-panel .search-box input:focus,
.left-panel #region-search:focus {
    outline: none;
    border-color: var(--c-border-focus) !important;
    box-shadow:
        0 0 0 3px rgba(103, 232, 249, 0.12),
        0 0 18px rgba(129, 140, 248, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.left-panel .search-box input::placeholder {
    color: var(--c-text-4);
}

.left-panel .search-box::before {
    content: "";
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367E8F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>");
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.4));
}

.left-panel #search-btn {
    display: none !important;
}

/* ----------------------------------------------
   8. ACTION BUTTONS — solid (not gradient), tinted hover
   ---------------------------------------------- */
.left-panel .action-btn,
.right-panel .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 34px;
    padding: 0 var(--sp-3);
    background: var(--c-surface-raise) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-3) !important;
    color: var(--c-text-1) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-medium) !important;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    width: 100%;
    text-transform: none;
    letter-spacing: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.20) !important;
    text-shadow: none !important;
}
.left-panel .action-btn:hover,
.right-panel .action-btn:hover {
    background: var(--c-surface-press) !important;
    border-color: rgba(129, 140, 248, 0.30) !important;
    color: var(--c-text-1) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 4px 14px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(129, 140, 248, 0.12) !important;
}
.left-panel .action-btn:active,
.right-panel .action-btn:active {
    background: rgba(255, 255, 255, 0.05) !important;
}
.left-panel .action-btn.small,
.right-panel .action-btn.small {
    height: 30px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-micro);
}
.left-panel .action-btn svg,
.right-panel .action-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.7;
    flex-shrink: 0;
}

/* ---- List items ---- */
.left-panel #regions-list > *,
.left-panel #markers-list > *,
.left-panel #routes-list > *,
.left-panel #audio-list > * {
    margin-bottom: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--r-2);
    transition: all var(--t-fast) var(--ease-out);
    font-size: var(--fs-body);
    color: var(--c-text-1);
}
.left-panel #regions-list > *:hover,
.left-panel #markers-list > *:hover,
.left-panel #routes-list > *:hover,
.left-panel #audio-list > *:hover {
    background: var(--c-surface-press);
    border-color: rgba(129, 140, 248, 0.30);
}

/* ----------------------------------------------
   9. SLIDERS — signature element with gradient + glowing thumb
   ---------------------------------------------- */
.left-panel input[type="range"],
.right-panel input[type="range"],
.fx-slider-row input[type="range"],
.slider-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 3px;
    background:
        linear-gradient(90deg,
            #67E8F9 0%,
            #818CF8 50%,
            #C4B5FD 100%) 0/var(--sw-fill, 50%) 100% no-repeat,
        rgba(255, 255, 255, 0.10);
    outline: none;
    cursor: pointer;
    margin: var(--sp-1) 0;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 14px rgba(103, 232, 249, 0.10);
}

.left-panel input[type="range"]::-webkit-slider-thumb,
.right-panel input[type="range"]::-webkit-slider-thumb,
.fx-slider-row input[type="range"]::-webkit-slider-thumb,
.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #FFFFFF 0%, #E6F7FF 50%, #B6E5F5 100%);
    border: none;
    box-shadow:
        0 0 0 1.5px rgba(103, 232, 249, 0.85),
        0 0 0 3px rgba(129, 140, 248, 0.18),
        0 0 14px rgba(103, 232, 249, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: grab;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.left-panel input[type="range"]::-webkit-slider-thumb:hover,
.right-panel input[type="range"]::-webkit-slider-thumb:hover,
.fx-slider-row input[type="range"]::-webkit-slider-thumb:hover,
.slider-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.18);
    box-shadow:
        0 0 0 1.5px rgba(103, 232, 249, 1),
        0 0 0 4px rgba(129, 140, 248, 0.30),
        0 0 22px rgba(103, 232, 249, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.5);
}
.left-panel input[type="range"]::-webkit-slider-thumb:active,
.right-panel input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
}

.left-panel input[type="range"]::-moz-range-thumb,
.right-panel input[type="range"]::-moz-range-thumb,
.fx-slider-row input[type="range"]::-moz-range-thumb,
.slider-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #E6F7FF 50%, #B6E5F5 100%);
    border: none;
    box-shadow:
        0 0 0 1.5px rgba(103, 232, 249, 0.85),
        0 0 0 3px rgba(129, 140, 248, 0.18),
        0 0 14px rgba(103, 232, 249, 0.55);
    cursor: grab;
}

.fx-slider-row,
.slider-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--sp-3) !important;
    margin-bottom: var(--sp-3) !important;
}
.fx-slider-row label,
.fx-slider-row .fx-label,
.slider-row label {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-caption) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--c-text-2) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: 60px;
}
.fx-slider-row .fx-value,
.slider-row span {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--c-text-1);
    background: none;
    -webkit-text-fill-color: initial;
    min-width: 38px;
    text-align: right;
    text-shadow: none;
    filter: none;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------
   10. RIGHT PANEL
   ---------------------------------------------- */
.right-panel {
    position: absolute !important;
    top: calc(var(--layout-top-bar) + var(--layout-gutter)) !important;
    right: var(--layout-gutter) !important;
    bottom: calc(var(--layout-timeline) + var(--layout-gutter) + var(--layout-gutter)) !important;
    width: var(--panel-right-w) !important;
    min-width: var(--panel-right-w) !important;
    max-width: var(--panel-right-w) !important;
    border-radius: var(--r-panel) !important;
    transform: translateX(0) !important;
    transition:
        transform var(--t-slow) var(--ease-out),
        width var(--t-slow) var(--ease-out),
        opacity var(--t-slow) var(--ease-out) !important;
    background:
        var(--grad-glass-sheen),
        linear-gradient(135deg, rgba(196, 181, 253, 0.05) 0%, rgba(103, 232, 249, 0.05) 100%),
        var(--c-surface-1) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--el-panel) !important;
    overflow: hidden;
    z-index: 100 !important;
    grid-row: unset !important;
    grid-column: unset !important;
}

.right-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-svg);
    background-size: 240px 240px;
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Iridescent left edge */
.right-panel::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(196, 181, 253, 0.30) 25%,
        rgba(129, 140, 248, 0.40) 50%,
        rgba(103, 232, 249, 0.30) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.right-panel > * {
    position: relative;
    z-index: 2;
}

.right-panel-content {
    padding: var(--sp-6) var(--sp-4) calc(var(--sp-7) + var(--sp-4)) var(--sp-5);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    background: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 181, 253, 0.32) rgba(255, 255, 255, 0.04);
    scrollbar-gutter: stable;
}
.right-panel-content::-webkit-scrollbar {
    width: 10px;
}
.right-panel-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0;
    margin: var(--sp-2) 0;
}
.right-panel-content::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(196, 181, 253, 0.45), rgba(103, 232, 249, 0.40));
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.right-panel-content::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(196, 181, 253, 0.70), rgba(103, 232, 249, 0.60));
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20),
                0 0 12px rgba(196, 181, 253, 0.35);
}

.right-panel .property-group {
    margin-bottom: var(--sp-3);
}
.right-panel .property-group label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
    margin-bottom: var(--sp-2);
    letter-spacing: 0;
    text-transform: none;
}

/* "Add Elements" cards */
.right-panel .editor-add-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}

.right-panel .editor-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    width: 100% !important;
    height: 70px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-3) !important;
    color: var(--c-text-2) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-micro) !important;
    font-weight: var(--fw-medium) !important;
    cursor: pointer;
    transition: all var(--t-base) var(--ease-out);
    padding: var(--sp-2) var(--sp-1) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.20) !important;
    text-shadow: none !important;
    position: relative;
    overflow: hidden;
}
.right-panel .editor-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-aurora-soft);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out);
    border-radius: inherit;
    pointer-events: none;
}
.right-panel .editor-btn:hover {
    border-color: rgba(129, 140, 248, 0.40) !important;
    color: var(--c-text-1) !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(103, 232, 249, 0.18) !important;
}
.right-panel .editor-btn:hover::before {
    opacity: 1;
}
.right-panel .editor-btn .btn-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--c-text-2);
    font-size: 0 !important;
    transition: color var(--t-fast) var(--ease-out);
    position: relative;
    z-index: 1;
}
.right-panel .editor-btn .btn-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.7;
}
.right-panel .editor-btn:hover .btn-icon {
    color: var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.5));
}
.right-panel .editor-btn span:not(.btn-icon) {
    position: relative;
    z-index: 1;
}
.right-panel .editor-btn.full-width {
    width: 100% !important;
    height: 34px !important;
    flex-direction: row !important;
}

/* ----------------------------------------------
   11. INPUTS / SELECTS / COLOR
   ---------------------------------------------- */
.glass-input,
.glass-select,
.right-panel select.glass-select,
.right-panel select.editor-select {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-2) !important;
    color: var(--c-text-1) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    height: 32px;
    padding: 0 var(--sp-3);
    transition: all var(--t-fast) var(--ease-out);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.glass-input:hover,
.glass-select:hover {
    border-color: var(--c-border-strong) !important;
}
.glass-input:focus,
.glass-select:focus {
    outline: none;
    border-color: var(--c-border-focus) !important;
    box-shadow:
        0 0 0 3px rgba(103, 232, 249, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.right-panel .editor-color {
    width: 100% !important;
    height: 34px !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-2) !important;
    background: var(--c-surface-raise) !important;
    cursor: pointer;
    padding: 3px !important;
}

/* ----------------------------------------------
   12. TOGGLES + CHECKBOXES
   ---------------------------------------------- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 17px;
    transition: var(--t-base) var(--ease-out);
    border: 1px solid var(--c-border);
}
.toggle-slider::before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    left: 1px;
    top: 1px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: var(--t-base) var(--ease-out);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #67E8F9, #818CF8);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 12px rgba(103, 232, 249, 0.4);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(12px);
}

.toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--sp-2) 0 !important;
}
.toggle-label {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    color: var(--c-text-2) !important;
    font-weight: var(--fw-regular);
}

.right-panel input[type="checkbox"],
.left-panel input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--c-surface-raise);
    border: 1px solid var(--c-border-strong);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all var(--t-fast) var(--ease-out);
}
.right-panel input[type="checkbox"]:checked,
.left-panel input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #67E8F9, #818CF8);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.4);
}
.right-panel input[type="checkbox"]:checked::after,
.left-panel input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid var(--c-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--sp-2) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    color: var(--c-text-2) !important;
    cursor: pointer;
}

/* ----------------------------------------------
   13. TIMELINE
   ---------------------------------------------- */
.timeline-panel {
    position: absolute !important;
    bottom: var(--layout-gutter) !important;
    left: calc(var(--panel-left-w) + var(--layout-gutter) + var(--layout-gutter)) !important;
    right: calc(var(--panel-right-w) + var(--layout-gutter) + var(--layout-gutter)) !important;
    height: var(--layout-timeline) !important;
    min-height: var(--layout-timeline) !important;
    max-height: var(--layout-timeline) !important;
    border-radius: var(--r-panel) !important;
    transition:
        left var(--t-slow) var(--ease-out),
        right var(--t-slow) var(--ease-out) !important;
    background:
        var(--grad-glass-sheen),
        linear-gradient(135deg, rgba(103, 232, 249, 0.04) 0%, rgba(196, 181, 253, 0.04) 100%),
        var(--c-surface-2) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--el-panel) !important;
    overflow: hidden;
    z-index: 100 !important;
    grid-row: unset !important;
    grid-column: unset !important;
}

.timeline-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-svg);
    background-size: 240px 240px;
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Iridescent top edge */
.timeline-panel::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 1px;
    background: var(--grad-aurora-line);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

.timeline-panel > * {
    position: relative;
    z-index: 2;
}

.timeline-panel-content {
    padding: 0 !important;
    border-radius: var(--r-panel);
    background: transparent !important;
}

/* CRITICAL: kill all opaque backgrounds inside timeline — FULL glass */
.timeline-panel .tl-toolbar,
.timeline-panel.tl-v2 .tl-toolbar,
.timeline-panel .tl-header-panel,
.timeline-panel.tl-v2 .tl-header-panel,
.timeline-panel .tl-body,
.timeline-panel.tl-v2 .tl-body,
.timeline-panel .tl-ruler,
.timeline-panel.tl-v2 .tl-ruler,
.timeline-panel .tl-graph-editor,
.timeline-panel .tl-tracks,
.timeline-panel .tl-track,
.timeline-panel .tl-track-header,
.timeline-panel.tl-v2 .tl-track-header,
.timeline-panel .tl-folder,
.timeline-panel.tl-v2 .tl-folder,
.timeline-panel .tl-folder-header,
.timeline-panel.tl-v2 .tl-folder-header,
.timeline-panel .tl-prop-row,
.timeline-panel.tl-v2 .tl-prop-row,
.timeline-panel .tl-track-content,
.timeline-panel .tl-clip-area,
.timeline-panel .tl-time-display,
.timeline-panel .tl-property-rows,
.timeline-panel .tl-header-scroll,
.timeline-panel .tl-lanes-panel,
.timeline-panel.tl-v2 .tl-lanes-panel,
.timeline-panel .tl-search,
.timeline-panel.tl-v2 .tl-search,
.timeline-panel .timeline-content,
.timeline-panel .timeline-tracks,
.timeline-panel .timeline-toolbar,
.timeline-panel .timeline-track-list,
.timeline-panel .timeline-ruler,
#timeline-panel.tl-v2 {
    background: transparent !important;
    background-color: transparent !important;
}

.timeline-panel .tl-toolbar,
.timeline-panel.tl-v2 .tl-toolbar {
    border-bottom: 1px solid var(--c-border) !important;
    padding: 0 var(--sp-3) !important;
    height: 44px !important;
}
.timeline-panel .tl-ruler,
.timeline-panel.tl-v2 .tl-ruler {
    border-bottom: 1px solid var(--c-border) !important;
}
.timeline-panel .tl-header-panel,
.timeline-panel.tl-v2 .tl-header-panel {
    border-right: 1px solid var(--c-border) !important;
}

/* Track header rows — glass, subtle hover */
.timeline-panel.tl-v2 .tl-track-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: background var(--t-fast) var(--ease-out) !important;
}
.timeline-panel.tl-v2 .tl-track-header:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}
.timeline-panel.tl-v2 .tl-track-header.selected {
    background: linear-gradient(90deg,
        rgba(103, 232, 249, 0.10) 0%,
        rgba(129, 140, 248, 0.06) 100%) !important;
}

/* Folder/group rows */
.timeline-panel.tl-v2 .tl-folder-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    font-size: var(--fs-micro) !important;
    letter-spacing: var(--tracking-uppercase) !important;
    text-transform: uppercase !important;
    color: var(--c-text-3) !important;
}
.timeline-panel.tl-v2 .tl-folder-header:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Property rows inside expanded tracks */
.timeline-panel.tl-v2 .tl-prop-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Search tracks input — glass-styled */
.timeline-panel.tl-v2 .tl-search {
    padding: var(--sp-2) var(--sp-3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    height: 38px !important;
}
.timeline-panel.tl-v2 .tl-search input {
    width: 100% !important;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--c-text-1) !important;
    padding: 0 var(--sp-3) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-micro) !important;
    border-radius: var(--r-2) !important;
    transition: all var(--t-fast) var(--ease-out) !important;
}
.timeline-panel.tl-v2 .tl-search input::placeholder {
    color: var(--c-text-3) !important;
}
.timeline-panel.tl-v2 .tl-search input:focus {
    outline: none !important;
    border-color: rgba(103, 232, 249, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.10) !important;
}

/* Generic timeline toolbar buttons (NOT REC / undo / redo which have their own styling) */
.timeline-panel.tl-v2 .tl-toolbar button:not(.tl-rec-button):not(.tl-undo-btn):not(.tl-redo-btn),
.timeline-panel.tl-v2 .tl-toolbar .tl-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--c-text-3) !important;
    border-radius: var(--r-2) !important;
    transition: all var(--t-fast) var(--ease-out) !important;
}
.timeline-panel.tl-v2 .tl-toolbar button:not(.tl-rec-button):not(.tl-undo-btn):not(.tl-redo-btn):hover,
.timeline-panel.tl-v2 .tl-toolbar .tl-btn:hover {
    background: var(--c-surface-raise) !important;
    border-color: rgba(129, 140, 248, 0.30) !important;
    color: var(--c-text-1) !important;
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.10);
}

/* ---- REC button: signature pill with red dot + REC text ---- */
.timeline-panel.tl-v2 .tl-rec-button {
    width: auto !important;
    min-width: 58px !important;
    height: 30px !important;
    padding: 0 var(--sp-3) 0 var(--sp-2) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--c-text-2) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-family: var(--font-sans) !important;
    font-size: 10px !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0.12em !important;
    transition: all var(--t-base) var(--ease-out) !important;
    position: relative !important;
    text-indent: 0 !important;
}
.timeline-panel.tl-v2 .tl-rec-button::before {
    content: "" !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #FF3D55 !important;
    box-shadow:
        0 0 0 2px rgba(255, 61, 85, 0.18),
        0 0 10px rgba(255, 61, 85, 0.55) !important;
    flex-shrink: 0 !important;
    transition: all var(--t-base) var(--ease-out) !important;
}
.timeline-panel.tl-v2 .tl-rec-button:hover {
    border-color: rgba(255, 61, 85, 0.45) !important;
    background: rgba(255, 61, 85, 0.08) !important;
    color: var(--c-text-1) !important;
    transform: none !important;
}
.timeline-panel.tl-v2 .tl-rec-button:hover::before {
    box-shadow:
        0 0 0 2px rgba(255, 61, 85, 0.25),
        0 0 14px rgba(255, 61, 85, 0.75) !important;
}
.timeline-panel.tl-v2 .tl-rec-button.armed {
    border-color: #FF3D55 !important;
    background: rgba(255, 61, 85, 0.12) !important;
    color: #FFE8EC !important;
    box-shadow:
        0 0 18px rgba(255, 61, 85, 0.35),
        0 0 0 1px rgba(255, 61, 85, 0.35) !important;
}
.timeline-panel.tl-v2 .tl-rec-button.armed::before {
    animation: tlRecPulse 1.4s ease-in-out infinite;
}
@keyframes tlRecPulse {
    0%, 100% { transform: scale(1);    opacity: 1;    }
    50%      { transform: scale(0.75); opacity: 0.75; }
}

/* Undo / redo mini-buttons */
.timeline-panel.tl-v2 .tl-undo-btn,
.timeline-panel.tl-v2 .tl-redo-btn {
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--c-text-2) !important;
    border-radius: var(--r-2) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all var(--t-fast) var(--ease-out) !important;
}
.timeline-panel.tl-v2 .tl-undo-btn:hover,
.timeline-panel.tl-v2 .tl-redo-btn:hover {
    background: var(--c-surface-raise) !important;
    border-color: rgba(129, 140, 248, 0.30) !important;
    color: var(--c-text-1) !important;
}
.timeline-panel.tl-v2 .tl-undo-btn:disabled,
.timeline-panel.tl-v2 .tl-redo-btn:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
}

/* Track type icons — cleaner sizing */
.timeline-panel.tl-v2 .tl-type-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 var(--sp-2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--c-text-2) !important;
    flex-shrink: 0 !important;
}
.timeline-panel.tl-v2 .tl-type-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 1.7 !important;
    fill: none !important;
    stroke: currentColor !important;
}
.timeline-panel.tl-v2 .tl-track-name {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-micro) !important;
    color: var(--c-text-1) !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: 0 !important;
}
.timeline-panel.tl-v2 .tl-caret {
    color: var(--c-text-3) !important;
}
.timeline-panel.tl-v2 .tl-track-actions .tl-action {
    color: var(--c-text-3) !important;
    font-size: 10px !important;
    font-family: var(--font-sans) !important;
    font-weight: var(--fw-semibold) !important;
    transition: color var(--t-fast) var(--ease-out) !important;
}
.timeline-panel.tl-v2 .tl-track-actions .tl-action:hover {
    color: var(--c-text-1) !important;
}
.timeline-panel.tl-v2 .tl-track-actions .tl-action.on {
    color: var(--c-cyan) !important;
}

/* ---- Lane rows: strip dark backgrounds, let map show through ---- */
.timeline-panel.tl-v2 .tl-lane,
.timeline-panel.tl-v2 .tl-lanes-scroll,
.timeline-panel.tl-v2 .tl-lanes-panel,
.timeline-panel.tl-v2 .tl-work-area,
.timeline-panel .tl-lane,
.timeline-panel .tl-lanes-scroll {
    background: transparent !important;
    background-color: transparent !important;
}
.timeline-panel.tl-v2 .tl-lane {
    border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
}
.timeline-panel.tl-v2 .tl-lane:nth-child(even) {
    background: rgba(255, 255, 255, 0.012) !important;
}

/* ---- Clips: softened glass-look (desaturate original color + sheen + inset shadow) ---- */
.timeline-panel.tl-v2 .tl-clip {
    position: relative !important;
    border-radius: var(--r-1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    filter: saturate(0.75) brightness(0.82) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.30) inset,
        inset 0 -10px 18px rgba(0, 0, 0, 0.22),
        0 3px 10px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
    transition: all var(--t-fast) var(--ease-out) !important;
}
/* Gloss sheen on top of the (now softened) original color */
.timeline-panel.tl-v2 .tl-clip::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0)    45%,
        rgba(0, 0, 0, 0.10)       100%) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 1 !important;
    mix-blend-mode: overlay;
}
.timeline-panel.tl-v2 .tl-clip-name {
    position: relative !important;
    z-index: 2 !important;
    color: #FFFFFF !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-micro) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0.02em !important;
    padding-left: 8px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}
.timeline-panel.tl-v2 .tl-clip:hover {
    filter: saturate(0.85) brightness(0.92) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}
.timeline-panel.tl-v2 .tl-clip.selected {
    filter: saturate(0.95) brightness(1.0) !important;
    border-color: rgba(103, 232, 249, 0.65) !important;
    box-shadow:
        0 0 0 1px rgba(103, 232, 249, 0.45) inset,
        0 1px 0 rgba(255, 255, 255, 0.30) inset,
        0 0 18px rgba(103, 232, 249, 0.28),
        0 3px 12px rgba(0, 0, 0, 0.35) !important;
}

/* ---- Color bar on track headers (the 4px strip): more subtle ---- */
.timeline-panel.tl-v2 .tl-color-bar {
    opacity: 0.85 !important;
    filter: saturate(0.85) !important;
}

/* ---- Timeline scrollbars: refined glass style ---- */
.timeline-panel ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
.timeline-panel ::-webkit-scrollbar-track {
    background: transparent !important;
}
.timeline-panel ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    transition: background var(--t-fast) var(--ease-out) !important;
}
.timeline-panel ::-webkit-scrollbar-thumb:hover {
    background: rgba(103, 232, 249, 0.35) !important;
    background-clip: padding-box !important;
}
.timeline-panel ::-webkit-scrollbar-corner {
    background: transparent !important;
}
.timeline-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

/* ---- Time ruler: better type + subtle tint ---- */
.timeline-panel.tl-v2 .tl-ruler {
    color: var(--c-text-3) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums !important;
}
.timeline-panel.tl-v2 .tl-tick {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Time display pill: refine (replaces the cyan tinted "tl-time" dark pill) ---- */
.timeline-panel .tl-time,
.timeline-panel.tl-v2 .tl-time {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--r-2) !important;
    padding: 3px var(--sp-2) !important;
    color: var(--c-text-1) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
}

.timeline-panel .tl-time-display {
    color: var(--c-text-1) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--fs-caption) !important;
    font-weight: var(--fw-semibold) !important;
    text-shadow: 0 0 12px rgba(103, 232, 249, 0.30);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.timeline-resize-handle {
    height: 6px;
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    background: transparent;
    cursor: row-resize;
    transition: background var(--t-fast) var(--ease-out);
}
.timeline-resize-handle:hover {
    background: rgba(103, 232, 249, 0.18) !important;
}

/* ----------------------------------------------
   14. NOTIFICATIONS
   ---------------------------------------------- */
.notification-container {
    bottom: calc(var(--layout-timeline) + var(--layout-gutter) + var(--layout-gutter) + 10px) !important;
}

/* ----------------------------------------------
   15. EXPORT FRAME TOGGLE
   ---------------------------------------------- */
.export-frame-toggle-btn {
    position: fixed !important;
    bottom: calc(var(--layout-timeline) + var(--layout-gutter) + var(--layout-gutter) + 10px) !important;
    right: calc(var(--panel-right-w) + var(--layout-gutter) + var(--layout-gutter) + 10px) !important;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--r-2);
    background: var(--c-surface-1);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--el-card);
    transition: right var(--t-slow) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out) !important;
}
.export-frame-toggle-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ----------------------------------------------
   16. SEARCH DROPDOWN
   ---------------------------------------------- */
.top-search-dropdown {
    background: var(--c-surface-1) !important;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-3) !important;
    box-shadow: var(--el-pop) !important;
    margin-top: var(--sp-2);
    overflow: hidden;
}
.top-search-dropdown > * {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-body);
    color: var(--c-text-2);
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.top-search-dropdown > *:hover {
    background: var(--grad-aurora-soft);
    color: var(--c-text-1);
}
.top-search-dropdown > *:last-child {
    border-bottom: none;
}

/* ----------------------------------------------
   17. RESPONSIVE
   ---------------------------------------------- */
@media (max-width: 1280px) {
    :root { --layout-panel-width: 300px; }
}
@media (max-width: 1024px) {
    :root {
        --layout-panel-width: 280px;
        --layout-timeline: 220px;
    }
}

/* ----------------------------------------------
   18. TAB CONTENT VISIBILITY
   ---------------------------------------------- */
.left-panel .tab-content { display: none; }
.left-panel .tab-content.active { display: block; }

/* ----------------------------------------------
   19. MAP STYLE GRID (World tab)
   ---------------------------------------------- */
.left-panel .map-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}

.left-panel .map-style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 64px;
    background: var(--c-surface-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--r-3);
    color: var(--c-text-2);
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    padding: var(--sp-2);
}
.left-panel .map-style-btn:hover {
    background: var(--c-surface-press);
    border-color: rgba(129, 140, 248, 0.30);
    color: var(--c-text-1);
}
.left-panel .map-style-btn.active {
    background: var(--grad-aurora-soft);
    border-color: rgba(129, 140, 248, 0.40);
    color: var(--c-text-1);
    box-shadow: 0 0 16px rgba(103, 232, 249, 0.18) inset;
}
.left-panel .map-style-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.7;
}

/* ----------------------------------------------
   20. STYLE-ROW
   ---------------------------------------------- */
.left-panel .style-row,
.right-panel .style-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.left-panel .style-row label,
.right-panel .style-row label {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--c-text-3);
    min-width: 60px;
}
.left-panel .style-row select,
.right-panel .style-row select {
    flex: 1;
}

/* ----------------------------------------------
   21. HIDE OLD EDITOR PANEL
   ---------------------------------------------- */
.editor-panel { display: none !important; }

/* ----------------------------------------------
   22. ROAD SEARCH ROW
   ---------------------------------------------- */
.road-search-row {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.road-search-row input { flex: 1; }
.road-radius-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.road-radius-row label {
    font-size: var(--fs-caption);
    color: var(--c-text-3);
    min-width: 50px;
}
.road-radius-row span {
    font-size: var(--fs-caption);
    color: var(--c-text-2);
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------
   23. PANEL COLLAPSE / EXPAND
   ---------------------------------------------- */

/* Collapse buttons that live INSIDE the panels (visible when expanded) */
.panel-collapse-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--r-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast) var(--ease-out);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.panel-collapse-btn:hover {
    background: rgba(103, 232, 249, 0.10);
    border-color: rgba(103, 232, 249, 0.35);
    color: #FFFFFF;
}
.panel-collapse-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

/* Spacer that pushes the collapse button to the bottom of the tab column */
.panel-tabs-spacer {
    flex: 1 1 auto;
}

/* Collapse button when sitting in the panel-tabs column (visually matches a panel-tab) */
.panel-collapse-btn-tabbar {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 auto;
    border-radius: var(--r-2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--c-text-3);
    margin-bottom: var(--sp-1);
}
.panel-collapse-btn-tabbar svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}
.panel-collapse-btn-tabbar:hover {
    background: rgba(103, 232, 249, 0.10);
    border-color: rgba(103, 232, 249, 0.35);
    color: #FFFFFF;
}

/* Floating collapse button — used inside .right-panel which has no .panel-tabs column */
.panel-collapse-btn-floating {
    position: absolute !important;
    top: var(--sp-3);
    z-index: 5;
}
.panel-collapse-btn-floating.right {
    left: var(--sp-3);
}
.panel-collapse-btn-floating.left {
    right: var(--sp-3);
}

/* Collapsed panels: slide off-screen + zero-width */
body.left-collapsed .left-panel {
    transform: translateX(calc(-1 * (var(--panel-left-w) + var(--layout-gutter) + 20px))) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.right-collapsed .right-panel {
    transform: translateX(calc(var(--panel-right-w) + var(--layout-gutter) + 20px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Timeline reclaims space when panels are collapsed */
body.left-collapsed .timeline-panel {
    left: var(--layout-gutter) !important;
}
body.right-collapsed .timeline-panel {
    right: var(--layout-gutter) !important;
}

/* Main viewport / map: nothing extra needed because it lives behind everything */

/* Re-show fixed elements anchored to the right panel */
body.right-collapsed .export-frame-toggle-btn {
    right: calc(var(--layout-gutter) + 10px) !important;
}

/* Trigger buttons (visible when the panel is collapsed) */
.panel-trigger {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--c-border);
    background:
        var(--grad-glass-sheen),
        var(--c-surface-1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--c-text-2);
    cursor: pointer;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--el-card);
    transition:
        background var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-fast) var(--ease-out);
}
.panel-trigger:hover {
    background:
        linear-gradient(180deg, rgba(103, 232, 249, 0.12), rgba(196, 181, 253, 0.10)),
        var(--c-surface-1);
    border-color: rgba(103, 232, 249, 0.45);
    color: #FFFFFF;
    box-shadow: var(--el-pop), 0 0 18px rgba(103, 232, 249, 0.25);
}
.panel-trigger svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.45));
}
.panel-trigger-left {
    left: 0;
    border-left: none;
    border-radius: 0 var(--r-3) var(--r-3) 0;
}
.panel-trigger-right {
    right: 0;
    border-right: none;
    border-radius: var(--r-3) 0 0 var(--r-3);
}

/* Show the trigger buttons only when the corresponding panel is collapsed */
body.left-collapsed .panel-trigger-left {
    display: flex;
}
body.right-collapsed .panel-trigger-right {
    display: flex;
}

/* The collapse buttons inside panels should hide when the panel is collapsed (it's not visible anyway) */
body.left-collapsed .left-panel .panel-collapse-btn { opacity: 0; }
body.right-collapsed .right-panel .panel-collapse-btn { opacity: 0; }

/* ----------------------------------------------
   24. EXPORT FRAME OVERLAY (refined glass aesthetic)
   ---------------------------------------------- */
/* The overlay covers the FULL window. The JS computes a "visible map area"
   (excluding the top bar, side panels, and timeline), fits the export frame
   inside that area, then positions the masks to fill the rest of the window. */
.export-frame-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 95;
}

/* The dark masks around the safe area */
.export-frame-mask {
    background: rgba(8, 10, 18, 0.62) !important;
    backdrop-filter: blur(2px) saturate(0.85);
    -webkit-backdrop-filter: blur(2px) saturate(0.85);
    transition: background var(--t-fast) var(--ease-out);
}

/* The crisp 1920x1080 frame border */
.export-frame-border {
    border: 1px solid rgba(103, 232, 249, 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 22px rgba(103, 232, 249, 0.18),
        0 0 60px rgba(196, 181, 253, 0.08) inset !important;
    border-radius: 2px !important;
}

/* Corner ticks for that pro export-frame look */
.export-frame-border::before,
.export-frame-border::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(103, 232, 249, 0.85);
    pointer-events: none;
}
.export-frame-border::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}
.export-frame-border::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.export-frame-label {
    background:
        linear-gradient(180deg, rgba(15, 18, 30, 0.78), rgba(15, 18, 30, 0.62)) !important;
    border: 1px solid rgba(103, 232, 249, 0.35) !important;
    color: rgba(232, 240, 255, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 4px 8px !important;
    border-radius: var(--r-2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-variant-numeric: tabular-nums;
}

/* The little toggle button bottom-left of the toolbar */
.export-frame-toggle-btn {
    background:
        var(--grad-glass-sheen),
        var(--c-surface-1) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text-2) !important;
    border-radius: var(--r-2) !important;
    transition: all var(--t-fast) var(--ease-out) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.export-frame-toggle-btn:hover {
    background:
        linear-gradient(180deg, rgba(103, 232, 249, 0.10), rgba(196, 181, 253, 0.08)),
        var(--c-surface-1) !important;
    border-color: rgba(103, 232, 249, 0.45) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 18px rgba(103, 232, 249, 0.25);
}
.export-frame-toggle-btn.active {
    color: #67E8F9 !important;
    border-color: rgba(103, 232, 249, 0.55) !important;
    box-shadow: 0 0 14px rgba(103, 232, 249, 0.35) inset, 0 0 18px rgba(103, 232, 249, 0.25);
}