/* ICM Mini App — light clinical theme, RTL
   Palette is drawn from the subject: nitrogen vapour, incubator glass,
   evergreen ink. One loud element on the page: the tank fill bars. */

/* v1060: the Persian font is now Shabnam. The family name stays 'Vazirmatn' so every rule that uses it follows. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Shabnam-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Shabnam-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Shabnam-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper:  #FFFFFF;
  --mist:   #F4F7F6;
  --ink:    #14312C;
  --muted:  #647A75;
  --line:   #DDE7E4;
  --accent: #0E7C6B;
  --tint:   #E3F1EE;
  --caution:#B06A00;
  --caution-bg:#FBF0DE;
  --alert:  #A8322A;
  --alert-bg:#FBEAE8;

  --r-tile: 20px;
  --r-card: 26px;
  --tabbar: 80px;

  --pad: 16px;

  /* Glass. Boxes are translucent and blur whatever sits behind them —
     which is why the page background matters: with a plain colour behind
     it there is nothing to see through, so the fallback below keeps a
     readable surface either way. */
  --glass-bg:   rgba(255, 255, 255, .42);
  --glass-line: rgba(255, 255, 255, .55);
  --glass-blur: 26px;
  --glass-shadow: 0 8px 26px rgba(20, 49, 44, .19);   /* v1017: a shade darker */

  /* What makes a panel read as *glass* rather than as tinted plastic is
     the edge, not the blur: light catches the top lip brightly, wraps
     down the sides faintly, and the bottom lip picks up a dark line where
     the pane's thickness shows. These four insets fake that thickness. */
  --glass-edge:
    inset 0  1px 0 rgba(255, 255, 255, .80),
    inset 1px 0 0 rgba(255, 255, 255, .34),
    inset -1px 0 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(20, 49, 44, .10);
}

/* Safari/older webviews without backdrop-filter get a near-opaque panel
   instead of an unreadable transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, .86); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* The user's own picture, painted once behind everything and held still
   while the page scrolls. It sits on a fixed layer rather than on body's
   own background because a scrolling background under blurred panels
   shears badly on mobile. The veil on top keeps dark photos from eating
   the text. */
#bg-layer {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#bg-layer::after {
  content: ''; position: absolute; inset: 0;
  /* No veil: the picture shows exactly as uploaded. Readability is
     carried by the panels themselves, which are opaque enough on their
     own — washing the whole photo out to protect text that already sits
     on glass was costing clarity for nothing. */
  background: transparent;
}
body.has-bg { background: transparent; }

/* Bottom bar clearance — without this the last block hides under the tabs. */
body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px); }
body.no-tabs { padding-bottom: 28px; }

.hidden { display: none !important; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- Boot / fatal ---------- */
.boot, .fatal {
  min-height: 70vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 32px;
  text-align: center;
}
.boot-mark {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--tint); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-text, .fatal-msg { color: var(--muted); margin: 0; }
.fatal-title { font-size: 20px; margin: 0; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.clinic {
  font-weight: 700; font-size: 16px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.whoami {
  font-size: 13px; color: var(--muted); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip {
  flex: 0 0 auto;
  background: var(--tint); color: var(--accent);
  font-size: 12.5px; font-weight: 500;
  padding: 4px 11px; border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Views ---------- */
.view { padding: var(--pad); }
.view-title { font-size: 18px; margin: 2px 0 14px; }

/* ---------- Hero ----------
   The watercolour sits behind the plate; the gradient keeps the left side
   opaque enough for the clinic name to stay readable at any image
   brightness. The name is always left-aligned — each clinic sees its own
   name in the same place, whichever language the user is in. */
.hero {
  position: relative;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 14px;
  background: rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68),
              inset 0 -1px 0 rgba(20,49,44,.06),
              0 3px 14px rgba(20,49,44,.10);
}
.hero-plate {
  position: relative;
  padding: 26px 20px 22px;
  direction: ltr;
  text-align: left;
  background: rgba(255,255,255,.10);
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}
.hero-name {
  margin: 0;
  font-size: 29px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.3px;
  max-width: 11em;
  overflow-wrap: anywhere;
}
.hero-tagline {
  margin: 10px 0 0;
  font-size: 13.5px; font-weight: 500; color: var(--accent);
  line-height: 1.5;
}
.hero-tagline-2 {
  margin-top: 1px;
  font-weight: 400; color: var(--muted);
}

/* ---------- Today ---------- */
.today {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-bottom: 18px;
  /* The rubber-band stretch moves #today-list itself with a transform;
     without this, that visible movement could slide past this card's
     own rounded corners into whatever sits beneath it. */
  overflow: hidden;
}
.today-date {
  margin: 0;
  font-size: 19px; font-weight: 700; letter-spacing: -.2px;
  line-height: 1.4;
  /* Explicitly above #today-list: that element gets a CSS transform
     during the rubber-band drag, which promotes it to its own layer --
     without this, that layer could paint over this text even though it
     sits later in the document and inside the same card. */
  position: relative;
  z-index: 2;
}
.today-line {
  margin: 2px 0 0; color: var(--muted); font-size: 14px;
  position: relative;
  z-index: 2;
}
.today-list { list-style: none; margin: 14px 0 0; padding: 0; }
.today-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.today-list li:first-child { border-top: 0; padding-top: 4px; }
.t-name { font-weight: 500; min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-state { color: var(--muted); font-size: 13px; flex: 0 0 auto; }

/* ---------- Blocks ---------- */
.block { margin-bottom: 22px; }
.block-title {
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  margin: 0 0 9px; padding: 0 2px;
}

/* ---------- Tanks: the one loud element ---------- */
.tanks { display: flex; flex-direction: column; gap: 12px; }
.tank {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 13px 14px;
}
.tank-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px;
}
.tank-name {
  font-weight: 500; min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tank-pct { font-weight: 700; font-size: 17px; flex: 0 0 auto; }
.tank-pct.is-caution { color: var(--caution); }
.tank-pct.is-alert   { color: var(--alert); }
.tank-bar {
  position: relative;
  height: 12px; border-radius: 999px;
  background: var(--mist);
  overflow: hidden;
}
.tank-fill {
  height: 100%; border-radius: 999px;
  background: var(--accent);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.tank-fill.is-caution { background: var(--caution); }
.tank-fill.is-alert   { background: var(--alert); }
/* threshold notches at 75% and 90% */
.tank-bar::before, .tank-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 1.5px; background: rgba(20,49,44,.22);
}
.tank-bar::before { right: 75%; }
.tank-bar::after  { right: 90%; }
.tank-meta { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Menu tiles ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tile {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;                  /* long labels must not blow the box */
  text-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 12px 12px;
  min-height: 62px;
  transition: background .15s, border-color .15s;
}
.tile:active { background: var(--tint); border-color: var(--accent); }
.tile-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 13px;
  background: var(--tint);
  display: grid; place-items: center;
  font-size: 17px; line-height: 1;
}
.tile-label {
  min-width: 0;                  /* the actual fix for overflowing text */
  font-size: 14.5px; font-weight: 500; line-height: 1.4;
  overflow-wrap: anywhere;
}
.tile.is-wide { grid-column: 1 / -1; }

/* ---------- Rows (search results, meds, schedule) ---------- */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 12px 14px;
  text-align: start;
  width: 100%;
  min-width: 0;
}
.row-main { min-width: 0; flex: 1; }
.row-title {
  font-weight: 500; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub { font-size: 13px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tail { flex: 0 0 auto; font-size: 13px; color: var(--muted); }

/* v295 — Gynecologists panel: give the whole section a larger glass box so
   the heading and all doctor names are contained inside the same panel. */
#view-settings #doctors-block {
  margin-top: 16px;
  padding: 14px;
  min-height: 190px;
  /* v295: match the clear Patient-style glass — the background must remain
     visibly readable through the panel rather than being blurred by it. */
  background: rgba(255, 255, 255, .38);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}
#view-settings #doctors-block .block-title {
  margin: 0 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#view-settings #doctors-block .rows {
  gap: 8px;
}

/* ---------- Search ---------- */
.searchbar { margin-bottom: 14px; }
input[type="search"], input[type="text"], input[type="tel"] {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
}
input::placeholder { color: #9BAEA9; }
input:focus { border-color: var(--accent); }

/* ---------- Empty state ---------- */
.empty {
  padding: 26px 18px; text-align: center;
  color: var(--muted); font-size: 14px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-tile);
}

/* ---------- Settings facts ---------- */
.facts {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.fact {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-top: 1px solid var(--line);
}
.fact:first-child { border-top: 0; }
.fact-k { color: var(--muted); font-size: 14px; flex: 0 0 auto; }
.fact-v { min-width: 0; flex: 1; text-align: end; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.note { color: var(--muted); font-size: 13px; margin: 12px 2px 0; }
.error {
  color: var(--alert); background: var(--alert-bg);
  border-radius: 14px; padding: 10px 12px;
  font-size: 14px; margin: 0 0 12px;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 16px;
  padding: 13px 18px;
  font-weight: 500;
  background: var(--paper);
  border: 1px solid var(--line);
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:disabled { opacity: .55; }
.btn-quiet { color: var(--muted); }
.btn-wide { display: block; width: 100%; margin-top: 12px; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  direction: ltr;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 9px;
  min-width: 0;
  font-size: 11px; color: var(--muted);
}
.tab-ico { font-size: 18px; line-height: 1.15; }
.tab.is-on { color: var(--accent); font-weight: 500; }

/* ---------- Patient portal ---------- */
.p-view { padding: 26px var(--pad) 34px; }
.p-hero { margin-bottom: 24px; }
.p-greet { margin: 0; color: var(--muted); font-size: 14px; }
.p-title { margin: 0; font-size: 27px; font-weight: 700; line-height: 1.35; }
.p-sub { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; max-width: 34em; }

.field { margin-bottom: 14px; }
.label { display: block; font-size: 14px; margin-bottom: 6px; }

.status-card {
  background: var(--accent); color: #fff;
  border-radius: var(--r-card);
  padding: 18px;
  margin-bottom: 22px;
}
.status-k { margin: 0; font-size: 13px; opacity: .85; }
.status-v { margin: 4px 0 0; font-size: 21px; font-weight: 700; line-height: 1.4; }
.status-date { margin: 6px 0 0; font-size: 12.5px; opacity: .8; }

/* ---------- Sheet ---------- */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  pointer-events: auto; touch-action: none; overscroll-behavior: none;
  isolation: isolate;
}
/* v334 — overlays leave slowly and smoothly instead of disappearing abruptly.
   The sheet stays mounted during the exit so the page underneath never moves. */
.sheet-wrap.is-closing {
  pointer-events: none;
  transition: opacity .38s cubic-bezier(.22,.61,.36,1);
  opacity: 0;
}
.sheet-wrap.is-closing .sheet {
  animation: none;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .38s cubic-bezier(.22,.61,.36,1);
  transform: translateY(18px);
  opacity: .98;
}
.sheet-wrap.is-closing .sheet-scrim {
  transition: opacity .38s cubic-bezier(.22,.61,.36,1);
  opacity: 0;
}
.sheet-scrim {
  position: absolute; inset: 0; background: rgba(20,49,44,.4);
  pointer-events: auto; touch-action: none;
}
.sheet {
  position: relative; width: 100%;
  pointer-events: auto; touch-action: pan-y; overscroll-behavior: contain;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 10px var(--pad) calc(22px + env(safe-area-inset-bottom, 0px));
  animation: rise .44s cubic-bezier(.25, .8, .3, 1);
  max-height: 82vh; overflow-y: auto;
}
@keyframes rise { from { transform: translateY(100%); opacity: 0; } }
.sheet-grip {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--line); margin: 2px auto 14px;
}
/* v520 — sheet follows the finger only while using the curtain-dismiss gesture. */
.sheet.is-dragging {
  transition: none !important;
  animation: none !important;
  will-change: transform;
}
.sheet-title { margin: 0 0 8px; font-size: 18px; }
.sheet-body { color: var(--muted); font-size: 14.5px; margin-bottom: 6px; }
.sheet-actions { display: flex; flex-direction: column; }

/* ---------- Modal interaction lock ----------
   The sheet is a fixed interaction layer. While it is visible, prevent the
   document underneath from scrolling; the sheet itself remains scrollable.
   :has() is supported by current Android WebViews, while the fixed scrim and
   touch-action rules above provide the interaction barrier itself. */
html:has(.sheet-wrap:not(.hidden)),
body:has(.sheet-wrap:not(.hidden)) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Menu icons ----------
   Line glyphs from assets/icons.svg, tinted by currentColor so the chip
   colour rule reaches inside the SVG. */
.tile-ico svg { width: 20px; height: 20px; color: var(--accent); display: block; }

/* ---------- View head with a back link ---------- */
.view-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.view-head .view-title { margin: 0; }
/* ---------- Tank summary strip ---------- */
.summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 18px;
}
.sum-cell {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-tile); padding: 13px 10px; text-align: center;
}
.sum-v { font-size: 22px; font-weight: 700; line-height: 1.25; }
.sum-v.is-caution { color: var(--caution); }
.sum-v.is-alert { color: var(--alert); }
.sum-k { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Role chip as a button ---------- */
.chip[disabled] { opacity: 1; }
button.chip { display: inline-flex; align-items: center; gap: 5px; }
button.chip::after {
  content: ''; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}
button.chip.is-fixed::after { display: none; }

/* ---------- Role picker rows ---------- */
.pick {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15px; text-align: start;
}
.pick:last-child { border-bottom: 0; }
.pick.is-on { color: var(--accent); font-weight: 500; }

/* ---------- Attention dot ----------
   Top corner of the tile, on the side the text starts from. */
.tile { position: relative; }
.dot {
  position: absolute; top: 8px; inset-inline-start: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--alert);
  box-shadow: none;
}

/* ---------- Today list: scrolls inside its own box ----------
   Roughly five rows before it starts scrolling, so a busy day doesn't
   push the whole menu off the screen. The rubber-band effect at its
   edges is handled entirely in JS (see today-list rubber band in
   app.js) rather than left to overscroll-behavior/-webkit-overflow-
   scrolling: Android has no native stretch-and-release bounce at all
   (only a faint glow), so there was nothing for CSS alone to produce
   here regardless of these properties, and this box is small enough
   that a scroll needing to escape it to the page beneath was never a
   real risk worth guarding against. */
.today-list {
  /* ~40px per row (padding + border + one line of text) x 4 rows --
     a 5th row is reachable by scrolling, not shown up front. */
  max-height: 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

/* ---------- Cane heading inside a canister ---------- */
.cane-head {
  margin: 12px 2px 6px;
  font-size: 12.5px; color: var(--muted);
}

/* Tank cards are tappable now. */
.tank { width: 100%; text-align: start; }
.tank:active { background: var(--tint); }

/* ---------- Today rows: tappable ---------- */
.today-row { cursor: pointer; }
.today-row:active { background: var(--tint); border-radius: 12px; }

/* ---------- Select (doctor dropdown) ---------- */
select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                     linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.15em + 2px), calc(100% - 15px) calc(1.15em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[dir="ltr"] select {
  background-position: calc(100% - 20px) calc(1.15em + 2px), calc(100% - 15px) calc(1.15em + 2px);
}
select:focus { border-color: var(--accent); }

/* ---------- Tank accordion: canister -> cane -> patient ---------- */
.acc { display: flex; flex-direction: column; gap: 8px; }

.acc-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 12px 13px;
}
.acc-head.depth-2 { background: var(--mist); border-style: dashed; }
.acc-title { font-weight: 500; font-size: 14.5px; flex: 0 1 auto; white-space: nowrap; }
.acc-sub { color: var(--muted); font-size: 12.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-chev {
  flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .15s;
}
html[dir="rtl"] .acc-chev { transform: rotate(135deg); }
.acc-head.is-open .acc-chev { transform: rotate(45deg); }
html[dir="rtl"] .acc-head.is-open .acc-chev { transform: rotate(-135deg); }

.acc-body {
  display: flex; flex-direction: column; gap: 7px;
  margin: 7px 0 4px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--line);
}
.acc-body.depth-1 { padding-inline-start: 12px; }
.acc-body.depth-2 { padding-inline-start: 18px; margin-bottom: 8px; }

/* ---------- Sample row (inside a cane) ---------- */
.sample-row {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 11px 12px;
}
.sample-row:active { background: var(--tint); }
.color-dots {
  flex: 0 0 auto; display: flex; gap: 3px; margin-top: 3px;
}
.color-dot {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
}
.row-sub-2 { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Tank cards are tappable. */
.tank { width: 100%; text-align: start; }
.tank:active { background: var(--tint); }

/* ---------- Invite link box ---------- */
.link-box {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 13px;
  word-break: break-all;
  margin: 4px 0 10px;
}

/* ---------- Glass ----------
   Every panel on the page shares one translucent surface so the user's
   background photo shows through. Declared last, after the plain
   `background: var(--paper)` rules above, so it wins without having to
   edit each block individually.

   Rows nested inside an already-glass panel are deliberately left out:
   stacking blur on blur turns to mud and costs a lot on a phone. */
.today,
.tile,
.tank,
.facts,
.summary,
.sample-row,
.row,
.link-box,
.contact-box,
.topbar,
.tabbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-edge);
}

/* Panels that sit on the page (rather than spanning it) also cast a
   shadow, so they lift off the photo instead of lying flat on it. */
.today, .tile, .tank, .facts, .summary, .row, .contact-box {
  box-shadow: var(--glass-edge), var(--glass-shadow);
}

/* The bars span the full width, so only the edge that faces content
   should carry a line. */
.topbar { border: 0; border-bottom: 1px solid var(--glass-line); }
.tabbar { border: 0; border-top: 1px solid var(--glass-line); }

/* The two bars sit over scrolling content rather than over the photo, so
   they need a bit more body than the panels do — at panel transparency
   the text underneath shows through and both become hard to read. */
.topbar, .tabbar { background: rgba(255, 255, 255, .55); }

/* Pressed states have to stay opaque enough to read as feedback. */
.tile:active, .tank:active, .sample-row:active, .row:active {
  background: rgba(227, 241, 238, .72);
}

/* Text sits on a much thinner surface now, so the muted grey needs to be
   a shade darker to stay legible over a photo. */
body.has-bg { --muted: #4E635F; }

/* ---------- Background picker (settings) ---------- */
.bg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bg-actions .btn { flex: 1 1 auto; min-width: 0; }
.bg-preview {
  width: 100%; height: 120px; margin: 10px 0 12px;
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: var(--mist) center/cover no-repeat;
}
.bg-preview.is-empty { display: none; }

/* ---------- Section titles as pills ----------
   Each heading sits in its own thin capsule tinted the same as the icon
   squares behind the menu glyphs (--tint / --accent), so headings and
   icons read as one family instead of two unrelated greys.

   inline-block (via the flex wrapper) keeps the capsule only as wide as
   its text — a block-level element would stretch the tint across the
   whole column and swamp the page. */
.block-title,
.view-title {
  display: block;
  width: 100%;
  /* Two steps thinner than the panels themselves: the heading is a label
     for the boxes under it, so it should read as the lightest surface on
     the page, not compete with them. */
  background: rgba(255, 255, 255, .46);
  color: var(--accent);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: var(--glass-edge);
  padding: 4px 14px;
  font-weight: 500;
  line-height: 1.7;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.block-title { font-size: 13px; margin: 0 0 10px; }
.view-title  { font-size: 15px; margin: 2px 0 14px; }

/* Without backdrop-filter the 7% fill is invisible, so fall back to the
   flat tint that the icon squares use. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .block-title, .view-title { background: var(--tint); }
}

/* In a view header the title shares the row with the back-link, so it
   takes the remaining width rather than the full column. */
.view-head .view-title { flex: 1 1 auto; min-width: 0; }

/* ---------- Menu groups as one panel ----------
   Each group is a single large glass box with its heading at the top and
   its tiles inside, rather than a loose heading floating above separate
   boxes. Only .menu-group gets this — the doctors block, the background
   picker and the patient-file sections share the .block class and should
   stay plain. */
.menu-group {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  padding: 12px;
}

/* The heading is already inside the panel, so it drops its own outline
   and just sits at the top of it. */
.menu-group .block-title {
  background: none;
  border: 0;
  /* the capsule's edge highlight has to go too, or it draws a lit rim
     around a heading that no longer has a box */
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 4px;
  margin: 2px 0 10px;
}

/* Five steps thinner than a standalone panel. The group box behind them
   supplies the surface now, so the tiles only need to show their own
   edges — at panel opacity they'd read as boxes stacked on a box. */
.menu-group .tile {
  background: rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* edge only, no drop shadow: these sit *inside* a panel, and a shadow
     there would read as a second floating layer. */
  box-shadow: var(--glass-edge);
}
.menu-group .tile:active {
  background: rgba(227, 241, 238, .55);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-group .tile { background: rgba(255, 255, 255, .55); }
}

/* ---------- View transitions ----------
   Views used to swap on a single frame, which reads as a flicker rather
   than a change of place. This gives the incoming view a short rise and
   fade so the movement is legible. */
.view.is-entering {
  animation: view-in .82s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Tiles settle in one after another, so a screenful of menu doesn't all
   arrive at once. Capped at eight: past that the last tile would wait
   long enough to feel broken rather than smooth. */
.menu-group .tile {
  animation: tile-in .74s cubic-bezier(.22, .61, .36, 1) both;
}
.menu-group .tile:nth-child(1) { animation-delay: .05s; }
.menu-group .tile:nth-child(2) { animation-delay: .10s; }
.menu-group .tile:nth-child(3) { animation-delay: .15s; }
.menu-group .tile:nth-child(4) { animation-delay: .20s; }
.menu-group .tile:nth-child(5) { animation-delay: .25s; }
.menu-group .tile:nth-child(6) { animation-delay: .30s; }
.menu-group .tile:nth-child(7) { animation-delay: .35s; }
.menu-group .tile:nth-child(n+8) { animation-delay: .40s; }

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

/* Presses and page changes should feel damped, not instant. */
.tile, .row, .tank, .sample-row, .btn {
  transition: background-color .48s ease, border-color .48s ease,
              transform .36s ease;
}
/* superseded by the spring press at the end of this file */

/* Anyone who has asked their phone to stop animating gets none of this. */
@media (prefers-reduced-motion: reduce) {
  .view.is-entering, .menu-group .tile { animation: none; }
  .tile, .row, .tank, .sample-row, .btn { transition: none; }
  .tile:active, .row:active, .tank:active, .sample-row:active { transform: none; }
}

/* ---------- Borderless glass ----------
   No outline and no shadow on any glass surface: the panels are defined
   purely by their own tint against what shows through them. Declared
   after every earlier rule so it overrides the edge and drop-shadow
   tokens without having to unpick them where they are set. */
.today,
.tile,
.tank,
.facts,
.summary,
.sample-row,
.row,
.link-box,
.topbar,
.tabbar,
.menu-group,
.menu-group .tile,
.block-title,
.view-title,
.empty {
  border: 0;
  box-shadow: none;
}

/* The two bars kept a hairline to separate them from scrolling content;
   without it they now need a slightly firmer tint to stay distinct. */
.topbar, .tabbar { background: rgba(255, 255, 255, .68); }

/* ---------- Search field as glass ----------
   The input matched the old opaque panels, so once everything around it
   turned to glass it was the one solid white block left on the page. */
input[type="search"], input[type="text"], input[type="tel"] {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 0;
  border-radius: 18px;
}

/* Focus can't be shown with a border any more, so the tint lifts instead
   — the field still has to say which one is active. */
input:focus {
  background: rgba(255, 255, 255, .72);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  input[type="search"], input[type="text"], input[type="tel"] {
    background: rgba(255, 255, 255, .86);
  }
}

/* ---------- Patient file as unified panels ----------
   Each part of the file (details, cycles, samples, medications) is one
   box with its heading inside it, matching the menu groups, instead of a
   heading floating above a stack of separate rows. */
.info-group {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 0;
  border-radius: var(--r-card);
  padding: 12px;
}

.info-group .block-title {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 4px;
  margin: 2px 0 10px;
}

/* Rows sit inside a panel now, so they only need a light lift off it —
   at full panel tint they'd read as boxes stacked on a box. */
.info-group .row,
.info-group .empty {
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.info-group .row:active { background: rgba(227, 241, 238, .55); }

/* The details block at the top is already a panel of this kind — .fact
   rows carry their own padding, so it needs no extra here; only the
   divider lines are softened to match the borderless look. */
.facts .fact { border-top-color: rgba(255, 255, 255, .45); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .info-group .row, .info-group .empty { background: rgba(255, 255, 255, .70); }
}

/* ---------- Bottom bar as a floating glass box ----------
   The bar no longer spans edge to edge: it sits inset from the sides as
   its own rounded, blurred panel. Back moved here from the page header,
   so it is five columns now.

   direction: ltr fixes the visual order regardless of the interface
   language — search, home, schedule, assistant reads the same in Persian
   and in English, instead of mirroring with the page. */
.tabbar {
  direction: ltr;
  grid-template-columns: repeat(4, 1fr);
  inset-inline: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-radius: 24px;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* The bar floats now, so content has to clear the gap under it too. */
body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 24px); }

.tab { border-radius: 20px; padding: 14px 4px 15px; gap: 4px; }
.tab-ico { font-size: 22px; }
.tab.is-on { background: rgba(255, 255, 255, .34); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: rgba(255, 255, 255, .90); }
}

/* ---------- Icon-only bottom bar ----------
   Labels come out of the layout but stay in the markup, so the buttons
   still announce themselves to a screen reader and keep their data-t
   translations. */
.tab > span:not(.tab-ico) {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.tab {
  position: relative;
  gap: 0;
  /* the active pill is inset from the bar's own edge rather than filling
     the cell corner to corner */
  margin: 8px 6px;
  padding: 0;
  height: calc(100% - 16px);
  align-items: center;
  justify-content: center;
}
.tab-ico { font-size: 33px; line-height: 1; }   /* four in the same width */

/* Rounder, and tall enough that each icon gets a generous target.
   --tabbar only drives the body's bottom padding, so the bar's own
   height has to be set here or the box just hugs its icons. */
.tabbar {
  border-radius: 34px;
  min-height: var(--tabbar);
  align-items: center;
}

/* ---------- Swipe motion ----------
   While the finger is down the view is moved directly, so it must not
   have a transition fighting the drag. Once released it animates to
   where it belongs. */
.view.is-dragging {
  transition: none;
  will-change: transform, opacity;
}
.view.is-settling {
  transition: transform .26s cubic-bezier(.22, .61, .36, 1),
              opacity .26s ease;
}

/* The incoming view arrives from whichever side the old one left
   towards, so the movement reads as one continuous push. */
.view.enter-right { animation: slide-from-right .34s cubic-bezier(.22, .61, .36, 1) both; }
.view.enter-left  { animation: slide-from-left  .34s cubic-bezier(.22, .61, .36, 1) both; }

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(42%); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-from-left {
  from { opacity: 0; transform: translateX(-42%); }
  to   { opacity: 1; transform: none; }
}

/* A horizontal drag shouldn't also pan the page sideways on the way. */
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .view.enter-right, .view.enter-left { animation: none; }
  .view.is-settling { transition: none; }
}

/* ---------- Keep the backdrop still ----------
   A horizontal drag was being taken up by the webview itself and panning
   the whole surface, which carried the fixed background along with it.
   Declaring the app pan-vertical-only hands horizontal gestures to our
   own handler instead, and overscroll-behavior stops the rubber-band at
   the edges. */
html, body {
  overscroll-behavior-x: none;
  /* pan-y means: the browser may handle vertical scrolling, horizontal is
     ours. Removing it in v48 was a mistake — without it the browser
     claims a horizontal drag as a possible pan and fires pointercancel
     straight away, which kills the gesture before it can be claimed.
     This declaration is what keeps horizontal drags being delivered. */
  touch-action: pan-y;
}

/* Its own compositing layer, so panning or repainting content above it
   can't drag it around. */
#bg-layer {
  position: fixed;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}

/* ---------- Blur budget ----------
   Every backdrop-filter element samples whatever sits behind it. With
   one on each tile and row there were dozens live at once: that is what
   made the blur look like it was breathing (overlapping samplers give
   different results as they scroll) and what was starving the background
   layer of frames.

   So blur is now spent only on the large containers. Everything that
   repeats — tiles, rows, tanks, capsules — is a plain translucent fill
   over the container's blur, which looks the same but costs nothing. */
.tile,
.tank,
.row,
.sample-row,
.summary,
.link-box,
.empty,
.block-title,
.view-title,
.menu-group .tile,
.info-group .row,
.info-group .empty {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Kept: the surfaces large enough to be worth it, and few enough to stay
   cheap — bars, the panels, and the search field. */
.topbar,
.tabbar,
.menu-group,
.info-group,
.facts,
.today,
input[type="search"], input[type="text"], input[type="tel"] {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* Standalone panels sit straight on the photo, so they carry the blur;
   anything nested inside one must not, or blur stacks on blur and turns
   to mud at the overlaps. */
.menu-group .tile { background: rgba(255, 255, 255, .46); }
.info-group .row,
.info-group .empty { background: rgba(255, 255, 255, .46); }
.tile, .tank, .row, .sample-row, .summary { background: rgba(255, 255, 255, .38); }
.block-title, .view-title { background: rgba(255, 255, 255, .26); }

/* ---------- Background layer ----------
   will-change kept the layer permanently promoted and, on a large image,
   cost more than it saved — it was part of the lag. A plain fixed layer
   with a one-off compositing hint is steadier. */
#bg-layer {
  will-change: auto;
  backface-visibility: hidden;
}

/* ---------- Background must not move ----------
   Root cause of the drift: during a swipe the view is translated
   sideways, which makes the document wider than the screen. `overflow-x`
   was only set on body, so the *html* element still scrolled
   horizontally, and that scroll carried the whole surface — background
   included — along with it.

   Clipping at the html element and inside the app shell means the drag
   can no longer produce any scrollable width at all, so there is nothing
   for the background to be dragged by. */
html {
  /* `clip`, not `hidden`: overflow-x:hidden silently turns the element
     into a scroll container, and a sticky child then sticks to *that*
     container instead of the viewport — which is what stopped the top
     bar staying put. `clip` cuts the overflow without creating one. */
  overflow-x: clip;
  max-width: 100%;
}
.app {
  overflow-x: clip;
}

/* Older webviews don't know `clip`; there `hidden` still prevents the
   sideways drift, and the bar is pinned outright below so it stays put
   either way. */
@supports not (overflow-x: clip) {
  /* overflow-x: hidden alone forces the OTHER axis (overflow-y) to
     compute as auto per spec -- silently turning .app into its own
     scroll container instead of the page/window, which is exactly
     what broke position:sticky here (the modern overflow-x: clip rule
     above doesn't have this side effect; this fallback, for whatever
     older WebView doesn't support clip, needs overflow-y spelled out
     to avoid it). */
  html, .app { overflow-x: hidden; overflow-y: visible; }
}

/* A plain fixed layer, with none of the compositing hints that were
   added earlier: a transform on a fixed element makes some webviews
   composite it separately and let it drift. Fewest moving parts wins. */
#bg-layer {
  position: fixed;
  inset: 0;
  transform: none;
  will-change: auto;
  backface-visibility: visible;
  z-index: -2;
  pointer-events: none;
}

/* ---------- Steady appearance while moving ----------
   backdrop-filter inside a transformed or faded element samples that
   element instead of the page, so panels lose their blur on their own
   partway through a transition and regain it at the end — the flicker.

   It cannot be animated around, so instead the blur is dropped
   deliberately for the whole movement and the fill is raised to stand in
   for it. The panels then look the same from the first frame to the
   last; the difference between blurred and flat at this opacity is far
   less visible than the blur cutting in and out. */
/* `none` is not an interpolatable value, so switching to it makes the
   change land in a single frame — that is why it read as a jolt. Going
   to blur(0px) instead lets it be transitioned, and the fill fades up
   over the same curve, so the two cross over smoothly. */
.today,
.facts,
.menu-group,
.info-group,
input[type="search"],
input[type="text"],
input[type="tel"] {
  /* This is the transition used when the class comes OFF — i.e. the blur
     returning once the page has settled. That return was the moment that
     stood out, so it is deliberately the slow half: long and eased out,
     it finishes below the threshold where the eye catches it. */
  transition: backdrop-filter 1.1s ease-out, -webkit-backdrop-filter 1.1s ease-out,
              background-color 1.1s ease-out;
}

body.is-moving .today,
body.is-moving .facts,
body.is-moving .menu-group,
body.is-moving .info-group,
body.is-moving input[type="search"],
body.is-moving input[type="text"],
body.is-moving input[type="tel"] {
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  background: rgba(255, 255, 255, .60);
  /* And this is the transition going IN, which starts the instant the
     page begins to move. Spreading it across the movement is what stops
     it being a single visible step at the end. */
  transition: backdrop-filter .5s ease-in, -webkit-backdrop-filter .5s ease-in,
              background-color .5s ease-in;
}

/* The bars are outside the moving view, so their blur is never broken —
   they keep it, and must not flash to the flat fill with the rest. */
body.is-moving .topbar,
body.is-moving .tabbar {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.topbar, .tabbar {
  transition: backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease,
              background-color .45s ease;
}

/* Keep the top bar pinned regardless of what any ancestor does. */
.topbar { position: sticky; top: 0; }

/* ---------- Top bar pinned for real ----------
   `position: sticky` kept failing here: it depends on every ancestor
   staying free of an overflow/clip/transform that would turn one of them
   into the sticky container, and this shell has several. Rather than keep
   chasing which ancestor broke it, the bar is taken out of flow and
   fixed to the viewport, which nothing above it can undo.

   Out of flow means it no longer occupies space, so the shell gets top
   padding of exactly the bar's height to put the content back. */
:root { --topbar: 64px; }

.topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 40;
  min-height: var(--topbar);
}

/* Half on the fixed bar, half on the page underneath it: positioned by
   the bar's own bottom edge (top: 100%) and pulled up by half its own
   height, rather than by any padding/alignment inside the bar, so it
   straddles that exact seam regardless of the bar's internal spacing.
   The bar has no overflow:hidden, so the bottom half is free to spill
   onto whatever view is showing beneath it. */
.user-avatar {
  position: absolute;
  inset-inline-start: var(--pad);
  top: 100%;
  margin-top: -27px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 41;
}

/* Only the staff shell has a top bar; the patient portal has none, and
   padding there would just open a gap at the top of the page. */
#staff { padding-top: var(--topbar); }

/* ---------- The page arriving during a drag ----------
   While a swipe is in progress two views are on screen at once. The
   incoming one is lifted out of normal flow and laid over the content
   area, otherwise it would stack below the outgoing page and push the
   layout around instead of sliding in beside it.

   It covers the area between the two bars; its own scrolling doesn't
   matter for the moment it is visible. */
.view.is-incoming {
  position: fixed;
  top: var(--topbar);
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  overflow: hidden;
}

/* Both halves settle on the same curve, so they read as one movement
   rather than two things happening near each other. */
.view.is-settling {
  transition: transform .30s cubic-bezier(.22, .61, .36, 1),
              opacity .30s ease;
}

/* ---------- Search field legibility ----------
   The placeholder was a pale mint that only worked against the old solid
   white field. Over a photo, at the current glass opacity, it was barely
   there. A proper grey with real contrast reads on any background, and
   the typed text is darkened to full ink so it is never mistaken for the
   placeholder. */
input::placeholder {
  color: #5C6E6A;
  opacity: 1;            /* Firefox dims placeholders by default */
}

input[type="search"], input[type="text"], input[type="tel"] {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- No blur inside a moving view ----------
   This is the definitive fix for the flicker, replacing the toggle above.

   backdrop-filter inside an element that gets a transform is not a
   gradual thing: the moment the transform lands, that element becomes a
   new backdrop root and every filter inside it re-samples in a single
   frame. There is no CSS transition that can soften it, because it isn't
   a value changing — it's the rendering mode changing. Switching the
   blur off and on around the movement only replaced one hard change with
   two, which is why it looked worse.

   So panels inside a view simply never blur. They are translucent white,
   which looks the same whether the view is still or moving, so nothing
   changes at any point in a transition.

   The two bars keep real blur: they live outside the view that moves, so
   their backdrop root is never disturbed. */
.today,
.facts,
.menu-group,
.info-group,
input[type="search"],
input[type="text"],
input[type="tel"],
body.is-moving .today,
body.is-moving .facts,
body.is-moving .menu-group,
body.is-moving .info-group,
body.is-moving input[type="search"],
body.is-moving input[type="text"],
body.is-moving input[type="tel"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* a touch more fill, since there is no blur doing the work now */
  background: rgba(255, 255, 255, .52);
  transition: none;
}

/* Rows and tiles nested in those panels stay lighter, as before. */
.menu-group .tile,
.info-group .row,
.info-group .empty {
  background: rgba(255, 255, 255, .50);
}

.topbar, .tabbar {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  transition: none;
}

/* ---------- Page dots ----------
   Four dots, centred directly above the bar. All of them are faint
   except the page you are on, which is simply more opaque — same size,
   same position, only the strength changes.

   Named .pdot, not .dot: .dot is already the red attention badge on menu
   tiles and is position:absolute, which these would have inherited.

   direction: ltr so the first dot is always the leftmost one and the
   order matches the bar's icons in every language — second page from the
   left means the second dot. */
.dots {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 35;
  direction: ltr;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dots.is-hidden { opacity: 0; }    /* pushed views have no page position */

.pdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: .38;
  box-shadow: 0 1px 3px rgba(20, 49, 44, .22);
  transition: opacity .22s ease;
}

.pdot.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pdot { transition: none; }
}

/* ---------- Bottom bar: no moving highlight ----------
   The lit pill behind the active icon moved a step behind the page and
   read as a stutter at the end of every swipe. The dots above the bar
   already say which page you are on, so the bar no longer marks it at
   all — one indicator, and the one that tracks the finger.

   The icons are emoji, so the colour half of .is-on was never visible
   anyway; only the pill was, and that is what goes. */
.tab.is-on {
  background: transparent;
}

/* ---------- Registration: screening chips and checkbox ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-pick {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  color: var(--ink);
  font-size: 14px;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease;
}
.chip-pick.is-on {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 500;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}
.check input {
  width: 20px; height: 20px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* Date field with its "today" shortcut sitting beside it. min-width:0 on
   the input or the button pushes it out of the row. */
.row-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.row-inline input {
  flex: 1 1 auto;
  min-width: 0;
}
.row-inline .btn {
  flex: 0 0 auto;
  width: auto;
  padding: 12px 16px;
}

/* Live MII remainder under the maturity fields. It turns red when the
   entered counts already exceed the retrieved total, which is the one
   mistake that can't be caught by looking at any single field. */
.mii-box {
  margin: 4px 2px 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .42);
  font-weight: 500;
}
.mii-box.is-bad {
  background: var(--alert-bg);
  color: var(--alert);
}

/* ---------- Confirmation sheet as glass ----------
   The sheet lives outside the view that moves, so its blur is never
   disturbed by a page transition — unlike the panels inside a view, it
   can safely keep a real backdrop-filter. */
.sheet {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 -12px 40px rgba(20, 49, 44, .18);
}

.sheet-scrim {
  background: rgba(20, 49, 44, .28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  /* fades in alongside the sheet instead of snapping on with it */
  animation: scrim-in .44s ease both;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet { background: rgba(255, 255, 255, .95); }
}

/* ---------- Depth on the tiles, rows and name panels ----------
   What gives an iOS glass panel its thickness is the way light sits on
   its edges: a bright top lip, faint light wrapping down the sides, and
   a soft shadow underneath lifting it off the background. None of this
   is blur, so none of it is disturbed while a page is being dragged —
   which is why it is safe here where backdrop-filter was not.

   Declared last so it survives the flattening rules added in v28. */
.tile,
.tank,
.row,
.sample-row,
.menu-group,
.info-group,
.facts,
.today,
.summary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 1px 0 0 rgba(255, 255, 255, .34),
    inset -1px 0 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(20, 49, 44, .08),
    0 2px 10px rgba(20, 49, 44, .10);
}

/* Tiles and rows inside a panel sit ON that panel, so they get a tighter
   shadow — a deep one there would read as floating off the page instead
   of resting in it. */
.menu-group .tile,
.info-group .row,
.info-group .empty {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(20, 49, 44, .07),
    0 1px 5px rgba(20, 49, 44, .08);
}

/* Pressing should look like the tile is pushed into the surface: the top
   highlight goes, and the shadow tucks in rather than spreading. */
.tile:active,
.tank:active,
.row:active,
.sample-row:active,
.menu-group .tile:active {
  box-shadow:
    inset 0 2px 5px rgba(20, 49, 44, .14),
    inset 0 -1px 0 rgba(255, 255, 255, .35);
}

/* The page/section title capsules get the same treatment, so a patient's
   name reads as sitting on the same kind of surface as everything else.
   The heading inside a menu group is excluded: it has no box of its own
   there, and an edge highlight around nothing looks like a rendering
   fault. */
.view-title,
.block-title {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .74),
    inset 0 -1px 0 rgba(20, 49, 44, .07),
    0 1px 6px rgba(20, 49, 44, .09);
}

.menu-group .block-title,
.info-group .block-title {
  box-shadow: none;
}

/* ---------- Thin top strip ----------
   Half the previous height: username on the left, role on the right, one
   line each. The clinic name is on the banner below, so this strip only
   has to say who you are signed in as. */
:root { --topbar: 34px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px var(--pad);
  min-height: var(--topbar);
  border-radius: 0;
  background-image: none;
}

.chip-user {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  flex: 0 0 auto;
  padding: 3px 11px;
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.chip-role { font-size: 12px; color: var(--accent); }

/* ---------- Fixed glass clinic banner (v200) ----------
   Full-width banner joined to the top bar. Only the lower corners are
   rounded; the glass is deliberately one degree clearer than before. */
.hero {
  position: sticky;
  top: var(--topbar);
  z-index: 19;
  width: calc(100% + (2 * var(--pad)));
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.34);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(9px) saturate(1.02);
  backdrop-filter: blur(9px) saturate(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(20, 49, 44, .045),
    0 3px 12px rgba(20, 49, 44, .08);
}
.hero-plate {
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}



/* ---------- Container panels for lists ----------
   Schedule, search results, recent, puncture, ICSI and settings are all
   lists of rows. Each list now sits inside one panel so the rows read as
   its contents rather than as separate cards floating on the page —
   matching how the menu groups already work. */
.list-panel {
  background: rgba(255, 255, 255, .30);
  border-radius: var(--r-card);
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .70),
    inset 0 -1px 0 rgba(20, 49, 44, .07),
    0 2px 12px rgba(20, 49, 44, .10);
}

/* The big panels that sit BEHIND smaller boxes are deliberately the
   thinnest surfaces on the page: they are a backing, not a card, and at
   full strength they compete with the rows they are meant to hold. */
.menu-group,
.info-group,
.list-panel {
  background: rgba(255, 255, 255, .26);
}

/* Rows inside a container: lighter than a standalone row, so the nesting
   reads correctly. */
.list-panel .row,
.list-panel .empty {
  background: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(20, 49, 44, .07),
    0 1px 5px rgba(20, 49, 44, .08);
}

/* ---------- Search field, set apart from its results ----------
   The field and the result rows were the same surface, so the box you
   type in looked like the first result. It now carries a visible rim and
   a denser fill, which reads as an input rather than a list item. */
/* No rim: the field is set apart by being denser and recessed rather
   than outlined — a pressed-in surface instead of a card. */
.searchbar input[type="search"] {
  background: rgba(255, 255, 255, .70);
  border: 0;
  box-shadow: inset 0 2px 7px rgba(20, 49, 44, .13);
}
.searchbar input[type="search"]:focus {
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 2px 7px rgba(20, 49, 44, .16);
}

/* Icon column for the settings rows. */
.row-ico { flex: 0 0 auto; font-size: 20px; line-height: 1.4; }
.row-ico svg { width: 20px; height: 20px; display: block; }

/* Contact links (Telegram/Instagram/WhatsApp) as one shared box with the
   three brand icons side by side, rather than three separate list rows —
   these are simple external links, not data to scan top-to-bottom.
   Background/border/shadow come from the shared glass-panel rule above
   (.contact-box is listed there) — nothing set here, on purpose, since
   this rule is declared *after* that block and a background here would
   silently win over the glass one and go unnoticed. */
.contact-box {
  border-radius: var(--r-card);
  padding: 14px 6px;
  display: flex;
  justify-content: space-evenly;
}
.contact-box a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: inherit; text-decoration: none;
}
.contact-box svg { width: 40px; height: 40px; display: block; }
.contact-box .contact-label { font-size: 12px; color: var(--muted); }

/* While the keyboard is up the bottom bar would be pushed on top of it,
   so it steps out of the way instead. The dots go with it — they belong
   to the bar. */
body.kb-open .tabbar,
body.kb-open .dots {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}
.tabbar, .dots { transition: opacity .18s ease, transform .22s ease; }

/* With the bar gone the page no longer needs to reserve room for it. */
body.kb-open { padding-bottom: 12px; }

/* ---------- Accordion drawers ----------
   Height and opacity are animated together so a tank's canisters, canes
   and samples unfold instead of appearing all at once. `is-collapsed`
   takes a closed drawer out of the layout entirely once the animation
   has finished, so it costs nothing while shut. */
.acc-body {
  overflow: hidden;
  height: auto;
  opacity: 1;
  transition: height .70s cubic-bezier(.25, .8, .3, 1), opacity .55s ease;
}
.acc-body.is-collapsed {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .acc-body { transition: none; }
}

/* ---------- Press feedback ----------
   iOS answers a touch immediately: the control dips under the finger and
   springs back when released, so you can tell it registered before
   anything else happens.

   The press itself is quick and linear — it has to keep up with the
   finger — while the release uses an overshooting curve, which is what
   gives the spring its character rather than just easing back. */
.tile,
.tank,
.row,
.sample-row,
.chip-pick,
.btn,
.tab,
.today-row,
.acc-head {
  transition:
    transform .34s cubic-bezier(.34, 1.4, .5, 1),
    background-color .3s ease,
    box-shadow .3s ease;
}

.tile:active,
.tank:active,
.row:active,
.sample-row:active,
.chip-pick:active,
.btn:active,
.today-row:active,
.acc-head:active {
  transform: scale(.955);
  transition:
    transform .08s ease-out,
    background-color .1s ease,
    box-shadow .1s ease;
}

/* The bar icons have no panel to dip, so the glyph itself does. */
.tab:active { transform: scale(.88); transition: transform .08s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tank, .row, .sample-row, .chip-pick, .btn, .tab, .today-row, .acc-head {
    transition: none;
  }
  .tile:active, .tank:active, .row:active, .sample-row:active,
  .chip-pick:active, .btn:active, .tab:active, .today-row:active, .acc-head:active {
    transform: none;
  }
}

/* ---------- Press feedback ----------
   iOS doesn't just tint a control when you touch it: it shrinks slightly
   under the finger and springs back when released. The give on the way
   in is quick and linear (it should track the finger), the return uses an
   overshooting curve so it bounces rather than eases flat — that bounce
   is what reads as physical.

   Applied to the glass surfaces that are actually tappable. */
.tile,
.tank,
.row,
.sample-row,
.chip-pick,
.btn,
.tab {
  transition:
    transform .34s cubic-bezier(.34, 1.56, .64, 1),
    background-color .3s ease,
    box-shadow .3s ease;
  will-change: transform;
}

.tile:active,
.tank:active,
.row:active,
.sample-row:active,
.chip-pick:active,
.btn:active {
  transform: scale(.94);
  transition-duration: .09s;
  transition-timing-function: ease-out;
}

/* The bar icons are small, so they take a lighter squeeze — at .94 they
   look like they are collapsing rather than being pressed. */
.tab:active {
  transform: scale(.88);
  transition-duration: .09s;
  transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tank, .row, .sample-row, .chip-pick, .btn, .tab { transition: none; }
  .tile:active, .tank:active, .row:active, .sample-row:active,
  .chip-pick:active, .btn:active, .tab:active { transform: none; }
}

/* ---------- Straw count with its colour beneath ----------
   The dot describes the straws, so it sits under the count rather than
   at the opposite edge of the row where it read as unrelated. */
.row-tail-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.row-tail-stack .color-dots { margin-top: 0; }

/* The row's other children are top-aligned, so the tail has to be too,
   or the count drifts down the row as the text block grows. */
.sample-row { align-items: flex-start; }

/* Each item inside an opening drawer eases in just behind the one above
   it (see slideAccordion). Capped in JS so a long cane list doesn't make
   the last row wait noticeably. */
@keyframes acc-child-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-body > * { animation: none !important; }
}


/* ---------- Tanks: one encompassing glass panel ----------
   The title, summary and all tank cards belong to the same LN2 section. */
.tanks-panel {
  padding: 14px;
}
.tanks-panel .tanks-head {
  margin-bottom: 12px;
}
.tanks-panel .tanks {
  gap: 10px;
}


/* ---------- LN2 tank visuals ----------
   Replaces the old horizontal fill bars with a dewar/tank illustration.
   The liquid height still represents the real percentage from the server. */
.tank-visual-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 156px;
  padding: 16px 18px;
  text-align: start;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: var(--glass-edge), 0 8px 26px rgba(20,49,44,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tank-visual {
  flex: 0 0 78px;
  width: 78px;
  height: 126px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.tank-visual.is-caution { color: var(--caution); }
.tank-visual.is-alert { color: var(--alert); }
.tank-visual-svg {
  width: 74px;
  height: 116px;
  filter: drop-shadow(0 5px 9px rgba(20,49,44,.10));
}
.tank-card-info {
  min-width: 0;
  flex: 1 1 auto;
}
.tank-card-info .tank-head {
  margin-bottom: 7px;
}
.tank-current-capacity {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 18px;
  color: var(--ink);
}
.tank-current-capacity strong { font-size: 23px; font-weight: 700; }
.tank-current-capacity span { color: var(--muted); font-size: 14px; }
.tank-capacity-label {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
/* The 2-column grid this used to switch to at >=760px is gone -- it
   left the tank screen inconsistent (confirmed live: showed the old
   grid, not the carousel, at a width under what felt like "desktop").
   The swipeable stacked carousel now applies at every width. */

/* ---------- Tanks header ----------
   The title and its three counters in one panel. The summary's own
   bottom margin goes, since the panel now provides the spacing. */
.tanks-head { margin-bottom: 16px; }
.tanks-head .view-head { margin-bottom: 10px; }
.tanks-head .summary { margin-bottom: 0; }
.tanks-head .sum-cell {
  background: rgba(255, 255, 255, .55);
  border: 0;
}

/* ---------- Readable headings ----------
   The capsules sit on a photograph now, and the accent green was too
   light against it to read cleanly. Ink is the same colour the rest of
   the text uses, so the headings stop being the hardest thing on the
   page to read. */
.view-title,
.block-title {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Date picker ---------- */
.dp-sheet { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }

.dp-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: ltr;
  margin: 4px 0 12px;
}
.dp-title { flex: 1 1 auto; text-align: center; font-weight: 600; font-size: 16px; }
.dp-nav {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  color: var(--accent);
  font-size: 17px;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  direction: rtl;   /* Persian calendar weeks run right to left */
}
html[dir="ltr"] .dp-grid { direction: ltr; }

.dp-w {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  padding-bottom: 4px;
}
.dp-d {
  aspect-ratio: 1;
  border-radius: 11px;
  background: rgba(255, 255, 255, .5);
  font-size: 14px;
  color: var(--ink);
}
.dp-d.is-on {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
}

/* The calendar/time button sits right beside its field, in one row. */
.field-with-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.field-with-btn input { flex: 1 1 auto; min-width: 0; width: 100%; }
.date-btn {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  font-size: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* ---------- Registration form as one panel ----------
   Label and input belong together, so each .field keeps its pair intact
   and the panel holds the whole form. The last field drops its bottom
   margin, otherwise the panel ends with a gap under it. */
.form-panel { padding: 14px; }
.form-panel .field:last-child { margin-bottom: 0; }

/* Inside a panel the inputs would otherwise be the same surface as the
   panel itself; a touch more fill keeps them legible as fields. */
.form-panel input[type="text"],
.form-panel input[type="tel"],
.form-panel input[type="search"],
.form-panel select {
  background: rgba(255, 255, 255, .58);
}

/* ---------- In-page dropdown ----------
   Replaces the system select sheet. The native <select> stays in the DOM
   as the value holder but is taken out of view — display:none would stop
   some browsers reporting it, so it is hidden by size instead. */
.dd { position: relative; }

.dd-native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  color: var(--ink);
  text-align: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.dd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-label.is-placeholder { color: var(--muted); }

.dd-chev {
  flex: 0 0 auto;
  color: var(--accent);
  transition: transform .3s cubic-bezier(.25, .8, .3, 1);
}
.dd-btn.is-open .dd-chev { transform: rotate(180deg); }

/* Uses the same collapse mechanism as the tank drawers, so it opens at
   the same pace as everything else. */
.dd-list {
  overflow: hidden;
  height: auto;
  opacity: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  transition: height .42s cubic-bezier(.25, .8, .3, 1), opacity .34s ease;
}
.dd-list.is-collapsed { display: none; }

.dd-opt {
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  text-align: start;
}
.dd-opt.is-on {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 500;
}

/* ---------- Time picker ----------
   Stacked, not side by side: minutes only ever has four buttons now
   (quarter-hours), so splitting the sheet into two half-width columns
   left the hour grid squeezed into three cramped columns needing its
   own scroll, right next to a mostly-empty minute column. Hours gets
   the full width and lays out in six, all 24 fitting with no scrolling
   at all; minutes gets a single full-width row of exactly four. */
.tp-cols {
  display: flex;
  flex-direction: column;
  gap: 14px;
  direction: ltr;
  margin-bottom: 14px;
}
.tp-col {
  display: grid;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .34);
}
.tp-col-hours { grid-template-columns: repeat(6, 1fr); }
.tp-col-mins { grid-template-columns: repeat(4, 1fr); }
.tp-cell {
  padding: 10px 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .5);
  font-size: 14px;
  color: var(--ink);
  text-align: center;
}
.tp-cell.is-on {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
}

/* ---------- Text follows its own language ----------
   The page direction is set once from the interface language, but the
   content is mixed: a Persian patient name can sit in an English
   interface and an English drug name in a Persian one. Forcing either to
   the page direction pushes it to the wrong edge and scrambles where the
   punctuation lands.

   `unicode-bidi: plaintext` resolves each element's direction from its
   own first strong character — the same rule as dir="auto", but applied
   in one place instead of on every element the code creates. With
   `text-align: start` the text then settles against the correct edge on
   its own: Persian and Arabic to the right, Latin to the left. */
.row-title,
.row-sub,
.row-sub-2,
.row-tail,
.fact-k,
.fact-v,
.view-title,
.block-title,
.sheet-title,
.sheet-body,
.dd-label,
.dd-opt,
.chip-user,
.chip-pick,
.label,
.note,
.empty,
.acc-head,
.tile span,
input[type="text"],
input[type="search"],
input[type="tel"],
select,
textarea {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Numbers and dates are read left-to-right in every language here, so
   they keep an explicit direction rather than guessing from a digit. */
.dp-grid,
.tp-cols,
.hero-tagline {
  unicode-bidi: normal;
}

/* A description that introduces the list it sits above belongs inside
   the same panel, not floating over it. */
.panel-note { margin: 2px 4px 10px; }

/* The placeholder is Persian, so it has to start at the right edge like
   the text that will replace it — otherwise the caret jumps sides the
   moment you type. `plaintext` resolves each from its own content; the
   placeholder is styled separately because some engines do not inherit
   the input's resolved direction into it. */
input::placeholder { text-align: start; unicode-bidi: plaintext; }

/* Existing canisters and canes offered under their field — tapping one
   fills it in. Using an existing location is the normal case; typing a
   new name is the exception, so the options are there but the field
   stays free text. */
/* Canisters and canes are numbered, so they read as a keypad rather than
   a sentence: ten to a row, every cell the same width whatever the
   number, and canes identical to canisters so the eye doesn't have to
   re-scale between the two rows. */
.pick-hint {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-top: 7px;
}
.pick-chip {
  padding: 8px 2px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .5);
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A named location (not a bare number) needs the whole row to stay
   readable, so it breaks out of the ten-column grid. */
.pick-chip.is-wide { grid-column: span 5; }

.chip-color { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Accent surfaces as glass ----------
   Every solid-green fill — the primary buttons, the selected chips,
   the chosen day in the calendar, the picked hour, the highlighted
   dropdown option — becomes a translucent green over a blur, so these
   stop being the only flat blocks of colour on an otherwise glass page.

   The tint is kept strong enough to carry white text: below roughly 70%
   the label starts to compete with whatever shows through it. */
.btn-primary,
.chip-pick.is-on,
.dp-d.is-on,
.dd-opt.is-on,
.tp-cell.is-on,
.status-card {
  background: rgba(14, 124, 107, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 2px 10px rgba(14, 124, 107, .22);
}

/* Pressed: denser rather than a different hue, so the press reads as
   pressure on the same surface. */
.btn-primary:active,
.chip-pick.is-on:active,
.dp-d.is-on:active,
.dd-opt.is-on:active,
.tp-cell.is-on:active {
  background: rgba(14, 124, 107, .86);
}

/* Without backdrop-filter a 72% fill would sit on bare background and
   look washed out, so those browsers keep the solid colour. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-primary,
  .chip-pick.is-on,
  .dp-d.is-on,
  .dd-opt.is-on,
  .tp-cell.is-on,
  .status-card {
    background: var(--accent);
  }
}

/* Error messages were left out of the v69 direction rule. They are the
   worst place to omit it: a Persian sentence containing Latin terms and
   digits ("مجموع جنین‌ها (4) از تعداد MII (1) بیشتر می‌شود.") starts
   with a strong Persian character, so without this the paragraph is laid
   out left-to-right and the full stop jumps to the wrong end. */
.error {
  unicode-bidi: plaintext;
  text-align: start;
}

/* A derived value, shown where an input would be. Deliberately not
   styled as a field: there is nothing here to type into. */
.computed-value {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .34);
  color: var(--ink);
  font-weight: 500;
  unicode-bidi: plaintext;
  text-align: start;
}

/* The same dot on a list row: which entry is the new one, not just that
   the queue grew. Positioned against the row rather than the tile, and
   on the trailing edge so it doesn't collide with the leading icon. */
.row { position: relative; }
.row-dot {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  inset-inline-start: auto;
}

/* A quality row that has embryos picked from it, and the ×N counter. */
.row.is-picked {
  background: rgba(14, 124, 107, .16);
}
.fe-count {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  min-width: 26px;
  text-align: end;
}

/* A quality whose remaining count reached zero stays visible for clarity,
   but is no longer selectable. */
.row.fe-depleted,
.row.fe-depleted:active {
  opacity: .38;
  filter: saturate(.55);
  cursor: default;
  transform: none;
}
.row.fe-depleted .row-sub { opacity: .9; }

/* Nothing picked yet means there is nothing to add. */
.btn[disabled] { opacity: .45; }

/* ---------- Summary strip is a layout, not a panel ----------
   .summary is just the grid holding the three counters, but it was
   swept up in the glass and depth rules, so it drew its own square box
   behind them — square because, being a layout wrapper, it never had a
   border radius. The cells are the panels; the grid is nothing. */
.summary {
  background: none;
  box-shadow: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* And the wrapper that holds the title with them keeps its own surface,
   so the counters don't end up sitting on two stacked panels. */
.tanks-head { background: none; box-shadow: none; padding: 0; }
.tanks-head .sum-cell {
  border-radius: var(--r-tile);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 1px 5px rgba(20, 49, 44, .08);
}

/* ---------- Photo grid ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.media-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: rgba(255, 255, 255, .4);
}
.media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.media-del {
  position: absolute;
  top: 4px; inset-inline-end: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(20, 49, 44, .55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

/* ---------- Patient file as one record ----------
   Identity, cycles, samples and medications are parts of one file, so
   they share one panel with plain dividers between them rather than each
   floating as its own card. */
.pf-card { padding: 14px; }

/* v244 — Patient-file actions use the same compact vertical rhythm as the
   other ICM menus. Keep the four glass actions visually close without
   changing their shared button size or press animation. */
.pf-card > .pf-action { margin-top: 7px; }
.pf-card > .pf-report { margin-top: 0; margin-bottom: 0; }

/* v249 — patient name lives directly inside the main patient-file glass panel;
   no separate nested box is used. */
.pf-patient-name {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px 16px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}


.pf-facts {
  background: none;
  box-shadow: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pf-section { margin-top: 14px; }
.pf-section .block-title {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 2px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* A hairline above each section after the first, so the parts read as
   sections of one card rather than a single run-on list. */
.pf-section + .pf-section,
.pf-facts + .pf-section {
  border-top: 1px solid rgba(255, 255, 255, .45);
  padding-top: 12px;
}

/* Rows inside the file sit on its panel, so they stay lighter than a
   standalone row would be. */
.pf-card .row {
  background: rgba(255, 255, 255, .44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 4px rgba(20, 49, 44, .07);
}

/* A stored sample needs its lines to wrap rather than be cut: the
   location and the quality are the two things this row exists to show,
   and an ellipsis in the middle of them makes the row pointless. */
.sample-block {
  align-items: flex-start;
  /* Lets the ⋯ button below sit in its own fixed corner, independent of
     the colour/Donate group -- both used to compete for the same
     auto-margin push, which meant colour+Donate never actually reached
     the row's true right edge; ⋯ always ended up further right of them
     instead. */
  position: relative;
}
/* ⋯ pinned to this row's own top-right corner, out of the flex flow
   entirely, so .pf-straw-actions (colour + Donate) is the only thing
   competing for that flex row's trailing edge -- and wins it outright. */
.sample-block > .tank-edit-btn {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  margin-inline-start: 0;
}
.sample-block .row-sub,
.sample-block .row-sub-2 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.sample-block .row-title {
  white-space: normal;
  /* Room for the now-corner-pinned ⋯ button so long titles don't wrap
     underneath it. */
  padding-inline-end: 34px;
}

/* Record survival has no ⋯ button at all -- the padding/wrap rule above
   was written for the patient-file straw list specifically, and this
   screen inheriting it (via the shared .sample-block class) left a long
   straw title free to wrap across several lines, overlapping the count
   input beside it instead of sitting on one line next to it. */
#view-survival .sample-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
}
#view-survival .sample-block .row-main {
  min-width: 0;
  width: 100%;
}
#view-survival .sample-block .row-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-end: 0;
  width: 100%;
}
#view-survival .sample-block .row-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
#view-survival .sv-input {
  width: 72px !important;
  max-width: 72px;
  min-width: 72px;
  box-sizing: border-box;
  flex: none;
  justify-self: end;
}

/* Thaw menu: post-thaw survival is a first-class queue, not a one-time
   confirmation-sheet action. */
#th-menu-panel {
  margin-bottom: 12px;
}
.th-survival-row {
  align-items: center;
}
.th-survival-badge {
  flex: 0 0 auto;
  max-width: 42%;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(76, 150, 117, .18);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Patient-file actions: all four actions use the same white glass surface.
   None is selected by default; the report action must not inherit the green
   primary-button treatment used elsewhere in the app. The shared class also
   keeps the four controls visually identical while preserving the app-wide
   press animation. */
.pf-action {
  background: rgba(255, 255, 255, .34);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    0 2px 10px rgba(20, 49, 44, .09);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}
.pf-action:active {
  background: rgba(255, 255, 255, .48);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pf-action { background: rgba(255, 255, 255, .82); }
}

/* The report button leads the file: it is the deliverable, and burying
   it under the record would mean scrolling past everything to reach it. */
.pf-report {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 14px;
}
.pf-report-icon {
  width: 24px;
  height: 31px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 3px;
}

/* ---------- Case notes ----------
   A thread, not a form: who said it and when sits above the text, and a
   reply is indented under what it answers. */
.note-row { align-items: flex-start; }
.note-who { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.note-body { white-space: normal; font-weight: 400; }
.note-row.is-reply { margin-inline-start: 22px; background: rgba(255, 255, 255, .34); }
.note-reply {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12.5px;
  padding: 2px 6px;
}

/* Drawn icons in the bar need a size, where an emoji took its size from
   the font. Slightly larger than the tile icons because the bar is the
   one place they stand alone without a label. */
.tab-ico svg { width: 30px; height: 30px; }
.tab.is-on .tab-ico svg { color: var(--accent); }

.pf-edit { margin-bottom: 0; }

/* ---------- Menu icons as pastel tiles ----------
   A rounded square per menu item, coloured by area. The glyph takes the
   tile's own deep tone through currentColor, so the pair always comes
   from one hue and a new family needs only two values.

   Pastel rather than saturated: these sit on a photograph, and at full
   strength thirty of them turned the home screen into a colour chart.
   The glyph is deep enough to stay legible on its own tile — each pair
   was checked for contrast rather than picked by eye. */
.tile-ico {
  /* carried over from the base rule: without it the tile is squeezed by
     a long label instead of holding its size */
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, var(--fam-a), var(--fam-b));
  color: var(--fam-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 1px 4px rgba(20, 49, 44, .12);
}
.tile-ico svg { width: 30px; height: 30px; }

/* v554 — Embryo Transfer uses the dedicated uterus + embryo artwork in the same pale-green family as lab menu icons.
   The tile itself keeps the exact same glass surface, size and spacing as
   every other home-menu tile; only the artwork inside the icon slot changes. */
.tile-ico .embryo-transfer-menu-icon {
  width: 46px;
  height: 34px;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}


.fam-daily   { --fam-a: #DCE9FB; --fam-b: #C7DBF6; --fam-ink: #2C5A96; }
.fam-lab     { --fam-a: #D6EFE6; --fam-b: #BFE4D6; --fam-ink: #0F5F4C; }
.fam-store   { --fam-a: #DEE1F7; --fam-b: #CBD0F0; --fam-ink: #3A4593; }
.fam-admin   { --fam-a: #FAE7CC; --fam-b: #F5D9AF; --fam-ink: #8A5510; }
.fam-support { --fam-a: #EDE4F7; --fam-b: #DFD2EF; --fam-ink: #59407F; }
.fam-neutral { --fam-a: #E6ECEA; --fam-b: #D7E0DD; --fam-ink: #3D4F4B; }

/* An emoji fallback (a menu item with no drawn glyph) should not be
   squeezed into the icon box's colour — it keeps its own. */
.tile-ico:not(:has(svg)):not(:has(img)) {
  background: rgba(255, 255, 255, .5);
  font-size: 22px;
}

/* The bar keeps plain glyphs: a row of coloured tiles down there would
   compete with the menu rather than sit under it. */
.tab-ico {
  width: auto; height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--muted);
}
.tab.is-on .tab-ico { color: var(--accent); }

/* ---------- One tile colour ----------
   Every menu icon now shares the same pale green instead of a colour per
   area. Declared as the family variables so the per-family rules above
   still resolve — the grouping stays in the markup and can be turned
   back on by restoring those values, without touching the JS. */
.fam-daily, .fam-lab, .fam-store,
.fam-admin, .fam-support, .fam-neutral {
  --fam-a: #DCEFE7;
  --fam-b: #C8E5D9;
  --fam-ink: #0F5F4C;
}

/* ---------- Bar icons, matched and larger ----------
   All four are drawn on the same 48 grid now, so one size applies to
   all of them and they carry equal weight. Up from 30px. */
.tab-ico svg { width: 38px; height: 38px; }

/* ---------- Bar icon sizes ----------
   Home is the anchor of the bar and sits in the middle, so it carries
   more weight than the three around it. Sized per-icon rather than with
   one rule, because they are no longer meant to match. */
.tab-ico svg { width: 42px; height: 42px; }
.tab[data-view="home"] .tab-ico svg { width: 48px; height: 48px; }
/* Search and the AI assistant one step up from the shared 42px, closer
   to Home and Schedule's size instead of visibly smaller beside them. */
.tab[data-view="search"] .tab-ico svg,
.tab[data-action="ai"] .tab-ico svg { width: 46px; height: 46px; }

/* Fridays and fixed national holidays in the date picker. The selected
   day keeps its solid accent: being chosen matters more than being a
   day off, and white on green stays readable either way. */
.dp-d.is-off { color: #C0392B; }
.dp-d.is-off.is-on { color: #FFFFFF; }
.dp-w.is-off { color: #C0392B; }

/* Sits on the tank card (itself a button) without triggering it --
   the click handler stops propagation before it reaches the card. */
.tank-edit-btn {
  margin-inline-start: auto;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 8px;
}

.sv-input {
  width: 56px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 8px 4px;
  font-size: 15px;
}

.pgd-toggle { display: flex; gap: 8px; }
.pgd-toggle .chip-pick { flex: 1; text-align: center; }

/* A selectable row that keeps the .row card layout (multi-line straw
   detail) instead of .chip-pick's pill shape, which collapsed and
   distorted a row this long -- the actual cause of the straw picker
   looking unclickable. Highlighted by border and tint, not by becoming
   a different shape. */

/* v387 — frozen/thawed straw lifecycle
   Frozen storage rows are read-only: no donation/edit affordance is shown.
   Thaw history gets a small red rotated THAWED seal, like a physical lab
   stamp, kept deliberately small so it reads as a status mark rather than
   a large badge. */
.pf-frozen-locked {
  cursor: default;
}
.pf-frozen-locked:active {
  background: rgba(255, 255, 255, .44);
}
/* An active (not-yet-thawed) straw card is now itself the entry point
   for thaw/move/transfer -- tappable like any other row, with the same
   press feedback the rest of the app already uses. */
.pf-straw-active {
  cursor: pointer;
}
.pf-straw-active:active {
  background: var(--tint);
}
.pf-frozen-badge {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  opacity: .82;
}
.thawed-stamp {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 28px;
  padding: 0 7px;
  border: 2px solid #c62828;
  border-radius: 7px;
  color: #c62828;
  background: rgba(255,255,255,.22);
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .45px;
  line-height: 1;
  transform: rotate(-13deg);
  box-shadow: inset 0 0 0 1px rgba(198,40,40,.16);
  opacity: .92;
}
.pf-thaw-history-row {
  overflow: hidden;
}

.th-straw-row {
  cursor: pointer;
  border-color: var(--line);
}
.th-straw-row.is-on {
  background: var(--tint);
  border-color: var(--accent);
}

.th-count-badge {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Must come after every earlier ".topbar { padding: ... }" shorthand
   rule in this file (the last one wins and a shorthand resets every
   side) -- reserves room so the avatar's flex siblings don't sit under
   it instead of beside it. */
.topbar {
  padding-inline-start: calc(var(--pad) + 64px);
}

/* Language / region preferences */
.pref-form { display:flex; flex-direction:column; gap:10px; }
.pref-select { width:100%; min-height:48px; padding:10px 12px; border-radius:14px; border:1px solid rgba(50,110,95,.22); background:rgba(255,255,255,.88); font:inherit; color:inherit; }
.pref-calendar { margin:0; padding:8px 10px; border-radius:12px; background:rgba(72,150,126,.10); }


/* ---------- Final navigation normalization (v139) ----------
   Five equal cells, Search physically on the left, and every drawn icon
   uses the same box/size. No icon gets a special larger size. */
.tabbar {
  direction: ltr;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tab {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  gap: 3px;
  padding: 7px 1px 9px;
  font-size: 10.5px;
  line-height: 1.2;
}
.tab-ico {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  font-size: 18px;
  line-height: 1;
}
.tab-ico svg,
.tab[data-view="home"] .tab-ico svg,
.tab[data-view="search"] .tab-ico svg,
.tab[data-action="ai"] .tab-ico svg {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px;
  max-height: 36px;
}
.tab > span:last-child {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---------- Navigation polish (v140) ---------- */
.tabbar {
  column-gap: 0 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.tab {
  gap: 1px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.tab-ico svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Unified navigation icon weight (v141) ---------- */
.tab-ico svg {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.tab-ico {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tab {
  gap: 1px !important;
}

/* v142: subtle emoji treatment for recent patients, inbox and support messages */
.menu-group .tile-ico {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
}
.menu-group .tile[data-key*="recent"] .tile-ico,
.menu-group .tile[data-key*="inbox"] .tile-ico,
.menu-group .tile[data-key*="support"] .tile-ico {
  font-size: 0.92em !important;
  transform: scale(0.92);
  transform-origin: center;
}

/* Patient search navigation icon supplied by the clinic UI. */
.tab[data-view="search"] .patient-search-nav-icon {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}


/* v144 — clinical entry cards breathe a little between the patient facts
   and the editable form. */
.case-form-panel {
  margin-top: 14px;
}

/* v144 — keep the clinic-schedule navigation glyph slightly smaller,
   while the other navigation icons retain their common size. */
.tab[data-view="schedule"] .tab-ico svg {
  width: 31px !important;
  height: 31px !important;
  max-width: 31px !important;
  max-height: 31px !important;
}

/* v144 — patient-search icon: a little more visual weight, matching the
   neighboring navigation line icons without becoming heavy. */
.tab[data-view="search"] .patient-search-nav-icon {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}

/* Transfer-day quality workflow: keep the patient facts, quality form,
   recorded groups and PGD block visually separated. */
#view-fet-transfer .facts { margin-bottom: 12px; }
#view-fet-transfer .list-panel + .btn { margin-top: 10px; }
#view-fet-transfer .fet-pgd-panel { margin-top: 12px; }
#view-fet-transfer .note { margin-top: 10px; }

/* Embryology consumables inventory */
.inventory-panel .row-inline { gap: 12px; }
.inventory-row { min-height: 62px; }
.inventory-row .row-side { font-weight: 700; }
.inventory-row .row-side.is-alert { color: #a33; }
.inventory-row .row-side.is-caution { color: #8a6a18; }
.inventory-adjust-sheet { display: grid; gap: 10px; }
.inventory-adjust-sheet p { margin: 0 0 4px; font-weight: 700; }
.sheet-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(40,70,60,.18); background: rgba(255,255,255,.72); font: inherit; }
#inventory-summary { margin: 12px 0 16px; }

/* Embryology inventory: keep the new management tile in the same minimal,
   line-icon language as the existing clinical tiles. */
.tile[data-key="embryology_inventory"] .tile-ico svg { width: 32px; height: 32px; }
.inventory-panel { margin-bottom: 16px; }
#view-embryology-inventory .list-panel + .list-panel { margin-top: 16px; }


/* v149 — Embryology Inventory visual system: all entry controls use the
   same rounded, single-level treatment as the existing clinical forms.
   No square corners or mixed field heights inside this workflow. */
#view-embryology-inventory {
  --inventory-field-radius: 16px;
}
#view-embryology-inventory .list-panel.form-panel {
  padding: 14px;
  border-radius: var(--r-card);
}
#view-embryology-inventory .field {
  margin-bottom: 14px;
}
#view-embryology-inventory .row-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
#view-embryology-inventory input[type="text"],
#view-embryology-inventory input[type="number"],
#view-embryology-inventory select,
#view-embryology-inventory .field-with-btn input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--inventory-field-radius);
  padding: 13px 14px;
  background: rgba(255,255,255,.58);
  outline: none;
  font: inherit;
}
#view-embryology-inventory .field-with-btn {
  width: 100%;
  gap: 8px;
}
#view-embryology-inventory .field-with-btn input {
  flex: 1 1 auto;
  min-width: 0;
}
#view-embryology-inventory .date-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 14px;
}
#view-embryology-inventory input:focus,
#view-embryology-inventory select:focus {
  border-color: var(--accent);
}
#view-embryology-inventory .panel-note {
  margin-top: 0;
  margin-bottom: 12px;
}
#view-embryology-inventory .form-panel > .note:not(.panel-note) {
  margin: 0 2px 14px;
}
#view-embryology-inventory .btn-wide {
  margin-top: 4px;
}
#view-embryology-inventory .list-panel + .list-panel {
  margin-top: 16px;
}
@media (max-width: 420px) {
  #view-embryology-inventory .row-inline {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* v150 — ET results and donor bank keep the same compact, rounded clinical
   row language used throughout the app. */
#view-et-results .searchbar, #view-donor-bank .searchbar { margin-bottom: 12px; }
#view-et-results .form-panel { margin-top: 14px; }
#view-et-results textarea { width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--line); padding: 12px 14px; font: inherit; background: var(--surface); resize: vertical; }
.donor-bank-recipients { margin-top: 6px; line-height: 1.55; }

/* Donor Bank: keep the add workflow aligned with the app's standard form language. */
#view-donor-bank .view-head { align-items: center; gap: 10px; }
#view-donor-bank .view-head .btn { flex: 0 0 auto; }
#view-donor-bank .form-panel { margin: 12px 0 16px; }
#view-donor-bank .list-panel .list-panel { margin-top: 8px; }

/* v153 — Donor Bank layout: search first, then a quiet full-width add action. */
#view-donor-bank .donor-add-btn {
  width: 100%;
  margin: 0 0 14px;
  border-radius: 14px;
}
#view-donor-bank .form-panel {
  margin: 0 0 16px;
}
#view-donor-bank .form-panel .field {
  margin-bottom: 14px;
}

/* v155 — Donor Bank doctor selector: add-new is a native dropdown option. */
#view-donor-bank #donor-form-new-doctor {
  margin-top: 10px;
}

/* Embryology Inventory: dedicated navigation row */
.inventory-nav-row {
  grid-column: 1 / -1;
  width: 100%;
}

/* v158: Embryology Inventory is always a dedicated full-width navigation row. */
.menu-group .grid .inventory-nav-tile {
  grid-column: 1 / -1;
  width: 100%;
}

/* ICM v158 — embryology inventory */
.inventory-tabs{display:flex;gap:8px;overflow:auto;padding:4px 0 12px;position:sticky;top:0;z-index:3;background:inherit}
.inventory-tabs .chip-pick{white-space:nowrap;font-size:13px}
.inventory-tab.hidden{display:none}
.inventory-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.inventory-pick-card{border:1px solid var(--line,#ddd);border-radius:14px;padding:12px;background:var(--card,#fff);text-align:start;min-height:58px}
.inventory-pick-card strong{display:block;font-size:14px}
.inventory-pick-card span{display:block;font-size:12px;opacity:.65;margin-top:4px}
.inventory-pick-card.is-selected{outline:2px solid currentColor}
.inventory-selected{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 14px}
.inventory-selected-chip{border-radius:999px;padding:7px 10px;border:1px solid var(--line,#ddd);font-size:13px}
.inventory-selected-chip button{border:0;background:transparent;margin-inline-start:5px;font-size:16px}
.inventory-selection-title{font-weight:700;margin-top:14px}
.inventory-media-recipe-form{border-top:1px solid var(--line,#ddd);margin-top:14px;padding-top:14px}


/* ICM v160 — inventory summary redesign */
#inventory-summary.inventory-summary,
#inventory-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}
.inventory-summary-card{
  min-height:92px;
  padding:12px 10px;
  border:1px solid var(--glass-line,rgba(20,49,44,.12));
  border-radius:var(--r-tile,16px);
  background:rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 2px 10px rgba(20,49,44,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.inventory-summary-icon{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  margin-bottom:5px;
  font-size:14px;font-weight:700;
  background:rgba(255,255,255,.62);
  color:var(--ink);
}
.inventory-summary-value{font-size:23px;font-weight:700;line-height:1.15}
.inventory-summary-label{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap}
.inventory-procedure-row.is-system{
  cursor:default;
}
.inventory-procedure-row.is-system .row-main span{
  font-size:11px;
  color:var(--muted);
}
@media (max-width:560px){
  #inventory-summary.inventory-summary,
  #inventory-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .inventory-summary-card{min-height:82px;padding:10px 8px}
  .inventory-summary-value{font-size:21px}
}

/* ICM v160 — inventory procedure rows are clearly actionable only for custom procedures */
.inventory-procedure-row:not(.is-system){cursor:pointer;}
.inventory-procedure-row:not(.is-system):active{background:var(--tint);}
.inventory-procedure-row .inventory-procedure-edit{min-width:64px;padding:8px 10px;}
.inventory-procedure-row.is-system{cursor:default;}

/* v161 — Inventory expiry dates use the same glass date-field treatment as
   the rest of the app, while remaining explicitly Gregorian. */
#view-embryology-inventory .field-with-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}
#view-embryology-inventory .field-with-btn input[data-gregorian-date] {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#view-embryology-inventory .field-with-btn .date-btn {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

/* ICM v162 — direct procedure consumption action */
.inventory-procedure-row .procedure-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.inventory-procedure-row .inventory-procedure-consumption{font-size:12px}
@media (max-width:560px){.inventory-procedure-row .procedure-actions{width:100%;justify-content:flex-start;margin-top:7px}.inventory-procedure-row{flex-wrap:wrap}}


/* ICM v163 — inventory tabs: stable 2×2 layout on every screen */
#view-embryology-inventory .inventory-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(46px,auto);
  gap:10px;
  width:100%;
  align-items:stretch;
}
#view-embryology-inventory .inventory-tabs .chip-pick{
  width:100%;
  min-width:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#view-embryology-inventory .inventory-procedure-row{
  min-height:48px;
  cursor:default;
}
#view-embryology-inventory .inventory-procedure-row:not(.is-system){cursor:pointer;}
#view-embryology-inventory .inventory-procedure-row .row-main{width:100%;}
#view-embryology-inventory .inventory-procedure-row .row-main span,
#view-embryology-inventory .inventory-procedure-row .procedure-actions,
#view-embryology-inventory .inventory-procedure-row .inventory-procedure-consumption,
#view-embryology-inventory .inventory-procedure-row .inventory-procedure-edit{display:none!important;}
@media (max-width:560px){
  #view-embryology-inventory .inventory-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #view-embryology-inventory .inventory-tabs .chip-pick{min-height:44px;padding:8px 6px;}
}


/* ICM v164 — consumable quantity controls: minus / count / plus */
#view-embryology-inventory .inventory-picker{grid-template-columns:1fr;gap:8px;}
#view-embryology-inventory .inventory-pick-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:62px;
  padding:10px 12px;
  text-align:start;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
#view-embryology-inventory .inventory-pick-card.is-selected{
  outline:none;
  border-color:currentColor;
  background:rgba(90,150,110,.13);
  box-shadow:0 0 0 1px currentColor inset;
}
#view-embryology-inventory .inventory-pick-main{min-width:0;flex:1 1 auto;}
#view-embryology-inventory .inventory-pick-main strong{display:block;font-size:14px;line-height:1.35;}
#view-embryology-inventory .inventory-pick-main span{display:block;font-size:12px;opacity:.65;margin-top:3px;}
#view-embryology-inventory .inventory-qty-control{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  direction:ltr;
}
#view-embryology-inventory .inventory-qty-btn{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--line,#ddd);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  font-size:21px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#view-embryology-inventory .inventory-qty-btn:disabled{opacity:.35;cursor:default;}
#view-embryology-inventory .inventory-qty-value{
  min-width:28px;
  text-align:center;
  font-size:16px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  #view-embryology-inventory .inventory-pick-card{min-height:60px;padding:9px 10px;}
  #view-embryology-inventory .inventory-qty-btn{width:32px;height:32px;}
}


/* ICM v165 — Procedure Consumption: consumables box belongs below Add media consumption */
#view-embryology-inventory .inventory-consumables-box{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line,#ddd);
  border-radius:16px;
  background:rgba(255,255,255,.34);
}
#view-embryology-inventory .inventory-consumables-box > .inventory-selection-title:first-child{
  margin-top:0;
  margin-bottom:8px;
}
#view-embryology-inventory .inventory-consumables-box .inventory-selected-title{
  margin-top:14px;
}


/* ICM v166 — clearer inventory master lists and field guidance */
#view-embryology-inventory .inventory-help{
  margin:6px 0 14px; padding:10px 12px; border-radius:12px;
  background:var(--tint,#f5f7fa); color:var(--muted,#667085);
  font-size:12px; line-height:1.8;
}
#view-embryology-inventory .inventory-master-actions{
  display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; margin-top:6px;
}
#view-embryology-inventory .inventory-master-actions .btn{font-size:12px; padding:6px 9px;}
#view-embryology-inventory .inventory-row .row-side,
#view-embryology-inventory #inventory-media-list .row-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
}
@media (max-width:560px){
  #view-embryology-inventory .inventory-master-actions{justify-content:flex-start;}
  #view-embryology-inventory .inventory-row .row-side,
  #view-embryology-inventory #inventory-media-list .row-side{align-items:flex-start;}
}

/* ICM v563 — professional admin dashboard */
#view-dashboard{padding-top:12px;}
#view-dashboard .dashboard-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 16px;margin-bottom:14px;border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(227,241,238,.30));
  border:1px solid rgba(255,255,255,.68);
  box-shadow:var(--glass-edge),0 8px 26px rgba(20,49,44,.08);
  -webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);
}
#view-dashboard .dashboard-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--accent);opacity:.82;margin-bottom:2px;}
#view-dashboard .dashboard-hero .view-title{font-size:24px!important;line-height:1.2;margin:0 0 5px!important;background:none!important;padding:0!important;}
#view-dashboard .dashboard-hero-note{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:520px;}
#view-dashboard .dashboard-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(14,124,107,.10);border:1px solid rgba(14,124,107,.13);color:var(--accent);font-size:11px;font-weight:700;}
#view-dashboard .dashboard-live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(14,124,107,.10);}
#view-dashboard .dashboard-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px;}
#view-dashboard .dashboard-card{min-height:94px;position:relative;align-items:flex-start;justify-content:center;text-align:left;padding:14px 15px;border-radius:20px;background:rgba(255,255,255,.43);border:1px solid rgba(255,255,255,.64);box-shadow:var(--glass-edge),0 5px 18px rgba(20,49,44,.07);overflow:hidden;}
#view-dashboard .dashboard-card:before{content:"";position:absolute;inset:auto -12px -24px auto;width:72px;height:72px;border-radius:50%;background:rgba(14,124,107,.08);}
#view-dashboard .dashboard-card strong{font-size:28px;line-height:1;font-weight:700;position:relative;}
#view-dashboard .dashboard-card span{font-size:12px;opacity:.70;margin-top:7px;position:relative;}
#view-dashboard .dashboard-block{margin-top:12px;}
#view-dashboard .dashboard-block .block-title{font-size:15px;font-weight:700;margin:0 0 9px;padding:0 3px;background:none!important;}
#view-dashboard .dashboard-row{min-height:58px;padding:12px 14px;border-radius:17px;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.55);box-shadow:var(--glass-edge);margin-bottom:8px;}
#view-dashboard .dashboard-row .row-main strong{font-size:13px;}
#view-dashboard .dashboard-row .row-side strong{font-size:18px;}
#view-dashboard .dashboard-patient-row{min-height:58px;padding:11px 14px;border-radius:17px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.50);margin-bottom:8px;}
@media (min-width:700px){#view-dashboard .dashboard-kpis{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (max-width:430px){#view-dashboard .dashboard-hero{padding:16px 15px;}#view-dashboard .dashboard-live{padding:5px 8px;}#view-dashboard .dashboard-card{min-height:88px;}}

/* v573 — dashboard queue scroll chaining: when an inner queue reaches its
   top/bottom edge, the same touch gesture is allowed to continue scrolling
   the dashboard instead of being trapped by the inner scroller. */
#view-dashboard #dashboard-attention,
#view-dashboard #dashboard-recent{
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

/* ICM v167 — admin dashboard and performance */
.dashboard-kpis,.performance-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
.dashboard-card,.performance-card{min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;}
.dashboard-card strong,.performance-card strong{font-size:24px;line-height:1.05;}
.dashboard-card span,.performance-card span{font-size:12px;opacity:.78;}
.dashboard-block,.performance-block{margin-top:14px;}
.dashboard-row{min-height:48px;}
.dashboard-row .row-side strong{font-size:18px;}
.dashboard-row.warn{border-color:rgba(210,150,30,.42);}
.dashboard-row.danger{border-color:rgba(190,70,70,.42);}
.dashboard-patient-row{width:100%;text-align:inherit;border:0;cursor:pointer;}
.performance-periods{margin:10px 0 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.performance-periods .chip-pick{width:100%;min-width:0;margin:0;}
@media (min-width:700px){
  .dashboard-kpis,.performance-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
}


/* ICM v168 — Performance: three period boxes above one unified glass KPI panel */
#view-performance .performance-periods{
  display:grid;
  grid-template-columns:1fr 1.55fr 1fr;
  gap:10px;
  width:100%;
  align-items:stretch;
  margin:14px 0 12px;
}
#view-performance .performance-period-box{
  min-width:0;
  min-height:58px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px 12px;
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  color:inherit;
  text-align:center;
  font:inherit;
}
#view-performance button.performance-period-box{cursor:pointer;}
#view-performance .performance-period-box.is-on{
  border-color:rgba(72,150,126,.52);
  background:rgba(72,150,126,.13);
}
#view-performance .performance-period-box strong{display:block;font-size:13px;line-height:1.25;}
#view-performance .performance-custom-box{display:flex;flex-direction:column;justify-content:center;gap:7px;}
#view-performance .performance-date-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:end;}
#view-performance .performance-date-field{text-align:start;min-width:0;}
#view-performance .performance-date-field label{display:block;font-size:10px;color:var(--muted);margin:0 2px 4px;}
#view-performance .performance-date-field .field-with-btn{gap:4px;}
#view-performance .performance-date-field input{width:100%;min-width:0;height:38px;padding:7px 8px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:inherit;font-size:11px;}
#view-performance .performance-date-field .date-btn{flex:0 0 34px;width:34px;height:38px;min-width:34px;border-radius:11px;padding:0;background:rgba(255,255,255,.62);}
#view-performance .performance-date-separator{font-size:11px;color:var(--muted);padding-bottom:11px;white-space:nowrap;}
#view-performance .performance-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 30px rgba(0,0,0,.04);
}
#view-performance .performance-kpis .performance-card{
  min-width:0;min-height:78px;padding:12px 7px;border:0;border-radius:14px;background:transparent;box-shadow:none;
}
#view-performance .performance-kpis .performance-card strong{font-size:23px;line-height:1.1;}
#view-performance .performance-kpis .performance-card span{font-size:10px;line-height:1.25;}
#view-performance .performance-range-hint{grid-column:1/-1;text-align:center;padding:18px 10px;color:var(--muted);font-size:12px;}
@media (max-width:700px){
  #view-performance .performance-periods{grid-template-columns:1fr 1.35fr 1fr;gap:7px;}
  #view-performance .performance-period-box{padding:9px 7px;}
  #view-performance .performance-date-range{grid-template-columns:1fr;gap:4px;}
  #view-performance .performance-date-separator{display:none;}
  #view-performance .performance-date-field label{font-size:9px;}
  #view-performance .performance-date-field input{height:34px;font-size:10px;}
  #view-performance .performance-date-field .date-btn{height:34px;width:30px;min-width:30px;}
  #view-performance .performance-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:420px){
  #view-performance .performance-periods{grid-template-columns:1fr 1.2fr 1fr;}
  #view-performance .performance-period-box strong{font-size:11px;}
}

/* ICM v169 — statistical Performance analysis */
#view-performance .performance-periods{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:10px;margin:10px 0 14px;}
#view-performance .performance-period-box{min-height:72px;border:1px solid rgba(255,255,255,.42);border-radius:20px;padding:10px 12px;background:rgba(255,255,255,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(40,70,100,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
#view-performance button.performance-period-box{cursor:pointer;}
#view-performance .performance-period-box.is-on{border-color:rgba(70,130,180,.45);background:rgba(225,241,250,.68);box-shadow:0 9px 26px rgba(50,100,140,.12);}
#view-performance .performance-period-icon{font-size:18px;opacity:.72;line-height:1;}
#view-performance .performance-period-box strong{font-size:12px;line-height:1.25;}
#view-performance .performance-custom-box{cursor:default;}
#view-performance .performance-date-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:end;width:100%;}
#view-performance .performance-date-field{text-align:start;min-width:0;}
#view-performance .performance-date-field label{display:block;font-size:9px;color:var(--muted);margin:0 2px 3px;}
#view-performance .performance-date-field input{width:100%;min-width:0;height:34px;padding:6px 7px;border-radius:11px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:inherit;font-size:10px;}
#view-performance .performance-date-separator{font-size:10px;color:var(--muted);padding-bottom:9px;white-space:nowrap;}
#view-performance .performance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid rgba(255,255,255,.48);border-radius:24px;background:rgba(255,255,255,.42);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(40,70,100,.08);margin-bottom:14px;}
#view-performance .performance-kpis .performance-card{min-height:82px;border:0;border-radius:0;background:transparent;box-shadow:none;border-right:1px solid rgba(120,150,170,.16);border-bottom:1px solid rgba(120,150,170,.16);display:flex;align-items:center;justify-content:center;text-align:center;gap:5px;padding:10px;}
#view-performance .performance-kpis .performance-card:nth-child(4n){border-right:0;}
#view-performance .performance-kpis .performance-card strong{font-size:22px;line-height:1.05;}
#view-performance .performance-kpis .performance-card span{font-size:10px;line-height:1.25;opacity:.75;}
#view-performance .performance-analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
#view-performance .performance-analysis-card,#view-performance .performance-filters-block{border:1px solid rgba(255,255,255,.48);border-radius:24px;background:rgba(255,255,255,.43);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(40,70,100,.07);padding:16px;}
#view-performance .performance-analysis-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#view-performance .performance-analysis-head .block-title{margin:0 0 3px;font-size:15px;}
#view-performance .performance-analysis-note{margin:0;color:var(--muted);font-size:10px;line-height:1.4;}
#view-performance .performance-rate{font-size:29px;font-weight:800;letter-spacing:-.5px;white-space:nowrap;}
#view-performance .performance-rate-detail{margin-top:12px;padding-top:10px;border-top:1px solid rgba(120,150,170,.16);font-size:11px;color:var(--muted);}
#view-performance .performance-filter-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
#view-performance .performance-filter-title-row .block-title{margin:0 0 3px;font-size:15px;}
#view-performance .performance-filter-title-row .btn{flex:0 0 auto;}
#view-performance .performance-filter-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#view-performance .performance-filter-group{padding:11px;border:1px solid rgba(255,255,255,.44);border-radius:18px;background:rgba(255,255,255,.28);}
#view-performance .performance-filter-group h3{font-size:11px;margin:0 0 8px;}
#view-performance .performance-filter-options{display:flex;flex-wrap:wrap;gap:7px;}
#view-performance .performance-filter-option{border:1px solid rgba(120,150,170,.18);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.48);font:inherit;font-size:10px;cursor:pointer;transition:.18s ease;}
#view-performance .performance-filter-option.is-on{border-color:rgba(60,125,175,.45);background:rgba(210,236,249,.82);box-shadow:0 5px 14px rgba(60,120,160,.10);font-weight:700;}
@media(max-width:700px){
  #view-performance .performance-periods{grid-template-columns:1fr 1.35fr 1fr;gap:7px;}
  #view-performance .performance-period-box{min-height:68px;padding:8px 6px;border-radius:17px;}
  #view-performance .performance-period-box strong{font-size:10px;}
  #view-performance .performance-date-range{grid-template-columns:1fr;gap:3px;}
  #view-performance .performance-date-separator{display:none;}
  #view-performance .performance-date-field input{height:31px;font-size:9px;}
  #view-performance .performance-kpis{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px;}
  #view-performance .performance-kpis .performance-card:nth-child(4n){border-right:1px solid rgba(120,150,170,.16);}
  #view-performance .performance-kpis .performance-card:nth-child(2n){border-right:0;}
  #view-performance .performance-analysis-grid{grid-template-columns:1fr;}
  #view-performance .performance-filter-groups{grid-template-columns:1fr;gap:9px;}
}


/* ICM v170 — compact Performance KPI layout, green glass selection, consistent app back navigation */
#view-performance .performance-period-box.is-on{
  border-color:rgba(72,150,126,.50)!important;
  background:rgba(198,232,216,.68)!important;
  box-shadow:0 8px 22px rgba(60,130,105,.10), inset 0 1px 0 rgba(255,255,255,.78)!important;
}
#view-performance .performance-filter-option.is-on{
  border-color:rgba(72,150,126,.50)!important;
  background:rgba(198,232,216,.72)!important;
  box-shadow:0 5px 14px rgba(60,130,105,.10)!important;
}
#view-performance .performance-kpis{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  padding:7px!important;
  border-radius:22px!important;
}
#view-performance .performance-kpis .performance-card{
  min-height:64px!important;
  padding:7px 5px!important;
  gap:3px!important;
}
#view-performance .performance-kpis .performance-card strong{
  font-size:19px!important;
  line-height:1.05!important;
}
#view-performance .performance-kpis .performance-card span{
  font-size:9px!important;
  line-height:1.2!important;
}
#view-performance .performance-kpis .performance-card:nth-child(3n){border-right:0!important;}
#view-performance .performance-kpis .performance-card:nth-child(4n){border-right:1px solid rgba(120,150,170,.16)!important;}
@media(max-width:700px){
  #view-performance .performance-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important;padding:6px!important;}
  #view-performance .performance-kpis .performance-card{min-height:60px!important;padding:6px 3px!important;}
  #view-performance .performance-kpis .performance-card strong{font-size:17px!important;}
  #view-performance .performance-kpis .performance-card span{font-size:8px!important;}
  #view-performance .performance-kpis .performance-card:nth-child(3n){border-right:0!important;}
  #view-performance .performance-kpis .performance-card:nth-child(4n){border-right:1px solid rgba(120,150,170,.16)!important;}
}

/* ICM v173 — Performance scroll optimization, larger typography, equal spacing */
#view-performance .performance-periods{
  gap:12px!important;
  margin:10px 0 14px!important;
}
#view-performance .performance-period-box{
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 6px 18px rgba(40,70,100,.055)!important;
  contain:layout paint;
}
#view-performance .performance-period-box strong{font-size:13px!important;line-height:1.3!important;}
#view-performance .performance-date-field label{font-size:10px!important;}
#view-performance .performance-date-field input{font-size:11px!important;}
#view-performance .performance-kpis{
  grid-auto-rows:minmax(68px,auto)!important;
  box-shadow:0 7px 22px rgba(40,70,100,.055)!important;
  margin-bottom:14px!important;
  contain:layout paint;
}
#view-performance .performance-kpis .performance-card{
  min-height:68px!important;
  padding:8px 6px!important;
}
#view-performance .performance-kpis .performance-card strong{font-size:20px!important;line-height:1.08!important;}
#view-performance .performance-kpis .performance-card span{font-size:10px!important;line-height:1.25!important;}
#view-performance .performance-analysis-grid{
  gap:12px!important;
  row-gap:12px!important;
  margin-bottom:12px!important;
  align-items:stretch;
}
#view-performance .performance-analysis-card,
#view-performance .performance-filters-block{
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 7px 22px rgba(40,70,100,.055)!important;
  contain:layout paint;
}
#view-performance .performance-analysis-head .block-title,
#view-performance .performance-filter-title-row .block-title{font-size:16px!important;}
#view-performance .performance-analysis-note{font-size:11px!important;line-height:1.4!important;}
#view-performance .performance-rate{font-size:31px!important;}
#view-performance .performance-rate-detail{font-size:12px!important;}
#view-performance .performance-filter-groups{
  gap:12px!important;
  row-gap:12px!important;
}
#view-performance .performance-filter-group{
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  box-shadow:none!important;
  contain:layout paint;
}
#view-performance .performance-filter-group h3{font-size:12px!important;margin-bottom:9px!important;}
#view-performance .performance-filter-options{gap:8px!important;}
#view-performance .performance-filter-option{font-size:11px!important;padding:8px 12px!important;}

@media(max-width:700px){
  #view-performance .performance-periods{gap:8px!important;}
  #view-performance .performance-period-box strong{font-size:12px!important;}
  #view-performance .performance-kpis{grid-auto-rows:minmax(64px,auto)!important;}
  #view-performance .performance-kpis .performance-card{min-height:64px!important;padding:7px 4px!important;}
  #view-performance .performance-kpis .performance-card strong{font-size:18px!important;}
  #view-performance .performance-kpis .performance-card span{font-size:9px!important;}
  #view-performance .performance-analysis-grid{gap:12px!important;row-gap:12px!important;}
  #view-performance .performance-analysis-card,
  #view-performance .performance-filters-block{padding:14px!important;}
  #view-performance .performance-analysis-head .block-title,
  #view-performance .performance-filter-title-row .block-title{font-size:15px!important;}
  #view-performance .performance-rate{font-size:28px!important;}
}

/* ICM v173 — tighter spacing for Performance analysis cards */
#view-performance .performance-analysis-grid{
  gap:8px!important;
  row-gap:8px!important;
  margin-bottom:8px!important;
}
#view-performance .performance-analysis-grid .performance-analysis-card{
  margin-bottom:0!important;
}
#view-performance .performance-filters-block{
  margin-top:0!important;
}
@media(max-width:700px){
  #view-performance .performance-analysis-grid{
    gap:8px!important;
    row-gap:8px!important;
    margin-bottom:8px!important;
  }
}

/* ICM v174 — unified box spacing + larger Performance home tile */
:root{--app-box-gap:8px;}

/* Every top-level screen uses the same vertical rhythm. Nested grids/lists
   keep their own internal spacing; only sibling panels are normalized. */
.view{
  display:flex;
  flex-direction:column;
  gap:var(--app-box-gap);
}
.view > *{
  margin-top:0!important;
  margin-bottom:0!important;
}
#menu,#menu2,#menu3{
  display:flex;
  flex-direction:column;
  gap:var(--app-box-gap);
}
#menu .menu-group,#menu2 .menu-group,#menu3 .menu-group{
  margin-bottom:0!important;
}

/* v260 — Record embryos gets the same unified-panel treatment as
   Puncture/ICSI: title and description now sit inside the list's own
   box (.embryos-list-panel) instead of a separate glass box above it. */
#view-embryos .embryos-list-panel{
  margin-top:0;
  padding:12px;
}
#view-embryos .embryos-list-panel .view-head{
  margin:0 0 var(--app-box-gap);
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:block;
}
#view-embryos .embryos-list-panel .view-head .view-title{
  margin:0 0 4px;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:0;
}
#view-embryos .embryos-page-note{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
#view-embryos .embryos-list-panel .rows{
  display:grid;
  gap:var(--app-box-gap);
}

/* Performance header: title + explanatory line are one glass panel. */
#view-performance .performance-page-head{
  width:100%;
  align-items:stretch;
  gap:0;
}
#view-performance .performance-page-title-box{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:24px;
  background:rgba(255,255,255,.43);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 7px 22px rgba(40,70,100,.055);
}
#view-performance .performance-page-title-box .view-title{
  padding:0;
  margin:0 0 4px!important;
  background:none;
  border:0;
  box-shadow:none;
}
#view-performance .performance-page-note{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

/* Larger Performance tile on the home menu, with its descriptive line
   inside the same glass box. */
.menu-group .tile.performance-nav-tile{
  min-height:92px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:3px;
  text-align:start;
  align-content:center;
}
.menu-group .performance-nav-tile .tile-ico{
  grid-row:1 / span 2;
  align-self:center;
}
.menu-group .performance-nav-tile .tile-label{
  align-self:end;
  font-size:15px;
}
.menu-group .performance-nav-tile .tile-subtitle{
  display:block;
  align-self:start;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
  white-space:normal;
}

/* Performance panels follow the same global sibling gap as every other
   screen instead of carrying their older larger margins. */
#view-performance .performance-periods,
#view-performance .performance-kpis,
#view-performance .performance-analysis-grid,
#view-performance .performance-filters-block{
  margin-top:0!important;
  margin-bottom:0!important;
}
#view-performance .performance-analysis-grid{gap:var(--app-box-gap)!important;}
#view-performance .performance-analysis-grid .performance-analysis-card{margin:0!important;}
#view-performance .performance-filters-block{margin:0!important;}

@media(max-width:700px){
  .menu-group .tile.performance-nav-tile{min-height:88px;padding:11px 12px;}
  .menu-group .performance-nav-tile .tile-label{font-size:14px;}
  .menu-group .performance-nav-tile .tile-subtitle{font-size:9px;}
}


/* ICM v176 — home/admin polish and unified inventory overview */
/* Performance is a compact peer of Dashboard: no subtitle and never full-width. */
.menu-group .tile.performance-nav-tile{
  min-height:78px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  text-align:start!important;
}
.menu-group .tile.performance-nav-tile .tile-label{
  font-size:14px!important;
}
.menu-group .grid .tile[data-key="dashboard"],
.menu-group .grid .tile[data-key="performance"]{
  grid-row:1!important;
}
.menu-group .grid .tile[data-key="dashboard"]{grid-column:1!important;}
.menu-group .grid .tile[data-key="performance"]{grid-column:2!important;}

/* All five bottom-navigation buttons use the same selected glass treatment. */
.tab.is-on{
  background:rgba(126,190,165,.20)!important;
  color:#17624f!important;
  border-radius:18px!important;
}
.tab.is-on .tab-ico{color:#17624f!important;}
.tab.is-on > span:last-child{color:#17624f!important;}

/* Inventory title, intro and four KPI boxes share one glass container. */
#view-embryology-inventory .inventory-overview-card{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:24px;
  background:rgba(255,255,255,.43);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 7px 22px rgba(40,70,100,.055);
}
#view-embryology-inventory .inventory-overview-card .view-head{margin:0!important;}
#view-embryology-inventory .inventory-overview-card .view-title{
  margin:0 0 4px!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
#view-embryology-inventory .inventory-overview-card > .note{margin:0 0 10px!important;}
#view-embryology-inventory .inventory-overview-card #inventory-summary{
  margin:0!important;
}
@media(max-width:560px){
  .menu-group .tile.performance-nav-tile{min-height:72px!important;padding:9px 10px!important;}
  .menu-group .tile.performance-nav-tile .tile-label{font-size:13px!important;}
  #view-embryology-inventory .inventory-overview-card{padding:10px;}
}


/* ICM v178 — base v176 + navigation/title alignment polish */
/* Performance title sits centered like Dashboard while keeping the same compact tile. */
.menu-group .tile.performance-nav-tile{
  justify-content:center!important;
  text-align:center!important;
}
.menu-group .tile.performance-nav-tile .tile-label{
  text-align:center!important;
}

/* Bottom navigation: selection must not paint a background; all drawn icon
   outlines keep one neutral gray stroke, including the selected item. */
.tab.is-on{
  background:transparent!important;
  color:inherit!important;
  border-radius:0!important;
}
.tab.is-on .tab-ico,
.tab.is-on > span:last-child{
  color:inherit!important;
}
.tab .tab-ico svg,
.tab.is-on .tab-ico svg{
  stroke:#7b8584!important;
  color:#7b8584!important;
}

/* ICM v180 — glass refinement from v178
   "More glassy" here means clearer/more transparent: show more of the
   background image and use less blur, without changing layout or behavior. */
#view-performance .performance-period-box{
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
#view-performance .performance-period-box.is-on{
  background:rgba(225,241,250,.44);
}
#view-performance .performance-kpis,
#view-performance .performance-analysis-card,
#view-performance .performance-filters-block{
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
#view-performance .performance-filter-group{
  background:rgba(255,255,255,.20);
}
#view-performance .performance-filter-option{
  background:rgba(255,255,255,.34);
}
#view-embryology-inventory .inventory-overview-card{
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
}
#view-embryology-inventory .inventory-summary-card{
  background:rgba(255,255,255,.32);
}

/* ICM v181 — two more glass steps for the main Performance/Inventory boxes
   and raise the Performance label to the same vertical line as Dashboard. */
.menu-group .tile.performance-nav-tile{
  align-items:center!important;
  justify-content:center!important;
}
.menu-group .tile.performance-nav-tile .tile-label{
  align-self:center!important;
  transform:translateY(-4px)!important;
}
#view-performance .performance-page-title-box{
  background:rgba(255,255,255,.20)!important;
  backdrop-filter:blur(4px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(4px) saturate(145%)!important;
}
#view-embryology-inventory .inventory-overview-card{
  background:rgba(255,255,255,.20)!important;
  backdrop-filter:blur(3px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(145%)!important;
}

/* ICM v182 — fine alignment + one more glass step */
.menu-group .tile.performance-nav-tile .tile-label{
  transform:translateY(-2px)!important;
}
#view-performance .performance-page-title-box{
  background:rgba(255,255,255,.16)!important;
  backdrop-filter:blur(3px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(3px) saturate(145%)!important;
}
#view-embryology-inventory .inventory-overview-card{
  background:rgba(255,255,255,.16)!important;
  backdrop-filter:blur(2px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(2px) saturate(145%)!important;
}

/* ICM v183 — final fine alignment + one more glass step */
.menu-group .tile.performance-nav-tile .tile-label{
  transform:translateY(-1px)!important;
}
#view-performance .performance-page-title-box{
  background:rgba(255,255,255,.12)!important;
  backdrop-filter:blur(2px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(2px) saturate(145%)!important;
}
#view-embryology-inventory .inventory-overview-card{
  background:rgba(255,255,255,.12)!important;
  backdrop-filter:blur(1px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(1px) saturate(145%)!important;
}


/* ICM v184 — Performance typography + matching menu-entry animation
   Performance text is slightly larger, and the three admin root menus use
   the same gentle rise/fade entry feel as the main and tank menus. */
#view-performance .performance-page-title-box .view-title{font-size:22px!important;}
#view-performance .performance-page-note{font-size:12px!important;}
#view-performance .performance-period-box strong{font-size:14px!important;}
#view-performance .performance-date-field label{font-size:11px!important;}
#view-performance .performance-date-field input{font-size:12px!important;}
#view-performance .performance-kpis .performance-card strong{font-size:21px!important;}
#view-performance .performance-kpis .performance-card span{font-size:11px!important;}
#view-performance .performance-analysis-head .block-title,
#view-performance .performance-filter-title-row .block-title{font-size:17px!important;}
#view-performance .performance-analysis-note{font-size:12px!important;}
#view-performance .performance-rate-detail{font-size:13px!important;}
#view-performance .performance-filter-group h3{font-size:13px!important;}
#view-performance .performance-filter-option{font-size:12px!important;}

.view.admin-menu-entry{
  animation:admin-menu-view-in .62s cubic-bezier(.22,.61,.36,1) both;
}
.view.admin-menu-entry > *{
  animation:admin-menu-child-in .56s cubic-bezier(.22,.61,.36,1) both;
}
.view.admin-menu-entry > *:nth-child(1){animation-delay:.03s;}
.view.admin-menu-entry > *:nth-child(2){animation-delay:.08s;}
.view.admin-menu-entry > *:nth-child(3){animation-delay:.13s;}
.view.admin-menu-entry > *:nth-child(4){animation-delay:.18s;}
.view.admin-menu-entry > *:nth-child(5){animation-delay:.23s;}

@keyframes admin-menu-view-in{
  from{opacity:0;transform:translateY(9px);}
  to{opacity:1;transform:none;}
}
@keyframes admin-menu-child-in{
  from{opacity:0;transform:translateY(7px);}
  to{opacity:1;transform:none;}
}

@media(max-width:700px){
  #view-performance .performance-page-title-box .view-title{font-size:21px!important;}
  #view-performance .performance-period-box strong{font-size:13px!important;}
  #view-performance .performance-kpis .performance-card strong{font-size:19px!important;}
  #view-performance .performance-kpis .performance-card span{font-size:10px!important;}
  #view-performance .performance-analysis-head .block-title,
  #view-performance .performance-filter-title-row .block-title{font-size:16px!important;}
  #view-performance .performance-filter-option{font-size:11px!important;}
}

@media(prefers-reduced-motion:reduce){
  .view.admin-menu-entry,
  .view.admin-menu-entry > *{animation:none!important;}
}

/* ICM v185 — Excel Reports + Users & Staff, matching the existing glass language. */
.report-page-title-box,.users-overview-card,.users-actions-card,.report-overview-card{background:rgba(255,255,255,.20);backdrop-filter:blur(4px) saturate(145%);-webkit-backdrop-filter:blur(4px) saturate(145%);border:1px solid rgba(255,255,255,.18);border-radius:20px;}
.report-page-title-box{padding:14px 16px;margin-bottom:10px}.report-page-note,.report-note{margin:5px 0 0;opacity:.78;font-size:.86rem;line-height:1.45}
.report-periods{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:8px;margin:8px 0}.report-period-box{min-height:64px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.13);backdrop-filter:blur(3px) saturate(145%);-webkit-backdrop-filter:blur(3px) saturate(145%);padding:10px 8px;color:inherit}.report-period-box.is-on{background:rgba(150,220,185,.16)}.report-period-box>span{display:block;font-size:1.05rem;opacity:.7;margin-bottom:3px}.report-period-box strong{font-size:.84rem}.report-custom-box{cursor:pointer}.report-date-range{display:grid;grid-template-columns:1fr auto 1fr;gap:5px;align-items:end;margin-top:7px}.report-date-field label{display:block;font-size:.65rem;opacity:.7;margin-bottom:2px}.report-date-field input{width:100%;box-sizing:border-box;min-width:0;padding:5px 6px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:inherit;font-size:.72rem}.report-date-separator{font-size:.7rem;opacity:.6;padding-bottom:6px}
.report-overview-card,.users-overview-card,.users-actions-card{padding:14px;margin-top:8px}.report-overview-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.report-status{font-size:.72rem;opacity:.65}.report-cards{display:grid;gap:8px;margin-top:10px}.report-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:15px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.report-card-main{display:flex;align-items:center;gap:10px;min-width:0}.report-card-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.12);opacity:.8}.report-card-main strong{font-size:.88rem}.report-card-main p{margin:3px 0 0;font-size:.72rem;opacity:.68;line-height:1.35}.report-card-side{display:flex;align-items:center;gap:8px}.report-card-side>span{font-size:.72rem;opacity:.65}.report-download{padding:7px 11px!important;min-height:0!important;font-size:.72rem!important}.users-tabs{display:flex;gap:8px;margin:8px 0}.users-toolbar{display:flex;gap:8px;margin-bottom:10px}.users-toolbar input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);color:inherit}.users-toolbar .btn{white-space:nowrap}.users-summary{margin:0 0 10px!important}.user-row .row-side{min-width:18px}.user-active-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:rgba(130,220,165,.9);box-shadow:0 0 0 4px rgba(130,220,165,.10)}.user-active-dot.off{background:rgba(220,140,140,.8);box-shadow:0 0 0 4px rgba(220,140,140,.08)}.user-miniapp-lastseen{display:block;font-size:.68rem;opacity:.55;margin-top:2px}
/* v189 — Excel Reports + Users use the same deliberate entry motion as the
   other main-management screens. The previous rule referenced an undefined
   keyframe, so these two views appeared immediately. */
@keyframes management-view-in{
  from{opacity:0;transform:translateY(14px) scale(.992)}
  to{opacity:1;transform:none}
}
.view.is-entering#view-excel-reports,.view.is-entering#view-users-management{animation:management-view-in .82s cubic-bezier(.22,.61,.36,1) both}
.view.enter-left#view-excel-reports,.view.enter-left#view-users-management,.view.enter-right#view-excel-reports,.view.enter-right#view-users-management{animation:management-view-in .82s cubic-bezier(.22,.61,.36,1) both}
#view-excel-reports .report-page-head,#view-excel-reports .report-periods,#view-excel-reports .report-overview-card,
#view-users-management .report-page-head,#view-users-management .users-overview-card,#view-users-management .users-actions-card{
  animation:management-child-in .58s cubic-bezier(.25,.8,.3,1) both;
}
#view-excel-reports .report-page-head,#view-users-management .report-page-head{animation-delay:.05s}
#view-excel-reports .report-periods{animation-delay:.12s}
#view-excel-reports .report-overview-card,#view-users-management .users-overview-card{animation-delay:.19s}
#view-users-management .users-actions-card{animation-delay:.26s}
@keyframes management-child-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media(max-width:520px){.report-periods{grid-template-columns:1fr 1.25fr 1fr}.report-period-box{padding:8px 5px}.report-period-box strong{font-size:.76rem}.report-card{padding:10px}.report-card-main p{font-size:.68rem}}

/* v188 — Main clinical queues: keep the section title + explanatory line in
   their own glass box, with the patient list in a separate box at the app's
   standard 8px spacing. */
.section-title-head{
  width:100%;
  align-items:stretch;
  gap:0;
  margin-bottom:0!important;
}
.section-title-box{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:24px;
  background:rgba(255,255,255,.43);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 7px 22px rgba(40,70,100,.055);
}
.section-title-box .view-title{
  padding:0;
  margin:0 0 4px!important;
  background:none;
  border:0;
  box-shadow:none;
}
.section-title-note{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.section-list-panel{
  margin-top:0;
}
#view-freeze .section-list-panel,
#view-et-list .section-list-panel,
#view-et-results .section-list-panel,
#view-donor-bank .section-list-panel{
  margin-top:0;
}

/* v255 — Puncture is one unified glass panel: the title and its explanatory
   line sit at the top, while the same panel continues through the final
   patient row. Individual patient rows remain the standard inner glass cards. */
#view-puncture .puncture-list-panel{
  margin-top:0;
  padding:12px;
}
#view-puncture .puncture-list-panel .view-head{
  margin:0 0 var(--app-box-gap);
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:block;
}
#view-puncture .puncture-list-panel .view-head .view-title{
  margin:0 0 4px;
  /* Already inside .puncture-list-panel's own glass box, so the usual
     pill/capsule look (background, border, radius, shadow, blur) would
     just be a second box drawn around the same text — dropped here the
     same way .menu-group .block-title drops it, for the same reason. */
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:0;
}
#view-puncture .puncture-list-panel .section-title-note{
  margin:0;
}
#view-puncture .puncture-list-panel .rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  /* v300 — show up to seven patient cards (two more than v300); additional
     patients continue to scroll inside the same glass panel, exactly like Today. */
  max-height:424px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
  overscroll-behavior:contain;
}

/* v259 — ICSI gets the same unified-panel treatment as Puncture: title
   and description move inside the list's own box instead of floating
   above it in a separate .view-head. */
#view-icsi .icsi-list-panel{
  margin-top:0;
  padding:12px;
}
#view-icsi .icsi-list-panel .view-head{
  margin:0 0 var(--app-box-gap);
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:block;
}
#view-icsi .icsi-list-panel .view-head .view-title{
  margin:0 0 4px;
  /* Same reasoning as Puncture's identical override just above: now
     inside the panel's own glass box, so the pill/capsule chrome would
     just double up around the same text. */
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:0;
}
#view-icsi .icsi-list-panel .rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  /* v300 — ICSI uses the same patient-list viewport as Puncture: seven
     patient cards are visible, with additional patients reached by the
     same internal touch scroll. */
  max-height:424px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
  overscroll-behavior:contain;
}

/* v257 — Same treatment as Puncture above, for the other main queue
   screens: the pill/capsule look on .view-title is dropped since each of
   these titles already sits directly above (ICSI) or inside its own
   panel (the rest), so a second box around just the text was redundant.
   Scoped to these six view ids only — every other .view-title in the app
   (patient file, register, tanks, settings, ...) keeps the capsule. */
#view-freeze .view-title,
#view-et-list .view-title,
#view-et-results .view-title,
#view-donor-bank .view-title{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:0;
}

/* v192 — Bottom navigation: same symmetric five-cell geometry as v191,
   now with a uniform true-black treatment. */
.tabbar{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  direction:ltr !important;
}
.tab{
  width:100% !important;
  min-width:0 !important;
  margin:8px 0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:center !important;
  color:#000 !important;
}
.tab.is-on{
  color:#000 !important;
  background:transparent !important;
  font-weight:500;
}
.tab-ico,
.tab[data-view="home"] .tab-ico,
.tab[data-view="search"] .tab-ico,
.tab[data-view="schedule"] .tab-ico,
.tab[data-view="settings"] .tab-ico,
.tab[data-action="ai"] .tab-ico{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#000 !important;
  transform:none !important;
}
.tab-ico svg,
.tab[data-view="home"] .tab-ico svg,
.tab[data-view="search"] .tab-ico svg,
.tab[data-view="schedule"] .tab-ico svg,
.tab[data-view="settings"] .tab-ico svg,
.tab[data-action="ai"] .tab-ico svg,
.tab[data-view="search"] .patient-search-nav-icon{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
}
.tab-ico svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.tab[data-view="search"] .patient-search-nav-icon{
  object-fit:contain !important;
  filter:grayscale(1) brightness(.48) contrast(1.05) !important;
}


/* v193 — Settings navigation gear: lighter outline, visually balanced with
   the other navigation line icons while keeping the same icon box. */
.tab[data-view="settings"] .tab-ico svg{
  width:32px !important;
  height:32px !important;
  max-width:32px !important;
  max-height:32px !important;
  stroke-width:1.65 !important;
}


/* v194 — Navigation: force every bottom-bar icon and label to true black. */
.tabbar .tab,
.tabbar .tab.is-on,
.tabbar .tab .tab-ico,
.tabbar .tab.is-on .tab-ico,
.tabbar .tab > span:last-child,
.tabbar .tab.is-on > span:last-child{
  color:#000 !important;
}
.tabbar .tab .tab-ico svg,
.tabbar .tab.is-on .tab-ico svg{
  stroke:#000 !important;
  color:#000 !important;
}
.tabbar .tab[data-view="search"] .patient-search-nav-icon{
  filter:brightness(0) grayscale(1) !important;
}



/* v280 — Today is a real Mini App workboard. Incomplete registrations live
   here instead of forcing staff into the bot-only incomplete queue. */
.today-page {
  display: grid;
  gap: 8px;
  padding: 0 2px 110px;
}
/* v286 — Today now opens straight onto the home page (page 1 of the
   main menu) instead of its own destination, so it no longer needs a
   whole page's worth of bottom clearance -- just the app's usual
   inter-box gap before the menu tiles that follow it. */
.today-home {
  padding: 0 2px;
  margin-bottom: var(--app-box-gap, 8px);
}
/* The date now lives in its own small glass box, separate from the
   patient list below it. */
.today-datebox {
  text-align: center;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  border-radius: 20px;
  padding: 12px 18px;
  box-shadow: var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.today-datebox .today-date { margin: 0; }
.today-section {
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  border-radius: 24px;
  padding: 16px 18px;
  box-shadow: var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.today-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.today-section-head h3 { margin: 0; font-size: 18px; }
.today-count { font-size: 13px; opacity: .68; }
.today-help { margin: 2px 0 10px; opacity: .62; font-size: 13px; }
.today-empty { margin: 12px 0 4px; opacity: .62; text-align: center; }
.incomplete-row { border-top-color: rgba(40,70,60,.12); }

/* ---------- Unified clinic banner + top bar (v201) ----------
   The account strip and clinic banner read as one continuous glass surface:
   no dividing line, no change of background, and no top edge on the banner. */
.topbar {
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(9px) saturate(1.02);
  backdrop-filter: blur(9px) saturate(1.02);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.hero {
  border-top: 0;
  box-shadow:
    inset 0 -1px 0 rgba(20,49,44,.045),
    0 3px 12px rgba(20,49,44,.08);
}
.hero-plate {
  box-shadow: none;
}

/* v202 — make the clinic banner physically touch the fixed top bar.
   The home view has its normal top padding, so the banner is lifted by
   exactly that padding amount. This removes the visible seam/gap while
   keeping the content below the banner at its existing spacing. */
#view-home > .hero {
  margin-top: calc(-1 * var(--pad));
}
#view-home > .hero + .today {
  margin-top: 0;
}

/* ---------- v205 — clinic banner is the single fixed app header ----------
   The old account topbar and the clinic banner are now one DOM element.
   This deliberately removes the seam between them instead of trying to
   visually glue two independent bars together. */
:root { --topbar: 170px; }

.topbar.clinic-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 40;
  display: block;
  min-height: var(--topbar);
  height: var(--topbar);
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(11px) saturate(1.03);
  backdrop-filter: blur(11px) saturate(1.03);
}

.clinic-header-account {
  height: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--pad);
  box-sizing: border-box;
  background: transparent;
  border: 0;
}

.clinic-header .user-avatar {
  position: static;
  width: 28px;
  height: 28px;
  margin: 0;
  z-index: auto;
}

.clinic-header .hero {
  position: relative;
  top: auto;
  width: 100%;
  height: calc(var(--topbar) - 34px);
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  overflow: hidden;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24),
              inset 0 -1px 0 rgba(20,49,44,.035),
              0 3px 12px rgba(20,49,44,.06);
  -webkit-backdrop-filter: blur(11px) saturate(1.03);
  backdrop-filter: blur(11px) saturate(1.03);
}

.clinic-header .hero-plate {
  height: 100%;
  box-sizing: border-box;
  padding: 18px 20px 14px;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clinic-header .hero-name {
  font-size: 27px;
}

/* The hero is no longer inside #view-home, so it must not consume page flow. */
#view-home > .hero { display: none; }
#staff { padding-top: var(--topbar); }
.view.is-incoming { top: var(--topbar); }

/* The banner itself is the persistent header on every staff view. */
body.is-moving .clinic-header {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* ---------- v206 — the clinic banner IS the header ----------
   No separate top bar/account strip exists. Identity and clinic details
   live on the same fixed glass banner, which persists across every view. */
:root { --clinic-header-height: 170px; }

.clinic-header {
  position: fixed !important;
  top: 0 !important;
  inset-inline: 0 !important;
  width: 100% !important;
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
  z-index: 100 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.clinic-header .hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 0 var(--r-card) var(--r-card) !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.095) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.03) !important;
  backdrop-filter: blur(11px) saturate(1.03) !important;
  box-shadow:
    inset 0 -1px 0 rgba(20,49,44,.035),
    0 3px 12px rgba(20,49,44,.055) !important;
}

.clinic-header .hero-plate {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--pad) 14px;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
}

.hero-main {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 18px;
  direction: ltr;
}

.hero-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.clinic-header .user-avatar {
  position: static !important;
  flex: 0 0 54px;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 2px 8px rgba(20,49,44,.10), inset 0 1px 0 rgba(255,255,255,.55);
  z-index: auto !important;
}

.hero-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.clinic-header .chip-user {
  display: block;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 650;
  color: var(--ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-header .chip {
  padding: 3px 9px;
  min-height: 24px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.clinic-header .chip-role {
  font-size: 11px;
  line-height: 1;
  color: var(--ink) !important;
}

.hero-clinic {
  min-width: 0;
  text-align: right;
  direction: ltr;
}
.hero-clinic-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hero-clinic-select .hero-name {
  margin: 0;
}

.clinic-header .hero-name {
  margin: 0;
  font-size: clamp(21px, 5.4vw, 29px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.clinic-header .hero-tagline {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.2;
  opacity: .82;
}

.clinic-header .hero-tagline-2 {
  margin-top: 3px;
  font-size: 10px;
  opacity: .66;
}

/* Content begins below the single persistent header on every staff view. */
#staff { padding-top: var(--clinic-header-height) !important; }
.view.is-incoming { top: var(--clinic-header-height) !important; }

/* Remove every legacy home-banner instance; the fixed header above is the only one. */
#view-home > .hero { display: none !important; }

@media (max-width: 430px) {
  :root { --clinic-header-height: 154px; }
  .hero-main { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 11px; }
  .clinic-header .user-avatar { flex-basis: 48px; width: 48px !important; height: 48px !important; }
  .clinic-header .chip-user { font-size: 13px; }
  .clinic-header .hero-name { font-size: clamp(18px, 5.5vw, 24px); }
  .clinic-header .hero-tagline { font-size: 9.5px; }
  .clinic-header .hero-tagline-2 { font-size: 8.5px; }
}

/* ---------- v207 — compact unified clinic/profile header ----------
/* The clinic banner is the only app header. Identity sits on the left,
   a white divider stays in the middle, and the clinic name sits on the right. */
:root { --clinic-header-height: 124px; }

.clinic-header {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero {
  height: 100% !important;
  border-radius: 0 0 var(--r-card) var(--r-card) !important;
  background: rgba(255,255,255,.075) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
  backdrop-filter: blur(10px) saturate(1.02) !important;
  box-shadow: inset 0 -1px 0 rgba(20,49,44,.035),
              0 3px 12px rgba(20,49,44,.045) !important;
}

.clinic-header .hero-plate {
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--pad) 10px !important;
  display: flex !important;
  align-items: center !important;
}

.clinic-header .hero-main {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  direction: ltr;
}

.clinic-header .hero-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.clinic-header .user-avatar {
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  border: 1px solid rgba(255,255,255,.64);
  box-shadow: 0 2px 8px rgba(20,49,44,.08), inset 0 1px 0 rgba(255,255,255,.55);
}

.clinic-header .hero-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.clinic-header .chip-user {
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.clinic-header .chip-title {
  display: block;
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.clinic-header .chip {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

.clinic-header .chip-role {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 600;
  color: var(--ink) !important;
}

.clinic-header .hero-divider {
  width: 1px;
  height: 58px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 5px rgba(255,255,255,.18);
  justify-self: center;
}

.clinic-header .hero-clinic {
  min-width: 0;
  text-align: center;
  direction: ltr;
}

.clinic-header .hero-name {
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(18px, 5vw, 25px) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  color: var(--ink) !important;
  overflow-wrap: anywhere;
}

#staff { padding-top: var(--clinic-header-height) !important; }
.view.is-incoming { top: var(--clinic-header-height) !important; }

@media (max-width: 430px) {
  :root { --clinic-header-height: 116px; }
  .clinic-header .hero-plate { padding-left: 12px !important; padding-right: 12px !important; }
  .clinic-header .hero-main { column-gap: 11px; }
  .clinic-header .user-avatar { flex-basis: 44px !important; width: 44px !important; height: 44px !important; }
  .clinic-header .chip-user { font-size: 13px !important; }
  .clinic-header .chip-title { font-size: 10px; }
  .clinic-header .chip-role { font-size: 9.5px !important; }
  .clinic-header .hero-divider { height: 52px; }
  .clinic-header .hero-name { font-size: clamp(16px, 4.8vw, 22px) !important; }
}


/* ---------- v208 — refined compact clinic/profile banner ----------
   Based on v207. The header remains a single fixed banner.
   Requested refinements: 10% lower height, softer/less-transparent glass,
   IVF Clinic Management under the clinic name, and a borderless avatar. */
:root { --clinic-header-height: 112px; }

.clinic-header {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero {
  height: 100% !important;
  background: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.98) !important;
  backdrop-filter: blur(8px) saturate(.98) !important;
  box-shadow: inset 0 -1px 0 rgba(20,49,44,.045),
              0 3px 10px rgba(20,49,44,.035) !important;
}

.clinic-header .hero-plate {
  padding-top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
  padding-bottom: 7px !important;
}

.clinic-header .user-avatar {
  border: 0 !important;
  box-shadow: none !important;
}

.clinic-header .hero-clinic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.clinic-header .hero-management {
  margin-top: 3px;
  font-size: clamp(9px, 2.5vw, 12px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 430px) {
  :root { --clinic-header-height: 104px; }
  .clinic-header .hero-plate {
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    padding-bottom: 6px !important;
  }
  .clinic-header .hero-management { font-size: 8.5px; margin-top: 2px; }
}


/* ---------- v209 — compact opaque banner + three-leaf management mark ----------
   Based on v208. Height reduced another 10%; glass transparency reduced by two
   steps (more solid/legible); a subtle three-leaf sprout mark precedes the
   IVF Clinic Management label. */
:root { --clinic-header-height: 101px; }

.clinic-header {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero {
  height: 100% !important;
  background: rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: blur(6px) saturate(.96) !important;
  backdrop-filter: blur(6px) saturate(.96) !important;
}

.clinic-header .hero-plate {
  padding-top: calc(env(safe-area-inset-top, 0px) + 5px) !important;
  padding-bottom: 5px !important;
}

.clinic-header .hero-management {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 2px !important;
  font-size: clamp(8.5px, 2.35vw, 11.5px) !important;
  line-height: 1.05 !important;
  font-weight: 500;
  letter-spacing: .07em;
  color: var(--muted) !important;
}

.clinic-header .hero-sprout {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

@media (max-width: 430px) {
  :root { --clinic-header-height: 94px; }
  .clinic-header .hero-plate {
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    padding-bottom: 4px !important;
  }
  .clinic-header .hero-management {
    gap: 4px;
    font-size: 8px !important;
  }
  .clinic-header .hero-sprout { width: 12px; height: 12px; flex-basis: 12px; }
}

/* ---------- v213 — larger IVF Clinic Management sprout + softer center divider ----------
   Keep the existing compact banner layout, but make the sprout and its
   "IVF Clinic Management" label more prominent and soften the center divider. */
.clinic-header .hero-divider {
  background: rgba(255,255,255,.38) !important;
  box-shadow: 0 0 4px rgba(255,255,255,.08) !important;
}

.clinic-header .hero-management {
  gap: 6px !important;
  margin-top: 3px !important;
  font-size: clamp(10px, 2.9vw, 14px) !important;
  line-height: 1.08 !important;
  font-weight: 550 !important;
  letter-spacing: .065em !important;
}

.clinic-header .hero-sprout {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
  stroke-width: 1.45 !important;
  opacity: .86 !important;
}

@media (max-width: 430px) {
  .clinic-header .hero-divider {
    background: rgba(255,255,255,.32) !important;
    box-shadow: 0 0 3px rgba(255,255,255,.06) !important;
  }
  .clinic-header .hero-management {
    gap: 5px !important;
    font-size: clamp(9.5px, 2.8vw, 12.5px) !important;
  }
  .clinic-header .hero-sprout {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }
}


/* ---------- v215 navigation labels ----------
   The navigation labels are intentionally visible again, directly below
   their icons. The shared ink is a restrained dark gray rather than the
   accent green; the active item uses the same dark gray with weight only.
*/
.tab > span:not(.tab-ico) {
  position: static;
  width: auto; height: auto;
  margin: 0; padding: 0; border: 0;
  overflow: visible; clip-path: none;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.2;
  color: #4A4F52;
}
.tab { color: #4A4F52; gap: 3px; }
.tab.is-on { color: #3F4548; font-weight: 600; }
.tab.is-on .tab-ico { color: #3F4548; }
.tab-ico { color: #4A4F52; }

/* Search and Clinic Schedule: one step smaller than the shared icon size. */
.tab[data-view="search"] .tab-ico svg,
.tab[data-view="schedule"] .tab-ico svg { width: 40px; height: 40px; }

/* ---------- v215 AI assistant ---------- */
.ai-view { padding: 10px var(--pad) 22px; }
.ai-panel {
  min-height: calc(100vh - 180px);
  display: flex; flex-direction: column;
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 8px 28px rgba(28,55,50,.10);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  overflow: hidden;
}
.ai-head { display:flex; align-items:center; gap:12px; padding:16px 16px 12px; border-bottom:1px solid rgba(50,60,60,.10); }
.ai-head-icon { width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; color:#4A4F52; }
.ai-head-icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ai-head h2 { margin:0; font-size:18px; }
.ai-head p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.ai-messages { flex:1; min-height:260px; max-height:calc(100vh - 370px); overflow:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.ai-welcome { margin:auto; max-width:80%; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; }
.ai-msg { max-width:88%; padding:10px 12px; border-radius:15px; white-space:pre-wrap; line-height:1.65; font-size:13.5px; }
.ai-user { align-self:flex-start; background:rgba(216,232,226,.78); color:#263331; }
.ai-assistant { align-self:flex-end; background:rgba(255,255,255,.82); color:#2D3234; border:1px solid rgba(60,70,70,.08); }
.ai-composer { display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid rgba(50,60,60,.10); }
.ai-composer textarea { flex:1; min-width:0; resize:none; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.72); padding:10px 12px; font:inherit; color:var(--ink); outline:none; }
.ai-composer textarea:focus { border-color:rgba(60,80,75,.32); }
.ai-send { flex:0 0 auto; min-width:72px; margin:0; }
.ai-note { margin:0; padding:0 12px 12px; color:var(--muted); font-size:10.5px; line-height:1.5; text-align:center; }

/* ---------- v216 navigation consistency ----------
   Every navigation item uses the same label weight and active-state
   treatment. Search/Home/Schedule had been visibly bolder than Settings/AI. */
.tabbar .tab > span:last-child {
  font-weight: 500 !important;
  color: #4A4F52 !important;
}
.tabbar .tab.is-on > span:last-child {
  font-weight: 700 !important;
  color: #3F4548 !important;
}
.tabbar .tab.is-on .tab-ico,
.tabbar .tab.is-on .tab-ico svg {
  color: #3F4548 !important;
  stroke: #3F4548 !important;
}
.tabbar .tab .tab-ico { color: #4A4F52 !important; }

/* ---------- v217 AI assistant back behavior ---------- */
.ai-head { position: relative; }


/* ---------- Puncture case: one large patient card ----------
   The patient's name is the header of one unified card. The operation date,
   retrieved-oocyte field, and their explanatory notes stay inside the same
   visual container so the whole case reads as one unit. */
/* Same width as the panel below it (both rely on the view's own base
   padding for the side inset -- this used to add 14px more on each
   side, making the name pill narrower than the card underneath it). */
#view-puncture-case .puncture-case-head {
  margin: 0 0 10px;
}

/* Operation date, total-oocytes input, and the maturity note now all
   sit inside the one puncture-case-panel card (matching the reference
   screen) instead of each being its own floating box. .facts keeps its
   own background/border everywhere else it's used standalone, so it's
   neutralized here specifically, rather than changed at the base rule. */
#view-puncture-case .puncture-case-panel > .facts,
#view-puncture-case .puncture-case-panel > .facts .fact {
  background: transparent !important;
  border: 0 !important;
}
#view-puncture-case .puncture-case-panel > .facts {
  border-radius: 12px !important;
  overflow: hidden;
  margin: 0 0 10px;
}

#view-puncture-case .puncture-case-panel > .note[data-t="punct_maturity_note"] {
  margin-top: 10px;
  margin-bottom: 0;
}

/* Slightly less see-through than the base .list-panel glass, per request. */
#view-puncture-case .puncture-case-panel {
  background: rgba(255, 255, 255, .42);
}

.tank-excel-actions{display:flex;flex-direction:column;gap:10px;margin:12px 0}.tank-excel-actions .btn{margin:0}
.tank-excel-actions .tank-excel-btn{
  width:100%;
  margin:0;
  color:var(--ink);
  background:rgba(14,124,107,.16);
  border:1px solid rgba(14,124,107,.22);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 10px rgba(20,49,44,.08);
}
.tank-excel-actions .tank-excel-btn:active{
  background:rgba(14,124,107,.24);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tank-excel-actions .tank-excel-btn{background:rgba(14,124,107,.14);}
}

/* v275 — donor puncture allocation */
.pc-allocation {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}
.pc-allocation-title {
  font-weight: 700;
  margin-bottom: 10px;
}
.pc-recipient-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pc-recipient-row:last-of-type { border-bottom: 0; }
.pc-recipient-badge {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: rgba(14,124,107,.16);
  color: var(--accent, #0e7c6b);
}
.pc-recipient-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-recipient-input {
  flex: 0 0 84px;
  width: 84px;
  box-sizing: border-box;
  text-align: center;
  padding: 9px 6px;
  margin: 0;
}
.pc-allocation-summary {
  margin-top: 10px;
  font-size: .9rem;
  opacity: .9;
}
.pc-allocation-summary.is-bad { color: #ff6b6b; }


/* v291 — Home Date + Today are one degree clearer than the surrounding
   Patients & files panel, so the background shows through more clearly. */
.today-datebox,
.today-section {
  background: rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* v301 Today fullscreen */
.today-section-head h3{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.today-fullscreen{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);background:rgba(247,252,249,.94);color:var(--ink);overflow:hidden}
.today-fullscreen.hidden{display:none!important}.today-fullscreen-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:48px;margin-bottom:10px}.today-fullscreen-head h2{flex:1;margin:0;text-align:center;font-size:21px}.today-fullscreen-close{width:40px;height:40px;border:0;background:transparent;color:var(--ink);font-size:34px;line-height:1;padding:0}.today-fullscreen-head .today-count{min-width:40px;text-align:right}.today-fullscreen-body{flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--glass-line);border-radius:24px;background:rgba(255,255,255,.42);box-shadow:var(--glass-edge),var(--glass-shadow);padding:8px 16px}.today-fullscreen-body .today-list{height:100%;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0;padding:0}


/* v319 — No oocyte injected uses the exact same checkbox treatment as
   Register as donor: same native checkbox, size, accent color and layout. */

/* v319 treatment plan chips */
.treatment-plan-chips .treatment-plan-chip{min-width:82px;text-align:center;}


/* v319 — Make treatment-plan selection explicit on registration/edit screens. */
.plan-select-btn{margin-top:4px;min-height:42px;font-weight:600;}
.plan-selected-note{margin:8px 0 0;font-weight:600;}
#view-register .treatment-plan-chips,#view-patient-edit .treatment-plan-chips{margin-top:10px;}

/* v319 — Treatment plan must be immediately visible in Register Patient. */
#view-register .treatment-plan-primary-field{
  margin:14px 0 18px;
  padding:14px;
  border:1px solid var(--glass-line);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.34);
  box-shadow:var(--glass-edge),var(--glass-shadow);
}
#view-register .treatment-plan-primary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
#view-register .treatment-plan-primary-head .label{font-size:15px;font-weight:700;}
#view-register .treatment-plan-primary-head .plan-select-btn{min-width:150px;margin:0;}
#view-register .treatment-plan-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0;}
#view-register .treatment-plan-chip{min-height:42px;font-weight:600;}
#view-register .plan-selected-note{margin:10px 0 0;text-align:center;}
@media (max-width:520px){#view-register .treatment-plan-primary-head{align-items:stretch;flex-direction:column;}#view-register .treatment-plan-primary-head .plan-select-btn{width:100%;}.treatment-plan-chips .treatment-plan-chip{min-width:0;}}


/* v319 — All capsule/chip selections use the same translucent green-glass
   selected surface as Treatment plan options in patient registration. */
.chip-pick.is-on {
  background: rgba(14, 124, 107, .42);
  color: #fff;
  border-color: rgba(14, 124, 107, .38);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px rgba(14,124,107,.12);
}
.chip-pick.is-on:active {
  background: rgba(14, 124, 107, .50);
}

/* v319 — Treatment plan selections: translucent green glass, not solid green. */
#view-register .treatment-plan-chip.is-on,
#view-patient-edit .treatment-plan-chip.is-on {
  background: rgba(14, 124, 107, .42);
  color: #fff;
  border-color: rgba(14, 124, 107, .38);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px rgba(14,124,107,.12);
}
#view-register .treatment-plan-chip.is-on:active,
#view-patient-edit .treatment-plan-chip.is-on:active {
  background: rgba(14, 124, 107, .50);
}

/* v319 — Oocyte defect catalogue management. Selection keeps the same green glass chip style; management controls sit beside each chip only while Manage defects is active. */
.defect-tools-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.defect-chip-wrap { display:inline-flex; align-items:center; gap:4px; }
.defect-chip-wrap .defect-action { width:28px; height:28px; padding:0; border:1px solid var(--glass-line); border-radius:50%; background:rgba(255,255,255,.42); color:var(--ink); font-size:14px; line-height:1; }
.defect-chip-wrap .defect-action.danger { color:#9b2c2c; }
.defect-chip-wrap .defect-action:active { transform:scale(.96); }

/* v319 — donor bank / embryo donation actions */
.donor-bank-note { margin: -6px 0 12px; }
.donor-action-btn { flex: 0 0 auto; align-self: center; }
.sample-donation-action {
  display:inline-flex; align-items:center; justify-content:center;
  margin-inline-start:8px; padding:7px 10px; border-radius:999px;
  border:1px solid var(--glass-line); background:rgba(255,255,255,.42);
  color:var(--accent); font-size:12px; font-weight:600; white-space:nowrap;
}
.sample-donation-action:active { transform:scale(.97); }

/* v334 — donation belongs to the physical straw, not the patient/cane row. */
.pf-straw-actions {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  align-self: center;
}
.pf-straw-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pf-straw-donate:active { transform: scale(.97); }

/* v334 — tank-level bulk movement/transfer actions */
.tank-bulk-actions{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 12px;}
.tank-bulk-actions .btn{width:100%;}

/* v334 — tank straw actions: colour, donation, and three-dot controls are
   available consistently for every physical straw in every tank. */
.sample-row { display:flex; align-items:center; gap:10px; width:100%; }
.sample-row .row-main { min-width:0; flex:1 1 auto; }
.sample-row-tail { margin-inline-start:auto; min-width:0; }
.sample-row-donate {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:6px 10px;
  border:1px solid rgba(14,124,107,.24);
  border-radius:999px;
  background:rgba(14,124,107,.16);
  color:var(--accent); font:inherit; font-size:12px; font-weight:600;
  white-space:nowrap; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sample-row-donate:active { background:rgba(14,124,107,.24); transform:scale(.97); }
.sample-row-more { flex:0 0 auto; border:1px solid var(--glass-line); background:rgba(255,255,255,.36); }
.sample-row-tail .color-dots { flex:0 0 auto; }

/* v334 — patient-file storage actions sit together beneath the final straw. */
.pf-storage-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.pf-storage-action {
  width:100%; min-height:42px; padding:9px 10px;
  border:1px solid rgba(14,124,107,.24);
  border-radius:14px;
  background:rgba(14,124,107,.16);
  color:var(--accent); font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.pf-storage-action:active { background:rgba(14,124,107,.24); transform:scale(.99); }

/* Keep the donation control tappable even in long/scrolled tank lists. */
.sample-row, .sample-row * { pointer-events:auto; }
.sample-row-donate, .sample-row-more { position:relative; z-index:3; touch-action:manipulation; }

/* v334 — consistent straw actions in every tank. */
.sample-row { display:flex; align-items:center; gap:10px; width:100%; }
.sample-row .row-main { min-width:0; flex:1 1 auto; }
.sample-row-tail { margin-inline-start:auto; min-width:0; }
.sample-row-donate { display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:1px solid rgba(14,124,107,.24);border-radius:999px;background:rgba(14,124,107,.16);color:var(--accent);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); }
.sample-row-donate:active { background:rgba(14,124,107,.24);transform:scale(.97); }
.sample-row-more { flex:0 0 auto;border:1px solid var(--glass-line);background:rgba(255,255,255,.36); }
.sample-row-tail .color-dots { flex:0 0 auto; }
.pf-storage-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px; }
.pf-storage-action { width:100%;min-height:42px;padding:9px 10px;border:1px solid rgba(14,124,107,.24);border-radius:14px;background:rgba(14,124,107,.16);color:var(--accent);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); }
.pf-storage-action:active { background:rgba(14,124,107,.24);transform:scale(.99); }
.sample-row,.sample-row * { pointer-events:auto; }
.sample-row-donate,.sample-row-more { position:relative;z-index:3;touch-action:manipulation; }


/* v336 — Root straw-action order for every tank: count → colour → Donate → more.
   The colour is immediately beside Donate and remains on the right side of the action group. */
.sample-row-tail .color-dots { order: 2; }
.sample-row-tail .sample-row-donate { order: 3; }
.sample-row-tail .sample-row-more { order: 4; }
.sample-row-tail > span:first-child { order: 1; }

/* v340 — raise only the bottom edge of the profile/clinic banner.
   The banner background ends close to the bottom of the profile photo,
   while the profile photo and all banner text keep their exact previous
   vertical positions. The plate remains at the previous height and is
   allowed to extend beyond the shorter background surface. */
:root { --clinic-header-height: 78px; }

.clinic-header {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
  overflow: visible !important;
}

.clinic-header .hero {
  height: var(--clinic-header-height) !important;
  overflow: visible !important;
}

.clinic-header .hero-plate {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 101px !important;
  min-height: 101px !important;
  overflow: visible !important;
}

#staff { padding-top: var(--clinic-header-height) !important; }
.view.is-incoming { top: var(--clinic-header-height) !important; }

@media (max-width: 430px) {
  :root { --clinic-header-height: 72px; }
  .clinic-header .hero-plate {
    height: 94px !important;
    min-height: 94px !important;
  }
}

/* v344 — reduce the banner by 30% from the top, keeping its lower edge
   and the profile/text group at the same visual bottom position. */
:root { --clinic-header-height: 116px; --clinic-banner-extra-top: 112px; }

.clinic-header {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero,
.clinic-header .hero-plate {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero-plate {
  transform: translateY(var(--clinic-banner-extra-top));
}

#staff { padding-top: var(--clinic-header-height) !important; }
.view.is-incoming { top: var(--clinic-header-height) !important; }

@media (max-width: 430px) {
  :root { --clinic-header-height: 116px; --clinic-banner-extra-top: 112px; }
}


/* v346 — keep the v345 banner size and move the profile/photo + all banner
   text closer to the bottom edge without changing the banner height. */
:root { --clinic-header-height: 128px; }

.clinic-header {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero,
.clinic-header .hero-plate {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero-plate {
  transform: none !important;
  align-items: flex-end !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
  padding-bottom: 2px !important;
}

.clinic-header .hero-main {
  align-items: center !important;
}

#staff { padding-top: var(--clinic-header-height) !important; }
.view.is-incoming { top: var(--clinic-header-height) !important; }

@media (max-width: 430px) {
  :root { --clinic-header-height: 128px; }
  .clinic-header .hero-plate {
    height: var(--clinic-header-height) !important;
    min-height: var(--clinic-header-height) !important;
    transform: none !important;
    align-items: flex-end !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    padding-bottom: 2px !important;
  }
}


/* v347 — move the entire profile/identity + clinic text group lower inside the existing banner.
   Banner height is unchanged. Position the group from the bottom edge explicitly so
   the photo and every banner text stays inside the banner and sits close to its lower edge. */
.clinic-header .hero-plate {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  padding: 0 var(--pad) !important;
  transform: none !important;
}

.clinic-header .hero-main {
  position: absolute !important;
  left: var(--pad) !important;
  right: var(--pad) !important;
  bottom: 5px !important;
  width: auto !important;
  margin: 0 !important;
  align-items: center !important;
}

@media (max-width: 430px) {
  .clinic-header .hero-plate {
    padding: 0 var(--pad) !important;
  }
  .clinic-header .hero-main {
    left: var(--pad) !important;
    right: var(--pad) !important;
    bottom: 7px !important;
  }
}


/* v348 — page 2 and page 3 now live directly below page 1 on the same
   vertically scrolling Home screen. No horizontal pagination is used. */
#view-home > #menu2,
#view-home > #menu3 {
  display: flex !important;
  flex-direction: column;
  gap: var(--app-box-gap, 8px);
  width: 100%;
}
#view-home > #menu2:empty,
#view-home > #menu3:empty { display: none !important; }
#dots:has(.pdot:only-child) { display: none !important; }



/* v351 — restore the real image background and reserve a green strip only
   for the top system/status area. The clinic banner keeps its existing size. */
html, body {
  background: var(--mist) !important;
}
body.has-bg { background: transparent !important; }

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-strip, 34px);
  background: #F4F7F6 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  z-index: 99 !important;
  pointer-events: none !important;
}

.clinic-header {
  top: calc(var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important;
}

#staff { padding-top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
.view.is-incoming { top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }

@media (max-width: 430px) {
  body::before { height: var(--top-strip, 34px); }
  .clinic-header { top: calc(var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
  #staff { padding-top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
  .view.is-incoming { top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
}

/* v354 — slightly raise only the profile photo and identity text. of the profile/clinic banner.
   The green system strip is untouched. Keep the profile photo/text at the
   same horizontal edge distance and keep the identity group anchored near the
   banner's lower edge. */
:root { --clinic-header-height: 108px; }

.clinic-header,
.clinic-header .hero,
.clinic-header .hero-plate {
  height: var(--clinic-header-height) !important;
  min-height: var(--clinic-header-height) !important;
}

.clinic-header .hero-plate {
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

.clinic-header .hero-main {
  left: var(--pad) !important;
  right: var(--pad) !important;
  bottom: 8px !important;
}

#staff { padding-top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
.view.is-incoming { top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }

@media (max-width: 430px) {
  :root { --clinic-header-height: 108px; }
  .clinic-header .hero-plate {
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
  }
  .clinic-header .hero-main {
    left: var(--pad) !important;
    right: var(--pad) !important;
    bottom: 7px !important;
  }
  #staff { padding-top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
  .view.is-incoming { top: calc(var(--clinic-header-height) + var(--top-strip, 34px) - var(--hdr-pull, 0px)) !important; }
}


/* v358 — place the Mailbox immediately after the user's name.
   Keep the envelope minimal and keep the red notification dot on its upper corner. */
.clinic-header .hero-user-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.clinic-header .header-mailbox {
  position: relative;
  flex: 0 0 27px;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(32, 55, 50, .72) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
}

.clinic-header .header-mailbox svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}

.clinic-header .header-mailbox:active {
  transform: scale(.94);
}

.clinic-header .header-mailbox-dot {
  position: absolute;
  top: 1px;
  right: 0px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e53935;
  border: 1.5px solid rgba(255,255,255,.88);
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(160, 30, 25, .22);
}

.clinic-header .header-mailbox-dot.hidden {
  display: none !important;
}

@media (max-width: 430px) {
  .clinic-header .hero-user-row {
    gap: 5px !important;
  }
  .clinic-header .header-mailbox {
    flex-basis: 25px;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
  }
  .clinic-header .header-mailbox svg {
    width: 20px !important;
    height: 20px !important;
  }
}


/* v359 — slightly enlarge the profile identity group and Mailbox without changing the banner size or edge spacing. */
.clinic-header .user-avatar {
  flex-basis: 54px !important;
  width: 54px !important;
  height: 54px !important;
}

.clinic-header .chip-user {
  font-size: 16.5px !important;
}

.clinic-header .chip-title {
  font-size: 12px !important;
}

.clinic-header .chip-role {
  font-size: 11.5px !important;
}

.clinic-header .header-mailbox {
  flex-basis: 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

.clinic-header .header-mailbox svg {
  width: 23px !important;
  height: 23px !important;
}

.clinic-header .header-mailbox-dot {
  width: 7.5px !important;
  height: 7.5px !important;
}

@media (max-width: 430px) {
  .clinic-header .user-avatar {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .clinic-header .chip-user { font-size: 15.5px !important; }
  .clinic-header .chip-title { font-size: 11.5px !important; }
  .clinic-header .chip-role { font-size: 11px !important; }
  .clinic-header .header-mailbox {
    flex-basis: 29px !important;
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }
  .clinic-header .header-mailbox svg {
    width: 22px !important;
    height: 22px !important;
  }
}


/* v360 — counted oocyte defects */
.defect-count-chip { min-height: 40px; }

/* v362 — Counted oocyte defects: one clean scrollable glass box, one defect per row. */
#ic-defects {
  display: block; width: 100%; max-height: 238px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin;
  border: 1px solid var(--glass-line); border-radius: 18px;
  background: rgba(255,255,255,.34); box-shadow: var(--glass-edge),var(--glass-shadow);
  padding: 4px 12px; box-sizing: border-box; touch-action: pan-y; transform: translateZ(0);
}
#ic-defects .oocyte-defect-row {
  min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; box-sizing: border-box; border-bottom: 1px solid rgba(100,120,115,.16);
}
#ic-defects .oocyte-defect-row:last-child { border-bottom: 0; }
#ic-defects .oocyte-defect-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
#ic-defects .oocyte-defect-controls {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 36px; border: 1px solid var(--glass-line); border-radius: 12px;
  background: rgba(255,255,255,.34); overflow: hidden;
}
#ic-defects .oocyte-defect-step {
  width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink);
  font-size: 21px; line-height: 1; padding: 0; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
#ic-defects .oocyte-defect-step:disabled { opacity: .28; }
#ic-defects .oocyte-defect-step:active:not(:disabled) { background: rgba(14,124,107,.10); }
#ic-defects .oocyte-defect-count { width: 28px; text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
#ic-defects .defect-row-actions { display:flex; flex:0 0 auto; gap:4px; }
#ic-defects .defect-row-actions .defect-action { width:30px; height:30px; }

.icsi-defect-summary {
  margin-top: 9px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.34);
  color: var(--ink); font-size: 12px; font-weight: 700; text-align: center;
}
.icsi-defect-summary.is-bad { color: #9b2c2c; border-color: rgba(155,44,44,.28); }

/* Patient portal: frozen-storage quick summary, right under the status
   card so a patient sees it without asking for the full PDF report. */
.p-storage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.p-storage-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 14px;
  text-align: center;
}
.p-storage-num { margin: 0; font-size: 28px; font-weight: 700; color: var(--accent); }
.p-storage-label { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* Subscription / ZarinPal */
#view-subscription { padding-bottom: 28px; }
.subscription-status { text-align:center; margin: 0 0 14px; }
.subscription-plans { display:grid; gap:12px; }
.subscription-card { padding:16px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.subscription-card .sub-title { font-weight:700; font-size:16px; }
.subscription-card .sub-price { margin:8px 0 12px; font-size:18px; font-weight:700; }
.subscription-card .sub-duration { font-size:13px; opacity:.72; margin-bottom:12px; }
.subscription-card .btn { width:100%; }
.subscription-empty { text-align:center; padding:20px; }

/* Subscription payment method */
.subscription-wallet{margin-top:12px;padding:16px;border:1px solid rgba(255,255,255,.24);border-radius:20px;background:rgba(255,255,255,.09);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.wallet-title{font-weight:750;font-size:16px;margin-bottom:6px;}
.wallet-note{margin:0 0 12px;font-size:13px;opacity:.78;line-height:1.5;}
.wallet-address-row{display:flex;gap:10px;align-items:stretch;}
.wallet-address-row code{flex:1;min-width:0;padding:12px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.08);overflow-wrap:anywhere;word-break:break-word;font-size:12px;line-height:1.45;}
.wallet-copy{flex:0 0 auto;white-space:nowrap;}
@media(max-width:520px){.wallet-address-row{flex-direction:column}.wallet-copy{width:100%;}}

/* Patient portal: storage-fee due amount + pay-online button, styled off
   the same accent card the treatment-stage status already uses. */
.p-fee-card { text-align: center; }
.p-fee-btn { margin-top: 12px; }
.p-fee-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: #ffe5e5;
}

/* Genetic Laboratory — refreshed glass layout */
.genetic-title-card{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px 0 10px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  color:#17352b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 24px rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-align:center;
}
.genetic-title-card strong{font-size:18px;line-height:1.2;font-weight:750}
.genetic-stats-panel{
  margin:0 0 10px;
  padding:9px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.genetic-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.genetic-kpi{
  min-height:78px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:9px 7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.genetic-kpi span{font-size:12px;opacity:.76;text-align:center;order:1}
.genetic-kpi strong{font-size:22px;line-height:1.1;order:2;margin-top:5px}
.genetic-referral-button{
  width:100%;
  min-height:58px;
  margin:0 0 10px;
  padding:12px 16px;
  border:1px solid rgba(103,255,190,.42);
  border-radius:18px;
  background:rgba(50,190,125,.30);
  color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 24px rgba(0,0,0,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font:inherit;
  text-align:center;
  cursor:pointer;
}
.genetic-referral-button strong{font-size:16px}
.genetic-tabs-panel{
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;
  background:rgba(255,255,255,.14);
  padding:8px;
  margin-bottom:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.genetic-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}
.genetic-tab{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:inherit;border-radius:13px;padding:10px 4px;font-size:12px}
.genetic-tab.is-on{background:rgba(50,170,125,.18);border-color:rgba(50,170,125,.38)}
.genetic-search-wrap{margin-bottom:10px}.genetic-content{display:flex;flex-direction:column;gap:9px}
.genetic-patient-row{width:100%;text-align:left}.genetic-patient-stats{display:grid;grid-template-columns:auto auto auto auto auto auto;gap:2px 5px;align-items:center;justify-items:end;font-size:9px}.genetic-patient-stats strong{font-size:15px}.genetic-patient-stats span{opacity:.62}
.genetic-patient-head{padding:14px;margin-bottom:9px}.genetic-patient-head .row-title{font-size:18px;font-weight:700}.genetic-embryo-list{display:flex;flex-direction:column;gap:10px}
.genetic-case-card{padding:13px}.genetic-case-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.genetic-case-title span{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(50,170,125,.12)}
.genetic-facts{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}.genetic-facts .fact{padding:3px 0}.genetic-note{margin-top:9px}.genetic-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.genetic-actions .btn{flex:1;min-width:145px}
.genetic-edit-sheet{display:flex;flex-direction:column;gap:7px}.genetic-edit-sheet .field{margin:0}.genetic-edit-sheet select,.genetic-edit-sheet input,.genetic-edit-sheet textarea{width:100%}.genetic-date-input{direction:ltr;text-align:center;letter-spacing:.3px}
async function openGeneticReferral(){
  if(!geneticCanEmbryologyEdit()) return;
  try{
    const d=await api('/api/genetic-lab/referral-candidates'); const patients=d.patients||[];
    const body=document.createElement('div'); body.className='genetic-referral-sheet';

    const note=document.createElement('p'); note.className='note';
    note.textContent='Search for the patient, select the patient, then choose the embryos to send to the Genetic Laboratory. Sample numbers are assigned only to the checked embryos in the order they are selected.';
    body.appendChild(note);

    const searchWrap=document.createElement('div'); searchWrap.className='field genetic-referral-search';
    const searchLabel=document.createElement('label'); searchLabel.className='label'; searchLabel.textContent='Patient'; searchWrap.appendChild(searchLabel);
    const search=document.createElement('input'); search.type='search'; search.placeholder='Enter patient name or patient ID'; search.autocomplete='off'; searchWrap.appendChild(search); body.appendChild(searchWrap);

    const test=geneticField('Requested genetic test','PGD-M','select',true);
    [['PGD-M','PGD-Male'],['PGD-F','PGD-Female'],['PGS','PGS'],['PGT','PGT']].forEach(([v,t])=>{const o=document.createElement('option');o.value=v;o.textContent=t;test.el.appendChild(o);});
    test.el.value='PGD-M'; body.appendChild(test.wrap);
    const lab=geneticField('Genetic laboratory','','text',true); body.appendChild(lab.wrap);
    const date=geneticDateField('Referral date',new Date(),true); body.appendChild(date.wrap);

    const results=document.createElement('div'); results.className='genetic-referral-results'; body.appendChild(results);
    const selectedOrder=[]; const meta=new Map(); const rowRefs=[];
    const expandedPatients=new Set();
    const selectedCount=document.createElement('div'); selectedCount.className='genetic-selection-count'; body.appendChild(selectedCount);

    function embryoDisplay(e){
      const day=String(e.day??'').trim();
      const grade=String(e.grade??'').trim();
      const stage=String(e.stage??'').trim();
      const quality=grade || stage;
      if(day && quality) return `Day ${invEsc(day)} — ${invEsc(quality)}`;
      if(day) return `Day ${invEsc(day)}`;
      if(quality) return invEsc(quality);
      return 'Embryo information not recorded';
    }
    function updateNumbers(){
      const pos=new Map(selectedOrder.map((id,i)=>[id,i+1]));
      rowRefs.forEach(ref=>{
        const n=pos.get(ref.id);
        ref.number.textContent=n?String(n):'';
        ref.number.classList.toggle('is-visible',!!n);
        ref.row.classList.toggle('is-selected',!!n);
      });
      selectedCount.textContent=`Selected: ${selectedOrder.length}`;
    }
    function toggleSelection(e,p,cb,row,number){
      const id=Number(e.embryo_id);
      if(cb.checked){
        if(!selectedOrder.includes(id)) selectedOrder.push(id);
        meta.set(id,{cycle_id:p.cycle_id,source_type:e.source_type,thaw_record_id:e.thaw_record_id});
      }else{
        const i=selectedOrder.indexOf(id); if(i>=0) selectedOrder.splice(i,1);
        meta.delete(id);
      }
      updateNumbers();
    }
    function renderPatients(){
      clear(results); rowRefs.length=0;
      const q=search.value.trim().toLowerCase();
      const filtered=patients.filter(p=>{
        const hay=`${p.patient_name||''} ${p.patient_code||''} ${p.doctor_name||''}`.toLowerCase();
        return !q || hay.includes(q);
      });
      if(!q){
        const e=document.createElement('div'); e.className='note'; e.textContent='Enter a patient name or ID to display patients.'; results.appendChild(e); return;
      }
      if(!filtered.length){
        const e=document.createElement('div'); e.className='note'; e.textContent='No patient found.'; results.appendChild(e); return;
      }
      filtered.forEach((p,index)=>{
        const panel=document.createElement('div'); panel.className='list-panel genetic-referral-patient-panel';
        const head=document.createElement('button'); head.type='button'; head.className='genetic-referral-patient-head';
        const info=document.createElement('span'); info.className='genetic-referral-patient-info';
        info.innerHTML=`<span class="row-title">${invEsc(p.patient_name||'—')}</span><span class="row-sub">${invEsc(p.patient_code||'')}${p.doctor_name?' · '+invEsc(p.doctor_name):''}</span>`;
        const chevron=document.createElement('span'); chevron.className='genetic-referral-chevron'; chevron.textContent='⌄';
        head.append(info,chevron); panel.appendChild(head);

        const embryoWrap=document.createElement('div'); embryoWrap.className='genetic-referral-embryos';
        const isExpanded=expandedPatients.has(String(p.patient_id));
        embryoWrap.classList.toggle('is-open',isExpanded);
        chevron.classList.toggle('is-open',isExpanded);
        head.setAttribute('aria-expanded',isExpanded?'true':'false');
        head.addEventListener('click',()=>{
          const key=String(p.patient_id);
          if(expandedPatients.has(key)) expandedPatients.delete(key); else expandedPatients.add(key);
          const open=expandedPatients.has(key);
          embryoWrap.classList.toggle('is-open',open); chevron.classList.toggle('is-open',open); head.setAttribute('aria-expanded',open?'true':'false');
        });

        (p.embryos||[]).forEach(e=>{
          const row=document.createElement('label'); row.className='genetic-referral-option';
          const cb=document.createElement('input'); cb.type='checkbox'; cb.value=String(e.embryo_id);
          const number=document.createElement('span'); number.className='genetic-referral-number';
          const content=document.createElement('span'); content.className='genetic-referral-content';
          content.innerHTML=embryoDisplay(e)+`<span class="genetic-referral-source">${geneticSourceLabel(e.source_type)}${e.thaw_date?' · Thaw '+invEsc(e.thaw_date):''}</span>`;
          cb.addEventListener('change',()=>toggleSelection(e,p,cb,row,number));
          row.append(cb,number,content); embryoWrap.appendChild(row); rowRefs.push({id:Number(e.embryo_id),row,number});
        });
        if(!(p.embryos||[]).length){ const empty=document.createElement('div'); empty.className='note genetic-referral-empty'; empty.textContent='No eligible embryos found for this patient.'; embryoWrap.appendChild(empty); }
        panel.appendChild(embryoWrap); results.appendChild(panel);
      });
      updateNumbers();
    }
    search.addEventListener('input',renderPatients);

    openSheet('Refer to Genetic Laboratory','',[]); const sh=$('sheet-body'); clear(sh); sh.appendChild(body);
    const submit=document.createElement('button'); submit.className='btn btn-primary btn-wide'; submit.textContent='Create Genetic Referral'; submit.onclick=async()=>{
      if(!selectedOrder.length){openSheet('Select embryos','Select at least one embryo.',[{label:'OK',primary:true,run:()=>closeSheet()}]);return;}
      const firstMeta=meta.get(selectedOrder[0]);
      const mixed=selectedOrder.some(id=>{const m=meta.get(id);return !m || String(m.cycle_id)!==String(firstMeta?.cycle_id)||String(m.source_type)!==String(firstMeta?.source_type);});
      if(mixed){openSheet('Select embryos','Select embryos from one cycle and one source (Fresh or Frozen-Thawed) per referral.',[{label:'OK',primary:true,run:()=>closeSheet()}]);return;}
      submit.disabled=true;
      try{
        const payload={cycle_id:Number(firstMeta.cycle_id),embryo_ids:selectedOrder.map(Number),test_type:test.el.value,genetic_lab_name:lab.el.value||'',referral_date:date.el.value||'',source_type:firstMeta.source_type||'fresh',thaw_record_ids:selectedOrder.map(id=>meta.get(id)?.thaw_record_id).filter(Boolean).map(Number)};
        const r=await api('/api/genetic-lab/referrals',{method:'POST',body:JSON.stringify(payload)});
        closeSheet(); await loadGeneticDashboard(); await loadGeneticPatients();
        openSheet('Referral completed',`${Number(r.referred)||selectedOrder.length} embryo${selectedOrder.length===1?'':'s'} referred to the Genetic Laboratory. Sample numbers were assigned in selection order.`,[{label:'OK',primary:true,run:()=>closeSheet()}]);
      }catch(e){
        submit.disabled=false;
        const msg=apiErrorText(e.message);
        openSheet('Referral could not be saved',msg,[{label:'OK',primary:true,run:()=>closeSheet()}]);
      }
    }; sh.appendChild(submit);
  }catch(e){openSheet('Error',apiErrorText(e.message),[{label:T('ok')}]);}
}


@media(max-width:420px){.genetic-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.genetic-kpi{min-height:72px;padding:8px 5px}.genetic-kpi span{font-size:11px}.genetic-kpi strong{font-size:21px}.genetic-tabs{gap:5px}.genetic-tab{font-size:11px}}
/* v523 — Refer Embryos patient picker: patient name first, embryos reveal on tap */
.genetic-referral-results{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.genetic-referral-patient-panel{overflow:hidden;padding:0}
.genetic-referral-patient-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:56px;padding:13px 15px;border:0;background:rgba(255,255,255,.13);
  color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:16px;
}
.genetic-referral-patient-head:active{transform:scale(.995)}
.genetic-referral-patient-info{display:block;min-width:0;flex:1}
.genetic-referral-patient-info .row-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genetic-referral-chevron{font-size:22px;line-height:1;opacity:.7;transition:transform .25s ease}
.genetic-referral-chevron.is-open{transform:rotate(180deg)}
.genetic-referral-embryos{
  display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;
  transition:grid-template-rows .28s ease,opacity .22s ease,padding .28s ease;
  padding:0 10px;
}
.genetic-referral-embryos > *{min-height:0}
.genetic-referral-embryos.is-open{grid-template-rows:1fr;opacity:1;padding:4px 10px 10px}
.genetic-referral-embryos .genetic-referral-option{min-height:48px}
.genetic-referral-empty{padding:10px 4px}


/* v390 — patient-file thaw layout */
.pf-thaw-history-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 20px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 24px rgba(0,0,0,.04);
}
.pf-thaw-history-box .rows { margin-top: 8px; }
.pf-thaw-history-row { background: rgba(255,255,255,.28); }

/* v558 — patient-file multi-straw selection. A long press enters selection
   mode; selected frozen straws use the same restrained green treatment as
   the rest of the mini-app rather than a loud checkbox UI. */
.pf-straw-select-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(40,120,105,.18);
  border-radius: 18px;
  background: rgba(222,246,238,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.pf-straw-select-count { flex: 1 1 auto; font-weight: 700; font-size: 14px; color: var(--ink,#183d36); }
.pf-straw-select-action { padding: 8px 12px; }
.pf-straw-select-action:disabled { opacity: .45; }
.pf-straw-select-cancel { padding: 8px 10px; background: rgba(255,255,255,.55); }
.pf-straw-card.is-selected {
  outline: 2px solid rgba(37,128,111,.65);
  outline-offset: 1px;
  background: rgba(211,242,232,.72);
}
.pf-storage-actions-top { margin: 8px 0 14px; }
.pf-storage-action:disabled,
.pf-storage-action[aria-disabled="true"] {
  opacity: .38;
  filter: saturate(.45);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.pf-storage-action:disabled:active,
.pf-storage-action[aria-disabled="true"]:active { transform: none; }

/* v392 — per-straw thaw layout: status marks sit on the first line at
   the physical right edge, while the thaw-history panel spans the full
   width of the straw card. */
.pf-straw-card {
  display: block;
  position: relative;
  padding: 12px 14px 14px;
}
.pf-straw-card > .row-main {
  width: 100%;
  max-width: 100%;
}
.pf-straw-head {
  position: relative;
  width: 100%;
  min-height: 32px;
  padding-right: 112px;
  box-sizing: border-box;
}
.pf-straw-head .row-title {
  padding-inline-end: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.pf-straw-status {
  position: absolute;
  top: 0;
  right: 0;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  z-index: 2;
}
.pf-straw-status .color-dots {
  margin-top: 0;
  gap: 0;
}
.pf-straw-status .color-dot {
  width: 22px;
  height: 22px;
}
.pf-straw-thaw-history {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(80, 150, 120, 0.08);
  border-inline-start: 3px solid rgba(80, 150, 120, 0.55);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* Clinics list (super_admin): a small coloured badge per row showing
   that clinic's current tier, cheapest-to-priciest getting a visually
   quieter-to-bolder treatment rather than three arbitrary colours. */
.tier-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.tier-badge.tier-basic { background: var(--line); color: var(--muted); }
.tier-badge.tier-professional { background: var(--tint); color: var(--accent); }
.tier-badge.tier-premium { background: var(--accent); color: #FFFFFF; }

/* Access-levels comparison table (Settings, every role). Wide content
   scrolls inside its own container rather than the page itself, same
   convention as any other table in this app. */
.tier-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
}
.tier-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tier-table th, .tier-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tier-table th:first-child, .tier-table td:first-child {
  text-align: start;
  white-space: normal;
  min-width: 170px;
}
.tier-table thead th {
  background: var(--tint);
  font-weight: 600;
  color: var(--ink);
}
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table .tier-yes { color: var(--accent); font-weight: 700; }
.tier-table .tier-no { color: var(--muted); }

/* Small round avatar on a staff row (Clinics -> one clinic's staff). */
.row-avatar-sm {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* Telegram WebView: keep the Excel file picker in the DOM and visually invisible instead of display:none, so input.click() reliably opens the native picker. */
.tank-excel-file-label{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;}
.file-picker-input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:5!important;}

/* Web login gate -- shown instead of the normal app when there's no
   Telegram context and no stored session (a genuine standalone web
   visit, not the mini app). Centered card, same glass/tile language
   as the rest of the app rather than a bespoke look. */
.web-login-gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg, #F4F7F6);
  z-index: 50;
}
.web-login-card {
  width: 100%;
  max-width: 360px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  padding: 28px 22px;
  text-align: center;
}
.web-login-title {
  margin: 0 0 22px;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}
.web-login-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.web-login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: start;
}
.web-login-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  font-size: 15px;
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
}
.web-login-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Small key-icon button on a staff row (Staff management), opening the
   set-login form for that person -- sits beside the existing active-dot
   indicator rather than replacing it. */
.row-key-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--tint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  margin-inline-end: 6px;
}
.row-key-btn:active {
  background: var(--accent);
}

/* Show/hide toggle beside any password field. */
.pw-toggle-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .6);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
}
.pw-toggle-btn.is-on {
  opacity: 1;
  background: var(--tint);
  border-color: var(--accent);
}


/* ICM v494 — robust native file picker for Telegram Android WebView.
   Do not use display:none/hidden for file inputs: Telegram may ignore a
   programmatic click on a hidden file control. The control remains in the
   DOM and receives the real tap while staying visually invisible. */
.file-input-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
}
.tank-excel-file-label{
  position:relative!important;
  overflow:hidden!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}

/* Excel picker: keep the native input off-screen, but do not use display:none; the button opens it synchronously. */
.tank-excel-input{
  position:fixed!important;
  left:-10000px!important;
  top:0!important;
  width:1px!important;
  height:1px!important;
  opacity:0.01!important;
  pointer-events:none!important;
}
.tank-excel-file-label .file-input-native{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  clip:auto!important;
  clip-path:none!important;
  cursor:pointer!important;
  z-index:10!important;
}
.profile-upload{
  position:relative;
}
.profile-upload .file-input-native{
  position:absolute!important;
  inset:auto!important;
  width:1px!important;
  height:1px!important;
}

/* v524 — date picker opened from an existing sheet must stack above the parent sheet. */
#datepick { z-index: 80 !important; }

/* v525 — Refer Embryos patient accordion now follows the compact Tank accordion pattern.
   Patient rows stay short; embryo rows only occupy the space they actually need. */
.genetic-referral-results{gap:7px}
.genetic-referral-patient-panel{
  padding:0;
  border-radius:var(--r-tile);
  overflow:hidden;
  background:var(--glass-bg);
}
.genetic-referral-patient-head{
  min-height:0;
  height:auto;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-tile);
  background:var(--glass-bg);
  color:inherit;
  box-shadow:none;
}
.genetic-referral-patient-head:active{transform:none;background:var(--tint)}
.genetic-referral-patient-info .row-title{font-size:14.5px;font-weight:500}
.genetic-referral-chevron{width:7px;height:7px;flex:0 0 auto;font-size:0;line-height:0;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
html[dir="rtl"] .genetic-referral-chevron{transform:rotate(135deg)}
.genetic-referral-chevron.is-open{transform:rotate(45deg)}
html[dir="rtl"] .genetic-referral-chevron.is-open{transform:rotate(-135deg)}
.genetic-referral-embryos{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  padding:0 0 0 16px;
  border-inline-start:2px solid var(--line);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .25s ease,opacity .18s ease,padding .25s ease,margin .25s ease;
}
.genetic-referral-embryos.is-open{
  max-height:2000px;
  opacity:1;
  margin:7px 0 4px;
  padding:0 0 0 16px;
}
html[dir="rtl"] .genetic-referral-embryos{padding-inline-start:16px}
.genetic-referral-embryos .genetic-referral-option{
  min-height:0;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-tile);
  background:var(--glass-bg);
  box-shadow:none;
}
.genetic-referral-embryos .genetic-referral-option:active{background:var(--tint)}
.genetic-referral-empty{padding:9px 4px}

/* v526 — Refer Embryos: patient results sit directly below search; selection order number is placed on the empty right side of each embryo row. */
.genetic-referral-results{margin-top:4px}
.genetic-referral-option{position:relative;display:flex;align-items:center;gap:10px}
.genetic-referral-embryos .genetic-referral-option{padding-right:48px;padding-left:12px}
.genetic-referral-option .genetic-referral-number{position:absolute;right:14px;top:50%;transform:translateY(-50%);min-width:22px;text-align:center;font-weight:700;font-size:15px;color:var(--accent,#168f73);opacity:0;transition:opacity .15s ease}
.genetic-referral-option .genetic-referral-number.is-visible{opacity:1}
.genetic-referral-option .genetic-referral-content{min-width:0;flex:1}
.genetic-referral-option input[type="checkbox"]{flex:0 0 auto}

/* v534 — Record embryos: ICSI date on row 1, retrieved-oocyte breakdown on row 2. */
.eb-icsi-fact { align-items: stretch; padding: 13px 15px; }
.eb-icsi-stack { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.eb-icsi-date-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.eb-icsi-date-row .fact-k { flex: 0 0 auto; }
.eb-icsi-date { text-align: start; white-space: normal; font-weight: 600; }
.eb-icsi-summary { color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.45; white-space: normal; text-align: start; }

/* ---------- v546 — clinical post-thaw survival workflow ----------
   The survival step is a clinical assessment, not a generic list form.
   Keep the hierarchy compact: patient context -> assessment section ->
   one purpose-built straw card per sample. */
#view-survival {
  padding-bottom: 18px;
}

#view-survival .survival-page-head {
  align-items: center;
  margin-bottom: 12px;
}

.survival-page-head > div:first-child { min-width: 0; }

.survival-kicker {
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

.survival-step {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 6px 10px;
  border: 1px solid rgba(14,124,107,.16);
  border-radius: 999px;
  background: rgba(14,124,107,.09);
  color: var(--accent);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
}

.survival-context {
  margin-bottom: 16px;
}

.survival-patient-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 20px;
  background: rgba(255,255,255,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 3px 14px rgba(20,49,44,.08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.survival-patient-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(14,124,107,.13);
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
}

.survival-patient-main { min-width: 0; }
.survival-patient-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.survival-patient-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.survival-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 10px;
}
.survival-section-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}
.survival-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.survival-total-pill {
  flex: 0 0 auto;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(14,124,107,.10);
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  direction: ltr;
}
.survival-total-pill::after {
  content: '';
  display: none;
}

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

.survival-straw-card {
  padding: 13px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 3px 13px rgba(20,49,44,.07);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

.survival-straw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.survival-straw-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.survival-color-dots {
  flex: 0 0 auto;
}
.survival-straw-title-wrap { min-width: 0; }
.survival-straw-title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.survival-straw-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}
.survival-capacity {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(20,49,44,.055);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  direction: rtl;
}

.survival-entry {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(20,49,44,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.survival-entry-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  unicode-bidi: plaintext;
}

.survival-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border: 1px solid rgba(20,49,44,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
  box-shadow: inset 0 1px 2px rgba(20,49,44,.05);
}
.survival-step-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(14,124,107,.09);
  color: var(--accent);
  font-size: 21px;
  line-height: 1;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
}
.survival-step-btn:active {
  background: rgba(14,124,107,.18);
  transform: scale(.96);
}
#view-survival .sv-input {
  width: 48px !important;
  min-width: 48px;
  max-width: 48px;
  height: 34px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  font-size: 17px;
  line-height: 34px;
  font-weight: 700;
  direction: ltr;
  box-shadow: none;
}
#view-survival .sv-input:focus {
  border: 0;
  box-shadow: none;
}

.survival-footer {
  /* Keep the primary action in the document flow. It must never float over
     or obscure the last straw card or the fixed bottom navigation. */
  margin-top: 16px;
  padding: 10px;
  position: relative;
  z-index: auto;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 20px;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84),
              0 3px 13px rgba(20,49,44,.06);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.survival-footer .btn {
  display: block;
  width: 100%;
  margin-top: 0;
  min-height: 48px;
  border-radius: 14px;
  font-weight: 700;
}

/* The queue shown before the actual assessment is a worklist. Make each
   case read as a clinical item rather than a large generic button. */
#th-menu-panel .panel-note {
  margin-bottom: 3px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
#th-menu-panel > .note:not(.panel-note) {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}
#th-survival-list {
  display: grid;
  gap: 9px;
}
#th-survival-list .th-survival-row {
  width: 100%;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 2px 9px rgba(20,49,44,.06);
}
#th-survival-list .th-survival-row:active {
  transform: scale(.992);
  background: rgba(14,124,107,.09);
}
#th-survival-list .row-main { min-width: 0; }
#th-survival-list .row-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
#th-survival-list .row-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
#th-survival-list .th-survival-badge {
  flex: 0 0 auto;
  max-width: none;
  padding: 6px 9px;
  border: 1px solid rgba(176,106,0,.16);
  background: rgba(176,106,0,.09);
  color: var(--caution);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .survival-straw-card { padding: 11px; }
  .survival-capacity { display: none; }
  .survival-entry-label { font-size: 11px; }
}

/* v547 — cleaner survival action hierarchy on mobile */
#view-survival .survival-list {
  gap: 12px;
}
#view-survival .survival-straw-card {
  overflow: hidden;
}
#view-survival .survival-entry {
  margin-top: 13px;
  padding-top: 12px;
}
#view-survival .survival-stepper {
  flex: 0 0 auto;
}
@media (max-width: 380px) {
  #view-survival .survival-entry {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-survival .survival-stepper {
    align-self: flex-end;
  }
}

/* Post-thaw survival total: read-only summary, not an editable field. */
#view-survival .survival-total-summary {
  min-width: 92px;
  min-height: 48px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 14px;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78),
              0 2px 8px rgba(20,49,44,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
}
#view-survival .survival-total-label {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
}
#view-survival .survival-total-value {
  color: var(--accent);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
  direction: ltr;
}
@media (max-width: 420px) {
  #view-survival .survival-total-summary { min-width: 82px; }
}

/* v549 — polished survival summary */
#view-survival .survival-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

#view-survival .survival-total-summary {
  position: relative;
  min-width: 104px;
  height: 58px;
  padding: 7px 14px 8px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(235,249,243,.42));
  box-shadow:
    0 5px 16px rgba(30,74,64,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

#view-survival .survival-total-summary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: var(--accent);
  opacity: .72;
}

#view-survival .survival-total-label {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
}

#view-survival .survival-total-value {
  margin-top: 2px;
  color: var(--accent);
  font-size: 23px;
  line-height: 1;
  font-weight: 800;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  #view-survival .survival-section-head {
    gap: 10px;
  }
  #view-survival .survival-total-summary {
    min-width: 94px;
    height: 54px;
    border-radius: 16px;
  }
  #view-survival .survival-total-value {
    font-size: 21px;
  }
}

/* v550 — survival Back follows the actual entry point. */
#view-survival .survival-page-head { position: relative; }


/* ---------- Embryo Transfer: no decorative procedure image ---------- */
#view-et-list img,
#view-et-list picture {
  display: none !important;
}
#view-et-list .et-hero,
#view-et-list .et-transfer-hero,
#view-et-list .embryo-transfer-hero,
#view-et-list .transfer-hero,
#view-et-list .procedure-image {
  display: none !important;
}
#view-et-list .et-title-box {
  background-image: none !important;
}

/* ICM v564 — unified dashboard section capsules */
#view-dashboard .dashboard-block{
  margin-top:16px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(226,241,237,.12));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:var(--glass-edge),0 6px 18px rgba(20,49,44,.045);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
#view-dashboard .dashboard-block .block-title{
  margin:0 0 12px;
  padding:0 2px;
  min-height:28px;
  display:flex;
  align-items:center;
  font-size:17px;
  line-height:1.2;
  font-weight:750;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
#view-dashboard .dashboard-action-row{cursor:pointer;transition:transform .14s ease,background .14s ease;}
#view-dashboard .dashboard-action-row:active{transform:scale(.985);}
#view-dashboard .dashboard-action-row:focus-visible{outline:2px solid rgba(14,124,107,.38);outline-offset:2px;}
#view-dashboard .dashboard-block .dashboard-row,
#view-dashboard .dashboard-block .dashboard-patient-row{
  width:100%;
  box-sizing:border-box;
  margin:0 0 9px;
}
#view-dashboard .dashboard-block .dashboard-row:last-child,
#view-dashboard .dashboard-block .dashboard-patient-row:last-child{
  margin-bottom:0;
}
#view-dashboard .dashboard-attention-empty,
#view-dashboard .dashboard-recent-empty{
  margin:0;
  padding:14px 8px;
}
@media (max-width:430px){
  #view-dashboard .dashboard-block{padding:13px;border-radius:20px;margin-top:15px;}
  #view-dashboard .dashboard-block .block-title{margin-bottom:11px;padding:0 5px;}
}

/* ICM v568 — keep the Dashboard hero glass box, but remove the capsule chrome from its title. */
#view-dashboard .dashboard-hero .view-title{
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding:0!important;
}


/* ICM v570 — patient identity is a distinct soft glass box with rounded corners. */
.pf-patient-name {
  min-height: 58px;
  margin: 0 0 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 16px;
  box-shadow: var(--glass-edge), 0 4px 14px rgba(20,49,44,.045);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-sizing: border-box;
}

/* Keep the two storage actions and the PDF report on one consistent vertical rhythm. */
.pf-storage-actions-bottom {
  gap: 10px !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
.pf-card > .pf-report {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* ICM v572 — Dashboard Needs attention and Recent patients use the same
   inner-list behavior as Puncture: compact inner cards, 8px spacing, and
   a fixed scroll viewport. Only the inner list scrolls; the glass section
   itself stays in place. */
#view-dashboard .dashboard-block .rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:424px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
  overscroll-behavior:contain;
}
#view-dashboard .dashboard-block .dashboard-row,
#view-dashboard .dashboard-block .dashboard-patient-row{
  margin:0;
}

/* ICM v571 — dashboard box spacing: one consistent vertical rhythm.
   The shared .rows gap plus per-row margins previously doubled the spacing
   and made the dashboard cards look uneven. Dashboard rows now use one
   spacing rule for both Needs attention and Recent patients. */
#view-dashboard .rows{display:flex;flex-direction:column;gap:14px;}
#view-dashboard .dashboard-row,
#view-dashboard .dashboard-patient-row{margin-bottom:0;}

/* ICM v572 FINAL — Dashboard inner lists match Puncture exactly. */
#view-dashboard .dashboard-block .rows{
  display:flex;
  flex-direction:column;
  gap:8px !important;
  max-height:424px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  z-index:1;
  overscroll-behavior:contain;
}
#view-dashboard .dashboard-block .dashboard-row,
#view-dashboard .dashboard-block .dashboard-patient-row{
  margin:0 !important;
}

/* ICM v574 — Dashboard queues show a maximum of four cards at once.
   Additional Needs attention / Recent patients remain inside the same
   scrollable list, while the existing edge-scroll chaining is preserved. */
#view-dashboard .dashboard-block .rows{
  max-height:256px !important; /* 4 × 58px rows + 3 × 8px gaps */
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
#view-dashboard .dashboard-block .dashboard-row,
#view-dashboard .dashboard-block .dashboard-patient-row{
  flex:0 0 58px;
  min-height:58px;
  box-sizing:border-box;
}


/* Application Tour — focused spotlight with compact glass instruction card. */
.application-tour{position:fixed;inset:0;z-index:10000;pointer-events:auto}
.application-tour.hidden{display:none}

/* ================================================================
   ICM v580 — Desktop web layout
   Mobile remains unchanged. On wide screens the app becomes a true
   desktop workspace: a persistent left/right sidebar replaces the
   bottom tab bar, while the clinical content uses the remaining width.
   This follows Telegram's responsive/mobile-first guidance while giving
   the browser/desktop experience its own information architecture.
   ================================================================ */
.desktop-sidebar{display:none}

@media (min-width:900px){
  :root{
    --desktop-sidebar-width:272px;
    --desktop-content-max:1540px;
    --desktop-page-pad:28px;
  }

  html,body{min-height:100%;overflow-x:hidden}
  body{font-size:15px}

  /* Desktop has persistent navigation, so the mobile bottom bar is removed. */
  body > .app > .tabbar,
  body > .app > .dots,
  .tabbar.coordinator-tabbar{display:none!important}

  #staff.app{
    min-height:100vh;
    padding-inline-start:var(--desktop-sidebar-width);
  }

  #staff .clinic-header{
    margin:0;
    padding:18px var(--desktop-page-pad) 0;
    position:relative;
    z-index:20;
  }
  #staff .hero{max-width:var(--desktop-content-max);margin:0 auto}
  #staff .hero-plate{
    min-height:82px;
    border-radius:22px;
  }
  #staff .hero-main{padding:14px 18px}
  #staff .hero-name{font-size:20px}

  #staff .view{
    width:100%;
    max-width:var(--desktop-content-max);
    margin:0 auto;
    padding:24px var(--desktop-page-pad) 42px;
  }

  #staff #view-home{
    padding-top:20px;
  }
  #staff #view-home2,#staff #view-home3{display:none!important}

  /* Desktop home is a dashboard-style workspace rather than the mobile
     vertical card stream. Existing tiles keep their permissions and actions. */
  #staff #view-home > #menu,
  #staff #view-home > #menu2,
  #staff #view-home > #menu3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    align-items:start;
  }
  #staff #view-home .menu-group{
    min-width:0;
    margin:0;
    padding:18px;
  }
  #staff #view-home .menu-group .grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #staff #view-home .menu-group .tile{
    min-height:116px;
    width:100%;
  }
  #staff #view-home .menu-group .tile.is-wide,
  #staff #view-home .menu-group .tile.inventory-nav-tile.is-wide{
    grid-column:1/-1;
  }

  .desktop-sidebar{
    position:fixed;
    inset-block:0;
    inset-inline-start:0;
    width:var(--desktop-sidebar-width);
    display:flex;
    flex-direction:column;
    z-index:100;
    padding:22px 14px 16px;
    background:rgba(245,250,248,.82);
    border-inline-end:1px solid rgba(20,49,44,.10);
    box-shadow:8px 0 30px rgba(20,49,44,.07);
    backdrop-filter:blur(22px) saturate(145%);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
  }
  html[dir="rtl"] .desktop-sidebar{
    inset-inline-start:auto;
    inset-inline-end:0;
    border-inline-end:0;
    border-inline-start:1px solid rgba(20,49,44,.10);
    box-shadow:-8px 0 30px rgba(20,49,44,.07);
  }
  html[dir="rtl"] #staff.app{padding-inline-start:0;padding-inline-end:var(--desktop-sidebar-width)}

  .desktop-sidebar-head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:5px 8px 18px;
    border-bottom:1px solid rgba(20,49,44,.09);
    margin-bottom:12px;
  }
  .desktop-sidebar-mark{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:13px;
    background:var(--tint);
    color:var(--accent);
    font-size:13px;font-weight:800;letter-spacing:.5px;
    border:1px solid rgba(14,124,107,.18);
  }
  .desktop-sidebar-title{font-weight:800;font-size:17px;line-height:1.2}
  .desktop-sidebar-subtitle{font-size:11px;color:var(--muted);margin-top:2px}

  .desktop-nav{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:2px 0 10px;
    scrollbar-width:thin;
  }
  .desktop-nav-section{margin:0 0 14px}
  .desktop-nav-section-title{
    padding:0 10px 6px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
  }
  .desktop-nav-item{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px 10px;
    margin:2px 0;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:13px;
    text-align:start;
    cursor:pointer;
    transition:background .16s ease,transform .16s ease,color .16s ease;
  }
  .desktop-nav-item:hover{background:rgba(14,124,107,.08)}
  .desktop-nav-item.is-on{background:rgba(14,124,107,.12);color:var(--accent);font-weight:700}
  .desktop-nav-icon{
    width:28px;height:28px;flex:0 0 28px;
    display:grid;place-items:center;
  }
  .desktop-nav-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .desktop-nav-icon img{width:23px;height:23px;object-fit:contain}
  .desktop-nav-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-sidebar-foot{border-top:1px solid rgba(20,49,44,.09);padding-top:10px}

  /* The persistent desktop sidebar is the navigation; Back is only for
     pushed/detail views and therefore remains useful through Telegram's
     native header without competing with the sidebar. */
  #staff .view-title{font-size:21px}
  #staff .list-panel,#staff .form-card,#staff .dashboard-block,#staff .inventory-overview-card{max-width:none}

  /* On desktop, dashboard queues can use the available width/height instead
     of the mobile four-card viewport. */
  #view-dashboard .dashboard-block .rows{max-height:420px!important}

  /* Patient/search lists and clinical work queues get a wider two-column
     rhythm when the content naturally contains cards. */
  #view-search .searchbar{max-width:720px}
  #view-puncture .puncture-list-panel .rows,
  #view-icsi .icsi-list-panel .rows{max-height:560px}

  /* Keep modal/sheet layers above the sidebar. */
  #sheet,#date-picker,#time-picker,#application-tour{z-index:1000}
}

@media (min-width:1500px){
  :root{--desktop-sidebar-width:292px;--desktop-page-pad:34px}
  #staff #view-home > #menu,
  #staff #view-home > #menu2,
  #staff #view-home > #menu3{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* When the page is opened in a narrower desktop/tablet browser, keep the
   mobile navigation until the desktop workspace has enough room to breathe. */
@media (min-width:768px) and (max-width:899px){
  #staff .view{max-width:1100px;margin-inline:auto}
}


/* Super Admin user removal */
.row-danger-btn{border:1px solid rgba(220,80,80,.35);background:rgba(220,80,80,.08);color:#d85b5b;border-radius:12px;padding:7px 10px;font:inherit;font-size:12px;cursor:pointer;margin-left:6px;}
.row-danger-btn:disabled{opacity:.5;cursor:default;}


/* v585 — rounded Invite Colleague clinic selector */
.invite-clinic-card{
  padding:22px 20px 20px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.22);
  box-shadow:0 12px 32px rgba(26,75,54,.07), inset 0 1px 0 rgba(255,255,255,.35);
}
.invite-clinic-heading{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:16px;
}
.invite-clinic-heading-icon{
  width:42px;height:42px;min-width:42px;border-radius:13px;
  display:grid;place-items:center;
  color:var(--accent,#4f9b72);
  background:rgba(92,171,125,.12);
  border:1px solid rgba(92,171,125,.18);
}
.invite-clinic-heading-icon svg{width:22px;height:22px}
.invite-clinic-label{
  font-size:16px;font-weight:700;line-height:1.25;
  color:var(--text,#17372a);
}
.invite-clinic-helper{
  margin-top:4px;font-size:13px;line-height:1.45;
  color:var(--muted,#668075);
}
.invite-clinic-select{
  width:100%; min-height:72px; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-radius:20px;
  border:1px solid rgba(92,132,112,.25);
  background:rgba(255,255,255,.68);
  color:var(--text,#17372a);
  text-align:left; cursor:pointer;
  box-shadow:0 5px 16px rgba(32,82,58,.05), inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.invite-clinic-select:hover{
  border-color:rgba(79,155,114,.42);
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 20px rgba(32,82,58,.08);
}
.invite-clinic-select:active{transform:scale(.995)}
.invite-clinic-select:focus-visible{
  outline:3px solid rgba(79,155,114,.18);
  outline-offset:2px;
  border-color:rgba(79,155,114,.55);
}
.invite-clinic-value-wrap{
  min-width:0; display:flex; flex-direction:column; gap:4px;
}
.invite-clinic-value-label{
  font-size:11px; font-weight:650; text-transform:uppercase;
  letter-spacing:.055em; color:#7a9287;
}
#colleague-invite-clinic-name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:17px; font-weight:700; line-height:1.25;
}
.invite-clinic-chevron{
  width:34px;height:34px;min-width:34px;border-radius:11px;
  display:grid;place-items:center;
  color:#4f8468; background:rgba(79,155,114,.10);
  font-size:20px; line-height:1;
}
.invite-clinic-select.is-locked{
  cursor:default; opacity:.9;
}
@media (max-width:600px){
  .invite-clinic-card{padding:18px 15px 16px}
  .invite-clinic-heading{gap:11px;margin-bottom:13px}
  .invite-clinic-heading-icon{width:38px;height:38px;min-width:38px;border-radius:12px}
  .invite-clinic-helper{font-size:12px}
  .invite-clinic-select{min-height:68px;border-radius:16px;padding:11px 14px}
}

/* v586 — desktop web app breakpoint/cache fix.
   The browser version must become a true desktop workspace before very wide
   1200px windows; 1024px is the practical desktop threshold for the web app. */
@media (min-width:900px){
  html.desktop-web .desktop-sidebar{display:flex!important}
  html.desktop-web body > .app > .tabbar,
  html.desktop-web .tabbar.coordinator-tabbar{display:none!important}
  html.desktop-web #staff.app{padding-inline-start:var(--desktop-sidebar-width)}
  html.desktop-web[dir="rtl"] #staff.app{padding-inline-start:0;padding-inline-end:var(--desktop-sidebar-width)}
  html.desktop-web #staff .view{width:auto}
}

/* ================================================================
   ICM v589 — Professional Desktop Web Workspace
   Research-informed healthcare SaaS direction:
   neutral workspace, persistent task-based sidebar, compact topbar,
   clear hierarchy, restrained accent, data-first cards.
   Mobile/Telegram presentation is intentionally left untouched.
   ================================================================ */
@media (min-width:900px){
  :root{
    --desktop-sidebar-width:248px;
    --desktop-content-max:1500px;
    --desktop-page-pad:32px;
    --desktop-bg:#f4f7f6;
    --desktop-surface:#ffffff;
    --desktop-border:#e4ebe8;
    --desktop-text:#18332c;
    --desktop-muted:#71827d;
    --desktop-accent:#087f6b;
    --desktop-accent-soft:#e9f5f1;
    --desktop-shadow:0 8px 28px rgba(18,54,45,.055);
  }

  html.desktop-web,
  html.desktop-web body{
    background:var(--desktop-bg)!important;
  }
  html.desktop-web #bg-layer{display:none!important}
  html.desktop-web body{color:var(--desktop-text);font-size:14px}

  /* --- Desktop shell --- */
  html.desktop-web #staff.app{
    padding-inline-start:var(--desktop-sidebar-width)!important;
    min-height:100vh;
    background:var(--desktop-bg);
  }
  html.desktop-web[dir="rtl"] #staff.app{
    padding-inline-start:0!important;
    padding-inline-end:var(--desktop-sidebar-width)!important;
  }

  /* --- Sidebar: clean enterprise navigation, not glass --- */
  html.desktop-web .desktop-sidebar{
    width:var(--desktop-sidebar-width)!important;
    box-sizing:border-box;
    padding:20px 12px 14px!important;
    background:#fff!important;
    border:0!important;
    border-inline-end:1px solid var(--desktop-border)!important;
    box-shadow:4px 0 18px rgba(17,50,42,.035)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.desktop-web[dir="rtl"] .desktop-sidebar{
    border-inline-end:0!important;
    border-inline-start:1px solid var(--desktop-border)!important;
    box-shadow:-4px 0 18px rgba(17,50,42,.035)!important;
  }
  html.desktop-web .desktop-sidebar-head{
    padding:3px 8px 18px!important;
    margin-bottom:14px!important;
    border-bottom:1px solid var(--desktop-border)!important;
  }
  html.desktop-web .desktop-sidebar-mark{
    width:40px;height:40px;border-radius:12px;
    background:var(--desktop-accent)!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 5px 12px rgba(8,127,107,.16);
  }
  html.desktop-web .desktop-sidebar-title{font-size:16px;color:var(--desktop-text)}
  html.desktop-web .desktop-sidebar-subtitle{font-size:11px;color:var(--desktop-muted)}
  html.desktop-web .desktop-nav{padding:0 1px 12px}
  html.desktop-web .desktop-nav-section{margin-bottom:18px}
  html.desktop-web .desktop-nav-section-title{
    padding:0 10px 7px!important;
    color:#91a09c!important;
    font-size:10px!important;
    letter-spacing:.08em!important;
    font-weight:800!important;
  }
  html.desktop-web .desktop-nav-item{
    position:relative;
    min-height:42px!important;
    margin:2px 0!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    color:#50625d!important;
    font-size:13px!important;
    font-weight:550;
    transition:background .15s ease,color .15s ease,transform .15s ease;
  }
  html.desktop-web .desktop-nav-item:hover{
    background:#f3f7f5!important;
    color:var(--desktop-text)!important;
    transform:none!important;
  }
  html.desktop-web .desktop-nav-item.is-on{
    background:var(--desktop-accent-soft)!important;
    color:var(--desktop-accent)!important;
    font-weight:750!important;
  }
  html.desktop-web .desktop-nav-item.is-on::before{
    content:"";
    position:absolute;
    inset-block:8px;
    inset-inline-start:0;
    width:3px;
    border-radius:0 4px 4px 0;
    background:var(--desktop-accent);
  }
  html.desktop-web[dir="rtl"] .desktop-nav-item.is-on::before{
    inset-inline-start:auto;
    inset-inline-end:0;
    border-radius:4px 0 0 4px;
  }
  html.desktop-web .desktop-nav-icon{
    width:30px!important;height:30px!important;
    flex-basis:30px!important;
    border-radius:8px;
    background:#f5f8f7;
    color:#6b7c77;
  }
  html.desktop-web .desktop-nav-item.is-on .desktop-nav-icon{
    background:#dff0eb;
    color:var(--desktop-accent);
  }
  html.desktop-web .desktop-nav-icon svg{width:18px!important;height:18px!important;stroke-width:1.8}
  html.desktop-web .desktop-nav-icon img{width:18px!important;height:18px!important}
  html.desktop-web .desktop-sidebar-foot{
    padding-top:10px!important;
    border-top:1px solid var(--desktop-border)!important;
  }

  /* --- Topbar: clinic context + user context --- */
  html.desktop-web #staff .clinic-header{
    position:sticky!important;
    top:0!important;
    z-index:90!important;
    margin:0!important;
    padding:0!important;
    background:rgba(244,247,246,.94)!important;
    border-bottom:1px solid var(--desktop-border);
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  html.desktop-web #staff .hero{
    max-width:none!important;
    margin:0!important;
  }
  html.desktop-web #staff .hero-plate{
    min-height:70px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.desktop-web #staff .hero-main{
    min-height:70px;
    box-sizing:border-box;
    max-width:var(--desktop-content-max);
    margin:0 auto;
    padding:10px var(--desktop-page-pad)!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
  }
  html.desktop-web #staff .hero-account{order:2}
  html.desktop-web #staff .hero-clinic{order:1}
  html.desktop-web #staff .hero-divider{display:none!important}
  html.desktop-web #staff .hero-clinic-select{padding:0!important}
  html.desktop-web #staff .hero-name{font-size:18px!important;font-weight:800!important;color:var(--desktop-text)!important}
  html.desktop-web #staff .hero-management{font-size:11px!important;color:var(--desktop-muted)!important;margin-top:2px!important}
  html.desktop-web #staff .hero-clinic-chevron{font-size:16px!important;color:var(--desktop-muted)!important}
  html.desktop-web #staff .chip-user{font-size:13px!important;font-weight:750!important;color:var(--desktop-text)!important}
  html.desktop-web #staff .chip-title{font-size:10px!important;color:var(--desktop-muted)!important}
  html.desktop-web #staff .chip-role-button{font-size:10px!important}

  /* --- Content canvas --- */
  html.desktop-web #staff .view{
    width:auto!important;
    max-width:var(--desktop-content-max)!important;
    margin:0 auto!important;
    padding:26px var(--desktop-page-pad) 48px!important;
    box-sizing:border-box;
  }
  html.desktop-web #staff #view-home{padding-top:24px!important}

  /* Today = dashboard work queue. */
  html.desktop-web #view-home .today-page{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)!important;
    gap:16px!important;
    padding:0!important;
    margin:0 0 20px!important;
  }
  html.desktop-web #view-home .today-datebox{
    min-height:112px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    background:#fff!important;
    border:1px solid var(--desktop-border)!important;
    border-radius:14px!important;
    box-shadow:var(--desktop-shadow)!important;
    backdrop-filter:none!important;
  }
  html.desktop-web #view-home .today-date{
    font-size:22px!important;
    font-weight:800!important;
    color:var(--desktop-text)!important;
  }
  html.desktop-web #view-home .today-section{
    min-height:112px;
    box-sizing:border-box;
    background:#fff!important;
    border:1px solid var(--desktop-border)!important;
    border-radius:14px!important;
    box-shadow:var(--desktop-shadow)!important;
    padding:18px 20px!important;
    backdrop-filter:none!important;
  }
  html.desktop-web #view-home .today-section-head h3{font-size:16px!important;font-weight:800!important}

  /* Menu becomes an actual application workspace, not a collection of
     translucent Telegram-style cards. */
  html.desktop-web #staff #view-home > #menu,
  html.desktop-web #staff #view-home > #menu2,
  html.desktop-web #staff #view-home > #menu3{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    align-items:start!important;
  }
  html.desktop-web #staff #view-home .menu-group{
    min-width:0!important;
    padding:18px!important;
    margin:0!important;
    background:#fff!important;
    border:1px solid var(--desktop-border)!important;
    border-radius:14px!important;
    box-shadow:var(--desktop-shadow)!important;
    backdrop-filter:none!important;
  }
  html.desktop-web #staff #view-home .menu-group .block-title{
    padding:0!important;
    margin:0 2px 14px!important;
    color:var(--desktop-text)!important;
    font-size:14px!important;
    font-weight:800!important;
  }
  html.desktop-web #staff #view-home .menu-group .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile{
    min-height:76px!important;
    box-sizing:border-box;
    padding:12px!important;
    background:#fbfcfc!important;
    border:1px solid #e8eeeb!important;
    border-radius:11px!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease;
  }
  html.desktop-web #staff #view-home .menu-group .tile:hover{
    background:#fff!important;
    border-color:#cfe2dc!important;
    box-shadow:0 5px 14px rgba(18,54,45,.055)!important;
    transform:translateY(-1px);
  }
  html.desktop-web #staff #view-home .menu-group .tile-ico{
    width:36px!important;height:36px!important;
    border-radius:10px!important;
    background:#edf6f3!important;
    color:var(--desktop-accent)!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile-label{
    font-size:13px!important;
    font-weight:650!important;
    line-height:1.35!important;
    color:#29443b!important;
  }

  /* Common clinical surfaces: white, flat, calm and readable. */
  html.desktop-web #staff .block,
  html.desktop-web #staff .list-panel,
  html.desktop-web #staff .form-card,
  html.desktop-web #staff .dashboard-block,
  html.desktop-web #staff .inventory-overview-card,
  html.desktop-web #staff .summary,
  html.desktop-web #staff .today-fullscreen-body{
    background:#fff!important;
    border-color:var(--desktop-border)!important;
    border-radius:14px!important;
    box-shadow:var(--desktop-shadow)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html.desktop-web #staff .row,
  html.desktop-web #staff .sample-row,
  html.desktop-web #staff .tank{
    background:#fbfcfc!important;
    border-color:#e7eeeb!important;
    border-radius:10px!important;
  }
  html.desktop-web #staff .view-title{font-size:22px!important;font-weight:800!important;color:var(--desktop-text)!important}
  html.desktop-web #staff .view-subtitle{color:var(--desktop-muted)!important}

  /* Desktop tables/lists should breathe and use the full canvas. */
  html.desktop-web #view-search .searchbar{max-width:none!important}
  html.desktop-web #view-puncture .puncture-list-panel .rows,
  html.desktop-web #view-icsi .icsi-list-panel .rows{max-height:calc(100vh - 250px)!important}

  /* Remove decorative glass treatment from desktop forms while retaining
     the existing field geometry and rounded corners. */
  html.desktop-web input,
  html.desktop-web select,
  html.desktop-web textarea{
    background:#fff!important;
    border-color:#dfe8e4!important;
    box-shadow:none!important;
  }
  html.desktop-web input:focus,
  html.desktop-web select:focus,
  html.desktop-web textarea:focus{
    border-color:#8dc9bb!important;
    box-shadow:0 0 0 3px rgba(8,127,107,.09)!important;
  }

  /* Invite colleague follows the same enterprise surface language. */
  html.desktop-web .invite-clinic-card{
    background:#fff!important;
    border:1px solid var(--desktop-border)!important;
    border-radius:14px!important;
    box-shadow:var(--desktop-shadow)!important;
    backdrop-filter:none!important;
  }
  html.desktop-web .invite-clinic-select{
    background:#fbfcfc!important;
    border-color:#dfe8e4!important;
    border-radius:11px!important;
    box-shadow:none!important;
  }

  /* Wide screens get more breathing room without oversized components. */
  @media (min-width:1400px){
    html.desktop-web #staff #view-home > #menu,
    html.desktop-web #staff #view-home > #menu2,
    html.desktop-web #staff #view-home > #menu3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  }
}


/* ================================================================
   ICM v590 — Desktop action controls and menu information hierarchy.
   Mobile/Telegram layout is intentionally unaffected.
   ================================================================ */
@media (min-width:900px){
  /* Dashboard groups are compact navigation panels; options read as
     purposeful action rows rather than a grid of oversized mobile tiles. */
  html.desktop-web #staff #view-home > #menu,
  html.desktop-web #staff #view-home > #menu2,
  html.desktop-web #staff #view-home > #menu3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    align-items:stretch!important;
  }
  html.desktop-web #staff #view-home .menu-group{
    padding:18px 18px 14px!important;
    border-radius:16px!important;
  }
  html.desktop-web #staff #view-home .menu-group .block-title{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:30px!important;
    padding:0 0 12px!important;
    margin:0 0 8px!important;
    border-bottom:1px solid #edf1ef!important;
    font-size:14px!important;
    letter-spacing:.005em!important;
  }
  html.desktop-web #staff #view-home .menu-group .grid{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile{
    position:relative!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:100%!important;
    min-height:56px!important;
    padding:9px 38px 9px 10px!important;
    text-align:start!important;
    background:#fff!important;
    border:1px solid #edf1ef!important;
    border-radius:11px!important;
    box-shadow:none!important;
    transform:none;
  }
  html.desktop-web[dir="rtl"] #staff #view-home .menu-group .tile{
    padding:9px 10px 9px 38px!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile::after{
    content:"";
    position:absolute;
    inset-inline-end:16px;
    top:50%;
    width:7px;height:7px;
    border-top:1.7px solid #9aa9a4;
    border-right:1.7px solid #9aa9a4;
    transform:translateY(-50%) rotate(45deg);
    transition:transform .15s ease,border-color .15s ease;
  }
  html.desktop-web[dir="rtl"] #staff #view-home .menu-group .tile::after{
    transform:translateY(-50%) rotate(-135deg);
  }
  html.desktop-web #staff #view-home .menu-group .tile:hover{
    background:#f9fcfb!important;
    border-color:#c8e1d9!important;
    box-shadow:0 3px 10px rgba(18,54,45,.045)!important;
    transform:translateY(-1px)!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile:hover::after{
    border-color:var(--desktop-accent);
  }
  html.desktop-web #staff #view-home .menu-group .tile-ico{
    width:36px!important;height:36px!important;
    flex:0 0 36px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    background:#eff7f4!important;
    color:var(--desktop-accent)!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile-ico svg{
    width:19px!important;height:19px!important;
    stroke-width:1.8!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile-label{
    display:block!important;
    min-width:0!important;
    font-size:13px!important;
    font-weight:650!important;
    line-height:1.35!important;
    color:#29443b!important;
    overflow-wrap:anywhere!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile.is-wide{
    grid-column:auto!important;
  }

  /* Unified desktop button system: clear hierarchy, predictable sizing,
     accessible focus, and less pill-like styling than the mobile UI. */
  html.desktop-web #staff .btn,
  html.desktop-web #staff button.btn{
    min-height:40px!important;
    box-sizing:border-box!important;
    padding:9px 15px!important;
    border-radius:9px!important;
    border:1px solid #dbe5e1!important;
    background:#fff!important;
    color:#35534a!important;
    font-size:13px!important;
    font-weight:650!important;
    line-height:1.3!important;
    box-shadow:none!important;
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
  }
  html.desktop-web #staff .btn:hover:not(:disabled),
  html.desktop-web #staff button.btn:hover:not(:disabled){
    background:#f6faf8!important;
    border-color:#b9d7ce!important;
    box-shadow:0 2px 7px rgba(18,54,45,.05)!important;
  }
  html.desktop-web #staff .btn:focus-visible,
  html.desktop-web #staff button.btn:focus-visible{
    outline:3px solid rgba(8,127,107,.2)!important;
    outline-offset:2px!important;
  }
  html.desktop-web #staff .btn.btn-primary,
  html.desktop-web #staff button.btn-primary{
    background:#087f6b!important;
    border-color:#087f6b!important;
    color:#fff!important;
    box-shadow:0 2px 4px rgba(8,127,107,.12)!important;
  }
  html.desktop-web #staff .btn.btn-primary:hover:not(:disabled),
  html.desktop-web #staff button.btn-primary:hover:not(:disabled){
    background:#066b5a!important;
    border-color:#066b5a!important;
    box-shadow:0 4px 10px rgba(8,127,107,.16)!important;
  }
  html.desktop-web #staff .btn.btn-secondary{
    background:#edf6f3!important;
    border-color:#d5e9e2!important;
    color:#087f6b!important;
  }
  html.desktop-web #staff .btn.btn-quiet{
    background:transparent!important;
    border-color:transparent!important;
    color:#60736c!important;
    box-shadow:none!important;
  }
  html.desktop-web #staff .btn.btn-quiet:hover:not(:disabled){
    background:#f1f6f4!important;
    border-color:#e5eeea!important;
  }
  html.desktop-web #staff .btn:disabled,
  html.desktop-web #staff button.btn:disabled{
    opacity:.48!important;
    cursor:not-allowed!important;
    box-shadow:none!important;
  }
  html.desktop-web #staff .btn-wide{margin-top:10px!important}
  html.desktop-web #staff .view-head .btn,
  html.desktop-web #staff .view-head button{white-space:nowrap}

  /* Keep navigation controls and clinical list rows aligned and calm. */
  html.desktop-web .desktop-nav-item{min-height:44px!important;border-radius:9px!important}
  html.desktop-web #staff .row,
  html.desktop-web #staff .sample-row,
  html.desktop-web #staff .tank{transition:border-color .15s ease,background .15s ease!important}
  html.desktop-web #staff .row:hover,
  html.desktop-web #staff .sample-row:hover{border-color:#cfe2dc!important;background:#f9fcfb!important}
}
@media (min-width:1400px){
  html.desktop-web #staff #view-home > #menu,
  html.desktop-web #staff #view-home > #menu2,
  html.desktop-web #staff #view-home > #menu3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* ========================================================================
   ICM v591 — Desktop web redesign
   Direction: independent clinical SaaS workspace, not Telegram/Mini-App.
   The desktop experience uses a photographic hero, horizontal navigation
   rails and wide work surfaces. Mobile styles remain untouched.
   ======================================================================== */
@media (min-width:900px) and (hover:hover){
  html.desktop-web{
    --web-bg:#f4f7f6;
    --web-ink:#18342d;
    --web-muted:#6b7d77;
    --web-green:#087f6b;
    --web-green-2:#0b9a82;
    --web-line:#dce7e2;
    --web-card:#ffffff;
    background:var(--web-bg)!important;
  }

  html.desktop-web body{
    background:var(--web-bg)!important;
    color:var(--web-ink)!important;
  }

  /* No desktop sidebar: the web product has a true top navigation system. */
  html.desktop-web #desktop-sidebar{display:none!important}

  /* ----------------------------------------------------------------------
     Editorial clinic hero
     ---------------------------------------------------------------------- */
  html.desktop-web #staff .clinic-header{
    position:relative!important;
    top:auto!important;
    z-index:40!important;
    margin:0!important;
    padding:0 28px!important;
    background:var(--web-bg)!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html.desktop-web #staff .hero{
    max-width:1440px!important;
    margin:22px auto 0!important;
  }

  html.desktop-web #staff .hero-plate{
    position:relative!important;
    min-height:214px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:28px!important;
    background:
      linear-gradient(90deg,rgba(8,54,45,.96) 0%,rgba(8,54,45,.86) 34%,rgba(8,54,45,.30) 66%,rgba(8,54,45,.04) 100%),
      url('assets/hero.jpg') right center/cover no-repeat!important;
    box-shadow:0 18px 48px rgba(22,57,48,.13)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html.desktop-web #staff .hero-plate::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 38%,rgba(0,0,0,.06));
    pointer-events:none;
  }

  html.desktop-web #staff .hero-main{
    position:relative!important;
    z-index:2!important;
    min-height:214px!important;
    max-width:none!important;
    margin:0!important;
    padding:30px 34px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:30px!important;
    box-sizing:border-box!important;
  }

  html.desktop-web #staff .hero-account{order:1!important;display:flex!important;align-items:center!important;gap:14px!important}
  html.desktop-web #staff .hero-clinic{order:2!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;text-align:right!important}
  html.desktop-web #staff .hero-divider{display:none!important}
  html.desktop-web #staff .hero-name{
    color:#fff!important;
    font-size:30px!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    text-shadow:0 2px 16px rgba(0,0,0,.18)!important;
  }
  html.desktop-web #staff .hero-clinic-select{padding:0!important;color:#fff!important}
  html.desktop-web #staff .hero-clinic-chevron{color:rgba(255,255,255,.78)!important;font-size:18px!important}
  html.desktop-web #staff .hero-management{
    margin-top:9px!important;
    color:rgba(255,255,255,.82)!important;
    font-size:13px!important;
    font-weight:650!important;
    letter-spacing:.04em!important;
  }
  html.desktop-web #staff .hero-sprout{color:#d7f4eb!important}
  html.desktop-web #staff .hero-user-row{margin-bottom:2px!important}
  html.desktop-web #staff .chip-user{color:#fff!important;font-size:16px!important;font-weight:800!important}
  html.desktop-web #staff .chip-title{color:rgba(255,255,255,.72)!important;font-size:12px!important}
  html.desktop-web #staff .chip-role-button{color:#fff!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.20)!important;border-radius:999px!important;padding:5px 9px!important}
  html.desktop-web #staff .user-avatar{width:48px!important;height:48px!important;border-radius:50%!important;border:2px solid rgba(255,255,255,.6)!important}

  /* ----------------------------------------------------------------------
     Horizontal web navigation rails
     ---------------------------------------------------------------------- */
  html.desktop-web #view-home{
    max-width:1440px!important;
    width:auto!important;
    margin:0 auto!important;
    padding:22px 28px 60px!important;
    box-sizing:border-box!important;
  }

  html.desktop-web #view-home .today-page{
    display:grid!important;
    grid-template-columns:240px minmax(0,1fr)!important;
    gap:14px!important;
    margin:0 0 18px!important;
  }
  html.desktop-web #view-home .today-datebox,
  html.desktop-web #view-home .today-section{
    min-height:96px!important;
    border-radius:18px!important;
    border:1px solid var(--web-line)!important;
    box-shadow:0 7px 22px rgba(22,57,48,.055)!important;
  }

  html.desktop-web #staff #view-home > #menu,
  html.desktop-web #staff #view-home > #menu2,
  html.desktop-web #staff #view-home > #menu3{
    display:block!important;
    margin:0!important;
  }

  html.desktop-web #staff #view-home .menu-group{
    display:block!important;
    width:100%!important;
    margin:0 0 14px!important;
    padding:17px 18px 18px!important;
    box-sizing:border-box!important;
    background:var(--web-card)!important;
    border:1px solid var(--web-line)!important;
    border-radius:18px!important;
    box-shadow:0 7px 22px rgba(22,57,48,.045)!important;
  }

  html.desktop-web #staff #view-home .menu-group .block-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    margin:0 0 12px!important;
    padding:0 2px!important;
    color:var(--web-ink)!important;
    font-size:12px!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  html.desktop-web #staff #view-home .menu-group .grid{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:stretch!important;
    gap:10px!important;
  }

  html.desktop-web #staff #view-home .menu-group .tile{
    flex:1 1 170px!important;
    min-width:155px!important;
    min-height:66px!important;
    max-width:260px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    padding:10px 13px!important;
    box-sizing:border-box!important;
    border-radius:13px!important;
    border:1px solid #e1ebe7!important;
    background:#fbfdfc!important;
    box-shadow:none!important;
    transform:none!important;
  }

  html.desktop-web #staff #view-home .menu-group .tile:hover{
    transform:translateY(-2px)!important;
    border-color:#b9d9cf!important;
    background:#fff!important;
    box-shadow:0 7px 18px rgba(8,127,107,.09)!important;
  }

  html.desktop-web #staff #view-home .menu-group .tile-ico{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
    background:#edf7f3!important;
    color:var(--web-green)!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile-label{
    flex:1 1 auto!important;
    font-size:13px!important;
    font-weight:720!important;
    line-height:1.25!important;
    color:#29453d!important;
    text-align:left!important;
  }

  /* Wide screens: the menu becomes a genuine horizontal command surface. */
  @media (min-width:1280px){
    html.desktop-web #staff #view-home .menu-group .tile{flex-basis:185px!important;max-width:230px!important}
  }

  /* ----------------------------------------------------------------------
     Web content surfaces — less pill-shaped, more clinical workspace.
     ---------------------------------------------------------------------- */
  html.desktop-web #staff .view:not(#view-home){
    max-width:1440px!important;
    margin:0 auto!important;
    padding:26px 28px 60px!important;
    box-sizing:border-box!important;
  }
  html.desktop-web #staff .block,
  html.desktop-web #staff .list-panel,
  html.desktop-web #staff .form-card,
  html.desktop-web #staff .dashboard-block,
  html.desktop-web #staff .summary{
    border-radius:18px!important;
    box-shadow:0 7px 22px rgba(22,57,48,.045)!important;
  }

  /* Buttons become compact rectangular controls, not mobile pills. */
  html.desktop-web #staff .btn,
  html.desktop-web #staff button.btn{
    min-height:42px!important;
    padding:10px 16px!important;
    border-radius:10px!important;
    font-size:13px!important;
    font-weight:720!important;
  }

  /* Keep desktop navigation hidden; all navigation is now horizontal. */
  html.desktop-web #desktop-nav{display:none!important}
}


/* ========================================================================
   ICM v592 — Desktop redesign, premium clinical web workspace
   This is intentionally NOT a Telegram/Mini App visual language.
   Desktop only: editorial hero + horizontal command navigation + wide rows.
   Mobile styles remain unchanged.
   ======================================================================== */
@media (min-width:900px) and (hover:hover){
  html.desktop-web{
    --web-bg:#f6f8f7!important;
    --web-ink:#17352e!important;
    --web-muted:#6d7e79!important;
    --web-green:#087f6b!important;
    --web-line:#dce6e2!important;
    --web-card:#ffffff!important;
  }

  html.desktop-web body,
  html.desktop-web #staff{background:#f6f8f7!important;color:#17352e!important;}
  html.desktop-web #bg-layer{display:none!important;}

  /* ---------- Hero: image is a calm visual accent, not a dark banner ---------- */
  html.desktop-web #staff .clinic-header{
    padding:0 34px!important;
    margin:0!important;
    background:#f6f8f7!important;
    border:0!important;
  }
  html.desktop-web #staff .hero{
    max-width:1480px!important;
    margin:24px auto 0!important;
    border:0!important;
    border-radius:24px!important;
    overflow:hidden!important;
    background:#fff!important;
    box-shadow:0 14px 38px rgba(26,61,52,.09)!important;
  }
  html.desktop-web #staff .hero-plate{
    min-height:190px!important;
    padding:0!important;
    background:
      linear-gradient(90deg,#ffffff 0%,#ffffff 39%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.20) 72%,rgba(255,255,255,0) 100%),
      url('assets/hero.jpg') right center/auto 100% no-repeat!important;
    border:1px solid #e4ece9!important;
    border-radius:24px!important;
  }
  html.desktop-web #staff .hero-plate::after{display:none!important;}
  html.desktop-web #staff .hero-main{
    min-height:190px!important;
    padding:28px 32px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    box-sizing:border-box!important;
  }
  html.desktop-web #staff .hero-clinic{
    order:1!important;
    align-items:flex-start!important;
    text-align:left!important;
    max-width:50%!important;
  }
  html.desktop-web #staff .hero-account{
    order:2!important;
    align-self:flex-start!important;
    margin-top:2px!important;
    padding:9px 12px!important;
    border:1px solid rgba(8,127,107,.13)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.84)!important;
    box-shadow:0 6px 20px rgba(23,53,46,.06)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  html.desktop-web #staff .hero-name{
    color:#17352e!important;
    font-size:34px!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;
    text-shadow:none!important;
  }
  html.desktop-web #staff .hero-management{
    margin-top:8px!important;
    color:#6b7b76!important;
    font-size:13px!important;
    font-weight:650!important;
    letter-spacing:.02em!important;
  }
  html.desktop-web #staff .hero-sprout{color:#087f6b!important;}
  html.desktop-web #staff .hero-clinic-select{color:#17352e!important;}
  html.desktop-web #staff .hero-clinic-chevron{color:#087f6b!important;}
  html.desktop-web #staff .chip-user{color:#17352e!important;font-size:14px!important;font-weight:800!important;}
  html.desktop-web #staff .chip-title{color:#71807b!important;font-size:11px!important;}
  html.desktop-web #staff .chip-role-button{
    color:#087f6b!important;
    background:#edf7f3!important;
    border:1px solid #d7ebe4!important;
    border-radius:8px!important;
    padding:4px 8px!important;
  }
  html.desktop-web #staff .user-avatar{width:42px!important;height:42px!important;border:2px solid #d6ebe5!important;}

  /* ---------- Real web navigation: one horizontal command bar ---------- */
  html.desktop-web #view-home{
    max-width:1480px!important;
    margin:0 auto!important;
    padding:18px 34px 70px!important;
  }
  html.desktop-web #view-home .today-page{
    display:grid!important;
    grid-template-columns:190px minmax(0,1fr)!important;
    gap:12px!important;
    margin:0 0 16px!important;
  }
  html.desktop-web #view-home .today-datebox,
  html.desktop-web #view-home .today-section{
    min-height:82px!important;
    border:1px solid #dfe9e5!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 5px 18px rgba(26,61,52,.045)!important;
  }
  html.desktop-web #view-home .today-datebox{display:flex!important;align-items:center!important;justify-content:center!important;}
  html.desktop-web #view-home .today-date{font-size:18px!important;color:#17352e!important;}
  html.desktop-web #view-home .today-section{padding:14px 18px!important;}
  html.desktop-web #view-home .today-section-head{display:flex!important;align-items:center!important;justify-content:space-between!important;}

  html.desktop-web #staff #view-home > #menu,
  html.desktop-web #staff #view-home > #menu2,
  html.desktop-web #staff #view-home > #menu3{display:block!important;margin:0!important;}

  /* Each category is a horizontal navigation rail, not a stack of mobile cards. */
  html.desktop-web #staff #view-home .menu-group{
    margin:0 0 12px!important;
    padding:0!important;
    background:#fff!important;
    border:1px solid #dfe8e5!important;
    border-radius:16px!important;
    box-shadow:0 5px 18px rgba(26,61,52,.04)!important;
    overflow:hidden!important;
  }
  html.desktop-web #staff #view-home .menu-group .block-title{
    margin:0!important;
    padding:12px 16px 9px!important;
    color:#58716a!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    border-bottom:1px solid #edf2f0!important;
  }
  html.desktop-web #staff #view-home .menu-group .grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:0!important;
    align-items:stretch!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  html.desktop-web #staff #view-home .menu-group .grid::-webkit-scrollbar{display:none!important;}
  html.desktop-web #staff #view-home .menu-group .tile{
    flex:0 0 178px!important;
    width:178px!important;
    max-width:none!important;
    min-width:178px!important;
    min-height:76px!important;
    margin:0!important;
    padding:12px 14px!important;
    border:0!important;
    border-right:1px solid #edf2f0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    transition:background .15s ease,transform .15s ease!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile:last-child{border-right:0!important;}
  html.desktop-web #staff #view-home .menu-group .tile:hover{
    background:#f4faf7!important;
    transform:none!important;
    box-shadow:none!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile:active{background:#eaf6f1!important;}
  html.desktop-web #staff #view-home .menu-group .tile-ico{
    width:34px!important;height:34px!important;flex:0 0 34px!important;
    border-radius:10px!important;
    background:#eef7f3!important;
    color:#087f6b!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile-label{
    color:#24443b!important;
    font-size:12.5px!important;
    font-weight:700!important;
    line-height:1.3!important;
    text-align:left!important;
  }
  html.desktop-web #staff #view-home .menu-group .tile.is-wide{flex-basis:178px!important;grid-column:auto!important;}

  /* ---------- Dashboard/work surfaces ---------- */
  html.desktop-web #staff .view:not(#view-home){
    max-width:1480px!important;
    margin:0 auto!important;
    padding:24px 34px 70px!important;
  }
  html.desktop-web #staff .view-title{font-size:26px!important;font-weight:800!important;letter-spacing:-.02em!important;}
  html.desktop-web #staff .list-panel,
  html.desktop-web #staff .block,
  html.desktop-web #staff .form-card,
  html.desktop-web #staff .dashboard-block,
  html.desktop-web #staff .summary{
    border-radius:16px!important;
    box-shadow:0 5px 18px rgba(26,61,52,.04)!important;
  }
  html.desktop-web #staff .btn,
  html.desktop-web #staff button.btn{
    min-height:40px!important;
    padding:9px 16px!important;
    border-radius:9px!important;
    font-size:12.5px!important;
    font-weight:750!important;
    box-shadow:none!important;
  }
  html.desktop-web #staff .btn-primary{background:#087f6b!important;color:#fff!important;border-color:#087f6b!important;}
  html.desktop-web #staff .btn-secondary{background:#edf6f3!important;color:#176451!important;border-color:#d5e8e1!important;}
  html.desktop-web #staff .btn-quiet{background:#f5f7f6!important;color:#60736d!important;border-color:#e1e8e5!important;}

  /* Desktop never shows the old sidebar. */
  html.desktop-web #desktop-sidebar{display:none!important;}
}

/* Post-transfer embryo disposition */
.disposition-head { align-items: flex-start; }
.disposition-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; opacity: .58; margin-bottom: 4px; }
.disposition-context { margin: 10px 0 14px; }
.disposition-patient-card { border: 1px solid var(--line, rgba(20,40,30,.12)); border-radius: 18px; background: var(--surface, #fff); padding: 14px 16px; }
.disposition-patient-name { font-size: 18px; font-weight: 800; }
.disposition-patient-meta { margin-top: 4px; opacity: .62; font-size: 13px; }
.disposition-list { display: grid; gap: 12px; }
.disposition-card { border: 1px solid var(--line, rgba(20,40,30,.12)); border-radius: 18px; background: var(--surface, #fff); padding: 14px; }
.disposition-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.disposition-card-title { font-weight: 800; font-size: 16px; }
.disposition-available { min-width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(31,122,85,.10); color:#1f7a55; font-weight:800; }
.disposition-quality { margin-top:6px; opacity:.68; font-size:13px; }
.disposition-count-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.disposition-count-input { width:100%; }
.disposition-balance { margin-top:4px; font-size:12px; font-weight:700; opacity:.62; }
.disposition-balance.is-ok { color:#1f7a55; opacity:1; }
.disposition-balance.is-bad { color:#c62828; opacity:1; }
.disposition-storage { margin-top:14px; }
.consent-box { margin-top:12px; border:1px solid rgba(198,40,40,.22); border-radius:14px; padding:12px; background:rgba(198,40,40,.045); }
.check-row { display:flex; align-items:flex-start; gap:9px; line-height:1.5; font-size:13px; }
.check-row input { margin-top:3px; }
.refreeze-stamp { flex:0 0 auto; width:34px; height:34px; border:2px solid #1f7a55; border-radius:50%; color:#1f7a55; background:rgba(255,255,255,.3); display:inline-flex; align-items:center; justify-content:center; font-family:Arial,sans-serif; font-size:10px; font-weight:900; letter-spacing:.2px; transform:rotate(-8deg); box-shadow:inset 0 0 0 1px rgba(31,122,85,.12); }
.refreeze-history-line { color:#1f7a55; }
@media (min-width: 800px) {
  #view-embryo-disposition .disposition-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-embryo-disposition .disposition-storage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end; }
  #view-embryo-disposition .consent-box { grid-column:1/-1; }
}

/* v594 — Embryology traceability / lab control center */
.lab-control-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px;padding:6px;border:1px solid rgba(40,70,60,.10);border-radius:18px;background:rgba(255,255,255,.78)}
.lab-control-tab{appearance:none;border:1px solid transparent;background:transparent;border-radius:12px;padding:11px 16px;font:inherit;color:#52625d;cursor:pointer;transition:.18s ease}
.lab-control-tab:hover{background:#f3f7f5}
.lab-control-tab.is-on{background:#173c32;color:#fff;box-shadow:0 5px 14px rgba(20,60,50,.14)}
.lab-control-content{min-height:260px}
.lab-tank-grid,.lab-monitor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lab-tank-card,.lab-monitor-card{border:1px solid rgba(35,60,50,.11);border-radius:20px;background:#fff;padding:18px;text-align:left;box-shadow:0 8px 24px rgba(30,50,40,.06)}
.lab-tank-card{cursor:pointer}
.lab-tank-name{font-size:18px;font-weight:750;color:#173c32;margin-bottom:14px}
.lab-tank-meter{height:8px;border-radius:999px;background:#e8efec;overflow:hidden}.lab-tank-meter span{display:block;height:100%;border-radius:inherit;background:#4e8d74}
.lab-tank-meta,.lab-monitor-meta{margin-top:10px;color:#74817c;font-size:13px}
.lab-map-canister{margin-top:8px;padding:11px 12px;border-radius:12px;background:#f4f7f5;font-weight:700}.lab-map-cane{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #edf1ef;color:#4d5b56}
.lab-monitor-card.is-low{border-color:#d9a6a0;background:#fffafa}.lab-monitor-head{display:flex;justify-content:space-between;align-items:center}.lab-monitor-head span{font-size:11px;font-weight:800;letter-spacing:.06em}.lab-monitor-card.is-low .lab-monitor-head span{color:#a33e36}.lab-monitor-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.lab-monitor-values div{padding:12px;border-radius:14px;background:#f5f8f6}.lab-monitor-values small{display:block;color:#7a8782;font-size:12px;margin-bottom:4px}.lab-monitor-values b{font-size:20px;color:#173c32}
.lab-incident-row{align-items:center}.lab-incident-status{font-size:12px;font-weight:750;text-transform:uppercase}.lab-embryo-status{font-size:12px;color:#527064;font-weight:700}.pf-trace-tools{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}.pf-straw-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#78847f;margin-top:4px;letter-spacing:.02em}
.lab-timeline-summary{font-weight:800;font-size:20px;margin-bottom:14px;color:#173c32}.lab-timeline-item{display:grid;grid-template-columns:14px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #edf1ef}.lab-timeline-dot{width:10px;height:10px;border-radius:50%;background:#4e8d74;margin-top:5px}.lab-timeline-item strong{display:block;color:#173c32}.lab-timeline-item div{color:#5f6d67;font-size:13px;margin-top:3px}.lab-timeline-item small{color:#8b9691}.lab-embryo-row{display:grid;grid-template-columns:100px 1fr 1.2fr;gap:10px;align-items:center;padding:12px;border-bottom:1px solid #edf1ef}.lab-doc-upload{display:grid;gap:10px;margin-bottom:18px}.lab-doc-upload select,.lab-doc-upload input{width:100%}
@media(max-width:1050px){.lab-tank-grid,.lab-monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.lab-control-tabs{overflow:auto;flex-wrap:nowrap}.lab-control-tab{white-space:nowrap}.lab-tank-grid,.lab-monitor-grid{grid-template-columns:1fr}.lab-embryo-row{grid-template-columns:1fr}.pf-trace-tools .btn{flex:1 1 45%}}

/* v598 — Embryo disposition must be directly actionable on mobile. */
#view-embryo-disposition .disposition-list { padding-bottom: 18px; }
#view-embryo-disposition .disposition-count-grid { margin-top: 12px; }
#view-embryo-disposition .disp-count-input {
  display:block !important; width:100% !important; min-height:48px !important;
  box-sizing:border-box !important; padding:12px 14px !important;
  border:1.5px solid rgba(31,122,85,.28) !important;
  border-radius:14px !important; background:#f8fbfa !important;
  color:#173c32 !important; font-size:17px !important; font-weight:700 !important;
  text-align:center !important; opacity:1 !important;
}
#view-embryo-disposition .disp-count-input:focus { border-color:#1f7a55 !important; box-shadow:0 0 0 3px rgba(31,122,85,.10); }
.disp-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 14px; }
.disp-quick-btn, .disp-row-action { appearance:none; border:1px solid rgba(31,122,85,.22); border-radius:14px; min-height:46px; padding:10px 12px; font:inherit; font-weight:800; cursor:pointer; }
.disp-quick-btn { background:rgba(255,255,255,.72); color:#173c32; }
.disp-quick-btn.disp-refreeze-btn, .disp-row-action.ref { background:rgba(31,122,85,.11); border-color:rgba(31,122,85,.30); color:#176447; }
.disp-quick-btn.disp-discard-btn, .disp-row-action.discard { background:rgba(170,55,45,.07); border-color:rgba(170,55,45,.20); color:#9a4037; }
.disp-row-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.disp-row-action { min-height:42px; }
#view-embryo-disposition .disposition-label-field input { min-height:46px; }
.disposition-save-wrap { position:sticky; bottom:74px; z-index:12; margin-top:10px; padding:10px 0 8px; background:linear-gradient(to bottom, rgba(245,251,248,0), rgba(245,251,248,.96) 28%); }
#view-embryo-disposition .disposition-save-wrap .btn { min-height:52px; font-size:16px; font-weight:800; }
#view-embryo-disposition .disposition-storage { padding:14px; }
@media (max-width:560px){ .disp-quick-actions{grid-template-columns:1fr;} }

/* v599 — compact embryo disposition form and field-specific validation */
#view-embryo-disposition .disposition-head{margin-bottom:6px}
#view-embryo-disposition .disposition-context{margin:6px 0 8px}
#view-embryo-disposition .disposition-patient-card{padding:9px 12px;border-radius:14px}
#view-embryo-disposition .disposition-patient-name{font-size:16px}
#view-embryo-disposition .disposition-patient-meta{margin-top:2px;font-size:12px}
#view-embryo-disposition .disp-quick-actions{gap:7px;margin:7px 0 8px}
#view-embryo-disposition .disp-quick-btn{min-height:40px;padding:7px 9px;border-radius:12px;font-size:13px}
#view-embryo-disposition .disposition-list{gap:7px;padding-bottom:8px}
#view-embryo-disposition .disposition-card{padding:10px 12px;border-radius:15px}
#view-embryo-disposition .disposition-card-top{gap:7px}
#view-embryo-disposition .disposition-card-title{font-size:15px}
#view-embryo-disposition .disposition-available{min-width:28px;height:28px;font-size:13px}
#view-embryo-disposition .disposition-quality{margin-top:3px;font-size:12px}
#view-embryo-disposition .disp-row-actions{gap:7px;margin-top:8px}
#view-embryo-disposition .disp-row-action{min-height:38px;padding:6px 9px;border-radius:11px;font-size:13px}
#view-embryo-disposition .disposition-count-grid{gap:7px;margin-top:8px}
#view-embryo-disposition .field{margin-bottom:7px}
#view-embryo-disposition .disp-count-input{min-height:42px !important;height:42px !important;padding:8px 10px !important;text-align:center !important; text-align-last:center !important;}
#view-embryo-disposition .disp-count-input::placeholder{text-align:center}
#view-embryo-disposition .disposition-label-field{margin-top:2px}
#view-embryo-disposition .disposition-label-field input{min-height:40px;height:40px;padding:7px 10px}
#view-embryo-disposition .disposition-balance{margin-top:2px;font-size:11px}
#view-embryo-disposition .disposition-storage{margin-top:7px;padding:10px;border-radius:15px}
#view-embryo-disposition .disposition-storage .field{margin-bottom:7px}
#view-embryo-disposition .disposition-storage input,#view-embryo-disposition .disposition-storage select{min-height:40px;height:40px}
#view-embryo-disposition .consent-box{margin-top:7px;padding:9px;border-radius:12px;font-size:12px}
#view-embryo-disposition .check-row{gap:7px;line-height:1.35;font-size:12px}
#view-embryo-disposition .disposition-save-wrap{margin-top:6px;padding:7px 0 5px}
#view-embryo-disposition .disposition-save-wrap .btn{min-height:46px;font-size:15px}
#view-embryo-disposition .error{order:-1}
#view-embryo-disposition .disp-count-input.field-error{border-color:#b33b32 !important;box-shadow:0 0 0 2px rgba(179,59,50,.10) !important;background:#fff8f7 !important}
#view-embryo-disposition .disposition-card.has-error{border-color:rgba(179,59,50,.42);box-shadow:0 0 0 2px rgba(179,59,50,.07)}
#view-embryo-disposition .field-error-wrap input{border-color:#b33b32 !important;box-shadow:0 0 0 2px rgba(179,59,50,.08) !important;background:#fff8f7 !important}
#view-embryo-disposition #disp-error{margin:6px 0 8px;padding:9px 11px;border:1px solid rgba(179,59,50,.30);border-radius:12px;background:rgba(255,245,243,.96);color:#96372f;font-size:12px;line-height:1.45}
#view-embryo-disposition .disp-error-line{margin:0 0 3px}
#view-embryo-disposition .disp-error-line:last-child{margin-bottom:0}
@media(max-width:560px){
  #view-embryo-disposition .disp-quick-actions{grid-template-columns:1fr 1fr}
  #view-embryo-disposition .disposition-card{padding:9px 11px}
}


/* v600 — tap-to-count disposition controls; no separate count input boxes */
#view-embryo-disposition .disp-row-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
#view-embryo-disposition .disp-row-action{min-height:42px;padding:7px 9px;border-radius:12px;font-size:13px;font-weight:800;transition:transform .12s ease,background .12s ease,border-color .12s ease}
#view-embryo-disposition .disp-row-action:active{transform:scale(.98)}
#view-embryo-disposition .disp-row-action.ref[aria-pressed="true"]{background:rgba(31,122,85,.18);border-color:rgba(31,122,85,.45)}
#view-embryo-disposition .disp-row-action.discard[aria-pressed="true"]{background:rgba(170,55,45,.13);border-color:rgba(170,55,45,.38)}
#view-embryo-disposition .disposition-label-field{margin-top:8px}
#view-embryo-disposition .disposition-balance{margin-top:5px;font-size:11px}
#view-embryo-disposition .disposition-card{min-height:0}
#view-embryo-disposition .disposition-save-panel{margin:12px 0 28px;padding:12px;border:1px solid rgba(31,122,85,.14);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 6px 18px rgba(30,70,55,.06)}
#view-embryo-disposition .disposition-save-panel .btn{min-height:48px;font-size:15px;font-weight:800}
#view-embryo-disposition .disposition-save-panel #disp-error{margin:0 0 10px}
#view-embryo-disposition .disposition-save-panel #disp-error.hidden{display:none}
@media(max-width:560px){#view-embryo-disposition .disp-row-actions{grid-template-columns:1fr 1fr}}

/* v605 — Embryo Disposition glass UI
   Keep the clinical cards readable while letting the green glass background
   show through, matching the rest of the Mini App. */
#view-pending-embryo-disposition .disposition-patient-card,
#view-pending-embryo-disposition .disposition-card,
#view-embryo-disposition .disposition-patient-card,
#view-embryo-disposition .disposition-card {
  background: rgba(255,255,255,.34) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 10px 28px rgba(22,74,61,.08), inset 0 1px 0 rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}

#view-pending-embryo-disposition .disposition-list,
#view-embryo-disposition .disposition-list {
  gap: 10px !important;
}

#view-pending-embryo-disposition .disposition-card,
#view-embryo-disposition .disposition-card {
  border-radius: 20px !important;
}

#view-pending-embryo-disposition .disposition-patient-card,
#view-embryo-disposition .disposition-patient-card {
  border-radius: 20px !important;
}

/* v606 — remove the duplicate sharp-corner wrapper around the patient card */
#view-pending-embryo-disposition .disposition-context,
#view-embryo-disposition .disposition-context {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ================= Desktop web shell ================= */
/* A separate, desktop-oriented shell shown only outside Telegram on a
   wide viewport (see boot()'s isDesktopWeb check) -- horizontal top
   nav instead of the mobile bottom tabbar, real stat cards + a today's
   -patients table instead of the mobile tile grid. Approved concept:
   teal header with a subtle cell/embryo dot pattern, neutral corporate
   palette for the rest. */
#staff-desktop {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  font-family: 'Vazirmatn', sans-serif;
  color: #101E1B;
}
.dtop-header {
  position: relative;
  background: #0B5A4D;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.dtop-header-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.dtop-header-pattern circle { fill: #ffffff; opacity: .045; }
.dtop-header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
}
.dtop-header-left { display: flex; align-items: center; gap: 16px; }
.dtop-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dtop-appname { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.dtop-divider { width: 1px; height: 18px; background: rgba(255,255,255,.22); }
.dtop-clinic-name {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #fff; padding: 0;
}
.dtop-header-right { display: flex; align-items: center; gap: 12px; }
.dtop-user-info { text-align: end; }
.dtop-user-name { font-size: 12.5px; font-weight: 600; color: #fff; }
.dtop-user-role { font-size: 11px; color: rgba(255,255,255,.72); }
.dtop-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.dtop-logout-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: none; color: #fff;
  font-size: 13px; cursor: pointer;
}
.dtop-nav {
  display: flex; align-items: center; gap: 2px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #E4E9E7;
  border-top: none;
  overflow-x: auto;
}
.dtop-nav-item {
  padding: 11px 14px;
  font-size: 12.5px;
  color: #5F6E6A;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.dtop-nav-item.is-on {
  color: #0B5A4D;
  font-weight: 600;
  border-bottom-color: #0B5A4D;
}
.dtop-main {
  background: #fff;
  border: 1px solid #E4E9E7;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 22px 24px 28px;
  min-height: 320px;
}
.dtop-page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.dtop-page-title { font-size: 15px; font-weight: 700; margin: 0; }
.dtop-date { font-size: 11px; color: #8A9793; }
.dtop-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .dtop-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dtop-kpi {
  border: 1px solid #E4E9E7;
  border-radius: 8px;
  padding: 12px 14px;
}
.dtop-kpi-label { font-size: 10.5px; color: #7A8985; font-weight: 600; }
.dtop-kpi-value { font-size: 19px; font-weight: 700; color: #101E1B; margin-top: 4px; }
.dtop-section-title { font-size: 12px; font-weight: 600; color: #3C4B47; margin-bottom: 8px; }
.dtop-table-wrap {
  border: 1px solid #E4E9E7;
  border-radius: 8px;
  overflow: hidden;
}
.dtop-table { width: 100%; border-collapse: collapse; }
.dtop-table th {
  text-align: start;
  padding: 8px 14px;
  background: #FAFBFA;
  font-size: 10.5px;
  color: #8A9793;
  font-weight: 600;
  border-bottom: 1px solid #E4E9E7;
}
.dtop-table td {
  padding: 10px 14px;
  font-size: 12px;
  color: #101E1B;
  border-bottom: 1px solid #F0F3F2;
}
.dtop-table tr:last-child td { border-bottom: none; }
.dtop-status-pill {
  background: #EAF3F0; color: #0B5A4D;
  font-size: 10px; font-weight: 600;
  padding: 2px 9px; border-radius: 5px;
  display: inline-block;
}
.dtop-empty { padding: 24px; text-align: center; font-size: 12.5px; color: #8A9793; }

/* Floating button back to the desktop dashboard, shown only while a
   mobile-style screen is open from desktop-web mode (see
   openMobileFallback in app.js). */
.dtop-return-btn {
  position: fixed;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 60;
  background: #0B5A4D;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Vazirmatn', sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11,90,77,.28);
}
body:not(.dtop-in-mobile-fallback) .dtop-return-btn { display: none; }

/* v611 — stable desktop web shell. Desktop visual layer only; mobile workflow is unchanged. */
html.desktop-web body{background:#071c1d!important}
html.desktop-web #staff-desktop{display:block!important;max-width:none!important;margin:0!important;padding:0!important;min-height:100vh!important;background:radial-gradient(circle at 80% 5%,rgba(64,190,170,.16),transparent 25%),radial-gradient(circle at 15% 85%,rgba(54,105,190,.12),transparent 28%),linear-gradient(135deg,#071719,#0a2527 52%,#0a1b24);color:#e8faf5}
html.desktop-web .web-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
html.desktop-web .web-sidebar{padding:20px 14px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.07);background:rgba(4,20,22,.58);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
html.desktop-web .web-brand{display:flex;align-items:center;gap:10px;padding:4px 7px 20px}.web-brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(74,224,195,.22),rgba(83,127,220,.14));border:1px solid rgba(112,238,213,.2);color:#8bf0d9;font-weight:900;font-size:12px}.web-brand strong{display:block;font-size:15px;color:#effff9}.web-brand span{display:block;margin-top:2px;color:#648782;font-size:8.5px}
html.desktop-web .web-clinic{display:flex;align-items:center;gap:8px;padding:10px;border-radius:14px;margin-bottom:17px}.web-clinic{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045)}.web-clinic-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:rgba(77,216,192,.08);color:#70ddc7}.web-clinic small{display:block;color:#668783;font-size:8px}.web-clinic button{border:0;background:none;color:#e8fbf5;font:inherit;font-size:10px;font-weight:750;padding:1px 0;cursor:pointer}.web-clinic>span:last-child{margin-left:auto;color:#6a8f89}
html.desktop-web .web-nav-label{font-size:8px;letter-spacing:.16em;color:#4e706c;padding:0 9px 7px}.web-nav{display:grid;gap:4px}.web-nav .dtop-nav-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:#759793;font:inherit;font-size:9.5px;cursor:pointer}.web-nav .dtop-nav-item:hover{background:rgba(255,255,255,.04);color:#bcece2}.web-nav .dtop-nav-item.is-on{background:linear-gradient(90deg,rgba(71,214,188,.14),rgba(71,214,188,.045));border-color:rgba(93,223,198,.13);color:#86ead6;font-weight:800}.web-sidebar-bottom{margin-top:auto;display:grid;gap:5px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)}.web-side-action{border:0;background:none;color:#66847f;text-align:left;padding:8px 10px;border-radius:10px;font:inherit;font-size:9px;cursor:pointer}.web-side-action:hover{background:rgba(255,255,255,.04);color:#a7d9d0}
html.desktop-web .web-main{min-width:0;padding:22px 24px 18px}.glass-panel{border:1px solid rgba(195,255,244,.10);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 45px rgba(0,0,0,.13);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%)}
html.desktop-web .web-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;border-radius:18px;margin-bottom:12px}.web-kicker{font-size:8px;letter-spacing:.17em;color:#58d9c0;font-weight:850}.web-top h1{margin:4px 0 0;font-size:24px;color:#f0fffb}.web-top p{margin:4px 0 0;color:#6d8e89;font-size:9px}.web-top-right{display:flex;align-items:center;gap:8px}.web-search{width:min(360px,30vw);height:38px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);display:flex;align-items:center;gap:7px;padding:0 10px;color:#71cdbd}.web-search input{min-width:0;flex:1;background:transparent;border:0;outline:0;color:#eafff8;font:inherit;font-size:9px}.web-search input::placeholder{color:#58736f}.web-bell{position:relative;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#8ad8ca;cursor:pointer}.web-bell b{position:absolute;right:-2px;top:-2px;background:#e97870;color:white;border-radius:99px;min-width:13px;height:13px;font-size:7px}.web-profile{display:flex;align-items:center;gap:8px;padding-left:8px;border-left:1px solid rgba(255,255,255,.07)}.web-profile img{width:38px;height:38px;border-radius:11px;object-fit:cover}.web-profile strong,.web-profile span{display:block}.web-profile strong{font-size:9px;color:#eafff8}.web-profile span{font-size:7.5px;color:#688681;margin-top:2px}
html.desktop-web .web-quick{padding:11px 13px;border-radius:15px;margin-bottom:12px}.web-quick-title{font-size:8px;color:#62847f;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.web-quick-links{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.web-quick-links button{min-height:48px;border:1px solid rgba(255,255,255,.065);border-radius:12px;background:rgba(255,255,255,.032);color:#8ce5d2;font:inherit;display:flex;align-items:center;gap:8px;padding:8px;cursor:pointer}.web-quick-links button:hover{background:rgba(76,215,192,.08);border-color:rgba(76,215,192,.16)}.web-quick-links button span{font-size:8.5px;color:#d5eee9;font-weight:700}
html.desktop-web .web-grid{display:grid;gap:12px;margin-bottom:12px}.web-grid-top{grid-template-columns:1.35fr .9fr .95fr}.web-grid-bottom{grid-template-columns:1.1fr 1.25fr .75fr}.web-card{padding:14px;border-radius:17px;min-width:0}.web-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.web-card-head h2{font-size:11px;margin:0;color:#e7faf5}.web-card-head span{font-size:7.5px;color:#5f817d}.web-live{color:#64ddc6!important}.web-link{color:#68d9c3!important}.web-table-wrap{border:1px solid rgba(255,255,255,.05);border-radius:11px;overflow:auto}.web-table-wrap .dtop-table{min-width:390px}.web-table-wrap .dtop-table th{background:rgba(0,0,0,.08);color:#5e7c78;border-bottom:1px solid rgba(255,255,255,.05);padding:7px 9px;font-size:7.5px}.web-table-wrap .dtop-table td{color:#a5c0bb;border-bottom:1px solid rgba(255,255,255,.04);padding:8px 9px;font-size:8.5px}.web-table-wrap .dtop-status-pill{background:rgba(76,215,192,.08);color:#71dfca;border:1px solid rgba(76,215,192,.12);border-radius:99px;font-size:7px;padding:2px 6px}.web-cycle{display:flex;align-items:center;gap:13px;min-height:120px}.web-donut{width:92px;height:92px;flex:0 0 92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#4bd7bd 0 26%,#62a8f2 26% 48%,#e7b95f 48% 70%,#a581e5 70% 83%,rgba(255,255,255,.07) 83%);position:relative}.web-donut:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#0b2426}.web-donut strong,.web-donut small{position:relative;z-index:1;display:block;text-align:center}.web-donut strong{font-size:20px;color:#f0fffb}.web-donut small{font-size:7px;color:#6d8e8a}.web-legend{display:grid;gap:7px;flex:1}.web-legend span{font-size:7.5px;color:#71928e}.web-legend b{float:right;color:#dff8f2}.web-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.web-metrics>div{min-height:57px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.03);padding:8px}.web-metrics strong,.web-metrics small{display:block}.web-metrics strong{font-size:18px;color:#ecfffa}.web-metrics small{font-size:7px;color:#688782;margin-top:2px}
html.desktop-web .web-tanks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.web-tanks>div{height:95px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.03);padding:7px;position:relative;overflow:hidden}.web-tanks b,.web-tanks strong,.web-tanks small{position:relative;z-index:2;display:block}.web-tanks b{font-size:7.5px;color:#b0c9c5}.web-tanks strong{font-size:8px;color:#67dfc8;margin-top:3px}.web-tanks i{position:absolute;left:7px;right:7px;bottom:18px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,rgba(80,220,193,.60),rgba(61,130,235,.20));opacity:.75}.web-tanks small{position:absolute;bottom:6px;font-size:6.5px;color:#64827e}.web-straws{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}.web-straws span{font-size:6.5px;color:#64827e}.web-straws b{display:block;font-size:9px;color:#dff7f1;margin-top:2px}.web-workflow{display:grid;grid-template-columns:1fr 1fr;gap:7px}.web-workflow button{border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.03);color:#dff8f2;display:flex;align-items:center;gap:8px;text-align:left;padding:9px;cursor:pointer}.web-workflow button:hover{background:rgba(77,215,193,.07)}.web-workflow button>b{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(77,215,193,.07);color:#6bdcca;font-size:8px}.web-workflow button span{font-size:8px;font-weight:750}.web-workflow button small{display:block;color:#64827e;font-size:6.5px;margin-top:2px}.web-attention{display:grid;gap:6px}.web-attention>div{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:rgba(255,255,255,.03);padding:8px;color:#8eaaa6;font-size:7.5px}.web-attention b{min-width:21px;height:21px;display:grid;place-items:center;border-radius:7px;background:rgba(231,120,111,.10);color:#ed948b}.web-alert-dot{width:7px;height:7px;border-radius:50%;background:#e77970;box-shadow:0 0 10px rgba(231,121,112,.45)}.web-footer{display:flex;justify-content:space-between;color:#4f706b;font-size:7px;padding:2px 2px}.web-hidden-kpis{display:none!important}
@media (max-width:1200px){html.desktop-web .web-main{padding-inline:16px}.web-grid-top,.web-grid-bottom{grid-template-columns:1fr 1fr}.web-grid .web-wide{grid-column:span 2}.web-quick-links{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){html.desktop-web #staff-desktop{display:none!important}.web-shell{grid-template-columns:1fr}}

/* v612 — desktop glass sub-pages
   All secondary clinical menus now remain inside the desktop workspace rather
   than dropping back to the mobile page. Functionality is reused; chrome is
   desktop-specific and glass surfaces match the dashboard. */
html.desktop-web #desktop-subpage-host{display:block;min-width:0}
html.desktop-web #desktop-subpage-host.hidden{display:none!important}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff{
  display:block!important;
  position:relative!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:#e8faf5!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .clinic-header,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff > .tabbar,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff > .dots,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .bottom-nav{
  display:none!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .view{
  display:block;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:4px 0 34px!important;
  color:#e8faf5;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .view.hidden{display:none!important}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .view-head{
  margin:0 0 14px!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .view-title,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff h2,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff h3{
  color:#ecfffa!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .section-title-box,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .list-panel,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .form-card,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .dashboard-block,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .inventory-overview-card,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .searchbar,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .section-list-panel,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .puncture-list-panel,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .icsi-list-panel,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .disposition-context,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .disposition-patient-card,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .disposition-card{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028))!important;
  border:1px solid rgba(195,255,244,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 45px rgba(0,0,0,.13)!important;
  backdrop-filter:blur(20px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
  color:#dcefe9!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .section-title-box{border-radius:17px!important;padding:16px 18px!important}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .list-panel,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .form-card,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .dashboard-block,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .inventory-overview-card{border-radius:18px!important}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .row,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .field,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .card,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .menu-group{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.065)!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff input,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff select,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff textarea{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(195,255,244,.11)!important;
  color:#e8faf5!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff label,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff p,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .muted,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .section-title-note{
  color:#71928e!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .btn,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff button:not(.hidden){
  border-radius:12px;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .btn-primary{
  background:linear-gradient(135deg,#2aa993,#247f8e)!important;
  color:#effffb!important;
  border:1px solid rgba(137,241,218,.18)!important;
  box-shadow:0 8px 22px rgba(22,157,132,.18)!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .btn-secondary,
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .btn-quiet{
  background:rgba(255,255,255,.045)!important;
  color:#b9d9d2!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .rows{scrollbar-color:rgba(90,210,188,.35) transparent}
html.desktop-web #desktop-subpage-host #staff.desktop-subpage-staff .row:hover{background:rgba(76,215,192,.07)!important}

/* ---------- LN2 dashboard: swipeable stacked carousel ----------
   One tank fills the view at a time; the others sit scaled-down and
   fainter on either side (updateTankCarouselStack in app.js), closer
   to a stack of cards than a plain list -- swiping brings the next
   one into full focus while the current one recedes to the side. */
.tanks-panel .tanks {
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 0 10px;
  margin: 0 -4px;
  /* Without this, the browser's snap math only considers the visible
     viewport box when deciding where "centered" is -- the track's own
     18% side padding (there so the first/last slide CAN reach center)
     isn't accounted for unless the scroll container is told about it
     here too. That's exactly why the last card stopped short of the
     middle: nothing told the snap target to include that padding. */
  /* Logical + physical, both declared: some Android/Telegram WebViews
     don't honor the logical (inline) form reliably, especially in RTL,
     so the physical left/right pair is here too as a direct fallback
     rather than relying on just one or the other. */
  scroll-padding-inline: 18%;
  scroll-padding-left: 18%;
  scroll-padding-right: 18%;
}
.tanks-panel .tanks::-webkit-scrollbar { display: none; }
/* v966: while a finger is on the tank row, snapping is off so it follows the finger;
   the release glide (app.js) then settles it on the nearest card. */
.tanks-panel .tanks.tc-free { scroll-snap-type: none; }
.tank-carousel-track {
  display: flex;
  align-items: stretch;
}
/* Real elements, not track padding -- the leading/trailing gap a slide
   needs on its outer side to land centered, so the browser's own
   scrollable bounds physically include enough room for the first/last
   slide to be dragged all the way to the middle, with nothing relying
   on padding-vs-scroll-snap math. Smaller card + tighter gap (54% and
   6px, down from 62% and 14px) so the next tank's name is actually
   legible on the side card instead of wrapping letter by letter --
   spacer width stays matched to the card for the centering math
   ((100-54)/2 = 23). */
.tank-carousel-spacer {
  flex: 0 0 23%;
}
.tank-slide {
  flex: 0 0 54%;
  scroll-snap-align: center;
  position: relative;
  /* Separate cards again (back from overlapping, which had gone
     through -18px, then -140px which broke scrolling, then -70px) --
     a very small positive gap between them instead. */
  margin-inline-start: 3px;
  z-index: 1;
  /* scroll-snap-stop was "always" -- that forces the browser to halt
     at every single card even mid-fling, which is exactly why a strong
     swipe couldn't glide through several tanks at once. Dropping it
     (the default, "normal") lets momentum carry through multiple
     cards in one swipe and only snaps at wherever it finally settles. */
  /* no transition: transform/opacity follow the finger every frame; a 150 ms
     transition made them trail behind and flash the previous card's state */
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tank-slide .tank-visual-card {
  height: 100%;
  /* Cards overlap now (see .tank-slide's negative margin) -- the base
     card background is only 40% opaque, glass enough that the card
     behind visibly bled through at the overlap seam even though the
     visual intent was for that overlapped part to read as fully
     hidden. Solid here, scoped to the carousel only, not the general
     .tank-visual-card style used elsewhere. */
  background: var(--bg, #F4F7F6);
}
.tank-slide.is-focused {
  z-index: 2;
}
.tank-slide.is-focused .tank-visual-card {
  box-shadow: var(--glass-edge), 0 10px 28px rgba(20,49,44,.10);
}
.tank-visual-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-radius: 22px;
}
.tank-visual {
  width: 100%;
  height: 112px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.tank-visual-svg {
  width: 68px;
  height: 104px;
  flex: 0 0 auto;
}
/* Vertical FROZEN-STRAW STORAGE OCCUPANCY gauge: compact capsule, glass when empty.
   It shows the percentage of physical frozen-straw storage capacity used,
   independent of the LN2 liquid level. */
.tank-level-gauge {
  /* Match the tank body span: from the bottom of the cap/lid to the bottom of the tank. */
  height: 72px;
  width: 10px;
  flex: 0 0 10px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  transform: translateY(5px);
}
.tank-level-track {
  position: relative;
  width: 10px;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: inset 0 1px 2px rgba(24,60,50,.05), 0 1px 3px rgba(255,255,255,.18);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.tank-level-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  border-radius: 999px;
  background: linear-gradient(to top, #39a66f 0%, #b9c94b 48%, #f0a12a 75%, #d84a42 100%);
  box-shadow: 0 0 5px rgba(216,74,66,.12);
  transition: height .25s ease;
}
.tank-level-fill.is-empty {
  background: transparent;
  box-shadow: none;
}
.tank-card-info { width: 100%; }
.tank-card-info .tank-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  margin-bottom: 4px;
}
.tank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tank-n2-settings-btn,
.tank-n2-refill-btn {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.48);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
}
.tank-n2-settings-btn { font-size: 15px; }
.tank-n2-refill-btn { font-size: 17px; }
.tank-usable-capacity {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.tank-usable-capacity strong { font-size: 19px; font-weight: 750; color: var(--ink); }
.tank-usable-capacity span { font-size: 10px; color: var(--muted); }
.tank-n2-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.tank-n2-row strong { font-size: 14px; color: var(--ink); }
.tank-n2-row span { font-size: 10px; color: var(--muted); }
.tank-n2-meta { margin-top: 2px; font-size: 10px; color: var(--muted); line-height: 1.35; }
.tank-n2-settings-panel {
  margin-top: 12px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--glass-edge), 0 8px 24px rgba(20,49,44,.05);
}
.tank-n2-settings-panel .block-title { margin-bottom: 8px; }

@media (max-width: 380px) {
  .tanks-panel .tanks { gap: 8px; }
  .tank-visual-card { padding: 10px; border-radius: 18px; }
  .tank-visual { height: 96px; gap: 7px; }
  .tank-level-gauge { height: 63px; width: 9px; flex-basis: 9px; transform: translateY(4px); }
  .tank-level-track { width: 9px; }
  .tank-visual-svg { width: 58px; height: 92px; }
  .tank-usable-capacity strong { font-size: 17px; }
}

/* LN2 alert state */
.tank-n2-meta.is-low {
  color: #a83d34;
  font-weight: 700;
}


/* ---------- v622 — compact LN2 dashboard ----------
   The LN2 level summary tile is removed; the two remaining counters use
   the full row. Each tank now carries its own LN2 percentage above the lid. */
.tanks-head .summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}
.tank-visual {
  position: relative;
}
.tank-n2-percent {
  position: absolute;
  /* The percentage sits directly above the tank lid/cap, not above the
     centre of the whole visual (the storage gauge is to the left). */
  top: -5px;
  left: calc(50% + 9px);
  transform: translateX(-50%);
  z-index: 4;
  min-width: 38px;
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  font-weight: 650;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 380px) {
  .tank-n2-percent {
    top: -4px;
    left: calc(50% + 8px);
    font-size: 11px;
    line-height: 14px;
  }
}

/* ---------- v625 — precision tank-detail visual alignment ----------
   The LN2 readout is locked to the centreline of the tank lid. The storage
   gauge is positioned independently so its top and bottom align with the
   physical tank body, not with the overall visual group. The facts column
   uses a fixed label/value grid so no tank information is clipped. */
.tank-detail-overview {
  display: grid;
  /* First column = tank visual (DOM order, independent of RTL), second
     = the facts box. The facts box needs the room -- "Capacity" and
     "Structure" were wrapping into two lines at a fixed 190px -- while
     the tank icon only ever needs a modest fixed width, so the ratio
     is flipped from what it was. */
  grid-template-columns: 160px minmax(0, 1fr);
  direction: rtl;
  align-items: center;
  gap: 14px;
  min-height: 260px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: var(--glass-edge), 0 10px 28px rgba(20,49,44,.05);
}
.tank-detail-visual-col {
  min-width: 0;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tank-detail-visual-label { display: none; }
.tank-detail-visual {
  width: 100%;
  height: 188px;
  gap: 0;
  transform: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tank-detail-visual .tank-visual-svg {
  width: 108px;
  height: 164px;
  flex: 0 0 auto;
}
/* Body in the SVG runs from y=29 to y=129. With the 164px SVG, that is
   33px..147px inside the SVG; the SVG itself is vertically centred in the
   188px visual. The gauge therefore starts/ends at 45px/159px exactly. */
.tank-detail-visual .tank-level-gauge {
  position: absolute;
  top: 45px;
  left: calc(50% - 67px);
  height: 114px;
  width: 12px;
  flex: 0 0 12px;
  transform: none;
}
.tank-detail-visual .tank-level-track { width: 12px; height: 100%; }
.tank-detail-visual .tank-n2-percent {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 0;
  font-size: 15px;
  line-height: 18px;
  font-weight: 750;
  letter-spacing: 0;
}
.tank-detail-visual-hint {
  margin-top: -2px;
  font-size: 10px;
  color: var(--muted);
}
.tank-detail-facts {
  direction: inherit;
  min-width: 0;
  margin: 0;
  width: 100%;
}
.tank-detail-facts .fact {
  min-height: 56px;
  padding: 8px 4px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 8px;
}
.tank-detail-facts .fact-k {
  min-width: 0;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tank-detail-facts .fact-v {
  min-width: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 750;
  text-align: end;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 520px) {
  .tank-detail-overview {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 8px;
    min-height: 236px;
    padding: 13px;
  }
  .tank-detail-visual-col { min-height: 204px; }
  .tank-detail-visual { height: 176px; }
  .tank-detail-visual .tank-visual-svg { width: 92px; height: 148px; }
  /* SVG body y=29..129 scales to 29.8..132.6px; SVG top is 14px. */
  .tank-detail-visual .tank-level-gauge {
    top: 44px;
    left: calc(50% - 65px);
    height: 103px;
    width: 10px;
    flex-basis: 10px;
  }
  .tank-detail-visual .tank-level-track { width: 10px; }
  .tank-detail-visual .tank-n2-percent { font-size: 14px; line-height: 17px; }
  .tank-detail-facts .fact { min-height: 51px; padding: 7px 2px; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .tank-detail-facts .fact-k { font-size: 12.5px; }
  .tank-detail-facts .fact-v { font-size: 17px; }
}

@media (max-width: 380px) {
  .tank-detail-overview {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 5px;
    padding: 10px;
  }
  .tank-detail-visual .tank-visual-svg { width: 82px; height: 136px; }
  /* SVG body y=29..129 scales to 27.4..121.7px; SVG top is 20px. */
  .tank-detail-visual .tank-level-gauge {
    top: 47px;
    left: calc(50% - 58px);
    height: 94px;
    width: 9px;
    flex-basis: 9px;
  }
  .tank-detail-facts .fact { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 5px; }
  .tank-detail-facts .fact-k { font-size: 11.5px; }
  .tank-detail-facts .fact-v { font-size: 15.5px; }
}


/* ---------- v626 — tank-detail final spacing/alignment ----------
   Facts stay on the left side of the overview. Labels are left aligned while
   numeric values are anchored to the right edge of the inner facts box.
   The storage gauge is shortened slightly from the bottom so it terminates
   cleanly above the physical tank floor. */
.tank-detail-facts {
  direction: ltr;
  text-align: left;
}
.tank-detail-facts .fact {
  grid-template-columns: minmax(0, 1fr) auto;
  direction: ltr;
}
.tank-detail-facts .fact-k {
  text-align: left;
}
.tank-detail-facts .fact-v {
  text-align: right;
  justify-self: end;
  font-size: 16px;
  font-weight: 700;
}
.tank-detail-visual .tank-level-gauge {
  height: 106px;
}
.tank-detail-visual-hint {
  display: none !important;
}
@media (max-width: 520px) {
  .tank-detail-facts .fact {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .tank-detail-facts .fact-v {
    font-size: 15px;
  }
  .tank-detail-visual .tank-level-gauge {
    height: 95px;
  }
}
@media (max-width: 380px) {
  .tank-detail-facts .fact-v {
    font-size: 14px;
  }
  .tank-detail-visual .tank-level-gauge {
    height: 86px;
  }
}

/* ---------- v627 — tank detail final balance ----------
   Give the facts panel more breathing room while nudging the tank,
   storage gauge, and LN2 percentage further toward the (now narrower,
   fixed-width) visual column. The grid's first column is the tank
   visual (DOM order) and the second is the facts box -- the ratio
   below was still backwards (facts stuck at a fixed width, visual
   column taking the flexible remainder), which is exactly why
   "Capacity" / "Structure" kept wrapping into two lines however much
   that fixed width grew. Flipped here: visual column fixed and small,
   facts flexible and large. */
.tank-detail-overview {
  grid-template-columns: 150px minmax(0, 1fr);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.tank-detail-visual {
  transform: translateX(8px);
}
.tank-detail-facts {
  padding: 0 10px;
  /* Back to its own solid look (the base .facts white background) --
     only the big outer card around it should go very transparent now,
     not this inner box too. */
}
.tank-detail-facts .fact {
  padding-left: 4px;
  padding-right: 4px;
}
.tank-detail-facts .fact-v {
  font-size: 14px;
  font-weight: 650;
}
@media (max-width: 520px) {
  .tank-detail-overview {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 7px;
  }
  .tank-detail-visual {
    transform: translateX(6px);
  }
  .tank-detail-facts {
    padding: 0 8px;
  }
  .tank-detail-facts .fact-v {
    font-size: 13.5px;
  }
}
@media (max-width: 380px) {
  .tank-detail-overview {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 5px;
  }
  .tank-detail-visual {
    transform: translateX(5px);
  }
  .tank-detail-facts {
    padding: 0 6px;
  }
  .tank-detail-facts .fact-v {
    font-size: 13px;
  }
}


/* The v647/v648-era JS that used to position #tank-title and the
   overview card by hand (position:fixed, top/left/width set inline)
   is gone -- replaced by the flex-column + overlay layout below. The
   leftover position:relative / will-change rules that went with that
   old approach are removed here too; they were stale and not what's
   positioning anything now. */

/* Tank detail: a fixed-height flex column instead of scrolling with the
   page. Title + overview keep their natural height at the top; the
   canister list is the one flexible region below them with its own
   scroll, clipped by #view-tank's own overflow:hidden -- so canister
   rows can never appear above the overview card, because they never
   leave this one bounded box to begin with. Simpler and sturdier than
   tracking page scroll position and re-fixing elements by hand.
   Applies unconditionally via the ID selector, not only once JS adds
   the class, so the clipping boundary exists from the very first
   paint rather than depending on JS having already run. dvh is a
   steadier unit than vh in mobile WebViews for the same reason
   window.innerHeight is used in JS (setupTankScrollLayer in app.js)
   to refine the exact value afterward. */
#view-tank,
.tank-view-fixed-height {
  height: 100dvh;
  height: calc(100dvh - var(--clinic-header-height) - var(--tabbar) - env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view-tank .view-head {
  flex: 0 0 auto;
}
/* #tank-body holds two overlapping layers rather than a sequential
   stack: the canister scroll layer fills it completely top to bottom
   (so canisters can scroll all the way up to right under the title,
   not just up to wherever the info card's natural height happened to
   end), and the info card floats on top of it as its own absolutely
   positioned overlay with a solid background -- visually unchanged at
   rest (see the paddingTop set in JS, matching the overlay's height),
   but the canister layer's own top edge is now right under the title
   instead of under the whole info card. */
#tank-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.tank-canister-scroll-layer {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tank-detail-overview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  /* Very transparent now -- only this big outer card, not the inner
     Capacity/overall-fill/etc box, which keeps its own solid look. */
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* ---------- v665 — transparent tank overview shell ----------
   Keep the inner facts panel unchanged, but make the large outer shell
   genuinely transparent so the permanent background remains visible. */
.tank-detail-overview-overlay {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(4px) saturate(112%);
  -webkit-backdrop-filter: blur(4px) saturate(112%);
}

/* v666 — tank glass balance
   The large Tank overview shell should use the same glass density as the
   Tank T title capsule. Canister/Cane rows remain glass too, but are a bit
   more opaque so they stay clearly readable against the photo. */
/* v667 — smooth tank detail entry
   Tank detail should arrive as one calm, continuous surface rather than
   appearing abruptly. The canister headers follow just behind the page. */
#view-tank.is-entering {
  animation: tank-detail-in .58s cubic-bezier(.22,.61,.36,1) both;
  will-change: transform, opacity;
}

@keyframes tank-detail-in {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#view-tank.is-entering .tank-detail-overview-overlay {
  animation: tank-detail-surface-in .52s cubic-bezier(.22,.61,.36,1) .04s both;
}

#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head {
  animation: tank-canister-in .44s cubic-bezier(.22,.61,.36,1) both;
}
#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head:nth-child(1) { animation-delay: .10s; }
#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head:nth-child(3) { animation-delay: .14s; }
#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head:nth-child(5) { animation-delay: .18s; }
#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head:nth-child(7) { animation-delay: .22s; }
#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head:nth-child(9) { animation-delay: .26s; }
#view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head:nth-child(n+11) { animation-delay: .30s; }

@keyframes tank-detail-surface-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes tank-canister-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Opening a canister/cane drawer is deliberately a little slower than a
   button press, so its height and contents feel physically connected. */
#view-tank .acc-body {
  transition: height .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease;   /* v1058: shorter, so fewer frames of re-layout */
}

@media (prefers-reduced-motion: reduce) {
  #view-tank.is-entering,
  #view-tank.is-entering .tank-detail-overview-overlay,
  #view-tank.is-entering .tank-canister-scroll-layer > .acc > .acc-head {
    animation: none !important;
  }
  #view-tank .acc-body { transition: none; }
}

.tank-detail-overview-overlay {
  background: rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

#view-tank .acc-head {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-color: var(--glass-line);
}
#view-tank .acc-head.depth-2 {
  background: rgba(255, 255, 255, .58);
}

/* v668 — stack the LN2 tank settings and refill controls vertically.
   The tank title remains on the left while the two circular controls sit
   one above the other on the right side of the tank header. */
.tank-card-info .tank-head {
  position: relative;
  min-height: 64px;
  padding-right: 36px;
  align-items: flex-start;
}
.tank-card-info .tank-head .tank-name {
  display: block;
  padding-top: 7px;
}
.tank-card-info .tank-head .tank-n2-settings-btn,
.tank-card-info .tank-head .tank-n2-refill-btn {
  position: absolute;
  right: 0;
  margin: 0;
}
.tank-card-info .tank-head .tank-n2-settings-btn { top: 0; }
.tank-card-info .tank-head .tank-n2-refill-btn { top: 34px; }


/* v669/v670 — place tank settings/refill controls in the right-side visual area. v670 moves them further right and higher, matching the marked empty space. */
.tank-visual {
  position: relative;
  width: 100%;
  flex: 0 0 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.tank-visual-actions {
  position: absolute;
  right: 0.5%;
  top: 23%;
  transform: translateY(-38%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 6;
}
.tank-visual-actions .tank-n2-settings-btn,
.tank-visual-actions .tank-n2-refill-btn {
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
}
.tank-card-info .tank-head {
  position: static;
  min-height: 30px;
  padding-right: 0;
  align-items: center;
}
.tank-card-info .tank-head .tank-name { padding-top: 0; }
@media (max-width: 380px) {
  .tank-visual-actions { right: 0.5%; top: 23%; gap: 6px; }
}


/* v672 — precision alignment of the LN2 tank visual.
   The tank itself is centered in the right-side visual column. The storage
   gauge spans exactly from the bottom of the tank body to the point directly
   under the lid. The LN2 percentage is lifted slightly farther above the lid. */
.tank-detail-visual {
  transform: none !important;
}
.tank-detail-visual .tank-n2-percent {
  top: -7px !important;
}

@media (max-width: 520px) {
  .tank-detail-visual {
    transform: none !important;
  }
  .tank-detail-visual .tank-level-gauge {
    /* 92x148 SVG: body y=29..129 => 102.7px in CSS pixels.
       The centred SVG starts at 14px inside the 176px visual, so the body
       runs from ~43px to ~147px. */
    top: 44px !important;
    height: 103px !important;
  }
  .tank-detail-visual .tank-n2-percent {
    top: -7px !important;
  }
}

@media (max-width: 380px) {
  .tank-detail-visual .tank-level-gauge {
    /* 82x136 SVG: body y=29..129 => 100px in CSS pixels.
       The centred SVG starts at 20px, so the body runs from ~47px to ~120px.
       Keep the gauge exactly on that body span. */
    top: 47px !important;
    height: 94px !important;
  }
  .tank-detail-visual .tank-n2-percent {
    top: -7px !important;
  }
}

/* v673 — move the storage-occupancy gauge closer to the tank body.
   The facts panel stays untouched; only the gauge's horizontal anchor moves
   right so the gap between gauge and tank is smaller. */
.tank-detail-visual .tank-level-gauge {
  left: calc(50% - 56px) !important;
}
@media (max-width: 520px) {
  .tank-detail-visual .tank-level-gauge {
    left: calc(50% - 54px) !important;
  }
}
@media (max-width: 380px) {
  .tank-detail-visual .tank-level-gauge {
    left: calc(50% - 49px) !important;
  }
}


/* v674 — lift the storage-occupancy gauge upward beside the tank. */
.tank-detail-visual .tank-level-gauge {
  top: 24px !important;
}
@media (max-width: 520px) {
  .tank-detail-visual .tank-level-gauge {
    top: 24px !important;
  }
}
@media (max-width: 380px) {
  .tank-detail-visual .tank-level-gauge {
    top: 27px !important;
  }
}

/* v676 — shorten the storage-occupancy gauge from the bottom by about 15%,
   while preserving its current top position beside the tank. */
.tank-detail-visual .tank-level-gauge {
  height: 115px !important;
}
@media (max-width: 520px) {
  .tank-detail-visual .tank-level-gauge {
    height: 115px !important;
  }
}
@media (max-width: 380px) {
  .tank-detail-visual .tank-level-gauge {
    height: 113px !important;
  }
}

/* v678 — shorten the storage-occupancy gauge by an additional 2% from the top
   and 2% from the bottom, preserving its center position from v677. */
.tank-detail-visual .tank-level-gauge {
  top: 31.82px !important;
  height: 99.36px !important;
}
@media (max-width: 520px) {
  .tank-detail-visual .tank-level-gauge {
    top: 31.82px !important;
    height: 99.36px !important;
  }
}
@media (max-width: 380px) {
  .tank-detail-visual .tank-level-gauge {
    top: 34.68px !important;
    height: 97.63px !important;
  }
}

/* Offline indicator (see updateOfflineBanner in app.js, sw.js for what
   it's covering). Sits above everything, pinned to the top, so it's
   visible regardless of which screen is open when the connection
   drops. */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #B35C00;
  color: #fff;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: calc(7px + env(safe-area-inset-top, 0px)) 14px 7px;
}
.offline-banner.hidden {
  display: none;
}

/* Dots under the tank carousel showing which card is centered (see
   updateTankCarouselStack in app.js, which keeps .is-on in sync with
   the same focus calculation driving the scale/opacity of the cards
   themselves, from every call site -- initial render, scroll, and the
   settle backstop -- rather than needing its own separate update). */
.tanks-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.tanks-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(20, 49, 44, .22);
  transition: background .15s ease-out, transform .15s ease-out;
}
.tanks-dot.is-on {
  background: var(--accent, #0E7C6B);
  transform: scale(1.35);
}


/* Survival: patient card without the avatar tile. The counter is compact:
   - [ 12 ] + with a box just wide enough for a two-digit number, number
   centred, and the "out of N" label never wraps. */
#view-survival .survival-patient-card { gap: 0; }
#view-survival .survival-entry { flex-wrap: nowrap; }
#view-survival .survival-entry-label { white-space: nowrap; flex: 0 0 auto; }
#view-survival .survival-stepper {
  flex: 0 0 auto;
  width: auto;
  margin-inline-start: auto;
  justify-content: center;
  gap: 4px;
}
#view-survival .sv-input {
  flex: 0 0 52px;
  width: 52px !important;
  min-width: 52px;
  max-width: 52px !important;
  padding: 0 !important;
  text-align: center !important;
}
@media (max-width: 380px) {
  #view-survival .survival-entry { flex-direction: row; align-items: center; }
  #view-survival .survival-stepper { align-self: auto; }
}

/* Patient file: floating copy of the name box. position:sticky never held
   in this shell (an ancestor breaks it), so app.js shows this fixed clone
   under the header once the real name box has scrolled away. It uses the
   same .pf-patient-name class, so it keeps the same glass look. */
.pf-name-float {
  position: fixed;
  margin: 0 !important;
  min-height: 48px;
  box-sizing: border-box;
  z-index: 35;
  display: none;
}
.pf-name-float.is-on { display: flex; }


/* Fixed copy of a view title (Recent Patients, Register Patient, ...) —
   same .view-title glass look, pinned under the fixed header. */
.pinned-title-float {
  position: fixed;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 35;
  display: none;
}
.pinned-title-float.is-on { display: block; }


/* Performance: header box is more opaque (was almost fully transparent) and
   pinned under the header (fixed copy, see setupPinnedBox in app.js). */
#view-performance .performance-page-title-box {
  background: rgba(255,255,255,.66) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
}
.pinned-box-float {
  position: fixed;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 35;
  display: none;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 24px;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
  box-shadow: 0 7px 22px rgba(40,70,100,.08);
}
.pinned-box-float.is-on { display: block; }
.pinned-box-float .view-title {
  padding: 0; margin: 0 0 4px !important;
  background: none; border: 0; box-shadow: none;
  color: var(--ink); font-size: 22px;
}
.pinned-box-float .performance-page-note {
  margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45;
}

/* Performance period boxes: "This month" and "All time" are stacked in one
   column, each half a row tall; "Custom date range" fills the rest of the
   row. */
#view-performance .performance-periods {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
}
#view-performance .performance-periods > [data-period="month"] { grid-column: 1 !important; grid-row: 1 !important; }
#view-performance .performance-periods > [data-period="all"]   { grid-column: 1 !important; grid-row: 2 !important; }
#view-performance .performance-periods > .performance-custom-box { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
#view-performance .performance-period-box { min-height: 64px !important; }


/* Register Patient + Recent Patients: title boxes use exactly the same glass
   level as the Performance header box (white fill .66, blur 12px) — both the
   real title and its pinned copy. */
#view-recent .view-head .view-title,
#view-register .view-head .view-title,
.pinned-title-float {
  background: rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}


/* LN2 tank carousel: the front (focused) card uses the same glass level as
   the Performance header box (white fill .66, blur 12px) instead of the
   solid background the cards needed back when they overlapped. */
.tank-slide.is-focused .tank-visual-card {
  background: rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}


/* ---------- Patient portal sign-in (first screen a patient sees) ----------
   Light, clean and branded: soft mint wash, brand lockup, one glass card
   with large icon fields. The top padding clears Telegram's own header
   (Close / menu buttons) -- before, the title ran underneath it. */
#p-login.p-view {
  padding: 0 !important;
  min-height: 100vh;
  background:
    radial-gradient(120% 55% at 90% -8%, #C8EADF 0%, rgba(200,234,223,0) 62%),
    radial-gradient(90% 45% at -12% 28%, #E4F3EE 0%, rgba(228,243,238,0) 62%),
    linear-gradient(180deg, #F3F9F7 0%, #FFFFFF 72%);
}
#p-login .pl-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding:
    max(92px, calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 22px))
    22px calc(34px + env(safe-area-inset-bottom, 0px));
  animation: pl-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #p-login .pl-wrap { animation: none; } }

#p-login .pl-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
#p-login .pl-logo {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(145deg, #14957F, #0A6556);
  box-shadow: 0 10px 22px rgba(14,124,107,.30), inset 0 1px 0 rgba(255,255,255,.35);
}
#p-login .pl-logo svg { width: 25px; height: 25px; }
#p-login .pl-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
#p-login .pl-brandname { font-size: 18px; font-weight: 800; letter-spacing: .3px; color: var(--ink); }
#p-login .pl-brandsub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

#p-login .pl-title { font-size: 31px; line-height: 1.18; font-weight: 800; letter-spacing: -.3px; margin: 0 0 12px; color: var(--ink); }
#p-login .pl-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 30em; }

#p-login .pl-card {
  margin-top: 26px; padding: 22px 18px 18px; border-radius: 28px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 22px 54px rgba(20,49,44,.12), 0 2px 8px rgba(20,49,44,.05), inset 0 1px 0 #fff;
}
#p-login .pl-field { margin: 0 0 16px; }
#p-login .pl-label { display: block; margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
#p-login .pl-input {
  display: flex; align-items: center; gap: 11px; height: 58px; padding: 0 16px;
  border-radius: 17px; background: #F2F7F5; border: 1.5px solid transparent;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
#p-login .pl-input:focus-within {
  background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(14,124,107,.13);
}
#p-login .pl-ico { display: grid; place-items: center; flex: 0 0 auto; }
#p-login .pl-ico svg { width: 21px; height: 21px; stroke: var(--accent); }
#p-login .pl-input input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100% !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font-size: 16.5px; color: var(--ink);
}
#p-login .pl-input input::placeholder { color: #9AAEA9; opacity: 1; }

#p-login .error { margin: 0 4px 14px; }
#p-login .pl-btn {
  display: flex; align-items: center; justify-content: center;
  height: 58px; margin-top: 4px; border-radius: 17px; font-size: 16.5px; font-weight: 700; letter-spacing: .1px;
  background: linear-gradient(135deg, #14957F 0%, #0A6556 100%) !important; color: #fff !important;
  box-shadow: 0 14px 28px rgba(14,124,107,.32), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .12s, box-shadow .18s, opacity .18s;
}
#p-login .pl-btn::after { content: "\2192"; margin-inline-start: 10px; font-size: 19px; transition: transform .18s; }
#p-login .pl-btn:active { transform: translateY(1px) scale(.992); box-shadow: 0 8px 18px rgba(14,124,107,.28); }
#p-login .pl-btn:active::after { transform: translateX(3px); }
#p-login .pl-btn:disabled { opacity: .7; }

#p-login .pl-note {
  display: flex; align-items: flex-start; gap: 9px; margin: 20px 6px 0;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
#p-login .pl-note svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
#p-login .pl-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 4px 0; padding: 0; }
#p-login .pl-points li {
  padding: 8px 13px 8px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #1C5A4F;
  background: rgba(14,124,107,.09); border: 1px solid rgba(14,124,107,.14);
}
#p-login .pl-points li::before { content: "\2713"; margin-inline-end: 6px; color: var(--accent); font-weight: 800; }


/* sign-in: language switcher + right-to-left arrow */
#p-login .pl-lang {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 22px; border-radius: 15px;
  background: rgba(14,124,107,.08); border: 1px solid rgba(14,124,107,.10);
}
#p-login .pl-lang button {
  flex: 1 1 0; min-width: 0; height: 38px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: #3E6A61; font: inherit; font-size: 14px; font-weight: 600;
  transition: background .18s, color .18s, box-shadow .18s;
}
#p-login .pl-lang button.is-on {
  background: #fff; color: var(--accent); font-weight: 800;
  box-shadow: 0 2px 8px rgba(20,49,44,.12);
}
html[dir="rtl"] #p-login .pl-btn::after { content: "\2190"; }
html[dir="rtl"] #p-login .pl-btn:active::after { transform: translateX(-3px); }
html[dir="rtl"] #p-login .pl-note, html[dir="rtl"] #p-login .pl-label { text-align: right; }


/* ---------- Dropdowns: chips + bottom picker (see enhanceSelect) ---------- */
.dd > .dd-view { display: block; width: 100%; }
.dd > .dd-view.is-disabled { opacity: .55; }
.dd-btn:disabled { cursor: default; }

.dd-view.dd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dd-chip {
  flex: 1 1 0; min-width: 0; min-height: 50px; padding: 10px 12px;
  border-radius: 15px; border: 1.5px solid rgba(50,110,95,.20);
  background: rgba(255,255,255,.78); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.25;
  transition: background .16s, border-color .16s, box-shadow .16s, color .16s, transform .1s;
}
.dd-chip:active { transform: scale(.985); }
.dd-chip.is-on {
  background: linear-gradient(135deg, #14957F 0%, #0A6556 100%);
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px rgba(14,124,107,.26), inset 0 1px 0 rgba(255,255,255,.25);
}
.dd-chip:disabled { cursor: default; }

/* the picker sits above every other sheet, including a sheet that opened it */
#optpick { z-index: 3000 !important; }
#optpick .optpick-sheet { max-height: 82vh; display: flex; flex-direction: column; }
.optpick-list {
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  max-height: min(58vh, 440px); margin: 6px -2px 6px; padding: 2px;
  -webkit-overflow-scrolling: touch;
}
.optpick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 54px; padding: 12px 16px; margin: 0 0 8px;
  border-radius: 16px; border: 1px solid rgba(50,110,95,.14);
  background: rgba(255,255,255,.72); color: var(--ink);
  font: inherit; font-size: 16px; text-align: start;
}
.optpick-row:active { background: rgba(14,124,107,.08); }
.optpick-row.is-on {
  background: rgba(14,124,107,.10); border-color: var(--accent); font-weight: 700; color: #0A5A4C;
}
.optpick-row.is-on::after { content: "\2713"; font-weight: 800; color: var(--accent); }
.optpick-group { margin: 12px 6px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.optpick-empty { padding: 18px; text-align: center; color: var(--muted); }
#optpick-search {
  width: 100%; margin: 4px 0 8px; min-height: 48px; padding: 10px 14px; border-radius: 15px;
  border: 1px solid rgba(50,110,95,.2); background: rgba(255,255,255,.85); font-size: 16px;
}


/* Embryo Transfer list: a row with its small cancel button beside it */
.et-row-wrap { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.et-row-wrap > .row { margin-bottom: 0; }
.et-cancel-x { flex: 0 0 auto; width: 48px; min-height: 48px; padding: 0; font-size: 18px; border-radius: 15px; align-self: center; }


/* LN2 tank: the liquid moves. Two wave layers slide sideways by exactly one
   wavelength per cycle (so the loop is seamless) and the whole surface bobs
   a little. Only the card in front animates; the others are paused to save
   battery, and people who asked their phone for less motion get a still tank. */
.tank-wave { animation: tank-wave-x 3.8s linear infinite; }
.tank-wave.is-back { animation-duration: 6.2s; animation-direction: reverse; }
.tank-wave-bob { animation: tank-bob 4.6s ease-in-out infinite alternate; }
@keyframes tank-wave-x { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--wl, 24px))); } }
@keyframes tank-bob { from { transform: translateY(-.8px); } to { transform: translateY(1px); } }
.tank-slide:not(.is-focused) .tank-wave,
.tank-slide:not(.is-focused) .tank-wave-bob { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tank-wave, .tank-wave-bob { animation: none; }
}


/* Embryos in the tank: they drift on slow looping paths and turn. The outer
   group moves, the inner group spins around its own centre. */
.tank-swim { transform-box: fill-box; transform-origin: center; }
.tank-swim.drift-a { animation: tank-drift-a 12s ease-in-out infinite; }
.tank-swim.drift-b { animation: tank-drift-b 15s ease-in-out infinite; }
.tank-swim.drift-c { animation: tank-drift-c 13s ease-in-out infinite; }
.tank-swim.drift-d { animation: tank-drift-d 16s ease-in-out infinite; }
.tank-swim.spin-slow { animation: tank-spin 28s linear infinite; }
.tank-swim.spin-slow-r { animation: tank-spin 22s linear infinite reverse; }
@keyframes tank-drift-a {
  0% { transform: translate(0, 0); } 25% { transform: translate(7px, -4px); }
  50% { transform: translate(3px, 4px); } 75% { transform: translate(-6px, -2px); } 100% { transform: translate(0, 0); }
}
@keyframes tank-drift-b {
  0% { transform: translate(0, 0); } 30% { transform: translate(-6px, 4px); }
  60% { transform: translate(5px, -4px); } 100% { transform: translate(0, 0); }
}
@keyframes tank-drift-c {
  0% { transform: translate(0, 0); } 33% { transform: translate(5px, 5px); }
  66% { transform: translate(-5px, 2px); } 100% { transform: translate(0, 0); }
}
@keyframes tank-drift-d {
  0% { transform: translate(0, 0); } 40% { transform: translate(-4px, -5px); }
  75% { transform: translate(6px, 1px); } 100% { transform: translate(0, 0); }
}
@keyframes tank-spin { to { transform: rotate(360deg); } }
.tank-slide:not(.is-focused) .tank-swim { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tank-swim { animation: none; } }


/* ---------- 25 July: Embryologist Day greeting in the header strip ----------
   No box: every letter has its own colour and bounces in a wave, with a white
   halo so it stays readable on the glass, a wavy colour underline, twinkling
   stars around it and a blastocyst / 8-cell embryo at the sides. Plain colours
   and transforms only (gradient-clipped text drew a smear in this web view).
   A direct child of <body>; placeEmbryologistDay() sets the final top. */
#embryologist-day {
  position: fixed; top: 36px; left: 50%; transform: translateX(-50%);
  z-index: 9000; display: flex; align-items: center; justify-content: center; gap: 7px;
  max-width: calc(100% - 226px); white-space: nowrap; pointer-events: none;
}
#embryologist-day.hidden { display: none !important; }
.eday-text { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.08; }
.eday-pre, .eday-text b { display: block; font-family: 'Vazirmatn', system-ui, sans-serif; font-weight: 900; }
.eday-pre { font-size: 15px; letter-spacing: 3.5px; text-transform: uppercase; }
.eday-text b { font-size: 17.5px; letter-spacing: .2px; }
.eday-ch {
  display: inline-block; color: var(--c, #0A6556);
  text-shadow: 0 0 5px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.85), 0 1px 0 #fff, 0 2px 6px rgba(20,49,44,.20);
  animation: eday-wave 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 85ms);
}
.eday-ch.sp { width: .28em; }
@keyframes eday-wave { 0%, 60%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-3.5px) scale(1.12); } }
.eday-line { width: 100%; height: 6px; margin-top: 1px; filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); animation: eday-sway 3.4s ease-in-out infinite; }
@keyframes eday-sway { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.eday-ico { width: 21px; height: 21px; flex: 0 0 auto; color: #0E7C6B; filter: drop-shadow(0 0 4px rgba(255,255,255,.95)); animation: eday-twinkle 2.6s ease-in-out infinite; }
.eday-ico:last-of-type { animation-delay: -1.3s; color: #E11D74; }
@keyframes eday-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .92; } 50% { transform: scale(1.18) rotate(14deg); opacity: 1; } }
/* four-point stars */
.eday-spark {
  position: absolute; width: 11px; height: 11px; display: block; pointer-events: none;
  background: var(--s, #F59E0B);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.95));
  animation: eday-star 2.2s ease-in-out infinite;
}
.eday-spark.s1 { left: 6px;  top: -9px;  --s: #F59E0B; animation-delay: 0s; }
.eday-spark.s2 { left: 30%;  top: -12px; --s: #E11D74; width: 8px; height: 8px; animation-delay: -.7s; }
.eday-spark.s3 { right: 28%; top: -10px; --s: #0E9C8C; animation-delay: -1.3s; }
.eday-spark.s4 { right: 4px; top: -8px;  --s: #7C4DFF; width: 9px; height: 9px; animation-delay: -.4s; }
.eday-spark.s5 { left: 18%;  bottom: -11px; --s: #E11D74; width: 9px; height: 9px; animation-delay: -1.7s; }
.eday-spark.s6 { right: 20%; bottom: -12px; --s: #F59E0B; animation-delay: -1s; }
@keyframes eday-star { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .25; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eday-ch, .eday-line, .eday-ico, .eday-spark { animation: none; } .eday-spark { opacity: .9; transform: none; } }




/* ---------- Home date box ----------
   Normally untouched: same size, date centred, as before. Only while the
   Embryologist Day greeting is showing (class .has-eday) does the date become
   small and move to the left, with the greeting filling the rest of the box.
   The box is pinned under the header like the Register Patient title
   (setupPinnedBox in app.js). ---------- */
.pinned-box-float.today-datebox { padding: 12px 18px; border-radius: 20px; }
#view-home .today-datebox.has-eday,
.pinned-box-float.today-datebox.has-eday {
  justify-content: flex-start !important; gap: 10px; direction: ltr; text-align: start;
}
#view-home .today-datebox.has-eday .today-date,
.pinned-box-float.today-datebox.has-eday .today-date {
  flex: 0 0 auto; margin: 0 !important; text-align: start;
  font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  color: #3F6158 !important; white-space: nowrap;
}
.today-datebox #embryologist-day {
  position: relative; top: auto; left: auto; transform: none; z-index: 1;
  flex: 1 1 auto; max-width: none; min-width: 0; padding: 4px 0 6px;
}
.today-datebox #embryologist-day .eday-pre { font-size: 13px; letter-spacing: 3px; }
.today-datebox #embryologist-day .eday-text b { font-size: 16px; }
.today-datebox #embryologist-day .eday-ico { width: 20px; height: 20px; }


/* ---------- Medications ---------- */
.med-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.med-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.med-actions .btn { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 10px; font-size: 14px; }
.med-time-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.med-time-pill { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #0A5A4C; background: rgba(14,124,107,.10); border: 1px solid rgba(14,124,107,.16); }
.med-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; min-height: 8px; }
.med-time-chip { padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; border: 0;
  background: linear-gradient(135deg, #14957F 0%, #0A6556 100%); box-shadow: 0 6px 14px rgba(14,124,107,.22); }
.med-summary { font-weight: 700; color: #0A5A4C; }


/* the beta copy says so, always */
#beta-badge {
  position: fixed; top: 38px; left: 50%; transform: translateX(-50%); z-index: 9500;
  padding: 3px 11px; border-radius: 999px; pointer-events: none;
  font: 800 12px/1.3 'Vazirmatn', system-ui, sans-serif; letter-spacing: 1.2px;
  color: #fff; background: linear-gradient(135deg, #E11D74, #F59E0B); box-shadow: 0 4px 12px rgba(225,29,116,.35);
}


.reg-meds-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }


/* Tank page: the information card pages sideways between tanks */
.tank-swipeable { touch-action: pan-y; }
/* the info card is laid out right-to-left (tank on the right, facts on the left), and the dots
   inherited that: the first tank showed as the LAST dot. They run left to right, like the dots on the tanks page. */
.tank-swipe-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 5px; pointer-events: none; direction: ltr; }
.tank-swipe-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,60,50,.22); transition: all .2s; }
.tank-swipe-dots i.is-on { width: 16px; border-radius: 4px; background: #0E7C6B; }
#tank-title .tank-title-text, .tank-detail-visual-col, .tank-detail-facts, .acc > .acc-head.depth-1 { will-change: transform; }
/* while the tank and its facts slide, they are cut off at the edge of the big card instead of
   floating outside it (only during paging, so the facts box keeps its shadow the rest of the time) */
.tank-detail-overview.is-paging, #tank-title.is-paging { overflow: hidden; }
#tank-title .tank-title-text { display: inline-block; }
/* boxes slide sideways beyond the list's edge while they move: never let that scroll the list sideways */
.tank-canister-scroll-layer { overflow-x: hidden; }


/* beta only: a script error is shown on screen so it can be photographed */
#beta-error { display: none; position: fixed; left: 10px; right: 10px; bottom: 100px; z-index: 9600; padding: 8px 12px;
  border-radius: 12px; background: #B3261E; color: #fff; font: 600 12px/1.4 system-ui, sans-serif; word-break: break-word;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#beta-error.is-on { display: block; }


/* an empty tank: one small note under the info card (not a panel that fills the screen) */
.tank-empty-note {
  padding: 12px 16px; border-radius: 18px; text-align: center; font-size: 14px; color: var(--muted);
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 5px rgba(20,49,44,.08);
}


/* ---------- One panel format for the work menus ----------
   The same as Record embryos / Puncture / ICSI: ONE glass panel; inside it the
   title, the description under it, then the boxes (rows, search bar, buttons).
   No separate title pill above the panel. Used by Pending Embryo Disposition,
   Donor Bank, Embryo transfer, Embryo Transfer Results, Freeze and Thaw. */
.unified-panel { margin-top: 0; padding: 12px; }
.unified-panel > .view-head {
  margin: 0 0 var(--app-box-gap); padding: 0; background: transparent; border: 0; border-radius: 0;
  box-shadow: none; display: block;
}
.unified-panel > .view-head .view-title {
  margin: 0 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0;
}
.unified-panel > .view-head .section-title-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.unified-panel .rows { display: grid; gap: var(--app-box-gap); }
.unified-panel > .searchbar { margin: 0 0 var(--app-box-gap); }
/* the boxes inside the panel are glass like the patient rows, not solid white */
.unified-panel .disposition-card,
.unified-panel > .btn-secondary,
.unified-panel .rows > .btn-quiet,
.unified-panel .rows > .btn-secondary {
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(20,49,44,.07), 0 1px 5px rgba(20,49,44,.08);
}
.unified-panel > .btn-secondary { width: 100%; margin-top: 0; }
.unified-panel > .btn + .btn, .unified-panel > .searchbar + .btn { margin-top: var(--app-box-gap); }
.unified-panel #th-flow { margin-top: var(--app-box-gap); }


/* Freeze: ONE panel -- the due list, the search and the search results all sit inside it */
.unified-panel #fz-due-panel { margin-bottom: var(--app-box-gap); }
.unified-panel .fz-search-block .panel-note { margin: 0 2px var(--app-box-gap); }
.unified-panel .fz-search-block .searchbar { margin: 0; }
.unified-panel #fz-panel { margin-top: var(--app-box-gap); }
.unified-panel #fz-panel .panel-note { margin: 0 2px var(--app-box-gap); }


/* ---------- Lab format ---------- */
.lab-panel .field { margin-bottom: var(--app-box-gap); }
.lab-panel textarea { width: 100%; min-height: 64px; resize: vertical; }
.lab-asset { display: flex; gap: 12px; align-items: center; padding: 10px; margin: 2px 0 var(--app-box-gap); border-radius: 18px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 5px rgba(20,49,44,.08); flex-wrap: wrap; }
.lab-asset-box { flex: 0 0 92px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid rgba(50,110,95,.18);
  background-color: #fff; background-image: conic-gradient(#e9efec 25%, #fff 0 50%, #e9efec 0 75%, #fff 0); background-size: 12px 12px; }
.lab-asset-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lab-asset-empty { font-size: 26px; color: #6b8a80; }
.lab-asset-main { flex: 1 1 140px; min-width: 0; }
.lab-asset-title { font-weight: 800; font-size: 15px; }
.lab-asset-state { font-size: 12.5px; font-weight: 700; color: #0A5A4C; margin-top: 1px; }
.lab-asset-hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.lab-asset-actions { display: flex; gap: 8px; flex: 1 1 100%; }
.lab-asset-actions .btn { flex: 1 1 0; min-height: 42px; padding: 8px 10px; font-size: 14px; }
.lab-warn { color: #8A5A00; }
.lab-status { min-height: 18px; text-align: center; font-weight: 700; }
#lab-save { margin-bottom: 14px; }

/* the sketch of the report */
.lab-paper { background-color: #fff; border-radius: 10px; padding: 16px 16px 12px; box-shadow: 0 6px 22px rgba(20,49,44,.16);
  border: 1px solid rgba(20,49,44,.08); color: #1c2f2a; min-height: 330px; display: flex; flex-direction: column; font-size: 11px; }
.lab-p-head { display: flex; gap: 12px; align-items: center; }
.lab-p-logo { width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px; }
.lab-p-logo-ph { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #E3F1EC; color: #0E7C6B; font-weight: 900; font-size: 22px; }
.lab-p-id { min-width: 0; }
.lab-p-name { font-weight: 900; font-size: 15px; line-height: 1.2; }
.lab-p-tag { font-style: italic; color: #4d6a62; margin-top: 1px; }
.lab-p-contact { color: #4d6a62; font-size: 9.5px; margin-top: 3px; line-height: 1.35; }
.lab-p-rule { height: 2px; background: linear-gradient(90deg, #0E7C6B, rgba(14,124,107,.15)); margin: 10px 0; border-radius: 2px; }
.lab-p-title { font-weight: 900; font-size: 13px; text-align: center; }
.lab-p-patient { text-align: center; color: #6b8a80; margin: 2px 0 10px; }
.lab-p-line { height: 8px; border-radius: 4px; background: #E8EFEC; margin: 0 0 7px; }
.lab-p-sign { margin-top: auto; padding-top: 16px; display: flex; justify-content: flex-end; }
.lab-p-signcol { text-align: center; min-width: 46%; }
.lab-p-sig { max-width: 130px; max-height: 52px; display: block; margin: 0 auto; }
.lab-p-sigline { border-bottom: 1px solid #9bb3aa; height: 34px; color: #9bb3aa; font-size: 9px; display: flex; align-items: flex-end; justify-content: center; }
.lab-p-stamp { max-width: 84px; max-height: 60px; display: block; margin: 4px auto 0; }
.lab-p-signname { font-weight: 800; font-size: 10px; margin-top: 4px; }
.lab-p-signsub { font-weight: 600; color: #4d6a62; margin-top: 1px; }
.lab-p-foot { margin-top: 12px; padding-top: 6px; border-top: 1px solid #E1EAE6; text-align: center; color: #6b8a80; font-size: 8.5px; line-height: 1.4; min-height: 12px; }


/* ---------- Appearance screen and the dark look ---------- */
.ap-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-prev { height: 120px !important; }
.ap-look { appearance: none; border: 2px solid transparent; background: transparent; padding: 6px; border-radius: 20px; font: inherit; color: var(--ink); text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-look.is-on { border-color: var(--accent); background: var(--glass-bg); }
.ap-look-name { font-weight: 700; font-size: 15px; }
.ap-prev { height: 92px; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ap-pane { height: 22px; border-radius: 10px; }
.ap-pane-2 { width: 62%; }
.ap-prev-light { background: linear-gradient(135deg, #DFF1E8, #A9D6C3); }
.ap-prev-light .ap-pane { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); }
.ap-note { margin-top: 10px !important; }
.ap-range { width: 100%; accent-color: var(--accent); margin: 8px 0 2px; }
.ap-range-val { font-weight: 700; text-align: center; color: var(--ink); }
.ap-sample-row { pointer-events: none; }
.ap-reset { margin-top: 12px; width: 100%; }

/* The surfaces that carry the glass. Many of them keep their own fixed colours in the base styles, so the looks (and the
   transparency slider) restyle them here, through the same --glass-* variables. Light with the slider untouched matches
   none of these selectors: the app stays exactly as it was. */
html[data-glass="custom"] :is(.list-panel, .menu-group, .facts, .row, .tile, .empty, .btn:not(.btn-primary), .hero-plate, .summary, .block, .form-card, .dashboard-block, .today-section, .today-datebox, .sum-cell, .acc-head, .sample-row, .p-storage-tile, .lab-tank-card, .lab-monitor-card, .inventory-overview-card, .invite-clinic-card, .today-fullscreen-body, .lab-asset-box):not(.is-picked):not(.is-on):not(.fe-depleted) {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-line) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(165%) !important;
  box-shadow: var(--glass-edge), var(--glass-shadow) !important;
}
/* canister / cane suggestions: the one currently typed or picked */
.pick-chip.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pick-chip.is-used { font-weight: 700; }

.row .row-straw-dot { margin: 0 8px; flex: 0 0 auto; align-self: center; }
.row .row-straw-dot .color-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(128,128,128,.45); }

.plan-donor-group{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.plan-donor-group .field{margin-top:10px}
.plan-donor-group .field:first-child{margin-top:0}
.plan-donor-group:not(:has(> .field:not(.hidden))),#view-register .plan-donor-group:not(:has(> .field:not(.hidden))){display:none}   /* v1417: only its own rows count; an empty box is not drawn */

.tank-stats-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:300px;text-align:center}
.tank-stats-title{font-size:26px;font-weight:700}
.tank-stats-sub{font-size:14px;opacity:.75;max-width:200px}
.tstat-summary{margin-bottom:10px}
.tstat-note{font-size:12.5px;opacity:.7;margin:4px 4px 12px}
.tstat-tank{margin-bottom:10px}
.tstat-tank-name{font-size:18px;font-weight:700;margin-bottom:6px}
.tstat-filter{margin-bottom:10px}.tstat-actions{display:flex;gap:8px;margin-top:10px}.tstat-actions .btn{flex:1}

.tstat-panel{margin-bottom:12px}
.tstat-filter{margin-bottom:10px}
.tstat-filter .report-date-range{grid-template-columns:1fr;gap:8px}
.tstat-filter .report-date-separator{display:none}
.tstat-filter .report-date-field label{font-size:.85rem;opacity:.9;font-weight:600;margin-bottom:4px}
.tstat-note{opacity:.85;font-size:13px}
.tstat-tank{background:rgba(255,255,255,.62);border-radius:16px;padding:12px;margin-bottom:10px;box-shadow:0 1px 5px rgba(20,49,44,.08)}
.tstat-tank .fact-k,.tstat-tank .fact-v,.tstat-tank-name{color:#14312c}

/* Oocyte survival uses the embryo survival look exactly. */
#view-oocyte-survival .sv-input{width:48px !important;min-width:48px;max-width:48px;height:34px;padding:0 2px;border:0;outline:0;background:transparent;color:var(--ink);text-align:center;font-size:17px;line-height:34px;font-weight:700;direction:ltr;box-shadow:none}
#view-oocyte-survival .sv-input:focus{border:0;box-shadow:none}
#view-oocyte-survival .survival-list{gap:12px}
#view-oocyte-survival .survival-straw-card{overflow:hidden}
#view-oocyte-survival .survival-entry{margin-top:13px;padding-top:12px}
#view-oocyte-survival .survival-stepper{flex:0 0 auto}
@media (max-width:380px){#view-oocyte-survival .survival-entry{align-items:flex-start;flex-direction:column}#view-oocyte-survival .survival-stepper{align-self:flex-end}}

/* Appearance: the flat "Plain" look preview */
.ap-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-prev-plain { background: #DCE0E4; }
.ap-prev-plain .ap-pane { background: #EDEFF1; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 5px 10px rgba(30,40,50,.18); }

/* Embryo disposition: new straws for the refrozen embryos */
.disposition-straws { margin: 14px 0; }
.disp-straws-title { font-weight: 700; font-size: 17px; margin: 0 4px 4px; color: var(--ink); }
.disp-new-straw { margin-top: 10px; }
.disp-new-straw .disposition-card-top { gap: 10px; align-items: center; }
.disp-straw-label-input { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 16px; padding: 10px 12px; border-radius: 14px; }
.disp-straw-remove { flex: 0 0 auto; padding: 8px 12px; }
.disp-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.disp-pick-name { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--ink); }
.disp-pick-stepper { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.disp-pick-val { min-width: 24px; text-align: center; font-weight: 700; font-size: 17px; color: var(--ink); }
.disp-straw-colors { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.inf-edit-btn{margin-top:10px}
.inf-edit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(0,0,0,.06)}
.inf-edit-add{display:flex;gap:8px;margin-top:12px}
.inf-edit-add input{flex:1;min-width:0}

html[data-look="plain"] #reg-donor-type,html[data-look="plain"] #reg-donor-destination,html[data-look="plain"] #donor-form-type,html[data-look="plain"] #donor-form-destination{color:#2B333B !important;-webkit-text-fill-color:#2B333B !important;font-weight:600}
html[data-look="plain"] #reg-donor-type option,html[data-look="plain"] #reg-donor-destination option{color:#2B333B}

#view-register.reg-existing .reg-id-field,#view-register.reg-existing .plan-donor-group,#view-register.reg-existing #reg-inf-field,#view-register.reg-existing #reg-donor-field{display:none !important}
#reg-ex-chosen{margin-top:10px}

.th-straw-row{gap:12px}
.th-check{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid rgba(60,72,84,.35);background:#fff;color:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;line-height:1;transition:background .15s,border-color .15s,color .15s}
.th-straw-row.is-on .th-check{background:#3F4851;border-color:#3F4851;color:#fff}
html[data-look="plain"] .th-straw-row.is-on{background:#DDE1E5 !important;border:2px solid #3F4851 !important}
html[data-look="plain"] .th-straw-row.is-on .th-check{background:#3F4851 !important;border-color:#3F4851 !important;color:#fff !important}
.th-straw-row .row-title{white-space:normal;overflow:visible;text-overflow:clip}

/* stepper: the number sits centred between - and + */
.survival-stepper input,.survival-stepper .sv-input{background:transparent !important;border:0 !important;box-shadow:none !important;text-align:center !important;padding:0 !important;text-indent:0 !important}
html[data-look="plain"] .survival-stepper input,html[data-look="plain"] .survival-stepper .sv-input{background:transparent !important;border:0 !important;box-shadow:none !important;text-align:center !important;padding:0 !important}

/* Biopsy */
.bp-patient{font-weight:700;font-size:17px;margin:4px 0 10px}
.bp-sources,.bp-groups{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.bp-row{border:1px solid rgba(120,130,140,.28);border-radius:14px;padding:10px;margin:10px 0;display:grid;gap:8px;background:rgba(255,255,255,.55)}
.bp-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bp-num{font-weight:800;font-size:16px}
.bp-day{font-size:12.5px;opacity:.75}
.bp-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bp-row-grid select{width:100%}
.bp-cells{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bp-nuc{display:flex;align-items:center;gap:8px;font-size:14px}
.bp-nuc input{width:20px;height:20px}
.bp-remove{border:0;background:transparent;font-size:20px;line-height:1;padding:4px 8px;cursor:pointer;opacity:.7}
.bp-label-card{border:1px dashed rgba(120,130,140,.6);border-radius:10px;padding:8px 10px;margin:6px 0;display:flex;justify-content:space-between;gap:10px;font-size:14px}
#bp-print{display:none}
@media print{
  body>*:not(#bp-print){display:none !important}
  #bp-print{display:block !important;padding:8px;color:#000;background:#fff}
  #bp-print .bp-print-label{border:1px solid #000;padding:6px 8px;margin:0 0 6px;font-size:14px;page-break-inside:avoid}
}

.bp-row-head{cursor:pointer}
.bp-pick{width:22px;height:22px;flex:0 0 auto}
.bp-row-head .bp-day{flex:1}
.bp-cells{flex-wrap:nowrap}
.bp-cells-label{white-space:nowrap;font-size:14px}
.bp-stepper{flex:0 0 auto;width:132px;min-height:0;padding:2px}
.bp-stepper .survival-step-btn{width:32px;height:32px;min-width:32px;font-size:18px}
.bp-stepper .sv-input{width:44px;min-width:0;height:32px;font-size:15px}
.bp-row:not(.is-on){opacity:.85}

.bp-row.is-on{border-color:rgba(46,125,90,.6);box-shadow:0 0 0 1px rgba(46,125,90,.25)}
.bp-row:not(.is-on){opacity:1}

/* Biopsy: quick, steady entry; no layout jump while the list loads */
#bp-search{display:flex;flex-direction:column;gap:10px}
#bp-results .row{animation:none}
.bp-row{contain:layout style}
.bp-row select{will-change:auto}

/* Smoother entry: GPU-composited layers, a gentler rise, and an ease that
   starts and ends softly. Only opacity and transform are animated. */
.view.is-entering,.view.admin-menu-entry{will-change:opacity,transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.view.is-entering{animation-name:view-in-soft !important;animation-timing-function:cubic-bezier(.33,1,.68,1) !important}
@keyframes view-in-soft{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.menu-group .tile{will-change:opacity,transform;animation-timing-function:cubic-bezier(.33,1,.68,1)}
@media(prefers-reduced-motion:reduce){.view.is-entering{animation:none !important}}

/* My profile */
.mp-card{text-align:center}
.mp-avatar-wrap{position:relative;display:block;width:112px;height:112px;margin:6px auto 12px;cursor:pointer}
.mp-avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 8px 22px rgba(0,0,0,.18);background:#4A5560}
.mp-cam{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;background:#3F4851;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.mp-cam svg{width:18px;height:18px}
.mp-name{margin:4px 0 2px;font-size:20px}
.mp-sub{font-size:13.5px;opacity:.75;margin-bottom:12px}
.mp-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.mp-info{text-align:start;margin:12px 0}
.mp-row{display:flex;justify-content:space-between;gap:12px;padding:11px 4px;border-top:1px solid rgba(120,130,140,.22);font-size:14.5px}
.mp-k{opacity:.7}
.mp-v{font-weight:600;text-align:end}
.user-avatar,#dtop-user-avatar{cursor:pointer}

/* Genetic case card: a fine two-column table with faint grey rules */
.genetic-case-card .genetic-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(120,130,140,.28);border:1px solid rgba(120,130,140,.28);border-radius:14px;overflow:hidden;padding:0}
.genetic-case-card .genetic-facts .fact{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:0;border-radius:0;background:var(--glass-bg,#EDEFF1)}
.genetic-case-card .genetic-facts .fact:last-child:nth-child(odd){grid-column:1/-1}
.genetic-case-card .genetic-facts .fact-k{font-size:11px;line-height:1.2;letter-spacing:.2px;opacity:.7}
.genetic-case-card .genetic-facts .fact-v{font-size:14px;font-weight:600;line-height:1.3;text-align:start;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.genetic-case-card .genetic-actions .btn{min-height:44px;font-size:14px;padding:8px 10px}

/* v865: standard spacing between Lab format panels */
#lab-body { display: flex; flex-direction: column; gap: 10px; }
#lab-body > .lab-panel { margin: 0 !important; }
/* v866: Lab format — textarea matches the text inputs; preview sheet rounded like the other boxes */
.lab-panel textarea { border: 0; border-radius: 18px; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--ink, #14312C); background: #fff; box-sizing: border-box; }
.lab-paper { border-radius: 18px; }
/* v869: genetic edit sheet — notes box rounded like the other fields */
.genetic-edit-sheet textarea, .genetic-field textarea { width: 100%; border: 0; border-radius: 18px; padding: 13px 14px; font: inherit; font-size: 16px; background: #fff; box-sizing: border-box; }
/* v872: the time picker opened from inside a sheet must stack above it, like the date picker */
#timepick { z-index: 80 !important; }
/* v873: back button for the web version (Telegram draws its own) */
.web-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 9px 16px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--ink, #14312C); background: #EDEFF1; box-shadow: 0 2px 8px rgba(30,40,50,.12); cursor: pointer; }
.web-back.hidden { display: none; }
[dir="rtl"] .web-back { flex-direction: row-reverse; }
.web-back { align-self: flex-start; width: auto; justify-self: start; }
/* v875: web back button sits where Telegram draws its own — top-left, above the profile photo */
.web-back { position: fixed; top: 10px; inset-inline-start: 12px; z-index: 120; margin: 0; padding: 7px 14px 7px 10px; gap: 6px; font-size: 14px;
  color: #fff; background: rgba(95,105,115,.78); box-shadow: none; align-self: auto; }
.web-back svg { flex: 0 0 auto; }
.web-back { top: 6px; padding: 5px 13px 5px 9px; }
/* v879: the logo on the opening screen */
.boot { background: #fff; min-height: 100vh; }
.boot-logo { width: min(62vw, 240px); height: auto; border-radius: 28px; animation: boot-breathe 2.4s ease-in-out infinite; }
@keyframes boot-breathe { 0%,100% { opacity: .92; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
.boot-mark { width: 26px; height: 26px; }
.boot { background: #FEFEFE; } .boot-logo { border-radius: 0; }
/* v881: web Back pill matches Telegram's own (measured from a screenshot): #BABBBD, white, 77x33 */
.web-back, html[data-look] .web-back { position: fixed !important; top: 9px !important; inset-inline-start: 9px !important; height: 33px !important; margin: 0 !important;
  padding: 0 13px 0 7px !important; gap: 11px !important; border: 0 !important; border-radius: 999px !important; background: #BABBBD !important; color: #fff !important;
  font-size: 16.5px !important; font-weight: 500 !important; line-height: 33px !important; box-shadow: none !important; display: inline-flex; align-items: center; }
.web-back.hidden { display: none !important; }
.web-back svg { width: 16px; height: 16px; flex: 0 0 16px; }
.web-back, html[data-look] .web-back { font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif !important; font-size: 16px !important; letter-spacing: 0 !important; padding-right: 12px !important; }

.wl-google-box{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:6px}
.wl-google-box #wl-google-btn{min-height:44px;display:flex;justify-content:center}
.wl-or{color:var(--muted,#8a8f98);font-size:14px;line-height:1}

.wl-invite-box{text-align:center;margin-bottom:10px}
.wl-invite-title{font-size:20px;margin:0 0 6px}
.wl-invite-sub{margin:0;color:var(--muted,#6b7280);font-size:14px;line-height:1.7}

/* ===== v891: automatic screen-edge handling (no user setting) ===== */
:root{--vw:100vw;--edge-l:max(env(safe-area-inset-left,0px),0px);--edge-r:max(env(safe-area-inset-right,0px),0px);--edge-b:max(env(safe-area-inset-bottom,0px),var(--sab-min,0px))}
html{width:100%;max-width:100%}
body{width:100%;max-width:100%;box-sizing:border-box}
html.vw-fit,html.vw-fit body,html.vw-fit .app{max-width:var(--vw)}
img,video,canvas,svg,table,pre,iframe{max-width:100%}
.tabbar{
  left:calc(10px + var(--edge-l))!important;right:calc(10px + var(--edge-r))!important;
  bottom:calc(var(--edge-b) * .3 + 8px)!important;   /* hugs the bottom; clears the home indicator */
  padding:0!important;box-sizing:border-box;
}
html.vw-fit .tabbar{right:auto!important;width:calc(var(--vw) - 20px - var(--edge-l) - var(--edge-r))}
body{padding-bottom:calc(var(--tabbar) + var(--edge-b) + 24px)!important}
.app{padding-left:var(--edge-l);padding-right:var(--edge-r);box-sizing:border-box}
@supports (-webkit-touch-callout:none){
  input,select,textarea{font-size:max(16px,1em)!important}  /* stops iOS focus-zoom, a common cause of sideways drift */
}

/* v895: the tab bar's drop shadow reached the very bottom of the window and was cut off there,
   which read as a hard line above the system navigation bar. Cast it upward only. */
.tabbar{box-shadow:0 -6px 18px rgba(20,49,44,.10)!important}

/* v904: banner slides away / returns with scrolling on non-home pages (see headroomInit) */
.clinic-header{will-change:transform}
body::before{z-index:101!important}   /* the system strip stays above the banner while it slides under it */

/* v908: web Back pill is glass like Telegram's own Back/Close pill */
html[data-look][data-look] .web-back, .web-back{
  background:rgba(104,112,122,.40) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5) !important; backdrop-filter:blur(16px) saturate(1.5) !important;
  border:0 !important;
  box-shadow:none !important;
  color:#fff !important; text-shadow:none;
}
.web-back:active{background:rgba(84,92,102,.52) !important}

/* v921: tiles with a new-item dot get a blue-to-green glow around the icon */
html[data-look][data-look] #staff .tile.tile-new .tile-ico{animation:tileGlow 1.8s ease-in-out infinite !important}
@keyframes tileGlow{0%,100%{filter:drop-shadow(-2px -1px 4px rgba(30,100,220,.62)) drop-shadow(2px 1px 4px rgba(110,230,80,.62)) drop-shadow(0 0 7px rgba(20,184,166,.40))}50%{filter:drop-shadow(0 0 0 rgba(30,100,220,0)) drop-shadow(0 0 0 rgba(110,230,80,0)) drop-shadow(0 0 0 rgba(20,184,166,0))}}
/* v1321: dark keeps the previous (stronger) glow untouched */
@keyframes tileGlowDark{0%,100%{filter:drop-shadow(-3px -2px 5px rgba(30,100,220,.7)) drop-shadow(3px 2px 5px rgba(110,230,80,.7)) drop-shadow(0 0 10px rgba(20,184,166,.45))}50%{filter:drop-shadow(0 0 0 rgba(30,100,220,0)) drop-shadow(0 0 0 rgba(110,230,80,0)) drop-shadow(0 0 0 rgba(20,184,166,0))}}
@media (prefers-reduced-motion:reduce){html[data-look][data-look] #staff .tile.tile-new .tile-ico{animation:none !important;filter:drop-shadow(-3px -2px 5px rgba(30,100,220,.6)) drop-shadow(3px 2px 5px rgba(110,230,80,.6)) !important}}
/* v923: no red dot on home tiles (the red glow marks them) */
html[data-look][data-look] #staff .tile > .dot{display:none !important}

/* v926: the row dot fades out when its entry is opened */
.row-dot{transition:opacity .4s ease,transform .4s ease}
.row-dot.row-dot-out{opacity:0;transform:scale(.4)}

/* v930: staff web sign-in — brand look (logo, soft blue→green light, glass card, icon fields) */
html[data-look][data-look] .web-login-gate,.web-login-gate{background:#EEF4F3 !important;box-shadow:none !important;overflow:hidden;flex-direction:column}
.wl-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wl-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.wl-orb.o1{width:320px;height:320px;left:-90px;top:-80px;background:#6FB6F2}
.wl-orb.o2{width:300px;height:300px;right:-100px;bottom:-60px;background:#86E3A0}
.wl-orb.o3{width:220px;height:220px;right:10%;top:18%;background:#7FD9D0;opacity:.35}
.wl-card{position:relative;max-width:380px;padding:30px 24px 22px;background:rgba(255,255,255,.62) !important;border:1px solid rgba(255,255,255,.85) !important;border-radius:28px !important;box-shadow:0 18px 50px rgba(20,70,90,.16),0 2px 0 rgba(255,255,255,.8) inset !important;-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.wl-logo{display:block;width:150px;max-width:55%;height:auto;margin:0 auto 14px}
.wl-title{margin:0 0 4px !important;font-size:22px !important}
.wl-sub{margin:0 0 20px;color:#5d6b73;font-size:13.5px}
.wl-card .web-login-form{gap:12px}
.wl-field{position:relative;display:flex;align-items:center}
.wl-ico{position:absolute;left:13px;right:auto;display:flex;color:#6c8a96;pointer-events:none}
.wl-ico svg{width:20px;height:20px}
html[data-look][data-look] .wl-card .web-login-form input{padding:14px 14px 14px 46px;border-radius:16px;border:1px solid rgba(40,90,110,.16);background:rgba(255,255,255,.9) !important;font-size:16px;box-shadow:0 1px 2px rgba(20,60,80,.06) inset}
html[data-look][data-look] .wl-card .web-login-form input:focus{border-color:#2f8fcf;box-shadow:0 0 0 3px rgba(47,143,207,.18)}
.wl-card .pw-toggle-btn{position:absolute;right:8px;left:auto;top:50%;transform:translateY(-50%)}
html[data-look][data-look] .wl-card .web-login-form input#wl-staff-password{padding:14px 44px 14px 46px}
.wl-submit{margin-top:4px;padding:14px !important;border-radius:16px !important;font-size:16px;font-weight:700;color:#fff !important;border:0 !important;background:linear-gradient(100deg,#1f5fae,#14a3a0 55%,#5fcf6e) !important;box-shadow:0 8px 20px rgba(20,130,150,.28) !important}
.wl-submit:active{transform:translateY(1px);filter:brightness(.96)}
.wl-card .web-login-choice{margin-top:14px}
.wl-google-box{flex-direction:column-reverse !important}
.wl-foot{margin:18px 0 0;color:#7d8c93;font-size:12px;letter-spacing:.3px}
html[data-look][data-look] .wl-card .wl-submit{background:linear-gradient(100deg,#1f5fae,#14a3a0 55%,#5fcf6e) !important;color:#fff !important;border:0 !important;box-shadow:0 8px 20px rgba(20,130,150,.28) !important}
html[data-look][data-look] .wl-card .pw-toggle-btn{width:34px !important;height:34px !important;min-width:0 !important;padding:0 !important;font-size:15px !important;background:transparent !important;box-shadow:none !important;border:0 !important;border-radius:50% !important;opacity:.7}
html[data-look][data-look] .wl-card .web-login-form input{direction:ltr !important;text-align:left !important;unicode-bidi:normal !important}

/* v931: patient sign-in — same brand look as the staff sign-in */
#p-login.p-view{position:relative;overflow:hidden;background:#EEF4F3 !important}
#p-login .wl-bg{position:fixed}
#p-login .pl-wrap{position:relative;text-align:center}
#p-login .pl-logo-img{width:150px;margin:0 auto 10px}
#p-login .pl-lang{justify-content:center}
#p-login .pl-hero{text-align:center}
#p-login .pl-title{font-size:24px;margin-bottom:8px}
#p-login .pl-sub{margin:0 auto;font-size:14px;max-width:24em}
#p-login .pl-card{text-align:start;background:rgba(255,255,255,.62) !important;border:1px solid rgba(255,255,255,.85) !important;box-shadow:0 18px 50px rgba(20,70,90,.16),0 2px 0 rgba(255,255,255,.8) inset !important}
#p-login .pl-input{border-radius:16px}
html[data-look][data-look] #p-login .pl-btn{background:linear-gradient(100deg,#1f5fae,#14a3a0 55%,#5fcf6e) !important;color:#fff !important;border:0 !important;border-radius:16px !important;box-shadow:0 8px 20px rgba(20,130,150,.28) !important}
#p-login .pl-note{justify-content:center}
#p-login .pl-points{justify-content:center}

/* v933: patient portal page — tidy top: clear of Telegram's Close/menu buttons, name in its own box, language switch */
#p-portal.p-view{padding-top:max(var(--p-top-min,26px), calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px) + 18px)) !important;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
#p-portal .p-lang{display:flex;margin:0 0 14px}
#p-portal .p-hero-box{margin:0 0 16px;padding:18px 18px 16px;border-radius:24px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 32px rgba(20,60,70,.10);text-align:center}
#p-portal .p-hero-box .p-title{font-size:22px}
#p-portal .p-hero-box .p-sub{margin:6px auto 0}
html[data-look][data-look] #p-portal .p-hero-box{background:rgba(255,255,255,.78) !important}
#p-portal .pl-lang{display:flex;gap:4px;padding:4px;margin:0 0 14px;border-radius:15px;background:rgba(14,124,107,.08);border:1px solid rgba(14,124,107,.10)}
#p-portal .pl-lang button{flex:1 1 0;min-width:0;height:38px;border:0;border-radius:11px;cursor:pointer;background:transparent;color:#3E6A61;font:inherit;font-size:14px;font-weight:600}
#p-portal .pl-lang button.is-on{background:#fff;color:var(--accent);font-weight:800;box-shadow:0 2px 8px rgba(20,49,44,.12)}

/* v935: patient portal — the report's content on screen */
#p-record .pr-sub{margin:18px 0 8px;font-size:15px;font-weight:700}
#p-record .pr-tiles{grid-template-columns:repeat(2,1fr);margin-bottom:4px}
#p-record .pr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid rgba(40,90,110,.14);margin:6px 0}
#p-record .pr-table{width:100%;border-collapse:collapse;font-size:13px;text-align:center}
#p-record .pr-table th{background:rgba(20,150,150,.1);font-weight:700;padding:8px 6px;white-space:nowrap}
#p-record .pr-table td{padding:8px 6px;border-top:1px solid rgba(40,90,110,.1)}
#p-record .pr-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#p-record .pr-photo{margin:0;text-align:center}
#p-record .pr-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:rgba(0,0,0,.06);display:block}
#p-record .pr-photo figcaption{font-size:11px;opacity:.7;margin-top:3px}

/* v936: language switcher keeps its place — fixed left-to-right order whatever the page direction */
.pl-lang,#p-login .pl-lang,#p-portal .pl-lang{direction:ltr !important}
.pl-lang button{direction:ltr;unicode-bidi:plaintext}

/* v937: patient portal — neutral white / grey (like the plain staff menu), boxes with depth, live banner, photo viewer */
#p-portal .pl-lang{background:#e9ebee;border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
#p-portal .pl-lang button{color:#5b6068}
#p-portal .pl-lang button.is-on{background:#fff;color:#2b2f36;box-shadow:0 2px 6px rgba(0,0,0,.16),0 1px 1px rgba(0,0,0,.08)}
#p-portal .p-hero-box,#p-portal .block .row,#p-portal .p-storage-tile,#p-portal .pr-tablewrap,#p-portal .p-contact,#p-portal .p-fee-card,#p-portal .empty{background:#fff !important;border:1px solid rgba(0,0,0,.05) !important;box-shadow:0 10px 24px rgba(30,35,45,.13),0 2px 5px rgba(30,35,45,.08) !important}
#p-portal .p-hero-box{border-radius:24px}
#p-record .pr-table th{background:#eceef1;color:#3a3f47}
#p-record .pr-table td{border-top:1px solid rgba(0,0,0,.07)}
#p-record .pr-photo img{box-shadow:0 6px 16px rgba(30,35,45,.2);cursor:zoom-in;background:#e4e6ea}
#p-portal .p-storage-tile{border-radius:20px}
#p-portal .btn-primary{background:#3b414b !important;color:#fff !important;border:0 !important;box-shadow:0 6px 16px rgba(30,35,45,.28) !important}
#p-portal .btn-quiet{background:#fff !important;color:#3b414b !important;box-shadow:0 4px 12px rgba(30,35,45,.12) !important}
#p-portal .p-title,#p-portal .block-title{color:#2b2f36}
.p-live{position:fixed;left:12px;right:12px;top:max(10px,calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px) + 54px));z-index:9990;padding:12px 16px;border-radius:16px;background:#2f343c;color:#fff;font-size:14px;font-weight:600;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.35);animation:plIn .25s ease-out}
@keyframes plIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.p-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(15,17,21,.94);display:flex;align-items:center;justify-content:center;flex-direction:column}
.p-lightbox.hidden{display:none}
.plb-stage{position:absolute;inset:56px 0 54px;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center}
.plb-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .15s;cursor:zoom-in;touch-action:pan-x pan-y pinch-zoom}
.plb-stage img.is-zoom{max-width:none;max-height:none;width:240%;cursor:zoom-out}
.plb-close{position:absolute;top:max(10px,calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px) + 8px));right:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:20px;z-index:2}
.plb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:34px;z-index:2;border-radius:12px}
.plb-prev{left:6px}.plb-next{right:6px}
.plb-cap{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:0;right:0;margin:0;text-align:center;color:#e6e8ec;font-size:14px}
body.plb-open{overflow:hidden}
.p-lightbox{direction:ltr;background:rgba(12,14,18,.98)}

/* v939: patient <-> embryologist chat (portal + staff) */
.cb-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:8px 2px;-webkit-overflow-scrolling:touch}
.cb{max-width:84%;padding:9px 12px 6px;border-radius:18px;line-height:1.7;font-size:14.5px;box-shadow:0 4px 12px rgba(30,35,45,.12);word-break:break-word}
.cb-me{align-self:flex-end;background:#3b414b;color:#fff;border-bottom-right-radius:6px}
.cb-them{align-self:flex-start;background:#fff;color:#2b2f36;border:1px solid rgba(0,0,0,.05);border-bottom-left-radius:6px}
.cb-who{font-size:11.5px;font-weight:700;opacity:.65;margin-bottom:1px}
.cb-text{white-space:pre-wrap;text-align:start}
.cb-time{font-size:10.5px;opacity:.55;margin-top:2px;text-align:end}
.cb-empty{text-align:center}
.cb-compose{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.cb-compose textarea{flex:1;min-height:48px;max-height:120px;resize:vertical;padding:11px 14px;border-radius:16px;border:1px solid rgba(0,0,0,.1);background:#fff;font:inherit;font-size:15px;box-shadow:0 3px 10px rgba(30,35,45,.08) inset}
.cb-send{width:50px;min-width:50px;height:48px;padding:0 !important;border-radius:16px !important;font-size:20px}
.cb-unread{min-width:22px;height:22px;border-radius:11px;background:#e5484d;color:#fff !important;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
#p-chat{scroll-margin-top:70px}
.cb-me{align-self:auto !important;margin-left:auto;margin-right:0}
.cb-them{align-self:auto !important;margin-right:auto;margin-left:0}

/* v941: patient chat in its own box with an internally scrolling message area; patient summary in the staff chat */
#p-chat .chat-box,#pchat-conv .pchat-file{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:22px;box-shadow:0 10px 24px rgba(30,35,45,.13),0 2px 5px rgba(30,35,45,.08);padding:12px}
#p-chat .chat-box .note{margin:2px 4px 10px;font-size:12.5px}
.chat-box .cb-list{height:340px;max-height:none;background:#f1f2f4;border-radius:16px;padding:10px;box-shadow:inset 0 2px 6px rgba(30,35,45,.08);overscroll-behavior:contain}
#pchat-msgs.cb-list{height:46vh;min-height:260px;max-height:none;background:#f1f2f4;border-radius:16px;padding:10px;margin-top:10px;box-shadow:inset 0 2px 6px rgba(30,35,45,.08);overscroll-behavior:contain}
.chat-box .cb-compose{margin-top:10px}
.pchat-file{margin-bottom:0}
.pchat-file>summary{cursor:pointer;font-weight:700;font-size:14.5px;padding:4px 2px;list-style:none}
.pchat-file>summary::-webkit-details-marker{display:none}
.pchat-file-body{margin:8px 0 10px;display:flex;flex-direction:column;gap:6px}
.pcf-line{display:flex;gap:8px;font-size:13px;line-height:1.7}
.pcf-k{flex:0 0 auto;min-width:5.5em;font-weight:700;color:#4b515b}
.pcf-v{flex:1;color:#2b2f36}
.pcf-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 4px}
.pcf-chip{background:#f1f2f4;border-radius:12px;padding:7px 4px;text-align:center;box-shadow:0 2px 6px rgba(30,35,45,.1)}
.pcf-chip b{display:block;font-size:17px}
.pcf-chip span{font-size:10.5px;opacity:.7}

/* v942: four chat channels (tabs) */
.cb-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;direction:rtl;-webkit-overflow-scrolling:touch}
.cb-tabs.hidden{display:none}
.cb-tab{position:relative;flex:1 0 auto;min-width:0;white-space:nowrap;padding:9px 12px;border:0;border-radius:13px;background:#e9ebee;color:#4b515b;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 5px rgba(30,35,45,.1)}
.cb-tab.is-on{background:#3b414b;color:#fff;box-shadow:0 5px 12px rgba(30,35,45,.3)}
.cb-dot{position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px #fff}

/* v943: AI reply suggestion */
.cb-ai{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.cb-ai .btn{padding:9px 14px}
.cb-ai .note{margin:0;font-size:12px}

/* v944: when a chat list reaches its end (or has nothing to scroll) the whole page scrolls on */
.cb-list,.chat-box .cb-list,#pchat-msgs.cb-list{overscroll-behavior:auto !important}

/* v948: in the green (Light) look the glow under a tile with something new is red */
@keyframes tileGlowRed{0%,100%{filter:drop-shadow(0 0 5px rgba(230,40,40,.75)) drop-shadow(0 0 11px rgba(230,40,40,.45))}50%{filter:drop-shadow(0 0 0 rgba(230,40,40,0)) drop-shadow(0 0 0 rgba(230,40,40,0))}}
html[data-look="light"][data-look="light"] #staff .tile.tile-new .tile-ico{animation:tileGlowRed 1.8s ease-in-out infinite !important}
@media (prefers-reduced-motion:reduce){html[data-look="light"][data-look="light"] #staff .tile.tile-new .tile-ico{animation:none !important;filter:drop-shadow(0 0 6px rgba(230,40,40,.65)) !important}}

.consent-upload{margin-top:10px}
.consent-upload-btn{display:block;text-align:center;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.7);box-shadow:0 3px 10px rgba(30,40,50,.14);font-weight:600;cursor:pointer}

/* v949: staff sign-in — no frame around the form; logo, then the language bar, like the patient sign-in */
html[data-look][data-look] #web-login-gate .wl-card,#web-login-gate .wl-card{background:transparent !important;border:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
#web-login-gate .wl-lang{display:flex;gap:4px;padding:4px;margin:0 0 20px;border-radius:15px;direction:ltr !important;background:rgba(14,124,107,.08);border:1px solid rgba(14,124,107,.10)}
#web-login-gate .wl-lang button{flex:1 1 0;min-width:0;height:38px;border:0;border-radius:11px;cursor:pointer;background:transparent;color:#3E6A61;font:inherit;font-size:14px;font-weight:600;transition:background .18s,color .18s,box-shadow .18s}
#web-login-gate .wl-lang button.is-on{background:#fff;color:var(--accent);font-weight:800;box-shadow:0 2px 8px rgba(20,49,44,.12)}
html[data-look="plain"] #web-login-gate .wl-lang{background:#e9ebee;border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}

/* v950: web app banner content lift (set by alignHeaderWeb) */
html:not(.desktop-web) .clinic-header .hero-main{transform:translateY(calc(-1 * var(--hero-lift, 0px)))}

/* v956 — profile name (editable), tap-to-enlarge photo, blinking mailbox envelope */
.mp-avatar-btn{display:block;width:112px;height:112px;padding:0;border:0;border-radius:50%;background:transparent;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.mp-name-row{display:flex;align-items:center;justify-content:center;gap:6px}
.mp-name-edit{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.7;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mp-name-edit svg{width:16px;height:16px}
.mp-name-form{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px;align-items:stretch}
.mp-name-form.hidden{display:none}
.mp-name-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.85);font:inherit;color:inherit;text-align:center}
.mp-name-btns{display:flex;gap:8px;justify-content:center}
.mp-lightbox{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.84);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.mp-lightbox.hidden{display:none}
.mp-lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:18px;object-fit:contain;box-shadow:0 12px 40px rgba(0,0,0,.45)}

/* v959: the envelope glows with the same colour as the tile icons of the current look */
html[data-look][data-look] .clinic-header .header-mailbox.has-new svg{animation:tileGlow 1.8s ease-in-out infinite}
html[data-look="light"][data-look="light"] .clinic-header .header-mailbox.has-new svg{animation:tileGlowRed 1.8s ease-in-out infinite}
.clinic-header .header-mailbox.has-new .header-mailbox-dot{animation:mailboxDotBlink 1.8s ease-in-out infinite}
@keyframes mailboxDotBlink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.clinic-header .header-mailbox.has-new svg,.clinic-header .header-mailbox.has-new .header-mailbox-dot{animation:none}html[data-look][data-look] .clinic-header .header-mailbox.has-new svg{filter:drop-shadow(0 0 6px rgba(230,40,40,.65))}}

/* v957: iPhone Safari moves its bottom toolbar in and out; the tab bar follows the VISIBLE bottom
   (set from visualViewport in app.js), not the layout bottom, so it stops floating too high. */

/* v958: on iPhone, a fixed bar floats too high when the page is shorter than the screen (WebKit
   measures the fixed bar against the document height). Keep the app at least one full screen tall,
   so the bar always sits on the real bottom edge. */
html{min-height:100%;min-height:100dvh}
body{min-height:100%;min-height:100dvh}
#staff.app,#staff-desktop.app,#coordinator.app,#patient.app{min-height:100vh;min-height:100dvh}

/* v960/v961 — canister list: each canister is its own row (.tank-cn). Rows shrink and fade as they
   reach the top or bottom of the screen (scroll-driven, transform/opacity only). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #view-tank .tank-canister-scroll-layer > .acc > .tank-cn {
      animation: canisterStackDepth linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes canisterStackDepth {
  0%   { transform: scale(.92); opacity: .4; }
  28%  { transform: scale(1);   opacity: 1; }
  72%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.92); opacity: .4; }
}

/* v961 — Stack mode on the canister list. Collapsed: the canisters overlap like a notification pile,
   the first one in front. One tap on the pile opens it. Only transform/opacity/margin are animated. */
#view-tank .tank-canister-scroll-layer.is-pile > .acc { position: relative; }
#view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn { position: relative; transition: margin-top .35s cubic-bezier(.22,.61,.36,1); }
#view-tank .tank-canister-scroll-layer.is-pile:not(.pile-open) > .acc > .tank-cn + .tank-cn { margin-top: -40px; }
#view-tank .tank-canister-scroll-layer.is-pile:not(.pile-open) .acc-body { display: none; }
#view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn:nth-child(1) { z-index: 30; }
#view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn:nth-child(2) { z-index: 29; }
#view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn:nth-child(3) { z-index: 28; }
#view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn:nth-child(4) { z-index: 27; }
#view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn:nth-child(n+5) { z-index: 26; }
#view-tank .tank-canister-scroll-layer.is-pile:not(.pile-open) > .acc > .tank-cn:nth-child(n+5) { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #view-tank .tank-canister-scroll-layer.is-pile > .acc > .tank-cn { transition: none; } }
/* v961: while the pile is closed, the depth animation is switched off so it cannot override the pile */
#view-tank .tank-canister-scroll-layer.is-pile:not(.pile-open) > .acc > .tank-cn { animation: none; opacity: 1; }
#view-tank .tank-canister-scroll-layer.is-pile:not(.pile-open) > .acc > .tank-cn:nth-child(n+5) { opacity: 0; }

/* v968 — canister pile: JS (setupTankScrollLayer) sets each card's position and size on scroll,
   so the scroll-driven depth animation is switched off here. The card's top edge stays the anchor. */
#view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn {
  position: relative;
  transform-origin: 50% 0;
  animation: none;
  will-change: transform;
}

/* v984 — each canister in the pile casts a shadow, so the stacked edges read as separate cards */
/* v1000 — cane headers in the pile get the same shadow control as the canisters (none once stacked) */
#view-tank .tank-canister-scroll-layer.is-stack .tank-cane > .acc-head {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 6px 10px -4px rgba(20, 35, 45, var(--stack-alpha, 0.35)) !important;
}

/* v993 — canes can be piled below their canister's body, so the body must not clip them */
#view-tank .tank-canister-scroll-layer.is-stack .acc-body { overflow: visible; }

/* v986 — the pile's only outer shadow is this one, and it fades to nothing once the pile is closed */
#view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn > .acc-head.depth-1 {
  z-index: 100;   /* v1002 — the canister header stays above its own canes */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 6px 10px -4px rgba(20, 35, 45, var(--stack-alpha, 0.35)) !important;   /* !important: beats the custom-glass shadow */
}

/* v962: the canister list stays under the tank info card while it scrolls */
.tank-canister-scroll-layer { z-index: 1; isolation: isolate; }
.tank-detail-overview-overlay { z-index: 5; }

/* v964 — an open canister keeps its header in view under the info card while its canes scroll
   beneath it; when the last cane has gone by, the canister leaves the screen with the rest of the list. */
#view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1 {
  position: sticky;
  top: var(--tank-top, 0px);
  z-index: 3;
  background-color: #EEF1F3;
}

/* v965 — canes stick under the open canister's header, and their patient rows slide out from under the cane box */
#view-tank .acc-body { overflow: visible; }
#view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1 { min-height: 58px; box-sizing: border-box; }
#view-tank .tank-cane > .acc-head {
  position: sticky;
  top: calc(var(--tank-top, 0px) + var(--tank-cn-h, 58px));   /* v1376: was a fixed 58px -- since the canister cards got taller (v1371) the canes slid 8px under the header */
  z-index: 50;   /* v1011 — above the patient rows that pile up under it */
  background-color: #EEF1F3;
}

/* v1007 — the canister list is its own stacking context, so canisters sent BEHIND an open canister (negative z-index)
   still paint above the list's own box and can be tapped; otherwise that box swallowed the taps. */
#view-tank .tank-canister-scroll-layer > .acc { isolation: isolate; }

/* v1008 — an open canister that is still waiting in the pile shows no canes until it comes out */
#view-tank .tank-cn.in-pile > .acc-body, #view-tank .tank-cane.in-pile > .acc-body { opacity: var(--body-fade, 0) !important; pointer-events: none !important; }


/* ---------- v1021 — ICM logo before the clinic name, same size as the name ----------
   The logo sits in front of the clinic name; the pair is centred over the
   "IVF Clinic Management" line, which pushes the name slightly to the right. */
.clinic-header .hero-clinic-select { --hero-fs: clamp(18px, 5vw, 25px); gap: 7px; }
.clinic-header .hero-logo {
  display: block;
  height: calc(var(--hero-fs) * 1.4);
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  /* v1022: lift the logo so the base of the ICM letters sits on the clinic-name baseline */
  transform: translateY(calc(var(--hero-fs) * -.26));
}
@media (max-width: 430px) {
  .clinic-header .hero-clinic-select { --hero-fs: clamp(16px, 4.8vw, 22px); gap: 6px; }
}

/* v1024 — logo + clinic name + "IVF Clinic Management" shift to the right as one block */
.clinic-header .hero-clinic { transform: translateX(clamp(6px, 2.2vw, 10px)); }

/* v1025 — only logo + clinic name move right once more (the management line stays) */
.clinic-header .hero-clinic-select { transform: translateX(clamp(6px, 2.2vw, 10px)); }


/* ---------- v1026 — no "Tank T" title above the card; the name sits under the tank ---------- */
#view-tank > .view-head { display: none !important; }
#view-tank { padding-top: 8px; }
.tank-detail-visual-col { min-height: 0; }
.tank-detail-name {
  max-width: 100%;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}

/* ---------- v1028 — a light carousel while it moves ----------
   Blur behind the focused card, soft shadows and the tank animations are the expensive parts to
   repaint on every frame; they are switched off while the row is moving and come back at rest. */
.tanks.tc-moving .tank-slide .tank-visual-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.tanks.tc-moving .tank-slide.is-focused .tank-visual-card { background: rgba(250,252,252,.92) !important; }
.tanks.tc-moving .tank-slide * { animation-play-state: paused !important; }
.tank-slide { contain: layout style; }

/* v1030 — no position dots under the tank carousel */
#tanks-dots { display: none !important; }


/* ---------- v1033 — slow, soft opening of canes and patients in the tank page ---------- */
#view-tank .acc-body {
  transition: height .45s cubic-bezier(.3,.05,.2,1), opacity .3s ease;   /* v1058: was 1.1s; the long re-layout was what made it lag */
}
#view-tank .tank-canister-scroll-layer.is-stack .acc-body.acc-moving {
  clip-path: inset(0 -40px -40px -40px);
}

/* v1036 — the patient cards stay in their own layer (under the sticky cane header) and cast their shadow onto the card below */
#view-tank .tank-cane > .acc-body { isolation: isolate; }
#view-tank .tank-cane > .acc-body > .sample-row { box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important; }

/* v1037 — the canister and cane boxes get the same stepped shadow as the patient cards (soft and deep, falling onto the box below).
   --stack-alpha still takes it away once a box has gone into the pile (0.35 = full strength, 0 = none). */
#view-tank .tank-canister-scroll-layer.is-stack .tank-cane > .acc-head,
#view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn > .acc-head.depth-1 {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68),
              0 10px 24px rgba(30, 40, 50, calc(var(--stack-alpha, .35) * .8)),
              0 2px 6px rgba(30, 40, 50, calc(var(--stack-alpha, .35) * .54)) !important;
}


/* v1061 — straws shipped to another clinic: an orange, slanted stamp on the card, and an orange tag in the storage history */
.ext-stamp {
  flex: 0 0 auto; align-self: center;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px 8px; border: 2px solid #e8750a; border-radius: 7px;
  color: #e8750a; background: rgba(255,255,255,.22);
  font-family: Arial, sans-serif; line-height: 1.1; text-align: center;
  transform: rotate(-11deg);
  margin: 8px 6px 8px 0;
  box-shadow: inset 0 0 0 1px rgba(232,117,10,.18);
  opacity: .95;
}
.ext-stamp b { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; }
.ext-stamp i { font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: .2px; }
.pf-ext-card { border-color: rgba(232,117,10,.35); }
.ext-tag { display: inline-block; margin: 2px 0 4px; padding: 2px 8px; border-radius: 999px; background: rgba(232,117,10,.14); color: #b85a00; font-size: 12px; font-weight: 700; }

/* v1064 flippable locked cards */
.pf-flippable { cursor: pointer; transform-style: preserve-3d; backface-visibility: hidden; }
.pf-card-back { padding: 2px 0; }
.pf-card-back .row-title { margin-bottom: 4px; }
.pf-back-thaw .row-title { color: #c0392b; }
.pf-back-ext .row-title { color: #e8750a; }
.pf-ext-card.pf-flippable:active, .pf-frozen-locked.pf-flippable:active { filter: brightness(.97); }

.pf-card-back { display: flex; flex-direction: column; justify-content: center; height: 100%; overflow-y: auto; gap: 2px; }

/* v1067 search results: cards carry the straw-card shadow; the list scrolls inside its box (max 7 cards) */
#search-panel { overflow: hidden; }
#search-results {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 6px 22px; display: flex; flex-direction: column; gap: 10px;
  touch-action: pan-y;
}
#search-results .row, #search-results .empty {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important;
  position: relative;
}

/* v1068 straw stepper */
.fz-step-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.fz-step-chip { flex: 0 0 auto; white-space: nowrap; }
.fz-step-chip.fz-done:not(.is-on) { border-color: rgba(14,124,107,.55); }
.fz-next-straw { margin-top: 8px; }

/* v1069 the name search box is raised like the unfrozen straw cards (it was recessed) */
#view-search .searchbar { margin-bottom: 18px; }
#view-search .searchbar input[type="search"] {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18));
  transition: box-shadow .2s ease, transform .2s ease;
}
#view-search .searchbar input[type="search"]:focus {
  background: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 14px 30px rgba(30,40,50,.30), 0 3px 8px rgba(30,40,50,.20);
}

/* v1070 patient name cards: stepped like the tank's patient cards -- each one casts its soft, deep shadow onto the card below */
#search-results { gap: 12px !important; }
#search-results .row { box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important; background: rgba(255,255,255,.80) !important; }

/* v1071 the role under the name has no box around it; on the web version the BETA badge sits at the very top, clear of the content */
#role-chip, #role-chip.chip, button#role-chip {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding-inline-start: 0 !important;
}
html.desktop-web #beta-badge { top: 4px; padding: 2px 10px; font-size: 11px; }

/* v1073 recent patients: same stepped, shadowed, scrollable cards as the name search */
#view-recent .list-panel { overflow: hidden; }
#recent-list {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 6px 22px; display: flex; flex-direction: column; gap: 12px; touch-action: pan-y;
  max-height: min(62vh, 560px);
}
#recent-list .row, #recent-list .empty { flex: 0 0 auto; position: relative; }
#recent-list .row { box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important; background: rgba(255,255,255,.80) !important; }

/* v1074b name lists follow the tank's patient cards exactly: same translucent card (the shadow of the card above shows through it),
   same shadow, painted in natural order -- no white override, no z-index stepping */
#search-results, #recent-list { isolation: isolate; padding-left: 10px; padding-right: 10px; }
#search-results .row, #recent-list .row {
  background: rgba(255, 255, 255, .38) !important;
  z-index: auto !important;
  box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important;
}

/* v1076 name lists: no big backing panel; tighter cards; the cards slide under the title/search box and vanish mid-box */
#view-search .list-panel, #view-recent .list-panel, #search-panel {
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important;
}
#view-search .searchbar, #view-recent .view-head { position: relative; z-index: 5; margin-bottom: -22px !important; }
#view-search .searchbar input[type="search"] { background: rgba(250,252,252,.98) !important; }
#view-recent .view-title { background: rgba(250,252,252,.98) !important; }
#search-results, #recent-list { gap: 7px !important; padding-top: 34px !important; padding-bottom: 20px; }

/* v1077 every plain list screen follows the recent-patients pattern: no big backing box, title in its own box, stepped shadowed cards, list scrolls under the title */
#view-schedule .list-panel:not(.form-panel),
#view-my-week .list-panel:not(.form-panel),
#view-my-patients .list-panel:not(.form-panel),
#view-pchat .list-panel:not(.form-panel),
#view-inbox .list-panel:not(.form-panel),
#view-puncture .list-panel:not(.form-panel),
#view-icsi .list-panel:not(.form-panel),
#view-embryos .list-panel:not(.form-panel),
#view-unfinished .list-panel:not(.form-panel),
#view-et-list .list-panel:not(.form-panel),
#view-et-plan .list-panel:not(.form-panel),
#view-et-results .list-panel:not(.form-panel),
#view-pending-embryo-disposition .list-panel:not(.form-panel),
#view-freeze .list-panel:not(.form-panel),
#view-thaw .list-panel:not(.form-panel) {
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important;
}
#view-schedule .unified-panel > .view-head,
#view-schedule .list-panel:not(.form-panel) > .view-head,
#view-schedule > .view-head > .section-title-box,
#view-schedule > .view-head > .view-title,
#view-my-week .unified-panel > .view-head,
#view-my-week .list-panel:not(.form-panel) > .view-head,
#view-my-week > .view-head > .section-title-box,
#view-my-week > .view-head > .view-title,
#view-my-patients .unified-panel > .view-head,
#view-my-patients .list-panel:not(.form-panel) > .view-head,
#view-my-patients > .view-head > .section-title-box,
#view-my-patients > .view-head > .view-title,
#view-pchat .unified-panel > .view-head,
#view-pchat .list-panel:not(.form-panel) > .view-head,
#view-pchat > .view-head > .section-title-box,
#view-pchat > .view-head > .view-title,
#view-inbox .unified-panel > .view-head,
#view-inbox .list-panel:not(.form-panel) > .view-head,
#view-inbox > .view-head > .section-title-box,
#view-inbox > .view-head > .view-title,
#view-puncture .unified-panel > .view-head,
#view-puncture .list-panel:not(.form-panel) > .view-head,
#view-puncture > .view-head > .section-title-box,
#view-puncture > .view-head > .view-title,
#view-icsi .unified-panel > .view-head,
#view-icsi .list-panel:not(.form-panel) > .view-head,
#view-icsi > .view-head > .section-title-box,
#view-icsi > .view-head > .view-title,
#view-embryos .unified-panel > .view-head,
#view-embryos .list-panel:not(.form-panel) > .view-head,
#view-embryos > .view-head > .section-title-box,
#view-embryos > .view-head > .view-title,
#view-unfinished .unified-panel > .view-head,
#view-unfinished .list-panel:not(.form-panel) > .view-head,
#view-unfinished > .view-head > .section-title-box,
#view-unfinished > .view-head > .view-title,
#view-et-list .unified-panel > .view-head,
#view-et-list .list-panel:not(.form-panel) > .view-head,
#view-et-list > .view-head > .section-title-box,
#view-et-list > .view-head > .view-title,
#view-et-plan .unified-panel > .view-head,
#view-et-plan .list-panel:not(.form-panel) > .view-head,
#view-et-plan > .view-head > .section-title-box,
#view-et-plan > .view-head > .view-title,
#view-et-results .unified-panel > .view-head,
#view-et-results .list-panel:not(.form-panel) > .view-head,
#view-et-results > .view-head > .section-title-box,
#view-et-results > .view-head > .view-title,
#view-pending-embryo-disposition .unified-panel > .view-head,
#view-pending-embryo-disposition .list-panel:not(.form-panel) > .view-head,
#view-pending-embryo-disposition > .view-head > .section-title-box,
#view-pending-embryo-disposition > .view-head > .view-title,
#view-freeze .unified-panel > .view-head,
#view-freeze .list-panel:not(.form-panel) > .view-head,
#view-freeze > .view-head > .section-title-box,
#view-freeze > .view-head > .view-title,
#view-thaw .unified-panel > .view-head,
#view-thaw .list-panel:not(.form-panel) > .view-head,
#view-thaw > .view-head > .section-title-box,
#view-thaw > .view-head > .view-title,
#view-schedule > .view-title {
  position: relative; z-index: 5; box-sizing: border-box; width: 100%;
  background: rgba(250,252,252,.98) !important; border: 1px solid var(--glass-line, rgba(255,255,255,.7)) !important;
  border-radius: 18px; padding: 12px 16px; margin: 0 0 -22px !important;
  box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important;
}
#view-schedule .unified-panel > .view-head .view-title,
#view-schedule .list-panel:not(.form-panel) > .view-head .view-title,
#view-schedule > .view-head > .section-title-box .view-title,
#view-my-week .unified-panel > .view-head .view-title,
#view-my-week .list-panel:not(.form-panel) > .view-head .view-title,
#view-my-week > .view-head > .section-title-box .view-title,
#view-my-patients .unified-panel > .view-head .view-title,
#view-my-patients .list-panel:not(.form-panel) > .view-head .view-title,
#view-my-patients > .view-head > .section-title-box .view-title,
#view-pchat .unified-panel > .view-head .view-title,
#view-pchat .list-panel:not(.form-panel) > .view-head .view-title,
#view-pchat > .view-head > .section-title-box .view-title,
#view-inbox .unified-panel > .view-head .view-title,
#view-inbox .list-panel:not(.form-panel) > .view-head .view-title,
#view-inbox > .view-head > .section-title-box .view-title,
#view-puncture .unified-panel > .view-head .view-title,
#view-puncture .list-panel:not(.form-panel) > .view-head .view-title,
#view-puncture > .view-head > .section-title-box .view-title,
#view-icsi .unified-panel > .view-head .view-title,
#view-icsi .list-panel:not(.form-panel) > .view-head .view-title,
#view-icsi > .view-head > .section-title-box .view-title,
#view-embryos .unified-panel > .view-head .view-title,
#view-embryos .list-panel:not(.form-panel) > .view-head .view-title,
#view-embryos > .view-head > .section-title-box .view-title,
#view-unfinished .unified-panel > .view-head .view-title,
#view-unfinished .list-panel:not(.form-panel) > .view-head .view-title,
#view-unfinished > .view-head > .section-title-box .view-title,
#view-et-list .unified-panel > .view-head .view-title,
#view-et-list .list-panel:not(.form-panel) > .view-head .view-title,
#view-et-list > .view-head > .section-title-box .view-title,
#view-et-plan .unified-panel > .view-head .view-title,
#view-et-plan .list-panel:not(.form-panel) > .view-head .view-title,
#view-et-plan > .view-head > .section-title-box .view-title,
#view-et-results .unified-panel > .view-head .view-title,
#view-et-results .list-panel:not(.form-panel) > .view-head .view-title,
#view-et-results > .view-head > .section-title-box .view-title,
#view-pending-embryo-disposition .unified-panel > .view-head .view-title,
#view-pending-embryo-disposition .list-panel:not(.form-panel) > .view-head .view-title,
#view-pending-embryo-disposition > .view-head > .section-title-box .view-title,
#view-freeze .unified-panel > .view-head .view-title,
#view-freeze .list-panel:not(.form-panel) > .view-head .view-title,
#view-freeze > .view-head > .section-title-box .view-title,
#view-thaw .unified-panel > .view-head .view-title,
#view-thaw .list-panel:not(.form-panel) > .view-head .view-title,
#view-thaw > .view-head > .section-title-box .view-title {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#view-schedule > .view-head,
#view-my-week > .view-head,
#view-my-patients > .view-head,
#view-pchat > .view-head,
#view-inbox > .view-head,
#view-puncture > .view-head,
#view-icsi > .view-head,
#view-embryos > .view-head,
#view-unfinished > .view-head,
#view-et-list > .view-head,
#view-et-plan > .view-head,
#view-et-results > .view-head,
#view-pending-embryo-disposition > .view-head,
#view-freeze > .view-head,
#view-thaw > .view-head { position: relative; z-index: 5; margin-bottom: 0 !important; }
#view-freeze .view-head, #view-freeze .view-head > *,
#view-thaw .view-head, #view-thaw .view-head > * { margin-bottom: 12px !important; }
#schedule,
#my-week-list,
#my-patients-list,
#pchat-thread-list,
#inbox-list,
#puncture-list,
#icsi-list,
#emb-list,
#uf-list,
#et-list,
#et-plan-list,
#et-results-list,
#pending-disp-list {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 7px !important;
  padding: 34px 10px 20px; max-height: min(68vh, 640px); isolation: isolate;
}
#schedule > .row, #schedule > .sample-row,
#my-week-list > .row, #my-week-list > .sample-row,
#my-patients-list > .row, #my-patients-list > .sample-row,
#pchat-thread-list > .row, #pchat-thread-list > .sample-row,
#inbox-list > .row, #inbox-list > .sample-row,
#puncture-list > .row, #puncture-list > .sample-row,
#icsi-list > .row, #icsi-list > .sample-row,
#emb-list > .row, #emb-list > .sample-row,
#uf-list > .row, #uf-list > .sample-row,
#et-list > .row, #et-list > .sample-row,
#et-plan-list > .row, #et-plan-list > .sample-row,
#et-results-list > .row, #et-results-list > .sample-row,
#pending-disp-list > .row, #pending-disp-list > .sample-row,
#fz-due > .row, #fz-due > .sample-row,
#fz-oo > .row, #fz-oo > .sample-row,
#fz-results > .row, #fz-results > .sample-row,
#th-list > .row, #th-list > .sample-row {
  flex: 0 0 auto; position: relative; z-index: auto !important;
  background: rgba(255,255,255,.38) !important;
  box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important;
}
#fz-due,
#fz-oo,
#fz-results,
#th-list { display: flex; flex-direction: column; gap: 9px !important; padding: 6px 10px 12px; }
#view-et-results .searchbar { position: relative; z-index: 5; margin: 0 0 -22px !important; }
#view-et-results .unified-panel > .view-head { margin-bottom: 8px !important; }

/* v1077b scroll boxes are wider than their cards so the card shadows fade out inside the box instead of being cut off at its edge */
#schedule,
#my-week-list,
#my-patients-list,
#pchat-thread-list,
#inbox-list,
#puncture-list,
#icsi-list,
#emb-list,
#uf-list,
#et-list,
#et-plan-list,
#et-results-list,
#pending-disp-list,
#search-results,
#recent-list { padding-left: 24px !important; padding-right: 24px !important; padding-bottom: 36px !important; margin-left: -14px; margin-right: -14px; }
#view-et-results .searchbar { margin-top: 14px !important; }

/* v1078 freeze: patient results scroll under the search box and fade out inside it, like the other lists */
.fz-search-block .searchbar { position: relative; z-index: 5; margin-bottom: -22px !important; }
.fz-search-block .searchbar input[type="search"] { background: rgba(250,252,252,.98) !important; }
#fz-panel > .note { display: none; }
#fz-results {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 7px !important; isolation: isolate;
  padding: 34px 24px 36px !important; margin-left: -14px; margin-right: -14px; max-height: min(58vh, 520px);
}
/* ET results: the search box sits clearly below the title */
#view-et-results .searchbar { margin-top: 26px !important; }
#view-et-results .unified-panel > .view-head { margin-bottom: 0 !important; }
/* cards that are not plain rows get the same stepped shadow */
#pending-disp-list > .disposition-card, #et-list > *:not(.empty):not(.note), #uf-list > *:not(.empty):not(.note), #et-plan-list > *:not(.empty):not(.note), #et-results-list > *:not(.empty):not(.note) {
  background: rgba(255,255,255,.38) !important; flex: 0 0 auto;
  box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important;
}
#pending-disp-list { display: flex !important; flex-direction: column; }
/* Remaining embryos: theme teal for Refreeze, theme slate for Discard (no traffic-light green/red) */
.disposition-available { background: rgba(14,124,107,.12); color: var(--accent, #0E7C6B); }
.disposition-balance.is-ok { color: var(--accent, #0E7C6B); }
#view-embryo-disposition .disp-count-input:focus { border-color: var(--accent, #0E7C6B) !important; box-shadow: 0 0 0 3px rgba(14,124,107,.12); }
.disp-quick-btn, .disp-row-action { border-color: rgba(14,124,107,.22); }
.disp-quick-btn { color: #1c3a36; }
.disp-quick-btn.disp-refreeze-btn, .disp-row-action.ref { background: rgba(14,124,107,.12); border-color: rgba(14,124,107,.32); color: #0b6558; }
.disp-quick-btn.disp-discard-btn, .disp-row-action.discard { background: rgba(85,97,107,.10); border-color: rgba(85,97,107,.28); color: #4a5660; }
#view-embryo-disposition .disp-row-action.ref[aria-pressed="true"] { background: rgba(14,124,107,.22); border-color: rgba(14,124,107,.50); }
#view-embryo-disposition .disp-row-action.discard[aria-pressed="true"] { background: rgba(85,97,107,.22); border-color: rgba(85,97,107,.46); }
#view-embryo-disposition .disposition-save-panel { border-color: rgba(14,124,107,.16); }
.refreeze-stamp { border-color: var(--accent, #0E7C6B); color: var(--accent, #0E7C6B); }
.refreeze-history-line { color: var(--accent, #0E7C6B); }

/* v1079 pages with a scroll box do not scroll as a whole */
html.lock-page, html.lock-page body { overflow: hidden !important; height: 100dvh; overscroll-behavior: none; }
#search-results, #recent-list, #schedule, #my-week-list, #my-patients-list, #pchat-thread-list, #inbox-list, #puncture-list, #icsi-list, #emb-list, #uf-list, #et-list, #et-plan-list, #et-results-list, #pending-disp-list { max-height: none; }
/* Embryo transfer list: the row + cancel button wrapper has no box of its own */
#et-list > .et-row-wrap:not(.empty):not(.note) { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; display: flex; align-items: center; gap: 8px; }
#et-list > .et-row-wrap > .row { background: rgba(255,255,255,.38) !important; box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important; }
#et-list > .et-row-wrap > .et-cancel-x { box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important; }
/* Unfinished steps: section captions are plain text, not boxes */
#uf-list > .panel-note:not(.empty):not(.note) { background: none !important; box-shadow: none !important; border: 0 !important; padding: 8px 6px 0 !important; margin: 4px 0 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-size: 13px; font-weight: 700; color: var(--accent, #0E7C6B); }

/* v1082 thaw / freeze: the title box does not overlap the first control under it */
#view-thaw .unified-panel > .view-head, #view-freeze .unified-panel > .view-head { margin-bottom: 14px !important; }

/* v1083 Freeze / Thaw only: the title box no longer overlaps the control under it (beats the earlier, more specific overlap rule) */
#view-thaw .list-panel:not(.form-panel) > .view-head, #view-thaw .unified-panel > .view-head,
#view-freeze .list-panel:not(.form-panel) > .view-head, #view-freeze .unified-panel > .view-head { margin-bottom: 14px !important; }

/* v1084 Freeze: same logic as Recent patients -- title box and search box stay put, found patients slide under the search box */
.fz-search-block .searchbar { position: relative; z-index: 5; margin-bottom: -22px !important; }
.fz-search-block .searchbar input[type="search"] { background: rgba(250,252,252,.98) !important; }
#fz-panel > .note { display: none; }
#fz-results {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 7px !important; isolation: isolate;
  padding: 34px 24px 36px !important; margin-left: -14px; margin-right: -14px;
}
#fz-results > .row, #fz-results > .sample-row {
  flex: 0 0 auto; position: relative; background: rgba(255,255,255,.38) !important;
  box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important;
}
#fz-due, #fz-oo { overscroll-behavior: contain; touch-action: pan-y; }

/* v1086 counters that go up: pop + glow + floating +1 */
@keyframes numPop { 0% { transform: scale(1); } 28% { transform: scale(1.32); color: var(--accent, #0E7C6B); text-shadow: 0 0 10px rgba(14,124,107,.55); } 100% { transform: scale(1); } }
@keyframes numPopBtn { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14,124,107,.45); } 30% { transform: scale(1.05); box-shadow: 0 0 0 9px rgba(14,124,107,.16); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14,124,107,0); } }
@keyframes numFloat { 0% { opacity: 0; transform: translate(-50%, 0) scale(.8); } 18% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.num-pop { animation: numPop .6s cubic-bezier(.2,.9,.3,1.2); }
.num-pop:not(button):not(input) { display: inline-block; }
button.num-pop { animation: numPopBtn .6s ease-out; text-align: center; }
.num-plus { position: fixed; z-index: 99999; pointer-events: none; font-weight: 900; font-size: 18px; color: var(--accent, #0E7C6B);
  text-shadow: 0 1px 6px rgba(255,255,255,.9); animation: numFloat .9s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .num-pop, .num-plus { animation: none !important; } }

/* v1090 ET planning: slim drawer that slides out from under the patient's name */
#et-plan-list > .row.et-open { position: relative; z-index: 2; }
#et-plan-list > #et-plan-form {
  position: relative; z-index: 1; margin: -16px 14px 4px !important; padding: 26px 14px 14px !important; clip-path: inset(16px 0 0 0 round 0 0 22px 22px);
  border-radius: 0 0 22px 22px !important; background: rgba(255,255,255,.62) !important;
  box-shadow: 0 8px 16px rgba(30,40,50,.16), 0 1px 3px rgba(30,40,50,.12) !important;
  border: 0 !important; transform-origin: top center; overflow: hidden; font-size: 13px;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#et-plan-list > #et-plan-form.hidden { display: none !important; }
#et-plan-form.et-drawer-in { animation: etDrawerIn .28s cubic-bezier(.2,.8,.25,1) both; }
@keyframes etDrawerIn { from { opacity: 0; transform: translateY(-14px) scaleY(.82); max-height: 0; } to { opacity: 1; transform: none; max-height: 900px; } }
#et-plan-list > #et-plan-form .panel-note { font-size: 12.5px; margin: 0 0 6px; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; color: #55606b; }
#et-plan-list > #et-plan-form #et-plan-patient { display: none; }
#et-plan-list > #et-plan-form .field { margin: 8px 0 0; }
#et-plan-list > #et-plan-form .label { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: #4a5660; }
#et-plan-list > #et-plan-form .dd-opt { font-size: 12.5px !important; padding: 7px 8px !important; min-height: 0 !important; line-height: 1.25; }
#et-plan-list > #et-plan-form textarea { font-size: 13px; min-height: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(74,85,96,.22); background: rgba(255,255,255,.7); }
#et-plan-list > #et-plan-form input[type=text] { font-size: 13px; padding: 8px 10px; border-radius: 12px; }
#et-plan-list > #et-plan-form .btn { min-height: 40px; font-size: 14px; border-radius: 14px; padding: 8px 14px; margin-top: 10px; box-shadow: 0 3px 8px rgba(74,85,96,.22) !important; }

/* v1091 drawer: single-line chips, patient-file button */
#et-plan-list > #et-plan-form .dd-opt { font-size: 10.5px !important; padding: 7px 4px !important; min-height: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; letter-spacing: -.1px; text-align: center; }
#et-plan-list > #et-plan-form .et-open-file { min-height: 34px; font-size: 12.5px; margin: 4px 0 2px; box-shadow: none !important; background: rgba(74,85,96,.08) !important; color: #3d4852; }

/* v1092 smaller option text; white raised patient-file button */
#et-plan-list > #et-plan-form .dd-opt, #et-plan-list > #et-plan-form .dd-opt * { font-size: 9.5px !important; letter-spacing: -.2px; white-space: nowrap !important; line-height: 1.2 !important; }
#et-plan-list > #et-plan-form .dd-opt { padding: 8px 2px !important; }
#et-plan-list > #et-plan-form .et-open-file { background: #fff !important; color: #2f3a44 !important; border: 0 !important; font-weight: 600;
  box-shadow: 0 8px 16px rgba(30,40,50,.24), 0 2px 4px rgba(30,40,50,.16), inset 0 1px 0 #fff !important; }

/* v1094 ET drawer day chips: .dd-chip, one line, small text */
#et-plan-list > #et-plan-form .dd-chips { display: flex !important; gap: 5px; flex-wrap: nowrap; }
#et-plan-list > #et-plan-form .dd-chip { flex: 1 1 0; min-width: 0; font-size: 10px !important; font-weight: 600; padding: 9px 2px !important; min-height: 0 !important;
  white-space: nowrap !important; line-height: 1.2 !important; letter-spacing: -.2px; overflow: hidden; text-overflow: clip; text-align: center; }

/* v1095 bigger day chips (shorter labels) */
#et-plan-list > #et-plan-form .dd-chip { font-size: 15px !important; font-weight: 700; padding: 10px 4px !important; letter-spacing: 0; }

/* v1098 clinic calendar: real month grid, red dot on days with a plan, floating blurred popup */
#cc-list { display: block; padding: 4px 2px 12px; }
.cc-bar { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.cc-month { font-size: 17px; font-weight: 700; color: #1f2a33; }
.cc-nav { width: 38px; height: 38px; border-radius: 13px; border: 0; background: rgba(255,255,255,.7); font-size: 22px; line-height: 1; color: #3d4852;
  box-shadow: 0 5px 12px rgba(30,40,50,.18), 0 1px 3px rgba(30,40,50,.12); }
.cc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px 8px 14px; border-radius: 22px; background: rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(30,40,50,.18), 0 2px 6px rgba(30,40,50,.12); }
.cc-wd { text-align: center; font-size: 12px; font-weight: 700; color: #55606b; padding: 4px 0 6px; }
.cc-wd.is-off { color: #c0392b; }
.cc-day { position: relative; aspect-ratio: 1 / 1; min-height: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 13px;
  background: rgba(255,255,255,.55); color: #1f2a33; font-size: 14px; font-weight: 600; padding: 0; box-shadow: 0 2px 5px rgba(30,40,50,.10); }
.cc-day.is-empty { background: none; box-shadow: none; }
.cc-day.is-off { color: #c0392b; }
.cc-day.is-today { outline: 2px solid var(--accent, #0E7C6B); outline-offset: -2px; }
.cc-day.has-ev { box-shadow: 0 5px 12px rgba(30,40,50,.22), 0 1px 3px rgba(30,40,50,.14); }
.cc-dot { position: absolute; top: 5px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e0312b; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.cc-note { text-align: center; font-size: 12.5px; color: #55606b; margin: 12px 6px 0; }
.cc-pop-wrap { position: fixed; inset: 0; z-index: 2147483000; touch-action: none; overscroll-behavior: contain; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(20,30,40,.06); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s ease; }
.cc-pop-wrap.is-in { opacity: 1; }
.cc-pop { width: min(380px, 100%); max-height: 70vh; display: flex; flex-direction: column; border-radius: 24px; background: rgba(255,255,255,.96); padding: 16px 14px 14px;
  box-shadow: 0 28px 60px rgba(10,20,30,.45), 0 6px 16px rgba(10,20,30,.28); transform: translateY(14px) scale(.96); transition: transform .26s cubic-bezier(.2,.8,.25,1); }
.cc-pop-wrap.is-in .cc-pop { transform: none; }
.cc-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cc-pop-title { font-size: 16px; font-weight: 700; color: #1f2a33; }
.cc-pop-x { width: 32px; height: 32px; border-radius: 11px; border: 0; background: rgba(74,85,96,.1); color: #3d4852; font-size: 14px; }
.cc-pop-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; }
.cc-pop-row { text-align: start; border: 0; border-radius: 16px; background: #fff; padding: 11px 14px; box-shadow: 0 6px 14px rgba(30,40,50,.18), 0 1px 3px rgba(30,40,50,.12); }
.cc-pop-name { font-size: 15px; font-weight: 700; color: #1f2a33; }
.cc-pop-sub { font-size: 12.5px; color: #55606b; margin-top: 3px; }

/* v1099 popup open: everything behind is blurred and locked */
html.cc-open, html.cc-open body { overflow: hidden !important; overscroll-behavior: none; touch-action: none; }
html.cc-open body > *:not(#cc-pop-wrap) { filter: blur(2.5px); transition: filter .22s ease; pointer-events: none; }
.cc-pop-list { touch-action: pan-y; overscroll-behavior: contain; }

/* v1101 calendar shortcut beside the date */
#view-home .today-datebox:not(.pinned-box-float) { position: relative; }
.cc-open-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 6; width: 38px; height: 34px; border: 0; border-radius: 12px; padding: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); color: #3d4852;
  box-shadow: 0 5px 12px rgba(30,40,50,.2), 0 1px 3px rgba(30,40,50,.14); }
.cc-open-btn.hidden { display: none; }
.cc-open-dot { position: absolute; top: 3px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e0312b; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.cc-open-dot.hidden { display: none; }


/* v1102 calendar: red line under days with a plan, red dot only for new items; shortcut glows red when something new */
.cc-day .cc-dot { display: none; }
.cc-day.is-new .cc-dot { display: block; }
.cc-day.has-ev > span { position: relative; padding-bottom: 2px; }
.cc-day.has-ev > span::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -3px; height: 2.5px; border-radius: 2px; background: #e0312b; }
@keyframes ccRedPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,40,40,.0), 0 0 10px 3px rgba(230,40,40,.65), 0 5px 12px rgba(30,40,50,.2); }
  50% { box-shadow: 0 0 0 0 rgba(230,40,40,.0), 0 0 0 0 rgba(230,40,40,0), 0 5px 12px rgba(30,40,50,.2); } }
.cc-open-btn.cc-glow { animation: ccRedPulse 1.5s ease-in-out infinite; color: #c62828; }
.cc-open-dot { display: none !important; }

/* v1103 calendar title box, today button, swipe */
#cc-list { padding: 8px 0 4px; touch-action: pan-y; }
.cc-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cc-today-btn { border: 0; border-radius: 999px; padding: 3px 14px; font-size: 12px; font-weight: 700; color: #fff; background: #4A5560;
  box-shadow: 0 3px 8px rgba(30,40,50,.25); }
.cc-today-btn.is-here { opacity: .35; box-shadow: none; }

/* v1104 glass popup + smooth swipe */
.cc-grid { will-change: transform, opacity; }
.cc-pop { background: rgba(255,255,255,.34) !important; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 28px 60px rgba(10,20,30,.38), 0 6px 16px rgba(10,20,30,.22), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.cc-pop-row { background: rgba(255,255,255,.42) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 6px 14px rgba(30,40,50,.16), inset 0 1px 0 rgba(255,255,255,.65) !important; }
.cc-pop-x { background: rgba(255,255,255,.5) !important; border: 1px solid rgba(255,255,255,.6); }
.cc-pop-title, .cc-pop-name { color: #14202a; }
.cc-pop-sub { color: #3d4852; }

/* v1105 popup: solid card, background not blurred (page stays locked) */
.cc-pop-wrap { background: rgba(20,30,40,.10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.cc-open body > *:not(#cc-pop-wrap) { filter: none !important; }
.cc-pop { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important;
  box-shadow: 0 24px 54px rgba(10,20,30,.34), 0 6px 16px rgba(10,20,30,.22) !important; }
.cc-pop-row { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important;
  box-shadow: 0 6px 14px rgba(30,40,50,.18), 0 1px 3px rgba(30,40,50,.12) !important; }
.cc-pop-x { background: rgba(74,85,96,.1) !important; border: 0; }

/* v1106 popup window is glass again; only the patient cards inside are solid white with a shadow; page behind stays sharp */
.cc-pop { background: rgba(255,255,255,.32) !important; -webkit-backdrop-filter: blur(16px) saturate(165%) !important; backdrop-filter: blur(16px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 24px 54px rgba(10,20,30,.30), 0 6px 16px rgba(10,20,30,.18), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.cc-pop-row { background: #fff !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 8px 16px rgba(30,40,50,.24), 0 2px 4px rgba(30,40,50,.16) !important; }
.cc-pop-x { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.65); }

/* v1107 page behind the popup is blurred again; the popup glass is more frosted; month swipe stays inside its box */
html.cc-open body > *:not(#cc-pop-wrap) { filter: blur(4px) !important; }
.cc-pop-wrap { background: rgba(20,30,40,.10) !important; }
.cc-pop { background: rgba(255,255,255,.62) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; }
.cc-pop-x { background: rgba(255,255,255,.7) !important; }
#cc-list { overflow: hidden; padding: 8px 10px 22px; margin: 0 -10px; }

/* v1108 popup cards cast exactly the same shadow as the patient file's straw cards */
.cc-pop-row { box-shadow: var(--plain-shadow, 0 10px 24px rgba(30,40,50,.26), 0 2px 6px rgba(30,40,50,.18)) !important; }

/* v1109 the popup list leaves room for the cards' shadow (it was clipped into a visible rectangle) */
.cc-pop-list { padding: 6px 14px 40px !important; margin: 0 -14px -30px !important; }

/* v1113: ET plan drawer, view only */
#et-plan-form.et-view-only .field { pointer-events: none; opacity: .72; }

/* v1114: andrology (semen analysis + SDFA) */
#view-andrology-form .an-sec { display: block; margin: 16px 2px 8px; font-weight: 700; }
#view-andrology-form .an-sec:first-child { margin-top: 4px; }
.an-chart { margin: 4px 2px 14px; }
.an-chart-box { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .42); flex-wrap: wrap; }
html[data-look="plain"] .an-chart-box, html[data-look="plain"] .pc-andro, html[data-look="plain"] #view-andrology-form .mii-box { background: #FFFFFF; box-shadow: var(--plain-shadow, 0 1px 6px rgba(0,0,0,.08)); }
.an-donut { width: 96px; height: 96px; flex: 0 0 auto; }
.an-donut-t { font-size: 17px; font-weight: 700; fill: currentColor; }
.an-legend { flex: 1 1 140px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.an-leg-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.an-leg-row i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.an-leg-row span { flex: 1 1 auto; min-width: 0; }
.an-leg-row b { flex: 0 0 auto; font-weight: 700; }
.an-over { flex: 1 0 100%; margin: 0; }
#an-prior { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 500; }
#an-prior.hidden { display: none; }
.pc-andro { margin: 14px 2px 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .42); }
.pc-andro.hidden { display: none; }
.pc-andro-head { font-weight: 700; margin-bottom: 8px; }
.pc-andro .an-chart-box { padding: 8px 0 4px; background: transparent; box-shadow: none; }
.pc-andro .btn { margin-top: 10px; }
.an-sum-line { font-size: 14px; color: var(--muted); margin: 2px 0 4px; }
.row .an-sum .an-chart-box { padding: 8px 0 2px; background: transparent; box-shadow: none; }

/* v1116: exit confirmation (same window as the clinic calendar day list) */
.exit-pop-msg { font-size: 15px; color: #14202a; padding: 2px 4px 14px; }
.exit-pop-btns { display: flex; gap: 10px; }
.exit-pop-btns .btn { flex: 1 1 0; }

/* v1117: patient file — boxes added asynchronously (consents, notes, chat…) get the standard gap. */
.pf-section + .list-panel,
.list-panel + .pf-section,
.list-panel + .list-panel,
.pf-section + .pf-section { margin-top: 14px; }

/* v1122: FET form — surrogate box under the patient box; the add-quality button sits inside its panel, raised off the background */
#view-fet-transfer .fet-sg-panel { margin-top: 12px; }
/* shared by the FET / embryo-case / complete-info forms */
.fet-add-btn {
  margin-top: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20, 49, 44, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* v1128: transferred mark = plain gradient text (logo teal-green), no frame, not tilted, same type size as .thawed-stamp;
   no stamp carries a shadow any more */
.tx-stamp {
  flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center;
  font-family: Arial, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .45px; line-height: 1;
  margin: 0; white-space: nowrap;
  background: linear-gradient(90deg, #1b86b8, #12a190 55%, #3cb46e);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.pf-back-tx .row-title { color: #0E7C6B; }
.thawed-stamp, .refreeze-stamp, .ext-stamp { box-shadow: none !important; }

/* v1135: the browser (desktop) shell follows the plain look: grey page, raised light boxes with the plain shadow,
   dark text, teal accent. Replaces the dark glass colours of the v611 desktop layer. */
html[data-look="plain"].desktop-web, html[data-look="plain"].desktop-web body { background:#DCE0E4 !important; }
html[data-look="plain"].desktop-web #staff-desktop { background:#DCE0E4 !important; color:#2B333B !important; }
html[data-look="plain"].desktop-web #staff.desktop-subpage-staff { background:transparent !important; color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-sidebar { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html[data-look="plain"].desktop-web .web-brand strong { color:#17352e !important; }
html[data-look="plain"].desktop-web .web-brand span { color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-brand-mark { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow-s) !important; color:#0E7C6B !important; }
html[data-look="plain"].desktop-web .web-clinic { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow-s) !important; }
html[data-look="plain"].desktop-web .web-clinic-icon { background:#E3E7EA !important; color:#0E7C6B !important; }
html[data-look="plain"].desktop-web .web-clinic small { color:#6b7782 !important; }
html[data-look="plain"].desktop-web .web-clinic button { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-clinic>span:last-child { color:#6b7782 !important; }
html[data-look="plain"].desktop-web .web-nav-label { color:#6b7782 !important; }
html[data-look="plain"].desktop-web .web-nav .dtop-nav-item { color:#3F4851 !important; background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
html[data-look="plain"].desktop-web .web-nav .dtop-nav-item:hover { background:#E2E5E8 !important; color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-nav .dtop-nav-item.is-on { background:#EDEFF1 !important; box-shadow:var(--plain-shadow-s) !important; color:#0E7C6B !important; font-weight:800 !important; }
html[data-look="plain"].desktop-web .web-sidebar-bottom { border-top-color:rgba(0,0,0,.08) !important; }
html[data-look="plain"].desktop-web .web-side-action { color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-side-action:hover { background:#E2E5E8 !important; color:#2B333B !important; }
html[data-look="plain"].desktop-web .glass-panel { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html[data-look="plain"].desktop-web .web-kicker, html[data-look="plain"].desktop-web .web-live, html[data-look="plain"].desktop-web .web-link { color:#0E7C6B !important; }
html[data-look="plain"].desktop-web .web-top h1 { color:#17352e !important; }
html[data-look="plain"].desktop-web .web-top p { color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-search { background:#FFFFFF !important; border:0 !important; color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-search input { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-search input::placeholder { color:#8a96a0 !important; }
html[data-look="plain"].desktop-web .web-bell { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow-s) !important; color:#3F4851 !important; }
html[data-look="plain"].desktop-web .web-profile { border-left-color:rgba(0,0,0,.08) !important; }
html[data-look="plain"].desktop-web .web-profile strong { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-profile span { color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-quick-title { color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-quick-links button { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow-s) !important; color:#0E7C6B !important; }
html[data-look="plain"].desktop-web .web-quick-links button:hover { background:#E2E5E8 !important; }
html[data-look="plain"].desktop-web .web-quick-links button span { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-card-head h2 { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-card-head span { color:#6b7782 !important; }
html[data-look="plain"].desktop-web .web-table-wrap { border:0 !important; box-shadow:var(--plain-shadow-s) !important; }
html[data-look="plain"].desktop-web .web-table-wrap .dtop-table th { background:rgba(0,0,0,.035) !important; color:#5b6872 !important; border-bottom:1px solid rgba(0,0,0,.07) !important; }
html[data-look="plain"].desktop-web .web-table-wrap .dtop-table td { color:#2B333B !important; border-bottom:1px solid rgba(0,0,0,.06) !important; }
html[data-look="plain"].desktop-web .web-table-wrap .dtop-status-pill { background:rgba(14,124,107,.10) !important; color:#0E7C6B !important; border:0 !important; }
html[data-look="plain"].desktop-web .web-donut { background:conic-gradient(#12a190 0 26%,#1b86b8 26% 48%,#c9a227 48% 70%,#8a6fc4 70% 83%,#CDD3D8 83%) !important; }
html[data-look="plain"].desktop-web .web-donut:after { background:#EDEFF1 !important; }
html[data-look="plain"].desktop-web .web-donut strong { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-donut small, html[data-look="plain"].desktop-web .web-legend span { color:#5b6872 !important; }
html[data-look="plain"].desktop-web .web-legend b { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-metrics>div, html[data-look="plain"].desktop-web .web-tanks>div, html[data-look="plain"].desktop-web .web-workflow button, html[data-look="plain"].desktop-web .web-attention>div { background:#EDEFF1 !important; border:0 !important; box-shadow:var(--plain-shadow-s) !important; }
html[data-look="plain"].desktop-web .web-workflow button:hover { background:#E2E5E8 !important; }
html[data-look="plain"].desktop-web .web-metrics strong { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-metrics small, html[data-look="plain"].desktop-web .web-tanks small, html[data-look="plain"].desktop-web .web-workflow button small, html[data-look="plain"].desktop-web .web-straws span { color:#6b7782 !important; }
html[data-look="plain"].desktop-web .web-tanks b, html[data-look="plain"].desktop-web .web-straws b, html[data-look="plain"].desktop-web .web-workflow button span { color:#2B333B !important; }
html[data-look="plain"].desktop-web .web-tanks strong { color:#0E7C6B !important; }
html[data-look="plain"].desktop-web .web-tanks i { background:linear-gradient(180deg,rgba(18,161,144,.55),rgba(27,134,184,.25)) !important; }
html[data-look="plain"].desktop-web .web-straws { border-top-color:rgba(0,0,0,.08) !important; }
html[data-look="plain"].desktop-web .web-workflow button>b { background:#E3E7EA !important; color:#0E7C6B !important; box-shadow:none !important; }
html[data-look="plain"].desktop-web .web-attention>div { color:#3F4851 !important; }
html[data-look="plain"].desktop-web .web-attention b { background:rgba(198,40,40,.10) !important; color:#c62828 !important; }
html[data-look="plain"].desktop-web .web-footer { color:#6b7782 !important; }


/* v1141 — tank name chips under the carousel: tap a name to jump to that tank */
.tanks-jump {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 10px; margin: 2px -4px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.tanks-jump::-webkit-scrollbar { display: none; }
.tanks-jump-chip {
  flex: 0 0 auto; min-height: 36px; padding: 6px 16px; border-radius: 999px; border: 0;
  background: var(--tint, rgba(14,124,107,.10)); color: var(--ink, #14312C);
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tanks-jump-chip.is-on { background: var(--accent, #0E7C6B); color: #fff; }
html[data-look="plain"] .tanks-jump-chip { background: #E3E6E9; color: #1f2933; box-shadow: none; }
html[data-look="plain"] .tanks-jump-chip.is-on { background: #1f2933; color: #fff; }


/* v1147 — the date box celebrates a positive pregnancy result dated today */
.today-datebox.has-cele { position: relative; }

/* v1151: patient-file tools as a tidy two-column grid; medication buttons side by side; edit/delete quiet at the very end */
.pf-card .pf-trace-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 14px; }
.pf-trace-tools .pf-tool { margin: 0 !important; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; line-height: 1.25; width: 100%; }
.pf-trace-tools .pf-report { margin: 0 !important; flex-direction: column; }
.pf-trace-tools .pf-report-icon { width: 20px; height: 26px; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pf-two .btn { margin: 0; width: 100%; }
.pf-bottom-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 8px; }
.pf-bottom-actions .pf-action { margin: 0 !important; background: transparent; box-shadow: none; border: 1.5px solid rgba(80, 100, 92, .28); color: #52665f; font-weight: 600; }
.pf-bottom-actions .pf-danger { color: #b3261e; border-color: rgba(179, 38, 30, .38); }

/* v1154: baseline data + hormone results in one row */
.pf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin: 4px 0; }
.pf-row2 > .pf-section { min-width: 0; margin: 0; }
.pf-row2 .btn { width: 100%; }
.pf-row2 > .pf-section { margin: 0 !important; padding-top: 0 !important; }
.pf-row2 > .pf-section > * { margin-top: 0; }
.pf-row2 > .pf-section > .block-title { margin-bottom: 8px; }

/* v1155: name box + small patient-messages box in the first row */
.pf-namerow { display: flex; align-items: stretch; gap: 8px; margin: 0 0 14px; }
.pf-namerow .pf-patient-name { flex: 1 1 auto; min-width: 0; margin: 0; }
.pf-namerow .pf-msg-box { flex: 0 0 84px; width: 84px; margin: 0 !important; padding: 6px 4px; font-size: 11.5px; line-height: 1.25; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 16px; min-height: 58px; }

/* v1156: messages box = same height as the name box, stretched in the row */
.pf-namerow .pf-msg-box { min-height: 0; align-self: stretch; }
.pf-msg-float { z-index: 36; }
.pf-msg-box { padding: 6px 4px; font-size: 11.5px; line-height: 1.25; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; box-sizing: border-box; overflow: hidden; }
.pf-msg-float.pf-name-float:not(.is-on) { display: none; }
.pf-msg-float.is-on { display: flex; }
/* v1157: slimmer name + messages boxes; messages box on the opposite (left) side of the name */
.pf-namerow { direction: ltr; flex-direction: row-reverse; margin-bottom: 10px; }
.pf-namerow .pf-patient-name, .pf-name-float.pf-patient-name { min-height: 0 !important; height: 40px; padding: 4px 14px !important; font-size: 16.5px; line-height: 1.25; }
.pf-namerow .pf-msg-box, .pf-msg-float { flex: 0 0 96px; width: 96px; height: 40px; min-height: 0 !important; padding: 2px 6px; font-size: 12px; white-space: nowrap; flex-direction: row; gap: 4px; }
.pf-name-float { min-height: 0 !important; }

/* ===== v1158: calm, compact end of the patient file =====
   One set of rules for every button block below the stored samples, so they read as one system:
   2 equal columns that never overflow, 44px tall, 14px / 600 text, one section-label style. */
.pf-card .pf-trace-tools,
.pf-card .pf-row2,
.pf-card .pf-bottom-actions,
.pf-card .pf-two,
.pf-card .pf-storage-actions-bottom {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0; margin-right: 0;
}
.pf-card .pf-row2 { align-items: start; gap: 8px 8px !important; }
.pf-card .pf-row2 > .pf-section { min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.pf-card .pf-row2 > .pf-section > *:not(.block-title) { margin-top: 0 !important; }

.pf-card .pf-tool,
.pf-card .pf-row2 .btn,
.pf-card .pf-two .btn,
.pf-card .pf-bottom-actions .btn,
.pf-card .pf-storage-actions-bottom .btn {
  box-sizing: border-box;
  width: 100%; min-width: 0;
  min-height: 44px; height: auto;
  margin: 0 !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: 0;
  border-radius: 14px;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  overflow: hidden;
}
.pf-card .pf-bottom-actions { margin-top: 14px !important; }
.pf-card .pf-bottom-actions .btn { min-height: 40px; font-size: 13.5px !important; font-weight: 600 !important; }
.pf-card .pf-trace-tools .pf-report-icon { width: 15px; height: 19px; border-radius: 2px; }
.pf-card .pf-trace-tools .pf-report { flex-direction: row; }

/* section labels: same size, same left edge as the buttons beneath them */
.pf-card .pf-row2 .block-title,
.pf-card > .block-title {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  margin: 14px 0 6px !important; padding: 0 2px !important;
}
.pf-card .pf-row2 .block-title { margin-top: 0 !important; }
.pf-card .pf-two { margin-top: 8px; }
.pf-card .pf-trace-tools .pf-tool { background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 6px rgba(20, 49, 44, .08); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* v1160: Baseline data / Hormone results — labels sit lower (more air under the box above), buttons slimmer */
.pf-card .pf-row2 { margin-top: 22px !important; }
.pf-card .pf-row2 .block-title { margin: 0 0 8px !important; }
.pf-card .pf-row2 .btn { min-height: 36px !important; padding: 5px 8px !important; font-size: 12.5px !important; line-height: 1.2; border-radius: 12px; gap: 4px; }

/* v1161: Edit / Delete sit the same 8px below the Tools tiles as the tiles sit from each other */
.pf-card .pf-trace-tools { margin-bottom: 0 !important; }
.pf-card .pf-bottom-actions { margin-top: 8px !important; margin-bottom: 8px !important; }

/* v1162: congratulation overlay in the date box (patient name black + bold, message under it) */
.today-datebox { transition: min-height .3s ease; }
.today-datebox.cele-on { min-height: 82px; }
.today-datebox.cele-on .today-date { opacity: 0; transition: opacity .25s; }
.today-datebox .cele-msg { position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 58px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.today-datebox .cele-msg.is-on { opacity: 1; }
.cele-name { color: #000; font-weight: 900; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.cele-text { color: #1c3a32; font-weight: 600; font-size: 12.5px; line-height: 1.3; text-wrap: balance; }

/* ===== v1163: one send icon everywhere (paper plane, like Telegram) ===== */
.cb-send, .staff-chat-send, .ai-send, .notes-send-btn {
  font-size: 0 !important; line-height: 0; display: inline-flex !important; align-items: center; justify-content: center;
  width: 46px !important; min-width: 46px !important; height: 46px !important; padding: 0 !important; border-radius: 50% !important; flex: 0 0 46px;
}
.cb-send::before, .staff-chat-send::before, .ai-send::before, .notes-send-btn::before {
  content: ''; display: block; width: 24px; height: 24px; background: currentColor; margin-inline-start: -2px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cb-send:disabled, .ai-send:disabled, .notes-send-btn:disabled { opacity: .55; }

/* ===== v1163: patient chat as a window ===== */
#view-pchat > .view-head { margin-bottom: 12px !important; }
#pchat-conv .pchat-openchat { margin-top: 12px; }
.chat-win-wrap { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 22px 18px; }
/* the page behind is blurred by a sibling layer: a blur on the wrapper itself would stop the window's own glass from seeing the page */
.chat-win-wrap::before { content: ''; position: absolute; inset: 0; background: rgba(20, 30, 40, .16); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); animation: chatWinIn .22s ease; }
.chat-win-wrap.hidden { display: none; }
@keyframes chatWinIn { from { opacity: 0; } to { opacity: 1; } }
.chat-window {
  width: min(380px, 100%); height: min(72vh, 520px); display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px;
  position: relative; background: rgba(255, 255, 255, .66); border: 1px solid rgba(255, 255, 255, .78); border-radius: 26px;
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 28px 60px rgba(10, 20, 30, .38), 0 6px 16px rgba(10, 20, 30, .2), inset 0 1px 0 rgba(255, 255, 255, .85);
  animation: chatWinPop .26s cubic-bezier(.2, .8, .25, 1);
}
@keyframes chatWinPop { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-win-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 4px; }
.chat-win-title { font-weight: 800; font-size: 15px; color: var(--ink, #1c3a32); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-win-close { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #4b5360; font-size: 16px; line-height: 1; cursor: pointer; }
.chat-window .cb-tabs { padding: 0 0 4px; }
.chat-window #pchat-msgs.cb-list { flex: 1 1 auto; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0; overflow-y: auto; }
.chat-window .cb-ai { margin-top: 0; }
.chat-window .cb-compose { margin-top: 0; align-items: flex-end; }

/* v1164: title box no longer overlaps the card under it; role tabs fit one row; glass window */
#view-pchat .section-title-box { margin-bottom: 0 !important; }
#view-pchat > .view-head { margin-bottom: 12px !important; }
.chat-window .cb-tabs { gap: 4px; padding: 0 0 2px; overflow: visible; }
.chat-window .cb-tab { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 11.5px; border-radius: 11px; }
.chat-window #pchat-msgs.cb-list { background: rgba(241, 242, 244, .6); }
.chat-window .cb-compose textarea { min-height: 42px; }

#view-pchat > .view-head > .section-title-box { margin: 0 !important; }
#view-pchat > .view-head { margin-bottom: 4px !important; }

/* v1165: nothing behind the chat window scrolls */
html.chat-win-open, html.chat-win-open body { overflow: hidden !important; overscroll-behavior: none; }
.chat-win-wrap { touch-action: none; overscroll-behavior: contain; }
.chat-window #pchat-msgs.cb-list { touch-action: pan-y; overscroll-behavior: contain; }
.chat-window #pchat-input { touch-action: pan-y; overscroll-behavior: contain; }

/* v1173 — exit window: no rim, and the page behind it cannot scroll */
#cc-pop-wrap[data-exit] .cc-pop { border: 0 !important; box-shadow: 0 24px 54px rgba(10,20,30,.30), 0 6px 16px rgba(10,20,30,.18) !important; }
html.cc-open, html.cc-open body { overflow: hidden !important; overscroll-behavior: none !important; }

/* v1174 — bottom menus open like the exit window: the page behind is blurred (not darkened)
   and cannot scroll, and the menu itself is lightly glass. Options stay solid and readable. */
html:root .sheet-wrap > .sheet-scrim {
  background: rgba(20, 30, 40, .10) !important;
  -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important;
}
html:root .sheet-wrap > .sheet {
  background: rgba(255, 255, 255, .62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important;
  border: 0 !important;
  box-shadow: 0 -14px 40px rgba(10, 20, 30, .22), 0 -2px 10px rgba(10, 20, 30, .10) !important;
}
html:root .sheet-wrap .optpick-list { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
html:root .sheet-wrap .optpick-row { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 2px 6px rgba(10, 20, 30, .10) !important; }
html:root .sheet-wrap .optpick-row:not(.is-on) { background: rgba(255, 255, 255, .88) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .sheet-wrap > .sheet { background: rgba(255, 255, 255, .95) !important; }
}

/* v1175 — options in bottom menus carry the same shadow as the cane rows in the tank */
html:root .sheet-wrap .optpick-row,
html:root .sheet-wrap .sheet-actions .btn:not(.btn-primary) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 6px 10px -4px rgba(20, 35, 45, .35) !important;
}
html:root .sheet-wrap .optpick-list { padding: 2px 2px 10px !important; }

/* v1176 — same edges as the cane rows: 20px corners and a faint dashed rim, same face colour */
html:root .sheet-wrap .optpick-row,
html:root .sheet-wrap .sheet-actions .btn:not(.btn-primary) {
  border-radius: 20px !important;
  border: 1px dashed rgba(0, 0, 0, .05) !important;
}
html:root .sheet-wrap .optpick-row:not(.is-on),
html:root .sheet-wrap .sheet-actions .btn:not(.btn-primary) { background: #EDEFF1 !important; }
html:root .sheet-wrap .optpick-row.is-on { border: 1px solid rgba(74, 85, 96, .55) !important; }

/* v1178 — more glass: bottom menus and the exit window let more of the page show through */
html:root .sheet-wrap > .sheet {
  background: rgba(255, 255, 255, .42) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important;
}
html:root #cc-pop-wrap[data-exit] .cc-pop {
  background: rgba(255, 255, 255, .42) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important;
}

/* v1181 — assistant chat: each line keeps its own direction; the assistant's bubble differs from yours */
.ai-msg { white-space: normal !important; }
.ai-line { unicode-bidi: plaintext; text-align: start; white-space: pre-wrap; }
.ai-line.ai-gap { height: .55em; }
.ai-line.ai-li { padding-inline-start: 14px; position: relative; }
.ai-line.ai-li::before { content: "•"; position: absolute; inset-inline-start: 2px; }
html:root .ai-msg.ai-user { background: #FFFFFF !important; color: #263331 !important; }
html:root .ai-msg.ai-assistant { background: #E3EEF8 !important; color: #1f2d38 !important; border: 1px solid rgba(60, 100, 140, .14) !important; }
.ai-clear { position: absolute; top: 14px; inset-inline-end: 14px; border: 0; border-radius: 12px; padding: 6px 10px;
  font: inherit; font-size: 12px; color: #3d4852; background: rgba(74, 85, 96, .10); }

/* v1182 — ICM assistant storage suggestion inside the freeze forms */
.ai-store-suggest { margin: 4px 0 14px; padding: 12px 14px; border-radius: 18px; background: #E3EEF8;
  border: 1px solid rgba(60, 100, 140, .16); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 10px -4px rgba(20,35,45,.25); }
.ai-store-head { font-size: 12.5px; font-weight: 700; color: #2c4a63; margin-bottom: 4px; }
.ai-store-body { font-size: 16px; font-weight: 700; color: #14202a; unicode-bidi: plaintext; text-align: start; }
.ai-store-why { font-size: 12.5px; color: #3d4852; margin-top: 3px; unicode-bidi: plaintext; text-align: start; }
.ai-store-use { margin: 10px 0 0 !important; width: 100%; min-height: 40px; }

/* v1184 — the assistant is talking about one patient's file */
.ai-patient-bar { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 10px 12px; border-radius: 16px;
  background: #FFF6E5; border: 1px solid rgba(180, 130, 40, .22); }
.ai-patient-txt { flex: 1; min-width: 0; unicode-bidi: plaintext; text-align: start; }
.ai-patient-txt b { font-size: 14px; color: #3a2c10; }
.ai-patient-sub { font-size: 11.5px; color: #6b5a35; margin-top: 2px; }
.ai-patient-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 11px; border: 0; background: rgba(120, 90, 30, .12); color: #4a3a18; }

/* v1186 — the suggestion box wears the ICM logo colours (blue → teal → green), softly scattered */
.ai-store-suggest {
  background:
    radial-gradient(120px 90px at 12% 18%, rgba(20, 110, 170, .34), transparent 70%),
    radial-gradient(140px 100px at 88% 22%, rgba(25, 175, 165, .36), transparent 70%),
    radial-gradient(150px 110px at 70% 92%, rgba(140, 210, 95, .40), transparent 70%),
    radial-gradient(110px 90px at 18% 88%, rgba(40, 160, 190, .28), transparent 70%),
    linear-gradient(135deg, #EAF4F7 0%, #E8F6F1 55%, #EEF7E6 100%) !important;
  border: 1px solid rgba(30, 140, 150, .22) !important;
}
.ai-store-head { color: #0f5f73 !important; }
.ai-store-use { background: rgba(255, 255, 255, .85) !important; }

/* v1187 — no seams between the colours: one continuous blue → teal → green wash underneath,
   and large, very soft patches on top that overlap each other instead of meeting at an edge */
.ai-store-suggest {
  background:
    radial-gradient(ellipse 70% 90% at 10% 20%, rgba(20, 110, 170, .20), rgba(20, 110, 170, 0) 100%),
    radial-gradient(ellipse 70% 90% at 55% 35%, rgba(25, 175, 165, .18), rgba(25, 175, 165, 0) 100%),
    radial-gradient(ellipse 75% 95% at 92% 85%, rgba(140, 210, 95, .26), rgba(140, 210, 95, 0) 100%),
    linear-gradient(120deg, #DCEBF4 0%, #DDF0EE 45%, #E6F4E2 100%) !important;
}

/* v1188 — one look for everything the AI assistant does: the ICM logo wash, no rim */
:root {
  --icm-ai-wash:
    radial-gradient(ellipse 70% 90% at 10% 20%, rgba(20, 110, 170, .20), rgba(20, 110, 170, 0) 100%),
    radial-gradient(ellipse 70% 90% at 55% 35%, rgba(25, 175, 165, .18), rgba(25, 175, 165, 0) 100%),
    radial-gradient(ellipse 75% 95% at 92% 85%, rgba(140, 210, 95, .26), rgba(140, 210, 95, 0) 100%),
    linear-gradient(120deg, #DCEBF4 0%, #DDF0EE 45%, #E6F4E2 100%);
}
html:root .ai-store-suggest,
html:root .ai-msg.ai-assistant,
html:root #pchat-ai,
html:root .ai-grad {
  background: var(--icm-ai-wash) !important;
  border: 0 !important;
  outline: 0 !important;
}
html:root .ai-msg.ai-assistant { box-shadow: 0 6px 14px -6px rgba(20, 60, 80, .30) !important; }
html:root #pchat-ai, html:root .ai-grad { color: #0f4f60 !important; font-weight: 700; }

/* v1189 — in every chat your own messages sit on the RIGHT and the other side's on the LEFT,
   whatever the page language (physical sides, not start/end) */
html:root .ai-msg.ai-user { align-self: auto !important; margin-left: auto !important; margin-right: 0 !important; border-bottom-right-radius: 6px; }
html:root .ai-msg.ai-assistant { align-self: auto !important; margin-right: auto !important; margin-left: 0 !important; border-bottom-left-radius: 6px; }
html:root .cb-me { align-self: auto !important; margin-left: auto !important; margin-right: 0 !important; }
html:root .cb-them { align-self: auto !important; margin-right: auto !important; margin-left: 0 !important; }
html:root .staff-chat-user { align-self: auto !important; margin-left: auto !important; margin-right: 0 !important; }

/* v1190 — sharper tail corner on the sender's side */
html:root .ai-msg.ai-user, html:root .cb-me, html:root .staff-chat-user { border-bottom-right-radius: 2px !important; }
html:root .ai-msg.ai-assistant, html:root .cb-them { border-bottom-left-radius: 2px !important; }

/* v1191 — the assistant is a full page: no panel box, no tab bar; the message box sits where the tab bar was */
html.ai-full .tabbar, html.ai-full #dots { display: none !important; }
html.ai-full #view-ai.ai-view { padding: 0 !important; }
html.ai-full #view-ai .ai-panel {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important;
  min-height: 0 !important; overflow: hidden !important;
  height: calc(100dvh - var(--ai-top, 150px)) !important; display: flex !important; flex-direction: column !important;
}
html.ai-full #view-ai .ai-head { padding: 6px 16px 8px !important; border-bottom: 0 !important; }
html.ai-full #view-ai .ai-head h2 { font-size: 17px; }
html.ai-full #view-ai .ai-head p { display: none; }
html.ai-full #view-ai .ai-head-icon { width: 34px; height: 34px; flex-basis: 34px; }
html.ai-full #view-ai .ai-head-icon svg { width: 28px; height: 28px; }
html.ai-full #view-ai .ai-clear { top: 8px !important; }
html.ai-full #view-ai .ai-messages {
  flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important;
  padding: 6px 16px 12px !important;
}
html.ai-full #view-ai .ai-composer {
  flex: 0 0 auto; margin: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 8px !important; border: 0 !important; border-radius: 26px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 28px rgba(20, 35, 45, .20), 0 2px 6px rgba(20, 35, 45, .10);
}
html.ai-full #view-ai .ai-composer textarea { min-height: 44px; height: 44px; max-height: 120px; border: 0 !important; background: rgba(255,255,255,.92) !important; border-radius: 20px !important; }
html.ai-full #view-ai .ai-head { order: -2; }
html.ai-full #view-ai .ai-composer { order: 2; }
html.ai-full #view-ai .ai-note { display: none !important; }

/* v1192 — the page itself never scrolls on the assistant; only the messages do, the message box stays pinned at the bottom */
html.ai-full, html.ai-full body { overflow: hidden !important; overscroll-behavior: none !important; }
html.ai-full body { padding-bottom: 0 !important; }
html.ai-full main, html.ai-full .views, html.ai-full .app { padding-bottom: 0 !important; min-height: 0 !important; }
html.ai-full #view-ai.ai-view { margin: 0 !important; min-height: 0 !important; }
html.ai-full #view-ai .ai-panel { height: var(--ai-h, calc(100vh - var(--ai-top, 150px))) !important; max-height: var(--ai-h, calc(100vh - var(--ai-top, 150px))) !important; }
html.ai-full #view-ai .ai-messages { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* v1193 — assistant page pinned to the visible screen (iPhone too): fixed panel whose bottom is the
   bottom of the screen, or the top edge of the keyboard while it is open */
html.ai-full #view-ai .ai-panel {
  position: fixed !important; left: 0 !important; right: 0 !important;
  top: var(--ai-vtop, var(--ai-top, 150px)) !important;
  height: var(--ai-h, calc(100vh - var(--ai-top, 150px))) !important;
  max-height: none !important; margin: 0 !important; z-index: 5;
  max-width: 760px; margin-inline: auto !important;
}
html.ai-full #view-ai .ai-composer { margin: 0 12px max(6px, calc(env(safe-area-inset-bottom, 0px) - 18px)) !important; }
html.ai-full.ai-kbd #view-ai .ai-composer { margin-bottom: 4px !important; }
.ai-quota { font-size: 12px; font-weight: 600; color: #4c6f62; margin-top: 2px; }
.ai-quota.low { color: #a86a00; }
.ai-quota.out { color: #b3261e; }
.ai-quota.hidden { display: none !important; }

/* v1197 — liquid glass (iOS look).
   Canister and cane cards: glass look on an opaque base the colour of the page, so a card never shows the card under it.
   Bottom menus and centred windows: the page behind stays sharp (no blur, only a light dim); the window is clear glass
   with a bright rim; the options and buttons inside are the same opaque glass as the canister cards. */

html:root #view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn,
html:root #view-tank .tank-canister-scroll-layer.is-stack .tank-cane { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html:root #view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn > .acc-head.depth-1,
html:root #view-tank .tank-canister-scroll-layer.is-stack .tank-cane > .acc-head {
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.14) 100%), #DCE0E4 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.45), inset -1px 0 0 rgba(255,255,255,.30),
              inset 0 -1px 0 rgba(255,255,255,.20), 0 6px 18px rgba(30,40,50, calc(var(--stack-alpha, .35) * .45)) !important;
  border-radius: 26px !important;
}

html:root .sheet-wrap > .sheet,
html:root #cc-pop-wrap .cc-pop, html:root #cc-pop-wrap[data-exit] .cc-pop {
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.18) 100%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(110%) !important; backdrop-filter: blur(5px) saturate(110%) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.45), inset -1px 0 0 rgba(255,255,255,.3),
              inset 0 -1px 0 rgba(255,255,255,.2), 0 18px 40px rgba(10,20,30,.16) !important;
}
html:root .sheet-wrap > .sheet { border-radius: 30px 30px 0 0 !important; border-bottom: 0 !important; }
html:root #cc-pop-wrap .cc-pop, html:root #cc-pop-wrap[data-exit] .cc-pop { border-radius: 30px !important; }
/* rows inside: same as the canister cards (opaque base, glass look) */
html:root .sheet-wrap .optpick-row:not(.is-on), html:root .sheet-wrap .sheet-actions .btn:not(.btn-primary), html:root #cc-pop-wrap .btn-quiet {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 100%), #DCE0E4 !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(30,40,50,.12) !important;
}
/* the page behind stays sharp: no blur outside the window, only a very light dim */
html:root .sheet-wrap > .sheet-scrim { background: rgba(20,30,40,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.cc-open body > *:not(#cc-pop-wrap) { filter: none !important; }
html:root .cc-pop-wrap { background: rgba(20,30,40,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* v1200 — the big tank card is glass: the canister and cane boxes show through it as they pass underneath */
html:root #view-tank .tank-detail-overview-overlay,
html:root[data-look="plain"] #view-tank .tank-detail-overview-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,.21) 0%, rgba(255,255,255,.09) 100%) !important;   /* v1202: a little less see-through */
  -webkit-backdrop-filter: blur(2.2px) saturate(108%) !important; backdrop-filter: blur(2.2px) saturate(108%) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.45), inset -1px 0 0 rgba(255,255,255,.3),
              inset 0 -1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(30,40,50,.16) !important;
}

/* v1201 — an empty tank's note sits as far below the card as canister 1 does, so its gaps match the other tanks */
#view-tank .tank-empty-note { margin-top: 18px !important; }

/* v1203 — the big tank card has no edge line (no border, no bright rim) */
html:root #view-tank .tank-detail-overview-overlay,
html:root[data-look="plain"] #view-tank .tank-detail-overview-overlay {
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(30,40,50,.16) !important;
}

/* v1204 — thinner edges: canister and cane cards get a hairline edge; the big tank card gets the same hairline back */
html:root #view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn > .acc-head.depth-1,
html:root #view-tank .tank-canister-scroll-layer.is-stack .tank-cane > .acc-head {
  border: 0.5px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 0.75px 0 rgba(255,255,255,.85), 0 6px 18px rgba(30,40,50, calc(var(--stack-alpha, .35) * .45)) !important;
}
html:root #view-tank .tank-detail-overview-overlay,
html:root[data-look="plain"] #view-tank .tank-detail-overview-overlay {
  border: 0.5px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 0.75px 0 rgba(255,255,255,.85), 0 10px 24px rgba(30,40,50,.16) !important;
}

/* v1205 — canister and cane edges even thinner and softer (one device pixel on most phones) */
html:root #view-tank .tank-canister-scroll-layer.is-stack > .acc > .tank-cn > .acc-head.depth-1,
html:root #view-tank .tank-canister-scroll-layer.is-stack .tank-cane > .acc-head {
  border: 0.34px solid rgba(255,255,255,.40) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,.65), 0 6px 18px rgba(30,40,50, calc(var(--stack-alpha, .35) * .45)) !important;
}

/* v1206 — the same thin edges on every glass menu.
   Large windows (bottom menus, centred windows) = the tank card's edge; options and buttons inside = the canister/cane edge. */
html:root .sheet-wrap > .sheet,
html:root #cc-pop-wrap .cc-pop, html:root #cc-pop-wrap[data-exit] .cc-pop {
  border: 0.5px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 0.75px 0 rgba(255,255,255,.85), 0 18px 40px rgba(10,20,30,.16) !important;
}
html:root .sheet-wrap > .sheet { border-bottom: 0 !important; }
html:root .sheet-wrap .optpick-row:not(.is-on), html:root .sheet-wrap .sheet-actions .btn:not(.btn-primary), html:root #cc-pop-wrap .btn-quiet {
  border: 0.34px solid rgba(255,255,255,.40) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,.65), 0 4px 12px rgba(30,40,50,.12) !important;
}

/* v1208 — the chat window (patient messages) follows the same rule as the other windows:
   the page behind stays sharp (no blur, light dim); only the window itself is glass, with the thin edges */
html:root .chat-win-wrap::before { background: rgba(20,30,40,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root .chat-window {
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.18) 100%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(110%) !important; backdrop-filter: blur(5px) saturate(110%) !important;
  border: 0.5px solid rgba(255,255,255,.55) !important; border-radius: 30px !important;
  box-shadow: inset 0 0.75px 0 rgba(255,255,255,.85), 0 18px 40px rgba(10,20,30,.16) !important;
}
html:root .chat-window .cb-tab:not(.is-on):not(.active):not([aria-selected="true"]), html:root .chat-window .chat-win-close {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 100%), #DCE0E4 !important;
  border: 0.34px solid rgba(255,255,255,.40) !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,.65), 0 4px 12px rgba(30,40,50,.12) !important;
}
html:root .chat-window #pchat-msgs.cb-list {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 100%), #E4E7EA !important;
  border: 0.34px solid rgba(255,255,255,.40) !important;
}

/* v1209 — the messages box inside the chat window is solid white, so messages read clearly */
html:root .chat-window #pchat-msgs.cb-list { background: #FFFFFF !important; }

/* v1210 — the page behind an open window is one shade darker (16%), still sharp */
html:root .sheet-wrap > .sheet-scrim { background: rgba(20,30,40,.16) !important; }
html:root .cc-pop-wrap { background: rgba(20,30,40,.16) !important; }
html:root .chat-win-wrap::before { background: rgba(20,30,40,.16) !important; }

/* v1211 — the assistant's title bar is glass: the messages scroll underneath it and show through */
html.ai-full #view-ai .ai-head {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 3;
  margin: 0 8px !important; padding: 8px 14px 10px !important;
  background: linear-gradient(180deg, rgba(236,239,242,.48) 0%, rgba(236,239,242,.30) 100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(112%) !important; backdrop-filter: blur(6px) saturate(112%) !important;
  border: 0.5px solid rgba(255,255,255,.55) !important; border-radius: 22px !important;
  box-shadow: inset 0 0.75px 0 rgba(255,255,255,.85), 0 8px 20px rgba(30,40,50,.10) !important;
}
html.ai-full #view-ai .ai-messages { padding-top: calc(var(--ai-head-h, 64px) + 8px) !important; scroll-padding-top: calc(var(--ai-head-h, 64px) + 8px); }

/* v1212 — the assistant's glass bar is a full-width rectangle that runs up under the header banner */
html.ai-full #view-ai .ai-panel { overflow: visible !important; max-width: none !important; }
html.ai-full #view-ai .ai-head {
  top: -44px !important; margin: 0 !important; border-radius: 0 !important;
  padding: 52px 16px 10px !important;
  border: 0 !important; border-bottom: 0.5px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 -0.75px 0 rgba(255,255,255,.6), 0 8px 20px rgba(30,40,50,.08) !important;
}
html.ai-full #view-ai .ai-clear { top: 52px !important; }
html.ai-full #view-ai .ai-messages { padding-top: calc(var(--ai-head-h, 108px) - 44px + 8px) !important; scroll-padding-top: calc(var(--ai-head-h, 108px) - 36px); }

/* v1213 — the assistant's glass bar has no edge line at all */
html.ai-full #view-ai .ai-head { border: 0 !important; box-shadow: 0 8px 20px rgba(30,40,50,.08) !important; }

/* v1214 — patient messages open as a full page, like the assistant: no centred window, no tab bar.
   The title and role tabs sit in a full-width glass bar that runs up under the header; messages scroll beneath it;
   the suggest-reply button and the message box sit at the bottom. */
html.chat-win-open .tabbar, html.chat-win-open #dots { display: none !important; }
html:root .chat-win-wrap:not(.hidden) {
  top: var(--pc-top, 130px) !important; bottom: auto !important; height: var(--pc-h, calc(100vh - 130px)) !important;
  z-index: 90 !important; padding: 0 !important; display: block !important;
  background: var(--pc-bg, #DCE0E4) !important;
}
html:root .chat-win-wrap::before { display: none !important; }
html:root .chat-window {
  width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important;
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important;
  display: flex !important; flex-direction: column !important; overflow: visible !important;
}
html:root .chat-window .chat-win-head, html:root .chat-window #pchat-tabs {
  position: absolute; left: 0; right: 0; z-index: 3; margin: 0 !important;
  background: linear-gradient(180deg, rgba(236,239,242,.48) 0%, rgba(236,239,242,.40) 100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(112%) !important; backdrop-filter: blur(6px) saturate(112%) !important;
}
html:root .chat-window .chat-win-head { top: -44px; padding: 52px 16px 6px !important; }
html:root .chat-window #pchat-tabs { top: calc(var(--pc-headh, 92px) - 44px); padding: 2px 16px 10px !important; box-shadow: 0 8px 20px rgba(30,40,50,.08); }
html:root .chat-window #pchat-tabs.hidden { display: none !important; }
html:root .chat-window #pchat-msgs.cb-list {
  flex: 1 1 auto; min-height: 0 !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  padding: calc(var(--pc-barh, 100px) + 10px) 16px 10px !important; scroll-padding-top: calc(var(--pc-barh, 100px) + 10px);
}
html:root .chat-window .cb-ai { flex: 0 0 auto; padding: 4px 14px 6px; }
html:root .chat-window .cb-compose {
  flex: 0 0 auto; margin: 0 12px max(6px, calc(env(safe-area-inset-bottom, 0px) - 18px)) !important; padding: 8px !important; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.18) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(110%); backdrop-filter: blur(5px) saturate(110%);
  border: 0.5px solid rgba(255,255,255,.55); box-shadow: inset 0 0.75px 0 rgba(255,255,255,.85), 0 10px 26px rgba(20,35,45,.16);
}
html.pc-kbd .chat-window .cb-compose { margin-bottom: 4px !important; }
html:root .chat-window #pchat-err { margin: 0 16px 6px; }

/* v1215 — "Suggest a reply" floats over the messages (not in a row of its own). Three seconds after the page opens
   it slides shut into a round AI button; messages scroll underneath it. */
html:root .chat-window .cb-ai {
  position: absolute; z-index: 4; inset-inline-start: 14px; bottom: calc(var(--pc-compose-h, 80px) + 12px);
  padding: 0 !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; pointer-events: none;
}
html:root .chat-window .cb-ai > * { pointer-events: auto; }
html:root .chat-window #pchat-ai {
  height: 48px; min-height: 48px; max-width: 240px; padding: 0 18px 0 13px !important; padding-inline: 13px 18px !important;
  border-radius: 24px !important; white-space: nowrap; overflow: hidden; justify-content: flex-start; display: inline-flex; align-items: center;
  box-shadow: 0 8px 20px rgba(20,60,70,.22), inset 0 0.75px 0 rgba(255,255,255,.8) !important; border: 0 !important;
  transition: max-width .55s cubic-bezier(.4,.0,.2,1), padding .55s cubic-bezier(.4,.0,.2,1), border-radius .55s;
}
html:root .chat-window .cb-ai.is-mini #pchat-ai { max-width: 48px; padding-inline: 13px 13px !important; border-radius: 50% !important; }
html:root .chat-window #pchat-msgs.cb-list { padding-bottom: 72px !important; }
html:root .chat-window #pchat-ai { transition: max-width .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), border-radius .55s, color .35s ease; }
html:root .chat-window .cb-ai.is-mini #pchat-ai { color: transparent !important; padding-inline: 12px 0 !important; }   /* only the ✨ stays: the words fade as it closes */
/* the ✨ alone in the round button: the words shrink away at the end of the slide, a centred ✨ takes their place */
html:root .chat-window .cb-ai.is-mini #pchat-ai {
  color: inherit !important; font-size: 0 !important; padding: 0 !important; justify-content: center !important;
  transition: max-width .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), border-radius .55s, font-size 0s linear .5s;
}
html:root .chat-window .cb-ai.is-mini #pchat-ai::before { content: '✨'; font-size: 21px; line-height: 1; animation: pcSpark .25s ease .5s both; }
@keyframes pcSpark { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
html:root .chat-window .cb-ai.is-mini #pchat-ai { min-width: 48px !important; }   /* keeps the circle once the words are gone; max-width does the sliding */

/* v1216 — one AI sparkle everywhere, in the ICM logo colours (an icon, so it looks the same on every phone) */
:root { --icm-spark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%223%22%20y1%3D%222%22%20x2%3D%2222%22%20y2%3D%2220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231F6FB5%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2316A6A0%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237DCB4F%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M10%202.5c.5%204.3%202.7%206.5%207%207-4.3.5-6.5%202.7-7%207-.5-4.3-2.7-6.5-7-7%204.3-.5%206.5-2.7%207-7Z%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M18.5%2013c.25%202.1%201.35%203.2%203.5%203.5-2.15.3-3.25%201.4-3.5%203.5-.25-2.1-1.35-3.2-3.5-3.5%202.15-.3%203.25-1.4%203.5-3.5Z%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M18%202.5c.15%201.2.8%201.85%202%202-1.2.15-1.85.8-2%202-.15-1.2-.8-1.85-2-2%201.2-.15%201.85-.8%202-2Z%22%20fill%3D%22url%28%23g%29%22/%3E%3C/svg%3E"); }
.ai-spark::before { content: ''; display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; margin-inline-end: 7px; vertical-align: -5px;
  background: var(--icm-spark) center / contain no-repeat; }
html:root .chat-window .cb-ai.is-mini #pchat-ai::before { content: ''; width: 24px; height: 24px; margin: 0; font-size: 0; background: var(--icm-spark) center / contain no-repeat; }

/* v1217 — chat bubbles get a curved tail at the bottom corner, like Telegram (sender: right, others: left) */
:root { --bubble-tail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2018%22%3E%3Cpath%20d%3D%22M12%200%20C12%207.5%209.6%2013.6%200.9%2017.1%20C0.4%2017.3%200.5%2018%201.1%2018%20H12%20Z%22/%3E%3C/svg%3E"); }
html:root .ai-msg.ai-user, html:root .ai-msg.ai-assistant, html:root .cb-me, html:root .cb-them, html:root .staff-chat-msg { position: relative; overflow: visible !important; }
html:root .ai-msg.ai-user, html:root .cb-me, html:root .staff-chat-user { border-bottom-right-radius: 0 !important; }
html:root .ai-msg.ai-assistant, html:root .cb-them, html:root .staff-chat-msg:not(.staff-chat-user) { border-bottom-left-radius: 0 !important; }
html:root .ai-msg.ai-user::after, html:root .ai-msg.ai-assistant::after, html:root .cb-me::after, html:root .cb-them::after, html:root .staff-chat-msg::after {
  content: ''; position: absolute; bottom: 0; width: 12px; height: 18px; pointer-events: none;
  background: inherit; background-size: 400% 400%; background-position: 0 100%;
  -webkit-mask: var(--bubble-tail) center / 100% 100% no-repeat; mask: var(--bubble-tail) center / 100% 100% no-repeat;
}
/* others: tail on the bottom-left, pointing left */
html:root .ai-msg.ai-assistant::after, html:root .cb-them::after, html:root .staff-chat-msg:not(.staff-chat-user)::after { left: -11px; }
/* sender: tail on the bottom-right, pointing right (mirror) */
html:root .ai-msg.ai-user::after, html:root .cb-me::after, html:root .staff-chat-user::after { right: -11px; transform: scaleX(-1); background-position: 100% 100%; }
html:root .ai-msg.ai-assistant::after { background: #D9EAF2 !important; }   /* the wash's colour at that corner */

/* v1218 — time and ticks inside the bubble, bottom corner, like Telegram */
.cb .cb-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; direction: ltr; font-size: 11px; opacity: 1; margin-top: 2px; line-height: 1; }
.cb .cb-time > span:first-child { opacity: .6; }
.cb .cb-tick { display: inline-flex; width: 17px; height: 11px; opacity: .7; }
.cb .cb-tick svg { width: 100%; height: 100%; display: block; }
.cb .cb-tick.is-seen { opacity: 1; color: #4FB6EC; }
.cb.cb-me .cb-tick.is-seen { color: #6CCBFF; }
.cb.cb-them .cb-tick.is-seen, html:root .cb-me[style*="#fff"] .cb-tick.is-seen { color: #2A9FDB; }
.ai-msg .ai-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; direction: ltr; font-size: 11px; margin-top: 4px; line-height: 1; }
.ai-msg .ai-time > span:first-child { opacity: .55; }
.ai-msg .cb-tick { display: inline-flex; width: 17px; height: 11px; opacity: .6; color: #4b5360; }
.ai-msg .cb-tick svg { width: 100%; height: 100%; display: block; }
.ai-msg .cb-tick.is-seen { opacity: 1; color: #2A9FDB; }

/* v1219 — patient chat page: one-line message box the size of the send button (grows while typing),
   errors float briefly above the box instead of a line under it */
html:root .chat-window .cb-compose { align-items: center !important; }
html:root .chat-window #pchat-input {
  min-height: 44px !important; height: 44px; max-height: 120px; padding: 11px 16px !important; line-height: 22px;
  border-radius: 22px !important; resize: none !important; overflow-y: auto;
}
html:root .chat-window #pchat-send { width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important; border-radius: 50% !important; flex: 0 0 44px; }
html:root .chat-window #pchat-err {
  position: absolute; z-index: 5; left: 16px; right: 16px; bottom: calc(var(--pc-compose-h, 70px) + 70px);
  margin: 0 !important; padding: 9px 14px; border-radius: 14px; background: rgba(40,48,58,.88); color: #fff; font-size: 13px; text-align: center;
}
.ai-quota .ai-model { font-weight: 500; opacity: .7; font-size: 11px; unicode-bidi: isolate; }

/* v1221 — the suggest button closes from one side and ends as a true circle: the corner radius stays at half the
   height the whole time (never 50%, which made an oval mid-way); the words are simply clipped as it narrows */
html:root .chat-window #pchat-ai, html:root .chat-window .cb-ai.is-mini #pchat-ai {
  border-radius: 24px !important; font-size: inherit !important; min-width: 0 !important; justify-content: flex-start !important;
  padding: 0 18px 0 13px !important; padding-inline: 13px 18px !important;
  transition: max-width .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1) !important;
}
html:root .chat-window .cb-ai.is-mini #pchat-ai { max-width: 48px !important; padding-inline: 13px 13px !important; color: inherit !important; }
html:root .chat-window .cb-ai.is-mini #pchat-ai::before { width: 22px !important; height: 22px !important; margin-inline-end: 7px !important; animation: none !important; }
html:root .chat-window #pchat-ai { overflow: hidden !important; white-space: nowrap !important;
  transition: max-width .55s cubic-bezier(.4,0,.2,1), padding .55s cubic-bezier(.4,0,.2,1), color .35s ease !important; }
html:root .chat-window .cb-ai.is-mini #pchat-ai { color: transparent !important; }   /* the words fade as they slide under the sparkle; the sparkle is an image and stays */

/* v1222 — patient chat page:
   1) the title and the role tabs share ONE glass layer (two separate glass strips met in a visible seam);
   2) no scrollbar line inside the one-line message box;
   3) the suggest button is solid ICM logo colour (blue → teal → green) with white sparkles and white words */
html:root .chat-window::before {
  content: ''; position: absolute; left: 0; right: 0; top: -44px; height: calc(var(--pc-barh, 100px) + 44px); z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(236,239,242,.50) 0%, rgba(236,239,242,.40) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(112%); backdrop-filter: blur(6px) saturate(112%);
  box-shadow: 0 8px 20px rgba(30,40,50,.08);
}
html:root .chat-window .chat-win-head, html:root .chat-window #pchat-tabs {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
html:root .chat-window #pchat-input { overflow-y: hidden; scrollbar-width: none; }
html:root .chat-window #pchat-input::-webkit-scrollbar { display: none; width: 0; height: 0; }
html:root .chat-window #pchat-input.is-tall { overflow-y: auto; }
html:root .chat-window #pchat-ai, html:root .chat-window .cb-ai.is-mini #pchat-ai {
  background: linear-gradient(135deg, #1F6FB5 0%, #16A6A0 52%, #7DCB4F 100%) !important; color: #fff !important;
  box-shadow: 0 8px 20px rgba(22,120,140,.32) !important;
}
html:root .chat-window .cb-ai.is-mini #pchat-ai { color: transparent !important; }
html:root .chat-window #pchat-ai::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M10%202.5c.5%204.3%202.7%206.5%207%207-4.3.5-6.5%202.7-7%207-.5-4.3-2.7-6.5-7-7%204.3-.5%206.5-2.7%207-7Z%22/%3E%3Cpath%20d%3D%22M18.5%2013c.25%202.1%201.35%203.2%203.5%203.5-2.15.3-3.25%201.4-3.5%203.5-.25-2.1-1.35-3.2-3.5-3.5%202.15-.3%203.25-1.4%203.5-3.5Z%22/%3E%3Cpath%20d%3D%22M18%202.5c.15%201.2.8%201.85%202%202-1.2.15-1.85.8-2%202-.15-1.2-.8-1.85-2-2%201.2-.15%201.85-.8%202-2Z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important; }

/* v1223 — patient chat page
   - while the chat is open nothing of the page behind shows through the glass bar (no title flashing behind it)
   - the bar is two parts: the title stays; the role tabs slide up under it when the suggest button turns round,
     and slide back down when the title bar is touched */
html.chat-win-open #view-pchat > :not(#pchat-conv), html.chat-win-open #pchat-conv > :not(#pchat-window) { visibility: hidden !important; }
html:root .chat-window::before { transition: height .45s cubic-bezier(.4,0,.2,1); }
html:root .chat-window #pchat-tabs { transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease; z-index: 2 !important; }
html:root .chat-window .chat-win-head { z-index: 4 !important; cursor: pointer; }
html:root .chat-window.tabs-up::before { height: var(--pc-headh, 92px) !important; }
html:root .chat-window.tabs-up #pchat-tabs { transform: translateY(-70%); opacity: 0; pointer-events: none; }
html:root .chat-window.tabs-up .chat-win-head::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: rgba(60,70,80,.25);
}
html:root .chat-window.tabs-up #pchat-msgs.cb-list { padding-top: calc(var(--pc-headh, 92px) - 44px + 10px) !important; }

/* v1224 — patient chat page
   - the messages never move when the role tabs slide up or down (the list keeps the same top space)
   - the page opens softly: it slides up a little and fades in; the messages fade in once loaded; closing slides down */
html:root .chat-window.tabs-up #pchat-msgs.cb-list { padding-top: calc(var(--pc-barh, 100px) + 10px) !important; }
@keyframes pcOpen { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pcClose { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(28px); } }
html:root .chat-win-wrap.pc-opening { animation: pcOpen .48s cubic-bezier(.22,.61,.36,1) both; }
html:root .chat-win-wrap.pc-closing { animation: pcClose .23s ease-in both; pointer-events: none; }
html:root .chat-window #pchat-msgs.cb-list { transition: opacity .35s ease; }
html:root .chat-window #pchat-msgs.cb-list:not(.pc-loaded) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html:root .chat-win-wrap.pc-opening, html:root .chat-win-wrap.pc-closing { animation: none; } }

/* v1226 — calmer page changes everywhere.
   A new page now rises 14px and fades in over .6s with an even ease (the old ease finished almost at once, so the
   switch read as a jump); its rows fade in softly when they arrive; the patient chat opens a little slower.
   On phones set to reduce motion the pages still fade (no movement), so nothing ever pops. */
@keyframes view-in-calm { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes rows-in-calm { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-in-calm { from { opacity: 0; } to { opacity: 1; } }
html:root .view.is-entering {
  animation-name: view-in-calm !important; animation-duration: .6s !important;
  animation-timing-function: cubic-bezier(.25, .1, .25, 1) !important; animation-fill-mode: both !important;
}
html:root .view.is-entering .rows > *, html:root .view.is-entering .list-panel > .note {
  animation: rows-in-calm .45s cubic-bezier(.25, .1, .25, 1) both;
}
html:root .view.is-entering .rows > *:nth-child(2) { animation-delay: .04s; }
html:root .view.is-entering .rows > *:nth-child(3) { animation-delay: .08s; }
html:root .view.is-entering .rows > *:nth-child(4) { animation-delay: .12s; }
html:root .view.is-entering .rows > *:nth-child(5) { animation-delay: .16s; }
html:root .view.is-entering .rows > *:nth-child(n+6) { animation-delay: .20s; }
html:root .chat-win-wrap.pc-opening { animation: pcOpen .62s cubic-bezier(.25, .1, .25, 1) both !important; }
@media (prefers-reduced-motion: reduce) {
  html:root .view.is-entering { animation: fade-in-calm .45s ease both !important; }
  html:root .view.is-entering .rows > * { animation: fade-in-calm .35s ease both !important; }
  html:root .chat-win-wrap.pc-opening { animation: fade-in-calm .45s ease both !important; }
}

/* v1227 — assistant page
   - opens without the jump: the page itself only fades (a moving page made its fixed panel start lower, then snap up);
     the panel slides up softly on its own
   - the message box: one line the size of the send button, grows while typing, no scrollbar line */
html:root #view-ai.is-entering { animation: fade-in-calm .62s ease both !important; transform: none !important; will-change: opacity !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; }
html:root #view-ai.is-entering .ai-panel { animation: pcOpen .62s cubic-bezier(.25,.1,.25,1) both; }
html.ai-full #view-ai .ai-composer { align-items: center !important; }
html.ai-full #view-ai .ai-composer textarea, html.ai-full #ai-input {
  min-height: 44px !important; height: 44px; max-height: 120px; padding: 11px 16px !important; line-height: 22px;
  border-radius: 22px !important; resize: none !important; overflow-y: hidden; scrollbar-width: none;
}
html.ai-full #ai-input::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.ai-full #ai-input.is-tall { overflow-y: auto; }
html.ai-full #view-ai .ai-send { width: 44px !important; height: 44px !important; min-width: 44px; flex: 0 0 44px; padding: 0 !important; border-radius: 50% !important; }
@media (prefers-reduced-motion: reduce) { html:root #view-ai.is-entering .ai-panel { animation: fade-in-calm .45s ease both; } }

/* v1228 — no more flashes when a page opens
   - "Loading…" appears only if loading takes longer than about half a second (fast pages show their rows directly)
   - rows no longer animate on their own (a list that was redrawn while the page faded in flashed twice)
   - a new page starts from 35% instead of from nothing, so there is no blank frame between two pages */
html:root .empty.is-loading { animation: fade-in-calm .3s ease .5s both; }
html:root .view.is-entering .rows > *, html:root .view.is-entering .list-panel > .note { animation: none !important; }
@keyframes view-in-calm { from { opacity: .35; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fade-in-page { from { opacity: .35; } to { opacity: 1; } }
html:root #view-ai.is-entering { animation-name: fade-in-page !important; }

/* v1229: returning to a page with Back (main menu included) -- no slide, no replay of the opening fade.
   A short, shallow fade only; when Chrome's own predictive-Back animation already brought the page in, none at all. */
@keyframes fade-in-back { from { opacity: .78; } to { opacity: 1; } }
html:root .view.is-returning {
  animation: fade-in-back .22s ease-out both !important;
  transform: none !important;
  will-change: auto !important;
}
@media (prefers-reduced-motion: reduce) { html:root .view.is-returning { animation: none !important; } }

/* v1230: entrance animations of the contents replay every time a hidden page is shown again -- on Back that was the
   kick (the page arrived, then its tiles/cards faded out and back in). Menu tiles animate only on the first open of the app;
   the management pages' cards only while their page is actually opening forward. */
html:root:not(.icm-first-show) .menu-group .tile { animation: none !important; }
html:root #view-excel-reports:not(.is-entering) .report-page-head, html:root #view-excel-reports:not(.is-entering) .report-periods,
html:root #view-excel-reports:not(.is-entering) .report-overview-card, html:root #view-users-management:not(.is-entering) .report-page-head,
html:root #view-users-management:not(.is-entering) .users-overview-card, html:root #view-users-management:not(.is-entering) .users-actions-card { animation: none !important; }

/* v1231: "View as" -- a dropdown that slides down from under the header banner, as wide as its names */
html.dd-open .clinic-header { z-index: 1001 !important; }
html:root #sheet.sheet-dropdown { align-items: flex-start; }
html:root #sheet.sheet-dropdown.is-closing { opacity: 1 !important; transition: none !important; }
html:root #sheet.sheet-dropdown > .sheet-scrim { background: rgba(20, 30, 40, .16) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root #sheet.sheet-dropdown.is-closing > .sheet-scrim { opacity: 0; transition: opacity .3s ease !important; }
html:root #sheet.sheet-dropdown > .sheet {
  position: absolute !important;
  top: var(--dd-top, 90px) !important;
  left: 14px !important; right: auto !important; inset-inline-start: auto; inset-inline-end: auto;
  width: max-content !important; min-width: 190px !important; max-width: calc(100vw - 28px) !important;
  max-height: min(68vh, calc(100vh - var(--dd-top, 90px) - 24px)) !important;
  border-radius: 0 0 20px 20px !important;
  padding: 34px 6px 8px !important;
  box-shadow: 0 16px 34px rgba(10, 20, 30, .22), 0 4px 10px rgba(10, 20, 30, .10) !important;
  border: .5px solid rgba(255, 255, 255, .7) !important; border-top: 0 !important;
  animation: ddDown .38s cubic-bezier(.22, .61, .36, 1) both !important;
  transform-origin: top;
}
html:root #sheet.sheet-dropdown.is-closing > .sheet {
  animation: ddUp .28s cubic-bezier(.4, 0, .7, .2) both !important;
  transition: none !important; opacity: 1 !important;
}
@keyframes ddDown { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes ddUp { from { transform: none; } to { transform: translateY(-100%); } }
html:root #sheet.sheet-dropdown .sheet-grip, html:root #sheet.sheet-dropdown .sheet-actions:empty { display: none !important; }
html:root #sheet.sheet-dropdown .sheet-title { font-size: 13px !important; font-weight: 600 !important; opacity: .6; margin: 0 12px 4px !important; padding: 0 !important; }
html:root #sheet.sheet-dropdown .pick { padding: 10px 12px !important; font-size: 15px !important; gap: 14px; }
html:root #sheet.sheet-dropdown .label { margin: 10px 12px 4px !important; }
@media (prefers-reduced-motion: reduce) { html:root #sheet.sheet-dropdown > .sheet { animation: none !important; } }

html:root #sheet.sheet-dropdown.dd-right > .sheet { left: auto !important; right: 14px !important; }

/* v1233: patient file -- Embryology report is one full-width row at the top of Tools;
   the Messages box matches the patient-name box (white, same soft shadow and edge) */
html:root .pf-card .pf-trace-tools > .pf-tool-full { grid-column: 1 / -1 !important; order: -1; width: 100% !important; justify-content: center; }
html:root .pf-namerow .pf-msg-box, html:root .pf-msg-float.pf-msg-box {
  background: #fff !important; background-image: none !important;
  box-shadow: 0 6px 14px rgba(30, 40, 50, .15), 0 1px 3px rgba(30, 40, 50, .10) !important;
  border: 1px solid rgba(0, 0, 0, .05) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* v1234: the "about this patient" strip lives inside the glass title bar, as its own full-width line, solid so it reads */
html:root #view-ai .ai-head { flex-wrap: wrap !important; }
html:root #view-ai .ai-head > .ai-patient-bar {
  flex: 1 0 100% !important; order: 99; margin: 8px 0 2px !important; padding: 7px 8px 7px 12px !important;
  background: #FFF6E5 !important; border: .5px solid rgba(180, 130, 40, .28) !important; border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(10, 20, 30, .06);
}
html:root #view-ai .ai-head > .ai-patient-bar .ai-patient-sub { font-size: 11px; line-height: 1.35; }
html:root #view-ai .ai-head > .ai-patient-bar .ai-patient-x { width: 28px; height: 28px; border-radius: 9px; }
html:root #view-ai .ai-head > .ai-patient-bar .ai-patient-txt { unicode-bidi: normal !important; text-align: start !important; }

/* v1235 — Telegram-style message box (assistant + patient chat): white pill holding a smiley button, the text
   (up to 6 lines, then it scrolls) and, from 3 lines, a full-screen arrow in the corner; an emoji panel above */
html:root .cmp-field {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end;
  background: #fff; border-radius: 22px; box-shadow: 0 3px 10px rgba(20, 35, 45, .08);
}
html:root .cmp-field > textarea, html:root .chat-window .cmp-field > #pchat-input, html.ai-full #view-ai .cmp-field > #ai-input {
  flex: 1 1 auto; min-width: 0; width: auto !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important;
  border-radius: 22px !important; resize: none !important;
  min-height: 44px !important; max-height: none !important; line-height: 22px !important;
  padding: 11px 12px 11px 4px !important; padding-inline: 4px 12px !important;
  overflow-y: hidden; scrollbar-width: none;
}
html:root .cmp-field > textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
html:root .cmp-field > textarea.is-tall { overflow-y: auto !important; }
html:root .cmp-field.can-expand > textarea, html:root .cmp-field.is-full > textarea { padding-inline-end: 38px !important; }
html:root .cmp-emoji, html:root .cmp-expand {
  flex: 0 0 auto; border: 0; background: transparent; color: #8a939c; padding: 0; display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html:root .cmp-emoji { width: 42px; height: 44px; margin-inline-start: 2px; }
html:root .cmp-emoji svg { width: 25px; height: 25px; }
html:root .cmp-emoji:active, html:root .cmp-expand:active { color: #3a6f8f; }
html:root .cmp-expand {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 50%;
  opacity: 0; pointer-events: none; transform: scale(.7); transition: opacity .2s ease, transform .2s ease;
}
html:root .cmp-expand svg { width: 17px; height: 17px; }
html:root .cmp-field.can-expand .cmp-expand, html:root .cmp-field.is-full .cmp-expand { opacity: 1; pointer-events: auto; transform: none; }
html:root .ai-composer, html:root .cb-compose { position: relative; }
html:root .cmp-emoji-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
  max-height: min(290px, 42vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 10px;
  background: rgba(255, 255, 255, .94); border-radius: 22px;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: .5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 12px 30px rgba(20, 35, 45, .20), 0 2px 8px rgba(20, 35, 45, .10);
  opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s linear .22s;
}
html:root .cmp-emoji-panel.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s ease, transform .22s cubic-bezier(.22,.61,.36,1); }
html:root .cmp-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
html:root .cmp-emoji-grid + .cmp-emoji-grid { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .06); }
html:root .cmp-emoji-grid button {
  border: 0; background: transparent; font-size: 26px; line-height: 1; height: 42px; border-radius: 10px; padding: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
html:root .cmp-emoji-grid button:active { background: rgba(0, 0, 0, .07); }
/* full screen: the box covers the conversation up to the title bar */
html.cmp-full-ai #view-ai .ai-messages, html.cmp-full-pc #pchat-window #pchat-msgs, html.cmp-full-pc #pchat-window .cb-ai { visibility: hidden !important; }
html:root .cmp-field.is-full > textarea { transition: height .25s cubic-bezier(.22,.61,.36,1); }
html.ai-full #view-ai .cmp-field.can-expand > #ai-input, html.ai-full #view-ai .cmp-field.is-full > #ai-input,
html:root .chat-window .cmp-field.can-expand > #pchat-input, html:root .chat-window .cmp-field.is-full > #pchat-input { padding-inline-end: 40px !important; }

/* v1236 — straws frozen at another centre: teal RECEIVED stamp (same shape as the orange TRANSFERRED one) */
html:root .ext-stamp.in-stamp { border-color: #138A8A !important; color: #138A8A !important; }
html:root .ext-stamp.in-stamp i { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
html:root .pf-in-card { border-color: rgba(19, 138, 138, .38) !important; }
html:root .pf-origin-line { color: #138A8A !important; font-weight: 600; }
html:root .fz-ext-field #fz-ext-wrap { margin-top: 8px; }
html:root .fz-ext-field #fz-ext-from { width: 100%; }

/* v1237 — tank names on a 3-D ribbon: raised in the middle (dark hollow underneath); the name on the raised part is the selected tank */
html:root .tanks-jump.tank-ribbon {
  position: relative; display: block; overflow: hidden; height: 70px; padding: 0 !important; margin: 6px 0 0 !important;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; --rib-edge: #ECEFF2;
}
html:root .tank-ribbon .tank-ribbon-bg { position: absolute; left: 0; top: 0; pointer-events: none; }
html:root .tank-ribbon .tanks-jump-chip {
  position: absolute; left: 0; top: 0; min-height: 0 !important; padding: 4px 6px !important; margin: 0;
  background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 8px;
  color: #33414c !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.1;
  transform-origin: 50% 50%; will-change: transform, opacity; transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
html:root .tank-ribbon .tanks-jump-chip.is-on { color: #0E6E8C !important; font-weight: 800 !important; font-size: 15px !important; }
html[data-look="plain"] .tank-ribbon .tanks-jump-chip, html[data-look="plain"] .tank-ribbon .tanks-jump-chip.is-on { background: transparent !important; }

/* v1237 — emoji panel: plain solid white (no glass) */
html:root .cmp-emoji-panel { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(0,0,0,.06) !important; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* v1242 — tanks page, more compact:
   1) the two count boxes are one line each (number and word side by side), about half as tall;
   2) the tank cards are as short as they can be: smaller dewar, tighter spacing;
   3) the straight line under the cards (their shadow cut off by the scrolling strip's edge) is gone:
      the strip has room underneath for the shadow, and the ribbon is pulled up into that room */
html:root #view-tanks #tanks-summary .sum-cell {
  display: flex !important; align-items: baseline; justify-content: center; gap: 7px;
  padding: 7px 10px !important; min-height: 0 !important;
}
html:root #view-tanks #tanks-summary .sum-v { font-size: 20px !important; line-height: 1.2 !important; }
html:root #view-tanks #tanks-summary .sum-k { margin-top: 0 !important; font-size: 12.5px !important; }
html:root #view-tanks .tank-slide .tank-visual-card { padding: 9px 11px 10px !important; gap: 3px !important; }
html:root #view-tanks .tank-slide .tank-visual { flex: 0 0 84px !important; height: 84px !important; }
html:root #view-tanks .tank-slide .tank-visual-svg { width: 50px !important; height: 76px !important; }
html:root #view-tanks .tank-slide .tank-level-gauge { height: 50px !important; }
html:root #view-tanks .tank-slide .tank-n2-percent { top: -7px !important; font-size: 11.5px; }
html:root #view-tanks .tank-slide .tank-visual-actions { top: 0 !important; transform: scale(.88); transform-origin: top right; }
html:root #view-tanks .tank-slide .tank-card-info .tank-head { min-height: 0 !important; margin-bottom: 0 !important; }
html:root #view-tanks .tank-slide .tank-name { font-size: 15px !important; line-height: 1.2; }
html:root #view-tanks .tank-slide .tank-usable-capacity { margin-top: 0 !important; }
html:root #view-tanks .tank-slide .tank-usable-capacity strong { font-size: 19px !important; line-height: 1.2; }
html:root #view-tanks .tank-slide .tank-n2-row { margin-top: 1px !important; }
html:root #view-tanks .tank-slide .tank-n2-row strong { font-size: 15px !important; }
html:root #view-tanks .tank-slide .tank-n2-meta { margin-top: 1px !important; line-height: 1.3 !important; }
html:root #view-tanks .tanks.tank-carousel { padding-bottom: 30px !important; margin-bottom: -24px !important; }
html:root #view-tanks .tanks-jump.tank-ribbon { position: relative; z-index: 1; }
html:root #view-tanks .tank-stats-card { min-height: 0 !important; }
html:root #view-tanks .tank-stats-card svg { width: 46px; height: 46px; }
/* v1243: a little more room above the LN2 percentage */
html:root #view-tanks .tank-slide .tank-visual { margin-top: 12px !important; }
html:root #view-tanks .tank-slide .tank-visual-actions { top: -6px !important; }

/* v1250 — pressed menu options tip towards the finger (the touched side goes down) instead of the whole box sinking */
html:root .tile.is-tilt, html:root .pf-tool.is-tilt, html:root .pf-action.is-tilt, html:root .tanks-jump-chip.is-tilt {
  transform: perspective(300px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(.97) !important;
  transition: transform .11s ease-out, background-color .1s ease, box-shadow .1s ease !important;
}
html:root .tile:active:not(.is-tilt), html:root .pf-tool:active:not(.is-tilt) { transform: none; }
html:root .tile, html:root .pf-tool, html:root .pf-action {
  transform-style: flat; backface-visibility: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;   /* a long press no longer selects the words */
  transition: transform .42s cubic-bezier(.34, 1.45, .5, 1), background-color .3s ease, box-shadow .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  html:root .tile.is-tilt, html:root .pf-tool.is-tilt, html:root .pf-action.is-tilt { transform: scale(.97) !important; }
}

/* v1252 — the tank row no longer uses the browser's own snapping at all. It was switched off while the finger was
   down and back on after the glide; on some Android Chrome builds switching it back on made the browser re-snap to
   the card it had snapped to BEFORE the swipe -- the row "stuck" and jumped back to the previous tank.
   The release glide (and the scrollend safety net) already place every card exactly in the middle. */
html:root .tanks-panel .tanks, html:root .tanks-panel .tanks.tc-free { scroll-snap-type: none !important; }

/* v1253 — canister and cane cards take exactly the patient straw card's look: same surface, same two-layer shadow,
   no glass edge or sheen; canisters one shade darker. The pile still fades the shadow through --stack-alpha. */
html:root:root #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1,
html:root:root #view-tank .tank-canister-scroll-layer .tank-cane > .acc-head {
  background: #EDEFF1 !important; background-image: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 10px 24px rgba(30, 40, 50, calc(var(--stack-alpha, .35) * .8)),
              0 2px 6px rgba(30, 40, 50, calc(var(--stack-alpha, .35) * .54)) !important;
}
html:root:root #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1 { background: #E1E4E8 !important; }

/* v1254 — canister and cane cards one more shade darker each (canister darkest, cane middle, straw lightest);
   the big glass tank card is a little taller at the bottom, and the canisters start that much lower */
html:root:root #view-tank .tank-canister-scroll-layer .tank-cane > .acc-head { background: #E1E4E8 !important; }
html:root:root #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1 { background: #D5D9DE !important; }
html:root:root #view-tank .tank-detail-overview-overlay { padding-bottom: 34px !important; }

/* v1256 — unified option system (plain look)
   1) final action  = .btn-primary : dark slate glass, white text, soft shadow
   2) side action   = .btn-secondary : light slate glass (Tank Excel style)
   3) selection     = chips / tabs / dates / dropdown / time cells : selected = light slate glass, hairline border, bold text */
html:root[data-look="plain"][data-look="plain"] .btn-primary{background:rgba(78,90,103,.86) !important;background-image:none !important;border:1px solid rgba(255,255,255,.28) !important;-webkit-backdrop-filter:blur(22px) saturate(105%) !important;backdrop-filter:blur(22px) saturate(105%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(20,30,40,.26),0 2px 4px rgba(20,30,40,.16) !important;color:#fff !important;text-shadow:none !important}
html:root[data-look="plain"][data-look="plain"] .btn-primary:active{background:rgba(62,72,83,.92) !important}
html:root[data-look="plain"][data-look="plain"] .btn-secondary{background:rgba(74,85,96,.16) !important;background-image:none !important;border:1px solid rgba(74,85,96,.22) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 10px rgba(20,49,44,.08) !important;color:#1F2A33 !important;text-shadow:none !important}
html:root[data-look="plain"][data-look="plain"] .btn-secondary:active{background:rgba(74,85,96,.24) !important}
html:root[data-look="plain"][data-look="plain"] .chip-pick:not(.is-on),html:root[data-look="plain"][data-look="plain"] .cb-tab:not(.is-on){background:#F4F5F7 !important;background-image:none !important;border:.5px solid rgba(74,85,96,.12) !important;box-shadow:0 1px 3px rgba(20,30,40,.06) !important;color:#3A4550 !important}
html:root[data-look="plain"][data-look="plain"] .chip-pick,html:root[data-look="plain"][data-look="plain"] .cb-tab{border-radius:999px !important}
html:root[data-look="plain"][data-look="plain"] .chip-pick.is-on,html:root[data-look="plain"][data-look="plain"] .cb-tab.is-on,html:root[data-look="plain"][data-look="plain"] .dp-d.is-on,html:root[data-look="plain"][data-look="plain"] .dd-opt.is-on,html:root[data-look="plain"][data-look="plain"] .tp-cell.is-on,html:root[data-look="plain"][data-look="plain"] .genetic-tab.is-on{background:rgba(74,85,96,.20) !important;background-image:none !important;border:.5px solid rgba(74,85,96,.30) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(20,30,40,.10) !important;color:#1F2A33 !important;text-shadow:none !important;font-weight:700 !important}
html:root[data-look="plain"][data-look="plain"] .chip-pick.is-on *,html:root[data-look="plain"][data-look="plain"] .cb-tab.is-on *,html:root[data-look="plain"][data-look="plain"] .dp-d.is-on *,html:root[data-look="plain"][data-look="plain"] .dd-opt.is-on *,html:root[data-look="plain"][data-look="plain"] .tp-cell.is-on *,html:root[data-look="plain"][data-look="plain"] .genetic-tab.is-on *{color:inherit !important}
html:root[data-look="plain"][data-look="plain"] .chip-pick.is-on:active,html:root[data-look="plain"][data-look="plain"] .cb-tab.is-on:active,html:root[data-look="plain"][data-look="plain"] .dp-d.is-on:active,html:root[data-look="plain"][data-look="plain"] .dd-opt.is-on:active,html:root[data-look="plain"][data-look="plain"] .tp-cell.is-on:active,html:root[data-look="plain"][data-look="plain"] .genetic-tab.is-on:active{background:rgba(74,85,96,.28) !important}

/* v1257 — same selection style for select-chips (dd-chip), treatment plans, lab tabs, pick chips */
html:root[data-look="plain"][data-look="plain"] .dd-chip:not(.is-on),html:root[data-look="plain"][data-look="plain"] .lab-control-tab:not(.is-on),html:root[data-look="plain"][data-look="plain"] .pick-chip:not(.is-on),
html:root[data-look="plain"][data-look="plain"] #view-register .treatment-plan-chip:not(.is-on),html:root[data-look="plain"][data-look="plain"] #view-patient-edit .treatment-plan-chip:not(.is-on),html:root[data-look="plain"][data-look="plain"] .treatment-plan-chip:not(.is-on){background:#F4F5F7 !important;background-image:none !important;border:.5px solid rgba(74,85,96,.12) !important;box-shadow:0 1px 3px rgba(20,30,40,.06) !important;color:#3A4550 !important;-webkit-text-fill-color:#3A4550 !important;text-shadow:none !important}
html:root[data-look="plain"][data-look="plain"] .dd-chip.is-on,html:root[data-look="plain"][data-look="plain"] .lab-control-tab.is-on,html:root[data-look="plain"][data-look="plain"] .pick-chip.is-on,
html:root[data-look="plain"][data-look="plain"] #view-register .treatment-plan-chip.is-on,html:root[data-look="plain"][data-look="plain"] #view-patient-edit .treatment-plan-chip.is-on,html:root[data-look="plain"][data-look="plain"] .treatment-plan-chip.is-on{background:rgba(74,85,96,.20) !important;background-image:none !important;border:.5px solid rgba(74,85,96,.30) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(20,30,40,.10) !important;color:#1F2A33 !important;-webkit-text-fill-color:#1F2A33 !important;text-shadow:none !important;font-weight:700 !important}
html:root[data-look="plain"][data-look="plain"] .dd-chip.is-on *,html:root[data-look="plain"][data-look="plain"] .lab-control-tab.is-on *,html:root[data-look="plain"][data-look="plain"] .pick-chip.is-on *,html:root[data-look="plain"][data-look="plain"] .treatment-plan-chip.is-on *{color:inherit !important;-webkit-text-fill-color:inherit !important}
html:root[data-look="plain"][data-look="plain"] .dd-chip.is-on:active,html:root[data-look="plain"][data-look="plain"] .treatment-plan-chip.is-on:active{background:rgba(74,85,96,.28) !important}
html:root[data-look="plain"][data-look="plain"] .treatment-plan-chip,html:root[data-look="plain"][data-look="plain"] .pick-chip,html:root[data-look="plain"][data-look="plain"] .lab-control-tab{border-radius:999px !important}
html:root[data-look="plain"][data-look="plain"] .dd-chip{border-radius:24px !important}
html:root[data-look="plain"][data-look="plain"] .dd-chip,html:root[data-look="plain"][data-look="plain"] .dd-chip.is-on{font-weight:600 !important}
html:root[data-look="plain"][data-look="plain"] .dd-chip.is-on{font-weight:700 !important}

/* v1258 — glass bottom navigation (plain look): clear frosted glass, bright rim, soft shadow */
html:root[data-look="plain"][data-look="plain"] .tabbar{background:rgba(255,255,255,.34) !important;background-image:none !important;-webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important;border:1px solid rgba(255,255,255,.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 28px rgba(20,30,40,.18),0 2px 6px rgba(20,30,40,.10) !important}

/* v1259 — tilt shows as a real tilt: the touched side is shaded (pressed down, closer to the surface), the raised side
   catches light and casts a longer shadow; pressing the middle sinks the whole box instead */
html:root .tile.is-tilt, html:root .pf-tool.is-tilt, html:root .pf-action.is-tilt, html:root .tanks-jump-chip.is-tilt {
  box-shadow:
    inset calc(var(--tsx, 0) * -22px) calc(var(--tsy, 0) * -22px) 22px -8px rgba(20, 30, 40, .55),
    inset calc(var(--tsx, 0) * 12px) calc(var(--tsy, 0) * 12px) 14px -6px rgba(255, 255, 255, .95),
    calc(var(--tsx, 0) * -9px) calc(var(--tsy, 0) * -6px + 8px) 16px rgba(20, 30, 40, .30) !important;
}
html:root .tile.is-press, html:root .pf-tool.is-press, html:root .pf-action.is-press, html:root .tanks-jump-chip.is-press {
  transform: scale(.955) !important;
  transition: transform .11s ease-out, box-shadow .1s ease !important;
  box-shadow: inset 0 3px 10px rgba(20, 30, 40, .16), 0 1px 4px rgba(20, 30, 40, .14) !important;
}

/* v1263 — the header banner (photo, name, role, clinic) is glass like the bottom navigation (plain look) */
html:root[data-look="plain"][data-look="plain"] .clinic-header .hero{background:rgba(255,255,255,.5) !important;background-image:none !important;-webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important;border:1px solid rgba(255,255,255,.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 28px rgba(20,30,40,.18),0 2px 6px rgba(20,30,40,.10) !important}

/* v1264 — the options of a pick list inside a sheet (e.g. "Choose tank") get the same light colour as the rows of the
   dropdown lists (Destination tank): #EDEFF1, thin pale edge, soft shadow */
html:root[data-look="plain"][data-look="plain"] .sheet-wrap .sheet-actions .btn.sheet-choice{background:#EDEFF1 !important;background-image:none !important;border:.34px solid rgba(255,255,255,.40) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:inset 0 .5px 0 rgba(255,255,255,.65),0 4px 12px rgba(30,40,50,.12) !important;color:#1F2A33 !important;text-shadow:none !important;font-weight:500 !important}
html:root[data-look="plain"][data-look="plain"] .sheet-wrap .sheet-actions .btn.sheet-choice:active{background:#E3E6E9 !important}

/* v1266 — lag fix: while a sheet / pop-up is open (or closing) the glass header and navigation sit behind a dimmed, blurred
   page anyway, so they stop re-blurring on every animation frame (three stacked live blurs made the sheets stutter) */
html:has(.sheet-wrap:not(.hidden)):root[data-look="plain"][data-look="plain"] .tabbar,
html:has(.chat-win-wrap:not(.hidden)):root[data-look="plain"][data-look="plain"] .tabbar{background:rgba(240,242,244,.9) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html:has(.sheet-wrap:not(.hidden)):root[data-look="plain"][data-look="plain"] .clinic-header .hero,
html:has(.chat-win-wrap:not(.hidden)):root[data-look="plain"][data-look="plain"] .clinic-header .hero{background:rgba(240,242,244,.9) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* v1267 — the clinic calendar is a centred window made of the same glass as the bottom sheets (date picker) */
.cc-modal-wrap { align-items: center !important; justify-content: center; padding: 0 12px; }
.cc-modal-wrap .cc-modal-sheet {
  border-radius: 26px !important; width: min(440px, 100%) !important; max-height: 84vh !important; margin: 0 auto;
  padding: 10px 14px 16px !important;
  animation: ccModalIn .30s cubic-bezier(.25, .8, .3, 1) !important;
}
@keyframes ccModalIn { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.cc-modal-wrap.is-closing .cc-modal-sheet { transform: scale(.97) !important; }
.cc-modal-view.view { display: block !important; padding: 0 !important; animation: none !important; transform: none !important; opacity: 1 !important; }
html:root:root:root .cc-modal-wrap .cc-modal-view .list-panel, html:root:root:root .cc-modal-wrap .cc-modal-view .unified-panel { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 4px 6px 0 !important; margin: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root:root:root .cc-modal-wrap .cc-modal-view .view-head { background: transparent !important; box-shadow: none !important; }
.cc-modal-view .view-head { margin: 0 0 8px !important; padding: 0 !important; }
.cc-modal-view .view-title { font-size: 18px !important; margin: 0 0 4px !important; }
.cc-modal-view .section-title-note { font-size: 12.5px !important; }

/* v1268 — clinic-calendar window: rounded bottom corners too; the page, header and navigation behind it can't be touched
   (they ignore touches, so the full-screen backdrop catches them) and header + navigation are not dimmed by the backdrop */
html:root:root:root .cc-modal-wrap .cc-modal-sheet { border-radius: 26px 26px 26px 26px !important; overflow: hidden auto; }
html:has(.cc-modal-wrap:not(.hidden)) .clinic-header,
html:has(.cc-modal-wrap:not(.hidden)) .tabbar,
html:has(.cc-modal-wrap:not(.hidden)) #dots { pointer-events: none !important; }
html:has(.cc-modal-wrap:not(.hidden)) .tabbar { z-index: 101 !important; }
html:has(.cc-modal-wrap:not(.hidden)) body { overflow: hidden; }

/* v1270 — calendar window: same glass/colours as the date-picker sheet, no extra text, smaller */
html:root:root:root .cc-modal-wrap .cc-modal-sheet {
  background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.18)) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1);
  border: 0 !important; border-top: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: inset 0 .75px 0 rgba(255,255,255,.85), 0 18px 40px rgba(10,20,30,.16) !important;
  border-radius: 30px !important; padding: 10px 14px 18px !important; max-height: none !important;
}
.cc-modal-wrap .sheet-scrim { background: rgba(20,30,40,.16) !important; }
.cc-modal-view .section-title-note, .cc-modal-view .cc-note { display: none !important; }
.cc-modal-view .view-head { margin: 2px 0 6px !important; }
.cc-modal-view .view-title { text-align: center; font-size: 17px !important; margin: 0 !important; }
html:root:root:root .cc-modal-wrap .cc-grid { background: transparent !important; box-shadow: none !important; padding: 8px 0 4px !important; }
html:root:root:root .cc-modal-wrap .cc-nav,
html:root:root:root .cc-modal-wrap .cc-day:not(.is-empty) { background: #EDEFF1 !important; box-shadow: 0 6px 14px rgba(30,40,50,.14), 0 1px 4px rgba(30,40,50,.10) !important; }
html:root:root:root .cc-modal-wrap .cc-nav { border-radius: 12px; }
html:root:root:root .cc-modal-wrap .cc-day:not(.is-empty) { border-radius: 11px; }

/* v1277 — the day pop-up over the calendar window: nothing behind it is blurred (its own glass is enough) */
html.cc-open:has(#cc-pop-wrap:not([data-exit])) body > *:not(#cc-pop-wrap) { filter: none !important; transition: none !important; }
.cc-pop-wrap { transition: opacity .16s ease; }
/* close cross, top right of the calendar window */
.cc-modal-x { position: absolute; top: 10px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 11px; border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.55); color: #3d4852; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 4px 10px rgba(30,40,50,.16); }
.cc-modal-x:active { background: rgba(255,255,255,.8); }

/* v1278 — done / cancelled marks on the calendar day cards: a faint tick or cross on the right, plus small action chips */
.cc-pop-row { position: relative; overflow: hidden; cursor: pointer; }
.cc-pop-row > * { position: relative; z-index: 1; }
.cc-pop-row.is-done::after, .cc-pop-row.is-cancel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat;
  background-position: right 22px center; background-size: auto 62%; opacity: .2; }
html[dir="rtl"] .cc-pop-row.is-done::after, html[dir="rtl"] .cc-pop-row.is-cancel::after { background-position: right 22px center; }
.cc-pop-row.is-done::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M12 34 L26 48 L53 17' fill='none' stroke='%231E8E5A' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.cc-pop-row.is-cancel::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M16 16 L48 48 M48 16 L16 48' fill='none' stroke='%23C0392B' stroke-width='9' stroke-linecap='round'/></svg>"); }
.cc-pop-acts { display: flex; gap: 8px; margin-top: 8px; }
.cc-pop-act { border: 0; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; background: rgba(74,85,96,.10); color: #3d4852; }
.cc-pop-act.is-ok { color: #1E8E5A; background: rgba(30,142,90,.12); }
.cc-pop-act.is-no { color: #C0392B; background: rgba(192,57,43,.10); }
.cc-pop-act:active { transform: scale(.96); }

/* v1279 — the ICM logo sits on the other side of the clinic name (after the name and its arrow) */
.clinic-header .hero-clinic-select .hero-name { order: 1; }
.clinic-header .hero-clinic-select .hero-clinic-chevron { order: 2; }
.clinic-header .hero-clinic-select .hero-logo { order: 3; }

/* v1280: "Plain + glass" look: plain colours, a calm picture behind, frosted-glass home cards */
.ap-prev-plainglass { background: linear-gradient(135deg, #C9D3DA, #AEBCC6); }
.ap-prev-plainglass .ap-pane { background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 5px 10px rgba(30,40,50,.12); }
html:root[data-pg="1"][data-look="plain"] #bg-layer{display:block !important;background-image:url("assets/bg-plain.jpg") !important;background-size:cover !important;background-position:center !important;opacity:1 !important}
html:root[data-pg="1"][data-look="plain"] #bg-layer::after{display:none !important}
html:root[data-pg="1"][data-look="plain"],html:root[data-pg="1"][data-look="plain"] body,html:root[data-pg="1"][data-look="plain"] body.has-bg{background:transparent !important}
html:root[data-pg="1"][data-look="plain"] .menu-group,html:root[data-pg="1"][data-look="plain"] body.is-moving .menu-group{background:rgba(255,255,255,.44) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;transition:none !important;border:1px solid rgba(255,255,255,.6) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px rgba(30,40,50,.18) !important}
html:root[data-pg="1"][data-look="plain"] .menu-group .tile{background:rgba(255,255,255,.28) !important;box-shadow:0 2px 6px rgba(30,40,50,.10) !important}
html:root[data-pg="1"][data-look="plain"] .menu-group .tile:active{background:rgba(255,255,255,.5) !important}
/* v1281: no backdrop blur at all in this look (it appeared late, after a pause, when the home page opened): the picture is already soft, so a translucent white fill gives the same glass and is there from the first frame */
html:root[data-pg="1"][data-look="plain"] .menu-group .tile{transition:none !important}


/* v1285 — canister and cane cards: glass that shows ONLY the background.
   Under the glass sits the page background itself (flat page colour in Plain; in Plain + glass the same picture, lined up with the page
   by icmGlassAlign), so a card in front hides the card behind it completely. Cane = as light as the option buttons; canister two shades darker. */
html:root:root:root #view-tank .tank-canister-scroll-layer .tank-cane > .acc-head {
  background-color: #DCE0E4 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 100%), linear-gradient(rgba(74,85,96,.08), rgba(74,85,96,.08)) !important;
  border: 1px solid rgba(74,85,96,.22) !important;   /* edge and shadow exactly like the option buttons (Tank Excel) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 10px rgba(20,49,44,.08) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html:root:root:root #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1 {
  background-color: #DCE0E4 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.04) 100%), linear-gradient(rgba(74,85,96,.22), rgba(74,85,96,.22)) !important;
  border: 1px solid rgba(74,85,96,.22) !important;   /* edge and shadow exactly like the option buttons (Tank Excel) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 10px rgba(20,49,44,.08) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html:root[data-pg="1"][data-look="plain"]:root:root #view-tank .tank-canister-scroll-layer .tank-cane > .acc-head {
  background-image: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 100%), linear-gradient(rgba(74,85,96,.08), rgba(74,85,96,.08)), url("assets/bg-plain.jpg") !important;
  background-attachment: scroll !important; background-repeat: no-repeat !important;
  background-size: auto, auto, var(--bgw, 100vw) var(--bgh, 100vh) !important; background-position: 0 0, 0 0, var(--bgx, 0px) var(--bgy, 0px) !important;
}
html:root[data-pg="1"][data-look="plain"]:root:root #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1 {
  background-image: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.04) 100%), linear-gradient(rgba(74,85,96,.22), rgba(74,85,96,.22)), url("assets/bg-plain.jpg") !important;
  background-attachment: scroll !important; background-repeat: no-repeat !important;
  background-size: auto, auto, var(--bgw, 100vw) var(--bgh, 100vh) !important; background-position: 0 0, 0 0, var(--bgx, 0px) var(--bgy, 0px) !important;
}

/* v1286 — Plain + glass: the home tiles are velvet white — a soft, matte, almost-opaque white with a faint top-to-bottom fall-off,
   a whisper of an edge and a wide, low shadow, so they sit softly on the frosted group card. */
html:root[data-pg="1"][data-look="plain"]:root .menu-group .tile {
  background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(250,251,252,.94) 55%, rgba(243,245,247,.92) 100%) !important;
  border: 0.5px solid rgba(255,255,255,.9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 2px rgba(30,40,50,.04),
              0 6px 16px rgba(30,40,50,.08), 0 1px 3px rgba(30,40,50,.06) !important;
}
html:root[data-pg="1"][data-look="plain"]:root .menu-group .tile:active {
  background: linear-gradient(180deg, rgba(246,247,249,.97) 0%, rgba(238,240,243,.95) 100%) !important;
  box-shadow: inset 0 1px 2px rgba(30,40,50,.06), 0 2px 6px rgba(30,40,50,.07) !important;
}


/* v1288 — Users menu: clinic cards share the tank carousel look */
html:root #view-users-management #uc-summary .sum-cell {
  display: flex !important; align-items: baseline; justify-content: center; gap: 7px;
  padding: 7px 10px !important; min-height: 0 !important;
}
html:root #view-users-management #uc-summary .sum-v { font-size: 20px !important; line-height: 1.2 !important; }
html:root #view-users-management #uc-summary .sum-k { margin-top: 0 !important; font-size: 12.5px !important; }
html:root #view-users-management .tank-slide .tank-visual-card { padding: 9px 11px 10px !important; gap: 3px !important; }
html:root #view-users-management .tank-slide .tank-visual { flex: 0 0 84px !important; height: 84px !important; }
html:root #view-users-management .tank-slide .tank-visual-svg { width: 50px !important; height: 76px !important; }
html:root #view-users-management .tank-slide .tank-level-gauge { height: 50px !important; }
html:root #view-users-management .tank-slide .tank-n2-percent { top: -7px !important; font-size: 11.5px; }
html:root #view-users-management .tank-slide .tank-visual-actions { top: 0 !important; transform: scale(.88); transform-origin: top right; }
html:root #view-users-management .tank-slide .tank-card-info .tank-head { min-height: 0 !important; margin-bottom: 0 !important; }
html:root #view-users-management .tank-slide .tank-name { font-size: 15px !important; line-height: 1.2; }
html:root #view-users-management .tank-slide .tank-usable-capacity { margin-top: 0 !important; }
html:root #view-users-management .tank-slide .tank-usable-capacity strong { font-size: 19px !important; line-height: 1.2; }
html:root #view-users-management .tank-slide .tank-n2-row { margin-top: 1px !important; }
html:root #view-users-management .tank-slide .tank-n2-row strong { font-size: 15px !important; }
html:root #view-users-management .tank-slide .tank-n2-meta { margin-top: 1px !important; line-height: 1.3 !important; }
html:root #view-users-management .tanks.tank-carousel { padding-bottom: 30px !important; margin-bottom: -24px !important; }
html:root #view-users-management .tanks-jump.tank-ribbon { position: relative; z-index: 1; }
html:root #view-users-management .tank-stats-card { min-height: 0 !important; }
html:root #view-users-management .tank-stats-card svg { width: 46px; height: 46px; }
html:root #view-users-management .tank-slide .tank-visual { margin-top: 12px !important; }
html:root #view-users-management .tank-slide .tank-visual-actions { top: -6px !important; }
html:root #view-users-management .uc-visual { display: flex !important; align-items: center; justify-content: center; position: relative; color: #55626f; }
html:root #view-users-management .uc-visual svg { width: 52px; height: 52px; }
html:root #view-users-management .uc-visual .tier-badge { position: absolute; top: -2px; inset-inline-end: 0; font-size: 10.5px; }
html:root #view-users-management .tanks-jump-chip { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-staff-management .user-row > .row-avatar-sm, #view-staff-management .user-row > img.row-avatar-sm { flex: 0 0 auto; margin-inline-end: 10px; }
html:root #view-staff-management .user-row .row-main { min-width: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 1px; }
html:root #view-staff-management .user-row > .row-avatar-sm { flex: 0 0 auto !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; object-fit: cover; margin-inline-end: 10px; box-shadow: 0 1px 4px rgba(20,30,40,.25), inset 0 0 0 1px rgba(255,255,255,.7); }
html:root #view-staff-management .user-row > div.row-avatar-sm { display: flex !important; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(145deg, #8794a1, #55626f); }

/* v1289 — personalised medicine, phase 1 (chips, dose row, protocol list, data-sharing options) */
.pm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.pm-chips .chip-pick{border:1px solid rgba(31,41,51,.18)}
html[data-look="plain"] .pm-chips .chip-pick{background:rgba(255,255,255,.6);color:#1f2933}
html[data-look="plain"] .pm-chips .chip-pick.is-on{background:#1f2933;color:#fff;border-color:#1f2933}
.pm-row{display:flex;gap:8px;align-items:center}.pm-row>input{flex:1;min-width:0}.pm-row>select{flex:0 0 38%}.pm-row>.btn{flex:0 0 auto;width:auto;padding-inline:16px}
.pm-link{background:none;border:0;padding:0;font-size:13px;color:var(--accent,#0E7C6B);text-decoration:underline;margin-top:6px;cursor:pointer}
.pm-proto-row{display:flex;align-items:center;gap:6px;padding:9px 2px;border-bottom:1px solid rgba(31,41,51,.08)}
.pm-proto-row .pm-proto-name{flex:1;font-size:15px}
.pm-add-row{margin-bottom:8px}
.pm-opt{display:flex;width:100%;text-align:start;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid rgba(31,41,51,.14);background:rgba(255,255,255,.55);margin-top:8px;color:inherit;font:inherit;cursor:pointer}
.pm-opt.is-on{border-color:#1f2933;box-shadow:inset 0 0 0 1px #1f2933}
.pm-dot{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid #1f2933;margin-top:2px;box-sizing:border-box}
.pm-opt.is-on .pm-dot{background:radial-gradient(circle,#1f2933 0 45%,transparent 50%)}
.pm-opt-txt b{display:block;font-size:14.5px;margin-bottom:3px}.pm-opt-txt span{font-size:12.5px;color:#55626f;line-height:1.7}
.pm-sub{font-weight:700;font-size:15px;margin:18px 2px 6px}
.pm-prev>.field{flex:1;min-width:0}

/* v1290 — personalised medicine, phases 2-5 (protocol results, data completeness, grade classes, similar patients) */
.pm-tabs{margin-bottom:10px}
.pm-ctl{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.pm-summary{display:flex;gap:8px;margin:6px 0 10px}
.pm-sum-cell{flex:1;min-width:0;text-align:center;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(31,41,51,.1)}
.pm-sum-cell b{display:block;font-size:20px;line-height:1.2}
.pm-sum-cell span{font-size:11.5px;color:#55626f}
.pm-card{padding:12px;border-radius:14px;border:1px solid rgba(31,41,51,.12);background:rgba(255,255,255,.6);margin-top:8px}
.pm-card.is-few{opacity:.78}
.pm-card-head{display:flex;align-items:baseline;gap:8px}
.pm-card-name{flex:1;min-width:0;font-weight:700;font-size:15px}
.pm-card-rate{font-weight:800;font-size:19px}
.pm-card-sub{font-size:12.5px;color:#55626f;margin-top:6px;line-height:1.7}
.pm-bar{position:relative;height:9px;border-radius:6px;background:rgba(31,41,51,.08);margin-top:7px;overflow:hidden}
.pm-bar-thin{height:6px;margin-top:4px}
.pm-bar-fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:6px;background:#0E7C6B}
.pm-bar-fill.is-low{background:#d9822b}
.pm-bar-ci{position:absolute;inset-block:0;background:rgba(14,124,107,.22);border-radius:6px}
.pm-badge{display:inline-block;margin-top:7px;font-size:11.5px;padding:3px 8px;border-radius:9px;background:rgba(217,130,43,.14);color:#9a5410}
.pm-drugs{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(31,41,51,.14)}
.pm-drugs-t{font-size:12px;font-weight:700;color:#55626f;margin-bottom:3px}
.pm-drug{font-size:13px;line-height:1.8;direction:ltr;text-align:start;unicode-bidi:plaintext}
.pm-model{margin-top:12px;padding:12px;border-radius:14px;background:rgba(14,124,107,.06);border:1px solid rgba(14,124,107,.18)}
.pm-model .pm-sub{margin-top:0}
.pm-progress{height:8px;border-radius:6px;background:rgba(31,41,51,.1);overflow:hidden;margin-top:6px}
.pm-progress b{display:block;height:100%;background:#0E7C6B;border-radius:6px}
.pm-factor{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;border-bottom:1px solid rgba(31,41,51,.06)}
.pm-factor:last-child{border-bottom:0}
.pm-factor-name{flex:1;min-width:0}
.pm-factor-or{font-weight:700;direction:ltr}
.pm-factor-arrow{font-size:10px;width:12px}
.pm-factor.is-up .pm-factor-arrow{color:#0E7C6B}.pm-factor.is-down .pm-factor-arrow{color:#c0392b}
.pm-foot{margin-top:12px}
.pm-fields{display:flex;flex-direction:column;gap:9px;margin:8px 0 6px}
.pm-field-top{display:flex;justify-content:space-between;font-size:13.5px}
.pm-miss{color:#9a5410!important;white-space:normal!important}
.pm-grades{display:flex;flex-direction:column}
.pm-grade-row{padding:9px 2px;border-bottom:1px solid rgba(31,41,51,.08)}
.pm-grade-row.is-none .pm-grade-name b{color:#c0392b}
.pm-grade-name{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pm-grade-name b{font-size:15.5px;direction:ltr}
.pm-grade-name span{font-size:12px;color:#55626f}
.pm-grade-chips{margin-top:6px}
.pm-grade-chips .chip-pick{padding:5px 11px;font-size:13px}
html[data-look="plain"] .pm-tabs .chip-pick,html[data-look="plain"] .pm-ctl .chip-pick{background:rgba(255,255,255,.6);color:#1f2933}
html[data-look="plain"] .pm-tabs .chip-pick.is-on,html[data-look="plain"] .pm-ctl .chip-pick.is-on{background:#1f2933;color:#fff;border-color:#1f2933}
#et-result-form .pm-row{align-items:flex-start}
#et-result-hint{margin:2px 2px 12px}
.pm-legend{display:flex;flex-direction:column;gap:2px;margin:4px 0 6px;padding:8px 12px;border-radius:12px;background:rgba(31,41,51,.04)}
.pm-legend-row{display:flex;justify-content:space-between;font-size:13px}
.pm-legend-row b{direction:ltr;font-weight:600}

/* v1295: grouped settings (captioned cards, value rows, real on/off switch) */
#view-settings > .list-panel { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
#view-settings .st-cap { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 18px 10px 8px; }
#view-settings .st-cap:first-child { margin-top: 4px; }
#view-settings .st-card { background: var(--glass-bg, rgba(255,255,255,.5)); border-radius: 26px; padding: 10px; box-shadow: var(--plain-shadow, var(--glass-shadow)); margin-bottom: 6px; }
#view-settings .st-card > .row { margin: 0 0 8px; width: 100%; }
#view-settings .st-card > .row:last-child { margin-bottom: 0; }
#view-settings .st-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
#view-settings .st-chev { font-size: 20px; color: #9AA6AE; line-height: 1; }
#view-settings .st-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
#view-settings .st-err { color: #B3261E; padding: 0 14px 8px; }
#view-settings .st-sw { width: 50px; height: 30px; border-radius: 15px; background: #C5CBD0; position: relative; flex: none; border: 0; padding: 0; cursor: pointer; transition: background .2s; }
#view-settings .st-sw::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: inset-inline-start .2s; }
#view-settings .st-sw.on { background: #4A5560; }
#view-settings .st-sw.on::after { inset-inline-start: 23px; }
#view-settings .st-seg { display: flex; gap: 6px; padding: 4px 4px 6px; }
#view-settings .st-seg.hidden, #view-settings .st-err.hidden { display: none; }
#view-settings .st-seg button { flex: 1; text-align: center; padding: 9px 4px; border-radius: 14px; border: 0; background: #E3E6E9; font: inherit; font-size: 13px; color: #3B4A54; cursor: pointer; }
#view-settings .st-seg button.on { background: #4A5560; color: #fff; box-shadow: var(--plain-shadow-s, none); }

/* v1296: simple home (role tiles + switch + search + "All sections") and the grouped All-sections page */
#view-home.home-quick-on #menu, #view-home.home-quick-on #menu2, #view-home.home-quick-on #menu3 { display: none !important; }
#home-quick.hidden { display: none; }
#home-quick .hq-search { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--glass-bg, rgba(255,255,255,.5)); border: 0; border-radius: 22px; padding: 13px 16px; box-shadow: var(--plain-shadow-s, var(--glass-shadow)); color: var(--muted); font: inherit; font-size: 14.5px; margin-bottom: 14px; cursor: pointer; text-align: start; }
#home-quick .hq-seg { display: flex; gap: 6px; background: #E3E6E9; border-radius: 18px; padding: 4px; margin: 2px 2px 12px; box-shadow: inset 0 1px 3px rgba(30,40,50,.18); }
#home-quick .hq-seg button { flex: 1; text-align: center; padding: 9px 0; border-radius: 14px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #3B4A54; cursor: pointer; }
#home-quick .hq-seg button.on { background: #4A5560; color: #fff; box-shadow: var(--plain-shadow-s, none); }
#home-quick .tile .tile-label.tile-sm { font-size: 12.5px; }
#home-quick .hq-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 13px; border-radius: 20px; border: 0; background: #E3E6E9; color: #3B4A54; font: inherit; font-weight: 700; font-size: 14.5px; box-shadow: var(--plain-shadow-s, var(--glass-shadow)); cursor: pointer; }
#view-all-sections .as-q { width: 100%; box-sizing: border-box; margin: 4px 0 6px; padding: 13px 16px; border-radius: 22px; border: 0; background: var(--glass-bg, rgba(255,255,255,.6)); box-shadow: var(--plain-shadow-s, none); font: inherit; font-size: 14.5px; }
#view-all-sections .al-grp { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 18px 10px 8px; }
#view-all-sections .al-card { background: rgba(237, 239, 241, .66) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; border-radius: 26px; padding: 8px; }
#view-all-sections .al-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; background: transparent; border-radius: 18px; font: inherit; color: inherit; text-align: start; cursor: pointer; }
#view-all-sections .al-row + .al-row { border-top: 1px solid rgba(0,0,0,.05); }
#view-all-sections .al-ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; background: linear-gradient(to bottom, #fff, #E3E6E9); box-shadow: var(--plain-shadow-s, none); color: #3B4A54; }
#view-all-sections .al-ico svg { width: 20px; height: 20px; }
#view-all-sections .al-t { font-size: 15px; }
#view-all-sections .al-chev { margin-inline-start: auto; color: #9AA6AE; font-size: 19px; }

/* v1298: continue where you left off */
#home-quick .hq-cap { font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 10px 8px; }
#home-quick .hq-cont { display: flex; align-items: center; gap: 6px; background: var(--glass-bg, rgba(255,255,255,.5)); border-radius: 26px; padding: 10px 12px; box-shadow: var(--plain-shadow, var(--glass-shadow)); }
#home-quick .hq-cont-go { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; padding: 0; }
#home-quick .hq-cont-go .tile-ico { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
#home-quick .hq-cont-tx { display: flex; flex-direction: column; min-width: 0; }
#home-quick .hq-cont-tx b { font-size: 15px; color: #1B252C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home-quick .hq-cont-tx .s { font-size: 12.5px; color: var(--muted); }
#home-quick .hq-cont-x { border: 0; background: transparent; color: #9AA6AE; font-size: 18px; padding: 8px 10px; cursor: pointer; }

/* v1300: menu access by role (read-only sheet) */
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.rt-chip { border: 0; padding: 7px 12px; border-radius: 14px; background: #E3E6E9; font: inherit; font-size: 13px; color: #3B4A54; cursor: pointer; }
.rt-chip.on { background: #4A5560; color: #fff; }
.rt-total { font-size: 12.5px; color: var(--muted); margin: 4px 2px; }
.rt-cap { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 12px 2px 4px; }
.rt-row { padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.035); margin-bottom: 4px; font-size: 14.5px; }

/* v1304: settings -- rows sit flat inside their card (no box inside a box), thin dividers between them */
#view-settings .st-card { padding: 6px 8px; }
#view-settings .st-card > .row { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 16px; margin: 0 !important; padding-top: 12px; padding-bottom: 12px; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#view-settings .st-card > .row + .row { border-top: 1px solid rgba(0,0,0,.06) !important; border-radius: 0; }
#view-settings .st-card > .row:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
#view-settings .st-card > .row:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }

/* v1305: settings cards look like the "All sections" cards -- same translucent glass, no shadow, no border, no blur */
#view-settings .st-card { background: rgba(237, 239, 241, .66) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }

/* v1306: clinic staff page -- the same calm look as "All sections": one translucent card, flat rows with thin dividers,
   no shadows, no borders, no blur, no box inside a box */
#view-staff-management .report-page-title-box,
#view-staff-management .users-overview-card { background: rgba(237, 239, 241, .66) !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#view-staff-management .report-page-title-box { padding: 12px 16px; }
#view-staff-management #staff-invitation-list, #view-staff-management #staff-list { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#view-staff-management #staff-invitation-list > .row, #view-staff-management #staff-list > .row { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0; margin: 0 !important; padding-top: 11px; padding-bottom: 11px; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#view-staff-management #staff-invitation-list > .row + .row, #view-staff-management #staff-list > .row + .row { border-top: 1px solid rgba(0,0,0,.06) !important; }
#view-staff-management .section-subhead { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 4px 4px 6px; }
#view-staff-management .users-toolbar { margin-top: 14px; }
#view-staff-management .users-toolbar input { background: #fff !important; border: 0 !important; box-shadow: none !important; }
#view-staff-management #staff-clinic-tools .btn { box-shadow: none !important; background: rgba(237, 239, 241, .66) !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-size: 13.5px; }
#view-staff-management #staff-invitation-list .btn-small { box-shadow: none !important; }
#view-staff-management #staff-invitation-list .btn-small { background: #E3E6E9 !important; border: 0 !important; padding: 6px 12px !important; min-height: 0 !important; font-size: 12.5px !important; border-radius: 12px !important; }

/* v1307: clinic staff -- invitation actions, and member rows on one line each using the full width */
#view-staff-management #staff-invitation-list > .row { align-items: center; gap: 10px; }
#view-staff-management .inv-acts { display: flex; gap: 6px; flex: none; align-items: center; }
#view-staff-management #staff-invitation-list .inv-del { color: #B3261E !important; }
#view-staff-management #staff-invitation-list .row-main { flex: 1 1 auto; min-width: 0; }
#view-staff-management #staff-invitation-list .row-title, #view-staff-management #staff-invitation-list .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-staff-management #staff-invitation-list .row-sub { font-size: 12.5px; }
#view-staff-management #staff-list > .user-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px; padding: 10px 2px; }
html:root #view-staff-management .user-row .row-main strong, html:root #view-staff-management .user-row .row-main span { display: block; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html:root #view-staff-management .user-row .row-main strong { font-size: 15px; }
html:root #view-staff-management .user-row .row-main > span { font-size: 12.5px; opacity: .8; }
html:root #view-staff-management .user-row .row-main > .user-miniapp-lastseen { font-size: 11.5px; opacity: .55; }
html:root #view-staff-management .user-row .row-side { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; flex: none !important; min-width: 0 !important; }
html:root #view-staff-management .user-row .row-side .row-key-btn, html:root #view-staff-management .user-row .row-side .row-danger-btn { width: 34px; height: 34px; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 0 !important; background: #E3E6E9 !important; box-shadow: none !important; font-size: 15px; display: flex; align-items: center; justify-content: center; }
html:root #view-staff-management .user-row .row-side .row-danger-btn { color: #B3261E; background: rgba(179,38,30,.10) !important; }
html:root #view-staff-management .user-row .row-side .user-active-dot { order: -1; margin-inline-end: 2px; }
/* v1307: member rows = two tidy lines (name / role · @user); last-seen text moves to the tooltip, the dot stays */
html:root #view-staff-management .user-row .row-main > .user-miniapp-lastseen { display: none !important; }
html:root #view-staff-management .user-row { padding-block: 8px !important; }
/* v1307: bottom bar = the banner mirrored (same glass, edge to edge, only the top corners round) */
html:root .tabbar:not(.coordinator-tabbar) {
  left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; margin: 0 !important;
  border: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  box-shadow: 0 -10px 28px rgba(20,30,40,.18), 0 -2px 6px rgba(20,30,40,.1) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* clinic details / remove clinic: two equal buttons filling one full row */
#view-staff-management #staff-clinic-tools { display: flex !important; flex-wrap: nowrap !important; gap: 10px; width: 100%; }
#view-staff-management #staff-clinic-tools .btn { flex: 1 1 0 !important; width: auto !important; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; }
/* v1310: plain look re-applied a light border + inset highlight and a lighter tint to the bottom bar -- match the banner exactly */
html:root[data-look="plain"][data-look="plain"] .tabbar:not(.coordinator-tabbar) {
  background: rgba(255,255,255,.5) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  border: 0 !important; outline: 0 !important;
  box-shadow: 0 -10px 28px rgba(20,30,40,.18), 0 -2px 6px rgba(20,30,40,.10) !important;
}

/* v1312: dark theme. The light design stays exactly as it was; dark is the whole page inverted (white lines, dark cards)
   with pictures, the logo, avatars and video turned back so they keep their real colours. */
html[data-theme="dark"] { filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(1.03); background: #FFFFFF !important; color-scheme: dark; }
html[data-theme="dark"] #bg-layer { display: none !important; }
html[data-theme="dark"] body { background: #FFFFFF !important; }
html[data-theme="dark"] :is(img:not(.patient-search-nav-icon), video, canvas, picture, .user-avatar, #user-avatar, .staff-avatar, [data-keep-colors], .brand-logo, #clinic-logo, svg image) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] .patient-search-nav-icon { filter: none !important; }
/* v1313: in the inverted dark theme every dark drop-shadow turns into a light glow -- no shadows at all in dark */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] *, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] *::before, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] *::after { box-shadow: none !important; text-shadow: none !important; }
html[data-theme="dark"] :is(.tile-ico, .al-ico, .tile, .hero, .tabbar, .list-panel, .block, .btn, .al-card, .hq-seg) { filter: none; }

/* v1317: dark has no wallpaper at all (also in "plain + glass"): flat dark page */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #bg-layer { display: none !important; background-image: none !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme], html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] body, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #staff { background: #FFFFFF !important; background-image: none !important; }

/* v1319: dark look -- black page, grey boxes, white text, very faint banner/bar shadow, outlined typing boxes, raised icon squares */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] *:not(.btn-primary):not(.btn-primary *):not(.is-on):not(.is-on *):not(svg):not(svg *):not(img) { color: #000 !important; -webkit-text-fill-color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(input, textarea)::placeholder { color: #000 !important; opacity: .6 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .hero { box-shadow: 0 6px 16px rgba(30,40,50,.06) !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .tabbar:not(.coordinator-tabbar) { box-shadow: 0 -6px 16px rgba(30,40,50,.06) !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(.hq-card, .block, .al-card, .list-panel, .menu-group, .summary, .form-card, .dashboard-block, .facts, .empty, .users-overview-card, .lab-tank-card, .lab-monitor-card, .inventory-overview-card) { background: #DFDFDF !important; background-image: none !important; border: 0 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(.hero, .tabbar:not(.coordinator-tabbar)) { background: #DFDFDF !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-all-sections .al-card { background: #DFDFDF !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-all-sections :is(.view-head, .section-title-box) { background: transparent !important; border: 0 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .tile { background: #D2D2D2 !important; background-image: none !important; border: 0 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(input, textarea, select, .input, .hq-search, #as-q) { background: #E9E9E9 !important; background-image: none !important; border: 1px solid #C1C1C1 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .hq-seg { background: #E9E9E9 !important; border: 1px solid #C1C1C1 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #home-quick .hq-seg button.on { background: #C2C2C2 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(.tile-ico, .al-ico) { background: #C0C0C0 !important; background-image: none !important; box-shadow: 0 7px 12px rgba(255,255,255,.65), 0 1px 3px rgba(255,255,255,.5), inset 0 1px 0 rgba(0,0,0,.4) !important; }

/* v1320: every chosen option in dark (segments, chips, filters, theme buttons) = the same dark grey with white text */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(button, [role="tab"], label, .chip, .chip-pick, .ap-look):is(.is-on,.on,.is-picked,.is-selected,[aria-pressed="true"],[aria-selected="true"]):not(.tab):not(.st-sw):not(.tile):not(.dtop-nav-item):not(.tile-ico):not(.al-ico),
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .st-seg .btn-primary, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .hq-seg button.on { background: #C2C2C2 !important; background-image: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; box-shadow: none !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] :is(button, [role="tab"], label, .chip, .chip-pick):is(.is-on,.on,.is-picked,.is-selected,[aria-pressed="true"],[aria-selected="true"]) *, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .st-seg .btn-primary * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .st-seg .btn-secondary { background: #E9E9E9 !important; background-image: none !important; border: 1px solid #C1C1C1 !important; }

html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .tile.tile-new .tile-ico { animation-name: tileGlowDark !important; }
/* v1323: the tank list scrolls natively -- vertical pans belong to the browser, and a card's press look never holds the scroll */
#view-tank .tank-canister-scroll-layer { touch-action: pan-y !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#view-tank .tank-canister-scroll-layer :is(.acc-head, .sample-row, .tank-cn, .tank-cane) { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* v1324: page pinned under any open sheet / popup (iPhone scrolled the background) */
html.ovl-open, html.ovl-open body { overscroll-behavior: none; }
html.ovl-open body { position: fixed !important; left: 0; right: 0; width: 100%; overflow: hidden !important; }
.sheet-wrap .sheet, .sheet-body, .chat-window, .cc-pop, .cc-pop-list { overscroll-behavior: contain; }
/* v1324: every window that opens -- no border, no light edge line; only a soft shadow */
html[data-look][data-look][data-look][data-look] :is(.sheet-wrap .sheet, .cc-pop, .chat-window, .optpick-sheet) {
  border: 0 !important; outline: 0 !important;
  box-shadow: 0 -6px 26px rgba(20,30,40,.16) !important;
}
html[data-look][data-look][data-look][data-look] :is(.cc-pop, .chat-window) { box-shadow: 0 10px 32px rgba(20,30,40,.20) !important; }
html[data-look][data-look][data-look][data-look] :is(.sheet-wrap .sheet, .cc-pop, .chat-window)::before,
html[data-look][data-look][data-look][data-look] :is(.sheet-wrap .sheet, .cc-pop, .chat-window)::after { border: 0 !important; box-shadow: none !important; }

/* v1325: clinic calendar window -- faint close cross without a box, no grip line, tighter spacing, today in the grey glass of the other calendars */

html:root .cc-modal-x { border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: .45; font-size: 19px !important; width: 30px; height: 30px; top: 8px !important; }
html:root .cc-modal-wrap .cc-modal-sheet .sheet-grip { display: none !important; }
html:root:root:root:root .cc-modal-wrap .cc-modal-sheet { padding: 8px 10px 12px !important; }
html:root .cc-modal-view .view-head { margin: 4px 0 2px !important; min-height: 0 !important; }
html:root:root:root:root .cc-modal-wrap .cc-grid { padding: 4px 0 0 !important; }
html:root .cc-modal-wrap .cc-bar { margin: 0 0 4px !important; }
html:root:root:root:root .cc-modal-wrap .cc-day.is-today, html:root:root:root:root .cc-day.is-today { outline: 0 !important; background: rgba(74,85,96,.20) !important; background-image: none !important; border: .5px solid rgba(74,85,96,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 8px rgba(20,30,40,.10) !important; color: #1F2A33 !important; font-weight: 700 !important; }
/* v1326: calendar / clock buttons -- the line icon sits exactly in the middle of the square */
.date-btn.picker-svg, .btn.picker-svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 0 !important; color: #3B4A54; }
.date-btn.picker-svg svg, .btn.picker-svg svg { display: block; flex: none; }
/* v1327: clinical profile card in the patient file */
.pf-section.cp-card { padding-top: 4px; }
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; }
.cp-title { font-size: 17px; font-weight: 700; }
.cp-sub { font-size: 12px; opacity: .6; margin-top: 2px; }
.cp-ring { position: relative; width: 52px; height: 52px; flex: none; }
.cp-ring svg { width: 52px; height: 52px; display: block; }
.cp-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.cp-row { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(0,0,0,.06); padding: 12px 2px; font: inherit; text-align: start; color: inherit; cursor: pointer; }
.cp-row:last-of-type { border-bottom: 0; }
.cp-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(#fff, #E3E6E9); box-shadow: 0 3px 8px rgba(30,40,50,.18); color: #3B4A54; flex: none; }
.cp-ico svg { display: block; }
.cp-t { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; display: flex; flex-direction: column; }
.cp-t small { font-weight: 400; font-size: 12.5px; opacity: .65; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-st { font-size: 12px; padding: 3px 9px; border-radius: 10px; background: rgba(74,85,96,.12); flex: none; white-space: nowrap; }
.cp-st.ok { background: rgba(31,157,107,.13); color: #17784F; }
.cp-st.warn { background: rgba(224,138,30,.15); color: #A0600F; }
.cp-chev { opacity: .4; flex: none; }
.cp-auto { font-size: 12px; opacity: .65; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(74,85,96,.07); }
.cp-upd { font-size: 11.5px; opacity: .5; margin-top: 6px; }
.cp-form .cp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-form .field { margin-bottom: 12px; }
/* registration: the optional clinical data is one quiet dashed line */
#reg-base-open.reg-cp-line { display: block; width: 100%; text-align: center; background: transparent !important; border: 1px dashed rgba(74,85,96,.32) !important; box-shadow: none !important; border-radius: 14px; padding: 11px; font: inherit; font-size: 14px; color: #4A5560 !important; opacity: .8; }
/* v1328: donor photos */
.dpx-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.dp-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; }
.dp-pic { width: 120px; height: 150px; border-radius: 18px; border: 0; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#fff, #E3E6E9); color: #8A949C; box-shadow: 0 4px 12px rgba(30,40,50,.16); cursor: pointer; }
.dp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-cap { font-size: 13px; font-weight: 600; }
.dp-acts { display: flex; gap: 6px; }
.dp-acts .inv-del { color: #B3261E !important; }
.dp-note { font-size: 12px !important; opacity: .7; margin: 0 0 4px !important; }
.dp-thumbs { display: flex; gap: 4px; flex: none; margin-inline-end: 10px; align-self: center; }
.dp-thumb { border-radius: 50%; border: 0; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #E3E6E9; color: #8A949C; flex: none; cursor: zoom-in; }
.dp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-thumb svg { width: 60%; height: 60%; }
.donor-bank-row { align-items: center; }
.dp-slot { width: 138px; }
.dp-acts { flex-wrap: wrap; justify-content: center; width: 100%; }
.dp-acts .btn { padding: 6px 12px !important; font-size: 12.5px !important; min-height: 0 !important; width: auto !important; flex: 0 1 auto; }
/* v1329: donor-photo grid has its own name (it shared "dp-grid" with the date picker) */
.dpx-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
/* clinical profile + donor photos + hormone results: each one the full width of the file, not half a column */
.pf-card .pf-row2 > .pf-section, .pf-row2 > .pf-section { grid-column: 1 / -1; }
.cp-t small { white-space: normal; }
.cp-row { gap: 10px; }
.cp-t { font-size: 15px; }
/* tile captions: whole words, no mid-word breaks (JS shrinks the size a little when needed) */
.tile-label { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* performance filters: selected option = the same slate as the other menus */
#view-performance .performance-filter-option.is-on, html:root[data-look] #view-performance .performance-filter-option.is-on { background: #4A5560 !important; color: #fff !important; border-color: #4A5560 !important; box-shadow: none !important; font-weight: 600; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-performance .performance-filter-option.is-on { background: #C2C2C2 !important; color: #000 !important; border-color: #C2C2C2 !important; }

/* v1329: modern dashboard */
#view-dashboard { padding-top: 6px; }
#view-dashboard .dx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 14px; }
#view-dashboard .dx-head .view-title { font-size: 26px !important; line-height: 1.15; margin: 0 !important; background: none !important; padding: 0 !important; }
#view-dashboard .dx-note { margin: 4px 0 0; font-size: 12.5px; opacity: .6; line-height: 1.5; max-width: 270px; }
#view-dashboard .dx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(74,85,96,.10); color: #4A5560; flex: none; }
#view-dashboard .dx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #1F9D6B; box-shadow: 0 0 0 4px rgba(31,157,107,.16); }
#view-dashboard .dx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dx-k { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 22px; min-width: 0;
  background: rgba(255,255,255,.58); box-shadow: 0 6px 18px rgba(30,40,50,.08); text-align: start; }
.dx-k .tile-ico { width: 34px; height: 34px; margin-bottom: 4px; }
.dx-k strong { font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.5px; }
.dx-k .dx-k-l { font-size: 12.5px; opacity: .65; line-height: 1.3; }
.dx-k.dx-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.dx-k.dx-wide .tile-ico { margin: 0; }
.dx-k.dx-wide strong { font-size: 26px; }
.dx-k.dx-wide .dx-k-l { margin-inline-start: auto; font-size: 13px; }
.dx-k.dx-hero { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(135deg, #4A5560, #6A7783); color: #fff; box-shadow: 0 10px 24px rgba(40,50,60,.22); }
.dx-k.dx-hero .tile-ico { margin: 0; width: 42px; height: 42px; }
.dx-k.dx-hero strong { font-size: 40px; }
.dx-k.dx-hero .dx-k-l { margin-inline-start: auto; font-size: 14px; opacity: .9; font-weight: 600; }
#view-dashboard .dx-title { font-size: 16px; font-weight: 750; margin: 20px 6px 8px; background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
#view-dashboard .dx-card { background: rgba(255,255,255,.58); border-radius: 22px; padding: 4px 14px; box-shadow: 0 6px 18px rgba(30,40,50,.08); display: block; max-height: none; overflow: visible; }
.dx-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 2px; border: 0; border-bottom: 1px solid rgba(0,0,0,.07); background: transparent; font: inherit; color: inherit; text-align: start; border-radius: 0; box-shadow: none; margin: 0; min-height: 0; }
.dx-li:last-child { border-bottom: 0; }
.dx-li-t { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.dx-n { min-width: 28px; text-align: center; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(74,85,96,.12); }
.dx-li.is-zero .dx-li-t { opacity: .5; font-weight: 500; }
.dx-li.is-zero .dx-n { opacity: .45; }
.dx-li.warn .dx-n { background: rgba(224,138,30,.18); color: #9A5C0C; }
.dx-li.danger .dx-n { background: rgba(200,60,50,.16); color: #A32A22; }
.dx-chev { opacity: .35; flex: none; }
.dx-act, .dx-pt { cursor: pointer; }
.dx-act:active, .dx-pt:active { opacity: .6; }
.dx-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 700; font-size: 15px; background: linear-gradient(#fff, #DDE1E5); box-shadow: 0 2px 6px rgba(30,40,50,.15); color: #3B4A54; }
.dx-pt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-pt-t strong { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-pt-c { font-size: 12px; opacity: .55; }
#view-dashboard .dx-empty { padding: 16px 4px; text-align: center; opacity: .65; background: transparent !important; box-shadow: none !important; border: 0 !important; }
/* v1332: subscription -- period switch + three plan cards, struck-through list price and the discounted price */
.sub-seg { display: flex; gap: 6px; padding: 5px; border-radius: 18px; background: rgba(74,85,96,.10); margin: 6px 0 14px; }
.sub-seg button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 6px; border-radius: 14px; color: inherit; cursor: pointer; }
.sub-seg button.on { background: #4A5560; color: #fff; }
.sub-plan { padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,.58); box-shadow: 0 6px 18px rgba(30,40,50,.08); margin-bottom: 12px; }
.sub-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-plan-n { font-size: 17px; font-weight: 750; }
.sub-plan-tag { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(74,85,96,.12); }
.sub-plan-p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.sub-old { font-size: 15px; opacity: .5; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sub-new { font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.sub-unit { font-size: 13px; opacity: .65; }
.sub-per { font-size: 12.5px; opacity: .6; margin-bottom: 12px; }
.sub-plan .btn { width: 100%; }
/* v1333: a sheet pulled down by hand -- the window stays solid while the sheet slides out; only the dim backdrop fades */
html:root .sheet-wrap.drag-closing.is-closing { opacity: 1 !important; transition: none !important; }
html:root .sheet-wrap.drag-closing.is-closing > .sheet-scrim { opacity: 0 !important; transition: opacity .28s ease !important; }
/* v1334: every bottom sheet (window, date / time pickers, option lists) opens and closes by sliding only.
   Before, it faded in place while closing -- with the see-through glass the page showed through it and
   the two images overlapped (the "bounce and ghost"). Dropdown sheets and the centred clinic calendar keep their own motion. */
@keyframes sheetSlideUp1334 { from { transform: translateY(100%); } to { transform: none; } }
html:root .sheet-wrap:not(.sheet-dropdown):not(.cc-modal-wrap):not(.is-closing) > .sheet { animation: sheetSlideUp1334 .38s cubic-bezier(.25,.8,.3,1) both; }
html:root .sheet-wrap.is-closing:not(.sheet-dropdown):not(.cc-modal-wrap) { opacity: 1 !important; transition: none !important; }
html:root .sheet-wrap.is-closing:not(.sheet-dropdown):not(.cc-modal-wrap) > .sheet { animation: none !important; opacity: 1 !important; transform: translateY(105%) !important; transition: transform .30s cubic-bezier(.4,0,.7,1) !important; }
html:root .sheet-wrap.is-closing:not(.sheet-dropdown):not(.cc-modal-wrap) > .sheet-scrim { opacity: 0 !important; transition: opacity .30s ease !important; }
@media (prefers-reduced-motion: reduce) { html:root .sheet-wrap:not(.sheet-dropdown) > .sheet { animation: none !important; } }
/* once a sheet has arrived its entry animation is switched off, so dragging it (or letting go) never replays the slide-in */
html:root .sheet-wrap > .sheet.sheet-shown { animation: none !important; }
/* v1339: "press Back once more" note after Exit when the browser would not close the page itself */
.exit-hint { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 300; max-width: calc(100% - 40px);
  background: #3B4650; color: #fff; font-size: 13.5px; line-height: 1.5; padding: 10px 16px; border-radius: 16px; text-align: center; opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; box-shadow: 0 8px 22px rgba(20,30,40,.25); }
.exit-hint.on { opacity: 1; transform: translate(-50%, 0); }
/* v1341: home tiles stay hidden behind the loading screen until their opening animation starts */
html.hq-pre #home-quick .grid > .tile { opacity: 0 !important; animation: none !important; }
/* v1343/v1344: clinic-calendar window in Dark -- one glass panel (like the other windows) with no frame: the inner panel had its own dark-card colour
   inside the see-through window, which drew a second rim around it. Now the window itself carries the colour, the inner
   panel is transparent, and there is no edge line or rim shadow. */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .cc-modal-wrap .cc-modal-sheet {
  background: transparent !important; background-image: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.18)) !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.1) !important; backdrop-filter: blur(5px) saturate(1.1) !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .cc-modal-wrap :is(.list-panel, .unified-panel, .cc-modal-view, #cc-modal-host) {
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
/* v1345: donor bank redesign */
#view-donor-bank .dbx-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:6px 4px 12px; }
#view-donor-bank .dbx-head h2 { font-size:26px; font-weight:800; margin:0; }
#view-donor-bank .dbx-sub { font-size:12.5px; opacity:.6; margin-top:4px; }
#view-donor-bank .dbx-add { border:0; background:#4A5560; color:#fff; font:inherit; font-size:13.5px; font-weight:700; padding:10px 14px; border-radius:14px; display:flex; align-items:center; gap:6px; box-shadow:0 6px 16px rgba(40,50,60,.22); flex:none; }
#view-donor-bank .dbx-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
#view-donor-bank .dbx-stat { background:rgba(255,255,255,.58); border-radius:18px; padding:10px 12px; box-shadow:0 6px 18px rgba(30,40,50,.08); }
#view-donor-bank .dbx-stat b { display:block; font-size:22px; font-weight:800; }
#view-donor-bank .dbx-stat span { font-size:11.5px; opacity:.6; }
#view-donor-bank .dbx-search { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.58); border-radius:16px; padding:12px 14px; box-shadow:0 6px 18px rgba(30,40,50,.08); color:#8A949C; font-size:14px; margin-bottom:10px; }
#view-donor-bank .dbx-seg { display:flex; gap:6px; padding:5px; border-radius:18px; background:rgba(74,85,96,.10); margin-bottom:10px; }
#view-donor-bank .dbx-seg button { flex:1; text-align:center; font-size:14px; font-weight:600; padding:10px 6px; border-radius:14px; }
#view-donor-bank .dbx-seg button.on { background:#4A5560; color:#fff; }
#view-donor-bank .dbx-chips { display:flex; gap:6px; margin:0 2px 10px; flex-wrap:wrap; }
#view-donor-bank .dbx-chips button { font-size:12.5px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.6); box-shadow:0 2px 6px rgba(30,40,50,.08); }
#view-donor-bank .dbx-chips button.on { background:#4A5560; color:#fff; }
#view-donor-bank .dbx-card { background:rgba(255,255,255,.58); border-radius:22px; padding:2px 14px; box-shadow:0 6px 18px rgba(30,40,50,.08); }
#view-donor-bank .dbx-li { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid rgba(0,0,0,.07); }
#view-donor-bank .dbx-li:last-child { border-bottom:0; }
#view-donor-bank .dbx-av { width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none; background:linear-gradient(#fff,#DDE1E5); box-shadow:0 3px 8px rgba(30,40,50,.18); display:flex; align-items:center; justify-content:center; color:#8A949C; }
#view-donor-bank .dbx-av img { width:100%; height:100%; object-fit:cover; }
#view-donor-bank .dbx-pair { position:relative; width:64px; height:52px; flex:none; }
#view-donor-bank .dbx-pair .dbx-av { position:absolute; top:0; width:44px; height:44px; border:2px solid #EEF0F2; }
#view-donor-bank .dbx-pair .dbx-av:first-child { right:0; } .dbx-pair .dbx-av:last-child { left:0; top:8px; }
#view-donor-bank .dbx-t { flex:1; min-width:0; }
#view-donor-bank .dbx-n { font-size:15px; font-weight:700; }
#view-donor-bank .dbx-n small { font-weight:500; opacity:.5; font-size:12px; margin-inline-start:6px; }
#view-donor-bank .dbx-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
#view-donor-bank .dbx-tag { font-size:11.5px; padding:3px 9px; border-radius:999px; background:rgba(74,85,96,.10); }
#view-donor-bank .dbx-tag.bl { background:rgba(200,60,50,.12); color:#A32A22; font-weight:700; }
#view-donor-bank .dbx-tag.oo { background:rgba(31,157,107,.13); color:#17784F; }
#view-donor-bank .dbx-tag.em { background:rgba(60,110,190,.13); color:#2C5BA0; }
#view-donor-bank .dbx-meta { font-size:12px; opacity:.55; margin-top:5px; }
#view-donor-bank .dbx-chev { opacity:.35; font-size:18px; }
#view-donor-bank .dbx-don { border:0; background:#4A5560; color:#fff; font:inherit; font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:12px; flex:none; }
#view-donor-bank .dbx-straw { text-align:center; flex:none; }
#view-donor-bank .dbx-straw b { display:block; font-size:18px; font-weight:800; }
#view-donor-bank .dbx-straw span { font-size:11px; opacity:.55; }
#view-donor-bank { padding-top: 6px; }
#view-donor-bank .dbx-title { font-size: 26px; font-weight: 800; margin: 0; background: none !important; padding: 0 !important; }
#view-donor-bank .dbx-seg button { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
#view-donor-bank .dbx-chips button { border: 0; font: inherit; color: inherit; cursor: pointer; }
#view-donor-bank .dbx-chips.hidden { display: none; }
#view-donor-bank .dbx-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; font: inherit; font-size: 14px; color: #1F2A33; padding: 0 !important; min-height: 0 !important; }
#view-donor-bank .dbx-search svg { flex: none; }
#view-donor-bank .dbx-add { cursor: pointer; }
#view-donor-bank .dbx-click { cursor: pointer; }
#view-donor-bank .dbx-click:active { opacity: .6; }
#view-donor-bank .dbx-av.dp-thumb { padding: 0; border: 0; cursor: zoom-in; }
#view-donor-bank .dbx-av svg { width: 55%; height: 55%; }
#view-donor-bank .dbx-tag.un { background: rgba(224,138,30,.16); color: #9A5C0C; }
#view-donor-bank .dbx-card .empty, #view-donor-bank .dbx-card > p { padding: 16px 2px; text-align: center; opacity: .65; background: transparent !important; box-shadow: none !important; border: 0 !important; }
#view-donor-bank .form-panel { margin: 0 0 14px; }
/* v1345 donor bank in Dark: the boxes take the dark-card colour like the other pages */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-donor-bank :is(.dbx-stat, .dbx-search, .dbx-card) { background: #DFDFDF !important; box-shadow: none !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-donor-bank .dbx-chips button:not(.on) { background: #D2D2D2 !important; box-shadow: none !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-donor-bank .dbx-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* v1348: unified list pages (recent patients, puncture, ICSI, add embryo, embryo transfer, ET planning, ET results,
   andrology, biopsy, unfinished steps, leftover embryos, patient messages, genetic lab) -- the donor-bank style:
   a plain big title with a short grey line under it, a round search field, and ONE card holding the rows,
   separated by hairlines, each with a round initial, the name, a grey line, coloured tags and an outward arrow. */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) { padding-top: 6px; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.list-panel, .unified-panel, .section-list-panel, .puncture-list-panel, .icsi-list-panel, .embryos-list-panel, .genetic-stats-panel, .genetic-tabs-panel):not(.form-panel):not(#pchat-conv) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin: 0 0 12px !important; border-radius: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.view-head, .section-title-box, .section-title-head, .genetic-title-card) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important;
  padding: 6px 4px 12px !important; margin: 0 !important; display: block !important; text-align: start !important; min-height: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: static !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.view-head .view-title, .section-title-box .view-title, .genetic-title-card strong) {
  font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important;
  background: none !important; box-shadow: none !important; border: 0 !important; text-align: start !important; display: block !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.view-head, .section-title-box) :is(.section-title-note, .panel-note, .embryos-page-note, .note) {
  font-size: 12.5px !important; opacity: .6; margin: 4px 0 0 !important; line-height: 1.6 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
/* search */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.searchbar, #bp-search) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.searchbar input, #bp-q, input[type="search"]) {
  width: 100% !important; box-sizing: border-box; border: 0 !important; border-radius: 16px !important; min-height: 0 !important;
  background: rgba(255,255,255,.58) !important; background-image: none !important; box-shadow: 0 6px 18px rgba(30,40,50,.08) !important;
  padding: 12px 14px !important; padding-inline-start: 40px !important; font-size: 14px !important; margin: 0 0 10px !important;
  background-repeat: no-repeat !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.searchbar, #bp-search) { position: relative; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.searchbar, #bp-search)::before { content: ""; position: absolute; inset-inline-start: 14px; top: 13px; width: 18px; height: 18px; z-index: 1; opacity: .45; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  background: #3B4A54; }
/* the one card that holds the rows */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list {
  display: block !important; background: rgba(255,255,255,.58) !important; background-image: none !important; border-radius: 22px !important;
  padding: 2px 14px !important; box-shadow: 0 6px 18px rgba(30,40,50,.08) !important; border: 0 !important;
  overflow-y: auto; gap: 0 !important; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list:empty { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > :is(.row, .et-row-wrap, .disposition-card) {
  display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; box-sizing: border-box;
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important; border-radius: 0 !important; margin: 0 !important; padding: 13px 0 !important;
  min-height: 0 !important; text-align: start !important; transform: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > :is(.row, .et-row-wrap, .disposition-card):last-child, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > :is(.row, .et-row-wrap, .disposition-card):has(+ :is(.empty, .btn, button.btn)) { border-bottom: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .disposition-card { flex-wrap: wrap !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > :is(.row, .et-row-wrap, .disposition-card):active { opacity: .6; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .et-row-wrap > .row { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; gap: 12px !important; min-height: 0 !important; border-radius: 0 !important; text-align: start !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .row .row-main { flex: 1 1 auto; min-width: 0; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .row .row-title, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .disposition-card-title { font-size: 15px !important; font-weight: 700 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .row .row-sub { font-size: 12.5px !important; opacity: .6; margin-top: 3px !important; }
/* round initial */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list :is(.row, .disposition-card)[data-ini]::before {
  content: attr(data-ini); flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #3B4A54; background: linear-gradient(#fff, #DDE1E5); box-shadow: 0 2px 6px rgba(30,40,50,.15); order: -1; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .disposition-card[data-ini]::before { position: absolute; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .disposition-card[data-ini] { position: relative; padding-inline-start: 52px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .disposition-card[data-ini]::before { inset-inline-start: 0; top: 13px; }
/* outward arrow on rows you can open */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > button.row::after, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .et-row-wrap > button.row::after, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .disposition-card::after {
  content: "›"; flex: none; opacity: .35; font-size: 18px; line-height: 1; margin-inline-start: auto; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .disposition-card::after { position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%); }
/* the small ✕ in Embryo transfer */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .et-cancel-x { flex: none !important; width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; border-radius: 11px !important;
  background: rgba(74,85,96,.08) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; opacity: .75; font-size: 14px !important; order: 9; }
/* tags */
.um-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.um-tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(74,85,96,.10); font-weight: 500; }
.um-tag.ok { background: rgba(31,157,107,.13); color: #17784F; }
.um-tag.wa { background: rgba(224,138,30,.16); color: #9A5C0C; }
.um-tag.bl { background: rgba(60,110,190,.13); color: #2C5BA0; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .row-tail { flex: none; font-size: 12px !important; padding: 3px 9px !important; border-radius: 999px !important; background: rgba(74,85,96,.10) !important; }
/* captions inside a list (unfinished steps) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > p.panel-note { font-size: 12.5px !important; font-weight: 700 !important; opacity: .55; margin: 14px 0 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > p.panel-note:first-child { margin-top: 10px !important; }
/* empty list: a faint tick and the sentence, inside the card */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .empty { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  text-align: center !important; padding: 24px 6px !important; margin: 0 !important; font-size: 14px !important; opacity: .65; min-height: 0 !important; display: block !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > .empty:not(.is-loading)::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 8px; background: #3B4A54; opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* buttons that sit at the end of a list (e.g. cancelled transfers) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > :is(.btn, button.btn) { margin: 10px 0 12px !important; width: 100%; }
/* genetic laboratory: stats as small tiles, the main button, and the tabs */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-kpi { display: flex !important; flex-direction: column-reverse !important; align-items: flex-start !important; text-align: start !important; justify-content: flex-end !important;
  background: rgba(255,255,255,.58) !important; background-image: none !important; border-radius: 18px !important; padding: 10px 12px !important; min-height: 0 !important;
  box-shadow: 0 6px 18px rgba(30,40,50,.08) !important; border: 0 !important; gap: 2px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-kpi strong { font-size: 22px !important; font-weight: 800 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-kpi span { font-size: 11.5px !important; opacity: .6; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-referral-button { width: 100% !important; background: #4A5560 !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 16px !important;
  padding: 13px !important; box-shadow: 0 6px 16px rgba(40,50,60,.2) !important; margin: 0 0 10px !important; min-height: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-referral-button strong { color: #fff !important; font-size: 14.5px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-tabs { display: flex !important; gap: 6px !important; padding: 5px !important; border-radius: 18px !important; background: rgba(74,85,96,.10) !important; box-shadow: none !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-tab { flex: 1 !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 14px !important;
  padding: 9px 4px !important; font-size: 13.5px !important; font-weight: 600 !important; color: inherit !important; min-height: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-tab.is-on { background: #4A5560 !important; color: #fff !important; }
/* biopsy: the working area under the list gets its own card */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) #bp-flow:not(.hidden) { display: block; background: rgba(255,255,255,.58); border-radius: 22px; padding: 14px; box-shadow: 0 6px 18px rgba(30,40,50,.08); margin-top: 6px; }
/* Dark: the cards take the dark-card colour */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.um-list, .genetic-kpi, .searchbar input, #bp-q, input[type="search"], #bp-flow:not(.hidden)) { background: #DFDFDF !important; box-shadow: none !important; border: 0 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list :is(.row, .disposition-card) { background: transparent !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list > :is(.row, .et-row-wrap, .disposition-card) { border-bottom-color: rgba(0,0,0,.10) !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.genetic-tab.is-on, .genetic-referral-button) { background: #C2C2C2 !important; color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .genetic-referral-button strong { color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) .um-list .et-cancel-x { background: #C9C9C9 !important; }

html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.view-head .view-title, .section-title-box .view-title, .genetic-title-card strong) { direction: inherit !important; unicode-bidi: normal !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-recent, #view-genetic-laboratory, #view-biopsy, #view-unfinished, #view-pending-embryo-disposition, #view-puncture, #view-et-plan, #view-et-results, #view-andrology, #view-et-list, #view-pchat, #view-icsi, #view-embryos, #view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague):is(.um-view, .um-page) :is(.searchbar input, #bp-q, input[type="search"]) { padding-left: 40px !important; padding-right: 40px !important; }

/* v1349: the same harmony on Freeze, Thaw, Activity log, Embryology inventory, Excel reports, Personalised medicine,
   Performance and Invite colleague -- plain big title, soft cards, one slate colour for whatever is selected */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-page-head, .performance-page-head, .report-page-title-box, .performance-page-title-box, .inventory-overview-card > .view-head) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important;
  padding: 6px 4px 12px !important; margin: 0 !important; display: block !important; text-align: start !important; min-height: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: static !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-page-head, .performance-page-head) { padding: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-page-title-box, .performance-page-title-box, .inventory-overview-card > .view-head) .view-title {
  font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; background: none !important; text-align: start !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-page-note, .performance-page-note, .inventory-overview-card > .note) {
  font-size: 12.5px !important; opacity: .6; margin: 4px 4px 0 !important; line-height: 1.6 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .inventory-overview-card { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .inventory-overview-card > .note { margin-bottom: 12px !important; }
/* soft cards */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.block, .form-card, .invite-clinic-card, .report-overview-card, .report-period-box, .performance-period-box, .performance-block, .performance-kpis, .performance-filters,
        .report-list-panel, .pm-card, .pm-box, .list-panel.form-panel) {
  background: rgba(255,255,255,.58) !important; background-image: none !important; border: 0 !important; border-radius: 22px !important;
  box-shadow: 0 6px 18px rgba(30,40,50,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* small number tiles */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.summary-card, .performance-card, .pm-stat, .dashboard-card) {
  background: rgba(255,255,255,.58) !important; background-image: none !important; border: 0 !important; border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(30,40,50,.08) !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.summary-card, .performance-card) strong { font-size: 24px !important; font-weight: 800 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.summary-card, .performance-card) span { font-size: 12px !important; opacity: .6; }
/* one colour for everything that is selected */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.chip-pick, .dd-chip, .report-period-box, .performance-period-box, .performance-filter-option, .inv-tab, .cb-tab).is-on,
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.chip-pick, button)[aria-pressed="true"] {
  background: #4A5560 !important; background-image: none !important; color: #fff !important; border-color: #4A5560 !important; box-shadow: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.chip-pick, .report-period-box, .performance-period-box).is-on * { color: #fff !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .chip-pick:not(.is-on) { background: rgba(255,255,255,.6) !important; background-image: none !important; border: 0 !important; box-shadow: 0 2px 6px rgba(30,40,50,.08) !important; }
/* Dark */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.block, .form-card, .invite-clinic-card, .report-overview-card, .report-period-box, .performance-period-box, .performance-block, .performance-kpis, .performance-filters,
        .report-list-panel, .pm-card, .pm-box, .list-panel.form-panel, .summary-card, .performance-card, .pm-stat, .dashboard-card) { background: #DFDFDF !important; box-shadow: none !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.chip-pick, .dd-chip, .report-period-box, .performance-period-box, .performance-filter-option, .inv-tab, .cb-tab).is-on { background: #C2C2C2 !important; color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.chip-pick, .report-period-box, .performance-period-box).is-on * { color: #000 !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .chip-pick:not(.is-on) { background: #D2D2D2 !important; box-shadow: none !important; }

/* ===== v1351: modern unified design of the 8 tool pages ===== */
.mx-hero { display: flex; align-items: center; gap: 14px; padding: 4px 4px 16px; }
.mx-hero-ic { width: 52px; height: 52px; border-radius: 18px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(145deg, #5A6773, #3E4952); box-shadow: 0 8px 18px rgba(40,50,60,.25); }
.mx-hero-t { min-width: 0; }
.mx-hero h2 { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.2; }
.mx-hero p { font-size: 12.5px; opacity: .6; margin: 4px 0 0; line-height: 1.55; }
.mx-ct { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mx-ct b { font-size: 15.5px; font-weight: 750; }
.mx-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(74,85,96,.10); white-space: nowrap; }
.mx-pill.ok { background: rgba(31,157,107,.14); color: #17784F; } .mx-pill.wa { background: rgba(224,138,30,.16); color: #9A5C0C; } .mx-pill.bl { background: rgba(60,110,190,.13); color: #2C5BA0; }
.mx-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(74,85,96,.10); margin-bottom: 12px; }
.mx-seg button { flex: 1; border: 0; background: transparent; font: inherit; color: inherit; font-size: 13px; font-weight: 650; padding: 9px 4px; border-radius: 13px; white-space: nowrap; cursor: pointer; }
.mx-seg button.on { background: #4A5560; color: #fff; box-shadow: 0 4px 10px rgba(40,50,60,.22); }
.mx-search { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.62); border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(30,40,50,.08); color: #8A949C; margin-bottom: 12px; }
.mx-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; font: inherit; font-size: 14px; padding: 0 !important; min-height: 0 !important; color: #1F2A33; }
.mx-cta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mx-cta .ic { width: 48px; height: 48px; border-radius: 16px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(60,110,190,.12); color: #2C5BA0; }
.mx-t { flex: 1; min-width: 0; } .mx-t b { display: block; font-size: 15px; font-weight: 750; } .mx-t small { display: block; font-size: 12px; opacity: .6; margin-top: 3px; line-height: 1.5; }
.mx-day { font-size: 12px; font-weight: 800; opacity: .45; margin: 8px 2px 2px; }
.mx-tl { position: relative; padding-inline-start: 22px; }
.mx-tl::before { content: ""; position: absolute; inset-inline-start: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(74,85,96,.15); border-radius: 2px; }
.mx-ev { position: relative; padding: 9px 0 11px; }
.mx-ev::before { content: ""; position: absolute; inset-inline-start: -19px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2.5px solid #4A5560; box-sizing: border-box; }
.mx-ev b { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
.mx-ev .mt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; opacity: .7; }
/* the old title boxes are replaced by the hero */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.view-head, .report-page-head, .performance-page-head, .inventory-overview-card > .note) { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page > .mx-hero { display: flex !important; }
/* cards */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.list-panel, .block, .report-overview-card, .performance-analysis-card, .performance-filters-block, .invite-clinic-card, .invite-choice-card, .mx-cta-card, #fz-due-panel:not(.hidden), #fz-oo-panel:not(.hidden), .fz-search-block, #fz-panel:not(.hidden)) {
  background: rgba(255,255,255,.62) !important; background-image: none !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 8px 24px rgba(30,40,50,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px !important; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.unified-panel, .inventory-overview-card) { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#fz-due-panel, #fz-oo-panel, #fz-panel) :is(.rows, .um-list) { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #fz-oo-panel > p.section-title-note { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .fz-search-block { display: flex !important; flex-direction: column; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .fz-search-block > .mx-ct { order: 0; } html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .fz-search-block > .searchbar { order: 1; } html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .fz-search-block > p { order: 2; font-size: 12px !important; opacity: .55; margin: 2px 4px 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .searchbar input, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .fz-search-block input[type="search"] { background: rgba(255,255,255,.9) !important; border-radius: 14px !important; box-shadow: inset 0 1px 2px rgba(30,40,50,.08) !important; margin: 0 !important; }
/* thaw */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .mx-cta-card:has(#th-open-picker.hidden) { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #th-open-picker { background: #4A5560 !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 8px 18px rgba(40,50,60,.25) !important; font-weight: 700 !important; font-size: 14.5px !important; padding: 14px !important; min-height: 0 !important; width: 100% !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #th-flow:not(.hidden) { background: rgba(255,255,255,.62) !important; background-image: none !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 8px 24px rgba(30,40,50,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px !important; display: block; }
/* main buttons */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.btn-primary, button[type="submit"]):not(.report-download) { background: #4A5560 !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 8px 18px rgba(40,50,60,.25) !important; font-weight: 700 !important; font-size: 14.5px !important; padding: 14px !important; min-height: 0 !important; }
/* segmented bars: inventory tabs, PM tabs and switches, invite validity, performance filters stay chips */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.inventory-tabs, .pm-tabs, .dd-chips) { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 4px !important; border-radius: 16px !important; background: rgba(74,85,96,.10) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.inventory-tabs, .pm-tabs, .dd-chips) > :is(button, .chip-pick, .dd-chip) { flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 650 !important; padding: 9px 4px !important; border-radius: 13px !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.inventory-tabs, .pm-tabs, .dd-chips) > :is(button, .chip-pick, .dd-chip).is-on { background: #4A5560 !important; color: #fff !important; box-shadow: 0 4px 10px rgba(40,50,60,.22) !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl { display: flex !important; gap: 8px !important; flex-wrap: wrap; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl > .pm-chips, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl .pm-chips { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 4px !important; border-radius: 16px !important; background: rgba(74,85,96,.10) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; flex: 1 1 140px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl .pm-chips > .chip-pick { flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 650 !important; padding: 9px 4px !important; border-radius: 13px !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl .pm-chips > .chip-pick.is-on { background: #4A5560 !important; color: #fff !important; box-shadow: 0 4px 10px rgba(40,50,60,.22) !important; }
/* period choosers (excel, performance): one bar of three; the custom range opens under it */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 4px !important; padding: 4px !important;
  border-radius: 16px !important; background: rgba(74,85,96,.10) !important; box-shadow: none !important; border: 0 !important; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-custom-box, .performance-custom-box) { display: contents !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > button { flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 650 !important; padding: 9px 4px !important; border-radius: 13px !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; margin: 0 !important; display: block !important; grid-row: 1; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > button > :is(span, .performance-period-icon) { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) strong { font-size: 13px !important; font-weight: 650 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-custom-box, .performance-custom-box) > :is(span, .performance-period-icon) { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-custom-box, .performance-custom-box) > strong { flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 650 !important; padding: 9px 4px !important; border-radius: 13px !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; margin: 0 !important; display: block !important; grid-row: 1; grid-column: 2; cursor: pointer; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #report-periods > button:first-child, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #performance-periods > button:first-child { grid-column: 1; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #report-periods > button:last-child, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #performance-periods > button:last-child { grid-column: 3; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > button.is-on, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-custom-box, .performance-custom-box).is-on > strong { background: #4A5560 !important; color: #fff !important; box-shadow: 0 4px 10px rgba(40,50,60,.22) !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-date-range, .performance-date-range) { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-custom-box, .performance-custom-box).is-on > :is(.report-date-range, .performance-date-range) { display: flex !important; grid-column: 1 / -1; grid-row: 2; gap: 8px; align-items: flex-end;
  background: rgba(255,255,255,.7); border-radius: 13px; padding: 10px; margin-top: 4px; flex-wrap: nowrap; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-date-field, .performance-date-field) { flex: 1; min-width: 0; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-date-field, .performance-date-field) label { font-size: 11.5px; opacity: .6; }
/* excel report rows */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-overview-head { display: flex; align-items: center; justify-content: space-between; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-overview-head .block-title { font-size: 15.5px !important; font-weight: 750 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-note { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-status { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(31,157,107,.14); color: #17784F; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-status:empty { display: none; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-cards { display: block !important; margin-top: 8px; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important; border-radius: 0 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card:last-child { border-bottom: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card-main { display: flex !important; align-items: center; gap: 12px; flex: 1; min-width: 0; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card-icon { width: 40px; height: 40px; border-radius: 13px; flex: none; display: flex !important; align-items: center; justify-content: center; background: linear-gradient(#fff, #E3E6E9) !important; box-shadow: 0 3px 8px rgba(30,40,50,.14) !important; color: #3B4A54; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card-main strong { font-size: 14.5px; font-weight: 700; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card-main p { font-size: 12px; opacity: .6; margin: 3px 0 0; line-height: 1.5; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card-side { display: flex !important; align-items: center; gap: 10px; flex: none; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-card-side > span { font-size: 13px; font-weight: 700; opacity: .55; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .report-download { width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center;
  background: #4A5560 !important; background-image: none !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 10px rgba(40,50,60,.25) !important; }
/* number tiles */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#inventory-summary, .performance-kpis, .pm-summary) { display: grid !important; gap: 10px !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #inventory-summary { grid-template-columns: 1fr 1fr !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.performance-kpis, .pm-summary) { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.inventory-summary-card, .performance-card, .pm-sum-cell) { background: rgba(255,255,255,.62) !important; background-image: none !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 8px 24px rgba(30,40,50,.08) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 20px !important; padding: 13px 14px !important; display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; text-align: start !important; justify-content: flex-start !important; gap: 4px !important; min-height: 0 !important; border-inline: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-card strong, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-sum-cell :is(b, strong) { font-size: 21px !important; font-weight: 800 !important; line-height: 1.1 !important; order: 1; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-card span, html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-sum-cell span { font-size: 11.5px !important; opacity: .6; order: 2; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .inventory-summary-card strong { font-size: 26px !important; font-weight: 800 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .inventory-summary-card span { font-size: 12px !important; opacity: .6; }
/* performance rates in rings */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-analysis-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-analysis-card { margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-analysis-head { display: flex !important; flex-direction: column-reverse !important; align-items: flex-start !important; gap: 10px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-analysis-head .block-title { font-size: 14.5px !important; font-weight: 750 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-analysis-note { font-size: 11.5px !important; opacity: .6; margin: 2px 0 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate.mx-ring { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px !important; font-weight: 800 !important; position: relative;
  background: conic-gradient(#4A5560 calc(var(--p, 0) * 1%), rgba(74,85,96,.13) 0) !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate.mx-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #EEF0F2; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate.mx-ring { isolation: isolate; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate.mx-ring > * { position: relative; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate-detail { font-size: 11.5px; opacity: .6; margin-top: 8px; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-filters-block { margin-top: 12px !important; }
/* inventory form cards */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page p.mx-card-title { font-size: 15.5px !important; font-weight: 750 !important; opacity: 1 !important; margin: 0 0 10px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .inventory-help { font-size: 12px !important; opacity: .6; background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; line-height: 1.6; }
/* invite steps */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .section-subhead.mx-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .section-subhead.mx-step i { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12.5px; font-weight: 800; background: #4A5560; color: #fff; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .section-subhead.mx-step b { font-size: 14.5px; font-weight: 750; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .invite-clinic-heading-icon { border-radius: 13px !important; background: linear-gradient(#fff, #E3E6E9) !important; box-shadow: 0 3px 8px rgba(30,40,50,.14) !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .invite-clinic-select { background: rgba(255,255,255,.9) !important; border: 0 !important; box-shadow: inset 0 1px 2px rgba(30,40,50,.08) !important; border-radius: 16px !important; }
/* activity log */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #audit-logs-list { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #audit-logs-list > .empty { padding: 20px 6px !important; }
/* Dark */
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.list-panel, .block, .report-overview-card, .performance-analysis-card, .performance-filters-block, .invite-clinic-card, .invite-choice-card, .mx-cta-card, #fz-due-panel, #fz-oo-panel, .fz-search-block, #fz-panel, #th-flow, .inventory-summary-card, .performance-card, .pm-sum-cell) { background: #DFDFDF !important; box-shadow: none !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.unified-panel, .inventory-overview-card) { background: transparent !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate.mx-ring::before { background: #DFDFDF; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.inventory-tabs, .pm-tabs, .dd-chips) > :is(button, .chip-pick, .dd-chip).is-on, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl .pm-chips > .chip-pick.is-on,
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > button.is-on, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(.report-custom-box, .performance-custom-box).is-on > strong { background: #C2C2C2 !important; color: #000 !important; box-shadow: none !important; }
html[data-theme="dark"] .mx-seg button.on { background: #C2C2C2; color: #000; box-shadow: none; }
html[data-theme="dark"] .mx-search { background: #DFDFDF; box-shadow: none; }
html[data-theme="dark"] .mx-ev::before { background: #DFDFDF; }

html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > [data-period="month"] { grid-column: 1 !important; grid-row: 1 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > [data-period="custom"] > strong { grid-column: 2 !important; grid-row: 1 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > [data-period="all"] { grid-column: 3 !important; grid-row: 1 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page :is(#report-periods, #performance-periods) > [data-period="custom"].is-on > :is(.report-date-range, .performance-date-range) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl { flex-direction: row !important; align-items: stretch !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .pm-ctl .pm-chips { flex: 1 1 140px !important; height: auto !important; min-height: 0 !important; align-items: stretch !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page .performance-rate.mx-ring::before { z-index: -1; }

html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #pm-tabs { background: transparent !important; padding: 0 !important; display: block !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #pm-tabs > .pm-chips { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 4px !important; border-radius: 16px !important; background: rgba(74,85,96,.10) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; margin: 0 0 12px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #pm-tabs > .pm-chips > .chip-pick { flex: 1 1 0 !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 650 !important; padding: 9px 4px !important; border-radius: 13px !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-height: 0 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-freeze, #view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague).um-page #pm-tabs > .pm-chips > .chip-pick.is-on { background: #4A5560 !important; color: #fff !important; box-shadow: 0 4px 10px rgba(40,50,60,.22) !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root #view-pm #pm-tabs > .pm-chips > .chip-pick.is-on { background: #C2C2C2 !important; color: #000 !important; box-shadow: none !important; }
/* v1352: dashboard -- the first tile opens a From / To range under it */
#view-dashboard .dx-k.dx-hero { cursor: pointer; }
#view-dashboard .dx-k.dx-hero .tile-ico { position: relative; }
#view-dashboard .dx-k.dx-hero::after { content: "⌄"; font-size: 18px; opacity: .8; margin-inline-start: 2px; transition: transform .2s ease; }
#view-dashboard .dx-k.dx-hero.is-open::after { transform: rotate(180deg); }
#view-dashboard .dx-k.dx-hero .dx-k-l { white-space: nowrap; }
#view-dashboard .dx-range { background: rgba(255,255,255,.62); border-radius: 22px; padding: 12px 14px 4px; box-shadow: 0 6px 18px rgba(30,40,50,.08); margin: 10px 0 0; }
#view-dashboard .dx-range.hidden { display: none; }
#view-dashboard .dx-range-chips { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(74,85,96,.10); margin-bottom: 10px; }
#view-dashboard .dx-range-chips button { flex: 1; border: 0; background: transparent; font: inherit; color: inherit; font-size: 13px; font-weight: 650; padding: 9px 4px; border-radius: 13px; cursor: pointer; white-space: nowrap; }
#view-dashboard .dx-range-chips button.on { background: #4A5560; color: #fff; box-shadow: 0 4px 10px rgba(40,50,60,.22); }
#view-dashboard .dx-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#view-dashboard .dx-range-row .field { min-width: 0; margin-bottom: 10px; }
#view-dashboard .dx-range-row .label { font-size: 12px; opacity: .65; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-dashboard .dx-range { background: #DFDFDF !important; box-shadow: none !important; }
html[data-theme="dark"] #view-dashboard .dx-range-chips button.on { background: #C2C2C2; color: #000; box-shadow: none; }
#view-dashboard .dx-kpis > .dx-range { grid-column: 1 / -1; margin: 0; }

/* v1353 — tank detail facts as tiles */
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tk-t{background:rgba(74,85,96,.07);border-radius:14px;padding:8px 10px 9px;text-align:start;min-width:0;position:relative}
.tk-t b{display:block;font-size:17px;font-weight:800;line-height:1.25;color:#2B3640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-t b small{font-size:11px;font-weight:700;opacity:.55}
.tk-t > span{display:block;font-size:11px;font-weight:600;color:#6A7681;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-bar{display:block;height:5px;border-radius:999px;background:rgba(74,85,96,.13);margin-top:6px;overflow:hidden}
.tk-bar em{display:block;height:100%;border-radius:inherit;background:#4A5560}
.tk-bar.is-n2 em{background:linear-gradient(90deg,#1E64DC,#14B8A6)}.tk-bar.is-mid em{background:#E0951E}.tk-bar.is-low em{background:#D84A42}
#tank-body .tank-detail-facts.tkf{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important;align-content:center!important}
#tank-body .tank-detail-facts.tkf .tk-t{padding:10px 11px}
#tank-body .tank-detail-facts.tkf .tk-wide{grid-column:1/-1}
#tank-body .tank-detail-facts.tkf .tk-t b{font-size:19px}
.tk-sub{display:block;font-size:10.5px;opacity:.5;margin-top:1px}
.tk-ring{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:conic-gradient(#4A5560 calc(var(--p)*1%),rgba(74,85,96,.15) 0)}
.tk-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#F1F3F5}


/* v1354 — Laboratory / Management pager: the two pages slide inside the card while dragging */
#home-quick .hq-card{position:relative}
#home-quick .hq-card > .grid{touch-action:pan-y}

/* v1356: the page itself already slides in with its entry class; the admin pages' own page animation used to start
   AGAIN the moment that entry class was taken off (~0.6 s in) -- the hiccup when Dashboard / Performance / Inventory open.
   Only the card cascade inside stays on .admin-menu-entry. */
.view.admin-menu-entry:not(.is-entering):not(.enter-left):not(.enter-right):not(.is-returning){animation:none!important}

/* v1357: Performance / Excel reports custom range -- the calendar buttons, the date text and the From / To labels
   inherited the white text of the selected period and were nearly invisible; same colours as the other menus now. */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-performance, #view-excel-reports):is(#view-performance, #view-excel-reports) :is(.performance-custom-box, .report-custom-box) :is(.date-btn, input){color:#3B4A54!important;-webkit-text-fill-color:#3B4A54!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-performance, #view-excel-reports):is(#view-performance, #view-excel-reports) :is(.performance-custom-box, .report-custom-box) .date-btn svg{stroke:#3B4A54!important;color:#3B4A54!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-performance, #view-excel-reports):is(#view-performance, #view-excel-reports) :is(.performance-custom-box, .report-custom-box) :is(label, .label, .report-date-separator, .performance-date-separator){color:#6A7681!important;opacity:1!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root :is(#view-performance, #view-excel-reports):is(#view-performance, #view-excel-reports) :is(.performance-custom-box, .report-custom-box) input::placeholder{color:#9AA3AB!important;-webkit-text-fill-color:#9AA3AB!important}

/* v1359 — tank page overview: one card in the approved design (replaces the facts box + tank drawing) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{display:block!important;min-height:0!important;padding:12px 12px 10px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx{background:rgba(255,255,255,.66);border-radius:26px;padding:16px;box-shadow:0 10px 26px rgba(30,40,50,.10);direction:rtl;text-align:start}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-ic{width:46px;height:46px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#5A6773,#3E4952);color:#fff;box-shadow:0 6px 14px rgba(40,50,60,.22)}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-nm{flex:1;min-width:0}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-nm b{font-size:19px;font-weight:800;display:block;color:#2B3640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-nm small{font-size:12px;color:#6A7681;display:block}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pill{font-size:12px;font-weight:800;padding:6px 11px;border-radius:999px;white-space:nowrap;background:rgba(74,85,96,.10);color:#3B4A54}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pill.ok{background:rgba(46,160,110,.14);color:#1F7A52}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pill.wa{background:rgba(230,150,30,.16);color:#9A5B00}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pill.bl{background:rgba(216,74,66,.14);color:#B2302A}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-mid{display:flex;gap:12px;align-items:stretch;margin-bottom:12px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge{width:58px;flex:none;border-radius:18px;background:rgba(74,85,96,.10);position:relative;overflow:hidden;min-height:122px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#7BE3A0 0%,#2CC3A0 45%,#13A7A6 100%)}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge.wa i{background:linear-gradient(180deg,#F3C46B,#E0951E)}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge.bl i{background:linear-gradient(180deg,#F08A80,#D84A42)}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-r{flex:1;min-width:0;display:grid;gap:8px;align-content:start}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv > div{background:rgba(74,85,96,.07);border-radius:14px;padding:10px 11px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv b{display:block;font-size:19px;font-weight:800;color:#2B3640;text-align:start}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv span{font-size:11.5px;color:#6A7681}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills{display:flex;gap:6px;flex-wrap:wrap}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(74,85,96,.09);color:#3B4A54;white-space:nowrap}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span.bl{background:rgba(70,120,220,.13);color:#2F5BB0}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span.red{background:rgba(216,74,66,.14);color:#B2302A}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-note{font-size:11.5px;color:#9A5B00;margin:-4px 0 10px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-act{display:flex;gap:8px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-btn{flex:1;height:50px;border:0;border-radius:17px;background:#4A5560;color:#fff;font:inherit;font-size:15px;font-weight:800;box-shadow:0 8px 18px rgba(40,50,60,.22);cursor:pointer}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-rb{width:50px;height:50px;flex:none;border:0;border-radius:17px;background:rgba(74,85,96,.10);color:#3B4A54;display:flex;align-items:center;justify-content:center;cursor:pointer}
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-tank #tank-body .tdx{background:#DFDFDF!important;box-shadow:none!important}
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] #view-tank #tank-body .tdx-btn{background:#C2C2C2!important;color:#000!important;box-shadow:none!important}

/* v1361 — compact tank card */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{padding:10px 10px 24px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx{padding:12px;border-radius:22px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-h{gap:10px;margin-bottom:10px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-ic{width:38px;height:38px;border-radius:13px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-ic svg{width:20px;height:20px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-nm b{font-size:17px;line-height:1.2}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-nm small{font-size:11.5px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-mid{gap:10px;margin-bottom:10px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge{width:46px;min-height:0;border-radius:15px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge span{font-size:12.5px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-r{gap:6px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv{gap:6px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv > div{padding:7px 10px;border-radius:12px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv b{font-size:16.5px;line-height:1.25}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv span{font-size:11px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills{gap:5px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span{font-size:10.5px;padding:4px 8px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-act{gap:6px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-btn{height:42px;border-radius:14px;font-size:14px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-rb{width:42px;height:42px;border-radius:14px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-rb svg{width:18px;height:18px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills{display:grid;grid-template-columns:1fr 1fr;gap:6px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 6px;border-radius:12px;overflow:hidden;text-overflow:ellipsis}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span:nth-child(odd):last-child{grid-column:1/-1}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-r{align-content:stretch;grid-template-rows:auto 1fr}

/* v1362 — no glass shell behind the tank card; the card itself is full width and frosted glass */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0 0 22px!important;border-radius:0!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on::before,html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on::after{display:none!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx{background:rgba(255,255,255,.42)!important;backdrop-filter:blur(18px) saturate(150%)!important;-webkit-backdrop-filter:blur(18px) saturate(150%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 10px 28px rgba(30,40,50,.10),inset 0 1px 0 rgba(255,255,255,.6)!important;padding:14px!important}
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{background:transparent!important;box-shadow:none!important;border:0!important}
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root #view-tank #tank-body .tdx{background:rgba(223,223,223,.62)!important;border-color:rgba(255,255,255,.25)!important;box-shadow:none!important}

/* v1363 — the canisters start right under the position dots (the gap below the tank card was ~33px) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{padding-bottom:15px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on .tank-swipe-dots{bottom:3px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on ~ .tank-canister-scroll-layer > .acc{margin-top:0!important}

/* v1364 — smaller value boxes (value and label on one line) and a shorter tank card */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx{padding:12px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-h{margin-bottom:8px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-mid{margin-bottom:8px;gap:8px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-r{gap:5px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv{gap:5px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv > div{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:7px 10px;border-radius:12px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv b{font-size:15.5px;line-height:1.2}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv span{font-size:10.5px;white-space:nowrap}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills{gap:5px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span{padding:5px 6px;border-radius:11px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-gauge{width:42px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-btn{height:40px;border-radius:13px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-rb{width:40px;height:40px;border-radius:13px}

/* v1370 — canister cards: 4px apart (all of them) and a little taller */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-canister-scroll-layer > .acc{gap:4px!important;row-gap:4px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1{min-height:62px!important}

/* v1371 — canister cards a little taller (66px) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1{min-height:66px!important}

/* v1372 — the tank page reaches down to the bottom bar (there was a 16px strip where the pile got cut off) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank{padding-bottom:0!important}

/* v1375 — the strip around the tank card (where the dots are) blurs whatever scrolls underneath it, as the old glass shell did;
   without it a cane scrolling up behind showed sharp between the card and an open canister's header */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{backdrop-filter:blur(8px) saturate(120%)!important;-webkit-backdrop-filter:blur(8px) saturate(120%)!important}

/* v1376 — the blurred strip under the tank card reaches down to the top of the list (8px more) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on{padding-bottom:23px!important}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tank-detail-overview.tdx-on .tank-swipe-dots{bottom:11px!important}

/* v1379 — clinic sign-up (login page) and pending requests (Users page) */
#web-login-gate .wl-cap{font-size:12.5px;font-weight:800;color:#4A5560;margin:14px 4px 6px;text-align:start}
#web-login-gate .wl-check{display:flex;gap:10px;align-items:center;font-size:12.5px;color:#4A5560;margin:14px 4px;text-align:start;line-height:1.7;cursor:pointer}
#web-login-gate .wl-check input{width:20px;height:20px;flex:none;accent-color:#4A5560;margin:0}
#web-login-gate .wl-check a{color:#13867F;font-weight:800;text-decoration:underline;text-underline-offset:3px}
#web-login-gate .wl-hint{font-size:11.5px;margin:-2px 8px 6px;text-align:start}
#web-login-gate .wl-hint.ok{color:#1F7A52}#web-login-gate .wl-hint.bad{color:#B2302A}
#web-login-gate .wl-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
#web-login-gate .wl-reg-link{margin-top:10px}
#web-login-gate .wl-done{text-align:center;padding:6px 4px 10px}
#web-login-gate .wl-done-ic{width:64px;height:64px;margin:6px auto 12px;border-radius:22px;background:linear-gradient(145deg,#2CC3A0,#13A7A6);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(19,167,166,.3)}
#web-login-gate .wl-done h2{font-size:19px;margin:0 0 6px}
#web-login-gate .wl-done p{font-size:13px;color:#6A7681;line-height:1.8;margin:0 0 14px}
#web-login-gate .wl-done-steps{display:flex;gap:6px;margin-bottom:14px}
#web-login-gate .wl-done-steps div{flex:1;background:rgba(74,85,96,.07);border-radius:14px;padding:10px 4px;font-size:11.5px;color:#6A7681}
#web-login-gate .wl-done-steps b{display:block;font-size:16px;color:#2B3640}
#web-login-gate .wl-done-steps .on{background:rgba(46,160,110,.14);color:#1F7A52}
#web-login-gate .wl-done-steps .on b{color:#1F7A52}
.sg-terms-ov{position:fixed;inset:0;z-index:9999;background:rgba(20,28,34,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.sg-terms-box{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;gap:8px;background:#F4F6F8;border-radius:26px;padding:18px 16px 14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sg-terms-box h2{font-size:17px;margin:0 0 4px;text-align:center}
.sg-terms-body{overflow:auto;flex:1;padding:0 4px;text-align:start}
.sg-terms-body h3{font-size:13.5px;margin:14px 0 4px;color:#2B3640}
.sg-terms-body p{font-size:12.5px;line-height:1.85;color:#4A5560;margin:0 0 4px}
.sgn-card{margin:14px 0 0;background:rgba(255,255,255,.66);border-radius:24px;padding:14px;box-shadow:0 8px 22px rgba(30,40,50,.08)}
.sgn-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 6px}
.sgn-head b{font-size:15px}
.sgn-pill{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(230,150,30,.16);color:#9A5B00}
.sgn-row{padding:12px 2px;border-top:1px solid rgba(74,85,96,.10)}
.sgn-head + .sgn-row{border-top:0}
.sgn-top{display:flex;gap:10px;align-items:flex-start}
.sgn-ic{width:40px;height:40px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(74,85,96,.08);color:#3B4A54}
.sgn-t{flex:1;min-width:0;text-align:start}.sgn-t b{display:block;font-size:15px;margin-bottom:2px}
.sgn-t small{display:block;font-size:12px;color:#6A7681;line-height:1.7}
.sgn-act{display:flex;gap:8px;margin-top:10px}
.sgn-act button{border:0;font:inherit;font-weight:800;font-size:13.5px;height:42px;border-radius:14px;cursor:pointer}
.sgn-ok{flex:1;background:#4A5560;color:#fff;box-shadow:0 6px 14px rgba(40,50,60,.2)}
.sgn-no{padding:0 20px;background:rgba(216,74,66,.12);color:#B2302A}
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme] .sgn-card{background:#DFDFDF!important;box-shadow:none!important}
html[data-theme="dark"] .sgn-ok{background:#C2C2C2;color:#000;box-shadow:none}

/* v1380 — settings icons: plain line icons, same tone as the rest of the menu */
#view-settings .row-ico.row-ico-svg{display:inline-flex;align-items:center;justify-content:center;color:var(--ink,#3a4652);opacity:.85;filter:none}
#view-settings .row-ico.row-ico-svg svg{display:block}
html[data-theme="dark"] #view-settings .row-ico.row-ico-svg{color:#cfd6dc}
/* v1380 — tank info boxes: same round corners as the other boxes */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv > div,
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-pills span{border-radius:999px}
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root #view-tank #tank-body .tdx-kv > div{padding-inline:14px}

/* v1380 — "register as donor" is its own box, no longer inside the treatment-plan box */
#view-register .plan-donor-group{margin:0 0 18px;padding:14px;border:1px solid var(--glass-line);border-top:1px solid var(--glass-line);border-radius:var(--r-card);background:rgba(255,255,255,.34);box-shadow:var(--glass-edge),var(--glass-shadow)}
#view-register .plan-donor-group #reg-donor-field,#view-register .plan-donor-group #reg-donor-field .check{margin-bottom:0}

/* v1381 — subscription cards: compact, one look per tier (basic white, pro green-teal halo, premium logo gradient + gold crown) */
.sub-plan{position:relative;border-radius:26px;padding:14px 16px;margin:0 0 30px;overflow:visible;background:#fff;border:1px solid rgba(40,55,70,.07);box-shadow:0 1px 0 #fff inset,0 8px 22px rgba(30,45,60,.07)}
.sub-plan .sp-row{display:flex;align-items:center;gap:12px}
.sub-plan .sp-em{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#f1f3f5,#e2e6ea);color:#58636e;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(30,45,60,.08)}
.sub-plan .sp-nm{flex:1;min-width:0}
.sub-plan .sp-n{font-weight:800;font-size:17px;letter-spacing:.2px}
.sub-plan .sp-per{font-size:11.5px;opacity:.62;margin-top:1px}
.sub-plan .sp-p{text-align:left;font-weight:800;line-height:1.05;display:flex;flex-direction:column;align-items:flex-start}
.sub-plan .sp-p b{font-size:23px;font-weight:800}
.sub-plan .sp-p small{font-size:11px;font-weight:500;opacity:.65;margin-top:2px}
.sub-plan .sp-old{font-size:11.5px;font-weight:500;opacity:.55;text-decoration:line-through;margin-bottom:2px}
.sub-plan .btn{width:100%;margin-top:12px;height:40px;min-height:40px;border-radius:15px;font-weight:700;font-size:14px;padding:0}
.sub-plan.sp-basic .btn{background:#3f4852;color:#fff}
/* pro */
.sub-plan.sp-pro{background:linear-gradient(160deg,#fff,#f1faf7);border:1px solid rgba(40,170,150,.35);box-shadow:0 0 0 4px rgba(60,185,150,.10),0 14px 34px -6px rgba(40,175,150,.38),0 0 36px rgba(90,200,130,.22)}
.sub-plan.sp-pro .sp-em{background:linear-gradient(145deg,#6fcf7c,#1fa7a3);color:#fff;box-shadow:0 6px 14px rgba(31,167,163,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.sub-plan.sp-pro .sp-p b{background:linear-gradient(135deg,#2a9d5a,#16908f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub-plan.sp-pro .btn{background:linear-gradient(135deg,#5cbd6e,#1fa7a3);color:#fff;box-shadow:0 8px 16px -4px rgba(31,167,163,.5)}
.sub-plan .sp-tag{position:absolute;top:-11px;left:18px;font-size:10.5px;font-weight:700;padding:3px 11px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#5cbd6e,#1fa7a3);box-shadow:0 4px 10px rgba(31,167,163,.4)}
/* premium */
.sub-plan.sp-premium{color:#fff;padding-top:20px;border:1.5px solid transparent;background:radial-gradient(120% 140% at 85% -20%,rgba(255,255,255,.28),transparent 45%),linear-gradient(135deg,#58bd68 0%,#25ab8c 48%,#127f93 100%);box-shadow:0 0 0 1.5px #e9c25a inset,0 0 0 3.5px rgba(255,236,170,.35) inset,0 18px 38px -8px rgba(18,127,147,.55),0 0 0 1px rgba(160,110,15,.35)}
.sub-plan.sp-premium::after{content:"";position:absolute;inset:0;border-radius:26px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);pointer-events:none}
.sub-plan.sp-premium .sp-em{background:linear-gradient(145deg,#fff2b8,#e9b83a 55%,#b98414);color:#6b4604;box-shadow:0 6px 14px rgba(120,80,0,.4),inset 0 1px 0 rgba(255,255,255,.7)}
.sub-plan.sp-premium .sp-per{opacity:.85}
.sub-plan.sp-premium .sp-p b{background:linear-gradient(180deg,#fffbe8,#ffe9a0 60%,#f4c542);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px rgba(0,60,60,.35))}
.sub-plan.sp-premium .btn{background:linear-gradient(180deg,#fff0b0,#efc04a 60%,#d79d22);color:#5b3b03;box-shadow:0 8px 16px -4px rgba(90,60,0,.55),inset 0 1px 0 rgba(255,255,255,.7);position:relative;z-index:1}
.sub-plan .sp-crown{position:absolute;top:-24px;left:50%;margin-left:-26px;filter:drop-shadow(0 3px 4px rgba(90,60,0,.45));z-index:2}
.sub-plan .sp-spk{position:absolute;color:#fff6c8;z-index:2}
.sub-plan .sp-spk1{top:8px;left:calc(50% + 40px)}.sub-plan .sp-spk2{top:2px;left:calc(50% - 56px)}
html[data-theme="dark"] .sub-plan.sp-basic{background:#2b3138;border-color:rgba(255,255,255,.08);color:#e6eaee}
html[data-theme="dark"] .sub-plan.sp-pro{background:linear-gradient(160deg,#27383a,#223033);color:#e6f3f0}
html[data-look][data-look][data-look][data-look]:root:root .sub-plan.sp-pro .btn.btn-primary{background:linear-gradient(135deg,#5cbd6e,#1fa7a3) !important;color:#fff !important;border:0 !important;box-shadow:0 8px 16px -4px rgba(31,167,163,.5) !important}
html[data-look][data-look][data-look][data-look]:root:root .sub-plan.sp-premium .btn.btn-primary{background:linear-gradient(180deg,#fff0b0,#efc04a 60%,#d79d22) !important;color:#5b3b03 !important;border:0 !important;box-shadow:0 8px 16px -4px rgba(90,60,0,.55),inset 0 1px 0 rgba(255,255,255,.7) !important}
html[data-look][data-look][data-look][data-look]:root:root .sub-plan.sp-basic .btn.btn-primary{background:#3f4852 !important;color:#fff !important;border:0 !important;box-shadow:none !important}

/* v1383 — LN2 settings boxes in the tank edit page: the same round boxes as every other field */
html:root:root #view-tank-edit .tank-n2-settings-panel input{box-sizing:border-box;width:100%;min-height:56px;padding:0 20px;border:0 !important;border-radius:22px !important;background:#fff;box-shadow:none !important;font:inherit;font-size:16px;color:inherit;outline:0;-moz-appearance:textfield;appearance:none}
html:root:root #view-tank-edit .tank-n2-settings-panel input::-webkit-outer-spin-button,html:root:root #view-tank-edit .tank-n2-settings-panel input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html:root:root #view-tank-edit .tank-n2-settings-panel input:focus{box-shadow:0 0 0 2px rgba(31,167,163,.45) !important}
html[data-theme="dark"]:root #view-tank-edit .tank-n2-settings-panel input{background:#2b3138}
/* v1383 — "Ask the assistant": the sparkle sits right beside the words, not at the far edge */
html:root:root .pf-card .pf-trace-tools .pf-tool.ai-spark{flex-direction:row !important;justify-content:center !important;align-items:center;gap:6px !important}
html:root:root .pf-card .pf-trace-tools .pf-tool.ai-spark::before{margin:0 !important;vertical-align:baseline}

/* v1384 — after Back the nav bar is shown in its final look at once: no blur/background/opacity fade (it showed as a passing shadow above the bar) */
html.back-settle .tabbar, html.back-settle .topbar { transition: none !important; animation: none !important; }
html.back-settle .tabbar { opacity: 1 !important; transform: none !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }

/* v1389 — My home tiles (Settings) */
#view-settings .row.st-off { opacity: .55; }
.ht-wrap { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.ht-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.7); box-shadow: 0 1px 4px rgba(20,30,40,.08); }
.ht-n { width: 22px; text-align: center; color: var(--muted); font-size: 13px; flex: none; }
.ht-t { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink, #1F2A2E); }
.ht-b { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(20,30,40,.12); background: #fff; font-size: 15px; flex: none; cursor: pointer; }
.ht-b:disabled { opacity: .3; cursor: default; }
.ht-add { text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(20,30,40,.22); background: transparent; font-size: 14px; color: var(--ink, #1F2A2E); cursor: pointer; }
.ht-add:disabled { opacity: .4; }
.ht-note { font-size: 12.5px; color: var(--muted); }
.ht-err { color: #A33; }
.ht-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* v1390 — My home tiles: Save / Cancel always visible at the bottom of the sheet */
#sheet.ht-open .sheet-actions { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 calc(6px + env(safe-area-inset-bottom)); margin-top: 8px;
  background: linear-gradient(to bottom, rgba(236,239,242,0), rgba(236,239,242,.96) 22%); }
#sheet.ht-open .ht-btns { margin-top: 0; }
#sheet.ht-open .ht-btns { flex-direction: row; gap: 10px; }
#sheet.ht-open .ht-btns .btn { flex: 1; min-width: 0; margin: 0; }
.ht-wrap > .btn-quiet { margin-top: 10px; }
.ht-btns .btn:disabled { opacity: .45; }

/* v1395 — Google e-mail box on the staff-login page: round like every other field */
html:root:root #view-set-staff-login #ssl-google-email{box-sizing:border-box;width:100%;min-height:56px;padding:0 20px;border:0 !important;border-radius:22px !important;background:#fff;box-shadow:none !important;font:inherit;font-size:16px;color:inherit;outline:0;-webkit-appearance:none;appearance:none}
html:root:root #view-set-staff-login #ssl-google-email:focus{box-shadow:0 0 0 2px rgba(31,167,163,.45) !important}
html[data-theme="dark"]:root #view-set-staff-login #ssl-google-email{background:#2b3138}
/* v1395 — sign-out button on the profile page */
#view-my-profile .mp-logout{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;min-height:50px;border-radius:18px;color:#3F4852 !important;background:#FFFFFF !important;border:1px solid rgba(40,55,70,.10) !important;box-shadow:0 2px 8px rgba(30,45,60,.06) !important;font-weight:700}
#view-my-profile .mp-logout.hidden{display:none}
html[data-theme="dark"] #view-my-profile .mp-logout{color:#D5DCE1 !important;background:#2B3138 !important;border-color:rgba(255,255,255,.08) !important}

/* v1397 — Invite colleague: one calm grey/white card, role chips, validity switch, two link cards */
#view-invite-colleague .ivx{display:flex;flex-direction:column;gap:14px;margin-top:6px}
#view-invite-colleague .ivx-card{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:26px;padding:14px 16px 16px;box-shadow:0 8px 22px rgba(30,45,60,.07)}
#view-invite-colleague .ivx-clinic{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:4px 0 2px;cursor:pointer}
#view-invite-colleague .ivx-clinic:disabled,#view-invite-colleague .ivx-clinic.is-locked{cursor:default}
#view-invite-colleague .ivx-ico{flex:0 0 auto;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#f4f6f7,#e2e6ea);color:#4A5560;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(30,45,60,.08)}
#view-invite-colleague .ivx-clinic-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#view-invite-colleague .ivx-clinic-name{font-size:17px;font-weight:800;color:#1F2A33;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-invite-colleague .ivx-chev{font-size:22px;color:#8A959E;padding:0 4px}
#view-invite-colleague .ivx-chev.hidden{display:none}
#view-invite-colleague .ivx-sep{height:1px;background:rgba(0,0,0,.06);margin:12px 0 4px}
#view-invite-colleague .ivx-k{display:block;font-size:12.5px;font-weight:700;color:#6A7681;margin:12px 2px 7px}
#view-invite-colleague .ivx-clinic .ivx-k{margin:0}
#view-invite-colleague .ivx-in{box-sizing:border-box;width:100%;min-height:52px;padding:0 18px;border:0 !important;border-radius:18px !important;background:#fff;box-shadow:inset 0 0 0 1px rgba(40,55,70,.06) !important;font:inherit;font-size:16px;color:inherit;outline:0}
#view-invite-colleague .ivx-in:focus{box-shadow:inset 0 0 0 2px rgba(63,72,82,.35) !important}
#view-invite-colleague .ivx-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#view-invite-colleague .ivx-chip{all:unset;box-sizing:border-box;min-height:44px;padding:6px 10px;border-radius:15px;background:#fff;box-shadow:inset 0 0 0 1px rgba(40,55,70,.08);display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:700;color:#3F4852;cursor:pointer;transition:background .15s,color .15s}
#view-invite-colleague .ivx-chip.on{background:#3F4852;color:#fff;box-shadow:0 6px 14px -4px rgba(40,50,60,.45)}
#view-invite-colleague .ivx-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:rgba(63,72,82,.08)}
#view-invite-colleague .ivx-segb{all:unset;box-sizing:border-box;min-height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:#5A6570;cursor:pointer}
#view-invite-colleague .ivx-segb.on{background:#fff;color:#1F2A33;box-shadow:0 2px 8px rgba(30,45,60,.12)}
#view-invite-colleague .ivx-err{margin:12px 2px 0;font-size:13px;font-weight:600;color:#5A6570}
#view-invite-colleague .ivx-err.hidden{display:none}
#view-invite-colleague .ivx-go{min-height:54px;border-radius:20px;font-size:16px;font-weight:800}
#view-invite-colleague .ivx-result{display:flex;flex-direction:column;gap:10px}
#view-invite-colleague .ivx-result.hidden{display:none}
#view-invite-colleague .ivx-res-head{padding:4px 6px}
#view-invite-colleague .ivx-res-t{font-size:17px;font-weight:800;color:#1F2A33}
#view-invite-colleague .ivx-res-s{font-size:13px;color:#4A5560;margin-top:2px}
#view-invite-colleague .ivx-res-n{font-size:12px;color:#6A7681;margin-top:4px}
#view-invite-colleague .ivx-link{background:#fff;border-radius:22px;padding:14px;box-shadow:0 6px 18px rgba(30,45,60,.07)}
#view-invite-colleague .ivx-link-top{display:flex;align-items:center;gap:12px}
#view-invite-colleague .ivx-link-tx{flex:1;min-width:0}
#view-invite-colleague .ivx-link-t{font-size:15.5px;font-weight:800;color:#1F2A33}
#view-invite-colleague .ivx-link-s{font-size:12.5px;color:#6A7681;margin-top:1px}
#view-invite-colleague .ivx-url{margin-top:10px;padding:9px 12px;border-radius:12px;background:#F1F3F5;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#4A5560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-invite-colleague .ivx-btns{display:flex;gap:8px;margin-top:10px}
#view-invite-colleague .ivx-b{flex:1;min-height:44px;border-radius:15px;font-weight:700;margin:0}
#view-invite-colleague .ivx-btns .ivx-b:first-child{background:#3F4852 !important;color:#fff !important;border:0 !important}
html[data-theme="dark"] #view-invite-colleague .ivx-card{background:rgba(40,46,52,.8);border-color:rgba(255,255,255,.06)}
html[data-theme="dark"] #view-invite-colleague .ivx-in,html[data-theme="dark"] #view-invite-colleague .ivx-chip,html[data-theme="dark"] #view-invite-colleague .ivx-link{background:#2B3138;color:#E1E6EA}
html[data-theme="dark"] #view-invite-colleague .ivx-chip.on{background:#E1E6EA;color:#1F2A33}
html[data-theme="dark"] #view-invite-colleague .ivx-clinic-name,html[data-theme="dark"] #view-invite-colleague .ivx-res-t,html[data-theme="dark"] #view-invite-colleague .ivx-link-t{color:#E8EDF0}
html[data-theme="dark"] #view-invite-colleague .ivx-url{background:#20262C;color:#B9C3CA}

/* v1398 — "Sign in with Google": our own full-width box (logo + words, never an e-mail), same width as the fields,
   centred in every language; Google's real button lies invisibly on top of it and takes the tap */
.wl-card .wl-google-box{align-items:stretch !important;width:100%}
.wl-card .wl-g-wrap{position:relative;width:100%;height:54px;direction:ltr}
.wl-card .wl-g-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:18px;background:#fff;border:1px solid rgba(40,55,70,.10);box-shadow:0 2px 8px rgba(30,45,60,.06);font-size:16px;font-weight:700;color:#3F4852;pointer-events:none}
.wl-card .wl-g-hit{position:absolute;inset:0;display:flex !important;align-items:center;justify-content:center;min-height:0 !important;opacity:.011;overflow:hidden;border-radius:18px}
.wl-card .wl-g-hit > div,.wl-card .wl-g-hit iframe{transform:scale(1.35);transform-origin:center}
.wl-card .wl-g-wrap:active .wl-g-face{transform:translateY(1px);background:#F4F6F7}

/* v1399 — the sign-in / sign-up page scrolls when it is taller than the screen (the clinic sign-up form is):
   it was a fixed full-screen box with overflow hidden and its content centred, so the top and bottom were cut off */
html[data-look][data-look][data-look] #web-login-gate,#web-login-gate{overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;justify-content:flex-start !important;align-items:center;touch-action:pan-y}
#web-login-gate > .wl-card,#web-login-gate > .web-login-card{margin:auto 0 !important;flex:0 0 auto}
#web-login-gate::after{content:"";flex:0 0 env(safe-area-inset-bottom,0px)}
#web-login-gate > .wl-bg{position:fixed}

/* v1402 — clinics & users (super admin): a plain grey/white list */
#view-users-management .ucx-sum{display:flex !important;gap:8px;flex-wrap:wrap;margin:6px 0 0;padding:0;background:none !important;box-shadow:none !important;border:0 !important}
#view-users-management .ucx-pill{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(40,55,70,.07);font-size:13px;color:#5A6570}
#view-users-management .ucx-pill b{font-size:17px;font-weight:800;color:#1F2A33}
#view-users-management .ucx{display:flex;flex-direction:column;gap:10px;margin-top:12px}
#view-users-management .ucx-q{box-sizing:border-box;width:100%;min-height:48px;padding:0 18px;border:0 !important;border-radius:16px !important;background:#fff;box-shadow:inset 0 0 0 1px rgba(40,55,70,.07) !important;font:inherit;font-size:15px;outline:0}
#view-users-management .ucx-card{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:26px;padding:6px 8px;box-shadow:0 8px 22px rgba(30,45,60,.07)}
#view-users-management .ucx-row{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:12px 8px;cursor:pointer;border-radius:18px}
#view-users-management .ucx-row + .ucx-row{border-top:1px solid rgba(0,0,0,.06);border-radius:0}
#view-users-management .ucx-row:active{background:rgba(63,72,82,.06)}
#view-users-management .ucx-ico{flex:0 0 auto;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#f4f6f7,#e2e6ea);color:#4A5560;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(30,45,60,.08)}
#view-users-management .ucx-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#view-users-management .ucx-n{font-size:16px;font-weight:800;color:#1F2A33;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-users-management .ucx-s{font-size:12.5px;color:#6A7681}
#view-users-management .ucx-st{flex:0 0 auto;font-size:12px;font-weight:700;color:#4A5560;background:rgba(63,72,82,.07);padding:5px 10px;border-radius:999px;white-space:nowrap}
#view-users-management .ucx-st.is-soon{background:#3F4852;color:#fff}
#view-users-management .ucx-st.is-off{background:transparent;color:#8A959E;box-shadow:inset 0 0 0 1px rgba(63,72,82,.18)}
#view-users-management .ucx-chev{color:#9AA4AC;font-size:20px;padding:0 2px}
#view-users-management .ucx-add .ucx-ico{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(63,72,82,.25)}
#view-users-management .ucx-add .ucx-n{font-size:15px;color:#4A5560;font-weight:700}
#view-users-management .ucx-empty{padding:16px;text-align:center;color:#6A7681;font-size:14px}
html[data-theme="dark"] #view-users-management .ucx-card{background:rgba(40,46,52,.8);border-color:rgba(255,255,255,.06)}
html[data-theme="dark"] #view-users-management .ucx-n,html[data-theme="dark"] #view-users-management .ucx-pill b{color:#E8EDF0}
html[data-theme="dark"] #view-users-management .ucx-pill,html[data-theme="dark"] #view-users-management .ucx-q{background:#2B3138;color:#C9D1D7}
html[data-theme="dark"] #view-users-management .ucx-st{color:#D5DCE1;background:rgba(255,255,255,.08)}
html[data-theme="dark"] #view-users-management .ucx-st.is-soon{background:#E1E6EA;color:#1F2A33}

/* v1404: equal, standard 14px rhythm on home: header -> date -> today card -> all sections */
#view-home > .today-datebox, #view-home .today-datebox:not(.pinned-box-float) { margin-top: 14px !important; margin-bottom: 0 !important; }
#view-home #home-quick { margin-top: 14px !important; }
#view-home #home-quick > .hq-card { margin: 0 !important; }
#view-home #home-quick > .hq-all { margin: 14px 0 0 !important; }
#view-home.home-quick-on { padding-top: 0 !important; row-gap: 0 !important; gap: 0 !important; }
#view-home.home-quick-on > .today-page { gap: 0 !important; }


/* v1405: application tour — soft spotlight ring + plain-look card, same rhythm as the menu */
.application-tour .tour-ring{position:fixed;z-index:10001;pointer-events:none;box-shadow:0 0 0 100vmax rgba(24,32,40,.58);transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),border-radius .3s}
.application-tour.tour-live .tour-ring,.application-tour.tour-live .tour-card{transition:none}
.application-tour .tour-card{position:fixed;z-index:10002;width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:18px 18px 14px;border-radius:26px;background:#F4F5F7;color:#1B252C;box-shadow:0 22px 44px -14px rgba(20,30,40,.45),0 2px 0 rgba(255,255,255,.7) inset;transition:top .3s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1)}
.application-tour .tour-dots{display:flex;gap:5px;margin-bottom:12px}
.application-tour .tour-dots i{display:block;width:6px;height:6px;border-radius:3px;background:#C9CED3;transition:width .25s,background .25s}
.application-tour .tour-dots i.on{width:18px;background:#4A5560}
.application-tour .tour-card h3{margin:0 0 6px;font-size:18px;font-weight:800;color:#1B252C}
.application-tour .tour-card p{margin:0;color:#4B5963;font-size:14px;line-height:1.7}
.application-tour .tour-actions{display:flex;align-items:center;gap:8px;margin-top:16px}
.application-tour .tour-spacer{flex:1}
.application-tour .tour-actions button{border:0;border-radius:16px;padding:10px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.application-tour .tour-skip{background:transparent;color:#6A7782;padding-inline:6px}
.application-tour .tour-back{background:#E3E6E9;color:#3B4A55}
.application-tour .tour-next{background:#4A5560;color:#fff;min-width:92px;box-shadow:0 6px 14px -6px rgba(30,40,50,.5)}
html[data-theme="dark"] .application-tour .tour-card{background:#2B3036;color:#EEF1F3;box-shadow:0 22px 44px -14px rgba(0,0,0,.7)}
html[data-theme="dark"] .application-tour .tour-card h3{color:#EEF1F3}
html[data-theme="dark"] .application-tour .tour-card p{color:#B9C2C9}
html[data-theme="dark"] .application-tour .tour-dots i{background:#4A525A}
html[data-theme="dark"] .application-tour .tour-dots i.on{background:#D6DADE}
html[data-theme="dark"] .application-tour .tour-back{background:#3A4047;color:#DDE2E6}
html[data-theme="dark"] .application-tour .tour-next{background:#C9CED3;color:#1B252C}
html[data-theme="dark"] .application-tour .tour-skip{color:#98A3AB}
html .application-tour .tour-actions button.tour-next{background:#4A5560 !important;color:#fff !important;box-shadow:0 6px 14px -6px rgba(30,40,50,.5) !important}
html .application-tour .tour-actions button.tour-back{background:#E3E6E9 !important;color:#3B4A55 !important;box-shadow:none !important}
html .application-tour .tour-actions button.tour-skip{background:transparent !important;color:#6A7782 !important;box-shadow:none !important}
html[data-theme="dark"] .application-tour .tour-actions button.tour-next{background:#C9CED3 !important;color:#1B252C !important}
html[data-theme="dark"] .application-tour .tour-actions button.tour-back{background:#3A4047 !important;color:#DDE2E6 !important}
html[data-theme="dark"] .application-tour .tour-actions button.tour-skip{color:#98A3AB !important}

/* v1406: glow behind the icon of a row with something new (same colours as the home tiles) */
html[data-look][data-look] #view-all-sections .al-row.al-new .al-ico{animation:tileGlow 1.8s ease-in-out infinite !important}
@media (prefers-reduced-motion:reduce){html[data-look][data-look] #view-all-sections .al-row.al-new .al-ico{animation:none !important;filter:drop-shadow(-2px -1px 4px rgba(30,100,220,.6)) drop-shadow(2px 1px 4px rgba(110,230,80,.6)) !important}}

/* v1406: red dot beside the name of a new list entry; gone once that entry is opened */
.row .row-title .dot.row-dot.row-dot-inline{position:static;display:inline-block;vertical-align:middle;margin-inline:8px 0;width:9px;height:9px;border-radius:50%;inset:auto;transform:none}
.row .row-title .dot.row-dot.row-dot-inline.row-dot-out{opacity:0;transform:scale(.4)}

/* v1411: offline saving -- the top bar gets longer text, a calmer colour while sending, and is tappable when something waits */
.offline-banner.ob-online { background: #4A5560; }
.offline-banner.ob-tap { cursor: pointer; }
.offline-banner { line-height: 1.5; }
.ob-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); max-width: min(88vw, 360px); z-index: 10050; background: #3B4A55; color: #fff; padding: 11px 18px; border-radius: 18px; font-size: 13.5px; line-height: 1.5; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 10px 24px -8px rgba(20,30,40,.5); }
.ob-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* v1415: multi-donor recipient (D1, D2 ...) */
.md-box { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.md-donor { background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.md-donor-head { display: flex; align-items: center; gap: 8px; }
.md-donor-head input { flex: 1 1 auto; min-width: 0; }
.md-donor-head .md-num { flex: 0 0 96px; text-align: center; }
.md-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-n { font-size: 13px; color: var(--muted, #66727c); white-space: nowrap; }
.md-x { border: 0; background: transparent; font-size: 16px; color: var(--muted, #66727c); padding: 4px 6px; }
.md-add { border: 1.5px dashed rgba(47,111,143,.5); border-radius: 14px; padding: 9px; background: transparent; color: var(--accent); font-size: 14px; }
.md-tag { display: inline-block; min-width: 30px; text-align: center; border-radius: 8px; padding: 2px 7px; font-size: 12px; font-weight: 700; color: #fff; background: #2f6f8f; vertical-align: middle; }
.md-d1 { background: #2f8f6f; } .md-d2 { background: #8f5a2f; } .md-d3 { background: #5a4f9f; } .md-d4 { background: #9f3f5a; }
.md-d5 { background: #3f7f9f; } .md-d6 { background: #7a8f2f; } .md-d7 { background: #9f6f2f; } .md-d8 { background: #4f5f6f; }
.md-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.md-cell { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #66727c); }
.md-cell input { text-align: center; }
.md-mii { text-align: center; font-weight: 700; padding: 10px 0; border-radius: 12px; background: rgba(47,143,111,.12); }
.md-mii.is-bad { background: rgba(200,60,60,.14); color: #b03030; }
.md-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.md-table th { font-weight: 400; color: var(--muted, #66727c); font-size: 11.5px; text-align: start; padding: 4px 3px; }
.md-table td { padding: 6px 3px; border-top: 1px solid rgba(0,0,0,.06); }
.md-emb-line { font-size: 13px; margin: 6px 0; line-height: 1.8; }

/* v1418: per-source defect picker in ICSI; the Today box is off the home page for now */
.md-def-pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#view-home .today-section { display: none !important; }

/* v1420: day / stage / grade row (refreeze, quality correction) */
.q-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
.q-pick .q-sel { min-width: 0; padding: 8px 6px; font-size: 14px; }
.q-pick.is-bad .q-sel:invalid, .q-pick.is-bad .q-sel { outline: 1px solid rgba(200,60,60,.35); }
.q-pick-label { margin: 6px 0 0; }

/* ===== v1421: Freeze landing -- summary, one row design, quiet search card ===== */
#view-freeze .fz2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
#view-freeze .fz2-stat { border-radius: 20px; padding: 14px 16px; background: rgba(255,255,255,.62); box-shadow: 0 6px 18px rgba(30,40,50,.07); display: flex; flex-direction: column; gap: 2px; }
#view-freeze .fz2-stat b { font-size: 26px; font-weight: 800; line-height: 1.1; }
#view-freeze .fz2-stat span { font-size: 12px; opacity: .62; line-height: 1.45; }
#view-freeze .fz2-stat.emb b { color: #17784F; } #view-freeze .fz2-stat.oo b { color: #2C5BA0; }
#view-freeze .fz2-empty { display: flex; align-items: center; gap: 14px; border-radius: 20px; padding: 16px; background: rgba(255,255,255,.55); margin-bottom: 14px; }
#view-freeze .fz2-empty.hidden { display: none; }
#view-freeze .fz2-empty i { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: rgba(31,157,107,.14); color: #17784F; flex: none; }
#view-freeze .fz2-empty b { display: block; font-size: 14.5px; } #view-freeze .fz2-empty small { display: block; font-size: 12px; opacity: .6; margin-top: 2px; }
html:root #view-freeze .row.fz2-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; border-radius: 18px !important; margin: 0 0 8px !important; background: rgba(255,255,255,.72) !important; box-shadow: 0 4px 14px rgba(30,40,50,.07) !important; min-height: 0 !important; }
html:root #view-freeze .row.fz2-row:last-child { margin-bottom: 0 !important; }
#view-freeze .fz2-badge { width: 48px; height: 48px; flex: none; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
#view-freeze .fz2-badge small { font-size: 9.5px; font-weight: 700; opacity: .75; margin-bottom: 3px; }
#view-freeze .fz2-badge b { font-size: 18px; font-weight: 800; }
#view-freeze .fz2-emb .fz2-badge { background: rgba(31,157,107,.13); color: #17784F; }
#view-freeze .fz2-oo .fz2-badge { background: rgba(60,110,190,.13); color: #2C5BA0; }
#view-freeze .fz2-row .row-main { flex: 1 1 auto; min-width: 0; }
#view-freeze .fz2-row .row-title { font-size: 15px; font-weight: 700; }
#view-freeze .fz2-row .row-sub { font-size: 12.5px; opacity: .62; margin-top: 3px; }
#view-freeze .fz2-tag { flex: none; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(74,85,96,.10); white-space: nowrap; }
#view-freeze .fz2-tag.wa { background: rgba(224,138,30,.16); color: #9A5C0C; } #view-freeze .fz2-tag.bl { background: rgba(60,110,190,.13); color: #2C5BA0; }
#view-freeze .fz2-chev { flex: none; font-size: 22px; opacity: .35; line-height: 1; }
html:root:root #view-freeze #fz-due, html:root:root #view-freeze #fz-oo { max-height: none !important; overflow: visible !important; }   /* the page scrolls, not a small box */
#view-freeze .fz2-row .row-sub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
#view-freeze .fz2-tag { max-width: 42%; white-space: normal; text-align: center; line-height: 1.35; }
#view-freeze .fz2-search-note { margin: -4px 0 12px !important; font-size: 12.5px !important; opacity: .62; }
html[data-theme="dark"] #view-freeze .fz2-stat, html[data-theme="dark"] #view-freeze .fz2-empty, html[data-theme="dark"]:root #view-freeze .row.fz2-row { background: rgba(255,255,255,.06) !important; }
html:root:root #view-freeze .fz-search-block { display: flex !important; flex-direction: column !important; }
html:root:root #view-freeze .fz-search-block > .mx-ct { order: 0 !important; }
html:root:root #view-freeze .fz-search-block > .fz2-search-note { order: 1 !important; }
html:root:root #view-freeze .fz-search-block > .searchbar { order: 2 !important; }
/* v1421b: no box inside a box -- the sections sit straight on the page; only the patient rows, the counters and the
   search field are cards */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-freeze.um-page :is(.list-panel, .unified-panel, #fz-due-panel, #fz-oo-panel, .fz-search-block, #fz-panel) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-freeze.um-page :is(#fz-due-panel, #fz-oo-panel, .fz-search-block, #fz-panel):not(.hidden) { margin: 0 0 22px !important; }
html:root:root #view-freeze .mx-ct { margin: 0 4px 10px !important; }
html:root:root #view-freeze .fz-search-block .searchbar { margin-bottom: 0 !important; }
html:root:root #view-freeze .fz2-search-note { margin: -4px 4px 10px !important; }
/* v1421c: one quiet colour -- grey badges, dark numbers, grey tags (no green / blue / orange) */
html:root:root #view-freeze .fz2-stat b, html:root:root #view-freeze .fz2-stat.emb b, html:root:root #view-freeze .fz2-stat.oo b { color: inherit !important; }
html:root:root #view-freeze :is(.fz2-emb, .fz2-oo) .fz2-badge { background: rgba(74,85,96,.09) !important; color: inherit !important; }
html:root:root #view-freeze .fz2-tag, html:root:root #view-freeze .fz2-tag.wa, html:root:root #view-freeze .fz2-tag.bl { background: rgba(74,85,96,.09) !important; color: inherit !important; opacity: .85; }
html:root:root:root #view-freeze .mx-pill, html:root:root:root #view-freeze .mx-pill.bl { background: rgba(74,85,96,.09) !important; color: inherit !important; }
html:root:root #view-freeze .fz2-empty i { background: rgba(74,85,96,.09) !important; color: inherit !important; }
/* v1421d: each list section is ONE box; the patients inside are plain rows split by a thin line (not boxes in a box) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-freeze.um-page :is(#fz-due-panel, #fz-oo-panel, #fz-undo-panel):not(.hidden) {
  background: rgba(255,255,255,.62) !important; border-radius: 22px !important; padding: 14px 14px 6px !important;
  box-shadow: 0 6px 18px rgba(30,40,50,.07) !important; margin: 0 0 14px !important; }
html:root:root:root #view-freeze :is(#fz-due-panel, #fz-oo-panel, #fz-undo-panel) .mx-ct { margin: 0 2px 6px !important; }
html:root:root:root #view-freeze .row.fz2-row { background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  margin: 0 !important; padding: 12px 2px !important; border-top: 1px solid rgba(74,85,96,.12) !important; }
html:root:root:root #view-freeze .row.fz2-row:first-child { border-top: 0 !important; }
html[data-theme="dark"]:root:root:root:root #view-freeze :is(#fz-due-panel, #fz-oo-panel):not(.hidden) { background: rgba(255,255,255,.06) !important; }
/* v1421e: the same rule for the other tool pages -- one box per section, nothing boxed inside it, no colours */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root :is(#view-thaw, #view-audit-logs, #view-embryology-inventory, #view-excel-reports, #view-pm, #view-performance, #view-invite-colleague, #view-tanks, #view-freeze).um-page :is(.list-panel, .block, .performance-filters-block, .performance-analysis-card, .report-overview-card, .invite-clinic-card, .invite-choice-card, .mx-cta-card, #fz-due-panel, #fz-oo-panel) :is(.empty, .performance-filter-group, .mx-cta-card, .list-panel, .block) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-tanks .list-panel .empty,
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-pm .empty { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-thaw.um-page .unified-panel { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-audit-logs .mx-audit-tools { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
html:root:root:root .um-page :is(.mx-pill, .mx-pill.ok, .mx-pill.wa, .mx-pill.bl) { background: rgba(74,85,96,.09) !important; color: inherit !important; }
html:root:root:root .um-page .mx-cta .ic { background: rgba(74,85,96,.09) !important; color: inherit !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root .mx-search input,
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root .mx-search input:focus { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root .um-page :is(.mx-pill, .mx-pill.ok, .mx-pill.wa, .mx-pill.bl) { background: rgba(74,85,96,.09) !important; color: inherit !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #view-audit-logs.um-page .mx-search > input[type="search"][autocomplete] { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html:root:root:root:root .um-page .report-status { background: rgba(74,85,96,.09) !important; color: inherit !important; }

/* v1422: "no embryo is good enough" -- a quiet text link under Save, not a button at the top */
html:root:root .fe-none-link { display: block; margin: 14px auto 4px; background: none !important; border: 0 !important; box-shadow: none !important; font: inherit; font-size: 13px; opacity: .6; text-decoration: underline; color: inherit; padding: 6px 10px; }

/* v1423: ET results -- the list scrolls with the page, compact rows, grey tag at the end */
html:root:root:root #view-et-results #et-results-list { max-height: none !important; height: auto !important; overflow: visible !important; }
html:root:root:root #view-et-results .row.etr-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 2px !important; min-height: 0 !important; }
html:root:root:root #view-et-results .row.etr-row .row-main { flex: 1 1 auto; min-width: 0; }
html:root:root:root #view-et-results .row.etr-row .row-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root:root:root #view-et-results .row.etr-row .row-sub { font-size: 12.5px; opacity: .6; margin-top: 2px; }
html:root:root:root #view-et-results .row.etr-row :is(.um-init, .um-avatar, .row-init) { box-shadow: none !important; background: rgba(74,85,96,.09) !important; }
#view-et-results .etr-tag { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(74,85,96,.09); white-space: nowrap; }
#view-et-results .etr-tag.is-open { background: transparent; box-shadow: inset 0 0 0 1px rgba(74,85,96,.30); opacity: .8; }
#view-et-results .etr-chev { flex: none; font-size: 22px; opacity: .35; line-height: 1; }
html:root:root:root #view-et-results .row.etr-row::after { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-et-results .row.etr-row[data-ini]::before { box-shadow: none !important; background: rgba(74,85,96,.09) !important; background-image: none !important; }

/* v1423: list pages scroll in one area under the title; a magnifier by the title brings the search back */
html:root:root:root .um-scroller { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 8px; }
html:root:root:root .um-scroller :is(.um-list, .rows) { max-height: none !important; overflow: visible !important; }
html:root:root:root .um-scroller > .searchbar { margin-top: 10px; }
html:root:root:root .um-scroller.um-pin > .searchbar { position: sticky !important; top: 0; z-index: 8; box-shadow: 0 8px 22px rgba(30,40,50,.16) !important; }
.um-head-find { display: flex !important; align-items: center; gap: 10px; }
.um-head-find > .view-title { flex: 1 1 auto; min-width: 0; }
.um-find { flex: none; width: 42px; height: 42px; border-radius: 14px; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.62); color: inherit; box-shadow: 0 4px 12px rgba(30,40,50,.08); }
.um-find.hidden { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root .um-head-find { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root .um-head-find > .view-title { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root .um-head-find > .um-find { margin: 0 !important; }

/* v1424: soft edge under the title instead of a hard cut; the list reaches the screen bottom under the tab bar */
html:root:root:root .um-scroller { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
html:root:root:root .um-scroller.um-at-top { -webkit-mask-image: none; mask-image: none; }
html:root:root:root .um-scroller.um-pin { -webkit-mask-image: none; mask-image: none; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root .um-scroller > .searchbar { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root .um-scroller.um-pin > .searchbar { background: rgba(244,245,247,.97) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme="dark"][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root .um-scroller.um-pin > .searchbar { background: rgba(30,34,38,.96) !important; }

/* v1425: patient file -- name and Messages boxes are frosted (matte) glass with plain black line icons; the file sits higher */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root :is(.pf-name-float.pf-patient-name, .pf-msg-float.pf-msg-box) {
  background: rgba(255,255,255,.40) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important; backdrop-filter: blur(18px) saturate(1.35) !important;
  border: 1px solid rgba(255,255,255,.55) !important; box-shadow: 0 6px 18px rgba(30,40,50,.10) !important; color: #1F2A33 !important; }
html[data-theme="dark"][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root :is(.pf-name-float.pf-patient-name, .pf-msg-float.pf-msg-box) { background: rgba(40,46,52,.45) !important; border-color: rgba(255,255,255,.10) !important; color: #EEF1F3 !important; }
.pf-name-float.pf-patient-name { display: none; align-items: center; gap: 8px; }
.pf-name-float.pf-patient-name.is-on { display: flex; }
.pf-name-float .pf-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ico { flex: none; color: inherit; }
:is(.pf-msg-box, .pf-msg-float) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html:root:root #view-patient-file { margin-top: -14px !important; }

/* v1426: every pinned box that the page scrolls under is the same frosted (matte) glass as the patient-file name box:
   pinned page titles (Register patient ...), pinned whole boxes, the tank's info card and its sticky canister / cane
   heads, and the search bar pinned over a list */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root
  :is(.pinned-title-float, .pinned-box-float, .tank-detail-overview-overlay,
      #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1, #view-tank .tank-cane > .acc-head) {
  background: rgba(255,255,255,.40) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important; backdrop-filter: blur(18px) saturate(1.35) !important;
  border: 1px solid rgba(255,255,255,.55) !important; box-shadow: 0 6px 18px rgba(30,40,50,.10) !important; }
html[data-theme="dark"][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root
  :is(.pinned-title-float, .pinned-box-float, .tank-detail-overview-overlay,
      #view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1, #view-tank .tank-cane > .acc-head) {
  background: rgba(40,46,52,.45) !important; border-color: rgba(255,255,255,.10) !important; }

/* v1428: the tank's canister and cane cards are milkier frosted glass, so the rows passing beneath them cannot be read
   (the other pinned boxes keep the v1426 glass) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root
  :is(#view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1, #view-tank .tank-cane > .acc-head) {
  background: rgba(244,245,247,.88) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important; backdrop-filter: blur(28px) saturate(1.4) !important; }
html[data-theme="dark"][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root
  :is(#view-tank .tank-canister-scroll-layer > .acc > .tank-cn > .acc-head.depth-1, #view-tank .tank-cane > .acc-head) {
  background: rgba(34,38,44,.88) !important; }

/* v1430: a list area that holds a pinned search bar is not faded at its top edge (the bar would fade with it) */
html:root:root:root .um-scroller.um-has-search { -webkit-mask-image: none !important; mask-image: none !important; }

/* v1432: ET results -- while a result is being entered the list steps aside and the form is the page */
html:root:root:root #view-et-results.etr-form-mode :is(#um-sc-et-results, .unified-panel > .view-head) { display: none !important; }
#view-et-results .etr-back { display: inline-block; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; opacity: .7; padding: 4px 2px 10px; color: inherit; }

/* v1433: every search box is a little lower and its text sits in the vertical middle */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root :is(.searchbar input[type="search"], .searchbar input, #bp-q, .mx-search input) {
  height: 42px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  line-height: 42px !important; box-sizing: border-box !important; }
html:root:root:root:root:root :is(.searchbar input[type="search"], .searchbar input, #bp-q, .mx-search input) {
  height: 42px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 42px !important; box-sizing: border-box !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root :is(.searchbar, #bp-search)::before { top: 50% !important; transform: translateY(-50%) !important; }
/* v1433: page titles sit a little further below the header (every page except the home screens) */
html:root:root:root:root #staff > section.view:not(#view-home):not(#view-home2):not(#view-all-sections):not(:has(.um-scroller.um-under)) { margin-top: 12px !important; }
/* v1434: on list pages whose title scrolls with the list, the list area starts under the header (not 12px below it),
   so the title and rows slide away under the header instead of being cut off in the gap. Same resting position. */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root .um-scroller:is(.um-has-search, .um-under) { margin-top: -30px !important; padding-top: 42px !important; overflow-x: hidden; }
/* v1434: list <-> result form change is a soft cross-fade instead of a jump */
@keyframes etrIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.etr-anim-in { animation: etrIn .6s cubic-bezier(.25,.75,.3,1) both; }
.etr-fading { transition: opacity .28s ease, transform .28s ease !important; opacity: 0 !important; transform: translateY(-8px); }

/* v1435: every list page -- the title scrolls away under the header, so no top fade on the list area */
html:root:root:root:root .um-scroller.um-under { -webkit-mask-image: none !important; mask-image: none !important; }
/* v1435: opening a patient from a list page */
html:root:root:root:root #staff > .view.um-pick-in { animation: etrIn .6s cubic-bezier(.4,0,.2,1) both !important; }
html:root:root:root:root #staff > .view.um-pick-wait { opacity: 0 !important; animation: none !important; }
/* v1436: Thaw -- the straw picker sits directly in the page box (it was a second box inside it) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root #view-thaw.um-page #th-flow:not(.hidden),html[data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root:root #view-thaw.um-page #th-flow:not(.hidden) { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
/* v1437: Thaw -- the "choose a patient" block spans the same width as the fields and the Thaw button below (its icon moves with it) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff #view-thaw.um-page .mx-cta-card,html[data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root:root:root #staff #view-thaw.um-page .mx-cta-card { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
/* v1439: no scroll bar anywhere (lists still scroll with the finger) */
html, body, * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }

/* v1440: every window that opens from the bottom is light frosted glass (a moderate blur, not milky) with no rim */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body .sheet-wrap > .sheet, html:root:root:root:root:root:root:root body .sheet-wrap > .sheet { background: rgba(246,247,249,.52) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important; backdrop-filter: blur(12px) saturate(1.3) !important;
  border: 0 !important; outline: 0 !important; box-shadow: 0 -8px 28px rgba(20,30,40,.14) !important; }
html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root:root:root:root:root body .sheet-wrap > .sheet { background: rgba(34,38,44,.58) !important; background-image: none !important; border: 0 !important; outline: 0 !important; }
:is(html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body .sheet-wrap > .sheet, html:root:root:root:root:root:root:root body .sheet-wrap > .sheet, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root:root:root:root:root body .sheet-wrap > .sheet)::before, :is(html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body .sheet-wrap > .sheet, html:root:root:root:root:root:root:root body .sheet-wrap > .sheet, html[data-theme="dark"][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme][data-theme]:root:root:root:root:root:root:root body .sheet-wrap > .sheet)::after { border: 0 !important; box-shadow: none !important; }

/* v1442: clinic calendar day window -- the window behind it used to fade in, and its frosted glass only switched on when
   the fade ended (a visible jump). Now nothing fades: the dim behind it darkens and the window slides up, glass on throughout. */
html:root:root:root .cc-pop-wrap, html:root:root:root .cc-pop-wrap.is-in { opacity: 1 !important; transition: none !important; animation: ccDimIn .22s ease both; }
html:root:root:root .cc-pop-wrap .cc-pop, html:root:root:root .cc-pop-wrap.is-in .cc-pop { transition: none !important; animation: ccPopUp .32s cubic-bezier(.2,.8,.25,1) both; }
@keyframes ccDimIn { from { background-color: rgba(20,30,40,0); } }
@keyframes ccPopUp { from { transform: translateY(22px) scale(.97); } to { transform: none; } }
/* v1442: its close button is a plain cross like the calendar's own (no box, no rim) */
html:root:root:root #cc-pop-wrap .cc-pop-x { border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: .45; font-size: 19px !important; width: 30px; height: 30px; padding: 0; }

/* v1443: every dark slate surface (main buttons, page icons, the selected option of a set) takes the Dashboard "Today" card's
   colour -- a soft slate gradient -- instead of a flat dark grey */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body :is(#staff#staff#staff, #tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .chip-pick.is-on, .genetic-tab.is-on, .mx-seg > button.on, .performance-filter-option.is-on, .performance-period-box.is-on, .report-period-box.is-on, .mx-hero-ic, .ai-send):not(:disabled), html[data-theme][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body :is(#staff#staff#staff, #tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .chip-pick.is-on, .genetic-tab.is-on, .mx-seg > button.on, .performance-filter-option.is-on, .performance-period-box.is-on, .report-period-box.is-on, .mx-hero-ic, .ai-send):not(:disabled) {
  background: linear-gradient(135deg, #4A5560, #6A7783) !important; background-color: #56616C !important; color: #fff !important; border-color: transparent !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body :is(#staff#staff#staff, #tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .mx-hero-ic, .ai-send):not(:disabled) { box-shadow: 0 10px 24px rgba(40,50,60,.22) !important; }

/* v1444: the single page transition used everywhere */
@keyframes umBackIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html:root:root:root:root #staff > .view.um-back-in { animation: umBackIn .45s cubic-bezier(.4,0,.2,1) both !important; }
html:root:root:root:root #staff > .view.um-pick-in { animation: etrIn .6s cubic-bezier(.4,0,.2,1) both !important; }
/* the old per-page entry effects (card cascades, row fade-ins) no longer play on top of it */
html:root:root:root:root #staff > .view:is(.um-pick-in, .um-back-in) :is(.rows > *, .list-panel > .note, .report-page-head, .report-periods, .report-overview-card, .users-overview-card, .users-actions-card, .dx-k, .dx-card, .block, .card) { animation: none !important; }

/* v1447: freeze -- patient name inside the pinned day box */
#fe-info .fe-pin-name { font-size: 17px; font-weight: 700; color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v1448: Excel reports */
html:root:root:root #report-periods .report-period-box strong { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2; text-align: center; }
html:root:root:root #view-excel-reports .report-overview-card { padding-top: 6px !important; }
html:root:root:root #view-excel-reports .xr-card { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 4px !important; }
html:root:root:root #view-excel-reports .xr-card + .xr-card { border-top: 1px solid rgba(74,85,96,.10); }
html:root:root:root #view-excel-reports .xr-ico { flex: none; width: 44px !important; height: 44px !important; border-radius: 14px !important; display: flex !important; align-items: center; justify-content: center; }
html:root:root:root #view-excel-reports .xr-ico svg { width: 24px; height: 24px; }
html:root:root:root #view-excel-reports .xr-main { flex: 1 1 auto; min-width: 0; }
html:root:root:root #view-excel-reports .xr-main strong { display: block; font-size: 15px; }
html:root:root:root #view-excel-reports .xr-main p { margin: 3px 0 0; font-size: 12.5px; opacity: .62; line-height: 1.45; }
html:root:root:root #view-excel-reports .xr-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
html:root:root:root #view-excel-reports .xr-meta span { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(74,85,96,.09); }
html:root:root:root #view-excel-reports .xr-meta .xr-mine { background: rgba(74,85,96,.18); }
html:root:root:root #view-excel-reports .xr-side { flex: none; display: flex; align-items: center; gap: 8px; }
html:root:root:root #view-excel-reports .xr-tpl { width: 40px; height: 40px; border-radius: 13px; border: 0; background: rgba(74,85,96,.09); color: inherit; display: flex; align-items: center; justify-content: center; }
html:root:root:root #view-excel-reports .report-download { width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; }
html:root:root:root #view-excel-reports .report-download:disabled { opacity: .35; box-shadow: none !important; }
.xr-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.xr-field { border: 0; border-radius: 12px; padding: 6px 10px; background: rgba(74,85,96,.09); color: inherit; font: inherit; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: baseline; }
.xr-field code { font-size: 12px; font-weight: 700; }
.xr-field.is-copied { background: rgba(30,142,90,.16); }

/* v1450: pinned patient boxes (freeze, embryo transfer) */
.pin-box::before, .pin-box::after { display: none !important; }
.pin-box .pin-name { font-size: 16px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-box .fact { display: flex !important; align-items: baseline; gap: 8px; flex: none; }
.pin-box .fact .fact-k { opacity: .62; font-size: 13.5px; }
.pin-box .fact .fact-v { font-weight: 700; }
/* v1450: the field inside a search box has no margin of its own -- the box is exactly the field's height, so the
   magnifier (centred on the box) is centred on the text too (it sat low on Freeze's "another patient" search) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root #staff#staff#staff :is(.searchbar input, .searchbar input[type="search"]) { margin: 0 !important; }

/* v1451: pinned patient box -- held under the header (no scroll-driven jump); the spacer keeps its room in the page */
html:root:root:root .pin-box.is-fixed { position: fixed !important; top: var(--pin-top) !important; left: var(--pin-left) !important; width: var(--pin-w) !important; margin: 0 !important; }
/* while the page itself slides in or out (its transform would carry a fixed box away), the box rides in the page */
/* v1451: the gap under the header is the main menu's gap on every page */
html:root:root:root:root #staff > section.view:not(#view-home):not(#view-home2):not(#view-all-sections):not(:has(.um-scroller.um-under)) { margin-top: 5px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root .um-scroller:is(.um-has-search, .um-under) { padding-top: 35px !important; }

/* v1452: Freeze -- found patients scroll in their own area under the search box, the same width as it */
html:root:root:root:root #view-freeze #fz-results.fz-res-scroll { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  padding: 10px 0 12px !important; box-sizing: border-box; background: transparent !important; box-shadow: none !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
html:root:root:root:root #view-freeze #fz-results.fz-res-scroll.is-top { -webkit-mask-image: none; mask-image: none; }
html:root:root:root:root #view-freeze #fz-results.fz-res-scroll > * { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; box-sizing: border-box; }
html:root:root:root:root #view-freeze #fz-results.fz-res-scroll > * + * { margin-top: 4px !important; }
html:root:root:root:root #view-freeze #fz-panel:not(.hidden) { background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }

/* v1453: period switches (Performance, Excel reports) -- every label sits in the middle of its own third and wraps
   instead of being cut ("Custom date ra…", "All tim") */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) :is(.performance-period-box, .report-period-box),
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) :is(.performance-period-box, .report-period-box) > strong {
  text-align: center !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.2 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) :is(.performance-period-box, .report-period-box) > strong {
  display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; padding-inline: 4px !important; box-sizing: border-box !important; margin: 0 !important; }
/* v1453: a patient's name lines up by its own script: Persian/Arabic names to the right, Latin names to the left */
:is(.row-title, .pin-name, .cc-pop-name, .survival-patient-name, .pf-patient-name, .disp-pick-name, .md-name, .pc-recipient-name, .cele-name, .t-name) { unicode-bidi: plaintext !important; text-align: start !important; }
/* v1454: ...and in the middle from top to bottom: the three parts are the same height as their row and the label is
   centred inside, so the gap above the words equals the gap below */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) { align-items: stretch !important; height: auto !important; min-height: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) > :is(.performance-period-box, .report-period-box):not(.performance-custom-box):not(.report-custom-box) { height: auto !important; min-height: 38px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) :is(.performance-period-box, .report-period-box) > strong { align-self: stretch !important; min-height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) { row-gap: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff :is(#performance-periods, #report-periods) :is(.performance-date-range, .report-date-range) { margin-top: 6px !important; }

/* v1455: the measured correction that puts each page's first box TOP_GAP under the header (set per page by viewAlignTop) */
html:root:root:root:root:root #staff > section.view:not(.is-incoming):not(.is-dragging):not(.is-settling) { position: relative; top: var(--vat, 0px); margin-bottom: var(--vat, 0px); }

/* v1457: the found-patients list may reach down to the tab bar (nothing above it clips it) and its last row clears it */
html:root:root:root:root #view-freeze :is(#fz-panel, .fz-search-block, #fz-panel ~ *) { overflow: visible !important; }
html:root:root:root:root #view-freeze #fz-results.fz-res-scroll { padding: 8px 0 24px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff #view-freeze #fz-results.fz-res-scroll > * { margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; padding-top: 13px !important; padding-bottom: 13px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root #staff #view-freeze #fz-results.fz-res-scroll > * + * { margin-top: 2px !important; }

/* v1458: pinned box -- always held under the header; its place in the page is kept by .pin-spacer (sized from JS) */
html:root:root:root .pin-box { margin: 0 0 14px !important; }
@keyframes umFadeIn { from { opacity: 0; } to { opacity: 1; } }
html:root:root:root:root #staff > .view.um-fade-in { animation: umFadeIn .45s ease both !important; }

/* v1460: Register patient -- the page title is the same plain title as Puncture, ICSI ... (no pinned glass box) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #staff #view-register > .view-head { position: static !important; padding: 6px 4px 12px !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #staff #view-register > .view-head .view-title {
  visibility: visible !important; position: static !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; margin: 0 !important;
  font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; text-align: start !important; }

/* v1461: every dark slate option (main buttons, page icons, the selected option of a set -- e.g. the chosen treatment
   plans): white text (also the WebKit text fill, which some rules had set dark) and no rim or outline of any kind */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff, #tabbar#tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .chip-pick.is-on, .genetic-tab.is-on, .mx-seg > button.on, .performance-filter-option.is-on, .performance-period-box.is-on, .report-period-box.is-on, .mx-hero-ic, .ai-send, .treatment-plan-chip.is-on, .pick-chip.is-on, .dd-chip.is-on, .lab-control-tab.is-on):not(:disabled), html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff, #tabbar#tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .chip-pick.is-on, .genetic-tab.is-on, .mx-seg > button.on, .performance-filter-option.is-on, .performance-period-box.is-on, .report-period-box.is-on, .mx-hero-ic, .ai-send, .treatment-plan-chip.is-on, .pick-chip.is-on, .dd-chip.is-on, .lab-control-tab.is-on):not(:disabled) * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff, #tabbar#tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .chip-pick.is-on, .genetic-tab.is-on, .mx-seg > button.on, .performance-filter-option.is-on, .performance-period-box.is-on, .report-period-box.is-on, .mx-hero-ic, .ai-send, .treatment-plan-chip.is-on, .pick-chip.is-on, .dd-chip.is-on, .lab-control-tab.is-on):not(:disabled) { border: 0 !important; outline: 0 !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff, #tabbar#tabbar#tabbar#tabbar, body) :is(.chip-pick.is-on, .genetic-tab.is-on, .mx-seg > button.on, .performance-filter-option.is-on, .performance-period-box.is-on, .report-period-box.is-on, .treatment-plan-chip.is-on, .pick-chip.is-on, .dd-chip.is-on, .lab-control-tab.is-on) { box-shadow: 0 4px 12px rgba(40,50,60,.20) !important; background: linear-gradient(135deg, #4A5560, #6A7783) !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff, #tabbar#tabbar#tabbar#tabbar, body) :is(.btn-primary, #th-open-picker, .dbx-add, .genetic-referral-button, .mx-hero-ic, .ai-send):not(:disabled) { box-shadow: 0 10px 24px rgba(40,50,60,.22) !important; }
/* v1463: All sections -- its title box starts the standard 15px under the header */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root #um-sc-all-sections.um-scroller { padding-top: 41px !important; }

/* v1464: ICSI -- no separate Degenerated field (the Degenerated defect counts them); GV, MI and MII in one row */
#view-icsi-case .ic-deg-field { display: none !important; }
#view-icsi-case .ic-trio { display: flex; gap: 10px; align-items: stretch; }
#view-icsi-case .ic-trio > .field { flex: 1 1 0; min-width: 0; margin: 0 !important; }
#view-icsi-case .ic-trio > .field.hidden { display: none !important; }
#view-icsi-case .ic-trio input { text-align: center !important; font-size: 18px !important; font-weight: 700 !important; }
#view-icsi-case .ic-trio .label { text-align: center; display: block; }
html:root:root:root #view-icsi-case .ic-mii-field #ic-mii { margin: 0 !important; height: 52px; min-height: 0 !important; display: flex !important; align-items: center; justify-content: center;
  font-size: 20px !important; font-weight: 800 !important; padding: 0 !important; border-radius: 16px; background: linear-gradient(135deg, #4A5560, #6A7783) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(40,50,60,.18) !important; }
html:root:root:root #view-icsi-case .ic-mii-field #ic-mii.is-bad { background: #C0392B !important; }
#view-icsi-case .ic-mii-note { margin: 6px 4px 0; font-size: 12.5px; opacity: .65; text-align: center; }
#view-icsi-case .ic-mii-note.is-bad { color: #C0392B; opacity: 1; font-weight: 600; }
/* v1464: oocyte defects as capsules:  [ −  name ×N  + ] ; a used defect turns dark slate */
html:root:root:root #ic-defects { display: flex !important; flex-wrap: wrap; gap: 8px; }
html:root:root:root #ic-defects .oocyte-defect-row { display: inline-flex !important; align-items: center; gap: 2px; padding: 3px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(74,85,96,.09) !important; max-width: 100%; min-height: 0 !important; }
html:root:root:root #ic-defects .oocyte-defect-row .oocyte-defect-controls { display: contents !important; }
html:root:root:root #ic-defects .oocyte-defect-row .oocyte-defect-step:first-child { order: 0; }
html:root:root:root #ic-defects .oocyte-defect-row .oocyte-defect-name { order: 1; font-size: 13px !important; font-weight: 600 !important; padding: 0 4px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; flex: 0 1 auto !important; }
html:root:root:root #ic-defects .oocyte-defect-row .oocyte-defect-count { order: 2; width: auto !important; min-width: 0 !important; font-size: 13px !important; padding-inline-end: 4px; }
html:root:root:root #ic-defects .oocyte-defect-row .oocyte-defect-count:empty { display: none; }
html:root:root:root #ic-defects .oocyte-defect-row .oocyte-defect-step:last-child { order: 3; }
html:root:root:root #ic-defects .oocyte-defect-row .defect-row-actions { order: 4; }
html:root:root:root #ic-defects .oocyte-defect-step { width: 30px !important; height: 30px !important; min-height: 0 !important; border-radius: 50% !important; border: 0 !important; padding: 0 !important;
  background: rgba(255,255,255,.75) !important; font-size: 17px !important; line-height: 1 !important; color: inherit; display: inline-flex; align-items: center; justify-content: center; flex: none; }
html:root:root:root #ic-defects .oocyte-defect-row.is-on { background: linear-gradient(135deg, #4A5560, #6A7783) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 4px 12px rgba(40,50,60,.20) !important; }
html:root:root:root #ic-defects .oocyte-defect-row.is-on * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:root:root:root #ic-defects .oocyte-defect-row.is-on .oocyte-defect-step { background: rgba(255,255,255,.18) !important; }
/* v1465: Puncture -- the spouse's semen-analysis card sits under the oocyte count */
#view-puncture-case #pc-andro:not(.hidden) { margin-top: 14px !important; }
/* v1466: the motility chart sits directly in its card (patient file, puncture, andrology list) -- no box of its own */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body .an-chart-box {
  background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 8px 0 4px !important; border-radius: 0 !important; }

/* v1467: ICSI defects -- straight on the form (no scrolling box of their own), two capsules a row, English names */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #staff #ic-defects {
  max-height: none !important; height: auto !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
  padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #staff #ic-defects .oocyte-defect-row { display: flex !important; width: auto !important; min-width: 0; justify-content: space-between; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #staff #ic-defects .oocyte-defect-row .oocyte-defect-name { flex: 1 1 auto !important; min-width: 0; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 12.5px !important; direction: ltr; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root body #staff #ic-defects > .empty { grid-column: 1 / -1; }
.ic-defects-guide { display: block; margin: 10px 2px 0; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; opacity: .7; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ic-guide-list { display: flex; flex-direction: column; margin-top: 8px; }
.ic-guide-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(74,85,96,.10); font-size: 14px; }
.ic-guide-row:last-child { border-bottom: 0; }
.ic-guide-row span { opacity: .75; text-align: end; }

/* v1468: long defect names slide inside their capsule (pause at the start, glide to the end, pause, glide back) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body #staff #ic-defects .oocyte-defect-row .oocyte-defect-name { text-overflow: clip !important; overflow: hidden !important; }
#ic-defects .oocyte-defect-name .odn-in { display: inline-block; white-space: nowrap; }
#ic-defects .oocyte-defect-name.is-mq { text-align: left !important; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%); }
#ic-defects .oocyte-defect-name.is-mq .odn-in { padding-left: 6px; animation: odnSlide var(--mq-t, 6s) ease-in-out infinite; will-change: transform; }
@keyframes odnSlide { 0%, 18% { transform: translateX(0); } 50%, 68% { transform: translateX(var(--mq, 0px)); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { #ic-defects .oocyte-defect-name.is-mq .odn-in { animation: none; } }

/* v1469: GV, MI and MII boxes the same size */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body #staff #view-icsi-case .ic-trio input,
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body #staff #view-icsi-case .ic-mii-field #ic-mii {
  height: 56px !important; min-height: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 16px !important; }
/* v1469: defect group titles */
#ic-defects .ic-def-group { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; opacity: .6; margin: 6px 4px -2px; }
#ic-defects .ic-def-group:first-child { margin-top: 0; }

/* v1471: the "Custom date range" option holds the From / To fields -- the white text of the selected option must not
   reach them (their labels, the "to" and the typed dates were white on white) */
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff#staff, body) :is(.report-date-range, .performance-date-range),
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff#staff, body) :is(.report-date-range, .performance-date-range) * {
  color: #2B333B !important; -webkit-text-fill-color: #2B333B !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff#staff, body) :is(.report-date-range, .performance-date-range) :is(label, .report-date-separator, .performance-date-separator) { opacity: .62; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root:root:root body :is(#staff#staff#staff#staff#staff, body) :is(.report-date-range, .performance-date-range) input::placeholder { color: rgba(43,51,59,.45) !important; -webkit-text-fill-color: rgba(43,51,59,.45) !important; }

/* v1472: AI assistant off -- no tab, the other four share the bar */
.tabbar .tab.ai-off, .tabbar .tab[data-action="ai"] { display: none !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body .tabbar:not(.coordinator-tabbar) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html[data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look][data-look]:root:root:root:root:root:root:root body .tabbar.coordinator-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* v1473: the boxes that float above a page (patient-file name and messages, pinned titles) appear together with the page,
   not before it */
html.um-revealing :is(.pf-name-float, .pinned-box-float, .pinned-title-float) { opacity: 0 !important; transition: none !important; }
html.um-floats-in :is(.pf-name-float, .pinned-box-float, .pinned-title-float).is-on { animation: umFadeIn .5s ease both; }

/* v1474: quicker page entrance */
html:root:root:root:root:root #staff > .view.um-pick-in { animation: etrIn .38s cubic-bezier(.4,0,.2,1) both !important; }
html:root:root:root:root:root #staff > .view.um-back-in { animation: umBackIn .3s cubic-bezier(.4,0,.2,1) both !important; }
html:root:root:root:root:root #staff > .view.um-fade-in { animation: umFadeIn .3s ease both !important; }
html.um-floats-in :is(.pf-name-float, .pinned-box-float, .pinned-title-float).is-on { animation-duration: .38s !important; }