/* Modern Calculator Skin (2025) — shared for all calculators  */
:root {
  --bg:#fff; --text:#0f172a; --muted:#475569; --line:#e5e7eb; --card:#fff; --accent:#5b8cff;
}
@media (prefers-color-scheme: dark){
  :root { --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2937; --card:#0f182b; --accent:#7aa2ff; }
}
/* Wrapper */
.nw-calc { display:block; }
.nw-calc .nw-card { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:16px; margin:16px 0; box-shadow:0 8px 24px rgba(2,6,23,.06); }

/* Form Grid */
.nw-form { display:grid; gap:12px; grid-template-columns: 1fr; }
@media(min-width:720px){ .nw-form { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.nw-field { display:flex; flex-direction:column; gap:6px; }
.nw-field label { font-weight:700; font-size:.95rem; }
.nw-field input, .nw-field select {
  border:1px solid var(--line); background:var(--bg); color:var(--text);
  border-radius:12px; padding:12px 14px; outline:none;
}
.nw-field input:focus, .nw-field select:focus { border-color: color-mix(in oklab, var(--accent) 60%, var(--line)); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 15%, transparent); }

/* Actions */
.nw-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.nw-btn { display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--line); color:var(--text); text-decoration:none; background:var(--card); cursor:pointer; }
.nw-btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Result summary */
.nw-result { display:flex; flex-direction:column; gap:10px; }
.nw-result .nw-value { font-size:clamp(22px, 4vw, 32px); font-weight:900; }
.nw-kv { display:grid; grid-template-columns: 1fr auto; gap:6px; }
.nw-kv div:nth-child(odd){ color:var(--muted); }
.nw-kv div:nth-child(even){ font-weight:700; }

/* Result bar */
.nw-bar { position:relative; height:16px; border-radius:999px; background:color-mix(in oklab, var(--line) 60%, transparent); overflow:hidden; }
.nw-bar__seg { position:absolute; top:0; bottom:0; left:0; width:0; }
.nw-bar__seg--1 { background:#60a5fa; } /* blue */
.nw-bar__seg--2 { background:#f97316; } /* orange */
.nw-bar__seg--3 { background:#10b981; } /* green */
.nw-bar__seg--4 { background:#e879f9; } /* purple */
.nw-bar__seg--5 { background:#ef4444; } /* red */

/* Helper rows under bar */
.nw-bar-legend { display:flex; gap:10px; flex-wrap:wrap; font-size:.9rem; color:var(--muted) }
.nw-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle}
.nw-dot--1{background:#60a5fa}.nw-dot--2{background:#f97316}.nw-dot--3{background:#10b981}.nw-dot--4{background:#e879f9}.nw-dot--5{background:#ef4444}

/* Notes */
.nw-note{ color:var(--muted); font-size:.9rem; }