/* Particula creative review page. Structure and feel follow the Prime Day 2027 example page
   (warm off-white canvas, big condensed headline, sticky pill filter bar, 5-up card grid). */
:root{
  --bg:#F4F2EC;--card:#fff;--ink:#101216;--mute:#6A6760;--line:#E2DED4;
  --blue:#007DC4;      /* Particula blue */
  --accent:#FAAB18;    /* Particula yellow: style codes, small labels */
  --ok:#3FA31B;--tweak:#E08A00;--no:#D7263D;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111214;--card:#1A1C20;--ink:#F2F0EA;--mute:#9A978F;--line:#2A2C31}}
:root[data-theme="dark"]{--bg:#111214;--card:#1A1C20;--ink:#F2F0EA;--mute:#9A978F;--line:#2A2C31}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 Inter,system-ui,sans-serif}
.wrap{max-width:1400px;margin:0 auto;padding:40px 24px 140px}
header .brand{display:flex;align-items:center;gap:10px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
header .brand img{height:22px;width:auto}
header h1{font:900 clamp(34px,5vw,64px)/.95 Archivo,sans-serif;letter-spacing:-.03em}
header h1 span{color:var(--blue)}
header p{max-width:820px;color:var(--mute);margin-top:14px;font-size:17px}
header .stats{margin-top:12px;font:500 12px 'JetBrains Mono',monospace;color:var(--mute)}
.theme{position:absolute;top:18px;right:24px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:600 12px Inter;cursor:pointer}
.styles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:32px 0}
.styles:empty{display:none}
.styles div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.styles b{font:700 17px Archivo;display:block}
.styles small{font:500 12px 'JetBrains Mono';color:var(--accent);letter-spacing:.08em}
.styles p{color:var(--mute);font-size:13.5px;margin-top:6px}
.bar{position:sticky;top:0;z-index:5;background:var(--bg);padding:14px 0;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;border-bottom:1px solid var(--line)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font:600 14px Inter;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg button .n{font:500 11px 'JetBrains Mono';opacity:.6;margin-left:6px}
section{margin-top:44px}
section h2{font:900 34px Archivo;letter-spacing:-.02em;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
section h2 small{font:500 14px Inter;color:var(--mute);letter-spacing:0}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:18px}
.empty{color:var(--mute);margin-top:30px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card .media{position:relative;background:#ddd}
.card img,.card video{width:100%;display:block;cursor:zoom-in;background:#ddd;object-fit:cover}
.card .only{position:absolute;right:10px;bottom:10px;background:rgba(16,18,22,.8);color:#fff;font:500 11px 'JetBrains Mono';padding:3px 8px;border-radius:999px}
.card.fb-approve{box-shadow:inset 0 -4px 0 var(--ok)}
.card.fb-tweak{box-shadow:inset 0 -4px 0 var(--tweak)}
.card.fb-reject{box-shadow:inset 0 -4px 0 var(--no)}
.card.fb-reject .media{opacity:.55}
.card.sel{outline:3px solid var(--blue);outline-offset:-3px}
.pick{position:absolute;top:10px;left:10px;z-index:2;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);color:#101216;border-radius:999px;padding:7px 14px 7px 9px;font:600 13px Inter;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18);user-select:none}
.pick input{width:18px;height:18px;accent-color:var(--blue);margin:0;cursor:pointer}
.card.sel .pick{background:var(--blue);color:#fff}
.meta{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.code{font:500 12px 'JetBrains Mono';color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meta b.t{font:700 16px Archivo}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:500 11px 'JetBrains Mono';border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--mute)}
.chip.pass{border-color:var(--ok);color:var(--ok)}.chip.fail{border-color:var(--no);color:var(--no)}.chip.todo{border-color:var(--tweak);color:var(--tweak)}
.note{font-size:12.5px;color:var(--mute);font-style:italic}
.copy{font-size:13px;color:var(--mute)}
.copy dt{font:600 11px 'JetBrains Mono';letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.copy dd{white-space:pre-line}
.dl{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.dl a{font:600 12.5px Inter;color:var(--blue);text-decoration:none}
/* feedback */
.fb{margin-top:auto;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.fb .st{display:flex;gap:6px}
.fb .st button{flex:1;white-space:nowrap;font:600 12.5px Inter;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 0;cursor:pointer}
.fb .st button[data-s="approve"].on{background:var(--ok);border-color:var(--ok);color:#fff}
.fb .st button[data-s="tweak"].on{background:var(--tweak);border-color:var(--tweak);color:#fff}
.fb .st button[data-s="reject"].on{background:var(--no);border-color:var(--no);color:#fff}
.fb textarea{width:100%;min-height:54px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:400 13px/1.4 Inter;background:var(--bg);color:var(--ink)}
.fb .saved{font:500 11px 'JetBrains Mono';color:var(--mute);min-height:14px}
.notes{margin-top:60px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.notes h3{font:900 22px Archivo;margin-bottom:10px}
.notes li{margin:6px 0 6px 18px;color:var(--mute)}
.notes li b{color:var(--ink)}
.notes textarea{width:100%;min-height:110px;margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:12px;font:400 14px/1.5 Inter;background:var(--bg);color:var(--ink)}
.tray{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(140%);z-index:9;background:#101216;color:#fff;border-radius:18px;padding:12px 14px 12px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .25s;max-width:calc(100vw - 32px)}
.tray.on{transform:translateX(-50%)}
.tray b{font:800 18px Archivo;margin-right:4px}
.tray .sep{width:1px;height:26px;background:#3A3D44;margin:0 4px}
.tray button{font:600 14px Inter;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;background:#2A2D33;color:#fff}
.tray button.pri{background:var(--blue)}
.tray button:disabled{opacity:.5;cursor:wait}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#fff;color:#101216;padding:10px 18px;border-radius:12px;font:600 14px Inter;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transition:opacity .2s;z-index:30;pointer-events:none}
.toast.on{opacity:1}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:20;padding:20px 70px}
.lb.on{display:flex}
.lb img,.lb video{max-width:100%;max-height:calc(100vh - 80px);border-radius:8px}
.lb .cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font:500 13px 'JetBrains Mono'}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer}
.lb .prev{left:14px}.lb .next{right:14px}
.lb .x{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
@media(max-width:1100px){.grid,.styles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid,.styles{grid-template-columns:1fr}.lb{padding:20px}.tray{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:8px 10px;bottom:10px;border-radius:14px}.tray button{padding:8px 12px;font-size:13px;white-space:nowrap}.tray b{font-size:15px;white-space:nowrap}.theme{top:10px;right:10px}}