:root{--bg:#f4f5f7;--surface:#fff;--edge:#10182814;--ink:#0f1115;--ink-soft:#5a6472;--ink-faint:#8b94a3;--brand:#4461ec;--brand-ink:#fff;--ok:#16a34a;--ok-bg:#16a34a1a;--warn:#c2410c;--warn-bg:#c2410c1a;--danger:#dc2626;--danger-bg:#dc262614;--radius:16px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font:400 15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}h1,h2,h3{letter-spacing:-.02em;margin:0}button{font:inherit;cursor:pointer}.phone{background:var(--bg);flex-direction:column;max-width:440px;min-height:100vh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 60px #1018281a}.screen{flex:1;padding:24px 20px 110px;overflow-y:auto}.tabbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--edge);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#ffffffeb;display:flex;position:sticky;bottom:0}.tab{color:var(--ink-faint);background:0 0;border:0;flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px 4px;font-size:11px;font-weight:600;display:flex}.tab.active{color:var(--brand)}.tab svg{width:24px;height:24px}h1.screen-title{margin-bottom:20px;font-size:26px;font-weight:700}.card{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:0 1px 2px #1018280a}.card+.card{margin-top:14px}.btn{background:var(--brand);width:100%;color:var(--brand-ink);border:0;border-radius:28px;padding:15px;font-size:16px;font-weight:600;transition:filter .15s,transform .1s;display:block}.btn:hover:not(:disabled){filter:brightness(1.06)}.btn:active:not(:disabled){transform:scale(.99)}.btn:disabled{opacity:.5;cursor:default}.btn.secondary{color:var(--ink);background:#eef0f5}.btn.danger{background:var(--danger-bg);color:var(--danger)}.btn.small{border-radius:20px;width:auto;padding:9px 16px;font-size:14px}label{color:var(--ink-soft);margin-bottom:6px;font-size:13px;font-weight:600;display:block}input{border:1px solid var(--edge);width:100%;font:inherit;color:var(--ink);background:#f6f7f9;border-radius:12px;padding:13px 14px}input:focus{outline:2px solid var(--brand);outline-offset:0;border-color:#0000}.field+.field{margin-top:14px}.row{align-items:center;gap:12px;display:flex}.row.between{justify-content:space-between}.spacer{flex:1}.pill{text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-block}.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.pending{color:var(--ink-faint);background:#eef0f5}.notice{border-radius:12px;margin-bottom:14px;padding:12px 14px;font-size:13.5px;line-height:1.5}.notice.err{background:var(--danger-bg);color:#b4231f}.notice.warn{background:var(--warn-bg);color:#9a3412}.notice.ok{background:var(--ok-bg);color:#15803d}.muted{color:var(--ink-soft);font-size:13.5px}.center{text-align:center}.hero{text-align:center;background:linear-gradient(160deg,#eef1ff,#f6f7fb);border-radius:20px;padding:28px 22px}.hero .shield{width:72px;height:72px;color:var(--brand);margin:0 auto 14px}.hero h2{margin-bottom:6px;font-size:20px}.zone-item,.device-item{border-bottom:1px solid var(--edge);cursor:pointer;align-items:center;gap:14px;padding:16px 0;display:flex}.zone-item:last-child,.device-item:last-child{border-bottom:0}.zone-item .icon,.device-item .icon{width:42px;height:42px;color:var(--brand);background:#eef1ff;border-radius:12px;flex-shrink:0;place-items:center;display:grid}.zone-item .icon svg,.device-item .icon svg{width:22px;height:22px}.item-main{flex:1;min-width:0}.zone-item>svg,.device-item>svg{flex-shrink:0;width:20px;height:20px}.item-main .title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.item-main .sub{color:var(--ink-faint);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.chev{width:20px;height:20px;color:var(--ink-faint);flex-shrink:0}.crumb{color:var(--ink-faint);background:0 0;border:0;margin-bottom:16px;padding:0;font-size:14px;font-weight:600}.crumb:hover{color:var(--ink)}.qr-wrap{text-align:center;padding:8px 0}.qr-wrap img{border:1px solid var(--edge);background:#fff;border-radius:14px;width:230px;height:230px;padding:10px}.spinner{border:2px solid var(--edge);border-top-color:var(--brand);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.auth{place-items:center;min-height:100vh;padding:24px;display:grid}.auth .card{width:100%;max-width:400px}.auth h1{margin-bottom:6px;font-size:24px}.auth .switch{text-align:center;color:var(--ink-faint);margin-top:16px;font-size:13.5px}.link{color:var(--brand);background:0 0;border:0;padding:0;font-weight:600}.modal-backdrop{z-index:50;background:#10182866;place-items:end center;display:grid;position:fixed;inset:0}.modal{background:var(--surface);width:100%;max-width:440px;padding:24px 20px calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;animation:.25s rise}@keyframes rise{0%{transform:translateY(100%)}}.zone-header{align-items:center;gap:10px;margin-bottom:16px;display:flex}.zone-header h1{word-break:break-word;flex:1;min-width:0;font-size:24px}.iconbtn{width:38px;height:38px;color:var(--ink-soft);background:#eef0f5;border:0;border-radius:10px;flex-shrink:0;place-items:center;display:grid}.iconbtn:hover{color:var(--ink);background:#e3e6ee}.iconbtn.danger{background:var(--danger-bg);color:var(--danger)}.iconbtn svg{width:18px;height:18px}