@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Inter:wght@400;500;600;700&family=Vollkorn:wght@400;500;600;700&display=swap');
/* ==========================================================================
   MedBase brand lock — single source of truth is medbase-ios/constants/theme.ts
   - One accent, locked: MedBase purple. Status hues are semantic, never decorative.
   - Primary actions are ink pills, like iOS ActionButton.
   - One warm grey family: every neutral derives from ink #181817 on paper #FBFAF7.
   - Shape lock: cards 20, icon tiles 12, inline tags 6, actions/chips are pills.
   - Legacy data-medbase-theme values (iridescent/sage/…) all resolve to this same
     brand so old localStorage entries can't fork the palette again.
   ========================================================================== */
:root,
html[data-medbase-theme="iridescent"],
html[data-medbase-theme="sage"],
html[data-medbase-theme="lavender"],
html[data-medbase-theme="ivory"],
html[data-medbase-theme="ice"],
html[data-medbase-theme="pharmacy"],
html[data-medbase-theme="premium"],
html[data-medbase-appearance="light"] {
  --theme-base: #f5f2ec;
  --theme-surface: #fffdfa;
  --theme-wash-1: #f6edfb;
  --theme-wash-2: #e5f1fa;
  --theme-wash-3: #fef2f1;
  --theme-accent: #8656b3;
  --theme-accent-soft: #f2dff5;
  --theme-secondary: #f2a8cf;
  --theme-deep: #181817;
  --theme-muted: rgba(24, 24, 23, 0.62);
  --theme-line: rgba(24, 24, 23, 0.12);
  --theme-brand-purple: #9567bf;
  --theme-brand-pink: #f2a8cf;
  --theme-brand-paper: #fbfaf7;
  --theme-brand-ink: #181817;
  color-scheme: light;
}

/* iOS dark tokens: slate surfaces, accent #C49BEA. */
html[data-medbase-appearance="dark"] {
  --theme-base: #1d1535;
  --theme-surface: #271e45;
  --theme-wash-1: #3b2a66;
  --theme-wash-2: #2c2a5c;
  --theme-wash-3: #3d2a4f;
  --theme-accent: #c4a8ff;
  --theme-accent-soft: #3d3163;
  --theme-secondary: #f2a8cf;
  --theme-deep: #ffffff;
  --theme-muted: rgba(241, 236, 255, 0.66);
  --theme-line: rgba(196, 168, 255, 0.22);
  --theme-brand-purple: #9567bf;
  --theme-brand-pink: #f2a8cf;
  --theme-brand-paper: #fbfaf7;
  --theme-brand-ink: #181817;
  color-scheme: dark;
}

/* System follows the OS, like iOS DynamicColorIOS. Explicit light/dark wins. */
@media (prefers-color-scheme: dark) {
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) {
    --theme-base: #1d1535;
    --theme-surface: #271e45;
    --theme-wash-1: #3b2a66;
    --theme-wash-2: #2c2a5c;
    --theme-wash-3: #3d2a4f;
    --theme-accent: #c4a8ff;
    --theme-accent-soft: #3d3163;
    --theme-secondary: #f2a8cf;
    --theme-deep: #ffffff;
    --theme-muted: rgba(241, 236, 255, 0.66);
    --theme-line: rgba(196, 168, 255, 0.22);
    color-scheme: dark;
  }
}

