:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: rgba(24, 24, 26, 0.9);
  --panel-strong: #1c1c1e;
  --text: #f5f5f7;
  --muted: #9b9ba1;
  --line: rgba(255, 255, 255, 0.12);
  --red: #ff3b30;
  --green: #34c759;
  --amber: #ff9500;
  --blue: #0a84ff;
  --label-color: var(--muted);
  --label-size: 0.68rem;
  --label-weight: 800;
  --label-line-height: 1.15;
  --label-letter-spacing: 0;
  --value-color: var(--text);
  --value-size: 0.94rem;
  --value-weight: 750;
  --value-line-height: 1.16;
  --value-letter-spacing: 0;
  --label-value-gap: 4px;

  /* Tesla's own control-panel icons, cropped from a reference screenshot and
     alpha-masked (see the icon-extract scratch script) rather than hand-drawn
     approximations - embedded as data URIs so no new binary asset file is
     needed in the repo. Sentry gets two variants since its "on" state is
     solid red, not just full-opacity white like every other icon here. */
  --icon-door: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAACalBMVEX+/v7////+/v7///////////////9MaXH////////////////////////////+/v7////////////////////////////+/v7////////////+/v7////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7////+/v7////////////////////////////////////////////////////////////+/v7////////////////////////////////////////////////////+/v7////////////////////////////////////+/v7////////////////////////////////////////////////////+/v7////////////////////////////////////////////////////////////////////+/v7////////////////////////////////////////////////////////////////////////////////+/v7////////+/v7////////////////////////+/v7////////////////////////////+/v7////////////////+/v7////////////////////////////////////+/v7+/v7////+/v7////////////////////+/v7////////////////////////mEvOhAAAAznRSTlPKBNHJx8jLAAIDxgGDD9DFztwF2tMGegfd183PDYHM0tvZE7rVqqu9EknEIBAfwRG5rnKYGhQMqSeE3gi4ag5D374mKsLWLYwzCtiXJbEJvHshMRV1nG+smhuAC5OZKWc0oY9HqDJ0L6Qiu14of6Dhsmiiw4W0tixIJB6QFnlkLjWetbdZSrM3d3M7YFHUgngwpiN8nZQ6Y0CvVaVscEE5Uq2VsF+KwDh2F58Zi4eIZR1almlxp0uSPD5NVGJdHH5P4hhhZlA2o4lTWEJujZJNe3gAAAAJcEhZcwAAA+gAAAPoAbV7UmsAAAV8SURBVFjD7Zblc9tIGIdXFqzWm8qyK9fUGGI7sR2www1jw3RJmjTMZWZOGa7MzIzHzMz/061kiC/QpHNfbm7yszWW1tpnX9QKwH8pMAuYBfw3APyYEAqfYahPepqRnFg3eqb/9mdFQ96iK5/uba5YtTy5Y1dSHoaI14VvnRQAUUVfZWrKyWKt0ZhrNNrt5Fc+MeZKKVcHC5bqIEKYxxMAYcGsPmauySWwG1NKGp2B/PxAIOB0BlaUpGykLS6TyXrDA+X1pgAgmBRTzDo/WtO9+sP1K699POT1btu27ZB36MTK9WmdO/edzacdlS14cgDiMYL6NqMv21sN8WQxw7DrygbWFGOAk7pAkS+sSBDdvdBApNfrdUHp9ZR8RcbyKBznZlUL4CRBVBAYfZmbchxWIzSWFApFTjCPDNBbrjrfAMcDUDARsGPAMbArNBmPS29QBuw2N/qjADhkPqJ0Oh72S5bV0BCO0WTSw5s+0yWMKYqYBqLDL8dIt8e43wt1E5aNko4va1R9Y1CCikAkoST9pY+bYcc+x4YkRMkhQNQEKcPEhGViIAnW3e71K6VMKe7ius544QKsslhiYN5ry5+k+oav5gh8ZqvftIoAgmxYOKgVyx/Ag9+l7oUI67OSWjLeTV6+fUHv1qXNzUsrylbVnUvckdHi79JBjFsCwm7oZDnJTQChAtmlLrc4d3guuuq/OrinIK0ppvJi+qKB6+72+v3OFVvWpWYv23Chp7ty0/m0Dy6v/LxE3PwjJwmilgBI1yUnJ2ZUtHPmbjhKq8XiXK3dUbPQJdlUKkEUrRzHmc2iRSCyuVwmu91oXGtlzZbh1LupgwA33Fu8aDH59vwi5ZfyBQ4NrfFpNBq1Ws3IYiNiGDKkVv7UaADNHv6pbGQkD+ARk80m2cghibGwLIVhAeDADEQL3c+J6wAV0ITLMmpGvP60K8ekBjMEANa05jlCgHqf3E6Tw7yuDB5UacDMpZF+bcBAlxK8En2/wSKNVUPPdDqrBpz0BwYdIq2YLGTD7fsbD+Ra1cwMGDTDiDVMPfsXD97mFJ+tdCv8vfjlkRdbHBJNos1OTaFZRsNK2gOVh57Qh3lwIhgxa/lQwyshBxb+/EOPtdglcGofSaRaSWe05AwKLq2w6PJjPyygfTx4Jwgwl4zMGRBeQR3kvz7UNugur1lrtzsc9rnjpC3Watw7075NxBDr/qQBAmlBgNjY63GLMTCrmjQS+n701p0Hbafn7W5qmvcP7b6551rR1gxS/nnVDVSfDDgaBFhK6jzxqnuQimo6fXXW/PmFhfMjyuoy4Ojn60PAUaApBEgo9QyLj16u/6Kof2/V1h2ZcZ5CamIn835PXGZy2ZH+qlt3+jaVcwRwOgxYEBcPOIdqY/7V1NTsfbW16bWfvMjpjO2MPRUbVs7DnT3ptenPhu/fv5v/SLCbZQsKogAcy9BmUVCpJNdCk8lU49Bqya6mjcg+10HGSZuqVCqzlWZIAejBexEXCIAkn6bDvSc3HxPqyZBY8gn3p1IoHAoVEm0mMWjnWHZczUxdThyQ7yUu+OVlAS0GXaBJnc0IIHcg6QdOB/h4VjZKXFEaBAD6DfqRNlOAPy7SnJUTShQLFB9m9DgIdQAC2L/u8ObN9VuyzylBfJP1ZRPIxoIT3yJanogys7ngdJaZVpFAofBjnRRmpjsEEFXTyhKab5UBoT0MxgUBnHrN6pyY1yrnVDpDYkDMUCMQ3sARzBxWCklweg2eOa9VUuGZBFEBJKCx3RlmnmVJ2WmE9u2Qn+blkKecZqUsnWMABOekLxRsNmHtMqgP7sJTSw9rT0o2SZAORFmAUdXRtGNLlrQWQR0/jRCsantybElr6yV+9m19FvA/AfwN1/A3gcuZyA4AAAAASUVORK5CYII=");
  --icon-door-front-left: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABSCAYAAAAM92dlAAAKpUlEQVR4nOVcWYxkVRn+6lZ1V3c10zA6zMCIMA4io6Kjoh0NESUkBhSDC4maGFckGhJjXBN9cXtREzUqCkaj8uDyoEYfNGKIcYlEVNxwY0RhEmyHGWd6pmerphZzzPeZr06f21XTfWox/Sc31X3vrXv///z7cqry4OIhbEYosEmhwCaF2hjfXQWwwONCABcD2AKgEeHX5LEI4B8A7gXwKwD3b+TllRHr+GMAPAfA8wE8GcA5JHQWQJ2LIWLB/wO0ee5UwJl/PwjgbgA/A/BrAEcnjfAGgNcDeC6ASwGcZ9dEWJfEifgAHfvUtTYJ7/A4DWAZQCDirwC+wMUYO+E3A3gFOb3NOFclIRLjBs+F6y0SNcVn1HjtuEkEeI+uBUk4wUW5A8AXAfxiHIRfDeBdAHYB2MpzK6a/Il7Qjv53EQ8HqP+n7N4aJUWLUPD6FO3B1wF8wtSmB4Zh3F5MTl9GZIScRLXNRThEA3U/Ef0Xz5/kZ4vfCcc0gHmqySUAHkspOpfXJCGzfN92ADfyng8BeHjYhF8L4N0A9pDAKXJhlsT8ncboW/1EcQAIxL2IC70XwCM0luC7w6K8kn9/AMCRYYn64wF8jFa7ypWXyP4ewK0AfkzO5obd5PBLqFpzJuJBgm4B8NFhBTCvBvA0imaNhmYJwJcAvBbAN4ZENChJ7wXwNgB/IfdBNQi24RoAVwyD8CeR6Hm6mPDiYyQ6iP5+jAbu4AL8hOrVJC5PZeyQnfDLGJBIvJvU5dvNH48K7qI//wPxqZD4K2l7shL+OAAzNGBVvuhHI+R0DD8E8HMLfALsBHB+TsK3MNau8QhE7wPwO4wPVugmm+T6LHGby0l4sKKPIsdBjt9H4scJx+lO23SpAb96Tj9eNbcR/j6LLwsvHifMWtTXsEAqG8cl4gWPZS7AuHP9EPmBXNffp3QxB3J6KEiwgpdx5vrS89OGS8BTiU8W5CROcmXd6PwgxnGe4abSUumisrk2s6/jjLs7ZyCJcUKUVceVHg4CQd9uYFy/JxJJf17wv7BUFSR+ioSHOOHL9Ncp6NqxCmrYODhi/bj8GgAvI8FnW3RVsSyrQ5dY8HyN54LoXmSZ26sAvID++jYA90Tv0sL5ImbneDEAxwOib2FC4cavblUW5dUylh2rzkiq3Jg2KDmhyPHBKHYQQ1So6IEcxq1reghD0Ll/PhG8xHLyaTNAK1GpKf70Z3ajd4Y44lksfsTgi7TqwkZBBklcaVmVRMRfSAQb1FGVnKo8555BC1MtKThKdEXMIwxOQtFhYCg2Tvd/iwAL5KAQTC3qPNPUZlRUbEbfi/VRBCPSd79XEuDvrHJBWykGF9gYXEu9bUR+vIhqXUctkpumeHeiqqlKUq1ETCAiXAriErSkTaCEyV1sFlG/nvWsHZGBEhdc1JsW0oL3O2cdYUTV2BSu8vXidIXPj0ESkrywXqLfzlSvQsRdejoR4SGM/bdxQhVSFRRjfRbo+3qWuCyL7++MCS9M1LMQfj2At9IXV8xCy+Ku8pkkXBwvovd7HFAGsceQPgv/JoMbB+EmNemB2jrqajfTLa3w4WoMlHFLiB0i8arJxUhq8Rzi2rvX1FciVSoLnmLXesbGLZRxX8foqeNJvXFNz3N3IxCi/8uJDbFpIh+LpoiVHnuDQddD9Ie4fGzg2dkZc/ylAN7PgsMcRTeI9T8ZKgYf+szoO7ElXSTXQ5SFBKcUgztOWkyP4+We6vaMexIhq6QleBCsh/BrALyP0VfBgKHBLOkrDBNvsjg76T4AfAfA0xlsbGXBomre4LRx1/32lHkNuU25tnD/31jULKv4SMp6Wkn9CL+BRJ9rLiggeJh9qdvYH1OryImOjVzw4++k5GwzZJaNWI/XYa6ooDpMkfgQDIEl7IMlLsvj+1U6XluD6Jez8XcOc2b56OCWPkeiQQIUSaWQRmIB+pWl4u+qJay28AEMDikvgzLCrwPwDnJzxhKDsLqfBvBZu3c5mmL4v4Ba4lyw3G9id2SaBkk6/Sn2wBymzWqK28nkf8TQPhPCn0E/fTFz2BYLBosU71vX85JJhFr0f52irRz2GPX34wA+X/KMEwnfnNSrEYOPmayCItF3Cl3NBxhlBf39zBpEg8avX8g5bhjIqn8YwJ1sAt7N3vZa0LJIzScgJhpqJefv4rHeZ467mdAXiozP8kEcbAbCq4lzk67zyN3mKS3gTxoUGZ6R4u6k6Xh1WAh2JziQScYUxRBeNO4u6UBQZFzVOC2dFBgoclsPuPvywt4khK1D1/FJh84w++MxDMLxnazG7OCArhoF1ai42GLV5wCLivtTHdA+FdoeyG2I/AWad4thFwf395LgGYvz1SJ2vVRNTtJ52DozX+PRD4bSLU1BZ40S9Rs4V3raetwOyQaANSwu4OcyS91haPgjAB5K3O9Nix7IreNeW48XdYEdmCt5T50pbWFDOmoraZeCDnCBVKDssA54ERuXb1wDnyQUeejtEU3pfPzSvZyG0OrXWcRoWtU0zvCmeFR5r7erNNB/HiUoDAeUQWWcVn2b7SBw8ZtL9L0ELqKq8kgCZswAPoETyg4qKyfVrkB+UB/NkW6wNg+K6IoNCOhTIHHX4E/FCERi2gL8PyU1un/ohNdKjMk2HtMcEmgTUc2hDdIs9PGQdtQKTo2biQHFKAiv8tOnF8CW0TzfN8tjib74LGs9wTgszndtqkqurmv9NC2IdjsJfKGyTkSkIN5GFa/+SSI8R+IVhMhPtxJi6kMDWlAPmryROHAQVSAPSB+9seDiu5/NRfntwG2QeN9clxr5gBkp6f4K/bjuOZyYj9cC+XNGbtUDp78J4KdEeMb64rLOyQnEiKsV+54W6z6WxL9b8l0NCPZALlH3sapWScj6GwYwoQP7QvbUp0i4ZstTI1pyRxr/XOJCHiTRPwDw7RK8SgsjtQxEt0v60KlnH+AesFto5bfTze3g/xoA9KkoxeXLFOmHmKgcNJVJQTUaNuqBXBx3fyuu9cueQjNy2FuZ5RE6sQQUGR4ukfZF1H7QcULHbEeN+FRyEq64WcFIwQwqJBDjBOX1M8SvZxQkB+EHqHtuyELf7SqMDwJdTySHjzJM9tmaLIQ3ubfzJC1vwemoK3xn34jhRg7xa3fxUR5HcvvxP3N4ADYKdh0LBGFUbFQQFvw9AN5ML7HMKDEMN/zRJ6NyWfVfcj/4br5IwcYC/XUYJPotgO8TgZwwy+LG8wA8m++btSxwmZFjCKCWchO+zJm3XSR2Cyeb6hz/DMhczjnYQ/TF+/j3EX7/ICXF96QonC1opB5Nrqr6cgF/PWA7OVyzScclvr/FfevfG+ZvRFzNbcx7udrTibxYo1saEWvZnHoZ4RoO9opM3faM+qiodkgoBQ7Df5+06emhZGd3kps3cSJyp5WHZ2zqeGvJzoNUySqGWkRgxZKdY4z+ZvjbMLcznF0a5c+hLHDa+SoaF1VT4/RTWZSHvohKRppW9j0vmnLs0KMoe9tHYr+6VmRYGcEP4FxK3X8KN9hfboO8WoCuRVYScRGpogRsgXSc4M8gPcB5nXv5UwlKWSfmJ4/ASsweBjm7uUPpbBoo/aSJFkC636S+Pky3uUhL/acBuyoTQXg/0A7DqhnATdHL7vBzqEMG/wE9ciSorYn/4wAAAABJRU5ErkJggg==");
  --icon-door-front-right: url("data:image/png;base64,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");
  --icon-door-rear-left: url("data:image/png;base64,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");
  --icon-door-rear-right: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAABTCAYAAAAsnA/DAAAKp0lEQVR4nOVcW6xcVRn+Zs+eOT3D6TmlF1qLXAqKoOKRegtBRKKBcAsqiYD65oNRgw8+kPBoNMaoibcYJTGKDz4Qbw8qEAGtCikB1CiNEsViWy4t9lDo4UyZOXvvMb/5vuTvcs/t7D2Xtn+yMzP7svb613+/rKnse/4wTjWIcApChFMQ4pLGWQ/gQgDnANgM4HSes/ET3rMKIAVwFMCzAP4D4F8ADuAEQvpsAJcCOBfAGwGcAWAjj1kADQAtAB2+xz4NmgCOAHgFwEEAzwH4G4A/AXiCz0wV0q8HcBWA8wCcBeBMIr8A4FU3ZocUrgOo8nzKc7YYp/GccUebi/AMgBdI+d8BuB8jgsqA2nsHgA8AuJLfN5KNm0QwI1IzDsGqo5pf3Cqv67sg5Xi2ME8D+CuAXwB4EBNA+sMAbgVwEYANDrGW+75KxKpOdoVU6n4Led3b4meNz/1vTrz/FVL9NwC+D2D/ONh7FsCnAXwIwPmcTMNNboZUaVIpGXseJqsu80gcNWM+cxq5ZD1FwxZyE0UB5ByzKvMALqYImb64E8BfRon0DIBPAPgoNbKUUJtIplRA95MNnwTwIoBjAFaIrLF8HlS5eHUnJjsBvA/AIhfb7lnHMQz5G/jMVwHsGRV7fxzAJ0mJmErKXroE4A9Edk9ZK0/YRuTfA+AKUjlzCnKF7/0cTV6pSF8I4MsALicrV0jppwD8HMBPAezF6MBY+0YANwF4NzmhTeqbXH8XwLeLviCEy8lmIJXr1KbfAPCVESMMUtcW90sAfg3gZZ43kdpKLjAOLA3pzQCuJyt3+CJzIO7mMU4w8fkBgD/ytzy7i+gUlYb0paSyFJch/TiAH2IysBvAr2gRYh5GmHeUifROp9FXaUcfpQKbFPyWPrpMX5VmTD5CIaRjeltVyrENeriopiwBDvOInI/QIOKFka6777LFyTgCgD5govYS5yEWl5tb2DmJnXvoWUkKZFIgFzfiIfOFMiidOZscBQsxLSAf3ua5Zoj7XE+GRLrBo0adEAUUk4d1jJ9ZgTmWwt550G9SrwPwNgBvZrak4RyaKrmm6iiTENkWEc/oZVkCYRfGBHGf6z4m9nAWkwnmJ7+FHpKcGUEYLgoiF3K2eM9eBhwPMIHQaz7+HSNBOs5ho60MRm5iyBdx8gojNWaHiOt76pSR9MYCFdPFzMoscgyLoQVekRZGeJBsaJ5MX8tQ70xOYpXISZYzpxTbvCdzSlFId5gkXCWiFl9fwqSFeV0jg6jP9SxYaUPqTQC205bLvCldlDo5Dk2LrntqzfDQAq1jktH86xCScea9s2CSPuUjqnqQ2as5dtaRB20+U3dsP5dzXzxOpDvu+zHnrZUJngMyvmOi2rvjfitZL5nstoj6zLvHn8+ztS3m11CGI7JWmQ7haImUTnOIYGHkSKuK0QD3hNSwSQ0KIUeEv1M3jwqPZg7SlXEhXenyQkU8hZz+ILKT2Yqc3ghFsFJWwTEaYmKCZ3tQO+tyrpsOEChcVJ3LQ+lRXtTneiXnpUuktkyNDo2XBkh61g0P2XfVv5Z7yHOvRSukvasuQPcl1pDSd7MqcQY5IeZ9thAg+4eOSDWw93XnmoJsbTmx+4L39eOSUk1WJ2eygruY6D/fXV9xyMr99CmeeuDPz9D1VGBykLkwO7rBIKFoX4jX+Jwh9wiPEw6iHtckp9OUOcG4tHeEyUJeeFsIoj7XlRGdRohG9WB1Cig9Vt+7M0VUTkeJdJrTEzJpxJOyFyLCiQkx01MnLdIdR+2q8xNaJzPSvdzlkxbpOGjA07lSSrXTCkkOVVtF8mgRTgzwGjxmoFJKfbqC6ZdpUdyaB96/VhaP+1yfmYKivCeMCgnr2atqv782ZN4O/di7yRdMEhRDq06WkBhb2Ql1G1stC5mCanBu0h6ZKimpm48qIlYtvZnn7hy0ISjuc31mCC25nimkOdeo481NhxkVJfOPMh/Wz96q3p05ameOU43iH+P5bw3C6nHwW3ktT22VW/PgMgBvZ9ooYoPrPAtxYsXIZTtVk24SceW4rbP/3qCy4eeklFM1p00kY1/pB/n7OwAODYN0CN26eKxT9yMsq76BXQiqYsakaJyT16pxshUiopaMJfaB3sWuhHAOCBauSU7ZzgVOaMKsZg5SfKkI0nHOeesB/yyzoersFzv7hnc1vWss1aprrr25w09rgt0C4POkvECL5NPRz7NdYycL+crInk1C2Nhf74Z41ANZtUmEYFS9joXzursvcm3KSu/69LEmJhYF7xdSNu5bXTOuB1EZXDDLnN4D4Ats4/TbJ7axT/22LiVfxF1Y2SO7mtNvshh0KmgLgxBSy3S4kIIsQCbjos2yKO9BRQHNS+8xXfB3Lubt7GKQX7GB4mfPfZPFiUIFvNc6ZeXvqTtEB42AmnxGyYoFju+JoQqJtwJaDHBji7Hyw66rMKLomTn7FK3KUDIdJth3uGtpl6Y2yXNe1dJDI6d6OU8zpJ7UxN3TzVW+lxUSe/6dJEBCETRWr3NhXspz8TxIOYVU287zoq4QzOsvGaQc47W+tk0YlTz4OWjMkBi7yMqP8n6ZWtPqtwC4pkjznM61gp4wP55aqLrlq32nwiwnmLiFbKyxrPOg44jLKII2z03cQHfcy7tBO8c52cMtBrM5VPaUHSRBr4VRy2TEWpY3WWrYEcJySrpx0S7uQXmYLG9bolRfG4jS8qY8PMTG82uIuA/vpM2jLpQJF1n2t0bEn+K+De9K+s6k6oCh8EOc263UQc8A+H0e0n4QbyJC39sUzBcB/APA1ZS/DYEGl8MSjhcqoxXnkpon9pM+2wxVcRkkCLLtTH+miT1Ih+b/kPYUk5yqLSKEf3Nj2C/d9uE5OgabKZNSTj6DKTY7Qk36Aj8PUWyWezTwhQX9dIhdAceBR7oVICzF4u1xCE/yENR5f40TE6sr+Mhc+nbQ6E0c5H1vdRmWmlqN3USHSbW2vcIoCTSeqA0u2prfE7nv6uf0JZ0Gw8VJQkyHRXOSq1krMqDA2G2fa11KqaDkgU0KFhk9VZwItrvI/9CUTrnbren83TluFLewbxLwGnpTSvfKa3uRGnlNEAW/zYV7zKVmEiYJPsMYepxgWyXu4A4CJSdr1MY2T5SlyA7QObiCWniGK3sJkwZXsrlm94g2mp7OLn9zId/FJME82flVmtB/Bp3/Q0Occ+4BIn21Mzcx49wLuNdiD72nfdwlf4jpmyYPJRPAiUpc5E4uUHQapOI2yu0FpPA51Cdq0Ful2TpAB+a5spHezz3KHSbbEmceYk5wC7ccL9MP1w557aTXZPWXH/LP9T6/jWmeCCpGl9ls8/oqPy1h8D0APy6CcC/fezcRMgq+lxo04Z8zNDi5JhfguADdQV5Q4N3H0I8O3UvN7Qj/guBnAH6EMfz7xRxZ/UbK2GZHMbFsFgQbypeF8bS/7rcz+b5SsXJCznmCOua+MnVIZcD/OZlninaRWY0dlMGNZNN1QV7MN96pCxjunFzRhtu+sELO2stgZh9Z2qhcKlTW8NdccwzIN3Iv1RYuwBbK5gIXaTZIJCjgWKGYvOz+IuRp6pL9jOIsEBkZVEr6P7JN1MKSd/1ZE9xnmxRvcgFWqPGXqQjHBnFJ4yxNeDf9SdmJgDLhvze6/FBgS3JkAAAAAElFTkSuQmCC");
  --icon-door-front-left-v2: url("data:image/png;base64,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");
  --icon-door-front-right-v2: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAApCAYAAAAiT5m3AAAHnklEQVR42q2YTWwddxXFf+fOPNuJ80Fc56skLS1UVZuURVUhKlVAqVRUFSo2iYTYQFWxoAKBVCRWvLwFiCJVYsNXBS0qFQsXqVskJLIoi6oraEkbUhV/JPZz/BwnddzEfm/mf1jMOHlO7MRRudLozXtv5n/u/c+55965sI7Z1vHjx3PbYhNmO7Md3IJpnUVCUlr9fuHChV2Ll7oPEDqINUSQSCBrlgG/c3B09Ey/wwCSfAvAll3dNDE3tz93/nivLB8J6UFgP7DT9oAku7rwovFswHuKeFPobwf3jvwLoNl0tFpXnd8Q2LZU+eqpmc53E/oO8j2YLUI9i4tCy3YqhQrjhkJDNtsEW2yXQBvFa47iF3ft3Ttbrblx5Kq3R4AmZzvPi3jWVfhtizdk/Z1gpujF3OBQuVKmRtEoi8FeFiMk78d+yPgroLtDDJTmH2konv70yMhUs9mMVqu1fuRjY2MZwHh7/luTM53lyfb8wuTMuZfOnOncu1miTE1dGJk403lust2ZmGx3VibanT+ukrPeyvXtvU5n+8RM543JmU53cqbz4ipDV9k9Nlax1nY0m9VnfWSrjgOMnzn77cl2Z2GqPT99enb+8/2BXWs5QL7MQ8p1H2a6LMtfSUq2c0kFUFx7U6t1fSbUp69Mzswftfw4yZ8D3two2AAYyBu7McOIc40t2bn6uZd9+Zz1Rz02NpbZzur/rqSfpDJCE5IkxXaAI0eOeMOIoawYbiJWIiR5bGwsO3r0aLlexOsJzup5Aock3ySV8yvsrpB9yTbA0aNHy5nFxd29pe4TdvqEIobBQykhSV07LUWmS0H2pqS3m82m6vy0k21SbAa4SihDaFkAk7MLT3WXVn6KuFtS1DvikEqLkAKMCpfnJ2bmfru0f/fPW61W14lMAeHgRpIba5REokwp2Q6n9EPEPZjzRgvYH4LOGz4MOC90wWZBMIj0vZ3nFh+slqiIJkVRC4huCFyDa2BwsAQCkWM+CkVghxQGQpDb5NiZIAMKrK6K7jC180BZOD02Odm5XVJpO7shcLKVRWSSCokLQo3KIVEJdC2xlbILIKQG+PJytzhbrxGY5Ux+0A1e6gOPjSOWHCtR/WYWK8am0rgwLhAlogQVIlaMezZdUG+AxvnakWQRtrqgR9zg5bNnl/bV2hDXk6tG6YbqP/3fvDGwvej1BioHfTV3KiJKUOaNfKjo9T7YulUXr5Q5iCSmI3kX0heW0/IfJibmnpHUXs37/ComGFQMpBIgG4gXi253CcU2SBeVvGKpRDillGVZljuxvVf0GnL66+jo3osATjjLY8hl8bqTTyrPfgN8WYPx+9nZ2aclnbWt/Oo2gyz7UpXHB2677TTw/GYLRV2JTOCyLB0Qdxzc+5ep2YUBO71g88Vl5y/OzCw+A8yvecYW3lqXk7GxsVVJzGzn6x3Hjx/PV2VzDXEUSqBmsxl37Bv5s+0fgZcknuype0yS840iOHLkSNpMC9Mf8ZoMSeFWq5VsNyS9OjlzNiB7IdkDV8glStmhEHjI5uNYqqiY56tspKwJ9cr4dOethgc610lmArLLfDyL1Uxfk6apbgpOXnNZZuwU/J9MdRTXaERdVnUFWCKQ1hV126qP/s4jms1m9F9/7Ngx1w9X1Y6ndfzRFd7kazdJ1zWCfT22r+9EWv3EMkBEmE2wpE9AjKTwluq2VcBT9qCmp/fkjeHb6K4M0ciJLO9RLp8fzvP50dHRxVarld59992s7ig2Rc41AgKwsrwcAKfmT+0YKka+n9rzX4sYHHZZbHGeNbCh6CUTl5e6LE+0O2/nJT87cGD3f26FBle3uq49w7E1ABrdXd9M+CchLVVqSgkOVc2KZXZYNuaBUmz797/9jcOH1U0JRWyS/P1UuuzLrtXnYYiVhD4yTsZgFa6eikG9cKxIOk/o/h07zu2uV9Sms64v6ugWA0X9SnMAUgIHUNYFWDIJOSSVxqqbwS1lFHfUjLw1YEskUJ5FJkFyuqzQDiqJywSui7/kqrZa5FjbwULZ+VXh8ibE7yq5MJJS1ezJoYUfJ6eepHtB26ByIGEJ9YBScMFyx8m/vuuTe05eyVXEzbBzgLJMipCBlDxkgDv2jbwDfH16enq0iKG9hctdWcRgSCJiJXV1kaJ39s47d8/1tTY+c3ahTBWqbwoc4cKQsAZcWZw4cSI/dOhQT9I8MH+zicBqtBMzna1g21HeFLjoxUTe4EPEgTzzk5J+B3QBmnZ8CWI7aOjECQEcOnTIdUSplsESYKp97nDCDwtWstD8RlOHNe/HkzOd1yQ9BTpteDnUe/2DfSdPPqpHi5u9vkxNze93g8eAZ4UOI6Yja3z14J6d71872ugHDklpfGb+vhCv2jwAJOFpS6dsTmdyx3BRpueq28uRhsLaBRxM9j3A3RK57cUsy547uHfkTzeaCvSNIuTxdvtTYuAHOD0htD/Ls+1lStXbTW31tsomi5AkkVK5bHteobeI7Jd37hl546ajiPWmPRNzc/vzpPt76LMkHwrpdsHO0h4KCewVK5Zw2bH0vpzeKUq9/ZmDe97vD4TN901Vrd1gjjU4Pe2t/2y3h8fHx4fs9fu1jSYA19r/ACdWz8jnBK3EAAAAAElFTkSuQmCC");
  --icon-door-rear-left-v2: url("data:image/png;base64,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");
  --icon-door-rear-right-v2: url("data:image/png;base64,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");
  --icon-window: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAB1FBMVEX////////////////////+/v7////+/v5MaXH////////////////////////////////////////////////////+/v7////////+/v7////////////////////////////////////+/v7////////+/v7////////////////////////////////////+/v7////////+/v7////////////////////////////////////////////////////////////////////////////////////////+/v7////////////////////////////////+/v7////////////////////////////////////////////////////////////+/v7////////////////////////////////////////////////////////////////////////+/v7////////+/v7////////////////////////+/v7////////////////////////////////////////////////////////////////////////////////////////////////////////+/v5ygfh1AAAAnHRSTlMC0wGOztETygDLNH8DyNXNySuKG0UjcMwaz9IUEo/H18YE0H4ZrCnUNaWAMpOXOthShNY4qJSdqoEihxaCPB54hgsPbwXadmpgKhwNMzCLgyxrMcWVFQoQepwdibQvoSeppgYHqy1GPldNICGnNk5sfGhtO7lHd8GSDq5BhREffaNZwwmeFwyilkR1kSYuVNk3s1Z5XhhIQ1FJQHGx5P+jAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAD8ElEQVRYw+2XZ3PbRhCGjxDI2yMBAhKjgCghWCxToXqxrN5b3O24995beo/Te++J/6yvEAppHiRAyYd8yDsaaQa6fW53sXt7QKhFivgDAHf+un+jXa7b9N9QQlIpwtxL//Hg4dDDZ6V6vHbzt/QyIA2FMMDtX7pr+dVEVq7hYb9waTCnKSEA8A5/NGATjE0cKsu2axNIToDFgwUVEwrQ8WYaqORAGsCV8ReNTS2xqVM6JuWfrsgAl+eLRKwjElsSPKTeqT/OSPZfOLNhb6gyGewxi4/g4V8a3p3IBxyfLApztXh0sMdLtcjzUp67b5fF1mQfNO+uaXBiSOxvVs/eXDxeghAtz6hsVfXn5gIqwdR4kaNNf+zGxwAKfSqtNzjNlyUqzQ7A6emiyP/AWL8iSlWj1aa0vG7I83WJTLP9bE23uX32k34NNF6o8mqFnNoKgNlMgT/GiVMjzJ4GEJYDmGoFwOx43b58Po2AtwS473d2TnS2amJEhDDdYL9jHgt749IRBRQq5L2zNN1BdeBAx9Pq5e/KOfO3vdthqqL6RvcDKwtQcofNqpOkcvjvZvE2cdo27N9q0y1WpQTvfgFES+9Z9c3NWwInnwsAe9/k7UErvW5PQ5qrbtGNG4ASWugriPo3Rtvr9sdOOnhL1QGwt68gHpQ/OAS8JsGtGTgqANyjwlUzOXZIUbh9asgk0m6WAOBYh4gfD5w6J4oWTkwWLBzRA/jsQ2zxbPl9PcATAO+9GxxJ+pYABfrPqvz09L8+pwh772AxSIC5JQB+ncvy8sn2fgug0caD1COdmBhHDAG67/IGTPRdA9Z/CnivY2JGAZiYOBTwJ08XuXih3mbuy3a03Rkg2YYW1lfYbtbStW92Mh15KUlwZJV70b3VBMs06braRXW169UEjiH7c3S9xgHYMpgsYsWx19Xn0TOZpI63LZsCak6hefLEcMBkgAwLQW8suage6cKDjMiaZZB42ghBAMjbF9+IZkgTTehuws/y+QBgzFzYn46k7nQ3/dn3Gn9dzmQAUF2Ip5RaH22BB/K7hphsIZPJ5IMlAOSVmACjGaDuiA+g7dQAyEN9tRZ295MMV/1pwCZbhkznSmsI8QCZfw+QBxRH/wP+ewA6h/4ZQNdpIYHsQhoOyAeA3ysihFxMD/YEvZBezXLASCnWgVR6RWUDIPsVWlz3+aHc2+NKvg3C5PaI7wV/HcGtsrjfqfEkjvXkfQTtX5RjjaPGEZbctZOm4zoh25yMhHwJ9Eby6cmVbRDYXFmZm+K3yjsZVY0NMIltV26LSyHKfbf7e78quZGHKzHsjA7mNah/al/+YXBtvi2OhtZu3VtmXwVPAIKWq1rG/RfoAAAAAElFTkSuQmCC");
  --icon-fan: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABYlBMVEX///////////////////////////////9MaXH///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////90GTl9AAAAdnRSTlMCT1EDAcsEygDIO366fLG+qcRykSEVDkc0c8aBIB5EkxhMYIW3DRmfE1SNwZt7CbJBoUB6GsKrRUocsBBVrp0rL60malgqpZJpXyymYgVDWi0XIpiMoDgxu6I8w1u8KIDFgwx5dB83OTIlMzBuJLl2ZkhnKT5d5+FUoAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAAvVJREFUWMOllwWX4jAQx0NpGlLcFxYWWHf3vbs9d3d3d/3+19RIM0kX2nkPHrSZX/8zmZm2KBXTkMx067Nn9v7VD1AEM6xP68c+YZbXh3R21tcazJmyr8dGBAmtHPEtEcH/4zPPm9IogHNFV70LMIZKHkLdDOFNUGAYfqoMBeIODgMEky07vErIIAClXcvFBFwneECAIog0GUyBcmsyJEYIlqgqCQdUjr19UZ7PnhmrKSS0sASgu6JT45PEr7ETHyRh6OikmENOgXncP2hD7t6SKDitDmGcckcxY2QOIaBqn5QBwPYw3hgkUJkCK9gS59df0xwBgEfyEHqceP5XflMEXJWGUC2C5Lq2KAJuSxW88vUHOOzPukjoSADPBfGEm1jbYjW0X0LAhsKfAYgpSjgbzBYD5Ajhcx+sp6+gz6wdp9iHWIAa9q4mI3SC3qzuLzho6in4xgnmxWN7UQG2enIjmAMTUynAsS1ZU85lvAhwHaFfJNSkbb18w5uNVuNXFJ5OojqyecUy8eDN2srWjN0u9VN9BxrMIZ74FDoiw0dgaqBbVTJ51L1cN0LPJp1fuhuZxNYXiarWSeEnW/G78CR3L707KwmWXXxNtT8sX/TAHlOY4Wl2Vhp22B5jsoPQri9uYY5Pp+5+UbcmpSMD/0VI4wJcMmDGJok6Bkz+uADPyjCEK6GF2hUAZNTa2WBhLPHdLdp3JALwU3Er7ocJKFmLNSGwPTGGgtq/uWnp1XyJ1AsiqGFVncUs4gDemGq+FnvivApQ7LJ0aWDUizX9bkEB6NmnNXEIlEGHvpfuAGkgCLCfwGGD78BbHyVWAnQmNgHIU6Bx9csPQRtd8k5roEEqgj+TM50OltPMiK8TKKA3pXNhutR/RJvgb/wgB6StGlHmxex8ebSUmArUCczB8nDvL0DB9oAP/+4ohIDGkM/PAGDqyIgDWDGiKnCrrI5ihGCVSQENdDNTAvIVx1mPGELxS/j7wlEK8p/9S0cKYb8tcY37+v8f6RtWv4O4wqEAAAAASUVORK5CYII=");
  --icon-sentry-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAACi1BMVEX+/v7///////////////////////9MaXH////////////+/v7////////////////+/v7////////////////////////////////////////////+/v7////+/v7////+/v7////////////////////////////////+/v7////////////////////////////////////////////////////////////////////////+/v7////////////////////////+/v7////////////////////+/v7////////////////////////////////////////////////////////////////////+/v7////////////////////////////////////////+/v7////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7+/v7////////+/v7+/v7////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7////////////////////////////////////////////////////////////////+/v7////+/v7////////////////////////////////////////////////////////////////////////////////////////////////////////+/v7////////////////+/v7///////9HV4g8AAAA2XRSTlPKyM3MywPJAAIBzs8E0tDT0QzH1LwGCtUFw63Bxb4HC7+uCLPWusbCxKMNkGAJvScqrBg5t2KeuGepr7EOIi20EyOnpLuciE6PcSYhTMBrLkKAlIJJN1wruTsQtnlIoCQ2pRtfMyg4jXWdso4+m6IZlSBNMXNGEatsUG98klc8WEdWEndbRLAcP1lumEVmeqaJtVQXU4FRMEBaH5mKhD2DjH2WcDJkqlVBHh01LxZdhXgUFYZSY35PJWhy14fYn5dqbV5D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");
  --icon-sentry-red: url("data:image/png;base64,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");
  --icon-trunk: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABy1BMVEVMaXH///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9EuRp+AAAAmXRSTlMAZgPDBMjLygIBmJ0oqQdTzDtfYHUeELpMaJlAtUW/jbl+uEdYGRUWMYOij6zBcj95JV0NKiyzEQbFlBppBYWrIZZ9CZ9thjQXPUFJxrA2Wi0TT1AiL0ofsXSuDk5RNXxiObtkm6CMem6TQyCnvGFlpKWyVBJIrSkLMKZcHAqjkh2QW3E3tHcmkQyClTxXwETEXo6aOL5qhFIqgYW2AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAELElEQVRYw9VXZXfbMBR1GtmSmjRp0qYrQ8pMK3dlGrTjwrBdYczMzMz7ubMky5ZsuUv2ZWc6J7EtP913pYfWtH8+ULoDo7oTEJ7axp5A+gDo4ycIDVjWy57SB4jrEELz97hXAgC+hJ07KpML+SjbJjHAKanv3aBrDUKBIWgosT9Ax5Po/I5jC0hghC1YQK8ZGQjlrUFx1BOAqPNMULNDFbvnBE5YZDfQpEsAsBUjrVyc0Ck9CPs72hVHE05yuUbrGjLNCH1G+ViXtHuAYqX8XRRFqR59zdwCtFgZ9lL7Litnr4CQb5NsNTdVSR92mgCnfRgwmMYivv+L/MWWPfR5JQhL500krboik46vlw6VBz0AEDZdvU8Ooo3PziYsxPGuiNcTtfCZnPoGF0jz0tnxDY633oMwFt1G5Yl5O3KHoS6appsTarzldjoCgLHXGw+0NevegzmeIRuGAmD7HkgQh+/eYI7hkAkIawFmwpoLUKACwPbRbHs5uZwbvOmJGc1eid3kyH/7WJ+8ie7cWMR9Bq5IBvL1WiBJ1BvOXoKhpfwRwARASgll/x2PkxrBUMu+6drUMpJJ+NiQvd4QnS0n9ZTWeWR0l0jDwulIJyfW5mSJNmWjOr2kGn5abGnXLaBffwbAQDRTxkjlqdHzDpMLKTBQJOyzZybPMYjKvygslBWaMjOzAY2aFAGkMCH5eZzljok/lzZFvSAA0+wMqjYxIxFDkfD15dWOZ3s9oHF2BDWb+sHhF7Pc3BPbpdME6CQ1RFLpiTw4j24RPSZ0QGIwRt2hQQnAcl77uhg/hO8yAedH8pNlaN9YwHVB7itO9EwKZ/qDzBuwyA9gpQ9Cr+O/p1mA1vlpNvPQB+BR0LuajK0OxSuUm75HDVBohYvRUvkyMlK0yqtiliNSxWaGlAAxLs81DvSzkzCi9BjIMUfO06liJcAXtr6QWRTzzsZwKJhzk0xIZcYE233zgODGkWEmH7NnSpiBVADW9vZJs1t3UcpttiVLfBmg4/RNH5bdP8QcElsODUqooXQVQCYVfeCKxgrK+IMdEVbDoXnDFV+movWukI6zBfbkIHWULEWfiCeoxabsMsqUxnUOQEVnWKi90dC9owUBeSzSV8NMEvAVU1aFpmOwzGRJeO4W+0RXf9Mp76zJ8BQ4CEtr5D5RGgFxX6DV9ZbV2yNIE3tMVwE9KOivOaGITthv5oNsr2rdaugXF5y2qVDFsbDWbPNOw03GZxo6CL0rlrRbt1XIzLtmn/jcbLFdDbPd1jQUfHt98MJbeW/Z5ovMQKwT+H+x9BRL2rhy/ba3ZmjqChgOyq0EQylQFBrNpxoVQY95YIstjh2tvoVlrtvF4HuJoB6TLpAesP83U96QtP5VtVqRxlcquoBEwSGLRfJkWCGFU/hu7OnaGc+vm/H5qqNW+P/Hb9pdtjEFhJqHAAAAAElFTkSuQmCC");
  --icon-frunk: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABy1BMVEX///////////////////////////////9MaXH///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9hl2TvAAAAmXRSTlMCZgMQBAHLygDIB0PDvlg0wXIhFQlJDUTMJbwaccSYaxduO6kObZlgRWmran7GsbedoihKMHBaMSOGtE41VCB9pBy1eY3ARxiyJCqbe3xBKaVcFKw2gIyzunWuUgZfoR05uImQLY+KdoNjd0yFekuRh7/Cn6d0jnO5hB+jPmVdW15XVjgTZJRTuy8zsCxoSE9nr1ASIh5hkkBRwnCSAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAD20lEQVRYw8VXZVvjQBBOiZHSlhYqFIq7u7u7ux7uzrm7u//cy+5GNhtpgQ83D7RJuvPOO7IzGyr6mkJdG0CRuEGeX9gK+WjqinLICzwQoTw11n4FfRro8pKcb7jiKOZyAEkAgONVaeu5JIU5VVdi0ufyyz8ygA9rDRBbymkQwJ0zPZ6CigAA12cJNHTX9PzOiZsn5LeZQS2CHDBm6X3hiqBxpKBKH02GsnSI9tVzmB/8UJYBAoOZNWD3YzwTi8daZURpQHiM+MUAeu+O3KojKS36pfSnBw17Vlis35OsxNKRQfr51QnAj61J3e8So4CyW7yIx40udCL/EsP59QLGQgCOpKPki+zoVIdCzVyVlf49Yi4gAL+OHtP5bjXPDtOIirpRUfDy75lsrYyOpuhsTa35rOhLAFR7mxQHrmA0PZnDdtz0jcj2mb0T2+qKFLcmWW/5uMCep/X05CKz4xzbqILsfmeSuWr7w+Xdcq05jjC/k8YS20iWrLyiuyRZQfEA4Tg88Zp8qZu7PzdHx5a45BMcoXhj4sFbfRqrWIMDABxi4cimjYgz9p5BxU9xOWfgBHjWXWjc9ScelfIGMvm6/qg6t/lzRtNI5Zsn+Vu7i359DwL5Kkom4pw8dmrLC9rDNjJUJTsE2UmP5WAhvffmKEUmfhenjLfg1tjwZWrDrM/mvoysB+PyQVFPycOfpzU1v7IdjKrajEndg+CJf475n5i1qpREGVYtOjMAKNUgP6y0ZOKepv5TrWOAFsVgjj5zEiWUOWANAJIQUAkOgyrWFpSzLiyDgJw2Zp3cPOC2NC28C6ySVallcFgYhAvzVKJwxUh3dfIsKnGt9vo3G7dlPJc1AwgAojAjWZy3S0EJvJXC4I0kC/CcA+RAKT8mvoO3pqABSEd3M4zU0sFHBnq2ACpRbvQGAGjgF8AUztHyUvg5jKJZQVkCwOslFLKQdutWoCWVJsWMAwRR3r4TG56HHTHbJAYJWBprEVotsXVK4NNWiyBy/Njhvq3G50KFM0WUzCwECJl0iW8AQNDMvhp5Y6IJn4WKK8emly/icN3W9W9uWmtmVT/Y1InXSG1qj7dAzto1AH94c+EaKKqRE8jRXYbru5QDoyEPcEhOxOijqyG1jKbM5rNkFk6Gqpr9rvI13JO2OhRDbydvLRv4+ftX7fFTJwQRrdU399Mj1R3KTDb0oKFI12kyFHLycRle3LRHfNRNNSLaHRd+4LDyLMvX5BXyThyIwDirvAcE3ERXLuuNdNBKUlGCq7sfh1uv98vuuy0Hf2X5qi+idMvH2NigVw4TY+rD/3/5vi7APx7bgcEaOWneAAAAAElFTkSuQmCC");
  --icon-chargeport: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAz1BMVEVMaXH////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////iCg/sAAAARXRSTlMAAcu1mAMEAsrIEMQZJp++uplYqQk2a2kxBmaaR4qld8aNkwcax1chHlUqFoh6Q0i/VjB1ji2tkGcghsURkRJLeUR7sMxMNrB5AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAB3klEQVRYw6WXh5LCMAxEScFSCL13rvfee///b7o4IZxTzMXSzkCAwS+rdeSxS6WVIEdH3/dgZX8u5Sr5n2jYHDGPWwAQjT+0EQUNEA6rNBGxTARIC9eBAWoJUo8baJMdSE0QySXIAs6QAQg0cpiAMfIA1Wf0WIAnOQMMwBCRV0LH4wH2kOcgbAJOiB/Ic1DzwpvbZEA9nkICQDbBFJFRgoCuwwIADOL8zQFCrmRVH/8SpDiYYVLR8gjlcvQSMqd1gF7Cf2DE1EEnZQBvzQDt9Hi0J66qVst1x1qAeLlIjvYwR96P3sFp1oAyIfGHGy2g5qkPcc69w3e/qgXUcT0gUl8b4jkWkdPVAbYdTWrJKt6109jXB6+EUNc+Bwe7+tyU7zUtYLNQAl+yHfIBa6cuVuNN/yhvuRk1Eo0t1TbZHwDspO3ciaCZRXEApCK0e2DmIA2YheuuVRAg1x8v0UT+8XL7ZwqIp2JguMlKlWAHTUAELDFTw22eWoJU0ARCEAHBxQubgJqBvCxAACfERgWABWgDD9AR6smFALgCJQIC4KQErBL8qsUDPFirY5QpICQ4I9qJZeXgE3iAlnqSowD2gedgEeVnUQHNinqWJQAuk+UbAhDn2eEmgFcc/nP0/QUTblYdO1xyYwAAAABJRU5ErkJggg==");
}

