:root {
  color-scheme: light;
  /* The "frosted glass" cards throughout this file are almost all
     rgba(255,255,255,X) panels over an ink-tinted rgba(20,40,54,X) hairline
     border/shadow - swapping just these two base triplets per-theme (instead
     of hand-converting every literal rgba() call) reskins the whole glass
     system for dark mode while preserving each element's original alpha,
     and therefore its original visual weight/hierarchy. Must come before
     anything below that references them. */
  --surface-rgb: 255, 255, 255;
  --ink-rgb: 20, 40, 54;
  --ink: #16283a;
  --muted: #5b6b78;
  --line: #e2e8ec;
  --paper: #f8fafb;
  --panel: #ffffff;
  --panel-glass: rgba(var(--surface-rgb), 0.86);
  --teal: #0f8a76;
  --teal-soft: #e1f5f0;
  --red: #d6554a;
  --amber: #e2a93b;
  --blue: #2f6da8;
  --green: #227a53;
  --shadow: 0 24px 60px rgba(var(--ink-rgb), 0.1);
  --glow: 0 0 0 1px rgba(15, 138, 118, 0.14), 0 14px 40px rgba(15, 138, 118, 0.14);
  --text-secondary: #3d4f5a;
  --input-border: #cbd5e1;
  --body-gradient-a: #fbfcfd;
  --body-gradient-b: #f2f5f6;
  /* Text/icon color on top of a saturated brand-colored fill (teal
     buttons, badges) - that fill doesn't change between themes, so this
     shouldn't either, unlike --panel which is a surface color. */
  --on-accent: #ffffff;
}

:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark !important;
  --surface-rgb: 6, 22, 28 !important;
  --ink-rgb: 248, 250, 252 !important;
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --line: rgba(255, 255, 255, 0.14) !important;
  --paper: #040d10 !important;
  --panel: #0a161c !important;
  --panel-glass: rgba(10, 22, 28, 0.92) !important;
  --teal: #14b8a6 !important;
  --teal-soft: rgba(20, 184, 166, 0.15) !important;
  --text-secondary: #cbd5e1 !important;
  --input-border: rgba(255, 255, 255, 0.2) !important;
  --body-gradient-a: #061e20 !important;
  --body-gradient-b: #02080a !important;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* "Dynamic Island" live-activity notch: a dark capsule pinned to the top
   of the viewport on every authenticated page (see active-jobs.js),
   tracking whatever batch/3D job is running server-side - and, on the
   page that actually started it, a single-image run too. Deliberately
   dark/opaque regardless of light-vs-dark theme, like the real thing, so
   it reads as a system-level overlay rather than another page card. */
.active-job-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(460px, calc(100vw - 24px));
  padding: 9px 10px 9px 14px;
  border-radius: 999px;
  background: rgba(12, 14, 18, 0.94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 44px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  cursor: pointer;
  overflow: hidden;
  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1), max-width 320ms ease;
}

.active-job-banner:not([hidden]) {
  transform: translateX(-50%) translateY(0);
  animation: islandBreathe 3.2s ease-in-out infinite;
}

.active-job-banner:hover {
  animation-play-state: paused;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 52px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

@keyframes islandBreathe {

  0%,
  100% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 44px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 0 rgba(45, 212, 191, 0);
  }

  50% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 44px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 18px 2px rgba(45, 212, 191, 0.28);
  }
}

/* Spinner ring: a conic-gradient wedge that reads as a progress ring at a
   glance without a canvas/SVG - percent is applied inline as a CSS custom
   property (--pct) from JS. Keeps spinning slowly even at a fixed percent
   so the whole thing never looks frozen/stalled. */
.active-job-banner-dot {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  --pct: 0;
  background:
    radial-gradient(circle at center, rgba(12, 14, 18, 1) 0 62%, transparent 63%),
    conic-gradient(#2dd4bf calc(var(--pct) * 1%), rgba(255, 255, 255, 0.16) 0);
  animation: islandSpin 2.4s linear infinite;
}

.active-job-banner-dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 8px 1px rgba(45, 212, 191, 0.7);
}

@keyframes islandSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.active-job-banner-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.active-job-banner-label {
  font-size: 0.78rem;
  font-weight: 750;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.active-job-banner-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  color: rgba(226, 232, 240, 0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-job-banner-percent {
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  color: #2dd4bf;
  font-variant-numeric: tabular-nums;
}

/* A trash-bin glyph, red at rest - unlike a generic "X" this reads
   unambiguously as "stop and discard", matching what it actually does
   (the run is abandoned, not paused). Sized smaller than the status dot
   on the other end so it stays a secondary action rather than competing
   with the status itself for attention. */
.active-job-banner-stop {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  margin-left: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.active-job-banner-stop svg {
  width: 13px;
  height: 13px;
  transition: transform 160ms ease;
}

.active-job-banner-stop:hover {
  background: #f87171;
  border-color: #f87171;
  color: #1a0806;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.22);
}

.active-job-banner-stop:hover svg {
  transform: scale(1.1) rotate(-6deg);
}

.active-job-banner-stop:active {
  transform: scale(0.9);
}

.active-job-banner-stop:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

.active-job-banner-stop:disabled:hover svg {
  transform: none;
}

/* Bottom-edge progress rail, filled left-to-right with real percent when
   known. Sits flush against the capsule's own rounded bottom edge. */
.active-job-banner-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.08);
}

.active-job-banner-rail-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2dd4bf, #22d3ee);
  transition: width 420ms ease;
}

@media (max-width: 640px) {
  .active-job-banner {
    left: 12px;
    right: 12px;
    top: 10px;
    transform: translateY(-140%);
    max-width: none;
    width: auto;
  }

  .active-job-banner:not([hidden]) {
    transform: translateY(0);
  }
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  /* More saturated/larger color fields than a purely flat page needs -
     deliberate, since every card on top is glass: it needs real color
     behind it to pick up when blurred, or "glass" just reads as plain
     translucent gray. */
  background:
    radial-gradient(circle at 14% 8%, rgba(47, 109, 168, 0.16), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(15, 138, 118, 0.2), transparent 34%),
    radial-gradient(circle at 78% 88%, rgba(47, 109, 168, 0.14), transparent 36%),
    radial-gradient(circle at 8% 82%, rgba(79, 224, 194, 0.12), transparent 32%),
    linear-gradient(180deg, var(--body-gradient-a), var(--body-gradient-b)),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    linear-gradient(rgba(20, 45, 60, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 45, 60, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(20, 45, 60, 0.02), transparent 58%);
  background-size: 78px 78px, 78px 78px, auto;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 55%);
}

body::after {
  background:
    radial-gradient(circle at 14% 24%, rgba(var(--surface-rgb), 0.55), transparent 14%),
    radial-gradient(circle at 83% 18%, rgba(var(--surface-rgb), 0.42), transparent 11%),
    radial-gradient(circle at 78% 76%, rgba(var(--surface-rgb), 0.42), transparent 10%),
    linear-gradient(115deg, transparent 20%, rgba(var(--surface-rgb), 0.32) 34%, transparent 46%);
  opacity: 0.5;
}

.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(12, 120, 111, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 120, 111, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(var(--surface-rgb), 0.14), transparent 28%),
    radial-gradient(circle at 76% 30%, rgba(47, 111, 179, 0.05), transparent 24%);
  background-size: 42px 42px, 42px 42px, auto, auto;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 70%);
  animation: gridDrift 18s linear infinite;
}

button,
input {
  font: inherit;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: 28px 22px 22px;
  animation: shellEnter 0.65s ease-out both;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.app-shell::before {
  background:
    linear-gradient(115deg, rgba(var(--surface-rgb), 0.22), transparent 24%, transparent 76%, rgba(var(--surface-rgb), 0.18)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.16), transparent 18%);
  opacity: 0.95;
}

.app-shell::after {
  background:
    linear-gradient(135deg, rgba(var(--surface-rgb), 0.16), transparent 28%, transparent 72%, rgba(var(--surface-rgb), 0.14));
  mix-blend-mode: screen;
}

.landing-home {
  display: grid;
  gap: 28px;
  margin-bottom: 28px;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 20px;
  background: rgba(var(--surface-rgb), 0.74);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 32px rgba(var(--ink-rgb), 0.08);
}

.landing-nav strong {
  display: block;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.landing-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.landing-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(var(--ink-rgb), 0.16);
}

.hero-brand-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(var(--ink-rgb), 0.16);
}

.landing-link {
  color: var(--text-secondary);
}

/* Shared left-sidebar app chrome for every authenticated page (dashboard,
   cases, admin, add-patient, select-patient, portal) - replaces the old
   top navbar with a persistent nav rail, matching a conventional clinical
   dashboard layout. Collapses to a horizontal top bar on narrow screens
   (see the max-width: 860px block near the bottom of this file). */
.app-with-sidebar {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.app-sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: calc(100vh - 40px);
  padding: 18px 12px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.09) 0%, rgba(13, 148, 136, 0.05) 50%, rgba(16, 185, 129, 0.1) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.16);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 12px 36px -8px rgba(15, 118, 110, 0.08);
}

.app-sidebar-fixed {
  position: fixed;
  left: 22px;
  top: 20px;
  width: 236px;
  z-index: 40;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.09) 0%, rgba(13, 148, 136, 0.05) 50%, rgba(16, 185, 129, 0.1) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.16);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 12px 36px -8px rgba(15, 118, 110, 0.08);
}

.app-sidebar-fixed .app-sidebar-link.active {
  box-shadow: inset 0 0 0 1px rgba(19, 138, 122, 0.18);
}

.portal-shell-with-fixed-sidebar {
  margin-left: 256px;
}

.sidebar-toggle-btn {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--surface-rgb), 0.96);
  box-shadow: 0 10px 22px rgba(var(--ink-rgb), 0.14);
  cursor: pointer;
}

.sidebar-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(10, 20, 26, 0.4);
}

.sidebar-backdrop.visible {
  display: block;
}

@media (max-width: 860px) {
  .sidebar-toggle-btn {
    display: flex;
  }

  .app-sidebar-fixed {
    top: 0;
    left: 0;
    width: 260px;
    max-width: 82vw;
    height: 100vh;
    border-radius: 0 22px 22px 0;
    transform: translateX(-105%);
    transition: transform 220ms ease;
    z-index: 50;
  }

  .app-sidebar-fixed.sidebar-open {
    transform: translateX(0);
  }

  .portal-shell-with-fixed-sidebar {
    margin-left: 0;
    padding-top: 52px;
  }
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
}

.app-sidebar-brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
}

.app-sidebar-brand strong {
  font-size: 0.98rem;
  color: var(--ink);
}

.app-sidebar-nav {
  display: grid;
  align-content: start;
  gap: 2px;
  flex: 1;
}

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.88rem;
  transition: background 140ms ease, color 140ms ease;
}

.app-sidebar-link .app-sidebar-icon {
  flex: none;
  width: 18px;
  text-align: center;
}

.app-sidebar-link .app-sidebar-icon .icon-svg {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}

.app-sidebar-link:hover {
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--ink);
}

.app-sidebar-link.active {
  background: rgba(19, 138, 122, 0.1);
  color: var(--teal);
}

.app-sidebar-footer {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.06);
}

.app-sidebar-footer .app-sidebar-link {
  font-size: 0.84rem;
  font-weight: 600;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.app-main-area {
  display: grid;
  gap: 24px;
  align-content: start;
  min-width: 0;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-topbar h1 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--ink);
}

.app-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  background: rgba(var(--surface-rgb), 0.9);
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-user-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

/* NOTIFICATION BELL - same glass-chip language as .app-user-chip /
   .user-dropdown-menu right next to it, so it reads as part of the same
   family of controls rather than a bolted-on widget. */
.notif-bell-wrapper {
  position: relative;
}

.notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 118, 110, 0.22);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px -4px rgba(15, 118, 110, 0.12), inset 0 1px 0 #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 160ms ease;
}

.notif-bell-btn:hover {
  border-color: rgba(15, 118, 110, 0.36);
  color: #0f766e;
}

.notif-bell-btn .icon-svg {
  width: 19px;
  height: 19px;
}

.notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #f87171, #c74737);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px #ffffff;
}

.notif-bell-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: 340px;
  max-width: min(92vw, 340px);
  max-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  border: 1.5px solid rgba(15, 118, 110, 0.18);
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.16), inset 0 1px 0 #ffffff;
  animation: dropdownFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.notif-bell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 118, 110, 0.1);
  flex-shrink: 0;
}

.notif-bell-header strong {
  font-size: 0.92rem;
  color: #0f172a;
}

.notif-mark-all-btn {
  border: none;
  background: transparent;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.notif-mark-all-btn:hover {
  background: rgba(15, 118, 110, 0.08);
}

.notif-bell-list {
  /* Without flex-basis/min-height, a flex child sizes to its content and
     never actually shrinks to the space left after the header - so with
     enough notifications (e.g. 27) the list just grows past the menu's
     max-height and gets silently clipped by the menu's overflow:hidden
     instead of scrolling internally the way overflow-y:auto here implies. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.notif-bell-empty {
  margin: 0;
  padding: 26px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease;
}

.notif-item:hover {
  background: rgba(15, 118, 110, 0.06);
}

.notif-item.unread {
  background: rgba(15, 118, 110, 0.05);
}

.notif-item.unread::before {
  content: "";
  align-self: center;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f766e;
  margin-right: -2px;
}

.notif-item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #0f766e;
}

.notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-item-body strong {
  font-size: 0.84rem;
  color: #0f172a;
  line-height: 1.3;
}

.notif-item-body span {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.35;
}

.notif-item-body small {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
}

html[data-theme="dark"] .notif-bell-btn,
body[data-theme="dark"] .notif-bell-btn {
  background: rgba(10, 22, 28, 0.92) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .notif-bell-menu,
body[data-theme="dark"] .notif-bell-menu {
  background: rgba(10, 22, 28, 0.98) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .notif-bell-header,
body[data-theme="dark"] .notif-bell-header {
  border-bottom-color: rgba(20, 184, 166, 0.18) !important;
}

html[data-theme="dark"] .notif-bell-header strong,
body[data-theme="dark"] .notif-bell-header strong,
html[data-theme="dark"] .notif-item-body strong,
body[data-theme="dark"] .notif-item-body strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .notif-item-body span,
body[data-theme="dark"] .notif-item-body span {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .notif-item:hover,
body[data-theme="dark"] .notif-item:hover,
html[data-theme="dark"] .notif-item.unread,
body[data-theme="dark"] .notif-item.unread {
  background: rgba(20, 184, 166, 0.14) !important;
}

.app-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 118, 110, 0.22);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px -4px rgba(15, 118, 110, 0.12), inset 0 1px 0 #ffffff;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit;
}

.app-user-chip:hover {
  background: #ffffff;
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: 0 8px 24px -6px rgba(15, 118, 110, 0.22), inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}

.app-user-chip-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.3);
}

.app-user-chip-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.app-user-chip-meta #userChipName {
  font-weight: 750;
  font-size: 0.88rem;
  color: #0f172a;
}

.app-user-chip-role {
  font-size: 0.68rem;
  font-weight: 750;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-chip-chevron {
  width: 14px;
  height: 14px;
  color: #64748b;
  transition: transform 180ms ease;
}

.app-user-chip[aria-expanded="true"] .user-chip-chevron {
  transform: rotate(180deg);
}

/* EXECUTIVE USER DROPDOWN MENU */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  min-width: 210px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  border: 1.5px solid rgba(15, 118, 110, 0.18);
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.16), inset 0 1px 0 #ffffff;
  animation: dropdownFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-dropdown-header {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-dropdown-header strong {
  font-size: 0.92rem;
  color: #0f172a;
  word-break: break-all;
}

.user-dropdown-role-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(15, 118, 110, 0.1);
  margin: 6px 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: all 140ms ease;
  box-sizing: border-box;
  text-align: left;
}

.user-dropdown-item:hover {
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.user-dropdown-item.danger:hover {
  background: rgba(225, 29, 72, 0.08);
  color: #e11d48;
}

/* App-wide glass card - this one shared rule is what every card on
   every authenticated page (dashboard, cases, admin, portal, login,
   etc.) already renders through via .admin-card/.landing-copy, so
   tuning it here is what makes "glassmorphism" an app-wide theme
   rather than a front-page-only effect. Lower opacity + heavier blur
   than a typical translucent panel so the colorful body background
   actually reads through it; the inset top highlight is the classic
   "light catching a glass edge" cue. */
.landing-copy,
.landing-visual,
.landing-band {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 28px;
  background: rgba(var(--surface-rgb), 0.34);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  /* The last layer is the "material glow" - a soft teal halo bleeding
     out from under the card, like the glass itself is lit from
     within, on top of the neutral elevation shadow and glass
     highlights. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 60px rgba(255, 255, 255, 0.08),
    0 24px 54px rgba(var(--ink-rgb), 0.1),
    0 0 46px rgba(15, 138, 118, 0.16);
}

/* Water-glass refraction sheen - a soft diagonal highlight, like light
   catching a curved water surface, on every card using the rule above. */
.landing-copy::before,
.landing-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22) 0%, transparent 30%, transparent 72%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
}

.landing-copy>*,
.landing-band>* {
  position: relative;
  z-index: 1;
}

.landing-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 30px 28px;
}

.landing-title-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.landing-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--teal);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Small accent tick before each card's section label, for a bit more
   visual organization/scannability on pages that stack many sections
   (Account Admin especially). */
.landing-kicker::before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), transparent);
  flex: none;
}

.landing-summary {
  max-width: 680px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

/* Slow-drifting blurred blobs behind the hero content - purely
   decorative artwork, kept subtle (low opacity, huge blur) so it reads
   as ambient depth rather than competing with the text on top of it. */
.hero-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.55;
  animation: blobDrift 16s ease-in-out infinite;
}

.hero-blob-a {
  top: -60px;
  left: 6%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(15, 138, 118, 0.3), transparent 70%);
  animation-delay: 0s;
}

.hero-blob-b {
  top: -40px;
  right: 8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(47, 111, 179, 0.24), transparent 70%);
  animation-delay: -5s;
  animation-duration: 20s;
}

.hero-blob-c {
  bottom: -80px;
  left: 40%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(226, 169, 59, 0.14), transparent 70%);
  animation-delay: -10s;
  animation-duration: 18s;
}

@keyframes blobDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(18px, 14px) scale(1.08);
  }
}

/* Faint heartbeat/pulse line watermark - a small nod to the clinical
   subject matter, animated as if it's continuously being traced. */
.hero-pulse-line {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  z-index: 0;
  width: min(760px, 92%);
  height: 34px;
  opacity: 0.3;
  pointer-events: none;
}

/* Drifting medical-cross glyphs - line-art rather than emoji so they read
   as part of the artwork instead of pasted-on icons. */
.hero-glyph {
  position: absolute;
  z-index: 0;
  fill: var(--teal);
  opacity: 0.07;
  pointer-events: none;
  animation: glyphFloat 13s ease-in-out infinite;
}

.hero-glyph-1 {
  top: 14%;
  left: 7%;
  width: 34px;
  height: 34px;
}

.hero-glyph-2 {
  top: 62%;
  right: 9%;
  width: 46px;
  height: 46px;
  fill: var(--blue);
  opacity: 0.06;
  animation-delay: -4s;
  animation-duration: 17s;
}

.hero-glyph-3 {
  bottom: 12%;
  left: 13%;
  width: 26px;
  height: 26px;
  animation-delay: -8s;
  animation-duration: 15s;
}

@keyframes glyphFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-16px) rotate(8deg);
  }
}

.hero-pulse-line path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: pulseTrace 3.6s ease-in-out infinite;
}

@keyframes pulseTrace {
  0% {
    stroke-dashoffset: 340;
  }

  55% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -340;
  }
}

/* ============================================================
   Hero band v2 - full-bleed dark split hero with an overlapping
   icon-tile strip, index.html only.
   ============================================================ */

.hero-band {
  /* True full-bleed regardless of .app-shell's own 1680px width cap -
     the previous approach (negative-margin by exactly the shell's own
     padding) only reached the shell's cap, not the actual viewport
     edge, leaving visible side gaps on wider screens. left:50% + a
     -50vw margin re-centers this on the viewport itself, independent
     of any parent's width. */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -28px;
  margin-bottom: 28px;
  padding: 54px 22px 60px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 0%, rgba(30, 196, 171, 0.22), transparent 45%),
    radial-gradient(circle at 10% 100%, rgba(47, 111, 179, 0.18), transparent 42%),
    linear-gradient(150deg, #0a1f28, #0d3230 55%, #0a2a35);
  color: #eaf6f3;
}

.hero-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 30px;
  align-items: center;
  padding: 20px 0 10px;
}

.hero-split-copy {
  position: relative;
  z-index: 1;
}

.hero-split-copy>* {
  animation: fadeUp 0.7s ease-out both;
}

.hero-split-copy>*:nth-child(1) {
  animation-delay: 0.02s;
}

.hero-split-copy>*:nth-child(2) {
  animation-delay: 0.1s;
}

.hero-split-copy>*:nth-child(3) {
  animation-delay: 0.18s;
}

.hero-split-copy>*:nth-child(4) {
  animation-delay: 0.26s;
}

.hero-split-copy>*:nth-child(5) {
  animation-delay: 0.34s;
}

.hero-title-v2 {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  color: #f7fffc;
  letter-spacing: -0.01em;
}

.hero-title-v2 .accent {
  color: #4fe0c2;
}

.hero-sub-v2 {
  max-width: 52ch;
  margin: 0 0 22px;
  color: rgba(234, 246, 243, 0.78);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hero-actions-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
}

.hero-btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #f7fffc;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hero-btn-solid {
  border: 1px solid rgba(19, 139, 122, 0.5);
  color: #04241f;
  background: linear-gradient(180deg, #4fe0c2, #1cb495);
  box-shadow: 0 14px 30px rgba(15, 138, 118, 0.35);
}

.hero-btn-solid:hover {
  box-shadow: 0 18px 36px rgba(15, 138, 118, 0.45);
}

.hero-account-nudge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.hero-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-account-icon .icon-svg {
  width: 18px;
  height: 18px;
  color: #f7fffc;
}

.hero-account-nudge strong {
  display: block;
  color: #f7fffc;
  font-size: 0.86rem;
}

.hero-account-nudge a {
  color: #4fe0c2;
  font-weight: 750;
  font-size: 0.84rem;
  text-decoration: none;
}

.hero-account-nudge a:hover {
  text-decoration: underline;
}

.hero-split .landing-hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: rgba(234, 246, 243, 0.55);
  font-size: 0.84rem;
}

.hero-split .landing-hero-links a {
  color: rgba(234, 246, 243, 0.82);
  font-weight: 700;
  text-decoration: none;
}

.hero-split .landing-hero-links a:hover {
  color: #4fe0c2;
  text-decoration: underline;
}

.hero-split .landing-hero-links .dot {
  opacity: 0.5;
}

/* Mobile App Store Badges (Google Play & Apple App Store) */
.hero-store-section {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-store-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-store-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(234, 246, 243, 0.65);
}

html[data-theme="light"] .hero-store-label {
  color: #475569;
}

.store-coming-soon-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.35);
}

html[data-theme="light"] .store-coming-soon-pill {
  color: #0f766e;
  background: #e6f7f3;
  border-color: rgba(15, 118, 110, 0.3);
}

.hero-store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.store-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(14, 28, 36, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff !important;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .store-badge-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.store-badge-disabled {
  cursor: not-allowed;
  opacity: 0.75;
  user-select: none;
}

.store-badge-disabled:hover {
  background: rgba(14, 28, 36, 0.78);
  border-color: rgba(255, 255, 255, 0.22);
  transform: none;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .store-badge-disabled:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  transform: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.store-badge-btn:hover {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(45, 212, 191, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -4px rgba(20, 184, 166, 0.3);
  text-decoration: none;
}

html[data-theme="light"] .store-badge-btn:hover {
  background: #f0fdfa;
  border-color: #0f766e;
}

.store-badge-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.store-badge-text small {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

html[data-theme="light"] .store-badge-text small {
  color: #64748b;
}

.store-badge-text strong {
  font-size: 0.94rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

html[data-theme="light"] .store-badge-text strong {
  color: #0f172a;
}

.hero-split-art {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dedicated, explicitly-sized layer for the three medical animations -
   .hero-artwork (below) is a bare position:relative box with no
   intrinsic size of its own (its blob/glyph children are all
   position:absolute, which don't establish one), so anything needing
   real, reliable clipping bounds goes here instead, sized to fill
   .hero-split-art directly. */
.hero-medical-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 26px;
  pointer-events: none;
}

/* --- Floating IV-drip droplets (TBSA & Fluid) --- */
.hero-iv-drop {
  position: absolute;
  top: -10%;
  width: 8px;
  height: 8px;
  background: #6cf5d6;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  box-shadow: 0 0 8px 1px rgba(108, 245, 214, 0.6);
  opacity: 0;
  animation: ivDropFall 3.6s ease-in infinite;
}

.hero-iv-drop-1 {
  left: 20%;
  animation-delay: 0s;
}

.hero-iv-drop-2 {
  left: 42%;
  animation-delay: 0.9s;
}

.hero-iv-drop-3 {
  left: 64%;
  animation-delay: 1.8s;
}

.hero-iv-drop-4 {
  left: 82%;
  animation-delay: 2.7s;
}

@keyframes ivDropFall {
  0% {
    top: -10%;
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
  }

  10% {
    opacity: 0.85;
  }

  85% {
    opacity: 0.6;
  }

  96% {
    top: 92%;
    opacity: 0;
    transform: rotate(45deg) scale(1);
  }

  100% {
    top: 92%;
    opacity: 0;
  }
}

.hero-split-art .hero-artwork {
  position: relative;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 40px rgba(79, 224, 194, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.3);
}

/* The diagonal glass "sheen" - the signature glassmorphism highlight
   that reads as light catching a curved glass surface. */
.hero-split-art .hero-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, transparent 28%, transparent 72%, rgba(79, 224, 194, 0.08) 100%);
  pointer-events: none;
}

.hero-split-art .hero-blob {
  opacity: 0.8;
}

.hero-split-art .hero-glyph {
  fill: #eaf6f3;
  opacity: 0.1;
}

.hero-split-art .hero-glyph-2 {
  fill: #4fe0c2;
  opacity: 0.12;
}

.hero-split-art .hero-pulse-line path {
  stroke: #4fe0c2;
}

/* The source icon is already a complete, polished app-icon (its own
   rounded square + shadow baked in) - wrapping it in another rounded,
   bordered box would look like an icon nested inside an icon, so this
   is just a positioning/animation wrapper, no background of its own. */
.hero-art-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 172px;
  margin-top: 28px;
  animation: floatIconLive 5s ease-in-out infinite;
  transition: transform 260ms ease;
  cursor: default;
}

.hero-art-badge:hover {
  transform: scale(1.06);
}

@keyframes floatIconLive {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-7px) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-2px) rotate(0deg);
  }

  75% {
    transform: translateY(-9px) rotate(1.5deg);
  }
}

.hero-art-badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 34px;
  background: radial-gradient(circle, rgba(79, 224, 194, 0.55), transparent 70%);
  filter: blur(18px);
  animation: badgeGlow 2.8s ease-in-out infinite;
  z-index: -1;
}

@keyframes badgeGlow {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.1);
  }
}

/* A slowly orbiting ring of light, echoing the icon artwork's own
   "network" motif (the connected-dot overlay baked into the image) -
   this is what makes the badge read as "alive" rather than just
   floating in place. */
.hero-art-badge-orbit {
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 44px;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0%, rgba(79, 224, 194, 0.75) 8%, transparent 22%, transparent 50%, rgba(79, 224, 194, 0.5) 58%, transparent 72%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: orbitSpin 7s linear infinite;
}

@keyframes orbitSpin {
  to {
    transform: rotate(360deg);
  }
}

.hero-art-badge .hero-brand-icon {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* The icon file itself now has a soft radial-faded edge (no hard
     card boundary), so no border-radius/box-shadow clipping here -
     those were sized for the old hard-edged square version and would
     draw a square shadow around this soft glow. */
}

/* Diagonal sheen that periodically sweeps across the icon, like light
   catching glass - the same device as the front-page hero art panel,
   but as a moving sweep instead of a static highlight. */
.hero-art-badge-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.hero-art-badge-sheen::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 40%;
  background: linear-gradient(75deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: badgeSheenSweep 4.5s ease-in-out infinite;
}

@keyframes badgeSheenSweep {

  0%,
  30% {
    left: -60%;
  }

  60%,
  100% {
    left: 130%;
  }
}

/* Live-scrolling ECG monitor strip beneath the badge - see the markup
   comment in index.html for how the seamless loop works. */
.hero-ecg {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 210px;
  height: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hero-ecg-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-ecg-track path {
  fill: none;
  stroke: #6cf5d6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(108, 245, 214, 0.85));
}

.hero-ecg-dot {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ffbe4;
  box-shadow: 0 0 10px 3px rgba(108, 245, 214, 0.9);
  transform: translateY(-50%);
  animation: ecgDotPulse 1.2s ease-in-out infinite;
}

@keyframes ecgDotPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: translateY(-50%) scale(0.85);
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.25);
  }
}

/* The overlapping white icon-tile strip - a sibling of .hero-band (not
   nested inside it), since that section's overflow:hidden (needed to
   contain its own decorative artwork) would otherwise clip this
   strip's overlap into the light section below. Sits in normal flow,
   pulled up over the hero/light boundary with a negative top margin. */
.hero-tiles-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: -70px auto 28px;
  padding: 0 22px;
}

.hero-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.hero-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* A teal-tinted glass instead of plain white - ties the tile strip's
     color back to the dark teal hero it overlaps, instead of reading
     as a flat white/gray card sitting on top of it. */
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(200, 245, 232, 0.42));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 30px rgba(15, 138, 118, 0.14);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}

/* The glass sheen - same device as the hero art panel, scaled down.
   Real content gets position+z-index so it paints above this (a
   position:absolute pseudo-element otherwise paints above static
   in-flow content regardless of source order). */
.hero-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.5) 0%, transparent 35%);
  pointer-events: none;
}

.hero-tile>* {
  position: relative;
  z-index: 1;
}

.hero-tile:hover {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(200, 245, 232, 0.56));
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 138, 118, 0.18);
  border-color: rgba(15, 138, 118, 0.28);
}

.hero-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 138, 118, 0.1);
  box-shadow: inset 0 0 0 1px rgba(15, 138, 118, 0.14);
  color: var(--teal);
  transition: transform 200ms ease;
}

.hero-tile-icon.amber {
  background: rgba(226, 169, 59, 0.14);
  box-shadow: inset 0 0 0 1px rgba(226, 169, 59, 0.2);
  color: #b57818;
}

.hero-tile-soon small {
  color: #b57818;
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-tile:hover .hero-tile-icon {
  transform: scale(1.08);
}

/* ===== Line-icon system (replaces emoji throughout index.html) =====
   Stroke-based, currentColor-driven so each icon inherits its badge's
   existing color (teal/amber/white) with no per-icon color rule
   needed. Each carries its own small idle animation - "flat and
   static" was the complaint the emoji drew, so these are deliberately
   never fully still. */
.icon-svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

@keyframes flameFlicker {

  0%,
  100% {
    transform: scale(1) skewX(0deg);
  }

  25% {
    transform: scale(1.05, 0.96) skewX(-2deg);
  }

  50% {
    transform: scale(0.96, 1.05) skewX(2deg);
  }

  75% {
    transform: scale(1.03, 0.98) skewX(-1deg);
  }
}

.icon-flame {
  transform-origin: 50% 95%;
  animation: flameFlicker 1.7s ease-in-out infinite;
}

@keyframes dropletBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.icon-droplet {
  animation: dropletBob 2.3s ease-in-out infinite;
}

@keyframes cubeRock {

  0%,
  100% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }
}

.icon-cube {
  animation: cubeRock 4s ease-in-out infinite;
}

@keyframes aperturePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}

.icon-camera .aperture {
  transform-box: fill-box;
  transform-origin: center;
  animation: aperturePulse 2.4s ease-in-out infinite;
}

@keyframes sparkleTwinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.icon-wand .spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkleTwinkle 1.6s ease-in-out infinite;
}

.icon-wand .spark2 {
  animation-delay: 0.5s;
}

@keyframes needleSwing {

  0%,
  100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

.icon-gauge .needle {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: needleSwing 2.4s ease-in-out infinite;
}

@keyframes alertBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.icon-alert circle {
  animation: alertBlink 1.4s ease-in-out infinite;
}

.hero-tile strong {
  font-size: 0.86rem;
  font-weight: 800;
}

.hero-tile small {
  color: var(--muted);
  font-size: 0.74rem;
}

@media (max-width: 860px) {
  .hero-split {
    grid-template-columns: 1fr;
  }

  .hero-split-art {
    order: -1;
    min-height: 200px;
  }

  .hero-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-tiles-wrap {
    margin-top: -40px;
  }
}

@media (max-width: 560px) {
  .hero-tiles {
    grid-template-columns: 1fr;
  }

  .hero-tiles-wrap {
    margin-top: -20px;
  }
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 850;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.landing-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(var(--ink-rgb), 0.12);
}

.landing-cta.primary {
  background: linear-gradient(180deg, rgba(30, 196, 171, 0.98), rgba(19, 139, 122, 0.98));
  color: #f8fffe;
  border-color: rgba(22, 144, 126, 0.58);
}

.landing-cta.secondary {
  background: rgba(var(--surface-rgb), 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--ink);
}

.landing-cta.danger {
  background: linear-gradient(180deg, rgba(224, 105, 94, 0.98), rgba(178, 58, 47, 0.98));
  color: #fff8f7;
  border-color: rgba(178, 58, 47, 0.6);
}

.danger-zone {
  border: 1px solid rgba(214, 85, 74, 0.35) !important;
  background: rgba(255, 246, 245, 0.7) !important;
}

.landing-card {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: rgba(var(--surface-rgb), 0.4);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 30px rgba(15, 138, 118, 0.12);
}

.landing-visual {
  display: grid;
  align-content: start;
  padding: 8px;
}

.quick-links-title {
  margin: 10px 6px 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.quick-links-list {
  display: grid;
}

.quick-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.07);
  transition: background 160ms ease, transform 160ms ease;
}

.quick-links-list .quick-link-row:last-child {
  border-bottom: none;
}

.quick-link-row:hover {
  background: rgba(var(--ink-rgb), 0.04);
  transform: translateX(2px);
}

.quick-link-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-link-text strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 650;
}

.quick-link-text small {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.4;
}

.quick-link-chevron {
  flex: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
}

.landing-sections {
  display: grid;
  gap: 18px;
}

.partner-strip {
  display: grid;
}

.partner-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 26px;
  background: rgba(var(--surface-rgb), 0.78);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: 0 20px 48px rgba(var(--ink-rgb), 0.08);
}

.partner-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
  padding: 18px 18px 0;
}

.partner-figure {
  position: relative;
  width: min(100%, 512px);
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--ink-rgb), 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
}

.partner-figure-rotated .partner-banner {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-90deg) scale(0.92);
  transform-origin: center;
  opacity: 0.94;
}

.partner-figure figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(12, 28, 34, 0.68);
  color: #f4fbfd;
  font-size: 0.78rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.partner-copy {
  display: grid;
  gap: 8px;
  padding: 22px 24px 24px;
}

.partner-copy h2 {
  color: var(--ink);
  font-size: 1.45rem;
}

.partner-copy p:last-child {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.landing-band {
  padding: 24px;
}

.landing-band-head {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.landing-band-head h2 {
  color: var(--ink);
  font-size: 1.5rem;
}

.landing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.landing-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
}

.landing-card-grid .roadmap-card {
  grid-column: auto;
}

.landing-card-tag {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(19, 138, 122, 0.1);
  color: #138a7a;
  font-size: 0.76rem;
  font-weight: 800;
}

.landing-card-tag.planned {
  background: rgba(226, 169, 59, 0.12);
  color: #b57818;
}

.landing-card-tag.case-status-live {
  background: rgba(47, 109, 168, 0.12);
  color: var(--blue);
}

.landing-card-tag.case-status-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: heroPulse 1.8s ease-in-out infinite;
}

.case-view-progress-link {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
}

.case-view-progress-link:hover {
  text-decoration: underline;
}

.landing-card h3 {
  margin: 0;
  color: #17303a;
  font-size: 1rem;
  line-height: 1.3;
}

.landing-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.9rem;
}

/* index.html's capability/roadmap cards - icon badge instead of a bare
   number, plus a hover lift so the "what BurnCare offers" grid feels
   tactile rather than a flat list. */
.capability-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  animation: fadeUp 0.6s ease-out both;
}

.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(var(--ink-rgb), 0.12);
  border-color: rgba(15, 138, 118, 0.25);
}

.capability-card:hover .capability-icon {
  transform: scale(1.1);
}

.capability-icon {
  transition: transform 200ms ease;
}

.landing-card-grid .capability-card:nth-child(1) {
  animation-delay: 0.05s;
}

.landing-card-grid .capability-card:nth-child(2) {
  animation-delay: 0.1s;
}

.landing-card-grid .capability-card:nth-child(3) {
  animation-delay: 0.15s;
}

.landing-card-grid .capability-card:nth-child(4) {
  animation-delay: 0.2s;
}

.landing-card-grid .capability-card:nth-child(5) {
  animation-delay: 0.25s;
}

.capability-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(15, 138, 118, 0.1);
  box-shadow: inset 0 0 0 1px rgba(15, 138, 118, 0.14);
  color: var(--teal);
  font-size: 1.4rem;
}

.capability-icon.amber {
  background: rgba(226, 169, 59, 0.14);
  box-shadow: inset 0 0 0 1px rgba(226, 169, 59, 0.2);
  color: #b57818;
}


.portal-shell {
  display: grid;
  gap: 18px;
}

/* Matches .app-sidebar / .dashboard-ambient-container's exact recipe so the
   "Workspace" title reads as the header of the same card as the panels
   below it, rather than a separate floating heading with no card of its
   own sitting next to the sidebar's green glass card. */
.portal-main-card {
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.09) 0%, rgba(13, 148, 136, 0.05) 50%, rgba(16, 185, 129, 0.1) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.16);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 12px 36px -8px rgba(15, 118, 110, 0.08);
  box-sizing: border-box;
}

.portal-main-card .topbar {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid rgba(15, 118, 110, 0.14);
}

.portal-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.02;
  color: var(--ink);
  text-shadow: none;
}

/* Higher specificity than ".topbar > div" (below) is required here - that
   rule would otherwise win and force this into a single-column grid,
   stacking every nav link/button vertically regardless of screen width. */
.topbar>.portal-topbar-actions {
  display: flex;
  align-items: center;
  /* Only two items live here (the notification bell, the model-status
     pill) - on a narrow viewport there's no reason to make that a
     horizontal-scroll strip (which on a small enough width degenerates
     into a nearly-content-free sliver with just a scrollbar visible,
     hiding both items behind it); wrapping to a second line reads far
     better and needs no overflow/scrollbar handling at all. */
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.landing-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 24px;
  background: rgba(var(--surface-rgb), 0.78);
  backdrop-filter: blur(20px) saturate(145%);
  box-shadow: 0 18px 44px rgba(var(--ink-rgb), 0.08);
}

.landing-cta-band h2 {
  color: var(--ink);
  font-size: 1.45rem;
  margin-bottom: 8px;
}

.landing-cta-band p:last-child {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  text-align: left;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(1.8rem, 3vw, 3.15rem);
  line-height: 1.02;
  font-family: "IBM Plex Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: var(--ink);
  /* A soft light glow behind the text (not a hard drop shadow) keeps
     headings crisp against the now much more translucent glass cards,
     which can show real page content/color through them. */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}

h2 {
  margin-bottom: 0;
  font-size: 1.05rem;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.subtitle {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.pipeline-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px 0 28px;
  border: 1px solid rgba(12, 120, 111, 0.18);
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  box-shadow: 0 8px 24px rgba(28, 48, 51, 0.07);
}

.stage::before {
  content: "";
  position: absolute;
  left: 11px;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px rgba(12, 120, 111, 0.12);
}

.stage.live::before {
  animation: pulseDot 2.2s ease-in-out infinite;
}

.stage.upcoming {
  color: var(--muted);
}

.stage.upcoming::before {
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(212, 138, 29, 0.12);
}

.status-pill,
.download-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(var(--surface-rgb), 0.94);
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(var(--ink-rgb), 0.08);
  backdrop-filter: blur(18px) saturate(135%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}


.download-link:hover {
  transform: translateY(-1px);
  border-color: rgba(12, 120, 111, 0.32);
  box-shadow: var(--glow);
}

.status-pill.ready {
  color: var(--green);
}

.status-pill.fallback {
  color: #9b670d;
}

.status-pill.error {
  color: var(--red);
}

.job-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: capitalize;
  white-space: nowrap;
}

.job-status-badge.ready {
  color: var(--green);
  background: rgba(34, 122, 83, 0.12);
}

.job-status-badge.fallback {
  color: #9b670d;
  background: rgba(155, 103, 13, 0.12);
}

.job-status-badge.error {
  color: var(--red);
  background: rgba(214, 85, 74, 0.12);
}

/* Middle results card + right-hand upload card, side by side - the upload
   card used to be its own tab inside .workspace; it's now a permanent
   sidebar-style card on the right so it stays reachable while the middle
   column tab-switches between the detection and 3D result views. */
.workspace-layout {
  display: grid;
  /* The upload card is position: fixed (see .upload-side-card below), so
     it no longer occupies this second track's content - it's given a
     literal 300px here purely so the middle column still leaves a
     300px + gap gutter on the right for the fixed card to sit in,
     mirroring how .app-sidebar-fixed's own 236px is reserved on the left
     via .portal-shell-with-fixed-sidebar's margin-left. */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1000px) {
  .workspace-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .upload-side-card {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* Wide enough for normal-size buttons and a 2-column Processing Target
   grid (rather than the 236px sidebar-matched width, which forced every
   button down to sidebar-nav-link scale) - the extra width buys back
   enough height to land close to the sidebar's own height without
   needing to shrink text or clip content into a scroll box.

   position: fixed (not sticky) so this card - like the left nav via
   .app-sidebar-fixed - stays pinned in place while only the middle
   results column scrolls, instead of scrolling away once the page grows
   taller than one viewport. */
.upload-side-card {
  position: fixed;
  top: 20px;
  right: 22px;
  width: 300px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  z-index: 40;
}

.upload-side-card .upload-panel {
  height: 100%;
  align-content: start;
}

.upload-side-card .actions {
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0;
}

.upload-side-card .pipeline-targets {
  margin-bottom: 0;
  padding: 12px 14px;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.upload-side-card .upload-mode-switch {
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* min-width: 0 on every button here, not just .secondary - a grid/flex
   item's default min-width is "auto" (its own content's min-content
   size), which silently overrides the parent track/flex-basis sizing and
   lets a button push past its cell instead of wrapping or shrinking.
   Combined with white-space: normal below, this is what actually makes
   these buttons respect the card's width. */
.upload-side-card button {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.78rem;
  white-space: normal;
  overflow-wrap: break-word;
}

.upload-side-card .mode-chip {
  min-height: 34px;
  padding: 0 6px;
  font-size: 0.76rem;
}

.upload-side-card .upload-chooser {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.75rem;
}

.upload-side-card .target-chip {
  min-height: 36px;
  padding: 5px 6px;
  font-size: 0.72rem;
  line-height: 1.2;
}

.upload-side-card .upload-panel {
  padding: 14px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.upload-side-card #uploadForm {
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.upload-side-card .upload-source-row {
  gap: 6px;
}

.upload-side-card .upload-mode-switch {
  gap: 4px;
  padding: 4px;
}

.upload-side-card .section-head {
  gap: 2px;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Matches .admin-card's exact recipe (dashboard/admin.html) so the
   workspace page reads as the same "Apple glass" surface as the rest
   of the app, instead of its own older/flatter panel style. */
.upload-panel,
.result-panel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.84);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.07), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.upload-panel:hover,
.result-panel:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #ffffff;
  box-shadow: 0 24px 50px -10px rgba(15, 118, 110, 0.18), inset 0 1px 0 #ffffff;
}

/* Matches .app-sidebar's exact recipe, since this card now sits next to
   it in its own right-hand column and should read as the same family of
   green glass surface rather than the white-based "admin-card" tint used
   by .result-panel in the middle column. */
.upload-panel {
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.09) 0%, rgba(13, 148, 136, 0.05) 50%, rgba(16, 185, 129, 0.1) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.16);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 12px 36px -8px rgba(15, 118, 110, 0.08);
}

.upload-panel:hover {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.13) 0%, rgba(13, 148, 136, 0.08) 50%, rgba(16, 185, 129, 0.14) 100%);
  border-color: rgba(15, 118, 110, 0.26);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 16px 40px -8px rgba(15, 118, 110, 0.14);
}

.result-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(216, 240, 235, 0.5)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.2), transparent 60%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 52px rgba(var(--ink-rgb), 0.08), inset 0 1px 0 #ffffff;
}

.result-panel:hover {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(216, 240, 235, 0.58)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.2), transparent 60%),
    rgba(255, 255, 255, 0.95);
}

.upload-panel::after,
.result-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 21px;
  pointer-events: none;
  border: 1px solid rgba(var(--ink-rgb), 0.05);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88), transparent 78%);
}

.upload-panel {
  padding: 16px;
  animation: panelEnter 0.55s ease-out both;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#activeCaseBanner {
  display: none;
}

#activeJobResumeBanner {
  order: 1;
}

#uploadForm {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}



.upload-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(var(--surface-rgb), 0.68);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  box-shadow: 0 12px 28px rgba(23, 38, 43, 0.08);
  backdrop-filter: blur(14px) saturate(135%);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.upload-mode-switch.three-way {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 800;
}

.mode-chip:hover {
  transform: none;
  box-shadow: none;
}

.mode-chip.active {
  background: linear-gradient(180deg, rgba(24, 154, 137, 0.98), rgba(19, 126, 112, 0.98));
  color: #f8fffe;
  border-color: rgba(19, 126, 112, 0.4);
  box-shadow: 0 10px 20px rgba(19, 126, 112, 0.18);
}

.use-existing-upload-btn {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  border: 1px dashed var(--amber);
  color: #8a6314;
  background: rgba(226, 169, 59, 0.1);
}

.selection-toast-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  animation: appleToastEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: auto;
}

.selection-toast-banner[hidden] {
  display: none !important;
}

@keyframes appleToastEnter {
  from {
    opacity: 0;
    transform: translate(-50%, -14px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.toast-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0d9488;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  flex-shrink: 0;
}

.toast-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.toast-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.toast-clear-btn:hover {
  background: rgba(239, 68, 68, 0.9) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.view-full-result-btn {
  width: 100%;
  margin-top: 4px;
  text-align: center;
  border: none;
  cursor: pointer;
}

.existing-upload-modal-card {
  width: min(580px, 100%);
}

.existing-upload-filter-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.14);
  box-shadow: inset 0 1px 2px rgba(15, 118, 110, 0.06);
}

.existing-upload-filter-bar .mode-chip {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.existing-upload-filter-bar .mode-chip:hover {
  background: rgba(15, 118, 110, 0.06);
}

.existing-upload-filter-bar .mode-chip.active {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 14px -2px rgba(15, 118, 110, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.existing-upload-grid {
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.existing-upload-grid .upload-history-item {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.18s ease;
}

.existing-upload-grid .upload-history-item:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.existing-upload-grid .upload-history-item.selected {
  border-color: var(--teal) !important;
  background: rgba(15, 118, 110, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25) !important;
}

.existing-upload-grid .upload-history-item.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: var(--teal);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.existing-upload-grid .upload-kind-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pipeline-targets {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.88), rgba(216, 240, 235, 0.42)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.24), transparent 55%),
    rgba(var(--surface-rgb), 0.62);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  box-shadow: 0 14px 30px rgba(20, 35, 39, 0.08);
  backdrop-filter: blur(14px) saturate(135%);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.section-head {
  display: grid;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.section-head strong {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.section-head span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-word;
}

/* 2-column grid constrained with minmax(0, 1fr) so buttons never overflow container box */
.pipeline-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fluid-weight-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fluid-weight-field[hidden] {
  display: none;
}

.batch-image-select-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(47, 111, 179, 0.16);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.78);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.batch-image-select-field[hidden] {
  display: none;
}

.batch-image-select-field label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.batch-image-select-field .patient-switcher {
  flex: 1;
  min-width: 0;
}

.batch-image-select-field .patient-switcher-trigger {
  width: 100%;
  max-width: 100%;
  justify-content: space-between;
}

.fluid-weight-field label {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 800;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

.fluid-weight-field input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(95, 169, 214, 0.24);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.85);
  color: var(--ink);
  font-size: 0.9rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fluid-weight-field input:focus {
  outline: none;
  border-color: rgba(47, 111, 179, 0.5);
  box-shadow: 0 0 0 3px rgba(47, 111, 179, 0.12);
}

.fluid-weight-field select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(95, 169, 214, 0.24);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.85);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

.fluid-weight-field select:focus {
  outline: none;
  border-color: rgba(47, 111, 179, 0.5);
  box-shadow: 0 0 0 3px rgba(47, 111, 179, 0.12);
}

.target-chip {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(95, 169, 214, 0.18);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.74);
  color: #335864;
  box-shadow: none;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.target-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(40, 69, 81, 0.08);
}

.target-chip.active {
  background: linear-gradient(180deg, rgba(231, 245, 255, 0.98), rgba(215, 237, 252, 0.96));
  color: #2f6797;
  border-color: rgba(75, 143, 209, 0.26);
  box-shadow: 0 10px 20px rgba(75, 143, 209, 0.12);
}

.target-chip.future {
  cursor: default;
  opacity: 0.68;
  background: rgba(245, 250, 252, 0.78);
  color: #6d8389;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}

.target-chip.future:hover {
  transform: none;
  box-shadow: none;
}

.target-chip-soon {
  display: none;
  align-self: flex-end;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #b8860b;
  line-height: 1;
}

/* Shown only while the tile is actually disabled - TBSA and Burn / Fluid
   Requirement carry this markup too (see the .future toggle batch mode
   applies to them in setUploadMode - both need TBSA, which batch mode
   doesn't compute), so the "Coming soon" label only appears when that's
   actually true instead of unconditionally on tiles that work fine in
   single-image mode. */
.target-chip.future .target-chip-soon {
  display: block;
}

.target-chip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none !important;
  box-shadow: none !important;
}

.result-panel {
  min-height: 700px;
  padding: 18px;
  animation: panelEnter 0.65s ease-out 0.08s both;
}

.drop-zone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  padding: 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.88), rgba(216, 240, 235, 0.42)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.24), transparent 55%),
    #f9fbfa;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(24, 38, 41, 0.12);
  backdrop-filter: blur(18px) saturate(135%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.drop-zone::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  pointer-events: none;
  opacity: 0.8;
}

.drop-zone:hover,
.drop-zone.dragging {
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

.drop-zone.dragging {
  border-color: rgba(12, 120, 111, 0.4);
  background:
    linear-gradient(145deg, rgba(240, 251, 247, 0.88), rgba(224, 245, 239, 0.56)),
    #eef8f6;
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop-icon {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-accent);
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 0 0 9px rgba(12, 120, 111, 0.12);
  animation: floatIcon 3s ease-in-out infinite;
}

.drop-zone strong {
  font-size: 1.12rem;
}

.drop-zone small,
#fileMeta,
.disclaimer {
  color: var(--muted);
  line-height: 1.45;
}

.drop-zone-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.upload-source-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.upload-source-row .upload-chooser {
  flex: 1 1 auto;
}

.upload-chooser {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(19, 138, 122, 0.22);
  background: rgba(20, 152, 135, 0.14);
  color: #156d62;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 800;
}

.upload-chooser:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(19, 126, 112, 0.1);
}

.upload-chooser.subtle {
  background: rgba(var(--surface-rgb), 0.72);
  color: #395d67;
  border-color: rgba(95, 169, 214, 0.18);
}

.actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin: 14px 0;
}

button {
  min-height: 44px;
  border: 1px solid var(--teal);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(16, 139, 127, 0.96), rgba(11, 109, 101, 0.98));
  color: var(--on-accent);
  cursor: pointer;
  font-weight: 850;
  box-shadow: 0 18px 32px rgba(12, 120, 111, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 34px rgba(12, 120, 111, 0.25);
}

button:disabled {
  cursor: wait;
  opacity: 0.68;
}

button.secondary {
  min-width: 88px;
  background: rgba(var(--surface-rgb), 0.84);
  color: var(--ink);
  border-color: rgba(var(--surface-rgb), 0.72);
  box-shadow: 0 14px 28px rgba(40, 52, 55, 0.06);
  backdrop-filter: blur(18px) saturate(135%);
}

button.secondary.danger {
  color: var(--red);
  border-color: rgba(214, 85, 74, 0.4);
  background: rgba(255, 245, 244, 0.92);
}

button.secondary.danger:hover {
  border-color: var(--red);
  box-shadow: 0 14px 28px rgba(214, 85, 74, 0.18);
}

.preview-box {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.88), rgba(216, 240, 235, 0.42)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.24), transparent 55%),
    #f9fbfa;
}

.preview-box h2,
.monitor-panel h2,
.result-header h2 {
  font-family: "IBM Plex Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 1.24rem;
  letter-spacing: 0.01em;
}

.monitor-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.84), rgba(216, 240, 235, 0.34)),
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.22), transparent 56%),
    var(--panel);
  box-shadow: 0 20px 38px rgba(24, 38, 41, 0.11);
  backdrop-filter: blur(18px) saturate(130%);
}

.monitor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.monitor-header span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.96), rgba(235, 243, 241, 0.92));
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  border: 1px solid rgba(12, 120, 111, 0.08);
  box-shadow: 0 10px 22px rgba(30, 42, 45, 0.06);
}

.monitor-header span.ready {
  color: var(--green);
  background: linear-gradient(180deg, rgba(235, 249, 240, 0.98), rgba(222, 245, 231, 0.94));
}

.monitor-header span.running {
  color: var(--blue);
  background: linear-gradient(180deg, rgba(235, 244, 255, 0.98), rgba(219, 236, 255, 0.94));
}

.monitor-header span.fallback,
.monitor-header span.upcoming {
  color: #9b670d;
  background: linear-gradient(180deg, rgba(255, 247, 230, 0.98), rgba(255, 239, 205, 0.94));
}

.monitor-header span.failed {
  color: var(--red);
  background: linear-gradient(180deg, rgba(255, 237, 233, 0.98), rgba(255, 223, 218, 0.94));
}

.process-list {
  display: grid;
  gap: 10px;
}

.monitor-row {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 12px 12px 18px;
  border: 1px solid rgba(199, 214, 216, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.96), rgba(249, 251, 250, 0.9));
  box-shadow: 0 10px 26px rgba(29, 43, 46, 0.06);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.monitor-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: rgba(154, 169, 173, 0.56);
}

.monitor-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 16%, rgba(var(--surface-rgb), 0.5), transparent 56%);
  transform: translateX(-130%);
}

.monitor-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.monitor-row strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.monitor-detail {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.monitor-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: capitalize;
  white-space: nowrap;
  border: 1px solid transparent;
}

.monitor-row.ready {
  border-color: rgba(40, 122, 73, 0.16);
  background:
    linear-gradient(180deg, rgba(239, 250, 243, 0.98), rgba(252, 255, 253, 0.94));
  box-shadow: 0 14px 30px rgba(40, 122, 73, 0.08);
}

.monitor-row.ready::before {
  background: linear-gradient(180deg, rgba(40, 122, 73, 0.92), rgba(87, 170, 116, 0.88));
}

.monitor-row.ready::after {
  animation: monitorSweep 2.4s ease-in-out infinite;
}

