:root { --navy:#1c2a5c; --muted:#6b7392; --gold:#f2b82c; --gold-dark:#d28d12; --ivory:#fefbf2; --line:#f5d07a; --bg:#f6f1e3; --red:#b3261e; --green:#2b7a46; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--navy); background:var(--bg); }
header { display:flex; align-items:center; gap:24px; padding:12px 24px; background:var(--navy); color:#fff; position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.brand { font-weight:800; font-size:20px; } .brand span { color:var(--gold); }
nav { display:flex; gap:6px; }
nav button { background:transparent; color:#d8dcf0; border:0; padding:8px 14px; border-radius:20px; font-weight:600; cursor:pointer; }
nav button.on { background:var(--gold); color:var(--navy); }
.who { margin-left:auto; font-size:13px; color:#c8cde6; }
main { max-width:1200px; margin:0 auto; padding:20px 24px 60px; }
h2 { font-size:18px; margin:0; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px; flex-wrap:wrap; }
.muted { color:var(--muted); font-size:13px; }
.pill { background:var(--gold); border-radius:12px; padding:1px 9px; font-size:13px; }
button { font:inherit; font-weight:600; border-radius:20px; padding:8px 16px; border:2px solid var(--gold-dark); background:var(--ivory); color:var(--navy); cursor:pointer; }
button.gold { background:var(--gold); }
button.ghost { border-color:var(--line); }
button:disabled { opacity:.5; cursor:default; }
.split { display:grid; grid-template-columns: 360px 1fr; gap:18px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.list .t { background:var(--ivory); border:2px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.list .t.sel { border-color:var(--gold-dark); }
.t .top { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.t .msg { margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail, .card { background:var(--ivory); border:2px solid var(--line); border-radius:16px; padding:16px; }
.detail .meta { display:grid; grid-template-columns: 120px 1fr; gap:4px 12px; font-size:13px; margin:10px 0; }
.bubble { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; white-space:pre-wrap; }
.bubble.staff { background:#eef5ff; border-color:#c9dcf7; }
textarea { width:100%; min-height:120px; font:inherit; padding:10px; border-radius:12px; border:2px solid var(--line); }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
table.grid { width:100%; border-collapse:collapse; background:var(--ivory); border-radius:12px; overflow:hidden; font-size:14px; }
table.grid th, table.grid td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.grid th { background:#fbeec4; font-size:13px; }
.status { font-size:12px; font-weight:700; border-radius:10px; padding:2px 8px; }
.status.live { background:#d8f0df; color:var(--green); } .status.next { background:#fff1c7; color:#8a5a00; } .status.done { background:#eee; color:#666; }
.card.ev { margin-bottom:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
label { display:flex; flex-direction:column; font-size:12px; font-weight:600; color:var(--muted); gap:4px; margin-bottom:10px; flex:1; min-width:150px; }
label.wide { width:100%; }
input, select { font:inherit; color:var(--navy); padding:8px 10px; border-radius:10px; border:2px solid var(--line); background:#fff; }
.remove { flex:0; align-self:center; }
.note { background:#fff6d8; border:2px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
#checks .err { color:var(--red); } #checks .warn { color:#8a5a00; } #checks .ok { color:var(--green); }
#checks div { margin:2px 0; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 18px; border-radius:20px; }

.btns { display:flex; gap:8px; flex-wrap:wrap; }
.formbtns { display:flex; gap:6px; align-self:center; }
.card.ev.flash { box-shadow: 0 0 0 4px var(--gold); transition: box-shadow .3s; }
.card.ev .changed { border-color: var(--gold-dark); background:#fff8e1; }
input[readonly] { background:#f3f0e6; color:var(--muted); }
#changes .chg { background:var(--ivory); border:2px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:14px; }
#changes .chg b { color:var(--navy); }
#changes .add { color:var(--green); } #changes .del { color:var(--red); } #changes .mod { color:#8a5a00; }
td .edit { padding:4px 12px; font-size:13px; }

.pcard { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:6px 18px; margin:6px 0 12px; }
.pcard div { font-size:14px; } .pcard span { color:var(--muted); font-size:12px; display:block; }
.big { font-size:22px; font-weight:800; }
h3 { font-size:15px; margin:16px 0 8px; }
.mini { padding:4px 12px; font-size:13px; }
.warnline { color:#8a5a00; font-size:13px; }

.staffbadge { display:inline-block; background:#e8e0ff; color:#4b2bb3; font-size:11px; font-weight:800; border-radius:8px; padding:2px 7px; margin-left:6px; vertical-align:middle; }

/* Items tab */
.itemedit { display:grid; grid-template-columns: minmax(320px, 1fr) auto; gap:18px; align-items:start; }
@media (max-width: 1000px) { .itemedit { grid-template-columns: 1fr; } }
.previews { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.pvlabel { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.pvnote { max-width:150px; }
.phone { border:8px solid #111; border-radius:26px; overflow:hidden; position:relative; background:#05360d center bottom / cover no-repeat; }
.phone.tall { width:200px; height:433px; }
.phone.pad { width:270px; height:360px; border-radius:16px; }
.board { position:absolute; inset:0; padding:8% 4% 0; display:flex; flex-direction:column; gap:3%; }
.phone.pad .board { padding:6% 12% 0; }
.hud { display:flex; justify-content:space-around; font-size:10px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.hud.dark { color:#1c2a5c; text-shadow:none; } .hud.light { color:#fff; }
.cardrow { display:grid; grid-template-columns: repeat(7, 1fr); gap:3px; }
.cardrow img, .slot { width:100%; display:block; aspect-ratio: 7 / 10; border-radius:3px; }
.slot { border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.08); }
.pile img + img { margin-top:-115%; }
.tile { width:120px; background:#fff; border:3px solid var(--gold); border-radius:14px; padding:6px; text-align:center; font-size:12px; font-weight:700; }
.tile .pic { width:100%; aspect-ratio: 9 / 16; border-radius:8px; background:#ddd center / cover no-repeat; }
.tile .pic.back { aspect-ratio: 7 / 10; background-size:contain; background-color:transparent; }
.tile .price { color:var(--muted); font-size:11px; margin-top:2px; }
.thumb { height:56px; border-radius:6px; display:block; }
.checks .err { color:var(--red); } .checks .warn { color:#8a5a00; } .checks .ok { color:var(--green); } .checks div { margin:2px 0; }
.status.draft { background:#e8e0ff; color:#4b2bb3; } .status.retired { background:#eee; color:#666; }

[hidden] { display:none !important; }
.gamesel { background:#2a3a78; color:#fff; border:1px solid #4b5a99; border-radius:16px; padding:6px 10px; font-weight:600; }
.gamebadge { display:inline-block; background:#e3f0ff; color:#1c4f9c; font-size:11px; font-weight:800; border-radius:8px; padding:1px 7px; vertical-align:middle; }
#builtBox summary { cursor:pointer; font-weight:700; margin-bottom:8px; }
img.zoom { cursor: zoom-in; }
.lightbox { position:fixed; inset:0; z-index:50; background:rgba(15,20,45,.82); display:flex; align-items:center; justify-content:center; cursor: zoom-out; }
.lightbox figure { margin:0; text-align:center; }
.lightbox img { max-width:90vw; max-height:82vh; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.5); background:#fff; }
.lightbox figcaption { color:#fff; font-weight:700; margin-top:10px; font-size:16px; }
.lightbox figcaption span { display:block; font-weight:400; font-size:12px; color:#c8cde6; margin-top:2px; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 12px; }
.filters .flabel { font-size:12px; font-weight:700; color:var(--muted); margin:0 2px 0 8px; }
.filters .flabel:first-child { margin-left:0; }
.filters .chip { flex-direction:row; align-items:center; gap:5px; min-width:0; flex:0 0 auto; margin:0; font-size:13px; color:var(--navy);
  background:var(--ivory); border:2px solid var(--line); border-radius:16px; padding:3px 10px; cursor:pointer; }
.filters .chip:has(input:checked) { background:#fff3cf; border-color:var(--gold-dark); }

/* AI drafts */
.aibar { margin: 10px 0 6px; }
.note { background: #fff6dc; border: 1px solid #f0d38a; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.bubble.en { background: #eef4ff; }
details.tr { margin-top: 10px; }
details.tr summary { cursor: pointer; font-weight: 600; }

.gsrow { display:grid; grid-template-columns: 1fr 180px; gap:4px 12px; align-items:center; margin:8px 0; }
.gsrow .muted { grid-column: 1 / -1; font-size:12px; }
.gsrow input[type=checkbox] { justify-self:start; width:22px; height:22px; }

.hist { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; }
.hist th, .hist td { text-align: left; padding: 5px 8px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.hist th { font-weight: 600; opacity: .7; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }