*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0b0d; --card:#131418; --card2:#16181d; --elev:#1c1e25;
  --line:#23262d; --line2:#31343d;
  --txt:#e9ebef; --mut:#8b919c; --dim:#5b616b;
  --green:#2ee66f; --green-d:#1f9e4d; --greenbg:rgba(46,230,111,.12);
  --blue:#4d8dff; --bluebg:rgba(77,141,255,.12);
  --amber:#ffb020; --amberbg:rgba(255,176,32,.12);
  --red:#ff5151; --redbg:rgba(255,81,81,.12);
  --violet:#9b6dff;
  --r:14px; --rs:9px;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(46,230,111,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(77,141,255,.05), transparent 55%),
    var(--bg);
  color:var(--txt); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.app{display:grid; grid-template-columns:228px 1fr; min-height:100vh}

/* ---------- SIDEBAR ---------- */
.side{border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh}
.brand{display:flex; align-items:center; gap:11px; padding:6px 8px 22px}
.logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(140deg,var(--green),var(--green-d));
  display:grid; place-items:center; color:#06210f; font-size:19px; box-shadow:0 0 18px -2px rgba(46,230,111,.5)}
.brand b{font-family:'Unbounded'; font-weight:700; font-size:1.02rem; letter-spacing:-.3px}
.brand b span{color:var(--green)}
.nav{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; color:var(--mut);
  font-size:.92rem; font-weight:500; cursor:pointer; transition:.15s}
.nav i{font-size:20px}
.nav:hover{background:var(--card); color:var(--txt)}
.nav.on{background:var(--greenbg); color:var(--green)}
.side .sep{flex:1}
.userbox{display:flex; align-items:center; gap:10px; padding:10px 8px; border-top:1px solid var(--line); margin-top:8px}
.ava{width:32px; height:32px; border-radius:50%; background:#23262d; display:grid; place-items:center; font-size:.8rem; font-weight:600; color:var(--green)}

/* ---------- MAIN ---------- */
.main{padding:22px 30px 60px; max-width:1320px}
.top{display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap}
.top h1{font-family:'Unbounded'; font-weight:700; font-size:1.5rem; letter-spacing:-.5px; margin-right:auto}
.top h1 small{display:block; font-family:'Inter'; font-weight:400; font-size:.82rem; color:var(--mut); letter-spacing:0; margin-top:3px}
.search{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 13px; color:var(--mut); width:220px}
.search input{background:none; border:none; outline:none; color:var(--txt); font-size:.9rem; width:100%; font-family:inherit}
.search i{font-size:18px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); color:var(--txt);
  padding:10px 15px; border-radius:11px; font-size:.9rem; font-weight:500; cursor:pointer; transition:.15s; font-family:inherit}
.btn:hover{border-color:var(--line2); background:var(--card2)}
.btn i{font-size:18px}
.btn.ghost{background:transparent}
.btn.green{background:linear-gradient(140deg,var(--green),var(--green-d)); color:#06210f; border:none; font-weight:600; box-shadow:0 6px 20px -8px rgba(46,230,111,.6)}
.btn.green:hover{filter:brightness(1.06)}
.btn.blue{background:var(--bluebg); border-color:transparent; color:#9cc2ff}
.btn.blue:hover{background:rgba(77,141,255,.2)}
.btn.red{background:var(--redbg); border-color:transparent; color:#ff8a8a}
.btn.red:hover{background:rgba(255,81,81,.2)}
.btn.sm{padding:8px 12px; font-size:.85rem}

/* api key bar */
.apibar{display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 16px; margin-bottom:26px; flex-wrap:wrap}
.apibar .lab{display:flex; align-items:center; gap:7px; color:var(--mut); font-size:.85rem; font-weight:500}
.apibar .lab i{font-size:17px; color:var(--amber)}
.apibar input{flex:1; min-width:220px; background:#0e0f12; border:1px solid var(--line); border-radius:9px; padding:9px 12px; color:var(--txt); font-family:'JetBrains Mono',monospace; font-size:.82rem; outline:none}
.apibar input:focus{border-color:var(--line2)}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; position:relative}
.kpi .lab{display:flex; align-items:center; gap:7px; color:var(--mut); font-size:.8rem; font-weight:500; margin-bottom:10px}
.kpi .lab i{font-size:16px}
.kpi .val{font-family:'Unbounded'; font-weight:700; font-size:1.9rem; line-height:1; letter-spacing:-1px}
.kpi .sub{font-size:.76rem; color:var(--dim); margin-top:7px}
.kpi.live .val{color:var(--green)}

/* ---------- FOLDERS ---------- */
.folder{margin-bottom:18px; border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.012); overflow:hidden}
.fhead{display:flex; align-items:center; gap:13px; padding:15px 18px; cursor:pointer; user-select:none}
.fhead:hover{background:var(--card)}
.fdot{width:11px; height:11px; border-radius:4px; flex:none}
.fhead h3{font-size:1rem; font-weight:600; letter-spacing:-.2px}
.fhead .cnt{color:var(--dim); font-size:.85rem; font-weight:400}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; padding:5px 10px; border-radius:99px}
.pill.g{background:var(--greenbg); color:var(--green)}
.pill.eyes{background:var(--card2); color:var(--mut); font-weight:500; border:1px solid var(--line)}
.fhead .sp{flex:1}
.fhead .act{display:flex; gap:7px; align-items:center}
.chev{color:var(--mut); font-size:20px; transition:.2s}
.folder.collapsed .chev{transform:rotate(-90deg)}
.folder.collapsed .grid{display:none}
.iconbtn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--mut); display:grid; place-items:center; cursor:pointer; transition:.15s; font-size:17px}
.iconbtn:hover{color:var(--txt); border-color:var(--line2)}
.iconbtn.red:hover{color:var(--red); border-color:rgba(255,81,81,.4)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; padding:6px 16px 18px}

