:root {
  --ink: #0b0c0e;
  --panel: #15171a;
  --paper: #f0eee8;
  --muted: #777974;
  --line: #d4d1c9;
  --yellow: #f4c83f;
  --red: #ed3e37;
  --blue: #2768e8;
  --green: #219b6f;
  --purple: #8a56bd;
  --display: "Unbounded", Arial, sans-serif;
  --body: "Manrope", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { min-height: 100vh; margin: 0; background: var(--paper); color: #17191b; font: 500 15px/1.55 var(--body); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 8px 12px; background: var(--yellow); transform: translateY(-150%); }.skip-link:focus { transform: none; }
.app-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; min-height: 68px; padding: 0 24px; border-bottom: 1px solid #2f3236; background: #101214; color: #fff; }
.app-brand { display: flex; align-items: center; gap: 11px; font-size: .68rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }.app-brand > span { display: grid; place-items: center; width: 35px; height: 35px; background: var(--yellow); color: var(--ink); font: 800 .62rem var(--display); transform: rotate(-3deg); }
.app-header nav { display: flex; gap: 28px; align-self: stretch; }.app-header nav a { display: flex; align-items: center; border-bottom: 3px solid transparent; color: #989b9f; font-size: .67rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }.app-header nav a.is-active { border-color: var(--yellow); color: #fff; }.app-header nav a.is-disabled { cursor: default; opacity: .45; }
.profile-menu { display: flex; align-items: center; gap: 9px; font-size: .68rem; }.profile-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--red); font-weight: 800; }.profile-menu form { margin: 0 0 0 8px; }.profile-menu button { border: 0; background: transparent; color: #85888c; cursor: pointer; font-size: .62rem; }
.message-stack { position: fixed; z-index: 60; top: 82px; right: 20px; }.message { min-width: 280px; padding: 13px 16px; border-left: 4px solid var(--green); background: #101214; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.2); transition: opacity .4s, transform .4s; }.message.is-hiding { opacity: 0; transform: translateY(-10px); }
.dashboard-layout { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 68px); }
.student-sidebar { padding: 22px 12px; border-right: 1px solid var(--line); background: #f8f6f1; }.sidebar-heading { display: flex; justify-content: space-between; padding: 0 10px 16px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.sidebar-heading strong { color: #92938f; }
.student-link { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin-bottom: 3px; padding: 10px; border-radius: 6px; text-decoration: none; }.student-link:hover { background: #ebe8e0; }.student-link.is-active { background: #dedbd2; box-shadow: inset 3px 0 0 var(--red); }.student-link > span:last-child { min-width: 0; }.student-link strong { display: block; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.student-link small { display: block; overflow: hidden; color: #848681; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: var(--student-color, #c7dafd); color: #fff; font-size: .62rem; font-weight: 800; }.avatar-yellow { background: var(--yellow); color: var(--ink); }
.sidebar-note { margin: 24px 7px 0; padding: 14px; border: 1px dashed #b9b6ae; color: #777974; font-size: .62rem; }.sidebar-note span { color: var(--red); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.sidebar-note p { margin: 6px 0 0; }
.calendar-page { min-width: 0; padding: 30px; overflow: hidden; }.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }.eyebrow { margin: 0 0 5px; color: #777974; font-size: .59rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.page-heading h1, .form-heading h1 { margin: 0; font: 700 clamp(1.5rem, 2.3vw, 2.2rem)/1.1 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.heading-actions { display: flex; gap: 5px; }.heading-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 1px solid #c9c6be; background: #f7f5ef; font-size: .62rem; font-weight: 800; text-decoration: none; }.heading-actions .month-button { width: 38px; padding: 0; }.heading-actions .add-button { margin-left: 5px; border-color: var(--ink); background: var(--ink); color: #fff; }
.summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }.summary-row article { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 13px 16px; border: 1px solid var(--line); background: #f8f6f1; }.summary-row span { color: #777974; font-size: .58rem; font-weight: 700; text-transform: uppercase; }.summary-row strong { font: 600 .82rem var(--display); }
.legend { display: flex; flex-wrap: wrap; gap: 17px; margin: 0 0 11px; font-size: .58rem; }.legend span { display: flex; align-items: center; gap: 6px; }.legend i { display: block; width: 8px; height: 8px; border-radius: 50%; }.legend .planned { background: var(--blue); }.legend .completed { background: var(--green); }.legend .rescheduled { background: var(--purple); }.legend .cancelled { background: #92938f; }.legend b { color: #c69300; }
.calendar-shell { min-width: 760px; border-top: 1px solid #ccc9c1; border-left: 1px solid #ccc9c1; }.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }.calendar-weekdays span { padding: 8px; border-right: 1px solid #ccc9c1; border-bottom: 1px solid #ccc9c1; background: #dedbd4; font-size: .56rem; font-weight: 800; text-align: center; text-transform: uppercase; }.calendar-day { min-height: 118px; padding: 6px; border-right: 1px solid #ccc9c1; border-bottom: 1px solid #ccc9c1; background: #f8f6f1; }.calendar-day.outside { background: #e7e4dd; color: #a4a39f; }.day-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }.day-top > span { font-size: .6rem; font-weight: 800; }.day-top a { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #777974; font-size: .75rem; text-decoration: none; opacity: 0; }.calendar-day:hover .day-top a, .day-top a:focus { background: #dedbd4; opacity: 1; }
.day-events { display: grid; gap: 4px; }.lesson-event { display: block; padding: 5px 6px; border-left: 3px solid var(--blue); background: #e7efff; color: #17191b; font-size: .49rem; line-height: 1.25; text-decoration: none; }.lesson-event:hover { box-shadow: 0 2px 8px rgba(0,0,0,.13); transform: translateY(-1px); }.lesson-event span, .lesson-event strong, .lesson-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.lesson-event strong { font-size: .52rem; }.lesson-event small { opacity: .68; }.lesson-event.completed { border-color: var(--green); background: #def3eb; }.lesson-event.cancelled { border-color: #92938f; background: #e3e3df; text-decoration: line-through; }.lesson-event.rescheduled { border-color: var(--purple); background: #eee3f8; }.lesson-event.extra { box-shadow: inset 0 0 0 1px #d19e00; }
.login-page { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 100vh; background: #07080a; color: #fff; }.login-art { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(7,8,10,.08), rgba(7,8,10,.7)), url("comic-mural-v2.png") center/cover; }.login-art::after { position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 1px, rgba(0,0,0,.18) 1.5px); background-size: 7px 7px; content: ""; }.login-issue { position: absolute; z-index: 1; top: 28px; left: 28px; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.login-burst { position: absolute; z-index: 1; bottom: 11%; left: 8%; color: transparent; font: 800 clamp(4rem, 9vw, 8rem)/.76 var(--display); letter-spacing: -.1em; transform: rotate(-8deg); -webkit-text-stroke: 2px var(--yellow); }.login-burst strong { color: var(--red); -webkit-text-stroke: 0; text-shadow: 7px 6px 0 var(--blue); }.login-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 34px clamp(35px, 6vw, 85px); background: #0c0e11; }.login-brand { color: #fff; }.login-panel h1 { margin: 0 0 16px; font: 700 clamp(2.2rem, 4vw, 4.2rem)/1 var(--display); letter-spacing: -.07em; text-transform: uppercase; }.login-copy { max-width: 440px; color: #9ea0a4; }.login-form { display: grid; gap: 8px; margin-top: 32px; }.login-form label { margin-top: 9px; color: #b8b9bc; font-size: .62rem; font-weight: 800; text-transform: uppercase; }.login-form input { width: 100%; padding: 13px 14px; border: 1px solid #373a3f; background: #17191d; color: #fff; outline: none; }.login-form input:focus { border-color: var(--yellow); }.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 14px; padding: 14px 18px; border: 0; background: var(--yellow); color: var(--ink); box-shadow: 5px 5px 0 var(--red); cursor: pointer; font-size: .68rem; font-weight: 800; text-transform: uppercase; }.form-alert { padding: 10px 12px; border-left: 4px solid var(--red); background: rgba(237,62,55,.12); color: #f1b3b0; font-size: .7rem; }.demo-hint { color: #686b70; font-size: .58rem; text-transform: uppercase; }
.form-page { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 35px 0 80px; }.back-link { display: inline-block; margin-bottom: 28px; color: #656762; font-size: .65rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }.form-heading { display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: 50px; margin-bottom: 35px; }.form-heading > p { margin: 0; color: #6f716c; font-size: .75rem; }.lesson-form { display: grid; gap: 14px; }.lesson-form fieldset { margin: 0; padding: 25px; border: 1px solid var(--line); background: #f9f7f2; }.lesson-form legend { padding: 0 12px 0 0; font: 600 .72rem var(--display); text-transform: uppercase; }.lesson-form legend span { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 9px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: .55rem; }.form-grid { display: grid; gap: 18px; margin-top: 12px; }.two-columns { grid-template-columns: 1fr 1fr; }.three-columns { grid-template-columns: repeat(3, 1fr); }.field { min-width: 0; }.field > label { display: block; margin-bottom: 6px; color: #686a65; font-size: .61rem; font-weight: 800; text-transform: uppercase; }.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid #c7c4bb; border-radius: 0; background: #fff; color: #17191b; outline: none; }.field textarea { resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(39,104,232,.1); }.field small { display: block; margin-top: 5px; color: #858681; font-size: .58rem; }.field .errorlist { margin: 5px 0 0; padding: 0; color: #bd2e28; font-size: .62rem; list-style: none; }.checkbox-field { display: flex; align-items: center; min-height: 68px; padding-top: 16px; }.checkbox-field label { display: flex; align-items: center; gap: 9px; color: #17191b; cursor: pointer; }.checkbox-field input { width: 18px; height: 18px; accent-color: var(--red); }.form-wide { grid-column: 1 / -1; }.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding-top: 12px; }.form-actions > a { color: #71736f; font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.client-page, .finance-page { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 80px; }.client-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 28px 32px; border-left: 7px solid var(--yellow); background: #111316; color: #fff; box-shadow: 8px 8px 0 var(--red); }.client-hero h1 { margin: 0; font: 700 clamp(2rem, 4vw, 4rem)/1 var(--display); letter-spacing: -.07em; text-transform: uppercase; }.client-hero > div > p:last-child { margin: 10px 0 0; color: #a9abb0; }.student-switcher { display: grid; gap: 5px; min-width: 210px; }.student-switcher label { color: #92959a; font-size: .58rem; font-weight: 800; text-transform: uppercase; }.student-switcher select { padding: 10px 12px; border: 1px solid #3d4045; background: #1c1f23; color: #fff; }
.finance-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 22px 0; background: #ccc9c1; border: 1px solid #ccc9c1; }.finance-strip article { display: flex; align-items: center; justify-content: space-between; min-height: 84px; padding: 18px 22px; background: #faf8f3; }.finance-strip span { max-width: 180px; color: #70726d; font-size: .6rem; font-weight: 800; text-transform: uppercase; }.finance-strip strong { font: 600 1rem var(--display); }.finance-strip .has-debt { background: #fee6e3; }.finance-strip .has-debt strong { color: #bd2e28; }.finance-strip .has-credit { background: #e4f4ed; }.finance-strip .has-credit strong { color: #147a55; }
.client-section { margin-top: 46px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.section-heading h2 { margin: 0; font: 650 clamp(1.3rem, 2.2vw, 2rem)/1.1 var(--display); letter-spacing: -.05em; text-transform: uppercase; }.calendar-scroll { overflow-x: auto; }.client-calendar .calendar-day { min-height: 105px; }.client-calendar .lesson-event:hover { box-shadow: none; transform: none; }
.lesson-history { border-top: 1px solid #bbb8b0; }.history-row { display: grid; grid-template-columns: 76px 1.2fr .7fr 1.5fr; gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid #d1cec6; }.history-date strong { display: block; font: 700 1.7rem var(--display); }.history-date span, .history-label { color: #81837e; font-size: .55rem; font-weight: 800; text-transform: uppercase; }.history-row h3 { margin: 5px 0; font: 650 .77rem var(--display); }.history-row small, .muted { color: #81837e; font-size: .62rem; }.history-row p { margin: 5px 0 0; font-size: .72rem; }.artwork-cell { display: grid; gap: 6px; }.artwork-cell a { color: var(--blue); font-size: .67rem; font-weight: 800; }.empty-state { padding: 24px; border: 1px dashed #aaa79f; color: #777974; font-size: .72rem; }
.finance-page .page-heading { margin-bottom: 8px; }.page-intro { max-width: 750px; margin: 0 0 28px; color: #6f716c; font-size: .72rem; }.balance-table { border-top: 1px solid #bbb8b0; }.balance-head, .balance-row { display: grid; grid-template-columns: 1.4fr .75fr .75fr .8fr .45fr; gap: 15px; align-items: center; padding: 12px 15px; border-bottom: 1px solid #d1cec6; }.balance-head { background: #dedbd4; color: #777974; font-size: .56rem; font-weight: 800; text-transform: uppercase; }.balance-row { min-height: 66px; background: #f8f6f1; font-size: .7rem; }.balance-row > a { color: var(--blue); font-weight: 800; text-align: right; }.balance-student { display: flex; align-items: center; gap: 10px; }.balance-student i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--student-color); color: #fff; font-style: normal; font-weight: 800; }.debt-text { color: #bd2e28; font-weight: 800; }.credit-text { color: #147a55; font-weight: 800; }.recent-payments { margin-top: 50px; }.payment-list { border-top: 1px solid #bbb8b0; }.payment-list article { display: grid; grid-template-columns: 100px 110px 1fr auto; gap: 18px; align-items: center; min-height: 62px; padding: 12px 15px; border-bottom: 1px solid #d1cec6; background: #f8f6f1; font-size: .68rem; }.payment-list time { color: #777974; }.payment-list a { color: var(--blue); font-weight: 800; }.payment-list em { color: #92938f; font-size: .59rem; font-style: normal; }.payment-form-page { max-width: 850px; }
.archive-link { color: var(--blue); font-size: .65rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }.record-count { color: #7a7c77; font-size: .62rem; text-transform: uppercase; }.archive-page .back-link { margin-bottom: 18px; }.archive-page .page-heading { margin-bottom: 24px; }.compact-finance { margin: 0 0 26px; }.pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; font-size: .65rem; font-weight: 800; }.pagination a { padding: 9px 13px; border: 1px solid #c5c2ba; background: #f8f6f1; text-decoration: none; }.pagination span { color: #777974; }.payment-filters { display: flex; align-items: end; gap: 9px; margin: 0 0 14px; padding: 14px; background: #dedbd4; }.payment-filters label { display: grid; gap: 4px; color: #6b6d68; font-size: .55rem; font-weight: 800; text-transform: uppercase; }.payment-filters select { min-width: 180px; padding: 9px 10px; border: 1px solid #b9b6ae; background: #fff; }.payment-filters button { min-height: 38px; padding: 0 16px; border: 0; background: var(--ink); color: #fff; cursor: pointer; font-size: .6rem; font-weight: 800; text-transform: uppercase; }.payment-filters > a { margin: 0 5px 9px; color: #6c6e69; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.students-page, .student-detail-page { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 36px 0 80px; }.student-filters { display: flex; align-items: end; gap: 9px; margin-bottom: 18px; padding: 14px; background: #dedbd4; }.student-filters label { display: grid; gap: 4px; color: #6b6d68; font-size: .55rem; font-weight: 800; text-transform: uppercase; }.student-filters input, .student-filters select { min-width: 190px; padding: 9px 10px; border: 1px solid #b9b6ae; background: #fff; }.student-filters button { min-height: 39px; padding: 0 18px; border: 0; background: var(--ink); color: #fff; font-size: .6rem; font-weight: 800; text-transform: uppercase; }.student-filters > a { margin: 0 6px 9px; color: #686a65; font-size: .58rem; font-weight: 800; text-transform: uppercase; }.student-table { border-top: 1px solid #bbb8b0; }.student-table-head, .student-table-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr .55fr .65fr .45fr; gap: 14px; align-items: center; padding: 11px 15px; border-bottom: 1px solid #d1cec6; }.student-table-head { background: #dedbd4; color: #737570; font-size: .55rem; font-weight: 800; text-transform: uppercase; }.student-table-row { min-height: 70px; background: #f8f6f1; font-size: .67rem; text-decoration: none; }.student-table-row:hover { background: #fff; box-shadow: inset 4px 0 0 var(--yellow); }.student-table-row small { display: block; color: #858681; font-size: .56rem; }.student-table-row em { color: #999b96; font-size: .6rem; font-style: normal; }.access-dot { display: inline-flex; align-items: center; gap: 5px; color: #92938f; font-size: .57rem; }.access-dot::before { width: 7px; height: 7px; border-radius: 50%; background: #aaa; content: ""; }.access-dot.ready { color: #147a55; }.access-dot.ready::before { background: var(--green); }
.student-detail-page > .back-link { margin-bottom: 16px; }.student-profile-hero { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 22px; padding: 25px 28px; border-left: 7px solid var(--yellow); background: #111316; color: #fff; box-shadow: 8px 8px 0 var(--red); }.profile-mark { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--student-color); font: 700 1.6rem var(--display); }.student-profile-hero h1 { margin: 0; font: 700 clamp(1.8rem, 3vw, 3.1rem)/1 var(--display); letter-spacing: -.07em; text-transform: uppercase; }.student-profile-hero div > p:last-child { margin: 8px 0 0; color: #a9abb0; }.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.profile-actions a { padding: 9px 11px; border: 1px solid #44474c; color: #d0d2d5; font-size: .58rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }.profile-actions a.primary { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }.student-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 22px 0; border: 1px solid #ccc9c1; background: #ccc9c1; }.student-metrics article { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 15px 18px; background: #faf8f3; }.student-metrics span { color: #777974; font-size: .56rem; font-weight: 800; text-transform: uppercase; }.student-metrics strong { font: 600 .78rem var(--display); }.student-metrics .metric-debt { background: #fee6e3; }.student-metrics .metric-debt strong { color: #bd2e28; }
.student-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }.detail-card { padding: 23px; border: 1px solid #ccc9c1; background: #f8f6f1; }.detail-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 18px; }.detail-card-heading h2 { margin: 0; font: 650 1rem var(--display); letter-spacing: -.04em; text-transform: uppercase; }.detail-card-heading > a { color: var(--blue); font-size: .58rem; font-weight: 800; text-transform: uppercase; }.access-list { margin: 0; }.access-list > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid #d5d2ca; }.access-list dt { color: #777974; font-size: .56rem; font-weight: 800; text-transform: uppercase; }.access-list dd { margin: 0; }.access-list dd strong, .access-list dd small { display: block; }.access-list dd small, .access-list dd span { color: #7c7e79; font-size: .62rem; }.schedule-list { display: grid; gap: 7px; }.schedule-list article { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 11px 12px; border-left: 3px solid var(--blue); background: #e7efff; font-size: .66rem; }.schedule-list article small { grid-column: 1 / -1; color: #6f716c; }.schedule-list > p, .compact-list > p { color: #81837e; font-size: .68rem; }.private-note { margin-top: 14px; padding: 16px 20px; border-left: 4px solid var(--yellow); background: #fff8d9; }.private-note span { color: #8a6b00; font-size: .55rem; font-weight: 800; text-transform: uppercase; }.private-note p { margin: 5px 0 0; font-size: .7rem; }.history-grid { margin-top: 14px; }.compact-list { border-top: 1px solid #d5d2ca; }.compact-list > a, .compact-list > div { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid #d5d2ca; font-size: .62rem; text-decoration: none; }.compact-list time { color: #777974; }.compact-list span { color: #858681; }
.student-form-page, .access-form-page, .schedule-form-page { max-width: 980px; }.fieldset-copy { margin: 0 0 10px; color: #747671; font-size: .68rem; }.schedule-warning { padding: 15px 18px; border-left: 4px solid var(--yellow); background: #fff8d9; }.schedule-warning strong { color: #8a6b00; font-size: .58rem; text-transform: uppercase; }.schedule-warning p { margin: 4px 0 0; font-size: .68rem; }
@media (max-width: 950px) { .app-header { grid-template-columns: 1fr auto; }.app-header nav { display: none; }.dashboard-layout { grid-template-columns: 210px 1fr; }.calendar-page { overflow-x: auto; }.summary-row { min-width: 760px; }.login-page { grid-template-columns: .8fr 1.2fr; }.three-columns { grid-template-columns: 1fr 1fr; }.history-row { grid-template-columns: 65px 1fr 1fr; }.history-row > div:last-child { grid-column: 2 / -1; }.balance-head, .balance-row { grid-template-columns: 1.2fr .7fr .7fr .8fr; }.balance-head span:last-child, .balance-row > a { display: none; }.student-table-head, .student-table-row { grid-template-columns: 1.2fr 1fr 1fr .6fr; }.student-table-head span:nth-child(4), .student-table-head span:nth-child(6), .student-table-row > span:nth-child(4), .student-table-row > span:nth-child(6) { display: none; }.student-profile-hero { grid-template-columns: 65px 1fr; }.profile-mark { width: 60px; height: 60px; }.profile-actions { grid-column: 1 / -1; justify-content: flex-start; }.student-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .app-header { min-height: 62px; padding: 0 14px; }.app-brand strong { display: none; }.profile-menu > span:not(.profile-avatar) { display: none; }.dashboard-layout { display: block; }.student-sidebar { display: flex; gap: 6px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }.sidebar-heading, .sidebar-note { display: none; }.student-link { flex: 0 0 165px; margin: 0; }.calendar-page { padding: 20px 14px 35px; }.page-heading { align-items: flex-start; flex-direction: column; }.summary-row { display: none; }.heading-actions { width: 100%; }.heading-actions .add-button { margin-left: auto; }.login-page { grid-template-columns: 1fr; }.login-art { min-height: 34vh; }.login-panel { min-height: 66vh; padding: 28px 24px; }.login-panel > div { margin: 35px 0; }.login-burst { font-size: 3.5rem; }.form-page { width: min(100% - 28px, 1080px); }.form-heading { grid-template-columns: 1fr; gap: 15px; }.two-columns, .three-columns { grid-template-columns: 1fr; }.lesson-form fieldset { padding: 20px 15px; }.client-page, .finance-page { width: min(100% - 28px, 1280px); padding-top: 22px; }.client-hero { align-items: stretch; flex-direction: column; padding: 22px 20px; }.finance-strip { grid-template-columns: 1fr; }.finance-strip article { min-height: 66px; }.history-row { grid-template-columns: 52px 1fr; gap: 14px; }.history-row > div:nth-child(n+3) { grid-column: 2; }.balance-head { display: none; }.balance-row { grid-template-columns: 1fr 1fr; gap: 6px 15px; }.balance-row > span:nth-child(4) { text-align: right; }.payment-list article { grid-template-columns: 1fr auto; gap: 5px 12px; }.payment-list article > span { grid-column: 1 / -1; }.client-section { margin-top: 34px; }.payment-filters { align-items: stretch; flex-direction: column; }.payment-filters select { width: 100%; }.payment-filters > a { margin: 4px 0; }.section-heading { align-items: flex-start; }.pagination { gap: 8px; }.pagination a { padding: 8px; }.students-page, .student-detail-page { width: min(100% - 28px, 1280px); padding-top: 22px; }.student-filters { align-items: stretch; flex-direction: column; }.student-filters input, .student-filters select { width: 100%; }.student-table-head { display: none; }.student-table-row { grid-template-columns: 1fr auto; gap: 5px 12px; padding: 14px 10px; }.student-table-row > span:nth-child(2), .student-table-row > span:nth-child(3) { grid-column: 1 / -1; }.student-table-row > span:nth-child(5) { grid-column: 2; grid-row: 1; }.student-detail-grid { grid-template-columns: 1fr; }.student-profile-hero { grid-template-columns: 52px 1fr; padding: 20px 17px; }.profile-mark { width: 48px; height: 48px; font-size: 1rem; }.student-metrics { grid-template-columns: 1fr; }.student-metrics article { min-height: 58px; }.compact-list > a, .compact-list > div { grid-template-columns: 1fr auto; }.compact-list > * > span { grid-column: 1 / -1; } }

/* Tablet calendar controls */
.student-picker { display: none; margin-bottom: 18px; border: 1px solid var(--line); background: #f8f6f1; }
.student-picker summary { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 10px 14px; cursor: pointer; list-style: none; user-select: none; }
.student-picker summary::-webkit-details-marker { display: none; }
.student-picker-current { display: grid; gap: 2px; min-width: 0; }
.student-picker-current small { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.student-picker-current strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.student-picker-chevron { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 12px; border-radius: 50%; background: #e6e3dc; font-size: 1.15rem; transition: transform .2s ease; }
.student-picker[open] .student-picker-chevron { transform: rotate(180deg); }
.student-picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; border-top: 1px solid var(--line); }
.student-picker-option { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; text-decoration: none; }
.student-picker-option:first-child { margin-top: 10px; }
.student-picker-option:nth-child(2) { margin-top: 10px; }
.student-picker-option.is-active { border-color: #c9c5bc; background: #dedbd2; box-shadow: inset 3px 0 0 var(--red); }
.student-picker-option > span:last-child { min-width: 0; }
.student-picker-option strong, .student-picker-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-picker-option strong { font-size: .69rem; }
.student-picker-option small { color: var(--muted); font-size: .56rem; }
.teacher-calendar-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.teacher-calendar-scroll:focus-visible { outline: 3px solid rgba(39,104,232,.35); outline-offset: 3px; }

@media (min-width: 701px) and (max-width: 900px), (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 0 18px; }
  .app-header nav { display: flex; justify-content: center; gap: 16px; }
  .app-header nav a { font-size: .58rem; }
  .dashboard-layout { display: block; }
  .student-sidebar { display: none; }
  .calendar-page { padding: 22px 20px 46px; overflow: hidden; }
  .student-picker { display: block; }
  .page-heading { align-items: flex-end; flex-direction: row; gap: 16px; margin-bottom: 17px; }
  .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .heading-actions a { min-height: 44px; padding: 0 14px; }
  .heading-actions .month-button { width: 44px; }
  .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: 7px; margin-bottom: 14px; }
  .summary-row article { min-height: 64px; }
  .summary-row article:last-child { grid-column: 1 / -1; }
  .legend { gap: 10px 16px; margin-bottom: 12px; font-size: .6rem; }
  .teacher-calendar-scroll { overflow: visible; }
  .calendar-shell { width: 100%; min-width: 0; }
  .calendar-weekdays span { padding: 10px 5px; font-size: .61rem; }
  .calendar-day { min-height: 112px; padding: 7px; }
  .day-top > span { font-size: .66rem; }
  .day-top a { width: 30px; height: 30px; opacity: 1; }
  .lesson-event { min-height: 38px; padding: 6px; font-size: .53rem; }
  .lesson-event strong { font-size: .56rem; }
}

@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
  .dashboard-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .calendar-page { padding: 22px; }
  .summary-row { min-width: 0; }
  .calendar-shell { width: 100%; min-width: 0; }
  .calendar-day { min-height: 108px; }
}

@media (max-width: 700px) {
  .student-sidebar { display: none; }
  .student-picker { display: block; }
  .student-picker-options { grid-template-columns: 1fr; }
  .student-picker-option:nth-child(2) { margin-top: 0; }
  .calendar-page { overflow: hidden; }
  .teacher-calendar-scroll { margin-right: -14px; padding-right: 14px; overflow-x: auto; }
  .teacher-calendar-scroll .calendar-shell { min-width: 700px; }
}

/* Monthly finance summary: opening balance, this month's activity, current balance. */
.finance-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.student-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.finance-strip.student-card-metrics, .student-metrics.student-card-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-strip.student-card-metrics.single-metric { grid-template-columns: 1fr; }
.finance-strip.student-card-metrics.single-metric > article { grid-column: 1 / -1; }
.balance-head, .balance-row { grid-template-columns: 1.25fr .8fr .8fr .8fr .8fr .45fr; }

@media (max-width: 950px) {
  .balance-head, .balance-row { grid-template-columns: 1.2fr repeat(4, .8fr); }
  .student-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .finance-strip, .student-metrics, .finance-strip.student-card-metrics, .student-metrics.student-card-metrics { grid-template-columns: 1fr; }
  .balance-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .app-brand strong { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  .heading-actions a { min-height: 44px; }
  .profile-menu button { min-height: 44px; padding: 0 6px; }
  .student-link { min-height: 52px; }
  .day-top a { width: 32px; height: 32px; opacity: 1; }
  .lesson-event { min-height: 38px; }
}

.field input[readonly] { background: #e7e4dd; color: #777974; cursor: not-allowed; }

/* Cabinet management controls and tablet form fixes. */
.field input[type="datetime-local"], .field input[type="date"], .field input[type="time"] { min-width: 0; max-width: 100%; }
.lesson-form textarea { box-sizing: border-box; min-height: 118px; }
.payment-list article { grid-template-columns: 90px 90px minmax(180px, 1fr) auto auto; }
.payment-receipt, .payment-actions { display: flex; align-items: center; gap: 12px; }
.payment-actions { justify-content: flex-end; }
.receipt-lookup:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.receipt-lookup-button { padding: 12px 16px; min-height: 44px; border: 1px solid var(--blue); background: transparent; color: var(--blue); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.receipt-lookup-button:disabled { opacity: .6; cursor: wait; }
#receipt-lookup-status { flex: 1 1 240px; margin: 0; font-size: 14px; line-height: 1.5; }
#receipt-lookup-status[data-state="error"] { color: #a62620; }
.payment-list .danger-link, .danger-link { color: #bd2e28; }
.delete-confirm { padding: 24px; border: 1px solid var(--line); background: #f9f7f2; }
.delete-confirm > p { margin: 0; color: #6f716c; font-size: .72rem; }
.danger-button { padding: 14px 18px; border: 0; background: #bd2e28; color: #fff; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.schedule-list article > a { grid-column: 2; grid-row: 2; align-self: end; color: var(--blue); font-size: .58rem; font-weight: 800; text-align: right; text-transform: uppercase; }
.schedule-list article small { grid-column: 1; }
.schedule-actions { grid-column: 2; grid-row: 2; display: flex; align-self: end; justify-content: flex-end; gap: 10px; }
.schedule-actions a { color: var(--blue); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.schedule-actions .danger-link { color: #bd2e28; }

@media (min-width: 701px) and (max-width: 1100px) {
  .lesson-form .three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 701px) and (max-width: 1400px) {
  .lesson-form .lesson-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-form .lesson-time-grid .start-at-field { grid-column: 1 / -1; }
  .lesson-form .lesson-time-grid .start-at-field input { width: 100%; min-width: 0; overflow: hidden; -webkit-appearance: none; appearance: none; }
}

@media (max-width: 700px) {
  .payment-list article { grid-template-columns: 1fr auto; }
  .payment-list article > .payment-receipt, .payment-list article > .payment-actions { grid-column: 1 / -1; }
  .payment-actions { justify-content: flex-start; }
}

.lesson-form [hidden] { display: none !important; }
.lesson-form .form-actions { flex-wrap: wrap; }
.lesson-form .form-actions > .danger-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-right: auto; padding: 8px 12px; border: 1px solid #bd2e28; color: #bd2e28; text-decoration: none; }
@media (max-width: 700px) {
  .lesson-form .form-actions > .danger-link { flex-basis: 100%; }
}
.guest-lessons-page { max-width: 1200px; }
.guest-lesson-list { display: grid; gap: 16px; }
.guest-lesson-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 24px; border: 1px solid var(--line); background: #f8f6f1; }
.guest-lesson-card h2 { margin: 8px 0; font: 700 1.1rem var(--display); overflow-wrap: anywhere; }
.guest-lesson-card p { margin: 6px 0; }
.guest-lesson-card time, .guest-lesson-payment small { color: #777974; }
.guest-lesson-payment { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.guest-lesson-actions { display: flex; flex-wrap: wrap; gap: 20px; grid-column: 1 / -1; }
@media (max-width: 700px) {
  .guest-lesson-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .guest-lesson-payment { align-items: flex-start; }
}