.site-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1280px; margin:auto; padding:22px 32px; border-bottom:1px solid var(--line); }
.site-nav a { text-decoration:none; }
.site-nav > div { display:flex; align-items:center; gap:26px; font-size:.85rem; color:var(--muted); }
.brand { display:flex; align-items:center; gap:10px; font-weight:760; letter-spacing:-.5px; white-space:nowrap; }
.brand-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px #ff8bd166; }
.nav-account { border:1px solid var(--line-strong); border-radius:7px; padding:9px 13px; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.portal-body { min-height:100vh; background:radial-gradient(ellipse at 75% 0%,#251020 0%,transparent 45%),#09090e; }
.portal-wrap { width:min(1216px,calc(100% - 64px)); margin:42px auto 64px; min-height:70vh; }
.portal-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:40px; }
.sidebar { border-right:1px solid var(--line); padding-right:22px; }
.sidebar p { color:var(--quiet); text-transform:uppercase; font-size:.68rem; letter-spacing:1.5px; margin:0 0 14px; }
.side-link { display:block; width:100%; text-align:left; border:0; background:none; color:var(--muted); border-radius:7px; padding:11px 12px; margin-bottom:6px; font:inherit; font-size:.86rem; cursor:pointer; }
.side-link.active { color:var(--accent); background:#ff8bd111; }
.sidebar .side-link:hover { background:#ffffff08; }
.workspace { min-width:0; }
.workspace-head { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:24px; }
.workspace h1 { font-size:2rem; font-weight:660; line-height:1.2; margin:7px 0 10px; letter-spacing:-.7px; }
.workspace-head p { color:var(--muted); margin:0; font-size:.9rem; }
.workspace-head .section-label { color:var(--accent); font-size:.69rem; letter-spacing:1px; }
.freshness { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--quiet); font-size:.73rem; margin:4px 0 22px; }
.fresh-dot { width:6px; height:6px; background:#72ddb2; border-radius:50%; }
.fresh-dot.stale { background:#e5b55f; }
.pill { display:inline-flex; align-items:center; gap:6px; border:1px solid #ffffff13; border-radius:20px; padding:4px 9px; color:var(--muted); font-size:.7rem; white-space:nowrap; background:#ffffff04; }
.pill.active,.pill.allowed,.pill.paid { background:#72ddb210; color:#83e6bc; border-color:#72ddb225; }
.pill.critical,.pill.denied,.pill.revoked,.pill.banned { color:#ff9caa; background:#ff778e10; border-color:#ff778e25; }
.pill.paused,.pill.past_due { color:#ebcc8d; background:#ebcc8d10; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.card { border:1px solid var(--line); background:linear-gradient(135deg,#27182377,#15121bbb); border-radius:12px; padding:22px; min-width:0; }
.card > .section-label { font-size:.68rem; color:var(--quiet); letter-spacing:1px; }
.stat-value { margin:15px 0 8px; font-size:1.6rem; letter-spacing:-.6px; font-weight:640; }
.card p { color:var(--muted); font-size:.8rem; margin:8px 0; }
.card .button { margin-top:16px; font-size:.8rem; min-height:40px; }
.card h2 { font-size:1.15rem; line-height:1.4; margin:0; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.table-card { padding:0; overflow:hidden; margin-bottom:22px; }
.table-card .card-head { padding:22px 22px 0; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.8rem; text-align:left; }
th { padding:12px 20px; color:var(--quiet); font-size:.66rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; border-bottom:1px solid var(--line); }
td { padding:16px 20px; border-bottom:1px solid #ffffff08; color:var(--muted); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
td:first-child { color:var(--ink); }
td small { display:block; margin-top:4px; color:var(--quiet); font-size:.7rem; }
.muted { color:var(--quiet); font-size:.78rem; }
.detail-list { margin:0; display:grid; gap:14px; }
.detail-list > div { display:flex; justify-content:space-between; gap:16px; font-size:.78rem; }
dt { color:var(--quiet); } dd { margin:0; text-align:right; overflow-wrap:anywhere; color:var(--muted); }
.notice { padding:16px 20px; border:1px solid #f1c88625; border-radius:10px; background:#f1c88608; color:#e5cbb1; font-size:.83rem; margin-bottom:22px; }
.notice.success { background:#72ddb208; border-color:#72ddb222; color:#96d7bc; }
.empty { padding:30px 20px; text-align:center; color:var(--quiet); font-size:.83rem; }
.button { cursor:pointer; font-family:inherit; }
.button:disabled { opacity:.45; cursor:default; transform:none; }
.button.compact { min-height:34px; padding:7px 11px; font-size:.74rem; }
.subtle-button { color:var(--accent); background:none; border:0; font:inherit; font-size:.8rem; padding:0; cursor:pointer; text-align:left; }
.event { border-top:1px solid #ffffff0d; padding:17px 0; font-size:.8rem; }
.event:first-child { border-top:0; }
.event-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.event strong { font-weight:560; overflow-wrap:anywhere; }
.event p { margin:6px 0; overflow-wrap:anywhere; }
.auth-layout { display:grid; grid-template-columns:1fr 420px; gap:80px; align-items:center; max-width:1040px; margin:70px auto; }
.auth-copy h1 { font-size:4.2rem; line-height:1.05; letter-spacing:-2px; margin:18px 0 22px; }
.auth-copy p { max-width:460px; font-size:1rem; color:var(--muted); }
.auth-benefits { margin-top:38px; display:grid; gap:15px; font-size:.9rem; color:var(--muted); }
.auth-benefits span::before { content:'✓'; color:var(--accent); margin-right:12px; }
.auth-card { padding:32px; }
.auth-card h2 { font-size:1.5rem; margin:0 0 9px; }
.auth-card form { margin-top:25px; display:grid; gap:18px; }
label { display:grid; gap:7px; color:var(--muted); font-size:.8rem; }
input { width:100%; background:#08080e; border:1px solid #ffffff20; color:var(--ink); border-radius:7px; padding:12px; font:inherit; min-width:0; }
input:focus { outline:2px solid #ff8bd155; border-color:var(--accent); }
.auth-card .button { width:100%; }
.auth-links { display:flex; justify-content:space-between; margin-top:22px; gap:20px; font-size:.76rem; color:var(--quiet); }
.auth-links a { color:var(--accent); text-decoration:none; }
.form-error { color:#ff9caa; font-size:.8rem; }
.portal-footer { max-width:1216px; margin:auto; border-top:1px solid var(--line); padding:24px 0 36px; display:flex; gap:20px; justify-content:space-between; font-size:.73rem; color:var(--quiet); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); padding:14px 20px; background:#332232; border:1px solid var(--line-strong); border-radius:9px; color:var(--ink); font-size:.85rem; box-shadow:0 8px 40px #0008; z-index:10; }
.loading { color:var(--quiet); text-align:center; padding:70px 0; }
.preview-note { text-align:center; padding:9px 16px; font-size:.73rem; color:#ebcc8d; background:#ebcc8d0c; border-bottom:1px solid #ebcc8d20; }
.users-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:20px; }
.users-toolbar input { max-width:430px; }
.pagination { display:flex; justify-content:space-between; gap:14px; align-items:center; color:var(--quiet); font-size:.78rem; }
.wrap-value { overflow-wrap:anywhere; }
.mfa-qr { width:200px; height:200px; background:white; border-radius:8px; padding:10px; }
.access-controls { margin:22px 0; }
.access-controls form { display:grid; gap:14px; }
select { width:100%; background:#08080e; border:1px solid #ffffff20; color:var(--ink); border-radius:7px; padding:12px; font:inherit; }
[hidden] { display:none!important; }
@media(max-width:1000px) { .portal-layout { grid-template-columns:145px minmax(0,1fr); gap:24px; } .cards { grid-template-columns:1fr; } .grid-two { grid-template-columns:1fr; } .auth-layout { gap:35px; grid-template-columns:1fr 380px; } .auth-copy h1 { font-size:3rem; } }
@media(max-width:700px) { .site-nav { padding:18px 20px; } .site-nav > div { gap:12px; } .site-nav > div > a:first-child { display:none; } .portal-wrap { width:calc(100% - 32px); margin-top:24px; } .portal-layout { display:block; } .sidebar { border:0; padding:0; margin-bottom:24px; display:flex; flex-wrap:wrap; gap:5px; } .sidebar p { display:none; } .side-link { width:auto; margin:0; padding:9px 12px; font-size:.78rem; } .workspace-head { flex-wrap:wrap; } .workspace h1 { font-size:1.8rem; } .card { padding:19px; } .auth-layout { display:block; margin:20px auto; } .auth-copy h1 { font-size:2.7rem; letter-spacing:-1px; } .auth-benefits { display:none; } .auth-copy { margin-bottom:30px; } .auth-card { padding:25px; } .portal-footer { margin:0 20px; flex-wrap:wrap; } td,th { padding:12px; } .users-toolbar { flex-wrap:wrap; } }

.user-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; border-bottom:1px solid var(--line); padding-bottom:12px; }
.user-tabs .side-link { width:auto; margin:0; }
.history-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:18px 22px; }
.history-filters label { flex:1; min-width:140px; }
.history-filters .row-count { flex:0 0 80px; min-width:80px; }
.history-filters .button { margin:0; }
.history-pages { margin:18px 22px; }
.subtle-button:disabled { opacity:.4; cursor:default; }
.danger-card { margin-top:22px; border-color:#ff778e35; }
.danger-card form { display:grid; gap:14px; max-width:550px; margin-top:18px; }
.check-label { display:flex; align-items:start; gap:10px; }
.check-label input { width:16px; margin-top:1px; }
@media(max-width:700px) { .history-filters { margin:18px 12px; } .history-filters label { flex-basis:100%; } .history-pages { margin:18px 12px; } .user-tabs .side-link { padding:8px; } }

.user-identity { display:flex; justify-content:space-between; align-items:start; gap:14px; margin-top:18px; }
.user-identity strong { display:block; font-size:.95rem; overflow-wrap:anywhere; }
.user-identity small { display:block; color:var(--quiet); font-size:.7rem; overflow-wrap:anywhere; margin-top:5px; }

.nav-account,.site-nav > div > a { white-space:nowrap; }
.users-toolbar > label { min-width:70px; }