/* VETTA owner dashboard layout pass. Loaded after app.css on purpose. */

body.dash-body .ds {
  width: min(100% - 32px, 1340px);
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: 0;
}

/* UI96: clinic patients are scannable cards instead of a compressed table. */
#panel-cl-patients .clinic-patient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#panel-cl-patients .clinic-patient-card {
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#panel-cl-patients .clinic-patient-card:hover {
  border-color: rgba(26, 111, 245, .3);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

#panel-cl-patients .clinic-patient-card[hidden] {
  display: none !important;
}

#panel-cl-patients .clinic-patient-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

#panel-cl-patients .clinic-patient-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #fff;
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(26, 111, 245, .18);
  font-size: 21px;
}

#panel-cl-patients .clinic-patient-identity {
  min-width: 0;
}

#panel-cl-patients .clinic-patient-name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

#panel-cl-patients .clinic-patient-name-row h3 {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-cl-patients .clinic-patient-type {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
}

#panel-cl-patients .clinic-patient-identity p {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-cl-patients .clinic-patient-record-count {
  display: grid;
  min-width: 54px;
  min-height: 52px;
  padding: 6px 8px;
  place-content: center;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 12px;
  text-align: center;
}

#panel-cl-patients .clinic-patient-record-count strong {
  font-size: 18px;
  line-height: 1;
}

#panel-cl-patients .clinic-patient-record-count span {
  margin-top: 4px;
  color: var(--ink4);
  font-size: 8.5px;
  font-weight: 700;
}

#panel-cl-patients .clinic-patient-details {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 16px;
  padding: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
}

#panel-cl-patients .clinic-patient-owner-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--teal-d);
  background: rgba(13, 184, 203, .12);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 850;
}

#panel-cl-patients .clinic-patient-detail {
  min-width: 0;
}

#panel-cl-patients .clinic-patient-detail > span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink5);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
}

#panel-cl-patients .clinic-patient-detail strong,
#panel-cl-patients .clinic-patient-detail a {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-cl-patients .clinic-patient-detail a {
  color: var(--blue);
}

#panel-cl-patients .clinic-patient-detail a i {
  margin-right: 4px;
  font-size: 9px;
}

#panel-cl-patients .clinic-patient-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 14px 16px 16px;
}

#panel-cl-patients .clinic-patient-action {
  display: flex;
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

#panel-cl-patients .clinic-patient-action.primary {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

#panel-cl-patients .clinic-patient-action.reminder {
  color: var(--teal-d);
  background: rgba(13, 184, 203, .1);
  border-color: rgba(13, 184, 203, .16);
}

#panel-cl-patients .clinic-patient-action.history:hover,
#panel-cl-patients .clinic-patient-action.history:focus-visible {
  color: var(--blue);
  border-color: var(--blue-l);
}

@media (max-width: 900px) {
  #panel-cl-patients .clinic-patient-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  #panel-cl-patients .clinic-patient-card-head {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  #panel-cl-patients .clinic-patient-avatar {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  #panel-cl-patients .clinic-patient-details {
    grid-template-columns: 34px minmax(0, 1fr);
    margin: 0 14px;
    padding: 11px;
  }

  #panel-cl-patients .clinic-patient-owner-avatar {
    width: 34px;
    height: 34px;
  }

  #panel-cl-patients .clinic-patient-phone {
    grid-column: 2;
  }

  #panel-cl-patients .clinic-patient-actions {
    gap: 6px;
    padding: 12px 14px 14px;
  }

  #panel-cl-patients .clinic-patient-action {
    min-height: 42px;
    padding: 0 6px;
    flex-direction: column;
    gap: 3px;
    font-size: 9px;
  }
}

/* Clinic mobile: table hover must not become sticky cell boxes after a tap. */
@media (max-width: 760px) {
  body.clinic-panel #panel-cl-patients #pat-table,
  body.clinic-panel #panel-cl-patients #pat-table tbody,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr,
  body.clinic-panel #panel-cl-patients #pat-table tbody td {
    -webkit-tap-highlight-color: transparent !important;
  }

  body.clinic-panel #panel-cl-patients #pat-table tbody tr:hover,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:active,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:focus,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:focus-visible,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:focus-within {
    background: var(--card) !important;
    outline: 0 !important;
  }

  body.clinic-panel #panel-cl-patients #pat-table tbody tr:hover > td,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:active > td,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:focus > td,
  body.clinic-panel #panel-cl-patients #pat-table tbody tr:focus-within > td,
  body.clinic-panel #panel-cl-patients #pat-table tbody td:hover,
  body.clinic-panel #panel-cl-patients #pat-table tbody td:active,
  body.clinic-panel #panel-cl-patients #pat-table tbody td:focus,
  body.clinic-panel #panel-cl-patients #pat-table tbody td:focus-visible {
    background: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  body.clinic-panel #panel-cl-patients #pat-table .ds-btn-sm {
    -webkit-tap-highlight-color: transparent !important;
  }
}

body.dash-body .ow-hero-main,
body.dash-body .ow-hero-side,
body.dash-body .vet-dashboard-hero > * {
  position: relative;
  z-index: 1;
}

body.dash-body .ds-empty.ds-empty-visual {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
  min-height: 210px;
  padding: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  text-align: left;
}

body.dash-body .ds-empty.ds-empty-visual > img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

body.dash-body .ds-empty.ds-empty-visual > div {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}

body.dash-body .ds-empty.ds-empty-visual h3 {
  margin: 12px 0 5px;
  color: var(--ink);
  font-size: 18px;
}

body.dash-body .ds-empty.ds-empty-visual p {
  max-width: 480px;
  margin: 0;
  color: var(--ink4);
  line-height: 1.55;
}

@media (max-width: 760px) {
  body.dash-body .ds-empty.ds-empty-visual {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body.dash-body .ds-empty.ds-empty-visual > img {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  body.dash-body .ds-empty.ds-empty-visual > div { padding: 20px; }
}

/* Vet workspace: compact dashboard, patient tools, appointments and chat. */
body.dash-body .vet-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, .55fr);
  align-items: stretch;
  gap: 24px;
  margin: 16px 0;
  padding: 26px 28px;
  overflow: hidden;
  color: #fff;
  background: var(--grad);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(26,111,245,.16);
}

body.dash-body .vet-dashboard-hero h1 {
  margin: 7px 0 6px;
  color: #fff;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
}

body.dash-body .vet-dashboard-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  line-height: 1.55;
}

body.dash-body .vet-dashboard-hero .dash-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 11px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
}

body.dash-body .vet-dashboard-hero .dash-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

body.dash-body .vet-dashboard-hero .dash-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 700;
}

body.dash-body .vet-dashboard-hero .dash-hero-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 17px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
}

body.dash-body .vet-dashboard-hero .dash-hero-side > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

body.dash-body .vet-dashboard-hero .dash-hero-side strong {
  color: #fff;
  font-size: 32px;
  line-height: 1;
}

body.dash-body .vet-dashboard-hero .dash-hero-side small {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  line-height: 1.35;
}

body.dash-body .vet-dashboard-hero .dash-hero-actions {
  display: grid;
  gap: 8px;
}

body.dash-body .vet-dashboard-hero .dash-hero-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

body.dash-body .vet-dashboard-hero .dash-hero-btn.primary {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 8px 18px rgba(1,43,107,.14);
}

body.dash-body .vet-dashboard-hero .dash-hero-btn.secondary {
  color: #fff;
  background: rgba(2,43,93,.12);
}

body.dash-body .ds-stats-lux {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

body.dash-body .ds-stats-lux .ds-stat {
  min-height: 100px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}

body.dash-body .ds-stats-lux .ds-stat-n { font-size: 29px; line-height: 1; }
body.dash-body .ds-stats-lux .ds-stat-l { margin-top: 8px; font-size: 9.5px; letter-spacing: .4px; }

#panel-vet-patients .vet-patients-head {
  align-items: center;
  gap: 16px;
}

#panel-vet-patients .vet-search-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#panel-vet-patients .vet-search-count {
  color: var(--ink4);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

#panel-vet-patients .vet-search-box {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  align-items: center;
  width: min(360px, 42vw);
  min-height: 42px;
  padding: 0 5px;
  color: var(--ink4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
  transition: border-color .15s, box-shadow .15s;
}

#panel-vet-patients .vet-search-box:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,111,245,.1);
}

#panel-vet-patients .vet-search-box > span { display: grid; place-items: center; }

#panel-vet-patients .vet-search-inp {
  min-width: 0;
  height: 40px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 11.5px;
}

#panel-vet-patients .vet-search-inp::-webkit-search-cancel-button { display: none; }

#panel-vet-patients .vet-search-clear {
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ink4);
  background: var(--bg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

#panel-vet-patients .vet-search-clear.visible { display: grid; }

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

#panel-vet-patients .vet-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(15,23,42,.06);
}

#panel-vet-patients .vet-card[hidden] { display: none !important; }

#panel-vet-patients .vet-card-l {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#panel-vet-patients .vet-card-l > div:last-child { min-width: 0; }

#panel-vet-patients .vet-av {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
}

#panel-vet-patients .vet-pname {
  overflow: hidden;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-vet-patients .vet-pmeta,
#panel-vet-patients .vet-powner {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink4);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-vet-patients .vet-card-r {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

#panel-vet-patients .vet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

#panel-vet-patients .vet-btn > i {
  flex: 0 0 auto;
  font-size: 12px;
}

#panel-vet-patients .vet-btn-pri { color: #fff; background: var(--blue); }
#panel-vet-patients .vet-btn-teal { color: var(--teal); background: rgba(8,181,196,.09); }
#panel-vet-patients .vet-btn-ghost { color: var(--ink3); background: var(--bg); border-color: var(--border); }
#panel-vet-patients .vet-search-empty { margin-top: 12px; }

#panel-vet-appointments .vet-appointments-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: 14px;
}

.vet-slot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
}

.slot-modal-card {
  width: min(520px, 100%);
  padding: 22px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.24);
}

.slot-modal-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.slot-modal-time-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 12px;
}

.slot-modal-heading { min-width: 0; }
.slot-modal-heading > div { font-size: 23px; font-weight: 900; line-height: 1.1; }
.slot-modal-heading > span { display: block; margin-top: 3px; color: var(--ink4); font-size: 11px; }

.slot-popup-note {
  padding: 12px 14px;
  color: var(--ink3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 11.5px;
  line-height: 1.55;
}

.slot-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.slot-status-btn {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  min-height: 94px;
  padding: 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}

.slot-status-btn:hover { transform: translateY(-1px); }
.slot-status-btn strong { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; }
.slot-status-btn span { color: var(--ink4); font-size: 10px; line-height: 1.45; }
.slot-status-btn.free { background: #f3f8ff; border-color: #b9d4ff; }
.slot-status-btn.free strong { color: var(--blue); }
.slot-status-btn.busy { background: #fff9ef; border-color: #f5d49e; }
.slot-status-btn.busy strong { color: #c66b06; }
.slot-status-btn.booked { background: #fff2f2; border-color: #f5bbbb; }
.slot-status-btn.booked strong { color: var(--red); }
.slot-status-btn[data-action="noop"] { opacity: .62; cursor: default; }
.slot-modal-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

#panel-vet-chat .vet-chat-panel-head { align-items: flex-end; }
#panel-vet-chat .vet-chat-panel-head span { margin-left: auto; color: var(--ink4); font-size: 10.5px; }

#panel-vet-chat .vet-chat-wrap {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  height: min(600px, calc(100vh - 250px));
  min-height: 460px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

#panel-vet-chat .chat-sidebar {
  min-width: 0;
  background: var(--card);
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
}

#panel-vet-chat .chat-sidebar-hd {
  min-height: 56px;
  padding: 19px 16px;
  font-size: 12px;
  font-weight: 850;
}

#panel-vet-chat .vet-conv-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  font: inherit;
  cursor: pointer;
}

#panel-vet-chat .vet-conv-item.active { background: var(--blue-ll); }
#panel-vet-chat .vet-conv-item > i { color: var(--ink4); font-size: 9px; }

#panel-vet-chat .vet-conv-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--grad);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 850;
}

#panel-vet-chat .vet-conv-copy { min-width: 0; }
#panel-vet-chat .vet-conv-copy strong { display: flex; align-items: center; gap: 5px; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
#panel-vet-chat .vet-conv-copy strong em { padding: 2px 5px; color: #fff; background: var(--red); border-radius: 8px; font-size: 8px; font-style: normal; }
#panel-vet-chat .vet-conv-copy small { display: block; margin-top: 3px; overflow: hidden; color: var(--ink4); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

#panel-vet-chat .vet-chat-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
  border: 0;
  border-radius: 0;
}

#panel-vet-chat .vet-chat-main-hd {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

#panel-vet-chat .vet-chat-main-hd > div { min-width: 0; }
#panel-vet-chat .vet-chat-main-hd strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#panel-vet-chat .vet-chat-main-hd span { display: block; margin-top: 2px; color: var(--ink4); font-size: 9.5px; font-weight: 500; }
#panel-vet-chat .vet-chat-back { display: none; }

#panel-vet-chat .chat-msgs {
  min-height: 0;
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#panel-vet-chat .chat-input-wrap {
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px;
  background: var(--card);
  border-top: 1px solid var(--border);
}

#panel-vet-chat .chat-input-wrap input { min-width: 0; }
#panel-vet-chat #vet-send-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border-radius: 10px; }

@media (max-width: 980px) {
  body.dash-body .vet-dashboard-hero { grid-template-columns: minmax(0, 1fr) 240px; }
  body.dash-body .ds-stats-lux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-vet-patients .vet-grid { grid-template-columns: 1fr; }
  #panel-vet-appointments .vet-appointments-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.dash-body .vet-dashboard-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 0 12px;
    padding: 20px 16px;
    border-radius: 0 0 22px 22px;
  }

  body.dash-body .vet-dashboard-hero h1 { font-size: 26px; }
  body.dash-body .vet-dashboard-hero .dash-hero-side { padding: 12px; }
  body.dash-body .vet-dashboard-hero .dash-hero-side > div:first-child { display: none; }
  body.dash-body .vet-dashboard-hero .dash-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dash-body .vet-dashboard-hero .dash-hero-btn { justify-content: center; padding: 0 8px; font-size: 9.5px; }
  body.dash-body .ds-stats-lux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.dash-body .ds-stats-lux .ds-stat { min-height: 82px; padding: 14px; }
  body.dash-body .ds-stats-lux .ds-stat-n { font-size: 24px; }

  #panel-vet-patients .vet-patients-head { align-items: stretch; flex-direction: column; }
  #panel-vet-patients .vet-search-tools { align-items: stretch; flex-direction: column-reverse; margin-left: 0; }
  #panel-vet-patients .vet-search-box { width: 100%; }
  #panel-vet-patients .vet-search-count { padding-left: 2px; }
  #panel-vet-patients .vet-card { padding: 14px; }
  #panel-vet-patients .vet-card-r { grid-template-columns: 1fr; }
  #panel-vet-patients .vet-btn { min-height: 40px; }

  .slot-modal-card { padding: 17px; border-radius: 16px; }
  .slot-status-grid { grid-template-columns: 1fr; }
  .slot-status-btn { min-height: 78px; }

  #panel-vet-chat .vet-chat-panel-head span { display: none; }
  #panel-vet-chat .vet-chat-wrap {
    display: block;
    height: auto;
    min-height: 0;
    border-radius: 14px;
  }

  #panel-vet-chat .vet-chat-wrap:not(.has-active-chat) .vet-chat-main { display: none; }
  #panel-vet-chat .vet-chat-wrap.has-active-chat .chat-sidebar { display: none; }
  #panel-vet-chat .vet-chat-wrap:not(.has-active-chat) .chat-sidebar { height: auto; min-height: 220px; border-right: 0; }
  #panel-vet-chat .vet-chat-wrap.has-active-chat .vet-chat-main { display: flex; }
  #panel-vet-chat .vet-chat-wrap.has-active-chat .vet-chat-back {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: 9px;
    flex: 0 0 36px;
    color: var(--blue);
    background: var(--blue-ll);
    border: 0;
    border-radius: 9px;
  }

  html.vet-mobile-chat-locked,
  body.vet-mobile-chat-locked {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.vet-mobile-chat-locked.has-mobile-nav { padding-bottom: 0 !important; }
  body.vet-mobile-chat-locked .vet-dashboard-hero,
  body.vet-mobile-chat-locked .ds-stats-lux,
  body.vet-mobile-chat-locked .ds-tabs,
  body.vet-mobile-chat-locked #panel-vet-chat .vet-chat-panel-head,
  body.vet-mobile-chat-locked .notif-fab,
  body.vet-mobile-chat-locked .theme-toggle { display: none !important; }
  body.vet-mobile-chat-locked .ds { min-height: 0 !important; padding-top: 8px !important; padding-bottom: 0 !important; }
  body.vet-mobile-chat-locked #panel-vet-chat { margin: 0 !important; padding: 0 !important; }
  body.vet-mobile-chat-locked #panel-vet-chat .vet-chat-wrap { margin: 0 !important; }
}

body.dash-body .ds-panel {
  width: 100%;
  min-width: 0;
  padding-top: 22px;
}

body.dash-body .ds-panel *,
body.dash-body .ds-card *,
body.dash-body .community-card *,
body.dash-body .vpc-lux * {
  min-width: 0;
}

body.dash-body .ds-card,
body.dash-body .community-card,
body.dash-body .vpc-lux,
body.dash-body .ow-lux-card {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body.dash-body button,
body.dash-body input,
body.dash-body select,
body.dash-body textarea {
  letter-spacing: 0;
}

body.dash-body .ds-ph {
  margin: 0 0 16px;
  min-height: 36px;
  align-items: center;
}

body.dash-body .ds-ptitle {
  margin: 0;
  line-height: 1.25;
}

/* Desktop shell and overview */
@media (min-width: 761px) {
  body.dash-body .ds-top-premium {
    margin: 14px 0 14px;
    top: 8px;
  }

  body.dash-body .ow-hero {
    min-height: 236px;
    padding: 30px 34px;
    margin-bottom: 14px;
    align-items: center;
  }

  body.dash-body .ow-hero h1 {
    font-size: 36px;
    line-height: 1.08;
  }

  body.dash-body .ow-hero-card {
    width: 280px;
    padding: 22px;
  }

  body.dash-body .ds-tabs {
    position: sticky;
    top: 84px;
    z-index: 90;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.dash-body .ds-tabs::-webkit-scrollbar {
    display: none;
  }

  body.dash-body .ds-tab {
    flex: 1 0 auto;
    justify-content: center;
    padding-inline: 13px;
    white-space: nowrap;
  }
}

/* UI52: operational panels use a calmer 95% desktop canvas. */
@media (min-width: 761px) {
  body.dash-body.panel-fullscreen .ds {
    width: 95% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    box-sizing: border-box;
  }
}

/* UI31: Google Maps clinic finder. */
#panel-ow-clinics #ow-clinic-map {
  position: relative;
  height: 520px;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

#panel-ow-clinics #ow-google-map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg3);
}

#panel-ow-clinics .ow-google-map-bar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 13px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 11px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  color: var(--ink2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

#panel-ow-clinics .ow-google-map-bar > span,
#panel-ow-clinics .ow-google-map-bar > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
}

#panel-ow-clinics .ow-google-map-bar > span i { color: #4285f4; }
#panel-ow-clinics .ow-google-map-bar > a {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
}

#panel-ow-clinics .ow-map-empty { display: none !important; }
#panel-ow-clinics .vet-card.is-map-selected {
  border-color: rgba(26, 111, 245, .42) !important;
  background: var(--blue-ll) !important;
  box-shadow: 0 0 0 2px rgba(26, 111, 245, .08);
}

/* UI31: compact Instagram-inspired VETTA community. */
#panel-ow-community .community-shell {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

#panel-ow-community .community-ig-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#panel-ow-community .community-ig-brand,
#panel-ow-community .community-ig-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#panel-ow-community .community-ig-brand > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
}

#panel-ow-community .community-ig-brand strong,
#panel-ow-community .community-ig-brand small { display: block; }
#panel-ow-community .community-ig-brand strong { color: var(--ink); font-size: 14px; }
#panel-ow-community .community-ig-brand small { margin-top: 2px; color: var(--ink4); font-size: 9.5px; }

