:root{color-scheme:light;font-family:Trebuchet MS,Gill Sans,Segoe UI,sans-serif;line-height:1.4;font-weight:400;background:radial-gradient(circle at 0% 0%,#e8ffef,#f4f7ff 55%,#faf8ff);color:#172133}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.app-shell{min-height:100vh;width:min(100%,480px);margin:0 auto;padding:14px 12px 20px;display:flex;flex-direction:column;gap:12px}.panel{border:1px solid #d6def7;border-radius:18px;background:#ffffffe0;box-shadow:0 18px 38px -30px #0f1e4673;padding:14px}.header-panel{display:grid;gap:8px}.header-title{margin:0;font-size:1.05rem;letter-spacing:.02em}.header-subtitle{margin:0;color:#44506a;font-size:.86rem}.badge-row{display:flex;flex-wrap:wrap;gap:8px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:.75rem;font-weight:700;border:1px solid #cfd8f4;background:#f3f6ff}.badge.role-teacher{background:#fff7ec;border-color:#ffcf9a}.badge.role-student{background:#ecfff3;border-color:#9ee0b4}.nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.nav button{border:1px solid #ced8f2;border-radius:12px;padding:8px 10px;background:#f6f8ff;color:#1e2b47;font-weight:700;font-size:.8rem;white-space:nowrap}.nav button.active{background:linear-gradient(135deg,#3046cf,#4f3fd4);color:#fff;border-color:#3046cf}.content-title{margin:0 0 8px;font-size:.98rem}.hint{margin:0;color:#4f5f80;font-size:.84rem}.list{margin:10px 0 0;padding-left:16px;display:grid;gap:6px}.loader{display:grid;place-items:center;gap:10px;min-height:160px}.loader-dot{width:34px;height:34px;border-radius:50%;border:3px solid #cfddff;border-top-color:#3e5ce0;animation:spin .9s linear infinite}.alert{border:1px solid #f3c6c6;background:#fff5f5;color:#702727;border-radius:12px;padding:10px;font-size:.86rem}.matrix-controls{display:grid;grid-template-columns:56px 1fr auto;gap:8px;align-items:center;margin-bottom:8px}.matrix-controls label{font-size:.8rem;color:#384966;font-weight:700}.matrix-controls input{border:1px solid #cfd8f4;border-radius:10px;padding:7px 10px;background:#fff;color:#172133;min-width:0}.matrix-controls button,.matrix-flow-list button{border:1px solid #ced8f2;border-radius:10px;padding:7px 10px;background:#f6f8ff;color:#1e2b47;font-weight:700;font-size:.78rem}.matrix-flow-list{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px}.matrix-flow-list button.active{background:linear-gradient(135deg,#3046cf,#4f3fd4);color:#fff;border-color:#3046cf}.matrix-scroll{margin-top:8px;overflow-x:auto}.matrix-table{width:100%;border-collapse:collapse;min-width:420px;font-size:.78rem}.matrix-table th,.matrix-table td{border:1px solid #d8dff5;padding:6px;text-align:center;background:#fff}.matrix-table thead th{background:#eef2ff;font-weight:700}.matrix-table tbody th{text-align:left;min-width:170px}.matrix-student-name,.matrix-student-phone{display:block}.matrix-student-name{font-weight:700}.matrix-student-phone{color:#506286;font-size:.72rem}.matrix-mark.has-makeup{color:#8a2b1d;font-weight:700}.makeup-requests-list{display:grid;gap:12px;margin-top:12px}.makeup-request-card{border:1px solid #d6def7;border-radius:14px;background:#fffffff2;padding:12px 14px;box-shadow:0 2px 8px #0f1e4614;transition:box-shadow .2s ease}.makeup-request-card:hover{box-shadow:0 4px 14px #0f1e4626}.student-name{font-weight:700;font-size:.95rem;color:#172133;margin-bottom:6px}.lesson-date{color:#506286;font-size:.82rem;margin-bottom:8px}.reason{color:#6b7a99;font-size:.84rem;font-style:italic;line-height:1.4}.status-badge{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;background:#f3f6ff;border:1px solid #cfd8f4}.action-button{border:1px solid #ced8f2;border-radius:10px;padding:7px 12px;background:#fff;color:#1e2b47;font-weight:700;font-size:.8rem;cursor:pointer}.schedule-section{display:grid;gap:10px}.schedule-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}.schedule-card{border:1px solid #d6def7;border-radius:14px;background:#fffffff0;box-shadow:0 2px 10px #0f1e4614;padding:12px;display:grid;gap:10px}.schedule-card-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.schedule-date,.schedule-time{margin:0}.schedule-date{font-weight:700;color:#172133;text-transform:capitalize;font-size:.88rem}.schedule-time{font-weight:700;color:#2f4bcf;font-size:.84rem}.schedule-meta{margin:0;display:grid;gap:8px}.schedule-meta div{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:start}.schedule-meta dt{margin:0;font-size:.76rem;font-weight:700;color:#4f5f80}.schedule-meta dd{margin:0;font-size:.83rem;color:#172133}.schedule-attendance{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;border:1px solid #cfd8f4;background:#f3f6ff;font-size:.74rem;font-weight:700}.schedule-attendance.is-known{color:#1d3f7f}.schedule-attendance.is-unknown{color:#5a6c92}.schedule-attendance-button{font-family:inherit;line-height:1.2;cursor:default}.schedule-attendance-button:disabled{opacity:1}.schedule-attendance-button.is-actionable{cursor:pointer;border-color:#7f9af0;background:#e9efff}.schedule-attendance-button.is-actionable:hover{background:#dde7ff}.empty-state{display:grid;place-items:center;gap:12px;padding:40px 20px;text-align:center}.empty-state-icon{font-size:3rem;opacity:.6}.empty-state-text{margin:0;color:#506286;font-size:.88rem;font-weight:500}.makeup-booking-layout{display:grid;gap:14px;margin-top:10px}.booking-section-title{margin:0 0 8px;font-size:.84rem;letter-spacing:.01em;color:#2b3450}.booking-request-list,.booking-slot-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}.booking-request-button,.booking-slot-button{width:100%;text-align:left;border:1px solid #cad4f5;border-radius:12px;background:linear-gradient(180deg,#fff,#f8faff);padding:10px;display:grid;gap:4px;color:#172133;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.booking-request-button:hover{transform:translateY(-1px);box-shadow:0 6px 14px #1d347514}.booking-request-button.is-active,.booking-slot-button.is-selected{border-color:#334dd6;box-shadow:0 0 0 2px #334dd624;background:linear-gradient(180deg,#f8faff,#edf2ff)}.booking-request-title,.booking-slot-time{font-weight:700;font-size:.83rem}.booking-request-meta,.booking-request-status,.booking-slot-meta{margin:0;font-size:.76rem;color:#4a5a80}.booking-active-banner{display:grid;gap:4px;margin:0 0 8px;padding:10px 12px;border-radius:12px;border:1px solid #d6dcfa;background:linear-gradient(135deg,#334dd617,#7b54d614)}.booking-active-banner strong{font-size:.82rem;color:#1d2f66}.booking-active-banner span{font-size:.74rem;color:#3f517f}.booking-controls-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}.booking-slot-card{border:1px solid #d2dbfa;border-radius:12px;padding:10px;background:#fff;display:grid;gap:8px}.booking-slot-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.booking-slot-flow-badge{padding:3px 8px;border-radius:999px;border:1px solid #c8d3fb;background:#f2f6ff;color:#3552b4;font-size:.7rem;font-weight:700;white-space:nowrap}.booking-confirm-panel{display:grid;gap:8px;margin-top:10px}.booking-quick-action{border:1px solid #3046cf;border-radius:10px;padding:9px 12px;background:linear-gradient(135deg,#3046cf,#4f3fd4);color:#fff;font-weight:700;font-size:.78rem}.booking-quick-action:disabled{opacity:.65;cursor:not-allowed}.booking-primary-button{border:1px solid #3046cf;border-radius:12px;padding:10px 12px;background:linear-gradient(135deg,#3046cf,#4f3fd4);color:#fff;font-weight:700;font-size:.82rem}.booking-primary-button:disabled,.action-button:disabled{opacity:.6;cursor:not-allowed}.booking-success{border:1px solid #9ee0b4;background:#ecfff3;color:#1f5a33;border-radius:12px;padding:10px;font-size:.84rem}.booking-history-section{margin-top:14px;display:grid;gap:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}