/* Copyright (c) 2025 Dean Taylor */
/* Licensed under the MIT License. See LICENSE file for details. */


:root{
  --bg:#414141;
  --text:#eaeaea;
  --panel:#e5e7eb;
  --panel-2:#d1d5db;
  --border:rgba(0,0,0,.15);
  --muted:rgba(255,255,255,.25);
  --muted-2:rgba(255,255,255,.2);
  --white:#fff;
  --black:#111;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Layout --- */
.container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px;
}
.app{width:100%; max-width:1100px}
.title{
  text-align:center; color:#fff; font-size:44px; font-weight:700; letter-spacing:.02em; margin-bottom:12px;
}

/* --- Inputs / Buttons --- */
.input{
  width:100%; height:40px; border-radius:8px; background:var(--panel);
  padding:0 12px; font-size:16px; border:1px solid var(--border); color:var(--black);
}
.btn{
  height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--panel); color:var(--black); display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.btn.icon{ width:36px; justify-content:center }
.btn.active{ background:var(--panel-2) }
.btn:disabled{ opacity:.5; cursor:not-allowed }

/* --- Panels --- */
.scene{
  background:var(--muted-2); border:1px solid rgba(255,255,255,.15);
  border-radius:12px; padding:8px; display:grid; gap:8px;
}
.scene-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:8px; background:var(--panel); cursor:pointer; color:var(--black);
}
.scene-row.selected{ background:#fff }
.scene-actions{ display:flex; gap:6px }

/* --- Grid --- */
.grid{ display:grid; }

/* --- Timeline --- */
.timeline{
  position:relative; height:12px; border-radius:6px; background:var(--muted);
}
.kf{
  position:absolute; top:50%; width:12px; height:12px; background:var(--panel);
  transform:translate(-50%,-50%) rotate(45deg); cursor:pointer;
}
.playhead{
  position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none;
}

/* --- Modals --- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  background:#fff; color:#111; border-radius:12px; padding:16px; width:100%; max-width:420px;
}
.modal .row{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px }