#panel-ow-community .community-ig-actions button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg3);
  color: var(--ink3);
  font: inherit;
  cursor: pointer;
}

#panel-ow-community .community-ig-actions button.is-primary {
  width: auto;
  padding-inline: 12px;
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
}

#panel-ow-community .community-app { width: 100% !important; max-width: 680px !important; margin: 0 !important; }
#panel-ow-community .community-card {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
}

#panel-ow-community .community-stories-card { padding: 14px !important; }
#panel-ow-community .community-stories-card .community-card-head { margin-bottom: 10px; }
#panel-ow-community .community-stories-rail { gap: 12px !important; padding: 2px 0 5px !important; }
#panel-ow-community .community-stories-rail .community-story { min-width: 66px !important; max-width: 66px !important; }
#panel-ow-community .community-stories-rail .community-avatar.story,
#panel-ow-community .community-story-add-icon {
  width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
  border-radius: 50% !important;
}

#panel-ow-community .community-story-add-icon {
  display: grid !important;
  place-items: center;
  border: 2px dashed var(--border) !important;
  background: var(--bg3) !important;
  color: var(--blue) !important;
  font-size: 15px;
}

#panel-ow-community .community-story-add-copy > span { display: none !important; }
#panel-ow-community .community-story-add-copy strong { font-size: 10.5px !important; }
#panel-ow-community .community-composer-card { padding: 14px !important; }
#panel-ow-community .community-search-row { min-height: 40px; margin: 10px 0; border-radius: 10px; }
#panel-ow-community .community-composer textarea { min-height: 78px !important; border-radius: 11px !important; }
#panel-ow-community .community-composer-actions { gap: 8px !important; }
#panel-ow-community .community-chip { border-radius: 8px !important; }
#panel-ow-community .community-feed { width: 100% !important; max-width: 680px !important; gap: 12px !important; }
#panel-ow-community .community-post { margin: 0 !important; overflow: hidden !important; }
#panel-ow-community .community-post-head { min-height: 62px; padding: 11px 13px !important; }
#panel-ow-community .community-post-body { padding: 0 13px 11px !important; font-size: 13px !important; }
#panel-ow-community .community-post-media { margin: 0 !important; border-radius: 0 !important; }
#panel-ow-community .community-post-media img {
  width: 100% !important;
  min-height: 0 !important;
  max-height: 680px !important;
  object-fit: cover !important;
}

#panel-ow-community .community-post-actions {
  min-height: 52px;
  gap: 14px !important;
  padding: 9px 13px !important;
  border-top: 1px solid var(--border) !important;
}

#panel-ow-community .community-like-btn,
#panel-ow-community .community-open-comments-btn {
  display: inline-flex !important;
  min-width: 34px;
  align-items: center;
  justify-content: center;
}

#panel-ow-community .community-like-btn i,
#panel-ow-community .community-open-comments-btn i { font-size: 19px !important; }
#panel-ow-community .community-open-profile-btn { display: none !important; }
#panel-ow-community .community-follow-btn { margin-left: auto !important; border-radius: 8px !important; }
#panel-ow-community .community-comments { padding: 0 13px 12px !important; }
#panel-ow-community .community-comment-form { align-items: center; }
#panel-ow-community .community-comment-form .community-outline-btn {
  min-height: 38px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  background: var(--blue-ll) !important;
  color: var(--blue) !important;
}

@media (min-width: 761px) {
  #panel-ow-community .community-shell {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 680px) !important;
    grid-template-areas: "ig-head ig-head" "ig-nav ig-app" !important;
    align-items: start;
    gap: 12px !important;
  }

  #panel-ow-community .community-ig-header { grid-area: ig-head; }
  #panel-ow-community .community-app { grid-area: ig-app; }
  #panel-ow-community .community-mobile-nav {
    grid-area: ig-nav;
    order: initial !important;
    width: 88px !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  #panel-ow-community .community-mobile-nav-inner {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #panel-ow-community .community-mobile-nav-btn {
    min-height: 58px !important;
    padding: 7px 4px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  #panel-ow-community .community-mobile-nav-btn.is-active {
    background: var(--blue-ll) !important;
    color: var(--blue) !important;
  }

  #panel-ow-community .community-mobile-nav-btn.is-create {
    background: var(--grad) !important;
    color: #fff !important;
  }
}

@media (max-width: 760px) {
  #panel-ow-clinics #ow-clinic-map { height: 440px; min-height: 360px; }
  #panel-ow-community .community-shell {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  #panel-ow-community .community-ig-header { order: 0; min-height: 58px; padding: 8px 10px; }
  #panel-ow-community .community-ig-brand small { display: none; }
  #panel-ow-community .community-ig-actions button:not(.is-primary) { display: none; }
  #panel-ow-community .community-ig-actions button.is-primary span { display: none; }
  #panel-ow-community .community-ig-actions button.is-primary { width: 36px; padding: 0; }
  #panel-ow-community .community-mobile-nav {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }

  #panel-ow-community .community-mobile-nav-inner { gap: 4px !important; }
  #panel-ow-community .community-mobile-nav-btn {
    min-height: 50px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
  }

  #panel-ow-community .community-mobile-nav-btn.is-active { background: var(--blue-ll) !important; }
  #panel-ow-community .community-mobile-nav-btn.is-create { background: var(--grad) !important; }
  #panel-ow-community .community-app { order: 2; max-width: none !important; }
  #panel-ow-community .community-stories-card,
  #panel-ow-community .community-composer-card { padding: 12px !important; }
  #panel-ow-community .community-post { border-radius: 13px !important; }
  #panel-ow-community .community-post-actions { flex-wrap: nowrap !important; }
  #panel-ow-community .community-follow-btn { padding: 5px 9px !important; }
  #panel-ow-community .community-composer-actions { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  #panel-ow-community .community-hints { display: none !important; }
}

/* UI32: complete desktop community workspace. */
#panel-ow-community {
  padding-block: 18px 34px;
}

#panel-ow-community .community-shell {
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}

#panel-ow-community .community-app,
#panel-ow-community .community-feed {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

#panel-ow-community .community-screen.is-active {
  width: 100%;
}

#panel-ow-community #community-screen-home.is-active {
  display: grid !important;
  gap: 14px;
}

#panel-ow-community .community-ig-header {
  min-height: 70px;
  padding: 12px 14px;
  border-radius: 16px;
}

#panel-ow-community .community-ig-brand > span {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
}

#panel-ow-community .community-ig-brand strong { font-size: 15px; }
#panel-ow-community .community-ig-brand small { font-size: 11px; }

#panel-ow-community .community-stories-card,
#panel-ow-community .community-composer-card {
  padding: 16px !important;
}

#panel-ow-community .community-stories-rail {
  min-height: 92px;
  align-items: flex-start !important;
  gap: 15px !important;
  overflow-x: auto;
}

#panel-ow-community .community-stories-rail .community-story {
  min-width: 72px !important;
  max-width: 72px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#panel-ow-community .community-stories-rail .community-avatar.story,
#panel-ow-community .community-story-add-icon {
  width: 64px !important;
  height: 64px !important;
  flex-basis: 64px !important;
}

#panel-ow-community .community-stories-empty {
  min-width: 260px !important;
  min-height: 68px !important;
  flex: 1 0 260px !important;
  align-self: flex-start;
  padding: 11px 14px !important;
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg3) !important;
}

#panel-ow-community .community-stories-empty > i {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

#panel-ow-community .community-composer-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

#panel-ow-community .community-search-row {
  min-height: 44px;
  margin: 12px 0 !important;
}

#panel-ow-community .community-composer textarea {
  min-height: 92px !important;
  padding: 14px 15px !important;
  resize: vertical;
}

#panel-ow-community .community-composer-actions {
  align-items: center;
}

#panel-ow-community .community-post {
  border-radius: 16px !important;
}

#panel-ow-community .community-post-head {
  min-height: 70px;
  padding: 13px 16px !important;
}

#panel-ow-community .community-post-body {
  padding: 2px 16px 14px !important;
  font-size: 14px !important;
  line-height: 1.6;
}

#panel-ow-community .community-post-actions {
  min-height: 56px;
  padding: 10px 16px !important;
}

#panel-ow-community .community-desktop-rail {
  display: none;
  min-width: 0;
}

#panel-ow-community .community-rail-profile,
#panel-ow-community .community-rail-section,
#panel-ow-community .community-rail-quick {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#panel-ow-community .community-rail-profile,
#panel-ow-community .community-rail-section {
  padding: 16px;
}

#panel-ow-community .community-rail-profile-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

#panel-ow-community .community-rail-avatar,
#panel-ow-community .community-suggestion-person {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#panel-ow-community .community-rail-avatar,
#panel-ow-community .community-rail-avatar-visual {
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
}

#panel-ow-community .community-rail-avatar-visual img,
#panel-ow-community .community-suggestion-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#panel-ow-community .community-rail-profile-head > div > strong,
#panel-ow-community .community-rail-profile-head > div > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-ow-community .community-rail-profile-head > div > strong {
  color: var(--ink);
  font-size: 14px;
}

#panel-ow-community .community-rail-profile-head > div > span {
  margin-top: 3px;
  color: var(--ink4);
  font-size: 11px;
}

#panel-ow-community .community-rail-profile-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#panel-ow-community .community-rail-profile > p {
  margin: 14px 0;
  color: var(--ink3);
  font-size: 11.5px;
  line-height: 1.55;
}

#panel-ow-community .community-rail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg3);
}

#panel-ow-community .community-rail-stats button {
  display: grid;
  min-height: 62px;
  place-content: center;
  gap: 2px;
  padding: 7px 4px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

#panel-ow-community .community-rail-stats button:last-child { border-right: 0; }
#panel-ow-community .community-rail-stats strong { font-size: 17px; }
#panel-ow-community .community-rail-stats span { color: var(--ink4); font-size: 9.5px; }

#panel-ow-community .community-rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#panel-ow-community .community-rail-title span,
#panel-ow-community .community-rail-title small { display: block; }
#panel-ow-community .community-rail-title span { color: var(--ink); font-size: 13px; font-weight: 800; }
#panel-ow-community .community-rail-title small { margin-top: 3px; color: var(--ink4); font-size: 10px; }

#panel-ow-community .community-rail-title > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg3);
  color: var(--ink3);
  cursor: pointer;
}

#panel-ow-community .community-suggestions {
  display: grid;
  gap: 7px;
}

#panel-ow-community .community-suggestion {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

#panel-ow-community .community-suggestion:last-child { border-bottom: 0; }

#panel-ow-community .community-suggestion-person {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

#panel-ow-community .community-suggestion-avatar {
  display: block;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
}

#panel-ow-community .community-suggestion-person span,
#panel-ow-community .community-suggestion-person strong,
#panel-ow-community .community-suggestion-person small { display: block; min-width: 0; }
#panel-ow-community .community-suggestion-person strong { overflow: hidden; color: var(--ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
#panel-ow-community .community-suggestion-person small { margin-top: 2px; color: var(--ink4); font-size: 9.5px; }
#panel-ow-community .community-suggestion .community-follow-btn { margin-left: 0 !important; padding: 6px 8px !important; }

#panel-ow-community .community-rail-empty {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 10px;
  color: var(--ink4);
  font-size: 11px;
}

#panel-ow-community .community-rail-empty i { color: var(--blue); font-size: 20px; }

#panel-ow-community .community-rail-topics > .community-chip {
  display: flex !important;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--bg3) !important;
  color: var(--ink2) !important;
  text-align: left;
}

#panel-ow-community .community-rail-topics > .community-chip span { color: var(--blue); font-size: 11.5px; font-weight: 800; }
#panel-ow-community .community-rail-topics > .community-chip small { color: var(--ink4); font-size: 9.5px; font-weight: 600; }

#panel-ow-community .community-rail-quick {
  overflow: hidden;
}

#panel-ow-community .community-rail-quick > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--ink3);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#panel-ow-community .community-rail-quick > button:last-child { border-bottom: 0; }
#panel-ow-community .community-rail-quick > button > i:first-child { color: var(--blue); font-size: 17px; text-align: center; }
#panel-ow-community .community-rail-quick span,
#panel-ow-community .community-rail-quick strong,
#panel-ow-community .community-rail-quick small { display: block; }
#panel-ow-community .community-rail-quick strong { color: var(--ink); font-size: 11.5px; }
#panel-ow-community .community-rail-quick small { margin-top: 2px; color: var(--ink4); font-size: 9.5px; }

@media (min-width: 1081px) {
  #panel-ow-community .community-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 880px) minmax(300px, 336px) !important;
    grid-template-areas: "ig-head ig-head" "ig-nav ig-rail" "ig-app ig-rail" !important;
    align-items: start;
    gap: 14px 16px !important;
  }

  #panel-ow-community .community-ig-header { grid-area: ig-head; }
  #panel-ow-community .community-app { grid-area: ig-app; }
  #panel-ow-community .community-desktop-rail {
    display: grid;
    grid-area: ig-rail;
    gap: 12px;
  }

  #panel-ow-community .community-mobile-nav {
    grid-area: ig-nav;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  #panel-ow-community .community-mobile-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #panel-ow-community .community-mobile-nav-btn {
    min-height: 46px !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  #panel-ow-community .community-mobile-nav-btn i { font-size: 16px !important; }
  #panel-ow-community .community-mobile-nav-btn span { font-size: 10px !important; }
  #panel-ow-community .community-mobile-nav-btn.is-active { background: var(--blue-ll) !important; color: var(--blue) !important; }
  #panel-ow-community .community-mobile-nav-btn.is-create { background: var(--grad) !important; color: #fff !important; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  #panel-ow-community .community-shell {
    display: grid !important;
    width: min(100%, 880px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "ig-head" "ig-nav" "ig-app" !important;
    gap: 12px !important;
  }

  #panel-ow-community .community-ig-header { grid-area: ig-head; }
  #panel-ow-community .community-app { grid-area: ig-app; }
  #panel-ow-community .community-mobile-nav {
    grid-area: ig-nav;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
  }

  #panel-ow-community .community-mobile-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #panel-ow-community .community-mobile-nav-btn {
    min-height: 48px !important;
    padding: 5px !important;
  }
}

@media (max-width: 760px) {
  #panel-ow-community { padding-block: 8px 18px; }
  #panel-ow-community .community-desktop-rail { display: none !important; }
  #panel-ow-community .community-stories-rail { min-height: 86px; }
  #panel-ow-community .community-stories-empty { min-width: 200px !important; flex-basis: 200px !important; }
  #panel-ow-community .community-composer textarea { min-height: 76px !important; }
}

/* Super admin workspace: isolated so owner, vet and clinic rules cannot collapse it. */
body.dash-body .admin-dashboard {
  max-width: 1340px;
  padding-bottom: 72px;
}

.admin-dashboard .admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 105px;
}

.admin-dashboard .admin-brand-mark {
  position: relative;
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.admin-dashboard .admin-brand-mark img {
  position: absolute;
  width: 76px;
  height: 76px;
  max-width: none;
  transform: translate(-19px, -6px);
}

.admin-dashboard .admin-brand strong {
  color: var(--blue);
  font-family: 'Sofia Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
}

.admin-dashboard > .dash-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  align-items: stretch;
  gap: 24px;
  min-height: 250px;
  margin: 0 0 18px;
  padding: 30px 32px;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  background-color: var(--blue);
  background-image:
    linear-gradient(90deg, rgba(25, 95, 224, .98) 0%, rgba(16, 133, 218, .92) 53%, rgba(10, 169, 191, .63) 100%),
    url('/assets/images/clinic-team.jpg');
  background-position: center, center;
  background-size: cover;
  box-shadow: 0 16px 36px rgba(26, 111, 245, .18);
}

.admin-dashboard > .dash-hero > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.admin-dashboard > .dash-hero .dash-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.admin-dashboard > .dash-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-family: 'Sofia Sans', sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
}

.admin-dashboard > .dash-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  line-height: 1.6;
}

.admin-dashboard .adm-hero-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.admin-dashboard .adm-hero-pill {
  min-height: 74px;
  padding: 13px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
}

.admin-dashboard .adm-hero-pill strong,
.admin-dashboard .adm-hero-pill span {
  display: block;
  color: #fff;
}

.admin-dashboard .adm-hero-pill span {
  color: rgba(255, 255, 255, .78);
  line-height: 1.35;
}

.admin-dashboard > .dash-hero .dash-hero-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
}

.admin-dashboard > .dash-hero .dash-hero-side strong {
  display: block;
  color: #fff;
  font-size: 31px;
  line-height: 1;
}

.admin-dashboard > .dash-hero .dash-hero-side small {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1.45;
}

.admin-dashboard > .dash-hero .dash-hero-actions {
  display: grid;
  gap: 8px;
}

.admin-dashboard > .dash-hero .dash-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.admin-dashboard > .dash-hero .dash-hero-btn.primary {
  border-color: #fff;
  background: #fff;
  color: var(--blue);
}

.admin-dashboard > .dash-hero .dash-hero-btn.secondary {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.admin-dashboard > .adm-stats-6,
.admin-dashboard #panel-adm-stats > .adm-stats-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.admin-dashboard > .adm-stats-6 .ds-stat {
  min-width: 0;
  min-height: 96px;
  padding: 17px 16px;
  border-radius: 8px;
}

.admin-dashboard > .adm-stats-6 .ds-stat-n {
  font-size: 27px;
}

.admin-dashboard > .adm-stats-6 .ds-stat-l {
  margin-top: 8px;
  font-size: 9px;
}

.admin-dashboard > .ds-tabs {
  position: sticky;
  top: 86px;
  z-index: 90;
  margin-bottom: 18px;
  border-radius: 8px;
}

.admin-dashboard > .ds-tabs .ds-tab {
  flex: 1 1 0;
  justify-content: center;
  min-height: 39px;
  border-radius: 6px;
}

.admin-dashboard > .ds-tabs .ds-tab.active {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 18px rgba(26, 111, 245, .2);
}

.admin-dashboard .adm-summary-card,
.admin-dashboard .adm-mini-card,
.admin-dashboard .adm-recent-item,
.admin-dashboard .adm-top-clinic,
.admin-dashboard .adm-kpi-chip {
  border-radius: 8px;
}

.admin-dashboard .adm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-dashboard .adm-summary-card {
  min-width: 0;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1100px) {
  .admin-dashboard > .dash-hero {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .admin-dashboard > .adm-stats-6,
  .admin-dashboard #panel-adm-stats > .adm-stats-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-dashboard .adm-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.dash-body .admin-dashboard {
    padding: 0 12px 96px;
  }

  .admin-dashboard .ds-top {
    margin-top: 8px;
    padding: 10px 12px;
  }

  .admin-dashboard .admin-brand strong,
  .admin-dashboard .ds-top-sep,
  .admin-dashboard .ds-top-sub,
  .admin-dashboard .ds-top-r .ds-pill {
    display: none;
  }

  .admin-dashboard .admin-brand {
    min-width: 38px;
  }

  .admin-dashboard > .dash-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    padding: 22px 18px;
    background-position: center, 60% center;
  }

  .admin-dashboard > .dash-hero h1 {
    font-size: 27px;
  }

  .admin-dashboard .adm-hero-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-dashboard .adm-hero-pill {
    min-height: 68px;
    padding: 11px 9px;
  }

  .admin-dashboard .adm-hero-pill strong {
    font-size: 19px;
  }

  .admin-dashboard .adm-hero-pill span {
    font-size: 9px;
  }

  .admin-dashboard > .dash-hero .dash-hero-side {
    padding: 14px;
  }

  .admin-dashboard > .dash-hero .dash-hero-side > div:first-child {
    display: none;
  }

  .admin-dashboard > .dash-hero .dash-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard > .dash-hero .dash-hero-btn {
    justify-content: center;
    padding-inline: 8px;
    font-size: 9px;
  }

  .admin-dashboard > .adm-stats-6,
  .admin-dashboard #panel-adm-stats > .adm-stats-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-dashboard .adm-summary-grid {
    grid-template-columns: 1fr;
  }

  .admin-dashboard > .adm-stats-6 .ds-stat {
    min-height: 82px;
    padding: 14px;
  }

  .admin-dashboard > .ds-tabs {
    top: 71px;
    justify-content: flex-start;
  }

  .admin-dashboard > .ds-tabs .ds-tab {
    flex: 0 0 auto;
    min-width: 126px;
  }

  .admin-dashboard #panel-adm-stats > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Home: denser and easier to scan */
