:root {
  --navy:#013D7A; --ink:#10263B; --slate:#587089; --mist:#E9F0F6; --line:#DCE6F0;
  --gold:#EAB234; --goldd:#B07E17; --green:#3F7F38; --greenbg:#EDF5EC; --red:#B5432E;
  --bg:#F4F8FC; --card:#fff;
  --disp:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--body); }
a { color:var(--navy); }
h1,h2,h3 { font-family:var(--disp); color:var(--navy); letter-spacing:-0.01em; text-wrap:balance; margin:0; }
button, .btn { font:600 14px/1 var(--body); border:1px solid var(--navy); background:var(--navy); color:#fff; padding:10px 16px; border-radius:9px; cursor:pointer; text-decoration:none; display:inline-block; }
button.ghost, .btn.ghost { background:#fff; color:var(--navy); }
button.gold, .btn.gold { background:var(--gold); border-color:var(--gold); color:var(--navy); }
button.small, .btn.small { padding:7px 12px; font-size:13px; }
button:disabled { opacity:.5; cursor:default; }
textarea, input[type=text], input[type=password] { width:100%; font:15px/1.5 var(--body); padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
textarea { min-height:96px; resize:vertical; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.muted { color:var(--slate); }
.small { font-size:13px; }
.pill { display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--mist); color:var(--navy); }
.pill.gold { background:#FBF1D8; color:var(--goldd); }
.pill.green { background:var(--greenbg); color:var(--green); }
.pill.red { background:#FBE4DF; color:var(--red); }

/* top bar */
.top { display:flex; align-items:center; gap:22px; padding:14px 28px; background:var(--navy); color:#fff; }
.top .wordmark { font-family:var(--disp); font-weight:800; letter-spacing:.02em; color:#fff; text-decoration:none; font-size:17px; }
.top .wordmark span { color:var(--gold); }
.top .divider { width:1px; height:22px; background:rgba(202,233,252,.38); margin:0 2px 0 -4px; }
.top nav a { color:#CAE9FC; text-decoration:none; margin-right:18px; font-weight:500; }
.top nav a.on { color:#fff; border-bottom:2px solid var(--gold); padding-bottom:2px; }
.top .who { margin-left:auto; display:flex; align-items:center; gap:12px; color:#CAE9FC; }
.top .who form { margin:0; }
.top .who button { background:transparent; border-color:rgba(202,233,252,.4); color:#CAE9FC; padding:6px 12px; font-size:13px; }
.wrap { max-width:1280px; margin:0 auto; padding:28px; }
.wrap.wide { max-width:1720px; }

/* login */
.login { max-width:420px; margin:80px auto; background:#fff; border:1px solid var(--line); border-radius:18px; padding:36px; box-shadow:0 20px 50px rgba(1,61,122,.08); }
.login h1 { font-size:26px; margin-bottom:6px; }
.login p { margin:0 0 20px; }
.login .err { color:var(--red); font-weight:600; margin-bottom:12px; }

/* deck cards */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:22px; margin-top:18px; }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(1,61,122,.06); display:flex; flex-direction:column; }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--mist); border-bottom:1px solid var(--line); }
.card .body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card h2 { font-size:19px; }
.card .meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.card .actions { margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* review layout */
.review { display:grid; grid-template-columns:230px minmax(0,1fr) 420px; gap:20px; align-items:start; }
.strip { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.strip a { display:block; text-decoration:none; color:var(--ink); border:2px solid transparent; border-radius:10px; padding:5px; background:#fff; box-shadow:0 4px 14px rgba(1,61,122,.06); }
.strip a.on { border-color:var(--gold); }
.strip a img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:6px; background:var(--mist); }
.strip .cap { display:flex; align-items:center; gap:6px; font-size:12px; margin-top:5px; color:var(--slate); }
.strip .cap b { color:var(--navy); font-variant-numeric:tabular-nums; }
.strip .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.strip .dot.open { background:var(--gold); }
.strip .dot.changed { background:var(--green); }
.stage { background:#03294F; border-radius:16px; overflow:hidden; box-shadow:0 20px 50px rgba(1,61,122,.18); position:relative; }
.stage img, .stage iframe { width:100%; aspect-ratio:16/9; display:block; border:0; background:#03294F; }
.stage [hidden] { display:none !important; }
.stagebar { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; }
.stagebar .title { font-weight:600; color:var(--navy); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stagewrap { position:sticky; top:16px; }
.panel { display:flex; flex-direction:column; gap:16px; }
.pane { display:none; }
.pane.on { display:flex; flex-direction:column; gap:16px; }
.box { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.box h3 { font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); margin-bottom:10px; font-family:var(--body); font-weight:700; }
.box.sandra { border-color:#EBD9A4; background:#FFFDF6; }
.box.sandra h3 { color:var(--goldd); }
.box .actions { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.notes ul { padding-left:18px; margin:6px 0; }
.notes li { margin:2px 0; }
.notes p { margin:0 0 8px; }
details summary { cursor:pointer; color:var(--navy); font-weight:600; }
.thread { border-top:1px solid var(--line); padding:12px 0; }
.thread:first-of-type { border-top:0; padding-top:0; }
.thread .c { margin:0 0 8px; }
.thread .c b { color:var(--navy); }
.thread .c time { color:var(--slate); font-size:12px; margin-left:6px; }
.thread .c p { margin:4px 0 0; white-space:pre-wrap; }
.thread.resolved { opacity:.72; }
.thread .res { font-size:13px; color:var(--green); font-weight:600; }
.thread form.inline { display:flex; gap:8px; align-items:flex-start; margin-top:6px; }
.thread form.inline textarea { min-height:44px; }
.changed-note { background:var(--greenbg); color:var(--green); border-radius:8px; padding:8px 12px; font-size:13px; font-weight:600; }
.help { font-size:13px; color:var(--slate); margin:4px 0 0; }

/* log */
table.log { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
table.log th { text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); padding:10px 14px; background:var(--mist); }
table.log td { padding:10px 14px; border-top:1px solid var(--line); vertical-align:top; }
table.log td.t { white-space:nowrap; color:var(--slate); font-variant-numeric:tabular-nums; }

/* brief */
pre.brief { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; white-space:pre-wrap; max-height:60vh; overflow:auto; font:13px/1.5 ui-monospace,Menlo,Consolas,monospace; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.stepper { counter-reset:s; display:grid; gap:12px; }
.stepper div { position:relative; padding-left:38px; }
.stepper div::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--gold); color:var(--navy); font:800 13px/26px var(--disp); text-align:center; }

.flash { background:var(--greenbg); color:var(--green); border-radius:10px; padding:10px 14px; font-weight:600; margin-bottom:16px; }
.flash.err { background:#FBE4DF; color:var(--red); white-space:pre-wrap; font-weight:500; }

@media (max-width: 1100px) {
  .review { grid-template-columns:1fr; }
  .strip { position:static; max-height:none; flex-direction:row; overflow-x:auto; }
  .strip a { flex:0 0 180px; }
  .stagewrap { position:static; }
  .two { grid-template-columns:1fr; }
}