* { box-sizing: border-box; }
:root { color-scheme: light; --green:#174d35; --green-dark:#103725; --green-pale:#eaf4ed; --ink:#1b2821; --muted:#65736b; --line:#dbe4dd; --surface:#fff; --background:#f4f7f4; --amber:#fff3d4; }
body { margin:0; background:var(--background); color:var(--ink); font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.topbar { display:flex; align-items:center; gap:12px; padding:18px max(18px,calc((100vw - 1050px)/2)); background:var(--green-dark); color:white; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:#d4f0d9; color:var(--green-dark); font-weight:900; font-size:22px; }
.topbar h1 { margin:0; font-size:1.18rem; } .subtitle { margin:1px 0 0; color:#d5e5da; font-size:.86rem; } .topbar .button { margin-left:auto; }
.page { width:100%; max-width:1050px; margin:28px auto; padding:0 18px 44px; min-height:65vh; }
h2 { margin:0 0 8px; font-size:1.45rem; } h3 { margin:0 0 12px; font-size:1.08rem; } p { margin-top:0; }
.panel { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 2px 8px #183c2810; }
.auth-panel { max-width:480px; margin:38px auto; } .auth-panel>p { color:var(--muted); }
label { display:block; margin:14px 0 6px; font-weight:650; font-size:.92rem; }
input,textarea,select { min-width:0; max-width:100%; width:100%; padding:11px 12px; border:1px solid #c9d6cd; border-radius:9px; background:white; color:var(--ink); font:inherit; }
input:focus,textarea:focus,select:focus { outline:3px solid #b8dfc4; border-color:var(--green); }
.button-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; } .button { min-height:42px; border:1px solid transparent; border-radius:10px; padding:10px 14px; font:inherit; font-weight:700; cursor:pointer; }
.button:disabled { opacity:.55; cursor:wait; } .button-primary { background:var(--green); color:white; } .button-primary:hover { background:var(--green-dark); }
.button-secondary { border-color:#b9cfc0; background:#f5faf6; color:var(--green-dark); } .button-quiet { border-color:#d7e0d9; background:transparent; color:inherit; }
.text-button { border:0; padding:0; margin-bottom:8px; background:none; color:var(--green); font:inherit; cursor:pointer; font-weight:700; }
.hidden { display:none!important; } .muted { color:var(--muted); } .message { min-height:1.3em; margin:12px 0 0; color:var(--green); } .message.error { color:#a52b25; }
.section-heading,.detail-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; } .section-heading p { margin-bottom:0; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.student-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:16px 0 28px; }
.student-card { min-width:0; text-align:left; width:100%; background:white; border:1px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; color:inherit; }
.student-card:hover { border-color:#7aaa8c; box-shadow:0 3px 12px #183c2810; } .student-card h3 { margin-bottom:5px; } .student-card p { margin:0; color:var(--muted); font-size:.9rem; }
.empty-state { text-align:center; padding:36px 20px; } .detail-heading { align-items:flex-start; margin:20px 0; } .detail-heading h2 { margin:0 0 4px; }
.progress-summary { background:var(--green-pale); border:1px solid #d2e7d8; border-radius:12px; padding:13px 16px; margin:0 0 18px; font-size:.95rem; }
.lesson-blocks { display:grid; gap:14px; min-width:0; } .lesson-card,.note-card { min-width:0; border:1px solid var(--line); background:white; border-radius:14px; overflow:hidden; }
.lesson-card.completed { border-color:#9bc8a8; } .lesson-card.completed .lesson-toggle { background:#e6f5e9; color:#14552d; }
.lesson-toggle { display:flex; align-items:center; gap:12px; width:100%; padding:17px 18px; border:0; background:#fff; text-align:left; cursor:pointer; color:var(--ink); font:inherit; }
.lesson-toggle:hover { background:#f8fbf8; } .lesson-toggle .chevron { margin-left:auto; color:var(--muted); } .lesson-title { font-weight:750; overflow-wrap:anywhere; }
.lesson-meta { display:block; color:var(--muted); font-size:.86rem; margin-top:2px; } .status-chip { flex:0 0 auto; padding:4px 8px; border-radius:99px; background:#edf0ee; color:#4e5a52; font-size:.78rem; font-weight:750; }
.completed .status-chip { background:#ccebd3; color:#14552d; } .lesson-content { min-width:0; padding:0 18px 18px; border-top:1px solid #edf1ed; }
.skill-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(135px,190px); align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #edf1ed; }
.skill-name { min-width:0; font-weight:600; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.4; } .skill-note { display:block; color:var(--muted); font-size:.85rem; margin-top:3px; }
.lesson-notes-label { margin-top:18px; } .lesson-notes { min-height:75px; resize:vertical; } .lesson-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.note-card { padding:17px 18px; background:#fffdf8; border-color:#eadfbe; } .note-head { display:flex; align-items:center; gap:10px; } .note-head input { max-width:520px; font-weight:700; }
.note-card textarea { margin-top:12px; min-height:100px; resize:vertical; } .note-card .button { margin-top:10px; } .add-note-row { display:flex; justify-content:flex-start; margin:4px 0 0; }
footer { display:flex; justify-content:space-between; gap:12px; padding:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
/* Master topic plan */
.heading-actions { margin-top:0; } .lesson-manager { margin-bottom:22px; } .manager-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:16px; }
.manager-heading h3 { margin-bottom:5px; } .manager-heading p { margin-bottom:0; max-width:700px; } .master-lesson-list { display:grid; gap:12px; margin:14px 0; }
.master-lesson { min-width:0; border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; } .master-lesson-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.master-lesson-title { font-weight:750; } .master-lesson-controls,.master-skill-controls { display:flex; flex-wrap:wrap; gap:6px; }
.master-lesson-controls .button,.master-skill-controls .button { padding:7px 10px; min-height:38px; font-size:.85rem; }
.master-skill-list,.master-notes-list { display:grid; gap:8px; margin:12px 0; } .master-skill,.master-note-section { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.master-skill input,.master-skill textarea,.master-note-section textarea { min-width:0; width:100%; } .master-skill textarea,.master-note-section textarea { display:block; min-height:58px; padding:10px 12px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; resize:vertical; }
.master-add-skill { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:10px; } .master-empty { color:var(--muted); font-size:.9rem; padding:8px 0; }
.master-notes-heading { margin:18px 0 4px; font-size:.98rem; } .topic-notes-heading { margin-top:16px; font-weight:650; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.4; }
/* Phone layout: deliberately force single-column cards and full-width controls. */
@media (max-width:760px) {
  .page { margin-top:16px; padding:0 12px 32px; } .topbar { padding:12px; gap:9px; } .topbar h1 { font-size:1rem; } .subtitle { font-size:.8rem; }
  .form-grid { grid-template-columns:1fr; gap:0; } .section-heading,.detail-heading { align-items:stretch; } .section-heading { flex-direction:column; }
  .heading-actions { width:100%; display:grid; grid-template-columns:1fr; } .heading-actions .button { width:100%; }
  #studentList.student-list { grid-template-columns:minmax(0,1fr)!important; width:100%; }
  .student-card { width:100%; padding:16px; } .panel { padding:15px; } .lesson-toggle { padding:14px 12px; gap:8px; }
  .lesson-content { padding:0 12px 14px; } .skill-row { grid-template-columns:minmax(0,1fr)!important; align-items:stretch; gap:7px; }
  .skill-name { font-size:1rem; } .skill-row select { width:100%; max-width:none; min-height:46px; font-size:16px; }
  .manager-heading { display:flex; flex-direction:column; align-items:stretch; } .manager-heading>.button { width:100%; }
  .master-lesson-top { grid-template-columns:minmax(0,1fr); } .master-lesson-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .master-lesson-controls .button { width:100%; padding:7px 4px; } .master-skill,.master-note-section,.master-add-skill { grid-template-columns:minmax(0,1fr); }
  .master-skill-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .master-skill-controls .button { width:100%; padding:7px 4px; }
  .master-add-skill .button,.lesson-actions .button,.add-note-row .button { width:100%; } .button-row { gap:8px; } footer { flex-direction:column; padding:14px 12px; }
}
@media (max-width:380px) { .brand-mark { width:36px; height:36px; flex-basis:36px; } .topbar h1 { font-size:.94rem; } .status-chip { font-size:.72rem; padding:4px 6px; } .master-lesson { padding:11px; } }

/* Student details and tests */
.form-wide { grid-column:1 / -1; }
.details-panel { margin:0 0 18px; }
.details-top { display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr); gap:18px; align-items:start; }
.details-top label { margin-top:0; } .contact-lines { display:grid; gap:6px; padding-top:2px; } .address-line span { white-space:pre-wrap; overflow-wrap:anywhere; } .contact-lines a { color:var(--green); font-weight:650; }
.status-select { font-weight:700; } .status-learning,.status-additional-learning { --st:#e3f1e7; } .status-left { --st:#eceeed; } .status-passed-theory,.status-passed-practical { --st:#fff3d4; }
.status-select { background:var(--st,#fff); }
.status-chip-lg { display:inline-block; padding:3px 9px; border-radius:99px; background:var(--st,#e3f1e7); color:var(--ink); font-size:.78rem; font-weight:750; }
.expiry-line { margin:14px 0 0; padding:9px 12px; border-radius:10px; font-weight:650; background:var(--green-pale); }
.expiry-soon { background:var(--amber); color:#6b4a00; } .expiry-expired { background:#fbe3e1; color:#a52b25; } p.expiry-soon,p.expiry-expired { font-weight:650; }
.tests-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:20px 0 10px; } .tests-head h3 { margin:0; }
.test-list { display:grid; gap:12px; } .test-card { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; }
.test-booked { background:#fffdf8; border-color:#eadfbe; } .test-pass { border-color:#9bc8a8; background:#f2faf4; } .test-fail { border-color:#e5b9b5; background:#fdf5f4; }
.test-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .test-grid label { margin:0 0 4px; font-size:.84rem; }
.test-notes { margin-top:12px; min-height:60px; resize:vertical; } .test-card .button { margin-top:10px; }
@media (max-width:760px) { .details-top { grid-template-columns:minmax(0,1fr); } .tests-head .button,.test-card .button { width:100%; } }

/* Lessons, archive */
.lesson-when { font-weight:750; margin-bottom:10px; } .lesson-booking .test-notes { margin-top:10px; } .lesson-booking .lesson-actions { margin-top:12px; }
.lesson-booking a.button { display:inline-flex; align-items:center; text-decoration:none; }
.past-lessons { margin-top:12px; } .past-lessons summary { cursor:pointer; font-weight:650; color:var(--muted); padding:6px 0; } .past-lessons .test-list { margin-top:8px; }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; } .chip { border:1px solid #b9cfc0; background:#f5faf6; color:var(--green-dark); border-radius:99px; padding:7px 16px; font:inherit; font-weight:650; cursor:pointer; min-height:38px; } .chip.active { background:var(--green); color:#fff; border-color:var(--green); }
.student-card.archived { background:#f3f4f3; opacity:.85; } .archive-note { color:#6b4a00!important; font-weight:650; }
.record-actions { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); } .record-actions .button-row { margin-top:8px; } .record-actions .archive-note { margin:0 0 6px; background:var(--amber); padding:9px 12px; border-radius:10px; }
.button-danger { border-color:#e5b9b5; background:#fff; color:#a52b25; } .button-danger:hover { background:#fbe3e1; }
@media (max-width:760px) { .record-actions .button, .lesson-booking .lesson-actions .button { width:100%; } .filter-chips .chip { flex:1; } }

/* Fees, payments, overview */
.fees-rate { max-width:260px; } .fees-rate label { margin-top:0; } .fees-list { display:grid; gap:10px; margin:10px 0; }
.fees-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(70px,1fr) minmax(90px,1fr) auto auto; gap:10px; align-items:end; border:1px solid var(--line); border-radius:12px; padding:12px; } .fees-row label { margin:0 0 4px; font-size:.84rem; } .fees-per { color:var(--muted); font-size:.9rem; padding-bottom:11px; white-space:nowrap; }
.balance-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:11px 14px; border-radius:10px; background:#eceeed; margin-bottom:12px; } .balance-line span { color:var(--muted); }
.balance-line.credit,.balance-chip.credit { background:#e3f1e7; color:#14552d; } .balance-line.owed,.balance-chip.owed { background:#fbe3e1; color:#a52b25; }
.balance-chip { display:inline-block; padding:3px 9px; border-radius:99px; font-size:.78rem; font-weight:750; }
.rate-override { max-width:420px; margin-bottom:14px; } .rate-override label { margin-top:0; font-size:.86rem; }
.payment-form { border:1px solid #b9cfc0; background:#f5faf6; border-radius:12px; padding:14px; margin:0 0 14px; } .payment-form label { margin:10px 0 4px; font-size:.84rem; } .payment-form .test-grid label { margin-top:0; }
.payment-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; } .payment-row .button { min-height:36px; padding:6px 10px; flex:0 0 auto; }
.overview-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .overview-summary div { background:var(--green-pale); border-radius:12px; padding:12px 14px; display:grid; } .overview-summary strong { font-size:1.3rem; } .overview-summary span { color:var(--muted); font-size:.86rem; }
.overview-list { display:grid; gap:8px; } .overview-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) auto; gap:12px; align-items:center; text-align:left; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; color:inherit; cursor:pointer; } .overview-row:hover { border-color:#7aaa8c; }
.overview-row.owed .ov-balance { color:#a52b25; } .overview-row.credit .ov-balance { color:#14552d; } .ov-balance { font-weight:750; } .ov-nums { color:var(--muted); font-size:.9rem; }
@media (max-width:760px) { .fees-row { grid-template-columns:minmax(0,1fr); } .fees-row .button { width:100%; } .overview-summary { grid-template-columns:minmax(0,1fr); } .overview-row { grid-template-columns:minmax(0,1fr); gap:4px; } .payment-row { flex-direction:column; } .payment-row .button { width:100%; } .payment-form .button { width:100%; } }

.details-closed { padding:0; overflow:hidden; } .details-panel>.details-toggle { margin:-22px -22px 16px; width:calc(100% + 44px); border-radius:16px 16px 0 0; border-bottom:1px solid var(--line); } .details-closed .details-toggle { border-radius:16px; }
@media (max-width:760px) { .details-panel>.details-toggle { margin:-15px -15px 14px; width:calc(100% + 30px); } .details-toggle { flex-wrap:wrap; } }

.clash-status { margin-top:10px; font-size:.92rem; } .clash-status:empty { display:none; }
.clash-status.free { color:#14552d; } .clash-status.clash { color:#a52b25; font-weight:650; background:#fbe3e1; padding:9px 12px; border-radius:10px; } .clash-status.unknown { color:var(--muted); }
.clash-day { color:var(--muted); font-size:.86rem; margin-top:4px; font-weight:400; }

/* Today screen */
.today-panel { margin:0 0 18px; } .today-panel h3 { margin-bottom:6px; } .today-section { margin-top:14px; } .today-section h4 { margin:0 0 6px; font-size:.95rem; color:var(--muted); }
.today-row { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; margin-bottom:6px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; color:inherit; cursor:pointer; }
.today-row:hover { border-color:#7aaa8c; } .today-main { font-weight:650; } .today-sub { color:var(--muted); font-size:.9rem; text-align:right; }
.today-row.owed .today-sub,.today-row.expiry-expired .today-sub { color:#a52b25; font-weight:650; } .today-row.expiry-soon .today-sub { color:#6b4a00; font-weight:650; }
@media (max-width:760px) { .today-row { flex-direction:column; align-items:flex-start; gap:2px; } .today-sub { text-align:left; } .lesson-booking .lesson-actions a.button { width:100%; justify-content:center; } }

/* Collapsed details bar: no negative offsets (those are only for the expanded panel header) */
.details-panel.details-closed>.details-toggle { margin:0; width:100%; border-bottom:0; border-radius:16px; }
@media (max-width:760px) { .details-panel.details-closed>.details-toggle { margin:0; width:100%; } }