#panel-ow-home .ow-overview-shell {
  margin: 0;
}

#panel-ow-home .ow-overview-head {
  margin-bottom: 12px;
}

#panel-ow-home .ow-dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 14px;
}

#panel-ow-home .ow-spotlight-card {
  min-height: 150px;
  padding: 18px 20px !important;
}

#panel-ow-home .ow-spotlight-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
}

#panel-ow-home .ow-spotlight-card strong {
  font-size: 32px;
}

#panel-ow-home .ow-dashboard-main-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr) !important;
  gap: 14px !important;
  margin-bottom: 14px;
  align-items: stretch;
}

#panel-ow-home .ow-dashboard-main-grid > * {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  height: 100%;
}

#panel-ow-home .ow-empty-state {
  min-height: 150px;
  padding: 24px;
}

#panel-ow-home .ow-dashboard-actions-card .ow-action-grid {
  grid-template-columns: 1fr !important;
  gap: 8px;
}

#panel-ow-home .ow-dashboard-actions-card .ow-action-btn {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 0 !important;
  padding: 11px 12px;
  gap: 2px 11px;
  align-items: center;
  border-radius: 14px;
  box-shadow: none;
}

#panel-ow-home .ow-dashboard-actions-card .ow-action-btn i {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  font-size: 15px;
}

#panel-ow-home .ow-dashboard-actions-card .ow-action-btn strong,
#panel-ow-home .ow-dashboard-actions-card .ow-action-btn span {
  grid-column: 2;
}

#panel-ow-home .ow-dashboard-actions-card .ow-action-btn span {
  line-height: 1.35;
}

#panel-ow-home .ow-dashboard-secondary-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 14px !important;
}

#panel-ow-home .ow-dashboard-secondary-grid > * {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Community: familiar social feed proportions */
#panel-ow-community {
  padding-top: 18px;
}

#panel-ow-community .community-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 720px) !important;
  justify-content: center;
  gap: 12px !important;
  padding-bottom: 36px;
}

#panel-ow-community .community-app {
  width: 100%;
  max-width: 720px !important;
  margin: 0 !important;
}

#panel-ow-community .community-mobile-nav {
  order: -1;
  width: 100% !important;
  max-width: 720px;
  margin: 0 !important;
  padding: 8px !important;
  position: static !important;
  transform: none !important;
  border-radius: 16px !important;
}

#panel-ow-community .community-mobile-nav-inner {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#panel-ow-community .community-mobile-nav-btn {
  min-height: 54px !important;
  padding: 8px 6px !important;
  border-radius: 11px !important;
  border: 0 !important;
  background: transparent !important;
}

#panel-ow-community .community-mobile-nav-btn.is-active {
  background: var(--blue-ll) !important;
  color: var(--blue) !important;
}

#panel-ow-community .community-mobile-nav-btn.is-create {
  background: var(--grad) !important;
  color: #fff !important;
}

#panel-ow-community .community-card {
  width: 100%;
  padding: 18px !important;
  border-radius: 16px !important;
  margin: 0 0 12px !important;
}

#panel-ow-community .community-stories-card {
  padding-bottom: 14px !important;
}

#panel-ow-community .community-stories-rail {
  display: flex !important;
  gap: 15px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}

#panel-ow-community .community-story {
  flex: 0 0 78px;
  width: 78px;
  max-width: 78px;
}

#panel-ow-community .community-story strong,
#panel-ow-community .community-story span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-ow-community .community-composer-card {
  padding: 16px 18px !important;
}

#panel-ow-community .community-search-row {
  margin: 13px 0;
}

#panel-ow-community .community-composer textarea {
  min-height: 96px !important;
  resize: vertical;
}

#panel-ow-community .community-composer-actions {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;
}

#panel-ow-community .community-hints {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

#panel-ow-community .community-post {
  padding: 0 !important;
  overflow: hidden !important;
}

#panel-ow-community .community-post-head {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 10px;
  padding: 15px 16px 9px;
  align-items: center;
}

#panel-ow-community .community-post-author {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left;
}

#panel-ow-community .community-post-meta strong,
#panel-ow-community .community-post-meta span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-ow-community .community-post-body {
  padding: 4px 16px 13px !important;
  font-size: 14px !important;
  line-height: 1.55;
}

#panel-ow-community .community-post-media {
  width: 100%;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto;
  max-height: 720px;
  background: var(--bg3);
}

#panel-ow-community .community-post-media img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  display: block;
}

#panel-ow-community .community-post-actions {
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  padding: 10px 14px 13px !important;
  flex-wrap: wrap;
}

#panel-ow-community .community-like-btn,
#panel-ow-community .community-outline-btn {
  min-height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 6px 9px !important;
}

#panel-ow-community .community-follow-btn {
  margin-left: auto;
}

/* Pets: no narrow three-column cards and no vertical text */
#panel-ow-pets .ds-pets {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#panel-ow-pets .vpc-lux {
  width: 100%;
  min-width: 0;
  height: auto;
  overflow: hidden !important;
}

#panel-ow-pets .vpc-body {
  display: block !important;
  padding: 0 18px 18px !important;
  margin: 0 !important;
}

#panel-ow-pets .vpc-head {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: end !important;
}

#panel-ow-pets .vpc-name,
#panel-ow-pets .vpc-meta,
#panel-ow-pets .vpc-fact,
#panel-ow-pets .vpc-fact span,
#panel-ow-pets .vpc-fact strong,
#panel-ow-pets .pet-mini-event-copy,
#panel-ow-pets .vpc-b span {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

#panel-ow-pets .vpc-name {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

#panel-ow-pets .vpc-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 16px;
}

#panel-ow-pets .vpc-fact {
  min-height: 78px;
  padding: 11px !important;
}

#panel-ow-pets .vpc-fact strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#panel-ow-pets .vpc-acts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#panel-ow-pets .vpc-b {
  min-width: 0 !important;
  min-height: 40px;
  padding: 9px 10px !important;
}

/* Reminders and appointments */
#panel-ow-reminders .ow-reminders-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#panel-ow-reminders .ow-reminders-layout > div,
#panel-ow-reminders .ow-reminders-layout > .ds-card {
  width: 100%;
}

#panel-ow-reminders .ow-reminders-layout > .ds-card {
  margin: 0;
  min-height: 420px;
}

#panel-ow-appointments .ow-appointments-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#panel-ow-appointments .ow-appointments-layout > * {
  width: 100%;
}

#panel-ow-appointments .ds-card {
  padding: 20px;
}

#panel-ow-appointments .ow-reason-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
}

#panel-ow-appointments .ow-reason-chip {
  appearance: none;
  border: 1px solid var(--border) !important;
  background: var(--bg3) !important;
  color: var(--ink3) !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

#panel-ow-appointments .ow-reason-chip:hover,
#panel-ow-appointments .ow-reason-chip.active {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-ll) !important;
}

#panel-ow-appointments .ow-book-summary-list > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#panel-ow-appointments .ow-book-summary-list strong {
  text-align: right;
  word-break: normal;
}

#ow-days-row > *,
#ow-slots > * {
  min-width: 0;
}

/* Clinics */
#panel-ow-clinics .ds-empty {
  padding: 18px 0 22px !important;
}

.ow-clinic-finder {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: stretch;
}

.ow-clinic-finder > .ds-card {
  margin: 0;
  min-height: 560px;
}

.ow-clinic-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ow-clinic-section-head span {
  display: block;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ow-clinic-section-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.ow-clinic-section-head > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--blue);
  background: var(--blue-ll);
}

.ow-clinic-filters {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 14px;
}

.ow-clinic-search-input {
  position: relative;
}

.ow-clinic-search-input > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--ink5);
}

.ow-clinic-search-input .ds-fi {
  padding-left: 36px;
}

.clinic-search-results {
  display: grid;
  gap: 9px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}

.clinic-search-results .vet-card {
  margin: 0 !important;
  border-radius: 14px;
  box-shadow: none;
}

.clinic-search-results .vet-card-r {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vet-btn-map {
  color: var(--blue);
  background: var(--blue-ll);
  border-color: transparent;
}

.ow-clinic-loading {
  min-height: 200px;
  display: grid;
  place-items: center;
  color: var(--ink4);
  font-size: 13px;
}

.ow-clinic-map-card {
  position: relative;
  overflow: hidden;
}

.ow-map-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

#ow-clinic-map {
  width: 100%;
  height: 478px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--border);
}

.ow-map-empty {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 500;
  width: min(320px, calc(100% - 48px));
  display: none;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.ow-map-empty.is-visible {
  display: grid;
}

.ow-map-empty > i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--blue);
  background: var(--blue-ll);
}

.ow-map-empty strong {
  font-size: 13px;
}

.ow-map-empty span {
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.4;
}

.vetta-hospital-marker {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: var(--grad);
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(26, 111, 245, .32);
  font-size: 15px;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
  font-family: inherit;
}

.vetta-map-popup strong,
.vetta-map-popup span {
  display: block;
}

.vetta-map-popup strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.vetta-map-popup span {
  color: #657084;
  font-size: 11px;
  line-height: 1.45;
}

/* Profile */
#panel-ow-profile .ds-prof-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr) !important;
  gap: 16px !important;
  align-items: stretch;
}

#panel-ow-profile .ds-prof-grid > .ds-card {
  width: 100%;
  margin: 0;
  padding: 22px;
}

#panel-ow-profile .ds-prof-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

#panel-ow-profile .ds-logout {
  white-space: nowrap;
}

#panel-ow-profile .ds-pw {
  position: relative;
}

#panel-ow-profile .ds-pw .ds-fi {
  padding-right: 44px;
}

#panel-ow-profile .ds-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--ink4);
  cursor: pointer;
}

#panel-ow-profile .ds-eye:hover {
  color: var(--blue);
  background: var(--blue-ll) !important;
}

#panel-ow-profile > .ds-card {
  margin-top: 16px !important;
}

/* Premium */
#panel-ow-premium {
  padding-bottom: 36px;
}

#panel-ow-premium .prem-active-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, .75fr);
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

#panel-ow-premium .prem-active-top,
#panel-ow-premium .prem-active-bot {
  margin: 0;
}

#panel-ow-premium .prem-active-bot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#panel-ow-premium .prem-active-stat {
  padding: 12px;
  border-radius: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
}

#panel-ow-premium .prem-member-card-wrap {
  width: min(100%, 620px);
  margin: 0 auto 16px;
}

#panel-ow-premium .ds-member-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prem-active-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.prem-active-benefits article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 15px;
  border-radius: 15px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.prem-active-benefits article > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--blue);
  background: var(--blue-ll);
}

.prem-active-benefits strong,
.prem-active-benefits span {
  display: block;
}

.prem-active-benefits strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.prem-active-benefits span {
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.4;
}

#panel-ow-premium .prem-card-section {
  max-width: 760px;
  margin: 0 auto !important;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

#panel-ow-premium .prem-upgrade-wrap {
  max-width: 1040px;
  margin-inline: auto;
}

/* Responsive */
@media (max-width: 1100px) {
  #panel-ow-home .ow-dashboard-main-grid,
  #panel-ow-home .ow-dashboard-secondary-grid,
  #panel-ow-reminders .ow-reminders-layout,
  #panel-ow-appointments .ow-appointments-layout,
  .ow-clinic-finder,
  #panel-ow-profile .ds-prof-grid {
    grid-template-columns: 1fr !important;
  }

  #panel-ow-pets .ds-pets {
    grid-template-columns: 1fr !important;
  }

  .prem-active-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-ow-premium .prem-active-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.dash-body .ds {
    width: 100%;
    padding-inline: 12px;
  }

  body.dash-body .ds-panel {
    padding-top: 14px;
  }

  body.dash-body .ds-ph {
    align-items: flex-start;
    gap: 10px;
  }

  #panel-ow-home .ow-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #panel-ow-home .ow-spotlight-card {
    min-height: 128px;
    padding: 15px !important;
  }

  #panel-ow-home .ow-dashboard-actions-card .ow-action-grid {
    grid-template-columns: 1fr !important;
  }

  #panel-ow-community .community-shell {
    padding-bottom: 100px !important;
  }

  #panel-ow-community .community-mobile-nav {
    margin-bottom: 2px !important;
  }

  #panel-ow-community .community-mobile-nav-btn {
    min-height: 52px !important;
    padding: 7px 3px !important;
  }

  #panel-ow-community .community-mobile-nav-btn span {
    font-size: 9px !important;
  }

  #panel-ow-community .community-card {
    padding: 14px !important;
  }

  #panel-ow-community .community-post {
    padding: 0 !important;
  }

  #panel-ow-community .community-composer-actions {
    display: grid !important;
    grid-template-columns: 1fr auto;
  }

  #panel-ow-community .community-hints {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  #panel-ow-community .community-chip {
    white-space: nowrap;
  }

  #panel-ow-community .community-follow-btn {
    margin-left: 0;
  }

  #panel-ow-pets .vpc-cover {
    height: 96px;
  }

  #panel-ow-pets .vpc-head {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  #panel-ow-pets .vpc-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #panel-ow-pets .vpc-fact {
    padding: 9px !important;
  }

  #panel-ow-pets .vpc-acts {
    grid-template-columns: 1fr !important;
  }

  #panel-ow-reminders .ow-reminders-layout,
  #panel-ow-appointments .ow-appointments-layout {
    gap: 10px !important;
  }

  #panel-ow-reminders .ow-reminders-layout > .ds-card {
    min-height: 0;
  }

  #panel-ow-appointments .ow-book-summary-list > div {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  #ow-days-row {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(54px, 1fr)) !important;
    padding-bottom: 4px;
  }

  #ow-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ow-clinic-finder > .ds-card {
    min-height: 0;
  }

  .ow-clinic-filters {
    grid-template-columns: 1fr auto;
  }

  .ow-clinic-filters > select {
    grid-column: 1 / -1;
  }

  .clinic-search-results {
    max-height: none;
  }

  #ow-clinic-map {
    height: 390px;
  }

  #panel-ow-profile .ds-prof-grid > .ds-card {
    padding: 17px;
  }

  #panel-ow-profile .ds-prof-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #panel-ow-profile .ds-logout {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }

  #panel-ow-premium .prem-active-wrap {
    padding: 17px;
  }

  #panel-ow-premium .prem-active-bot,
  .prem-active-benefits {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-card-section,
  #panel-ow-premium .prem-card-section form {
    align-items: stretch !important;
  }

  #panel-ow-premium .prem-card-section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  #panel-ow-premium .prem-card-section form {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  #panel-ow-pets .vpc-facts {
    grid-template-columns: 1fr !important;
  }

  #panel-ow-community .community-mobile-nav-btn {
    min-height: 52px !important;
  }

  #panel-ow-community .community-mobile-nav-btn span {
    display: block;
    font-size: 8px !important;
  }

  #ow-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* UI pass 3: final owner-area components */

/* Pets: keep identity content completely below the colored header. */
#panel-ow-pets .vpc-cover {
  height: 88px !important;
  padding: 13px 15px !important;
}

#panel-ow-pets .vpc-cover-badge {
  padding: 6px 10px;
}

#panel-ow-pets .vpc-access-badge {
  left: 15px;
  bottom: 10px;
  padding: 4px 9px;
}

#panel-ow-pets .vpc-body {
  padding: 17px !important;
}

#panel-ow-pets .vpc-head {
  grid-template-columns: 60px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 15px !important;
}

#panel-ow-pets .vpc-av {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

#panel-ow-pets .vpc-av-fallback {
  border-radius: 15px;
  font-size: 22px;
}

#panel-ow-pets .vpc-main {
  align-self: center;
  padding: 0 !important;
}

#panel-ow-pets .vpc-name {
  font-size: 20px !important;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
}

#panel-ow-pets .vpc-meta {
  line-height: 1.45;
}

/* Community messenger */
#panel-ow-community .community-shell.is-dm-open {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1040px) !important;
}

#panel-ow-community .community-shell.is-dm-open .community-app {
  max-width: 1040px !important;
}

#panel-ow-community .community-inbox-card {
  max-width: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.community-dm-page-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  padding: 17px 18px;
}

.community-dm-page-icon,
.community-dm-close,
.community-dm-back {
  display: grid;
  place-items: center;
  border: 0;
  color: var(--blue);
  background: var(--blue-ll);
  cursor: pointer;
}

.community-dm-page-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 17px;
}

.community-dm-page-head h3 {
  margin: 0 0 3px;
  font-size: 18px;
  line-height: 1.2;
}

.community-dm-page-head p {
  margin: 0;
  color: var(--ink4);
  font-size: 12px;
}

.community-dm-close,
.community-dm-back {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.community-dm-shell {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 560px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.community-inbox-pane {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--border);
  background: var(--bg3);
}

.community-dm-search {
  position: relative;
  display: block;
  margin-bottom: 12px;
}

.community-dm-search > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink5);
  font-size: 12px;
}

.community-dm-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  color: var(--ink);
  background: var(--card);
  font: inherit;
  font-size: 12px;
}

.community-dm-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ll);
}

.community-inbox-list {
  display: grid !important;
  gap: 6px !important;
  max-height: 486px;
  overflow-y: auto;
}

.community-inbox-item {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px !important;
  width: 100%;
  min-height: 62px;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  color: var(--ink);
  background: transparent !important;
  text-align: left;
}

.community-inbox-item:hover,
.community-inbox-item.is-active {
  border-color: var(--blue-l) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm);
}

.community-inbox-item.is-active {
  background: var(--blue-ll) !important;
}

.community-inbox-avatar,
.community-dm-thread-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  font-size: 13px;
  font-weight: 800;
}

.community-inbox-avatar img,
.community-dm-thread-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-inbox-item-copy {
  display: block;
  min-width: 0;
}

.community-inbox-item-copy strong,
.community-inbox-item-copy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-inbox-item-copy strong {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 12.5px;
  font-style: normal;
}

.community-inbox-item-copy em {
  color: var(--ink4);
  font-size: 10.5px;
  font-style: normal;
}

.community-inbox-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--ink5);
}

.community-dm-thread {
  min-width: 0;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background: var(--card);
}

.community-dm-thread-empty {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
}

.community-dm-thread-empty-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--blue);
  background: var(--blue-ll);
  font-size: 24px;
}

.community-dm-thread-empty span {
  color: var(--ink4);
  font-size: 12px;
}

.community-dm-thread-head {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.community-dm-back {
  display: none;
}

.community-dm-thread-person {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.community-dm-thread-person strong,
.community-dm-thread-person span {
  display: block;
}

.community-dm-thread-person strong {
  margin-bottom: 2px;
  font-size: 13px;
}

.community-dm-thread-person span {
  color: var(--ink4);
  font-size: 10.5px;
}

.community-dm-thread-messages {
  flex: 1;
  min-height: 380px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 18px;
  background: var(--bg3);
}

.community-dm-bubble {
  width: fit-content;
  max-width: min(76%, 480px);
  display: grid;
  gap: 4px;
  padding: 10px 12px 7px;
  border-radius: 15px;
  font-size: 12.5px;
  line-height: 1.45;
}

.community-dm-bubble time {
  justify-self: end;
  font-size: 9px;
  opacity: .62;
}

.community-dm-bubble.is-them {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
}

.community-dm-bubble.is-me {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  color: #fff;
  background: var(--grad);
}

.community-dm-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.community-dm-compose .ds-fi {
  height: 42px;
  border-radius: 12px;
}

.community-dm-compose .ds-btn-pri {
  min-width: 106px;
  justify-content: center;
}

/* Booking form: separated information blocks and a clear primary action. */
#panel-ow-appointments .ow-booking-headline {
  display: grid !important;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg3);
}

#panel-ow-appointments .ow-booking-headline strong,
#panel-ow-appointments .ow-booking-headline span {
  display: block;
}

#panel-ow-appointments .ow-booking-headline strong {
  color: var(--ink);
  font-size: 13px;
}

#panel-ow-appointments .ow-booking-headline span {
  color: var(--ink4);
  font-size: 11.5px;
  line-height: 1.45;
}