.monitor-row.ready .monitor-badge {
  color: var(--green);
  background: rgba(222, 245, 231, 0.96);
  border-color: rgba(40, 122, 73, 0.12);
}

.monitor-row.running::before {
  background: linear-gradient(180deg, rgba(47, 111, 179, 0.95), rgba(12, 120, 111, 0.9));
}

.monitor-row.running {
  transform: translateY(-2px);
  border-color: rgba(47, 111, 179, 0.24);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(247, 252, 255, 0.95));
  box-shadow: 0 18px 34px rgba(47, 111, 179, 0.12);
}

.monitor-row.running::after {
  animation: monitorSweep 1.5s linear infinite;
}

.monitor-row.running .monitor-badge {
  color: var(--blue);
  background: rgba(220, 236, 255, 0.98);
  border-color: rgba(47, 111, 179, 0.14);
}

.monitor-row.fallback::before {
  background: linear-gradient(180deg, rgba(212, 138, 29, 0.92), rgba(237, 177, 72, 0.88));
}

.monitor-row.on-demand::before {
  background: linear-gradient(180deg, rgba(47, 111, 179, 0.85), rgba(94, 156, 220, 0.8));
}

.monitor-row.failed::before {
  background: linear-gradient(180deg, rgba(199, 71, 55, 0.94), rgba(229, 112, 97, 0.9));
}

.monitor-row.fallback {
  border-color: rgba(212, 138, 29, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.98), rgba(255, 253, 249, 0.95));
}

.monitor-row.on-demand {
  border-color: rgba(47, 111, 179, 0.16);
  background:
    linear-gradient(180deg, rgba(240, 247, 255, 0.98), rgba(248, 251, 255, 0.95));
}

.monitor-row.fallback .monitor-badge {
  color: #9b670d;
  background: rgba(255, 239, 205, 0.98);
  border-color: rgba(212, 138, 29, 0.16);
}

.monitor-row.on-demand .monitor-badge {
  color: var(--blue);
  background: rgba(220, 236, 255, 0.98);
  border-color: rgba(47, 111, 179, 0.14);
}

.monitor-row.failed {
  border-color: rgba(199, 71, 55, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 243, 241, 0.98), rgba(255, 251, 250, 0.95));
}

.monitor-row.failed .monitor-badge {
  color: var(--red);
  background: rgba(255, 226, 221, 0.98);
  border-color: rgba(199, 71, 55, 0.14);
}

.preview-box img,
.results-grid img {
  width: 100%;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #eef2f0;
  object-fit: contain;
}

.preview-box img {
  display: none;
  max-height: 280px;
}

.result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* Separates the 3D Model & Parkland sub-section from the 2D results
   above it now that both live in one .result-panel card, without
   resorting to a second nested card. */
.output-section-divider {
  height: 1px;
  margin: 28px 0 24px;
  background: linear-gradient(90deg, transparent, rgba(var(--ink-rgb), 0.12) 20%, rgba(var(--ink-rgb), 0.12) 80%, transparent);
}

.result-subtitle {
  margin: 8px 0 0;
  max-width: 58ch;
  color: #587178;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Just the patient identity here, on request - upload counts already live
   in the case detail views (dashboard/cases), duplicating them next to
   the patient name in this small header added clutter without adding
   information at a glance. */
.result-summary-counts {
  display: none;
}

.result-summary-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-summary-patient {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}

.result-summary-counts {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

.header-action-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* PATIENT SWITCHER - a custom trigger + listbox instead of a native
   <select>, since the OS renders a native dropdown's option list itself
   and CSS can't reskin that chrome into the app's glass/Apple look. */
.patient-switcher {
  position: relative;
}

.patient-switcher-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background-color: rgba(var(--surface-rgb), 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.05), 0 8px 20px rgba(var(--ink-rgb), 0.06);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  max-width: 220px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.patient-switcher-trigger span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.patient-switcher-trigger:hover {
  border-color: rgba(var(--ink-rgb), 0.18);
  background-color: rgba(var(--surface-rgb), 0.9);
}

.patient-switcher-trigger:active {
  transform: scale(0.98);
}

.patient-switcher-trigger[aria-expanded="true"] {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 138, 118, 0.16), 0 8px 20px rgba(var(--ink-rgb), 0.06);
}

.patient-switcher-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 180ms ease;
}

.patient-switcher-trigger[aria-expanded="true"] .patient-switcher-chevron {
  transform: rotate(180deg);
}

.patient-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  min-width: 240px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  border: 1.5px solid rgba(15, 118, 110, 0.18);
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.16), inset 0 1px 0 #ffffff;
  animation: dropdownFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.patient-switcher-menu[hidden] {
  display: none;
}

.patient-switcher-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: left;
}

.patient-switcher-option:hover {
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.patient-switcher-option .check-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--teal);
  visibility: hidden;
}

.patient-switcher-option.selected .check-icon {
  visibility: visible;
}

html[data-theme="dark"] .patient-switcher-trigger,
body[data-theme="dark"] .patient-switcher-trigger {
  background: rgba(10, 22, 28, 0.92) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .patient-switcher-menu,
body[data-theme="dark"] .patient-switcher-menu {
  background: rgba(10, 22, 28, 0.98) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .patient-switcher-option,
body[data-theme="dark"] .patient-switcher-option {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .patient-switcher-option:hover,
body[data-theme="dark"] .patient-switcher-option:hover {
  background: rgba(20, 184, 166, 0.2) !important;
  color: #2dd4bf !important;
}

.diagnostic-hero {
  display: none;
}

.diagnostic-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 4px;
}

.hero-kicker {
  display: inline-flex;
  align-self: start;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(15, 138, 118, 0.1);
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.diagnostic-hero h3 {
  margin: 0;
  font-family: "IBM Plex Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.02;
  color: var(--ink);
}

.hero-summary {
  margin: 0;
  max-width: 58ch;
  color: var(--text-secondary);
  line-height: 1.58;
  white-space: pre-line;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(19, 138, 122, 0.1);
  color: var(--teal);
  border: 1px solid rgba(19, 138, 122, 0.16);
  font-size: 0.8rem;
  font-weight: 800;
}

.hero-badge.subtle {
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--text-secondary);
  border-color: rgba(var(--ink-rgb), 0.1);
}

.hero-badge.live {
  animation: heroPulse 1.8s ease-in-out infinite;
}

.hero-badge.tbsa {
  background: rgba(214, 85, 74, 0.1);
  color: #d6554a;
  border-color: rgba(214, 85, 74, 0.22);
}

.diagnostic-hero-visual {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}

.hero-steps {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 8px 12px;
}

.hero-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hero-step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(19, 138, 122, 0.1);
  color: var(--teal);
  font-weight: 800;
  font-size: 0.86rem;
}

.hero-step-text {
  display: grid;
  gap: 2px;
}

.hero-step-text strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.hero-step-text small {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

.pipeline-progress {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  animation: fadeUp 0.6s ease-out both;
}

.pipeline-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pipeline-progress-head strong {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
}

.pipeline-kicker {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.pipeline-progress-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pipeline-progress-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  border: 1px solid rgba(12, 120, 111, 0.12);
  background: rgba(var(--surface-rgb), 0.82);
  font-size: 0.79rem;
  font-weight: 850;
  color: var(--ink);
}

.pipeline-progress-track {
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47, 111, 179, 0.08), rgba(12, 120, 111, 0.14), rgba(199, 71, 55, 0.08));
}

.pipeline-progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow: 0 8px 18px rgba(12, 120, 111, 0.22);
  transition: width 220ms ease, background 220ms ease;
}

.pipeline-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--surface-rgb), 0.42), transparent);
  transform: translateX(-100%);
}

.pipeline-progress-fill.running::after {
  animation: flowPulse 1.35s linear infinite;
}

.pipeline-progress-fill.ready {
  background: linear-gradient(90deg, var(--green), var(--teal));
}

.pipeline-progress-fill.fallback,
.pipeline-progress-fill.upcoming {
  background: linear-gradient(90deg, var(--amber), #f2b95d);
}

.pipeline-progress-fill.failed {
  background: linear-gradient(90deg, var(--red), #e38275);
}

.pipeline-progress-detail {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  white-space: pre-line;
}

.flow-diagram {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.5), rgba(var(--surface-rgb), 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(var(--ink-rgb), 0.05);
}

.flow-node {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  /* min-height instead of aspect-ratio:1 - a forced square tied its
     height to its (flex-computed) width, so whenever 6 nodes divided the
     row into anything narrower than the icon+2-line-label content needed
     (e.g. a wide page pushing gap/padding around, or just a mid-size
     viewport), the square came out too short and overflow:hidden below
     silently clipped the state label ("Coming soon", "On demand") in half. */
  min-height: 132px;
  padding: 14px 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(var(--surface-rgb), 0.92), rgba(var(--surface-rgb), 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(var(--ink-rgb), 0.04),
    0 10px 24px -12px rgba(var(--ink-rgb), 0.14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  animation: fadeUp 0.55s ease-out both;
}

.flow-node:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(var(--ink-rgb), 0.05),
    0 16px 32px -14px rgba(var(--ink-rgb), 0.22);
}

.flow-node:nth-child(1) {
  animation-delay: 0.04s;
}

.flow-node:nth-child(3) {
  animation-delay: 0.08s;
}

.flow-node:nth-child(5) {
  animation-delay: 0.12s;
}

.flow-node:nth-child(7) {
  animation-delay: 0.16s;
}

.flow-node:nth-child(9) {
  animation-delay: 0.2s;
}

.flow-node:nth-child(11) {
  animation-delay: 0.24s;
}

/* Pulsing/breathing glow: while a stage is actively in progress (.current),
   the border and an outer glow slowly brighten and fade to read as "still
   working" without implying a percentage of completion (there isn't one to
   show). Stops the moment the JS moves the node to .done/.failed. */
.flow-node.current {
  border-color: rgba(12, 120, 111, 0.4);
  background:
    linear-gradient(180deg, rgba(240, 251, 247, 0.98), rgba(var(--surface-rgb), 0.95));
  animation: nodeBreathe 1.8s ease-in-out infinite;
}

.flow-node.done {
  border-color: rgba(40, 122, 73, 0.3);
  background:
    linear-gradient(180deg, rgba(232, 247, 238, 0.98), rgba(247, 252, 249, 0.94));
}

.flow-node.failed {
  border-color: rgba(199, 71, 55, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 240, 238, 0.96), rgba(255, 249, 248, 0.94));
}

/* Icon badge - a small glossy "app icon" square-turned-circle rather than
   a flat tint: a state-colored gradient fill, an inset top highlight for
   the glass-catching-light look used everywhere else in this app, and an
   outer glow in the same hue so the badge visually pops off the card
   instead of sitting flush with it. */
.flow-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, #cbd5da 0%, #aebac0 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.08),
    0 6px 14px -6px rgba(60, 89, 97, 0.35);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.flow-node-icon .icon-svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.flow-node-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.flow-node strong {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.flow-node-state {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--muted);
  transition: color 220ms ease;
}

.flow-node.active .flow-node-icon {
  background: linear-gradient(150deg, #5ba3e8 0%, #2f6da8 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 6px 16px -6px rgba(47, 109, 168, 0.55);
}

/* Queued: this stage hasn't started yet because an earlier one hasn't
   finished - dimmed to read as "waiting its turn", distinct from both the
   active-glow .current state and the amber "disabled/not built yet"
   .future state. The .target class stays on this node in the markup even
   after it becomes .current/.done/.failed (see setFlowStage), so every
   rule here is scoped to exclude those so the queued look doesn't bleed
   into the node's later, real states. */
.flow-node.target:not(.current):not(.done):not(.failed) {
  opacity: 0.68;
}

.flow-node.target:not(.current):not(.done):not(.failed) .flow-node-icon {
  position: relative;
  background: linear-gradient(150deg, #d3dde0 0%, #b6c2c6 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px rgba(0, 0, 0, 0.07),
    0 4px 10px -6px rgba(60, 89, 97, 0.3);
}

.flow-node.target:not(.current):not(.done):not(.failed) .flow-node-state {
  color: var(--text-secondary);
}

.flow-node.current .flow-node-icon {
  background: linear-gradient(150deg, #2dd4bf 0%, #0c786f 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 0 0 4px rgba(12, 120, 111, 0.14),
    0 8px 20px -6px rgba(12, 120, 111, 0.55);
}

.flow-node.current .flow-node-state {
  color: var(--teal);
}

.flow-node.done .flow-node-icon {
  background: linear-gradient(150deg, #4ade80 0%, #227a53 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 6px 16px -6px rgba(34, 122, 83, 0.5);
}

.flow-node.done .flow-node-state {
  color: var(--green);
}

.flow-node.future .flow-node-icon {
  background: linear-gradient(150deg, #f6c667 0%, #c8880d 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 6px 16px -6px rgba(200, 136, 13, 0.5);
}

.flow-node.future .flow-node-state {
  color: #9b670d;
}

/* On-demand (3D Model / TBSA): available any time but not part of the
   automatic run, so it gets its own violet identity rather than either
   the "queued" grey or the amber "not built yet" look those would
   otherwise fall back to. */
.flow-node.on-demand:not(.current):not(.done):not(.failed) .flow-node-icon {
  background: linear-gradient(150deg, #b794f6 0%, #7c3aed 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 6px 16px -6px rgba(124, 58, 237, 0.45);
}

.flow-node.on-demand:not(.current):not(.done):not(.failed) .flow-node-state {
  color: #7c3aed;
}

.flow-node.failed .flow-node-icon {
  background: linear-gradient(150deg, #f87171 0%, #c74737 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    0 6px 16px -6px rgba(199, 71, 55, 0.5);
}

.flow-node.failed .flow-node-state {
  color: var(--red);
}

/* Connector track: a soft pill-shaped rail instead of a flat 2px bar,
   with a brighter animated core that sweeps along it while the pipeline
   is actively running (.flow-running, toggled by setBusy) - a small cue
   that work is moving left to right through the stages. */
.flow-arrow {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 3px;
  flex: 0 0 14px;
  border-radius: 999px;
  background: rgba(12, 120, 111, 0.22);
  overflow: hidden;
}

.flow-arrow.muted {
  background: rgba(212, 138, 29, 0.2);
}

.flow-running .flow-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(12, 120, 111, 0.9), transparent);
  animation: arrowSweep 1.4s ease-in-out infinite;
}

.flow-running .flow-arrow.muted::after {
  background: linear-gradient(90deg, transparent, rgba(212, 138, 29, 0.85), transparent);
}

@keyframes arrowSweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.flow-arrow.muted {
  background: rgba(212, 138, 29, 0.25);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.ai-output-disclaimer {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--teal-soft);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

/* No border/background/shadow "card" shell here on purpose: every one of
   these articles (the two 2D viewers plus #threeDModelCard) already lives
   inside the single .result-panel glass card for this workspace - giving
   each one its own white bordered box on top of that was a card nested
   inside a card, which is what actually looked "weird". The pill header
   plus the dark .viewer-shell underneath it is enough to separate each
   output visually without a second layer of card chrome. */
.results-grid article,
.primary-output-card {
  position: relative;
  display: grid;
  gap: 12px;
  animation: fadeUp 0.65s ease-out both;
}

.results-grid article:nth-child(1) {
  animation-delay: 0.04s;
}

.results-grid article:nth-child(2) {
  animation-delay: 0.08s;
}

.results-grid article:nth-child(3) {
  animation-delay: 0.12s;
}

.results-grid article:nth-child(4) {
  animation-delay: 0.16s;
}

.results-grid article header,
.primary-output-card header {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(234, 243, 241, 0.95);
  color: #224249;
  font-size: 0.79rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgba(12, 120, 111, 0.08);
}

/* Width-capped (not height-capped) on purpose: the old max-height, paired
   with .primary-output-card img's min-height below, clamped the image's
   rendered height into a fixed 360-410px band regardless of how wide its
   grid cell was. On a wide viewport the cell (and therefore the img,
   which stretches to fill it by grid default) could be far wider than
   that band implies for a real 4:3 image, so with no explicit width the
   box just stretched edge to edge instead of keeping its proportions -
   most obvious with no photo loaded yet, since the placeholder gradient
   below has no content to visually reveal the distortion. Capping width
   and driving height off aspect-ratio keeps it a true 4:3 box that
   centers in the (still full-width) dark viewer-shell around it. */
.results-grid img {
  justify-self: center;
  width: min(100%, 560px);
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 14px;
}

.primary-output-card {
  min-height: 0;
}

.primary-output-card img {
  background:
    linear-gradient(180deg, rgba(233, 240, 239, 0.9), rgba(249, 251, 250, 0.95));
  box-shadow: inset 0 0 0 1px rgba(var(--surface-rgb), 0.54);
}

.three-d-canvas-mount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  border-radius: 14px;
  padding: 16px;
  color: rgba(236, 245, 247, 0.72);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  overflow: hidden;
}

.three-d-canvas-mount canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

a.viewer-meta {
  text-decoration: none;
}

.fluid-result {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(47, 111, 179, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(246, 251, 255, 0.98), rgba(var(--surface-rgb), 0.96));
}

.fluid-result[hidden] {
  display: none;
}

.fluid-result-kicker {
  margin: 0;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.fluid-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#tbsaResult .fluid-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fluid-result-grid div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 111, 179, 0.12);
  border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.92);
}

.fluid-result-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.fluid-result-grid strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.fluid-result small {
  color: var(--muted);
  line-height: 1.5;
}

.viewer-shell {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 34, 42, 0.88), rgba(23, 43, 51, 0.94));
  box-shadow: inset 0 0 0 1px rgba(var(--surface-rgb), 0.06), 0 18px 34px rgba(8, 18, 22, 0.2), 0 0 40px rgba(52, 211, 153, 0.06);
  overflow: hidden;
}

.viewer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 18%, rgba(var(--surface-rgb), 0.08) 34%, transparent 56%);
  transform: translateX(-120%);
}

.viewer-toolbar,
.viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Apple-style "green glass" pills: a frosted mint-tinted chip instead of
   the previous flat translucent-grey ones, with real internal padding so
   the label never sits flush against the pill's own edge. min-width: 0
   is required for the ellipsis truncation to actually kick in inside a
   flex row - a flex item's default min-width is its content size, which
   otherwise silently overrides max-width and lets the label overflow the
   card instead of truncating. */
.viewer-pill,
.viewer-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  border-radius: 999px;
  padding: 5px 13px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.28), rgba(16, 185, 129, 0.14));
  color: #eafff5;
  border: 1px solid rgba(110, 231, 183, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(16, 185, 129, 0.16);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}

.viewer-toolbar .viewer-pill.subtle,
.viewer-footer .viewer-meta {
  background: rgba(52, 211, 153, 0.1);
  color: rgba(223, 255, 240, 0.82);
  border-color: rgba(110, 231, 183, 0.18);
  box-shadow: none;
}

