:root{
  --bg:#20242b; --panel:#2a2f38; --field:#1a1d23; --line:#3a404b;
  --text:#e8eaee; --muted:#9aa1ad; --accent:#dd3333; --ok:#3fb27f; --warn:#e0a53a;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.app{display:grid;grid-template-columns:minmax(340px,460px) 1fr;min-height:100vh}
aside{background:var(--panel);border-right:1px solid var(--line);overflow:auto;max-height:100vh;display:flex;flex-direction:column}
.brandbar{display:flex;align-items:center;gap:12px;padding:18px 22px 12px}
.brandbar img{height:32px;max-width:180px;object-fit:contain}
.brandbar h1{font-size:18px;font-weight:600;margin:0}
.brandbar small{display:block;color:var(--muted);font-size:12px}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 22px}
.tabs button{font:inherit;font-weight:500;background:none;border:0;color:var(--muted);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}
.tab{display:none;padding:6px 22px 40px}
.tab.active{display:block}
fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:16px 0 6px}
fieldset:first-child{border-top:0}
legend{font-weight:600;font-size:14px;padding:0 8px 0 0}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 5px}
input[type=text],textarea,select{width:100%;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font:inherit}
input[type=date]{width:100%;min-width:0;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font:inherit;color-scheme:dark}
textarea{min-height:100px;resize:vertical}
input[type=range]{width:100%}
input[type=color]{width:44px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--field);padding:2px}
input[type=search]{width:100%;min-width:0;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font:inherit}
.storyTools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.storyFilters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 8px}
.storyFilters button{font:inherit;font-size:12px;font-weight:500;background:var(--field);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:4px 11px;cursor:pointer}
.storyFilters button[aria-pressed=true]{background:var(--text);border-color:var(--text);color:#17191e}
.storyList{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 220px);min-height:420px;overflow:auto;padding-right:2px}
.story{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start;text-align:left;font:inherit;color:var(--text);background:#20242b;border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer}
.story:hover{border-color:#5a6170}
.story[aria-current=true]{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.story img,.story .noimg{width:56px;height:74px;border-radius:5px;object-fit:cover;background:#111}
.story .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--muted)}
.story .tag{font-weight:700;letter-spacing:.02em;padding:1px 6px;border-radius:4px;background:var(--line);color:var(--text)}
.story .tag.rss{background:#3b3320;color:#f3cf7a}.story .tag.approved{background:#1f4a37;color:#8fe0b6}.story .tag.err{background:#4a2a1f;color:#f0b48f}
.story .title{font-size:13px;font-weight:600;line-height:1.3;margin:4px 0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story .sum{font-size:12px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.optional{font-weight:400;color:#7f8794}
.dateRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.row>div{flex:1}
.drop{border:1.5px dashed var(--line);border-radius:8px;padding:14px;text-align:center;color:var(--muted);cursor:pointer;font-size:13px}
.drop:hover{border-color:var(--muted)}
.drop input{display:none}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.thumb{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .n{position:absolute;left:5px;top:5px;background:rgba(0,0,0,.65);font-size:11px;padding:1px 6px;border-radius:4px}
.thumb .ctl{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;background:rgba(0,0,0,.6)}
.thumb button{background:none;border:0;color:#fff;cursor:pointer;padding:4px 7px;font-size:13px}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin:9px 0 0}
.check input{width:15px;height:15px;accent-color:var(--accent)}
.sourceLink{display:inline-block;color:#7fb0ff;font-size:12px;margin-top:9px}
.sourceLink[hidden]{display:none}
.btn{font:inherit;font-weight:600;border-radius:7px;border:1px solid var(--line);background:var(--field);color:var(--text);padding:10px 16px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.drop:focus-within{outline:2px solid #7fb0ff;outline-offset:2px}
.logoPreview{display:flex;align-items:center;gap:14px;margin-top:10px;background:#15181d;border-radius:8px;padding:12px}
.logoPreview img{height:56px;max-width:180px;object-fit:contain;background:repeating-conic-gradient(#2b2f38 0 25%,#232730 0 50%) 0 0/16px 16px;border-radius:4px}
.vo{background:#15181d;border-radius:8px;padding:12px;margin-top:10px;font-size:13px;color:var(--muted)}
.vo b{color:var(--text)}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;background:var(--line);color:var(--text);vertical-align:middle;margin-left:6px}
.pill.ok{background:#1f4a37;color:#8fe0b6}.pill.off{background:#4a2a1f;color:#f0b48f}
main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px}
.stage{height:min(78vh,860px);aspect-ratio:9/16;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
canvas{width:100%;height:100%;display:block}
.player{width:min(100%,560px);background:#181b21;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.transport{display:flex;gap:8px;align-items:center;justify-content:center}
.transportBtn{min-width:54px}
.playBtn{min-width:104px;background:#f0f2f5;color:#17191e;border-color:#f0f2f5}
.timelineRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:11px}
.timelineRow input[type=range]{height:24px;margin:0;cursor:pointer;accent-color:var(--accent)}
.timelineRow input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--accent) 0 var(--played,0%),#464c57 var(--played,0%) 100%)}
.timelineRow input[type=range]::-webkit-slider-thumb{margin-top:-5px;width:18px;height:18px}
.time{font-variant-numeric:tabular-nums;color:var(--text);font-size:13px;min-width:112px;text-align:right}
.timelineHelp{color:var(--muted);font-size:11px;text-align:center;margin-top:6px}
.exportActions{display:flex;gap:8px}
#exportProgress{width:min(100%,400px);height:7px;accent-color:var(--accent)}
.status{font-size:13px;color:var(--muted);min-height:20px;text-align:center;max-width:560px}
.status a{color:#7fb0ff}
.status.err{color:#f0a0a0}
.brandbar{position:relative}
.signOut{margin-left:auto}
.gate{position:fixed;inset:0;display:none;place-items:center;background:#17191e;padding:24px;z-index:20}
body.locked .gate{display:grid}
body.locked .app{display:none}
.gateCard{width:min(100%,380px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 24px}
.gateCard h1{margin:0 0 8px;font-size:22px}
.gateCard p{margin:0 0 8px;color:var(--muted)}
.gateCard .btn{width:100%;margin-top:16px}
.turnstile{margin-top:14px;min-height:65px}
.gateCard .err{color:#f0a0a0}
.gateCard .ok{color:#8fe0b6}
.gateCard input[type=email],.gateCard input[type=password]{width:100%;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font:inherit}
.gateLogo{display:block;height:36px;max-width:200px;object-fit:contain;margin-bottom:18px}
.gateLinks{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.linkBtn{font:inherit;font-size:13px;background:none;border:0;color:#7fb0ff;cursor:pointer;padding:2px 0}
.linkBtn[hidden]{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  aside{max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  main{order:-1}
  .stage{height:62vh}
}