:root{--bg:#0e1116;--card:#171c24;--card2:#1d2530;--accent:#5b8cff;--txt:#e6e9ef;--mut:#8a93a3;--ok:#3ecf8e;--bad:#ff6b6b;--warn:#ffb454;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt)}
a{color:var(--accent)}
/* login */
.login-bg{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--card);border:1px solid #232a35;border-radius:16px;padding:32px;width:330px;display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:0;font-size:1.5rem}
.login-card .sub{margin:0 0 8px;color:var(--mut);font-size:.85rem}
.login-card input{background:#0f141b;border:1px solid #2a3340;border-radius:9px;padding:11px;color:var(--txt);font-size:1rem}
.login-card button{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:12px;font-weight:700;font-size:1rem;cursor:pointer;margin-top:4px}
.err{color:var(--bad);font-size:.85rem;min-height:1em}
/* app */
header{display:flex;align-items:center;gap:18px;padding:14px 22px;border-bottom:1px solid #232a35;background:var(--card)}
header h1{font-size:1.1rem;margin:0}
nav{display:flex;gap:6px;margin-left:10px}
nav button{background:transparent;border:0;color:var(--mut);font-size:.95rem;padding:8px 14px;border-radius:8px;cursor:pointer}
nav button.active{background:var(--card2);color:var(--txt)}
.spacer{flex:1}
.logout{color:var(--mut);font-size:.85rem;background:none;border:0;cursor:pointer}
main{max-width:1000px;margin:0 auto;padding:24px 18px 70px}
.view{display:none}.view.active{display:block}
.card{background:var(--card);border:1px solid #232a35;border-radius:14px;padding:20px;margin-bottom:18px}
label{display:block;font-weight:600;margin:0 0 7px;font-size:.9rem}
textarea,select,input[type=text]{width:100%;background:#0f141b;color:var(--txt);border:1px solid #2a3340;border-radius:10px;padding:11px;font-size:1rem}
textarea{min-height:84px;resize:vertical}
.row{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}.col{flex:1;min-width:200px}
.secval{color:var(--accent);font-weight:700}
button.go{margin-top:18px;width:100%;padding:13px;font-size:1.03rem;font-weight:700;background:var(--accent);color:#fff;border:0;border-radius:10px;cursor:pointer}
button.go:disabled{opacity:.5;cursor:not-allowed}
.status{margin-top:12px;color:var(--mut);font-size:.92rem;min-height:1.2em}
.spin{display:inline-block;width:13px;height:13px;border:2px solid #384150;border-top-color:var(--accent);border-radius:50%;animation:s .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}
video{width:100%;border-radius:10px;margin-top:10px;background:#000}
.hint{color:var(--mut);font-size:.8rem;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tile{background:var(--card2);border:1px solid #232a35;border-radius:10px;overflow:hidden}
.tile video{margin:0;border-radius:0}
.tile .meta{padding:9px 11px}
.tile .t{font-size:.85rem;line-height:1.3;max-height:3.4em;overflow:hidden}
.tile .b{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:.72rem;color:var(--mut)}
.badge{font-size:.7rem;padding:2px 7px;border-radius:20px;font-weight:700}
.badge.done{background:rgba(62,207,142,.15);color:var(--ok)}
.badge.rendering,.badge.stitching,.badge.scripting,.badge.queued{background:rgba(255,180,84,.15);color:var(--warn)}
.badge.failed{background:rgba(255,107,107,.15);color:var(--bad)}
.scenes{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.scene{display:flex;gap:10px;align-items:center;background:var(--card2);border-radius:8px;padding:8px 11px;font-size:.85rem}
.scene .n{color:var(--mut);min-width:26px}
.scene .nm{flex:1}
.section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:22px 0 10px}
.dl{color:var(--accent);font-size:.8rem;text-decoration:none}
.empty{color:var(--mut);padding:30px;text-align:center}

/* ===== dashboard ===== */
.dash-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:14px;margin-bottom:16px}
@media(max-width:760px){.dash-grid{grid-template-columns:1fr}}
.stat-card{background:var(--card);border:1px solid #232a35;border-radius:14px;padding:20px;text-align:center}
.stat-card.big{text-align:left}
.ring{width:128px;height:128px;border-radius:50%;margin:0 auto 12px;position:relative;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--accent) 0deg,#232a35 0deg);transition:background .6s}
.ring::before{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.ring span{position:relative;font-size:1.7rem;font-weight:800}
.stat-label{color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.stat-sub{color:var(--mut);font-size:.75rem;margin-top:2px}
.stat-big{font-size:1.9rem;font-weight:800;margin-bottom:8px}
.stat-mid{font-size:1.25rem;font-weight:700}
.bar{height:12px;background:#0f141b;border-radius:7px;overflow:hidden;border:1px solid #2a3340}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,#5b8cff,#3ecf8e);border-radius:7px;transition:width .6s}
.mini-row{display:flex;gap:18px;margin-top:16px}
.mini-row>div{flex:1}
.activity-card{display:block}
.activity-head{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700}
.live-dot{width:11px;height:11px;border-radius:50%;background:#444c59;display:inline-block}
.live-dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.6)}70%{box-shadow:0 0 0 10px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.activity-detail{color:var(--mut);margin-top:8px;font-size:.92rem}
.pipeline{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.stage{flex:1;min-width:90px;text-align:center;padding:9px 6px;border-radius:9px;background:var(--card2);color:var(--mut);font-size:.8rem;border:1px solid #232a35;position:relative}
.stage.active{background:rgba(91,140,255,.15);color:var(--accent);border-color:var(--accent)}
.stage.done{background:rgba(62,207,142,.12);color:var(--ok)}
.dash-movie{background:var(--card);border:1px solid #232a35;border-radius:14px;padding:18px;margin-top:14px}
.dash-movie h3{margin:0 0 4px;font-size:1rem}
.dash-movie .mprog{height:10px;background:#0f141b;border-radius:6px;overflow:hidden;margin:10px 0;border:1px solid #2a3340}
.dash-movie .mprog>div{height:100%;background:linear-gradient(90deg,#5b8cff,#3ecf8e);transition:width .6s}
.scene-pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:.72rem;padding:4px 9px;border-radius:20px;background:var(--card2);color:var(--mut);border:1px solid #232a35}
.pill.rendering{background:rgba(255,180,84,.18);color:var(--warn);border-color:var(--warn)}
.pill.done{background:rgba(62,207,142,.15);color:var(--ok)}
.pill.failed{background:rgba(255,107,107,.15);color:var(--bad)}
.del-btn{background:rgba(255,107,107,.12);color:var(--bad);border:1px solid rgba(255,107,107,.3);border-radius:7px;font-size:.74rem;padding:3px 9px;cursor:pointer}
.tile .b{gap:8px}

/* brand logo */
.brand-ico{width:27px;height:27px;vertical-align:-7px;margin-right:7px;border-radius:7px}
.login-card h1 .brand-ico{width:34px;height:34px;vertical-align:-9px;margin-right:5px}

/* ===== library v2 (gallery) ===== */
.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tile{background:var(--card);border:1px solid #232a35;border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.tile:hover{transform:translateY(-3px);border-color:#33405a;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.poster{position:relative;aspect-ratio:16/9;background:#0f141b;overflow:hidden}
.poster>video{width:100%;height:100%;object-fit:cover;display:block;background:#000;border-radius:0;margin:0}
.poster.ph{display:flex;align-items:center;justify-content:center;background:radial-gradient(130% 130% at 28% 8%,#2c3756,#141a24)}
.poster.ph.fail{background:radial-gradient(130% 130% at 28% 8%,#3c2433,#141a24)}
.ph-inner{text-align:center;color:var(--mut);width:100%;padding:6px 4px}
.ph-inner>img{width:36px;height:36px;border-radius:9px;opacity:.85}
.ph-txt{font-size:.82rem;margin-top:9px}
.ph-prog{height:6px;background:rgba(0,0,0,.35);border-radius:6px;margin:10px 16px 0;overflow:hidden}
.ph-prog>div{height:100%;background:linear-gradient(90deg,#5b8cff,#3ecf8e);transition:width .5s}
.kind-tag{position:absolute;top:8px;left:8px;font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(14,17,22,.72);color:#fff;padding:3px 8px;border-radius:20px;backdrop-filter:blur(4px)}
.dur-tag{position:absolute;bottom:8px;right:8px;font-size:.7rem;font-weight:600;background:rgba(14,17,22,.78);color:#fff;padding:2px 7px;border-radius:6px}
.tmeta{padding:11px 13px}
.tmeta .ttl{font-size:.9rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.tmeta .foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.tmeta .when{color:var(--mut);font-size:.72rem}
.acts{display:flex;gap:6px}
.icon-btn{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #2a3340;background:var(--card2);color:var(--mut);cursor:pointer;text-decoration:none;font-size:.9rem;line-height:1}
.icon-btn:hover{color:var(--txt);border-color:#3a4760}
.icon-btn.del:hover{color:var(--bad);border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.1)}
.lib-head{display:flex;align-items:baseline;gap:9px;margin:24px 0 12px}
.lib-head h2{font-size:1.02rem;margin:0}
.lib-head .cnt{color:var(--mut);font-size:.8rem}
.empty{color:var(--mut);padding:34px;text-align:center;border:1px dashed #2a3340;border-radius:12px;font-size:.9rem}

/* clickable play posters */
.poster.play{cursor:pointer}
.poster.play>video{pointer-events:none}
.play-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;background:rgba(8,11,16,.15)}
.play-ov b{width:54px;height:54px;border-radius:50%;background:rgba(14,17,22,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05rem;padding-left:3px}
.poster.play:hover .play-ov{opacity:1}

/* video modal */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,9,13,.8);backdrop-filter:blur(4px)}
.modal-box{position:relative;z-index:1;background:var(--card);border:1px solid #2a3340;border-radius:14px;padding:12px;max-width:min(900px,92vw);width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 10px}
.modal-head span{font-size:.9rem;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-x{background:var(--card2);border:1px solid #2a3340;color:var(--mut);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:.9rem;flex:none}
.modal-x:hover{color:var(--txt)}
.modal-box video{width:100%;max-height:78vh;border-radius:8px;background:#000;display:block}

/* enhance checkbox */
.check{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:.9rem;cursor:pointer}
.check input{width:16px;height:16px;flex:none}

/* system / mode */
.mode-badge{font-size:.78rem;padding:5px 10px;border-radius:8px;background:var(--card2);color:var(--mut);border:1px solid #2a3340}
.mode-badge.on{background:rgba(62,207,142,.15);color:var(--ok);border-color:rgba(62,207,142,.4)}
#view-system input[type=text]{margin:0}