.viewer-footer .viewer-meta.emphasis {
  margin-left: auto;
}

.viewer-toolbar .viewer-pill:last-child {
  margin-left: auto;
}

button.viewer-pill.toggle {
  box-shadow: none;
  cursor: pointer;
  background: rgba(52, 211, 153, 0.2);
  color: #eafff5;
  border-color: rgba(110, 231, 183, 0.32);
}

button.viewer-pill.toggle:hover {
  transform: none;
  background: rgba(52, 211, 153, 0.32);
}

.viewer-meta.emphasis {
  background: rgba(52, 211, 153, 0.24);
  color: #eafff5;
  border-color: rgba(110, 231, 183, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(16, 185, 129, 0.2);
}

.image-card:hover .viewer-shell::before,
body.is-processing .viewer-shell::before {
  animation: scanSweep 1.6s ease-out;
}

.roadmap-card {
  grid-column: 1 / -1;
}

.clinical-support-card {
  grid-column: 1 / -1;
}

.image-card {
  gap: 14px;
}

.image-card header::before {
  content: "";
  width: 9px;
  aspect-ratio: 1;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(var(--surface-rgb), 0.55);
}

.background-card {
  background:
    linear-gradient(180deg, rgba(240, 252, 249, 0.98), rgba(var(--surface-rgb), 0.95));
}

.background-card::before {
  background: linear-gradient(90deg, rgba(19, 138, 122, 0.88), rgba(108, 204, 188, 0.82));
}

.background-card header {
  background: rgba(219, 246, 239, 0.95);
  color: #116d63;
  box-shadow: inset 0 0 0 1px rgba(12, 120, 111, 0.1);
}

.overlay-card {
  background:
    linear-gradient(180deg, rgba(244, 249, 255, 0.98), rgba(var(--surface-rgb), 0.95));
}

.overlay-card::before {
  background: linear-gradient(90deg, rgba(75, 143, 209, 0.9), rgba(137, 194, 235, 0.82));
}

.overlay-card header {
  background: rgba(225, 239, 255, 0.95);
  color: #2d5f95;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 179, 0.1);
}

.coming-soon-card {
  align-content: start;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(246, 251, 255, 0.98), rgba(var(--surface-rgb), 0.96));
  border-color: rgba(95, 169, 214, 0.2);
  animation: fadeUp 0.72s ease-out both;
}

.coming-soon-card strong {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(225, 244, 255, 0.98), rgba(209, 235, 252, 0.95));
  color: #2f6797;
  font-size: 0.86rem;
  box-shadow: inset 0 0 0 1px rgba(75, 143, 209, 0.12);
}

.coming-soon-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 68ch;
}

.support-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.support-preview-grid div {
  display: grid;
  gap: 6px;
  padding: 14px 12px;
  border: 1px solid rgba(95, 169, 214, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.98), rgba(243, 250, 255, 0.94));
  box-shadow: 0 12px 24px rgba(79, 136, 171, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.support-preview-grid div:hover {
  transform: translateY(-3px);
}

.roadmap-tile {
  position: relative;
}

.roadmap-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: rgba(95, 169, 214, 0.44);
}

.support-preview-grid span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(230, 245, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
  color: #2e6b92;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.support-preview-grid strong {
  display: block;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #224256;
  font-size: 0.98rem;
  line-height: 1.3;
}

.support-preview-grid small {
  color: var(--muted);
  line-height: 1.5;
}

.roadmap-card .support-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clinical-support-card::before {
  background: linear-gradient(90deg, rgba(86, 173, 214, 0.92), rgba(139, 213, 237, 0.82));
}

.clinical-support-card header {
  background: rgba(228, 243, 255, 0.94);
  color: #2b648e;
  box-shadow: inset 0 0 0 1px rgba(75, 143, 209, 0.12);
}

.roadmap-card {
  background:
    linear-gradient(180deg, rgba(241, 251, 248, 0.98), rgba(var(--surface-rgb), 0.96));
  border-color: rgba(76, 173, 154, 0.18);
}

.roadmap-card::before {
  background: linear-gradient(90deg, rgba(29, 160, 141, 0.9), rgba(118, 216, 195, 0.8));
}

.roadmap-card header {
  background: rgba(223, 247, 241, 0.95);
  color: #177565;
  box-shadow: inset 0 0 0 1px rgba(29, 160, 141, 0.12);
}

.roadmap-card strong {
  background: linear-gradient(180deg, rgba(224, 247, 241, 0.98), rgba(205, 241, 232, 0.95));
  color: #177565;
  box-shadow: inset 0 0 0 1px rgba(29, 160, 141, 0.12);
}

.roadmap-card .support-preview-grid div {
  border-color: rgba(29, 160, 141, 0.14);
  background:
    linear-gradient(180deg, rgba(var(--surface-rgb), 0.98), rgba(238, 249, 246, 0.94));
  box-shadow: 0 12px 24px rgba(29, 160, 141, 0.08);
}

.roadmap-card .support-preview-grid span {
  background: rgba(220, 246, 238, 0.94);
  color: #177565;
}

.roadmap-card .roadmap-tile::before {
  background: rgba(29, 160, 141, 0.5);
}

.roadmap-tile.status-research {
  border-color: rgba(212, 138, 29, 0.16);
}

.roadmap-tile.status-research::before {
  background: rgba(212, 138, 29, 0.58);
}

.roadmap-tile.status-planned {
  border-color: rgba(47, 111, 179, 0.16);
}

.roadmap-tile.status-planned::before {
  background: rgba(47, 111, 179, 0.58);
}

.roadmap-tile.status-validation {
  border-color: rgba(40, 122, 73, 0.16);
}

.roadmap-tile.status-validation::before {
  background: rgba(40, 122, 73, 0.58);
}

.roadmap-tile.status-validation span {
  background: rgba(221, 244, 228, 0.96);
  color: #236946;
}

.roadmap-tile.status-planned span {
  background: rgba(222, 236, 255, 0.94);
  color: #225388;
}

.disclaimer {
  color: var(--muted);
}

@keyframes heroPulse {

  0%,
  100% {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(0);
  }

  50% {
    box-shadow: 0 14px 32px rgba(66, 204, 189, 0.16);
    transform: translateY(-1px);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.disclaimer {
  margin: 16px 0 0;
  font-size: 0.82rem;
}

@keyframes gridDrift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 42px 42px;
  }
}

@keyframes shellEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes panelEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes panelShine {

  0%,
  52%,
  100% {
    transform: translateX(-120%);
  }

  72% {
    transform: translateX(120%);
  }
}

@keyframes scanSweep {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

@keyframes monitorSweep {
  from {
    transform: translateX(-130%);
  }

  to {
    transform: translateX(130%);
  }
}

@keyframes pulseDot {

  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(12, 120, 111, 0.12);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(12, 120, 111, 0.05);
  }
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes flowPulse {
  from {
    background-position: 220% 0;
  }

  to {
    background-position: -40% 0;
  }
}

@keyframes arrowFlow {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes nodeBreathe {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(12, 120, 111, 0.12), 0 0 0 0 rgba(12, 120, 111, 0.16);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(12, 120, 111, 0.32), 0 0 14px 4px rgba(12, 120, 111, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 860px) {
  .app-with-sidebar {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    max-width: 82vw;
    height: 100vh;
    border-radius: 0 22px 22px 0;
    transform: translateX(-105%);
    transition: transform 220ms ease;
    z-index: 50;
  }

  .app-sidebar.sidebar-open {
    transform: translateX(0);
  }

  .app-main-area {
    padding-top: 52px;
  }

  .dashboard-ambient-container {
    height: auto;
    overflow: visible;
  }

  .app-main-tab-panel {
    overflow-y: visible;
  }
}

@media (max-width: 980px) {

  .landing-hero,
  .landing-card-grid {
    grid-template-columns: 1fr;
  }

  .landing-cta-band {
    display: grid;
    justify-items: start;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .result-panel {
    min-height: auto;
  }

  .diagnostic-hero {
    grid-template-columns: 1fr;
  }

  .diagnostic-hero-visual {
    min-height: 180px;
  }

  .roadmap-card .support-preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .app-shell {
    padding: 12px;
  }

  .landing-nav,
  .landing-actions {
    display: grid;
  }

  .landing-brand-lockup {
    display: grid;
    justify-items: start;
  }

  .landing-copy,
  .landing-band,
  .landing-visual {
    padding: 18px;
  }

  .partner-gallery {
    grid-template-columns: 1fr;
    padding: 18px 18px 0;
  }

  .partner-copy,
  .landing-cta-band {
    padding: 18px;
  }

  .topbar,
  .result-header {
    display: grid;
  }

  .topbar .status-pill {
    position: static;
    justify-self: center;
  }

  .pipeline-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pipeline-progress-head {
    flex-direction: column;
  }

  .pipeline-progress-meta {
    justify-content: flex-start;
  }

  .diagnostic-hero {
    padding: 18px 16px;
  }

  .diagnostic-hero h3 {
    font-size: 1.55rem;
  }

  .hero-readout {
    position: static;
    margin-top: 8px;
  }

  .diagnostic-hero-visual {
    display: grid;
    gap: 10px;
    padding: 16px;
  }

  .results-grid,
  .actions {
    grid-template-columns: 1fr;
  }

  .support-preview-grid {
    grid-template-columns: 1fr;
  }

  .fluid-result-grid {
    grid-template-columns: 1fr;
  }

  .flow-diagram {
    flex-wrap: wrap;
  }

  .flow-node {
    flex: 1 1 calc(50% - 4px);
  }

  .flow-arrow {
    display: none;
  }

  .primary-output-card {
    grid-row: auto;
  }

  .primary-output-card img {
    min-height: auto;
  }

  .three-d-canvas-mount {
    min-height: 260px;
  }
}

/* Auth screens (login / admin sign-in) */
.auth-shell {
  display: grid;
  gap: 22px;
  justify-items: center;
  padding-top: 8vh;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(440px, 100%);
  padding: 14px 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 20px;
  background: rgba(var(--surface-rgb), 0.74);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 32px rgba(var(--ink-rgb), 0.08);
}

.auth-brand {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.auth-card {
  position: relative;
  overflow: hidden;
  width: min(440px, 100%);
  padding: 34px 34px 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 26px;
  background: rgba(var(--surface-rgb), 0.36);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 60px rgba(255, 255, 255, 0.08), 0 24px 54px rgba(var(--ink-rgb), 0.14), 0 0 46px rgba(15, 138, 118, 0.16);
  text-align: left;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22) 0%, transparent 30%, transparent 72%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
}

.auth-card>* {
  position: relative;
  z-index: 1;
}

.auth-card-wide {
  width: min(560px, 100%);
}

.auth-card h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.auth-subtitle {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Account Admin's cards span the full main-content width (unlike the
   compact centered auth-card the same .auth-form markup sits in on
   login/request-access) - without a cap here, a single-column input like
   Full Name stretches edge-to-edge on a wide desktop display instead of
   staying a readable text-field width. */
.admin-card-full .auth-form {
  max-width: 640px;
}

/* Every card inside an Account Admin sub-tab (forms, the pending-requests
   list, the sessions/accounts tables) - not just the create-account form -
   otherwise stretches to the tab panel's full width on a wide desktop
   display, spreading short rows/fields across a huge blank gap. Capping
   the card itself, rather than each widget individually, fixes every
   sub-tab (Users & Access, System & Limits, Clinical & AI, Storage &
   Data, Audit & Security) in one place. A table wider than this (like
   Accounts, at 920px min) still scrolls fine inside its own
   .table-scroll. */
.admin-sub-tab-panel .admin-card-full {
  max-width: 1040px;
}

.form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* App-wide form field glass material - every text input across the app
   (including every Account Admin form) renders through .form-field input,
   so tuning it here (matching .case-search-input's recipe) is what makes
   the glass look consistent everywhere instead of Case History alone. */
.form-field input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.form-field input:focus {
  outline: none;
  border-color: rgba(15, 138, 118, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(15, 138, 118, 0.16);
  background: rgba(var(--surface-rgb), 0.75);
}

.form-field-checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

/* iOS-style toggle switch (still a real <input type="checkbox"> - only the
   visual is replaced, so every existing .checked/change-event handler
   keeps working unchanged) instead of a plain native checkbox, for the
   boolean settings toggles in Account Admin (quality checks, 2D doubling,
   require-password-change, etc). */
.form-field-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-height: 0;
  width: 46px;
  height: 27px;
  margin-top: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.18);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease;
}

.form-field-checkbox input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-field-checkbox input:checked {
  background: var(--teal);
}

.form-field-checkbox input:checked::before {
  transform: translateX(19px);
}

.form-field-checkbox input:focus-visible {
  outline: 2px solid rgba(15, 138, 118, 0.45);
  outline-offset: 2px;
}

.form-field-checkbox span {
  display: grid;
  gap: 2px;
}

.form-field-checkbox strong {
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}

.form-field-checkbox small {
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #5c7684;
}

.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 56px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 32px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--teal);
}

.form-hint {
  display: block;
  margin-top: -6px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.form-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-size: 0.92rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.form-field textarea:focus {
  outline: none;
  border-color: rgba(15, 138, 118, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(15, 138, 118, 0.16);
  background: rgba(var(--surface-rgb), 0.75);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.settings-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-form .form-field {
  width: 160px;
}

.form-section-label {
  margin: 4px 0 -4px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-section-label:first-child {
  padding-top: 0;
  border-top: none;
}

@media (max-width: 520px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.92rem;
}

.settings-save {
  width: auto;
  min-width: 120px;
  margin-top: 0;
}

.auth-alert {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 237, 233, 0.92);
  border: 1px solid rgba(214, 85, 74, 0.28);
  color: var(--red);
  font-size: 0.86rem;
  font-weight: 700;
}

.auth-alert.success {
  background: rgba(225, 245, 240, 0.92);
  border-color: rgba(15, 138, 118, 0.28);
  color: var(--teal);
}

.auth-alert.pending {
  background: rgba(253, 243, 224, 0.92);
  border-color: rgba(226, 169, 59, 0.32);
  color: var(--amber);
}

.auth-back[hidden] {
  display: none;
}

.auth-back {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.auth-back:first-of-type {
  margin-top: 22px;
}

.auth-back:hover {
  color: var(--ink);
}

/* Admin dashboard */
.admin-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logout-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.7);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.logout-button:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 85, 74, 0.4);
  color: var(--red);
  box-shadow: 0 12px 26px rgba(var(--ink-rgb), 0.1);
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-card {
  padding: 30px 30px 28px;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.admin-card:hover {
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 60px rgba(255, 255, 255, 0.1),
    0 28px 60px rgba(var(--ink-rgb), 0.12),
    0 0 56px rgba(15, 138, 118, 0.22);
}

.admin-card-full {
  margin-top: 20px;
}

.admin-card h1 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.admin-user-count[hidden] {
  display: none;
}

.admin-user-count {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-user-name {
  font-weight: 800;
  color: var(--ink);
  font-size: 0.92rem;
}

.admin-user-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-user-line {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-user-notes {
  color: var(--muted);
  font-style: italic;
}

.admin-user-last-login {
  padding-top: 6px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.1);
  color: var(--muted);
  font-size: 0.76rem;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(47, 111, 179, 0.1);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.role-badge.admin {
  background: rgba(15, 138, 118, 0.12);
  color: var(--teal);
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--green);
}

.status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34, 122, 83, 0.14);
}

.status-dot.disabled {
  color: var(--muted);
}

.status-dot.disabled::before {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 85, 74, 0.14);
}

.admin-empty {
  padding: 18px 14px;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

.admin-request-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.request-action-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  background: rgba(var(--surface-rgb), 0.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.table-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.request-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(var(--ink-rgb), 0.1);
}

.request-action-btn.approve {
  border-color: rgba(15, 138, 118, 0.4);
  color: var(--teal);
}

.request-action-btn.reject {
  border-color: rgba(214, 85, 74, 0.4);
  color: var(--red);
}

.request-action-btn:disabled,
.request-action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.case-list-item-disabled {
  cursor: default;
  opacity: 0.7;
}

@media (max-width: 760px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Upload dedup modal + slow-network banner */
.network-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 247, 227, 0.94);
  border: 1px solid rgba(212, 138, 29, 0.32);
  color: #7a5209;
  font-size: 0.88rem;
  font-weight: 700;
}

.network-banner button {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(16, 30, 40, 0.46);
  backdrop-filter: blur(4px);
}

/* This modal's own content (photo grid) can get tall enough that
   vertically centering it (the .modal-overlay default) pushes its
   bottom - the Photos/Videos filter row, the selection footer - off the
   bottom of the screen. Anchoring it near the top instead means it never
   goes lower than it needs to; overflow-y: auto above still scrolls the
   card itself if the grid is taller than the viewport allows. */
#existingUploadModal {
  align-items: flex-start;
  padding-top: 48px;
}

/* .modal-card's own margin: auto self-centers it vertically as a flex
   item, which overrides the overlay's align-items: flex-start above no
   matter what that's set to - auto margins on a flex item always win
   over the container's alignment on that axis. Zeroing out just the
   top/bottom margin here (keeping left/right auto for horizontal
   centering) is what actually lets it dock near the top. */
#existingUploadModal .existing-upload-modal-card {
  margin: 0 auto;
}

/* Confirm-delete dialogs that can be triggered from inside another
   already-open .modal-overlay (e.g. Upload History's per-photo/batch
   delete, opened from within the Patient Uploads modal) need to sit
   above that modal, not tie with it at the same z-index - a tie is
   resolved by DOM order, and the other modal is appended to <body>
   later at runtime, so it was winning and covering the confirm dialog. */
#deleteHistoryBatchModal,
#deleteAttachmentModal,
#deleteRunModal {
  z-index: 60;
}

.image-preview-overlay {
  z-index: 70;
  cursor: zoom-out;
}

.image-preview-img,
.image-preview-video {
  max-width: min(90vw, 720px);
  max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(16, 30, 40, 0.45);
  object-fit: contain;
  cursor: default;
}

.image-preview-frame {
  width: min(90vw, 860px);
  height: 85vh;
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(16, 30, 40, 0.45);
  cursor: default;
}

.image-preview-close {
  position: fixed;
  top: 18px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 30, 40, 0.55);
  color: #fff;
  cursor: pointer;
}

.image-preview-close:hover {
  background: rgba(16, 30, 40, 0.8);
}

.modal-card {
  margin: auto;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.modal-card {
  width: min(520px, 100%);
  padding: 28px 28px 24px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 253, 250, 0.9) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 24px 60px -12px rgba(15, 118, 110, 0.22),
    0 8px 24px -4px rgba(15, 23, 42, 0.08),
    inset 0 1px 1px #ffffff;
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
}

