@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap";#app{max-width:480px;margin:0 auto;min-height:100vh;background:#f5f5f5;position:relative}:root{--line-green: #06C755;--line-green-dark: #05A847;--line-green-light: #e6f9ee;--text-primary: #111;--text-secondary: #666;--border: #e0e0e0;--bg: #f5f5f5;--white: #fff;--danger: #e53935;--danger-light: #ffeaea;--warning: #F5A623;--warning-light: #fff8e1;--info: #1A73E8;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 24px;--shadow-sm: 0 1px 4px rgba(0,0,0,.08);--shadow-md: 0 4px 16px rgba(0,0,0,.1);--shadow-lg: 0 8px 32px rgba(0,0,0,.13);--transition: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:hidden}body{font-family:Sarabun,sans-serif;font-size:16px;color:var(--text-primary);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}button{font-family:Sarabun,sans-serif;cursor:pointer;border:none;background:none;font-size:16px}input,select,textarea{font-family:Sarabun,sans-serif;font-size:16px}.page{min-height:100vh;overflow-y:auto;background:var(--bg);display:flex;flex-direction:column}.step-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px}.step-header__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bg);flex-shrink:0;font-size:18px;color:var(--text-primary);transition:background var(--transition)}.step-header__back:active{background:var(--border)}.step-header__content{flex:1;min-width:0}.step-header__title{font-size:17px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-header__subtitle{font-size:12px;color:var(--text-secondary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-header__step{font-size:13px;color:var(--text-secondary);flex-shrink:0;background:var(--bg);padding:4px 10px;border-radius:12px;font-weight:500}.card{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;background:var(--line-green);color:var(--white);border-radius:var(--radius-full);font-size:16px;font-weight:600;border:none;cursor:pointer;transition:background var(--transition),transform .1s;-webkit-tap-highlight-color:transparent}.btn-primary:active{background:var(--line-green-dark);transform:scale(.98)}.btn-primary:disabled{background:#b2dfdb;cursor:not-allowed;transform:none}.btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 24px;background:transparent;color:var(--line-green);border-radius:var(--radius-full);font-size:16px;font-weight:600;border:2px solid var(--line-green);cursor:pointer;transition:background var(--transition);-webkit-tap-highlight-color:transparent}.btn-outline:active{background:var(--line-green-light)}.btn-outline:disabled{border-color:var(--border);color:var(--text-secondary);cursor:not-allowed}.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap}.badge--green{background:var(--line-green-light);color:var(--line-green-dark)}.badge--gray{background:#f0f0f0;color:var(--text-secondary)}.badge--red{background:var(--danger-light);color:var(--danger)}.badge--yellow{background:var(--warning-light);color:#b36a00}.badge--orange{background:#fff3e0;color:#e65100}.badge--blue{background:#e8f0fe;color:var(--info)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--line-green);border-radius:50%;animation:spin .8s linear infinite}.loading-spinner--sm{width:20px;height:20px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.loading-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 16px;color:var(--text-secondary);font-size:14px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;gap:12px;text-align:center}.empty-state__icon{font-size:48px;opacity:.5}.empty-state__title{font-size:17px;font-weight:600;color:var(--text-primary)}.empty-state__text{font-size:14px;color:var(--text-secondary);line-height:1.6}.booking-code{font-family:Courier New,Courier,monospace;font-size:26px;font-weight:700;color:var(--text-primary);letter-spacing:2px;text-align:center}.slide-left-enter-active,.slide-left-leave-active{transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s}.slide-left-enter-from{transform:translate(100%);opacity:0}.slide-left-leave-to{transform:translate(-30%);opacity:0}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;border-radius:6px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:14px;font-weight:600;color:var(--text-primary)}.form-label .required{color:var(--danger);margin-left:2px}.form-input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:16px;color:var(--text-primary);background:var(--white);transition:border-color var(--transition);-webkit-appearance:none}.form-input:focus{outline:none;border-color:var(--line-green)}.form-input--error{border-color:var(--danger)}.form-input:disabled{background:#f5f5f5;color:var(--text-secondary)}.form-error{font-size:12px;color:var(--danger)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#000c;color:var(--white);padding:10px 20px;border-radius:24px;font-size:14px;z-index:9999;white-space:nowrap;animation:toast-in .3s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s}.modal-sheet{background:var(--white);border-radius:20px 20px 0 0;padding:24px 20px 32px;width:100%;max-width:480px;animation:sheet-up .28s cubic-bezier(.4,0,.2,1)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sticky-bottom{position:sticky;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--border);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.search-wrap{position:relative}.search-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:16px;pointer-events:none}.search-input{width:100%;padding:11px 14px 11px 38px;border:1.5px solid var(--border);border-radius:24px;font-size:15px;background:var(--white);color:var(--text-primary);transition:border-color var(--transition)}.search-input:focus{outline:none;border-color:var(--line-green)}.filter-pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.filter-pills::-webkit-scrollbar{display:none}.filter-pill{flex-shrink:0;padding:7px 18px;border-radius:20px;font-size:14px;font-weight:500;border:1.5px solid var(--border);background:var(--white);color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.filter-pill--active{background:var(--line-green);border-color:var(--line-green);color:var(--white)}.progress-bar{width:100%;height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden}.progress-bar__fill{height:100%;border-radius:3px;transition:width .3s}