@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');

/* ====== TOKENS ====== */
:root {
    --bg: #0a0a0a;
    --bg-card: color-mix(in srgb, var(--green) 5%, transparent);
    --bg-card-h: color-mix(in srgb, var(--green) 8%, transparent);
    --border: color-mix(in srgb, var(--green) 15%, transparent);
    --border-h: color-mix(in srgb, var(--green) 30%, transparent);
    --green: #00FF41;
    --green-dim: #0D9B30;
    --green-dark: #003B00;
    --green-glow: color-mix(in srgb, var(--green) 25%, transparent);
    --red: #FF0040;
    --glass: rgba(5,5,5,0.88);
    --glass-b: color-mix(in srgb, var(--green) 12%, transparent);
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 10px;
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth: cubic-bezier(0.23, 1, 0.32, 1);
    --expo: cubic-bezier(0.16, 1, 0.3, 1);
    --mono: 'JetBrains Mono', 'Share Tech Mono', 'Fira Code', 'Courier New', monospace;
    --rain-color: #00FF41;
    --theme-transition: 0.5s;
}

/* ====== GATE SCREEN ====== */
.gate-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    animation: gateFadeIn .5s ease;
    padding: 16px;
}
.gate-overlay.hidden { display: none; }
.gate-overlay.gate-exit {
    animation: gateFadeOut .4s ease forwards;
    pointer-events: none;
}
@keyframes gateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateFadeOut { from { opacity: 1; } to { opacity: 0; } }
.gate-card {
    width: 100%; max-width: 400px;
    background: color-mix(in srgb, var(--green) 3%, #0a0a0a);
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 12px; padding: 32px 28px;
    box-shadow: 0 0 60px color-mix(in srgb, var(--green) 8%, transparent),
                0 0 120px color-mix(in srgb, var(--green) 4%, transparent);
    animation: gateCardIn .6s var(--expo) .1s both;
}
@keyframes gateCardIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
.gate-logo { text-align: center; margin-bottom: 24px; }
.gate-logo-icon {
    display: inline-block; font-size: 28px;
    color: var(--green); text-shadow: 0 0 12px var(--green-glow);
    margin-bottom: 8px;
}
.gate-title {
    font-family: var(--mono); font-size: 18px; font-weight: 800;
    color: var(--green); letter-spacing: .08em; margin: 0 0 6px;
}
.gate-subtitle {
    font-family: var(--mono); font-size: 10px;
    color: color-mix(in srgb, var(--green) 45%, transparent);
    margin: 0;
}
.gate-section { display: flex; flex-direction: column; gap: 12px; }
.gate-input-group { display: flex; flex-direction: column; gap: 4px; }
.gate-label {
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    text-transform: uppercase; letter-spacing: .08em;
}
.gate-input-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    border-radius: 6px; transition: all .2s;
    color: color-mix(in srgb, var(--green) 35%, transparent);
}
.gate-input-wrap:focus-within {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 6%, transparent);
    color: var(--green);
}
.gate-input {
    flex: 1; border: none; background: transparent; outline: none;
    font-family: var(--mono); font-size: 12px;
    color: color-mix(in srgb, var(--green) 85%, transparent);
}
.gate-input::placeholder { color: color-mix(in srgb, var(--green) 22%, transparent); }
.gate-error {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 5px;
    background: rgba(255,0,64,0.08); border: 1px solid rgba(255,0,64,0.2);
    color: #ff4466; font-size: 10px; font-family: var(--mono);
}
.gate-error.hidden { display: none; }
.gate-btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border: none; border-radius: 8px;
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    color: var(--green); font-family: var(--mono); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .25s var(--smooth);
    text-transform: uppercase; letter-spacing: .05em;
}
.gate-btn-primary:hover {
    background: color-mix(in srgb, var(--green) 22%, transparent);
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--green) 12%, transparent);
    transform: translateY(-1px);
}
.gate-btn-primary:active { transform: scale(0.98); }

/* Remember Me checkbox */
.gate-remember-wrap {
    margin: 12px 0;
}
.gate-checkbox-label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 11px;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    font-family: var(--mono);
}
.gate-checkbox {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.gate-checkbox-mark {
    width: 16px; height: 16px; border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    background: color-mix(in srgb, var(--green) 5%, transparent);
    position: relative; transition: all .2s;
}
.gate-checkbox-mark::after {
    content: ''; position: absolute;
    left: 5px; top: 2px; width: 4px; height: 8px;
    border: solid var(--green); border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); opacity: 0;
    transition: all .2s;
}
.gate-checkbox:checked + .gate-checkbox-mark {
    background: color-mix(in srgb, var(--green) 20%, transparent);
    border-color: var(--green);
}
.gate-checkbox:checked + .gate-checkbox-mark::after {
    transform: rotate(45deg) scale(1); opacity: 1;
}
.gate-checkbox-label:hover .gate-checkbox-mark {
    border-color: color-mix(in srgb, var(--green) 50%, transparent);
}

.gate-divider {
    display: flex; align-items: center; gap: 12px; margin: 16px 0;
    font-family: var(--mono); font-size: 9px;
    color: color-mix(in srgb, var(--green) 25%, transparent);
    text-transform: uppercase; letter-spacing: .1em;
}
.gate-divider::before, .gate-divider::after {
    content: ''; flex: 1; height: 1px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
}
.gate-btn-guest {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 8px; width: 100%;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--green) 18%, transparent);
    color: color-mix(in srgb, var(--green) 55%, transparent);
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all .25s;
}
.gate-btn-guest:hover {
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
    color: color-mix(in srgb, var(--green) 80%, transparent);
    background: color-mix(in srgb, var(--green) 4%, transparent);
}
.gate-guest-note {
    text-align: center; margin: 8px 0 0;
    font-family: var(--mono); font-size: 8px;
    color: color-mix(in srgb, var(--green) 30%, transparent);
}
.gate-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    font-family: var(--mono); font-size: 8px;
    color: color-mix(in srgb, var(--green) 30%, transparent);
}
.guest-limit-timer-wrap {
    text-align: center; padding: 16px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border-radius: 8px; margin-top: 8px;
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
}
.guest-limit-timer-label {
    font-family: var(--mono); font-size: 9px;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px;
}
.guest-limit-countdown {
    font-family: var(--mono); font-size: 28px; font-weight: 700;
    color: var(--green); letter-spacing: .05em;
    text-shadow: 0 0 12px color-mix(in srgb, var(--green) 30%, transparent);
}
.limit-promo-pill {
    padding: 5px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--green);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.limit-promo-pill:hover {
    background: var(--bg-card-h);
    border-color: var(--border-h);
    box-shadow: 0 0 12px var(--green-glow);
}
.auth-badge-login {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 4px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
    font-family: var(--mono); font-size: 8px; font-weight: 600;
    color: var(--green); text-transform: uppercase; letter-spacing: .05em;
}
.guest-uses-badge {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 4px;
    background: color-mix(in srgb, var(--green) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    color: color-mix(in srgb, var(--green) 60%, transparent);
}
.guest-uses-badge.exhausted {
    color: #ff4466; background: rgba(255,0,64,0.06);
    border-color: rgba(255,0,64,0.15);
}

/* ---- Scroll-to-Top Button ---- */
.scroll-top-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 90;
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--green); cursor: pointer;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: all .25s ease; opacity: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.scroll-top-btn:hover {
    border-color: var(--green); background: var(--bg-card-h);
    box-shadow: 0 0 20px color-mix(in srgb, var(--green) 20%, transparent);
    transform: translateY(-2px);
}
.scroll-top-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* ---- Spin Animation for Loading ---- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 1s linear infinite; }

/* ====== THEME: CYBERPUNK ====== */
[data-theme="cyberpunk"] {
    --bg: #0d0015;
    --bg-card: rgba(255,0,170,0.06);
    --bg-card-h: rgba(255,0,170,0.1);
    --border: rgba(255,0,170,0.18);
    --border-h: rgba(255,0,170,0.35);
    --green: #FF00AA;
    --green-dim: #aa0070;
    --green-dark: #3d0028;
    --green-glow: rgba(255,0,170,0.25);
    --red: #00FFFF;
    --glass: rgba(13,0,21,0.9);
    --glass-b: rgba(255,0,170,0.14);
    --mono: 'Orbitron', 'Inter', 'JetBrains Mono', sans-serif;
    --rain-color: #FF00AA;
}
[data-theme="cyberpunk"] body { background: var(--bg); }
[data-theme="cyberpunk"] .scanline-overlay {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,170,0.02) 2px, rgba(255,0,170,0.02) 4px);
}
[data-theme="cyberpunk"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(13,0,21,0.5) 100%);
}

/* ====== THEME: RETRO AMBER ====== */
[data-theme="amber"] {
    --bg: #0c0800;
    --bg-card: rgba(255,176,0,0.05);
    --bg-card-h: rgba(255,176,0,0.09);
    --border: rgba(255,176,0,0.16);
    --border-h: rgba(255,176,0,0.32);
    --green: #FFB000;
    --green-dim: #b07800;
    --green-dark: #3d2a00;
    --green-glow: rgba(255,176,0,0.25);
    --red: #FF4040;
    --glass: rgba(12,8,0,0.9);
    --glass-b: rgba(255,176,0,0.12);
    --mono: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
    --rain-color: #FFB000;
}
[data-theme="amber"] body { background: var(--bg); }
[data-theme="amber"] .scanline-overlay {
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,176,0,0.04) 1px, rgba(255,176,0,0.04) 3px);
}
[data-theme="amber"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(12,8,0,0.55) 100%);
}

/* ====== THEME: VAPORWAVE ====== */
[data-theme="vapor"] {
    --bg: #1a0a2e;
    --bg-card: rgba(255,110,199,0.06);
    --bg-card-h: rgba(255,110,199,0.1);
    --border: rgba(255,110,199,0.16);
    --border-h: rgba(255,110,199,0.3);
    --green: #FF6EC7;
    --green-dim: #c040a0;
    --green-dark: #4a1040;
    --green-glow: rgba(255,110,199,0.2);
    --red: #00E5FF;
    --glass: rgba(26,10,46,0.9);
    --glass-b: rgba(255,110,199,0.12);
    --mono: 'Quicksand', 'Inter', -apple-system, sans-serif;
    --rain-color: #FF6EC7;
}
[data-theme="vapor"] body {
    background: linear-gradient(180deg, #1a0a2e 0%, #0d1b3e 50%, #1a0a2e 100%) !important;
}
[data-theme="vapor"] .scanline-overlay {
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,110,199,0.015) 3px, rgba(255,110,199,0.015) 6px);
}
[data-theme="vapor"] .crt-vignette {
    background: radial-gradient(ellipse at center, rgba(0,229,255,0.03) 30%, transparent 60%, rgba(26,10,46,0.4) 100%);
}

/* ====== THEME: ARCTIC ====== */
[data-theme="arctic"] {
    --bg: #0a1628;
    --bg-card: rgba(100,200,255,0.06);
    --bg-card-h: rgba(100,200,255,0.1);
    --border: rgba(100,200,255,0.15);
    --border-h: rgba(100,200,255,0.3);
    --green: #64C8FF;
    --green-dim: #3a8ab5;
    --green-dark: #0d2a44;
    --green-glow: rgba(100,200,255,0.2);
    --red: #FF6B6B;
    --glass: rgba(10,22,40,0.92);
    --glass-b: rgba(100,200,255,0.1);
    --mono: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
    --rain-color: #64C8FF;
}
[data-theme="arctic"] body {
    background: linear-gradient(180deg, #0a1628 0%, #0f2240 60%, #0a1628 100%) !important;
}
[data-theme="arctic"] .scanline-overlay { display: none; }
[data-theme="arctic"] .crt-vignette {
    background: radial-gradient(ellipse at center, rgba(100,200,255,0.02) 30%, transparent 60%, rgba(10,22,40,0.3) 100%);
}
[data-theme="arctic"] .cursor-dot { border-radius: 50%; }
[data-theme="arctic"] .cursor-ring { border-radius: 50%; }
[data-theme="arctic"] .step-dot { border-radius: 50%; }
[data-theme="arctic"] .badge-pulse { border-radius: 50%; }
[data-theme="arctic"] .logo-mark { border-radius: 6px; }
[data-theme="arctic"] .glass-card { border-radius: 12px; }
[data-theme="arctic"] .drop-zone { border-radius: 16px; }
[data-theme="arctic"] .drop-zone::before { border-radius: 16px; border-style: solid; }
[data-theme="arctic"] .upload-icon-wrap { border-radius: 50%; }
[data-theme="arctic"] .btn-primary { border-radius: 8px; }
[data-theme="arctic"] .btn-convert-main { border-radius: 10px; }
[data-theme="arctic"] .format-select { border-radius: 8px; }
[data-theme="arctic"] .format-tag { border-radius: 12px; }
[data-theme="arctic"] .privacy-card { border-radius: 10px; }
[data-theme="arctic"] .privacy-icon { border-radius: 50%; }
[data-theme="arctic"] .tool-mini { border-radius: 10px; }
[data-theme="arctic"] .nav-pill { border-radius: 8px; }
[data-theme="arctic"] .nav-indicator { border-radius: 8px; }
[data-theme="arctic"] .compress-tab { border-radius: 8px; }
[data-theme="arctic"] .toggle-slider { border-radius: 12px; }
[data-theme="arctic"] .toggle-slider::before { border-radius: 50%; }
[data-theme="arctic"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: DRACULA ====== */
[data-theme="dracula"] {
    --bg: #282a36;
    --bg-card: rgba(189,147,249,0.06);
    --bg-card-h: rgba(189,147,249,0.1);
    --border: rgba(189,147,249,0.16);
    --border-h: rgba(189,147,249,0.32);
    --green: #BD93F9;
    --green-dim: #8860c8;
    --green-dark: #3d2860;
    --green-glow: rgba(189,147,249,0.2);
    --red: #FF5555;
    --glass: rgba(40,42,54,0.94);
    --glass-b: rgba(189,147,249,0.1);
    --mono: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #BD93F9;
}
[data-theme="dracula"] body { background: var(--bg); }
[data-theme="dracula"] .scanline-overlay { display: none; }
[data-theme="dracula"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 60%, rgba(40,42,54,0.4) 100%);
}
[data-theme="dracula"] #matrix-rain { opacity: 0.04; }

/* ====== THEME: SUNSET ====== */
[data-theme="sunset"] {
    --bg: #1a0a0a;
    --bg-card: rgba(255,100,50,0.06);
    --bg-card-h: rgba(255,100,50,0.1);
    --border: rgba(255,100,50,0.16);
    --border-h: rgba(255,100,50,0.32);
    --green: #FF6432;
    --green-dim: #c04820;
    --green-dark: #4a1a0a;
    --green-glow: rgba(255,100,50,0.22);
    --red: #FFD700;
    --glass: rgba(26,10,10,0.9);
    --glass-b: rgba(255,100,50,0.12);
    --mono: 'Space Mono', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #FF6432;
}
[data-theme="sunset"] body {
    background: linear-gradient(180deg, #1a0a0a 0%, #1a0f05 50%, #1a0a0a 100%) !important;
}
[data-theme="sunset"] .scanline-overlay {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,100,50,0.02) 2px, rgba(255,100,50,0.02) 4px);
}
[data-theme="sunset"] .crt-vignette {
    background: radial-gradient(ellipse at center bottom, rgba(255,100,50,0.04) 20%, transparent 60%, rgba(26,10,10,0.5) 100%);
}

/* ====== THEME: OCEAN ====== */
[data-theme="ocean"] {
    --bg: #040f1a;
    --bg-card: rgba(0,210,180,0.06);
    --bg-card-h: rgba(0,210,180,0.1);
    --border: rgba(0,210,180,0.15);
    --border-h: rgba(0,210,180,0.3);
    --green: #00D2B4;
    --green-dim: #009a85;
    --green-dark: #003830;
    --green-glow: rgba(0,210,180,0.2);
    --red: #FF6B9D;
    --glass: rgba(4,15,26,0.92);
    --glass-b: rgba(0,210,180,0.1);
    --mono: 'IBM Plex Mono', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #00D2B4;
}
[data-theme="ocean"] body {
    background: linear-gradient(180deg, #040f1a 0%, #061520 50%, #040f1a 100%) !important;
}
[data-theme="ocean"] .scanline-overlay {
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,210,180,0.012) 3px, rgba(0,210,180,0.012) 6px);
}
[data-theme="ocean"] .crt-vignette {
    background: radial-gradient(ellipse at center, rgba(0,210,180,0.02) 30%, transparent 60%, rgba(4,15,26,0.4) 100%);
}

/* ====== THEME: NEON LIME ====== */
[data-theme="lime"] {
    --bg: #080c00;
    --bg-card: rgba(180,255,0,0.05);
    --bg-card-h: rgba(180,255,0,0.08);
    --border: rgba(180,255,0,0.14);
    --border-h: rgba(180,255,0,0.28);
    --green: #B4FF00;
    --green-dim: #80b300;
    --green-dark: #2a3d00;
    --green-glow: rgba(180,255,0,0.2);
    --red: #FF3860;
    --glass: rgba(8,12,0,0.9);
    --glass-b: rgba(180,255,0,0.1);
    --mono: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --rain-color: #B4FF00;
}
[data-theme="lime"] body { background: var(--bg); }
[data-theme="lime"] .scanline-overlay {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(180,255,0,0.02) 2px, rgba(180,255,0,0.02) 4px);
}
[data-theme="lime"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 60%, rgba(8,12,0,0.4) 100%);
}

/* ====== THEME: ROSE GOLD ====== */
[data-theme="rosegold"] {
    --bg: #1a1018;
    --bg-card: rgba(232,170,160,0.06);
    --bg-card-h: rgba(232,170,160,0.1);
    --border: rgba(232,170,160,0.14);
    --border-h: rgba(232,170,160,0.28);
    --green: #E8AAA0;
    --green-dim: #b88078;
    --green-dark: #4a2a25;
    --green-glow: rgba(232,170,160,0.18);
    --red: #FF5C8A;
    --glass: rgba(26,16,24,0.92);
    --glass-b: rgba(232,170,160,0.1);
    --mono: 'DM Sans', 'Inter', -apple-system, system-ui, sans-serif;
    --rain-color: #E8AAA0;
}
[data-theme="rosegold"] body {
    background: linear-gradient(180deg, #1a1018 0%, #1e1420 50%, #1a1018 100%) !important;
}
[data-theme="rosegold"] .scanline-overlay { display: none; }
[data-theme="rosegold"] .crt-vignette {
    background: radial-gradient(ellipse at center, rgba(232,170,160,0.02) 30%, transparent 60%, rgba(26,16,24,0.3) 100%);
}
[data-theme="rosegold"] .cursor-dot { border-radius: 50%; }
[data-theme="rosegold"] .cursor-ring { border-radius: 50%; }
[data-theme="rosegold"] .logo-mark { border-radius: 6px; }
[data-theme="rosegold"] .glass-card { border-radius: 10px; }
[data-theme="rosegold"] .drop-zone { border-radius: 14px; }
[data-theme="rosegold"] .drop-zone::before { border-radius: 14px; border-style: solid; }
[data-theme="rosegold"] .upload-icon-wrap { border-radius: 50%; }
[data-theme="rosegold"] .btn-primary { border-radius: 8px; }
[data-theme="rosegold"] .btn-convert-main { border-radius: 8px; }
[data-theme="rosegold"] .format-tag { border-radius: 10px; }
[data-theme="rosegold"] .privacy-card { border-radius: 8px; }
[data-theme="rosegold"] .tool-mini { border-radius: 8px; }
[data-theme="rosegold"] #matrix-rain { opacity: 0.025; }

/* ====== THEME: SYNTHWAVE ====== */
[data-theme="synthwave"] {
    --bg: #0a0014;
    --bg-card: rgba(224,64,251,0.06);
    --bg-card-h: rgba(224,64,251,0.1);
    --border: rgba(224,64,251,0.16);
    --border-h: rgba(224,64,251,0.32);
    --green: #E040FB;
    --green-dim: #a020c0;
    --green-dark: #3d005a;
    --green-glow: rgba(224,64,251,0.22);
    --red: #00E5FF;
    --glass: rgba(10,0,20,0.92);
    --glass-b: rgba(224,64,251,0.12);
    --mono: 'Orbitron', 'Inter', 'JetBrains Mono', sans-serif;
    --rain-color: #E040FB;
}
[data-theme="synthwave"] body { background: linear-gradient(180deg, #0a0014 0%, #100025 60%, #0a0014 100%) !important; }
[data-theme="synthwave"] .scanline-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(224,64,251,0.015) 2px, rgba(224,64,251,0.015) 4px); }
[data-theme="synthwave"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(224,64,251,0.02) 30%, transparent 60%, rgba(10,0,20,0.5) 100%); }

/* ====== THEME: EMERALD ====== */
[data-theme="emerald"] {
    --bg: #061a0e;
    --bg-card: rgba(46,204,113,0.06);
    --bg-card-h: rgba(46,204,113,0.1);
    --border: rgba(46,204,113,0.16);
    --border-h: rgba(46,204,113,0.3);
    --green: #2ECC71;
    --green-dim: #1a9c52;
    --green-dark: #0a3d1e;
    --green-glow: rgba(46,204,113,0.2);
    --red: #E74C3C;
    --glass: rgba(6,26,14,0.92);
    --glass-b: rgba(46,204,113,0.1);
    --mono: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --rain-color: #2ECC71;
}
[data-theme="emerald"] body { background: linear-gradient(180deg, #061a0e 0%, #082818 50%, #061a0e 100%) !important; }
[data-theme="emerald"] .scanline-overlay { display: none; }
[data-theme="emerald"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(46,204,113,0.015) 30%, transparent 60%, rgba(6,26,14,0.4) 100%); }
[data-theme="emerald"] #matrix-rain { opacity: 0.04; }

/* ====== THEME: BLOOD MOON ====== */
[data-theme="bloodmoon"] {
    --bg: #120000;
    --bg-card: rgba(220,20,60,0.07);
    --bg-card-h: rgba(220,20,60,0.12);
    --border: rgba(220,20,60,0.18);
    --border-h: rgba(220,20,60,0.35);
    --green: #DC143C;
    --green-dim: #a01030;
    --green-dark: #3d0010;
    --green-glow: rgba(220,20,60,0.2);
    --red: #FFD700;
    --glass: rgba(18,0,0,0.94);
    --glass-b: rgba(220,20,60,0.12);
    --mono: 'Space Mono', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #DC143C;
}
[data-theme="bloodmoon"] body { background: radial-gradient(ellipse at 50% 20%, #1a0505 0%, #120000 100%) !important; }
[data-theme="bloodmoon"] .scanline-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(220,20,60,0.02) 2px, rgba(220,20,60,0.02) 4px); }
[data-theme="bloodmoon"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(220,20,60,0.03) 20%, transparent 50%, rgba(18,0,0,0.6) 100%); }

/* ====== THEME: SAKURA ====== */
[data-theme="sakura"] {
    --bg: #1a0f14;
    --bg-card: rgba(255,183,197,0.06);
    --bg-card-h: rgba(255,183,197,0.1);
    --border: rgba(255,183,197,0.14);
    --border-h: rgba(255,183,197,0.28);
    --green: #FFB7C5;
    --green-dim: #d48a9a;
    --green-dark: #5a2838;
    --green-glow: rgba(255,183,197,0.18);
    --red: #FF69B4;
    --glass: rgba(26,15,20,0.92);
    --glass-b: rgba(255,183,197,0.1);
    --mono: 'DM Sans', 'Quicksand', -apple-system, sans-serif;
    --rain-color: #FFB7C5;
}
[data-theme="sakura"] body { background: linear-gradient(180deg, #1a0f14 0%, #1e1318 50%, #1a0f14 100%) !important; }
[data-theme="sakura"] .scanline-overlay { display: none; }
[data-theme="sakura"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(255,183,197,0.02) 30%, transparent 60%, rgba(26,15,20,0.3) 100%); }
[data-theme="sakura"] .cursor-dot { border-radius: 50%; }
[data-theme="sakura"] .cursor-ring { border-radius: 50%; }
[data-theme="sakura"] .glass-card { border-radius: 12px; }
[data-theme="sakura"] .tool-mini { border-radius: 10px; }
[data-theme="sakura"] #matrix-rain { opacity: 0.02; }

/* ====== THEME: TERMINAL ====== */
[data-theme="terminal"] {
    --bg: #000000;
    --bg-card: rgba(51,255,51,0.04);
    --bg-card-h: rgba(51,255,51,0.07);
    --border: rgba(51,255,51,0.12);
    --border-h: rgba(51,255,51,0.25);
    --green: #33FF33;
    --green-dim: #1aaa1a;
    --green-dark: #003300;
    --green-glow: rgba(51,255,51,0.2);
    --red: #FF3333;
    --glass: rgba(0,0,0,0.95);
    --glass-b: rgba(51,255,51,0.08);
    --mono: 'Share Tech Mono', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #33FF33;
}
[data-theme="terminal"] body { background: #000 !important; }
[data-theme="terminal"] .scanline-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(51,255,51,0.03) 1px, rgba(51,255,51,0.03) 3px); }
[data-theme="terminal"] .crt-vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%); }

/* ====== THEME: GLACIAL ====== */
[data-theme="glacial"] {
    --bg: #0a0f18;
    --bg-card: rgba(168,216,234,0.05);
    --bg-card-h: rgba(168,216,234,0.09);
    --border: rgba(168,216,234,0.13);
    --border-h: rgba(168,216,234,0.26);
    --green: #A8D8EA;
    --green-dim: #7ab0c4;
    --green-dark: #2a4a5a;
    --green-glow: rgba(168,216,234,0.16);
    --red: #FF8A80;
    --glass: rgba(10,15,24,0.93);
    --glass-b: rgba(168,216,234,0.08);
    --mono: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
    --rain-color: #A8D8EA;
}
[data-theme="glacial"] body { background: linear-gradient(180deg, #0a0f18 0%, #0d1520 50%, #0a0f18 100%) !important; }
[data-theme="glacial"] .scanline-overlay { display: none; }
[data-theme="glacial"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(168,216,234,0.015) 30%, transparent 60%, rgba(10,15,24,0.35) 100%); }
[data-theme="glacial"] .cursor-dot { border-radius: 50%; }
[data-theme="glacial"] .cursor-ring { border-radius: 50%; }
[data-theme="glacial"] #matrix-rain { opacity: 0.025; }

/* ====== THEME: COPPER ====== */
[data-theme="copper"] {
    --bg: #140c06;
    --bg-card: rgba(212,136,90,0.06);
    --bg-card-h: rgba(212,136,90,0.1);
    --border: rgba(212,136,90,0.16);
    --border-h: rgba(212,136,90,0.3);
    --green: #D4885A;
    --green-dim: #a06840;
    --green-dark: #4a2a15;
    --green-glow: rgba(212,136,90,0.2);
    --red: #FF6B6B;
    --glass: rgba(20,12,6,0.92);
    --glass-b: rgba(212,136,90,0.1);
    --mono: 'IBM Plex Mono', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #D4885A;
}
[data-theme="copper"] body { background: linear-gradient(180deg, #140c06 0%, #1a100a 50%, #140c06 100%) !important; }
[data-theme="copper"] .scanline-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(212,136,90,0.02) 2px, rgba(212,136,90,0.02) 4px); }
[data-theme="copper"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(212,136,90,0.02) 30%, transparent 60%, rgba(20,12,6,0.5) 100%); }

/* ====== THEME: ULTRAVIOLET ====== */
[data-theme="ultraviolet"] {
    --bg: #0a0020;
    --bg-card: rgba(124,77,255,0.06);
    --bg-card-h: rgba(124,77,255,0.1);
    --border: rgba(124,77,255,0.16);
    --border-h: rgba(124,77,255,0.32);
    --green: #7C4DFF;
    --green-dim: #5c3aaa;
    --green-dark: #2a1060;
    --green-glow: rgba(124,77,255,0.22);
    --red: #FF4081;
    --glass: rgba(10,0,32,0.92);
    --glass-b: rgba(124,77,255,0.1);
    --mono: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
    --rain-color: #7C4DFF;
}
[data-theme="ultraviolet"] body { background: linear-gradient(180deg, #0a0020 0%, #0f0030 60%, #0a0020 100%) !important; }
[data-theme="ultraviolet"] .scanline-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(124,77,255,0.015) 2px, rgba(124,77,255,0.015) 4px); }
[data-theme="ultraviolet"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(124,77,255,0.025) 30%, transparent 60%, rgba(10,0,32,0.5) 100%); }

/* ====== THEME: FOREST ====== */
[data-theme="forest"] {
    --bg: #0a0e04;
    --bg-card: rgba(139,195,74,0.05);
    --bg-card-h: rgba(139,195,74,0.09);
    --border: rgba(139,195,74,0.14);
    --border-h: rgba(139,195,74,0.28);
    --green: #8BC34A;
    --green-dim: #6a9a35;
    --green-dark: #2a3d12;
    --green-glow: rgba(139,195,74,0.18);
    --red: #FF7043;
    --glass: rgba(10,14,4,0.92);
    --glass-b: rgba(139,195,74,0.08);
    --mono: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --rain-color: #8BC34A;
}
[data-theme="forest"] body { background: linear-gradient(180deg, #0a0e04 0%, #0e1608 60%, #0a0e04 100%) !important; }
[data-theme="forest"] .scanline-overlay { display: none; }
[data-theme="forest"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(139,195,74,0.01) 30%, transparent 60%, rgba(10,14,4,0.4) 100%); }
[data-theme="forest"] #matrix-rain { opacity: 0.035; }

/* ====== THEME: HOLOGRAM ====== */
[data-theme="hologram"] {
    --bg: #020a10;
    --bg-card: rgba(0,229,255,0.05);
    --bg-card-h: rgba(0,229,255,0.09);
    --border: rgba(0,229,255,0.14);
    --border-h: rgba(0,229,255,0.3);
    --green: #00E5FF;
    --green-dim: #00a8bb;
    --green-dark: #004050;
    --green-glow: rgba(0,229,255,0.2);
    --red: #FF4081;
    --glass: rgba(2,10,16,0.94);
    --glass-b: rgba(0,229,255,0.1);
    --mono: 'Orbitron', 'Inter', 'JetBrains Mono', sans-serif;
    --rain-color: #00E5FF;
}
[data-theme="hologram"] body { background: #020a10 !important; }
[data-theme="hologram"] .scanline-overlay { background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,229,255,0.01) 3px, rgba(0,229,255,0.01) 6px); }
[data-theme="hologram"] .crt-vignette { background: radial-gradient(ellipse at center, rgba(0,229,255,0.02) 30%, transparent 60%, rgba(2,10,16,0.5) 100%); }

/* ====== THEME: CHROME (LIGHT) ====== */
[data-theme="chrome"] {
    --bg: #e8eaed;
    --bg-card: rgba(60,64,72,0.07);
    --bg-card-h: rgba(60,64,72,0.12);
    --border: rgba(60,64,72,0.18);
    --border-h: rgba(60,64,72,0.35);
    --green: #3c4048;
    --green-dim: #5a5e66;
    --green-dark: #c0c4cc;
    --green-glow: rgba(60,64,72,0.15);
    --red: #D93025;
    --glass: rgba(235,237,240,0.92);
    --glass-b: rgba(60,64,72,0.08);
    --mono: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
    --rain-color: #9aa0a8;
}
[data-theme="chrome"] body {
    background: linear-gradient(160deg, #e8eaed 0%, #d4d7dd 40%, #e2e4e8 100%) !important;
}
[data-theme="chrome"] .scanline-overlay { display: none; }
[data-theme="chrome"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(200,203,210,0.3) 100%);
}
[data-theme="chrome"] #matrix-rain { opacity: 0.025; }
[data-theme="chrome"] .cursor-dot { border-radius: 50%; }
[data-theme="chrome"] .cursor-ring { border-radius: 50%; }
[data-theme="chrome"] .glass-card { border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); }
[data-theme="chrome"] .drop-zone { border-radius: 16px; }
[data-theme="chrome"] .drop-zone::before { border-radius: 16px; border-style: solid; }
[data-theme="chrome"] .upload-icon-wrap { border-radius: 50%; }
[data-theme="chrome"] .btn-primary { border-radius: 8px; }
[data-theme="chrome"] .btn-convert-main { border-radius: 10px; }
[data-theme="chrome"] .format-select { border-radius: 8px; background: rgba(0,0,0,0.04); }
[data-theme="chrome"] .format-tag { border-radius: 12px; }
[data-theme="chrome"] .privacy-card { border-radius: 10px; }
[data-theme="chrome"] .privacy-icon { border-radius: 50%; }
[data-theme="chrome"] .tool-mini { border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="chrome"] .nav-pill { border-radius: 8px; }
[data-theme="chrome"] .nav-indicator { border-radius: 8px; }
[data-theme="chrome"] .logo-mark { border-radius: 6px; }
[data-theme="chrome"] .toggle-slider { border-radius: 12px; }
[data-theme="chrome"] .toggle-slider::before { border-radius: 50%; }
[data-theme="chrome"] .theme-dropdown { box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="chrome"] .tool-panel-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="chrome"] .setting-input,
[data-theme="chrome"] .tool-textarea { background: rgba(0,0,0,0.03); color: var(--green); }
[data-theme="chrome"] .section-title,
[data-theme="chrome"] .section-badge,
[data-theme="chrome"] h2, [data-theme="chrome"] h3 { text-shadow: none; }

/* ====== THEME: SILVER (LIGHT) ====== */
[data-theme="silver"] {
    --bg: #f0f0f2;
    --bg-card: rgba(120,120,135,0.07);
    --bg-card-h: rgba(120,120,135,0.12);
    --border: rgba(120,120,135,0.2);
    --border-h: rgba(120,120,135,0.38);
    --green: #6B6E78;
    --green-dim: #8a8d95;
    --green-dark: #c8c9ce;
    --green-glow: rgba(120,120,135,0.12);
    --red: #E53935;
    --glass: rgba(240,240,242,0.94);
    --glass-b: rgba(120,120,135,0.08);
    --mono: 'DM Sans', 'Inter', -apple-system, system-ui, sans-serif;
    --rain-color: #b0b2ba;
}
[data-theme="silver"] body {
    background: linear-gradient(180deg, #f0f0f2 0%, #e4e4e8 50%, #ececf0 100%) !important;
}
[data-theme="silver"] .scanline-overlay { display: none; }
[data-theme="silver"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(180,180,190,0.2) 100%);
}
[data-theme="silver"] #matrix-rain { opacity: 0.02; }
[data-theme="silver"] .cursor-dot { border-radius: 50%; }
[data-theme="silver"] .cursor-ring { border-radius: 50%; }
[data-theme="silver"] .glass-card { border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04); }
[data-theme="silver"] .drop-zone { border-radius: 18px; }
[data-theme="silver"] .drop-zone::before { border-radius: 18px; border-style: solid; }
[data-theme="silver"] .upload-icon-wrap { border-radius: 50%; }
[data-theme="silver"] .btn-primary { border-radius: 10px; }
[data-theme="silver"] .btn-convert-main { border-radius: 12px; }
[data-theme="silver"] .format-select { border-radius: 10px; background: rgba(0,0,0,0.04); }
[data-theme="silver"] .format-tag { border-radius: 14px; }
[data-theme="silver"] .privacy-card { border-radius: 12px; }
[data-theme="silver"] .privacy-icon { border-radius: 50%; }
[data-theme="silver"] .tool-mini { border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
[data-theme="silver"] .nav-pill { border-radius: 10px; }
[data-theme="silver"] .nav-indicator { border-radius: 10px; }
[data-theme="silver"] .logo-mark { border-radius: 8px; }
[data-theme="silver"] .toggle-slider { border-radius: 14px; }
[data-theme="silver"] .toggle-slider::before { border-radius: 50%; }
[data-theme="silver"] .theme-dropdown { box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="silver"] .tool-panel-overlay { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="silver"] .setting-input,
[data-theme="silver"] .tool-textarea { background: rgba(0,0,0,0.03); color: var(--green); }

/* ====== THEME: NOIR (B&W LIGHT) ====== */
[data-theme="noir"] {
    --bg: #fafafa;
    --bg-card: rgba(0,0,0,0.04);
    --bg-card-h: rgba(0,0,0,0.07);
    --border: rgba(0,0,0,0.12);
    --border-h: rgba(0,0,0,0.25);
    --green: #1a1a1a;
    --green-dim: #555;
    --green-dark: #ddd;
    --green-glow: rgba(0,0,0,0.08);
    --red: #c62828;
    --glass: rgba(250,250,250,0.95);
    --glass-b: rgba(0,0,0,0.05);
    --mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;
    --rain-color: #ccc;
}
[data-theme="noir"] body {
    background: #fafafa !important;
}
[data-theme="noir"] .scanline-overlay { display: none; }
[data-theme="noir"] .crt-vignette {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(200,200,200,0.15) 100%);
}
[data-theme="noir"] #matrix-rain { opacity: 0.015; }
[data-theme="noir"] .cursor-dot { border-radius: 50%; }
[data-theme="noir"] .cursor-ring { border-radius: 50%; }
[data-theme="noir"] .glass-card { border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.08); }
[data-theme="noir"] .drop-zone { border-radius: 14px; }
[data-theme="noir"] .drop-zone::before { border-radius: 14px; border-style: solid; }
[data-theme="noir"] .upload-icon-wrap { border-radius: 50%; }
[data-theme="noir"] .btn-primary { border-radius: 6px; }
[data-theme="noir"] .btn-convert-main { border-radius: 8px; }
[data-theme="noir"] .format-select { border-radius: 6px; background: rgba(0,0,0,0.04); }
[data-theme="noir"] .setting-input,
[data-theme="noir"] .tool-textarea { background: rgba(0,0,0,0.03); color: var(--green); }
[data-theme="noir"] .format-tag { border-radius: 10px; }
[data-theme="noir"] .privacy-card { border-radius: 8px; }
[data-theme="noir"] .privacy-icon { border-radius: 50%; }
[data-theme="noir"] .tool-mini { border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
[data-theme="noir"] .nav-pill { border-radius: 6px; }
[data-theme="noir"] .nav-indicator { border-radius: 6px; }
[data-theme="noir"] .logo-mark { border-radius: 4px; }
[data-theme="noir"] .toggle-slider { border-radius: 12px; }
[data-theme="noir"] .toggle-slider::before { border-radius: 50%; }
[data-theme="noir"] .theme-dropdown { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }

/* ====== THEME: MIDNIGHT ====== */
[data-theme="midnight"] {
    --bg: #080818;
    --bg-card: rgba(65,105,225,0.06);
    --bg-card-h: rgba(65,105,225,0.1);
    --border: rgba(65,105,225,0.16);
    --border-h: rgba(65,105,225,0.3);
    --green: #4169E1;
    --green-dim: #2c4aa0;
    --green-dark: #0c1540;
    --green-glow: rgba(65,105,225,0.2);
    --red: #FF6B6B;
    --glass: rgba(8,8,24,0.92);
    --glass-b: rgba(65,105,225,0.1);
    --mono: 'JetBrains Mono', 'SF Mono', monospace;
    --rain-color: #4169E1;
}
[data-theme="midnight"] body { background: linear-gradient(180deg, #080818 0%, #0c1030 50%, #080818 100%) !important; }
[data-theme="midnight"] .scanline-overlay { display: none; }
[data-theme="midnight"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: MAGMA ====== */
[data-theme="magma"] {
    --bg: #1a0a00;
    --bg-card: rgba(255,85,0,0.07);
    --bg-card-h: rgba(255,85,0,0.12);
    --border: rgba(255,85,0,0.18);
    --border-h: rgba(255,85,0,0.35);
    --green: #FF5500;
    --green-dim: #cc4400;
    --green-dark: #3d1500;
    --green-glow: rgba(255,85,0,0.2);
    --red: #FFD700;
    --glass: rgba(26,10,0,0.92);
    --glass-b: rgba(255,85,0,0.1);
    --mono: 'Inter', -apple-system, sans-serif;
    --rain-color: #FF5500;
}
[data-theme="magma"] body { background: linear-gradient(180deg, #1a0a00 0%, #2a1000 50%, #1a0a00 100%) !important; }
[data-theme="magma"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: LAVENDER ====== */
[data-theme="lavender"] {
    --bg: #120818;
    --bg-card: rgba(186,148,255,0.06);
    --bg-card-h: rgba(186,148,255,0.1);
    --border: rgba(186,148,255,0.16);
    --border-h: rgba(186,148,255,0.3);
    --green: #BA94FF;
    --green-dim: #9070cc;
    --green-dark: #2a1a40;
    --green-glow: rgba(186,148,255,0.2);
    --red: #FF94B4;
    --glass: rgba(18,8,24,0.92);
    --glass-b: rgba(186,148,255,0.1);
    --mono: 'Space Grotesk', 'Inter', sans-serif;
    --rain-color: #BA94FF;
}
[data-theme="lavender"] body { background: linear-gradient(180deg, #120818 0%, #1a1028 50%, #120818 100%) !important; }
[data-theme="lavender"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: NEON PINK ====== */
[data-theme="neonpink"] {
    --bg: #120008;
    --bg-card: rgba(255,20,147,0.07);
    --bg-card-h: rgba(255,20,147,0.12);
    --border: rgba(255,20,147,0.18);
    --border-h: rgba(255,20,147,0.35);
    --green: #FF1493;
    --green-dim: #cc1076;
    --green-dark: #3d0524;
    --green-glow: rgba(255,20,147,0.22);
    --red: #00FFFF;
    --glass: rgba(18,0,8,0.92);
    --glass-b: rgba(255,20,147,0.1);
    --mono: 'Orbitron', 'Inter', sans-serif;
    --rain-color: #FF1493;
}
[data-theme="neonpink"] body { background: linear-gradient(180deg, #120008 0%, #200012 50%, #120008 100%) !important; }
[data-theme="neonpink"] #matrix-rain { opacity: 0.035; }

/* ====== THEME: JADE ====== */
[data-theme="jade"] {
    --bg: #001a0f;
    --bg-card: rgba(0,168,107,0.06);
    --bg-card-h: rgba(0,168,107,0.1);
    --border: rgba(0,168,107,0.16);
    --border-h: rgba(0,168,107,0.3);
    --green: #00A86B;
    --green-dim: #008555;
    --green-dark: #003322;
    --green-glow: rgba(0,168,107,0.2);
    --red: #FF6B6B;
    --glass: rgba(0,26,15,0.92);
    --glass-b: rgba(0,168,107,0.1);
    --mono: 'SF Mono', 'JetBrains Mono', monospace;
    --rain-color: #00A86B;
}
[data-theme="jade"] body { background: linear-gradient(180deg, #001a0f 0%, #002818 50%, #001a0f 100%) !important; }
[data-theme="jade"] #matrix-rain { opacity: 0.04; }

/* ====== THEME: RUST ====== */
[data-theme="rust"] {
    --bg: #180c06;
    --bg-card: rgba(183,65,14,0.07);
    --bg-card-h: rgba(183,65,14,0.12);
    --border: rgba(183,65,14,0.18);
    --border-h: rgba(183,65,14,0.35);
    --green: #B7410E;
    --green-dim: #8c320b;
    --green-dark: #2d1106;
    --green-glow: rgba(183,65,14,0.2);
    --red: #F0C040;
    --glass: rgba(24,12,6,0.92);
    --glass-b: rgba(183,65,14,0.1);
    --mono: 'JetBrains Mono', monospace;
    --rain-color: #B7410E;
}
[data-theme="rust"] body { background: linear-gradient(180deg, #180c06 0%, #20140a 50%, #180c06 100%) !important; }
[data-theme="rust"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: ICE ====== */
[data-theme="ice"] {
    --bg: #060e18;
    --bg-card: rgba(135,206,250,0.06);
    --bg-card-h: rgba(135,206,250,0.1);
    --border: rgba(135,206,250,0.16);
    --border-h: rgba(135,206,250,0.3);
    --green: #87CEFA;
    --green-dim: #5eaad0;
    --green-dark: #1a3040;
    --green-glow: rgba(135,206,250,0.2);
    --red: #FF6B6B;
    --glass: rgba(6,14,24,0.92);
    --glass-b: rgba(135,206,250,0.1);
    --mono: 'Space Grotesk', 'Inter', sans-serif;
    --rain-color: #87CEFA;
}
[data-theme="ice"] body { background: linear-gradient(180deg, #060e18 0%, #0a1828 50%, #060e18 100%) !important; }
[data-theme="ice"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: GOLD ====== */
[data-theme="gold"] {
    --bg: #141006;
    --bg-card: rgba(255,215,0,0.06);
    --bg-card-h: rgba(255,215,0,0.1);
    --border: rgba(255,215,0,0.16);
    --border-h: rgba(255,215,0,0.3);
    --green: #FFD700;
    --green-dim: #ccac00;
    --green-dark: #3d3300;
    --green-glow: rgba(255,215,0,0.2);
    --red: #FF4444;
    --glass: rgba(20,16,6,0.92);
    --glass-b: rgba(255,215,0,0.1);
    --mono: 'Inter', -apple-system, sans-serif;
    --rain-color: #FFD700;
}
[data-theme="gold"] body { background: linear-gradient(180deg, #141006 0%, #1e1a0a 50%, #141006 100%) !important; }
[data-theme="gold"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: PHANTOM ====== */
[data-theme="phantom"] {
    --bg: #0a0a10;
    --bg-card: rgba(148,130,200,0.06);
    --bg-card-h: rgba(148,130,200,0.1);
    --border: rgba(148,130,200,0.14);
    --border-h: rgba(148,130,200,0.28);
    --green: #9482C8;
    --green-dim: #7060a0;
    --green-dark: #1e1830;
    --green-glow: rgba(148,130,200,0.18);
    --red: #FF7070;
    --glass: rgba(10,10,16,0.92);
    --glass-b: rgba(148,130,200,0.08);
    --mono: 'JetBrains Mono', monospace;
    --rain-color: #9482C8;
}
[data-theme="phantom"] body { background: linear-gradient(180deg, #0a0a10 0%, #12101e 50%, #0a0a10 100%) !important; }
[data-theme="phantom"] #matrix-rain { opacity: 0.025; }

/* ====== THEME: CORAL ====== */
[data-theme="coral"] {
    --bg: #180808;
    --bg-card: rgba(255,127,80,0.07);
    --bg-card-h: rgba(255,127,80,0.12);
    --border: rgba(255,127,80,0.18);
    --border-h: rgba(255,127,80,0.35);
    --green: #FF7F50;
    --green-dim: #cc6540;
    --green-dark: #3d2518;
    --green-glow: rgba(255,127,80,0.2);
    --red: #50D0FF;
    --glass: rgba(24,8,8,0.92);
    --glass-b: rgba(255,127,80,0.1);
    --mono: 'Inter', -apple-system, sans-serif;
    --rain-color: #FF7F50;
}
[data-theme="coral"] body { background: linear-gradient(180deg, #180808 0%, #221010 50%, #180808 100%) !important; }
[data-theme="coral"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: ELECTRIC ====== */
[data-theme="electric"] {
    --bg: #000a18;
    --bg-card: rgba(0,191,255,0.06);
    --bg-card-h: rgba(0,191,255,0.1);
    --border: rgba(0,191,255,0.16);
    --border-h: rgba(0,191,255,0.3);
    --green: #00BFFF;
    --green-dim: #0098cc;
    --green-dark: #002840;
    --green-glow: rgba(0,191,255,0.2);
    --red: #FF4081;
    --glass: rgba(0,10,24,0.92);
    --glass-b: rgba(0,191,255,0.1);
    --mono: 'Orbitron', 'Inter', sans-serif;
    --rain-color: #00BFFF;
}
[data-theme="electric"] body { background: linear-gradient(180deg, #000a18 0%, #001428 50%, #000a18 100%) !important; }
[data-theme="electric"] #matrix-rain { opacity: 0.035; }

/* ====== THEME: WINE ====== */
[data-theme="wine"] {
    --bg: #140610;
    --bg-card: rgba(128,0,64,0.08);
    --bg-card-h: rgba(128,0,64,0.14);
    --border: rgba(128,0,64,0.2);
    --border-h: rgba(128,0,64,0.38);
    --green: #800040;
    --green-dim: #600030;
    --green-dark: #280015;
    --green-glow: rgba(128,0,64,0.2);
    --red: #FFD700;
    --glass: rgba(20,6,16,0.92);
    --glass-b: rgba(128,0,64,0.1);
    --mono: 'JetBrains Mono', monospace;
    --rain-color: #800040;
}
[data-theme="wine"] body { background: linear-gradient(180deg, #140610 0%, #1e0c18 50%, #140610 100%) !important; }
[data-theme="wine"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: SOLAR ====== */
[data-theme="solar"] {
    --bg: #181008;
    --bg-card: rgba(255,165,0,0.06);
    --bg-card-h: rgba(255,165,0,0.1);
    --border: rgba(255,165,0,0.16);
    --border-h: rgba(255,165,0,0.3);
    --green: #FFA500;
    --green-dim: #cc8400;
    --green-dark: #3d2800;
    --green-glow: rgba(255,165,0,0.2);
    --red: #FF4444;
    --glass: rgba(24,16,8,0.92);
    --glass-b: rgba(255,165,0,0.1);
    --mono: 'Inter', -apple-system, sans-serif;
    --rain-color: #FFA500;
}
[data-theme="solar"] body { background: linear-gradient(180deg, #181008 0%, #221810 50%, #181008 100%) !important; }
[data-theme="solar"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: NEBULA ====== */
[data-theme="nebula"] {
    --bg: #0a0515;
    --bg-card: rgba(138,43,226,0.07);
    --bg-card-h: rgba(138,43,226,0.12);
    --border: rgba(138,43,226,0.18);
    --border-h: rgba(138,43,226,0.35);
    --green: #8A2BE2;
    --green-dim: #6a20b0;
    --green-dark: #200a40;
    --green-glow: rgba(138,43,226,0.22);
    --red: #FF6EC7;
    --glass: rgba(10,5,21,0.92);
    --glass-b: rgba(138,43,226,0.1);
    --mono: 'Orbitron', 'Inter', sans-serif;
    --rain-color: #8A2BE2;
}
[data-theme="nebula"] body { background: linear-gradient(180deg, #0a0515 0%, #140a25 50%, #0a0515 100%) !important; }
[data-theme="nebula"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: TITANIUM ====== */
[data-theme="titanium"] {
    --bg: #0e0e12;
    --bg-card: rgba(150,160,180,0.06);
    --bg-card-h: rgba(150,160,180,0.1);
    --border: rgba(150,160,180,0.14);
    --border-h: rgba(150,160,180,0.28);
    --green: #96A0B4;
    --green-dim: #708090;
    --green-dark: #1e2028;
    --green-glow: rgba(150,160,180,0.16);
    --red: #FF6B6B;
    --glass: rgba(14,14,18,0.92);
    --glass-b: rgba(150,160,180,0.08);
    --mono: 'SF Mono', 'JetBrains Mono', monospace;
    --rain-color: #96A0B4;
}
[data-theme="titanium"] body { background: linear-gradient(180deg, #0e0e12 0%, #14141a 50%, #0e0e12 100%) !important; }
[data-theme="titanium"] #matrix-rain { opacity: 0.025; }

/* ====== THEME: AURORA ====== */
[data-theme="aurora"] {
    --bg: #040a10;
    --bg-card: rgba(0,255,180,0.06);
    --bg-card-h: rgba(0,255,180,0.1);
    --border: rgba(0,255,180,0.14);
    --border-h: rgba(0,255,180,0.28);
    --green: #00FFB4;
    --green-dim: #00cc90;
    --green-dark: #003828;
    --green-glow: rgba(0,255,180,0.18);
    --red: #FF6B9D;
    --glass: rgba(4,10,16,0.92);
    --glass-b: rgba(0,255,180,0.08);
    --mono: 'Space Grotesk', 'Inter', sans-serif;
    --rain-color: #00FFB4;
}
[data-theme="aurora"] body { background: linear-gradient(180deg, #040a10 0%, #081420 50%, #040a10 100%) !important; }
[data-theme="aurora"] #matrix-rain { opacity: 0.04; }

/* ====== THEME: OBSIDIAN ====== */
[data-theme="obsidian"] {
    --bg: #080808;
    --bg-card: rgba(100,100,110,0.06);
    --bg-card-h: rgba(100,100,110,0.1);
    --border: rgba(100,100,110,0.14);
    --border-h: rgba(100,100,110,0.28);
    --green: #646470;
    --green-dim: #4a4a55;
    --green-dark: #18181c;
    --green-glow: rgba(100,100,110,0.16);
    --red: #FF5555;
    --glass: rgba(8,8,8,0.95);
    --glass-b: rgba(100,100,110,0.06);
    --mono: 'JetBrains Mono', monospace;
    --rain-color: #646470;
}
[data-theme="obsidian"] body { background: #080808 !important; }
[data-theme="obsidian"] #matrix-rain { opacity: 0.02; }

/* ====== THEME: RUBY ====== */
[data-theme="ruby"] {
    --bg: #120006;
    --bg-card: rgba(224,17,95,0.07);
    --bg-card-h: rgba(224,17,95,0.12);
    --border: rgba(224,17,95,0.18);
    --border-h: rgba(224,17,95,0.35);
    --green: #E0115F;
    --green-dim: #b00e4c;
    --green-dark: #3a0518;
    --green-glow: rgba(224,17,95,0.2);
    --red: #FFD700;
    --glass: rgba(18,0,6,0.92);
    --glass-b: rgba(224,17,95,0.1);
    --mono: 'Inter', -apple-system, sans-serif;
    --rain-color: #E0115F;
}
[data-theme="ruby"] body { background: linear-gradient(180deg, #120006 0%, #1c000e 50%, #120006 100%) !important; }
[data-theme="ruby"] #matrix-rain { opacity: 0.03; }

/* ====== THEME: OPAL ====== */
[data-theme="opal"] {
    --bg: #0a0c14;
    --bg-card: rgba(168,198,224,0.06);
    --bg-card-h: rgba(168,198,224,0.1);
    --border: rgba(168,198,224,0.14);
    --border-h: rgba(168,198,224,0.28);
    --green: #A8C6E0;
    --green-dim: #80a0b8;
    --green-dark: #1a2a38;
    --green-glow: rgba(168,198,224,0.16);
    --red: #FF8888;
    --glass: rgba(10,12,20,0.92);
    --glass-b: rgba(168,198,224,0.08);
    --mono: 'Space Grotesk', 'Inter', sans-serif;
    --rain-color: #A8C6E0;
}
[data-theme="opal"] body { background: linear-gradient(180deg, #0a0c14 0%, #101420 50%, #0a0c14 100%) !important; }
[data-theme="opal"] #matrix-rain { opacity: 0.025; }

/* ====== THEME: INFERNO ====== */
[data-theme="inferno"] {
    --bg: #140400;
    --bg-card: rgba(255,50,0,0.07);
    --bg-card-h: rgba(255,50,0,0.12);
    --border: rgba(255,50,0,0.18);
    --border-h: rgba(255,50,0,0.35);
    --green: #FF3200;
    --green-dim: #cc2800;
    --green-dark: #3d0e00;
    --green-glow: rgba(255,50,0,0.2);
    --red: #FFD700;
    --glass: rgba(20,4,0,0.92);
    --glass-b: rgba(255,50,0,0.1);
    --mono: 'JetBrains Mono', monospace;
    --rain-color: #FF3200;
}
[data-theme="inferno"] body { background: linear-gradient(180deg, #140400 0%, #200800 50%, #140400 100%) !important; }
[data-theme="inferno"] #matrix-rain { opacity: 0.035; }

/* ====== THEME: CREAM (LIGHT) ====== */
[data-theme="cream"] {
    --bg: #fdf8f0;
    --bg-card: rgba(160,120,60,0.05);
    --bg-card-h: rgba(160,120,60,0.08);
    --border: rgba(160,120,60,0.14);
    --border-h: rgba(160,120,60,0.28);
    --green: #8B7355;
    --green-dim: #6a5840;
    --green-dark: #e8dcc8;
    --green-glow: rgba(160,120,60,0.1);
    --red: #c62828;
    --glass: rgba(253,248,240,0.95);
    --glass-b: rgba(160,120,60,0.06);
    --mono: 'Georgia', 'Times New Roman', serif;
    --rain-color: #d4c4a0;
}
[data-theme="cream"] body { background: #fdf8f0 !important; }
[data-theme="cream"] .scanline-overlay { display: none; }
[data-theme="cream"] #matrix-rain { opacity: 0.015; }
[data-theme="cream"] .cursor-dot { border-radius: 50%; }
[data-theme="cream"] .cursor-ring { border-radius: 50%; }

/* ====== THEME: PAPER (LIGHT) ====== */
[data-theme="paper"] {
    --bg: #f5f5f0;
    --bg-card: rgba(80,80,80,0.04);
    --bg-card-h: rgba(80,80,80,0.07);
    --border: rgba(80,80,80,0.12);
    --border-h: rgba(80,80,80,0.22);
    --green: #444444;
    --green-dim: #666;
    --green-dark: #ddd;
    --green-glow: rgba(80,80,80,0.08);
    --red: #c62828;
    --glass: rgba(245,245,240,0.95);
    --glass-b: rgba(80,80,80,0.04);
    --mono: 'Courier New', monospace;
    --rain-color: #bbb;
}
[data-theme="paper"] body { background: #f5f5f0 !important; }
[data-theme="paper"] .scanline-overlay { display: none; }
[data-theme="paper"] #matrix-rain { opacity: 0.015; }
[data-theme="paper"] .cursor-dot { border-radius: 50%; }
[data-theme="paper"] .cursor-ring { border-radius: 50%; }

/* ====== LIGHT THEME SHARED OVERRIDES ====== */
[data-theme="chrome"] ::selection,
[data-theme="silver"] ::selection,
[data-theme="noir"] ::selection,
[data-theme="cream"] ::selection,
[data-theme="paper"] ::selection {
    background: color-mix(in srgb, var(--green) 20%, transparent) !important;
    color: var(--green) !important;
}
[data-theme="chrome"] .navbar-glass,
[data-theme="silver"] .navbar-glass,
[data-theme="noir"] .navbar-glass,
[data-theme="cream"] .navbar-glass,
[data-theme="paper"] .navbar-glass {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    border-bottom-color: var(--border);
}
[data-theme="chrome"] .navbar-glass.scrolled,
[data-theme="silver"] .navbar-glass.scrolled,
[data-theme="noir"] .navbar-glass.scrolled,
[data-theme="cream"] .navbar-glass.scrolled,
[data-theme="paper"] .navbar-glass.scrolled {
    background: var(--glass);
}
[data-theme="chrome"] .theme-option,
[data-theme="silver"] .theme-option,
[data-theme="noir"] .theme-option,
[data-theme="cream"] .theme-option,
[data-theme="paper"] .theme-option {
    color: rgba(0,0,0,0.5);
}
[data-theme="chrome"] .theme-option:hover,
[data-theme="silver"] .theme-option:hover,
[data-theme="noir"] .theme-option:hover,
[data-theme="cream"] .theme-option:hover,
[data-theme="paper"] .theme-option:hover {
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.85);
}
[data-theme="chrome"] .theme-option.active,
[data-theme="silver"] .theme-option.active,
[data-theme="noir"] .theme-option.active,
[data-theme="cream"] .theme-option.active,
[data-theme="paper"] .theme-option.active {
    color: var(--green);
    background: rgba(0,0,0,0.08);
}
[data-theme="chrome"] .theme-option.active .theme-swatch,
[data-theme="silver"] .theme-option.active .theme-swatch,
[data-theme="noir"] .theme-option.active .theme-swatch,
[data-theme="cream"] .theme-option.active .theme-swatch,
[data-theme="paper"] .theme-option.active .theme-swatch {
    border-color: var(--green);
    box-shadow: 0 0 6px color-mix(in srgb, var(--green) 30%, transparent);
}
[data-theme="chrome"] .btn-primary,
[data-theme="silver"] .btn-primary,
[data-theme="noir"] .btn-primary,
[data-theme="cream"] .btn-primary,
[data-theme="paper"] .btn-primary {
    text-shadow: none;
}
[data-theme="chrome"] .btn-convert-main,
[data-theme="silver"] .btn-convert-main,
[data-theme="noir"] .btn-convert-main,
[data-theme="cream"] .btn-convert-main,
[data-theme="paper"] .btn-convert-main {
    color: #fff;
    text-shadow: none;
}
[data-theme="chrome"] footer,
[data-theme="silver"] footer,
[data-theme="noir"] footer,
[data-theme="cream"] footer,
[data-theme="paper"] footer {
    border-top-color: var(--border);
}
[data-theme="chrome"] .powered-by-link:hover,
[data-theme="silver"] .powered-by-link:hover,
[data-theme="noir"] .powered-by-link:hover,
[data-theme="cream"] .powered-by-link:hover,
[data-theme="paper"] .powered-by-link:hover {
    text-shadow: none;
}
[data-theme="chrome"] .mobile-menu-panel,
[data-theme="silver"] .mobile-menu-panel,
[data-theme="noir"] .mobile-menu-panel,
[data-theme="cream"] .mobile-menu-panel,
[data-theme="paper"] .mobile-menu-panel {
    background: var(--glass);
}
[data-theme="chrome"] .pipeline-overlay,
[data-theme="silver"] .pipeline-overlay,
[data-theme="noir"] .pipeline-overlay,
[data-theme="cream"] .pipeline-overlay,
[data-theme="paper"] .pipeline-overlay {
    background: var(--glass);
}
[data-theme="chrome"] kbd,
[data-theme="silver"] kbd,
[data-theme="noir"] kbd,
[data-theme="cream"] kbd,
[data-theme="paper"] kbd {
    background: var(--bg-card);
    border-color: var(--border);
    color: color-mix(in srgb, var(--green) 60%, transparent);
}

/* ====== THEME TOGGLER ====== */
.theme-toggler-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: color-mix(in srgb, var(--green) 40%, transparent);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.theme-toggler-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--bg-card-h), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.theme-toggler-btn:hover { color: var(--green); border-color: var(--border-h); }
.theme-toggler-btn:hover::before { opacity: 1; }

.theme-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    z-index: 200;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 6px;
    overflow-x: hidden;
}
@media (max-width: 640px) {
    .theme-dropdown {
        position: fixed;
        top: 58px; right: 8px; left: 8px;
        min-width: auto; width: auto;
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
    }
}
.theme-dropdown::-webkit-scrollbar { width: 4px; }
.theme-dropdown::-webkit-scrollbar-track { background: transparent; }
.theme-dropdown::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--green) 15%, transparent); border-radius: 2px; }
.theme-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Scroll fade hint at bottom of theme dropdown */
.theme-dropdown::after {
    content: '';
    position: sticky; bottom: 0; left: 0; right: 0;
    display: block; height: 24px;
    background: linear-gradient(transparent, var(--glass));
    pointer-events: none;
    border-radius: 0 0 6px 6px;
}

.theme-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    will-change: auto;
}
.theme-option:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
}
.theme-option.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.theme-swatch {
    width: 16px; height: 16px;
    border-radius: 3px;
    border: 1.5px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.theme-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
}
.theme-swatch.sw-matrix { background: #00FF41; }
.theme-swatch.sw-cyberpunk { background: linear-gradient(135deg, #FF00AA, #7B00FF); }
.theme-swatch.sw-amber { background: #FFB000; }
.theme-swatch.sw-vapor { background: linear-gradient(135deg, #FF6EC7, #00E5FF); }
.theme-swatch.sw-arctic { background: linear-gradient(135deg, #64C8FF, #E0F0FF); }
.theme-swatch.sw-dracula { background: linear-gradient(135deg, #BD93F9, #FF79C6); }
.theme-swatch.sw-sunset { background: linear-gradient(135deg, #FF6432, #FFD700); }
.theme-swatch.sw-ocean { background: linear-gradient(135deg, #00D2B4, #006B5A); }
.theme-swatch.sw-lime { background: #B4FF00; }
.theme-swatch.sw-rosegold { background: linear-gradient(135deg, #E8AAA0, #B88078); }
.theme-swatch.sw-synthwave { background: linear-gradient(135deg, #E040FB, #7B00FF); }
.theme-swatch.sw-emerald { background: linear-gradient(135deg, #2ECC71, #1a9c52); }
.theme-swatch.sw-bloodmoon { background: linear-gradient(135deg, #DC143C, #6a0020); }
.theme-swatch.sw-sakura { background: linear-gradient(135deg, #FFB7C5, #FF69B4); }
.theme-swatch.sw-terminal { background: #33FF33; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); }
.theme-swatch.sw-glacial { background: linear-gradient(135deg, #A8D8EA, #6ac0d8); }
.theme-swatch.sw-copper { background: linear-gradient(135deg, #D4885A, #a06840); }
.theme-swatch.sw-ultraviolet { background: linear-gradient(135deg, #7C4DFF, #4a00cc); }
.theme-swatch.sw-forest { background: linear-gradient(135deg, #8BC34A, #4CAF50); }
.theme-swatch.sw-hologram { background: linear-gradient(135deg, #00E5FF, #0080FF); }
.theme-swatch.sw-chrome { background: linear-gradient(135deg, #e8eaed, #a0a4ac); border-color: rgba(0,0,0,0.15); }
.theme-swatch.sw-silver { background: linear-gradient(135deg, #f0f0f2, #b0b2ba); border-color: rgba(0,0,0,0.12); }
.theme-swatch.sw-noir { background: linear-gradient(135deg, #fafafa, #1a1a1a); border-color: rgba(0,0,0,0.2); }
.theme-option.active .theme-swatch { border-color: rgba(255,255,255,0.5); box-shadow: 0 0 8px rgba(255,255,255,0.2); }

/* Theme lock/unlock indicators */
.theme-locked {
    opacity: 0.5;
    cursor: not-allowed !important;
    position: relative;
}
.theme-locked .theme-swatch {
    filter: grayscale(0.6) brightness(0.7);
}
.theme-locked:hover {
    opacity: 0.65;
    background: rgba(255,60,60,0.05);
}
.theme-lock-icon {
    color: var(--red);
    opacity: 0.7;
    margin-left: auto;
    flex-shrink: 0;
}
.theme-unlock-icon {
    color: var(--green);
    opacity: 0.4;
    margin-left: auto;
    flex-shrink: 0;
}
.theme-progress {
    font-size: 8px;
    font-family: var(--mono);
    color: color-mix(in srgb, var(--green) 40%, transparent);
    flex-shrink: 0;
    min-width: 26px;
    text-align: right;
}
.theme-section-label {
    padding: 6px 10px 4px;
    font-size: 8px;
    font-weight: 800;
    color: color-mix(in srgb, var(--green) 35%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--mono);
}
.theme-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Theme dropdown header & group labels */
.theme-dropdown-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px 6px;
    font-size: 9px; font-weight: 700;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    text-transform: uppercase; letter-spacing: 0.08em;
    font-family: var(--mono);
    border-bottom: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    margin-bottom: 4px;
}
.theme-dropdown-header i { width: 14px; height: 14px; opacity: 0.5; }
.theme-group-label {
    padding: 6px 10px 3px;
    font-size: 8px; font-weight: 800;
    color: color-mix(in srgb, var(--green) 30%, transparent);
    text-transform: uppercase; letter-spacing: 0.12em;
    font-family: var(--mono);
    margin-top: 4px;
}

/* Theme transition overlay */
.theme-transition-flash {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.theme-transition-flash.active {
    opacity: 1;
    animation: themeFlash 0.5s ease forwards;
}
@keyframes themeFlash {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* ====== PER-THEME UNIQUE ANIMATIONS & BACKGROUNDS ====== */

/* Matrix: scanline sweep + digital grid */
[data-theme="matrix"] body::after {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    opacity: 0.08; z-index: 0; pointer-events: none;
    animation: matrixScanline 4s linear infinite;
}
@keyframes matrixScanline { 0% { top: -2px; } 100% { top: 100vh; } }
[data-theme="matrix"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(rgba(0,255,65,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,65,0.012) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

/* Cyberpunk: glitch flicker on glass cards */
[data-theme="cyberpunk"] .glass-card {
    animation: cyberpunkPulse 6s ease-in-out infinite;
}
@keyframes cyberpunkPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(0,255,255,0.06), 0 0 8px rgba(255,0,170,0.15); }
    50% { box-shadow: inset 0 1px 0 rgba(0,255,255,0.12), 0 0 18px rgba(255,0,170,0.3), 0 0 4px rgba(0,255,255,0.1); }
}
[data-theme="cyberpunk"] .nav-container {
    animation: cyberpunkNavGlitch 8s step-end infinite;
}
@keyframes cyberpunkNavGlitch {
    0%, 97%, 100% { transform: translateX(0); }
    97.5% { transform: translateX(-2px); }
    98% { transform: translateX(2px); }
    98.5% { transform: translateX(0); }
}

/* Amber: CRT flicker + warm glow */
[data-theme="amber"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
    animation: amberFlicker 0.1s infinite;
}
@keyframes amberFlicker { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.5; } }
[data-theme="amber"] .glass-card {
    box-shadow: 0 0 20px color-mix(in srgb, var(--green) 8%, transparent);
}

/* Vaporwave: slow gradient shift */
[data-theme="vapor"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,113,206,0.03) 0%, rgba(1,205,254,0.03) 50%, rgba(185,103,255,0.03) 100%);
    animation: vaporShift 12s ease-in-out infinite alternate;
    background-size: 200% 200%;
}
@keyframes vaporShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* Arctic: subtle shimmer */
[data-theme="arctic"] .glass-card {
    animation: arcticShimmer 5s ease-in-out infinite;
}
@keyframes arcticShimmer {
    0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--green) 8%, transparent); }
    50% { box-shadow: 0 0 20px color-mix(in srgb, var(--green) 15%, transparent), inset 0 0 10px color-mix(in srgb, var(--green) 3%, transparent); }
}

/* Dracula: slow dark pulse */
[data-theme="dracula"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--green) 4%, transparent), transparent 70%);
    animation: draculaPulse 8s ease-in-out infinite;
}
@keyframes draculaPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } }

/* Sunset: warm glow aura */
[data-theme="sunset"] .glass-card {
    animation: sunsetGlow 7s ease-in-out infinite;
}
@keyframes sunsetGlow {
    0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--green) 10%, transparent); }
    50% { box-shadow: 0 0 22px color-mix(in srgb, var(--accent, var(--green)) 18%, transparent); }
}
[data-theme="sunset"] body::after {
    content: ''; position: fixed; bottom: -50%; left: -10%; width: 120%; height: 100%; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--green) 3%, transparent), transparent 60%);
    opacity: 0.5;
}

/* Ocean: wave motion */
[data-theme="ocean"] body::after {
    content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 3px; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
    opacity: 0.12;
    animation: oceanWave 3s ease-in-out infinite;
}
@keyframes oceanWave { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
[data-theme="ocean"] .glass-card {
    animation: oceanFloat 6s ease-in-out infinite;
}
@keyframes oceanFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* Lime: electric glow border pulse */
[data-theme="lime"] .glass-card {
    animation: limePulse 4s ease-in-out infinite;
}
@keyframes limePulse {
    0%, 100% { border-color: color-mix(in srgb, var(--border) 100%, transparent); }
    50% { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
}

/* Rose Gold: gentle sparkle on cards */
[data-theme="rosegold"] .glass-card {
    animation: rosegoldFade 6s ease-in-out infinite;
}
@keyframes rosegoldFade {
    0%, 100% { box-shadow: 0 0 8px rgba(232,170,160,0.1), inset 0 1px 0 rgba(255,255,255,0.02); }
    50% { box-shadow: 0 0 16px rgba(232,170,160,0.2), 0 0 4px rgba(200,162,200,0.08), inset 0 1px 0 rgba(255,255,255,0.04); }
}

/* Synthwave: neon pulse on cards */
[data-theme="synthwave"] .glass-card { animation: synthwaveCardPulse 5s ease-in-out infinite; }

/* Emerald: gentle glow pulse */
[data-theme="emerald"] .glass-card { animation: emeraldCardGlow 6s ease-in-out infinite; }
@keyframes emeraldCardGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(46,204,113,0.05); }
    50% { box-shadow: 0 0 18px rgba(46,204,113,0.1), inset 0 0 8px rgba(46,204,113,0.02); }
}

/* Blood Moon: dark pulse */
[data-theme="bloodmoon"] .glass-card { animation: bloodmoonCardPulse 8s ease-in-out infinite; }

/* Sakura: soft fade */
[data-theme="sakura"] .glass-card { animation: sakuraFade 7s ease-in-out infinite; }
@keyframes sakuraFade {
    0%, 100% { box-shadow: 0 0 8px rgba(255,183,197,0.06); }
    50% { box-shadow: 0 0 16px rgba(255,183,197,0.12), 0 0 4px rgba(255,105,180,0.06); }
}

/* Terminal: sharp border flash */
[data-theme="terminal"] .glass-card { animation: terminalCardFlash 3s step-end infinite; }
@keyframes terminalCardFlash {
    0%, 95%, 100% { border-color: rgba(51,255,51,0.12); }
    96% { border-color: rgba(51,255,51,0.35); }
}

/* Glacial: subtle shimmer */
[data-theme="glacial"] .glass-card { animation: glacialShimmer 6s ease-in-out infinite; }
@keyframes glacialShimmer {
    0%, 100% { box-shadow: 0 0 10px rgba(168,216,234,0.04); }
    50% { box-shadow: 0 0 20px rgba(168,216,234,0.1), inset 0 0 10px rgba(168,216,234,0.02); }
}

/* Copper: warm glow */
[data-theme="copper"] .glass-card { animation: copperWarmGlow 7s ease-in-out infinite; }
@keyframes copperWarmGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(212,136,90,0.05); }
    50% { box-shadow: 0 0 18px rgba(212,136,90,0.12); }
}

/* Ultraviolet: UV card glow */
[data-theme="ultraviolet"] .glass-card { animation: uvCardGlow 7s ease-in-out infinite; }

/* Forest: organic pulse */
[data-theme="forest"] .glass-card { animation: forestPulse 8s ease-in-out infinite; }
@keyframes forestPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(139,195,74,0.04); }
    50% { box-shadow: 0 0 16px rgba(139,195,74,0.08), 0 0 4px rgba(76,175,80,0.04); }
}

/* Hologram: scan line effect */
[data-theme="hologram"] .glass-card { animation: holoCardScan 4s linear infinite; }

/* ====== ENHANCED THEME READABILITY & SIGNATURES ====== */

/* ----- Readability overrides for dim-accent themes ----- */
[data-theme="rosegold"] body { color: color-mix(in srgb, var(--green) 90%, transparent) !important; }
[data-theme="arctic"] body { color: color-mix(in srgb, var(--green) 88%, transparent) !important; }
[data-theme="sunset"] body { color: color-mix(in srgb, var(--green) 84%, transparent) !important; }
[data-theme="ocean"] body { color: color-mix(in srgb, var(--green) 84%, transparent) !important; }
[data-theme="dracula"] body { color: color-mix(in srgb, var(--green) 84%, transparent) !important; }

/* Boost label & tool-card text readability across all themes */
[data-theme] .setting-label { color: color-mix(in srgb, var(--green) 72%, transparent) !important; }
[data-theme] .tool-mini span { color: color-mix(in srgb, var(--green) 82%, transparent) !important; }
[data-theme] .tool-cat-btn { color: color-mix(in srgb, var(--green) 72%, transparent) !important; }
[data-theme] .tool-cat-btn.active { color: var(--green) !important; }
.setting-label { color: color-mix(in srgb, var(--green) 72%, transparent); }

/* ----- Per-theme hero & section title effects ----- */
[data-theme="cyberpunk"] .hero-title,
[data-theme="cyberpunk"] .section-title {
    text-shadow: 0 0 20px rgba(255,0,170,0.5), 0 0 60px rgba(255,0,170,0.2), 0 2px 0 rgba(0,255,255,0.2);
}
[data-theme="amber"] .hero-title,
[data-theme="amber"] .section-title {
    text-shadow: 0 0 15px rgba(255,176,0,0.6), 0 0 40px rgba(255,176,0,0.2);
}
[data-theme="vapor"] .hero-title,
[data-theme="vapor"] .section-title {
    background: linear-gradient(90deg, #FF6EC7, #01CDFE, #B967FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,110,199,0.3));
}
[data-theme="arctic"] .hero-title,
[data-theme="arctic"] .section-title {
    text-shadow: 0 0 20px rgba(100,200,255,0.4), 0 1px 0 rgba(255,255,255,0.08);
    letter-spacing: 0.05em;
}
[data-theme="dracula"] .hero-title,
[data-theme="dracula"] .section-title {
    text-shadow: 0 0 20px rgba(189,147,249,0.5), 0 0 40px rgba(189,147,249,0.15);
}
[data-theme="sunset"] .hero-title,
[data-theme="sunset"] .section-title {
    background: linear-gradient(135deg, #FF6432, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,100,50,0.3));
}
[data-theme="ocean"] .hero-title,
[data-theme="ocean"] .section-title {
    text-shadow: 0 0 20px rgba(0,210,180,0.4), 0 0 50px rgba(0,100,200,0.15);
}
[data-theme="lime"] .hero-title,
[data-theme="lime"] .section-title {
    text-shadow: 0 0 10px rgba(180,255,0,0.8), 0 0 30px rgba(180,255,0,0.3), 0 0 60px rgba(180,255,0,0.1);
}
[data-theme="rosegold"] .hero-title,
[data-theme="rosegold"] .section-title {
    background: linear-gradient(135deg, #E8AAA0, #D4A0A0, #C89B9B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(232,170,160,0.25));
}

/* ----- New theme hero & section title effects ----- */
[data-theme="synthwave"] .hero-title,
[data-theme="synthwave"] .section-title {
    background: linear-gradient(90deg, #E040FB, #00E5FF, #E040FB);
    background-size: 200% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: synthwaveTextShift 4s linear infinite;
    filter: drop-shadow(0 0 18px rgba(224,64,251,0.4));
}
@keyframes synthwaveTextShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
[data-theme="emerald"] .hero-title,
[data-theme="emerald"] .section-title {
    text-shadow: 0 0 15px rgba(46,204,113,0.5), 0 0 40px rgba(46,204,113,0.15);
}
[data-theme="bloodmoon"] .hero-title,
[data-theme="bloodmoon"] .section-title {
    text-shadow: 0 0 20px rgba(220,20,60,0.6), 0 0 50px rgba(220,20,60,0.2), 0 2px 4px rgba(0,0,0,0.5);
}
[data-theme="sakura"] .hero-title,
[data-theme="sakura"] .section-title {
    background: linear-gradient(135deg, #FFB7C5, #FF69B4, #FFB7C5);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,183,197,0.3));
}
[data-theme="terminal"] .hero-title,
[data-theme="terminal"] .section-title {
    text-shadow: 0 0 10px rgba(51,255,51,0.8), 0 0 30px rgba(51,255,51,0.4), 0 0 60px rgba(51,255,51,0.15);
    font-family: 'JetBrains Mono', monospace !important;
}
[data-theme="glacial"] .hero-title,
[data-theme="glacial"] .section-title {
    text-shadow: 0 0 20px rgba(168,216,234,0.4), 0 1px 0 rgba(255,255,255,0.06);
    letter-spacing: 0.04em;
}
[data-theme="copper"] .hero-title,
[data-theme="copper"] .section-title {
    background: linear-gradient(135deg, #D4885A, #e8a06a, #D4885A);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(212,136,90,0.3));
}
[data-theme="ultraviolet"] .hero-title,
[data-theme="ultraviolet"] .section-title {
    text-shadow: 0 0 20px rgba(124,77,255,0.6), 0 0 50px rgba(124,77,255,0.2);
}
[data-theme="forest"] .hero-title,
[data-theme="forest"] .section-title {
    text-shadow: 0 0 12px rgba(139,195,74,0.5), 0 0 30px rgba(76,175,80,0.2);
}
[data-theme="hologram"] .hero-title,
[data-theme="hologram"] .section-title {
    background: linear-gradient(90deg, #00E5FF, #0080FF, #00E5FF);
    background-size: 200% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holoTextShift 3s linear infinite;
    filter: drop-shadow(0 0 16px rgba(0,229,255,0.4));
}
@keyframes holoTextShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ----- Per-theme glass card signatures ----- */
[data-theme="cyberpunk"] .glass-card {
    box-shadow: inset 0 1px 0 rgba(0,255,255,0.08), 0 0 15px rgba(255,0,170,0.06), 0 1px 0 rgba(255,0,170,0.12);
}
[data-theme="vapor"] .glass-card {
    box-shadow: 0 0 20px rgba(255,110,199,0.05), inset 0 1px 0 rgba(1,205,254,0.06);
}
[data-theme="arctic"] .glass-card {
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 4px 24px rgba(100,200,255,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dracula"] .glass-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(189,147,249,0.06);
}
[data-theme="sunset"] .glass-card {
    box-shadow: 0 4px 20px rgba(255,100,50,0.06), 0 0 0 1px rgba(255,215,0,0.04);
}
[data-theme="ocean"] .glass-card {
    box-shadow: 0 4px 20px rgba(0,210,180,0.05), inset 0 0 30px rgba(0,100,180,0.02);
}
[data-theme="lime"] .glass-card {
    box-shadow: 0 0 15px rgba(180,255,0,0.04), 0 0 0 1px rgba(180,255,0,0.08);
}
[data-theme="rosegold"] .glass-card {
    box-shadow: 0 4px 25px rgba(232,170,160,0.06), inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* ----- New theme glass card signatures ----- */
[data-theme="synthwave"] .glass-card {
    box-shadow: inset 0 1px 0 rgba(224,64,251,0.08), 0 0 18px rgba(224,64,251,0.06), 0 0 4px rgba(0,229,255,0.05);
    animation: synthwaveCardPulse 5s ease-in-out infinite;
}
@keyframes synthwaveCardPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(224,64,251,0.08), 0 0 12px rgba(224,64,251,0.04); }
    50% { box-shadow: inset 0 1px 0 rgba(224,64,251,0.12), 0 0 22px rgba(224,64,251,0.08), 0 0 6px rgba(0,229,255,0.06); }
}
[data-theme="emerald"] .glass-card {
    box-shadow: 0 4px 20px rgba(46,204,113,0.05), inset 0 1px 0 rgba(46,204,113,0.05);
}
[data-theme="bloodmoon"] .glass-card {
    box-shadow: 0 4px 20px rgba(220,20,60,0.06), inset 0 1px 0 rgba(220,20,60,0.05);
    animation: bloodmoonCardPulse 8s ease-in-out infinite;
}
@keyframes bloodmoonCardPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(220,20,60,0.04); }
    50% { box-shadow: 0 4px 25px rgba(220,20,60,0.1), 0 0 8px rgba(220,20,60,0.05); }
}
[data-theme="sakura"] .glass-card {
    box-shadow: 0 4px 20px rgba(255,183,197,0.05), inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(14px) saturate(1.1);
}
[data-theme="terminal"] .glass-card {
    box-shadow: 0 0 8px rgba(51,255,51,0.04), inset 0 1px 0 rgba(51,255,51,0.03);
    border-color: rgba(51,255,51,0.15) !important;
}
[data-theme="glacial"] .glass-card {
    box-shadow: 0 4px 20px rgba(168,216,234,0.04), inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(16px) saturate(1.15);
}
[data-theme="copper"] .glass-card {
    box-shadow: 0 4px 20px rgba(212,136,90,0.06), inset 0 1px 0 rgba(212,136,90,0.04);
}
[data-theme="ultraviolet"] .glass-card {
    box-shadow: 0 4px 20px rgba(124,77,255,0.06), inset 0 1px 0 rgba(124,77,255,0.05);
    animation: uvCardGlow 7s ease-in-out infinite;
}
@keyframes uvCardGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(124,77,255,0.04); }
    50% { box-shadow: 0 4px 25px rgba(124,77,255,0.1), 0 0 6px rgba(124,77,255,0.04); }
}
[data-theme="forest"] .glass-card {
    box-shadow: 0 4px 20px rgba(139,195,74,0.04), inset 0 1px 0 rgba(139,195,74,0.03);
}
[data-theme="hologram"] .glass-card {
    box-shadow: inset 0 1px 0 rgba(0,229,255,0.06), 0 0 15px rgba(0,229,255,0.04);
    animation: holoCardScan 4s linear infinite;
}
@keyframes holoCardScan {
    0% { box-shadow: inset 0 -1px 0 rgba(0,229,255,0.1), 0 0 12px rgba(0,229,255,0.03); }
    50% { box-shadow: inset 0 1px 0 rgba(0,229,255,0.1), 0 0 18px rgba(0,229,255,0.06); }
    100% { box-shadow: inset 0 -1px 0 rgba(0,229,255,0.1), 0 0 12px rgba(0,229,255,0.03); }
}

/* ----- Per-theme button glow effects ----- */
[data-theme="cyberpunk"] .btn-primary:hover,
[data-theme="cyberpunk"] .btn-convert-main:hover {
    box-shadow: 0 0 20px rgba(255,0,170,0.4), 0 0 40px rgba(0,255,255,0.1);
}
[data-theme="vapor"] .btn-primary,
[data-theme="vapor"] .btn-convert-main {
    box-shadow: 0 0 15px rgba(255,110,199,0.15), 0 0 30px rgba(1,205,254,0.06);
}
[data-theme="arctic"] .btn-primary,
[data-theme="arctic"] .btn-convert-main {
    box-shadow: 0 2px 12px rgba(100,200,255,0.15);
}
[data-theme="lime"] .btn-primary:hover,
[data-theme="lime"] .btn-convert-main:hover {
    box-shadow: 0 0 25px rgba(180,255,0,0.5), 0 0 50px rgba(180,255,0,0.15);
}
[data-theme="rosegold"] .btn-primary,
[data-theme="rosegold"] .btn-convert-main {
    box-shadow: 0 2px 15px rgba(232,170,160,0.15);
}

/* ----- New theme button glow ----- */
[data-theme="synthwave"] .btn-primary:hover,
[data-theme="synthwave"] .btn-convert-main:hover {
    box-shadow: 0 0 25px rgba(224,64,251,0.4), 0 0 50px rgba(0,229,255,0.1);
}
[data-theme="bloodmoon"] .btn-primary:hover,
[data-theme="bloodmoon"] .btn-convert-main:hover {
    box-shadow: 0 0 20px rgba(220,20,60,0.4), 0 0 40px rgba(220,20,60,0.1);
}
[data-theme="terminal"] .btn-primary:hover,
[data-theme="terminal"] .btn-convert-main:hover {
    box-shadow: 0 0 25px rgba(51,255,51,0.4), 0 0 50px rgba(51,255,51,0.15);
}
[data-theme="ultraviolet"] .btn-primary:hover,
[data-theme="ultraviolet"] .btn-convert-main:hover {
    box-shadow: 0 0 25px rgba(124,77,255,0.4), 0 0 50px rgba(124,77,255,0.12);
}
[data-theme="hologram"] .btn-primary:hover,
[data-theme="hologram"] .btn-convert-main:hover {
    box-shadow: 0 0 22px rgba(0,229,255,0.35), 0 0 45px rgba(0,229,255,0.1);
}

/* ----- Cyberpunk diagonal stripe accent ----- */
[data-theme="cyberpunk"] body::before {
    content: ''; position: fixed; top: 0; right: 0; width: 200px; height: 100vh;
    z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,255,255,0.015) 10px, rgba(0,255,255,0.015) 20px);
    opacity: 0.5;
}

/* ----- Vaporwave retro horizon glow ----- */
[data-theme="vapor"] body::after {
    content: ''; position: fixed; bottom: -40%; left: 50%; transform: translateX(-50%);
    width: 120vw; height: 80vh; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,110,199,0.04) 0%, rgba(1,205,254,0.02) 30%, transparent 60%);
}

/* ----- Ocean bioluminescent particles ----- */
[data-theme="ocean"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1px 1px at 20% 30%, rgba(0,210,180,0.15) 50%, transparent 50%),
        radial-gradient(1px 1px at 50% 60%, rgba(0,210,180,0.12) 50%, transparent 50%),
        radial-gradient(1px 1px at 80% 40%, rgba(0,210,180,0.08) 50%, transparent 50%),
        radial-gradient(1px 1px at 30% 80%, rgba(0,210,180,0.1) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 20%, rgba(0,210,180,0.06) 50%, transparent 50%);
    animation: oceanFloat 8s ease-in-out infinite;
}

/* ----- Sunset warm horizon gradient ----- */
[data-theme="sunset"] body::before {
    content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 40vh;
    z-index: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(255,215,0,0.03) 0%, rgba(255,100,50,0.02) 40%, transparent 100%);
}

/* ----- Lime cyber grid ----- */
[data-theme="lime"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(rgba(180,255,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,255,0,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ----- Rose Gold shimmer particles ----- */
[data-theme="rosegold"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1.5px 1.5px at 10% 20%, rgba(232,170,160,0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 40% 50%, rgba(232,170,160,0.15) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 70% 30%, rgba(232,170,160,0.12) 50%, transparent 50%),
        radial-gradient(1px 1px at 25% 70%, rgba(232,170,160,0.1) 50%, transparent 50%),
        radial-gradient(1px 1px at 85% 65%, rgba(232,170,160,0.08) 50%, transparent 50%);
    animation: rosegoldShimmer 8s ease-in-out infinite alternate;
}
@keyframes rosegoldShimmer { 0% { opacity: 0.3; } 100% { opacity: 0.6; } }

/* ====== SYNTHWAVE: retro grid perspective ====== */
[data-theme="synthwave"] body::before {
    content: ''; position: fixed; bottom: 0; left: -10%; width: 120%; height: 60vh;
    z-index: 0; pointer-events: none;
    background:
        linear-gradient(rgba(224,64,251,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224,64,251,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(400px) rotateX(55deg);
    transform-origin: bottom center;
    animation: synthwaveGrid 4s linear infinite;
}
@keyframes synthwaveGrid { 0% { background-position: 0 0; } 100% { background-position: 0 60px; } }
[data-theme="synthwave"] body::after {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 45vh;
    z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(224,64,251,0.04) 0%, rgba(0,229,255,0.02) 40%, transparent 100%);
    animation: synthwaveSkyPulse 6s ease-in-out infinite alternate;
}
@keyframes synthwaveSkyPulse { 0% { opacity: 0.4; } 100% { opacity: 0.8; } }

/* ====== EMERALD: pulsing gem facets ====== */
[data-theme="emerald"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(46,204,113,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(46,204,113,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(46,204,113,0.025) 0%, transparent 50%);
    animation: emeraldPulse 10s ease-in-out infinite alternate;
}
@keyframes emeraldPulse { 0% { opacity: 0.4; transform: scale(1); } 100% { opacity: 0.8; transform: scale(1.05); } }
[data-theme="emerald"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(60deg, transparent 40%, rgba(46,204,113,0.015) 50%, transparent 60%),
        linear-gradient(120deg, transparent 40%, rgba(46,204,113,0.012) 50%, transparent 60%);
    animation: emeraldShine 8s linear infinite;
    background-size: 200% 100%;
}
@keyframes emeraldShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ====== BLOOD MOON: dark crimson fog ====== */
[data-theme="bloodmoon"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(220,20,60,0.06) 0%, transparent 60%);
    animation: bloodmoonFog 12s ease-in-out infinite alternate;
}
@keyframes bloodmoonFog { 0% { opacity: 0.3; transform: translateY(-5%); } 100% { opacity: 0.7; transform: translateY(5%); } }
[data-theme="bloodmoon"] body::after {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px;
    z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, #DC143C, transparent);
    opacity: 0.15;
    animation: bloodmoonScan 6s linear infinite;
}
@keyframes bloodmoonScan { 0% { top: -2px; } 100% { top: 100vh; } }

/* ====== SAKURA: floating petals ====== */
[data-theme="sakura"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(3px 3px at 15% 25%, rgba(255,183,197,0.18) 50%, transparent 50%),
        radial-gradient(2px 2px at 35% 55%, rgba(255,183,197,0.14) 50%, transparent 50%),
        radial-gradient(2.5px 2.5px at 55% 15%, rgba(255,105,180,0.12) 50%, transparent 50%),
        radial-gradient(2px 2px at 75% 65%, rgba(255,183,197,0.1) 50%, transparent 50%),
        radial-gradient(3px 3px at 90% 35%, rgba(255,105,180,0.08) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 45% 85%, rgba(255,183,197,0.16) 50%, transparent 50%);
    animation: sakuraDrift 20s linear infinite;
}
@keyframes sakuraDrift {
    0% { transform: translateY(0) translateX(0); opacity: 0.5; }
    50% { opacity: 0.7; }
    100% { transform: translateY(100vh) translateX(30px); opacity: 0.3; }
}
[data-theme="sakura"] body::after {
    content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 35vh;
    z-index: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(255,183,197,0.03), transparent);
}

/* ====== TERMINAL: hardcore CRT ====== */
[data-theme="terminal"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg,
        transparent, transparent 1px,
        rgba(51,255,51,0.015) 1px, rgba(51,255,51,0.015) 2px
    );
    animation: terminalFlicker 0.08s infinite;
}
@keyframes terminalFlicker { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.7; } }
[data-theme="terminal"] body::after {
    content: '> _'; position: fixed; bottom: 12px; right: 16px;
    z-index: 0; pointer-events: none;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: rgba(51,255,51,0.15);
    animation: terminalBlink 1s step-end infinite;
}
@keyframes terminalBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ====== GLACIAL: slow ice crystals ====== */
[data-theme="glacial"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(2px 2px at 10% 15%, rgba(168,216,234,0.2) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 30% 45%, rgba(168,216,234,0.15) 50%, transparent 50%),
        radial-gradient(2px 2px at 60% 25%, rgba(168,216,234,0.12) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 80% 60%, rgba(168,216,234,0.1) 50%, transparent 50%),
        radial-gradient(2px 2px at 45% 80%, rgba(168,216,234,0.08) 50%, transparent 50%);
    animation: glacialFloat 15s ease-in-out infinite alternate;
}
@keyframes glacialFloat { 0% { opacity: 0.3; transform: translateY(0); } 100% { opacity: 0.6; transform: translateY(-10px); } }
[data-theme="glacial"] body::after {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 50vh;
    z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(168,216,234,0.025) 0%, transparent 100%);
}

/* ====== COPPER: molten ember glow ====== */
[data-theme="copper"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(212,136,90,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(212,136,90,0.03) 0%, transparent 50%);
    animation: copperEmber 8s ease-in-out infinite alternate;
}
@keyframes copperEmber { 0% { opacity: 0.3; } 100% { opacity: 0.7; } }
[data-theme="copper"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(212,136,90,0.008) 3px, rgba(212,136,90,0.008) 6px);
    animation: copperHeatWave 3s ease-in-out infinite;
}
@keyframes copperHeatWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }

/* ====== ULTRAVIOLET: UV pulse waves ====== */
[data-theme="ultraviolet"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(124,77,255,0.05) 0%, transparent 50%);
    animation: uvPulse 6s ease-in-out infinite;
}
@keyframes uvPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.15); } }
[data-theme="ultraviolet"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(rgba(124,77,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,77,255,0.015) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: uvGridShift 10s linear infinite;
}
@keyframes uvGridShift { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }

/* ====== FOREST: organic growth ====== */
[data-theme="forest"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(139,195,74,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 60%, rgba(76,175,80,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(139,195,74,0.025) 0%, transparent 50%);
    animation: forestGrow 14s ease-in-out infinite alternate;
}
@keyframes forestGrow { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.6; transform: scale(1.03); } }
[data-theme="forest"] body::after {
    content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 30vh;
    z-index: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(139,195,74,0.025), transparent);
}

/* ====== HOLOGRAM: holographic interference ====== */
[data-theme="hologram"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,229,255,0.008) 2px, rgba(0,229,255,0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,229,255,0.005) 2px, rgba(0,229,255,0.005) 4px);
    animation: holoScan 0.12s infinite;
}
@keyframes holoScan { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.6; } }
[data-theme="hologram"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(135deg, rgba(0,229,255,0.02) 25%, transparent 25%, transparent 50%, rgba(0,229,255,0.02) 50%, rgba(0,229,255,0.02) 75%, transparent 75%);
    background-size: 40px 40px;
    animation: holoShift 3s linear infinite;
}
@keyframes holoShift { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }

/* ----- Dracula multi-accent section badges ----- */
[data-theme="dracula"] .section-badge {
    border-color: rgba(80,250,123,0.3) !important;
    color: #50FA7B !important;
}
[data-theme="dracula"] .section-badge .live-dot {
    background: #50FA7B !important;
    box-shadow: 0 0 8px rgba(80,250,123,0.6) !important;
}

/* ----- Per-theme section badge & live-dot accents ----- */
[data-theme="cyberpunk"] .section-badge { border-color: rgba(0,255,255,0.3) !important; }
[data-theme="cyberpunk"] .section-badge .live-dot { background: #00FFFF !important; box-shadow: 0 0 8px rgba(0,255,255,0.6) !important; }
[data-theme="vapor"] .section-badge { border-color: rgba(1,205,254,0.3) !important; }
[data-theme="vapor"] .section-badge .live-dot { background: #01CDFE !important; box-shadow: 0 0 8px rgba(1,205,254,0.6) !important; }
[data-theme="sunset"] .section-badge { border-color: rgba(255,215,0,0.35) !important; }
[data-theme="sunset"] .section-badge .live-dot { background: #FFD700 !important; box-shadow: 0 0 8px rgba(255,215,0,0.6) !important; }
[data-theme="ocean"] .section-badge { border-color: rgba(255,107,157,0.3) !important; }
[data-theme="ocean"] .section-badge .live-dot { background: #FF6B9D !important; box-shadow: 0 0 8px rgba(255,107,157,0.6) !important; }

/* ----- Per-theme nav pill active glow ----- */
[data-theme="cyberpunk"] .nav-pill.active { text-shadow: 0 0 6px rgba(255,0,170,0.5); }
[data-theme="amber"] .nav-pill.active { text-shadow: 0 0 6px rgba(255,176,0,0.5); }
[data-theme="lime"] .nav-pill.active { text-shadow: 0 0 8px rgba(180,255,0,0.5); }

/* ----- Per-theme scrollbar tint ----- */
[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb { background: rgba(255,0,170,0.25) !important; }
[data-theme="amber"] ::-webkit-scrollbar-thumb { background: rgba(255,176,0,0.25) !important; }
[data-theme="vapor"] ::-webkit-scrollbar-thumb { background: rgba(255,110,199,0.2) !important; }
[data-theme="arctic"] ::-webkit-scrollbar-thumb { background: rgba(100,200,255,0.2) !important; }
[data-theme="dracula"] ::-webkit-scrollbar-thumb { background: rgba(189,147,249,0.2) !important; }
[data-theme="sunset"] ::-webkit-scrollbar-thumb { background: rgba(255,100,50,0.25) !important; }
[data-theme="ocean"] ::-webkit-scrollbar-thumb { background: rgba(0,210,180,0.2) !important; }
[data-theme="lime"] ::-webkit-scrollbar-thumb { background: rgba(180,255,0,0.2) !important; }
[data-theme="rosegold"] ::-webkit-scrollbar-thumb { background: rgba(232,170,160,0.2) !important; }

/* ----- Per-theme tool card hover glow ----- */
[data-theme="cyberpunk"] .tool-mini:hover { box-shadow: 0 0 12px rgba(255,0,170,0.15), inset 0 0 0 1px rgba(0,255,255,0.1); }
[data-theme="lime"] .tool-mini:hover { box-shadow: 0 0 15px rgba(180,255,0,0.15); }
[data-theme="rosegold"] .tool-mini:hover { box-shadow: 0 0 12px rgba(232,170,160,0.12); }
[data-theme="ocean"] .tool-mini:hover { box-shadow: 0 0 12px rgba(0,210,180,0.1); }
[data-theme="sunset"] .tool-mini:hover { box-shadow: 0 0 12px rgba(255,100,50,0.12); }
[data-theme="dracula"] .tool-mini:hover { box-shadow: 0 0 12px rgba(189,147,249,0.1); }

/* ----- Per-theme drop zone accent borders ----- */
[data-theme="cyberpunk"] .drop-zone:hover { border-color: rgba(0,255,255,0.2) !important; }
[data-theme="vapor"] .drop-zone { border-style: solid !important; }
[data-theme="sunset"] .drop-zone:hover { border-color: rgba(255,215,0,0.2) !important; }

/* ----- New theme scrollbar tints ----- */
[data-theme="synthwave"] ::-webkit-scrollbar-thumb { background: rgba(224,64,251,0.25) !important; }
[data-theme="emerald"] ::-webkit-scrollbar-thumb { background: rgba(46,204,113,0.2) !important; }
[data-theme="bloodmoon"] ::-webkit-scrollbar-thumb { background: rgba(220,20,60,0.25) !important; }
[data-theme="sakura"] ::-webkit-scrollbar-thumb { background: rgba(255,183,197,0.2) !important; }
[data-theme="terminal"] ::-webkit-scrollbar-thumb { background: rgba(51,255,51,0.2) !important; }
[data-theme="glacial"] ::-webkit-scrollbar-thumb { background: rgba(168,216,234,0.2) !important; }
[data-theme="copper"] ::-webkit-scrollbar-thumb { background: rgba(212,136,90,0.25) !important; }
[data-theme="ultraviolet"] ::-webkit-scrollbar-thumb { background: rgba(124,77,255,0.25) !important; }
[data-theme="forest"] ::-webkit-scrollbar-thumb { background: rgba(139,195,74,0.2) !important; }
[data-theme="hologram"] ::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2) !important; }

/* ----- New theme tool card hover glows ----- */
[data-theme="synthwave"] .tool-mini:hover { box-shadow: 0 0 14px rgba(224,64,251,0.15), inset 0 0 0 1px rgba(0,229,255,0.05); }
[data-theme="emerald"] .tool-mini:hover { box-shadow: 0 0 12px rgba(46,204,113,0.12); }
[data-theme="bloodmoon"] .tool-mini:hover { box-shadow: 0 0 14px rgba(220,20,60,0.15); }
[data-theme="sakura"] .tool-mini:hover { box-shadow: 0 0 12px rgba(255,183,197,0.12); }
[data-theme="terminal"] .tool-mini:hover { box-shadow: 0 0 15px rgba(51,255,51,0.15); }
[data-theme="glacial"] .tool-mini:hover { box-shadow: 0 0 12px rgba(168,216,234,0.1); }
[data-theme="copper"] .tool-mini:hover { box-shadow: 0 0 12px rgba(212,136,90,0.12); }
[data-theme="ultraviolet"] .tool-mini:hover { box-shadow: 0 0 14px rgba(124,77,255,0.15); }
[data-theme="forest"] .tool-mini:hover { box-shadow: 0 0 12px rgba(139,195,74,0.12); }
[data-theme="hologram"] .tool-mini:hover { box-shadow: 0 0 14px rgba(0,229,255,0.15), inset 0 0 0 1px rgba(0,229,255,0.05); }

/* ----- New theme nav pill glows ----- */
[data-theme="synthwave"] .nav-pill.active { text-shadow: 0 0 8px rgba(224,64,251,0.5); }
[data-theme="bloodmoon"] .nav-pill.active { text-shadow: 0 0 6px rgba(220,20,60,0.5); }
[data-theme="terminal"] .nav-pill.active { text-shadow: 0 0 8px rgba(51,255,51,0.5); }
[data-theme="ultraviolet"] .nav-pill.active { text-shadow: 0 0 6px rgba(124,77,255,0.5); }
[data-theme="hologram"] .nav-pill.active { text-shadow: 0 0 8px rgba(0,229,255,0.5); }

/* ----- Per-theme UNIQUE CURSOR shapes ----- */
/* Matrix: square dot, square ring */
[data-theme="matrix"] .cursor-dot { border-radius: 0; }
[data-theme="matrix"] .cursor-ring { border-radius: 0; }
/* Cyberpunk: diamond cursor */
[data-theme="cyberpunk"] .cursor-dot { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
[data-theme="cyberpunk"] .cursor-ring { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
/* Amber: small square */
[data-theme="amber"] .cursor-dot { border-radius: 1px; }
[data-theme="amber"] .cursor-ring { border-radius: 2px; }
/* Vapor: round + large glow */
[data-theme="vapor"] .cursor-dot { border-radius: 50%; box-shadow: 0 0 12px var(--green-glow); }
[data-theme="vapor"] .cursor-ring { border-radius: 50%; border-width: 1px; }
/* Arctic: round frosted */
[data-theme="arctic"] .cursor-dot { border-radius: 50%; }
[data-theme="arctic"] .cursor-ring { border-radius: 50%; backdrop-filter: blur(2px); }
/* Dracula: round with bat-like ring */
[data-theme="dracula"] .cursor-dot { border-radius: 50%; }
[data-theme="dracula"] .cursor-ring { border-radius: 50%; border-style: dashed; }
/* Sunset: warm round */
[data-theme="sunset"] .cursor-dot { border-radius: 50%; box-shadow: 0 0 8px rgba(255,100,50,0.3); }
[data-theme="sunset"] .cursor-ring { border-radius: 50%; }
/* Ocean: bubbly round */
[data-theme="ocean"] .cursor-dot { border-radius: 50%; }
[data-theme="ocean"] .cursor-ring { border-radius: 50%; border-style: dotted; }
/* Lime: sharp square */
[data-theme="lime"] .cursor-dot { border-radius: 0; }
[data-theme="lime"] .cursor-ring { border-radius: 0; }
/* Rose Gold: soft round */
[data-theme="rosegold"] .cursor-dot { border-radius: 50%; }
[data-theme="rosegold"] .cursor-ring { border-radius: 50%; }
/* Synthwave: diamond with neon glow */
[data-theme="synthwave"] .cursor-dot { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 10px rgba(224,64,251,0.4); }
[data-theme="synthwave"] .cursor-ring { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); border-width: 1px; }
/* Emerald: round gem */
[data-theme="emerald"] .cursor-dot { border-radius: 50%; }
[data-theme="emerald"] .cursor-ring { border-radius: 50%; }
/* Blood Moon: cross-hair (tiny square) */
[data-theme="bloodmoon"] .cursor-dot { border-radius: 0; width: 3px !important; height: 3px !important; }
[data-theme="bloodmoon"] .cursor-ring { border-radius: 0; border-style: solid; }
/* Sakura: round soft */
[data-theme="sakura"] .cursor-dot { border-radius: 50%; box-shadow: 0 0 8px rgba(255,183,197,0.4); }
[data-theme="sakura"] .cursor-ring { border-radius: 50%; border-width: 1px; }
/* Terminal: block cursor */
[data-theme="terminal"] .cursor-dot { border-radius: 0; width: 8px !important; height: 14px !important; background: rgba(51,255,51,0.7) !important; }
[data-theme="terminal"] .cursor-ring { display: none; }
/* Glacial: round frosted ice */
[data-theme="glacial"] .cursor-dot { border-radius: 50%; }
[data-theme="glacial"] .cursor-ring { border-radius: 50%; backdrop-filter: blur(3px); border-width: 1px; }
/* Copper: rounded square */
[data-theme="copper"] .cursor-dot { border-radius: 2px; }
[data-theme="copper"] .cursor-ring { border-radius: 4px; }
/* Ultraviolet: diamond glow */
[data-theme="ultraviolet"] .cursor-dot { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 8px rgba(124,77,255,0.4); }
[data-theme="ultraviolet"] .cursor-ring { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
/* Forest: organic round */
[data-theme="forest"] .cursor-dot { border-radius: 50%; }
[data-theme="forest"] .cursor-ring { border-radius: 50%; border-style: dotted; }
/* Hologram: thin round + scan glow */
[data-theme="hologram"] .cursor-dot { border-radius: 50%; box-shadow: 0 0 12px rgba(0,229,255,0.5); }
[data-theme="hologram"] .cursor-ring { border-radius: 50%; border-width: 1px; animation: holoRingPulse 2s ease-in-out infinite; }
@keyframes holoRingPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* ----- Light theme cursors ----- */
[data-theme="chrome"] .cursor-dot { border-radius: 50%; background: rgba(60,64,72,0.6) !important; box-shadow: none; }
[data-theme="chrome"] .cursor-ring { border-radius: 50%; border-color: rgba(60,64,72,0.2) !important; }
[data-theme="silver"] .cursor-dot { border-radius: 50%; background: rgba(120,120,135,0.5) !important; box-shadow: none; }
[data-theme="silver"] .cursor-ring { border-radius: 50%; border-color: rgba(120,120,135,0.2) !important; }
[data-theme="noir"] .cursor-dot { border-radius: 50%; background: rgba(0,0,0,0.6) !important; box-shadow: none; }
[data-theme="noir"] .cursor-ring { border-radius: 50%; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="cream"] .cursor-dot { border-radius: 50%; background: rgba(139,115,85,0.5) !important; box-shadow: none; }
[data-theme="cream"] .cursor-ring { border-radius: 50%; border-color: rgba(139,115,85,0.2) !important; }
[data-theme="paper"] .cursor-dot { border-radius: 50%; background: rgba(74,103,65,0.5) !important; box-shadow: none; }
[data-theme="paper"] .cursor-ring { border-radius: 50%; border-color: rgba(74,103,65,0.2) !important; }

/* ----- Light theme backgrounds & subtle animations ----- */
[data-theme="chrome"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(60,64,72,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(60,64,72,0.015) 0%, transparent 50%);
    animation: chromeSubtle 12s ease-in-out infinite alternate;
}
@keyframes chromeSubtle { 0% { opacity: 0.4; } 100% { opacity: 0.8; } }
[data-theme="chrome"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 40%, rgba(200,205,215,0.15) 100%);
}

[data-theme="silver"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(120,120,135,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(120,120,135,0.02) 0%, transparent 50%);
    animation: silverBreath 10s ease-in-out infinite alternate;
}
@keyframes silverBreath { 0% { opacity: 0.3; } 100% { opacity: 0.7; } }
[data-theme="silver"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 30%, rgba(180,180,195,0.1) 100%);
}

[data-theme="noir"] body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.005) 1px, rgba(0,0,0,0.005) 2px);
}
[data-theme="noir"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.03) 100%);
}

/* ----- Light theme scrollbar ----- */
[data-theme="chrome"] ::-webkit-scrollbar-thumb { background: rgba(60,64,72,0.2) !important; }
[data-theme="silver"] ::-webkit-scrollbar-thumb { background: rgba(120,120,135,0.18) !important; }
[data-theme="noir"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) !important; }
[data-theme="cream"] ::-webkit-scrollbar-thumb { background: rgba(139,115,85,0.2) !important; }
[data-theme="paper"] ::-webkit-scrollbar-thumb { background: rgba(74,103,65,0.18) !important; }

/* ----- Light theme tool card hover ----- */
[data-theme="chrome"] .tool-mini:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
[data-theme="silver"] .tool-mini:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.07); transform: translateY(-1px); }
[data-theme="noir"] .tool-mini:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
[data-theme="cream"] .tool-mini:hover { box-shadow: 0 4px 16px rgba(139,115,85,0.08); transform: translateY(-1px); }
[data-theme="paper"] .tool-mini:hover { box-shadow: 0 4px 16px rgba(74,103,65,0.08); transform: translateY(-1px); }

/* ----- Light theme section titles ----- */
[data-theme="chrome"] .hero-title,
[data-theme="chrome"] .section-title { color: #2c2e33; text-shadow: none; }
[data-theme="silver"] .hero-title,
[data-theme="silver"] .section-title { color: #4a4c55; text-shadow: none; }
[data-theme="noir"] .hero-title,
[data-theme="noir"] .section-title { color: #0a0a0a; text-shadow: none; }
[data-theme="cream"] .hero-title,
[data-theme="cream"] .section-title { color: #5c4a35; text-shadow: none; }
[data-theme="paper"] .hero-title,
[data-theme="paper"] .section-title { color: #3a5231; text-shadow: none; }

/* ----- Light theme nav ----- */
[data-theme="chrome"] .nav-pill.active,
[data-theme="silver"] .nav-pill.active,
[data-theme="noir"] .nav-pill.active,
[data-theme="cream"] .nav-pill.active,
[data-theme="paper"] .nav-pill.active { text-shadow: none; }

/* ----- Light theme section badges ----- */
[data-theme="chrome"] .section-badge,
[data-theme="silver"] .section-badge,
[data-theme="noir"] .section-badge,
[data-theme="cream"] .section-badge,
[data-theme="paper"] .section-badge {
    border-color: var(--border) !important;
    color: var(--green) !important;
}
[data-theme="chrome"] .section-badge .live-dot,
[data-theme="silver"] .section-badge .live-dot,
[data-theme="noir"] .section-badge .live-dot,
[data-theme="cream"] .section-badge .live-dot,
[data-theme="paper"] .section-badge .live-dot {
    background: var(--green) !important;
    box-shadow: none !important;
}

/* ----- New body text readability ----- */
[data-theme="sakura"] body { color: color-mix(in srgb, var(--green) 90%, transparent) !important; }
[data-theme="glacial"] body { color: color-mix(in srgb, var(--green) 88%, transparent) !important; }
[data-theme="copper"] body { color: color-mix(in srgb, var(--green) 86%, transparent) !important; }
[data-theme="emerald"] body { color: color-mix(in srgb, var(--green) 86%, transparent) !important; }

/* Global theme transition smoothing */
[data-theme] .glass-card,
[data-theme] .tool-mini,
[data-theme] .nav-container {
    transition: box-shadow 0.5s ease, border-color 0.5s ease, background 0.5s ease;
}

/* EQ slider vertical orientation */
.eq-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 80px;
    width: 20px;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    accent-color: var(--green);
}

/* ====== THEME TAILWIND OVERRIDES ====== */
/* Override ALL hardcoded Tailwind green classes for themed modes */
/* Text colors — primary (green-400) */
[data-theme] .text-green-400,
[data-theme] .text-green-400\/70,
[data-theme] .text-green-400\/80,
[data-theme] .text-green-400\/90 { color: var(--green) !important; opacity: 1 !important; }

/* Text colors — secondary/muted (green-500 with various opacities) */
[data-theme] .text-green-500\/20 { color: color-mix(in srgb, var(--green) 20%, transparent) !important; }
[data-theme] .text-green-500\/30 { color: color-mix(in srgb, var(--green) 30%, transparent) !important; }
[data-theme] .text-green-500\/35 { color: color-mix(in srgb, var(--green) 35%, transparent) !important; }
[data-theme] .text-green-500\/40 { color: color-mix(in srgb, var(--green) 40%, transparent) !important; }
[data-theme] .text-green-500\/45 { color: color-mix(in srgb, var(--green) 45%, transparent) !important; }
[data-theme] .text-green-500\/50 { color: color-mix(in srgb, var(--green) 50%, transparent) !important; }
[data-theme] .text-green-500\/55 { color: color-mix(in srgb, var(--green) 55%, transparent) !important; }
[data-theme] .text-green-500\/60 { color: color-mix(in srgb, var(--green) 60%, transparent) !important; }
[data-theme] .text-green-500\/70 { color: color-mix(in srgb, var(--green) 70%, transparent) !important; }

/* Background colors */
[data-theme] .bg-green-500\/\[0\.03\] { background-color: color-mix(in srgb, var(--green) 3%, transparent) !important; }
[data-theme] .bg-green-500\/\[0\.04\] { background-color: color-mix(in srgb, var(--green) 4%, transparent) !important; }
[data-theme] .bg-green-500\/\[0\.05\] { background-color: color-mix(in srgb, var(--green) 5%, transparent) !important; }
[data-theme] .bg-green-500\/\[0\.06\] { background-color: color-mix(in srgb, var(--green) 6%, transparent) !important; }
[data-theme] .bg-green-500\/\[0\.07\] { background-color: color-mix(in srgb, var(--green) 7%, transparent) !important; }
[data-theme] .bg-green-500\/\[0\.08\] { background-color: color-mix(in srgb, var(--green) 8%, transparent) !important; }
[data-theme] .bg-green-500\/20 { background-color: color-mix(in srgb, var(--green) 20%, transparent) !important; }

/* Border colors */
[data-theme] .border-green-500\/10 { border-color: color-mix(in srgb, var(--green) 10%, transparent) !important; }
[data-theme] .border-green-500\/15 { border-color: color-mix(in srgb, var(--green) 15%, transparent) !important; }
[data-theme] .border-green-500\/20 { border-color: color-mix(in srgb, var(--green) 20%, transparent) !important; }
[data-theme] .border-green-500\/\[0\.1\] { border-color: color-mix(in srgb, var(--green) 10%, transparent) !important; }
[data-theme] .border-green-500\/\[0\.06\] { border-color: color-mix(in srgb, var(--green) 6%, transparent) !important; }

/* Hover states */
[data-theme] .hover\:text-green-400:hover { color: var(--green) !important; }
[data-theme] .hover\:bg-green-500\/\[0\.06\]:hover { background-color: color-mix(in srgb, var(--green) 6%, transparent) !important; }
[data-theme] .hover\:bg-green-500\/\[0\.08\]:hover { background-color: color-mix(in srgb, var(--green) 8%, transparent) !important; }
[data-theme] .hover\:border-green-500\/30:hover { border-color: var(--border-h) !important; }

/* Selection */
[data-theme] ::selection { background: color-mix(in srgb, var(--green) 18%, transparent) !important; color: #fff !important; }

/* Background overrides for hardcoded bg color */
[data-theme] .bg-\[\#0a0a0a\],
[data-theme] .bg-\[\#0a0a0a\]\/95 { background-color: var(--bg) !important; }

/* Body override */
[data-theme] body {
    background: var(--bg) !important;
    color: color-mix(in srgb, var(--green) 78%, transparent) !important;
}

/* Inline green dot in marquee */
[data-theme] .bg-green-500\/20 { background-color: color-mix(in srgb, var(--green) 20%, transparent) !important; }
[data-theme] .rounded-full.bg-green-500\/20 { background-color: color-mix(in srgb, var(--green) 20%, transparent) !important; }

/* Logo inline style override */
[data-theme] .logo-mark span { color: var(--green) !important; text-shadow: 0 0 6px var(--green-glow) !important; }

/* Cyan text classes used in file icons */
[data-theme] .text-cyan-400 { color: var(--green) !important; }
[data-theme] .text-yellow-400 { color: var(--green) !important; }

/* Selection color on body */
[data-theme] .selection\:bg-green-500\/20 *::selection { background: color-mix(in srgb, var(--green) 18%, transparent) !important; }

/* Ensure code/tool textareas stay monospace for readability in all themes */
[data-theme] .tool-textarea,
[data-theme] .setting-input,
[data-theme] .format-select,
[data-theme] .srt-input,
[data-theme] pre,
[data-theme] code,
[data-theme] textarea,
[data-theme] .font-mono {
    font-family: 'JetBrains Mono', 'Share Tech Mono', 'Fira Code', 'Courier New', monospace !important;
}

/* Ensure nav, buttons, labels use theme font while remaining readable */
[data-theme] .nav-pill,
[data-theme] .mobile-nav-link,
[data-theme] .btn-primary,
[data-theme] .btn-convert-main,
[data-theme] .btn-tool,
[data-theme] .compress-tab,
[data-theme] .logo-text,
[data-theme] .hero-title,
[data-theme] .section-title,
[data-theme] .section-badge,
[data-theme] .setting-label,
[data-theme] .step-label,
[data-theme] .format-label,
[data-theme] .format-tag,
[data-theme] .theme-option,
[data-theme] .tool-cat-btn,
[data-theme] .tool-mini span,
[data-theme] .loader-text,
[data-theme] .badge-pulse {
    font-family: var(--mono) !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--mono);
    background: var(--bg);
    color: color-mix(in srgb, var(--green) 78%, transparent);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100vw;
}

::selection { background: color-mix(in srgb, var(--green) 18%, transparent); color: #fff; }

/* ====== MATRIX RAIN CANVAS ====== */
#matrix-rain {
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    opacity: 0.06;
}

/* ====== THEME PARTICLES CANVAS ====== */
#theme-particles {
    position: fixed; inset: 0;
    z-index: 1; pointer-events: none;
    opacity: 0.9;
}

/* ====== SCANLINES ====== */
.scanline-overlay {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
}

.crt-vignette {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35) 100%);
}

/* ====== LOADER ====== */
.loader-screen {
    position: fixed; inset: 0; z-index: 200;
    background: #000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader-screen.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-text {
    font-family: var(--mono);
    font-size: 11px; font-weight: 400;
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    animation: blink-cursor 1s steps(2) infinite;
}
.loader-ring {
    width: 24px; height: 24px;
    border: 1.5px solid color-mix(in srgb, var(--green) 6%, transparent);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    box-shadow: 0 0 12px var(--green-glow);
}
@keyframes blink-cursor {
    0%,100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ====== CUSTOM CURSOR ====== */
.cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 4px; height: 4px;
    background: var(--green);
    border-radius: 0;
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px var(--green), 0 0 12px var(--green-glow);
    will-change: left, top;
    transition: width 0.2s, height 0.2s, border-radius 0.2s, box-shadow 0.2s;
}
.cursor-ring {
    position: fixed; top: 0; left: 0;
    width: 28px; height: 28px;
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
    border-radius: 0;
    pointer-events: none;
    z-index: 998;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--spring), height 0.3s var(--spring), border-color 0.3s;
    will-change: left, top;
}
.cursor-dot.hovering {
    width: 30px; height: 30px; border-radius: 2px;
    background: color-mix(in srgb, var(--green) 6%, transparent);
    box-shadow: 0 0 20px var(--green-glow);
}
.cursor-ring.hovering { width: 40px; height: 40px; border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.cursor-dot.clicking { width: 2px; height: 2px; }
.cursor-ring.clicking { width: 20px; height: 20px; }

@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* ====== SCROLL PROGRESS ====== */
.scroll-progress-bar {
    position: fixed; top: 0; left: 0;
    height: 1px; width: 0%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green), 0 0 20px var(--green-glow);
    z-index: 100;
    will-change: width;
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--green) 18%, transparent); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--green) 35%, transparent); }

/* ====== GLASS CARD ====== */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--smooth);
    position: relative;
    overflow: hidden;
}
.glass-card::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--green) 3%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}
.glass-card:hover::after { opacity: 1; }
.glass-card:hover {
    background: var(--bg-card-h);
    border-color: var(--border-h);
    box-shadow: 0 0 20px color-mix(in srgb, var(--green) 3%, transparent);
    transform: translateY(-1px);
}
/* Disable hover lift on tool panel body — it's a content panel, not a card */
#tool-panel-body.glass-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg-card);
    border-color: var(--border);
}
.glass-card > * { position: relative; z-index: 1; }

/* ====== NAVBAR ====== */
.navbar-glass {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    border-bottom: 1px solid var(--glass-b);
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    transition: transform 0.4s var(--smooth), background 0.3s;
}
.navbar-glass.scrolled { background: var(--glass); }
.navbar-glass.nav-hidden { transform: translateY(-100%); }

.logo-group {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; flex-shrink: 0;
}
.logo-mark {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--green);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px var(--green-glow), inset 0 0 8px color-mix(in srgb, var(--green) 5%, transparent);
    transition: transform 0.4s var(--spring), box-shadow 0.4s;
}
.logo-group:hover .logo-mark {
    box-shadow: 0 0 20px var(--green-glow), inset 0 0 12px color-mix(in srgb, var(--green) 10%, transparent);
    transform: scale(1.05);
}
.logo-text {
    font-family: var(--mono);
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
}

/* Nav Pills */
.nav-container { position: relative; }
.nav-indicator {
    position: absolute; top: 2px; left: 2px;
    height: calc(100% - 4px);
    background: color-mix(in srgb, var(--green) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 2px;
    transition: transform 0.4s var(--expo), width 0.3s var(--expo);
    pointer-events: none;
    will-change: transform, width;
}
.nav-pill {
    position: relative; z-index: 2;
    padding: 5px 12px; border-radius: 2px;
    font-family: var(--mono);
    font-size: 10px; font-weight: 500;
    color: color-mix(in srgb, var(--green) 50%, transparent); background: transparent; border: none;
    cursor: pointer; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: color 0.25s, text-shadow 0.25s;
}
.nav-pill:hover { color: color-mix(in srgb, var(--green) 85%, transparent); }
.nav-pill.active {
    color: var(--green);
    text-shadow: 0 0 8px var(--green-glow);
}

/* Pipeline Btn */
.pipeline-btn {
    position: relative; padding: 6px; border-radius: 2px;
    border: 1px solid transparent; background: transparent;
    cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pipeline-btn:hover { border-color: var(--border); background: color-mix(in srgb, var(--green) 2%, transparent); }
.pipeline-btn:hover i { color: var(--green) !important; }

.badge-pulse {
    position: absolute; top: -4px; right: -4px;
    min-width: 15px; height: 15px;
    background: var(--green); color: #000;
    font-family: var(--mono);
    font-size: 8px; font-weight: 800;
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    animation: badge-glow 2s infinite;
    box-shadow: 0 0 8px var(--green-glow);
}
@keyframes badge-glow {
    0%,100% { box-shadow: 0 0 6px var(--green-glow); }
    50% { box-shadow: 0 0 16px color-mix(in srgb, var(--green) 40%, transparent); }
}

/* Hamburger */
.hamburger-btn {
    width: 34px; height: 34px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 2px;
    transition: background 0.2s;
}
.hamburger-btn:hover { background: color-mix(in srgb, var(--green) 3%, transparent); }
.hamburger-line {
    width: 16px; height: 1.5px;
    background: color-mix(in srgb, var(--green) 55%, transparent); border-radius: 0;
    transition: transform 0.35s var(--spring), opacity 0.2s, background 0.2s;
    transform-origin: center;
}
.hamburger-btn.open .line-1 { transform: translateY(6.5px) rotate(45deg); background: var(--green); }
.hamburger-btn.open .line-2 { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open .line-3 { transform: translateY(-6.5px) rotate(-45deg); background: var(--green); }

/* Mobile Menu */
.mobile-nav-link {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px; border-radius: 2px;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--green) 50%, transparent);
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: background 0.2s ease, color 0.2s ease; background: transparent;
    border: none; cursor: pointer; text-align: left;
}
.mobile-nav-link:hover { color: color-mix(in srgb, var(--green) 85%, transparent); background: color-mix(in srgb, var(--green) 5%, transparent); }
.mobile-nav-link.active {
    color: var(--green); background: color-mix(in srgb, var(--green) 4%, transparent);
    text-shadow: 0 0 6px var(--green-glow);
}

.mobile-menu-panel {
    border-top: 1px solid var(--glass-b);
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.4s var(--smooth), opacity 0.3s, padding 0.3s;
}
.mobile-menu-panel.open { max-height: 280px; opacity: 1; }

/* ====== PAGE SECTIONS ====== */
.page-section { display: none; opacity: 0; transform: translateY(12px); }
.page-section.active {
    display: block;
    animation: pageReveal 0.5s var(--expo) forwards;
}
@keyframes pageReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== COMPRESS TABS ====== */
.compress-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 16px;
    font-family: var(--mono);
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--green) 45%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.compress-tab:hover {
    color: color-mix(in srgb, var(--green) 70%, transparent);
    border-color: color-mix(in srgb, var(--green) 20%, transparent);
    background: color-mix(in srgb, var(--green) 5%, transparent);
}
.compress-tab.active {
    color: var(--green);
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 8%, transparent);
    text-shadow: 0 0 6px var(--green-glow);
    box-shadow: 0 0 12px color-mix(in srgb, var(--green) 8%, transparent);
}

.compress-panel { display: none; opacity: 0; }
.compress-panel.active {
    display: block;
    animation: pageReveal 0.4s var(--expo) forwards;
}

/* ====== SCROLL ANIMATIONS ====== */
[data-animate] {
    opacity: 0;
    transition: opacity 0.6s var(--smooth), transform 0.6s var(--smooth);
    will-change: opacity, transform;
}
[data-animate="fade-up"] { transform: translateY(24px); }
[data-animate="fade-down"] { transform: translateY(-24px); }
[data-animate="fade-left"] { transform: translateX(-24px); }
[data-animate="fade-right"] { transform: translateX(24px); }
[data-animate="scale"] { transform: scale(0.95); }
[data-animate].revealed { opacity: 1; transform: translate(0) scale(1); }

.reveal-panel { animation: revealSlide 0.4s var(--expo) forwards; }
@keyframes revealSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== HERO ====== */
.hero-title {
    font-family: var(--mono);
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.hero-title .char {
    display: inline-block; opacity: 0;
    transform: translateY(20px) translateZ(0);
    animation: charReveal 0.5s var(--expo) forwards;
    backface-visibility: hidden;
}
@keyframes charReveal { to { opacity: 1; transform: translateY(0) translateZ(0); } }
.hero-title .space { display: inline-block; width: 0.4em; }

.live-dot {
    width: 5px; height: 5px; border-radius: 0;
    background: var(--green);
    box-shadow: 0 0 6px var(--green), 0 0 12px var(--green-glow);
    animation: livePulse 2s infinite;
}
.live-dot.emerald { background: var(--green); box-shadow: 0 0 6px var(--green); }
@keyframes livePulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.section-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 2px;
    font-family: var(--mono);
    font-size: 9px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.1em; margin-bottom: 14px;
}
.section-badge.amber,
.section-badge.violet,
.section-badge.emerald {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
}

.section-title {
    font-family: var(--mono);
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 700; letter-spacing: -0.01em;
    color: var(--green);
    text-shadow: 0 0 20px var(--green-glow);
}

/* ====== STEP INDICATORS ====== */
.step-indicator {
    display: flex; flex-direction: column;
    align-items: center; gap: 5px;
    opacity: 0.4; transition: opacity 0.5s var(--smooth);
}
.step-indicator.active { opacity: 1; }
.step-indicator.completed { opacity: 0.65; }

.step-dot {
    width: 30px; height: 30px; border-radius: 2px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--green) 45%, transparent);
    transition: all 0.5s var(--spring);
}
.step-indicator.active .step-dot {
    background: var(--green); border-color: var(--green);
    color: #000;
    box-shadow: 0 0 16px var(--green-glow), 0 0 30px color-mix(in srgb, var(--green) 8%, transparent);
}
.step-indicator.completed .step-dot {
    background: color-mix(in srgb, var(--green) 8%, transparent); border-color: color-mix(in srgb, var(--green) 20%, transparent);
    color: var(--green);
}
.step-label {
    font-family: var(--mono);
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--green) 40%, transparent);
}
.step-indicator.active .step-label { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

.step-connector {
    width: 40px; height: 1px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    margin: 0 6px; margin-bottom: 18px;
    overflow: hidden;
}
.step-connector-fill {
    height: 100%; width: 0%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
    transition: width 0.7s var(--expo);
}
@media (min-width: 640px) { .step-connector { width: 60px; } }

/* ====== FORMAT PICKER ====== */
.format-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    transition: all 0.3s var(--smooth);
    transform-style: preserve-3d; perspective: 600px;
}
.format-card:hover { border-color: var(--border-h); background: var(--bg-card-h); }

.format-label {
    font-family: var(--mono);
    font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: color-mix(in srgb, var(--green) 50%, transparent);
}
.format-display { display: flex; align-items: center; gap: 10px; min-height: 38px; }

.arrow-circle {
    width: 32px; height: 32px; border-radius: 2px;
    background: var(--green);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 14px var(--green-glow);
    rotate: 90deg;
    transition: transform 0.4s var(--spring), box-shadow 0.4s;
}
@media (min-width: 640px) { .arrow-circle { rotate: 0deg; } }
.arrow-circle:hover { transform: scale(1.1); box-shadow: 0 0 24px color-mix(in srgb, var(--green) 30%, transparent); }

.format-select {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 34px 10px 10px;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--green) 80%, transparent);
    outline: none; cursor: pointer;
    transition: all 0.25s;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.format-select:focus { border-color: color-mix(in srgb, var(--green) 30%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 6%, transparent); }
.format-select:disabled { opacity: 0.4; cursor: not-allowed; }

/* ====== DROP ZONE ====== */
.drop-zone {
    position: relative; border-radius: var(--r-xl);
    background: color-mix(in srgb, var(--green) 1%, transparent); cursor: pointer;
    overflow: hidden; transition: all 0.4s var(--smooth);
    animation: dropZoneBreathe 4s ease-in-out infinite;
}
@keyframes dropZoneBreathe {
    0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { box-shadow: 0 0 20px color-mix(in srgb, var(--green) 4%, transparent); }
}
.drop-zone::before {
    content: ''; position: absolute; inset: 0;
    border-radius: var(--r-xl);
    border: 1px dashed color-mix(in srgb, var(--green) 18%, transparent);
    transition: border-color 0.4s;
    pointer-events: none;
}
.drop-zone:hover::before, .drop-zone.drag-over::before {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.drop-zone-gradient {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--green) 2%, transparent) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.5s;
    pointer-events: none;
}
.drop-zone:hover .drop-zone-gradient,
.drop-zone.drag-over .drop-zone-gradient { opacity: 1; }

.drop-zone-border-anim {
    position: absolute; inset: -1px;
    border-radius: var(--r-xl);
    background: conic-gradient(from var(--border-angle, 0deg), transparent 60%, color-mix(in srgb, var(--green) 12%, transparent) 80%, transparent 100%);
    opacity: 0; pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding: 1px;
    animation: borderRotate 5s linear infinite;
    transition: opacity 0.5s;
}
.drop-zone:hover .drop-zone-border-anim { opacity: 1; }
@keyframes borderRotate { to { --border-angle: 360deg; } }
@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.drop-zone.drag-over {
    background: color-mix(in srgb, var(--green) 2%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--green) 4%, transparent);
}

.upload-icon-wrap {
    width: 56px; height: 56px; margin-bottom: 14px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.5s var(--spring);
    animation: uploadFloat 3s ease-in-out infinite;
}
@keyframes uploadFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.drop-zone:hover .upload-icon-wrap {
    transform: scale(1.04) translateY(-2px);
    border-color: color-mix(in srgb, var(--green) 20%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--green) 6%, transparent);
}
.drop-zone:hover .upload-icon-wrap i { color: var(--green) !important; }

.drop-zone-sm {
    border-radius: var(--r-lg);
    border: 1px dashed var(--border);
    background: color-mix(in srgb, var(--green) 0.8%, transparent);
    cursor: pointer;
    transition: all 0.3s var(--smooth);
}
.drop-zone-sm:hover {
    border-color: var(--border-h);
    background: color-mix(in srgb, var(--green) 2%, transparent);
}

.hover-lift { transition: transform 0.4s var(--spring), box-shadow 0.3s; }
.hover-lift:hover { transform: scale(1.05) translateY(-2px); }

/* ====== ADVANCED COLLAPSE ====== */
.advanced-collapse {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.5s var(--smooth), opacity 0.35s;
}
.advanced-collapse.open { max-height: 400px; opacity: 1; }

/* ====== BUTTONS ====== */
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    background: var(--green); color: #000;
    font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-radius: 2px; border: none; cursor: pointer;
    transition: all 0.3s var(--spring);
    box-shadow: 0 0 14px var(--green-glow);
    position: relative; overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s var(--smooth);
    pointer-events: none;
}
.btn-primary:hover::before { left: 150%; }
.btn-primary:hover {
    box-shadow: 0 0 28px color-mix(in srgb, var(--green) 30%, transparent);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0) scale(0.97); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px;
    background: transparent; border: none; cursor: pointer;
    font-family: var(--mono);
    font-size: 10px; font-weight: 500;
    border-radius: 2px; transition: all 0.2s;
}

.btn-amber {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px;
    background: var(--green); color: #000;
    font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-radius: 2px; border: none; cursor: pointer;
    transition: all 0.3s var(--spring);
    box-shadow: 0 0 14px var(--green-glow);
}
.btn-amber:hover {
    box-shadow: 0 0 28px color-mix(in srgb, var(--green) 30%, transparent);
    transform: translateY(-1px);
}
.btn-amber:active { transform: translateY(0) scale(0.97); }

.btn-convert-main {
    position: relative; width: 100%; padding: 14px;
    border-radius: 4px; border: 1px solid var(--green); cursor: pointer;
    overflow: hidden; color: var(--green);
    font-family: var(--mono);
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    transition: all 0.35s var(--smooth);
    box-shadow: 0 0 20px color-mix(in srgb, var(--green) 6%, transparent);
}
.btn-convert-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--green) 4%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shimmerSlide 3s infinite;
}
@keyframes shimmerSlide {
    0% { transform: translateX(-100%); }
    60%,100% { transform: translateX(100%); }
}
.btn-convert-main:hover {
    background: color-mix(in srgb, var(--green) 6%, transparent);
    box-shadow: 0 0 30px var(--green-glow), 0 0 60px color-mix(in srgb, var(--green) 4%, transparent);
}
.btn-convert-main:active { transform: scale(0.99); }
.btn-convert-main:disabled { opacity: 0.35; pointer-events: none; }

/* ====== FORMAT MARQUEE ====== */
.format-marquee-wrap {
    overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.format-marquee {
    display: flex; gap: 6px;
    animation: marqueeScroll 45s linear infinite;
    width: max-content;
}
.format-marquee:hover { animation-play-state: paused; }

.format-tag {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--green) 4%, transparent); border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--green) 50%, transparent);
    white-space: nowrap; flex-shrink: 0;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.25s;
}
.format-tag:hover {
    background: color-mix(in srgb, var(--green) 10%, transparent); border-color: var(--border-h);
    color: var(--green); text-shadow: 0 0 6px var(--green-glow);
    cursor: pointer; transform: translateY(-1px);
}
.format-tag-active {
    background: color-mix(in srgb, var(--green) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--green) 40%, transparent) !important;
    color: var(--green) !important;
    text-shadow: 0 0 8px var(--green-glow);
    box-shadow: 0 0 10px var(--green-glow);
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ====== TOOL CARDS ====== */
.tool-card {
    position: relative; background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 16px;
    overflow: hidden;
    transition: all 0.3s var(--smooth);
    transform-style: preserve-3d;
}
.tool-card:hover {
    border-color: var(--border-h);
    background: var(--bg-card-h);
    box-shadow: 0 0 24px color-mix(in srgb, var(--green) 3%, transparent);
}
.tool-card-glow {
    position: absolute; top: -20px; right: -20px;
    width: 100px; height: 100px;
    border-radius: 50%; filter: blur(50px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s;
    background: var(--green);
}
.tool-card:hover .tool-card-glow { opacity: 0.06; }
.tool-card-glow.cyan, .tool-card-glow.violet,
.tool-card-glow.emerald, .tool-card-glow.rose { background: var(--green); }

.tool-icon {
    width: 34px; height: 34px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid; flex-shrink: 0;
    transition: transform 0.4s var(--spring);
}
.tool-icon.cyan, .tool-icon.violet,
.tool-icon.emerald, .tool-icon.rose {
    background: color-mix(in srgb, var(--green) 7%, transparent);
    border-color: color-mix(in srgb, var(--green) 20%, transparent);
}
.tool-card:hover .tool-icon { transform: scale(1.06); }

.tool-drop {
    width: 100%; min-height: 90px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px; cursor: pointer;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    transition: all 0.3s;
}
.tool-drop:hover {
    border-color: var(--border-h);
    background: color-mix(in srgb, var(--green) 2%, transparent);
}

.tool-textarea {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 9px 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--green) 80%, transparent); outline: none; resize: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.tool-textarea::placeholder { color: color-mix(in srgb, var(--green) 30%, transparent); }
.tool-textarea:focus { border-color: color-mix(in srgb, var(--green) 25%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 4%, transparent); }

/* ====== SETTINGS ====== */
.setting-label {
    display: block;
    font-family: var(--mono);
    font-size: 9px; font-weight: 600;
    color: color-mix(in srgb, var(--green) 50%, transparent); margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.12em;
}
.setting-input {
    width: 100%;
    background: rgba(0,0,0,0.3); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 8px 10px;
    font-family: var(--mono);
    font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--green) 80%, transparent);
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.setting-input:focus { border-color: color-mix(in srgb, var(--green) 25%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 4%, transparent); }

/* Toggle */
.toggle-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 11px; background: rgba(0,0,0,0.15);
    border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.toggle-card:hover { border-color: var(--border-h); }

.toggle { position: relative; display: inline-block; width: 32px; height: 18px; cursor: pointer; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--green) 4%, transparent); border-radius: 2px;
    transition: all 0.35s var(--smooth);
}
.toggle-slider::before {
    content: ''; position: absolute; left: 2px; top: 2px;
    width: 14px; height: 14px; border-radius: 1px;
    background: color-mix(in srgb, var(--green) 35%, transparent);
    transition: all 0.35s var(--spring);
}
.toggle input:checked + .toggle-slider { background: color-mix(in srgb, var(--green) 12%, transparent); }
.toggle input:checked + .toggle-slider::before {
    transform: translateX(14px); background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}

/* Range */
.range-slider {
    -webkit-appearance: none; appearance: none;
    height: 3px; background: color-mix(in srgb, var(--green) 12%, transparent);
    border-radius: 0; outline: none;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px; border-radius: 1px;
    cursor: pointer;
    box-shadow: 0 0 6px var(--green-glow);
    transition: transform 0.25s var(--spring);
    background: var(--green);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.3); box-shadow: 0 0 12px var(--green-glow); }
.range-cyan::-webkit-slider-thumb, .range-amber::-webkit-slider-thumb { background: var(--green); }
.range-slider::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 1px;
    cursor: pointer; border: none; background: var(--green);
}

/* ====== PROGRESS ====== */
.progress-track {
    height: 6px; background: color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 3px; overflow: hidden;
}
.progress-fill-amber {
    height: 100%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
    transition: width 0.4s ease;
    position: relative;
}
.progress-fill-amber::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.processing-spinner {
    display: inline-block; width: 10px; height: 10px;
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    border-top-color: var(--green);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== PRIVACY ====== */
.privacy-card {
    display: flex; gap: 12px;
    padding: 13px 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; align-items: flex-start;
    transition: all 0.3s var(--smooth);
}
.privacy-card:hover {
    background: var(--bg-card-h); border-color: var(--border-h);
    transform: translateX(4px);
    box-shadow: 0 0 16px color-mix(in srgb, var(--green) 2%, transparent);
}
.privacy-icon {
    width: 36px; height: 36px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid; flex-shrink: 0;
    background: color-mix(in srgb, var(--green) 7%, transparent); border-color: color-mix(in srgb, var(--green) 20%, transparent);
    transition: transform 0.4s var(--spring);
}
.privacy-card:hover .privacy-icon { transform: scale(1.08); }

/* ====== PIPELINE ====== */
.pipeline-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s;
}
.pipeline-backdrop.open { opacity: 1; pointer-events: auto; }

.pipeline-overlay {
    position: fixed; right: 10px; top: 64px;
    width: calc(100vw - 20px); max-width: 340px;
    max-height: 72vh;
    background: rgba(5,5,5,0.97);
    border: 1px solid var(--glass-b);
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6), 0 0 20px color-mix(in srgb, var(--green) 2%, transparent);
    z-index: 60;
    display: flex; flex-direction: column;
    transform: translateX(110%) scale(0.96);
    opacity: 0;
    transition: transform 0.5s var(--expo), opacity 0.35s;
}
.pipeline-overlay.open { transform: translateX(0) scale(1); opacity: 1; }

.empty-queue {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 14px;
}

.job-card {
    padding: 11px 12px; background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: all 0.25s;
}
.job-card:hover { border-color: var(--border-h); }

.job-progress-bar {
    height: 1px; width: 100%;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    overflow: hidden; margin-top: 8px;
}
.job-progress-fill {
    height: 100%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
    transition: width 0.4s ease;
}

.color-swatch {
    background: none; border: none;
    padding: 3px; cursor: pointer;
    border-radius: 3px; transition: background 0.2s ease, transform 0.2s ease;
}
.color-swatch:hover { background: color-mix(in srgb, var(--green) 3%, transparent); transform: translateY(-2px) scale(1.05); }

/* ====== TOAST ====== */
#toast-container > div {
    pointer-events: auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 12px color-mix(in srgb, var(--green) 3%, transparent);
    word-break: break-word;
}
.toast-enter { animation: toastSlideIn 0.4s var(--spring) forwards; }
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====== SFX MUTE BUTTON ====== */
.sfx-mute-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    color: color-mix(in srgb, var(--green) 65%, transparent);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.sfx-mute-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 6%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sfx-mute-btn:hover { color: var(--green); border-color: color-mix(in srgb, var(--green) 20%, transparent); }
.sfx-mute-btn:hover::before { opacity: 1; }
.sfx-mute-btn.muted { color: rgba(255,60,60,0.5); border-color: rgba(255,60,60,0.15); }

/* ====== CUSTOMIZATION PANEL ====== */
.customize-panel, .achieve-panel {
    position: fixed; top: 56px; right: 12px; width: 340px; max-height: calc(100vh - 72px);
    z-index: 9999;
    background: color-mix(in srgb, var(--bg) 96%, var(--green));
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; flex-direction: column;
    transition: opacity 0.25s ease, transform 0.25s ease;
    overflow: visible;
}
.customize-panel.hidden, .achieve-panel.hidden { opacity: 0; transform: translateY(-8px) scale(0.97); pointer-events: none; }
@media (max-width: 640px) {
    .customize-panel, .achieve-panel { left: 8px; right: 8px; width: auto; top: 52px; max-height: calc(100vh - 60px); }
}
/* Tabs container - allow horizontal scroll on small screens */
.cust-tabs { 
    gap: 2px; 
    flex-shrink: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.cust-tabs::-webkit-scrollbar { display: none; }
.cust-tab {
    padding: 5px 8px; font-size: 8px; font-family: var(--mono);
    color: color-mix(in srgb, var(--green) 40%, transparent); background: transparent;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; gap: 3px; white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.cust-tab:hover { color: var(--green); background: color-mix(in srgb, var(--green) 6%, transparent); }
.cust-tab.active { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 15%, transparent); }
/* Content area - scrollable */
#cust-content {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--green) 20%, transparent) transparent;
}
#cust-content::-webkit-scrollbar { width: 4px; }
#cust-content::-webkit-scrollbar-track { background: transparent; }
#cust-content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--green) 20%, transparent); border-radius: 2px; }
/* Customization option cards */
.cust-option {
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    display: flex; align-items: center; gap: 10px;
    transition: all 0.2s ease;
    min-width: 0;
}
.cust-option:hover { border-color: color-mix(in srgb, var(--green) 18%, transparent); background: color-mix(in srgb, var(--green) 6%, transparent); }
.cust-option.active { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); box-shadow: 0 0 8px var(--green-glow); }
.cust-option .cust-swatch { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cust-option .cust-label { font-size: 10px; font-family: var(--mono); color: var(--green); line-height: 1.2; }
.cust-option .cust-desc { font-size: 7px; color: color-mix(in srgb, var(--green) 35%, transparent); margin-top: 1px; word-break: break-word; }
.cust-option.locked { opacity: 0.4; filter: grayscale(0.5); cursor: not-allowed; }
.cust-option.locked .cust-lock { font-size: 8px; color: color-mix(in srgb, var(--green) 30%, transparent); margin-left: auto; }
/* Achievement cards */
.achieve-card {
    padding: 10px 12px; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    display: flex; align-items: flex-start; gap: 10px;
    transition: all 0.2s ease;
}
.achieve-card.unlocked { border-color: color-mix(in srgb, var(--green) 20%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
.achieve-card .ach-icon { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--green) 8%, transparent); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.achieve-card.unlocked .ach-icon { background: color-mix(in srgb, var(--green) 18%, transparent); box-shadow: 0 0 6px var(--green-glow); }
.achieve-card .ach-info { flex: 1; min-width: 0; }
.achieve-card .ach-name { font-size: 10px; font-family: var(--mono); color: var(--green); font-weight: 600; }
.achieve-card .ach-desc { font-size: 8px; color: color-mix(in srgb, var(--green) 40%, transparent); margin-top: 1px; }
.achieve-card .ach-bar { height: 3px; background: color-mix(in srgb, var(--green) 10%, transparent); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.achieve-card .ach-bar-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.5s ease; }
.achieve-card .ach-pct { font-size: 7px; color: color-mix(in srgb, var(--green) 30%, transparent); margin-top: 2px; text-align: right; }
.achieve-card.hidden-ach .ach-name, .achieve-card.hidden-ach .ach-desc { color: color-mix(in srgb, var(--green) 20%, transparent); }
.achieve-card.hidden-ach .ach-icon { filter: blur(2px) grayscale(1); }

/* Custom cursor styles */
[data-cursor="crosshair"] #cursor { width: 1px !important; height: 20px !important; border-radius: 0 !important; box-shadow: 0 0 4px var(--green-glow); }
[data-cursor="crosshair"] #cursor::after { content: ''; position: absolute; width: 20px; height: 1px; top: 50%; left: -10px; background: var(--green); box-shadow: 0 0 4px var(--green-glow); }
[data-cursor="crosshair"] #cursor-ring { display: none; }
[data-cursor="glow"] #cursor { width: 12px !important; height: 12px !important; border-radius: 50% !important; box-shadow: 0 0 20px var(--green), 0 0 40px var(--green-glow); opacity: 0.7; }
[data-cursor="glow"] #cursor-ring { border-width: 2px; opacity: 0.2; }
[data-cursor="minimal"] #cursor { width: 2px !important; height: 2px !important; border-radius: 50% !important; }
[data-cursor="minimal"] #cursor-ring { display: none; }
[data-cursor="ring"] #cursor { display: none; }
[data-cursor="ring"] #cursor-ring { width: 24px !important; height: 24px !important; border-width: 2px; }
[data-cursor="none"] #cursor, [data-cursor="none"] #cursor-ring { display: none; }

/* Custom textures */
[data-texture="scanlines"] body::after { content:''; position:fixed;inset:0;z-index:99998;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px); }
[data-texture="noise"] body::after { content:''; position:fixed;inset:0;z-index:99998;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
[data-texture="grid"] body::after { content:''; position:fixed;inset:0;z-index:99998;pointer-events:none;background:linear-gradient(color-mix(in srgb, var(--green) 4%, transparent) 1px, transparent 1px),linear-gradient(90deg, color-mix(in srgb, var(--green) 4%, transparent) 1px, transparent 1px);background-size:24px 24px; }
[data-texture="dots"] body::after { content:''; position:fixed;inset:0;z-index:99998;pointer-events:none;background:radial-gradient(circle, color-mix(in srgb, var(--green) 6%, transparent) 1px, transparent 1px);background-size:16px 16px; }
[data-texture="vignette"] body::after { content:''; position:fixed;inset:0;z-index:99998;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.4) 100%); }

/* Custom font families */
[data-font="mono"] { --mono: 'JetBrains Mono', 'Fira Code', monospace; }
[data-font="sans"] { --mono: 'Inter', 'SF Pro', system-ui, sans-serif; }
[data-font="retro"] { --mono: 'VT323', 'Courier New', monospace; }
[data-font="elegant"] { --mono: 'DM Sans', 'Quicksand', sans-serif; }
[data-font="future"] { --mono: 'Orbitron', 'Space Grotesk', sans-serif; }
[data-font="pixel"] { --mono: 'Press Start 2P', 'VT323', monospace; }
[data-font="handwritten"] { --mono: 'Caveat', 'Indie Flower', cursive; }
[data-font="brutalist"] { --mono: 'IBM Plex Mono', 'Space Mono', monospace; }

/* ====== TOOL SYSTEM ====== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Tool search input */
.tool-search-wrap {
    position: relative;
    display: flex; align-items: center;
    max-width: 340px;
    margin: 0 auto 16px;
}
.tool-search-wrap i {
    position: absolute; left: 12px;
    width: 14px; height: 14px;
    color: color-mix(in srgb, var(--green) 30%, transparent);
    pointer-events: none;
}
.tool-search-input {
    width: 100%;
    padding: 9px 60px 9px 34px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    color: color-mix(in srgb, var(--green) 80%, transparent);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--mono);
    letter-spacing: 0.03em;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-search-input:focus {
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 4%, transparent);
}
.tool-search-input::placeholder {
    color: color-mix(in srgb, var(--green) 25%, transparent);
}
.tool-search-count {
    position: absolute; right: 12px;
    font-size: 9px; font-weight: 600;
    color: color-mix(in srgb, var(--green) 35%, transparent);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

/* Category dot on tool cards */
.tool-cat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.tool-mini:hover .tool-cat-dot { opacity: 1; }

/* Category button layout (icon + label + count) */
.tool-cat-btn i { width: 12px; height: 12px; opacity: 0.5; }
.tool-cat-btn.active i { opacity: 1; }
.cat-label { pointer-events: none; }
.cat-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    font-size: 8px; font-weight: 700;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    margin-left: 2px;
}
.tool-cat-btn.active .cat-count {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
}

/* Category filter buttons */
.tool-cat-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    color: color-mix(in srgb, var(--green) 45%, transparent);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--mono);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.tool-cat-btn:hover { border-color: color-mix(in srgb, var(--green) 20%, transparent); color: color-mix(in srgb, var(--green) 70%, transparent); background: color-mix(in srgb, var(--green) 6%, transparent); }
.tool-cat-btn.active {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--green) 8%, transparent);
}

/* Tool mini cards */
.tool-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    background: color-mix(in srgb, var(--green) 2%, transparent);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.tool-mini::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 4%, transparent), transparent);
    transition: left 0.5s var(--smooth);
    pointer-events: none;
}
.tool-mini:hover::before {
    left: 100%;
}
.tool-mini i, .tool-mini svg { flex-shrink: 0; color: color-mix(in srgb, var(--green) 35%, transparent); transition: color 0.2s ease; }
.tool-mini span { font-size: 10px; font-weight: 600; color: color-mix(in srgb, var(--green) 55%, transparent); font-family: var(--mono); line-height: 1.3; transition: color 0.2s ease; }
.tool-mini:hover {
    border-color: color-mix(in srgb, var(--green) 20%, transparent);
    background: color-mix(in srgb, var(--green) 6%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.tool-mini:hover i, .tool-mini:hover svg { color: var(--green); transform: scale(1.1); }
.tool-mini:hover span { color: color-mix(in srgb, var(--green) 85%, transparent); }
.tool-mini.hidden { display: none; }

/* Tool panel overlay */
.tool-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: var(--bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
}
.tool-panel-overlay.active { display: block; animation: panelSlideIn 0.35s var(--expo) forwards; will-change: transform, opacity; }
@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fullscreen mode for tool panel */
.tool-panel-overlay.fullscreen .tool-panel-inner {
    max-width: 100% !important;
    padding: 4px 8px 0 !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.tool-panel-overlay.fullscreen .tool-panel-inner > .flex {
    margin-bottom: 3px !important;
    flex-shrink: 0;
}
.tool-panel-overlay.fullscreen .glass-card {
    max-width: 100%;
    border-radius: 4px;
    border-left: none;
    border-right: none;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px 6px !important;
    height: 100%;
}
.tool-panel-overlay.fullscreen .glass-card::after {
    display: none; /* hide hover gradient in fullscreen — prevents visual overflow */
}
.tool-panel-overlay.fullscreen {
    background: var(--bg);
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
}
/* Hide .space-y-4 gap in fullscreen */
.tool-panel-overlay.fullscreen .mastering-engine {
    gap: 0 !important;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.tool-panel-overlay.fullscreen .mastering-engine .space-y-4 > * + * { margin-top: 0 !important; }
.tool-panel-overlay.fullscreen #t-drop { display: none; } /* hide drop zone in FS if file loaded */

/* ---- Fullscreen zone wrappers: invisible in normal mode ---- */
/* Normal mode: also use 2-column layout on wider screens */
@media (min-width: 640px) {
    .mastering-engine #t-preview-section {
        display: grid !important;
        grid-template-columns: 1fr minmax(200px, 38%);
        grid-template-rows: 1fr auto;
        gap: 6px;
    }
    .mastering-engine #t-preview-section.hidden { display: none !important; }
    .mastering-engine #t-preview-section.space-y-3 > * + * { margin-top: 0 !important; }

    .mastering-fs-left {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .mastering-fs-right {
        display: flex !important;
        flex-direction: column;
        gap: 3px;
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 70vh;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--green-rgb, 34,217,86), 0.12) transparent;
    }
    .mastering-fs-right::-webkit-scrollbar { width: 4px; }
    .mastering-fs-right::-webkit-scrollbar-track { background: transparent; }
    .mastering-fs-right::-webkit-scrollbar-thumb {
        background: rgba(var(--green-rgb, 34,217,86), 0.15);
        border-radius: 3px;
    }
    .mastering-fs-bottom {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        grid-row: 2 / 3;
        grid-column: 1 / -1;
        border-top: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
        padding: 6px 0 2px;
    }
    /* Right-side compact overrides for normal-mode grid */
    .mastering-fs-right .mastering-section-header {
        padding: 4px 8px;
        font-size: 8px;
        min-height: 0;
    }
    .mastering-fs-right .mastering-section-body {
        padding: 4px 8px 6px;
    }
    .mastering-fs-right .mastering-macro-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
    .mastering-fs-right .mastering-macro {
        padding: 5px 6px;
    }
    .mastering-fs-right .macro-label { font-size: 7px !important; }
    .mastering-fs-right .macro-value { font-size: 9px !important; }
    .mastering-fs-right .macro-hints span { font-size: 6px !important; }
    .mastering-fs-right .mastering-modes-grid {
        grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important;
        gap: 3px !important;
    }
    .mastering-fs-right .mastering-mode-btn {
        padding: 3px 5px; font-size: 7px;
    }
    .mastering-fs-right .setting-label { font-size: 8px !important; }
    .mastering-fs-right .smart-preset-grid { gap: 2px; }
    .mastering-fs-right .smart-preset-btn { font-size: 7px; padding: 3px 5px; }
    .mastering-fs-right .smart-preset-btn.analyze { font-size: 8px; }
    .mastering-fs-right .smart-preset-btn.full-width { font-size: 8px; padding: 4px 8px; margin-bottom: 2px; }
    .mastering-fs-right .preset-cat-tabs { gap: 2px; margin-bottom: 3px; }
    .mastering-fs-right .preset-cat-tab { font-size: 7px; padding: 2px 5px; }
    .mastering-fs-right .mastering-eq-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2px;
    }
    .mastering-fs-right .mastering-mb-grid-5 {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2px;
    }
    .mastering-fs-right .mastering-mb-band { padding: 3px !important; }
    .mastering-fs-right .mastering-mb-label { font-size: 7px !important; }
    .mastering-fs-right .mastering-mb-val { font-size: 7px !important; }
    .mastering-fs-right .format-select { font-size: 9px !important; padding: 4px 6px !important; }
    .mastering-fs-right .mastering-divider { margin: 3px 0 !important; }
    .mastering-fs-right .mastering-bypass-bar { padding: 2px 6px; }
    .mastering-fs-right .mastering-bypass-toggle { font-size: 8px; padding: 3px 8px; }
    .mastering-fs-right .grid.grid-cols-2 { gap: 4px 6px !important; }
    .mastering-fs-right label span { font-size: 8px !important; }
    .mastering-fs-right .smart-preset-result { padding: 4px 6px; margin-top: 2px; }
    /* Normal-mode bottom compact */
    .mastering-fs-bottom .mastering-action-bar { flex: 1; min-width: 180px; padding: 0; }
    .mastering-fs-bottom .mastering-go-btn { font-size: 10px !important; padding: 6px 12px !important; }
    .mastering-fs-bottom .mastering-stats-card { width: 100%; padding: 6px 8px; }
    .mastering-fs-bottom .mastering-stats-title { font-size: 8px; margin-bottom: 4px; }
    .mastering-fs-bottom .mastering-stats-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
    .mastering-fs-bottom .mastering-stat { padding: 3px 4px; }
    .mastering-fs-bottom .mastering-stat-value { font-size: 10px; }
    .mastering-fs-bottom #t-result { width: 100%; }
}
/* When mastering tool is active in normal mode, widen the container */
@media (min-width: 640px) {
    .tool-panel-overlay:has(.mastering-engine) .tool-panel-inner {
        max-width: 960px !important;
    }
}
@media (min-width: 1100px) {
    .tool-panel-overlay:has(.mastering-engine) .tool-panel-inner {
        max-width: 1100px !important;
    }
}
@media (max-width: 639px) {
    .mastering-fs-left,
    .mastering-fs-right,
    .mastering-fs-bottom {
        display: contents;
    }
}

/* ============================================================
   FULLSCREEN MASTERING: DAW LAYOUT — ALL CONTROLS VISIBLE
   3-row grid: [waveform strip] [ALL controls multi-col] [export strip]
   No tabs, no scrolling, everything on screen simultaneously
   ============================================================ */

/* ---- Normal mode: tab bar hidden, all panels stacked ---- */
.fs-tab-bar { display: none !important; }
.fs-tab-panel { display: block; }

/* ---- Device preview grid (shared) ---- */
.device-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 3px;
}
.device-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px; border-radius: 4px; font-size: 8px;
    background: rgba(var(--green-rgb, 34,217,86), 0.04);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    color: rgba(var(--green-rgb, 34,217,86), 0.6);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.device-btn:hover {
    background: rgba(var(--green-rgb, 34,217,86), 0.08);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.2);
    color: rgba(var(--green-rgb, 34,217,86), 0.9);
}
.device-btn.active {
    background: rgba(var(--green-rgb, 34,217,86), 0.12);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.4);
    color: var(--green);
    box-shadow: 0 0 8px rgba(var(--green-rgb, 34,217,86), 0.15);
}

/* ======== FULLSCREEN: DAW SIDEBAR + MAIN GRID LAYOUT ========
   Sidebar (meters + waveform) | Main grid (all DSP sections) | Bottom export
   ================================================================ */

/* Master grid: sidebar | main area, export bar below */
.tool-panel-overlay.fullscreen #t-preview-section {
    display: grid !important;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.tool-panel-overlay.fullscreen #t-preview-section.hidden { display: none !important; }
.tool-panel-overlay.fullscreen #t-preview-section.space-y-3 > * + * { margin-top: 0 !important; }

/* ======== LEFT SIDEBAR: Waveform + Transport + Meters ======== */
.tool-panel-overlay.fullscreen .mastering-fs-left {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.22);
    border-right: 1px solid rgba(var(--green-rgb), 0.12);
    padding: 6px;
}
/* Waveform — fixed consistent display */
.tool-panel-overlay.fullscreen .mastering-waveform-wrap {
    flex-shrink: 0;
    max-height: none;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(var(--green-rgb), 0.1);
    border-radius: 5px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}
.tool-panel-overlay.fullscreen .mastering-waveform-compact { max-height: none; }
.tool-panel-overlay.fullscreen .mastering-waveform-compact .mastering-waveform,
.tool-panel-overlay.fullscreen .mastering-waveform {
    height: 56px !important;
    border-radius: 4px;
}
/* Transport in sidebar */
.tool-panel-overlay.fullscreen .mastering-sticky-transport {
    position: static;
    margin: 0;
    padding: 6px 0;
    border: none;
    backdrop-filter: none;
    background: none;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.08);
}
.tool-panel-overlay.fullscreen .mastering-transport { gap: 4px; flex-wrap: wrap; }
.tool-panel-overlay.fullscreen .transport-btn { padding: 3px 6px; }
.tool-panel-overlay.fullscreen .transport-time { font-size: 10px; font-weight: 600; }
.tool-panel-overlay.fullscreen .tool-file-info {
    font-size: 8px; padding: 3px 0; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-panel-overlay.fullscreen .ref-info { font-size: 8px; padding: 2px 0; flex-shrink: 0; }
/* Input analysis in sidebar */
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-input-analysis {
    flex-shrink: 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.06);
}
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-input-analysis .input-analysis-title {
    font-size: 7px; margin-bottom: 3px;
}
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-input-analysis .input-analysis-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-input-analysis .input-analysis-stat {
    padding: 2px 3px;
}
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-input-analysis .input-analysis-label { font-size: 6px; }
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-input-analysis .input-analysis-value { font-size: 9px; font-weight: 600; }

/* ======== METERS IN SIDEBAR — always visible, pro meter blocks ======== */
.tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-meters-panel {
    display: flex !important;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 0;
    gap: 6px;
    flex-direction: column;
    scrollbar-width: thin;
}
.tool-panel-overlay.fullscreen .meters-row-levels {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.tool-panel-overlay.fullscreen .meters-row-levels .meter-block { min-width: 0; }
.tool-panel-overlay.fullscreen .meters-row-levels .meter-bar-canvas {
    width: 100%; height: 16px; display: block;
}
.tool-panel-overlay.fullscreen .meters-row-viz {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
}
.tool-panel-overlay.fullscreen .meters-row { gap: 4px; }
.tool-panel-overlay.fullscreen .meter-spectrum-canvas {
    width: 100%; min-height: 50px; flex: 2; display: block;
}
.tool-panel-overlay.fullscreen .meter-corr-canvas {
    width: 100%; min-height: 50px; flex: 1; aspect-ratio: auto; display: block;
}
.tool-panel-overlay.fullscreen .meter-block {
    min-height: 0; overflow: hidden;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(var(--green-rgb), 0.06);
    border-radius: 4px;
    padding: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.tool-panel-overlay.fullscreen .meter-block.wide,
.tool-panel-overlay.fullscreen .meter-block.narrow {
    display: flex; flex-direction: column; flex: auto;
}
.tool-panel-overlay.fullscreen .meter-block.wide { flex: 2; }
.tool-panel-overlay.fullscreen .meter-block.narrow { flex: 1; min-width: 0; max-width: none; }
.tool-panel-overlay.fullscreen .meter-title {
    font-size: 7px; margin-bottom: 2px; letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(var(--green-rgb), 0.5); font-weight: 600;
}
.tool-panel-overlay.fullscreen .meter-readouts { font-size: 9px; gap: 6px; padding: 2px 0; font-weight: 600; }

/* ======== MAIN AREA: All DSP sections in grid ======== */
.tool-panel-overlay.fullscreen .mastering-fs-right {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 6px;
    grid-row: 1;
    grid-column: 2;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: stretch;
    background: rgba(0,0,0,0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--green-rgb), 0.12) transparent;
}
.tool-panel-overlay.fullscreen .mastering-fs-right::-webkit-scrollbar { width: 4px; }
.tool-panel-overlay.fullscreen .mastering-fs-right::-webkit-scrollbar-thumb {
    background: rgba(var(--green-rgb), 0.15); border-radius: 4px;
}

/* Bypass bar — persistent toolbar strip */
.tool-panel-overlay.fullscreen .mastering-bypass-bar {
    display: flex; align-items: center; padding: 4px 10px; flex-shrink: 0;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.1);
    grid-column: 1 / -1;
    background: rgba(0,0,0,0.18);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(var(--green-rgb), 0.03);
    position: sticky; top: 0; z-index: 10;
}
.tool-panel-overlay.fullscreen .mastering-bypass-toggle { font-size: 9px; padding: 4px 10px; }

/* Tab panels inject sections into grid */
.tool-panel-overlay.fullscreen .fs-tab-panel {
    display: contents !important;
}

/* ---- Sections — distinct pro boxes with depth ---- */
.tool-panel-overlay.fullscreen .mastering-section {
    border-radius: 6px; overflow: hidden;
    background: rgba(var(--green-rgb), 0.022);
    border: 1px solid rgba(var(--green-rgb), 0.1);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.25),
        0 0 0 1px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(var(--green-rgb), 0.04);
    min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tool-panel-overlay.fullscreen .mastering-section:hover {
    border-color: rgba(var(--green-rgb), 0.22);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.3),
        0 0 0 1px rgba(0,0,0,0.15),
        0 0 12px rgba(var(--green-rgb), 0.04),
        inset 0 1px 0 rgba(var(--green-rgb), 0.06);
}
.tool-panel-overlay.fullscreen .mastering-section-header {
    padding: 5px 10px; font-size: 9px; min-height: 0;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(var(--green-rgb), 0.06);
    letter-spacing: 0.5px;
}
.tool-panel-overlay.fullscreen .mastering-section-body {
    padding: 5px 10px 8px; overflow: hidden;
}
.tool-panel-overlay.fullscreen .mastering-section-body .space-y-2 > * + * { margin-top: 4px !important; }
.tool-panel-overlay.fullscreen .mastering-section-body .space-y-3 > * + * { margin-top: 5px !important; }

/* Force all sections expanded */
.tool-panel-overlay.fullscreen .mastering-section.collapsed .mastering-section-body {
    max-height: 2000px; opacity: 1; padding-top: 5px; padding-bottom: 8px; overflow: visible;
}
.tool-panel-overlay.fullscreen .mastering-section.collapsed .mastering-chevron { transform: rotate(0deg); }

/* ---- Labels & values (larger for readability) ---- */
.tool-panel-overlay.fullscreen .setting-label { font-size: 8px !important; }
.tool-panel-overlay.fullscreen .mastering-section-body .text-\[10px\] { font-size: 9px !important; }
.tool-panel-overlay.fullscreen .mastering-section-body label span { font-size: 8px !important; }
.tool-panel-overlay.fullscreen .mastering-divider { margin: 4px 0 !important; }

/* ---- Macros — each knob gets its own card ---- */
.tool-panel-overlay.fullscreen .mastering-macro-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
.tool-panel-overlay.fullscreen .mastering-macro {
    padding: 6px 8px; overflow: visible;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(var(--green-rgb), 0.08);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    transition: border-color 0.15s;
}
.tool-panel-overlay.fullscreen .mastering-macro:hover {
    border-color: rgba(var(--green-rgb), 0.18);
}
.tool-panel-overlay.fullscreen .macro-label { font-size: 7px !important; letter-spacing: 0.5px; }
.tool-panel-overlay.fullscreen .macro-value { font-size: 12px !important; font-weight: 700; }
.tool-panel-overlay.fullscreen .macro-slider { height: 5px; }
.tool-panel-overlay.fullscreen .macro-hints span { font-size: 6px !important; }

/* ---- Modes — pill buttons with depth ---- */
.tool-panel-overlay.fullscreen .mastering-modes-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 3px;
}
.tool-panel-overlay.fullscreen .mastering-mode-btn {
    padding: 3px 5px; font-size: 7px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid rgba(var(--green-rgb), 0.1);
    transition: all 0.15s;
}
.tool-panel-overlay.fullscreen .mastering-mode-btn:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 6px rgba(var(--green-rgb), 0.08);
}

/* ---- Smart Presets — cards with depth ---- */
.tool-panel-overlay.fullscreen .smart-preset-grid { gap: 3px; grid-template-columns: repeat(2, 1fr); }
.tool-panel-overlay.fullscreen .smart-preset-btn {
    font-size: 8px; padding: 4px 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    border: 1px solid rgba(var(--green-rgb), 0.08);
    transition: all 0.15s;
}
.tool-panel-overlay.fullscreen .smart-preset-btn:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    border-color: rgba(var(--green-rgb), 0.2);
}
.tool-panel-overlay.fullscreen .smart-preset-btn.analyze { font-size: 9px; padding: 5px 8px; }
.tool-panel-overlay.fullscreen .smart-preset-btn.full-width { font-size: 9px; padding: 5px 12px; margin-bottom: 2px; }
.tool-panel-overlay.fullscreen .smart-preset-result { padding: 4px 8px; margin-top: 3px; }

/* ---- Presets ---- */
.tool-panel-overlay.fullscreen .preset-cat-tabs { gap: 2px; margin-bottom: 3px; }
.tool-panel-overlay.fullscreen .preset-cat-tab { font-size: 7px; padding: 2px 5px; }
.tool-panel-overlay.fullscreen .mastering-preset-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 3px;
    max-height: 90px; overflow-y: auto; scrollbar-width: thin;
}

/* ---- EQ — band cards with separation ---- */
.tool-panel-overlay.fullscreen .mastering-eq-grid { grid-template-columns: repeat(8, 1fr); gap: 3px; }
.tool-panel-overlay.fullscreen .mastering-eq-band {
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(var(--green-rgb), 0.06);
    border-radius: 4px;
    padding: 3px 2px;
    transition: border-color 0.15s;
}
.tool-panel-overlay.fullscreen .mastering-eq-band:hover {
    border-color: rgba(var(--green-rgb), 0.18);
}
.tool-panel-overlay.fullscreen .mastering-eq-slider-wrap { height: 60px; }
.tool-panel-overlay.fullscreen .mastering-eq-slider-wrap .eq-slider { height: 52px; }
.tool-panel-overlay.fullscreen .mastering-eq-freq { font-size: 7px !important; }
.tool-panel-overlay.fullscreen .eq-val { font-size: 9px !important; font-weight: 600; }

/* ---- Multiband — band cards ---- */
.tool-panel-overlay.fullscreen .mastering-mb-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 3px; }
.tool-panel-overlay.fullscreen .mastering-mb-band {
    padding: 3px !important;
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(var(--green-rgb), 0.06);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
    transition: border-color 0.15s;
}
.tool-panel-overlay.fullscreen .mastering-mb-band:hover {
    border-color: rgba(var(--green-rgb), 0.18);
}
.tool-panel-overlay.fullscreen .mastering-mb-label { font-size: 7px !important; }
.tool-panel-overlay.fullscreen .mastering-mb-val { font-size: 7px !important; }

/* ---- Dynamics & sub-grids ---- */
.tool-panel-overlay.fullscreen .mastering-section-body .grid.grid-cols-2,
.tool-panel-overlay.fullscreen .mastering-section-body .grid.grid-cols-3 { gap: 4px 8px !important; }

/* ---- Format select, sliders ---- */
.tool-panel-overlay.fullscreen .format-select { font-size: 8px !important; padding: 3px 6px !important; }
.tool-panel-overlay.fullscreen input[type="range"],
.tool-panel-overlay.fullscreen .range-slider,
.tool-panel-overlay.fullscreen .macro-slider,
.tool-panel-overlay.fullscreen .eq-slider { overflow: visible; }
.tool-panel-overlay.fullscreen .grid > * { min-width: 0; }

/* ======== BOTTOM: Export Bar — professional dark strip ======== */
.tool-panel-overlay.fullscreen .mastering-fs-bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    grid-row: 2; grid-column: 1 / -1;
    border-top: 1px solid rgba(var(--green-rgb), 0.12);
    padding: 5px 10px; flex-shrink: 0;
    background: rgba(0,0,0,0.2);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
}
.tool-panel-overlay.fullscreen .mastering-action-bar { padding: 0; flex: 1; min-width: 160px; }
.tool-panel-overlay.fullscreen .mastering-go-btn { font-size: 11px !important; padding: 6px 16px !important; }
.tool-panel-overlay.fullscreen #t-progress { flex: 1; }
.tool-panel-overlay.fullscreen #t-result,
.tool-panel-overlay.fullscreen #t-stats { width: 100%; flex-shrink: 0; }
.tool-panel-overlay.fullscreen .mastering-stats-card { padding: 4px 8px; }
.tool-panel-overlay.fullscreen .mastering-stats-title { font-size: 8px; margin-bottom: 2px; }
.tool-panel-overlay.fullscreen .mastering-stats-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tool-panel-overlay.fullscreen .mastering-stat { padding: 2px 4px; }
.tool-panel-overlay.fullscreen .mastering-stat-value { font-size: 10px; }
.tool-panel-overlay.fullscreen #t-result { margin: 0 !important; }

/* ======== FS RESPONSIVE ======== */
/* Mobile: single column, no sidebar */
@media (max-width: 768px) {
    .tool-panel-overlay.fullscreen #t-preview-section {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr auto !important;
    }
    .tool-panel-overlay.fullscreen .mastering-fs-left {
        flex-direction: row; flex-wrap: wrap; gap: 4px;
        border-right: none; border-bottom: 1px solid rgba(var(--green-rgb), 0.1);
        grid-column: 1; padding: 4px;
    }
    .tool-panel-overlay.fullscreen .mastering-fs-left > .mastering-meters-panel { display: none !important; }
    .tool-panel-overlay.fullscreen .mastering-waveform-wrap { flex: 1; min-width: 140px; }
    .tool-panel-overlay.fullscreen .mastering-waveform { height: 32px !important; }
    .tool-panel-overlay.fullscreen .mastering-fs-right {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-column: 1;
    }
    .tool-panel-overlay.fullscreen .mastering-fs-bottom { grid-column: 1; }
    .tool-panel-overlay.fullscreen .mastering-macro-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-panel-overlay.fullscreen .smart-preset-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-panel-overlay.fullscreen .mastering-eq-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Medium screens: 3-col grid */
@media (min-width: 769px) and (max-width: 1199px) {
    .tool-panel-overlay.fullscreen .mastering-fs-right {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* Large screens: wider sidebar, 4-col grid */
@media (min-width: 1200px) {
    .tool-panel-overlay.fullscreen #t-preview-section {
        grid-template-columns: 250px 1fr;
    }
    .tool-panel-overlay.fullscreen .mastering-fs-right {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .tool-panel-overlay.fullscreen .mastering-macro-grid { grid-template-columns: repeat(4, 1fr); }
    .tool-panel-overlay.fullscreen .smart-preset-grid { grid-template-columns: repeat(4, 1fr); }
    .tool-panel-overlay.fullscreen .mastering-eq-slider-wrap { height: 70px; }
    .tool-panel-overlay.fullscreen .mastering-eq-slider-wrap .eq-slider { height: 62px; }
}
/* Extra-large: 5-col grid, wider sidebar */
@media (min-width: 1600px) {
    .tool-panel-overlay.fullscreen #t-preview-section {
        grid-template-columns: 280px 1fr;
    }
    .tool-panel-overlay.fullscreen .mastering-fs-right {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .tool-panel-overlay.fullscreen .mastering-eq-slider-wrap { height: 80px; }
    .tool-panel-overlay.fullscreen .mastering-eq-slider-wrap .eq-slider { height: 72px; }
    .tool-panel-overlay.fullscreen .macro-value { font-size: 13px !important; }
    .tool-panel-overlay.fullscreen .mastering-section-header { font-size: 10px; }
}
/* Ultra-wide: 6-col grid */
@media (min-width: 2000px) {
    .tool-panel-overlay.fullscreen .mastering-fs-right {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ============================================================
   WORKSPACE PICKER — UI in bypass bar (always visible)
   ============================================================ */
.mastering-workspace-picker {
    display: none; /* only shows in fullscreen */
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    border: 1px solid rgba(var(--green-rgb), 0.1);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.tool-panel-overlay.fullscreen .mastering-workspace-picker { display: flex; }
.ws-btn {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    height: 24px; padding: 0 7px;
    border-radius: 4px; border: 1px solid transparent; cursor: pointer;
    background: transparent; color: rgba(var(--green-rgb), 0.35);
    transition: all 0.15s; white-space: nowrap;
    font-family: inherit;
}
.ws-btn:hover {
    background: rgba(var(--green-rgb), 0.06);
    border-color: rgba(var(--green-rgb), 0.12);
    color: rgba(var(--green-rgb), 0.7);
}
.ws-btn.active {
    background: rgba(var(--green-rgb), 0.12);
    border-color: rgba(var(--green-rgb), 0.25);
    color: var(--green);
    box-shadow: 0 0 8px rgba(var(--green-rgb), 0.15), inset 0 1px 0 rgba(var(--green-rgb), 0.08);
}
.ws-btn i { width: 10px; height: 10px; flex-shrink: 0; }
.ws-label { font-size: 7px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }

/* ============================================================
   WORKSPACE LAYOUTS — Professional Mastering Engine
   Waveform position: ALWAYS left sidebar, fixed 56px height
   Workspace picker: ALWAYS in bypass bar (sticky)
   Only grid density, meter sizing, sidebar width change
   ============================================================ */

/* FS = .tool-panel-overlay.fullscreen
   WS(x) = FS .mastering-engine[data-workspace="x"] */

/* ================================================
   GLOBAL STRETCH RULES — apply to ALL workspaces
   ================================================ */
/* Sections stretch to fill grid cells */
.tool-panel-overlay.fullscreen .mastering-section {
    display: flex !important;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}
.tool-panel-overlay.fullscreen .mastering-section-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Inner content stretches */
.tool-panel-overlay.fullscreen .mastering-section-body > .space-y-2,
.tool-panel-overlay.fullscreen .mastering-section-body > .space-y-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Grids inside sections stretch */
.tool-panel-overlay.fullscreen .mastering-section-body > .grid,
.tool-panel-overlay.fullscreen .mastering-section-body .space-y-2 > .grid {
    flex: 1;
    align-content: stretch;
}
/* EQ bands stretch vertically */
.tool-panel-overlay.fullscreen .mastering-eq-grid {
    flex: 1;
    align-items: stretch;
}
.tool-panel-overlay.fullscreen .mastering-eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.tool-panel-overlay.fullscreen .mastering-eq-slider-wrap {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 40px;
}
.tool-panel-overlay.fullscreen .mastering-eq-slider-wrap .eq-slider {
    flex: 1;
    min-height: 0;
}
/* Grid children flex */
.tool-panel-overlay.fullscreen .grid > div {
    display: flex;
    flex-direction: column;
}
.tool-panel-overlay.fullscreen .grid > div input[type="range"] {
    flex-shrink: 0;
}
/* Canvas elements fill containers */
.tool-panel-overlay.fullscreen canvas {
    display: block;
    width: 100%;
}

/* ================================================
   WS: STUDIO (default) — balanced DAW layout
   Sidebar 220px | 3-col grid | stretched panels
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="studio"] .mastering-fs-right,
.tool-panel-overlay.fullscreen .mastering-engine:not([data-workspace]) .mastering-fs-right {
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="studio"] .meter-spectrum-canvas,
.tool-panel-overlay.fullscreen .mastering-engine:not([data-workspace]) .meter-spectrum-canvas {
    max-height: none !important; flex: 3 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="studio"] .meter-corr-canvas,
.tool-panel-overlay.fullscreen .mastering-engine:not([data-workspace]) .meter-corr-canvas {
    max-height: none !important; flex: 2 !important;
}

/* ================================================
   WS: MIXER — FL Studio Mixer inspired
   Narrow sidebar 180px | Sections as column strips
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] #t-preview-section {
    grid-template-columns: 180px 1fr !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-waveform {
    height: 40px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-input-analysis {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-meters-panel {
    flex: 1 !important;
    overflow: hidden !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .meter-spectrum-canvas {
    max-height: none !important; flex: 2 !important; min-height: 60px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .meter-corr-canvas {
    max-height: none !important; flex: 1 !important; min-height: 40px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .meter-bar-canvas {
    height: 20px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-fs-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 4px !important;
    overflow-y: auto !important;
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-section {
    flex: 1 1 0 !important;
    min-height: 36px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-section-body {
    flex: 1 !important; overflow: hidden !important;
    padding: 3px 8px 4px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-bypass-bar {
    flex: 0 0 auto !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .fs-tab-panel {
    display: contents !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-macro-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-section-header {
    padding: 3px 8px !important; font-size: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-mode-btn {
    padding: 2px 5px !important; font-size: 7px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-eq-grid {
    grid-template-columns: repeat(8, 1fr) !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-fs-bottom {
    padding: 3px 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="mixer"] .mastering-go-btn {
    font-size: 10px !important; padding: 4px 12px !important;
}

/* ================================================
   WS: ARRANGE — Ableton Arrange / FL Playlist
   Wide sidebar 320px for timeline feel
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] #t-preview-section {
    grid-template-columns: 320px 1fr !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-waveform {
    height: 120px !important;
    border-radius: 6px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-input-analysis {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-meters-panel {
    flex: 0 0 auto !important;
    max-height: 120px;
    overflow: hidden !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .meter-spectrum-canvas {
    max-height: 50px !important; min-height: 36px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .meter-corr-canvas {
    max-height: 50px !important; min-height: 36px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-fs-right {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-section-header {
    padding: 3px 8px !important; font-size: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-section-body {
    padding: 3px 8px 4px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-eq-slider-wrap {
    height: auto !important; flex: 1 !important; min-height: 30px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="arrange"] .mastering-eq-slider-wrap .eq-slider {
    height: auto !important; flex: 1 !important;
}

/* ================================================
   WS: CONSOLE — SSL Console / Harrison Mixbus
   Narrow sidebar 160px | 2-col XL grid
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] #t-preview-section {
    grid-template-columns: 160px 1fr !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-waveform {
    height: 42px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-input-analysis {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .meter-spectrum-canvas {
    max-height: none !important; flex: 2 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .meter-corr-canvas {
    max-height: none !important; flex: 1 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-fs-right {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-section-header {
    padding: 8px 14px !important; font-size: 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-section-body {
    padding: 8px 14px 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .setting-label {
    font-size: 11px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-section-body .text-\[10px\] {
    font-size: 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .macro-value {
    font-size: 20px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .macro-label {
    font-size: 10px !important; letter-spacing: 1px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .macro-slider {
    height: 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .macro-hints span {
    font-size: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-macro {
    padding: 10px 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-macro-grid {
    grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-mode-btn {
    padding: 6px 10px !important; font-size: 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .smart-preset-btn {
    font-size: 11px !important; padding: 8px 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-eq-slider-wrap {
    height: auto !important; flex: 1 !important; min-height: 60px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-eq-slider-wrap .eq-slider {
    height: auto !important; flex: 1 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-go-btn {
    font-size: 14px !important; padding: 10px 24px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .format-select {
    font-size: 11px !important; padding: 6px 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-mb-band {
    padding: 6px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-mb-label {
    font-size: 9px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-mb-val {
    font-size: 9px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] label span {
    font-size: 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-divider {
    margin: 6px 0 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .preset-cat-tab {
    font-size: 9px !important; padding: 4px 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .eq-val {
    font-size: 11px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="console"] .mastering-eq-freq {
    font-size: 9px !important;
}

/* ================================================
   WS: METER — Metering Station
   Wide sidebar 45% = giant meters
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] #t-preview-section {
    grid-template-columns: 45% 1fr !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .mastering-fs-left {
    padding: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .mastering-input-analysis {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .mastering-meters-panel {
    flex: 1 !important;
    overflow: hidden !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .meter-bar-canvas {
    height: 28px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .meter-spectrum-canvas {
    max-height: none !important; flex: 3 !important; min-height: 100px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .meter-corr-canvas {
    max-height: none !important; flex: 2 !important; min-height: 80px !important; width: auto !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .meter-title {
    font-size: 10px !important; letter-spacing: 2px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .meter-readouts {
    font-size: 14px !important; font-weight: 700 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .mastering-fs-right {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .mastering-section-header {
    padding: 3px 8px !important; font-size: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .mastering-section-body {
    padding: 3px 8px 5px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="meter"] .macro-value {
    font-size: 11px !important;
}

/* ================================================
   WS: SPLIT — 50/50 balanced
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] #t-preview-section {
    grid-template-columns: 1fr 1fr !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-fs-left {
    padding: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-waveform {
    height: 80px !important;
    border-radius: 6px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-meters-panel {
    flex: 1 !important;
    overflow: hidden !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .meter-spectrum-canvas {
    max-height: none !important; flex: 2 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .meter-corr-canvas {
    max-height: none !important; flex: 1 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-fs-right {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    padding: 6px !important;
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-section-header {
    padding: 5px 10px !important; font-size: 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-section-body {
    padding: 6px 10px 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .setting-label {
    font-size: 9px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .macro-value {
    font-size: 14px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .macro-slider {
    height: 7px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-eq-slider-wrap {
    height: auto !important; flex: 1 !important; min-height: 40px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="split"] .mastering-eq-slider-wrap .eq-slider {
    height: auto !important; flex: 1 !important;
}

/* ================================================
   WS: STACKED — Full-width section strips
   Narrow sidebar 150px | Single column sections
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] #t-preview-section {
    grid-template-columns: 150px 1fr !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-fs-left {
    padding: 4px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-waveform {
    height: 36px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-input-analysis {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-sticky-transport {
    padding: 3px 0 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .transport-time {
    font-size: 9px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .tool-file-info {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .ref-info {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .meter-spectrum-canvas {
    max-height: none !important; flex: 2 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .meter-corr-canvas {
    max-height: none !important; flex: 1 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .meter-bar-canvas {
    height: 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-fs-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 4px 8px !important;
    overflow-y: auto !important;
    align-content: stretch !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-section {
    flex: 1 1 0 !important;
    min-height: 32px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-section-body {
    flex: 1 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-bypass-bar {
    flex: 0 0 auto !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-macro-grid {
    grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-eq-grid {
    grid-template-columns: repeat(8, 1fr) !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-eq-slider-wrap {
    height: auto !important; flex: 1 !important; min-height: 40px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-eq-slider-wrap .eq-slider {
    height: auto !important; flex: 1 !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-mb-grid-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="stacked"] .mastering-section-header {
    padding: 3px 10px !important; font-size: 8px !important;
}

/* ================================================
   WS: MINIMAL — Zen / Focus mode
   Full-width, no sidebar. Waveform top, macros below.
   ================================================ */
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] #t-preview-section {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr 44px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-fs-left {
    grid-column: 1 !important; grid-row: 1 !important;
    flex-direction: column !important;
    border-right: none !important;
    border-bottom: 2px solid rgba(var(--green-rgb), 0.12);
    padding: 12px 20px !important;
    overflow: hidden !important;
    max-height: 200px;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-waveform {
    height: 120px !important;
    border-radius: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-meters-panel {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-input-analysis {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-fs-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 20px !important;
    grid-column: 1 !important; grid-row: 2 !important;
    overflow-y: auto !important;
    max-height: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .fs-tab-panel {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .fs-tab-panel[data-fspanel="main"] {
    display: block !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .fs-tab-panel[data-fspanel="main"] > .mastering-section:nth-child(n+3) {
    display: none !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-macro-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-macro {
    padding: 12px 14px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .macro-value {
    font-size: 24px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .macro-label {
    font-size: 11px !important; letter-spacing: 1.5px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .macro-slider {
    height: 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .macro-hints span {
    font-size: 8px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-mode-btn {
    padding: 6px 10px !important; font-size: 10px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-modes-grid {
    gap: 4px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-section-header {
    font-size: 12px !important; padding: 8px 12px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-fs-bottom {
    grid-column: 1 !important; padding: 8px 20px !important;
}
.tool-panel-overlay.fullscreen .mastering-engine[data-workspace="minimal"] .mastering-go-btn {
    font-size: 16px !important; padding: 12px 28px !important;
}

/* ============================================================
   V17 WORKFLOW GRID MODE — Drag, Resize, Snap
   ============================================================ */

/* Divider between standard workspace buttons and Grid button */
.ws-divider {
    width: 1px;
    height: 16px;
    background: rgba(var(--green-rgb), 0.15);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Accent style for the Grid button */
.ws-btn.ws-btn-accent {
    border-color: rgba(255, 170, 0, 0.2);
    color: rgba(255, 170, 0, 0.5);
}
.ws-btn.ws-btn-accent:hover {
    background: rgba(255, 170, 0, 0.08);
    border-color: rgba(255, 170, 0, 0.3);
    color: rgba(255, 170, 0, 0.85);
}
.ws-btn.ws-btn-accent.active {
    background: rgba(255, 170, 0, 0.12);
    border-color: rgba(255, 170, 0, 0.35);
    color: #ffa500;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.15), inset 0 1px 0 rgba(255, 170, 0, 0.08);
}

/* When workflow-active: switch .mastering-fs-right to CSS Grid workspace */
.mastering-engine.workflow-active .mastering-fs-right {
    display: grid !important;
    grid-template-columns: repeat(16, 1fr) !important;
    grid-auto-rows: minmax(48px, auto) !important;
    gap: 4px !important;
    padding: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    align-content: start;
    min-height: 100%;
    max-height: none !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* In workflow mode — base layout defined after resize handle CSS below */
.mastering-engine.workflow-active .mastering-fs-left {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    border-right: 1px solid rgba(var(--green-rgb), 0.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--green-rgb), 0.1) transparent;
    background: rgba(0, 0, 0, 0.12);
}
.mastering-engine.workflow-active .mastering-fs-left::-webkit-scrollbar { width: 3px; }
.mastering-engine.workflow-active .mastering-fs-left::-webkit-scrollbar-track { background: transparent; }
.mastering-engine.workflow-active .mastering-fs-left::-webkit-scrollbar-thumb { background: rgba(var(--green-rgb), 0.1); border-radius: 3px; }

/* Draggable resize handle between left panel and grid */
.wf-panel-resize-handle {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    width: 6px;
    cursor: col-resize;
    background: rgba(var(--green-rgb), 0.04);
    border-left: 1px solid rgba(var(--green-rgb), 0.06);
    border-right: 1px solid rgba(var(--green-rgb), 0.06);
    transition: background 0.15s;
    z-index: 20;
    position: relative;
}
.wf-panel-resize-handle:hover,
.wf-panel-resize-handle.active {
    background: rgba(var(--green-rgb), 0.15);
    border-color: rgba(var(--green-rgb), 0.25);
}
.wf-panel-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 24px;
    border-radius: 1px;
    background: rgba(var(--green-rgb), 0.2);
    transition: background 0.15s;
}
.wf-panel-resize-handle:hover::after,
.wf-panel-resize-handle.active::after {
    background: rgba(var(--green-rgb), 0.5);
}

/* Update grid to 3-col to accommodate the resize handle */
.mastering-engine.workflow-active #t-preview-section {
    display: grid !important;
    grid-template-columns: 220px 6px 1fr;
    grid-template-rows: 1fr auto;
    gap: 0 !important;
    height: 100%;
    overflow: hidden;
}
.mastering-engine.workflow-active .mastering-fs-right {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}
.mastering-engine.workflow-active .mastering-fs-bottom {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
}

/* Hide bypass bar & workspace picker inside the grid in workflow mode */
.mastering-engine.workflow-active .mastering-bypass-bar {
    display: none !important;
}

/* All tab panels → display:contents (invisible to layout) */
.mastering-engine.workflow-active .fs-tab-panel {
    display: contents !important;
}

/* All sections become workflow cards */
.mastering-engine.workflow-active .mastering-section.wf-card {
    position: relative;
    border: 1px solid rgba(var(--green-rgb), 0.15);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(var(--green-rgb), 0.05);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    min-height: 40px;
    display: flex;
    flex-direction: column;
}
.mastering-engine.workflow-active .mastering-section.wf-card:hover {
    border-color: rgba(var(--green-rgb), 0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 12px rgba(var(--green-rgb), 0.08);
    overflow: visible;
}

/* Card header: fixed height, never shrinks */
.mastering-engine.workflow-active .mastering-section.wf-card > .mastering-section-header {
    flex-shrink: 0;
    cursor: default;
}

/* Card body: fills remaining space, scrolls if needed */
.mastering-engine.workflow-active .mastering-section.wf-card > .mastering-section-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: none !important;
    opacity: 1 !important;
    padding: 6px 10px 8px !important;
}

/* Responsive macro grid inside cards */
.mastering-engine.workflow-active .mastering-section.wf-card .mastering-macro-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
}

/* Responsive grids inside cards */
.mastering-engine.workflow-active .mastering-section.wf-card .grid.grid-cols-2,
.mastering-engine.workflow-active .mastering-section.wf-card .grid.grid-cols-3,
.mastering-engine.workflow-active .mastering-section.wf-card .grid.grid-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
}

/* Smart preset grid responsive */
.mastering-engine.workflow-active .mastering-section.wf-card .smart-preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
}

/* Preset category tabs wrap */
.mastering-engine.workflow-active .mastering-section.wf-card .preset-cat-tabs {
    flex-wrap: wrap !important;
}

/* Edge resize handles still need to be visible on hover */
.mastering-engine.workflow-active .mastering-section.wf-card:hover > .wf-edge {
    z-index: 20;
}

/* Drag handle */
.wf-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 100%;
    cursor: grab;
    color: rgba(var(--green-rgb), 0.3);
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    border-radius: 3px;
    margin-right: 4px;
}
.wf-drag-handle:hover {
    color: rgba(var(--green-rgb), 0.7);
    background: rgba(var(--green-rgb), 0.06);
}
.wf-drag-handle:active {
    cursor: grabbing;
    color: var(--green);
}

/* Edge resize arrows — top, bottom, left, right */
.wf-edge {
    position: absolute;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    color: rgba(var(--green-rgb), 0.4);
}
.mastering-section.wf-card:hover .wf-edge { opacity: 1; }

.wf-edge-top {
    top: -6px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 12px; cursor: n-resize;
    border-radius: 4px 4px 0 0;
    background: rgba(var(--green-rgb), 0.06);
}
.wf-edge-bottom {
    bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 12px; cursor: s-resize;
    border-radius: 0 0 4px 4px;
    background: rgba(var(--green-rgb), 0.06);
}
.wf-edge-left {
    left: -6px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 32px; cursor: w-resize;
    border-radius: 4px 0 0 4px;
    background: rgba(var(--green-rgb), 0.06);
}
.wf-edge-right {
    right: -6px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 32px; cursor: e-resize;
    border-radius: 0 4px 4px 0;
    background: rgba(var(--green-rgb), 0.06);
}
.wf-edge:hover {
    background: rgba(var(--green-rgb), 0.15);
    color: var(--green);
}
.wf-edge i, .wf-edge svg { width: 10px; height: 10px; }

/* Active drag/resize state */
.mastering-section.wf-dragging {
    opacity: 0.85;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(var(--green-rgb), 0.15) !important;
    border-color: rgba(var(--green-rgb), 0.4) !important;
    z-index: 100;
}
.mastering-section.wf-resizing {
    border-color: rgba(255, 170, 0, 0.4) !important;
    box-shadow: 0 4px 20px rgba(255, 170, 0, 0.12) !important;
}

/* Snap ghost indicator (shows where panel will land) */
.wf-snap-ghost {
    border: 2px dashed rgba(var(--green-rgb), 0.3);
    border-radius: 8px;
    background: rgba(var(--green-rgb), 0.04);
    pointer-events: none;
    z-index: 0;
    transition: grid-column 0.1s, grid-row 0.1s;
}

/* ====== Minimize button on panel headers ====== */
.wf-minimize-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(var(--green-rgb), 0.06);
    border: 1px solid rgba(var(--green-rgb), 0.12);
    color: rgba(var(--green-rgb), 0.4);
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wf-minimize-btn:hover {
    background: rgba(var(--green-rgb), 0.12);
    color: var(--green);
    border-color: rgba(var(--green-rgb), 0.3);
}

/* ====== Left Panel Workspace Bar (Grid mode) ====== */
.wf-left-ws-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.06);
    flex-shrink: 0;
}
.wf-left-ws-row {
    display: flex;
    gap: 4px;
}
.wf-left-ws-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    height: 26px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid rgba(var(--green-rgb), 0.1);
    cursor: pointer;
    background: rgba(var(--green-rgb), 0.04);
    color: rgba(var(--green-rgb), 0.45);
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    white-space: nowrap;
    justify-content: center;
}
.wf-left-ws-btn:hover {
    background: rgba(var(--green-rgb), 0.1);
    border-color: rgba(var(--green-rgb), 0.25);
    color: var(--green);
}
.wf-left-ws-btn.wf-left-ws-back {
    background: rgba(var(--green-rgb), 0.06);
}
.wf-left-ws-btn.wf-left-ws-sidebar {
    background: rgba(var(--green-rgb), 0.06);
}

/* ====== Sidebar / Edit Toggle Buttons (Grid mode toolbar, hidden when bypass bar hidden) ====== */
.wf-edit-toggle, .wf-sidebar-toggle {
    display: none; /* hidden — controls moved to left panel */
    align-items: center; gap: 4px;
    height: 24px; padding: 0 8px;
    border-radius: 4px; border: 1px solid rgba(var(--green-rgb), 0.15);
    cursor: pointer;
    background: rgba(var(--green-rgb), 0.06);
    color: rgba(var(--green-rgb), 0.5);
    font-family: inherit; font-size: 8px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: all 0.15s; white-space: nowrap;
}
.mastering-engine.workflow-active .wf-edit-toggle,
.mastering-engine.workflow-active .wf-sidebar-toggle { display: none; /* now in left panel */ }
.wf-edit-toggle:hover, .wf-sidebar-toggle:hover {
    background: rgba(var(--green-rgb), 0.12);
    border-color: rgba(var(--green-rgb), 0.3);
    color: var(--green);
}

/* ====== Workflow Sidebar Module List — fixed right edge ====== */
.wf-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 240px;
    height: 100vh;
    display: none;
    flex-direction: column;
    background: rgba(6, 8, 12, 0.96);
    border-left: 1px solid rgba(var(--green-rgb), 0.08);
    z-index: 9990;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease;
    transform: translateX(100%);
}
.wf-sidebar.wf-sidebar-visible {
    display: flex;
    transform: translateX(0);
}
.wf-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.06);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
}
.wf-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(var(--green-rgb), 0.4);
}
.wf-sidebar-close {
    background: none;
    border: none;
    color: rgba(var(--green-rgb), 0.25);
    cursor: pointer;
    padding: 2px;
    transition: color 0.15s;
}
.wf-sidebar-close:hover { color: var(--green); }
.wf-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--green-rgb), 0.1) transparent;
}
.wf-sidebar-list::-webkit-scrollbar { width: 3px; }
.wf-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.wf-sidebar-list::-webkit-scrollbar-thumb { background: rgba(var(--green-rgb), 0.12); border-radius: 3px; }
/* Sidebar module item */
.wf-sb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.2s;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.03);
    user-select: none;
}
.wf-sb-item:hover {
    background: rgba(var(--green-rgb), 0.05);
}
.wf-sb-item .wf-sb-icon {
    flex-shrink: 0;
    color: var(--green);
    opacity: 0.5;
    width: 14px;
    height: 14px;
}
.wf-sb-item .wf-sb-icon i, .wf-sb-item .wf-sb-icon svg {
    width: 14px !important;
    height: 14px !important;
}
.wf-sb-item .wf-sb-label {
    flex: 1;
    font-size: 10px;
    font-weight: 600;
    color: rgba(var(--green-rgb), 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}
.wf-sb-badge {
    font-size: 6.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1.5px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1;
}
.wf-sb-item .wf-sb-chevron {
    flex-shrink: 0;
    color: rgba(var(--green-rgb), 0.15);
    transition: color 0.15s, transform 0.15s;
}
.wf-sb-item .wf-sb-chevron i, .wf-sb-item .wf-sb-chevron svg {
    width: 12px !important;
    height: 12px !important;
}
.wf-sb-item:hover .wf-sb-chevron {
    color: rgba(var(--green-rgb), 0.5);
}
/* Placed state — dim the item when it's already on the grid */
.wf-sb-item.wf-sb-placed {
    opacity: 0.3;
    background: rgba(var(--green-rgb), 0.02);
}
.wf-sb-item.wf-sb-placed .wf-sb-label {
    text-decoration: line-through;
    text-decoration-color: rgba(var(--green-rgb), 0.2);
}
.wf-sb-item.wf-sb-placed .wf-sb-chevron {
    transform: rotate(90deg);
    color: var(--green);
    opacity: 0.4;
}
.wf-sb-item.wf-sb-placed:hover {
    opacity: 0.55;
    background: rgba(255, 60, 60, 0.04);
}
.wf-sb-item.wf-sb-placed:hover .wf-sb-label {
    color: rgba(255, 80, 80, 0.7);
}

/* Empty grid placeholder text */
.mastering-engine.workflow-active .mastering-fs-right::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: rgba(var(--green-rgb), 0.15);
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 0;
}

/* ====== Minimized Panels Dock ====== */
.wf-minimized-dock {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 200;
    background: rgba(10, 10, 14, 0.92);
    border: 1px solid rgba(var(--green-rgb), 0.12);
    border-right: none;
    border-radius: 10px 0 0 10px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 6px 0;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wf-dock-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(var(--green-rgb), 0.4);
    padding: 6px 14px 4px;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.08);
}
.wf-dock-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(var(--green-rgb), 0.04);
}
.wf-dock-item:last-child { border-bottom: none; }
.wf-dock-item:hover {
    background: rgba(var(--green-rgb), 0.06);
}
.wf-dock-grip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.3;
}
.wf-dock-grip span {
    display: block;
    width: 10px;
    height: 2px;
    background: rgba(var(--green-rgb), 0.5);
    border-radius: 1px;
}
.wf-dock-label {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-dock-ai {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(138, 79, 255, 0.15);
    color: rgba(180, 140, 255, 0.8);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.wf-dock-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(var(--green-rgb), 0.08);
    border: 1px solid rgba(var(--green-rgb), 0.15);
    color: rgba(var(--green-rgb), 0.5);
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.wf-dock-item:hover .wf-dock-add {
    background: rgba(var(--green-rgb), 0.15);
    color: var(--green);
}
.wf-dock-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

/* Grid background pattern when in workflow mode */
.mastering-engine.workflow-active .mastering-fs-right::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(var(--green-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--green-rgb), 0.03) 1px, transparent 1px);
    background-size: calc(100% / 16) 48px;
}
.mastering-engine.workflow-active .mastering-fs-right {
    position: relative;
}

/* Ensure workflow cards sit above grid background */
.mastering-engine.workflow-active .mastering-section {
    z-index: 1;
}
/* Hide all sections that are not placed as grid cards */
.mastering-engine.workflow-active .mastering-section:not(.wf-card) {
    display: none !important;
}

/* Hide chevron in grid cards (collapse is disabled) */
.mastering-engine.workflow-active .mastering-section.wf-card .mastering-chevron {
    display: none;
}

/* Grid cards are always expanded — override collapsed body */
.mastering-engine.workflow-active .mastering-section.wf-card .mastering-section-body {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    padding: 6px 10px 8px !important;
    overflow-y: auto;
}

/* Sticky transport bar for mastering on mobile/scroll */
.mastering-sticky-transport {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid rgba(var(--green-rgb, 34,217,86), 0.1);
    padding: 6px 0;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.2s;
}
.mastering-sticky-transport.stuck {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Bypass button */
.bypass-btn {
    position: relative;
    transition: all 0.2s ease;
}
.bypass-btn.active {
    background: rgba(255, 80, 80, 0.2) !important;
    border-color: rgba(255, 80, 80, 0.5) !important;
    color: #ff5050 !important;
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.25);
}
.bypass-btn.active i { color: #ff5050 !important; }

/* Header bypass button */
#tool-bypass-btn {
    transition: all 0.2s ease;
    position: relative;
}
#tool-bypass-btn.bypass-header-active {
    background: rgba(255, 80, 80, 0.2) !important;
    border-color: rgba(255, 80, 80, 0.5) !important;
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.25);
}
#tool-bypass-btn.bypass-header-active i { color: #ff5050 !important; }

/* Frozen controls (when bypass is on) */
.mastering-frozen {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.5);
    transition: opacity 0.3s, filter 0.3s;
    user-select: none;
}

/* Tool textarea */
.tool-textarea {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    color: color-mix(in srgb, var(--green) 80%, transparent);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
}
.tool-textarea:focus { border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.tool-textarea::placeholder { color: color-mix(in srgb, var(--green) 20%, transparent); }
.tool-textarea[readonly] { background: color-mix(in srgb, var(--green) 5%, transparent); color: color-mix(in srgb, var(--green) 65%, transparent); }

/* Tool action buttons */
.btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    text-transform: uppercase;
    border: 1px solid;
    background: transparent;
    position: relative;
    overflow: hidden;
}
.btn-tool::before {
    content: ''; position: absolute; inset: 0;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}
.btn-tool:hover::before { opacity: 1; }
.btn-tool > * { position: relative; z-index: 1; }
.btn-tool i, .btn-tool svg { pointer-events: none; }
.btn-tool.cyan {
    border-color: color-mix(in srgb, var(--green) 15%, transparent);
    background: color-mix(in srgb, var(--green) 6%, transparent);
    color: color-mix(in srgb, var(--green) 70%, transparent);
}
.btn-tool.cyan::before { background: color-mix(in srgb, var(--green) 8%, transparent); }
.btn-tool.cyan:hover { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.btn-tool.cyan:disabled { opacity: 0.3; pointer-events: none; }
.btn-tool.violet {
    border-color: rgba(139,92,246,0.2);
    background: rgba(139,92,246,0.08);
    color: rgba(139,92,246,0.7);
}
.btn-tool.violet::before { background: rgba(139,92,246,0.08); }
.btn-tool.violet:hover { background: rgba(139,92,246,0.15); color: #a78bfa; border-color: rgba(139,92,246,0.35); }
.btn-tool.rose {
    border-color: rgba(244,63,94,0.2);
    background: rgba(244,63,94,0.08);
    color: rgba(244,63,94,0.7);
}
.btn-tool.rose::before { background: rgba(244,63,94,0.08); }
.btn-tool.rose:hover { background: rgba(244,63,94,0.15); color: #fb7185; }
.btn-tool.amber {
    border-color: rgba(245,158,11,0.2);
    background: rgba(245,158,11,0.08);
    color: rgba(245,158,11,0.7);
}
.btn-tool.amber::before { background: rgba(245,158,11,0.08); }
.btn-tool.amber:hover { background: rgba(245,158,11,0.15); color: #fbbf24; }
/* Active/pressed state for all btn-tool variants */
.btn-tool:active:not(:disabled) { transform: scale(0.97); }
/* Live preview active button state */
.btn-tool.cyan.active {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--green) 20%, transparent);
}
/* Touch devices: disable sticky hover states */
@media (hover: none) {
    .btn-tool:hover { background: unset; color: unset; border-color: unset; }
    .btn-tool.cyan:hover { background: color-mix(in srgb, var(--green) 6%, transparent); color: color-mix(in srgb, var(--green) 70%, transparent); border-color: color-mix(in srgb, var(--green) 15%, transparent); }
    .btn-tool.rose:hover { background: rgba(244,63,94,0.08); color: rgba(244,63,94,0.7); border-color: rgba(244,63,94,0.2); }
    .btn-tool.amber:hover { background: rgba(245,158,11,0.08); color: rgba(245,158,11,0.7); border-color: rgba(245,158,11,0.2); }
    .btn-tool.violet:hover { background: rgba(139,92,246,0.08); color: rgba(139,92,246,0.7); border-color: rgba(139,92,246,0.2); }
    .eq-preset-btn:hover:not(.active) { background: transparent; color: color-mix(in srgb, var(--green) 60%, transparent); border-color: var(--border); }
}

/* Tool drop zone */
.tool-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 16px;
    border: 2px dashed color-mix(in srgb, var(--green) 12%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--green) 2%, transparent);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    min-height: 80px;
}
.tool-drop:hover { border-color: color-mix(in srgb, var(--green) 25%, transparent); background: color-mix(in srgb, var(--green) 4%, transparent); }
.tool-drop.drag-over { border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }

/* Tool file info */
.tool-file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
}
.tool-file-info span { font-size: 10px; color: color-mix(in srgb, var(--green) 60%, transparent); font-family: var(--mono); }

/* Canvas for signing/drawing */
.tool-canvas {
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 4px;
    background: rgba(10,10,10,0.8);
    cursor: crosshair;
}

/* Stats row */
.tool-stats {
    display: flex;
    gap: 16px;
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    font-family: var(--mono);
    flex-wrap: wrap;
}
.tool-stats .stat-value { color: color-mix(in srgb, var(--green) 70%, transparent); font-weight: 700; }

/* Color picker in tools */
.tool-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tool-color-row input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; height: 28px;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.tool-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.tool-color-row input[type="color"]::-webkit-color-swatch { border-radius: 2px; border: none; }

/* SRT table */
.srt-row {
    display: grid;
    grid-template-columns: 60px 60px 1fr 32px;
    gap: 4px;
    align-items: center;
}
.srt-input {
    width: 100%;
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    color: color-mix(in srgb, var(--green) 70%, transparent);
    font-size: 10px;
    font-family: var(--mono);
    outline: none;
}
.srt-input:focus { border-color: color-mix(in srgb, var(--green) 30%, transparent); }

/* Video preview */
.tool-video-preview {
    width: 100%;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    background: black;
    max-height: 240px;
}

/* Audio player */
.tool-audio-player {
    width: 100%;
    height: 36px;
    border-radius: 4px;
    filter: sepia(1) hue-rotate(80deg) brightness(0.8);
}

/* ====== THEMED TOOL PREVIEWS ====== */

/* -- Global tool audio/video/img theming -- */
#tool-panel-body audio,
.output-preview audio,
.convert-result-card audio {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    background: color-mix(in srgb, var(--green) 4%, transparent);
    outline: none;
}
#tool-panel-body audio::-webkit-media-controls-panel,
.output-preview audio::-webkit-media-controls-panel,
.convert-result-card audio::-webkit-media-controls-panel {
    background: color-mix(in srgb, var(--green) 6%, transparent);
}

#tool-panel-body video,
.output-preview video,
.convert-result-card video {
    width: 100%;
    max-height: 280px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    background: #000;
    object-fit: contain;
}

#tool-panel-body img[id*="out"],
#tool-panel-body img[id*="gif"],
.output-preview img,
.convert-result-card img {
    width: 100%;
    max-height: 280px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    background: color-mix(in srgb, var(--green) 2%, transparent);
    object-fit: contain;
}

/* -- Output Preview Card -- */
.output-preview {
    position: relative;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    padding: 10px;
    overflow: hidden;
    animation: previewReveal 0.4s var(--expo) both;
}
.output-preview::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 6%, transparent), transparent 60%);
    pointer-events: none;
}
@keyframes previewReveal {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Preview Badge -- */
.preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 9px;
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
}
.preview-badge i, .preview-badge svg { width: 10px; height: 10px; }

/* -- Waveform Canvas -- */
.preview-waveform {
    width: 100%;
    height: 48px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    margin-bottom: 8px;
    display: block;
}

/* -- Preview Audio (inside output card) -- */
.preview-audio {
    width: 100%;
    height: 36px;
    border-radius: 4px;
}

/* -- Preview Video -- */
.preview-video {
    width: 100%;
    max-height: 260px;
    border-radius: 6px;
    background: #000;
    object-fit: contain;
}

/* -- Preview Image -- */
.preview-image {
    width: 100%;
    max-height: 260px;
    border-radius: 6px;
    object-fit: contain;
    background: color-mix(in srgb, var(--green) 3%, transparent);
}

/* -- Result Info Bar -- */
.result-info-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    animation: previewReveal 0.35s var(--expo) both;
}
.result-info-bar i, .result-info-bar svg { flex-shrink: 0; color: var(--green); opacity: 0.7; }

/* -- Download Result Button -- */
.btn-download-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-top: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--green);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-download-result::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.btn-download-result:hover::before { transform: translateX(100%); }
.btn-download-result:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 16px color-mix(in srgb, var(--green) 40%, transparent);
    transform: translateY(-1px);
}
.btn-download-result:active { transform: scale(0.98) translateY(0); }
.btn-download-result i, .btn-download-result svg { width: 14px; height: 14px; }

/* -- Convert Result Card -- */
.convert-result-card {
    position: relative;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
    background: var(--glass);
    backdrop-filter: blur(12px);
    overflow: hidden;
    animation: previewReveal 0.5s var(--expo) both;
}
.convert-result-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 50%);
    pointer-events: none;
}
.convert-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
}
.convert-result-header i, .convert-result-header svg { color: var(--green); width: 16px; height: 16px; }
.convert-result-title {
    font-size: 12px;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--green);
}
.convert-result-meta {
    font-size: 10px;
    font-family: var(--mono);
    color: color-mix(in srgb, var(--green) 55%, transparent);
    margin-left: auto;
}
.convert-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.convert-stat {
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
}
.convert-stat-label {
    font-size: 8px;
    font-family: var(--mono);
    color: color-mix(in srgb, var(--green) 45%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.convert-stat-value {
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--green);
}
.convert-result-preview { margin-bottom: 12px; }
.convert-result-actions {
    display: flex;
    gap: 8px;
}
.convert-result-actions .btn-download-result { flex: 1; }
.convert-result-actions .btn-dismiss {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    background: color-mix(in srgb, var(--green) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.convert-result-actions .btn-dismiss:hover {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
}

/* Result panel (existing) */
.tool-result {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 14%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    animation: previewReveal 0.4s var(--expo) both;
}
.tool-result .result-label { font-size: 9px; color: color-mix(in srgb, var(--green) 40%, transparent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.tool-result .result-value { font-size: 12px; color: var(--green); font-weight: 700; font-family: var(--mono); }

/* Style existing t-dl download buttons in tool result panels */
.tool-result #t-dl,
.tool-result [id^="t-dl"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    margin-top: 6px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--green);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.tool-result #t-dl:hover,
.tool-result [id^="t-dl"]:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 14px color-mix(in srgb, var(--green) 35%, transparent);
    transform: translateY(-1px);
}
.tool-result #t-dl:active,
.tool-result [id^="t-dl"]:active { transform: scale(0.98); }

/* Style existing t-action buttons in tool panels for consistency */
.tool-result + .btn-tool,
#t-action { transition: filter 0.2s ease, transform 0.15s ease; }

/* Enhance tool input preview area */
#t-preview audio,
#t-preview video {
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
}
#t-preview img {
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    background: color-mix(in srgb, var(--green) 2%, transparent);
}

/* -- Light theme preview overrides -- */
[data-theme="chrome"] .output-preview,
[data-theme="silver"] .output-preview,
[data-theme="noir"] .output-preview,
[data-theme="cream"] .output-preview,
[data-theme="paper"] .output-preview,
[data-theme="chrome"] .convert-result-card,
[data-theme="silver"] .convert-result-card,
[data-theme="noir"] .convert-result-card,
[data-theme="cream"] .convert-result-card,
[data-theme="paper"] .convert-result-card {
    border-color: color-mix(in srgb, var(--green) 22%, transparent);
    background: color-mix(in srgb, var(--green) 4%, white);
}
[data-theme="chrome"] .btn-download-result,
[data-theme="silver"] .btn-download-result,
[data-theme="noir"] .btn-download-result,
[data-theme="cream"] .btn-download-result,
[data-theme="paper"] .btn-download-result {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
[data-theme="chrome"] #tool-panel-body audio,
[data-theme="silver"] #tool-panel-body audio,
[data-theme="noir"] #tool-panel-body audio,
[data-theme="cream"] #tool-panel-body audio,
[data-theme="paper"] #tool-panel-body audio {
    background: color-mix(in srgb, var(--green) 4%, white);
    border-color: color-mix(in srgb, var(--green) 18%, transparent);
}
[data-theme="chrome"] #tool-panel-body video,
[data-theme="silver"] #tool-panel-body video,
[data-theme="noir"] #tool-panel-body video,
[data-theme="cream"] #tool-panel-body video,
[data-theme="paper"] #tool-panel-body video {
    border-color: color-mix(in srgb, var(--green) 18%, transparent);
}

/* PDF page list */
.pdf-page-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    background: color-mix(in srgb, var(--green) 2%, transparent);
}
.pdf-page-item span { font-size: 10px; color: color-mix(in srgb, var(--green) 60%, transparent); font-family: var(--mono); }
.pdf-page-item input[type="checkbox"] { accent-color: var(--green); }

/* Regex match highlight */
.regex-match { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); padding: 1px 2px; border-radius: 2px; }
.regex-no-match { background: rgba(255,60,60,0.1); color: rgba(255,60,60,0.6); padding: 1px 2px; border-radius: 2px; }
.sfx-mute-btn.muted:hover { color: rgba(255,60,60,0.8); }

/* Sound wave micro-animation */
@keyframes soundPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
    50% { box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 15%, transparent); }
}
.sfx-mute-btn:not(.muted):hover { animation: soundPulse 1.2s ease infinite; }

/* ====== RESPONSIVE — MOBILE-FIRST ====== */

/* --- Extra-small: 0–380px --- */
@media (max-width: 380px) {
    main { padding-left: 10px; padding-right: 10px; }
    .hero-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
    .section-title { font-size: clamp(1.3rem, 6vw, 1.8rem); }
    .glass-card { padding: 10px; }
    .tool-card { padding: 10px; }
    .format-card { padding: 10px; }
    .btn-convert-main { padding: 10px; font-size: 11px; letter-spacing: 0.04em; }
    .btn-primary { padding: 7px 14px; font-size: 10px; }
    .drop-zone { padding: 24px 16px !important; }
    .upload-icon-wrap { width: 44px; height: 44px; margin-bottom: 10px; }
    .step-dot { width: 22px; height: 22px; font-size: 8px; }
    .step-label { font-size: 7px; }
    .step-connector { width: 20px; margin: 0 3px; }
    .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid.grid-cols-3 { grid-template-columns: 1fr 1fr !important; }
    .grid.grid-cols-5 { grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .eq-slider { height: 50px; width: 16px; }
    .privacy-card { padding: 10px; gap: 10px; }
    .privacy-icon { width: 30px; height: 30px; }
    .compress-tab { padding: 6px 10px; font-size: 9px; gap: 3px; }
    .tool-cat-btn { padding: 5px 8px; font-size: 9px; gap: 3px; }
    .cat-count { font-size: 7px; min-width: 14px; height: 12px; }
    .tool-mini { padding: 8px 10px; gap: 6px; }
    .tool-mini span { font-size: 9px; }
    .tool-mini i, .tool-mini svg { width: 14px; height: 14px; }
    .pipeline-overlay { right: 4px; width: calc(100vw - 8px); top: 56px; max-width: none; }
    .theme-dropdown { min-width: 170px; right: -40px; }
    #toast-container { left: 10px; right: 10px; bottom: 10px; }
    #toast-container > div { max-width: 100%; }
    .nav-pill { padding: 4px 8px; font-size: 9px; }
    .section-badge { font-size: 8px; padding: 2px 8px; }
    .format-tag { padding: 3px 7px; font-size: 8px; }
}

/* --- Small: 0–640px --- */
@media (max-width: 640px) {
    .pipeline-overlay { right: 4px; width: calc(100vw - 8px); top: 58px; max-width: none; }
    .format-card { padding: 12px; }
    .tool-card { padding: 14px; }
    .btn-convert-main { padding: 12px; font-size: 12px; }
    .step-connector { width: 28px; }
    .drop-zone { padding: 28px 20px !important; }
    .eq-slider { height: 60px; }
    .grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .flex-wrap > .btn-tool { min-width: 42px; padding: 6px 8px; font-size: 9px; }
    #t-file-list > div { font-size: 9px; }
    /* Compress result: 3-col → 2-col on small */
    #compress-result .grid-cols-3 { grid-template-columns: 1fr 1fr; }
    #compress-result .grid-cols-3 > :last-child { grid-column: span 2; }
    /* Theme dropdown position fix */
    .theme-dropdown { right: -20px; min-width: 190px; max-height: 60vh; }
    /* Toast container */
    #toast-container { left: 12px; right: 12px; bottom: 12px; }
    #toast-container > div { max-width: 100%; }
    /* Step indicators: scale down */
    .step-dot { width: 24px; height: 24px; font-size: 8px; }
    .step-label { font-size: 7px; letter-spacing: 0.08em; }
    /* Privacy cards stack */
    .privacy-card { padding: 11px 12px; }
    /* Footer */
    footer .flex { flex-direction: column; text-align: center; gap: 8px; }
    /* Nav spacing */
    .navbar-glass .max-w-6xl { padding-left: 12px; padding-right: 12px; }
    /* Hero text padding */
    .hero-title { word-break: break-word; }
    /* File name truncation */
    #file-name, #compress-file-name { max-width: 180px; }
    /* Tool panel mobile */
    .tool-panel-overlay .max-w-3xl { padding-left: 12px; padding-right: 12px; }
    .tool-panel-overlay .glass-card { padding: 14px; }
    /* Format picker arrow vertical */
    .arrow-circle { width: 28px; height: 28px; }
    /* Reduce background animations intensity on mobile */
    [data-theme="matrix"] body::after,
    [data-theme="amber"] body::after,
    [data-theme="dracula"] body::after,
    [data-theme="sunset"] body::after,
    [data-theme="ocean"] body::after,
    [data-theme="bloodmoon"] body::after,
    [data-theme="synthwave"] body::after { opacity: 0.03; }
    /* Light themes: soften backgrounds on mobile */
    [data-theme="chrome"] body::before,
    [data-theme="chrome"] body::after,
    [data-theme="silver"] body::before,
    [data-theme="silver"] body::after,
    [data-theme="noir"] body::before,
    [data-theme="noir"] body::after,
    [data-theme="cream"] body::before,
    [data-theme="cream"] body::after,
    [data-theme="paper"] body::before,
    [data-theme="paper"] body::after { animation: none !important; }
    /* Reduce matrix rain on mobile for performance */
    #matrix-rain { opacity: 0.03; }
    /* Simpler scanlines on mobile */
    .scanline-overlay { opacity: 0.5; }
    /* Reduce body::before animations for performance */
    [data-theme] body::before { animation-duration: 20s !important; }
}

/* --- Medium: 768px+ --- */
@media (min-width: 768px) {
    .pipeline-overlay { right: 16px; max-width: 340px; }
    .theme-dropdown { min-width: 200px; }
}

/* --- Large: 1024px+ --- */
@media (min-width: 1024px) {
    .step-connector { width: 80px; }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 0.2; }

:focus-visible { outline: 2px solid color-mix(in srgb, var(--green) 50%, transparent); outline-offset: 2px; border-radius: 2px; }
button:focus:not(:focus-visible) { outline: none; }
#tool-back-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

@media (hover: none) {
    .btn-primary:active, .btn-amber:active, .btn-tool:active,
    .btn-convert-main:active, .format-tag:active,
    .privacy-card:active, .tool-card:active {
        transform: scale(0.97) !important;
        transition-duration: 0.1s;
    }
}

/* ====== DJ TOOLS STYLES ====== */

/* Beat Maker — Channel Rack */
.bm-wrap { font-size: 0; }
.bm-rack { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--green) 20%, transparent) transparent; }
.bm-ch-row { min-height: 22px; }
.bm-ch-name { color: color-mix(in srgb, var(--green) 60%, transparent); font-size: 8px; letter-spacing: -0.02em; }

/* Mute / Solo buttons */
.bm-mute, .bm-solo {
    width: 16px; height: 16px; border-radius: 3px; padding: 0; line-height: 16px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    background: transparent; color: color-mix(in srgb, var(--green) 35%, transparent);
    font-weight: 700; font-family: inherit; transition: all 0.15s ease;
}
.bm-mute:hover, .bm-solo:hover { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.bm-muted { background: #e53e3e !important; color: #fff !important; border-color: #e53e3e !important; box-shadow: 0 0 6px rgba(229,62,62,0.3); }
.bm-soloed { background: #ecc94b !important; color: #1a202c !important; border-color: #ecc94b !important; box-shadow: 0 0 6px rgba(236,201,75,0.3); }

/* Grid cells */
.dm-cell {
    width: 20px; height: 20px; min-width: 20px;
    border-radius: 3px; border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    font-size: 0; touch-action: manipulation; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.dm-cell:hover { background: color-mix(in srgb, var(--green) 12%, transparent); }
.dm-cell-active {
    background: color-mix(in srgb, var(--green) 50%, transparent) !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 6px color-mix(in srgb, var(--green) 30%, transparent);
}
.dm-cell-accent {
    background: var(--green) !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 10px var(--green-glow), 0 0 4px var(--green);
}
.dm-cell-ghost {
    background: color-mix(in srgb, var(--green) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--green) 30%, transparent) !important;
    box-shadow: none; opacity: 0.7;
}

/* Smaller cells for 32/64/96/128 steps */
.dm-cell.bm-cell-sm { width: 14px; height: 14px; min-width: 14px; border-radius: 2px; }
.dm-cell.bm-cell-xs { width: 10px; height: 10px; min-width: 10px; border-radius: 2px; }
.dm-cell.bm-cell-xxs { width: 7px; height: 7px; min-width: 7px; border-radius: 1px; }
.dm-step-ind.bm-cell-sm { width: 14px !important; }
.dm-step-ind.bm-cell-xs { width: 10px !important; }
.dm-step-ind.bm-cell-xxs { width: 7px !important; }

/* ====== BEAT MAKER FULLSCREEN & GRID SYSTEM ====== */
.bm-fs-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; background: color-mix(in srgb, var(--bg) 80%, var(--green) 5%);
    border-bottom: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    flex-shrink: 0;
}
.bm-fs-toolbar.hidden { display: none !important; }
.bm-ws-btn {
    font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 4px; cursor: pointer; border: 1px solid transparent;
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    color: var(--text-secondary); transition: all 0.2s;
}
.bm-ws-btn:hover { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--text-primary); }
.bm-ws-btn.active, .bm-ws-btn.bm-ws-accent {
    background: color-mix(in srgb, var(--green) 20%, transparent);
    color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.bm-ws-btn.active.bm-ws-accent {
    background: var(--green); color: var(--bg); box-shadow: 0 0 10px var(--green-glow);
}
#t-dm-exit-fs {
    margin-left: auto; font-size: 10px; padding: 4px 10px; border-radius: 4px;
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    color: var(--text-secondary); cursor: pointer; border: none; transition: all 0.2s;
}
#t-dm-exit-fs:hover { background: color-mix(in srgb, var(--red, #ff4444) 20%, transparent); color: var(--red, #ff4444); }

/* Grid active mode */
.bm-wrap.bm-grid-active {
    display: grid !important;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-rows: 48px;
    gap: 6px;
    padding: 6px;
    align-content: start;
    overflow-y: auto;
    flex: 1;
}
.bm-wrap.bm-grid-active .bm-fs-toolbar {
    grid-column: 1 / -1;
    grid-row: auto;
}

/* Section cards in grid mode */
.bm-wf-card {
    background: color-mix(in srgb, var(--bg) 95%, var(--green) 3%);
    border: 1px solid color-mix(in srgb, var(--green) 12%, transparent);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
}
.bm-wf-card .bm-section-header {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; background: color-mix(in srgb, var(--green) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--green); flex-shrink: 0; cursor: default; user-select: none;
}
.bm-wf-card .bm-section-header .wf-drag-handle { cursor: grab; opacity: 0.4; transition: opacity 0.2s; }
.bm-wf-card .bm-section-header .wf-drag-handle:hover { opacity: 1; }
.bm-wf-card .bm-section-body {
    flex: 1; overflow: auto; padding: 8px;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--green) 20%, transparent) transparent;
}
.bm-wf-card .wf-minimize-btn {
    margin-left: auto; background: none; border: none; color: var(--text-secondary);
    cursor: pointer; font-size: 12px; padding: 0 4px; opacity: 0.5; transition: opacity 0.2s;
}
.bm-wf-card .wf-minimize-btn:hover { opacity: 1; color: var(--green); }

/* Edges for resizing */
.bm-wf-card .wf-edge { position: absolute; z-index: 5; }
.bm-wf-card .wf-edge-top { top: -2px; left: 0; right: 0; height: 5px; cursor: n-resize; }
.bm-wf-card .wf-edge-bottom { bottom: -2px; left: 0; right: 0; height: 5px; cursor: s-resize; }
.bm-wf-card .wf-edge-left { left: -2px; top: 0; bottom: 0; width: 5px; cursor: w-resize; }
.bm-wf-card .wf-edge-right { right: -2px; top: 0; bottom: 0; width: 5px; cursor: e-resize; }

/* Drag/resize states */
.bm-wf-card.wf-dragging { opacity: 0.7; z-index: 100; }
.bm-wf-card.wf-resizing { z-index: 100; border-color: var(--green); }
.bm-wrap .wf-snap-ghost {
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--green) 30%, transparent);
    border-radius: 8px; pointer-events: none; z-index: 0;
}

/* Minimized dock (reuse mastering dock classes) */
.bm-minimized-dock { grid-column: 1 / -1; }

/* Workspace presets (non-grid) */
.bm-wrap[data-bm-ws="sequencer"]:not(.bm-grid-active) .bm-section[data-bm-module="ailab"],
.bm-wrap[data-bm-ws="sequencer"]:not(.bm-grid-active) .bm-section[data-bm-module="masterfx"],
.bm-wrap[data-bm-ws="sequencer"]:not(.bm-grid-active) .bm-section[data-bm-module="presets"],
.bm-wrap[data-bm-ws="sequencer"]:not(.bm-grid-active) .bm-section[data-bm-module="songmode"] { display: none; }
.bm-wrap[data-bm-ws="mixer"]:not(.bm-grid-active) .bm-section[data-bm-module="ailab"],
.bm-wrap[data-bm-ws="mixer"]:not(.bm-grid-active) .bm-section[data-bm-module="presets"],
.bm-wrap[data-bm-ws="mixer"]:not(.bm-grid-active) .bm-section[data-bm-module="songmode"] { display: none; }
.bm-wrap[data-bm-ws="producer"]:not(.bm-grid-active) .bm-section[data-bm-module="export"] { display: none; }
.bm-wrap[data-bm-ws="minimal"]:not(.bm-grid-active) .bm-section:not([data-bm-module="sequencer"]):not([data-bm-module="transport"]):not([data-bm-module="controls"]) { display: none; }

/* Section headers hidden when NOT in grid/fullscreen */
.bm-section-header { display: none; }
.bm-wf-card .bm-section-header { display: flex; }

/* Step indicator */
.dm-step-ind { width: 20px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--green) 8%, transparent); transition: all 0.1s ease; }
.dm-step-active {
    background: var(--green) !important;
    box-shadow: 0 0 8px var(--green);
}

/* Pattern selector */
.bm-pat-btn.active { background: var(--green) !important; color: var(--bg) !important; box-shadow: 0 0 8px var(--green-glow); }

/* Channel sliders */
.dm-vol, .bm-pan, .bm-pitch { height: 3px; accent-color: var(--green); }

/* Pad / Sample styles */
.sample-pad {
    transition: all 0.15s ease;
    user-select: none;
}
.sample-pad:active { transform: scale(0.93); }
.pad-active {
    animation: pad-pulse 0.3s ease;
    box-shadow: inset 0 0 20px rgba(255,255,255,0.1), 0 0 10px color-mix(in srgb, var(--green) 25%, transparent);
}
@keyframes pad-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* ====== POWERED BY BRANDING ====== */
.powered-by {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--green) 30%, transparent);
    text-align: center;
    padding: 4px 0;
    transition: color var(--theme-transition) ease;
}
.powered-by-link {
    color: color-mix(in srgb, var(--green) 55%, transparent);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.12em;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    position: relative;
}
.powered-by-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--green);
    transition: width 0.3s ease;
}
.powered-by-link:hover {
    color: var(--green);
    text-shadow: 0 0 12px var(--green-glow);
}
.powered-by-link:hover::after {
    width: 100%;
}

/* ================================================================
   AUDIO TOOL UPGRADES — Mobile + Performance
   ================================================================ */

/* Drum Machine / Beat Maker — Mobile + Active states */
.dm-btn-active { background: var(--green) !important; color: var(--bg) !important; box-shadow: 0 0 10px var(--green-glow); animation: dm-pulse 1s ease infinite; }
@keyframes dm-pulse { 0%,100%{ box-shadow:0 0 10px var(--green-glow); } 50%{ box-shadow:0 0 18px var(--green-glow); } }

/* Beat Maker — Channel group colors */
.bm-ch-row[data-ch="0"] .bm-ch-name, .bm-ch-row[data-ch="1"] .bm-ch-name, .bm-ch-row[data-ch="2"] .bm-ch-name,
.bm-ch-row[data-ch="3"] .bm-ch-name, .bm-ch-row[data-ch="4"] .bm-ch-name, .bm-ch-row[data-ch="5"] .bm-ch-name,
.bm-ch-row[data-ch="6"] .bm-ch-name, .bm-ch-row[data-ch="7"] .bm-ch-name { color: color-mix(in srgb, #3b82f6 60%, var(--green)); }
.bm-ch-row[data-ch="8"] .bm-ch-name, .bm-ch-row[data-ch="9"] .bm-ch-name, .bm-ch-row[data-ch="10"] .bm-ch-name,
.bm-ch-row[data-ch="11"] .bm-ch-name, .bm-ch-row[data-ch="12"] .bm-ch-name, .bm-ch-row[data-ch="13"] .bm-ch-name { color: color-mix(in srgb, #f59e0b 60%, var(--green)); }
.bm-ch-row[data-ch="14"] .bm-ch-name, .bm-ch-row[data-ch="15"] .bm-ch-name, .bm-ch-row[data-ch="16"] .bm-ch-name,
.bm-ch-row[data-ch="17"] .bm-ch-name, .bm-ch-row[data-ch="18"] .bm-ch-name { color: color-mix(in srgb, #a855f7 60%, var(--green)); }
.bm-ch-row[data-ch="19"] .bm-ch-name, .bm-ch-row[data-ch="20"] .bm-ch-name, .bm-ch-row[data-ch="21"] .bm-ch-name,
.bm-ch-row[data-ch="22"] .bm-ch-name, .bm-ch-row[data-ch="23"] .bm-ch-name { color: color-mix(in srgb, #ec4899 60%, var(--green)); }

/* Beat Maker — Song mode slots */
.bm-song-slot { background: color-mix(in srgb, var(--green) 6%, transparent); border: 1px solid color-mix(in srgb, var(--green) 12%, transparent); border-radius: 3px; color: var(--green); }
.bm-song-slot:focus { border-color: var(--green); box-shadow: 0 0 6px var(--green-glow); }

/* Beat Maker — Fullscreen mode scrollbar */
.bm-wrap::-webkit-scrollbar { width: 6px; }
.bm-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--green) 25%, transparent); border-radius: 3px; }

@media (max-width: 640px) {
    .dm-cell { width: 16px !important; height: 16px !important; min-width: 16px; }
    .dm-cell.bm-cell-sm { width: 12px !important; height: 12px !important; min-width: 12px; }
    .dm-cell.bm-cell-xs { width: 8px !important; height: 8px !important; min-width: 8px; }
    .dm-step-ind { width: 16px !important; }
    #t-dm-grid { font-size: 7px; }
    #t-dm-grid .dm-row { gap: 1px !important; }
    #t-dm-indicator { gap: 1px !important; margin-left: 80px !important; }
    .dm-vol, .bm-pan, .bm-pitch { width: 28px !important; }
    .bm-mute, .bm-solo { width: 14px !important; height: 14px !important; font-size: 6px !important; line-height: 14px !important; }
    .bm-ch-name { width: 36px !important; font-size: 7px !important; }
    .bm-pat-btn { padding: 2px 5px !important; font-size: 8px !important; min-width: 18px !important; }
}

/* Sample Pad — touch-friendly */
.sample-pad { 
    touch-action: manipulation; 
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.sample-pad:active { transform: scale(0.94); }
.pad-active { 
    box-shadow: 0 0 16px var(--green-glow), inset 0 0 20px rgba(255,255,255,0.08) !important; 
    border-color: var(--green) !important;
}
.pad-active .pad-label { color: var(--green) !important; text-shadow: 0 0 8px var(--green-glow); }

/* DJ Mixer — deck styling */
.dj-deck {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}
.dj-deck-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green);
    text-shadow: 0 0 8px var(--green-glow);
    text-align: center;
    margin-bottom: 6px;
}
.dj-waveform {
    width: 100%;
    height: 48px;
    border-radius: 4px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    margin-bottom: 6px;
}
.dj-time {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    text-align: center;
    letter-spacing: 0.05em;
}
.dj-controls { display: flex; gap: 4px; justify-content: center; align-items: center; }
.dj-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.3);
    color: var(--green);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.dj-btn:hover { background: var(--green); color: #000; border-color: var(--green); box-shadow: 0 0 12px var(--green-glow); }
.dj-btn:active { transform: scale(0.92); }
.dj-btn.active { background: var(--green); color: #000; border-color: var(--green); box-shadow: 0 0 12px var(--green-glow); }
.dj-crossfader-track {
    position: relative;
    height: 36px;
    display: flex; align-items: center;
    padding: 4px 12px;
    margin: 4px 0;
}

/* EQ Preset buttons */
.eq-preset-btn {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    touch-action: manipulation;
}
.eq-preset-btn:hover, .eq-preset-btn.active {
    background: var(--green);
    color: #000;
    border-color: var(--green);
}

/* Autotune grid */
.at-key-btn {
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.2);
    color: color-mix(in srgb, var(--green) 50%, transparent);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    touch-action: manipulation;
}
.at-key-btn:hover { border-color: var(--green); color: var(--green); }
.at-key-btn.active { background: var(--green); color: #000; border-color: var(--green); box-shadow: 0 0 6px var(--green-glow); }

/* Producer Tag section */
.tag-preset {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.15);
    color: color-mix(in srgb, var(--green) 55%, transparent);
    font-family: var(--mono);
    font-size: 9px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    touch-action: manipulation;
}
.tag-preset:hover, .tag-preset.active {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: var(--green);
    color: var(--green);
}

/* EQ vertical sliders fix — cross-browser */
.eq-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    -webkit-appearance: slider-vertical;
    height: 80px;
    width: 20px;
}
@media (max-width: 640px) {
    .eq-slider { height: 60px; }
}

/* General tool mobile fixes */
@media (max-width: 640px) {
    .tool-drop { min-height: 80px; padding: 12px; }
    .sample-pad { aspect-ratio: 1 !important; min-height: 60px; }
    #t-pad-grid { gap: 6px !important; }
    .tool-video-preview { max-height: 200px; }
}

/* Performance: reduce repaints on frequent updates */
.dm-step-ind, .dm-cell, .sample-pad, .dj-btn, .bm-mute, .bm-solo { contain: layout style; }
#t-dm-grid { contain: layout; }

/* Light theme overrides for audio tools */
[data-theme="chrome"] .dm-cell-active,
[data-theme="silver"] .dm-cell-active,
[data-theme="noir"] .dm-cell-active,
[data-theme="cream"] .dm-cell-active,
[data-theme="paper"] .dm-cell-active { box-shadow: 0 0 4px color-mix(in srgb, var(--green) 40%, transparent); }
[data-theme="chrome"] .bm-muted, [data-theme="silver"] .bm-muted,
[data-theme="noir"] .bm-muted, [data-theme="cream"] .bm-muted,
[data-theme="paper"] .bm-muted { background: #c53030 !important; }
[data-theme="chrome"] .bm-soloed, [data-theme="silver"] .bm-soloed,
[data-theme="noir"] .bm-soloed, [data-theme="cream"] .bm-soloed,
[data-theme="paper"] .bm-soloed { background: #d69e2e !important; }
[data-theme="chrome"] .dj-deck,
[data-theme="silver"] .dj-deck,
[data-theme="noir"] .dj-deck,
[data-theme="cream"] .dj-deck,
[data-theme="paper"] .dj-deck { background: rgba(0,0,0,0.04); }
[data-theme="chrome"] .pad-active,
[data-theme="silver"] .pad-active,
[data-theme="noir"] .pad-active,
[data-theme="cream"] .pad-active,
[data-theme="paper"] .pad-active { box-shadow: 0 0 8px color-mix(in srgb, var(--green) 30%, transparent); }

/* ====== ACCESSIBILITY: REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    #matrix-rain { display: none !important; }
    .scanline-overlay { display: none !important; }
    .drop-zone-border-anim { display: none !important; }
    .loader-ring { animation: none !important; }
    .btn-convert-shimmer { display: none !important; }
    .format-marquee { animation: none !important; }
    .live-dot { animation: none !important; }
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* ====== TOOL PANEL TITLE OVERFLOW ====== */
#tool-panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 60px);
}

/* ====== LIGHT THEME TOOL CANVAS FIX ====== */
[data-theme="chrome"] .tool-canvas,
[data-theme="silver"] .tool-canvas,
[data-theme="noir"] .tool-canvas,
[data-theme="cream"] .tool-canvas,
[data-theme="paper"] .tool-canvas { background: rgba(0,0,0,0.06); }

/* ====== SONG MASTERING PRO UI ====== */
.mastering-section {
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    border-radius: 7px;
    overflow: hidden;
    transition: border-color 0.2s;
}
/* Expanded sections: allow slider thumb overflow */
.mastering-section:not(.collapsed) {
    overflow: visible;
}
.mastering-section:hover { border-color: rgba(var(--green-rgb, 34,217,86), 0.18); }

.mastering-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 10px; cursor: pointer; user-select: none;
    font-size: 9px; font-weight: 600; color: var(--green);
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: background 0.2s;
}
.mastering-section-header:hover { background: rgba(var(--green-rgb, 34,217,86), 0.04); }

.mastering-section-body {
    padding: 6px 10px 8px;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    max-height: 1000px; opacity: 1;
}
.mastering-section.collapsed .mastering-section-body {
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}

.mastering-chevron { transition: transform 0.2s; }
.mastering-section.collapsed .mastering-chevron { transform: rotate(-90deg); }

/* Preset grid */
.mastering-preset-grid { display: flex; flex-direction: column; gap: 8px; }
.mastering-preset-group { display: flex; flex-direction: column; gap: 3px; }
.mastering-preset-label {
    font-size: 8px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--green); opacity: 0.35; font-weight: 600;
}

/* ====== PRESET CATEGORY TABS ====== */
.preset-cat-tabs {
    display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px;
}
.preset-cat-tab {
    font-size: 8px; font-weight: 600; letter-spacing: 0.4px;
    padding: 3px 8px; border-radius: 5px; border: none;
    background: rgba(var(--green-rgb, 34,217,86), 0.06);
    color: var(--green); opacity: 0.5; cursor: pointer;
    transition: all 0.15s;
}
.preset-cat-tab:hover { opacity: 0.75; background: rgba(var(--green-rgb, 34,217,86), 0.12); }
.preset-cat-tab.active {
    opacity: 1; background: rgba(var(--green-rgb, 34,217,86), 0.15);
    box-shadow: 0 0 6px rgba(var(--green-rgb, 34,217,86), 0.1);
}
.preset-cat-panels { min-height: 32px; }
.preset-cat-panel { display: none; flex-wrap: wrap; gap: 4px; }
.preset-cat-panel.active { display: flex; }

/* ====== BYPASS BAR ====== */
.mastering-bypass-bar {
    display: flex; align-items: center; justify-content: center;
    padding: 5px 10px; margin-bottom: 2px;
    background: rgba(var(--green-rgb, 34,217,86), 0.04);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    border-radius: 6px; transition: all 0.2s;
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.mastering-bypass-bar.bypassed {
    background: rgba(239,68,68,0.06);
    border-color: rgba(239,68,68,0.15);
}
.mastering-bypass-toggle {
    display: flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    padding: 4px 10px; border-radius: 5px; border: none;
    background: rgba(var(--green-rgb, 34,217,86), 0.1);
    color: var(--green); cursor: pointer; transition: all 0.15s;
    text-transform: uppercase;
}
.mastering-bypass-toggle:hover { background: rgba(var(--green-rgb, 34,217,86), 0.18); }
.mastering-bypass-toggle.bypassed {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}
.bypass-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block; transition: background 0.2s;
}
.bypass-status-dot.on { background: #22c55e; box-shadow: 0 0 5px #22c55e88; }
.bypass-status-dot.off { background: #ef4444; box-shadow: 0 0 5px #ef444488; }
.bypass-status-label {
    font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
}

/* ====== INPUT ANALYSIS PANEL ====== */
.mastering-input-analysis {
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    border-radius: 8px; padding: 8px 10px;
    margin-top: 4px;
}
.input-analysis-title {
    display: flex; align-items: center; gap: 5px;
    font-size: 8px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.7px; color: var(--green); opacity: 0.5;
    margin-bottom: 6px;
}
.input-analysis-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.input-analysis-stat {
    display: flex; flex-direction: column; align-items: center;
    gap: 1px; padding: 4px; border-radius: 5px;
    background: rgba(0,0,0,0.12);
}
.input-analysis-label {
    font-size: 7px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--green); opacity: 0.4; font-weight: 600;
}
.input-analysis-value {
    font-size: 10px; font-weight: 700; color: var(--green);
    font-variant-numeric: tabular-nums;
}

/* ====== SMART PRESETS ====== */
.smart-preset-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.smart-preset-btn {
    display: flex; align-items: center; gap: 4px;
    font-size: 8px; font-weight: 600; padding: 5px 6px;
    border-radius: 5px; border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.1);
    background: rgba(var(--green-rgb, 34,217,86), 0.04);
    color: var(--green); cursor: pointer; transition: all 0.15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smart-preset-btn:hover {
    background: rgba(var(--green-rgb, 34,217,86), 0.12);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.2);
}
.smart-preset-btn.analyze {
    background: rgba(147,51,234,0.08);
    border-color: rgba(147,51,234,0.15);
    color: #a855f7;
    justify-content: center;
}
.smart-preset-btn.analyze:hover {
    background: rgba(147,51,234,0.15);
    border-color: rgba(147,51,234,0.25);
}
.smart-preset-btn.full-width {
    width: 100%;
    justify-content: center;
    font-size: 10px; padding: 7px 10px;
    margin-bottom: 4px;
}

/* Smart result box */
.smart-preset-result {
    margin-top: 6px; padding: 8px 10px;
    background: rgba(147,51,234,0.05);
    border: 1px solid rgba(147,51,234,0.1);
    border-radius: 6px;
}
.smart-preset-result.hidden { display: none; }
.smart-result-header {
    display: flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 700; color: #a855f7;
    margin-bottom: 5px;
}
.smart-result-tags {
    display: flex; flex-wrap: wrap; gap: 3px;
}
.smart-tag {
    font-size: 8px; font-weight: 600; padding: 2px 6px;
    border-radius: 4px;
    background: rgba(147,51,234,0.1);
    color: #c084fc;
}

/* ====== COMPACT WAVEFORM ====== */
.mastering-waveform-compact {
    max-height: 52px;
}
.mastering-waveform-compact .mastering-waveform {
    height: 48px !important;
}

/* EQ grid */
.mastering-eq-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
}
.mastering-eq-band {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; text-align: center;
}
.mastering-eq-freq {
    font-size: 8px; color: var(--green); opacity: 0.45;
    font-weight: 600; letter-spacing: 0.3px;
}
.mastering-eq-band .eq-val {
    font-size: 9px; color: var(--green); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mastering-eq-slider-wrap {
    height: 65px; display: flex; align-items: center; justify-content: center;
}
.mastering-eq-slider-wrap .eq-slider { height: 58px; }

/* Multiband grid */
.mastering-mb-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.mastering-mb-band {
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.06);
    border-radius: 6px; padding: 5px; display: flex;
    flex-direction: column; gap: 4px;
}
.mastering-mb-label {
    font-size: 9px; font-weight: 700; text-align: center;
    color: var(--green); letter-spacing: 0.5px;
}
.mastering-mb-label small { font-weight: 400; opacity: 0.45; font-size: 7px; }
.mastering-mb-val {
    font-size: 9px; color: var(--green); text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Badges */
.mastering-badge {
    font-size: 7px; font-weight: 700; letter-spacing: 0.6px;
    padding: 1px 5px; border-radius: 4px;
    background: rgba(var(--green-rgb, 34,217,86), 0.1);
    color: var(--green); opacity: 0.7;
}

/* Divider */
.mastering-divider {
    height: 1px; background: rgba(var(--green-rgb, 34,217,86), 0.08);
    margin: 4px 0;
}

/* Mini button */
.mastering-mini-btn {
    font-size: 8px; padding: 2px 8px; border-radius: 4px;
    background: rgba(var(--green-rgb, 34,217,86), 0.08);
    color: var(--green); border: none; cursor: pointer;
    transition: background 0.15s; font-weight: 600;
}
.mastering-mini-btn:hover { background: rgba(var(--green-rgb, 34,217,86), 0.15); }

/* Action bar */
.mastering-action-bar { padding: 2px 0; }
.mastering-go-btn {
    font-size: 10px !important; padding: 8px 14px !important;
    letter-spacing: 0.4px;
}

/* Input waveform */
.mastering-waveform-wrap {
    position: relative; border-radius: 8px; overflow: hidden;
    background: rgba(0,0,0,0.15); border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.06);
}
.mastering-waveform {
    width: 100%; height: 56px; display: block;
}
.mastering-waveform-label {
    position: absolute; top: 4px; left: 8px;
    font-size: 7px; font-weight: 700; letter-spacing: 0.8px;
    color: var(--green); opacity: 0.3;
}

/* Stats card */
.mastering-stats-card {
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.1);
    border-radius: 10px; padding: 12px;
}
.mastering-stats-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; color: var(--green);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.mastering-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.mastering-stat {
    display: flex; flex-direction: column; gap: 2px;
    text-align: center; padding: 6px;
    background: rgba(0,0,0,0.1); border-radius: 6px;
}
.mastering-stat-label {
    font-size: 7px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--green); opacity: 0.4; font-weight: 600;
}
.mastering-stat-value {
    font-size: 12px; font-weight: 700; color: var(--green);
    font-variant-numeric: tabular-nums;
}

/* Progress bar */
.progress-track {
    height: 4px; border-radius: 2px; background: rgba(var(--green-rgb, 34,217,86), 0.08);
    overflow: hidden;
}
.progress-fill-amber {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--green), #fbbf24);
    transition: width 0.3s ease;
}

/* Mobile: EQ 4-col */
@media (max-width: 480px) {
    .mastering-eq-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .mastering-mb-grid { grid-template-columns: 1fr; }
    .mastering-mb-grid-5 { grid-template-columns: 1fr !important; }
    .mastering-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .mastering-macro-grid { grid-template-columns: 1fr !important; }
    .mastering-modes-grid { grid-template-columns: 1fr !important; }
    .meters-row { flex-direction: column !important; }
    .meter-block.wide, .meter-block.narrow { min-width: 0 !important; }
    .mastering-transport { flex-wrap: wrap; gap: 8px; }
}

/* ====== MASTERING ENGINE v2 — ADDITIONAL STYLES ====== */

/* Waveform cursor */
.mastering-waveform-cursor {
    position: absolute; top: 0; left: 0;
    width: 2px; height: 100%;
    background: var(--green); opacity: 0.8;
    pointer-events: none;
    transition: left 0.08s linear;
    box-shadow: 0 0 6px var(--green);
    z-index: 2;
}
.mastering-waveform-wrap { cursor: pointer; }

/* Transport controls */
.mastering-transport {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0;
}
.transport-left, .transport-right {
    display: flex; align-items: center; gap: 6px;
}
.transport-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: rgba(var(--green-rgb, 34,217,86), 0.06);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.12);
    border-radius: 6px; color: var(--green);
    cursor: pointer; transition: all 0.15s;
}
.transport-btn:hover {
    background: rgba(var(--green-rgb, 34,217,86), 0.12);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.25);
}
.transport-btn.play {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(var(--green-rgb, 34,217,86), 0.1);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.2);
}
.transport-btn.play:hover {
    background: rgba(var(--green-rgb, 34,217,86), 0.2);
    box-shadow: 0 0 12px rgba(var(--green-rgb, 34,217,86), 0.15);
}
.transport-btn.play.playing {
    background: rgba(var(--green-rgb, 34,217,86), 0.15);
    box-shadow: 0 0 12px rgba(var(--green-rgb, 34,217,86), 0.2);
}
.transport-time {
    font-size: 10px; font-weight: 600; color: var(--green);
    opacity: 0.5; font-variant-numeric: tabular-nums;
    font-family: var(--mono);
}

/* A/B Button */
.ab-btn {
    font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}
.ab-btn.active {
    background: rgba(251,191,36,0.15) !important;
    border-color: rgba(251,191,36,0.35) !important;
    color: #fbbf24 !important;
}
.ab-label { font-weight: 800; font-size: 11px; }

/* Reference track info */
.ref-info {
    display: flex !important; align-items: center; gap: 6px;
    font-size: 9px; color: var(--green); opacity: 0.6;
}

/* Mastering Mode buttons */
.mastering-modes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px;
}
.mastering-mode-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px;
    font-size: 8px; font-weight: 600; letter-spacing: 0.3px;
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    border-radius: 5px; color: var(--green); opacity: 0.55;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.mastering-mode-btn:hover {
    opacity: 0.8;
    background: rgba(var(--green-rgb, 34,217,86), 0.06);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.15);
}
.mastering-mode-btn.active {
    opacity: 1;
    background: rgba(var(--green-rgb, 34,217,86), 0.1);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.3);
    box-shadow: 0 0 10px rgba(var(--green-rgb, 34,217,86), 0.1);
}
.mode-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); opacity: 0.3;
    transition: opacity 0.2s;
}
.mastering-mode-btn.active .mode-dot { opacity: 1; box-shadow: 0 0 6px var(--green); }

/* Macro controls */
.mastering-macro-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mastering-macro {
    background: rgba(var(--green-rgb, 34,217,86), 0.02);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.06);
    border-radius: 8px; padding: 10px 12px;
}
.macro-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 3px;
}
.macro-label {
    font-size: 7px; font-weight: 800; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--green); opacity: 0.5;
}
.macro-value {
    font-size: 11px; font-weight: 800; color: var(--green);
    font-variant-numeric: tabular-nums; font-family: var(--mono);
}
.macro-slider {
    width: 100%; height: 6px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: rgba(var(--green-rgb, 34,217,86), 0.1);
    border-radius: 3px; outline: none;
}
.macro-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--green); cursor: pointer;
    box-shadow: 0 0 8px rgba(var(--green-rgb, 34,217,86), 0.3);
    border: 2px solid rgba(255,255,255,0.1);
}
.macro-slider.macro-red::-webkit-slider-thumb { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.macro-slider.macro-blue::-webkit-slider-thumb { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.3); }
.macro-slider.macro-amber::-webkit-slider-thumb { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.macro-slider.macro-green::-webkit-slider-thumb { background: var(--green); }
.macro-hints {
    display: flex; justify-content: space-between; margin-top: 3px;
}
.macro-hints span {
    font-size: 7px; color: var(--green); opacity: 0.25;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}

/* Metering panel */
.mastering-meters-panel {
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.06);
    border-radius: 8px; padding: 6px; display: flex;
    flex-direction: column; gap: 4px; flex: 1; min-height: 0;
}
.meters-row {
    display: flex; gap: 4px; align-items: stretch;
}
.meter-block {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.meter-block.wide { flex: 3; }
.meter-block.narrow { flex: 1; min-width: 100px; }
.meter-title {
    font-size: 7px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--green); opacity: 0.35;
}
.meter-bar-canvas {
    width: 100%; border-radius: 3px; display: block;
}
.meter-spectrum-canvas {
    width: 100%; border-radius: 4px; display: block;
}
.meter-corr-canvas {
    width: 100%; aspect-ratio: 1; border-radius: 4px; display: block;
}
.meter-readouts {
    display: flex; gap: 10px;
    font-size: 9px; font-weight: 600; color: var(--green);
    opacity: 0.5; font-variant-numeric: tabular-nums;
    font-family: var(--mono);
}
.meter-readouts strong {
    color: var(--green); opacity: 1; font-weight: 700;
}

/* 5-band multiband grid */
.mastering-mb-grid-5 {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}

/* Processing spinner */
.processing-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spinner-spin 0.6s linear infinite;
}
@keyframes spinner-spin { to { transform: rotate(360deg); } }

/* ====================================================================
   LANDING PAGE STYLES
   ==================================================================== */

/* Hero title — larger than section-title */
.landing-hero-title {
    font-family: var(--mono);
    font-size: clamp(28px, 7vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--green);
    text-shadow: 0 0 30px var(--green-glow), 0 0 60px var(--green-glow);
    letter-spacing: -0.02em;
}

/* CTA buttons */
.landing-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bg);
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.25s var(--smooth);
    box-shadow: 0 0 20px var(--green-glow), inset 0 1px 0 rgba(255,255,255,0.1);
}
.landing-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 30px var(--green-glow), 0 4px 20px var(--green-glow);
}
.landing-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.25s var(--smooth);
}
.landing-cta-secondary:hover {
    border-color: var(--border-h);
    background: var(--bg-card);
    transform: translateY(-1px);
}

/* Trust badges row */
.landing-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    letter-spacing: 0.02em;
}
.trust-badge i { opacity: 0.6; }

/* Spotlight feature cards */
.landing-spotlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.35s var(--smooth);
    position: relative;
    overflow: hidden;
}
.landing-spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--spot-color, var(--green))10, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.landing-spotlight-card:hover::before { opacity: 1; }
.landing-spotlight-card:hover {
    border-color: var(--border-h);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--green-glow);
}
.landing-spotlight-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--spot-color, var(--green)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--spot-color, var(--green)) 20%, transparent);
    margin-bottom: 16px;
    color: var(--spot-color, var(--green));
    transition: all 0.35s var(--smooth);
    position: relative;
    z-index: 1;
}
.landing-spotlight-card:hover .landing-spotlight-icon {
    background: color-mix(in srgb, var(--spot-color, var(--green)) 18%, transparent);
    box-shadow: 0 0 25px color-mix(in srgb, var(--spot-color, var(--green)) 30%, transparent);
    transform: scale(1.05);
}
.landing-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    transition: opacity 0.3s;
    position: relative;
    z-index: 1;
}
.landing-spotlight-card:hover .landing-spotlight-cta { opacity: 1; }

/* Action cards */
.landing-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.3s var(--smooth);
}
.landing-action-card:hover {
    border-color: var(--border-h);
    background: var(--bg-card-h);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--green-glow);
}
.landing-action-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid var(--border);
    margin-bottom: 12px;
    color: var(--green);
    transition: all 0.3s var(--smooth);
}
.landing-action-card:hover .landing-action-icon {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    box-shadow: 0 0 15px var(--green-glow);
}

/* Category cards */
.landing-cat-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: all 0.3s var(--smooth);
}
.landing-cat-card:hover {
    border-color: var(--border-h);
    background: var(--bg-card-h);
    transform: translateY(-1px);
}
.landing-cat-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--cat-color, var(--green)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--green)) 20%, transparent);
    color: var(--cat-color, var(--green));
}
.landing-cat-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid var(--border);
    color: color-mix(in srgb, var(--green) 40%, transparent);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 2px;
}
.landing-cat-arrow:hover {
    border-color: var(--border-h);
    color: var(--green);
    background: var(--bg-card);
}

.landing-tool-tag {
    display: inline-block;
    padding: 2px 7px;
    font-size: 8px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 2px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Privacy strip */
.landing-privacy-strip {
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-align: center;
}

/* ====================================================================
   PRICING STYLES
   ==================================================================== */
.pricing-card {
    position: relative;
    padding: 28px 24px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: all 0.3s var(--smooth);
    overflow: hidden;
}
.pricing-card:hover {
    border-color: var(--border-h);
    transform: translateY(-2px);
}
.pricing-card.featured {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    background: color-mix(in srgb, var(--green) 6%, var(--bg));
    box-shadow: 0 0 30px var(--green-glow);
}
.pricing-card.featured:hover {
    box-shadow: 0 0 40px var(--green-glow), 0 8px 30px var(--green-glow);
}
.pricing-popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 12px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--bg);
    background: var(--green);
    border-radius: 0 0 0 var(--r-sm);
}
.pricing-card-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.pricing-tier-badge {
    display: inline-block;
    padding: 3px 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: color-mix(in srgb, var(--green) 70%, transparent);
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 2px;
    margin-bottom: 12px;
}
.pricing-tier-badge.pro {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
    box-shadow: 0 0 10px var(--green-glow);
}
.pricing-tier-badge.studio {
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.2);
}
.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}
.pricing-currency {
    font-size: 16px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 50%, transparent);
}
.pricing-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pricing-period {
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--green) 40%, transparent);
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 500;
    color: color-mix(in srgb, var(--green) 55%, transparent);
}
.pricing-features li i {
    flex-shrink: 0;
    color: var(--green);
    opacity: 0.5;
}
.pricing-features li.highlight {
    color: var(--green);
    font-weight: 600;
}
.pricing-features li.highlight i {
    opacity: 0.8;
}
.pricing-features li.disabled {
    color: color-mix(in srgb, var(--green) 25%, transparent);
}
.pricing-features li.disabled i {
    color: color-mix(in srgb, var(--green) 20%, transparent);
    opacity: 0.4;
}
.pricing-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-sizing: border-box;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    background: color-mix(in srgb, var(--green) 6%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.25s var(--smooth);
}
.pricing-btn:hover {
    color: var(--green);
    border-color: var(--border-h);
    background: color-mix(in srgb, var(--green) 10%, transparent);
}
.pricing-btn.featured {
    color: var(--bg);
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 15px var(--green-glow);
}
.pricing-btn.featured:hover {
    box-shadow: 0 0 25px var(--green-glow);
    transform: translateY(-1px);
}

/* FAQ */
.pricing-faq {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.pricing-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 65%, transparent);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--mono);
    transition: color 0.2s ease;
}
.pricing-faq-q:hover { color: var(--green); }
.pricing-faq .faq-chevron {
    transition: transform 0.25s var(--smooth);
    color: color-mix(in srgb, var(--green) 30%, transparent);
}
.pricing-faq.open .faq-chevron { transform: rotate(180deg); }
.pricing-faq-a {
    max-height: 0;
    overflow: hidden;
    padding: 0 14px;
    font-size: 10px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--green) 45%, transparent);
    transition: max-height 0.3s var(--smooth), padding 0.3s var(--smooth);
}
.pricing-faq.open .pricing-faq-a {
    max-height: 200px;
    padding: 0 14px 12px;
}

/* Nav CTA button */
.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bg);
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.25s var(--smooth);
    box-shadow: 0 0 10px var(--green-glow);
}
.nav-cta-btn:hover {
    box-shadow: 0 0 20px var(--green-glow);
    transform: translateY(-1px);
}

/* Landing responsive */
@media (max-width: 640px) {
    .landing-hero-title {
        font-size: clamp(24px, 8vw, 40px);
    }
    .landing-trust-row {
        gap: 8px;
    }
    .trust-badge {
        padding: 4px 10px;
        font-size: 9px;
    }
    .landing-cta-primary,
    .landing-cta-secondary {
        width: 100%;
        justify-content: center;
    }
    .pricing-card.featured {
        order: -1;
    }
}

/* ============================================================
   AUDIO DEVICE EMULATOR TOOL STYLES
   ============================================================ */
.device-emu-player {
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    border-radius: 6px; padding: 8px; overflow: hidden;
}
.device-emu-transport {
    display: flex; align-items: center; gap: 4px; margin-bottom: 6px;
}
.device-emu-waveform {
    width: 100%; height: 40px; overflow: hidden; border-radius: 4px;
    background: rgba(0,0,0,0.15);
}
.device-emu-waveform canvas { display: block; width: 100%; height: 100%; }
.device-emu-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px;
}
.device-emu-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 8px; border-radius: 5px; font-size: 10px;
    background: rgba(var(--green-rgb, 34,217,86), 0.03);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    color: rgba(var(--green-rgb, 34,217,86), 0.5);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.device-emu-btn:hover {
    background: rgba(var(--green-rgb, 34,217,86), 0.08);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.2);
    color: rgba(var(--green-rgb, 34,217,86), 0.85);
}
.device-emu-btn.active {
    background: rgba(var(--green-rgb, 34,217,86), 0.12);
    border-color: rgba(var(--green-rgb, 34,217,86), 0.4);
    color: var(--green);
    box-shadow: 0 0 10px rgba(var(--green-rgb, 34,217,86), 0.12);
}
.device-emu-icon { font-size: 13px; line-height: 1; }
.device-emu-name { font-size: 9px; letter-spacing: 0.2px; }

/* ================================================================
   AI+ TAB STYLES
   ================================================================ */
.mastering-dyneq-band {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(var(--green-rgb, 34,217,86), 0.08);
    border-radius: 6px;
    padding: 8px 10px;
    transition: border-color 0.15s;
}
.mastering-dyneq-band:hover {
    border-color: rgba(var(--green-rgb, 34,217,86), 0.2);
}
.mastering-dyneq-band .setting-label {
    font-size: 9px;
    opacity: 0.6;
}
.mastering-dyneq-band .deq-gain,
.mastering-dyneq-band .deq-thresh {
    height: 4px;
}

/* AI+ feature badges glow */
[data-fspanel="aiplus"] .mastering-badge {
    animation: ai-badge-pulse 2s ease-in-out infinite;
}
@keyframes ai-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.3); }
}

/* AI+ section special styling */
[data-fspanel="aiplus"] .mastering-section {
    border-left: 2px solid rgba(168, 85, 247, 0.15);
}
[data-fspanel="aiplus"] .mastering-section:hover {
    border-left-color: rgba(168, 85, 247, 0.4);
}

/* Auto-Tune detected key indicator */
#t-at-detected {
    transition: color 0.3s;
}
#t-at-detected:not(:empty) {
    color: rgba(168, 85, 247, 0.8);
    font-weight: 500;
}

/* De-noise status */
#t-denoise-status {
    transition: color 0.3s;
}

/* Smart preset grid with more items */
.smart-preset-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 900px) {
    .smart-preset-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ================================================================
   MOBILE OPTIMIZATION — touch, sizing, layout
   ================================================================ */

/* Touch optimization — mobile only */
@media (hover: none), (pointer: coarse) {
    button, a, input, select, textarea, .drop-zone, .tool-drop, .nav-pill,
    .ws-btn, .fs-tab, .smart-preset-btn, .mastering-mini-btn,
    .wf-sb-item, .wf-left-ws-btn, .wf-minimize-btn, .wf-drag-handle {
        touch-action: manipulation;
    }

    /* Prevent overscroll chaining on scroll containers */
    .tool-panel-overlay, .customize-panel, .achieve-panel,
    .mastering-fs-right, .mastering-fs-left, .wf-sidebar {
        overscroll-behavior: contain;
    }

    /* Ensure range inputs have adequate touch targets */
    input[type="range"] {
        min-height: 32px;
        cursor: pointer;
    }

    /* Firefox range track styling */
    input[type="range"]::-moz-range-track {
        background: rgba(var(--green-rgb, 34,217,86), 0.1);
        border-radius: 3px;
        height: 6px;
        border: none;
    }
    input[type="range"]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--green, #22d956);
        border: 2px solid rgba(255,255,255,0.1);
        cursor: pointer;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile-specific layout fixes */
@media (max-width: 640px) {
    /* Fullscreen mastering: stack left/right */
    .mastering-engine.workflow-active #t-preview-section {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }
    .mastering-engine.workflow-active .mastering-fs-left {
        max-height: 180px;
        overflow-y: auto;
    }
    .mastering-engine.workflow-active .mastering-fs-right {
        grid-column: 1 !important;
        grid-row: 2 !important;
        grid-template-columns: repeat(8, 1fr) !important;
    }
    /* Hide resize handle on mobile */
    .wf-panel-resize-handle {
        display: none !important;
    }
    /* Sidebar: full width on mobile */
    .wf-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }
    /* Workspace picker: scrollable */
    .mastering-workspace-picker {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mastering-workspace-picker::-webkit-scrollbar { display: none; }
    /* Macro grid: stack on mobile */
    .mastering-engine.workflow-active .mastering-section.wf-card .mastering-macro-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Tool panel overlay: safe area insets */
    .tool-panel-overlay.fullscreen .tool-panel-inner {
        padding-top: env(safe-area-inset-top, 4px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    /* Beat maker smaller cells on mobile */
    .dm-cell {
        min-width: 18px !important;
        min-height: 18px !important;
    }
}

/* Small phone tweaks */
@media (max-width: 380px) {
    .mastering-engine.workflow-active .mastering-fs-right {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .ws-label { display: none; }
    .ws-btn { padding: 4px 6px !important; }
}

/* ========================================================================
   TRANSFER MODULE STYLES
   WeTransfer-style file sharing UI
   ======================================================================== */

.transfer-container {
    max-width: 720px;
    margin: 0 auto;
}

/* Transfer Sections */
.transfer-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.3s var(--smooth);
}

.transfer-section.hidden {
    display: none;
}

.transfer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.transfer-icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--green);
}

.transfer-title {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
    margin: 0;
}

.transfer-subtitle {
    font-family: var(--mono);
    font-size: 10px;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    margin: 0;
}

/* Transfer Drop Zone */
.transfer-drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--r-lg);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s var(--smooth);
    overflow: hidden;
    background: color-mix(in srgb, var(--green) 1%, transparent);
}

.transfer-drop-zone:hover,
.transfer-drop-zone.drag-over {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    background: color-mix(in srgb, var(--green) 3%, transparent);
}

.transfer-drop-zone.drag-over {
    box-shadow: 0 0 40px color-mix(in srgb, var(--green) 10%, transparent);
    transform: scale(1.01);
}

.transfer-drop-zone.hidden {
    display: none;
}

.transfer-drop-zone-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--green) 4%, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.transfer-drop-zone:hover .transfer-drop-zone-gradient,
.transfer-drop-zone.drag-over .transfer-drop-zone-gradient {
    opacity: 1;
}

.transfer-drop-content {
    position: relative;
    z-index: 1;
}

.transfer-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: color-mix(in srgb, var(--green) 60%, transparent);
    transition: all 0.4s var(--spring);
    animation: uploadFloat 3s ease-in-out infinite;
}

.transfer-drop-zone:hover .transfer-upload-icon {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--green) 10%, transparent);
}

.transfer-drop-title {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--green);
    margin: 0 0 6px;
}

.transfer-drop-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--green) 45%, transparent);
    margin: 0 0 16px;
}

.transfer-drop-limits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--mono);
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 35%, transparent);
}

.transfer-drop-limits span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* File List */
.transfer-file-list {
    margin-top: 20px;
}

.transfer-file-list.hidden {
    display: none;
}

.transfer-file-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.transfer-file-count,
.transfer-file-size {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 60%, transparent);
}

.transfer-files-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.transfer-files-container::-webkit-scrollbar {
    width: 4px;
}

.transfer-files-container::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border-radius: 2px;
}

.transfer-files-container::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--green) 20%, transparent);
    border-radius: 2px;
}

.transfer-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: all 0.2s;
}

.transfer-file-item:hover {
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border-color: var(--border-h);
}

.transfer-file-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-radius: var(--r-sm);
    color: var(--green);
    flex-shrink: 0;
}

.transfer-file-info {
    flex: 1;
    min-width: 0;
}

.transfer-file-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--green) 80%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transfer-file-meta {
    font-family: var(--mono);
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    margin-top: 2px;
}

.transfer-file-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: color-mix(in srgb, var(--green) 40%, transparent);
    cursor: pointer;
    transition: all 0.2s;
}

.transfer-file-remove:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: rgba(255, 0, 64, 0.2);
    color: #ff4466;
}

.transfer-file-progress {
    width: 60px;
}

.transfer-file-progress-bar {
    height: 4px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 2px;
    overflow: hidden;
}

.transfer-file-progress-fill {
    height: 100%;
    background: var(--green);
    border-radius: 2px;
    transition: width 0.3s;
}

.transfer-add-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    cursor: pointer;
    transition: all 0.2s;
}

.transfer-add-more-btn:hover {
    border-color: var(--border-h);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 3%, transparent);
}

/* Transfer Options */
.transfer-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.transfer-options.hidden {
    display: none;
}

.transfer-option-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transfer-option-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.transfer-select {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--green) 80%, transparent);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300FF41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.transfer-select:hover {
    border-color: var(--border-h);
}

.transfer-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 8%, transparent);
}

.transfer-textarea {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--green) 80%, transparent);
    resize: vertical;
    min-height: 60px;
    transition: all 0.2s;
}

.transfer-textarea:hover {
    border-color: var(--border-h);
}

.transfer-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 8%, transparent);
}

.transfer-textarea::placeholder {
    color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* Progress Section */
.transfer-progress-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.transfer-progress-section.hidden {
    display: none;
}

.transfer-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.transfer-progress-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
}

#transfer-progress-percent {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
}

.transfer-progress-bar {
    height: 8px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.transfer-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-dim), var(--green));
    border-radius: 4px;
    transition: width 0.3s var(--smooth);
    box-shadow: 0 0 12px var(--green-glow);
}

.transfer-progress-status {
    font-family: var(--mono);
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 45%, transparent);
}

/* Actions */
.transfer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.transfer-actions.hidden {
    display: none;
}

.transfer-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--green);
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s var(--spring);
    box-shadow: 0 0 20px var(--green-glow);
}

.transfer-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 30px color-mix(in srgb, var(--green) 30%, transparent);
}

.transfer-btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.transfer-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.transfer-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 70%, transparent);
    cursor: pointer;
    transition: all 0.2s;
}

.transfer-btn-secondary:hover {
    border-color: var(--border-h);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 5%, transparent);
}

.transfer-btn-secondary.hidden {
    display: none;
}

/* Success Section */
.transfer-success-content {
    text-align: center;
}

.transfer-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 2px solid var(--green);
    border-radius: 50%;
    color: var(--green);
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--green-glow); }
    50% { box-shadow: 0 0 30px var(--green-glow); }
}

.transfer-success-title {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--green);
    margin: 0 0 4px;
}

.transfer-success-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    margin: 0 0 24px;
}

/* Shareable/Local Badges */
.transfer-shareable-badge,
.transfer-local-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 16px;
}

.transfer-shareable-badge {
    background: color-mix(in srgb, #22d956 12%, transparent);
    border: 1px solid color-mix(in srgb, #22d956 30%, transparent);
    color: #22d956;
}

.transfer-local-badge {
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
    color: #f59e0b;
}

/* Info Banner */
.transfer-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--green) 65%, transparent);
}

.transfer-info-banner strong {
    color: var(--green);
}

.transfer-info-banner i {
    flex-shrink: 0;
    margin-top: 2px;
    color: color-mix(in srgb, var(--green) 50%, transparent);
}

/* History Item Shareable */
.transfer-history-item.shareable .transfer-history-icon {
    color: #22d956;
}

/* Link Box */
.transfer-link-box {
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 20px;
}

.transfer-link-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.transfer-link-input-wrap {
    display: flex;
    gap: 8px;
}

.transfer-link-input {
    flex: 1;
    padding: 12px;
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--green);
    outline: none;
}

.transfer-link-input:focus {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.transfer-copy-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    border: none;
    border-radius: var(--r-sm);
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
}

.transfer-copy-btn:hover {
    transform: scale(1.05);
}

.transfer-copy-btn:active {
    transform: scale(0.95);
}

/* Meta Items */
.transfer-success-meta,
.transfer-download-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.transfer-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: color-mix(in srgb, var(--green) 55%, transparent);
}

.transfer-meta-item i {
    color: color-mix(in srgb, var(--green) 40%, transparent);
}

.transfer-success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Download Section */
.transfer-download-content {
    text-align: center;
}

.transfer-download-header {
    margin-bottom: 24px;
}

.transfer-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--green);
}

.transfer-download-title {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--green);
    margin: 0 0 8px;
}

.transfer-download-message {
    font-family: var(--mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    font-style: italic;
    margin: 0;
    padding: 12px;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border-radius: var(--r-sm);
}

.transfer-download-message.hidden {
    display: none;
}

.transfer-download-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 24px;
    text-align: left;
}

.transfer-download-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--green) 3%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: all 0.2s;
}

.transfer-download-file:hover {
    background: color-mix(in srgb, var(--green) 5%, transparent);
    border-color: var(--border-h);
}

.transfer-download-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--green);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.transfer-download-btn:hover {
    background: var(--green);
    color: #000;
}

.transfer-download-actions {
    display: flex;
    justify-content: center;
}

/* History Section */
.transfer-history-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.transfer-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.transfer-history-header:hover {
    background: color-mix(in srgb, var(--green) 3%, transparent);
}

.transfer-history-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 60%, transparent);
}

.transfer-toggle-history {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    cursor: pointer;
    transition: all 0.2s;
}

.transfer-toggle-history:hover {
    color: var(--green);
}

.transfer-history-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--smooth);
}

.transfer-history-content.open {
    max-height: 400px;
}

.transfer-history-list {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transfer-history-list.hidden {
    display: none;
}

.transfer-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--green) 2%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: all 0.2s;
}

.transfer-history-item:hover {
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border-color: var(--border-h);
}

.transfer-history-item.expired {
    opacity: 0.5;
}

.transfer-history-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-radius: var(--r-sm);
    color: var(--green);
    flex-shrink: 0;
}

.transfer-history-item.expired .transfer-history-icon {
    color: color-mix(in srgb, var(--green) 40%, transparent);
}

.transfer-history-info {
    flex: 1;
    min-width: 0;
}

.transfer-history-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: color-mix(in srgb, var(--green) 80%, transparent);
}

.transfer-history-meta {
    font-family: var(--mono);
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    margin-top: 2px;
}

.transfer-history-actions {
    display: flex;
    gap: 4px;
}

.transfer-history-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: color-mix(in srgb, var(--green) 40%, transparent);
    cursor: pointer;
    transition: all 0.2s;
}

.transfer-history-btn:hover {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: var(--border);
    color: var(--green);
}

.transfer-history-btn.delete-btn:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: rgba(255, 0, 64, 0.2);
    color: #ff4466;
}

.transfer-history-empty {
    padding: 32px;
    text-align: center;
    color: color-mix(in srgb, var(--green) 30%, transparent);
}

.transfer-history-empty i {
    margin-bottom: 8px;
}

.transfer-history-empty p {
    font-family: var(--mono);
    font-size: 10px;
    margin: 0;
}

.transfer-history-empty.hidden {
    display: none;
}

/* Storage Indicator */
.transfer-storage-indicator {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.transfer-storage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 50%, transparent);
}

#transfer-storage-used {
    font-weight: 700;
    color: var(--green);
}

.transfer-storage-bar {
    height: 4px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.transfer-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-dim), var(--green));
    border-radius: 2px;
    transition: width 0.3s;
}

.transfer-storage-note {
    font-family: var(--mono);
    font-size: 8px;
    color: color-mix(in srgb, var(--green) 35%, transparent);
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .transfer-section {
        padding: 16px;
    }
    
    .transfer-drop-zone {
        padding: 32px 16px;
    }
    
    .transfer-upload-icon {
        width: 64px;
        height: 64px;
    }
    
    .transfer-upload-icon i {
        width: 32px;
        height: 32px;
    }
    
    .transfer-drop-limits {
        flex-direction: column;
        gap: 8px;
    }
    
    .transfer-success-meta,
    .transfer-download-meta {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .transfer-success-actions {
        flex-direction: column;
    }
    
    .transfer-success-actions .transfer-btn-primary,
    .transfer-success-actions .transfer-btn-secondary {
        width: 100%;
    }
    
    .transfer-link-input-wrap {
        flex-direction: column;
    }
    
    .transfer-copy-btn {
        width: 100%;
        height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXTRAVAGANT THEMES - 90+ Theme Color Definitions
   ══════════════════════════════════════════════════════════════════════════ */

/* ====== NATURE & ANIMALS ====== */
[data-theme="sheep"] {
    --bg: #2a3a2a;
    --bg-card: rgba(245,245,220,0.06);
    --bg-card-h: rgba(245,245,220,0.1);
    --border: rgba(245,245,220,0.16);
    --border-h: rgba(245,245,220,0.3);
    --green: #F5F5DC;
    --green-dim: #c4c4aa;
    --green-dark: #3a4a3a;
    --green-glow: rgba(245,245,220,0.2);
    --red: #FF6B6B;
    --glass: rgba(42,58,42,0.94);
    --glass-b: rgba(245,245,220,0.1);
    --rain-color: #F5F5DC;
}
[data-theme="sheep"] body { background: linear-gradient(180deg, #2a3a2a 0%, #3a4a3a 50%, #2a3a2a 100%) !important; }
[data-theme="sheep"] #matrix-rain { opacity: 0.025; }

[data-theme="bumblebee"] {
    --bg: #1a1400;
    --bg-card: rgba(255,215,0,0.06);
    --bg-card-h: rgba(255,215,0,0.1);
    --border: rgba(255,215,0,0.16);
    --border-h: rgba(255,215,0,0.3);
    --green: #FFD700;
    --green-dim: #cca900;
    --green-dark: #3d3200;
    --green-glow: rgba(255,215,0,0.2);
    --red: #FF4444;
    --glass: rgba(26,20,0,0.94);
    --glass-b: rgba(255,215,0,0.1);
    --rain-color: #FFD700;
}
[data-theme="bumblebee"] body { background: linear-gradient(180deg, #1a1400 0%, #252000 50%, #1a1400 100%) !important; }
[data-theme="bumblebee"] #matrix-rain { opacity: 0.03; }

[data-theme="flamingo"] {
    --bg: #1a0a14;
    --bg-card: rgba(255,105,180,0.06);
    --bg-card-h: rgba(255,105,180,0.1);
    --border: rgba(255,105,180,0.16);
    --border-h: rgba(255,105,180,0.3);
    --green: #FF69B4;
    --green-dim: #cc5490;
    --green-dark: #3d1a30;
    --green-glow: rgba(255,105,180,0.2);
    --red: #FFD700;
    --glass: rgba(26,10,20,0.94);
    --glass-b: rgba(255,105,180,0.1);
    --rain-color: #FF69B4;
}
[data-theme="flamingo"] body { background: linear-gradient(180deg, #1a0a14 0%, #251018 50%, #1a0a14 100%) !important; }
[data-theme="flamingo"] #matrix-rain { opacity: 0.03; }

[data-theme="peacock"] {
    --bg: #0a1a1a;
    --bg-card: rgba(0,206,209,0.06);
    --bg-card-h: rgba(0,206,209,0.1);
    --border: rgba(0,206,209,0.16);
    --border-h: rgba(0,206,209,0.3);
    --green: #00CED1;
    --green-dim: #00a5a8;
    --green-dark: #003a3a;
    --green-glow: rgba(0,206,209,0.2);
    --red: #FF69B4;
    --glass: rgba(10,26,26,0.94);
    --glass-b: rgba(0,206,209,0.1);
    --rain-color: #00CED1;
}
[data-theme="peacock"] body { background: linear-gradient(180deg, #0a1a1a 0%, #0f2525 50%, #0a1a1a 100%) !important; }
[data-theme="peacock"] #matrix-rain { opacity: 0.03; }

[data-theme="firefly"] {
    --bg: #0a0a00;
    --bg-card: rgba(173,255,47,0.06);
    --bg-card-h: rgba(173,255,47,0.1);
    --border: rgba(173,255,47,0.16);
    --border-h: rgba(173,255,47,0.3);
    --green: #ADFF2F;
    --green-dim: #8acc25;
    --green-dark: #2a3d0a;
    --green-glow: rgba(173,255,47,0.2);
    --red: #FF4444;
    --glass: rgba(10,10,0,0.94);
    --glass-b: rgba(173,255,47,0.1);
    --rain-color: #ADFF2F;
}
[data-theme="firefly"] body { background: linear-gradient(180deg, #0a0a00 0%, #141400 50%, #0a0a00 100%) !important; }
[data-theme="firefly"] #matrix-rain { opacity: 0.03; }

[data-theme="butterfly"] {
    --bg: #1a0820;
    --bg-card: rgba(218,112,214,0.06);
    --bg-card-h: rgba(218,112,214,0.1);
    --border: rgba(218,112,214,0.16);
    --border-h: rgba(218,112,214,0.3);
    --green: #DA70D6;
    --green-dim: #ae5aab;
    --green-dark: #3d1a38;
    --green-glow: rgba(218,112,214,0.2);
    --red: #FFD700;
    --glass: rgba(26,8,32,0.94);
    --glass-b: rgba(218,112,214,0.1);
    --rain-color: #DA70D6;
}
[data-theme="butterfly"] body { background: linear-gradient(180deg, #1a0820 0%, #250c2a 50%, #1a0820 100%) !important; }
[data-theme="butterfly"] #matrix-rain { opacity: 0.03; }

/* ====== FOOD & CANDY ====== */
[data-theme="bubblegum"] {
    --bg: #2a1020;
    --bg-card: rgba(255,105,180,0.06);
    --bg-card-h: rgba(255,105,180,0.1);
    --border: rgba(255,105,180,0.16);
    --border-h: rgba(255,105,180,0.3);
    --green: #FF69B4;
    --green-dim: #cc5490;
    --green-dark: #3d1a30;
    --green-glow: rgba(255,105,180,0.2);
    --red: #00CED1;
    --glass: rgba(42,16,32,0.94);
    --glass-b: rgba(255,105,180,0.1);
    --rain-color: #FF69B4;
}
[data-theme="bubblegum"] body { background: linear-gradient(180deg, #2a1020 0%, #351528 50%, #2a1020 100%) !important; }
[data-theme="bubblegum"] #matrix-rain { opacity: 0.025; }

[data-theme="mint"] {
    --bg: #0a1a0a;
    --bg-card: rgba(152,255,152,0.06);
    --bg-card-h: rgba(152,255,152,0.1);
    --border: rgba(152,255,152,0.16);
    --border-h: rgba(152,255,152,0.3);
    --green: #98FF98;
    --green-dim: #7acc7a;
    --green-dark: #1a3a1a;
    --green-glow: rgba(152,255,152,0.2);
    --red: #FF6B6B;
    --glass: rgba(10,26,10,0.94);
    --glass-b: rgba(152,255,152,0.1);
    --rain-color: #98FF98;
}
[data-theme="mint"] body { background: linear-gradient(180deg, #0a1a0a 0%, #102510 50%, #0a1a0a 100%) !important; }
[data-theme="mint"] #matrix-rain { opacity: 0.03; }

[data-theme="grape"] {
    --bg: #1a0a2a;
    --bg-card: rgba(147,112,219,0.06);
    --bg-card-h: rgba(147,112,219,0.1);
    --border: rgba(147,112,219,0.16);
    --border-h: rgba(147,112,219,0.3);
    --green: #9370DB;
    --green-dim: #755aaf;
    --green-dark: #2a1a40;
    --green-glow: rgba(147,112,219,0.2);
    --red: #FFD700;
    --glass: rgba(26,10,42,0.94);
    --glass-b: rgba(147,112,219,0.1);
    --rain-color: #9370DB;
}
[data-theme="grape"] body { background: linear-gradient(180deg, #1a0a2a 0%, #250f35 50%, #1a0a2a 100%) !important; }
[data-theme="grape"] #matrix-rain { opacity: 0.03; }

[data-theme="peach"] {
    --bg: #1a1008;
    --bg-card: rgba(255,203,164,0.06);
    --bg-card-h: rgba(255,203,164,0.1);
    --border: rgba(255,203,164,0.16);
    --border-h: rgba(255,203,164,0.3);
    --green: #FFCBA4;
    --green-dim: #cca283;
    --green-dark: #3d3020;
    --green-glow: rgba(255,203,164,0.2);
    --red: #FF4444;
    --glass: rgba(26,16,8,0.94);
    --glass-b: rgba(255,203,164,0.1);
    --rain-color: #FFCBA4;
}
[data-theme="peach"] body { background: linear-gradient(180deg, #1a1008 0%, #25180c 50%, #1a1008 100%) !important; }
[data-theme="peach"] #matrix-rain { opacity: 0.025; }

[data-theme="lemon"] {
    --bg: #1a1a00;
    --bg-card: rgba(255,244,79,0.06);
    --bg-card-h: rgba(255,244,79,0.1);
    --border: rgba(255,244,79,0.16);
    --border-h: rgba(255,244,79,0.3);
    --green: #FFF44F;
    --green-dim: #ccc33f;
    --green-dark: #3d3d00;
    --green-glow: rgba(255,244,79,0.2);
    --red: #FF4444;
    --glass: rgba(26,26,0,0.94);
    --glass-b: rgba(255,244,79,0.1);
    --rain-color: #FFF44F;
}
[data-theme="lemon"] body { background: linear-gradient(180deg, #1a1a00 0%, #252500 50%, #1a1a00 100%) !important; }
[data-theme="lemon"] #matrix-rain { opacity: 0.025; }

[data-theme="cherry"] {
    --bg: #1a0008;
    --bg-card: rgba(222,49,99,0.06);
    --bg-card-h: rgba(222,49,99,0.1);
    --border: rgba(222,49,99,0.16);
    --border-h: rgba(222,49,99,0.3);
    --green: #DE3163;
    --green-dim: #b2274f;
    --green-dark: #3d001a;
    --green-glow: rgba(222,49,99,0.2);
    --red: #FFD700;
    --glass: rgba(26,0,8,0.94);
    --glass-b: rgba(222,49,99,0.1);
    --rain-color: #DE3163;
}
[data-theme="cherry"] body { background: linear-gradient(180deg, #1a0008 0%, #25000c 50%, #1a0008 100%) !important; }
[data-theme="cherry"] #matrix-rain { opacity: 0.03; }

[data-theme="blueberry"] {
    --bg: #0a0a20;
    --bg-card: rgba(65,105,225,0.06);
    --bg-card-h: rgba(65,105,225,0.1);
    --border: rgba(65,105,225,0.16);
    --border-h: rgba(65,105,225,0.3);
    --green: #4169E1;
    --green-dim: #3454b4;
    --green-dark: #0a0a40;
    --green-glow: rgba(65,105,225,0.2);
    --red: #FF6B6B;
    --glass: rgba(10,10,32,0.94);
    --glass-b: rgba(65,105,225,0.1);
    --rain-color: #4169E1;
}
[data-theme="blueberry"] body { background: linear-gradient(180deg, #0a0a20 0%, #0f0f2a 50%, #0a0a20 100%) !important; }
[data-theme="blueberry"] #matrix-rain { opacity: 0.03; }

[data-theme="caramel"] {
    --bg: #1a0c00;
    --bg-card: rgba(210,105,30,0.06);
    --bg-card-h: rgba(210,105,30,0.1);
    --border: rgba(210,105,30,0.16);
    --border-h: rgba(210,105,30,0.3);
    --green: #D2691E;
    --green-dim: #a85418;
    --green-dark: #3d1e00;
    --green-glow: rgba(210,105,30,0.2);
    --red: #FF4444;
    --glass: rgba(26,12,0,0.94);
    --glass-b: rgba(210,105,30,0.1);
    --rain-color: #D2691E;
}
[data-theme="caramel"] body { background: linear-gradient(180deg, #1a0c00 0%, #251200 50%, #1a0c00 100%) !important; }
[data-theme="caramel"] #matrix-rain { opacity: 0.03; }

[data-theme="cotton"] {
    --bg: #1a0a18;
    --bg-card: rgba(255,182,193,0.06);
    --bg-card-h: rgba(255,182,193,0.1);
    --border: rgba(255,182,193,0.16);
    --border-h: rgba(255,182,193,0.3);
    --green: #FFB6C1;
    --green-dim: #cc929a;
    --green-dark: #3d2a30;
    --green-glow: rgba(255,182,193,0.2);
    --red: #00CED1;
    --glass: rgba(26,10,24,0.94);
    --glass-b: rgba(255,182,193,0.1);
    --rain-color: #FFB6C1;
}
[data-theme="cotton"] body { background: linear-gradient(180deg, #1a0a18 0%, #250f20 50%, #1a0a18 100%) !important; }
[data-theme="cotton"] #matrix-rain { opacity: 0.025; }

[data-theme="chocolate"] {
    --bg: #0a0400;
    --bg-card: rgba(139,69,19,0.08);
    --bg-card-h: rgba(139,69,19,0.14);
    --border: rgba(139,69,19,0.2);
    --border-h: rgba(139,69,19,0.35);
    --green: #8B4513;
    --green-dim: #6f370f;
    --green-dark: #1a0c00;
    --green-glow: rgba(139,69,19,0.2);
    --red: #FFD700;
    --glass: rgba(10,4,0,0.94);
    --glass-b: rgba(139,69,19,0.1);
    --rain-color: #8B4513;
}
[data-theme="chocolate"] body { background: linear-gradient(180deg, #0a0400 0%, #140800 50%, #0a0400 100%) !important; }
[data-theme="chocolate"] #matrix-rain { opacity: 0.035; }

/* ====== SPACE & COSMIC ====== */
[data-theme="mars"] {
    --bg: #1a0800;
    --bg-card: rgba(205,92,92,0.06);
    --bg-card-h: rgba(205,92,92,0.1);
    --border: rgba(205,92,92,0.16);
    --border-h: rgba(205,92,92,0.3);
    --green: #CD5C5C;
    --green-dim: #a44a4a;
    --green-dark: #3d1a1a;
    --green-glow: rgba(205,92,92,0.2);
    --red: #FFD700;
    --glass: rgba(26,8,0,0.94);
    --glass-b: rgba(205,92,92,0.1);
    --rain-color: #CD5C5C;
}
[data-theme="mars"] body { background: linear-gradient(180deg, #1a0800 0%, #250c00 50%, #1a0800 100%) !important; }
[data-theme="mars"] #matrix-rain { opacity: 0.03; }

[data-theme="saturn"] {
    --bg: #0a0804;
    --bg-card: rgba(222,184,135,0.06);
    --bg-card-h: rgba(222,184,135,0.1);
    --border: rgba(222,184,135,0.16);
    --border-h: rgba(222,184,135,0.3);
    --green: #DEB887;
    --green-dim: #b2936c;
    --green-dark: #3d301a;
    --green-glow: rgba(222,184,135,0.2);
    --red: #FF6B6B;
    --glass: rgba(10,8,4,0.94);
    --glass-b: rgba(222,184,135,0.1);
    --rain-color: #DEB887;
}
[data-theme="saturn"] body { background: linear-gradient(180deg, #0a0804 0%, #140e08 50%, #0a0804 100%) !important; }
[data-theme="saturn"] #matrix-rain { opacity: 0.025; }

[data-theme="stardust"] {
    --bg: #0a0808;
    --bg-card: rgba(255,228,181,0.06);
    --bg-card-h: rgba(255,228,181,0.1);
    --border: rgba(255,228,181,0.16);
    --border-h: rgba(255,228,181,0.3);
    --green: #FFE4B5;
    --green-dim: #ccb691;
    --green-dark: #3d3620;
    --green-glow: rgba(255,228,181,0.2);
    --red: #FF6B6B;
    --glass: rgba(10,8,8,0.94);
    --glass-b: rgba(255,228,181,0.1);
    --rain-color: #FFE4B5;
}
[data-theme="stardust"] body { background: linear-gradient(180deg, #0a0808 0%, #140e0e 50%, #0a0808 100%) !important; }
[data-theme="stardust"] #matrix-rain { opacity: 0.025; }

[data-theme="blackhole"] {
    --bg: #000000;
    --bg-card: rgba(72,61,139,0.08);
    --bg-card-h: rgba(72,61,139,0.14);
    --border: rgba(72,61,139,0.2);
    --border-h: rgba(72,61,139,0.35);
    --green: #483D8B;
    --green-dim: #3a316f;
    --green-dark: #1a1a30;
    --green-glow: rgba(72,61,139,0.2);
    --red: #FF4500;
    --glass: rgba(0,0,0,0.96);
    --glass-b: rgba(72,61,139,0.1);
    --rain-color: #483D8B;
}
[data-theme="blackhole"] body { background: #000000 !important; }
[data-theme="blackhole"] #matrix-rain { opacity: 0.04; }

[data-theme="supernova"] {
    --bg: #0a0000;
    --bg-card: rgba(255,69,0,0.06);
    --bg-card-h: rgba(255,69,0,0.1);
    --border: rgba(255,69,0,0.16);
    --border-h: rgba(255,69,0,0.3);
    --green: #FF4500;
    --green-dim: #cc3700;
    --green-dark: #3d1400;
    --green-glow: rgba(255,69,0,0.2);
    --red: #FFD700;
    --glass: rgba(10,0,0,0.94);
    --glass-b: rgba(255,69,0,0.1);
    --rain-color: #FF4500;
}
[data-theme="supernova"] body { background: linear-gradient(180deg, #0a0000 0%, #140000 50%, #0a0000 100%) !important; }
[data-theme="supernova"] #matrix-rain { opacity: 0.03; }

[data-theme="cosmic"] {
    --bg: #08001a;
    --bg-card: rgba(123,104,238,0.06);
    --bg-card-h: rgba(123,104,238,0.1);
    --border: rgba(123,104,238,0.16);
    --border-h: rgba(123,104,238,0.3);
    --green: #7B68EE;
    --green-dim: #6253be;
    --green-dark: #1a1040;
    --green-glow: rgba(123,104,238,0.2);
    --red: #FF69B4;
    --glass: rgba(8,0,26,0.94);
    --glass-b: rgba(123,104,238,0.1);
    --rain-color: #7B68EE;
}
[data-theme="cosmic"] body { background: linear-gradient(180deg, #08001a 0%, #0e0025 50%, #08001a 100%) !important; }
[data-theme="cosmic"] #matrix-rain { opacity: 0.03; }

[data-theme="moonlight"] {
    --bg: #0a0a14;
    --bg-card: rgba(192,192,192,0.06);
    --bg-card-h: rgba(192,192,192,0.1);
    --border: rgba(192,192,192,0.16);
    --border-h: rgba(192,192,192,0.3);
    --green: #C0C0C0;
    --green-dim: #9a9a9a;
    --green-dark: #2a2a30;
    --green-glow: rgba(192,192,192,0.2);
    --red: #6495ED;
    --glass: rgba(10,10,20,0.94);
    --glass-b: rgba(192,192,192,0.1);
    --rain-color: #C0C0C0;
}
[data-theme="moonlight"] body { background: linear-gradient(180deg, #0a0a14 0%, #14141e 50%, #0a0a14 100%) !important; }
[data-theme="moonlight"] #matrix-rain { opacity: 0.025; }

[data-theme="eclipse"] {
    --bg: #000008;
    --bg-card: rgba(75,0,130,0.08);
    --bg-card-h: rgba(75,0,130,0.14);
    --border: rgba(75,0,130,0.2);
    --border-h: rgba(75,0,130,0.35);
    --green: #4B0082;
    --green-dim: #3c0068;
    --green-dark: #1a0030;
    --green-glow: rgba(75,0,130,0.2);
    --red: #FF6B6B;
    --glass: rgba(0,0,8,0.96);
    --glass-b: rgba(75,0,130,0.1);
    --rain-color: #4B0082;
}
[data-theme="eclipse"] body { background: linear-gradient(180deg, #000008 0%, #08000e 50%, #000008 100%) !important; }
[data-theme="eclipse"] #matrix-rain { opacity: 0.04; }

[data-theme="solaris"] {
    --bg: #120e00;
    --bg-card: rgba(253,184,19,0.06);
    --bg-card-h: rgba(253,184,19,0.1);
    --border: rgba(253,184,19,0.16);
    --border-h: rgba(253,184,19,0.3);
    --green: #FDB813;
    --green-dim: #ca930f;
    --green-dark: #3d2d00;
    --green-glow: rgba(253,184,19,0.2);
    --red: #FF4444;
    --glass: rgba(18,14,0,0.94);
    --glass-b: rgba(253,184,19,0.1);
    --rain-color: #FDB813;
}
[data-theme="solaris"] body { background: linear-gradient(180deg, #120e00 0%, #1e1800 50%, #120e00 100%) !important; }
[data-theme="solaris"] #matrix-rain { opacity: 0.03; }

/* ====== RETRO & GAMING ====== */
[data-theme="gameboy"] {
    --bg: #0f380f;
    --bg-card: rgba(155,188,15,0.08);
    --bg-card-h: rgba(155,188,15,0.14);
    --border: rgba(155,188,15,0.2);
    --border-h: rgba(155,188,15,0.35);
    --green: #9BBC0F;
    --green-dim: #7c960c;
    --green-dark: #2a3d00;
    --green-glow: rgba(155,188,15,0.2);
    --red: #FF5555;
    --glass: rgba(15,56,15,0.94);
    --glass-b: rgba(155,188,15,0.1);
    --rain-color: #9BBC0F;
}
[data-theme="gameboy"] body { background: linear-gradient(180deg, #0f380f 0%, #1a4a1a 50%, #0f380f 100%) !important; }
[data-theme="gameboy"] #matrix-rain { opacity: 0.04; }

[data-theme="arcade"] {
    --bg: #000020;
    --bg-card: rgba(255,0,255,0.06);
    --bg-card-h: rgba(255,0,255,0.1);
    --border: rgba(255,0,255,0.16);
    --border-h: rgba(255,0,255,0.3);
    --green: #FF00FF;
    --green-dim: #cc00cc;
    --green-dark: #3d0040;
    --green-glow: rgba(255,0,255,0.2);
    --red: #00FFFF;
    --glass: rgba(0,0,32,0.94);
    --glass-b: rgba(255,0,255,0.1);
    --rain-color: #FF00FF;
}
[data-theme="arcade"] body { background: linear-gradient(180deg, #000020 0%, #00002a 50%, #000020 100%) !important; }
[data-theme="arcade"] #matrix-rain { opacity: 0.035; }

[data-theme="synthwave"] {
    --bg: #0a0014;
    --bg-card: rgba(224,64,251,0.06);
    --bg-card-h: rgba(224,64,251,0.1);
    --border: rgba(224,64,251,0.16);
    --border-h: rgba(224,64,251,0.3);
    --green: #E040FB;
    --green-dim: #b333c9;
    --green-dark: #3d0050;
    --green-glow: rgba(224,64,251,0.2);
    --red: #00FFFF;
    --glass: rgba(10,0,20,0.94);
    --glass-b: rgba(224,64,251,0.1);
    --rain-color: #E040FB;
}
[data-theme="synthwave"] body { background: linear-gradient(180deg, #0a0014 0%, #140020 50%, #0a0014 100%) !important; }
[data-theme="synthwave"] #matrix-rain { opacity: 0.03; }

[data-theme="terminal"] {
    --bg: #000000;
    --bg-card: rgba(51,255,51,0.06);
    --bg-card-h: rgba(51,255,51,0.1);
    --border: rgba(51,255,51,0.16);
    --border-h: rgba(51,255,51,0.3);
    --green: #33FF33;
    --green-dim: #29cc29;
    --green-dark: #003d00;
    --green-glow: rgba(51,255,51,0.2);
    --red: #FF3333;
    --glass: rgba(0,0,0,0.96);
    --glass-b: rgba(51,255,51,0.1);
    --rain-color: #33FF33;
}
[data-theme="terminal"] body { background: #000000 !important; }
[data-theme="terminal"] #matrix-rain { opacity: 0.04; }

[data-theme="commodore"] {
    --bg: #40318D;
    --bg-card: rgba(160,160,255,0.08);
    --bg-card-h: rgba(160,160,255,0.14);
    --border: rgba(160,160,255,0.2);
    --border-h: rgba(160,160,255,0.35);
    --green: #A0A0FF;
    --green-dim: #8080cc;
    --green-dark: #2a2070;
    --green-glow: rgba(160,160,255,0.2);
    --red: #FF8080;
    --glass: rgba(64,49,141,0.94);
    --glass-b: rgba(160,160,255,0.1);
    --rain-color: #A0A0FF;
}
[data-theme="commodore"] body { background: linear-gradient(180deg, #40318D 0%, #503f9d 50%, #40318D 100%) !important; }
[data-theme="commodore"] #matrix-rain { opacity: 0.03; }

[data-theme="atari"] {
    --bg: #000000;
    --bg-card: rgba(255,102,0,0.06);
    --bg-card-h: rgba(255,102,0,0.1);
    --border: rgba(255,102,0,0.16);
    --border-h: rgba(255,102,0,0.3);
    --green: #FF6600;
    --green-dim: #cc5200;
    --green-dark: #3d1e00;
    --green-glow: rgba(255,102,0,0.2);
    --red: #00FF00;
    --glass: rgba(0,0,0,0.96);
    --glass-b: rgba(255,102,0,0.1);
    --rain-color: #FF6600;
}
[data-theme="atari"] body { background: #000000 !important; }
[data-theme="atari"] #matrix-rain { opacity: 0.035; }

[data-theme="crt"] {
    --bg: #001100;
    --bg-card: rgba(0,255,0,0.06);
    --bg-card-h: rgba(0,255,0,0.1);
    --border: rgba(0,255,0,0.16);
    --border-h: rgba(0,255,0,0.3);
    --green: #00FF00;
    --green-dim: #00cc00;
    --green-dark: #002200;
    --green-glow: rgba(0,255,0,0.2);
    --red: #FF0000;
    --glass: rgba(0,17,0,0.94);
    --glass-b: rgba(0,255,0,0.1);
    --rain-color: #00FF00;
}
[data-theme="crt"] body { background: linear-gradient(180deg, #001100 0%, #001a00 50%, #001100 100%) !important; }
[data-theme="crt"] #matrix-rain { opacity: 0.04; }

[data-theme="neon80s"] {
    --bg: #0a001a;
    --bg-card: rgba(255,20,147,0.06);
    --bg-card-h: rgba(255,20,147,0.1);
    --border: rgba(255,20,147,0.16);
    --border-h: rgba(255,20,147,0.3);
    --green: #FF1493;
    --green-dim: #cc1076;
    --green-dark: #3d0030;
    --green-glow: rgba(255,20,147,0.2);
    --red: #00FFFF;
    --glass: rgba(10,0,26,0.94);
    --glass-b: rgba(255,20,147,0.1);
    --rain-color: #FF1493;
}
[data-theme="neon80s"] body { background: linear-gradient(180deg, #0a001a 0%, #140025 50%, #0a001a 100%) !important; }
[data-theme="neon80s"] #matrix-rain { opacity: 0.03; }

[data-theme="pixel"] {
    --bg: #1E1E1E;
    --bg-card: rgba(78,201,176,0.06);
    --bg-card-h: rgba(78,201,176,0.1);
    --border: rgba(78,201,176,0.16);
    --border-h: rgba(78,201,176,0.3);
    --green: #4EC9B0;
    --green-dim: #3ea18d;
    --green-dark: #1a3d30;
    --green-glow: rgba(78,201,176,0.2);
    --red: #FF5555;
    --glass: rgba(30,30,30,0.94);
    --glass-b: rgba(78,201,176,0.1);
    --rain-color: #4EC9B0;
}
[data-theme="pixel"] body { background: linear-gradient(180deg, #1E1E1E 0%, #282828 50%, #1E1E1E 100%) !important; }
[data-theme="pixel"] #matrix-rain { opacity: 0.03; }

/* ====== ELEMENTS & MATERIALS ====== */
[data-theme="bronze"] {
    --bg: #100800;
    --bg-card: rgba(205,127,50,0.06);
    --bg-card-h: rgba(205,127,50,0.1);
    --border: rgba(205,127,50,0.16);
    --border-h: rgba(205,127,50,0.3);
    --green: #CD7F32;
    --green-dim: #a46628;
    --green-dark: #3d2510;
    --green-glow: rgba(205,127,50,0.2);
    --red: #FFD700;
    --glass: rgba(16,8,0,0.94);
    --glass-b: rgba(205,127,50,0.1);
    --rain-color: #CD7F32;
}
[data-theme="bronze"] body { background: linear-gradient(180deg, #100800 0%, #1a0c00 50%, #100800 100%) !important; }
[data-theme="bronze"] #matrix-rain { opacity: 0.03; }

[data-theme="copper"] {
    --bg: #140c06;
    --bg-card: rgba(212,136,90,0.06);
    --bg-card-h: rgba(212,136,90,0.1);
    --border: rgba(212,136,90,0.16);
    --border-h: rgba(212,136,90,0.3);
    --green: #D4885A;
    --green-dim: #aa6d48;
    --green-dark: #3d2818;
    --green-glow: rgba(212,136,90,0.2);
    --red: #4169E1;
    --glass: rgba(20,12,6,0.94);
    --glass-b: rgba(212,136,90,0.1);
    --rain-color: #D4885A;
}
[data-theme="copper"] body { background: linear-gradient(180deg, #140c06 0%, #1e140a 50%, #140c06 100%) !important; }
[data-theme="copper"] #matrix-rain { opacity: 0.03; }

[data-theme="obsidian"] {
    --bg: #000000;
    --bg-card: rgba(45,45,45,0.1);
    --bg-card-h: rgba(45,45,45,0.18);
    --border: rgba(45,45,45,0.25);
    --border-h: rgba(45,45,45,0.4);
    --green: #2D2D2D;
    --green-dim: #242424;
    --green-dark: #141414;
    --green-glow: rgba(45,45,45,0.15);
    --red: #8B0000;
    --glass: rgba(0,0,0,0.98);
    --glass-b: rgba(45,45,45,0.08);
    --rain-color: #2D2D2D;
}
[data-theme="obsidian"] body { background: #000000 !important; }
[data-theme="obsidian"] #matrix-rain { opacity: 0.05; }

[data-theme="ruby"] {
    --bg: #140008;
    --bg-card: rgba(224,17,95,0.06);
    --bg-card-h: rgba(224,17,95,0.1);
    --border: rgba(224,17,95,0.16);
    --border-h: rgba(224,17,95,0.3);
    --green: #E0115F;
    --green-dim: #b30e4c;
    --green-dark: #3d0020;
    --green-glow: rgba(224,17,95,0.2);
    --red: #FFD700;
    --glass: rgba(20,0,8,0.94);
    --glass-b: rgba(224,17,95,0.1);
    --rain-color: #E0115F;
}
[data-theme="ruby"] body { background: linear-gradient(180deg, #140008 0%, #1e000c 50%, #140008 100%) !important; }
[data-theme="ruby"] #matrix-rain { opacity: 0.03; }

[data-theme="sapphire"] {
    --bg: #000814;
    --bg-card: rgba(15,82,186,0.06);
    --bg-card-h: rgba(15,82,186,0.1);
    --border: rgba(15,82,186,0.16);
    --border-h: rgba(15,82,186,0.3);
    --green: #0F52BA;
    --green-dim: #0c4295;
    --green-dark: #001a40;
    --green-glow: rgba(15,82,186,0.2);
    --red: #FFD700;
    --glass: rgba(0,8,20,0.94);
    --glass-b: rgba(15,82,186,0.1);
    --rain-color: #0F52BA;
}
[data-theme="sapphire"] body { background: linear-gradient(180deg, #000814 0%, #00101e 50%, #000814 100%) !important; }
[data-theme="sapphire"] #matrix-rain { opacity: 0.03; }

[data-theme="amethyst"] {
    --bg: #0a001a;
    --bg-card: rgba(153,102,204,0.06);
    --bg-card-h: rgba(153,102,204,0.1);
    --border: rgba(153,102,204,0.16);
    --border-h: rgba(153,102,204,0.3);
    --green: #9966CC;
    --green-dim: #7a52a3;
    --green-dark: #2a1040;
    --green-glow: rgba(153,102,204,0.2);
    --red: #FFD700;
    --glass: rgba(10,0,26,0.94);
    --glass-b: rgba(153,102,204,0.1);
    --rain-color: #9966CC;
}
[data-theme="amethyst"] body { background: linear-gradient(180deg, #0a001a 0%, #140025 50%, #0a001a 100%) !important; }
[data-theme="amethyst"] #matrix-rain { opacity: 0.03; }

/* ====== MOODS & VIBES ====== */
[data-theme="chill"] {
    --bg: #0a1420;
    --bg-card: rgba(135,206,235,0.06);
    --bg-card-h: rgba(135,206,235,0.1);
    --border: rgba(135,206,235,0.16);
    --border-h: rgba(135,206,235,0.3);
    --green: #87CEEB;
    --green-dim: #6ca5bc;
    --green-dark: #1a3040;
    --green-glow: rgba(135,206,235,0.2);
    --red: #FF6B6B;
    --glass: rgba(10,20,32,0.94);
    --glass-b: rgba(135,206,235,0.1);
    --rain-color: #87CEEB;
}
[data-theme="chill"] body { background: linear-gradient(180deg, #0a1420 0%, #101e2a 50%, #0a1420 100%) !important; }
[data-theme="chill"] #matrix-rain { opacity: 0.025; }

[data-theme="cozy"] {
    --bg: #1a0800;
    --bg-card: rgba(255,99,71,0.06);
    --bg-card-h: rgba(255,99,71,0.1);
    --border: rgba(255,99,71,0.16);
    --border-h: rgba(255,99,71,0.3);
    --green: #FF6347;
    --green-dim: #cc4f39;
    --green-dark: #3d1a14;
    --green-glow: rgba(255,99,71,0.2);
    --red: #FFD700;
    --glass: rgba(26,8,0,0.94);
    --glass-b: rgba(255,99,71,0.1);
    --rain-color: #FF6347;
}
[data-theme="cozy"] body { background: linear-gradient(180deg, #1a0800 0%, #250c00 50%, #1a0800 100%) !important; }
[data-theme="cozy"] #matrix-rain { opacity: 0.03; }

[data-theme="dreamy"] {
    --bg: #140a18;
    --bg-card: rgba(221,160,221,0.06);
    --bg-card-h: rgba(221,160,221,0.1);
    --border: rgba(221,160,221,0.16);
    --border-h: rgba(221,160,221,0.3);
    --green: #DDA0DD;
    --green-dim: #b180b1;
    --green-dark: #3d2040;
    --green-glow: rgba(221,160,221,0.2);
    --red: #87CEEB;
    --glass: rgba(20,10,24,0.94);
    --glass-b: rgba(221,160,221,0.1);
    --rain-color: #DDA0DD;
}
[data-theme="dreamy"] body { background: linear-gradient(180deg, #140a18 0%, #1e1020 50%, #140a18 100%) !important; }
[data-theme="dreamy"] #matrix-rain { opacity: 0.025; }

[data-theme="zen"] {
    --bg: #0a0a0a;
    --bg-card: rgba(128,128,128,0.06);
    --bg-card-h: rgba(128,128,128,0.1);
    --border: rgba(128,128,128,0.16);
    --border-h: rgba(128,128,128,0.3);
    --green: #808080;
    --green-dim: #666666;
    --green-dark: #303030;
    --green-glow: rgba(128,128,128,0.15);
    --red: #888888;
    --glass: rgba(10,10,10,0.94);
    --glass-b: rgba(128,128,128,0.08);
    --rain-color: #808080;
}
[data-theme="zen"] body { background: linear-gradient(180deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%) !important; }
[data-theme="zen"] #matrix-rain { opacity: 0.02; }

[data-theme="energetic"] {
    --bg: #1a1a00;
    --bg-card: rgba(255,255,0,0.06);
    --bg-card-h: rgba(255,255,0,0.1);
    --border: rgba(255,255,0,0.16);
    --border-h: rgba(255,255,0,0.3);
    --green: #FFFF00;
    --green-dim: #cccc00;
    --green-dark: #3d3d00;
    --green-glow: rgba(255,255,0,0.2);
    --red: #FF4444;
    --glass: rgba(26,26,0,0.94);
    --glass-b: rgba(255,255,0,0.1);
    --rain-color: #FFFF00;
}
[data-theme="energetic"] body { background: linear-gradient(180deg, #1a1a00 0%, #252500 50%, #1a1a00 100%) !important; }
[data-theme="energetic"] #matrix-rain { opacity: 0.025; }

[data-theme="mysterious"] {
    --bg: #0a0018;
    --bg-card: rgba(102,51,153,0.06);
    --bg-card-h: rgba(102,51,153,0.1);
    --border: rgba(102,51,153,0.16);
    --border-h: rgba(102,51,153,0.3);
    --green: #663399;
    --green-dim: #52297a;
    --green-dark: #1a0030;
    --green-glow: rgba(102,51,153,0.2);
    --red: #FFD700;
    --glass: rgba(10,0,24,0.94);
    --glass-b: rgba(102,51,153,0.1);
    --rain-color: #663399;
}
[data-theme="mysterious"] body { background: linear-gradient(180deg, #0a0018 0%, #140025 50%, #0a0018 100%) !important; }
[data-theme="mysterious"] #matrix-rain { opacity: 0.03; }

[data-theme="romantic"] {
    --bg: #1a0010;
    --bg-card: rgba(255,20,147,0.06);
    --bg-card-h: rgba(255,20,147,0.1);
    --border: rgba(255,20,147,0.16);
    --border-h: rgba(255,20,147,0.3);
    --green: #FF1493;
    --green-dim: #cc1076;
    --green-dark: #3d0030;
    --green-glow: rgba(255,20,147,0.2);
    --red: #FFD700;
    --glass: rgba(26,0,16,0.94);
    --glass-b: rgba(255,20,147,0.1);
    --rain-color: #FF1493;
}
[data-theme="romantic"] body { background: linear-gradient(180deg, #1a0010 0%, #250018 50%, #1a0010 100%) !important; }
[data-theme="romantic"] #matrix-rain { opacity: 0.03; }

[data-theme="spooky"] {
    --bg: #0a0000;
    --bg-card: rgba(255,102,0,0.06);
    --bg-card-h: rgba(255,102,0,0.1);
    --border: rgba(255,102,0,0.16);
    --border-h: rgba(255,102,0,0.3);
    --green: #FF6600;
    --green-dim: #cc5200;
    --green-dark: #3d1e00;
    --green-glow: rgba(255,102,0,0.2);
    --red: #8B0000;
    --glass: rgba(10,0,0,0.94);
    --glass-b: rgba(255,102,0,0.1);
    --rain-color: #FF6600;
}
[data-theme="spooky"] body { background: linear-gradient(180deg, #0a0000 0%, #140000 50%, #0a0000 100%) !important; }
[data-theme="spooky"] #matrix-rain { opacity: 0.03; }

/* ====== SEASONAL & HOLIDAY ====== */
[data-theme="xmas"] {
    --bg: #1a0000;
    --bg-card: rgba(34,139,34,0.06);
    --bg-card-h: rgba(34,139,34,0.1);
    --border: rgba(34,139,34,0.16);
    --border-h: rgba(34,139,34,0.3);
    --green: #228B22;
    --green-dim: #1b6f1b;
    --green-dark: #0a2a0a;
    --green-glow: rgba(34,139,34,0.2);
    --red: #DC143C;
    --glass: rgba(26,0,0,0.94);
    --glass-b: rgba(34,139,34,0.1);
    --rain-color: #228B22;
}
[data-theme="xmas"] body { background: linear-gradient(180deg, #1a0000 0%, #250000 50%, #1a0000 100%) !important; }
[data-theme="xmas"] #matrix-rain { opacity: 0.035; }

[data-theme="valentine"] {
    --bg: #1a0010;
    --bg-card: rgba(255,20,147,0.06);
    --bg-card-h: rgba(255,20,147,0.1);
    --border: rgba(255,20,147,0.16);
    --border-h: rgba(255,20,147,0.3);
    --green: #FF1493;
    --green-dim: #cc1076;
    --green-dark: #3d0030;
    --green-glow: rgba(255,20,147,0.2);
    --red: #FF69B4;
    --glass: rgba(26,0,16,0.94);
    --glass-b: rgba(255,20,147,0.1);
    --rain-color: #FF1493;
}
[data-theme="valentine"] body { background: linear-gradient(180deg, #1a0010 0%, #250018 50%, #1a0010 100%) !important; }
[data-theme="valentine"] #matrix-rain { opacity: 0.03; }

[data-theme="halloween"] {
    --bg: #0a0000;
    --bg-card: rgba(255,102,0,0.06);
    --bg-card-h: rgba(255,102,0,0.1);
    --border: rgba(255,102,0,0.16);
    --border-h: rgba(255,102,0,0.3);
    --green: #FF6600;
    --green-dim: #cc5200;
    --green-dark: #3d1e00;
    --green-glow: rgba(255,102,0,0.2);
    --red: #8B0000;
    --glass: rgba(10,0,0,0.94);
    --glass-b: rgba(255,102,0,0.1);
    --rain-color: #FF6600;
}
[data-theme="halloween"] body { background: linear-gradient(180deg, #0a0000 0%, #140000 50%, #0a0000 100%) !important; }
[data-theme="halloween"] #matrix-rain { opacity: 0.03; }

[data-theme="spring"] {
    --bg: #0a1008;
    --bg-card: rgba(255,183,197,0.06);
    --bg-card-h: rgba(255,183,197,0.1);
    --border: rgba(255,183,197,0.16);
    --border-h: rgba(255,183,197,0.3);
    --green: #FFB7C5;
    --green-dim: #cc929d;
    --green-dark: #3d2a30;
    --green-glow: rgba(255,183,197,0.2);
    --red: #90EE90;
    --glass: rgba(10,16,8,0.94);
    --glass-b: rgba(255,183,197,0.1);
    --rain-color: #FFB7C5;
}
[data-theme="spring"] body { background: linear-gradient(180deg, #0a1008 0%, #101810 50%, #0a1008 100%) !important; }
[data-theme="spring"] #matrix-rain { opacity: 0.025; }

[data-theme="summer"] {
    --bg: #001a18;
    --bg-card: rgba(0,206,209,0.06);
    --bg-card-h: rgba(0,206,209,0.1);
    --border: rgba(0,206,209,0.16);
    --border-h: rgba(0,206,209,0.3);
    --green: #00CED1;
    --green-dim: #00a5a8;
    --green-dark: #003a38;
    --green-glow: rgba(0,206,209,0.2);
    --red: #FF6B6B;
    --glass: rgba(0,26,24,0.94);
    --glass-b: rgba(0,206,209,0.1);
    --rain-color: #00CED1;
}
[data-theme="summer"] body { background: linear-gradient(180deg, #001a18 0%, #002520 50%, #001a18 100%) !important; }
[data-theme="summer"] #matrix-rain { opacity: 0.03; }

[data-theme="autumn"] {
    --bg: #1a0800;
    --bg-card: rgba(210,105,30,0.06);
    --bg-card-h: rgba(210,105,30,0.1);
    --border: rgba(210,105,30,0.16);
    --border-h: rgba(210,105,30,0.3);
    --green: #D2691E;
    --green-dim: #a85418;
    --green-dark: #3d1e00;
    --green-glow: rgba(210,105,30,0.2);
    --red: #8B0000;
    --glass: rgba(26,8,0,0.94);
    --glass-b: rgba(210,105,30,0.1);
    --rain-color: #D2691E;
}
[data-theme="autumn"] body { background: linear-gradient(180deg, #1a0800 0%, #250c00 50%, #1a0800 100%) !important; }
[data-theme="autumn"] #matrix-rain { opacity: 0.03; }

[data-theme="winter"] {
    --bg: #0a1018;
    --bg-card: rgba(176,224,230,0.06);
    --bg-card-h: rgba(176,224,230,0.1);
    --border: rgba(176,224,230,0.16);
    --border-h: rgba(176,224,230,0.3);
    --green: #B0E0E6;
    --green-dim: #8db3b8;
    --green-dark: #203540;
    --green-glow: rgba(176,224,230,0.2);
    --red: #6495ED;
    --glass: rgba(10,16,24,0.94);
    --glass-b: rgba(176,224,230,0.1);
    --rain-color: #B0E0E6;
}
[data-theme="winter"] body { background: linear-gradient(180deg, #0a1018 0%, #101820 50%, #0a1018 100%) !important; }
[data-theme="winter"] #matrix-rain { opacity: 0.025; }

/* ====== AESTHETIC & ART ====== */
[data-theme="lofi"] {
    --bg: #1a1814;
    --bg-card: rgba(74,74,74,0.08);
    --bg-card-h: rgba(74,74,74,0.14);
    --border: rgba(74,74,74,0.2);
    --border-h: rgba(74,74,74,0.35);
    --green: #4A4A4A;
    --green-dim: #3b3b3b;
    --green-dark: #202020;
    --green-glow: rgba(74,74,74,0.15);
    --red: #8B4513;
    --glass: rgba(26,24,20,0.94);
    --glass-b: rgba(74,74,74,0.08);
    --rain-color: #4A4A4A;
}
[data-theme="lofi"] body { background: linear-gradient(180deg, #1a1814 0%, #25201a 50%, #1a1814 100%) !important; }
[data-theme="lofi"] #matrix-rain { opacity: 0.03; }

[data-theme="y2k"] {
    --bg: #000818;
    --bg-card: rgba(0,191,255,0.06);
    --bg-card-h: rgba(0,191,255,0.1);
    --border: rgba(0,191,255,0.16);
    --border-h: rgba(0,191,255,0.3);
    --green: #00BFFF;
    --green-dim: #0098cc;
    --green-dark: #002840;
    --green-glow: rgba(0,191,255,0.2);
    --red: #FF00FF;
    --glass: rgba(0,8,24,0.94);
    --glass-b: rgba(0,191,255,0.1);
    --rain-color: #00BFFF;
}
[data-theme="y2k"] body { background: linear-gradient(180deg, #000818 0%, #00102a 50%, #000818 100%) !important; }
[data-theme="y2k"] #matrix-rain { opacity: 0.03; }

[data-theme="vhs"] {
    --bg: #000010;
    --bg-card: rgba(255,0,255,0.06);
    --bg-card-h: rgba(255,0,255,0.1);
    --border: rgba(255,0,255,0.16);
    --border-h: rgba(255,0,255,0.3);
    --green: #FF00FF;
    --green-dim: #cc00cc;
    --green-dark: #3d0040;
    --green-glow: rgba(255,0,255,0.2);
    --red: #00FFFF;
    --glass: rgba(0,0,16,0.94);
    --glass-b: rgba(255,0,255,0.1);
    --rain-color: #FF00FF;
}
[data-theme="vhs"] body { background: linear-gradient(180deg, #000010 0%, #00001a 50%, #000010 100%) !important; }
[data-theme="vhs"] #matrix-rain { opacity: 0.03; }

[data-theme="glitch"] {
    --bg: #0a0000;
    --bg-card: rgba(0,255,0,0.06);
    --bg-card-h: rgba(0,255,0,0.1);
    --border: rgba(0,255,0,0.16);
    --border-h: rgba(0,255,0,0.3);
    --green: #00FF00;
    --green-dim: #00cc00;
    --green-dark: #002a00;
    --green-glow: rgba(0,255,0,0.2);
    --red: #FF0000;
    --glass: rgba(10,0,0,0.94);
    --glass-b: rgba(0,255,0,0.1);
    --rain-color: #00FF00;
}
[data-theme="glitch"] body { background: linear-gradient(180deg, #0a0000 0%, #140000 50%, #0a0000 100%) !important; }
[data-theme="glitch"] #matrix-rain { opacity: 0.04; }

[data-theme="pastel"] {
    --bg: #181418;
    --bg-card: rgba(255,182,193,0.06);
    --bg-card-h: rgba(255,182,193,0.1);
    --border: rgba(255,182,193,0.16);
    --border-h: rgba(255,182,193,0.3);
    --green: #FFB6C1;
    --green-dim: #cc929a;
    --green-dark: #3d2a30;
    --green-glow: rgba(255,182,193,0.2);
    --red: #87CEEB;
    --glass: rgba(24,20,24,0.94);
    --glass-b: rgba(255,182,193,0.1);
    --rain-color: #FFB6C1;
}
[data-theme="pastel"] body { background: linear-gradient(180deg, #181418 0%, #201820 50%, #181418 100%) !important; }
[data-theme="pastel"] #matrix-rain { opacity: 0.025; }

[data-theme="brutalist"] {
    --bg: #1a1a1a;
    --bg-card: rgba(128,128,128,0.08);
    --bg-card-h: rgba(128,128,128,0.14);
    --border: rgba(128,128,128,0.2);
    --border-h: rgba(128,128,128,0.35);
    --green: #808080;
    --green-dim: #666666;
    --green-dark: #303030;
    --green-glow: rgba(128,128,128,0.15);
    --red: #B22222;
    --glass: rgba(26,26,26,0.94);
    --glass-b: rgba(128,128,128,0.08);
    --rain-color: #808080;
}
[data-theme="brutalist"] body { background: linear-gradient(180deg, #1a1a1a 0%, #252525 50%, #1a1a1a 100%) !important; }
[data-theme="brutalist"] #matrix-rain { opacity: 0.025; }

/* ====== LIGHT MODES ====== */
[data-theme="cloud"] {
    --bg: #ECEFF1;
    --bg-card: rgba(92,107,192,0.08);
    --bg-card-h: rgba(92,107,192,0.14);
    --border: rgba(92,107,192,0.2);
    --border-h: rgba(92,107,192,0.35);
    --green: #5C6BC0;
    --green-dim: #4a569a;
    --green-dark: #C5CAE9;
    --green-glow: rgba(92,107,192,0.15);
    --red: #EF5350;
    --glass: rgba(236,239,241,0.96);
    --glass-b: rgba(92,107,192,0.08);
    --rain-color: #5C6BC0;
}
[data-theme="cloud"] body { background: linear-gradient(180deg, #ECEFF1 0%, #CFD8DC 50%, #ECEFF1 100%) !important; }
[data-theme="cloud"] #matrix-rain { opacity: 0.02; }
[data-theme="cloud"] .cursor-dot { border-radius: 50%; }
[data-theme="cloud"] .cursor-ring { border-radius: 50%; }

[data-theme="sand"] {
    --bg: #FFF8E1;
    --bg-card: rgba(141,110,99,0.08);
    --bg-card-h: rgba(141,110,99,0.14);
    --border: rgba(141,110,99,0.2);
    --border-h: rgba(141,110,99,0.35);
    --green: #8D6E63;
    --green-dim: #70584f;
    --green-dark: #FFECB3;
    --green-glow: rgba(141,110,99,0.15);
    --red: #EF5350;
    --glass: rgba(255,248,225,0.96);
    --glass-b: rgba(141,110,99,0.08);
    --rain-color: #8D6E63;
}
[data-theme="sand"] body { background: linear-gradient(180deg, #FFF8E1 0%, #FFECB3 50%, #FFF8E1 100%) !important; }
[data-theme="sand"] #matrix-rain { opacity: 0.02; }
[data-theme="sand"] .cursor-dot { border-radius: 50%; }
[data-theme="sand"] .cursor-ring { border-radius: 50%; }

[data-theme="snow"] {
    --bg: #FAFAFA;
    --bg-card: rgba(55,71,79,0.08);
    --bg-card-h: rgba(55,71,79,0.14);
    --border: rgba(55,71,79,0.2);
    --border-h: rgba(55,71,79,0.35);
    --green: #37474F;
    --green-dim: #2c393f;
    --green-dark: #CFD8DC;
    --green-glow: rgba(55,71,79,0.15);
    --red: #EF5350;
    --glass: rgba(250,250,250,0.96);
    --glass-b: rgba(55,71,79,0.08);
    --rain-color: #37474F;
}
[data-theme="snow"] body { background: linear-gradient(180deg, #FAFAFA 0%, #ECEFF1 50%, #FAFAFA 100%) !important; }
[data-theme="snow"] #matrix-rain { opacity: 0.02; }
[data-theme="snow"] .cursor-dot { border-radius: 50%; }
[data-theme="snow"] .cursor-ring { border-radius: 50%; }

/* ====== SPECIAL & RARE ====== */
[data-theme="hologram"] {
    --bg: #020a10;
    --bg-card: rgba(0,229,255,0.06);
    --bg-card-h: rgba(0,229,255,0.1);
    --border: rgba(0,229,255,0.16);
    --border-h: rgba(0,229,255,0.3);
    --green: #00E5FF;
    --green-dim: #00b7cc;
    --green-dark: #003840;
    --green-glow: rgba(0,229,255,0.2);
    --red: #FF00FF;
    --glass: rgba(2,10,16,0.94);
    --glass-b: rgba(0,229,255,0.1);
    --rain-color: #00E5FF;
}
[data-theme="hologram"] body { background: linear-gradient(180deg, #020a10 0%, #041420 50%, #020a10 100%) !important; }
[data-theme="hologram"] #matrix-rain { opacity: 0.03; }

[data-theme="rainbow"] {
    --bg: #0a0a0a;
    --bg-card: rgba(255,107,107,0.06);
    --bg-card-h: rgba(255,107,107,0.1);
    --border: rgba(255,107,107,0.16);
    --border-h: rgba(255,107,107,0.3);
    --green: #FF6B6B;
    --green-dim: #cc5656;
    --green-dark: #3d2020;
    --green-glow: rgba(255,107,107,0.2);
    --red: #4ECDC4;
    --glass: rgba(10,10,10,0.94);
    --glass-b: rgba(255,107,107,0.1);
    --rain-color: #FF6B6B;
}
[data-theme="rainbow"] body { 
    background: linear-gradient(135deg, 
        rgba(255,0,0,0.1) 0%, 
        rgba(255,127,0,0.1) 14%, 
        rgba(255,255,0,0.1) 28%, 
        rgba(0,255,0,0.1) 42%, 
        rgba(0,0,255,0.1) 57%, 
        rgba(75,0,130,0.1) 71%, 
        rgba(148,0,211,0.1) 85%, 
        rgba(255,0,0,0.1) 100%
    ), #0a0a0a !important; 
}
[data-theme="rainbow"] #matrix-rain { opacity: 0.02; }

[data-theme="bloodmoon"] {
    --bg: #120000;
    --bg-card: rgba(220,20,60,0.06);
    --bg-card-h: rgba(220,20,60,0.1);
    --border: rgba(220,20,60,0.16);
    --border-h: rgba(220,20,60,0.3);
    --green: #DC143C;
    --green-dim: #b01030;
    --green-dark: #3d0010;
    --green-glow: rgba(220,20,60,0.2);
    --red: #FFD700;
    --glass: rgba(18,0,0,0.95);
    --glass-b: rgba(220,20,60,0.1);
    --rain-color: #DC143C;
}
[data-theme="bloodmoon"] body { background: linear-gradient(180deg, #120000 0%, #1e0000 50%, #120000 100%) !important; }
[data-theme="bloodmoon"] #matrix-rain { opacity: 0.035; }

[data-theme="inferno"] {
    --bg: #1a0600;
    --bg-card: rgba(255,87,34,0.06);
    --bg-card-h: rgba(255,87,34,0.1);
    --border: rgba(255,87,34,0.16);
    --border-h: rgba(255,87,34,0.3);
    --green: #FF5722;
    --green-dim: #cc461b;
    --green-dark: #3d1a0a;
    --green-glow: rgba(255,87,34,0.2);
    --red: #FFEB3B;
    --glass: rgba(26,6,0,0.94);
    --glass-b: rgba(255,87,34,0.1);
    --rain-color: #FF5722;
}
[data-theme="inferno"] body { background: linear-gradient(180deg, #1a0600 0%, #2a0a00 50%, #1a0600 100%) !important; }
[data-theme="inferno"] #matrix-rain { opacity: 0.03; }

[data-theme="opal"] {
    --bg: #0a0e0c;
    --bg-card: rgba(168,195,188,0.06);
    --bg-card-h: rgba(168,195,188,0.1);
    --border: rgba(168,195,188,0.16);
    --border-h: rgba(168,195,188,0.3);
    --green: #A8C3BC;
    --green-dim: #869c96;
    --green-dark: #2a3a35;
    --green-glow: rgba(168,195,188,0.2);
    --red: #FFB6C1;
    --glass: rgba(10,14,12,0.94);
    --glass-b: rgba(168,195,188,0.1);
    --rain-color: #A8C3BC;
}
[data-theme="opal"] body { background: linear-gradient(180deg, #0a0e0c 0%, #101814 50%, #0a0e0c 100%) !important; }
[data-theme="opal"] #matrix-rain { opacity: 0.025; }

[data-theme="ultraviolet"] {
    --bg: #0a0020;
    --bg-card: rgba(124,77,255,0.06);
    --bg-card-h: rgba(124,77,255,0.1);
    --border: rgba(124,77,255,0.16);
    --border-h: rgba(124,77,255,0.3);
    --green: #7C4DFF;
    --green-dim: #633ecc;
    --green-dark: #1a0050;
    --green-glow: rgba(124,77,255,0.2);
    --red: #FF4081;
    --glass: rgba(10,0,32,0.94);
    --glass-b: rgba(124,77,255,0.1);
    --rain-color: #7C4DFF;
}
[data-theme="ultraviolet"] body { background: linear-gradient(180deg, #0a0020 0%, #14002a 50%, #0a0020 100%) !important; }
[data-theme="ultraviolet"] #matrix-rain { opacity: 0.03; }

[data-theme="quantum"] {
    --bg: #000014;
    --bg-card: rgba(0,255,255,0.06);
    --bg-card-h: rgba(0,255,255,0.1);
    --border: rgba(0,255,255,0.16);
    --border-h: rgba(0,255,255,0.3);
    --green: #00FFFF;
    --green-dim: #00cccc;
    --green-dark: #003838;
    --green-glow: rgba(0,255,255,0.2);
    --red: #FF00FF;
    --glass: rgba(0,0,20,0.94);
    --glass-b: rgba(0,255,255,0.1);
    --rain-color: #00FFFF;
}
[data-theme="quantum"] body { background: linear-gradient(180deg, #000014 0%, #00001e 50%, #000014 100%) !important; }
[data-theme="quantum"] #matrix-rain { opacity: 0.03; }

/* ══════════════════════════════════════════════════════════════════════════
   EXTENDED CUSTOMIZATION OPTIONS - Animations, Buttons, Cards, Borders
   ══════════════════════════════════════════════════════════════════════════ */

/* Additional Font Families */
[data-font="rounded"] { --mono: 'Quicksand', 'DM Sans', sans-serif; }
[data-font="sharp"] { --mono: 'Space Grotesk', 'Inter', sans-serif; }
[data-font="classic"] { --mono: 'Fira Code', 'JetBrains Mono', monospace; }
[data-font="tech"] { --mono: 'Share Tech Mono', 'JetBrains Mono', monospace; }

/* Animation Styles */
[data-anim="fast"] * { transition-duration: 0.1s !important; animation-duration: 0.15s !important; }
[data-anim="bounce"] * { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }
[data-anim="elastic"] * { transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6) !important; }
[data-anim="none"] * { transition: none !important; animation: none !important; }

/* Button Styles */
[data-btn="rounded"] .btn-primary,
[data-btn="rounded"] .btn-secondary,
[data-btn="rounded"] .tool-mini,
[data-btn="rounded"] button { border-radius: 999px !important; }

[data-btn="sharp"] .btn-primary,
[data-btn="sharp"] .btn-secondary,
[data-btn="sharp"] .tool-mini,
[data-btn="sharp"] button { border-radius: 0 !important; }

[data-btn="glow"] .btn-primary,
[data-btn="glow"] button:not(.cust-tab):not(.tool-cat-btn) { 
    box-shadow: 0 0 20px var(--green-glow), 0 0 40px color-mix(in srgb, var(--green) 20%, transparent) !important; 
}

[data-btn="3d"] .btn-primary,
[data-btn="3d"] button:not(.cust-tab):not(.tool-cat-btn) { 
    box-shadow: 0 4px 0 var(--green-dark), 0 6px 10px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px);
}
[data-btn="3d"] .btn-primary:active,
[data-btn="3d"] button:not(.cust-tab):not(.tool-cat-btn):active { 
    box-shadow: 0 2px 0 var(--green-dark), 0 3px 5px rgba(0,0,0,0.3) !important;
    transform: translateY(0);
}

[data-btn="minimal"] .btn-primary,
[data-btn="minimal"] .btn-secondary,
[data-btn="minimal"] button:not(.cust-tab):not(.tool-cat-btn) { 
    background: transparent !important; 
    border: 1px solid var(--border) !important; 
}

[data-btn="gradient"] .btn-primary,
[data-btn="gradient"] button:not(.cust-tab):not(.tool-cat-btn) { 
    background: linear-gradient(135deg, var(--green), var(--green-dim)) !important; 
}

/* Card Styles */
[data-card="solid"] .glass-card,
[data-card="solid"] .tool-mini { 
    background: var(--bg-card) !important; 
    backdrop-filter: none !important; 
}

[data-card="border"] .glass-card,
[data-card="border"] .tool-mini { 
    background: transparent !important; 
    border: 1px solid var(--border) !important; 
    backdrop-filter: none !important; 
}

[data-card="glow"] .glass-card:hover,
[data-card="glow"] .tool-mini:hover { 
    box-shadow: 0 0 30px var(--green-glow) !important; 
}

[data-card="float"] .glass-card,
[data-card="float"] .tool-mini { 
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important; 
    transform: translateY(-2px); 
}

[data-card="flat"] .glass-card,
[data-card="flat"] .tool-mini { 
    box-shadow: none !important; 
    border: 1px solid var(--border) !important; 
}

/* Border Styles */
[data-border="rounded"] .glass-card,
[data-border="rounded"] .tool-mini,
[data-border="rounded"] .drop-zone,
[data-border="rounded"] input,
[data-border="rounded"] button { border-radius: 12px !important; }

[data-border="pill"] .glass-card,
[data-border="pill"] .tool-mini,
[data-border="pill"] .drop-zone,
[data-border="pill"] input,
[data-border="pill"] button { border-radius: 999px !important; }

[data-border="sharp"] .glass-card,
[data-border="sharp"] .tool-mini,
[data-border="sharp"] .drop-zone,
[data-border="sharp"] input,
[data-border="sharp"] button { border-radius: 0 !important; }

[data-border="cut"] .glass-card,
[data-border="cut"] .tool-mini,
[data-border="cut"] .drop-zone { 
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
}

/* Cursor Styles */
[data-cursor="trail"] .cursor-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--green);
    border-radius: inherit;
    animation: sparkleTrail 0.5s ease-out infinite;
}

[data-cursor="pulse"] .cursor-dot {
    animation: cursorPulse 1.5s ease-in-out infinite;
}

[data-cursor="rainbow"] .cursor-dot {
    animation: rainbowCursor 2s linear infinite;
}

@keyframes sparkleTrail {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

@keyframes cursorPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
}

@keyframes rainbowCursor {
    0% { background-color: #ff0000; }
    17% { background-color: #ff7f00; }
    33% { background-color: #ffff00; }
    50% { background-color: #00ff00; }
    67% { background-color: #0000ff; }
    83% { background-color: #8b00ff; }
    100% { background-color: #ff0000; }
}

/* Texture: Holographic */
[data-texture="holo"] body::after { 
    content:''; 
    position:fixed;inset:0;z-index:99998;pointer-events:none;
    background: linear-gradient(135deg, 
        rgba(255,0,0,0.03) 0%, 
        rgba(255,127,0,0.03) 20%, 
        rgba(255,255,0,0.03) 40%, 
        rgba(0,255,0,0.03) 60%, 
        rgba(0,0,255,0.03) 80%, 
        rgba(255,0,255,0.03) 100%
    );
    animation: holoShift 8s linear infinite;
}

@keyframes holoShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
}

/* Texture: Glitch */
[data-texture="glitch"] body::after { 
    content:''; 
    position:fixed;inset:0;z-index:99998;pointer-events:none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(var(--green), 0.03) 2px,
        rgba(var(--green), 0.03) 4px
    );
    animation: glitchFlicker 0.15s infinite;
}

@keyframes glitchFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Customization tabs wrapper for better overflow handling */
.cust-tabs-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cust-tabs-wrapper::-webkit-scrollbar { display: none; }

/* Theme dropdown category styling */
.theme-dropdown-header {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-dropdown-header span:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
}

.theme-dropdown-header .theme-random-btn {
    padding: 4px 10px;
    font-size: 9px;
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
    border-radius: 12px;
    color: var(--green);
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-dropdown-header .theme-random-btn:hover {
    background: color-mix(in srgb, var(--green) 25%, transparent);
    transform: scale(1.05);
}

.theme-category {
    margin-bottom: 12px;
}

.theme-category-label {
    padding: 6px 10px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-category-label .cat-count {
    font-size: 8px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 10px;
}

/* ====================================================================
   FILEVERSE IMPROVEMENTS BATCH - Quality of Life Upgrades
   ==================================================================== */

/* ====== ENHANCED VISUAL FEEDBACK ====== */

/* Improved Processing State Animation */
.processing-state {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.processing-state::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 8%, transparent), transparent);
    animation: processingWave 1.5s ease-in-out infinite;
}
@keyframes processingWave {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enhanced Drag-Over State */
.drop-zone.drag-over,
.tool-drop.drag-over {
    border-color: var(--green) !important;
    background: color-mix(in srgb, var(--green) 8%, transparent) !important;
    box-shadow: 0 0 40px color-mix(in srgb, var(--green) 15%, transparent), 
                inset 0 0 30px color-mix(in srgb, var(--green) 5%, transparent);
    transform: scale(1.02);
}
.drop-zone.drag-over::before,
.tool-drop.drag-over::before {
    border-color: var(--green) !important;
    border-style: solid !important;
}

/* Real-time Preview Container */
.realtime-preview {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    overflow: hidden;
}
.realtime-preview::before {
    content: 'LIVE PREVIEW';
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 15%, transparent);
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.realtime-preview::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 85px;
    width: 6px;
    height: 6px;
    background: var(--green);
    border-radius: 50%;
    animation: livePulse 2s infinite;
}

/* Preview Comparison Slider */
.preview-compare {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.preview-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--green);
    cursor: ew-resize;
    z-index: 10;
    box-shadow: 0 0 10px var(--green-glow);
}
.preview-compare-handle::before,
.preview-compare-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 16px;
    background: var(--green);
    border-radius: 3px;
    transform: translateY(-50%);
}
.preview-compare-handle::before { left: -10px; }
.preview-compare-handle::after { right: -10px; }
.preview-compare-label {
    position: absolute;
    bottom: 8px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.preview-compare-label.before { left: 8px; color: #ff6b6b; }
.preview-compare-label.after { right: 8px; color: var(--green); }

/* Enhanced Progress Bar */
.progress-enhanced {
    height: 8px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.progress-enhanced-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-dim), var(--green));
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}
.progress-enhanced-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShine 1.5s infinite;
}
@keyframes progressShine {
    0% { left: -100%; }
    100% { left: 100%; }
}
.progress-enhanced-text {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--green);
    text-shadow: 0 0 4px var(--bg);
}

/* Stepped Progress Indicator */
.progress-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
}
.progress-step {
    flex: 1;
    height: 4px;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.progress-step.active {
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}
.progress-step.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: stepShine 1s infinite;
}
@keyframes stepShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.progress-step.completed {
    background: color-mix(in srgb, var(--green) 40%, transparent);
}
.progress-step-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 600;
    white-space: nowrap;
    color: color-mix(in srgb, var(--green) 50%, transparent);
}
.progress-step.active .progress-step-label {
    color: var(--green);
}

/* ====== TOOL RESULT IMPROVEMENTS ====== */

/* Enhanced Result Card */
.tool-result-enhanced {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--green) 6%, transparent),
        color-mix(in srgb, var(--green) 2%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}
.tool-result-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
}

.result-success-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    border-radius: 20px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 12px;
}
.result-success-badge i {
    width: 14px;
    height: 14px;
}

.result-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    margin: 12px 0;
}
.result-stat-item {
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    text-align: center;
}
.result-stat-label {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--green) 45%, transparent);
    margin-bottom: 4px;
}
.result-stat-value {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
}
.result-stat-value.improvement {
    color: #22d956;
}
.result-stat-value.warning {
    color: #ffb000;
}

/* Download Button Enhancement */
.btn-download-enhanced {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--green), var(--green-dim));
    border: none;
    border-radius: 8px;
    color: #000;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s var(--spring);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--green) 30%, transparent);
    position: relative;
    overflow: hidden;
}
.btn-download-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}
.btn-download-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--green) 40%, transparent);
}
.btn-download-enhanced:hover::before {
    left: 100%;
}
.btn-download-enhanced:active {
    transform: translateY(0) scale(0.98);
}

/* ====== INPUT ENHANCEMENTS ====== */

/* Improved Sliders with Value Tooltip */
.slider-container {
    position: relative;
    padding-top: 24px;
}
.slider-value-tooltip {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: 3px 8px;
    background: var(--green);
    color: #000;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.slider-value-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--green);
}
.slider-container:hover .slider-value-tooltip,
.slider-container:focus-within .slider-value-tooltip {
    opacity: 1;
}

/* Range Slider with Track Fill */
.range-slider-filled {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(to right, 
        var(--green) 0%, 
        var(--green) var(--fill-percent, 50%), 
        color-mix(in srgb, var(--green) 15%, transparent) var(--fill-percent, 50%),
        color-mix(in srgb, var(--green) 15%, transparent) 100%
    );
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.range-slider-filled::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green);
    cursor: pointer;
    box-shadow: 0 0 10px var(--green-glow), 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s var(--spring), box-shadow 0.2s;
}
.range-slider-filled::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px var(--green-glow), 0 4px 12px rgba(0,0,0,0.4);
}

/* Number Input with Stepper */
.number-input-stepper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.number-input-stepper input {
    flex: 1;
    min-width: 60px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 90%, transparent);
    text-align: center;
    outline: none;
}
.number-input-stepper button {
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--green) 6%, transparent);
    border: none;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.number-input-stepper button:hover {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
}
.number-input-stepper button:active {
    background: color-mix(in srgb, var(--green) 25%, transparent);
}

/* ====== KEYBOARD SHORTCUTS INDICATOR ====== */
.kbd-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.kbd-shortcut kbd {
    padding: 1px 4px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 2px;
    font-size: 8px;
}

/* ====== TOOLTIP IMPROVEMENTS ====== */
.tooltip-enhanced {
    position: relative;
}
.tooltip-enhanced::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: color-mix(in srgb, var(--green) 90%, transparent);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}
.tooltip-enhanced::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}
.tooltip-enhanced:hover::before,
.tooltip-enhanced:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ====== WAVE/AUDIO VISUALIZATION IMPROVEMENTS ====== */
.waveform-container {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding: 4px;
}
.waveform-container canvas {
    display: block;
    width: 100%;
    height: 80px;
}
.waveform-timecode {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 8px;
    border-radius: 4px;
}
.waveform-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 8px;
    border-radius: 4px;
}
.waveform-position {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
    pointer-events: none;
    transition: left 0.05s linear;
}

/* ====== UNDO/REDO HISTORY ====== */
.history-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    max-height: 280px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 8px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
    cursor: pointer;
    transition: background 0.2s;
}
.history-item:hover {
    background: color-mix(in srgb, var(--green) 6%, transparent);
}
.history-item.current {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    border-left: 2px solid var(--green);
}
.history-item i {
    width: 14px;
    height: 14px;
    color: color-mix(in srgb, var(--green) 50%, transparent);
}
.history-item span {
    flex: 1;
    font-family: var(--mono);
    font-size: 10px;
    color: color-mix(in srgb, var(--green) 70%, transparent);
}
.history-item time {
    font-family: var(--mono);
    font-size: 8px;
    color: color-mix(in srgb, var(--green) 35%, transparent);
}

/* ====== QUICK ACTIONS FAB ====== */
.quick-actions-fab {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 80;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
}
.fab-main {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--green);
    color: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--green) 30%, transparent);
    transition: all 0.3s var(--spring);
}
.fab-main:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 30px color-mix(in srgb, var(--green) 40%, transparent);
}
.fab-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--green);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transition: all 0.3s var(--spring);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.quick-actions-fab.open .fab-action {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.fab-action:hover {
    background: var(--bg-card-h);
    border-color: var(--green);
}
.fab-action:nth-child(2) { transition-delay: 0.05s; }
.fab-action:nth-child(3) { transition-delay: 0.1s; }
.fab-action:nth-child(4) { transition-delay: 0.15s; }

/* ====== LOADING SKELETON ====== */
.skeleton {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--green) 5%, transparent) 25%,
        color-mix(in srgb, var(--green) 10%, transparent) 50%,
        color-mix(in srgb, var(--green) 5%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
}
.skeleton-text:last-child {
    width: 60%;
}
.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.skeleton-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ====== CONFIRMATION DIALOG ====== */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.confirm-dialog-overlay.active {
    opacity: 1;
    visibility: visible;
}
.confirm-dialog {
    width: 90%;
    max-width: 400px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s var(--spring);
}
.confirm-dialog-overlay.active .confirm-dialog {
    transform: scale(1) translateY(0);
}
.confirm-dialog-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirm-dialog-icon.warning {
    background: rgba(255, 176, 0, 0.15);
    color: #ffb000;
}
.confirm-dialog-icon.danger {
    background: rgba(255, 0, 64, 0.15);
    color: #ff0040;
}
.confirm-dialog-title {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
    text-align: center;
    margin-bottom: 8px;
}
.confirm-dialog-message {
    font-family: var(--mono);
    font-size: 12px;
    color: color-mix(in srgb, var(--green) 60%, transparent);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}
.confirm-dialog-actions {
    display: flex;
    gap: 12px;
}
.confirm-dialog-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-confirm-cancel {
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid var(--border);
    color: color-mix(in srgb, var(--green) 70%, transparent);
}
.btn-confirm-cancel:hover {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border-color: var(--border-h);
}
.btn-confirm-action {
    background: var(--green);
    border: none;
    color: #000;
}
.btn-confirm-action:hover {
    box-shadow: 0 0 20px var(--green-glow);
}
.btn-confirm-action.danger {
    background: #ff0040;
}
.btn-confirm-action.danger:hover {
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
}

/* ====== FILE INFO CARD ENHANCEMENT ====== */
.file-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 12px 0;
}
.file-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    flex-shrink: 0;
}
.file-info-details {
    flex: 1;
    min-width: 0;
}
.file-info-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 85%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-info-meta {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.file-info-meta span {
    font-family: var(--mono);
    font-size: 9px;
    color: color-mix(in srgb, var(--green) 45%, transparent);
}
.file-info-remove {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: color-mix(in srgb, var(--green) 40%, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.file-info-remove:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: rgba(255, 0, 64, 0.2);
    color: #ff4466;
}

/* ====== ACTION BUTTON IMPROVEMENTS ====== */
.btn-tool-enhanced {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.25s var(--smooth);
    position: relative;
    overflow: hidden;
}
.btn-tool-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}
.btn-tool-enhanced:hover::before {
    opacity: 1;
}
.btn-tool-enhanced.primary {
    background: var(--green);
    border: none;
    color: #000;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--green) 25%, transparent);
}
.btn-tool-enhanced.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--green) 35%, transparent);
}
.btn-tool-enhanced.secondary {
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid var(--border);
    color: var(--green);
}
.btn-tool-enhanced.secondary:hover {
    background: color-mix(in srgb, var(--green) 15%, transparent);
    border-color: var(--border-h);
}
.btn-tool-enhanced.ghost {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    color: color-mix(in srgb, var(--green) 60%, transparent);
}
.btn-tool-enhanced.ghost:hover {
    background: color-mix(in srgb, var(--green) 6%, transparent);
    color: var(--green);
}
.btn-tool-enhanced:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}
.btn-tool-enhanced.loading {
    pointer-events: none;
}
.btn-tool-enhanced.loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ====== TAGS/CHIPS ====== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 15%, transparent);
    border-radius: 20px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    color: color-mix(in srgb, var(--green) 70%, transparent);
    transition: all 0.2s;
}
.chip:hover {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-color: color-mix(in srgb, var(--green) 25%, transparent);
    color: var(--green);
}
.chip.active {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    border-color: var(--green);
    color: var(--green);
}
.chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    margin-left: 2px;
    margin-right: -4px;
    transition: all 0.2s;
}
.chip-remove:hover {
    background: rgba(255, 0, 64, 0.2);
    color: #ff4466;
}

/* ====== RESPONSIVE IMPROVEMENTS ====== */
@media (max-width: 640px) {
    .tool-panel-inner {
        padding: 8px !important;
    }
    .tool-result-enhanced {
        padding: 12px;
    }
    .result-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-actions-fab {
        bottom: 70px;
        right: 16px;
    }
    .fab-main {
        width: 44px;
        height: 44px;
    }
    .fab-action {
        width: 36px;
        height: 36px;
    }
    .history-panel {
        width: 180px;
    }
}

/* ====== DARK ELEVATED SURFACE ====== */
.surface-elevated {
    background: color-mix(in srgb, var(--green) 3%, var(--bg));
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.surface-elevated-lg {
    background: color-mix(in srgb, var(--green) 4%, var(--bg));
    border: 1px solid var(--border);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* ====== SUCCESS/ERROR/WARNING STATES ====== */
.state-success {
    background: rgba(34, 217, 86, 0.1) !important;
    border-color: rgba(34, 217, 86, 0.3) !important;
}
.state-error {
    background: rgba(255, 0, 64, 0.1) !important;
    border-color: rgba(255, 0, 64, 0.3) !important;
}
.state-warning {
    background: rgba(255, 176, 0, 0.1) !important;
    border-color: rgba(255, 176, 0, 0.3) !important;
}
.state-info {
    background: color-mix(in srgb, var(--green) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--green) 25%, transparent) !important;
}

/* ====== HELP TEXT ====== */
.help-text {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--green) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
    border-radius: 6px;
    margin: 8px 0;
}
.help-text i {
    width: 14px;
    height: 14px;
    color: color-mix(in srgb, var(--green) 50%, transparent);
    flex-shrink: 0;
    margin-top: 1px;
}
.help-text p {
    font-family: var(--mono);
    font-size: 10px;
    color: color-mix(in srgb, var(--green) 55%, transparent);
    line-height: 1.5;
    margin: 0;
}

/* ====== NOTIFICATION DOT ====== */
.notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff4466;
    border-radius: 50%;
    border: 2px solid var(--bg);
    animation: notificationPulse 2s infinite;
}
@keyframes notificationPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* ====== ANIMATED CHECKMARK ====== */
.checkmark-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkmarkPop 0.4s var(--spring);
}
@keyframes checkmarkPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.checkmark-circle svg {
    width: 20px;
    height: 20px;
    color: #000;
}
.checkmark-circle svg path {
    stroke-dasharray: 25;
    stroke-dashoffset: 25;
    animation: checkmarkDraw 0.4s ease 0.2s forwards;
}
@keyframes checkmarkDraw {
    to { stroke-dashoffset: 0; }
}

/* ============================================================
   BATCH IMPROVEMENTS — COMPREHENSIVE UPGRADE
   ============================================================ */

/* ====== BATCH 1-5: CORE ROBUSTNESS ====== */
/* Prevent layout shifts during loading */
.gate-overlay,
.loader-screen,
#guest-limit-modal {
    will-change: opacity;
    contain: layout style paint;
}

/* Ensure gate inputs are always visible and interactive */
.gate-input-wrap {
    position: relative;
    z-index: 1;
}
.gate-input {
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}
.gate-btn-primary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    z-index: 2;
}

/* Error state improvements */
.gate-error {
    animation: shakeError 0.4s ease;
}
@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* ====== BATCH 6-10: PERFORMANCE ====== */
/* GPU acceleration for frequently animated elements */
.tool-card,
.navbar-glass,
.modal-backdrop,
.tool-panel-wrap,
.side-panel-wrap {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint complexity */
.matrix-bg-element,
#matrix-rain,
#theme-particles {
    pointer-events: none;
    contain: strict;
}

/* Optimize scroll containers */
.tool-grid,
.queue-list-wrap,
.transfer-history,
.cust-tabs-wrapper,
.format-dropdown {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Lazy rendering hint for off-screen content */
[data-lazy-render] {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ====== BATCH 11-15: UX/UI IMPROVEMENTS ====== */
/* Better focus states for accessibility */
.gate-input:focus,
.tool-card:focus-visible,
.btn-primary:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Loading state styling */
.loading-state {
    opacity: 0.6;
    pointer-events: none;
}
.loading-state::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Smoother hover transitions */
.tool-card,
.format-option,
.queue-item {
    transition: transform 0.2s var(--smooth),
                box-shadow 0.2s var(--smooth),
                border-color 0.2s var(--smooth);
}

/* Better visual feedback for interactive elements */
button:active:not(:disabled),
.tool-card:active,
[role="button"]:active {
    transform: scale(0.98);
}

/* ====== BATCH 16-20: RESPONSIVENESS ====== */
/* Mobile gate screen improvements */
@media (max-width: 480px) {
    .gate-card {
        padding: 24px 20px;
        max-width: 100%;
        margin: 8px;
        border-radius: 10px;
    }
    .gate-title {
        font-size: 16px;
    }
    .gate-subtitle {
        font-size: 9px;
    }
    .gate-input {
        font-size: 16px; /* Prevents iOS zoom */
    }
    .gate-btn-primary,
    .gate-btn-guest {
        padding: 14px 16px;
        font-size: 13px;
    }
    .gate-logo-icon {
        font-size: 24px;
    }
}

/* Tablet responsiveness */
@media (min-width: 481px) and (max-width: 768px) {
    .gate-card {
        max-width: 420px;
    }
}

/* Safe areas for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .gate-overlay {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .navbar-glass {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .gate-btn-primary,
    .gate-btn-guest {
        min-height: 48px;
    }
    .gate-input-wrap {
        min-height: 48px;
    }
    /* Increase tap targets */
    .tool-card {
        min-height: 80px;
    }
    .format-option {
        padding: 14px 16px;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .gate-card {
        max-height: 90vh;
        overflow-y: auto;
        padding: 16px 20px;
    }
    .gate-logo {
        margin-bottom: 12px;
    }
    .gate-logo-icon {
        font-size: 20px;
        margin-bottom: 4px;
    }
    .gate-section {
        gap: 8px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .gate-card,
    .tool-card,
    .modal-content {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ====== BATCH 21-25: FEATURES ====== */
/* Offline indicator */
.offline-indicator {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    z-index: 1000;
    display: none;
    animation: slideDown 0.3s ease;
}
.offline-indicator.visible {
    display: flex;
    align-items: center;
    gap: 8px;
}
@keyframes slideDown {
    from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Enhanced drag & drop states */
.drag-active {
    border-color: var(--green) !important;
    background: color-mix(in srgb, var(--green) 8%, transparent) !important;
    box-shadow: 0 0 20px var(--green-glow) !important;
}
.drag-active::after {
    content: 'Drop files here';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--green);
    background: rgba(0,0,0,0.5);
    border-radius: inherit;
}

/* ====== BATCH 26-30: POLISH ====== */
/* Micro-interactions */
.gate-checkbox-mark {
    transition: transform 0.15s var(--spring),
                background 0.15s ease,
                border-color 0.15s ease;
}
.gate-checkbox:focus + .gate-checkbox-mark {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}

/* Button press effect */
.gate-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 0 10px var(--green-glow);
}

/* Input focus glow */
.gate-input-wrap:focus-within {
    animation: focusPulse 0.3s ease;
}
@keyframes focusPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 30%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 10%, transparent); }
    100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 6%, transparent); }
}

/* Success animation */
.gate-exit .gate-card {
    animation: successPop 0.4s ease forwards;
}
@keyframes successPop {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.02); }
    100% { transform: scale(0.95); opacity: 0; }
}

/* Smooth scroll anchors */
html {
    scroll-padding-top: 80px;
}

/* Print styles - hide non-essential elements */
@media print {
    .gate-overlay,
    .navbar-glass,
    #matrix-rain,
    #theme-particles,
    .scanline-overlay,
    .crt-vignette,
    .cursor-dot,
    .cursor-ring,
    #scroll-progress {
        display: none !important;
    }
    body {
        background: white;
        color: black;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gate-card {
        border-width: 2px;
    }
    .gate-input-wrap {
        border-width: 2px;
    }
    .gate-btn-primary {
        border-width: 2px;
    }
}

/* Force hardware acceleration on modals */
.gate-overlay,
#guest-limit-modal,
.modal-backdrop {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* ====================================================================
   ADDITIONAL TOOL STYLES - BATCH 2
   ==================================================================== */

/* Unit Converter & Timer displays */
.tool-mini[data-tool="countdown"] .tool-cat-dot,
.tool-mini[data-tool="unit-convert"] .tool-cat-dot,
.tool-mini[data-tool="timestamp"] .tool-cat-dot {
    background: var(--cyan) !important;
}

/* Large number displays */
#t-display {
    text-shadow: 0 0 20px color-mix(in srgb, var(--green) 40%, transparent);
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}
#t-display.text-amber-400 {
    color: #ffb000;
    text-shadow: 0 0 20px rgba(255, 176, 0, 0.4);
    animation: timerPulse 0.5s ease infinite;
}
@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Enhanced character counter stats */
#t-chars, #t-words, #t-lines {
    transition: transform 0.2s ease, color 0.2s ease;
}
#t-chars:hover, #t-words:hover, #t-lines:hover {
    transform: scale(1.1);
}

/* Color picker inputs */
input[type="color"] {
    padding: 2px;
    border: 2px solid color-mix(in srgb, var(--green) 20%, transparent);
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="color"]:hover {
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
input[type="color"]:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 10px var(--green-glow);
}

/* Shadow preview box */
#t-preview-box {
    transition: box-shadow 0.15s ease;
}

/* URL Parser chips */
.tool-result .chip {
    font-size: 9px;
    padding: 2px 8px;
}

/* Placeholder image canvas */
#t-canvas {
    background: repeating-conic-gradient(#1a1a2e 0% 25%, #0d0d15 0% 50%) 50%/16px 16px;
    transition: transform 0.3s ease;
}
#t-canvas:hover {
    transform: scale(1.02);
}

/* Password strength indicator improvements */
#t-strength-bar {
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

/* Hash output mono font */
[id^="hash-"] {
    font-family: 'SF Mono', 'Fira Code', monospace;
    word-break: break-all;
    user-select: all;
}

/* Aspect ratio preview box animation */
#t-preview-box {
    transition: width 0.2s ease, height 0.2s ease;
}

/* Diff checker line styles */
#t-diff > div {
    padding: 2px 4px;
    border-radius: 2px;
    margin: 1px 0;
}

/* CSS code display */
#t-css {
    font-family: 'SF Mono', 'Fira Code', monospace;
    user-select: all;
}

/* Real-time preview improvements */
.realtime-preview {
    position: relative;
    overflow: hidden;
}
.realtime-preview::after {
    content: 'LIVE';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--green) 20%, transparent);
    color: var(--green);
    border-radius: 3px;
    opacity: 0.6;
    letter-spacing: 0.1em;
}

/* Tool category badge pulse for new tools */
.tool-mini[data-tool="image-base64"],
.tool-mini[data-tool="hash-gen"],
.tool-mini[data-tool="color-convert"],
.tool-mini[data-tool="lorem-ipsum"],
.tool-mini[data-tool="password-gen"],
.tool-mini[data-tool="diff-check"],
.tool-mini[data-tool="timestamp"],
.tool-mini[data-tool="json-csv"],
.tool-mini[data-tool="aspect-ratio"],
.tool-mini[data-tool="find-replace"],
.tool-mini[data-tool="unit-convert"],
.tool-mini[data-tool="url-info"],
.tool-mini[data-tool="countdown"],
.tool-mini[data-tool="char-count"],
.tool-mini[data-tool="placeholder-img"],
.tool-mini[data-tool="css-shadow"] {
    position: relative;
}
.tool-mini[data-tool="image-base64"]::after,
.tool-mini[data-tool="hash-gen"]::after,
.tool-mini[data-tool="color-convert"]::after,
.tool-mini[data-tool="password-gen"]::after,
.tool-mini[data-tool="diff-check"]::after,
.tool-mini[data-tool="unit-convert"]::after,
.tool-mini[data-tool="countdown"]::after,
.tool-mini[data-tool="char-count"]::after,
.tool-mini[data-tool="placeholder-img"]::after,
.tool-mini[data-tool="css-shadow"]::after {
    content: 'NEW';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 6px;
    font-weight: bold;
    padding: 1px 4px;
    background: linear-gradient(135deg, #00ff41, #00d4ff);
    color: #000;
    border-radius: 2px;
    animation: newBadgePulse 2s ease-in-out infinite;
}
@keyframes newBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.95); }
}

/* ====================================================================
   RESPONSIVE POLISH
   ==================================================================== */
@media (max-width: 640px) {
    /* Timer display on mobile */
    #t-display {
        font-size: 2.5rem;
    }
    
    /* Smaller character counter on mobile */
    #t-chars, #t-words, #t-lines {
        font-size: 1.25rem;
    }
    
    /* Stack chips better on mobile */
    .chip {
        font-size: 9px;
        padding: 4px 8px;
    }
    
    /* Tool grid adjustments */
    #tools-grid {
        gap: 6px;
    }
    
    /* Hide NEW badges on mobile for space */
    .tool-mini::after {
        display: none !important;
    }
}

/* ====================================================================
   ACCESSIBILITY ENHANCEMENTS
   ==================================================================== */

/* Focus visible for keyboard navigation */
.btn-tool:focus-visible,
.chip:focus-visible,
.tool-mini:focus-visible,
.eq-preset-btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .realtime-preview::after,
    #t-display.text-amber-400,
    .tool-mini::after,
    .skeleton,
    .skeleton-text {
        animation: none !important;
    }
    
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .chip {
        border-width: 2px;
    }
    
    .tool-result {
        border-width: 2px;
    }
    
    input[type="color"] {
        border-width: 3px;
    }
}

/* Dark mode color scheme hint */
:root {
    color-scheme: dark;
}