:root{
  --bg:#0b1220;
  --bg2:#162447;
  --panel:rgba(18,27,46,.85);
  --card:rgba(18,27,46,.7);
  --muted:#a9b4cc;
  --text:#eef2ff;
  --accent:#6ee7ff;
  --border:rgba(255,255,255,.10);
  --input:#0f1830;
}

:root[data-theme="light"]{
  --bg:#f7f9ff;
  --bg2:#e9efff;
  --panel:rgba(255,255,255,.92);
  --card:rgba(255,255,255,.9);
  --muted:#4a5876;
  --text:#0b1220;
  --accent:#0066ff;
  --border:rgba(11,18,32,.12);
  --input:#f1f4ff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 700px at 20% 0%, var(--bg2) 0%, var(--bg) 60%);
  color:var(--text);
}

.container{max-width:1020px;margin:0 auto;padding:24px;}
.header{margin-bottom:12px;}
.headerRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
h1{margin:0 0 6px;font-size:30px;}
.sub{margin:0;color:var(--muted);}

.themeToggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;user-select:none;}
.themeToggle:hover{border-color: color-mix(in srgb, var(--accent) 35%, var(--border));}
.themeIcon{font-size:16px;}
.themeText{font-size:13px;color:var(--muted);}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;backdrop-filter: blur(10px);}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;}
.rowCompact{align-items:center;}
label{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1;color:var(--muted);font-size:14px;}
.precisionLabel{min-width:260px;flex:0 0 260px;}
.precisionHint{color:var(--muted);font-size:13px;flex:2;min-width:260px;}
select,input[type="number"]{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--input);color:var(--text);outline:none;}
.valueBox{display:flex;gap:10px;align-items:center;}
.badge{display:inline-flex;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent);min-width:72px;justify-content:center;}
input[type="range"]{width:100%;accent-color:var(--accent);}
.sliderMeta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:6px;}
.hint{color:var(--muted);font-size:13px;flex:2;min-width:260px;margin-bottom:4px;}

.results{margin-top:16px;}
.resultsHeader{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
h2{margin:0;font-size:18px;}
.meta{color:var(--muted);font-size:13px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;}
.unitName{color:var(--muted);font-size:13px;margin-bottom:6px;}
.unitValue{font-size:18px;font-weight:650;letter-spacing:.2px;}
.note{margin-top:12px;color:var(--muted);font-size:12.5px;}

.adSlot{margin:14px 0;}
.adPlaceholder{border:1px dashed color-mix(in srgb, var(--muted) 55%, transparent);border-radius:14px;padding:16px;color:var(--muted);
  background: color-mix(in srgb, var(--panel) 50%, transparent);text-align:center;font-size:13px;}

.footer{margin-top:18px;color:var(--muted);text-align:center;}

.homeLink{text-decoration:none;color:inherit;}