:root { color-scheme: dark; --bg:#0b0b0c; --panel:#141416; --panel2:#1b1b1e; --line:#29292e; --text:#eeeae2; --muted:#969399; --red:#d9473f; --amber:#e7a95a; --sidebar:300px; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:radial-gradient(circle at 70% 0,#1b1413 0,transparent 30rem),var(--bg); color:var(--text); font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input { font:inherit; }
button,.button { border:1px solid var(--line); border-radius:9px; padding:.7rem 1rem; background:#202024; color:var(--text); cursor:pointer; text-decoration:none; transition:.16s ease; }
button:hover { border-color:#5a5552; transform:translateY(-1px); } button:disabled { opacity:.55; cursor:wait; transform:none; }
button.primary,.button.primary { background:var(--red); border-color:var(--red); color:white; font-weight:700; }
button.secondary { background:#ded8cd; color:#151414; border-color:#ded8cd; font-weight:700; }
input { min-width:0; background:#111113; border:1px solid var(--line); border-radius:9px; padding:.75rem .9rem; color:var(--text); outline:none; }
input:focus { border-color:var(--amber); box-shadow:0 0 0 3px #e7a95a22; }
.muted { color:var(--muted); }.eyebrow { color:var(--amber); font-size:.69rem; font-weight:800; letter-spacing:.18em; margin:0 0 .25rem; }
.sidebar { position:fixed; z-index:20; inset:0 auto 0 0; width:var(--sidebar); background:#0e0e10f5; border-right:1px solid var(--line); backdrop-filter:blur(16px); overflow:auto; }
.brand { height:95px; padding:1.2rem 1.25rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; background:#0e0e10f5; z-index:1; }
.brand h1 { margin:0; font:700 1.65rem/1 Georgia,serif; }.icon-button { border:0; padding:.5rem; color:var(--muted); background:transparent; }
.scene-nav { padding:.65rem; }.scene-link { color:var(--text); text-decoration:none; display:grid; grid-template-columns:34px 1fr auto; gap:.65rem; align-items:center; min-height:62px; padding:.65rem; border-radius:9px; border:1px solid transparent; }
.scene-link:hover { background:#18181b; }.scene-link.active { background:#221918; border-color:#4d2926; }
.scene-number { color:#69666a; font:700 .77rem monospace; }.scene-link-main { min-width:0; display:flex; flex-direction:column; }.scene-link-main strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.9rem; }.scene-link-main small { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scene-signals { display:flex; gap:.25rem; align-items:center; color:var(--amber); font-size:.7rem; }.scene-signals i { font-style:normal; }.pulse { width:7px; height:7px; background:var(--red); border-radius:50%; animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.3; box-shadow:0 0 0 5px #d9473f11; } }
.content { margin-left:var(--sidebar); max-width:1500px; padding:2.6rem 3.5rem 10rem; }
.scene-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }.scene-header h2 { margin:0; font:700 clamp(2rem,5vw,4.4rem)/1 Georgia,serif; letter-spacing:-.04em; }.metadata { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:end; }.metadata span { color:var(--muted); border:1px solid var(--line); padding:.35rem .6rem; border-radius:99px; font-size:.75rem; }
.frame-hero { background:#111; border:1px solid var(--line); border-radius:15px; position:relative; overflow:hidden; aspect-ratio:16/9; }.frame-hero img { width:100%; height:100%; object-fit:cover; display:block; }.frame-placeholder { height:100%; display:grid; place-content:center; text-align:center; color:#5f5c60; background:linear-gradient(135deg,#151518,#0e0e10); }.frame-placeholder span { font:700 clamp(3rem,10vw,8rem)/1 Georgia,serif; opacity:.14; }.frame-placeholder p { margin:0; }.frame-badge { position:absolute; top:1rem; right:1rem; padding:.35rem .65rem; background:#111c; border:1px solid #ffffff26; border-radius:99px; text-transform:uppercase; font-size:.67rem; letter-spacing:.1em; }.frame-badge.approved { color:#92d8a4; }.frame-badge.rejected { color:#ff948e; }
.two-column { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.5fr); gap:1rem; margin-top:1rem; }.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.35rem; }.panel h3,.section-title h3 { margin:0 0 .8rem; font:700 1.2rem Georgia,serif; }.source-panel { background:#111113; }.prose { white-space:pre-wrap; font-size:1rem; }.prose.compact { color:#b7b3ae; }
.story-logic { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:1rem 0; }.story-logic article { padding:1.2rem; background:var(--panel); }.story-logic small { color:var(--red); font-weight:800; letter-spacing:.12em; }.story-logic p { margin:.55rem 0 0; }
.next-question { border-left:2px solid var(--amber); padding:.7rem 1rem; color:#d5d0c8; }.next-question span { color:var(--amber); text-transform:uppercase; font-size:.68rem; letter-spacing:.12em; font-weight:800; display:block; }
.section-block { margin-top:2.7rem; }.section-title { display:flex; align-items:end; justify-content:space-between; }.section-title h3 { color:var(--muted); font-family:inherit; font-size:.8rem; }.shot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.8rem; }.shot-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem; }.shot-card header { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:.5rem; border-bottom:1px solid var(--line); padding-bottom:.65rem; }.shot-card header span { color:var(--red); font:700 .8rem monospace; }.shot-card header time { color:var(--muted); font-size:.75rem; }.shot-card .camera { color:var(--amber); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }.shot-card blockquote { margin:.8rem 0; padding-left:.8rem; border-left:2px solid var(--red); color:#ddd5cc; }.sfx { color:var(--muted); font-size:.83rem; }.sfx b { color:#77a8b5; margin-right:.35rem; }.shot-card details { border-top:1px solid var(--line); padding-top:.6rem; color:var(--muted); font-size:.82rem; }.shot-card summary,.history-section summary { cursor:pointer; }
.continuity { margin-top:1rem; }.continuity p { color:#bcb8b2; margin-bottom:0; }.history-section { border-top:1px solid var(--line); padding:1rem 0; }.history-section>summary { font:700 1rem Georgia,serif; }.history-section>summary span { color:var(--muted); margin-left:.4rem; }.history-list { display:grid; gap:.5rem; padding-top:.8rem; }.history-list article { border-left:2px solid var(--line); padding-left:.8rem; }.history-list time { color:var(--muted); font-size:.72rem; }.history-list p { margin:.2rem 0; }.frame-history { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.8rem; padding-top:1rem; }.mini-frame { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:.6rem; display:grid; grid-template-columns:120px 1fr; gap:.7rem; }.mini-frame img,.mini-placeholder { width:120px; aspect-ratio:16/9; object-fit:cover; background:#222; display:grid; place-items:center; color:var(--muted); }.mini-frame p { color:var(--muted); margin:.15rem 0 .5rem; }.mini-frame button { padding:.35rem .5rem; font-size:.75rem; }
.action-bar { position:fixed; z-index:15; left:var(--sidebar); right:0; bottom:0; min-height:78px; padding:.8rem 1.25rem; background:#101012ee; border-top:1px solid var(--line); backdrop-filter:blur(14px); display:flex; gap:.7rem; align-items:center; }.reaction-group { display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; }.reaction-group button { border:0; border-radius:0; background:transparent; padding:.65rem .8rem; }.reaction-group button.selected { color:var(--red); background:#d9473f18; }.reaction-group span { color:var(--muted); min-width:1.5rem; text-align:center; }.comment-composer { flex:1; display:flex; gap:.5rem; }.comment-composer input { flex:1; }.drawer-toggle { display:none; position:fixed; z-index:25; top:.7rem; left:.7rem; }.toast { position:fixed; z-index:40; right:1.2rem; bottom:6.5rem; background:#e9e3da; color:#171719; padding:.8rem 1rem; border-radius:9px; box-shadow:0 15px 50px #0008; transform:translateY(15px); opacity:0; pointer-events:none; transition:.2s; }.toast.visible { opacity:1; transform:none; }.toast.error { background:#b9332d; color:white; }.loading::after { content:""; display:inline-block; width:.75em; height:.75em; margin-left:.5em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}
.login-body { min-height:100vh; display:grid; place-items:center; padding:1rem; }.login-card { width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:2rem; box-shadow:0 30px 100px #0008; }.login-card h1 { font:700 3.5rem/1 Georgia,serif; margin:.2rem 0; }.login-form { display:grid; gap:.7rem; margin-top:1.5rem; }.access-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem; }.access-code-row input { width:100%; box-sizing:border-box; }.paste-button { white-space:nowrap; background:#29282b; }.login-status { min-height:1.4em; margin:0; color:var(--amber); font-size:.82rem; }.error-box { background:#762822; border:1px solid #a63b33; padding:.7rem; border-radius:8px; margin-top:1rem; }
@media(max-width:980px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.drawer-toggle{display:block}.content{margin-left:0;padding:4rem 1.2rem 11rem}.action-bar{left:0;flex-wrap:wrap}.comment-composer{order:3;flex-basis:100%}.story-logic{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.scene-header{display:block}.metadata{justify-content:start;margin-top:1rem}.two-column{grid-template-columns:1fr}.story-logic{grid-template-columns:1fr}.content{padding-left:.75rem;padding-right:.75rem}.action-bar>button{font-size:.78rem;padding:.65rem}.comment-composer button{font-size:.75rem}.shot-grid{grid-template-columns:1fr}}