:root{
  --bg-900:#121212;--bg-800:#1d1d1d;--bg-700:#2b2b2b;
  --txt-100:#e6e6e6;--accent:#00b0ff;--danger:#ff4d67;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,sans-serif}
html,body{height:100%}
body{display:grid;grid-template-rows:minmax(50px,64px) 1fr;background:var(--bg-900);
     color:var(--txt-100);padding-bottom:82px;overflow:hidden}

/* ─── LOGIN OVERLAY ───────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);
         display:flex;align-items:center;justify-content:center;z-index:200}
.loginBox{background:var(--bg-800);padding:2rem;border-radius:8px;
          display:flex;flex-direction:column;gap:1rem;width:280px}
.loginBox h2{margin:0;color:var(--accent);text-align:center;font-size:1.2rem}
.loginBox input, .loginBox button{
  padding:.6rem;border:none;border-radius:4px;
  font-size:1rem;background:var(--bg-700);color:var(--txt-100);
}
.loginBox button{
  background:var(--accent);color:#000;cursor:pointer;font-weight:600;
}
.loginBox button:hover{background:#fff}
.loginBox small{color:var(--txt-100);font-size:.85rem}

#layerPanel{display:flex;align-items:center;gap:.8rem;padding:0 .9rem;
            background:var(--bg-800);border-bottom:1px solid var(--bg-700)}
#layerPanel h3{font-size:.9rem;opacity:.75}
#layerList{display:flex;gap:.6rem;flex:1;overflow-x:auto;list-style:none;scrollbar-width:thin}
.layer-item{position:relative;flex:0 0 auto;min-width:3.6rem;
            padding:.38rem .75rem;border-radius:.4rem;background:var(--bg-700);
            cursor:pointer;font-weight:600;font-size:.82rem}
.layer-item.selected{background:var(--accent);color:#000}
.layer-item .del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;
                  line-height:18px;font-size:.7rem;background:var(--danger);
                  color:#fff;border-radius:50%;cursor:pointer}

main{display:flex;align-items:center;justify-content:center;overflow:hidden}
#preview{width:100%;height:100%;object-fit:contain;background:#000}
body.recording #preview{display:none}

#controls{position:fixed;left:0;right:0;bottom:0;z-index:50;
          display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
          justify-content:center;padding:.9rem;background:var(--bg-800);
          border-top:1px solid var(--bg-700)}
#controls button,#controls span{padding:.6rem 1rem;border:none;
        border-radius:.45rem;font-size:.9rem;font-weight:600;
        background:var(--bg-700);color:var(--txt-100);cursor:pointer;
        transition:background .16s,transform .16s}
#controls button:disabled{opacity:.45;cursor:not-allowed}
#controls button:not(:disabled):hover{background:var(--accent);color:#000;transform:translateY(-2px)}
#timer{background:var(--accent);color:#000}

.toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);
      background:var(--accent);color:#000;padding:.75rem 1.2rem;
      border-radius:.6rem;box-shadow:0 6px 20px rgba(0,0,0,.45);
      z-index:90;font-weight:600;font-size:.85rem;animation:fade 4s forwards}
@keyframes fade{0%{opacity:1}78%{opacity:1}100%{opacity:0}}
.hidden{display:none!important}

.trimBox{position:fixed;inset:0;background:rgba(0,0,0,0.82);
         display:flex;align-items:center;justify-content:center;z-index:120}
.trimInner{width:90%;max-width:640px;background:var(--bg-800);
           padding:1rem 1.5rem;border-radius:.6rem;
           display:flex;flex-direction:column;gap:1rem;z-index:121}
.trimInner h3{text-align:center;margin-bottom:.3rem}
.trimInner video{width:100%;background:#000;border:1px solid var(--bg-700)}
.ranges{display:flex;gap:1rem;align-items:center}
.ranges label{display:flex;gap:.5rem;align-items:center;font-size:.85rem}
.ranges input{flex:1}

/* ─── POPUP INFO ───────────────────────────────────────── */
.popup {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.popup-content {
  background: var(--bg-800);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  width: 280px;
}
.popup-content h2 {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 1.2rem;
}
.popup-content p {
  margin: 0 0 1.5rem;
  color: var(--txt-100);
  line-height: 1.4;
}
.popup-content button {
  padding: .6rem 1.2rem;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  cursor: pointer;
}
.popup-content button:hover {
  background: #fff;
}
.hidden { display: none !important; }