:root{
  --bg:#0b0c10;--bg2:#101218;--panel:#151821;--panel2:#1b1f2a;--line:#232836;--line2:#2e3446;
  --text:#eef0f5;--muted:#8a91a3;--accent:#f2b544;--accent2:#ffd27a;--accent-ink:#1a1206;
  --ok:#3ddc97;--warn:#f2b544;--err:#ff6b6b;--info:#6ea8ff;
  --r:14px;--r-sm:10px;--shadow:0 20px 60px rgba(0,0,0,.45);
  --font:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;--display:"Sora","Inter",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;cursor:pointer}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0 0 6px}
h1{font-size:28px;font-weight:600}h2{font-size:20px}h3{font-size:15px;font-weight:600;margin-bottom:12px}h4{margin:22px 0 10px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
p{margin:0}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12.5px}.center{text-align:center}.accent{color:var(--accent)}
.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}
.error{color:var(--err);font-size:13px;margin:6px 0}
.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0}

/* brand */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16px}
.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#ff8a3d);position:relative;flex:0 0 auto}
.brand-mark:after{content:"";position:absolute;left:11px;top:8px;border-left:9px solid var(--accent-ink);border-top:6px solid transparent;border-bottom:6px solid transparent}

/* inputs */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.field-label{font-weight:500;color:var(--text)}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);padding:11px 13px;font:inherit;outline:0;transition:border .15s,box-shadow .15s}
textarea{resize:vertical;min-height:120px;line-height:1.55}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,181,68,.15)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=range]{width:100%;accent-color:var(--accent);margin:8px 0 4px}

