:root {--bg:#f3f7fc;--surface:#fff;--surface-strong:#e7f0fa;--ink:#102744;--muted:#526983;--line:#cfdeed;--accent:#146fd2;--accent-dark:#0c58af;--accent-soft:#ddebfb;--info:#146fd2;--info-soft:#ddebfb;font-family:'Onest',Arial,sans-serif}
html {font-size:17px}
body[data-page] {font-family:'Onest',Arial,sans-serif;background:#f3f7fc;background-image:radial-gradient(ellipse at 8% 15%,rgba(47,133,239,.2),transparent 44%),radial-gradient(ellipse at 85% 80%,rgba(234,177,67,.11),transparent 40%),linear-gradient(130deg,#eef5fc,#fff 55%,#e8f1fc);background-size:180% 180%;animation:portalAmbient 24s ease-in-out infinite alternate;color:var(--ink)}
@keyframes portalAmbient {from{background-position:0% 30%}to{background-position:100% 70%}}
@view-transition {navigation:auto}
.booking-stage:not([hidden]),.portal-screen:not([hidden]) {animation:portalArrive .28s ease-out both}
@keyframes portalArrive {from{opacity:.82;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
body[data-page],body[data-page] button,body[data-page] input,body[data-page] select,body[data-page] textarea {font-family:'Onest',Arial,sans-serif}
body[data-page] h1,body[data-page] h2,body[data-page] h3,body[data-page] h4,.portal-quick-grid strong {font-family:'Onest',Arial,sans-serif;letter-spacing:-.02em;font-weight:600}
body[data-page] p {line-height:1.6}
.portal-main {padding-bottom:80px}
.portal-screen__heading h1 {font-size:clamp(2rem,3vw,3.1rem);line-height:1.12}
.portal-screen__heading p,.section-description,.portal-quick-grid span,.portal-explainer span,.portal-profile-card p {font-size:.94rem}
.portal-side__nav button,.portal-side__home,.portal-main__bar strong,.portal-main__bar small,.theme-toggle {font-size:.9rem}
.portal-side__person small,.portal-side__person strong {font-size:.83rem}
.portal-quick-grid button,.portal-explainer,.portal-profile-form,.portal-security,.mini-panel,.student-bookings-panel,.booking-journey {box-shadow:0 12px 30px rgba(23,62,109,.07)}
.portal-quick-grid strong {font-size:1.15rem}
.mini-panel h3,.admin-panel h2,.student-bookings-panel h3,.scheduler h2,.section-heading h2,.section-heading h3 {color:var(--ink);font-size:clamp(1.2rem,2vw,1.65rem);font-weight:700}
.admin-panel .section-description,.admin-panel .section-heading p,.mini-panel p,.empty-state {color:var(--muted)}
.booking-journey {max-width:1060px}
.booking-journey__intro h2 {letter-spacing:-.025em;font-weight:700}
.booking-journey__eyebrow,.booking-stage__heading>span {font-size:.88rem}
.booking-journey__intro p,.booking-stage__heading p,.booking-journey__time {font-size:.92rem}
.booking-steps span {font-size:.88rem;line-height:1.3}
.booking-stage {scroll-margin-top:30px}
.booking-stage__heading h3 {letter-spacing:-.025em}
.student-filter-grid {grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
.student-filter-grid label {font-size:.9rem}
.student-filter-grid select {font-size:.95rem}
.booking-help {margin:0;color:var(--muted);font-size:.9rem}
.booking-stage__subheading {font-size:1rem}
.student-choice-summary span,.day-tab span,.slot-button.week-slot-button span {font-size:.8rem}
.student-choice-summary strong,.day-tab strong {font-size:.94rem}
.day-tab small {font-size:.8rem}
.booking-time-prompt {font-size:.9rem}
.booking-stage--confirm .edit-form {max-width:740px;margin:auto;padding:0;background:transparent;border:0;box-shadow:none}
.booking-stage--confirm .drawer-heading {padding:0 0 18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.booking-stage--confirm .drawer-heading h2 {margin:8px 0 0;color:var(--ink);font-size:clamp(1.5rem,2.4vw,2.2rem)}
.booking-stage--confirm .selected-slot {margin:0 0 14px;padding:17px 20px;border:1px solid #8fb7e6;border-radius:12px;background:#e4f1ff;color:#133f70;font-size:1rem;font-weight:700}
.booking-stage--confirm .profile-summary {border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.booking-stage--confirm .settings-grid {margin:0 0 16px}
.booking-stage--confirm .settings-actions {display:flex;flex-wrap:wrap;gap:10px}
.booking-stage--confirm .settings-actions button {min-height:48px;border-radius:11px}
.portal-screen .success-banner {display:grid;gap:9px;padding:22px 24px;font-size:1rem}
.portal-screen .success-banner strong {font-size:1.3rem}
.portal-screen .success-banner span,.portal-screen .success-banner small {font-size:.95rem}
.booking-success-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.booking-success-actions button {min-height:42px;padding:8px 15px;border:1px solid #1c7656;border-radius:9px;background:#fff;color:#14503b;font-size:.9rem;font-weight:700}
.booking-success-actions button:hover {background:#d8f2e5}
.student-cancellation-note {margin:14px 0;padding:12px 15px;border:1px solid #91c9a8;border-radius:10px;background:#e4f6ea;color:#205536;font-weight:600}
.primary-action,.secondary-action,.booking-card button,.booking-card a,.admin-actions button,.settings-actions button,.check-tile span,.segmented-filter button,.view-switch button,.day-tab,.slot-button,.portal-quick-grid button {transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease}
.primary-action:hover,.portal-welcome button:hover {box-shadow:0 0 0 4px rgba(51,145,255,.15),0 8px 23px rgba(35,114,215,.24);transform:translateY(-2px)}
body[data-page] :is(button,input,select,textarea,a):focus-visible {outline:3px solid #f0bc58;outline-offset:3px}
body[data-page] button:disabled {cursor:not-allowed;opacity:.55;box-shadow:none;transform:none}
body[data-page] .booking-card button,body[data-page] .booking-card a,body[data-page] .admin-actions button,body[data-page] .settings-actions button:not(.primary-action),body[data-page] .view-switch button:not(.active),body[data-page] .segmented-filter button:not(.active) {border:1px solid #8caecc;background:#e8f1fc;color:#173e65;font-size:.88rem;font-weight:700}
body[data-page] .student-booking-actions button:not(.danger-action) {min-height:39px;padding:8px 13px;border:1px solid #8caecc;border-radius:9px;background:#e8f1fc;color:#173e65;font-size:.88rem;font-weight:700}
body[data-page] .booking-card button:hover,body[data-page] .booking-card a:hover,body[data-page] .admin-actions button:hover,body[data-page] .settings-actions button:not(.primary-action):hover {background:#cee4fb;border-color:#267be0;color:#0d3461}
body[data-page] .danger-action,body[data-page] button[id*="delete"],body[data-page] button[id*="cancel"] {border-color:#d68a89;color:#a32e31;background:#fff2f2}
body[data-page] .danger-action:hover {background:#ffdddd;color:#832227}
.check-tile input:checked+span {background:#176ac8;border-color:#73b4ff;color:#fff}
.check-tile span,.wide-switch button {background:#e2eefb;border-color:#adcae7;color:#173e65}
.empty-state,.compact-empty {background:#eaf3fc;border-color:#b6cfe9;color:#3e5b78}

html[data-theme='dark'] {--bg:#071b36;--surface:#102c4b;--surface-strong:#193a5b;--ink:#f4f8ff;--muted:#c4d3e7;--line:#395575;--accent:#2b83f6;--accent-dark:#5ca5ff;--accent-soft:#173d67;--info:#8fc5ff;--info-soft:#173d67;color-scheme:dark}
html[data-theme='dark'] body[data-page] {background:#071b36;background-image:radial-gradient(ellipse at 12% 18%,rgba(44,122,229,.27),transparent 46%),radial-gradient(ellipse at 90% 80%,rgba(37,83,164,.28),transparent 40%),linear-gradient(120deg,#071b36,#0e294b 54%,#071b36);background-size:180% 180%;color:var(--ink)}
html[data-theme='dark'] .portal-main__bar {background:rgba(8,30,56,.93);border-color:#395575}
html[data-theme='dark'] .portal-side {background:#081e3a}
html[data-theme='dark'] .portal-quick-grid button,html[data-theme='dark'] .portal-explainer,html[data-theme='dark'] .portal-profile-form,html[data-theme='dark'] .portal-security,html[data-theme='dark'] .mini-panel,html[data-theme='dark'] .student-bookings-panel,html[data-theme='dark'] .booking-journey,html[data-theme='dark'] .booking-stage,html[data-theme='dark'] .student-booking-card,html[data-theme='dark'] .booking-card,html[data-theme='dark'] .calendar-day,html[data-theme='dark'] .analytics-card,html[data-theme='dark'] .settings-section,html[data-theme='dark'] .settings-summary,html[data-theme='dark'] .journal-filters,html[data-theme='dark'] .notification-item {background:#102c4b;border-color:#395575;color:#f4f8ff}
html[data-theme='dark'] .mini-panel h3,html[data-theme='dark'] .admin-panel h2,html[data-theme='dark'] .student-bookings-panel h3,html[data-theme='dark'] .scheduler h2,html[data-theme='dark'] .section-heading h2,html[data-theme='dark'] .section-heading h3,html[data-theme='dark'] .booking-stage--confirm .drawer-heading h2,html[data-theme='dark'] .portal-screen__heading h1 {color:#f4f8ff}
html[data-theme='dark'] .portal-quick-grid strong,html[data-theme='dark'] .portal-explainer h2,html[data-theme='dark'] .booking-journey__intro h2,html[data-theme='dark'] .booking-stage__heading h3,html[data-theme='dark'] .booking-stage__subheading,html[data-theme='dark'] .student-filter-grid label {color:#f4f8ff}
html[data-theme='dark'] .mini-panel p,html[data-theme='dark'] .admin-panel .section-description,html[data-theme='dark'] .admin-panel .section-heading p,html[data-theme='dark'] .portal-screen__heading p,html[data-theme='dark'] .portal-quick-grid span,html[data-theme='dark'] .portal-explainer span,html[data-theme='dark'] .booking-help,html[data-theme='dark'] .booking-stage__heading p,html[data-theme='dark'] .booking-journey__intro p,html[data-theme='dark'] .student-booking-card span,html[data-theme='dark'] .student-booking-card small {color:#c4d3e7;opacity:1}
html[data-theme='dark'] .empty-state,html[data-theme='dark'] .compact-empty {background:#173858;border-color:#486a8e;color:#d8e7f8}
html[data-theme='dark'] .segmented-filter,html[data-theme='dark'] .view-switch {background:#0e2b4a;border-color:#486a8e}
html[data-theme='dark'] body[data-page] .booking-card button,html[data-theme='dark'] body[data-page] .booking-card a,html[data-theme='dark'] body[data-page] .admin-actions button,html[data-theme='dark'] body[data-page] .settings-actions button:not(.primary-action),html[data-theme='dark'] body[data-page] .view-switch button:not(.active),html[data-theme='dark'] body[data-page] .segmented-filter button:not(.active),html[data-theme='dark'] body[data-page] .wide-switch button {background:#21466b;border:1px solid #6385aa;color:#f4f8ff}
html[data-theme='dark'] body[data-page] .student-booking-actions button:not(.danger-action) {background:#21466b;border:1px solid #6385aa;color:#f4f8ff}
html[data-theme='dark'] body[data-page] .booking-card button:hover,html[data-theme='dark'] body[data-page] .booking-card a:hover,html[data-theme='dark'] body[data-page] .admin-actions button:hover,html[data-theme='dark'] body[data-page] .settings-actions button:not(.primary-action):hover,html[data-theme='dark'] body[data-page] .wide-switch button:hover {background:#31618f;border-color:#91c2fa;color:#fff;box-shadow:0 0 0 3px rgba(107,174,255,.16)}
html[data-theme='dark'] body[data-page] #addBlockedDate,html[data-theme='dark'] body[data-page] #resetSettings,html[data-theme='dark'] body[data-page] .settings-section button:not(.primary-action) {background:#21466b;border:1px solid #6385aa;color:#f4f8ff}
html[data-theme='dark'] body[data-page] #addBlockedDate:hover,html[data-theme='dark'] body[data-page] #resetSettings:hover,html[data-theme='dark'] body[data-page] .settings-section button:not(.primary-action):hover {background:#31618f;border-color:#91c2fa;color:#fff}
html[data-theme='dark'] body[data-page] #addBlockedDate:disabled {background:#193754;color:#b6cce4;opacity:1}
html[data-theme='dark'] body[data-page] :is(.danger-action,button[id*="delete"],button[id*="cancel"]) {background:#4b272f;border-color:#dc8287;color:#ffe5e6}
html[data-theme='dark'] body[data-page] .primary-action {background:#267be0!important;border-color:#69adfa!important;color:#fff!important}
html[data-theme='dark'] body[data-page] .primary-action:hover {background:#3e91f1!important;border-color:#a9d3ff!important}
html[data-theme='dark'] .check-tile span,html[data-theme='dark'] .wide-switch button {background:#21466b;border-color:#6385aa;color:#f4f8ff}
html[data-theme='dark'] .check-tile input:checked+span {background:#2a73ce;border-color:#9bcaff;color:#fff}
html[data-theme='dark'] .day-tab,html[data-theme='dark'] .slot-button.week-slot-button,html[data-theme='dark'] .student-choice-summary div,html[data-theme='dark'] .booking-steps span {background:#193a5b;border-color:#486a8e;color:#f4f8ff}
html[data-theme='dark'] .day-tab:disabled,html[data-theme='dark'] .slot-button:disabled {background:#142e4b;color:#a9bdd4;opacity:.7}
html[data-theme='dark'] .booking-stage--confirm .selected-slot {background:#21466b;border-color:#78adf0;color:#fff}
html[data-theme='dark'] .booking-stage--confirm .profile-summary,html[data-theme='dark'] .booking-optional {background:#193a5b;border-color:#486a8e;color:#f4f8ff}
html[data-theme='dark'] .portal-screen .success-banner {background:#123c39;border-color:#48a885;color:#ecfff6}
html[data-theme='dark'] .booking-success-actions button {background:#205846;border-color:#64bd9e;color:#f1fff8}
html[data-theme='dark'] .booking-success-actions button:hover {background:#2d765d}
html[data-theme='dark'] .student-cancellation-note {background:#174c3a;border-color:#6ab997;color:#eafff1}
html[data-theme='dark'] .portal-profile-card {background:#193a5b}
html[data-theme='dark'] .portal-header,html[data-theme='dark'] .login-panel .inline-bar {background:#081e3a}
@media(max-width:900px){.student-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:750px){.student-filter-grid{grid-template-columns:1fr}.booking-steps span{font-size:.75rem}.portal-side__nav button{font-size:.86rem}}
@media(max-width:520px){html{font-size:16px}.booking-stage--confirm .edit-form{padding:0}.booking-stage--confirm .settings-actions{display:grid}.booking-stage--confirm .settings-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){body[data-page],.booking-stage:not([hidden]),.portal-screen:not([hidden]){animation:none}body[data-page] *{transition-duration:.01ms!important}}