/* =====================================================================
   app.css — ProRemote Portal, guided redesign.
   Scania language kept (blue action, red danger), teal = active/done/ok.
   One step at a time: rail -> single instruction -> one button.
   ===================================================================== */
:root{
  --bg:#0B0D10; --surface:#151A20; --surface-2:#1C232B; --surface-3:#222B34;
  --line:#2A323C; --line-soft:#212931;
  --text:#F2F5F8; --muted:#94A2B2; --dim:#6C7886;
  --scania:#7287A3; --scania-hi:#8EA3BE;
  --teal:#00B29F; --teal-soft:rgba(0,178,159,.14);
  --red:#EB0A37; --red-hi:#ff2a52;
  --r-card:18px; --r-btn:12px;
  --font:'ScaniaSans-Regular',-apple-system,Segoe UI,Roboto,sans-serif;
}
@font-face{font-family:'ScaniaSans-Regular';src:url('/resources/ScaniaSans-Regular.ttf') format('truetype');font-weight:normal}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(8px,2vw,26px);line-height:1.5}

.app{width:min(1000px,100%);background:var(--surface);border-radius:var(--r-card);
  box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;
  min-height:min(740px,86vh)}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:6px;padding:0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs{display:flex}
.tab{padding:20px 22px;cursor:pointer;font-size:clamp(13px,1.4vw,16px);color:var(--muted);
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;user-select:none}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);font-weight:700;border-bottom-color:var(--teal)}
.spacer{flex:1}
.lang-wrap{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:13px;cursor:pointer}
.lang{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;cursor:pointer}
.ver{color:var(--dim);font-size:13px;padding:0 6px}
.crest-img{width:42px;height:auto;padding:0 4px}

/* ---------- stage ---------- */
.stage-wrap{flex:1;padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px);display:flex;flex-direction:column}
.view[hidden]{display:none}
.view{flex:1;display:flex;flex-direction:column}

/* step rail */
.rail{display:flex;justify-content:center;gap:0;margin:0 auto clamp(24px,4vw,40px);padding:0;
  list-style:none;counter-reset:step;width:100%;max-width:480px}
.rail li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  counter-increment:step;color:var(--dim);font-size:13px;text-align:center}
.rail li::before{content:'';position:absolute;top:17px;left:-50%;width:100%;height:3px;background:var(--line);z-index:1}
.rail li:first-child::before{display:none}
.rail-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--line);color:var(--dim);font-weight:700;font-size:14px;position:relative;z-index:2;transition:.2s}
.rail-dot::before{content:counter(step)}
.rail li.active{color:var(--text);font-weight:700}
.rail li.active .rail-dot{border-color:var(--teal);background:var(--teal);color:var(--bg)}
.rail li.done .rail-dot{border-color:var(--teal);background:var(--teal);color:var(--bg)}
.rail li.done .rail-dot::before{content:'✓'}
.rail li.done::before,.rail li.active::before{background:var(--teal)}

/* the single-focus stage */
.stage{max-width:520px;width:100%;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;flex:1}
.stage-visual{min-height:188px;display:flex;align-items:center;justify-content:center;width:100%}
.stage-plug{width:72px;height:auto;opacity:.92}
.stage-title{font-size:clamp(21px,2.6vw,27px);font-weight:700;margin:0}
.stage-sub{margin:0;color:var(--muted);font-size:clamp(14px,1.6vw,16px);max-width:440px}
.stage-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px;width:100%}
.stage-progress{width:100%;max-width:360px;display:flex;flex-direction:column;gap:8px;align-items:center}
.stage-progress[hidden]{display:none}
.stage-progress .bar{width:100%;height:14px;background:var(--surface-2);border-radius:10px;overflow:hidden}
.stage-progress .bar-fill{height:100%;width:0;background:var(--teal);transition:width .3s ease}
.stage-progress .bar-text{font-weight:700}
.stage-check{width:88px;height:88px;border-radius:50%;background:var(--teal-soft);border:2px solid var(--teal);
  display:grid;place-items:center;color:var(--teal);font-size:46px;line-height:1}