.btn{background:var(--panel2);border:1px solid var(--line2);color:var(--text);padding:10px 16px;border-radius:var(--r-sm);font:inherit;font-weight:500;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#ffb020);color:var(--accent-ink);border:0;font-weight:600;box-shadow:0 8px 24px rgba(242,181,68,.25)}
.btn.primary:hover{box-shadow:0 12px 30px rgba(242,181,68,.35)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover{color:var(--text);border-color:var(--line2)}
.btn.small{padding:6px 12px;font-size:13px}.btn.wide{width:100%}.btn.big{padding:14px;font-size:16px;margin-top:22px}
.btn.danger{color:var(--err)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.icon-btn{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:6px}

.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;gap:4px}
.seg button{flex:1;background:transparent;border:0;color:var(--muted);padding:9px 6px;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s}
.seg button small{font-weight:400;font-size:11px;color:var(--muted)}
.seg button.on{background:var(--panel2);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.seg button.on small{color:var(--accent)}
.ar{display:block;border:1.5px solid currentColor;border-radius:2px;opacity:.8}
.ar-169{width:22px;height:12px}.ar-916{width:12px;height:22px}.ar-11{width:16px;height:16px}.ar-45{width:14px;height:17px}
.seg.compact button{padding:6px 12px;flex-direction:row}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--text);margin:8px 0;font-size:14px}
.switch input{display:none}.switch span{width:38px;height:22px;border-radius:99px;background:var(--line2);position:relative;transition:.2s;flex:0 0 auto}
.switch span:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{left:19px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:5px 11px;border-radius:99px;font:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--text)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:16px}
.card.narrow{max-width:520px}
.card > label:first-child, .card > .field-label:first-child{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:12.5px;color:var(--muted)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.pill.online .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.pill.offline .dot{background:var(--err)}
.pill.busy .dot{background:var(--warn);box-shadow:0 0 10px var(--warn)}

/* auth */
.auth{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
.auth-bg span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:float 14s ease-in-out infinite alternate}
.auth-bg span:first-child{width:520px;height:520px;background:#f2b544;left:-160px;top:-120px}
.auth-bg span:last-child{width:460px;height:460px;background:#4a5cff;right:-140px;bottom:-140px;animation-delay:-6s}
@keyframes float{to{transform:translate(40px,30px) scale(1.08)}}
.auth-card{position:relative;width:min(420px,92vw);background:rgba(21,24,33,.85);backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.auth-card h1{margin-top:22px}
.auth-card form{margin-top:10px}.auth-card .btn{margin-top:18px}

/* layout */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side nav{margin-top:28px;display:flex;flex-direction:column;gap:4px}
.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:500;transition:.15s}
.nav:hover{color:var(--text);background:var(--panel)}.nav.active{color:var(--text);background:var(--panel2)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.me-name{font-weight:600;font-size:14px}
.main{padding:36px 44px;max-width:1280px}
.page-head{margin-bottom:24px}.page-head p{max-width:720px}

.create-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.create-side .card{position:sticky;top:24px}
.drop{border:1.5px dashed var(--line2);border-radius:var(--r-sm);padding:26px;text-align:center;transition:.15s;cursor:pointer;background:var(--bg2)}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(242,181,68,.05)}
.drop-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.assets{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.asset{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px 10px 6px 6px;font-size:13px;max-width:280px}
.asset .thumb{width:40px;height:40px;border-radius:7px;object-fit:cover;background:var(--panel2);display:grid;place-items:center;font-size:11px;color:var(--muted);flex:0 0 auto;text-transform:uppercase;font-weight:600}
.asset .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset .x{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px}
.asset .x:hover{color:var(--err)}
.asset.uploading{opacity:.6}

/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.15s}
.vcard:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow)}
.vcard .cover{aspect-ratio:16/9;background:linear-gradient(135deg,#1c2030,#12151d);position:relative;display:grid;place-items:center;overflow:hidden}
.vcard .cover video,.vcard .cover img{width:100%;height:100%;object-fit:cover}
.vcard .cover .spin{width:34px;height:34px;border:3px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vcard .body{padding:12px 14px}
.vcard .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .s{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:4px;background:var(--line);border-radius:99px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ff8a3d);border-radius:99px;transition:width .6s}
.badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.badge.done{color:var(--ok)}.badge.error{color:var(--err)}.badge.queued{color:var(--muted)}.badge.rendering,.badge.planning,.badge.assembling{color:var(--warn)}.badge.cancelled{color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:60px 20px;border:1px dashed var(--line);border-radius:var(--r)}

/* drawer */
.drawer{position:fixed;inset:0;z-index:50}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(640px,100vw);background:var(--panel);border-left:1px solid var(--line);padding:26px 28px;overflow:auto;animation:slide .25s ease}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.status-block{margin:16px 0 8px;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm)}
.status-block .stage{font-weight:600}
.final video{width:100%;border-radius:var(--r-sm);background:#000;margin-top:12px}
.drawer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shot{background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12px}
.shot video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block}
.shot .ph{aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);background:var(--panel2)}
.shot .sb{padding:7px 9px}.shot .sb b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log{font-size:12.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;max-height:260px;overflow:auto}
.log div{margin:2px 0}.log time{color:var(--line2);margin-right:8px}

/* tables & misc */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:1px solid var(--line)}
.table td{padding:9px 6px;border-bottom:1px solid var(--line)}
.inline-form{display:grid;grid-template-columns:1fr 1fr 1fr 100px 100px auto;gap:8px;margin:10px 0 16px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.kv div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kv b{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;font-weight:500}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:11px 18px;border-radius:12px;box-shadow:var(--shadow);z-index:99;font-size:14px}
.toast.err{border-color:var(--err)}

/* icons (inline svg masks) */
.ic{width:18px;height:18px;display:inline-block;background:currentColor;flex:0 0 auto;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic.big{width:30px;height:30px;color:var(--accent)}
.ic-plus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ic-film{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4'/%3E%3C/svg%3E")}
.ic-grid{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
.ic-cog{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E")}
.ic-shield{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E")}
.ic-upload{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E")}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 16px}
  .side nav{margin:0;flex-direction:row;flex-wrap:wrap}
  .side-foot{margin:0 0 0 auto;flex-direction:row;align-items:center}
  .main{padding:22px 16px}
  .create-grid{grid-template-columns:1fr}.create-side .card{position:static}
  .inline-form{grid-template-columns:1fr 1fr}
}