/* Symulator respiratora - widoki i urzadzenie MEDUMAT Standard2. Ladowany po ui.css. */
html[data-app="symulator"]:not(#_){--accent:#fb923c; --accent-ink:#2a1203; --accent-wash:rgba(251,146,60,.13);}
.muted{color:var(--muted);} .small{font-size:13px; line-height:1.55;}

/* ---------- lista modeli ---------- */
.model-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px;}
.model-card{display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:var(--r); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); text-decoration:none; transition:border-color .12s, background .12s;}
.model-card:hover{border-color:var(--accent); background:var(--surface-3);}
.model-card b{font-size:18px; font-weight:750; letter-spacing:-.01em;}
.model-card p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.5;}
.model-firma{font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.model-cta{margin-top:auto; padding-top:6px; font-weight:700; color:var(--accent); font-size:14px;}
.model-card.soon{opacity:.55; cursor:default;} .model-card.soon .model-cta{color:var(--muted);}

/* ---------- uklad widoku urzadzenia ---------- */
.dev-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:12px;}
.dev-title{margin:0; font-size:24px;}
.seg{display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r); overflow:hidden; margin-bottom:14px;}
.seg-b{border:0; background:transparent; color:var(--muted); font-weight:650; font-size:14px; padding:10px 14px; min-height:44px; cursor:pointer;}
.seg-b[aria-selected="true"]{background:var(--accent); color:var(--accent-ink);}
.dev-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start; margin-bottom:16px;}
.dev-col{display:flex; flex-direction:column; gap:12px; min-width:0;}
.dev-panel{display:flex; flex-direction:column; gap:12px; min-width:0;}
.dev-panel .panel{padding:16px;}
@media (max-width:900px){ .dev-grid{grid-template-columns:1fr;} }

