@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700;800;900&display=swap');

:root {
  --ink: #122023;
  --muted: #667985;
  --line: rgba(31, 53, 57, .12);
  --paper: rgba(255, 255, 255, .82);
  --paper-strong: rgba(255, 255, 255, .94);
  --surface: #f6faf8;
  --surface-2: #edf6f4;
  --teal: #16a59b;
  --teal-dark: #0c6f6d;
  --blue: #2d82b7;
  --coral: #ef7d67;
  --amber: #e5a93f;
  --shadow-soft: 0 18px 44px rgba(22, 45, 50, .09);
  --shadow-hover: 0 26px 58px rgba(22, 45, 50, .16);
  --radius: 1.15rem;
  --radius-sm: .82rem;
}

* {
  box-sizing: border-box;
  font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(120deg, rgba(22,165,155,.13), transparent 28rem),
    linear-gradient(245deg, rgba(239,125,103,.12), transparent 24rem),
    linear-gradient(180deg, #fbf8f1 0%, #f4faf8 42%, #eef7fb 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(90deg, rgba(18,32,35,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18,32,35,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 82%);
}

a {
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.app-shell {
  color: var(--ink);
  background:
    linear-gradient(130deg, rgba(22,165,155,.12), transparent 24rem),
    linear-gradient(260deg, rgba(45,130,183,.12), transparent 24rem),
    transparent;
}

.app-sidebar {
  border-left: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: -18px 0 44px rgba(18,32,35,.05);
}

.brand-mark {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.3rem;
}


.logo-home-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.logo-home-link:hover,
.logo-home-link:focus-visible,
.site-brand:hover,
.site-brand:focus-visible,
.offer-logo-link:hover,
.offer-logo-link:focus-visible {
  opacity: .92;
  transform: translateY(-1px);
}

.offer-logo-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.brand-logo,
.site-brand,
.auth-logo,
.profile-logo,
.public-hero-logo {
  background: white;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--shadow-soft);
}

.brand-logo {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  object-fit: cover;
  object-position: left center;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  width: 10.25rem;
  height: 3.35rem;
  overflow: hidden;
  border-radius: 1rem;
}

.site-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scale(1.34);
}

.auth-logo {
  width: 13rem;
  height: 5rem;
  object-fit: cover;
  object-position: left center;
  border-radius: 1rem;
  margin-inline: auto;
}

.profile-logo {
  width: 10rem;
  height: 4rem;
  object-fit: cover;
  object-position: left center;
  border-radius: 1rem;
}

.public-hero-logo {
  width: min(18.5rem, 80vw);
  height: 6.65rem;
  object-fit: cover;
  object-position: left center;
  border-radius: 1.25rem;
  margin-bottom: 1rem;
}

.muted-text,
.label {
  color: var(--muted);
}

.user-chip {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  padding: .85rem;
  box-shadow: 0 10px 28px rgba(18,32,35,.06);
}

.card,
.rated-card,
.specialty-band,
.doctor-qr-card,
.visit-bundle,
.visit-diagnosis,
.quick-create-panel,
.modal-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.76);
  background: var(--paper);
  backdrop-filter: blur(18px) saturate(142%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.card::before,
.rated-card::before,
.specialty-band::before,
.doctor-qr-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(22,165,155,.45), rgba(45,130,183,.18), rgba(239,125,103,.28));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .58;
}

.card,
.rated-card,
.specialty-band,
.doctor-card,
.doctor-qr-card {
  animation: rise-in .42s ease both;
}

.card:hover,
.rated-card:hover,
.specialty-band:hover,
.doctor-card:hover,
.specialty-doctor:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.input {
  width: 100%;
  border: 1px solid rgba(31,53,57,.16);
  background: rgba(255,255,255,.82);
  border-radius: .88rem;
  padding: .76rem .95rem;
  outline: none;
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.input:focus {
  border-color: rgba(22,165,155,.78);
  box-shadow: 0 0 0 4px rgba(22,165,155,.13);
  background: white;
}

.smart-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.smart-select {
  position: relative;
  width: 100%;
}

.smart-select-toggle {
  min-height: 3.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-align: inherit;
  cursor: pointer;
}

.smart-select-toggle:disabled {
  cursor: not-allowed;
  opacity: .66;
}

.smart-select-value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.smart-select-arrow {
  color: var(--teal-dark);
  font-size: 1rem;
  line-height: 1;
  transition: transform .16s ease;
}

.smart-select.open .smart-select-arrow {
  transform: rotate(180deg);
}

.smart-select-panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + .35rem);
  z-index: 80;
  border: 1px solid rgba(31,53,57,.14);
  border-radius: 1rem;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 42px rgba(18,32,35,.16);
  padding: .5rem;
}

.smart-select-search {
  margin-bottom: .42rem;
  padding-block: .58rem;
  font-size: .86rem;
}

.smart-select-list {
  max-height: 15rem;
  overflow-y: auto;
  display: grid;
  gap: .25rem;
  padding-inline-end: .12rem;
}

.smart-select-option {
  width: 100%;
  border: 0;
  border-radius: .78rem;
  background: transparent;
  color: var(--ink);
  padding: .58rem .72rem;
  text-align: inherit;
  cursor: pointer;
  font-weight: 700;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.smart-select-option:hover,
.smart-select-option:focus,
.smart-select-option.selected {
  outline: none;
  background: rgba(22,165,155,.12);
  color: var(--teal-dark);
}

.smart-select-option.disabled,
.smart-select-option:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.smart-select-empty {
  padding: .75rem;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.select-search {
  margin-bottom: .38rem;
  padding-block: .56rem;
  font-size: .84rem;
  background: rgba(255,255,255,.68);
}

.label {
  display: block;
  font-size: .83rem;
  margin-bottom: .38rem;
  font-weight: 800;
}

.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .68rem 1rem;
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid rgba(31,53,57,.14);
  white-space: nowrap;
  min-height: 2.65rem;
}

.btn {
  background: rgba(255,255,255,.72);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(18,32,35,.05);
}

.btn:hover {
  background: white;
  border-color: rgba(22,165,155,.38);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(18,32,35,.11);
}

.btn-primary {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue) 62%, var(--coral));
  box-shadow: 0 16px 34px rgba(22,165,155,.24);
  background-size: 150% 150%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 20px 44px rgba(45,130,183,.25);
}

.btn-disabled,
.btn-primary:disabled,
.btn:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .68rem 1rem;
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid rgba(31,53,57,.08);
  min-height: 2.65rem;
  color: rgba(31,53,57,.45);
  background: rgba(226,232,240,.75);
  box-shadow: none;
  cursor: not-allowed;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem .82rem;
  border-radius: .92rem;
  color: #385057;
  overflow: hidden;
}

.nav-link::before {
  content: "";
  position: absolute;
  inset-block: .55rem;
  right: .18rem;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .16s ease, transform .16s ease;
}

.nav-link:hover {
  background: rgba(255,255,255,.68);
  color: var(--teal-dark);
  transform: translateX(-2px);
}

.nav-link.active {
  background: linear-gradient(135deg, rgba(22,165,155,.94), rgba(45,130,183,.92));
  color: white;
  box-shadow: 0 16px 34px rgba(22,165,155,.22);
}

.nav-link.active::before {
  background: rgba(255,255,255,.9);
}

.nav-group {
  border: 1px solid transparent;
  border-radius: 1rem;
}

.nav-group[open] {
  border-color: rgba(31,53,57,.08);
  background: rgba(255,255,255,.42);
  padding: .25rem;
}

.nav-group summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-weight: 900;
  font-size: .78rem;
  padding: .68rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  content: "v";
  font-size: .72rem;
  transition: transform .15s ease;
}

.nav-group[open] summary::after {
  transform: rotate(180deg);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}

.table th {
  text-align: right;
  color: var(--muted);
  font-size: .78rem;
  background: rgba(255,255,255,.58);
  padding: .9rem;
  border-bottom: 1px solid rgba(31,53,57,.1);
  white-space: nowrap;
}

.table td {
  padding: .9rem;
  border-bottom: 1px solid rgba(31,53,57,.07);
  vertical-align: middle;
}

.table tr {
  transition: background .16s ease, transform .16s ease;
}

.table tr:hover td {
  background: rgba(255,255,255,.58);
}

.date-value {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  white-space: nowrap;
}

.link-action,
.link-danger {
  margin-inline-end: .7rem;
  font-weight: 900;
  font-size: .85rem;
}

.link-action {
  color: #167eaa;
}

.link-action:hover {
  color: var(--teal-dark);
}

.link-danger {
  color: #d84c58;
}

.permission-help,
.page-visibility-card,
.quick-create-card,
.price-preview,
.info-tile {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  border-radius: var(--radius-sm);
}

.permission-help {
  padding: .9rem;
  display: grid;
  gap: .25rem;
}

.permission-help span {
  color: var(--muted);
}

.page-visibility-card {
  padding: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.page-visibility-card span {
  font-weight: 800;
}

.page-visibility-card b {
  font-size: .78rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .55rem;
  white-space: nowrap;
}

.quick-create-card {
  border-style: dashed;
  padding: .8rem;
}

.quick-create-card summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink);
}

.price-preview,
.info-tile {
  min-height: 2.85rem;
  padding: .72rem .88rem;
  display: grid;
  align-content: center;
  color: var(--ink);
  font-weight: 900;
}

.info-tile span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.info-tile b {
  font-size: .9rem;
  line-height: 1.5;
}

.doctor-card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.rated-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

.rated-card {
  padding: 1.05rem;
}

.rated-card h3,
.specialty-head h3,
.doctor-qr-card b {
  color: var(--ink);
  font-weight: 900;
}

.rated-card h3 {
  font-size: 1rem;
}

.rated-card > div > span,
.specialty-head span,
.doctor-qr-card span,
.doctor-qr-card p {
  color: var(--muted);
}

.rated-card > div > span {
  font-size: .78rem;
  font-weight: 800;
}

.rated-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .78rem;
  border: 1px solid rgba(31,53,57,.08);
  border-radius: .95rem;
  background: rgba(255,255,255,.55);
  color: var(--ink);
}

.rated-row:hover {
  background: white;
  border-color: rgba(22,165,155,.34);
  transform: translateY(-1px);
}

.top-rotator {
  overflow: hidden;
}

.top-rotator-window {
  position: relative;
  min-height: 7rem;
  margin-top: .2rem;
  overflow: hidden;
}

.top-rated-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.985);
  transition: opacity .42s ease, transform .42s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.top-rated-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.rated-row .top-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  border-radius: 999px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 10px 22px rgba(22,165,155,.18);
}

