:root{
  --ink:#12141A; --surface:#1A1D26; --surface-2:#20242F; --line:#2A2F3D;
  --muted:#868DA0; --text:#EDEFF5; --dim:#5A6172;
  --peak:#FF3D7F; --peak-soft:rgba(255,61,127,.14);
  --base:#3DDCFF; --amber:#FFB84D; --ok:#54E0A0;
  --display:'Space Grotesk',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink); color:var(--text); font-family:var(--body);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 80% -10%, #1b2030 0%, transparent 60%);
  min-height:100dvh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.mono{font-family:var(--mono)} .muted{color:var(--muted)}

/* --- brand / live dot --- */
.brand{font-family:var(--display); font-weight:700; letter-spacing:.14em; font-size:.95rem;
  display:flex; align-items:center; gap:.55rem}
.live-dot{width:9px; height:9px; border-radius:50%; background:var(--peak);
  box-shadow:0 0 0 0 var(--peak); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,61,127,.5)}70%{box-shadow:0 0 0 7px rgba(255,61,127,0)}100%{box-shadow:0 0 0 0 rgba(255,61,127,0)}}

/* --- buttons / inputs --- */
.btn{font-family:var(--body); font-weight:600; font-size:.92rem; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); padding:.7rem 1.15rem; border-radius:10px;
  cursor:pointer; transition:.15s; white-space:nowrap}
.btn:hover{border-color:#3a4152}
.btn.primary{background:var(--peak); border-color:var(--peak); color:#160910}
.btn.primary:hover{filter:brightness(1.08)}
.btn.primary:disabled{opacity:.45; cursor:progress}
.btn.ghost{background:transparent}
.link{background:none;border:0;color:var(--base);cursor:pointer;font-family:var(--mono);font-size:.8rem;padding:0}
.link:hover{text-decoration:underline}
input,select{width:100%; margin-top:.35rem; padding:.7rem .8rem; border-radius:10px;
  border:1px solid var(--line); background:#12151d; color:var(--text); font-family:var(--body); font-size:.95rem}
input:focus,select:focus{outline:2px solid var(--base); outline-offset:1px; border-color:transparent}
label{font-size:.8rem; color:var(--muted); font-weight:500}

/* --- login gate --- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:1.5rem}
.gate-card{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:2rem 1.8rem; width:min(360px,92vw); display:flex; flex-direction:column; gap:1rem}
.gate-card .brand{font-size:1.15rem}
.gate-sub{margin:-.4rem 0 .3rem; color:var(--muted); font-size:.88rem}
.err{color:var(--peak); font-family:var(--mono); font-size:.8rem; min-height:1em}

/* --- layout --- */
#app{max-width:940px; margin:0 auto; padding:1.1rem 1.1rem 4rem}
.topbar{display:flex; align-items:center; gap:1rem; padding:.4rem .2rem 1.1rem}
.topbar .status{margin-left:auto; font-family:var(--mono); font-size:.78rem; display:flex; gap:.5rem; align-items:center}
.status .k{color:var(--dim)} .status .v{color:var(--base)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:1.3rem 1.3rem; margin-bottom:1rem}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

/* --- intake --- */
.intake h1{font-family:var(--display); font-weight:700; font-size:1.75rem; line-height:1.1; margin:.2rem 0 .4rem}
.lede{color:var(--muted); font-size:.95rem; margin:0 0 1.1rem; max-width:60ch}
.fields{display:flex; flex-wrap:wrap; gap:.8rem; align-items:end}
.fields .grow{flex:1 1 220px}
.fields label{flex:0 0 auto}
.fields .btn{align-self:stretch}

/* --- scope (sygnatura) --- */
.scope-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem}
#scope{width:100%; display:block; border-radius:10px; background:linear-gradient(180deg,#12151d,#151922)}
.legend{display:flex; gap:1.2rem; margin-top:.6rem; font-size:.72rem; color:var(--muted)}
.legend .sw{display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:.35rem}
.sw.base{background:var(--base)} .sw.peak{background:var(--peak)}

/* --- shots --- */
.shots-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; gap:1rem}
.bulk{display:flex; gap:.9rem; align-items:center}
.shots{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.shot{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem;
  padding:.6rem .75rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2)}
.shot.on{border-color:var(--peak); background:linear-gradient(90deg,var(--peak-soft),transparent)}
.shot input[type=checkbox]{width:18px;height:18px;accent-color:var(--peak);margin:0;flex:0 0 auto}
.shot .ts{font-family:var(--mono); font-size:.9rem; color:var(--text); min-width:3.4rem}
.shot .bar{flex:1 1 6rem; min-width:4rem; height:6px; border-radius:3px; background:#2c3140; overflow:hidden}
.shot .bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--base),var(--peak))}
.shot .dur{font-family:var(--mono); font-size:.78rem; color:var(--muted); min-width:2.6rem; text-align:right}
.shot .trim{display:flex; align-items:center; gap:.25rem; flex-wrap:wrap}
.shot .trim b{font-weight:600; color:var(--muted); font-size:.7rem; margin-left:.35rem; text-transform:uppercase; letter-spacing:.03em}
.nud{width:26px; height:26px; line-height:1; padding:0; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--text); cursor:pointer; font-size:1rem}
.nud:hover{border-color:var(--peak); color:var(--peak)}
.shot .play{width:30px; height:30px; padding:0; border:1px solid var(--base); border-radius:50%;
  background:transparent; color:var(--base); cursor:pointer; font-size:.85rem; margin-left:auto}
