:root {
  color-scheme: light;
  --navy-950: #071a2c;
  --navy-900: #0b2e4f;
  --navy-800: #12466f;
  --navy-700: #185b89;
  --blue-600: #0875b7;
  --blue-500: #1592cf;
  --blue-100: #e9f6fc;
  --blue-50: #f4fbfe;
  --ink-950: #132234;
  --ink-800: #263b51;
  --ink-700: #435970;
  --ink-500: #6b7e91;
  --line-300: #cbd8e3;
  --line-200: #dce5ed;
  --line-100: #e9eff4;
  --surface: #ffffff;
  --surface-soft: #f6f9fb;
  --surface-muted: #eff4f7;
  --green-700: #087052;
  --green-100: #dcf5ea;
  --amber-700: #8f5b00;
  --amber-100: #fff2cf;
  --red-700: #b42332;
  --red-600: #c72e3d;
  --red-100: #fee8e9;
  --sun-500: #ffd400;
  --sun-400: #ffe76a;
  --orange-600: #d95a08;
  --orange-500: #f57c0a;
  --orange-100: #fff0d8;
  --shadow-xs: 0 1px 2px rgba(7, 26, 44, .04);
  --shadow-sm: 0 8px 24px rgba(7, 26, 44, .07);
  --shadow-lg: 0 28px 70px rgba(7, 26, 44, .14);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --topbar-height: 74px;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--surface-soft);
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--ink-950);
  background:
    linear-gradient(rgba(11, 46, 79, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 46, 79, .025) 1px, transparent 1px),
    var(--surface-soft);
  background-size: 32px 32px;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: var(--topbar-height) 0 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 212, 0, .1), transparent 24rem),
    radial-gradient(circle at 92% 88%, rgba(245, 124, 10, .08), transparent 28rem);
  animation: ambient-drift 14s ease-in-out infinite alternate;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }
[hidden] { display: none !important; }

::selection {
  color: #fff;
  background: var(--navy-800);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy-950);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid rgba(245, 124, 10, .42);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px clamp(18px, 4vw, 58px);
  color: #fff;
  background: rgba(7, 26, 44, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 26px rgba(4, 16, 28, .18);
  backdrop-filter: blur(18px);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--sun-500), var(--orange-500), var(--red-700), var(--orange-500), var(--sun-500));
  background-size: 220% 100%;
  animation: brand-flow 7s linear infinite;
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .24));
  transition: filter .25s ease, transform .25s ease;
}

.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand:hover .brand-mark { filter: drop-shadow(0 9px 14px rgba(245, 124, 10, .32)); transform: rotate(-4deg) scale(1.06); }

.brand-copy,
.brand-copy strong,
.brand-copy small { min-width: 0; display: block; }

