:root { --accent:#001ba0; --accent2:#00c9ec; --bg:#f6f7fb; --card:#fff; --text:#1a1d29; --muted:#6b7080; --line:#e4e6ef; --ok:#0a8f5b; --warn:#b25e00; --user:#e8ecff; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1117; --card:#181b25; --text:#eef0f6; --muted:#9aa0b3; --line:#2a2e3d; --user:#1f2544; --accent:#5b7cff; } }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; height:100%; }
body { display:flex; flex-direction:column; min-height:100vh; }
.top { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; }
.logo { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--accent); color:#fff; font-weight:800; }
.by { color:var(--muted); font-weight:500; font-size:13px; }
.actions { display:flex; gap:8px; align-items:center; }
select, .ghost { border:1px solid var(--line); background:transparent; color:var(--text); border-radius:8px; padding:6px 10px; font:inherit; cursor:pointer; }
#main { flex:1; width:100%; max-width:980px; margin:0 auto; padding:18px 16px 24px; }
.empty { text-align:center; padding:48px 8px 20px; }
.empty h1 { font-size:30px; margin:0 0 10px; }
.empty p { color:var(--muted); max-width:640px; margin:0 auto 22px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chips button { border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:20px; padding:8px 14px; font:inherit; cursor:pointer; text-align:left; }
.chips button:hover { border-color:var(--accent); }
.chat { display:flex; flex-direction:column; gap:14px; }
.msg { max-width:100%; }
.msg.user { align-self:flex-end; background:var(--user); border-radius:16px 16px 4px 16px; padding:10px 14px; max-width:80%; white-space:pre-wrap; }
.msg.bot { align-self:stretch; }
.status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; margin:4px 0 8px; }
.status .dot { width:8px; height:8px; border-radius:50%; background:var(--accent2); animation:pulse 1.2s infinite; }
.status .log { font-size:12px; color:var(--muted); opacity:.8; }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.answer { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; white-space:pre-wrap; }
.answer.summary { white-space:normal; }
.intent { color:var(--muted); font-size:13px; margin-bottom:8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; margin-top:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card .img { height:150px; background:#eef0f6; display:grid; place-items:center; position:relative; }
@media (prefers-color-scheme: dark) { .card .img { background:#22263a; } }
.card .img img { width:100%; height:100%; object-fit:contain; display:none; }
.card .img.has img { display:block; } .card .img.has .noimg { display:none; }
.noimg { font-size:34px; opacity:.35; }
.card .body { padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.head { display:flex; align-items:baseline; gap:8px; }
.rank { color:var(--muted); font-size:13px; }
.head h3 { margin:0; font-size:16px; flex:1; }
.score { font-size:12px; font-weight:700; color:#fff; background:var(--accent); border-radius:12px; padding:2px 8px; }
.manu { color:var(--muted); font-size:13px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; }
.badge { font-size:11.5px; border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--muted); }
.badge.ok { color:var(--ok); border-color:var(--ok); } .badge.fin { color:var(--accent); border-color:var(--accent); } .badge.warn { color:var(--warn); border-color:var(--warn); }
.why { margin:2px 0 0; } .caveat { margin:0; color:var(--warn); font-size:13.5px; } .caveat:empty { display:none; }
.price { font-weight:700; } .price .np { font-weight:400; color:var(--muted); font-size:13px; }
.links { display:flex; gap:12px; font-size:13px; } .links a { color:var(--accent); text-decoration:none; } .links a:hover { text-decoration:underline; }
.skus summary { cursor:pointer; color:var(--muted); font-size:13px; } .skus ul { margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--muted); }
.fintypes { margin-top:12px; font-size:13.5px; color:var(--muted); } .fintypes b { color:var(--text); }
.note { margin-top:10px; font-size:14px; }
.composer { position:sticky; bottom:0; background:var(--bg); padding:10px 16px 12px; border-top:1px solid var(--line); }
#form { max-width:980px; margin:0 auto; display:flex; gap:8px; align-items:flex-end; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px 8px 8px 14px; }
#q { flex:1; border:0; outline:0; background:transparent; color:var(--text); font:inherit; resize:none; max-height:160px; }
#send { border:0; background:var(--accent); color:#fff; width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:16px; }
#send:disabled { opacity:.5; cursor:default; }
.fine { max-width:980px; margin:8px auto 0; font-size:11.5px; color:var(--muted); text-align:center; }
.err { color:#c0392b; }

.card .img.possible { outline:2px dashed var(--warn); outline-offset:-2px; }