:root {
  color-scheme: light;
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-600: #0f766e;
  --primary-700: #115e59;
  --primary-800: #134e4a;
  --blue-50: #eff6ff;
  --blue-600: #2563eb;
  --green-50: #ecfdf5;
  --green-700: #047857;
  --amber-50: #fffbeb;
  --amber-600: #b45309;
  --red-50: #fef2f2;
  --red-600: #dc2626;
  --red-900: #7f1d1d;
  --slate-25: #fbfcfd;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --white: #ffffff;
  --surface: #ffffff;
  --logo-navy-900: #081643;
  --logo-navy-800: #0f2459;
  --logo-navy-700: #152b65;
  --logo-emerald-500: #10b981;
  --logo-emerald-600: #059669;
  --logo-emerald-light: #5dbd51;
  --sidebar: #081643;
  --sidebar-2: #0f172a;
  --line: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px rgba(15, 23, 42, .05);
  --shadow-md: 0 20px 50px rgba(15, 23, 42, .10);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--slate-900);
  background:
    linear-gradient(180deg, rgba(15, 118, 110, .035), transparent 340px),
    linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%);
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 250px; color: var(--slate-900); }
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}
.brand img.brand-icon {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 10px 22px rgba(8, 22, 67, .24), 0 0 0 1.5px rgba(93, 189, 81, .32);
  border: 1px solid rgba(255, 255, 255, .90);
  flex: 0 0 auto;
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand img.brand-icon:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(8, 22, 67, .30), 0 0 0 2px rgba(93, 189, 81, .50);
}
.brand strong { display: block; letter-spacing: -.035em; font-size: 1.05rem; line-height: 1.1; }
.brand small { display: block; color: var(--slate-500); margin-top: 3px; font-weight: 600; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.control-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 8px 5px 10px;
  background: #ffffff;
  color: var(--slate-500);
  font-size: .76rem;
  font-weight: 700;
}
.control-chip select { border: 0; background: transparent; color: var(--slate-900); font-weight: 800; outline: none; max-width: 145px; }

