:root{color:#edf2f7;background:#0d121b;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none;--bg: #0d121b;--surface: #141e2c;--surface-inset: #121b27;--border: #526b8b;--border-strong: #5a718f;--text: #edf2f7;--text-muted: #93a4bb;--accent: #21467a;--accent-hover: #2b5590;--accent-border: #4d74a8;--tab-active: #17273b;--tab-active-border: #6485aa;--danger: #602631;--danger-hover: #713040;--danger-border: #a95366;--focus: #77b8ff;--radius-sm: 8px;--radius-md: 12px;--radius-pill: 99px;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.5rem;--sp-6: 2rem;--fs-2xl: 1.5rem;--fs-lg: 1.125rem;--fs-md: 1rem;--fs-sm: .875rem;--fs-xs: .75rem;--shadow-card: 0 1px 2px rgba(0, 0, 0, .24), 0 8px 24px -14px rgba(0, 0, 0, .5);--transition: .15s ease}*{box-sizing:border-box}body{margin:0;min-width:320px;overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer;min-height:2.75rem;touch-action:manipulation;transition:background-color var(--transition),border-color var(--transition),color var(--transition)}button:disabled{cursor:wait;opacity:.65}code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;color:#b9d7ff;background:#b9d7ff14;border-radius:4px;padding:.1em .35em;white-space:nowrap}input,select,textarea{width:100%;min-height:2.75rem;color:inherit;background:var(--surface-inset);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.6rem .75rem;transition:border-color var(--transition)}button,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--focus)}textarea{resize:vertical}label{display:grid;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600;text-transform:capitalize}h1,h2,h3,h4,p{margin-top:0}h1{font-size:var(--fs-2xl)}h2{font-size:var(--fs-lg)}h3,h4{font-size:var(--fs-md)}.shell{max-width:1180px;margin:0 auto;padding:var(--sp-5)}.skip-link{position:fixed;z-index:10;left:var(--sp-4);top:-4rem;padding:.65rem var(--sp-3);border-radius:var(--radius-sm);background:#eff7ff;color:var(--bg);font-weight:700;transition:top var(--transition)}.skip-link:focus{top:var(--sp-4)}.topbar,.section-title,.actions{display:flex;align-items:center;gap:var(--sp-3);justify-content:space-between}.topbar{border-bottom:1px solid var(--border);padding-bottom:var(--sp-4)}.topbar>div:first-child{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;min-width:0}.muted,.section-title p{color:var(--text-muted);font-size:var(--fs-sm);margin:.2rem 0 0}nav{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-4) 0}.nav,.button{border:1px solid var(--border-strong);color:#eff7ff;border-radius:var(--radius-sm);padding:.55rem var(--sp-3);background:var(--accent);border-color:var(--accent-border);white-space:nowrap}.button,.section-title h1,.card h1,.card h2,.card h3,.secret h3,.panel>h1{text-transform:capitalize}.nav{background:transparent;border-color:transparent}.nav.active{background:var(--tab-active);border-color:var(--tab-active-border)}.button.quiet{background:transparent;border-color:var(--border-strong)}.button.danger{background:var(--danger);border-color:var(--danger-border)}@media(hover:hover){.nav:not(.active):hover{background:#ffffff0d}.button:not(:disabled):hover{background:var(--accent-hover)}.button.quiet:not(:disabled):hover{background:#ffffff0f}.button.danger:not(:disabled):hover{background:var(--danger-hover)}tbody tr:hover{background:#ffffff06}}.panel{padding-top:var(--sp-2)}.card,.empty{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-5);box-shadow:var(--shadow-card)}.inset{margin:var(--sp-4) 0}.card .section-title{margin-bottom:var(--sp-4)}.card.inset .section-title>div{min-width:0}.card.inset .section-title h2{overflow-wrap:anywhere}.card.inset:has(h3)~.stream-table-wrap,.card.inset:has(h3)~.stream-cards{display:none}.auth{min-height:100vh;display:grid;place-items:center;padding:var(--sp-4)}.auth .card{width:min(100%,380px);display:grid;gap:var(--sp-4)}.auth-shell{padding:clamp(var(--sp-5),6vw,3.5rem);background:radial-gradient(circle at 50% 16%,rgba(72,141,221,.16),transparent 32rem),var(--bg)}.auth-panel{width:min(100%,29rem)}.auth-brand{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-bottom:var(--sp-2);text-align:left}.auth-mark{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--accent-border);border-radius:var(--radius-sm);color:#eff7ff;background:linear-gradient(145deg,#2b5590,#17345b);font-size:var(--fs-lg);font-weight:800;box-shadow:0 0 1.5rem #4d91e62e}.auth-kicker,.auth-product,.auth-context{margin:0}.auth-kicker{color:#b9d7ff;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em}.auth-product{color:var(--text);font-size:var(--fs-md);font-weight:700}.auth-context{margin:0 0 var(--sp-5);color:var(--text-muted);font-size:var(--fs-sm);text-align:center}.auth .auth-card{width:100%;gap:0;padding:clamp(var(--sp-5),5vw,var(--sp-6));border-color:var(--border-strong);background:#141e2cf5;box-shadow:0 16px 44px #0000004d}.auth-card-heading{margin-bottom:var(--sp-5)}.auth-card-heading h1{margin-bottom:var(--sp-2);font-size:1.4rem;letter-spacing:-.02em}.auth-card-heading p{margin:0;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5}.auth-field{margin-bottom:var(--sp-4)}.auth-field label{gap:var(--sp-2)}.auth-field input{min-height:3rem}.auth-card .notice{margin:0 0 var(--sp-4)}.auth-submit{width:100%;min-height:3rem;margin-top:var(--sp-2)}.notice{border-radius:var(--radius-sm);padding:var(--sp-3);border:1px solid transparent}.notice.error{color:#ffd9dd;background:#53242e;border-color:#7a3947}.notice.success{color:#d7ffe8;background:#174a38;border-color:#246a50}.notice.warn{color:#ffe7a3;background:#624c18;border-color:#8a6c26}.table-wrap{overflow-x:auto;overscroll-behavior-inline:contain}table{border-collapse:collapse;width:100%;min-width:44rem}th,td{padding:var(--sp-3) .55rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}th{color:#aebdd0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}td{overflow-wrap:anywhere}.streams-table{table-layout:fixed}.streams-table th:nth-child(1),.streams-table td:nth-child(1){width:20%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.streams-table th:nth-child(2),.streams-table td:nth-child(2){width:14%}.streams-table th:nth-child(3),.streams-table td:nth-child(3){width:10%}.streams-table th:nth-child(4),.streams-table td:nth-child(4){width:12%}.streams-table th:nth-child(5),.streams-table td:nth-child(5){width:10%}.streams-table th:nth-child(6),.streams-table td:nth-child(6){width:14%}.streams-table th:nth-child(7),.streams-table td:nth-child(7){width:20%}.badge{display:inline-block;border-radius:var(--radius-pill);padding:.18rem .55rem;font-size:var(--fs-xs);font-weight:700;background:#374151;text-transform:capitalize;white-space:nowrap}.badge.enabled,.badge.active,.badge.ready,.badge.success,.badge.publishing{color:#b9ffdb;background:#175236}.badge.disabled,.badge.degraded,.badge.expired,.badge.warn{color:#ffe7a3;background:#624c18}.badge.warn{margin-left:var(--sp-2)}.badge.archived,.badge.revoked,.badge.failed,.badge.failure{color:#ffd2d8;background:#642933}.stream-cards,.credential-cards{display:none}.credential-role{text-transform:capitalize}.badge.idle{color:var(--text-muted);background:#26313f}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}.actions{justify-content:flex-start;flex-wrap:wrap;margin:var(--sp-4) 0}td.actions{margin:0;display:table-cell}td.actions .button{margin-right:var(--sp-2)}@media(min-width:901px){.streams-table th:nth-child(n+4),.streams-table td:nth-child(n+4),.users-table th:nth-child(n+3),.users-table td:nth-child(n+3),.panel>.table-wrap>table:not(.streams-table):not(.users-table) th:nth-child(n+5),.panel>.table-wrap>table:not(.streams-table):not(.users-table) td:nth-child(n+5),.card.inset .table-wrap th:nth-child(n+4),.card.inset .table-wrap td:nth-child(n+4){text-align:right;font-variant-numeric:tabular-nums}.card.inset .table-wrap td.actions{white-space:nowrap}.card.inset .table-wrap td.actions .button:last-child{margin-right:0}}.card.inset .table-wrap td:first-child,.card.inset .table-wrap table:has(td.actions) td:nth-child(2){text-transform:capitalize}.secret{margin:var(--sp-4) 0;padding:var(--sp-4);border:1px solid #ad8b36;background:#312a17;border-radius:var(--radius-md)}.secret label{margin-top:var(--sp-3)}dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-2) 1.2rem}dt{color:var(--text-muted);text-transform:capitalize}dd{margin:0}.settings-form{display:grid;gap:var(--sp-4);max-width:720px}.field-help{margin-top:var(--sp-1);color:var(--text-muted);font-size:var(--fs-xs);font-weight:400;text-transform:none}.settings-note{max-width:720px;margin-top:var(--sp-4)}.topbar-account{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}.topbar-account .muted{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0;margin:0;overflow-wrap:anywhere}.badge.role-admin{color:#cfe0ff;background:var(--accent)}.badge.role-operator{color:#b9ffdb;background:#175236}.badge.role-viewer{color:var(--text-muted);background:#26313f}.users-table .role-select{min-height:2.75rem;padding:.55rem .75rem;max-width:11rem}.user-inline{display:inline-flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}.user-inline input{width:12rem;min-height:2.75rem;padding:.55rem .75rem}@media(max-width:900px){.stream-table-wrap{display:none}.stream-cards{display:grid;gap:var(--sp-3)}.stream-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-4);box-shadow:var(--shadow-card)}.stream-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}.stream-card-heading>div{min-width:0}.stream-card-heading h2{margin-bottom:var(--sp-2)}.stream-card-heading h2{overflow-wrap:anywhere}.stream-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:var(--sp-4) 0 0}.stream-meta>div{display:grid;gap:var(--sp-1);min-width:0}.stream-meta dt{color:var(--text-muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.stream-meta dd{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.stream-meta>div:last-child{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}.stream-card-actions{margin-bottom:0}.card.inset .table-wrap{overflow:visible}.card.inset .table-wrap table{min-width:0}.card.inset .table-wrap thead{display:none}.card.inset .table-wrap tbody{display:grid;gap:var(--sp-3)}.card.inset .table-wrap tr{display:grid;grid-template-areas:"label state" "role username" "expiry expiry" "actions actions";grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-inset)}.card.inset .table-wrap td{padding:0;border:0}.card.inset .table-wrap td:nth-child(1){grid-area:role;color:var(--text-muted);text-transform:capitalize}.card.inset .table-wrap td:nth-child(2){grid-area:label;font-weight:700}.card.inset .table-wrap td:nth-child(3){grid-area:username;justify-self:end}.card.inset .table-wrap td:nth-child(4){grid-area:expiry}.card.inset .table-wrap td:nth-child(5){grid-area:state;justify-self:end}.card.inset .table-wrap td.actions{display:flex;grid-area:actions;flex-wrap:wrap;gap:var(--sp-2)}.card.inset .table-wrap td.actions .button{margin-right:0}.card.inset .table-wrap table:has(td:nth-child(7)) tr{grid-template-areas:"role duration" "key key" "client client" "rate rtt" "loss loss"}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(1){grid-area:role}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(2){grid-area:key}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(3){grid-area:client;justify-self:stretch}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(4){grid-area:duration}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(5){grid-area:rate}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(6){grid-area:rtt;justify-self:end}.card.inset .table-wrap table:has(td:nth-child(7)) td:nth-child(7){grid-area:loss}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) tr{grid-template-areas:"role started" "key key" "client client" "duration data"}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) td:nth-child(1){grid-area:role}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) td:nth-child(2){grid-area:key}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) td:nth-child(3){grid-area:client;justify-self:stretch}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) td:nth-child(4){grid-area:started}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) td:nth-child(5){grid-area:duration}.card.inset .table-wrap table:not(:has(td:nth-child(7))):has(td:nth-child(6):not(.actions)) td:nth-child(6){grid-area:data;justify-self:end}.users-table{display:block;width:100%;min-width:0}.users-table thead{display:none}.users-table tbody{display:grid;width:100%;gap:var(--sp-3)}.users-table tr{display:grid;width:100%;grid-template-areas:"email status" "role created" "actions actions";grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-inset)}.users-table td{padding:0;border:0;min-width:0}.users-table td:nth-child(1){grid-area:email;font-weight:700;overflow-wrap:anywhere}.users-table td:nth-child(2){grid-area:role}.users-table td:nth-child(3){grid-area:status;justify-self:end}.users-table td:nth-child(4){grid-area:created;color:var(--text-muted)}.users-table td.actions{display:flex;grid-area:actions;flex-wrap:wrap;gap:var(--sp-2)}.users-table td.actions .button{margin-right:0}.panel>.table-wrap>table:not(.users-table){display:block;width:100%;min-width:0}.panel>.table-wrap>table:not(.users-table) thead{display:none}.panel>.table-wrap>table:not(.users-table) tbody{display:grid;gap:var(--sp-3)}.panel>.table-wrap>table:not(.users-table) tr{display:grid;grid-template-areas:"when result" "actor action" "target target" "reference reference";grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-inset)}.panel>.table-wrap>table:not(.users-table) td{padding:0;border:0;min-width:0;overflow-wrap:anywhere}.panel>.table-wrap>table:not(.users-table) td:nth-child(1){grid-area:when;color:var(--text-muted)}.panel>.table-wrap>table:not(.users-table) td:nth-child(2){grid-area:actor}.panel>.table-wrap>table:not(.users-table) td:nth-child(3){grid-area:action;font-weight:700}.panel>.table-wrap>table:not(.users-table) td:nth-child(4){grid-area:target}.panel>.table-wrap>table:not(.users-table) td:nth-child(5){grid-area:result;justify-self:end}.panel>.table-wrap>table:not(.users-table) td:nth-child(6){grid-area:reference}.panel>.table-wrap>table:not(.users-table) td:nth-child(6) code{white-space:normal;overflow-wrap:anywhere}}@media(max-width:720px){.shell{padding:var(--sp-3)}.topbar{align-items:flex-start;flex-wrap:wrap}.topbar>div{min-width:0}.topbar .button{margin-left:auto}nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:var(--sp-1);scrollbar-width:none}nav::-webkit-scrollbar{display:none}.nav{flex:0 0 auto;padding-inline:var(--sp-2)}.section-title{align-items:flex-start;flex-wrap:wrap}.section-title>div{min-width:0}.form-grid{grid-template-columns:1fr}.card.inset:has(h3) form>.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.card.inset:has(h3) form>.actions .button:first-child{grid-column:1 / -1}.card.inset:has(h3) form>.actions .button{width:100%}.streams-table th:nth-child(6),.streams-table td:nth-child(6){display:none}}@media(max-width:420px){.card.inset:has(h3) form>.actions{grid-template-columns:1fr}.card.inset:has(h3) form>.actions .button:first-child{grid-column:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
