/* Stream Monitor — dark ops-console theme
   Palette: bg #0B0E14 · surface #131824 · line #1F2735 · ink #E7ECF3
   accent #3DDC84 · red #E5484D · amber #F5A623 · blue #4C8DFF          */

:root{
  --bg:#0B0E14; --surface:#131824; --surface2:#0F1420; --line:#232B3B;
  --ink:#E7ECF3; --ink2:#9AA6B8; --ink3:#5E6A7E;
  --accent:#3DDC84; --red:#E5484D; --amber:#F5A623; --blue:#4C8DFF;
  --radius:14px;
  font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, #14263A22, transparent 60%),
    radial-gradient(900px 420px at -10% 0%, #10321F26, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.micro{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.hint{color:var(--ink2);font-size:.85rem;line-height:1.45;margin:.35rem 0 .6rem}
code{background:#0A0E16;border:1px solid var(--line);padding:.08em .4em;border-radius:6px;font-size:.85em}
.mt{margin-top:1.15rem}

/* ------------------------------------------------------------ topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.4rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#0B0E14EE;backdrop-filter:blur(8px);z-index:40;
}
.brand{display:flex;align-items:center;gap:.65rem}
.brand h1{font-size:1.02rem;font-weight:500;letter-spacing:.02em}
.brand h1 b{font-weight:800}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent)}
.topbar-right{display:flex;align-items:center;gap:.7rem}

/* ------------------------------------------------------------- grid */
main{padding:1.4rem;max-width:1500px;margin:0 auto}
.grid{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.tile{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .15s, transform .15s;
}
.tile:hover{border-color:#2E3A52;transform:translateY(-1px)}
.tile .tally{height:4px;width:100%;background:var(--ink3)}
.tile.live .tally{background:var(--red);animation:pulse 1.6s infinite}
.tile.active .tally{background:var(--accent)}
.tile.waiting .tally,.tile.starting .tally,.tile.reconnecting .tally{background:var(--amber)}
.tile.configuring .tally{background:var(--amber)}
.tile.finished .tally{background:var(--blue)}
.tile.error .tally{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.thumb{aspect-ratio:16/9;background:#070A10;position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink3);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.thumb .pill{position:absolute;top:.55rem;left:.55rem}
.thumb .prog{position:absolute;left:0;bottom:0;height:4px;background:var(--accent);width:0%}

.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .6rem;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:#0B0F17CC;border:1px solid var(--line);backdrop-filter:blur(4px)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--ink3)}
.pill.live i{background:var(--red);animation:pulse 1.6s infinite}
.pill.active i{background:var(--accent)}
.pill.waiting i,.pill.starting i,.pill.reconnecting i,.pill.configuring i{background:var(--amber)}
.pill.finished i{background:var(--blue)}
.pill.error i{background:var(--red)}

.tile-body{padding:.8rem .95rem .9rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tile-name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-detail{color:var(--ink2);font-size:.8rem;min-height:1.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-stats{display:flex;gap:1.1rem;margin-top:.15rem}
.stat{display:flex;flex-direction:column;gap:.12rem}
.stat b{font-size:1.05rem;font-weight:800}
.stat span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.tile-foot{display:flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:.55rem;
  border-top:1px solid var(--line)}
.tile-foot .grow{flex:1}
.lastrep{font-size:.68rem;color:var(--ink3)}

.tile.add{align-items:center;justify-content:center;min-height:280px;cursor:pointer;
  border-style:dashed;color:var(--ink3);gap:.5rem;background:transparent}
.tile.add:hover{color:var(--accent);border-color:var(--accent)}
.tile.add .plus{font-size:2.4rem;line-height:1}
.tile .del-badge{position:absolute;top:.55rem;right:.55rem;z-index:5}

/* ------------------------------------------------------------ buttons */
.btn{
  background:#1A2233;border:1px solid var(--line);color:var(--ink);
  padding:.5rem .85rem;border-radius:10px;font-size:.82rem;font-weight:600;
  cursor:pointer;transition:all .13s;white-space:nowrap;
}
.btn:hover{border-color:#33405C;background:#20293D}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04140B}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent}
.btn.icon{padding:.5rem .6rem}
.btn.tiny{padding:.28rem .55rem;font-size:.72rem;border-radius:8px}

/* --------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem}
.field>span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.field>span em{color:var(--ink3);text-transform:none;letter-spacing:0;font-weight:500;font-style:normal}
input[type=text],input[type=number],input[type=datetime-local],input[type=date],
input[type=time],textarea,select{
  background:#0C111B;border:1px solid var(--line);color:var(--ink);
  padding:.55rem .7rem;border-radius:10px;font:inherit;width:100%;
}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;min-height:70px}
input[type=color]{width:42px;height:34px;padding:2px;background:#0C111B;
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
input[type=range]{accent-color:var(--accent);width:100%}
.filein{color:var(--ink2);font-size:.82rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.row-gap{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.4rem 0}
.check{display:flex;align-items:center;gap:.55rem;padding:.45rem 0;color:var(--ink);
  font-size:.88rem;cursor:pointer}
.check input{accent-color:var(--accent);width:16px;height:16px}

.seg{display:flex;background:#0C111B;border:1px solid var(--line);border-radius:11px;
  padding:3px;gap:3px;margin-bottom:.85rem}
.seg-btn{flex:1;background:transparent;border:0;color:var(--ink2);padding:.5rem .6rem;
  border-radius:8px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.seg-btn.active{background:#1E2A3F;color:var(--ink)}
.seg.small .seg-btn{padding:.4rem .5rem;font-size:.78rem}

/* --------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:#05070BCC;display:flex;align-items:center;
  justify-content:center;z-index:100;padding:1rem;backdrop-filter:blur(3px)}
.modal.hidden{display:none}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 30px 80px #000A}
.modal-card.small{width:min(420px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:1rem;font-weight:800}
.modal-body{padding:1.05rem 1.15rem;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:.9rem 1.15rem;
  border-top:1px solid var(--line)}
.x{background:transparent;border:0;color:var(--ink2);font-size:1rem;cursor:pointer;
  padding:.3rem .45rem;border-radius:8px}
.x:hover{color:var(--ink);background:#1A2233}
.pillline{font-size:.8rem;color:var(--ink2);display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;margin:.3rem 0}
.pillline .ok{color:var(--accent);font-weight:700}
.pillline .bad{color:var(--amber);font-weight:700}
.copybox{display:flex;gap:.4rem;align-items:center;background:#0C111B;
  border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;font-size:.8rem;
  max-width:100%;overflow:hidden}
.copybox span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------------------------------------------------------------- overlay */
.overlay{position:fixed;inset:0;background:var(--bg);z-index:80;display:flex;
  flex-direction:column}
.overlay.hidden{display:none}
.overlay-head{display:flex;align-items:center;gap:1rem;padding:.85rem 1.3rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap;background:#0C1018}
.overlay-head h2{font-size:1rem;font-weight:800;margin-right:auto}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.tabs button{background:transparent;border:1px solid transparent;color:var(--ink2);
  padding:.45rem .8rem;border-radius:9px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.tabs button.active{background:#1A2233;color:var(--ink);border-color:var(--line)}
.overlay-body{overflow-y:auto;padding:1.3rem;flex:1}
.tab{display:none;max-width:860px;margin:0 auto}
.tab.active{display:block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.15rem;margin-bottom:1rem}
.card h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  margin-bottom:.8rem;font-weight:800}
.savebar{display:flex;justify-content:flex-end;gap:.6rem;position:sticky;bottom:0;
  padding:.8rem 0;background:linear-gradient(transparent,var(--bg) 35%)}

/* partner blocks */
.partner{border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;margin-bottom:.9rem;background:var(--surface2);overflow:hidden}
.partner-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;
  background:#0D1220}
.partner-head b{font-size:.95rem}
.partner-head .grow{flex:1}
.placement{display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;
  border-top:1px solid var(--line);font-size:.86rem;flex-wrap:wrap}
.placement .dot{width:10px;height:10px;border-radius:3px;flex:none}
.placement .nm{font-weight:600;min-width:120px}
.badge{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:.14rem .45rem;border-radius:6px;color:var(--ink2)}
.placement .grow{flex:1}
.placement.off{opacity:.45}
.thr{display:flex;align-items:center;gap:.45rem;font-size:.74rem;color:var(--ink2)}
.thr input{width:90px}
.upzone{border:1.5px dashed var(--line);border-radius:12px;padding:.9rem;
  text-align:center;color:var(--ink3);font-size:.83rem;cursor:pointer;margin-top:.6rem}
.upzone:hover{border-color:var(--accent);color:var(--accent)}
.upzone input{display:none}

/* reports history */
.report-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;
  border-bottom:1px solid var(--line);font-size:.85rem;flex-wrap:wrap}
.report-row b{min-width:110px}
.report-row a{color:var(--accent);text-decoration:none}
.report-row a:hover{text-decoration:underline}
.report-row .grow{flex:1}

/* test results */
table.testres{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:.7rem}
table.testres th,table.testres td{padding:.45rem .55rem;border-bottom:1px solid var(--line);
  text-align:left}
table.testres th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.confbar{height:7px;border-radius:5px;background:#0C111B;overflow:hidden;min-width:110px}
.confbar i{display:block;height:100%;background:var(--ink3)}
.ok-tag{color:var(--accent);font-weight:800}
.no-tag{color:var(--ink3)}

/* -------------------------------------------------------------- drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);z-index:90;
  background:var(--surface);border-left:1px solid var(--line);display:flex;
  flex-direction:column;box-shadow:-20px 0 60px #0009;
  transform:translateX(0);transition:transform .2s}
.drawer.hidden{transform:translateX(105%)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:.92rem;font-weight:800}
.drawer-body{overflow-y:auto;padding:.7rem 1rem;font-family:ui-monospace,SFMono-Regular,
  Menlo,Consolas,monospace;font-size:.76rem;line-height:1.55}
.logline{padding:.18rem 0;border-bottom:1px solid #161D2B;display:flex;gap:.6rem}
.logline .t{color:var(--ink3);flex:none}
.logline.warn .m{color:var(--amber)}
.logline.error .m{color:var(--red)}
.logline.detect .m{color:var(--accent)}
.logline.report .m{color:var(--blue)}

/* -------------------------------------------------------------- toasts */
#toasts{position:fixed;bottom:1.1rem;right:1.1rem;display:flex;flex-direction:column;
  gap:.55rem;z-index:200;max-width:min(380px,92vw)}
.toast{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:.7rem .9rem;border-radius:11px;font-size:.86rem;box-shadow:0 12px 40px #000A;
  animation:tin .18s ease-out}
.toast.err{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--amber)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hidden{display:none!important}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
  .row2,.row3{grid-template-columns:1fr}
  .topbar{padding:.7rem .9rem}
  main{padding:.9rem}
}

/* ---------------------------------------------------- pretty scrollbars */
*{scrollbar-width:thin;scrollbar-color:#2A3450 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#232C42;border-radius:8px;
  border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#33405F}

/* ------------------------------------------------------- manage banner */
.managebar{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.4rem;
  background:#1A1206;border-bottom:1px solid #3A2E12;color:var(--amber);
  font-size:.85rem;position:sticky;top:57px;z-index:35}
.managebar .grow{flex:1}

/* ------------------------------------------------------ upload progress */
.uprow{display:flex;align-items:center;gap:.6rem;font-size:.8rem;
  color:var(--ink2);margin:.35rem 0}
.uprow .nm{min-width:140px;max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.upbar{flex:1;height:8px;background:#0C111B;border:1px solid var(--line);
  border-radius:6px;overflow:hidden}
.upbar i{display:block;height:100%;width:0%;background:var(--accent);
  transition:width .15s}
.uprow.done .upbar i{background:var(--accent)}
.uprow.err .upbar i{background:var(--red)}
.uprow .pct{width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- webhook rows */
.hookrow{display:flex;gap:.5rem;margin-bottom:.5rem}
.hookrow input{flex:1}

/* logs drawer: newest-first hint separators */
.drawer-body{scrollbar-gutter:stable}

/* ---------------- v3: player, choice, picker, tools ---------------- */
.thumb{cursor:pointer}
.playph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35rem;
  background:linear-gradient(160deg,#141a26,#0d1119)}
.playbtn{width:46px;height:46px;border-radius:50%;background:#ffffff14;
  border:1px solid #ffffff2b;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;color:var(--ink);
  transition:transform .15s,background .15s}
.thumb:hover .playbtn{transform:scale(1.12);background:var(--accent);
  color:#0b0e14}
.playtxt{font-size:.72rem;color:var(--ink3)}
.tile:has(.pending-note){outline:2px dashed var(--red);opacity:.75}
.pending-note{position:absolute;top:.55rem;left:.6rem;z-index:3;
  font-size:.68rem;color:#ffb4b4;background:#3a121299;
  border:1px solid #ff6b6b55;border-radius:6px;padding:.15rem .45rem}
.modal-foot.choice{display:flex;flex-direction:column;gap:.5rem;
  align-items:stretch}
.modal-foot.choice .btn{width:100%}
.modal-card.player{width:min(960px,94vw);padding-bottom:.8rem}
.playerbox{position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:10px;overflow:hidden}
.playerbox iframe{position:absolute;inset:0;width:100%;height:100%}
.rectwrap{position:relative;display:inline-block;max-width:100%;
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rectwrap img{display:block;max-width:min(1240px,92vw);max-height:76vh;
  width:auto;height:auto}
.rectwrap canvas{position:absolute;inset:0;cursor:crosshair}
.placement{display:block;padding:.35rem .5rem}
.prow{display:flex;align-items:center;gap:.55rem}
.prow.tools{margin-top:.3rem;padding-top:.3rem;
  border-top:1px dashed var(--line)}
.prow.tools select{background:var(--bg2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:.22rem .4rem;
  font-size:.74rem}
.tinychk{padding:0;font-size:.72rem;gap:.25rem;color:var(--ink2)}
.badge.ok-b{border-color:#2f6b4b;color:#8fe6b2}
.fhint{display:block;font-size:.68rem;color:var(--ink3);
  font-style:normal;margin-top:.2rem;line-height:1.35}
.warn-t{color:#ffd479}
#a-testpl{background:var(--bg2);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem}
#modal-rect .modal-card{width:min(1320px,95vw)}

/* ---------------------------------------------------------- PM views */
.main-nav{display:flex;gap:.35rem;margin-right:.5rem}
.main-nav a{
  color:var(--ink2);text-decoration:none;font-size:.78rem;font-weight:600;
  padding:.35rem .65rem;border-radius:8px;border:1px solid transparent;
}
.main-nav a:hover{color:var(--ink);border-color:var(--line)}
.main-nav a.active{color:var(--accent);border-color:#2f6b4b;background:#10321F44}

.pm-wrap{max-width:1200px;margin:0 auto;padding:1.4rem}
.pm-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.2rem;flex-wrap:wrap}
.pm-head h2{font-size:1.25rem;font-weight:800}
.pm-head .grow{flex:1}
.pm-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pm-card{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--line);border-radius:var(--radius);padding:1rem;
  display:flex;flex-direction:column;gap:.55rem;cursor:pointer;
  transition:border-color .15s,transform .15s;
}
.pm-card:hover{border-color:#2E3A52;transform:translateY(-1px)}
.pm-card h3{font-size:1rem;font-weight:700}
.pm-card .meta{color:var(--ink2);font-size:.82rem;line-height:1.45}
.pm-card .tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.25rem}
.tag{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:999px;border:1px solid var(--line);color:var(--ink3)}
.tag.live{color:#ffb4b6;border-color:#6b3035;background:#2a1215}
.tag.off{color:var(--ink3)}
.tag.match{color:#8fe6b2;border-color:#2f6b4b}
.tag.nomatch{color:var(--amber);border-color:#6b4a12}

.pm-detail{display:grid;gap:1rem}
.pm-section{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;
}
.pm-section h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:.75rem;font-weight:700}
.pm-table{width:100%;border-collapse:collapse;font-size:.85rem}
.pm-table th,.pm-table td{padding:.45rem .35rem;border-bottom:1px solid var(--line);text-align:left}
.pm-table th{color:var(--ink3);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.pm-table tr:last-child td{border-bottom:none}
.pm-table .actions{white-space:nowrap;text-align:right}

.media-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.media-item{
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.media-item .thumb-mini{aspect-ratio:16/9;background:#070A10;display:flex;align-items:center;
  justify-content:center;color:var(--ink3);font-size:.7rem;text-transform:uppercase}
.media-item .thumb-mini img{width:100%;height:100%;object-fit:cover}
.media-item .mi-body{padding:.65rem .75rem .75rem}
.media-item .mi-name{font-weight:700;font-size:.88rem;margin-bottom:.2rem}
.media-item .mi-meta{color:var(--ink2);font-size:.75rem}

.pick-list{display:flex;flex-direction:column;gap:.45rem;max-height:50vh;overflow:auto}
.pick-row{
  display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;
  border:1px solid var(--line);border-radius:10px;background:var(--surface2);
}
.pick-row input{margin:0}
.pick-row .grow{flex:1}
.pick-row.pick-back{cursor:pointer;color:var(--blue)}
.pick-row.pick-back:hover{border-color:var(--blue)}
.pick-row.pick-folder .pick-open{flex:none}
.pick-row.pick-folder label{font-size:.82rem;color:var(--ink2);white-space:nowrap}
.modal-card.wide{width:min(720px,95vw)}
.field-group{
  margin:.85rem 0;padding:.85rem .95rem;border:1px solid var(--line);
  border-radius:12px;background:var(--surface2);
}
.field-group .micro{margin-bottom:.45rem}
.field-group .hint{margin-bottom:.65rem}
.upload-bar{
  display:flex;gap:.65rem;flex-wrap:wrap;align-items:flex-end;
  padding:.85rem;border:1px dashed var(--line);border-radius:12px;margin-bottom:1rem;
}
.upload-bar .field{margin:0;flex:1;min-width:140px}
.vod-add-bar{
  display:flex;gap:.65rem;flex-wrap:wrap;align-items:flex-end;
  padding:.85rem;border:1px dashed var(--line);border-radius:12px;margin-bottom:1rem;
}
.vod-add-bar .field{margin:0;min-width:160px}
.vod-add-bar .field.grow{flex:2;min-width:220px}
.pm-vod-title{
  width:100%;min-width:10rem;padding:.25rem .45rem;font-size:.85rem;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);
}
.pm-vod-title:hover,.pm-vod-title:focus{border-color:var(--line);background:var(--surface2);outline:none}
.empty{color:var(--ink3);font-size:.88rem;padding:2rem;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius)}

.drive-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin-bottom:1rem;font-size:.88rem}
.drive-crumb .crumb-link{color:var(--blue);text-decoration:none}
.drive-crumb .crumb-link:hover{text-decoration:underline}
.drive-crumb .crumb-sep{color:var(--ink3);margin:0 .15rem}
.drive-crumb .crumb-current{color:var(--ink);font-weight:600}

.drive-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.drive-item{
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;
  padding:.75rem;position:relative;cursor:pointer;transition:border-color .15s,transform .15s;
  min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
}
.drive-item:hover{border-color:#2E3A52;transform:translateY(-1px)}
.drive-item.folder .drive-icon{font-size:2.2rem;line-height:1}
.drive-item.file{cursor:default}
.drive-item.file .drive-thumb{
  width:100%;aspect-ratio:16/9;background:#070A10;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.drive-item.file .drive-thumb img{width:100%;height:100%;object-fit:cover}
.drive-item .drive-name{font-size:.82rem;font-weight:600;text-align:center;
  word-break:break-word;width:100%}
.drive-item .drive-meta{font-size:.68rem;color:var(--ink3);text-align:center}
.drive-item .drive-del{position:absolute;top:.35rem;right:.35rem;opacity:0;transition:opacity .15s}
.drive-item:hover .drive-del{opacity:1}
.drive-item.drive-new,
.drive-item.drive-back{
  border-style:dashed;color:var(--ink3);background:transparent;
}
.drive-item.drive-new:hover{color:var(--accent);border-color:var(--accent)}
.drive-item.drive-back:hover{color:var(--blue);border-color:var(--blue)}
.drive-item.drive-new .drive-new-plus,
.drive-item.drive-back .drive-new-plus{font-size:2rem;line-height:1;font-weight:300}
.drive-item .drive-actions{
  position:absolute;top:.35rem;right:.35rem;display:flex;gap:.2rem;
  opacity:0;transition:opacity .15s;
}
.drive-item:hover .drive-actions{opacity:1}
.drive-item .drive-ren{padding:.15rem .35rem;font-size:.72rem;line-height:1}
.drive-item.folder .drive-actions .drive-del,
.drive-item.file .drive-actions .drive-del{position:static;opacity:1}
.file-type{font-size:.7rem;color:var(--ink3);text-transform:uppercase}