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

:root {
  --bg: #f5f7fa;
  --surface: #fff;
  --ink: #172033;
  --muted: #697386;
  --line: #e6eaf0;
  --blue: #276ef1;
  --blue-dark: #1855bf;
  --blue-soft: #edf4ff;
  --green: #158466;
  --green-soft: #e9f8f2;
  --amber: #b86a10;
  --amber-soft: #fff6e8;
  --red: #d34242;
  --navy: #13243d;
  --shadow: 0 8px 30px rgba(27, 46, 77, .06);
  --radius: 18px;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 14px/1.5 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.topbar { height: 70px; padding: 0 max(24px, calc((100vw - 1280px)/2)); display: flex; align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; margin-right: 52px; }
.brand > span:last-child span { color: var(--blue); }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 10px 10px 10px 3px; font-size: 17px; }
.topnav { display: flex; align-self: stretch; gap: 30px; }
.topnav a { display: grid; place-items: center; color: var(--muted); font-weight: 600; position: relative; }
.topnav a:hover, .topnav a.active { color: var(--ink); }
.topnav a.active:after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--blue); border-radius: 4px 4px 0 0; }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-avatar, .mini-avatar, .avatar { display: grid; place-items: center; flex: none; color: #fff; background: var(--avatar, var(--navy)); font-weight: 700; border-radius: 50%; }
.user-avatar { width: 34px; height: 34px; background: var(--navy); }
.user-label { font-size: 13px; font-weight: 600; }
.link-button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 5px; }
.link-button:hover { color: var(--red); }
.messages { position: fixed; z-index: 50; top: 82px; right: 24px; display: grid; gap: 8px; }
.message { max-width: 460px; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); }
.message.success { background: var(--green); }.message.error { background: var(--red); }

