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

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root {
  --navy-950: #090909;
  --navy-900: #111111;
  --navy-800: #252525;
  --cyan-600: #c28b00;
  --cyan-500: #f2c230;
  --cyan-400: #ffda58;
  --cyan-100: #fff2bd;
  --cyan-50: #fffbeb;
  --slate-950: #151515;
  --slate-700: #454545;
  --slate-500: #737373;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #eef3f7;
  --surface: #ffffff;
  --shadow: 0 18px 50px rgba(17, 17, 17, .08);
}
body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(242,194,48,.12), transparent 28rem),
    linear-gradient(180deg, #fbfaf6 0%, #f2f0e9 100%);
  color: var(--slate-950);
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; background: transparent; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }

.card { background: rgba(255,255,255,.98); border: 1px solid rgba(203,213,225,.72); border-radius: 22px; box-shadow: var(--shadow); }
.input { width: 100%; border: 1px solid var(--slate-300); border-radius: 12px; padding: 13px 14px; font-size: 14px; outline: none; background: white; color: var(--slate-950); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.input:hover { border-color: #a9b8c9; }
.input:focus { border-color: var(--cyan-600); box-shadow: 0 0 0 4px rgba(242,194,48,.2); }
.input[readonly] { background: #f5f8fa; color: var(--slate-500); }
.label { display: block; font-size: 10px; font-weight: 800; color: #586a80; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 7px; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--navy-900); color: white; border-radius: 12px; font-weight: 800; letter-spacing: .04em; text-transform: none; font-size: 12px; padding: 13px 18px; box-shadow: 0 10px 24px rgba(17,17,17,.16); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn-primary:hover { background: #000; color: var(--cyan-400); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(17,17,17,.2); }
.btn-soft { background: var(--cyan-100); color: #725300; border-radius: 11px; font-weight: 800; letter-spacing: .04em; text-transform: none; font-size: 11px; padding: 11px 14px; transition: background .2s ease, transform .2s ease; }
.btn-soft:hover { background: #ffe995; transform: translateY(-1px); }
.btn-danger { background: #fff0f0; color: #b42318; border-radius: 11px; font-weight: 800; letter-spacing: .04em; text-transform: none; font-size: 11px; padding: 11px 14px; }
.tab-active { color: var(--navy-900); border-bottom: 3px solid var(--cyan-500); font-weight: 800; }
.loading-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); align-items: center; justify-content: center; flex-direction: column; }

.hidden { display: none !important; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.-top-2 { top: -8px; }
.-right-2 { right: -8px; }
.z-50 { z-index: 50; }

.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-6 { height: 24px; }
.h-12 { height: 48px; }
.h-14 { height: 56px; }
.h-24 { height: 96px; }
.h-32 { height: 128px; }
.h-72 { height: 288px; }
.max-h-96 { max-height: 384px; }
.max-w-md { max-width: 448px; }
.max-w-7xl { max-width: 1280px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-7 { margin-top: 28px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mr-2 { margin-right: 8px; }

.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.pt-5 { padding-top: 20px; }
.pb-2 { padding-bottom: 8px; }
.pb-4 { padding-bottom: 16px; }

.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 8px; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 4px; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 20px; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 32px; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.border { border-width: 1px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }
.border-l-\[10px\] { border-left-width: 10px; border-left-style: solid; }
.border-sky-100 { border-color: #eee4bf; }
.border-sky-200 { border-color: #f1d875; }
.border-sky-300 { border-color: #eac13a; }
.border-sky-400 { border-color: var(--cyan-500); }
.border-t-sky-500 { border-top-color: var(--cyan-500); }
.border-slate-200 { border-color: #e2e8f0; }
.border-amber-100 { border-color: #fef3c7; }
.border-white\/30 { border-color: rgba(255,255,255,.3); }
.ring-2 { box-shadow: 0 0 0 2px var(--ring-color, #e0f2fe); }
.ring-sky-200 { --ring-color: #f3da78; }
.shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.05); }

.bg-white { background: #fff; }
.bg-white\/15 { background: rgba(255,255,255,.15); }
.bg-white\/90 { background: rgba(255,255,255,.9); }
.bg-sky-50 { background: var(--cyan-50); }
.bg-sky-50\/30 { background: rgba(240,251,253,.45); }
.bg-sky-400 { background: var(--cyan-500); }
.bg-sky-600 { background: var(--navy-900); }
.bg-slate-50 { background: #f8fafc; }
.bg-amber-50 { background: #fffbeb; }
.bg-red-500 { background: #ef4444; }
.backdrop-blur { backdrop-filter: blur(8px); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-xs { font-size: 12px; line-height: 16px; }
.text-sm { font-size: 14px; line-height: 20px; }
.text-lg { font-size: 18px; line-height: 28px; }
.text-xl { font-size: 20px; line-height: 28px; }
.text-2xl { font-size: 24px; line-height: 32px; }
.text-3xl { font-size: 30px; line-height: 36px; }
.text-\[10px\] { font-size: 10px; line-height: 14px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: .1em; }
.leading-relaxed { line-height: 1.625; }
.underline { text-decoration-line: underline; }

.text-white { color: #fff; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-sky-100 { color: #fff2bd; }
.text-sky-500 { color: var(--cyan-500); }
.text-sky-600 { color: var(--cyan-600); }
.text-sky-700 { color: #8a6500; }
.text-sky-800 { color: var(--navy-800); }
.text-sky-900 { color: var(--navy-900); }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-amber-900 { color: #78350f; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words { overflow-wrap: break-word; }
.outline-none { outline: 0; }
.cursor-pointer { cursor: pointer; }

.placeholder-sky-50::placeholder { color: #f0f9ff; opacity: 1; }
.hover\:bg-sky-50:hover { background: #f0f9ff; }

.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow {
  display: inline-block;
  color: var(--cyan-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow-light { color: #ffe17a; }

.login-screen {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(circle at 12% 12%, rgba(242,194,48,.24), transparent 25rem),
    radial-gradient(circle at 90% 90%, rgba(242,194,48,.1), transparent 28rem),
    #f4f1e8;
}
.login-screen::before,
.login-screen::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(194,139,0,.16);
  border-radius: 999px;
  pointer-events: none;
}
.login-screen::before { width: 340px; height: 340px; left: -170px; bottom: -120px; }
.login-screen::after { width: 220px; height: 220px; right: -80px; top: -90px; }
.login-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  width: min(1120px, 100%);
  min-height: 650px;
  overflow: hidden;
  background: white;
  border: 1px solid rgba(203,213,225,.72);
  border-radius: 30px;
  box-shadow: 0 32px 90px rgba(17,17,17,.17);
}
.login-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 54px;
  color: white;
  background:
    linear-gradient(145deg, rgba(7,7,7,.99), rgba(24,24,24,.97)),
    var(--navy-900);
}
.login-brand-panel::before {
  position: absolute;
  width: 460px;
  height: 460px;
  content: "";
  right: -190px;
  top: -180px;
  border: 1px solid rgba(242,194,48,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(242,194,48,.04), 0 0 0 140px rgba(242,194,48,.025);
}
.login-brand-panel::after {
  position: absolute;
  width: 240px;
  height: 240px;
  content: "";
  left: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(242,194,48,.09);
}
.brand-mark,
.login-brand-copy,
.login-feature-list { position: relative; z-index: 1; }
.brand-mark {
  width: 330px;
  height: 104px;
  padding: 10px 14px;
  background: white;
  border-radius: 14px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.login-brand-copy { max-width: 500px; }
.login-brand-copy h1 {
  max-width: 470px;
  margin: 14px 0 18px;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.login-brand-copy p {
  max-width: 490px;
  margin: 0;
  color: #d4d0c6;
  font-size: 15px;
  line-height: 1.75;
}
.login-feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.login-feature-list div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 110px;
  padding: 16px;
  color: #dce8f3;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.login-feature-list i { color: var(--cyan-400); font-size: 19px; }
.login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 62px 28px;
}
.login-form-wrap { width: 100%; max-width: 400px; margin: auto; }
.mobile-brand { display: none; height: 84px; }
.mobile-brand img { width: 100%; height: 100%; object-fit: contain; }
.login-form-panel h2 {
  margin: 10px 0 10px;
  color: var(--navy-900);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.login-intro { margin: 0 0 30px; color: var(--slate-500); font-size: 14px; line-height: 1.7; }
.input-with-icon { position: relative; width: 100%; }
.input-with-icon > i {
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 50%;
  color: #8190a3;
  transform: translateY(-50%);
  pointer-events: none;
}
.input-with-icon .input { padding-left: 43px; }
.login-security-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  color: var(--slate-500);
  background: #f6f9fb;
  border-radius: 12px;
}
.login-security-note i { margin-top: 2px; color: var(--cyan-600); font-size: 12px; }
.login-security-note p { margin: 0; font-size: 11px; line-height: 1.6; }
.login-message { margin: 0; padding: 12px; border-radius: 10px; text-align: center; font-size: 12px; font-weight: 700; }
.login-message-success { color: #067647; background: #ecfdf3; }
.login-message-error { color: #b42318; background: #fff1f0; }
.login-footer { margin: 28px 0 0; color: #9aa8b8; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.app-header {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(203,213,225,.75);
  box-shadow: 0 6px 24px rgba(17,17,17,.05);
  backdrop-filter: blur(16px);
}
.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: 24px;
}
.app-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 3px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(17,17,17,.08);
}
.app-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.app-brand-copy h1 { margin: 0; color: var(--navy-900); font-size: 18px; line-height: 1.1; letter-spacing: -.02em; }
.app-brand-copy p { margin: 4px 0 0; color: var(--slate-500); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.header-meta { display: flex; align-items: center; gap: 18px; }
.header-date { display: flex; align-items: center; gap: 9px; padding-right: 18px; border-right: 1px solid var(--slate-200); }
.status-dot { width: 8px; height: 8px; background: var(--cyan-500); border-radius: 50%; box-shadow: 0 0 0 4px #fff2bd; }
.header-date span,
.user-copy span { display: block; color: #8a98a9; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.header-date p,
.user-copy p { max-width: 300px; margin: 3px 0 0; overflow: hidden; color: var(--navy-900); font-size: 10px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.user-menu { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: var(--navy-900);
  background: var(--cyan-500);
  border-radius: 11px;
}
.logout-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  color: #98a5b5;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
.logout-btn:hover { color: #b42318; background: #fff1f0; }

.app-main { padding-top: 34px; padding-bottom: 70px; }
.workspace-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.workspace-intro h2 { margin: 7px 0 6px; color: var(--navy-900); font-size: 30px; letter-spacing: -.035em; }
.workspace-intro p { margin: 0; color: var(--slate-500); font-size: 13px; }
.privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: #4f6279;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.privacy-pill i { color: #a97900; }
.patient-actions { align-items: stretch; }
.action-card { position: relative; overflow: hidden; }
.section-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.section-heading h2 { margin: 3px 0 4px; color: var(--navy-900); font-size: 19px; letter-spacing: -.02em; }
.section-heading p { margin: 0; color: var(--slate-500); font-size: 12px; line-height: 1.5; }
.section-icon,
.mini-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--navy-900);
  background: var(--cyan-100);
  border-radius: 13px;
}
.section-icon { width: 44px; height: 44px; }
.mini-icon { width: 34px; height: 34px; font-size: 13px; }
.search-control { display: flex; gap: 10px; }
.search-control .input { min-height: 48px; }
.date-search {
  margin-top: 24px;
  padding-top: 21px;
  border-top: 1px solid var(--slate-200);
}
.date-search h3 { margin: 0 0 4px; color: var(--navy-900); font-size: 12px; }
.date-search p { margin: 0; color: var(--slate-500); font-size: 10px; line-height: 1.5; }
.registration-card {
  color: var(--navy-900);
  border-color: #e1b629;
  background:
    radial-gradient(circle at 110% -10%, rgba(255,255,255,.38), transparent 16rem),
    linear-gradient(145deg, #f7c936, #efb91e);
  box-shadow: 0 20px 50px rgba(126,91,0,.18);
}
.registration-card .section-heading h2 { color: var(--navy-900); }
.registration-card .section-heading p { color: #604900; }
.section-icon-light { color: var(--cyan-500); background: var(--navy-900); border: 1px solid rgba(17,17,17,.2); }
.registration-card .label { color: #5e4700; }
.registration-input { color: var(--navy-900); background: rgba(255,255,255,.78); border-color: rgba(17,17,17,.18); }
.registration-input:hover { border-color: rgba(17,17,17,.35); }
.registration-input:focus { border-color: var(--navy-900); background: white; }
.registration-input::placeholder { color: #8a7840; }
.registration-input option { color: var(--slate-950); background: white; }
.registration-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  background: var(--navy-900);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.registration-submit:hover { color: var(--cyan-400); transform: translateY(-1px); box-shadow: 0 12px 25px rgba(0,0,0,.18); }

#patient-dashboard > #patient-overview {
  border-left: 0;
  background:
    linear-gradient(90deg, rgba(242,194,48,.11), transparent 38%),
    white;
}
#patient-overview h2 { color: var(--navy-900); letter-spacing: -.04em; }
.patient-identity { display: flex; align-items: center; gap: 16px; }
.patient-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  color: var(--navy-900);
  background: linear-gradient(145deg, var(--cyan-400), var(--cyan-500));
  border-radius: 17px;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(126,91,0,.15);
}
.appointment-summary { display: flex; gap: 10px; }
.appointment-summary > div {
  min-width: 150px;
  padding: 12px 14px;
  background: #f7fafb;
  border: 1px solid var(--slate-200);
  border-radius: 13px;
}
.appointment-summary > div p { margin: 0; }
.appointment-summary > div p + p { margin-top: 5px; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after {
  position: absolute;
  width: 42px;
  height: 3px;
  content: "";
  left: 16px;
  bottom: 0;
  background: var(--cyan-500);
  border-radius: 999px 999px 0 0;
}
.metric-card > p:last-child { color: var(--navy-900); }
.mini-metric > p:last-child { margin-top: 3px; color: var(--navy-900); }
#patient-dashboard > .card.no-print { overflow: hidden; box-shadow: 0 10px 32px rgba(17,17,17,.055); }
.tab-btn { color: #718196; transition: color .2s ease; }
.tab-btn:hover { color: var(--navy-900); }
.tab-content h2,
.tab-content h3 { letter-spacing: -.015em; }
#tab-new-visit > div:first-child { padding-bottom: 22px; border-bottom: 1px solid var(--slate-200); }
#tab-new-visit .bg-sky-50,
#patient-overview .bg-sky-50,
#visit-timeline .bg-sky-50 { background: var(--cyan-50); }
#progress-summary {
  border: 0;
  background:
    radial-gradient(circle at 110% -20%, rgba(242,194,48,.28), transparent 17rem),
    var(--navy-900);
  box-shadow: 0 18px 45px rgba(17,17,17,.18);
}
#search-results > div,
#date-search-results > div,
#med-history-list > div,
#audit-list > div {
  border-color: var(--slate-200);
  box-shadow: 0 7px 20px rgba(17,17,17,.04);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#search-results > div:hover,
#date-search-results > div:hover {
  border-color: var(--cyan-500);
  background: var(--cyan-50);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17,17,17,.07);
}
textarea.input { line-height: 1.6; resize: vertical; }

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:p-8 { padding: 32px; }
  .md\:px-8 { padding-left: 32px; padding-right: 32px; }
  .md\:text-right { text-align: right; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:text-right { text-align: right; }
}

@media (max-width: 900px) {
  .login-screen { padding: 18px; }
  .login-shell { grid-template-columns: 1fr; min-height: auto; max-width: 560px; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 620px; padding: 48px; }
  .mobile-brand { display: block; width: 250px; margin: 0 0 34px; }
  .header-date { display: none; }
}

@media (max-width: 767px) {
  body { background: #f7f4eb; }
  .login-screen { padding: 0; background: white; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .login-form-panel { min-height: 100vh; padding: 40px 24px 24px; }
  .mobile-brand { width: 220px; margin-bottom: 44px; }
  .login-form-panel h2 { font-size: 30px; }
  .app-header-inner { min-height: 70px; gap: 12px; }
  .app-brand-logo { width: 40px; height: 40px; border-radius: 11px; }
  .app-brand-copy h1 { font-size: 16px; }
  .app-brand-copy p { font-size: 7px; }
  .user-avatar,
  .user-copy { display: none; }
  .logout-btn { margin-left: 0; color: var(--navy-900); background: #f1f5f8; }
  .app-main { padding-top: 24px; padding-bottom: 48px; }
  .workspace-intro { align-items: flex-start; flex-direction: column; gap: 14px; }
  .workspace-intro h2 { font-size: 25px; }
  .privacy-pill { padding: 7px 10px; }
  .action-card { border-radius: 18px; }
  .section-heading { margin-bottom: 20px; }
  .section-icon { width: 40px; height: 40px; border-radius: 12px; }
  .search-control { flex-direction: column; }
  .search-control .btn-primary { min-height: 46px; }
  #patient-dashboard > #patient-overview { border-radius: 18px; }
  #patient-dashboard .grid-cols-2 { gap: 10px; }
  #patient-dashboard .text-3xl { font-size: 25px; line-height: 32px; }
  .patient-identity { align-items: flex-start; }
  .patient-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
  .appointment-summary { flex-direction: column; }
  .appointment-summary > div { min-width: 0; }
  #tab-new-visit,
  #tab-medications,
  #tab-audit { border-radius: 18px; }
}

@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #e2e8f0; }
}