/* Base reset */
* {margin:0;padding:0;box-sizing:border-box;}
html {font-size:16px;}
body {font-family:-apple-system, "Segoe UI", Roboto, Arial, sans-serif;background:#f6f7fb;color:#212529;line-height:1.5;}

header.header {text-align:center;padding:1.5rem;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:1rem;}
header.header h1 {font-size:2rem;color:#4f46e5;}
header.header .tagline {font-size:1rem;color:#555;margin-top:0.5rem;}

.container {display:flex;flex-wrap:wrap;gap:1rem;max-width:1200px;margin:0 auto;padding:0 1rem;}
.card {background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.1);flex:1 1 300px;}
.inputs h2 {margin-bottom:1rem;}
.tool-list {margin-bottom:1rem;}
.tool-item {display:flex;align-items:center;margin-bottom:0.5rem;}
.tool-item input[type="checkbox"] {margin-right:0.5rem;}
.tool-item .tool-name {flex:1;}
.tool-item .tool-price {width:80px;margin-left:0.5rem;}
.tool-item .remove-btn {background:none;border:none;color:#dc2626;font-weight:bold;margin-left:0.5rem;cursor:pointer;}
.custom-tool {display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;}
.custom-tool input {flex:1;}
.custom-tool button {white-space:nowrap;}
label {display:block;margin-top:0.75rem;font-weight:600;}
input[type="number"], input[type="range"] {width:100%;margin-top:0.25rem;padding:0.4rem;border:1px solid #ccc;border-radius:4px;}

.presets {display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem;}
.presets .btn {flex:1 1 auto;background:#4f46e5;color:#fff;padding:0.5rem 0.75rem;border:none;border-radius:4px;cursor:pointer;}
.presets .reset {background:#dc2626;}

.results .verdict {padding:0.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-weight:600;color:#fff;}
.result-row {margin-bottom:0.5rem;}
.result-row.big {font-size:1.75rem;font-weight:bold;}
.result-row.big.negative {color:#dc2626;}
.result-row.big.positive {color:#16a34a;}

.bars {display:flex;gap:0.5rem;margin:1rem 0;align-items:center;}
.bar {height:24px;border-radius:4px;position:relative;flex:1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.85rem;}
.bar.cost {background:#f87171;}
.bar.value {background:#34d399;}
.bar .label {position:absolute;left:0.5rem;}

.btn.copy {background:#4f46e5;color:#fff;padding:0.5rem 1rem;border:none;border-radius:4px;cursor:pointer;}

.seo {max-width:800px;margin:2rem auto;padding:0 1rem;}
.seo h2 {margin-top:2rem;}
.formula-box {background:#e5e7eb;padding:1rem;margin:0.5rem 0;border-radius:8px;font-family:monospace;}
footer {text-align:center;padding:1rem;margin-top:2rem;background:#fff;}

@media (max-width:900px) {
  .container {flex-direction:column;}
}