.page-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 70px; }
.page-shell.narrow { width: min(1040px, calc(100% - 48px)); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.page-head.compact { margin-top: 16px; }
.page-head h1 { margin: 4px 0 3px; font-size: 34px; line-height: 1.2; letter-spacing: -.035em; }
.page-head p { margin: 0; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 800; }
.eyebrow.light { color: #9ec0ff; }
.head-actions { display: flex; gap: 10px; }
.date-picker input { height: 42px; border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 0 12px; color: var(--ink); }
.button { min-height: 42px; padding: 10px 16px; border: 1px solid #dce2eb; border-radius: 11px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); border-color: #bfc9d7; box-shadow: 0 5px 14px rgba(36,54,80,.08); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button.primary { color: #fff; border-color: var(--blue); background: var(--blue); }
.button.primary:hover { background: var(--blue-dark); }
.button.dark { color: #fff; border-color: var(--navy); background: var(--navy); }
.button.wide { width: 100%; }
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.surface-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.surface-head h2 { font-size: 17px; margin: 0 0 2px; }.surface-head p { color: var(--muted); font-size: 12px; margin: 0; }
.pill { border-radius: 99px; padding: 5px 10px; font-size: 11px; font-weight: 700; }.pill.neutral { background: #f1f3f6; color: var(--muted); }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.metric-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 17px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.metric-card > span { font-weight: 700; }.metric-card strong { grid-row: 1/3; grid-column: 2; font-size: 28px; }.metric-card small { color: var(--muted); font-size: 11px; }.metric-card.attention { background: var(--amber-soft); border-color: #f4dfbd; }.metric-card.attention strong { color: var(--amber); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(290px, .8fr); gap: 20px; align-items: start; }
.appointment-row { min-height: 83px; display: grid; grid-template-columns: 64px 14px minmax(180px,1fr) minmax(200px,.9fr) 130px 18px; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--line); transition: .16s; }
.appointment-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }.appointment-row:hover { background: #f9fbfe; }
.appointment-row time { font-size: 15px; font-weight: 800; }.appointment-row time small, .patient-cell small, .doctor-cell small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 2px; }
.timeline-dot { width: 9px; height: 9px; background: #cdd5e1; border: 2px solid #fff; box-shadow: 0 0 0 2px #cdd5e1; border-radius: 50%; }
.status-in_progress .timeline-dot { background: var(--red); box-shadow: 0 0 0 2px #f2baba; }.status-review .timeline-dot { background: var(--amber); box-shadow: 0 0 0 2px #f3d6ad; }.status-completed .timeline-dot { background: var(--green); box-shadow: 0 0 0 2px #bce4d8; }
.patient-cell strong { font-size: 14px; }.doctor-cell { display: flex; align-items: center; gap: 10px; }.mini-avatar { width: 34px; height: 34px; font-size: 11px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; width: max-content; padding: 5px 9px; font-size: 10px; font-weight: 800; border-radius: 99px; background: #f1f3f6; color: var(--muted); }
.status-badge.in_progress { background: #fff0f0; color: var(--red); }.status-badge.processing { background: var(--blue-soft); color: var(--blue); }.status-badge.review { background: var(--amber-soft); color: var(--amber); }.status-badge.completed { background: var(--green-soft); color: var(--green); }.status-badge.cancelled { text-decoration: line-through; }
.row-arrow { color: #a2adbc; font-size: 24px; }
.empty-state { padding: 60px 30px; text-align: center; }.empty-state h3 { margin: 14px 0 3px; }.empty-state p { color: var(--muted); margin: 0 0 18px; }.empty-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto; background: var(--green-soft); color: var(--green); border-radius: 50%; font-size: 20px; }
.doctor-list { padding: 8px 20px; }.doctor-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }.doctor-row:last-child { border: 0; }.avatar { width: 42px; height: 42px; font-size: 12px; }.doctor-row strong { display: block; font-size: 12px; }.doctor-row small { color: var(--muted); font-size: 10px; }.doctor-load { text-align: right; font-weight: 800; }.doctor-load small { display: block; }.admin-link { display: flex; justify-content: space-between; padding: 15px 20px; color: var(--blue); border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; }

.back-link { color: var(--muted); font-size: 12px; font-weight: 600; }.back-link:hover { color: var(--blue); }
.appointment-create-shell { width: min(1120px, calc(100% - 48px)); }
.create-appointment-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; align-items: start; }
.grid-full { grid-column: 1/-1; }
.patient-picker-card,.visit-settings-card { padding: 26px; }
.section-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font-size: 18px; }.section-heading p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }
.section-number { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-size: 11px; font-weight: 800; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 22px; background: #f0f3f7; border-radius: 11px; }
.segmented button { min-height: 36px; padding: 7px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(27,46,77,.08); }
.selected-patient-hint { min-height: 22px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.selected-patient-hint a { color: var(--blue); font-weight: 700; }
.inline-fields { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }.inline-fields.two { grid-template-columns: 1.35fr .8fr; }
.consent-checkbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--green-soft); border: 1px solid #cfeadf; border-radius: 10px; cursor: pointer; }
.consent-checkbox input { margin-top: 3px; accent-color: var(--green); }.consent-checkbox strong,.consent-checkbox small { display: block; }.consent-checkbox strong { font-size: 11px; }.consent-checkbox small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.fixed-doctor-card { display: grid; grid-template-columns: 44px 1fr 24px; gap: 11px; align-items: center; padding: 13px; margin-bottom: 18px; background: var(--blue-soft); border: 1px solid #d7e5ff; border-radius: 12px; }
.fixed-doctor-card small,.fixed-doctor-card strong,.fixed-doctor-card em { display: block; }.fixed-doctor-card small { color: var(--blue); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.fixed-doctor-card strong { font-size: 12px; }.fixed-doctor-card em { color: var(--muted); font-size: 9px; font-style: normal; }.fixed-doctor-card b { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 10px; }
.create-actions { padding-top: 4px; }.create-actions .primary { min-width: 180px; }
.form-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 20px; align-items: start; }.form-card, .side-form-card { padding: 26px; }.side-form-card h2 { margin: 4px 0 20px; }.form-field { margin-bottom: 18px; }.form-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }.form-field input:not([type=checkbox]), .form-field select { width: 100%; min-height: 44px; border: 1px solid #dce2eb; background: #fff; border-radius: 10px; padding: 8px 11px; }.form-field input:focus, .form-field select:focus { outline: 3px solid #dce8ff; border-color: var(--blue); }.form-field.small { margin-bottom: 13px; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 10px; }.error-text { color: var(--red); }.form-error, .inline-alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 15px; }.form-error, .inline-alert.danger { background: #fff0f0; color: #9d3030; }

.encounter-page { padding-top: 28px; }.encounter-header { margin: 24px 0; display: flex; justify-content: space-between; gap: 30px; align-items: center; }.patient-identity { display: flex; align-items: center; gap: 16px; }.patient-avatar { width: 58px; height: 58px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-size: 20px; font-weight: 800; border-radius: 17px; }.patient-identity h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.03em; margin: 2px 0; }.patient-identity p { color: var(--muted); margin: 0; }.encounter-meta { display: flex; align-items: center; gap: 20px; }.encounter-meta > div { display: flex; gap: 9px; align-items: center; }.encounter-meta strong, .encounter-meta small { display: block; }.encounter-meta strong { font-size: 12px; }.encounter-meta small { color: var(--muted); font-size: 10px; }
.stepper { list-style: none; margin: 0 0 22px; padding: 15px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: repeat(3,1fr); }.stepper li { display: flex; gap: 10px; align-items: center; position: relative; }.stepper li:not(:last-child):after { content: ""; position: absolute; left: 46px; right: 16px; top: 14px; height: 1px; background: var(--line); }.stepper li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #eef1f5; color: #8b95a4; font-size: 11px; font-weight: 800; z-index: 1; }.stepper strong, .stepper small { display: block; }.stepper strong { font-size: 11px; }.stepper small { font-size: 9px; color: var(--muted); }.stepper li.active > span { background: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--blue-soft); }.stepper li.done > span { background: var(--green); color: transparent; }.stepper li.done > span:after { content: "✓"; color: #fff; position: absolute; }.stepper li.done:not(:last-child):after { background: #b6ddcf; }
.patient-context-strip { min-height: 56px; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 10px 15px; margin: -8px 0 20px; color: #33435a; background: #f0f6ff; border: 1px solid #d9e7fb; border-radius: 12px; }
.context-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue); background: #fff; border-radius: 9px; }.patient-context-strip strong,.patient-context-strip small { display: block; }.patient-context-strip strong { font-size: 11px; }.patient-context-strip small { color: var(--muted); font-size: 9px; }.patient-context-strip b { color: var(--blue); font-size: 10px; }
.capture-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,.7fr); gap: 20px; align-items: stretch; }.recording-card { min-height: 510px; display: flex; flex-direction: column; }.consent-line { display: flex; gap: 10px; align-items: center; margin: 18px; padding: 10px 13px; background: #fff3f3; color: #a13e3e; border-radius: 11px; }.consent-line.confirmed { background: var(--green-soft); color: var(--green); }.consent-line > span { width: 22px; height: 22px; display: grid; place-items: center; background: currentColor; color: #fff; border-radius: 50%; font-size: 11px; font-weight: 800; }.consent-line strong, .consent-line small { display: block; }.consent-line strong { font-size: 11px; }.consent-line small { color: var(--muted); font-size: 9px; }
.recorder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }.recorder h2 { margin: 20px 0 4px; font-size: 19px; }.recorder p { color: var(--muted); margin: 0; max-width: 460px; }.recorder time { margin-top: 12px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }.record-button { width: 90px; height: 90px; display: grid; place-items: center; border: 0; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #f2d0d0, 0 0 0 11px #fff3f3, 0 10px 30px rgba(211,66,66,.18); cursor: pointer; }.record-button span { width: 38px; height: 38px; background: var(--red); border-radius: 50%; transition: .2s; }.record-button:hover span { transform: scale(1.08); }.record-button:disabled { opacity: .4; cursor: not-allowed; }.is-recording .record-button { animation: rec-pulse 1.7s infinite; }.is-recording .record-button span { border-radius: 7px; width: 30px; height: 30px; }.is-recording h2, .is-recording time { color: var(--red); }.sound-bars { height: 28px; display: flex; gap: 3px; align-items: center; margin-bottom: 28px; opacity: .28; }.sound-bars i { width: 3px; height: 8px; background: var(--blue); border-radius: 4px; }.sound-bars i:nth-child(2),.sound-bars i:nth-child(6){height:16px}.sound-bars i:nth-child(3),.sound-bars i:nth-child(5){height:24px}.is-recording .sound-bars { opacity: 1; }.is-recording .sound-bars i { animation: bars .8s ease-in-out infinite alternate; }.is-recording .sound-bars i:nth-child(2n) { animation-delay: -.4s; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 1px #efb8b8, 0 0 0 17px #ffeaea, 0 10px 35px rgba(211,66,66,.25); }} @keyframes bars { to { transform: scaleY(.35); }}
.upload-row { border-top: 1px solid var(--line); padding: 15px 20px; display: flex; align-items: center; gap: 12px; }.file-button { color: var(--blue); font-weight: 700; cursor: pointer; }.file-button input { display: none; }.upload-row small { color: var(--muted); margin-left: auto; }
.demo-card { padding: 28px; color: #fff; background: linear-gradient(155deg, #18304f, #0f1e33); border: 0; display: flex; flex-direction: column; }.demo-badge { width: max-content; padding: 5px 8px; color: #bcd2f4; background: rgba(255,255,255,.09); border-radius: 7px; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; font-weight: 800; }.demo-card h2 { margin: 22px 0 8px; font-size: 22px; line-height: 1.3; }.demo-card p { color: #b7c5d8; }.demo-card ul { padding: 0; margin: 8px 0 24px; list-style: none; }.demo-card li { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; }.demo-card li:before { content: "✓"; margin-right: 9px; color: #67dab2; }.demo-card .button.dark { background: #fff; color: var(--navy); border-color: #fff; margin-top: auto; }.demo-disclaimer { color: #8396ae; font-size: 9px; text-align: center; margin-top: 12px; }

.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }.protocol-card { overflow: hidden; }.protocol-head { align-items: flex-start; }.protocol-head h2 { margin-top: 4px; font-size: 19px; }.quality-chip { display: flex; align-items: center; gap: 9px; background: var(--green-soft); color: var(--green); padding: 9px 11px; border-radius: 10px; }.quality-chip > span { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; }.quality-chip strong,.quality-chip small { display: block; font-size: 9px; }.quality-chip strong { font-size: 11px; }.protocol-fields { padding: 24px; }.protocol-field { margin-bottom: 22px; }.protocol-field:last-child { margin-bottom: 0; }.protocol-field label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-weight: 700; font-size: 12px; }.protocol-field label b { color: var(--red); }.protocol-field label small { color: var(--muted); font-size: 9px; font-weight: 600; background: #f1f3f6; padding: 3px 7px; border-radius: 99px; }.protocol-field textarea { width: 100%; resize: vertical; min-height: 72px; padding: 11px 12px; border: 1px solid #dce2eb; border-radius: 10px; color: #25334b; background: #fbfcfe; font: 13px/1.55 Manrope, sans-serif; }.protocol-field textarea:focus { outline: 3px solid #dce8ff; border-color: var(--blue); background: #fff; }.protocol-field.has-warning textarea { border-color: #edc887; background: #fffaf2; }.field-warning { color: var(--amber); font-size: 10px; margin-top: 5px; }.sign-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 24px; border-top: 1px solid var(--line); background: #fbfcfd; position: sticky; bottom: 0; }.sign-bar > div { display: flex; gap: 8px; }.review-check { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; }.review-check input { accent-color: var(--blue); }.review-sidebar { display: grid; gap: 14px; }.action-card,.safety-card { padding: 20px; }.action-card h3,.safety-card h3 { margin: 0 0 6px; font-size: 14px; }.action-card p { color: var(--muted); font-size: 10px; margin: 0 0 14px; }.copy-status { display: block; margin-top: 8px; color: var(--green); font-size: 9px; text-align: center; }.safety-card > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.safety-card > div:last-child { border: 0; }.safety-card span { color: var(--muted); }.success-text { color: var(--green); }.transcript-card { overflow: hidden; }.transcript-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: #fff; padding: 16px 20px; text-align: left; cursor: pointer; }.transcript-toggle strong,.transcript-toggle small { display: block; }.transcript-toggle small { color: var(--muted); font-size: 9px; }.transcript-toggle b { color: var(--blue); font-size: 18px; }.transcript-card pre { margin: 0; border-top: 1px solid var(--line); padding: 14px; max-height: 360px; overflow: auto; white-space: pre-wrap; color: #4d5a6e; background: #fbfcfd; font: 10px/1.55 ui-monospace, monospace; }.medical-boundary { border-left: 3px solid var(--blue); padding: 4px 0 4px 12px; }.medical-boundary strong { font-size: 10px; }.medical-boundary p { color: var(--muted); font-size: 9px; margin: 2px 0; }
.spinner { width: 15px; height: 15px; border: 2px solid rgba(19,36,61,.25); border-top-color: currentColor; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }.dark-spinner { vertical-align: -3px; margin-right: 4px; } @keyframes spin { to { transform: rotate(360deg); }}

.patient-directory { overflow: hidden; }.patient-search { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }.patient-search > span { color: var(--muted); font-size: 20px; }.patient-search input { min-height: 42px; border: 0; outline: 0; font-size: 14px; }.patient-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); }.patient-card { min-height: 96px; display: grid; grid-template-columns: 46px minmax(0,1fr) 65px 95px 14px; gap: 12px; align-items: center; padding: 18px 20px; background: #fff; transition: .16s; }.patient-card:hover { background: #f9fbfe; }.patient-card-main strong,.patient-card-main small,.patient-stats strong,.patient-stats small,.patient-last strong,.patient-last small { display: block; }.patient-card-main strong { font-size: 13px; }.patient-card-main small,.patient-stats small,.patient-last small { color: var(--muted); font-size: 9px; }.patient-stats { text-align: center; }.patient-stats strong { font-size: 18px; }.patient-last strong { font-size: 10px; margin-top: 2px; }
.patient-profile-head { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 24px 0; }.patient-avatar.large { width: 64px; height: 64px; font-size: 22px; }.patient-profile-head h1 { margin: 3px 0; font-size: 30px; letter-spacing: -.035em; }.patient-profile-head p { color: var(--muted); margin: 0; }
.patient-profile-grid { display: grid; grid-template-columns: minmax(0,1.5fr) 340px; gap: 20px; align-items: start; }.patient-timeline-card { overflow: hidden; }.visit-timeline { padding: 4px 24px 16px; }.visit-history-item { display: grid; grid-template-columns: 12px 82px 1fr 18px; gap: 13px; padding: 20px 0; border-bottom: 1px solid var(--line); }.visit-history-item:last-child { border: 0; }.history-dot { width: 9px; height: 9px; margin-top: 5px; background: #cbd3df; border-radius: 50%; }.history-dot.completed { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }.history-dot.review { background: var(--amber); }.visit-date strong,.visit-date small { display: block; }.visit-date strong { font-size: 11px; }.visit-date small { color: var(--muted); font-size: 9px; }.visit-summary > div { display: flex; align-items: center; gap: 8px; }.visit-summary > small { color: var(--muted); font-size: 9px; }.visit-summary p { margin: 9px 0 0; font-size: 10px; }.visit-summary details { margin-top: 8px; }.visit-summary summary { color: var(--blue); font-size: 9px; font-weight: 700; cursor: pointer; }.history-note { padding: 8px 10px; margin-top: 6px; background: var(--bg); border-radius: 8px; }.history-note p { margin: 4px 0; }
.patient-memory-column { display: grid; gap: 14px; }.memory-card,.important-note-card { padding: 20px; }.memory-title { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }.memory-title > span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--blue),#7559e8); border-radius: 10px; }.memory-title h2 { margin: 0; font-size: 15px; }.memory-title p { margin: 1px 0 0; color: var(--muted); font-size: 9px; }.memory-block { padding: 11px 0; border-top: 1px solid var(--line); }.memory-block small { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 8px; font-weight: 800; }.memory-block p { margin: 5px 0 0; font-size: 10px; line-height: 1.6; }.important-note-card label strong,.important-note-card label small { display: block; }.important-note-card label strong { font-size: 12px; }.important-note-card label small { color: var(--muted); font-size: 9px; margin: 2px 0 9px; }.important-note-card textarea { width: 100%; padding: 10px; margin-bottom: 8px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; font: 11px/1.5 Manrope,sans-serif; }

.login-shell { min-height: calc(100vh - 70px); display: grid; grid-template-columns: 1.15fr .85fr; }.login-visual { display: flex; align-items: flex-end; padding: 70px max(40px, calc((100vw - 1180px)/2)); color: #fff; background: radial-gradient(circle at 85% 15%, rgba(52,119,242,.7), transparent 32%), linear-gradient(145deg,#12243d,#183c68); }.login-copy { max-width: 650px; margin-bottom: 6vh; }.login-copy h1 { margin: 15px 0; font-size: clamp(38px,4.5vw,68px); line-height: 1.08; letter-spacing: -.055em; }.login-copy p { max-width: 580px; color: #c2d0e2; font-size: 16px; }.trust-row { display: flex; gap: 18px; margin-top: 30px; color: #9fb4cf; font-size: 10px; }.trust-row span::first-letter { color: #59d1a6; }.login-panel { display: grid; place-items: center; padding: 40px; background: #fff; }.login-card { width: min(390px,100%); }.login-card h2 { margin: 7px 0 3px; font-size: 30px; }.login-card > label { display: block; margin: 20px 0 6px; font-size: 11px; font-weight: 700; }.login-card > input { width: 100%; min-height: 47px; padding: 10px 12px; border: 1px solid #d7dee8; border-radius: 10px; }.login-card .button { margin-top: 22px; }.demo-hint { margin-top: 18px; padding: 11px; color: var(--muted); background: var(--bg); border-radius: 10px; font-size: 10px; }

@media (max-width: 980px) {
  .dashboard-grid,.capture-grid,.review-grid,.form-layout,.create-appointment-grid,.patient-profile-grid { grid-template-columns: 1fr; }
  .appointment-row { grid-template-columns: 55px 10px 1fr 120px 16px; }.doctor-cell { display: none; }
  .review-sidebar { grid-template-columns: repeat(2,1fr); }.medical-boundary { grid-column: 1/-1; }
  .patient-grid { grid-template-columns: 1fr; }
  .login-shell { grid-template-columns: 1fr; }.login-visual { min-height: 42vh; }.login-copy h1 { font-size: 42px; }
}
@media (max-width: 680px) {
  .topbar { padding: 0 16px; }.brand { margin-right: 20px; }.topnav { display: none; }.user-label { display: none; }
  .page-shell,.page-shell.narrow { width: min(100% - 28px,1280px); padding-top: 24px; }.page-head,.encounter-header { align-items: flex-start; flex-direction: column; }.head-actions { width: 100%; }.date-picker { flex: 1; }.date-picker input { width: 100%; }
  .metric-row { grid-template-columns: 1fr; }.appointment-row { grid-template-columns: 47px 8px 1fr 16px; padding: 0 14px; }.appointment-row .status-badge { display: none; }
  .stepper { padding: 12px; }.stepper small { display: none; }.stepper li:not(:last-child):after { left: 38px; right: 8px; }
  .patient-avatar { display: none; }.encounter-meta { width: 100%; justify-content: space-between; }
  .patient-profile-head { align-items: flex-start; flex-direction: column; }.patient-card { grid-template-columns: 1fr 55px 80px 14px; }.patient-card .patient-avatar { display: none; }.patient-context-strip { grid-template-columns: 30px 1fr; }.patient-context-strip b { display: none; }.inline-fields,.inline-fields.two { grid-template-columns: 1fr; }
  .upload-row { align-items: flex-start; flex-direction: column; }.upload-row small { margin-left: 0; }
  .sign-bar { align-items: stretch; flex-direction: column; }.sign-bar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .review-sidebar { grid-template-columns: 1fr; }.login-panel { padding: 35px 24px; }.login-visual { padding: 50px 24px; }.login-copy h1 { font-size: 34px; }.trust-row { flex-direction: column; gap: 5px; }
}