/* ─── Psynote Design System ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  --brand:       #0D9488;
  --brand-dark:  #0F766E;
  --brand-light: #CCFBF1;
  --brand-50:    #F0FDFA;

  --slate-50:    #F8FAFC;
  --slate-100:   #F1F5F9;
  --slate-200:   #E2E8F0;
  --slate-300:   #CBD5E1;
  --slate-400:   #94A3B8;
  --slate-500:   #64748B;
  --slate-600:   #475569;
  --slate-700:   #334155;
  --slate-800:   #1E293B;
  --slate-900:   #0F172A;

  --sidebar-w: 256px;
  --header-h: 56px;

  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.04);
  --tone-positive-bg: #ECFDF5;
  --tone-positive-border: #A7F3D0;
  --tone-positive-text: #047857;
  --tone-negative-bg: #FEF2F2;
  --tone-negative-border: #FECACA;
  --tone-negative-text: #B91C1C;
  --tone-warn-bg: #FFFBEB;
  --tone-warn-border: #FDE68A;
  --tone-warn-text: #B45309;
  --tone-info-bg: #EFF6FF;
  --tone-info-border: #BFDBFE;
  --tone-info-text: #1D4ED8;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --brand:       #2DD4BF;
  --brand-dark:  #14B8A6;
  --brand-light: rgba(45,212,191,.18);
  --brand-50:    #042F2E;

  --slate-50:    #0B1220;
  --slate-100:   #111A2B;
  --slate-200:   #1F2A3D;
  --slate-300:   #2B3A53;
  --slate-400:   #7F8EA3;
  --slate-500:   #A7B4C5;
  --slate-600:   #CBD5E1;
  --slate-700:   #E2E8F0;
  --slate-800:   #EDF2F7;
  --slate-900:   #F8FAFC;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow:    0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 6px 10px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.2);
  --shadow-lg: 0 15px 30px rgba(0,0,0,.45), 0 8px 12px rgba(0,0,0,.25);
  --tone-positive-bg: rgba(16, 185, 129, .16);
  --tone-positive-border: rgba(16, 185, 129, .38);
  --tone-positive-text: #6EE7B7;
  --tone-negative-bg: rgba(239, 68, 68, .16);
  --tone-negative-border: rgba(239, 68, 68, .36);
  --tone-negative-text: #FCA5A5;
  --tone-warn-bg: rgba(245, 158, 11, .18);
  --tone-warn-border: rgba(245, 158, 11, .40);
  --tone-warn-text: #FCD34D;
  --tone-info-bg: rgba(59, 130, 246, .18);
  --tone-info-border: rgba(59, 130, 246, .42);
  --tone-info-text: #93C5FD;

  color-scheme: dark;
}

/* Smooth transition while theme is switching */
:root.theme-animating *,
:root.theme-animating *::before,
:root.theme-animating *::after {
  transition:
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    fill .28s ease,
    stroke .28s ease !important;
}

html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--slate-800);
  background: var(--slate-100);
  -webkit-font-smoothing: antialiased;
}

/* ─── App shell ──────────────────────────────────────────────────────────────── */
#app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#app-shell.hidden, #app-login.hidden { display: none; }

#app-shell,
#app-login {
  opacity: 1;
  transform: translateY(0);
}

.shell-enter-active,
.shell-leave-active {
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.shell-enter-from { opacity: 0; transform: translateY(10px); }
.shell-enter-to   { opacity: 1; transform: translateY(0); }
.shell-leave-from { opacity: 1; transform: translateY(0); }
.shell-leave-to   { opacity: 0; transform: translateY(-8px); }

/* ─── Sidebar ────────────────────────────────────────────────────────────────── */
#sidebar {
  width: 240px;
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
  z-index: 30;
  transition: transform .25s ease;
}

.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-logo img { height: 32px; }

.sidebar-nav {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
  padding: 12px 10px 6px;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.15s; }
.nav-item:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); text-decoration: none; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
  background: rgba(13,148,136,.25);
  color: #5EEAD4;
  font-weight: 600;
}
.nav-item.active svg { opacity: 1; color: #5EEAD4; }

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #CCFBF1;
  background: rgba(13,148,136,.35);
  border: 1px solid rgba(94,234,212,.35);
  border-radius: 999px;
  padding: 3px 6px;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px;
  color: rgba(255,255,255,.7);
  font-size: 12.5px;
}
.sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(13,148,136,.35);
  color: #5EEAD4;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.sidebar-user-role { font-size: 11px; color: rgba(255,255,255,.4); margin: 0; text-transform: capitalize; }
.sidebar-logout {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.4); padding: 6px; border-radius: 8px;
  transition: color .15s, background .15s;
  display: flex; align-items: center;
}
.sidebar-logout:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-theme-toggle {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); padding: 6px; border-radius: 8px;
  transition: color .15s, background .15s;
  display: flex; align-items: center;
}
.sidebar-theme-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ─── Main content area ──────────────────────────────────────────────────────── */
#app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Mobile top bar */
#app-topbar {
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 20;
  position: relative;
}
#app-topbar .topbar-left { display: flex; align-items: center; gap: 12px; }
#btn-menu { background: none; border: none; cursor: pointer; padding: 6px; color: var(--slate-600); display: none; }
#btn-menu svg { width: 22px; height: 22px; }
#topbar-logo { height: 28px; }
.topbar-right { display: flex; align-items: center; gap: 10px; position: relative; }
.topbar-notif-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s, color .15s;
}
.topbar-notif-btn:hover {
  background: var(--slate-50);
  border-color: var(--slate-300);
  color: var(--slate-800);
}
.topbar-notif-btn-icon svg { width: 18px; height: 18px; }
.topbar-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #DC2626;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.topbar-notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 40;
}
.topbar-notif-header,
.topbar-notif-footer {
  padding: 10px 12px;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar-notif-header strong {
  margin: 0;
  font-size: 13px;
  color: var(--slate-800);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar-notif-footer {
  border-top: 1px solid var(--slate-100);
  border-bottom: none;
  justify-content: flex-end;
}
.topbar-notif-list {
  max-height: 420px;
  overflow-y: auto;
}
.topbar-notif-empty {
  padding: 16px;
  color: var(--slate-500);
  font-size: 13px;
  text-align: center;
}
.topbar-notif-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--slate-100);
  background: #fff;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s;
}
.topbar-notif-item:hover { background: var(--slate-50); }
.topbar-notif-item:last-child { border-bottom: none; }
.topbar-notif-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar-notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-800);
}
.topbar-notif-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.topbar-notif-item-message {
  margin: 6px 0 8px;
  font-size: 12px;
  color: var(--slate-600);
}
.topbar-notif-item-time {
  font-size: 11px;
  color: var(--slate-500);
}

#app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  background: var(--slate-100);
}

/* ─── Page header ────────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 700; color: var(--slate-900); margin: 0; }
.page-subtitle { font-size: 13px; color: var(--slate-500); margin: 4px 0 0; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Notifications ─────────────────────────────────────────────────────────── */
.notif-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notif-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 14px;
}
.notif-card.unread {
  border-left: 4px solid var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.notif-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.notif-title-wrap { min-width: 0; }
.notif-type {
  margin: 0 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
}
.notif-title {
  margin: 0;
  font-size: 15px;
  color: var(--slate-800);
}
.notif-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  white-space: nowrap;
}
.notif-time {
  font-size: 12px;
  color: var(--slate-500);
}
.notif-message {
  margin: 10px 0 12px;
  font-size: 13px;
  color: var(--slate-700);
}
.notif-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.notif-pill.unread {
  color: #0F766E;
  background: #CCFBF1;
}
.notif-pill.read {
  color: #475569;
  background: #E2E8F0;
}
.notif-actions {
  display: flex;
  justify-content: flex-end;
}
.notif-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--slate-500);
  font-size: 13px;
}

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  border: 1px solid rgba(226,232,240,.8);
  overflow: hidden;  /* fallback */
  overflow: clip;    /* modern: clips visually, does NOT block child scroll containers */
  transition: box-shadow 0.2s ease;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--slate-100);
  gap: 12px;
  background: var(--slate-50);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--slate-800); margin: 0; letter-spacing: -0.01em; }
.card-body { padding: 20px; }