* {
  box-sizing: border-box;
}

/* A drag starting from the very screen edge (e.g. fingers repositioning to
   fold/unfold the device) can be read by Chrome for Android as the start of
   its own edge-swipe back-navigation gesture. Without this, Chrome renders
   its gesture-nav preview strip (the page sliding aside to reveal empty/
   white space) even though the swipe never completes into an actual
   navigation - leaving that strip visibly stuck until a real back
   navigation resets it. overscroll-behavior-x: none tells Chrome this page
   doesn't want that horizontal overscroll gesture at all. */
html {
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  min-height: 100vh;
  overscroll-behavior-x: none;
  background: radial-gradient(circle at 50% -10%, rgba(55, 55, 58, 0.75), transparent 34%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  width: min(920px, calc(100% - 20px));
  margin: 0 auto;
  padding: 14px 0 28px;
}

.topbar,
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.version-badge {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.68rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hamburger-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger-button span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.main-menu {
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: 6px;
  position: fixed;
  z-index: 50;
}

.main-menu[hidden] {
  display: none;
}

.main-menu a,
.main-menu button {
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--text);
  display: block;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 650;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.main-menu a:hover,
.main-menu a:focus,
.main-menu button:hover,
.main-menu button:focus {
  background: rgba(255, 255, 255, 0.08);
}

.main-menu button:disabled {
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.status-pill {
  border: 1px solid rgba(52, 199, 89, 0.35);
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.16);
  color: #7ee09b;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 9px;
}

.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.actions.two-actions {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
}

.actions.two-actions > .button:only-child {
  grid-column: 2;
}

.button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
}

.button.primary {
  background: var(--blue);
  color: #ffffff;
}

.button.danger {
  background: #ff453a;
  border-color: rgba(255, 69, 58, 0.9);
  color: #ffffff;
}

.button.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line);
  color: var(--text);
}

