:root {
  color-scheme: light;
  --blue: #0756b8;
  --deep: #063b80;
  --red: #ef332f;
  --orange: #ef5b32;
  --yellow: #ffcf1c;
  --green: #06a961;
  --sky: #dcecf7;
  --ink: #172033;
  --muted: #667085;
  --line: #d4dfec;
  --soft: #f5f8fc;
  --paper: #ffffff;
  --shadow: 0 14px 34px rgba(22, 32, 51, 0.09);
  font-family: "Kollektif", Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--soft); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--soft); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; color: var(--deep); font-size: clamp(34px, 5vw, 50px); line-height: 1.04; letter-spacing: 0; }
h2 { margin-bottom: 10px; color: var(--deep); font-size: 26px; line-height: 1.15; letter-spacing: 0; }
h3 { margin-bottom: 8px; color: var(--deep); font-size: 19px; line-height: 1.2; }
p { color: var(--muted); line-height: 1.55; }
.eyebrow { margin-bottom: 7px; color: var(--red); font-size: 12px; font-weight: 900; text-transform: uppercase; }

.brand img, .sidebar-brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.public-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: #f4f8fe; }
.public-header { min-height: 88px; display: flex; align-items: center; padding: 8px max(24px, calc((100vw - 1180px) / 2)); background: var(--paper); border-bottom: 1px solid var(--line); }
.public-header .brand { width: 250px; height: 64px; }
.public-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; align-items: center; padding: 46px 0 64px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px max(24px, calc((100vw - 1180px) / 2)); border-top: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 13px; }
footer span:first-child { color: var(--deep); font-weight: 900; }

.login-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr); align-items: center; gap: 72px; padding: 54px 0; }
.login-copy { padding: 38px 0 38px 42px; border-left: 8px solid var(--yellow); }
.login-copy h1 { max-width: 720px; font-size: clamp(42px, 5vw, 67px); }
.login-copy > p:not(.eyebrow) { max-width: 680px; font-size: 18px; font-weight: 700; }
.trust-row, .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.trust-row span, .tag-row span { padding: 7px 10px; border: 1px solid #c7dbf5; background: #eef6ff; color: var(--deep); font-size: 12px; font-weight: 900; }
.login-panel { padding: 34px; border: 1px solid var(--line); border-top: 7px solid var(--blue); background: var(--paper); box-shadow: var(--shadow); }
.panel-kicker { margin: 0 0 4px; color: var(--red); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.login-panel label, .admin-form label { display: grid; gap: 7px; margin-top: 20px; color: var(--deep); font-size: 13px; font-weight: 900; }
input, select, textarea { width: 100%; min-height: 47px; padding: 10px 12px; border: 1px solid #aebdd0; border-radius: 7px; background: var(--paper); color: var(--ink); }
textarea { min-height: 95px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(7, 86, 184, 0.16); border-color: var(--blue); }
.login-panel .primary-button { width: 100%; margin-top: 14px; }
.form-note, .form-result { margin: 15px 0 0; font-size: 13px; }
.success { color: var(--green) !important; font-weight: 900; }
.error { color: var(--red) !important; font-weight: 900; }

.primary-button, .secondary-button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid transparent; border-radius: 7px; font-weight: 900; text-decoration: none; }
.primary-button { background: var(--blue); color: var(--paper); }
.primary-button:hover { background: var(--deep); }
.secondary-button { border-color: #b8c9df; background: var(--paper); color: var(--deep); }
.secondary-button:hover { border-color: var(--blue); }
.primary-button:disabled, .secondary-button:disabled { opacity: 0.55; cursor: wait; }

.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 16px; border-right: 1px solid var(--line); background: var(--paper); z-index: 30; }
.sidebar-brand { width: 218px; height: 58px; margin: 0 6px 30px; }
.sidebar nav { display: grid; gap: 5px; }
.nav-link { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 7px; color: #526174; font-size: 14px; font-weight: 800; text-decoration: none; }
.nav-link:hover { background: #f0f6fd; color: var(--deep); }
.nav-link.active { background: var(--deep); color: var(--paper); }
.nav-dot { width: 8px; height: 8px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; }
.nav-link.active .nav-dot { border-color: var(--yellow); background: var(--yellow); }
.sidebar-support { margin-top: auto; padding: 16px; border-top: 5px solid var(--yellow); background: #fff8d9; }
.sidebar-support strong, .sidebar-support a { display: block; }
.sidebar-support strong { margin-bottom: 5px; color: var(--deep); font-size: 13px; }
.sidebar-support a { color: var(--blue); font-size: 13px; font-weight: 900; }
.sidebar-close { display: none; }
.portal-body { min-width: 0; }
.portal-header { min-height: 78px; display: flex; align-items: center; gap: 18px; padding: 10px 32px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.97); }
.portal-header > div:first-of-type { display: grid; gap: 2px; }
.portal-header > div:first-of-type span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.portal-header > div:first-of-type strong { color: var(--deep); font-size: 17px; }
.menu-button { display: none; }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--deep); font-size: 12px; font-weight: 900; }
.user-copy { display: grid; gap: 2px; }
.user-copy strong { color: var(--deep); font-size: 13px; }
.user-copy small { color: var(--muted); font-size: 11px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--deep); font-size: 20px; }
.portal-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 64px; }