/* ---------- STREAM CARD ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .16s, border-color .16s, box-shadow .16s}
.card:hover{transform:translateY(-3px); border-color:var(--line2)}
.card.on{border-color:rgba(46,230,111,.32); box-shadow:0 14px 40px -20px rgba(46,230,111,.45)}
.thumb{aspect-ratio:16/9; position:relative; display:grid; place-items:center; overflow:hidden}
.thumb-live{background:linear-gradient(150deg,#16302a,#0b1a16 70%)}
.thumb-off{background:repeating-linear-gradient(45deg,#15171c,#15171c 11px,#131418 11px,#131418 22px)}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.thumb .grain{position:absolute; inset:0; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.05), transparent 42%)}
.badge{position:absolute; top:11px; left:11px; display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; padding:5px 10px; border-radius:99px; z-index:2}
.badge.live{background:rgba(46,230,111,.18); color:#9affc0; border:1px solid rgba(46,230,111,.4)}
.badge.off{background:rgba(20,22,27,.72); color:var(--mut); border:1px solid var(--line)}
.badge.proc{background:rgba(255,176,32,.16); color:#ffce75; border:1px solid rgba(255,176,32,.4)}
.badge.err{background:rgba(255,81,81,.16); color:#ff9a9a; border:1px solid rgba(255,81,81,.4)}
.views{position:absolute; bottom:11px; left:11px; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:5px 10px; border-radius:99px; background:rgba(10,11,13,.62); z-index:2}
.views i{font-size:15px; color:var(--green)}
.qbadge{position:absolute; top:11px; right:11px; font-size:.68rem; font-weight:600; padding:4px 8px; border-radius:7px; background:rgba(10,11,13,.6); color:#cfd3da; font-family:'JetBrains Mono',monospace; z-index:2}
.officon{font-size:30px; color:#3a3e47; z-index:1}
.thumb:has(img) .officon{display:none}
.live-viewers b{color:var(--green); font-weight:600}
.eq{position:absolute; bottom:12px; right:12px; display:flex; gap:2px; align-items:flex-end; height:15px; z-index:2}
.eq span{width:3px; background:var(--green); border-radius:2px; animation:eq .9s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.18s} .eq span:nth-child(3){animation-delay:.36s}
.eq span:nth-child(4){animation-delay:.12s} .eq span:nth-child(5){animation-delay:.5s}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}

.cbody{padding:13px 15px 15px}
.ctop{display:flex; align-items:flex-start; gap:8px; margin-bottom:11px}
.ctitle{font-size:.97rem; font-weight:600; letter-spacing:-.2px; line-height:1.3}
.dot{width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none}
.dot.g{background:var(--green); animation:pulse 1.7s infinite}
.dot.o{background:#41454e}
.dot.a{background:var(--amber); animation:pulse 1.7s infinite}
.dot.r{background:var(--red)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,230,111,.5)}70%{box-shadow:0 0 0 7px rgba(46,230,111,0)}100%{box-shadow:0 0 0 0 rgba(46,230,111,0)}}
.meta{display:flex; flex-wrap:wrap; gap:7px 14px; color:var(--mut); font-size:.79rem; margin-bottom:14px}
.meta span{display:inline-flex; align-items:center; gap:5px}
.meta i{font-size:15px; color:var(--dim)}
.meta .up{color:var(--green)}
.actions{display:flex; gap:8px}
.actions .btn{flex:1; justify-content:center; padding:9px 10px; font-size:.85rem}
.actions .mini{flex:none; width:38px; padding:9px 0}

.loose-h{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:.85rem;font-weight:500;margin:26px 4px 4px}
.loose-h .ln{flex:1;height:1px;background:var(--line)}

/* ---------- EMPTY STATE ---------- */
.empty{text-align:center; padding:70px 20px; border:1px dashed var(--line2); border-radius:var(--r); color:var(--mut)}
.empty i{font-size:46px; color:var(--dim); display:block; margin-bottom:16px}
.empty h3{font-family:'Unbounded'; font-weight:600; font-size:1.2rem; color:var(--txt); margin-bottom:8px}
.empty p{font-size:.92rem; margin-bottom:20px}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.login-card{width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 30px}
.login-card .brand{justify-content:center; padding:0 0 8px}
.login-card .tag{text-align:center; color:var(--mut); font-size:.9rem; margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block; font-size:.82rem; color:var(--mut); margin-bottom:7px; font-weight:500}
.field input{width:100%; background:#0e0f12; border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--txt); font-size:.95rem; font-family:inherit; outline:none}
.field input:focus{border-color:var(--green)}
.login-card .btn.green{width:100%; justify-content:center; padding:13px; margin-top:6px}
.err{background:var(--redbg); border:1px solid rgba(255,81,81,.3); color:#ff9a9a; font-size:.85rem; padding:10px 13px; border-radius:10px; margin-bottom:18px; text-align:center}

/* ---------- MODAL ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(5,6,8,.66); display:none; place-items:center; z-index:50; padding:20px}
.modal-bg.open{display:grid}
.modal{width:100%; max-width:440px; background:var(--card); border:1px solid var(--line2); border-radius:16px; padding:26px}
.modal h2{font-family:'Unbounded'; font-weight:600; font-size:1.25rem; margin-bottom:20px}
.modal .row{display:flex; gap:10px; justify-content:flex-end; margin-top:22px}
.modal select{width:100%; background:#0e0f12; border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--txt); font-size:.95rem; font-family:inherit; outline:none}
.confirm-msg{color:var(--mut); font-size:.92rem; line-height:1.55; margin:-8px 0 2px}

/* ---------- PLACEHOLDER ---------- */
.ph-page{padding:70px 20px; text-align:center; color:var(--mut)}
.ph-page i{font-size:50px; color:var(--dim); display:block; margin-bottom:18px}
.ph-page h1{font-family:'Unbounded'; font-weight:700; font-size:1.6rem; color:var(--txt); margin-bottom:12px}

/* ---------- MANAGE / SETTINGS ---------- */
.mhead{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.mhead h1{font-family:'Unbounded';font-weight:700;font-size:1.4rem;letter-spacing:-.5px;display:flex;align-items:center;gap:12px}
.flash{display:flex;align-items:center;gap:9px;background:var(--greenbg);border:1px solid rgba(46,230,111,.3);color:#9affc0;padding:11px 15px;border-radius:11px;margin-bottom:18px;font-size:.9rem}
.flash i{font-size:18px}

.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:40px 20px;border:2px dashed var(--line2);border-radius:var(--r);cursor:pointer;transition:.15s;margin-bottom:18px;background:var(--card)}
.dropzone:hover,.dropzone.drag{border-color:var(--green);background:var(--card2)}
.dropzone i{font-size:34px;color:var(--green)}
.dz-main{font-size:1.05rem;font-weight:600}
.dz-sub{font-size:.82rem;color:var(--mut);max-width:520px}
.dz-sub b{color:var(--txt);font-family:'JetBrains Mono',monospace}
.dz-progress{width:100%;max-width:520px;margin-top:10px}
.dz-bar{height:9px;border-radius:99px;background:var(--elev);overflow:hidden;border:1px solid var(--line)}
.dz-bar-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green-d),var(--green));transition:width .2s ease}
.dz-pct{margin-top:9px;font-size:.82rem;color:var(--mut);font-family:'JetBrains Mono',monospace}
.dz-pct.err{color:var(--red)}
.dropzone.busy{cursor:default;border-color:var(--green);background:var(--card2)}