.vehicle-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line);
  margin-bottom: 8px;
}

.vehicle-strip div,
.alerts-panel,
.control-card,
.dash-card,
.detail-view,
.summary-row div,
.list-item {
  background: var(--panel);
  backdrop-filter: blur(16px);
}

.vehicle-strip div {
  min-height: 58px;
  padding: 9px;
  overflow: hidden;
}

.vehicle-strip span,
.dash-card > span,
.card-head span,
.detail-header span,
.summary-row span,
.section-title span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vehicle-strip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  line-height: 1.2;
  margin-top: 4px;
}

.vehicle-strip small {
  color: var(--blue);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alerts-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  display: block;
  color: inherit;
  text-decoration: none;
}

.status-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.section-title,
.card-head,
.detail-header,
.split-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-title strong {
  color: var(--muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
}

.dash-card .card-head strong {
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
  margin-top: 0;
}

.meta-with-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.meta-with-date small {
  color: var(--muted);
  font-size: 0.7rem;
}

.alerts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.alerts-list span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  line-height: var(--value-line-height);
  padding: 5px 8px;
}

.quick-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.vehicle-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.access-card,
.climate-status-card,
.sentry-status-card {
  min-height: 112px;
}

/* Card-head badge icon (Door/Climate/Sentry) - 22px base, +25% then -15% per
   successive requests (27.5px -> 23.375px; glyph 17.5px -> 14.875px).
   Background-color is the round badge, background-image is the Tesla glyph
   (set per-card via .icon-door/.icon-fan/.icon-sentry below) - kept as
   separate properties (not the `background` shorthand) so the .active
   state override further down can recolor the badge without clobbering the
   glyph. */
