/* Mobile layout stays fluid; wide lesson tables scroll inside their cards. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --viewport-height: 100vh;
  --keyboard-inset: 0px;
  --page-gap: clamp(12px, 3.8vw, 24px);
}
@supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
html { min-width: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; min-height: 100vh; min-height: 100dvh; }
#app, #main { min-width: 0; width: 100%; }
.shell {
  width: 100%;
  padding: max(16px, var(--safe-top)) max(var(--page-gap), var(--safe-right))
    calc(var(--nav) + var(--safe-bottom) + 24px) max(var(--page-gap), var(--safe-left));
}
.topbar { flex-wrap: wrap; gap: 10px; }
.account-button { max-width: 100%; overflow-wrap: anywhere; }
.welcome-title { gap: 6px 12px; }
.welcome-title strong { font-size: clamp(30px, 9vw, 48px); max-width: 100%; overflow-wrap: anywhere; }
.welcome p, .card, .profile h1, .training-card { overflow-wrap: anywhere; }
.card-title > *, .profile > div:last-child { min-width: 0; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 3vw, 18px); }
.stats .card { padding: clamp(12px, 3.6vw, 24px); }
.stats h2 { font-size: clamp(17px, 5vw, 22px); }
.stats .stat-label { font-size: clamp(12px, 3.5vw, 15px); }
.stats .stat-value { font-size: clamp(21px, 6vw, 28px); }
.action-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-tabs button { min-width: 0; min-height: 54px; font-size: clamp(14px, 4vw, 17px); white-space: nowrap; }
.form-grid, .student-filter-columns, .period-range, .training-grid, .balance-ends {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field, .field input, .field select, .field textarea, .time-picker, .time-picker input { min-width: 0; max-width: 100%; }
.field input, .field select, .field textarea { font-size: 16px; }
.radio-row { flex-wrap: wrap; }
.radio-row input { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: none; accent-color: var(--accent); }
.table-scroll { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.lesson-card { padding-left: 4px; padding-right: 4px; }
.lesson-card > .card-title, .lesson-card > .backfill-heading,
.lesson-card > .section-subtitle, .lesson-card > .save-line,
.lesson-card > .form-error, .lesson-card > .rule,
.lesson-card > .archive > summary, .lesson-card .archive > .list-row { margin-left: 8px; margin-right: 8px; }
.lesson-card > .primary.wide { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
@media (max-width: 759px) {
  .lesson-card {
    margin-left: calc(max(6px, var(--safe-left)) - max(var(--page-gap), var(--safe-left)));
    margin-right: calc(max(6px, var(--safe-right)) - max(var(--page-gap), var(--safe-right)));
  }
}
.data-table { width: max-content; min-width: 100%; }
.data-table th, .data-table td { min-width: 86px; padding: 9px 8px; }
.data-table .student-col {
  width: clamp(106px, 30vw, 160px); min-width: clamp(106px, 30vw, 160px);
  max-width: clamp(106px, 30vw, 160px); white-space: normal; overflow-wrap: anywhere;
}
.student-click { min-height: 44px; }
.cell-input { width: clamp(64px, 18vw, 80px); max-width: 100%; min-height: 38px; font-size: 16px; }
.query-head { padding: 20px 4px; }
.query-block { padding: 0 clamp(3px, 1.5vw, 8px); }
.query-block h2 { font-size: clamp(14px, 4vw, 18px); white-space: normal; overflow-wrap: anywhere; }
.query-block > strong, .query-block > span { max-width: 100%; overflow-wrap: anywhere; }
.filter-choice { padding: 0; font-size: clamp(13px, 3.8vw, 17px); overflow-wrap: anywhere; }
.bill-modes { gap: clamp(6px, 2vw, 8px); }
.bill-mode { min-width: 0; padding: 15px 3px; }
.bill-mode > button { display: block; width: 100%; padding: 0; }
.bill-mode > .time-picker { display: flex; width: 100%; min-height: 22px; justify-content: center; }
.bill-mode strong { font-size: clamp(16px, 4.5vw, 18px); }
.bill-mode .time-picker { font-size: clamp(10px, 2.9vw, 13px); }
.balance-ends { gap: clamp(10px, 3vw, 18px); }
.balance-end strong { font-size: clamp(20px, 5.8vw, 29px); overflow-wrap: anywhere; }
.bill-total { font-size: clamp(20px, 5.8vw, 24px); overflow-wrap: anywhere; }
.plan-row > div { min-width: 0; flex: 1; }
.plan-row > strong { font-size: clamp(20px, 5.8vw, 25px); }
.training-card { min-width: 0; padding: clamp(12px, 3.6vw, 20px); }
.profile > div:last-child { flex: 1; }
.avatar { flex: none; }
.profile button { padding: 0; max-width: 100%; }
.profile h1 { font-size: clamp(20px, 6vw, 25px); }
.menu-button { gap: 10px; flex-wrap: wrap; }
.menu-button small { margin-left: auto; }
.login {
  width: 100%; padding: max(var(--safe-top), clamp(24px, 8vh, 80px))
    max(20px, var(--safe-right)) calc(24px + var(--safe-bottom)) max(20px, var(--safe-left));
}
.login .card { padding: clamp(16px, 5vw, 22px); }
.bottom-nav {
  bottom: var(--keyboard-inset); height: calc(var(--nav) + var(--safe-bottom));
  min-height: calc(var(--nav) + var(--safe-bottom)); grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px max(4px, var(--safe-right)) calc(8px + var(--safe-bottom)) max(4px, var(--safe-left));
}
.bottom-nav button { min-width: 0; padding: 4px 0; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.3; gap: 4px; }
.bottom-nav button span { white-space: nowrap; }
.bottom-nav svg { width: clamp(18px, 5vw, 22px); height: clamp(18px, 5vw, 22px); }
.balance-float {
  width: clamp(92px, 25vw, 112px); height: clamp(92px, 25vw, 112px);
  bottom: calc(var(--keyboard-inset) + var(--nav) + var(--safe-bottom) + 16px);
}
#toast { bottom: calc(var(--keyboard-inset) + var(--nav) + var(--safe-bottom) + 16px); overflow-wrap: anywhere; }
dialog {
  left: 0; right: 0; width: min(540px, calc(100% - var(--safe-left) - var(--safe-right)));
  bottom: calc(var(--keyboard-inset) + var(--nav) + var(--safe-bottom));
  max-height: calc(var(--viewport-height) - var(--nav) - var(--safe-bottom) - 16px);
}
dialog[open] { display: flex; flex-direction: column; }
.sheet-heading, .sheet-footer, .rank-own { flex: 0 0 auto; padding-left: clamp(16px, 4.8vw, 24px); padding-right: clamp(16px, 4.8vw, 24px); }
.sheet-heading { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
.sheet-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.close-sheet { width: 40px; height: 40px; flex: none; }
.sheet-body { min-height: 0; flex: 1 1 auto; max-height: none; overflow-y: auto; overscroll-behavior-y: contain; padding: 8px clamp(16px, 4.8vw, 24px) 20px; }
.rank-row { grid-template-columns: 36px minmax(0, 1fr) minmax(68px, auto); overflow-wrap: anywhere; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-height: 480px) { .login { padding-top: max(20px, var(--safe-top)); } .login .brand-icon { margin-bottom: 12px; } }
@media (min-width: 760px) { .shell { padding-left: max(38px, var(--safe-left)); padding-right: max(38px, var(--safe-right)); } .stat { grid-template-columns: minmax(0, 1fr) auto; } }