#panel-ow-appointments .ow-final-booking-summary {
  margin: 0 0 12px;
  padding: 13px !important;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-kicker {
  margin-bottom: 9px;
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list > div {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg3);
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list i {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--blue);
  background: var(--blue-ll);
  font-size: 11px;
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list span,
#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list strong {
  grid-column: 2;
  display: block;
  margin: 0;
  text-align: left !important;
  white-space: normal;
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list span {
  color: var(--ink5);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

#panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list strong {
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.3;
}

.ow-book-primary {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 0;
  border-radius: 14px;
  text-align: left;
  color: var(--ink4);
  background: var(--bg3);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: not-allowed;
  transition: transform var(--t), box-shadow var(--t);
}

.ow-book-primary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--ink5);
  background: var(--card);
  font-size: 16px;
}

.ow-book-primary-copy strong,
.ow-book-primary-copy small {
  display: block;
}

.ow-book-primary-copy strong {
  margin-bottom: 2px;
  font-size: 13.5px;
}

.ow-book-primary-copy small {
  font-size: 10.5px;
  line-height: 1.35;
}

.ow-book-primary-arrow {
  justify-self: end;
}

.ow-book-primary.is-ready {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 12px 24px rgba(26, 111, 245, .22);
  cursor: pointer;
}

.ow-book-primary.is-ready .ow-book-primary-icon {
  color: var(--blue);
  background: #fff;
}

.ow-book-primary.is-ready:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(26, 111, 245, .28);
}

/* Premium: one coherent membership dashboard. */
#panel-ow-premium .prem-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 14px;
  padding: 30px;
  border-radius: 20px;
  color: #fff;
  background: var(--grad);
  box-shadow: var(--shadow-blue);
  overflow: hidden;
}

.prem-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 10px;
  font-weight: 800;
}

.prem-dashboard-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1.1;
}

.prem-dashboard-copy > p {
  max-width: 620px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, .84);
  font-size: 13px;
  line-height: 1.6;
}

.prem-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prem-dashboard-stats > div {
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  background: rgba(255, 255, 255, .11);
}

.prem-dashboard-stats span,
.prem-dashboard-stats strong {
  display: block;
}

.prem-dashboard-stats span {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .68);
  font-size: 9.5px;
  text-transform: uppercase;
}

.prem-dashboard-stats strong {
  color: #fff;
  font-size: 13px;
}

.prem-dashboard-card .ds-member-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 20px 48px rgba(7, 53, 130, .2);
  backdrop-filter: blur(12px);
}

#panel-ow-premium .prem-active-benefits {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

#panel-ow-premium .prem-active-benefits article {
  min-height: 94px;
  box-shadow: none;
}

#panel-ow-premium .prem-renew-card {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 46px minmax(220px, 1fr) minmax(360px, .9fr);
  gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 16px 18px;
}

.prem-renew-card .prem-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: var(--blue-ll);
  font-size: 17px;
}

.prem-renew-copy strong,
.prem-renew-copy span {
  display: block;
}

.prem-renew-copy strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.prem-renew-copy span {
  color: var(--ink4);
  font-size: 11px;
}

#panel-ow-premium .prem-renew-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#panel-ow-premium .prem-renew-card input {
  font-family: 'Sofia Sans', sans-serif;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  #panel-ow-premium .prem-dashboard {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-dashboard-card {
    width: min(100%, 620px);
  }

  #panel-ow-premium .prem-renew-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  #panel-ow-premium .prem-renew-card form {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #panel-ow-pets .vpc-cover {
    height: 82px !important;
  }

  #panel-ow-pets .vpc-head {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  #panel-ow-pets .vpc-av {
    width: 54px !important;
    height: 54px !important;
  }

  #panel-ow-community .community-shell.is-dm-open {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .community-dm-page-head {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    padding: 13px;
  }

  .community-dm-page-icon {
    width: 40px;
    height: 40px;
  }

  .community-dm-shell {
    display: block;
    min-height: 520px;
  }

  .community-inbox-pane {
    min-height: 520px;
    border-right: 0;
  }

  .community-dm-thread {
    display: none;
    min-height: 520px;
  }

  .community-dm-shell.has-thread .community-inbox-pane {
    display: none;
  }

  .community-dm-shell.has-thread .community-dm-thread {
    display: flex;
  }

  .community-dm-back {
    display: grid;
  }

  .community-dm-thread-messages {
    min-height: 350px;
  }

  .community-dm-compose .ds-btn-pri {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .community-dm-compose .ds-btn-pri span {
    display: none;
  }

  #panel-ow-appointments .ow-final-booking-summary .ow-book-summary-list {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-dashboard {
    gap: 18px;
    padding: 20px;
  }

  .prem-dashboard-copy h2 {
    font-size: 25px;
  }

  .prem-dashboard-stats,
  #panel-ow-premium .prem-active-benefits {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-renew-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  #panel-ow-premium .prem-renew-card form {
    grid-template-columns: 1fr;
  }
}

/* UI pass 4: community profile modal and selected clinic details */
#modal-community-profile .modal-box {
  width: min(92vw, 780px);
  max-width: 780px;
  max-height: min(88vh, 820px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

#modal-community-profile .modal-head {
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}

#modal-community-profile .modal-head h3 {
  font-size: 16px;
}

#modal-community-profile .modal-body {
  max-height: calc(min(88vh, 820px) - 64px);
  overflow-y: auto;
  padding: 0 !important;
}

#modal-community-profile .community-profile-modal-body {
  display: block;
}

#modal-community-profile .community-profile-modal-head {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

#modal-community-profile .community-avatar.lg {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  color: #fff;
  background: var(--grad);
  font-size: 22px;
  font-weight: 800;
  overflow: hidden;
}

#modal-community-profile .community-profile-modal-copy {
  min-width: 0;
}

#modal-community-profile .community-profile-modal-copy > strong {
  font-size: 19px;
  line-height: 1.2;
}

#modal-community-profile .community-profile-modal-copy > span {
  margin-top: 3px;
  font-size: 12px;
}

#modal-community-profile .community-profile-modal-copy > p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

#modal-community-profile .community-profile-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 6px;
  margin-top: 11px;
}

#modal-community-profile .community-profile-modal-stats span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--ink3);
  background: var(--bg3);
  font-size: 10.5px;
  font-weight: 700;
}

#modal-community-profile .community-profile-modal-stories {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 20px 4px;
}

#modal-community-profile .community-profile-modal-feed {
  display: grid;
  gap: 12px;
  padding: 16px 20px 24px;
  background: var(--bg3);
}

#modal-community-profile .community-profile-modal-feed .community-post {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: var(--card);
  box-shadow: none !important;
}

#modal-community-profile .community-profile-modal-feed .community-post-head {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 9px;
}

#modal-community-profile .community-profile-modal-feed .community-post-author {
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  color: inherit;
  background: transparent !important;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

#modal-community-profile .community-profile-modal-feed .community-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  font-size: 13px;
  font-weight: 800;
}

#modal-community-profile .community-profile-modal-feed .community-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#modal-community-profile .community-profile-modal-feed .community-post-meta strong,
#modal-community-profile .community-profile-modal-feed .community-post-meta span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-community-profile .community-profile-modal-feed .community-post-meta strong {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 12.5px !important;
}

#modal-community-profile .community-profile-modal-feed .community-post-meta span {
  color: var(--ink4);
  font-size: 10.5px !important;
}

#modal-community-profile .community-profile-modal-feed .community-post-badges,
#modal-community-profile .community-profile-modal-feed .community-post-author-bio,
#modal-community-profile .community-profile-modal-feed .community-visibility {
  display: none !important;
}

#modal-community-profile .community-profile-modal-feed .community-post-body {
  padding: 3px 14px 12px !important;
  color: var(--ink2);
  font-size: 13px !important;
  line-height: 1.55;
}

#modal-community-profile .community-profile-modal-feed .community-post-media {
  width: 100%;
  max-height: 560px;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--bg3);
}

#modal-community-profile .community-profile-modal-feed .community-post-media img {
  width: 100%;
  max-height: 560px;
  display: block;
  object-fit: contain;
}

#modal-community-profile .community-profile-modal-feed .community-post-actions {
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  padding: 9px 12px 11px !important;
}

#modal-community-profile .community-profile-modal-feed .community-like-btn,
#modal-community-profile .community-profile-modal-feed .community-outline-btn {
  appearance: none;
  min-height: 34px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 9px;
  color: var(--ink3);
  background: transparent !important;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

#modal-community-profile .community-profile-modal-feed .community-comments {
  padding: 0 14px 12px;
}

/* Selected clinic in the booking flow. */
#panel-ow-appointments .ow-selected-clinic {
  margin: 0 0 16px !important;
  padding: 13px !important;
  border: 1px solid var(--blue-l);
  border-radius: 14px;
  background: var(--blue-ll);
}

.ow-selected-clinic-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.ow-selected-clinic-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--grad);
}

.ow-selected-clinic-head div > span,
.ow-selected-clinic-head div > strong {
  display: block;
}

.ow-selected-clinic-head div > span {
  margin-bottom: 2px;
  color: var(--ink4);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.ow-selected-clinic-head div > strong {
  color: var(--ink);
  font-size: 13.5px;
}

.ow-selected-clinic-head > i {
  color: var(--green);
  font-size: 16px;
}

.ow-selected-clinic-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ow-selected-clinic-details > div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 7px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(26, 111, 245, .12);
  border-radius: 10px;
  background: var(--card);
}

.ow-selected-clinic-details i {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--blue);
  background: var(--blue-ll);
  font-size: 10px;
}

.ow-selected-clinic-details span,
.ow-selected-clinic-details strong {
  grid-column: 2;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ow-selected-clinic-details span {
  color: var(--ink5);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.ow-selected-clinic-details strong {
  color: var(--ink2);
  font-size: 10.5px;
}

@media (max-width: 760px) {
  #modal-community-profile .modal-box {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  #modal-community-profile .modal-body {
    max-height: calc(100vh - 88px);
  }

  #modal-community-profile .community-profile-modal-head {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 15px;
  }

  #modal-community-profile .community-avatar.lg {
    width: 56px;
    height: 56px;
  }

  #modal-community-profile .community-profile-modal-head > .community-follow-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  #modal-community-profile .community-profile-modal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #modal-community-profile .community-profile-modal-stats span {
    justify-content: center;
  }

  #modal-community-profile .community-profile-modal-feed {
    padding: 12px;
  }

  .ow-selected-clinic-details {
    grid-template-columns: 1fr;
  }
}

/* UI pass 5: premium community sharing chooser */
#modal-community-share .community-share-modal {
  width: min(92vw, 540px);
  max-width: 540px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

#modal-community-share .modal-head {
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}

#modal-community-share .modal-head h3 {
  font-size: 16px;
}

#modal-community-share .modal-body {
  padding: 18px !important;
}

.community-share-intro {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

.community-share-intro > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 8px 18px rgba(26, 111, 245, .18);
  font-size: 17px;
}

.community-share-intro strong,
.community-share-intro p {
  display: block;
}

.community-share-intro strong {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
}

.community-share-intro p {
  margin: 0;
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.45;
}

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

.community-share-action {
  appearance: none;
  width: 100%;
  min-height: 124px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  background: var(--card);
  box-shadow: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.community-share-action.is-featured {
  grid-column: 1 / -1;
  min-height: 104px;
  color: #fff;
  border-color: transparent;
  background: var(--grad);
  box-shadow: 0 12px 26px rgba(26, 111, 245, .2);
}

.community-share-action:hover {
  transform: translateY(-2px);
  border-color: var(--blue-l);
  box-shadow: var(--shadow);
}

.community-share-action-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue);
  background: var(--blue-ll);
  font-size: 16px;
}

.community-share-action.is-featured .community-share-action-icon {
  color: var(--blue);
  background: #fff;
}

.community-share-action-copy {
  display: block;
  min-width: 0;
}

.community-share-action-copy em,
.community-share-action-copy strong,
.community-share-action-copy small {
  display: block;
}

.community-share-action-copy em {
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.community-share-action-copy strong {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.community-share-action-copy small {
  color: var(--ink4);
  font-size: 10px;
  line-height: 1.4;
}

.community-share-action.is-featured .community-share-action-copy em,
.community-share-action.is-featured .community-share-action-copy strong,
.community-share-action.is-featured .community-share-action-copy small {
  color: #fff;
}

.community-share-action.is-featured .community-share-action-copy em,
.community-share-action.is-featured .community-share-action-copy small {
  opacity: .78;
}

.community-share-action-arrow {
  justify-self: end;
  color: var(--ink5);
  font-size: 11px;
}

.community-share-action.is-featured .community-share-action-arrow {
  color: #fff;
}

@media (max-width: 520px) {
  #modal-community-share .community-share-modal {
    width: calc(100vw - 20px);
  }

  #modal-community-share .modal-body {
    padding: 14px !important;
  }

  .community-share-grid {
    grid-template-columns: 1fr;
  }

  .community-share-action,
  .community-share-action.is-featured {
    grid-column: 1;
    min-height: 92px;
  }
}

/* UI pass 6: booking confirmation and community positioning */
#panel-ow-community .community-shell.is-dm-open .community-mobile-nav {
  justify-self: center !important;
  margin-inline: auto !important;
}

#panel-ow-community .community-composer-card,
#panel-ow-community #community-post-form {
  scroll-margin-top: 176px;
}

#modal-booking-success .ow-booking-success-modal {
  width: min(calc(100vw - 28px), 500px);
  max-width: 500px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

#modal-booking-success .modal-head {
  min-height: 68px;
  padding: 14px 18px;
}

#modal-booking-success .modal-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.ow-booking-success-head-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 10px;
}

#modal-booking-success .modal-body {
  padding: 18px !important;
}

#modal-booking-success .ow-success-card {
  display: grid;
  gap: 16px;
}

#modal-booking-success .ow-success-hero {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 15px;
  background: var(--blue-ll);
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 14px;
}

#modal-booking-success .ow-success-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .2);
}

#modal-booking-success .ow-success-copy {
  min-width: 0;
}

#modal-booking-success .ow-success-copy strong,
#modal-booking-success .ow-success-copy p {
  display: block;
  margin: 0;
}

#modal-booking-success .ow-success-copy strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

#modal-booking-success .ow-success-copy p {
  margin-top: 4px;
  color: var(--ink4);
  font-size: 11.5px;
  line-height: 1.5;
}

#modal-booking-success .ow-success-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#modal-booking-success .ow-success-list > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  min-height: 72px;
  padding: 11px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

#modal-booking-success .ow-success-list > div > i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--blue);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

#modal-booking-success .ow-success-list span,
#modal-booking-success .ow-success-list strong {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

#modal-booking-success .ow-success-list span {
  align-self: end;
  color: var(--ink5);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

#modal-booking-success .ow-success-list strong {
  align-self: start;
  margin-top: 3px;
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.35;
}

#modal-booking-success .ow-success-done {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  border-radius: 12px;
}

@media (max-width: 760px) {
  #panel-ow-community .community-composer-card,
  #panel-ow-community #community-post-form {
    scroll-margin-top: 96px;
  }

  #modal-booking-success .modal-head {
    min-height: 62px;
    padding: 12px 14px;
  }

  #modal-booking-success .modal-body {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 14px !important;
  }

  #modal-booking-success .ow-success-hero {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 13px;
  }

  #modal-booking-success .ow-success-icon {
    width: 44px;
    height: 44px;
  }

  #modal-booking-success .ow-success-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #modal-booking-success .ow-success-list > div {
    min-height: 62px;
    padding: 9px 10px;
  }
}

/* UI pass 7: make the open mobile conversation fill the usable viewport. */
@media (max-width: 760px) {
  #panel-ow-community .community-dm-shell.has-thread {
    min-height: 0;
    overflow: hidden;
  }

  #panel-ow-community .community-dm-shell.has-thread .community-dm-thread {
    height: clamp(430px, calc(100dvh - 170px), 680px);
    min-height: 0;
    max-height: none;
  }

  #panel-ow-community .community-dm-shell.has-thread .community-dm-thread-head,
  #panel-ow-community .community-dm-shell.has-thread .community-dm-compose {
    flex: 0 0 auto;
  }

  #panel-ow-community .community-dm-shell.has-thread .community-dm-thread-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* UI pass 8: reserve the fixed bottom bar only once on both chat screens. */
@media (max-width: 760px) {
  body.chat-mode.has-mobile-nav {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #panel-ow-chat {
    padding-bottom: 0 !important;
  }

  #panel-ow-chat .owner-chat-wrap {
    margin-bottom: 0 !important;
  }

  #panel-ow-community .community-shell.is-dm-open {
    padding-bottom: 8px !important;
  }
}

/* UI pass 9: complete chats, membership plans and localized file controls. */
.prem-dashboard-card .ds-mc-key {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  margin: auto 0 18px;
}

.prem-dashboard-card .ds-mc-key span {
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 800;
}

.prem-dashboard-card .ds-mc-key code {
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  overflow: hidden;
  color: #fff;
  background: rgba(7,53,130,.18);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  font-family: 'Sofia Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-ow-premium .prem-upgrade-wrap {
  display: grid;
  gap: 18px;
  max-width: 1180px;
}

#panel-ow-premium .prem-header {
  padding: 4px 2px 0;
  text-align: center;
}

#panel-ow-premium .prem-header-badge {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

#panel-ow-premium .prem-header h2,
#panel-ow-premium .prem-header p {
  margin: 0;
}

#panel-ow-premium .prem-header h2 {
  font-size: 27px;
}

#panel-ow-premium .prem-header p {
  margin-top: 5px;
  color: var(--ink4);
  font-size: 12px;
}

#panel-ow-premium .prem-code-activate {
  display: grid;
  grid-template-columns: auto minmax(240px, .9fr) minmax(380px, 1.2fr);
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

#panel-ow-premium .prem-code-icon,
#panel-ow-premium .prem-code-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#panel-ow-premium .prem-code-icon {
  width: 48px;
  height: 48px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 12px;
  font-size: 19px;
}

#panel-ow-premium .prem-code-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
}

#panel-ow-premium .prem-code-copy h3,
#panel-ow-premium .prem-code-copy p {
  margin: 0;
}

#panel-ow-premium .prem-code-copy h3 {
  color: var(--ink);
  font-size: 16px;
}

#panel-ow-premium .prem-code-copy p {
  max-width: 550px;
  margin-top: 4px;
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.5;
}

#panel-ow-premium .prem-code-form {
  min-width: 0;
}

#panel-ow-premium .prem-code-form > label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
}

#panel-ow-premium .prem-code-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#panel-ow-premium .prem-code-control input {
  min-width: 0;
  min-height: 44px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 750;
}

#panel-ow-premium .prem-code-control button {
  min-height: 44px;
  gap: 7px;
  white-space: nowrap;
}

#panel-ow-premium .prem-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

#panel-ow-premium .prem-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 690px;
  padding: 22px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#panel-ow-premium .prem-plan-card.is-selected {
  border-color: var(--blue);
  box-shadow: 0 16px 38px rgba(37,99,235,.14);
  transform: translateY(-3px);
}

#panel-ow-premium .prem-plan-featured {
  border-width: 2px;
}

#panel-ow-premium .prem-plan-plus {
  border-top: 4px solid var(--teal);
}

#panel-ow-premium .prem-plan-popular {
  position: absolute;
  top: 0;
  right: 18px;
  padding: 7px 10px;
  color: #fff;
  background: var(--grad);
  border-radius: 0 0 10px 10px;
  font-size: 8px;
  font-weight: 900;
}

#panel-ow-premium .prem-plan-complete {
  position: absolute;
  top: 0;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  color: #fff;
  background: var(--teal);
  border-radius: 0 0 10px 10px;
  font-size: 8px;
  font-weight: 900;
}

#panel-ow-premium .prem-plan-head {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border);
}

#panel-ow-premium .prem-plan-label {
  margin-bottom: 11px;
  color: var(--ink4);
  font-size: 10px;
  font-weight: 900;
}

#panel-ow-premium .prem-label-blue { color: var(--blue); }
#panel-ow-premium .prem-label-plus { color: var(--teal-d); }

#panel-ow-premium .prem-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

#panel-ow-premium .prem-plan-price-num {
  color: var(--ink);
  font-size: 38px;
  font-weight: 850;
  line-height: 1;
}

#panel-ow-premium .prem-plan-price-per,
#panel-ow-premium .prem-plan-desc {
  color: var(--ink4);
  font-size: 11px;
}

#panel-ow-premium .prem-plan-desc {
  margin-top: 9px;
  line-height: 1.45;
}

