:root {
  --bg:#0f1218; --card:#161b24; --line:#242c39; --txt:#e6eaf2; --mut:#8b97ad;
  --acc:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --red:#ef4444;
  /* peela = ant me khaali jagah bachi; baingani = text badla, audio purana.
     Dono alag rang chahiye warna naqshe me pata nahi chalta kaun sa kya. */
  --gap:#facc15; --stale:#a78bfa;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.hidden { display:none !important; }
.muted { color:var(--mut); font-size:13px; }
.grow { flex:1; }
.err { color:var(--red); font-size:13px; min-height:18px; }

/* ---- login ---- */
#login { display:grid; place-items:center; min-height:100vh; }
#loginForm {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:28px; width:320px; display:flex; flex-direction:column; gap:10px;
}
#loginForm h1 { margin:0 0 6px; font-size:19px; }

/* ---- shell ---- */
header {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand { font-weight:700; letter-spacing:.2px; }

input, select, textarea, button {
  font:inherit; color:var(--txt); background:#0d111a;
  border:1px solid var(--line); border-radius:8px; padding:7px 10px;
}
textarea { width:100%; resize:vertical; line-height:1.6; }
button { cursor:pointer; }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
button.ghost:hover { border-color:var(--acc); }
button:disabled { opacity:.5; cursor:default; }

/* ---- player ---- */
#player { padding:10px 16px 0; background:var(--card);
          border-bottom:1px solid var(--line); position:sticky; top:49px; z-index:19; }
#au { width:100%; height:36px; }
/* Poore video ka naqsha: har segment ek nishan. Isse ek nazar me dikhta hai
   ki kahan laal hai aur kahan badla hua -- list scroll kiye bina. */
#bar { position:relative; height:16px; margin:8px 0 10px; cursor:pointer; }
#ticks { position:absolute; inset:0; }
#ticks i {
  position:absolute; top:4px; height:8px; background:#33405a; border-radius:2px;
}
#ticks i.done { background:#2c6b46; }
#ticks i.stale { background:var(--stale); }
#ticks i.gap   { background:var(--gap); }
#ticks i.red { background:var(--red); }
#ticks i.on { background:var(--acc); top:1px; height:14px; }
#cursor { position:absolute; top:0; bottom:0; width:2px; background:#fff; }

/* ---- lessons ki list ---- */
#projects { padding:16px; }
.pjhead { display:flex; align-items:center; gap:10px; margin-bottom:14px;
          flex-wrap:wrap; }
.pjhead h2 { margin:0; font-size:18px; }
#pjSearch { min-width:200px; }
#pjList { display:grid; gap:10px;
          grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.pjcard { background:var(--card); border:1px solid var(--line);
          border-radius:12px; padding:12px 14px; cursor:pointer; }
.pjcard:hover { border-color:var(--acc); }
.pjtop { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.pjname { font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap; }
.badge { font-size:11px; padding:2px 9px; border-radius:999px; flex:none;
         background:#22304a; color:var(--mut); }
.badge.ok   { background:rgba(34,197,94,.16);  color:#7ee2a8; }
.badge.acc  { background:rgba(59,130,246,.18); color:#9dc4ff; }
.badge.warn { background:rgba(245,158,11,.16); color:#f6c76a; }
.badge.red  { background:rgba(239,68,68,.16);  color:#ff9c9c; }
.pjmeta { color:var(--mut); font-size:12px; margin-bottom:9px; }
.pjbars { display:grid; gap:4px; }
.pjbar { display:flex; align-items:center; gap:8px; font-size:11px;
         color:var(--mut); }
.pjbar .bl { width:74px; flex:none; }
.pjbar .bt { flex:1; height:6px; background:#0d111a; border-radius:4px;
             overflow:hidden; }
.pjbar .bt i { display:block; height:100%; background:var(--ok); }
.pjbar .bn { width:52px; text-align:right; flex:none; }
.pjerr { margin-top:8px; font-size:12px; color:var(--red); }

/* ---- lehar wala segment editor ---- */
#waveWrap { background:var(--card); border-bottom:1px solid var(--line);
            padding:6px 16px 10px; }
#waveBar { display:flex; align-items:center; gap:10px; font-size:12px;
           margin-bottom:6px; flex-wrap:wrap; }
#waveBar button { padding:2px 10px; }
#waveBox { position:relative; }
#wave { width:100%; display:block; border:1px solid var(--line);
        border-radius:8px; }
/* Zoom canvas ke UPAR tairta hai -- header sticky hai, aur page scroll karne
   par toolbar uske neeche chhup jaata tha. Yahan hamesha dikhta hai. */
#waveZoomBox { position:absolute; top:6px; right:8px; display:flex; gap:4px;
               align-items:center; background:rgba(13,17,26,.88);
               border:1px solid var(--line); border-radius:8px; padding:3px 5px;
               font-size:12px; color:var(--mut); }
#waveZoomBox button { padding:1px 9px; font-size:13px; }

/* Neeche wala patta: pakdo aur khinch lo. Wheel har machine par bharosemand
   nahi hai, aur bajte waqt to dikhna hi chahiye ki view kahan khada hai. */
#waveScroll { position:relative; height:12px; margin-top:6px; background:#0d111a;
              border:1px solid var(--line); border-radius:6px; cursor:pointer; }
#waveThumb { position:absolute; top:1px; bottom:1px; background:#33405a;
             border-radius:5px; cursor:grab; min-width:24px; }
