:root{--card:#fff;--bad:#B42318;--bad-bg:#FEF3F2}
*{box-sizing:border-box}
html{background:var(--navy)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--f-body);-webkit-text-size-adjust:100%}
/* iOS: a fixed strip owns the status-bar inset, the sticky header sits under it */
.topstrip{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--navy);z-index:20}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.bar{position:sticky;top:0;z-index:10;background:var(--navy);padding-top:env(safe-area-inset-top)}
.bar__in{display:flex;align-items:center;justify-content:space-between;height:64px}
.bar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.bar__logo{height:40px;width:auto}
.bar__logo--plate{background:#fff;border-radius:8px;padding:4px 8px}
.bar__name{color:#fff;font:600 15px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.bar__name{font-size:13px;white-space:normal}}
.lang{display:flex;gap:4px;background:rgba(255,255,255,.12);border-radius:999px;padding:3px}
.lang button{border:0;background:transparent;color:#fff;font:600 13px var(--f-body);padding:6px 12px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:#fff;color:var(--navy)}

.hero{padding:36px 0 20px}
.hero h1{font:700 clamp(30px,5vw,44px)/1.1 var(--f-display);margin:0 0 10px;color:var(--navy)}
.hero p{margin:0;color:var(--muted);max-width:56ch}

/* one column, top to bottom: sign-in, then (on desktop, on request) the device setup */
main.wrap{max-width:600px}
.grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.btn.btn--outline{background:#fff;color:var(--navy);border:1.5px solid var(--navy);margin-top:0;gap:10px}
.btn.btn--outline:hover{background:var(--sky)}
.setup-toggle__icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:16px;line-height:1;transition:transform .2s}
.setup-toggle[aria-expanded="true"] .setup-toggle__icon{transform:rotate(45deg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.card h2{font:700 20px/1.25 var(--f-display);margin:0 0 18px;color:var(--navy)}
.card h3{font-size:15px;margin:0 0 6px}

label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
input{font:16px var(--f-body);color:var(--ink);border:1px solid #CFD4DE;border-radius:10px;padding:12px 14px;width:100%;background:#fff}
input:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.email{display:flex;align-items:stretch}
.email input{border-radius:10px 0 0 10px;min-width:0}
.email__dom{display:flex;align-items:center;padding:0 12px;background:var(--sky);border:1px solid #CFD4DE;border-left:0;border-radius:0 10px 10px 0;color:var(--navy);font-weight:600;white-space:nowrap}
.pw{position:relative}
.pw input{padding-right:84px}
.pw__eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--navy);font:600 13px var(--f-body);padding:8px 10px;cursor:pointer}

.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:18px;border:0;border-radius:12px;font:700 16px var(--f-body);text-decoration:none;cursor:pointer}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary[disabled]{opacity:.6;cursor:wait}
.btn--gold{background:var(--gold);color:var(--gold-ink);margin-top:12px}
.msg{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--bad-bg);color:var(--bad);font-size:14px}
.fine{font-size:13px;color:var(--muted);margin:14px 0 0}

.dev{padding:14px 0;border-top:1px solid var(--line)}
.dev:first-of-type{border-top:0;padding-top:0}
.dev p,.dev ol{margin:0;color:var(--muted);font-size:14px}
.dev ol{padding-left:18px}
.dev.is-mine{background:var(--sky);margin:0 -24px;padding:16px 24px;border-top:0}
.manual{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.manual summary{cursor:pointer;font-weight:600;color:var(--navy)}
.manual dl{margin:10px 0 0;font-size:14px}
.manual dt{font-weight:600;margin-top:10px}
.manual dd{margin:2px 0 0;color:var(--muted)}
code{font:600 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}
.copy{border:1px solid var(--line);background:#fff;border-radius:8px;font:600 12px var(--f-body);padding:4px 8px;margin-left:6px;cursor:pointer;color:var(--navy)}
.qr{display:flex;gap:14px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.qr img{flex:0 0 auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.qr p{margin:0;font-size:13px;color:var(--muted)}
.is-touch .qr{display:none}

.notice{margin:20px 0;padding:14px 18px;border-radius:12px;background:#FAF2D9;border:1px solid #EAD9A3;font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;padding-top:8px;padding-bottom:calc(28px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px}

/* password pages */
.narrow{max-width:560px}
.back{display:inline-block;margin:22px 0 14px;color:var(--navy);font-weight:600;text-decoration:none;font-size:14px}
.h1s{font:700 24px/1.2 var(--f-display);color:var(--navy);margin:0 0 12px}
.lead{margin:0 0 6px;color:var(--muted)}
.hint{font-size:13px;color:var(--muted);margin:6px 0 0}
.msg.ok{background:#ECFDF3;color:#067647}
.tabs{display:flex;gap:6px;margin-bottom:14px;background:#EEF0F4;border-radius:12px;padding:4px}
.tabs a{flex:1;text-align:center;padding:10px 8px;border-radius:9px;color:var(--muted);font-weight:600;text-decoration:none;font-size:14px}
.tabs a[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(11,31,63,.08)}
.links{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:14px}
.links a{color:var(--navy);font-weight:600;text-decoration:none}
a.btn{color:inherit}
a.btn--primary{color:#fff}

[hidden]{display:none!important}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
.setup-toggle{scroll-margin-top:84px}
body>footer{width:100%}
.recstep h3{font:700 18px/1.3 var(--f-display);color:var(--navy);margin:4px 0 8px}
.recstep p{margin:0;color:var(--muted);font-size:14px}
.linkbtn{display:block;margin:12px auto 0;border:0;background:none;color:var(--muted);font:600 14px var(--f-body);text-decoration:underline;cursor:pointer}

/* admin */
main.wrap.admin{max-width:860px}
.admin__top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.admin__top .h1s{margin:0}
.admin__who{font-size:14px;color:var(--muted)}
.linkbtn.inline{display:inline;margin:0;padding:0}
#adminApp .card{margin-bottom:16px}
.addrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:stretch}
.addrow .btn{margin:0;min-height:0;padding:0 22px}
.addrow select{font:16px var(--f-body);border:1px solid #CFD4DE;border-radius:10px;padding:0 10px;background:#fff;color:var(--ink)}
@media (max-width:640px){.addrow{grid-template-columns:1fr 1fr}.addrow .email{grid-column:1/-1}.addrow .btn{min-height:46px}}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.listhead h2{margin:0}
.listhead input{max-width:240px}
.boxes{display:flex;flex-direction:column}
.box{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.box--off .box__email{color:var(--muted);text-decoration:line-through}
.box__email{font-weight:600;word-break:break-all}
.box__meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:4px;font-size:13px;color:var(--muted)}
.box__warn{color:#B54708}
.pill{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.pill--on{background:#ECFDF3;color:#067647}.pill--off{background:#FEF3F2;color:#B42318}.pill--admin{background:var(--sky);color:var(--navy)}
.box__acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.abtn{border:1px solid var(--line);background:#fff;border-radius:8px;font:600 13px var(--f-body);padding:7px 10px;cursor:pointer;color:var(--navy);white-space:nowrap}
.abtn:hover{background:var(--sky)}
.abtn--danger{color:#B42318}
@media (max-width:640px){.box{flex-direction:column;align-items:stretch}.box__acts{justify-content:flex-start}}
dialog{border:0;border-radius:16px;padding:0;max-width:min(520px,92vw);width:100%;box-shadow:0 20px 60px rgba(11,31,63,.25)}
dialog::backdrop{background:rgba(11,31,63,.45)}
.dlg{padding:22px}
.dlg h3{font:700 19px/1.3 var(--f-display);color:var(--navy);margin:0 0 8px}
.dlg p{color:var(--muted);font-size:14px;margin:0 0 10px}
.dlg__btns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.dlg__btns .btn{width:auto;margin:0;padding:0 18px;min-height:42px}
.btn--danger{background:#B42318 !important;color:#fff !important}
.secret__email{font-weight:600;margin-bottom:6px}
.secret__line{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.secret__pw{font-size:18px;background:var(--sky);padding:8px 12px;border-radius:8px;letter-spacing:.02em}
.secret__label{font-weight:600;font-size:14px;margin-top:12px}
.secret__msg{width:100%;font:13px ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);border-radius:8px;padding:8px;margin:6px 0;resize:none}
.foot a{color:var(--muted)}