:root {
  --primary: #10a0e0;
  --primary-dark: #087daf;
  --brand-navy: #305080;
  --brand-navy-dark: #203f70;
  --brand-sky: #e9f8fd;
  --ink: #172b4d;
  --muted: #64758c;
  --line: #e5ebf3;
  --bg: #f5f8fc;
  --white: #ffffff;
  --shadow-sm: 0 2px 10px rgba(39, 76, 126, .06);
  --shadow-md: 0 14px 36px rgba(39, 76, 126, .10);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 4%, rgba(21, 168, 216, .08), transparent 24rem),
    var(--bg);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

button, input, select, textarea { transition: border-color .2s, box-shadow .2s, background .2s, transform .2s; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(21, 168, 216, .20); outline-offset: 2px; }

.sidebar {
  width: 276px;
  padding: 24px 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 35px rgba(39, 76, 126, .04);
}

.brand { display:block; padding:0 5px 22px; border-bottom:1px solid var(--line); }
.brand-crop { position:relative; width:225px; height:112px; overflow:hidden; border-radius:14px; background:white; }
.brand-crop img { position:absolute; width:245px; height:245px; max-width:none; left:-10px; top:-65px; object-fit:contain; }
.brand > small { color:#8a9ab0; margin:7px 0 0; text-align:center; font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.nav-label { margin: 25px 14px 9px; color: #9aa8ba; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
nav { gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 12px 14px; color: #62738a; border-radius: 12px; font-size: 14px; }
.nav-item:hover { color: var(--brand-navy); background: #f1f7fb; transform: translateX(2px); }
.nav-item.active { color: white; background: linear-gradient(120deg, var(--brand-navy), #3475b9); box-shadow: 0 9px 20px rgba(41, 79, 139, .22); }
.nav-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--brand-navy); background: #eaf3fb; font-weight: 900; }
.nav-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.nav-item:first-child .nav-icon svg path { fill: currentColor; stroke: none; }
.nav-item.active .nav-icon { color: white; background: rgba(255,255,255,.16); }
.sidebar-footer { display: flex; gap: 11px; align-items: center; margin-top: auto; padding: 14px; border: 1px solid #d8edf6; border-radius: 14px; background: linear-gradient(135deg, #f2fbfe, #eef5fc); }
.security-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: white; background: var(--primary); font-weight: 900; }
.sidebar-footer strong, .sidebar-footer small { display: block; }.sidebar-footer strong { color: var(--brand-navy); font-size: 12px; }.sidebar-footer small { margin-top: 3px; color: #7a8da3; font-size: 10px; line-height: 1.35; }

main { margin-left: 276px; max-width: 1650px; padding: 32px 42px 55px; }
header { margin-bottom: 27px; }
h1 { color: #142b50; font-size: 30px; letter-spacing: -.035em; }
h2 { color: #17345e; letter-spacing: -.02em; }
.eyebrow, .section-kicker { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.header-meta { display: flex; align-items: center; gap: 20px; }
.date { font-size: 13px; }
.user-chip { display: flex; gap: 10px; align-items: center; padding: 7px 11px 7px 7px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.8); box-shadow: var(--shadow-sm); }
.user-chip > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--primary), var(--brand-navy)); font-size: 12px; font-weight: 900; }
.user-chip strong, .user-chip small { display: block; }.user-chip strong { color: #2f4566; font-size: 12px; }.user-chip small { margin-top: 2px; color: #95a1b2; font-size: 10px; }
.theme-toggle { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:11px; color:#526781; background:rgba(255,255,255,.82); box-shadow:var(--shadow-sm); font-size:11px; font-weight:800; }.theme-toggle:hover { color:var(--brand-navy); border-color:#b7ddec; transform:translateY(-1px); }.theme-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; color:white; background:linear-gradient(135deg,var(--brand-navy),var(--primary)); font-size:13px; }
.mobile-menu-button,.mobile-menu-backdrop { display:none; }

.welcome-card { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 218px; margin-bottom: 22px; padding: 34px 40px; overflow: hidden; border-radius: 22px; color: white; background: linear-gradient(120deg, #244b86 0%, #176faf 55%, #12a9d5 100%); box-shadow: 0 20px 45px rgba(33, 89, 146, .20); }
.welcome-card::before, .welcome-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }.welcome-card::before { width: 340px; height: 340px; right: -120px; top: -190px; }.welcome-card::after { width: 230px; height: 230px; right: 60px; bottom: -170px; }
.welcome-card > div:first-child { position: relative; z-index: 1; max-width: 670px; }
.welcome-kicker { display: block; margin-bottom: 12px; color: #aeeaff; font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.welcome-card h2 { margin-bottom: 9px; color: white; font-size: 28px; }.welcome-card p { max-width: 610px; margin-bottom: 22px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.6; }
.welcome-actions { display: flex; gap: 10px; }.welcome-actions button { padding: 10px 15px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 800; }.welcome-primary { color: var(--brand-navy); background: white; box-shadow: 0 8px 20px rgba(0,0,0,.12); }.welcome-primary:hover { transform: translateY(-2px); }.welcome-secondary { color: white; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2) !important; }
.welcome-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 130px; height: 130px; flex: 0 0 auto; margin-right: 4%; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 12px rgba(255,255,255,.05); }.welcome-mark span { margin-top: 20px; font-size: 38px; font-weight: 300; letter-spacing: -.08em; }.welcome-mark small { margin-top: -34px; color: #bcefff; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.stats { gap: 15px; margin-bottom: 22px; }.stats article { position: relative; padding: 20px 22px; overflow: hidden; border: 1px solid rgba(226,233,242,.9); border-radius: 17px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); }.stats article::after { content: ""; position: absolute; right: -28px; bottom: -44px; width: 90px; height: 90px; border-radius: 50%; background: rgba(21,168,216,.05); }.stats article:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }.stat-top { display: flex; justify-content: space-between; align-items: center; }.stat-icon { display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 12px !important; font-weight: 900; }.patients-icon { color: #087ea9 !important; background: #dff6fd; }.today-icon { color: #3b61b2 !important; background: #e8efff; }.next-icon { color: #7e53ae !important; background: #f1eafd; }.stat-trend { width: max-content; padding: 5px 8px; border-radius: 20px; color: #188666 !important; background: #e9f8f2; font-size: 9px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.stat-trend.blue { color: #2872ae !important; background: #eaf5fc; }.stat-trend.navy { color: #72509a !important; background: #f3edfa; }.stats strong { margin: 15px 0 3px; color: #17345e; font-size: 31px; }.stats article > span:last-child { font-size: 12px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 18px; }.panel, .search { border-color: rgba(226,233,242,.95); border-radius: 17px; box-shadow: var(--shadow-sm); }.panel { padding: 23px; }.panel-heading { margin-bottom: 12px; }.panel-heading h2 { margin: 4px 0; font-size: 19px; }.panel-heading p { font-size: 12px; }.text-button { border: 0; color: var(--primary-dark); background: transparent; font-size: 11px; font-weight: 800; }.text-button:hover { transform: translateX(3px); }
.quick-panel { padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow-sm); }.quick-panel h2 { margin: 5px 0 17px; font-size: 17px; }.quick-panel > button { display: flex; width: 100%; gap: 11px; align-items: center; margin-top: 9px; padding: 11px; border: 1px solid #e8edf4; border-radius: 12px; text-align: left; background: #fbfcfe; }.quick-panel > button:hover { border-color: #b9e1f0; background: #f3fbfe; transform: translateY(-1px); }.quick-panel > button > span { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 10px; color: var(--brand-navy); background: var(--brand-sky); font-weight: 900; }.quick-panel strong, .quick-panel small { display: block; }.quick-panel strong { color: #334967; font-size: 12px; }.quick-panel small { margin-top: 3px; color: #95a2b3; font-size: 10px; }

.section-actions { margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(120deg, white, #f8fcfe); box-shadow: var(--shadow-sm); }.section-actions h2 { margin-bottom: 5px; font-size: 21px; }.section-actions p { font-size: 13px; }
.primary { padding: 10px 16px; border-radius: 10px; background: linear-gradient(120deg, var(--brand-navy), #3479bb); box-shadow: 0 7px 17px rgba(41,79,139,.18); font-size: 12px; }.primary:hover { background: linear-gradient(120deg, var(--brand-navy-dark), var(--brand-navy)); transform: translateY(-1px); }
.secondary { border-radius: 10px; color: #51657f; background: #edf3f8; }
.search { padding: 14px 17px; }.search:focus-within { border-color: #8ed7ed; box-shadow: 0 0 0 4px rgba(21,168,216,.08); }
.list-row { min-height: 72px; padding: 14px 8px; border-top-color: #eef2f6; }.list-row:hover { background: #f8fbfd; }.avatar span { color: var(--brand-navy); background: linear-gradient(135deg, #e0f7fd, #e8eefc); }.list-row strong { color: #2c4262; font-size: 13px; }.list-row small { color: #8290a3; font-size: 11px; }.status { padding: 6px 10px; color: #16836e; background: #e7f8f3; font-weight: 800; text-transform: capitalize; }.status-button, .record-button { color: var(--brand-navy); background: #edf4fb; border-radius: 8px; font-size: 11px; }

.doctor-card { border-color: var(--line); border-top-width: 4px; border-radius: 17px; box-shadow: var(--shadow-sm); }.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }.doctor-avatar { box-shadow: 0 7px 15px color-mix(in srgb, var(--doctor-color) 25%, transparent); }.google-button { border-color: #dce5ef; color: var(--brand-navy); }.google-button:hover { border-color: #a9d8e8; background: #f0faff; }
.doctor-avatar svg {
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.setup-notice { border-color: #cfeaf4; color: #496982; background: #f0faff; }

.record-header { min-height: 125px; border-radius: 20px; background: linear-gradient(120deg, var(--brand-navy), var(--primary)); box-shadow: 0 16px 32px rgba(37,87,142,.18); }.record-tabs { gap: 3px; }.record-tab { border-radius: 9px 9px 0 0; }.record-tab.active { color: var(--brand-navy); border-bottom-color: var(--primary); background: white; }
.odontogram-panel { border-radius: 19px; }.tooth-diagram { border-color: #b9cde0; background: white; box-shadow: 0 4px 10px rgba(42,79,130,.08); }.tooth-diagram:hover { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(42,79,130,.13); }.tooth-state.active, .scope-button.active { border-color: var(--brand-navy); box-shadow: 0 3px 9px rgba(41,79,139,.12); }
.odontogram-save-controls { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.odontogram-save-status { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:750; }
.odontogram-save-status::before { content:""; width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.odontogram-save-status.saved::before { background:#20a779; }
.odontogram-save-status.pending::before,.odontogram-save-status.saving::before { background:#d99a24; }
.odontogram-save-status.error { color:#c84d55; }
.odontogram-save-status.error::before { background:#dc5d64; }

dialog { border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 30px 80px rgba(20,46,79,.28); }.modal-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); }.modal-heading h2 { color: #1b3760; font-size: 20px; }.close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #708197; background: #f1f5f9; }.close:hover { color: #294f8b; background: #e5eff7; }.form-grid label, .color-picker legend { color: #4b607d; }.form-grid input, .form-grid select, .form-grid textarea { border-color: #dce5ee; border-radius: 10px; background: #fbfcfe; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #55bddf; box-shadow: 0 0 0 4px rgba(21,168,216,.09); background: white; }.modal-actions { padding-top: 18px; border-top: 1px solid var(--line); }
#toast { color: white; background: linear-gradient(120deg, var(--brand-navy-dark), var(--brand-navy)); box-shadow: 0 12px 28px rgba(25,54,95,.28); }
.app-shell.is-locked { display:none; }
.login-screen { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:24px; background:radial-gradient(circle at 78% 10%,rgba(16,160,224,.18),transparent 28rem),linear-gradient(135deg,#eef8fc,#f7fbff); }
.login-screen.show { display:grid; }
.login-card { width:min(430px,100%); padding:30px; border:1px solid rgba(255,255,255,.8); border-radius:24px; background:rgba(255,255,255,.92); box-shadow:0 28px 80px rgba(31,72,120,.18); }
.login-logo { width:210px; height:104px; margin:0 auto 15px; overflow:hidden; border-radius:16px; background:white; }
.login-logo img { width:230px; height:230px; max-width:none; margin:-62px 0 0 -10px; object-fit:contain; }
.login-card h1 { margin:6px 0 8px; font-size:28px; }
.login-card p { color:var(--muted); }
.login-card label { display:block; margin-top:14px; color:#4b607d; font-size:14px; font-weight:800; }
.login-card input { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid #dce5ee; border-radius:12px; background:#fbfcfe; }
.login-card button { width:100%; margin-top:18px; padding:12px; }
.login-help { display:block; margin-top:15px; color:#7d8da3; text-align:center; line-height:1.5; }
.logout-button,.install-button { padding:9px 12px; border:1px solid var(--line); border-radius:11px; color:#526781; background:rgba(255,255,255,.82); box-shadow:var(--shadow-sm); font-size:12px; font-weight:800; }
.logout-button:hover { color:#9b1c31; border-color:#f2bdc5; background:#fff5f7; transform:translateY(-1px); }
.install-button { color:#305080; border-color:#b7ddec; background:#eef9fd; }
.install-button:hover { color:white; border-color:#305080; background:#305080; transform:translateY(-1px); }
.install-card { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:-5px 0 22px; padding:15px 18px; border:1px solid #cfeaf4; border-radius:16px; background:linear-gradient(120deg,#f0faff,#ffffff); box-shadow:var(--shadow-sm); }
.install-card strong,.install-card span { display:block; }.install-card strong { color:#21446f; }.install-card span { margin-top:4px; color:#64758c; font-size:13px; }
.install-card button { flex:0 0 auto; padding:9px 13px; border:1px solid #b7ddec; border-radius:10px; color:#305080; background:white; font-size:12px; font-weight:800; }
.install-card button:hover { color:white; background:#305080; }
.install-help { padding:24px; }
.install-steps { display:grid; gap:12px; margin-top:18px; }
.install-steps article { padding:15px; border:1px solid var(--line); border-radius:14px; background:#fbfcfe; }
.install-steps strong { display:block; color:#21446f; }
.install-steps p { margin:6px 0 0; color:#5e7088; font-size:14px; line-height:1.55; }
.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:18px; }
.role-grid article { padding:16px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:var(--shadow-sm); }
.role-grid strong,.role-grid span { display:block; }.role-grid strong { color:var(--brand-navy); }.role-grid span { margin-top:5px; color:var(--muted); font-size:13px; }
.user-status { width:max-content; padding:6px 10px; border-radius:20px; font-size:11px; font-weight:900; text-transform:uppercase; }
.user-status.active { color:#16836e; background:#e7f8f3; }.user-status.inactive { color:#9b1c31; background:#fff0f2; }
.user-active-label { display:flex !important; align-items:center; gap:9px; }
.user-active-label input { width:auto !important; margin:0 !important; }
.modal-actions .close { display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; padding:10px 16px; border:0; border-radius:10px; color:#51657f; background:#edf3f8; font-size:12px; font-weight:800; }
.modal-actions .close:hover { color:#305080; background:#e1ebf4; }
html[data-theme="dark"] .modal-actions .close { color:#b8c8da; background:#1d3049; }
html[data-theme="dark"] .modal-actions .close:hover { color:#8bdcf3; background:#24405d; }
html[data-theme="dark"] .login-screen { background:radial-gradient(circle at 78% 10%,rgba(16,160,224,.16),transparent 28rem),#071224; }
html[data-theme="dark"] .login-card { color:#dce7f4; border-color:#263a57; background:rgba(16,31,53,.96); box-shadow:0 28px 80px rgba(0,0,0,.38); }
html[data-theme="dark"] .login-card label { color:#b8c7d9; }
html[data-theme="dark"] .login-card input { color:#e4edf7; border-color:#344963; background:#0d1b30; }
html[data-theme="dark"] .login-help { color:#9aacbf; }
html[data-theme="dark"] .logout-button, html[data-theme="dark"] .install-button { color:#b9c8da; border-color:#293d59; background:#11223a; }
html[data-theme="dark"] .logout-button:hover { color:#ffb2bc; border-color:#65363d; background:#3e252c; }
html[data-theme="dark"] .install-button { color:#8bdcf3; border-color:#305a78; background:#12314c; }
html[data-theme="dark"] .install-button:hover { color:#071224; border-color:#8bdcf3; background:#8bdcf3; }
html[data-theme="dark"] .install-card { border-color:#29516b; background:linear-gradient(120deg,#112c43,#101f35); }
html[data-theme="dark"] .install-card strong { color:#cae9f8; } html[data-theme="dark"] .install-card span { color:#a9b8ca; }
html[data-theme="dark"] .install-card button { color:#8bdcf3; border-color:#305a78; background:#12243b; }
html[data-theme="dark"] .install-card button:hover { color:#071224; background:#8bdcf3; }
html[data-theme="dark"] .install-steps article { border-color:#263a57; background:#0d1b30; }
html[data-theme="dark"] .install-steps strong { color:#cae9f8; } html[data-theme="dark"] .install-steps p { color:#a9b8ca; }
html[data-theme="dark"] .role-grid article { border-color:#263a57; background:#101f35; }
html[data-theme="dark"] .role-grid strong { color:#cae9f8; } html[data-theme="dark"] .role-grid span { color:#a9b8ca; }
html[data-theme="dark"] .user-status.active { color:#7de1c2; background:#163c3a; }
html[data-theme="dark"] .user-status.inactive { color:#ffaaa5; background:#4a282c; }

@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.view.active { animation: viewIn .28s ease both; }

@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; }.quick-panel { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.quick-panel > .section-kicker, .quick-panel > h2 { grid-column: 1/-1; }.quick-panel > button { margin: 0; }.welcome-mark { display: none; }
}

@media (max-width: 760px) {
  .sidebar { width: 100%; padding: 13px; border-right: 0; border-bottom: 1px solid var(--line); }.brand { display: none; }.nav-label, .sidebar-footer { display: none; } nav { gap: 5px; }.nav-item { min-width: calc(50% - 5px); justify-content: center; padding: 9px; font-size: 12px; }.nav-icon { width: 23px; height: 23px; }.nav-item:hover { transform: none; } main { margin-left: 0; padding: 22px 14px 42px; } header { align-items: flex-start; }.header-meta { display: none; }.welcome-card { min-height: 0; padding: 27px 23px; }.welcome-card h2 { font-size: 23px; }.welcome-actions { flex-wrap: wrap; }.stats { grid-template-columns: 1fr; }.dashboard-grid { grid-template-columns: 1fr; }.quick-panel { display: block; }.quick-panel > button { margin-top: 8px; }.section-actions { align-items: flex-start; padding: 18px; }.panel { padding: 17px; }.panel-heading { align-items: flex-start; }.text-button { display: none; }.doctor-grid { grid-template-columns: 1fr; }
}

html[data-theme="dark"] { color-scheme: dark; --ink:#e9f1fb; --muted:#a7b6c9; --line:#31445f; --bg:#091426; --white:#111f35; --shadow-sm:0 2px 12px rgba(0,0,0,.22); --shadow-md:0 16px 40px rgba(0,0,0,.34); }
html[data-theme="dark"] body { color:var(--ink); background:radial-gradient(circle at 82% 4%,rgba(16,160,224,.12),transparent 26rem),#091426; }
html[data-theme="dark"] .sidebar { color:#dce7f7; background:rgba(12,27,49,.98); border-right-color:#233653; box-shadow:8px 0 35px rgba(0,0,0,.16); }
html[data-theme="dark"] .brand { border-bottom-color:#273a56; }
html[data-theme="dark"] .brand-crop { background:white; box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="dark"] .brand > small, html[data-theme="dark"] .nav-label { color:#71839d; }
html[data-theme="dark"] .nav-item { color:#9eb0c8; }
html[data-theme="dark"] .nav-item:hover { color:#dff5fd; background:#172b47; }
html[data-theme="dark"] .nav-item.active { color:white; background:linear-gradient(120deg,#315181,#167daf); box-shadow:0 10px 24px rgba(0,0,0,.28); }
html[data-theme="dark"] .nav-icon { color:#66c7eb; background:#183551; }
html[data-theme="dark"] .sidebar-footer { border-color:#29425e; background:linear-gradient(135deg,#132b45,#14253e); }
html[data-theme="dark"] .sidebar-footer strong { color:#cae9f8; } html[data-theme="dark"] .sidebar-footer small { color:#8295ae; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2 { color:#e7f0fb; }
html[data-theme="dark"] .date { color:#8fa2bb; }
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .user-chip { color:#b9c8da; border-color:#293d59; background:#11223a; }
html[data-theme="dark"] .user-chip strong { color:#d8e5f4; } html[data-theme="dark"] .user-chip small { color:#7e92ac; }
html[data-theme="dark"] .welcome-card { background:linear-gradient(120deg,#1b3764 0%,#195c8f 58%,#0b89bb 100%); box-shadow:0 20px 45px rgba(0,0,0,.25); }
html[data-theme="dark"] .stats article, html[data-theme="dark"] .panel, html[data-theme="dark"] .search, html[data-theme="dark"] .quick-panel, html[data-theme="dark"] .doctor-card { border-color:#263a57; background:rgba(16,31,53,.94); }
html[data-theme="dark"] .stats article::after { background:rgba(16,160,224,.08); }
html[data-theme="dark"] .stats strong, html[data-theme="dark"] .list-row strong, html[data-theme="dark"] .quick-panel strong, html[data-theme="dark"] .doctor-card h3 { color:#e0ebf8; }
html[data-theme="dark"] .stats article > span:last-child, html[data-theme="dark"] .list-row small, html[data-theme="dark"] .quick-panel small, html[data-theme="dark"] .doctor-card p { color:#91a3bb; }
html[data-theme="dark"] .quick-panel > button { border-color:#273b57; background:#13253e; }
html[data-theme="dark"] .quick-panel > button:hover { border-color:#286589; background:#17304c; }
html[data-theme="dark"] .quick-panel > button > span { color:#6ccbec; background:#183b58; }
html[data-theme="dark"] .section-actions { border-color:#263a57; background:linear-gradient(120deg,#11223a,#102036); }
html[data-theme="dark"] .section-actions p, html[data-theme="dark"] .panel-heading p { color:#91a3ba; }
html[data-theme="dark"] .list-row { border-top-color:#253751; }
html[data-theme="dark"] .list-row:hover { background:#142842; }
html[data-theme="dark"] .avatar span { color:#75d2ef; background:linear-gradient(135deg,#183c58,#243657); }
html[data-theme="dark"] .status-button, html[data-theme="dark"] .record-button, html[data-theme="dark"] .action-button { color:#87d8f2; background:#173753; }
html[data-theme="dark"] .action-button.warning { color:#ffc578; background:#49361f; } html[data-theme="dark"] .action-button.danger { color:#ffaaa5; background:#49272a; }
html[data-theme="dark"] .action-button.delete { color:#ffaaa5; border-color:#65363d; background:#3e252c; }
html[data-theme="dark"] .action-button.delete:hover { color:white; border-color:#c84d5b; background:#b93443; }
html[data-theme="dark"] .appointment-menu summary { color:#a9bad0; border-color:#344a65; background:#152942; }
html[data-theme="dark"] .appointment-menu summary:hover, html[data-theme="dark"] .appointment-menu[open] summary { color:#8ee0f7; border-color:#3f87a3; background:#19344f; }
html[data-theme="dark"] .appointment-menu-popover { border-color:#344a64; background:#12243b; box-shadow:0 18px 42px rgba(0,0,0,.38); }
html[data-theme="dark"] .appointment-menu-popover button { color:#b7c7d9; }
html[data-theme="dark"] .appointment-menu-popover button:hover { color:#8bdcf3; background:#1b3651; }
html[data-theme="dark"] .appointment-menu-popover button span { color:#8bdcf3; background:#1b3b57; }
html[data-theme="dark"] .appointment-menu-popover button.warning { color:#ffca82; }
html[data-theme="dark"] .appointment-menu-popover button.danger, html[data-theme="dark"] .appointment-menu-popover button.delete { color:#ffaaa5; }
html[data-theme="dark"] .appointment-menu-popover button.delete { border-top-color:#2b405a; }
html[data-theme="dark"] .appointment-menu-popover .menu-separator { background:#2b405a; }
html[data-theme="dark"] .status { color:#7de1c2; background:#163c3a; }
html[data-theme="dark"] .status.completada { color:#b8c7d8; background:#293b50; }
html[data-theme="dark"] .status.cancelada { color:#ffaaa5; background:#4a282c; }
html[data-theme="dark"] .status.no_asistio { color:#ffd08a; background:#493820; }
html[data-theme="dark"] .appointment-status-select.programada { color:#7de1c2; background:#163c3a; }
html[data-theme="dark"] .appointment-status-select.completada { color:#c0cedc; background:#293b50; }
html[data-theme="dark"] .appointment-status-select.no_asistio { color:#ffd08a; background:#493820; }
html[data-theme="dark"] .appointment-status-select.cancelada { color:#ffaaa5; background:#4a282c; }
html[data-theme="dark"] .secondary { color:#b8c8da; background:#1d3049; }
html[data-theme="dark"] .doctor-contact, html[data-theme="dark"] .calendar-status { color:#9dafc4; border-color:#293b55; }
html[data-theme="dark"] .doctor-edit, html[data-theme="dark"] .google-button { color:#86d8f2; border-color:#314761; background:#152942; }
html[data-theme="dark"] .setup-notice { color:#a9d9eb; border-color:#29516b; background:#112c43; }
html[data-theme="dark"] .record-header { background:linear-gradient(120deg,#263f6d,#087fac); }
html[data-theme="dark"] .record-tabs { border-bottom-color:#2a3e59; }
html[data-theme="dark"] .record-tab { color:#93a6be; } html[data-theme="dark"] .record-tab.active { color:#7fd7f3; background:#111f35; }
html[data-theme="dark"] .record-entry { border-top-color:#293b54; } html[data-theme="dark"] .record-entry h3 { color:#e0eaf7; } html[data-theme="dark"] .record-entry p { color:#a4b4c7; }
html[data-theme="dark"] .odontogram-tools { border-bottom-color:#2b3e57; }
html[data-theme="dark"] .tooth-state, html[data-theme="dark"] .scope-button { color:#b6c5d7; background:#1b3049; }
html[data-theme="dark"] .tooth-state.active, html[data-theme="dark"] .scope-button.active { border-color:#6ecce9; }
html[data-theme="dark"] .tooth-state.caries { color:white; background:#e94d42; }
html[data-theme="dark"] .tooth-state.obturado { color:white; background:#287fbd; }
html[data-theme="dark"] .tooth-state.sellante { color:white; background:#1d9675; }
html[data-theme="dark"] .tooth-state.corona { color:#342900; background:#e9bb32; }
html[data-theme="dark"] .tooth-state.endodoncia { color:white; background:#8050bb; }
html[data-theme="dark"] .tooth-state.ausente { color:white; background:#687472; }
html[data-theme="dark"] .tooth-state.implante { color:white; background:#4d5963; }
html[data-theme="dark"] .tooth-state.extraccion { color:white; background:#df7425; }
html[data-theme="dark"] .tooth-state.active { border-color:#8de4ff; box-shadow:0 0 0 3px rgba(81,202,240,.18); }
html[data-theme="dark"] .surface-guide, html[data-theme="dark"] .arch-label, html[data-theme="dark"] .tooth-number { color:#92a6be; }
html[data-theme="dark"] .tooth-diagram { border-color:#49647d; background:#e8eff5; }
html[data-theme="dark"] .surface-sample { border-color:#647b91; background:#e8eff5; }
html[data-theme="dark"] dialog { color:#dce7f4; border-color:#334862; background:#111f35; }
html[data-theme="dark"] dialog::backdrop { background:rgba(3,10,20,.78); }
html[data-theme="dark"] .modal-heading, html[data-theme="dark"] .modal-actions { border-color:#293d58; }
html[data-theme="dark"] .modal-heading h2 { color:#e3edf8; }
html[data-theme="dark"] .close { color:#a9b9cc; background:#1d3049; }
html[data-theme="dark"] .form-grid label, html[data-theme="dark"] .color-picker legend { color:#b8c7d9; }
html[data-theme="dark"] .form-grid input, html[data-theme="dark"] .form-grid select, html[data-theme="dark"] .form-grid textarea { color:#e4edf7; border-color:#344963; background:#0d1b30; }
html[data-theme="dark"] .form-grid input:focus, html[data-theme="dark"] .form-grid select:focus, html[data-theme="dark"] .form-grid textarea:focus { border-color:#3daed5; background:#10233a; }
html[data-theme="dark"] .form-error { color:#ff9d98; }
html[data-theme="dark"] .color-options label { color:#b2c1d3; border-color:#344963; background:#13243a; }
html[data-theme="dark"] .color-options label:has(input:checked) { color:#e5f3fb; border-color:#69c7e7; background:#18344e; }
html[data-theme="dark"] .search input { color:#e4edf7; }
html[data-theme="dark"] .search input::placeholder { color:#70849e; }
html[data-theme="dark"] * { scrollbar-color:#38536f #0d1b2e; }
html[data-theme="dark"] *::-webkit-scrollbar { width:10px; height:10px; }
html[data-theme="dark"] *::-webkit-scrollbar-track { background:#0d1b2e; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb { border:2px solid #0d1b2e; border-radius:10px; background:#38536f; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

@media (max-width:760px) {
  .header-meta { display:flex; }.header-meta .date, .header-meta .user-chip { display:none; }.theme-text { display:none; }.theme-toggle { padding:7px; }
  .install-card { align-items:flex-start; flex-direction:column; margin-top:0; }
  .install-card button { width:100%; }
  html[data-theme="dark"] .sidebar { border-bottom-color:#263a56; }
}

/* Readability layer: keep operational text legible on laptop and tablet screens. */
.nav-item { font-size:15px; }
.brand > small,.nav-label,.eyebrow,.section-kicker,.welcome-kicker { font-size:11px; }
.sidebar-footer strong { font-size:13px; }.sidebar-footer small { font-size:11px; }
.date { font-size:14px; }.user-chip strong { font-size:13px; }.user-chip small { font-size:11px; }
.theme-toggle { font-size:12px; }
.welcome-card p { font-size:15px; }.welcome-actions button { font-size:13px; }
.stats article > span:last-child { font-size:13px; }.stat-trend { font-size:10px !important; }
.panel-heading p,.section-actions p { font-size:14px; }
.text-button { font-size:12px; }
.quick-panel strong { font-size:13px; }.quick-panel small { font-size:11px; }
.list-row strong { font-size:14px; }.list-row small { font-size:12px; }
.status,.plan-status { font-size:11px; }
.appointment-status-select { width:136px; font-size:12px; }
.appointment-menu-popover { width:220px; }.appointment-menu-popover button { font-size:12px; }
.doctor-contact,.connected,.not-connected,.google-button { font-size:13px; }
.record-entry .label,.tool-label,.arch-label,.tooth-number { font-size:12px; }
.surface-guide { font-size:14px; }
.tooth-state,.scope-button { font-size:13px; }
.form-grid label,.color-picker legend,.standalone-label { font-size:14px; }
.form-grid input,.form-grid select,.form-grid textarea { font-size:15px; }
.modal-actions button { font-size:13px; }
html[data-theme="dark"] .list-row small,html[data-theme="dark"] .quick-panel small,html[data-theme="dark"] .doctor-card p { color:#a9b8ca; }
html[data-theme="dark"] .section-actions p,html[data-theme="dark"] .panel-heading p,html[data-theme="dark"] .surface-guide { color:#adbbcc; }
html[data-theme="dark"] .search input::placeholder,html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder { color:#91a3b9; opacity:1; }
@media(max-width:760px){.nav-item{font-size:13px}.list-row strong{font-size:13px}.appointment-status-select{width:128px;font-size:11px}.welcome-card p{font-size:14px}.panel-heading p,.section-actions p{font-size:13px}}

/* Phone app layout */
@media(max-width:760px) {
  html, body { width:100%; overflow-x:hidden; }
  body { font-size:16px; padding-bottom:0; background:#f4f8fc; }
  .login-screen.show { display:block; padding:18px; overflow:auto; }
  .login-card { width:auto; max-width:none; margin:116px 0 0; padding:24px 20px; border-radius:22px; }
  .login-card input,.login-card button { max-width:100%; }
  .login-help { white-space:normal; }
  .login-logo { width:185px; height:92px; }
  .login-logo img { width:205px; height:205px; margin:-55px 0 0 -10px; }
  .login-card h1 { font-size:25px; }

  .mobile-menu-button { display:grid; place-items:center; gap:4px; width:42px; height:42px; flex:0 0 auto; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.88); box-shadow:var(--shadow-sm); }
  .mobile-menu-button span { display:block; width:18px; height:2px; border-radius:2px; background:#305080; }
  .mobile-menu-backdrop { position:fixed; inset:0; z-index:75; display:block; background:rgba(10,25,44,.42); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .mobile-menu-backdrop[hidden] { display:none; }
  body.mobile-menu-open .mobile-menu-backdrop { opacity:1; pointer-events:auto; }
  .sidebar { position:fixed; inset:0 auto 0 0; z-index:80; width:min(310px,84vw); padding:18px 16px calc(18px + env(safe-area-inset-bottom)); border-right:1px solid var(--line); border-top:0; background:rgba(255,255,255,.98); box-shadow:18px 0 44px rgba(28,59,96,.20); backdrop-filter:blur(14px); transform:translateX(-105%); transition:transform .22s ease; }
  body.mobile-menu-open .sidebar { transform:translateX(0); }
  .brand { display:block; padding:0 2px 15px; }
  .brand-crop { width:190px; height:92px; margin:0 auto; }
  .brand-crop img { width:210px; height:210px; top:-57px; }
  .brand > small { display:block; }
  .nav-label { display:block; margin:16px 8px 8px; }
  .sidebar-footer { display:flex; margin-top:18px; }
  nav { display:grid; gap:7px; overflow:visible; padding:0; }
  .nav-item { min-width:0; flex-direction:row; justify-content:flex-start; gap:12px; padding:12px 13px; border-radius:14px; text-align:left; font-size:14px; line-height:1.2; }
  .nav-item:hover { transform:none; }
  .nav-icon { width:30px; height:30px; border-radius:10px; }

  main { margin:0; max-width:none; padding:18px 13px 22px; }
  header { position:sticky; top:0; z-index:50; align-items:flex-start; justify-content:flex-start; margin:-18px -13px 14px; padding:14px 13px 12px; background:rgba(245,248,252,.94); border-bottom:1px solid rgba(229,235,243,.85); backdrop-filter:blur(14px); }
  header h1 { font-size:23px; line-height:1.1; }
  .eyebrow { margin-bottom:4px; font-size:9px; }
  .header-meta { gap:7px; flex-wrap:wrap; justify-content:flex-end; }
  .theme-toggle,.logout-button,.install-button { min-height:38px; padding:8px 10px; border-radius:12px; }
  .logout-button { font-size:0; }
  .logout-button::after { content:"Salir"; font-size:12px; }

  .welcome-card { min-height:0; margin-bottom:13px; padding:22px 19px; border-radius:20px; }
  .welcome-card h2 { font-size:24px; line-height:1.12; }
  .welcome-card p { margin-bottom:17px; line-height:1.5; }
  .welcome-actions { display:grid; grid-template-columns:1fr; }
  .welcome-actions button { width:100%; padding:12px 14px; }
  .install-card { gap:12px; margin-bottom:14px; padding:14px; border-radius:16px; }

  .stats,.finance-stats,.leave-summary,.role-grid { grid-template-columns:1fr; gap:10px; }
  .stats article,.finance-stats article,.leave-summary article { padding:16px; border-radius:16px; }
  .stats strong,.finance-stats strong,.leave-summary strong { font-size:28px; }
  .dashboard-grid,.quick-panel { display:block; }
  .quick-panel { margin-top:14px; padding:17px; }
  .quick-panel > button { margin-top:8px; padding:12px; }

  .section-actions { display:grid; grid-template-columns:1fr; gap:13px; margin-bottom:13px; padding:16px; border-radius:16px; }
  .section-actions h2 { font-size:20px; }
  .section-actions .primary { width:100%; min-height:42px; }
  .panel { padding:14px; border-radius:16px; }
  .panel-heading { display:block; }
  .search,.finance-search,.leave-search { padding:12px 14px; border-radius:14px; }

  .list-row,.finance-plan,.leave-row,.record-leave,.user-row { display:grid; grid-template-columns:1fr; gap:10px; align-items:start; min-height:0; margin-bottom:10px; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); }
  .list-row:first-child,.finance-plan:first-child,.leave-row:first-child,.record-leave:first-child { border-top:1px solid var(--line); }
  .list-row:hover { background:#fff; }
  .list-row > div,.finance-plan > div,.leave-row > div,.record-leave > div { grid-column:auto !important; grid-row:auto !important; }
  .avatar { align-items:flex-start; }
  .avatar span { width:42px; height:42px; }
  .appointment-status-select { width:100%; min-height:40px; font-size:13px; }
  .appointment-menu { justify-self:stretch; width:100%; }
  .appointment-menu summary { width:100%; height:40px; border-radius:12px; font-size:0; }
  .appointment-menu summary::after { content:"Opciones"; font-size:13px; font-weight:900; }
  .appointment-menu-popover { position:static; width:100%; margin-top:8px; box-shadow:none; }
  .finance-actions,.leave-actions,.record-leave-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
  .finance-actions button,.leave-actions button,.record-leave-actions button { min-height:40px; font-size:12px; }

  .doctor-grid { grid-template-columns:1fr; }
  .doctor-card { padding:18px; }
  .calendar-status { display:grid; grid-template-columns:1fr; }
  .google-button,.doctor-edit { min-height:38px; }

  .record-header { display:grid; grid-template-columns:auto 1fr; gap:13px; min-height:0; padding:18px; border-radius:18px; }
  .record-header .avatar-large { width:50px; height:50px; }
  .record-header h2 { font-size:20px; }
  .record-header p { font-size:12px; line-height:1.45; }
  .record-tabs { overflow-x:auto; gap:6px; padding-bottom:0; scrollbar-width:none; }
  .record-tabs::-webkit-scrollbar { display:none; }
  .record-tab { flex:0 0 auto; padding:11px 12px; border-radius:12px 12px 0 0; font-size:13px; }
  .record-entry-head { display:block; }

  .odontogram-panel { padding:14px; }
  .odontogram-tools { min-width:760px; grid-template-columns:1fr; gap:18px; }
  .surface-guide,#odontogram-grid { min-width:760px; }
  .tooth-row { gap:7px; justify-content:flex-start; }
  .tooth-unit { width:47px; }
  .tooth-diagram { width:47px; height:47px; border-radius:12px; }
  .tooth-unit:nth-child(8) { margin-right:16px; }

  dialog,.wide-dialog { width:100vw; max-width:100vw; max-height:100dvh; margin:0; border-radius:20px 20px 0 0; }
  dialog[open] { position:fixed; inset:auto 0 0 0; }
  dialog form,.detail-shell,.install-help { max-height:calc(100dvh - 18px); overflow:auto; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .modal-heading { position:sticky; top:0; z-index:2; margin:-20px -16px 16px; padding:16px; background:var(--white); }
  .modal-actions { position:sticky; bottom:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; margin:18px -16px calc(-20px - env(safe-area-inset-bottom)); padding:13px 16px calc(13px + env(safe-area-inset-bottom)); background:var(--white); }
  .modal-actions button,.modal-actions .close { width:100%; min-height:42px; }
  .form-grid,.payment-plan-summary { grid-template-columns:1fr; gap:13px; }
  .color-options { grid-template-columns:1fr 1fr; }
  .plan-item { grid-template-columns:1fr; padding:12px; border:1px solid var(--line); border-radius:13px; background:#fbfcfe; }
  .remove-plan-item { min-height:38px; }
  .items-heading { display:grid; grid-template-columns:1fr; gap:10px; }
  .items-heading .secondary { min-height:40px; }
  .plan-calculation,.leave-days-preview { justify-content:space-between; }

  .detail-hero { padding:16px; border-radius:15px; }
  .detail-toolbar { display:grid; grid-template-columns:1fr; }
  .detail-toolbar div { display:grid; grid-template-columns:1fr; }
  .detail-table,.detail-table tbody,.detail-table tr,.detail-table td { display:block; width:100%; }
  .detail-table thead { display:none; }
  .detail-table tr { margin-bottom:10px; padding:12px; border:1px solid var(--line); border-radius:12px; }
  .detail-table td { padding:5px 0; border:0; }
}

@media(max-width:380px) {
  .nav-item { font-size:13px; }
  main { padding-left:10px; padding-right:10px; }
  header { margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px; }
  .theme-toggle,.logout-button,.install-button { padding-left:8px; padding-right:8px; }
  .sidebar { width:min(292px,86vw); }
}

@media(max-width:760px) {
  html[data-theme="dark"] body { background:#091426; }
  html[data-theme="dark"] .mobile-menu-button { border-color:#293d59; background:#11223a; }
  html[data-theme="dark"] .mobile-menu-button span { background:#8bdcf3; }
  html[data-theme="dark"] .mobile-menu-backdrop { background:rgba(0,0,0,.56); }
  html[data-theme="dark"] .sidebar { background:rgba(12,27,49,.98); border-right-color:#263a56; box-shadow:18px 0 44px rgba(0,0,0,.38); }
  html[data-theme="dark"] header { background:rgba(9,20,38,.94); border-bottom-color:#263a56; }
  html[data-theme="dark"] .list-row,html[data-theme="dark"] .finance-plan,html[data-theme="dark"] .leave-row,html[data-theme="dark"] .record-leave,html[data-theme="dark"] .user-row { border-color:#263a57; background:#101f35; }
  html[data-theme="dark"] .modal-heading,html[data-theme="dark"] .modal-actions { background:#111f35; }
  html[data-theme="dark"] .plan-item { border-color:#344963; background:#0d1b30; }
  html[data-theme="dark"] .detail-table tr { border-color:#293d57; }
}

/* Premium product polish inspired by modern clinical SaaS dashboards. */
:root {
  --premium-glow: 0 24px 70px rgba(38, 85, 145, .13);
  --premium-border: rgba(208, 222, 238, .86);
  --premium-surface: rgba(255,255,255,.88);
  --premium-surface-strong: #ffffff;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 8%, rgba(16,160,224,.12), transparent 24rem),
    radial-gradient(circle at 92% 12%, rgba(48,80,128,.11), transparent 28rem),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(245,248,252,0));
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,254,.94));
  box-shadow: 14px 0 50px rgba(34, 68, 112, .07);
}

.nav-item {
  position:relative;
  isolation:isolate;
}

.nav-item::before {
  content:"";
  position:absolute;
  inset:7px auto 7px 5px;
  width:3px;
  border-radius:999px;
  background:transparent;
}

.nav-item.active::before { background:rgba(255,255,255,.72); }

header {
  padding: 6px 0 2px;
}

.header-meta {
  padding:6px;
  border:1px solid rgba(226,235,245,.72);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 30px rgba(32,70,120,.06);
  backdrop-filter:blur(16px);
}

.welcome-card {
  min-height:238px;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.28), transparent 15rem),
    linear-gradient(135deg, #152f5b 0%, #24649e 48%, #12a7d5 100%);
  box-shadow:0 28px 70px rgba(34, 93, 154, .26);
}

.welcome-card h2 {
  max-width:760px;
  font-size:34px;
  letter-spacing:-.045em;
}

.welcome-card p {
  max-width:720px;
  font-size:15.5px;
}

.welcome-mark {
  border-radius:34px;
  transform:rotate(-2deg);
}

.stats article,
.finance-stats article,
.leave-summary article,
.panel,
.quick-panel,
.cash-panel,
.doctor-card,
.role-grid article,
.install-card {
  border-color:var(--premium-border);
  background:var(--premium-surface);
  box-shadow:var(--premium-glow);
  backdrop-filter:blur(16px);
}

.stats article,
.finance-stats article,
.leave-summary article {
  min-height:138px;
}

.stats article:hover,
.finance-stats article:hover,
.leave-summary article:hover,
.panel:hover,
.quick-panel:hover,
.doctor-card:hover {
  box-shadow:0 26px 76px rgba(34, 77, 132, .15);
}

.stat-icon,
.quick-panel > button > span,
.nav-icon {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.section-actions {
  border-color:var(--premium-border);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(240,248,252,.86));
  box-shadow:var(--premium-glow);
}

.section-actions h2,
.panel-heading h2,
.quick-panel h2 {
  letter-spacing:-.035em;
}

.primary,
.welcome-primary,
.finance-actions button.pay {
  box-shadow:0 14px 28px rgba(48,80,128,.22);
}

.primary:active,
.welcome-primary:active,
.welcome-secondary:active,
.secondary:active,
.text-button:active {
  transform:translateY(0);
}

.list-row,
.finance-plan,
.leave-row,
.record-leave {
  border-radius:14px;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.list-row:hover,
.finance-plan:hover,
.leave-row:hover,
.record-leave:hover {
  background:rgba(248,252,255,.92);
  box-shadow:0 12px 28px rgba(38,76,122,.08);
  transform:translateY(-1px);
}

.avatar span {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 9px 18px rgba(16,160,224,.12);
}

.appointment-status-select,
.financial-badge,
.plan-status,
.leave-status,
.user-status {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.appointment-menu summary {
  box-shadow:0 8px 18px rgba(48,80,128,.08);
}

.appointment-menu-popover,
dialog {
  border-color:rgba(211,224,239,.92);
  box-shadow:0 30px 90px rgba(15,36,68,.24);
}

#appointment-list,
#upcoming-list {
  isolation:isolate;
}

.list-row:has(.appointment-menu[open]) {
  position:relative;
  z-index:70;
}

.appointment-menu[open] {
  z-index:90;
}

.appointment-menu-popover {
  z-index:95;
  background:#fff;
  backdrop-filter:none;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.search,
.finance-search,
.leave-search,
.plan-item input,
.standalone-label textarea {
  box-shadow:inset 0 1px 2px rgba(31,59,96,.035);
}

.record-header {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.25), transparent 12rem),
    linear-gradient(135deg, #1b3b6f, #10a0e0);
}

.tooth-diagram,
.tooth-state,
.scope-button {
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.tooth-state:hover,
.scope-button:hover {
  transform:translateY(-1px);
}

html[data-theme="dark"] {
  --premium-glow: 0 24px 70px rgba(0,0,0,.26);
  --premium-border: rgba(54,75,104,.9);
  --premium-surface: rgba(16,31,53,.9);
  --premium-surface-strong: #111f35;
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(circle at 18% 8%, rgba(16,160,224,.12), transparent 24rem),
    radial-gradient(circle at 92% 12%, rgba(61,112,185,.12), transparent 28rem),
    linear-gradient(180deg, rgba(7,18,36,.75), rgba(9,20,38,0));
}

html[data-theme="dark"] .sidebar {
  background:linear-gradient(180deg, rgba(12,27,49,.98), rgba(11,23,41,.96));
}

html[data-theme="dark"] .header-meta {
  border-color:#263a57;
  background:rgba(17,34,58,.78);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
}

html[data-theme="dark"] .section-actions {
  border-color:var(--premium-border);
  background:linear-gradient(135deg, rgba(17,34,58,.96), rgba(14,29,50,.9));
}

html[data-theme="dark"] .list-row:hover,
html[data-theme="dark"] .finance-plan:hover,
html[data-theme="dark"] .leave-row:hover,
html[data-theme="dark"] .record-leave:hover {
  background:rgba(20,40,66,.92);
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}

@media(max-width:760px) {
  header { padding-top:13px; }
  .header-meta {
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  .welcome-card h2 { font-size:25px; }
  .stats article,
  .finance-stats article,
  .leave-summary article { min-height:0; }
  .panel:hover,
  .quick-panel:hover { transform:none; }
}