.top-rated-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.entity-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.entity-avatar-wrap i {
  position: absolute;
  bottom: -.28rem;
  left: -.28rem;
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: white;
  font-style: normal;
  font-size: .72rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border: 2px solid white;
  box-shadow: 0 10px 22px rgba(22,165,155,.18);
}

.entity-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  object-fit: cover;
  border: 1px solid rgba(31,53,57,.1);
  background: white;
  box-shadow: 0 12px 24px rgba(18,32,35,.08);
}

.entity-avatar-lg {
  width: 3.7rem;
  height: 3.7rem;
}

.entity-avatar-fallback,
.profile-photo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.top-rotator-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-top: .85rem;
}

.top-rotator-dots span {
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: rgba(31,53,57,.18);
  cursor: pointer;
  transition: width .25s ease, background .25s ease, opacity .25s ease;
}

.top-rotator-dots span.active {
  width: 1.45rem;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.rated-row span {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.rated-row .entity-avatar-wrap {
  display: inline-flex;
  width: 3.2rem;
  height: 3.2rem;
  flex-basis: 3.2rem;
  min-width: auto;
  gap: 0;
}

.rated-row .entity-avatar {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  max-width: 3rem;
  overflow: hidden;
}

.rated-row b,
.specialty-doctor strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rated-row small,
.specialty-doctor small,
.specialty-doctor span {
  color: var(--muted);
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rated-row em,
.specialty-doctor em {
  font-style: normal;
  border: 1px solid rgba(22,165,155,.2);
  background: rgba(22,165,155,.1);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: .25rem .58rem;
  font-size: .76rem;
  font-weight: 900;
  white-space: nowrap;
}

.specialty-band {
  padding: 1.05rem;
}

.specialty-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.specialty-head h3 {
  font-size: 1.08rem;
}

.specialty-head span {
  font-size: .82rem;
  font-weight: 800;
}

.specialty-strip {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: .78rem;
}

.specialty-doctor {
  display: grid;
  gap: .24rem;
  min-width: 0;
  color: var(--ink);
  border: 1px solid rgba(31,53,57,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.6);
  padding: .9rem;
}

.specialty-doctor:hover {
  border-color: rgba(22,165,155,.55);
  background: white;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

.offer-card {
  overflow: hidden;
  border: 1px solid rgba(31,53,57,.09);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.offer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(22,165,155,.35);
  box-shadow: var(--shadow-hover);
}

.offer-art {
  min-height: 9rem;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 18% 18%, rgba(22,165,155,.22), transparent 32%),
    linear-gradient(135deg, rgba(241,250,249,.96), rgba(235,245,255,.96));
}

.offer-art img {
  width: 6.5rem;
  max-height: 5.5rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(18,32,35,.12));
}

.offer-art span {
  position: absolute;
  top: .85rem;
  right: .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--ink);
  border: 1px solid rgba(31,53,57,.08);
  padding: .28rem .7rem;
  font-size: .75rem;
  font-weight: 900;
}

.offer-body {
  display: grid;
  gap: .55rem;
  padding: 1rem;
}

.offer-body h3 {
  font-size: 1rem;
  font-weight: 900;
}

.offer-body p {
  color: var(--muted);
  font-size: .86rem;
}

.doctor-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.doctor-profile-side {
  display: grid;
  justify-items: start;
  gap: .9rem;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-photo {
  width: 6.25rem;
  height: 6.25rem;
  flex: 0 0 auto;
  border-radius: 1.35rem;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.78);
  background: white;
  box-shadow: var(--shadow-soft);
}

.provider-profile-logo {
  object-fit: contain;
  padding: .5rem;
}

.doctor-qr-card {
  width: min(100%, 17rem);
  padding: 1.05rem;
  display: grid;
  gap: .75rem;
}

.doctor-qr-card div {
  display: grid;
  gap: .12rem;
}

.doctor-qr-card b {
  font-size: 1rem;
}

.doctor-qr-card span,
.doctor-qr-card p {
  font-size: .82rem;
  line-height: 1.7;
}

.doctor-qr-card img {
  width: 11.25rem;
  height: 11.25rem;
  border-radius: .92rem;
  border: 1px solid var(--line);
  background: white;
  padding: .5rem;
  justify-self: center;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.modal-layer.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,32,35,.42);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(44rem, 100%);
  max-height: min(42rem, calc(100vh - 2rem));
  overflow-y: auto;
  padding: 1.15rem;
}

.modal-options {
  max-height: 22rem;
  overflow-y: auto;
  padding-inline-end: .2rem;
}

.visit-bundle {
  padding: 1rem;
}

.visit-diagnosis {
  padding: 1rem;
  display: grid;
  gap: .35rem;
}

.visit-diagnosis span,
.permission-cell span {
  color: var(--muted);
  font-weight: 800;
  font-size: .8rem;
}

.visit-diagnosis p {
  color: var(--ink);
  line-height: 1.8;
}

.permission-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(31,53,57,.1);
  background: rgba(255,255,255,.5);
}

.permission-count {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .8rem;
  color: #4b6670;
  background: white;
  white-space: nowrap;
}

.permission-table th:first-child,
.permission-table td:first-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: inherit;
}

.permission-table th:first-child {
  z-index: 2;
}

.permission-cell {
  min-width: 10.5rem;
  display: grid;
  gap: .45rem;
}

.permission-select {
  min-width: 9.5rem;
  padding-block: .45rem;
  font-size: .82rem;
}

.permission-hidden {
  display: none !important;
}

.live-count {
  position: absolute;
  top: -.45rem;
  left: -.35rem;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--coral);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  padding-inline: .25rem;
  border: 2px solid white;
}

.live-toast-stack {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 80;
  display: grid;
  gap: .65rem;
  width: min(24rem, calc(100vw - 2rem));
}

.live-toast {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 1rem;
  box-shadow: var(--shadow-hover);
  padding: .95rem;
  display: grid;
  gap: .35rem;
  transform: translateY(.6rem) scale(.98);
  opacity: 0;
  animation: toast-in .2s ease forwards;
  backdrop-filter: blur(18px);
}

.live-toast strong {
  color: var(--ink);
  font-size: .95rem;
}

.live-toast p {
  color: #4b6670;
  font-size: .85rem;
  line-height: 1.6;
}

.live-toast a {
  color: #167eaa;
  font-weight: 900;
  font-size: .84rem;
}

.live-toast.fade-out {
  animation: toast-out .18s ease forwards;
}

.live-syncing {
  opacity: .72;
  transition: opacity .15s ease;
}

.live-menu-wrap {
  position: relative;
}

.live-icon-button {
  min-width: 6.5rem;
}

.live-dropdown {
  position: absolute;
  top: calc(100% + .65rem);
  left: 0;
  width: min(23rem, calc(100vw - 1.25rem));
  max-height: 25rem;
  overflow: hidden;
  z-index: 70;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-hover);
  backdrop-filter: blur(20px);
  animation: menu-in .16s ease both;
}

