:root {
  --bg: #edf4fc;
  --surface: #fff;
  --surface-strong: #e4effc;
  --ink: #102444;
  --muted: #4d6684;
  --line: #ccdbef;
  --accent: #1769dc;
  --accent-dark: #1156b5;
  --accent-soft: #dbeaff;
  --info: #1769dc;
  --info-soft: #dbeaff;
  --focus: 0 0 0 3px rgba(23, 105, 220, .25);
  font-family: 'Manrope', Arial, sans-serif;
}

body[data-page] {
  background: radial-gradient(circle at 8% 15%, rgba(54, 126, 231, .16), transparent 25rem),
    radial-gradient(circle at 89% 52%, rgba(240, 185, 67, .12), transparent 24rem), #edf4fc;
  color: var(--ink);
}
body[data-page], button, input, select, textarea { font-family: 'Manrope', Arial, sans-serif; }
body[data-page] h1, body[data-page] h2, body[data-page] h3, .portal-quick-grid strong { font-family: 'Manrope', Arial, sans-serif; font-weight: 800; letter-spacing: -.045em; }
.portal-dashboard, .booking-board.portal-dashboard, .instructor-shell.portal-dashboard { background: transparent; }
.portal-header, .portal-side { background: #0a2858; }
.portal-header { border-bottom-color: #f0b943; }
.portal-brand__mark, .portal-side__brand span, .portal-avatar, .portal-profile-avatar { background: #f0b943; color: #092247; }
.portal-side__nav button.active { border-left-color: #f0b943; background: #1c56a0; }
.portal-side__nav button:hover { background: #1c56a0; }
.portal-main__bar { background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.portal-main__bar > div { margin-right: auto; }
.portal-main__bar .theme-toggle { order: 2; margin-right: 12px; }
.portal-main__bar > .secondary-action { order: 3; }
.portal-main__bar strong, .portal-screen__heading h1, .portal-profile-card strong, .portal-profile-form h2, .portal-security h2 { color: #102b59; }
.portal-screen__heading { border-bottom-color: #f0b943; }
.portal-screen__heading h1 { font-size: clamp(2.1rem, 3vw, 3.2rem); font-weight: 800; line-height: 1.14; }
.portal-screen__heading span, .eyebrow, .kicker { color: #1769dc; }
.portal-welcome { border-radius: 20px; }
.portal-welcome h1 { font-size: clamp(2.7rem, 4vw, 4.5rem); font-weight: 800; line-height: 1.08; }
.portal-welcome::after { background: linear-gradient(90deg, rgba(5, 28, 68, .96), rgba(5, 28, 68, .7) 57%, rgba(5, 28, 68, .08)); }
.portal-welcome button { background: #f0b943; border-radius: 10px; }
.portal-quick-grid button, .portal-explainer, .portal-profile-form, .portal-security, .mini-panel { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: 0 12px 28px rgba(17, 65, 121, .06); }
.portal-quick-grid button { border-top-color: #f0b943; }
.portal-quick-grid strong, .portal-explainer h2 { color: #102b59; font-size: 1.2rem; font-weight: 800; }
.portal-profile-card { border-radius: 16px; background: #dfecfa; }
.portal-profile-form h2, .portal-security h2 { font-size: 1.55rem; }
.login-panel, .role-view { border-radius: 18px; border-color: var(--line); overflow: hidden; }
.login-panel h1 { font-weight: 800; }
.portal-login-visual h2 { font-size: 2.4rem; font-weight: 800; }
.login-panel .inline-bar { background: #0a2858; border-bottom-color: #f0b943; }
.primary-action, .login-form .primary-action { background: #1769dc !important; border-color: #1769dc !important; border-radius: 11px !important; color: #fff !important; }
.primary-action:hover, .login-form .primary-action:hover { background: #1156b5 !important; border-color: #1156b5 !important; }
.secondary-action { background: #fff !important; border-color: #a8c0dd !important; color: #102b59 !important; border-radius: 10px !important; }
.secondary-action:hover { background: #e4effc !important; border-color: #1769dc !important; color: #102b59 !important; }
input, select, textarea { border-color: #aac0d9; border-radius: 10px; color: #102444; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #1769dc; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 12px; border: 1px solid #a8c0dd; border-radius: 999px; background: #fff; color: #102b59; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.theme-toggle__symbol { font-size: 1.15rem; line-height: 1; }
.portal-header__nav .theme-toggle { background: #173e77; border-color: #3c649e; color: #fff; }

/* The booking flow keeps the existing IDs and server-backed booking form. */
.booking-journey { max-width: 1060px; margin: 0 auto; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 18px 42px rgba(18, 72, 137, .09); }
.booking-journey__intro { display: flex; justify-content: space-between; align-items: start; gap: 25px; padding: 0 0 25px; }
.booking-journey__eyebrow { color: #1769dc; font-size: .71rem; font-weight: 800; }
.booking-journey__intro h2 { margin: 8px 0; color: #102b59; font-size: clamp(1.65rem, 2.3vw, 2.45rem); line-height: 1.18; }
.booking-journey__intro p { margin: 0; color: var(--muted); font-size: .82rem; }
.booking-journey__time { padding: 8px 12px; border-radius: 999px; background: #fff2d4; color: #765112; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.booking-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; border: 0; border-radius: 0; }
.booking-steps span { min-height: 63px; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #edf4fc; color: var(--muted); font-size: .72rem; }
.booking-steps span:last-child { border: 1px solid var(--line); }
.booking-steps span.active { border-color: #1769dc; background: #e6f0ff; color: #0c4da5; }
.booking-steps span.complete { border-color: #b7d5fa; background: #edf5ff; color: #1769dc; }
.booking-steps span i, .booking-steps span.complete i { flex: 0 0 auto; width: 28px; height: 28px; background: #d5e3f4; color: #3d5d81; transform: none; }
.booking-steps span.active i { background: #1769dc; color: #fff; }
.booking-steps span.complete i { background: #1769dc; color: #fff; }
.booking-stage { padding: 27px; border-radius: 16px; background: #f4f8fe; border: 1px solid #d7e5f5; }
.booking-stage__heading > span { color: #1769dc; font-size: .68rem; font-weight: 800; }
.booking-stage__heading h3 { margin: 6px 0 7px; color: #102b59; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.booking-stage__heading p { margin: 0 0 24px; color: var(--muted); font-size: .8rem; }
.student-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.student-filter-grid label { display: grid; gap: 8px; font-size: .76rem; font-weight: 800; color: #284970; }
.student-filter-grid select { min-height: 54px; padding-inline: 14px; border-color: #abc6e7; background: #fff; }
.booking-stage__tip { display: flex; align-items: start; gap: 13px; padding: 14px 16px; border: 1px solid #f0d797; border-radius: 12px; background: #fff7e5; color: #765112; }
.booking-stage__tip > span { font-size: 1.2rem; line-height: 1; }
.booking-stage__tip p { margin: 0; font-size: .73rem; line-height: 1.55; }
.booking-stage__actions { display: flex; gap: 12px; margin-top: 22px; }
.booking-stage__actions .primary-action, .booking-stage__actions .secondary-action { min-height: 46px; padding: 0 19px; }
.booking-stage__subheading { margin: 20px 0 11px; color: #102b59; font-size: .84rem; font-weight: 800; }
.student-choice-summary { margin-bottom: 18px; }
.student-choice-summary div { min-height: 69px; border-radius: 11px; border-color: var(--line); background: #fff; }
.student-choice-summary div:first-child { border-top-color: #f0b943; }
.student-choice-summary div:nth-child(2), .student-choice-summary div:nth-child(3) { border-top-color: #1769dc; }
.student-choice-summary span { font-size: .68rem; }
.student-choice-summary strong { font-size: .76rem; }
.day-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.day-tab { min-height: 75px; padding: 10px; border: 1px solid #b9cee6; border-radius: 12px; background: #fff; color: #102b59; box-shadow: none; }
.day-tab small { display: block; margin-bottom: 3px; color: #557397; font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.day-tab strong { font-size: .83rem; }
.day-tab span { margin-top: 6px; font-size: .65rem; font-weight: 700; }
.day-tab.active { border-color: #1769dc; background: #e7f0ff; color: #0c4da5; box-shadow: 0 0 0 2px rgba(23, 105, 220, .1); }
.day-tab:disabled { opacity: .48; cursor: not-allowed; }
.day-tab:not(.active):not(:disabled):hover { border-color: #1769dc; background: #f1f7ff; transform: none; }
.slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.slot-button.week-slot-button { min-height: 77px; padding: 12px; border-radius: 12px; border-color: #abc6e7; background: #fff; color: #102b59; }
.slot-button.week-slot-button strong { font-size: .94rem; }
.slot-button.week-slot-button span { font-size: .65rem; line-height: 1.3; }
.slot-button.week-slot-button:not(:disabled):hover { border-color: #1769dc; background: #e7f0ff; box-shadow: none; transform: none; }
.booking-time-prompt { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px dashed #aac4e0; border-radius: 12px; background: #eaf3ff; color: #426287; font-size: .77rem; }
.edit-drawer, .booking-drawer { border-left-color: #f0b943; background: #fff; }
.drawer-heading { border-bottom-color: #f0b943; }
.selected-slot.ready { border-color: #a9c8ed; background: #eaf3ff; }
.booking-optional { padding: 15px 17px; border: 1px solid #c7daee; border-radius: 12px; background: #f3f8ff; }
.booking-optional summary { cursor: pointer; color: #1769dc; font-size: .75rem; font-weight: 800; }
.booking-optional > div { display: grid; gap: 15px; margin-top: 18px; }
.booking-optional textarea { width: 100%; margin-top: 8px; }
.portal-screen .success-banner { max-width: 1060px; margin: 18px auto 0; border: 1px solid #a8d7b7; border-radius: 14px; background: #e5f8eb; color: #195735; }

html[data-theme='dark'] { --bg: #07172e; --surface: #10243e; --surface-strong: #173452; --ink: #eef5ff; --muted: #adc2db; --line: #294664; --accent: #62a5ff; --accent-dark: #3e83e1; --accent-soft: #183b67; --info: #74b1ff; --info-soft: #183b67; color-scheme: dark; }
html[data-theme='dark'] body[data-page] { background: radial-gradient(circle at 12% 14%, rgba(44, 112, 216, .2), transparent 27rem), radial-gradient(circle at 88% 48%, rgba(222, 157, 40, .09), transparent 25rem), #07172e; color: var(--ink); }
html[data-theme='dark'] .portal-dashboard, html[data-theme='dark'] .booking-board.portal-dashboard, html[data-theme='dark'] .instructor-shell.portal-dashboard { background: transparent; }
html[data-theme='dark'] .portal-header, html[data-theme='dark'] .portal-side { background: #071b37; }
html[data-theme='dark'] .portal-main__bar { background: rgba(12, 32, 56, .95); border-bottom-color: var(--line); }
html[data-theme='dark'] .portal-main__bar strong, html[data-theme='dark'] .portal-screen__heading h1, html[data-theme='dark'] .portal-quick-grid strong, html[data-theme='dark'] .portal-explainer h2, html[data-theme='dark'] .portal-profile-card strong, html[data-theme='dark'] .portal-profile-form h2, html[data-theme='dark'] .portal-security h2, html[data-theme='dark'] .portal-field-grid label, html[data-theme='dark'] .portal-security label { color: var(--ink); }
html[data-theme='dark'] .portal-main__bar small, 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'] .portal-profile-card p, html[data-theme='dark'] .portal-demo-hint { color: var(--muted); }
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'] .admin-panel, html[data-theme='dark'] .booking-journey { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme='dark'] .portal-quick-grid button:hover { background: #193a60; }
html[data-theme='dark'] .portal-profile-card { background: #173452; }
html[data-theme='dark'] .portal-avatar-upload { background: #25456b; border-color: #547397; color: #eef5ff; }
html[data-theme='dark'] .login-panel, html[data-theme='dark'] .role-view, html[data-theme='dark'] .login-form { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme='dark'] .login-panel h1, html[data-theme='dark'] .login-form label { color: var(--ink); }
html[data-theme='dark'] .secondary-action { background: #173452 !important; border-color: #426387 !important; color: #eef5ff !important; }
html[data-theme='dark'] .secondary-action:hover { background: #224b76 !important; border-color: #74b1ff !important; color: #fff !important; }
html[data-theme='dark'] input, html[data-theme='dark'] select, html[data-theme='dark'] textarea { background: #0d2139; border-color: #426387; color: #eef5ff; }
html[data-theme='dark'] input::placeholder, html[data-theme='dark'] textarea::placeholder { color: #92aaca; }
html[data-theme='dark'] .theme-toggle { background: #173452; border-color: #426387; color: #eef5ff; }
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: var(--ink); }
html[data-theme='dark'] .booking-stage, html[data-theme='dark'] .booking-steps span, html[data-theme='dark'] .student-choice-summary div, html[data-theme='dark'] .day-tab, html[data-theme='dark'] .slot-button.week-slot-button { background: #173452; border-color: #345472; color: var(--ink); }
html[data-theme='dark'] .booking-steps span.active, html[data-theme='dark'] .day-tab.active { background: #204b80; border-color: #74b1ff; color: #fff; }
html[data-theme='dark'] .booking-steps span.complete { background: #173e68; color: #a9d2ff; }
html[data-theme='dark'] .day-tab:disabled { background: #112b48; color: #91a8c4; opacity: .6; }
html[data-theme='dark'] .day-tab small { color: #aec6e3; }
html[data-theme='dark'] .booking-stage__tip { background: #3b311d; border-color: #735b2f; color: #ffe1a4; }
html[data-theme='dark'] .booking-journey__time { background: #3b311d; color: #ffe1a4; }
html[data-theme='dark'] .booking-time-prompt, html[data-theme='dark'] .selected-slot.ready { background: #173452; border-color: #426387; color: var(--muted); }
html[data-theme='dark'] .booking-optional { background: #173452; border-color: #426387; }
html[data-theme='dark'] .booking-optional summary { color: #a9d2ff; }
html[data-theme='dark'] .portal-screen .success-banner { background: #123b37; border-color: #34776a; color: #d5f8e6; }
html[data-theme='dark'] .slot-button.week-slot-button:not(:disabled):hover, html[data-theme='dark'] .day-tab:not(.active):not(:disabled):hover { background: #204b80; }
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, html[data-theme='dark'] .empty-state { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme='dark'] .student-booking-card span, html[data-theme='dark'] .student-booking-card small, html[data-theme='dark'] .admin-panel .section-description, html[data-theme='dark'] .admin-panel .section-heading p { color: var(--muted); }
html[data-theme='dark'] .edit-drawer, html[data-theme='dark'] .booking-drawer { background: var(--surface); color: var(--ink); }
html[data-theme='dark'] .settings-actions button:not(.primary-action) { background: #173452; border-color: #426387; color: #eef5ff; }
html[data-theme='dark'] .settings-actions button:not(.primary-action):hover { background: #224b76; }
html[data-theme='dark'] .sync-status { background: #10243e !important; border-color: #345472 !important; color: #e4f0ff !important; }

@media (max-width: 1080px) { .day-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 750px) { .portal-side__nav button.active { border-bottom-color: #f0b943; } .portal-main__bar .theme-toggle__label, .portal-header__nav .theme-toggle__label { display: none; } [data-student-panel='booking'] { scroll-margin-top: 135px; } .booking-journey { padding: 18px; } .student-filter-grid { grid-template-columns: 1fr; } .booking-steps span { min-height: 56px; padding: 8px; font-size: .62rem; } .booking-steps span i { width: 23px; height: 23px; } }
@media (max-width: 520px) { .portal-main__bar .theme-toggle { margin-right: 6px; width: 36px; padding: 0; } .booking-journey { padding: 12px; } .booking-journey__intro { padding: 8px 5px 16px; } .booking-journey__time { display: none; } .booking-stage { padding: 19px 15px; } .booking-steps { gap: 3px; } .booking-steps span { gap: 4px; padding: 6px; text-align: center; flex-direction: column; justify-content: center; } .day-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .booking-stage__actions .primary-action { width: 100%; justify-content: center; } }