.status-card-icon {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.08);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14.875px 14.875px;
  border-radius: 999px;
  display: inline-grid;
  flex: 0 0 auto;
  height: 23.375px;
  justify-content: center;
  line-height: 0;
  place-items: center;
  padding: 0;
  width: 23.375px;
}

.vehicle-access-grid .dash-card.active {
  border-color: rgba(10, 132, 255, 0.38);
  background: rgba(10, 132, 255, 0.16);
}

.status-row .dash-card.active,
.status-row .alerts-panel.active {
  border-color: rgba(10, 132, 255, 0.38);
  background: rgba(10, 132, 255, 0.16);
}

.vehicle-access-grid .dash-card.active .status-card-icon {
  color: var(--blue);
  background-color: rgba(10, 132, 255, 0.14);
}

.access-card strong,
.sentry-status-card strong {
  border-top: 1px solid var(--line);
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
  margin-top: 10px;
  padding-top: 10px;
}

.access-card small,
.sentry-status-card small {
  color: var(--label-color);
  display: block;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  margin-top: var(--label-value-gap);
}

.climate-status-card .status-lines em {
  white-space: nowrap;
}

.status-lines {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
}

/* Door/Climate/Sentry's .card-head is taller than every other card's
   (23.375px, driven by the circular .status-card-icon badge) vs a
   plain text-only card-head elsewhere (confirmed live: 15px, e.g. the
   Tire Pressure card). Both use the identical 10px margin-top/padding-top
   for their divider, but that identical VALUE lands the divider visibly
   further down here simply because the row above it is ~8.375px taller -
   this is what read as "wider spacing" rather than an actual margin/
   padding bug. Reducing margin-top by that same 8.375px (10px -> 1.625px)
   cancels the badge's extra height back out, landing the divider at
   roughly the position it would be at with a normal-height card-head,
   without touching the badge's own (deliberately set) size. */
