:root {
    --app-bg: #0d1117;
    --app-surface: #161b22;
    --app-border: #30363d;
    --app-text: #f0f6fc;
    --app-muted: #8b949e;
    --app-accent: #8b5cf6;
    --header-height: 64px;
    --footer-height: 48px;
    --sidebar-width: 260px;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--app-bg); color: var(--app-text); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { font-size: 14px; line-height: 1.5; }
a { color: #a8c7fa; text-decoration: none; }
a:hover { color: #c6dcff; }
button, input, select, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
h2 { margin-bottom: 12px; font-size: 20px; font-weight: 650; line-height: 1.3; }
h3 { font-size: 16px; }
.muted, .page-description { color: var(--app-muted); }
.eyebrow { display: block; margin-bottom: 12px; color: #a78bfa; font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.app-icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--app-bg); }
.app-sidebar { z-index: 20; min-width: 0; min-height: 0; border-right: 1px solid rgb(255 255 255 / 8%); box-shadow: 8px 0 30px rgb(0 0 0 / 15%); }
.app-workspace { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.app-header { display: flex; height: var(--header-height); flex: 0 0 var(--header-height); align-items: center; gap: 14px; padding: 0 32px; border-bottom: 1px solid rgb(255 255 255 / 8%); background: linear-gradient(120deg, rgb(124 58 237 / 22%), rgb(59 130 246 / 18%)); }
.app-header--authorized { background: linear-gradient(90deg, rgb(124 58 237 / 7%), rgb(59 130 246 / 5%)), #111821; }
.header-logo { display: flex; flex-shrink: 0; align-items: center; }
.header-logo img { display: block; object-fit: contain; }
.app-header--authorized .header-logo { display: none; }
.header-context { color: #b7c0ca; font-size: 12px; font-weight: 650; white-space: nowrap; }
.header-context-divider { margin: 0 12px; color: #4b5563; }
.public-shell .header-context { display: none; }
.header-public-label { margin-left: auto; color: #c3bedb; font-size: 12px; letter-spacing: .04em; }
.header-account { display: flex; min-width: 0; align-items: center; gap: 8px; margin-left: auto; }
.account-link { display: inline-flex; min-width: 0; max-width: 320px; gap: 10px; align-items: center; padding: 4px 10px 4px 4px; color: #d7dee7; border-radius: 11px; }
.account-link:hover { color: white; background: rgb(59 130 246 / 10%); }
.account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.user-avatar { display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, rgb(124 58 237 / 52%), rgb(59 130 246 / 46%)); color: #e7f1ff; font-weight: 750; box-shadow: inset 0 0 0 1px rgb(148 197 255 / 14%); }
.user-avatar--large { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; font-size: 22px; }
.icon-button { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; place-items: center; color: #a0aab6; border: 0; border-radius: 10px; background: transparent; }
.icon-button:hover { color: white; background: rgb(59 130 246 / 12%); }
.nav-toggle, .nav-close, .sidebar-backdrop { display: none; }
.navmenu-root { display: flex; height: 100%; min-height: 0; flex-direction: column; background: radial-gradient(circle at 0 0, rgb(124 58 237 / 11%), transparent 16rem), linear-gradient(180deg, #111821, #0d1117); }
.navmenu-header { display: flex; min-height: 100px; align-items: center; justify-content: space-between; padding: 20px; }
.navmenu-brand { display: flex; align-items: center; gap: 11px; color: var(--app-text); }
.navmenu-brand strong, .navmenu-brand small { display: block; }
.navmenu-brand strong { font-size: 18px; letter-spacing: -.035em; }
.navmenu-brand small { margin-top: 3px; font-size: 10px; color: var(--app-muted); }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; font-size: 21px; font-weight: 800; background: linear-gradient(145deg, #6d28d9, #1769b0); box-shadow: 0 8px 22px rgb(59 130 246 / 20%); }
.navmenu-items { min-height: 0; flex: 1; overflow-y: auto; padding: 15px 14px; }
.nav-section + .nav-section { margin-top: 30px; }
.nav-section-label { margin: 0 12px 10px; color: #778391; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.portal-nav-link { display: flex; min-height: 48px; align-items: center; gap: 12px; margin: 4px 0; padding: 10px 13px; border: 1px solid transparent; border-radius: 11px; color: #b7c0ca; font-weight: 600; }
.portal-nav-link:hover { background: rgb(59 130 246 / 8%); color: white; }
.portal-nav-link.active { color: #dbeafe; border-color: rgb(96 165 250 / 15%); background: linear-gradient(100deg, rgb(124 58 237 / 19%), rgb(59 130 246 / 12%)); }
.portal-nav-link.active .app-icon { color: #b59aff; }
.navmenu-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 26px; border-top: 1px solid rgb(255 255 255 / 6%); color: #a0aab6; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.navmenu-footer > span:last-child { width: 100%; color: #697584; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.brand-dot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; }
.app-content { flex: 1; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.page-content { width: 100%; max-width: 1440px; padding: 36px 38px 48px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.page-heading p { margin-bottom: 0; }
.app-footer { display: flex; min-height: var(--footer-height); flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 32px; border-top: 1px solid rgb(255 255 255 / 6%); color: #74808e; font-size: 11px; }
.public-shell { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
.public-content { display: flex; flex: 1; flex-direction: column; }
.panel { padding: 28px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / 8%); }
.panel > :last-child { margin-bottom: 0; }
.profile-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.profile-heading { display: flex; min-width: 0; align-items: center; gap: 16px; margin-bottom: 26px; }
.profile-heading > div { min-width: 0; }
.profile-heading h2 { margin-bottom: 5px; font-size: 18px; overflow-wrap: anywhere; }
.profile-heading p { margin-bottom: 0; color: var(--app-muted); font-size: 12px; }
.profile-details { margin: 0; }
.profile-details > div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid #252d37; }
.profile-details dt { flex-shrink: 0; color: var(--app-muted); font-weight: 400; }
.profile-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid #394354; border-radius: 7px; color: #c4d1e5; font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-chip--success { color: #7ee2a8; border-color: rgb(63 185 80 / 28%); background: rgb(63 185 80 / 8%); }
.status-chip--muted { color: #bdc7d4; background: rgb(139 148 158 / 8%); }
.quick-links { display: grid; gap: 14px; }
.quick-link { display: flex; align-items: center; gap: 16px; padding: 24px; color: var(--app-text); border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); }
.quick-link:hover { border-color: #67518e; background: #1b2130; color: white; }
.quick-link > .app-icon:first-child { width: 28px; height: 28px; flex-basis: 28px; color: #a78bfa; }
.quick-link > .app-icon:last-child { margin-left: auto; color: #778391; }
.quick-link strong, .quick-link small { display: block; }
.quick-link strong { font-size: 15px; }
.quick-link small { margin-top: 5px; color: var(--app-muted); font-size: 12px; }
.btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font-size: 13px; font-weight: 650; line-height: 1.4; border: 1px solid var(--app-border); border-radius: 9px; text-decoration: none; }
.btn-primary { color: white; border-color: #7950c7; background: #7546c7; }
.btn-primary:hover, .btn-primary:active { color: white; border-color: #9a70e3; background: #8957d8; }
.btn-secondary { color: #d7dee7; border-color: #394452; background: #212935; }
.btn-secondary:hover { color: white; background: #2d3746; }
.btn-link { color: #a8c7fa; background: transparent; border-color: transparent; }
.btn-danger-link { color: #ff9b94; background: transparent; border-color: transparent; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.form-control { width: 100%; min-height: 48px; padding: 11px 14px; color: var(--app-text); background: #0d1117; border: 1px solid #3a4551; border-radius: 9px; }
.form-control:hover { border-color: #56616d; }
.form-control:focus { color: var(--app-text); background: #101620; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgb(139 92 246 / 18%); }
.form-control::placeholder { color: #77818c; }
.form-control:-webkit-autofill { -webkit-text-fill-color: var(--app-text); box-shadow: 0 0 0 1000px #101620 inset; caret-color: white; }
.form-grid { display: grid; gap: 20px; }
.form-group { display: grid; gap: 8px; }
.form-group label, .account-page form > label { font-size: 13px; font-weight: 600; color: #d6dde5; }
.form-help { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.6; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.notice, .validation-summary-errors { margin: 0 0 22px; padding: 14px 16px; border: 1px solid rgb(248 81 73 / 35%); border-radius: 9px; color: #ff9b94; background: rgb(248 81 73 / 8%); }
.notice--success { color: #7ee2a8; border-color: rgb(63 185 80 / 35%); background: rgb(63 185 80 / 8%); }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.field-validation-error, .text-danger { color: #ff9b94 !important; }
.input-validation-error { border-color: #f85149; }
.table-panel { overflow: hidden; padding: 0; }
.table-scroll { overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; text-align: left; }
.portal-table th { padding: 16px 20px; color: #8b949e; font-size: 11px; font-weight: 650; background: #111720; white-space: nowrap; }
.portal-table td { padding: 18px 20px; color: #c9d1d9; border-top: 1px solid #252d37; vertical-align: middle; }
.portal-table tbody tr:hover { background: rgb(255 255 255 / 2%); }
.portal-table .email-cell { max-width: 320px; min-width: 180px; overflow-wrap: anywhere; color: var(--app-text); font-weight: 550; }
.table-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.table-actions .btn { min-height: 36px; padding: 7px 8px; font-size: 12px; }
.role-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.empty-state { padding: 40px 24px; color: var(--app-muted); text-align: center; }
.account-page { max-width: 960px; }
.account-email { overflow-wrap: anywhere; }
.account-form-panel { max-width: 720px; }
.account-page form > label { display: block; margin: 20px 0 8px; }
.account-page fieldset { margin: 22px 0; }
.account-page legend { color: #b7c0ca; font-size: 13px; }
.account-page .role-option { display: inline-flex; align-items: center; gap: 8px; margin: 6px 16px 6px 0; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: #8b5cf6; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 5000; padding: 12px 20px; color: white; background: #7546c7; border-radius: 8px; }
.skip-link:focus { top: 8px; }
@media (max-width: 1100px) {
    .profile-grid { grid-template-columns: 1fr; }
    .page-content { padding: 28px 24px; }
    .header-context { display: none; }
}
@media (max-width: 720px) {
    .app-shell { display: block; }
    .app-workspace { height: 100%; }
    .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(var(--sidebar-width), 88vw); z-index: 3000; transform: translateX(-105%); visibility: hidden; transition: transform 180ms ease, visibility 180ms ease; }
    .sidebar-open .app-sidebar { transform: translateX(0); visibility: visible; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 2500; padding: 0; border: 0; background: rgb(0 0 0 / 60%); opacity: 0; visibility: hidden; }
    .sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
    .nav-toggle, .nav-close { display: inline-grid; }
    .navmenu-header { padding: 18px 12px 18px 18px; gap: 4px; }
    .navmenu-brand small { font-size: 9px; }
    .app-header { padding: 0 14px; gap: 10px; }
    .app-header--authorized .header-logo { display: flex; }
    .header-logo img { width: 120px; height: 38px; }
    .account-link { padding: 0; }
    .account-name { display: none; }
    .header-account { gap: 4px; }
    .page-content { padding: 26px 18px 36px; }
    .panel { padding: 22px; }
    .table-panel { padding: 0; }
    .page-heading { margin-bottom: 22px; }
    .app-footer { padding: 12px 18px; font-size: 10px; }
    .footer-date { display: none; }
    .profile-details > div { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}