:root{color-scheme:dark;--bg:#0c0c13;--sidebar:#101019;--panel:#151520;--surface:#1c1c29;--field:#11111c;--border:#2a2938;--borderHover:#3f3a54;--ink:#f6f5fa;--muted:#9692a5;--soft:#c6c2d0;--purple:#9164ef;--purpleHover:#a080f2;--green:#68d9ac;--warning:#e6b96a;--radius:12px}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.22;letter-spacing:-.045em;font-weight:720}h2{font-size:15px;letter-spacing:-.015em}h3{font-size:14px}.portalShell{display:flex;min-height:100vh}.customerSidebar{position:fixed;inset:0 auto 0 0;width:238px;display:flex;flex-direction:column;padding:27px 16px 20px;background:var(--sidebar);border-right:1px solid var(--border)}.customerBrand{display:flex;align-items:center;gap:11px;text-decoration:none;margin:0 12px 59px}.brandSymbol{display:grid;place-items:center;width:35px;height:35px;flex:none;border:1px solid #4f3a83;border-radius:10px;background:#251b3a;color:#ccaeff;font-weight:900;font-size:19px;line-height:1}.customerBrand strong,.customerBrand small{display:block}.customerBrand strong{font-size:17px;letter-spacing:.16em;line-height:1.15}.customerBrand small{font-size:9px;color:#867c9a;letter-spacing:.11em;margin-top:4px}.sideLabel{padding:0 13px;margin-bottom:13px;color:#6c667d;font-size:10px;letter-spacing:.14em;font-weight:700}.customerNav{display:flex;flex-direction:column;gap:4px}.customerNav a{display:flex;align-items:center;gap:12px;text-decoration:none;padding:12px 13px;color:#a7a2b2;font-size:13px;font-weight:540;border:1px solid transparent;border-radius:9px;transition:background .14s,color .14s}.customerNav a:hover{background:#201c2a;color:#f8f6ff}.customerNav a.selected{background:#282035;border-color:#453354;color:#eacfff}.navGlyph{display:inline-grid;place-items:center;width:18px;font-size:17px;color:#9186a8}.selected .navGlyph{color:#bd9aff}.sidebarBottom{margin-top:auto;font-size:11px;color:#888398;border-top:1px solid var(--border);padding:19px 13px 0;display:flex;align-items:center;gap:8px}.privacyDot{width:7px;height:7px;background:#5bcfa0;box-shadow:0 0 0 3px #20382f;border-radius:100%}.portalContent{margin-left:238px;width:calc(100% - 238px);min-height:100vh;display:flex;flex-direction:column}.portalTopbar{height:72px;padding:0 max(32px,calc((100vw - 1340px)/2));border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:18px}.topbarHint{color:#8e899f;font-size:12px}.topProfile{display:flex;align-items:center;gap:10px}.topProfile img,.avatarFallback{border-radius:50%;width:32px;height:32px;object-fit:cover;background:#383048}.topProfile>span strong,.topProfile>span small{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topProfile>span strong{font-size:12px;font-weight:650}.topProfile>span small{font-size:10px;color:var(--muted)}.topProfile form{margin-left:17px}.textButton{background:transparent;border:0;color:#9a94a9;cursor:pointer;font-size:12px;padding:7px 4px}.textButton:hover{color:#fff}.portalMain{width:min(1120px,100%);margin:0 auto;flex:1;padding:42px 34px 65px}.portalFooter{padding:20px 34px;border-top:1px solid var(--border);color:#686478;font-size:11px;display:flex;justify-content:space-between;gap:12px}.pageIntro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:29px}.pageIntro h1{margin:0 0 10px}.pageIntro p:not(.eyebrow){color:var(--muted);font-size:13px;margin:0}.eyebrow{font-weight:750;font-size:10px!important;letter-spacing:.17em!important;color:#ad8af5!important;margin:0 0 10px}.metricGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0 0 18px}.metric{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-height:139px}.metric span,.metric strong,.metric small{display:block}.metric span{color:#b8b3c3;font-size:12px}.metric strong{font-size:32px;line-height:1.35;letter-spacing:-.045em;margin:9px 0 1px;font-weight:720}.metric small{color:#706d81;font-size:11px}.contentGrid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);min-width:0;margin-bottom:18px;overflow:hidden}.panelHeading{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 23px 19px;border-bottom:1px solid var(--border)}.panelHeading h2{font-size:15px;margin:0 0 4px}.panelHeading p{font-size:11px;color:var(--muted);margin:0}.subtleLink{text-decoration:none;color:#c1a3fc;font-size:12px;white-space:nowrap}.subtleLink:hover{text-decoration:underline}.productRow,.eventRow,.deviceRow{display:flex;align-items:center;gap:13px;padding:17px 22px;border-bottom:1px solid #262432}.productRow:last-child,.eventRow:last-child,.deviceRow:last-child{border-bottom:0}.productMark{width:39px;height:39px;border-radius:10px;flex:none;background:#292036;border:1px solid #3d2e51;color:#cba9ff;display:grid;place-items:center;font-weight:750}.rowText{flex:1;min-width:0}.rowText strong,.rowText small{display:block}.rowText strong{font-size:12px;font-weight:670;overflow-wrap:anywhere}.rowText small{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}.pill{border:1px solid;border-radius:40px;padding:4px 9px;white-space:nowrap;text-transform:capitalize;font-size:10px;font-weight:700;letter-spacing:.01em}.pill.success{background:#142c24;border-color:#295445;color:#75e2b2}.pill.warning{background:#342a1b;border-color:#655036;color:#f0c47d}.pill.neutral{background:#292535;border-color:#484155;color:#bcb4c8}.eventIcon{border-radius:50%;width:30px;height:30px;display:grid;place-items:center;background:#21342c;color:#71d4aa;flex:none;font-size:13px}.eventList.spacious .eventRow{padding:22px}.eventRow time{font-size:11px;color:var(--muted);white-space:nowrap}.emptyState{text-align:center;padding:45px 22px 50px}.emptyState.compact{padding:46px 20px}.emptyIcon{display:grid;place-items:center;border-radius:12px;background:#29203a;color:#b995f9;font-size:24px;width:48px;height:48px;margin:0 auto 17px}.emptyState h3{margin:0 0 8px;font-size:14px}.emptyState p{max-width:370px;color:var(--muted);font-size:12px;margin:0 auto 20px;line-height:1.65}.emptyState p:last-child{margin-bottom:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:9px;padding:11px 17px;text-decoration:none;font-size:12px;font-weight:650;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}.buttonPrimary{background:#7951d5;border-color:#8b60e4;color:white}.buttonPrimary:hover{background:#9167e9}.buttonSecondary{background:#221b30;color:#d4bff8;border-color:#4e3a67}.buttonSecondary:hover{background:#2e2440}.buttonDanger{background:transparent;color:#ee9ca8;border-color:#6b3e4b}.buttonDanger:hover{background:#40212d}.buttonFull{width:100%}.redeemPanel{margin-bottom:22px}.redeemForm{display:flex;align-items:center;gap:10px;padding:22px 24px 3px}.redeemForm input{flex:1;min-width:0;height:42px;border-radius:8px;border:1px solid #3a364a;background:var(--field);color:#fff;padding:0 14px;font-size:12px;outline:none}.redeemForm input::placeholder{color:#696277}.redeemForm input:focus{border-color:#8762e6;box-shadow:0 0 0 3px #8b5cf621}.fieldHint{font-size:11px;color:var(--muted);padding:0 24px;margin:12px 0 22px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.subscriptionCard{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:21px 24px;border-bottom:1px solid var(--border)}.subscriptionCard:last-child{border-bottom:0}.subscriptionDetails{display:flex;align-items:center;gap:14px}.subscriptionDetails h3{margin:0 0 4px}.subscriptionDetails p{font-size:11px;color:var(--muted);margin:0}.subscriptionMeta{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.accessTag{color:#c1b8d1;background:#23202d;border:1px solid #343042;padding:5px 9px;border-radius:7px;font-size:11px}.expireText{color:#9993a9;font-size:11px;white-space:nowrap}.deviceSymbol{border:1px solid var(--borderHover);width:37px;height:37px;display:grid;place-items:center;border-radius:9px;color:#c1a1f4;font-size:19px}.deviceRow{gap:16px}.revokeForm{margin:0}.plainTip{padding:3px 2px;color:var(--muted);font-size:12px;line-height:1.6}.plainTip strong{color:var(--soft)}.plainTip p{margin:4px 0 0}.notice{margin-bottom:20px;border-radius:9px;padding:12px 16px;font-size:12px}.successNotice{border:1px solid #285740;color:#8be3b2;background:#10251b}.portalGuest .portalContent{margin-left:0;width:100%}.portalGuest .portalMain{display:flex;align-items:center;justify-content:center;padding-top:45px;padding-bottom:70px}.topBrand{display:flex;align-items:center;gap:10px;text-decoration:none}.topBrand strong{letter-spacing:.15em;font-size:16px}.guestCenter{width:100%;display:grid;place-items:center}.loginCard{max-width:430px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:42px;text-align:center;box-shadow:0 25px 90px #0002}.loginBadge{width:51px;height:51px;display:grid;place-items:center;background:#291d42;border:1px solid #4f3674;border-radius:14px;font-size:27px;font-weight:800;color:#c5a7fa;margin:0 auto 23px}.loginCard h1{font-size:26px;margin:0 0 12px}.loginCard>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 28px}.loginCard .privacyLine{margin:20px 0 0!important;color:#787386!important;font-size:10px!important}.buttonDiscord{width:100%;background:#5865f2;color:white;padding:14px;font-size:13px}.buttonDiscord:hover{background:#6571ff}.approveAccount{display:flex;align-items:center;justify-content:space-between;background:#11111a;border:1px solid var(--border);border-radius:8px;padding:15px;margin:5px 0 24px;gap:10px;font-size:12px}.approveAccount>span{color:var(--muted)}.messageSymbol{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#e8be78;border:1px solid #695034;background:#352817;margin:0 auto 18px;font-size:23px}.portalGuest .portalFooter{max-width:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #c6aaff;outline-offset:3px}
@media(max-width:1100px){.customerSidebar{width:208px}.portalContent{width:calc(100% - 208px);margin-left:208px}.contentGrid{grid-template-columns:1fr}.metric{padding:19px}.portalTopbar{padding:0 28px}}
@media(max-width:740px){.portalShell{display:block}.customerSidebar{position:static;width:100%;padding:12px 16px 9px;border-right:0;border-bottom:1px solid var(--border)}.customerBrand{margin:2px 0 13px}.customerBrand small,.sideLabel,.sidebarBottom{display:none}.customerNav{flex-direction:row;overflow:auto;gap:3px;scrollbar-width:none}.customerNav a{font-size:12px;white-space:nowrap;padding:9px 11px}.navGlyph{display:none}.portalContent{margin:0;width:100%}.portalTopbar{height:62px;padding:0 18px}.portalMain{padding:28px 18px 48px}.pageIntro{align-items:flex-start;flex-direction:column;gap:16px}.pageIntro h1{font-size:27px}.metricGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric{padding:14px;min-height:118px}.metric span{font-size:10px}.metric strong{font-size:26px}.metric small{font-size:9px}.portalFooter{padding:18px}.topProfile form{margin-left:1px}.subscriptionCard{align-items:flex-start;flex-direction:column;gap:11px}.subscriptionMeta{justify-content:flex-start}.deviceRow{flex-wrap:wrap}.deviceRow .revokeForm{margin-left:auto}.loginCard{padding:32px 24px}}
@media(max-width:440px){.metricGrid{grid-template-columns:1fr}.metric{min-height:auto}.metric strong{margin:4px 0}.redeemForm{flex-direction:column;align-items:stretch}.redeemForm input{width:100%;flex:none}.portalTopbar .topProfile>span{max-width:120px}.topbarHint{display:none}.eventRow time{white-space:normal}.subscriptionMeta{gap:7px}}

.revokeDisclosure{position:relative}.revokeDisclosure summary{list-style:none;user-select:none}.revokeDisclosure summary::-webkit-details-marker{display:none}.revokeConfirmation{position:absolute;right:0;top:46px;z-index:3;width:220px;background:#201923;border:1px solid #5b3543;border-radius:9px;padding:14px;box-shadow:0 12px 28px #0007}.revokeConfirmation p{font-size:12px;color:#d6c7cc;margin:0 0 12px}.revokeConfirmation button{width:100%}@media(max-width:740px){.revokeConfirmation{right:0}}

/* v2 unified access management */
.staffPermissions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:18px 0}.staffChoice{display:flex;align-items:center;gap:9px;font-size:13px}.staffEntry{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09)}.staffEntry span{flex:1;font-size:12px;opacity:.7;min-width:180px}.staffEntry form{margin:0}

