:root { color-scheme: light; --ink:#17211b; --muted:#667269; --line:#dfe7e1; --paper:#f5f7f4; --card:#fff; --green:#135f42; --green2:#dff2e7; --red:#a43a35; --nav:#13231b; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
button { font:inherit; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
aside { position:sticky; top:0; height:100vh; padding:28px 20px; background:var(--nav); color:#eef8f1; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:12px; margin:0 8px 42px; }
.brand-mark,.signin-icon { display:grid; place-items:center; background:#7fe0ad; color:#0d3b29; font-family:Georgia,serif; font-weight:700; }
.brand-mark { width:38px; height:38px; border-radius:11px; font-size:25px; }
.brand div,.account div { display:grid; gap:2px; }
.brand strong { font-size:16px; }.brand small,.account small { color:#9fb4a7; font-size:12px; }
nav { display:grid; gap:7px; }
.nav-item { border:0; border-radius:9px; padding:11px 13px; color:#aebdb3; background:transparent; text-align:left; cursor:pointer; }
.nav-item:hover,.nav-item.active { color:white; background:#21382c; }
.account { margin-top:auto; padding:16px 8px 0; border-top:1px solid #2d4035; display:flex; align-items:center; gap:10px; }
#avatar,.identity>span { width:34px; height:34px; border-radius:50%; background:#365643; display:grid; place-items:center; font-weight:700; }
main { padding:34px 48px 70px; max-width:1400px; width:100%; }
.signin-panel { max-width:650px; margin:13vh auto 0; padding:54px; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:0 22px 60px rgba(24,46,33,.08); }
.signin-icon { width:56px; height:56px; border-radius:16px; font-size:36px; margin-bottom:28px; }
.signin-panel h1 { font:600 48px/1.06 Georgia,serif; letter-spacing:-1.5px; margin:8px 0 16px; }
.signin-panel>p:not(.eyebrow) { color:var(--muted); font-size:18px; line-height:1.65; max-width:540px; }
.signin-panel small { display:block; color:var(--muted); margin-top:15px; }
.eyebrow { margin:0 0 7px; color:#57806a; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:750; }
.primary,.quiet,.danger { border-radius:9px; padding:10px 14px; cursor:pointer; font-weight:650; }
.primary { margin-top:18px; padding:13px 17px; color:white; background:var(--green); border:1px solid var(--green); }
.primary span { margin-left:18px; }.primary:disabled,button:disabled { opacity:.5; cursor:not-allowed; }
.quiet { color:var(--ink); background:white; border:1px solid var(--line); }
.danger { color:var(--red); background:#fff7f6; border:1px solid #edcbc8; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; }
.topbar h1 { font:600 34px/1.1 Georgia,serif; margin:0; }
.top-actions { display:flex; align-items:center; gap:10px; }.proof-badge { color:var(--green); background:var(--green2); padding:8px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.hero-card { padding:30px; border-radius:18px; background:linear-gradient(130deg,#fff 25%,#e8f4ec); border:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.hero-card h2 { font:600 31px Georgia,serif; margin:5px 0 8px; }.hero-card code { color:var(--muted); }
.trust-score { text-align:right; display:grid; gap:4px; }.trust-score span,.trust-score small { color:var(--muted); }.trust-score strong { color:var(--green); font-size:22px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0; }.metric-grid article,.panel { background:white; border:1px solid var(--line); border-radius:14px; padding:22px; }.metric-grid article { display:grid; gap:6px; }.metric-grid span,.metric-grid small { color:var(--muted); }.metric-grid strong { font-size:21px; }
.panel-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 20px; }.panel-heading h2 { margin:0; font:600 27px Georgia,serif; }.panel-heading>p { color:var(--muted); max-width:480px; text-align:right; }
pre { margin:0; padding:18px; overflow:auto; border-radius:10px; background:#14241c; color:#c9ead7; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.card-list { display:grid; gap:10px; }.application-card { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:16px; padding:18px; background:white; border:1px solid var(--line); border-radius:13px; }.application-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--green); background:var(--green2); border-radius:11px; font-weight:800; }.application-copy { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; align-items:center; }.application-copy h3 { margin:0; }.application-copy code { grid-column:1/-1; color:var(--muted); font-size:12px; }.status { font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }.status.allowed { color:var(--green); }.status.revoked { color:var(--red); }
.timeline { background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; }.event { display:grid; grid-template-columns:12px 1fr auto; gap:14px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }.event:last-child { border-bottom:0; }.event-dot { width:9px; height:9px; border-radius:50%; background:#789; }.event-dot.success { background:#2da369; }.event-dot.failure,.event-dot.denied { background:#d2534c; }.event p { margin:4px 0 0; color:var(--muted); font-size:13px; }.event time { color:var(--muted); font-size:12px; }.empty { color:var(--muted); padding:25px; }
.directory { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }.identity { display:flex; gap:12px; align-items:center; padding:15px; border:1px solid var(--line); border-radius:12px; background:white; text-align:left; cursor:pointer; }.identity.active { border-color:#57a77b; box-shadow:0 0 0 2px #daf0e3; }.identity div { display:grid; gap:3px; }.identity small { color:var(--muted); }
.agent-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:16px; align-items:start; }.agent-form { display:grid; gap:15px; }.agent-form h3,.ticket-result h3 { margin:0; font:600 22px Georgia,serif; }.agent-form label { display:grid; gap:7px; color:var(--muted); font-size:13px; font-weight:650; }.agent-form input,.agent-form select,.agent-form textarea { width:100%; border:1px solid #cad6cd; border-radius:9px; padding:11px 12px; background:white; color:var(--ink); font:14px/1.4 inherit; }.agent-form textarea { resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }.agent-form .primary { justify-self:start; margin:0; }.agent-form small,.ticket-result p { color:var(--muted); line-height:1.5; }.ticket-result { border-color:#8dc5a5; background:#f4fbf7; }.ticket-result code { display:block; overflow-wrap:anywhere; padding:14px; margin:14px 0; border-radius:9px; color:#c9ead7; background:#14241c; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }.agent-list-heading { margin-top:34px; }.agent-meta { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; align-items:center; }.agent-meta h3 { margin:0; }.agent-meta code { grid-column:1/-1; color:var(--muted); font-size:12px; }.agent-meta small { grid-column:1/-1; color:var(--muted); }.status.pending { color:#7c620f; }.status.expired { color:var(--muted); }
#toast { position:fixed; right:28px; bottom:28px; padding:13px 17px; color:white; background:var(--green); border-radius:10px; box-shadow:0 12px 35px #0003; transform:translateY(20px); opacity:0; pointer-events:none; transition:.2s; }#toast.show { transform:none; opacity:1; }#toast.bad { background:var(--red); }
[hidden] { display:none !important; }
@media(max-width:800px){.shell{display:block}aside{position:static;height:auto;padding:16px}.brand{margin:0 0 14px}.account{display:none!important}nav{display:flex!important;gap:6px;overflow-x:auto;padding-bottom:2px}.nav-item{white-space:nowrap;padding:9px 11px}main{padding:20px}.metric-grid,.agent-grid{grid-template-columns:1fr}.hero-card,.topbar,.panel-heading{align-items:flex-start;gap:18px;flex-direction:column}.application-card{grid-template-columns:42px 1fr}.application-card button{grid-column:1/-1}.signin-panel{margin:5vh auto;padding:30px}.signin-panel h1{font-size:38px}}
.admin-form { margin:20px 0; display:grid; gap:16px; }
.admin-form label,.permission-editor label,.search-label { display:grid; gap:7px; font-size:13px; font-weight:600; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
input,textarea,select { font:inherit; min-width:0; width:100%; padding:10px; border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); }
input[readonly] { background:var(--paper); color:var(--muted); }
.search-label { margin-bottom:20px; max-width:500px; }
.admin-form small,.admin-form p,.registry-card p { color:var(--muted); line-height:1.5; }
fieldset { border:1px solid var(--line); border-radius:8px; }
.provider-options { display:flex; gap:16px; padding:8px; }
.provider-options label { display:flex; align-items:center; }
.provider-options input { width:auto; }
.form-actions { display:flex; align-items:baseline; gap:12px; }
#registration-error { color:var(--red); }
.registry-card { display:grid; gap:12px; margin:0; min-width:0; }
.registry-card h3,.registry-card p { margin:0; }
.registry-card button { justify-self:start; }
#registry-list { margin-bottom:24px; }
.directory-row { display:flex; align-items:center; gap:12px; padding:8px 0; }
.directory-row .identity { flex:1; min-width:0; }
.directory-row small,code { overflow-wrap:anywhere; }
.permission-editor { grid-column:1/-1; width:100%; }
.permission-editor label { margin:15px 0; }
summary { cursor:pointer; }
#admin-history { font-size:13px; overflow-wrap:anywhere; }
main,.application-copy,.registry-card { min-width:0; }
@media(max-width:800px){.form-grid{grid-template-columns:1fr}.directory-row{align-items:stretch;flex-direction:column}.form-actions{flex-wrap:wrap}}
/* Directory entries are rows: identity and role controls never compete for a card column. */
.directory { grid-template-columns:minmax(0,1fr); gap:12px; }
.directory-row { display:block; padding:0; border:1px solid var(--line); border-radius:13px; background:white; overflow:hidden; }
.directory-row .identity { display:flex; width:100%; border:0; border-radius:0; padding:20px; gap:16px; }
.identity .identity-avatar { flex:0 0 40px; width:40px; height:40px; color:var(--green); background:var(--green2); }
.identity .identity-copy { flex:1; min-width:0; gap:5px; }
.identity-copy strong { overflow-wrap:anywhere; font-size:16px; }
.identity-copy code { font-size:12px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.identity .manage-access { flex:0 0 auto; display:block; width:auto; height:auto; background:none; color:var(--green); font-size:13px; border-radius:0; }
.user-settings { border-top:1px solid var(--line); padding:12px 20px; font-size:13px; color:var(--muted); }
.user-settings p { line-height:1.5; margin:12px 0; }
.user-settings button { margin-bottom:4px; }
#back-to-users { margin-bottom:20px; }
.access-note { color:var(--muted); font-size:13px; line-height:1.5; }
.application-copy { grid-template-columns:minmax(0,1fr); }
.application-copy > * { grid-column:1; }
.application-note { color:var(--muted); line-height:1.5; }
.application-card { grid-template-columns:46px minmax(0,1fr) auto; }
.application-card > .access-note { max-width:180px; }
.panel-heading { gap:16px; align-items:center; }
.panel-heading > p { text-align:left; margin:0; max-width:650px; line-height:1.5; }
.panel-heading .primary { margin:0; }
.topbar { gap:20px; }
.top-actions,#avatar { flex-shrink:0; }
.event { grid-template-columns:12px minmax(0,1fr) auto; }
.event p { overflow-wrap:anywhere; }
.metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric-grid article,.hero-card > div,.agent-meta { min-width:0; }
.metric-grid strong { overflow-wrap:anywhere; }
.provider-options { flex-wrap:wrap; }
fieldset { min-width:0; }
textarea { resize:vertical; }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #57a77b; outline-offset:3px; }
.menu-toggle { display:none; }
@media(max-width:1000px){.application-card{grid-template-columns:44px minmax(0,1fr)}.application-card>button,.application-card>.access-note{grid-column:2;justify-self:start}.agent-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:800px){
 aside{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 16px}.brand{margin:0}.menu-toggle{display:block;background:#21382c;color:white;border:1px solid #52685a;border-radius:8px;padding:10px 16px;cursor:pointer}
 nav{display:none!important;grid-column:1/-1;padding-top:14px}nav.expanded{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.nav-item{white-space:normal;min-height:44px}
 .metric-grid{grid-template-columns:minmax(0,1fr)}.panel-heading{align-items:flex-start}.panel-heading>p{text-align:left}.topbar{margin-bottom:24px}.trust-score{text-align:left}
 .identity .manage-access{font-size:12px}.directory-row .identity{padding:16px;gap:12px;flex-wrap:wrap}.identity .identity-copy{flex-basis:calc(100% - 60px)}.identity .manage-access{margin-left:52px}.user-settings{padding:12px 16px}
 .event{grid-template-columns:9px minmax(0,1fr);gap:10px}.event time{grid-column:2}.application-card{gap:12px}.application-card>button,.application-card>.access-note{grid-column:1/-1;justify-self:stretch;max-width:none}.permission-editor button{grid-column:auto}
 #toast{left:16px;right:16px;bottom:16px;max-width:calc(100vw - 32px)}
}

.status.unassigned { color:var(--muted); }

.email-form {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:12px 0;max-width:650px}.email-form label{display:grid;gap:6px}.email-form [role=alert]{grid-column:1/-1;color:var(--red);margin:0}.stable-identity-id{overflow-wrap:anywhere;font:12px/1.5 ui-monospace,monospace}.user-settings>strong{display:block;margin-top:20px}@media(max-width:800px){.email-form{grid-template-columns:minmax(0,1fr)}.email-form button{justify-self:start}}

.app-member-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.app-member-row span{min-width:0;overflow-wrap:anywhere}.app-members{border-top:1px solid var(--line);padding-top:14px}

.login-duration-form{border-top:1px solid var(--line);padding-top:12px;margin:12px 0}.login-duration-form .email-form{flex-wrap:wrap}.login-duration-current{font-weight:600}.login-duration-form small{display:block;margin-top:8px}
.login-duration-form .email-form{display:flex;align-items:end;gap:12px}.login-duration-form .email-form label{flex:1;min-width:140px}.login-duration-form .email-form label[hidden]{display:none}.login-duration-form .email-form button{flex:none}

.session-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px}.session-summary dt{color:var(--muted)}.session-summary dd{margin:0;overflow-wrap:anywhere}.session-card details p,.session-identity{overflow-wrap:anywhere}.session-card details{margin:16px 0}.session-current{display:inline-block;font-size:13px;color:var(--green);margin-bottom:8px}.session-card .panel-heading{gap:12px;flex-wrap:wrap}

#passkey-enrollment{display:grid;gap:16px;max-width:620px;margin-top:24px}#passkey-enrollment label,.passkey-actions label{display:grid;gap:8px}#passkey-enrollment button{justify-self:start}.passkey-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0}.passkey-actions label{flex:1;min-width:0}[data-panel="security"] .panel{overflow-wrap:anywhere}@media(max-width:600px){.passkey-actions{display:grid}.passkey-actions button{justify-self:start}}

[data-panel="security"]>p{margin:24px 0 14px}[data-panel="security"] p{line-height:1.5}#passkey-enrollment .primary{margin-top:0}

.invitation-controls{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.invitation-controls h3{font-size:16px}.invitation-result label{display:grid;gap:8px;margin:12px 0}.invitation-result input{min-width:0;width:100%;box-sizing:border-box}.invitation-row{display:flex;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0}.invitation-row span{overflow-wrap:anywhere}.invitation-row button{flex-shrink:0}#add-user-panel{margin-bottom:24px}#add-user-error{color:var(--red)}@media(max-width:800px){.invitation-row{align-items:flex-start;flex-direction:column}.invitation-controls .form-actions{display:flex;flex-wrap:wrap}}