.brand-copy strong {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy small {
  margin-top: 1px;
  color: #acc6d9;
  font-size: .76rem;
  letter-spacing: .02em;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-name {
  max-width: 280px;
  overflow: hidden;
  color: #dceaf4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 650;
}

.account-name::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  content: "";
  background: #54d5a6;
  box-shadow: 0 0 0 4px rgba(84, 213, 166, .12);
}

.auth-layout {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  min-height: min(720px, calc(100vh - var(--topbar-height) - 48px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
  overflow: hidden;
  border: 1px solid rgba(203, 216, 227, .82);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(245, 124, 10, .04);
}

.auth-intro {
  --pointer-x: 50%;
  --pointer-y: 35%;
  position: relative;
  min-height: 100%;
  padding: clamp(44px, 6vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 212, 0, .19), transparent 18rem),
    radial-gradient(circle at 92% 9%, rgba(245, 124, 10, .25), transparent 24rem),
    linear-gradient(145deg, #071a2c 0%, #0b2e4f 58%, #12466f 100%);
  transition: background .25s ease;
}

.auth-intro::before,
.auth-intro::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.auth-intro::before {
  top: -170px;
  right: -160px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(255, 212, 0, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 255, 255, .025), 0 0 0 96px rgba(255, 255, 255, .018);
  animation: orbit-breathe 9s ease-in-out infinite alternate;
}

.auth-intro::after {
  right: 36px;
  bottom: 42px;
  width: 90px;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sun-500), var(--orange-500));
  box-shadow: 30px 13px 0 rgba(255, 255, 255, .12);
  transform: rotate(-38deg);
  animation: accent-float 6s ease-in-out infinite;
}

.auth-intro-content,
.auth-support { position: relative; z-index: 1; }

.auth-logo-lockup {
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-logo-lockup img {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
  animation: logo-float 5.5s ease-in-out infinite;
}

.auth-logo-lockup strong,
.auth-logo-lockup small { display: block; }
.auth-logo-lockup strong { max-width: 300px; color: #fff; font-size: .94rem; line-height: 1.3; }
.auth-logo-lockup small { margin-top: 3px; color: #9fbace; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-600);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 22px;
  height: 2px;
  content: "";
  background: currentColor;
}

.eyebrow-light { color: var(--sun-400); }

.auth-intro h1 {
  max-width: 580px;
  margin: 16px 0 19px;
  color: #fff;
  font-size: clamp(2.5rem, 4.2vw, 4.45rem);
  line-height: 1.02;
  letter-spacing: -.052em;
}

.auth-intro-content > p {
  max-width: 580px;
  margin: 0;
  color: #c4d7e5;
  font-size: 1.03rem;
  line-height: 1.72;
}

.application-path {
  max-width: 550px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.path-item {
  min-height: 82px;
  padding: 15px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(10px);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}

.path-item:hover { border-color: rgba(255, 212, 0, .32); background: rgba(255, 255, 255, .09); transform: translateY(-3px); }

.path-item > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--navy-950);
  background: linear-gradient(145deg, var(--sun-400), var(--orange-500));
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .05em;
}

.path-item strong,
.path-item small { display: block; }

.path-item strong { color: #fff; font-size: .9rem; }
.path-item small { margin-top: 3px; color: #a9c2d4; font-size: .76rem; line-height: 1.35; }

.trust-list {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.trust-list span {
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  color: #dcebf4;
  background: rgba(255, 255, 255, .05);
  font-size: .75rem;
  font-weight: 650;
}

.trust-list span::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--sun-500);
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .1);
}

.auth-support {
  max-width: 500px;
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #9eb8cb;
  font-size: .78rem;
}

.auth-card {
  padding: clamp(32px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(140deg, rgba(255, 212, 0, .035), transparent 32%),
    var(--surface);
}

.auth-card-header {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.auth-card-header p { margin: 0; color: var(--ink-500); font-size: .78rem; }

.secure-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green-700);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.secure-label > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14a678;
  box-shadow: 0 0 0 4px var(--green-100);
  animation: secure-pulse 2.4s ease-out infinite;
}

.segmented {
  margin-bottom: 30px;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  border: 1px solid var(--line-200);
  border-radius: 13px;
  background: var(--surface-muted);
}

.segment {
  min-height: 48px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  color: var(--ink-700);
  background: transparent;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.2;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.segment span {
  display: block;
  color: var(--ink-500);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.segment:hover { color: var(--navy-900); }
.segment.active { color: var(--navy-950); background: #fff; box-shadow: 0 3px 11px rgba(7, 26, 44, .1); }
.segment.active span { color: var(--orange-600); }

.auth-form { display: grid; gap: 17px; animation: panel-in .24s ease both; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-heading { margin-bottom: 6px; }
.form-kicker { color: var(--orange-600); font-size: .75rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.form-heading h2 { margin: 5px 0 4px; color: var(--navy-950); font-size: 1.65rem; line-height: 1.2; letter-spacing: -.025em; }
.form-heading p { margin: 0; color: var(--ink-500); font-size: .875rem; }
.form-footnote { margin: -3px 0 0; color: var(--ink-500); text-align: center; font-size: .76rem; }

label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--ink-700);
  font-size: .875rem;
  font-weight: 720;
}

label small {
  color: var(--ink-500);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.42;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--ink-950);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(7, 26, 44, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input::placeholder,
textarea::placeholder { color: #99a9b8; }

textarea { min-height: 108px; resize: vertical; }
.tall-textarea { min-height: 170px; }

input:hover,
select:hover,
textarea:hover { border-color: #a9bbc9; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 4px rgba(245, 124, 10, .12);
}

input:disabled,
select:disabled {
  cursor: not-allowed;
  color: var(--ink-500);
  background: var(--surface-muted);
}

.password-field { position: relative; display: block; }
.password-field input { padding-right: 64px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  min-width: 48px;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: var(--navy-800);
  background: var(--surface-muted);
  font-size: .75rem;
  font-weight: 800;
  transform: translateY(-50%);
}

.check-row {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-weight: 500;
  line-height: 1.45;
}

.check-row input,
.table-check {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--blue-600);
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 46px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 780;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }

.button-primary {
  color: #fff;
  background: linear-gradient(125deg, var(--navy-950), var(--navy-800) 64%, #245d76);
  background-size: 160% 100%;
  box-shadow: 0 8px 18px rgba(11, 46, 79, .17);
}

.button-primary:hover { background-position: 100% 0; box-shadow: 0 12px 26px rgba(11, 46, 79, .25), 0 0 0 1px rgba(245, 124, 10, .28); }
.button-secondary { color: var(--navy-900); border-color: var(--line-300); background: #fff; box-shadow: var(--shadow-xs); }
.button-secondary:hover { border-color: #9db1c2; background: var(--blue-50); }
.button-danger { color: var(--red-700); border-color: #efb8bd; background: #fffafa; }
.button-danger:hover { color: #fff; border-color: var(--red-700); background: var(--red-700); }
.button-ghost { color: #e6f0f6; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.button-ghost:hover { background: rgba(255, 255, 255, .12); }
.button-small { min-height: 36px; padding: 7px 11px; font-size: .78rem; }
.button-full { width: 100%; margin-top: 3px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.button-ripple {
  position: absolute;
  z-index: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 212, 0, .42);
  transform: translate(-50%, -50%) scale(0);
  animation: button-ripple .62s ease-out forwards;
}

.portal {
  min-height: calc(100vh - var(--topbar-height));
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 212, 0, .08), transparent 13rem),
    linear-gradient(180deg, #09253f 0%, #071a2c 100%);
  border-right: 1px solid rgba(255, 255, 255, .05);
}

.sidebar-heading {
  margin: 0 4px 26px;
  padding: 0 8px 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.sidebar-symbol {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .22));
  animation: logo-float 5.5s ease-in-out infinite;
}

.sidebar-symbol img { width: 100%; height: 100%; display: block; object-fit: contain; }

.sidebar-heading strong,
.sidebar-heading small { display: block; }
.sidebar-heading strong { font-size: .9rem; }
.sidebar-heading small { margin-top: 2px; color: #91aec3; font-size: .75rem; }

.sidebar-label {
  margin: 0 12px 10px;
  color: #7596ae;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sidebar nav { display: grid; gap: 5px; }

.nav-item {
  position: relative;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #b7cbd9;
  background: transparent;
  text-align: left;
  font-size: .875rem;
  font-weight: 680;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-item.active { color: #fff; border-color: rgba(255, 212, 0, .15); background: linear-gradient(90deg, rgba(245, 124, 10, .18), rgba(255, 255, 255, .06)); box-shadow: inset 3px 0 0 var(--sun-500); }

.sidebar-footer {
  margin-top: auto;
  padding: 15px 12px 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #91aec3;
  font-size: .75rem;
}

.connection-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54d5a6;
  box-shadow: 0 0 0 4px rgba(84, 213, 166, .1);
  animation: secure-pulse 2.4s ease-out infinite;
}

.portal-content {
  width: min(1440px, 100%);
  min-width: 0;
  padding: clamp(26px, 3.6vw, 52px);
  perspective: 1200px;
}

.portal.client-mode {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 212, 0, .12), transparent 23rem),
    radial-gradient(circle at 94% 28%, rgba(245, 124, 10, .11), transparent 30rem),
    linear-gradient(180deg, #f8fbfd 0%, #f3f7fa 52%, #f8fafb 100%);
}

.portal.client-mode::before {
  position: absolute;
  z-index: -1;
  top: 110px;
  right: -360px;
  width: 720px;
  height: 720px;
  border: 1px solid rgba(245, 124, 10, .11);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 62px rgba(255, 212, 0, .025),
    0 0 0 124px rgba(245, 124, 10, .022),
    0 0 0 186px rgba(11, 46, 79, .018);
  animation: client-sun-orbit 13s ease-in-out infinite alternate;
}

.portal.client-mode::after {
  position: absolute;
  z-index: -1;
  bottom: 80px;
  left: -70px;
  width: 310px;
  height: 310px;
  content: "";
  opacity: .34;
  background-image: radial-gradient(circle, rgba(11, 46, 79, .2) 1.2px, transparent 1.4px);
  background-size: 17px 17px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 74%);
  mask-image: linear-gradient(135deg, #000, transparent 74%);
}

.portal.client-mode .portal-content {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  margin: auto;
}

.client-hero {
  position: relative;
  min-height: 238px;
  margin-bottom: 20px;
  padding: clamp(27px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 74% 20%, rgba(255, 212, 0, .18), transparent 18rem),
    linear-gradient(125deg, #071a2c 0%, #0b2e4f 58%, #174f70 100%);
  box-shadow: 0 24px 55px rgba(7, 26, 44, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.client-hero::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -38%;
  width: 28%;
  pointer-events: none;
  content: "";
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent);
  transform: skewX(-14deg);
  animation: hero-sheen 8s ease-in-out infinite;
}

.client-hero::after {
  position: absolute;
  right: -86px;
  bottom: -190px;
  width: 390px;
  height: 390px;
  pointer-events: none;
  border: 1px solid rgba(255, 212, 0, .16);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 38px rgba(255, 212, 0, .028), 0 0 0 76px rgba(245, 124, 10, .025);
}

.client-hero-copy,
.client-stage-card { position: relative; z-index: 2; }

.client-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sun-400);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.client-hero-kicker > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sun-500);
  box-shadow: 0 0 0 5px rgba(255, 212, 0, .1);
}

.client-hero h1 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.client-hero-copy > p {
  max-width: 610px;
  margin: 0;
  color: #c7d8e4;
  font-size: .96rem;
}

.client-identity-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.client-identity-row > span {
  min-width: 160px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
}

.client-identity-row small,
.client-identity-row strong { display: block; }
.client-identity-row small { color: #86a9bf; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.client-identity-row strong { max-width: 260px; overflow: hidden; color: #fff; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }

.client-hero-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.client-hero-actions .button {
  border-color: rgba(255, 212, 0, .24);
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.client-hero-actions .button:hover {
  color: #fff;
  border-color: rgba(255, 212, 0, .52);
  background: rgba(255, 212, 0, .1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.client-stage-card {
  min-height: 156px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 35px rgba(0, 0, 0, .12);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.client-stage-card:hover {
  border-color: rgba(255, 212, 0, .28);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 44px rgba(0, 0, 0, .17);
  transform: translateY(-3px);
}

.progress-orbit {
  position: relative;
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  text-align: center;
  background: conic-gradient(var(--sun-500) calc(var(--progress) * 25%), rgba(255, 255, 255, .11) 0);
  animation: progress-arrive .85s cubic-bezier(.2, .8, .2, 1) both;
}

.progress-orbit::before {
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  content: "";
  background: #0c304e;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .22);
}

.progress-orbit strong,
.progress-orbit small { position: relative; z-index: 1; display: block; }
.progress-orbit strong { color: #fff; font-size: 1.55rem; line-height: 1; letter-spacing: -.04em; }
.progress-orbit strong span { color: #88a9bf; font-size: .82rem; }
.progress-orbit small { margin-top: 5px; color: #9db7c8; font-size: .75rem; }

.client-stage-copy { min-width: 0; }
.client-stage-copy > small,
.client-stage-copy > strong { display: block; }
.client-stage-copy > small { color: #90acbf; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.client-stage-copy > strong { margin: 4px 0 10px; color: #fff; font-size: 1rem; line-height: 1.3; }

.client-hero-watermark {
  position: absolute;
  z-index: 1;
  top: -58px;
  right: 240px;
  width: 230px;
  height: 230px;
  object-fit: contain;
  pointer-events: none;
  opacity: .055;
  filter: grayscale(1);
  animation: watermark-breathe 8s ease-in-out infinite alternate;
}

.client-quick-nav {
  position: sticky;
  z-index: 12;
  top: calc(var(--topbar-height) + 10px);
  margin: 0 0 20px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid rgba(203, 216, 227, .85);
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 32px rgba(7, 26, 44, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px) saturate(1.2);
}

.client-quick-nav button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink-700);
  background: transparent;
  font-size: .8rem;
  font-weight: 760;
  text-align: left;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.client-quick-nav button::after {
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  content: "";
  background: rgba(255, 212, 0, .12);
  transform: scale(0);
  transition: transform .28s ease;
}

.client-quick-nav button > span {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--navy-950);
  background: linear-gradient(145deg, var(--sun-400), var(--orange-500));
  box-shadow: 0 5px 12px rgba(217, 90, 8, .12);
  font-size: .67rem;
  font-weight: 900;
  transition: transform .22s ease;
}

.client-quick-nav button:hover,
.client-quick-nav button:focus-visible {
  color: var(--navy-950);
  border-color: #ecd3aa;
  background: #fffaf1;
  box-shadow: 0 8px 18px rgba(7, 26, 44, .06);
  transform: translateY(-1px);
}

.client-quick-nav button:hover::after,
.client-quick-nav button:focus-visible::after { transform: scale(1); }
.client-quick-nav button:hover > span { transform: rotate(-5deg) scale(1.06); }

.journey-panel {
  position: relative;
  scroll-margin-top: calc(var(--topbar-height) + 88px);
  margin-bottom: 20px;
  padding: clamp(20px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(203, 216, 227, .88);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 212, 0, .09), transparent 15rem),
    rgba(255, 255, 255, .96);
  box-shadow: 0 14px 36px rgba(7, 26, 44, .08), inset 0 1px 0 #fff;
}

.journey-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, var(--sun-500), var(--orange-500), var(--red-700));
}

.journey-panel-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.journey-panel-heading h2 { margin: 0; color: var(--navy-950); font-size: 1.35rem; letter-spacing: -.025em; }
.journey-panel-heading p { margin: 4px 0 0; color: var(--ink-500); font-size: .88rem; }

.journey-percent {
  min-width: 96px;
  padding: 10px 14px;
  border: 1px solid #efd6ae;
  border-radius: 13px;
  background: linear-gradient(145deg, #fffaf0, #fff4df);
  text-align: right;
  box-shadow: inset 0 1px 0 #fff;
}

.journey-percent strong,
.journey-percent span { display: block; }
.journey-percent strong { color: var(--navy-950); font-size: 1.25rem; line-height: 1; letter-spacing: -.035em; }
.journey-percent span { margin-top: 3px; color: var(--orange-600); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.journey-panel .stepper { margin-bottom: 0; }

.client-current-task,
.client-support-grid,
.client-guide { scroll-margin-top: calc(var(--topbar-height) + 88px); }

.client-current-task {
  position: relative;
  margin-bottom: 18px;
}

.client-current-task > .notice {
  box-shadow: 0 10px 24px rgba(180, 35, 50, .08);
}

.client-support-grid { margin-top: 18px; }
.client-support-grid .card { position: relative; overflow: hidden; }
.client-support-grid .card::after {
  position: absolute;
  right: -38px;
  bottom: -42px;
  width: 105px;
  height: 105px;
  border: 18px solid rgba(11, 46, 79, .025);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  transition: transform .35s ease, border-color .35s ease;
}

.client-support-grid .card:hover::after {
  border-color: rgba(245, 124, 10, .07);
  transform: translate(-7px, -7px) scale(1.08);
}

.client-section-heading {
  margin-bottom: 23px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.client-section-heading p { margin: 4px 0 0; color: var(--ink-500); }
.section-number {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--navy-950);
  background: linear-gradient(145deg, var(--sun-400), var(--orange-500));
  box-shadow: 0 8px 18px rgba(217, 90, 8, .14);
  font-size: .78rem;
  font-weight: 900;
}

.client-action-card {
  position: relative;
  overflow: hidden;
  padding: clamp(23px, 3vw, 32px);
  border-color: #e5d6bd;
  background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(255, 249, 239, .9));
}

.client-action-card::after {
  position: absolute;
  top: -95px;
  right: -95px;
  width: 180px;
  height: 180px;
  border: 24px solid rgba(255, 212, 0, .045);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.client-action-card > * { position: relative; z-index: 1; }
.client-action-shell { position: relative; }
.client-action-shell::before { position: absolute; z-index: -1; inset: 14px -10px -10px 18px; border-radius: 18px; content: ""; background: rgba(245, 124, 10, .055); filter: blur(1px); }

.support-card { min-height: 100%; }
.support-card-heading { display: flex; align-items: center; gap: 12px; }
.support-card-heading small,
.support-card-heading h3 { display: block; }
.support-card-heading small { color: var(--orange-600); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.support-card-heading h3 { margin: 2px 0 0; }
.support-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; color: var(--navy-950); background: var(--orange-100); font-size: .75rem; font-weight: 900; }
.security-support .support-icon { color: var(--green-700); background: var(--green-100); }

.client-guide > .page-heading {
  margin-top: 4px;
  padding: 20px 22px;
  border: 1px solid #e5d6bd;
  border-radius: 15px;
  background: linear-gradient(90deg, #fffaf0, rgba(255, 255, 255, .92));
  box-shadow: var(--shadow-xs);
}

@media (min-width: 681px) {
  .client-journey::before {
    position: absolute;
    z-index: -1;
    top: 37px;
    right: 7%;
    left: 7%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--green-700), var(--sun-500), var(--orange-500));
    opacity: .22;
  }

  .client-journey .step { z-index: 1; }
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.page-heading h1,
.page-heading h2 {
  margin: 0 0 5px;
  color: var(--navy-950);
  line-height: 1.16;
  letter-spacing: -.03em;
}

.page-heading h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.page-heading h2 { font-size: 1.45rem; }
.page-heading p { max-width: 720px; margin: 0; color: var(--ink-500); }

.card-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--orange-600);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card {
  padding: 23px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-sm);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.portal-content > .card:hover,
.portal-content > .grid > .card:hover { border-color: #e8c68d; box-shadow: 0 16px 34px rgba(7, 26, 44, .1); transform: translateY(-2px); }

.surface-enter {
  opacity: 0;
  transform: translateY(14px) rotateX(1.5deg);
  animation: surface-enter .52s cubic-bezier(.2, .75, .2, 1) forwards;
  animation-delay: calc(var(--entrance-index, 0) * 55ms);
}

.card h2,
.card h3 { margin: 0 0 6px; color: var(--navy-950); line-height: 1.25; letter-spacing: -.015em; }
.card h2 { font-size: 1.3rem; }
.card h3 { font-size: 1.05rem; }
.card > p { color: var(--ink-500); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.span-2 { grid-column: span 2; }

.stepper {
  position: relative;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.step {
  position: relative;
  min-height: 76px;
  padding: 14px 14px 14px 50px;
  border: 1px solid var(--line-200);
  border-radius: 13px;
  color: var(--ink-500);
  background: rgba(255, 255, 255, .78);
}

.step::before {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-300);
  border-radius: 8px;
  content: "";
  background: var(--surface-muted);
}

.step strong,
.step span { display: block; }
.step strong { margin-bottom: 3px; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.step span { color: var(--ink-700); font-size: .84rem; font-weight: 700; }
.step.active { border-color: #f1c27b; background: #fffaf0; box-shadow: inset 0 3px 0 var(--orange-500); }
.step.active::before { border-color: var(--orange-500); background: var(--orange-100); box-shadow: inset 0 0 0 5px var(--orange-500); animation: active-step 2.2s ease-in-out infinite; }
.step.done { border-color: #b5dfcf; background: #f3fbf8; }
.step.done::before { content: "✓"; color: #fff; border-color: var(--green-700); background: var(--green-700); font-size: .77rem; font-weight: 900; }
.step.done span,
.step.done strong { color: var(--green-700); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .035em;
  white-space: nowrap;
}

.status::before { width: 6px; height: 6px; border-radius: 50%; content: ""; background: currentColor; }
.status-pending,
.status-submitted { color: var(--amber-700); background: var(--amber-100); }
.status-pending::before,
.status-submitted::before { animation: status-pulse 1.8s ease-out infinite; }
.status-verified,
.status-approved,
.status-active,
.status-sent { color: var(--green-700); background: var(--green-100); }
.status-queued,
.status-sending { color: var(--blue-600); background: var(--blue-100); }
.status-rejected,
.status-disabled,
.status-cancelled,
.status-failed { color: var(--red-700); background: var(--red-100); }
.status-neutral,
.status-not-started { color: var(--ink-700); background: var(--surface-muted); }

.notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #c9e7f5;
  border-left: 4px solid var(--blue-500);
  border-radius: 10px;
  color: var(--navy-800);
  background: var(--blue-100);
}

.notice.warning { border-color: #efd897; border-left-color: #d89000; color: #704700; background: var(--amber-100); }
.notice.danger { border-color: #efbec2; border-left-color: var(--red-700); color: #8f1c27; background: var(--red-100); }
.notice p { margin: 0; }

.payment-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 20px;
}

.qr-card { text-align: center; }

.qr-card img {
  width: min(278px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 12px auto 15px;
  padding: 14px;
  border: 1px solid var(--line-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 6px var(--surface-soft);
}

.payment-qr-panel { position: relative; overflow: hidden; }
.payment-qr-panel::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; content: ""; background: linear-gradient(90deg, var(--sun-500), var(--orange-500), var(--red-700), var(--sun-500)); background-size: 200% 100%; animation: brand-flow 6s linear infinite; }
.amount { margin: 8px 0; color: var(--navy-950); font-size: 2.1rem; font-weight: 850; letter-spacing: -.04em; background: linear-gradient(90deg, var(--navy-950), var(--orange-600)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.payment-account {
  margin-top: 14px;
  padding: 14px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-200);
  border-radius: 10px;
  color: var(--ink-700);
  background: var(--surface-soft);
  font-size: .86rem;
}

.payment-account strong { color: var(--navy-950); }
.payment-guide { padding: clamp(23px, 3vw, 32px); }
.instructions { color: var(--ink-700); white-space: pre-line; }
.payment-details-panel { margin-top: 22px; }

.section-divider {
  margin: 8px 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-500);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.section-divider::before,
.section-divider::after { height: 1px; flex: 1; content: ""; background: var(--line-200); }

.data-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.data-pair { min-width: 0; padding: 14px; border: 1px solid var(--line-100); border-radius: 10px; background: var(--surface-soft); }
.data-pair small,
.data-pair strong { display: block; }
.data-pair small { color: var(--ink-500); font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.data-pair strong { margin-top: 4px; color: var(--ink-950); word-break: break-word; }

.schedule-workspace { padding: clamp(22px, 3vw, 32px); }
.choice-heading { margin: 26px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.choice-heading:first-child { margin-top: 0; }
.choice-heading strong { color: var(--navy-950); }
.choice-heading span { color: var(--ink-500); font-size: .8rem; }

.region-card-grid,
.location-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.region-card,
.location-card {
  min-height: 86px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-200);
  border-radius: 13px;
  color: var(--ink-700);
  background: #fff;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.region-card:hover,
.location-card:hover { border-color: #e7ad53; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(217, 90, 8, .1); }
.region-card.selected,
.location-card.selected { border-color: var(--orange-500); background: #fffaf0; box-shadow: 0 0 0 3px rgba(245, 124, 10, .12); }

.region-card strong,
.region-card small,
.location-card strong,
.location-card small { display: block; }
.region-card strong,
.location-card strong { color: var(--navy-950); font-size: .9rem; }
.region-card small,
.location-card small { margin-top: 3px; color: var(--ink-500); font-size: .75rem; }

.region-icon,
.location-pin {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--navy-950);
  background: linear-gradient(145deg, var(--sun-400), var(--orange-500));
  font-size: .82rem;
  font-weight: 900;
}

.location-pin { font-size: 1.15rem; }

.schedule-list { display: grid; gap: 11px; }
.schedule-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line-200);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.schedule-option:hover { border-color: #e7ad53; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.schedule-option.selected { border-color: var(--orange-500); background: #fffaf0; box-shadow: 0 0 0 3px rgba(245, 124, 10, .11); }
.schedule-option input { width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--orange-600); }
.schedule-option h3 { margin: 1px 0; font-size: 1rem; }
.schedule-option p { margin: 3px 0 0; color: var(--ink-500); font-size: .82rem; }
.schedule-date small { color: var(--ink-500); font-size: .75rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.slot-count { padding: 6px 9px; border-radius: 999px; color: var(--green-700); background: var(--green-100); font-size: .75rem; font-weight: 850; white-space: nowrap; }

.success-panel { overflow: hidden; padding: 0; }
.success-top { padding: 28px; color: #fff; background: linear-gradient(135deg, #087052, #0b8765); }
.success-top.pending-top { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
.success-top h2 { margin: 4px 0 7px; color: #fff; font-size: 1.55rem; }
.success-top p { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .82); }
.success-top .card-kicker { color: #bff2df; }
.pending-top .card-kicker { color: #9edcf5; }
.success-body { padding: 25px; }

.stat {
  position: relative;
  min-height: 132px;
  overflow: hidden;
}

.stat::after {
  position: absolute;
  top: 21px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  content: "";
  background: var(--blue-500);
  box-shadow: 0 0 0 6px var(--blue-100);
}

.stat small { display: block; padding-right: 28px; color: var(--ink-500); font-size: .78rem; font-weight: 750; }
.stat strong { display: block; margin-top: 18px; color: var(--navy-950); font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1; letter-spacing: -.045em; }
.stat p { margin: 11px 0 0; font-size: .8rem; }
.stat.accent { color: var(--navy-950); border-color: transparent; background: linear-gradient(140deg, var(--sun-400), var(--orange-500)); box-shadow: 0 16px 34px rgba(217, 90, 8, .18); }
.stat.accent::after { background: var(--navy-950); box-shadow: 0 0 0 6px rgba(11, 46, 79, .12); }
.stat.accent small,
.stat.accent strong { color: var(--navy-950); }
.danger-stat::after { background: var(--red-700); box-shadow: 0 0 0 6px var(--red-100); }

.scanner-card {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(360px, 1fr);
  gap: 24px;
  border-top: 4px solid var(--navy-900);
}

.scanner-copy p { color: var(--ink-500); }
.scanner-controls { display: grid; gap: 13px; }
.scanner-video { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; background: #06111d; }
.manual-checkin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.scan-result { grid-column: 1 / -1; }
.scan-result.accepted { color: var(--green-700); border: 1px solid #b5dfcf; background: #f1fbf7; }
.scan-result.rejected { color: var(--red-700); border: 1px solid #efbec2; background: #fff5f6; }

.table-card { overflow: hidden; padding: 0; }
.table-header { min-height: 72px; padding: 18px 21px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-200); background: #fff; }
.table-header h2 { margin: 0; font-size: 1.17rem; }
.table-header p { margin: 3px 0 0; color: var(--ink-500); font-size: .82rem; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
th,
td { padding: 14px 15px; border-bottom: 1px solid var(--line-100); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; color: var(--ink-500); background: #f7f9fb; font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { color: var(--ink-700); }
td strong { color: var(--ink-950); }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: #f9fcfd; }
tr:last-child td { border-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.empty { padding: 38px 20px; color: var(--ink-500); text-align: center; }
.empty.compact { padding: 20px 14px; }

.admin-toolbar { flex-wrap: wrap; }
.search-bar { width: min(450px, 100%); display: flex; gap: 8px; }
.search-bar input { min-height: 40px; }
.compact-select { width: min(210px, 100%); min-height: 40px; }
.filter-card { margin-bottom: 18px; padding: 18px; }
.filter-grid { display: grid; grid-template-columns: .8fr 1fr 1.3fr auto; align-items: end; gap: 12px; }

.modal {
  width: min(680px, calc(100% - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(3, 15, 27, .38);
}

.modal[open] { animation: modal-in .28s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal::backdrop { background: rgba(3, 15, 27, .68); backdrop-filter: blur(4px); }
.modal-header { position: sticky; z-index: 3; top: 0; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line-200); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); }
.modal-header h2 { margin: 0; color: var(--navy-950); font-size: 1.25rem; letter-spacing: -.02em; }
#modal-content { padding: 23px; }
.icon-button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line-200); border-radius: 9px; color: var(--ink-700); background: var(--surface-soft); font-size: 1.45rem; line-height: 1; }
.icon-button:hover { color: #fff; border-color: var(--navy-900); background: var(--navy-900); }

.toast-region {
  position: fixed;
  z-index: 100;
  top: calc(var(--topbar-height) + 16px);
  right: 18px;
  width: min(390px, calc(100% - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  position: relative;
  padding: 15px 17px 15px 44px;
  overflow: hidden;
  border: 1px solid #acdcca;
  border-radius: 12px;
  color: #075c43;
  background: #f1fbf7;
  box-shadow: 0 18px 45px rgba(7, 26, 44, .18);
  font-size: .875rem;
  font-weight: 650;
  animation: toast-in .24s ease both;
}

.toast::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--sun-500), var(--orange-500));
  transform-origin: left;
  animation: toast-timer 5.2s linear forwards;
}

.toast::before { position: absolute; top: 14px; left: 16px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; content: "✓"; color: #fff; background: var(--green-700); font-size: .75rem; }
.toast.error { color: #8f1c27; border-color: #efbec2; background: #fff5f6; }
.toast.error::before { content: "!"; background: var(--red-700); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.loading { min-height: 340px; display: grid; place-items: center; color: var(--ink-500); text-align: center; }
.spinner { width: 34px; height: 34px; margin: auto; border: 3px solid var(--line-200); border-top-color: var(--orange-500); border-right-color: var(--sun-500); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes ambient-drift {
  from { opacity: .75; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(0, -12px, 0) scale(1.03); }
}

@keyframes brand-flow { to { background-position: -220% 0; } }

@keyframes orbit-breathe {
  from { transform: scale(.94) rotate(-5deg); }
  to { transform: scale(1.06) rotate(4deg); }
}

@keyframes accent-float {
  0%, 100% { transform: rotate(-38deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-38deg) translate3d(-9px, -8px, 0); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(-1.5deg); }
}

@keyframes secure-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(84, 213, 166, .11); }
  50% { box-shadow: 0 0 0 7px rgba(84, 213, 166, 0); }
}

@keyframes surface-enter {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes button-ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(16); } }

@keyframes active-step {
  0%, 100% { box-shadow: inset 0 0 0 5px var(--orange-500), 0 0 0 0 rgba(245, 124, 10, .18); }
  50% { box-shadow: inset 0 0 0 5px var(--orange-500), 0 0 0 7px rgba(245, 124, 10, 0); }
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 91, 0, .22); }
  50% { box-shadow: 0 0 0 5px rgba(143, 91, 0, 0); }
}

@keyframes toast-timer { to { transform: scaleX(0); } }

@keyframes client-sun-orbit {
  from { transform: translate3d(0, 0, 0) scale(.96); }
  to { transform: translate3d(-34px, 28px, 0) scale(1.04); }
}

@keyframes hero-sheen {
  0%, 28% { left: -38%; opacity: 0; }
  42% { opacity: 1; }
  58%, 100% { left: 118%; opacity: 0; }
}

@keyframes progress-arrive {
  from { opacity: 0; transform: rotate(-20deg) scale(.86); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes watermark-breathe {
  from { opacity: .04; transform: rotate(-4deg) scale(.94); }
  to { opacity: .08; transform: rotate(3deg) scale(1.06); }
}

.faq-list { margin-top: 18px; display: grid; gap: 9px; }
.faq-item { overflow: hidden; border: 1px solid var(--line-200); border-radius: 11px; background: #fff; }
.faq-item summary { padding: 14px 42px 14px 15px; cursor: pointer; color: var(--navy-950); font-size: .875rem; font-weight: 750; }
.faq-item p { margin: 0; padding: 0 15px 15px; color: var(--ink-500); font-size: .86rem; }
.guide-card ul,
.check-list { margin: 14px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.guide-card li,
.check-list li { position: relative; padding-left: 27px; color: var(--ink-700); }
.guide-card li::before,
.check-list li::before { position: absolute; top: 1px; left: 0; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; content: "✓"; color: #fff; background: var(--green-700); font-size: .75rem; font-weight: 900; }
.dont-card li::before { content: "×"; background: var(--red-700); }
.do-card { border-top: 4px solid var(--green-700); }
.dont-card { border-top: 4px solid var(--red-700); }
.client-guide { margin-top: 24px; }
.verification-prep > p { margin-top: 0; color: var(--ink-700); }
.delete-summary { margin: 14px 0 18px; display: grid; gap: 6px; }
.delete-summary span { padding: 8px 10px; border: 1px solid var(--line-200); border-radius: 8px; color: var(--ink-700); background: var(--surface-soft); font-size: .82rem; }
.error-text { display: block; max-width: 280px; color: var(--red-700); line-height: 1.4; }

@media (max-width: 1120px) {
  .auth-layout { width: min(1020px, calc(100% - 32px)); grid-template-columns: minmax(0, 1fr) minmax(370px, .9fr); }
  .auth-intro { padding: 46px; }
  .application-path { grid-template-columns: 1fr; max-width: 460px; }
  .path-item { min-height: 70px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --topbar-height: 68px; }
  .auth-layout { min-height: auto; grid-template-columns: 1fr; }
  .auth-intro { min-height: 510px; }
  .auth-intro h1 { max-width: 680px; }
  .application-path { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .auth-card { min-height: 600px; padding: 44px clamp(28px, 8vw, 90px); }
  .portal { grid-template-columns: 1fr; }
  .sidebar {
    z-index: 18;
    top: var(--topbar-height);
    width: 100%;
    height: auto;
    padding: 9px 12px;
    display: block;
    overflow-x: auto;
    background: #09253f;
  }
  .sidebar-heading,
  .sidebar-label,
  .sidebar-footer { display: none; }
  .sidebar nav { width: max-content; display: flex; gap: 5px; }
  .nav-item { width: auto; min-height: 42px; padding: 8px 12px; }
  .nav-item.active { box-shadow: inset 0 -3px 0 var(--sun-500); }
  .portal-content { padding-top: 28px; }
  .client-quick-nav { top: calc(var(--topbar-height) + 8px); }
  .payment-layout,
  .scanner-card { grid-template-columns: 1fr; }
  .qr-card img { width: min(250px, 100%); }
  .region-card-grid,
  .location-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .topbar { padding-inline: 14px; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-copy small { display: none; }
  .account-name { display: none; }
  .auth-layout { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .auth-intro { min-height: auto; padding: 42px 22px 36px; }
  .auth-logo-lockup { margin-bottom: 28px; }
  .auth-logo-lockup img { width: 58px; height: 58px; flex-basis: 58px; }
  .auth-intro h1 { font-size: clamp(2.25rem, 11vw, 3.2rem); }
  .auth-intro-content > p { font-size: .95rem; }
  .application-path { grid-template-columns: 1fr; margin-top: 28px; }
  .application-path .path-item:nth-child(n+3) { display: none; }
  .trust-list { margin-top: 15px; }
  .auth-support { display: none; }
  .auth-card { min-height: 560px; padding: 34px 20px 44px; }
  .auth-card-header { align-items: flex-start; }
  .auth-card-header p { display: none; }
  .segmented { margin-bottom: 26px; }
  .portal-content { padding: 24px 14px 44px; }
  .client-hero { min-height: auto; padding: 25px 20px; grid-template-columns: 1fr; gap: 22px; border-radius: 18px; }
  .client-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .client-identity-row { display: grid; grid-template-columns: 1fr; }
  .client-identity-row > span { min-width: 0; }
  .client-stage-card { min-height: 132px; padding: 16px; }
  .progress-orbit { width: 92px; height: 92px; flex-basis: 92px; }
  .client-hero-watermark { top: 40px; right: -54px; width: 210px; height: 210px; }
  .client-quick-nav {
    margin-right: -14px;
    margin-left: -14px;
    padding: 7px 14px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    scrollbar-width: none;
  }
  .client-quick-nav::-webkit-scrollbar { display: none; }
  .client-quick-nav button { min-width: 158px; justify-content: flex-start; }
  .journey-panel { padding: 20px 17px; border-radius: 16px; }
  .journey-panel-heading { align-items: flex-start; }
  .journey-percent { min-width: 86px; padding: 9px 11px; }
  .journey-panel .stepper { gap: 8px; }
  .client-action-card { padding: 22px; }
  .client-action-shell::before { display: none; }
  .client-section-heading { gap: 12px; }
  .section-number { width: 42px; height: 42px; flex-basis: 42px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading .button { width: 100%; }
  .grid-2,
  .grid-3,
  .form-grid,
  .data-pairs { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-card-grid,
  .location-card-grid { grid-template-columns: 1fr; }
  .choice-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .schedule-option { grid-template-columns: 26px minmax(0, 1fr); }
  .slot-count { grid-column: 2; width: fit-content; }
  .manual-checkin,
  .filter-grid { grid-template-columns: 1fr; }
  .card { padding: 19px; border-radius: 14px; }
  .success-panel,
  .table-card { padding: 0; }
  .table-header { align-items: stretch; flex-direction: column; }
  .admin-toolbar { align-items: stretch; }
  .search-bar { width: 100%; }
  .compact-select { width: 100%; }
  .toast-region { top: calc(var(--topbar-height) + 10px); right: 12px; width: calc(100% - 24px); }
}

/* Separated client/admin access experience */
body[data-entry]:not([data-portal-role]) {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 184, 31, .12), transparent 24rem),
    radial-gradient(circle at 90% 85%, rgba(42, 104, 190, .16), transparent 30rem),
    #07152b;
}

body[data-entry]:not([data-portal-role])::before {
  z-index: 0;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: none;
  -webkit-mask-image: linear-gradient(120deg,#000 0%,transparent 72%);
  mask-image: linear-gradient(120deg,#000 0%,transparent 72%);
}

body[data-entry]:not([data-portal-role]) .topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-height: 86px;
  padding: 16px clamp(22px,4vw,58px);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-entry]:not([data-portal-role]) .topbar::after { display:none; }
body[data-entry]:not([data-portal-role]) .brand-mark { width:50px;height:50px;flex-basis:50px;filter:drop-shadow(0 0 18px rgba(255,188,35,.35)); }
body[data-entry]:not([data-portal-role]) .brand-copy strong { font-size:.96rem; }
body[data-entry]:not([data-portal-role]) .brand-copy small { color:#9eb1ce;font-size:.71rem; }

body[data-entry]:not([data-portal-role]) main {
  position:relative;
  z-index:1;
  min-height:100vh;
  padding:106px 24px 28px;
  display:grid;
  place-items:center;
}

body[data-entry]:not([data-portal-role]) .auth-layout {
  width:min(1160px,100%);
  min-height:650px;
  margin:0;
  grid-template-columns:minmax(0,1.1fr) minmax(390px,.78fr);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:#fff;
  box-shadow:0 36px 90px rgba(0,0,0,.34),0 0 0 8px rgba(255,255,255,.025);
  animation:auth-shell-in .55s cubic-bezier(.2,.8,.2,1) both;
}

body[data-entry]:not([data-portal-role]) .auth-intro {
  padding:clamp(44px,5.2vw,70px);
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(255,192,49,.17),transparent 17rem),
    radial-gradient(circle at 92% 5%,rgba(255,144,0,.15),transparent 22rem),
    linear-gradient(145deg,#08162d 0%,#0d2850 62%,#164c79 100%);
}

body[data-entry]:not([data-portal-role]) .auth-intro::before {
  top:auto;
  right:-110px;
  bottom:-145px;
  width:360px;
  height:360px;
  border-color:rgba(255,192,49,.18);
  box-shadow:0 0 0 46px rgba(255,255,255,.025),0 0 0 92px rgba(255,255,255,.018);
}
body[data-entry]:not([data-portal-role]) .auth-intro::after { right:42px;bottom:45px;width:80px;height:5px;opacity:.8; }
body[data-entry]:not([data-portal-role]) .auth-logo-lockup { margin-bottom:38px; }
body[data-entry]:not([data-portal-role]) .auth-logo-lockup img { width:72px;height:72px;flex-basis:72px; }
body[data-entry]:not([data-portal-role]) .auth-logo-lockup strong { font-size:1rem; }
body[data-entry]:not([data-portal-role]) .auth-logo-lockup small { color:#9db4d0;font-size:.7rem; }
body[data-entry]:not([data-portal-role]) .auth-intro h1 { max-width:590px;margin:17px 0 18px;font-size:clamp(2.55rem,4vw,4rem);line-height:1.03; }
body[data-entry]:not([data-portal-role]) .auth-intro-content>p { max-width:540px;color:#bdcee2;font-size:1rem;line-height:1.65; }
body[data-entry]:not([data-portal-role]) .path-item { min-height:78px;border-radius:13px;background:rgba(255,255,255,.045); }
body[data-entry]:not([data-portal-role]) .path-item:hover { border-color:rgba(255,190,43,.34);background:rgba(255,255,255,.08); }
body[data-entry]:not([data-portal-role]) .path-item>span { border-radius:9px;background:linear-gradient(145deg,#ffe470,#ff9f08); }

body[data-entry]:not([data-portal-role]) .auth-card {
  position:relative;
  padding:clamp(36px,4.2vw,58px);
  background:
    radial-gradient(circle at 100% 0,rgba(255,188,34,.08),transparent 15rem),
    linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}
body[data-entry]:not([data-portal-role]) .auth-card::before { position:absolute;top:0;right:0;left:0;height:4px;content:"";background:linear-gradient(90deg,#ffd332,#ff9e08,#c72e3d); }
body[data-entry]:not([data-portal-role]) .auth-card-header { margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid #e8edf3; }
body[data-entry]:not([data-portal-role]) .segmented { grid-template-columns:repeat(2,1fr);margin-bottom:32px;padding:4px;border-color:#dfe6ef;border-radius:12px;background:#f2f5f9; }
body[data-entry]:not([data-portal-role]) .segment { min-height:46px;border-radius:9px; }
body[data-entry]:not([data-portal-role]) .segment.active { color:#fff;background:linear-gradient(135deg,#102544,#173f69);box-shadow:0 8px 18px rgba(9,31,57,.18); }
body[data-entry]:not([data-portal-role]) .segment.active span { color:#ffd661; }
body[data-entry="client"] .auth-switcher { margin:24px 0 0; }
body[data-entry]:not([data-portal-role]) .form-heading { margin-bottom:10px; }
body[data-entry]:not([data-portal-role]) .form-heading h2 { margin-top:6px;font-size:1.85rem; }
body[data-entry]:not([data-portal-role]) .form-heading p { font-size:.9rem; }
body[data-entry]:not([data-portal-role]) .auth-form { gap:18px; }
body[data-entry]:not([data-portal-role]) .auth-form label { color:#2f4057;font-size:.85rem; }
body[data-entry]:not([data-portal-role]) .auth-form input {
  min-height:52px;
  padding:13px 14px;
  border-color:#d4deea;
  border-radius:11px;
  background:#fff;
  box-shadow:0 1px 2px rgba(10,28,49,.025);
}
body[data-entry]:not([data-portal-role]) .auth-form input:hover { border-color:#aabbd0; }
body[data-entry]:not([data-portal-role]) .auth-form input:focus { border-color:#eea814;box-shadow:0 0 0 4px rgba(255,174,13,.13),0 8px 20px rgba(19,39,65,.06); }
body[data-entry]:not([data-portal-role]) .password-toggle { right:9px;color:#15385e;background:#eef3f8; }
body[data-entry]:not([data-portal-role]) .auth-form .button-primary { min-height:52px;margin-top:4px;border-radius:11px;background:linear-gradient(135deg,#0c203d,#174873);box-shadow:0 12px 24px rgba(11,39,69,.2); }
body[data-entry]:not([data-portal-role]) .auth-form .button-primary::after { position:absolute;inset:0;content:"";background:linear-gradient(110deg,transparent 30%,rgba(255,214,70,.18),transparent 70%);transform:translateX(-110%);transition:transform .55s ease; }
body[data-entry]:not([data-portal-role]) .auth-form .button-primary:hover { border-color:#ffbd31;box-shadow:0 16px 30px rgba(11,39,69,.26);transform:translateY(-2px); }
body[data-entry]:not([data-portal-role]) .auth-form .button-primary:hover::after { transform:translateX(110%); }
.back-to-client { color:#526b85;text-align:center;text-decoration:none;font-size:.8rem;font-weight:700; }
.back-to-client:hover { color:#c56708;text-decoration:underline; }

body[data-entry="client"] #admin-login-form { display:none!important; }
body[data-entry="admin"] .segmented,
body[data-entry="admin"] #client-login-form,
body[data-entry="admin"] #register-form { display:none!important; }
body[data-entry="admin"] #admin-login-form[hidden] { display:grid!important; }
body[data-entry="admin"] .application-path { display:none; }
body[data-entry="admin"] .trust-list { margin-top:32px; }
body[data-entry="admin"] .trust-list span:nth-child(1)::after { content:"Role-based access";font-size:.75rem; }
body[data-entry="admin"] .trust-list span:nth-child(1) { font-size:0; }
body[data-entry="admin"] .trust-list span:nth-child(2)::after { content:"Protected records";font-size:.75rem; }
body[data-entry="admin"] .trust-list span:nth-child(2) { font-size:0; }
body[data-entry="admin"] .trust-list span:nth-child(3)::after { content:"Audited activity";font-size:.75rem; }
body[data-entry="admin"] .trust-list span:nth-child(3) { font-size:0; }
body[data-entry="admin"] .auth-intro { background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(255,192,49,.12),transparent 18rem),linear-gradient(145deg,#071326 0%,#10233f 66%,#17314f 100%); }
body[data-entry="admin"] .auth-card::after { position:absolute;right:32px;bottom:24px;width:54px;height:54px;border:1px solid rgba(20,59,98,.09);border-radius:50%;content:"";box-shadow:0 0 0 12px rgba(20,59,98,.025),0 0 0 24px rgba(20,59,98,.015); }

@keyframes auth-shell-in { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:none} }

@media(max-width:860px){
  body[data-entry]:not([data-portal-role]) main{padding:92px 16px 22px;}
  body[data-entry]:not([data-portal-role]) .auth-layout{width:min(570px,100%);min-height:0;grid-template-columns:1fr;border-radius:22px;}
  body[data-entry]:not([data-portal-role]) .auth-intro{min-height:auto;padding:34px 30px 32px;}
  body[data-entry]:not([data-portal-role]) .auth-logo-lockup{margin-bottom:25px;}
  body[data-entry]:not([data-portal-role]) .auth-intro h1{font-size:clamp(2rem,7vw,2.8rem);}
  body[data-entry]:not([data-portal-role]) .application-path,body[data-entry]:not([data-portal-role]) .auth-support{display:none;}
  body[data-entry]:not([data-portal-role]) .trust-list{margin-top:22px;}
  body[data-entry]:not([data-portal-role]) .auth-card{min-height:0;padding:34px 30px 40px;}
}

@media(max-width:520px){
  body[data-entry]:not([data-portal-role]) .topbar{min-height:76px;padding:12px 18px;}
  body[data-entry]:not([data-portal-role]) .brand-mark{width:44px;height:44px;flex-basis:44px;}
  body[data-entry]:not([data-portal-role]) main{padding:76px 0 0;display:block;}
  body[data-entry]:not([data-portal-role]) .auth-layout{width:100%;border:0;border-radius:0;box-shadow:none;}
  body[data-entry]:not([data-portal-role]) .auth-intro{padding:30px 22px 28px;}
  body[data-entry]:not([data-portal-role]) .auth-logo-lockup{display:none;}
  body[data-entry]:not([data-portal-role]) .auth-intro h1{font-size:2rem;}
  body[data-entry]:not([data-portal-role]) .auth-intro-content>p{font-size:.9rem;line-height:1.55;}
  body[data-entry]:not([data-portal-role]) .trust-list{display:none;}
  body[data-entry]:not([data-portal-role]) .auth-card{padding:30px 22px 42px;}
  body[data-entry]:not([data-portal-role]) .auth-card-header p{display:none;}
  body[data-entry]:not([data-portal-role]) .form-heading h2{font-size:1.6rem;}
}

/* Studio dashboard shell — gap-free production layout */
body[data-portal-role="admin"] {
  --workspace-rail: 264px;
  --workspace-topbar: 76px;
  overflow-x:hidden;
  background:#f3f6fa;
}

body[data-portal-role="admin"] .topbar {
  position:fixed;
  z-index:40;
  top:0;
  right:0;
  left:0;
  width:100%;
  min-height:var(--workspace-topbar);
  padding:10px 24px 10px calc(var(--workspace-rail) + 28px);
  background:#172238;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 3px 14px rgba(7,17,38,.13);
  backdrop-filter:none;
}

body[data-portal-role="admin"] .topbar .brand {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:var(--workspace-rail);
  height:auto;
  padding:10px 18px;
  background:#071126;
  border:0;
  border-right:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

body[data-portal-role="admin"] .brand-mark { width:44px;height:44px;flex-basis:44px; }
body[data-portal-role="admin"] .brand-copy strong { color:#fff;font-size:.9rem; }
body[data-portal-role="admin"] .brand-copy small { color:#8396b4;font-size:.67rem; }
body[data-portal-role="admin"] .account-actions { min-width:0; }
body[data-portal-role="admin"] .account-welcome { max-width:260px; }
body[data-portal-role="admin"] .account-name { max-width:260px;font-size:.79rem; }
body[data-portal-role="admin"] .account-welcome small { font-size:.66rem; }
body[data-portal-role="admin"] #logout-button { color:#eef4fc;background:rgba(255,255,255,.06); }

body[data-portal-role="admin"] .portal {
  min-height:100vh;
  padding-top:var(--workspace-topbar);
  display:block;
}

body[data-portal-role="admin"] .sidebar {
  position:fixed;
  z-index:30;
  top:var(--workspace-topbar);
  bottom:0;
  left:0;
  width:var(--workspace-rail);
  height:auto;
  padding:25px 12px 16px;
  background:linear-gradient(180deg,#071126 0%,#09162b 100%);
  border-right:1px solid rgba(255,255,255,.065);
  box-shadow:8px 0 28px rgba(10,24,45,.06);
}

body[data-portal-role="admin"] .sidebar-heading { display:none; }
body[data-portal-role="admin"] .sidebar-label { margin:0 11px 12px;color:#667b9b;font-size:.68rem;letter-spacing:.15em; }
body[data-portal-role="admin"] .sidebar nav { padding:0;gap:6px; }
body[data-portal-role="admin"] .nav-item {
  min-height:46px;
  padding:10px 13px;
  gap:12px;
  border-radius:11px;
  color:#aebbd0;
  font-size:.82rem;
  font-weight:680;
}
body[data-portal-role="admin"] .nav-item svg { width:18px;height:18px; }
body[data-portal-role="admin"] .nav-item:hover { color:#fff;background:rgba(255,255,255,.055);transform:none; }
body[data-portal-role="admin"] .nav-item.active {
  color:#162036;
  border-color:#ffc341;
  background:linear-gradient(135deg,#ffc52f 0%,#ff9d0a 100%);
  box-shadow:0 10px 22px rgba(255,158,8,.22),inset 0 1px 0 rgba(255,255,255,.45);
}
body[data-portal-role="admin"] .nav-item.active svg { stroke-width:2; }
body[data-portal-role="admin"] .sidebar-footer { margin:18px 2px 0;padding:18px 10px 2px;color:#7990af;font-size:.72rem; }

body[data-portal-role="admin"] .portal-content {
  width:auto;
  max-width:none;
  min-height:calc(100vh - var(--workspace-topbar));
  margin-left:var(--workspace-rail);
  padding:28px clamp(24px,3vw,44px) 64px;
  background:
    radial-gradient(circle at 94% 2%,rgba(41,112,203,.065),transparent 25rem),
    #f3f6fa;
}

.admin-hero {
  position:relative;
  min-height:205px;
  margin-bottom:20px;
  padding:34px 36px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  align-items:center;
  gap:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 82% 20%,rgba(255,181,22,.16),transparent 18rem),
    linear-gradient(120deg,#07162e 0%,#0c2449 60%,#183d70 100%);
  background-size:32px 32px,32px 32px,100% 100%,100% 100%;
  box-shadow:0 22px 45px rgba(13,31,56,.2);
}
.admin-hero::after { position:absolute;right:-110px;bottom:-190px;width:390px;height:390px;border:1px solid rgba(255,193,46,.14);border-radius:50%;content:"";box-shadow:0 0 0 52px rgba(255,193,46,.024),0 0 0 104px rgba(255,193,46,.018); }
.admin-hero-copy { position:relative;z-index:1; }
.admin-hero-kicker { color:#ffcc53;font-size:.72rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase; }
.admin-hero h1 { margin:8px 0 10px;color:#fff;font-size:clamp(2.15rem,4vw,3rem);line-height:1.05;letter-spacing:-.045em; }
.admin-hero h1 em { color:#ffae13;font-style:normal; }
.admin-hero p { max-width:700px;margin:0;color:#c4d2e5;font-size:.93rem; }
.admin-date-card { position:relative;z-index:2;padding:16px 17px;display:flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(10px); }
.admin-date-icon { width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;color:#a9ccff;background:rgba(47,118,213,.24);font-size:1.1rem; }
.admin-date-card small,.admin-date-card strong { display:block; }
.admin-date-card small { color:#94a9c7;font-size:.68rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase; }
.admin-date-card strong { margin-top:3px;color:#fff;font-size:.78rem;line-height:1.35; }

body[data-portal-role="admin"] .notice { margin:0 0 18px;border-radius:13px;box-shadow:none; }
body[data-portal-role="admin"] .dashboard-stats { gap:16px;margin-bottom:18px; }
body[data-portal-role="admin"] .dashboard-stats .stat {
  min-height:130px;
  padding:20px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:15px;
  border-radius:17px;
  background:#fff;
  box-shadow:0 8px 22px rgba(22,43,72,.055);
}
body[data-portal-role="admin"] .dashboard-stats .stat:hover { border-color:#cbd8e7;box-shadow:0 15px 30px rgba(22,43,72,.09);transform:translateY(-2px); }
body[data-portal-role="admin"] .stat-icon { width:46px;height:46px;display:grid;place-items:center;border-radius:13px;font-size:.85rem;font-weight:900; }
body[data-portal-role="admin"] .stat-clients .stat-icon { color:#166bd1;background:#e4f0ff; }
body[data-portal-role="admin"] .stat-pending .stat-icon { color:#ad6700;background:#fff1d2; }
body[data-portal-role="admin"] .stat-verified .stat-icon { color:#078157;background:#ddf7eb; }
body[data-portal-role="admin"] .stat-revenue .stat-icon { color:#7a45cc;background:#f0e7ff; }
body[data-portal-role="admin"] .dashboard-stats .stat small { color:#71839b;font-size:.75rem;font-weight:750; }
body[data-portal-role="admin"] .dashboard-stats .stat strong { margin:5px 0 0;color:#0d1c30;font-size:1.9rem;line-height:1;letter-spacing:-.04em; }
body[data-portal-role="admin"] .dashboard-stats .stat p { margin:9px 0 0;color:#93a1b4;font-size:.7rem; }
body[data-portal-role="admin"] .scanner-card { gap:28px;border-radius:19px;box-shadow:0 10px 26px rgba(22,43,72,.055); }
body[data-portal-role="admin"] .scanner-card:hover { border-color:#d1dce9;box-shadow:0 12px 28px rgba(22,43,72,.07); }
body[data-portal-role="admin"] .table-card { border-radius:19px;box-shadow:0 10px 26px rgba(22,43,72,.05); }
body[data-portal-role="admin"] table thead { background:#f5f8fc; }
body[data-portal-role="admin"] table th { color:#657890;font-size:.71rem;letter-spacing:.025em; }
body[data-portal-role="admin"] table tbody tr:hover { background:#f8fbff; }

@media(max-width:1060px){
  body[data-portal-role="admin"]{--workspace-rail:224px;}
  .admin-hero{grid-template-columns:1fr 240px;}
  body[data-portal-role="admin"] .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:820px){
  body[data-portal-role="admin"]{--workspace-rail:0px;}
  body[data-portal-role="admin"] .topbar{padding:10px 15px;}
  body[data-portal-role="admin"] .topbar .brand{position:static;width:auto;height:auto;padding:0;background:transparent;border:0;}
  body[data-portal-role="admin"] .brand-copy small{display:none;}
  body[data-portal-role="admin"] .sidebar{position:sticky;top:var(--workspace-topbar);width:100%;height:auto;padding:8px;display:flex;overflow-x:auto;}
  body[data-portal-role="admin"] .sidebar-label,body[data-portal-role="admin"] .sidebar-footer{display:none;}
  body[data-portal-role="admin"] .sidebar nav{display:flex;width:max-content;}
  body[data-portal-role="admin"] .nav-item{width:auto;min-width:130px;}
  body[data-portal-role="admin"] .portal-content{margin-left:0;padding:20px 16px 50px;}
  .admin-hero{grid-template-columns:1fr;padding:28px 25px;}
  .admin-date-card{width:min(280px,100%);}
}

@media(max-width:560px){
  body[data-portal-role="admin"] .notification-bell,body[data-portal-role="admin"] .account-welcome,body[data-portal-role="admin"] .account-avatar{display:none;}
  body[data-portal-role="admin"] .brand-copy strong{font-size:.82rem;}
  .admin-hero{min-height:0;padding:25px 20px;border-radius:17px;}
  .admin-hero h1{font-size:2rem;}
  .admin-hero p{font-size:.86rem;}
  body[data-portal-role="admin"] .dashboard-stats{grid-template-columns:1fr;}
}

@media (max-width: 430px) {
  .brand-copy strong { max-width: 176px; font-size: .9rem; }
  .button-ghost { padding-inline: 10px; }
  .button-ghost svg { display: none; }
  .segment { padding-inline: 4px; font-size: .75rem; }
  .dashboard-stats,
  .stepper { grid-template-columns: 1fr; }
  .client-stage-card { align-items: flex-start; }
  .client-stage-copy { padding-top: 4px; }
  .client-hero-actions .button { width: 100%; }
  .journey-panel-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .journey-percent { width: 100%; display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .step { min-height: 65px; }
  .grid-4 { grid-template-columns: 1fr; }
  .search-bar { display: grid; }
  .search-bar .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar,
  .sidebar,
  .button,
  .toast-region,
  .skip-link { display: none !important; }
  body { background: #fff; }
  .portal,
  .portal-content { display: block; width: 100%; padding: 0; }
  .card { border-color: #ccd6df; box-shadow: none; break-inside: avoid; }
}

/* PSI workspace dashboard — enterprise visual system */
:root {
  --workspace-rail: 282px;
  --workspace-topbar: 82px;
  --workspace-bg: #f4f7fb;
  --workspace-navy: #08172d;
  --workspace-navy-2: #0d2347;
  --workspace-top: #1f293a;
  --workspace-orange: #ffad0d;
  --workspace-orange-2: #ff9700;
  --workspace-line: #d9e2ee;
  --topbar-height: var(--workspace-topbar);
}

body[data-portal-role] { background: var(--workspace-bg); }

body[data-portal-role]::before {
  inset: var(--workspace-topbar) 0 0;
  background: radial-gradient(circle at 85% 8%, rgba(44, 104, 192, .08), transparent 28rem);
  animation: none;
}

body[data-portal-role] .topbar {
  position: fixed;
  right: 0;
  left: var(--workspace-rail);
  min-height: var(--workspace-topbar);
  padding: 10px 30px;
  color: #fff;
  background: rgba(31, 41, 58, .98);
  border-bottom: 1px solid #3b4960;
  box-shadow: none;
  backdrop-filter: blur(18px);
}

body[data-portal-role] .topbar::after { display: none; }

body[data-portal-role] .brand {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: var(--workspace-rail);
  height: var(--workspace-topbar);
  padding: 12px 14px;
  background: #0a1529;
  border-right: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

body[data-portal-role] .brand-mark { width: 43px; height: 43px; flex-basis: 43px; }
body[data-portal-role] .brand-copy strong { font-size: .91rem; }
body[data-portal-role] .brand-copy small { color: #87a0bf; font-size: .68rem; }

.account-actions { margin-left: auto; gap: 13px; }
.notification-bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  color: #dce7f5;
  background: rgba(255,255,255,.025);
}
.notification-bell svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-bell b { position: absolute; top: -5px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #e84747; font-size: .65rem; }
.account-welcome { display: grid; line-height: 1.2; text-align: right; }
.account-welcome small { color: #91a0b6; font-size: .68rem; }
.account-name { max-width: 220px; color: #fff; font-size: .82rem; }
.account-name::before { display: none; }
.account-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; color: #172133; background: linear-gradient(145deg,#ffd83d,#f4a700); box-shadow: 0 5px 18px rgba(0,0,0,.2); font-size: .85rem; font-weight: 850; }
body[data-portal-role] #logout-button { min-width: 38px; padding-inline: 10px; border-color: rgba(255,255,255,.1); }

body[data-portal-role] .portal { min-height: 100vh; padding-top: var(--workspace-topbar); grid-template-columns: var(--workspace-rail) minmax(0,1fr); }
body[data-portal-role="admin"] .sidebar {
  position: fixed;
  z-index: 20;
  top: var(--workspace-topbar);
  bottom: 0;
  left: 0;
  width: var(--workspace-rail);
  height: auto;
  padding: 20px 0 16px;
  background: #071126;
  border-right: 1px solid rgba(255,255,255,.06);
}
body[data-portal-role="admin"] .sidebar-heading { margin: 0 14px 20px; padding: 0 4px 18px; }
body[data-portal-role="admin"] .sidebar-label { margin: 0 15px 9px; color: #6f809d; font-size: .67rem; }
body[data-portal-role="admin"] .sidebar nav { gap: 5px; padding: 0 7px; }
body[data-portal-role="admin"] .nav-item { min-height: 43px; padding: 9px 12px; border-radius: 10px; color: #d0d9e8; font-size: .82rem; }
body[data-portal-role="admin"] .nav-item:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
body[data-portal-role="admin"] .nav-item.active { color: #10192a; border-color: #ffc53b; background: linear-gradient(135deg,var(--workspace-orange),var(--workspace-orange-2)); box-shadow: 0 9px 22px rgba(255,151,0,.25); }
body[data-portal-role="admin"] .sidebar-footer { margin-inline: 10px; }

body[data-portal-role="admin"] .portal-content { grid-column: 2; width: 100%; padding: 34px clamp(28px,3vw,48px) 60px; }
body[data-portal-role] .page-heading h1 { color: #111b2f; font-size: clamp(1.65rem,3vw,2.25rem); letter-spacing: -.035em; }

body[data-portal-role] .card,
body[data-portal-role] .journey-panel {
  border: 1px solid var(--workspace-line);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 9px 24px rgba(17,32,56,.055);
}
body[data-portal-role] .card { transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
body[data-portal-role] .card:hover { border-color: #cbd7e6; box-shadow: 0 18px 36px rgba(17,32,56,.095); transform: translateY(-3px); }
body[data-portal-role] .table-card:hover,
body[data-portal-role] .scanner-card:hover,
body[data-portal-role] .client-action-card:hover { transform: none; }

body[data-portal-role="client"] .portal { display: block; padding-left: var(--workspace-rail); overflow: visible; }
body[data-portal-role="client"] .portal-content { width: 100%; max-width: 1450px; padding: 0 32px 64px; }
body[data-portal-role="client"] .client-quick-nav {
  position: fixed;
  z-index: 19;
  top: var(--workspace-topbar);
  bottom: 0;
  left: 0;
  width: var(--workspace-rail);
  margin: 0;
  padding: 52px 8px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #071126;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-portal-role="client"] .client-quick-nav::before { content: "CLIENT MENU"; margin: 0 8px 9px; color: #6f809d; font-size: .67rem; font-weight: 850; letter-spacing: .13em; }
body[data-portal-role="client"] .client-quick-nav button { min-height: 45px; padding: 9px 12px; justify-content: flex-start; border-radius: 10px; color: #cfd9e8; font-size: .82rem; }
body[data-portal-role="client"] .client-quick-nav button > span { width: 27px; height: 27px; border-radius: 8px; color: #f4b319; background: rgba(255,255,255,.07); box-shadow: none; }
body[data-portal-role="client"] .client-quick-nav button:hover,
body[data-portal-role="client"] .client-quick-nav button:focus-visible { color: #10192a; border-color: #ffc53b; background: linear-gradient(135deg,var(--workspace-orange),var(--workspace-orange-2)); box-shadow: 0 9px 22px rgba(255,151,0,.22); transform: none; }
body[data-portal-role="client"] .client-quick-nav button:hover > span { color: #10192a; background: rgba(255,255,255,.38); transform: none; }

.client-hero {
  min-height: 220px;
  margin: 0 -1px 24px;
  padding: 34px 32px;
  grid-template-columns: minmax(0,1fr) 285px;
  border: 0;
  border-radius: 0 0 28px 28px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(120deg,#07162e 0%,#0c2348 58%,#153769 100%);
  background-size: 32px 32px,32px 32px,100% 100%;
  box-shadow: 0 22px 40px rgba(12,28,50,.2);
}
.client-hero::before { display: none; }
.client-hero::after { right: 34%; bottom: -130px; width: 310px; height: 310px; border-color: rgba(255,173,13,.12); box-shadow: 0 0 0 52px rgba(255,173,13,.025); }
.client-hero h1 { margin-top: 10px; font-size: clamp(2.15rem,4vw,3rem); }
.client-hero h1::first-line { color: #fff; }
.client-hero-kicker { color: #cbdaf0; letter-spacing: .035em; text-transform: none; }
.client-hero-kicker > span { background: #77aef7; box-shadow: 0 0 0 5px rgba(119,174,247,.1); }
.client-stage-card { min-height: 146px; border-radius: 18px; background: rgba(255,255,255,.07); }
.client-today { position: absolute; z-index: 3; right: 32px; bottom: 19px; width: 285px; padding: 10px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #fff; background: rgba(255,255,255,.055); }
.today-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #a9ccff; background: rgba(40,111,206,.24); font-size: 1.05rem; }
.client-today small,.client-today strong { display:block; }
.client-today small { color:#91a6c5; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.client-today strong { margin-top:2px; font-size:.71rem; }
.client-hero-watermark { right: 310px; opacity: .04; }

.journey-panel { padding: 28px 32px; }
.journey-panel::before { display:none; }
.journey-panel-heading h2 { color:#121c30; }
.journey-percent { border-color:#d6e0ec; background:#f6f9fd; }
.client-journey .step { border-radius:14px; }
.client-journey .step.active { border-color:#ffc652; background:#fffbf1; box-shadow: inset 0 -3px 0 var(--workspace-orange); }
.client-action-card { border-radius:20px; }
.section-number,.support-icon { color:#132039; background:linear-gradient(145deg,#fff1c8,#ffd36a); }
.button-primary { background: linear-gradient(135deg,#111f39,#173860); box-shadow:0 8px 18px rgba(15,34,63,.17); }
.button-primary:hover { border-color:#ffc14a; box-shadow:0 13px 26px rgba(15,34,63,.22),0 0 0 2px rgba(255,173,13,.12); }
.region-card:hover,.location-card:hover,.schedule-option:hover { border-color:#f3b83d; box-shadow:0 12px 25px rgba(17,32,56,.09); transform:translateY(-2px); }

@keyframes workspace-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
body[data-portal-role] .portal-content > * { animation: workspace-rise .42s cubic-bezier(.2,.8,.2,1) both; }
body[data-portal-role] .portal-content > :nth-child(2) { animation-delay:.05s; }
body[data-portal-role] .portal-content > :nth-child(3) { animation-delay:.1s; }

@media (max-width: 980px) {
  :root { --workspace-rail: 0px; }
  body[data-portal-role] .topbar { left:0; padding-inline:16px; }
  body[data-portal-role] .brand { position:static; width:auto; height:auto; padding:0; background:transparent; border:0; }
  body[data-portal-role="admin"] .portal { display:block; padding-top:var(--workspace-topbar); }
  body[data-portal-role="admin"] .sidebar { position:sticky; top:var(--workspace-topbar); width:100%; height:auto; padding:8px; flex-direction:row; overflow-x:auto; }
  body[data-portal-role="admin"] .sidebar nav { display:flex; width:max-content; }
  body[data-portal-role="admin"] .sidebar-heading,body[data-portal-role="admin"] .sidebar-label,body[data-portal-role="admin"] .sidebar-footer { display:none; }
  body[data-portal-role="admin"] .portal-content { padding:26px 18px 52px; }
  body[data-portal-role="client"] .portal { padding-left:0; }
  body[data-portal-role="client"] .portal-content { padding-inline:18px; }
  body[data-portal-role="client"] .client-quick-nav { position:sticky; top:var(--workspace-topbar); bottom:auto; width:auto; margin:0 -18px 18px; padding:8px 18px; flex-direction:row; overflow-x:auto; }
  body[data-portal-role="client"] .client-quick-nav::before { display:none; }
  body[data-portal-role="client"] .client-quick-nav button { min-width:170px; }
}

@media (max-width: 680px) {
  .notification-bell,.account-welcome,.account-avatar { display:none; }
  body[data-portal-role] #logout-button { width:auto; }
  body[data-portal-role="client"] .portal-content { padding-inline:12px; }
  .client-hero { margin-inline:0; padding:27px 21px; grid-template-columns:1fr; border-radius:0 0 20px 20px; }
  .client-stage-card { margin-bottom:48px; }
  .client-today { right:20px; bottom:15px; left:20px; width:auto; }
  .client-hero-watermark { right:-50px; }
  .journey-panel { padding:21px 18px; }
}