:root {
  color-scheme: light;
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-strong: #f0f0ec;
  --ink: #0a0a0a;
  --muted: #686862;
  --line: #d5d5cf;
  --accent: #f4511e;
  --accent-dark: #c9360a;
  --accent-soft: #fff0e9;
  --info: #0a0a0a;
  --info-soft: #f0f0ec;
  --warning: #7c5200;
  --warning-soft: #fff4d2;
  --danger: #a52b24;
  --danger-soft: #fff0ef;
  --shadow: 0 20px 55px rgba(10, 10, 10, .1);
  --shadow-soft: 0 10px 28px rgba(10, 10, 10, .08);
  --focus: 0 0 0 3px rgba(244, 81, 30, .25);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

body[data-page="student"], body[data-page="instructor"], body[data-page="admin"] {
  min-height: 100vh;
  background:
    linear-gradient(90deg, transparent 0 92%, rgba(10,10,10,.045) 92% 93%, transparent 93%) 0 0 / 96px 96px,
    linear-gradient(rgba(10,10,10,.035) 1px, transparent 1px) 0 0 / 100% 96px,
    var(--bg);
  color: var(--ink);
}

body[data-page="student"] #roleView, body[data-page="instructor"] #roleView { display: none !important; }
.app-shell { width: min(1280px, calc(100% - 40px)); margin: 0 auto 64px; }

.portal-header {
  position: sticky; top: 0; z-index: 12; min-height: 74px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  margin-bottom: 18px; padding: 0 18px; border: 0; border-bottom: 4px solid var(--accent);
  background: var(--ink); color: #fff; box-shadow: 0 10px 32px rgba(10,10,10,.14);
  animation: portalIntro 480ms var(--ease-out) both;
}
.portal-brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; color: #fff; font-size: .9rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; }
.portal-brand__mark { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 7px; background: var(--accent); color: #fff; font-family: inherit; }
.portal-header__section { color: #b9b9b4; font-size: .84rem; font-weight: 700; }
.portal-header__nav { justify-self: end; display: flex; gap: 4px; }
.portal-header__nav a { padding: 10px 12px; border-radius: 7px; color: #d3d3ce; font-size: .8rem; font-weight: 750; text-decoration: none; }
.portal-header__nav a:hover { background: #292925; color: #fff; }

.sync-status { width: max-content; margin: 0 0 12px auto; border: 1px solid var(--ink); background: #fff; color: var(--ink); box-shadow: none; animation: statusIn 520ms var(--ease-out) 80ms both; }
.sync-status__dot { background: var(--accent) !important; }
.sync-status[data-status="online"], .sync-status[data-status="saved"], .sync-status[data-status="checking"], .sync-status[data-status="syncing"] { border-color: var(--ink); background: #fff; color: var(--ink); }
.sync-status[data-status="error"] { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.booking-board, .admin-panel, .role-view, .login-panel {
  overflow: hidden; border: 1px solid var(--ink); border-radius: 10px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.booking-board:not([hidden]), .login-panel:not([hidden]), .admin-panel:not([hidden]), .instructor-shell:not([hidden]), .admin-shell:not([hidden]) { animation: panelIn 420ms var(--ease-out) both; }
.login-panel { width: min(880px, 100%); margin-inline: auto; }
.login-panel .inline-bar { border: 0; border-bottom: 4px solid var(--accent); background: var(--ink); color: #fff; }
.login-panel .inline-bar .eyebrow { color: #ff9b7c; }
.login-panel .inline-bar .secondary-action { border-color: #fff; background: transparent; color: #fff; }
.login-panel .login-form:not([hidden]) { animation: formIn 360ms var(--ease-out) both; }

.visual-panel { min-height: 250px; background: var(--ink); }
.visual-panel img { min-height: 250px; filter: saturate(.9) contrast(1.08) brightness(.68); }
.visual-panel::after { background: linear-gradient(90deg, rgba(10,10,10,.96), rgba(10,10,10,.58) 55%, rgba(10,10,10,.08)); }
.visual-overlay { inset: auto auto 34px 38px; }
.visual-overlay h1 { max-width: 700px; font-family: inherit; font-weight: 850; letter-spacing: -.045em; }
.visual-overlay p:last-child { max-width: 620px; color: rgba(255,255,255,.8); }
.kicker { color: #ff9b7c; }
.kicker, .eyebrow { text-transform: none; letter-spacing: 0; }
.eyebrow { color: var(--accent-dark); }
.section-description { max-width: 620px; margin: 8px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.student-schedule-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(285px, .7fr); gap: 18px; padding: 26px; background: #fff; }
.scheduler { min-width: 0; border: 0; border-radius: 0; padding: 4px 8px 8px; background: #fff; }
.scheduler > .section-heading { padding-bottom: 20px; border-bottom: 4px solid var(--ink); }
.choice-heading { margin: 26px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 1.02rem; }

.booking-steps { gap: 0; margin: 20px 0; border: 1px solid var(--ink); border-radius: 8px; overflow: hidden; }
.booking-steps span { min-height: 46px; border: 0; border-right: 1px solid var(--ink); border-radius: 0; background: #fff; color: var(--muted); transition: background 240ms ease, color 240ms ease; }
.booking-steps span:last-child { border-right: 0; }
.booking-steps span.complete { background: var(--ink); color: #fff; }
.booking-steps span.complete i { background: var(--accent); color: #fff; transform: scale(1.05); }

.student-bookings-panel { position: sticky; top: 96px; align-self: start; margin: 0; border: 0; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: none; }
.student-bookings-panel .eyebrow { color: #ff9b7c; }
.student-bookings-panel h3 { color: #fff; }
.student-bookings-panel .empty-state { border-color: #55554f; background: #181816; color: #c6c6c0; }
.segmented-filter { width: 100%; border-color: #454541; background: #181816; }
.segmented-filter button { color: #c2c2bd; }
.segmented-filter button.active { background: var(--accent); color: #fff; box-shadow: none; }
.segmented-filter button:not(.active):hover { background: #30302c; color: #fff; }

input, select, textarea { min-height: 48px; border: 1px solid #a9a9a3; border-radius: 7px; background: #fff; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #7e7e78; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); }

.student-choice-summary div, .student-booking-card, .compact-booking-card, .notification-item, .booking-card, .school-card, .calendar-day, .analytics-card, .settings-summary { border-color: var(--line); background: #fff; color: var(--ink); box-shadow: none; }
.student-choice-summary div { border-radius: 7px; }
.student-choice-summary div:first-child { border-top: 4px solid var(--accent); }
.student-choice-summary div:nth-child(2) { border-top: 4px solid var(--ink); }
.student-choice-summary div:nth-child(3) { border-top: 4px solid var(--ink); }
.student-choice-summary span { color: var(--muted); }

.slot-grid.week-schedule { gap: 8px; }
.student-week-day { border: 1px solid var(--ink); border-radius: 8px; background: #f5f5f2; box-shadow: none; }
.student-week-day:has(.week-slot-button.available) { background: #fff; }
.student-week-day-head { border-color: var(--ink); background: var(--ink); color: #fff; }
.student-week-day-head span { color: #bdbdb7; }
.week-slot-button.available { border: 1px solid #b6b6b0; background: #fff; color: var(--ink); }
.week-slot-button.available:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10,10,10,.1); }
.week-slot-button.selected { border-color: var(--accent); background: var(--accent); color: #fff; animation: slotConfirm 300ms var(--ease-out); }
.week-slot-button.booked, .week-slot-button.closed, .slot-button:disabled { border-color: #d2d2cc; background: #e7e7e2; color: #74746e; }

.primary-action, .slot-button.selected, .school-card .card-actions .primary-action { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }
.primary-action:hover, .school-card .card-actions .primary-action:hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(244,81,30,.2); }
.secondary-action { border-color: var(--ink); background: var(--ink); color: #fff; }
.secondary-action:hover { border-color: var(--accent); background: var(--accent); color: #fff; transform: translateY(-1px); }
.settings-actions button[type="button"], .admin-actions button, .booking-card button, .booking-card a, .school-card .card-actions button { border-color: var(--ink); background: #fff; color: var(--ink); }
.settings-actions button[type="button"]:hover, .admin-actions button:hover, .booking-card button:hover, .booking-card a:hover { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-1px); }
.empty-state { border-color: #aaa; background: #f4f4f0; color: var(--muted); }

.instructor-shell > .top-bar {
  position: sticky; top: 92px; z-index: 8;
  display: grid; grid-template-columns: minmax(190px, .8fr) minmax(420px, 1.4fr) auto; gap: 22px;
  margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--ink); border-radius: 9px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-soft);
}
.instructor-shell > .top-bar .eyebrow { color: #ff9b7c; }
.instructor-shell > .top-bar .current-instructor { color: #bdbdb7; }
.instructor-shell > .top-bar .secondary-action { border-color: #fff; background: transparent; color: #fff; }
.instructor-shell > .top-bar .secondary-action:hover { border-color: var(--accent); background: var(--accent); }
.view-switch { min-width: 0; border-color: #41413d; background: #1b1b19; }
.view-switch button { color: #c7c7c2; }
.view-switch button.active { background: var(--accent); color: #fff; box-shadow: none; }
.view-switch button:not(.active):hover { background: #30302d; color: #fff; }

.admin-panel { padding: 32px; }
.admin-panel > .section-heading { padding-bottom: 20px; border-bottom: 4px solid var(--ink); }
.instructor-dashboard-grid { gap: 16px; }
.mini-panel { border-color: var(--ink); border-radius: 8px; background: #fff; }
.mini-panel h3 { color: var(--ink); }
.journal-filters { grid-template-columns: minmax(150px, .85fr) minmax(150px, .75fr) minmax(150px, .75fr) minmax(220px, 1fr) minmax(140px, auto); border-color: var(--ink); background: #f4f4f0; }
.journal-filter-summary { color: var(--muted); }

.settings-form { max-width: 100%; gap: 18px; }
.settings-section { border: 1px solid var(--ink); border-radius: 8px; padding: 20px; background: #fff; }
.settings-section legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 1rem; }
.settings-section legend span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; }
.settings-grid.settings-section { padding: 20px; }
.check-tile span { border-color: var(--ink); background: #fff; color: var(--ink); }
.check-tile:hover span { border-color: var(--accent); color: var(--accent-dark); }
.check-tile input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(10,10,10,.14); }
.check-row { color: var(--ink); }
.settings-summary { border: 1px solid var(--ink); border-left: 6px solid var(--accent); color: var(--ink); }

.calendar-day { border-color: var(--ink); }
.calendar-day-head { border-color: var(--ink); background: var(--ink); color: #fff; }
.calendar-day-head span { color: #bdbdb7; }
.calendar-booking { border-color: var(--line); background: #fff; color: var(--ink); }
.calendar-booking:hover { border-color: var(--accent); transform: translateY(-2px); }
.analytics-track { background: #deded8; }
.analytics-track i { background: var(--accent); }
.analytics-card { border-top: 4px solid var(--ink); }
.analytics-card strong { color: var(--accent-dark); }

.drawer-backdrop { background: rgba(10,10,10,.62); backdrop-filter: blur(6px); transition: opacity 420ms var(--ease-out), visibility 420ms var(--ease-out); }
.edit-drawer, .booking-drawer { border-color: var(--ink); border-left: 5px solid var(--accent); background: #fff; color: var(--ink); transform: translateX(100%); transition: transform 420ms var(--ease-out); }
.drawer-backdrop.is-open .edit-drawer { transform: translateX(0); }
.drawer-heading { padding-bottom: 18px; border-bottom: 4px solid var(--ink); }
.icon-button { border-color: var(--ink); background: var(--ink); color: #fff; }
.icon-button:hover { border-color: var(--accent); background: var(--accent); color: #fff; transform: rotate(4deg); }
.success-banner:not([hidden]) { animation: successIn 440ms var(--ease-out) both; }

@keyframes portalIntro { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes statusIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes formIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slotConfirm { 0% { transform: scale(.96); } 65% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes successIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1020px) {
  .student-schedule-layout { grid-template-columns: 1fr; }
  .student-bookings-panel { position: static; grid-row: 1; }
  .instructor-shell > .top-bar { position: static; grid-template-columns: 1fr auto; }
  .instructor-switch { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 700px) {
  .app-shell { width: min(100% - 16px, 1280px); }
  .portal-header { grid-template-columns: 1fr auto; min-height: 64px; padding: 0 10px; }
  .portal-header__section { display: none; }
  .portal-header__nav a:first-child { display: none; }
  .student-schedule-layout { gap: 12px; padding: 12px; }
  .scheduler, .admin-panel { padding: 20px 16px; }
  .visual-panel, .visual-panel img { min-height: 300px; }
  .visual-overlay { inset: auto 20px 24px; width: auto; }
  .student-choice-summary, .student-filter-grid { grid-template-columns: 1fr; }
  .booking-steps { grid-template-columns: 1fr; }
  .booking-steps span { border-right: 0; border-bottom: 1px solid var(--ink); }
  .booking-steps span:last-child { border-bottom: 0; }
  .instructor-shell > .top-bar { top: 72px; grid-template-columns: 1fr; padding: 14px; }
  .instructor-shell > .top-bar .header-actions { justify-content: flex-start; }
  .wide-switch { width: 100%; overflow-x: auto; }
  .wide-switch button { min-width: 104px; }
  .journal-filters { grid-template-columns: 1fr; }
  .journal-filter-summary { justify-content: flex-start; text-align: left; }
  .settings-section { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}