.dash-card.access-card .status-lines,
.dash-card.climate-status-card .status-lines,
.dash-card.sentry-status-card .status-lines {
  margin-top: 1.625px;
}

.status-lines span {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.status-lines b {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.status-lines em {
  color: var(--value-color);
  font-size: var(--value-size);
  font-style: normal;
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
}

/* .status-lines span (a descendant selector, so it also matches THIS span
   nested inside one) sets display:flex at specificity (0,1,1) - higher than
   .position-icon-grid alone at (0,1,0), so it silently won and collapsed
   every icon to 0 width. Qualifying with the parent class here raises this
   to (0,2,0), which beats it outright regardless of source order. */
.status-lines .position-icon-grid {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 28px;
  width: 28px;
}

/* Reverted from the single combined car+4-doors glyph back to the 2x2 icon
   grid per request - each of the 4 grid positions now gets its own distinct
   icon traced directly from the reference screenshot (front vs rear doors
   have their hinge-swing line at a different height on the body, and each
   side was traced separately rather than CSS-mirrored from one glyph).
   Sized to match doorIconGrid's established 34.77px footprint (+20%/-5%
   sizing rounds); translateX nudges the whole grid slightly left, per the
   original request that set this box's size. */
#doorIconGrid {
  height: 37.947px;
  width: 44.713px;
  column-gap: 9.766px;
  transform: translateX(-6px);
}

#doorIconGrid .position-icon:nth-child(1) {
  background-image: var(--icon-door-front-left-v2);
}

#doorIconGrid .position-icon:nth-child(2) {
  background-image: var(--icon-door-front-right-v2);
}

#doorIconGrid .position-icon:nth-child(3) {
  background-image: var(--icon-door-rear-left-v2);
}

#doorIconGrid .position-icon:nth-child(4) {
  background-image: var(--icon-door-rear-right-v2);
}

/* Tesla's own app mirrors the passenger-side (visually right-hand column)
   window icons so they read as the actual left/right shape of that side of
   the car, rather than two identical copies of the same left-side glyph.
   Door no longer needs this - each of its 4 positions above already has its
   own distinct, pre-oriented traced icon. */
#windowIconGrid .position-icon:nth-child(2),
#windowIconGrid .position-icon:nth-child(4) {
  transform: scaleX(-1);
}

/* Door's per-icon cells are wider than Window's (17.47px vs 12.5px), and
   CSS Grid's column-start alignment naturally lines up the INNER edges of
   each column (left column's right edge, right column's left edge) rather
   than the outer ones - so left-column left edges and right-column right
   edges land ~4.97px apart between Door and Window. Nudging each Door
   column by that gap (measured live: left column needs +4.961px, right
   column -4.985px) aligns Door's outer edges with Window's instead, per
   request. */
#doorIconGrid .position-icon:nth-child(1),
#doorIconGrid .position-icon:nth-child(3) {
  transform: translateX(4.961px);
}

#doorIconGrid .position-icon:nth-child(2),
#doorIconGrid .position-icon:nth-child(4) {
  transform: translateX(-3.985px);
}

/* Persistent icons - same glyph always, only opacity changes - so "open"
   reads as a state change on a fixed layout rather than a shape the eye has
   to re-parse each refresh. Glyph itself is a background-image (baked PNG
   traced from Tesla's own app, see the --icon-* vars above) rather than an
   SVG, so there's no fill/stroke to style here. */
.position-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 0 0 auto;
  height: 100%;
  opacity: 0.35;
  transition: opacity 160ms ease;
  width: 100%;
}

.position-icon.unknown {
  opacity: 0.12;
}

.position-icon.open {
  opacity: 1;
}

.icon-door { background-image: var(--icon-door); }
.icon-window { background-image: var(--icon-window); }
.icon-fan { background-image: var(--icon-fan); }
.icon-trunk { background-image: var(--icon-trunk); }
.icon-frunk { background-image: var(--icon-frunk); }
.icon-chargeport { background-image: var(--icon-chargeport); }
.icon-sentry { background-image: var(--icon-sentry-white); }

/* Sentry is the one status icon that isn't white-on-dark - "on" reads as
   armed/alert, so it swaps to a solid-red baked variant instead of just
   going full-opacity white like every other icon here. */
.icon-sentry.open {
  background-image: var(--icon-sentry-red);
}

/* Trunk/frunk/charge port row - sits between the "Door" label and the 2x2
   door grid. Triangular layout (charge port centered on top, frunk/trunk
   below) fits this card's width better than the old 3-across flex row,
   which was clipping the rightmost icon. Same specificity fix as
   .position-icon-grid above (.status-lines span's gap:10px at (0,1,1) would
   otherwise silently beat a plain .position-icon-row rule at (0,1,0)) so
   this layout actually applies. Markup order in index.html is charge port,
   frunk, trunk - matching top/bottom-left/bottom-right reading order. */
.status-lines .position-icon-row {
  display: grid;
  flex: 0 0 auto;
  gap: 3px 4px;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.position-icon-row .position-icon:first-child {
  grid-column: 1 / span 2;
}

/* Sized to match doorIconGrid's own +10%-bumped per-icon cell size (13.75px,
   see #doorIconGrid above) so this row's total height (2 * 13.75px + 3px
   row-gap = 30.5px) still lines up with the door grid's height. */
.position-icon-row .position-icon {
  height: 13.75px;
  width: 13.75px;
}

/* Nudged right 20% of its own cell width (13.75px) per request, independent
   of .door-cluster-group's own -2.5px group-level shift above it. */
#doorExtraIconRow {
  transform: translateX(2.75px);
}

/* .status-lines span's justify-content:space-between (meant for simple
   label+value pairs) pushes whichever icon cluster is LAST all the way to
   the card's right edge - fine with one cluster, but the Door row holds
   TWO (doorExtraIconRow, then doorIconGrid), so space-between spread them
   across the full row width and pushed doorIconGrid clean off the right
   edge of the card. flex-start (no gap of its own - see .door-cluster-group
   below) keeps the label pinned left; the group's own auto margins take
   care of positioning from there. Window's row only holds one cluster and
   gets the same flex-start treatment, but centers windowIconGrid itself in
   the remaining space via its own auto margins (see further below). */
.status-lines .door-icons-row,
.status-lines .window-icons-row {
  justify-content: flex-start;
}

/* Groups doorExtraIconRow + doorIconGrid so they can be positioned as a
   single unit: gap is "1 icon width" (13.75px) per request, and the
   left/right auto margins center the whole group in whatever space is left
   after the "Door" label - giving equal space between the label and the
   group's left edge, and between the group's right edge and the card's own
   edge, exactly as requested, without hardcoding either gap to a specific
   px value (which would break the moment card width or label width
   changes). */
.door-cluster-group {
  align-items: center;
  display: flex;
  gap: 13.75px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-2.5px);
}

/* Base auto-margin centering (own left/right symmetry within the Window
   row), then nudged by a fixed translateX so windowIconGrid's own center
   lands on doorIconGrid's center above it. Per request, Window should share
   Door's column, not its own row's left/right symmetry. Both grids sit in
   auto-margin-centered slots whose absolute position reduces to
   (siblingWidth + containerWidth) / 2 - since containerWidth (card width)
   is the same for both rows, the difference between the two centers is a
   fixed value independent of viewport width (confirmed empirically
   identical at 375px and 430px), so a static px offset works at any screen
   size. Width matched to doorIconGrid's own restored 34.766px width (the
   brief switch to a single combined car+4-doors glyph, and this rule's
   matching resize, were rolled back per request) - window icon cells stay
   at their original 12.5px size, so column-gap fills the rest of the box
   (9.766px = 34.766 - 2*12.5), and the center-matching offset is back to
   4.836px. */
.window-icons-row #windowIconGrid {
  width: 34.766px;
  column-gap: 9.766px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(2.336px);
}

/* Left column window icons nudged right 20% of their own cell width (2.5px)
   per request - independent of the group-level translateX above, which
   shifts the whole row (this icon included) left as a separate move. */
#windowIconGrid .position-icon:nth-child(1),
#windowIconGrid .position-icon:nth-child(3) {
  transform: translateX(2.5px);
}

/* Climate/Sentry's single (non-grid) status icon - same persistent-icon,
   opacity-driven language, just standalone instead of a 2x2 grid. Base size
   26px, though both overrides below now replace it entirely: each is sized
   relative to its OWN card-head badge glyph (14.875px, see .status-card-icon)
   - Climate +10% twice now (14.875 -> 16.3625 -> 17.99875px), Sentry +15%
   (17.10625px) per request. */
.single-status-icon {
  height: 26px;
  width: 26px;
}

/* Both this icon and its card-head badge sit in their own space-between
   row (.card-head and .status-lines span respectively), so both get pushed
   flush to the same right edge of the card - meaning their CENTERS only
   coincide when the two are the same width. They aren't (badge glyph box
   23.375px vs this icon's own 17.99875px), so translateX nudges this icon
   left by exactly half that width difference ((23.375-17.99875)/2 =
   2.688125px) to land it centered directly below the badge, per request -
   recomputed for this round's further +10% size bump (previous offset was
   3.50625px, for the smaller pre-bump icon size). Independent of viewport
   width since both widths being compared are fixed px values, not relative
   to card width. */
.dash-card.climate-status-card .single-status-icon {
  height: 17.99875px;
  width: 17.99875px;
  transform: translateX(-3.688125px);
}

/* Sentry's divider used to live directly on the icon element itself (a
   .position-icon), which meant it inherited that element's own opacity
   state (0.35 closed / 0.12 unknown / 1 open) - opacity affects an
   element's border exactly like everything else about it, so the divider
   visibly faded along with the icon instead of staying a constant, fully
   opaque line. Confirmed live: computed opacity 0.35 on the border-top
   itself. Climate's divider never had this problem because it lives on
   .status-lines - a plain container, never opacity-toggled - with the icon
   nested inside it instead of BEING the bordered element. Moving Sentry's
   icon inside its own .status-lines wrapper (see index.html) puts the
   divider on that same never-toggled container, matching Climate's
   mechanism exactly ("same UI style as Climate card" per request) and
   fixing the faintness as a side effect, not just a color/opacity tweak. */
.dash-card.sentry-status-card .single-status-icon {
  height: 19.6721875px;
  width: 19.6721875px;
}

/* Spinning fan while climate is on. The icon already carries a static
   translateX (see .dash-card.climate-status-card .single-status-icon above,
   for centering under the card-head badge) - animating "transform" replaces
   that rule's value outright rather than adding to it, so the keyframes
   below re-declare the same translateX at every step alongside the rotation
   (transform functions interpolate independently when the function list
   matches between keyframes), keeping the icon centered while it spins. */
.dash-card.climate-status-card .single-status-icon.open {
  animation: climate-fan-spin 1.6s linear infinite;
}

@keyframes climate-fan-spin {
  from {
    transform: translateX(-3.688125px) rotate(0deg);
  }
  to {
    transform: translateX(-3.688125px) rotate(360deg);
  }
}

/* Breathing red glow while Sentry is armed - a slow opacity/scale pulse.
   Sentry's own .open rule already swaps it to the solid-red glyph (see
   .icon-sentry.open above); this animates on top of that, and safely
   overrides the base .position-icon.open opacity:1 while it's running since
   an active CSS animation always wins over the plain cascade for whichever
   properties it declares. */
.dash-card.sentry-status-card .single-status-icon.open {
  animation: sentry-breathing 2.2s ease-in-out infinite;
}

@keyframes sentry-breathing {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.control-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-height: 88px;
  padding: 10px;
  text-align: left;
}

.control-card:disabled {
  cursor: wait;
  opacity: 0.72;
}

.control-card.active {
  border-color: rgba(0, 122, 255, 0.34);
  background: rgba(10, 132, 255, 0.16);
}

.control-card.failed {
  border-color: rgba(255, 59, 48, 0.42);
  background: rgba(255, 59, 48, 0.08);
}

.control-icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  margin-bottom: 7px;
  width: 30px;
}

.control-card.active .control-icon {
  background: rgba(0, 122, 255, 0.14);
  color: var(--blue);
}

.control-icon svg {
  fill: none;
  height: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 19px;
}

.control-icon svg circle:last-child {
  fill: currentColor;
}

.control-card strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.12;
}

.control-card small {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 3px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Its own 2-column layout, independent of .card-grid's own column count -
   without this, Tire Pressure and Location would only end up "side by side"
   by accident of desktop 3-column auto-placement, and go straight back to
   stacking on mobile where .card-grid itself collapses to a single column. */
.dash-card-pair {
  display: grid;
  gap: 8px;
  grid-column: span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  min-height: 112px;
  padding: 11px;
  text-decoration: none;
  overflow: hidden;
}

.state-card {
  min-height: 92px;
}

.dash-card.state-card strong {
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
}

.state-charge-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(82%) sepia(91%) saturate(1116%) hue-rotate(354deg) brightness(104%) contrast(101%);
  height: 1em;
  margin-right: 6px;
  vertical-align: -0.12em;
  width: 1em;
  animation: state-charge-breathe 1.8s ease-in-out infinite;
}

