styles.css

:root { color-scheme: dark; --bg:#081018; --panel:#0e1924; --panel-2:#132230; --line:#24384a; --text:#edf6f7; --muted:#8fa6b5; --accent:#38d6c7; --accent-dark:#082a2a; --warm:#f4b860; --danger:#ff7d7d; --radius:14px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); min-width:320px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 24px; border-bottom:1px solid var(--line); background:rgba(8,16,24,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(16px); }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#06181a; background:var(--accent); }
.brand strong { font-size:1rem; display:block; }.brand small { color:var(--muted); display:block; margin-top:2px; }
.top-actions { display:flex; gap:10px; align-items:center; }.save-status { color:var(--muted); font-size:.875rem; margin-right:8px; }
.app-shell { display:grid; grid-template-columns:310px minmax(0,1fr); height:calc(100vh - 72px); }
.sidebar { border-right:1px solid var(--line); background:#0a141e; overflow:hidden; display:flex; flex-direction:column; }
.dataset-summary { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:18px 18px 10px; color:var(--muted); font-size:.875rem; }
.dataset-summary small { grid-column:1/-1; color:#718999; line-height:1.45; }
.search { margin:0 14px 12px; display:flex; gap:9px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.search input { background:none; border:0; outline:0; color:var(--text); width:100%; }
#questionNav { overflow:auto; padding:0 10px 20px; }
.video-group { margin:4px 0; border-radius:10px; overflow:hidden; }
.video-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 10px; border:0; background:transparent; color:var(--text); text-align:left; border-radius:9px; }
.video-toggle:hover { background:var(--panel); }.video-toggle small { color:var(--muted); }.video-toggle .status-dot { width:8px;height:8px;border-radius:50%;background:#415669; flex:0 0 auto; }.video-toggle.complete .status-dot { background:var(--accent); }
.question-links { display:none; padding:2px 0 8px 18px; }.video-group.open .question-links { display:block; }
.question-link { width:100%; border:0; border-left:1px solid var(--line); background:transparent; color:var(--muted); padding:8px 10px 8px 14px; text-align:left; display:flex; justify-content:space-between; }
.question-link:hover,.question-link.active { color:var(--text); border-left-color:var(--accent); background:linear-gradient(90deg,rgba(56,214,199,.12),transparent); }.question-link.done::after { content:"✓"; color:var(--accent); }
.workspace { overflow:auto; padding:26px 28px 80px; }
.question-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; max-width:1500px; margin:auto auto 20px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:.8rem; margin-bottom:7px; }
h1 { font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.45; max-width:1050px; margin:0; font-weight:650; }.question-controls { display:flex; gap:8px; }
.question-original { max-width:1050px; margin:10px 0 0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.rules-panel { max-width:1500px; margin:0 auto 20px; border:1px solid #375266; border-radius:var(--radius); background:#0b1722; overflow:hidden; }
.rules-panel summary { cursor:pointer; padding:14px 18px; color:var(--warm); font-weight:800; background:#111f2c; }
.rule-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:14px; }
.rule-card { border:1px solid var(--line); border-radius:11px; padding:14px 15px; background:var(--panel); }
.rule-card h2 { margin:0 0 9px; font-size:.95rem; }.rule-card ul,.field-guidance ul { margin:0; padding-left:19px; }.rule-card li,.field-guidance li { margin:5px 0; line-height:1.5; }
.rule-card { color:#c8d8df; font-size:.8rem; }.rule-card.allowed h2 { color:var(--accent); }.rule-card.forbidden h2 { color:#ff9a9a; }.rule-card.language h2 { color:var(--warm); }
.split-view { max-width:1500px; margin:auto; display:grid; grid-template-columns:minmax(360px,.86fr) minmax(520px,1.14fr); gap:22px; align-items:start; }
.media-panel { position:sticky; top:0; }.video-frame { background:#020508; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.25); }.video-frame video { width:100%; aspect-ratio:16/9; display:block; background:#000; }
.media-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }.media-tools > span { font-variant-numeric:tabular-nums; color:var(--warm); font-weight:700; margin-right:auto; }
.requirements { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.chip { border:1px solid var(--line); color:var(--muted); padding:6px 9px; border-radius:999px; font-size:.8rem; }.chip.required { color:var(--warm); border-color:#6c5530; background:#211a0e; }
.answer-panel { display:flex; flex-direction:column; gap:14px; }.form-section { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:0 14px 40px rgba(0,0,0,.12); }
.field-guidance { margin:0 0 16px; padding:12px 14px; border-left:3px solid var(--accent); border-radius:7px; background:#0a151f; color:#a9beca; font-size:.8rem; }.field-guidance strong { color:#dcebed; display:block; margin-bottom:6px; }.field-guidance code { color:var(--warm); }
.inline-note { color:var(--muted); font-size:.8rem; line-height:1.5; margin:0 0 12px; }
.timer-display { font-size:2rem; color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.04em; margin-bottom:10px; }.timer-controls { display:flex; gap:8px; margin-bottom:13px; }
.section-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }.section-title > span { display:grid; place-items:center; width:34px;height:34px;border-radius:9px;background:var(--accent-dark);color:var(--accent);font-size:.78rem;font-weight:800; }.section-title h2 { margin:0;font-size:1.05rem; }.section-title p { margin:4px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45; }.section-title.mini { margin-bottom:12px; }
label { display:flex; flex-direction:column; gap:7px; color:#cfe0e4; font-size:.9rem; }.form-section > label + label,.evidence-card label + label { margin-top:13px; } em { font-style:normal;color:var(--warm);font-size:.75rem;margin-left:4px; }
input,textarea,select { width:100%; border:1px solid #30485b; color:var(--text); background:#09131c; border-radius:9px; padding:11px 12px; outline:none; line-height:1.5; } textarea { resize:vertical; min-height:72px; } input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,214,199,.12); } input.invalid,textarea.invalid,select.invalid { border-color:var(--danger); }
.subhead { display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }.subhead h3 { margin:0;font-size:.92rem; }
.evidence-card { padding:15px; border-radius:11px; border:1px solid var(--line); background:var(--panel-2); margin-top:10px; }.card-heading { display:flex; justify-content:space-between; margin-bottom:13px; }.remove-button { border:0;background:none;color:var(--muted);font-size:.8rem; }.remove-button:hover { color:var(--danger); }.time-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px; }
.compact-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px; }.compact-grid > div + div { border-left:1px solid var(--line); padding-left:24px; } fieldset { border:0;padding:0;margin:0; } legend { color:#cfe0e4;font-size:.9rem;margin-bottom:10px; }.radio { flex-direction:row;display:inline-flex;align-items:center;margin-right:18px; }.radio input { width:auto;accent-color:var(--accent); }
.primary,.secondary,.icon-button { border-radius:9px; min-height:40px; padding:0 14px; font-weight:700; border:1px solid transparent; }.primary { background:var(--accent);color:#05201f; }.primary:hover { filter:brightness(1.08); }.secondary { background:transparent;border-color:var(--line);color:var(--text); }.secondary:hover { border-color:#4b687d;background:var(--panel-2); }.small { min-height:34px;padding:0 10px;font-size:.8rem; }.large { min-height:46px;padding:0 22px; }.icon-button { width:42px;padding:0;background:var(--panel);color:var(--text);border-color:var(--line); }
.bottom-actions { display:flex;justify-content:flex-end;gap:10px;padding-top:3px; }.validation-summary { background:#2b1518;color:#ffc9c9;border:1px solid #6c3038;border-radius:10px;padding:12px 14px;font-size:.9rem; }.toast { position:fixed;right:24px;bottom:24px;background:#e8fffb;color:#07312d;padding:12px 16px;border-radius:10px;font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:50; }.toast.show { opacity:1;transform:translateY(0); }
@media(max-width:1050px){.app-shell{grid-template-columns:250px minmax(0,1fr)}.split-view{grid-template-columns:1fr}.media-panel{position:static}.compact-grid,.rule-grid{grid-template-columns:1fr}.compact-grid>div+div{border:0;border-top:1px solid var(--line);padding:20px 0 0}}
@media(max-width:760px){.topbar{height:auto;padding:12px 14px;align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.save-status{width:100%;text-align:right}.app-shell{display:block;height:auto}.sidebar{border:0;border-bottom:1px solid var(--line);max-height:280px}.workspace{padding:18px 14px 60px}.question-header{gap:10px}.split-view{display:block}.answer-panel{margin-top:16px}.form-section{padding:16px}.time-grid{grid-template-columns:1fr}.bottom-actions{position:sticky;bottom:0;background:rgba(8,16,24,.94);padding:10px 0}.brand small{display:none}}