:root{
--bg:#0f0f0f;--bg2:#1a1a1a;--bg3:#242424;--bg4:#2e2e2e;
--border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.05);
--text:#f0efea;--text2:#9a9a92;--text3:#5a5a54;
--purple:#7B6FC4;--purple2:#534AB7;--purple-bg:rgba(123,111,196,0.1);--purple-border:rgba(123,111,196,0.35);
--teal:#1D9E75;--teal-bg:rgba(29,158,117,0.1);--teal-border:rgba(29,158,117,0.3);--teal-text:#5DCAA5;
--amber:#EF9F27;--amber-bg:rgba(239,159,39,0.1);--amber-border:rgba(239,159,39,0.3);
--red:#E24B4A;--red-bg:rgba(226,75,74,0.1);--red-border:rgba(226,75,74,0.3);
--blue-bg:rgba(55,138,221,0.1);--blue-border:rgba(55,138,221,0.3);--blue-text:#85B7EB;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}

.wb-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:0.5px solid var(--border);position:sticky;top:0;background:rgba(15,15,15,0.96);backdrop-filter:blur(12px);z-index:200}
.wb-logo{font-size:18px;font-weight:600;letter-spacing:-0.5px}.wb-logo span{color:var(--purple)}
.wb-nav-links{display:flex;gap:20px;font-size:13px;color:var(--text2)}
.wb-nav-links a:hover{color:var(--text)}

.wb-bc{padding:10px 32px;font-size:12px;color:var(--text3);border-bottom:0.5px solid var(--border2)}
.wb-bc a{color:var(--text2)}.wb-bc a:hover{color:var(--purple)}

.wb-footer{padding:14px 32px;border-top:0.5px solid var(--border2);display:flex;justify-content:space-between;font-size:11px;color:var(--text3)}

.badge{display:inline-flex;align-items:center;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500;white-space:nowrap}
.badge-top{background:var(--purple-bg);color:#AFA9EC;border:0.5px solid var(--purple-border)}
.badge-diy{background:var(--teal-bg);color:var(--teal-text);border:0.5px solid var(--teal-border)}
.badge-budget{background:var(--amber-bg);color:var(--amber);border:0.5px solid var(--amber-border)}
.badge-shift{background:var(--blue-bg);color:var(--blue-text);border:0.5px solid var(--blue-border)}
.badge-value{background:var(--teal-bg);color:var(--teal-text);border:0.5px solid var(--teal-border)}
.badge-finish{background:rgba(93,78,140,0.2);color:#B09EE0;border:0.5px solid rgba(93,78,140,0.4)}

.pill{font-size:11px;padding:3px 10px;border-radius:20px;border:0.5px solid var(--border)}
.pill.finish{background:var(--purple-bg);border-color:var(--purple-border);color:#AFA9EC}
.pill.type{background:var(--teal-bg);border-color:var(--teal-border);color:var(--teal-text)}
.pill.trend{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}

.stars{color:var(--amber);font-size:13px;letter-spacing:1px}
.pips{display:flex;gap:2px;justify-content:center}
.pip{width:9px;height:9px;border-radius:2px}
.pip.on{background:var(--purple)}.pip.off{background:var(--bg4)}
.pip-lbl{font-size:9px;color:var(--text3);text-align:center;margin-top:3px}

.btn-compare{background:transparent;border:0.5px solid var(--border);border-radius:8px;padding:7px 14px;font-size:12px;cursor:pointer;color:var(--text2);transition:all 0.15s}
.btn-compare:hover{border-color:var(--amber);color:var(--amber)}
.btn-compare.active{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}

.compare-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(20,16,35,0.97);backdrop-filter:blur(16px);border-top:1px solid var(--amber);padding:12px 32px;display:flex;align-items:center;gap:14px;z-index:300;transform:translateY(100%);transition:transform 0.3s}
.compare-bar.visible{transform:translateY(0)}
.cb-brands{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.cb-brand-pill{display:flex;align-items:center;gap:6px;background:var(--bg3);border:0.5px solid var(--border);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:500}
.cb-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.cb-remove{font-size:10px;color:var(--text3);cursor:pointer;margin-left:2px}
.cb-remove:hover{color:var(--red)}
.cb-slot{border:0.5px dashed var(--border);border-radius:20px;padding:4px 14px;font-size:11px;color:var(--text3)}
.cb-compare-btn{background:var(--amber);color:#000;border:none;border-radius:8px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.cb-clear{font-size:11px;color:var(--text3);cursor:pointer;white-space:nowrap}

@media(max-width:768px){
.wb-nav{padding:12px 16px}.wb-nav-links{display:none}
.wb-bc{padding:8px 16px}
}