.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 30px; }
.page-heading > div { max-width: 760px; }
.page-heading h1 { font-size: 43px; }
.page-heading p:last-child { margin-bottom: 0; }
.student-preview-banner { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 0 24px; padding: 16px 20px; border-left: 6px solid var(--yellow); background: #fff7d6; color: var(--deep); }
.student-preview-banner div { display: grid; gap: 3px; }
.student-preview-banner span { color: var(--muted); font-size: 13px; }
.student-preview-banner a { color: var(--deep); font-weight: 900; }
.summary-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 14px; }
.balance-card, .summary-card { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 22px rgba(22, 32, 51, 0.05); }
.balance-card { border-color: var(--deep); background: var(--deep); color: var(--paper); }
.balance-card strong { color: var(--yellow); font-size: 64px; line-height: 0.9; }
.balance-card small { color: #d7e6ff; }
.summary-card { border-top: 6px solid var(--yellow); }
.summary-card > span:first-child, .balance-card > span { color: inherit; font-size: 13px; font-weight: 900; }
.summary-card > strong { color: var(--deep); font-size: 23px; }
.summary-card small { color: var(--muted); }
.status { width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.status.active { background: #dcf7e9; color: #087142; }
.status.expired { background: #ffeaec; color: #b52034; }
.status.neutral { background: #eef2f7; color: var(--muted); }

.section-block { margin-top: 42px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 16px; }
.section-title h2 { margin-bottom: 0; }
.section-title > a { color: var(--blue); font-size: 13px; font-weight: 900; }
.section-title > input { width: min(300px, 100%); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card { min-height: 355px; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); overflow: hidden; box-shadow: 0 7px 20px rgba(22, 32, 51, 0.05); }
.product-art { min-height: 112px; display: flex; align-items: end; padding: 15px; background: var(--sky); border-bottom: 6px solid var(--yellow); }
.product-art span { color: var(--deep); font-size: 12px; font-weight: 900; }
.product-copy { flex: 1; padding: 20px; }
.product-copy .status { margin-bottom: 15px; }
.product-copy p { font-size: 14px; }
.product-copy small { display: block; margin-top: 15px; color: var(--muted); }
.product-card > .primary-button, .product-card > .secondary-button { margin: 0 20px 20px; }
.product-card.is-expired .product-art { filter: grayscale(1); opacity: 0.65; }
.quick-band { margin-top: 42px; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 28px; border-left: 8px solid var(--yellow); background: var(--sky); }
.quick-band h2 { margin-bottom: 5px; }
.quick-band p:last-child { margin-bottom: 0; }
.button-row { display: flex; gap: 9px; flex-wrap: wrap; }

.credit-hero { display: grid; grid-template-columns: 0.72fr 1.28fr; border: 1px solid var(--line); background: var(--paper); }
.credit-hero > div { min-height: 240px; display: flex; flex-direction: column; justify-content: center; padding: 32px; background: var(--deep); color: var(--paper); }
.credit-hero > div span { font-size: 13px; font-weight: 900; }
.credit-hero > div strong { color: var(--yellow); font-size: 80px; line-height: 0.95; }
.credit-hero > div small { color: #d7e6ff; }
.credit-hero dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.credit-hero dl div { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 25px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credit-hero dt { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.credit-hero dd { margin: 0; color: var(--deep); font-size: 18px; font-weight: 900; }
.history-list { border-top: 2px solid var(--deep); }
.history-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 90px; gap: 18px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.history-row time { color: var(--deep); font-size: 13px; font-weight: 900; }
.history-row div { display: grid; gap: 3px; }
.history-row div span { color: var(--muted); font-size: 13px; }
.history-row b { text-align: right; font-size: 19px; }
.positive { color: var(--green); }
.negative { color: var(--red); }

.detail-grid { display: grid; gap: 14px; }
.detail-card { display: grid; grid-template-columns: 1.15fr 1fr auto; align-items: center; gap: 28px; padding: 25px; border: 1px solid var(--line); border-left: 7px solid var(--blue); background: var(--paper); }
.detail-card h2 { margin: 12px 0 5px; }
.detail-card p { margin: 0; font-size: 13px; }
.detail-label { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.detail-card .tag-row { margin-top: 8px; }

.lesson-list { border-top: 6px solid var(--blue); background: var(--paper); }
.lesson-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 190px; gap: 20px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-top: 0; }
.lesson-row time { color: var(--deep); font-weight: 900; }
.lesson-row div { display: grid; gap: 4px; }
.lesson-row div:last-child { text-align: right; }
.lesson-row span { color: var(--muted); font-size: 13px; }
.lesson-row b { color: var(--red); font-size: 13px; }
.booking-balance { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; padding: 18px 22px; border-left: 7px solid var(--yellow); background: var(--deep); color: var(--paper); }
.booking-balance span, .booking-balance small { color: #d7e6ff; }
.booking-balance strong { color: var(--yellow); font-size: 24px; }
.booking-balance small { margin-left: auto; }
.booking-list { display: grid; gap: 12px; }
.booking-card { display: grid; grid-template-columns: 210px minmax(0, 1fr) 160px; gap: 22px; align-items: center; min-height: 150px; padding: 22px; border: 1px solid var(--line); border-top: 5px solid var(--blue); background: var(--paper); }
.booking-card.booking-draft { border-top-color: var(--yellow); }
.booking-date, .booking-copy, .booking-action { display: grid; gap: 6px; }
.booking-date strong { color: var(--deep); text-transform: capitalize; }
.booking-date span, .booking-note { color: var(--muted); font-size: 12px; }
.booking-copy h2 { margin: 3px 0 0; font-size: 21px; }
.booking-copy p { margin: 0; font-size: 13px; }
.booking-action { justify-items: stretch; }
.booking-action > strong { color: var(--deep); text-align: center; }
.booking-note { text-align: center; line-height: 1.4; }
.protected-stage { min-height: 330px; display: grid; place-items: center; align-content: center; padding: 40px; border: 1px solid var(--line); border-top: 8px solid var(--blue); background: var(--paper); text-align: center; }
.protected-stage p { max-width: 620px; }

.admin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.admin-kpis article { padding: 20px; border: 1px solid var(--line); border-top: 5px solid var(--yellow); background: var(--paper); }
.admin-kpis span, .admin-kpis strong { display: block; }
.admin-kpis span { color: var(--muted); font-size: 12px; }
.admin-kpis strong { margin-top: 7px; color: var(--deep); font-size: 32px; }
.admin-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-section { margin-top: 40px; }
.admin-section-heading { max-width: 720px; margin-bottom: 16px; }
.admin-section-heading h2 { margin: 3px 0 5px; color: var(--deep); font-size: 27px; }
.admin-section-heading > p:last-child { margin: 0; color: var(--muted); }
.admin-form { padding: 22px; border: 1px solid var(--line); background: var(--paper); }
.admin-form h2 { font-size: 20px; }
.admin-form .primary-button { width: 100%; margin-top: 20px; }
.admin-form-wide { max-width: 900px; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.admin-form-grid .full-field { grid-column: 1 / -1; }
.form-help { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.student-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.student-overview article { min-height: 165px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 22px; border: 1px solid var(--line); border-top: 5px solid var(--yellow); background: var(--paper); }
.student-overview article > span:first-child { color: var(--muted); font-size: 12px; font-weight: 900; }
.student-overview article > strong { color: var(--deep); font-size: 22px; }
.student-overview article > small { color: var(--muted); line-height: 1.45; }
.student-overview .student-balance { border-color: var(--deep); background: var(--deep); color: var(--paper); }
.student-overview .student-balance > span:first-child, .student-overview .student-balance > small { color: #d7e6ff; }
.student-overview .student-balance > strong { color: var(--yellow); font-size: 52px; line-height: 1; }
.student-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 42px; }
.student-panel { min-width: 0; padding: 22px; border: 1px solid var(--line); background: var(--paper); }
.student-panel .section-title { margin-bottom: 12px; }
.service-status-list { margin: 0; padding: 0; list-style: none; }
.service-status-list li { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.service-status-list li:last-child { border-bottom: 0; }
.service-status-list li > div { display: grid; gap: 3px; }
.service-status-list li > div:last-child { justify-items: end; text-align: right; }
.service-status-list span { color: var(--muted); font-size: 12px; }
.service-status-list b { color: var(--deep); font-size: 13px; }
.mini-state { font-weight: 900; text-transform: uppercase; }
.mini-state.available { color: var(--green); }
.mini-state.unavailable { color: var(--red); }
.access-list { display: grid; border-top: 5px solid var(--blue); background: var(--paper); }
.access-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px; border: 1px solid var(--line); border-top: 0; }
.access-line > div:first-child { display: grid; justify-items: start; gap: 5px; }
.access-line > div:last-child { display: grid; justify-items: end; gap: 3px; text-align: right; }
.access-line strong { color: var(--deep); }
.access-line span:not(.status), .access-line small { color: var(--muted); font-size: 12px; }
.access-line b { color: var(--deep); font-size: 13px; }
.compact-activity { display: grid; grid-template-columns: 115px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.compact-activity:last-child { border-bottom: 0; }
.compact-activity time { color: var(--deep); font-size: 12px; font-weight: 900; }
.compact-activity div { display: grid; gap: 3px; }
.compact-activity span { color: var(--muted); font-size: 12px; }
.compact-activity > b { color: var(--deep); }
.admin-note-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-note { padding: 18px; border: 1px solid var(--line); border-left: 5px solid var(--yellow); background: var(--paper); }
.admin-note p { margin: 0 0 12px; color: var(--deep); }
.admin-note time { color: var(--muted); font-size: 11px; }
.student-directory-row { cursor: pointer; }
.student-directory-row:focus { outline: 3px solid rgba(12, 87, 200, 0.28); outline-offset: -3px; }
.student-directory-row a { color: inherit; text-decoration: none; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
table { width: 100%; min-width: 720px; border-collapse: collapse; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--deep); color: var(--paper); font-size: 11px; text-transform: uppercase; }
td { font-size: 13px; }
td span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
tbody tr:hover { background: #f1f7fe; }

.register-kpis { margin-bottom: 18px; }
.register-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 16px; align-items: start; }
.register-form { padding: 24px; }
.register-form .admin-section-heading { margin-bottom: 18px; }
.register-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.register-details label { min-width: 0; }
.register-details .register-notes { grid-column: 1 / -1; }
.register-students-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.register-students-head h3 { margin: 3px 0 0; color: var(--deep); font-size: 22px; }
.register-students-head > strong { color: var(--blue); font-size: 13px; }
.register-student-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 8px; align-items: end; margin: 14px 0 10px; }
.register-search { margin: 0; }
.register-search input { margin: 4px 0 0; }
.register-student-tools button { min-height: 42px; }
.register-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 390px; overflow: auto; padding: 7px; border: 1px solid var(--line); background: var(--soft); }
.register-person { display: grid; grid-template-columns: 20px 38px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 62px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.register-person:has(input:checked) { border-color: var(--green); background: #effaf5; box-shadow: inset 4px 0 0 var(--green); }
.register-person input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.register-person-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e3edf9; color: var(--deep); font-size: 11px; font-weight: 900; }
.register-person > span:last-child { min-width: 0; }
.register-person strong, .register-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-person strong { color: var(--deep); font-size: 12px; }
.register-person small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.register-submit { width: 100%; margin-top: 16px; }
.register-help { padding: 22px; border-top: 6px solid var(--yellow); background: var(--deep); color: var(--paper); }
.register-help h2 { margin: 5px 0 14px; color: var(--paper); font-size: 22px; }
.register-help ol { display: grid; gap: 9px; margin: 0 0 18px; padding-left: 20px; }
.register-help li, .register-help > p:last-child { color: #d7e6ff; font-size: 12px; line-height: 1.5; }
.register-help > p:last-child { margin: 0; }
.register-history { margin-top: 34px; }
.register-history-list { display: grid; gap: 8px; }
.register-history-card { display: grid; grid-template-columns: 145px minmax(0, 1fr) 72px; gap: 18px; align-items: center; min-height: 118px; padding: 18px; border: 1px solid var(--line); border-left: 6px solid var(--blue); background: var(--paper); }
.register-history-date { display: grid; gap: 4px; }
.register-history-date time { color: var(--deep); font-size: 13px; font-weight: 900; text-transform: capitalize; }
.register-history-date span { color: var(--muted); font-size: 11px; }
.register-history-copy { min-width: 0; }
.register-group { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.register-history-copy h3 { margin: 4px 0; color: var(--deep); font-size: 18px; }
.register-history-copy p { margin: 0 0 9px; color: var(--muted); font-size: 11px; }
.attendee-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.attendee-tags span { padding: 5px 7px; border: 1px solid #c6d8eb; background: #f1f7fd; color: var(--deep); font-size: 10px; font-weight: 800; }
.register-total { display: grid; justify-items: center; color: var(--deep); font-size: 30px; line-height: 1; }
.register-total small { margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }

.center-state { width: min(590px, 100%); margin: auto; padding: 55px 20px; text-align: center; }
.center-state h1 { font-size: 38px; }
.center-state .primary-button { margin-top: 8px; }
.state-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 20px; border: 2px solid var(--yellow); background: #fff8d9; color: var(--deep); font-size: 28px; font-weight: 900; }
.spinner { width: 44px; height: 44px; margin: 0 auto 18px; border: 4px solid #c7dbf5; border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
.empty-state { grid-column: 1 / -1; padding: 32px; border: 1px dashed #b8c9df; background: var(--paper); color: var(--muted); text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .portal-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar-brand { width: 185px; }
  .summary-grid, .product-grid { grid-template-columns: 1fr 1fr; }
  .balance-card { grid-column: 1 / -1; }
  .admin-tools { grid-template-columns: 1fr; }
  .student-overview { grid-template-columns: 1fr 1fr; }
  .detail-card { grid-template-columns: 1fr 1fr; }
  .detail-card > a { grid-column: 1 / -1; }
  .booking-card { grid-template-columns: 180px minmax(0, 1fr); }
  .booking-action { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; }
  .register-layout { grid-template-columns: 1fr; }
  .register-help { order: -1; }
}

@media (max-width: 760px) {
  .student-preview-banner { align-items: flex-start; flex-direction: column; }
  .login-layout { grid-template-columns: 1fr; gap: 28px; padding: 18px 0 32px; }
  .login-copy { padding: 28px 0 28px 28px; }
  .portal-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: min(290px, 88vw); transform: translateX(-105%); transition: transform 0.2s ease; box-shadow: 18px 0 45px rgba(22, 32, 51, 0.25); }
  .menu-open .sidebar { transform: translateX(0); }
  .menu-open::after { content: ""; position: fixed; inset: 0; z-index: 20; background: rgba(12, 27, 52, 0.45); }
  .sidebar-close { position: absolute; top: 17px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--soft); color: var(--deep); font-size: 25px; }
  .menu-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--deep); font-size: 20px; }
  .user-copy { display: none; }
  .portal-header { padding: 10px 18px; }
  .portal-main { width: min(100% - 28px, 1180px); padding: 30px 0 48px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1 { font-size: 37px; }
  .credit-hero { grid-template-columns: 1fr; }
  .credit-hero > div { min-height: 190px; }
  .quick-band { align-items: flex-start; flex-direction: column; }
  .lesson-row { grid-template-columns: 1fr 1fr; }
  .lesson-row time { grid-column: 1 / -1; }
  .history-row { grid-template-columns: minmax(0, 1fr) 70px; }
  .history-row time { grid-column: 1 / -1; }
  .booking-card { grid-template-columns: 1fr; }
  .booking-action { grid-column: auto; }
  .admin-kpis { grid-template-columns: 1fr 1fr 1fr; }
  .student-detail-grid { grid-template-columns: 1fr; }
  .register-details { grid-template-columns: 1fr 1fr; }
  .register-details .register-notes { grid-column: 1 / -1; }
  .register-student-tools { grid-template-columns: 1fr 1fr; }
  .register-search { grid-column: 1 / -1; }
  .register-history-card { grid-template-columns: 120px minmax(0, 1fr) 60px; }
}

@media (max-width: 540px) {
  .public-header { min-height: 74px; padding: 6px 18px; }
  .public-header .brand { width: 215px; height: 56px; }
  .public-main { width: min(100% - 28px, 1180px); padding: 28px 0 44px; }
  footer { padding: 18px; flex-direction: column; gap: 5px; }
  .login-copy { padding-left: 20px; border-left-width: 6px; }
  .login-copy h1 { font-size: 41px; }
  .login-copy > p:not(.eyebrow) { font-size: 16px; }
  .login-panel { padding: 25px 19px; }
  .summary-grid, .product-grid, .admin-kpis { grid-template-columns: 1fr; }
  .student-overview, .admin-note-list { grid-template-columns: 1fr; }
  .access-line { grid-template-columns: 1fr; }
  .access-line > div:last-child { justify-items: start; text-align: left; }
  .compact-activity { grid-template-columns: 1fr auto; }
  .compact-activity time { grid-column: 1 / -1; }
  .service-status-list li { align-items: flex-start; flex-direction: column; }
  .service-status-list li > div:last-child { justify-items: start; text-align: left; }
  .balance-card { grid-column: auto; }
  .credit-hero dl { grid-template-columns: 1fr; }
  .detail-card { grid-template-columns: 1fr; }
  .detail-card > a { grid-column: auto; }
  .lesson-row { grid-template-columns: 1fr; }
  .lesson-row time { grid-column: auto; }
  .lesson-row div:last-child { text-align: left; }
  .section-title { align-items: flex-start; flex-direction: column; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-grid .full-field { grid-column: auto; }
  .button-row, .button-row a { width: 100%; }
  .booking-balance { align-items: flex-start; flex-direction: column; }
  .booking-balance small { margin-left: 0; }
  .booking-action { grid-template-columns: 1fr; }
  .register-details, .register-people, .register-student-tools { grid-template-columns: 1fr; }
  .register-details .register-notes, .register-search { grid-column: auto; }
  .register-students-head { align-items: flex-start; flex-direction: column; }
  .register-student-tools button { width: 100%; }
  .register-history-card { grid-template-columns: 1fr auto; gap: 10px; }
  .register-history-date { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}