.live-dropdown-head {
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(31,53,57,.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.live-dropdown-list {
  max-height: 20rem;
  overflow-y: auto;
  display: grid;
}

.live-menu-item {
  display: block;
  padding: .88rem 1rem;
  border-bottom: 1px solid rgba(31,53,57,.07);
  color: var(--ink);
}

.live-menu-item a {
  display: block;
  color: inherit;
}

.live-menu-item:hover {
  background: rgba(22,165,155,.08);
}

.live-menu-item.unread {
  background: rgba(22,165,155,.16);
}

.live-menu-item strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .9rem;
}

.live-menu-item p {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
  margin-top: .2rem;
}

.live-read-one {
  margin-top: .55rem;
  border: 1px solid rgba(31,53,57,.1);
  background: rgba(255,255,255,.7);
  color: var(--ink);
  border-radius: 999px;
  padding: .28rem .65rem;
  font-size: .74rem;
  font-weight: 900;
}

.live-read-one:hover {
  border-color: rgba(22,165,155,.45);
  background: rgba(22,165,155,.12);
}

.live-new-mark {
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: .15rem .45rem;
  font-size: .68rem;
  white-space: nowrap;
}

.live-empty {
  padding: 1rem;
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
}

.flash-box {
  border-radius: 1rem !important;
  box-shadow: var(--shadow-soft);
}

nav.sticky {
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom-color: rgba(31,53,57,.09) !important;
  box-shadow: 0 12px 34px rgba(18,32,35,.06);
}

footer {
  background: rgba(255,255,255,.38);
  backdrop-filter: blur(14px);
}

.public-footer {
  border-top: 1px solid rgba(31,53,57,.09);
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(18px);
}

.footer-links {
  display: grid;
  gap: .55rem;
}

.footer-links a {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 800;
}

.footer-links a:hover {
  color: var(--teal-dark);
  transform: translateX(-2px);
}

.static-page-content {
  font-size: 1.02rem;
}

.upload-preview,
.table-thumb {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 1rem;
  object-fit: cover;
  border: 1px solid rgba(31,53,57,.12);
  background: white;
  box-shadow: 0 12px 24px rgba(18,32,35,.08);
}

.table-thumb {
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
}

header h1,
main h1,
main h2 {
  color: #102328;
}

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

@keyframes toast-in {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    transform: translateY(.4rem) scale(.98);
    opacity: 0;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-.35rem) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 768px) {
  .rated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specialty-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .doctor-profile-grid {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  .doctor-profile-side {
    justify-items: end;
  }
}

@media (min-width: 1180px) {
  .rated-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .specialty-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

html.dark-mode body,
html.dark-mode .app-shell {
  background:
    linear-gradient(120deg, rgba(22,165,155,.16), transparent 28rem),
    linear-gradient(245deg, rgba(239,125,103,.12), transparent 24rem),
    #10191d;
  color: #e5f0ee;
}

html.dark-mode body::before {
  opacity: .18;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px);
}

html.dark-mode .app-sidebar,
html.dark-mode nav.sticky {
  background: rgba(13,22,25,.76) !important;
  border-color: rgba(255,255,255,.1) !important;
}

html.dark-mode .brand-logo,
html.dark-mode .site-brand,
html.dark-mode .auth-logo,
html.dark-mode .profile-logo {
  background: #e5f0ee;
  border-color: rgba(255,255,255,.12);
}

html.dark-mode .muted-text,
html.dark-mode .label,
html.dark-mode .text-slate-500,
html.dark-mode .text-slate-400,
html.dark-mode .text-slate-300,
html.dark-mode .text-slate-600,
html.dark-mode .text-slate-700 {
  color: #9fb4b7 !important;
}

html.dark-mode .card,
html.dark-mode .rated-card,
html.dark-mode .offer-card,
html.dark-mode .specialty-band,
html.dark-mode .doctor-qr-card,
html.dark-mode .visit-bundle,
html.dark-mode .visit-diagnosis,
html.dark-mode .quick-create-panel,
html.dark-mode .modal-card,
html.dark-mode .user-chip {
  background: rgba(20,33,37,.82);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}

html.dark-mode .input {
  background: rgba(11,19,22,.74);
  border-color: rgba(255,255,255,.14);
  color: #e5f0ee;
}

html.dark-mode .input:focus {
  border-color: rgba(44,202,191,.78);
  box-shadow: 0 0 0 4px rgba(44,202,191,.13);
}

html.dark-mode .smart-select-panel {
  background: rgba(15,25,29,.98);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

html.dark-mode .smart-select-option {
  color: #e5f0ee;
}

html.dark-mode .smart-select-option:hover,
html.dark-mode .smart-select-option:focus,
html.dark-mode .smart-select-option.selected {
  background: rgba(44,202,191,.14);
  color: #71e4dc;
}

html.dark-mode .smart-select-empty {
  color: #9fb4b7;
}

html.dark-mode .btn {
  background: rgba(20,33,37,.76);
  color: #e5f0ee;
  border-color: rgba(255,255,255,.14);
}

html.dark-mode .btn:hover {
  background: rgba(30,48,54,.9);
}

html.dark-mode .btn-primary,
html.dark-mode .nav-link.active {
  background: linear-gradient(135deg, #19b8ae, #3992c5 70%, #ef7d67);
  color: white;
}

html.dark-mode .nav-link {
  color: #c4d8d6;
}

html.dark-mode .nav-link:hover,
html.dark-mode .nav-group[open] {
  background: rgba(255,255,255,.07);
}

html.dark-mode .nav-group summary,
html.dark-mode .permission-help span,
html.dark-mode .permission-cell span,
html.dark-mode .rated-card > div > span,
html.dark-mode .specialty-head span,
html.dark-mode .doctor-qr-card span,
html.dark-mode .doctor-qr-card p,
html.dark-mode .rated-row small,
html.dark-mode .specialty-doctor small,
html.dark-mode .specialty-doctor span,
html.dark-mode .live-menu-item p,
html.dark-mode .live-empty {
  color: #9fb4b7;
}

html.dark-mode .table th {
  background: rgba(255,255,255,.05);
  color: #9fb4b7;
  border-bottom-color: rgba(255,255,255,.1);
}

html.dark-mode .table td {
  border-bottom-color: rgba(255,255,255,.08);
}

html.dark-mode .table tr:hover td,
html.dark-mode .rated-row:hover,
html.dark-mode .specialty-doctor:hover {
  background: rgba(255,255,255,.07);
}

html.dark-mode .rated-card h3,
html.dark-mode .specialty-head h3,
html.dark-mode .doctor-qr-card b,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .quick-create-card summary,
html.dark-mode .visit-diagnosis p,
html.dark-mode header h1,
html.dark-mode main h1,
html.dark-mode main h2 {
  color: #e5f0ee;
}

html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .permission-help,
html.dark-mode .page-visibility-card,
html.dark-mode .permission-count,
html.dark-mode .page-visibility-card b,
html.dark-mode .quick-create-card,
html.dark-mode .price-preview,
html.dark-mode .info-tile {
  background: rgba(11,19,22,.62);
  border-color: rgba(255,255,255,.1);
  color: #e5f0ee;
}

html.dark-mode .rated-row em,
html.dark-mode .specialty-doctor em {
  background: rgba(44,202,191,.14);
  border-color: rgba(44,202,191,.22);
  color: #9ff2eb;
}

html.dark-mode .entity-avatar,
html.dark-mode .profile-photo,
html.dark-mode .upload-preview,
html.dark-mode .table-thumb {
  background: #e5f0ee;
  border-color: rgba(255,255,255,.14);
}

html.dark-mode .entity-avatar-wrap i {
  border-color: #142125;
}

html.dark-mode .public-footer {
  background: rgba(13,22,25,.68);
  border-color: rgba(255,255,255,.1);
}

html.dark-mode .footer-links a {
  color: #9fb4b7;
}

html.dark-mode .footer-links a:hover {
  color: #9ff2eb;
}

html.dark-mode .top-rotator-dots span {
  background: rgba(255,255,255,.18);
}

html.dark-mode .top-rotator-dots span.active {
  background: linear-gradient(135deg, #19b8ae, #3992c5);
}

html.dark-mode .doctor-qr-card img {
  background: white;
  border-color: rgba(255,255,255,.14);
}

html.dark-mode .modal-card,
html.dark-mode .live-toast,
html.dark-mode .live-dropdown {
  background: rgba(13,22,25,.95);
  border-color: rgba(255,255,255,.1);
}

html.dark-mode .live-toast strong,
html.dark-mode .live-menu-item {
  color: #e5f0ee;
}

html.dark-mode .live-menu-item.unread {
  background: rgba(44,202,191,.16);
}

html.dark-mode .live-new-mark {
  background: #e5f0ee;
  color: #10191d;
}

html.dark-mode .border-slate-200,
html.dark-mode .border-slate-300 {
  border-color: rgba(255,255,255,.12) !important;
}

html.dark-mode .bg-slate-50 {
  background-color: rgba(11,19,22,.62) !important;
}

@media (max-width: 640px) {
  main {
    padding: 1rem !important;
  }

  header {
    align-items: flex-start !important;
    flex-direction: column;
  }

  header .flex.items-center.gap-2 {
    width: 100%;
    overflow-x: auto;
    padding-bottom: .25rem;
  }

  .live-dropdown {
    position: fixed;
    top: 5rem;
    left: .75rem;
    right: .75rem;
    width: auto;
  }

  .live-toast-stack {
    left: .75rem;
    bottom: .75rem;
    width: calc(100vw - 1.5rem);
  }

  .btn,
  .btn-primary {
    padding: .62rem .78rem;
    font-size: .84rem;
  }

  .site-brand {
    width: 8.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  aside,
  form,
  .btn,
  .btn-primary,
  .link-action,
  .link-danger {
    display: none !important;
  }

  body {
    background: white !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field .input {
  padding-inline-end: 3.1rem;
}

.password-toggle {
  position: absolute;
  inset-inline-end: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  cursor: pointer;
  font-size: 1rem;
}

html.dark-mode .password-toggle {
  background: rgba(15, 23, 42, .78);
  color: #e5eef3;
}

/* Compact record details */
.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: .6rem;
  margin-bottom: 1.25rem;
}

.detail-summary-item {
  min-height: 4.1rem;
  display: grid;
  align-content: center;
  gap: .28rem;
  border: 1px solid rgba(31,53,57,.12);
  border-radius: .82rem;
  background: rgba(255,255,255,.58);
  padding: .62rem .78rem;
}

.detail-summary-wide {
  grid-column: span 2;
}

.detail-summary-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.detail-summary-value {
  color: var(--ink);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Workflow item tables */
.mini-table {
  font-size: .78rem;
  min-width: 32rem;
  background: rgba(255,255,255,.68);
  border-radius: .85rem;
  overflow: hidden;
}

.mini-table th,
.mini-table td {
  padding: .45rem .55rem;
  vertical-align: top;
}

.workflow-review-card {
  min-width: 17rem;
  border: 1px solid rgba(31,53,57,.1);
  border-radius: .95rem;
  background: rgba(255,255,255,.62);
  padding: .72rem;
}

.status-pill-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.queue-status .input {
  min-width: 10.5rem;
}

.nav-group + .nav-group {
  margin-top: .25rem;
}

.nav-group summary {
  letter-spacing: -.01em;
}

.nav-group[open] .nav-link {
  padding-inline-start: .95rem;
}

html.dark-mode .mini-table {
  background: rgba(255,255,255,.06);
}

html.dark-mode .workflow-review-card {
  background: rgba(11,19,22,.62);
  border-color: rgba(255,255,255,.1);
}

html.dark-mode .detail-summary-item {
  background: rgba(11,19,22,.58);
  border-color: rgba(255,255,255,.1);
}

html.dark-mode .detail-summary-value {
  color: #e5eef3;
}

@media (max-width: 640px) {
  .detail-summary-grid {
    grid-template-columns: 1fr;
  }

  .detail-summary-wide {
    grid-column: span 1;
  }
}

.presence-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 9999px;
    margin-inline-end: .35rem;
    vertical-align: middle;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .14);
}
.presence-dot.online {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.presence-dot.offline {
    background: #94a3b8;
}

/* AIRES-inspired CRM skin */
:root {
  --ink: #1b1b1b;
  --muted: #626161;
  --line: rgba(27, 27, 27, .14);
  --paper: #f6f6f1;
  --paper-strong: #fbfbf7;
  --surface: #e8e8e5;
  --surface-2: #dbdbd6;
  --teal: #a3a92e;
  --teal-dark: #676d16;
  --blue: #4f3b30;
  --coral: #a2a3a2;
  --amber: #d8dc58;
  --shadow-soft: 0 16px 36px rgba(27, 27, 27, .08);
  --shadow-hover: 0 20px 44px rgba(27, 27, 27, .12);
  --radius: .5rem;
  --radius-sm: .38rem;
}

* {
  letter-spacing: 0 !important;
}

body,
body.aires-app,
body.aires-public {
  color: var(--ink);
  background-color: var(--surface) !important;
  background-image:
    linear-gradient(rgba(27, 27, 27, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 27, 27, .03) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
}

body::before {
  opacity: .18;
  background-image:
    linear-gradient(90deg, rgba(27, 27, 27, .05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(27, 27, 27, .04) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: none;
}

.app-shell,
html.dark-mode .app-shell {
  background: transparent;
}

.aires-workspace {
  min-height: 100vh;
}

.app-sidebar.aires-sidebar {
  position: sticky;
  isolation: isolate;
  border-left: 1px solid rgba(27, 27, 27, .16);
  border-right: 0;
  background: rgba(219, 219, 214, .94);
  box-shadow: inset 3.7rem 0 0 rgba(198, 198, 193, .72), -16px 0 34px rgba(27, 27, 27, .06);
  backdrop-filter: blur(18px);
  padding-inline-start: 4.5rem !important;
  scrollbar-width: thin;
}

.app-sidebar.aires-sidebar::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3.7rem;
  border-inline-end: 1px solid rgba(27, 27, 27, .1);
  background:
    linear-gradient(rgba(27, 27, 27, .05) 1px, transparent 1px),
    #d2d2ce;
  background-size: 100% 44px;
  z-index: -1;
}

.aires-brand-lockup {
  min-height: 4.4rem;
  border-bottom: 1px solid rgba(27, 27, 27, .14);
  padding-bottom: 1rem;
}

.brand-logo,
.site-brand,
.auth-logo,
.profile-logo,
.public-hero-logo {
  border: 1px solid rgba(27, 27, 27, .13);
  background: #f7f7f2;
  border-radius: .45rem;
  box-shadow: none;
}

.brand-logo {
  width: 2.8rem;
  height: 2.8rem;
}

.site-brand,
.auth-logo,
.public-hero-logo {
  filter: saturate(.82) contrast(1.02);
}

.app-topbar {
  position: sticky;
  top: 1rem;
  z-index: 30;
  border: 1px solid rgba(27, 27, 27, .13);
  border-radius: .5rem;
  background: rgba(246, 246, 241, .9);
  box-shadow: 0 16px 34px rgba(27, 27, 27, .07);
  backdrop-filter: blur(18px);
  padding: 1rem;
}

.app-topbar h1,
header h1,
main h1,
main h2 {
  color: var(--ink);
  font-weight: 900;
}

.muted-text,
.label,
.text-slate-500,
.text-slate-600,
.text-slate-700 {
  color: var(--muted) !important;
}

.nav-group {
  border-radius: .45rem;
  border: 0;
}

.nav-group[open] {
  border-color: rgba(27, 27, 27, .12);
  background: rgba(246, 246, 241, .44);
  padding: .22rem;
}

.nav-group summary {
  color: rgba(27, 27, 27, .62);
  font-size: .72rem;
  font-weight: 900;
  padding: .66rem .68rem;
  text-transform: uppercase;
}

.nav-group summary::after {
  content: "+";
  color: var(--ink);
}

.nav-group[open] summary::after {
  content: "-";
  transform: none;
}

.nav-link {
  min-height: 2.65rem;
  border: 1px solid transparent;
  border-radius: .38rem;
  color: rgba(27, 27, 27, .76);
  font-weight: 800;
  padding: .64rem .72rem;
}

.nav-link::before {
  inset-block: .55rem;
  right: .18rem;
  width: 2px;
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(251, 251, 247, .74);
  border-color: rgba(27, 27, 27, .08);
  transform: translateX(-1px);
}

.nav-link.active {
  color: var(--ink);
  background: #ededdf;
  border-color: rgba(27, 27, 27, .17);
  box-shadow: none;
}

.nav-link.active::before {
  background: var(--teal);
}

.user-chip,
.card,
.rated-card,
.specialty-band,
.doctor-qr-card,
.visit-bundle,
.visit-diagnosis,
.quick-create-panel,
.modal-card,
.permission-help,
.page-visibility-card,
.quick-create-card,
.price-preview,
.info-tile,
.offer-card,
.workflow-review-card,
.detail-summary-item {
  border: 1px solid rgba(27, 27, 27, .13);
  border-radius: .5rem;
  background: rgba(246, 246, 241, .92);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}

.card::before,
.rated-card::before,
.specialty-band::before,
.doctor-qr-card::before {
  display: none;
}

.card:hover,
.rated-card:hover,
.specialty-band:hover,
.doctor-card:hover,
.specialty-doctor:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}

.btn,
.btn-primary,
.btn-disabled,
.btn-primary:disabled,
.btn:disabled {
  min-height: 2.55rem;
  border-radius: .38rem;
  font-size: .86rem;
}

.btn {
  background: rgba(251, 251, 247, .74);
  border-color: rgba(27, 27, 27, .14);
  color: var(--ink);
  box-shadow: none;
}

.btn:hover {
  background: #fbfbf7;
  border-color: rgba(27, 27, 27, .28);
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-primary {
  color: #1b1b1b;
  border-color: rgba(27, 27, 27, .18);
  background: #dfe34f;
  box-shadow: none;
}

.btn-primary:hover {
  background: #ccd236;
  transform: translateY(-1px);
  box-shadow: none;
}

.input,
.smart-select-toggle {
  border: 1px solid rgba(27, 27, 27, .18);
  border-radius: .42rem;
  background: rgba(251, 251, 247, .82);
  color: var(--ink);
  box-shadow: none;
}

.input:focus,
.smart-select-toggle:focus {
  border-color: rgba(103, 109, 22, .78);
  box-shadow: 0 0 0 3px rgba(163, 169, 46, .18);
  background: #fbfbf7;
}

.smart-select-panel,
.live-dropdown,
.live-toast {
  border: 1px solid rgba(27, 27, 27, .14);
  border-radius: .5rem;
  background: rgba(251, 251, 247, .98);
  box-shadow: var(--shadow-hover);
}

.smart-select-option {
  border-radius: .32rem;
}

.smart-select-option:hover,
.smart-select-option:focus,
.smart-select-option.selected {
  background: rgba(163, 169, 46, .18);
  color: var(--ink);
}

.table {
  border-spacing: 0;
  color: var(--ink);
}

.table th {
  background: #ededdf;
  border-bottom: 1px solid rgba(27, 27, 27, .18);
  color: rgba(27, 27, 27, .62);
  font-size: .72rem;
  text-transform: uppercase;
}

.table td {
  border-bottom: 1px solid rgba(27, 27, 27, .1);
  color: rgba(27, 27, 27, .82);
}

.table tr:hover td {
  background: rgba(237, 237, 223, .55);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.25rem;
  overflow: hidden;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: 1rem;
  inset-block: 1rem;
  width: 7.5rem;
  border: 1px dashed rgba(27, 27, 27, .16);
  pointer-events: none;
}

.dashboard-hero-copy {
  position: relative;
  z-index: 1;
}

.dashboard-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-end;
}

.dashboard-signal-row {
  display: flex;
  gap: .42rem;
  margin-top: 1rem;
}

.dashboard-signal-row span {
  display: block;
  height: .38rem;
  width: 3.2rem;
  border-radius: 999px;
  background: #c1c1bb;
}

.dashboard-signal-row span:first-child {
  background: var(--teal);
}

.dashboard-signal-row span:nth-child(2) {
  background: #4f3b30;
}

.metric-card {
  display: grid;
  gap: .8rem;
  min-height: 9rem;
}

.metric-kicker {
  color: rgba(27, 27, 27, .58);
  font-size: .78rem;
  font-weight: 900;
}

.metric-value {
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 900;
  line-height: 1;
}

.metric-track {
  height: .55rem;
  border-radius: 999px;
  overflow: hidden;
  background: #c9c9c4;
}

.metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.metric-card[data-tone="taupe"] .metric-track span {
  background: #4f3b30;
}

.metric-card[data-tone="charcoal"] .metric-track span {
  background: #1b1b1b;
}

.metric-card[data-tone="stone"] .metric-track span {
  background: #a2a3a2;
}

.metric-card[data-tone="earth"] .metric-track span {
  background: #7b6658;
}

.table-card {
  overflow: hidden;
}

.table-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.8rem;
  border-radius: .32rem;
  border: 1px solid rgba(27, 27, 27, .14);
  background: #ededdf;
  color: rgba(27, 27, 27, .72);
  font-size: .78rem;
  font-weight: 900;
}

.entity-avatar,
.entity-avatar-fallback,
.profile-photo,
.upload-preview,
.table-thumb {
  border-radius: .42rem;
}

.entity-avatar-fallback,
.profile-photo-fallback,
.rated-row .top-rank,
.entity-avatar-wrap i {
  background: #1b1b1b;
  color: #f6f6f1;
}

.rated-row,
.specialty-doctor {
  border-radius: .45rem;
  background: rgba(251, 251, 247, .72);
}

.rated-row em,
.specialty-doctor em {
  border-color: rgba(163, 169, 46, .24);
  background: rgba(163, 169, 46, .16);
  color: #565c13;
}

.offer-art {
  background:
    linear-gradient(rgba(27, 27, 27, .045) 1px, transparent 1px),
    #e4e4df;
  background-size: 44px 44px;
}

.live-count {
  background: #4f3b30;
  border-color: #f6f6f1;
}

.live-menu-item:hover,
.live-menu-item.unread {
  background: rgba(163, 169, 46, .14);
}

.live-new-mark {
  background: var(--teal);
  color: #1b1b1b;
}

nav.sticky {
  background: rgba(246, 246, 241, .88) !important;
  border-bottom-color: rgba(27, 27, 27, .12) !important;
  box-shadow: 0 12px 28px rgba(27, 27, 27, .06);
}

footer,
.public-footer {
  background: rgba(246, 246, 241, .78);
  border-top: 1px solid rgba(27, 27, 27, .12);
}

.auth-body .w-full.max-w-md {
  max-width: 30rem;
}

.auth-body .card {
  border-color: rgba(27, 27, 27, .15);
  background: #f6f6f1;
}

html.dark-mode body,
html.dark-mode body.aires-app,
html.dark-mode body.aires-public {
  color: #f2f2ec;
  background-color: #151515 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
}

html.dark-mode .app-sidebar.aires-sidebar,
html.dark-mode nav.sticky {
  background: rgba(34, 34, 32, .92) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

html.dark-mode .app-sidebar.aires-sidebar {
  box-shadow: inset 3.7rem 0 0 rgba(18, 18, 17, .85), -16px 0 34px rgba(0, 0, 0, .2);
}

html.dark-mode .app-sidebar.aires-sidebar::before {
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    #1a1a18;
  border-color: rgba(255, 255, 255, .08);
}

html.dark-mode .app-topbar,
html.dark-mode .card,
html.dark-mode .rated-card,
html.dark-mode .offer-card,
html.dark-mode .specialty-band,
html.dark-mode .doctor-qr-card,
html.dark-mode .visit-bundle,
html.dark-mode .visit-diagnosis,
html.dark-mode .quick-create-panel,
html.dark-mode .modal-card,
html.dark-mode .user-chip,
html.dark-mode .permission-help,
html.dark-mode .page-visibility-card,
html.dark-mode .quick-create-card,
html.dark-mode .price-preview,
html.dark-mode .info-tile,
html.dark-mode .workflow-review-card,
html.dark-mode .detail-summary-item {
  background: rgba(35, 35, 32, .94);
  border-color: rgba(255, 255, 255, .12);
  color: #f2f2ec;
}

html.dark-mode .btn,
html.dark-mode .input,
html.dark-mode .smart-select-toggle,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .smart-select-panel,
html.dark-mode .live-dropdown,
html.dark-mode .live-toast {
  background: rgba(25, 25, 23, .94);
  border-color: rgba(255, 255, 255, .14);
  color: #f2f2ec;
}

html.dark-mode .btn-primary,
html.dark-mode .nav-link.active {
  background: #dfe34f;
  color: #1b1b1b;
}

html.dark-mode .nav-link,
html.dark-mode .nav-group summary,
html.dark-mode .table td,
html.dark-mode .metric-value,
html.dark-mode .rated-card h3,
html.dark-mode .specialty-head h3,
html.dark-mode .doctor-qr-card b,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .quick-create-card summary,
html.dark-mode .visit-diagnosis p,
html.dark-mode header h1,
html.dark-mode main h1,
html.dark-mode main h2 {
  color: #f2f2ec;
}

html.dark-mode .table th,
html.dark-mode .table-card-count,
html.dark-mode .metric-track {
  background: rgba(255, 255, 255, .08);
}

html.dark-mode .table th,
html.dark-mode .muted-text,
html.dark-mode .label,
html.dark-mode .text-slate-500,
html.dark-mode .text-slate-600,
html.dark-mode .text-slate-700,
html.dark-mode .metric-kicker {
  color: #b8b8b0 !important;
}

@media (max-width: 1023px) {
  .app-topbar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 640px) {
  .app-topbar .flex.items-center.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .app-topbar .btn,
  .app-topbar .btn-primary {
    width: 100%;
    min-width: 0;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero::after {
    display: none;
  }

  .dashboard-actions {
    justify-content: stretch;
  }

  .dashboard-actions .btn {
    flex: 1 1 auto;
  }
}

/* 3eyadaty blue system override */
:root {
  --ink: #172033;
  --muted: #64748b;
  --line: rgba(37, 99, 235, .14);
  --paper: rgba(255, 255, 255, .86);
  --paper-strong: #ffffff;
  --surface: #f8fbff;
  --surface-2: #eaf2ff;
  --teal: #2563eb;
  --teal-dark: #1d4ed8;
  --blue: #0284c7;
  --coral: #38bdf8;
  --amber: #93c5fd;
  --shadow-soft: 0 16px 36px rgba(37, 99, 235, .09);
  --shadow-hover: 0 22px 48px rgba(37, 99, 235, .16);
  --radius: .9rem;
  --radius-sm: .68rem;
}

body,
body.loopai-app,
body.loopai-public,
body.influmo-app,
body.influmo-public {
  background-color: #f8fbff !important;
  background-image:
    linear-gradient(135deg, rgba(37, 99, 235, .10), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 52%, #f8fbff 100%) !important;
  color: var(--ink);
}

body::before {
  opacity: .34;
  background-image:
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(37, 99, 235, .045) 1px, transparent 1px);
}

.btn-primary,
html.dark-mode .btn-primary,
.nav-link.active,
html.dark-mode .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #0284c7) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
}

.input:focus,
.smart-select-toggle:focus {
  border-color: rgba(37, 99, 235, .58) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important;
}

.app-sidebar.loopai-sidebar,
.app-sidebar.influmo-sidebar,
nav.sticky,
.app-topbar {
  border-color: rgba(37, 99, 235, .10) !important;
  box-shadow: var(--shadow-soft);
}

.app-sidebar.loopai-sidebar::before,
.app-sidebar.influmo-sidebar::before {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, .16), rgba(2, 132, 199, .12)),
    rgba(255, 255, 255, .64) !important;
}

.rated-row em,
.specialty-doctor em,
.link-action,
.smart-select-arrow {
  color: var(--teal-dark) !important;
}

.rated-row em,
.specialty-doctor em {
  border-color: rgba(37, 99, 235, .20) !important;
  background: rgba(37, 99, 235, .10) !important;
}

.entity-avatar-fallback,
.profile-photo-fallback,
.rated-row .top-rank,
.entity-avatar-wrap i,
.top-rotator-dots span.active,
.live-count {
  background: linear-gradient(135deg, #2563eb, #0284c7) !important;
  color: #fff !important;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.action-icon {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .76);
  color: var(--teal-dark);
  font-size: .96rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.action-icon:hover {
  background: rgba(37, 99, 235, .10);
  transform: translateY(-1px);
}

.action-icon-danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, .16);
}

.action-icon-danger:hover {
  background: rgba(220, 38, 38, .08);
}

.daily-schedule-day {
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: .9rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
}

.daily-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(37, 99, 235, .10);
  background: rgba(37, 99, 235, .06);
}

.daily-schedule-head h3 {
  font-weight: 900;
  color: var(--ink);
}

.daily-schedule-head b,
.schedule-status {
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .78rem;
  font-weight: 900;
}

.daily-schedule-head b {
  background: white;
  color: var(--teal-dark);
  border: 1px solid rgba(37, 99, 235, .12);
}

.schedule-status {
  display: inline-flex;
  border: 1px solid rgba(37, 99, 235, .14);
  background: rgba(37, 99, 235, .10);
  color: var(--teal-dark);
}

.schedule-status-booked {
  border-color: rgba(220, 38, 38, .16);
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}

.schedule-editor summary {
  color: var(--teal-dark);
}

html.dark-mode body,
html.dark-mode body.loopai-app,
html.dark-mode body.loopai-public,
html.dark-mode body.influmo-app,
html.dark-mode body.influmo-public {
  background-color: #0f172a !important;
  background-image:
    linear-gradient(135deg, rgba(37, 99, 235, .18), transparent 26rem),
    linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

.workflow-timeline {
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .72);
  padding: 1rem;
}

.workflow-timeline-count {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: .75rem;
  border: 1px solid rgba(37, 99, 235, .18);
  background: rgba(37, 99, 235, .08);
  color: var(--teal-dark);
  padding: .25rem .7rem;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.workflow-timeline-list {
  display: grid;
  gap: .7rem;
}

.workflow-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
  border: 1px solid rgba(37, 99, 235, .1);
  border-radius: .95rem;
  background: rgba(255, 255, 255, .76);
  padding: .85rem;
}

.workflow-timeline-dot {
  width: .8rem;
  height: .8rem;
  margin-top: .4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #0284c7);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.workflow-timeline-item b {
  color: var(--ink);
  font-weight: 900;
}

.workflow-timeline-item p,
.workflow-timeline-item small {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}

.workflow-timeline-item time {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

html.dark-mode .workflow-timeline,
html.dark-mode .workflow-timeline-item {
  background: rgba(28, 34, 45, .82);
  border-color: rgba(147, 197, 253, .16);
}

html.dark-mode .workflow-timeline-count {
  background: rgba(37, 99, 235, .18);
  color: #bfdbfe;
}

@media (max-width: 720px) {
  .workflow-timeline-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .workflow-timeline-item time {
    grid-column: 2;
  }

  .overflow-x-auto:has(table.table:not(.mini-table)) {
    overflow-x: visible;
  }

  table.table:not(.mini-table),
  table.table:not(.mini-table) tbody,
  table.table:not(.mini-table) tr,
  table.table:not(.mini-table) td {
    display: block;
    width: 100%;
  }

  table.table:not(.mini-table) thead {
    display: none;
  }

  table.table:not(.mini-table) tr {
    margin-bottom: .8rem;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .78);
  }

  table.table:not(.mini-table) td {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
    gap: .75rem;
    border-bottom: 1px solid rgba(37, 99, 235, .08);
    padding: .78rem .85rem;
  }

  table.table:not(.mini-table) td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
  }

  table.table:not(.mini-table) td[colspan] {
    display: block;
    text-align: center;
  }

  table.table:not(.mini-table) td[colspan]::before {
    content: "";
    display: none;
  }

  table.table:not(.mini-table) td:empty::after {
    content: "-";
    color: var(--muted);
  }

  html.dark-mode table.table:not(.mini-table) tr {
    background: rgba(28, 34, 45, .82);
    border-color: rgba(147, 197, 253, .14);
  }
}

html.dark-mode .daily-schedule-day,
html.dark-mode .daily-schedule-head,
html.dark-mode .action-icon {
  background: rgba(15, 23, 42, .82);
  border-color: rgba(255, 255, 255, .10);
}

/* LoopAI client-style doctor cards */
.doctor-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.4rem, 1fr));
  gap: .95rem;
  align-items: stretch;
}

