:root {
      --bg: #eef3f7;
      --panel: #ffffff;
      --panel-soft: #f7fafc;
      --text: #172233;
      --muted: #66758a;
      --line: #d9e2ec;
      --primary: #1263a3;
      --primary-dark: #0d4774;
      --ok: #1f6b52;
      --warn: #8a5c14;
      --critical: #9b2c2c;
      --info: #2a5f8f;
      --neutral: #5c6b7a;
      --shadow: 0 18px 45px rgba(21, 39, 62, 0.12);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    .app-main-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .app-sidebar {
      width: 252px;
      flex-shrink: 0;
      background: linear-gradient(180deg, #0d2538 0%, #10283b 100%);
      color: #e8f3fb;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      position: sticky;
      top: 0;
      align-self: flex-start;
      transition: width 0.2s ease;
      border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    .app-shell.sidebar-collapsed .app-sidebar {
      width: 76px;
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 20px 18px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sidebar-brand-mark {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: linear-gradient(135deg, #64b5f6, #d2ecff);
      color: #0d2538;
      font-weight: 800;
      letter-spacing: -0.08em;
      font-size: 14px;
    }

    .sidebar-brand-text {
      min-width: 0;
      overflow: hidden;
    }

    .sidebar-brand-text strong {
      display: block;
      font-size: 15px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .sidebar-brand-text span {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      color: #9fb8cc;
      white-space: nowrap;
    }

    .app-shell.sidebar-collapsed .sidebar-brand-text {
      opacity: 0;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .sidebar-collapse-btn {
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #9fb8cc;
      padding: 0;
      display: grid;
      place-items: center;
      transition: background 0.14s ease, color 0.14s ease;
    }

    .sidebar-collapse-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .sidebar-collapse-icon {
      width: 20px;
      height: 20px;
      display: block;
    }

    .sidebar-bottom {
      margin-top: auto;
      padding: 8px 14px 14px;
      display: flex;
      align-items: center;
    }

    .app-shell.sidebar-collapsed .sidebar-bottom {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }

    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      padding: 14px 14px 10px;
    }

    .sidebar-nav-group + .sidebar-nav-group {
      margin-top: 18px;
    }

    .sidebar-nav-group-label {
      display: none;
    }

    .sidebar-nav-list {
      display: grid;
      gap: 4px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .sidebar-nav-item {
      width: 100%;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: #d7e8f5;
      padding: 10px 12px;
      text-align: left;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      transition: background 0.14s ease, color 0.14s ease;
    }

    .sidebar-nav-item:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }

    .sidebar-nav-item.active {
      background: rgba(232, 243, 251, 0.95);
      color: #0d2538;
    }

    .sidebar-nav-icon {
      width: 22px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      color: inherit;
    }

    .mono-icon,
    .inline-mono-icon .mono-icon {
      width: 18px;
      height: 18px;
      display: block;
    }

    .inline-mono-icon {
      display: inline-flex;
      align-items: center;
      color: var(--muted);
    }

    .sidebar-logout-btn {
      width: 100%;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: #d7e8f5;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      transition: background 0.14s ease, color 0.14s ease;
    }

    .sidebar-logout-btn .mono-icon {
      width: 22px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
    }

    .sidebar-nav-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .app-shell.sidebar-collapsed .sidebar-nav-item {
      justify-content: center;
      padding: 10px 8px;
    }

    .app-shell.sidebar-collapsed .sidebar-nav-label {
      display: none;
    }

    .sidebar-footer-nav {
      margin-top: auto;
      padding: 10px 14px 0;
    }

    .sidebar-user {
      padding: 4px 14px 12px;
    }

    .sidebar-logout-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .app-shell.sidebar-collapsed .sidebar-logout-label {
      display: none;
    }

    .app-shell.sidebar-collapsed .sidebar-logout-btn {
      padding: 9px;
      justify-content: center;
    }

    .patient-portal-page-title {
      margin: 0 0 6px;
      font-size: 28px;
      letter-spacing: -0.02em;
    }

    .patient-portal-page-sub {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .patient-settings-placeholder {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .user-settings-section .patient-portal-page-sub strong {
      color: var(--text);
      font-weight: 600;
    }

    .user-settings-account {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 0 0 18px;
      padding: 12px 14px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--line) 24%, #fff);
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    }

    .user-settings-account strong {
      display: block;
      font-size: 14px;
    }

    .user-settings-account span {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
    }

    .user-settings-group-title {
      display: none;
    }

    .user-settings-list {
      display: flex;
      flex-direction: column;
    }

    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 10px 0;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }

    .settings-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .settings-row-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .settings-row-text strong {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 600;
    }

    .settings-row-hint {
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .settings-row--toggle {
      cursor: pointer;
    }

    .settings-row--select,
    .settings-row--text {
      align-items: center;
    }

    .settings-select,
    .settings-input {
      width: 200px;
      max-width: 100%;
      padding: 6px 32px 6px 10px;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      transition: all 0.15s ease;
    }

    .settings-input {
      background-image: none;
      padding-right: 10px;
    }

    .settings-select:hover,
    .settings-input:hover {
      border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    }

    .settings-input:focus {
      outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
      border-color: var(--primary);
    }

    .settings-switch {
      position: relative;
      display: inline-flex;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .settings-switch-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .settings-switch-slider {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line) 70%, #fff);
      transition: background 0.18s ease;
    }

    .settings-switch-slider::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(15, 35, 52, 0.18);
      transition: transform 0.18s ease;
    }

    .settings-switch-input:checked + .settings-switch-slider {
      background: color-mix(in srgb, var(--primary) 75%, #fff);
    }

    .settings-switch-input:checked + .settings-switch-slider::before {
      transform: translateX(20px);
    }

    .settings-switch-input:focus-visible + .settings-switch-slider {
      outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
      outline-offset: 2px;
    }

    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .brand--header {
      margin-bottom: 0;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, #64b5f6, #d2ecff);
      color: #0d2538;
      font-weight: 800;
      letter-spacing: -0.08em;
    }

    .brand h1 {
      margin: 0;
      font-size: 19px;
      line-height: 1.1;
    }

    .brand--header h1 {
      color: var(--text);
    }

    .brand small {
      display: block;
      margin-top: 4px;
      color: #a9c0d1;
    }

    .brand--header small {
      color: var(--muted);
    }

    .side-label {
      margin: 24px 0 9px;
      color: #9fb8cc;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .role-list {
      display: grid;
      gap: 8px;
    }

    .role-button,
    .patient-button {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      padding: 11px 12px;
      text-align: left;
      background: rgba(255, 255, 255, 0.06);
      color: #e8f3fb;
      transition: 0.16s ease;
    }

    .role-button:hover,
    .patient-button:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    .role-button.active,
    .patient-button.active {
      background: #e8f3fb;
      color: #10283b;
      border-color: #e8f3fb;
    }

    .role-button strong,
    .patient-button strong {
      display: block;
      font-size: 14px;
    }

    .role-button span,
    .patient-button span {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      opacity: 0.78;
    }

    .side-tabs {
      display: grid;
      gap: 8px;
    }

    .side-tab {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      padding: 12px 13px;
      text-align: left;
      background: rgba(255, 255, 255, 0.06);
      color: #e8f3fb;
      font-weight: 700;
    }

    .side-tab.active {
      background: #e8f3fb;
      color: #10283b;
      border-color: #e8f3fb;
    }

    .main {
      padding: 28px;
      overflow: hidden;
    }

    .user-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      cursor: pointer;
    }

    .user-menu-item-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: #e6f2fb;
    }

    .user-menu-item-body {
      min-width: 0;
    }

    .user-menu-item-body strong {
      display: block;
      font-size: 14px;
      margin-bottom: 3px;
    }

    .user-menu-item-body > span {
      display: block;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }

    .user-menu-item:hover {
      background: #f7fafc;
    }

    .user-menu-item.active {
      background: #e6f2fb;
      border-color: #8dc3e6;
    }

    .demo-role-modal {
      width: min(480px, calc(100vw - 24px));
    }

    #demoRoleModal {
      background: transparent;
      padding: 0;
    }

    #demoRoleModal.open {
      display: block !important;
    }

    #demoRoleModal .demo-role-modal {
      position: fixed;
      margin: 0;
      z-index: 11;
      max-height: min(calc(100vh - 24px), 560px);
      display: flex;
      flex-direction: column;
    }

    #demoRoleModal .user-menu-list {
      flex: 1 1 auto;
      min-height: 0;
      overscroll-behavior: contain;
    }

    .demo-role-modal-head {
      margin-bottom: 14px;
    }

    .demo-role-modal-head h3 {
      margin: 0;
      font-size: 22px;
      line-height: 1.25;
      color: var(--primary-dark);
    }

    .demo-role-modal .user-menu-list {
      max-height: min(52vh, 420px);
    }

    .demo-role-modal-actions {
      margin-top: 14px;
      justify-content: flex-end;
    }

    .user-menu-list {
      display: grid;
      gap: 6px;
      max-height: 360px;
      overflow: auto;
    }

    .doc-preview {
      margin-top: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fbfd;
      font-size: 13px;
      line-height: 1.55;
      color: var(--text);
    }

    .doc-preview h4 {
      margin: 0 0 8px;
      font-size: 14px;
    }

    .scope-note {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: #eef6fc;
      border: 1px solid #c5dff0;
      font-size: 13px;
      line-height: 1.45;
      color: #1a4468;
    }

    .scope-note strong {
      display: block;
      margin-bottom: 4px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: flex-start;
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    .topbar-left {
      display: grid;
      gap: 14px;
      min-width: 0;
      flex: 1;
    }

    .app-shell .topbar .brand--header {
      display: none;
    }

    .topbar-headings {
      min-width: 0;
    }

    .page-identity {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .page-identity-photo {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      display: block;
      background: #e6f2fb;
      border: 3px solid color-mix(in srgb, var(--primary) 18%, var(--line));
      box-shadow: 0 10px 28px rgba(21, 39, 62, 0.12);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      outline: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .page-identity-photo:hover {
      border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
    }

    .page-identity-photo:focus,
    .page-identity-photo:focus-visible,
    .page-identity-photo:active {
      outline: none;
      border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
      box-shadow: 0 10px 28px rgba(21, 39, 62, 0.12);
    }

    .page-identity-notes-wrap {
      display: none;
      align-items: center;
    }

    .page-identity-notes-wrap.is-visible {
      display: inline-flex;
    }

    .page-identity-notes-wrap[hidden] {
      display: none !important;
    }

    .page-identity-detail:not([hidden]) + .page-identity-notes-wrap.is-visible::before {
      content: "·";
      margin: 0 10px;
      color: color-mix(in srgb, var(--muted) 50%, transparent);
    }

    .page-identity-notes-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 2px 10px 2px 8px;
      border: 1px solid color-mix(in srgb, #d4a800 35%, var(--line));
      border-radius: 999px;
      background: linear-gradient(180deg, #fff9e6 0%, #fff3c4 100%);
      color: #7a5b00;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.45;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    }

    .page-identity-notes-btn:hover {
      background: linear-gradient(180deg, #fff3bf 0%, #ffe082 100%);
      border-color: color-mix(in srgb, #d4a800 55%, var(--line));
      color: #5d4400;
    }

    .page-identity-notes-btn.has-content::after {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #2e7d32;
      flex-shrink: 0;
    }

    .page-identity-notes-btn-icon {
      width: 14px;
      height: 14px;
      display: block;
      flex-shrink: 0;
    }

    .personal-notes-modal {
      width: min(560px, calc(100vw - 24px));
    }

    #personalNotesModal {
      background: transparent;
      padding: 0;
    }

    #personalNotesModal.open {
      display: block !important;
    }

    #personalNotesModal .personal-notes-modal {
      position: fixed;
      margin: 0;
      z-index: 11;
      max-height: min(calc(100vh - 24px), 640px);
      display: flex;
      flex-direction: column;
    }

    #personalNotesModal textarea {
      flex: 1 1 auto;
      min-height: 180px;
      overscroll-behavior: contain;
    }

    .personal-notes-modal-head {
      margin-bottom: 14px;
    }

    .personal-notes-modal-head h3 {
      margin: 0 0 6px;
    }

    .personal-notes-modal-head p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .personal-notes-modal textarea {
      min-height: 220px;
      resize: vertical;
      line-height: 1.5;
    }

    .personal-notes-modal-actions {
      margin-top: 16px;
    }

    .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;
    }

    .page-identity-body {
      min-width: 0;
      flex: 1;
    }

    .page-identity-details {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 8px;
      gap: 0;
      max-width: 100%;
    }

    .page-identity-detail {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
      white-space: nowrap;
    }

    .page-identity-detail-role {
      color: var(--primary);
      font-weight: 600;
    }

    .page-identity-detail:not([hidden]) + .page-identity-detail:not([hidden])::before {
      content: "·";
      margin: 0 10px;
      color: color-mix(in srgb, var(--muted) 50%, transparent);
      font-weight: 400;
    }

    .page-identity-detail[hidden] {
      display: none;
    }

    .eyebrow {
      margin: 0 0 8px;
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    h2,
    h3,
    h4 {
      margin: 0;
      letter-spacing: -0.02em;
    }

    .topbar h2 {
      font-size: 30px;
    }

    .topbar p {
      max-width: 780px;
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.5;
    }

    .status-pill,
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: 0.01em;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--muted) 6%, #fff);
      color: var(--neutral);
      white-space: nowrap;
    }

    .pill.ok {
      background: color-mix(in srgb, var(--ok) 9%, #fff);
      border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
      color: var(--ok);
    }

    .pill.warn {
      background: color-mix(in srgb, var(--warn) 10%, #fff);
      border-color: color-mix(in srgb, var(--warn) 24%, var(--line));
      color: var(--warn);
    }

    .pill.critical {
      background: color-mix(in srgb, var(--critical) 9%, #fff);
      border-color: color-mix(in srgb, var(--critical) 22%, var(--line));
      color: var(--critical);
    }

    .pill.info {
      background: color-mix(in srgb, var(--info) 9%, #fff);
      border-color: color-mix(in srgb, var(--info) 22%, var(--line));
      color: var(--info);
    }

    .pill.neutral {
      background: color-mix(in srgb, var(--neutral) 7%, #fff);
      border-color: color-mix(in srgb, var(--neutral) 18%, var(--line));
      color: var(--neutral);
    }

    .topbar p {
      max-width: 780px;
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.5;
    }

    .grid {
      display: grid;
      gap: 18px;
    }

    .grid > * {
      min-width: 0;
    }

    .grid.cols-2 {
      grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
    }

    .grid.cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      min-width: 0;
    }

    .card.soft {
      background: var(--panel-soft);
      box-shadow: none;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .card-header > div:first-child {
      min-width: 0;
      flex: 1;
    }

    .card-header p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .card-header-side {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }

    .patient-inline-actions {
      margin-top: 10px;
    }

    .btn-compact {
      padding: 6px 10px;
      font-size: 12px;
      min-height: 32px;
    }

    .referral-action-wrap {
      position: relative;
      display: inline-flex;
    }

    .referral-action-btn--urgent {
      border-color: #e8c468;
      background: #fffbeb;
    }

    .referral-tip {
      position: absolute;
      left: 0;
      top: calc(100% + 6px);
      z-index: 30;
      width: min(320px, 90vw);
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(21, 39, 62, 0.14);
      font-size: 11px;
      line-height: 1.4;
      color: var(--muted);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .referral-tip-line {
      padding: 4px 0;
      border-bottom: 1px solid var(--border);
    }

    .referral-tip-line:last-child {
      border-bottom: none;
    }

    .referral-tip-line strong {
      color: var(--text);
      font-size: 11px;
    }

    .referral-tip-line span {
      display: block;
      margin-top: 2px;
    }

    .referral-tip-empty {
      color: var(--muted);
    }

    .referral-action-wrap:hover .referral-tip,
    .referral-action-wrap:focus-within .referral-tip {
      opacity: 1;
      visibility: visible;
    }

    .referral-open-hint {
      margin: 8px 0 0;
      font-size: 12px;
      line-height: 1.45;
      color: #8a6d1d;
      max-width: 520px;
    }

    .referral-open-hint strong {
      color: #7a5f10;
    }

    .referral-list-hint {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--primary-dark);
    }

    .flow-phase-actions {
      margin-top: 10px;
    }

    .flow-closure-summary-wrap {
      margin-top: 12px;
    }

    .flow-closure-summary {
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--primary) 3%, var(--surface));
    }

    .flow-closure-summary--empty {
      border-style: dashed;
    }

    .flow-closure-summary-lead {
      margin: 0 0 10px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .flow-closure-doc-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .flow-closure-doc-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 13px;
    }

    .flow-closure-doc-item.is-outbound {
      font-weight: 600;
    }

    .flow-closure-outbound-note {
      margin: 12px 0 0;
      font-size: 13px;
      color: var(--primary-dark);
    }

    .flow-portal-activation-wrap {
      margin-top: 12px;
    }

    .flow-portal-activation {
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    }

    .flow-portal-activation--warn {
      border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
      background: color-mix(in srgb, var(--warn) 10%, var(--surface));
    }

    .flow-portal-activation-title {
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .flow-portal-activation-text {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--muted);
    }

    .flow-portal-activation-email {
      font-weight: 600;
      color: var(--text);
      word-break: break-all;
    }

    .amb-field-hint {
      margin: 4px 0 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .field-label-required::after {
      content: " *";
      color: var(--warn);
    }

    .flow-closure-outbound-warn {
      margin: 12px 0 0;
      font-size: 13px;
      color: #9a5b00;
    }

    .referral-open-dot {
      color: #e8a317;
      margin-left: 4px;
      font-size: 11px;
      vertical-align: middle;
    }

    .referral-open-pill {
      margin-left: 4px;
      font-size: 10px;
      padding: 2px 6px;
    }

    .patient-row.has-open-referral:not(.selected) {
      background: #fffbeb;
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .metric {
      padding: 17px;
      border-radius: 16px;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: 0 8px 28px rgba(21, 39, 62, 0.08);
    }

    .metric strong {
      display: block;
      font-size: 26px;
      margin-bottom: 6px;
    }

    .metric span {
      color: var(--muted);
      font-size: 13px;
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(3, minmax(140px, 1fr));
      gap: 8px;
      margin-top: 14px;
      overflow-x: auto;
    }

    .timeline.branch {
      grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .phase {
      min-height: 82px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fbfd;
      padding: 11px;
      color: var(--muted);
      position: relative;
    }

    .phase.active {
      background: #e6f2fb;
      color: var(--primary-dark);
      border-color: #8dc3e6;
    }

    .phase.done {
      background: #edf8f2;
      color: var(--ok);
      border-color: #a7d7bf;
    }

    .phase code {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .phase span {
      font-size: 12px;
      line-height: 1.35;
    }

    .history-feed {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 14px;
    }

    .history-item {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 12px;
      padding-bottom: 18px;
      position: relative;
    }

    .history-item::before {
      content: "";
      position: absolute;
      left: 9px;
      top: 22px;
      bottom: 0;
      width: 2px;
      background: var(--line);
    }

    .history-item:last-child::before {
      display: none;
    }

    .history-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid var(--line);
      background: #fff;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .history-item.out .history-dot {
      border-color: var(--primary);
      background: #e6f2fb;
    }

    .history-item.in .history-dot {
      border-color: #a7d7bf;
      background: #edf8f2;
    }

    .history-item.systém .history-dot {
      border-color: #d4c4a8;
      background: #faf6ee;
    }

    .history-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
      background: #fff;
    }

    .history-item.out .history-card {
      background: #f8fbfd;
    }

    .history-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .history-card h4 {
      margin: 0 0 4px;
      font-size: 14px;
    }

    .history-author {
      margin: 0 0 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .history-body {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }

    .history-attachments {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .history-attachment-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .history-attachment-row.is-shared-outbound {
      padding: 4px 8px;
      margin: -4px -8px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--primary) 6%, #fff);
    }

    .history-attachment-row.is-shared-outbound .history-attachment {
      color: var(--primary-dark);
      font-weight: 500;
    }

    .flow-doc-access {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--muted);
      cursor: help;
    }

    .flow-doc-access--outbound {
      color: var(--primary-dark);
    }

    .flow-doc-access-icon {
      width: 15px;
      height: 15px;
    }

    .medication-card-title--with-hint {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .card-title-hint {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      cursor: help;
      line-height: 0;
    }

    .card-title-hint-icon {
      width: 15px;
      height: 15px;
    }

    .list-pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }

    .list-pagination-meta {
      font-size: 12px;
      color: var(--muted);
      min-width: 48px;
      text-align: center;
    }

    .history-attachment-edit,
    .contrib-edit-btn {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      font-family: inherit;
    }

    .history-attachment-edit:hover,
    .contrib-edit-btn:hover {
      color: var(--primary-dark);
      border-color: #8dc3e6;
      background: #e6f2fb;
    }

    .contrib-edit-btn {
      margin-left: auto;
    }

    .flow-document-edit-meta {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--text);
    }

    .flow-document-edit-hint {
      margin: 0 0 12px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }

    .history-attachment {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #f8fbfd;
      color: var(--primary-dark);
      cursor: pointer;
      font-family: inherit;
      line-height: 1.3;
    }

    .history-attachment:hover {
      background: #e6f2fb;
      border-color: #8dc3e6;
    }

    .flow-evidence-label {
      margin: 10px 0 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .phase-evidence-box {
      margin-top: 8px;
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface) 55%, #fff);
      overflow: hidden;
    }

    .phase-evidence-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      background: color-mix(in srgb, var(--line) 28%, #fff);
      border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    }

    .phase-evidence-summary-main {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text);
      min-width: 0;
    }

    .phase-evidence-summary-icon {
      width: 16px;
      height: 16px;
      color: var(--muted);
      flex-shrink: 0;
    }

    .phase-evidence-download-all {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--primary-dark);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .phase-evidence-download-all:hover {
      color: var(--primary);
    }

    .phase-evidence-download-icon {
      width: 14px;
      height: 14px;
    }

    .phase-contributions {
      display: flex;
      flex-direction: column;
    }

    .phase-contribution {
      border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: #fff;
    }

    .phase-contribution:last-child {
      border-bottom: none;
    }

    .phase-contribution-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
    }

    .phase-contribution-expand,
    .phase-contribution-summary-hit {
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 0;
    }

    .phase-contribution-expand {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--muted);
    }

    .phase-contribution-summary-hit {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
      text-align: left;
    }

    .phase-contribution-summary-text {
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
    }

    .phase-contribution-summary-text strong {
      font-size: 14px;
      line-height: 1.3;
    }

    .phase-contribution-summary-text time {
      font-size: 12px;
      color: var(--muted);
    }

    .contrib-avatar-wrap {
      position: relative;
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }

    .contrib-avatar,
    .contrib-avatar-fallback {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--primary) 10%, #eef3f7);
      color: var(--primary-dark);
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .contrib-avatar-photo {
      display: block;
      object-fit: cover;
      background: #eef3f7;
    }

    .contrib-avatar-photo.is-hidden,
    .contrib-avatar-fallback.is-hidden {
      display: none;
    }

    .contrib-vis-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      flex-shrink: 0;
      cursor: help;
    }

    .contrib-vis-icon--internal {
      background: color-mix(in srgb, var(--ok) 10%, #fff);
      color: var(--ok);
    }

    .contrib-vis-icon--public {
      background: color-mix(in srgb, #7b61c7 12%, #fff);
      color: #5f47a8;
    }

    .contrib-vis-icon-svg {
      width: 15px;
      height: 15px;
    }

    .phase-contribution-download {
      flex-shrink: 0;
    }

    .phase-contribution-body {
      padding: 0 12px 12px 44px;
    }

    .phase-contribution-body.is-collapsed {
      display: none;
    }

    .phase-contribution-note {
      margin: 0 0 8px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }

    .phase-contribution-files-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--primary-dark);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    .phase-contribution-chevron {
      width: 7px;
      height: 7px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 0.18s ease;
      flex-shrink: 0;
    }

    .phase-contribution-chevron--small {
      width: 6px;
      height: 6px;
    }

    .phase-contribution-chevron.is-open {
      transform: rotate(45deg);
    }

    .phase-contribution-files {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .phase-contribution-files.is-collapsed {
      display: none;
    }

    .phase-file-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      max-width: 100%;
      padding: 7px 10px;
      border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      text-align: left;
    }

    .phase-file-chip:hover {
      border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
      background: color-mix(in srgb, var(--primary) 4%, #fff);
    }

    .phase-file-chip-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .phase-file-chip-icon--pdf {
      background: #fde8e8;
      color: #b42318;
    }

    .phase-file-chip-icon--image {
      background: #e7f6ec;
      color: #1f6b52;
    }

    .phase-file-chip-icon--doc,
    .phase-file-chip-icon--file {
      background: #edf2f7;
      color: #486581;
    }

    .phase-file-chip-name {
      font-size: 13px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .phase-file-chip-size {
      font-size: 12px;
      color: var(--muted);
      flex-shrink: 0;
    }

    .phase-evidence-footnote {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 0;
      padding: 10px 14px 12px;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
      border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--surface) 40%, #fff);
    }

    .phase-evidence-footnote-icon {
      width: 14px;
      height: 14px;
      margin-top: 1px;
      flex-shrink: 0;
    }

    .phase-evidence-box--compact .phase-evidence-footnote {
      display: none;
    }

    .flow-closure-contributions .phase-evidence-box {
      border: none;
      background: transparent;
    }

    .flow-closure-contributions .phase-evidence-summary {
      display: none;
    }

    .doc-preview-meta {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }

    .doc-modal-chrome {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .doc-modal-chrome h3 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .modal.doc-modal-panel {
      max-width: 900px;
      width: calc(100% - 32px);
      padding: 16px;
      background: #fff;
    }

    .pdf-viewer-wrap {
      background: #f4f7fa;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 20px;
      max-height: 68vh;
      overflow-y: auto;
    }

    .pdf-page {
      background: #fff;
      max-width: 680px;
      margin: 0 auto;
      padding: 44px 52px 56px;
      box-shadow: 0 2px 12px rgba(13, 37, 56, 0.08);
      border: 1px solid #dde4ea;
      color: #1a1a1a;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 12.5px;
      line-height: 1.55;
      position: relative;
    }

    .pdf-head {
      display: grid;
      grid-template-columns: 52px 1fr auto;
      gap: 14px;
      align-items: start;
      margin-bottom: 18px;
    }

    .pdf-logo {
      width: 52px;
      height: 52px;
      border: 2px solid #1a4d7c;
      color: #1a4d7c;
      font-weight: 800;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }

    .pdf-head strong {
      display: block;
      font-size: 14px;
      color: #1a4d7c;
      line-height: 1.3;
    }

    .pdf-head span {
      display: block;
      font-size: 11px;
      color: #555;
      margin-top: 2px;
    }

    .pdf-doc-id {
      font-size: 10px;
      color: #888;
      text-align: right;
      line-height: 1.4;
    }

    .pdf-rule {
      border: 0;
      border-top: 2px solid #1a4d7c;
      margin: 0 0 20px;
    }

    .pdf-title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      margin: 0 0 16px;
      letter-spacing: 0.02em;
      color: #111;
    }

    .pdf-section {
      margin-bottom: 16px;
    }

    .pdf-section h4 {
      margin: 0 0 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #1a4d7c;
      border-bottom: 1px solid #dde4ea;
      padding-bottom: 4px;
    }

    .pdf-section p {
      margin: 0 0 8px;
      color: #222;
    }

    .pdf-meta-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
      font-size: 12px;
    }

    .pdf-meta-table td {
      padding: 5px 8px;
      border: 1px solid #d8dee6;
      vertical-align: top;
    }

    .pdf-meta-table td:first-child {
      width: 34%;
      background: #f4f7fa;
      font-weight: 600;
      color: #444;
    }

    .pdf-data-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
      font-size: 12px;
    }

    .pdf-data-table th,
    .pdf-data-table td {
      padding: 7px 10px;
      border: 1px solid #ccc;
      text-align: left;
    }

    .pdf-data-table th {
      background: #e8eef5;
      font-weight: 700;
      font-size: 11px;
    }

    .pdf-data-table td.num {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .pdf-list {
      margin: 0;
      padding-left: 18px;
    }

    .pdf-list li {
      margin-bottom: 4px;
    }

    .pdf-verdict {
      border: 2px solid #1a4d7c;
      background: #f0f6fc;
      padding: 14px 16px;
      margin-bottom: 16px;
      border-radius: 4px;
    }

    .pdf-verdict.warn {
      border-color: #b96b05;
      background: #fdf6e8;
    }

    .pdf-verdict.critical {
      border-color: #b3261e;
      background: #fdf0ef;
    }

    .pdf-verdict strong {
      display: block;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .pdf-schedule {
      border: 1px solid #d8dee6;
      margin-bottom: 16px;
    }

    .pdf-schedule-row {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 12px;
      padding: 8px 12px;
      border-bottom: 1px solid #e8ecf0;
      font-size: 12px;
    }

    .pdf-schedule-row:last-child {
      border-bottom: 0;
    }

    .pdf-schedule-row time {
      font-weight: 700;
      color: #1a4d7c;
      font-variant-numeric: tabular-nums;
    }

    .pdf-sign {
      margin-top: 28px;
      padding-top: 16px;
      border-top: 1px solid #ccc;
    }

    .pdf-sign strong {
      display: block;
      font-size: 12px;
    }

    .pdf-sign span {
      font-size: 11px;
      color: #555;
    }

    .pdf-footer {
      margin-top: 32px;
      font-size: 10px;
      color: #999;
      text-align: center;
      border-top: 1px dashed #ccc;
      padding-top: 10px;
    }

    .pdf-stamp {
      display: inline-block;
      margin-top: 8px;
      padding: 4px 10px;
      border: 1px solid #1a4d7c;
      color: #1a4d7c;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .amb-flow {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 14px;
    }

    .amb-flow-step {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 14px;
      padding-bottom: 20px;
      position: relative;
    }

    .amb-flow-step::before {
      content: "";
      position: absolute;
      left: 17px;
      top: 36px;
      bottom: 0;
      width: 2px;
      background: var(--line);
    }

    .amb-flow-step:last-child::before {
      display: none;
    }

    .amb-flow-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid var(--line);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      color: var(--muted);
      flex-shrink: 0;
    }

    .amb-flow-step.done .amb-flow-num {
      border-color: #a7d7bf;
      background: #edf8f2;
      color: var(--ok);
    }

    .amb-flow-step.active .amb-flow-num {
      border-color: #8dc3e6;
      background: #e6f2fb;
      color: var(--primary-dark);
    }

    .amb-flow-step.pending .amb-flow-num,
    .amb-flow-step.na .amb-flow-num {
      border-color: var(--line);
      background: #f8fbfd;
      color: var(--muted);
    }

    .amb-flow-step.action-pending {
      cursor: pointer;
    }

    .amb-flow-step.action-pending:hover .amb-flow-action-circle {
      border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
      color: var(--primary);
      background: color-mix(in srgb, var(--primary) 8%, #fff);
    }

    .amb-flow-step.action-pending:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
      outline-offset: 4px;
      border-radius: var(--radius);
    }

    .amb-flow-action-circle {
      border-color: #c5cdd6;
      background: #eef1f5;
      color: #8a94a0;
    }

    .amb-flow-plus-icon {
      width: 18px;
      height: 18px;
    }

    .amb-flow-action-body h4 {
      color: var(--muted);
    }

    .modal.flow-state-modal-panel {
      max-width: 560px;
    }

    .amb-flow-body {
      min-width: 0;
    }

    .amb-flow-body h4 {
      margin: 0 0 6px;
      font-size: 15px;
    }

    .amb-flow-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px;
    }

    .amb-flow-mini {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .amb-flow-mini span {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #f8fbfd;
      color: var(--muted);
    }

    .amb-flow-mini span.done {
      border-color: #a7d7bf;
      background: #edf8f2;
      color: var(--ok);
    }

    .amb-flow-mini span.active {
      border-color: #8dc3e6;
      background: #e6f2fb;
      color: var(--primary-dark);
    }

    .amb-flow-mini span.na {
      opacity: 0.45;
    }

    .supplement-alert {
      border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border));
      background: color-mix(in srgb, var(--warn) 8%, var(--surface));
      padding: 14px;
      border-radius: var(--radius);
    }

    .supplement-alert h4 {
      margin: 0 0 6px;
      font-size: 14px;
    }

    .supplement-alert p {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .referral-request-inline {
      margin-bottom: 12px;
      padding: 10px 12px;
      border: 1px solid #e8c468;
      border-radius: 10px;
      background: #fffbeb;
    }

    .referral-request-inline h4 {
      margin: 0 0 6px;
      font-size: 13px;
    }

    .flow-state-form {
      margin-top: 20px;
      padding: 18px 20px;
      border-radius: 14px;
      border: 2px solid color-mix(in srgb, var(--primary) 38%, var(--line));
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 11%, #fff) 0%,
        color-mix(in srgb, var(--primary) 5%, var(--panel-soft)) 100%
      );
      box-shadow: 0 6px 22px rgba(18, 99, 163, 0.1);
    }

    .flow-state-form-header {
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    }

    .flow-state-form h4 {
      margin: 0;
      font-size: 17px;
      font-weight: 700;
      color: var(--primary-dark);
      letter-spacing: -0.01em;
    }

    .flow-state-form-intro {
      font-size: 13px;
      color: var(--muted);
      margin: 6px 0 0;
      line-height: 1.45;
      max-width: 36rem;
    }

    .flow-state-form-body {
      display: grid;
      gap: 2px;
    }

    .flow-state-form-actions {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    }

    .flow-state-form-actions .btn {
      width: 100%;
      padding: 12px 18px;
      font-weight: 600;
      font-size: 14px;
    }

    .file-upload {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .file-upload-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .file-upload-list:empty {
      display: none;
    }

    .file-upload-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 16px;
      position: relative;
      margin-bottom: 4px;
    }

    .file-upload-add {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.2;
      color: var(--primary-dark);
      background: color-mix(in srgb, var(--primary) 6%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .file-upload-add:hover {
      background: color-mix(in srgb, var(--primary) 12%, var(--surface));
      border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    }

    .file-upload-add-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
    }

    .file-upload-input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .file-upload-hint {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
      margin-left: 2px;
    }

    .file-chip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px 10px 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      min-height: 0;
    }

    .file-chip-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.02em;
      background: #e8eef4;
      color: var(--primary-dark);
    }

    .file-chip-icon--pdf {
      background: #fde8e8;
      color: #b42318;
    }

    .file-chip-icon--doc {
      background: #e8f0fd;
      color: #175cd3;
    }

    .file-chip-icon--img {
      background: #edf7ed;
      color: #1e6b32;
    }

    .file-chip-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .file-chip-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-chip-meta {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.3;
    }

    .file-chip-remove {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s ease, color 0.12s ease;
    }

    .file-chip-remove:hover {
      background: color-mix(in srgb, #dc2626 12%, var(--surface));
      color: #b42318;
    }

    .file-chip-remove:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
      outline-offset: 1px;
    }

    /* legacy aliases - stejný vzhled v historii a starých šablonách */
    .attach-picker {
      margin-top: 6px;
    }

    .attach-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .visibility-box {
      margin-top: 12px;
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--primary) 3%, var(--surface));
    }

    .visibility-box legend {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      padding: 0 4px;
    }

    .visibility-box label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
    }

    .visibility-box input[type="checkbox"] {
      width: auto;
      margin-top: 2px;
    }

    .flow-step-contributions {
      margin-top: 12px;
    }

    .contribution-note,
    .contribution-doc {
      margin-top: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .contribution-note-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      margin-bottom: 6px;
    }

    .contribution-note-head strong {
      font-size: 13px;
    }

    .contribution-note-head .meta {
      font-size: 12px;
      color: var(--muted);
    }

    .contribution-note p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }

    .contrib-badges {
      display: inline-flex;
      gap: 4px;
    }

    .contrib-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 2px 7px;
      border-radius: 5px;
      border: 1px solid var(--line);
    }

    .contrib-badge.internal {
      background: color-mix(in srgb, var(--neutral) 7%, #fff);
      border-color: color-mix(in srgb, var(--neutral) 18%, var(--line));
      color: var(--neutral);
    }

    .contrib-badge.ambulatory {
      background: color-mix(in srgb, var(--ok) 9%, #fff);
      border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
      color: var(--ok);
    }

    .contrib-badge.patient {
      background: color-mix(in srgb, var(--info) 9%, #fff);
      border-color: color-mix(in srgb, var(--info) 22%, var(--line));
      color: var(--info);
    }

    .coordinator-exam-section {
      margin-top: 16px;
    }

    .exam-summary-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    }

    .exam-summary-bar strong {
      font-size: 14px;
      display: block;
    }

    .exam-summary-bar .meta {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
      display: block;
    }

    .exam-plan-section {
      margin-top: 14px;
    }

    .exam-plan-box {
      border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--primary) 4%, var(--surface));
      padding: 12px 16px 14px;
    }

    .exam-plan-box-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .exam-plan-box-header strong {
      font-size: 14px;
      display: block;
    }

    .exam-plan-box-header .meta {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
      display: block;
      line-height: 1.45;
    }

    .exam-plan-add-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
      background: var(--panel);
      color: var(--primary);
      font-size: 20px;
      line-height: 1;
      flex-shrink: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .exam-plan-add-btn:hover {
      background: color-mix(in srgb, var(--primary) 8%, var(--panel));
    }

    .exam-plan-collapse {
      border: none;
      background: transparent;
      padding: 0;
    }

    .exam-plan-collapse summary {
      list-style: none;
      cursor: pointer;
    }

    .exam-plan-collapse summary::-webkit-details-marker {
      display: none;
    }

    .exam-plan-collapse-summary {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 10px;
      padding: 0;
    }

    .exam-plan-collapse-summary::before {
      content: "▸";
      font-size: 13px;
      color: var(--primary);
      flex-shrink: 0;
      line-height: 1.45;
      margin-top: 1px;
      transition: transform 0.15s ease;
    }

    .exam-plan-collapse[open] .exam-plan-collapse-summary::before {
      transform: rotate(90deg);
    }

    .exam-plan-details {
      padding: 10px 0 0;
    }

    .exam-plan-rows {
      margin-top: 4px;
    }

    .exam-plan-row-line {
      display: flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid var(--line);
      padding: 2px 0;
    }

    .exam-plan-row-line:last-child {
      border-bottom: none;
    }

    .exam-plan-row-main {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 4px;
      border: none;
      background: transparent;
      text-align: left;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
      cursor: pointer;
    }

    .exam-plan-row-main:hover {
      color: var(--primary);
    }

    .exam-plan-row-main-readonly {
      cursor: default;
      padding: 8px 4px;
    }

    .exam-plan-row-main-readonly:hover {
      color: var(--text);
    }

    .exam-plan-row-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }

    .exam-plan-row-complete,
    .exam-plan-row-delete {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .exam-plan-row-complete {
      font-size: 15px;
      font-weight: 700;
    }

    .exam-plan-row-complete:hover {
      color: var(--ok);
      background: color-mix(in srgb, var(--ok) 10%, transparent);
    }

    .exam-plan-row-delete:hover {
      color: var(--critical);
      background: color-mix(in srgb, var(--critical) 8%, transparent);
    }

    .exam-plan-row {
      border: none;
      border-bottom: 1px solid var(--line);
      background: transparent;
    }

    .exam-plan-row:last-of-type {
      border-bottom: none;
    }

    .exam-plan-row-summary {
      list-style: none;
      padding: 8px 0;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.45;
    }

    .exam-plan-row-summary::-webkit-details-marker {
      display: none;
    }

    .exam-plan-row-summary::before {
      content: "▸";
      color: var(--primary);
      font-size: 12px;
      flex-shrink: 0;
      transition: transform 0.15s ease;
    }

    .exam-plan-row[open] > .exam-plan-row-summary::before {
      transform: rotate(90deg);
    }

    .exam-plan-row-text {
      flex: 1;
      min-width: 0;
    }

    .exam-plan-row-flag {
      font-size: 11px;
      color: var(--muted);
      flex-shrink: 0;
    }

    .exam-plan-row-readonly {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      font-size: 13px;
      line-height: 1.45;
      border-bottom: 1px solid var(--line);
    }

    .exam-plan-row-readonly:last-child {
      border-bottom: none;
    }

    .exam-plan-row-body {
      padding: 0 0 10px 14px;
    }

    .exam-plan-inline-fields {
      display: grid;
      gap: 8px;
      margin-bottom: 8px;
    }

    .exam-plan-inline-fields input[type="text"] {
      width: 100%;
      padding: 8px 10px;
      font-size: 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .exam-plan-inline-vis {
      margin-top: 2px;
    }

    .exam-plan-complete-panel {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--line);
    }

    .exam-plan-complete-label {
      margin: 0 0 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .exam-plan-add-form {
      margin-top: 8px;
      border-top: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
    }

    .exam-plan-add-summary {
      padding: 8px 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--primary);
      cursor: pointer;
      list-style: none;
    }

    .exam-plan-add-summary::-webkit-details-marker {
      display: none;
    }

    .exam-plan-empty {
      padding: 8px 0;
      font-size: 13px;
      color: var(--muted);
      margin: 0;
    }

    .exam-plan-list {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
    }

    .exam-plan-list .exam-plan-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 9px 0;
      border: none;
      background: transparent;
    }

    .exam-plan-list .exam-plan-row + .exam-plan-row:not(.exam-plan-row--editing) {
      border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }

    .exam-plan-list .exam-plan-row--editing + .exam-plan-row {
      border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }

    .exam-plan-list .exam-plan-row-main {
      flex: 1;
      min-width: 0;
      display: block;
      padding: 0;
      cursor: default;
      text-align: left;
      border: none;
      background: transparent;
    }

    .exam-plan-list .exam-plan-row-main:hover {
      color: var(--text);
    }

    .exam-plan-row-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
    }

    .exam-plan-row-meta {
      margin-top: 2px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }

    .exam-plan-row-note {
      margin-top: 4px;
      font-size: 12px;
      color: var(--text);
      line-height: 1.4;
    }

    .exam-plan-list .exam-plan-row-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }

    .exam-plan-row--editing {
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 10px;
      margin: 2px 0;
      border-radius: 10px;
      background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    }

    .exam-plan-row--editing input[type="text"],
    .exam-plan-row--editing input[type="datetime-local"] {
      flex: 1 1 120px;
      min-width: 0;
      padding: 6px 0;
      border: none;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      font-size: 13px;
      transition: border-bottom-color 0.2s;
    }

    .exam-plan-row--editing input:focus {
      outline: none;
      border-bottom-color: var(--primary);
    }

    #examCompleteDoneModal.exam-complete-done-backdrop {
      display: none;
      opacity: 0;
      background: rgba(13, 37, 56, 0);
      transition: opacity 0.28s ease, background 0.28s ease;
    }

    #examCompleteDoneModal.exam-complete-done-backdrop.open,
    #examCompleteDoneModal.exam-complete-done-backdrop.is-closing {
      display: grid;
    }

    #examCompleteDoneModal.exam-complete-done-backdrop.open.is-visible {
      opacity: 1;
      background: rgba(13, 37, 56, 0.45);
    }

    #examCompleteDoneModal.exam-complete-done-backdrop.is-closing {
      opacity: 0;
      background: rgba(13, 37, 56, 0);
    }

    #examCompleteDoneModal .exam-complete-done-panel {
      transform: translateX(36px);
      opacity: 0;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
    }

    #examCompleteDoneModal.open.is-visible .exam-complete-done-panel {
      transform: translateX(0);
      opacity: 1;
    }

    #examCompleteDoneModal.is-closing .exam-complete-done-panel {
      transform: translateX(28px);
      opacity: 0;
    }

    .flow-evidence-exam-hint {
      margin: 0 0 6px;
      padding: 8px 10px;
      font-size: 12px;
      color: var(--info);
      background: color-mix(in srgb, var(--primary) 6%, var(--panel));
      border-radius: 8px;
      line-height: 1.4;
    }

    .history-attachment-exam-tag {
      font-size: 10px;
      color: var(--muted);
      margin-left: 6px;
    }

    .exam-plan-bar {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .exam-plan-bar-empty .exam-summary-bar {
      flex: 1;
    }

    .exam-plan-collapse summary.exam-summary-bar {
      margin-top: 0;
      border: none;
      border-radius: var(--radius);
      background: transparent;
    }

    .exam-empty-inline {
      margin: 10px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    .modal.exam-modal-panel {
      max-width: 720px;
      max-height: min(90vh, 820px);
      overflow-y: auto;
    }

    .exam-modal-toolbar {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .exam-modal-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .exam-modal-section h4 {
      margin: 0 0 8px;
      font-size: 14px;
    }

    .exam-modal-panel input[type="datetime-local"] {
      min-height: 42px;
    }

    .exam-modal-panel input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.7;
    }

    .exam-modal-panel input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }

    .exam-checkbox-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
      font-size: 13px;
      cursor: pointer;
    }

    .exam-checkbox-row input {
      width: 18px;
      height: 18px;
      margin: 0;
      cursor: pointer;
    }

    .exam-admin-groups {
      display: grid;
      gap: 14px;
      margin-top: 14px;
    }

    .exam-admin-group-title {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .exam-admin-list {
      display: grid;
      gap: 8px;
    }

    .exam-admin-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .exam-admin-main {
      min-width: 0;
    }

    .exam-admin-row.is-done {
      background: color-mix(in srgb, var(--ok) 5%, var(--surface));
      border-color: color-mix(in srgb, var(--ok) 25%, var(--border));
    }

    .exam-admin-row strong {
      font-size: 14px;
      display: block;
      margin-bottom: 4px;
    }

    .exam-admin-row .meta {
      font-size: 12px;
      color: var(--muted);
      display: block;
      line-height: 1.45;
    }

    .exam-admin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: flex-end;
      align-self: start;
    }

    .exam-admin-actions .btn {
      font-size: 12px;
      padding: 6px 10px;
    }

    .exam-complete-hint {
      margin: 0 0 4px;
      font-size: 13px;
      color: var(--text);
      font-weight: 600;
    }

    .exam-empty-hint {
      font-size: 13px;
      color: var(--muted);
      margin: 0;
    }

    .exam-complete-block {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    }

    .patient-notifications-panel {
      border: 2px solid color-mix(in srgb, var(--warn) 55%, #e8a317);
      background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 14%, #fff) 0%, #fff 100%);
      box-shadow: 0 10px 28px color-mix(in srgb, var(--warn) 18%, transparent);
    }

    .patient-notifications-title {
      margin: 0 0 12px;
      font-size: 20px;
      letter-spacing: -0.02em;
      color: #8a5a00;
    }

    .patient-notifications {
      display: grid;
      gap: 12px;
    }

    .patient-notification {
      padding: 16px 18px;
      border-radius: var(--radius);
      border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
      background: #fff;
    }

    .patient-notification.is-result {
      border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
      background: color-mix(in srgb, var(--ok) 6%, #fff);
    }

    .patient-notification.is-planned {
      border-color: color-mix(in srgb, var(--info) 45%, var(--border));
      background: color-mix(in srgb, var(--info) 6%, #fff);
    }

    .patient-notification-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #8a5a00;
      display: block;
      margin-bottom: 8px;
    }

    .patient-notification.is-result .patient-notification-label {
      color: #2d6a3e;
    }

    .patient-notification.is-planned .patient-notification-label {
      color: var(--primary-dark);
    }

    .patient-notification p {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.5;
      color: var(--text);
    }

    .patient-notification .meta {
      font-size: 12px;
      color: var(--muted);
      margin-top: 8px;
      display: block;
    }

    .patient-collapsible-details,
    .patient-edu-details {
      border: none;
    }

    .patient-collapsible-details summary,
    .patient-edu-details summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 12px;
      padding: 4px 0;
    }

    .patient-collapsible-details summary::-webkit-details-marker,
    .patient-edu-details summary::-webkit-details-marker {
      display: none;
    }

    .patient-collapsible-details summary::before,
    .patient-edu-details summary::before {
      content: "▸";
      font-size: 14px;
      color: var(--primary);
      transition: transform 0.15s ease;
    }

    .patient-collapsible-details[open] summary::before,
    .patient-edu-details[open] summary::before {
      transform: rotate(90deg);
    }

    .patient-collapsible-details summary h2,
    .patient-edu-details summary h2 {
      margin: 0;
      font-size: 18px;
    }

    .patient-collapsible-details summary .section-sub,
    .patient-edu-details summary .section-sub {
      margin: 0;
      font-size: 13px;
    }

    .edu-video-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .edu-video-grid-compact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .edu-video-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel);
    }

    .edu-video-thumb {
      aspect-ratio: 16 / 9;
      background: linear-gradient(145deg, #dce8f4 0%, #eef4fa 55%, #e8eef4 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .edu-video-play {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--primary) 92%, #000);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: 0 8px 20px rgba(18, 99, 163, 0.25);
    }

    .edu-video-body {
      padding: 14px 16px 16px;
    }

    .edu-video-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .edu-video-body h4 {
      margin: 0 0 4px;
      font-size: 15px;
      line-height: 1.35;
    }

    .edu-video-author {
      font-size: 12px;
      color: var(--primary-dark);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .edu-video-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
      margin: 0;
    }

    .edu-video-attachments {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .edu-video-attachments .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .edu-video-grid-compact .edu-video-card {
      display: grid;
      grid-template-columns: 88px 1fr;
      align-items: stretch;
    }

    .edu-video-grid-compact .edu-video-thumb {
      aspect-ratio: auto;
      min-height: 72px;
      height: 100%;
    }

    .edu-video-grid-compact .edu-video-play {
      width: 32px;
      height: 32px;
      font-size: 12px;
      box-shadow: 0 4px 12px rgba(18, 99, 163, 0.2);
    }

    .edu-video-grid-compact .edu-video-body {
      padding: 8px 10px;
    }

    .edu-video-grid-compact .edu-video-meta {
      font-size: 10px;
      margin-bottom: 2px;
    }

    .edu-video-grid-compact .edu-video-body h4 {
      font-size: 13px;
      margin: 0 0 2px;
      line-height: 1.3;
    }

    .edu-video-grid-compact .edu-video-author {
      font-size: 11px;
      margin: 0;
    }

    .edu-video-grid-compact .edu-video-desc {
      display: none;
    }

    .patient-portal-section {
      margin-bottom: 8px;
    }

    .patient-portal-section h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: -0.02em;
    }

    .section-sub {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .visit-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .visit-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: start;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel-soft);
    }

    .visit-item h4 {
      margin: 0 0 4px;
      font-size: 14px;
    }

    .visit-item p {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    .visit-item-side {
      text-align: right;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    .visit-plan-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .visit-plan-head h3 {
      margin: 0;
    }

    .visit-item-planned {
      border-color: color-mix(in srgb, var(--info) 28%, var(--line));
      background: color-mix(in srgb, var(--info) 6%, var(--panel-soft));
    }

    .visit-item-when strong {
      display: block;
      font-size: 14px;
      color: var(--text);
      margin-bottom: 4px;
    }

    .visit-item-when span {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--primary-dark);
    }

    .contact-phone-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .contact-phone-item {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel-soft);
    }

    .contact-phone-item strong {
      display: block;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .contact-phone-item a,
    .contact-phone-item span.phone {
      font-size: 15px;
      font-weight: 600;
      color: var(--primary-dark);
    }

    .contact-phone-item p {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    .patient-contacts-page .patient-portal-page-title,
    .patient-contacts-page .patient-portal-page-sub {
      margin: 0;
    }

    .patient-contacts-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 22px;
    }

    .patient-contacts-head-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: color-mix(in srgb, var(--primary) 12%, #eef6fc);
      color: var(--primary-dark);
    }

    .patient-contacts-head-icon-svg {
      width: 20px;
      height: 20px;
    }

    .contacts-emergency-card {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
      align-items: center;
      gap: 18px;
      padding: 18px 20px;
      margin-bottom: 18px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, #e25555 35%, #fff);
      background: color-mix(in srgb, #ffecec 65%, #fff);
    }

    .contacts-emergency-main {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .contacts-emergency-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: color-mix(in srgb, #ffb4b4 35%, #fff);
      color: #c62828;
    }

    .contacts-emergency-icon-svg {
      width: 24px;
      height: 24px;
    }

    .contacts-emergency-label {
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 700;
      color: #c62828;
    }

    .contacts-emergency-phone {
      font-size: 34px;
      line-height: 1;
      font-weight: 800;
      color: #c62828;
      text-decoration: none;
    }

    .contacts-emergency-phone:hover {
      text-decoration: underline;
    }

    .contacts-emergency-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    .contacts-emergency-note-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: color-mix(in srgb, #ffb4b4 28%, #fff);
      color: #c62828;
    }

    .contacts-emergency-note-icon-svg {
      width: 18px;
      height: 18px;
    }

    .contacts-emergency-note p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: #7a3030;
    }

    .contacts-emergency-note strong {
      display: block;
      color: #c62828;
      margin-bottom: 2px;
    }

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

    .contact-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      background: #fff;
      box-shadow: 0 1px 0 rgba(15, 35, 52, 0.03);
    }

    .contact-card-icon {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: color-mix(in srgb, var(--primary) 10%, #eef6fc);
      color: var(--primary-dark);
    }

    .contact-card-icon--hotline {
      background: color-mix(in srgb, #ffb4b4 22%, #fff);
      color: #c62828;
    }

    .contact-card-icon-svg {
      width: 22px;
      height: 22px;
    }

    .contact-card-body {
      min-width: 0;
    }

    .contact-card-body h3 {
      margin: 0 0 6px;
      font-size: 15px;
      line-height: 1.35;
      color: var(--text);
    }

    .contact-card-phone {
      display: inline-block;
      font-size: 16px;
      font-weight: 700;
      color: var(--primary-dark);
      text-decoration: none;
    }

    .contact-card-phone:hover {
      text-decoration: underline;
    }

    .contact-card-hours {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    .contact-card-hours--hotline {
      color: #c62828;
      font-weight: 600;
    }

    .contact-card-hours-icon {
      display: inline-flex;
      align-items: center;
    }

    .contact-card-hours-icon-svg {
      width: 14px;
      height: 14px;
    }

    .contact-call-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 16px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
    }

    .contact-call-btn-icon {
      width: 16px;
      height: 16px;
    }

    .contact-call-btn--urgent {
      background: #e53935;
      color: #fff;
      border: 1px solid #e53935;
    }

    .contact-call-btn--urgent:hover {
      background: #c62828;
      border-color: #c62828;
    }

    .contact-call-btn--ghost {
      background: #fff;
      color: var(--primary-dark);
      border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
    }

    .contact-call-btn--ghost:hover {
      background: color-mix(in srgb, var(--primary) 8%, #fff);
    }

    .contact-call-btn--compact {
      min-height: 38px;
      padding: 0 14px;
      font-size: 13px;
    }

    @media (max-width: 980px) {
      .contacts-emergency-card {
        grid-template-columns: 1fr;
      }

      .contacts-emergency-card .contact-call-btn--urgent {
        width: 100%;
      }

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

      .contact-card {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .contact-card .contact-call-btn {
        grid-column: 1 / -1;
        width: 100%;
      }
    }

    @media (max-width: 900px) {
      .edu-video-grid,
      .edu-video-grid-compact {
        grid-template-columns: 1fr;
      }

      .edu-video-grid-compact .edu-video-card {
        grid-template-columns: 72px 1fr;
      }
    }

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

    .item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: start;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .item h4 {
      margin: 0 0 5px;
      font-size: 15px;
    }

    .item p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .item-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      padding: 10px 13px;
      background: var(--primary);
      color: #fff;
      font-weight: 700;
      font-size: 13px;
    }

    .btn.secondary {
      background: #e8eef5;
      color: #20364c;
    }

    .btn.ghost {
      background: transparent;
      color: var(--primary);
      border: 1px solid #b9d7ed;
    }

    .btn.danger {
      background: var(--critical);
    }

    .btn.warn {
      background: #f59e0b;
      color: #fff;
    }

    .btn.warn:hover {
      background: #d97706;
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .btn-with-icon {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-with-icon .mono-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .tab {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
    }

    .tab.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

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

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

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

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

    .amb-referral-layout {
      width: 100%;
    }

    .file-upload-list--desc {
      display: grid;
      gap: 8px;
    }

    .file-attach-row {
      display: grid;
      grid-template-columns: auto 1fr minmax(140px, 1.2fr) auto;
      gap: 10px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
    }

    .file-attach-main {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .file-attach-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-attach-meta {
      font-size: 11px;
      color: var(--muted);
    }

    .file-attach-desc {
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-size: 13px;
    }

    .referral-chat-card .card-header {
      margin-bottom: 10px;
    }

    .referral-chat-feed {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 220px;
      overflow-y: auto;
      padding: 4px 10px 4px 0;
      margin-bottom: 10px;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(102, 117, 138, 0.4) transparent;
    }

    .referral-chat-feed::-webkit-scrollbar {
      width: 6px;
    }

    .referral-chat-feed::-webkit-scrollbar-track {
      background: transparent;
    }

    .referral-chat-feed::-webkit-scrollbar-thumb {
      background: rgba(102, 117, 138, 0.28);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    .referral-chat-feed:hover::-webkit-scrollbar-thumb {
      background: rgba(102, 117, 138, 0.45);
      background-clip: padding-box;
    }

    .referral-chat-feed::-webkit-scrollbar-thumb:hover {
      background: rgba(102, 117, 138, 0.6);
      background-clip: padding-box;
    }

    .referral-chat-empty {
      font-size: 13px;
      color: var(--muted);
      margin: 0;
    }

    .chat-read-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 4px 0 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .chat-read-divider::before,
    .chat-read-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    .chat-read-divider span {
      flex-shrink: 0;
      padding: 2px 8px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid var(--line);
    }

    .referral-chat-bubble {
      max-width: 92%;
      padding: 8px 11px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.45;
    }

    .referral-chat-bubble.in {
      align-self: flex-start;
      background: #f0f3f6;
      border: 1px solid var(--border);
    }

    .referral-chat-bubble.out {
      align-self: flex-end;
      background: #e8f2ff;
      border: 1px solid #c5daf5;
    }

    .referral-chat-bubble.own {
      background: var(--primary);
      border-color: var(--primary-dark);
    }

    .referral-chat-bubble.own p {
      color: #fff;
    }

    .referral-chat-bubble.own .referral-chat-bubble-meta {
      color: rgba(255, 255, 255, 0.82);
    }

    .referral-chat-bubble.own .referral-chat-bubble-meta strong {
      color: #fff;
    }

    .referral-chat-bubble-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .referral-chat-bubble-meta strong {
      color: var(--text);
      font-size: 11px;
    }

    .referral-chat-bubble p {
      margin: 0;
      color: var(--text);
    }

    .referral-chat-compose {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      border-top: 1px solid var(--border);
      padding-top: 10px;
      flex-shrink: 0;
    }

    .referral-chat-compose textarea {
      flex: 1;
      min-height: 72px;
      resize: vertical;
    }

    .referral-chat-dot {
      color: #e8a317;
      margin-left: 4px;
      font-size: 11px;
    }

    .referral-chat-inline {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .referral-chat-inline--compact summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
    }

    .referral-chat-inline--compact summary::-webkit-details-marker {
      display: none;
    }

    .referral-chat-inline-badge {
      font-size: 11px;
      font-weight: 700;
      color: #b7791f;
      background: #fef3c7;
      border-radius: 999px;
      padding: 2px 8px;
    }

    .referral-chat-inline-count {
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
    }

    .referral-chat-inline-hint,
    .referral-chat-inline-label {
      margin: 0 0 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .referral-chat-inline-body .referral-chat-feed {
      max-height: 220px;
    }

    .patient-row-name {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .patient-row-edit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      flex-shrink: 0;
    }

    .patient-row-edit-btn:hover,
    .patient-row-edit-btn:focus-visible {
      background: rgba(15, 37, 56, 0.06);
      color: var(--accent);
      outline: none;
    }

    .patient-row-edit-icon {
      width: 15px;
      height: 15px;
    }

    .patient-edit-modal-sub {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .patient-edit-modal-panel .field-grid {
      margin-bottom: 0;
    }

    .patient-edit-body .patient-edit-modal-sub {
      margin-top: 0;
    }

    .patient-comm-col,
    .patient-comm-cell {
      width: 72px;
      text-align: center;
      white-space: nowrap;
    }

    .patient-comm-cell {
      vertical-align: middle;
    }

    .patient-comm-indicator {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      vertical-align: middle;
    }

    .patient-comm-indicator--none {
      color: #94a3b8;
    }

    .patient-comm-indicator--active {
      color: #1d4ed8;
    }

    .patient-comm-indicator--unread {
      color: #1d4ed8;
    }

    .patient-comm-avatars {
      display: inline-flex;
      align-items: center;
    }

    .patient-comm-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid #fff;
      margin-left: -6px;
      background: #dbeafe;
      color: #2b6cb0;
      font-size: 10px;
      font-weight: 700;
      box-shadow: 0 0 0 1px rgba(43, 108, 176, 0.08);
    }

    .patient-comm-avatar:first-child {
      margin-left: 0;
    }

    .patient-comm-bubble {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .patient-comm-bubble--none {
      color: #94a3b8;
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
    }

    .patient-comm-bubble--active {
      color: #1d4ed8;
      background: #dbeafe;
      border: 1px solid #93c5fd;
      box-shadow: 0 1px 2px rgba(29, 78, 216, 0.12);
    }

    .patient-comm-bubble--unread {
      color: #fff;
      background: #2563eb;
      border: 1px solid #1d4ed8;
      box-shadow: 0 1px 3px rgba(29, 78, 216, 0.2);
    }

    .patient-comm-bubble-icon {
      width: 12px;
      height: 12px;
    }

    .patient-comm-unread-badge {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: #dc2626;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      box-shadow: 0 0 0 1px #fff;
    }

    .patient-comm-indicator--referral {
      color: #e8a317;
      font-size: 11px;
    }

    .internal-chat-card {
      overflow: hidden;
      padding: 0;
    }

    .internal-chat-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 22px 24px 16px;
      border-bottom: 1px solid var(--line);
    }

    .internal-chat-header-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(47, 111, 176, 0.1);
      color: var(--accent);
      flex-shrink: 0;
    }

    .internal-chat-header-icon .mono-icon {
      width: 20px;
      height: 20px;
    }

    .internal-chat-header h3 {
      margin: 0;
      font-size: 18px;
      color: #1a365d;
    }

    .internal-chat-header p {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .internal-chat-participants {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--line);
      background: #fafbfd;
    }

    .internal-chat-participants-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 500;
    }

    .internal-chat-participants-icon {
      width: 16px;
      height: 16px;
    }

    .internal-chat-participant-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .internal-chat-participant-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 12px 4px 4px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #e2e8f0;
      color: var(--text);
      font-size: 13px;
      box-shadow: 0 1px 2px rgba(15, 37, 56, 0.04);
    }

    .internal-chat-participant-pill img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
    }

    .internal-chat-online-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px #e2e8f0;
      flex-shrink: 0;
    }

    .internal-chat-feed {
      max-height: 480px;
      overflow: auto;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: #fff;
    }

    .internal-chat-message {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .internal-chat-message-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .internal-chat-message-content {
      flex: 1;
      min-width: 0;
    }

    .internal-chat-message-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 6px;
    }

    .internal-chat-message-author {
      font-size: 14px;
      font-weight: 700;
      color: #1a365d;
    }

    .internal-chat-message-role {
      font-size: 13px;
      color: var(--muted);
    }

    .internal-chat-message-time {
      margin-left: auto;
      font-size: 12px;
      color: #94a3b8;
      white-space: nowrap;
    }

    .internal-chat-message-bubble {
      display: inline-block;
      max-width: min(100%, 640px);
      padding: 12px 14px;
      border-radius: 14px;
      background: #f1f5f9;
      border: 1px solid #e8edf3;
    }

    .internal-chat-message.own {
      flex-direction: row-reverse;
    }

    .internal-chat-message.own .internal-chat-message-content {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .internal-chat-message.own .internal-chat-message-meta {
      flex-direction: row-reverse;
    }

    .internal-chat-message.own .internal-chat-message-time {
      margin-left: 0;
      margin-right: auto;
    }

    .internal-chat-message.own .internal-chat-message-bubble {
      background: var(--primary);
      border-color: var(--primary-dark);
    }

    .internal-chat-message.own .internal-chat-message-bubble p {
      color: #fff;
    }

    .internal-chat-message-bubble p {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      white-space: pre-wrap;
      color: var(--text);
    }

    .internal-chat-mention {
      color: #2563eb;
      font-weight: 700;
    }

    .internal-chat-message.own .internal-chat-mention {
      color: #dbeafe;
    }

    .internal-chat-message.system .internal-chat-message-author {
      color: #0d4774;
    }

    .internal-chat-message-avatar--bot {
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #0d4774 0%, #2ab8a8 100%);
      color: #fff;
      border: none;
    }

    .internal-chat-message-avatar--bot .mono-icon {
      width: 18px;
      height: 18px;
    }

    .internal-chat-message.system .internal-chat-message-bubble {
      max-width: min(100%, 680px);
      background: linear-gradient(180deg, #f0f9ff 0%, #ecfdf5 100%);
      border: 1px solid color-mix(in srgb, #2ab8a8 35%, var(--line));
      box-shadow: 0 4px 14px rgba(18, 99, 163, 0.08);
    }

    .internal-chat-message.system .internal-chat-message-bubble p {
      color: #1e3a5f;
    }

    .internal-chat-message.patient-note .internal-chat-message-author {
      color: #334155;
    }

    .internal-chat-message.patient-note .internal-chat-message-bubble {
      background: #fff;
      border: 1px solid #dbeafe;
      border-left: 3px solid #60a5fa;
    }

    .internal-chat-empty {
      margin: 0;
      padding: 12px 0;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
    }

    .internal-chat-composer {
      margin: 0 24px 24px;
      padding: 14px 16px 12px;
      border: 1px solid #dbe3ec;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(15, 37, 56, 0.04);
    }

    .internal-chat-composer textarea {
      width: 100%;
      min-height: 72px;
      resize: vertical;
      border: none;
      background: transparent;
      padding: 0;
      font-size: 14px;
      line-height: 1.5;
      box-shadow: none;
    }

    .internal-chat-composer textarea:focus {
      outline: none;
      box-shadow: none;
    }

    .internal-chat-composer-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eef2f6;
    }

    .internal-chat-send-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      border-radius: 10px;
      background: #1a4a7a;
      color: #fff;
      font-weight: 600;
    }

    .internal-chat-send-btn:hover {
      background: #153d66;
    }

    .internal-chat-send-icon {
      width: 16px;
      height: 16px;
    }

    .patient-list-page {
      overflow: hidden;
    }

    .patient-list-table {
      margin-top: 12px;
    }

    .patient-detail-page {
      display: grid;
      gap: 14px;
    }

    .patient-detail-back {
      justify-self: start;
    }

    .patient-detail-card-wrap .exam-plan-section {
      margin: 0;
    }

    .amb-referral-sub {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    .referral-sent-steps {
      list-style: none;
      margin: 10px 0 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .referral-sent-steps li {
      display: grid;
      gap: 2px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fafbfc;
      font-size: 13px;
      line-height: 1.45;
    }

    .referral-sent-steps li strong {
      color: var(--text);
      font-size: 13px;
    }

    .referral-sent-steps li span {
      color: var(--muted);
    }

    .field-span-all {
      grid-column: 1 / -1;
    }

    .amb-form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 4px;
    }

    .amb-form-panel {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .bmi-value {
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
    }

    .amb-form-panel .form-section-title {
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--primary-light);
      font-size: 14px;
      letter-spacing: 0.02em;
      color: var(--primary);
    }

    .amb-anthro-section {
      margin-top: 8px;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
    }

    .amb-anthro-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 800;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .amb-anthro-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      align-items: end;
    }

    .amb-form-grid .field input,
    .amb-form-grid .field select {
      border: none;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      padding: 12px 2px;
      height: 44px;
      box-shadow: none;
    }

    .amb-form-grid .field input:focus,
    .amb-form-grid .field select:focus {
      border-bottom-color: var(--primary);
      box-shadow: none;
      background: transparent;
    }

    .amb-form-grid .field textarea {
      border: none;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: color-mix(in srgb, var(--bg) 30%, #fff);
      padding: 12px;
      box-shadow: none;
    }

    .amb-form-grid .field textarea:focus {
      border-bottom-color: var(--primary);
      box-shadow: none;
      background: #fff;
    }

    .bmi-display-box {
      display: flex;
      align-items: center;
      height: 44px;
      padding: 0 2px;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      font-weight: 700;
      color: var(--primary);
    }

    .amb-treatment-field {
      margin-top: 16px;
    }

    .amb-treatment-field textarea {
      min-height: 160px;
      line-height: 1.5;
    }

    .amb-send-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
    }

    .amb-form-grid .field textarea.amb-cover-letter {
      min-height: 444px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 14px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
      line-height: 1.55;
    }

    .amb-form-grid .field textarea.amb-cover-letter:hover {
      border-color: var(--primary-light);
    }

    .amb-form-grid .field textarea.amb-cover-letter:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px var(--primary-light);
      background: #fff;
    }

    .amb-referral-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .amb-patient-form-card .card-header h3 {
      margin-bottom: 0;
    }

    .form-section {
      margin-top: 22px;
    }

    .form-section:first-of-type {
      margin-top: 0;
    }

    .form-section-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .field-readonly {
      background: #f4f6f8;
      color: var(--muted);
      cursor: default;
    }

    .amb-patient-form-card .item-actions {
      margin-top: 18px;
    }

    .amb-form-panel-wide {
      grid-column: 1 / -1;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 18px;
    }

    .field label {
      color: #475569;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 800;
      margin-left: 2px;
      margin-bottom: 0;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background: #fff;
      color: var(--text);
      font-size: 14px;
      transition: all 0.2s ease;
      outline: none;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select {
      height: 44px;
    }

    input:not([type="checkbox"]):not([type="radio"]):hover,
    select:hover,
    textarea:hover {
      border-color: var(--primary-light);
    }

    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px var(--primary-light);
      background: #fff;
    }

    textarea {
      resize: vertical;
      min-height: 100px;
      padding: 14px;
    }

    .notice {
      border: 1px solid #f1ce83;
      background: #fff8e8;
      color: #694800;
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.45;
    }

    .notice strong {
      display: block;
      margin-bottom: 3px;
    }

    .alert-card {
      border-left: 5px solid var(--info);
    }

    .alert-card[data-level="kritická"] {
      border-left-color: var(--critical);
    }

    .alert-card[data-level="varování"] {
      border-left-color: var(--warn);
    }

    .alert-card[data-level="informativní"] {
      border-left-color: var(--info);
    }

    .chart-wrap {
      background: #f8fbfd;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      overflow-x: auto;
    }

    .chart {
      width: 100%;
      min-width: 520px;
      height: 260px;
      display: block;
    }

    .chart-label {
      fill: #66758a;
      font-size: 12px;
    }

    .legend {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--primary);
    }

    .dot.warn {
      background: var(--warn);
    }

    .dot.critical {
      background: var(--critical);
    }

    .summary-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .summary-table th,
    .summary-table td {
      border-bottom: 1px solid var(--line);
      padding: 10px 7px;
      text-align: left;
      vertical-align: top;
    }

    .summary-table th {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .summary-table tbody tr.patient-row {
      cursor: pointer;
      transition: background 0.12s ease;
    }

    .summary-table tbody tr.patient-row:hover {
      background: #f7fafc;
    }

    .summary-table tbody tr.patient-row.selected {
      background: #e6f2fb;
    }

    .summary-table tbody tr.patient-row.selected td {
      border-bottom-color: #c5dff0;
    }

    .patient-list-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 12px;
      margin: 0 0 12px;
    }

    .patient-list-toolbar .patient-state-filters {
      margin: 0;
      flex: 1 1 auto;
    }

    .patient-state-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 0 0 12px;
    }

    .patient-state-filter {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      background: var(--surface);
      color: var(--muted);
      cursor: pointer;
      transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .patient-state-filter:hover {
      border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
      color: var(--text);
    }

    .patient-state-filter.active {
      background: color-mix(in srgb, var(--primary) 12%, var(--surface));
      border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
      color: var(--primary);
    }

    .table-sort-btn {
      border: none;
      background: transparent;
      padding: 0;
      font: inherit;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      cursor: pointer;
      font-weight: 700;
    }

    .table-sort-btn:hover,
    .table-sort-btn.active {
      color: var(--primary);
    }

    .patient-list-search {
      flex: 0 1 280px;
      min-width: 180px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 12px;
      background: #fff;
      color: var(--text);
      font-weight: 500;
    }

    .patient-list-search::placeholder {
      color: color-mix(in srgb, var(--muted) 80%, transparent);
    }

    .patient-list-search:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
    }

    .empty {
      border: 1px dashed var(--line);
      border-radius: 14px;
      padding: 18px;
      color: var(--muted);
      text-align: center;
      background: #fff;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(13, 37, 56, 0.45);
      z-index: 10;
    }

    .modal-backdrop.open {
      display: flex !important;
      justify-content: center;
      align-items: center;
      overscroll-behavior: contain;
    }

    html.modal-scroll-locked,
    body.modal-scroll-locked {
      overflow: hidden !important;
    }

    .modal {
      max-width: 520px;
      width: 100%;
      background: #fff;
      border-radius: 20px;
      padding: 22px;
      box-shadow: var(--shadow);
    }

    #coordinatorExamModal.open,
    #coordinatorFlowStateModal.open,
    #flowDocumentEditModal.open,
    #adminUserModal.open,
    #adminMaterialModal.open,
    #adminHandbookModal.open,
    #patientEditModal.open,
    #organOfferModal.open,
    #dailyRecordsAiModal.open {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: stretch !important;
      padding: 0 !important;
    }

    #organOfferModal .modal,
    #patientEditModal .modal,
    #adminUserModal .modal,
    #adminMaterialModal .modal,
    #adminHandbookModal .modal,
    #dailyRecordsAiModal .ai-insights-panel {
      width: min(800px, 100%) !important;
      max-width: min(800px, 100%) !important;
      height: 100vh !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 22px 0 0 22px !important;
      margin: 0 !important;
    }

    /* Injected body containers must also be flex to handle header/body/footer */
    #organOfferModalBody,
    #patientEditModalBody,
    #adminUserModalBody,
    #adminMaterialModalBody,
    #adminHandbookModalBody,
    #dailyRecordsAiContent {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
    }

    #adminUserModalBody > #adminUserForm,
    #adminMaterialModalBody > #adminMaterialForm,
    #adminMaterialModalBody > #adminFaqForm,
    #adminHandbookModalBody > #adminHandbookForm {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    /* Modal header/body/footer for drawers */
    .patient-edit-header {
      padding: 24px 32px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      flex-shrink: 0;
    }

    .patient-edit-header h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .patient-edit-close {
      background: none;
      border: none;
      font-size: 24px;
      color: var(--muted);
      cursor: pointer;
      line-height: 1;
      padding: 4px;
    }

    .patient-edit-body {
      padding: 24px 32px;
      flex: 1 !important;
      overflow-y: hidden;
      min-height: 0 !important;
      display: block !important;
      overscroll-behavior: contain;
    }

    .patient-edit-body.is-scrollable {
      overflow-y: auto;
    }

    .patient-edit-footer {
      padding: 16px 32px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      background: #f8fafc;
      flex-shrink: 0;
    }

    .form-section-title {
      margin: 0 0 16px;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 2px solid #edf2f7;
      padding-bottom: 6px;
    }

    .serology-edit-grid label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      font-size: 13px;
    }

    /* Interní poznámky */
    .internal-notes-card {
      background: #fff;
      border: 1px solid var(--line);
      margin-bottom: 24px;
    }

    .internal-notes-header {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f1f5f9;
    }

    .internal-notes-header h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .internal-notes-header p {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }

    .internal-notes-header-icon {
      color: var(--primary);
    }

    .internal-notes-list {
      padding: 12px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 300px;
      overflow-y: auto;
    }

    .internal-note-item {
      padding-bottom: 12px;
      border-bottom: 1px solid #f8fafc;
    }

    .internal-note-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .internal-note-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      font-size: 11px;
    }

    .internal-note-author {
      font-weight: 700;
      color: var(--text);
    }

    .internal-note-time {
      color: var(--muted);
    }

    .internal-note-body {
      font-size: 13px;
      line-height: 1.4;
      color: var(--text);
    }

    .internal-notes-composer {
      padding: 12px 20px;
      background: #f8fafc;
      border-top: 1px solid #f1f5f9;
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .internal-notes-composer input {
      flex: 1;
      height: 36px;
      padding: 0 12px;
      font-size: 13px;
      border-radius: 8px;
    }

    .empty-notes {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      padding: 12px 0;
    }

    .patient-detail-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .patient-detail-header-side {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .patient-detail-comm-indicator {
      display: inline-flex;
      align-items: center;
    }

    .patient-detail-card .card-header .exam-plan-add-btn {
      flex-shrink: 0;
    }

    .medication-referral-note {
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(15, 37, 56, 0.04);
      border: 1px solid rgba(15, 37, 56, 0.06);
    }

    .medication-referral-note strong {
      display: block;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .medication-referral-note p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .modal p {
      color: var(--muted);
      line-height: 1.45;
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      max-width: 380px;
      display: none;
      border-radius: 16px;
      padding: 14px 16px;
      background: #0d2538;
      color: #fff;
      box-shadow: var(--shadow);
      z-index: 20;
    }

    .toast.show {
      display: block;
    }

    .mobile-switch {
      display: none;
      margin-bottom: 16px;
    }

    @media (max-width: 1120px) {
      .grid.cols-2,
      .grid.cols-3,
      .metric-row {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      .main {
        padding: 14px 14px 20px;
      }

      .topbar {
        display: block;
        margin-bottom: 16px;
        padding-bottom: 14px;
      }

      .role-list {
        grid-template-columns: 1fr;
      }

      .field-grid,
      .field-grid-3,
      .field-grid-4,
      .field-grid-5 {
        grid-template-columns: 1fr;
      }

      .amb-form-grid,
      .amb-send-grid {
        grid-template-columns: 1fr;
      }

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

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

      .file-attach-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .monitoring-stats-grid {
        grid-template-columns: 1fr;
      }

      .monitoring-stat-box.vitals {
        grid-column: span 1;
      }

      .handbook-tile-grid {
        grid-template-columns: 1fr;
      }

      .card {
        padding: 16px;
      }

      .card-header {
        flex-direction: column;
        gap: 10px;
      }

      .card-header-side {
        width: 100%;
      }

      .medication-card-head {
        flex-wrap: wrap;
      }

      .phase-contribution-summary-hit {
        flex: 1 1 100%;
      }

      .phase-contribution-row {
        padding: 10px;
      }

      .phase-file-chip-name {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
      }

      .phase-file-chip {
        flex-wrap: wrap;
      }

      .amb-flow-step {
        gap: 10px;
        grid-template-columns: 32px minmax(0, 1fr);
      }

      .amb-flow-num {
        width: 32px;
        height: 32px;
        font-size: 14px;
      }

      .amb-flow-step::before {
        left: 15px;
        top: 32px;
      }

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

      .item-actions {
        justify-content: flex-start;
      }

      .toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
      }
    }

    @media (max-width: 480px) {
      .referring-network-metrics {
        grid-template-columns: 1fr;
      }

      .amb-anthro-grid {
        grid-template-columns: 1fr;
      }
    }

    .workspace-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 18px;
    }

    .workspace-tab {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .workspace-tab:hover {
      border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
      color: var(--text);
    }

    .workspace-tab.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .organ-offers-page {
      max-width: 920px;
    }

    .organ-offers-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .organ-offers-header h2 {
      margin: 0 0 6px;
      font-size: 28px;
      letter-spacing: -0.02em;
    }

    .organ-offers-header p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
      max-width: 640px;
    }

    .organ-offers-header .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      height: 44px;
      flex-shrink: 0;
    }

    .organ-offers-section {
      margin-bottom: 28px;
    }

    .organ-offers-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      font-size: 15px;
      font-weight: 700;
    }

    .organ-offers-section-icon {
      display: inline-flex;
      align-items: center;
      color: var(--muted);
    }

    .organ-offers-section-icon .mono-icon {
      width: 16px;
      height: 16px;
    }

    .organ-offers-list {
      display: grid;
      gap: 12px;
    }

    .organ-offer-card {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 16px 18px;
      cursor: pointer;
      transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }

    .organ-offer-card:hover {
      box-shadow: var(--shadow);
    }

    .organ-offer-card--new {
      border-color: #f0b07a;
    }

    .organ-offer-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .organ-offer-card-head strong {
      font-size: 16px;
    }

    .organ-offer-card-meta,
    .organ-offer-card-outcome {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }

    .organ-offer-card-outcome {
      margin-top: 4px;
      color: var(--text);
      font-weight: 500;
    }

    .organ-offer-card-side {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      flex-shrink: 0;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      min-width: 140px;
    }

    .organ-offer-card-side > div:first-child {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .organ-offers-empty {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .organ-offers-info {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      border: 1px solid #d8e3ef;
      background: #f4f8fc;
      border-radius: 14px;
      padding: 14px 16px;
      color: #4a6075;
      font-size: 13px;
      line-height: 1.45;
    }

    .organ-offers-info p {
      margin: 0;
    }

    .organ-offers-info-icon {
      flex-shrink: 0;
      font-size: 16px;
      line-height: 1.2;
    }

    .organ-offer-detail-header {
      margin-bottom: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .organ-offer-header-left {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .organ-offer-header-info h2 {
      margin: 0 0 4px;
      font-size: 24px;
      color: var(--text);
    }

    .organ-offer-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .organ-offer-detail-sub {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .organ-offer-back {
      border: none;
      background: transparent;
      padding: 0;
      color: var(--primary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .organ-offer-detail-grid {
      align-items: start;
    }

    .organ-offer-kv th {
      width: 42%;
      font-weight: 600;
      color: var(--muted);
      font-size: 12px;
    }

    .organ-offer-kv td {
      font-size: 13px;
    }

    .organ-offer-reports {
      margin-top: 14px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text);
    }

    .organ-offer-reports p {
      margin: 0 0 6px;
    }

    .organ-offer-serology {
      margin-top: 14px;
    }

    .organ-serology-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .organ-serology-tag {
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      background: #eef1f4;
      color: #5c6773;
    }

    .organ-serology-tag--pos {
      background: #fff0e0;
      color: #9a4f00;
    }

    .organ-candidate-card {
      width: 100%;
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background: var(--panel-soft);
      cursor: pointer;
      transition: all 0.2s ease;
      display: block;
    }

    .organ-candidate-card:hover {
      border-color: var(--primary-light);
      background: #fff;
    }

    .organ-candidate-card.is-selected {
      border-color: var(--primary);
      background: var(--primary-light);
      box-shadow: 0 0 0 2px var(--primary);
    }

    .organ-candidate-card + .organ-candidate-card {
      margin-top: 10px;
    }

    .organ-candidate-card p {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    .organ-candidate-meta {
      color: var(--text) !important;
    }

    .organ-compat-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 13px;
    }

    .organ-compat-ok {
      margin-bottom: 6px;
      color: #1f7a45;
      font-weight: 500;
    }

    .organ-compat-fail {
      margin-bottom: 6px;
      color: #dc2626;
      font-weight: 500;
    }

    .organ-compat-warn {
      margin: 4px 0 0;
      color: #b45309;
      font-weight: 500;
    }

    .organ-compat-placeholder {
      padding: 30px 20px;
      text-align: center;
      color: var(--muted);
      font-style: italic;
      font-size: 14px;
      background: var(--surface);
      border-radius: 8px;
      border: 1px dashed var(--line);
    }

    .organ-compat-card--empty {
      opacity: 0.7;
    }

    .organ-compat-overall {
      margin-top: 14px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #fff8e8;
      border: 1px solid #fef3c7;
      font-size: 13px;
    }

    .organ-compat-overall--ok {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
    }

    .organ-compat-overall--warn {
      background: #fffbeb;
      border-color: #fef3c7;
      color: #92400e;
    }

    .organ-compat-overall p {
      margin: 4px 0 0;
    }

    .organ-offer-accept {
      width: 100%;
      margin-bottom: 12px;
    }

    .organ-offer-reject {
      display: grid;
      gap: 8px;
    }

    .organ-offer-reject-input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
    }

    .btn.danger-text {
      border: none;
      background: transparent;
      color: var(--critical);
      padding: 0;
      font-weight: 600;
      text-align: left;
    }

    .organ-offer-disclaimer {
      margin: 16px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    .mobile-nav-backdrop,
    .mobile-nav-toggle {
      display: none;
    }

    .page-identity-aside {
      display: contents;
    }

    .topbar-mobile-row {
      display: contents;
    }

    @media (max-width: 900px) {
      .mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 5999;
        background: rgba(13, 37, 56, 0.52);
        backdrop-filter: blur(2px);
      }

      .app-shell.mobile-nav-open .mobile-nav-backdrop {
        display: block;
      }

      body.mobile-nav-open {
        overflow: hidden;
      }

      .topbar-mobile-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        min-width: 0;
      }

      .page-identity {
        display: contents;
      }

      .page-identity-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        grid-column: 1;
        grid-row: 1;
      }

      .page-identity-body {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        min-width: 0;
      }

      .mobile-nav-toggle {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        color: var(--text);
        padding: 0;
        box-shadow: 0 4px 14px rgba(21, 39, 62, 0.08);
      }

      .mobile-nav-toggle:hover {
        border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
        color: var(--primary);
      }

      .mobile-nav-toggle-icon {
        width: 22px;
        height: 22px;
        display: block;
      }

      .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(288px, 86vw);
        min-height: 100dvh;
        z-index: 6000;
        transform: translateX(-105%);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
      }

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

      .app-shell.sidebar-collapsed .app-sidebar {
        width: min(288px, 86vw);
      }

      .app-shell.sidebar-collapsed .sidebar-nav-label,
      .app-shell.sidebar-collapsed .sidebar-brand-text,
      .app-shell.sidebar-collapsed .sidebar-nav-group-label,
      .app-shell.sidebar-collapsed .sidebar-logout-label {
        display: block;
        opacity: 1;
        width: auto;
        height: auto;
      }

      .app-shell.sidebar-collapsed .sidebar-nav-item {
        justify-content: flex-start;
        padding: 10px 12px;
      }

      .app-shell.sidebar-collapsed .sidebar-logout-btn {
        justify-content: flex-start;
        padding: 10px 12px;
      }

      .sidebar-bottom {
        display: none;
      }

      .sidebar-nav {
        max-height: none;
      }

      .main {
        padding: 16px 18px 22px;
        overflow-x: clip;
        overflow-y: visible;
      }

      .page-identity-photo {
        width: 56px;
        height: 56px;
        border-width: 2px;
      }

      .page-identity-aside .page-identity-photo {
        width: 64px;
        height: 64px;
      }

      .page-identity-detail {
        white-space: normal;
      }

      .page-identity-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      .page-identity-detail:not([hidden]) + .page-identity-detail:not([hidden])::before,
      .page-identity-detail:not([hidden]) + .page-identity-notes-wrap.is-visible::before {
        content: none;
      }

      .page-identity-notes-wrap.is-visible {
        display: flex;
        margin-top: 2px;
        align-self: flex-start;
      }

      .topbar h2 {
        font-size: clamp(17px, 4.5vw, 22px);
        line-height: 1.25;
      }

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr;
      }

      .field-grid-3,
      .field-grid-4,
      .field-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .amb-anthro-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .mood-selection {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .monitoring-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .monitoring-workspace {
        padding: 16px;
      }

      .patient-list-page {
        overflow: visible;
      }

      .referring-network-metrics {
        grid-template-columns: 1fr;
      }

      .monitoring-stats-grid {
        grid-template-columns: 1fr;
      }

      .monitoring-stat-box.vitals {
        grid-column: span 1;
      }

      .organ-offer-card {
        flex-direction: column;
      }

      .organ-offer-card-side {
        align-items: flex-start;
      }

      .referring-network-body {
        grid-template-columns: 1fr;
      }

      .organ-offers-header {
        flex-direction: column;
        gap: 12px;
      }

      .app-main-wrap,
      #content,
      .patient-detail-page,
      .amb-flow,
      .amb-flow-step,
      .phase-evidence-box,
      .phase-contributions,
      .exam-plan-card,
      .exam-plan-list {
        max-width: 100%;
        min-width: 0;
      }

      .card-header {
        flex-wrap: wrap;
      }

      .card-header-side {
        flex-shrink: 1;
        max-width: 100%;
      }

      .medication-card-head > div:first-child {
        min-width: 0;
        flex: 1;
      }

      .amb-flow-body p,
      .exam-plan-row-title,
      .exam-plan-row-meta,
      .exam-plan-row-note,
      .card-header p,
      .card-header h3,
      .phase-contribution-note {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .phase-evidence-summary {
        flex-wrap: wrap;
        row-gap: 8px;
      }

      .phase-evidence-summary-main {
        flex: 1 1 auto;
        min-width: 0;
      }

      .phase-evidence-summary-main span {
        overflow-wrap: anywhere;
      }

      .phase-evidence-download-all {
        white-space: normal;
        flex-shrink: 1;
        margin-left: auto;
      }

      .phase-contribution-row {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 8px;
      }

      .phase-contribution-summary-hit {
        flex: 1 1 calc(100% - 38px);
        min-width: 0;
      }

      .phase-contribution-summary-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }

      .phase-contribution-summary-text time {
        white-space: normal;
      }

      .contrib-vis-icon,
      .phase-contribution-download {
        margin-left: auto;
      }

      .phase-contribution-body {
        padding-left: 12px;
        padding-right: 12px;
      }

      .exam-plan-list .exam-plan-row {
        flex-wrap: wrap;
      }

      .exam-plan-list .exam-plan-row-actions {
        margin-left: auto;
      }

      .phase-file-chip {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }

    .referring-network-page {
      max-width: 1100px;
    }

    .referring-network-header h2 {
      margin: 0 0 6px;
      font-size: 28px;
      letter-spacing: -0.02em;
    }

    .referring-network-header p {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
      max-width: 720px;
    }

    .referring-network-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .referring-network-metric {
      padding: 16px 18px;
    }

    .referring-network-metric strong {
      display: block;
      font-size: 26px;
      line-height: 1.1;
      margin-bottom: 4px;
      color: var(--primary);
    }

    .referring-network-metric span {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .referring-network-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 18px;
      align-items: start;
    }

    .referring-map-card {
      padding: 0;
      overflow: hidden;
    }

    .referring-map-card .card-header {
      padding: 18px 20px 0;
    }

    .referring-map-hint {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    .referring-map-stage {
      position: relative;
      padding: 0 12px 12px;
    }

    .referring-google-map {
      width: 100%;
      height: 520px;
      border-radius: 12px;
      background: #eef3f8;
      overflow: hidden;
    }

    .referring-map-fallback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 520px;
      padding: 32px 24px;
      border-radius: 12px;
      background: linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
      border: 1px dashed var(--line);
      text-align: center;
      color: var(--muted);
    }

    .referring-map-fallback strong {
      color: var(--text);
      font-size: 16px;
    }

    .referring-map-fallback p {
      margin: 0;
      max-width: 420px;
      line-height: 1.5;
    }

    .referring-map-fallback-hint {
      font-size: 12px;
    }

    .referring-map-fallback code {
      font-size: 11px;
      background: rgba(255, 255, 255, 0.8);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .referring-advanced-marker {
      position: relative;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .referring-advanced-marker--center {
      width: 28px;
      height: 28px;
    }

    .referring-advanced-marker-ring {
      position: absolute;
      inset: 0;
      border: 2px solid #0d2538;
      border-radius: 50%;
      opacity: 0.25;
      pointer-events: none;
    }

    .referring-advanced-marker-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      margin: -6px 0 0 -6px;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(13, 37, 56, 0.25);
    }

    .referring-advanced-marker--center .referring-advanced-marker-dot {
      width: 18px;
      height: 18px;
      margin: -9px 0 0 -9px;
    }

    .referring-site-info-window {
      min-width: 220px;
      max-width: 280px;
      font-family: var(--font);
      color: var(--text);
    }

    .referring-site-info-window h4 {
      margin: 0 0 6px;
      font-size: 14px;
      line-height: 1.3;
    }

    .referring-map-legend {
      position: absolute;
      left: 24px;
      bottom: 24px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 11px;
      color: var(--muted);
      box-shadow: var(--shadow);
    }

    .referring-map-legend strong {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
      color: var(--text);
    }

    .referring-map-legend-items {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .referring-map-legend-items span {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .referring-legend-line {
      display: inline-block;
      width: 28px;
      height: 0;
      border-top: 2px solid #2b6cb0;
    }

    .referring-legend-line--mid {
      border-top-width: 3px;
    }

    .referring-legend-line--thick {
      border-top-width: 5px;
    }

    .referring-site-popup-meta {
      margin: 0 0 8px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }

    .referring-site-popup-volume {
      margin: 0 0 10px;
      font-size: 12px;
    }

    .referring-site-contacts {
      display: grid;
      gap: 10px;
    }

    .referring-site-contact {
      display: grid;
      gap: 2px;
      font-size: 12px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .referring-site-contact:first-child {
      border-top: none;
      padding-top: 0;
    }

    .referring-site-contact strong {
      font-size: 13px;
    }

    .referring-site-contact span {
      color: var(--muted);
    }

    .referring-site-contact a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
    }

    .referring-site-contact a:hover {
      text-decoration: underline;
    }

    .referring-ranking-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .referring-ranking-item {
      display: grid;
      grid-template-columns: 72px 1fr 28px;
      align-items: center;
      gap: 8px;
      width: 100%;
      border: none;
      background: transparent;
      padding: 8px 0;
      cursor: pointer;
      text-align: left;
      font: inherit;
    }

    .referring-ranking-item:hover .referring-ranking-label {
      color: var(--primary);
    }

    .referring-ranking-label {
      font-size: 13px;
      font-weight: 600;
    }

    .referring-ranking-bar-wrap {
      height: 8px;
      background: #eef2f6;
      border-radius: 999px;
      overflow: hidden;
    }

    .referring-ranking-bar {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #5a9fd4, #2b6cb0);
      border-radius: 999px;
    }

    .referring-ranking-count {
      font-size: 12px;
      font-weight: 700;
      color: var(--primary);
      text-align: right;
    }

    .patient-daily-record {
      border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
    }

    .daily-record-form {
      margin-top: 18px;
    }

    .daily-record-fieldset {
      border: none;
      margin: 0 0 20px;
      padding: 0;
    }

    .daily-record-fieldset legend {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
      padding: 0;
    }

    .daily-record-vitals {
      margin-top: 0;
    }

    .daily-record-check {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      line-height: 1.45;
      cursor: pointer;
      margin-top: 4px;
    }

    .daily-record-check input {
      width: 18px;
      height: 18px;
      margin: 0;
      cursor: pointer;
    }

    .daily-record-note-field textarea {
      min-height: 96px;
      line-height: 1.5;
    }

    .daily-record-note-hint {
      margin: 6px 0 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    .symptom-tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .symptom-tag {
      cursor: pointer;
    }

    .symptom-tag input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .symptom-tag span {
      display: inline-block;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      background: #fff;
      transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .symptom-tag input:checked + span {
      background: color-mix(in srgb, var(--warn) 14%, #fff);
      border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
      color: #7a4500;
    }

    .symptom-tag:hover span {
      border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
      color: var(--text);
    }

    .daily-record-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 8px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .daily-record-info {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      flex: 1 1 280px;
      max-width: 520px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }

    .daily-record-info p {
      margin: 0;
    }

    /* Mood selection in daily record form */
    .mood-selection {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-top: 8px;
    }

    .mood-option {
      cursor: pointer;
    }

    .mood-option input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .mood-option-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 8px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      transition: all 0.2s;
    }

    .mood-option input:checked + .mood-option-box {
      background: #fff;
      border-color: #475569;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
      transform: translateY(-2px);
    }

    .mood-emoji {
      font-size: 24px;
    }

    .mood-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .mood-option input:checked + .mood-option-box .mood-label {
      color: #1e293b;
    }

    .daily-record-info-icon,
    .organ-offers-info-icon {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      color: var(--muted);
    }

    .daily-record-info-icon .mono-icon,
    .organ-offers-info-icon .mono-icon {
      width: 16px;
      height: 16px;
    }

    .daily-records-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .daily-record-entry {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      overflow: hidden;
    }

    .daily-record-entry-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border: none;
      background: transparent;
      cursor: pointer;
      text-align: left;
      font: inherit;
      color: inherit;
    }

    .daily-record-entry-toggle:hover {
      background: color-mix(in srgb, var(--primary) 4%, #fff);
    }

    .daily-record-entry-chevron {
      width: 7px;
      height: 7px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(-45deg);
      transition: transform 0.18s ease;
      flex-shrink: 0;
    }

    .daily-record-entry-chevron.is-open {
      transform: rotate(45deg);
    }

    .daily-record-entry-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .daily-record-entry-date {
      font-size: 14px;
      line-height: 1.3;
      color: var(--text);
    }

    .daily-record-entry-preview {
      font-size: 12px;
      line-height: 1.35;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .daily-record-entry-body.is-collapsed {
      display: none;
    }

    .daily-record-fields {
      margin: 0;
      padding: 0 14px 12px 31px;
      display: grid;
      gap: 8px;
    }

    .daily-record-field {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
    }

    .daily-record-field-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      flex: 0 0 42%;
      max-width: 46%;
    }

    .daily-record-field-value {
      text-align: right;
      min-width: 0;
    }

    .daily-records-card .card-header-actions {
      flex-wrap: wrap;
    }

    @media (max-width: 900px) {
      .daily-records-card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .daily-records-card .card-header-actions {
        justify-content: flex-start;
      }

      .daily-record-entry-preview {
        white-space: normal;
      }

      .daily-record-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      .daily-record-field-label,
      .daily-record-field-value {
        flex: none;
        max-width: none;
        text-align: left;
      }

      .daily-records-card .list-pagination {
        justify-content: center;
        flex-wrap: wrap;
      }
    }

    .daily-record-symptom-cell {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    @media (max-width: 900px) {
      .daily-record-vitals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .daily-record-footer {
        flex-direction: column;
        align-items: stretch;
      }

      .daily-record-footer .btn {
        width: 100%;
      }

      .medication-edit-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .medication-edit-toolbar-actions {
        justify-content: flex-end;
      }
    }

    .medication-card {
      padding-top: 14px;
    }

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

    .medication-card-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
    }

    .medication-card-sub {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .medication-add-btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
      border-radius: 8px;
      background: color-mix(in srgb, var(--primary) 6%, #fff);
      color: var(--primary-dark);
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
    }

    .medication-add-btn:hover {
      background: color-mix(in srgb, var(--primary) 12%, #fff);
    }

    .medication-list {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
    }

    .medication-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 0;
    }

    .medication-row + .medication-row:not(.medication-row--editing) {
      border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }

    .medication-row--editing + .medication-row {
      border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }

    .medication-row-main {
      flex: 1;
      min-width: 0;
    }

    .medication-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
    }

    .medication-meta {
      margin-top: 2px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }

    .medication-row-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }

    .med-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
    }

    .med-icon-btn:hover {
      background: color-mix(in srgb, var(--primary) 8%, var(--surface));
      color: var(--text);
    }

    .med-icon-btn--primary {
      color: var(--primary-dark);
    }

    .med-icon-btn--primary:hover {
      background: color-mix(in srgb, var(--primary) 12%, #fff);
    }

    .med-icon-btn--success {
      color: var(--ok);
    }

    .med-icon-btn--success:hover {
      background: color-mix(in srgb, var(--ok) 12%, #fff);
      color: var(--ok);
    }

    .med-icon-btn--warn {
      color: var(--warn);
    }

    .med-icon-btn--warn:hover {
      background: color-mix(in srgb, var(--warn) 12%, #fff);
      color: var(--warn);
    }

    .med-action-icon {
      width: 15px;
      height: 15px;
    }

    .medication-row--editing {
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 10px;
      margin: 2px 0;
      border-radius: 10px;
      background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    }

    .medication-row--editing input {
      flex: 1 1 120px;
      min-width: 0;
      padding: 6px 0;
      border: none;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      font-size: 13px;
      transition: border-bottom-color 0.2s;
    }

    .medication-row--editing input:focus {
      outline: none;
      border-bottom-color: var(--primary);
    }

    .med-icon-btn--danger:hover {
      background: color-mix(in srgb, var(--critical) 10%, var(--surface));
      color: var(--critical);
    }

    .medication-empty {
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .medication-overview-card .card-header p {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .medication-overview-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 16px;
    }

    .medication-overview-icon {
      display: inline-flex;
      align-items: center;
      color: var(--muted);
    }

    .medication-overview-icon .mono-icon {
      width: 18px;
      height: 18px;
    }

    .medication-overview-table th {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      font-weight: 700;
    }

    .medication-overview-table td {
      font-size: 13px;
    }

    .medication-edit-table input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 13px;
      background: #fff;
    }

    .medication-edit-table th {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }

    .medication-edit-actions {
      width: 44px;
      text-align: right;
    }

    .medication-edit-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
    }

    .medication-edit-toolbar-actions {
      display: flex;
      gap: 8px;
    }

    .daily-records-ai-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, #7b61c7 35%, var(--line));
      background: linear-gradient(135deg, color-mix(in srgb, #7b61c7 10%, #fff) 0%, color-mix(in srgb, #4f8cff 8%, #fff) 100%);
      color: #5f47a8;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 4px 18px color-mix(in srgb, #7b61c7 16%, transparent);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .daily-records-ai-btn:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, #7b61c7 55%, var(--line));
      box-shadow: 0 8px 24px color-mix(in srgb, #7b61c7 24%, transparent);
    }

    .daily-records-ai-icon {
      width: 15px;
      height: 15px;
    }

    #dailyRecordsAiModal.open {
      opacity: 1;
      background: rgba(13, 37, 56, 0.45);
    }

    #dailyRecordsAiModal .ai-insights-panel {
      border: none;
      border-left: 1px solid color-mix(in srgb, #7b61c7 22%, var(--line));
      background: #fff;
      box-shadow: var(--shadow);
    }

    .ai-insights-drawer {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .ai-insights-drawer .ai-insights-hero,
    .ai-insights-drawer .patient-edit-footer {
      flex-shrink: 0;
    }

    .ai-insights-body {
      padding: 0;
    }

    .ai-insights-body .ai-insights-grid {
      padding: 18px 32px 8px;
    }

    .ai-insights-body .ai-insights-empty {
      padding: 32px;
    }

    .patient-edit-footer.ai-insights-footer {
      background: #f8fafc;
      font-size: 11px;
      color: var(--muted);
      justify-content: flex-start;
    }

    .ai-insights-hero {
      position: relative;
      overflow: hidden;
      padding: 24px 32px 20px;
      background: linear-gradient(135deg, #1b2a4a 0%, #2f4b8a 42%, #6b4bb8 100%);
      color: #fff;
    }

    .ai-insights-hero-glow {
      position: absolute;
      inset: -40% auto auto 50%;
      width: 280px;
      height: 280px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 68%);
      animation: aiGlowPulse 4s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes aiGlowPulse {
      0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
      50% { opacity: 0.9; transform: translateX(-50%) scale(1.08); }
    }

    .ai-insights-hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .ai-insights-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .ai-insights-badge-icon {
      width: 14px;
      height: 14px;
    }

    .ai-insights-close {
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    .ai-insights-hero h3 {
      position: relative;
      z-index: 1;
      margin: 16px 0 6px;
      font-size: 24px;
      letter-spacing: -0.03em;
    }

    .ai-insights-sub {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.82);
    }

    .ai-insights-grid {
      padding: 18px 22px 8px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .ai-reveal {
      opacity: 0;
      transform: translateY(12px);
      animation: aiReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      animation-delay: var(--ai-delay, 0ms);
    }

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

    .ai-insights-score {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 16px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 70%, #fff);
      border: 1px solid var(--line);
    }

    .ai-insights-score--stable {
      border-color: color-mix(in srgb, var(--ok) 24%, var(--line));
    }

    .ai-insights-score--watch {
      border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
      background: color-mix(in srgb, var(--warn) 6%, #fff);
    }

    .ai-insights-score--elevated {
      border-color: color-mix(in srgb, var(--critical) 28%, var(--line));
      background: color-mix(in srgb, var(--critical) 5%, #fff);
    }

    .ai-insights-score-ring {
      --ai-score: 50;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(from 210deg, #7b61c7 0%, #4f8cff calc(var(--ai-score) * 1%), #e8edf3 calc(var(--ai-score) * 1%), #e8edf3 100%);
      box-shadow: 0 8px 24px color-mix(in srgb, #7b61c7 18%, transparent);
    }

    .ai-insights-score-ring strong {
      font-size: 32px;
      line-height: 1;
      color: #24324a;
      margin-top: 4px;
    }

    .ai-insights-score-ring span {
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 2px;
    }

    .ai-insights-score-label {
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .ai-insights-score-copy {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--muted);
    }

    .ai-insights-chart {
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fafcff 0%, #fff 100%);
    }

    .ai-insights-chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .ai-insights-delta {
      font-size: 12px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .ai-insights-delta--down {
      background: color-mix(in srgb, var(--critical) 12%, #fff);
      color: var(--critical);
    }

    .ai-insights-delta--up {
      background: color-mix(in srgb, var(--ok) 12%, #fff);
      color: var(--ok);
    }

    .ai-sparkline {
      width: 100%;
      height: 64px;
      display: block;
    }

    .ai-insights-list h4,
    .ai-insights-actions h4 {
      margin: 0 0 10px;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .ai-insight-cards {
      display: grid;
      gap: 10px;
    }

    .ai-insight-card {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .ai-insight-card strong {
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
    }

    .ai-insight-card p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }

    .ai-insight-card--ok {
      border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
    }

    .ai-insight-card--info {
      border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
    }

    .ai-insight-card--warn {
      border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
      background: color-mix(in srgb, var(--warn) 5%, #fff);
    }

    .ai-action-list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 8px;
    }

    .ai-action-list li {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }

    .ai-insights-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 22px 20px;
      font-size: 11px;
      color: var(--muted);
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }

    .ai-insights-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #7b61c7;
      box-shadow: 0 0 0 0 rgba(123, 97, 199, 0.5);
      animation: aiPulseDot 1.8s ease infinite;
      flex-shrink: 0;
    }

    @keyframes aiPulseDot {
      0% { box-shadow: 0 0 0 0 rgba(123, 97, 199, 0.45); }
      70% { box-shadow: 0 0 0 8px rgba(123, 97, 199, 0); }
      100% { box-shadow: 0 0 0 0 rgba(123, 97, 199, 0); }
    }

    .ai-insights-empty {
      padding: 48px 28px;
      text-align: center;
    }

    .ai-insights-empty-icon {
      display: inline-flex;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: color-mix(in srgb, #7b61c7 12%, #fff);
      color: #7b61c7;
      margin-bottom: 14px;
    }

    .ai-insights-empty h3 {
      margin: 0 0 8px;
    }

    .ai-insights-empty p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .protocol-workspace {
      gap: 16px;
    }

    .protocol-header-card {
      padding: 22px 24px;
    }

    .protocol-header-main {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .protocol-header-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: color-mix(in srgb, var(--primary) 12%, #eef6fc);
      color: var(--primary-dark);
    }

    .protocol-header-copy {
      min-width: 0;
      flex: 1;
    }

    .protocol-header-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .protocol-header-title-row h2 {
      margin: 0;
      font-size: 28px;
      line-height: 1.15;
      color: var(--primary-dark);
    }

    .protocol-header-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .protocol-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 4px 10px;
    }

    .protocol-badge--neutral {
      background: color-mix(in srgb, var(--line) 35%, #fff);
      color: var(--muted);
    }

    .protocol-badge--info {
      background: color-mix(in srgb, var(--primary) 12%, #fff);
      color: var(--primary-dark);
    }

    .protocol-badge--ok {
      background: color-mix(in srgb, var(--ok) 12%, #fff);
      color: #2e7d32;
    }

    .protocol-badge-icon {
      display: inline-flex;
      align-items: center;
    }

    .protocol-badge-icon-svg,
    .protocol-check-icon {
      width: 14px;
      height: 14px;
    }

    .protocol-header-sub,
    .protocol-header-intro {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
    }

    .protocol-header-intro {
      margin-top: 10px;
    }

    .protocol-guide-card {
      padding: 8px 0 12px;
    }

    .protocol-guide-block + .protocol-guide-block {
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      margin-top: 8px;
      padding-top: 18px;
    }

    .protocol-guide-block-title {
      margin: 0 0 12px;
      padding: 0 22px;
      font-size: 18px;
      line-height: 1.35;
      color: var(--text);
    }

    .protocol-guide-section {
      padding: 0 22px 16px;
    }

    .protocol-guide-section h4 {
      margin: 0 0 8px;
      font-size: 15px;
      line-height: 1.35;
    }

    .protocol-guide-section p {
      margin: 0 0 10px;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text);
    }

    .protocol-guide-section p:last-child {
      margin-bottom: 0;
    }

    .protocol-bullet-list {
      margin: 0;
      padding-left: 20px;
      color: var(--text);
    }

    .protocol-bullet-list li {
      margin: 0 0 8px;
      font-size: 14px;
      line-height: 1.55;
    }

    .protocol-bullet-list li:last-child {
      margin-bottom: 0;
    }

    .protocol-checklist-card {
      padding: 0;
      overflow: hidden;
    }

    .protocol-checklist-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 22px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: color-mix(in srgb, var(--line) 18%, #fff);
    }

    .protocol-checklist-head h3 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .protocol-checklist-meta,
    .protocol-checklist-stats {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }

    .protocol-checklist-stats {
      white-space: nowrap;
      text-align: right;
    }

    .protocol-check-group + .protocol-check-group {
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }

    .protocol-check-group-title {
      margin: 0;
      padding: 14px 22px 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .protocol-check-list {
      display: flex;
      flex-direction: column;
    }

    .protocol-check-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 14px 22px;
      border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }

    .protocol-check-box {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      background: color-mix(in srgb, var(--line) 20%, #fff);
      display: grid;
      place-items: center;
      color: var(--muted);
    }

    .protocol-check-body {
      min-width: 0;
    }

    .protocol-check-body strong {
      display: block;
      font-size: 14px;
      line-height: 1.35;
      margin-bottom: 3px;
    }

    .protocol-check-meta {
      display: block;
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
    }

    .protocol-check-pill {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      white-space: nowrap;
    }

    .protocol-check-pill--required {
      background: color-mix(in srgb, var(--primary) 12%, #fff);
      color: var(--primary-dark);
    }

    .protocol-check-pill--optional {
      background: color-mix(in srgb, var(--line) 30%, #fff);
      color: var(--muted);
    }

    @media (max-width: 900px) {
      .protocol-header-title-row h2 {
        font-size: 22px;
      }

      .protocol-checklist-head {
        flex-direction: column;
      }

      .protocol-checklist-stats {
        text-align: left;
      }

      .protocol-check-item {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .protocol-check-pill {
        grid-column: 2;
        justify-self: start;
      }
    }

    .handbook-index-wrap {
      gap: 16px;
    }

    .handbook-index-card {
      padding: 22px 24px;
    }

    .handbook-index-title {
      margin: 0 0 8px;
      font-size: 28px;
      line-height: 1.15;
      color: var(--primary-dark);
    }

    .handbook-index-sub {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--muted);
      max-width: 760px;
    }

    .handbook-tile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 14px;
    }

    .handbook-tile {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      width: 100%;
      padding: 18px 18px 16px;
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      border-radius: 16px;
      background: #fff;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
      box-shadow: 0 1px 0 rgba(15, 35, 52, 0.03);
    }

    .handbook-tile:hover {
      border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
      box-shadow: 0 10px 24px rgba(21, 39, 62, 0.08);
      transform: translateY(-1px);
    }

    .handbook-tile-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--primary) 10%, #eef6fc);
      color: var(--primary-dark);
    }

    .handbook-tile-icon .mono-icon {
      width: 22px;
      height: 22px;
    }

    .handbook-tile-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .handbook-tile-body strong {
      font-size: 16px;
      line-height: 1.35;
      color: var(--text);
    }

    .handbook-tile-body span {
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .handbook-tile-badge {
      grid-column: 1 / -1;
      justify-self: start;
      margin-top: 2px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: color-mix(in srgb, var(--ok) 12%, #fff);
      color: #2e7d32;
    }

    .handbook-detail-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .handbook-detail-toolbar {
      display: flex;
      align-items: center;
    }

    .admin-workspace {
      display: grid;
      gap: 16px;
    }

    .admin-mode-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
      background: color-mix(in srgb, var(--primary) 8%, #fff);
    }

    .admin-mode-banner strong {
      display: block;
      margin-bottom: 4px;
      color: var(--primary-dark);
    }

    .admin-mode-banner span {
      display: block;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .admin-mode-banner-meta {
      margin-top: 4px;
      font-size: 12px !important;
    }

    .admin-section-sub {
      margin: 6px 0 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }

    .admin-section .card-header {
      align-items: flex-start;
    }

    .admin-table-wrap {
      overflow: auto;
    }

    .admin-table .admin-table-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .admin-table-primary-cell {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      line-height: 1.35;
    }

    .admin-table-primary-cell .admin-table-meta {
      display: block;
    }

    .admin-table tr.is-inactive {
      opacity: 0.72;
    }

    .admin-table th,
    .admin-table td {
      vertical-align: middle;
    }

    .admin-table td.admin-actions-cell {
      width: 1%;
      white-space: nowrap;
      text-align: right;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-right: 4px;
    }

    .admin-row-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      justify-content: flex-end;
      vertical-align: middle;
    }

    .admin-row-actions .med-icon-btn {
      vertical-align: middle;
    }

    .admin-section-header {
      align-items: flex-start;
    }

    .admin-toolbar-add-btn {
      flex-shrink: 0;
      margin-top: 2px;
    }

    .admin-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .admin-table-empty {
      color: var(--muted);
      text-align: center;
      padding: 18px 12px;
    }

    .field-span-all {
      grid-column: 1 / -1;
    }

    .admin-form-panel {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .admin-form-panel h4 {
      margin: 0 0 14px;
    }

    .admin-sidebar-modal-panel h3,
    .admin-user-modal-panel h3 {
      margin: 0 0 6px;
      font-size: 20px;
    }

    .admin-sidebar-modal-sub,
    .admin-user-modal-sub {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .admin-sidebar-readonly-meta,
    .admin-user-readonly-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 0 0 16px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(15, 37, 56, 0.04);
      border: 1px solid rgba(15, 37, 56, 0.06);
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .admin-sidebar-readonly-meta em,
    .admin-user-readonly-meta em {
      font-style: normal;
      color: var(--muted);
      opacity: 0.85;
    }

    .patient-edit-body .admin-sidebar-modal-sub {
      margin-top: 0;
    }

    .patient-edit-body .admin-sidebar-modal-sub + .admin-sidebar-modal-sub {
      margin-top: -10px;
    }

    .patient-edit-body .field-grid {
      margin-bottom: 0;
    }

    .patient-edit-body .exam-checkbox-row {
      margin-top: 12px;
    }

    .admin-sidebar-modal-panel .field-grid,
    .admin-user-modal-panel .field-grid {
      margin-bottom: 0;
    }

    .admin-code-grid {
      display: grid;
      gap: 14px;
    }

    .admin-materials-grid {
      display: grid;
      gap: 16px;
    }

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

    .admin-audit-row {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fafcfd;
    }

    .admin-audit-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .admin-audit-row strong {
      display: block;
      margin-bottom: 4px;
    }

    .admin-audit-row span {
      font-size: 13px;
      color: var(--text);
    }

    .admin-enter-card {
      margin-bottom: 16px;
      padding: 18px 20px;
    }

    .admin-enter-card .admin-section-sub {
      margin-bottom: 14px;
    }

    .admin-form-actions {
      margin-top: 24px;
    }

    .admin-material-desc-field {
      margin-top: 14px;
    }

    .admin-material-attachments-wrap {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .admin-material-active-wrap {
      margin-top: 16px;
      padding-bottom: 8px;
    }

    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .login-screen[hidden] {
      display: none;
    }

    .login-screen-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 55% at 15% 85%, rgba(18, 99, 163, 0.45), transparent 60%),
        radial-gradient(ellipse 60% 45% at 88% 12%, rgba(45, 212, 168, 0.28), transparent 55%),
        linear-gradient(155deg, #071726 0%, #0d3554 38%, #14708a 72%, #2dd4a8 100%);
    }

    .login-card {
      position: relative;
      width: min(420px, 100%);
      padding: 42px 36px 36px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 28px 70px rgba(4, 16, 28, 0.38);
      border: 1px solid rgba(255, 255, 255, 0.65);
    }

    .login-logo {
      display: block;
      width: min(220px, 72%);
      height: auto;
      margin: 0 auto 10px;
    }

    .login-tagline {
      margin: 0 0 28px;
      text-align: center;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.45;
    }

    .login-field {
      margin-bottom: 16px;
    }

    .login-field label {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .login-field input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--text);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .login-field input:focus {
      outline: none;
      border-color: #2ab8a8;
      box-shadow: 0 0 0 3px rgba(42, 184, 168, 0.18);
    }

    .login-submit {
      width: 100%;
      margin-top: 8px;
      padding: 13px 18px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #0d4774 0%, #1263a3 45%, #2ab8a8 100%);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.01em;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
      box-shadow: 0 10px 24px rgba(18, 99, 163, 0.28);
    }

    .login-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(18, 99, 163, 0.34);
    }

    .login-submit:active {
      transform: translateY(0);
    }

    .brand-logo,
    .sidebar-brand-logo {
      display: block;
      height: auto;
      object-fit: contain;
    }

    .brand-logo {
      width: 148px;
    }

    .sidebar-brand-logo {
      width: 140px;
      max-width: 100%;
    }

    .sidebar-brand {
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 22px 16px 18px;
      text-align: center;
    }

    .app-shell.sidebar-collapsed .sidebar-brand {
      align-items: center;
      padding-inline: 10px;
    }

    .app-shell.sidebar-collapsed .sidebar-brand-logo {
      width: 44px;
      object-fit: contain;
      object-position: center;
    }

    /* Referral Chat Sidebar */
    .referral-chat-trigger-wrap {
      margin: 16px 0 0;
      display: flex;
      justify-content: flex-start;
    }

    .referral-chat-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: #f0f7ff;
      border: 1px solid #d0e7ff;
      color: #0d4774;
      font-weight: 600;
      border-radius: 20px;
      transition: all 0.2s ease;
      font-size: 13px;
      cursor: pointer;
    }

    .referral-chat-trigger:hover {
      background: #e1efff;
      border-color: #b8d9ff;
      transform: translateY(-1px);
    }

    .referral-chat-trigger-icon {
      color: #1263a3;
      width: 18px;
      height: 18px;
    }

    .referral-chat-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 10px;
      height: 10px;
      background: #e53e3e;
      border: 2px solid #fff;
      border-radius: 50%;
    }

    .referral-chat-count {
      font-size: 12px;
      opacity: 0.7;
      margin-left: -2px;
    }

    .organ-offer-chat-btn-highlight {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      font-weight: 600;
      background: var(--primary);
      border: none;
      box-shadow: 0 4px 12px rgba(13, 71, 116, 0.25);
      transition: all 0.2s;
    }

    .organ-offer-chat-btn-highlight:hover {
      background: #0b3d63;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(13, 71, 116, 0.35);
    }

    .organ-offer-chat-badge {
      background: #fff;
      color: var(--primary);
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 10px;
      font-weight: bold;
      margin-left: 4px;
    }

    .organ-offer-card-chat-wrap {
      margin-top: auto;
      display: flex;
      justify-content: flex-end;
    }

    .organ-offer-card-chat-btn {
      background: var(--bg);
      border: 1.5px solid var(--line);
      color: var(--primary);
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .organ-offer-card-chat-btn:hover {
      border-color: var(--primary);
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(13, 71, 116, 0.15);
    }

    .organ-offer-card-chat-btn.has-messages {
      background: var(--primary-light);
      border-color: var(--primary);
    }

    .organ-offer-chat-count {
      position: absolute;
      top: -6px;
      right: -6px;
      background: var(--primary);
      color: white;
      font-size: 10px;
      font-weight: bold;
      min-width: 16px;
      height: 16px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      border: 2px solid white;
    }

    .mention-suggestions {
      position: fixed;
      z-index: 10000;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      max-height: 200px;
      overflow-y: auto;
      display: none;
    }

    .mention-suggestions.open {
      display: block;
    }

    .mention-suggestion-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .mention-suggestion-item:hover {
      background: var(--primary-light);
    }

    .mention-suggestion-item img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    .mention-suggestion-item div {
      display: flex;
      flex-direction: column;
    }

    .mention-suggestion-item strong {
      font-size: 13px;
      color: var(--text);
    }

    .mention-suggestion-item span {
      font-size: 11px;
      color: var(--muted);
    }

    .patient-faq-item {
      transition: all 0.2s;
      border: 1px solid transparent;
    }

    .patient-faq-item:hover {
      border-color: var(--primary-light);
      background: #fff;
      transform: translateX(4px);
    }

    .referral-chat-sidebar-overlay,
    .organ-offer-chat-sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      z-index: 2000;
      animation: fadeIn 0.2s ease;
    }

    .referral-chat-sidebar,
    .organ-offer-chat-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 420px;
      max-width: 90%;
      background: #fff;
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
      z-index: 2001;
      display: flex;
      flex-direction: column;
      animation: slideInRight 0.3s ease;
    }

    .referral-chat-sidebar-header,
    .organ-offer-chat-sidebar-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .referral-chat-sidebar-header h3,
    .organ-offer-chat-sidebar-header h3 {
      margin: 0;
      font-size: 18px;
      color: #0d4774;
    }

    .referral-chat-close,
    .organ-offer-chat-close {
      background: none;
      border: none;
      padding: 8px;
      cursor: pointer;
      color: var(--muted);
      border-radius: 50%;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .referral-chat-close:hover,
    .organ-offer-chat-close:hover {
      background: var(--bg);
      color: var(--text);
    }

    .referral-chat-sidebar-body,
    .organ-offer-chat-sidebar-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      background: #fff;
    }

    .organ-offer-chat-sidebar-body .internal-chat-feed {
      flex: 1;
      max-height: none;
      background: none;
      overflow-y: auto;
    }

    .organ-offer-chat-sidebar-body .internal-chat-composer {
      background: var(--bg);
      border-top: 1px solid var(--line);
    }

    .referral-chat-sidebar-hint,
    .organ-offer-chat-sidebar-hint {
      padding: 16px 24px;
      margin: 0;
      font-size: 13px;
      color: var(--muted);
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }

    .referral-chat-sidebar-body .referral-chat-feed,
    .organ-offer-chat-sidebar-body .organ-offer-chat-feed {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
    }

    .referral-chat-sidebar-body .referral-chat-compose,
    .organ-offer-chat-sidebar-body .organ-offer-chat-compose {
      padding: 20px 24px;
      background: #fff;
      border-top: 1px solid var(--line);
      flex-shrink: 0;
    }

    .organ-offer-chat-sidebar-body .internal-chat-composer {
      flex-shrink: 0;
    }

    @keyframes slideInRight {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Mood and Trends Sidebar Styles */
    .mood-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
    }

    .mood-pill[style*="--mood-color"] {
      background: color-mix(in srgb, var(--mood-color) 8%, #f8fafc);
      color: var(--mood-color);
      border-color: color-mix(in srgb, var(--mood-color) 20%, transparent);
    }

    .card-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .daily-records-trends-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border: 1.5px solid #e2e8f0;
      background: #fff;
      color: #475569;
      font-weight: 600;
      font-size: 13px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .daily-records-trends-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #1e293b;
      transform: translateY(-1px);
    }

    .sidebar-panel-wrap {
      position: fixed;
      inset: 0;
      z-index: 5000;
      visibility: hidden;
      transition: visibility 0.3s;
    }

    .sidebar-panel-wrap.open {
      visibility: visible;
    }

    .sidebar-panel-overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.4);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .sidebar-panel-wrap.open .sidebar-panel-overlay {
      opacity: 1;
    }

    .sidebar-panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 440px;
      max-width: 90%;
      background: #fff;
      box-shadow: -20px 0 50px rgba(0, 0, 0, 0.15);
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
    }

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

    .sidebar-panel-header {
      padding: 24px 28px;
      border-bottom: 1px solid #edf2f7;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fcfdfe;
    }

    .sidebar-panel-title-wrap h3 {
      margin: 0;
      font-size: 20px;
      color: #1a365d;
    }

    .sidebar-panel-title-wrap p {
      margin: 4px 0 0;
      font-size: 14px;
      color: var(--muted);
    }

    .sidebar-panel-close {
      width: 36px;
      height: 36px;
      border: none;
      background: #edf2f7;
      border-radius: 50%;
      font-size: 24px;
      color: #718096;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .sidebar-panel-close:hover {
      background: #e2e8f0;
      color: #2d3748;
    }

    .sidebar-panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .phase-evidence-sidebar {
      width: 480px;
    }

    .phase-evidence-sidebar-content {
      gap: 18px;
    }

    .phase-evidence-sidebar-content .field {
      margin: 0;
    }

    .sidebar-panel-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 16px 28px 24px;
      border-top: 1px solid #edf2f7;
      background: #fcfdfe;
    }

    .trend-chart-box {
      background: #fff;
      border: 1px solid #eef2f6;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .trend-chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .trend-chart-header strong {
      font-size: 15px;
      color: #4a5568;
    }

    .trend-chart-header span {
      font-size: 16px;
      font-weight: 700;
      color: #2d3748;
    }

    .trend-chart-svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .trend-chart-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 11px;
      color: #a0aec0;
      font-weight: 600;
    }

    .trend-info-box {
      margin-top: 8px;
      padding: 20px;
      background: #f8fbff;
      border-radius: 16px;
      border: 1px solid #e6f0ff;
    }

    .trend-info-box h4 {
      margin: 0 0 8px;
      font-size: 15px;
      color: #2b6cb0;
    }

    .trend-info-box p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.6;
      color: #4a5568;
    }

    /* Monitoring Kritické Péče */
    .monitoring-workspace {
      padding: 24px;
    }

    .monitoring-header {
      margin-bottom: 24px;
    }

    .monitoring-header h2 {
      font-size: 24px;
      font-weight: 800;
      color: var(--primary-dark);
      margin: 0 0 4px;
    }

    .monitoring-header p {
      color: var(--muted);
      margin: 0;
    }

    .monitoring-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
      gap: 20px;
    }

    .monitoring-card {
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      background: #fff;
    }

    .monitoring-card-header {
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid #f1f5f9;
    }

    .monitoring-card-title h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
    }

    .monitoring-location {
      font-size: 12px;
      color: var(--primary);
      font-weight: 600;
      display: block;
      margin-top: 2px;
    }

    .monitoring-card.urgent {
  border-left: 4px solid var(--error);
  background-color: #fff8f8;
}

.monitoring-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.monitoring-frailty-badge {
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.monitoring-status-pill {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .monitoring-status-pill.awake {
      background: #ecfdf5;
      color: #059669;
    }

    .monitoring-status-pill.sedated {
      background: #eff6ff;
      color: #2563eb;
    }

    .monitoring-card-body {
      padding: 20px;
      flex: 1;
    }

    .monitoring-meta-row {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      font-size: 13px;
    }

    .monitoring-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .monitoring-stat-box {
      background: #f8fafc;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid #f1f5f9;
    }

    .monitoring-stat-box.vitals {
      grid-column: span 2;
      background: #fff;
      border: 1px solid #e2e8f0;
    }

    .monitoring-stat-box label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }

    .monitoring-stat-value {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }

    .monitoring-stat-value.critical {
      color: var(--danger);
    }

    .monitoring-stat-detail {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }

    .monitoring-stat-trend-wrap {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    .monitoring-stat-trend.up {
      color: #059669;
      font-weight: 600;
    }

    .monitoring-stat-trend.stable {
      color: var(--muted);
    }

    .vitals-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .vital-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px;
    }

    .vital-label {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 2px;
    }

    .vital-value {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
    }

    .vital-value.alert {
      color: var(--danger);
    }

    .monitoring-card-footer {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #f1f5f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .monitoring-update {
      font-size: 11px;
      color: var(--muted);
    }

    /* Mobil: tabulky a široké layouty → karty pod sebe (desktop beze změny) */
    @media (max-width: 900px) {
      .admin-table-wrap {
        overflow: visible;
      }

      .summary-table:has(thead):not(.daily-records-table) {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
      }

      .summary-table:has(thead):not(.daily-records-table) thead {
        display: none;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr {
        display: block;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        background: #fff;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr.patient-row {
        cursor: pointer;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr.patient-row:hover {
        background: #f7fafc;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr.patient-row.selected {
        background: #e6f2fb;
        border-color: #c5dff0;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        border: none;
        padding: 7px 0;
        font-size: 13px;
        text-align: right;
        min-width: 0;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 46%;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        line-height: 1.35;
        text-align: left;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr td[colspan] {
        display: block;
        text-align: center;
        padding: 16px 8px;
      }

      .summary-table:has(thead):not(.daily-records-table) tbody tr td[colspan]::before {
        display: none;
      }

      .patient-list-table tbody tr td:first-child {
        display: block;
        padding-top: 0;
        padding-bottom: 10px;
        margin-bottom: 2px;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
        text-align: left;
      }

      .patient-list-table tbody tr td:first-child::before {
        display: none;
      }

      .admin-table tbody tr td.admin-actions-cell {
        width: auto;
        white-space: normal;
        text-align: left;
        padding-top: 4px;
      }

      .admin-table tbody tr td.admin-actions-cell::before {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 4px;
      }

      .admin-row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
      }

      .admin-table tbody tr td,
      .summary-table:has(thead):not(.daily-records-table) tbody tr td .admin-table-text-truncate {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .admin-table-primary-cell {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
        align-items: flex-end;
      }

      .admin-table-primary-cell .admin-table-meta {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .summary-table:not(:has(thead)) tr,
      .organ-offer-kv tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      }

      .summary-table:not(:has(thead)) tr:last-child,
      .organ-offer-kv tr:last-child {
        border-bottom: none;
      }

      .summary-table:not(:has(thead)) th,
      .organ-offer-kv th {
        display: block;
        width: auto;
        border: none;
        padding: 0 0 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
      }

      .summary-table:not(:has(thead)) td,
      .organ-offer-kv td {
        display: block;
        border: none;
        padding: 0 0 4px;
        font-size: 14px;
        text-align: left;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .organ-offer-detail-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }

      .organ-offer-header-left {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .organ-offer-header-actions {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
      }

      .organ-offer-header-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
      }

      .organ-offer-chat-btn-highlight {
        flex: 1 1 100%;
      }

      .monitoring-meta-row {
        flex-direction: column;
        gap: 6px;
      }

      .vitals-row {
        flex-direction: column;
        gap: 10px;
      }

      .vital-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        padding: 8px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
      }

      .vital-item:last-child {
        border-bottom: none;
      }

      .monitoring-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .referring-map-stage {
        display: flex;
        flex-direction: column;
      }

      .referring-google-map {
        height: min(360px, 55vh);
        min-height: 240px;
      }

      .referring-map-legend {
        position: static;
        margin: 10px 12px 12px;
        width: auto;
      }

      .referring-map-fallback {
        min-height: 280px;
      }

      .referring-ranking-item {
        flex-wrap: wrap;
        gap: 8px;
      }

      .referring-ranking-label {
        flex: 1 1 100%;
      }

      .referring-ranking-bar-wrap {
        flex: 1 1 auto;
        min-width: 0;
      }

      .timeline {
        grid-template-columns: 1fr;
        overflow-x: visible;
      }

      .timeline.branch {
        grid-template-columns: 1fr;
      }

      .chart-wrap {
        overflow-x: visible;
      }

      .chart {
        min-width: 0;
        height: 220px;
      }

      .patient-list-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .patient-list-toolbar .patient-state-filters {
        width: 100%;
        flex: 0 0 auto;
      }

      .patient-list-toolbar .patient-list-search {
        width: 100%;
        flex: 0 0 auto;
        height: 36px;
        min-height: 36px;
        padding: 0 14px;
        box-sizing: border-box;
      }

      .patient-comm-col,
      .patient-comm-cell {
        width: auto;
        white-space: normal;
        text-align: right;
      }

      .patient-list-table tbody tr td.patient-comm-cell {
        align-items: center;
      }

      .patient-list-table tbody tr td.patient-comm-cell .patient-comm-indicator {
        margin-left: auto;
        flex-shrink: 0;
      }
    }

    /*
     * Mobilní overflow – musí být na konci souboru.
     * Desktop styly definované níže v CSS jinak přepisují dřívější @media pravidla.
     */
    @media (max-width: 900px) {
      html {
        overflow-x: clip;
      }

      body {
        overflow-x: clip;
        max-width: 100%;
      }

      .app-shell,
      .app-main-wrap,
      .topbar,
      .main,
      #content,
      .card,
      .patient-detail-page,
      .patient-portal-section,
      .handbook-tile,
      .referring-network-metric,
      .workspace-tab-panel {
        min-width: 0;
        max-width: 100%;
      }

      /* Monitoring kritické péče */
      .monitoring-workspace {
        padding: 16px;
        min-width: 0;
        max-width: 100%;
      }

      .monitoring-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .monitoring-card {
        min-width: 0;
        max-width: 100%;
      }

      .monitoring-card-header {
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
      }

      .monitoring-card-title {
        min-width: 0;
        flex: 1 1 auto;
      }

      .monitoring-header-right {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
      }

      .monitoring-status-pill {
        white-space: normal;
        text-align: center;
      }

      .monitoring-card-body {
        min-width: 0;
        padding: 16px;
      }

      .monitoring-stats-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .monitoring-stat-box {
        min-width: 0;
      }

      .monitoring-stat-box.vitals {
        grid-column: span 1;
      }

      .monitoring-stat-value,
      .monitoring-stat-detail,
      .monitoring-stat-trend-wrap {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      /* Odkazující síť */
      .referring-network-metrics {
        grid-template-columns: minmax(0, 1fr);
      }

      .referring-network-body {
        grid-template-columns: minmax(0, 1fr);
      }

      /* Protokoly / handbook */
      .handbook-tile-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      /* Domácí záznam – nálada */
      .mood-selection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      /* Nabídky orgánů */
      .organ-offer-card-side {
        min-width: 0;
        white-space: normal;
        align-items: flex-start;
      }

      /* Grafy – scroll uvnitř bloku, ne celá stránka */
      .chart-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
      }

      .chart {
        min-width: 480px;
      }

      /* Admin tabulky – pokud zůstanou tabulkou, scroll uvnitř */
      .admin-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    @media (max-width: 480px) {
      .mood-selection {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /*
     * Mobil: safe-area pro popupy / drawery + chat compose
     */
    @media (max-width: 900px) {
      .modal-backdrop.open {
        padding:
          max(12px, env(safe-area-inset-top, 0px))
          max(12px, env(safe-area-inset-right, 0px))
          max(12px, env(safe-area-inset-bottom, 0px))
          max(12px, env(safe-area-inset-left, 0px));
      }

      #coordinatorExamModal.open,
      #coordinatorFlowStateModal.open,
      #flowDocumentEditModal.open,
      #adminUserModal.open,
      #adminMaterialModal.open,
      #adminHandbookModal.open,
      #patientEditModal.open,
      #organOfferModal.open,
      #dailyRecordsAiModal.open {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
      }

      #organOfferModal .modal,
      #patientEditModal .modal,
      #adminUserModal .modal,
      #adminMaterialModal .modal,
      #adminHandbookModal .modal,
      #dailyRecordsAiModal .ai-insights-panel {
        height: 100dvh !important;
        max-height: 100dvh !important;
      }

      .patient-edit-footer,
      .flow-state-form-actions,
      .exam-modal-actions,
      .demo-role-modal-actions,
      .personal-notes-modal-actions,
      .sidebar-panel-footer,
      .ai-insights-drawer .patient-edit-footer,
      .patient-edit-footer.ai-insights-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      }

      #demoRoleModal .demo-role-modal,
      .personal-notes-modal {
        max-height: min(
          calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px),
          640px
        );
      }

      .referral-chat-sidebar,
      .organ-offer-chat-sidebar {
        width: 100%;
        max-width: 100%;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

      .referral-chat-sidebar-body .referral-chat-compose,
      .organ-offer-chat-sidebar-body .internal-chat-composer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
      }

      .referral-chat-compose textarea,
      .organ-offer-chat-sidebar-body .internal-chat-composer textarea {
        min-height: 96px;
        width: 100%;
      }

      .referral-chat-compose .btn,
      .organ-offer-chat-sidebar-body .internal-chat-composer .btn {
        align-self: flex-end;
      }

      .internal-chat-composer {
        margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      }

      .modal-backdrop.open > .modal .item-actions {
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
    }