@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap";:root{color-scheme:light;--ms-navy: #04162f;--ms-navy-2: #1a2b45;--ms-navy-3: #263956;--ms-gold: #ff9800;--ms-gold-soft: #fff1d8;--ms-red: #ff181f;--ms-green: #1f8a4c;--ms-bg: #fbf8ff;--ms-bg-2: #eef2fb;--ms-card: rgba(255, 255, 255, .94);--ms-card-solid: #ffffff;--ms-soft: #f4f2ff;--ms-line: #dfe2ed;--ms-line-strong: #c7ccda;--ms-ink: #191b28;--ms-muted: #5f6472;--ms-faint: #8a90a1;--ms-shadow: 0 16px 38px rgba(4, 22, 47, .1);--ms-shadow-strong: 0 24px 54px rgba(4, 22, 47, .22);--ms-radius-sm: 12px;--ms-radius: 18px;--ms-radius-lg: 24px;--ms-font-display: "Montserrat", "Segoe UI", sans-serif;--ms-font-body: "Work Sans", "Segoe UI", sans-serif;font-family:var(--ms-font-body);line-height:1.42;font-weight:400;background:var(--ms-bg);color:var(--ms-ink)}*{box-sizing:border-box}html{background:var(--ms-bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% -5%,rgba(255,152,0,.24),transparent 30%),radial-gradient(circle at 100% 8%,rgba(26,43,69,.14),transparent 24%),linear-gradient(180deg,var(--ms-bg),var(--ms-bg-2) 100%);color:var(--ms-ink)}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}#root{min-height:100vh}.app-shell{min-height:100vh;width:min(100%,460px);margin:0 auto;padding:14px 14px 98px;display:flex;flex-direction:column;gap:14px}.screen-content{display:grid;gap:14px}.panel,.header-panel,.card-surface{border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);background:var(--ms-card);box-shadow:var(--ms-shadow);padding:16px}.header-panel{overflow:hidden;position:relative;display:grid;gap:14px;color:#fff;border-color:#ffffff1f;background:radial-gradient(circle at 92% 0%,rgba(255,152,0,.38),transparent 34%),linear-gradient(135deg,var(--ms-navy),var(--ms-navy-2));box-shadow:var(--ms-shadow-strong)}.header-panel:after{content:"";position:absolute;inset:auto -34px -52px auto;width:145px;height:145px;border-radius:999px;border:24px solid rgba(255,255,255,.06);pointer-events:none}.brand-row{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.brand-kicker{margin:0 0 6px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ms-gold);font-weight:800}.header-title,.content-title,h1,h2,h3{font-family:var(--ms-font-display)}.header-title{margin:0;font-size:clamp(1.35rem,6vw,1.7rem);line-height:1.1;letter-spacing:-.03em}.header-subtitle{margin:8px 0 0;color:#fffc;font-size:.86rem}.header-avatar{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--ms-font-display);font-weight:800;box-shadow:inset 0 1px #ffffff29}.header-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.header-role-switch{display:grid;grid-template-columns:auto minmax(120px,1fr);align-items:center;gap:8px;max-width:250px}.header-role-switch label{font-size:.72rem;color:#ffffffc7;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.header-role-switch select,.teacher-student-fields select,.teacher-attendance-fields select,.matrix-controls input{border:1px solid var(--ms-line);border-radius:12px;padding:9px 11px;background:#fff;color:var(--ms-ink);min-width:0;outline:none}.header-role-switch select{border-color:#ffffff3d;background:#ffffff1f;color:#fff}.header-role-switch option{color:var(--ms-ink)}.badge-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}.badge,.status-badge,.schedule-attendance,.booking-slot-flow-badge{display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:800;border:1px solid rgba(26,43,69,.1);background:var(--ms-soft);color:var(--ms-navy-2)}.header-panel .badge{border-color:#ffffff29;background:#ffffff1a;color:#ffffffdb}.badge.role-teacher,.badge.role-student{border-color:#ff980057;background:#ff98002e;color:#fff}.bottom-nav{position:fixed;left:50%;bottom:12px;z-index:30;transform:translate(-50%);width:min(432px,calc(100vw - 24px));display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:#04162ff5;box-shadow:0 20px 44px #04162f57;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.bottom-nav button{min-height:54px;border:0;border-radius:17px;padding:7px 4px;display:grid;place-items:center;gap:2px;background:transparent;color:#ffffffad;font-weight:800;font-size:.69rem;cursor:pointer}.bottom-nav button.active{background:var(--ms-gold);color:var(--ms-navy);box-shadow:0 8px 22px #ff98004d}.nav-icon{font-size:1rem;line-height:1}.content-title{margin:0;font-size:1.16rem;line-height:1.2;color:var(--ms-navy);letter-spacing:-.02em}.hint{margin:0;color:var(--ms-muted);font-size:.86rem}.list{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--ms-muted)}.loader{display:grid;place-items:center;gap:10px;min-height:160px;text-align:center}.loader-dot{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,152,0,.22);border-top-color:var(--ms-gold);animation:spin .9s linear infinite}.alert,.booking-success{border:1px solid rgba(255,24,31,.22);background:#fff7f7;color:#8b1e25;border-radius:16px;padding:12px;font-size:.86rem}.booking-success{border-color:#1f8a4c47;background:#effcf4;color:#1f6b3a}.empty-state{display:grid;place-items:center;gap:12px;padding:34px 20px;text-align:center;border:1px dashed var(--ms-line-strong);border-radius:var(--ms-radius-lg);background:#ffffffa3}.empty-state-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:var(--ms-gold-soft);color:var(--ms-navy);font-size:1.9rem}.empty-state-text{margin:0;color:var(--ms-muted);font-size:.9rem;font-weight:600}.action-button,.header-install-btn,.booking-quick-action,.booking-primary-button,.matrix-controls button,.matrix-flow-list button{border:1px solid rgba(4,22,47,.12);border-radius:13px;padding:9px 12px;background:#fff;color:var(--ms-navy-2);font-weight:800;font-size:.8rem;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.header-install-btn,.booking-quick-action,.booking-primary-button{border-color:#ff980073;background:var(--ms-gold);color:var(--ms-navy);box-shadow:0 10px 24px #ff980038}.action-button:hover,.booking-quick-action:hover,.booking-primary-button:hover,.matrix-controls button:hover,.matrix-flow-list button:hover{transform:translateY(-1px)}.booking-primary-button:disabled,.booking-quick-action:disabled,.action-button:disabled{opacity:.58;cursor:not-allowed;transform:none}.schedule-section,.makeup-booking-layout,.booking-history-section,.makeup-requests-list{display:grid;gap:12px}.schedule-list,.booking-request-list,.booking-slot-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}.schedule-card,.booking-slot-card,.makeup-request-card{position:relative;overflow:hidden;border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);background:var(--ms-card-solid);box-shadow:var(--ms-shadow);padding:15px;display:grid;gap:12px}.schedule-card:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 999px 999px 0;background:var(--ms-navy-2)}.schedule-card--upcoming:before{background:var(--ms-gold)}.schedule-card--past:before{background:#9aa3b5}.schedule-card--missed:before{background:var(--ms-red)}.schedule-card--makeup:before{background:var(--ms-green)}.schedule-card--missed{background:linear-gradient(180deg,#fff,#fff8f8)}.schedule-card--makeup{background:linear-gradient(180deg,#fff,#f5fff8)}.schedule-card-header,.booking-slot-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.schedule-date,.schedule-time{margin:0;font-weight:800}.schedule-date{color:var(--ms-navy);text-transform:capitalize;font-size:.95rem}.schedule-time{color:var(--ms-gold);font-family:var(--ms-font-display);font-size:1rem}.schedule-meta{margin:0;display:grid;gap:9px}.schedule-meta div{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:start}.schedule-meta dt{margin:0;font-size:.7rem;font-weight:800;color:var(--ms-faint);text-transform:uppercase;letter-spacing:.06em}.schedule-meta dd{margin:0;font-size:.9rem;color:var(--ms-ink);font-weight:600}.schedule-attendance-button{cursor:default}.schedule-attendance-button:disabled{opacity:1}.schedule-attendance-button.is-actionable{cursor:pointer;border-color:#ff980075;background:var(--ms-gold);color:var(--ms-navy)}.group-table-scroll,.matrix-scroll{overflow-x:auto;border-radius:var(--ms-radius-lg)}.group-table,.matrix-table{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:360px;font-size:.84rem}.matrix-table{min-width:430px}.group-table th,.matrix-table th{padding:0 10px 4px;text-align:left;color:var(--ms-faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.group-table td,.matrix-table td,.matrix-table tbody th{border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line);padding:12px 10px;background:#fff}.group-table td:first-child,.matrix-table tbody th{border-left:1px solid var(--ms-line);border-radius:16px 0 0 16px}.group-table td:last-child,.matrix-table td:last-child{border-right:1px solid var(--ms-line);border-radius:0 16px 16px 0}.group-row-clickable{cursor:pointer}.group-row-clickable:hover td,.group-row-clickable:focus td{background:var(--ms-soft)}.group-row-disabled td{color:var(--ms-faint)}.group-phone-link{color:var(--ms-navy-2);font-weight:800}.group-phone-missing,.matrix-student-phone{color:var(--ms-faint);font-size:.75rem}.matrix-student-name{display:block;font-weight:800;color:var(--ms-navy)}.matrix-mark{display:inline-grid;place-items:center;min-width:28px;min-height:28px;border-radius:10px;background:var(--ms-soft);font-weight:900}.matrix-mark.has-makeup{color:#7a3b00;background:var(--ms-gold-soft)}.matrix-controls,.teacher-student-fields,.teacher-attendance-fields{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.teacher-student-fields,.teacher-attendance-fields{grid-template-columns:78px 1fr}.matrix-controls label,.teacher-student-fields label,.teacher-attendance-fields label{font-size:.72rem;color:var(--ms-faint);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.matrix-flow-list,.booking-controls-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.matrix-flow-list button.active,.booking-request-button.is-active,.booking-slot-button.is-selected{border-color:#ff980075;background:var(--ms-gold-soft);box-shadow:0 0 0 2px #ff98001f}.teacher-student-profile,.teacher-attendance-controls{margin-top:0}.booking-section-title{margin:0 0 8px;font-family:var(--ms-font-display);font-size:.96rem;color:var(--ms-navy)}.booking-request-button,.booking-slot-button{width:100%;text-align:left;border:1px solid var(--ms-line);border-radius:var(--ms-radius);background:#fff;padding:13px;display:grid;gap:5px;color:var(--ms-ink);cursor:pointer}.booking-request-title,.booking-slot-time,.student-name{font-family:var(--ms-font-display);font-weight:800;font-size:.92rem;color:var(--ms-navy)}.booking-request-meta,.booking-request-status,.booking-slot-meta,.lesson-date,.reason{margin:0;font-size:.8rem;color:var(--ms-muted)}.booking-request-status{color:var(--ms-navy-2);font-weight:800}.booking-active-banner{display:grid;gap:5px;padding:13px;border-radius:var(--ms-radius);border:1px solid rgba(255,152,0,.26);background:var(--ms-gold-soft)}.booking-active-banner strong{font-size:.9rem;color:var(--ms-navy)}.booking-active-banner span{font-size:.8rem;color:var(--ms-muted)}.booking-slot-flow-badge{background:var(--ms-soft);white-space:nowrap}.teacher-makeup-actions{display:flex;gap:8px;flex-wrap:wrap}.dashboard-hero,.summary-grid,.teacher-task-list,.message-list{display:grid;gap:12px}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.summary-card{border-radius:var(--ms-radius);background:var(--ms-navy);color:#fff;padding:13px;min-height:86px;display:grid;align-content:space-between}.summary-card strong{display:block;color:var(--ms-gold);font-family:var(--ms-font-display);font-size:1.45rem;line-height:1}.summary-card span{font-size:.72rem;font-weight:800;color:#ffffffc7}.vp-hero{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:18px;border-radius:var(--ms-radius-lg);color:#fff;background:radial-gradient(circle at 100% 0%,rgba(255,152,0,.36),transparent 36%),linear-gradient(135deg,var(--ms-navy),var(--ms-navy-3));box-shadow:var(--ms-shadow-strong)}.vp-avatar{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);color:var(--ms-gold);font-family:var(--ms-font-display);font-weight:900}.vp-hero-main h2{margin:0;font-family:var(--ms-font-display);font-size:1.25rem}.vp-chip-row,.vp-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.vp-chip-row{justify-content:flex-start;margin-top:8px}.vp-balance-pill,.vp-level-badge,.vp-mini-pill,.vp-delta{display:inline-flex;align-items:center;width:fit-content;border-radius:999px;padding:5px 10px;font-size:.74rem;font-weight:900}.vp-balance-pill,.vp-delta.is-positive{background:var(--ms-gold);color:var(--ms-navy)}.vp-level-badge,.vp-mini-pill{background:var(--ms-gold-soft);color:var(--ms-navy-2);border:1px solid rgba(255,152,0,.22)}.vp-delta.is-negative{background:#fff0f0;color:#9f1d25}.vp-progress-card{display:grid;gap:12px}.vp-progress-track{overflow:hidden;height:10px;border-radius:999px;background:#edf0f7}.vp-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ms-gold),#ffc266)}.club-list,.vp-mini-list,.vp-transaction-list{display:grid;gap:10px}.club-row{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;padding:12px;border-radius:var(--ms-radius);background:var(--ms-soft);color:var(--ms-navy)}.club-row span,.vp-tx-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:12px;background:#fff;color:var(--ms-gold);font-weight:900}.club-row.is-joined span{color:var(--ms-green)}.vp-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.referral-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.vp-transaction-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ms-line)}.vp-transaction-row:last-child{border-bottom:0}.vp-transaction-row strong{display:block;color:var(--ms-navy);font-size:.88rem}.vp-tx-icon{background:var(--ms-soft)}.vp-impact-card{border-color:#ff980052;background:linear-gradient(180deg,#fff,var(--ms-gold-soft))}.vp-stats-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.vp-stat-chip{border-radius:var(--ms-radius);padding:10px;background:var(--ms-soft);text-align:center}.vp-stat-chip strong{display:block;color:var(--ms-navy);font-family:var(--ms-font-display);font-size:1rem}.vp-stat-chip span{color:var(--ms-muted);font-size:.72rem;font-weight:800}.alert-text{margin:0 0 10px}.action-row{display:flex;gap:8px;flex-wrap:wrap}.status-note{margin-top:8px;margin-bottom:0}.modal-backdrop{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:#0c121f8c}.modal-card{width:min(520px,100%)}.compact-title{margin:0 0 10px}.compact-list{margin:0 0 12px;padding-left:18px}.flush-top{margin-top:0}.spaced-bottom{margin-bottom:10px}.success-panel{color:#1f5d2f}.teacher-student-fields.is-spaced{margin-bottom:10px}.message-line{margin-bottom:6px}.message-status-line{margin:0}.retry-button-danger{border-color:#d08080;color:#702727}@media(max-width:380px){.app-shell{padding-inline:10px}.summary-grid,.vp-grid-two,.referral-card{grid-template-columns:1fr}.bottom-nav button{font-size:.58rem}.matrix-controls{grid-template-columns:1fr}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}