:root{--ink:#1c1917;--acc:#dc2626;--acc2:#facc15;--bg:#fafaf9}*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,system-ui,sans-serif;background:var(--bg);color:var(--ink)}.wrap{max-width:820px;margin:auto;padding:0 1rem}
header{background:#1c1917;color:#fafaf9;padding:2rem 0 3rem;border-bottom:6px solid var(--acc2)}.brand{font-size:2rem;font-weight:300;display:flex;align-items:center;gap:.6rem}.brand b{color:var(--acc2);font-weight:900}
.mark{background:var(--acc);color:#fff;font-weight:900;border-radius:8px;padding:.1rem .45rem;font-size:1.2rem}
.pricebar{background:#fff;border-radius:12px;margin:-1.6rem 0 1.4rem;padding:1rem;box-shadow:0 6px 20px #0002;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.pricebar select{flex:1;min-width:200px}.big{font-size:1.6rem;font-weight:800;color:var(--acc)}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap}.tabs button{border:0;background:#e7e5e4;padding:.7rem 1.1rem;border-radius:10px 10px 0 0;font:inherit;font-weight:600;cursor:pointer}.tabs button.on{background:#fff;color:var(--acc)}
.panel{display:none;background:#fff;padding:1.4rem;border-radius:0 12px 12px 12px}.panel.on{display:block}
.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem}label{font-size:.88rem;font-weight:600}
input,select{width:100%;padding:.6rem;border:2px solid #e7e5e4;border-radius:8px;font:inherit;margin-top:.25rem}input:focus{border-color:var(--acc);outline:0}
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-top:1.2rem}.o{background:#fef9c3;border-radius:10px;padding:.9rem}.o b{display:block;font-size:1.5rem}
.fine{color:#57534e;font-size:.9rem}.src{font-size:.85rem;color:#57534e;margin:1.5rem 0}footer{text-align:center;padding:2rem;color:#78716c}
.sub{margin:1.1rem 0 .4rem;font-size:1rem;color:var(--acc)}.tag{background:var(--acc2);border-radius:6px;padding:0 .35rem;font-size:.75rem}
input[type=range]{padding:0;accent-color:var(--acc)}
.cmpout{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-top:1.2rem}
.card{background:#f5f5f4;border-radius:10px;padding:.9rem;border:3px solid transparent}.card h4{margin:0 0 .4rem}.card div{display:flex;justify-content:space-between;font-size:.92rem;padding:.15rem 0}
.card.best{background:#fef9c3;border-color:var(--acc2)}.card .badge{display:inline-block;background:var(--acc);color:#fff;border-radius:6px;padding:0 .4rem;font-size:.75rem;margin-left:.3rem}
.chart{margin-top:1.2rem}.bar{display:grid;grid-template-columns:70px 1fr 80px;gap:.5rem;align-items:center;margin:.4rem 0;font-size:.9rem}
.bar i{display:block;height:26px;background:#1c1917;border-radius:6px}.bar.best i{background:var(--acc)}.bar span:last-child{text-align:right;font-weight:700}
@media(max-width:520px){.tabs button{flex:1 1 45%;border-radius:10px;padding:.6rem}.panel{border-radius:12px}.brand{font-size:1.6rem}}