/* Pilotrax tracking screen - vertical/horizontal update */
:root{--border:#2b2b2b;--white:#f5f5f5;--yellow:#f4c400;--green:#63e43b;--blue:#229cff;--red2:#b90000;--scale:1}body.size-small{--scale:.82}body.size-medium{--scale:1}body.size-large{--scale:1.16}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at center top,#1b1b1b,#050505 55%,#000);color:var(--white);font-family:Arial,Helvetica,sans-serif}body{-webkit-font-smoothing:antialiased;touch-action:manipulation}.tracker-shell{width:min(100vw,620px);min-height:100vh;margin:0 auto;padding:calc(12px*var(--scale)) 10px max(12px,env(safe-area-inset-bottom))}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:calc(8px*var(--scale))}.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand-icon{color:var(--yellow);font-size:calc(34px*var(--scale));font-weight:900;line-height:1}.brand-text{font-size:calc(31px*var(--scale));font-weight:950;letter-spacing:-1px;line-height:1}.brand-text span{color:var(--yellow)}.status-row{text-align:right;font-weight:900;line-height:1.05}.connection,.gps{font-size:calc(15px*var(--scale));letter-spacing:.5px}.connection.good{color:var(--green)}.connection.bad{color:#ff4a4a}.gps{color:#eee}.main-grid{display:grid;grid-template-columns:1fr;gap:calc(9px*var(--scale))}.speed-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(9px*var(--scale))}.speed-card,.distance-card{background:linear-gradient(180deg,rgba(25,25,25,.92),rgba(8,8,8,.96));border:2px solid var(--border);border-radius:12px;box-shadow:inset 0 0 35px rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.45)}.speed-card{min-height:calc(146px*var(--scale));display:grid;grid-template-rows:auto 1fr;align-items:center;justify-items:center;padding:calc(10px*var(--scale))}.label-block{width:100%;text-align:center}.main-label{font-size:calc(27px*var(--scale));font-weight:1000;line-height:.95;letter-spacing:-1px}.sub-label{color:#ddd;font-size:calc(22px*var(--scale));font-weight:1000;line-height:1}.speed-circle{width:calc(103px*var(--scale));height:calc(103px*var(--scale));border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#050505 45%,#111 100%)}.pilot-ring{border:calc(8px*var(--scale)) solid var(--green);box-shadow:0 0 18px rgba(99,228,59,.22)}.load-ring{border:calc(8px*var(--scale)) solid var(--blue);box-shadow:0 0 18px rgba(34,156,255,.22)}.speed-number{font-size:calc(45px*var(--scale));font-weight:1000;line-height:.86;letter-spacing:-2px}.speed-unit{margin-top:calc(6px*var(--scale));font-size:calc(15px*var(--scale));font-weight:1000;color:#eee;letter-spacing:1px}.distance-card{padding:calc(13px*var(--scale));text-align:center}.distance-title{color:#e8e8e8;font-size:calc(21px*var(--scale));font-weight:1000;letter-spacing:1px;margin-bottom:calc(8px*var(--scale))}.distance-layout{display:grid;grid-template-columns:calc(45px*var(--scale)) 1fr auto 1fr calc(50px*var(--scale));align-items:center;gap:calc(8px*var(--scale))}.vehicle-icon:before{content:"🚙";color:var(--yellow);font-size:calc(36px*var(--scale))}.truck-icon:before{content:"🚚";color:var(--yellow);font-size:calc(36px*var(--scale))}.dash-line{border-top:calc(4px*var(--scale)) dashed #fff;opacity:.9}.distance-number{font-size:calc(58px*var(--scale));font-weight:1000;line-height:.9;letter-spacing:-2px}.distance-number.distance-ok{color:var(--green)}.distance-unit{margin-top:calc(4px*var(--scale));color:#eee;font-size:calc(20px*var(--scale));font-weight:1000;letter-spacing:1px}.distance-feet{margin-top:calc(6px*var(--scale));color:var(--green);font-size:calc(22px*var(--scale));font-weight:1000}.distance-actions{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:calc(8px*var(--scale));margin-top:calc(12px*var(--scale));align-items:stretch}.small-action-btn,.variance-btn{min-height:calc(52px*var(--scale));border-radius:9px;border:1px solid #444;background:#111;color:var(--yellow);font-weight:1000;font-size:calc(16px*var(--scale));cursor:pointer}.variance-btn{color:#fff;border-color:#8c7a00}.variance-btn.active{background:var(--yellow);color:#111;border-color:var(--yellow);box-shadow:0 0 12px rgba(244,196,0,.45)}.small-action-btn.locked{background:var(--green);color:#111;border-color:var(--green);box-shadow:0 0 12px rgba(99,228,59,.45)}.small-action-btn.disabled{opacity:.55}.lock-status{margin-top:calc(10px*var(--scale));border:1px solid rgba(99,228,59,.55);border-radius:8px;padding:calc(9px*var(--scale));color:var(--green);background:rgba(0,80,0,.12);font-size:calc(15px*var(--scale));font-weight:1000;line-height:1.25}.screen-controls,.layout-controls{display:flex;gap:10px;margin-top:calc(14px*var(--scale))}.screen-controls button,.layout-controls button{flex:1;min-height:calc(39px*var(--scale));border:3px solid #ff7a1a;border-radius:10px;background:#050505;color:#fff;font-size:calc(20px*var(--scale));font-weight:1000;cursor:pointer;box-shadow:0 0 8px rgba(255,122,26,.3)}.layout-controls button{border-color:#555;color:var(--yellow);font-size:calc(15px*var(--scale))}.screen-controls button.active,.layout-controls button.active{background:#ff7a1a;color:#111}@keyframes distanceFlash{0%{background:linear-gradient(180deg,#750000,#230000)}50%{background:linear-gradient(180deg,#d40000,#3a0000)}100%{background:linear-gradient(180deg,#750000,#230000)}}.distance-card.distance-alert{animation:distanceFlash .8s infinite;border-color:#ff2b2b;box-shadow:0 0 28px rgba(255,0,0,.85),inset 0 0 35px rgba(255,0,0,.35)}.distance-card.distance-alert .distance-title,.distance-card.distance-alert .distance-unit,.distance-card.distance-alert .lock-status{color:#ffdddd}.distance-card.distance-alert .distance-number{color:#ffd400}.distance-card.distance-alert .variance-btn.active{background:#ff2b2b;color:#fff;border-color:#ff2b2b}@keyframes speedFlash{0%{background:linear-gradient(180deg,rgba(90,0,0,.95),rgba(25,0,0,.96))}50%{background:linear-gradient(180deg,rgba(210,0,0,.98),rgba(70,0,0,.98))}100%{background:linear-gradient(180deg,rgba(90,0,0,.95),rgba(25,0,0,.96))}}.speed-card.speed-alert{animation:speedFlash .8s infinite;border-color:#ff2b2b;box-shadow:0 0 24px rgba(255,0,0,.7),inset 0 0 30px rgba(255,0,0,.25)}.speed-card.speed-alert .speed-number{color:#ffd400}.end-run-btn{width:100%;border:none;border-radius:12px;background:linear-gradient(180deg,#f03a34,var(--red2));color:#fff;min-height:calc(84px*var(--scale));font-size:calc(38px*var(--scale));font-weight:1000;display:flex;align-items:center;justify-content:center;gap:calc(16px*var(--scale));margin-top:calc(18px*var(--scale))}.end-run-btn:disabled{background:#444;color:#ccc}.stop-icon{width:calc(52px*var(--scale));height:calc(52px*var(--scale));border:3px solid #fff;border-radius:50%;position:relative}.stop-icon:after{content:"";position:absolute;inset:28%;background:#fff;border-radius:3px}.footer-status{margin-top:calc(10px*var(--scale));display:flex;justify-content:center;gap:8px;color:#cfcfcf;font-size:calc(13px*var(--scale));font-weight:900}.monitoring-active{color:var(--green)}.monitoring-off{color:#aaa}.keep-open{margin-top:calc(8px*var(--scale));color:#8d8d8d;text-align:center;font-size:calc(14px*var(--scale));font-weight:900}.message-box{margin:14px 0;padding:14px;border-radius:10px;background:#1a1a1a;border:1px solid #333;color:#fff;text-align:center}body.layout-horizontal .tracker-shell{width:100vw;max-width:100vw;min-height:auto;padding:6px}body.layout-horizontal .top-bar{margin-bottom:4px}body.layout-horizontal .brand-icon{font-size:calc(27px*var(--scale))}body.layout-horizontal .brand-text{font-size:calc(25px*var(--scale))}body.layout-horizontal .connection,body.layout-horizontal .gps{font-size:calc(12px*var(--scale))}body.layout-horizontal .main-grid{grid-template-columns:minmax(250px,48%) 1fr;gap:6px;align-items:stretch}body.layout-horizontal .speed-grid{grid-template-columns:1fr 1fr;gap:5px}body.layout-horizontal .speed-card{min-height:calc(132px*var(--scale));padding:calc(7px*var(--scale))}body.layout-horizontal .main-label{font-size:calc(20px*var(--scale))}body.layout-horizontal .sub-label{font-size:calc(17px*var(--scale))}body.layout-horizontal .speed-circle{width:calc(82px*var(--scale));height:calc(82px*var(--scale))}body.layout-horizontal .speed-number{font-size:calc(36px*var(--scale))}body.layout-horizontal .speed-unit{font-size:calc(12px*var(--scale))}body.layout-horizontal .distance-card{padding:calc(9px*var(--scale))}body.layout-horizontal .distance-title{font-size:calc(17px*var(--scale));margin-bottom:4px}body.layout-horizontal .distance-layout{grid-template-columns:calc(36px*var(--scale)) 1fr auto 1fr calc(40px*var(--scale));gap:6px}body.layout-horizontal .vehicle-icon:before,body.layout-horizontal .truck-icon:before{font-size:calc(30px*var(--scale))}body.layout-horizontal .distance-number{font-size:calc(42px*var(--scale))}body.layout-horizontal .distance-unit{font-size:calc(14px*var(--scale));margin-top:1px}body.layout-horizontal .distance-feet{font-size:calc(15px*var(--scale));margin-top:2px}body.layout-horizontal .distance-actions{margin-top:8px;gap:6px}body.layout-horizontal .small-action-btn,body.layout-horizontal .variance-btn{min-height:calc(38px*var(--scale));font-size:calc(13px*var(--scale))}body.layout-horizontal .lock-status{margin-top:6px;padding:6px;font-size:calc(12px*var(--scale))}body.layout-horizontal .screen-controls,body.layout-horizontal .layout-controls{margin-top:6px;gap:6px}body.layout-horizontal .screen-controls button,body.layout-horizontal .layout-controls button{min-height:32px;font-size:14px;border-width:2px}body.layout-horizontal .end-run-btn{min-height:calc(64px*var(--scale));font-size:calc(28px*var(--scale));margin-top:8px}body.layout-horizontal .stop-icon{width:calc(38px*var(--scale));height:calc(38px*var(--scale))}body.layout-horizontal .footer-status,body.layout-horizontal .keep-open{font-size:11px}@media(max-width:360px){.distance-actions{grid-template-columns:1fr 1fr}.small-action-btn,.variance-btn{min-height:46px;font-size:14px}.screen-controls button{font-size:16px}}