.state-status-icon {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  font-size: 0.72em;
  font-weight: 800;
  height: 1.25em;
  justify-content: center;
  line-height: 1;
  margin-right: 6px;
  vertical-align: 0.05em;
  width: 1.25em;
}

.state-parked-icon {
  background: #1688ff;
  color: #fff;
}

.state-driving-icon {
  background: #35c979;
  color: #07140d;
}

.state-asleep-icon {
  background: #6c63ff;
  color: #fff;
}

.state-status-icon,
.state-charge-icon {
  transform: translateY(-0.08em);
}

@keyframes state-charge-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* .sentry-status-card small is meant to use the same --label-size as this,
   but a same-specificity, later-declared generic rule (.dash-card small,
   0.8rem) wins the tie there and is what actually renders - matching that
   rendered size here, rather than --label-size, is what makes the two
   cards consistent in practice. */
.dash-card.state-card small {
  color: var(--label-color);
  font-size: 0.8rem;
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
}

.dash-card strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 1.28rem;
  line-height: 1.08;
  margin-top: 8px;
}

.dash-card.access-card strong,
.dash-card.sentry-status-card strong {
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
}

.dash-card .card-head + :is(.battery-row, strong, .tire-grid, #lastDrive, .mini-map-wrap) {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.top-drive-card .card-head + #lastDrive {
  border-top: 0;
  padding-top: 0;
}

.top-drive-card {
  grid-column: 1 / -1;
}

.state-card strong,
.alerts-panel .alerts-list {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.dash-card small,
.list-item small,
.split-line span {
  color: var(--muted);
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.25;
  margin-top: 5px;
}

.dash-card .summary-rate {
  display: inline-block;
  margin-top: 0;
  white-space: nowrap;
}

.metric-row span {
  display: block;
  min-width: 0;
}

.metric-row b,
.metric-row em {
  display: block;
  font-style: normal;
}

.location-card {
  display: flex;
  flex-direction: column;
}

/* Belt-and-suspenders: the shared .card-head + .mini-map-wrap divider rule
   further down already targets this card (confirmed matching via computed
   style), but it was still reported as not visible in practice - putting an
   explicit border directly on this card's own head, rather than relying on
   a shared sibling-selector rule reaching it, guarantees the line renders
   regardless of whatever made the shared one unreliable here. */
.location-card .card-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.mini-map-wrap,
.map-wrap {
  position: relative;
}

.mini-map-wrap {
  border-radius: 12px;
  height: 139.7px;
  margin: 8px 0 2px;
  overflow: hidden;
}

/* Sized well past the visible frame (see the covering-circle math in
   updateMiniMap's comment) so that rotating the map to keep the vehicle's
   heading pointing up never exposes blank corners inside the clipped
   .mini-map-wrap, whatever the card's actual aspect ratio turns out to be. */
.mini-map {
  border: 0;
  height: 220%;
  left: 50%;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width: 220%;
}

.mini-map[hidden] {
  display: none;
}

.vehicle-map-marker {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 16px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width: 16px;
  z-index: 2;
}

.vehicle-map-marker::before {
  background: #fff;
  clip-path: polygon(50% 0, 92% 100%, 50% 78%, 8% 100%);
  content: "";
  display: block;
  height: 100%;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.65));
  width: 100%;
}

.vehicle-map-marker::after {
  background: var(--blue);
  clip-path: polygon(50% 0, 86% 100%, 50% 75%, 14% 100%);
  content: "";
  display: block;
  height: 68%;
  left: 16%;
  position: absolute;
  top: 14%;
  width: 68%;
}

.vehicle-map-marker.large {
  height: 22px;
  width: 22px;
}

.vehicle-map-marker[hidden] {
  display: none;
}

.feature-card {
  cursor: pointer;
}

.feature-card:hover,
.mini-button:hover,
.button:hover {
  border-color: rgba(0, 122, 255, 0.35);
}

.mini-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  min-height: 26px;
  min-width: 26px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tire-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tire-detail.inefficient {
  border-color: rgba(255, 149, 0, 0.5);
}

.tire-detail.unsafe {
  border-color: rgba(255, 59, 48, 0.6);
}

.tire-detail-value {
  align-items: center;
  display: flex;
  gap: 6px;
}

.tire-status-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.tire-detail.optimal .tire-status-icon {
  color: var(--green);
}

.tire-detail.inefficient .tire-status-icon {
  color: var(--amber);
}

.tire-detail.unsafe .tire-status-icon {
  color: var(--red);
}

.tire-detail.unknown .tire-status-icon {
  color: var(--muted);
}

.tire-last-seen {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
}

.tire-chart-card {
  position: relative;
}

.tire-chart-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 320px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.tire-chart {
  display: block;
  height: 100%;
  width: 100%;
}