.modal-card h3 {
  margin: 0 0 10px;
  font-family: "IBM Plex Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 1.25rem;
  color: var(--ink);
}

.modal-card p {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-actions .landing-cta {
  width: 100%;
  min-height: 46px;
  border: none;
  cursor: pointer;
}

.modal-actions .logout-button {
  align-self: center;
  min-width: 100px;
}

/* Admin accounts table */
.table-scroll {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(var(--surface-rgb), 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* width: auto (not 100%) so the table sizes to its actual columns instead
   of force-stretching to fill a wide container - on a large desktop
   display, a full-width table with only a handful of short-value columns
   (username, role, status) spread those values across huge, sparse gaps.
   min-width keeps it from cramping on narrower screens; .table-scroll's
   overflow-x handles anything still too wide for the viewport. */
.data-table {
  width: auto;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.data-table thead {
  background: rgba(var(--ink-rgb), 0.04);
}

.data-table th {
  padding: 10px 12px;
  text-align: left;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(199, 214, 216, 0.9);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(199, 214, 216, 0.55);
  color: var(--text-secondary);
  vertical-align: middle;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: rgba(15, 138, 118, 0.05);
}

.data-table-strong {
  font-weight: 800;
  color: var(--ink);
}

.data-table-notes {
  max-width: 220px;
}

.data-table td.admin-empty {
  text-align: center;
  white-space: normal;
  max-width: none;
}

.case-grid,
.case-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 16px;
}

.case-card {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  border-color: rgba(47, 111, 179, 0.3);
  outline: none;
}

.case-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.05);
}

.case-card-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  padding: 10px;
}

.case-image-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* Filenames (e.g. IMG_20260714_111239_2.jpg) are one long unbroken token -
   without this they overflowed the fixed-width card instead of wrapping,
   spilling text across neighboring cards. */
.case-image-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Base size for every .case-card-thumb (buildImageCard's photo, used in the
   run detail's "Burn Detection" grid). Without an explicit size here, the
   <img> rendered at its native upload resolution (often several thousand
   pixels wide from a phone camera) and overflowed its grid cell, making
   neighboring photo cards visually overlap/stack on top of each other.
   .case-list-item-row .case-card-thumb below overrides this to a small
   64x64 thumb for that specific compact-row context. */
.case-card-thumb {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

/* Original / Background Removed / Burn Detected / 3D Model, one button
   each (per an explicit ask to stop mixing all of a run's result types
   into one grid) - only one category's panel is shown at a time. */
.case-image-tabs-wrap {
  display: grid;
  gap: 12px;
}

/* Same segmented-control glass track as .case-filter-chips - one shared
   "material" language for every group of mutually-exclusive buttons. */
.case-image-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(var(--ink-rgb), 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: fit-content;
}

.case-image-tab-btn {
  padding: 7px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.case-image-tab-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

.case-image-tab-btn.active {
  background: rgba(var(--surface-rgb), 0.95);
  border-color: rgba(255, 255, 255, 0.7);
  color: #0f766e;
  box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Case History list - collapsible rows (mirrors the mobile app's Case
   History screen: tap a row to expand a lightweight run summary in place,
   instead of navigating straight to a full detail page). */
.case-list {
  /* Matches .upload-history-patient-list's track width/gap - both grids
     render the same .patient-grid-card markup, so this keeps Case History
     cards the same compact size as Upload History's instead of stretching
     them wider just because this grid used a bigger minmax(). */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.case-list-toolbar {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

/* Case History toolbar - iOS-style search field + segmented filter
   control, matching the same frosted-glass material (blur + saturate) as
   .modal-card and every .landing-copy panel elsewhere in the app, instead
   of the flat opaque fields these started as. */
.case-search-input {
  min-height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0 14px;
  background: rgba(var(--surface-rgb), 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-size: 0.9rem;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.case-search-input:focus {
  outline: none;
  border-color: rgba(15, 138, 118, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(15, 138, 118, 0.16);
}

/* Segmented-control track (like iOS's UISegmentedControl) - the chips sit
   in a shared glass "well" instead of floating individually. */
.case-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(var(--ink-rgb), 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: fit-content;
}

.case-filter-chip {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.case-filter-chip:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* The selected segment reads as a lifted glass pill floating over the
   track, the same "material" cue used everywhere else in the app. */
.case-filter-chip.active {
  background: rgba(var(--surface-rgb), 0.95);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--teal);
  box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.case-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0 20px 0;
}

.case-tools-grid a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: #f8fafc;
  color: #0f766e;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.case-tools-grid a:hover {
  background: #f0fdf4;
  border-color: #0f766e;
}

.upload-history-container {
  margin: 10px 0 20px 0;
}

.upload-data-panel {
  display: grid;
  gap: 12px;
  margin: 10px 0 24px;
  padding: 18px;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 18px;
  background: rgba(var(--surface-rgb), 0.7);
}

.upload-data-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.upload-data-selected-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(19, 138, 122, 0.1);
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
}

.upload-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.upload-history-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.upload-history-item img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
}

.upload-history-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 2rem;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}

.upload-history-item-meta {
  padding: 6px 8px;
  font-size: 0.72rem;
  color: var(--muted);
}

.upload-history-item-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.upload-history-item-delete:hover {
  background: #b8392f;
}

.case-list-item {
  padding: 0;
  overflow: hidden;
}

.case-list-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}

.case-list-item-row:focus-visible {
  outline: 2px solid rgba(47, 111, 179, 0.5);
  outline-offset: -2px;
}

.case-list-item-row .case-card-thumb {
  width: 64px;
  height: 64px;
  aspect-ratio: auto;
  flex-shrink: 0;
}

.case-list-item-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.case-list-item-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.case-list-item-chevron {
  font-size: 1.1rem;
  color: var(--muted);
  flex-shrink: 0;
}

.case-list-item-runs {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}

.case-run-summary-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--teal);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.case-run-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.04);
  margin-bottom: 8px;
}

.case-run-summary-row:last-child {
  margin-bottom: 0;
}

a.request-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

.case-run-summary-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Case detail's patient info card - mirrors the mobile apps' CaseDetailScreen
   patient header (name/age/gender/phone, display-ID badge, medical history/
   allergies, vitals grid, uploaded-by line). */
.case-patient-info-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
}

.case-patient-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-patient-info-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.12);
  font-size: 1.1rem;
}

.case-patient-info-name-block {
  flex: 1 1 auto;
  min-width: 0;
}

.case-patient-info-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-patient-info-meta {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.case-patient-info-badges {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.case-patient-info-history {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}

.case-patient-vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.case-vital-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
}

.case-vital-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-vital-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.case-patient-info-uploaded-by,
#casePatientUploadedByLine {
  margin: 0;
}

.job-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(var(--ink-rgb), 0.04);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 160ms ease;
}

.job-history-toggle:hover {
  background: rgba(var(--ink-rgb), 0.07);
}

.job-history-toggle-chevron {
  transition: transform 180ms ease;
  color: var(--muted);
}

.job-history-toggle-chevron.open {
  transform: rotate(180deg);
}

.run-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(47, 111, 179, 0.08);
  border: 1px solid rgba(47, 111, 179, 0.2);
  margin-bottom: 16px;
}

.run-filter-banner p {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.case-status-section {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.case-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.case-status-row label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}

.case-status-row select {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.case-status-row select:focus {
  outline: none;
  border-color: rgba(15, 138, 118, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(15, 138, 118, 0.16);
}

.case-status-row select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.case-threed-block {
  margin: 16px 0;
  padding: 16px;
  border-radius: 14px;
  background: rgba(47, 111, 179, 0.06);
}

.case-threed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.case-run {
  margin-top: 22px;
}

.case-run-header {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 8px;
}

.case-run-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.case-run-header-row .case-run-header {
  margin-bottom: 0;
}

.case-run-plain {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.case-run-3d-card {
  border: 1px solid rgba(34, 122, 83, 0.35);
  background: rgba(34, 122, 83, 0.05);
  border-radius: 16px;
  padding: 18px;
}

.case-run-3d-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.case-run-3d-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--ink);
}

.case-run-subsection-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 16px 0 8px;
}

.case-run-subsection {
  background: rgba(var(--surface-rgb), 0.6);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.case-threed-viewer {
  grid-column: 1 / -1;
  height: 340px;
  border-radius: 12px;
  background: #101c26;
  position: relative;
  overflow: hidden;
}

.case-threed-viewer canvas {
  display: block;
}

.case-threed-viewer-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--surface-rgb), 0.75);
  font-size: 0.8rem;
  text-align: center;
  padding: 16px;
  pointer-events: none;
}

.case-threed-toggle {
  grid-column: 1 / -1;
  justify-self: end;
}

.case-threed-metrics {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.case-threed-metric span {
  display: block;
}

.case-threed-metric .metric-label {
  font-size: 0.68rem;
  color: var(--muted);
}

.case-threed-metric .metric-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--red);
}

.case-threed-metric .metric-value.teal {
  color: var(--teal);
}

.case-threed-metric .metric-value.blue {
  color: var(--blue);
}

.case-threed-fluid-title {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: -4px;
}

.clinical-notes-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.clinical-note-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.clinical-note-form {
  padding: 16px;
  border: 1px solid rgba(95, 169, 214, 0.2);
  border-radius: 16px;
  background: rgba(var(--surface-rgb), 0.5);
}

.clinical-note-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

/* Patient registration panel (add-patient.html) - mirrors the mobile app's
   AddPatientScreen: fill in patient + vitals, save, then continue to image
   processing for that case. */
.patient-form-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(95, 169, 214, 0.2);
  border-radius: 16px;
  background: rgba(var(--surface-rgb), 0.5);
}

.patient-form-panel-bare {
  padding: 0;
  margin-bottom: 0;
  border: none;
  background: none;
}

.patient-saved-panel {
  display: grid;
  gap: 12px;
}

/* Shows which case the upload workspace (portal.html) is currently attached
   to, since patient/case selection no longer happens on this page. */
.active-case-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(47, 111, 179, 0.08);
  border: 1px solid rgba(47, 111, 179, 0.2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.active-case-banner.error {
  background: rgba(214, 85, 74, 0.08);
  border-color: rgba(214, 85, 74, 0.28);
  color: var(--red);
}

/* PATIENT HIGHLIGHTS GRID & CARDS */
.patient-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

.patient-highlight-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(15, 118, 110, 0.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
}

.patient-highlight-card:hover {
  background: #ffffff;
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 14px 32px -6px rgba(15, 118, 110, 0.18);
  transform: translateY(-3px);
}

.patient-highlight-media {
  position: relative;
  height: 95px;
  background: linear-gradient(135deg, #065f46 0%, #0f766e 55%, #0d9488 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.patient-highlight-tag {
  align-self: flex-end;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.patient-highlight-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.patient-highlight-body {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
}

.patient-highlight-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.patient-highlight-arrow {
  font-size: 1rem;
  color: #0f766e;
  font-weight: 800;
  transition: transform 180ms ease;
}

.patient-highlight-card:hover .patient-highlight-arrow {
  transform: translateX(4px);
}

/* Mobile-style Upload History (mirrors the Android/iOS apps' Upload
   History screen): one accordion card per patient, expanding into four
   fixed category rows (Photos/Videos/Day Progression/Reports), each
   expanding into its own batches. */
/* RESPONSIVE PORTRAIT PATIENT GRID (MATCHING REFERENCE UI) */
.upload-history-patient-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  width: 100%;
}

/* PREMIUM VERTICAL PORTRAIT PATIENT CARD */
.patient-grid-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 10px 24px -10px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 #ffffff;
  transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.patient-grid-card:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: #ffffff;
  box-shadow:
    0 16px 32px -10px rgba(15, 118, 110, 0.2),
    inset 0 1px 0 #ffffff;
  transform: translateY(-3px);
}

.patient-grid-card-media {
  position: relative;
  height: 88px;
  background: linear-gradient(140deg, #065f46 0%, #0f766e 45%, #0d9488 80%, #14b8a6 100%);
  border-bottom: 1.5px solid rgba(15, 118, 110, 0.15);
}

.patient-grid-card-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  letter-spacing: 0.02em;
}

.patient-grid-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 10px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.88) 100%);
}

.patient-grid-card-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-grid-card-body {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.patient-grid-card-meta {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}

.patient-grid-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.patient-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 9px;
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.patient-stat-chip .icon-svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.patient-stat-chip.photos {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.patient-stat-chip.video {
  background: rgba(47, 111, 179, 0.12);
  color: #2f6fb3;
}

.patient-stat-chip.days {
  background: rgba(176, 130, 26, 0.12);
  color: #b0821a;
}

.patient-stat-chip.reports {
  background: rgba(34, 153, 84, 0.12);
  color: #229954;
}

.patient-grid-card-footer {
  padding: 0 12px 12px;
  margin-top: auto;
}

.patient-grid-card-cta {
  width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(15, 118, 110, 0.22);
  background: #ffffff;
  color: #0f766e;
  font-weight: 800;
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 4px 14px -2px rgba(15, 118, 110, 0.09);
}

.patient-grid-card:hover .patient-grid-card-cta {
  background: #0f766e;
  color: #ffffff;
  border-color: #0f766e;
  box-shadow: 0 8px 20px -2px rgba(15, 118, 110, 0.28);
}

.patient-upload-modal-card {
  max-width: 900px;
  width: 90%;
  max-height: 88vh;
  overflow-y: auto;
}

.upload-history-category-grid {
  display: flex;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  padding: 3px;
  background: rgba(120, 120, 128, 0.12);
  border-radius: 12px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .upload-history-category-grid {
    flex-wrap: wrap;
  }

  .upload-history-category-card {
    flex-basis: calc(50% - 3px);
  }
}

.upload-history-category-card {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
}

.upload-history-category-card:hover:not(:disabled):not(.active) {
  background: rgba(255, 255, 255, 0.5);
}

.upload-history-category-card.active {
  background: linear-gradient(180deg, rgba(16, 139, 127, 0.96), rgba(11, 109, 101, 0.98));
  box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.35);
}

.upload-history-category-card.active .upload-history-category-title,
.upload-history-category-card.active .upload-history-category-chevron {
  color: var(--on-accent);
}

.upload-history-category-card.active .upload-history-category-icon,
.upload-history-category-card.active .upload-history-category-badge {
  background: #ffffff;
  color: var(--teal);
}

.upload-history-category-card:disabled {
  cursor: default;
  opacity: 0.4;
}

.upload-history-category-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upload-history-category-card-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upload-history-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(var(--cat-rgb), 0.14);
  color: rgb(var(--cat-rgb));
}

.upload-history-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(var(--cat-rgb), 0.14);
  color: rgb(var(--cat-rgb));
}

.upload-history-category-icon .icon-svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upload-history-category-card.cat-photos {
  --cat-rgb: 15, 138, 118;
}

.upload-history-category-card.cat-video {
  --cat-rgb: 47, 111, 179;
}

.upload-history-category-card.cat-day {
  --cat-rgb: 176, 130, 26;
}

.upload-history-category-card.cat-report {
  --cat-rgb: 34, 153, 84;
}

.upload-history-category-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.upload-history-category-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-history-category-detail {
  display: none;
}

.upload-history-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(var(--cat-rgb), 0.14);
  color: rgb(var(--cat-rgb));
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}

.upload-history-category-chevron {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
}

.upload-history-category-body {
  padding: 10px 4px 4px 4px;
  display: grid;
  gap: 14px;
}

.upload-history-batch-block {
  display: grid;
  gap: 8px;
}

.upload-history-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-history-batch-header strong {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
}

.upload-history-batch-delete {
  border: none;
  background: none;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}

.upload-history-row-list {
  display: grid;
  gap: 6px;
}

.upload-history-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.upload-history-row-item a,
.upload-history-row-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  text-align: left;
}

.upload-history-row-link {
  background: none;
  border: none;
  min-height: 0;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
}

.upload-history-row-item a:hover,
.upload-history-row-link:hover {
  color: var(--teal);
  text-decoration: underline;
}

.upload-history-empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
}

.upload-history-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(15, 138, 118, 0.12);
  color: var(--teal);
  font-size: 1.6rem;
}

/* Dashboard "Start Here" step (dashboard.html) - mirrors the mobile app's
   ServiceDashboard card offering Add Patient / Existing Patient before any
   image processing screen. */
.dashboard-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.dashboard-start-actions .landing-cta {
  flex: 1;
  min-width: 220px;
}

.dashboard-service-card {
  display: grid;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
}

/* Dashboard greeting hero + stat cards + charts + recent cases - the
   graphical, at-a-glance summary above the Start Here step. Every number
   here comes from the caller's own /api/cases (no fabricated metrics). */
.dashboard-greeting {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f8a76, #12a58f);
  color: #f2fffc;
}

.dashboard-greeting-copy p.landing-kicker {
  color: rgba(242, 255, 252, 0.78);
}

.dashboard-greeting h1 {
  margin: 4px 0 6px;
  font-size: 1.5rem;
  color: #ffffff;
}

.dashboard-greeting-copy p.auth-subtitle {
  color: rgba(242, 255, 252, 0.86);
  max-width: 46ch;
}

.dashboard-greeting .landing-cta.primary {
  background: #ffffff;
  color: #0f8a76;
  border-color: #ffffff;
  margin-top: 10px;
}

/* Mirrors the mobile apps' GradientActionTile - the two large tappable
   home-choice tiles (Upload Data / AI Burn Analysis), rather than plain
   buttons. */
.home-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.home-choice-tile {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-height: 150px;
  padding: 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(var(--ink-rgb), 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-choice-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(var(--ink-rgb), 0.18);
}

.home-choice-tile-blue {
  background: linear-gradient(135deg, #2f6da8, #4a8fd1);
}

.home-choice-tile-teal {
  background: linear-gradient(135deg, #0f8a76, #16b39b);
}

.home-choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.3rem;
  color: #ffffff;
}

.home-choice-icon .icon-svg {
  width: 24px;
  height: 24px;
}

.home-choice-tile strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.home-choice-tile small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
}

.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.stat-card {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
}

.stat-card-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.stat-card-value {
  color: var(--ink);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.stat-card-sparkline {
  display: block;
  width: 100%;
  height: 32px;
}

.chart-card {
  padding: 22px 24px;
}

.chart-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.chart-card-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.chart-card-head span {
  color: var(--muted);
  font-size: 0.8rem;
}

.chart-card svg {
  display: block;
  width: 100%;
  height: 180px;
}

.chart-card svg rect,
.stat-card-sparkline rect {
  cursor: pointer;
}

/* Shared floating tooltip for every chart bar (see dashboard.js's
   showChartTooltip/attachBarTooltip) - one small glass pill that follows
   the cursor, showing the exact count a bar's height only approximates. */
.chart-hover-tooltip {
  position: fixed;
  z-index: 60;
  padding: 6px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.35);
}

.chart-empty-note {
  margin: 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.recent-cases-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-case-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(15, 118, 110, 0.14);
  border-radius: 14px;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: inherit;
  transition: all 180ms ease;
}

.recent-case-row:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 118, 110, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(15, 118, 110, 0.12);
}

