/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

body {
    background-color: #03030c;
    color: #f0f0f5;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Audio Overlay Screen */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(8, 8, 20, 0.9) 0%, rgba(2, 2, 6, 0.98) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s;
}

.overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.overlay-card {
    background: rgba(18, 18, 36, 0.55);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(138, 43, 226, 0.15);
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.sparkles-container {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, rgba(138, 43, 226, 0) 70%);
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spark-icon {
    font-size: 2.2rem;
    color: #a855f7;
    animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        text-shadow: 0 0 25px rgba(168, 85, 247, 0.9), 0 0 35px rgba(236, 72, 153, 0.4);
        opacity: 1;
    }
}

.glow-text {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ffffff 30%, #e879f9 70%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}

.subtitle {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.description {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    font-weight: 300;
}

.btn {
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5);
    background: linear-gradient(135deg, #b967ff 0%, #8b5cf6 100%);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

.audio-notice {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Settings Toggle Button */
.icon-btn {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(18, 18, 36, 0.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 0;
    margin: 0;
    outline: none;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.icon-btn:hover {
    background: rgba(26, 26, 50, 0.75);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.3);
}

/* Control Panel */
.panel {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 380px;
    max-height: calc(100vh - 3rem);
    background: rgba(12, 12, 28, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 30px rgba(138, 43, 226, 0.08);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.5s;
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
}

.panel.collapsed {
    transform: translateX(420px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.panel-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.panel-header h2 i {
    color: #a855f7;
}

.close-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #ffffff;
}

.panel-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Custom Scrollbar for Panel Content */
.panel-content::-webkit-scrollbar {
    width: 6px;
}
.panel-content::-webkit-scrollbar-track {
    background: transparent;
}
.panel-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.settings-group {
    margin-bottom: 2rem;
}

.settings-group:last-child {
    margin-bottom: 0;
}

.settings-group h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #a855f7;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
    font-size: 0.92rem;
    color: #cbd5e1;
}

.setting-row:last-child {
    margin-bottom: 0;
}

.setting-row label {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Tooltip */
.tooltip {
    cursor: help;
    color: #64748b;
    transition: color 0.2s;
}
.tooltip:hover {
    color: #cbd5e1;
}

/* Select inputs */
.select-input {
    background: rgba(20, 20, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f0f0f5;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    min-width: 140px;
    transition: border-color 0.2s, background 0.2s;
}

.select-input:focus {
    border-color: #a855f7;
    background: rgba(30, 30, 60, 0.8);
}

.select-input option {
    background-color: #0c0c1c;
    color: #f0f0f5;
}

/* Range sliders */
.range-setting {
    flex-direction: column;
    align-items: stretch;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.range-labels span {
    font-size: 0.8rem;
    color: #a855f7;
    font-weight: 600;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    outline: none;
    transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #a855f7;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    transition: transform 0.1s, background 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #c084fc;
}

input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #a855f7;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    border: none;
    transition: transform 0.1s, background 0.1s;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: #c084fc;
}

/* Toggle Switches */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round, .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .3s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #cbd5e1;
    transition: .3s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #a855f7;
}

input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #ffffff;
}

.panel-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    line-height: 1.4;
}

/* Responsive styles */
@media (max-width: 450px) {
    .panel {
        width: calc(100% - 2rem);
        right: 1rem;
        top: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    .panel.collapsed {
        transform: translateX(110%) scale(0.95);
    }
    
    .icon-btn {
        top: 1rem;
        right: 1rem;
    }
}

/* =========================================================================
   Day Mode Settings & Backdrop Styles
   ========================================================================= */

body.day-mode {
    background: linear-gradient(to bottom, #4fa3fc 0%, #9dd1fd 50%, #e1effe 100%);
    transition: background 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

body.day-mode::before, body.day-mode::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 120px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    filter: blur(15px);
    z-index: 0;
    pointer-events: none;
    animation: floatClouds 90s linear infinite;
    opacity: 0;
    transition: opacity 1.5s ease;
}

body.day-mode::before {
    top: 10%;
    left: -330px;
    opacity: 0.8;
}

body.day-mode::after {
    top: 30%;
    left: -330px;
    animation-delay: -45s;
    animation-duration: 120s;
    transform: scale(0.65);
    opacity: 0.7;
}

@keyframes floatClouds {
    0% {
        left: -350px;
    }
    100% {
        left: 100vw;
    }
}

/* Smooth transition when changing theme background */
body {
    transition: background 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================================================
   Music Sync Custom UI Elements
   ========================================================================= */

.btn-small {
    padding: 0.45rem 1.1rem;
    font-size: 0.82rem;
    border-radius: 12px;
    font-weight: 500;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

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

.file-name-text {
    font-size: 0.78rem;
    color: #94a3b8;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}

.music-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* =========================================================================
   Timeline / Choreography Panel Styles
   ========================================================================= */

.timeline-container {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    height: 145px;
    background: rgba(10, 10, 26, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    z-index: 95;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
                0 0 25px rgba(138, 43, 226, 0.05);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.5s;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.timeline-container.hidden {
    transform: translateY(180px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.timeline-header {
    padding: 0.75rem 1.25rem 0.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-modes {
    display: flex;
    gap: 0.5rem;
}

.mode-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mode-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.mode-tab.active {
    color: #ffffff;
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.timeline-actions {
    display: flex;
    gap: 0.6rem;
}

.timeline-body {
    padding: 0.5rem 1.25rem;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#timeline-canvas {
    width: 100%;
    height: 60px;
    background: rgba(5, 5, 15, 0.4);
    border-radius: 8px;
    cursor: pointer;
}

.timeline-time-info {
    display: flex;
    justify-content: flex-end;
    font-size: 0.78rem;
    color: #cbd5e1;
    margin-top: 0.3rem;
    font-family: monospace;
    letter-spacing: 1px;
}

/* Adjust Canvas position to avoid overlapping timeline at bottom */
canvas#fireworks-canvas {
    height: 100vh;
}

/* Firework choreography editor */
#show-editor-toggle { position:fixed; left:1.5rem; top:1.5rem; z-index:110; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.75rem 1rem; color:#fff; background:linear-gradient(135deg,rgba(124,58,237,.92),rgba(219,39,119,.86)); font:600 .9rem inherit; cursor:pointer; box-shadow:0 8px 28px rgba(76,29,149,.38); display:flex; gap:.55rem; align-items:center; }
.show-editor { position:fixed; z-index:105; left:1.25rem; right:1.25rem; bottom:1.25rem; height:min(390px,55vh); color:#e8edf7; background:rgba(7,9,24,.91); border:1px solid rgba(255,255,255,.13); border-radius:18px; box-shadow:0 22px 70px rgba(0,0,0,.58); backdrop-filter:blur(22px); display:flex; flex-direction:column; transition:.35s ease; overflow:hidden; }
.show-editor.collapsed { transform:translateY(calc(100% + 2rem)); opacity:0; pointer-events:none; }
.show-editor__header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.show-editor__header strong { font-size:1rem; }.show-editor__header small { color:#8592a9; margin-left:.5rem; }
.show-editor__actions { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.show-editor button,.show-editor select,.show-editor input[type=number] { color:#e8edf7; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:.42rem .62rem; font:500 .78rem inherit; }
.show-editor button { cursor:pointer; }.show-editor button:hover { background:rgba(168,85,247,.25); border-color:rgba(192,132,252,.55); }
.show-editor__actions label { color:#aab5c8; font-size:.78rem; }.show-editor__actions input { width:55px; }
.show-name { width:130px!important; border-color:rgba(251,191,36,.38)!important; }
.show-editor__actions #editor-track { min-width:170px; }.analysis-state { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6ee7b7; font-size:.72rem; }.analysis-state.working { color:#fbbf24; animation:analysisPulse 1s ease-in-out infinite; }.sensitivity-label input { width:72px!important; vertical-align:middle; margin-left:.25rem; }
@keyframes analysisPulse { 50% { opacity:.45; } }
.sequence-ruler { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; padding:.45rem 1rem .1rem; color:#8895ab; font-size:.7rem; text-align:center; }
.waveform-wrap { position:relative; }.waveform-wrap small { position:absolute; right:7px; bottom:5px; padding:2px 5px; border-radius:4px; color:#9ca8bb; background:rgba(3,5,15,.65); pointer-events:none; }
#sequence-canvas { position:relative; width:100%; height:82px; background:rgba(0,0,0,.28); border-radius:8px; cursor:crosshair; }
.sequence-transport { display:flex; gap:.55rem; align-items:center; padding:.3rem 1rem .55rem; border-bottom:1px solid rgba(255,255,255,.08); }
.sequence-transport input { flex:1; }.sequence-transport output { min-width:132px; font:12px monospace; color:#c9d4e6; }
#sequence-status { color:#6ee7b7; min-width:72px; font-size:.75rem; }
.cue-list { overflow:auto; padding:.35rem .7rem .8rem; }
.cue-row { display:grid; grid-template-columns:38px 110px 120px 110px minmax(135px,1fr) minmax(135px,1fr) 95px 34px 34px; gap:.45rem; align-items:center; padding:.38rem; margin:.25rem 0; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.025); }
.cue-row.selected { border-color:rgba(251,191,36,.55); background:rgba(251,191,36,.06); }
.cue-row.cue-past { opacity:.48; }.cue-row.cue-live { border-color:#ec4899; background:rgba(236,72,153,.13); box-shadow:inset 3px 0 #ec4899; opacity:1; }.cue-row.cue-next { opacity:.88; }
.cue-row label { display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:#9ba8bc; white-space:nowrap; }
.cue-row input[type=number] { width:58px; padding:.3rem; }.cue-row input[type=range] { min-width:55px; }.cue-row em { font-style:normal; color:#cad3e2; font-size:.68rem; }
.cue-index { color:#38bdf8!important; padding:.34rem!important; }.flight-line { color:#657289; font-size:.7rem; text-align:center; }.flight-line b { color:#c084fc; }.cue-empty { color:#8491a7; text-align:center; padding:1.1rem; }
@media (max-width:900px) { .show-editor { left:.5rem; right:.5rem; bottom:.5rem; height:70vh; }.show-editor__header { align-items:flex-start; }.show-editor__header small { display:none; }.cue-row { grid-template-columns:34px 1fr 1fr 34px; }.cue-row .flight-line { display:none; }.cue-row label:nth-of-type(n+3),.cue-row select { grid-column:span 2; } #show-editor-toggle span { display:none; } }

.position-editor { position:fixed; inset:0; z-index:104; pointer-events:none; }
.position-editor.hidden { display:none; }.position-editor svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#position-path { stroke:rgba(251,191,36,.75); stroke-width:2; stroke-dasharray:7 6; filter:drop-shadow(0 0 5px rgba(251,191,36,.8)); }
.position-handle { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:72px; padding:.5rem .65rem; color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:12px; cursor:grab; touch-action:none; font:700 .72rem inherit; box-shadow:0 7px 24px rgba(0,0,0,.45); }
.position-handle:active { cursor:grabbing; transform:translate(-50%,-50%) scale(1.08); }.position-handle i { font-size:1.15rem; }
.launch-handle { background:rgba(14,165,233,.88); }.burst-handle { background:rgba(236,72,153,.9); box-shadow:0 0 0 8px rgba(236,72,153,.08),0 7px 24px rgba(0,0,0,.45); }
.position-help { position:absolute; top:78px; left:50%; transform:translateX(-50%); padding:.45rem .8rem; border-radius:999px; color:#fde68a; background:rgba(5,8,20,.72); border:1px solid rgba(251,191,36,.25); font-size:.75rem; }

/* Left-side sequence dock: keeps the firework sky unobstructed. */
.show-editor { left:1rem; right:auto; top:5rem; bottom:1rem; width:390px; height:auto; border-radius:16px; }
.show-editor.collapsed { transform:translateX(calc(-100% - 2rem)); }
.show-editor__header { display:block; padding:.8rem; }
.show-editor__header > div:first-child { display:flex; align-items:baseline; margin-bottom:.65rem; }
.show-editor__actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:stretch; }
.show-editor__actions > * { min-width:0!important; width:100%!important; }
.show-editor__actions #show-name,.show-editor__actions #editor-track,.show-editor__actions .analysis-state { grid-column:span 2; }
.show-editor__actions #sequence-import { grid-column:span 2; white-space:nowrap; }
.show-editor__actions .analysis-state { max-width:none; padding:.38rem .25rem; }
.show-editor__actions label { display:flex; align-items:center; justify-content:center; gap:.2rem; }
.sequence-ruler { grid-template-columns:30px 1fr 30px; padding:.55rem .55rem .12rem; }
#sequence-canvas { height:96px; }.waveform-wrap small { font-size:.57rem; left:5px; right:auto; }
.sequence-transport { display:grid; grid-template-columns:auto auto 1fr; padding:.45rem .65rem; gap:.4rem; }
.sequence-transport input { grid-column:1/-1; grid-row:1; }.sequence-transport output { grid-column:3; min-width:0; text-align:right; }.sequence-transport #sequence-status { grid-column:1/-1; min-height:14px; }
.cue-list { flex:1; padding:.35rem .5rem .75rem; scroll-behavior:smooth; }
.cue-row { grid-template-columns:34px 1fr 1fr 34px; gap:.35rem; padding:.45rem; }
.cue-row .flight-line { display:none; }.cue-row label:nth-of-type(n+3),.cue-row select { grid-column:span 2; }
.cue-row label { justify-content:space-between; }.cue-row input[type=range] { max-width:92px; }
#show-editor-toggle { left:1rem; }
.bottom-timeline { position:fixed; z-index:105; left:420px; right:1rem; bottom:1rem; height:142px; color:#e8edf7; background:rgba(7,9,24,.88); border:1px solid rgba(255,255,255,.13); border-radius:15px; box-shadow:0 16px 48px rgba(0,0,0,.48); backdrop-filter:blur(18px); transition:.35s ease; overflow:hidden; }
.bottom-timeline.collapsed { transform:translateY(calc(100% + 2rem)); opacity:0; pointer-events:none; }
.bottom-timeline .sequence-ruler { height:96px; }.bottom-timeline #sequence-canvas { height:78px; }
.bottom-timeline .sequence-transport { display:grid; grid-template-columns:auto auto 1fr auto; padding:.28rem .65rem; border:0; }
.bottom-timeline .sequence-transport input { grid-column:3; grid-row:auto; }.bottom-timeline .sequence-transport output { grid-column:4; }.bottom-timeline .sequence-transport #sequence-status { display:none; }
.sky-hud { position:fixed; z-index:90; top:1.3rem; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:auto auto; column-gap:.45rem; align-items:center; padding:.45rem .8rem; border:1px solid rgba(91,211,255,.32); color:#a5ebff; background:rgba(2,13,24,.48); border-radius:7px; font:600 .72rem monospace; letter-spacing:.14em; pointer-events:none; backdrop-filter:blur(5px); }
.sky-hud i { grid-row:span 2; }.sky-hud small { color:#668da0; font-size:.55rem; }.sky-hud.hidden { display:none; }
body.sky-view { background:radial-gradient(circle at 50% 45%,#071827 0%,#020711 58%,#000207 100%); }
body.sky-view #fireworks-canvas { filter:saturate(1.08) contrast(1.04); }
@media (max-width:700px) { .show-editor { left:.5rem; top:4.5rem; bottom:10rem; width:min(390px,calc(100vw - 1rem)); height:auto; }.show-editor.collapsed { transform:translateX(calc(-100% - 1rem)); }.bottom-timeline { left:.5rem; right:.5rem; bottom:.5rem; } }

/* The editor owns music selection and sequencing; hide the legacy duplicates. */
#timeline-container { display:none!important; }
#control-panel .settings-group:first-child { display:none; }
#show-editor-toggle.hidden,#settings-toggle.hidden { display:none; }
.live-entry { color:#fff!important; background:linear-gradient(135deg,#dc2626,#be123c)!important; border-color:rgba(255,120,120,.55)!important; }
.live-panel { position:fixed; z-index:120; left:50%; bottom:1.5rem; transform:translateX(-50%); min-width:430px; padding:.75rem 1rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem 1rem; color:#edf6ff; background:rgba(3,8,16,.72); border:1px solid rgba(255,255,255,.16); border-radius:14px; box-shadow:0 14px 50px rgba(0,0,0,.55); backdrop-filter:blur(15px); }
.live-panel.hidden { display:none; }.live-badge { color:#ff7885; font:700 .68rem monospace; letter-spacing:.12em; }.live-badge i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#ef4444; box-shadow:0 0 12px #ef4444; animation:livePulse 1.2s infinite; }
.live-panel strong { font-size:.9rem; }.live-time { font:12px monospace; color:#a8c5d8; }.live-actions { grid-column:1/-1; display:flex; justify-content:center; gap:.5rem; }
.live-actions button { padding:.52rem .85rem; border:1px solid rgba(255,255,255,.16); border-radius:8px; color:#fff; background:rgba(255,255,255,.08); cursor:pointer; }.live-actions #live-play { background:linear-gradient(135deg,#dc2626,#be123c); }
@keyframes livePulse { 50% { opacity:.35; transform:scale(.75); } }
body.live-mode #settings-toggle,body.live-mode #show-editor-toggle { display:none; }
@media(max-width:520px){.live-panel{min-width:0;width:calc(100% - 1rem);bottom:.5rem;}}

/* Multi-device linked display */
#linked-toggle{position:fixed;z-index:111;left:1rem;top:4.65rem;display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;border:1px solid rgba(76,211,255,.32);border-radius:999px;color:#dff8ff;background:rgba(5,25,39,.82);box-shadow:0 8px 25px rgba(0,0,0,.35);cursor:pointer;font:600 .82rem inherit;backdrop-filter:blur(12px)}
.linked-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,3,10,.78);backdrop-filter:blur(16px)}.linked-modal.hidden,.linked-view.hidden,.linked-home.hidden{display:none}
.linked-card{width:min(620px,100%);max-height:92vh;overflow:auto;color:#eaf7ff;background:linear-gradient(145deg,rgba(9,23,39,.98),rgba(8,10,27,.98));border:1px solid rgba(122,220,255,.2);border-radius:22px;box-shadow:0 25px 80px rgba(0,0,0,.65)}
.linked-card header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08)}.linked-card header b{font-size:1.05rem}.linked-card header small{display:block;margin-top:.25rem;color:#7892a6;font-size:.7rem}.linked-card button,.linked-card input,.linked-card select{border:1px solid rgba(255,255,255,.13);border-radius:9px;color:#eef8ff;background:rgba(255,255,255,.07);padding:.65rem .8rem;font:500 .85rem inherit}.linked-card button{cursor:pointer}.linked-card header button{font-size:1.1rem;padding:.3rem .55rem}
.linked-home{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.25rem}.linked-home button{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.linked-home i{font-size:1.8rem;color:#58d9ff}.linked-home b{font-size:1rem}.linked-home span{color:#859caf;font-size:.72rem}
.linked-view{padding:1.2rem}.linked-view h3{margin-bottom:1rem}.linked-view>label{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.7rem 0;color:#b9c9d5;font-size:.85rem}.linked-view input,.linked-view select{min-width:180px}.linked-primary{color:#fff!important;background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;border-color:#5cd6ff!important;font-weight:700!important}
.linked-note{margin:-.25rem 0 .9rem;color:#6f8b9d;font-size:.72rem;line-height:1.5}
.layout-preview,.device-map{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:.4rem;margin:1rem 0;padding:.6rem;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(0,0,0,.2)}.layout-preview i{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid rgba(85,205,255,.25);border-radius:6px;color:#6d8797;background:#0a1a27;font-style:normal}.layout-preview i.active{color:#fff;background:#0ea5e9;box-shadow:0 0 16px rgba(14,165,233,.6)}
.pair-code{text-align:center}.pair-code small{display:block;color:#7c95a9}.pair-code strong{display:block;margin:.3rem;font:800 2.4rem monospace;letter-spacing:.28em;color:#7ee5ff;text-shadow:0 0 18px rgba(71,211,255,.35)}#host-status{text-align:center;color:#91a8b9}.device-slot{min-height:76px;display:grid;grid-template-columns:auto 1fr;gap:.25rem .5rem;align-items:center;padding:.55rem;border:1px dashed rgba(255,255,255,.14);border-radius:8px}.device-slot.online{border-style:solid;border-color:rgba(74,222,128,.45);background:rgba(22,101,52,.1)}.device-slot b{grid-row:span 2;color:#54d7ff}.device-slot span{font-size:.72rem;overflow:hidden;text-overflow:ellipsis}.device-slot select{min-width:0;padding:.3rem;font-size:.68rem}.host-actions{display:flex;justify-content:center;gap:.6rem}.ready-icon{text-align:center;font-size:2.5rem;color:#4ade80}.child-ready{text-align:center}#join-error{color:#fb7185;font-size:.8rem}
body.linked-child #linked-toggle,body.linked-child #sky-hud,body.linked-child #live-panel,body.linked-child #settings-toggle,body.linked-child #show-editor-toggle{display:none!important}
.linked-countdown{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:radial-gradient(circle,rgba(5,30,51,.5),rgba(0,3,10,.9));pointer-events:none}.linked-countdown.hidden{display:none}.linked-countdown small{font-size:.85rem;letter-spacing:.22em;color:#9ddfff}.linked-countdown strong{font:800 clamp(8rem,30vw,18rem) 'Outfit',sans-serif;line-height:1;text-shadow:0 0 30px #38bdf8,0 0 90px rgba(56,189,248,.6);animation:countBeat 1s ease-out infinite}@keyframes countBeat{0%{transform:scale(1.25);opacity:.35}28%{transform:scale(1);opacity:1}100%{transform:scale(.82);opacity:.7}}
@media(max-width:600px){#linked-toggle span{display:none}.linked-home{grid-template-columns:1fr}.linked-home button{min-height:110px}.linked-view>label{align-items:stretch;flex-direction:column}.linked-view input,.linked-view select{width:100%;min-width:0}.pair-code strong{font-size:1.8rem}.linked-card{max-height:96vh}.device-map{gap:.25rem}.device-slot{padding:.35rem}}