.stage-warn{width:88px;height:88px;border-radius:50%;background:rgba(245,166,35,.14);border:2px solid #F5A623;
  display:grid;place-items:center;color:#F5A623;font-size:50px;font-weight:700;line-height:1}
.stage-bad{color:var(--red)}

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:700;font-size:16px;border:none;border-radius:var(--r-btn);padding:13px 26px;
  cursor:pointer;transition:background .12s,transform .04s;background:var(--surface-3);color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn:hover{background:#2a343e}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary,.btn-light{background:var(--scania);color:#15191e}
.btn-primary:hover,.btn-light:hover{background:var(--scania-hi)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi)}
.btn-lg{font-size:18px;padding:16px 40px;min-width:280px;max-width:100%}
.btn-ghost{background:none;border:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:6px 8px}
.btn-sub{padding:11px 28px;font-size:15px}
.btn-ghost:hover{color:var(--text)}
.btn-ghost.danger:hover{color:var(--red)}

/* spinner */
.spinner{width:52px;height:52px;border:6px solid var(--surface-2);border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- device illustration + overlay ---------- */
.device-card{position:relative;width:100%;container-type:inline-size;margin:0 auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45))}
.device-card[data-role="transmitter"]{max-width:210px}
.device-img{display:block;width:100%;height:auto}
.device-overlay{position:absolute;inset:0;pointer-events:none}
.ov-row{position:absolute;display:flex;flex-direction:column;line-height:1.12}
.ov-label{text-transform:uppercase;letter-spacing:.6px;opacity:.7}
.ov-val{font-weight:700}
.device-card[data-role="transmitter"] .ov-row{color:#16181b}
.device-card[data-role="transmitter"] .ov-label{color:#5b5e62;font-size:3cqw}
.device-card[data-role="transmitter"] .ov-val{font-size:5.4cqw}
.device-card[data-role="transmitter"] .ov-serial{top:8%;left:21%}
.device-card[data-role="transmitter"] .ov-fw{top:22%;left:21%}
/* handheld: larger image on the LEFT, data panel on the RIGHT */
.device-panel{display:flex;align-items:center;gap:clamp(20px,4vw,40px);justify-content:center;text-align:left;flex-wrap:wrap}
.handheld-img{height:clamp(220px,34vh,300px);width:auto;display:block;filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}
.device-specs{margin:0;min-width:150px}
.device-specs dt{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin-top:14px}
.device-specs dt:first-child{margin-top:0}
.device-specs dd{margin:2px 0 0;font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--text);line-height:1.1}

/* ---------- analog view ---------- */
.analog-head{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.analog-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.analog-bar .btn{padding:11px 20px;font-size:15px}
.btn .fa-solid{margin-right:8px}
.analog-device{color:var(--muted);font-size:14px}
.analog-device b{color:var(--text)}
.analog-lead{text-align:center;color:var(--muted);margin:0}
.button-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.button-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.button-grid{grid-template-columns:1fr}}
.faded{opacity:.4;pointer-events:none}
.abtn{background:#181C22;border:1px solid var(--line);border-radius:10px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:11px;align-items:center}
.abtn.bad{box-shadow:inset 0 0 0 2px var(--red)}
.abtn-name{font-weight:700;font-size:15px}
.toggle-group{display:flex;justify-content:center}
.tg{width:86px;padding:9px 10px;border:0;cursor:pointer;font:inherit;font-weight:700;color:#fff;background:#2B333D}
.tg.left{border-radius:4px 0 0 4px}
.tg.right{border-radius:0 4px 4px 0}
.tg.active{background:var(--scania)}
.picker-row{width:100%;padding:0 16px;box-sizing:border-box}
.picker-row[hidden]{display:none}
.pick{width:100%;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:8px 10px;border:0;border-radius:6px;background:var(--scania);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.pick:hover{filter:brightness(1.12)}
.pick img{width:24px;height:24px}
.config-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-top:16px}
.config-row textarea{flex:1;min-width:260px;min-height:74px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px;font-family:ui-monospace,monospace;font-size:13px;resize:vertical}
.config-actions{display:flex;flex-direction:column;gap:10px}

/* ---------- footer ---------- */
.page-foot{text-align:center;color:var(--dim);font-size:12px;margin-top:14px;padding:0 8px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:50}
.modal.hidden{display:none}
.modal-card{width:min(720px,94vw);max-height:88vh;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:18px}
.modal-x{background:none;border:none;color:#fff;font-size:24px;cursor:pointer}
.modal-body{padding:18px;overflow:auto}
.modal-foot{display:flex;gap:10px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.modal-sep{margin:14px 0 10px;text-align:center;color:var(--muted);font-size:12px}
#li-text{width:100%;padding:11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:#fff;font:inherit}
.op-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.op-cell{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:8px;background:var(--bg);color:#fff;cursor:pointer;font:inherit;text-align:left}
.op-cell:hover{border-color:var(--scania)}
.op-cell.selected{outline:2px solid var(--teal);outline-offset:1px}
.op-label{font-weight:600}
.op-state{font-size:12px;font-weight:700;letter-spacing:.5px}
.op-high{color:#ff8a8a}.op-low{color:#8fb6ff}
.op-can{border-left-color:#2196F3}
.op-sep{grid-column:1/-1;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:10px}
.op-sep-first{margin-top:0}
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-height:46vh;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.icon-btn{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}
.icon-btn img{width:34px;height:34px}
.icon-btn .code{font-size:10px}
.icon-btn.selected{outline:2px solid var(--teal)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);padding:13px 18px;border-radius:10px;z-index:60;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.err{border-left-color:var(--red)}
.toast[hidden]{display:none}

/* ---------- release notes ("what's new") ---------- */
.stage-notes{width:100%;max-width:440px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:left}
.stage-notes[hidden]{display:none}
.notes-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--teal);font-weight:700;margin-bottom:8px}
.notes-date{color:var(--dim);font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap}
.stage-notes p{margin:0;color:var(--text);font-size:14px;line-height:1.45}
.stage-notes ul{margin:0;padding-left:18px;color:var(--text);font-size:14px;line-height:1.45;display:flex;flex-direction:column;gap:4px}