/* BauerPulse - "High-Pressure Pneumatics SCADA" tokens from Google Stitch */
:root{--bg:#0b0f14;--surface:#121820;--surface2:#181c21;--panel:#1b232f;--line:#253243;--text:#f1f5f9;--muted:#8a97a8;
--cyan:#06b6d4;--cyan2:#4cd7f6;--amber:#f59e0b;--green:#10b981;--red:#ef4444;--glow:rgba(6,182,212,.25);
--mono:'JetBrains Mono',ui-monospace,monospace;--head:'Space Grotesk',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif}
[data-theme=light]{--bg:#eef2f6;--surface:#fff;--surface2:#f6f8fb;--panel:#e6ecf2;--line:#cfd8e3;--text:#0f1b2a;--muted:#5b6b7e;--glow:rgba(6,182,212,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--body);
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:32px 32px;background-attachment:fixed;background-blend-mode:soft-light}
h1,h2,h3{font-family:var(--head);margin:0;letter-spacing:-.01em}h1{font-size:28px}h2{font-size:18px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--cyan2);text-decoration:none}
.top{position:sticky;top:0;z-index:20;display:flex;gap:16px;align-items:center;padding:10px 20px;background:color-mix(in srgb,var(--surface) 85%,transparent);
backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--head);font-weight:700;font-size:20px;display:flex;align-items:center;gap:8px;color:var(--text)}
.brand svg{width:26px;height:26px}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.nav a{padding:8px 14px;border-radius:4px;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:.2s}
.nav a:hover,.nav a.on{color:var(--cyan2);background:rgba(6,182,212,.1);box-shadow:inset 0 -2px var(--cyan)}
.who{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.lang-switch{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:2px}
.lang-btn{padding:3px 8px;font-family:var(--mono);font-size:11px;font-weight:600;border-radius:3px;color:var(--muted);text-decoration:none;transition:.15s;line-height:1.2}
.lang-btn:hover{color:var(--text);background:rgba(255,255,255,.05)}
.lang-btn.on{background:rgba(6,182,212,.18);color:var(--cyan2);box-shadow:inset 0 0 0 1px var(--cyan)}
select,input,textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:inherit;width:100%;transition:.2s}
select,.who select{width:auto}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px var(--glow)}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
main{max-width:1280px;margin:0 auto;padding:24px 20px 110px}
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.sub{color:var(--muted);font-size:13px;font-family:var(--mono)}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);border-radius:6px;padding:18px;position:relative;
box-shadow:inset 0 1px rgba(255,255,255,.05);transition:.25s;animation:rise .5s both}
.card:hover{border-color:rgba(6,182,212,.45);box-shadow:0 0 24px -6px var(--glow)}
.card.green{border-left:3px solid var(--green)}.card.orange{border-left:3px solid var(--amber)}.card.red{border-left:3px solid var(--red);box-shadow:0 0 22px -6px rgba(239,68,68,.4)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.big{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.unit{font-size:13px;color:var(--muted);font-weight:500;margin-left:4px}
.row{display:flex;gap:14px;align-items:center}.sp{justify-content:space-between}.wrap{flex-wrap:wrap}
.gauge{width:104px;height:104px;flex:none}.gauge .bg{stroke:var(--line)}.gauge .fg{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.gauge text{font-family:var(--mono);font-weight:700;fill:var(--text);font-size:22px}
.green .fg,.fg.green{stroke:var(--green)}.orange .fg,.fg.orange{stroke:var(--amber)}.red .fg,.fg.red{stroke:var(--red)}
.green .gauge{filter:drop-shadow(0 0 6px rgba(16,185,129,.4))}.orange .gauge{filter:drop-shadow(0 0 6px rgba(245,158,11,.4))}.red .gauge{filter:drop-shadow(0 0 8px rgba(239,68,68,.55))}
.segs{display:flex;gap:4px;margin:10px 0}.segs i{flex:1;height:8px;border-radius:2px;background:var(--line)}
.segs i.on{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.red .segs i.on{background:var(--red);box-shadow:0 0 8px var(--red)}.orange .segs i.on{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.blink{animation:blink 1s infinite}@keyframes blink{50%{opacity:.3}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;border:1px solid var(--cyan);
background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.15s}
.btn:hover{box-shadow:0 0 16px rgba(14,165,233,.5)}.btn:active{transform:translateY(2px) scale(.98);box-shadow:inset 0 3px 8px rgba(0,0,0,.4)}
.btn.ghost{background:transparent;color:var(--cyan2)}.btn.amber{background:transparent;border-color:var(--amber);color:var(--amber)}
.btn.red{background:linear-gradient(135deg,#ef4444,#b91c1c);border-color:#ef4444}.btn.sm{min-height:34px;padding:0 12px;font-size:11px}
.btn[disabled]{opacity:.4;pointer-events:none}
.pill{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:12px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;
background:rgba(6,182,212,.12);color:#7dd3fc;border:1px solid rgba(6,182,212,.3)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;animation:blink 2s infinite}
.pill.green{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.35)}.pill.red{background:rgba(239,68,68,.12);color:var(--red);border-color:rgba(239,68,68,.4)}.pill.orange{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.4)}
table{width:100%;border-collapse:collapse;font-size:13px}th{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
td{padding:10px 8px;border-bottom:1px solid var(--line)}tr:nth-child(even) td{background:rgba(255,255,255,.015)}td.r,th.r{text-align:right;font-family:var(--mono)}
.tabs{display:flex;gap:4px}.tabs button{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 12px;border-radius:4px;font:600 11px var(--mono);cursor:pointer;text-transform:uppercase;transition:.2s}
.tabs button.on{border-color:var(--cyan);color:var(--cyan2);background:rgba(6,182,212,.1)}
.flash{padding:12px 16px;border-radius:4px;margin-bottom:14px;border:1px solid;animation:rise .4s}.flash.ok{border-color:var(--green);color:var(--green);background:rgba(16,185,129,.08)}.flash.error{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.08)}
.form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.form .full{grid-column:1/-1}
.heat{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}.heat i{aspect-ratio:1;border-radius:2px;background:var(--line)}
.bottom{display:none}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}.auth .card{width:min(420px,100%);display:grid;gap:14px}
/* cylinder simulation */
.sim{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;align-items:center}
.cyl{width:100%;max-width:260px;margin:auto;filter:drop-shadow(0 0 18px var(--glow))}
.wave{animation:wave 3s linear infinite}@keyframes wave{to{transform:translateX(-40px)}}
.bubble{animation:bub 2.4s infinite ease-in;opacity:0}@keyframes bub{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-120px);opacity:0}}
.pulse-ring{animation:ring 1.6s infinite}@keyframes ring{50%{opacity:.35}}
@media(max-width:760px){.nav{display:none}.sim{grid-template-columns:1fr}.top{padding:8px 12px}.who .hide{display:none}
.bottom{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bottom a{flex:1;text-align:center;padding:8px 2px;font:600 10px var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase;min-height:48px}.bottom a.on{color:var(--cyan2)}
.bottom a.fab{flex:none;width:58px;height:58px;margin-top:-26px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#0284c7);color:#fff;display:grid;place-items:center;font-size:28px;box-shadow:0 0 20px var(--cyan)}
.big{font-size:28px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Modal confirmation popup */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,15,20,.85);backdrop-filter:blur(8px);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px;animation:modalFade .2s ease-out}
.modal-box{background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 48px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);border-radius:10px;max-width:440px;width:100%;padding:24px;position:relative;animation:modalPop .25s cubic-bezier(.16,1,.3,1)}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}