.recent-case-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.recent-case-info strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.recent-case-info span {
  color: var(--muted);
  font-size: 0.78rem;
}

.patient-form-hint {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.patient-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.patient-form-panel .form-field input:disabled,
.patient-form-panel .form-field select:disabled,
.patient-form-panel .form-field textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-field select {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.form-field select:focus {
  outline: none;
  border-color: rgba(15, 138, 118, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(15, 138, 118, 0.16);
  background: rgba(var(--surface-rgb), 0.75);
}

.storage-summary {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
}

/* Nested User -> Year -> Month -> Day collapsible tree for the login audit
   card - <details>/<summary> gives free expand/collapse with no JS. */
.login-audit-tree {
  display: grid;
  gap: 8px;
}

.login-audit-tree details {
  border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.03);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  padding: 4px 12px;
}

.login-audit-tree details+details {
  margin-top: 6px;
}

.login-audit-tree summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  list-style: none;
}

.login-audit-tree summary::-webkit-details-marker {
  display: none;
}

.login-audit-tree summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--muted);
  transition: transform 140ms ease;
}

.login-audit-tree details[open]>summary::before {
  transform: rotate(90deg);
}

.login-audit-user {
  background: rgba(19, 138, 122, 0.05);
}

.login-audit-user>summary {
  font-size: 0.92rem;
}

.login-audit-month,
.login-audit-year {
  margin-left: 10px;
  background: rgba(var(--ink-rgb), 0.02);
}

.login-audit-day {
  margin-left: 10px;
}

.login-audit-entries {
  display: grid;
  gap: 4px;
  padding: 4px 0 10px;
}

.login-audit-entry-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink);
  padding: 4px 0;
}

.fluid-schedule-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(22, 163, 148, 0.06);
  border: 1px solid rgba(22, 163, 148, 0.2);
  border-radius: 12px;
}

.schedule-table {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
}

.schedule-table div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* #reportModal reuses the same .modal-backdrop/.modal-window/.modal-header
   class names as #calcModal, but every rule for those classes elsewhere
   in this file is scoped to the #calcModal id specifically - so without
   its own copy here, this modal had no backdrop positioning or window
   layout at all and just rendered in normal document flow whereever its
   markup happens to sit on the page (appearing stuck in a corner instead
   of as a centered overlay). */
#reportModal.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#reportModal[hidden] {
  display: none;
}

#reportModal .report-modal-window {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 20px;
  border: 1px solid var(--input-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#reportModal .modal-header {
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

#reportModal .modal-header h3 {
  margin: 0;
  color: var(--teal);
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
}

#reportModal .modal-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
}

.report-modal-window {
  max-width: 920px;
  width: 90vw;
  max-width: 960px;
  height: 85vh;
}

.report-modal-body {
  flex: 1;
  min-height: 0;
}

.report-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* #tbsaCalcModal reuses the same .modal-backdrop/.modal-window/.modal-header
   class names as #calcModal/#reportModal, all scoped per-id (see the
   comment above #reportModal's rules), so it needs its own copy too. */
#tbsaCalcModal.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#tbsaCalcModal[hidden] {
  display: none;
}

/* #maskCorrectionModal (cases.js) reuses the same .modal-backdrop/
   .modal-window/.modal-header class names too, per-id-scoped same as
   #tbsaCalcModal above. */
#maskCorrectionModal.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#maskCorrectionModal[hidden] {
  display: none;
}

#maskCorrectionModal .modal-header {
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}

#maskCorrectionModal .modal-header h3 {
  margin: 0;
  color: var(--teal);
  font-size: 1.1rem;
  font-weight: 800;
}

#maskCorrectionModal .modal-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

/* #workspaceMaskCorrectionModal (app.js, main AI Burn Analysis workspace)
   reuses the same .modal-backdrop/.modal-window/.modal-header class names
   too, per-id-scoped same as #tbsaCalcModal/#maskCorrectionModal above -
   without its own copy of these rules it renders as a plain block at the
   bottom of the page instead of a fixed, centered overlay. */
#workspaceMaskCorrectionModal.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#workspaceMaskCorrectionModal[hidden] {
  display: none;
}

#workspaceMaskCorrectionModal .modal-header {
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}

#workspaceMaskCorrectionModal .modal-header h3 {
  margin: 0;
  color: var(--teal);
  font-size: 1.1rem;
  font-weight: 800;
}

#workspaceMaskCorrectionModal .modal-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

.tbsa-modal-window {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 20px;
  border: 1px solid var(--input-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin: 0;
  width: 640px;
  max-width: 92vw;
  max-height: 92vh;
}

#tbsaCalcModal .modal-header {
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}

#tbsaCalcModal .modal-header h3 {
  margin: 0;
  color: var(--teal);
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
}

#tbsaCalcModal .modal-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

.tbsa-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  box-sizing: border-box;
}

.tbsa-image-stage {
  position: relative;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2, #eef1f4);
  max-width: 100%;
}

.tbsa-image-stage img,
.tbsa-image-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#tbsaImage {
  object-fit: fill;
}

#tbsaCanvas {
  cursor: crosshair;
  touch-action: none;
}

.tbsa-calculating-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbsa-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: tbsa-spin 0.8s linear infinite;
}

@keyframes tbsa-spin {
  to {
    transform: rotate(360deg);
  }
}

.tbsa-result-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #d6554a;
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.tbsa-scale-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.tbsa-scale-card {
  background: var(--panel);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.tbsa-scale-card label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.tbsa-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--input-bg, transparent);
}

.tbsa-input-wrap input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.tbsa-input-wrap span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
}

.tbsa-measured-line {
  font-size: 0.78rem;
  color: var(--muted);
}

.tbsa-measured-line .tbsa-measured-dist {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.tbsa-error-text {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #d6554a;
}

.tbsa-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.tbsa-actions .request-action-btn,
.tbsa-actions button.secondary {
  flex: 1;
  justify-content: center;
}

.tbsa-result-card {
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 14px 16px;
}

.tbsa-result-card h4 {
  margin: 0 0 10px 0;
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 800;
}

.tbsa-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 10px;
}

.tbsa-stat-label {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.tbsa-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.tbsa-stat-percent {
  color: #d6554a;
  font-size: 1.15rem;
}

.tbsa-steps-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.8rem;
  margin-top: 4px;
  user-select: none;
}

.tbsa-steps-chevron {
  transition: transform 0.15s ease;
}

.tbsa-steps-toggle.open .tbsa-steps-chevron {
  transform: rotate(180deg);
}

.tbsa-steps {
  margin-top: 8px;
}

.tbsa-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.tbsa-step-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: rgba(15, 118, 110, 0.14);
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbsa-step-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
}

.tbsa-step-detail {
  font-size: 0.76rem;
  color: var(--muted);
}

.tbsa-caveat {
  margin: 12px 0 0 0;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}

.fluid-weight-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.fluid-weight-inline .tbsa-input-wrap {
  width: 160px;
}

.fluid-weight-inline .request-action-btn {
  padding: 9px 16px;
}

.fluid-weight-inline .tbsa-error-text {
  flex-basis: 100%;
  margin-top: 0;
}

/* Modernized Research Tiles & Node Icons */
.roadmap-tile {
  background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.95), rgba(240, 253, 250, 0.9)) !important;
  border: 1px solid rgba(15, 118, 110, 0.25) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.roadmap-tile:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.15) !important;
  border-color: rgba(15, 118, 110, 0.5) !important;
}

.roadmap-tile span {
  display: inline-block;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(15, 118, 110, 0.2);
  color: #0f766e;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.category-section-header .cat-icon {
  width: 18px;
  height: 18px;
  color: #0d9488;
  flex-shrink: 0;
}

/* High z-index floating overlay modal window above workspace */
#calcModal.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#calcModal[hidden] {
  display: none !important;
}

/* Modal Window Container */
#calcModal .calc-modal-window {
  width: 940px !important;
  max-width: 92vw !important;
  height: 620px !important;
  max-height: 85vh !important;
  background: var(--panel) !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  border: 1px solid var(--input-border) !important;
  margin: auto !important;
  padding: 0 !important;
}

/* Header */
#calcModal .modal-header {
  padding: 16px 24px !important;
  background: var(--panel) !important;
  border-bottom: 2px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#calcModal .modal-header h3 {
  margin: 0 !important;
  color: #0f766e !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
}

/* Horizontal Body Layout (Sidebar Left, Content Right) */
#calcModal .calc-modal-body-container {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: var(--panel) !important;
  overflow: hidden !important;
}

/* Left Sidebar */
#calcModal #toolsSidebar {
  width: 320px !important;
  min-width: 300px !important;
  flex-shrink: 0 !important;
  border-right: 1px solid #e2e8f0 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

/* Tab Buttons */
#calcModal .tool-tab-btn {
  width: 100% !important;
  text-align: left !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--input-border) !important;
  background: var(--panel) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

#calcModal .tool-tab-btn span {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

#calcModal .tool-tab-btn svg {
  flex-shrink: 0 !important;
  stroke: #0f766e !important;
}

#calcModal .tool-tab-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0f766e !important;
}

#calcModal .tool-tab-btn.active {
  background: #0f766e !important;
  border-color: #0f766e !important;
  color: var(--on-accent) !important;
  font-weight: 700 !important;
}

#calcModal .tool-tab-btn.active span {
  color: var(--on-accent) !important;
}

#calcModal .tool-tab-btn.active svg {
  stroke: var(--on-accent) !important;
}

/* Right Content Area */
#calcModal #calcModalBody {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px !important;
  background: var(--panel) !important;
  box-sizing: border-box !important;
}

#calcModal #calcModalBody label {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  display: block !important;
  margin-bottom: 6px !important;
}

#calcModal #calcModalBody input,
#calcModal #calcModalBody select,
#calcModal #calcModalBody textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--input-border) !important;
  background: var(--panel) !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
}

#calcModal #calcModalBody input:focus,
#calcModal #calcModalBody select:focus,
#calcModal #calcModalBody textarea:focus {
  outline: none !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

/* Site-wide footer: disclaimer + copyright, shown at the bottom of every page. */
.site-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.landing-footer-center {
  text-align: center;
}

.site-footer .disclaimer {
  color: var(--muted);
  line-height: 1.45;
  margin: 0 auto;
  font-size: 0.82rem;
  text-align: center;
  max-width: 850px;
}

.site-footer .copyright {
  color: var(--muted);
  margin: 8px auto 0;
  font-size: 0.78rem;
  opacity: 0.85;
  text-align: center;
}

.disclaimer {
  text-align: center !important;
}

/* One-time "on opening" disclaimer acknowledgment modal - see disclaimer.js. */
.disclaimer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 35, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.disclaimer-modal {
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  max-width: 440px;
  width: 100%;
  padding: 28px;
}

.disclaimer-modal h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: var(--ink);
}

.disclaimer-modal p {
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
  margin: 0 0 10px;
}

.disclaimer-modal button {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: var(--teal);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.disclaimer-modal button:hover {
  background: #0c6e5e;
}

/* ==========================================
   ACCOUNT ADMIN MODULE STYLES (SCOPED)
   ========================================== */
.admin-header {
  margin-bottom: 20px;
}

.admin-title {
  margin: 2px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-family: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* APPLE GLASSMORPHISM TAB NAVIGATION */
.admin-tab-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  padding: 6px;
  background: rgba(241, 245, 249, 0.72);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 8px 24px -6px rgba(15, 23, 42, 0.06);
}

.admin-tab-nav::-webkit-scrollbar {
  display: none;
}

.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.admin-tab-btn .icon-svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: stroke 200ms ease, transform 200ms ease;
}

.admin-tab-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  color: #0f766e;
  transform: translateY(-1px);
}

.admin-tab-btn:active {
  transform: scale(0.97);
}

.admin-tab-btn.active {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow:
    0 6px 16px -2px rgba(15, 118, 110, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.admin-tab-btn.active .icon-svg {
  stroke: #ffffff;
}

.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-tab-btn:not(.active) .admin-tab-badge {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.admin-tab-btn:not(.active) .admin-tab-badge.alert {
  background: rgba(225, 29, 72, 0.15);
  color: #e11d48;
}

.admin-tab-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 200ms ease;
}

.admin-tab-badge-dot.online {
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.admin-tab-badge-dot.offline {
  background: #ef4444;
}

/* AMBIENT GREEN BACKGROUND CONTAINER FOR ADMIN PANELS */
.admin-tab-panel {
  display: none;
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.09) 0%, rgba(13, 148, 136, 0.05) 50%, rgba(16, 185, 129, 0.1) 100%);
  border: 1px solid rgba(15, 118, 110, 0.15);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 12px 36px -8px rgba(15, 118, 110, 0.08);
  animation: adminPanelFadeIn 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.admin-tab-panel.active {
  display: block;
}

@keyframes adminPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* TRANSLUCENT WHITE GLASSMORPHISM CARDS FOR ADMIN */
.admin-card {
  padding: 28px 30px 28px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow:
    0 16px 40px -10px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 #ffffff;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #ffffff;
  box-shadow:
    0 24px 50px -10px rgba(15, 118, 110, 0.18),
    inset 0 1px 0 #ffffff;
  transform: translateY(-2px);
}

.admin-card-full {
  margin-top: 22px;
}

.admin-tab-panel>.admin-card-full:first-child,
.admin-sub-tab-panel>.admin-card-full:first-child {
  margin-top: 0;
}

.admin-tab-panel>.admin-card-full+.admin-card-full,
.admin-sub-tab-panel>.admin-card-full+.admin-card-full {
  margin-top: 20px;
}

.admin-card h1 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0f172a;
}

/* ==========================================
   DASHBOARD APPLE GLASSMORPHISM MODULE (SCOPED)
   ========================================== */
.dashboard-greeting {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 16px 40px -10px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 #ffffff !important;
  color: #0f172a !important;
}

.dashboard-greeting-copy p.landing-kicker {
  color: #0f766e !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dashboard-greeting h1 {
  margin: 4px 0 6px;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: #0f172a !important;
  letter-spacing: -0.015em;
}

.dashboard-greeting-copy p.auth-subtitle {
  color: #475569 !important;
  max-width: 46ch;
  line-height: 1.5;
}

.home-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
  margin-bottom: 22px;
}

.home-choice-tile {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 8px;
  min-height: 140px;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-align: left;
  color: #ffffff;
  box-shadow: 0 16px 40px -10px rgba(15, 118, 110, 0.25);
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-choice-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -10px rgba(15, 118, 110, 0.35);
}

.home-choice-tile-blue {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

.home-choice-tile-teal {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.home-choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.home-choice-icon .icon-svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}

.home-choice-tile strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

.home-choice-tile small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.86rem;
  line-height: 1.4;
}

.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}

.stat-card {
  height: 100%;
  margin: 0;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.06), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(15, 118, 110, 0.15), inset 0 1px 0 #ffffff;
}

.stat-card-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  transition: color 200ms ease;
}

/* Brief highlight when a stat's number actually changes during the
   periodic live refresh (see dashboard.js's setStatValue) - a number
   quietly changing while glanced away for a moment is easy to miss
   without some visible cue that it just updated. */
@keyframes statValueFlash {
  0% {
    color: var(--teal);
    transform: scale(1.08);
  }

  100% {
    color: #0f172a;
    transform: scale(1);
  }
}

.stat-card-value-flash {
  animation: statValueFlash 900ms ease-out;
  display: inline-block;
}

/* Small pulsing dot next to "Active Jobs", signaling the stats panel
   refreshes itself live (see startStatsLivePolling) rather than only on
   page load - lit teal only while a job is actually running so it reads
   as "something is happening right now", not just decorative chrome. */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.2);
  vertical-align: middle;
  transition: background 200ms ease;
}

.live-dot.live-dot-active {
  background: var(--teal);
  box-shadow: 0 0 0 rgba(15, 138, 118, 0.5);
  animation: liveDotPulse 1.8s ease-out infinite;
}

@keyframes liveDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 138, 118, 0.5);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(15, 138, 118, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(15, 138, 118, 0);
  }
}

.stat-card-sparkline {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: auto;
}

.chart-card {
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.06), inset 0 1px 0 #ffffff;
}

.chart-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-card-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}

.chart-card-head span {
  color: #64748b;
  font-size: 0.84rem;
}

/* AMBIENT GREEN BACKDROP CONTAINER FOR DASHBOARD */
.dashboard-ambient-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
  padding: 26px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.09) 0%, rgba(13, 148, 136, 0.05) 50%, rgba(16, 185, 129, 0.1) 100%);
  border: 1.5px solid rgba(15, 118, 110, 0.16);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 12px 36px -8px rgba(15, 118, 110, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

.dashboard-ambient-container .app-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(15, 118, 110, 0.14);
}

.app-main-tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.app-main-tab-panel.active {
  display: block;
}

/* Disable in-card height bounds & internal scrollbar for Account Admin */
.dashboard-ambient-container.admin-view-active {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 24px !important;
  box-sizing: border-box;
}

.dashboard-ambient-container.admin-view-active .app-main-tab-panel[data-panel="admin"],
.app-main-tab-panel[data-panel="admin"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

.app-main-tab-panel[data-panel="admin"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.admin-sub-tab-panel {
  display: none;
  overflow-y: visible !important;
  width: 100%;
  box-sizing: border-box;
}

.admin-sub-tab-panel.active {
  display: block !important;
  margin-top: 18px;
  width: 100%;
  box-sizing: border-box;
}

/* Custom sleek scrollbar for internal workspace window */
.app-main-tab-panel::-webkit-scrollbar {
  width: 6px;
}

.app-main-tab-panel::-webkit-scrollbar-track {
  background: transparent;
}

.app-main-tab-panel::-webkit-scrollbar-thumb {
  background: rgba(15, 118, 110, 0.22);
  border-radius: 99px;
}

.app-main-tab-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 118, 110, 0.45);
}

.dashboard-ambient-container .app-topbar h1 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

.dashboard-ambient-container .app-topbar p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
}

.dashboard-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  box-shadow:
    0 16px 40px -10px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 #ffffff;
}

.dashboard-hero-card .dashboard-greeting-copy h1 {
  margin: 4px 0 6px;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: #0f172a;
}

/* COMPACT 2-COLUMN DASHBOARD GRID WITH EQUAL-HEIGHT CARD OUTLINES */
.dashboard-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr);
  gap: 22px;
  align-items: stretch;
}

.dashboard-col-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.dashboard-col-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  height: 100%;
}

.recent-cases-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.06), inset 0 1px 0 #ffffff;
}