#panel-ow-premium .prem-plan-features {
  display: grid;
  gap: 14px;
  padding: 18px 0;
}

#panel-ow-premium .prem-feature-group {
  display: grid;
  gap: 8px;
}

#panel-ow-premium .prem-feature-group > span {
  color: var(--ink5);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

#panel-ow-premium .prem-feat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: var(--ink3);
  font-size: 11.5px;
  line-height: 1.35;
}

#panel-ow-premium .prem-feat-row > i {
  width: 17px;
  color: var(--blue);
  text-align: center;
}

#panel-ow-premium .prem-feat-row.off {
  color: var(--ink5);
  text-decoration: line-through;
  opacity: .72;
}

#panel-ow-premium .prem-feat-divider {
  height: 1px;
  margin: 2px 0;
  background: var(--border);
}

#panel-ow-premium .prem-plan-foot {
  margin-top: auto;
}

#panel-ow-premium .prem-btn-current,
#panel-ow-premium .prem-btn-select {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

#panel-ow-premium .prem-btn-current {
  color: var(--ink4);
  background: var(--bg3);
}

#panel-ow-premium .prem-btn-select {
  color: #fff;
  background: var(--grad);
  cursor: pointer;
}

#panel-ow-premium .prem-btn-plus {
  background: linear-gradient(135deg, var(--teal-d), var(--teal));
}

#panel-ow-premium .prem-pay-section {
  display: grid;
  gap: 15px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 170px;
}

#panel-ow-premium .prem-pay-section-lbl,
#panel-ow-premium .prem-selected-plan {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
}

#panel-ow-premium .prem-periods-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#panel-ow-premium .prem-period {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}

#panel-ow-premium .prem-period-active {
  border-color: var(--blue);
  background: var(--blue-ll);
}

#panel-ow-premium .prem-period-lbl,
#panel-ow-premium .prem-period-price {
  font-weight: 800;
}

#panel-ow-premium .prem-period-lbl { font-size: 11px; }
#panel-ow-premium .prem-period-price { font-size: 18px; }
#panel-ow-premium .prem-period-mo { color: var(--ink4); font-size: 9.5px; }

#panel-ow-premium .prem-save-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px 5px;
  color: var(--green);
  background: var(--green-l);
  border-radius: 6px;
  font-size: 8px;
  font-weight: 900;
}

#panel-ow-premium .prem-pay-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

#panel-ow-premium .prem-total-price {
  color: var(--ink);
  font-size: 26px;
  font-weight: 850;
}

#panel-ow-premium .prem-total-note {
  color: var(--ink4);
  font-size: 10.5px;
}

#panel-ow-premium .prem-pay-summary .prem-btn-pay {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 9px 20px rgba(37,99,235,.18);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#panel-ow-premium .prem-trust {
  display: flex;
  justify-content: center;
  gap: 18px;
  color: var(--ink4);
  font-size: 10px;
}

#panel-ow-premium .prem-compare {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

#panel-ow-premium .prem-compare-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}

#panel-ow-premium .prem-compare-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
}

#panel-ow-premium .prem-compare-head h3,
#panel-ow-premium .prem-compare-head p {
  margin: 0;
}

#panel-ow-premium .prem-compare-head h3 {
  color: var(--ink);
  font-size: 18px;
}

#panel-ow-premium .prem-compare-head p {
  max-width: 450px;
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

#panel-ow-premium .prem-compare-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#panel-ow-premium .prem-compare table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

#panel-ow-premium .prem-compare th,
#panel-ow-premium .prem-compare td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
}

#panel-ow-premium .prem-compare th {
  color: var(--ink);
  background: var(--bg3);
  font-size: 10px;
  font-weight: 850;
}

#panel-ow-premium .prem-compare th:first-child,
#panel-ow-premium .prem-compare td:first-child {
  width: 34%;
  text-align: left;
}

#panel-ow-premium .prem-compare td:first-child {
  color: var(--ink);
  font-weight: 700;
}

#panel-ow-premium .prem-compare td:first-child i {
  width: 22px;
  color: var(--blue);
  text-align: center;
}

#panel-ow-premium .prem-compare tr:last-child td {
  border-bottom: 0;
}

#panel-ow-premium .prem-yes {
  color: var(--green);
  font-weight: 800;
}

#panel-ow-premium .prem-no {
  color: var(--ink5);
}

.ow-family-plus-lock {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 14px;
  padding: 18px;
  background: var(--blue-ll);
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 14px;
}

.ow-family-plus-lock > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
}

.ow-family-plus-lock > strong {
  color: var(--ink);
  font-size: 14px;
}

.ow-family-plus-lock > p {
  max-width: 620px;
  margin: 0;
  color: var(--ink4);
  font-size: 11px;
  line-height: 1.55;
}

.vetta-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 5px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
}

.vetta-file-picker input[type="file"] {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.vetta-file-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
}

.vetta-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink4);
  font-size: 10.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-ow-chat .owner-chat-back {
  display: none;
}

@media (max-width: 980px) {
  #panel-ow-premium .prem-code-activate {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #panel-ow-premium .prem-code-form {
    grid-column: 1 / -1;
  }

  #panel-ow-premium .prem-plans-grid {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-plan-card {
    min-height: 0;
  }

  #panel-ow-premium .prem-plan-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #panel-ow-community .community-dm-shell.has-thread .community-dm-thread,
  #panel-ow-chat .chat-main {
    min-height: 0 !important;
    max-height: none;
  }

  #panel-ow-chat .chat-msgs {
    min-height: 0;
  }

  html.mobile-chat-locked,
  body.mobile-chat-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.mobile-chat-locked.has-mobile-nav,
  body.mobile-chat-locked.community-mode.has-mobile-nav,
  body.mobile-chat-locked.chat-mode.has-mobile-nav {
    padding-bottom: 0 !important;
  }

  body.mobile-chat-locked #panel-ow-community .community-shell.is-dm-open,
  body.mobile-chat-locked #panel-ow-chat,
  body.mobile-chat-locked #panel-ow-chat .owner-chat-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.mobile-chat-locked #panel-ow-community .community-inbox-card,
  body.mobile-chat-locked #panel-ow-chat .chat-main {
    margin-bottom: 0 !important;
  }

  body.mobile-chat-locked .ow-hero {
    display: none !important;
  }

  body.mobile-chat-locked .notif-fab,
  body.mobile-chat-locked .theme-toggle {
    display: none !important;
  }

  body.mobile-chat-locked .ds {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  #panel-ow-chat .owner-chat-wrap.has-active-chat {
    display: block !important;
    height: auto !important;
    gap: 0 !important;
  }

  #panel-ow-chat .owner-chat-wrap.has-active-chat .chat-sidebar {
    display: none !important;
  }

  #panel-ow-chat .owner-chat-wrap:not(.has-active-chat) .chat-main {
    display: none !important;
  }

  #panel-ow-chat .owner-chat-wrap:not(.has-active-chat) .chat-sidebar {
    min-height: 0 !important;
    height: auto !important;
  }

  #panel-ow-chat .owner-chat-main-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
  }

  #panel-ow-chat .owner-chat-main-hd #chat-header {
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #panel-ow-chat .owner-chat-back {
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 0;
    border-radius: 10px;
    color: var(--blue);
    background: var(--blue-ll);
  }

  #panel-ow-chat .owner-chat-wrap.has-active-chat .owner-chat-back {
    display: grid;
  }

  #panel-ow-chat .owner-chat-wrap.has-active-chat .chat-input-wrap {
    flex: 0 0 auto;
  }

  #panel-ow-premium .prem-header h2 {
    font-size: 23px;
  }

  #panel-ow-premium .prem-code-activate {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border-radius: 14px;
  }

  #panel-ow-premium .prem-code-icon {
    width: 42px;
    height: 42px;
  }

  #panel-ow-premium .prem-code-copy h3 {
    font-size: 14px;
  }

  #panel-ow-premium .prem-code-copy p {
    font-size: 10.5px;
  }

  #panel-ow-premium .prem-code-control {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-code-control button {
    width: 100%;
  }

  #panel-ow-premium .prem-plan-card {
    padding: 18px;
    border-radius: 15px;
  }

  #panel-ow-premium .prem-plan-features {
    grid-template-columns: 1fr;
  }

  #panel-ow-premium .prem-periods-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-ow-premium .prem-pay-summary {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-ow-premium .prem-pay-summary .prem-btn-pay {
    width: 100%;
  }

  #panel-ow-premium .prem-trust {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  #panel-ow-premium .prem-compare-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px;
  }

  #panel-ow-premium .prem-compare-head p {
    text-align: left;
  }

  #panel-ow-premium .prem-compare th,
  #panel-ow-premium .prem-compare td {
    padding: 11px 12px;
  }
}

@media (max-width: 760px) {
  #panel-vet-patients .vet-patients-head {
    width: 100% !important;
    align-items: stretch !important;
  }

  #panel-vet-patients .vet-search-tools,
  #panel-vet-patients .vet-search-box {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
  }
}

/* Clinic administration workspace. */
#panel-cl-patients .clinic-patients-head {
  align-items: center;
  gap: 16px;
}

#panel-cl-patients .clinic-search-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#panel-cl-patients .clinic-search-count {
  color: var(--ink4);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

#panel-cl-patients .clinic-patient-search {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  align-items: center;
  width: min(380px, 42vw);
  min-height: 42px;
  padding: 0 5px;
  color: var(--ink4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
  transition: border-color .15s, box-shadow .15s;
}

#panel-cl-patients .clinic-patient-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,111,245,.1);
}

#panel-cl-patients .clinic-patient-search > i { text-align: center; }

#panel-cl-patients .clinic-patient-search input {
  min-width: 0;
  height: 40px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 11.5px;
}

#panel-cl-patients .clinic-patient-search input::-webkit-search-cancel-button { display: none; }

#panel-cl-patients .clinic-patient-search button {
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ink4);
  background: var(--bg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

#panel-cl-patients .clinic-patient-search button.visible { display: grid; }

#panel-cl-patients .clinic-patients-table-card {
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: 0 7px 18px rgba(15,23,42,.05);
}

#panel-cl-patients #pat-table tbody tr[hidden] { display: none !important; }

#panel-cl-patients #pat-table .ds-btn-sm {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
}

#panel-cl-myprofile .clinic-admin-profile-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr);
  align-items: stretch;
  gap: 16px;
  width: 100%;
  margin: 0;
}

#panel-cl-myprofile .clinic-admin-profile-grid > .ds-card {
  width: 100%;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

#panel-cl-myprofile .clinic-admin-profile-grid > .ds-card:last-child,
#panel-cl-myprofile .clinic-admin-profile-grid > .ds-card:last-child form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

#panel-cl-myprofile .clinic-admin-profile-grid > .ds-card:last-child form {
  flex: 1;
  justify-content: center;
}

#panel-cl-myprofile .ds-prof-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

#panel-cl-myprofile .clinic-admin-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  color: #fff;
  background: var(--grad);
  border-radius: 15px;
  font-size: 22px;
  font-weight: 850;
}

#panel-cl-myprofile .clinic-admin-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#panel-cl-myprofile .ds-prof-info { min-width: 0; }
#panel-cl-myprofile .ds-prof-info h3 { overflow: hidden; margin: 0; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
#panel-cl-myprofile .ds-prof-info p { overflow: hidden; margin: 3px 0 7px; color: var(--ink4); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

#panel-cl-myprofile .ds-logout {
  padding: 8px 10px;
  color: var(--red);
  background: var(--red-l);
  border: 0;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

#panel-cl-myprofile .ds-pw {
  position: relative;
  display: flex;
  align-items: center;
}

#panel-cl-myprofile .ds-pw .ds-fi { padding-right: 42px; }

#panel-cl-myprofile .ds-eye {
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink4);
  background: var(--bg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

#panel-cl-profile .clinic-schedule-card {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(15,23,42,.05);
}

#panel-cl-profile .clinic-hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

#panel-cl-profile .clinic-hours-loading {
  grid-column: 1 / -1;
  padding: 28px;
  color: var(--ink4);
  text-align: center;
}

#panel-cl-profile .clinic-hours-row {
  display: grid;
  grid-template-columns: minmax(92px, .55fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 74px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: opacity .2s ease, background .2s ease;
}

#panel-cl-profile .clinic-hours-row.is-closed {
  background: color-mix(in srgb, var(--bg) 72%, var(--card));
  opacity: .68;
}

#panel-cl-profile .clinic-hours-day { min-width: 0; }
#panel-cl-profile .clinic-hours-day strong { display: block; font-size: 12px; }
#panel-cl-profile .clinic-hours-day span { display: block; margin-top: 3px; color: var(--ink4); font-size: 9.5px; font-weight: 650; }

#panel-cl-profile .clinic-hours-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

#panel-cl-profile .clinic-hours-switch input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
}

#panel-cl-profile .clinic-hours-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#panel-cl-profile .clinic-hours-times span { color: var(--ink4); font-size: 9px; font-weight: 700; }
#panel-cl-profile .clinic-hours-times .ds-fi { width: 100%; min-width: 0; height: 38px; padding: 0 8px; }

#panel-cl-profile .clinic-schedule-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--ink4);
  font-size: 10px;
}

#panel-cl-appointments .clinic-appointments-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 14px;
}

#panel-cl-appointments .clinic-appointments-layout > .ds-card,
#panel-cl-appointments .clinic-appointments-layout > div {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

#panel-cl-appointments .clinic-appointments-layout > div > .ds-card {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#panel-cl-appointments .clinic-appointments-layout > .ds-card,
#panel-cl-appointments .clinic-appointments-layout > div > .ds-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(15,23,42,.06);
}

#panel-cl-appointments .cl-day-btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding: 6px 2px;
  color: var(--ink3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}

#panel-cl-appointments .cl-day-btn.is-active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 7px 15px rgba(26,111,245,.18);
}

#panel-cl-appointments .cl-day-btn.is-today:not(.is-active) { color: var(--teal); border-color: var(--teal); }
#panel-cl-appointments .cl-day-name,
#panel-cl-appointments .cl-day-mon { font-size: 8.5px; font-weight: 650; }
#panel-cl-appointments .cl-day-num { margin: 2px 0; font-size: 15px; font-weight: 850; }

#panel-cl-appointments .cl-slot-btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid;
  border-radius: 9px;
  font: inherit;
  cursor: pointer;
}

#panel-cl-appointments .cl-slot-btn strong { font-size: 11.5px; }
#panel-cl-appointments .cl-slot-btn span { width: 100%; margin-top: 2px; overflow: hidden; font-size: 8.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
#panel-cl-appointments .cl-slot-btn.free { color: var(--blue); background: #eff6ff; border-color: #9fc4ff; }
#panel-cl-appointments .cl-slot-btn.busy { color: #c66b06; background: #fff8ec; border-color: #f2ca87; }
#panel-cl-appointments .cl-slot-btn.booked { color: var(--green); background: var(--green-l); border-color: #95d9ad; }
#panel-cl-appointments .cl-state-msg { grid-column: 1 / -1; padding: 18px; color: var(--ink4); text-align: center; background: var(--bg); border-radius: 11px; font-size: 11px; }
#panel-cl-appointments #cl-pending-list > div { min-height: 64px; }

#cl-slot-popup-ov .slot-status-btn.noop { opacity: .68; }

#panel-cl-chat .clinic-chat-panel-head { align-items: flex-end; }
#panel-cl-chat .clinic-chat-panel-head > span { margin-left: auto; color: var(--ink4); font-size: 10.5px; }

#panel-cl-chat .clinic-chat-wrap {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  height: min(600px, calc(100vh - 250px));
  min-height: 460px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

#panel-cl-chat .chat-sidebar {
  min-width: 0;
  background: var(--card);
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
}

#panel-cl-chat .chat-sidebar-hd { min-height: 56px; padding: 19px 16px; font-size: 11px; font-weight: 850; }

#panel-cl-chat .cl-conv-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  font: inherit;
  cursor: pointer;
}

#panel-cl-chat .cl-conv-item.active { background: var(--blue-ll); }
#panel-cl-chat .cl-conv-item > i { color: var(--ink4); font-size: 9px; }

#panel-cl-chat .cl-conv-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--grad);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 850;
}

#panel-cl-chat .cl-conv-main { min-width: 0; }
#panel-cl-chat .cl-conv-name { display: flex; align-items: center; gap: 5px; overflow: hidden; font-size: 11.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#panel-cl-chat .cl-conv-badge { padding: 2px 5px; color: #fff; background: var(--red); border-radius: 8px; font-size: 8px; }
#panel-cl-chat .cl-conv-last { display: block; margin-top: 3px; overflow: hidden; color: var(--ink4); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

#panel-cl-chat .clinic-chat-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
  border: 0;
  border-radius: 0;
}

#panel-cl-chat .clinic-chat-main-hd {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

#panel-cl-chat .clinic-chat-main-hd > div { min-width: 0; }
#panel-cl-chat .clinic-chat-main-hd strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#panel-cl-chat .clinic-chat-main-hd span { display: block; margin-top: 2px; color: var(--ink4); font-size: 9.5px; font-weight: 500; }
#panel-cl-chat .clinic-chat-back { display: none; }
#panel-cl-chat .chat-msgs { min-height: 0; flex: 1 1 auto; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
#panel-cl-chat .chat-input-wrap { flex: 0 0 auto; gap: 8px; padding: 10px; background: var(--card); border-top: 1px solid var(--border); }
#panel-cl-chat .chat-input-wrap input { min-width: 0; }
#panel-cl-chat #clinic-send-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border-radius: 10px; }

