@media screen {
  html { scroll-padding-top: 166px; }
  .app-navigation { max-width: 1464px; margin: auto; display: flex; align-items: center; padding: 0 32px; gap: 18px; min-height: 52px; border-top: 1px solid #edf1f6; }
  .app-navigation nav { display: flex; align-self: stretch; gap: 24px; }
  .app-navigation nav a { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; padding: 14px 0; font-size: 12px; color: #5b6f88; font-weight: 600; }
  .app-navigation nav a.active { color: #194d87; border-bottom-color: #194d87; }
  .app-navigation nav svg { width: 17px; height: 17px; }
  .storage-mode { margin-left: auto; padding: 5px 10px; border-radius: 20px; background: #fff7e4; color: #785b24; font-size: 10px; white-space: nowrap; }
  .storage-mode.cloud { color: #285c93; background: #ecf3fd; }
  .form-sidebar { top: 162px; max-height: calc(100vh - 180px); }
  .portal-view { padding-top: 32px; }
  .portal-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
  .portal-heading h1 { font-size: 30px; font-weight: 650; letter-spacing: -.7px; color: #203b5d; margin: 7px 0 8px; line-height: 1.3; }
  .portal-heading p { color: #5d718b; font-size: 13px; margin: 0; line-height: 1.8; }
  .portal-heading-actions { display: flex; gap: 9px; flex-shrink: 0; }
  .portal-message { border: 1px solid #dfc7b1; border-radius: 10px; background: #fff4ec; color: #884929; padding: 14px 17px; margin-bottom: 22px; font-size: 13px; line-height: 1.7; }
  .portal-message.success { border-color: #c8dbef; background: #edf4fd; color: #2a5888; }
  .portal-notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff8e8; border: 1px solid #eadab6; border-radius: 12px; padding: 19px 22px; margin: 0 0 24px; }
  .portal-notice strong { font-size: 13px; color: #755a27; }
  .portal-notice p { font-size: 12px; color: #786342; margin: 5px 0 0; line-height: 1.8; }
  .portal-card { padding: 25px; background: #fff; border: 1px solid #dce4ef; border-radius: 14px; box-shadow: 0 2px 4px #233b5d03; }
  .portal-view label { display: block; font-size: 12px; font-weight: 600; color: #48627f; margin-bottom: 8px; }
  .portal-view input, .portal-view select { width: 100%; min-width: 0; min-height: 44px; font-size: 13px; padding: 10px 12px; color: #304c6d; border: 1px solid #cbd7e6; border-radius: 8px; background: #fcfdff; line-height: 1.6; }
  .portal-view input:focus, .portal-view select:focus { border-color: #3476b8; box-shadow: 0 0 0 3px #3476b817; outline: none; background: #fff; }
  .dashboard-filter { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 17px; align-items: end; margin-bottom: 23px; }
  .dashboard-filter .button { font-size: 12px; }
  .filter-description { grid-column: 1 / -1; font-size: 11px; color: #5d718b; margin: 0; line-height: 1.6; }
  .dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 23px; }
  .stat-card { min-width: 0; padding: 22px 24px; border: 1px solid #dce4ef; border-radius: 13px; background: #fff; position: relative; overflow: hidden; }
  .stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 50px; height: 4px; background: #7b9fc8; border-radius: 0 0 0 6px; }
  .stat-card.stat-draft::after { background: #dfb45a; }
  .stat-card.stat-completed::after { background: #497cb8; }
  .stat-card > span { display: block; font-size: 12px; color: #566e8c; font-weight: 600; }
  .stat-card > strong { display: block; font-size: 36px; color: #244b78; margin: 9px 0 7px; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; }
  .stat-card > small { display: block; font-size: 10px; color: #60748d; line-height: 1.7; }
  .dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 23px; margin-bottom: 23px; align-items: start; }
  .portal-card-heading { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; margin-bottom: 20px; }
  .portal-card-heading h2 { font-size: 16px; color: #294d77; font-weight: 650; margin: 0 0 5px; }
  .portal-card-heading p { color: #5d718b; font-size: 12px; margin: 0; }
  .portal-card-heading > a { font-size: 11px; color: #285c93; white-space: nowrap; }
  .recent-record { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid #e5ebf3; }
  .recent-record > div { min-width: 0; }
  .record-name-button { border: 0; background: transparent; color: #2d527f; font-size: 13px; font-weight: 600; padding: 3px 0; text-align: left; overflow-wrap: anywhere; }
  .record-name-button:hover { text-decoration: underline; text-underline-offset: 3px; }
  .recent-record p { margin: 5px 0 0; font-size: 11px; color: #60748d; line-height: 1.7; }
  .record-badge { display: inline-flex; align-items: center; padding: 5px 9px; gap: 6px; border-radius: 6px; font-size: 10px; color: #80612b; background: #fff5dd; font-weight: 600; white-space: nowrap; }
  .record-badge.completed { color: #285d94; background: #eaf2fd; }
  .record-badge::before { content: ''; background: currentColor; width: 5px; height: 5px; border-radius: 50%; }
  .therapist-row { border-top: 1px solid #e5ebf3; padding: 15px 0; }
  .therapist-row-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #455e7e; }
  .therapist-row-heading strong { font-weight: 650; color: #2b5485; }
  .therapist-row small { font-size: 10px; color: #60748d; display: block; margin-top: 7px; }
  .therapist-bars { height: 6px; display: flex; overflow: hidden; border-radius: 5px; background: #eef2f8; margin-top: 9px; }
  .therapist-bars .done { background: #477eb6; }
  .therapist-bars .draft { background: #e2b75b; }
  .report-date-note { font-size: 10px; color: #5d718b; line-height: 1.8; border-top: 1px solid #e5ebf3; padding-top: 15px; margin: 7px 0 0; }
  .portal-empty { padding: 42px 18px; text-align: center; color: #61758e; }
  .portal-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: #edf3fc; color: #5277a3; font-size: 23px; margin-bottom: 15px; }
  .portal-empty h3 { font-size: 15px; font-weight: 600; color: #385b84; margin: 0 0 8px; }
  .portal-empty p { font-size: 12px; line-height: 1.8; margin: 0; }
  .records-card { padding: 22px 24px; }
  .records-card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e1e8f1; margin-bottom: 20px; }
  .record-tabs { display: flex; gap: 26px; align-self: stretch; }
  .record-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; color: #65778d; padding: 9px 0 16px; font-size: 13px; font-weight: 600; }
  .record-tabs button[aria-pressed='true'] { border-bottom-color: #194d87; color: #194d87; }
  .records-card-toolbar > .button { min-height: 34px; margin-bottom: 8px; padding: 7px 10px; font-size: 11px; }
  .record-filters { display: grid; grid-template-columns: 1.65fr 1.1fr 1fr 1fr; gap: 14px; align-items: end; padding: 17px; border: 1px solid #e5ebf3; border-radius: 10px; background: #f8fafd; }
  .record-filters label { margin-bottom: 7px; font-size: 11px; }
  .record-filters input, .record-filters select { background: #fff; }
  .records-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 19px 0 14px; }
  .records-summary p { color: #314f72; font-size: 13px; font-weight: 600; margin: 0 0 3px; }
  .records-summary small { display: block; font-size: 10px; color: #708198; }
  .records-summary .button { font-size: 11px; min-height: 34px; padding: 7px 0 7px 12px; }
  .record-table-wrap { overflow-x: auto; border: 1px solid #dce5f0; border-radius: 10px; }
  .record-table { border-collapse: collapse; width: 100%; min-width: 960px; table-layout: fixed; font-size: 13px; }
  .record-table thead th { background: #f0f5fc; color: #4a6788; font-size: 11px; font-weight: 650; text-align: left; padding: 15px; border-bottom: 1px solid #d8e3f1; }
  .record-table td { padding: 18px 15px; border-bottom: 1px solid #e5ebf3; color: #455f7d; overflow-wrap: anywhere; vertical-align: middle; }
  .record-table tr:last-child td { border-bottom: 0; }
  .record-table tbody tr:hover { background: #fafcff; }
  .record-table .record-student strong { display: block; color: #294d77; font-size: 14px; font-weight: 600; line-height: 1.6; }
  .record-table td small { display: block; font-size: 11px; color: #708198; margin-top: 5px; }
  .record-table .record-status small { font-size: 10px; color: #80612b; }
  .record-table .record-badge { font-size: 11px; padding: 6px 10px; }
  .record-pending { color: #8795a7; font-size: 12px; }
  .record-table .record-highlight td { background: #f1f6fe; }
  .record-table .record-highlight td:first-child { box-shadow: inset 3px 0 #3f74ac; }
  .record-badge.completed::before { content: '✓'; width: auto; height: auto; background: transparent; font-size: 12px; line-height: 1; }
  .record-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .record-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid #cedbeb; border-radius: 7px; padding: 8px 10px; color: #345b88; font-size: 11px; font-weight: 600; background: #fff; white-space: nowrap; }
  .record-actions button:hover { background: #edf4fd; border-color: #a7bfdd; }
  .record-actions .record-print { background: #194d87; border-color: #194d87; color: #fff; }
  .record-actions .record-print:hover { background: #123d6e; border-color: #123d6e; }
  .record-print svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .record-actions button[data-record-action='delete'] { color: #a12f31; border-color: #e4b8b9; }
  .record-actions button[data-record-action='permanent'] { color: #a12f31; border-color: #e4b8b9; background: #fff7f7; }
  .record-actions button[data-record-action='permanent']:hover { color: #822123; border-color: #ca8e90; background: #fdebec; }
  .records-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; }
  .records-pagination .button { font-size: 11px; min-height: 38px; padding: 9px 12px; }
  .records-pagination > span { color: #5d718b; font-size: 11px; }
  .active-record-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #d4e1f2; background: #eaf1fc; padding: 15px 19px; border-radius: 11px; margin: 0 0 25px; }
  .active-record-bar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
  .active-record-bar strong { color: #305a8a; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
  .active-record-bar .eyebrow { font-size: 9px; }
  .active-record-bar > a { color: #356492; font-size: 11px; white-space: nowrap; }
}
@media screen and (max-width: 1020px) {
  .app-navigation { padding: 0 24px; }
  .form-sidebar { position: static; max-height: none; }
  .dashboard-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-filter .button { grid-column: 1 / -1; justify-self: start; }
  .dashboard-stats { gap: 13px; }
  .stat-card { padding: 20px; }
  .dashboard-grid { grid-template-columns: 1.25fr 1fr; gap: 17px; }
  .record-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record-filters .search-field { grid-column: 1 / -1; }
}
@media screen and (max-width: 760px) {
  html { scroll-padding-top: 194px; }
  .app-navigation { padding: 0 18px; gap: 12px; flex-wrap: wrap; min-height: 49px; }
  .app-navigation nav { width: 100%; gap: 22px; }
  .app-navigation nav a { font-size: 11px; padding: 13px 0; }
  .app-navigation nav svg { width: 15px; height: 15px; }
  .storage-mode { margin: 0 0 10px; font-size: 9px; }
  .portal-view { padding-top: 25px; }
  .portal-heading { display: block; margin-bottom: 23px; }
  .portal-heading h1 { font-size: 27px; }
  .portal-heading p { font-size: 12px; }
  .portal-heading-actions { margin-top: 20px; flex-wrap: wrap; }
  .portal-heading-actions .button { font-size: 11px; padding: 10px 13px; }
  .portal-card { padding: 20px 17px; border-radius: 12px; }
  .dashboard-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .dashboard-filter > div:nth-child(3) { grid-column: 1 / -1; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .stat-card { padding: 19px 17px; border-radius: 11px; }
  .stat-card > strong { font-size: 31px; }
  .stat-card > span { font-size: 11px; }
  .stat-card > small { font-size: 9px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .portal-card-heading h2 { font-size: 15px; }
  .portal-card-heading p { font-size: 11px; }
  .portal-notice { padding: 17px; display: block; }
  .portal-notice .button { margin-top: 15px; font-size: 11px; }
  .record-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 11px; }
  .record-filters .search-field { grid-column: 1 / -1; }
  .portal-view input, .portal-view select { font-size: 16px; min-height: 46px; }
  .record-tabs { gap: 22px; }
  .record-tabs button { font-size: 12px; }
  .records-card { padding: 17px 14px; }
  .records-card-toolbar { gap: 10px; margin-bottom: 17px; }
  .records-card-toolbar > .button { font-size: 10px; padding: 6px 4px; }
  .record-filters { padding: 13px; gap: 14px 10px; }
  .record-filters > div:last-child { grid-column: 1 / -1; }
  .records-summary { gap: 10px; }
  .records-summary .button { font-size: 10px; }
  .record-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .record-table { display: block; min-width: 0; }
  .record-table colgroup { display: none; }
  .record-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .record-table tbody { display: grid; gap: 13px; }
  .record-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: 'student status' 'date therapist' 'actions actions'; gap: 17px 13px; padding: 17px 15px; border: 1px solid #dce5f0; border-radius: 11px; background: #fff; }
  .record-table td, .record-table tr:last-child td { display: block; border: 0; padding: 0; font-size: 12px; min-width: 0; }
  .record-table td::before { content: attr(data-label); display: block; color: #7a8ba0; font-size: 10px; margin-bottom: 5px; }
  .record-table .record-student { grid-area: student; }
  .record-table .record-student strong { font-size: 13px; }
  .record-table .record-student small { font-size: 10px; }
  .record-table .record-date { grid-area: date; }
  .record-table .record-therapist { grid-area: therapist; }
  .record-table .record-status { grid-area: status; text-align: right; }
  .record-table .record-student::before, .record-table .record-status::before, .record-table .record-actions-cell::before { display: none; }
  .record-table .record-actions-cell { grid-area: actions; border-top: 1px solid #e8edf4; padding-top: 13px; }
  .record-table .record-highlight { border-color: #86abd5; background: #f1f6fe; }
  .record-table .record-highlight td { background: transparent; }
  .record-table .record-highlight td:first-child { box-shadow: none; }
  .record-actions button { min-height: 39px; font-size: 11px; }
  .records-pagination { gap: 8px; flex-wrap: wrap; }
  .records-pagination .button { font-size: 10px; padding: 9px; }
  .active-record-bar { align-items: flex-start; padding: 14px; gap: 12px; }
  .active-record-bar > div { gap: 8px; }
  .active-record-bar .eyebrow { width: 100%; }
  .active-record-bar strong { font-size: 12px; }
  .active-record-bar > a { font-size: 10px; margin-top: 2px; }
}
@media print {
  #portalView, .active-record-bar, .blank-pdf-panel { display: none !important; }
  body[data-report-print='true'] #reviewView, body[data-report-print='true'] #reviewView[hidden], body[data-report-print='true'] #formView { display: none !important; }
  body[data-report-print='true'] #portalReport, body[data-report-print='true'] #portalReport[hidden] { display: block !important; color: #203c5e; font-family: Arial, sans-serif; font-size: 9pt; }
  #portalReport .report-header { display: flex; align-items: center; justify-content: space-between; gap: 10mm; border-bottom: .3mm solid #a7bcd6; padding-bottom: 5mm; margin-bottom: 5mm; }
  #portalReport .report-header img { width: 33mm; height: auto; }
  #portalReport h1 { font-size: 16pt; margin: 0 0 2mm; }
  #portalReport p { margin: 1mm 0; line-height: 1.7; }
  #portalReport .report-metrics { border: .25mm solid #b8c9de; padding: 4mm; margin: 5mm 0; display: flex; justify-content: space-between; gap: 3mm; }
  #portalReport table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; }
  #portalReport th, #portalReport td { border: .25mm solid #b8c9de; padding: 2.5mm; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
  #portalReport th { background: #edf3fa; }
  #portalReport thead { display: table-header-group; }
  #portalReport tr { break-inside: avoid; }
}