/* SymPRM Kardio-sym: wyglad przodu urzadzenia i uklad strony. Reguly formularzy jak w symulator.css (respirator). */
html[data-app="kardio"]:not(#_){--accent:#ff6b6b; --accent-ink:#2a0707; --accent-wash:rgba(255,107,107,.13);}

.seg{display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r); overflow:hidden; margin-bottom:14px;}
.calc-field select{width:100%; padding:8px 10px;}
.calc-field input[type="range"]{width:100%; accent-color:var(--accent);}
.calc-field{display:block; margin:10px 0;}
.scen-opis{font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:8px 0 12px;}
.tgl{display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; cursor:pointer;}
.tgl input{width:20px; height:20px; accent-color:var(--accent); flex:none;}
.sciaga{margin:0; display:grid; grid-template-columns:1fr; gap:4px 14px; font-size:13.5px; line-height:1.55;}
.sciaga dt{font-weight:700; color:var(--accent); margin-top:10px;} .sciaga dd{margin:0; color:var(--ink-2);}
.log{list-style:none; margin:0 0 6px; padding:0; max-height:240px; overflow:auto; font-size:13px; line-height:1.6;}
.log time{color:var(--muted); margin-right:6px; font-variant-numeric:tabular-nums;}
.kd-zal{margin:0 0 12px; padding-left:18px; line-height:1.55; color:var(--ink-2);}
.kd-reset{margin-top:14px;}
.fb{font-size:13.5px; line-height:1.5; color:var(--ink-2); margin-top:10px; min-height:20px;}
.fb.good{color:var(--good);} .fb.bad{color:var(--bad);}

.kd-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; margin-top:14px;}
.kd-col{display:flex; flex-direction:column; gap:14px;}
.kd-cols .panel, .kd-col .panel{margin:0;}
#view > .panel{margin-top:14px;}

/* ---------- przod urzadzenia ---------- */
.lp-body{display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:14px; background:#34383c; border:1px solid #4a4f54; border-radius:18px; padding:14px; margin-top:12px; box-shadow:0 10px 30px rgba(0,0,0,.45);}
.lp-bezel{position:relative; background:#0a0a0a; border-radius:12px; padding:12px 12px 26px; border:2px solid #1d1f21; align-self:start;}
.lp-screen{display:block; width:100%; height:auto; aspect-ratio:4/3; background:#000; border-radius:4px;}
.lp-sticker{position:absolute; left:16px; bottom:6px; font-size:10px; letter-spacing:.14em; color:#8b9097; font-weight:600;}
.lp-ctrl{display:flex; flex-direction:column; gap:12px;}
.lp-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;}
.lp-btn{position:relative; appearance:none; min-height:44px; border:1px solid #5a5f65; border-radius:9px; background:linear-gradient(#4a4f55,#3a3e43); color:#e8ecef; font-weight:700; font-size:11.5px; letter-spacing:.04em; cursor:pointer; padding:8px 4px 6px; touch-action:manipulation; user-select:none;}
.lp-btn:hover:not([disabled]){border-color:#8b9299;}
.lp-btn.down{background:linear-gradient(#34383c,#2b2e32); transform:translateY(1px);}
.lp-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.lp-btn.lp-off{opacity:.38; cursor:not-allowed;}
.lp-led{position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%; background:#1d2023; box-shadow:inset 0 0 0 1px #000;}
.lp-btn.lit .lp-led{background:#35e36a; box-shadow:0 0 8px #35e36a;}
.lp-btn.blink .lp-led{animation:lpblink 1s steps(2,jump-none) infinite;}
.lp-shock.lit .lp-led, .lp-shock.blink .lp-led{background:#ffe14d; box-shadow:0 0 10px #ffe14d;}
.lp-alarms.blink .lp-led{background:#ff4b3e; box-shadow:0 0 10px #ff4b3e;}
@keyframes lpblink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.lp-btn.blink .lp-led{animation:none}}
.lp-on{background:linear-gradient(#6a2a2a,#4e1f1f); border-color:#8a3a3a;}
.lp-shock{grid-column:span 2; background:linear-gradient(#f0701e,#c9540d); border-color:#ff9a55; color:#fff; font-size:14px; min-height:54px;}
.lp-charge{background:linear-gradient(#5b5f64,#45494e);}
.lp-home{grid-column:span 3;}

.lp-dial{display:grid; grid-template-columns:1fr 2fr 1fr; gap:8px; align-items:stretch;}
.lp-dial button{appearance:none; border:1px solid #5a5f65; background:linear-gradient(#4a4f55,#3a3e43); color:#e8ecef; font-weight:700; cursor:pointer; min-height:56px;}
.lp-d-l{border-radius:28px 8px 8px 28px; font-size:18px;} .lp-d-r{border-radius:8px 28px 28px 8px; font-size:18px;}
.lp-d-p{border-radius:28px; font-size:11px; letter-spacing:.12em;}
.lp-dial button:hover{border-color:#8b9299;} .lp-dial button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.lp-tip{margin:0;}

@media (max-width:860px){
  .lp-body{grid-template-columns:1fr;}
  .lp-btns{grid-template-columns:repeat(4,1fr);}
  .lp-shock{grid-column:span 2;} .lp-home{grid-column:span 4;}
  .kd-cols{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .lp-btns{grid-template-columns:repeat(3,1fr);} .lp-home{grid-column:span 3;}
  .lp-body{padding:10px; border-radius:14px;}
}