:root { color-scheme:light; font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#171717; background:#fff; --accent:#356329; --button:#cff58f; }
* { box-sizing:border-box; }
body { margin:0; }
main { width:min(100% - 40px,420px); margin:40px auto; }
label { display:block; margin:20px 0 8px; }
input,select,button { width:100%; min-width:0; min-height:48px; padding:10px 12px; border:1px solid #aaa; border-radius:4px; background:#fff; color:inherit; font:inherit; }
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input.code { letter-spacing:.2em; font-variant-numeric:tabular-nums; }
button { margin-top:24px; border-color:#a3c66b; background:var(--button); color:#213819; cursor:pointer; }
button:hover { background:#bde575; }
button:disabled { opacity:.45; cursor:not-allowed; }
a { color:var(--accent); text-underline-offset:3px; }
.hint { color:#666; font-size:13px; margin:8px 0 0; }
.ip { margin:4px 0 24px; font:18px/1.5 ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; }
.notice { padding:12px; border:1px solid #aaa; margin:20px 0; }
.error { border-color:#d7a5a0; background:#fff5f4; color:#9c3027; }
.access { margin-top:32px; padding-top:20px; border-top:1px solid #ddd; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.refresh { display:flex; align-items:center; min-height:44px; font-size:14px; }
.grants { list-style:none; padding:0; margin:0; }
.grants li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid #ddd; }
.grants li>div { min-width:0; }
.grant-ip { display:block; font:14px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.tag { color:var(--accent); font-size:12px; }
button.revoke { width:auto; min-height:44px; margin:0; font-size:14px; background:#fff; border-color:#b7c9b1; color:var(--accent); }
button.revoke:hover { background:#f2f8ed; }
.logout { margin-top:20px; }
button.text-button { width:auto; min-height:44px; margin:0; padding:8px 0; border:0; background:none; color:var(--accent); font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.qr { display:block; margin:20px auto; max-width:100%; height:auto; }
details { margin-bottom:24px; font-size:14px; }
summary { padding:8px 0; cursor:pointer; }
.secret { display:block; margin-top:8px; overflow-wrap:anywhere; }
@media (max-width:360px) { main { width:calc(100% - 28px); margin-top:24px; } .grants li { flex-wrap:wrap; } }