:root { --ink:#16191f; --muted:#5f6b7a; --line:#e3e6ea; --accent:#005eb8; --bg:#f6f7f9; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:#0f1b2a; color:#fff; }
.brand { font-weight:700; font-size:18px; } .brand span { color:#7cc4ff; }
#auth-area { display:flex; gap:14px; align-items:center; }
.dash-link { color:#7cc4ff; text-decoration:none; font-size:14px; border:1px solid #2c4a6b; padding:6px 10px; border-radius:6px; }
.dash-link:hover, .dash-link:focus-visible { background:#16304d; }
button { font:inherit; padding:8px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
button:focus-visible, input:focus-visible { outline:3px solid #ffb703; outline-offset:2px; }
main { max-width:1280px; margin:0 auto; padding:24px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px; }
.muted { color:var(--muted); } .small { font-size:13px; margin-top:-6px; }
.searchbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:#fff; padding:14px; border:1px solid var(--line); border-radius:10px; }
.searchbar input[type=search] { flex:1 1 320px; padding:10px 12px; font-size:16px; border:1px solid #aab3bf; border-radius:6px; }
.modes { border:0; display:flex; gap:14px; margin:0; padding:0; }
.layout { display:grid; grid-template-columns: 1fr 320px; gap:20px; margin-top:18px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:14px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.card .thumb { background:#fff; border:0; padding:0; cursor:pointer; text-align:left; color:inherit; }
.card img { width:100%; height:200px; object-fit:contain; background:#fff; }
.card .title { font-size:14px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card .rank { font-size:12px; color:var(--muted); }
.stars { color:#b26b00; font-size:13px; }
.card .cart { margin-top:auto; background:#fff; color:var(--accent); }
.events { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; max-height:80vh; overflow:auto; position:sticky; top:12px; }
.events h2 { font-size:16px; margin:0 0 8px; }
/* live event log: one colour per event type */
.ev.query       { --c:#8a3ffc; --bg:#f4eeff; }
.ev.impression  { --c:#5f6b7a; --bg:#f2f4f7; }
.ev.click       { --c:#005eb8; --bg:#e8f2fc; }
.ev.add_to_cart { --c:#b26b00; --bg:#fff4e0; }
.ev.thumbs_up   { --c:#1d8102; --bg:#e9f6e6; }
.ev.thumbs_down { --c:#d13212; --bg:#fdecea; }
#event-log { list-style:none; padding:0; margin:0; font-family: ui-monospace, Menlo, monospace; font-size:12px; }
#event-log li { display:grid; grid-template-columns: 58px 86px 1fr auto; gap:6px; align-items:baseline;
  padding:4px 6px; margin-bottom:3px; border-left:4px solid var(--c); background:var(--bg); border-radius:4px; }
#event-log li.new { animation: flash .8s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--c) inset; } to { box-shadow: none; } }
#event-log time { color:var(--muted); }
#event-log .tag { color:var(--c); font-weight:700; }
#event-log .msg { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#event-log .st { color:var(--muted); font-size:11px; }
#event-log li[data-status="sent"] .st { color:#1d8102; }
#event-log li[data-status="failed"] .st, #event-log li[data-status="retrying"] .st { color:#d13212; }
.legend { list-style:none; display:flex; flex-wrap:wrap; gap:4px; padding:0; margin:0 0 10px; font-size:11px; }
.legend li { padding:1px 6px; border-left:3px solid var(--c); background:var(--bg); color:var(--c); border-radius:3px; }
@media (prefers-reduced-motion: reduce) { #event-log li.new { animation:none; } }

/* small icon-only feedback buttons */
.rank-row { display:flex; justify-content:space-between; align-items:center; }
.vote { display:flex; gap:4px; }
.vote-btn { width:30px; height:26px; padding:0; font-size:15px; line-height:1; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:6px; }
.vote-btn:hover:not(:disabled) { border-color:#aab3bf; }
.vote-btn[aria-pressed="true"].thumbs_up { background:#e9f6e6; border-color:#1d8102; }
.vote-btn[aria-pressed="true"].thumbs_down { background:#fdecea; border-color:#d13212; }
.vote-btn:disabled { cursor:default; }
.vote-btn:disabled[aria-pressed="false"] { opacity:.35; }
#dlg-vote { margin:8px 0; }

/* sample query chips */
.samples-wrap { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.small-label { font-size:13px; }
.samples { display:flex; gap:6px; flex-wrap:wrap; }
.chip { padding:4px 10px; font-size:13px; border-radius:16px; background:#fff; color:var(--accent); border:1px solid #b8d4ef; }
.chip:hover { background:#e8f2fc; }
.pill { background:var(--accent); color:#fff; border-radius:12px; padding:1px 8px; font-size:12px; }
dialog { border:0; border-radius:12px; max-width:520px; width:92vw; padding:20px; }
dialog img { width:100%; max-height:340px; object-fit:contain; }
.dialog-close { text-align:right; } .dialog-close button { background:#fff; color:var(--ink); border-color:var(--line); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* event flow diagram */
.flow { position:relative; display:flex; justify-content:space-between; align-items:flex-start;
  padding:6px 2px 10px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.flow-line { position:absolute; left:22px; right:22px; top:24px; height:2px; background:#d5dbe1; }
.flow { padding-left:14px; padding-right:14px; }
.flow-line { left:40px; right:40px; }
.flow .node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; width:64px; }
.flow .node img, .flow .node svg { width:32px; height:32px; border-radius:6px; background:#fff; }
.flow .node span { font-size:9.5px; line-height:1.15; text-align:center; color:var(--muted); }
.flow .node.hit img, .flow .node.hit svg { box-shadow:0 0 0 3px var(--c, #005eb8); transition:box-shadow .15s; }
.flow .ball { position:absolute; z-index:2; top:19px; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--c); box-shadow:0 0 6px var(--c); pointer-events:none; }
.flow .ball.failed { --c:#d13212; }

/* new implicit signals */
.ev.dwell       { --c:#0e7c86; --bg:#e6f6f7; }
.ev.abandon     { --c:#414d5c; --bg:#e9ebed; }
.ev.reformulate { --c:#c7166a; --bg:#fdeaf3; }

/* tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.tabs [role="tab"] { background:#fff; color:var(--muted); border:1px solid transparent; border-bottom:0;
  border-radius:6px 6px 0 0; padding:6px 10px; font-size:13px; }
.tabs [role="tab"][aria-selected="true"] { color:var(--ink); border-color:var(--line); font-weight:600;
  margin-bottom:-1px; background:#fff; }
.tabs .pill { font-size:11px; }

/* session journey */
#session-timeline { list-style:none; margin:0; padding:0; }
.jcard { border:1px solid var(--line); border-left:4px solid #8a3ffc; border-radius:6px; padding:8px; margin-bottom:8px; }
.jcard.engaged { border-left-color:#1d8102; } .jcard.abandoned { border-left-color:#414d5c; background:#fafafa; }
.jhead { font-size:13px; display:flex; flex-wrap:wrap; gap:4px; align-items:baseline; }
.jhead .muted { font-size:12px; }
.jbadge { margin-left:auto; font-size:11px; padding:1px 7px; border-radius:10px; background:#f4eeff; color:#8a3ffc; }
.jbadge.engaged { background:#e9f6e6; color:#1d6b02; } .jbadge.abandoned { background:#e9ebed; color:#414d5c; }
.jsteps { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.jsteps li { font-size:12px; padding:2px 7px; border-radius:10px; background:var(--bg); color:var(--c); border:1px solid var(--c); }