:root{--bg-primary: #0d0b1a;--bg-secondary: #1a1230;--bg-card: rgba(30, 22, 56, .85);--bg-card-hover: rgba(40, 30, 70, .95);--bg-glass: rgba(255, 255, 255, .05);--bg-glass-strong: rgba(255, 255, 255, .1);--text-primary: #f0e6ff;--text-secondary: #a89cc8;--text-muted: #6b5f8a;--accent-gold: #f5c842;--accent-gold-dark: #c9a020;--accent-purple: #9b59f0;--accent-purple-light: #c084fc;--accent-pink: #e94d9e;--accent-green: #34d399;--accent-red: #f87171;--accent-blue: #60a5fa;--gradient-primary: linear-gradient(135deg, #9b59f0 0%, #e94d9e 100%);--gradient-gold: linear-gradient(135deg, #f5c842 0%, #e8a317 100%);--gradient-dark: linear-gradient(180deg, #0d0b1a 0%, #1a1230 100%);--gradient-card: linear-gradient(145deg, rgba(155, 89, 240, .1) 0%, rgba(233, 77, 158, .05) 100%);--border-subtle: 1px solid rgba(155, 89, 240, .15);--border-glow: 1px solid rgba(155, 89, 240, .4);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(155, 89, 240, .2);--shadow-gold: 0 0 15px rgba(245, 200, 66, .25);--font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 2rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 50%;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}body{font-family:var(--font-family);background:var(--gradient-dark);color:var(--text-primary);min-height:100dvh;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(155,89,240,.2) 0%,transparent 100%),radial-gradient(1px 1px at 50% 10%,rgba(245,200,66,.2) 0%,transparent 100%),radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.25) 0%,transparent 100%),radial-gradient(1px 1px at 90% 80%,rgba(155,89,240,.15) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 20% 90%,rgba(245,200,66,.15) 0%,transparent 100%),radial-gradient(1px 1px at 80% 15%,rgba(255,255,255,.2) 0%,transparent 100%),radial-gradient(1px 1px at 60% 75%,rgba(233,77,158,.1) 0%,transparent 100%);z-index:-1;pointer-events:none}#app{min-height:100dvh;display:flex;flex-direction:column}a{color:var(--accent-purple-light);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto;display:block}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .4s ease}.loading-screen.hidden{opacity:0;pointer-events:none}.loading-spinner{text-align:center}.crystal-ball{font-size:4rem;animation:float 2s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.loading-spinner p{margin-top:var(--space-md);color:var(--text-secondary);font-size:var(--font-sm)}.app-header{position:sticky;top:0;z-index:100;background:#0d0b1ae6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:var(--border-subtle);padding:var(--space-sm) var(--space-md)}.header-inner{max-width:480px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.header-logo{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-lg);font-weight:700;color:var(--accent-gold)}.header-logo .logo-icon{font-size:1.5rem}.header-user{display:flex;align-items:center;gap:var(--space-sm)}.header-avatar{width:36px;height:36px;border-radius:var(--radius-full);border:2px solid var(--accent-purple);object-fit:cover}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#0d0b1af2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:var(--border-subtle);padding:var(--space-xs) 0 env(safe-area-inset-bottom,8px)}.bottom-nav-inner{max-width:480px;margin:0 auto;display:flex;justify-content:space-around}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-xs) var(--space-sm);color:var(--text-muted);font-size:var(--font-xs);cursor:pointer;transition:color var(--transition-fast);border:none;background:none;font-family:inherit}.nav-item .nav-icon{font-size:1.25rem}.nav-item.active,.nav-item:hover{color:var(--accent-gold)}.page{flex:1;max-width:480px;margin:0 auto;width:100%;padding:var(--space-md);padding-bottom:80px}.page-title{font-size:var(--font-2xl);font-weight:700;margin-bottom:var(--space-lg);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--space-lg)}.card{background:var(--bg-card);border:var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all var(--transition-normal)}.card:hover{background:var(--bg-card-hover);border-color:#9b59f04d;box-shadow:var(--shadow-glow);transform:translateY(-2px)}.card+.card{margin-top:var(--space-md)}.card-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.card-avatar{width:56px;height:56px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--accent-purple);flex-shrink:0}.card-info h3{font-size:var(--font-lg);font-weight:600;color:var(--text-primary)}.card-info p{font-size:var(--font-sm);color:var(--text-secondary)}.card-body{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.7}.card-footer{margin-top:var(--space-md);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:.75rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px #9b59f059}.btn-primary:active{transform:translateY(0)}.btn-gold{background:var(--gradient-gold);color:#1a0a2e;box-shadow:var(--shadow-gold)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 30px #f5c84266}.btn-outline{background:transparent;border:var(--border-glow);color:var(--accent-purple-light)}.btn-outline:hover{background:#9b59f01a}.btn-danger{background:#f8717126;border:1px solid rgba(248,113,113,.3);color:var(--accent-red)}.btn-danger:hover{background:#f8717140}.btn-sm{padding:.5rem 1rem;font-size:var(--font-sm);border-radius:var(--radius-sm)}.btn-block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-pending{background:#f5c84226;color:var(--accent-gold);border:1px solid rgba(245,200,66,.3)}.badge-confirmed{background:#34d39926;color:var(--accent-green);border:1px solid rgba(52,211,153,.3)}.badge-cancelled{background:#f8717126;color:var(--accent-red);border:1px solid rgba(248,113,113,.3)}.badge-waiting{background:#60a5fa26;color:var(--accent-blue);border:1px solid rgba(96,165,250,.3)}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;margin-bottom:var(--space-sm);font-size:var(--font-sm);font-weight:500;color:var(--text-secondary)}.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;background:var(--bg-glass);border:var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:var(--font-base);transition:border-color var(--transition-fast);outline:none}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent-purple);box-shadow:0 0 0 3px #9b59f01a}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a89cc8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;padding-right:2.5rem}.form-select option{background-color:#fff!important;color:#000!important;font-size:16px}.form-textarea{min-height:100px;resize:vertical}.file-upload{border:2px dashed rgba(155,89,240,.3);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);background:var(--bg-glass)}.file-upload:hover{border-color:var(--accent-purple);background:#9b59f00d}.file-upload-icon{font-size:2.5rem;margin-bottom:var(--space-sm)}.file-upload-text{color:var(--text-secondary);font-size:var(--font-sm)}.file-upload input[type=file]{display:none}.file-preview{margin-top:var(--space-md);border-radius:var(--radius-md);overflow:hidden;max-height:200px}.file-preview img{width:100%;height:auto;object-fit:contain}.calendar{background:var(--bg-card);border:var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.calendar-title{font-size:var(--font-lg);font-weight:600;color:var(--accent-gold)}.calendar-nav{background:none;border:none;color:var(--text-secondary);font-size:var(--font-xl);cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.calendar-nav:hover{color:var(--accent-purple-light);background:var(--bg-glass)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-day-label{text-align:center;font-size:var(--font-xs);color:var(--text-muted);padding:var(--space-xs);font-weight:600}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);border:none;background:none;color:var(--text-primary);font-family:inherit}.calendar-day:hover:not(.disabled):not(.empty){background:var(--bg-glass-strong)}.calendar-day.today{border:1px solid var(--accent-purple)}.calendar-day.selected{background:var(--gradient-primary);color:#fff;font-weight:600}.calendar-day.available{color:var(--accent-green);font-weight:500}.calendar-day.available:after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent-green)}.calendar-day.disabled{color:var(--text-muted);opacity:.4;cursor:not-allowed}.calendar-day.empty{cursor:default}.time-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-top:var(--space-md)}.time-slot{padding:var(--space-sm) var(--space-md);text-align:center;border:var(--border-subtle);border-radius:var(--radius-md);font-size:var(--font-sm);cursor:pointer;transition:all var(--transition-fast);background:var(--bg-glass);color:var(--text-primary);font-family:inherit}.time-slot:hover:not(.disabled){border-color:var(--accent-purple);background:#9b59f01a}.time-slot.selected{background:var(--gradient-primary);border-color:transparent;color:#fff;font-weight:600}.time-slot.disabled{opacity:.3;cursor:not-allowed}.service-options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.service-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-lg);background:var(--bg-glass);border:var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);font-family:inherit;color:var(--text-primary)}.service-option:hover{border-color:var(--accent-purple);background:#9b59f014;transform:translateY(-2px)}.service-option.selected{border-color:var(--accent-gold);background:#f5c84214;box-shadow:var(--shadow-gold)}.service-option .service-icon{font-size:2rem}.service-option .service-label{font-size:var(--font-sm);font-weight:500}.service-option .service-price{font-size:var(--font-xs);color:var(--accent-gold)}.steps{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-xl)}.step{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-sm);font-weight:600;border:2px solid var(--text-muted);color:var(--text-muted);transition:all var(--transition-normal)}.step.active{border-color:var(--accent-purple);color:var(--accent-purple);background:#9b59f01a}.step.completed{border-color:var(--accent-green);color:#fff;background:var(--accent-green)}.step-line{width:30px;height:2px;background:var(--text-muted);transition:background var(--transition-normal)}.step-line.completed{background:var(--accent-green)}.toast-container{position:fixed;top:var(--space-lg);right:var(--space-md);left:var(--space-md);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);pointer-events:none}.toast{max-width:400px;width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:var(--font-sm);font-weight:500;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideDown .3s ease,fadeOut .3s ease 2.7s forwards}.toast-success{background:#34d39933;border:1px solid rgba(52,211,153,.4);color:var(--accent-green)}.toast-error{background:#f8717133;border:1px solid rgba(248,113,113,.4);color:var(--accent-red)}.toast-info{background:#60a5fa33;border:1px solid rgba(96,165,250,.4);color:var(--accent-blue)}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}.empty-state{text-align:center;padding:var(--space-2xl) var(--space-md)}.empty-state-icon{font-size:4rem;margin-bottom:var(--space-md);opacity:.5}.empty-state-title{font-size:var(--font-lg);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-sm)}.empty-state-text{font-size:var(--font-sm);color:var(--text-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:500;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}.modal{width:100%;max-width:480px;max-height:85dvh;background:var(--bg-secondary);border:var(--border-subtle);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-xl);overflow-y:auto;animation:slideUp .3s ease}.modal-title{font-size:var(--font-xl);font-weight:700;margin-bottom:var(--space-lg);color:var(--accent-gold)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.stat-card{background:var(--bg-card);border:var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center}.stat-value{font-size:var(--font-3xl);font-weight:700;background:var(--gradient-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:var(--font-xs);color:var(--text-muted);margin-top:var(--space-xs)}.toggle{position:relative;width:48px;height:26px;border-radius:13px;background:var(--text-muted);cursor:pointer;transition:background var(--transition-fast)}.toggle.active{background:var(--accent-green)}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.toggle.active:after{transform:translate(22px)}.text-gold{color:var(--accent-gold)}.text-purple{color:var(--accent-purple-light)}.text-green{color:var(--accent-green)}.text-red{color:var(--accent-red)}.text-muted{color:var(--text-muted)}.text-center{text-align:center}.text-sm{font-size:var(--font-sm)}.text-xs{font-size:var(--font-xs)}.fw-600{font-weight:600}.fw-700{font-weight:700}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.hidden{display:none!important}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#9b59f04d;border-radius:2px}.divider{height:1px;background:#9b59f01a;margin:var(--space-lg) 0}