.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.block-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;margin-bottom:13px}
.block-h i{font-size:18px;color:var(--mut)}
.hint{color:var(--dim);font-size:.78rem;margin-top:9px}
.warn{display:flex;align-items:center;gap:8px;color:var(--amber);font-size:.82rem;margin-bottom:12px}
.warn i{font-size:16px}
.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.block input:not([type=time]){background:#0e0f12;border:1px solid var(--line);border-radius:9px;padding:10px 13px;color:var(--txt);font-size:.9rem;outline:none;font-family:inherit}
.block input:focus{border-color:var(--line2)}
.block input.mono{font-family:'JetBrains Mono',monospace;font-size:.85rem}
.tf{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:.85rem}
.tf input[type=time]{background:#0e0f12;border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--txt);font-family:'JetBrains Mono',monospace;outline:none;color-scheme:dark}

.enc{width:100%;border-collapse:collapse}
.enc td{padding:7px 0;font-size:.86rem;border-bottom:1px solid var(--line)}
.enc tr:last-child td{border-bottom:none}
.enc td:last-child{text-align:right;font-weight:600}
.enc .g{color:var(--green)} .enc .a{color:var(--amber)} .enc .r{color:var(--red)}

.vlist{display:flex;flex-direction:column}
.vrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:none}
.vnum{color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:.82rem;width:34px}
.vname{font-weight:500;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.vstat{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mut)}
.vstat i{font-size:15px}
.vstat.g{color:var(--green)} .vstat.a{color:var(--amber)} .vstat.r{color:var(--red)}
.vstat.a i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.settings-card{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.settings-card .field{margin-bottom:20px}
.settings-card select{width:100%;background:#0e0f12;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--txt);font-size:.95rem;font-family:inherit;outline:none}
.settings-card select:focus{border-color:var(--green)}
.srow{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* ---------- VIDEO LIBRARY ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s,transform .15s}
.vcard:hover{border-color:var(--line2);transform:translateY(-2px)}
.vthumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;background:var(--elev);overflow:hidden}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb>i{font-size:34px;color:var(--dim)}
.vqbadge{position:absolute;top:9px;right:9px;z-index:2;font-size:.66rem;font-weight:600;padding:3px 7px;border-radius:6px;background:rgba(10,11,13,.7);color:#cfd3da;font-family:'JetBrains Mono',monospace}
.vproc{position:absolute;bottom:9px;left:9px;z-index:2;font-size:.7rem;padding:3px 8px;border-radius:99px;background:rgba(255,176,32,.18);color:#ffce75;display:inline-flex;gap:5px;align-items:center}
.vproc i{animation:spin 1s linear infinite}
.vproc.r{background:rgba(255,81,81,.18);color:#ff9a9a}
.vproc.r i{animation:none}
.vcbody{padding:11px 13px 13px}
.vcname{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:7px}
.vcmeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--mut);font-size:.78rem;margin-bottom:11px}
.vcmeta i{font-size:14px}
.usepill{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-weight:600}
.usepill0{display:inline-flex;align-items:center;gap:5px;color:var(--dim)}
.vcact .btn{width:100%;justify-content:center}
/* library picker (manage) + safe-delete modal (videos) */
.liblist,.libdel-list{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto;margin:6px 0 2px}
.librow,.libdel-row{display:flex;align-items:center;gap:11px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#0e0f12}
.libthumb{width:64px;height:36px;border-radius:6px;overflow:hidden;background:var(--elev);display:grid;place-items:center;flex:none}
.libthumb img{width:100%;height:100%;object-fit:cover}
.libthumb i{font-size:18px;color:var(--dim)}
.libname{font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.libsub{font-size:.74rem;color:var(--mut);font-family:'JetBrains Mono',monospace}
.libdel-row a{color:#9cc2ff;font-size:.88rem}
.libdel-row .livetag{color:var(--green);font-size:.74rem;margin-left:8px}

@media(max-width:820px){.app{grid-template-columns:1fr}.side{display:none}.kpis{grid-template-columns:repeat(2,1fr)}}