:root {
  --navy-975: #050b15;
  --navy-950: #07111f;
  --navy-900: #0a1b2f;
  --navy-850: #0d2743;
  --navy-800: #133959;
  --blue-500: #2a83db;
  --blue-400: #59a8ef;
  --blue-100: #dfefff;
  --ink: #102135;
  --text: #1a3149;
  --muted: #6e8195;
  --line: #dce6ef;
  --canvas: #f1f5f9;
  --card: #ffffff;
  --green: #11875e;
  --green-soft: #dff8ed;
  --amber: #b97608;
  --amber-soft: #fff2d8;
  --red: #bd3e4a;
  --red-soft: #ffe5e8;
  --purple: #7558bd;
  --purple-soft: #eee8ff;
  --shadow: 0 18px 45px rgba(16, 41, 67, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(42,131,219,.25); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.045em; }
h2 { margin-bottom: 7px; font-size: 1.25rem; letter-spacing: -.03em; }
h3 { margin-bottom: 0; font-size: 1rem; }
small { display: block; color: var(--muted); margin-top: 3px; }
code { font-size: .77rem; }
img { display: block; max-width: 100%; }
.eyebrow { margin: 0 0 7px; color: rgba(255,255,255,.7); font-size: .65rem; font-weight: 900; letter-spacing: .15em; }
.eyebrow.accent { color: var(--blue-500); }
.muted { color: var(--muted); line-height: 1.58; }
.empty-copy { margin: 0; color: var(--muted); line-height: 1.6; }

/* Sign-in */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 14% 15%, #1e5b93 0, transparent 34%), radial-gradient(circle at 85% 84%, rgba(26,107,191,.26) 0, transparent 28%), linear-gradient(135deg, #06101e 0%, #0a1e35 56%, #0a2946 100%); }
.login-shell { display: grid; grid-template-columns: 1.08fr .92fr; width: min(1030px, 100%); min-height: 590px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; background: white; box-shadow: 0 35px 100px rgba(0,0,0,.36); }
.brand-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 76px); overflow: hidden; color: white; background: linear-gradient(155deg, #123d68, #09182a 74%); }
.brand-panel::before, .brand-panel::after { position: absolute; border: 1px solid rgba(138,202,255,.17); content: ""; transform: rotate(45deg); }
.brand-panel::before { width: 390px; height: 390px; right: -230px; top: -130px; }
.brand-panel::after { width: 300px; height: 300px; left: -220px; bottom: -190px; }
.brand-panel > * { position: relative; z-index: 1; }
.brand-panel h1 { max-width: 390px; font-size: clamp(2.2rem, 4.3vw, 3.55rem); line-height: .97; }
.brand-copy { max-width: 365px; margin: 22px 0 35px; color: rgba(255,255,255,.8); line-height: 1.7; }
.brand-mark { display: flex; align-items: stretch; gap: 2px; width: 74px; height: 74px; margin-bottom: 28px; }
.brand-mark span { display: grid; flex: 1; place-items: center; padding-right: 5px; color: #0b2948; background: white; font-size: 1.9rem; font-weight: 950; letter-spacing: -.16em; }
.brand-mark span:last-child { padding-left: 3px; padding-right: 0; color: white; border: 3px solid white; border-left: 0; background: transparent; }
.brand-mark.compact { flex: 0 0 auto; width: 42px; height: 42px; margin: 0; }
.brand-mark.compact span { font-size: 1.05rem; }
.security-note { display: flex; gap: 13px; max-width: 390px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
.security-note span { color: #83c8ff; }
.security-note p { margin: 0; color: rgba(255,255,255,.73); font-size: .84rem; line-height: 1.5; }
.security-note strong { color: white; }
.login-panel { display: flex; flex-direction: column; justify-content: center; gap: 27px; padding: clamp(31px, 6vw, 64px); background: white; }
.login-panel .eyebrow { color: var(--blue-500); }
.login-panel h2 { margin-bottom: 8px; font-size: 2rem; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 58px; }
.password-field button { position: absolute; top: 50%; right: 7px; border: 0; padding: 5px 7px; color: #3671a3; background: transparent; font-size: .68rem; font-weight: 900; transform: translateY(-50%); }
.login-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -12px; }
.login-meta span { padding: 4px 6px; border-radius: 4px; color: #668097; background: #edf4fa; font-size: .55rem; font-weight: 900; letter-spacing: .06em; }

/* Shared fields and buttons */
.stack-form { display: grid; gap: 16px; }
.compact-form { gap: 13px; }
label { display: grid; gap: 7px; color: #344a61; font-size: .81rem; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid #cedbe6; border-radius: 10px; padding: 12px 13px; color: var(--ink); background: white; transition: border .16s, box-shadow .16s, background .16s; }
textarea { min-height: 90px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: #a2b0be; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 3px rgba(42,131,219,.12); }
input:disabled { color: #738397; background: #f4f7fa; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 0; border-radius: 10px; padding: 10px 15px; font-size: .8rem; font-weight: 900; text-decoration: none; white-space: nowrap; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { color: white; background: linear-gradient(135deg, #2c87de, #165c9d); box-shadow: 0 8px 18px rgba(23,90,157,.22); }
.button.primary:hover { background: linear-gradient(135deg, #398fe3, #1966ad); }
.button.ghost { color: #265d91; background: #e8f3ff; }
.button.ghost:hover { background: #d8ebff; }
.button.glass { color: white; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10); backdrop-filter: blur(8px); }
.button.glass:hover { background: rgba(255,255,255,.17); }
.button.full { width: 100%; }
.danger-button { min-height: 42px; border: 0; border-radius: 10px; padding: 10px 15px; color: white; background: var(--red); font-size: .8rem; font-weight: 900; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.text-button { border: 0; padding: 4px; color: #316b9e; background: transparent; font-size: .75rem; font-weight: 900; }
.text-button:hover { text-decoration: underline; }
.text-button.danger { color: var(--red); }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; color: #5d758d; background: transparent; font-size: 1.22rem; }
.icon-button:hover { color: var(--red); background: #ffeaec; }
.form-error { margin: 0; color: #b52f3b; font-size: .83rem; line-height: 1.45; }
.form-help { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.form-divider { display: flex; align-items: center; gap: 10px; color: #7b8fa2; font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.form-divider::before, .form-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }

/* Application shell */
.app-body { min-height: 100vh; background: var(--canvas); }
.app-shell { display: grid; min-height: 100vh; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 23px 15px 16px; color: white; background: linear-gradient(180deg, #08192b 0%, #07111e 100%); }
.sidebar::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, #4b9add, transparent); opacity: .5; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; color: white; text-decoration: none; }
.sidebar-brand strong { display: block; font-size: .92rem; letter-spacing: .09em; }
.sidebar-brand small { margin-top: 1px; color: #7ab5e8; font-size: .54rem; font-weight: 900; letter-spacing: .12em; }
.service-card { display: flex; align-items: center; gap: 10px; margin: 0 5px 22px; padding: 11px; border: 1px solid rgba(126,181,232,.16); border-radius: 11px; background: rgba(86,151,211,.08); }
.service-card strong { display: block; color: #dceeff; font-size: .71rem; }
.service-card small { color: #7d9ebd; font-size: .61rem; }
.service-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #4cd29a; box-shadow: 0 0 0 4px rgba(76,210,154,.12); }
.service-dot.offline { background: #f16b72; box-shadow: 0 0 0 4px rgba(241,107,114,.12); }
.side-nav { display: grid; gap: 3px; }
.nav-section-label { margin: 16px 11px 4px; color: #68849f; font-size: .59rem; font-weight: 900; letter-spacing: .14em; }
.nav-section-label:first-child { margin-top: 0; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; border-radius: 9px; padding: 11px 11px; color: #aabfd2; background: transparent; font-size: .82rem; font-weight: 800; text-align: left; }
.nav-item:hover { color: white; background: rgba(126,184,235,.075); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(43,129,216,.38), rgba(43,129,216,.09)); box-shadow: inset 3px 0 #64b3f0; }
.nav-icon { display: grid; width: 18px; place-items: center; color: #83c2f1; font-size: 1rem; }
.nav-badge { min-width: 19px; margin-left: auto; padding: 2px 5px; border-radius: 99px; color: #dceeff; background: rgba(77,158,232,.24); font-size: .61rem; text-align: center; }
.sidebar-foot { margin-top: auto; padding: 17px 10px 1px; border-top: 1px solid rgba(255,255,255,.08); color: #8aa1b7; font-size: .63rem; font-weight: 900; letter-spacing: .1em; }
.sidebar-foot small { color: #58728d; font-size: .57rem; font-weight: 700; letter-spacing: .03em; }
.workspace { min-width: 0; padding: 0 clamp(20px, 4vw, 54px) 45px; }
.topbar { display: flex; min-height: 111px; align-items: center; gap: 18px; border-bottom: 1px solid #dce6ef; }
.topbar-title { flex: 1 1 auto; min-width: 160px; }
.topbar .eyebrow { margin-bottom: 4px; }
.top-search { display: flex; flex: 0 1 290px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #d1dee9; border-radius: 10px; color: #6b89a4; background: white; }
.top-search input { min-width: 0; padding: 10px 0; border: 0; box-shadow: none; background: transparent; font-size: .76rem; }
.top-search input:focus { box-shadow: none; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.connection-chip { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 99px; color: #6d8193; background: #e7edf3; font-size: .64rem; font-weight: 900; }
.connection-chip.healthy { color: #087554; background: var(--green-soft); }
.connection-chip.warning { color: #9a6005; background: var(--amber-soft); }
.connection-chip.danger { color: #a92d39; background: var(--red-soft); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.staff-profile { display: flex; align-items: center; gap: 8px; border: 0; padding: 4px 6px; border-radius: 10px; color: var(--ink); background: transparent; text-align: left; }
.staff-profile:hover { background: #e9f0f6; }
.staff-profile-copy { min-width: 0; }
.staff-profile strong { display: block; max-width: 115px; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-profile small { margin: 1px 0 0; font-size: .62rem; }
.avatar-initial, .staff-avatar, .profile-avatar, .member-avatar { display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; color: white; background: linear-gradient(135deg, #328be1, #154f89); font-weight: 900; }
.avatar-initial { width: 36px; height: 36px; font-size: .82rem; }
.avatar-initial img, .staff-avatar img, .profile-avatar img, .member-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Global cards and overview */
.page { display: none; padding-top: 29px; animation: fade-in .18s ease-out; }
.page.active-page { display: block; }
@keyframes fade-in { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.panel { border: 1px solid #dbe5ee; border-radius: 15px; padding: clamp(18px, 2.7vw, 27px); background: var(--card); box-shadow: 0 6px 18px rgba(9,35,63,.035); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 17px; }
.panel-heading p { margin-bottom: 0; }
.hero-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; overflow: hidden; min-height: 210px; padding: clamp(25px, 4vw, 40px); border-radius: 18px; color: white; background: linear-gradient(130deg, #0e3760, #0a1b2e 70%); box-shadow: var(--shadow); }
.hero-panel::before { position: absolute; top: -155px; right: 7%; width: 390px; height: 390px; border: 1px solid rgba(144,205,255,.17); content: ""; transform: rotate(45deg); }
.hero-panel::after { position: absolute; right: -60px; bottom: -130px; width: 310px; height: 310px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(57,150,238,.22), transparent 68%); }
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel h2 { max-width: 600px; margin-bottom: 11px; color: white; font-size: clamp(1.65rem, 3vw, 2.55rem); }
.hero-panel > div > p:not(.eyebrow) { max-width: 650px; margin-bottom: 20px; color: #c9deef; line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-status { display: flex; align-self: end; align-items: center; gap: 12px; min-width: 186px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(4,19,34,.34); backdrop-filter: blur(7px); }
.hero-status small { margin: 0; color: #93bad9; font-size: .58rem; font-weight: 900; letter-spacing: .11em; }
.hero-status strong { display: block; margin-top: 2px; color: white; font-size: .8rem; }
.pulse-ring { width: 9px; height: 9px; border-radius: 50%; background: #4fd39b; box-shadow: 0 0 0 7px rgba(79,211,155,.14), 0 0 24px rgba(79,211,155,.7); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-top: 17px; }
.metric-card { position: relative; min-height: 134px; overflow: hidden; padding: 18px; border-radius: 14px; color: white; box-shadow: 0 10px 24px rgba(13,42,70,.1); }
.metric-card::after { position: absolute; top: -46px; right: -35px; width: 105px; height: 105px; border-radius: 50%; content: ""; background: rgba(255,255,255,.09); }
.metric-card p { position: relative; z-index: 1; margin-bottom: 12px; color: rgba(255,255,255,.76); font-size: .7rem; font-weight: 800; }
.metric-card strong { position: relative; z-index: 1; display: block; font-size: 2rem; letter-spacing: -.06em; }
.metric-card span { position: relative; z-index: 1; display: block; margin-top: 7px; color: rgba(255,255,255,.72); font-size: .65rem; line-height: 1.3; }
.metric-blue { background: linear-gradient(135deg, #1f6fb8, #103e70); }
.metric-amber { background: linear-gradient(135deg, #d7921e, #9f5e06); }
.metric-red { background: linear-gradient(135deg, #dd5b66, #a62e3b); }
.metric-slate { background: linear-gradient(135deg, #586b7f, #293849); }
.metric-purple { background: linear-gradient(135deg, #7960bd, #47377d); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr); gap: 17px; margin-top: 17px; }
.action-panel { grid-row: span 2; }
.command-actions { display: grid; gap: 8px; margin-top: 21px; }
.command-action { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 11px; padding: 12px; color: var(--ink); background: #f7fafd; text-align: left; }
.command-action:hover { border-color: #bedcf5; background: #eff8ff; }
.command-action strong { display: block; font-size: .82rem; }
.command-action small { font-size: .68rem; }
.command-action b { color: #3e78aa; }
.command-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; font-size: 1rem; font-weight: 900; }
.command-icon.blue { color: #2168aa; background: #ddecfc; }
.command-icon.amber { color: #9a6108; background: var(--amber-soft); }
.command-icon.violet { color: #6045a6; background: var(--purple-soft); }
.command-icon.green { color: #087754; background: var(--green-soft); }
.live-panel { min-height: 258px; }
.activity-feed { display: grid; gap: 0; margin-top: 15px; }
.activity-item { display: grid; grid-template-columns: 10px 1fr; gap: 9px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef2f5; }
.activity-item:last-child { border-bottom: 0; }
.activity-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); }
.activity-mark.discord { background: #607dd3; }
.activity-mark.game { background: #e48e1f; }
.activity-mark.system { background: #7d60bf; }
.activity-item strong { display: block; color: #25415a; font-size: .74rem; }
.activity-item small { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.readiness-panel { min-height: 238px; }
.readiness-list { display: grid; gap: 10px; margin: 17px 0; }
.readiness-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.readiness-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; }
.readiness-dot.healthy { background: #20ad77; }
.readiness-dot.warning { background: #e4a334; }
.readiness-dot.danger { background: #dc5861; }
.readiness-dot.neutral { background: #93a2b1; }
.readiness-item strong { display: block; font-size: .72rem; }
.readiness-item small { max-width: 280px; font-size: .61rem; line-height: 1.35; }
.readiness-item b { color: #678096; font-size: .6rem; white-space: nowrap; }

/* Member dossier */
.search-panel { padding-bottom: 20px; }
.search-form { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 6px 7px 6px 14px; border: 1px solid #cfdeea; border-radius: 12px; color: #5d86ac; background: #f9fcff; }
.search-form input { flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent; box-shadow: none; }
.search-form input:focus { box-shadow: none; }
.member-search-results { display: grid; gap: 6px; margin-top: 10px; }
.search-message { margin: 8px 4px 0; color: var(--muted); font-size: .78rem; }
.member-result-row { display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #dfebf3; border-radius: 10px; padding: 9px; color: var(--ink); background: white; text-align: left; }
.member-result-row:hover { border-color: #a9d2f5; background: #f4faff; }
.member-result-row strong { display: block; font-size: .78rem; }
.member-result-row small { overflow: hidden; max-width: 500px; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.member-result-row b { color: #2f76b3; font-size: .66rem; white-space: nowrap; }
.member-avatar.small { width: 34px; height: 34px; font-size: .75rem; }
.member-avatar.large { width: 60px; height: 60px; font-size: 1.25rem; }
.dossier { margin-top: 17px; }
.empty-state { display: grid; min-height: 230px; place-items: center; text-align: center; }
.empty-state > div { max-width: 360px; }
.empty-state h2 { margin-top: 12px; }
.empty-state p { margin-bottom: 0; color: var(--muted); }
.empty-icon { display: grid; width: 43px; height: 43px; margin: auto; place-items: center; border-radius: 12px; color: #2978bc; background: #e3f1ff; font-size: 1.3rem; font-weight: 900; }
.dossier-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.dossier-person { display: flex; align-items: center; gap: 13px; min-width: 0; }
.dossier-person h2 { margin-bottom: 2px; }
.dossier-person p:not(.eyebrow) { margin-bottom: 4px; color: #5a7086; font-size: .78rem; }
.dossier-person small { font-size: .66rem; }
.dossier-grid { display: grid; grid-template-columns: minmax(280px, .88fr) minmax(300px, 1.12fr); gap: 20px; padding-top: 21px; }
.dossier-section { min-width: 0; }
.dossier-section h3 { margin-bottom: 17px; }
.member-roles-form { margin-top: 20px; }
.role-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 250px; overflow: auto; padding: 2px; }
.role-check { display: grid; grid-template-columns: 15px 8px minmax(0, 1fr); gap: 7px; align-items: center; border: 1px solid #dce7ef; border-radius: 9px; padding: 9px; color: #243c55; background: #fbfdff; font-size: .71rem; }
.role-check input { width: 15px; height: 15px; margin: 0; }
.role-dot { width: 7px; height: 24px; border-radius: 99px; }
.role-check strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-check small { overflow: hidden; margin-top: 1px; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.verification-identity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.verification-identity > div { padding: 11px; border-radius: 10px; background: #f5f9fc; }
.verification-identity small { margin: 0; color: #778ca0; font-size: .59rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.verification-identity strong { display: block; overflow: hidden; margin: 4px 0 2px; color: #23415d; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.verification-identity span { display: block; overflow: hidden; color: #6c8499; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.check-list { display: grid; gap: 7px; }
.check-row { display: grid; grid-template-columns: 21px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 9px; border: 1px solid #e2eaf1; border-radius: 9px; }
.check-row > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: .7rem; font-weight: 950; }
.check-row.failed > span { background: var(--red); }
.check-row strong { display: block; font-size: .69rem; }
.check-row small { font-size: .61rem; line-height: 1.35; }
.check-row em { padding: 3px 5px; border-radius: 99px; color: #2e6c55; background: #e7f8ef; font-size: .56rem; font-style: normal; font-weight: 900; }
.check-row em.optional { color: #677b8d; background: #edf2f6; }
.dossier-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.no-verification { display: flex; gap: 10px; align-items: center; padding: 15px; border: 1px dashed #cbd9e5; border-radius: 10px; color: #5d7891; background: #f8fbfe; }
.no-verification > span { font-size: 1.2rem; }
.no-verification strong { display: block; color: #34516b; font-size: .76rem; }
.no-verification small { font-size: .64rem; }
.notes-section { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); }
.note-form { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: start; gap: 9px; }
.note-form textarea { min-height: 43px; height: 43px; }
.note-form .button { min-height: 43px; }
.notes-list { display: grid; gap: 8px; margin-top: 15px; }
.note-card { padding: 11px 13px; border-left: 3px solid #6f8da9; border-radius: 0 9px 9px 0; background: #f7fafc; }
.note-card.verification { border-left-color: var(--blue-500); }
.note-card.conduct { border-left-color: var(--amber); }
.note-card.staff { border-left-color: var(--purple); }
.note-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.note-card p { margin: 7px 0 0; color: #435e76; font-size: .74rem; line-height: 1.45; white-space: pre-wrap; }
.note-card small { margin: 0; font-size: .61rem; }
.note-category { padding: 3px 6px; border-radius: 99px; color: #365a7e; background: #e2edf7; font-size: .57rem; font-weight: 900; }

/* Verification, tables and filtering */
.verification-heading, .audit-heading { align-items: center; }
.filter-bar { display: flex; align-items: flex-end; gap: 10px; margin-top: 19px; padding: 12px; border-radius: 11px; background: #f5f9fc; }
.filter-bar label { flex: 0 0 170px; font-size: .7rem; }
.filter-bar .filter-grow { flex: 1 1 240px; }
.filter-bar input, .filter-bar select { padding: 9px 10px; border-radius: 8px; font-size: .76rem; }
.table-wrap { width: 100%; overflow-x: auto; margin-top: 17px; border: 1px solid #dfe8ef; border-radius: 11px; }
table { width: 100%; min-width: 790px; border-collapse: collapse; color: #334e66; font-size: .74rem; text-align: left; }
th { padding: 11px 13px; color: #6c8295; background: #f4f8fb; font-size: .61rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
td { padding: 12px 13px; border-top: 1px solid #e8eef3; vertical-align: middle; }
td strong { display: block; color: #223e57; font-size: .73rem; }
td small { max-width: 165px; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.empty-table { padding: 28px; color: var(--muted); text-align: center; }
.status-pill { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 99px; font-size: .59rem; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.status-pill.approved, .status-pill.online, .status-pill.ready { color: #06714d; background: #dcf8e9; }
.status-pill.pending_review, .status-pill.needs_setup { color: #8c5804; background: #fff0d1; }
.status-pill.rejected, .status-pill.failed, .status-pill.offline { color: #a52e3a; background: #ffe2e5; }
.status-pill.checking, .status-pill.disabled { color: #5c7184; background: #e8eef3; }
.check-count { display: inline-flex; padding: 4px 7px; border-radius: 6px; color: #197154; background: #e5f7ef; font-size: .62rem; font-weight: 900; }
.check-count.has-failures { color: #a64d19; background: #fff0dd; }
.table-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 150px; }
.tiny-button { border: 0; border-radius: 6px; padding: 6px 7px; color: white; font-size: .61rem; font-weight: 900; white-space: nowrap; }
.tiny-button.approve { background: var(--green); }
.tiny-button.reject { background: var(--red); }
.tiny-button.ghost { color: #2b6495; background: #e7f2fc; }

/* Role, staff and profile */
.content-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: 17px; }
.mapping-list, .staff-list { display: grid; gap: 9px; margin-top: 20px; }
.staff-list { max-height: min(620px, 70vh); overflow-y: auto; align-content: start; padding: 0 6px 6px 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.staff-list::-webkit-scrollbar { width: 8px; }
.staff-list::-webkit-scrollbar-thumb { border-radius: 8px; background: #526477; }
.mapping-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #ecf1f5; }
.mapping-row:last-child { border-bottom: 0; }
.mapping-colour { width: 8px; height: 34px; border-radius: 99px; }
.mapping-row strong { display: block; font-size: .8rem; }
.mapping-row small { font-size: .65rem; }
.mapping-actions { display: flex; align-items: center; gap: 8px; }
.mini-state { padding: 4px 6px; border-radius: 99px; color: #167054; background: #e0f7eb; font-size: .57rem; font-weight: 900; }
.mini-state.neutral { color: #65798c; background: #e9eff4; }
.toggle-line { grid-template-columns: 34px minmax(0, 1fr); align-items: center; cursor: pointer; }
.toggle-line input { position: absolute; width: 1px; opacity: 0; }
.toggle-ui { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #b4c2cf; transition: background .16s; }
.toggle-ui::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; content: ""; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .16s; }
.toggle-line input:checked + .toggle-ui { background: #2b82d5; }
.toggle-line input:checked + .toggle-ui::after { transform: translateX(14px); }
.staff-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid #e0e9f0; border-radius: 11px; background: #fcfdff; }
.staff-card.inactive { opacity: .63; }
.staff-card-info { display: grid; min-width: 0; gap: 4px; }
.staff-avatar { width: 39px; height: 39px; font-size: .8rem; }
.staff-card-info strong { display: block; overflow: hidden; color: #29445d; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.staff-card-info small { overflow-wrap: anywhere; font-size: .64rem; line-height: 1.35; }
.staff-card-info span { display: block; margin-top: 3px; color: #7a8e9f; font-size: .6rem; }
.staff-card-controls { display: flex; grid-column: 2; flex-wrap: wrap; justify-content: flex-start; gap: 5px; }
.staff-card-controls select { width: 195px; max-width: 100%; padding: 6px; border-radius: 6px; font-size: .64rem; }
.self-badge { padding: 4px 7px; border-radius: 99px; color: #286498; background: #e1f0fd; font-size: .6rem; font-weight: 900; }
.system-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.system-intro p { margin-bottom: 0; }
.system-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-top: 17px; }
.system-card { min-height: 192px; padding: 18px; border: 1px solid #dce6ef; border-top: 3px solid #7a8ea1; border-radius: 14px; background: white; box-shadow: 0 6px 17px rgba(9,35,63,.03); }
.system-card.healthy { border-top-color: #26ae79; }
.system-card.warning { border-top-color: #d99a2c; }
.system-card.danger { border-top-color: #dc5661; }
.system-card.neutral { border-top-color: #8598aa; }
.system-card-top { display: flex; align-items: center; justify-content: space-between; }
.system-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #3779b3; background: #e3f1fd; font-size: .95rem; font-weight: 900; }
.system-card h3 { margin-top: 17px; font-size: .88rem; }
.system-card p { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.5; }
.setup-panel { margin-top: 17px; }
.setup-list { display: grid; gap: 10px; margin: 17px 0 0; padding-left: 20px; color: #405b72; font-size: .77rem; line-height: 1.5; }
.profile-card { display: flex; flex-direction: column; align-items: flex-start; }
.profile-avatar-wrap { display: flex; align-items: center; gap: 15px; margin: 12px 0; }
.profile-avatar { width: 86px; height: 86px; font-size: 2rem; }
.avatar-upload { display: inline-flex; width: auto; align-items: center; min-height: 39px; border: 1px solid #c9dfef; border-radius: 9px; padding: 9px 11px; color: #29699f; background: #edf7ff; font-size: .72rem; cursor: pointer; }
.avatar-upload input { position: absolute; width: 1px; opacity: 0; }

/* Audit and modal */
.metadata { display: block; max-width: 420px; color: #687f94; font-size: .68rem; overflow-wrap: anywhere; white-space: normal; }
.command-modal { width: min(760px, calc(100vw - 28px)); max-height: min(790px, calc(100vh - 28px)); overflow: auto; border: 0; border-radius: 16px; padding: 0; color: var(--ink); box-shadow: 0 25px 90px rgba(0,0,0,.32); }
.command-modal::backdrop { background: rgba(4,13,24,.62); backdrop-filter: blur(3px); }
.modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 23px 14px; border-bottom: 1px solid var(--line); background: white; }
.modal-header h2 { margin-bottom: 0; }
.modal-header .eyebrow { margin-bottom: 5px; }
#modal-content { padding: 22px 23px 24px; }
.verification-modal { display: grid; gap: 17px; }
.modal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.modal-summary > div { min-width: 0; padding: 12px; border-radius: 10px; background: #f5f9fc; }
.modal-summary small { margin: 0; color: #768b9f; font-size: .59rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.modal-summary strong { display: block; overflow: hidden; margin: 5px 0 3px; color: #233f58; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.modal-summary span { display: block; overflow: hidden; color: #6c8294; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.reason-box { padding: 12px; border-radius: 10px; }
.reason-box.reject { color: #8e303b; background: #fff0f1; }
.reason-box.override { color: #875600; background: #fff5df; }
.reason-box strong { display: block; font-size: .72rem; }
.reason-box p { margin: 5px 0 0; font-size: .74rem; line-height: 1.45; white-space: pre-wrap; }
.modal-actions { margin-top: 2px; }
.toast { position: fixed; right: 24px; bottom: 23px; z-index: 50; max-width: min(390px, calc(100vw - 48px)); padding: 13px 15px; border-radius: 10px; color: white; background: #126e51; box-shadow: 0 15px 32px rgba(8,36,30,.24); font-size: .78rem; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #b93844; }

@media (max-width: 1250px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 222px minmax(0, 1fr); }
  .workspace { padding-inline: 24px; }
  .connection-chip { display: none; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .action-panel { grid-row: auto; }
  .content-split { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .login-body { padding: 0; }
  .login-shell { grid-template-columns: 1fr; min-height: 100vh; border: 0; border-radius: 0; }
  .brand-panel { min-height: 320px; }
  .app-shell { display: block; }
  .sidebar { position: sticky; z-index: 10; height: auto; min-height: 70px; flex-direction: row; align-items: center; padding: 10px 13px; overflow-x: auto; }
  .sidebar-brand { flex: 0 0 auto; padding: 0 11px 0 0; }
  .sidebar-brand .brand-mark { width: 33px; height: 33px; }
  .sidebar-brand strong, .sidebar-brand small, .service-card, .sidebar-foot, .nav-section-label { display: none; }
  .side-nav { display: flex; gap: 3px; }
  .nav-item { flex: 0 0 auto; width: auto; padding: 9px; font-size: 0; }
  .nav-item .nav-icon { width: 18px; font-size: 1rem; }
  .nav-badge { position: absolute; margin: -15px 0 0 12px; font-size: .54rem; }
  .workspace { padding: 0 15px 30px; }
  .topbar { min-height: 85px; }
  .top-search { display: none; }
  .staff-profile-copy { display: none; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-status { align-self: auto; width: fit-content; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card:last-child { grid-column: span 2; }
  .dossier-grid { grid-template-columns: 1fr; }
  .notes-section { grid-column: auto; }
  .role-check-grid { grid-template-columns: 1fr; }
  .note-form { grid-template-columns: 1fr; }
  .note-form textarea { height: auto; }
  .filter-bar { display: grid; align-items: stretch; }
  .filter-bar label { width: 100%; }
  .system-intro { align-items: flex-start; flex-direction: column; }
  .modal-summary { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .topbar { gap: 8px; }
  .topbar-title h1 { font-size: 1.42rem; }
  .hero-panel { padding: 22px; }
  .metric-grid, .system-grid { grid-template-columns: 1fr; }
  .metric-card:last-child { grid-column: auto; }
  .dossier-header { align-items: flex-start; flex-direction: column; }
  .dossier-person { align-items: flex-start; }
  .verification-identity { grid-template-columns: 1fr; }
  .search-form { align-items: stretch; flex-wrap: wrap; }
  .search-form > span { display: none; }
  .search-form input { flex-basis: 100%; }
  .member-result-row { grid-template-columns: 34px minmax(0, 1fr); }
  .member-result-row b { display: none; }
  .staff-card { grid-template-columns: 38px minmax(0, 1fr); }
  .staff-card-controls { grid-column: 2; justify-content: flex-start; }
  .staff-list { max-height: 60vh; }
}

/* Member Portal — intentionally wide for a future public domain. */
.hidden { display: none !important; }
.portal-body { min-height: 100vh; background: radial-gradient(circle at 12% -4%, rgba(59,143,224,.19), transparent 31%), linear-gradient(180deg, #071525 0, #0b2038 290px, #eef4f8 290px); }
.portal-header { position: sticky; top: 0; z-index: 20; display: flex; min-height: 78px; align-items: center; gap: 28px; padding: 12px clamp(18px, 5vw, 84px); border-bottom: 1px solid rgba(159,205,245,.13); color: white; background: rgba(6,17,31,.90); backdrop-filter: blur(16px); }
.portal-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; color: white; text-decoration: none; }
.portal-brand .brand-mark { width: 39px; height: 39px; margin: 0; }
.portal-brand .brand-mark span { font-size: 1rem; }
.portal-brand strong { display: block; font-size: .87rem; letter-spacing: .1em; }
.portal-brand small { margin: 1px 0 0; color: #79b9e8; font-size: .53rem; font-weight: 900; letter-spacing: .13em; }
.portal-nav { display: flex; flex: 1; justify-content: center; gap: 5px; }
.portal-nav button { border: 0; border-radius: 8px; padding: 8px 12px; color: #9fb5c9; background: transparent; font-size: .73rem; font-weight: 850; }
.portal-nav button:hover, .portal-nav button.active { color: white; background: rgba(102,177,236,.16); }
.portal-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.portal-game-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(138,183,220,.16); border-radius: 99px; color: #b7c7d6; background: rgba(255,255,255,.04); font-size: .66rem; font-weight: 900; }
.portal-game-chip i { width: 6px; height: 6px; border-radius: 50%; background: #8ca1b2; }
.portal-game-chip.online { color: #baf0d6; border-color: rgba(78,211,153,.22); background: rgba(32,151,103,.12); }
.portal-game-chip.online i { background: #4cd29a; box-shadow: 0 0 0 4px rgba(76,210,154,.12); }
.portal-user-menu { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 9px; padding: 4px 7px 4px 4px; color: #dcecff; background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 850; }
.portal-user-menu:hover { background: rgba(255,255,255,.12); }
.portal-mini-avatar, .portal-avatar { display: grid; overflow: hidden; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, #378fe2, #164d83); font-weight: 900; }
.portal-mini-avatar { width: 29px; height: 29px; font-size: .72rem; }
.portal-mini-avatar img, .portal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.portal-main { width: min(1480px, 100%); margin: 0 auto; padding: 0 clamp(18px, 5vw, 84px) 56px; }
.portal-landing { display: grid; min-height: calc(100vh - 78px); grid-template-columns: minmax(0, 1.13fr) minmax(310px, .87fr); align-items: center; gap: clamp(34px, 8vw, 130px); padding: 70px 0 92px; color: white; }
.portal-landing-copy { max-width: 700px; }
.portal-landing h1 { max-width: 700px; font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: .94; letter-spacing: -.065em; }
.portal-landing-copy > p:not(.eyebrow):not(.portal-login-message) { max-width: 620px; margin: 26px 0 31px; color: #b8cadb; font-size: 1.04rem; line-height: 1.75; }
.portal-landing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-login { min-height: 48px; padding-inline: 19px; }
.portal-login-message { max-width: 540px; margin: 18px 0 0; color: #8fa8bf; font-size: .72rem; line-height: 1.55; }
.portal-landing-card { padding: 28px; border: 1px solid rgba(158,207,250,.18); border-radius: 20px; background: linear-gradient(145deg, rgba(29,79,122,.62), rgba(8,26,46,.76)); box-shadow: 0 28px 75px rgba(0,0,0,.22); }
.portal-card-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #91c9fa; font-size: .61rem; font-weight: 950; letter-spacing: .14em; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #4fd49d; box-shadow: 0 0 0 5px rgba(79,212,157,.13); }
.portal-feature { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-top: 1px solid rgba(180,215,241,.13); }
.portal-feature > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: #a7d8ff; background: rgba(90,166,228,.14); font-weight: 900; }
.portal-feature strong { display: block; color: white; font-size: .82rem; }
.portal-feature small { color: #98b3c9; font-size: .68rem; }
.portal-security { margin-top: 11px; padding: 12px; border-radius: 9px; color: #a7c2d8; background: rgba(5,15,27,.3); font-size: .66rem; line-height: 1.55; }
.portal-app { padding-top: 42px; }
.portal-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; color: white; }
.portal-welcome h1 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.portal-welcome p:last-child { margin: 8px 0 0; color: #aac0d3; font-size: .82rem; }
.portal-identity-chip { display: flex; align-items: center; gap: 9px; min-width: 190px; padding: 8px; border: 1px solid rgba(170,207,236,.16); border-radius: 11px; background: rgba(4,17,31,.26); }
.portal-identity-chip strong { display: block; font-size: .74rem; }
.portal-identity-chip small { margin: 1px 0 0; color: #a7c1d4; font-size: .62rem; }
.portal-view { display: none; }
.portal-view.active { display: block; }
.portal-profile-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; }
.portal-panel { border: 1px solid #dae5ed; border-radius: 16px; padding: clamp(20px, 2.5vw, 31px); color: var(--ink); background: white; box-shadow: 0 12px 30px rgba(18,49,78,.07); }
.portal-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.portal-panel-heading p { margin-bottom: 0; }
.portal-panel-heading .muted { max-width: 680px; margin: 0; font-size: .76rem; }
.player-identity-row { display: flex; align-items: center; gap: 15px; margin: 23px 0 20px; }
.portal-avatar { width: 64px; height: 64px; font-size: 1.45rem; }
.player-identity-row h3 { font-size: 1.15rem; }
.player-identity-row p { margin: 4px 0 0; color: var(--muted); font-size: .74rem; }
.player-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.player-detail-list > div { min-width: 0; padding: 12px; border-radius: 10px; background: #f4f8fb; }
.player-detail-list span { display: block; margin-bottom: 5px; color: #70869b; font-size: .57rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.player-detail-list strong { display: block; overflow: hidden; color: #29445c; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-next-step { display: grid; gap: 4px; margin-top: 17px; padding: 12px 13px; border: 1px solid #d9e8f5; border-radius: 9px; color: #295c85; background: #edf7ff; }
.portal-next-step strong { font-size: .7rem; }
.portal-next-step span { color: #52728d; font-size: .68rem; line-height: 1.45; }
.portal-game-panel { position: relative; overflow: hidden; color: white; border-color: #163d60; background: linear-gradient(145deg, #0e385d, #091a2f); }
.portal-game-panel::after { position: absolute; width: 260px; height: 260px; right: -135px; bottom: -175px; border: 1px solid rgba(121,192,245,.24); border-radius: 50%; content: ""; }
.portal-game-panel .eyebrow { color: #88c8f7; }
.portal-game-panel h2 { max-width: 250px; margin-top: 11px; color: #d9edff; font-size: 1rem; }
.portal-game-panel h2 span { color: #75d7a9; }
.portal-game-count { display: block; margin-top: 27px; color: white; font-size: clamp(3.1rem, 5vw, 5.4rem); line-height: .8; letter-spacing: -.08em; }
.portal-game-panel p { max-width: 290px; margin: 13px 0 0; color: #a8c3d9; font-size: .69rem; line-height: 1.55; }
.portal-game-wave { display: flex; height: 27px; align-items: end; gap: 4px; margin-top: 18px; }
.portal-game-wave i { width: 4px; border-radius: 99px; background: #5cb1e9; }
.portal-game-wave i:nth-child(1) { height: 9px; }.portal-game-wave i:nth-child(2) { height: 19px; }.portal-game-wave i:nth-child(3) { height: 12px; }.portal-game-wave i:nth-child(4) { height: 25px; }.portal-game-wave i:nth-child(5) { height: 15px; }
.portal-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 18px 0; }
.portal-stat-grid article { min-height: 130px; padding: 18px; border: 1px solid #dbe7ef; border-radius: 13px; background: white; box-shadow: 0 8px 20px rgba(20,48,76,.05); }
.portal-stat-grid span { display: block; color: #72879a; font-size: .57rem; font-weight: 950; letter-spacing: .09em; }
.portal-stat-grid strong { display: block; overflow: hidden; margin: 18px 0 6px; color: #183955; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-stat-grid small { color: #7d92a3; font-size: .64rem; line-height: 1.35; }
.portal-help-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.portal-help-panel > div { max-width: 710px; }.portal-help-panel p { margin-bottom: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.portal-case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 19px; }
.portal-case { padding: 18px; border: 1px solid #dce6ee; border-left: 4px solid #d99a2c; border-radius: 11px; background: #fbfdff; }
.portal-case.approved { border-left-color: #1ba476; }.portal-case.rejected { border-left-color: #d45461; }.portal-case.checking { border-left-color: #7291ac; }
.portal-case-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #71869a; font-size: .64rem; font-weight: 850; text-transform: uppercase; }
.portal-case h3 { margin: 15px 0 7px; font-size: .8rem; }.portal-case p { min-height: 39px; margin: 0; color: #405b71; font-size: .73rem; line-height: 1.5; white-space: pre-wrap; }
.portal-case-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #e3ebf1; }.portal-case-footer small { max-width: 230px; margin: 0; color: #7a8fa1; font-size: .61rem; line-height: 1.4; }.button.compact { min-height: 33px; padding: 6px 9px; font-size: .66rem; }.portal-case-meta { color: #668096; font-size: .63rem; font-weight: 800; text-align: right; }
.portal-empty { grid-column: 1 / -1; padding: 45px 20px; border: 1px dashed #cddce7; border-radius: 12px; color: #5f788e; text-align: center; }.portal-empty > span { display: grid; width: 36px; height: 36px; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: #098560; background: #ddf7eb; font-weight: 900; }.portal-empty h3 { color: #28445d; font-size: .9rem; }.portal-empty p { margin: 5px 0 0; font-size: .72rem; }
.portal-two-column { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); gap: 18px; }.portal-application-status { margin-top: 18px; }.portal-status-card { padding: 15px; border-radius: 11px; }.portal-status-card strong { display: block; font-size: .84rem; }.portal-status-card p { margin: 6px 0 9px; font-size: .73rem; line-height: 1.5; }.portal-status-card small { font-size: .62rem; }.portal-status-card.checking { color: #896000; background: #fff4dc; }.portal-status-card.pending_review { color: #896000; background: #fff4dc; }.portal-status-card.approved { color: #087252; background: #dff8ed; }.portal-status-card.rejected { color: #a22f3d; background: #ffeaed; }
.portal-steps { display: grid; gap: 0; margin-top: 23px; }.portal-steps > div { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid #e3ebf1; color: #8193a2; }.portal-steps > div > span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #c9d9e5; border-radius: 50%; background: #f6f9fb; font-size: .67rem; font-weight: 900; }.portal-steps strong { display: block; color: #496276; font-size: .73rem; }.portal-steps small { color: #8395a4; font-size: .61rem; }.portal-steps > div.complete > span { color: white; border-color: #15966b; background: #15966b; }.portal-steps > div.complete strong { color: #158460; }.portal-steps > div.current > span { color: white; border-color: #2a83db; background: #2a83db; }.portal-steps > div.current strong { color: #2067a5; }.portal-steps > div.rejected > span { color: white; border-color: #d45461; background: #d45461; }.portal-steps > div.rejected strong { color: #b33b47; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.portal-check { grid-template-columns: 17px 1fr; align-items: start; gap: 9px; font-size: .72rem; line-height: 1.45; }.portal-check input { width: 16px; height: 16px; margin-top: 1px; padding: 0; }.portal-modal #portal-modal-content { padding: 22px 23px 24px; }

@media (max-width: 920px) {
  .portal-header { gap: 14px; }.portal-nav { justify-content: flex-start; }.portal-profile-grid, .portal-two-column { grid-template-columns: 1fr; }.portal-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.portal-landing { grid-template-columns: 1fr; gap: 35px; }.portal-landing-card { max-width: 560px; }.portal-landing { min-height: auto; padding-top: 68px; }
}
@media (max-width: 640px) {
  .portal-header { min-height: 65px; padding: 8px 14px; }.portal-brand strong, .portal-brand small { display: none; }.portal-brand .brand-mark { width: 34px; height: 34px; }.portal-nav { overflow-x: auto; }.portal-nav button { flex: 0 0 auto; padding: 8px 7px; font-size: .64rem; }.portal-game-chip { display: none; }.portal-user-menu > span:last-child { display: none; }.portal-main { padding-inline: 14px; }.portal-landing { padding: 45px 0 60px; }.portal-landing h1 { font-size: clamp(2.5rem, 13vw, 4rem); }.portal-app { padding-top: 26px; }.portal-welcome { align-items: flex-start; flex-direction: column; margin-bottom: 15px; }.portal-identity-chip { min-width: 0; }.portal-panel { padding: 18px; }.player-detail-list { grid-template-columns: 1fr; }.portal-stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.portal-stat-grid article { min-height: 112px; padding: 14px; }.portal-stat-grid strong { margin-top: 14px; font-size: .9rem; }.portal-help-panel { align-items: flex-start; flex-direction: column; }.portal-case-list { grid-template-columns: 1fr; }.portal-case-footer { align-items: flex-start; flex-direction: column; }.portal-case-meta { text-align: left; }.form-grid { grid-template-columns: 1fr; }
}

/* Staff desks added in FMS v3. */
.command-icon.red { color: #a63d48; background: #ffe8eb; }
.live-ops-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.live-ops-hero p { max-width: 690px; margin-bottom: 0; }
.live-ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 17px 0; }
.live-count-panel { min-height: 150px; }.live-count-panel > strong { display: block; margin: 18px 0 7px; color: #173a58; font-size: clamp(1.6rem, 3.3vw, 2.7rem); letter-spacing: -.055em; }.live-count-panel > span { color: #71879b; font-size: .68rem; }.moderation-list-panel { margin-top: 17px; }
@media (max-width: 780px) { .live-ops-hero { align-items: flex-start; flex-direction: column; }.live-ops-grid { grid-template-columns: 1fr; } }

/* v5 — obsidian command theme */
:root { --canvas: #05070b; --card: #0d1219; --ink: #eff6ff; --text: #d7e4f3; --muted: #91a4b8; --line: #202b37; --blue-500: #58b1f4; --blue-400: #86caff; --green-soft: rgba(29,177,119,.16); --amber-soft: rgba(231,165,55,.14); --red-soft: rgba(229,93,108,.14); --purple-soft: rgba(138,105,220,.15); --shadow: 0 18px 54px rgba(0,0,0,.31); }
html, body, .app-body { color: var(--ink); background: #05070b; }
.app-body { background: radial-gradient(circle at 82% 8%, rgba(38,104,163,.13), transparent 24%), #05070b; }
.workspace { background: radial-gradient(circle at 62% -8%, rgba(57,135,210,.08), transparent 30%), transparent; }
.topbar { border-color: #1d2834; }.topbar h1, .panel h2, .panel h3, .staff-profile, .staff-card-info strong, .live-count-panel > strong { color: #edf6ff; }
.top-search, .search-form { border-color: #273542; color: #8dbde2; background: #0a1017; }.top-search input, .search-form input { color: #e5f1fc; }.top-search input::placeholder, .search-form input::placeholder { color: #71869a; }.staff-profile:hover { background: #131d27; }
.connection-chip { color: #a2b8cc; background: #16212c; }.connection-chip.healthy { color: #74dfb4; background: rgba(31,164,106,.15); }.connection-chip.warning { color: #f1c36f; background: rgba(202,137,29,.14); }.connection-chip.danger { color: #ff9aa4; background: rgba(203,60,76,.14); }
.panel, .system-card { border-color: #202d39; background: linear-gradient(145deg, #0e151d, #0a1017); box-shadow: 0 12px 32px rgba(0,0,0,.17); }.system-card { box-shadow: none; }
.muted, .empty-copy, .form-help, small, .system-card p, .live-count-panel > span { color: #91a4b8; }.eyebrow.accent, .topbar .eyebrow { color: #67bbf6; } label { color: #c3d2e1; }
input, select, textarea { border-color: #2a3846; color: #eaf4fc; background: #070c12; } input::placeholder, textarea::placeholder { color: #72869a; } input:focus, select:focus, textarea:focus { border-color: #58b1f4; background: #0a1119; box-shadow: 0 0 0 3px rgba(88,177,244,.16); } input:disabled { color: #8296a9; background: #101821; }
.button.ghost { color: #9ed6ff; background: #13283b; }.button.ghost:hover { background: #19344b; }.text-button { color: #86caff; }.icon-button { color: #a7bed2; }.icon-button:hover { color: #ff9aa4; background: rgba(213,70,85,.14); }
.filter-bar { background: #0a1118; }.table-wrap { border-color: #253340; background: #0a1016; } table { color: #dceaf8; } th { color: #8ca6bd; background: #0c141d; } td { border-color: #202d38; } tbody tr:hover { background: rgba(99,175,236,.055); }
.status-pill.approved, .status-pill.online, .status-pill.ready { color: #78e5ba; background: rgba(30,159,104,.16); }.status-pill.pending_review, .status-pill.needs_setup, .status-pill.submitted { color: #f1c974; background: rgba(205,143,32,.15); }.status-pill.rejected, .status-pill.failed, .status-pill.offline { color: #ff9aa5; background: rgba(205,61,76,.15); }.status-pill.checking, .status-pill.disabled { color: #afc0d1; background: #1a2732; }
.dossier, .dossier-section, .verification-identity, .no-verification, .role-check, .check-row, .note-card, .staff-card { color: #dceaf8; }.dossier-section { border-color: #202d38; }.role-check, .check-row, .staff-card { border-color: #293845; background: #0a1118; }.role-check strong, .check-row strong, .note-card p { color: #dbeaf8; }.note-card { background: #0b121a; }.check-row em { color: #89e6bc; background: rgba(36,165,108,.15); }.check-row em.optional { color: #a9bbcd; background: #18232e; }
.mapping-row, .member-result-row, .activity-item { border-color: #1f2a35; }.member-result-row { color: #dceafa; background: #0b1219; }.member-result-row:hover { background: #121d28; }.reason-box.reject { color: #ffadb5; background: rgba(198,58,74,.15); }.reason-box.override { color: #f2ca77; background: rgba(198,139,32,.14); }.command-modal { color: #e7f2fc; border: 1px solid #293946; background: #0c131b; }.modal-header { border-color: #243340; background: #0e1720; }
.force-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }.force-summary > div { padding: 10px; border: 1px solid #263642; border-radius: 10px; background: #091018; }.force-summary small { margin: 0 0 4px; color: #8ca5bc; font-size: .59rem; text-transform: uppercase; }.force-summary strong { display: block; color: #e9f6ff; font-size: .77rem; }.force-profile-section .compact-form + .compact-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #22303c; }.force-access-copy { padding: 11px; border: 1px dashed #334554; border-radius: 10px; background: #091018; }.staff-discord-link { color: #82badf !important; }
@media (max-width: 700px) { .force-summary { grid-template-columns: 1fr; } }

/* v6 — Uxbridge crest, Discord staff access and critical-controls finish. */
.brand-crest { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(149,204,242,.26); border-radius: 12px; background: radial-gradient(circle at 43% 30%, rgba(89,172,229,.22), transparent 64%), #0a1520; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.22); }.brand-crest img { width: 41px; height: 41px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.4)); }.brand-crest.compact { width: 40px; height: 40px; border-radius: 10px; }.brand-crest.compact img { width: 36px; height: 36px; }.login-crest { margin-bottom: 22px; }
.portal-link, .portal-command-link { color: inherit; text-decoration: none; }.portal-link { display: flex; }.metric-green { border-color: rgba(51,190,125,.26) !important; background: linear-gradient(145deg, #0d1b1a, #0a1117) !important; }.metric-green strong { color: #8ce9b9 !important; }
.staff-sso-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: #7990a3; font-size: .6rem; font-weight: 900; text-transform: uppercase; }.staff-sso-divider::before, .staff-sso-divider::after { height: 1px; flex: 1; background: #23313d; content: ""; }.discord-sso { border-color: #5369aa !important; color: #eff4ff !important; background: linear-gradient(135deg, #5865f2, #4351d8) !important; }.discord-sso:hover { background: linear-gradient(135deg, #6874f6, #4b58df) !important; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }.staff-directory-panel { margin-top: 17px; }.staff-directory-result { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 13px; border: 1px solid #293845; border-radius: 10px; padding: 11px; background: #0a1118; }.staff-directory-result strong { display: block; overflow: hidden; color: #e3f0fa; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }.staff-directory-result small { display: block; overflow: hidden; margin-top: 3px; color: #8ba1b4; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }.staff-directory-result em { display: inline-block; margin-top: 7px; border-radius: 5px; padding: 3px 5px; color: #98cfef; background: #112638; font-size: .54rem; font-style: normal; font-weight: 850; }.critical-control-panel { margin-top: 17px; border-color: rgba(204,76,88,.34) !important; }.critical-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 17px; }.critical-card { display: grid; align-content: start; gap: 11px; border: 1px solid #34434e; border-radius: 11px; padding: 16px; background: #0a1118; }.critical-card h3 { margin: 0; color: #edf5fb; font-size: .83rem; }.critical-card p { min-height: 47px; margin: 0; color: #98aebe; font-size: .65rem; line-height: 1.5; }.critical-card label { display: grid; gap: 6px; color: #becddb; font-size: .62rem; font-weight: 850; }.critical-card code { border-radius: 4px; padding: 2px 4px; color: #ffc0c6; background: rgba(185,56,71,.2); }.critical-card-danger { border-color: rgba(207,73,87,.46); background: linear-gradient(145deg, #1b1015, #0c1117); }.danger-copy { color: #ff9da8 !important; }.danger-button { min-height: 37px; border: 1px solid #b64451; border-radius: 8px; color: #ffeef0; background: #702932; font-size: .64rem; font-weight: 900; }.danger-button:hover { background: #8b3440; }
@media (max-width:780px) { .brand-crest.compact { width: 34px; height: 34px; }.brand-crest.compact img { width: 30px; height: 30px; }.staff-directory-result { grid-template-columns: 37px minmax(0,1fr); }.staff-directory-result > .button { grid-column: 1 / -1; width: 100%; }.critical-grid { grid-template-columns: 1fr; }.critical-card p { min-height: auto; } }
.data-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.data-stat-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #293845; border-radius: 9px; padding: 11px; background: #0a1118; }
.data-stat-card span { color: #9ab0c2; font-size: .66rem; }.data-stat-card strong { color: #e4f1fb; font-size: .9rem; }
.role-mapping-row { display: grid; gap: 5px; border-bottom: 1px solid #253440; padding: 10px 0; }.role-mapping-row:first-child { padding-top: 0; }.role-mapping-row strong { color: #e4f1fb; font-size: .74rem; }.role-mapping-row small { color: #90a7ba; font-size: .62rem; }
.data-archive { margin-top: 10px; border: 1px solid #293845; border-radius: 10px; padding: 12px; background: #0a1118; }.data-archive summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; cursor: pointer; color: #e4f1fb; font-size: .72rem; }.data-archive summary span { color: #99afc1; font-size: .64rem; }.data-archive-body { padding-top: 12px; }.data-archive-body > p { color: #9ab0c2; font-size: .64rem; }.data-archive-body .table-wrap { margin-top: 10px; }.data-archive-body table { min-width: 650px; }
@media (max-width: 900px) { .data-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }