.content-body {max-width:1400px;width:100%} .page-stack {display:grid;gap:1.4rem}
.phone-nav,.phone-month,.menu-backdrop {display:none}
.subject-launch{display:none}
dialog.subject-dialog:not([open]){display:none}
@media(max-width:768px){
  #monthlyPanel .subject-row>td,#monthlyPanel .subject-row .subject-heading{display:none}
  #monthlyPanel .subject-launch{display:block;width:100%;text-align:left;color:var(--text-primary);font:inherit;line-height:1.5;padding:4px;cursor:pointer}
  .subject-hint{display:block;color:var(--wst-primary-blue);font-size:.85rem;margin-top:8px;font-weight:600}
  .subject-dialog{margin:auto;width:calc(100% - 20px);max-width:480px;max-height:90dvh;padding:0;border:1px solid var(--border-color);border-radius:20px;background:var(--bg-card);color:var(--text-primary);overflow:auto;overscroll-behavior:contain}
  .subject-dialog::backdrop{background:#160c2b99}
  .subject-dialog header,.subject-dialog footer{position:sticky;background:var(--bg-card);z-index:5;padding:12px 16px}
  .subject-dialog header{top:0;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--border-color)}
  .subject-dialog h3{font-size:1rem;margin:0}
  .subject-dialog footer{bottom:0;border-top:1px solid var(--border-color)}
  .subject-dialog footer .btn{width:100%;margin-top:8px}
  .subject-dialog .monthly-grid{padding:0 12px}
  .subject-dialog .subject-launch{display:none}
  .subject-dialog .subject-heading{display:block}
  body.subject-open{overflow:hidden}
}
/* Phone layouts use one page scroller, readable records and thumb-sized controls. */
.toolbar {display:flex;flex-wrap:wrap;gap:1rem;align-items:end}.toolbar .form-group {flex:1;min-width:160px;margin:0}
.notice {padding:1rem;border-radius:12px;background:rgba(0,188,212,.09);line-height:1.65}
.error {background:rgba(200,35,55,.1);color:var(--text-primary);border:1px solid #c82337}
#status {margin-bottom:1rem}#status:empty {display:none}.glass-card h3 {margin-bottom:1rem}
.empty {padding:2rem;text-align:center;color:var(--text-secondary);line-height:1.8}
.table-wrap {overflow-x:auto}table {width:100%;border-collapse:collapse}th,td {padding:1rem;text-align:left;border-bottom:1px solid var(--border-color)}th {font-size:.8rem;color:var(--text-secondary)}
.child-card {display:grid;gap:1rem}.child-card .avatar {background:var(--wst-primary-cyan);color:white;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:700}
.student-photo {position:relative;width:100px;height:100px;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:var(--wst-primary-cyan);color:white;font-size:1.8rem;font-weight:700;margin-bottom:.5rem}
.student-photo-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg-card)}
.student-photo-image[hidden] {display:none}
.payment-type-label,.payment-type-description {display:block;min-width:140px}
.payment-type-description {margin-top:.35rem;line-height:1.5}
.cart-summary {display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:1.4rem}
.cart-price {font-size:1.3rem;margin:1rem 0;font-weight:700}
#addCartForm .field {max-width:360px;margin-top:1rem}
#cartPanel {display:grid;gap:1rem}
.muted {color:var(--text-secondary);font-size:.9rem}.field {display:grid;gap:.5rem;margin-bottom:1.2rem}
.auth-wrap {min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 10% 20%,rgba(24,119,242,.1),rgba(0,188,212,.05))}
.auth-card {width:100%;max-width:440px}.auth-brand {text-align:center;margin-bottom:2rem}.auth-brand .brand-logo {margin:0 auto 1rem}.auth-card h1 {font-size:1.6rem}
.auth-card .btn {width:100%;margin-top:.7rem}.auth-card p {margin:.75rem 0;line-height:1.6}
button:disabled {opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:3px solid var(--wst-primary-cyan);outline-offset:3px}
.pager {display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin-top:1rem}.mobile-menu-toggle {border:0;font-size:1.4rem;cursor:pointer}
.dashboard-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.metric-info {display:grid;gap:.6rem}.metric-value {font-size:1.7rem;font-weight:700;line-height:1.2}.metric-label {font-size:.85rem;color:var(--text-secondary)}
.gradient-card h2 {color:white;margin-bottom:.5rem}.message {margin-bottom:1rem}.message p {margin:.7rem 0}.mobile-close {display:none}
@media(max-width:991px){.nav-item a span:first-child {display:inline}.dashboard-grid{grid-template-columns:1fr}.sidebar-footer .btn{font-size:.8rem;padding:.6rem}}
@media(max-width:768px){.sidebar {display:none}.sidebar.open {display:flex;position:fixed;left:0;top:0;bottom:0;width:270px;height:100vh;flex-direction:column;align-items:stretch;justify-content:flex-start;z-index:100}.sidebar.open .nav-menu {display:flex;flex-direction:column;flex:1}.sidebar.open .nav-item span,.sidebar.open .brand-name {display:inline}.sidebar.open .nav-item a{justify-content:flex-start}.mobile-close{display:block;margin-bottom:1rem}.bar-right{gap:.4rem}.bar-right .user-profile{display:none}.top-bar{padding:1rem}.top-bar h2{font-size:1.1rem}.content-body{padding:1rem}.user-info{display:none}.toolbar{display:grid;width:100%}}
/* Let wide payment tables scroll inside their cards on narrow screens. */
.main-content,.page-stack,.page-stack>*,.glass-card,#cartPanel {min-width:0}
.toolbar .field {min-width:0;max-width:100%;flex:1}
.toolbar select {min-width:0;max-width:100%;width:100%}
#checkoutForm {max-width:560px}

/* WST website palette, visually matched to https://www.wst.lk/.
   Bright brand colours decorate surfaces; darker variants support readable controls. */
:root {
  --wst-primary-blue:#6230C4;
  --wst-primary-cyan:#25C9EB;
  --wst-accent-purple:#8619D5;
  --wst-sage-teal:#A49AC9;
  --wst-magenta:#DE28C8;
  --wst-yellow:#FFD52A;
  --bg-app:#F6F4FB;
  --bg-sidebar:#291746;
  --border-color:#E4DDF0;
  --text-primary:#281E39;
  --text-secondary:#60566E;
  --text-muted:#71667F;
  --shadow-glow:0 0 15px rgba(134,25,213,.18);
  --shadow-md:0 4px 16px rgba(59,30,94,.08);
}
[data-theme="dark"] {
  --bg-app:#161020;
  --bg-sidebar:#1C102D;
  --bg-surface:rgba(40,29,55,.94);
  --bg-card:#281D37;
  --border-color:#4D3B62;
  --text-primary:#F5EFFC;
  --text-secondary:#C9BDD8;
  --text-muted:#B8A8CC;
  --shadow-md:0 4px 20px rgba(0,0,0,.3);
}
.sidebar {background:linear-gradient(170deg,var(--bg-sidebar),#3C1962)}
.brand-logo {background:linear-gradient(135deg,#6230C4,#A3189A);border-bottom:3px solid var(--wst-yellow);box-shadow:0 4px 12px rgba(134,25,213,.2)}
.brand-name {background:none;-webkit-text-fill-color:#FFF;color:#FFF}
.nav-item a {color:#E5DCEE}
.nav-item.active a {border-left-color:var(--wst-yellow);background:linear-gradient(90deg,rgba(222,40,200,.28),rgba(37,201,235,.08));color:#FFF}
.nav-item a:hover {background-color:rgba(255,255,255,.12)}
.top-bar {border-top:4px solid transparent;border-image:linear-gradient(90deg,#8619D5,#DE28C8,#FFD52A,#25C9EB) 1}
.gradient-card {background:radial-gradient(ellipse at 100% 0,rgba(37,201,235,.35),transparent 50%),linear-gradient(115deg,#5523A5,#801AB1 70%,#A31A9A);border-bottom:4px solid var(--wst-yellow)}
.gradient-card::before {background:rgba(37,201,235,.16)}
.gradient-card p {color:#F7EDFF}
.btn-primary,.btn-purple {background:linear-gradient(120deg,#6230C4,#921AAB);color:#FFF;box-shadow:0 4px 12px rgba(98,48,196,.2)}
.btn-primary:hover,.btn-purple:hover {background:linear-gradient(120deg,#5124AA,#7B158F);box-shadow:0 6px 18px rgba(98,48,196,.28)}
.btn-secondary {border-color:var(--border-color);color:var(--text-primary)}
.sidebar .btn-secondary {color:#FFF;border-color:rgba(255,255,255,.3)}
.notice {background:rgba(37,201,235,.09);border-left:3px solid var(--wst-primary-cyan)}
.notice.error {background:rgba(200,35,55,.1);border:1px solid #C82337;border-left-width:3px}
.metric-card {border-top:3px solid var(--wst-accent-purple)}
.metric-card:nth-child(2) {border-top-color:var(--wst-primary-cyan)}
.metric-card:nth-child(3) {border-top-color:var(--wst-yellow)}
.student-photo,.child-card .avatar {background:#6230C4}
.auth-wrap {background:radial-gradient(ellipse at 0 0,rgba(134,25,213,.18),transparent 48%),radial-gradient(ellipse at 100% 20%,rgba(37,201,235,.2),transparent 45%),radial-gradient(ellipse at 10% 100%,rgba(222,40,200,.14),transparent 40%),var(--bg-app)}
.auth-card .glass-card {border-top:4px solid var(--wst-yellow)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline-color:#6230C4}
[data-theme="dark"] button:focus-visible,[data-theme="dark"] a:focus-visible,[data-theme="dark"] input:focus-visible,[data-theme="dark"] select:focus-visible {outline-color:var(--wst-yellow)}
.sidebar .btn-secondary {background:rgba(255,255,255,.1);color:#FFF}
.sidebar .btn-secondary:hover {background:rgba(255,255,255,.18)}

.password-visibility {display:flex;align-items:center;gap:.6rem;margin:-.4rem 0 1rem;font-size:.9rem;color:var(--text-secondary);cursor:pointer}
.password-visibility input {width:18px;height:18px;accent-color:var(--wst-accent-purple)}
/* Use the supplied logo unchanged; frame its central artwork without the large white margins. */
.wst-hub-logo {display:block;position:relative;width:100%;aspect-ratio:4 / 1;overflow:hidden;background:#FFF;border-radius:10px;flex-shrink:0}
.wst-hub-logo img {position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:auto;max-width:none}
.auth-brand .wst-hub-logo {width:280px;max-width:100%;margin:0 auto 1rem}
.auth-brand h1 {font-size:1.25rem}
@media(min-width:769px) and (max-width:991px){.sidebar .wst-hub-logo {width:52px;margin-left:-15px;border-radius:4px}}
.plan-check {width:20px;height:20px;accent-color:var(--wst-accent-purple);cursor:pointer}
.plan-period {min-width:155px}
.plan-period:disabled {opacity:.5}
.month-paid {color:#18743F}
.month-pending {color:#915B00}
[data-theme="dark"] .month-paid {color:#7DE3A4}
[data-theme="dark"] .month-pending {color:#FFD176}
.monthly-grid {margin-top:1rem;max-height:560px}
.monthly-grid th,.monthly-grid td {min-width:112px;padding:.8rem;text-align:center;vertical-align:top}
.monthly-grid th:first-child {position:sticky;left:0;z-index:1;min-width:190px;max-width:260px;text-align:left;background:var(--bg-card);box-shadow:2px 0 4px rgba(0,0,0,.06)}
.monthly-grid thead th {position:sticky;top:0;background:var(--bg-card);z-index:2}
.monthly-grid thead th:first-child {z-index:3}
.monthly-grid small {display:block;margin-top:.4rem;font-size:.75rem;font-weight:400;color:var(--text-secondary)}
.monthly-grid .current-month {border-top:3px solid var(--wst-accent-purple)}
.month-state {display:inline-block;padding:.35rem .6rem;border-radius:8px;font-size:.8rem;white-space:nowrap}
.month-state.month-paid {background:rgba(34,197,94,.12)}
.month-state.month-pending {background:rgba(245,158,11,.12)}
.month-payment summary {cursor:pointer;list-style:none}
.month-payment summary::-webkit-details-marker {display:none}
.month-payment summary:focus-visible {outline:2px solid var(--wst-primary-cyan)}
.month-payment>div {padding-top:.6rem;font-size:.85rem}

.month-choice {font:inherit;border:2px solid transparent;cursor:pointer;min-width:106px;min-height:64px;white-space:normal}
.month-choice small {font-size:.72rem;color:inherit}
.month-choice:hover:not(:disabled) {border-color:var(--wst-accent-purple)}
.month-choice:focus-visible {outline:3px solid var(--wst-primary-cyan);outline-offset:2px}
.month-choice.is-selected {background:#6930c3;color:white;border-color:#6930c3}
.month-choice:disabled {cursor:default;opacity:.65}
.month-selection {position:sticky;bottom:12px;z-index:4;background:var(--bg-card);border:1px solid var(--wst-accent-purple);border-radius:16px;padding:1rem;margin-top:1rem;box-shadow:0 5px 20px #00000014}
.month-selection .cart-summary {margin:0;gap:1rem}
.month-actions {display:flex;gap:.5rem;flex-wrap:wrap}
.other-payments>summary {cursor:pointer;padding:1rem;font-weight:600}
.plan-teacher {display:block;margin:.3rem 0;color:var(--text-secondary);font-size:.82rem;font-weight:400;line-height:1.5}
.review-payments {padding-left:1.25rem;margin:1rem 0}
.review-payments li {margin:.7rem 0}
.institute-identity {display:flex;align-items:center;gap:.8rem;margin:.65rem 0;text-align:left;min-width:0}
.institute-identity>strong {overflow-wrap:anywhere;line-height:1.4}
.institute-logo {position:relative;display:grid;place-items:center;flex:0 0 60px;width:60px;height:60px;border-radius:12px;overflow:hidden;background:#eee6fb;color:#6930c3;font-weight:700}
.institute-logo-image {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:white;padding:3px;box-sizing:border-box}
.institute-logo-image[hidden] {display:none!important}
.child-card .institute-identity {justify-content:center}
.pwa-install {margin-top:1rem}
.pwa-install[hidden],.pwa-install p[hidden] {display:none!important}
.pwa-install .btn {width:100%}
.pwa-install p {margin-top:.6rem;font-size:.85rem}
@media(max-width:650px){.monthly-grid th:first-child{min-width:140px;max-width:160px}.month-selection{position:static}.month-actions{width:100%}.month-actions .btn{flex:1}.month-choice{min-width:94px}}

.language-picker{display:flex;gap:.35rem;align-items:center;font-size:.8rem}.language-picker select{min-width:105px;width:auto;padding:.4rem}.language-picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.auth-card>.language-picker{justify-content:flex-end;margin-bottom:1rem}.month-paid{text-decoration:none}.month-paid:hover{text-decoration:underline}html[lang="si"],html[lang="ta"]{line-height:1.7}@media(max-width:650px){.bar-right{gap:.4rem;flex-wrap:wrap}.top-bar{flex-wrap:wrap;gap:.5rem}.bar-left h2{font-size:1.2rem}}

@media(max-width:768px){
  html{scroll-padding-top:112px;scroll-padding-bottom:100px}
  body{font-size:16px;overflow-x:visible;line-height:1.5}
  .app-container{min-height:100dvh;width:100%}
  .main-content{height:auto;min-height:100dvh;overflow:visible;width:100%;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .content-body{padding:16px 12px;max-width:100%}
  .page-stack{gap:16px}
  .glass-card{padding:18px 16px;border-radius:18px;backdrop-filter:none;box-shadow:0 2px 10px #281e3908;overflow-wrap:anywhere}
  .glass-card:hover{transform:none}
  .glass-card h3{font-size:1.1rem;line-height:1.4;margin-bottom:12px}
  .top-bar{position:sticky;top:0;z-index:20;height:auto;min-height:64px;padding:8px 12px;background:var(--bg-card);gap:4px 8px;align-items:center}
  .bar-left{gap:6px;min-width:0;flex:1}
  .bar-left h2{font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
  .bar-right{gap:4px;flex-wrap:nowrap}
  .bar-right>a.icon-btn{display:none}
  .language-picker select{font-size:16px;min-width:94px;max-width:114px;min-height:44px;padding:6px}
  .mobile-menu-toggle,.icon-btn{min-width:44px;min-height:44px;display:grid;place-items:center;flex-shrink:0}
  .btn{min-height:46px;padding:11px 16px;font-size:.95rem;line-height:1.45;white-space:normal;text-align:center;max-width:100%;display:inline-flex;align-items:center;justify-content:center}
  .form-input,input,select,textarea{font-size:16px;max-width:100%;min-width:0}
  .form-input{min-height:48px}
  .field{margin-bottom:14px;min-width:0}
  .toolbar{gap:10px;align-items:stretch}
  .toolbar .field{width:100%;margin:0}
  .toolbar>.btn,.cart-summary>.btn,.month-actions>.btn{width:100%}
  .cart-summary{gap:12px;margin-top:16px;align-items:stretch}
  .cart-summary>*{max-width:100%;min-width:0}
  .cart-summary>a{padding:8px 0;text-decoration:underline}
  .dashboard-grid,.grid-container{grid-template-columns:minmax(0,1fr);gap:14px}
  .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dashboard-grid .metric-card{padding:12px 8px;border-radius:12px}
  .dashboard-grid .metric-value{font-size:1.15rem;overflow-wrap:anywhere}
  .dashboard-grid .metric-label{font-size:.72rem}
  .gradient-card{padding:20px 16px}
  .gradient-card h2{font-size:1.4rem;line-height:1.4}
  .student-photo{width:76px;height:76px}
  .institute-logo{flex-basis:44px;width:44px;height:44px;border-radius:10px}
  .institute-identity{gap:10px;font-size:.94rem}
  .notice{padding:12px;font-size:.94rem;line-height:1.6}
  .muted{font-size:.85rem;line-height:1.5}
  .empty{padding:20px 8px}
  .record-list{overflow:visible}
  .record-list table,.record-list tbody{display:block}
  .record-list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .record-list tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;border:1px solid var(--border-color);border-radius:14px;padding:12px;margin:12px 0;background:var(--bg-card)}
  .record-list td:first-child,.record-list td:has(.btn),.record-list td:has(.plan-period){grid-column:1/-1}
  .record-list td{display:block;padding:7px 0;border:0;min-width:0;overflow-wrap:anywhere}
  .record-list td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:3px}
  .record-list td .btn{width:100%;margin-top:4px}
  .record-list td a{display:inline-block;min-height:44px;padding:10px 0;text-decoration:underline}
  .payment-type-label,.payment-type-description{min-width:0}
  .monthly-grid{max-height:none;overflow:visible;margin-top:16px}
  .monthly-grid table,.monthly-grid tbody{display:block}
  .monthly-grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .monthly-grid tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid var(--border-color);border-radius:16px;padding:12px;margin-bottom:16px;background:var(--bg-card)}
  .monthly-grid tbody th:first-child{grid-column:1/-1;position:static;min-width:0;max-width:none;padding:0 0 8px;box-shadow:none;border:0;font-size:.96rem;line-height:1.5}
  .monthly-grid td{display:block;min-width:0;padding:0;border:0}
  .monthly-grid .month-choice,.monthly-grid .month-paid{width:100%;min-width:0;min-height:90px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:4px;font-size:.85rem}
  .phone-month{display:block;font-size:.9rem}
  .month-choice small{margin:0;font-size:.8rem}
  .month-choice:disabled{opacity:.8}
  .month-selection{position:static;padding:14px;border-radius:14px;box-shadow:none}
  .month-actions{width:100%;display:grid;gap:8px}
  .pager{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;font-size:.8rem}
  .pager .btn{font-size:.8rem;padding:10px 6px}
  .plan-check{width:26px;height:26px;margin:9px}
  .auth-wrap{padding:20px 12px;min-height:100dvh;align-items:start}
  .auth-brand{margin-bottom:20px}.auth-brand .wst-hub-logo{width:220px}
  .auth-card{max-width:440px}.auth-card h1{font-size:1.4rem}
  .phone-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--bg-card);border-top:1px solid var(--border-color);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -3px 14px #281e3908}
  .phone-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;min-height:56px;font-size:.7rem;line-height:1.35;text-align:center;border-radius:12px;color:var(--text-secondary);overflow-wrap:anywhere}
  .phone-nav a>span:first-child{font-size:1.15rem}
  .phone-nav [aria-current="page"]{background:var(--bg-app);color:var(--wst-primary-blue);font-weight:700}
  .sidebar.open{width:min(310px,88vw);height:100dvh;z-index:100;overflow-y:auto;padding:20px 16px;gap:12px}
  .sidebar.open .nav-menu{flex:none}.sidebar.open .sidebar-footer{margin-top:auto}
  .sidebar.open .nav-item a{min-height:48px;padding:12px}
  .sidebar.open .brand-section{margin-bottom:6px}
  .sidebar.open .wst-hub-logo{width:200px;max-width:100%}
  .sidebar.open .btn{width:100%}
  .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:90;background:#160c2b99}
  body.menu-open{overflow:hidden}
}
@media(max-width:359px){.top-bar .bar-left{flex-basis:100%}.bar-right{margin-left:auto}.glass-card{padding:14px 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Compact laptop records; phone controls retain their touch targets. */
@media(min-width:769px){
  .content-body{padding:20px 24px}
  .page-stack{gap:16px}
  .glass-card{padding:18px 20px;border-radius:16px}
  .glass-card h3{margin-bottom:12px;font-size:1.1rem}
  .toolbar{gap:12px;align-items:end}
  #filterForm .field{margin:0;gap:6px;min-width:150px}
  #filterForm .form-input{padding:10px 12px;min-height:44px;font-size:.94rem}
  #selectedInstitute{max-width:220px}
  #selectedInstitute .institute-identity{margin:0;min-height:44px;font-size:.9rem;gap:8px}
  #selectedInstitute .institute-logo{width:40px;height:40px;flex-basis:40px}
  .record-list th,.record-list td{padding:10px 12px;font-size:.9rem;line-height:1.45}
  .record-list th{font-size:.78rem}
  .record-list .btn,.pager .btn,#filterForm .btn{padding:9px 14px;font-size:.88rem;min-height:40px;line-height:1.4;white-space:nowrap}
  .pager{gap:12px;margin-top:12px;font-size:.9rem}
  .record-list td .plan-teacher{margin:2px 0}
  body[data-page="purchase-history"] .record-list td:nth-child(2){width:28%}
  body[data-page="purchase-history"] .record-list td:nth-child(5){white-space:nowrap}
}
@media(max-width:768px){
  .sidebar.open{overflow:hidden;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .sidebar.open .brand-section,.sidebar.open>.mobile-close,.sidebar.open .sidebar-footer{flex-shrink:0}
  .sidebar.open .nav-menu{flex:1;min-height:0;overflow-y:auto;margin:0}
  .sidebar.open .sidebar-footer{margin-top:0;padding-top:10px}
  .sidebar.open .sidebar-footer .btn span{display:inline}
  .sidebar.open .sidebar-footer .btn{min-height:48px;font-size:1rem}
  #filterForm .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #filterForm .toolbar>.field:first-child,#selectedInstitute{grid-column:1/-1}
  #filterForm .field{gap:5px;font-size:.9rem}
  #selectedInstitute .institute-identity{margin:0;font-size:.88rem;min-height:38px}
  #selectedInstitute .institute-logo{width:36px;height:36px;flex-basis:36px}
  #filterForm .toolbar>.btn{width:100%;padding:10px 8px}
  #filterForm .toolbar>button[type="submit"]:last-child:nth-of-type(1){grid-column:1/-1}
  #filterForm .form-input{width:100%;padding:10px 8px}
  .monthly-grid tbody th:first-child{padding-bottom:4px}
}