.doctor-client-grid > .card {
  grid-column: 1 / -1;
}

.doctor-client-card {
  position: relative;
  min-height: 13.75rem;
  display: grid;
  align-content: start;
  gap: .78rem;
  overflow: hidden;
  border: 1px solid rgba(24, 23, 27, .09);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 34px rgba(50, 85, 193, .08);
  padding: .95rem .85rem .85rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.doctor-client-card:hover {
  transform: translateY(-2px);
  border-color: rgba(50, 85, 193, .16);
  box-shadow: 0 22px 48px rgba(50, 85, 193, .13);
}

.doctor-client-main {
  min-width: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
}

.doctor-client-avatar-wrap {
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: .18rem;
  background: linear-gradient(135deg, #3255c1, #b2ade2);
  box-shadow: 0 10px 22px rgba(50, 85, 193, .14);
}

.doctor-client-card[data-ring="green"] .doctor-client-avatar-wrap {
  background: linear-gradient(135deg, #65ce58, #c9f076);
}

.doctor-client-card[data-ring="blue"] .doctor-client-avatar-wrap {
  background: linear-gradient(135deg, #54b9ef, #96d9ff);
}

.doctor-client-card[data-ring="gold"] .doctor-client-avatar-wrap {
  background: linear-gradient(135deg, #f0c350, #f6df8d);
}

.doctor-client-card[data-ring="pink"] .doctor-client-avatar-wrap {
  background: linear-gradient(135deg, #d963bf, #f4a4d8);
}

.doctor-client-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: .24rem solid #fff;
  border-radius: inherit;
  object-fit: cover;
  background: #f5f5fb;
  color: #3255c1;
  font-size: 1.25rem;
  font-weight: 900;
}

.doctor-client-main strong {
  max-width: 100%;
  margin-top: .62rem;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doctor-client-main small {
  max-width: 100%;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doctor-client-meta {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
  padding-top: .82rem;
  border-top: 1px solid rgba(24, 23, 27, .08);
}

.doctor-client-meta div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: .28rem;
  text-align: center;
}

.doctor-client-meta span {
  color: rgba(24, 23, 27, .52);
  font-size: .68rem;
  font-weight: 800;
}

.doctor-client-meta b {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doctor-client-meta i {
  width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #65ce58;
  color: #fff;
  font-size: .58rem;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
}

.doctor-client-card[data-ring="blue"] .doctor-client-meta i {
  background: #54b9ef;
}

.doctor-client-card[data-ring="gold"] .doctor-client-meta i {
  background: #f0c350;
}

.doctor-client-card[data-ring="pink"] .doctor-client-meta i {
  background: #d963bf;
}

.doctor-client-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}

.doctor-client-actions a {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24, 23, 27, .08);
  border-radius: .75rem;
  background: rgba(245, 245, 251, .84);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 900;
}

.doctor-client-actions a:last-child {
  border-color: transparent;
  background: linear-gradient(135deg, #3255c1, #6f78d9);
  color: #fff;
}

.doctor-client-actions a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(50, 85, 193, .12);
}

html.dark-mode .doctor-client-card {
  background: rgba(28, 27, 37, .9);
  border-color: rgba(255, 255, 255, .1);
}

html.dark-mode .doctor-client-avatar {
  border-color: #1c1b25;
  background: #15151d;
  color: #f4f2ff;
}

html.dark-mode .doctor-client-main strong,
html.dark-mode .doctor-client-meta b {
  color: #f4f2ff;
}

html.dark-mode .doctor-client-main small,
html.dark-mode .doctor-client-meta span {
  color: #bdb8cf;
}

html.dark-mode .doctor-client-meta {
  border-top-color: rgba(255, 255, 255, .1);
}

html.dark-mode .doctor-client-actions a {
  background: rgba(19, 18, 26, .92);
  border-color: rgba(255, 255, 255, .1);
  color: #f4f2ff;
}

html.dark-mode .doctor-client-actions a:last-child {
  background: linear-gradient(135deg, #3255c1, #6f78d9);
  color: #fff;
}

@media (min-width: 1180px) {
  .doctor-client-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .doctor-client-grid {
    grid-template-columns: 1fr;
  }
}

/* LoopAI-inspired client management CRM skin */
:root {
  --ink: #18171b;
  --muted: #6e6a73;
  --line: rgba(24, 23, 27, .1);
  --paper: rgba(255, 255, 255, .82);
  --paper-strong: #ffffff;
  --surface: #f5f5fb;
  --surface-2: #eeecfb;
  --teal: #b2ade2;
  --teal-dark: #3255c1;
  --blue: #3255c1;
  --coral: #d1c9b5;
  --amber: #c3bbed;
  --shadow-soft: 0 18px 44px rgba(50, 85, 193, .09);
  --shadow-hover: 0 26px 60px rgba(50, 85, 193, .15);
  --radius: 1.35rem;
  --radius-sm: .95rem;
}

body,
body.loopai-app,
body.loopai-public {
  color: var(--ink);
  background-color: #f5f5fb !important;
  background-image:
    radial-gradient(circle at 17% 12%, rgba(195, 187, 237, .5), transparent 20rem),
    radial-gradient(circle at 84% 9%, rgba(50, 85, 193, .14), transparent 23rem),
    linear-gradient(180deg, #f5f5fb 0%, #f2f1f8 48%, #faf9fd 100%);
}

body::before {
  opacity: .38;
  background-image:
    linear-gradient(90deg, rgba(50, 85, 193, .055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(50, 85, 193, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 86%);
}

.app-shell,
html.dark-mode .app-shell {
  background:
    linear-gradient(135deg, rgba(195, 187, 237, .26), transparent 25rem),
    linear-gradient(245deg, rgba(209, 201, 181, .22), transparent 25rem);
}

.loopai-workspace {
  min-height: 100vh;
}

.app-sidebar.loopai-sidebar {
  position: sticky;
  isolation: isolate;
  border-left: 1px solid rgba(24, 23, 27, .08);
  border-right: 0;
  background: rgba(255, 255, 255, .78);
  box-shadow: -18px 0 48px rgba(24, 23, 27, .06);
  backdrop-filter: blur(26px) saturate(150%);
  padding-inline-start: 1rem !important;
  scrollbar-width: thin;
}

.app-sidebar.loopai-sidebar::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  left: .85rem;
  width: 3.1rem;
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, rgba(195, 187, 237, .86), rgba(178, 173, 226, .58)),
    rgba(255, 255, 255, .72);
  border: 1px solid rgba(24, 23, 27, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  z-index: -1;
}

.loopai-brand-lockup {
  min-height: 4.35rem;
  padding-bottom: .8rem;
}

.brand-logo,
.site-brand,
.auth-logo,
.profile-logo,
.public-hero-logo {
  border: 1px solid rgba(24, 23, 27, .08);
  background: white;
  border-radius: 1.15rem;
  box-shadow: 0 16px 34px rgba(50, 85, 193, .11);
}

.brand-logo {
  width: 3.2rem;
  height: 3.2rem;
}

.app-topbar {
  position: sticky;
  top: 1rem;
  z-index: 30;
  border: 1px solid rgba(24, 23, 27, .08);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(24px) saturate(150%);
  padding: 1rem;
}

.app-topbar h1,
header h1,
main h1,
main h2 {
  color: var(--ink);
  font-weight: 900;
}

.muted-text,
.label,
.text-slate-500,
.text-slate-600,
.text-slate-700 {
  color: var(--muted) !important;
}

.nav-group {
  border-radius: 1.05rem;
}

.nav-group[open] {
  border-color: rgba(24, 23, 27, .06);
  background: rgba(245, 245, 251, .72);
  padding: .24rem;
}

.nav-group summary {
  color: rgba(24, 23, 27, .54);
  font-size: .72rem;
  font-weight: 900;
  padding: .66rem .75rem;
  text-transform: none;
}

.nav-group summary::after {
  content: "⌄";
  color: rgba(24, 23, 27, .48);
}

.nav-group[open] summary::after {
  content: "⌃";
  transform: none;
}

.nav-link {
  min-height: 2.62rem;
  border: 1px solid transparent;
  border-radius: .9rem;
  color: rgba(24, 23, 27, .75);
  font-weight: 800;
  padding: .64rem .75rem;
}

.nav-link::before {
  inset-block: .74rem;
  right: .26rem;
  width: 3px;
  border-radius: 999px;
}

.nav-link:hover {
  color: var(--ink);
  background: white;
  border-color: rgba(24, 23, 27, .07);
  transform: translateX(-1px);
}

.nav-link.active {
  color: white;
  background: linear-gradient(135deg, #3255c1, #6b74d6 58%, #b2ade2);
  border-color: rgba(50, 85, 193, .2);
  box-shadow: 0 14px 32px rgba(50, 85, 193, .24);
}

.nav-link.active::before {
  background: rgba(255, 255, 255, .9);
}

.user-chip,
.card,
.rated-card,
.specialty-band,
.doctor-qr-card,
.visit-bundle,
.visit-diagnosis,
.quick-create-panel,
.modal-card,
.permission-help,
.page-visibility-card,
.quick-create-card,
.price-preview,
.info-tile,
.offer-card,
.workflow-review-card,
.detail-summary-item {
  border: 1px solid rgba(24, 23, 27, .08);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(145%);
}

.card::before,
.rated-card::before,
.specialty-band::before,
.doctor-qr-card::before {
  display: none;
}

.card:hover,
.rated-card:hover,
.specialty-band:hover,
.doctor-card:hover,
.specialty-doctor:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn,
.btn-primary,
.btn-disabled,
.btn-primary:disabled,
.btn:disabled {
  min-height: 2.65rem;
  border-radius: 1rem;
  font-size: .86rem;
}

.btn {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(24, 23, 27, .08);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(24, 23, 27, .05);
}

.btn:hover {
  background: white;
  border-color: rgba(50, 85, 193, .25);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(50, 85, 193, .12);
}

.btn-primary {
  color: white;
  border-color: transparent;
  background: linear-gradient(135deg, #3255c1, #6f78d9 58%, #b2ade2);
  box-shadow: 0 18px 36px rgba(50, 85, 193, .26);
}

.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 22px 46px rgba(50, 85, 193, .28);
}

.input,
.smart-select-toggle {
  border: 1px solid rgba(24, 23, 27, .09);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.input:focus,
.smart-select-toggle:focus {
  border-color: rgba(50, 85, 193, .48);
  box-shadow: 0 0 0 4px rgba(50, 85, 193, .12);
  background: white;
}

.smart-select-panel,
.live-dropdown,
.live-toast {
  border: 1px solid rgba(24, 23, 27, .08);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-hover);
}

.smart-select-option {
  border-radius: .85rem;
}

.smart-select-option:hover,
.smart-select-option:focus,
.smart-select-option.selected {
  background: rgba(195, 187, 237, .24);
  color: var(--ink);
}

.table th {
  background: rgba(195, 187, 237, .18);
  border-bottom: 1px solid rgba(24, 23, 27, .08);
  color: rgba(24, 23, 27, .58);
  font-size: .73rem;
  text-transform: none;
}

.table td {
  border-bottom: 1px solid rgba(24, 23, 27, .065);
  color: rgba(24, 23, 27, .82);
}

.table tr:hover td {
  background: rgba(195, 187, 237, .1);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.25rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(195, 187, 237, .5), transparent 16rem),
    linear-gradient(135deg, rgba(50, 85, 193, .08), transparent 45%),
    rgba(255, 255, 255, .86);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 173, 226, .38), transparent 68%);
  pointer-events: none;
}

.dashboard-actions,
.dashboard-hero-copy {
  position: relative;
  z-index: 1;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-end;
}

.dashboard-signal-row {
  display: flex;
  gap: .42rem;
  margin-top: 1rem;
}

.dashboard-signal-row span {
  display: block;
  height: .45rem;
  width: 3.2rem;
  border-radius: 999px;
  background: rgba(85, 81, 80, .26);
}

.dashboard-signal-row span:first-child {
  background: #3255c1;
}

.dashboard-signal-row span:nth-child(2) {
  background: #439056;
}

.metric-card {
  display: grid;
  gap: .8rem;
  min-height: 9rem;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  inset-inline-start: -1.85rem;
  inset-block-start: -2.1rem;
  width: 7.35rem;
  height: 7.35rem;
  border-radius: 50%;
  opacity: .52;
  background: #c3bbed;
}

.metric-kicker,
.metric-value,
.metric-track {
  position: relative;
  z-index: 1;
}

.metric-kicker {
  color: rgba(24, 23, 27, .58);
  font-size: .78rem;
  font-weight: 900;
}

.metric-value {
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 900;
  line-height: 1;
}

.metric-track {
  height: .55rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(24, 23, 27, .1);
}

.metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3255c1;
}

.metric-card[data-tone="taupe"]::after,
.metric-card[data-tone="taupe"] .metric-track span {
  background: #d1c9b5;
}

.metric-card[data-tone="charcoal"]::after,
.metric-card[data-tone="charcoal"] .metric-track span {
  background: #3255c1;
}

.metric-card[data-tone="stone"]::after,
.metric-card[data-tone="stone"] .metric-track span {
  background: #439056;
}

.metric-card[data-tone="earth"]::after,
.metric-card[data-tone="earth"] .metric-track span {
  background: #b2ade2;
}

.table-card {
  overflow: hidden;
}

.table-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.8rem;
  border-radius: .8rem;
  border: 1px solid rgba(50, 85, 193, .12);
  background: rgba(195, 187, 237, .22);
  color: rgba(24, 23, 27, .72);
  font-size: .78rem;
  font-weight: 900;
}

.entity-avatar,
.entity-avatar-fallback,
.profile-photo,
.upload-preview,
.table-thumb {
  border-radius: 1rem;
}

.entity-avatar-fallback,
.profile-photo-fallback,
.rated-row .top-rank,
.entity-avatar-wrap i {
  background: linear-gradient(135deg, #3255c1, #b2ade2);
  color: white;
}

.rated-row,
.specialty-doctor {
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, .75);
}

.rated-row em,
.specialty-doctor em {
  border-color: rgba(67, 144, 86, .2);
  background: rgba(67, 144, 86, .12);
  color: #2f7540;
}

.offer-art {
  background:
    radial-gradient(circle at 18% 18%, rgba(195, 187, 237, .32), transparent 34%),
    linear-gradient(135deg, rgba(245, 245, 251, .98), rgba(242, 240, 251, .98));
}

.live-count {
  background: #3255c1;
  border-color: white;
}

.live-menu-item:hover,
.live-menu-item.unread {
  background: rgba(195, 187, 237, .13);
}

.live-new-mark {
  background: #439056;
  color: white;
}

nav.sticky {
  background: rgba(255, 255, 255, .82) !important;
  border-bottom-color: rgba(24, 23, 27, .08) !important;
  box-shadow: 0 14px 34px rgba(50, 85, 193, .08);
}

footer,
.public-footer {
  background: rgba(255, 255, 255, .7);
  border-top: 1px solid rgba(24, 23, 27, .08);
}

.auth-body .w-full.max-w-md {
  max-width: 30rem;
}

.auth-body .card {
  border-color: rgba(24, 23, 27, .08);
  background:
    linear-gradient(135deg, rgba(195, 187, 237, .23), transparent 52%),
    rgba(255, 255, 255, .88);
}

html.dark-mode body,
html.dark-mode body.loopai-app,
html.dark-mode body.loopai-public {
  color: #f4f2ff;
  background-color: #111116 !important;
  background-image:
    radial-gradient(circle at 17% 12%, rgba(195, 187, 237, .14), transparent 20rem),
    radial-gradient(circle at 84% 9%, rgba(50, 85, 193, .22), transparent 23rem),
    linear-gradient(180deg, #111116 0%, #171721 100%);
}

html.dark-mode .app-sidebar.loopai-sidebar,
html.dark-mode nav.sticky {
  background: rgba(25, 24, 32, .88) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

html.dark-mode .app-sidebar.loopai-sidebar::before {
  border-color: rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(195, 187, 237, .2), rgba(50, 85, 193, .22)),
    rgba(255, 255, 255, .04);
}

html.dark-mode .app-topbar,
html.dark-mode .card,
html.dark-mode .rated-card,
html.dark-mode .offer-card,
html.dark-mode .specialty-band,
html.dark-mode .doctor-qr-card,
html.dark-mode .visit-bundle,
html.dark-mode .visit-diagnosis,
html.dark-mode .quick-create-panel,
html.dark-mode .modal-card,
html.dark-mode .user-chip,
html.dark-mode .permission-help,
html.dark-mode .page-visibility-card,
html.dark-mode .quick-create-card,
html.dark-mode .price-preview,
html.dark-mode .info-tile,
html.dark-mode .workflow-review-card,
html.dark-mode .detail-summary-item {
  background: rgba(28, 27, 37, .86);
  border-color: rgba(255, 255, 255, .1);
  color: #f4f2ff;
}

html.dark-mode .btn,
html.dark-mode .input,
html.dark-mode .smart-select-toggle,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .smart-select-panel,
html.dark-mode .live-dropdown,
html.dark-mode .live-toast {
  background: rgba(19, 18, 26, .92);
  border-color: rgba(255, 255, 255, .12);
  color: #f4f2ff;
}

html.dark-mode .btn-primary,
html.dark-mode .nav-link.active {
  background: linear-gradient(135deg, #3255c1, #6f78d9 58%, #b2ade2);
  color: white;
}

html.dark-mode .nav-link,
html.dark-mode .nav-group summary,
html.dark-mode .table td,
html.dark-mode .metric-value,
html.dark-mode .rated-card h3,
html.dark-mode .specialty-head h3,
html.dark-mode .doctor-qr-card b,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .quick-create-card summary,
html.dark-mode .visit-diagnosis p,
html.dark-mode header h1,
html.dark-mode main h1,
html.dark-mode main h2 {
  color: #f4f2ff;
}

html.dark-mode .table th,
html.dark-mode .table-card-count,
html.dark-mode .metric-track {
  background: rgba(255, 255, 255, .08);
}

html.dark-mode .table th,
html.dark-mode .muted-text,
html.dark-mode .label,
html.dark-mode .text-slate-500,
html.dark-mode .text-slate-600,
html.dark-mode .text-slate-700,
html.dark-mode .metric-kicker {
  color: #bdb8cf !important;
}

@media (max-width: 1023px) {
  .app-topbar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 640px) {
  .app-topbar .flex.items-center.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .app-topbar .btn,
  .app-topbar .btn-primary {
    width: 100%;
    min-width: 0;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero::after {
    display: none;
  }

  .dashboard-actions {
    justify-content: stretch;
  }

  .dashboard-actions .btn {
    flex: 1 1 auto;
  }
}

/* Influmo-inspired creator CRM skin */
:root {
  --ink: #2c2e2d;
  --muted: #77818d;
  --line: rgba(44, 46, 45, .1);
  --paper: rgba(255, 255, 255, .82);
  --paper-strong: #ffffff;
  --surface: #f9f9fa;
  --surface-2: #eef2ef;
  --teal: #7bd1aa;
  --teal-dark: #318f68;
  --blue: #6897d5;
  --coral: #ffaa4a;
  --amber: #afdbdc;
  --shadow-soft: 0 18px 42px rgba(63, 87, 111, .1);
  --shadow-hover: 0 24px 56px rgba(63, 87, 111, .16);
  --radius: 1.05rem;
  --radius-sm: .78rem;
}

body,
body.influmo-app,
body.influmo-public {
  color: var(--ink);
  background-color: #f9f9fa !important;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(123, 209, 170, .22), transparent 18rem),
    radial-gradient(circle at 86% 8%, rgba(104, 151, 213, .18), transparent 20rem),
    linear-gradient(180deg, #f9f9fa 0%, #f2f5f3 48%, #f9f9fa 100%);
}

body::before {
  opacity: .52;
  background-image:
    linear-gradient(90deg, rgba(119, 129, 141, .06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(119, 129, 141, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 86%);
}

.app-shell,
html.dark-mode .app-shell {
  background:
    linear-gradient(135deg, rgba(123, 209, 170, .13), transparent 22rem),
    linear-gradient(245deg, rgba(104, 151, 213, .14), transparent 26rem);
}

.influmo-workspace {
  min-height: 100vh;
}

.app-sidebar.influmo-sidebar {
  position: sticky;
  isolation: isolate;
  border-left: 1px solid rgba(44, 46, 45, .08);
  border-right: 0;
  background: rgba(255, 255, 255, .7);
  box-shadow: -16px 0 46px rgba(63, 87, 111, .08);
  backdrop-filter: blur(24px) saturate(145%);
  padding-inline-start: 1rem !important;
  scrollbar-width: thin;
}

.app-sidebar.influmo-sidebar::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  left: .85rem;
  width: 3.1rem;
  border: 1px solid rgba(44, 46, 45, .08);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(123, 209, 170, .36), rgba(104, 151, 213, .3)),
    rgba(255, 255, 255, .68);
  z-index: -1;
}

.influmo-brand-lockup {
  min-height: 4.35rem;
  padding-bottom: .8rem;
}

.brand-logo,
.site-brand,
.auth-logo,
.profile-logo,
.public-hero-logo {
  border: 1px solid rgba(44, 46, 45, .08);
  background: white;
  border-radius: 1rem;
  box-shadow: 0 14px 28px rgba(63, 87, 111, .1);
}

.brand-logo {
  width: 3.15rem;
  height: 3.15rem;
}

.app-topbar {
  position: sticky;
  top: 1rem;
  z-index: 30;
  border: 1px solid rgba(44, 46, 45, .08);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(150%);
  padding: 1rem;
}

.app-topbar h1,
header h1,
main h1,
main h2 {
  color: var(--ink);
  font-weight: 900;
}

.muted-text,
.label,
.text-slate-500,
.text-slate-600,
.text-slate-700 {
  color: var(--muted) !important;
}

.nav-group {
  border-radius: 1rem;
}

.nav-group[open] {
  border-color: rgba(44, 46, 45, .06);
  background: rgba(244, 247, 245, .7);
  padding: .24rem;
}

.nav-group summary {
  color: rgba(44, 46, 45, .52);
  font-size: .73rem;
  font-weight: 900;
  padding: .66rem .75rem;
  text-transform: none;
}

.nav-group summary::after {
  content: "⌄";
  color: var(--muted);
}

.nav-group[open] summary::after {
  content: "⌃";
  transform: none;
}

.nav-link {
  min-height: 2.6rem;
  border: 1px solid transparent;
  border-radius: .82rem;
  color: rgba(44, 46, 45, .76);
  font-weight: 800;
  padding: .64rem .74rem;
}

.nav-link::before {
  inset-block: .72rem;
  right: .25rem;
  width: 3px;
  border-radius: 999px;
}

.nav-link:hover {
  color: var(--ink);
  background: white;
  border-color: rgba(44, 46, 45, .07);
  transform: translateX(-1px);
}

.nav-link.active {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(123, 209, 170, .34), rgba(175, 219, 220, .44));
  border-color: rgba(123, 209, 170, .32);
  box-shadow: 0 12px 28px rgba(123, 209, 170, .2);
}

.nav-link.active::before {
  background: var(--blue);
}

.user-chip,
.card,
.rated-card,
.specialty-band,
.doctor-qr-card,
.visit-bundle,
.visit-diagnosis,
.quick-create-panel,
.modal-card,
.permission-help,
.page-visibility-card,
.quick-create-card,
.price-preview,
.info-tile,
.offer-card,
.workflow-review-card,
.detail-summary-item {
  border: 1px solid rgba(44, 46, 45, .08);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(145%);
}

.card::before,
.rated-card::before,
.specialty-band::before,
.doctor-qr-card::before {
  display: none;
}

.card:hover,
.rated-card:hover,
.specialty-band:hover,
.doctor-card:hover,
.specialty-doctor:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn,
.btn-primary,
.btn-disabled,
.btn-primary:disabled,
.btn:disabled {
  min-height: 2.65rem;
  border-radius: .9rem;
  font-size: .86rem;
}

.btn {
  background: rgba(255, 255, 255, .76);
  border-color: rgba(44, 46, 45, .08);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(63, 87, 111, .06);
}

.btn:hover {
  background: white;
  border-color: rgba(104, 151, 213, .24);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(63, 87, 111, .11);
}

.btn-primary {
  color: #17201c;
  border-color: transparent;
  background: linear-gradient(135deg, #7bd1aa, #afdbdc 62%, #6897d5);
  box-shadow: 0 16px 34px rgba(123, 209, 170, .28);
}

.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(104, 151, 213, .22);
}

.input,
.smart-select-toggle {
  border: 1px solid rgba(44, 46, 45, .09);
  border-radius: .92rem;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.input:focus,
.smart-select-toggle:focus {
  border-color: rgba(104, 151, 213, .54);
  box-shadow: 0 0 0 4px rgba(104, 151, 213, .13);
  background: white;
}

.smart-select-panel,
.live-dropdown,
.live-toast {
  border: 1px solid rgba(44, 46, 45, .08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-hover);
}

.smart-select-option {
  border-radius: .76rem;
}

.smart-select-option:hover,
.smart-select-option:focus,
.smart-select-option.selected {
  background: rgba(123, 209, 170, .16);
  color: var(--ink);
}

.table th {
  background: rgba(180, 187, 175, .18);
  border-bottom: 1px solid rgba(44, 46, 45, .09);
  color: rgba(44, 46, 45, .58);
  font-size: .73rem;
  text-transform: none;
}

.table td {
  border-bottom: 1px solid rgba(44, 46, 45, .07);
  color: rgba(44, 46, 45, .82);
}

.table tr:hover td {
  background: rgba(123, 209, 170, .08);
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.25rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(123, 209, 170, .2), transparent 42%),
    linear-gradient(245deg, rgba(104, 151, 213, .16), transparent 52%),
    rgba(255, 255, 255, .8);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 209, 170, .34), transparent 68%);
  pointer-events: none;
}

.dashboard-actions,
.dashboard-hero-copy {
  position: relative;
  z-index: 1;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-end;
}

.dashboard-signal-row {
  display: flex;
  gap: .42rem;
  margin-top: 1rem;
}

.dashboard-signal-row span {
  display: block;
  height: .45rem;
  width: 3.2rem;
  border-radius: 999px;
  background: rgba(180, 187, 175, .65);
}

.dashboard-signal-row span:first-child {
  background: var(--teal);
}

.dashboard-signal-row span:nth-child(2) {
  background: var(--blue);
}

.metric-card {
  display: grid;
  gap: .8rem;
  min-height: 9rem;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  inset-inline-start: -1.8rem;
  inset-block-start: -2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  opacity: .45;
  background: var(--teal);
}

.metric-kicker,
.metric-value,
.metric-track {
  position: relative;
  z-index: 1;
}

.metric-kicker {
  color: rgba(44, 46, 45, .56);
  font-size: .78rem;
  font-weight: 900;
}

.metric-value {
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 900;
  line-height: 1;
}

.metric-track {
  height: .55rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(180, 187, 175, .32);
}

.metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.metric-card[data-tone="taupe"]::after,
.metric-card[data-tone="taupe"] .metric-track span {
  background: #afdbdc;
}

.metric-card[data-tone="charcoal"]::after,
.metric-card[data-tone="charcoal"] .metric-track span {
  background: #6897d5;
}

.metric-card[data-tone="stone"]::after,
.metric-card[data-tone="stone"] .metric-track span {
  background: #ffaa4a;
}

.metric-card[data-tone="earth"]::after,
.metric-card[data-tone="earth"] .metric-track span {
  background: #b4bbaf;
}

.table-card {
  overflow: hidden;
}

.table-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.8rem;
  border-radius: .72rem;
  border: 1px solid rgba(44, 46, 45, .08);
  background: rgba(123, 209, 170, .18);
  color: rgba(44, 46, 45, .72);
  font-size: .78rem;
  font-weight: 900;
}

.entity-avatar,
.entity-avatar-fallback,
.profile-photo,
.upload-preview,
.table-thumb {
  border-radius: .95rem;
}

.entity-avatar-fallback,
.profile-photo-fallback,
.rated-row .top-rank,
.entity-avatar-wrap i {
  background: linear-gradient(135deg, #7bd1aa, #6897d5);
  color: white;
}

.rated-row,
.specialty-doctor {
  border-radius: 1rem;
  background: rgba(255, 255, 255, .72);
}

.rated-row em,
.specialty-doctor em {
  border-color: rgba(123, 209, 170, .22);
  background: rgba(123, 209, 170, .16);
  color: #318f68;
}

.offer-art {
  background:
    radial-gradient(circle at 18% 18%, rgba(123, 209, 170, .24), transparent 32%),
    linear-gradient(135deg, rgba(249, 249, 250, .98), rgba(239, 247, 247, .98));
}

.live-count {
  background: var(--blue);
  border-color: white;
}

.live-menu-item:hover,
.live-menu-item.unread {
  background: rgba(123, 209, 170, .12);
}

.live-new-mark {
  background: var(--teal);
  color: #17201c;
}

nav.sticky {
  background: rgba(255, 255, 255, .82) !important;
  border-bottom-color: rgba(44, 46, 45, .08) !important;
  box-shadow: 0 14px 32px rgba(63, 87, 111, .08);
}

footer,
.public-footer {
  background: rgba(255, 255, 255, .68);
  border-top: 1px solid rgba(44, 46, 45, .08);
}

.auth-body .w-full.max-w-md {
  max-width: 30rem;
}

.auth-body .card {
  border-color: rgba(44, 46, 45, .08);
  background:
    linear-gradient(135deg, rgba(123, 209, 170, .16), transparent 50%),
    rgba(255, 255, 255, .84);
}

html.dark-mode body,
html.dark-mode body.influmo-app,
html.dark-mode body.influmo-public {
  color: #eef6f2;
  background-color: #121514 !important;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(123, 209, 170, .12), transparent 18rem),
    radial-gradient(circle at 86% 8%, rgba(104, 151, 213, .13), transparent 20rem),
    linear-gradient(180deg, #121514 0%, #171d1b 100%);
}

html.dark-mode .app-sidebar.influmo-sidebar,
html.dark-mode nav.sticky {
  background: rgba(27, 32, 30, .86) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

html.dark-mode .app-sidebar.influmo-sidebar::before {
  border-color: rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(123, 209, 170, .16), rgba(104, 151, 213, .16)),
    rgba(255, 255, 255, .04);
}

html.dark-mode .app-topbar,
html.dark-mode .card,
html.dark-mode .rated-card,
html.dark-mode .offer-card,
html.dark-mode .specialty-band,
html.dark-mode .doctor-qr-card,
html.dark-mode .visit-bundle,
html.dark-mode .visit-diagnosis,
html.dark-mode .quick-create-panel,
html.dark-mode .modal-card,
html.dark-mode .user-chip,
html.dark-mode .permission-help,
html.dark-mode .page-visibility-card,
html.dark-mode .quick-create-card,
html.dark-mode .price-preview,
html.dark-mode .info-tile,
html.dark-mode .workflow-review-card,
html.dark-mode .detail-summary-item {
  background: rgba(28, 34, 32, .86);
  border-color: rgba(255, 255, 255, .1);
  color: #eef6f2;
}

html.dark-mode .btn,
html.dark-mode .input,
html.dark-mode .smart-select-toggle,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .smart-select-panel,
html.dark-mode .live-dropdown,
html.dark-mode .live-toast {
  background: rgba(21, 26, 24, .9);
  border-color: rgba(255, 255, 255, .12);
  color: #eef6f2;
}

html.dark-mode .btn-primary,
html.dark-mode .nav-link.active {
  background: linear-gradient(135deg, #7bd1aa, #afdbdc 62%, #6897d5);
  color: #17201c;
}

html.dark-mode .nav-link,
html.dark-mode .nav-group summary,
html.dark-mode .table td,
html.dark-mode .metric-value,
html.dark-mode .rated-card h3,
html.dark-mode .specialty-head h3,
html.dark-mode .doctor-qr-card b,
html.dark-mode .rated-row,
html.dark-mode .specialty-doctor,
html.dark-mode .quick-create-card summary,
html.dark-mode .visit-diagnosis p,
html.dark-mode header h1,
html.dark-mode main h1,
html.dark-mode main h2 {
  color: #eef6f2;
}

html.dark-mode .table th,
html.dark-mode .table-card-count,
html.dark-mode .metric-track {
  background: rgba(255, 255, 255, .08);
}

html.dark-mode .table th,
html.dark-mode .muted-text,
html.dark-mode .label,
html.dark-mode .text-slate-500,
html.dark-mode .text-slate-600,
html.dark-mode .text-slate-700,
html.dark-mode .metric-kicker {
  color: #adbbb6 !important;
}

@media (max-width: 1023px) {
  .app-topbar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 640px) {
  .app-topbar .flex.items-center.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .app-topbar .btn,
  .app-topbar .btn-primary {
    width: 100%;
    min-width: 0;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero::after {
    display: none;
  }

  .dashboard-actions {
    justify-content: stretch;
  }

  .dashboard-actions .btn {
    flex: 1 1 auto;
  }
}

/* Final brand lock: blue is the primary visual identity. */
:root {
  --ink: #172033;
  --muted: #64748b;
  --line: rgba(37, 99, 235, .14);
  --teal: #2563eb;
  --teal-dark: #1d4ed8;
  --blue: #0284c7;
  --coral: #38bdf8;
  --amber: #93c5fd;
  --shadow-soft: 0 16px 36px rgba(37, 99, 235, .09);
  --shadow-hover: 0 22px 48px rgba(37, 99, 235, .16);
}

body,
body.loopai-app,
body.loopai-public,
body.influmo-app,
body.influmo-public {
  background-color: #f8fbff !important;
  background-image:
    linear-gradient(135deg, rgba(37, 99, 235, .10), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 52%, #f8fbff 100%) !important;
  color: var(--ink);
}

.btn-primary,
html.dark-mode .btn-primary,
.nav-link.active,
html.dark-mode .nav-link.active,
.entity-avatar-fallback,
.profile-photo-fallback,
.rated-row .top-rank,
.entity-avatar-wrap i,
.top-rotator-dots span.active,
.live-count {
  background: linear-gradient(135deg, #2563eb, #0284c7) !important;
  color: #fff !important;
}

.rated-row em,
.specialty-doctor em {
  border-color: rgba(37, 99, 235, .20) !important;
  background: rgba(37, 99, 235, .10) !important;
  color: var(--teal-dark) !important;
}

.app-sidebar.loopai-sidebar::before,
.app-sidebar.influmo-sidebar::before {
  background:
    linear-gradient(180deg, rgba(37, 99, 235, .16), rgba(2, 132, 199, .12)),
    rgba(255, 255, 255, .64) !important;
}

html.dark-mode body,
html.dark-mode body.loopai-app,
html.dark-mode body.loopai-public,
html.dark-mode body.influmo-app,
html.dark-mode body.influmo-public {
  background-color: #0f172a !important;
  background-image:
    linear-gradient(135deg, rgba(37, 99, 235, .18), transparent 26rem),
    linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}