/* Lori desk. Tokens from the approved prototype (clinic/design/prototype). */
:root {
  --ink: #1E1A33;
  --ink-2: #3E3858;
  --muted: #5E5878;
  --faint: #8E89A0;
  --accent: #5B4BD6;
  --accent-hover: #4535B8;
  --accent-soft: #EDE8FB;
  --amber: #E8A34D;
  --paper: #F6F4FB;
  --card: #FFFFFF;
  --line: #ECE9F4;
  --line-2: #DCD7EA;
  --row-line: #F1EEF8;
  --head-bg: #FBFAFE;
  --ok: #1C6440;
  --ok-bg: #DFF4E7;
  --warn: #6E520A;
  --warn-bg: #FBF0D0;
  --danger: #962A43;
  --live: #3DB36B;
  --on-dark: #CFC9DE;
  --tv-bg: #1E1A33;
  --tv-card: #2E2848;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-sm: 10px;
  --r: 12px;
  --r-md: 16px;
  --r-lg: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.top {
  background: var(--ink);
  color: #FFFFFF;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.brand { font-family: var(--display); font-size: 20px; font-weight: 600; }
.clinic-name { font-size: 14px; color: var(--on-dark); flex-grow: 1; min-width: 0; }
.live { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--on-dark); }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--live); }
.who { font-size: 13px; color: var(--on-dark); }
.demo-role { display: flex; align-items: center; gap: 8px; }
.demo-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--ink); background: var(--amber); padding: 3px 8px; border-radius: 8px;
}
.demo-role select {
  height: 30px; border-radius: 8px; border: 1px solid #4A4366; background: #2E2848; color: #FFFFFF;
  padding: 0 8px; font-size: 13px; font-weight: 600;
}

