:root{--bg:#0f1012;--panel:#1b1e24;--muted:#9aa0a6;--text:#e8eaed;--accent:#22c55e}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.app{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;padding:16px;max-width:1280px;margin:0 auto;align-items:start}
.left{background:#0c0d10;border-radius:8px;padding:12px}
.player{position:relative;background:#000;border-radius:8px;overflow:hidden}
.timeline{width:100%;margin-top:4px}
.preview{width:100%;height:auto;display:block}
.overlay-btn{position:absolute;left:12px;bottom:12px;background:#ffffffdd;color:#111;border:0;border-radius:6px;padding:6px 10px;font-weight:600;cursor:pointer}
.hidden{display:none}
.status{margin-top:8px;color:var(--muted);text-align:center;font-size:12px}
.log{display:none}
.right{background:var(--panel);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 48px);overflow:auto;position:sticky;top:16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;text-align:left}
.left{min-height:0}
/* Subtle scrollbar */
.right::-webkit-scrollbar{width:8px}
.right::-webkit-scrollbar-thumb{background:#2a2f39;border-radius:8px}
.right::-webkit-scrollbar-track{background:transparent}
.right h2{margin:0 0 8px 0;font-size:18px;font-weight:700;letter-spacing:.2px}
.text-list-container{margin-top:10px}
.text-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
/* Hide single-item list to avoid duplicate-looking entry under Text */
.text-list:has(.text-item:only-child){display:none}
.text-item{background:#2a2f39;padding:8px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;justify-content:space-between;align-items:center}
.text-item.selected{border-color:transparent}
.delete-text-btn{background:none;border:none;color:#cbd5e1;cursor:pointer;font-size:14px}
.tabs{display:flex;gap:6px}
.tab{background:#2a2f39;color:#cbd5e1;border:1px solid #3b4352;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease}
.tab:hover{background:#3b4352}
.tab:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(34,197,94,.35)}
.tab:active{background:#464f61}
.tab[aria-pressed="true"],.tab.active{background:#3b4352;border-color:#55607a;color:#e5e7eb}
.tab:disabled{opacity:.55;cursor:not-allowed}
.text-list-container .tab{width:100%;justify-content:center;display:flex}
.text-list-container .tab::before{content:"+";margin-right:6px;font-weight:900}
.source-pane{display:flex;gap:8px}
input[type="url"],input[type="text"],input[type="number"],select{width:100%;padding:8px;background:#0f1117;color:#e2e8f0;border:1px solid #2a2f39;border-radius:6px}
input[type="color"]{width:100%;height:36px;border:1px solid #2a2f39;background:#0f1117;border-radius:6px}
input[type="file"]{width:100%}
/* Style the native "Choose File" button */
/* Simple neutral button for file selector to avoid confusion */
input[type="file"]::file-selector-button{background:#2a2f39;border:1px solid #3b4352;border-radius:6px;color:#e2e8f0;padding:6px 10px;margin-right:8px;font-weight:600;cursor:pointer}
input[type="file"]::file-selector-button:hover{background:#3b4352}
/* WebKit legacy pseudo-element */
input[type="file"]::-webkit-file-upload-button{background:#2a2f39;border:1px solid #3b4352;border-radius:6px;color:#e2e8f0;padding:6px 10px;margin-right:8px;font-weight:600;cursor:pointer}
input[type="file"]::-webkit-file-upload-button:hover{background:#3b4352}

/* Video chooser (first file input) uses white button with black text */
#videoFile::file-selector-button{background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#0b0b0c;padding:6px 10px;margin-right:8px;font-weight:600;cursor:pointer}
#videoFile::file-selector-button:hover{background:#f3f4f6}
#videoFile::-webkit-file-upload-button{background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#0b0b0c;padding:6px 10px;margin-right:8px;font-weight:600;cursor:pointer}
#videoFile::-webkit-file-upload-button:hover{background:#f3f4f6}
label{color:#cbd5e1;display:block;margin:8px 0 4px}
.row{display:flex;gap:8px;align-items:center}
.row.compact input{flex:1}
.row.compact button{white-space:nowrap}
.reset-btn{margin-left:8px;background:#2a2f39;color:#cbd5e1;border:1px solid #3b4352;border-radius:6px;padding:4px 8px;cursor:pointer}
.control{display:flex;align-items:center;gap:8px}
.control label{flex:1}
.control .num{width:90px;background:#0f1117;color:#e2e8f0;border:1px solid #2a2f39;border-radius:6px;padding:6px 8px}
.right label + input[type="range"]{margin-top:4px}
.row .col{flex:1}
.to{color:#94a3b8}
/* Pretty accordions */
details{background:#151922;border-radius:12px;padding:0;border:1px solid #212633;overflow:visible}
details.section{padding:0}
/* Use block display for better native toggle reliability across browsers */
details>summary{list-style:none;cursor:pointer;padding:12px 14px;background:#11151d;color:#e2e8f0;font-weight:700;display:block;border-radius:12px;user-select:none}
details>summary::before{content:"▸";display:inline-block;transform:rotate(0deg);transition:transform .15s ease;color:#94a3b8}
details[open]>summary::before{transform:rotate(90deg)}
details>summary::-webkit-details-marker{display:none}
/* Add a subtle divider and spacing when open */
details[open]{padding-bottom:10px}
details[open]>summary{border-bottom:1px solid #212633;border-bottom-left-radius:0;border-bottom-right-radius:0}
details+details{margin-top:8px}
/* Side padding for content inside accordion */
details .row,details label,details input,details .control,details .tabs{margin-left:12px;margin-right:12px}
details .row{margin-top:8px}
small.hint{display:block;color:#94a3b8;margin-top:-4px;margin-bottom:6px}
.primary{background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#0b0b0c;padding:12px 14px;font-weight:700;cursor:pointer;margin-top:8px;box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.02);transition:background .15s ease, box-shadow .15s ease, transform .02s ease}
.primary:hover{background:#f3f4f6}
.primary:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(34,197,94,.35)}
.primary:active{transform:translateY(1px)}
.primary:disabled{background:#2a2f39;border-color:#3b4352;color:#94a3b8;cursor:not-allowed;box-shadow:none}
.download{display:inline-block;margin-top:8px;background:#fff;border:1px solid #e5e7eb;color:#0b0b0c;text-decoration:none;border-radius:8px;padding:10px 12px;font-weight:700;transition:background .15s ease, box-shadow .15s ease}
.download:hover{background:#f3f4f6}
/* Grey/disabled look while processing */
.download.disabled{background:#2a2f39;border-color:#3b4352;color:#94a3b8;pointer-events:none}
/* Ensure hidden always wins over display from .download */
.download.hidden{display:none}

/* Remove sticky CTAs to avoid covering controls */

/* Dual range slider visuals */
.dual-range{position:relative;padding:8px 0}
.dual-range input[type=range]{width:100%;appearance:none;background:transparent;position:relative;z-index:2}
.dual-range input[type=range]:first-of-type{z-index:3}
.dual-range input[type=range]:last-of-type{z-index:2}
.dual-range-track{position:relative;height:3px;background:#cbd5e1;border-radius:999px;margin-top:-8px;z-index:1}
.dual-range-track span{position:absolute;left:0;right:0;top:0;bottom:0;background:#cbd5e1;border-radius:999px}

/* Modern range slider styling (matches dark UI in screenshot) */
input[type="range"]{appearance:none;-webkit-appearance:none;height:3px;background:#e5e7eb;border-radius:999px;outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:3px;background:#e5e7eb;border-radius:999px}
input[type="range"]::-moz-range-track{height:3px;background:#e5e7eb;border-radius:999px}
/* Fix dual-range: hide each native track so only the custom track is visible */
/* Show both native lines for start and end sliders */
.dual-range input[type="range"]{background:#e5e7eb}
.dual-range input[type="range"]::-webkit-slider-runnable-track{background:#e5e7eb;height:3px}
.dual-range input[type="range"]::-moz-range-track{background:#e5e7eb;height:3px}
/* Ensure thumbs sit above the custom track */
.dual-range input[type="range"]::-webkit-slider-thumb{position:relative;z-index:4}
.dual-range input[type="range"]::-moz-range-thumb{position:relative;z-index:4}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:16px;width:16px;border-radius:50%;background:#f8fafc;border:2px solid #0b0b0c;box-shadow:0 0 0 2px rgba(255,255,255,.15);margin-top:-5px}
input[type="range"]::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:#f8fafc;border:2px solid #0b0b0c;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
input[type="range"]:hover::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.22)}
input[type="range"]:hover::-moz-range-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.22)}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(34,197,94,.3)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(34,197,94,.3)}

/* Timeline slider gets slightly larger thumb */
.timeline{height:4px}
.timeline::-webkit-slider-runnable-track{height:4px}
.timeline::-webkit-slider-thumb{height:18px;width:18px;margin-top:-6px}
.timeline::-moz-range-track{height:4px}
.timeline::-moz-range-thumb{height:18px;width:18px}

/* Secondary buttons and overlay controls */
.reset-btn{margin-left:8px;background:#2a2f39;color:#cbd5e1;border:1px solid #3b4352;border-radius:8px;padding:6px 10px;cursor:pointer;transition:background .15s ease, border-color .15s ease}
.reset-btn:hover{background:#3b4352}
.reset-btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(34,197,94,.35)}
.reset-btn:disabled{opacity:.55;cursor:not-allowed}

.overlay-btn{position:absolute;left:12px;bottom:12px;background:#ffffffdd;color:#111;border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;transition:filter .15s ease, transform .02s ease}
.overlay-btn:hover{filter:brightness(.95)}
.overlay-btn:active{transform:translateY(1px)}
.overlay-btn:disabled{opacity:.6;cursor:not-allowed}




/* Manual theme overrides via data-theme attribute take precedence */
:root[data-theme="light"]{--bg:#f6f7fb;--panel:#ffffff;--muted:#64748b;--text:#0b0b0c;--accent:#22c55e}
:root[data-theme="light"] body{background:var(--bg);color:var(--text)}
:root[data-theme="light"] .left{background:#f3f4f6}
:root[data-theme="light"] .right{background:var(--panel)}
:root[data-theme="light"] .right h2{color:#0b0b0c}
:root[data-theme="light"] details{background:#f9fafb;border:1px solid #e5e7eb}
:root[data-theme="light"] details>summary{background:#f3f4f6;color:#0b0b0c}
:root[data-theme="light"] .text-item{background:#f3f4f6;color:#1f2937;border-color:#e5e7eb}
:root[data-theme="light"] .text-item.selected{border-color:transparent}
:root[data-theme="light"] .tab{background:#f3f4f6;color:#111827;border:1px solid #e5e7eb}
:root[data-theme="light"] .tab:hover{background:#e5e7eb}
:root[data-theme="light"] input[type="url"],:root[data-theme="light"] input[type="text"],:root[data-theme="light"] input[type="number"],:root[data-theme="light"] select{background:#fff;color:#0b0b0c;border:1px solid #e5e7eb}
:root[data-theme="light"] input[type="color"]{border:1px solid #e5e7eb;background:#fff}
:root[data-theme="light"] .dual-range-track{background:#e5e7eb}
:root[data-theme="light"] .dual-range-track span{background:#d1d5db}
:root[data-theme="light"] input[type="range"]{background:#e5e7eb}
:root[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track{background:#e5e7eb}
:root[data-theme="light"] input[type="range"]::-moz-range-track{background:#e5e7eb}
:root[data-theme="light"] .overlay-btn{background:#000000dd;color:#fff}

/* Fallback: honor system preference only if no manual selection is set */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){--bg:#f6f7fb;--panel:#ffffff;--muted:#64748b;--text:#0b0b0c;--accent:#22c55e}
  body{background:var(--bg);color:var(--text)}
  .left{background:#f3f4f6}
  .right{background:var(--panel)}
  .right h2{color:#0b0b0c}
  details{background:#f9fafb;border:1px solid #e5e7eb}
  details>summary{background:#f3f4f6;color:#0b0b0c}
  .text-item{background:#f3f4f6;color:#1f2937;border-color:#e5e7eb}
  .text-item.selected{border-color:transparent}
  .tab{background:#f3f4f6;color:#111827;border:1px solid #e5e7eb}
  .tab:hover{background:#e5e7eb}
  input[type="url"],input[type="text"],input[type="number"],select{background:#fff;color:#0b0b0c;border:1px solid #e5e7eb}
  input[type="color"]{border:1px solid #e5e7eb;background:#fff}
  .dual-range-track{background:#e5e7eb}
  .dual-range-track span{background:#d1d5db}
  input[type="range"]{background:#e5e7eb}
  input[type="range"]::-webkit-slider-runnable-track{background:#e5e7eb}
  input[type="range"]::-moz-range-track{background:#e5e7eb}
  .overlay-btn{background:#000000dd;color:#fff}
}