/* Hidden auth/factor fields must stay absent from layout and keyboard focus. */
#controls [hidden]{display:none!important}

/* Native credentials appear only after explicitly choosing native entry. */
#unlock:not([data-native-selected]){display:none!important}

/* Device consent uses the same frozen surface/control tokens as the extension.
   CSS never selects an account, changes a checkbox or reveals a hidden factor. */
[hidden]{display:none!important}
:root{color-scheme:light dark;--bg:#f5f4f2;--card:#fff;--field:#fff;--ink:#18181b;--text:#18181b;--muted:#71717a;--line:#e7e4df;--line-strong:#8a8a94;--primary:#18181b;--on-primary:#fff;--focus:#f07a3a;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;--r:12px}
@media(prefers-color-scheme:dark){:root{--bg:#131315;--card:#1c1c1f;--field:#131315;--ink:#f4f4f5;--text:#f4f4f5;--muted:#b4b4bb;--line:#2c2c31;--line-strong:#73737e;--primary:#f4f4f5;--on-primary:#18181b;--focus:#f5894d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
body>main{width:min(100% - 32px,480px);margin:32px auto;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:20px}
h1{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
h2{font-size:18px;line-height:1.3;letter-spacing:-.01em;margin:0}
p{margin:0;overflow-wrap:anywhere}
#status{color:var(--muted);margin:0 0 20px;min-height:20px}
#controls{display:grid;gap:20px;min-width:0;border:0;background:none;margin:0;padding:0}
#consent,#management,#device-entry-services{display:grid;gap:12px;min-width:0;border:0;background:none;padding:0;margin:0}
#device-entry-services>p{font-weight:600}
#approve,#unlock{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
#owner{font-weight:600;overflow-wrap:anywhere}
#expiry,#consent>p,#approve>p,#management>p{font-size:12px;line-height:1.5;color:var(--muted)}
#vaults{display:grid;gap:8px;margin:4px 0 8px}
label{font:inherit;color:var(--ink);margin:0}
#vaults>label,#approve>label:has(input[type="checkbox"]){display:flex;align-items:center;gap:10px;min-height:44px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--field);overflow-wrap:anywhere;cursor:pointer}
#vaults>label{font-weight:600}
#vaults>label:has(input:checked){border-color:var(--focus)}
input[type="checkbox"]{width:18px;height:18px;min-width:18px;min-height:18px;margin:0;accent-color:var(--focus);cursor:inherit;flex:none}
input:not([type="checkbox"]){display:block;width:100%;min-height:44px;margin:6px 0 0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--field);color:var(--ink);font:inherit}
button{width:100%;min-height:44px;margin:0;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:600 14px/1.45 var(--sans);cursor:pointer;overflow-wrap:anywhere}
#approve>button,#unlock>button,#device-entry-services>button:first-of-type{background:var(--primary);color:var(--on-primary);border-color:transparent}
button:disabled,input:disabled{opacity:.55;cursor:wait}
button:not(:disabled):hover{filter:brightness(.96)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#controls>a{display:block;text-align:center;color:var(--muted);font-size:12px;text-underline-offset:3px}
#controls:has(#consent:not([hidden]))>#device-entry-services,#controls:has(#consent:not([hidden]))>#management{display:none}
#devices{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#devices>li{padding:12px;border:1px solid var(--line);border-radius:12px}
#devices>li>button{margin-top:8px}
@media(max-width:420px){body>main{margin:16px auto;padding:20px}}