.shot .play:hover:not(:disabled){background:var(--base); color:#0a0c11}
.shot .play:disabled{opacity:.35; cursor:default}
.shot a.prev{margin-left:.2rem}
.snaprow{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin-bottom:.7rem;
  padding:.6rem .7rem; border:1px dashed var(--line); border-radius:10px}
.playerbar{position:sticky; bottom:.5rem; z-index:5; display:flex; flex-wrap:wrap; align-items:center;
  gap:.4rem .8rem; margin-top:.7rem; padding:.55rem .8rem; border:1px solid var(--base);
  border-radius:12px; background:var(--surface); box-shadow:0 6px 24px rgba(0,0,0,.45)}
.playerbar audio{flex:1 1 220px; min-width:180px; height:32px}
.playerbar #playerLabel{color:var(--base); font-size:.8rem}
.playerbar .link{background:none;border:none;cursor:pointer;color:var(--base);font-family:var(--mono);font-size:.78rem;padding:.2rem .3rem}
.playerbar .link:hover{text-decoration:underline}
.snaprow label{display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted)}
.snaprow input[type=range]{width:80px}
.snaprow .chk{gap:.3rem}
#audioStat{margin-left:auto}
.shot a.prev{font-family:var(--mono); font-size:.9rem; color:var(--base); text-decoration:none}
.shot a.prev:hover{text-decoration:underline}

.render-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:end; margin-top:1.1rem;
  padding-top:1.1rem; border-top:1px dashed var(--line)}
.render-row .grow{flex:1 1 200px}
.hint{font-size:.72rem; color:var(--dim); margin:.7rem 0 0}

/* --- result / log --- */
.result #result{display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem}
.result a{color:var(--base); font-family:var(--mono); font-size:.9rem; word-break:break-all}
.big-link{display:inline-block; margin-top:.4rem; background:var(--peak); color:#160910;
  padding:.6rem 1rem; border-radius:10px; text-decoration:none; font-weight:600; font-family:var(--body)}
.log{background:#0d0f15; border:1px solid var(--line); border-radius:10px; padding:.9rem;
  font-size:.78rem; color:#c3c9d8; max-height:280px; overflow:auto; white-space:pre-wrap; margin:.5rem 0 0}
.log .warn{color:var(--amber)} .log .bad{color:var(--peak)} .log .good{color:var(--ok)}

@media (max-width:560px){
  .intake h1{font-size:1.4rem}
  .shot .bar{flex-basis:100%; order:5}
  .fields .btn,.render-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ .live-dot{animation:none} }