@media (max-width: 980px) {
  #panel-cl-myprofile .clinic-admin-profile-grid,
  #panel-cl-appointments .clinic-appointments-layout { grid-template-columns: 1fr; }

  #panel-cl-profile .clinic-hours-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.dash-body .clinic-tabs {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    padding: 6px;
    overflow: visible;
  }

  body.dash-body .clinic-tabs .ds-tab[data-panel="cl-patients"],
  body.dash-body .clinic-tabs .ds-tab[data-panel="cl-requests"],
  body.dash-body .clinic-tabs .ds-tab[data-panel="cl-myprofile"],
  body.dash-body .clinic-tabs .ds-tab[data-panel="cl-appointments"],
  body.dash-body .clinic-tabs .ds-tab[data-panel="cl-chat"] {
    display: none;
  }

  body.dash-body .clinic-tabs .ds-tab {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: 9.5px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  body.dash-body .clinic-tabs .ds-cnt {
    min-width: 15px;
    padding: 1px 4px;
    font-size: 7.5px;
  }

  #panel-cl-patients .clinic-patients-head { width: 100%; align-items: stretch !important; flex-direction: column; }
  #panel-cl-patients .clinic-search-tools { width: 100%; align-items: stretch; flex-direction: column-reverse; margin-left: 0; }
  #panel-cl-patients .clinic-patient-search { width: 100%; max-width: none; }

  #panel-cl-patients .clinic-patients-table-card { padding: 10px !important; background: transparent; border: 0; box-shadow: none; }
  #panel-cl-patients .clinic-patients-table-card > div { overflow: visible !important; }
  #panel-cl-patients #pat-table,
  #panel-cl-patients #pat-table tbody { display: block; width: 100%; }
  #panel-cl-patients #pat-table thead { display: none; }
  #panel-cl-patients #pat-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 5px 14px rgba(15,23,42,.05); }
  #panel-cl-patients #pat-table tbody td { display: block; min-width: 0; padding: 0; border: 0; font-size: 10.5px; }
  #panel-cl-patients #pat-table tbody td:first-child,
  #panel-cl-patients #pat-table tbody td:last-child { grid-column: 1 / -1; }
  #panel-cl-patients #pat-table tbody td:last-child > div { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; padding-top: 10px; border-top: 1px solid var(--border); }
  #panel-cl-patients #pat-table .ds-btn-sm { padding: 0 5px; font-size: 8.5px; }

  #panel-cl-myprofile .clinic-admin-profile-grid { width: 100%; }
  #panel-cl-myprofile .clinic-admin-profile-grid > .ds-card { padding: 16px; }
  #panel-cl-myprofile .clinic-admin-profile-grid > .ds-card:last-child form { justify-content: flex-start; }
  #panel-cl-myprofile .ds-prof-hero { grid-template-columns: 56px minmax(0, 1fr); }
  #panel-cl-myprofile .clinic-admin-avatar { width: 56px; height: 56px; }
  #panel-cl-myprofile .ds-logout { grid-column: 1 / -1; text-align: center; }

  #panel-cl-profile .clinic-schedule-card { padding: 14px; }
  #panel-cl-profile .clinic-hours-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }
  #panel-cl-profile .clinic-hours-times { grid-column: 1 / -1; }
  #panel-cl-profile .clinic-schedule-footer { align-items: stretch; flex-direction: column; }
  #panel-cl-profile .clinic-schedule-footer .ds-btn-pri { width: 100%; }

  #panel-cl-appointments #cl-week-days { gap: 4px !important; overflow-x: auto; padding-bottom: 4px; }
  #panel-cl-appointments .cl-day-btn { min-width: 46px; }
  #panel-cl-appointments #cl-hours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #panel-cl-appointments .adm-table { min-width: 620px; }

  #panel-cl-chat .clinic-chat-panel-head > span { display: none; }
  #panel-cl-chat .clinic-chat-wrap { display: block !important; height: auto !important; min-height: 0; gap: 0 !important; border-radius: 14px; }
  #panel-cl-chat .clinic-chat-wrap:not(.has-active-chat) .clinic-chat-main { display: none; }
  #panel-cl-chat .clinic-chat-wrap.has-active-chat .chat-sidebar { display: none; }
  #panel-cl-chat .clinic-chat-wrap:not(.has-active-chat) .chat-sidebar { height: auto; min-height: 220px; border-right: 0; }
  #panel-cl-chat .clinic-chat-wrap.has-active-chat .clinic-chat-main { display: flex; }
  #panel-cl-chat .clinic-chat-wrap.has-active-chat .clinic-chat-back { display: grid; place-items: center; width: 36px; height: 36px; margin-right: 9px; flex: 0 0 36px; color: var(--blue); background: var(--blue-ll); border: 0; border-radius: 9px; }

  html.clinic-mobile-chat-locked,
  body.clinic-mobile-chat-locked { height: 100%; overflow: hidden !important; overscroll-behavior: none; }
  body.clinic-mobile-chat-locked.has-mobile-nav { padding-bottom: 0 !important; }
  body.clinic-mobile-chat-locked .clinic-dashboard-hero,
  body.clinic-mobile-chat-locked .clinic-stats,
  body.clinic-mobile-chat-locked .ds-tabs,
  body.clinic-mobile-chat-locked #panel-cl-chat .clinic-chat-panel-head,
  body.clinic-mobile-chat-locked .notif-fab,
  body.clinic-mobile-chat-locked .theme-toggle { display: none !important; }
  body.clinic-mobile-chat-locked .ds { min-height: 0 !important; padding-top: 8px !important; padding-bottom: 0 !important; }
  body.clinic-mobile-chat-locked #panel-cl-chat { margin: 0 !important; padding: 0 !important; }
  body.clinic-mobile-chat-locked #panel-cl-chat .clinic-chat-wrap { margin: 0 !important; }
}

/* Keep photo layers after component background shorthands above. */
body.dash-body .ow-hero {
  background-color: var(--blue);
  background-image:
    linear-gradient(90deg, rgba(26,111,245,.98) 0%, rgba(19,145,223,.88) 46%, rgba(13,184,203,.34) 100%),
    url('/assets/images/pet-care-hero.jpg');
  background-position: center, center;
  background-size: cover;
}

#panel-ow-home .ow-care-banner {
  display: grid;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  min-height: 210px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(20, 45, 82, .08);
}

#panel-ow-home .ow-care-banner > img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  object-position: 58% center;
  display: block;
}

#panel-ow-home .ow-care-banner-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 26px 30px;
}

#panel-ow-home .ow-care-banner-kicker {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#panel-ow-home .ow-care-banner h3 {
  margin: 7px 0 6px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
}

#panel-ow-home .ow-care-banner p {
  max-width: 560px;
  margin: 0;
  color: var(--ink4);
  font-size: 13px;
  line-height: 1.55;
}

#panel-ow-home .ow-care-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

#panel-ow-home .ow-care-banner-actions button {
  min-height: 38px;
}

body.dash-body .vet-dashboard-hero {
  background-color: var(--blue);
  background-image:
    linear-gradient(90deg, rgba(26,111,245,.96) 0%, rgba(18,126,221,.90) 48%, rgba(13,184,203,.67) 100%),
    url('/assets/images/clinic-team.jpg');
  background-position: center, center;
  background-size: cover;
}

@media (max-width: 760px) {
  body.dash-body .ow-hero,
  body.dash-body .vet-dashboard-hero { background-position: center, 62% center; }

  #panel-ow-home .ow-care-banner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #panel-ow-home .ow-care-banner > img {
    height: 176px;
    min-height: 176px;
    object-position: center 43%;
  }

  #panel-ow-home .ow-care-banner-copy {
    padding: 20px;
  }

  #panel-ow-home .ow-care-banner h3 {
    font-size: 18px;
  }

  #panel-ow-home .ow-care-banner-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-ow-home .ow-care-banner-actions button {
    justify-content: center;
    min-width: 0;
    padding-inline: 10px;
  }

  body.dash-body .admin-dashboard .ds-top {
    display: flex !important;
  }
}

/* UI20: denser super admin layout for frequent operational use. */
@media (min-width: 761px) {
  body.dash-body .admin-dashboard .ds-top {
    min-height: 60px;
    margin: 10px 0 12px;
    padding: 10px 16px;
  }

  body.dash-body .admin-dashboard > .dash-hero {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 16px;
    min-height: 188px;
    margin-bottom: 12px;
    padding: 20px 22px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-kicker {
    margin-bottom: 7px;
    padding: 4px 9px;
  }

  body.dash-body .admin-dashboard > .dash-hero h1 {
    margin-bottom: 5px;
    font-size: 30px;
  }

  body.dash-body .admin-dashboard > .dash-hero p {
    max-width: 720px;
    font-size: 12px;
    line-height: 1.45;
  }

  body.dash-body .admin-dashboard .adm-hero-pills {
    gap: 7px;
    margin-top: 12px;
  }

  body.dash-body .admin-dashboard .adm-hero-pill {
    min-height: 52px;
    padding: 9px 11px;
  }

  body.dash-body .admin-dashboard .adm-hero-pill strong {
    font-size: 18px;
  }

  body.dash-body .admin-dashboard .adm-hero-pill span {
    margin-top: 2px;
    font-size: 9.5px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-side {
    gap: 10px;
    padding: 14px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-side strong {
    font-size: 25px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-side small {
    margin-top: 4px;
    font-size: 9.5px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-btn {
    justify-content: center;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 9px;
  }

  body.dash-body .admin-dashboard > .adm-stats-6 {
    gap: 8px;
    margin-bottom: 12px;
  }

  body.dash-body .admin-dashboard > .adm-stats-6 .ds-stat {
    min-height: 76px;
    padding: 13px 14px;
  }

  body.dash-body .admin-dashboard > .adm-stats-6 .ds-stat-n {
    font-size: 23px;
  }

  body.dash-body .admin-dashboard > .adm-stats-6 .ds-stat-l {
    margin-top: 6px;
  }

  body.dash-body .admin-dashboard > .ds-tabs {
    top: 76px;
    min-height: 46px;
    margin-bottom: 12px;
    padding: 4px;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab {
    min-height: 35px;
    padding-block: 7px;
  }

  body.dash-body .admin-dashboard .adm-chart-wrap {
    height: 160px;
  }

  body.dash-body .admin-dashboard #panel-adm-stats > div[style*="grid-template-columns:1fr 1fr"] {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  body.dash-body .admin-dashboard .adm-summary-grid {
    align-items: start;
    gap: 10px;
    margin: 10px 0;
  }

  body.dash-body .admin-dashboard .adm-summary-card {
    padding: 14px;
  }

  body.dash-body .admin-dashboard .adm-summary-head {
    margin-bottom: 8px;
  }

  body.dash-body .admin-dashboard .adm-summary-value {
    font-size: 25px;
  }

  body.dash-body .admin-dashboard .adm-mini-grid {
    gap: 7px;
  }

  body.dash-body .admin-dashboard .adm-mini-card {
    padding: 9px 10px;
  }

  body.dash-body .admin-dashboard .adm-mini-card strong {
    font-size: 17px;
  }

  body.dash-body .admin-dashboard .adm-summary-card p {
    margin-top: 8px;
    line-height: 1.4;
  }

  body.dash-body .admin-dashboard .adm-two-col {
    gap: 10px;
    margin-top: 10px;
  }

  body.dash-body .admin-dashboard .ds-card {
    margin-bottom: 10px;
  }
}

/* UI21: operational admin overview without external chart dependencies. */
body.dash-body .admin-dashboard > .dash-hero {
  background-image: linear-gradient(112deg, #1a6ff5 0%, #168fd8 64%, #12aebe 100%);
}

.admin-dashboard .adm-trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.admin-dashboard .adm-trend-card {
  min-width: 0;
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.admin-dashboard .adm-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.admin-dashboard .adm-trend-head span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink5);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .7px;
}

.admin-dashboard .adm-trend-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.admin-dashboard .adm-trend-head > strong {
  color: var(--blue);
  font-size: 25px;
  line-height: 1;
}

.admin-dashboard .adm-trend-card.is-teal .adm-trend-head > strong {
  color: var(--teal);
}

.admin-dashboard .adm-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 104px;
}

.admin-dashboard .adm-bar-col {
  display: grid;
  grid-template-rows: 15px 68px 14px;
  min-width: 0;
  text-align: center;
}

.admin-dashboard .adm-bar-col > span,
.admin-dashboard .adm-bar-col > small {
  overflow: hidden;
  color: var(--ink4);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard .adm-bar-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: min(34px, 72%);
  height: 68px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px 4px 2px 2px;
  background: var(--blue-ll);
}

.admin-dashboard .adm-bar-track i {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 2px 2px;
  background: var(--blue);
}

.admin-dashboard .adm-trend-card.is-teal .adm-bar-track {
  background: rgba(30, 173, 190, .11);
}

.admin-dashboard .adm-trend-card.is-teal .adm-bar-track i {
  background: var(--teal);
}

.admin-dashboard .adm-ops-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 10px 0;
}

.admin-dashboard .adm-ops-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.admin-dashboard .adm-ops-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: var(--blue-ll);
  color: var(--blue);
  font-size: 15px;
}

.admin-dashboard .adm-ops-chip strong,
.admin-dashboard .adm-ops-chip span {
  display: block;
  min-width: 0;
}

.admin-dashboard .adm-ops-chip strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.admin-dashboard .adm-ops-chip span {
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink4);
  font-size: 8.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.dash-body .admin-dashboard .adm-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  gap: 10px;
  width: 100%;
}

body.dash-body .admin-dashboard .adm-two-col > .ds-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .admin-dashboard .adm-trends,
  body.dash-body .admin-dashboard .adm-two-col {
    grid-template-columns: 1fr;
  }

  .admin-dashboard .adm-ops-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-dashboard .adm-bars {
    gap: 4px;
  }

  .admin-dashboard .adm-ops-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* UI72: owner mobile card alignment and top-anchored overflow menu. */
@keyframes vetta-more-drop-ui72 {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  #panel-ow-clinics .clinic-search-results .vet-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 13px !important;
  }

  #panel-ow-clinics .clinic-search-results .vet-card-l,
  #panel-ow-clinics .clinic-search-results .vet-card-l > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  #panel-ow-clinics .clinic-search-results .vet-card-r {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
    justify-content: stretch !important;
  }

  #panel-ow-clinics .clinic-search-results .vet-card-r > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  #panel-ow-clinics .clinic-search-results .vet-card-r > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  #panel-ow-community .community-stories-rail {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #panel-ow-community .community-stories-empty {
    flex: 1 1 0 !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    overflow: hidden !important;
  }

  #panel-ow-community .community-stories-empty > i {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  #panel-ow-community .community-stories-empty > span {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #panel-ow-community .community-stories-empty strong,
  #panel-ow-community .community-stories-empty em {
    max-width: 100% !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #panel-ow-pets .vpc-cover {
    height: 104px !important;
    min-height: 104px !important;
    padding: 12px 14px !important;
  }

  #panel-ow-pets .vpc-cover-badge {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    max-width: calc(100% - 112px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #panel-ow-pets .vpc-access-badge {
    left: 14px !important;
    bottom: 12px !important;
    max-width: calc(100% - 28px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.has-mobile-nav .mobile-more-card {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    right: 10px !important;
    bottom: auto !important;
    left: 10px !important;
    max-height: calc(100dvh - 164px) !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
    animation: vetta-more-drop-ui72 .18s ease-out !important;
    transform-origin: top center;
  }

  body.has-mobile-nav .mobile-more-backdrop {
    background: rgba(15, 23, 42, .24) !important;
    backdrop-filter: blur(2px) !important;
  }
}

/* UI23: owner identity and resilient profile images */
body.dash-body .owner-topbar {
  min-height: 62px;
  padding: 10px 16px;
  border-radius: 20px;
}

body.dash-body .owner-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 108px;
  text-decoration: none;
}

body.dash-body .owner-brand-mark {
  position: relative;
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

body.dash-body .owner-brand-mark img {
  position: absolute;
  width: 76px;
  height: 76px;
  max-width: none;
  transform: translate(-19px, -6px);
}

body.dash-body .owner-brand strong {
  color: var(--blue);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 2px;
}

body.dash-body .owner-top-avatar {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 15px;
}

body.dash-body .owner-top-copy {
  min-width: 0;
}

body.dash-body .owner-top-copy .ds-top-name {
  max-width: min(240px, 26vw);
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dash-body .owner-top-copy .ds-top-sub {
  margin-top: 2px;
  color: var(--ink4);
  font-size: 10.5px;
  line-height: 1.2;
}

body.dash-body .owner-top-copy .ds-top-sub .fa-star {
  color: #f59e0b;
}

body.dash-body .owner-premium-pill,
body.dash-body .owner-premium-action,
body.dash-body .owner-logout-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

body.dash-body .owner-premium-pill {
  border: 0;
  background: #fff5dc;
  color: #b86a00;
}

body.dash-body .owner-premium-action {
  border: 0;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
}

body.dash-body .owner-logout-action {
  border: 1px solid transparent;
  color: var(--ink4);
  transition: color .15s ease, background .15s ease;
}

body.dash-body .owner-logout-action:hover {
  background: rgba(239, 68, 68, .08);
  color: var(--red);
}

.avatar-safe {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.avatar-safe-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
}

.avatar-safe > img {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.community-avatar.story .avatar-safe-fallback {
  color: var(--blue);
}

.community-me-avatar {
  display: grid;
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.community-me-avatar-visual {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  background: var(--grad);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

#panel-ow-home .ow-care-banner {
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
}

#panel-ow-home .ow-care-banner > img {
  border-radius: 12px;
}

@media (max-width: 760px) {
  #panel-ow-home .ow-care-banner-copy {
    padding: 16px 10px 10px;
  }
}

/* UI24: visible premium mark and a compact stories strip */
#panel-ow-premium .ds-mc-logo {
  gap: 9px;
}

#panel-ow-premium .ds-mc-logo-mark {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  background: transparent;
}

#panel-ow-premium .ds-mc-logo-mark img {
  position: static;
  display: block;
  width: 34px !important;
  height: 34px !important;
  max-width: 34px;
  object-fit: contain;
  filter: none !important;
  transform: none;
}

#panel-ow-premium .ds-mc-logo-text {
  font-size: 15px;
  letter-spacing: 2px;
}

#panel-ow-community .community-stories-card {
  padding: 16px 18px !important;
}

#panel-ow-community .community-stories-card .community-card-head {
  margin-bottom: 12px !important;
}

#panel-ow-community .community-stories-caption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink4);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

#panel-ow-community .community-stories-rail {
  align-items: stretch;
  gap: 10px !important;
  padding: 0 1px 2px !important;
}

#panel-ow-community .community-stories-rail .community-story.add-story {
  display: grid !important;
  flex: 0 0 170px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  min-height: 68px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(26, 111, 245, .16) !important;
  border-radius: 12px !important;
  background: var(--blue-ll) !important;
  text-align: left !important;
}

#panel-ow-community .community-stories-rail .community-story.add-story:hover {
  border-color: var(--blue) !important;
  background: rgba(26, 111, 245, .10) !important;
}

#panel-ow-community .community-story-add-icon {
  display: grid !important;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(26, 111, 245, .22);
}

#panel-ow-community .community-story-add-copy,
#panel-ow-community .community-story-add-copy strong,
#panel-ow-community .community-story-add-copy span {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  overflow: hidden;
  text-align: left !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

#panel-ow-community .community-story-add-copy strong {
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#panel-ow-community .community-story-add-copy span {
  margin-top: 3px;
  color: var(--ink4) !important;
  font-size: 10px !important;
}

#panel-ow-community .community-stories-empty {
  display: flex;
  flex: 1 0 230px;
  min-width: 230px;
  min-height: 68px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 12px !important;
  text-align: left;
}

#panel-ow-community .community-stories-empty > i {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink4);
}

#panel-ow-community .community-stories-empty span,
#panel-ow-community .community-stories-empty strong,
#panel-ow-community .community-stories-empty em {
  display: block;
  min-width: 0;
}

#panel-ow-community .community-stories-empty strong {
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

#panel-ow-community .community-stories-empty em {
  margin-top: 3px;
  color: var(--ink4);
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 520px) {
  #panel-ow-community .community-stories-empty {
    flex-basis: 205px;
    min-width: 205px;
  }
}

/* UI27: owner appointments, care reminders, chat and map reliability */
.ow-list-loading {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink4);
  font-size: 12px;
}

.ow-list-empty {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: var(--ink4);
  text-align: center;
}

.ow-list-empty > span {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-ll);
  color: var(--blue);
  font-size: 18px;
}

.ow-list-empty strong,
.ow-list-empty small {
  display: block;
}

.ow-list-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.ow-list-empty small {
  max-width: 330px;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.5;
}

/* Reservation timeline */
#panel-ow-appointments .ow-my-appts-card {
  padding: 0;
  overflow: hidden;
}

#panel-ow-appointments .ow-my-appts-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
}

.ow-my-appts-head-icon,
.ow-reminder-head-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-ll);
  color: var(--blue);
  font-size: 13px;
}

.ow-my-appts-head strong,
.ow-my-appts-head > div > span,
.ow-reminder-card-head strong,
.ow-reminder-card-head > div > span,
.ow-reminder-list-head strong,
.ow-reminder-list-head > div > div > span {
  display: block;
}

.ow-my-appts-head strong,
.ow-reminder-card-head strong,
.ow-reminder-list-head strong {
  color: var(--ink);
  font-size: 13px;
}

.ow-my-appts-head > div > span,
.ow-reminder-card-head > div > span,
.ow-reminder-list-head > div > div > span {
  margin-top: 2px;
  color: var(--ink4);
  font-size: 10px;
}

#my-appts {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ow-appt-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 112px 76px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.ow-appt-item::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--blue);
  content: '';
}

.ow-appt-item.is-confirmed::before,
.ow-appt-item.is-completed::before { background: var(--green); }
.ow-appt-item.is-cancelled::before { background: var(--red); }
.ow-appt-item.is-cancelled { opacity: .72; }

.ow-appt-date {
  display: grid;
  min-height: 64px;
  place-content: center;
  border-radius: 10px;
  background: var(--bg3);
  text-align: center;
}

.ow-appt-date strong,
.ow-appt-date span,
.ow-appt-date time {
  display: block;
}

.ow-appt-date strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

.ow-appt-date span {
  margin-top: 2px;
  color: var(--ink4);
  font-size: 8.5px;
}

.ow-appt-date time {
  margin-top: 4px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.ow-appt-main {
  min-width: 0;
}

.ow-appt-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ow-appt-status {
  justify-self: start;
  gap: 4px;
  font-size: 8.5px;
  white-space: nowrap;
}

.ow-appt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 7px;
  color: var(--ink4);
  font-size: 10.5px;
}

.ow-appt-meta span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.ow-appt-meta i { color: var(--blue); }

.ow-appt-cancel,
.ow-reminder-complete,
.ow-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.ow-appt-cancel {
  width: 76px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(239, 68, 68, .08);
  color: var(--red);
}