/* ─── Stat cards ──────────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-label { font-size: 12px; font-weight: 500; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--slate-900); line-height: 1; margin: 0; }
.stat-sub   { font-size: 12px; color: var(--slate-400); margin: 0; }
.stat-icon  { font-size: 24px; }
.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  gap: 20px;
  align-items: start;
}
.dashboard-main {
  display: grid;
  gap: 20px;
}
.dashboard-side {
  display: grid;
  gap: 20px;
}
.dashboard-financial-stat .stat-sub {
  line-height: 1.4;
}
.dashboard-financial-panel .card-body {
  display: grid;
  gap: 16px;
}
.dashboard-financial-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dashboard-financial-kpi {
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.dashboard-financial-kpi-label {
  margin: 0;
  color: var(--slate-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dashboard-financial-kpi-value {
  margin: 6px 0 0;
  color: var(--slate-900);
  font-weight: 700;
  font-size: 15px;
}
.dashboard-financial-kpi-value.is-positive {
  color: #059669;
}
.dashboard-financial-kpi-value.is-negative {
  color: #DC2626;
}
.dashboard-financial-upcoming-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dashboard-financial-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-financial-upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.dashboard-financial-upcoming-name {
  margin: 0;
  font-size: 13px;
  color: var(--slate-800);
}
.dashboard-financial-upcoming-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--slate-500);
}
.dashboard-financial-upcoming-amount {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
}
.dashboard-financial-empty {
  margin: 0;
  color: var(--slate-500);
  font-size: 13px;
}
.dashboard-patient-list { display: flex; flex-direction: column; gap: 0; }
.dashboard-patient-row {
  padding: 12px 20px;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.dashboard-patient-name {
  margin: 0;
  font-weight: 500;
  color: var(--slate-800);
}
.dashboard-patient-meta {
  margin: 0;
  font-size: 12px;
  color: var(--slate-400);
}
.onboarding-card .card-header {
  align-items: flex-start;
}
.onboarding-card,
.onboarding-complete-card {
  border: 1px solid var(--slate-200);
}
.onboarding-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--slate-500);
  max-width: 520px;
}
.onboarding-progress-wrap {
  margin-bottom: 14px;
}
.onboarding-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--slate-500);
}
.onboarding-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--slate-100);
  overflow: hidden;
}
.onboarding-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0D9488, #14B8A6);
}
.onboarding-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.onboarding-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: var(--slate-50);
}
.onboarding-step-check {
  font-weight: 700;
  color: var(--slate-500);
}
.onboarding-step.is-done .onboarding-step-check {
  color: #059669;
}
.onboarding-step-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-800);
}
.onboarding-step-desc {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--slate-500);
}
.onboarding-complete-card {
  border-color: rgba(180, 143, 43, 0.45);
  box-shadow: 0 10px 24px rgba(180, 143, 43, 0.13);
  background: linear-gradient(145deg, rgba(180, 143, 43, 0.12), rgba(180, 143, 43, 0.04));
}
.onboarding-complete-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.onboarding-complete-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(180, 143, 43, 0.5);
  color: #8A6D1A;
  background: rgba(255, 224, 138, 0.32);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
:root[data-theme='dark'] .onboarding-complete-badge {
  color: #FDE68A;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.42);
}
.onboarding-complete-title {
  margin: 9px 0 0;
  font-size: 18px;
  color: var(--slate-900);
  letter-spacing: -0.02em;
}
.onboarding-complete-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-nps-form {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--slate-50);
  background: color-mix(in srgb, var(--slate-50) 92%, var(--brand) 8%);
}
.dashboard-nps-head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--slate-800);
}
.dashboard-nps-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--slate-500);
}
.dashboard-nps-scale {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
}
.dashboard-nps-score-btn {
  border: 1px solid var(--slate-300);
  background: var(--slate-50);
  color: var(--slate-700);
  border-radius: 8px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.dashboard-nps-score-btn:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}
.dashboard-nps-score-btn.is-selected {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13,148,136,.28);
}
.dashboard-nps-legend {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--slate-500);
}
.dashboard-nps-feedback-group {
  margin-top: 12px;
  margin-bottom: 0;
}
.dashboard-nps-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-nps-status {
  margin: 0;
  font-size: 12px;
  color: var(--slate-500);
}
.dashboard-nps-eligibility {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--slate-600);
}
:root[data-theme='dark'] .onboarding-card,
:root[data-theme='dark'] .onboarding-complete-card {
  border-color: #2B3A53;
}
:root[data-theme='dark'] .onboarding-step {
  background: #111A2B;
  border-color: #1F2A3D;
}
:root[data-theme='dark'] .onboarding-progress-track {
  background: #1F2A3D;
}
:root[data-theme='dark'] .onboarding-complete-card {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.14), rgba(15, 23, 42, 0.85));
}
:root[data-theme='dark'] .dashboard-nps-form {
  background: rgba(45, 212, 191, 0.08);
  border-color: #2B3A53;
}
:root[data-theme='dark'] .dashboard-nps-score-btn {
  background: #111A2B;
  border-color: #2B3A53;
  color: #CBD5E1;
}
:root[data-theme='dark'] .dashboard-nps-score-btn:hover {
  color: #99F6E4;
}
:root[data-theme='dark'] .dashboard-nps-legend,
:root[data-theme='dark'] .dashboard-nps-status,
:root[data-theme='dark'] .dashboard-nps-eligibility {
  color: #94A3B8;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.01em;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, #0F766E 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(13,148,136,.3), 0 1px 2px rgba(13,148,136,.2);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0F766E 0%, #0D6B62 100%);
  box-shadow: 0 4px 12px rgba(13,148,136,.4);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

.btn-secondary {
  background: #fff;
  color: var(--slate-700);
  border: 1.5px solid var(--slate-200);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--slate-50);
  border-color: var(--slate-300);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-600);
  border: 1.5px solid transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--slate-100);
  color: var(--slate-900);
}

.btn-danger {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(239,68,68,.3);
}
.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  box-shadow: 0 4px 12px rgba(239,68,68,.4);
  transform: translateY(-1px);
}

.btn-outline-brand {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-outline-brand:hover:not(:disabled) {
  background: var(--brand-light);
}

.btn-sm  { padding: 6px 12px; font-size: 12.5px; border-radius: 6px; }
.btn-lg  { padding: 12px 24px; font-size: 15px; border-radius: 10px; }
.btn-icon { padding: 8px; border-radius: 8px; }

.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

/* ─── Forms ───────────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-label { font-size: 13px; font-weight: 500; color: var(--slate-700); }
.form-label .required { color: #EF4444; margin-left: 2px; }
.form-control {
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid var(--slate-200);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--slate-800);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: inherit;
}
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
.form-control::placeholder { color: var(--slate-400); }
.form-control.is-invalid { border-color: #EF4444; }
.form-error { font-size: 12px; color: #EF4444; margin-top: 2px; }
.form-hint  { font-size: 12px; color: var(--slate-400); margin-top: 2px; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* ─── Tables ──────────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: var(--slate-300) transparent;
}
.table-wrap::-webkit-scrollbar         { height: 5px; }
.table-wrap::-webkit-scrollbar-thumb   { background: var(--slate-300); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-track   { background: transparent; }
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-500);
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  text-align: left;
  white-space: nowrap;
}
table.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
  vertical-align: middle;
}
table.data-table tbody tr:hover { background: var(--slate-50); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table .td-actions { text-align: right; white-space: nowrap; }
table.data-table tbody tr.hl-drag-over > td { background: #EEF2FF; }

/* ─── Search & filter bar ────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-input-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--slate-400); pointer-events: none; }
.search-input { padding-left: 34px !important; }

/* ─── Tabs ───────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  background: var(--slate-100);
  padding: 4px;
  border-radius: 10px;
  width: fit-content;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}
.tab-btn:hover { color: var(--slate-800); background: rgba(255,255,255,.6); text-decoration: none; }
.tab-btn.active {
  background: #fff;
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
}

/* ─── Badge / pill ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
}

/* ─── Session page ───────────────────────────────────────────────────────────── */
.session-page-header {
  margin-bottom: 16px;
}
.session-page-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.session-page-title {
  font-size: 17px;
}
.session-page-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.session-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.session-page-actions .btn {
  justify-content: center;
}
.session-bulk-remove-btn {
  flex: 0 0 auto;
  gap: 6px;
  color: #B91C1C;
  border-color: #FCA5A5;
  background: #fff;
}
.session-bulk-remove-btn:hover {
  background: #FEF2F2;
  border-color: #F87171;
}
.session-progress-card {
  padding: 14px 20px;
  margin-bottom: 20px;
}
.session-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.session-progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
}
.session-progress-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

/* ─── Patient Analytics ─────────────────────────────────────────────────────── */
.analytics-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.analytics-chart-header {
  flex-wrap: wrap;
}

.analytics-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.analytics-chart-mount {
  min-width: 100%;
}

.analytics-program-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.analytics-program-card {
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.analytics-program-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.analytics-program-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-800);
}

.analytics-program-code {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--slate-400);
}

.analytics-program-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}

.analytics-program-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--slate-500);
  flex-wrap: wrap;
}

.analytics-program-bar-block {
  margin-top: 10px;
}

.analytics-program-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--slate-600);
  margin-bottom: 4px;
}

.analytics-program-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--slate-200);
  overflow: hidden;
}

.analytics-program-bar-fill {
  height: 100%;
  border-radius: inherit;
}

.patient-tab-content {
  min-width: 0;
  overflow-x: hidden;
}

.patient-tab-content > * {
  min-width: 0;
}

