:root { --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f4f6fa; --green:#5DBB46; --navy:#1B2B45; --bad:#b3261e; --warn:#8a5a00; --ok:#0a7d3c; --info:#1d4ed8; }
* { box-sizing:border-box; } body { margin:0; font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; gap:10px; align-items:center; padding:10px 18px; background:var(--navy); color:#fff; position:sticky; top:0; z-index:5; flex-wrap:wrap; }
header b { font-size:16px; margin-right:6px; } .pill { font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.14); } .pill.ok { background:var(--green); } .pill.bad { background:#ef4444; } header .right { margin-left:auto; display:flex; gap:8px; align-items:center; } header a, header button.link { color:#cbd5e1; font-size:12px; background:none; border:0; cursor:pointer; }
main { display:grid; grid-template-columns: 400px 1fr; gap:16px; padding:16px; max-width:1560px; margin:0 auto; } @media (max-width: 900px) { main { grid-template-columns: 1fr; } }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; }
h1 { font-size:20px; margin:0 0 6px; } h2 { margin:0 0 8px; font-size:15px; } h3 { margin:12px 0 6px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
label { display:block; font-size:12px; color:var(--muted); margin:8px 0 3px; } select, input[type=text], input[type=password], input[type=number], textarea { width:100%; font:inherit; padding:7px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; } textarea { min-height:64px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row > * { flex:1; } .row > .fixed { flex:0 0 auto; }
button.primary { background:var(--green); color:#fff; border:0; padding:10px 14px; border-radius:6px; font-weight:700; cursor:pointer; width:100%; font-size:14px; } button.primary:disabled { opacity:.5; cursor:default; } button.primary.navy { background:var(--navy); }
button.ghost { background:#fff; border:1px solid var(--line); padding:5px 9px; border-radius:6px; cursor:pointer; font-size:12px; } button.ghost.on { border-color:var(--green); color:var(--ok); font-weight:700; }
.chips { display:flex; gap:6px; flex-wrap:wrap; } .chip { border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; cursor:pointer; background:#fff; } .chip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.blurb, .muted { font-size:12px; color:var(--muted); } .blurb { margin-top:4px; }
.angles { max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:6px; } .angle { padding:6px 8px; border-bottom:1px solid var(--line); cursor:pointer; font-size:12px; } .angle:hover { background:#f8fafc; } .angle.on { background:#e8f5e4; } .angle b { display:block; font-size:12px; } .angle .g { float:right; font-size:10px; color:var(--muted); text-transform:uppercase; }
.refs { display:grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap:6px; max-height:220px; overflow:auto; margin-top:6px; } .refs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer; background:#eee; } .refs img.on { border-color:var(--green); }
.gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; } .tile img, .tile video { width:100%; display:block; background:#0f172a; aspect-ratio:1; object-fit:contain; } .tile .meta { padding:8px 10px; font-size:12px; } .tile .pending { aspect-ratio:1; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#1B2B45,#334155); font-size:12px; text-align:center; padding:12px; }
.tag { display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:700; margin-right:4px; margin-bottom:2px; } .tag.ok { background:#e6f4ec; color:var(--ok); } .tag.bad { background:#fbe9e7; color:var(--bad); } .tag.warn { background:#fff4dd; color:var(--warn); } .tag.info { background:#e8eefc; color:var(--info); }
details summary { cursor:pointer; color:var(--muted); font-size:12px; } pre { white-space:pre-wrap; font-size:11px; background:#f8fafc; padding:8px; border-radius:6px; max-height:240px; overflow:auto; }
#log { font-family:ui-monospace,Consolas,monospace; font-size:12px; background:#0f172a; color:#e2e8f0; padding:10px; border-radius:8px; max-height:150px; overflow:auto; white-space:pre-wrap; }
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; } body.login .card { width:360px; } body.login input { margin-bottom:8px; }
.picker { display:grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap:6px; max-height:300px; overflow:auto; margin-top:6px; } .pick { position:relative; border:2px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer; background:#eee; aspect-ratio:1; } .pick img, .pick video { width:100%; height:100%; object-fit:cover; display:block; } .pick .d { position:absolute; left:3px; top:3px; background:rgba(15,23,42,.8); color:#fff; font-size:10px; padding:1px 5px; border-radius:999px; } .pick .b { position:absolute; left:0; right:0; bottom:0; background:rgba(15,23,42,.7); color:#fff; font-size:9px; padding:2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pick.on { border-color:var(--green); box-shadow:0 0 0 2px #cde9c6 inset; } .pick .n { position:absolute; right:3px; top:3px; background:var(--green); color:#fff; font-size:11px; font-weight:700; padding:1px 6px; border-radius:999px; }
.basket { display:grid; gap:6px; margin-top:6px; } .bitem { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:12px; } .bitem img { width:44px; height:44px; object-fit:cover; border-radius:4px; background:#eee; } .bitem .t { flex:1; min-width:0; } .bitem .t div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bitem input[type=number] { width:56px; padding:3px 6px; font-size:12px; }
.insp { display:flex; gap:8px; align-items:center; font-size:12px; background:#e8f5e4; border:1px solid #cde9c6; border-radius:6px; padding:6px 10px; margin:6px 0 2px; flex-wrap:wrap; }
.brands { display:grid; gap:6px; } .brand.off { opacity:.55; } .brand input[type=checkbox] { width:16px; height:16px; } .brand { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:12px; flex-wrap:wrap; } .brand b { flex:1; min-width:140px; } .brand input[type=text] { width:90px; font-size:11px; padding:3px 6px; } .brand select { width:auto; font-size:11px; padding:3px 6px; }
.tile.market img, .tile.market video { aspect-ratio:1; max-height:300px; }
.lanes { margin-bottom:10px; } .lanes .chip { padding:5px 12px; }
.preview { white-space:pre-wrap; font-size:11px; background:#f8fafc; padding:8px; border-radius:6px; max-height:200px; overflow:auto; margin-top:6px; color:#334155; }
.tile.video video { aspect-ratio:9/16; max-height:420px; object-fit:contain; }
.tile .meta b { font-size:12px; word-break:break-word; }

.lanes .chip small { display:block; font-size:10px; opacity:.8; font-weight:400; } .lanes .chip { text-align:left; padding:6px 12px; }
.steps { margin:6px 0 10px; padding-left:20px; font-size:12px; color:#334155; } .steps li { margin:3px 0; } .steps b { color:var(--ink); }
/* wizard */
main.wiz { grid-template-columns: 1fr; max-width: 1180px; }
.wsteps { display:flex; gap:8px; margin-bottom:12px; } .wstep { flex:1; text-align:center; padding:8px; border-radius:8px; background:#f1f5f9; color:var(--muted); font-size:13px; } .wstep b { display:inline-block; width:22px; height:22px; line-height:22px; border-radius:50%; background:#cbd5e1; color:#fff; margin-right:6px; font-size:12px; } .wstep.on { background:var(--navy); color:#fff; } .wstep.on b { background:var(--green); } .wstep.done { background:#e6f4ec; color:var(--ok); } .wstep.done b { background:var(--green); }
.bigchips { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:10px; } .bchip { border:2px solid var(--line); border-radius:10px; padding:14px; cursor:pointer; font-weight:700; font-size:15px; background:#fff; } .bchip small { display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:4px; } .bchip.on { border-color:var(--green); background:#f3faf1; }
.wiz .picker { grid-template-columns: repeat(4, 1fr); max-height:560px; } @media (max-width:700px) { .wiz .picker { grid-template-columns: repeat(2, 1fr); } } .pick .k { position:absolute; right:3px; bottom:20px; background:rgba(255,255,255,.9); color:var(--navy); font-size:10px; padding:1px 5px; border-radius:999px; font-weight:700; }
.advbox { border:1px dashed var(--line); border-radius:8px; padding:10px; margin:8px 0; background:#fafbfc; }
.summary { display:grid; gap:8px; } .summary .srow { display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:12px; } .summary .srow img { width:44px; height:44px; object-fit:cover; border-radius:4px; background:#eee; } .summary .total { font-size:14px; padding:8px 10px; background:#e8f5e4; border-radius:6px; }
.progress { display:grid; gap:6px; margin-top:12px; } .prow { display:grid; grid-template-columns: 1fr 160px; gap:8px; align-items:center; font-size:12px; } .prow .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bar { height:10px; background:#e2e8f0; border-radius:999px; overflow:hidden; position:relative; } .bar i { display:block; height:100%; background:var(--green); transition:width .8s; } .bar.failed i { background:var(--bad); } .prow .st { font-size:11px; color:var(--muted); text-align:right; }

#hoverplayer { display:none; position:fixed; z-index:50; width:270px; background:#000; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.45); overflow:hidden; } #hoverplayer video { width:270px; height:480px; object-fit:contain; display:block; background:#000; }
.pick .st { position:absolute; right:3px; top:3px; background:#fff; color:var(--navy); font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.35); max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pick .st.nat { background:rgba(255,255,255,.75); color:var(--muted); }
.pick .n { top:auto; bottom:20px; right:auto; left:3px; }

.wsec { margin-top:34px; padding-top:20px; border-top:2px solid var(--line); } .wsec:first-of-type { }
.wiz h3.sec { font-size:20px; font-weight:800; color:var(--ink); text-transform:none; letter-spacing:0; margin:0 0 10px; } .wiz h3.sec .muted { font-size:13px; font-weight:400; }
.refs > .muted, .picker > .muted { grid-column: 1 / -1; }

.prow { grid-template-columns: 1fr 260px; } .bar.busy i { width:30% !important; animation: busy 1.4s ease-in-out infinite; } @keyframes busy { 0% { margin-left:-30%; } 100% { margin-left:100%; } }
.bitem label { font-size:13px !important; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; } .bitem input[type=number] { width:78px; font-size:22px; font-weight:800; padding:6px 8px; text-align:center; border:2px solid var(--navy); border-radius:8px; }
.summary .total { font-size:17px; } .summary .total b { font-size:20px; }

.bbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:10px 12px; border-radius:10px; background:#f3f6fb; } .bbar b { font-size:15px; } .bbar a.ghost { text-decoration:none; } .tile.approved { outline:3px solid var(--ok); outline-offset:-3px; }

.copybox { margin-top:6px; padding:6px 8px; background:#f6f5f2; border:1px solid var(--line); border-radius:6px; font-size:12.5px; white-space:pre-wrap; } .copybox b { font-size:11px; text-transform:uppercase; letter-spacing:.04em; } button.mini { padding:1px 7px; font-size:11px; }

/* wizard clarity (Cole, Oct 6: dummy-proof) */
button.wstep { border:0; font:inherit; cursor:default; }
.wstep.reachable { cursor:pointer; background:#e0f2fe; color:var(--navy); } .wstep.reachable:hover { background:#bae6fd; }
.whelp { margin:2px 0 8px; font-size:13px; color:var(--muted); }
.filterbox { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:6px 0 12px; background:#fafafa; }
.frow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0; } .flabel { width:110px; font-size:12px; font-weight:600; color:var(--ink, #1f2937); }
.bchip em.new { font-style:normal; font-size:10px; background:#16a34a; color:#fff; border-radius:999px; padding:1px 6px; margin-left:4px; vertical-align:middle; }
.optlist { display:grid; gap:6px; } .opt { display:flex; gap:8px; align-items:flex-start; margin:0; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:inherit; font-size:13px; cursor:pointer; } .opt input { margin-top:3px; } .opt small { display:block; color:var(--muted); font-weight:400; }
.yourlist { border-top:2px solid var(--navy); padding-top:8px; }

/* wizard v3 (Cole, Oct 6): big buttons, toggles, prompt tool, receipt */
.wsteps { gap:6px; } .wsteps .wstep { font-size:12.5px; padding:9px 4px; }
.wtitle { text-align:center; font-size:26px; font-weight:800; margin:6px 0 14px; }
.whelp.center { text-align:center; }
.bigbtns { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; } .bigbtns.grid4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width: 760px) { .bigbtns.grid4 { grid-template-columns:repeat(2, 1fr); } }
.bigbtn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:20px 12px; border:2px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; font:inherit; transition:transform .08s, border-color .08s, box-shadow .08s; }
.bigbtn:hover { transform:translateY(-2px); border-color:var(--navy); box-shadow:0 6px 18px rgba(15,23,42,.10); }
.bigbtn .ico { font-size:34px; line-height:1; } .bigbtn b { font-size:17px; font-weight:800; } .bigbtn small { color:var(--muted); font-size:12px; text-align:center; }
.bigbtn.on { border-color:#16a34a; background:#f0fdf4; } .bigbtn.dim { opacity:.7; }
.segwrap { display:flex; flex-direction:column; align-items:center; margin:6px 0 16px; } .segwrap.left { align-items:flex-start; margin:0 0 6px; }
.seglabel { font-weight:700; font-size:14px; margin-bottom:6px; }
.seg { display:inline-flex; border:2px solid var(--navy); border-radius:12px; overflow:hidden; } .seg button { border:0; background:#fff; padding:10px 18px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; color:var(--navy); } .seg button + button { border-left:2px solid var(--navy); } .seg button.on { background:var(--navy); color:#fff; }
.seg.small button { padding:6px 12px; font-size:12.5px; }
.mixpills { display:inline-flex; gap:4px; margin-right:8px; } .mp { border:1px solid var(--line); background:#fff; border-radius:999px; padding:3px 9px; font-size:11px; cursor:pointer; color:var(--muted); } .mp.on { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.navrow { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.navbtn { border:0; border-radius:12px; padding:14px 22px; font:inherit; font-weight:800; font-size:16px; cursor:pointer; }
.navbtn.next { background:#16a34a; color:#fff; } .navbtn.next:hover { background:#15803d; } .navbtn.next.big { font-size:19px; padding:16px 36px; }
.navbtn.back, .navbtn.mono { background:#e5e7eb; color:#374151; } .navbtn.back:hover, .navbtn.mono:hover { background:#d1d5db; }
.toggroup { margin:14px 0; } .toggroup h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px; }
.toggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
.tog { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:14px 14px 12px; border-radius:14px; border:2px solid #4b5563; background:#374151; color:#d1d5db; filter:grayscale(1); cursor:pointer; font:inherit; text-align:left; min-height:96px; }
.tog .ico { font-size:24px; } .tog b { font-size:16px; font-weight:800; color:#f3f4f6; } .tog small { font-size:11.5px; color:#9ca3af; } .tog em { position:absolute; top:10px; right:12px; font-style:normal; font-weight:800; font-size:11px; letter-spacing:.06em; }
.tog.on { filter:none; background:linear-gradient(135deg, #16a34a, #22c55e); border-color:#15803d; color:#fff; } .tog.on b, .tog.on small { color:#fff; } .tog.on small { opacity:.92; }
.tog.size.on { background:linear-gradient(135deg, #2563eb, #3b82f6); border-color:#1d4ed8; }
.tog.disabled { opacity:.45; cursor:not-allowed; }
.onword { color:#16a34a; } .offword { color:#4b5563; }
.bigq { text-align:center; font-size:22px; font-weight:800; margin:10px 0 4px; } .yesno { display:flex; justify-content:center; gap:14px; margin-top:16px; }
.porder { max-width:640px; margin:0 auto; border:2px solid var(--line); border-radius:14px; padding:18px; background:#fff; } .pcount { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }
.pthumb { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.receipt { max-width:720px; margin:0 auto; border:2px dashed #cbd5e1; border-radius:14px; padding:16px 18px; background:#fff; }
.rhead { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:10px 0 6px; }
.rline { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f1f5f9; } .rline img { width:44px; height:44px; object-fit:cover; border-radius:6px; }
.rprompt { margin-top:4px; font-size:12.5px; background:#fef9c3; border-radius:6px; padding:4px 8px; }
.rsettings { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:13px; } .rk { font-weight:800; font-size:11px; padding:1px 7px; border-radius:999px; margin-left:4px; } .rk.on { background:#16a34a; color:#fff; } .rk.off { background:#4b5563; color:#fff; }
.rtotal { margin-top:14px; border-top:2px solid var(--navy); padding-top:10px; } .rcost { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:14px; } .rcost b { font-size:20px; } .rcost.worst { color:#b45309; } .rcost.worst b { font-size:16px; }

.porder img.pthumb { width:64px !important; height:64px !important; flex:none; }

#hoverplayer .hpadd { display:block; width:100%; border:0; padding:10px; font:inherit; font-weight:800; font-size:14px; background:#16a34a; color:#fff; cursor:pointer; } #hoverplayer .hpadd.on { background:#374151; } #hoverplayer .hpadd:hover { filter:brightness(1.08); }

.homehead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hbatches { display:grid; gap:6px; } .hbatch { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; }
.qty { display:inline-flex; align-items:center; gap:6px; margin-left:8px; } .qty button { width:30px; height:30px; border-radius:8px; border:2px solid var(--navy); background:#fff; font-weight:800; font-size:16px; cursor:pointer; color:var(--navy); } .qty button:hover { background:var(--navy); color:#fff; } .qty b { min-width:18px; text-align:center; font-size:16px; }

/* home batch grid + viewer */
.hbatches { display:grid; gap:14px; }
.gcard { border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff; }
.ghead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.gthumb { position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:#111827; cursor:pointer; border:2px solid transparent; }
.gthumb:hover { border-color:#16a34a; } .gthumb img, .gthumb video { width:100%; height:100%; object-fit:cover; display:block; }
.gk { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; border-radius:999px; font-size:10px; padding:2px 6px; }
.gb { position:absolute; right:6px; top:6px; border-radius:999px; font-size:11px; font-weight:800; padding:1px 7px; color:#fff; } .gb.ok { background:#16a34a; } .gb.bad { background:#dc2626; }
.gph { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#9ca3af; font-size:11px; text-align:center; padding:6px; } .gph.bad { color:#fca5a5; font-size:18px; } .gph small { font-size:10.5px; }
.spin { width:22px; height:22px; border:3px solid #374151; border-top-color:#22c55e; border-radius:50%; animation:spin 0.9s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
#viewer { display:none; position:fixed; inset:0; z-index:80; } #viewer .vback { position:absolute; inset:0; background:rgba(15,23,42,.75); }
#viewer .vbox { position:relative; margin:4vh auto; width:min(980px, 94vw); max-height:92vh; background:#fff; border-radius:16px; display:flex; overflow:hidden; }
#viewer .vmedia { background:#000; flex:none; width:min(420px, 50vw); display:flex; align-items:center; justify-content:center; } #viewer .vmedia img, #viewer .vmedia video { width:100%; max-height:92vh; object-fit:contain; display:block; }
#viewer .vside { padding:16px; overflow:auto; flex:1; } #viewer .vx { position:absolute; right:10px; top:8px; border:0; background:#e5e7eb; border-radius:999px; width:30px; height:30px; font-weight:800; cursor:pointer; z-index:2; }
.gph.big { height:60vh; }

/* QC result at a glance (Cole, Oct 6): fails darkened with a red border, passes green */
.gthumb.qcfail { border:3px solid #dc2626; } .gthumb.qcfail img, .gthumb.qcfail video { filter:brightness(.45) saturate(.5); }
.gthumb.qcfail:hover img, .gthumb.qcfail:hover video { filter:brightness(.8) saturate(.8); }
.gthumb.qcpass { border:3px solid #16a34a; }

/* step 4: setting per ad */
.setgrid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin-top:10px; }
.setgrid .bigbtn { padding:14px 10px; } .setgrid .bigbtn .ico { font-size:26px; }
.bigbtn.refset { width:100%; margin-top:14px; }

/* header logo (Cole, Oct 7) + redo */
.brandlogo { height:30px; width:auto; display:block; }
.navbtn.redo { width:100%; margin-top:12px; font-size:17px; }
#redomodal { position:fixed; inset:0; z-index:90; } #redomodal .vback { position:absolute; inset:0; background:rgba(15,23,42,.6); }
.redobox { position:relative; margin:18vh auto 0; width:min(480px, 92vw); background:#fff; border-radius:16px; padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.redobox textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }

/* Customize sections (Cole, Oct 7) */
.csecs { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.csec { display:flex; flex-direction:column; gap:4px; font-weight:700; color:inherit; }
.csec input { font-weight:400; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; }
#wsizes .bigbtn small { color:#16a34a; font-weight:700; }

/* the plan (Customize) */
.plan { margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:12px; background:#f8fafc; display:grid; gap:10px; }
.planhd { font-weight:800; }
.plan textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-weight:400; line-height:1.4; }

/* Both: which phase am I in (Cole, Oct 7) — videos violet, images blue */
.phase { border-radius:10px; padding:8px 12px; font-weight:900; letter-spacing:.04em; color:#fff; margin-bottom:10px; }
.phase.video { background:#7c3aed; } .phase.image { background:#2563eb; }
.porder.video { border-left:5px solid #7c3aed; } .porder.image { border-left:5px solid #2563eb; }
.phasebreak { text-align:center; font-weight:800; color:#16a34a; margin:4px 0 10px; }
.stag { font-size:10.5px; font-weight:800; border-radius:999px; padding:1px 7px; color:#fff; margin-left:4px; vertical-align:middle; }
.stag.video { background:#7c3aed; } .stag.image { background:#2563eb; }

.planver { border-top:1px dashed var(--line); padding-top:10px; } .planver:first-of-type { border-top:0; padding-top:0; } .planvhd { font-weight:800; margin-bottom:6px; }

.gnote { display:block; max-width:560px; margin:10px auto 14px; font-weight:700; } .gnote textarea { width:100%; box-sizing:border-box; margin-top:6px; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-weight:400; }
#wpinput { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; margin-top:6px; }
.otherbox { display:flex; gap:8px; margin-top:10px; } .otherbox input { flex:1; border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }

.pthumbs { display:flex; gap:6px; flex-wrap:wrap; } .yesno { flex-wrap:wrap; }

.gthumb.qcmanual { border:3px solid #fde68a; }
.tag.manual { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }

/* Approvals (Cole, Oct 7) */
.navbtn.appr { background:#fef3c7; color:#92400e; } .navbtn.appr:hover { background:#fde68a; }
#apprbox { display:none; position:fixed; inset:0; z-index:85; } #apprbox .vback { position:absolute; inset:0; background:rgba(15,23,42,.8); }
.aprpanel { position:relative; margin:3vh auto; width:min(1000px, 96vw); max-height:94vh; overflow:auto; background:#fff; border-radius:18px; padding:14px 16px; }
.aprhead { display:flex; align-items:center; gap:12px; margin-bottom:10px; } .aprhead select { border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; }
.aprbody { display:flex; gap:16px; } .aprmedia { flex:none; width:min(420px, 48vw); background:#000; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.aprmedia img, .aprmedia video { width:100%; max-height:68vh; object-fit:contain; display:block; } .aprside { flex:1; min-width:0; display:grid; gap:8px; align-content:start; }
.aprbtns { display:flex; gap:14px; justify-content:center; margin:14px 0 6px; }
.aprbtn { border:0; border-radius:14px; padding:16px 34px; font:inherit; font-weight:900; font-size:19px; cursor:pointer; color:#fff; } .aprbtn small { opacity:.7; font-weight:700; margin-left:6px; }
.aprbtn.no { background:#dc2626; } .aprbtn.no:hover { background:#b91c1c; } .aprbtn.yes { background:#16a34a; } .aprbtn.yes:hover { background:#15803d; }
.aprdone { text-align:center; font-size:20px; font-weight:800; padding:60px 0; }
@media (max-width:720px) { .aprbody { flex-direction:column; } .aprmedia { width:100%; } }

.aprbtn.retry { background:#f59e0b; } .aprbtn.retry:hover { background:#d97706; }
.aprretrybox { max-width:560px; margin:4px auto 8px; } .aprretrybox textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:9px; font:inherit; }

/* QC as a batch stage (Cole, Oct 7) */
#rvbox { display:none; position:fixed; inset:0; z-index:85; } #rvbox .vback { position:absolute; inset:0; background:rgba(15,23,42,.8); }
.hreview { display:grid; gap:10px; } .rvcard { display:flex; align-items:center; gap:14px; border:2px solid #fde68a; background:#fffbeb; border-radius:14px; padding:12px; }
.rvthumbs { display:flex; gap:6px; margin-top:8px; overflow:hidden; } .rvthumbs img, .rvthumbs video { height:70px; width:auto; border-radius:6px; background:#111827; }
.bchip { display:inline-block; font-size:11.5px; font-weight:800; border-radius:999px; padding:2px 9px; margin-left:6px; vertical-align:middle; }
.bchip.rend { background:#e0e7ff; color:#3730a3; } .bchip.todo { background:#fef3c7; color:#92400e; } .bchip.done { background:#dcfce7; color:#166534; }
.gb.rej { background:#6b7280; } .gthumb.rejected { opacity:.35; }
.gnew { position:absolute; left:6px; top:6px; background:#f59e0b; color:#fff; font-size:10px; font-weight:800; border-radius:999px; padding:1px 7px; }
.rvstate { text-align:center; font-weight:800; font-size:17px; margin:14px 0 6px; } .rvstate.ok { color:#16a34a; } .rvstate.no { color:#6b7280; }
#bpublish, [data-approve] { display:none !important; } /* Approve in Review moves the file now — the old publish step is gone */

.fmtrow { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; margin-top:12px; } .fmtlabel { font-weight:800; align-self:center; margin-right:4px; }
.fmtbtn { flex:1 1 150px; text-align:left; border:2px solid var(--line); background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer; font:inherit; display:flex; flex-direction:column; gap:2px; }
.fmtbtn small { color:#6b7280; font-size:11px; } .fmtbtn.on { border-color:#7c3aed; background:#f5f3ff; }
/* Soul Catcher mode (Cole, Oct 11): the soul step — angle + one line up top, every field behind Show details */
.soulsum { text-align:center; max-width:640px; margin:8px auto 14px; } .soulsum .ang { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .soulsum .line { font-size:20px; font-weight:700; line-height:1.4; margin:6px 0 14px; }
.soulsum .navbtn { flex:0 0 auto; padding:8px 18px; }
.soulcard { display:grid; grid-template-columns:180px 1fr; gap:8px 12px; align-items:start; max-width:760px; margin:0 auto; } .soulcard label { font-weight:700; padding-top:8px; font-size:13px; margin:0; } .soulcard textarea { min-height:54px; resize:vertical; }
.soulqty { display:flex; gap:26px; flex-wrap:wrap; align-items:center; font-weight:800; font-size:16px; } .soulqty .qty b { min-width:24px; text-align:center; font-size:18px; }
@media (max-width: 640px) { .soulcard { grid-template-columns:1fr; } .soulcard label { padding-top:0; } }
/* Soul formats — advanced picture grid (Cole, Oct 11) */
.fmtadv { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; font:inherit; color:var(--ink); } .fmtadv:hover { border-color:#cbd5e1; } .fmtadv b { flex:1; } .fmtadv .chev { color:var(--muted); font-size:12px; }
.fmtfam { margin-top:14px; } .fmtfam .famhead { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .fmtfam .famhead b { flex:1; font-size:14px; } .fmtfam .famhead button { padding:4px 10px; font-size:12px; }
.fmtgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.fmtcard { position:relative; display:flex; flex-direction:column; background:#fff; border:2px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; padding:0; text-align:left; font:inherit; color:var(--ink); transition:border-color .12s, opacity .12s; }
.fmtcard img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#eef1f5; display:block; }
.fmtcard .fc { padding:7px 9px 9px; } .fmtcard .fc b { display:block; font-size:13px; line-height:1.25; } .fmtcard .fc small { display:block; color:var(--muted); font-size:11px; line-height:1.3; margin-top:2px; }
.fmtcard .tick { position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.fmtcard .kind { position:absolute; top:7px; left:7px; background:rgba(15,23,42,.72); color:#fff; font-size:11px; padding:2px 7px; border-radius:999px; }
.fmtcard.on { border-color:var(--green); } .fmtcard.off { opacity:.45; } .fmtcard.off .tick { background:#fff; color:transparent; border:2px solid #cbd5e1; box-shadow:none; }
@media (max-width: 640px) { .fmtgrid { grid-template-columns:repeat(2, 1fr); } }
.soulsum { text-align:left; max-width:680px; } .soulsum .srow { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:10px; } .soulsum .srow span { display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px; } .soulsum .srow p { margin:0; } .soulsum .srow .line { font-size:18px; font-weight:700; line-height:1.35; } .soulsum .srow .desc { font-size:15px; line-height:1.5; color:var(--ink); } .soulsum > .navbtn { display:block; margin:4px auto 0; }
.fmtcard.always { border-color:#eab308; box-shadow:0 0 0 2px rgba(234,179,8,.25); } .fmtcard.always .tick { background:#eab308; color:#fff; font-size:15px; }
/* review: every action on one row (Cole, Oct 11) */
.aprbtns { align-items:center; flex-wrap:nowrap; } .aprbtns .rvstate { flex:1; margin:0; }
.aprbtn.nav { background:#1B2B45; font-weight:900; letter-spacing:.01em; } .aprbtn.nav:hover { background:#0f1b2e; }
@media (max-width: 900px) { .aprbtns { gap:8px; } .aprbtn { padding:13px 16px; font-size:16px; } }
@media (max-width: 560px) { .aprbtn { padding:12px 10px; font-size:14px; border-radius:10px; } }
/* review: Approve/Reject + tiny Previous bottom-left; reject → try again / next pop-ups (Cole, Oct 11) */
.aprbtns { position:relative; } .aprbtns .aprbtn { min-width:170px; }
.rvprevmini { position:absolute; left:0; bottom:0; background:none; border:0; color:var(--muted); font:inherit; font-size:12px; font-weight:700; padding:4px 6px; cursor:pointer; } .rvprevmini:hover { color:var(--ink); text-decoration:underline; }
#rvpop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; } #rvpop .rvpopback { position:absolute; inset:0; background:rgba(15,23,42,.45); }
#rvpop .rvpopcard { position:relative; background:#fff; border-radius:16px; padding:22px 24px; width:min(460px, calc(100vw - 32px)); box-shadow:0 20px 50px rgba(0,0,0,.3); text-align:center; }
#rvpop h3 { margin:0 0 6px; font-size:20px; } #rvpop textarea { width:100%; margin-top:12px; font:inherit; padding:9px; border:1px solid var(--line); border-radius:10px; min-height:84px; }
#rvpop .rvpopbtns { display:flex; gap:10px; justify-content:center; margin-top:16px; } #rvpop .rvpopbtns .aprbtn { padding:13px 22px; font-size:16px; min-width:0; } #rvpop .rvpopbtns .navbtn { flex:0 0 auto; padding:12px 18px; }
@media (max-width: 560px) { .aprbtns .aprbtn { min-width:0; flex:1; } .aprbtns { padding-bottom:22px; } }
/* review polish (Cole, Oct 11): proper close button, decided-ad stamp, Previous always there */
.aprhead .vx { flex:none; width:36px; height:36px; border:0; border-radius:999px; background:#f1f5f9; color:#334155; font-size:18px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .12s; } .aprhead .vx:hover { background:#e2e8f0; color:#0f172a; }
.aprmedia { position:relative; }
.stamp { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-14deg); padding:10px 26px; border:6px solid currentColor; border-radius:12px; font-weight:900; font-size:clamp(28px, 5vw, 46px); letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.82); box-shadow:0 0 0 3px rgba(255,255,255,.6) inset; pointer-events:none; mix-blend-mode:normal; opacity:.92; }
.stamp.ok { color:#15803d; } .stamp.no { color:#dc2626; }
.rvprevmini { background:#f1f5f9; border-radius:999px; padding:6px 12px; } .rvprevmini:hover { background:#e2e8f0; text-decoration:none; } .rvprevmini:disabled { opacity:.4; cursor:default; }
.rvnextmini { left:auto; right:0; }
/* home section headers — big enough to actually see (Cole, Oct 11) */
#home h3.sec { font-size:30px; font-weight:900; color:var(--ink); text-transform:none; letter-spacing:-.01em; margin:28px 0 12px !important; padding-bottom:8px; border-bottom:2px solid var(--line); }
#home h3.sec .muted { font-size:15px; font-weight:500; } #home h3.sec label.muted { font-size:13px !important; }