/* The Studio wears the marketing site's black and one accent, nothing else. */
:root { --bg:#000; --panel:#0a0a0a; --panel2:#131313; --line:rgba(255,255,255,.09); --fg:#fff; --soft:rgba(255,255,255,.74); --mute:rgba(255,255,255,.46); --accent:#814ac8; --accent-hi:#9560d8; --glow:#df7afe; --bad:#f87171; --good:#4ade80; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 Figtree,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--fg); text-decoration:none; }
main { max-width:1100px; margin:0 auto; padding:16px; padding-bottom:64px; }
.top { display:flex; align-items:center; gap:18px; padding:10px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); z-index:5; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.03em; }
.brand img { width:26px; height:26px; border-radius:50%; }
.brand em { font-style:normal; font-weight:500; color:var(--mute); }
.top nav { display:flex; gap:4px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
@media (max-width:640px) { .top { gap:10px; padding:8px 12px; } .brand em { display:none; } .top nav a { padding:6px 8px; font-size:.92rem; } }
.top nav a { padding:6px 10px; border-radius:8px; color:var(--soft); }
.top nav a.on, .top nav a:hover { background:var(--panel2); color:var(--fg); }
.right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.lang { font-size:13px; color:var(--mute); border:1px solid var(--line); padding:4px 8px; border-radius:6px; }
h1 { font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing:-.03em; margin:8px 0 12px; line-height:1.1; }
h2 { font-size:1.05rem; letter-spacing:-.01em; color:var(--soft); margin:18px 0 8px; text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; }
.head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.head .btn { margin-left:auto; }
.soft { color:var(--soft); } .small { font-size:.9rem; } .bad { color:var(--bad); } .good { color:var(--good); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin:12px 0; }
.card.narrow { max-width:560px; margin:24px auto; } .center { text-align:center; }
.big-ring { width:96px; height:96px; border-radius:50%; margin:12px auto; display:block; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--fg); font:inherit; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); } .btn.primary:hover { background:var(--accent-hi); }
.btn.small { padding:6px 10px; font-size:.9rem; } .btn.ghost { background:transparent; } .btn.danger { color:var(--bad); }
.btn:disabled { opacity:.5; cursor:default; }
button.ghost { background:var(--panel2); border:1px solid var(--line); color:var(--fg); border-radius:50%; width:36px; height:36px; font-weight:700; cursor:pointer; }
.stack > label { display:block; margin:10px 0; color:var(--soft); font-size:.92rem; }
input[type=text], input:not([type]), textarea, input[type=datetime-local] { width:100%; margin-top:4px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--fg); font:inherit; }
textarea { resize:vertical; }
.row { display:flex; gap:10px; align-items:center; } .row.wrap { flex-wrap:wrap; }
.drop { display:flex; align-items:center; justify-content:center; min-height:140px; border:1.5px dashed var(--accent); border-radius:14px; color:var(--soft); cursor:pointer; padding:16px; text-align:center; }
.drop.over { background:rgba(129,74,200,.15); }
progress { flex:1; accent-color:var(--accent); }
.list { list-style:none; padding:0; margin:0; }
.list li a { display:flex; gap:14px; padding:12px; border-bottom:1px solid var(--line); align-items:center; }
.list .thumb { width:96px; height:54px; border-radius:8px; overflow:hidden; background:var(--panel2); flex:none; display:flex; align-items:center; justify-content:center; }
.list .thumb img { width:100%; height:100%; object-fit:cover; } .kind { font-size:.75rem; color:var(--mute); padding:4px; text-align:center; }
.list .meta { display:flex; flex-direction:column; gap:2px; min-width:0; } .list strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status { font-size:.75rem; padding:2px 8px; border-radius:999px; background:var(--panel2); color:var(--soft); width:max-content; }
.s-ready { color:var(--good); } .s-scheduled { color:var(--glow); } .s-publishing, .s-analysing { color:var(--accent-hi); } .s-published { color:var(--good); } .s-failed { color:var(--bad); }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:820px) { .cols { grid-template-columns:1fr; } }
.media video, .media img { width:100%; max-height:70vh; border-radius:10px; background:#000; object-fit:contain; }
.frames { display:flex; gap:4px; overflow-x:auto; margin-top:8px; } .frames img { height:56px; border-radius:6px; }
.proposals { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.proposals li { border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; gap:4px; }
.proposals li.chosen { border-color:var(--accent); background:rgba(129,74,200,.10); }
.proposals em { color:var(--glow); font-style:normal; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.proposals p { margin:0; }
.count { float:right; font-size:.8rem; color:var(--mute); } .count.bad { color:var(--bad); }
.thumbs { display:flex; gap:10px; flex-wrap:wrap; } .pick input { display:none; } .pick img { width:200px; border-radius:10px; border:2px solid transparent; }
.pick input:checked + img { border-color:var(--glow); }
.check { display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; }
.actions { margin-top:12px; } .sched { display:flex; gap:6px; align-items:center; } .sched input { margin:0; width:auto; }
.results { list-style:none; padding:0; } .results li { padding:6px 0; border-bottom:1px solid var(--line); } .results a { color:var(--glow); }
.log pre { font-size:.75rem; color:var(--mute); white-space:pre-wrap; }
.quote { font-size:1.1rem; white-space:pre-wrap; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; } .kv dt { color:var(--mute); } .kv dd { margin:0; }
details summary { cursor:pointer; color:var(--soft); }