/* ---------- monitor pacjenta i krzywa ---------- */
.mon, .kv-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:10px 0;}
.tile-m{background:#000; border:1px solid var(--border); border-radius:var(--r); padding:8px 10px; min-width:0;}
.tile-m .l{display:block; font-size:10px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tile-m b{display:block; font-size:24px; font-weight:750; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kv-row .tile-m b{font-size:17px;}
.tile-m .u{font-size:11px; color:var(--muted);}
.wave{width:100%; height:auto; border-radius:var(--r); border:1px solid var(--border); display:block; background:#000;}
.scen-opis{font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:8px 0 0;}
.calc-field select{width:100%; padding:8px 10px;}
@media (max-width:520px){ .mon, .kv-row{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* przelaczniki */
.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);}
.ev{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px 12px;}

/* akcesoria: MEDUtrigger, butla, zasilanie */
.acc{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap;}
.trig{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:150px; min-height:72px; padding:10px 16px; border-radius:36px; border:2px solid #3a434b; background:linear-gradient(#2a3137,#1a1f23); color:var(--ink); cursor:pointer; touch-action:none; user-select:none;}
.trig b{font-size:14px;} .trig small{font-size:11px; color:var(--muted);}
.trig-led{width:10px; height:10px; border-radius:50%; background:#1d3b25; box-shadow:inset 0 0 2px #000;}
.trig.on{border-color:var(--good); background:linear-gradient(#1f3a2a,#14241a);} .trig.on .trig-led{background:var(--good); box-shadow:0 0 8px var(--good);}
.acc-sw{display:flex; flex-direction:column; justify-content:center;}

.sciaga{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:13.5px; line-height:1.5;}
.sciaga dt{font-weight:700; color:var(--accent); white-space:nowrap;} .sciaga dd{margin:0; color:var(--ink-2);}
@media (max-width:520px){ .sciaga{grid-template-columns:1fr;} .sciaga dd{margin-bottom:6px;} }
.log{list-style:none; margin:0 0 16px; padding:0; max-height:220px; overflow:auto; font-size:13px; line-height:1.6;}
.log time{color:var(--muted); margin-right:6px;}

/* =================== URZADZENIE =================== */
.mm2{--dev:#e7e9ea; --face:#d4d7d9; width:100%; max-width:600px; margin:0 auto; position:relative; user-select:none; -webkit-user-select:none;}
.mm2-top{height:10px; display:flex; justify-content:center; position:relative; z-index:1; margin-bottom:-2px;}
.mm2-lamp{width:30%; height:10px; border-radius:6px 6px 0 0; background:linear-gradient(#6b5555,#3d2f2f); box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
.mm2-lamp.on{background:#ff3b3b; box-shadow:0 0 18px 4px rgba(255,59,59,.7);}
.mm2-face{display:grid; grid-template-columns:1fr 64px; gap:0; background:linear-gradient(#eef0f1,#cfd3d6); border-radius:18px; padding:12px 10px 14px 14px; box-shadow:0 0 0 2px #9ea4a9 inset, 0 10px 30px -12px rgba(0,0,0,.8);}
.mm2-left{min-width:0;}
.mm2-label{display:flex; justify-content:space-between; align-items:baseline; padding:0 4px 6px; color:#222;}
.mm2-brand{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#555;}
.mm2-model{font-size:12px; font-weight:700; color:#222;}
.mm2-screen-wrap{position:relative; width:100%; aspect-ratio:4/3; background:#111; border-radius:6px; padding:4px; box-shadow:inset 0 0 0 2px #444;}
.mm2-screen{position:absolute; left:4px; top:4px; width:320px; height:240px; transform-origin:0 0; overflow:hidden; background:#fff; color:#000;}
.mm2-screen.off{background:#0b0c0d;}
.mm2-knobs{display:grid; grid-template-columns:repeat(3,1fr); margin-top:10px;}
.mm2-knob-col{display:flex; flex-direction:column; align-items:center; gap:6px;}
.mm2-knob{width:clamp(48px,13vw,66px); aspect-ratio:1; border-radius:50%; border:3px solid #2b2f33; cursor:pointer; touch-action:none; position:relative;
  background:radial-gradient(circle at 50% 40%,#6d757c 0,#3c4247 55%,#24282c 100%); box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,255,255,.08);}
.mm2-knob::before{content:""; position:absolute; inset:8%; border-radius:50%; background:repeating-conic-gradient(rgba(255,255,255,.14) 0 6deg, transparent 6deg 18deg);}
.mm2-knob-dot{position:absolute; left:50%; top:10%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#cfd3d6;}
.mm2-knob:active{transform:scale(.96);}
.mm2-knob:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.mm2-turn{display:flex; gap:4px;}
.mm2-turn button{width:38px; height:30px; border-radius:6px; border:1px solid #9aa0a5; background:#f4f5f6; color:#222; font-size:20px; line-height:1; cursor:pointer; font-weight:700;}
.mm2-turn button:active{background:#d9dcde;}
.mm2-right{display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.6vw,12px); padding-left:8px; border-left:2px solid #b3b8bc; border-radius:0 0 0 30px;}
.mm2-leds{display:flex; flex-direction:column; gap:4px; font-size:10px; color:#333; margin-bottom:2px;}
.mm2-leds span{display:flex; align-items:center; gap:4px;}
.mm2-leds i{width:8px; height:8px; border-radius:50%; background:#aab; box-shadow:inset 0 0 2px #000;}
.mm2-leds i.g{background:#29d65a; box-shadow:0 0 5px #29d65a;}
.mm2-leds i.blink{animation:mm2blink 1s steps(2) infinite;}
@keyframes mm2blink{50%{opacity:.25;}}
.mm2-btn{width:clamp(38px,9vw,46px); height:clamp(30px,7vw,36px); border-radius:50%; border:2px solid #333; background:linear-gradient(#fbfbfb,#d9dcde); color:#111; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:0 2px 3px rgba(0,0,0,.35);}
.mm2-btn:active{transform:translateY(1px); box-shadow:0 1px 1px rgba(0,0,0,.35);}
.mm2-txt{font-size:10px; font-weight:900; line-height:1; letter-spacing:.02em;}
.mm2-onoff{width:clamp(46px,11vw,56px); height:clamp(46px,11vw,56px); margin-top:auto; border-width:3px;}

/* ---------- ekran 320 x 240 (styl jak w instrukcji) ---------- */
.mm2-screen, .mm2-screen *{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important; font-feature-settings:normal;}
.s-sb{height:24px; display:flex; align-items:center; gap:5px; padding:0 0 0 3px; background:linear-gradient(#fdfdfd,#d9d9d9); border-bottom:1px solid #999;}
.s-bat{display:flex; gap:1px; padding:1px; border:1.5px solid #000; height:13px; width:38px; position:relative; margin-left:5px;}
.s-bat::before{content:""; position:absolute; left:-5px; top:2px; width:3px; height:6px; background:#000;}
.s-bat i{flex:1; background:#fff;} .s-bat i.f{background:#222;}
.s-time{font-size:17px; font-weight:700; margin-left:4px; letter-spacing:.3px;}
.s-o2{margin-left:auto; background:#2747d8; color:#fff; font-size:8.5px; font-weight:700; line-height:9px; text-align:center; padding:1px 3px; border-radius:2px; border:1px solid #9cb0ff;}
.s-o2 sub{font-size:7px;}
.s-mode{background:#2747d8; color:#fff; font-size:16px; font-weight:700; min-width:96px; height:22px; line-height:22px; text-align:center; padding:0 6px; border-radius:2px 0 0 2px; white-space:nowrap;}
.s-l2{height:20px; display:flex; justify-content:space-between; align-items:center; padding:0 4px; font-size:14px; font-weight:700; background:linear-gradient(#cfcfcf,#f1f1f1);}
.s-l2.s-al{justify-content:center; font-size:15px;}
.s-al.p3{background:#e3262b; color:#fff;} .s-al.p2{background:#f6d32a; color:#000;} .s-al.p1{background:#3cc7c4; color:#000;}
.s-main{position:relative; height:170px;}
.s-gauge{position:absolute; left:2px; top:2px;}
.g-n{font-size:11px; font-weight:700; fill:#000;} .g-u{font-size:11px; font-weight:700; fill:#000;}
.s-rcol{position:absolute; right:2px; top:4px; width:126px; display:flex; flex-direction:column; align-items:stretch; gap:3px; justify-content:flex-end; height:164px;}
.s-f{display:flex; align-items:baseline; gap:3px; justify-content:flex-end; height:26px; padding:0 4px; background:linear-gradient(#f3f3f3,#c9c9c9); border:1px solid #999; border-radius:2px; box-sizing:border-box; white-space:nowrap;}
.s-f .l{font-size:11px; font-weight:700; margin-right:auto;}
.s-f b{font-size:19px; font-weight:700; line-height:24px;}
.s-f .u{font-size:10px; font-weight:700;}
.s-f.fok{border:2px solid #2747d8; box-shadow:0 0 0 1px #2747d8;}
.s-f.ed{background:#2747d8; color:#fff; border-color:#2747d8;}
.s-f.s-ico{justify-content:center; align-items:center;} .s-f.s-ico b{font-size:15px;}
.s-emerg{justify-content:center; align-items:center;}
.s-big{font-size:21px; font-weight:700; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:5px; line-height:1.1;}
.s-lung{font-size:19px;}
.s-cprinfo{font-size:11px; font-weight:700; text-align:right;} .s-cprinfo.red{color:#d00;}
.s-botrow{position:absolute; left:0; right:0; bottom:0; height:26px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:#999;}
.s-botrow .s-f{height:26px; border-radius:0; border-width:0 1px 0 0; justify-content:space-between;}
.s-botrow .s-f .l{margin-right:0;}
.s-botrow .s-f.fok{border:2px solid #2747d8;}
.s-empty{background:linear-gradient(#ececec,#d0d0d0);}
.s-sk{justify-content:center !important; font-size:16px; font-weight:700; align-items:center;}
.s-start{display:flex; flex-direction:column; gap:3px; padding:4px 8px;}
.s-sm{height:28px; border:1px solid #999; border-radius:2px; background:linear-gradient(#efefef,#c8c8c8); font-size:16px; font-weight:700; display:flex; align-items:center; gap:6px; padding-left:34px; box-sizing:border-box;}
.s-sm.s-em{padding-left:10px;}
.s-sm.ped{background:linear-gradient(#fdf28a,#e8cf2c);} .s-sm.child{background:linear-gradient(#ffb27a,#ee7a35);} .s-sm.adult{background:linear-gradient(#ee6e78,#c9333f);}
.s-sm.sel{border:2px solid #2747d8; box-shadow:0 0 0 1px #2747d8;}
.s-new{position:relative; height:170px;}
.s-new-t{position:absolute; left:20px; top:6px; font-size:16px;}
.s-ruler{position:absolute; left:12px; top:4px;}
.s-new-r{position:absolute; right:4px; top:30px; width:118px; display:flex; flex-direction:column; gap:4px;}
.s-new-r .s-f{justify-content:center; align-items:center; font-weight:700; font-size:16px;}
.s-new-r .big b{font-size:24px;}
.s-list{position:absolute; right:2px; top:46px; width:122px; display:flex; flex-direction:column; gap:2px; z-index:3;}
.s-list-em{width:170px;}
.s-li{height:24px; padding-left:6px; border:1px solid #999; background:linear-gradient(#f3f3f3,#c9c9c9); font-size:16px; font-weight:700; display:flex; align-items:center; gap:4px; box-sizing:border-box;}
.s-li.sel{border:2px solid #2747d8;}
.s-arr{height:10px; background:linear-gradient(to right,transparent,#2747d8); clip-path:polygon(0 100%,100% 0,100% 100%);}
.s-arr.dn{clip-path:polygon(0 0,100% 0,100% 100%);}
.s-splash{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(#fff,#dfe3e7); color:#16306e;}
.s-splash b{font-size:34px; letter-spacing:1px;} .s-splash span{font-size:20px; font-weight:700;} .s-splash i{margin-top:14px; font-size:12px; color:#555;}
.s-msg{padding:16px; font-size:13px;} .s-msg b{font-size:17px;}
.s-toast{position:absolute; left:10px; right:10px; bottom:34px; background:#222; color:#fff; font-size:12px; padding:6px 8px; border-radius:3px; text-align:center;}
.s-bell{flex:0 0 auto;}

/* kolory bez atrybutow style (CSP style-src 'self') */
.tile-m b.c-y{color:#fbbf24;} .tile-m b.c-w{color:#e9eef2;} .tile-m b.c-c{color:#22d3ee;} .tile-m b.c-r{color:#ff4d4f;} .tile-m b.c-m{color:#7f8c96;} .tile-m b.c-g{color:#2fe07a;}
.s-emerg.g-adult{background:linear-gradient(#ee6e78,#c9333f);} .s-emerg.g-child{background:linear-gradient(#ffb27a,#ee7a35);} .s-emerg.g-ped{background:linear-gradient(#fdf28a,#e8cf2c);}
.s-li.g-adult{background:linear-gradient(#ee6e78,#c9333f);} .s-li.g-child{background:linear-gradient(#ffb27a,#ee7a35);} .s-li.g-ped{background:linear-gradient(#fdf28a,#e8cf2c);}