.svk-eiwitmeter { --bg:#0b0f14; --card:#131a22; --muted:#c8d1da; --pri:#2dd4bf; --txt:#ffffff; --err:#ef4444; }
.svk-eiwitmeter *{box-sizing:border-box}
.svk-eiwitmeter{width:100%; color: var(--txt);}
.svk-eiwitmeter .wrap{max-width:900px; margin:32px auto; padding:0 16px}
.svk-eiwitmeter .card{background:var(--card); border:1px solid #1f2937; border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.25); color:var(--txt)}
.svk-eiwitmeter p.lead{margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.5}
.svk-eiwitmeter .grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:900px){ .svk-eiwitmeter .grid{grid-template-columns:1.1fr .9fr} }
.svk-eiwitmeter label{display:block; font-weight:600; margin:0 0 6px; font-size:14px}
.svk-eiwitmeter .row{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:680px){ .svk-eiwitmeter .row{grid-template-columns:1fr 1fr} }
.svk-eiwitmeter input, .svk-eiwitmeter select{width:100%; background:#0f1620; color:var(--txt); border:1px solid #263244; border-radius:12px; padding:12px 14px; font-size:16px}
.svk-eiwitmeter input[type="number"]{appearance:textfield}
.svk-eiwitmeter input[type="number"]::-webkit-outer-spin-button,
.svk-eiwitmeter input[type="number"]::-webkit-inner-spin-button{appearance:none;margin:0}
.svk-eiwitmeter input[type="range"]{accent-color:var(--pri); width:100%}
.svk-eiwitmeter .hint{font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5}
.svk-eiwitmeter .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; background:var(--pri); color:#083a35; font-weight:700; border:0; border-radius:12px; cursor:pointer; width:100%}
.svk-eiwitmeter .btn.secondary{background:#0f1620; color:#cfe7e4; border:1px solid #263244}
.svk-eiwitmeter .btn-group{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
@media(min-width:680px){ .svk-eiwitmeter .btn-group{grid-template-columns:max-content max-content} .svk-eiwitmeter .btn{width:auto} }
.svk-eiwitmeter .out{background:#0f1620; border:1px dashed #334155; border-radius:14px; padding:16px}
.svk-eiwitmeter .out h3{margin:0 0 6px; font-size:18px; color:#ffffff;}
.svk-eiwitmeter .muted{color:#b4becc}
.svk-eiwitmeter .pill{display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #2b3648; font-size:12px; color:#cdd6e3}
.svk-eiwitmeter .kpi{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
@media(min-width:520px){ .svk-eiwitmeter .kpi{grid-template-columns:repeat(3,1fr)} }
.svk-eiwitmeter .kpi .box{background:#0b111a; border:1px solid #223045; border-radius:12px; padding:12px}
.svk-eiwitmeter .kpi .big{font-size:22px; font-weight:800}
.svk-eiwitmeter .foot{font-size:12px; color:#9aa5b3}
.svk-eiwitmeter .err{color:var(--err); font-size:13px; margin-top:6px}
.svk-eiwitmeter details{background:#0b111a; border:1px solid #223045; border-radius:12px; padding:12px}
.svk-eiwitmeter details>summary{cursor:pointer; font-weight:700}

/* Better checkbox + label alignment */
.svk-eiwitmeter .checkline{display:flex; align-items:flex-start; gap:10px; margin-top:10px; cursor:pointer; user-select:none}
.svk-eiwitmeter .checkline input[type="checkbox"]{width:22px;height:22px; margin-top:2px; flex:0 0 22px}
.svk-eiwitmeter .checkline span{font-weight:500; line-height:1.4; flex:1; display:block}
