:root { color-scheme: light; --ink:#172033; --muted:#687386; --paper:#f7f8fc; --card:#fff; --line:#e4e8f0; --accent:#6258e8; --accent-dark:#493fc8; --mint:#dff7ed; --coral:#ff7e61; --shadow:0 16px 40px rgba(26,35,64,.08); }
* { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { background:var(--paper); color:var(--ink); }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar { display:flex; align-items:center; gap:1rem; padding:0 1rem; background:rgba(247,248,252,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.04em; text-decoration:none; font-size:1.15rem; }
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.7rem; color:#fff; background:var(--accent); font-size:1rem; }
.topbar-note { color:var(--muted); font-size:.8rem; margin-left:auto; }.theme-toggle { border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink); }
.hero { padding-top:clamp(3rem,9vw,7rem); padding-bottom:3rem; }.eyebrow { color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; }.live-dot { display:inline-block; width:.45rem; height:.45rem; margin-left:.35rem; border-radius:50%; background:#2ac27d; }
h1 { max-width:700px; margin:.9rem 0 1rem; font-size:clamp(2.8rem,7vw,5.8rem); line-height:.96; letter-spacing:-.07em; }.hero h1 em { color:var(--accent); font-style:normal; }.hero-copy { color:var(--muted); font-size:1.05rem; line-height:1.6; }
.search-form { display:flex; align-items:center; max-width:680px; margin-top:2rem; padding:.35rem .35rem .35rem 1rem; gap:.75rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow); }.search-icon { color:var(--accent); font-size:1.5rem; }.search-form input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); }.search-form button,.outline-button { border:0; border-radius:.7rem; padding:0 1.25rem; min-height:44px; background:var(--accent); color:#fff; font-weight:800; cursor:pointer; }.quick-searches { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; color:var(--muted); font-size:.85rem; }.quick-searches button,.text-button { min-width:auto; border:0; background:transparent; color:var(--accent); font-weight:700; cursor:pointer; }
.workspace,.favorites-section,.compare-panel { padding-bottom:4rem; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }.section-heading h2 { margin:.35rem 0 0; font-size:1.6rem; letter-spacing:-.04em; }.result-count,.favorite-count { color:var(--muted); font-size:.85rem; }.product-grid,.favorites-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }.product-card { position:relative; min-width:0; padding:1.25rem; border:1px solid var(--line); border-radius:1rem; background:var(--card); box-shadow:0 7px 20px rgba(26,35,64,.04); }.product-card:hover { border-color:#bbb5ff; }.card-top { display:flex; gap:.8rem; align-items:center; }.product-logo { display:grid; place-items:center; flex:none; width:2.7rem; height:2.7rem; border-radius:.8rem; color:#fff; background:linear-gradient(135deg,var(--accent),#9d90ff); font-size:1.15rem; font-weight:800; }.product-name { margin:0; font-size:1.08rem; }.category { margin:.2rem 0 0; color:var(--muted); font-size:.75rem; }.heart { margin-left:auto; min-width:44px; border:0; background:transparent; color:#98a1b4; font-size:1.5rem; cursor:pointer; }.heart.is-favorite { color:var(--coral); }.price-row { display:flex; align-items:baseline; gap:.35rem; margin:1.25rem 0 .6rem; }.price { font-size:1.8rem; font-weight:850; letter-spacing:-.05em; }.price-label { color:var(--muted); font-size:.78rem; }.free-badge { display:inline-block; padding:.25rem .5rem; border-radius:999px; background:var(--mint); color:#14734d; font-size:.7rem; font-weight:800; }.verified { margin-top:1rem; color:var(--muted); font-size:.72rem; }.card-actions { display:flex; gap:.5rem; margin-top:1rem; }.card-actions button,.card-actions a { flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:.65rem; border:1px solid var(--line); background:transparent; color:var(--ink); text-decoration:none; font-size:.8rem; font-weight:750; cursor:pointer; }.card-actions .add-compare { background:#f0efff; border-color:#dedbff; color:var(--accent-dark); }.status { margin-bottom:1rem; padding:1rem; border-radius:.75rem; background:#fff5e5; color:#75551b; }.compare-panel { padding-top:1rem; }.compare-table { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:1rem; overflow:hidden; }.compare-column { padding:1.1rem; background:var(--card); }.compare-column h3 { margin:.4rem 0 1.5rem; }.compare-column dt { color:var(--muted); font-size:.75rem; }.compare-column dd { margin:.2rem 0 1.1rem; font-weight:700; }.favorites-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; padding:1rem; border:1px dashed #ccd2df; border-radius:1rem; color:var(--muted); text-align:center; }.empty-icon { color:#c2c8d5; font-size:2.5rem; }.outline-button { background:transparent; color:var(--accent); border:1px solid #bbb5ff; }.attribution { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:6rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }.attribution p { margin:0; }.attribution a { color:var(--accent); font-weight:700; }.api-badge { padding:.35rem .55rem; border-radius:.4rem; color:var(--accent); background:#e9e7ff; font-weight:800; }.bottom-nav { padding:0 .75rem; background:rgba(255,255,255,.95); border-top:1px solid var(--line); }.bottom-nav a { color:var(--muted); text-decoration:none; }.bottom-nav a[aria-current=page] { color:var(--accent); }.bottom-nav span { font-size:1.15rem; }.bottom-nav small { font-size:.7rem; font-weight:700; }.bottom-nav b { font-size:.65rem; }.ios-dialog { max-width:340px; border:0; border-radius:1.25rem; padding:1.5rem; color:var(--ink); box-shadow:var(--shadow); }.ios-dialog::backdrop { background:rgba(12,18,33,.45); }.dialog-close { float:right; border:0; background:transparent; font-size:1.5rem; }.dialog-icon { color:var(--accent); font-size:2rem; }.ios-dialog p { color:var(--muted); line-height:1.55; }
@media (min-width:641px) { .hero,.workspace,.favorites-section,.compare-panel,.attribution { padding-left:2rem; padding-right:2rem; }.hero-copy { font-size:1.15rem; } }
@media (min-width:1025px) { .topbar { padding:1rem max(2rem,calc((100% - 1216px)/2)); }.bottom-nav { padding-left:max(2rem,calc((100% - 1216px)/2)); padding-right:max(2rem,calc((100% - 1216px)/2)); }.hero { padding-top:7rem; } }
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --ink:#edf0f8; --muted:#9aa5ba; --paper:#101827; --card:#172236; --line:#2b3850; --shadow:0 16px 40px rgba(0,0,0,.2); }.topbar,.bottom-nav { background:rgba(16,24,39,.92); }.search-form,.product-card,.compare-column,.favorites-empty { background:var(--card); }.search-form input { color:var(--ink); }.card-actions .add-compare { background:#292b59; } }
.force-dark { color-scheme:dark; --ink:#edf0f8; --muted:#9aa5ba; --paper:#101827; --card:#172236; --line:#2b3850; --shadow:0 16px 40px rgba(0,0,0,.2); }.force-dark .topbar,.force-dark .bottom-nav { background:rgba(16,24,39,.92); }.force-dark .search-form,.force-dark .product-card,.force-dark .compare-column,.force-dark .favorites-empty { background:var(--card); }.force-dark .search-form input { color:var(--ink); }.keyboard-open .app-bottom-bar { transform:translateY(110%); }
.community-link { color:var(--accent); font-size:.8rem; font-weight:800; text-decoration:none; }
.ranking-section { padding-bottom:4rem; }
.top-list { display:grid; gap:.65rem; }
.top-row { display:grid; grid-template-columns:2.2rem 2.7rem minmax(0,1fr) auto auto 2.75rem 2.75rem; align-items:center; gap:.75rem; min-width:0; padding:.7rem .85rem; border:1px solid var(--line); border-radius:.9rem; background:var(--card); }
.rank { color:var(--accent); font-size:.85rem; font-weight:850; }.top-row .product-logo { width:2.7rem; height:2.7rem; }.top-name h3 { margin:0; font-size:.95rem; }.top-name span,.top-price span { color:var(--muted); font-size:.72rem; }.top-price { display:flex; align-items:baseline; gap:.3rem; }.top-price strong { font-size:1rem; }.rank-compare { min-width:44px; border:1px solid #d1cdfc; border-radius:.6rem; background:#f0efff; color:var(--accent-dark); font-size:1.25rem; cursor:pointer; }
@media (min-width:641px) { .ranking-section { padding-left:2rem; padding-right:2rem; } }
@media (max-width:640px) { .top-row { grid-template-columns:1.7rem 2.4rem minmax(0,1fr) 2.75rem 2.75rem; gap:.5rem; }.top-row .product-logo { width:2.4rem; height:2.4rem; }.top-price,.top-row .free-badge { display:none; } }
.community-page { padding-top:clamp(3rem,7vw,6rem); padding-bottom:6rem; }.community-intro { margin-bottom:3rem; }.community-intro h1 { font-size:clamp(2.5rem,6vw,4.5rem); }.community-intro h1 em { color:var(--accent); font-style:normal; }.comment-layout { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:3rem; align-items:start; }.comment-form { display:grid; gap:.55rem; padding:1.25rem; border:1px solid var(--line); border-radius:1rem; background:var(--card); box-shadow:var(--shadow); }.comment-form h2 { margin:.1rem 0 1rem; font-size:1.35rem; letter-spacing:-.04em; }.comment-form label { margin-top:.4rem; color:var(--muted); font-size:.78rem; font-weight:700; }.comment-form input,.comment-form select,.comment-form textarea { width:100%; padding:.75rem .8rem; border:1px solid var(--line); border-radius:.6rem; background:var(--paper); color:var(--ink); font:inherit; resize:vertical; }.comment-form button { margin-top:.6rem; border:0; border-radius:.65rem; background:var(--accent); color:#fff; font-weight:800; cursor:pointer; }.comment-form button:disabled { opacity:.6; cursor:wait; }.form-note { margin:.2rem 0 0; color:var(--muted); font-size:.72rem; line-height:1.4; }.comment-feed { display:grid; gap:.75rem; }.comment-card { padding:1rem 1.1rem; border:1px solid var(--line); border-radius:.9rem; background:var(--card); }.comment-meta { display:flex; align-items:center; gap:.65rem; }.comment-avatar { display:grid; place-items:center; flex:none; width:2.2rem; height:2.2rem; border-radius:50%; background:#e9e7ff; color:var(--accent-dark); font-size:.7rem; font-weight:850; }.comment-meta div { display:grid; gap:.15rem; min-width:0; }.comment-meta div span { color:var(--muted); font-size:.7rem; }.comment-meta a { margin-left:auto; color:var(--accent); font-size:.75rem; font-weight:750; text-align:right; }.comment-card p { margin:.9rem 0 .2rem; color:var(--ink); line-height:1.6; }.comments-empty { padding:2rem 1rem; border:1px dashed #ccd2df; border-radius:1rem; color:var(--muted); text-align:center; }
@media (max-width:640px) { .comment-layout { grid-template-columns:1fr; gap:2rem; }.comment-meta { align-items:flex-start; }.comment-meta a { max-width:8rem; }.community-page { padding-bottom:5rem; } }