/* Sähkölaskuri Pro — premium calculator */
.slp{--slp-text:#0f172a;--slp-muted:#64748b;--slp-border:#e2e8f0;--slp-accent:#1F3A6E;--slp-accent2:#2E5BBA;
  --slp-energy:#2E5BBA;--slp-transfer:#16A34A;--slp-base:#B26A00;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--slp-text);max-width:920px;margin:0 auto}
.slp *{box-sizing:border-box}
.slp-card{background:#fff;border:1px solid var(--slp-border);border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,.08);overflow:hidden}
.slp-head{background:linear-gradient(135deg,#1F3A6E,#2E5BBA);color:#fff;padding:22px 24px}
.slp-title{margin:0;font-size:24px;font-weight:800;color:#fff}
.slp-sub{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.85);line-height:1.5}
.slp-body{display:grid;grid-template-columns:1.2fr 1fr;gap:0}
.slp-inputs{padding:22px 24px;border-right:1px solid var(--slp-border)}
.slp-field{margin-bottom:18px}
.slp-field>label{display:block;font-weight:700;font-size:13px;margin-bottom:8px;color:var(--slp-text)}
.slp-field small{display:block;color:var(--slp-muted);font-size:12px;margin-top:4px}
.slp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.slp input[type=text]{width:100%;padding:11px 12px;border:1px solid var(--slp-border);border-radius:10px;font-size:16px;font-weight:700;color:var(--slp-text);background:#fff}
.slp input[type=text]:focus{outline:none;border-color:var(--slp-accent2);box-shadow:0 0 0 3px rgba(46,91,186,.15)}
/* segmented */
.slp-seg{display:inline-flex;background:#f1f5f9;border-radius:10px;padding:4px;gap:4px;width:100%}
.slp-seg--sm{margin-top:10px;width:auto}
.slp-seg-btn,.slp-period-btn{flex:1;border:0;background:transparent;color:var(--slp-muted);font-weight:700;font-size:14px;padding:9px 14px;border-radius:8px;cursor:pointer;transition:.18s}
.slp-seg-btn.is-active,.slp-period-btn.is-active{background:#fff;color:var(--slp-accent);box-shadow:0 2px 6px rgba(15,23,42,.12)}
/* range */
.slp-kwh-range{width:100%;margin-top:12px;accent-color:var(--slp-accent2)}
/* result */
.slp-result{padding:24px;background:#f8fafc;display:flex;flex-direction:column}
.slp-total-label{color:var(--slp-muted);font-weight:700;font-size:13px}
.slp-total{font-size:44px;font-weight:900;color:var(--slp-accent);line-height:1.1;margin:4px 0}
.slp-total-alt{color:var(--slp-muted);font-weight:700;font-size:14px;margin-bottom:16px}
.slp-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:#e2e8f0;margin-bottom:14px}
.slp-bar span{display:block;height:100%}
.slp-bar-energy{background:var(--slp-energy)}
.slp-bar-transfer{background:var(--slp-transfer)}
.slp-bar-base{background:var(--slp-base)}
.slp-breakdown{list-style:none;margin:0;padding:0}
.slp-breakdown li{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px dashed var(--slp-border);font-weight:700;font-size:14px}
.slp-breakdown li:last-child{border-bottom:0}
.slp-breakdown li span:last-child{margin-left:auto;color:var(--slp-text);font-weight:800}
.slp-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.slp-dot--energy{background:var(--slp-energy)}
.slp-dot--transfer{background:var(--slp-transfer)}
.slp-dot--base{background:var(--slp-base)}
.slp-note{color:var(--slp-muted);font-size:12px;margin:14px 0 0;line-height:1.5}
@media(max-width:760px){
  .slp-body{grid-template-columns:1fr}
  .slp-inputs{border-right:0;border-bottom:1px solid var(--slp-border)}
  .slp-total{font-size:38px}
}