:root{--bg:#f1f5f3;--surface:#fff;--surface-2:#f4f7f6;--text:#0f1f22;--text-2:#36474a;--muted:#5b6b6d;--border:#dfe7e4;--border-soft:#e9efec;--border-strong:#c9d4d0;--ink:#0d1c1f;--ink-3:#1b3337;--seaglass:#96e2cd;--accent:#0c7462;--accent-ring:rgba(12,116,98,.26);--warn:#965a0b;--warn-soft:#fcf1dc;--warn-line:#efd7a8;--danger:#b0392d;--danger-line:#f0cbc4;--edge:inset 0 1px 0 rgba(255,255,255,.9);--shadow:0 0 0 1px rgba(13,28,31,.035),0 1px 2px rgba(13,28,31,.05),0 6px 18px -10px rgba(13,28,31,.14);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;margin:0;min-height:100vh;background:radial-gradient(70rem 28rem at 70% -10rem,rgba(150,226,205,.24),transparent 70%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
main{max-width:44rem;margin:0 auto;padding:2.25rem max(1rem,env(safe-area-inset-right)) 3rem max(1rem,env(safe-area-inset-left))}
h1{display:flex;align-items:center;gap:.8rem;margin:0 0 .85rem;font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
h1::before{content:"";width:40px;height:40px;flex-shrink:0;border-radius:12px;background:conic-gradient(from 45deg,var(--ink-3) 0 90deg,transparent 0),radial-gradient(circle,transparent 0 7px,var(--seaglass) 7.5px 11px,transparent 11.5px),linear-gradient(160deg,var(--ink-3),var(--ink));box-shadow:0 8px 18px -8px rgba(13,28,31,.6)}
h2{margin:2rem 0 .6rem;font-size:1.05rem;font-weight:660;letter-spacing:-.015em}
p{margin:0 0 .75rem;max-width:68ch}
main>p:first-of-type{color:var(--text-2)}
section{position:relative;overflow:hidden;background:var(--surface);border-radius:18px;padding:1.4rem 1.35rem;margin-top:1.5rem;box-shadow:var(--shadow),var(--edge)}
section>h2:first-child,section>p:first-child{margin-top:0}
label{font-size:.86rem;font-weight:600;color:var(--text-2)}
input[type=text],input[type=password]{display:block;width:100%;max-width:30rem;min-height:44px;padding:.55rem .8rem;margin:.35rem 0 .9rem;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;box-shadow:inset 0 1px 2px rgba(13,28,31,.04)}
input[type=number]{width:5.5rem;min-height:36px;padding:.25rem .5rem;font:inherit;color:inherit;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)}
input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--accent);flex-shrink:0}
input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
fieldset{margin:0 0 1rem;padding:.8rem .95rem;border:0;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-soft)}
legend{float:left;width:100%;padding:0;font-size:.86rem;font-weight:650;color:var(--text)}
fieldset label{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-right:1.25rem;font-weight:500;color:var(--text)}
button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.05rem;font:inherit;font-size:.93rem;font-weight:600;line-height:1;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;box-shadow:0 1px 2px rgba(13,28,31,.06),var(--edge);transition:background-color 160ms cubic-bezier(.2,.8,.2,1),border-color 160ms cubic-bezier(.2,.8,.2,1),transform 120ms cubic-bezier(.2,.8,.2,1)}
button:hover:not(:disabled){background:#f3f8f6;border-color:var(--border-strong)}
button:active:not(:disabled){transform:scale(.98)}
button[type=submit]{background:linear-gradient(180deg,var(--ink-3),var(--ink));border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(13,28,31,.3),0 6px 14px -8px rgba(13,28,31,.6)}
button[type=submit]:hover:not(:disabled){background:linear-gradient(180deg,#24414a,#13282b)}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code{font:.9em ui-monospace,"SF Mono",Menlo,monospace;word-break:break-all;background:var(--surface);border:1px solid var(--warn-line);border-radius:8px;padding:.55rem .7rem;display:block}
[role=status]:empty{display:none}
[role=status]{color:var(--muted);font-size:.9rem}
#secret-box{border-radius:14px;padding:1.1rem 1.2rem;margin:1.25rem 0;background:var(--warn-soft);box-shadow:0 0 0 1px var(--warn-line)}
#secret-box h2{margin-top:0}
#token-list{padding:0;margin:0;list-style:none;border-radius:14px;overflow:hidden;box-shadow:var(--shadow),var(--edge)}
#token-list:empty{display:none}
#token-list li{background:var(--surface);padding:.85rem 1rem;display:grid;gap:.15rem;justify-items:start}
#token-list li+li{border-top:1px solid var(--border-soft)}
#token-list li button{margin-top:.5rem;color:var(--danger);border-color:var(--danger-line)}
.meta{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}
.revoked,.expired{color:var(--muted)}
.revoked strong,.expired strong{font-weight:560}
[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}