/* Dark, quiet, big-target styling for the pages used on the move (emergency, sign-in, block). */
:root{--bg:#000;--panel:#161618;--panel2:#1f1f22;--line:#2a2a2e;--ink:#f2f2f2;--mute:#8e8e93;--blue:#3e6ae1;--red:#e82127;--green:#30d158}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:480px;margin:0 auto;padding:28px 16px 48px;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:flex-start}
.name{font-size:28px;font-weight:500;letter-spacing:-.3px;margin:0}
.status{color:var(--mute);font-size:15px;margin-top:4px}
.status b{color:var(--ink);font-weight:500}
.batt{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px;margin-top:6px}
.bicon{position:relative;width:26px;height:12px;border:1.5px solid #8e8e93;border-radius:3px;padding:1.5px}
.bicon:after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:#8e8e93;border-radius:0 1px 1px 0}
.bicon i{display:block;height:100%;width:0;border-radius:1px;background:var(--ink)}
.icon-btn{background:none;border:0;color:var(--mute);padding:6px;cursor:pointer}
.car{margin:6px -16px -10px;display:block;width:calc(100% + 32px);height:auto;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 52%,#000 62%,transparent 100%)}
.controls{display:flex;justify-content:space-around;margin:22px 0 26px}
.ctl{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;min-width:76px}
.ctl .ring{width:64px;height:64px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;transition:background .2s,transform .1s}
.ctl:active .ring{transform:scale(.94)}
.ctl.on .ring{background:var(--blue)}
.ctl.busy .ring{animation:pulse 1.1s ease-in-out infinite}
.ctl:disabled{opacity:.45;cursor:default}
.ctl span{color:var(--mute)}
@keyframes pulse{50%{background:#34343a}}
.list{background:var(--panel);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.row:first-child{border-top:0}
.row .t{flex:1;min-width:0}.row .t div:first-child{font-size:16px}.row .sub{color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row svg{flex:none}
.note{color:var(--mute);font-size:13px;text-align:center;margin:18px 8px 0}
.foot{margin-top:auto;padding-top:28px;text-align:center}
.link{background:none;border:0;color:var(--mute);font:inherit;font-size:15px;cursor:pointer;padding:10px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#2c2c2e;color:var(--ink);padding:12px 18px;border-radius:12px;font-size:15px;transition:.25s;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{background:#3a1416;color:#ff8a8e}
/* sign-in */
.signin{margin:auto 0;padding-bottom:12vh}
.signin h1{font-size:26px;font-weight:500;margin:0 0 6px}
.signin p{color:var(--mute);margin:0 0 26px;font-size:15px}
input[type=password],input[type=text]{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--panel2);border:1px solid transparent;border-radius:10px;padding:15px 16px;outline:none}
input:focus{border-color:var(--blue)}
.btn{width:100%;font:inherit;font-size:17px;font-weight:500;border:0;border-radius:10px;padding:15px;margin-top:14px;background:var(--blue);color:#fff;cursor:pointer}
.btn.dark{background:var(--panel2)}.btn.red{background:var(--red)}
.btn:disabled{opacity:.5}
.err{color:#ff6b70;font-size:14px;min-height:20px;margin-top:12px}
.check{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:15px;margin-top:14px}
.check input{width:20px;height:20px;accent-color:var(--blue)}