.recent-cases-card .chart-card-head {
  margin-bottom: 16px;
  flex: 0 0 auto;
}

.recent-cases-card .recent-cases-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: 0;
}

/* RESPONSIVE BREAKPOINT FOR MOBILE */
@media (max-width: 992px) {
  .dashboard-hero-card {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   100VH NON-SCROLLING PORTAL ARCHITECTURE MODULE
   ========================================== */
.sidebar-sub-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
  padding: 10px 8px;
  background: rgba(15, 118, 110, 0.05);
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 14px;
}

.portal-sub-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #475569;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 180ms ease;
  box-sizing: border-box;
}

.portal-sub-nav-btn svg {
  width: 17px;
  height: 17px;
  stroke: #0f766e;
  flex-shrink: 0;
}

.portal-sub-nav-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 118, 110, 0.3);
  color: #0f766e;
}

.portal-sub-nav-btn.active {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  border-color: #0f766e;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
}

.portal-sub-nav-btn.active svg {
  stroke: #ffffff;
}

.portal-view-panel {
  display: none;
  width: 100%;
  height: 100%;
}

.portal-view-panel.active {
  display: block;
}

/* ==========================================
   BLACK GLASSMORPHISM NIGHT MODE SYSTEM
   ========================================== */
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark !important;
  --surface-rgb: 10, 22, 28 !important;
  --ink-rgb: 248, 250, 252 !important;
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --line: rgba(255, 255, 255, 0.14) !important;
  --paper: #040d10 !important;
  --panel: #0a161c !important;
  --panel-glass: rgba(10, 22, 28, 0.88) !important;
  --teal: #14b8a6 !important;
  --teal-soft: rgba(20, 184, 166, 0.15) !important;
  --text-secondary: #cbd5e1 !important;
  --input-border: rgba(255, 255, 255, 0.2) !important;
  --body-gradient-a: #061e20 !important;
  --body-gradient-b: #02080a !important;
}

/* Force dark backdrop on html and body */
html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"] {
  background: #040d10 !important;
  background-image: radial-gradient(circle at 50% -20%, #061e20 0%, #041014 45%, #02080a 100%) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body::before,
body[data-theme="dark"]::before {
  background:
    linear-gradient(rgba(20, 184, 166, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.03) 1px, transparent 1px) !important;
}

/* Workspace container & Sidebar in Dark Mode */
html[data-theme="dark"] .dashboard-ambient-container,
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .app-sidebar-fixed,
body[data-theme="dark"] .dashboard-ambient-container,
body[data-theme="dark"] .app-sidebar,
body[data-theme="dark"] .app-sidebar-fixed {
  background: linear-gradient(145deg, rgba(15, 118, 110, 0.22) 0%, rgba(6, 26, 30, 0.92) 50%, rgba(13, 148, 136, 0.16) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  color: #f8fafc !important;
}

/* Glass cards in Dark Mode */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .recent-cases-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .landing-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .dashboard-greeting,
html[data-theme="dark"] .home-choice-tile,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .recent-cases-card,
body[data-theme="dark"] .admin-card,
body[data-theme="dark"] .landing-card,
body[data-theme="dark"] .hero-card,
body[data-theme="dark"] .dashboard-greeting,
body[data-theme="dark"] .home-choice-tile {
  background: rgba(10, 22, 28, 0.92) !important;
  backdrop-filter: blur(32px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(210%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
}

/* Case rows in Dark Mode */
html[data-theme="dark"] .recent-case-row,
body[data-theme="dark"] .recent-case-row {
  background: rgba(15, 30, 38, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .recent-case-row:hover,
body[data-theme="dark"] .recent-case-row:hover {
  background: rgba(20, 42, 54, 0.98) !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
}

/* Headings & Text in Dark Mode */
html[data-theme="dark"] .stat-card-value,
html[data-theme="dark"] .admin-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] .app-sidebar-brand strong,
html[data-theme="dark"] .user-dropdown-header strong,
body[data-theme="dark"] .stat-card-value,
body[data-theme="dark"] .admin-title,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] strong,
body[data-theme="dark"] .app-sidebar-brand strong,
body[data-theme="dark"] .user-dropdown-header strong {
  color: #f8fafc !important;
}

/* Subtitles & Labels in Dark Mode */
html[data-theme="dark"] .stat-card-label,
html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .chart-card-head span,
html[data-theme="dark"] .app-sidebar-link,
html[data-theme="dark"] .recent-case-info span,
body[data-theme="dark"] .stat-card-label,
body[data-theme="dark"] .auth-subtitle,
body[data-theme="dark"] .chart-card-head span,
body[data-theme="dark"] .app-sidebar-link,
body[data-theme="dark"] .recent-case-info span {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .app-sidebar-link:hover,
body[data-theme="dark"] .app-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .app-sidebar-link.active,
body[data-theme="dark"] .app-sidebar-link.active {
  background: rgba(20, 184, 166, 0.25) !important;
  color: #2dd4bf !important;
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.45) !important;
}

/* User chip & dropdown in Dark Mode */
html[data-theme="dark"] .app-user-chip,
body[data-theme="dark"] .app-user-chip {
  background: rgba(10, 22, 28, 0.92) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .app-user-chip-meta #userChipName,
body[data-theme="dark"] .app-user-chip-meta #userChipName {
  color: #f8fafc !important;
}

html[data-theme="dark"] .user-dropdown-menu,
body[data-theme="dark"] .user-dropdown-menu {
  background: rgba(10, 22, 28, 0.98) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  color: #f8fafc !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .user-dropdown-item,
body[data-theme="dark"] .user-dropdown-item {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .user-dropdown-item:hover,
body[data-theme="dark"] .user-dropdown-item:hover {
  background: rgba(20, 184, 166, 0.2) !important;
  color: #2dd4bf !important;
}

/* Hide bright white pseudo-elements in dark mode */
html[data-theme="dark"] .app-shell::before,
html[data-theme="dark"] .app-shell::after,
body[data-theme="dark"] .app-shell::before,
body[data-theme="dark"] .app-shell::after {
  display: none !important;
}

html[data-theme="dark"] .ambient-grid,
body[data-theme="dark"] .ambient-grid {
  opacity: 0.15 !important;
}

/* ==========================================================================
   macOS-Style Branding & Theme System (Apple SF Design & Liquid Glass)
   ========================================================================== */
.footer-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin-bottom: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans", sans-serif;
  font-size: 0.86rem;
}

.footer-nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .footer-nav-links a {
  color: #94a3b8;
}

html[data-theme="light"] .footer-nav-links a {
  color: #475569;
}

.footer-nav-links a:hover {
  color: #2dd4bf !important;
  background: rgba(20, 184, 166, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.footer-nav-links .dot {
  color: var(--muted);
  opacity: 0.45;
  user-select: none;
}

.legal-shell {
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 18px 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.legal-navbar {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 8px 8px 16px;
  margin-bottom: 30px;
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.72);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  box-shadow: 0 12px 32px -14px rgba(var(--ink-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.legal-navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.legal-navbar-brand img {
  width: 22px;
  height: 22px;
}

.legal-segmented {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.05);
  overflow-x: auto;
}

.legal-segmented a {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.legal-segmented a:hover {
  color: var(--ink);
}

.legal-segmented a.active {
  background: var(--panel);
  color: var(--teal);
  box-shadow: 0 2px 10px rgba(var(--ink-rgb), 0.16);
}

.legal-navbar-home {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal);
  background: var(--teal-soft);
  text-decoration: none;
  flex-shrink: 0;
}

.legal-navbar-home svg {
  width: 14px;
  height: 14px;
}

/* Lightweight footer variant - a plain link row (index.html/login.html
   footers), not the floating glass navbar the legal pages themselves use. */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.legal-nav a {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.legal-nav a:hover {
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--ink);
}

.legal-hero {
  text-align: center;
  padding: 34px 20px 6px;
}

.legal-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.legal-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.legal-hero p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.legal-content {
  margin-top: 26px;
  padding: 36px clamp(20px, 5vw, 46px);
}

.legal-body h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink);
  margin: 32px 0 10px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h2::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--teal);
  flex-shrink: 0;
}

.legal-body p,
.legal-body li {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.96rem;
}

.legal-body p + h2,
.legal-body ul + h2 {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.legal-body ul {
  margin: 6px 0 0;
  padding-left: 22px;
}

.legal-body li + li {
  margin-top: 8px;
}

.legal-body a {
  color: var(--teal);
  font-weight: 600;
}

.legal-contact-block {
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid var(--line);
}

.legal-contact-block strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.legal-contact-block em {
  color: var(--muted);
  font-style: italic;
}

/* macOS Top Floating App Bar */
.mac-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(28, 28, 34, 0.72);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  margin-bottom: 24px;
}

html[data-theme="light"] .mac-window-bar {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.mac-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-left: 6px;
}

.mac-nav-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* macOS Segmented Control Tab Bar */
.mac-segmented-control {
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 2px;
}

html[data-theme="light"] .mac-segmented-control {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.mac-seg-item {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  color: #94a3b8;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.01em;
}

html[data-theme="light"] .mac-seg-item {
  color: #475569;
}

.mac-seg-item:hover {
  color: #ffffff;
}

html[data-theme="light"] .mac-seg-item:hover {
  color: #0f172a;
}

.mac-seg-item.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.3) !important;
  font-weight: 600;
}

html[data-theme="light"] .mac-seg-item.active {
  color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgba(255, 255, 255, 1) !important;
}

.mac-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.32);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] .mac-nav-action {
  color: #0f766e;
  background: #e6f7f3;
  border: 1px solid rgba(15, 118, 110, 0.25);
}

.mac-nav-action:hover {
  background: rgba(20, 184, 166, 0.24);
  color: #5eead4;
  transform: translateY(-1px);
}

/* macOS Hero Card */
.mac-hero-card {
  position: relative;
  overflow: hidden;
  padding: 34px 36px 28px;
  border-radius: 20px;
  background: rgba(22, 22, 28, 0.76);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  margin-bottom: 20px;
}

html[data-theme="light"] .mac-hero-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06), inset 0 1px 0 #ffffff;
}

.mac-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.35);
  margin-bottom: 14px;
}

html[data-theme="light"] .mac-pill-badge {
  color: #0f766e;
  background: #e6f7f3;
  border-color: rgba(15, 118, 110, 0.28);
}

.mac-title-sf {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: clamp(2rem, 3.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.035em;
  color: #ffffff;
}

html[data-theme="light"] .mac-title-sf {
  color: #0f172a;
}

.mac-lead-sf {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #cbd5e1;
  max-width: 780px;
  margin: 0 0 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

html[data-theme="light"] .mac-lead-sf {
  color: #475569;
}

.mac-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.mac-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .mac-meta-chip {
  color: #334155;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.mac-meta-chip svg {
  color: #2dd4bf;
}

html[data-theme="light"] .mac-meta-chip svg {
  color: #0f766e;
}

/* macOS Content Card Container */
.mac-body-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mac-content-card {
  padding: 30px 32px;
  border-radius: 18px;
  background: rgba(22, 22, 28, 0.72);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] .mac-content-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.06);
}

.mac-content-card:hover {
  border-color: rgba(20, 184, 166, 0.35);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.55);
}

.mac-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mac-section-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.16);
  border: 1px solid rgba(20, 184, 166, 0.35);
  flex-shrink: 0;
}

html[data-theme="light"] .mac-section-badge {
  color: #0f766e;
  background: #e6f7f3;
  border-color: rgba(15, 118, 110, 0.28);
}

.mac-section-header h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

html[data-theme="light"] .mac-section-header h2 {
  color: #0f172a;
}

.mac-prose {
  color: #e2e8f0;
  font-size: 0.96rem;
  line-height: 1.7;
}

html[data-theme="light"] .mac-prose {
  color: #334155;
}

.mac-prose p {
  color: #cbd5e1;
  margin: 0 0 14px;
}

html[data-theme="light"] .mac-prose p {
  color: #475569;
}

.mac-prose p:last-child {
  margin-bottom: 0;
}

.mac-prose strong {
  color: #ffffff;
  font-weight: 600;
}

html[data-theme="light"] .mac-prose strong {
  color: #0f172a;
}

.mac-prose ul {
  margin: 10px 0 16px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mac-prose li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
  color: #cbd5e1;
}

html[data-theme="light"] .mac-prose li {
  color: #475569;
}

.mac-prose li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 6px rgba(45, 212, 191, 0.6);
}

html[data-theme="light"] .mac-prose li::before {
  background: #0f766e;
  box-shadow: none;
}

/* macOS Notification Banner / Callout */
.mac-callout-banner {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  backdrop-filter: blur(16px);
  margin: 14px 0;
}

.mac-callout-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #2dd4bf;
  margin-top: 2px;
}

.mac-callout-text {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #f1f5f9;
}

html[data-theme="light"] .mac-callout-text {
  color: #0f172a;
}

.mac-callout-text strong {
  color: #2dd4bf;
  display: block;
  margin-bottom: 4px;
  font-size: 0.98rem;
}

html[data-theme="light"] .mac-callout-text strong {
  color: #0f766e;
}

/* macOS Feature Grid */
.mac-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.mac-feature-card {
  padding: 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] .mac-feature-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mac-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.4);
  background: rgba(20, 184, 166, 0.05);
}

.mac-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 184, 166, 0.16);
  border: 1px solid rgba(20, 184, 166, 0.32);
  color: #2dd4bf;
}

html[data-theme="light"] .mac-feature-icon {
  color: #0f766e;
  background: #e6f7f3;
}

.mac-feature-card strong {
  font-size: 1.02rem;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html[data-theme="light"] .mac-feature-card strong {
  color: #0f172a;
}

.mac-feature-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0;
}

html[data-theme="light"] .mac-feature-card p {
  color: #64748b;
}

/* macOS Contact Cards */
.mac-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.mac-contact-card {
  padding: 22px;
  border-radius: 16px;
  background: rgba(22, 22, 28, 0.72);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] .mac-contact-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.mac-contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.45);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.4);
}

.mac-contact-card strong {
  font-size: 1.02rem;
  color: #ffffff;
  font-weight: 600;
}

html[data-theme="light"] .mac-contact-card strong {
  color: #0f172a;
}

.mac-contact-card p {
  font-size: 0.88rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.55;
}

html[data-theme="light"] .mac-contact-card p {
  color: #64748b;
}

.mac-contact-card a {
  color: #2dd4bf;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-theme="light"] .mac-contact-card a {
  color: #0f766e;
}

.mac-contact-card a:hover {
  text-decoration: underline;
}

/* macOS Footer Dock Switcher */
.mac-footer-dock {
  margin-top: 32px;
  padding: 16px 24px;
  border-radius: 16px;
  background: rgba(28, 28, 34, 0.72);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html[data-theme="light"] .mac-footer-dock {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.mac-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.mac-footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  transition: color 0.18s ease;
}

html[data-theme="light"] .mac-footer-links a {
  color: #64748b;
}

.mac-footer-links a:hover {
  color: #2dd4bf;
}

html[data-theme="light"] .mac-footer-links a:hover {
  color: #0f766e;
}

@media (max-width: 768px) {
  .mac-window-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .mac-segmented-control {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mac-hero-card {
    padding: 24px 20px;
  }

  .mac-content-card {
    padding: 24px 20px;
  }

  .mac-footer-dock {
    flex-direction: column;
    text-align: center;
  }
}

/* Get Started screenshot walkthrough (get-started.html) - numbered flow
   steps pairing a portal screenshot with a short explanation, plus a
   tighter sub-flow variant for a multi-screenshot mini-sequence like the
   TBSA calibration dialog. */
.flow-section {
  display: grid;
  gap: 26px;
  margin: 20px 0 10px;
}

.flow-step {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-glass);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.flow-step:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 138, 118, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 20px 40px rgba(var(--ink-rgb), 0.12);
}

/* Numbered variant (the main 6-step portal walkthrough) - a small teal
   badge floats on the card's top-left corner, auto-numbered via CSS
   counters so adding/removing a step never requires renumbering by hand. */
.flow-section--numbered {
  counter-reset: flowstep;
}

.flow-section--numbered .flow-step {
  position: relative;
  margin-top: 6px;
}

.flow-section--numbered .flow-step::before {
  counter-increment: flowstep;
  content: counter(flowstep);
  position: absolute;
  top: -16px;
  left: 22px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #0c6b5c);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 8px 18px rgba(15, 138, 118, 0.38), 0 0 0 4px var(--panel);
  z-index: 2;
}

.flow-step-media {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(var(--ink-rgb), 0.1);
  background: var(--panel);
  cursor: zoom-in;
  max-width: 760px;
  margin: 0 auto;
  transition: box-shadow 220ms ease;
}

.flow-step-media:hover {
  box-shadow: 0 20px 44px rgba(var(--ink-rgb), 0.16);
}

.flow-step-media img {
  display: block;
  width: 100%;
  height: auto;
}

.flow-step-media::after,
.flow-substep-media::after {
  content: "⤢ Click to enlarge";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 20, 26, 0.72);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.flow-step-media:hover::after,
.flow-substep-media:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.flow-step-body {
  display: grid;
  gap: 6px;
  max-width: 760px;
  margin: 0 auto;
}

.flow-step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--teal);
}

.flow-step-body h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.flow-step-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.flow-substeps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 10px 0 4px;
}

.flow-substep {
  display: grid;
  gap: 8px;
}

.flow-substep-media {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(var(--ink-rgb), 0.08);
  background: var(--panel);
  cursor: zoom-in;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.flow-substep-media:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(var(--ink-rgb), 0.14);
}

.flow-substep-media img {
  display: block;
  width: 100%;
  height: auto;
}

.flow-substep-caption {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.flow-substep-caption strong:first-child {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
  margin-bottom: 2px;
}

.flow-subheading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 34px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.flow-subheading::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--teal);
  flex-shrink: 0;
}

.button-ref-table-wrap {
  margin: 14px 0 4px;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.06);
}

.button-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.button-ref-table th,
.button-ref-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.button-ref-table th {
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.button-ref-table tbody tr {
  background: var(--panel);
  transition: background-color 150ms ease;
}

.button-ref-table tbody tr:nth-child(even) {
  background: rgba(var(--ink-rgb), 0.025);
}

.button-ref-table tbody tr:hover {
  background: var(--teal-soft);
}

.button-ref-table td:first-child {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.button-ref-table td:last-child {
  color: var(--text-secondary);
  line-height: 1.55;
}

.button-ref-table tbody tr:last-child td {
  border-bottom: none;
}

.button-ref-disabled td {
  opacity: 0.6;
}

.mode-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.mode-pill-single {
  background: var(--teal-soft);
  color: var(--teal);
}

.mode-pill-both {
  background: rgba(47, 111, 179, 0.14);
  color: var(--blue);
}

.mode-pill-off {
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--muted);
}