.layout {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}
.sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  box-shadow: var(--shadow-md);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 999px; }
.nav-title {
  color: #94a3b8;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 12px 7px;
}
.nav-btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: transparent;
  color: #cbd5e1;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-marker {
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .30);
  flex: 0 0 auto;
}
.nav-btn:hover { background: rgba(255,255,255,.06); color: #ffffff; }
.nav-btn.active {
  background: rgba(20, 184, 166, .14);
  color: #ffffff;
  border-color: rgba(45, 212, 191, .22);
}
.nav-btn.active .nav-marker { background: #2dd4bf; }
.content { min-width: 0; padding-bottom: 96px; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 2px 0 4px;
}
.page-header h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(1.85rem, 3.5vw, 3.2rem);
  letter-spacing: -.06em;
  line-height: .98;
  color: var(--slate-900);
}
.page-header p { margin: 8px 0 0; color: var(--slate-500); max-width: 860px; line-height: 1.55; }

/* Core Global Card, Hero, Metric, and Button System */
.card, .panel, .metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.card, .panel { padding: 18px; }
.card h2, .card h3, .panel h2, .panel h3 { margin: 0 0 8px; letter-spacing: -.02em; color: var(--slate-900); }
.card p, .panel p { color: var(--slate-600); line-height: 1.55; }
.hero {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, .22);
  background:
    radial-gradient(circle at 88% 15%, rgba(93, 189, 81, .25), transparent 35%),
    radial-gradient(circle at 10% 85%, rgba(15, 36, 89, .40), transparent 38%),
    linear-gradient(135deg, #081643 0%, #0f2459 40%, #115e59 78%, #059669 100%);
  box-shadow: 0 16px 40px rgba(8, 22, 67, .12);
}
.hero::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -120px;
  width: 310px;
  height: 310px;
  border-radius: 999px;
  border: 52px solid rgba(255,255,255,.07);
}
.hero > * { position: relative; z-index: 1; }
.hero h2, .hero h3 { color: #ffffff; }
.hero p { color: rgba(255,255,255,.88); line-height: 1.52; }
.hero .pill { background: rgba(255,255,255,.14); color: #ffffff; border-color: rgba(255,255,255,.24); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.metric-card, .metric {
  padding: 17px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .09);
  border-top: 3px solid rgba(15, 118, 110, .75);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.metric-card:hover, .metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(8, 22, 67, .08);
  border-top-color: #10b981;
}
.metric-label { color: var(--slate-500); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.metric-value { margin-top: 8px; font-size: 2.3rem; line-height: .95; font-weight: 800; letter-spacing: -.03em; color: var(--slate-900); }
.metric-help { margin-top: 8px; color: var(--slate-500); font-size: .86rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .74rem;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.good { background: var(--green-50); color: #065f46; border-color: #a7f3d0; }
.info { background: var(--blue-50); color: #1d4ed8; border-color: #bfdbfe; }
.warn { background: var(--amber-50); color: #92400e; border-color: #fde68a; }
.high { background: var(--red-50); color: #991b1b; border-color: #fecaca; }
.critical { background: #7f1d1d; color: #ffffff; border-color: #7f1d1d; }
.neutral { background: var(--slate-100); color: var(--slate-700); border-color: var(--slate-200); }

.primary, .secondary, .danger, .ghost, .icon-btn {
  min-height: 42px;
  min-width: 42px;
  border-radius: 10px;
  padding: 10px 16px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.primary:hover, .secondary:hover, .danger:hover, .ghost:hover, .icon-btn:hover { transform: translateY(-1px); }
.primary {
  background: linear-gradient(135deg, #0f766e 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 118, 110, .24);
}
.primary:hover {
  background: linear-gradient(135deg, #115e59 0%, #047857 100%);
  box-shadow: 0 10px 24px rgba(15, 118, 110, .32);
}
.secondary { background: #ffffff; color: var(--slate-800); border-color: var(--slate-300); }
.secondary:hover { background: var(--slate-50); border-color: var(--slate-400); }
.danger { background: var(--red-50); color: var(--red-900); border-color: #fecaca; }
.ghost { background: transparent; color: var(--slate-800); border-color: var(--line); }
.icon-btn { padding: 0 14px; background: #ffffff; color: var(--slate-800); border-color: var(--line); font-size: .82rem; }
.small { min-height: 34px; padding: 7px 12px; font-size: .84rem; border-radius: 9px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-card {
  min-height: 114px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: space-between;
  box-shadow: var(--shadow-sm);
  text-align: left;
  color: var(--slate-900);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.quick-card:hover { transform: translateY(-2px); border-color: rgba(15, 118, 110, .30); box-shadow: var(--shadow-md); }
.quick-card .icon { display: none; }
.quick-card strong { font-size: 1.03rem; color: var(--slate-900); font-weight: 800; }
.quick-card small { color: var(--slate-500); font-weight: 600; line-height: 1.35; }

.form { display: grid; gap: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 800; color: var(--slate-700); }
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 44px;
  background: #ffffff;
  padding: 11px 12px;
  color: var(--slate-900);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(37, 99, 235, .55); box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); }
.field textarea { min-height: 112px; resize: vertical; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: var(--slate-700); font-weight: 700; }
.check-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary-600); }
.photo-warning { color: var(--amber-600); }

.alert { border-radius: var(--radius-lg); padding: 14px; border: 1px solid; }
.alert.red { background: var(--red-50); border-color: #fecaca; color: #7f1d1d; }
.alert.amber { background: var(--amber-50); border-color: #fde68a; color: #78350f; }
.alert.blue { background: var(--blue-50); border-color: #bfdbfe; color: #1e3a8a; }

.timer-ring, .score-ring {
  width: 160px;
  height: 160px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 18px auto;
  box-shadow: inset 0 0 0 16px #ffffff;
  font-size: 2.3rem;
  font-weight: 800;
}
.timer-ring { background: conic-gradient(var(--primary-600) var(--timer-progress, 0%), #dbeafe 0); color: var(--slate-900); }
.score-ring { background: conic-gradient(var(--score-color, var(--red-600)) var(--score-progress, 72%), #e2e8f0 0); color: var(--slate-900); }
.stepper { display: flex; gap: 5px; margin: 12px 0; }
.stepper span { height: 8px; flex: 1; border-radius: 999px; background: #cbd5e1; }
.stepper span.active { background: var(--primary-600); }

.chat-shell { min-height: 540px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.chat-log { display: grid; gap: 10px; align-content: start; max-height: 520px; overflow: auto; padding: 4px; }
.bubble { padding: 12px 14px; border-radius: 14px; line-height: 1.5; box-shadow: var(--shadow-sm); max-width: min(760px, 88%); white-space: pre-wrap; }
.bubble.ai { background: #ffffff; border: 1px solid var(--line); }
.bubble.user { justify-self: end; background: #0f766e; color: #ffffff; }
.chat-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 12px; }

.list { display: grid; gap: 10px; }
.item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  background: #ffffff;
}
.item-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; min-width: 760px; background: #ffffff; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f8fafc; color: var(--slate-500); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; }
tr:hover td { background: #fbfcfd; }

.chart { display: grid; gap: 9px; }
.chart-row { display: grid; grid-template-columns: 150px minmax(0,1fr) 44px; gap: 9px; align-items: center; color: var(--slate-600); }
.chart-track { height: 12px; background: var(--slate-200); border-radius: 999px; overflow: hidden; }
.chart-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f766e, #2563eb); }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 150%);
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--slate-900);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  max-width: min(92vw, 720px);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.bottom-nav { display: none; }
.mobile-only { display: none; }
.empty { padding: 28px; text-align: center; border: 1px dashed var(--slate-300); border-radius: var(--radius-lg); color: var(--slate-500); background: #ffffff; }
hr { border: 0; border-top: 1px solid var(--line); margin: 15px 0; }
details summary { cursor: pointer; color: var(--primary-700); font-weight: 800; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(310px, 82vw);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 20px 20px 0;
    margin: 0;
    padding: 16px 14px 20px;
    transform: translateX(-105%);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 50px rgba(0, 0, 0, .45);
    background: linear-gradient(180deg, #081643 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, .10);
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-only { display: inline-flex; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .topbar { min-height: auto; align-items: flex-start; flex-wrap: wrap; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .brand small { display: none; }
}
@media (max-width: 680px) {
  .layout { padding: 10px; }
  .page-header { display: block; }
  .page-header h1 { font-size: clamp(1.85rem, 11vw, 2.7rem); }
  .quick-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .chat-form { grid-template-columns: 1fr; }
  .control-chip span { display: none; }
  .brand { min-width: 0; }
  .brand-mark { width: 40px; height: 40px; border-radius: 10px; }
  .content { padding-bottom: 104px; }
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .bottom-nav button {
    min-height: 56px;
    border: 1px solid transparent;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--slate-500);
    font-size: .75rem;
    font-weight: 800;
  }
  .bottom-nav button.active { color: var(--primary-800); background: var(--primary-50); border-color: var(--primary-100); }
  .chart-row { grid-template-columns: 110px minmax(0,1fr) 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .topbar, .sidebar, .bottom-nav, .actions, .toast { display: none !important; }
  body { background: #fff; color: #111827; }
  .layout { display: block; padding: 0; }
  .card, .panel, .metric-card, .item { box-shadow: none; border-color: #d1d5db; }
}


/* Live account polish: clean connected account view. */
.account-hero h2 { max-width: 720px; font-size: clamp(1.55rem, 3vw, 2.6rem); }
.account-panel { display: grid; align-content: start; gap: 12px; }
.account-details { display: grid; gap: 10px; margin-top: 4px; }
.account-details > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--slate-50);
}
.account-details span {
  color: var(--slate-500);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.account-details strong { color: var(--slate-900); font-size: .98rem; line-height: 1.35; }
.account-form h3 { font-size: 1.35rem; }
@media (max-width: 680px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .top-actions { display: none; }
  .brand { margin-left: auto; justify-content: flex-end; }
  .card, .panel { padding: 16px; }
  .primary, .secondary, .danger, .ghost, .icon-btn { min-height: 42px; border-radius: 10px; }
  .account-details > div { padding: 11px; }
  .account-hero h2 { font-size: 1.65rem; }
}

/* Simplified navigation and More hub */
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.tool-card {
  min-height: 142px;
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: left;
  background: #ffffff;
  color: var(--slate-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, .34);
  box-shadow: var(--shadow-md);
}
.tool-card strong {
  font-size: 1.04rem;
  letter-spacing: -.02em;
}
.tool-card p {
  margin: 0;
  color: var(--slate-500);
  line-height: 1.45;
  font-weight: 600;
}
.tool-kicker {
  color: var(--primary-700);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    width: min(310px, 82vw);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 20px 20px 0;
  }
  .nav-title { padding: 9px 10px 5px; font-size: .64rem; }
  .nav-btn { padding: 9px 10px; border-radius: 10px; font-size: .96rem; }
  .nav-marker { height: 18px; }
}

@media (max-width: 680px) {
  .sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    width: min(310px, 82vw);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 20px 20px 0;
  }
  .nav-title { font-size: .62rem; letter-spacing: .10em; }
  .nav-btn { min-height: 44px; font-size: .92rem; font-weight: 700; }
  .more-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-card { min-height: 118px; padding: 14px; }
}

/* Layout and guidance refinements */
.content, #app, #app > section { width: 100%; max-width: 100%; }
.content > section, #app > section { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.primary, .secondary, .danger, .ghost, .icon-btn, a.primary, a.secondary, a.danger, a.ghost { text-decoration: none; }

.summary-list { display: grid; gap: 10px; margin-top: 14px; }
.summary-list > div {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}
.summary-list strong { display: block; color: #fff; margin-bottom: 4px; }
.summary-list p { margin: 0; color: rgba(255,255,255,.84); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.resource-card { display: grid; gap: 10px; align-content: start; }
.resource-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.22; }
.resource-card p { margin: 0; font-size: .96rem; line-height: 1.48; }
.resource-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.mini-metrics { margin-top: 12px; }
.mini-metrics .metric-card { padding: 13px; box-shadow: none; }
.mini-metrics .metric-value { font-size: 1.65rem; }
.mini-metrics .metric-label { font-size: .68rem; }
.mini-metrics .metric-help { font-size: .78rem; }

@media (max-width: 1280px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 60;
    left: 12px;
    top: 88px;
    width: min(330px, calc(100vw - 24px));
    transform: translateX(-115%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-only { display: inline-flex; }
}

@media (max-width: 760px) {
  .layout { padding: 10px; }
  .page-header h1 { font-size: clamp(1.75rem, 10vw, 2.55rem); }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { gap: 9px; }
  .resource-card h3 { font-size: 1.02rem; }
  .resource-card p { font-size: .92rem; }
  .summary-list > div { padding: 10px; }

  /* Turn wide management tables into readable mobile cards. */
  .table-wrap { overflow: visible; border: 0; }
  table { min-width: 0; background: transparent; }
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  table td {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 11px 12px;
    word-break: break-word;
  }
  table td:last-child { border-bottom: 0; }
  table td::before {
    color: var(--slate-500);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  table td:nth-child(1)::before { content: "Type"; }
  table td:nth-child(2)::before { content: "Severity"; }
  table td:nth-child(3)::before { content: "Details"; }
  table td:nth-child(4)::before { content: "Status"; }
  table td:nth-child(5)::before { content: "JHSC"; }
  table td:nth-child(6)::before { content: "Actions"; }
  table td .actions { margin-top: 0; gap: 6px; }
  table td .actions .small { width: 100%; justify-content: center; }
}

/* Navigation update: mobile bottom shortcuts removed. Account now lives in the main menu. */
.bottom-nav { display: none !important; }
.content { padding-bottom: 28px; }
@media (max-width: 680px) {
  .content { padding-bottom: 28px; }
  .bottom-nav { display: none !important; }
}

/* Focused Admin Portal */
.admin-card {
  width: 100%;
  text-align: left;
  color: var(--slate-900);
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 178px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.admin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, .34);
  box-shadow: var(--shadow-md);
}
.admin-card p { margin: 0; }
.directory-card small {
  color: var(--slate-500);
  overflow-wrap: anywhere;
}
.danger-zone { border-color: rgba(220, 38, 38, .22); background: linear-gradient(180deg, #fff, #fffafa); }

@media (max-width: 760px) {
  
  .admin-home { gap: 12px; }
  .admin-card { min-height: 138px; padding: 15px; }
}

/* Firebase account email + digital notification polish */
.notification-card {
  border-left: 4px solid rgba(15, 118, 110, .45);
}
.notification-card .actions {
  margin-top: 8px;
}
.account-details div strong {
  overflow-wrap: anywhere;
}
.account-form .actions .ghost {
  border-color: var(--line);
}

/* Enterprise interface polish: quieter copy, sharper command-center feel. */
:root {
  --surface: rgba(255, 255, 255, .96);
  --line: #d8e1ea;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px rgba(15, 23, 42, .06);
  --shadow-md: 0 22px 60px rgba(15, 23, 42, .12);
}
body {
  background:
    radial-gradient(circle at 82% 0%, rgba(20, 184, 166, .16), transparent 310px),
    radial-gradient(circle at 0% 12%, rgba(37, 99, 235, .10), transparent 340px),
    linear-gradient(180deg, #f6f9fc 0%, #eef3f7 100%);
}
.topbar {
  min-height: 68px;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 10px 32px rgba(15, 23, 42, .05);
}
.brand-mark {
  background: linear-gradient(145deg, #07111f, #0f766e);
  box-shadow: 0 12px 26px rgba(15, 118, 110, .20);
}
.layout { max-width: 1380px; gap: 16px; }
.sidebar {
  border-radius: 18px;
  background: linear-gradient(180deg, #08111f 0%, #0f172a 58%, #0b1220 100%);
}
.nav-btn { min-height: 42px; }
.nav-btn strong { font-size: .96rem; }
.content { padding-bottom: 24px; }
.page-header {
  align-items: center;
  padding: 4px 0 8px;
  margin-bottom: 12px;
}
.page-header h1 {
  font-size: clamp(1.65rem, 2.6vw, 2.55rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.page-header p {
  margin-top: 6px;
  max-width: 720px;
  font-size: .98rem;
  line-height: 1.42;
}
.card, .panel, .metric-card {
  border-color: rgba(15, 23, 42, .10);
  border-radius: 16px;
}
.card, .panel { padding: 16px; }
.card h2, .card h3, .panel h2, .panel h3 {
  letter-spacing: -.04em;
}
.card p, .panel p, li {
  line-height: 1.46;
}
.hero {
  background:
    linear-gradient(135deg, rgba(8, 17, 31, .98), rgba(15, 78, 74, .96) 58%, rgba(15, 118, 110, .94)),
    linear-gradient(90deg, transparent, rgba(255,255,255,.08));
}
.hero::after {
  width: 250px;
  height: 250px;
  border-width: 42px;
  opacity: .85;
}
.hero h2 { font-size: clamp(1.55rem, 2.5vw, 2.35rem); }
.hero p { max-width: 760px; }
.metric-card { padding: 14px; }
.metric-value { font-size: 1.9rem; }
.metric-help { font-size: .8rem; }
.actions { gap: 8px; }
.primary, .secondary, .danger, .ghost, a.primary, a.secondary, a.danger, a.ghost {
  border-radius: 10px;
  min-height: 42px;
  font-weight: 800;
}
.primary { box-shadow: 0 10px 24px rgba(15, 118, 110, .17); }
.item {
  border-radius: 14px;
  border-color: rgba(15, 23, 42, .09);
}
.directory-card {
  border-left: 4px solid rgba(15, 118, 110, .42);
}
.admin-toolbar {
  border-left: 4px solid rgba(37, 99, 235, .38);
}
.admin-card { min-height: 150px; }
.tool-card { min-height: 136px; }
.alert { border-radius: 14px; }
.empty { border-radius: 14px; padding: 20px; }

@media (max-width: 760px) {
  .topbar { padding: 10px 14px; }
  .layout { padding: 10px; }
  .page-header h1 { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .page-header p { font-size: .93rem; }
  .card, .panel { padding: 14px; }
  .hero h2 { font-size: clamp(1.35rem, 7vw, 2rem); }
  .metric-value { font-size: 1.65rem; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions > * { width: 100%; justify-content: center; }
  
}

/* Convenience navigation: direct workflow shortcuts. */
.command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.command-card {
  min-height: 92px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 15px;
  padding: 14px;
  background: rgba(255,255,255,.96);
  color: var(--slate-900);
  text-align: left;
  display: grid;
  align-content: center;
  gap: 5px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.command-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, .34);
  box-shadow: var(--shadow-md);
}
.command-card strong {
  font-size: 1.02rem;
  letter-spacing: -.025em;
}
.command-card small {
  color: var(--slate-500);
  font-weight: 700;
  line-height: 1.35;
}
.command-card.primary {
  color: #fff;
  border-color: rgba(45, 212, 191, .20);
  background: linear-gradient(135deg, #0f766e, #115e59);
}
.command-card.primary small { color: rgba(255,255,255,.82); }
.compact-hero { padding: 18px; }
.compact-panel { min-height: auto; }

@media (max-width: 760px) {
  .command-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .command-card {
    min-height: 82px;
    padding: 12px;
    border-radius: 13px;
  }
  .command-card strong { font-size: .94rem; }
  .command-card small { font-size: .75rem; }
  
  .compact-hero { padding: 15px; }
}

/* Employer value / sales positioning layer */
.value-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(45, 212, 191, .32), transparent 260px),
    linear-gradient(135deg, #07111f 0%, #0f3f3d 58%, #0f766e 100%);
}
.value-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}
.value-list {
  display: grid;
  gap: 10px;
}
.value-list > div {
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
}
.value-list strong {
  display: block;
  color: var(--slate-900);
  letter-spacing: -.02em;
}
.value-list span {
  display: block;
  margin-top: 3px;
  color: var(--slate-600);
  font-weight: 600;
  line-height: 1.35;
}
.signal-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.signal-flow span {
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: .82rem;
  font-weight: 800;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.value-card {
  min-height: 140px;
  display: grid;
  align-content: start;
  gap: 8px;
  border-left: 4px solid rgba(15, 118, 110, .45);
}
.value-card p {
  margin: 0;
  color: var(--slate-600);
  font-weight: 600;
}
.value-kicker {
  color: var(--primary-700);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .signal-flow { gap: 6px; }
  .signal-flow span { font-size: .74rem; padding: 7px 9px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-card { min-height: auto; }
}

/* Competitive positioning matrix */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.comparison-card {
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  padding: 14px;
}
.comparison-card strong {
  display: block;
  font-size: 1.02rem;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}
.comparison-card p {
  margin: 8px 0 0;
  color: var(--slate-600);
}
.comparison-card span {
  color: var(--slate-900);
  font-weight: 800;
}

/* Exposure profile layer: fingerprints, task passports, repeat signals. */
.fingerprint {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.fingerprint-score {
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg, #0f766e, #115e59);
}
.fingerprint-score.high { background: linear-gradient(135deg, #b45309, #7c2d12); }
.fingerprint-score.critical { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
.fingerprint-score.warn { background: linear-gradient(135deg, #b45309, #92400e); }
.fingerprint-score.good { background: linear-gradient(135deg, #047857, #065f46); }
.fingerprint-score strong {
  display: block;
  font-size: 2.4rem;
  line-height: .9;
  letter-spacing: -.06em;
}
.fingerprint-score span {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
}
.fingerprint-body { min-width: 0; }
.fingerprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.fingerprint-grid > div {
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.fingerprint-grid span {
  display: block;
  color: var(--slate-500);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fingerprint-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--slate-900);
}
.repeat-alert { border-left: 4px solid rgba(220, 38, 38, .45); }
.task-passport { border-left: 4px solid rgba(37, 99, 235, .40); }

@media (max-width: 760px) {
  .fingerprint { grid-template-columns: 1fr; }
  .fingerprint-score { min-height: 120px; }
  .fingerprint-grid { grid-template-columns: 1fr 1fr; }
}

/* Sector-adaptive hazard overview */
.hazard-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.hazard-chip {
  border: 1px solid rgba(15, 23, 42, .10);
  border-left: 4px solid rgba(15, 118, 110, .42);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  padding: 12px;
  display: grid;
  gap: 4px;
}
.hazard-chip strong {
  color: var(--slate-900);
  letter-spacing: -.02em;
}
.hazard-chip small {
  color: var(--slate-600);
  line-height: 1.35;
  font-weight: 600;
}
@media (max-width: 760px) {
  .hazard-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .hazard-chip {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .hazard-chip strong {
    font-size: .88rem !important;
  }
  .hazard-chip small {
    font-size: .76rem !important;
    line-height: 1.25 !important;
  }
}

/* Update 2: Control Library and Hazard Passports */
.control-library-grid,
.passport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.control-card,
.hazard-passport {
  display: grid;
  align-content: start;
  gap: 9px;
  border-left: 4px solid rgba(15, 118, 110, .45);
}
.control-card h3,
.hazard-passport h3 {
  margin: 0;
}
.control-card p,
.hazard-passport p {
  margin: 0;
}
.mini-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 4px;
}
.mini-stat-row span {
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 11px;
  padding: 9px 7px;
  background: #fff;
  color: var(--slate-900);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}
.mini-stat-row small {
  display: block;
  margin-top: 2px;
  color: var(--slate-500);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hazard-passport { border-left-color: rgba(37, 99, 235, .42); }
@media (max-width: 760px) {
  .control-library-grid,
  .passport-grid { grid-template-columns: 1fr; }
  .mini-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* Safety inspections */
.round-template {
  border-left: 4px solid rgba(15, 118, 110, .42);
}
.round-template:hover {
  border-left-color: rgba(20, 184, 166, .85);
}
.round-template small {
  color: var(--slate-500);
  font-weight: 700;
}

/* Update 4: interactive fingerprint questions */
.form small {
  color: var(--slate-500);
  font-weight: 700;
}
.fingerprint-body p strong {
  color: var(--slate-900);
}

/* Update 5: Control Recommendation Engine */
.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.recommendation-card {
  border: 1px solid rgba(15, 23, 42, .10);
  border-left: 4px solid rgba(15, 118, 110, .45);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.recommendation-card h3 { margin: 0; font-size: 1rem; }
.recommendation-card p { margin: 0; color: var(--slate-600); }
.weak-control-panel {
  border-color: rgba(180, 83, 9, .28);
  background: linear-gradient(180deg, #fff, #fffbeb);
}
.weak-control-panel .recommendation-card { border-left-color: rgba(180, 83, 9, .55); }
@media (max-width: 760px) {
  .recommendation-grid { grid-template-columns: 1fr; }
}

/* Update 6: Task/Hazard Passport detail pages */
.passport-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.passport-summary {
  box-shadow: none;
  border-left: 4px solid rgba(37, 99, 235, .42);
}
.passport-summary h3 { margin: 0; }
.passport-summary p { margin: 0; }

/* Update 7: Worker feedback and effectiveness loop */
.feedback-panel {
  border-left: 4px solid rgba(37, 99, 235, .42);
}
.feedback-panel .list .item {
  background: #fff;
}

/* Update 8: JHSC meeting workflow */
.meeting-card {
  border-left: 4px solid rgba(15, 118, 110, .45);
}
.agenda-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.agenda-item {
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}
.agenda-item p { margin: 6px 0 0; }
@media (max-width: 760px) {
  .agenda-item .actions { grid-template-columns: 1fr; }
}

/* Update 9: Risk Reduction / ROI dashboard */
.risk-score-card {
  border-radius: 18px;
  padding: 24px;
  color: #fff;
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #0f766e, #115e59);
}
.risk-score-card.high { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
.risk-score-card.warn { background: linear-gradient(135deg, #b45309, #92400e); }
.risk-score-card.info { background: linear-gradient(135deg, #2563eb, #134e4a); }
.risk-score-card.good { background: linear-gradient(135deg, #047857, #0f766e); }
.risk-score-card strong {
  display: block;
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: .9;
  letter-spacing: -.08em;
}
.risk-score-card span {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
}
.risk-score-card p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.value-indicator strong {
  display: block;
  margin-top: 10px;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--slate-900);
}

/* Readiness card styles */
.readiness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.readiness-card {
  border-left: 4px solid rgba(15, 118, 110, .45);
  display: grid;
  gap: 8px;
}
.readiness-card p { margin: 0; }

/* Policy Center and worker trust */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.policy-card {
  border-left: 4px solid rgba(15, 118, 110, .45);
  display: grid;
  align-content: start;
  gap: 8px;
}
.policy-card h3 { margin: 0; }
.policy-card p { margin: 0; }
.policy-card ul { margin: 4px 0 0; padding-left: 18px; }
.policy-card li { margin-bottom: 6px; }
@media (max-width: 760px) {
  .policy-grid { grid-template-columns: 1fr; }
}

/* Mobile UX polish */
html, body { max-width: 100%; overflow-x: hidden; }
button, a, input, select, textarea { max-width: 100%; }
.card, .item, .metric-card, .hero, .panel { overflow-wrap: anywhere; }
small, p, li, strong, span { overflow-wrap: anywhere; }

/* Compact professional mobile top bar */
@media (max-width: 760px) {
  body { background: linear-gradient(180deg, #f7fafc 0%, #eef4f8 100%); }
  .topbar {
    min-height: 62px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 9px 12px;
  }
  .mobile-only {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 13px;
  }
  .brand {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 9px;
  }
  .brand-mark {
    width: 38px;
    height: 38px;
    font-size: .74rem;
    border-radius: 10px;
  }
  .brand strong {
    font-size: .98rem;
    letter-spacing: -.045em;
    white-space: nowrap;
  }
  .brand small, .top-actions { display: none !important; }
  .layout { padding: 9px; gap: 10px; }
  .content { padding-bottom: 18px; }

  .page-header {
    margin: 2px 0 10px;
    padding: 0;
  }
  .page-header h1 {
    font-size: clamp(1.42rem, 7vw, 2.05rem);
    line-height: 1.06;
  }
  .page-header p {
    margin-top: 6px;
    font-size: .9rem;
    line-height: 1.38;
  }

  .hero { padding: 15px; border-radius: 16px; }
  .hero h2 { font-size: clamp(1.28rem, 6.4vw, 1.82rem); line-height: 1.08; }
  .hero p { font-size: .92rem; line-height: 1.42; }
  .hero::after { width: 180px; height: 180px; border-width: 30px; right: -86px; bottom: -90px; }

  .grid-2, .grid-3, .value-grid, .resource-grid, .control-library-grid, .passport-grid, .policy-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .metric-card { padding: 13px; min-height: 90px; }
  .metric-value { font-size: 1.55rem; }
  .metric-label { font-size: .66rem; }
  .metric-help { font-size: .78rem; }

  .card, .panel { padding: 14px; border-radius: 15px; }
  .item { padding: 12px; border-radius: 13px; }
  .item-head { align-items: flex-start; gap: 8px; }
  .item-head .pill { flex: 0 0 auto; }

  .form-grid { grid-template-columns: 1fr !important; gap: 11px; }
  .field input, .field textarea, .field select {
    min-height: 48px;
    font-size: 16px; /* prevents iOS zoom */
    border-radius: 12px;
  }
  .field textarea { min-height: 110px; }
  .field label { font-size: .78rem; }
  .check-row { align-items: flex-start; }
  .check-row span { line-height: 1.35; }

  .actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }
  .actions > *, .actions button, .actions a, .actions label {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }

  .command-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .command-card {
    min-height: 78px;
    padding: 11px;
  }
  .command-card strong { font-size: .9rem; }
  .command-card small { font-size: .72rem; line-height: 1.28; }

  .admin-toolbar {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .admin-toolbar > div:first-child { display: none; }
  .admin-toolbar .actions {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    padding: 2px 0 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .admin-toolbar .actions button {
    flex: 0 0 auto;
    width: auto;
    min-width: 112px;
    min-height: 38px;
    padding: 8px 10px;
    font-size: .75rem;
    scroll-snap-align: start;
  }

  .sidebar {
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: min(76dvh, 620px) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .30);
  }
  .nav-btn { min-height: 43px; }
  .nav-title { padding-top: 8px; }

  .fingerprint { grid-template-columns: 1fr !important; }
  .fingerprint-score { min-height: 104px; }
  .fingerprint-grid { grid-template-columns: 1fr 1fr !important; }

  .mini-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .table-wrap { max-width: 100%; }
  table td { grid-template-columns: 96px minmax(0, 1fr); }

  .toast {
    width: calc(100vw - 24px);
    bottom: 12px;
    font-size: .88rem;
  }
}

@media (max-width: 390px) {
  .brand strong { font-size: .9rem; }
  .brand-mark { width: 35px; height: 35px; }
  .mobile-only { padding: 8px 11px; }
  .command-grid { grid-template-columns: 1fr !important; }
  .fingerprint-grid { grid-template-columns: 1fr !important; }
}

/* Admin Console simplification */
.admin-snapshot {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(150px, .7fr) minmax(150px, .7fr);
  gap: 12px;
}
.admin-focus h2 { margin: 6px 0; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.admin-focus p { margin: 0; }
.admin-action-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.admin-action {
  min-height: 76px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 15px;
  background: #fff;
  color: var(--slate-900);
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.admin-action.primary {
  background: linear-gradient(135deg, #0f766e, #115e59);
  color: #fff;
}
.admin-action strong { font-size: 1.03rem; letter-spacing: -.03em; }
.admin-action span { color: inherit; opacity: .78; font-weight: 700; font-size: .78rem; }
.admin-tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.admin-tool-list button {
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: #fff;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--slate-700);
  font-weight: 800;
}
.admin-tool-list button:hover { border-color: rgba(15, 118, 110, .35); color: var(--primary-800); }
@media (max-width: 760px) {
  .admin-snapshot { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-focus { grid-column: 1 / -1; }
  .admin-action-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-action { min-height: 64px; padding: 10px; }
  .admin-action strong { font-size: .94rem; }
  .admin-action span { font-size: .7rem; }
  .admin-tool-list { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-tool-list button { width: 100%; border-radius: 12px; }
}

/* Today page simplification */
.today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.today-actions > * {
  min-width: 150px;
}
.today-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.today-strip button {
  min-height: 74px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 15px;
  background: #fff;
  color: var(--slate-900);
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.today-strip strong { font-size: 1rem; letter-spacing: -.03em; }
.today-strip span { color: var(--slate-500); font-weight: 700; font-size: .78rem; }
@media (max-width: 760px) {
  .today-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .today-actions .primary,
  .today-actions [data-target="report"] {
    grid-column: 1 / -1;
    min-height: 48px;
    font-size: .98rem;
  }
  .today-actions > * {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    font-size: .84rem;
  }
  .today-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .today-strip button { min-height: 64px; padding: 10px; }
  .today-strip strong { font-size: .92rem; }
  .today-strip span { font-size: .7rem; }
}
@media (max-width: 390px) {
  .today-strip { grid-template-columns: 1fr; }
}

/* Office-first readiness mode */
.office-readiness {
  border-left: 4px solid rgba(37, 99, 235, .42);
  margin-top: 14px;
}
.readiness-number {
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--slate-900);
}
@media (max-width: 760px) {
  .office-readiness .actions { grid-template-columns: 1fr; }
  .readiness-number { font-size: 1.7rem; }
}

/* Simplified account type sign-up */
.admin-signup-code {
  border: 1px solid rgba(15, 118, 110, .18);
  border-left: 4px solid rgba(15, 118, 110, .50);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f0fdfa);
  padding: 12px;
  display: grid;
  gap: 8px;
}
.admin-signup-code[hidden] { display: none !important; }
.admin-signup-code small {
  color: var(--slate-600);
  font-weight: 700;
  line-height: 1.35;
}

/* Sign-up options appear only after Create account is selected */
.signup-options {
  display: grid;
  gap: 12px;
}
.signup-options[hidden] { display: none !important; }


/* About Praevanta Safety */
.about-hero {
  border-left: 4px solid rgba(15, 118, 110, .42);
}
.about-hero h2 {
  max-width: 980px;
}
.about-nav .admin-tool-list button {
  text-align: left;
  display: grid;
  gap: 4px;
}
.about-nav .admin-tool-list small {
  color: var(--slate-500);
  font-weight: 700;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .about-nav .admin-tool-list {
    grid-template-columns: 1fr;
  }
}


/* Elegant professional polish */
:root {
  --ink: #07111f;
  --muted-ink: #516173;
  --panel-border: rgba(15, 23, 42, .095);
  --panel-shadow: 0 18px 48px rgba(15, 23, 42, .075);
  --panel-shadow-soft: 0 8px 26px rgba(15, 23, 42, .055);
}
body {
  letter-spacing: -.012em;
  background:
    radial-gradient(circle at 18% -10%, rgba(15, 118, 110, .11), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(37, 99, 235, .075), transparent 28%),
    linear-gradient(180deg, #fbfcfd 0%, #f5f7fb 48%, #eef3f7 100%);
}
.topbar {
  min-height: 74px;
  border-bottom: 1px solid rgba(15, 23, 42, .075);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .045);
}
.brand strong {
  font-weight: 800;
  letter-spacing: -.035em;
}
.brand small {
  color: var(--slate-500);
  font-weight: 700;
}
.brand-mark {
  border-radius: 15px;
  background: linear-gradient(145deg, #06101d 0%, #0f766e 100%);
  box-shadow: 0 14px 28px rgba(15, 118, 110, .20), inset 0 1px 0 rgba(255,255,255,.18);
}
.sidebar {
  border: 1px solid rgba(148, 163, 184, .16);
  background: linear-gradient(180deg, #08111f 0%, #0e1728 55%, #070d18 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
}
.nav-title { color: #9aa9bc; }
.nav-btn {
  border-radius: 14px;
  font-weight: 800;
}
.nav-btn.active {
  background: linear-gradient(90deg, rgba(20,184,166,.18), rgba(37,99,235,.10));
  border-color: rgba(45, 212, 191, .30);
}
.page-header h1 {
  color: var(--ink);
  letter-spacing: -.07em;
  line-height: .98;
}
.page-header p {
  color: var(--muted-ink);
  font-weight: 500;
  line-height: 1.5;
}
.card, .metric-card, .item, .tool-card, .command-card, .value-card, .comparison-card {
  border-color: var(--panel-border) !important;
  box-shadow: var(--panel-shadow-soft);
}
.card {
  border-radius: 24px;
}
.hero, .value-hero, .compact-hero, .account-hero, .about-hero {
  background:
    linear-gradient(135deg, rgba(8, 17, 31, .985), rgba(15, 118, 110, .92)),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 35%);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 76px rgba(15, 23, 42, .18);
}
.hero h2, .value-hero h2, .compact-hero h2, .account-hero h2, .about-hero h2 { color: #ffffff; }
.hero p, .value-hero p, .compact-hero p, .account-hero p, .about-hero p { color: rgba(255,255,255,.86); }
.primary, .secondary, .danger, .ghost, .icon-btn, .admin-action, .tool-card, .command-card {
  border-radius: 16px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.primary:hover, .secondary:hover, .danger:hover, .ghost:hover, .icon-btn:hover, .admin-action:hover, .tool-card:hover, .command-card:hover {
  transform: translateY(-1px);
}
.primary {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  box-shadow: 0 14px 30px rgba(15, 118, 110, .20);
}
.secondary {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-color: rgba(15, 118, 110, .18);
}
input, select, textarea {
  border-radius: 16px !important;
  border-color: rgba(15, 23, 42, .14) !important;
  background: rgba(255,255,255,.98);
}
.field label {
  color: var(--slate-800);
  font-weight: 800;
  letter-spacing: -.02em;
}
.pill {
  border-radius: 999px;
  font-weight: 800;
}
.metric-value {
  letter-spacing: -.08em;
}
.table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}
@media (max-width: 760px) {
  .topbar { padding: 12px 14px; }
  .layout { padding: 12px; }
  .page-header h1 { font-size: clamp(2rem, 10vw, 2.85rem); }
  .page-header p { font-size: 1.02rem; }
  .card { border-radius: 22px; }
  .hero, .value-hero, .compact-hero, .account-hero, .about-hero { border-radius: 24px; }
  .primary, .secondary, .danger, .ghost, .icon-btn { min-height: 48px; }
  .admin-toolbar .actions button { min-width: 126px; }
}


/* Real app loading state */
.initial-loading {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 25% 15%, rgba(15,118,110,.14), transparent 32%),
    linear-gradient(180deg, #fbfcfd, #f1f5f9);
}
.initial-loading-card {
  width: min(420px, 100%);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 80px rgba(15,23,42,.16);
  padding: 28px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.initial-loading-mark,
.loading-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  letter-spacing: .08em;
  background: linear-gradient(145deg, #06101d, #0f766e);
  box-shadow: 0 18px 36px rgba(15,118,110,.24);
}
.initial-loading-card strong { font-size: 1.25rem; letter-spacing: -.04em; }
.initial-loading-card span { color: var(--slate-500); font-weight: 700; }
.loading-card {
  max-width: 620px;
  margin: 12vh auto 0;
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.loading-card h2 { margin: 4px 0 0; font-size: clamp(1.7rem, 4vw, 2.3rem); }
.loading-card p { margin: 0; color: var(--slate-600); }
.loading-bar {
  width: min(360px, 100%);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15,23,42,.08);
}
.loading-bar span {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #14b8a6, #2563eb);
  animation: loadingSweep 1.3s ease-in-out infinite;
}
@keyframes loadingSweep {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(245%); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-bar span { animation: none; width: 100%; }
}


/* Main page workplace image */
.landing-photo, .home-visual {
  overflow: hidden;
  padding: 0;
  position: relative;
  min-height: 360px;
  background: #08111f;
}
.landing-photo img, .home-visual img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.04) brightness(.82);
}
.landing-photo::after, .home-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,16,29,.08), rgba(6,16,29,.70)),
    linear-gradient(90deg, rgba(6,16,29,.68), rgba(6,16,29,.06) 58%);
  pointer-events: none;
}
.landing-photo-caption, .home-visual-copy {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 22px;
  color: #fff;
  max-width: 620px;
}
.landing-photo-caption h3, .home-visual-copy h3 {
  margin: 10px 0 6px;
  color: #fff;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -.055em;
}
.landing-photo-caption p, .home-visual-copy p {
  margin: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.45;
  font-weight: 600;
}
.home-visual {
  margin-top: 14px;
  min-height: 260px;
}
.home-visual img { min-height: 260px; }
@media (max-width: 760px) {
  .landing-photo, .home-visual { min-height: 260px; border-radius: 24px; }
  .landing-photo img, .home-visual img { min-height: 260px; }
  .landing-photo-caption, .home-visual-copy { left: 16px; right: 16px; bottom: 16px; }
  .landing-photo-caption h3, .home-visual-copy h3 { font-size: 1.25rem; }
  .landing-photo-caption p, .home-visual-copy p { font-size: .94rem; }
}


/* Role model cards */
.role-model-grid ul { margin: 8px 0 0; padding-left: 20px; }
.role-model-grid li { margin: 7px 0; color: var(--slate-600); line-height: 1.42; }
.role-model-grid strong { color: var(--slate-900); }

/* Version and update status */
.version-panel {
  margin-top: 14px;
  border-left: 4px solid rgba(15, 118, 110, .28);
}
.version-panel p {
  color: var(--slate-600);
  font-weight: 700;
  word-break: break-word;
}
.app-update-banner {
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
}
.app-update-banner .actions {
  margin-top: 0;
}

/* Workspace/account reliability */
.workspace-diagnostic {
  margin-top: 14px;
  border-left: 4px solid rgba(37, 99, 235, .28);
}
.workspace-diagnostic .account-details {
  margin-top: 12px;
}
.workspace-switch-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.workspace-switch-list button {
  justify-content: start;
  text-align: left;
  display: grid;
  gap: 2px;
}
.workspace-switch-list small {
  color: currentColor;
  opacity: .72;
  font-weight: 700;
}
@media (max-width: 760px) {
  .workspace-switch-list { grid-template-columns: 1fr; }
}

/* In-app notification and attention infrastructure */
.nav-btn { position: relative; }
.nav-badge {
  margin-left: auto;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #14b8a6, #2563eb);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(20, 184, 166, .24);
}
.attention-panel {
  margin-top: 14px;
  border-left: 4px solid rgba(20, 184, 166, .34);
}
.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.attention-item {
  min-height: 86px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "pill title" "pill body";
  gap: 2px 10px;
  align-items: center;
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.attention-item .pill { grid-area: pill; align-self: start; }
.attention-item strong { grid-area: title; font-size: 1rem; letter-spacing: -.035em; }
.attention-item small { grid-area: body; color: var(--slate-500); font-weight: 700; line-height: 1.35; }
.compact-empty { padding: 18px; }
@media (max-width: 760px) {
  .attention-grid { grid-template-columns: 1fr; }
  .nav-badge { min-width: 24px; height: 22px; font-size: .68rem; }
}


/* Manager / Supervisor operational queue */
.manager-queue {
  margin-top: 14px;
  border-left: 4px solid rgba(20, 184, 166, .34);
}
.manager-queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.manager-queue-grid button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.manager-queue-grid strong {
  font-size: 2rem;
  letter-spacing: -.08em;
  line-height: 1;
}
.manager-queue-grid span {
  color: var(--slate-500);
  font-weight: 800;
  font-size: .82rem;
  text-align: center;
}
@media (max-width: 760px) {
  .manager-queue-grid { grid-template-columns: repeat(2, 1fr); }
  .manager-queue-grid button { min-height: 78px; }
  .manager-queue-grid strong { font-size: 1.65rem; }
}
@media (max-width: 390px) {
  .manager-queue-grid { grid-template-columns: 1fr; }
}

/* Large list pagination and table performance */
.list-footer {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--slate-500);
  font-weight: 700;
}
.table-wrap {
  contain: content;
}
@media (max-width: 760px) {
  .list-footer { display: grid; text-align: center; }
}

/* Hazards & Exposures */
.hazard-search-panel,
.worksafebc-reference-hub {
  border-color: rgba(15, 118, 110, .14);
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.hazard-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.hazard-search-row input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--slate-900);
  box-shadow: inset 0 1px 1px rgba(15,23,42,.03);
}
.hazard-filter-row,
.hazard-popular-row,
.hazard-alpha-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hazard-filter-chip,
.hazard-popular-chip,
.hazard-alpha-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 7px 11px;
  background: #ffffff;
  color: var(--slate-600);
  font-size: .82rem;
  font-weight: 800;
}
.hazard-popular-chip {
  border-color: rgba(37,99,235,.15);
  color: var(--blue-600);
  background: var(--blue-50);
}
.hazard-alpha-chip {
  min-width: 36px;
  padding: 7px 10px;
  font-size: .78rem;
}
.hazard-filter-chip.active,
.hazard-filter-chip:hover,
.hazard-popular-chip:hover,
.hazard-alpha-chip.active,
.hazard-alpha-chip:hover {
  border-color: rgba(15,118,110,.35);
  color: var(--primary-800);
  background: #f0fdfa;
}
.hazard-letter-group {
  margin-top: 16px;
}
.hazard-letter-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.hazard-letter-heading span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--slate-900);
  color: #ffffff;
  font-weight: 800;
}
.hazard-letter-heading small { color: var(--slate-500); font-weight: 800; }
.worksafebc-reference-hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.worksafebc-reference-hub h3 { margin: 8px 0 4px; letter-spacing: -.04em; }
.worksafebc-reference-hub p { margin: 0; color: var(--slate-600); line-height: 1.5; }
.hazard-guide-layout {
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: start;
}
.hazard-guide-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 12px;
}
.hazard-guide-list {
  display: grid;
  gap: 9px;
}
.hazard-guide-card {
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  gap: 7px;
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.hazard-guide-card:hover { transform: translateY(-1px); border-color: rgba(15,118,110,.28); box-shadow: var(--shadow-md); }
.hazard-guide-card strong { letter-spacing: -.035em; line-height: 1.15; }
.hazard-guide-card small { color: var(--slate-500); font-weight: 700; line-height: 1.38; }
.hazard-guide-card.active {
  border-color: rgba(15,118,110,.36);
  background: linear-gradient(180deg, #f0fdfa, #ffffff);
}
.reference-count {
  color: var(--slate-400);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.open-topic-cue {
  color: var(--primary-700);
  font-size: .86rem;
  font-weight: 800;
  margin-top: 2px;
}
.hazard-topic-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: start;
}
.hazard-topic-hero {
  min-height: 100%;
  display: grid;
  align-content: center;
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.11), transparent 42%),
    linear-gradient(135deg, #ffffff, #f8fafc);
}
.hazard-topic-hero h2 {
  margin: 8px 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: .96;
  letter-spacing: -.075em;
}
.hazard-topic-hero p,
.hazard-topic-footer p { color: var(--slate-600); line-height: 1.55; font-weight: 600; }
.hazard-topic-sources {
  border-color: rgba(15,118,110,.20);
  background: linear-gradient(180deg, #f0fdfa, #ffffff 58%);
}
.hazard-topic-sources .worksafebc-link-list {
  background: transparent;
  border: 0;
  padding: 10px 0 0;
}
.topic-nav-row,
.hazard-topic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hazard-decision-grid,
.hazard-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hazard-decision-card,
.hazard-support-card {
  border-color: rgba(15,23,42,.09);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.hazard-support-card:nth-child(2) {
  border-color: rgba(220,38,38,.16);
  background: linear-gradient(180deg, #fff7ed, #ffffff 70%);
}
.hazard-decision-card h3,
.hazard-support-card h3 { margin: 8px 0 6px; letter-spacing: -.04em; }
.hazard-decision-card ul,
.hazard-support-card ul,
.hazard-support-card ol { margin: 0; padding-left: 19px; }
.hazard-decision-card li,
.hazard-support-card li { margin: 7px 0; color: var(--slate-600); line-height: 1.42; font-weight: 600; }
.hazard-topic-chip {
  min-height: 46px;
  display: inline-grid;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(15,118,110,.20);
  border-radius: 14px;
  padding: 8px 12px;
  background: #ffffff;
  color: var(--primary-800);
  text-align: left;
  font-weight: 800;
}
.hazard-topic-chip strong { font-size: .88rem; line-height: 1.12; color: var(--slate-900); }
.hazard-topic-chip small { font-size: .72rem; line-height: 1.15; color: var(--slate-500); font-weight: 800; }
.hazard-topic-chip:hover { background: #f0fdfa; }
.hazard-topic-footer {
  display: grid;
  gap: 12px;
  border-color: rgba(15,118,110,.14);
}
.hazard-guide-detail {
  position: sticky;
  top: 92px;
}
.hazard-guide-detail ul { padding-left: 20px; margin-top: 8px; }
.hazard-guide-detail li { margin: 7px 0; color: var(--slate-600); line-height: 1.42; }
.workSafe-summary,
.control-focus,
.worksafebc-link-list {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: rgba(248,250,252,.86);
}
.workSafe-summary p { margin: 6px 0 0; color: var(--slate-700); line-height: 1.52; font-weight: 600; }
.control-focus h3,
.worksafebc-link-list h3 { margin: 0 0 8px; }
.worksafebc-link-list {
  display: grid;
  gap: 8px;
}
.worksafebc-link-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none;
}
.worksafebc-link-list a strong { color: var(--slate-900); }
.worksafebc-link-list a small { color: var(--slate-500); font-weight: 700; line-height: 1.35; }
.worksafebc-link-list a span { grid-row: 1 / span 2; grid-column: 2; color: var(--primary-700); font-weight: 800; }
@media (max-width: 900px) {
  .hazard-guide-layout,
  .worksafebc-reference-hub,
  .hazard-topic-page,
  .hazard-decision-grid,
  .hazard-support-grid { grid-template-columns: 1fr; }
  .hazard-guide-detail { position: static; }
}
@media (max-width: 560px) {
  .hazard-search-row { grid-template-columns: 1fr; }
  .hazard-filter-chip,
  .hazard-popular-chip { width: 100%; justify-content: center; }
  .hazard-alpha-row { gap: 6px; }
  .hazard-alpha-chip { min-width: 34px; flex: 1 0 auto; }
}

/* Worker experience polish */
.worker-status-card,
.worker-trust-card,
.worker-report-detail {
  margin-top: 14px;
  border-left: 4px solid rgba(15, 118, 110, .30);
}
.worker-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 14px;
  margin-top: 14px;
}
.worker-report-card h3 {
  line-height: 1.14;
}
.empty-state-card {
  margin-top: 14px;
  text-align: left;
}
@media (max-width: 760px) {
  .worker-report-grid { grid-template-columns: 1fr; }
}

/* Manager triage and closure gates */
.manager-triage-panel,
.closure-gate {
  border-left: 4px solid rgba(20, 184, 166, .34);
}
.manager-triage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.manager-triage-grid button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.manager-triage-grid strong { letter-spacing: -.035em; }
.manager-triage-grid small { color: var(--slate-500); font-weight: 700; line-height: 1.34; }
.closure-gate ul { padding-left: 20px; }
.closure-gate li { margin: 7px 0; color: var(--slate-600); line-height: 1.42; }
@media (max-width: 760px) {
  .manager-triage-grid { grid-template-columns: 1fr; }
}

/* Admin workflow polish */
.admin-lifecycle,
.admin-operating-checklist,
.admin-role-guide {
  margin-top: 14px;
  border-left: 4px solid rgba(37, 99, 235, .28);
}
.admin-lifecycle-grid,
.admin-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.admin-lifecycle-grid button,
.admin-check-grid button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.admin-lifecycle-grid strong {
  font-size: 2rem;
  letter-spacing: -.08em;
  line-height: 1;
}
.admin-lifecycle-grid span,
.admin-check-grid small {
  color: var(--slate-500);
  font-weight: 700;
  line-height: 1.35;
}
.admin-check-grid strong { letter-spacing: -.035em; }
.admin-role-guide ul { padding-left: 20px; }
.admin-role-guide li { margin: 7px 0; color: var(--slate-600); line-height: 1.42; }
.admin-role-guide strong { color: var(--slate-900); }
@media (max-width: 760px) {
  .admin-lifecycle-grid,
  .admin-check-grid { grid-template-columns: 1fr; }
}

/* H&S Review workflow */
.hs-review-panel {
  margin-top: 14px;
  border-left: 4px solid rgba(37, 99, 235, .32);
}
.hs-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.hs-review-grid button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.hs-review-grid strong { font-size: 2rem; letter-spacing: -.08em; line-height: 1; }
.hs-review-grid span { color: var(--slate-500); font-weight: 800; font-size: .82rem; }
@media (max-width: 760px) { .hs-review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 390px) { .hs-review-grid { grid-template-columns: 1fr; } }

/* HR / RTW support workflow */
.hr-support-panel,
.hr-privacy-guidance {
  margin-top: 14px;
  border-left: 4px solid rgba(180, 83, 9, .30);
}
.hr-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.hr-support-grid button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.hr-support-grid strong { font-size: 2rem; letter-spacing: -.08em; line-height: 1; }
.hr-support-grid span { color: var(--slate-500); font-weight: 800; font-size: .82rem; }
.hr-privacy-guidance ul { padding-left: 20px; }
.hr-privacy-guidance li { margin: 7px 0; color: var(--slate-600); line-height: 1.42; }
@media (max-width: 760px) { .hr-support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 390px) { .hr-support-grid { grid-template-columns: 1fr; } }

/* Report lifecycle workflow */
.report-lifecycle-panel {
  border-left: 4px solid rgba(15, 118, 110, .34);
}
.report-lifecycle-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.report-lifecycle-actions button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.report-lifecycle-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}
.report-lifecycle-actions strong { letter-spacing: -.035em; }
.report-lifecycle-actions small { color: var(--slate-500); font-weight: 700; line-height: 1.34; }
@media (max-width: 760px) {
  .report-lifecycle-actions { grid-template-columns: 1fr; }
}

/* Corrective action workflow polish */
.action-detail-hero,
.action-progress-panel {
  border-left: 4px solid rgba(15, 118, 110, .34);
}
.action-summary .metric-card {
  min-height: 110px;
}
.action-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.action-progress-grid button {
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--slate-900);
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.action-progress-grid strong { letter-spacing: -.035em; }
.action-progress-grid small { color: var(--slate-500); font-weight: 700; line-height: 1.34; }
@media (max-width: 760px) {
  .action-progress-grid { grid-template-columns: 1fr; }
}

/* Safety inspection workflow */
.inspection-result {
  margin-top: 14px;
  border-left: 4px solid rgba(15, 118, 110, .34);
}
.inspection-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 14px;
}
.compact-list .item {
  padding: 12px;
}
.inspection-template strong {
  letter-spacing: -.025em;
}
@media (max-width: 760px) {
  .inspection-groups { grid-template-columns: 1fr; }
}

/* JHSC workflow polish */
.agenda-group {
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 12px;
  margin-bottom: 12px;
}
.agenda-group .agenda-list {
  margin-top: 8px;
}
.agenda-item {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  margin-top: 8px;
}
.agenda-item p { margin: 7px 0; }
@media (max-width: 760px) {
  .agenda-item .actions { grid-template-columns: 1fr; }
}

/* Employer-facing polish */
.audit-ready-card {
  border-left: 4px solid rgba(37, 99, 235, .28);
}
.audit-ready-card h3 {
  letter-spacing: -.045em;
}
.audit-ready-card p {
  color: var(--slate-600);
  font-weight: 600;
  line-height: 1.55;
}

/* Role workflow hierarchy */
.role-spine {
  margin-top: 14px;
  border-left: 4px solid rgba(15, 118, 110, .30);
}
.role-spine .signal-flow {
  margin: 10px 0;
}
.role-spine p {
  color: var(--slate-600);
  font-weight: 700;
  margin-bottom: 0;
}

/* Visual hierarchy and card reduction */
.compact-panel {
  padding: 18px 20px;
}
.compact-panel h2 {
  margin: 6px 0 4px;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  letter-spacing: -.05em;
}
.compact-panel p {
  margin: 0;
  color: var(--slate-600);
  font-weight: 600;
}
.supporting-tools {
  padding: 0;
  overflow: hidden;
}
.supporting-tools summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-weight: 800;
  color: var(--slate-900);
}
.supporting-tools summary::-webkit-details-marker { display: none; }
.supporting-tools summary::after {
  content: "Open";
  color: var(--primary-700);
  font-size: .82rem;
  font-weight: 800;
}
.supporting-tools[open] summary::after { content: "Close"; }
.supporting-tools summary small {
  display: block;
  color: var(--slate-500);
  font-weight: 700;
  margin-top: 3px;
}
.supporting-tools > .admin-tool-list,
.supporting-tools > .more-grid {
  padding: 0 16px 16px;
}
.role-spine {
  padding: 14px 16px;
  box-shadow: none;
  background: rgba(255,255,255,.82);
}
.role-spine h3 { font-size: 1.05rem; margin: 2px 0; }
.role-spine .signal-flow { margin: 8px 0; }
.role-spine .signal-flow span { padding: 6px 9px; font-size: .76rem; }
.home-visual { min-height: 230px; }
.home-visual img { min-height: 230px; }
@media (max-width: 760px) {
  .compact-panel { padding: 16px; }
  .supporting-tools summary { align-items: flex-start; }
  .home-visual { min-height: 200px; }
  .home-visual img { min-height: 200px; }
}

/* Actionable empty states */
.empty-action {
  text-align: left;
  display: grid;
  gap: 8px;
}
.empty-action h3 {
  margin: 0;
  color: var(--slate-900);
  font-size: 1.08rem;
  letter-spacing: -.035em;
}
.empty-action p {
  margin: 0;
  color: var(--slate-600);
  font-weight: 600;
  line-height: 1.45;
}
.empty-action .actions {
  margin-top: 6px;
}

/* Mobile polish pass: touch targets, spacing, tables, and notices */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
button, a, input, select, textarea {
  -webkit-tap-highlight-color: rgba(15, 118, 110, .14);
}
@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 20% -8%, rgba(15,118,110,.10), transparent 30%),
      linear-gradient(180deg, #fbfcfd, #f3f6fa);
  }
  .topbar {
    position: sticky;
    top: 0;
    min-height: 64px;
    padding: calc(10px + var(--safe-top)) 12px 10px;
    gap: 8px;
  }
  .brand {
    gap: 9px;
    min-width: 0;
  }
  .brand strong {
    font-size: clamp(.95rem, 4.1vw, 1.15rem);
    white-space: nowrap;
  }
  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: .78rem;
    flex: 0 0 auto;
  }
  .mobile-only {
    min-height: 44px;
    padding: 8px 13px;
    font-size: .92rem;
  }
  .layout {
    padding: 12px 10px calc(24px + var(--safe-bottom));
    gap: 12px;
  }
  .content {
    padding-bottom: calc(44px + var(--safe-bottom));
  }
  .sidebar {
    top: calc(72px + var(--safe-top)) !important;
    max-height: min(74dvh, calc(100dvh - 96px - var(--safe-top))) !important;
    border-radius: 22px !important;
  }
  .page-header {
    margin-bottom: 12px;
    padding-top: 2px;
  }
  .page-header h1 {
    font-size: clamp(1.85rem, 9.5vw, 2.55rem) !important;
    line-height: 1.02;
    letter-spacing: -.065em;
  }
  .page-header p {
    font-size: clamp(.98rem, 4.2vw, 1.08rem) !important;
    line-height: 1.48;
    margin-top: 8px;
  }
  .card, .panel, .metric-card, .item {
    border-radius: 22px;
  }
  .card, .panel {
    padding: 16px;
  }
  .hero, .value-hero, .compact-hero, .account-hero, .about-hero {
    padding: 18px;
    border-radius: 24px;
  }
  .hero h2, .value-hero h2, .compact-hero h2, .account-hero h2, .about-hero h2 {
    font-size: clamp(1.55rem, 8vw, 2.2rem);
    line-height: 1.06;
  }
  .grid-2, .grid-3, .value-grid, .admin-snapshot, .admin-action-strip, .command-grid, .card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .metric-card {
    min-height: auto;
    padding: 13px 14px;
  }
  .metric-value {
    font-size: clamp(1.7rem, 10vw, 2.45rem);
  }
  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px;
  }
  .actions > *, .actions button, .actions a, .actions label,
  .primary, .secondary, .danger, .ghost, .admin-action, .command-card, .tool-card, .quick-card {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }
  input, select, textarea {
    min-height: 48px;
    font-size: 16px;
  }
  textarea {
    min-height: 120px;
  }
  .field label {
    font-size: .92rem;
    line-height: 1.25;
  }
  .today-strip {
    grid-template-columns: 1fr 1fr !important;
  }
  .today-strip button {
    min-height: 74px;
  }
  
  .table-wrap {
    border-radius: 18px;
    overflow: hidden;
  }
  table td {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 8px;
    align-items: start;
  }
  table td::before {
    font-size: .72rem;
    line-height: 1.25;
  }
  .toast {
    top: calc(78px + var(--safe-top)) !important;
    bottom: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 520px;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: .96rem;
    transform: translate(-50%, -16px);
  }
  .toast.show {
    transform: translate(-50%, 0);
  }
  .landing-photo, .home-visual {
    min-height: 190px !important;
  }
  .landing-photo img, .home-visual img {
    min-height: 190px !important;
  }
  .landing-photo-caption, .home-visual-copy {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
  .landing-photo-caption p, .home-visual-copy p {
    display: none;
  }
}
@media (max-width: 390px) {
  .today-strip { grid-template-columns: 1fr !important; }
  .brand strong { font-size: .92rem; }
  .page-header h1 { font-size: clamp(1.65rem, 10vw, 2.2rem) !important; }
}

/* Worker rights guide */
.worker-rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}
.worker-right-card {
  border-left: 4px solid rgba(15,118,110,.32);
}
.worker-right-card h3 {
  margin: 8px 0 6px;
  letter-spacing: -.045em;
}
.worker-right-card p {
  color: var(--slate-600);
  font-weight: 600;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .worker-rights-grid { grid-template-columns: 1fr; }
}

/* Public Phase 1 & 2: Home, Hero, and Workflow Polish */
.public-home-hero { align-items: stretch; }
.public-value-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(20, 184, 166, .28);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  background:
    radial-gradient(circle at 85% 12%, rgba(93, 189, 81, .28), transparent 32%),
    radial-gradient(circle at 12% 90%, rgba(15, 36, 89, .45), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, .15), transparent 45%),
    linear-gradient(135deg, #081643 0%, #0f2459 38%, #115e59 78%, #059669 100%);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}
.public-value-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  border: 34px solid rgba(255,255,255,.08);
}
.public-value-hero > * { position: relative; z-index: 1; }
.public-value-hero h2 {
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
  color: #ffffff;
  margin: 12px 0 10px;
}
.public-value-hero p {
  color: rgba(255, 255, 255, .88);
  font-size: 1.02rem;
  line-height: 1.52;
  margin: 0;
  max-width: 580px;
}
.public-workflow-strip,
.public-mini-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 14px;
}
.public-workflow-strip span,
.public-mini-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  padding: 7px 13px;
  font-size: .80rem;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.public-workflow-strip span:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.45);
}
.public-value-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.public-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.public-outcome-card {
  min-height: 136px;
  border: 1px solid rgba(15,118,110,.16);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.07), transparent 46%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.public-outcome-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
  border-color: rgba(15, 118, 110, .32);
}
.public-outcome-card span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  background: #0f172a;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.public-outcome-card p {
  margin: 12px 0 0;
  color: var(--slate-600);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.48;
}
.public-showcase-card {
  border: 1px solid rgba(37,99,235,.16);
  border-radius: var(--radius-lg);
  padding: 22px;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 38%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.public-showcase-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.public-showcase-card h3,
.public-role-card h3 { letter-spacing: -.035em; font-weight: 700; }
.public-showcase-card .public-mini-flow span {
  color: var(--primary-800);
  background: #f0fdfa;
  border-color: rgba(15,118,110,.22);
}
.public-role-card {
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.public-role-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.public-role-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.public-role-list > div {
  padding: 12px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--slate-50);
  transition: background .12s ease, border-color .12s ease;
}
.public-role-list > div:hover {
  background: #ffffff;
  border-color: var(--slate-300);
}
.public-role-list strong { display: block; color: var(--slate-900); font-weight: 700; }
.public-role-list small { display: block; margin-top: 4px; color: var(--slate-600); font-weight: 600; line-height: 1.38; }
.public-landing-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15,118,110,.20);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .10);
}
.public-landing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 980px) {
  .public-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .topbar { min-height: 66px; align-items: center; }
  .brand img.brand-icon { width: 42px; height: 42px; border-radius: 14px; }
  .brand strong { font-size: .98rem; }
  .public-outcome-grid { grid-template-columns: 1fr; }
  .public-workflow-strip span,
  .public-mini-flow span { flex: 1 1 auto; justify-content: center; }
}

/* Public Phase 2 & 3: About Us and Employer Value polish */
.public-about-hero,
.public-employer-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(20,184,166,.24);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
}
.public-about-hero::after,
.public-employer-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -80px;
  border-radius: 999px;
  background: rgba(94,234,212,.13);
  border: 32px solid rgba(255,255,255,.08);
}
.public-about-hero > *,
.public-employer-hero > * { position: relative; z-index: 1; }
.public-about-hero h2,
.public-employer-hero h2 {
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.public-principles-grid,
.public-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.public-principle-card,
.public-workflow-card,
.public-about-card,
.public-employer-card {
  border: 1px solid rgba(15,118,110,.14);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.07), transparent 42%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.public-principle-card:hover,
.public-workflow-card:hover,
.public-about-card:hover,
.public-employer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
  border-color: rgba(15, 118, 110, .32);
}
.public-principle-card span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  background: #0f172a;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.public-principle-card p,
.public-about-card p,
.public-employer-card p,
.public-workflow-card p {
  color: var(--slate-600);
  font-weight: 600;
  line-height: 1.48;
}
.public-about-card.accent,
.public-employer-card.accent,
.public-review-card {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.09), transparent 38%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-color: rgba(37,99,235,.18);
}
.public-about-card h3,
.public-employer-card h3,
.public-review-card h3,
.public-workflow-card h3 {
  letter-spacing: -.035em;
  font-weight: 700;
}
.public-workflow-card {
  display: grid;
  gap: 8px;
  align-content: start;
}
.public-workflow-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-700);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(15, 118, 110, .25);
}
.public-workflow-card h3 { margin: 4px 0 0; }
.public-workflow-card p { margin: 0; }
.public-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.public-record-grid > div {
  padding: 12px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: #ffffff;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.public-record-grid > div:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
  transform: translateY(-1px);
}
.public-record-grid strong { display: block; color: var(--slate-900); font-weight: 700; }
.public-record-grid small { display: block; margin-top: 4px; color: var(--slate-600); font-weight: 600; line-height: 1.38; }
@media (max-width: 980px) {
  .public-principles-grid,
  .public-workflow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .public-record-grid { grid-template-columns: 1fr; }
}

/* Public Phase 3: Worker Rights and Privacy & Trust polish */
.worker-rights-hero,
.privacy-public-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(20,184,166,.22);
}
.worker-rights-hero::after,
.privacy-public-hero::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -92px;
  width: 250px;
  height: 250px;
  border-radius: 999px;
  background: rgba(94,234,212,.13);
  border: 30px solid rgba(255,255,255,.08);
}
.worker-rights-hero > *,
.privacy-public-hero > * { position: relative; z-index: 1; }
.worker-rights-grid.polished,
.privacy-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.worker-right-card.polished,
.worker-right-path,
.worker-responsibilities,
.public-trust-card,
.privacy-trust-card,
.privacy-limit-card {
  border-color: rgba(15,118,110,.13);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.08), transparent 42%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.worker-right-card.polished h3,
.worker-right-path h3,
.worker-responsibilities h3,
.public-trust-card h3,
.privacy-limit-card h3 {
  letter-spacing: -.045em;
}
.worker-right-card.polished p,
.public-trust-card p,
.privacy-limit-card p,
.privacy-trust-card p {
  color: var(--slate-600);
  font-weight: 700;
  line-height: 1.48;
}
.worker-right-path ol,
.worker-responsibilities ul { padding-left: 20px; }
.worker-right-path li,
.worker-responsibilities li { margin: 8px 0; color: var(--slate-600); line-height: 1.42; font-weight: 600; }
.public-trust-card.accent,
.privacy-limit-card {
  border-color: rgba(37,99,235,.16);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 38%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.privacy-hero-grid { align-items: stretch; }
.privacy-trust-card span {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 10px;
  background: #0f172a;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}
@media (max-width: 1080px) {
  .worker-rights-grid.polished,
  .privacy-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .worker-rights-grid.polished,
  .privacy-trust-grid { grid-template-columns: 1fr; }
}

/* Public Phase 4: Need Help Now and account access polish */
.need-help-hero-grid { align-items: stretch; }
.need-help-critical,
.need-help-urgent,
.public-account-form,
.public-access-card,
.public-account-note {
  position: relative;
  overflow: hidden;
}
.need-help-critical {
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(248,113,113,.25), transparent 38%),
    linear-gradient(135deg, #7f1d1d, #991b1b 62%, #450a0a);
  color: #ffffff;
}
.need-help-critical h2,
.need-help-critical p { color: #ffffff; }
.need-help-critical::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  border: 30px solid rgba(255,255,255,.10);
}
.need-help-critical > * { position: relative; z-index: 1; }
.need-help-urgent {
  border-color: rgba(180,83,9,.18);
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.13), transparent 40%),
    linear-gradient(180deg, #ffffff, #fff7ed);
}
.need-help-urgent h3,
.public-access-card h3 { letter-spacing: -.045em; }
.need-help-urgent p,
.public-account-note p,
.public-access-list small { color: var(--slate-600); font-weight: 700; line-height: 1.46; }
.need-help-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.need-help-steps .card {
  border-color: rgba(15,118,110,.13);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.need-help-steps span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--red-900);
  color: #ffffff;
  font-weight: 800;
}
.need-help-steps h3 { margin: 10px 0 4px; letter-spacing: -.04em; }
.need-help-steps p { margin: 0; color: var(--slate-600); font-weight: 700; line-height: 1.45; }
.public-account-grid { align-items: start; }
.public-account-form {
  border-color: rgba(15,118,110,.16);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.09), transparent 42%),
    #ffffff;
}
.public-access-card {
  border-color: rgba(37,99,235,.15);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 38%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.public-access-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.public-access-list > div {
  padding: 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: #ffffff;
}
.public-access-list strong { display: block; color: var(--slate-900); }
.public-access-list small { display: block; margin-top: 4px; }
.public-account-note {
  border-color: rgba(15,118,110,.13);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
@media (max-width: 900px) {
  .need-help-steps { grid-template-columns: 1fr; }
}

/* Officer/developer correction: high-contrast urgent help panel */
.card.need-help-critical {
  background:
    radial-gradient(circle at top right, rgba(248,113,113,.18), transparent 38%),
    linear-gradient(135deg, #7f1d1d 0%, #991b1b 58%, #450a0a 100%);
  color: #ffffff;
  border: 1px solid rgba(254,202,202,.34);
  box-shadow: 0 24px 70px rgba(127, 29, 29, .24);
}
.card.need-help-critical h2,
.card.need-help-critical p,
.card.need-help-critical strong {
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.card.need-help-critical .ghost,
.card.need-help-critical .secondary {
  background: rgba(255,255,255,.96);
  color: #7f1d1d;
  border-color: rgba(255,255,255,.72);
}
.card.need-help-critical .danger {
  background: #ffffff;
  color: #7f1d1d;
  border-color: rgba(255,255,255,.72);
}
.card.need-help-critical .pill.critical {
  background: #ffffff;
  color: #7f1d1d;
  border-color: rgba(255,255,255,.72);
}

/* Public priority 1: sharper Home page hierarchy */
.public-value-hero h2 {
  max-width: 760px;
  letter-spacing: -.075em;
}
.public-value-hero p {
  max-width: 720px;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}
.public-home-hero .actions {
  margin-top: 14px;
}
.public-outcome-card {
  min-height: 116px;
}
@media (max-width: 680px) {
  .public-value-hero h2 {
    font-size: clamp(2.25rem, 11vw, 3.1rem);
    line-height: .98;
  }
  .public-value-hero p {
    font-size: 1.02rem;
  }
}

/* Public priority 2: sharper employer pain-point visual section */
.public-pain-panel {
  border-color: rgba(180,83,9,.16);
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.public-pain-panel .item-head p {
  margin: 6px 0 0;
  color: var(--slate-600);
  font-weight: 700;
  max-width: 760px;
}
.public-pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}
.public-pain-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}
.public-pain-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #0f172a, #134e4a);
  color: #ffffff;
  font-weight: 800;
}
.public-pain-card h3 {
  margin: 0 0 6px;
  letter-spacing: -.04em;
}
.public-pain-card p {
  margin: 6px 0 0;
  color: var(--slate-600);
  font-size: .94rem;
  line-height: 1.42;
}
.public-pain-card p strong {
  color: var(--slate-800);
}
.public-employer-proof {
  border-color: rgba(15,118,110,.12);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.public-employer-proof h3 { letter-spacing: -.045em; }
@media (max-width: 560px) {
  .public-pain-card { grid-template-columns: 1fr; }
}

/* Public priority 4: reduce visual heaviness on mobile */
@media (max-width: 680px) {
  .page-header {
    gap: 12px;
    margin-bottom: 12px;
  }
  .page-header h1 {
    font-size: clamp(1.95rem, 9vw, 2.45rem) !important;
    line-height: 1.03;
    letter-spacing: -.065em;
  }
  .page-header p {
    font-size: .96rem;
    line-height: 1.42;
  }
  .public-value-hero,
  .public-about-hero,
  .public-employer-hero,
  .worker-rights-hero,
  .privacy-public-hero,
  .card.need-help-critical,
  .need-help-urgent,
  .public-account-form,
  .public-access-card {
    border-radius: 20px !important;
    padding: 18px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
  }
  .public-value-hero h2,
  .public-about-hero h2,
  .public-employer-hero h2,
  .worker-rights-hero h2,
  .privacy-public-hero h2,
  .card.need-help-critical h2 {
    font-size: clamp(1.9rem, 8.8vw, 2.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.058em !important;
  }
  .public-value-hero p,
  .public-about-hero p,
  .public-employer-hero p,
  .worker-rights-hero p,
  .privacy-public-hero p,
  .card.need-help-critical p,
  .need-help-urgent p {
    font-size: .98rem !important;
    line-height: 1.43 !important;
  }
  .public-value-hero::after,
  .public-about-hero::after,
  .public-employer-hero::after,
  .worker-rights-hero::after,
  .privacy-public-hero::after,
  .need-help-critical::after {
    display: none !important;
  }
  .public-workflow-strip,
  .public-mini-flow {
    gap: 6px;
    margin: 12px 0 8px;
  }
  .public-workflow-strip span,
  .public-mini-flow span {
    flex: 0 1 auto;
    min-height: 30px;
    padding: 6px 8px;
    font-size: .71rem;
  }
  .public-outcome-grid,
  .public-principles-grid,
  .public-workflow-grid,
  .worker-rights-grid.polished,
  .privacy-trust-grid,
  .need-help-steps {
    gap: 10px;
  }
  .public-outcome-card,
  .public-principle-card,
  .public-workflow-card,
  .worker-right-card.polished,
  .worker-right-path,
  .worker-responsibilities,
  .public-trust-card,
  .privacy-trust-card,
  .privacy-limit-card,
  .public-pain-card,
  .public-account-note,
  .public-employer-proof {
    min-height: auto !important;
    padding: 13px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  .public-outcome-card span,
  .public-principle-card span,
  .privacy-trust-card span,
  .public-pain-card > span,
  .need-help-steps span {
    min-height: 30px;
    width: auto;
    height: auto;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: .72rem;
  }
  .public-pain-card {
    gap: 8px;
  }
  .public-pain-card p,
  .public-role-list small,
  .public-record-grid small,
  .public-access-list small {
    font-size: .88rem;
    line-height: 1.34;
  }
  .public-role-list > div,
  .public-record-grid > div,
  .public-access-list > div {
    padding: 10px;
    border-radius: 12px;
  }
  .landing-photo,
  .home-visual {
    min-height: 220px;
  }
  .landing-photo img,
  .home-visual img {
    min-height: 220px;
  }
  .landing-photo-caption,
  .home-visual-copy {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
    border-radius: 16px;
  }
}

/* Public Experience & Brand Polish */
#authBadge {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
  user-select: none;
}
#authBadge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
#authBadge:active {
  transform: translateY(0);
}
.public-workflow-strip span {
  position: relative;
  transition: transform .12s ease, background-color .15s ease;
}
.public-workflow-strip span:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
}
.public-outcome-card {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.public-outcome-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  border-color: rgba(15, 118, 110, .25);
}
.worker-right-card.polished {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.worker-right-card.polished:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  border-color: rgba(15, 118, 110, .25);
}
.public-pain-card {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.public-pain-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  border-color: rgba(15, 118, 110, .25);
}
.public-showcase-card,
.public-role-card {
  transition: transform .14s ease, box-shadow .14s ease;
}
.public-showcase-card:hover,
.public-role-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
.version-panel {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.version-panel:hover {
  border-left-color: rgba(15, 118, 110, .55);
}

/* Signed-in Worker & Manager Experience Polish */
.worker-report-card {
  border: 1px solid rgba(15, 23, 42, .09);
  border-left: 4px solid var(--primary-600);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.worker-report-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(8, 22, 67, .08);
  border-color: rgba(15, 118, 110, .30);
}
.manager-triage-grid button {
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.manager-triage-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, .35);
  box-shadow: 0 8px 22px rgba(8, 22, 67, .08);
}
.closure-gate {
  border-left: 4px solid #10b981;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}


/* ==========================================================================
   UNIVERSAL LOGO-ALIGNED DESIGN SYSTEM (Full App Synchronization)
   Applies Midnight Navy (#081643) & Emerald Arrow (#059669/#10b981) Globally
   ========================================================================== */

/* 1. All Hero Banners Across ALL Pages (Home, About, Employer, Rights, Privacy, Account, Today, Admin, etc.) */
.hero,
.compact-hero,
.value-hero,
.about-hero,
.public-about-hero,
.public-employer-hero,
.worker-rights-hero,
.privacy-public-hero,
.account-hero,
.hazard-topic-hero,
.home-visual,
.admin-focus {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl) !important;
  padding: 26px 24px !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, .26) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(93, 189, 81, .28), transparent 32%),
    radial-gradient(circle at 12% 90%, rgba(15, 36, 89, .45), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, .15), transparent 45%),
    linear-gradient(135deg, #081643 0%, #0f2459 38%, #115e59 78%, #059669 100%) !important;
  box-shadow: 0 16px 40px rgba(8, 22, 67, .14) !important;
}

.hero::after,
.compact-hero::after,
.value-hero::after,
.about-hero::after,
.public-about-hero::after,
.public-employer-hero::after,
.worker-rights-hero::after,
.privacy-public-hero::after,
.account-hero::after,
.hazard-topic-hero::after,
.admin-focus::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -100px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  border: 42px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}

.hero > *,
.compact-hero > *,
.value-hero > *,
.about-hero > *,
.public-about-hero > *,
.public-employer-hero > *,
.worker-rights-hero > *,
.privacy-public-hero > *,
.account-hero > *,
.hazard-topic-hero > *,
.admin-focus > * {
  position: relative;
  z-index: 1;
}

.hero h2, .hero h3,
.compact-hero h2, .compact-hero h3,
.value-hero h2, .value-hero h3,
.about-hero h2, .about-hero h3,
.public-about-hero h2, .public-about-hero h3,
.public-employer-hero h2, .public-employer-hero h3,
.worker-rights-hero h2, .worker-rights-hero h3,
.privacy-public-hero h2, .privacy-public-hero h3,
.account-hero h2, .account-hero h3,
.hazard-topic-hero h2, .hazard-topic-hero h3,
.admin-focus h2, .admin-focus h3 {
  color: #ffffff !important;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 10px 0 8px;
}

.hero p,
.compact-hero p,
.value-hero p,
.about-hero p,
.public-about-hero p,
.public-employer-hero p,
.worker-rights-hero p,
.privacy-public-hero p,
.account-hero p,
.hazard-topic-hero p,
.admin-focus p {
  color: rgba(255, 255, 255, .90) !important;
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

.hero .pill,
.compact-hero .pill,
.value-hero .pill,
.about-hero .pill,
.public-about-hero .pill,
.public-employer-hero .pill,
.worker-rights-hero .pill,
.privacy-public-hero .pill,
.account-hero .pill,
.hazard-topic-hero .pill,
.admin-focus .pill {
  background: rgba(255, 255, 255, .16) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .30) !important;
  backdrop-filter: blur(8px);
}

/* 2. Universal Primary & Secondary Button Harmony */
.primary,
button.primary,
.actions .primary,
.today-actions .primary {
  background: linear-gradient(135deg, #0f766e 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, .35) !important;
  box-shadow: 0 8px 20px rgba(15, 118, 110, .24) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.primary:hover,
button.primary:hover,
.actions .primary:hover,
.today-actions .primary:hover {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, #115e59 0%, #047857 100%) !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .32) !important;
}

.secondary,
button.secondary,
.actions .secondary,
.today-actions .secondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .03) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}

.secondary:hover,
button.secondary:hover,
.actions .secondary:hover,
.today-actions .secondary:hover {
  transform: translateY(-1px) !important;
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
}

/* 3. Universal Metric & KPI Card Top Glow */
.metric,
.metric-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .09) !important;
  border-top: 3.5px solid #0f766e !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

.metric:hover,
.metric-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(8, 22, 67, .09) !important;
  border-top-color: #10b981 !important;
}

.metric-label {
  color: var(--slate-500) !important;
  font-weight: 700 !important;
  font-size: .74rem !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.metric-value {
  color: #081643 !important;
  font-weight: 800 !important;
  font-size: 2.3rem !important;
  line-height: .95 !important;
  letter-spacing: -.03em !important;
  margin-top: 8px !important;
}

/* 4. Universal Navigation & Sidebar Brand Palette */
.sidebar {
  background: linear-gradient(180deg, #081643 0%, #0f172a 100%) !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  box-shadow: 0 20px 50px rgba(8, 22, 67, .18) !important;
}

.nav-btn.active {
  background: rgba(16, 185, 129, .16) !important;
  color: #ffffff !important;
  border-color: rgba(16, 185, 129, .32) !important;
}

.nav-btn.active .nav-marker {
  background: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, .6) !important;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
}

/* 5. Universal Card Hover & Surface Polish */
.card,
.panel,
.quick-card,
.public-outcome-card,
.public-principle-card,
.public-pain-card,
.public-about-card,
.public-employer-card,
.public-trust-card,
.privacy-trust-card,
.worker-right-card,
.worker-report-card,
.hazard-card,
.item,
.notification-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .035);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.card:hover,
.panel:hover,
.quick-card:hover,
.public-outcome-card:hover,
.public-principle-card:hover,
.public-pain-card:hover,
.public-about-card:hover,
.public-employer-card:hover,
.public-trust-card:hover,
.privacy-trust-card:hover,
.worker-right-card:hover,
.worker-report-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8, 22, 67, .07);
  border-color: rgba(15, 118, 110, .28);
}

/* 6. Universal Action Strips (Today, Admin, Manager) */
.today-strip button,
.admin-action-strip button,
.manager-triage-grid button {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

.today-strip button:hover,
.admin-action-strip button:hover,
.manager-triage-grid button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(15, 118, 110, .35) !important;
  box-shadow: 0 8px 22px rgba(8, 22, 67, .08) !important;
}

.today-strip strong,
.admin-action strong,
.manager-triage-grid strong {
  color: #081643 !important;
  font-weight: 800 !important;
}


/* Worker Status Progress Timeline */
.worker-timeline-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 8px;
  padding: 8px 12px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow-x: auto;
}
.worker-timeline-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--slate-400);
  white-space: nowrap;
}
.worker-timeline-step strong {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--slate-200);
  color: var(--slate-600);
  font-size: .68rem;
  font-weight: 800;
}
.worker-timeline-step.completed {
  color: var(--slate-700);
}
.worker-timeline-step.completed strong {
  background: #0f766e;
  color: #ffffff;
}
.worker-timeline-step.current {
  color: #0f766e;
  font-weight: 700;
}
.worker-timeline-step.current strong {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, .25);
}
.worker-timeline-arrow {
  color: var(--slate-300);
  font-size: .75rem;
}


/* Worker Today Dashboard Refinement (Step 1) */
.worker-quick-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.worker-report-btn {
  width: 100%;
  min-height: 50px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  justify-content: center;
}
.worker-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.worker-tools-grid button {
  min-height: 44px;
  padding: 8px 10px;
  font-size: .84rem;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.worker-active-preview {
  border-radius: var(--radius-lg);
}
@media (max-width: 480px) {
  .worker-tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .worker-tools-grid button {
    font-size: .78rem;
    padding: 6px 8px;
  }
}


/* Worker Intake Form Step Sections (Screen B) */
.report-intake-form {
  padding: 22px !important;
}
.form-step-block {
  padding: 16px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--slate-25, #fbfcfd);
  transition: border-color .15s ease;
}
.form-step-block:hover {
  border-color: rgba(15, 118, 110, .28);
}
.form-step-block .item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.form-step-block .item-head strong {
  font-size: .95rem;
  color: var(--slate-900);
  font-weight: 700;
}
.report-starter-btn {
  transition: transform .12s ease, border-color .14s ease, background .14s ease;
}
.report-starter-btn:hover {
  transform: translateY(-1px);
  border-color: #0f766e !important;
  background: #f0fdfa !important;
  color: #0f766e !important;
}


/* Screen C: Report Confirmation Polish */
.confirmation-main-card {
  border-left: 4px solid #10b981 !important;
}
.confirmation-steps-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.confirmation-step-item {
  padding: 12px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--slate-50);
}
.confirmation-step-item strong {
  display: block;
  color: var(--slate-900);
  font-size: .92rem;
  font-weight: 700;
}
.confirmation-step-item small {
  display: block;
  margin-top: 3px;
  color: var(--slate-600);
  line-height: 1.4;
}


/* Worker Report Card Mobile Optimization */
.worker-card-header {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}
.worker-card-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}
.worker-card-header h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  line-height: 1.30;
  color: var(--slate-900);
  word-break: break-word;
}
.worker-card-help {
  margin: 8px 0;
  color: var(--slate-600);
  font-size: .92rem;
  line-height: 1.45;
}
.worker-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 12px;
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--slate-50);
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  font-size: .84rem;
  color: var(--slate-700);
}
.worker-card-meta strong {
  color: var(--slate-900);
}
.worker-next-alert {
  margin: 10px 0 12px;
  padding: 10px 12px !important;
  font-size: .86rem !important;
  line-height: 1.42 !important;
  word-break: break-word;
}
.worker-timeline-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 10px 0 8px;
  padding: 7px 10px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}
.worker-timeline-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .74rem;
  color: var(--slate-400);
  white-space: nowrap;
  flex: 0 1 auto;
}
.worker-timeline-step strong {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--slate-200);
  color: var(--slate-600);
  font-size: .66rem;
  font-weight: 800;
}
.worker-timeline-step small {
  font-size: .72rem;
  font-weight: 600;
}
.worker-timeline-step.completed {
  color: var(--slate-700);
}
.worker-timeline-step.completed strong {
  background: #0f766e;
  color: #ffffff;
}
.worker-timeline-step.current {
  color: #0f766e;
  font-weight: 700;
}
.worker-timeline-step.current strong {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, .25);
}
.worker-timeline-arrow {
  color: var(--slate-300);
  font-size: .68rem;
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .worker-timeline-bar {
    padding: 6px 6px;
    gap: 2px;
  }
  .worker-timeline-step {
    gap: 3px;
    font-size: .68rem;
  }
  .worker-timeline-step strong {
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: .60rem;
  }
  .worker-timeline-step small {
    font-size: .66rem;
  }
  .worker-timeline-arrow {
    font-size: .60rem;
  }
}


/* Worker 'My Status' Filter Tabs (Phase W2) */
.worker-filter-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.worker-filter-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: #ffffff;
  color: var(--slate-700);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s ease;
}
.worker-filter-tab:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
}
.worker-filter-tab.active {
  background: #081643 !important;
  color: #ffffff !important;
  border-color: #081643 !important;
  box-shadow: 0 4px 12px rgba(8, 22, 67, .16);
}


/* Worker Step W3: Copy ID and Verification Section */
.copy-id-btn {
  padding: 3px 8px !important;
  min-height: 26px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin-left: 6px;
  vertical-align: middle;
}
.worker-feedback-section {
  border-left: 4px solid #10b981 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important;
}



/* Clean Consolidated Admin Toolbar & Tab Rail (Phase 1 Fix) */
.admin-toolbar {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--primary-600) !important;
  border-radius: var(--radius-xl) !important;
  padding: 16px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.admin-toolbar .item-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
}
.admin-toolbar .item-head h3 {
  margin: 2px 0 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
}
.admin-tab-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 8px !important;
  padding: 4px 2px 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}
.admin-tab-bar::-webkit-scrollbar {
  height: 4px;
}
.admin-tab-bar::-webkit-scrollbar-thumb {
  background: rgba(15, 118, 110, .25);
  border-radius: 999px;
}
.admin-tab-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  border: 1px solid var(--slate-200) !important;
  background: #ffffff !important;
  color: var(--slate-700) !important;
  transition: all .14s ease !important;
}
.admin-tab-btn:hover {
  background: var(--slate-50) !important;
  border-color: var(--slate-300) !important;
  transform: translateY(-1px) !important;
}
.admin-tab-btn.active,
.admin-tab-btn.primary {
  background: #081643 !important;
  color: #ffffff !important;
  border-color: #081643 !important;
  box-shadow: 0 4px 12px rgba(8, 22, 67, .18) !important;
  font-weight: 700 !important;
}
@media (max-width: 760px) {
  .admin-toolbar {
    padding: 12px 14px !important;
  }
  .admin-tab-bar {
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .admin-tab-btn {
    padding: 7px 13px !important;
    font-size: .78rem !important;
  }
}


/* Admin Phase 2: Access Request Cards */
.access-request-card {
  border-left: 4px solid var(--primary-600) !important;
  background: #ffffff !important;
  padding: 16px 18px !important;
  border-radius: var(--radius-lg) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.access-request-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8, 22, 67, .08);
  border-color: rgba(15, 118, 110, .30);
}


/* Admin Phase 2 - Panel 2: User Directory & Invitations */
.user-member-card {
  border-left: 4px solid var(--primary-600) !important;
  background: #ffffff !important;
  padding: 16px 18px !important;
  border-radius: var(--radius-lg) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.user-member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8, 22, 67, .08);
  border-color: rgba(15, 118, 110, .30);
}
.invitation-item-card {
  border-left: 4px solid var(--blue-600, #2563eb) !important;
  background: #ffffff !important;
  padding: 16px 18px !important;
  border-radius: var(--radius-lg) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.invitation-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8, 22, 67, .08);
  border-color: rgba(37, 99, 235, .30);
}


/* Admin Phase 2 - Panel 3: OHS Routing & Emergency Settings */
.routing-form-card {
  padding: 22px !important;
  border-left: 4px solid var(--primary-600) !important;
}
.routing-summary-card {
  border-left: 4px solid #10b981 !important;
}


/* Admin Phase 2 - Panel 4: Custom Checklist Templates */
.custom-checklist-form {
  border-left: 4px solid var(--primary-600) !important;
  padding: 20px !important;
}
.custom-template-item {
  border-left: 4px solid var(--primary-600) !important;
  background: #ffffff !important;
  padding: 14px 16px !important;
  border-radius: var(--radius-lg) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.custom-template-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(8, 22, 67, .08);
  border-color: rgba(15, 118, 110, .30);
}


/* Admin Phase 2 - Panel 5: Data Export & Audit Trail */
.admin-export-hub {
  border-left: 4px solid var(--primary-600) !important;
  padding: 20px !important;
}
.admin-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-export-grid button {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.admin-audit-card {
  border-left: 4px solid #10b981 !important;
  padding: 20px !important;
}
.admin-audit-item {
  border-left: 3px solid var(--slate-300) !important;
  background: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: .84rem;
}
@media (max-width: 560px) {
  .admin-export-grid {
    grid-template-columns: 1fr;
  }
}


/* Admin Phase 2: Action Strip & 2x2 Mobile Grid */
.admin-action-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.admin-action {
  min-height: 74px;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--slate-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.admin-action strong {
  font-size: .96rem;
  font-weight: 800;
  color: #081643;
}
.admin-action span {
  font-size: .76rem;
  color: var(--slate-600);
  font-weight: 600;
  line-height: 1.2;
}
.admin-action:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, .35);
  box-shadow: 0 8px 22px rgba(8, 22, 67, .08);
}
.admin-action.primary {
  background: linear-gradient(135deg, #0f766e 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, .35) !important;
  box-shadow: 0 8px 20px rgba(15, 118, 110, .24) !important;
}
.admin-action.primary strong {
  color: #ffffff !important;
}
.admin-action.primary span {
  color: rgba(255, 255, 255, .92) !important;
}
@media (max-width: 760px) {
  .admin-action-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-action {
    min-height: 66px;
    padding: 10px 8px;
  }
  .admin-action strong {
    font-size: .90rem;
  }
  .admin-action span {
    font-size: .72rem;
  }
}


/* Phase 3: Header Spacing & High-Contrast Typography Polish */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 4px 0 6px;
}
.page-header h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(1.85rem, 3.5vw, 2.8rem);
  letter-spacing: -.025em;
  line-height: 1.08;
  color: var(--slate-900);
  font-weight: 800;
}
.page-header p {
  margin: 6px 0 0;
  color: var(--slate-600);
  max-width: 860px;
  font-size: .96rem;
  line-height: 1.50;
  font-weight: 450;
}
.command-card small,
.tool-card p,
.hazard-chip small {
  color: var(--slate-600) !important;
  font-weight: 500 !important;
  line-height: 1.35;
}
.command-card strong,
.tool-card strong,
.hazard-chip strong {
  color: #081643 !important;
  font-weight: 700 !important;
}
.admin-action span {
  color: var(--slate-600) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.admin-action strong {
  color: #081643 !important;
  font-weight: 800 !important;
}
.admin-action.primary span {
  color: rgba(255, 255, 255, 0.94) !important;
}
.admin-action.primary strong {
  color: #ffffff !important;
}
.today-strip strong {
  color: #081643 !important;
  font-weight: 800 !important;
}
.today-strip span {
  color: var(--slate-600) !important;
  font-weight: 500 !important;
  font-size: .78rem !important;
}


/* Admin Phase D3: Supporting Tools & Mobile Snapshot Polish */
.supporting-tools {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.supporting-tools summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-weight: 700;
  color: var(--slate-900);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.supporting-tools[open] summary {
  border-bottom-color: var(--line);
  background: #f8fafc;
}
.supporting-tools summary::-webkit-details-marker { display: none; }
.supporting-tools summary small {
  color: var(--slate-500);
  font-weight: 500;
  font-size: .84rem;
}
.admin-tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 18px;
}
.admin-tool-list button {
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: #ffffff;
  min-height: 38px;
  padding: 8px 14px;
  color: #081643;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.admin-tool-list button:hover {
  border-color: #0f766e;
  background: #f0fdfa;
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .admin-snapshot {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-focus {
    grid-column: 1 / -1;
  }
}

/* Phase 2: Mobile 2x2 Metric Grid, Value Proportions, and Text Wrapping */
@media (max-width: 840px) {
  .grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

.metric-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 88px !important;
  padding: 12px 14px !important;
}

.metric-value-text {
  font-size: clamp(.84rem, 3.2vw, 1.05rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* User Email & Directory Card Text Protection */
.user-email-text,
.access-request-card .item-head strong,
.user-member-card .item-head strong,
.invitation-item-card .item-head strong {
  display: inline-block;
  max-width: 100%;
  font-size: .94rem;
  line-height: 1.35;
  color: var(--slate-900);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

.access-request-card .item-head,
.user-member-card .item-head,
.invitation-item-card .item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.access-request-card .item-head > div,
.user-member-card .item-head > div,
.invitation-item-card .item-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.access-request-card .item-head .pill,
.user-member-card .item-head .pill,
.invitation-item-card .item-head .pill {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Founder Profile Card Polish */
.public-founder-card {
  border-left: 4px solid var(--primary-700) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-radius: 20px !important;
}

.founder-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.founder-header-strip {
  display: flex;
  align-items: center;
  gap: 20px;
}

.founder-photo-wrap {
  width: 120px;
  height: 120px;
  min-width: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--primary-200, #99f6e4), 0 8px 24px rgba(15, 23, 42, .12);
  background: var(--slate-100);
}

.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.founder-identity h4 {
  color: #081643;
}

.founder-bio {
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--slate-200, #e2e8f0);
}

.founder-bio p {
  color: var(--slate-700);
  font-size: .96rem;
  line-height: 1.62;
}

.founder-connect-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Symptom Pill Buttons (No-Checkbox Modern Triage) */
.symptom-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.symptom-pill-btn {
  border-radius: 999px !important;
  min-height: 36px !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

.symptom-pill-btn.active {
  background: #081643 !important;
  color: #ffffff !important;
  border-color: #081643 !important;
  box-shadow: 0 4px 12px rgba(8, 22, 67, .18) !important;
}

/* Modern Photo Capture & Evidence Preview */
.photo-capture-box {
  border: 2px dashed rgba(15, 118, 110, .35);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: #f8fafc;
  text-align: center;
  transition: border-color .14s ease, background .14s ease;
}

.photo-capture-box:hover {
  border-color: #0f766e;
  background: #f0fdfa;
}

.photo-capture-btn {
  display: block;
  cursor: pointer;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  color: #081643;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.photo-capture-btn:hover {
  border-color: #0f766e;
  color: #0f766e;
}

.photo-capture-btn small {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  color: var(--slate-500);
}

.photo-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--slate-200);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  text-align: left;
}

.photo-preview-img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, .10);
}

.photo-preview-info {
  flex: 1 1 auto;
  min-width: 0;
}

.photo-preview-info .photo-file-name {
  display: block;
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phase 4: Mobile Ergonomics, Zero-Overflow Cards, and Touch Targets */
@media (max-width: 760px) {
  .founder-layout {
    gap: 14px;
  }
  .founder-header-strip {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .founder-photo-wrap {
    width: 104px;
    height: 104px;
    min-width: 104px;
    margin: 0 auto;
  }
  .founder-connect-strip {
    justify-content: center;
  }

  .routing-form-card,
  .routing-summary-card,
  .access-request-card,
  .workspace-diagnostic,
  .workspace-card {
    padding: 14px 14px !important;
    border-radius: 16px !important;
  }
  
  .sub-tab-bar {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .sub-tab-bar button {
    flex: 1 1 auto !important;
    min-height: 38px !important;
    font-size: .84rem !important;
    padding: 6px 12px !important;
    text-align: center !important;
  }

  .form-step-block {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid var(--line) !important;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    min-height: 44px !important;
  }
}

.anonymity-switch {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
}

.anonymity-switch input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #0f766e !important;
  cursor: pointer !important;
}

/* Pre-sign-in BC Feature Visuals */
.public-landscape-banner {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(15, 118, 110, .25) !important;
  box-shadow: 0 12px 36px rgba(8, 22, 67, .08) !important;
  background: #081643;
}

.public-landscape-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: brightness(0.92);
}

.public-landscape-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 22, 67, .88) 35%, rgba(8, 22, 67, .98) 100%);
  color: #ffffff;
}

.public-landscape-overlay h3 {
  margin: 6px 0 4px;
  color: #ffffff;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.public-landscape-overlay p {
  margin: 0;
  color: rgba(255, 255, 255, .90);
  font-size: .92rem;
  line-height: 1.45;
  max-width: 780px;
}

@media (max-width: 760px) {
  .public-landscape-banner {
    display: flex;
    flex-direction: column;
  }
  .public-landscape-img {
    height: 180px;
  }
  .public-landscape-overlay {
    position: relative;
    padding: 16px;
    background: #081643;
  }
}

.public-feature-visual {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px !important;
  border-radius: var(--radius-xl) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04) !important;
}

.public-feature-img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

.public-feature-caption h3 {
  margin: 6px 0 4px;
  color: var(--slate-900);
  font-size: 1.18rem;
  letter-spacing: -.02em;
}

.public-feature-caption p {
  margin: 0;
  color: var(--slate-600);
  font-size: .92rem;
  line-height: 1.48;
}

@media (max-width: 760px) {
  .public-feature-visual {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px !important;
  }
  .public-feature-img {
    max-height: 180px;
  }
}

/* Admin Setup Wizard Polish */
.admin-setup-wizard-card {
  border-left: 4px solid #059669 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%) !important;
}

.admin-setup-wizard-card .form-step-block {
  margin-top: 14px;
  padding: 14px 16px !important;
  border-radius: var(--radius-md) !important;
  background: #f8fafc !important;
  border: 1px solid var(--line) !important;
}

/* Auth Tab Bar & Segmented Navigation */
.auth-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--slate-200);
}

.auth-tab-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  font-size: .88rem;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.auth-tab-btn.primary {
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 118, 110, .20);
}

.auth-tab-btn.secondary {
  background: transparent !important;
  color: var(--slate-700) !important;
  box-shadow: none !important;
}

.auth-tab-btn.secondary:hover {
  background: #ffffff !important;
  color: #0f766e !important;
}

@media (max-width: 560px) {
  .auth-tab-bar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .auth-tab-btn {
    min-height: 42px;
    font-size: .82rem;
    padding: 8px 10px;
  }
}