/* Body: menu and page */
.body { flex-grow: 1; display: flex; gap: 24px; padding: 24px; min-height: 0; }
.menu { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.menu a {
  padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
}
.menu a:hover { background: var(--accent-soft); color: var(--ink); }
.menu a.on { color: #FFFFFF; background: var(--accent); font-weight: 700; }
.page { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; }
.page-head .sub { font-size: 14px; color: var(--muted); }

/* Cards, buttons, chips */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.btn {
  height: 42px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn.primary:hover { background: var(--accent-hover); }
.chip { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--row-line); color: var(--ink-2); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }

/* Empty state */
.empty {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.empty-mark { width: 56px; height: 56px; border-radius: 28px; background: var(--accent-soft); position: relative; }
.empty-mark::after {
  content: ''; position: absolute; inset: 18px; border-radius: 10px; border: 3px solid var(--accent); opacity: 0.6;
}
.empty h2 { font-size: 20px; }
.empty p { margin: 0; max-width: 440px; color: var(--muted); }

/* Signed out / no role */
.signin { flex-grow: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.signin .card { max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.signin p { margin: 0; color: var(--muted); }

/* Sign-in, clinic picker, no access */
.gate { flex-grow: 1; display: flex; flex-direction: column; }
.signin-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.signin .signin-card, .signin .demo-card { max-width: none; gap: 12px; }
.signin-card h1 { font-size: 26px; }
.demo-card h2 { font-size: 18px; }
.stack { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field input, .phone-input {
  height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card);
  font-size: 17px; font-weight: 600; letter-spacing: 0.5px;
}
.field input { padding: 0 14px; width: 100%; }
.field input:focus-within, .phone-input:focus-within { border-color: var(--accent); }
.phone-input { display: flex; align-items: center; overflow: hidden; }
.phone-input .cc { padding: 0 10px 0 14px; color: var(--muted); border-right: 1px solid var(--line); line-height: 28px; }
.phone-input input { border: 0; height: 100%; flex-grow: 1; min-width: 0; outline: none; }
.btn.wide { width: 100%; justify-content: center; height: 48px; font-size: 15px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.row-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; }
.link:hover { color: var(--accent-hover); text-decoration: underline; }
.muted { color: var(--muted); font-size: 14px; }
.signin p.msg { min-height: 20px; font-size: 14px; font-weight: 600; color: var(--ok); }
.signin p.msg.bad { color: var(--danger); }
.signin p.hint { font-size: 13px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.role-grid .btn { justify-content: center; }
.pick-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pick {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card);
  cursor: pointer; text-align: left;
}
.pick:hover { border-color: var(--accent); background: var(--accent-soft); }
.pick-name { font-weight: 700; font-size: 15px; }
.signin-card .empty-mark { margin-bottom: 4px; }
.top-link {
  background: none; border: 1px solid #3A3358; border-radius: var(--r-sm); color: #FFFFFF;
  font-size: 13px; font-weight: 700; padding: 6px 10px; cursor: pointer;
}
.top-link:hover { background: #2E2848; }

/* Today's queue (prototype ClinicToday) */
.head-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.find {
  height: 42px; width: 240px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card);
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
}
.find:focus-within { border-color: var(--accent); }
.find input { border: 0; outline: none; font-size: 14px; background: transparent; flex-grow: 1; min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat small { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.stat b { font-family: var(--display); font-size: 26px; font-weight: 600; }
.t-warn { color: var(--warn); }
.t-ok { color: var(--ok); }
.late-bar { background: var(--warn-bg); border: 1px solid #F0D9A6; border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; color: var(--ink-2); }
.q-wrap { display: flex; gap: 20px; align-items: flex-start; }
.q-table { flex-grow: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.q-wrap > .empty { flex-grow: 1; }
.q-head, .q-row {
  display: grid; grid-template-columns: 60px 100px minmax(140px, 1fr) 96px 84px 132px; gap: 8px; padding: 11px 16px; align-items: center;
}
.q-head { padding: 10px 16px; background: var(--head-bg); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; text-transform: uppercase; }
.q-row { border-bottom: 1px solid var(--row-line); }
.q-row:last-child { border-bottom: 0; }
.q-row.due { background: var(--head-bg); }
.q-time { font-size: 14px; font-weight: 700; }
.q-row.faded .q-time { color: var(--faint); }
.slot { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--row-line); color: var(--ink-2); white-space: nowrap; }
.slot.k-prio { background: #FCEFD9; color: #7A4E0B; }
.slot.k-hour { background: var(--accent-soft); color: var(--accent-hover); }
.slot.k-walkin { background: #E3ECFB; color: #2A4E8C; }
.q-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.q-who b { font-size: 14px; }
.q-who small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.q-plan { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.q-plan.p-member { color: var(--ok); }
.q-plan.p-pass { color: #2A4E8C; }
.q-fee { font-size: 13px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.q-label { display: none; }
.status { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 9px; white-space: nowrap; display: inline-block; }
.s-done { background: #F1F0F5; color: var(--faint); }
.s-doc { background: var(--accent); color: #FFFFFF; }
.s-wait { background: var(--warn-bg); color: var(--warn); }
.s-booked { background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.pill-btn {
  height: 34px; padding: 0 14px; border-radius: 17px; background: var(--accent); color: #FFFFFF; display: inline-flex;
  align-items: center; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pill-btn:hover { background: var(--accent-hover); color: #FFFFFF; }
.pill-btn.quiet { background: var(--card); color: var(--danger); border: 1px solid #E9C6CF; }
.q-none { margin: 0; padding: 20px 16px; color: var(--muted); }
.q-side { width: 330px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.with-doc { background: var(--ink); color: #FFFFFF; border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.wd-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-dark); }
.wd-k { font-weight: 700; color: var(--amber); letter-spacing: 0.4px; text-transform: uppercase; }
.wd-who { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.15; }
.wd-note { font-size: 13px; color: var(--on-dark); }
.up-next { padding: 0; overflow: hidden; }
.un-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.un-head span { font-size: 15px; font-weight: 700; }
.un-head small { font-size: 12px; color: var(--muted); }
.un-row { display: flex; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--row-line); align-items: center; }
.un-row:last-child { border-bottom: 0; }
.un-n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 13px; background: var(--row-line); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.un-who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.un-who b { font-size: 14px; }
.un-who small { font-size: 12px; color: var(--muted); }
.un-who small.t-prio { color: #7A4E0B; }
.un-who small.t-hour { color: var(--accent-hover); }
.un-who small.t-late { color: var(--danger); }
.un-eta { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.un-none { margin: 0; padding: 16px; color: var(--muted); font-size: 14px; }
.side-btn { height: 44px; border-radius: 14px; }
.order-rules { background: var(--accent-soft); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 18px; color: var(--ink-2); }
.order-rules b { font-size: 13px; color: #2E2A4A; }
@media (max-width: 1400px) {
  .q-side { width: 280px; }
  .wd-who { font-size: 26px; }
}
@media (max-width: 1180px) {
  .q-wrap { flex-direction: column; align-items: stretch; }
  .q-side { width: auto; }
}

/* Waiting-room screen: dark, full screen, no menu */
body.tv { background: var(--tv-bg); color: #FFFFFF; }
.tv-page { min-height: 100vh; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
body.tv .empty { background: var(--tv-card); border-color: #3A3358; }
body.tv .empty p { color: var(--on-dark); }
body.tv .empty-mark { background: #3A3358; }
body.tv .empty-mark::after { border-color: var(--amber); }
body.tv h1 { color: #FFFFFF; }

/* Phones and narrow tablets */
@media (max-width: 760px) {
  .top { padding: 12px 16px; gap: 6px 14px; }
  .clinic-name { flex-basis: 100%; order: 3; font-size: 13px; }
  .who { order: 4; flex-basis: 100%; }
  .body { flex-direction: column; gap: 16px; padding: 16px; }
  .menu {
    width: auto; flex-direction: row; overflow-x: auto; gap: 6px;
    margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; flex-shrink: 0; background: var(--card); border: 1px solid var(--line); }
  .menu a.on { border-color: var(--accent); }
  .page-head h1 { font-size: 24px; }
  .empty { padding: 32px 16px; }
  .tv-page { padding: 16px; }
  .head-acts, .find { width: 100%; }
  .head-acts .btn { flex-grow: 1; justify-content: center; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child { grid-column: span 2; }
  .q-head { display: none; }
  .q-row { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; }
  .q-row > span:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: start; }
  .q-row .q-time { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
  .q-row .q-who, .q-row .q-plan, .q-row .q-fee, .q-row .q-status { grid-column: 2; }
  .q-plan, .q-fee { font-size: 12px; }
  .q-label { display: inline; color: var(--faint); font-weight: 600; }
  .q-status { margin-top: 4px; }
}
[data-late]:empty { display: none; }

/* Check in (prototype ClinicCheckIn) */
.ci-title { display: flex; align-items: center; gap: 12px; }
.ci-back {
  width: 40px; height: 40px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
}
.ci-wrap { display: flex; gap: 20px; align-items: flex-start; }
.ci-left { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.ci-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ci-pane { display: flex; flex-direction: column; gap: 14px; }
.ci-cam {
  min-height: 260px; border-radius: var(--r-lg); background: var(--ink); color: #FFFFFF; padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
}
.ci-frame {
  width: 140px; height: 140px; border-radius: 18px; border: 3px solid var(--amber); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ci-frame video { width: 100%; height: 100%; object-fit: cover; }
.ci-frame-qr { width: 92px; height: 92px; border-radius: 6px; opacity: 0.35; background: repeating-conic-gradient(#FFFFFF 0 25%, var(--ink) 0 50%) 0 0 / 18px 18px; }
.ci-frame-qr[hidden], .ci-frame video[hidden] { display: none; }
.ci-cam-state { font-size: 13px; font-weight: 700; color: #9FE0B8; max-width: 300px; }
.ci-cam-btn { height: 36px; background: transparent; color: #FFFFFF; border-color: #4A4366; }
.ci-find { display: flex; flex-direction: column; gap: 6px; }
.ci-find label, .ci-amount label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ci-amount-row .btn { white-space: nowrap; }
.ci-find-row, .ci-amount-row { display: flex; gap: 8px; align-items: center; }
.ci-find input, .ci-amount input {
  flex-grow: 1; min-width: 0; height: 42px; border-radius: var(--r); border: 1px solid var(--line-2);
  padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--card);
}
.ci-find input:focus, .ci-amount input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ci-help { font-size: 13px; line-height: 19px; color: var(--muted); }
.ci-ways { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 19px; color: var(--ink-2); padding: 14px 16px; }
.ci-ways > b { font-size: 14px; color: var(--ink); }
.ci-msg:empty { display: none; }
.ci-msg { border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; font-weight: 600; background: var(--accent-soft); color: var(--ink-2); }
.ci-msg.m-ok { background: var(--ok-bg); color: var(--ok); }
.ci-msg.m-bad { background: #FBE6EA; color: var(--danger); }
.ci-list { padding: 0; overflow: hidden; }
.ci-list-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ci-list-head span { font-size: 15px; font-weight: 700; }
.ci-list-head small { font-size: 12px; color: var(--muted); }
.ci-row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--row-line); }
.ci-row:last-child { border-bottom: 0; }
.ci-row-who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-row-who b { font-size: 15px; }
.ci-row-who small { font-size: 12px; color: var(--muted); }
.ci-row-who .ci-row-state { color: var(--accent-hover); font-weight: 700; }
.ci-none { margin: 0; padding: 16px; font-size: 14px; color: var(--muted); }
.ci-another { align-self: flex-start; color: var(--accent); background: none; border: 0; padding: 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.ci-done { background: var(--ok-bg); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--ok); }
.ci-done b { font-size: 15px; }
.ci-done span { font-size: 13px; }
.ci-closed { background: #F1F0F5; border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--muted); }
.ci-family { padding: 0; overflow: hidden; }
.ci-fam-top { display: flex; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.ci-avatar {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 28px; background: #FFE3CF; color: #8A3F0E;
  display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 24px; font-weight: 600;
}
.ci-fam-name { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-fam-name b { font-family: var(--display); font-size: 22px; font-weight: 600; }
.ci-fam-name small { font-size: 13px; color: var(--muted); }
.ci-fam-name .ci-arrival { color: var(--accent-hover); font-weight: 700; }
.ci-chip { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 9px; white-space: nowrap; }
.ci-chip.c-member { background: var(--ok-bg); color: var(--ok); }
.ci-chip.c-pass { background: #E3ECFB; color: #2A4E8C; }
.ci-chip.c-none { background: var(--row-line); color: var(--muted); }
.ci-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ci-facts > span { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.ci-facts > span:last-child { border-right: 0; }
.ci-facts small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.ci-facts b { font-size: 15px; overflow-wrap: anywhere; }
.ci-facts em { font-style: normal; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ci-counter { display: flex; flex-direction: column; gap: 10px; }
.ci-counter-top { display: flex; justify-content: space-between; align-items: baseline; }
.ci-counter-top span { font-size: 15px; font-weight: 700; }
.ci-counter-top b { font-family: var(--display); font-size: 22px; font-weight: 600; }
.ci-note { font-size: 13px; color: var(--muted); }
.ci-pays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ci-pay { height: 40px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.ci-pay.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ci-amount { display: flex; flex-direction: column; gap: 6px; }
.ci-rupee { font-size: 16px; font-weight: 700; color: var(--muted); }
.ci-paid:empty { display: none; }
.ci-paid { font-size: 12px; font-weight: 700; color: var(--ok); }
.ci-tip { background: var(--accent-soft); border-radius: var(--r-md); padding: 12px 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.ci-tip svg { flex-shrink: 0; }
.ci-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ci-go {
  height: 50px; flex-grow: 1; border-radius: 14px; border: 0; background: var(--accent); color: #FFFFFF;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 18px;
}
.ci-go:hover:not(:disabled) { background: var(--accent-hover); }
.ci-go:disabled { opacity: 0.6; cursor: default; }
.ci-go.done { background: var(--ok-bg); color: var(--ok); opacity: 1; }
.ci-miss { justify-content: center; height: 50px; border-radius: 14px; border-color: #F3C9D3; color: var(--danger); padding: 0 18px; }
@media (max-width: 1180px) {
  /* One column: camera and search, then the family, then the help. */
  .ci-wrap { flex-direction: column; align-items: stretch; }
  .ci-left { display: contents; }
  .ci-cam { order: 1; }
  .ci-find { order: 2; }
  .ci-main { order: 3; }
  .ci-help { order: 4; }
  .ci-ways { order: 5; }
}
@media (max-width: 760px) {
  .ci-cam { min-height: 0; padding: 14px; }
  .ci-frame { width: 96px; height: 96px; }
  .ci-frame-qr { width: 60px; height: 60px; background-size: 12px 12px; }
  .ci-facts { grid-template-columns: minmax(0, 1fr); }
  .ci-facts > span { border-right: 0; border-bottom: 1px solid var(--line); }
  .ci-facts > span:last-child { border-bottom: 0; }
  .ci-fam-top { flex-wrap: wrap; }
  .ci-row { flex-wrap: wrap; }
  .ci-row .btn { width: 100%; justify-content: center; }
  .ci-go, .ci-miss { width: 100%; }
}

/* Today: running the queue (C12) */
.late-bar.desk { background: var(--card); border-color: var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.late-bar.desk.on { background: var(--warn-bg); border-color: #F0D9A6; }
.lb-text { flex: 1 1 320px; min-width: 0; }
.lb-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-btn {
  height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.lb-btn.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.lb-btn:disabled { opacity: 0.6; cursor: default; }
.lb-other { display: flex; gap: 6px; align-items: center; }
.lb-other input {
  width: 72px; height: 36px; border-radius: 18px; border: 1px solid var(--line-2); padding: 0 12px;
  font: inherit; font-size: 13px; background: var(--card); color: var(--ink);
}
.wd-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wd-next {
  height: 44px; border-radius: 12px; border: 0; background: var(--amber); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 14px;
}
.wd-next:hover:not(:disabled) { background: #F0B46A; }
.wd-next:disabled, .wd-mini:disabled, .wd-link:disabled { opacity: 0.6; cursor: default; }
.wd-em { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark); }
.wd-em span { flex-grow: 1; color: #FFFFFF; font-weight: 700; }
.wd-mini {
  width: 32px; height: 32px; border-radius: 16px; border: 1px solid #4A4366; background: transparent;
  color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.wd-link { background: none; border: 0; padding: 4px 0; color: var(--on-dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.walkin { display: flex; flex-direction: column; gap: 12px; }
.wi-head { display: flex; flex-direction: column; gap: 2px; }
.wi-head b { font-size: 15px; }
.wi-head small { font-size: 13px; color: var(--muted); }
.wi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wi-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.wi-grid em { font-style: normal; font-weight: 500; color: var(--faint); }
.wi-grid input {
  height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 12px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--card); min-width: 0;
}
.wi-grid input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.wi-acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .wi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wi-grid { grid-template-columns: minmax(0, 1fr); }
  .wi-acts .btn { flex-grow: 1; justify-content: center; }
  .lb-btns { width: 100%; }
}
[data-walkin]:empty { display: none; }

/* Waiting-room TV (prototype ClinicWaitTV) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tv-page { min-height: 100vh; box-sizing: border-box; padding: clamp(16px, 3.5vw, 48px); padding-top: clamp(16px, 3vw, 40px); padding-bottom: clamp(16px, 3vw, 40px); }
.tv-screen { flex-grow: 1; display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 28px); color: #FFFFFF; }
.tv-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tv-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tv-mark { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 24px; font-weight: 600; }
.tv-name { font-family: var(--display); font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
.tv-time { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; color: var(--on-dark); white-space: nowrap; }
.tv-main { display: flex; gap: clamp(16px, 2.5vw, 32px); flex-grow: 1; min-height: 0; }
.tv-now { flex: 1.1 1 0; background: var(--tv-card); border-radius: 28px; padding: clamp(20px, 2.5vw, 32px); display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.tv-k, .tv-k2 { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--amber); letter-spacing: 1px; text-transform: uppercase; }
.tv-k2 { font-size: clamp(15px, 1.4vw, 18px); color: var(--on-dark); }
.tv-token { font-family: var(--display); font-size: clamp(88px, 11vw, 140px); line-height: 1; font-weight: 600; }
.tv-doc { font-size: clamp(18px, 1.7vw, 22px); color: var(--on-dark); }
.tv-late { align-self: flex-start; margin-top: 6px; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; color: var(--ink); background: var(--amber); padding: 8px 16px; border-radius: 12px; }
.tv-next { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tv-row { background: var(--tv-card); border-radius: 18px; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.tv-t { font-family: var(--display); font-size: clamp(26px, 2.7vw, 34px); font-weight: 600; width: clamp(80px, 9vw, 120px); flex-shrink: 0; }
.tv-kind { flex-grow: 1; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; min-width: 0; }
.tv-kind.t-prio { color: var(--amber); }
.tv-kind.t-hour { color: #B9AEF0; }
.tv-kind.t-late { color: #F2A7B5; }
.tv-eta { font-size: clamp(16px, 1.4vw, 18px); color: var(--on-dark); white-space: nowrap; }
.tv-empty { font-size: 18px; color: var(--on-dark); }
.tv-foot { display: flex; align-items: center; gap: 20px; background: #FFFFFF; color: var(--ink); border-radius: 22px; padding: 16px 22px; }
.tv-qr { width: 84px; height: 84px; flex-shrink: 0; display: block; }
.tv-qr svg { width: 100%; height: 100%; display: block; }
.tv-skip { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tv-skip b { font-size: clamp(18px, 1.7vw, 22px); }
.tv-skip span { font-size: 16px; color: var(--muted); }
.tv-avg { font-size: 16px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tv-exit { position: fixed; right: 12px; bottom: 8px; font-size: 12px; color: #4A4366; text-decoration: none; }
.tv-exit:hover, .tv-exit:focus { color: var(--on-dark); }
@media (max-width: 900px) {
  .tv-main { flex-direction: column; }
  .tv-foot { flex-wrap: wrap; }
  .tv-avg { white-space: normal; }
}
@media (min-width: 901px) {
  /* A TV: exactly one screen, rows share the height. */
  .tv-page { height: 100vh; min-height: 0; overflow: hidden; }
  .tv-screen { min-height: 0; }
  .tv-next .tv-row { flex: 1 1 0; min-height: 0; padding-top: 8px; padding-bottom: 8px; max-height: 84px; }
  .tv-exit { top: 6px; bottom: auto; }
}

/* Calls and sessions (C14) */
.call-filters { gap: 8px; }
.who-btn {
  height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.who-btn.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.calls-wrap { display: flex; gap: 20px; align-items: flex-start; }
.calls { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.calls > .empty { flex-grow: 1; }
.call { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; gap: 16px; align-items: center; }
.call.c-due { border-color: var(--amber); }
.call-time { width: 74px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.call-time b { font-family: var(--display); font-size: 22px; font-weight: 600; }
.call-time small { font-size: 12px; font-weight: 700; color: var(--muted); }
.call.c-due .call-time small { color: #8A5A0B; }
.call.c-done .call-time small { color: var(--ok); }
.call.c-missed .call-time small, .call-time small.late { color: var(--danger); }
.call-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.call-who { font-size: 16px; font-weight: 700; }
.call-who span { font-weight: 500; color: var(--muted); }
.call-kind, .call-reason { font-size: 13px; line-height: 19px; color: var(--ink-2); overflow-wrap: anywhere; }
.call-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.call-chips .chip { font-size: 11px; padding: 3px 8px; border-radius: 7px; }
.call-note { font-size: 12px; font-weight: 600; color: var(--accent-hover); }
.call-acts { display: flex; flex-direction: column; gap: 8px; width: 190px; flex-shrink: 0; }
.call-go {
  height: 40px; border-radius: 12px; border: 0; background: var(--row-line); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.call.c-due .call-go { background: var(--ok); color: #FFFFFF; }
.call-go.off { color: var(--faint); cursor: default; }
.call-go:disabled, .call-soon:disabled { opacity: 0.6; cursor: default; }
.call-soon {
  height: 36px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.call-end { display: flex; justify-content: space-between; gap: 8px; padding: 0 4px; }
.call-end .link { font-size: 13px; }
.call-how { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.call-how > b { font-size: 15px; color: var(--ink); }
.call-how small { font-size: 12px; color: var(--muted); }
@media (max-width: 1180px) {
  .calls-wrap { flex-direction: column; align-items: stretch; }
  .call-how { width: auto; }
}
@media (max-width: 760px) {
  .call { flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; }
  .call-time { width: auto; flex-direction: row; align-items: baseline; gap: 10px; }
  .call-main { flex-basis: 100%; }
  .call-acts { width: 100%; }
}

/* Families and members (C15) */
.m-filters { flex-wrap: wrap; display: flex; }
.m-wrap { display: flex; gap: 20px; align-items: flex-start; }
.m-main { flex-grow: 1; min-width: 0; }
.m-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.m-head, .m-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) 124px 110px minmax(0, 1.2fr) 118px; gap: 10px; padding: 12px 16px; align-items: center;
}
.m-head { padding: 10px 16px; background: var(--head-bg); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; text-transform: uppercase; }
.m-row { border-bottom: 1px solid var(--row-line); }
.m-row:last-child { border-bottom: 0; }
.m-baby, .m-parent { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-baby b { font-size: 14px; }
.m-parent b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.m-baby small, .m-parent small { font-size: 12px; color: var(--muted); }
.m-parent small.t-ok { color: var(--ok); }
.m-parent small.t-warn { color: #8A5A0B; }
.m-plan { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--row-line); color: var(--muted); }
.m-plan.p-membership { background: var(--ok-bg); color: var(--ok); }
.m-plan.p-pass { background: #E3ECFB; color: #2A4E8C; }
.m-till { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.m-till.t-warn { color: #8A5A0B; }
.m-used { font-size: 12px; line-height: 17px; color: var(--ink-2); min-width: 0; }
.m-btn {
  height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.m-btn:disabled { color: var(--ok); border-color: var(--ok-bg); background: var(--ok-bg); cursor: default; }
.m-side { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.m-kpis { display: flex; flex-direction: column; gap: 12px; }
.m-kpi-s { font-size: 12px; color: var(--muted); }
.add-fam select {
  height: 42px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 10px; background: var(--card); width: 100%;
}
.vax-grid { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.vax-grid legend { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0 0 6px; }
.vax-grid legend em { font-style: normal; font-weight: 500; color: var(--faint); }
.vax-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; }
.vax-grid input, .add-fam input[type="date"] {
  height: 42px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 8px; width: 100%; min-width: 0; background: var(--card);
}
@media (max-width: 1180px) {
  .m-wrap { flex-direction: column; align-items: stretch; }
  .m-side { width: auto; }
  .m-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vax-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .m-head { display: none; }
  .m-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
  .m-row > span:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .m-baby { grid-column: 1; grid-row: 1; }
  .m-parent, .m-till, .m-used { grid-column: 1 / -1; }
  .m-act { grid-column: 1 / -1; }
  .m-act:empty { display: none; }
  .m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pay at the desk (C16) */
.pay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.pay-code { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pay-code input {
  height: 46px; width: 180px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 14px;
  font: inherit; font-size: 20px; font-weight: 700; letter-spacing: 3px; background: var(--card);
}
.pay-methods { display: flex; gap: 8px; }
.pay-go { height: 46px; }
.pay-form small { flex-basis: 100%; }
.pay-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 100px minmax(0, 1.4fr) 110px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--row-line); align-items: center; }
.pay-row:last-child { border-bottom: 0; }
.pay-row.on { background: var(--accent-soft); }
.pay-row.faded { opacity: 0.6; }
.pay-who, .pay-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pay-who b { font-size: 14px; }
.pay-who small, .pay-meta small { font-size: 12px; color: var(--muted); }
.pay-meta b { font-size: 13px; letter-spacing: 1px; }
.pay-amt { font-family: var(--display); font-size: 20px; font-weight: 600; }
@media (max-width: 760px) {
  .pay-code, .pay-code input, .pay-go { width: 100%; justify-content: center; }
  .pay-methods { width: 100%; }
  .pay-methods .who-btn { flex-grow: 1; }
  .pay-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pay-meta { grid-column: 1; }
}

/* Install the desk app (C18) */
.install-sheet {
  position: fixed; inset: 0; background: rgba(30, 26, 51, 0.55); display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50;
}
.install-card { max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.install-card h2 { font-size: 20px; }
.install-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.install-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
@media (display-mode: standalone) {
  .top { padding-top: max(14px, env(safe-area-inset-top)); }
}

/* Phone widths: everything big enough to tap (C19) */
.find input { align-self: stretch; height: 100%; }
@media (max-width: 760px) {
  .top-link { min-height: 36px; padding: 8px 12px; }
  .demo-role select { height: 36px; }
  .wd-link { min-height: 32px; }
  .link { min-height: 28px; }
}
@media (max-width: 380px) {
  .top { gap: 6px 10px; }
  .page-head h1 { font-size: 22px; }
  .who-btn { padding: 0 11px; }
}

/* Slots and prices (C17) */
.day-tabs { display: flex; gap: 4px; background: var(--line); border-radius: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab { height: 36px; padding: 0 14px; border-radius: 11px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.day-tab.on { background: var(--card); }
.day-tab.closed { color: var(--faint); }
.slots-wrap { display: flex; gap: 20px; align-items: flex-start; }
.slots-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.slots-main > .empty { flex-grow: 1; }
.slot-group { display: flex; flex-direction: column; gap: 12px; }
.sg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sg-head b { font-size: 16px; }
.sg-head small { font-size: 13px; color: var(--muted); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.slot-btn {
  height: 64px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font: inherit; padding: 0 6px; min-width: 0;
}
.slot-btn b { font-size: 15px; }
.slot-btn small { font-size: 11px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-btn.t-prio { background: #FCEFD9; color: #7A4E0B; border: 1.5px solid var(--amber); }
.slot-btn.t-hour { color: var(--accent-hover); border: 1.5px solid #B9AEF0; }
.slot-btn.t-call { color: #2A4E8C; border-color: #C9D8F3; }
.slot-btn.t-booked { background: var(--accent-soft); color: var(--ink-2); border-color: var(--accent-soft); }
.slot-btn.t-off { background: #F1F0F5; color: var(--faint); border-color: #F1F0F5; }
.slot-btn.past { opacity: 0.5; }
.slot-btn.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.slot-btn.target { box-shadow: 0 0 0 3px var(--ok-bg); border-color: var(--ok); }
.slot-btn.dim { opacity: 0.35; }
.slot-btn:disabled { cursor: default; }
.slot-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; font-weight: 600; color: var(--muted); }
.slot-legend span { display: flex; align-items: center; gap: 6px; }
.slot-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--card); }
.slot-legend i.t-prio { background: #FCEFD9; border: 1.5px solid var(--amber); }
.slot-legend i.t-hour { border: 1.5px solid #B9AEF0; }
.slot-legend i.t-booked { background: var(--accent-soft); border-color: var(--accent-soft); }
.slot-legend i.t-off { background: #F1F0F5; border-color: #F1F0F5; }
.slot-day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.slots-side { width: 330px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.slot-panel, .slot-release, .price-list { display: flex; flex-direction: column; gap: 10px; }
.slot-panel > b, .slot-release > b, .price-list > b { font-size: 15px; }
.slot-panel p { margin: 0; font-size: 14px; }
.slot-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-book { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.slot-book .find { width: 100%; }
.sb-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.sb-fam { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-height: 44px; }
.sb-fam.on { border-color: var(--accent); background: var(--accent-soft); }
.sb-fam span { display: flex; flex-direction: column; min-width: 0; }
.sb-fam b { font-size: 14px; }
.sb-fam small { font-size: 12px; color: var(--muted); }
.sb-fam input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.sb-reason { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sb-reason em { font-style: normal; font-weight: 500; color: var(--faint); }
.sb-reason input { height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 12px; font: inherit; font-size: 14px; }
.slot-release span { font-size: 13px; color: var(--ink-2); }
.price-list { padding: 0; overflow: hidden; gap: 0; }
.price-list > b { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pl-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pl-row b { text-align: right; }
.price-list small { padding: 12px 16px; font-size: 12px; line-height: 18px; color: var(--muted); }
@media (max-width: 1180px) {
  .slots-wrap { flex-direction: column; align-items: stretch; }
  .slots-side { width: auto; }
}
@media (max-width: 760px) {
  .day-tabs { margin: 0 -16px; border-radius: 0; padding: 4px 16px; }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sb-fam input { width: 22px; height: 22px; }
}

/* Consult (C21) */
.cs-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-av { width: 48px; height: 48px; border-radius: 24px; background: #FCEFD9; color: #7A4E0B; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 22px; font-weight: 600; flex-shrink: 0; }
.cs-who { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-who h2 { font-size: 24px; }
.cs-who h2 span { font-family: var(--body, inherit); font-size: 14px; font-weight: 600; color: var(--muted); }
.cs-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-wrap { display: flex; gap: 20px; align-items: flex-start; }
.cs-side { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-rx { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-empty { flex-grow: 1; min-width: 0; }
.cs-block { display: flex; flex-direction: column; gap: 8px; }
.cs-k { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.cs-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cs-row span { color: var(--ink-2); }
.cs-row b { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.cs-row b small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cs-off p { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.cs-qs span { font-size: 14px; line-height: 20px; }
.cs-vax { background: var(--accent-soft); border-color: var(--accent-soft); }
.cs-v { display: flex; flex-direction: column; gap: 2px; }
.cs-v b { font-size: 14px; }
.cs-v small { font-size: 12px; color: var(--ink-2); }
.cs-v.v-overdue b { color: var(--danger); }
.cs-measure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.cs-measure label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; }
.cs-measure input { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 10px; font: inherit; font-size: 14px; width: 100%; min-width: 0; }
.cs-measure .btn { height: 40px; }
.cs-wait { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-wrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--row-line); }
.cs-wwho { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-wwho small { font-size: 12px; color: var(--muted); }
@media (max-width: 1180px) {
  .cs-wrap { flex-direction: column; align-items: stretch; }
  .cs-side, .cs-wait { width: auto; }
}
@media (max-width: 760px) {
  .cs-acts { width: 100%; }
  .cs-acts .btn { flex-grow: 1; justify-content: center; }
  .cs-measure { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-measure .btn { grid-column: 1 / -1; justify-content: center; }
}

/* Letterhead (C23) and the prescription page (paper.js) */
.lh-wrap { display: flex; gap: 20px; align-items: flex-start; }
.lh-forms { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lh-card { display: flex; flex-direction: column; gap: 10px; }
.lh-k { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.lh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lh-grid .wide { grid-column: 1 / -1; }
.lh-grid input[readonly] { background: var(--head-bg); color: var(--muted); }
.lh-logo { display: flex; align-items: center; gap: 12px; }
.lh-logo img, .lh-logo .pp-init { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; }
.lh-logo label.btn { cursor: pointer; }
.lh-sig { display: flex; flex-direction: column; gap: 6px; }
.lh-sig canvas { width: 100%; max-width: 480px; aspect-ratio: 480 / 150; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--card); touch-action: none; cursor: crosshair; }
.lh-warn { margin: 0; font-size: 13px; font-weight: 600; color: var(--warn); }
.lh-warn.ok { color: var(--ok); }
.lh-preview { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; }
.paper {
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(30, 26, 51, 0.08);
  padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; color: #1E1A33; font-size: 12px; line-height: 17px;
  aspect-ratio: 148 / 210; overflow: hidden;
}
.paper.a4 { aspect-ratio: 210 / 297; }
.pp-head { display: flex; gap: 10px; align-items: flex-start; border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
.pp-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; flex-shrink: 0; }
.pp-init { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #FFFFFF; font-family: var(--display); font-size: 20px; font-weight: 600; }
.pp-clinic, .pp-doc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-clinic { flex-grow: 1; }
.pp-clinic b { font-family: var(--display); font-size: 15px; }
.pp-doc { text-align: right; align-items: flex-end; }
.pp-head small { font-size: 10px; color: #5E5878; }
.pp-pad { height: 38mm; max-height: 22%; border: 1px dashed var(--line-2); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 11px; text-align: center; padding: 0 8px; }
.pp-pt { display: flex; justify-content: space-between; gap: 10px; }
.pp-rx { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--accent); }
.pp-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.pp-adv { margin: 0; }
.pp-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pp-check { display: flex; align-items: center; gap: 8px; max-width: 55%; }
.pp-check small, .pp-sign small { font-size: 10px; color: #5E5878; }
.pp-qr { width: 56px; height: 56px; flex-shrink: 0; display: block; }
.pp-qr svg { width: 100%; height: 100%; display: block; }
.pp-qr-empty { background: repeating-linear-gradient(45deg, #F1EEF8 0 4px, #FFFFFF 4px 8px); border-radius: 4px; }
.pp-sign { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pp-sign img { height: 40px; max-width: 140px; object-fit: contain; }
.pp-nosign { height: 40px; display: flex; align-items: flex-end; font-style: italic; color: var(--faint); }
@media (max-width: 1180px) {
  .lh-wrap { flex-direction: column; align-items: stretch; }
  .lh-preview { width: auto; max-width: 440px; position: static; }
}
@media (max-width: 760px) {
  .lh-grid { grid-template-columns: minmax(0, 1fr); }
  .paper { padding: 16px; font-size: 11px; }
}

/* Prescriptions (C22) */
.rx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.rx-writer { display: flex; flex-direction: column; gap: 12px; }
.rx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rx-head b { font-size: 16px; }
.rx-tpls { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.rx-add { width: 100%; padding-right: 4px; }
.rx-add .btn { height: 34px; }
.rx-favs { display: flex; gap: 6px; flex-wrap: wrap; }
.rx-fav { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rx-fav.on { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-soft); }
.rx-rows { display: flex; flex-direction: column; gap: 10px; }
.rx-row { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.rx-row-top { display: flex; align-items: center; gap: 8px; }
.rx-row-top b { font-size: 14px; flex-shrink: 0; }
.rx-brand { flex-grow: 1; min-width: 0; height: 32px; border: 0; border-bottom: 1px dashed var(--line-2); font: inherit; font-size: 13px; color: var(--muted); background: transparent; }
.rx-x { width: 32px; height: 32px; border-radius: 16px; border: 0; background: var(--row-line); color: var(--ink-2); font-size: 18px; cursor: pointer; flex-shrink: 0; }
.rx-row-bot { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.rx-dose, .rx-dur { height: 38px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 10px; font: inherit; font-size: 14px; min-width: 0; width: 100%; }
.rx-freq { display: flex; gap: 4px; }
.rx-fq { height: 34px; min-width: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.rx-fq.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.rx-adv { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rx-adv textarea, .rx-correct textarea { border-radius: 12px; border: 1px solid var(--line-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.rx-next { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rx-name { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-name input { flex: 1 1 200px; height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 12px; font: inherit; }
.rx-save-tpl { align-self: flex-start; }
.rx-side { display: flex; flex-direction: column; gap: 10px; }
.rx-side [data-send] { display: flex; flex-direction: column; gap: 8px; }
.rx-warn { margin: 0; font-size: 13px; font-weight: 600; color: var(--warn); }
.rx-sent { background: var(--ok-bg); color: var(--ok); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; }
.rx-corr { display: flex; flex-direction: column; gap: 4px; font-size: 13px; background: var(--warn-bg); border-radius: 10px; padding: 8px 10px; }
.rx-correct { display: flex; flex-direction: column; gap: 8px; }
.rx-correct label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.print-root { display: none; }
@media (max-width: 1400px) {
  .rx-grid { grid-template-columns: minmax(0, 1fr); }
  .rx-side { max-width: 440px; }
}
@media (max-width: 760px) {
  .rx-row-bot { grid-template-columns: minmax(0, 1fr); }
  .rx-fq { flex: 1 1 0; }
}
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing { background: #FFFFFF; }
  body.printing #print-root { display: block; }
  #print-root .paper { border: 0; border-radius: 0; box-shadow: none; width: 148mm; height: 210mm; aspect-ratio: auto; padding: 12mm; font-size: 11pt; line-height: 1.4; }
  #print-root.a4 .paper { width: 210mm; height: 297mm; padding: 16mm; }
  #print-root .pp-pad { height: 38mm; max-height: none; border: 0; color: transparent; }
  #print-root .pp-qr { width: 22mm; height: 22mm; }
}

/* Check a printed prescription (C24) */
.vf-card { max-width: 460px; width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.vf-card h1 { font-size: 24px; }
.vf-card p { margin: 0; line-height: 1.5; }
.vf-tick { width: 48px; height: 48px; border-radius: 24px; background: var(--ok-bg); color: var(--ok); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }
.vf-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.vf-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.vf-rows > div:last-child { border-bottom: 0; }
.vf-rows span { color: var(--muted); }
.vf-rows b { text-align: right; }
.vf-form { display: flex; flex-direction: column; gap: 10px; }

/* Vaccines at the visit (C25) */
.vx { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.vx-card { display: flex; flex-direction: column; gap: 12px; }
.vx-card h2 { font-size: 20px; }
.vx-top { display: flex; align-items: center; gap: 12px; }
.vx-top span { display: flex; flex-direction: column; min-width: 0; }
.vx-top b { font-size: 16px; }
.vx-top small { font-size: 13px; color: var(--muted); }
.vx-top.dark { color: #FFFFFF; }
.vx-top.dark small { color: var(--on-dark); }
.vx-fam { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.vx-fam span:last-child { display: flex; flex-direction: column; }
.vx-fam small { font-size: 12px; color: var(--muted); }
.vx-doses { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-dose { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: var(--row-line); color: var(--ink-2); border: 1px solid transparent; }
.vx-dose.done { background: var(--ok-bg); color: var(--ok); }
.vx-dose.vx-pick { min-height: 36px; cursor: pointer; font-family: inherit; background: var(--card); border-color: var(--line-2); }
.vx-dose.vx-pick.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
.vx-acts { display: flex; flex-direction: column; gap: 8px; }
.vx-acts label.btn { justify-content: center; cursor: pointer; }
.vx-alldone { margin: 0; font-size: 14px; color: var(--ok); }
.vx-scan { background: #14121C; border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.vx-scan .ci-back { background: #2E2848; color: #FFFFFF; border-color: #3A3358; }
.vx-cam { position: relative; aspect-ratio: 3 / 4; max-height: 60vh; border-radius: 16px; overflow: hidden; background: #000000; }
.vx-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-frame { position: absolute; inset: 18% 10%; border: 3px solid var(--amber); border-radius: 14px; }
.vx-scan small { color: var(--on-dark); }
.vx-photo { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; }
.vx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vx-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.vx-f em { font-style: normal; font-weight: 600; color: var(--ok); }
.vx-f input { height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 12px; font: inherit; font-size: 14px; min-width: 0; }
.vx-meta { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); }
.vx-meta > div { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 14px; }
.vx-meta > div + div { border-top: 1px solid var(--line); }
.vx-meta span { color: var(--muted); }
@media (max-width: 760px) {
  .vx-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Doctor's phone home (C26) */
.ph { max-width: 480px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.ph-hello span { display: flex; flex-direction: column; }
.ph-hello small { font-size: 12px; color: var(--muted); }
.ph-hello b { font-family: var(--display); font-size: 24px; font-weight: 600; }
.ph-late { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ph-now { gap: 10px; }
.ph-next { display: flex; align-items: center; gap: 10px; background: #2E2848; border-radius: 14px; padding: 10px 12px; }
.ph-next span { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.ph-next small { font-size: 12px; color: var(--on-dark); }
.ph-next b { font-size: 15px; }
.ph-next .btn { height: 36px; background: #FFFFFF; color: var(--ink); }
.ph-k { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.ph-k span { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.ph-k small { font-size: 12px; font-weight: 700; color: #8A5A0B; }
.ph-call { display: flex; flex-direction: column; gap: 8px; }
.ph-call.due { border-color: var(--amber); }
.ph-ct { display: flex; justify-content: space-between; gap: 10px; }
.ph-ct b { font-size: 15px; }
.ph-ct small { font-size: 12px; font-weight: 700; color: var(--muted); }
.ph-ct small.late { color: var(--danger); }
.ph-why { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ph-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-acts > * { flex: 1 1 140px; justify-content: center; }
.ph-call.due .call-go { background: var(--ok); color: #FFFFFF; }
.ph-note { display: flex; flex-direction: column; gap: 8px; }
.ph-note textarea { border-radius: 12px; border: 1px solid var(--line-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.ph-todo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.ph-todo small { font-size: 12px; color: var(--muted); }
.ph-foot { text-align: center; font-size: 12px; }

/* Lab reports and files (C27) */
.cs-side .cs-in { width: auto; }
.lab-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--row-line); flex-wrap: wrap; }
.lab-row > span:first-child { flex: 1 1 160px; display: flex; flex-direction: column; min-width: 0; }
.lab-row b { font-size: 14px; }
.lab-row small { font-size: 12px; color: var(--muted); }
.lab-row a.m-btn { display: inline-flex; align-items: center; text-decoration: none; }
.lab-form { display: flex; flex-direction: column; gap: 10px; }
.lab-pick { justify-content: center; cursor: pointer; }
.m-act { display: flex; gap: 6px; flex-wrap: wrap; }
.m-files-panel { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.m-files-panel .slot-acts { justify-content: space-between; align-items: center; }

/* Reminders (C30, C31) */
.rm-list { display: flex; flex-direction: column; gap: 10px; }
.rm-list > .empty { flex-grow: 1; }
.rm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px 16px; align-items: center; }
.rm-row.late { border-color: #F0D9A6; }
.rm-row.done { opacity: 0.75; }
.rm-who, .rm-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-who b, .rm-what b { font-size: 14px; }
.rm-who small, .rm-what small { font-size: 12px; color: var(--muted); }
.rm-what small.t-warn { color: #8A5A0B; font-weight: 700; }
.rm-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.rm-note { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.rm-note input { flex: 1 1 220px; height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 12px; font: inherit; }
@media (max-width: 760px) {
  .rm-row { grid-template-columns: minmax(0, 1fr); }
  .rm-acts { justify-content: flex-start; }
}

/* Care team, care plans and posts (C32) */
.tm-list { display: flex; flex-direction: column; gap: 10px; }
.tm-row { display: grid; grid-template-columns: 28px minmax(0, 1.3fr) minmax(0, 1.2fr) 100px 100px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.tm-n { width: 26px; height: 26px; border-radius: 13px; background: var(--row-line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.tm-who { display: flex; flex-direction: column; min-width: 0; }
.tm-who b { font-size: 14px; }
.tm-who small { font-size: 12px; color: var(--muted); }
.tm-k { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.tm-k small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.tm-k .chip { align-self: flex-start; }
.tm-acts { display: flex; gap: 6px; align-items: center; }
.tm-add { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.tm-add .slot-acts { justify-content: space-between; align-items: center; }
.tm-arow { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--row-line); padding-top: 8px; }
.tm-arow .tm-who { flex-grow: 1; }
.pl-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pl-card { display: flex; flex-direction: column; gap: 12px; }
.pl-card > b, .pl-form > b { font-size: 15px; }
.pl-form { display: flex; flex-direction: column; gap: 10px; }
.pl-form textarea { border-radius: 12px; border: 1px solid var(--line-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.pl-form select { height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 10px; font: inherit; background: var(--card); }
.pl-list { display: flex; flex-direction: column; gap: 6px; }
.pl-item, .pl-post { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; text-align: left; min-height: 44px; }
.pl-item { cursor: pointer; }
.pl-item span:first-child, .pl-post span:first-child { display: flex; flex-direction: column; min-width: 0; }
.pl-item small, .pl-post small { font-size: 12px; color: var(--muted); }
.pl-editor { border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 1180px) {
  .tm-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .tm-k { grid-column: 2 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .tm-acts { grid-column: 3; grid-row: 1; }
  .pl-wrap { grid-template-columns: minmax(0, 1fr); }
}
.pl-form > input { height: 42px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 12px; font: inherit; font-size: 14px; }
.pl-form .btn, .pl-card > div > .btn { justify-content: center; }

/* Reports (C33) */
.rp-wrap { display: flex; gap: 20px; align-items: flex-start; }
.rp-days { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-days > b, .rp-list > b { font-size: 15px; margin-bottom: 4px; }
.rp-day { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: 13px; }
.rp-day b { text-align: right; }
.rp-bar { height: 12px; background: var(--row-line); border-radius: 6px; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.rp-side { width: 330px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-list { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rp-list > b { padding: 12px 16px 4px; }
.rp-list .pl-row small { color: var(--muted); font-size: 12px; }
@media (max-width: 1180px) {
  .rp-wrap { flex-direction: column; align-items: stretch; }
  .rp-side { width: auto; }
}
.rp-stats { margin-bottom: 16px; } .rp-wrap + small { display: block; margin-top: 12px; }

/* Staff and logins (C35) */
.st-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 160px minmax(0, 1.4fr) auto; gap: 8px 14px; align-items: center; }
.st-sel { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 10px; font: inherit; font-size: 14px; background: var(--card); width: 100%; }
.st-note { font-size: 12px; }
.st-pending { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) {
  .st-row { grid-template-columns: minmax(0, 1fr) auto; }
  .st-role { grid-column: 1 / -1; }
  .st-note { grid-column: 1 / -1; }
  .st-row .m-btn { grid-column: 2; grid-row: 1; }
}

/* An expert's own desk (C36): sessions and free times. */
.ss-list { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-list > .empty { flex-grow: 1; }
.ss-day { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 8px 0 0; }
.ss-day:first-child { margin-top: 0; }
.ss-note { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ss-note textarea { width: 100%; border-radius: var(--r); border: 1px solid var(--line-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.ss-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ss-free { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-2); }
.ss-free > b, .ss-free-form > b { font-size: 15px; color: var(--ink); }
.ss-free-form { display: flex; flex-direction: column; gap: 10px; }
.ss-times { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ss-win { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-days { display: flex; gap: 4px; flex-wrap: wrap; }
.ss-days .who-btn { min-width: 40px; min-height: 34px; padding: 0 6px; }
.ss-win input[type="time"], .ss-free-form select { height: 38px; border-radius: var(--r); border: 1px solid var(--line-2); padding: 0 8px; font: inherit; background: var(--card); }
.ss-win label { display: flex; gap: 6px; align-items: center; }
@media (max-width: 1180px) {
  .ss-free { width: auto; }
}

/* Help (C52) */
.help { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.help-card h2 { font-size: 19px; margin-bottom: 8px; }
.help-card ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; color: var(--ink); }
@media (max-width: 520px) { .help { grid-template-columns: minmax(0, 1fr); } }