@font-face{font-family:Digital7;src:url(/fonts/digital-7.ttf) format("truetype");font-display:swap}:root{--primary-color: #00ffff;--primary-dark: #00cccc;--bg-color: #000000;--text-color: #ffffff;--shadow-color: rgba(0, 255, 255, .3);--digital-lit: #00ffff;--digital-unlit: #002a2a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-color);height:100vh;overflow:hidden}#root{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.auth-loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a1628}.auth-loading-spinner{width:48px;height:48px;border:3px solid rgba(0,168,204,.2);border-top-color:#00a8cc;border-radius:50%;animation:authSpin .8s linear infinite}@keyframes authSpin{to{transform:rotate(360deg)}}.main-container{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;position:relative;min-height:100vh;background:#000;padding-top:35px}.shift-action-button{width:56px;height:56px;border-radius:0;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s ease;position:fixed;bottom:0;left:0;z-index:101;padding:2px}.shift-action-button.state-active,.shift-action-button.state-break{bottom:56px}.shift-action-button:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border:2px solid white;border-radius:6px;pointer-events:none}.shift-action-button.state-idle{color:var(--theme-color, #00ffff)}.shift-action-button.state-idle:before{border-color:var(--theme-color, #00ffff)}.shift-action-button.state-active{color:var(--theme-color, #00ffff)}.shift-action-button.state-active:before{border-color:var(--theme-color, #00ffff)}.shift-action-button.state-break{color:var(--theme-color, #00ffff)}.shift-action-button.state-break:before{border-color:var(--theme-color, #00ffff)}.shift-action-button .shift-action-text{font-family:Digital7,Courier New,monospace;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;width:calc(100% - 4px);height:calc(100% - 4px)}.shift-action-button .shift-action-icon{width:32px;height:32px}.shift-action-button:hover{transform:scale(1.05)}.shift-action-button:active{transform:scale(.95)}.shift-off-button{width:56px;height:56px;border-radius:0;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s ease;position:fixed;bottom:0;left:0;z-index:101;padding:2px}.shift-off-button:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border:2px solid var(--theme-color, #00ffff);border-radius:6px;pointer-events:none}.shift-off-button{color:var(--theme-color, #00ffff)}.shift-off-button .shift-off-text{font-family:Digital7,Courier New,monospace;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;width:calc(100% - 4px);height:calc(100% - 4px)}.shift-off-button:hover{transform:scale(1.05)}.shift-off-button:active{transform:scale(.95)}.log-button{width:44px;height:44px;border-radius:0;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;transition:all .3s ease;position:fixed;bottom:0;left:196px;z-index:100;padding:1px}.log-button:before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid white;border-radius:4px;pointer-events:none}.log-button:hover{background:var(--theme-color);transform:scale(1.05)}.log-button:active{background:var(--theme-color);transform:scale(.95)}.day-night-button{width:44px;height:44px;border-radius:0;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;transition:all .3s ease;position:fixed;bottom:0;left:150px;z-index:100;padding:1px}.day-night-button:before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid white;border-radius:4px;pointer-events:none}.button-icon{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}.button-icon.lucide-icon{filter:none;color:#fff;stroke-width:2}.shift-control-button .button-icon,.action-button .button-icon{width:28px;height:28px}.bottom-buttons .button-icon{width:22px;height:22px}.day-night-button:hover{background:var(--theme-color);transform:scale(1.05)}.day-night-button:active{background:var(--theme-color);transform:scale(.95)}.settings-button{width:44px;height:44px;border-radius:0;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;transition:all .3s ease;position:fixed;bottom:0;left:104px;z-index:100;padding:1px}.settings-button:before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid white;border-radius:4px;pointer-events:none}.settings-button:hover{background:var(--theme-color);transform:scale(1.05)}.settings-button:active{background:var(--theme-color);transform:scale(.95)}.side-toggle-button{width:44px;height:44px;border-radius:0;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;transition:all .3s ease;position:fixed;bottom:0;left:58px;z-index:100;padding:1px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:14px}.side-toggle-button:before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid white;border-radius:4px;pointer-events:none}.side-toggle-button:hover{background:var(--theme-color);transform:scale(1.05)}.side-toggle-button:active{background:var(--theme-color);transform:scale(.95)}.central-box{position:absolute;background:transparent;transition:all .3s ease;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.mobile-tariff-display{display:none}@media screen and (orientation: portrait){.mobile-tariff-display{display:block;position:absolute;top:calc(50% - calc(100vh / 6) - 80px);left:50%;transform:translate(-50%);width:calc(100vw - 70px);height:70px;z-index:60;background:transparent;transition:all .3s ease;cursor:pointer}.mobile-tariff-display.hidden{display:none}.mobile-tariff-display.collapsed{opacity:.3}.mobile-tariff-content{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;height:100%;padding:8px}.mobile-tariff-title{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;margin-bottom:4px;text-align:right}.mobile-tariff-value{display:flex;align-items:center;justify-content:flex-end;margin-right:-35px;height:50px}.central-box{width:calc(100vw - 70px);height:calc(100vh / 3);transform:translate(-50%,-50%);display:grid;grid-template-rows:0px 1fr 60px 1fr;grid-template-columns:1fr;grid-template-areas:"top-left" "top-right" "middle" "bottom";transition:grid-template-rows .8s cubic-bezier(.4,0,.2,1)}.central-box.collapsed{grid-template-rows:calc(50% - 4px) 8px calc(50% - 4px);grid-template-columns:1fr 1fr;grid-template-areas:"top-left top-right" "middle middle" "bottom bottom";transform:translate(-50%,-50%)}.side-box{top:calc(50% + calc(100vh / 6));left:50%;transform:translate(-50%);width:calc(100vw - 70px);height:calc(100vh - 50% - calc(100vh / 6) - 35px);display:grid;grid-template-rows:calc((100% - 60px)/2) 60px calc((100% - 60px)/2);grid-template-columns:1fr;grid-template-areas:"side-top" "side-middle" "side-bottom"}.transparent-overlay{top:calc(50% + calc(100vh / 6));left:0;width:100vw;height:calc(100vh - 50% - calc(100vh / 6))}.transparent-overlay-left{top:35px;left:0;width:100vw;height:calc(50% - calc(100vh / 6) - 35px)}.grid-top-left{grid-area:top-left;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-top-right{grid-area:top-right;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-middle{grid-area:middle;background:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;transition:all .8s cubic-bezier(.4,0,.2,1);overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 70px);height:60px;z-index:30}.grid-middle.collapsed{height:6px;background:transparent;border-radius:3px;margin:0 20px;animation:none}@keyframes meterWaitingPulse{0%,to{background:#444;box-shadow:inset 0 0 3px #fff3}33%{background:#555;box-shadow:inset 0 0 8px var(--theme-glow, rgba(0, 255, 255, .4))}66%{background:#666;box-shadow:inset 0 0 12px var(--theme-glow, rgba(0, 255, 255, .6))}}.meter-state-buttons{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;padding:0 20px}.meter-state-button{flex:1;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:800;font-size:12px;letter-spacing:.01em;text-transform:uppercase;font-optical-sizing:auto;transition:all .3s ease;-webkit-user-select:none;user-select:none;padding:10px}.grid-bottom{grid-area:bottom;background:transparent;display:flex;flex-direction:column;padding:8px}}@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){.mobile-tariff-display{display:block;position:absolute;top:calc(50% - calc(100vh / 6) - 80px);left:50%;transform:translate(-50%);width:calc(100vw - 70px);height:70px;z-index:60;background:transparent;transition:all .3s ease;cursor:pointer}.mobile-tariff-display.hidden{display:none}.mobile-tariff-display.collapsed{opacity:.3}.mobile-tariff-content{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;height:100%;padding:8px}.mobile-tariff-title{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;margin-bottom:4px;text-align:right}.mobile-tariff-value{display:flex;align-items:center;justify-content:flex-end;margin-right:-35px;height:50px}.central-box{width:calc(100vw - 70px);height:auto;transform:translate(-50%,-50%);display:grid;grid-template-rows:0px 65px 60px 65px;grid-template-columns:1fr;grid-template-areas:"top-left" "top-right" "middle" "bottom";transition:grid-template-rows .8s cubic-bezier(.4,0,.2,1)}.central-box.collapsed{grid-template-rows:calc(50% - 4px) 8px calc(50% - 4px);grid-template-columns:1fr 1fr;grid-template-areas:"top-left top-right" "middle middle" "bottom bottom";transform:translate(-50%,-50%)}.side-box{top:calc(50% + calc(100vh / 6));left:50%;transform:translate(-50%);width:calc(100vw - 70px);height:calc(100vh - 50% - calc(100vh / 6) - 35px);display:grid;grid-template-rows:calc((100% - 60px)/2) 60px calc((100% - 60px)/2);grid-template-columns:1fr;grid-template-areas:"side-top" "side-middle" "side-bottom"}.transparent-overlay{top:calc(50% + calc(100vh / 6));left:0;width:100vw;height:calc(100vh - 50% - calc(100vh / 6))}.transparent-overlay-left{top:35px;left:0;width:100vw;height:calc(50% - calc(100vh / 6) - 35px)}.grid-top-left{grid-area:top-left;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-top-right{grid-area:top-right;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-middle{grid-area:middle;background:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;transition:all .8s cubic-bezier(.4,0,.2,1);overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 70px);height:60px;z-index:30}.grid-middle.collapsed{height:6px;background:transparent;border-radius:3px;margin:0 20px;animation:none}.meter-state-buttons{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;padding:0 20px}.meter-state-button{flex:1;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:800;font-size:12px;letter-spacing:.01em;text-transform:uppercase;font-optical-sizing:auto;transition:all .3s ease;-webkit-user-select:none;user-select:none;padding:10px}.grid-bottom{grid-area:bottom;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-top-left .digital-display,.grid-top-right .digital-display{font-size:24px!important;height:40px!important}.grid-bottom .digital-display{font-size:28px!important;height:45px!important}.grid-top-left .digital-background,.grid-top-right .digital-background{font-size:24px!important}.grid-bottom .digital-background{font-size:28px!important}}@media screen and (orientation: portrait) and (max-height: 700px){.side-box{top:calc(50% + calc(100vh / 7));height:calc(100vh - 50% - calc(100vh / 7) - 50px);max-height:180px}.central-box{max-height:40vh}.side-box{grid-template-rows:1fr 50px 1fr}}@media screen and (orientation: landscape){.central-box{height:calc(100vh - 70px);width:50vw;max-width:490px;max-height:250px;min-height:250px;display:grid;grid-template-rows:calc((100% - 60px)/2) 60px calc((100% - 60px)/2);grid-template-columns:1fr 1fr;grid-template-areas:"top-left top-right" "middle middle" "bottom bottom";transition:grid-template-rows .8s cubic-bezier(.4,0,.2,1)}.central-box.collapsed{grid-template-rows:calc(50% - 4px) 8px calc(50% - 4px)}.transparent-overlay{top:0;left:calc(50% + min(25vw,245px));width:calc(50% - min(25vw,245px));height:100vh}.side-box{top:50%;left:calc(50% + min(25vw,245px));transform:translateY(-50%);width:calc(50% - min(25vw,245px) - 35px);max-width:210px;height:calc(100vh - 70px);max-height:250px;min-height:250px;display:grid;grid-template-rows:calc((100% - 60px)/2) 60px calc((100% - 60px)/2);grid-template-columns:1fr;grid-template-areas:"side-top" "side-middle" "side-bottom"}}.central-box.hidden{opacity:0;visibility:hidden}.side-box{position:absolute;background:transparent;transition:all .3s ease;z-index:20}.side-box.hidden{opacity:0;visibility:hidden}.central-banner{position:fixed;top:50%;left:0;width:100vw;height:60px;background:#2a2a2a;transform:translateY(-50%);z-index:1;transition:all .8s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 8px 16px -8px #0009,inset 0 -8px 16px -8px #0009}.central-banner:not(.collapsed):before,.central-banner:not(.collapsed):after{content:"";position:absolute;left:0;right:0;height:1px;z-index:1}.central-banner:not(.collapsed):before{top:0}.central-banner:not(.collapsed):after{bottom:0}.central-banner.meter-vrij:not(.collapsed):before,.central-banner.meter-vrij:not(.collapsed):after{background:linear-gradient(to right,color-mix(in srgb,var(--theme-color) 35%,black),color-mix(in srgb,var(--theme-color) 35%,black) 25%,color-mix(in srgb,var(--theme-color) 25%,black) 50%)}.central-banner.meter-tarief:not(.collapsed):before,.central-banner.meter-tarief:not(.collapsed):after{background:linear-gradient(to right,color-mix(in srgb,var(--theme-color) 25%,black) 25%,color-mix(in srgb,var(--theme-color) 35%,black),color-mix(in srgb,var(--theme-color) 25%,black) 75%)}.central-banner.meter-einde:not(.collapsed):before,.central-banner.meter-einde:not(.collapsed):after{background:linear-gradient(to right,color-mix(in srgb,var(--theme-color) 25%,black) 50%,color-mix(in srgb,var(--theme-color) 35%,black) 75%,color-mix(in srgb,var(--theme-color) 35%,black))}.central-banner.collapsed{width:100vw;height:8px;left:0;transform:translateY(-50%);background:var(--theme-glow);opacity:.2;border-radius:0;box-shadow:none;animation:waitingPulse 6s ease-in-out infinite}@keyframes waitingPulse{0%,to{box-shadow:0 0 3px #fff3;transform:translateY(-50%)}50%{box-shadow:0 0 8px var(--theme-glow, rgba(0, 255, 255, .4));transform:translateY(-50%)}}.central-banner.hidden{opacity:0;visibility:hidden}.transparent-overlay{position:fixed;top:50%;right:0;width:calc(50vw - 245px);height:calc(100vh - 50% - 30px);background:transparent;cursor:pointer;z-index:50;transition:all .3s ease}.transparent-overlay.hidden{opacity:0;visibility:hidden}@media screen and (orientation: portrait){.transparent-overlay{top:calc(50% + calc(100vh / 6));left:0;width:100vw;height:calc(100vh - 50% - calc(100vh / 6))}}@media screen and (orientation: landscape){.transparent-overlay{top:0;left:calc(50% + min(25vw,245px));width:calc(50% - min(25vw,245px));height:100vh}}@media screen and (orientation: landscape){.grid-top-left{grid-area:top-left;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-top-right{grid-area:top-right;background:transparent;display:flex;flex-direction:column;padding:8px}.grid-middle{grid-area:middle;background:transparent;display:flex;flex-direction:row;height:100%;align-items:center;justify-content:center;transition:all .8s cubic-bezier(.4,0,.2,1);overflow:hidden}.grid-middle.collapsed{height:6px;background:transparent;border-radius:3px;margin:0 20px;animation:none}.meter-state-buttons{display:flex;width:100%;height:100%;align-items:center;justify-content:space-between;padding:0 20px}.meter-state-button{flex:1;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:16px;letter-spacing:.01em;text-transform:uppercase;font-optical-sizing:auto;transition:all .3s ease;-webkit-user-select:none;user-select:none;padding:10px}.grid-bottom{grid-area:bottom;background:transparent;display:flex;flex-direction:column;padding:8px}}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.popup{background:#1a1a1a;border-radius:8px;padding:20px;width:90vw;max-width:600px;max-height:90vh;position:relative;display:flex;flex-direction:column}.popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1);height:25px;flex-shrink:0}.popup-title{color:#fff;margin:0;font-size:clamp(.9em,2.5vw,1.1em);line-height:1}.popup-close{background:none;border:none;color:#fff;font-size:clamp(18px,4vw,22px);cursor:pointer;padding:0;width:25px;height:25px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .3s}.popup-close:hover{background:#ffffff1a}.popup-buttons{display:flex;gap:1rem;justify-content:center}.popup-btn{padding:.75rem 1.5rem;background:var(--theme-color);color:#000;border:none;border-radius:5px;font-weight:700;cursor:pointer;transition:all .3s ease}.popup-btn:hover{background:var(--theme-color);opacity:.8;box-shadow:0 0 15px var(--shadow-color)}.popup-btn.secondary{background:#ffffff1a;color:var(--theme-color);border:1px solid var(--theme-color)}.popup-btn.secondary:hover{background:var(--theme-color);opacity:.1}.section-title-tarief{flex:1;display:flex;align-items:left;justify-content:left;color:#fff;font-weight:700;font-size:20px;text-align:left}.section-title-extras{flex:1;display:flex;align-items:right;justify-content:right;color:#fff;font-weight:700;font-size:15px;text-align:right}.section-title-totaalprijs{flex:1;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;text-align:center}.section-value{flex:2;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;text-align:center}.grid-top-right .section-value{display:flex;align-items:stretch;justify-content:flex-start;height:100%;width:100%}.symbol-column{width:10%;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:15px;height:100%}.value-column{width:90%;display:flex;align-items:center;justify-content:flex-end;height:100%}.digital-display{position:relative;font-family:Digital7,monospace;letter-spacing:.05em;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:210px}.digital-background{position:absolute;top:0;right:0;width:100%;height:100%;display:flex;align-items:center;justify-content:flex-end;color:var(--digital-unlit);z-index:1;font-size:clamp(42px,11vw,70px);font-weight:570;letter-spacing:-.04em}.digital-front{position:relative;z-index:2;text-align:right;width:100%;font-size:inherit}.grid-top-right .digital-display,.grid-top-left .digital-display{flex:1;font-size:48px}.grid-bottom .digital-display{flex:1;font-size:60px}.grid-middle .section-value{flex:1;display:flex;height:100%;padding:4px}.right-buttons{position:fixed;display:flex;flex-direction:row;gap:1px;z-index:100;left:1px;top:35px;right:auto;transform:none}@media screen and (orientation: portrait){.right-buttons{left:auto;right:1px;top:35px;flex-direction:column;gap:1px}}.right-buttons.top-hidden{top:1px}@media screen and (orientation: portrait){.right-buttons.top-hidden{top:1px}}.action-button{width:56px;height:56px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all .3s ease;padding:2px;margin:0;font-size:10px;line-height:1;text-align:center;position:relative}.action-button:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border:2px solid white;border-radius:6px;pointer-events:none}.action-button:hover{background:var(--theme-color);transform:scale(1.05)}.action-button:active{background:var(--theme-color);transform:scale(.95)}.action-button svg{width:28px;height:28px}.bottom-buttons{position:fixed;right:0;bottom:0;display:flex;flex-direction:row;gap:2px;z-index:100}.bottom-buttons .action-button{width:44px;height:44px}.bottom-buttons .action-button:before{border-width:1px;border-radius:4px}.hotspot-button{font-size:8px;line-height:1.1}@media screen and (orientation: portrait){.shift-control-button{width:52px;height:52px}.side-toggle-button{width:40px;height:40px;left:54px}.settings-button{width:40px;height:40px;left:96px}.day-night-button{width:40px;height:40px;left:138px}.log-button{width:40px;height:40px;left:180px}.bottom-buttons .action-button{width:40px;height:40px}}@media screen and (orientation: portrait) and (max-width: 400px){.shift-control-button{width:48px;height:48px}.side-toggle-button,.settings-button,.day-night-button,.log-button{width:36px;height:36px}.side-toggle-button{left:50px}.settings-button{left:88px}.day-night-button{left:126px}.log-button{left:164px}.bottom-buttons .action-button{width:36px;height:36px}}@media screen and (orientation: portrait) and (max-height: 700px){.top-buttons{height:40px}.top-button{height:40px;font-size:10px}.main-container{padding-top:40px}.right-buttons .action-button,.shift-control-button{width:44px;height:44px}.side-toggle-button,.settings-button,.day-night-button,.log-button{width:34px;height:34px}.side-toggle-button{left:46px}.settings-button{left:82px}.day-night-button{left:118px}.log-button{left:154px}.bottom-buttons .action-button{width:34px;height:34px}}@media screen and (min-height: 750px){.side-toggle-button,.side-box.meter-function-settings{display:none!important}.settings-button{left:58px}.day-night-button{left:104px}.log-button{left:150px}}@media screen and (orientation: portrait) and (min-height: 750px){.settings-button{left:54px}.day-night-button{left:96px}.log-button{left:138px}}.top-buttons{position:fixed;top:0;left:0;right:0;height:50px;display:flex;z-index:1000;gap:0}.top-button{width:50%;height:50px;background:transparent;color:#fff;display:flex;align-items:flex-start;font-size:12px;padding:0;margin:0;border:none;outline:none;-webkit-user-select:none;user-select:none;pointer-events:none;text-align:left;white-space:normal;overflow:visible}.tarief-button{justify-content:flex-start;text-align:left;white-space:normal;line-height:1.4}.break-banner-container{position:fixed;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;z-index:1001;background:#000000e6}.break-banner-container .break-banner{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#f44}.datetime-button{text-align:right;cursor:pointer;display:flex;flex-direction:column;align-items:flex-end}.datetime-main{font-size:inherit;line-height:1.2;color:#fff}.datetime-countdown-inline{font-size:.65em;color:#fff6;font-family:Courier New,monospace;line-height:1.2;margin-top:2px;white-space:nowrap}.top-button:hover{background:transparent;color:#fff}.hidden{opacity:0;visibility:hidden}.button-toggle-overlay{position:fixed;background:transparent;cursor:pointer;z-index:50;transition:all .3s ease}@media screen and (orientation: portrait){.button-toggle-overlay{top:0;left:0;width:100vw;height:calc(50% - calc(100vh / 6) - 35px)}}@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){.button-toggle-overlay{top:35px;left:0;width:100vw;height:calc(50% - calc(100vh / 6) - 35px)}}@media screen and (orientation: landscape){.button-toggle-overlay{top:0;left:0;width:calc(50% - min(25vw,245px));height:100vh}}.gps-popup{overflow:hidden}.gps-data{display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding-right:10px;max-height:calc(90vh - 100px)}.gps-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px;background:#0003;border-radius:4px;gap:10px}.gps-label{color:#888;font-size:.9em;min-width:100px}.gps-value{color:#fff;font-family:monospace;font-size:1.1em;text-align:right;flex:1}.gps-value.address{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.9em;line-height:1.4}.gps-state{font-weight:700;padding:4px 8px;border-radius:4px;white-space:nowrap}.gps-state.aviation{color:#0f0;background:#00ff0026;border:1px solid rgba(0,255,0,.3)}.gps-state.survey{color:#09f;background:#0099ff26;border:1px solid rgba(0,153,255,.3)}.gps-state.navigation{color:#96f;background:#9966ff26;border:1px solid rgba(153,102,255,.3)}.gps-state.consumer{color:#ff0;background:#ffff0026;border:1px solid rgba(255,255,0,.3)}.gps-state.low_accuracy{color:#f90;background:#ff990026;border:1px solid rgba(255,153,0,.3)}.gps-state.unreliable{color:red;background:#ff000026;border:1px solid rgba(255,0,0,.3)}.gps-state.no_signal{color:#888;background:#88888826;border:1px solid rgba(136,136,136,.3);text-decoration:line-through}.gps-data::-webkit-scrollbar{width:8px}.gps-data::-webkit-scrollbar-track{background:#0003;border-radius:4px}.gps-data::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.gps-data::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.gps-button.aviation{background:linear-gradient(to top,#00ff00 100%,transparent 100%);color:#000;font-weight:700}.gps-button.survey{background:linear-gradient(to top,#0099ff 95%,transparent 95%);color:#000;font-weight:700}.gps-button.navigation{background:linear-gradient(to top,#9966ff 85%,transparent 85%);color:#000;font-weight:700}.gps-button.consumer{background:linear-gradient(to top,#ffff00 70%,transparent 70%);color:#000}.gps-button.low_accuracy{background:linear-gradient(to top,#ff9900 50%,transparent 50%);color:#fff}.gps-button.unreliable{background:linear-gradient(to top,#ff0000 30%,transparent 30%);color:#fff}.gps-button.no_signal{color:#888;position:relative}.gps-button.no_signal:after{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:#888;transform:translateY(-50%) rotate(-45deg)}.network-button{background:linear-gradient(to top,#00ff88 80%,transparent 80%);color:#fff}.network-button.offline{background:transparent;color:#fff;position:relative}.network-button.offline:after{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:red;transform:translateY(-50%) rotate(-45deg)}.gps-critical-section{margin-top:15px;padding:10px;border:2px solid #ff4444;border-radius:5px;background:#ff44441a}.gps-row.critical{background:#ff44440d}.critical-label{color:#f44!important;font-weight:700}.critical-value{color:#fff!important;background:#f443;padding:2px 8px;border-radius:3px}.gps-recovery-section{margin-top:15px;padding:10px;border:2px solid #44ff44;border-radius:5px;background:#44ff441a}.gps-row.recovery{background:#44ff440d}.recovery-label{color:#4f4!important;font-weight:700}.recovery-value{color:#fff!important;background:#4f43;padding:2px 8px;border-radius:3px}.recovery-distance{color:#0ff!important;background:#0ff3;padding:2px 8px;border-radius:3px;cursor:pointer;text-decoration:underline;font-weight:700}.recovery-distance:hover{background:#0ff6}.clickable{cursor:pointer}.haversine-popup{max-width:500px;width:90vw;max-height:80vh;overflow-y:auto}.haversine-calculation{padding:20px}.calc-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.calc-label{color:#ccc;font-weight:700;flex:1}.calc-value{color:#fff;flex:2;text-align:right;font-family:Courier New,monospace}.calc-separator{text-align:center;color:#0ff;font-weight:700;margin:15px 0;padding:10px 0;border-top:2px solid #00ffff;border-bottom:2px solid #00ffff}.calc-row.result{background:#00ffff1a;padding:12px;margin-top:10px;border-radius:5px;border:1px solid #00ffff}.calc-row.result .calc-label{color:#0ff;font-size:1.1em}.calc-row.result .calc-value{color:#0ff;font-size:1.2em;font-weight:700}.recovery-speed{color:#f80!important;background:#f803;padding:2px 8px;border-radius:3px;cursor:pointer;text-decoration:underline;font-weight:700}.recovery-speed:hover{background:#f806}.speed-popup{max-width:500px;width:90vw;max-height:80vh;overflow-y:auto}.speed-calculation{padding:20px}.vincenty-popup{max-width:600px;width:90vw;max-height:80vh;overflow-y:auto}.vincenty-calculation{padding:20px}.shift-log-popup{max-width:700px;width:95vw;max-height:80vh}.shift-log-content{max-height:60vh;overflow-y:auto;padding:10px 20px}.shift-tree{font-family:Courier New,monospace}.tree-item{margin:2px 0}.tree-node{display:flex;align-items:center;padding:4px 8px;border-radius:4px;transition:background-color .2s}.tree-node:hover{background:#ffffff0d}.tree-toggle{width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;color:#0ff;margin-right:8px;border:1px solid #00ffff;border-radius:2px;font-size:12px;-webkit-user-select:none;user-select:none}.tree-toggle:hover{background:#00ffff1a}.tree-spacer{width:16px;color:#666;margin-right:8px;font-size:12px}.tree-content{flex:1}.tree-children{border-left:1px solid rgba(0,255,255,.3);margin-left:8px}.shift-item{width:100%}.shift-header{display:flex;align-items:center;gap:12px}.shift-title{font-weight:700;color:#0f0;font-size:14px}.shift-status.active{background:#0f03;color:#0f0;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:700}.event-item,.shift-item,.pause-group,.outage-group{width:100%;min-height:24px;display:flex;align-items:center;padding:4px 0}.shift-header,.pause-header,.outage-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:20px}.event-details{color:#ccc;font-size:11px;margin-left:8px;flex:1}.shift-summary,.pause-summary,.outage-summary{color:#ccc;font-size:11px;font-family:Courier New,monospace;font-weight:400}.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;min-width:80px;text-align:center}.tag-shift{background:#1e3a8a;color:#fff;border:1px solid #3b82f6}.tag-shift-start{background:#166534;color:#fff;border:1px solid #22c55e}.tag-shift-end{background:#991b1b;color:#fff;border:1px solid #ef4444}.tag-pause{background:#7c2d92;color:#fff;border:1px solid #a855f7}.tag-pause-start{background:#166534;color:#fff;border:1px solid #22c55e}.tag-pause-end{background:#991b1b;color:#fff;border:1px solid #ef4444}.tag-trip{background:#0369a1;color:#fff;border:1px solid #0ea5e9}.tag-trip-start{background:#166534;color:#fff;border:1px solid #22c55e}.tag-trip-end{background:#991b1b;color:#fff;border:1px solid #ef4444}.tag-outage-gps,.tag-outage-network{background:#ea580c;color:#fff;border:1px solid #f97316}.tag-outage-start{background:#166534;color:#fff;border:1px solid #22c55e}.tag-outage-end{background:#991b1b;color:#fff;border:1px solid #ef4444}.tag-active{background:#ca8a04;color:#fff;border:1px solid #eab308;animation:pulse 2s infinite}.tag-default{background:#374151;color:#fff;border:1px solid #6b7280}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.location-details{color:#999;font-size:10px;margin-top:2px}.recovery-details{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}.price-details{margin-top:4px;padding:4px 8px;background:#00ffff1a;border-radius:4px;border-left:3px solid #00ffff}.price-details div{color:#ccc;font-size:10px;margin:1px 0}.recovery-distance,.recovery-speed{color:#4f4;font-size:10px;cursor:pointer;text-decoration:underline}.recovery-distance:hover,.recovery-speed:hover{color:#6f6}.no-shifts{text-align:center;padding:40px 20px;color:#999}.no-shifts p{margin:8px 0}.help-text{font-size:12px;color:#666}.shift-summary{color:#ccc;font-size:11px;font-family:Courier New,monospace;font-weight:400;line-height:24px;margin:0;padding:0;border:none;background:none}.outage-log-popup{max-width:600px;width:95vw;max-height:80vh}.outage-log-content{max-height:60vh;overflow-y:auto;padding:10px 20px}.no-outages{text-align:center;color:#ccc;padding:40px 20px}.outage-list{display:flex;flex-direction:column;gap:15px}.outage-item{border-radius:8px;padding:15px;border-left:5px solid;background:#ffffff0d}.outage-item.lost{border-left-color:#f44;background:#ff44441a}.outage-item.recovered{border-left-color:#4f4;background:#44ff441a}.outage-item.offline{border-left-color:#f44;background:#ff44441a}.outage-item.online{border-left-color:#4f4;background:#44ff441a}.outage-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:10px}.outage-type{font-weight:700;color:#0ff;background:#0ff3;padding:4px 8px;border-radius:4px;font-size:.9em}.outage-status{font-weight:700;padding:4px 12px;border-radius:4px;font-size:.9em;text-transform:uppercase}.outage-status.lost{color:#f44;background:#f443}.outage-status.recovered{color:#4f4;background:#4f43}.outage-status.offline{color:#f44;background:#f443}.outage-status.online{color:#4f4;background:#4f43}.outage-time{color:#ccc;font-size:.85em;font-family:Courier New,monospace}.outage-details{padding:10px;border-radius:5px;margin-top:10px}.outage-details.lost{background:#ff44440d;border:1px solid rgba(255,68,68,.2)}.outage-details.recovered{background:#44ff440d;border:1px solid rgba(68,255,68,.2)}.detail-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.1)}.detail-row:last-child{border-bottom:none}.detail-label{color:#ccc;font-weight:700;flex:1}.detail-value{color:#fff;flex:2;text-align:right;font-family:Courier New,monospace;font-size:.9em}.outage-summary{font-family:Courier New,monospace;font-size:.9em;line-height:24px;margin:0;padding:0;border:none;background:none}.summary-stats{display:inline;font-family:Courier New,monospace;font-size:.9em;line-height:24px;margin:0;padding:0;border:none;background:none}.stat{display:inline;color:#ccc;font-size:.9em;font-family:Courier New,monospace;line-height:24px;margin:0;padding:0;border:none;background:none}.stat strong{color:#0ff;font-size:.9em;font-family:Courier New,monospace;line-height:24px;margin:0;padding:0;border:none;background:none}@media (max-width: 768px){.outage-header{flex-direction:column;align-items:flex-start}.detail-row{flex-direction:column;gap:5px}.detail-value{text-align:left}.summary-stats{flex-direction:column;gap:10px}}.warning-popup{border:2px solid #ff6b6b;background:linear-gradient(135deg,#ff6b6b1a,#000000e6)}.warning-popup .popup-title{color:#ff6b6b;font-size:1.2em}.warning-popup .popup-content{padding:20px;line-height:1.6}.warning-popup .popup-content p{margin:0 0 15px}.warning-popup .popup-content p:last-child{margin-bottom:0}body:has(.shift-action-button.hidden) .side-toggle-button:not(.hidden){left:0}body:has(.shift-action-button.hidden) .settings-button:not(.hidden){left:46px}body:has(.shift-action-button.hidden) .day-night-button:not(.hidden){left:92px}body:has(.shift-action-button.hidden) .log-button:not(.hidden){left:138px}@media screen and (orientation: portrait){body:has(.shift-action-button.hidden) .side-toggle-button:not(.hidden){left:0}body:has(.shift-action-button.hidden) .settings-button:not(.hidden){left:42px}body:has(.shift-action-button.hidden) .day-night-button:not(.hidden){left:84px}body:has(.shift-action-button.hidden) .log-button:not(.hidden){left:126px}}@media screen and (min-height: 750px){body:has(.shift-action-button.hidden) .settings-button:not(.hidden){left:0}body:has(.shift-action-button.hidden) .day-night-button:not(.hidden){left:46px}body:has(.shift-action-button.hidden) .log-button:not(.hidden){left:92px}}@media screen and (orientation: portrait) and (min-height: 750px){body:has(.shift-action-button.hidden) .settings-button:not(.hidden){left:0}body:has(.shift-action-button.hidden) .day-night-button:not(.hidden){left:42px}body:has(.shift-action-button.hidden) .log-button:not(.hidden){left:84px}}.terminal-log-popup{width:100vw!important;height:100vh!important;background:#000;border:none!important;border-radius:0!important;color:#0f0;font-family:Courier New,Monaco,Menlo,monospace;font-size:14px;line-height:1.4;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:9999!important;margin:0!important;padding:0!important;max-width:none!important;max-height:none!important;transform:none!important;box-sizing:border-box!important;overflow:hidden!important}.terminal-log-popup *{box-sizing:border-box}body:has(.terminal-log-popup){overflow:hidden}.terminal-log-popup{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100vw!important;height:100vh!important}.terminal-log-popup .popup-header{background:#000;border-bottom:1px solid #333;padding:15px 25px;border-radius:0}.terminal-log-popup .popup-title{color:#0f0;font-family:Courier New,Monaco,Menlo,monospace;font-size:18px;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:1px}.terminal-log-popup .popup-close{background:red;color:#000;border:1px solid #ff0000;width:28px;height:28px;border-radius:0;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:Courier New,Monaco,Menlo,monospace}.terminal-log-popup .popup-close:hover{background:#fff;color:red}.terminal-summary{background:#000;border-bottom:1px solid #333;padding:20px 25px;font-family:Courier New,Monaco,Menlo,monospace}.summary-line{display:flex;margin-bottom:5px}.summary-line:last-child{margin-bottom:0}.summary-label{color:#ff0;font-weight:700;width:100px;flex-shrink:0}.summary-value{color:#0ff;font-weight:700}.terminal-content{height:calc(100vh - 160px);overflow-y:auto;padding:0;background:#000}.terminal-empty{padding:25px}.terminal-log{padding:0}.shift-section{border-bottom:1px solid #333;margin-bottom:10px;padding-bottom:10px}.shift-section:last-child{border-bottom:none;margin-bottom:0}.terminal-line{padding:3px 25px;display:flex;align-items:flex-start;min-height:22px;word-wrap:break-word;white-space:pre-wrap}.terminal-line.shift-header{background:#111;color:#ff0;font-weight:700;padding:10px 25px;border-bottom:1px solid #333;margin-bottom:8px}.terminal-prompt{color:#0f0;font-weight:700;margin-right:8px;flex-shrink:0}.terminal-text{color:#fff}.terminal-timestamp{color:#888;margin-right:10px;flex-shrink:0;font-size:12px}.terminal-event-type{color:#0ff;font-weight:700;margin-right:10px;min-width:120px;flex-shrink:0}.terminal-details{color:#fff;flex:1}.event-shift-start .terminal-event-type{color:#0f0}.event-shift-end .terminal-event-type{color:#f80}.event-pause-start .terminal-event-type{color:#ff0}.event-pause-end .terminal-event-type{color:#ff8}.event-trip-start .terminal-event-type{color:#0ff}.event-trip-end .terminal-event-type{color:#8ff}.event-gps-error-start .terminal-event-type{color:#f44}.event-gps-error-stop .terminal-event-type{color:#f88}.event-network-error-start .terminal-event-type{color:#f60}.event-network-error-stop .terminal-event-type{color:#fa6}.event-default .terminal-event-type{color:#ccc}.terminal-content::-webkit-scrollbar{width:12px}.terminal-content::-webkit-scrollbar-track{background:#000;border-radius:0}.terminal-content::-webkit-scrollbar-thumb{background:#333;border-radius:0;border:1px solid #555555}.terminal-content::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 768px){.terminal-log-popup{font-size:12px}.terminal-line{padding:3px 15px;flex-direction:column;align-items:flex-start}.terminal-timestamp{margin-right:0;margin-bottom:2px}.terminal-event-type{margin-right:0;margin-bottom:2px;min-width:auto}.summary-label{width:80px}.terminal-log-popup .popup-header{padding:12px 20px}.terminal-summary{padding:15px 20px}}@media (max-width: 480px){.terminal-log-popup{font-size:11px}.summary-line{flex-direction:column}.summary-label{width:auto;margin-bottom:2px}}.terminal-log-overlay{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:#000000f2!important;z-index:10000!important;display:flex!important;align-items:center!important;justify-content:center!important}.terminal-log-container{width:98vw!important;height:95vh!important;background:#000!important;border:2px solid #ffffff!important;border-radius:4px!important;display:flex!important;flex-direction:column!important;font-family:Courier New,Monaco,Menlo,monospace!important;color:#fff!important;overflow:hidden!important}.terminal-log-header{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:10px 15px!important;background:#111!important;border-bottom:1px solid #ffffff!important}.terminal-log-title{font-size:16px!important;font-weight:700!important;color:#fff!important;letter-spacing:1px!important}.terminal-log-close{background:transparent!important;border:1px solid #ffffff!important;color:#fff!important;font-size:18px!important;font-weight:700!important;width:30px!important;height:30px!important;cursor:pointer!important;border-radius:2px!important;font-family:Courier New,monospace!important}.terminal-log-close:hover{background:#fff!important;color:#000!important}.terminal-log-content{flex:1!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.terminal-log-table-header{background:#222!important;border-bottom:2px solid #ffffff!important;overflow-x:hidden!important;overflow-y:hidden!important;flex-shrink:0!important}.terminal-log-table-body{flex:1!important;overflow-x:auto!important;overflow-y:auto!important;padding:0!important}.terminal-log-row{display:flex!important;font-family:Courier New,monospace!important;font-size:12px!important;line-height:1.4!important;white-space:nowrap!important;padding:2px 5px!important;border-bottom:1px solid #333333!important;min-width:1400px!important}.terminal-log-row.header-row{font-weight:700!important;color:#fff!important;background:#222!important;border-bottom:2px solid #ffffff!important}.terminal-log-row.data-row{cursor:pointer!important;transition:background-color .2s ease!important;color:#fff!important}.terminal-log-row.data-row:hover{background:#333!important}.terminal-log-row.data-row.selected{background:#444!important;color:#fff!important}.col-id{width:50px!important;text-align:right!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-parent{width:60px!important;text-align:center!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-type{width:140px!important;text-align:left!important;padding-right:10px!important;flex-shrink:0!important;font-weight:700!important}.col-datetime{width:160px!important;text-align:left!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-km{width:80px!important;text-align:right!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-lat,.col-lon{width:100px!important;text-align:right!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-address{width:250px!important;text-align:left!important;padding-right:10px!important;flex-shrink:0!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#fff!important}.col-tariff{width:70px!important;text-align:center!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-fare,.col-extra{width:80px!important;text-align:right!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-total{width:80px!important;text-align:right!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important;font-weight:700!important}.col-tax,.col-distance{width:80px!important;text-align:right!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.col-time{width:90px!important;text-align:center!important;padding-right:10px!important;flex-shrink:0!important;color:#fff!important}.terminal-log-summary{background:#111!important;border-top:2px solid #ffffff!important;padding:10px 15px!important;font-family:Courier New,monospace!important;font-size:12px!important;flex-shrink:0!important}.summary-line{color:#fff!important;margin:2px 0!important;font-weight:700!important}.terminal-log-table-body::-webkit-scrollbar{width:12px!important;height:12px!important}.terminal-log-table-body::-webkit-scrollbar-track{background:#111!important}.terminal-log-table-body::-webkit-scrollbar-thumb{background:#fff!important;border-radius:2px!important}.terminal-log-table-body::-webkit-scrollbar-thumb:hover{background:#ccc!important}.terminal-log-table-body::-webkit-scrollbar-corner{background:#111!important}@media (max-width: 1200px){.col-address{width:200px!important}}@media (max-width: 800px){.terminal-log-row{font-size:10px!important}.col-address{width:150px!important}}.clickable-address{cursor:pointer;text-decoration:underline;color:#0cf!important;transition:color .2s ease}.clickable-address:hover{color:#fff!important;background-color:#0cf3}.clickable-tariff{cursor:pointer;text-decoration:underline;color:#0f8!important;transition:all .2s ease}.clickable-tariff:hover{color:#ff0!important;background-color:#ff03;text-shadow:0 0 5px rgba(255,255,0,.5)}.clickable-total{cursor:pointer;text-decoration:underline;transition:all .2s ease}.clickable-total:hover{color:#f44!important;background-color:#f443;text-shadow:0 0 5px rgba(255,68,68,.5);transform:scale(1.05)}.open-sumup-link{color:var(--theme-color, #00ff00)!important;text-decoration:underline;cursor:pointer;transition:all .2s ease;font-weight:700}.open-sumup-link:hover{color:#f44!important;background-color:#f443;text-shadow:0 0 5px rgba(255,68,68,.5);transform:scale(1.05)}.address-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.address-popup-content{background:#1a1a1a;border-radius:8px;padding:20px;width:90vw;max-width:600px;max-height:90vh;position:relative;display:flex;flex-direction:column;overflow:hidden}.address-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1);height:25px;flex-shrink:0}.address-popup-header h3{color:#fff;margin:0;font-size:clamp(.9em,2.5vw,1.1em);line-height:1}.address-popup-close{background:none;border:none;color:#fff;font-size:clamp(18px,4vw,22px);cursor:pointer;padding:0;width:25px;height:25px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .3s}.address-popup-close:hover{background:#ffffff1a}.address-popup-body{display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding-right:10px;max-height:calc(90vh - 100px)}.address-popup-map{text-align:center;margin-bottom:15px}.address-popup-map img{width:100%;max-width:300px;height:auto;border-radius:4px;background:#0003}.address-popup-details{display:flex;flex-direction:column;gap:15px}.address-detail-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px;background:#0003;border-radius:4px;gap:10px}.detail-label{color:#888;font-size:.9em;min-width:100px}.detail-value{color:#fff;font-family:monospace;font-size:1.1em;text-align:right;flex:1;word-break:break-all}.open-map-link{color:#fff;text-decoration:underline;cursor:pointer;transition:color .2s ease}.open-map-link:hover{color:#888}.address-popup-body::-webkit-scrollbar{width:8px}.address-popup-body::-webkit-scrollbar-track{background:#0003;border-radius:4px}.address-popup-body::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.address-popup-body::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.ticket-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:9999}.ticket-popup{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:15px;padding:0;max-width:400px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 30px #0000004d;font-family:Courier New,monospace}.ticket-popup.day-mode{--bg-primary: #ffffff;--text-primary: #000000;--border-color: #333333;--divider-color: #000000}.ticket-popup.night-mode{--bg-primary: #1a1a1a;--text-primary: #ffffff;--border-color: #666666;--divider-color: #ffffff}.ticket-header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:15px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:15px 15px 0 0}.ticket-title{margin:0;color:var(--text-primary);font-size:18px;font-weight:700;text-align:center;flex-grow:1;font-family:Courier New,monospace}.ticket-close{background:none;border:none;font-size:24px;color:var(--text-primary);cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.ticket-close:hover{opacity:.7}.ticket-content{padding:20px;color:var(--text-primary);font-size:12px;line-height:1.4}.ticket-company{text-align:center;margin-bottom:15px}.company-name{font-weight:700;font-size:14px;margin-bottom:5px}.company-address,.company-city,.company-phone{margin-bottom:2px}.ticket-divider{border-top:1px solid var(--divider-color);margin:15px 0}.ticket-divider-dashed{border-top:1px dashed var(--divider-color);margin:15px 0}.ticket-spacer{height:15px}.ticket-times{margin-bottom:10px}.time-row{display:flex;margin-bottom:3px}.time-label{width:80px;flex-shrink:0}.time-colon{width:15px;flex-shrink:0}.time-value{flex-grow:1;text-align:right}.ticket-route{margin-bottom:10px}.route-row{display:flex;margin-bottom:5px;align-items:flex-start}.route-label{width:40px;flex-shrink:0}.route-value{flex-grow:1;text-align:right;white-space:pre-line}.ticket-details{margin-bottom:10px}.detail-row{display:flex;margin-bottom:3px}.detail-label{width:80px;flex-shrink:0}.detail-value{flex-grow:1;text-align:right}.ticket-pricing{margin-bottom:10px}.price-row{display:flex;margin-bottom:5px}.price-row.main-price{font-weight:700;font-size:13px}.price-label{flex-grow:1}.price-value{text-align:right;min-width:80px}.ticket-breakdown{margin-bottom:10px}.ticket-breakdown .price-row{font-size:11px;margin-bottom:3px}.ticket-vehicle{margin-bottom:10px}.vehicle-row{display:flex;margin-bottom:3px}.vehicle-label{width:80px;flex-shrink:0}.vehicle-colon{width:15px;flex-shrink:0}.vehicle-value{flex-grow:1;text-align:right}.ticket-footer{text-align:center;font-size:11px;margin-top:10px}.footer-text{line-height:1.3}@media (max-width: 480px){.ticket-popup{width:95%;max-width:none}.ticket-content{padding:15px;font-size:11px}.ticket-title{font-size:16px}}@media print{.ticket-popup-overlay{background:none;position:static}.ticket-popup{box-shadow:none;border:1px solid #000;max-width:none;width:100%}.ticket-close{display:none}}.meter-data-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fade-in .2s ease}.meter-data-container{width:100%;max-width:1600px;height:90vh;max-height:900px;background:linear-gradient(180deg,#0d1117,#161b22);border:1px solid var(--theme-color, #00ffff);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 30px #00ffff26,0 0 60px #00000080;font-family:JetBrains Mono,Fira Code,Consolas,monospace;animation:slide-up .3s ease}.meter-data-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0d1117;border-bottom:1px solid rgba(255,255,255,.1)}.meter-data-title{font-size:14px;font-weight:600;letter-spacing:2px;color:var(--theme-color, #00ffff);text-shadow:0 0 10px var(--theme-color, #00ffff)}.meter-data-close{width:28px;height:28px;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.meter-data-close:hover{background:#ef444433;border-color:#ef4444;color:#ef4444}.meter-data-tabs{display:flex;align-items:center;padding:8px 16px;gap:8px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1)}.tab-btn{padding:8px 16px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff9;font-size:12px;font-weight:600;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;font-family:inherit}.tab-btn:hover{background:#ffffff14;border-color:#fff3;color:#fff}.tab-btn.active{background:#00ffff26;border-color:var(--theme-color, #00ffff);color:var(--theme-color, #00ffff);text-shadow:0 0 8px var(--theme-color, #00ffff)}.tab-badge{padding:2px 8px;background:#ffffff1a;border-radius:10px;font-size:10px;font-weight:500}.tab-btn.active .tab-badge{background:#00ffff4d}.tab-pending{padding:2px 6px;background:#eab3084d;border:1px solid #eab308;border-radius:10px;font-size:10px;color:#eab308;animation:pulse-pending 2s infinite}@keyframes pulse-pending{0%,to{opacity:1}50%{opacity:.6}}.tab-actions{margin-left:auto;display:flex;gap:8px}.sync-all-btn{padding:8px 16px;background:linear-gradient(135deg,#22c55e33,#22c55e1a);border:1px solid #22c55e;border-radius:4px;color:#22c55e;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.sync-all-btn:hover:not(:disabled){background:#22c55e4d;transform:translateY(-1px);box-shadow:0 2px 8px #22c55e4d}.sync-all-btn:disabled{opacity:.4;cursor:not-allowed}.meter-data-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.data-table-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.data-table-scroll-wrapper{flex:1;overflow-x:auto;overflow-y:auto;display:flex;flex-direction:column}.data-table-inner{min-width:max-content;display:flex;flex-direction:column;flex:1}.data-table-header{flex-shrink:0;background:#0d1117;border-bottom:2px solid var(--theme-color, #00ffff);position:sticky;top:0;z-index:10}.data-table-body{flex:1}.data-table-scroll-wrapper::-webkit-scrollbar{width:8px;height:8px}.data-table-scroll-wrapper::-webkit-scrollbar-track{background:#0000004d}.data-table-scroll-wrapper::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.data-table-scroll-wrapper::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.data-row{display:flex;align-items:center;padding:8px 16px;gap:4px;font-size:11px;color:#ffffffd9;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s ease;min-width:max-content}.data-row:hover{background:#ffffff08}.data-row.selected{background:#00ffff14}.data-row.expanded{background:#00ffff0d;border-bottom-color:var(--theme-color, #00ffff)}.data-row.header-row{background:#0d1117;color:var(--theme-color, #00ffff);font-weight:600;font-size:10px;letter-spacing:.5px;cursor:default;text-transform:uppercase}.data-row.header-row:hover{background:#0d1117}.no-data{padding:40px;text-align:center;color:#fff6;font-size:13px;font-style:italic}.col-ritnummer{width:120px;flex-shrink:0;font-weight:500}.col-nummerplaat{width:90px;flex-shrink:0}.col-bestuurderspas{width:110px;flex-shrink:0}.col-vertrek-tijd{width:140px;flex-shrink:0}.col-vertrek-coords{width:85px;flex-shrink:0;text-align:right}.col-aankomst-tijd{width:140px;flex-shrink:0}.col-aankomst-coords{width:85px;flex-shrink:0;text-align:right}.col-afstand,.col-kostprijs{width:80px;flex-shrink:0;text-align:right}.col-tarief{width:50px;flex-shrink:0;text-align:center}.col-extra{width:70px;flex-shrink:0;text-align:right}.col-btw{width:60px;flex-shrink:0;text-align:right}.col-betaling{width:70px;flex-shrink:0;text-align:center}.col-sync{width:75px;flex-shrink:0;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px}.col-shift-id{width:80px;flex-shrink:0;font-weight:500}.col-start-tijd,.col-eind-tijd{width:140px;flex-shrink:0}.col-chauffeur{width:100px;flex-shrink:0}.col-voertuig{width:90px;flex-shrink:0}.col-start-km,.col-eind-km{width:70px;flex-shrink:0;text-align:right}.col-ritten{width:50px;flex-shrink:0;text-align:center}.col-afstand-totaal,.col-omzet{width:80px;flex-shrink:0;text-align:right}.col-extra-totaal{width:70px;flex-shrink:0;text-align:right}.col-btw-totaal{width:60px;flex-shrink:0;text-align:right}.col-pauze{width:70px;flex-shrink:0;text-align:center}.col-log-id{width:50px;flex-shrink:0;text-align:right}.col-trip-ref,.col-shift-ref{width:80px;flex-shrink:0}.col-log-type{width:130px;flex-shrink:0;font-weight:500}.col-timestamp{width:140px;flex-shrink:0}.col-staat{width:60px;flex-shrink:0;text-align:center;font-weight:500}.col-lat,.col-lon{width:85px;flex-shrink:0;text-align:right}.col-snelheid,.col-prijs{width:70px;flex-shrink:0;text-align:right}.col-extra-log,.col-s-timer,.col-d-timer{width:60px;flex-shrink:0;text-align:right}.sync-status-label{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;letter-spacing:.5px;white-space:nowrap}.sync-icon{font-size:10px}.sync-text{font-size:8px;text-transform:uppercase}.retry-sync-btn{width:18px;height:18px;padding:0;background:#ef444433;border:1px solid #ef4444;border-radius:50%;color:#ef4444;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.retry-sync-btn:hover{background:#ef444466;transform:scale(1.1)}.expanded-logs{background:#0006;border-left:3px solid var(--theme-color, #00ffff);margin:0 16px 8px 32px;border-radius:0 4px 4px 0;overflow:hidden}.expanded-logs-header{padding:8px 12px;background:#00ffff1a;color:var(--theme-color, #00ffff);font-size:11px;font-weight:600;letter-spacing:.5px}.expanded-logs-content{padding:8px 0;max-height:200px;overflow-y:auto}.expanded-log-row{display:flex;align-items:center;padding:4px 12px;gap:16px;font-size:10px;color:#ffffffb3}.expanded-log-row:hover{background:#ffffff08}.expanded-log-row span{min-width:80px}.expanded-log-row span:first-child{min-width:120px;font-weight:500}.meter-data-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#0d1117;border-top:1px solid rgba(255,255,255,.1)}.summary-stats{font-size:11px;color:#fff9;letter-spacing:.5px}.pending-count{color:#eab308}.footer-actions{display:flex;gap:8px}.clear-cache-btn{padding:6px 12px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:4px;color:#ef4444;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.clear-cache-btn:hover{background:#ef444433;border-color:#ef4444}@media (max-width: 1200px){.meter-data-container{max-width:100%;height:95vh;max-height:none;border-radius:4px}.meter-data-overlay{padding:10px}.data-row{font-size:10px;padding:6px 12px}.data-row.header-row{font-size:9px}.col-ritnummer{width:100px}.col-vertrek-tijd,.col-aankomst-tijd{width:120px}.col-vertrek-coords,.col-aankomst-coords{width:70px}.col-timestamp{width:120px}}@media (max-width: 768px){.meter-data-overlay{padding:0}.meter-data-container{height:100vh;max-height:none;border-radius:0;border:none}.meter-data-tabs{flex-wrap:wrap;gap:4px}.tab-btn{padding:6px 10px;font-size:11px}.tab-badge{font-size:9px;padding:1px 6px}.tab-actions{width:100%;margin-top:8px;justify-content:flex-end}.data-row{font-size:9px;padding:6px 8px;gap:2px}.col-vertrek-coords,.col-aankomst-coords,.col-btw,.col-extra,.col-btw-totaal,.col-extra-totaal,.col-shift-ref,.col-snelheid,.col-s-timer,.col-d-timer{display:none}.col-ritnummer{width:80px}.col-nummerplaat{width:70px}.col-vertrek-tijd,.col-aankomst-tijd,.col-timestamp{width:80px}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.popup-overlay.settings-fullscreen{padding:0;align-items:stretch;justify-content:stretch}.settings-popup{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;overflow:hidden;display:flex;flex-direction:column;background:#000000f2;position:relative}.settings-popup .popup-header{padding:15px 20px;background:#00ffff1a;border-bottom:1px solid rgba(0,255,255,.3);display:flex;justify-content:space-between;align-items:center}.settings-popup .popup-title{color:#0ff;font-size:1.3em;font-weight:700;margin:0}.settings-popup .popup-close{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;width:32px;height:32px;border-radius:4px;font-size:1.2em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.settings-popup .popup-close:hover{background:#fff3;border-color:#0ff}.settings-data{display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding:15px 20px 80px;flex:1;max-height:calc(100vh - 140px)}.settings-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px;background:#0003;border-radius:4px;gap:10px}.settings-label{color:#888;font-size:.9em;min-width:100px}.settings-value{color:#fff;font-family:monospace;font-size:1.1em;font-weight:700;text-align:right;flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px}.settings-value.status{color:#0f0;font-weight:700;padding:4px 8px;border-radius:4px;background:#00ff0026;border:1px solid rgba(0,255,0,.3);white-space:nowrap;font-size:1.1em}.settings-input{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 8px;border-radius:4px;width:100px;text-align:center;font-family:monospace;font-size:.9em;font-weight:400}.settings-input.description-input{width:200px;text-align:left}.settings-input.tariff-select{width:180px;text-align:left;padding:4px 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:4px;cursor:pointer}.settings-input.tariff-select:focus{outline:none;border-color:#0ff;background:#00ffff1a}.settings-input.tariff-select option{background:#1a1a1a;color:#fff}.settings-input:focus{outline:none;border-color:#0ff;background:#00ffff1a}.settings-unit{color:#888;font-size:1.1em;font-weight:700}.settings-footer{position:absolute;bottom:0;left:0;right:0;padding:15px 20px;background:#000000f2;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:flex-end;gap:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.settings-actions{display:flex;gap:12px}.settings-btn{padding:4px 12px;border:1px solid;border-radius:4px;font-size:.9em;font-weight:700;cursor:pointer;transition:all .3s ease;min-width:60px}.settings-btn.reset{background:#ffa50026;border-color:#ffa50080;color:orange}.settings-btn.reset:hover{background:#ffa50040;border-color:orange}.settings-btn.save{background:#22c55e26;border-color:#22c55e80;color:#22c55e}.settings-btn.save:hover{background:#22c55e40;border-color:#22c55e}.settings-data::-webkit-scrollbar{width:8px}.settings-data::-webkit-scrollbar-track{background:#0003;border-radius:4px}.settings-data::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.settings-data::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.settings-section{border:1px solid rgba(255,255,255,.2);border-radius:6px;background:#0000001a;margin-bottom:15px}.settings-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#00ffff1a;border-radius:6px 6px 0 0;cursor:pointer;transition:background .3s ease}.settings-section-header:hover{background:#00ffff26}.settings-section-title{color:#0ff;font-size:1.1em;font-weight:700;margin:0}.settings-section-toggle{color:#0ff;font-size:1.2em;font-weight:700}.settings-section-content{transition:all .3s ease;overflow:hidden}.settings-section-content.collapsed{max-height:0!important;opacity:0;padding:0!important;margin:0!important;border:none!important}.settings-section-content.expanded{opacity:1;padding:15px;max-height:70vh;overflow-y:auto;overflow-x:auto}.settings-section-content::-webkit-scrollbar{width:6px;height:6px}.settings-section-content::-webkit-scrollbar-track{background:#0003;border-radius:3px}.settings-section-content::-webkit-scrollbar-thumb{background:#00ffff4d;border-radius:3px}.settings-section-content::-webkit-scrollbar-thumb:hover{background:#00ffff80}.color-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .3s ease;min-width:60px}.color-option:hover{border-color:#ffffff4d;background:#ffffff0d}.color-option.selected{border-color:#0ff;background:#00ffff1a}.color-preview{width:30px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.3);position:relative}.color-preview[data-theme=CYAN]{background:linear-gradient(45deg,#0ff,#088);box-shadow:0 0 8px #00ffff4d}.color-preview[data-theme=CYAN_RED]{background:linear-gradient(45deg,#0ff,#f44,#088);box-shadow:0 0 8px #00ffff4d,0 0 8px #f443}.color-preview[data-theme=CYAN_BLUE]{background:linear-gradient(45deg,#0ff,#48f,#088);box-shadow:0 0 8px #00ffff4d,0 0 8px #48f3}.color-preview[data-theme=CYAN_GREEN]{background:linear-gradient(45deg,#0ff,#4f8,#088);box-shadow:0 0 8px #00ffff4d,0 0 8px #4f83}.color-name{color:#fff;font-size:.7em;font-weight:700;text-align:center;font-family:Inter,sans-serif}.tariff-controls{display:flex;align-items:center;gap:10px}@media (max-width: 768px){.settings-section:has(.tariff-subsection) .settings-section-content{max-height:70vh;overflow-y:auto;overflow-x:auto;padding-right:10px}.tariff-subsection .settings-section-content{max-height:50vh;overflow-y:auto;overflow-x:auto}.tariff-subsection .settings-row{min-width:100%;flex-wrap:nowrap;overflow-x:auto}.tariff-subsection .settings-value{flex-wrap:nowrap;min-width:max-content;overflow-x:auto}.tariff-subsection .settings-input{min-width:60px;flex-shrink:0}.tariff-subsection .settings-input.currency-input{min-width:80px}.tariff-subsection .settings-input.description-input{min-width:150px}}.settings-btn.add-tariff{background:#00ffff26;border-color:#00ffff80;color:#0ff;font-size:.85em;padding:6px 12px}.settings-btn.add-tariff:hover:not(:disabled){background:#00ffff40;border-color:#0ff}.settings-btn.add-tariff:disabled{opacity:.5;cursor:not-allowed}.tariff-count{color:#888;font-size:.9em;font-weight:400}.tariff-subsection{margin:10px 0;background:#0003;border:1px solid rgba(255,255,255,.1)}.tariff-section-header{background:#00c8c814!important}.tariff-section-header:hover{background:#00c8c81f!important}.tariff-section-info{display:flex;align-items:center;gap:12px}.tariff-section-info .settings-section-title{color:#0cc;font-size:1em;margin:0}.tariff-type-label{color:#888;font-size:.8em;padding:2px 6px;background:#ffffff1a;border-radius:3px;text-transform:capitalize}.tariff-section-actions{display:flex;align-items:center;gap:8px}.remove-tariff-btn{background:#ff444426;border:1px solid rgba(255,68,68,.3);color:#f44;width:20px;height:20px;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9em;font-weight:700;transition:all .3s ease}.remove-tariff-btn:hover{background:#ff444440;border-color:#f44}.tariff-type-selector{display:flex;gap:4px;border:1px solid rgba(255,255,255,.2);border-radius:4px;overflow:hidden}.tariff-type-btn{background:#ffffff0d;border:none;color:#888;padding:6px 12px;cursor:pointer;transition:all .3s ease;font-size:.85em;font-weight:700;flex:1;text-align:center}.tariff-type-btn:hover{background:#ffffff1a;color:#fff}.tariff-type-btn.active{background:#0ff3;color:#0ff}.settings-input.currency-input{width:80px;text-align:right}.settings-input.km-input{width:60px;text-align:center}.settings-input.time-input{width:70px;text-align:center}.settings-value{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.settings-value .settings-input+.settings-unit+.settings-input{margin-left:8px}@media screen and (max-width: 768px){.settings-data{padding:10px;gap:10px;max-height:calc(100vh - 140px)}.tariff-subsection .settings-section-content{overflow-x:auto;overflow-y:visible;max-width:100%}.settings-row{flex-wrap:nowrap;min-width:max-content;overflow-x:auto;padding:8px}.settings-value{overflow-x:auto;white-space:nowrap;min-width:max-content;flex-shrink:0}.settings-input.currency-input{width:70px;min-width:70px}.settings-input.km-input{width:50px;min-width:50px}.tariff-type-selector{flex-wrap:wrap}.tariff-type-btn{min-width:60px;font-size:.8em;padding:4px 8px}}@media screen and (max-width: 480px){.settings-data{padding:5px;max-height:calc(100vh - 120px)}.settings-input.description-input{width:150px;min-width:150px}.settings-label{min-width:80px;font-size:.85em}.settings-unit{font-size:.9em}}@media screen and (orientation: landscape) and (max-height: 500px){.settings-popup .popup-header{padding:10px 15px}.settings-data{padding:10px 15px 60px;gap:10px;max-height:calc(100vh - 90px)}.settings-footer{padding:10px 15px}.settings-section{margin-bottom:8px}.settings-section-header{padding:8px 12px}.settings-section-content.expanded{padding:10px;max-height:50vh}.settings-row{padding:6px}}.settings-v2-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0a0e17;z-index:9999;display:flex;flex-direction:column;overflow:hidden}.settings-v2-container{display:flex;flex-direction:column;height:100%;width:100%;max-width:100%;margin:0;background:linear-gradient(180deg,#0f172a,#0a0e17)}.settings-v2-body{display:flex;flex-direction:column;flex:1;overflow:hidden}.settings-v2-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-accent) 15%,transparent),#0f172a);border-bottom:1px solid color-mix(in srgb,var(--theme-accent) 30%,transparent);flex-shrink:0}.header-title{display:flex;align-items:center;gap:12px}.header-title h1{font-size:1.5rem;font-weight:700;color:var(--theme-accent);margin:0;letter-spacing:.5px;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif}.refresh-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#888;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.refresh-btn:hover:not(:disabled){background:color-mix(in srgb,var(--theme-accent) 15%,transparent);border-color:color-mix(in srgb,var(--theme-accent) 40%,transparent);color:var(--theme-accent)}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.close-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#888;width:40px;height:40px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn:hover{background:#ff444426;border-color:#ff44444d;color:#f44}.settings-v2-nav{display:flex;gap:4px;padding:12px 16px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.05);overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}.settings-v2-nav::-webkit-scrollbar{display:none}.nav-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;background:transparent;border:1px solid transparent;border-radius:10px;color:#666;cursor:pointer;transition:all .2s ease;min-width:70px;position:relative}.nav-tab span{font-size:.7rem;font-weight:500;white-space:nowrap}.nav-tab:hover{background:#ffffff0d;color:#aaa}.nav-tab.active{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-accent) 20%,transparent),#0f172a);border-color:color-mix(in srgb,var(--theme-accent) 40%,transparent);color:var(--theme-accent)}.nav-tab.active span{color:var(--theme-accent)}.tab-indicator{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--theme-accent);opacity:0}.nav-tab.active .tab-indicator{opacity:1}.settings-v2-content{flex:1;overflow-y:auto;padding:16px 16px 40px}.settings-v2-content::-webkit-scrollbar{width:6px}.settings-v2-content::-webkit-scrollbar-track{background:#0003;border-radius:3px}.settings-v2-content::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--theme-accent) 40%,transparent);border-radius:3px}.settings-v2-content::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--theme-accent) 60%,transparent)}.tab-content{display:flex;flex-direction:column;gap:16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.settings-card{background:linear-gradient(135deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}.card-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-accent) 15%,transparent),#0f172a);border-bottom:1px solid rgba(255,255,255,.05)}.card-header svg{color:var(--theme-accent)}.card-header h3{font-size:.95rem;font-weight:600;color:#fff;margin:0;letter-spacing:.3px}.card-content{padding:12px 16px}.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.03)}.info-row:last-child{border-bottom:none}.info-label{display:flex;align-items:center;gap:8px;color:#888;font-size:.85rem}.info-label svg{color:#666}.info-value{color:#fff;font-size:.9rem;font-weight:500;text-align:right}.info-value.mono{font-family:SF Mono,Fira Code,monospace;color:var(--theme-accent);font-size:.85rem;font-weight:700}.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-success{background:#22c55e26;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.status-warning{background:#f59e0b26;color:#f59e0b;border:1px solid rgba(245,158,11,.3)}.status-danger{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.setting-row{padding:12px 0}.setting-label{display:flex;align-items:center;gap:8px;color:#888;font-size:.85rem;margin-bottom:12px}.setting-label svg{color:#666}.color-selector{display:flex;gap:8px;flex-wrap:wrap}.color-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;background:#ffffff08;border:2px solid transparent;border-radius:10px;cursor:pointer;transition:all .2s ease;min-width:70px}.color-option:hover{background:#ffffff0f;border-color:#ffffff1a}.color-option.selected{background:color-mix(in srgb,var(--theme-accent) 15%,transparent);border-color:var(--theme-accent)}.color-option span{font-size:.65rem;color:#888;text-transform:uppercase;font-weight:500}.color-option.selected span{color:var(--theme-accent);font-weight:700}.color-preview{width:40px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}.color-preview.theme-cyan{background:linear-gradient(135deg,#0ff,#088);box-shadow:0 0 10px #0ff6}.color-preview.theme-cyan_red{background:linear-gradient(135deg,#0ff,#f44,#088);box-shadow:0 0 10px #ff44444d}.color-preview.theme-cyan_blue{background:linear-gradient(135deg,#0ff,#48f,#088);box-shadow:0 0 10px #4488ff4d}.color-preview.theme-cyan_green{background:linear-gradient(135deg,#0ff,#4f8,#088);box-shadow:0 0 10px #44ff884d}.increment-selector{display:flex;gap:8px}.increment-option{padding:10px 16px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#888;font-size:.9rem;font-weight:600;font-family:SF Mono,monospace;cursor:pointer;transition:all .2s ease}.increment-option:hover{background:#ffffff0f;color:#fff}.increment-option.selected{background:color-mix(in srgb,var(--theme-accent) 20%,transparent);border-color:var(--theme-accent);color:var(--theme-accent);font-weight:700}.orientation-selector{display:flex;gap:12px}.orientation-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;background:#ffffff08;border:2px solid rgba(255,255,255,.1);border-radius:12px;color:#888;cursor:pointer;transition:all .2s ease;flex:1;max-width:140px}.orientation-option:hover{background:#ffffff0f;border-color:#fff3;color:#fff}.orientation-option.selected{background:color-mix(in srgb,var(--theme-accent) 15%,transparent);border-color:var(--theme-accent);color:var(--theme-accent)}.orientation-option svg{transition:transform .2s ease}.orientation-option.selected svg{color:var(--theme-accent)}.orientation-option span{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.setting-hint{font-size:.75rem;color:#666;margin-top:8px;padding-left:24px}.tariffs-notice,.info-notice,.save-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;background:color-mix(in srgb,var(--theme-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--theme-accent) 25%,transparent);border-radius:10px;font-size:.85rem;color:var(--theme-accent);font-weight:600}.save-notice{background:#22c55e14;border-color:#22c55e33;color:#22c55e}.footer-notice{text-align:center;padding:20px;color:#444;font-size:.75rem}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;color:#666;text-align:center}.loading-state svg,.empty-state svg{color:#444}.error-state svg{color:#ef4444}.error-state span{color:#ef4444}.retry-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:color-mix(in srgb,var(--theme-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--theme-accent) 40%,transparent);border-radius:8px;color:var(--theme-accent);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease}.retry-btn:hover{background:color-mix(in srgb,var(--theme-accent) 25%,transparent)}.profile-photo{display:flex;justify-content:center;padding:16px 0}.profile-photo img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid color-mix(in srgb,var(--theme-accent) 40%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--theme-accent) 30%,transparent)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}@media (max-width: 480px){.settings-v2-header{padding:12px 16px}.header-title h1{font-size:1.25rem}.nav-tab{padding:8px 10px;min-width:60px}.nav-tab span{font-size:.65rem}.settings-v2-content{padding:12px}.card-header{padding:12px 14px}.card-content{padding:10px 14px}.info-label,.info-value{font-size:.8rem}.color-option{min-width:60px;padding:8px 10px}.color-preview{width:32px;height:20px}}@media (orientation: landscape){.settings-v2-container{flex-direction:column}.settings-v2-header{padding:10px 16px;flex-shrink:0}.header-title h1{font-size:1.1rem}.settings-v2-body{display:flex;flex-direction:row;flex:1;overflow:hidden}.settings-v2-nav{flex-direction:column;width:100px;min-width:100px;padding:12px 8px;border-bottom:none;border-right:1px solid rgba(255,255,255,.05);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.nav-tab{flex-direction:column;gap:4px;padding:10px 8px;min-width:unset;width:100%}.nav-tab span{font-size:.65rem}.tab-indicator{display:none}.settings-v2-content{flex:1;padding:12px 16px;overflow-y:auto;height:100%}.card-header{padding:10px 14px}.info-row{padding:8px 0}.tab-content{gap:12px}.settings-card{border-radius:10px}}@media (orientation: landscape) and (max-height: 500px){.settings-v2-header{padding:8px 12px}.header-title h1{font-size:1rem}.settings-v2-nav{width:80px;min-width:80px;padding:8px 4px}.nav-tab{padding:8px 6px}.nav-tab svg{width:16px;height:16px}.nav-tab span{font-size:.6rem}.settings-v2-content,.card-header{padding:8px 12px}.card-header h3{font-size:.85rem}.card-content{padding:8px 12px}.info-row{padding:6px 0}.info-label,.info-value{font-size:.75rem}.orientation-option{padding:12px 16px}.color-option{padding:8px;min-width:55px}.color-preview{width:28px;height:16px}}.extras-title{height:20%;width:100%;margin-bottom:4px;display:flex;align-items:center;justify-content:flex-end;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:1em;letter-spacing:.01em;text-transform:uppercase;font-optical-sizing:auto;margin-right:-5px}.extras-value{height:80%;width:100%;flex-grow:1;display:flex!important;flex-direction:row!important;padding:0}.extras-symbol-column{width:17.5px;height:100%;display:flex;align-items:flex-start;justify-content:center;color:#fff;padding-top:2px}.extras-display-column{width:calc(100% - 17.5px);height:100%;display:flex!important;align-items:center!important;justify-content:flex-end!important;margin-right:-5px}.grid-top-right{position:relative;cursor:pointer}.grid-top-right:before,.grid-top-right:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-top-right:before{left:0;background:transparent}.grid-top-right:after{right:0;background:transparent}.grid-top-right:before:hover,.grid-top-right:before:active,.grid-top-right:before:focus{background:transparent}.grid-top-right:after:hover,.grid-top-right:after:active,.grid-top-right:after:focus{background:transparent}@media screen and (orientation: portrait){.extras-title{height:20%;width:100%;margin-bottom:4px;display:flex;align-items:center;justify-content:flex-end;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;margin-right:-5px}.extras-value{height:80%;width:100%;flex-grow:1;display:flex!important;flex-direction:row!important;padding:0}.extras-symbol-column{width:17.5px;height:100%;display:flex;align-items:flex-start;justify-content:center;color:#fff;padding-top:13px}.extras-display-column{width:calc(100% - 17.5px);height:100%;display:flex!important;align-items:center!important;justify-content:flex-end!important}.tarief-title,.tarief-value,.tarief-display-column{display:none!important}.grid-top-right{position:relative;cursor:pointer}.grid-top-right:before,.grid-top-right:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-top-right:before{left:0;background:transparent}.grid-top-right:after{right:0;background:transparent}.grid-top-right:before:hover,.grid-top-right:before:active,.grid-top-right:before:focus{background:transparent}.grid-top-right:after:hover,.grid-top-right:after:active,.grid-top-right:after:focus{background:transparent}}.tarief-title{height:20%;width:100%;margin-bottom:4px;display:flex;align-items:center;justify-content:flex-start;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:1em;letter-spacing:.01em;text-transform:uppercase;font-optical-sizing:auto;margin-left:-5px}.tarief-value{height:80%;width:100%;flex-grow:1;display:flex!important;flex-direction:row!important;padding:0}.tarief-display-column{width:100%;height:100%;display:flex!important;align-items:center!important;justify-content:flex-start!important;margin-left:-5px}.grid-top-left{position:relative;cursor:pointer}.grid-top-left:before,.grid-top-left:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-top-left:before{left:0;background:transparent}.grid-top-left:after{right:0;background:transparent}.grid-top-left:before:hover,.grid-top-left:before:active,.grid-top-left:before:focus{background:transparent}.grid-top-left:after:hover,.grid-top-left:after:active,.grid-top-left:after:focus{background:transparent}@media screen and (orientation: portrait){.tarief-title{height:20%;width:100%;margin-bottom:4px;display:flex;align-items:center;justify-content:flex-start;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;margin-left:-5px;visibility:hidden}.tarief-value{height:80%;width:100%;flex-grow:1;display:flex!important;flex-direction:row!important;justify-content:flex-end;padding:0;visibility:hidden}.tarief-display-column{width:100%;height:100%;display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;margin-left:-5px}.central-box:not(.collapsed) .tarief-title{justify-content:flex-end;margin-left:0;margin-right:-5px}.central-box:not(.collapsed) .tarief-display-column{justify-content:flex-end!important;margin-left:0;margin-right:-5px}.grid-top-left{position:relative;cursor:pointer}.grid-top-left:before,.grid-top-left:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-top-left:before{left:0;background:transparent}.grid-top-left:after{right:0;background:transparent}.grid-top-left:before:hover,.grid-top-left:before:active,.grid-top-left:before:focus{background:transparent}.grid-top-left:after:hover,.grid-top-left:after:active,.grid-top-left:after:focus{background:transparent}}.totaal-prijs-value{height:80%;width:100%;flex-grow:1;display:flex!important;flex-direction:row!important;padding:0}.totaal-prijs-display-container{width:100%;height:100%;display:flex!important;align-items:center!important;justify-content:flex-end!important;margin-right:-5px;position:relative}.totaal-prijs-euro-symbol{color:#fff;font-size:1.5em;font-weight:700;margin-right:4px;align-self:flex-start;padding-top:0}.totaal-prijs-title{height:20%;width:100%;margin-top:4px;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:1em;letter-spacing:.01em;text-transform:uppercase;font-optical-sizing:auto}.sexy-space{width:.5em}.grid-bottom{position:relative;cursor:pointer}.grid-bottom:before,.grid-bottom:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-bottom:before{left:0;background:transparent}.grid-bottom:after{right:0;background:transparent}.grid-bottom:before:hover,.grid-bottom:before:active,.grid-bottom:before:focus{background:transparent}.grid-bottom:after:hover,.grid-bottom:after:active,.grid-bottom:after:focus{background:transparent}@media screen and (orientation: portrait){.totaal-prijs-value{height:80%;width:100%;flex-grow:1;display:flex!important;flex-direction:row!important;padding:0}.totaal-prijs-display-container{width:100%;height:100%;display:flex!important;align-items:center!important;justify-content:flex-end!important;position:relative}.totaal-prijs-euro-symbol{color:#fff;font-size:1.3em;font-weight:700;margin-right:3px;align-self:flex-start;padding-top:6px}.totaal-prijs-title{height:20%;width:100%;margin-top:4px;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto}.grid-bottom{position:relative;cursor:pointer}.grid-bottom:before,.grid-bottom:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-bottom:before{left:0;background:transparent}.grid-bottom:after{right:0;background:transparent}.grid-bottom:before:hover,.grid-bottom:before:active,.grid-bottom:before:focus{background:transparent}.grid-bottom:after:hover,.grid-bottom:after:active,.grid-bottom:after:focus{background:transparent}}@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){.extras-title{height:15px;width:100%;margin-bottom:4px;display:flex;align-items:center;justify-content:flex-end;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;margin-right:-5px}.extras-value{height:40px;max-height:40px;width:100%;flex-grow:0;display:flex!important;flex-direction:row!important;padding:0}.extras-symbol-column{width:17.5px;height:100%;display:flex;align-items:flex-start;justify-content:center;color:#fff;padding-top:13px}.extras-display-column{width:calc(100% - 17.5px);height:100%;display:flex!important;align-items:center!important;justify-content:flex-end!important}.grid-top-right{position:relative;cursor:pointer;height:60px!important;max-height:60px!important}.grid-top-right:before,.grid-top-right:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-top-right:before{left:0;background:transparent}.grid-top-right:after{right:0;background:transparent}.grid-top-right:before:hover,.grid-top-right:before:active,.grid-top-right:before:focus{background:transparent}.grid-top-right:after:hover,.grid-top-right:after:active,.grid-top-right:after:focus{background:transparent}.tarief-title,.tarief-value,.tarief-display-column{display:none!important}.central-box:not(.collapsed) .tarief-title{visibility:visible}.central-box:not(.collapsed) .tarief-display-column{visibility:visible}.grid-top-left{position:relative;cursor:pointer;height:0px!important;max-height:0px!important}.grid-top-left:before,.grid-top-left:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-top-left:before{left:0;background:transparent}.grid-top-left:after{right:0;background:transparent}.grid-top-left:before:hover,.grid-top-left:before:active,.grid-top-left:before:focus{background:transparent}.grid-top-left:after:hover,.grid-top-left:after:active,.grid-top-left:after:focus{background:transparent}.totaal-prijs-value{height:45px;max-height:45px;width:100%;flex-grow:0;display:flex!important;flex-direction:row!important;padding:0}.totaal-prijs-display-container{width:100%;height:100%;display:flex!important;align-items:center!important;justify-content:flex-end!important;position:relative}.totaal-prijs-euro-symbol{color:#fff;font-size:1.3em;font-weight:700;margin-right:3px;align-self:flex-start;padding-top:6px}.totaal-prijs-title{height:15px;width:100%;margin-top:4px;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.85em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto}.grid-bottom{position:relative;cursor:pointer;height:65px!important;max-height:65px!important}.grid-bottom:before,.grid-bottom:after{content:"";position:absolute;top:0;width:50%;height:100%;z-index:10;transition:background-color .2s ease;pointer-events:auto}.grid-bottom:before{left:0;background:transparent}.grid-bottom:after{right:0;background:transparent}.grid-bottom:before:hover,.grid-bottom:before:active,.grid-bottom:before:focus{background:transparent}.grid-bottom:after:hover,.grid-bottom:after:active,.grid-bottom:after:focus{background:transparent}}@media screen and (orientation: landscape){.side-box.km-numpad{top:50%;left:35px;transform:translateY(-50%);width:calc(50% - min(25vw,245px) - 35px);max-width:210px;height:calc(100vh - 70px);max-height:250px;min-height:250px;z-index:60}}@media screen and (orientation: portrait){.side-box.km-numpad{top:35px;left:50%;transform:translate(-50%);width:calc(100vw - 70px);height:calc(50% - calc(100vh / 6) - 35px);z-index:60}}.popup-header{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;background:#000c;border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 2px 8px #0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.popup-title{color:#fff;font-size:14px;font-weight:700;margin:0}.popup-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.popup-close:hover{background:#fff3;border-radius:50%}.km-numpad-content{height:269px;padding:8px;display:flex;flex-direction:column;gap:6px}.km-display{height:35px;background:#000000d9;border:1px solid rgba(255,255,255,.3);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px;box-shadow:0 2px 6px #000000b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.km-value{font-size:16px;font-weight:700;color:#0ff;font-family:Courier New,monospace;line-height:1}.km-last{font-size:10px;color:#999;line-height:1}.km-warning{font-size:9px;color:#f44;background:#f443;padding:2px 4px;border-radius:2px;margin-top:2px}.km-numpad-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.km-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:Courier New,monospace;box-shadow:0 3px 8px #000c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.km-btn:hover{background:#fff3}.km-btn:active{transform:scale(.95)}.km-btn.km-number{background:#00ffff26;border-color:#0ff6;box-shadow:0 4px 10px #000000e6}.km-btn.km-number:hover{background:#00ffff40}.km-btn.km-decimal,.km-btn.km-backspace{background:#ffff0026;border-color:#ff06}.km-btn.km-decimal:hover,.km-btn.km-backspace:hover{background:#ffff0040}.km-actions{height:35px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.km-btn.km-clear{background:#ffa50026;border-color:#ffa50066;font-size:12px}.km-btn.km-clear:hover{background:#ffa50040}.km-btn.km-cancel{background:#ff444426;border-color:#f446;font-size:12px}.km-btn.km-cancel:hover{background:#ff444440}.km-btn.km-confirm{background:#22c55e26;border-color:#22c55e66;font-size:12px}.km-btn.km-confirm:hover{background:#22c55e40}.km-btn.km-confirm.disabled{background:#64646426;border-color:#64646466;color:#666;cursor:not-allowed}.km-btn.km-confirm.disabled:hover{background:#64646426;transform:none}.km-numpad{background:transparent!important}.km-numpad .side-top{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}.km-display{background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:8px 12px;font-family:Digital-7,monospace;font-size:1.4rem;color:#0f0;text-align:center;letter-spacing:2px;min-width:120px}.km-numpad .side-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;flex:1}.numpad-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;gap:6px;width:100%;height:100%;max-width:180px;max-height:200px}.numpad-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;font-family:Roboto,sans-serif;font-size:1.1rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-height:40px;display:flex;align-items:center;justify-content:center}.numpad-btn:hover{background:#fff3;border-color:#ffffff80;transform:translateY(-1px)}.numpad-btn:active{transform:translateY(0);background:#ffffff4d}.numpad-btn.clear{background:#ff646433;border-color:#ff646466;font-size:.9rem;box-shadow:0 4px 12px #000c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.numpad-btn.clear:hover{background:#ff64644d;border-color:#ff646499}.numpad-btn.backspace{background:#ffc86433;border-color:#ffc86466;font-size:1.3rem;box-shadow:0 4px 12px #000c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.numpad-btn.backspace:hover{background:#ffc8644d;border-color:#ffc86499}.km-numpad .side-bottom{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}.numpad-actions{display:flex;gap:8px;width:100%}.action-btn{flex:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;font-family:Roboto,sans-serif;font-size:.9rem;font-weight:600;text-transform:uppercase;cursor:pointer;transition:all .2s ease;padding:8px 12px;min-height:35px}.action-btn:hover{background:#fff3;border-color:#ffffff80;transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn.cancel{background:#ff646433;border-color:#ff646466}.action-btn.cancel:hover{background:#ff64644d;border-color:#ff646499}.action-btn.confirm{background:#64ff6433;border-color:#64ff6466}.action-btn.confirm:hover{background:#64ff644d;border-color:#64ff6499}.km-numpad.side-box{display:flex!important;grid-template-rows:none!important;grid-template-areas:none!important}.numpad-container-full{display:flex;flex-direction:column;width:100%;height:100%;padding:8px;gap:6px;background:transparent}.numpad-numbers-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;gap:6px;flex:1}.numpad-container-full .numpad-btn{background:#000000d9;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #000c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.numpad-container-full .numpad-btn:hover{background:#ffffff1a;border-color:#ffffff80;transform:scale(1.02)}.numpad-container-full .numpad-btn:active{background:#fff3;transform:scale(.98)}.numpad-container-full .numpad-btn.action-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.9rem;font-weight:600;text-transform:uppercase}.numpad-container-full .numpad-btn.action-btn:hover{background:#fff3;border-color:#ffffff80}.numpad-container-full .numpad-btn.action-btn.cancel{background:#ff646433;border-color:#ff646466}.numpad-container-full .numpad-btn.action-btn.cancel:hover{background:#ff64644d;border-color:#ff646499}.numpad-container-full .numpad-btn.action-btn.confirm{background:#64ff6433;border-color:#64ff6466}.numpad-container-full .numpad-btn.action-btn.confirm:hover{background:#64ff644d;border-color:#64ff6499}@media (orientation: portrait){.numpad-btn{font-size:1rem;min-height:35px}.km-display{font-size:1.2rem;padding:6px 10px}.action-btn{font-size:.8rem;padding:6px 10px;min-height:30px}.numpad-grid{max-width:160px;max-height:180px;gap:4px}.numpad-container-full .numpad-btn{font-size:1rem}.numpad-container-full .numpad-btn.action-btn{font-size:.8rem}}.meter-function-settings{padding:0 10px;margin:0 5px}.meter-function-settings .metric-title{height:35%;width:100%;display:flex;align-items:center;justify-content:center;color:var(--theme-color);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.7em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;text-align:center}.meter-function-settings .metric-value{height:65%;width:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.9em;text-align:center}.meter-function-settings .metric-value.dimmed{opacity:.4;color:#888}@media screen and (orientation: portrait){.meter-function-settings .side-top{grid-area:side-top;background:transparent;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"col1 col2 col3"}.meter-function-settings .side-middle{grid-area:side-middle;background:transparent}.meter-function-settings .side-bottom{grid-area:side-bottom;background:transparent;display:grid;grid-template-columns:.6fr 1fr 1fr;gap:6px;padding:6px 8px}.meter-function-settings .col1{grid-area:col1;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-function-settings .col2{grid-area:col2;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-function-settings .col3{grid-area:col3;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-function-settings .top-row1,.meter-function-settings .top-row2{display:none}}@media screen and (orientation: landscape){.meter-function-settings .side-top{grid-area:side-top;background:transparent;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr;grid-template-areas:"top-row1" "top-row2"}.meter-function-settings .top-row1 .metric-title,.meter-function-settings .top-row1 .metric-value{justify-content:flex-end;text-align:right;padding-right:8px}.meter-function-settings .row2-col1 .metric-title,.meter-function-settings .row2-col1 .metric-value{justify-content:flex-start;text-align:left;padding-left:8px}.meter-function-settings .row2-col2 .metric-title,.meter-function-settings .row2-col2 .metric-value{justify-content:flex-end;text-align:right;padding-right:8px}.meter-function-settings .side-middle{grid-area:side-middle;background:transparent}.meter-function-settings .side-bottom{grid-area:side-bottom;background:transparent;display:grid;grid-template-columns:.6fr 1fr 1fr;gap:6px;padding:6px 8px}.meter-function-settings .top-row1{grid-area:top-row1;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-function-settings .top-row2{grid-area:top-row2;background:transparent;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"row2-col1 row2-col2";overflow:hidden}.meter-function-settings .row2-col1{grid-area:row2-col1;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-function-settings .row2-col2{grid-area:row2-col2;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-function-settings .col1,.meter-function-settings .col2,.meter-function-settings .col3{display:none}}.meter-function-settings .side-middle{padding:8px;position:relative;z-index:70;pointer-events:auto}.meter-function-settings .switching-container{width:100%;height:100%;display:flex;background:#000;border:1px solid white;border-radius:8px;overflow:hidden;position:relative;z-index:60;pointer-events:auto}.meter-function-settings .switching-auto{flex:2;display:flex;cursor:pointer;transition:all .3s ease;pointer-events:auto}.meter-function-settings .switching-manual{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.9em;color:#fff;border-left:1px solid white;pointer-events:auto}.meter-function-settings .switch-option{flex:1;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.9em;color:#fff;transition:all .3s ease}.meter-function-settings .switching-auto.active .switch-option.selected,.meter-function-settings .switching-manual.active{color:var(--theme-color);background:transparent}.meter-function-settings .switching-auto.disabled,.meter-function-settings .switching-manual.disabled{opacity:.4;cursor:default}.meter-function-settings .increment-counter{display:flex;align-items:flex-start;justify-content:center;background:transparent;height:100%;padding-top:6px}.meter-function-settings .increment-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.9em;color:var(--theme-color, #00e6e6);text-align:center}.meter-function-settings .timer-box{display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 2px;margin:2px;transition:border-color .3s ease,transform .2s ease;height:calc(100% - 4px);width:calc(100% - 4px);min-width:0;position:relative;cursor:pointer}.meter-function-settings .timer-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffff05;border-radius:6px;opacity:0;transition:opacity .3s ease;pointer-events:none}.meter-function-settings .timer-box:hover:before{opacity:1}.meter-function-settings .timer-box:hover{transform:scale(1.02)}.meter-function-settings .timer-box.active:hover{border-color:#fffc}.meter-function-settings .timer-box.inactive:hover{border-color:#fff6;opacity:.6}.meter-function-settings .timer-box.active{border-color:#fff}.meter-function-settings .timer-box.inactive{opacity:.4;border-color:#fff3}.meter-function-settings .timer-icon{font-size:.6em;color:var(--theme-color, #00e6e6);margin-bottom:1px;width:100%;text-align:center;min-width:0}.meter-function-settings .timer-display{font-family:Courier New,monospace;font-weight:700;font-size:.8em;color:#fff;text-align:center;margin-bottom:1px;width:100%;min-width:0;white-space:nowrap;overflow:hidden}.meter-function-settings .timer-mode{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.7em;color:var(--theme-color, #00e6e6);text-align:center;margin-bottom:1px;width:100%;min-width:0}.meter-function-settings .timer-duration{font-family:Courier New,monospace;font-weight:700;font-size:.55em;color:#fff;text-align:center;width:100%;min-width:0;white-space:nowrap;overflow:hidden;pointer-events:none}.meter-function-settings .side-top{cursor:pointer;transition:all .2s ease}.meter-function-settings .side-top:hover{background-color:#ffffff1a;border-radius:8px;transform:translateY(-1px)}@media screen and (orientation: portrait) and (max-height: 700px){.meter-function-settings{padding:0 6px;margin:0 3px}.meter-function-settings .metric-title{font-size:.6em;height:30%}.meter-function-settings .metric-value{font-size:.8em;height:70%}.meter-function-settings .side-bottom{padding:4px 6px;gap:4px}}@media screen and (min-height: 750px){.meter-function-settings{display:none!important}}.meter-trip-summary{padding:0 10px;margin:0 5px}.meter-trip-summary .metric-title{height:35%;width:100%;display:flex;align-items:center;justify-content:center;color:var(--theme-color);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:600;font-size:.7em;letter-spacing:.025em;text-transform:uppercase;font-optical-sizing:auto;text-align:center}.meter-trip-summary .metric-value{height:65%;width:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.9em;text-align:center}@media screen and (orientation: portrait){.meter-trip-summary .side-top{grid-area:side-top;background:transparent;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"col1 col2 col3"}.meter-trip-summary .side-middle{grid-area:side-middle;background:transparent}.meter-trip-summary .side-bottom{grid-area:side-bottom;background:transparent;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 8px}.meter-trip-summary .col1{grid-area:col1;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-trip-summary .col2{grid-area:col2;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-trip-summary .col3{grid-area:col3;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-trip-summary .top-row1,.meter-trip-summary .top-row2{display:none}}@media screen and (orientation: landscape){.meter-trip-summary .side-top{grid-area:side-top;background:transparent;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr;grid-template-areas:"top-row1" "top-row2"}.meter-trip-summary .top-row1 .metric-title,.meter-trip-summary .top-row1 .metric-value{justify-content:flex-end;text-align:right;padding-right:8px}.meter-trip-summary .row2-col1 .metric-title,.meter-trip-summary .row2-col1 .metric-value{justify-content:flex-start;text-align:left;padding-left:8px}.meter-trip-summary .row2-col2 .metric-title,.meter-trip-summary .row2-col2 .metric-value{justify-content:flex-end;text-align:right;padding-right:8px}.meter-trip-summary .side-middle{grid-area:side-middle;background:transparent}.meter-trip-summary .side-bottom{grid-area:side-bottom;background:transparent;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 8px}.meter-trip-summary .top-row1{grid-area:top-row1;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-trip-summary .top-row2{grid-area:top-row2;background:transparent;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"row2-col1 row2-col2";overflow:hidden}.meter-trip-summary .row2-col1{grid-area:row2-col1;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-trip-summary .row2-col2{grid-area:row2-col2;background:transparent;display:flex;flex-direction:column;overflow:hidden}.meter-trip-summary .col1,.meter-trip-summary .col2,.meter-trip-summary .col3{display:none}}.meter-trip-summary .side-middle{padding:8px;position:relative;z-index:70;pointer-events:auto}.meter-trip-summary .summary-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid white;border-radius:8px;overflow:hidden;position:relative;z-index:60;pointer-events:auto;cursor:pointer;transition:all .3s ease}.meter-trip-summary .summary-container:hover{background:#ffffff1a;border-color:#fffc}.meter-trip-summary .summary-button{display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.85em;color:#fff;pointer-events:none;flex-shrink:1;margin-right:4px;min-width:0}.meter-trip-summary .subscription-tag{display:inline-flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:800;font-size:.5em;color:#000000d9;text-transform:uppercase;letter-spacing:.2px;text-shadow:0 1px 1px rgba(255,255,255,.3);background:var(--theme-color, #00e6e6);border-radius:8px;padding:2px 6px;transition:all .3s ease;box-shadow:0 1px 2px #0003;pointer-events:none;height:14px;min-width:30px;max-width:45px;flex-shrink:0}.meter-trip-summary .subscription-tag.subscription-starter{background:linear-gradient(135deg,#33f0f0,#fa3)}.meter-trip-summary .subscription-tag.subscription-pro{background:linear-gradient(135deg,#33f0f0,#a5f)}.meter-trip-summary .subscription-tag.subscription-premium{background:linear-gradient(135deg,#33f0f0,#4af)}.meter-trip-summary .timer-box{display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:4px 2px;margin:2px;transition:border-color .3s ease,transform .2s ease;height:calc(100% - 4px);width:calc(100% - 4px);min-width:0;position:relative}.meter-trip-summary .timer-icon{font-size:.6em;color:var(--theme-color, #00e6e6);margin-bottom:1px;width:100%;text-align:center;min-width:0}.meter-trip-summary .timer-display{font-family:Courier New,monospace;font-weight:700;font-size:.7em;color:#fff;text-align:center;margin-bottom:1px;width:100%;min-width:0;white-space:nowrap;overflow:hidden}.meter-trip-summary .timer-mode{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700;font-size:.7em;color:var(--theme-color, #00e6e6);text-align:center;width:100%;min-width:0}.meter-trip-summary .side-top{cursor:pointer;transition:all .2s ease}.meter-trip-summary .side-top:hover{background-color:#ffffff1a;border-radius:8px;transform:translateY(-1px)}@media screen and (orientation: portrait){.meter-status-connection .side-top{grid-area:side-top;background:#ffff001a;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"col1 col2 col3"}.meter-status-connection .side-middle{grid-area:side-middle;background:transparent}.meter-status-connection .side-bottom{grid-area:side-bottom;background:#ffff004d}.meter-status-connection .col1{grid-area:col1;background:#ff03}.meter-status-connection .col2{grid-area:col2;background:#ffff004d}.meter-status-connection .col3{grid-area:col3;background:#ff06}}@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){.meter-status-connection .side-top{grid-area:side-top;background:#ffff001a;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"col1 col2 col3"}.meter-status-connection .side-middle{grid-area:side-middle;background:transparent}.meter-status-connection .side-bottom{grid-area:side-bottom;background:#ffff004d}.meter-status-connection .col1{grid-area:col1;background:#ff03}.meter-status-connection .col2{grid-area:col2;background:#ffff004d}.meter-status-connection .col3{grid-area:col3;background:#ff06}}@media screen and (orientation: landscape){.meter-status-connection .side-top{grid-area:side-top;background:#ffff001a;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;grid-template-areas:"top-row1 top-row1" "row2-col1 row2-col2"}.meter-status-connection .side-middle{grid-area:side-middle;background:transparent}.meter-status-connection .side-bottom{grid-area:side-bottom;background:#ffff004d}.meter-status-connection .top-row1{grid-area:top-row1;background:#ff03}.meter-status-connection .top-row2{grid-area:top-row2;background:#ffff004d;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"row2-col1 row2-col2"}.meter-status-connection .row2-col1{grid-area:row2-col1;background:#ff06}.meter-status-connection .row2-col2{grid-area:row2-col2;background:#ffff0080}}.login-screen{--color-bg-primary: #0a1628;--color-bg-secondary: #0f1d32;--color-bg-surface: #1a2a42;--color-accent: #00a8cc;--color-accent-dim: rgba(0, 168, 204, .15);--color-text-primary: #f8f9fa;--color-text-secondary: rgba(248, 249, 250, .6);--color-text-muted: rgba(248, 249, 250, .4);--color-border: rgba(248, 249, 250, .1);--color-error: #e74c3c;--color-success: #27ae60;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--transition-fast: .15s ease;--transition-normal: .25s ease}.login-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:var(--color-bg-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--color-text-primary);z-index:9999;overflow:hidden}.login-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.bg-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at top left,rgba(0,168,204,.08) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(0,168,204,.05) 0%,transparent 50%),linear-gradient(180deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 100%)}.bg-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:40px 40px;opacity:.5}.login-header{flex-shrink:0;padding:40px 24px 24px;z-index:1}.logo-container{display:flex;align-items:center;gap:16px;animation:fadeInDown .5s ease}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.logo-image{width:56px;height:56px;object-fit:contain}.logo-text h1{margin:0;font-size:24px;font-weight:700;letter-spacing:2px;color:var(--color-text-primary)}.logo-tagline{font-size:12px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.5px}.login-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 24px;z-index:1;overflow-y:auto}.login-options{display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%;margin:0 auto;animation:fadeInUp .4s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-option{display:flex;align-items:center;gap:16px;padding:20px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-align:left}.login-option:hover{background:#1a2a42cc;border-color:var(--color-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}.login-option:active{transform:translateY(0)}.login-option:disabled{opacity:.5;cursor:not-allowed;transform:none}.login-option.primary{background:var(--color-accent-dim);border-color:var(--color-accent)}.login-option.primary:hover{background:#00a8cc40}.option-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-dim);border-radius:var(--radius-md);color:var(--color-accent);flex-shrink:0}.option-icon svg{width:24px;height:24px}.option-content{flex:1;display:flex;flex-direction:column;gap:4px}.option-title{font-size:16px;font-weight:600;color:var(--color-text-primary)}.option-desc{font-size:13px;color:var(--color-text-secondary)}.option-arrow{width:20px;height:20px;color:var(--color-text-muted);flex-shrink:0}.qr-container{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:320px;margin:0 auto;animation:fadeInUp .3s ease}.scanner-frame{position:relative;width:260px;height:260px;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow-md)}.scanner-video{width:100%;height:100%;object-fit:cover}.scanner-canvas{display:none}.scanner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.scanner-target{position:absolute;top:30px;right:30px;bottom:30px;left:30px}.corner{position:absolute;width:24px;height:24px;border:3px solid var(--color-accent)}.corner.tl{top:0;left:0;border-right:none;border-bottom:none}.corner.tr{top:0;right:0;border-left:none;border-bottom:none}.corner.bl{bottom:0;left:0;border-right:none;border-top:none}.corner.br{bottom:0;right:0;border-left:none;border-top:none}.scanner-hint{font-size:14px;color:var(--color-text-secondary);text-align:center}.pin-container{display:flex;flex-direction:column;gap:24px;max-width:320px;width:100%;margin:0 auto;animation:fadeInUp .3s ease}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-size:13px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.text-input{width:100%;padding:16px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:16px;font-family:JetBrains Mono,SF Mono,monospace;letter-spacing:1px;text-align:center;outline:none;transition:all var(--transition-fast)}.text-input::placeholder{color:var(--color-text-muted);letter-spacing:.5px}.text-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-dim)}.pin-display{display:flex;justify-content:center;gap:10px}.pin-digit{width:44px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:24px;font-weight:600;color:var(--color-accent);transition:all var(--transition-fast)}.pin-digit.active{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-dim)}.pin-digit.filled{background:var(--color-accent-dim);border-color:var(--color-accent)}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.numpad-key{aspect-ratio:1.4;display:flex;align-items:center;justify-content:center;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:24px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.numpad-key:hover{background:#1a2a42cc}.numpad-key:active{background:var(--color-accent-dim);border-color:var(--color-accent);transform:scale(.95)}.numpad-key:disabled{opacity:.3;cursor:not-allowed}.numpad-key.action{background:transparent;border-color:transparent}.numpad-key.action svg{width:24px;height:24px;color:var(--color-text-secondary)}.numpad-key.action:hover svg{color:var(--color-text-primary)}.btn-back{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);margin-top:8px}.btn-back svg{width:18px;height:18px}.btn-back:hover{color:var(--color-text-primary);border-color:var(--color-text-muted)}.biometric-setup-dialog{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a1628f2;z-index:100;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dialog-content{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);max-width:320px;text-align:center;animation:scaleIn .3s ease}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.dialog-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-dim);border-radius:50%;color:var(--color-accent)}.dialog-icon svg{width:32px;height:32px}.dialog-content h3{margin:0;font-size:18px;font-weight:600;color:var(--color-text-primary)}.dialog-content p{margin:0;font-size:14px;color:var(--color-text-secondary);line-height:1.5}.dialog-buttons{display:flex;gap:12px;width:100%;margin-top:8px}.btn-primary,.btn-secondary{flex:1;padding:14px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-primary{background:var(--color-accent);border:none;color:#fff}.btn-primary:hover{background:#00b8dc}.btn-secondary{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary)}.btn-secondary:hover{color:var(--color-text-primary);border-color:var(--color-text-muted)}.login-error{padding:14px 20px;background:#e74c3c1a;border:1px solid rgba(231,76,60,.3);border-radius:var(--radius-md);color:#e74c3c;font-size:14px;text-align:center;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.login-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px 24px;z-index:1}.security-badge{display:flex;align-items:center;gap:8px;color:var(--color-success);font-size:12px;font-weight:500}.security-badge svg{width:16px;height:16px}.version{font-size:11px;color:var(--color-text-muted)}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#0a1628f2;z-index:200;animation:fadeIn .2s ease}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--color-text-secondary);font-size:14px}@media (max-height: 600px){.login-header{padding:24px 24px 16px}.logo-image{width:44px;height:44px}.logo-text h1{font-size:20px}.login-option{padding:16px}.option-icon{width:40px;height:40px}.pin-container{gap:16px}.numpad-key{aspect-ratio:1.6;font-size:20px}.pin-digit{width:38px;height:44px;font-size:20px}}@media (max-width: 350px){.pin-display{gap:6px}.pin-digit{width:34px;height:42px}.numpad{gap:6px}}@media (orientation: landscape) and (max-height: 500px){.login-header{padding:16px 24px 8px}.logo-container{gap:12px}.logo-image{width:40px;height:40px}.login-main{padding:0 24px}.login-options{gap:8px}.login-option{padding:12px 16px}.option-icon{width:36px;height:36px}.option-icon svg{width:18px;height:18px}.option-title{font-size:14px}.option-desc{font-size:11px}.login-footer{padding:8px 24px 12px}.pin-container{flex-direction:row;flex-wrap:wrap;max-width:100%;gap:16px}.input-group{flex:1;min-width:200px}.numpad{flex:1;max-width:280px}.numpad-key{aspect-ratio:1.8;font-size:18px}.btn-back{width:100%;flex-basis:100%}}