*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#134e4a;-webkit-font-smoothing:antialiased;background:#f0fdfa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.6}.container{max-width:600px;margin:0 auto;padding:0 16px 32px}.header{text-align:center;background:linear-gradient(135deg,#0d9488 0%,#0f766e 100%);margin:0 -16px 16px;padding:24px 20px 20px}.header h1{color:#fff;font-size:20px;font-weight:700}.header p{color:#fffc;margin-top:4px;font-size:13px}.card{background:#fff;border-radius:16px;margin-bottom:14px;padding:18px 16px;box-shadow:0 2px 8px #0d948814}.card-title{color:#0f766e;margin-bottom:12px;font-size:15px;font-weight:700}.grade-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.grade-btn{color:#134e4a;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #e2e8f0;border-radius:12px;justify-content:center;align-items:center;gap:6px;height:46px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.grade-btn:active{transform:scale(.96)}.grade-btn.selected{color:#0d9488;background:#f0fdfa;border-color:#0d9488;flex-direction:column;gap:4px;height:auto;min-height:46px;padding:6px 0}.grade-stepper{align-items:center;gap:10px;display:flex}.step-btn{color:#0d9488;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid #5eead4;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:16px;line-height:1;display:flex}.step-btn:active{transform:scale(.9)}.step-count{text-align:center;color:#0d9488;min-width:16px;font-size:14px;font-weight:700}.step-panel{display:none}.step-panel.active{display:block}.kid-tabs{-webkit-overflow-scrolling:touch;gap:8px;margin-bottom:14px;display:flex;overflow-x:auto}.kid-tabs::-webkit-scrollbar{display:none}.kid-tab{color:#94a3b8;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #e2e8f0;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.kid-tab:active{transform:scale(.96)}.kid-tab.active{color:#0d9488;background:#f0fdfa;border-color:#0d9488}.kid-tab .num{color:#94a3b8;background:#e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;transition:all .2s;display:inline-flex}.kid-tab.active .num{color:#fff;background:#0d9488}.kid-tab .check{stroke:#0d9488;stroke-width:3px;fill:none;width:14px;height:14px;display:none}.kid-tab.has-selected .check{display:inline}.kid-panel{display:none}.kid-panel.active{display:block}.course-list{flex-direction:column;gap:8px;display:flex}.course-option{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:2px solid #e2e8f0;border-radius:12px;align-items:center;gap:10px;padding:12px 14px;transition:all .2s;display:flex}.course-option:active{transform:scale(.98)}.course-option.selected{background:#f0fdfa;border-color:#0d9488}.course-check{border:2px solid #cbd5e1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.course-option.selected .course-check{background:#0d9488;border-color:#0d9488}.course-check svg{stroke:#fff;stroke-width:3px;fill:none;opacity:0;width:11px;height:11px;transition:opacity .2s}.course-option.selected .course-check svg{opacity:1}.course-option .name{color:#134e4a;flex:1;font-size:14px;font-weight:600}.course-option .meta{color:#64748b;text-align:right;font-size:11px}.course-option .meta .price{color:#f97316;font-size:14px;font-weight:700;display:block}.summary-bar{background:linear-gradient(135deg,#f0fdfa 0%,#ccfbf1 100%);border:2px solid #99f6e4;border-radius:12px;justify-content:space-between;align-items:center;margin-top:14px;padding:14px 16px;display:flex}.summary-bar .count{color:#0f766e;font-size:13px}.summary-bar .total{color:#f97316;font-size:22px;font-weight:700}.discount-banner{color:#9a3412;background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%);border:1px solid #fed7aa;border-radius:10px;align-items:center;gap:8px;margin-top:10px;padding:10px 14px;font-size:13px;display:flex}.discount-banner svg{stroke:#f97316;stroke-width:2px;fill:none;flex-shrink:0;width:18px;height:18px}.phone-section{text-align:center;padding:8px 0}.phone-section p{color:#64748b;margin-bottom:12px;font-size:13px}.phone-input-wrap{gap:10px;max-width:340px;margin:0 auto;display:flex}.phone-input-wrap input{color:#134e4a;text-align:center;letter-spacing:2px;background:#f0fdfa;border:2px solid #ccfbf1;border-radius:12px;outline:none;flex:1;height:48px;padding:0 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.phone-input-wrap input:focus{border-color:#0d9488;box-shadow:0 0 0 3px #0d948826}.phone-input-wrap input.error{background:#fff5f5;border-color:#e53e3e}.error-text{color:#e53e3e;margin-top:6px;font-size:12px;display:none}.error-text.visible{display:block}.btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:14px;width:100%;height:50px;font-size:16px;font-weight:700;transition:transform .15s,box-shadow .2s;display:block}.btn:active{transform:scale(.97)}.btn-orange{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);box-shadow:0 4px 14px #f9731659}.btn-primary{background:linear-gradient(135deg,#0d9488 0%,#0f766e 100%);box-shadow:0 4px 14px #0d94884d}.btn-mt{margin-top:16px}.qrcode-area{text-align:center;padding:6px 0}.qrcode-placeholder{background:#f0fdfa;border:2px dashed #99f6e4;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:160px;height:160px;margin:0 auto 10px;display:flex}.qrcode-placeholder svg{stroke:#0d9488;stroke-width:1.5px;fill:none;width:42px;height:42px}.qrcode-placeholder .hint{color:#0d9488;font-size:13px;font-weight:600}.qrcode-label{color:#134e4a;font-size:14px;font-weight:600}.qrcode-sub{color:#64748b;margin-top:4px;font-size:12px}.toast-overlay{z-index:100;background:#00000059;justify-content:center;align-items:center;padding:24px;display:none;position:fixed;inset:0}.toast-overlay.visible{display:flex}.toast-box{text-align:center;background:#fff;border-radius:20px;width:100%;max-width:320px;padding:32px 24px 24px;animation:.25s ease-out toastIn}@keyframes toastIn{0%{opacity:0;transform:scale(.9)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.toast-icon{background:#f0fdfa;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto 14px;display:flex}.toast-icon svg{stroke:#0d9488;stroke-width:2.5px;fill:none;width:28px;height:28px}.toast-title{color:#134e4a;margin-bottom:6px;font-size:17px;font-weight:700}.toast-desc{color:#64748b;margin-bottom:20px;font-size:14px}.btn-toast{color:#fff;cursor:pointer;background:#0d9488;border:none;border-radius:10px;padding:10px 32px;font-size:15px;font-weight:600;display:inline-block}.loading-state{text-align:center;padding:60px 20px}.loading-spinner{border:4px solid #e2e8f0;border-top-color:#0d9488;border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{color:#64748b;font-size:14px}.error-state{text-align:center;padding:60px 20px}.error-icon{margin-bottom:16px}.error-msg{color:#e53e3e;margin-bottom:20px;font-size:14px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:disabled:active{transform:none}.btn-tutoring{color:#0d9488;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:2px solid #0d9488;border-radius:14px;width:100%;height:50px;margin-top:12px;font-size:16px;font-weight:700;transition:transform .15s,box-shadow .2s;display:block}.btn-tutoring:active{transform:scale(.97)}.fixed-back{z-index:90;-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffff26;border:1.5px solid #ffffff59;border-radius:20px;align-items:center;gap:4px;padding:7px 14px;font-size:13px;font-weight:500;transition:background .2s,border-color .2s;display:flex;position:fixed;top:12px;right:12px}.fixed-back:active{background:#ffffff40;border-color:#ffffff8c}.tutoring-level-option{cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #e2e8f0;border-radius:12px;align-items:center;gap:10px;padding:14px 16px;transition:all .2s;display:flex}.tutoring-level-option:active{border-color:#0d9488;transform:scale(.98)}.tutoring-level-option.selected{background:#f0fdfa;border-color:#0d9488}.tutoring-level-option .name{color:#134e4a;flex:1;font-size:14px;font-weight:600}.tutoring-level-option .price{color:#f97316;font-size:16px;font-weight:700}.tutoring-level-option .price-unit{color:#94a3b8;margin-left:2px;font-size:11px;font-weight:400}.tutoring-level-option .course-check{flex-shrink:0}.tutoring-level-option.selected .course-check{background:#0d9488;border-color:#0d9488}.tutoring-level-option.selected .course-check svg{opacity:1}.tutoring-summary{color:#0f766e;text-align:center;background:#f0fdfa;border-radius:10px;margin-bottom:14px;padding:10px 14px;font-size:13px}@media (width>=600px){.container{padding:0 24px 40px}.header{border-radius:0 0 24px 24px;margin:0 -24px 20px;padding:32px 24px 24px}.grade-grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
