:root {
  color-scheme: dark;
  --navy: #031634;
  --navy-2: #071f48;
  --panel: rgba(7, 31, 72, 0.92);
  --panel-2: rgba(3, 22, 52, 0.88);
  --line: rgba(93, 205, 255, 0.2);
  --cyan: #19c4f5;
  --blue: #1761e8;
  --text: #f5f9ff;
  --muted: #aebdd0;
  --danger: #ff5d72;
  --success: #42d6a4;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(25,196,245,.16), transparent 30rem),
    radial-gradient(circle at 88% 6%, rgba(23,97,232,.19), transparent 35rem),
    linear-gradient(145deg, #020d21 0%, #061a3b 48%, #020d21 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(rgba(93,205,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(93,205,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

a { color: inherit; }
.topbar { min-height: 82px; display: flex; align-items: center; gap: 22px; padding: 16px clamp(20px, 5vw, 70px); border-bottom: 1px solid var(--line); background: rgba(2,13,33,.82); backdrop-filter: blur(16px); position: relative; z-index: 2; }
.brand img { display: block; width: min(235px, 42vw); height: 48px; object-fit: contain; object-position: left center; }
.topbar-copy { display: grid; gap: 4px; padding-left: 20px; border-left: 1px solid var(--line); }
.topbar-copy strong { font-size: .95rem; }
.topbar-copy span, .muted { color: var(--muted); font-size: .86rem; }
.logout-form { margin-left: auto; display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: .88rem; }
.page { position: relative; z-index: 1; width: min(1220px, calc(100% - 34px)); margin: 0 auto; padding: clamp(34px, 7vh, 78px) 0 60px; }
.footer { position: relative; z-index: 1; padding: 24px; text-align: center; color: #7f91aa; border-top: 1px solid rgba(93,205,255,.1); font-size: .82rem; }
.auth-shell { min-height: calc(100vh - 245px); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.72fr); align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.32); background: var(--panel-2); }
.auth-visual { padding: clamp(38px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 18% 30%, rgba(25,196,245,.18), transparent 21rem), linear-gradient(140deg, rgba(3,22,52,.5), rgba(5,31,73,.86)); }
.auth-visual img { width: 92px; height: 92px; object-fit: contain; border-radius: 50%; background: white; padding: 6px; box-shadow: 0 0 50px rgba(25,196,245,.25); }
.auth-visual > span { color: var(--cyan); margin-top: 30px; text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 700; }
.auth-visual h1, .auth-panel h1, .card h1, .admin-heading h1, .workspace-heading h1 { margin: 12px 0 16px; line-height: 1.04; letter-spacing: -.035em; }
.auth-visual h1 { max-width: 720px; font-size: clamp(2.35rem, 5vw, 4.7rem); }
.auth-visual p { max-width: 620px; color: var(--muted); line-height: 1.7; font-size: 1.05rem; }
.security-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.security-list span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: #d8efff; font-size: .82rem; }
.auth-panel { padding: clamp(34px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; background: rgba(5,24,55,.92); }
.setup-panel { width: min(850px, 100%); margin: auto; }
.auth-panel h1 { font-size: clamp(2rem, 4vw, 3rem); }
.auth-panel > p, .card > p, .admin-heading p, .workspace-heading p, .section-heading p { color: var(--muted); line-height: 1.65; }
.eyebrow { display: inline-flex; width: fit-content; padding: 7px 11px; border-radius: 999px; background: rgba(25,196,245,.12); color: #9de7ff; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 800; }
.eyebrow.danger { color: #ffbac4; background: rgba(255,93,114,.12); }
form { margin-top: 22px; }
label { display: grid; gap: 8px; margin-bottom: 18px; color: #dce9f8; font-size: .9rem; font-weight: 700; }
input { width: 100%; min-height: 48px; border: 1px solid rgba(148,190,230,.23); border-radius: 12px; padding: 11px 13px; background: rgba(1,11,28,.72); color: white; font: inherit; outline: none; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(25,196,245,.12); }
.button { min-height: 44px; border: 1px solid transparent; border-radius: 12px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; cursor: pointer; }
.button.primary { color: #00152c; background: linear-gradient(135deg, #67ddff, var(--cyan)); box-shadow: 0 10px 30px rgba(25,196,245,.18); }
.button.secondary { color: #dceeff; border-color: var(--line); background: rgba(11,41,85,.62); }
.button.full { width: 100%; }
.alert { border-radius: 12px; padding: 13px 15px; margin: 18px 0; line-height: 1.5; }
.alert.danger { color: #ffd8dd; background: rgba(255,93,114,.12); border: 1px solid rgba(255,93,114,.28); }
.alert.success { color: #c7ffe9; background: rgba(66,214,164,.12); border: 1px solid rgba(66,214,164,.28); }
.secret-box { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(1,11,28,.55); display: grid; gap: 9px; overflow-wrap: anywhere; }
.secret-box span, .secret-box small { color: var(--muted); }
.secret-box strong { color: var(--cyan); letter-spacing: .12em; font-family: Consolas, monospace; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.card { border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 38px); background: var(--panel); box-shadow: 0 22px 60px rgba(0,0,0,.17); }
.card.narrow { width: min(680px, 100%); margin: 8vh auto; }
.admin-heading, .workspace-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.admin-heading h1, .workspace-heading h1 { font-size: clamp(2.35rem, 5vw, 4.25rem); }
.admin-heading p, .workspace-heading p { max-width: 760px; margin-bottom: 0; }
.status-pill { padding: 10px 14px; border-radius: 999px; color: #c7ffe9; border: 1px solid rgba(66,214,164,.3); background: rgba(66,214,164,.1); white-space: nowrap; }
.admin-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 22px; margin-bottom: 22px; }
.form-stack { max-width: 620px; }
.security-card dl { margin: 22px 0 0; display: grid; gap: 15px; }
.security-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid rgba(93,205,255,.1); }
.security-card dt { color: var(--muted); }
.security-card dd { margin: 0; color: #c7ffe9; font-weight: 800; }
.table-card { padding: 0; overflow: hidden; }
.section-heading { padding: 28px 30px 18px; margin: 0; }
.section-heading h2, .section-heading p { margin: 0 0 6px; }
.section-heading > span { color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 16px 20px; text-align: left; border-top: 1px solid rgba(93,205,255,.1); }
th { color: #9fb1c8; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
td strong, td small { display: block; }
td small { color: var(--muted); margin-top: 4px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 8px; box-shadow: 0 0 12px rgba(66,214,164,.5); }
.text-link { color: #8ee3ff; font-weight: 800; text-decoration: none; white-space: nowrap; }
.empty { color: var(--muted); text-align: center; padding: 34px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.metric { min-height: 144px; border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: rgba(7,31,72,.86); display: flex; flex-direction: column; justify-content: space-between; }
.metric span { color: var(--muted); }
.metric strong { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.metric.critical { border-color: rgba(255,93,114,.34); background: linear-gradient(145deg, rgba(101,20,40,.55), rgba(7,31,72,.9)); }
.metric.high { border-color: rgba(255,157,79,.34); background: linear-gradient(145deg, rgba(101,52,20,.48), rgba(7,31,72,.9)); }
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin-top: 26px; }
.workspace-card { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: rgba(2,15,37,.65); text-decoration: none; display: grid; gap: 8px; }
.workspace-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.workspace-card span { color: var(--muted); }

@media (max-width: 820px) {
  .topbar-copy { display: none; }
  .logout-form span { display: none; }
  .auth-shell, .admin-grid { grid-template-columns: 1fr; }
  .auth-visual { min-height: 360px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Approved VADMEX branding: login-only presentation, authentication unchanged. */
body:has(.auth-shell) { background: linear-gradient(90deg, rgba(3,18,32,.65), rgba(3,18,32,.4)), url('/assets/how-it-works-office-natural.png') center / cover no-repeat fixed; }
body:has(.auth-shell)::before { display: none; }
body:has(.auth-shell) .topbar { min-height: 90px; justify-content: center; border: 0; background: transparent; backdrop-filter: none; padding: 28px 24px 10px; }
body:has(.auth-shell) .brand img { content: url('/assets/vadmex-approved-reverse.svg'); width: 204px; height: 44px; object-position: center; }
body:has(.auth-shell) .topbar-copy, body:has(.auth-shell) .footer { display: none; }
body:has(.auth-shell) .page { width: min(480px, calc(100% - 40px)); padding: 26px 0 54px; }
.auth-shell { display: block; min-height: 0; border: 1px solid #315168; border-radius: 24px; background: #0b243a; box-shadow: 0 24px 70px #0005; }
.auth-shell .auth-visual { display: none; }
.auth-shell .auth-panel { padding: 40px; background: transparent; }
.auth-shell .eyebrow { padding: 0; background: none; color: #81d7f6; font-size: 12px; font-weight: 500; letter-spacing: .17em; }
.auth-shell .auth-panel h1 { font-size: 34px; font-weight: 500; letter-spacing: -.035em; margin: 16px 0 8px; }
.auth-shell .auth-panel > p { color: #bdcede; font-size: 15px; line-height: 1.65; margin: 8px 0; }
.auth-shell form { margin-top: 26px; }
.auth-shell label { font-size: 14px; font-weight: 500; margin-bottom: 21px; color: #edf6ff; }
.auth-shell input { min-height: 52px; border-radius: 10px; border-color: #496276; background: #071b2d; font-size: 16px; }
.auth-shell input:focus { outline: 2px solid #57cdf5; outline-offset: 2px; box-shadow: none; }
.auth-shell .button.primary { min-height: 52px; border-radius: 10px; background: #0876be; color: #fff; font-size: 15px; font-weight: 600; box-shadow: none; }
.auth-shell .button.primary:hover { background: #0969a7; }
.auth-shell .button:focus-visible { outline: 2px solid #9ae5ff; outline-offset: 4px; }
.auth-shell .auth-panel > .muted { font-size: 12px; color: #a9bdcf; border-top: 1px solid #29465b; margin-top: 28px; padding-top: 20px; }
@media (max-width: 560px) { .auth-shell .auth-panel { padding: 28px 24px; } body:has(.auth-shell) .page { padding-top: 18px; } .auth-shell .auth-panel h1 { font-size: 30px; } }

@media (max-width: 560px) {
  .topbar { padding: 13px 17px; }
  .brand img { width: 165px; height: 42px; }
  .page { width: min(100% - 22px, 1220px); padding-top: 20px; }
  .auth-shell { border-radius: 20px; }
  .auth-visual, .auth-panel { padding: 28px 22px; }
  .auth-visual h1 { font-size: 2.45rem; }
  .form-grid, .metric-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .admin-heading, .workspace-heading { display: grid; }
  .logout-form { gap: 6px; }
}