.chart-grid {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.chart-axis {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.chart-limit {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-dasharray: 6 5;
  stroke-width: 1.4;
}

.chart-zone-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.chart-crosshair {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1;
}

.chart-tooltip {
  background: rgba(18, 18, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
  color: var(--text);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  left: 0;
  line-height: 1.28;
  max-width: min(210px, calc(100% - 16px));
  min-width: 126px;
  padding: 7px 8px;
  pointer-events: none;
  position: absolute;
  top: 0;
  white-space: nowrap;
  z-index: 4;
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip-time {
  font-weight: 800;
}

.chart-tooltip-data {
  display: flex;
  gap: 10px;
  font-weight: 500;
  justify-content: space-between;
}

.chart-tooltip-data span,
.chart-tooltip-data strong {
  font-size: inherit;
  line-height: inherit;
}

.chart-tooltip-data strong {
  color: var(--text);
  font-weight: 500;
}

.statistics-tooltip {
  background: rgba(18, 18, 20, 0.86);
  font-size: 0.72rem;
  min-width: 132px;
  z-index: 8;
}

.chart-state {
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  margin-top: 10px;
  padding: 28px 12px;
  text-align: center;
}

.chart-wrap-zoomable {
  touch-action: none;
}

.chart-hint {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  margin-top: 6px;
  text-align: center;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chart-legend span,
.chart-legend button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
}

.chart-legend button {
  cursor: pointer;
}

.chart-legend button:hover,
.chart-legend button:focus-visible {
  border-color: rgba(0, 122, 255, 0.5);
}

.chart-legend .fl { color: #34c759; }
.chart-legend .fr { color: #0a84ff; }
.chart-legend .rl { color: #ff9500; }
.chart-legend .rr { color: #ff3b30; }
.chart-legend .fleet-avg { color: #7dd3fc; }
.chart-legend .you { color: #0a4d8f; }

.timeline-brush {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.timeline-brush label {
  display: grid;
  gap: 3px;
}

.timeline-brush small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.timeline-brush input {
  width: 100%;
}

.compact-button {
  min-height: 28px;
  padding: 0 10px;
}

.climate-actions {
  grid-template-columns: 1fr;
}

.charge-session-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.charge-session h2 {
  font-size: 1rem;
  line-height: 1.1;
  margin: 0 0 10px;
}

.charge-session-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.charge-session-location-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.charge-session-location span {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.charge-session-location strong {
  color: var(--value-color);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.18;
}

.charge-session-times {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.charge-session-times > div {
  display: grid;
  gap: 3px;
}

.charge-session-times span {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.charge-session-times strong {
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  line-height: var(--value-line-height);
}

.charge-session-times small {
  color: var(--muted);
  font-size: 0.8rem;
}

.charge-session-grid span {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 7px;
}

.charge-session-grid b,
.charge-session-grid em {
  display: block;
  font-style: normal;
}

.charge-session-grid b {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.charge-session-grid em {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 750;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.battery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* The generic .dash-card strong rule's margin-top:8px (meant for a value
   sitting BELOW its own label) also matches the SoC text here, at the same
   (0,1,1) specificity - qualifying with the grandparent class to win reliably
   is what actually removes it, letting align-items:center on .battery-row
   center the text against the bar instead of sitting 8px low. */
.dash-card .battery-row strong {
  margin-top: 0;
}

/* Charging Status page's SoC text (#chargeBatteryLevel) sits in a .page-card,
   which gives it .page-card strong's --value-size (0.94rem) - noticeably
   smaller than the main dashboard's Battery Status card, where the same SoC
   text is a bare .dash-card strong at 1.28rem. Qualifying with .battery-row
   (0,2,1) beats .page-card strong (0,1,1) to make the two match. */
.page-card .battery-row strong {
  font-size: 1.28rem;
  margin-top: 0;
}

.battery-mini {
  border: 2px solid var(--text);
  border-radius: 8px;
  height: 28px;
  padding: 3px;
  position: relative;
}

.battery-mini::after {
  background: var(--text);
  border-radius: 0 4px 4px 0;
  content: "";
  height: 12px;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
}

.battery-fill {
  width: 0%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), #91ed7b);
  transition: width 360ms ease, background 240ms ease;
  position: relative;
  overflow: hidden;
}

/* Single bright "ping" band sweeping left-to-right across the fill, then
   pausing off-screen before the next pass - layered on top via ::after so
   it doesn't fight the base fill's inline background (set directly by JS to
   switch between the low-battery and normal gradients). background-size is
   200% (twice the element's own width) so the band can travel from fully
   off-left to fully off-right; with a background this wide, INCREASING the
   background-position percentage actually shifts the image LEFT (percentage
   positions are fractions of the *leftover* (image - container) space, not
   a direct pixel offset), so the keyframes below count DOWN from 200% to
   -100% to sweep left-to-right - confirmed against the CSS spec's position
   formula (offset = (container - image) * position/100) rather than by eye,
   since this state can't be reliably observed in this environment's
   preview. Shared by every .battery-fill.charging element site-wide
   (dashboard, battery.html's Charging Status page, and the test-page demo),
   so this one rule covers all of them. */
.battery-fill.charging::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.9) 48%,
    rgba(255, 255, 255, 0.9) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: battery-charge-ping 2s ease-in-out infinite;
}

@keyframes battery-charge-ping {
  0% {
    background-position: 200% 0;
  }
  40% {
    background-position: -100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.battery-card-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

/* Not charging: only Range and Energy remain visible (the other rows are
   hidden by renderChargingSummary), so give them a full-width 2-column
   layout instead of leaving a dead third column. */
.battery-card-layout.not-charging {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A prior attempt forced this to white-space: nowrap on the theory that the
   wider 2-column cell always has room to keep the (ideal range) annotation
   inline - but when the combined text is occasionally too wide even for
   that, nowrap doesn't wrap OR overflow visibly, it gets silently clipped
   off entirely by .dash-card's overflow:hidden, making the annotation
   disappear rather than just move to its own line. Left to wrap normally:
   the wider 2-column cell still keeps it inline whenever it fits, and
   degrades to a second line (not data loss) when it doesn't. */

.battery-card-layout span {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  min-width: 0;
  padding: 6px;
}

.battery-card-layout b,
.battery-card-layout em {
  display: block;
  font-style: normal;
}

.battery-card-layout b {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.battery-card-layout em {
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
  margin-top: var(--label-value-gap);
  overflow-wrap: anywhere;
}

/* The (ideal range) annotation was never actually inline-capable, with or
   without the earlier nowrap attempt: .dash-card small (a separate, more
   specific rule for unrelated subtext elsewhere) forces every <small>
   inside a .dash-card to display:block, including this one, and its higher
   specificity (.dash-card small) wins over .summary-rate alone regardless
   of source order. This re-overrides it back to inline just here, so it
   sits next to the main value and wraps to its own line only if it
   genuinely doesn't fit - never forced, never clipped. */
.battery-card-layout .summary-rate {
  display: inline-block;
  margin-top: 0;
  white-space: nowrap;
}

.climate-dashboard-card {
  cursor: default;
}

.climate-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid var(--line);
  margin-top: 9px;
  padding-top: 10px;
}

.climate-mini-grid span {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  padding: 6px;
}

.climate-mini-grid b,
.climate-mini-grid em {
  display: block;
  font-style: normal;
}

.climate-mini-grid b {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.climate-mini-grid em {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.16;
  margin-top: 2px;
}


.tire-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.tire-cell {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  min-height: 58px;
  padding: 7px;
}

.tire-cell .tire-status-icon {
  display: inline-flex;
  margin-right: 5px;
  vertical-align: -3px;
}

.tire-cell.optimal .tire-status-icon {
  color: var(--green);
}

.tire-cell.inefficient .tire-status-icon {
  color: var(--amber);
}

.tire-cell.unsafe .tire-status-icon {
  color: var(--red);
}

.tire-cell.unknown .tire-status-icon {
  color: var(--muted);
}

.tire-cell span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.tire-cell strong {
  font-size: 0.92rem;
  margin-top: 4px;
}

.tire-cell small {
  color: var(--muted);
  display: block;
  font-size: 0.62rem;
  margin-top: 2px;
}

.notif-intro {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

.notif-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.notif-card {
  display: grid;
  gap: 10px;
}

.notif-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.notif-toggle-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-toggle-row strong {
  font-size: 0.92rem;
}

.notif-toggle-row small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.notif-toggle-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  accent-color: #34c759;
  cursor: pointer;
}

.notif-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.notif-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--muted);
}

.notif-field input {
  width: 84px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
}

.notif-hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 10px;
}

.notif-time-row {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.notif-time-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--muted);
}

.notif-time-row input {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
}

.notice {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.notice.warning {
  color: var(--amber);
}

.notice.success {
  color: var(--green);
}

.notice.error,
.list-item.error {
  color: var(--red);
}

.detail-view {
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 10px;
  padding: 11px;
}

.detail-view[hidden] {
  display: none;
}

.detail-header strong {
  display: block;
  font-size: 1.2rem;
  margin-top: 2px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

/* An authored display:flex above always beats the UA stylesheet's own
   [hidden]{display:none} (author styles win over user-agent styles
   regardless of selector specificity) - same fix already applied to
   .range-menu/.main-menu/etc below, needed here too now that the Alert
   Logs page's select-mode bar is a .filter-bar toggled via hidden. */
.filter-bar[hidden] {
  display: none;
}

.compact-filter {
  justify-content: flex-start;
}

.push-right {
  margin-left: auto;
}

.filter-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  min-height: 30px;
  padding: 0 10px;
}

.filter-button.active {
  background: var(--text);
  color: var(--bg);
}

.range-menu {
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 2px;
  max-height: min(320px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 6px;
  position: fixed;
  z-index: 40;
}

.range-menu[hidden] {
  display: none;
}

.range-menu-option {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 650;
  line-height: 1.15;
  min-height: 26px;
  padding: 5px 8px;
  text-align: left;
}

.range-menu-option.active {
  background: rgba(10, 132, 255, 0.26);
  color: #fff;
}

.filter-dialog {
  background: transparent;
  border: 0;
  color: var(--text);
  max-width: min(420px, calc(100vw - 28px));
  padding: 0;
  width: 100%;
}

.filter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(8px);
}

.filter-dialog-card {
  background: rgba(28, 28, 30, 0.98);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 14px;
  padding: 14px;
}

/* tabindex="-1" + autofocus on the form itself (not any input) claims the
   dialog's initial focus, so showModal() doesn't fall through to the first
   input - which would otherwise pop the on-screen keyboard immediately on
   mobile before the user has tapped anything. */
.filter-dialog-card:focus {
  outline: none;
}

.filter-dialog-card label {
  display: grid;
  gap: 7px;
}

.filter-dialog-card span {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.filter-dialog-card select {
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  min-height: 42px;
  padding: 0 12px;
  width: 100%;
}

/* Custom calendar/month-grid pickers - replace the native <input type="date">
   / <input type="month">, which render as the OS's own picker UI (Material
   date wheel on Android, native iOS wheel) rather than matching the app's
   own dark theme. Built from plain buttons in a grid, styled to match
   .filter-dialog-card's existing conventions. */
.custom-picker-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.custom-picker-nav-label {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.custom-picker-nav-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  height: 34px;
  line-height: 1;
  width: 34px;
}

.custom-picker-nav-btn:active {
  background: rgba(255, 255, 255, 0.16);
}

.custom-month-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-month-cell {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 10px 0;
}

.custom-month-cell.selected {
  background: var(--blue);
  color: #fff;
}

.custom-month-cell.current:not(.selected) {
  border-color: var(--blue);
}

.date-range-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.date-range-field {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 4px;
  padding: 8px 10px;
  text-align: left;
}

.date-range-field span {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.date-range-field strong {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 650;
}

.date-range-field.active {
  border-color: var(--blue);
}

.custom-date-weekdays {
  color: var(--muted);
  display: grid;
  font-size: 0.68rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  text-transform: uppercase;
}

.custom-date-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.custom-date-cell {
  appearance: none;
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}

.custom-date-cell:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.3;
}

.custom-date-cell.today:not(.selected) {
  box-shadow: inset 0 0 0 1px var(--blue);
}

.custom-date-cell.in-range {
  background: rgba(10, 132, 255, 0.22);
  border-radius: 0;
}

.custom-date-cell.range-start {
  border-radius: 999px 0 0 999px;
}

.custom-date-cell.range-end {
  border-radius: 0 999px 999px 0;
}

.custom-date-cell.selected {
  background: var(--blue);
  color: #fff;
}

.filter-dialog-card input[type="number"] {
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  min-height: 42px;
  padding: 0 12px;
  width: 100%;
}

.tire-zone-dialog-hint {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: -6px;
}

.phantom-map-dialog-card {
  gap: 10px;
  padding: 12px;
}

.phantom-map-image {
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.dialog-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

#chargeSummary.summary-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  margin-bottom: 8px;
  padding: 12px;
  color: var(--text);
  text-decoration: none;
}

.page-card-subtext {
  display: block;
  margin-top: 2px;
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
}

.page-card > span:first-child,
.page-card > .section-title:first-child,
.charge-session > h2:first-child {
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.page-card > span:first-child {
  display: block;
}

.settings-form {
  align-items: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
}

.settings-form label {
  display: grid;
  gap: 6px;
}

.settings-form input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: inherit;
  padding: 0 10px;
}

.charge-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.charge-status-grid div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 7px;
}

.charge-status-grid span,
.settings-form small,
.chart-summary b,
.page-card > span,
.drive-summary article > span,
.drive-card .drive-route > div > span,
.empty-state span,
.summary-row span,
.metric-row b,
.drive-metrics b {
  color: var(--label-color);
  display: block;
  font-family: inherit;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.charge-status-grid strong,
.chart-summary em,
.page-card strong,
.summary-row strong,
.drive-summary strong,
.metric-row em,
.drive-metrics em {
  color: var(--value-color);
  display: block;
  font-family: inherit;
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
  margin-top: var(--label-value-gap);
  overflow-wrap: anywhere;
}

.button.disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.page-grid,
.drive-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.drive-summary article,
.drive-metrics > span,
.metric-row > span,
.summary-row > div,
.chart-summary > span {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  padding: 7px;
}

.drive-list {
  display: grid;
  gap: 8px;
}

.drive-card,
.empty-state {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 12px;
}

.drive-card {
  color: inherit;
  display: block;
  cursor: pointer;
  text-decoration-line: none !important;
}

.drive-card,
.drive-card:link,
.drive-card:visited,
.drive-card:active,
.drive-card:hover,
.drive-card:focus,
.drive-card *,
.drive-card:hover *,
.drive-card:visited *,
.drive-card:active * {
  text-decoration-line: none !important;
}

.drive-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.drive-swipe-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.drive-swipe-delete {
  align-items: center;
  background: var(--red);
  border: 0;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  font-weight: 650;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 120ms ease;
  width: 84px;
}

.drive-swipe-delete.revealed {
  opacity: 1;
}

.drive-swipe-card {
  border: 0;
  border-radius: 0;
  position: relative;
  touch-action: pan-y;
  transition: transform 200ms ease;
}

.drive-swipe-card.dragging {
  transition: none;
}

.top-drive-card .drive-route {
  margin-top: 8px;
}

.top-drive-card .drive-route strong,
.location-card > strong {
  font-size: 0.94rem;
  line-height: 1.18;
}

.top-drive-card .drive-route small,
.top-drive-card > small,
.location-card > small {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.22;
}

.top-drive-card,
.top-drive-card:link,
.top-drive-card:visited,
.top-drive-card:hover,
.top-drive-card *,
.top-drive-card:hover * {
  text-decoration-line: none !important;
}

.top-drive-card .drive-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.top-drive-card .drive-metrics b {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}

.top-drive-card .drive-metrics em {
  color: var(--value-color);
  font-size: var(--value-size);
  font-weight: var(--value-weight);
  letter-spacing: var(--value-letter-spacing);
  line-height: var(--value-line-height);
  margin-top: var(--label-value-gap);
}

.soc-with-icon {
  align-items: center;
  display: inline-flex !important;
  gap: 0.35em;
  line-height: inherit;
  position: relative;
  top: -0.06em;
  vertical-align: baseline;
  white-space: nowrap;
}

.drive-card .soc-with-icon,
.top-drive-card .soc-with-icon,
.trip-addresses .soc-with-icon,
.route-tooltip .soc-with-icon {
  color: inherit !important;
  display: inline-flex !important;
  font: inherit !important;
  text-transform: none !important;
}

.soc-with-icon span {
  color: inherit !important;
  display: inline !important;
  font: inherit !important;
  text-transform: none !important;
}

.soc-battery-icon {
  align-items: flex-end;
  border: 0.12em solid currentColor;
  border-radius: 0.18em;
  box-sizing: border-box;
  display: inline-flex;
  height: 1em;
  flex: 0 0 auto;
  padding: 0.12em;
  position: relative;
  width: 0.56em;
}

.soc-battery-icon::before {
  background: currentColor;
  border-radius: 0.08em 0.08em 0 0;
  content: "";
  height: 0.14em;
  left: 50%;
  position: absolute;
  top: -0.26em;
  transform: translateX(-50%);
  width: 0.28em;
}

.soc-battery-icon b {
  background: var(--green);
  border-radius: 0.08em;
  display: block;
  width: 100%;
}

.drive-efficiency-value {
  align-items: center;
  color: inherit !important;
  display: inline-flex !important;
  font: inherit !important;
  gap: 0.35em;
  line-height: inherit;
  text-transform: none !important;
  white-space: nowrap;
}

.drive-card .drive-efficiency-value,
.top-drive-card .drive-efficiency-value,
.drive-summary .drive-efficiency-value,
.detail-summary .drive-efficiency-value,
.drive-metrics em .drive-efficiency-value {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  display: inline-flex !important;
  font: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

.drive-efficiency-icon {
  fill: none;
  flex: 0 0 auto;
  height: 1em;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1em;
}

.unlocked-icon {
  color: var(--red);
  fill: none;
  height: 1.15em;
  margin-right: 4px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  vertical-align: -0.16em;
  width: 1.15em;
}

.locked-icon {
  color: var(--green);
  fill: none;
  height: 1.15em;
  margin-right: 4px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  vertical-align: -0.16em;
  width: 1.15em;
}

.drive-efficiency-icon.good {
  color: var(--green);
}

.drive-efficiency-icon.ok {
  color: var(--green);
}

.drive-efficiency-icon.poor {
  color: var(--amber);
}

.drives-map-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  height: 320px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: 100%;
}

.drive-detail-map-wrap {
  aspect-ratio: 1 / 0.7695;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  display: block;
  margin: 0;
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: 100%;
}

.trip-tile-layer,
.trip-route-svg {
  inset: 0;
  position: absolute;
}

.drives-map-controls {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
}

#toggleRouteMarkers { order: 1; }
#toggleRouteLines { order: 2; }

.map-toggle-button {
  align-items: center;
  background: rgba(20, 20, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 6px;
  touch-action: manipulation;
  width: 34px;
}

.map-toggle-button svg {
  display: block;
  height: 20px;
  width: 20px;
}

.map-toggle-button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.trip-tile-layer {
  transform-origin: center center;
  will-change: transform;
}

.trip-map-tile.filtered {
  filter: invert(1) hue-rotate(180deg) saturate(0.55) brightness(0.78) contrast(1.08);
}

.trip-map-tile {
  height: 256px;
  position: absolute;
  user-select: none;
  width: 256px;
}

.trip-route-svg {
  height: 100%;
  pointer-events: none;
  width: 100%;
  z-index: 1;
}

.trip-route-line {
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.trip-route-origin {
  fill: #34c759;
  stroke: #fff;
  stroke-width: 2;
}

.trip-route-destination {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 2;
}

.map-fit-button {
  align-items: center;
  background: rgba(20, 20, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  bottom: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  color: var(--text);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  position: absolute;
  right: 12px;
  touch-action: manipulation;
  width: 42px;
  z-index: 3;
}

.map-fit-button::before,
.map-fit-button::after {
  content: "";
  position: absolute;
}

.map-fit-button::before {
  border: 2px solid currentColor;
  border-radius: 999px;
  height: 17px;
  width: 17px;
}

.map-fit-button::after {
  background:
    linear-gradient(currentColor, currentColor) center / 2px 25px no-repeat,
    linear-gradient(90deg, currentColor, currentColor) center / 25px 2px no-repeat;
  height: 25px;
  opacity: 0.92;
  width: 25px;
}

.map-fit-button:active {
  transform: scale(0.96);
}

.drive-detail-map-layer {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: center;
  width: 100%;
  will-change: transform;
}

.drive-detail-map {
  aspect-ratio: 1 / 1;
  border: 0;
  display: block;
  height: auto;
  margin: 0;
  overflow: hidden;
  width: 100%;
  max-width: none;
  object-fit: cover;
}

.trip-vehicle-dot {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 22px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width: 22px;
  z-index: 2;
}

.trip-vehicle-dot::before {
  background: #fff;
  clip-path: polygon(50% 0, 92% 100%, 50% 78%, 8% 100%);
  content: "";
  display: block;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.65));
  width: 100%;
}

.trip-vehicle-dot::after {
  background: var(--blue);
  clip-path: polygon(50% 0, 86% 100%, 50% 75%, 14% 100%);
  content: "";
  display: block;
  height: 68%;
  left: 16%;
  position: absolute;
  top: 14%;
  width: 68%;
}

.route-label {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.route-legend-dot {
  border: 2px solid #fff;
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.route-legend-dot.origin {
  background: #34c759;
}

.route-legend-dot.destination {
  background: var(--red);
}

.route-scrubber-wrap {
  display: block;
  margin: 0 auto;
  padding: 10px 0 0;
  position: relative;
  width: 90%;
}

.route-scrubber {
  accent-color: var(--blue);
  appearance: auto;
  box-sizing: border-box;
  display: block;
  margin: 0;
  max-width: none;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

.route-tooltip {
  background: rgba(18, 18, 20, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  bottom: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  color: var(--text);
  font-size: 0.72rem;
  left: 0;
  line-height: 1.28;
  min-width: 132px;
  padding: 7px 8px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  z-index: 5;
}

.route-tooltip[hidden] {
  display: none;
}

.route-tooltip strong,
.route-tooltip span {
  display: block;
  font-size: inherit;
}

#tripRoute {
  overflow: hidden;
  padding: 0;
}

#tripRoute .section-title,
#tripRoute .trip-addresses {
  margin-left: 12px;
  margin-right: 12px;
}

#tripRoute .section-title {
  padding-top: 12px;
}

.trip-addresses {
  margin-top: 10px;
  padding-bottom: 12px;
}

.drive-route.trip-addresses strong,
.trip-addresses strong {
  font-size: 0.9rem;
  line-height: 1.18;
  margin-top: 3px;
}

.filter-button.active {
  background: var(--text);
  color: var(--bg);
}

.drive-route,
.drive-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.phantom-transitions {
  margin-top: 10px;
}

.phantom-address {
  grid-template-columns: 1fr;
}

.phantom-address strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
}

.phantom-transitions strong {
  font-size: 0.85rem;
}

#phantomTotalDrained {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  line-height: 1.15;
}

#phantomTotalDrained .summary-rate {
  flex-basis: 100%;
  margin-left: 0;
  white-space: normal;
}

.drive-route > div {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.drive-route strong {
  display: block;
  align-self: start;
  overflow-wrap: anywhere;
}

.drive-route small {
  align-self: end;
  color: var(--muted);
  display: block;
  margin-top: 4px;
  padding-top: 0;
  white-space: nowrap;
}

.drive-metrics {
  border-top: 1px solid var(--line);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 10px;
  padding-top: 10px;
}

.drive-metrics span {
  font-variant: normal;
  text-transform: none;
}

.drive-metrics > span {
  min-height: 46px;
}

.drive-metrics em,
.drive-summary strong {
  white-space: nowrap;
}

.top-drive-summary em {
  white-space: normal;
}

.top-drive-summary .summary-rate {
  display: block;
  font-size: 0.66rem;
  line-height: 1.15;
  margin-left: 0;
  margin-top: 3px;
}

.drive-summary strong.summary-stacked-value small {
  color: var(--label-color);
  display: block;
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}

.drive-metrics em {
  font-size: clamp(0.78rem, 2.45vw, var(--value-size));
}

.drive-metrics em .metric-subtext {
  color: var(--label-color);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.15;
  margin-left: 3px;
  margin-top: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

.drive-metrics b,
.drive-metrics em {
  display: block;
  font-style: normal;
}

.page-card #locationText {
  font-size: 0.94rem;
  line-height: 1.18;
}

.overview-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-section-link {
  cursor: pointer;
}

.summary-section-link:hover article,
.summary-section-link:focus-visible article,
.summary-section-link:hover > div,
.summary-section-link:focus-visible > div {
  border-color: rgba(0, 122, 255, 0.35);
}

.summary-section-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.statistics-charts {
  display: grid;
  gap: 10px;
}

.chart-card {
  display: grid;
  gap: 12px;
}

.chart-card header {
  display: grid;
  gap: 9px;
}

.chart-card h2 {
  font-size: 1rem;
  line-height: 1.1;
  margin: 0;
}

.chart-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-summary span {
  display: block;
}

.chart-summary b,
.chart-summary em {
  display: block;
  font-style: normal;
}

.chart-toggle-metric {
  cursor: pointer;
  user-select: none;
}

.chart-toggle-metric:focus-visible {
  outline: 2px solid #1688ff;
  outline-offset: 3px;
  border-radius: 4px;
}

.chart-plot {
  display: grid;
  gap: 4px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.chart-flip-stage {
  display: grid;
  perspective: 900px;
}

.chart-flip-stage > .chart-plot {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transition: opacity 180ms ease, transform 360ms ease;
  transform: rotateY(0deg);
}

.chart-flip-stage > .chart-plot[hidden] {
  display: none;
}

.chart-flip-stage > .chart-plot.chart-plot-alternate {
  transform: rotateY(-90deg);
  transform-origin: center;
}

.chart-flip-stage > .chart-plot.chart-plot-alternate:not([hidden]) {
  transform: rotateY(0deg);
}

.chart-flip-stage > .chart-plot.chart-face-out {
  opacity: 0;
  transform: rotateY(90deg);
}

.chart-flip-stage > .chart-plot.chart-face-in {
  opacity: 1;
  transform: rotateY(0deg);
}

.chart-flip-stage > .chart-plot.chart-plot-alternate.chart-face-in {
  transform: rotateY(0deg);
}

.chart-y-axis {
  color: var(--muted);
  display: grid;
  font-size: 0.62rem;
  font-weight: 600;
  grid-template-rows: auto 1fr auto;
  line-height: 1.1;
  min-height: 168px;
  padding: 4px 0 26px;
  text-align: right;
}

.chart-y-axis span:nth-child(2) {
  align-self: center;
}

.chart-y-axis span:nth-child(3) {
  align-self: end;
}

.chart-bars {
  align-items: stretch;
  display: grid;
  column-gap: 0;
  grid-template-columns: repeat(var(--bucket-count, 1), minmax(0, 1fr));
  min-height: 168px;
  overflow: visible;
  padding: 4px 0 26px;
  position: relative;
  scrollbar-width: none;
}

.chart-grid-lines {
  display: grid;
  grid-template-rows: auto 1fr auto;
  inset: 4px 0 26px;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.chart-grid-lines i {
  border-top: 1px dotted rgba(255, 255, 255, 0.18);
  display: block;
  width: 100%;
}

.chart-grid-lines i:nth-child(2) {
  align-self: center;
}

.chart-grid-lines i:nth-child(3) {
  align-self: end;
}

.chart-threshold-line {
  border-top: 1px dotted rgba(52, 199, 89, 0.72);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.chart-day {
  align-items: end;
  display: flex;
  justify-content: center;
  min-width: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.bar-stack {
  align-items: end;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  gap: 1px;
  justify-self: center;
  justify-content: center;
  height: 100%;
  min-height: 130px;
  overflow: visible;
  padding: 0;
  position: relative;
  width: clamp(6px, calc((100vw - 86px) / var(--bucket-count, 12) * 0.62), 17px);
}

.bar-stack i {
  background: linear-gradient(180deg, var(--blue), rgba(10, 132, 255, 0.58));
  border-radius: 999px 999px 2px 2px;
  display: block;
  min-height: 2px;
  min-width: 4px;
  transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
  width: 100%;
}

.chart-day.active .bar-stack i {
  filter: brightness(1.45) saturate(1.2);
  opacity: 1;
  transform: translateY(-2px);
}

.chart-day.active .bar-stack::after {
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  bottom: -4px;
  content: "";
  left: -5px;
  pointer-events: none;
  position: absolute;
  right: -5px;
  top: -6px;
}

.bar-stack > i {
  align-self: end;
}

.bar-pair i {
  min-width: 5px;
  width: 50%;
}

.bar-pair {
  width: clamp(12px, calc((100vw - 86px) / var(--bucket-count, 12) * 0.98), 26px);
}

.bar-pair .bar-average {
  background: linear-gradient(180deg, #64d2ff, rgba(100, 210, 255, 0.56));
}

.bar-pair .bar-maximum {
  background: linear-gradient(180deg, var(--amber), rgba(255, 149, 0, 0.58));
}

.chart-leaf-marker {
  bottom: calc(100% + 4px);
  color: var(--green);
  fill: none;
  height: 13px;
  left: 50%;
  position: absolute;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transform: translateX(-50%);
  width: 13px;
  z-index: 2;
}

.chart-day small {
  bottom: -23px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 500;
  left: 50%;
  line-height: 1.1;
  max-width: 46px;
  min-height: 20px;
  overflow: hidden;
  padding: 0 1px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-overflow: clip;
  transform: translateX(-50%);
  white-space: nowrap;
  width: max-content;
}

.chart-day small.axis-label-empty {
  visibility: hidden;
}

/* Overrides the base rule's left:50%/translateX(-50%) centering, which
   centers each label under its OWN bar column - fine for interior days, but
   for the first/last day that leaves the label inset by half a column width
   from the chart's true edge instead of flush against it. Anchoring to the
   day cell's own left/right edge (rather than centering) puts these two
   labels flush against the chart's actual left/right boundary, since the
   first/last .chart-day cell's own edge IS the chart's edge. */
.chart-day small.axis-label-start {
  left: 0;
  text-align: left;
  transform: none;
}

.chart-day small.axis-label-end {
  left: auto;
  right: 0;
  text-align: right;
  transform: none;
}

.summary-rate {
  color: var(--label-color);
  font-size: 0.72rem;
  font-weight: 650;
  display: inline-block;
  line-height: 1.15;
  margin-left: 3px;
  white-space: nowrap;
  vertical-align: baseline;
}

.battery-capacity-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.summary-row div,
.list-item {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 9px;
}

.stack-list {
  display: grid;
  gap: 7px;
}

.list-item strong {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.alert-log-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.alert-log-item-head small {
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  white-space: nowrap;
}

.alert-log-item p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Swipe-to-delete: the outer .alert-log-item (a .list-item) clips its
   own padding/border to 0 and delegates the visible card look to the inner
   wrapper below, which is what actually translates on drag - the red delete
   button sits absolutely behind it (in normal DOM order, so it's UNDER the
   opaque inner wrapper at rest) and is revealed as the wrapper slides left.
   Select-mode disables the drag (handled in JS) and shows a selection dot
   in its place instead. */
.alert-log-item {
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* Opacity starts at 0 and only reaches 1 once the card has fully slid open
   (JS adds .revealed only at the fully-open resting position, not during
   the drag itself) - so no red peeks out mid-swipe, it only appears once
   the card has completely slid left. */
.alert-log-swipe-delete {
  align-items: center;
  background: var(--red);
  border: 0;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  font-weight: 650;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 120ms ease;
  width: 84px;
}

.alert-log-swipe-delete.revealed {
  opacity: 1;
}

.alert-log-item-inner {
  align-items: flex-start;
  background: var(--panel);
  display: flex;
  gap: 10px;
  padding: 9px;
  position: relative;
  touch-action: pan-y;
  transition: transform 200ms ease;
}

.alert-log-item-inner.dragging {
  transition: none;
}

.alert-log-item-body {
  flex: 1;
  min-width: 0;
}

.alert-log-select-indicator {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 20px;
  margin-top: 1px;
  position: relative;
  width: 20px;
}

.alert-log-item:not(.select-mode) .alert-log-select-indicator {
  display: none;
}

.alert-log-item.selected .alert-log-select-indicator {
  background: var(--blue);
  border-color: var(--blue);
}

.alert-log-item.selected .alert-log-select-indicator::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  height: 9px;
  left: 6px;
  position: absolute;
  top: 3px;
  transform: rotate(45deg);
  width: 5px;
}

.map-frame {
  border: 0;
  border-radius: 14px;
  height: min(54vh, 420px);
  margin: 10px 0;
  width: 100%;
}

.map-snapshot {
  background: rgba(255, 255, 255, 0.04);
  display: block;
  object-fit: cover;
}

.map-wrap .map-frame {
  display: block;
}

.map-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
}

.location-map-wrap {
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
}

.location-map-wrap .map-frame {
  height: 100%;
  margin: 0;
}

.location-large-map {
  aspect-ratio: 1 / 1;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transform-origin: center;
  width: 100%;
}

.battery-history-stack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.history-range-filter {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 10px 0;
}

.history-range-filter button {
  appearance: none;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  min-height: 34px;
  padding: 7px 6px;
}

.history-range-filter button.active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--text);
}

.history-chart-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  padding: 10px;
}

.battery-chart-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 200px;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.battery-history-chart {
  display: block;
  height: 100%;
  width: 100%;
}

.full-button {
  width: 100%;
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 12px, 560px);
    padding: 8px 0 18px;
  }

  .topbar {
    align-items: flex-start;
  }

  .vehicle-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .vehicle-access-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .access-card,
  .climate-status-card,
  .sentry-status-card {
    min-height: 122px;
    padding: 9px;
  }

  .control-card {
    min-height: 78px;
    padding: 8px 6px;
    text-align: center;
  }

  .control-icon {
    margin-bottom: 5px;
  }

  .control-card strong {
    font-size: 0.7rem;
  }

  .control-card small {
    font-size: 0.7rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .dash-card-pair {
    grid-column: span 1;
  }

  .status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-card {
    min-height: 94px;
  }

  .summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-grid,
  .drive-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phantom-address {
    grid-template-columns: 1fr;
  }

  .battery-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .battery-summary-grid strong {
    font-size: 0.95rem;
  }

  .drive-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .drive-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .overview-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .battery-card-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .battery-card-layout.not-charging {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-form {
    grid-template-columns: 1fr;
  }

  .battery-capacity-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tire-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .map-frame {
    height: 62vh;
  }
}