.patient-analytics-root {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.patient-analytics-root > * {
  min-width: 0;
}

.session-layout { display: flex; gap: 20px; align-items: flex-start; }
.session-programs { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.session-sidebar { width: 280px; flex-shrink: 0; }

.program-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.program-card.complete { border-color: #10B981; }
.program-card-header {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}

.item-menu-btn {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 13px; background: none; border: none;
  cursor: pointer; color: var(--slate-700); transition: background .12s;
}
.item-menu-btn:hover { background: var(--slate-50); }
.item-menu-btn.text-danger { color: #EF4444; }
.item-menu-btn.text-danger:hover { background: #FEF2F2; }
.program-card-title { font-weight: 600; color: var(--slate-800); font-size: 14px; margin: 0; }
.program-card-code  { font-size: 11px; color: var(--slate-400); margin: 2px 0 0; }
.program-card-body  { padding: 0 16px 16px; }

.attempt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.attempt-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 2px solid var(--slate-200);
  background: var(--slate-50);
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--slate-400);
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px;
  font-family: inherit;
}
.attempt-btn:hover { border-color: var(--slate-300); color: var(--slate-600); }
.attempt-btn.performed { background: #10B981; border-color: #10B981; color: #fff; }
.attempt-btn.not-performed { background: #EF4444; border-color: #EF4444; color: #fff; }
.attempt-number { font-size: 11px; }
.attempt-icon   { font-size: 16px; line-height: 1; }

.help-level-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hl-chip {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1.5px solid var(--slate-200);
  background: var(--slate-50);
  font-size: 12px; font-weight: 500;
  color: var(--slate-600);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.hl-chip:hover  { border-color: var(--brand); color: var(--brand); }
.hl-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.prog-row:hover { background: var(--slate-50); }

/* ─── Plan detail ─────────────────────────────────────────────────────────────── */
.plan-detail-header {
  align-items: flex-start;
}
.plan-detail-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.plan-detail-actions {
  margin-left: auto;
}
.plan-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}
.plan-detail-items-card,
.plan-detail-meta-card {
  min-width: 0;
}
.plan-detail-reorder-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--slate-500);
}
.plan-items-list {
  display: flex;
  flex-direction: column;
}
.plan-detail-items-tools {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 420px);
  margin-left: auto;
}
.plan-items-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.plan-items-search-wrap {
  min-width: 0;
  flex: 1;
  width: 100%;
}
.plan-items-summary {
  margin: 0;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--slate-500);
}
.plan-items-search-empty {
  margin: 0;
  padding: 14px 16px 18px;
  color: var(--slate-500);
  font-size: 13px;
}
.plan-item-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-100);
}
.plan-item-card.is-dragging {
  opacity: .8;
  box-shadow: var(--shadow-md);
}
.plan-item-card:last-child {
  border-bottom: none;
}
.plan-item-leading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.plan-item-index {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.plan-item-cb {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}
.plan-item-drag-handle {
  width: 28px;
  height: 28px;
  border: 1px dashed var(--slate-300);
  background: var(--slate-50);
  color: var(--slate-500);
  border-radius: 8px;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.plan-item-drag-handle:active {
  cursor: grabbing;
}
.plan-item-drag-handle svg {
  width: 14px;
  height: 14px;
}
.plan-item-main {
  min-width: 0;
  flex: 1;
}
.plan-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.plan-item-head {
  min-width: 0;
}
.plan-item-name {
  margin: 0;
  color: var(--slate-800);
  font-weight: 600;
  line-height: 1.35;
}
.plan-item-code {
  margin: 2px 0 0;
  color: var(--slate-400);
  font-size: 12px;
}
.plan-item-edit-btn {
  flex-shrink: 0;
}
.plan-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.plan-item-remove-btn {
  color: #DC2626;
}
.plan-item-remove-btn:hover {
  background: #FEF2F2;
}
.plan-item-meta-list {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-item-help-wrap {
  margin-top: 8px;
}
.plan-item-help-label {
  margin: 0;
  color: var(--slate-500);
  font-size: 12px;
}
.plan-item-help-list {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.plan-item-help-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--slate-600);
  background: var(--slate-50);
}
.plan-item-help-empty {
  margin: 6px 0 0;
  color: var(--slate-400);
  font-size: 12px;
}
.plan-item-notes {
  margin: 8px 0 0;
  color: var(--slate-500);
  font-size: 12px;
  line-height: 1.45;
}
.plan-detail-dl {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: 13px;
}
.plan-detail-dl dt {
  margin: 0;
  color: var(--slate-500);
  font-weight: 500;
}
.plan-detail-dl dd {
  margin: 0;
  min-width: 0;
}
.plan-detail-notes {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.5;
  margin: 0;
}
.ai-program-list {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.ai-program-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  border: 1px solid transparent;
}
.ai-program-row.is-selected {
  background: var(--brand-50);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--slate-200));
}
.ai-program-label {
  font-size: 13px;
  min-width: 0;
}
.ai-program-code {
  color: var(--slate-400);
  font-size: 12px;
}

/* ─── Progress bar ───────────────────────────────────────────────────────────── */
.progress-wrap { height: 6px; background: var(--slate-200); border-radius: 99px; overflow: hidden; }
.progress-bar  { height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s ease; }

/* ─── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--slate-200);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-loading {
  display: flex; align-items: center; justify-content: center;
  height: 200px; gap: 12px; color: var(--slate-400);
}

/* ─── Login page ─────────────────────────────────────────────────────────────── */
#app-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--slate-900) 0%, #0F3460 100%);
  padding: 20px;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.login-theme-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: var(--slate-50);
  color: var(--slate-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.login-theme-btn:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}
.login-theme-btn svg { width: 18px; height: 18px; }
.login-logo { display: flex; justify-content: center; margin-bottom: 32px; }
.login-logo img { height: 36px; }
.login-title { font-size: 22px; font-weight: 700; color: var(--slate-900); text-align: center; margin: 0 0 6px; }
.login-sub   { font-size: 13px; color: var(--slate-500); text-align: center; margin: 0 0 28px; }

/* ─── Pagination ─────────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: between; gap: 6px; padding: 16px 20px; }
.pagination-info { font-size: 12px; color: var(--slate-500); flex: 1; }
.pagination-btns { display: flex; gap: 4px; }
.page-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: #fff;
  font-size: 13px; color: var(--slate-600);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s; font-family: inherit;
}
.page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ─── Charts container ───────────────────────────────────────────────────────── */
.chart-container { position: relative; }

.assessment-chart-scroll {
  padding: 0 12px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.assessment-chart-mount {
  min-width: 100%;
}

@media (max-width: 768px) {
  .assessment-chart-mount--medium {
    min-width: clamp(360px, 108vw, 520px);
  }

  .assessment-chart-mount--wide {
    min-width: clamp(420px, 126vw, 680px);
  }
}

/* ─── Empty state ────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 20px; color: var(--slate-400); text-align: center;
}
.empty-state-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state-msg  { font-size: 14px; color: var(--slate-500); margin: 0; }
.empty-state-sub  { font-size: 13px; color: var(--slate-400); margin: 4px 0 16px; }

/* ─── 404 ────────────────────────────────────────────────────────────────────── */
.not-found-page {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; text-align: center; padding: 40px;
}
.not-found-code { font-size: 96px; font-weight: 800; color: var(--slate-200); line-height: 1; margin: 0; }
.not-found-msg  { font-size: 18px; font-weight: 600; color: var(--slate-700); margin: 8px 0; }
.not-found-sub  { font-size: 14px; color: var(--slate-400); margin: 0 0 24px; }

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity 0.2s ease;
}
.modal-overlay.modal-open { opacity: 1; }
.modal-box {
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.1);
  width: 100%;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
}
.modal-overlay.modal-open .modal-box { transform: translateY(0) scale(1); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--slate-100);
  flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--slate-900); margin: 0; }
.modal-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--slate-400); transition: all 0.15s;
}
.modal-close-btn:hover { background: var(--slate-100); color: var(--slate-700); }
.modal-body { padding: 20px 24px; overflow-y: auto; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--slate-100);
  flex-shrink: 0;
}
.modal-error-msg {
  display: none;
  margin: 0;
  margin-right: auto;
  font-size: 13px;
  color: #EF4444;
}