/* Care reminders */
#panel-ow-reminders > .ds-ph,
#panel-ow-appointments > .ds-ph {
  min-height: 46px;
  align-items: center;
  padding: 8px 2px 0;
  margin-bottom: 12px;
}

#panel-ow-reminders .ow-reminders-layout {
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr) !important;
  gap: 14px !important;
}

#panel-ow-reminders .ow-reminder-summary-card {
  margin-bottom: 12px;
  padding: 15px;
}

.ow-reminder-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.ow-reminder-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ow-reminder-summary-grid > div {
  display: grid;
  min-width: 0;
  min-height: 70px;
  align-content: center;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg3);
  text-align: center;
}

.ow-reminder-summary-grid strong,
.ow-reminder-summary-grid span { display: block; }
.ow-reminder-summary-grid strong { color: var(--ink); font-size: 20px; line-height: 1; }
.ow-reminder-summary-grid span { margin-top: 5px; color: var(--ink4); font-size: 9px; }
.ow-reminder-summary-grid .is-active strong { color: var(--blue); }
.ow-reminder-summary-grid .is-due strong { color: #d97706; }
.ow-reminder-summary-grid .is-complete strong { color: var(--green); }

#panel-ow-reminders .ow-reminder-create-card {
  padding: 16px;
  scroll-margin-top: 170px;
}

#panel-ow-reminders .ow-reminders-layout > .ow-reminder-list-card {
  min-height: 0 !important;
  height: auto;
  align-self: start;
  padding: 0;
  overflow: hidden;
}

.ow-reminder-list-head {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
}

.ow-reminder-list-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.ow-icon-button {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--bg3);
  color: var(--ink4);
}

.ow-icon-button:hover { color: var(--blue); background: var(--blue-ll); }
.ow-icon-button.is-danger { color: var(--red); background: rgba(239, 68, 68, .08); }

#ow-reminders-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ow-reminder-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.ow-reminder-item.is-completed,
.ow-reminder-item.is-cancelled { opacity: .7; }
.ow-reminder-item.is-overdue { border-color: rgba(239, 68, 68, .28); }

.ow-reminder-type-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--blue-ll);
  color: var(--blue);
  font-size: 14px;
}

.ow-reminder-item.is-overdue .ow-reminder-type-icon {
  background: rgba(239, 68, 68, .08);
  color: var(--red);
}

.ow-reminder-item-main { min-width: 0; }

.ow-reminder-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ow-reminder-title-row > strong {
  color: var(--ink);
  font-size: 12.5px;
}

.ow-reminder-title-row .ds-pill { font-size: 8.5px; }

.ow-reminder-meta,
.ow-reminder-source {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
  margin-top: 7px;
  color: var(--ink4);
  font-size: 10px;
}

.ow-reminder-meta span,
.ow-reminder-source span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ow-reminder-meta i,
.ow-reminder-source i { color: var(--blue); }
.ow-reminder-meta .is-overdue { color: var(--red); font-weight: 750; }
.ow-reminder-meta .is-overdue i { color: var(--red); }

.ow-reminder-item-main p {
  margin: 8px 0 0;
  color: var(--ink3);
  font-size: 10.5px;
  line-height: 1.45;
}

.ow-reminder-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ow-reminder-complete {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--green-l);
  color: var(--green);
}

/* Unified owner chat */
#panel-ow-chat .owner-chat-wrap {
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 0;
  height: min(620px, calc(100vh - 210px));
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#panel-ow-chat .chat-sidebar,
#panel-ow-chat .chat-main {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#panel-ow-chat .chat-sidebar {
  border-right: 1px solid var(--border);
}

#panel-ow-chat .chat-sidebar-hd {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

#panel-ow-chat .chat-sidebar-hd span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#panel-ow-chat .chat-sidebar-hd i { color: var(--blue); }

#panel-ow-chat .chat-sidebar-hd small {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-ll);
  color: var(--blue);
  font-size: 9px;
}

#panel-ow-chat .chat-conv-item {
  min-height: 68px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
}

#panel-ow-chat .chat-conv-item.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

#panel-ow-chat .chat-conv-info {
  min-width: 0;
  flex: 1;
}

#panel-ow-chat .chat-conv-arrow {
  color: var(--ink5);
  font-size: 10px;
}

#panel-ow-chat .owner-chat-main-hd {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
}

#panel-ow-chat .owner-chat-head-avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-ll);
  color: var(--blue);
  font-size: 13px;
}

#panel-ow-chat .owner-chat-head-copy {
  display: block;
  min-width: 0;
}

#panel-ow-chat .owner-chat-head-copy strong,
#panel-ow-chat .owner-chat-head-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-ow-chat .owner-chat-head-copy strong { color: var(--ink); font-size: 12.5px; }
#panel-ow-chat .owner-chat-head-copy small { margin-top: 2px; color: var(--ink4); font-size: 9.5px; font-weight: 500; }

#panel-ow-chat .chat-msgs {
  gap: 8px;
  padding: 18px 20px;
  background: var(--bg3);
}

#panel-ow-chat .chat-msg { max-width: min(72%, 560px); }
#panel-ow-chat .chat-bubble { padding: 9px 12px; border-radius: 13px; font-size: 12.5px; }
#panel-ow-chat .chat-time { margin-top: 3px; padding: 0 3px; color: var(--ink5); font-size: 8.5px; }

#panel-ow-chat .chat-input-wrap {
  min-height: 64px;
  align-items: center;
  padding: 10px 12px;
}

#panel-ow-chat .chat-input-wrap input {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 11px;
  background: var(--bg3);
}

#panel-ow-chat .chat-input-wrap button {
  min-width: 104px;
  min-height: 42px;
  justify-content: center;
  border-radius: 11px;
}

/* Leaflet owns its pane transforms; the map is initialized after its tab is visible. */
#ow-clinic-map {
  background: #dce9f2;
}

#ow-clinic-map .leaflet-tile {
  max-width: none !important;
  image-rendering: auto;
}

@media (max-width: 760px) {
  #panel-ow-appointments .ow-my-appts-card { margin-top: 10px; }
  .ow-appt-item { grid-template-columns: 58px minmax(0, 1fr); }
  .ow-appt-status { grid-column: 2; justify-self: start; }
  .ow-appt-cancel { grid-column: 1 / -1; width: 100%; }

  #panel-ow-reminders .ow-reminders-layout { grid-template-columns: 1fr !important; }
  .ow-reminder-item { grid-template-columns: 38px minmax(0, 1fr); }
  .ow-reminder-type-icon { width: 38px; height: 38px; }
  .ow-reminder-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .ow-reminder-complete { flex: 1; }

  #panel-ow-chat .owner-chat-wrap {
    min-height: 0;
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #panel-ow-chat .chat-sidebar,
  #panel-ow-chat .chat-main {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
  }

  #panel-ow-chat .chat-sidebar { border-right: 1px solid var(--border); }
  #panel-ow-chat .chat-msg { max-width: 86%; }
  #panel-ow-chat .chat-msgs { padding: 12px; }
  #panel-ow-chat .chat-input-wrap button { min-width: 44px; width: 44px; padding: 0; }
  #panel-ow-chat .chat-input-wrap button span { display: none; }
  #panel-ow-chat .owner-chat-head-avatar { display: none; }
}

/* UI30: wide owner workspace; both desktop bars stay in normal page flow. */
@media (min-width: 761px) {
  body.dash-body .ds.owner-dashboard {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: 16px;
  }

  body.dash-body .owner-dashboard .owner-topbar {
    position: relative;
    top: auto;
    z-index: 20;
    margin-top: 14px;
    margin-bottom: 14px;
  }

  body.dash-body .owner-dashboard .ow-sticky-tabs {
    position: relative;
    top: auto;
    z-index: 20;
    border-color: var(--border);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-theme="dark"] body.dash-body .owner-dashboard .ow-sticky-tabs {
    border-color: var(--border);
    background: var(--card);
  }
}

/* UI31: Google Maps clinic finder. */
#panel-ow-clinics #ow-clinic-map {
  position: relative;
  height: 520px;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg3);
}

#panel-ow-clinics #ow-google-map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg3);
}

#panel-ow-clinics .ow-google-map-bar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 13px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 11px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  color: var(--ink2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

#panel-ow-clinics .ow-google-map-bar > span,
#panel-ow-clinics .ow-google-map-bar > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
}

#panel-ow-clinics .ow-google-map-bar > span i { color: #4285f4; }
#panel-ow-clinics .ow-google-map-bar > a {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
}

#panel-ow-clinics .ow-map-empty { display: none !important; }
#panel-ow-clinics .vet-card.is-map-selected {
  border-color: rgba(26, 111, 245, .42) !important;
  background: var(--blue-ll) !important;
  box-shadow: 0 0 0 2px rgba(26, 111, 245, .08);
}

/* UI31: compact Instagram-inspired VETTA community. */
#panel-ow-community .community-shell {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

#panel-ow-community .community-ig-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#panel-ow-community .community-ig-brand,
#panel-ow-community .community-ig-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#panel-ow-community .community-ig-brand > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
}

#panel-ow-community .community-ig-brand strong,
#panel-ow-community .community-ig-brand small { display: block; }
#panel-ow-community .community-ig-brand strong { color: var(--ink); font-size: 14px; }
#panel-ow-community .community-ig-brand small { margin-top: 2px; color: var(--ink4); font-size: 9.5px; }

#panel-ow-community .community-ig-actions button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg3);
  color: var(--ink3);
  font: inherit;
  cursor: pointer;
}

#panel-ow-community .community-ig-actions button.is-primary {
  width: auto;
  padding-inline: 12px;
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
}

#panel-ow-community .community-app { width: 100% !important; max-width: 680px !important; margin: 0 !important; }
#panel-ow-community .community-card {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
}

#panel-ow-community .community-stories-card { padding: 14px !important; }
#panel-ow-community .community-stories-card .community-card-head { margin-bottom: 10px; }
#panel-ow-community .community-stories-rail { gap: 12px !important; padding: 2px 0 5px !important; }
#panel-ow-community .community-stories-rail .community-story { min-width: 66px !important; max-width: 66px !important; }
#panel-ow-community .community-stories-rail .community-avatar.story,
#panel-ow-community .community-story-add-icon {
  width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
  border-radius: 50% !important;
}

#panel-ow-community .community-story-add-icon {
  display: grid !important;
  place-items: center;
  border: 2px dashed var(--border) !important;
  background: var(--bg3) !important;
  color: var(--blue) !important;
  font-size: 15px;
}

#panel-ow-community .community-story-add-copy > span { display: none !important; }
#panel-ow-community .community-story-add-copy strong { font-size: 10.5px !important; }
#panel-ow-community .community-composer-card { padding: 14px !important; }
#panel-ow-community .community-search-row { min-height: 40px; margin: 10px 0; border-radius: 10px; }
#panel-ow-community .community-composer textarea { min-height: 78px !important; border-radius: 11px !important; }
#panel-ow-community .community-composer-actions { gap: 8px !important; }
#panel-ow-community .community-chip { border-radius: 8px !important; }
#panel-ow-community .community-feed { width: 100% !important; max-width: 680px !important; gap: 12px !important; }
#panel-ow-community .community-post { margin: 0 !important; overflow: hidden !important; }
#panel-ow-community .community-post-head { min-height: 62px; padding: 11px 13px !important; }
#panel-ow-community .community-post-body { padding: 0 13px 11px !important; font-size: 13px !important; }
#panel-ow-community .community-post-media { margin: 0 !important; border-radius: 0 !important; }
#panel-ow-community .community-post-media img {
  width: 100% !important;
  min-height: 0 !important;
  max-height: 680px !important;
  object-fit: cover !important;
}

#panel-ow-community .community-post-actions {
  min-height: 52px;
  gap: 14px !important;
  padding: 9px 13px !important;
  border-top: 1px solid var(--border) !important;
}

#panel-ow-community .community-like-btn,
#panel-ow-community .community-open-comments-btn {
  display: inline-flex !important;
  min-width: 34px;
  align-items: center;
  justify-content: center;
}

#panel-ow-community .community-like-btn i,
#panel-ow-community .community-open-comments-btn i { font-size: 19px !important; }
#panel-ow-community .community-open-profile-btn { display: none !important; }
#panel-ow-community .community-follow-btn { margin-left: auto !important; border-radius: 8px !important; }
#panel-ow-community .community-comments { padding: 0 13px 12px !important; }
#panel-ow-community .community-comment-form { align-items: center; }
#panel-ow-community .community-comment-form .community-outline-btn {
  min-height: 38px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  background: var(--blue-ll) !important;
  color: var(--blue) !important;
}

@media (min-width: 761px) {
  #panel-ow-community .community-shell {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 680px) !important;
    grid-template-areas: "ig-head ig-head" "ig-nav ig-app" !important;
    align-items: start;
    gap: 12px !important;
  }

  #panel-ow-community .community-ig-header { grid-area: ig-head; }
  #panel-ow-community .community-app { grid-area: ig-app; }
  #panel-ow-community .community-mobile-nav {
    grid-area: ig-nav;
    order: initial !important;
    width: 88px !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  #panel-ow-community .community-mobile-nav-inner {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #panel-ow-community .community-mobile-nav-btn {
    min-height: 58px !important;
    padding: 7px 4px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  #panel-ow-community .community-mobile-nav-btn.is-active {
    background: var(--blue-ll) !important;
    color: var(--blue) !important;
  }

  #panel-ow-community .community-mobile-nav-btn.is-create {
    background: var(--grad) !important;
    color: #fff !important;
  }
}

@media (max-width: 760px) {
  #panel-ow-clinics #ow-clinic-map { height: 440px; min-height: 360px; }
  #panel-ow-community .community-shell {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  #panel-ow-community .community-ig-header { order: 0; min-height: 58px; padding: 8px 10px; }
  #panel-ow-community .community-ig-brand small { display: none; }
  #panel-ow-community .community-ig-actions button:not(.is-primary) { display: none; }
  #panel-ow-community .community-ig-actions button.is-primary span { display: none; }
  #panel-ow-community .community-ig-actions button.is-primary { width: 36px; padding: 0; }
  #panel-ow-community .community-mobile-nav {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }

  #panel-ow-community .community-mobile-nav-inner { gap: 4px !important; }
  #panel-ow-community .community-mobile-nav-btn {
    min-height: 50px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
  }

  #panel-ow-community .community-mobile-nav-btn.is-active { background: var(--blue-ll) !important; }
  #panel-ow-community .community-mobile-nav-btn.is-create { background: var(--grad) !important; }
  #panel-ow-community .community-app { order: 2; max-width: none !important; }
  #panel-ow-community .community-stories-card,
  #panel-ow-community .community-composer-card { padding: 12px !important; }
  #panel-ow-community .community-post { border-radius: 13px !important; }
  #panel-ow-community .community-post-actions { flex-wrap: nowrap !important; }
  #panel-ow-community .community-follow-btn { padding: 5px 9px !important; }
  #panel-ow-community .community-composer-actions { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  #panel-ow-community .community-hints { display: none !important; }
}

/* UI41: clearer veterinarian workspace, appointment slots and mobile actions. */
#panel-vet-patients .vet-care-banner {
  display: grid;
  min-height: 176px;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
#panel-vet-patients .vet-care-banner > img {
  width: 100%;
  height: 100%;
  min-height: 176px;
  object-fit: cover;
  object-position: center 42%;
}
#panel-vet-patients .vet-care-banner-copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 22px 26px;
}
#panel-vet-patients .vet-care-banner-copy > span {
  color: var(--blue);
  font-size: 9.5px;
  font-weight: 850;
}
#panel-vet-patients .vet-care-banner-copy h3 {
  margin: 6px 0 5px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}
#panel-vet-patients .vet-care-banner-copy p {
  max-width: 610px;
  margin: 0 0 14px;
  color: var(--ink4);
  font-size: 12px;
  line-height: 1.5;
}
#panel-vet-patients .vet-care-banner-copy .ds-btn-pri { min-height: 38px; }
#panel-vet-patients .vet-grid.is-single { grid-template-columns: 1fr; }
#panel-vet-patients .vet-av { position: relative; }
#panel-vet-patients .vet-av > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 760px) {
  body.has-mobile-nav {
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-mobile-nav .mobile-nav {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    padding: 5px;
    overflow: hidden;
    background: rgba(255,255,255,.98);
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
  }
  [data-theme="dark"] body.has-mobile-nav .mobile-nav {
    background: rgba(22,27,42,.98);
    border-color: rgba(255,255,255,.11);
  }
  body.has-mobile-nav .mobile-nav-inner {
    height: 62px;
    gap: 4px;
  }
  body.has-mobile-nav .mob-nav-btn {
    min-height: 52px;
    gap: 4px;
    margin: 0;
    padding: 4px 2px;
    color: var(--ink3);
    border: 1px solid transparent;
    border-radius: 13px;
  }
  body.has-mobile-nav .mob-nav-ic-wrap {
    width: 32px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg3);
  }
  body.has-mobile-nav .mob-nav-btn .ic {
    color: var(--ink3);
    font-size: 16px;
  }
  body.has-mobile-nav .mob-nav-btn span:last-child {
    color: var(--ink3);
    font-size: 10px;
    font-weight: 750;
  }
  body.has-mobile-nav .mob-nav-btn.active {
    background: var(--blue-ll);
    border-color: rgba(26,111,245,.14);
  }
  body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    color: #fff;
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 5px 11px rgba(26,111,245,.22);
  }
  body.has-mobile-nav .mob-nav-btn.active .ic { color: #fff; }
  body.has-mobile-nav .mob-nav-btn.active span:last-child { color: var(--blue); }
  body.has-mobile-nav .mob-badge { top: -6px; right: -7px; margin: 0; }

  #panel-vet-patients .vet-care-banner {
    min-height: 132px;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  #panel-vet-patients .vet-care-banner > img { min-height: 132px; }
  #panel-vet-patients .vet-care-banner-copy { padding: 13px; }
  #panel-vet-patients .vet-care-banner-copy h3 { margin-top: 4px; font-size: 15px; }
  #panel-vet-patients .vet-care-banner-copy p { display: none; }
  #panel-vet-patients .vet-care-banner-copy .ds-btn-pri {
    min-height: 34px;
    margin-top: 9px;
    padding-inline: 9px;
    font-size: 9px;
  }
}

/* UI43: compact mobile navigation with one clear active destination. */
@media (max-width: 760px) {
  body.has-mobile-nav .mobile-nav {
    padding: 6px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 17px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.16) !important;
  }
  body.has-mobile-nav .mobile-nav-inner {
    height: 58px !important;
    gap: 5px !important;
  }
  body.has-mobile-nav .mob-nav-btn {
    min-width: 0 !important;
    min-height: 48px !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  body.has-mobile-nav .mob-nav-ic-wrap {
    width: 34px !important;
    height: 27px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
  }
  body.has-mobile-nav .mob-nav-btn .ic {
    color: #526174 !important;
    font-size: 16px !important;
  }
  body.has-mobile-nav .mob-nav-btn span:last-child {
    color: #526174 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
  }
  body.has-mobile-nav .mob-nav-btn.active {
    background: var(--grad) !important;
    box-shadow: 0 6px 14px rgba(26,111,245,.24) !important;
  }
  body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    background: rgba(255,255,255,.14) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.has-mobile-nav .mob-nav-btn.active .ic,
  body.has-mobile-nav .mob-nav-btn.active span:last-child {
    color: #fff !important;
  }
  [data-theme="dark"] body.has-mobile-nav .mobile-nav {
    background: rgba(22,27,42,.98) !important;
    border-color: rgba(255,255,255,.12) !important;
  }
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn .ic,
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn span:last-child {
    color: #cbd5e1 !important;
  }
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active .ic,
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active span:last-child {
    color: #fff !important;
  }
}

/* UI45: icon-only mobile navigation. */
@media (max-width: 760px) {
  body.has-mobile-nav .mobile-nav-inner {
    height: 58px !important;
    align-items: center !important;
  }
  body.has-mobile-nav .mob-nav-btn {
    position: relative !important;
    min-height: 50px !important;
    padding: 3px !important;
    place-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.has-mobile-nav .mob-nav-btn > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  body.has-mobile-nav .mob-nav-ic-wrap {
    width: 44px !important;
    height: 42px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
  }
  body.has-mobile-nav .mob-nav-btn .ic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #526174 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  body.has-mobile-nav .mob-nav-btn.active {
    background: transparent !important;
    box-shadow: none !important;
  }
  body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    background: var(--grad) !important;
    border-color: transparent !important;
    box-shadow: 0 7px 15px rgba(26,111,245,.28) !important;
  }
  body.has-mobile-nav .mob-nav-btn.active .ic { color: #fff !important; }
  [data-theme="dark"] body.has-mobile-nav .mob-nav-ic-wrap {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    background: var(--grad) !important;
    border-color: transparent !important;
  }
}