/* v2.3.3: matching customer/management navigation icons */
.customerNav .navIcon,.brandSymbol .navIcon{width:18px;height:18px;display:block;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.customerNav a .navIcon{color:#9690a7;transition:color .14s}
.customerNav a.selected .navIcon,.customerNav a:hover .navIcon{color:#c5a4ff}
.customerNav a:focus-visible{outline:2px solid #ab8dff;outline-offset:2px}
.brandSymbol .navIcon{width:20px;height:20px}

/* 2.3.5: consistent permission management and compact account layout */
.staffLayout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:16px;align-items:start}
.staffPanel{overflow:hidden}.staffForm{padding:22px}.fieldLabel{display:block;color:#d5d0de;font-size:12px;font-weight:650;margin:0 0 9px}.helperInfo{color:#ba9aff;cursor:help}.helperInfo:focus-visible{outline:2px solid #ab8dff;outline-offset:3px}
.staffInput{display:block;width:100%;min-height:43px;padding:10px 12px;background:var(--field);border:1px solid var(--border);border-radius:9px;color:var(--ink);outline:none}
.staffInput:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(145,100,239,.14)}
.staffFieldset{border:0;padding:0;margin:22px 0 0;min-width:0}.staffFieldset legend{font-size:12px;font-weight:650;color:#d5d0de;padding:0}
.staffPermissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.staffChoice{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:var(--field);cursor:pointer;font-size:12px;min-width:0}
.staffChoice:hover,.staffChoice:focus-within{border-color:#63518b;background:#201b30}.staffChoice input{width:16px;height:16px;flex:none;accent-color:var(--purple)}
.staffChoice span{overflow-wrap:anywhere}.staffFormActions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}.staffFormActions>span{color:var(--muted);font-size:11px;max-width:280px}
.staffEntry{padding:16px 20px;gap:10px;display:flex;justify-content:space-between}.staffEntryInfo{min-width:0;flex:1}.staffEntryInfo strong{font-size:12px;overflow-wrap:anywhere}.staffEntryInfo small{display:block;color:var(--muted);font-size:11px;margin-top:6px;overflow-wrap:anywhere}.staffRemove{background:transparent;color:#f5a2b0;border:1px solid #583342;border-radius:8px;padding:7px 11px;cursor:pointer}.staffRemove:hover{background:#33202b}.staffEmpty{padding:28px 22px;color:var(--muted);font-size:13px}
.metric{padding:19px 21px;min-height:112px}.metric strong{margin:5px 0 0}.emptyState{padding:29px 18px 32px}.emptyState.compact{padding:28px 18px}
@media(max-width:950px){.staffLayout{grid-template-columns:1fr}}@media(max-width:520px){.staffPermissions{grid-template-columns:1fr}.staffFormActions{align-items:stretch;flex-direction:column}.staffFormActions .button{justify-content:center}}

/* v2.3.8: Compact Account Header — consistent role hierarchy and keyboard-accessible sign-out. */
.topProfile{gap:11px;min-width:0}
.topProfile .profileAvatar,.topProfile .avatarFallback{width:36px;height:36px;flex:none;border:1px solid #59437a;box-shadow:0 0 0 2px #241b33;border-radius:50%}
.topProfile .avatarFallback{display:grid;place-items:center;color:#cfb5ff;font-weight:750}
.topProfile .profileIdentity{display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:205px;gap:2px}
.topProfile .profileIdentity strong{display:block;font-size:12px;font-weight:700;line-height:1.3;max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topProfile .profileIdentity .accountRole{display:block;font-size:11px;line-height:1.35;font-weight:600;color:#bc9afa;max-width:205px}
.topProfile .profileSignOut{margin:0 0 0 12px;padding-left:14px;border-left:1px solid #383044;flex:none}
.profileSignOutButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;border:1px solid #3d3451;background:#1d1928;color:#c4b6d9;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:650;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.profileSignOutButton:hover{background:#292139;border-color:#7353a1;color:#fff}
.profileSignOutButton:focus-visible{outline:2px solid #c6aaff;outline-offset:3px}
.profileSignOutButton .navGlyph{width:16px;height:16px;font-size:15px;display:inline-flex}
@media(max-width:740px){.topProfile .profileSignOut{margin-left:3px;padding-left:10px}.topProfile .profileIdentity{max-width:145px}.topProfile .profileIdentity strong{max-width:145px}}
@media(max-width:440px){.topProfile{gap:8px}.topProfile .profileAvatar,.topProfile .avatarFallback{width:30px;height:30px}.topProfile .profileIdentity{max-width:108px}.topProfile .profileIdentity strong{max-width:108px}.profileSignOutButton{padding:7px 9px}.profileSignOutButton span{display:none}}
/* v2.3.9: Prevent Account Header Controls From Being Compressed At Reduced Browser Widths / Zoom. */
.portalTopbar{min-width:0}
.portalTopbar .topbarHint{min-width:0;flex:1 1 auto}
.topProfile{flex:0 1 auto;min-width:0;max-width:100%}
.topProfile .profileIdentity{flex:0 1 auto;min-width:0}
.topProfile .profileSignOut{flex:0 0 auto;min-width:max-content;margin-top:0;margin-bottom:0}
.profileSignOutButton{display:inline-flex;flex-direction:row;flex-wrap:nowrap;white-space:nowrap;flex:0 0 auto;min-width:105px;min-height:38px;line-height:1.15;vertical-align:middle}
.profileSignOutButton .navGlyph,.profileSignOutButton .navGlyph svg{flex:0 0 16px;min-width:16px;width:16px;height:16px}
.profileSignOutButton span{display:inline-block;white-space:nowrap;flex:none}
@media(max-width:740px){.portalTopbar{padding-inline:16px}.portalTopbar .topbarHint{display:none}.topProfile{margin-left:auto}.topProfile .profileSignOut{margin-left:5px;padding-left:10px}}
@media(max-width:440px){.profileSignOutButton{min-width:38px;padding:9px}.profileSignOutButton span{display:none}}

/* v2.4.0: stable account controls at all desktop/browser zoom levels. */
.topProfile .profileSignOut,.topProfile .profileSignOutButton{flex-shrink:0!important}
.topProfile .profileSignOutButton{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;white-space:nowrap!important;width:max-content!important;min-width:112px!important;max-width:none!important;gap:8px!important}
.topProfile .profileSignOutButton span{white-space:nowrap!important;display:inline!important;min-width:max-content!important}
@media(max-width:440px){.topProfile .profileSignOutButton{min-width:42px!important}.topProfile .profileSignOutButton span{display:none!important}}

/* v2.5.1: Keep confirmation controls in document flow instead of clipping them inside .panel. */
.deviceRow{align-items:flex-start;flex-wrap:wrap;overflow:visible}
.deviceRow .rowText{flex:1 1 220px;min-width:0}
.deviceRow .pill{margin-top:7px;flex:none}
.deviceRow .revokeDisclosure{position:static;flex:0 0 auto;min-width:154px;margin-left:auto}
.deviceRow .revokeDisclosure>summary{text-align:center}
.deviceRow .revokeConfirmation{position:static;right:auto;top:auto;width:100%;min-width:220px;max-width:270px;margin-top:10px;box-shadow:none}
@media(max-width:660px){.deviceRow .revokeDisclosure{flex-basis:100%;margin-left:0}.deviceRow .revokeConfirmation{max-width:100%}}

/* v2.8 Customer Reset Review */
.deviceRow .rowText small+small{display:block;margin-top:5px;color:#a991fa}
.revokeConfirmation textarea{width:100%;min-height:76px;resize:vertical;margin:8px 0 12px;padding:10px 12px;border-radius:9px;background:#151422;color:#f1eaff;border:1px solid #403550;font:inherit}
.revokeConfirmation label{display:block;font-size:13px}