/* ─── Financial module ──────────────────────────────────────────────────────── */
.financial-inline-filters {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.financial-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.financial-action-spread { justify-content: space-between; }

.financial-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.financial-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.financial-stat {
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.financial-stat-label {
  margin: 0;
  color: var(--slate-500);
  font-size: 12px;
}
.financial-stat-value {
  display: block;
  margin-top: 6px;
  color: var(--slate-900);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.financial-stat.brand { border-color: rgba(13, 148, 136, 0.35); }
.financial-stat.positive { border-color: rgba(5, 150, 105, 0.3); }
.financial-stat.negative { border-color: rgba(220, 38, 38, 0.28); }
.financial-stat.warn { border-color: rgba(245, 158, 11, 0.3); }
.financial-stat.info { border-color: rgba(37, 99, 235, 0.28); }

.financial-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--slate-700);
}
.financial-check-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.financial-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.financial-pagination .is-disabled {
  opacity: .5;
  pointer-events: none;
}

.financial-pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--slate-700);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 8px;
}
.financial-audit-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.financial-preview-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Melhorias visuais financeiras */
.financial-stat-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--slate-500);
  margin-bottom: 4px;
}
.financial-stat.brand .financial-stat-icon { color: #0D9488; }
.financial-stat.positive .financial-stat-icon { color: #059669; }
.financial-stat.negative .financial-stat-icon { color: #DC2626; }
.financial-stat.warn .financial-stat-icon { color: #D97706; }
.financial-stat.info .financial-stat-icon { color: #2563EB; }

.financial-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.financial-filter-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.financial-filter-preset {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  color: var(--slate-600);
  transition: all .15s;
}
.financial-filter-preset:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* Melhorar a tabela de transações - ações mais compactas */
.td-actions-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.td-actions-compact .btn-icon-sm {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 11px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

/* ── Tablet / small desktop (≤ 768px) */
@media (max-width: 768px) {
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    z-index: 30;
    max-width: min(86vw, 320px);
  }
  #sidebar.mobile-open { transform: translateX(0); }

  #sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 25; display: none;
  }
  #sidebar.mobile-open ~ #sidebar-backdrop { display: block; }

  #btn-menu { display: inline-flex; }
  #btn-menu {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
  }

  #app-topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  #app-content { padding: 16px; }

  .session-layout { flex-direction: column; }
  .session-sidebar { width: 100%; }
  .plan-detail-layout { grid-template-columns: 1fr; }

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

  .page-header { gap: 8px; }
  .page-header .btn-group { order: 3; width: 100%; }

  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-financial-kpis { grid-template-columns: 1fr 1fr; }
  .dashboard-nps-scale {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .onboarding-complete-head { flex-direction: column; }

  .financial-two-col { grid-template-columns: 1fr; }
  .financial-stat-grid { grid-template-columns: 1fr 1fr; }
  .financial-audit-detail-grid { grid-template-columns: 1fr; }

  /* Tables: reduce cell padding */
  .table-wrap {
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    background: #fff;
  }
  table.data-table { min-width: 680px; }
  table.data-table th { padding: 8px 12px; }
  table.data-table td { padding: 10px 12px; }

  /* Card padding */
  .card-body { padding: 16px; }
  .card-header { padding: 12px 16px; }

  /* Tabs: allow wrapping */
  .tabs {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge legacy */
  }
  .tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari/Android */
  .tab-btn { flex: 0 0 auto; }
}

/* ── Mobile (≤ 540px) */
@media (max-width: 540px) {
  #app-content { padding: 14px; }

  /* Page header: stack vertically */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header > div { width: 100%; }
  .page-subtitle { margin-top: 6px; line-height: 1.45; }
  .session-page-header-main {
    width: 100%;
    align-items: flex-start;
  }
  .session-page-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .session-page-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .session-bulk-remove-btn {
    flex: 1 1 100%;
  }
  .session-progress-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .analytics-toolbar {
    justify-content: flex-start;
  }
  .analytics-chart-header .btn {
    width: 100%;
    justify-content: center;
  }
  .plan-detail-header-main {
    width: 100%;
    align-items: flex-start;
  }
  .plan-detail-items-tools {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .plan-items-bulk-actions {
    justify-content: flex-start;
  }
  .plan-items-bulk-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .plan-items-summary {
    text-align: right;
  }
  .plan-detail-actions {
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }
  .plan-detail-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .plan-item-card {
    padding: 12px;
    gap: 10px;
    flex-direction: column;
  }
  .plan-item-top {
    flex-direction: column;
    align-items: stretch;
  }
  .plan-item-leading {
    width: 100%;
    gap: 8px;
    flex-direction: row;
    justify-content: flex-start;
  }
  .plan-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .plan-item-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .plan-detail-dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .ai-program-list {
    max-height: 220px;
  }

  /* Modal: bottom sheet on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    max-width: 100% !important;
  }
  .modal-header { padding: 16px 18px 12px; }
  .modal-body   { padding: 14px 18px; }
  .modal-footer {
    padding: 12px 18px 24px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
  .modal-error-msg { flex: 1 1 100%; margin-right: 0; }

  /* Card padding tighter */
  .card-body   { padding: 12px 14px; }
  .card-header { padding: 10px 14px; }

  /* Financial inline filters: full-width on mobile */
  .financial-inline-filters {
    gap: 8px;
  }
  .financial-inline-filters > select.form-control,
  .financial-inline-filters > .search-input-wrap {
    flex: 1 1 100%;
    max-width: 100% !important;
    min-width: 0;
  }
  .financial-inline-filters > .form-group {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
  }
  .financial-inline-filters > .financial-check-inline { flex: 0 0 auto; }

  /* Action row spread: stack on mobile */
  .financial-action-spread {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .financial-action-spread > .financial-action-row {
    flex-wrap: wrap;
  }

  /* Dashboard financial */
  .dashboard-financial-kpis { grid-template-columns: 1fr; }

  /* Stat grid: 2 cols kept */
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .financial-stat-grid { grid-template-columns: 1fr 1fr; }

  /* Notification dropdown: full width usable on mobile */
  .topbar-right { position: static; }
  .topbar-notif-dropdown {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top) + 8px);
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    width: auto;
    max-height: min(70vh, 520px);
    border-radius: 12px;
  }

  .settings-account-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .settings-integration-grid { grid-template-columns: 1fr; }
  .settings-integration-header { flex-wrap: wrap; }
}

/* ── Small mobile (≤ 390px) */
@media (max-width: 390px) {
  #app-content { padding: 12px; }

  .card-body   { padding: 12px; }
  .card-header { padding: 10px 12px; }

  .stat-grid { grid-template-columns: 1fr; }
  .financial-stat-grid { grid-template-columns: 1fr; }

  table.data-table th { padding: 6px 8px; font-size: 10px; }
  table.data-table td { padding: 8px 8px; font-size: 12.5px; }
  table.data-table { min-width: 620px; }

  .attempt-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }

  .btn { padding: 8px 14px; font-size: 13px; }
  .btn.btn-sm { padding: 5px 9px; font-size: 12px; }

  .page-title { font-size: 18px; }

  /* Full-width form groups in filters on very small screens */
  .financial-inline-filters > .form-group {
    flex: 1 1 100%;
  }

  .financial-filter-preset { padding: 3px 8px; font-size: 11px; }
}

/* ─── Misc ───────────────────────────────────────────────────────────────────── */
.text-brand  { color: var(--brand); }
.text-muted  { color: var(--slate-500); }
.text-danger { color: #EF4444; }
.text-success{ color: #10B981; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.font-mono   { font-family: ui-monospace, monospace; font-size: 12px; }

.divider { height: 1px; background: var(--slate-100); margin: 20px 0; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utility visibility */
.hidden { display: none !important; }

/* ─── Theme controls (Settings) ─────────────────────────────────────────────── */
.theme-options { display: flex; flex-direction: column; gap: 10px; }
.theme-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
}
.theme-option input[type='radio'] {
  margin-top: 2px;
  accent-color: var(--brand);
}
.theme-option-content { display: flex; flex-direction: column; gap: 2px; }
.theme-option-title { font-size: 13px; font-weight: 600; color: var(--slate-800); }
.theme-option-description { font-size: 12px; color: var(--slate-500); }
.theme-status {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.theme-status-label { font-size: 12px; color: var(--slate-500); }

/* ─── My Account definition list (Settings) ─────────────────────────────────── */
.settings-account-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  font-size: 13px;
  margin: 0;
}
.settings-account-dl dt {
  margin: 0;
  color: var(--slate-500);
  font-weight: 500;
}
.settings-account-dl dd {
  margin: 0;
  color: var(--slate-700);
}
:root[data-theme='dark'] .settings-account-dl dt { color: #94A3B8; }
:root[data-theme='dark'] .settings-account-dl dd { color: #CBD5E1; }

/* ─── Calendar integration cards (Settings) ────────────────────────────────── */
.settings-integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.settings-integration-card {
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: var(--slate-50);
  padding: 14px;
}
.settings-integration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.settings-integration-header h3 {
  margin: 0;
  font-size: 14px;
  color: var(--slate-800);
}
.settings-integration-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: 12px;
}
.settings-integration-meta dt {
  margin: 0;
  color: var(--slate-500);
}
.settings-integration-meta dd {
  margin: 0;
  color: var(--slate-700);
  min-width: 0;
  overflow-wrap: anywhere;
}
.settings-integration-error {
  margin: 12px 0 0;
  font-size: 12px;
  color: #b91c1c;
  display: flex;
  gap: 6px;
  align-items: center;
}
.settings-integration-error svg { flex-shrink: 0; }
.settings-integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ─── Dark mode overrides ───────────────────────────────────────────────────── */
:root[data-theme='dark'] #sidebar {
  background: linear-gradient(180deg, #020617 0%, #0B1220 100%);
  border-right: 1px solid rgba(148,163,184,.12);
}

:root[data-theme='dark'] #app-topbar,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .stat-card,
:root[data-theme='dark'] .btn-secondary,
:root[data-theme='dark'] .form-control,
:root[data-theme='dark'] .tab-btn.active,
:root[data-theme='dark'] .program-card,
:root[data-theme='dark'] .page-btn,
:root[data-theme='dark'] .modal-box {
  background: #111A2B;
  border-color: #1F2A3D;
}

:root[data-theme='dark'] .card-header,
:root[data-theme='dark'] table.data-table th,
:root[data-theme='dark'] .tabs {
  background: #0B1220;
}

:root[data-theme='dark'] .modal-header,
:root[data-theme='dark'] .modal-footer,
:root[data-theme='dark'] .card-header,
:root[data-theme='dark'] .divider,
:root[data-theme='dark'] table.data-table th,
:root[data-theme='dark'] table.data-table td,
:root[data-theme='dark'] .pagination,
:root[data-theme='dark'] .theme-status {
  border-color: #1F2A3D;
}

:root[data-theme='dark'] #app-content { background: #0B1220; }
:root[data-theme='dark'] .search-input-wrap svg { color: var(--slate-500); }
:root[data-theme='dark'] table.data-table tbody tr:hover,
:root[data-theme='dark'] .prog-row:hover,
:root[data-theme='dark'] .item-menu-btn:hover { background: #0F172A; }
:root[data-theme='dark'] table.data-table tbody tr.hl-drag-over > td { background: #1A2540; }
:root[data-theme='dark'] .item-menu-btn.text-danger:hover { background: #3A1A22; }
:root[data-theme='dark'] .session-bulk-remove-btn:hover {
  background: #3A1A22;
  border-color: #7F1D1D;
}
:root[data-theme='dark'] .session-bulk-remove-btn {
  color: #FCA5A5;
  border-color: #7F1D1D;
  background: #111A2B;
}
:root[data-theme='dark'] .analytics-program-card {
  background: #111A2B;
  border-color: #1F2A3D;
}

:root[data-theme='dark'] .btn-secondary:hover:not(:disabled),
:root[data-theme='dark'] .tab-btn:hover {
  background: #1A2538;
  border-color: #2B3A53;
}

:root[data-theme='dark'] .btn-ghost:hover:not(:disabled) { background: #1A2538; }

:root[data-theme='dark'] .modal-close-btn:hover { background: #1A2538; }
:root[data-theme='dark'] .login-theme-btn:hover { background: #1A2538; }

:root[data-theme='dark'] .login-card {
  background: #111A2B;
  border: 1px solid #1F2A3D;
}

:root[data-theme='dark'] .not-found-code { color: #1F2A3D; }
:root[data-theme='dark'] .topbar-notif-btn,
:root[data-theme='dark'] .topbar-notif-dropdown,
:root[data-theme='dark'] .topbar-notif-item {
  background: #111A2B;
  border-color: #1F2A3D;
}
:root[data-theme='dark'] .topbar-notif-btn:hover,
:root[data-theme='dark'] .topbar-notif-item:hover { background: #1A2538; }
:root[data-theme='dark'] .topbar-notif-header,
:root[data-theme='dark'] .topbar-notif-footer,
:root[data-theme='dark'] .topbar-notif-item { border-color: #1F2A3D; }
:root[data-theme='dark'] .topbar-notif-item-title,
:root[data-theme='dark'] .topbar-notif-header strong { color: #E2E8F0; }
:root[data-theme='dark'] .topbar-notif-item-message { color: #CBD5E1; }
:root[data-theme='dark'] .topbar-notif-item-time,
:root[data-theme='dark'] .topbar-notif-empty { color: #94A3B8; }
:root[data-theme='dark'] .topbar-notif-badge { border-color: #111A2B; }
:root[data-theme='dark'] .notif-card { background: #111A2B; border-color: #1F2A3D; }
:root[data-theme='dark'] .notif-card.unread { border-left-color: #14B8A6; }
:root[data-theme='dark'] .notif-title { color: #E2E8F0; }
:root[data-theme='dark'] .notif-message { color: #CBD5E1; }
:root[data-theme='dark'] .notif-pill.read { color: #CBD5E1; background: #334155; }
:root[data-theme='dark'] .settings-integration-card { background: #111A2B; border-color: #1F2A3D; }
:root[data-theme='dark'] .settings-integration-header h3 { color: #E2E8F0; }
:root[data-theme='dark'] .settings-integration-meta dt { color: #94A3B8; }
:root[data-theme='dark'] .settings-integration-meta dd { color: #CBD5E1; }
:root[data-theme='dark'] .settings-integration-error { color: #fca5a5; }
:root[data-theme='dark'] .financial-stat {
  background: #111A2B;
  border-color: #1F2A3D;
}
:root[data-theme='dark'] .financial-stat-label { color: #94A3B8; }
:root[data-theme='dark'] .financial-stat-value { color: #E2E8F0; }
:root[data-theme='dark'] .financial-pre {
  background: #0B1220;
  border-color: #1F2A3D;
  color: #CBD5E1;
}
:root[data-theme='dark'] .financial-filter-preset {
  background: #111A2B;
  border-color: #1F2A3D;
  color: #CBD5E1;
}
:root[data-theme='dark'] .financial-filter-preset:hover {
  border-color: rgba(13, 148, 136, 0.5);
  color: #99F6E4;
}
:root[data-theme='dark'] .dashboard-patient-row {
  border-color: #1F2A3D;
}
:root[data-theme='dark'] .dashboard-patient-name {
  color: #E2E8F0;
}
:root[data-theme='dark'] .dashboard-patient-meta {
  color: #94A3B8;
}
:root[data-theme='dark'] .dashboard-financial-kpi,
:root[data-theme='dark'] .dashboard-financial-upcoming-item {
  background: #111A2B;
  border-color: #1F2A3D;
}
:root[data-theme='dark'] .dashboard-financial-kpi-label,
:root[data-theme='dark'] .dashboard-financial-upcoming-title,
:root[data-theme='dark'] .dashboard-financial-upcoming-meta,
:root[data-theme='dark'] .dashboard-financial-empty {
  color: #94A3B8;
}
:root[data-theme='dark'] .dashboard-financial-kpi-value,
:root[data-theme='dark'] .dashboard-financial-upcoming-name,
:root[data-theme='dark'] .dashboard-financial-upcoming-amount {
  color: #E2E8F0;
}
:root[data-theme='dark'] .dashboard-financial-kpi-value.is-positive {
  color: #6EE7B7;
}
:root[data-theme='dark'] .dashboard-financial-kpi-value.is-negative {
  color: #FCA5A5;
}
:root[data-theme='dark'] .table-wrap {
  background: #111A2B;
  border-color: #1F2A3D;
}
:root[data-theme='dark'] .plan-item-help-chip {
  background: #111A2B;
  border-color: #2B3A53;
  color: #CBD5E1;
}
:root[data-theme='dark'] .plan-item-drag-handle {
  background: #111A2B;
  border-color: #2B3A53;
  color: #94A3B8;
}
:root[data-theme='dark'] .plan-item-remove-btn:hover {
  background: #3A1A22;
}
:root[data-theme='dark'] .ai-program-list {
  border-color: #2B3A53;
  background: #111A2B;
}
:root[data-theme='dark'] .ai-program-row.is-selected {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.4);
}

/* Tailwind utility overrides used in templates */
:root[data-theme='dark'] .bg-slate-100 { background-color: #1F2A3D !important; }
:root[data-theme='dark'] .text-slate-600 { color: #CBD5E1 !important; }
:root[data-theme='dark'] .bg-emerald-100 { background-color: rgba(16,185,129,.22) !important; }
:root[data-theme='dark'] .text-emerald-700 { color: #6EE7B7 !important; }
:root[data-theme='dark'] .bg-purple-100 { background-color: rgba(168,85,247,.24) !important; }
:root[data-theme='dark'] .text-purple-700 { color: #D8B4FE !important; }

@media (prefers-reduced-motion: reduce) {
  .shell-enter-active,
  .shell-leave-active {
    transition: none !important;
  }
}

/* ─── Password rules ────────────────────────────────────────────────────────── */
.pw-rule {
  margin: 0;
  font-size: 12px;
  color: var(--slate-400);
  transition: color .2s;
}

/* ─── Form section label ────────────────────────────────────────────────────── */
.form-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-400);
  margin: 0 0 12px;
}

/* ─── Detail definition list ────────────────────────────────────────────────── */
.detail-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  margin: 0;
}
.detail-dl dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-500);
  white-space: nowrap;
}
.detail-dl dd {
  margin: 0;
  color: var(--slate-800);
  font-size: 13px;
}
:root[data-theme='dark'] .detail-dl dd { color: var(--slate-800); }

/* ═══════════════════════════════════════════════════════════════════════════════
   AGENDA — Calendar
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────────────────────────── */
.cal-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--slate-100);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  z-index: 10;
}
:root[data-theme='dark'] .cal-header { background: var(--slate-100); }

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}

.cal-today-btn {
  font-size: 13px;
  padding: 6px 14px;
  height: 32px;
}

.cal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 0 8px;
  white-space: nowrap;
}

.cal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-view-switch {
  display: flex;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  overflow: hidden;
}

.cal-view-btn {
  border: none;
  background: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  border-right: 1px solid var(--slate-200);
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover  { background: var(--slate-100); color: var(--slate-800); }
.cal-view-btn.active { background: var(--brand); color: #fff; }

/* ── Calendar body ──────────────────────────────────────────────────────────── */
.cal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Month view ─────────────────────────────────────────────────────────────── */
.cal-month-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}
:root[data-theme='dark'] .cal-month-header { background: var(--slate-100); }

.cal-month-dow {
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  overflow-y: auto;
}

.cal-month-cell {
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  padding: 6px 6px 4px;
  min-height: 100px;
  background: #fff;
  cursor: pointer;
  transition: background .12s;
}
:root[data-theme='dark'] .cal-month-cell { background: var(--slate-100); }
.cal-month-cell:hover { background: var(--slate-50); }
:root[data-theme='dark'] .cal-month-cell:hover { background: var(--slate-200); }
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-cell--other { opacity: .45; }
.cal-month-cell--today { background: var(--brand-50); }
:root[data-theme='dark'] .cal-month-cell--today { background: var(--brand-50); }
.cal-day-past { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px) !important; opacity: 0.6; }
:root[data-theme='dark'] .cal-day-past { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px) !important; opacity: 0.5; }

.cal-month-day-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-700);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-bottom: 4px;
}

.cal-today-num {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.cal-month-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter .12s;
  line-height: 1.5;
}
.cal-pill:hover { filter: brightness(.92); }
.cal-pill.cal-ev--done      { opacity: .6; }
.cal-pill.cal-ev--cancelled { opacity: .45; text-decoration: line-through; }
.cal-pill.cal-event-selected {
  outline: 2px solid var(--brand-dark);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(13,148,136,.25);
}

.cal-month-more {
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
}
.cal-month-more:hover { background: var(--brand-light); }

/* ── Week / Day grid ────────────────────────────────────────────────────────── */
.cal-grid-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.cal-grid-header {
  display: flex;
  border-bottom: 1px solid var(--slate-200);
  background: #fff;
  flex-shrink: 0;
}
:root[data-theme='dark'] .cal-grid-header { background: var(--slate-100); }

.cal-time-gutter-top {
  width: 56px;
  flex-shrink: 0;
  border-right: 1px solid var(--slate-200);
}

.cal-col-headers {
  flex: 1;
  display: flex;
}

.cal-col-header {
  flex: 1;
  text-align: center;
  padding: 10px 4px 8px;
  cursor: pointer;
  transition: background .12s;
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cal-col-header:last-child { border-right: none; }
.cal-col-header:hover { background: var(--slate-50); }
:root[data-theme='dark'] .cal-col-header:hover { background: var(--slate-200); }
.cal-col-header.cal-col-today { background: var(--brand-50); }

.cal-col-dow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
}

.cal-col-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--slate-800);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-col-today .cal-col-num { color: var(--brand); }

/* All-day row */
.cal-allday-row {
  display: flex;
  border-bottom: 1px solid var(--slate-200);
  background: #fff;
  flex-shrink: 0;
  min-height: 32px;
}
:root[data-theme='dark'] .cal-allday-row { background: var(--slate-100); }

.cal-time-gutter-allday {
  width: 56px;
  flex-shrink: 0;
  border-right: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-allday-label {
  font-size: 10px;
  color: var(--slate-400);
  writing-mode: horizontal-tb;
  text-align: center;
  white-space: nowrap;
  font-style: italic;
}

.cal-allday-cols {
  flex: 1;
  display: flex;
}

.cal-allday-col {
  flex: 1;
  padding: 4px 2px;
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 32px;
  cursor: pointer;
}
.cal-allday-col:last-child { border-right: none; }

/* Scrollable grid */
.cal-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.cal-grid-inner {
  display: flex;
  position: relative;
}

.cal-time-col {
  width: 56px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--slate-200);
}

.cal-hour-label {
  position: absolute;
  right: 8px;
  font-size: 10px;
  color: var(--slate-400);
  transform: translateY(-50%);
  white-space: nowrap;
  user-select: none;
}

.cal-days-grid {
  flex: 1;
  position: relative;
  display: flex;
}

.cal-bg-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cal-hour-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--slate-200);
}

.cal-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #EF4444;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(239,68,68,0.5);
}

.cal-now-dot {
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.4);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.cal-day-col {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--slate-200);
  cursor: pointer;
}
.cal-day-col:last-child { border-right: none; }

/* Event blocks */
.cal-event-block {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  cursor: grab;
  transition: filter .15s, box-shadow .15s, transform .15s;
  user-select: none;
  z-index: 2;
  min-height: 28px;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cal-event-block:hover {
  filter: brightness(.95);
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
  z-index: 3;
  transform: translateY(-1px);
}
.cal-event-block:active {
  cursor: grabbing;
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

.cal-event-block.cal-ev--done      { opacity: .6; }
.cal-event-block.cal-ev--cancelled { opacity: .45; }
.cal-event-block.cal-ev--cancelled .cal-event-title { text-decoration: line-through; }
.cal-event-block.cal-event-selected {
  box-shadow: 0 0 0 2px var(--brand-dark), 0 10px 20px rgba(0,0,0,.2);
  transform: translateY(-1px);
}

.cal-event-inner {
  padding: 4px 6px;
  height: 100%;
  overflow: hidden;
}

.cal-event-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event-time {
  font-size: 11px;
  opacity: .85;
  margin-top: 1px;
}

.cal-event-loc {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: .85;
  margin-top: 2px;
}
.cal-event-loc svg { width: 11px; height: 11px; flex-shrink: 0; }

.cal-event-desc {
  font-size: 11px;
  opacity: .8;
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Resize handle */
.cal-event-resize {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-event-resize::after {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.5);
}

/* Hover time indicator */
.cal-hover-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--brand);
  opacity: .5;
  pointer-events: none;
  z-index: 8;
  display: none;
}
.cal-hover-line::before {
  content: attr(data-time);
  position: absolute;
  left: -54px;
  top: -8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--brand);
  background: var(--slate-50);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
:root[data-theme='dark'] .cal-hover-line::before { background: var(--slate-200); }
.cal-day-col:hover { background: rgba(13,148,136,.03); }

/* Ghost while creating */
.cal-creating-ghost {
  position: absolute;
  border-radius: 6px;
  background: var(--brand);
  opacity: .35;
  pointer-events: none;
  z-index: 10;
  border: 2px dashed var(--brand-dark);
}

/* ── Event detail modal ──────────────────────────────────────────────────────── */
.cal-detail {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  margin-bottom: 16px;
}

.cal-detail-color-bar {
  height: 6px;
}

.cal-detail-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}
:root[data-theme='dark'] .cal-detail-body { background: var(--slate-100); }

.cal-detail-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}
.cal-detail-title.cal-ev--done      { opacity: .7; }
.cal-detail-title.cal-ev--cancelled { text-decoration: line-through; opacity: .6; }

.cal-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--slate-700);
}
.cal-detail-row svg { flex-shrink: 0; color: var(--slate-500); width: 16px; height: 16px; }

.cal-detail-desc {
  font-size: 13px;
  color: var(--slate-600);
  padding: 10px 12px;
  background: var(--slate-100);
  border-radius: 8px;
  white-space: pre-wrap;
}
:root[data-theme='dark'] .cal-detail-desc { background: var(--slate-200); }

.cal-detail-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cal-detail-status svg { width: 14px; height: 14px; }

.cal-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.cal-detail-actions .btn { gap: 6px; font-size: 13px; }
.cal-detail-actions .btn svg { width: 14px; height: 14px; }
.text-red-500 { color: #EF4444 !important; }

/* ── Color picker ────────────────────────────────────────────────────────────── */
.cal-color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cal-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}
.cal-color-swatch:hover   { transform: scale(1.15); }
.cal-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px currentColor, 0 0 0 4px transparent;
  transform: scale(1.1);
}

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cal-header { padding: 10px 12px; align-items: flex-start; }
  .cal-title  {
    font-size: 14px;
    margin-left: 4px;
    white-space: normal;
    line-height: 1.3;
  }
  .cal-actions span { display: none; }  /* hide "Novo evento" label */
  .cal-nav { width: 100%; justify-content: space-between; }
  .cal-actions { width: 100%; justify-content: space-between; }
  .cal-view-switch { flex: 1; min-width: 0; }
  .cal-view-btn { flex: 1; padding: 6px 8px; }

  /* Force day view on mobile */
  .cal-view-btn[data-view="week"]  { display: none; }

  .cal-month-cell { min-height: 70px; padding: 4px 2px 2px; }
  .cal-month-dow  { font-size: 10px; padding: 6px 2px; }
  .cal-month-wrap { overflow-x: auto; }
  .cal-month-header,
  .cal-month-grid { min-width: 560px; }

  .cal-time-gutter-top,
  .cal-time-gutter-allday,
  .cal-time-col { width: 40px; }

  .cal-hour-label { font-size: 9px; right: 4px; }
}

@media (max-width: 540px) {
  .cal-event-title { font-size: 11px; }
  .cal-event-time { font-size: 10px; }
  .cal-event-loc,
  .cal-event-desc { display: none; }
}

/* ── Evolution Notes ────────────────────────────────────────────────────────── */

/* ── Signature Cards / Pads ─────────────────────────────────────────────────── */
.signature-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.signature-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.signature-card-actions .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.signature-preview-surface {
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 88px;
}
:root[data-theme='dark'] .signature-preview-surface {
  background: #fff;
  border-color: #2B3A53;
}
.signature-pad-shell {
  border: 1px dashed var(--slate-300);
  border-radius: 10px;
  background: var(--slate-50);
  padding: 8px;
}
.signature-pad-canvas {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  background: #fff;
}
.signature-pad-tools {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 540px) {
  .signature-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .signature-card-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    min-width: 0;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .signature-pad-tools .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Filter bar */
.evo-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--slate-200);
  flex-wrap: wrap;
}
.evo-search-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
}
.evo-search-wrap > svg {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: var(--slate-400);
  pointer-events: none;
  flex-shrink: 0;
}
.evo-search-input { padding-left: 30px !important; }
.evo-date-input   { width: 144px; flex-shrink: 0; }

.evo-load-more-wrap { text-align: center; padding: 12px 0 8px; }
.evo-total-label    { text-align: center; font-size: .78rem; color: var(--slate-400); padding: 10px 0 6px; margin: 0; }

@media (max-width: 540px) {
  .evo-search-wrap { flex: 1 0 100%; }
  .evo-date-input  { flex: 1; min-width: 120px; }
}

:root[data-theme='dark'] .evo-filter-bar { border-color: #1F2A3D; }

.evo-note-item { padding: 16px 0; }
.evo-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.evo-note-date {
  font-weight: 600;
  font-size: .85rem;
  color: var(--brand);
  margin-right: 10px;
}
.evo-note-title {
  font-size: .9rem;
  font-weight: 500;
  color: var(--slate-800);
}
.evo-note-actions { display: flex; gap: 4px; }
.evo-note-content {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--slate-800);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.evo-note-preview {
  max-height: 200px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.evo-expand-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-size: .8rem;
  padding: 4px 0 0;
  margin-top: 2px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.evo-expand-btn:hover { opacity: .75; }
.evo-divider { border: none; border-top: 1px solid var(--slate-200); margin: 0; }

/* ── Rich Text Editor ───────────────────────────────────────────────────────── */

.rich-editor-wrap {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.rich-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  flex-wrap: wrap;
}
.rte-btn {
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--slate-700);
  line-height: 1;
  transition: background .15s;
}
.rte-btn:hover { background: var(--slate-200); }
.rte-sep {
  width: 1px;
  height: 18px;
  background: var(--slate-200);
  margin: 0 4px;
}
.rich-editor {
  min-height: 160px;
  padding: 12px;
  outline: none;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--slate-800);
  background: #fff;
}
.rich-editor:focus { box-shadow: inset 0 0 0 2px var(--brand); }
.rich-content {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--slate-800);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.rich-content h1, .rich-content h2, .rich-content h3 { color: inherit; }
.rich-content h3 { font-size: 1rem; font-weight: 600; margin: 8px 0 4px; }
.rich-content ul, .rich-content ol { padding-left: 20px; margin: 4px 0; }
.rich-editor h1, .rich-editor h2, .rich-editor h3 { color: inherit; }

/* ── Anamnese Templates (builder) ───────────────────────────────────────────── */

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.template-card { transition: box-shadow .15s; }
.template-card:hover { box-shadow: var(--shadow-md); }

.builder-layout { }
.builder-blocks { display: flex; flex-direction: column; gap: 12px; }

/* Two-column editor + palette layout */
.builder-editor-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
}

/* Sticky palette on desktop */
@media (min-width: 641px) {
  .builder-palette-card {
    position: sticky;
    top: 16px;
  }
  .block-palette-btn {
    width: 100%;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 7px 10px !important;
    font-size: .85rem;
    border-radius: 6px;
  }
}

/* Builder meta fields: side-by-side on ≥480px, stacked on smaller */
.builder-meta-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 479px) {
  .builder-meta-body { grid-template-columns: 1fr; }
}

/* Builder page header: wrap on mobile */
.builder-page-header { flex-wrap: wrap; gap: 10px; }

/* ── Builder FAB + bottom sheet (mobile only) ────────────────────────────────── */

/* Hidden everywhere by default; media query enables on mobile */
.builder-fab,
.builder-sheet,
.builder-sheet-overlay { display: none; }

@media (max-width: 640px) {
  /* Hide desktop palette */
  .builder-palette-card { display: none; }

  /* FAB */
  .builder-fab {
    display: flex;
    align-items: center;
    gap: 5px;
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    background: var(--brand);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 120;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    transition: opacity .15s, transform .15s;
    opacity: .9;
  }
  .builder-fab svg { width: 15px; height: 15px; flex-shrink: 0; }
  .builder-fab:active { transform: scale(.95); }
  .builder-fab.builder-fab-open { opacity: .7; }
  .builder-fab::after { content: 'Bloco'; }

  /* Sheet overlay */
  .builder-sheet-overlay {
    display: none; /* shown only when open */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 118;
    animation: fadeIn .2s;
  }
  .builder-sheet-overlay.builder-sheet-overlay-open { display: block; }

  /* Sheet panel — always in DOM on mobile; transform controls visibility */
  .builder-sheet {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 119;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 32px rgba(0,0,0,.18);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    max-height: 74vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .builder-sheet.builder-sheet-open { transform: translateY(0); }

  .builder-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--slate-200);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .builder-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 1px solid var(--slate-200);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
  }
  .builder-sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }
  .builder-sheet-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-size: .82rem;
    color: var(--slate-700);
    text-align: center;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.3;
  }
  .builder-sheet-btn:active,
  .builder-sheet-btn:hover { background: var(--slate-50); border-color: var(--brand); color: var(--brand); }
  .builder-sheet-btn-icon { display: flex; }
  .builder-sheet-btn-icon svg { width: 20px; height: 20px; }

  /* Dark */
  :root[data-theme='dark'] .builder-sheet { background: #111A2B; }
  :root[data-theme='dark'] .builder-sheet-handle { background: #2B3A53; }
  :root[data-theme='dark'] .builder-sheet-header { border-color: #1F2A3D; background: #111A2B; }
  :root[data-theme='dark'] .builder-sheet-btn { border-color: #1F2A3D; color: #94A3B8; }
  :root[data-theme='dark'] .builder-sheet-btn:hover { background: #1A2538; border-color: var(--brand); color: var(--brand); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.builder-empty-hint {
  text-align: center;
  color: var(--slate-500);
  font-size: .9rem;
  padding: 32px;
  background: var(--slate-50);
  border: 2px dashed var(--slate-200);
  border-radius: var(--radius);
  margin-top: 8px;
}

.builder-block-item {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
.block-type-badge {
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.block-controls { display: flex; gap: 4px; }
.block-body { padding: 14px; }
.block-palette-btn { text-align: left; }
.builder-options { display: flex; flex-direction: column; gap: 6px; }

.btn-xs {
  padding: 2px 6px;
  font-size: .75rem;
}

/* ── Anamnese Records (patient tab) ──────────────────────────────────────────── */

.ana-tab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}
.ana-tab-title   { font-size: 1.05rem; font-weight: 600; margin: 0; }
.ana-tab-subtitle { font-size: .85rem; color: var(--slate-500); margin: 3px 0 0; }

.anamnese-record-card { margin-bottom: 14px; }

.ana-rec-info { min-width: 0; }
.ana-rec-title {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.ana-rec-date {
  display: block;
  font-size: .78rem;
  color: var(--slate-400);
  margin-top: 2px;
}

.anamnese-rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.anamnese-rec-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Anamnese fill form ───────────────────────────────────────────────────────── */

.anamnese-fill-heading {
  margin: 20px 0 10px;
  padding: 10px 14px;
  background: var(--slate-50);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.anamnese-fill-heading:first-child { margin-top: 4px; }
.anamnese-fill-heading-text {
  margin: 0;
  color: var(--slate-800);
  font-weight: 600;
  line-height: 1.3;
}
.anamnese-fill-h1 { font-size: 1.1rem; }
.anamnese-fill-h2 { font-size: 1rem; }
.anamnese-fill-h3 { font-size: .9rem; }

.anamnese-fill-instruction {
  color: var(--slate-500);
  font-size: .875rem;
  margin: 0 0 14px;
  font-style: italic;
  line-height: 1.55;
}

.anamnese-fill-choice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.anamnese-fill-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .9rem;
  transition: background .1s, border-color .1s;
  user-select: none;
  line-height: 1.4;
}
.anamnese-fill-choice:hover { background: var(--slate-50); border-color: var(--brand); }
.anamnese-fill-choice input[type="radio"],
.anamnese-fill-choice input[type="checkbox"] { cursor: pointer; flex-shrink: 0; }

/* ── Responsive: anamnese record card header ─────────────────────────────────── */

@media (max-width: 480px) {
  .builder-editor-layout { grid-template-columns: 1fr; }
  .anamnese-rec-header { flex-direction: column; align-items: flex-start; }
  .anamnese-rec-actions { width: 100%; justify-content: flex-end; }
}

/* ── Dark theme overrides ────────────────────────────────────────────────────── */

:root[data-theme='dark'] .rich-editor-wrap { border-color: #1F2A3D; }
:root[data-theme='dark'] .rich-editor-toolbar { background: #0B1220; border-color: #1F2A3D; }
:root[data-theme='dark'] .rte-btn { color: #CBD5E1; }
:root[data-theme='dark'] .rte-btn:hover { background: #1A2538; }
:root[data-theme='dark'] .rte-sep { background: #1F2A3D; }
:root[data-theme='dark'] .rich-editor { background: #111A2B; color: #CBD5E1; border-color: #1F2A3D; }
:root[data-theme='dark'] .rich-content { color: #CBD5E1; }
:root[data-theme='dark'] .builder-block-item { background: #111A2B; border-color: #1F2A3D; }
:root[data-theme='dark'] .block-header { background: #0B1220; border-color: #1F2A3D; }
:root[data-theme='dark'] .builder-empty-hint { background: #111A2B; border-color: #2B3A53; color: #94A3B8; }
:root[data-theme='dark'] .evo-note-title,
:root[data-theme='dark'] .evo-note-content { color: #CBD5E1; }
:root[data-theme='dark'] .evo-divider { border-color: #1F2A3D; }
:root[data-theme='dark'] .anamnese-fill-heading { background: #111A2B; }
:root[data-theme='dark'] .anamnese-fill-heading-text { color: #CBD5E1; }
:root[data-theme='dark'] .anamnese-fill-choice { border-color: #1F2A3D; color: #CBD5E1; }
:root[data-theme='dark'] .anamnese-fill-choice:hover { background: #1A2538; border-color: var(--brand); }

/* ── ApexCharts theme harmonization ─────────────────────────────────────────── */

.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: var(--slate-100) !important;
  color: var(--slate-700) !important;
  border: 1px solid var(--slate-200) !important;
}

.apexcharts-tooltip-title {
  background: var(--slate-50) !important;
  border-bottom: 1px solid var(--slate-200) !important;
  color: var(--slate-700) !important;
}

.apexcharts-menu {
  background: var(--slate-100) !important;
  border: 1px solid var(--slate-200) !important;
}

.apexcharts-menu-item {
  color: var(--slate-700) !important;
}

.apexcharts-menu-item:hover {
  background: var(--slate-200) !important;
}

/* ── Print styles ───────────────────────────────────────────────────────────── */

@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0; }
  .no-print { display: none !important; }
}

/* ─── Utilities Module ──────────────────────────────────────────────────────── */

/* ── Hub page ─────────────────────────────────────────────────────────────── */
.util-hub-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}
.util-hub-header {
  margin-bottom: 28px;
}
.util-hub-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}
.util-hub-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--slate-500);
}
.util-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.util-hub-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: var(--slate-50);
  cursor: pointer;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}
.util-hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}
.util-hub-card:active { transform: translateY(-1px); }
.util-hub-card:hover {
  border-color: color-mix(in srgb, var(--uc, #6366F1) 35%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.1), 0 0 0 1px color-mix(in srgb, var(--uc, #6366F1) 15%, transparent);
}
.util-hub-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  padding: 6px;
}
.util-hub-card-icon svg { width: 100%; height: 100%; }
.util-hub-card-body { flex: 1; min-width: 0; }
.util-hub-card-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.util-hub-card-desc {
  font-size: 12.5px;
  color: var(--slate-500);
  margin: 0 0 8px;
  line-height: 1.5;
}
.util-hub-card-keys {
  font-size: 11px;
  color: var(--slate-400);
  font-family: 'Inter', monospace;
}
.util-hub-card-arrow {
  color: var(--slate-300);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color .15s, transform .15s;
}
.util-hub-card:hover .util-hub-card-arrow {
  color: var(--slate-500);
  transform: translateX(3px);
}

/* ── Full-screen overlay ──────────────────────────────────────────────────── */
.util-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: #0B1220;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  opacity: 0;
  transition: opacity .22s ease;
}
.util-overlay--open { opacity: 1; }
.util-overlay--closing { opacity: 0; }
.util-overlay-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.util-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.util-overlay-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.util-overlay-close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.util-overlay-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.util-overlay-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Shared shortcut hint */
.util-shortcuts {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: rgba(255,255,255,.3);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.util-shortcuts kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  font-family: 'Inter', monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.5);
}

/* ── Metrônomo ────────────────────────────────────────────────────────────── */
.metro-unit-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 3px;
}
.metro-unit-btn {
  padding: 6px 18px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.metro-unit-btn:hover { color: rgba(255,255,255,.75); }
.metro-unit-btn.active {
  background: rgba(94,234,212,.2);
  color: #5EEAD4;
}
.metro-equiv {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  font-style: italic;
  text-align: center;
  margin-top: -6px;
}
.metro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 420px;
}
.metro-pendulum-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.metro-pendulum-svg {
  width: 100px;
  height: 160px;
  filter: drop-shadow(0 0 16px rgba(94,234,212,.3));
}
#metro-arm {
  transition: transform 0.05s linear;
}
#metro-flash {
  transition: opacity 0.08s ease;
}
.metro-bpm-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.metro-bpm-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
  font-size: 20px;
}
.metro-bpm-btn:hover { background: rgba(255,255,255,.16); }
.metro-bpm-btn:active { transform: scale(0.92); }
.metro-bpm-center { text-align: center; }
.metro-bpm-value {
  font-size: 56px;
  font-weight: 800;
  color: #5EEAD4;
  line-height: 1;
  letter-spacing: -0.04em;
  min-width: 96px;
  text-align: center;
}
.metro-bpm-label {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  margin-top: 2px;
}
.metro-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 300px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  outline: none;
  cursor: pointer;
}
.metro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #5EEAD4;
  box-shadow: 0 0 8px rgba(94,234,212,.5);
  cursor: pointer;
  transition: transform .1s;
}
.metro-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.metro-beats {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 20px;
}
.metro-beat-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  transition: background .06s, transform .06s;
  display: inline-block;
}
.metro-beat-dot.accent {
  background: rgba(94,234,212,.2);
  border-color: rgba(94,234,212,.5);
}
.metro-beat-dot.active {
  background: #5EEAD4 !important;
  border-color: #5EEAD4 !important;
  transform: scale(1.4);
  box-shadow: 0 0 8px rgba(94,234,212,.6);
}
.metro-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.metro-row-label {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.metro-timesig-group,
.metro-timesig-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .15s;
}
.metro-timesig-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.metro-timesig-btn.active {
  background: rgba(94,234,212,.18);
  border-color: rgba(94,234,212,.45);
  color: #5EEAD4;
}

/* Duration free-form */
.metro-duration-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.metro-dur-free {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.metro-dur-free:hover { background: rgba(255,255,255,.12); color: #fff; }
.metro-dur-free.active {
  background: rgba(94,234,212,.18);
  border-color: rgba(94,234,212,.45);
  color: #5EEAD4;
}
.metro-dur-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 4px 10px;
}
.metro-dur-field {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.metro-dur-num {
  width: 38px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.metro-dur-num::-webkit-inner-spin-button,
.metro-dur-num::-webkit-outer-spin-button { opacity: 0; width: 0; }
.metro-dur-num:focus { color: #5EEAD4; }
.metro-dur-unit {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.metro-dur-sep {
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,.25);
}
.metro-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.metro-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.metro-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5EEAD4, #2DD4BF);
  border-radius: 999px;
  transition: width .1s linear;
  width: 0%;
}
.metro-progress-label {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}
.metro-play-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border-radius: 999px;
  background: rgba(94,234,212,.12);
  border: 1.5px solid rgba(94,234,212,.35);
  color: #5EEAD4;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: all .15s;
}
.metro-play-btn:hover {
  background: rgba(94,234,212,.22);
  box-shadow: 0 0 24px rgba(94,234,212,.2);
}
.metro-play-btn.active {
  background: rgba(94,234,212,.2);
  border-color: #5EEAD4;
  box-shadow: 0 0 32px rgba(94,234,212,.25);
}

/* ── Contador ─────────────────────────────────────────────────────────────── */
.counter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 380px;
}
.counter-display-wrap {
  text-align: center;
}
.counter-value {
  font-size: clamp(80px, 20vw, 128px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.05em;
  transition: color .1s;
}
.counter-label {
  font-size: 13px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  margin-top: 4px;
}
@keyframes counter-bounce-kf {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes counter-shake-kf {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
}
.counter-bounce { animation: counter-bounce-kf .3s ease forwards; }
.counter-shake  { animation: counter-shake-kf .35s ease forwards; }

.counter-tap-btn {
  position: relative;
  width: clamp(160px, 45vw, 200px);
  height: clamp(160px, 45vw, 200px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #14B8A6, #0D9488);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .05em;
  box-shadow:
    0 8px 32px rgba(13,148,136,.45),
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .08s, box-shadow .08s;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.counter-tap-btn:active {
  transform: scale(0.93);
  box-shadow: 0 4px 16px rgba(13,148,136,.35);
}
.counter-tap-label { position: relative; z-index: 1; }
.counter-tap-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0);
}
@keyframes counter-ripple-kf {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
  100% { box-shadow: 0 0 0 40px rgba(255,255,255,0); }
}
.counter-ripple-active { animation: counter-ripple-kf .4s ease-out forwards; }

.counter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.counter-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.counter-action-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.counter-action-reset { border-color: rgba(239,68,68,.3); color: rgba(239,68,68,.7); }
.counter-action-reset:hover { background: rgba(239,68,68,.12); color: #EF4444; border-color: rgba(239,68,68,.5); }

/* ── Cronômetro ───────────────────────────────────────────────────────────── */
.timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}
.timer-mode-row {
  display: flex;
  gap: 8px;
}
.timer-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.timer-mode-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.timer-mode-btn.active {
  background: rgba(234,88,12,.2);
  border-color: rgba(234,88,12,.5);
  color: #FB923C;
}
/* Duration free-form inputs */
.timer-duration-custom {
  display: flex;
  align-items: center;
  justify-content: center;
}
.timer-dur-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px 16px;
}
.timer-dur-field {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.timer-dur-num {
  width: 52px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.timer-dur-num::-webkit-inner-spin-button,
.timer-dur-num::-webkit-outer-spin-button { opacity: 0; width: 0; }
.timer-dur-num:focus { color: #FB923C; }
.timer-dur-unit {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.timer-dur-sep {
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,255,255,.3);
  line-height: 1;
  margin: 0 2px;
}
.timer-theme-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.timer-theme-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s;
}
.timer-theme-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.timer-theme-btn.active {
  background: rgba(234,88,12,.15);
  border-color: rgba(234,88,12,.38);
  color: #FB923C;
}
.timer-scene {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timer-display {
  font-size: clamp(52px, 14vw, 80px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
@keyframes timer-finish-kf {
  0%, 100% { transform: scale(1); color: #fff; }
  50% { transform: scale(1.08); color: #FB923C; }
}
.timer-finish-pulse { animation: timer-finish-kf .6s ease 3; }
.timer-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.timer-play-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 32px;
  border-radius: 999px;
  background: rgba(234,88,12,.12);
  border: 1.5px solid rgba(234,88,12,.35);
  color: #FB923C;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all .15s;
}
.timer-play-btn:hover { background: rgba(234,88,12,.22); box-shadow: 0 0 24px rgba(234,88,12,.2); }
.timer-play-btn.active { border-color: #FB923C; }
.timer-ctrl-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.timer-ctrl-btn:hover { background: rgba(255,255,255,.13); color: #fff; }

/* ── Dado ─────────────────────────────────────────────────────────────────── */
.dice-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 400px;
}
.dice-count-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.dice-count-label {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dice-count-btns { display: flex; gap: 6px; }
.dice-count-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all .15s;
}
.dice-count-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.dice-count-btn.active {
  background: rgba(220,38,38,.18);
  border-color: rgba(220,38,38,.45);
  color: #F87171;
}
.dice-stage {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  perspective: 600px;
}
.dice-scene {
  perspective: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dice-cube {
  position: relative;
  transform-style: preserve-3d;
}
/* faces are rendered inline via JS — no class needed, but keep for specificity */
.dice-result {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  min-height: 28px;
  text-align: center;
}
@keyframes dice-result-pop-kf {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.dice-result-pop { animation: dice-result-pop-kf .3s ease forwards; }
.dice-roll-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 32px;
  border-radius: 999px;
  background: rgba(220,38,38,.12);
  border: 1.5px solid rgba(220,38,38,.35);
  color: #F87171;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all .15s;
}
.dice-roll-btn:hover { background: rgba(220,38,38,.22); box-shadow: 0 0 24px rgba(220,38,38,.2); }
.dice-roll-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Roleta ───────────────────────────────────────────────────────────────── */
.spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.spinner-mode-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.spinner-mode-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .15s;
}
.spinner-mode-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.spinner-mode-btn.active {
  background: rgba(217,119,6,.18);
  border-color: rgba(217,119,6,.45);
  color: #FCD34D;
}
/* Spinner custom panel (shared wrapper) */
.sp-custom-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Colors grid */
.sp-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  max-width: 320px;
}
.sp-color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--sw-c);
  cursor: pointer;
  position: relative;
  transition: transform .12s, border-color .12s;
  display: flex; align-items: center; justify-content: center;
}
.sp-color-swatch:hover { transform: scale(1.12); }
.sp-color-swatch.on { border-color: rgba(255,255,255,.75); }
.sp-sw-check { display: none; }
.sp-color-swatch.on .sp-sw-check { display: flex; }
.sp-color-swatch:not(.on) { opacity: 0.38; }
.sp-custom-all-btn {
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(252,211,77,.3);
  background: rgba(252,211,77,.08);
  color: #FCD34D;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all .15s;
  margin-top: 2px;
}
.sp-custom-all-btn:hover { background: rgba(252,211,77,.16); }

/* Numbers range */
.sp-num-range {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 18px;
}
.sp-num-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sp-num-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sp-num-input {
  width: 62px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.sp-num-input::-webkit-inner-spin-button,
.sp-num-input::-webkit-outer-spin-button { opacity: 0; width: 0; }
.sp-num-input:focus { color: #FCD34D; }
.sp-num-sep {
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,.25);
}
.sp-num-dimmed { opacity: 0.35; pointer-events: none; }
.sp-num-or {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  color: rgba(255,255,255,.2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sp-num-or::before,
.sp-num-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}
.sp-num-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}
.sp-num-custom-input {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 7px 12px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.sp-num-custom-input::placeholder { color: rgba(255,255,255,.25); }
.sp-num-custom-input:focus { border-color: rgba(252,211,77,.5); }
.sp-num-custom-input:not(:placeholder-shown) {
  border-color: rgba(252,211,77,.4);
  color: #FCD34D;
}
.sp-num-clear {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.sp-num-clear:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); color: #F87171; }
.sp-num-hint {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  margin: 0;
}

/* Alphabet grid */
.sp-alpha-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.sp-alpha-q {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: all .12s;
}
.sp-alpha-q:hover { background: rgba(255,255,255,.1); color: #fff; }
.sp-alpha-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  max-width: 320px;
}
.sp-alpha-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: all .12s;
  display: flex; align-items: center; justify-content: center;
}
.sp-alpha-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.sp-alpha-btn.on {
  background: rgba(217,119,6,.2);
  border-color: rgba(252,211,77,.5);
  color: #FCD34D;
}
.spinner-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner-pointer {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(252,211,77,.8));
}
.spinner-wheel-wrap {
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(217,119,6,.25), 0 8px 24px rgba(0,0,0,.4);
}
.spinner-result {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner-result-chip {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
@keyframes spinner-result-pop-kf {
  0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.spinner-result-pop { animation: spinner-result-pop-kf .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.spinner-spin-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 32px;
  border-radius: 999px;
  background: rgba(217,119,6,.12);
  border: 1.5px solid rgba(217,119,6,.38);
  color: #FCD34D;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all .15s;
}
.spinner-spin-btn:hover { background: rgba(217,119,6,.22); box-shadow: 0 0 24px rgba(217,119,6,.2); }
.spinner-spin-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Dark mode tweaks ─────────────────────────────────────────────────────── */
:root[data-theme='dark'] .util-hub-card {
  background: var(--slate-100);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .util-hub-wrap { padding: 20px 12px 40px; }
  .util-hub-grid { grid-template-columns: 1fr; gap: 12px; }
  .util-hub-card { padding: 16px; }
  .util-overlay-body { padding: 8px; }
  .metro-wrap, .counter-wrap, .timer-wrap, .dice-wrap, .spinner-wrap { gap: 12px; }
  .metro-bpm-value { font-size: 48px; }
  .counter-value { font-size: clamp(64px, 22vw, 96px); }
  .timer-display { font-size: clamp(44px, 15vw, 72px); }
  .metro-timesig-btn { padding: 5px 8px; font-size: 11.5px; }
  .dice-stage { gap: 12px; }
  .spinner-wheel-wrap { max-width: 240px; overflow: hidden; }
  .spinner-wheel-wrap canvas { width: 100% !important; height: auto !important; }
}