/* UI46: borderless, optically consistent mobile navigation icons. */
@media (max-width: 760px) {
  body.has-mobile-nav .mobile-nav-inner {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }
  body.has-mobile-nav .mob-nav-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.has-mobile-nav .mob-nav-ic-wrap,
  body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap,
  [data-theme="dark"] body.has-mobile-nav .mob-nav-ic-wrap,
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.has-mobile-nav .mob-nav-btn .ic,
  body.has-mobile-nav .mob-nav-btn .ic i {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    font-size: 21px !important;
    line-height: 24px !important;
    text-align: center !important;
  }
  body.has-mobile-nav .mob-nav-btn .ic {
    color: #64748b !important;
    filter: none !important;
    transform: none !important;
    transition: color .18s ease, filter .18s ease, transform .18s ease !important;
  }
  body.has-mobile-nav .mob-nav-btn.active .ic {
    color: #168cf2 !important;
    filter: none !important;
    transform: none !important;
  }
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn .ic {
    color: #94a3b8 !important;
  }
[data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active .ic {
    color: #38bdf8 !important;
    filter: none !important;
  }
}

/* UI50: compact expanding Super Admin navigation on phones. */
@media (max-width: 760px) {
  body.dash-body .admin-dashboard > .ds-tabs {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 10px 0 14px !important;
    padding: 5px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: flex-basis .2s ease, width .2s ease, background .2s ease, color .2s ease !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab.active {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 6px !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab:focus {
    outline: none !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab:focus-visible {
    outline: 2px solid rgba(26, 111, 245, .38) !important;
    outline-offset: -2px !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab i {
    flex: 0 0 auto;
    width: 17px !important;
    font-size: 15px !important;
    text-align: center !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab-label {
    display: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-tab.active .ds-tab-label {
    display: inline !important;
  }

  body.dash-body .admin-dashboard > .ds-tabs .ds-cnt {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 8px !important;
    line-height: 16px !important;
  }
}

/* UI51: one clear mobile navigation for the veterinarian panel. */
@media (max-width: 760px) {
  body.vet-panel.has-mobile-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.vet-panel .ds > .ds-tabs {
    display: none !important;
  }

  body.vet-panel.has-mobile-nav .mobile-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 14px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body.vet-panel.has-mobile-nav .mobile-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: initial !important;
    width: 100% !important;
    height: 56px !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  body.vet-panel.has-mobile-nav .mob-nav-btn {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.vet-panel.has-mobile-nav .mob-nav-btn:focus,
  body.vet-panel.has-mobile-nav .mob-nav-btn:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.vet-panel.has-mobile-nav .mob-nav-ic-wrap,
  body.vet-panel.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    width: 48px !important;
    height: 48px !important;
    margin: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.vet-panel.has-mobile-nav .mob-nav-btn .ic,
  body.vet-panel.has-mobile-nav .mob-nav-btn .ic i {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    color: #64748b !important;
    font-size: 22px !important;
    line-height: 26px !important;
    filter: none !important;
    transform: none !important;
  }

  body.vet-panel.has-mobile-nav .mob-nav-btn.active .ic,
  body.vet-panel.has-mobile-nav .mob-nav-btn.active .ic i {
    color: #168cf2 !important;
    filter: none !important;
    transform: none !important;
  }

  body.vet-panel.has-mobile-nav .mob-nav-btn.active::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 1px;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--grad);
    transform: translateX(50%);
  }

  body.vet-panel.has-mobile-nav .mob-badge {
    top: 4px !important;
    right: 3px !important;
  }

  body.vet-panel.has-mobile-nav .notif-fab {
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-theme="dark"] body.vet-panel.has-mobile-nav .mobile-nav {
    background: rgba(17, 24, 39, .94) !important;
    border-top-color: rgba(255, 255, 255, .1) !important;
  }
}

/* UI54: one resilient VETTA brand lockup across every dashboard role. */
body.dash-body .panel-vetta-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 112px;
  color: var(--blue);
  text-decoration: none;
}

body.dash-body .panel-vetta-brand-mark,
body.dash-body .owner-brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: visible;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.dash-body .panel-vetta-brand-mark img,
body.dash-body .owner-brand-mark img {
  position: static;
  display: block;
  width: 42px;
  height: 42px;
  max-width: 100%;
  object-fit: contain;
  transform: none;
}

body.dash-body .ow-mobile-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.dash-body .panel-vetta-brand strong,
body.dash-body .owner-brand strong {
  color: var(--blue);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 2px;
  line-height: 1;
}

@media (max-width: 760px) {
  body.dash-body .panel-vetta-brand,
  body.dash-body .owner-brand {
    gap: 7px;
    min-width: 92px;
  }

  body.dash-body .panel-vetta-brand-mark,
  body.dash-body .owner-brand-mark {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  body.dash-body .panel-vetta-brand-mark img,
  body.dash-body .owner-brand-mark img {
    width: 36px;
    height: 36px;
  }

  body.dash-body .panel-vetta-brand strong,
  body.dash-body .owner-brand strong {
    font-size: 13px;
    letter-spacing: 1.5px;
  }
}

/* UI56: readable Super Admin type and a stable clinic scheduling workspace. */
body.dash-body .admin-dashboard .ds-top-sub {
  font-size: 11.5px;
  line-height: 1.35;
}

body.dash-body .admin-dashboard > .dash-hero .dash-hero-kicker {
  font-size: 11px;
}

body.dash-body .admin-dashboard > .dash-hero p {
  font-size: 13.5px;
  line-height: 1.55;
}

body.dash-body .admin-dashboard .adm-hero-pill span {
  font-size: 11px;
  line-height: 1.4;
}

body.dash-body .admin-dashboard > .dash-hero .dash-hero-side small {
  font-size: 11px;
  line-height: 1.5;
}

body.dash-body .admin-dashboard > .dash-hero .dash-hero-btn {
  min-height: 38px;
  font-size: 10.5px;
  line-height: 1.25;
}

body.dash-body .admin-dashboard > .adm-stats-6 .ds-stat-l {
  font-size: 10.5px;
  line-height: 1.25;
}

body.dash-body .admin-dashboard > .ds-tabs .ds-tab {
  font-size: 12px;
}

body.dash-body .admin-dashboard .adm-admin-section-title p {
  font-size: 11.5px;
  line-height: 1.4;
}

body.dash-body .admin-dashboard .adm-admin-section-metrics span {
  min-height: 34px;
  font-size: 10.5px;
}

body.dash-body .admin-dashboard .adm-batches-count,
body.dash-body .admin-dashboard .adm-batch-note {
  font-size: 11px;
}

body.dash-body .admin-dashboard .adm-batch-meta {
  font-size: 10.5px;
  line-height: 1.4;
}

body.dash-body .admin-dashboard .adm-batch-actions .ds-btn-sm {
  font-size: 10.5px;
}

#panel-cl-appointments .clinic-appointments-layout {
  grid-template-columns: minmax(520px, 1.08fr) minmax(430px, .92fr);
  gap: 18px;
}

#panel-cl-appointments .clinic-appointments-layout > .ds-card,
#panel-cl-appointments .clinic-appointments-layout > div > .ds-card {
  border-radius: 12px;
}

#panel-cl-appointments .clinic-appointments-layout > .ds-card {
  padding: 18px;
}

#panel-cl-appointments #cl-week-days {
  gap: 6px !important;
  margin-bottom: 16px !important;
}

#panel-cl-appointments .cl-day-btn {
  min-height: 66px;
  padding: 7px 4px;
  border-color: #d9e1ec;
  border-radius: 8px;
  background: #fff;
}

#panel-cl-appointments .cl-day-name,
#panel-cl-appointments .cl-day-mon {
  font-size: 9.5px;
}

#panel-cl-appointments .cl-day-num {
  font-size: 17px;
}

#panel-cl-appointments #cl-hours-grid {
  gap: 8px !important;
}

#panel-cl-appointments .cl-slot-btn {
  min-height: 58px;
  padding: 8px 6px;
  border-width: 1px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .035);
}

#panel-cl-appointments .cl-slot-btn strong {
  font-size: 13px;
  line-height: 1.1;
}

#panel-cl-appointments .cl-slot-btn span {
  margin-top: 4px;
  font-size: 9.5px;
  line-height: 1.2;
}

#panel-cl-appointments #cl-clear-slots {
  min-height: 40px;
  font-size: 11px !important;
}

#panel-cl-appointments #cl-pending-list > div {
  padding: 12px 14px !important;
}

#panel-cl-appointments .adm-table th {
  font-size: 9.5px;
}

#panel-cl-appointments .adm-table td {
  font-size: 11px;
}

#panel-cl-profile .clinic-hours-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

#panel-cl-profile .clinic-hours-row {
  grid-template-columns: minmax(130px, .55fr) minmax(130px, auto) minmax(250px, 1fr);
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 9px;
}

#panel-cl-profile .clinic-hours-day strong {
  font-size: 13px;
}

#panel-cl-profile .clinic-hours-day span,
#panel-cl-profile .clinic-hours-switch {
  font-size: 10.5px;
}

#panel-cl-profile .clinic-hours-times span {
  font-size: 10px;
}

#panel-cl-profile .clinic-hours-times .ds-fi {
  height: 42px;
  font-size: 12px;
}

#panel-cl-profile .clinic-schedule-footer {
  font-size: 11px;
}

@media (max-width: 1100px) {
  #panel-cl-appointments .clinic-appointments-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.dash-body .admin-dashboard > .dash-hero p {
    font-size: 12px;
  }

  body.dash-body .admin-dashboard .adm-hero-pill span {
    font-size: 10px;
  }

  body.dash-body .admin-dashboard > .dash-hero .dash-hero-btn {
    min-height: 40px;
    font-size: 10px;
  }

  body.dash-body .admin-dashboard > .adm-stats-6 .ds-stat-l {
    font-size: 9.5px;
  }

  #panel-cl-appointments .clinic-appointments-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #panel-cl-appointments .clinic-appointments-layout > .ds-card {
    padding: 13px;
  }

  #panel-cl-appointments #cl-week-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(46px, 1fr)) !important;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  #panel-cl-appointments .cl-day-btn {
    min-width: 46px;
    min-height: 60px;
    scroll-snap-align: start;
  }

  #panel-cl-appointments #cl-hours-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #panel-cl-appointments .cl-slot-btn {
    min-height: 54px;
  }

  #panel-cl-appointments .cl-slot-btn strong {
    font-size: 12px;
  }

  #panel-cl-profile .clinic-hours-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #panel-cl-profile .clinic-hours-times {
    grid-column: 1 / -1;
  }
}

/* UI57: doctor-style mobile dock for every operational panel except owners. */
@media (max-width: 760px) {
  body.clinic-panel.has-mobile-nav,
  body.admin-panel.has-mobile-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.clinic-panel .ds > .ds-tabs,
  body.admin-panel .ds > .ds-tabs {
    display: none !important;
  }

  body.clinic-panel.has-mobile-nav .mobile-nav,
  body.admin-panel.has-mobile-nav .mobile-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 14px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body.clinic-panel.has-mobile-nav .mobile-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: initial !important;
    width: 100% !important;
    height: 56px !important;
    gap: 4px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.admin-panel.has-mobile-nav .mobile-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: initial !important;
    width: 100% !important;
    height: 56px !important;
    gap: 4px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-btn,
  body.admin-panel.has-mobile-nav .mob-nav-btn {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-btn:focus,
  body.clinic-panel.has-mobile-nav .mob-nav-btn:focus-visible,
  body.admin-panel.has-mobile-nav .mob-nav-btn:focus,
  body.admin-panel.has-mobile-nav .mob-nav-btn:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-ic-wrap,
  body.clinic-panel.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap,
  body.admin-panel.has-mobile-nav .mob-nav-ic-wrap,
  body.admin-panel.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    margin: auto !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    contain: none !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-btn .ic,
  body.clinic-panel.has-mobile-nav .mob-nav-btn .ic i,
  body.clinic-panel.has-mobile-nav .mob-nav-btn .ic i::before,
  body.admin-panel.has-mobile-nav .mob-nav-btn .ic,
  body.admin-panel.has-mobile-nav .mob-nav-btn .ic i,
  body.admin-panel.has-mobile-nav .mob-nav-btn .ic i::before {
    display: grid !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    place-items: center !important;
    color: #64748b !important;
    font-size: 22px !important;
    line-height: 26px !important;
    filter: none !important;
    transform: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    contain: none !important;
    text-indent: 0 !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-btn.active .ic,
  body.clinic-panel.has-mobile-nav .mob-nav-btn.active .ic i,
  body.admin-panel.has-mobile-nav .mob-nav-btn.active .ic,
  body.admin-panel.has-mobile-nav .mob-nav-btn.active .ic i {
    color: #168cf2 !important;
    filter: none !important;
    transform: none !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-btn > span:last-child,
  body.admin-panel.has-mobile-nav .mob-nav-btn > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.clinic-panel.has-mobile-nav .mob-nav-btn.active::after,
  body.admin-panel.has-mobile-nav .mob-nav-btn.active::after {
    position: absolute;
    right: 50%;
    bottom: 1px;
    width: 22px;
    height: 3px;
    content: "";
    background: var(--grad);
    border-radius: 999px;
    transform: translateX(50%);
  }

  body.clinic-panel.has-mobile-nav .mob-badge,
  body.admin-panel.has-mobile-nav .mob-badge {
    top: 4px !important;
    right: 2px !important;
  }

  body.clinic-panel.has-mobile-nav .notif-fab,
  body.admin-panel.has-mobile-nav .notif-fab {
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-theme="dark"] body.clinic-panel.has-mobile-nav .mobile-nav,
  [data-theme="dark"] body.admin-panel.has-mobile-nav .mobile-nav {
    background: rgba(17, 24, 39, .94) !important;
    border-top-color: rgba(255, 255, 255, .1) !important;
  }
}

/* UI58: balanced owner-to-clinic chat and compact attachment control. */
#panel-ow-chat .owner-chat-wrap {
  height: clamp(500px, calc(100dvh - 280px), 590px);
  min-height: 500px;
}

#panel-ow-chat .chat-msgs {
  min-height: 0;
  overscroll-behavior: contain;
}

#panel-ow-chat .chat-msg {
  flex: 0 0 auto;
  margin: 0;
}

#panel-ow-chat .chat-input-wrap {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

#panel-ow-chat .clinic-chat-file-input,
#panel-ow-chat .vetta-file-picker:has(.clinic-chat-file-input) {
  display: none !important;
}

#panel-ow-chat .clinic-chat-compose-main,
#panel-ow-chat .clinic-chat-compose-main > input {
  width: 100%;
  min-width: 0;
}

#panel-ow-chat .chat-input-wrap > .ds-btn-pri {
  width: auto;
  min-width: 108px;
  padding-inline: 16px;
}

@media (max-width: 760px) {
  #panel-ow-chat .owner-chat-wrap {
    height: auto;
    min-height: 0;
  }

  #panel-ow-chat .owner-chat-wrap.has-active-chat .chat-input-wrap {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  }

  #panel-ow-chat .chat-input-wrap > .ds-btn-pri {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
  }
}

/* UI59: doctor-style mobile dock for the owner panel outside Community mode. */
@media (max-width: 760px) {
  body.owner-panel.has-mobile-nav:not(.community-mode) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 14px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mobile-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: initial !important;
    width: 100% !important;
    height: 56px !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn:focus,
  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-ic-wrap,
  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    margin: auto !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn .ic,
  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn .ic i {
    display: grid !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    place-items: center !important;
    color: #64748b !important;
    font-size: 22px !important;
    line-height: 26px !important;
    filter: none !important;
    transform: none !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn.active .ic,
  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn.active .ic i {
    color: #168cf2 !important;
    filter: none !important;
    transform: none !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-nav-btn.active::after {
    position: absolute;
    right: 50%;
    bottom: 1px;
    width: 22px;
    height: 3px;
    content: "";
    background: var(--grad);
    border-radius: 999px;
    transform: translateX(50%);
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav .mob-badge {
    top: 4px !important;
    right: 2px !important;
  }

  body.owner-panel.has-mobile-nav:not(.community-mode) .notif-fab {
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-theme="dark"] body.owner-panel.has-mobile-nav:not(.community-mode) > .mobile-nav {
    background: rgba(17, 24, 39, .94) !important;
    border-top-color: rgba(255, 255, 255, .1) !important;
  }
}

@media (max-width: 760px) {
  body.clinic-panel #panel-cl-patients div.clinic-patient-grid#pat-table {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* UI114: premium checkout dialog */
#modal-stripe-preview {
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#modal-stripe-preview .payment-modal {
  width: min(440px, 100%);
  max-width: 440px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .24);
}

#modal-stripe-preview .modal-head {
  min-height: 72px;
  padding: 15px 17px;
  border-bottom-color: rgba(148, 163, 184, .18);
}

#modal-stripe-preview .payment-modal-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

#modal-stripe-preview .payment-modal-heading-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--blue);
  background: var(--blue-ll);
  border-radius: 10px;
}

#modal-stripe-preview .payment-modal-heading h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

#modal-stripe-preview .payment-modal-heading p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ink4);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-stripe-preview .modal-x {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

#modal-stripe-preview .payment-modal-body {
  display: grid;
  gap: 12px;
  padding: 17px;
}

#modal-stripe-preview .payment-order-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
}

#modal-stripe-preview .payment-plan-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  background: var(--grad);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

#modal-stripe-preview .payment-plan-copy {
  min-width: 0;
}

#modal-stripe-preview .payment-plan-copy > span,
#modal-stripe-preview .payment-total > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink4);
  font-size: 8px;
  font-weight: 900;
}

#modal-stripe-preview .payment-plan-copy h3 {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal-stripe-preview .payment-plan-copy p {
  margin: 3px 0 0;
  color: var(--ink4);
  font-size: 10.5px;
}

#modal-stripe-preview .payment-total {
  min-width: 88px;
  text-align: right;
}

#modal-stripe-preview .payment-total strong {
  display: block;
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

#modal-stripe-preview .payment-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#modal-stripe-preview .payment-benefits span {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  color: var(--ink3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}

#modal-stripe-preview .payment-benefits i {
  color: var(--blue);
}

#modal-stripe-preview .payment-primary-btn,
#modal-stripe-preview .payment-secondary-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  font: inherit;
  cursor: pointer;
}

#modal-stripe-preview .payment-primary-btn {
  min-height: 50px;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
  background: var(--grad);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .2);
  font-size: 12px;
  font-weight: 850;
}

#modal-stripe-preview .payment-primary-btn span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#modal-stripe-preview .payment-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(37, 99, 235, .24);
}

#modal-stripe-preview .payment-secondary-btn {
  min-height: 38px;
  color: var(--ink3);
  background: transparent;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
}

#modal-stripe-preview .payment-secondary-btn:hover {
  background: var(--bg3);
  color: var(--ink);
}

#modal-stripe-preview .payment-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 2px;
  color: var(--ink4);
  font-size: 9.5px;
}

#modal-stripe-preview .payment-trust i {
  color: var(--green);
}

#modal-stripe-preview .payment-trust strong {
  margin-left: 3px;
  color: var(--ink3);
  font-weight: 850;
}

@media (max-width: 520px) {
  #modal-stripe-preview {
    align-items: flex-end;
    padding: 10px;
  }

  #modal-stripe-preview .payment-modal {
    border-radius: 16px;
  }

  #modal-stripe-preview .payment-modal-heading p {
    white-space: normal;
  }

  #modal-stripe-preview .payment-order-summary {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  #modal-stripe-preview .payment-plan-icon {
    width: 44px;
    height: 44px;
  }

  #modal-stripe-preview .payment-total {
    grid-column: 2;
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
  }

  #modal-stripe-preview .payment-total > span {
    margin: 0;
  }

  #modal-stripe-preview .payment-benefits {
    grid-template-columns: 1fr;
  }
}