/* Playlist Studio — общий стиль */
:root{
  --bg:#0d1117; --bg2:#121821; --panel:#161d28; --panel2:#1b2431; --line:#263142; --line2:#324055;
  --tx:#e6edf3; --tx2:#9aa7b8; --tx3:#6b7a8f;
  --acc:#4c9dff; --acc2:#2f7be0; --ok:#3fb950; --warn:#d29922; --err:#f85149; --info:#58a6ff;
  --gfx1:#22c3e6; --gfx2:#8bd450; --gfx3:#f0a43a; --gfx4:#a78bfa; --gfx5:#f472b6;
  --c-prog:#2f5fd0; --c-ser:#5b4bd1; --c-film:#0e8f8a; --c-clip:#0f7a4f; --c-ad:#b4232c; --c-promo:#c26a12; --c-live:#c0392b; --c-other:#475569;
  --r:10px; --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
:root.light{
  --bg:#f4f6f9; --bg2:#eef1f5; --panel:#ffffff; --panel2:#f6f8fb; --line:#dfe4ea; --line2:#cbd3dd;
  --tx:#111827; --tx2:#4b5563; --tx3:#8a94a3; --shadow: 0 10px 30px rgba(15,23,42,.12);
  color-scheme: light;
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--acc);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--tx2)} .dim{color:var(--tx3)}
.hide{display:none!important}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 18px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.2px;white-space:nowrap}
.brand .logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--acc),#9b5cff);display:grid;place-items:center;font-size:13px;color:#fff}
.topbar .grow{flex:1}
.title-main{display:flex;flex-direction:column;min-width:0;flex:0 1 auto;overflow:hidden}
.title-main b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title-main span{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--panel2);border-radius:8px;padding:6px 11px;cursor:pointer;white-space:nowrap;transition:.12s}
.btn:hover{border-color:var(--acc);}
.btn.primary{background:var(--acc2);border-color:var(--acc2);color:#fff}
.btn.primary:hover{background:var(--acc)}
.btn.danger{color:var(--err)} .btn.danger:hover{border-color:var(--err)}
.btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover{border-color:var(--line2)}
.btn.sm{padding:3px 8px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.input{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;outline:none;min-width:0}
.input:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.input.mono{font-size:13px}
.input.bad{border-color:var(--err)}
select.input{padding-right:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;font-size:11.5px;border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:600}
.badge.err{background:var(--err);color:#fff} .badge.warn{background:var(--warn);color:#111} .badge.info{background:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--panel2);padding:5px 10px;cursor:pointer;font-size:12.5px}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--acc2);color:#fff}

/* ---------- index ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px}
.hero{display:flex;align-items:flex-end;gap:16px;margin:8px 0 18px;flex-wrap:wrap}
.hero h1{margin:0;font-size:24px}
.hero p{margin:4px 0 0;color:var(--tx2)}
.daygroup{margin:22px 0 8px;display:flex;align-items:center;gap:10px;color:var(--tx2);font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.daygroup::after{content:"";flex:1;height:1px;background:var(--line)}
.daygroup .tag{color:var(--acc);font-weight:600}
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.plcard{position:relative;display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--tx);transition:.15s}
.plcard:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:var(--shadow)}
.plcard .row1{display:flex;align-items:baseline;gap:10px}
.plcard .time{font-size:26px;font-weight:700;font-family:var(--mono);letter-spacing:-.5px}
.plcard .chan{font-weight:600}
.plcard .fname{font-size:12px;color:var(--tx3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plcard .stats{display:flex;gap:14px;margin-top:10px;font-size:12.5px;color:var(--tx2);flex-wrap:wrap}
.plcard .stats b{color:var(--tx);font-weight:600}
.plcard .bar{height:6px;border-radius:3px;overflow:hidden;display:flex;margin-top:10px;background:var(--bg2)}
.plcard .bar i{display:block;height:100%}
.empty{padding:40px;text-align:center;color:var(--tx2);border:1px dashed var(--line2);border-radius:14px}
.alert{padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--err) 50%,transparent);background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--tx);margin:12px 0}

/* ---------- viewer ---------- */
.toolbar{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 18px;background:var(--bg);border-bottom:1px solid var(--line)}
.layer-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:7px;border:1px solid var(--line2);cursor:pointer;font-size:12.5px;user-select:none;background:var(--panel2)}
.layer-toggle .sw{width:10px;height:10px;border-radius:3px}
.layer-toggle.off{opacity:.4}
.layer-toggle .n{color:var(--tx3);font-size:11px}

.minimap{position:relative;padding:8px 18px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.mm{position:relative;height:30px;border-radius:7px;overflow:hidden;background:var(--bg2);cursor:pointer}
.mm .p{position:absolute;top:0;height:18px}
.mm .lg{position:absolute;top:20px;height:4px;border-radius:2px;opacity:.9}
.mm .w{position:absolute;top:0;width:2px;height:30px}
.mm .now{position:absolute;top:-2px;bottom:-2px;width:2px;background:#ff3b30;box-shadow:0 0 6px #ff3b30}
.mm .vp{position:absolute;top:0;bottom:0;border:1.5px solid var(--tx);border-radius:4px;background:rgba(255,255,255,.06);pointer-events:none}
.mm-hours{position:relative;height:14px;font-size:10px;color:var(--tx3);margin-top:2px}
.mm-hours span{position:absolute;transform:translateX(-50%)}

.layout{display:block}
.main{min-width:0;padding:14px 18px 80px}
/* редактор — окно по центру поверх таймлайна */
.side-bg{position:fixed;inset:0;z-index:80;background:rgba(5,8,14,.55);backdrop-filter:blur(1.5px)}
.side{position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1080px,96vw);max-height:min(900px,92vh);
  overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55);padding:0}
.side.closed,.side-bg.hide{display:none}
.side .sp-h{border-radius:16px 16px 0 0}
.side .sp-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:0 26px;align-items:start}
.side .sp-b select.input{min-width:0;max-width:100%}
.side .sp-b > .hintbox,.side .sp-b > .full,.side .sp-b > .dim{grid-column:1/-1}
.side .actions{border-radius:0 0 16px 16px}
@media (max-width:980px){ .side .sp-b{grid-template-columns:1fr} .side{width:98vw;max-height:94vh} }
/* свёрнутое окно — полоска внизу, таймлайн доступен */
.side.min{top:auto;bottom:14px;transform:translateX(-50%);max-height:none;overflow:hidden;width:min(560px,96vw)}
.side.min .sp-b,.side.min .actions{display:none}
.side.min .sp-h{cursor:pointer;border-radius:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.card.break{background:linear-gradient(180deg,color-mix(in srgb,var(--c-ad) 9%,var(--panel)),var(--panel))}
.card.flash{animation:flash 1.6s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--acc)}100%{box-shadow:none}}
.card-h{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line)}
.card-h .t{font-family:var(--mono);font-weight:700;color:var(--acc);font-size:13.5px;white-space:nowrap}
.card-h .t2{font-family:var(--mono);color:var(--tx3);font-size:12px;white-space:nowrap}
.card-h .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.card-h .meta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.tl-scroll{overflow-x:auto;overflow-y:hidden}
.tl{position:relative;padding:8px 12px 4px 0}
.lane{display:flex;align-items:stretch;border-bottom:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}
.lane:last-of-type{border-bottom:0}
.lane-l{position:sticky;left:0;z-index:3;width:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.4px;background:var(--panel);color:var(--tx3)}
.lane-b{position:relative;flex:1}
.item{position:absolute;height:22px;border-radius:6px;font-size:11.5px;line-height:20px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  border:1px solid; color:var(--tx); user-select:none}
.item.zero{width:8px!important;padding:0;border-radius:2px}
.item.inh{opacity:.42;border-style:dashed}
.item.est{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.06) 6px 12px)}
.item.sel{outline:2px solid #fff;outline-offset:1px;z-index:5}
.item.draft{outline:2px dashed var(--warn);outline-offset:1px;z-index:6}
.item.haswarn::after{content:"";position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.item.haserr::after{content:"";position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:50%;background:var(--err)}
.item.dragging{opacity:.85;z-index:10;cursor:grabbing}
.item.hit{box-shadow:0 0 0 2px var(--warn)}
.L-GFX1{background:color-mix(in srgb,var(--gfx1) 22%,var(--panel));border-color:color-mix(in srgb,var(--gfx1) 65%,transparent)}
.L-GFX2{background:color-mix(in srgb,var(--gfx2) 22%,var(--panel));border-color:color-mix(in srgb,var(--gfx2) 65%,transparent)}
.L-GFX3{background:color-mix(in srgb,var(--gfx3) 22%,var(--panel));border-color:color-mix(in srgb,var(--gfx3) 65%,transparent)}
.L-GFX4{background:color-mix(in srgb,var(--gfx4) 22%,var(--panel));border-color:color-mix(in srgb,var(--gfx4) 65%,transparent)}
.L-GFX5{background:color-mix(in srgb,var(--gfx5) 22%,var(--panel));border-color:color-mix(in srgb,var(--gfx5) 65%,transparent)}
.L-X{background:var(--panel2);border-color:var(--line2)}

.prow{display:flex;align-items:stretch;margin-top:6px}
.prow .lane-l{color:var(--tx2)}
.pbar{position:relative;flex:1;height:40px}
.pr{position:absolute;top:0;height:40px;border-radius:7px;color:#fff;font-size:12px;padding:3px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;border:1px solid rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.pr small{opacity:.75;font-family:var(--mono);font-size:10.5px}
.pr:hover{filter:brightness(1.15)}
.pr.sel{outline:2px solid #fff;outline-offset:1px}
.pr.tiny{padding:0;font-size:0}
.pr.live::before{content:"● LIVE";font-size:10px;font-weight:700;color:#ffd7d3}
.axis{position:relative;height:18px;margin-left:56px;font-size:10px;color:var(--tx3)}
.axis i{position:absolute;top:0;width:1px;height:5px;background:var(--line2)}
.axis span{position:absolute;top:5px;transform:translateX(-50%);font-family:var(--mono);white-space:nowrap}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:#ff3b30;z-index:8;pointer-events:none;box-shadow:0 0 8px #ff3b30}
.add-hint{position:absolute;inset:0;pointer-events:none}

/* side panel */
.sp-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.sp-h .ttl{font-weight:650;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-b{padding:12px 14px 20px}
.sect{margin:6px 0 16px}
.sect h4{margin:0 0 8px;font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--tx3);display:flex;align-items:center;gap:8px}
.sect h4::after{content:"";flex:1;height:1px;background:var(--line)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:5px 10px;font-size:13px}
.kv>div:nth-child(odd){color:var(--tx2)}
.kv .mono{word-break:break-all}
.frow{display:flex;gap:6px;align-items:center;margin-bottom:7px}
.frow label{width:92px;flex:0 0 92px;font-size:12.5px;color:var(--tx2)}
.frow .input{flex:1}
.tcbox{display:flex;gap:4px;align-items:center;flex:1}
.tcbox .input{width:122px;flex:0 0 122px;text-align:center}
.nudge{display:inline-flex;gap:2px}
.nudge button{border:1px solid var(--line2);background:var(--panel2);border-radius:5px;font-size:11px;padding:3px 5px;cursor:pointer;font-family:var(--mono)}
.nudge button:hover{border-color:var(--acc)}
.calc{font-size:12px;color:var(--tx2);margin:-2px 0 8px 98px}
.calc b{color:var(--tx);font-family:var(--mono);font-weight:600}
.cdt{width:100%;border-collapse:collapse}
.cdt td{padding:3px 2px;vertical-align:middle}
.cdt td:first-child{width:62px}
.cdt .input{width:100%;padding:5px 8px}
.cdt .x{border:0;background:transparent;color:var(--tx3);cursor:pointer;font-size:15px;padding:2px 6px}
.cdt .x:hover{color:var(--err)}
.hintbox{font-size:12px;padding:8px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--tx2);margin:8px 0}
.hintbox.w{border-color:color-mix(in srgb,var(--warn) 60%,transparent);background:color-mix(in srgb,var(--warn) 10%,var(--bg2));color:var(--tx)}
.hintbox.e{border-color:color-mix(in srgb,var(--err) 60%,transparent);background:color-mix(in srgb,var(--err) 10%,var(--bg2));color:var(--tx)}
.actions{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 14px;background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap}
.seclist{display:flex;flex-direction:column;gap:5px}
.secrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:12.5px}
.secrow:hover{border-color:var(--acc)}
.secrow .sw{width:9px;height:24px;border-radius:3px;flex:0 0 9px}
.secrow .mono{font-size:11.5px;color:var(--tx2)}
video{width:100%;border-radius:10px;background:#000;max-height:260px}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2);margin:6px 0;cursor:pointer}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:min(1100px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.modal-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-h b{flex:1;font-size:15px}
.modal-b{overflow:auto;padding:16px}
.tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:transparent;padding:10px 12px;cursor:pointer;color:var(--tx2);border-bottom:2px solid transparent}
.tabs button.on{color:var(--tx);border-bottom-color:var(--acc)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kpi .v{font-size:20px;font-weight:700;font-family:var(--mono)}
.kpi .l{font-size:12px;color:var(--tx2)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-weight:600;color:var(--tx2);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--panel)}
table.t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:var(--bg2)}
.wl{display:flex;flex-direction:column;gap:4px}
.wi{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:13px}
.wi:hover{border-color:var(--acc)}
.wi .lv{flex:0 0 8px;height:8px;border-radius:50%;margin-top:6px}
.wi .tm{font-family:var(--mono);color:var(--tx2);flex:0 0 74px}
.diff{font-family:var(--mono);font-size:12px;white-space:pre;overflow:auto;background:var(--bg2);padding:10px;border-radius:8px;max-height:60vh}
.diff .a{color:var(--ok)} .diff .d{color:var(--err)} .diff .h{color:var(--acc)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast div{background:var(--panel2);border:1px solid var(--line2);border-left:4px solid var(--acc);padding:9px 14px;border-radius:10px;box-shadow:var(--shadow);font-size:13.5px;max-width:640px}
.toast div.err{border-left-color:var(--err)} .toast div.ok{border-left-color:var(--ok)}
.spinner{width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:sp 0.8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:60px;color:var(--tx2)}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--tx2)}


/* MAM */
.pr.miss{outline:2px solid var(--err);outline-offset:-2px;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.38) 0 7px,transparent 7px 14px)!important}
.missb{background:var(--err);color:#fff;border-radius:4px;padding:0 4px;font-size:10px;letter-spacing:.3px}
/* массовые операции */
.fgrp{margin-bottom:12px}
.fgrp .lbl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.fgrp .lbl a{font-size:11.5px;text-transform:none;letter-spacing:0;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.cb{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;font-size:12.5px;user-select:none}
.cb .n{color:var(--tx3);font-size:11px}
.cb .dot{width:8px;height:8px;border-radius:50%}
.cb.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,var(--panel2));color:var(--tx)}
.bulk-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.bulk-prev{max-height:58vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.bigcount{font-size:22px;font-weight:700;font-family:var(--mono)}
.tokhint{font-size:11.5px;color:var(--tx3);margin-top:6px;line-height:1.6}
.tokhint code{font-family:var(--mono);color:var(--tx2);cursor:pointer;border:1px dashed var(--line2);border-radius:4px;padding:0 3px}

/* источник: оригинал / копия */
.srcchip{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.3px;cursor:pointer;border:1px solid}
.srcchip.orig{color:var(--tx2);border-color:var(--line2);background:var(--panel2)}
.srcchip.copy{color:#ffd58a;border-color:color-mix(in srgb,var(--warn) 70%,transparent);background:color-mix(in srgb,var(--warn) 14%,var(--panel2))}
.srcchip .d{width:8px;height:8px;border-radius:50%}
#srcBanner{position:relative;z-index:24;padding:7px 18px;font-size:13px;background:color-mix(in srgb,var(--err) 16%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--err) 50%,transparent)}
.cbadge{display:inline-block;white-space:nowrap;margin-left:6px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;vertical-align:middle}
.cbadge.copy{background:color-mix(in srgb,var(--warn) 22%,transparent);color:#ffd58a;border:1px solid color-mix(in srgb,var(--warn) 60%,transparent)}
.cbadge.alarm{background:color-mix(in srgb,var(--err) 22%,transparent);color:#ff9b94;border:1px solid color-mix(in srgb,var(--err) 60%,transparent)}

/* SWF-плеер почти на весь экран */
.player-bg{position:fixed;inset:0;z-index:150;background:rgba(3,5,9,.86);display:flex;align-items:center;justify-content:center;overflow:auto}
.player{display:flex;flex-direction:column;gap:10px;max-width:97vw}
.player-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--tx)}
.player-h .ttl{font-weight:650;font-size:15px;margin-right:6px}
.player-h .src{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.player-h .grow{flex:1}
.stage{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line2),0 20px 60px rgba(0,0,0,.6)}
.stage.bg-checker{background:repeating-conic-gradient(#2a2f38 0 25%,#1f242c 0 50%) 0 0/24px 24px}
.stage.bg-black{background:#000} .stage.bg-grey{background:#7f7f7f} .stage.bg-green{background:#00b140}
.stage ruffle-player{display:block;width:100%;height:100%}
.stage video{position:absolute;inset:0;width:100%;height:100%;max-height:none;border-radius:0;object-fit:contain;background:#000;display:none}
.stage .vframe{position:absolute;left:0;top:0;transform-origin:0 0;z-index:2;overflow:hidden}
.stage .gfx{position:absolute;left:0;top:0}
.stage .sframe{position:absolute;display:none;outline:4px dashed #ffd400;outline-offset:-2px;color:#ffd400;font:600 22px var(--mono);padding:6px 10px;pointer-events:none;z-index:3;text-shadow:0 1px 3px #000}
.stage .msg{z-index:3;pointer-events:none}
.vbar{display:none;align-items:center;gap:8px}
.vbar .seek{position:relative;flex:1;height:14px;border-radius:7px;background:var(--bg2);border:1px solid var(--line2);cursor:pointer}
.vbar .seg{position:absolute;top:2px;bottom:2px;border-radius:5px;background:color-mix(in srgb,var(--gfx1) 55%,transparent)}
.vbar .head{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;background:#fff;border-radius:2px;box-shadow:0 0 4px #000}
.vbar .clock{font-family:var(--mono);font-size:12px;color:var(--tx2);white-space:nowrap}
.stage .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tx2);font-size:14px;text-align:center;padding:20px}
.player-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.player-f label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2)}
.player-f input{background:var(--bg2);border:1px solid var(--line2);border-radius:6px;padding:4px 7px;font-size:12.5px;color:var(--tx);min-width:90px}
.player-f .st{font-size:12px;color:var(--tx3);margin-left:auto}

/* закреплённая шапка страницы плейлиста: верхняя строка + панель поиска + баннер + мини-карта */
.hdr{position:sticky;top:0;z-index:30;background:var(--bg);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.hdr .topbar{position:relative;top:auto;flex-wrap:wrap;row-gap:8px}
.hdr .title-main{flex:1 1 150px;min-width:150px}

/* предпросмотр авторасстановки */
#pvBar{display:flex;align-items:center;gap:10px;padding:8px 18px;background:color-mix(in srgb,var(--acc) 22%,var(--bg));border-top:1px solid var(--acc);border-bottom:1px solid var(--acc);font-size:13px}
#pvBar .grow{flex:1}

.btn.disabled{opacity:.45;pointer-events:none}

/* список передач и выделение для выгрузки */
.grp{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:6px;overflow:hidden}
.grp.brk{background:color-mix(in srgb,var(--c-ad) 6%,var(--panel))}
.grp.picked{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.grp-h{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;user-select:none}
.grp-h:hover{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.grp-h .caret{color:var(--tx3);transition:transform .15s;width:12px;flex-shrink:0}
.grp.open>.grp-h .caret{transform:rotate(90deg)}
.grp.open>.grp-h{border-bottom:1px solid var(--line)}
.grp-h .t{font-family:var(--mono);font-weight:700;color:var(--acc);font-size:13.5px;white-space:nowrap}
.grp-h .t2{font-family:var(--mono);color:var(--tx3);font-size:12px;white-space:nowrap}
.grp-h .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.grp-h .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.grp-h .meta{display:flex;gap:6px;align-items:center;flex-shrink:0;font-size:12px}
.grp-h .livechip{color:#ff7b72;font-size:11px}
.grp-h .onair{color:#ff7b72;font-size:11.5px}
.grp-b{padding:8px 8px 2px 22px;background:color-mix(in srgb,var(--bg) 40%,var(--panel))}
.grp-b .card{margin-bottom:8px}
label.pick{display:inline-flex;align-items:center;padding:2px 2px 2px 8px;margin-left:auto;cursor:pointer;flex-shrink:0}
label.pick input{width:17px;height:17px;cursor:pointer;accent-color:var(--acc)}
.card.picked{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.card-h{user-select:none}
#pickBar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;width:max-content;
  max-width:calc(100% - 32px);padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--acc);box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:13px}
#pickBar .grow{flex:1;min-width:10px}
#pickBar .mono{font-family:var(--mono)}

/* ручки изменения длительности плашки */
.item .rz{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2}
.item .rz.l{left:-2px}
.item .rz.r{right:-2px}
.item:hover .rz{background:color-mix(in srgb,#fff 35%,transparent)}
.item .rz.l{border-radius:4px 0 0 4px}.item .rz.r{border-radius:0 4px 4px 0}

/* перемещение событий/блоков */
.mvh{cursor:grab;color:var(--tx3);font-size:15px;line-height:1;padding:2px 3px;border-radius:4px;flex-shrink:0;user-select:none}
.mvh:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.mvh:active{cursor:grabbing}
#mvLine{position:fixed;z-index:400;background:var(--acc);border-radius:2px;pointer-events:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
body.mv-dragging .item{pointer-events:none}

/* подсказки значений полей */
.vwrap{display:flex;gap:4px;align-items:center}
.vwrap .input{flex:1;min-width:0}
.sugb{flex-shrink:0;width:28px;height:28px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;color:var(--acc);font-size:13px}
.sugb:hover{border-color:var(--acc)}
#sugMenu{position:fixed;z-index:500;overflow:auto;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.4);padding:4px 0;font-size:13px}
#sugMenu .sug-h{padding:6px 12px;color:var(--tx3);font-size:12px;border-bottom:1px solid var(--line)}
#sugMenu .sug-g{padding:8px 12px 3px;font-size:11.5px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.03em}
#sugMenu .sug-i{display:flex;gap:10px;align-items:baseline;padding:5px 12px;cursor:pointer}
#sugMenu .sug-i:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}
#sugMenu .sug-i.on{background:color-mix(in srgb,var(--acc) 8%,transparent)}
#sugMenu .sug-i .l{color:var(--tx3);font-size:12px;flex:0 0 250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sugMenu .sug-i .v{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sugMenu .sug-i .tk{font-family:var(--mono);font-size:11px;color:var(--tx3)}

/* иконки плашек в строке передачи */
.grp-h .nm{flex:0 1 auto;max-width:42%}
.grp-h .ticons{display:flex;gap:4px;flex:1 1 0;min-width:0;overflow:hidden;flex-wrap:nowrap;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.ticon{flex-shrink:0;font-size:11px;line-height:18px;padding:0 6px;border-radius:5px;white-space:nowrap;font-family:var(--mono);
  color:var(--tx);background:color-mix(in srgb,var(--lc) 22%,transparent);border:1px solid color-mix(in srgb,var(--lc) 60%,transparent)}
.ticon i{font-style:normal;color:var(--tx3);margin-left:3px}

.dimrow{opacity:.45}
.ep-sep{font-size:12px;font-weight:700;color:var(--acc);margin:4px 2px 6px;text-transform:uppercase;letter-spacing:.04em}
/* наведение на плашку: подсвечены все её куски */
.item:hover,.item.hov{filter:brightness(1.35);box-shadow:0 0 0 2px color-mix(in srgb,#fff 70%,transparent);z-index:4}
.item.inh.hov{opacity:.9}

.cdt td.act{width:26px;text-align:center}
.cdt .x.more{font-size:17px;line-height:1;padding:2px 4px}
.cdt .x.more:hover{color:var(--acc)}
#rowMenu{position:fixed;z-index:600;display:flex;flex-direction:column;min-width:200px;padding:4px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#rowMenu button{border:0;background:transparent;color:var(--tx);text-align:left;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px}
#rowMenu button:hover:not(:disabled){background:color-mix(in srgb,var(--acc) 15%,transparent)}
#rowMenu button:disabled{opacity:.35;cursor:default}
#rowMenu button.danger{color:var(--err)}

/* закон: реклама и язык */
.kpi.bad .v{color:var(--err)}
.lawslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.lawslot{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel);cursor:pointer}
.lawslot.bad{border-color:var(--err);box-shadow:0 0 0 1px var(--err) inset}
.lawslot .h{margin-bottom:6px}
.lawslot .row{display:flex;gap:8px;align-items:baseline;font-size:13px;margin:3px 0}
.lawslot .row>span:first-child{flex:1;color:var(--tx2)}
.lawbar{position:relative;display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--line);margin:4px 0}
.lawbar i{display:block;height:100%}
.lawbar b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--tx);opacity:.85}
.lawleg{display:flex;gap:10px;font-size:11.5px;color:var(--tx3)}
.lawleg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px}
.lawst{font-size:12px;font-weight:600;white-space:nowrap}
.lawst.ok{color:var(--ok)}.lawst.bad{color:var(--err)}
tr.lawbad td{background:color-mix(in srgb,var(--err) 12%,transparent)}
.lawh{cursor:pointer}

/* пользователь в шапке */
.userchip{position:relative}
.userchip .ava{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;font-weight:700;margin-right:6px}
.usermenu{position:absolute;right:0;top:calc(100% + 6px);z-index:700;min-width:200px;display:flex;flex-direction:column;padding:4px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.usermenu a{padding:7px 10px;border-radius:6px;color:var(--tx);text-decoration:none;font-size:13px}
.usermenu a:hover{background:color-mix(in srgb,var(--acc) 15%,transparent)}

/* ================================================================ мобильная версия */
.mob-only{display:none}
.tb-actions{display:flex;align-items:center;gap:12px}
@media (max-width:820px){
  body{font-size:14px}
  .mob-only{display:inline-flex}
  .topbar{gap:6px;padding:8px 10px;flex-wrap:nowrap}
  .topbar .brand{font-size:0;gap:0}            /* только значок */
  .topbar .grow{flex:1;min-width:4px}
  .title-main{flex:1 1 auto;min-width:0}
  .title-main b{font-size:13.5px}
  #hSrc,#hWarn{display:none}
  .userchip .btn{padding:4px 6px}
  .userchip .btn .dim,.userchip .btn{font-size:0}
  .userchip .ava{font-size:12px;margin:0}
  /* действия — выпадающим списком */
  .tb-actions{display:none}
  .topbar.menu-open .tb-actions{display:flex;flex-direction:column;position:absolute;right:8px;top:calc(100% + 4px);z-index:90;min-width:230px;padding:6px;gap:4px;
    background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
  .topbar.menu-open .tb-actions .btn{justify-content:flex-start;width:100%;padding:10px 12px;font-size:14px}
  /* поиск, фильтры и мини-карта — по кнопке ⚲ */
  .hdr .toolbar,.hdr .minimap{display:none}
  .hdr.filt-open .toolbar{display:flex}
  .hdr.filt-open .minimap{display:block}
  #bFilt.on{border-color:var(--acc);color:var(--acc)}
  .toolbar{padding:8px 10px;gap:8px}
  .toolbar #q{width:100% !important;flex:1 1 100%}
  .toolbar #layers{flex:1 1 100%;flex-wrap:nowrap !important;overflow-x:auto}
  .toolbar .grow{display:none}
  #scaleMode{display:none}
  #zoom{width:110px !important}
  .minimap{padding:6px 10px 8px}
  /* лента */
  .main{padding:10px 8px 90px}
  .grp-h{flex-wrap:wrap;gap:4px 8px;padding:8px 10px}
  .grp-h .nm{max-width:none;flex:1 1 55%;white-space:normal}
  .grp-h .t2{font-size:11px}
  .grp-h .ticons{order:10;flex:1 1 100%}
  .grp-h .meta{order:11;flex:1 1 auto;flex-wrap:wrap}
  .grp-h .mvh{display:none}
  .grp-b{padding:6px 4px 2px 6px}
  .card-h{flex-wrap:wrap;gap:4px 8px;padding:8px 10px}
  .card-h .mvh{display:none}
  .ep-sep{margin-left:4px}
  /* окна — на весь экран */
  .modal-bg{padding:0;align-items:stretch}
  .modal{width:100% !important;max-width:100% !important;max-height:100vh;height:100%;border-radius:0;border:0}
  .modal .tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
  .bulk-grid{grid-template-columns:1fr !important}
  .bulk-grid > div[style*="grid-template-columns"],.bulk-grid div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .lawslots{grid-template-columns:1fr}
  table.t{font-size:12px}
  .modal .bd,.modal-body{overflow:auto;-webkit-overflow-scrolling:touch}
  /* редактор события */
  .side{left:0;top:0;transform:none;width:100vw !important;max-height:100vh;height:100vh;border-radius:0}
  .side .sp-b{grid-template-columns:1fr !important}
  .cdt td:first-child{width:56px}
  /* панель выделения */
  #pickBar{left:6px;right:6px;bottom:6px;transform:none;width:auto;max-width:none;flex-wrap:wrap;white-space:normal;font-size:12.5px;gap:6px}
  #pickBar .grow{display:none}
  #sugMenu{left:6px !important;right:6px;width:auto !important}
  #sugMenu .sug-i{flex-wrap:wrap}
  #sugMenu .sug-i .l{flex:1 1 100%}
  #pvBar{flex-wrap:wrap}
  .toast{left:8px;right:8px;bottom:8px;max-width:none;transform:none}
  /* главная и прочие страницы */
  .wrap{padding:14px 10px 60px}
  .hero{flex-direction:column;align-items:stretch;gap:10px}
  .hero h1{font-size:22px}
  body > .topbar{flex-wrap:wrap}
  body > .topbar #q{flex:1 1 100%;width:auto !important;order:20}
  .plcard .row1{flex-wrap:wrap}
  .fgrid{grid-template-columns:1fr !important}
  #ut{display:block;overflow-x:auto}
}
@media (max-width:820px){
  .hdr .topbar{flex-wrap:nowrap !important}
  .userchip .btn > :not(.ava){display:none}
  .side .sp-b > *,.side .frow > *,.side .kv > *{min-width:0}
  .side .input{min-width:0;max-width:100%}
  .side .frow{flex-wrap:wrap}
  .side .frow label{flex:0 0 80px;width:80px}
  .side .frow .input{flex:1 1 140px}
  .kv{grid-template-columns:96px minmax(0,1fr)}
}
@media (max-width:820px){
  #bTheme,#theme{display:none}
}
/* шапка таймлайна: на средних экранах действия — в меню «☰ Действия», пользователь — значком */
.menu-btn{display:none}
.hdr .topbar{flex-wrap:nowrap}
@media (max-width:1700px){
  .hdr .userchip .btn{font-size:0;padding:4px 6px}
  .hdr .userchip .btn > :not(.ava){display:none}
  .hdr .userchip .ava{margin:0;font-size:12px}
}
@media (max-width:1580px){
  .menu-btn{display:inline-flex}
  .hdr .tb-actions{display:none}
  .hdr .topbar.menu-open .tb-actions{display:flex;flex-direction:column;position:absolute;right:8px;top:calc(100% + 4px);z-index:90;min-width:230px;padding:6px;gap:4px;
    background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
  .hdr .topbar.menu-open .tb-actions .btn{justify-content:flex-start;width:100%;padding:10px 12px;font-size:14px}
}
@media (max-width:820px){ .menu-btn{font-size:0} .menu-btn::before{content:"☰";font-size:15px} }