:root {
  /* iOS intro blobs, blurred into one wash: pink, purple, ice blue, pale yellow. */
  --theme-glow:
    radial-gradient(circle at 18% 18%, rgba(242, 168, 207, 0.45) 0%, transparent 48%),
    radial-gradient(circle at 82% 16%, rgba(165, 214, 255, 0.50) 0%, transparent 46%),
    radial-gradient(circle at 50% 45%, rgba(149, 103, 191, 0.28) 0%, transparent 52%),
    radial-gradient(circle at 22% 72%, rgba(254, 238, 175, 0.30) 0%, transparent 45%),
    linear-gradient(180deg, #fdfcf9 0%, #f5f2ec 45%, #f5f2ec 100%);
}

html[data-medbase-appearance="dark"] {
  --theme-glow:
    radial-gradient(70% 55% at 80% -5%, rgba(123, 76, 230, 0.45) 0%, transparent 62%),
    radial-gradient(50% 40% at 0% 100%, rgba(242, 111, 180, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #1d1535 0%, #221842 55%, #1a1230 100%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) {
    --theme-glow:
    radial-gradient(70% 55% at 80% -5%, rgba(123, 76, 230, 0.45) 0%, transparent 62%),
    radial-gradient(50% 40% at 0% 100%, rgba(242, 111, 180, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #1d1535 0%, #221842 55%, #1a1230 100%);
  }
}

/* Dark mode for the medbase.html app shell. The shell’s inline styles are
   drawn on paper tokens, so remap them here plus the hardcoded surfaces. */
html[data-medbase-appearance="dark"] body.medbase-app {
  --ink: #f1ecff;
  --muted: #b9aee0;
  --line: #3a2e5e;
  --paper: #1d1535;
  --green: #86cfae;
  --red: #d08a76;
  --orange: #c99a55;
}
html[data-medbase-appearance="dark"] body.medbase-app .topbar {
  background: rgba(29, 21, 53, .88) !important;
  backdrop-filter: blur(14px);
}
html[data-medbase-appearance="dark"] body.medbase-app .panel,
html[data-medbase-appearance="dark"] body.medbase-app .stat,
html[data-medbase-appearance="dark"] body.medbase-app .btn,
html[data-medbase-appearance="dark"] body.medbase-app .iconbtn,
html[data-medbase-appearance="dark"] body.medbase-app .searchbox,
html[data-medbase-appearance="dark"] body.medbase-app .chip,
html[data-medbase-appearance="dark"] body.medbase-app .field input,
html[data-medbase-appearance="dark"] body.medbase-app .field select,
html[data-medbase-appearance="dark"] body.medbase-app .catalog-search,
html[data-medbase-appearance="dark"] body.medbase-app dialog {
  background-color: #271e45 !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
html[data-medbase-appearance="dark"] body.medbase-app .btn:hover {
  background-color: #271e45 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .btn.primary,
html[data-medbase-appearance="dark"] body.medbase-app .chip.active,
html[data-medbase-appearance="dark"] body.medbase-app .searchbox button[type="submit"] {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #150f29 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app th {
  background: #1d1535 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .pulsecard,
html[data-medbase-appearance="dark"] body.medbase-app .result,
html[data-medbase-appearance="dark"] body.medbase-app .details,
html[data-medbase-appearance="dark"] body.medbase-app .comparebar {
  background-color: #1d1535 !important;
  border-color: var(--line) !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .alertrow,
html[data-medbase-appearance="dark"] body.medbase-app .watchrow {
  border-color: #271e45 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .nav button {
  color: #c9bfea !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .nav button:hover {
  background: #271e45 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .nav button.active {
  background: #3a2e5e !important;
  color: var(--ink) !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .table-card-root,
html[data-medbase-appearance="dark"] body.medbase-app .table-card-footer,
html[data-medbase-appearance="dark"] body.medbase-app .catalog-row-empty {
  background: #271e45 !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .modern-table tbody tr {
  border-bottom-color: #271e45 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .modern-table tbody tr:hover {
  background-color: #271e45 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .modern-table tbody tr.is-selected {
  background-color: #3a2e5e !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .toast {
  background: #f1ecff !important;
  color: #150f29 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .notice {
  background: #2a2417 !important;
  color: #d8c48a !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .addwatch {
  background: #1d1535 !important;
  color: #9dc08a !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .pill {
  background: #2b2f26 !important;
  color: #cdd8a8 !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .pill.red {
  background: #332220 !important;
  color: #e0a08a !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .pill.green {
  background: #222b21 !important;
  color: #a9c48f !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .timeline {
  border-color: var(--line) !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .btn-source {
  background: linear-gradient(180deg, #271e45 0%, #1d1535 100%) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--ink) !important;
}
html[data-medbase-appearance="dark"] body.medbase-app .btn-source:hover {
  border-color: rgba(134, 207, 174, .4) !important;
}

/* Appearance toggle (sun/moon): icon follows the attribute on <html>. */
[data-appearance-toggle] .icon-moon { display: none; }
html[data-medbase-appearance="dark"] [data-appearance-toggle] .icon-sun { display: none; }
html[data-medbase-appearance="dark"] [data-appearance-toggle] .icon-moon { display: block; }

/* Landing topbar appearance toggle: glass circle for the forest header. */
.landing-appearance-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(24, 24, 23, .14);
  background: rgba(255, 255, 255, .75);
  color: #181817;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease;
}
.landing-appearance-toggle:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
.landing-appearance-toggle svg { width: 17px; height: 17px; }
html[data-medbase-appearance="dark"] .landing-appearance-toggle {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
html[data-medbase-appearance="dark"] .landing-appearance-toggle:hover {
  background: rgba(255, 255, 255, .18);
}

html {
  --forest: var(--theme-base);
  --paper: var(--theme-base);
  --white: var(--theme-surface);
  --ink: var(--theme-deep);
  --deep: var(--theme-deep);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --mint: var(--theme-secondary);
  --mint-soft: var(--theme-accent-soft);
  --soft: var(--theme-accent);
  --sage: var(--theme-accent);
  --pink: var(--theme-secondary);
  --blue: var(--theme-wash-2);
  --lime: var(--theme-accent-soft);
  --green: var(--theme-accent);
  /* Shape lock (iOS Radii): cards 20, icon tiles 12, inline tags 6, pills 999. */
  --r-card: 20px;
  --r-tile: 12px;
  --r-tag: 6px;
  --r-pill: 999px;
  /* Type: system stack like iOS SF; Sacramento is the greeting script only. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
  --font-script: "Sacramento", cursive;
  /* Motion vocabulary (iOS Motion): strong ease-out, press 120ms / release 200ms. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Brand greeting: the joined script, same word as the iOS launch intro. */
.medbase-script {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* AuroraText (Magic UI equivalent, pure CSS): animated gradient headline.
   Usage: <span class="aurora-text">…</span>. i18n-safe — wrap the whole
   localized string, no per-word splitting. */
.aurora-text {
  background-image: linear-gradient(135deg, #3f2a75, #6a3fa0 30%, #245f9d 55%, #784183 80%, #3f2a75) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: medbase-aurora 9s linear infinite !important;
}
html[data-medbase-appearance="dark"] .aurora-text {
  background-image: linear-gradient(135deg, #b69cff, #f2a8cf 30%, #78bdff 55%, #c29bff 80%, #b69cff) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .aurora-text {
    background-image: linear-gradient(135deg, #b69cff, #f2a8cf 30%, #78bdff 55%, #c29bff 80%, #b69cff) !important;
  }
}
@keyframes medbase-aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-text {
    animation: none !important;
  }
}

/* FAQ section (Tailark split variant, vanilla): heading left, single-open
   accordion right. Height animates via grid-rows so answers can wrap. */
.faq-section {
  width: 100% !important;
  padding: clamp(56px, 7vw, 110px) clamp(20px, 5vw, 60px) !important;
  background: var(--theme-base) !important;
}
.faq-grid {
  max-width: 1080px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: start !important;
  text-align: left !important;
}
.faq-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--theme-accent) !important;
  margin-bottom: 14px !important;
}
.faq-head h2 {
  margin: 0 !important;
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--theme-deep) !important;
  text-wrap: balance !important;
}
.faq-head p {
  margin: 12px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--theme-muted) !important;
}
.faq-list {
  border-top: 1px solid var(--theme-line) !important;
}
.faq-item {
  border-bottom: 1px solid var(--theme-line) !important;
}
.faq-q {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px 4px !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  color: var(--theme-deep) !important;
  text-align: left !important;
}
.faq-icon {
  position: relative !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
}
.faq-icon::before,
.faq-icon::after {
  content: "" !important;
  position: absolute !important;
  background: currentColor !important;
  border-radius: 2px !important;
  transition: transform 0.3s ease !important;
}
.faq-icon::before {
  left: 2px !important;
  right: 2px !important;
  top: 10px !important;
  height: 2px !important;
}
.faq-icon::after {
  top: 2px !important;
  bottom: 2px !important;
  left: 10px !important;
  width: 2px !important;
}
.faq-item.open .faq-icon::after {
  transform: rotate(90deg) !important;
}
.faq-a {
  display: grid !important;
  grid-template-rows: 0fr !important;
  transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr !important;
}
.faq-a > div {
  overflow: hidden !important;
  min-height: 0 !important;
}
.faq-a p {
  margin: 0 0 20px !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--theme-muted) !important;
  max-width: 60ch !important;
}
@media (max-width: 860px) {
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-icon::before,
  .faq-icon::after {
    transition: none !important;
  }
}

/* Dashboard ad slot: third card next to search + regional pulse.
   Shrinks the search hero, mirrors the pulsecard language. */
body.medbase-app .hero-grid.has-ads {
  grid-template-columns: 1.35fr 1fr 1fr !important;
}
body.medbase-app .hero-stats {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(217, 210, 201, 0.82) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.68) !important;
}
body.medbase-app .hero-stats .stat {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 12px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(217, 210, 201, 0.72) !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.medbase-app .hero-stats .stat:last-child {
  border-bottom: 0 !important;
}
body.medbase-app .hero-stats .stat:hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.5) !important;
}
body.medbase-app .hero-stats .stat-spot {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}
body.medbase-app .hero-stats .stat strong {
  font-size: 20px !important;
}
body.medbase-app .hero-stats .metriclabel {
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Compact desktop overview: show the search, operational snapshot, and first
   clinical panels without spending a full viewport on the opening row. */
@media (min-width: 861px) {
  body.medbase-app .content {
    padding: 22px 26px !important;
  }
  body.medbase-app .heading {
    margin-bottom: 14px !important;
  }
  body.medbase-app .heading > .btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
  body.medbase-app .hero-grid.has-ads {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  body.medbase-app .hero-grid.has-ads > .hero,
  body.medbase-app .hero-grid.has-ads > .pulsecard {
    min-height: 0 !important;
    padding: 20px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero h2 {
    margin-bottom: 12px !important;
    font-size: 30px !important;
  }
  body.medbase-app .hero-grid.has-ads .searchbox {
    height: 52px !important;
  }
  body.medbase-app .hero-grid.has-ads .searchhint {
    margin-top: 9px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats {
    margin-top: 14px !important;
    border-radius: 14px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat {
    min-height: 58px !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat-spot {
    width: 28px !important;
    height: 28px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat strong {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat small {
    margin-top: 1px !important;
  }
  body.medbase-app .hero-grid.has-ads .pulsecard h2 {
    margin: 7px 0 !important;
    font-size: 21px !important;
  }
  body.medbase-app .hero-grid.has-ads .pulsecard p {
    font-size: 12px !important;
  }
  body.medbase-app .hero-grid.has-ads .adslot {
    min-height: 118px !important;
    margin: 10px 0 !important;
    padding: 13px !important;
  }
  body.medbase-app .hero-grid.has-ads .tilt-figure {
    margin: 10px 0 !important;
  }
  body.medbase-app .hero-grid.has-ads .adslot strong {
    font-size: 13px !important;
  }
  body.medbase-app .hero-grid.has-ads .adslot-cta {
    margin-top: 5px !important;
    padding: 5px 11px !important;
  }
}
body.medbase-app .adcard {
  background: #f6f2fb !important;
  border: 1px solid #e3d9f5 !important;
}
body.medbase-app .adcard .eyebrow {
  color: var(--theme-accent) !important;
}
body.medbase-app .adcard h2 {
  font-size: 20px !important;
}
body.medbase-app .adslot {
  position: relative !important;
  margin: 14px 0 !important;
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(120deg, #0e5a54 0%, #178a7d 58%, #2aa78f 100%) !important;
  color: #ffffff !important;
  text-align: left !important;
}
body.medbase-app .adslot::before,
body.medbase-app .adslot::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  pointer-events: none !important;
}
body.medbase-app .adslot::before {
  width: 150px !important;
  height: 150px !important;
  right: -55px !important;
  top: -60px !important;
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.07), 0 0 0 48px rgba(255, 255, 255, 0.05) !important;
}
body.medbase-app .adslot::after {
  width: 70px !important;
  height: 70px !important;
  left: -25px !important;
  bottom: -30px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 0 !important;
}
body.medbase-app .adslot-tag {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
body.medbase-app .adslot strong {
  position: relative !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  max-width: 95% !important;
}
body.medbase-app .adslot small {
  position: relative !important;
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
body.medbase-app .adslot-cta {
  position: relative !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0e5a54 !important;
}

/* TiltedCard port (vanilla, no motion lib): pointer-tracked 3D tilt with
   cursor tooltip. Fine pointers only — touch/reduced-motion stay static. */
body.medbase-app .tilt-figure {
  position: relative !important;
  perspective: 800px !important;
  margin: 14px 0 !important;
}
body.medbase-app .tilt-figure .adslot {
  margin: 0 !important;
}
body.medbase-app .tilt-inner,
body.medbase-app [data-tilt-inner] {
  transform-style: preserve-3d !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}
body.medbase-app .tilt-caption {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: #ffffff !important;
  color: #2d2d2d !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  opacity: 0 !important;
  transform: translate(14px, 14px) !important;
  transition: opacity 0.25s ease !important;
}
@media (max-width: 850px) {
  body.medbase-app .hero-grid.has-ads {
    grid-template-columns: 1fr !important;
  }
}

/* Dashboard search mirrors the landing pill: blurred white capsule,
   dark inner button with the rotating beam glow. */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}
body.medbase-app .searchbox {
  height: 58px !important;
  padding: 5px 6px 5px 20px !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 40px !important;
  box-shadow: none !important;
  border: 1px solid #e5e1da !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
body.medbase-app .searchbox > svg {
  width: 20px !important;
  height: 20px !important;
  color: #8c867e !important;
  flex: 0 0 auto !important;
}
body.medbase-app .searchbox input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  font-size: 14.5px !important;
}
body.medbase-app .searchbox input::placeholder {
  color: #8e8880 !important;
}
body.medbase-app .searchbox .key {
  display: none !important;
}
body.medbase-app .searchbox button[type="submit"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  height: 46px !important;
  min-width: 104px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 23px !important;
  background: var(--ink) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  flex: 0 0 auto !important;
}
body.medbase-app .searchbox button[type="submit"] svg {
  width: 16px !important;
  height: 16px !important;
}
body.medbase-app .searchbox button[type="submit"]::before {
  content: "" !important;
  position: absolute !important;
  inset: -1.5px !important;
  border-radius: 23.5px !important;
  padding: 2px !important;
  background: conic-gradient(from var(--beam-angle, 0deg), transparent 0%, transparent 60%, #2ba7ff 76%, #ca45ff 88%, #ff3366 94%, #fe881b 98%, transparent 100%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body.medbase-app .searchbox button[type="submit"]::after {
  display: none !important;
}
/* Narrower hero column (3-card row): smaller title + smaller spot image
   so the blister pack no longer overlaps the heading. */
body.medbase-app .hero h2 {
  font-size: 23px !important;
  max-width: 330px !important;
}
body.medbase-app .hero-spot {
  width: 104px !important;
  height: 104px !important;
  right: 10px !important;
  top: 10px !important;
}
@media (max-width: 620px) {
  body.medbase-app .searchbox {
    height: 52px !important;
    padding-left: 16px !important;
  }
  body.medbase-app .searchbox button[type="submit"] {
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
}

/* Flacon brand mark: the same object as the app icon and Welcome hero. */
.brand-mark {
  background: transparent !important;
  overflow: hidden;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html, body { cursor: auto !important; }

body,
.home,
.precision-section,
.final-cta,
.medbase-footer,
.network-section,
.metrics-showcase-section {
  background-color: var(--theme-base) !important;
}

.story { background-color: var(--theme-base) !important; }
.home h1 span,
.home .kicker,
.home .next-glimpse a { color: var(--theme-accent) !important; }

body:not(.cinematic-page),
.home:not(.cinematic-home),
.precision-section,
.final-cta,
.medbase-footer,
.network-section,
.metrics-showcase-section {
  background-image: var(--theme-glow) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

@media (max-width: 768px) {
  body:not(.cinematic-page),
  .home:not(.cinematic-home),
  .precision-section,
  .final-cta,
  .medbase-footer,
  .network-section,
  .metrics-showcase-section {
    background-attachment: scroll !important;
  }
}

.precision-section,
.precision-desktop,
.precision-mobile,
.precision-heading h2,
.precision-badge {
  color: var(--theme-deep) !important;
}

.precision-heading p,
.precision-mobile-items .precision-item {
  color: var(--theme-muted) !important;
}

.precision-heading h2 .precision-gradient {
  background-image: linear-gradient(90deg, var(--theme-accent), var(--theme-secondary) 52%, var(--theme-deep)) !important;
}

.precision-chip-mark svg {
  stroke: var(--theme-accent) !important;
}

.operations-section {
  --ops-page: var(--theme-base) !important;
  --ops-surface: var(--theme-surface) !important;
  --ops-panel: var(--theme-surface) !important;
  --ops-ink: var(--theme-deep) !important;
  --ops-muted: var(--theme-muted) !important;
  --ops-accent: var(--theme-accent) !important;
  --ops-accent-soft: var(--theme-accent-soft) !important;
  --ops-green: var(--theme-accent) !important;
}

.operations-scene { background: var(--theme-base) !important; }
.ops-panel { background: linear-gradient(180deg, var(--theme-surface), var(--theme-wash-1)) !important; }
.ops-card:last-child .ops-panel { background: linear-gradient(180deg, var(--theme-surface), var(--theme-wash-2)) !important; }
.ops-timeline { color: var(--theme-accent) !important; }
.ops-bars i { background: var(--theme-accent-soft) !important; }
.ops-automate { background: linear-gradient(100deg, var(--theme-secondary), var(--theme-accent)) !important; box-shadow: 0 .6cqh 1.35cqw color-mix(in srgb, var(--theme-accent) 34%, transparent) !important; }

body.medbase-app .sidebar,
body.medbase-app .topbar,
body.medbase-app .panel,
body.medbase-app .stat,
body.medbase-app .iconbtn,
body.medbase-app .btn,
body.medbase-app .searchbox,
body.medbase-app .field input,
body.medbase-app .field select,
body.medbase-app table,
body.medbase-app dialog {
  background-color: var(--theme-surface) !important;
}

body.medbase-app .btn.primary {
  background-color: var(--theme-deep, #193d35) !important;
  color: #ffffff !important;
  border-color: var(--theme-deep, #193d35) !important;
}

body.medbase-app .btn.primary:disabled {
  background-color: #e2e8df !important;
  color: #8c978b !important;
  border-color: #d1dcce !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

body.medbase-app .sidebar { border-color: var(--theme-line) !important; }
body.medbase-app .nav button.active,
body.medbase-app .pulsecard,
body.medbase-app .comparebar,
body.medbase-app .result,
body.medbase-app .details { background: var(--theme-accent-soft) !important; }
body.medbase-app .hero {
  background: color-mix(in srgb, var(--theme-surface) 76%, transparent) !important;
  color: var(--theme-deep) !important;
  border-color: color-mix(in srgb, var(--theme-surface) 92%, transparent) !important;
}
body.medbase-app .hero .eyebrow { color: var(--theme-accent) !important; }
body.medbase-app .brandmark { background: var(--theme-deep) !important; color: var(--theme-secondary) !important; }
/* Except when the mark is the flacon itself: the tile was a backdrop for a glyph,
   and behind a rendered bottle it reads as a dark box someone forgot to remove. */
body.medbase-app .brandmark:has(img),
.brandmark:has(img) {
  width: 24px !important;
  height: 33px !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.brandmark:has(img) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
body.medbase-app .stat-icon,
body.medbase-app .avatar { background: var(--theme-wash-1) !important; color: var(--theme-accent) !important; }
body.medbase-app .drugicon { background: transparent !important; }
body.medbase-app .stat-icon.orange { background: var(--theme-wash-2) !important; }
body.medbase-app .stat-icon.rose { background: var(--theme-wash-3) !important; }

body > header { background: var(--theme-deep) !important; color: var(--theme-surface) !important; }
body > header a { color: var(--theme-surface) !important; border-color: color-mix(in srgb, var(--theme-surface) 45%, transparent) !important; }
.layout aside a, article a { color: var(--theme-accent) !important; }
article h2, article footer, .layout aside { border-color: var(--theme-line) !important; }
article table, article input { border-color: var(--theme-line) !important; background: var(--theme-surface) !important; color: var(--theme-deep) !important; }
article th { background: var(--theme-accent-soft) !important; color: var(--theme-deep) !important; }

.medbase-theme-control {
  position: fixed;
  z-index: 9999;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--theme-deep);
}

.medbase-theme-trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--theme-deep) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent);
  color: var(--theme-deep);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--theme-deep) 13%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.medbase-theme-dots { width: 29px; height: 29px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 50%; background: var(--theme-surface); }
.medbase-theme-dots i { display: block; border-radius: 50%; }
.medbase-theme-dots i:nth-child(1) { background: var(--theme-wash-1); }
.medbase-theme-dots i:nth-child(2) { background: var(--theme-wash-2); }
.medbase-theme-dots i:nth-child(3) { background: var(--theme-wash-3); }
.medbase-theme-dots i:nth-child(4) { background: var(--theme-accent); }

.medbase-theme-menu {
  width: min(292px, calc(100vw - 36px));
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--theme-deep) 11%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  box-shadow: 0 20px 55px color-mix(in srgb, var(--theme-deep) 16%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.medbase-theme-menu[hidden] { display: none; }
.medbase-theme-title { padding: 7px 9px 9px; color: var(--theme-muted); font-size: 10px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; }
.medbase-theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.medbase-theme-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--theme-deep);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.medbase-theme-option:hover { background: color-mix(in srgb, var(--theme-accent-soft) 70%, transparent); }
.medbase-theme-option[aria-checked="true"] { border-color: var(--theme-accent); background: var(--theme-accent-soft); font-weight: 700; }
.medbase-theme-swatch { width: 27px; height: 27px; flex: 0 0 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 2px; border: 1px solid rgba(0,0,0,.06); border-radius: 8px; background: #fff; overflow: hidden; }
.medbase-theme-swatch i { display: block; }
.medbase-theme-trigger:focus-visible,.medbase-theme-option:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 3px; }

/* Sources & Buttons Theme Integration */
.sourcecard {
  background: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
}
.sourcecard-badge {
  background: var(--theme-wash-1) !important;
  color: var(--theme-muted) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 15%, transparent) !important;
}
.btn-source {
  color: var(--theme-deep) !important;
  border-color: color-mix(in srgb, var(--theme-deep) 14%, transparent) !important;
}
.btn-source:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 40%, transparent) !important;
  color: var(--theme-deep) !important;
}
.btn-source-arrow {
  background: var(--theme-wash-1) !important;
  color: var(--theme-accent) !important;
}
.btn-source:hover .btn-source-arrow {
  background: var(--theme-accent) !important;
  color: #ffffff !important;
}
.btn-source.btn-source-primary {
  background: linear-gradient(180deg, var(--theme-deep) 0%, color-mix(in srgb, var(--theme-deep) 85%, #000) 100%) !important;
  color: #ffffff !important;
}
.btn-source.btn-source-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 60%, var(--theme-deep)) 0%, var(--theme-deep) 100%) !important;
  color: #ffffff !important;
}
.btn-source.btn-source-primary .btn-source-arrow {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.btn-source.btn-source-primary:hover .btn-source-arrow {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-deep) !important;
}

@media (max-width: 620px) {
  body.medbase-app .sidebar {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-line) !important;
  }
  body.medbase-app .nav button.active {
    background: color-mix(in srgb, var(--theme-accent-soft) 80%, transparent) !important;
    color: var(--theme-accent, #9567bf) !important;
    border-radius: 10px !important;
    max-width: 66px !important;
    height: 44px !important;
  }
  .medbase-theme-control { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .medbase-theme-trigger { min-height: 40px; padding: 5px 10px 5px 6px; }
  .medbase-theme-trigger > span:last-child { display: none; }
  .medbase-theme-menu { width: min(286px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .medbase-theme-control * { transition: none !important; }
}

/* ==========================================================================
   HeroUI Typography Scale & Rules
   Reference: https://heroui.com/en/docs/react/components/typography
   ========================================================================== */
:root {
  /* HeroUI Heading Tokens: size / weight / line-height / tracking */
  --heroui-h1: 600 clamp(28px, 3.2vw, 36px)/1.11 Inter, "Mazzard H", -apple-system, sans-serif;
  --heroui-h1-tracking: -0.02em;

  --heroui-h2: 600 clamp(24px, 2.6vw, 30px)/1.17 Inter, "Mazzard H", -apple-system, sans-serif;
  --heroui-h2-tracking: -0.02em;

  --heroui-h3: 600 clamp(20px, 2.1vw, 24px)/1.25 Inter, "Mazzard H", -apple-system, sans-serif;
  --heroui-h3-tracking: -0.015em;

  --heroui-h4: 600 clamp(18px, 1.8vw, 20px)/1.33 Inter, "Mazzard H", -apple-system, sans-serif;
  --heroui-h4-tracking: -0.015em;

  --heroui-h5: 600 18px/1.39 Inter, "Mazzard H", -apple-system, sans-serif;
  --heroui-h5-tracking: -0.015em;

  --heroui-h6: 600 16px/1.50 Inter, "Mazzard H", -apple-system, sans-serif;
  --heroui-h6-tracking: -0.015em;

  /* HeroUI Body Tokens */
  --heroui-body: 400 16px/1.75 Inter, -apple-system, sans-serif;
  --heroui-body-sm: 400 14px/1.50 Inter, -apple-system, sans-serif;
  --heroui-body-xs: 400 12px/1.25 Inter, -apple-system, sans-serif;

  /* HeroUI Micro-labels / Eyebrow Tokens */
  --heroui-eyebrow: 700 11px/1.2 Inter, sans-serif;
  --heroui-eyebrow-tracking: 0.12em;
}

.heroui-h1 { font: var(--heroui-h1); letter-spacing: var(--heroui-h1-tracking); }
.heroui-h2 { font: var(--heroui-h2); letter-spacing: var(--heroui-h2-tracking); }
.heroui-h3 { font: var(--heroui-h3); letter-spacing: var(--heroui-h3-tracking); }
.heroui-h4 { font: var(--heroui-h4); letter-spacing: var(--heroui-h4-tracking); }
.heroui-h5 { font: var(--heroui-h5); letter-spacing: var(--heroui-h5-tracking); }
.heroui-h6 { font: var(--heroui-h6); letter-spacing: var(--heroui-h6-tracking); }
.heroui-body { font: var(--heroui-body); letter-spacing: normal; }
.heroui-body-sm { font: var(--heroui-body-sm); letter-spacing: normal; }
.heroui-body-xs { font: var(--heroui-body-xs); letter-spacing: normal; }
.heroui-eyebrow { font: var(--heroui-eyebrow); letter-spacing: var(--heroui-eyebrow-tracking); text-transform: uppercase; }

/* European Network Section Theme Sync */
.network-section,
.metrics-showcase-section {
  background-color: var(--theme-base) !important;
}
.network-eyebrow {
  background: color-mix(in srgb, var(--theme-accent-soft) 70%, var(--theme-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
  color: var(--theme-accent) !important;
}
.network-title {
  color: var(--theme-deep) !important;
}
.network-title span {
  color: var(--theme-accent) !important;
}
.network-subtitle {
  color: var(--theme-muted) !important;
}
.network-card {
  background: transparent !important;
  border: none !important;
  color: var(--theme-deep) !important;
  box-shadow: none !important;
}
.network-card:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.network-card.is-active-market {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.network-country-name {
  color: var(--theme-deep) !important;
}
.network-card:hover .network-country-name {
  color: var(--theme-accent) !important;
}
.network-agency-badge {
  display: none !important;
}
.network-feature-item {
  background: color-mix(in srgb, var(--theme-surface) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-line) 70%, transparent) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--theme-deep) 3%, transparent) !important;
}
.network-feature-icon {
  background: color-mix(in srgb, var(--theme-accent-soft) 55%, var(--theme-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 25%, transparent) !important;
  color: var(--theme-accent) !important;
}
.network-feature-title {
  color: var(--theme-deep) !important;
}
.network-feature-desc {
  color: var(--theme-muted) !important;
}



/* ==========================================================================
   HeroUI Avatar Component (Orb Gradient + Refined Doctor Initials)
   ========================================================================== */
/* ==========================================================================
   HeroUI Avatar Design System Component
   <Avatar>
     <Avatar.Image ... />
     <Avatar.Fallback>JD</Avatar.Fallback>
   </Avatar>
   ========================================================================== */
.heroui-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: hidden;
  user-select: none;
  border-radius: 9999px;
  background: radial-gradient(circle at 32% 28%, #bbf7d0 0%, #38bdf8 36%, #818cf8 68%, #4f46e5 100%);
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 650 !important;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.08);
  letter-spacing: 0.02em;
  line-height: 1;
  box-sizing: border-box;
}
.heroui-avatar-preview {
  width: 52px;
  height: 52px;
  font-size: 18px;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.8), 0 0 0 2px var(--theme-surface, #fff), 0 0 0 4px color-mix(in srgb, var(--theme-accent, #9567bf) 45%, transparent), 0 8px 20px rgba(0, 0, 0, 0.12);
}
.heroui-avatar-lg {
  width: 48px;
  height: 48px;
  font-size: 16px;
}
.heroui-avatar-md {
  width: 38px;
  height: 38px;
  font-size: 14px;
}
.heroui-avatar-topbar {
  width: 38px !important;
  height: 38px !important;
  font-size: 13.5px !important;
}
.heroui-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.heroui-avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

/* Active doctor profile: mirror the iOS identity treatment while preserving
   the narrower desktop sidebar. */
@media (min-width: 621px) {
  body.medbase-app .sidebar-bottom {
    margin: 0 8px 2px !important;
  }
  body.medbase-app .sidebar .profile {
    gap: 10px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }
  body.medbase-app .sidebar #user-avatar-widget {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    background: radial-gradient(circle at 32% 28%, #bbf7d0 0%, #38bdf8 36%, #818cf8 68%, #4f46e5 100%) !important;
    box-shadow: none !important;
    filter: none !important;
    font-size: 25px !important;
    letter-spacing: 0 !important;
  }
  body.medbase-app .sidebar #user-avatar-widget .heroui-avatar-fallback {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(49, 46, 129, 0.28) !important;
  }
  body.medbase-app .sidebar .profile-info {
    min-width: 0 !important;
  }
  body.medbase-app .sidebar #user-profile-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body.medbase-app .sidebar #user-profile-role {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
  }
}
.heroui-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: inherit;
  font-weight: 650;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  line-height: 1;
  user-select: none;
}
.heroui-avatar-img,
.heroui-avatar-image,
.heroui-avatar > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 1;
}

/* Orb Gradient Variations */
.avatar-orb-cyan { background: radial-gradient(circle at 32% 28%, #bbf7d0 0%, #38bdf8 36%, #818cf8 68%, #4f46e5 100%) !important; }
.avatar-orb-iris { background: radial-gradient(circle at 32% 28%, #a5f3fc 0%, #60a5fa 38%, #a855f7 72%, #581c87 100%) !important; }
.avatar-orb-teal { background: radial-gradient(circle at 32% 28%, #99f6e4 0%, #38bdf8 42%, #6366f1 78%, #312e81 100%) !important; }
.avatar-orb-lavender { background: radial-gradient(circle at 32% 28%, #fbcfe8 0%, #c084fc 40%, #7c3aed 76%, #4c1d95 100%) !important; }
.avatar-orb-sapphire { background: radial-gradient(circle at 32% 28%, #dbeafe 0%, #38bdf8 40%, #2563eb 75%, #1e1b4b 100%) !important; }

/* Topbar Active User Chip with HeroUI Avatar */
.user-top-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px 5px 7px !important;
  border-radius: 999px !important;
}
.user-top-link .heroui-avatar-xs {
  width: 22px !important;
  height: 22px !important;
}

/* Metrics Showcase Section Theme Sync */
.metrics-showcase-section {
  background-color: var(--theme-base) !important;
}
.metric-showcase-card {
  background: color-mix(in srgb, var(--theme-surface) 85%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-line) 75%, transparent) !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--theme-deep) 4%, transparent) !important;
}
.metric-showcase-card:hover {
  background: var(--theme-surface) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 60%, transparent) !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--theme-accent) 15%, transparent) !important;
}
.metric-card-media {
  background: color-mix(in srgb, var(--theme-wash-1) 55%, var(--theme-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-line) 55%, transparent) !important;
}
.metric-card-eyebrow,
.metric-card-icon {
  color: var(--theme-accent) !important;
}
.metric-card-value,
.metric-card-title,
.metrics-showcase-title {
  color: var(--theme-deep) !important;
}
.metrics-showcase-title span {
  color: var(--theme-accent) !important;
}
.metric-card-desc,
.metrics-showcase-subtitle {
  color: var(--theme-muted) !important;
}

/* Topbar Active User Profile (Clean Non-Pill Floating Design) */
.user-top-profile {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: var(--theme-deep, var(--ink, #181817)) !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
.user-top-profile:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}
.user-top-profile .heroui-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
}
.user-top-profile span:not(.heroui-avatar span) {
  font-family: var(--font-system) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  color: var(--theme-deep, var(--ink, #181817)) !important;
  letter-spacing: -0.01em !important;
}

/* ==========================================================================
   iOS brand lock — landing overrides (index.html inline styles stay, but the
   brand reads as one product: ink pills, tight editorial type, flacon mark).
   ========================================================================== */
.brand,
.auth-brand {
  font-family: "Vollkorn", Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.035em !important;
}
.brand small {
  font-family: var(--font-system) !important;
}
.brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* The flacon is portrait (0.70). Forced into the 34px square the old icon tile
   used, it rendered 34x48 and lost its base to the tile's overflow. It keeps its
   own proportion instead, and the tile stops clipping. */
.brand-mark:has(img) {
  display: block !important;
  width: 31px !important;   /* 44 x 0.70, the flacon's own proportion */
  height: 44px !important;
  overflow: visible !important;
}
.brand-mark:has(img) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.hero h1,
#hero-title {
  font-family: var(--font-system) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.hero h1 span,
#hero-title span {
  color: var(--theme-muted) !important;
  font-weight: 500 !important;
}
.hero h1 span.aurora-text,
#hero-title span.aurora-text {
  color: transparent !important;
}
/* Middle line soft, like the iOS Welcome editorial headline (800 / 500 / 800):
   the app greys it rather than tinting it, so the eye lands on the two ink lines. */
/* Primary actions are ink pills (iOS ActionButton): lock the shapes. */
.open-app,
.search button,
.final-button {
  border-radius: var(--r-pill) !important;
}
.open-app {
  background: var(--theme-deep) !important;
  color: var(--theme-surface) !important;
  border-color: transparent !important;
}
.open-app:hover {
  background: var(--theme-deep) !important;
  color: var(--theme-surface) !important;
  border-color: transparent !important;
}
.search button {
  background: var(--theme-deep) !important;
  color: var(--theme-surface) !important;
}
.module-card-label {
  font-family: var(--font-system) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.module-card--interactions .module-card-icon img {
  width: 116px !important;
  height: 116px !important;
}
.module-card--interactions:hover .module-card-icon img {
  transform: scale(1.04) translateY(-4px) !important;
}
/* Dark: glass surfaces replace white cards; hard-coded light fills follow. */
html[data-medbase-appearance="dark"] .home .brand,
html[data-medbase-appearance="dark"] .home .module-card-label {
  color: #ffffff !important;
}
html[data-medbase-appearance="dark"] .home .hero .source-note,
html[data-medbase-appearance="dark"] .home .frequent-label {
  color: rgba(241, 236, 255, 0.78) !important;
}
html[data-medbase-appearance="dark"] .home .hero .source-note a {
  color: rgba(255, 255, 255, 0.92) !important;
}
html[data-medbase-appearance="dark"] .home .search > svg {
  color: rgba(241, 236, 255, 0.72) !important;
}
html[data-medbase-appearance="dark"] .home .module-card:hover .module-card-label {
  color: var(--theme-accent) !important;
}
html[data-medbase-appearance="dark"] .search {
  background: rgba(29, 21, 53, 0.85) !important;
  border-color: var(--theme-line) !important;
}
html[data-medbase-appearance="dark"] .search input {
  color: #ffffff !important;
}
html[data-medbase-appearance="dark"] .search input::placeholder {
  color: rgba(241, 236, 255, 0.5) !important;
}
html[data-medbase-appearance="dark"] .frequent-chip {
  background: rgba(29, 21, 53, 0.85) !important;
  border-color: var(--theme-line) !important;
  color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .brand,
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .module-card-label {
    color: #ffffff !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .hero .source-note,
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .frequent-label {
    color: rgba(241, 236, 255, 0.78) !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .hero .source-note a {
    color: rgba(255, 255, 255, 0.92) !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .search > svg {
    color: rgba(241, 236, 255, 0.72) !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .home .module-card:hover .module-card-label {
    color: var(--theme-accent) !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .search {
    background: rgba(29, 21, 53, 0.85) !important;
    border-color: var(--theme-line) !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .search input {
    color: #ffffff !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .search input::placeholder {
    color: rgba(241, 236, 255, 0.5) !important;
  }
  html:not([data-medbase-appearance="light"]):not([data-medbase-appearance="dark"]) .frequent-chip {
    background: rgba(29, 21, 53, 0.85) !important;
    border-color: var(--theme-line) !important;
    color: #ffffff !important;
  }
}

/* Sticky Modal Header & Scrollable Body */
body.medbase-app dialog {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: 88dvh !important;
  padding: 0 !important;
}
body.medbase-app dialog:not([open]) {
  display: none !important;
}
body.medbase-app .modalhead {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  flex-shrink: 0 !important;
  background: var(--theme-surface, rgba(255, 255, 255, 0.95)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--theme-line, var(--line)) !important;
}
body.medbase-app .modalbody {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ========================================================
   MODERN UNTITLED UI TABLE SYSTEM (Table02DividerLine)
   ======================================================== */

.table-card-root {
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.03) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Table Card Header */
.table-card-header {
  padding: 20px 24px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px solid #eaecf0 !important;
  background: #ffffff !important;
  flex-wrap: wrap !important;
}
.table-card-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}
.table-card-title {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #101828 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
.badge-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  background: #f2f4f7 !important;
  color: #344054 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.table-card-desc {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: #475467 !important;
  line-height: 1.45 !important;
}

/* Shared table-header tint, taken from the calculation notice. */
body.medbase-app .table-card-header {
  background: #f1ddf4 !important;
  border-bottom-color: #dfc7e3 !important;
}
body.medbase-app .table-card-title {
  color: #2a2430 !important;
}
body.medbase-app .table-card-desc {
  color: #67576d !important;
}
body.medbase-app .table-card-header .badge-count {
  background: #ffffff !important;
  color: #654b70 !important;
  border: 1px solid #dfc7e3 !important;
}
.table-card-header-trailing {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Inline Search Box in Table Header */
.table-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 40px !important;
  padding: 0 14px !important;
  background: #f9fafb !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  width: 270px !important;
  transition: all .2s ease !important;
  box-sizing: border-box !important;
}
.table-search-box:focus-within {
  background: #ffffff !important;
  border-color: #704fe6 !important;
  box-shadow: 0 0 0 3px rgba(112, 79, 230, 0.12) !important;
  width: 310px !important;
}
.table-search-box .ph {
  color: #667085 !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
}
.table-search-box input {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  color: #101828 !important;
  width: 100% !important;
  padding: 0 !important;
}
.table-search-box input::placeholder {
  color: #98a2b3 !important;
}
.search-kbd {
  font-size: 10.5px !important;
  font-family: "JetBrains Mono", monospace !important;
  background: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  color: #667085 !important;
}

.table-dropdown-trigger {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  color: #667085 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.table-dropdown-trigger:hover {
  background: #f9fafb !important;
  color: #101828 !important;
  border-color: #98a2b3 !important;
}

/* Table Scroll & Modern Table */
.table-scroll-container {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.modern-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  text-align: left !important;
  font-size: 13.5px !important;
  background: #ffffff !important;
  border: none !important;
}
.modern-table thead {
  background: #f9fafb !important;
}
.modern-table th {
  padding: 13px 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475467 !important;
  letter-spacing: 0.02em !important;
  border-top: none !important;
  border-bottom: 1px solid #eaecf0 !important;
  border-left: none !important;
  border-right: none !important;
  background: #f9fafb !important;
  white-space: nowrap !important;
  user-select: none !important;
}
.modern-table th.th-sortable {
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
}
.modern-table th.th-sortable:hover {
  background: #f2f4f7 !important;
  color: #101828 !important;
}

.th-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.sort-icon {
  font-size: 13px !important;
  color: #98a2b3 !important;
  transition: transform .15s ease, color .15s ease !important;
}
.th-sortable:hover .sort-icon {
  color: #475467 !important;
}

/* Table Rows & Cells */
.modern-table tbody tr {
  border-bottom: 1px solid #eaecf0 !important;
  transition: background-color .15s ease !important;
}
.modern-table tbody tr:hover {
  background-color: #f9fafb !important;
}
.modern-table tbody tr.is-selected {
  background-color: #f4f3ff !important;
}
.modern-table td {
  padding: 14px 20px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid #f2f4f7 !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  color: #101828 !important;
}

/* Custom Checkbox */
.ui-checkbox-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.ui-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #d0d5dd !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all .15s ease !important;
  margin: 0 !important;
}
.ui-checkbox:checked {
  background: #704fe6 !important;
  border-color: #704fe6 !important;
}
.ui-checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Cell Drug / Avatar Group */
.cell-drug-group {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 220px !important;
}
.drug-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #f4f5f6 !important;
  border: 1px solid #eaecf0 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.drug-avatar img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}
.drug-avatar.avatar-warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}
.drug-avatar.avatar-danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
.drug-avatar.avatar-success {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}
.drug-info-text {
  display: flex !important;
  flex-direction: column !important;
}
.table-drug-title {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: #101828 !important;
  text-align: left !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  transition: color .15s ease !important;
}
.table-drug-title:hover {
  color: #704fe6 !important;
  text-decoration: underline !important;
}
.table-drug-sub {
  font-size: 12.5px !important;
  color: #667085 !important;
  margin-top: 2px !important;
}

/* BadgeWithDot (from Prompt: BadgeWithDot size="sm") */
.badge-dot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
.badge-dot-bullet {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
/* Success */
.badge-dot-success {
  background: #ecfdf3 !important;
  color: #027a48 !important;
  border: 1px solid #a6f4c5 !important;
}
.badge-dot-success .badge-dot-bullet {
  background: #12b76a !important;
}
/* Warning / Temporary */
.badge-dot-warning {
  background: #fffaeb !important;
  color: #b54708 !important;
  border: 1px solid #fedf89 !important;
}
.badge-dot-warning .badge-dot-bullet {
  background: #f79009 !important;
}
/* Danger / Permanent */
.badge-dot-danger {
  background: #fef3f2 !important;
  color: #b42318 !important;
  border: 1px solid #fecdca !important;
}
.badge-dot-danger .badge-dot-bullet {
  background: #f04438 !important;
}
/* Gray / Monitored */
.badge-dot-gray {
  background: #f8f9fa !important;
  color: #344054 !important;
  border: 1px solid #eaecf0 !important;
}
.badge-dot-gray .badge-dot-bullet {
  background: #667085 !important;
}

/* Meta / About Cell */
.cell-meta-group {
  display: flex !important;
  flex-direction: column !important;
  min-width: 170px !important;
}
.table-meta-title {
  margin: 0 0 3px !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  color: #101828 !important;
}
.table-meta-sub {
  margin: 0 !important;
  font-size: 12px !important;
  color: #667085 !important;
}
.table-atc-pill {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  background: #f2f4f7 !important;
  color: #344054 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* ProgressBar (from Prompt: <ProgressBar labelPosition="right" value={item.licenseUse} />) */
.table-progress-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 140px !important;
}
.table-progress-track {
  flex: 1 !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: #eaecf0 !important;
  overflow: hidden !important;
}
.table-progress-bar {
  height: 100% !important;
  border-radius: 9999px !important;
  transition: width .3s ease !important;
}
.progress-success {
  background: #12b76a !important;
}
.progress-warning {
  background: #f79009 !important;
}
.progress-danger {
  background: #f04438 !important;
}
.progress-default {
  background: #704fe6 !important;
}
.table-progress-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #344054 !important;
  white-space: nowrap !important;
}

/* Action Buttons & DropdownIconSimple */
.cell-actions-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
.btn-table-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.btn-table-action:hover {
  background: #f9fafb !important;
  border-color: #98a2b3 !important;
}
.btn-table-action.followed {
  background: #edfdf2 !important;
  border-color: #a6f4c5 !important;
  color: #027a48 !important;
}
.btn-table-more {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #667085 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.btn-table-more:hover {
  background: #f2f4f7 !important;
  border-color: #eaecf0 !important;
  color: #101828 !important;
}

/* Table Card Footer */
.table-card-footer {
  padding: 14px 24px !important;
  border-top: 1px solid #eaecf0 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: #475467 !important;
}
/* ==========================================================================
   HeroUI Pagination Component (@heroui/react)
   <Pagination className="justify-center">
     <Pagination.Content>
       <Pagination.Item>
         <Pagination.Previous isDisabled={page === 1}>
           <Pagination.PreviousIcon />
           <span>Previous</span>
         </Pagination.Previous>
       </Pagination.Item>
       ...
       <Pagination.Item>
         <Pagination.Next isDisabled={page === totalPages}>
           <span>Next</span>
           <Pagination.NextIcon />
         </Pagination.Next>
       </Pagination.Item>
     </Pagination.Content>
   </Pagination>
   ========================================================================== */
.heroui-pagination {
  display: inline-flex !important;
  align-items: center !important;
  user-select: none !important;
}
.heroui-pagination.justify-center {
  justify-content: center !important;
}
.heroui-pagination-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
.heroui-pagination-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Previous & Next Buttons */
.heroui-pagination-prev,
.heroui-pagination-next {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 1px solid #e4e4e7 !important;
  background: #ffffff !important;
  color: #3f3f46 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}
.heroui-pagination-prev:hover:not(:disabled),
.heroui-pagination-next:hover:not(:disabled) {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
  color: #18181b !important;
}
.heroui-pagination-prev:active:not(:disabled),
.heroui-pagination-next:active:not(:disabled) {
  transform: scale(0.97) !important;
}
.heroui-pagination-prev:disabled,
.heroui-pagination-next:disabled {
  opacity: 0.4 !important;
  background: #fafafa !important;
  border-color: #eeeeee !important;
  color: #a1a1aa !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Numbered Page Links */
.heroui-pagination-link {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #52525b !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}
.heroui-pagination-link:hover:not(.is-active) {
  background: #f4f4f5 !important;
  color: #18181b !important;
}
.heroui-pagination-link:active:not(.is-active) {
  transform: scale(0.96) !important;
}
.heroui-pagination-link.is-active {
  background: #006fee !important;
  border-color: #006fee !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 111, 238, 0.32) !important;
}

/* Icons */
.heroui-pagination-prev-icon,
.heroui-pagination-next-icon {
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.table-footer-pagination {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.btn-pagination {
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #344054 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.btn-pagination:hover:not(:disabled) {
  background: #f9fafb !important;
  border-color: #98a2b3 !important;
}
.btn-pagination:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Modal compare table update */
dialog .tablewrap table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  width: 100% !important;
}
dialog .tablewrap th {
  background: #f9fafb !important;
  color: #475467 !important;
  font-size: 12.5px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #eaecf0 !important;
  border-top: none !important;
}
dialog .tablewrap td {
  padding: 12px 18px !important;
  border-bottom: 1px solid #f2f4f7 !important;
  border-top: none !important;
  font-size: 13.5px !important;
}

body.medbase-app .sidebar .brand {
  margin-bottom: 20px !important;
}

/* ========================================================
   LINE SIDEBAR SYSTEM (React Bits Proximity Interaction)
   ======================================================== */

.sidebar .nav {
  --accent-color: #246951;
  --text-color: #1f342d;
  --text-muted: #64756e;
  --marker-color: #d1d9cf;
  --marker-length: 16px;
  --marker-gap: 8px;
  --tick-scale: 0.45;
  --max-shift: 4px;
  --item-gap: 4px;
  --smoothing: 100ms;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  padding: 4px 0;
}

@media (min-width: 621px) {
  body.medbase-app .sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: 100dvh !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 24px 14px 18px !important;
    z-index: 10 !important;
    background: #fafbfc !important;
    border-right: 1px solid #eaecf0 !important;
  }

  body.medbase-app .app {
    margin-left: 240px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .sidebar .nav {
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sidebar .nav button.line-sidebar__item {
    position: relative !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: background-color 0.2s ease !important;
  }

  .sidebar .nav button.line-sidebar__item:hover {
    background: rgba(0, 0, 0, 0.035) !important;
    --effect: 1;
  }

  .sidebar .nav button.line-sidebar__item.active {
    background: #edf5f0 !important;
    color: #246951 !important;
  }

  /* Leading Marker Line & Ticks (Removed as requested) */
  .line-sidebar__marker {
    display: none !important;
  }
  .sidebar .nav button.line-sidebar__item::before,
  .sidebar .nav button.line-sidebar__item:not(:last-child)::after {
    display: none !important;
  }

  /* Content with Proximity Shift */
  .line-sidebar__content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: translateX(calc(var(--effect, 0) * var(--max-shift))) !important;
    color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--text-color)) !important;
    font-weight: 400 !important;
    will-change: transform, color !important;
  }

  /* 3D Spot Icon subtle scale on hover proximity */
  .line-sidebar__content .nav-spot-icon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    flex-shrink: 0 !important;
    transform: scale(calc(1 + var(--effect, 0) * 0.12)) !important;
    transition: transform 0.15s ease-out !important;
  }
  .line-sidebar__content .nav-spot-icon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  .line-sidebar__text {
    font-size: 14.3px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .sidebar .nav button.line-sidebar__item .count {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .sidebar .nav button.line-sidebar__item .nav-ext-arrow,
  .sidebar .nav button.line-sidebar__item span[style*="margin-left:auto"],
  .sidebar .nav button.line-sidebar__item span[style*="margin-left: auto"] {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    font-size: 11px !important;
    opacity: 0.65 !important;
    display: inline-block !important;
  }

  /* Bottom section safeguarding */
  body.medbase-app .sidebar .sidebar-bottom {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.medbase-app .sidebar .country,
  body.medbase-app .sidebar .profile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }
  body.medbase-app .sidebar .profile-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }
  body.medbase-app .sidebar .profile-info div,
  body.medbase-app .sidebar .profile-info small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Override old border indicator */
  body.medbase-app .nav button.active::before {
    display: none !important;
  }
}

/* Pure White Dashboard Layout */
body.medbase-app {
  background-color: #ffffff !important;
  background-image: none !important;
}
body.medbase-app .topbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #eaecf0 !important;
  backdrop-filter: blur(16px) !important;
}
body.medbase-app .sidebar {
  background: #fafbfc !important;
  border-right: 1px solid #eaecf0 !important;
}

/* ==========================================================================
   HeroUI Select & ListBox Component (@heroui/react)
   <Select className="w-[256px]" placeholder="Select one">
     <Label>State</Label>
     <Select.Trigger>
       <Select.Value />
       <Select.Indicator />
     </Select.Trigger>
     <Select.Popover>
       <ListBox>
         <ListBox.Item id="..." textValue="...">
           ...
           <ListBox.ItemIndicator />
         </ListBox.Item>
       </ListBox>
     </Select.Popover>
   </Select>
   ========================================================================== */
/* ==========================================================================
   Header & Topbar Stacking Context
   Ensures dropdowns, popovers, and menus float strictly ABOVE content
   ========================================================================== */
header.topbar,
.topbar,
body.medbase-app .topbar {
  position: relative !important;
  z-index: 9999 !important;
}

.topright,
.top-actions {
  position: relative !important;
  z-index: 10000 !important;
}

.heroui-select {
  position: relative !important;
  display: inline-block !important;
  user-select: none !important;
  z-index: 10001 !important;
}
.heroui-select.is-open {
  z-index: 10005 !important;
}
.heroui-select-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 12px 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  color: #18181b !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.heroui-select-trigger:hover {
  background: #fafafa !important;
  border-color: #d4d4d8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
.heroui-select-trigger[aria-expanded="true"] {
  border-color: #006fee !important;
  box-shadow: 0 0 0 3px rgba(0, 111, 238, 0.15) !important;
}
.heroui-select-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  color: #18181b !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.heroui-select-indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #71717a !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-left: 2px !important;
}
.heroui-select-trigger[aria-expanded="true"] .heroui-select-indicator {
  transform: rotate(180deg) !important;
}

/* Country Flag */
.heroui-country-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
}
.heroui-country-flag svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
}

/* Popover & ListBox */
.heroui-select-popover {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 210px !important;
  max-height: 340px !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  padding: 6px !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) scale(0.98) !important;
  transform-origin: top right !important;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s !important;
  pointer-events: none !important;
}
.heroui-select-popover.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.heroui-select-popover-header {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #71717a !important;
  padding: 6px 10px 4px 10px !important;
  border-bottom: 1px solid #f4f4f5 !important;
  margin-bottom: 4px !important;
}
.heroui-listbox {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.heroui-listbox-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #27272a !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  user-select: none !important;
}
.heroui-listbox-item:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}
.heroui-listbox-item.is-selected {
  background: #eff6ff !important;
  color: #006fee !important;
  font-weight: 600 !important;
}
.heroui-listbox-item-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.heroui-listbox-item-text {
  font-size: 13px !important;
}
.heroui-listbox-item-indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  color: #006fee !important;
  opacity: 0 !important;
  transform: scale(0.8) !important;
  transition: opacity 0.12s ease, transform 0.12s ease !important;
}
.heroui-listbox-item.is-selected .heroui-listbox-item-indicator {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Mobile catalogue cards must not inherit desktop table-cell padding. */
@media (max-width: 620px) {
  body.medbase-app .modern-table.catalog-table .catalog-row > td {
    padding: 0 !important;
    border: 0 !important;
  }

  /* Standalone medicine cards instead of a table nested in one large card. */
  body.medbase-app .table-card-root {
    overflow: visible !important;
    margin-bottom: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.medbase-app .table-card-header {
    gap: 12px !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border: 1px solid #dfc7e3 !important;
    border-radius: 14px !important;
    background: #f1ddf4 !important;
  }
  body.medbase-app .table-card-header-main,
  body.medbase-app .table-card-header-trailing {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.medbase-app .table-card-header-trailing {
    gap: 8px !important;
  }
  body.medbase-app .table-search-box,
  body.medbase-app .table-search-box:focus-within {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 10px !important;
    flex: 1 1 auto !important;
  }
  body.medbase-app .table-dropdown-trigger {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
  body.medbase-app .table-scroll-container,
  body.medbase-app .modern-table.catalog-table {
    overflow: visible !important;
    background: transparent !important;
  }

  /* Pagination gets its own full-width row, so localized labels do not clip. */
  body.medbase-app .table-card-footer {
    width: 100% !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.medbase-app .table-footer-meta {
    text-align: center !important;
    font-size: 11px !important;
  }
  body.medbase-app .table-footer-pagination,
  body.medbase-app .heroui-pagination,
  body.medbase-app .heroui-pagination-content {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  body.medbase-app .heroui-pagination-content {
    gap: 2px !important;
    flex-wrap: nowrap !important;
  }
  body.medbase-app .heroui-pagination-prev,
  body.medbase-app .heroui-pagination-next {
    height: 36px !important;
    gap: 3px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  body.medbase-app .heroui-pagination-link {
    width: 32px !important;
    min-width: 32px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  /* Bottom bar: eight destinations in a 4x2 grid. */
  body.medbase-app .sidebar {
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eaecf0 !important;
    overflow: hidden !important;
  }
  body.medbase-app .sidebar > .brand {
    display: flex !important;
    align-items: center !important;
    font-size: 20px !important;
    padding: 0 2px !important;
  }
  body.medbase-app .sidebar > .brand .brandmark {
    height: 26px !important;
    width: 20px !important;
  }
  /* Eight destinations, visible together: four columns over two compact rows.
     Scoped to the primary nav only — the secondary nav (Surse, Research)
     stays hidden on mobile; an earlier version leaked it into row 2. */
  body.medbase-app .sidebar nav.nav.secondary {
    display: none !important;
  }
  body.medbase-app .sidebar nav.nav:not(.secondary) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    height: 64px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }
  body.medbase-app .sidebar nav.nav:not(.secondary)::-webkit-scrollbar {
    display: none !important;
  }
  body.medbase-app .sidebar .nav button.line-sidebar__item {
    width: auto !important;
    min-width: 62px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
  }
  body.medbase-app .sidebar .nav button.line-sidebar__item .line-sidebar__content {
    gap: 1px !important;
  }
  body.medbase-app .sidebar .nav button.line-sidebar__item .nav-spot-icon,
  body.medbase-app .sidebar .nav button.line-sidebar__item .nav-spot-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body.medbase-app .sidebar .nav button.line-sidebar__item .line-sidebar__text {
    max-width: 100% !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    text-overflow: clip !important;
  }
  body.medbase-app .app {
    padding-top: calc(124px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 360px) {
  body.medbase-app .heroui-pagination-prev span,
  body.medbase-app .heroui-pagination-next span {
    display: none !important;
  }
  body.medbase-app .heroui-pagination-prev,
  body.medbase-app .heroui-pagination-next {
    width: 36px !important;
    padding: 0 !important;
  }
  body.medbase-app .search-kbd {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile Safari lateral pan lock — page must never slide left/right.
   overflow-x:clip keeps position:sticky working (unlike hidden); the plain
   hidden declaration above it is the fallback for older Safari (<16).
   Inner scrollers (catalogue table, bottom nav) keep their own swipe via
   overscroll-behavior-x:contain so the gesture doesn't chain to the page.
   ========================================================================== */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-x: clip !important;
  overscroll-behavior-x: none !important;
}
body.medbase-app .app,
body.medbase-app .content,
.home,
.hero,
.hero-copy,
.story-stage,
.precision-section,
.operations-section,
.medbase-footer {
  min-width: 0 !important;
}
img {
  max-width: 100% !important;
}
.table-scroll-container,
.sidebar .nav {
  max-width: 100% !important;
  overscroll-behavior-x: contain !important;
}
/* Landing experience dropdown: was offset -56px past the viewport edge. */
@media (max-width: 620px) {
  .experience-menu {
    right: 0 !important;
  }
  /* Interactions page forces 2 columns via inline style — stack on mobile
     so the checker and scenarios cards get full width. */
  body.medbase-app .hero-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Dense overview hierarchy: search owns the opening column; regional status
   and sponsored inventory stay useful without inheriting its full height. */
@media (min-width: 861px) {
  body.medbase-app .hero-grid.has-ads {
    grid-template-columns: 1.55fr 0.88fr 0.65fr !important;
    align-items: start !important;
    gap: 14px !important;
  }
  body.medbase-app .hero-grid.has-ads > .hero {
    padding: 18px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero h2 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  body.medbase-app .hero-grid.has-ads .searchbox {
    height: 50px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats {
    margin-top: 12px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat {
    min-height: 48px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat-spot {
    width: 24px !important;
    height: 24px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat > div {
    display: grid !important;
    grid-template-columns: minmax(48px, max-content) minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat strong {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    font-size: 17px !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .metriclabel,
  body.medbase-app .hero-grid.has-ads .hero-stats .stat small {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .metriclabel {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  body.medbase-app .hero-grid.has-ads .hero-stats .stat small {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard) {
    min-height: 0 !important;
    padding: 18px !important;
  }
  body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard) .pulse-copy {
    max-width: 100% !important;
  }
  body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard) .pulse-spot {
    width: 88px !important;
    height: 88px !important;
    right: -4px !important;
    bottom: -8px !important;
  }
  body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard) h2 {
    font-size: 19px !important;
    line-height: 1.08 !important;
  }
  body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard) p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard) .btn {
    margin-top: 12px !important;
  }

  body.medbase-app .hero-grid.has-ads > .adcard {
    min-height: 0 !important;
    padding: 16px !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard .pulse-copy {
    max-width: none !important;
    width: 100% !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard h2 {
    font-size: 18px !important;
    line-height: 1.08 !important;
    margin: 6px 0 !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard .adslot {
    min-height: 94px !important;
    margin: 9px 0 !important;
    padding: 11px !important;
    justify-content: flex-start !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard .adslot-tag {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-end !important;
    margin: 0 0 5px !important;
    order: -1 !important;
    flex: 0 0 auto !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard .adslot strong {
    font-size: 12px !important;
    max-width: 100% !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard .adslot small {
    font-size: 9px !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard .adslot-cta {
    margin-top: 4px !important;
    padding: 4px 9px !important;
    font-size: 9px !important;
  }
  body.medbase-app .hero-grid.has-ads > .adcard > .pulse-copy > .btn {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
  }
}

@media (min-width: 851px) and (max-width: 1120px) {
  body.medbase-app .hero-grid.has-ads {
    grid-template-columns: 1fr !important;
  }
}

/* Keep the compact overview cards as one composed surface, rather than square panels. */
body.medbase-app .hero-grid.has-ads > .pulsecard:not(.adcard),
body.medbase-app .hero-grid.has-ads > .adcard {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* One table language across the app: every true table heading follows the registry identity bar. */
body.medbase-app table thead,
body.medbase-app table thead tr,
body.medbase-app table thead th {
  background: #f1ddf4 !important;
  color: #2a2430 !important;
  border-bottom-color: #dfc7e3 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .025em !important;
}
body.medbase-app table thead .sort-icon,
body.medbase-app table thead .th-sortable:hover .sort-icon {
  color: #896c92 !important;
}
body.medbase-app table thead th.th-sortable:hover {
  background: #e8cdeb !important;
  color: #2a2430 !important;
}

/* Filter rows are panel headers too: give the availability register the same identity band. */
body.medbase-app .panel > .filters {
  background: #f1ddf4 !important;
  border-bottom-color: #dfc7e3 !important;
}
body.medbase-app .panel > .filters .chip {
  background: transparent !important;
  color: #2a2430 !important;
  border-color: rgba(101, 75, 112, .28) !important;
}
body.medbase-app .panel > .filters .chip:hover {
  background: #e8cdeb !important;
}
body.medbase-app .panel > .filters .chip.active {
  background: #d7b8df !important;
  color: #2a2430 !important;
  border-color: #d7b8df !important;
}

/* App topbar retired: country is locked to the logged-in account (login
   logic to come), so the whole header bar stays out of the DOM flow-wise
   but present for existing JS hooks (#notifications, #crumb, .date). */
body.medbase-app .app > header.topbar {
  display: none !important;
}

/* The desktop theme action lives under the profile. Mobile replaces the
   sidebar with a compact top navigation, so the same persisted appearance
   control needs a visible slot beside the brand. */
body.medbase-app .mobile-sidebar-theme-toggle {
  display: none;
}

@media (max-width: 620px) {
  body.medbase-app .sidebar > .brand {
    min-height: 36px !important;
    padding-right: 46px !important;
  }
  body.medbase-app .mobile-sidebar-theme-toggle {
    display: grid !important;
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    z-index: 2 !important;
  }
}

/* Landing account CTA: desktop keeps the product entry point. On phones the
   avatar and that entry point target the same destination, so expose one clear
   account control and reclaim the duplicated width. */
.open-app-mobile {
  display: none;
}

@media (max-width: 480px) {
  .topbar {
    width: calc(100% - 24px) !important;
    gap: 6px !important;
  }
  .brand {
    gap: 6px !important;
    font-size: 22px !important;
  }
  .brand .brand-mark:has(img) {
    width: 27px !important;
    height: 38px !important;
  }
  .top-actions {
    min-width: 0 !important;
    gap: 5px !important;
  }
  .heroui-select-trigger {
    height: 36px !important;
    padding: 0 7px !important;
    gap: 4px !important;
  }
  .landing-appearance-toggle {
    width: 36px;
    height: 36px;
  }
  #top-auth-link {
    display: none !important;
  }
  .open-app {
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }
  .open-app-desktop,
  .open-app-desktop-icon {
    display: none !important;
  }
  .open-app-mobile {
    display: inline;
  }
}

/* Desktop catalogue: keep every field in view.  The table is deliberately
   fixed to its card instead of inheriting content-sized columns and spawning
   a horizontal scroller.  Long names wrap inside their column. */
@media (min-width: 621px) {
  body.medbase-app .table-scroll-container {
    overflow-x: hidden !important;
  }
  body.medbase-app .modern-table.catalog-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  body.medbase-app .catalog-col-select { width: 4% !important; }
  body.medbase-app .catalog-col-drug { width: 25% !important; }
  body.medbase-app .catalog-col-status { width: 20% !important; }
  body.medbase-app .catalog-col-meta { width: 20% !important; }
  body.medbase-app .catalog-col-progress { width: 17% !important; }
  body.medbase-app .catalog-col-actions { width: 14% !important; }

  body.medbase-app .modern-table.catalog-table th,
  body.medbase-app .modern-table.catalog-table td {
    min-width: 0 !important;
    padding: 11px 10px !important;
  }
  body.medbase-app .modern-table.catalog-table .th-select,
  body.medbase-app .modern-table.catalog-table .td-select {
    padding-left: 10px !important;
    padding-right: 5px !important;
  }
  body.medbase-app .modern-table.catalog-table .th-actions,
  body.medbase-app .modern-table.catalog-table .td-actions {
    padding-right: 10px !important;
  }
  body.medbase-app .modern-table.catalog-table .th-content {
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  body.medbase-app .modern-table.catalog-table .cell-drug-group,
  body.medbase-app .modern-table.catalog-table .cell-meta-group,
  body.medbase-app .modern-table.catalog-table .table-progress-container {
    min-width: 0 !important;
    width: 100% !important;
  }
  body.medbase-app .modern-table.catalog-table .drug-info-text {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  body.medbase-app .modern-table.catalog-table .cell-drug-group {
    gap: 9px !important;
    align-items: flex-start !important;
  }
  body.medbase-app .modern-table.catalog-table .table-drug-title,
  body.medbase-app .modern-table.catalog-table .table-drug-sub,
  body.medbase-app .modern-table.catalog-table .table-meta-title {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  body.medbase-app .modern-table.catalog-table .badge-dot {
    max-width: 100% !important;
    white-space: normal !important;
  }
  body.medbase-app .modern-table.catalog-table .cell-actions-group {
    gap: 4px !important;
  }
  body.medbase-app .modern-table.catalog-table .btn-table-action {
    gap: 4px !important;
    padding: 6px 8px !important;
    font-size: 11.5px !important;
  }
  body.medbase-app .modern-table.catalog-table .btn-table-more {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }
}

/* ==========================================================================
   Device-differentiated updates — hooks set by device.js on <html>.
   html[data-device="phone" | "tablet" | "desktop"], html[data-touch="1"].
   Put per-device overrides here (not scattered media queries) so future
   updates targeting phone / tablet / desktop stay in one place.
   JS branching: if (MedBaseDevice.kind === 'phone') { … }.
   ========================================================================== */

/* ==========================================================================
   Accessibility pass (better-interface review, sep 2026)
   ========================================================================== */

/* The search capsule removed every focus cue; the border and a soft ring
   come back while the field holds focus, in both themes. */
html[data-medbase-appearance] body.medbase-app .searchbox:focus-within {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 35%, transparent) !important;
}

/* The rotating beam only runs for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  body.medbase-app .searchbox button[type="submit"]::before {
    animation: beam-spin 3s linear infinite !important;
  }
}

/* Sortable column headings are real buttons: reset them to look like the heading. */
.modern-table th.th-sortable .th-content {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}

@media (max-width: 620px) {
  /* Lista mea: the status badge drops under the name so the remove button
     always stays inside the row, down to 320px. */
  body.medbase-app .watchrow {
    flex-wrap: wrap !important;
  }
  body.medbase-app .watchrow .info {
    flex: 1 1 150px !important;
    min-width: 0 !important;
  }
  body.medbase-app .watchrow .badge-dot {
    order: 3;
    margin-left: 50px !important;
  }

  /* The module bar scrolls sideways: fade the edge that has more items behind it. */
  body.medbase-app .sidebar nav.nav:not(.secondary).nav-more-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  body.medbase-app .sidebar nav.nav:not(.secondary).nav-more-start {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
  }
  body.medbase-app .sidebar nav.nav:not(.secondary).nav-more-start.nav-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  }
}

/* Keyboard focus for the HeroUI pagination and select, which drop the outline. */
body.medbase-app :is(.heroui-pagination-link, .heroui-pagination-prev, .heroui-pagination-next, .heroui-select-trigger):focus-visible {
  outline: 3px solid var(--theme-accent) !important;
  outline-offset: 2px !important;
}

/* Page headings receive focus after navigation; only keyboard users see it. */
body.medbase-app #content h1[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Type floor: running and meta text 12px, uppercase labels and tags 11px. */
body.medbase-app :is(.footer, .source-note, .searchhint, .searchhint button, .metriclabel, .hero-stats .stat small,
  .watchrow .info small, .alerttext p, .pulsecard p, .comparebar span, .panel > .filters label, .table-drug-sub,
  .profile-info small, .heroui-pagination-prev span, .heroui-pagination-next span, .btn, .chip) {
  font-size: 12px !important;
}
body.medbase-app :is(.eyebrow, .pill, .badge-dot-text, .toolcard-badge, .nav .count) {
  font-size: 11px !important;
}

/* Dark hero: its violet panel, padded and rounded like its neighbours. */
html[data-medbase-appearance="dark"] body.medbase-app .hero {
  padding: 28px !important;
  border-radius: 20px !important;
}

@media (max-width: 850px) {
  /* Stacked overview cards need space between them. */
  body.medbase-app .hero-grid.has-ads {
    gap: 14px !important;
  }
}
@media (max-width: 620px) {
  body.medbase-app .sidebar .nav button.line-sidebar__item .line-sidebar__text {
    font-size: 11px !important;
  }
}

/* ==========================================================================
   Medicamente table: brand colours, readable in dark, no pills.
   Drawn on the theme tokens (--theme-*), so light and dark both follow; the earlier rules hard-code
   light greys (#101828 on the dark surface was all but invisible). html + body.medbase-app outranks
   anti-slop.css (black header, lime count).
   ========================================================================== */
html body.medbase-app .table-card-header {
  background: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
}
html body.medbase-app .table-card-header :is(h2, .table-card-title) { color: var(--theme-deep) !important; }
html body.medbase-app .table-card-header .table-card-desc { color: var(--theme-muted) !important; }
html body.medbase-app .table-card-header .badge-count {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--theme-muted) !important;
  font-weight: 700 !important;
}
html body.medbase-app .modern-table.catalog-table thead,
html body.medbase-app .modern-table.catalog-table thead th {
  background: transparent !important;
  color: var(--theme-muted) !important;
  border-color: var(--theme-line) !important;
}
html body.medbase-app .modern-table.catalog-table .th-content { color: var(--theme-muted) !important; }
html body.medbase-app .modern-table.catalog-table .catalog-row,
html body.medbase-app .modern-table.catalog-table .catalog-row > td {
  background: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
}
html body.medbase-app .table-drug-title { color: var(--theme-deep) !important; }
html body.medbase-app .table-drug-title:hover { color: var(--theme-accent) !important; }
html body.medbase-app .table-drug-sub,
html body.medbase-app .table-meta-sub { color: var(--theme-muted) !important; }
html body.medbase-app .table-meta-title { color: var(--theme-deep) !important; }
html body.medbase-app .table-atc-pill {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--theme-muted) !important;
}
/* The pill icon box and the status pill: the icon and a dot with text are enough. */
html body.medbase-app .modern-table.catalog-table .drug-avatar { background: transparent !important; border: 0 !important; }
html body.medbase-app .modern-table.catalog-table .badge-dot {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.medbase-app .btn-table-action {
  background: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
  color: var(--theme-deep) !important;
}
html body.medbase-app .btn-table-action:hover { border-color: var(--theme-accent) !important; }
html body.medbase-app .btn-table-action.followed {
  background: var(--theme-accent-soft) !important;
  border-color: transparent !important;
  color: var(--theme-deep) !important;
}
html body.medbase-app .btn-table-more { color: var(--theme-muted) !important; }
html body.medbase-app .ui-checkbox { accent-color: var(--theme-accent) !important; }
html body.medbase-app .heroui-pagination-link.is-active {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-base, #fff) !important;
  box-shadow: none !important;
}
html[data-medbase-appearance="light"] body.medbase-app .heroui-pagination-link.is-active,
html:not([data-medbase-appearance]) body.medbase-app .heroui-pagination-link.is-active { color: #ffffff !important; }
html body.medbase-app .modern-table.catalog-table thead tr,
html body.medbase-app .modern-table.catalog-table thead th.th-sortable:hover { background: transparent !important; color: var(--theme-deep) !important; }
html body.medbase-app .modern-table.catalog-table thead .sort-icon { color: var(--theme-muted) !important; }
/* Status text: the light tones are too dark on the dark surface. */
html[data-medbase-appearance="dark"] body.medbase-app .badge-dot-warning { color: #ffc46b !important; }
html[data-medbase-appearance="dark"] body.medbase-app .badge-dot-danger { color: #ff9fb1 !important; }
html[data-medbase-appearance="dark"] body.medbase-app .badge-dot-success { color: #8ff0c0 !important; }
html[data-medbase-appearance="dark"] body.medbase-app .badge-dot :is(.badge-dot-text) { color: inherit !important; }
/* Sidebar counts: white on the brand violet (#9567bf was 4.2:1). */
html body.medbase-app .sidebar .nav .count { background: #8656b3 !important; }

/* ==========================================================================
   Logo: "MedBase" over a heartbeat (same as app-next). The line loops: draws, holds, runs out, rests.
   ========================================================================== */
:root { --theme-pulse: #e5383b; }
html[data-medbase-appearance="dark"] { --theme-pulse: #ff6f91; }
.logo-word { position: relative; display: inline-block; line-height: 1; padding-bottom: 0.18em; font-family: Outfit, Karla, ui-sans-serif, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.045em !important; text-transform: none !important; }
.logo-ecg { position: absolute; left: 0; top: 100%; width: 100%; height: 0.42em; margin-top: -0.14em; overflow: visible; pointer-events: none; }
.logo-ecg path {
  fill: none;
  stroke: var(--theme-pulse);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--theme-pulse) 45%, transparent));
  animation: theme-ecg-loop 3.6s 0.25s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}
@keyframes theme-ecg-loop { 0% { stroke-dashoffset: 1; } 40%, 62% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) { .logo-ecg path { animation: none; stroke-dashoffset: 0; } }

/* ==========================================================================
   No pills behind text: statuses are a dot and coloured text, "Urmărește" is text with its icon.
   ========================================================================== */
html body.medbase-app .badge-dot {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.medbase-app .btn-table-action,
html body.medbase-app .btn-table-action.followed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  color: var(--theme-deep) !important;
}
html body.medbase-app .btn-table-action:hover { color: var(--theme-accent) !important; background: transparent !important; }
html body.medbase-app .btn-table-action.followed { color: var(--theme-accent) !important; }
/* Availability list meta (date, status): readable size and the theme's muted tone (was #929b92 at 9px). */
html body.medbase-app .alertmeta { color: var(--theme-muted) !important; font-size: 12px !important; }
/* The wordmark takes the text colour of the theme everywhere (the mobile header had the old green). */
html body .brand .logo-word { color: var(--theme-deep) !important; }

/* Marble avatar (theme.js): smaller, with a hairline ring so the pastels hold on light surfaces.
   The sidebar one was 64px, the top bar 38px. */
.heroui-avatar.heroui-avatar-marble { box-shadow: 0 0 0 1px rgba(24, 24, 23, 0.08) !important; }
html[data-medbase-appearance="dark"] .heroui-avatar.heroui-avatar-marble { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important; }
.heroui-avatar-marble > svg { width: 100%; height: 100%; }
@media (min-width: 621px) {
  html body.medbase-app .sidebar #user-avatar-widget { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
}
.heroui-avatar-topbar, .user-top-profile .heroui-avatar { width: 34px !important; height: 34px !important; }