:root { --bg:#f5f6f8; --card:#fff; --ink:#1b1f24; --muted:#6b7280; --line:#e5e7eb; --accent:#0a8f5a; --accent2:#e8f6ef; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC", sans-serif; background:var(--bg); color:var(--ink); }
.topbar { position:sticky; top:0; z-index:5; display:flex; gap:12px; align-items:center; padding:12px 20px; background:#0f172a; color:#fff; }
.brand { font-weight:700; font-size:18px; }
.badge { font-size:11px; background:#f59e0b; color:#000; padding:2px 6px; border-radius:4px; vertical-align:middle; }
.meta { flex:1; color:#cbd5e1; font-size:13px; }
.btn { background:var(--accent); color:#fff; border:0; padding:8px 14px; border-radius:6px; cursor:pointer; font:inherit; }
.btn.ghost { background:transparent; color:inherit; border:1px solid currentColor; }
.btn:disabled { opacity:.6; cursor:default; }
.banner { background:#fff7e6; border-bottom:1px solid #f5d79e; padding:10px 20px; }
.layout { display:grid; grid-template-columns:260px 1fr; gap:20px; padding:20px; max-width:1500px; margin:auto; }
.filters { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px; align-self:start; position:sticky; top:70px; }
.filters label, .scraper label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
textarea { font:12px ui-monospace, Consolas, monospace; padding:7px 8px; border:1px solid var(--line); border-radius:6px; resize:vertical; }
#brandPicks .tag { text-decoration:none; cursor:pointer; }
input, select { font:inherit; padding:7px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
.row { display:flex; gap:8px; } .row > * { flex:1; min-width:0; }
.rates { border:1px dashed var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.rates legend { font-size:12px; color:var(--muted); }
.count { color:var(--muted); margin-bottom:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; transition:transform .1s, box-shadow .1s; }
.lang-switch { display:flex; border:1px solid #475569; border-radius:6px; overflow:hidden; }
[hidden] { display:none !important; }
.lang-switch button { background:transparent; color:#cbd5e1; border:0; padding:6px 10px; cursor:pointer; font:inherit; }
.lang-switch button.active { background:var(--accent); color:#fff; }
a.card { display:block; color:inherit; text-decoration:none; }
a.brand { color:#fff; text-decoration:none; }
.carpage { max-width:1150px; margin:0 auto; padding:20px; }
.carpage .back { display:inline-block; margin-bottom:12px; color:var(--accent); text-decoration:none; font-weight:600; }
.carhead { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:14px; flex-wrap:wrap; }
.carhead h1 { margin:0 0 2px; font-size:24px; }
.cn.orig { font-size:13px; margin-bottom:8px; }
.facts.big { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); align-items:center; font-size:14px; }
.pricebox { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; text-align:right; }
.pricebox .price { font-size:26px; }
.pill.static { position:static; }
.carpage .gallery, .carpage .cols, .carpage details, .carpage .remark { background:var(--card); }
.carpage .gallery { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:16px; }
.carpage .cols { border:1px solid var(--line); border-radius:10px; padding:6px 16px 14px; }
.carpage details { border:1px solid var(--line); border-radius:10px; padding:10px 16px; }
.thumbs img.active { outline:2px solid var(--accent); }
.card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.card .img { position:relative; aspect-ratio:4/3; background:#e5e7eb; }
.card .img img { width:100%; height:100%; object-fit:cover; display:block; }
.noimg { display:grid; place-items:center; height:100%; color:var(--muted); }
.pill { position:absolute; left:8px; top:8px; background:rgba(10,143,90,.92); color:#fff; font-size:11px; padding:3px 7px; border-radius:20px; }
.card .body { padding:10px 12px 12px; }
.card h3 { margin:0 0 6px; font-size:14px; }
.cn { color:var(--muted); font-weight:400; }
.price { font-size:18px; font-weight:700; color:var(--accent); }
.price small, td small { font-size:12px; color:var(--muted); font-weight:400; }
.warn { margin-top:4px; font-size:12px; color:#b45309; background:#fff7e6; padding:2px 6px; border-radius:4px; display:inline-block; }
.warnText { color:#b45309; }
.facts { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:12px; }
.empty { color:var(--muted); }
dialog { border:0; border-radius:12px; padding:22px; max-width:1100px; width:95vw; max-height:92vh; overflow:auto; }
dialog::backdrop { background:rgba(15,23,42,.6); }
.detail .close { position:sticky; top:0; float:right; border:0; background:#eee; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:16px; }
.detail h2 { margin-top:0; }
.gallery #mainImg { width:100%; max-height:520px; object-fit:contain; background:#111; border-radius:8px; }
.thumbs { display:flex; gap:6px; overflow-x:auto; padding:6px 0; }
.thumbs img { height:64px; border-radius:4px; cursor:pointer; flex:none; }
.hint { color:var(--muted); font-size:12px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { width:42%; color:var(--muted); font-weight:500; }
.tag { display:inline-block; background:var(--accent2); color:var(--accent); padding:1px 6px; border-radius:4px; margin:1px; font-size:12px; }
.remark { white-space:pre-wrap; background:#f9fafb; padding:10px; border-radius:6px; }
details { margin-top:16px; } summary { cursor:pointer; font-weight:600; }
.raw { font-size:12px; font-family:ui-monospace, Consolas, monospace; } .raw th { width:30%; } .raw td { word-break:break-all; } .raw em { color:var(--accent); }
.scraper { max-width:640px; } .scraper h2 { margin-top:0; font-size:18px; }
.scraper .check { flex-direction:row; align-items:center; gap:6px; align-self:end; padding-bottom:8px; }
.log { background:#0f172a; color:#d1fae5; padding:10px; border-radius:6px; height:180px; overflow:auto; font-size:12px; white-space:pre-wrap; }
.actions { display:flex; gap:8px; justify-content:flex-end; }
.scraper .btn.ghost { color:var(--ink); }
@media (max-width:800px) { .layout { grid-template-columns:1fr; } .filters { position:static; } .cols { grid-template-columns:1fr; } }