#waveThumb:hover { background:#3f5178; }
.wmenu { position:fixed; z-index:80; background:var(--card);
         border:1px solid var(--line); border-radius:8px; padding:4px;
         display:flex; flex-direction:column; min-width:200px;
         box-shadow:0 10px 28px rgba(0,0,0,.55); }
.wmenu button { background:none; border:0; text-align:left; padding:7px 10px;
                border-radius:6px; }
.wmenu button:hover { background:#1d2840; }

/* ---- layout ---- */
main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px;
       padding:14px 16px 40px; }
@media (max-width:900px) { main { grid-template-columns:1fr; } }

section { background:var(--card); border:1px solid var(--line); border-radius:12px;
          padding:14px; }
.nowhead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pill { background:#22304a; border-radius:999px; padding:2px 10px; font-size:12px; }
.lbl { display:block; color:var(--mut); font-size:12px; margin:10px 0 4px;
       text-transform:uppercase; letter-spacing:.4px; }
.orig { margin:0; padding:9px 11px; background:#0d111a; border:1px solid var(--line);
        border-radius:8px; min-height:44px; width:100%; resize:vertical;
        font:inherit; color:var(--txt); }
.row { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
#voice { max-width:260px; }
#nowGap { margin-left:auto; }

/* ---- segment ki katai ---- */
#cutRow { border-top:1px dashed var(--line); padding-top:10px; margin-top:12px; }
.cutlbl { color:var(--mut); font-size:12px; text-transform:uppercase;
          letter-spacing:.4px; }
.tnum { width:88px; }

/* ---- filler sujhav ---- */
#fillerBox { margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; }
#fillerInfo { color:var(--mut); font-size:12px; text-transform:none;
              letter-spacing:0; }
/* Jode hue shabd HARE -- ek nazar me dikhe ki AI ne kya daala, baaki text
   jaisa tha waisa hi rahe. */
#fillerPrev ins { color:var(--ok); background:rgba(34,197,94,.14);
                  text-decoration:none; border-radius:3px; padding:0 1px; }

/* ---- list ---- */
.listhead { display:flex; gap:10px; align-items:center; margin-bottom:8px;
            flex-wrap:wrap; font-size:13px; }
#filter { flex:1; min-width:140px; }
#list { list-style:none; margin:0; padding:0; max-height:58vh; overflow:auto; }
#list li { padding:8px 10px; border-radius:8px; cursor:pointer;
           border-left:3px solid transparent; }
#list li:hover { background:#1b2230; }
#list li.on { background:#1d2840; border-left-color:var(--acc); }
#list li.stale { border-left-color:var(--stale); }
#list li.gap   { border-left-color:var(--gap); }
#list li.red { border-left-color:var(--red); }
#list .t { color:var(--mut); font-size:12px; margin-right:8px; }
#list .x { display:block; white-space:nowrap; overflow:hidden;
           text-overflow:ellipsis; }

/* ---- asli / dub switch ---- */
#srcSwitch { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.tab {
  background:#0d111a; border:1px solid var(--line); color:var(--mut);
  border-radius:999px; padding:4px 14px; font-size:13px;
}
.tab.on { background:var(--acc); border-color:var(--acc); color:#fff; }
#switchHint { margin-left:4px; }

/* ---- live log ---- */
#logBtn.on { border-color:var(--acc); color:#fff; }
#logWrap { position:fixed; left:0; right:0; bottom:0; z-index:70; height:34vh;
           min-height:150px; display:flex; flex-direction:column;
           background:#0b0f16; border-top:1px solid var(--line);
           box-shadow:0 -10px 26px rgba(0,0,0,.5); }
#logHead { display:flex; align-items:center; gap:10px; padding:6px 14px;
           background:var(--card); border-bottom:1px solid var(--line);
           font-size:13px; }
#logHead button { padding:2px 10px; font-size:12px; }
#logBody { flex:1; overflow:auto; padding:6px 14px 10px;
           font:12px/1.6 ui-monospace,Consolas,monospace; }
.logline { display:flex; gap:10px; white-space:pre-wrap; word-break:break-word; }
.logline .lt { color:#4b586e; flex:none; }
.logline.run .lm { color:var(--mut); }
.logline.ok  .lm { color:#9fe8bd; }
.logline.err .lm { color:#ff9c9c; }
.logline.ai  .lm { color:#9dc4ff; }