@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600&display=swap";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@500;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Rajdhani:wght@500;700&family=Orbitron:wght@700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@500;700&family=Space+Grotesk:wght@400;700&display=swap";.header{background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 24px}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header-title{font-size:24px;font-weight:700;color:#667eea;margin:0}.header-right{display:flex;align-items:center;gap:16px}.user-name{font-size:14px;color:#4a5568}.logout-button{padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#e53e3e;border:none;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .2s}.logout-button:hover{background:#c53030;transform:translateY(-1px);box-shadow:0 4px 12px #e53e3e4d}.logout-button:active{transform:translateY(0)}.dashboard-container{min-height:100vh;background:#f7fafc}.main-content{max-width:1200px;margin:0 auto;padding:40px 24px}.welcome-card{background:#fff;border-radius:12px;padding:32px;box-shadow:0 1px 3px #0000001a}.welcome-title{font-size:28px;font-weight:700;color:#1a202c;margin:0 0 12px}.welcome-text{font-size:16px;color:#718096;margin:0 0 32px}.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.module-card{padding:24px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0;text-align:center;transition:all .2s}.module-card:hover{border-color:#cbd5e0;box-shadow:0 4px 12px #0000000d}.module-icon{font-size:48px;margin-bottom:16px}.module-title{font-size:20px;font-weight:600;color:#2d3748;margin:0 0 8px}.module-description{font-size:14px;color:#718096;margin:0 0 16px}.module-button{padding:10px 20px;font-size:14px;font-weight:600;color:#667eea;background:#fff;border:1px solid #667eea;border-radius:6px;cursor:not-allowed;opacity:.6;font-family:inherit}.input-field-wrapper{display:flex;flex-direction:column;gap:6px;position:relative}.input-field-container{position:relative;width:100%}.input-field{height:48px;width:100%;padding:16px 14px 6px;font-size:.95rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;transition:all .2s ease;font-family:inherit;box-sizing:border-box}.input-field:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.input-field:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.7}.input-field::placeholder{color:transparent}.input-field-floating-label{position:absolute;left:14px;top:14px;font-size:.95rem;color:#9ca3af;pointer-events:none;transition:all .2s ease}.peer:focus~.input-field-floating-label,.peer:not(:placeholder-shown)~.input-field-floating-label{top:6px;font-size:.7rem;color:#6366f1;font-weight:500}.input-field.has-error{border-color:#ef4444}.input-field.has-error:focus{box-shadow:0 0 0 3px #ef44441a}.input-field.has-error~.input-field-floating-label{color:#ef4444}.input-field-error{color:#ef4444;font-size:.8125rem;margin-top:6px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#6b7280;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.password-toggle:hover{color:#374151}.password-toggle:focus{outline:none;color:#6366f1}.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:inherit;border:none;white-space:nowrap}.btn-sm{height:36px;padding:0 16px;font-size:.875rem}.btn-md{height:44px;padding:0 20px;font-size:1rem}.btn-lg{height:52px;padding:0 24px;font-size:1.125rem}.full-width{width:100%}.btn-primary{color:#fff;background:#6366f1}.btn-primary:hover:not(:disabled):not(.loading){background:#4f46e5;transform:translateY(-1px)}.btn-outline{color:#6366f1;background:transparent;border:1px solid #6366f1}.btn-outline:hover:not(:disabled):not(.loading){background:#f3f4f6;color:#4f46e5;border-color:#4f46e5}.btn-ghost{color:#374151;background:transparent}.btn-ghost:hover:not(:disabled):not(.loading){background:#f3f4f6}.btn-danger{color:#fff;background:#ef4444}.btn-danger:hover:not(:disabled):not(.loading){background:#dc2626}.btn.loading{cursor:wait;opacity:.7}.btn:disabled,.btn.loading{cursor:not-allowed;opacity:.65}.login-split-container{min-height:100vh;display:flex;flex-direction:row;background:#f9fafb}.login-illustration-side{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#e0e7ff);overflow:hidden}.login-illustration{width:100%;height:100%;object-fit:cover;max-width:800px}.login-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:#fff}.login-page-card{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:48px 40px;transition:transform .2s ease}.login-page-card:hover{transform:translateY(0)}.login-page-header{text-align:center;margin-bottom:40px}.login-page-title{font-size:2.25rem;font-weight:700;color:#111827;margin:0 0 8px;letter-spacing:-.025em}.login-page-subtitle{font-size:1rem;color:#6b7280;margin:0}.login-page-form{display:flex;flex-direction:column;gap:24px}.login-page-error-message{padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:8px;font-size:.875rem;text-align:center}.login-page-divider{position:relative;text-align:center;margin:16px 0;color:#9ca3af;font-size:.875rem}.login-page-divider:before,.login-page-divider:after{content:"";position:absolute;top:50%;width:45%;height:1px;background:#e5e7eb}.login-page-divider:before{left:0}.login-page-divider:after{right:0}.login-page-divider-text{background:#fff;padding:0 16px}@media(max-width:1024px){.login-split-container{flex-direction:column}.login-illustration-side{height:40vh}.login-illustration{height:100%;width:auto}.login-form-side{padding:48px 24px}}@media(max-width:480px){.login-page-card{padding:32px 24px;border-radius:12px}.login-page-title{font-size:2rem}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.auth-card{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:440px;padding:40px}.auth-header{text-align:center;margin-bottom:32px}.auth-title{font-size:32px;font-weight:700;color:#1a202c;margin:0 0 8px}.auth-subtitle{font-size:16px;color:#718096;margin:0}.form-container{display:flex;flex-direction:column;gap:20px}.form-label{font-size:14px;font-weight:600;color:#2d3748}.form-input{padding:12px 16px;font-size:16px;border:2px solid #e2e8f0;border-radius:8px;outline:none;font-family:inherit;transition:all .2s}.form-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-input:disabled{background:#f7fafc;cursor:not-allowed}.btn-primary{padding:14px 20px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{padding:14px 20px;font-size:16px;font-weight:600;color:#667eea;background:#fff;border:2px solid #667eea;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s}.btn-secondary:hover:not(:disabled){background:#f7fafc;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.btn-secondary:active:not(:disabled){transform:translateY(0)}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.error-alert{padding:12px 16px;background:#fed7d7;color:#c53030;border-radius:8px;font-size:14px;border-left:4px solid #e53e3e}.restaurant-list-container{padding:24px;max-width:1400px;margin:0 auto}.list-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}.header-left{flex:1}.btn-create{padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}.btn-create:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.filters-section{background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 1px 3px #0000001a}.search-box{display:flex;gap:12px;margin-bottom:16px}.search-input{flex:1;padding:10px 16px;font-size:15px;border:2px solid #e2e8f0;border-radius:8px;outline:none;font-family:inherit}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-search{padding:10px 20px;font-size:15px;font-weight:600;color:#667eea;background:#fff;border:2px solid #667eea;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s}.btn-search:hover{background:#667eea;color:#fff}.filter-controls{display:flex;gap:12px;flex-wrap:wrap}.filter-select{padding:10px 16px;font-size:14px;border:2px solid #e2e8f0;border-radius:8px;outline:none;background:#fff;cursor:pointer;font-family:inherit}.filter-select:focus{border-color:#667eea}.btn-reset{padding:10px 20px;font-size:14px;font-weight:600;color:#718096;background:#fff;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s}.btn-reset:hover{border-color:#cbd5e0;background:#f7fafc}.results-info{font-size:14px;color:#718096;margin-bottom:16px}.table-container{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a;margin-bottom:20px}.restaurant-table{width:100%;border-collapse:collapse}.restaurant-table thead{background:#f7fafc}.restaurant-table th{padding:16px;text-align:left;font-size:14px;font-weight:600;color:#2d3748;border-bottom:2px solid #e2e8f0}.restaurant-table td{padding:16px;border-bottom:1px solid #e2e8f0}.restaurant-table tbody tr:hover{background:#f7fafc}.restaurant-cell{display:flex;flex-direction:column;gap:4px}.restaurant-name{font-size:15px;font-weight:600;color:#1a202c}.restaurant-slug{font-size:13px;color:#718096;font-family:Courier New,monospace}.owner-cell{display:flex;flex-direction:column;gap:4px}.owner-name{font-size:14px;color:#2d3748}.owner-email{font-size:13px;color:#718096}.type-badge{display:inline-block;padding:4px 12px;font-size:12px;font-weight:600;text-transform:capitalize;background:#edf2f7;color:#2d3748;border-radius:12px}.status-badge{display:inline-block;padding:4px 12px;font-size:12px;font-weight:600;border-radius:12px}.plan-badge{display:inline-block;padding:4px 12px;font-size:12px;font-weight:600;border-radius:12px}.plan-trial{background:#bee3f8;color:#2c5282}.plan-basic{background:#c6f6d5;color:#22543d}.plan-premium{background:#fbd38d;color:#744210}.plan-enterprise{background:#d6bcfa;color:#44337a}.branches-cell{font-size:14px;color:#2d3748;font-weight:500}.btn-action{padding:6px 10px;font-size:16px;border:none;border-radius:6px;cursor:pointer;transition:all .2s;background:#f7fafc}.btn-action:hover{transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.btn-view:hover{background:#bee3f8}.btn-edit:hover{background:#fbd38d}.btn-delete:hover{background:#fed7d7}.loading-state,.error-state,.empty-state{padding:60px 20px;text-align:center;background:#fff;border-radius:8px;color:#718096}.empty-state p{margin-bottom:20px;font-size:16px}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;padding:20px}.btn-pagination{padding:8px 16px;font-size:14px;font-weight:600;color:#667eea;background:#fff;border:2px solid #667eea;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .2s}.btn-pagination:hover:not(:disabled){background:#667eea;color:#fff}.btn-pagination:disabled{opacity:.4;cursor:not-allowed}.pagination-info{font-size:14px;color:#2d3748;font-weight:500}@media(max-width:1024px){.restaurant-table{font-size:13px}.restaurant-table th,.restaurant-table td{padding:12px}}.create-restaurant-container{padding:24px;max-width:1200px;margin:0 auto;background:#f9fafb;min-height:100vh}.create-restaurant-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.page-title{font-size:28px;font-weight:700;color:#1a202c;margin:0 0 8px}.page-subtitle{font-size:16px;color:#718096;margin:0}.create-restaurant-form{display:flex;flex-direction:column;gap:24px}.error-banner{background:#fed7d7;border:1px solid #fc8181;color:#742a2a;padding:16px;border-radius:8px;font-size:14px;font-weight:500}.form-section{background:#fff;padding:32px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.field-label{font-size:14px;font-weight:600;color:#2d3748}.field-error{font-size:13px;color:#e53e3e;margin-top:4px}.slug-field-group{display:flex;flex-direction:column;gap:8px}.btn-generate-slug{padding:10px 16px;font-size:14px;font-weight:600;color:#667eea;background:#fff;border:2px solid #667eea;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .2s}.btn-generate-slug:hover:not(:disabled){background:#667eea;color:#fff}.btn-generate-slug:disabled{opacity:.4;cursor:not-allowed}.form-actions{display:flex;justify-content:flex-end;gap:16px;padding:24px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}@media(max-width:768px){.create-restaurant-container{padding:16px}.create-restaurant-header{flex-direction:column;gap:16px}.form-section{padding:20px}.form-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions button{width:100%}}.view-restaurant-container{padding:24px;max-width:1200px;margin:0 auto;background:#f9fafb;min-height:100vh}.view-restaurant-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;background:#fff;padding:32px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.header-info{flex:1}.header-actions{display:flex;gap:12px;flex-wrap:wrap}.status-badges{display:flex;gap:12px;margin-top:12px}.status-badge{display:inline-block;padding:6px 14px;font-size:13px;font-weight:600;border-radius:16px}.status-badge.active{background:#c6f6d5;color:#22543d}.status-badge.inactive{background:#fed7d7;color:#742a2a}.type-badge{display:inline-block;padding:6px 14px;font-size:13px;font-weight:600;text-transform:capitalize;background:#edf2f7;color:#2d3748;border-radius:16px}.info-section{background:#fff;padding:32px;border-radius:12px;box-shadow:0 1px 3px #0000001a;margin-bottom:24px}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.info-item{display:flex;flex-direction:column;gap:8px}.info-item.full-width{grid-column:1 / -1}.info-label{font-size:13px;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:16px;color:#2d3748;margin:0;word-break:break-word}.info-value.mono{font-family:Courier New,monospace;font-size:14px;color:#4a5568}.plan-badge{display:inline-block;padding:6px 14px;font-size:13px;font-weight:600;border-radius:16px}.plan-badge.plan-trial{background:#bee3f8;color:#2c5282}.plan-badge.plan-basic{background:#c6f6d5;color:#22543d}.plan-badge.plan-premium{background:#fbd38d;color:#744210}.plan-badge.plan-enterprise{background:#d6bcfa;color:#44337a}.color-display{display:flex;align-items:center;gap:12px}.color-box{width:40px;height:40px;border-radius:8px;border:2px solid #e2e8f0;box-shadow:0 2px 4px #0000001a}.theme-image{max-width:200px;max-height:100px;border-radius:8px;border:2px solid #e2e8f0;object-fit:contain}.theme-image.banner{max-width:100%;max-height:200px}@media(max-width:768px){.view-restaurant-container{padding:16px}.view-restaurant-header{flex-direction:column;gap:20px;padding:20px}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}.info-section{padding:20px}.info-grid{grid-template-columns:1fr}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.add-staff-form{background:#f9fafb;padding:24px;border-radius:12px;margin-bottom:24px}.form-subtitle{font-size:18px;font-weight:600;color:#2d3748;margin:0 0 20px}.staff-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:20px}.input-label{font-size:14px;font-weight:600;color:#374151}.form-actions{display:flex;justify-content:flex-end;gap:12px}.staff-list{margin-top:24px}.staff-table-container{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0}.staff-table{width:100%;border-collapse:collapse;background:#fff}.staff-table thead{background:#f9fafb;border-bottom:2px solid #e2e8f0}.staff-table th{padding:12px 16px;text-align:left;font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.staff-table tbody tr{border-bottom:1px solid #e2e8f0;transition:background .2s ease}.staff-table td{padding:14px 16px;font-size:14px;color:#2d3748}.role-badge{display:inline-block;padding:4px 12px;font-size:12px;font-weight:600;text-transform:capitalize;background:#e0e7ff;color:#3730a3;border-radius:12px}.empty-state{padding:40px 20px;text-align:center;color:#6b7280;background:#f9fafb;border-radius:8px;border:1px dashed #d1d5db}.empty-state p{margin:0;font-size:15px}@media(max-width:768px){.section-header{flex-direction:column;align-items:flex-start;gap:12px}.section-header button{width:100%}.add-staff-form{padding:16px}.staff-form-grid{grid-template-columns:1fr}.staff-table-container{overflow-x:scroll}.staff-table{min-width:600px}}.edit-restaurant-container{padding:24px;max-width:1200px;margin:0 auto;background:#f9fafb;min-height:100vh}.edit-restaurant-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.header-actions{display:flex;gap:12px}.error-banner{background:#fed7d7;border:1px solid #fc8181;color:#742a2a;padding:16px;border-radius:8px;font-size:14px;font-weight:500;margin-bottom:24px}.success-banner{background:#c6f6d5;border:1px solid #68d391;color:#22543d;padding:16px;border-radius:8px;font-size:14px;font-weight:500;margin-bottom:24px}.tabs-container{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.tabs-header{display:flex;border-bottom:2px solid #e2e8f0;background:#f7fafc}.tab{flex:1;padding:16px 24px;font-size:15px;font-weight:600;color:#718096;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all .2s;font-family:inherit}.tab:hover{color:#4a5568;background:#edf2f7}.tab.active{color:#667eea;border-bottom-color:#667eea;background:#fff}.tabs-content{padding:32px}.tab-panel{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.section-title{font-size:20px;font-weight:600;color:#2d3748;margin:0 0 24px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field.full-width{grid-column:1 / -1}.field-label{font-size:14px;font-weight:600;color:#2d3748;display:flex;align-items:center}.select-input{padding:12px 16px;font-size:16px;border:2px solid #e2e8f0;border-radius:8px;outline:none;background:#fff;cursor:pointer;font-family:inherit;transition:all .2s}.select-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.select-input:disabled{background:#f7fafc;cursor:not-allowed;opacity:.6}.textarea-input{padding:12px 16px;font-size:14px;border:2px solid #e2e8f0;border-radius:8px;outline:none;background:#fff;font-family:Courier New,monospace;resize:vertical;transition:all .2s}.textarea-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.textarea-input:disabled{background:#f7fafc;cursor:not-allowed;opacity:.6}.color-input-group{display:flex;gap:12px;align-items:center}.color-picker{width:60px;height:44px;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;outline:none;background:#fff}.color-picker:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.color-input-group .input-field-wrapper{flex:1}.form-actions{display:flex;justify-content:flex-end;gap:16px;padding-top:24px;border-top:2px solid #e2e8f0}.loading-state,.error-state{padding:60px 20px;text-align:center;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.error-state{color:#e53e3e}.error-state p{margin-bottom:20px;font-size:16px}@media(max-width:768px){.edit-restaurant-container{padding:16px}.edit-restaurant-header{flex-direction:column;gap:16px;padding:20px}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}.tabs-header{overflow-x:auto}.tab{white-space:nowrap;flex:none;min-width:120px}.tabs-content{padding:20px}.form-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions button{width:100%}}.staff-login-split-container{min-height:100vh;display:flex;flex-direction:row;background:#f9fafb}.staff-login-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:#fff}.staff-login-page-card{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:48px 40px;transition:transform .2s ease}.staff-login-page-card:hover{transform:translateY(0)}.staff-login-page-header{text-align:center;margin-bottom:40px}.staff-login-page-title{font-size:2.25rem;font-weight:700;color:#111827;margin:0 0 8px;letter-spacing:-.025em}.staff-login-page-subtitle{font-size:1rem;color:#6b7280;margin:0}.staff-login-page-form{display:flex;flex-direction:column;gap:24px}.input-group{display:flex;flex-direction:column;gap:8px}.input-label{font-size:14px;font-weight:600;color:#374151;margin-bottom:4px}.role-select{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;color:#111827;background:#fff;transition:all .2s ease;outline:none;cursor:pointer}.role-select:hover{border-color:#9ca3af}.role-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.role-select:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6}.role-select.error{border-color:#ef4444}.role-select.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.error-message{font-size:13px;color:#ef4444;margin-top:4px}@media(max-width:1024px){.staff-login-split-container{flex-direction:column}.staff-login-form-side{padding:48px 24px}}@media(max-width:480px){.staff-login-page-card{padding:32px 24px;border-radius:12px}.staff-login-page-title{font-size:2rem}}.staff-dashboard-layout{height:100%;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden}.dashboard-page-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb;flex-shrink:0}.dashboard-page-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.dashboard-toolbar-actions{display:flex;align-items:center;gap:12px}.dashboard-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.stat-card{background:#fff;padding:20px;border:1px solid #e5e7eb;border-radius:12px;display:flex;flex-direction:column;gap:8px;transition:transform .2s}.stat-card:hover{transform:translateY(-2px);border-color:#d1d5db;box-shadow:0 4px 6px -1px #0000000d}.stat-label{font-size:.875rem;font-weight:500;color:#6b7280}.stat-value{font-size:1.5rem;font-weight:700;color:#111827}.stat-trend{font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:4px}.stat-trend.up{color:#10b981}.stat-trend.down{color:#ef4444}.dashboard-interactive-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}@media(max-width:1200px){.dashboard-interactive-grid{grid-template-columns:1fr}}.dashboard-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;display:flex;flex-direction:column;height:500px}.panel-header{padding:16px 20px;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.panel-title{font-size:1rem;font-weight:600;color:#111827;margin:0}.panel-content{flex:1;overflow-y:auto;padding:0}.dashboard-table{width:100%;border-collapse:collapse}.dashboard-table th{text-align:left;padding:12px 20px;background:#f9fafb;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #f3f4f6}.dashboard-table td{padding:14px 20px;font-size:.875rem;color:#374151;border-bottom:1px solid #f9fafb}.dashboard-table tr:hover{background:#f9fafb}.status-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:.75rem;font-weight:500}.status-pill.pending{background:#fef3c7;color:#92400e}.status-pill.completed{background:#d1fae5;color:#065f46}.status-pill.cancelled{background:#fee2e2;color:#991b1b}.popular-list{display:flex;flex-direction:column}.popular-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f9fafb}.popular-item-info{display:flex;align-items:center;gap:12px}.item-rank{font-size:.875rem;font-weight:700;color:#9ca3af;width:24px}.item-name{font-size:.875rem;font-weight:500;color:#111827}.item-sales{font-size:.75rem;color:#6b7280}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.quick-action-button{background:#fff;border:1px solid #e5e7eb;padding:20px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:all .2s;text-align:center}.quick-action-button:hover{background:#f9fafb;border-color:#2563eb;transform:translateY(-2px)}.action-icon-circle{width:48px;height:48px;background:#f3f4f6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#2563eb;transition:background-color .2s}.quick-action-button:hover .action-icon-circle{background:#eff6ff}.action-label{font-size:.875rem;font-weight:600;color:#111827}@media(max-width:768px){.dashboard-content{padding:16px}}.menu-item-card{background:#fff;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb;transition:all .2s ease;display:flex;flex-direction:column}.menu-item-card:hover{border-color:#d1d5db;box-shadow:0 2px 4px #0000000d;transform:translateY(-2px)}.item-image-container{width:100%;height:160px;overflow:hidden;background:#f3f4f6;position:relative}.item-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.menu-item-card:hover .item-image{transform:scale(1.05)}.item-content{padding:16px;flex:1;display:flex;flex-direction:column}.item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:12px}.item-name{font-size:1.1rem;font-weight:600;color:#111827;margin:0;flex:1;line-height:1.4}.availability-toggle{padding:4px 10px;border-radius:6px;font-size:.7rem;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.availability-toggle.available{background:#ecfdf5;color:#059669;border:1px solid #d1fae5}.availability-toggle.unavailable{background:#fef2f2;color:#b91c1c;border:1px solid #fee2e2}.item-description{font-size:.875rem;color:#6b7280;margin:0 0 12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:42px}.item-meta{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.item-category,.item-prep-time{font-size:.75rem;padding:2px 8px;background:#f3f4f6;border-radius:4px;color:#4b5563;font-weight:500}.item-pricing{display:flex;align-items:center;gap:8px;margin-top:auto;margin-bottom:16px}.current-price{font-size:1.25rem;font-weight:700;color:#111827}.original-price{font-size:.9rem;color:#9ca3af;text-decoration:line-through}.discount-price{font-size:1.25rem;font-weight:700;color:#dc2626}.item-actions{display:flex;gap:8px;border-top:1px solid #f3f4f6;padding-top:12px}.item-actions button{flex:1;font-size:.875rem}.menu-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .2s ease-out}.menu-modal-container{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:90vh;overflow:hidden;position:relative;box-shadow:0 25px 50px -12px #00000040;animation:modalSlideUp .3s ease-out;display:flex;flex-direction:column}.menu-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;color:#6b7280}.menu-modal-close:hover{background:#f9fafb;border-color:#d1d5db;color:#111827;transform:rotate(90deg)}.menu-modal-content{display:flex;height:100%;overflow:hidden}.menu-modal-form-side{flex:1;padding:32px;overflow-y:auto;background:#fff}.menu-modal-header{margin-bottom:24px}.menu-modal-title{font-size:1.5rem;font-weight:700;color:#111827;margin:0 0 6px;letter-spacing:-.025em}.menu-modal-subtitle{font-size:.875rem;color:#6b7280;margin:0}.menu-modal-form{display:flex;flex-direction:column;gap:20px}.form-label{font-size:13px;font-weight:600;color:#374151}.optional-label{color:#9ca3af;font-weight:400;font-size:12px}.form-textarea,.form-select,.form-input{padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#111827;background:#fff;outline:none;transition:all .2s ease}.form-textarea:focus,.form-select:focus,.form-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.radio-card-group{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.radio-card{position:relative;cursor:pointer;border:2px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.radio-card.selected{border-color:#6366f1;background:#eef2ff}.radio-card-content{display:flex;flex-direction:column;align-items:center;gap:4px}.radio-card-icon{font-size:1.5rem}.radio-card-label{font-size:14px;font-weight:600;color:#374151}.selection-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.selection-card{cursor:pointer;border:2px solid #e5e7eb;border-radius:10px;padding:12px;background:#fff;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.selection-card:hover:not(:disabled){border-color:#6366f1;background:#f5f3ff}.selection-card.selected{border-color:#6366f1;background:#eef2ff}.selection-card-icon{font-size:1.5rem}.selection-card-label{font-size:12px;font-weight:600;color:#374151}.checkbox-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.checkbox-card{cursor:pointer;border:2px solid #e5e7eb;border-radius:8px;padding:10px;background:#fff;transition:all .2s ease;display:flex;align-items:center}.checkbox-card-content{display:flex;align-items:center;gap:8px;width:100%}.checkbox-card-check{width:18px;height:18px;border:2px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;background:#fff;flex-shrink:0}.checkbox-card-label{font-size:13px;font-weight:500;color:#374151}.form-section{padding:16px;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.section-title{font-size:14px;font-weight:600;margin:0}.dynamic-item-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}.menu-modal-actions{display:flex;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}.menu-modal-actions button{flex:1}.field-help-text{font-size:12px;color:#6b7280;margin:4px 0 0}.error-text{font-size:12px;color:#dc2626;margin-top:4px}.menu-modal-preview-side{width:350px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);padding:32px;display:flex;flex-direction:column;overflow-y:auto;border-left:1px solid #e5e7eb}.preview-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:40px}@media(max-width:1024px){.menu-modal-preview-side{display:none}}@media(max-width:640px){.menu-modal-container{height:100vh;max-height:100vh;border-radius:0}.menu-modal-form-side{padding:20px}.form-row{grid-template-columns:1fr}}.menu-management-layout{height:100%;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden}.menu-page-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb}.menu-page-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.menu-toolbar-actions{display:flex;align-items:center;gap:12px}.menu-filter-container{display:flex;align-items:center}.menu-filter-select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;color:#374151;background:#fff;cursor:pointer;outline:none;min-width:150px;transition:border-color .2s}.menu-filter-select:hover{border-color:#9ca3af}.menu-filter-select:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.menu-management-content{display:flex;flex:1;overflow:hidden;height:100%;position:relative}.menu-list-panel{flex:1;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden;width:100%}.menu-list-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 24px 24px}.menu-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.menu-list-container::-webkit-scrollbar{width:8px}.menu-list-container::-webkit-scrollbar-track{background:transparent}.menu-list-container::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.menu-list-container::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(max-width:768px){.menu-page-toolbar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.menu-toolbar-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.menu-filter-container{width:100%;margin-bottom:8px}.menu-filter-select{width:100%}.menu-list-container{padding:0 16px 16px}}.staff-category-sort-skeleton-preview-card{position:relative;border-radius:7px;overflow:hidden;background:#f7fafc;box-shadow:0 1px 5px #00000014}.staff-category-sort-skeleton-preview-overlay{position:absolute;bottom:0;left:0;right:0;padding:6px 7px;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 60%,transparent 100%)}.staff-category-sort-skeleton-saving-badge{position:sticky;top:0;left:0;right:0;background:#3b82f6f2;color:#fff;padding:8px 12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.75rem;font-weight:600;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px #0000001a}.staff-category-sort-skeleton-saving-spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:staff-category-sort-skeleton-saving-spin .6s linear infinite}.category-preview-wrapper{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.category-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;grid-auto-rows:75px;grid-auto-flow:dense;padding:8px;position:relative;min-height:100%}.category-preview-card{position:relative;border-radius:7px;overflow:hidden;cursor:grab;transition:transform .2s,box-shadow .2s;box-shadow:0 1px 5px #00000014;background:#f7fafc;touch-action:none}.category-preview-card:active{cursor:grabbing}.category-preview-card.large{grid-row:span 2}.category-preview-card.small{grid-row:span 1}.category-preview-card:hover:not(.dragging){transform:translateY(-1px);box-shadow:0 5px 10px #0000001f;z-index:1}.category-preview-card.dragging{opacity:.5;cursor:grabbing;z-index:1000!important;box-shadow:0 8px 20px #0003}.category-preview-image{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.category-preview-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f7fafc,#edf2f7);display:flex;align-items:center;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none}.category-preview-placeholder-icon{font-size:1.8rem;opacity:.7}.category-preview-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 60%,transparent 100%);padding:6px 7px;color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none}.category-preview-name{font-size:.6875rem;font-weight:700;margin:0 0 1px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-preview-count{font-size:.5625rem;margin:0;color:#fffffff2;text-shadow:0 1px 2px rgba(0,0,0,.5)}.preview-empty-state{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 16px;text-align:center;color:#9ca3af}.preview-empty-icon{font-size:2.2rem;margin-bottom:8px;opacity:.5}.preview-empty-state p{font-size:.75rem;margin:0;color:#6b7280}.staff-category-sort-skeleton-preview-card{position:relative;border-radius:7px;overflow:hidden;background:#f7fafc;animation:staff-category-sort-skeleton-preview-pulse 1.5s ease-in-out infinite}.staff-category-sort-skeleton-preview-card.large{grid-row:span 2}.staff-category-sort-skeleton-preview-card.small{grid-row:span 1}.staff-category-sort-skeleton-preview-image{width:100%;height:100%;background:linear-gradient(90deg,#e5e7eb 25%,#d1d5db,#e5e7eb 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-preview-shimmer 1.5s infinite}.staff-category-sort-skeleton-preview-overlay{position:absolute;bottom:0;left:0;right:0;padding:6px 7px;background:linear-gradient(to top,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 60%,transparent 100%)}.staff-category-sort-skeleton-preview-name{height:10px;width:70%;background:linear-gradient(90deg,#ffffff4d 25%,#ffffff80,#ffffff4d 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-preview-shimmer 1.5s infinite;border-radius:3px;margin-bottom:4px}.staff-category-sort-skeleton-preview-count{height:8px;width:40%;background:linear-gradient(90deg,#ffffff4d 25%,#ffffff80,#ffffff4d 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-preview-shimmer 1.5s infinite;border-radius:3px}.staff-category-sort-skeleton-saving-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.staff-category-sort-skeleton-saving-spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:staff-category-sort-skeleton-saving-spin .8s linear infinite;margin-bottom:12px}.staff-category-sort-skeleton-saving-text{font-size:.75rem;color:#4b5563;font-weight:600;margin:0}@keyframes staff-category-sort-skeleton-preview-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes staff-category-sort-skeleton-preview-pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes staff-category-sort-skeleton-saving-spin{to{transform:rotate(360deg)}}.category-preview-wrapper::-webkit-scrollbar{width:3px}.category-preview-wrapper::-webkit-scrollbar-track{background:transparent}.category-preview-wrapper::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.category-preview-wrapper::-webkit-scrollbar-thumb:hover{background:#9ca3af}.staff-category-sort-skeleton-item{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;gap:12px;padding:16px}@media(max-width:640px){.staff-category-sort-skeleton-item{padding:12px}.staff-category-sort-skeleton-content{flex-direction:column;align-items:flex-start;gap:12px}.staff-category-sort-skeleton-button{width:100%}}.category-modal-skeleton-wrapper{display:flex;height:100%;width:100%}.category-modal-skeleton-form-side{flex:1;padding:34px 28px;background:#fff;overflow-y:auto}.category-modal-skeleton-header{margin-bottom:22px}.category-modal-skeleton-title{height:24px;width:60%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:6px;margin-bottom:8px}.category-modal-skeleton-subtitle{height:14px;width:80%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px}.category-modal-skeleton-form{display:flex;flex-direction:column;gap:17px}.category-modal-skeleton-field{display:flex;flex-direction:column;gap:6px}.category-modal-skeleton-label{height:14px;width:30%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px}.category-modal-skeleton-input{height:38px;width:100%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:6px}.category-modal-skeleton-textarea{height:70px;width:100%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:6px}.category-modal-skeleton-select{height:38px;width:100%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:6px}.category-modal-skeleton-checkbox-group{display:flex;align-items:center;gap:8px}.category-modal-skeleton-checkbox{height:16px;width:16px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:3px;flex-shrink:0}.category-modal-skeleton-checkbox-label{height:14px;width:120px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px}.category-modal-skeleton-help-text{height:12px;width:70%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-top:3px}.category-modal-skeleton-actions{display:flex;gap:10px;margin-top:6px}.category-modal-skeleton-button{flex:1;height:38px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:6px}.category-modal-skeleton-preview-side{flex:1;background:linear-gradient(135deg,#eef2ff,#e0e7ff);padding:34px 28px;display:flex;flex-direction:column}.category-modal-skeleton-preview-header{margin-bottom:17px}.category-modal-skeleton-preview-title{height:16px;width:40%;background:linear-gradient(90deg,#ffffff80 25%,#ffffffb3,#ffffff80 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-bottom:6px}.category-modal-skeleton-preview-subtitle{height:12px;width:60%;background:linear-gradient(90deg,#ffffff80 25%,#ffffffb3,#ffffff80 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px}.category-modal-skeleton-preview-card-wrapper{flex:1;display:flex;align-items:center;justify-content:center}.category-modal-skeleton-preview-card{background:#fff;border-radius:12px;overflow:hidden;width:100%;max-width:280px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.category-modal-skeleton-preview-image{width:100%;height:154px;background:linear-gradient(90deg,#e5e7eb 25%,#d1d5db,#e5e7eb 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite}.category-modal-skeleton-preview-content{padding:17px}.category-modal-skeleton-preview-name{height:20px;width:70%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-bottom:10px}.category-modal-skeleton-preview-desc-1{height:12px;width:100%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-bottom:6px}.category-modal-skeleton-preview-desc-2{height:12px;width:80%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-bottom:12px}.category-modal-skeleton-preview-badges{display:flex;gap:6px}.category-modal-skeleton-preview-badge{height:24px;width:100px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:category-modal-skeleton-shimmer 1.5s infinite;border-radius:6px}@keyframes category-modal-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(max-width:1024px){.category-modal-skeleton-preview-side{display:none}}@media(max-width:640px){.category-modal-skeleton-form-side{padding:22px 16px}}.category-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:modalFadeIn .2s ease-out}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.category-modal-container{background:#fff;border-radius:16px;max-width:770px;width:100%;max-height:85vh;overflow:hidden;position:relative;box-shadow:0 25px 50px -12px #00000040;animation:modalSlideUp .3s ease-out}@keyframes modalSlideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.category-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;color:#6b7280}.category-modal-close svg{width:18px;height:18px}.category-modal-close:hover{background:#f9fafb;border-color:#d1d5db;color:#111827;transform:rotate(90deg)}.category-modal-close:disabled{opacity:.5;cursor:not-allowed}.category-modal-content{display:flex;height:85vh;max-height:560px}.category-modal-form-side{flex:1;padding:34px 28px;overflow-y:auto;background:#fff}.category-modal-header{margin-bottom:22px}.category-modal-title{font-size:1.3rem;font-weight:700;color:#111827;margin:0 0 6px;letter-spacing:-.025em}.category-modal-subtitle{font-size:.75rem;color:#6b7280;margin:0}.category-modal-form{display:flex;flex-direction:column;gap:17px}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:12px;font-weight:600;color:#374151}.optional-label{font-size:11px;font-weight:400;color:#9ca3af}.form-textarea{padding:9px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;font-family:inherit;color:#111827;background:#fff;outline:none;transition:all .2s ease;resize:vertical}.form-textarea:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f11a}.form-select{padding:9px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;color:#111827;background:#fff;outline:none;transition:all .2s ease;cursor:pointer}.form-select:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f11a}.field-help-text{font-size:11px;color:#6b7280;margin:3px 0 0}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none}.form-checkbox{width:16px;height:16px;cursor:pointer}.category-modal-actions{display:flex;gap:10px;margin-top:6px}.category-modal-actions button{flex:1;font-size:13px;padding:9px 16px}.category-modal-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 14px;color:#6b7280}.loading-spinner{width:32px;height:32px;border:2px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}.category-modal-loading p{font-size:13px}.category-modal-preview-side{flex:1;background:linear-gradient(135deg,#eef2ff,#e0e7ff);padding:34px 28px;overflow-y:auto;display:flex;flex-direction:column}.preview-header{margin-bottom:17px}.preview-title{font-size:.95rem;font-weight:700;color:#111827;margin:0 0 3px}.preview-subtitle{font-size:.7rem;color:#6b7280;margin:0}.category-preview-card-wrapper{flex:1;display:flex;align-items:center;justify-content:center}.category-preview-card-modal{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:280px;transition:transform .3s ease}.category-preview-card-modal:hover{transform:translateY(-3px)}.preview-image-container{width:100%;height:154px;overflow:hidden;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);position:relative}.preview-content{padding:17px}.preview-category-name{font-size:1.1rem;font-weight:700;color:#111827;margin:0 0 8px;line-height:1.2}.preview-description{font-size:12px;color:#6b7280;margin:0 0 12px;line-height:1.5;min-height:32px}.preview-badges{display:flex;gap:6px;flex-wrap:wrap}.preview-scope-badge{font-size:11px;padding:4px 10px;background:#f3f4f6;border-radius:6px;color:#4b5563;font-weight:500;display:inline-flex;align-items:center;gap:3px}.preview-status-badge{font-size:11px;padding:4px 10px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:3px}.preview-status-badge.active{background:#d1fae5;color:#065f46}.preview-status-badge.inactive{background:#fee2e2;color:#991b1b}.category-modal-form-side::-webkit-scrollbar,.category-modal-preview-side::-webkit-scrollbar{width:6px}.category-modal-form-side::-webkit-scrollbar-track,.category-modal-preview-side::-webkit-scrollbar-track{background:#f3f4f6}.category-modal-form-side::-webkit-scrollbar-thumb,.category-modal-preview-side::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.category-modal-form-side::-webkit-scrollbar-thumb:hover,.category-modal-preview-side::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(max-width:1024px){.category-modal-content{flex-direction:column;max-height:none}.category-modal-preview-side{display:none}.category-modal-form-side{padding:28px 22px}}@media(max-width:640px){.category-modal-overlay{padding:0}.category-modal-container{border-radius:0;max-height:100vh;height:100vh}.category-modal-content{height:100vh}.category-modal-form-side{padding:22px 16px}.category-modal-title{font-size:1.1rem}.category-modal-close{top:12px;right:12px;width:28px;height:28px}.category-modal-close svg{width:16px;height:16px}}.sortable-category-item{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;gap:12px;padding:16px;cursor:move;transition:all .2s ease}.sortable-category-item:hover{border-color:#d1d5db;box-shadow:0 2px 8px #00000014}.sortable-category-item.dragging{z-index:1000;box-shadow:0 8px 24px #00000026;transform:rotate(2deg)}.drag-handle{color:#9ca3af;cursor:grab;display:flex;align-items:center;justify-content:center;padding:4px;transition:color .2s ease;flex-shrink:0}.drag-handle:hover{color:#6b7280}.drag-handle:active{cursor:grabbing}.category-item-content{flex:1;display:flex;align-items:center;gap:16px;min-width:0}.category-item-main{flex:1;min-width:0}.category-item-info{margin-bottom:8px}.category-item-name{font-size:1rem;font-weight:600;color:#111827;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-item-description{font-size:.875rem;color:#6b7280;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-item-meta{display:flex;gap:12px;flex-wrap:wrap}.category-item-scope{font-size:.75rem;padding:4px 8px;background:#f3f4f6;border-radius:6px;color:#4b5563;font-weight:500;display:inline-flex;align-items:center;gap:4px}.category-item-status{font-size:.75rem;padding:4px 8px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:4px}.category-item-status.active{background:#d1fae5;color:#065f46}.category-item-status.inactive{background:#fee2e2;color:#991b1b}.category-item-actions{flex-shrink:0}@media(max-width:640px){.sortable-category-item{padding:12px}.category-item-content{flex-direction:column;align-items:flex-start;gap:12px}.category-item-actions,.category-item-actions button{width:100%}}.category-management-layout{height:100%;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden}.saving-indicator{position:absolute;top:12px;right:50%;transform:translate(50%);background:#eff6ffe6;border:1px solid #bfdbfe;color:#1e40af;padding:4px 12px;border-radius:20px;font-size:.75rem;display:flex;align-items:center;gap:6px;z-index:100;pointer-events:none}.saving-indicator:before{content:"";width:10px;height:10px;border:2px solid #1e40af;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.category-page-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb}.category-page-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.category-toolbar-actions{display:flex;align-items:center;gap:12px}.category-search-container{position:relative;width:250px}.category-search-input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;outline:none;transition:border-color .2s}.category-search-input:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.category-management-content{display:flex;flex:1;overflow:hidden;height:100%;position:relative}.category-list-panel{flex:1;min-width:320px;max-width:450px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden}.panel-header{padding:12px 16px;border-bottom:1px solid #f3f4f6;flex-shrink:0}.panel-title{font-size:.95rem;font-weight:600;color:#374151;margin:0}.category-list-container{flex:1;overflow-y:auto;overflow-x:hidden}.category-list{padding:8px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;height:100%}.empty-icon{font-size:2.5rem;margin-bottom:8px;opacity:.4}.empty-title{font-size:1rem;font-weight:600;margin-bottom:4px}.empty-description{font-size:.8rem;color:#6b7280;max-width:200px;margin-bottom:16px}.category-preview-panel{flex:1;background:#f1f5f9;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:10px}.preview-header{display:none}.phone-preview-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.phone-frame{width:auto;height:95%;max-width:95%;aspect-ratio:9 / 19.5;background:#000;border-radius:48px;box-shadow:0 0 0 2px #333,0 20px 50px -10px #00000080;padding:12px;position:relative;overflow:hidden;display:flex;flex-direction:column;transform-origin:center center;transition:all .3s ease}.phone-notch{position:absolute;top:12px;left:50%;transform:translate(-50%);width:100px;height:28px;background:#000;border-radius:14px;z-index:20;pointer-events:none}.phone-content{flex:1;background:#fff;border-radius:36px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;position:relative}.phone-content::-webkit-scrollbar{display:none}.phone-notch:after{content:"";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#1c1c1e;border-radius:50%}.staff-category-sort-skeleton-item{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;gap:12px;padding:16px;animation:staff-category-sort-skeleton-pulse 1.5s ease-in-out infinite}.staff-category-sort-skeleton-handle{width:20px;height:48px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-shimmer 1.5s infinite;border-radius:4px;flex-shrink:0}.staff-category-sort-skeleton-content{flex:1;display:flex;align-items:center;gap:16px;min-width:0}.staff-category-sort-skeleton-main{flex:1;min-width:0}.staff-category-sort-skeleton-title{height:20px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-bottom:8px;width:70%}.staff-category-sort-skeleton-description{height:16px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-shimmer 1.5s infinite;border-radius:4px;margin-bottom:12px;width:90%}.staff-category-sort-skeleton-meta{display:flex;gap:12px}.staff-category-sort-skeleton-badge{height:24px;width:100px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-shimmer 1.5s infinite;border-radius:6px}.staff-category-sort-skeleton-button{width:60px;height:36px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb,#f3f4f6 75%);background-size:200% 100%;animation:staff-category-sort-skeleton-shimmer 1.5s infinite;border-radius:6px;flex-shrink:0}@keyframes staff-category-sort-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes staff-category-sort-skeleton-pulse{0%,to{opacity:1}50%{opacity:.8}}.category-list-container::-webkit-scrollbar{width:8px}.category-list-container::-webkit-scrollbar-track{background:#f3f4f6}.category-list-container::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.category-list-container::-webkit-scrollbar-thumb:hover{background:#9ca3af}.phone-content::-webkit-scrollbar{width:3px}.phone-content::-webkit-scrollbar-track{background:transparent}.phone-content::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.phone-content::-webkit-scrollbar-thumb:hover{background:#9ca3af}.loading-state{flex:1;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#6b7280}@media(max-width:1400px){.phone-frame{width:240px;aspect-ratio:240 / 480}}@media(max-width:1200px){.phone-frame{width:220px;aspect-ratio:220 / 440}}.preview-toggle-btn{display:flex;align-items:center;gap:8px}.preview-close-btn,.category-preview-panel.hidden{display:none}@media(max-width:1024px){.category-management-content{flex-direction:row}.preview-toggle-btn .btn-text{display:none}.category-list-panel{max-width:none;border-right:none;width:100%}.category-preview-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);height:100vh;padding:20px}.category-preview-panel.hidden{display:none}.category-preview-panel.visible{display:flex;animation:fadeIn .2s ease-out}.phone-frame{height:85vh;max-height:800px;box-shadow:0 25px 50px -12px #00000080}.preview-close-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#fff;border:none;color:#111827;cursor:pointer;z-index:1010;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:transform .2s}.preview-close-btn:hover{transform:scale(1.1);background:#f9fafb}}@media(max-width:768px){.category-management-header{padding:12px 16px;flex-direction:column;align-items:flex-start}.header-left{flex-direction:column;align-items:flex-start;width:100%;gap:12px}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}.category-list-panel{min-width:0}.phone-frame{max-height:calc(50vh - 70px)}}.add-edit-category-split-container{min-height:100vh;display:flex;flex-direction:row;background:#f9fafb}.category-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:#fff}.category-form-card{background:#fff;border-radius:16px;width:100%;max-width:520px;padding:40px}.category-form{display:flex;flex-direction:column;gap:24px}.category-preview-side{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(135deg,#eef2ff,#e0e7ff)}.category-preview{background:#f9fafb;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}.preview-image-container{width:100%;height:200px;overflow:hidden;background:#e5e7eb}.preview-category-name{font-size:1.5rem;font-weight:600;color:#111827;margin:0 0 12px}.preview-scope-badge{display:inline-block;font-size:13px;padding:6px 12px;background:#fff;border-radius:8px;color:#4b5563;font-weight:500}@media(max-width:1024px){.add-edit-category-split-container{flex-direction:column}.category-preview-side{display:none}.category-form-side{padding:24px 16px}}@media(max-width:640px){.form-row{grid-template-columns:1fr}}@media(max-width:480px){.category-form-card{padding:24px 20px}.form-title{font-size:1.75rem}.form-actions{flex-direction:column}}.add-edit-menuitem-split-container{min-height:100vh;display:flex;flex-direction:row;background:#f9fafb}.menuitem-form-side{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:32px;background:#fff;overflow-y:auto}.menuitem-form-card{background:#fff;border-radius:16px;width:100%;max-width:600px;padding:40px}.form-header{margin-bottom:32px}.form-title{font-size:2rem;font-weight:700;color:#111827;margin:16px 0 8px;letter-spacing:-.025em}.form-subtitle{font-size:1rem;color:#6b7280;margin:0}.menuitem-form{display:flex;flex-direction:column;gap:24px}.form-label{font-size:14px;font-weight:600;color:#374151}.required-label{color:#dc2626}.optional-label{font-size:13px;font-weight:400;color:#9ca3af}.form-textarea{padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;font-family:inherit;color:#111827;background:#fff;outline:none;transition:all .2s ease;resize:vertical}.form-textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-textarea:disabled{background:#f9fafb;cursor:not-allowed;color:#9ca3af}.form-select{padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;color:#111827;background:#fff;outline:none;transition:all .2s ease;cursor:pointer}.form-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-select:disabled{background:#f9fafb;cursor:not-allowed;color:#9ca3af}.form-select.error{border-color:#dc2626}.error-text{font-size:13px;color:#dc2626;margin-top:-4px}.field-help-text{font-size:13px;color:#6b7280;margin:4px 0 0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkbox-label{display:flex;align-items:center;gap:10px;font-size:15px;color:#374151;cursor:pointer}.form-checkbox{width:18px;height:18px;cursor:pointer}.form-actions{display:flex;gap:12px;margin-top:8px}.form-actions button{flex:1}.form-section{display:flex;flex-direction:column;gap:12px;padding:20px;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.section-title{font-size:16px;font-weight:600;color:#374151;margin:0}.dynamic-item-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.dynamic-item-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:#fff;border-radius:8px;border:1px solid #e5e7eb}.form-input{flex:1;min-width:150px;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#111827;background:#fff;outline:none;transition:all .2s ease}.form-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-input:disabled{background:#f9fafb;cursor:not-allowed;color:#9ca3af}.checkbox-label-inline{display:flex;align-items:center;gap:6px;font-size:14px;color:#374151;cursor:pointer;white-space:nowrap}.checkbox-label-inline input[type=checkbox]{width:16px;height:16px;cursor:pointer}.menuitem-preview-side{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:32px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);overflow-y:auto;position:sticky;top:0;max-height:100vh}.preview-card{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:480px;box-shadow:0 10px 25px -5px #0000001a}.preview-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0 0 24px}.menuitem-preview{background:#f9fafb;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}.preview-image-container{width:100%;height:240px;overflow:hidden;background:#e5e7eb}.preview-image{width:100%;height:100%;object-fit:cover}.preview-content{padding:20px}.preview-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:12px}.preview-item-name{font-size:1.5rem;font-weight:600;color:#111827;margin:0;flex:1}.preview-availability{padding:6px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.preview-availability.available{background:#c6f6d5;color:#22543d}.preview-availability.unavailable{background:#fed7d7;color:#742a2a}.preview-description{font-size:14px;color:#6b7280;margin:0 0 16px;line-height:1.6}.preview-category,.preview-prep-time,.preview-spice{display:inline-block;font-size:13px;padding:4px 10px;background:#fff;border-radius:8px;color:#4b5563;font-weight:500;margin-right:8px;margin-bottom:8px}.preview-pricing{display:flex;align-items:center;gap:12px;margin:16px 0}.preview-current-price{font-size:1.75rem;font-weight:700;color:#111827}.preview-original-price{font-size:1.25rem;color:#9ca3af;text-decoration:line-through}.preview-discount-price{font-size:1.75rem;font-weight:700;color:#dc2626}.preview-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.preview-tag{padding:4px 10px;background:#fff;border-radius:12px;font-size:12px;color:#6366f1;font-weight:500;border:1px solid #c7d2fe}.loading-state{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:18px;color:#718096}@media(max-width:1024px){.add-edit-menuitem-split-container{flex-direction:column}.menuitem-preview-side{display:none}.menuitem-form-side{padding:24px 16px}}@media(max-width:640px){.menuitem-form-card{padding:24px 20px}.form-title{font-size:1.75rem}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}}.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:8px}.preview-dietary{display:inline-block;font-size:13px;padding:4px 10px;background:#fff;border-radius:8px;color:#059669;font-weight:500;margin-right:8px;margin-bottom:8px;border:1px solid #d1fae5}.preview-section{margin:16px 0}.preview-section-title{font-size:13px;font-weight:600;color:#6b7280;margin:0 0 8px}.allergen-tag{background:#fef2f2!important;color:#991b1b!important;border:1px solid #fecaca!important}.nutrition-tag{background:#f0fdf4!important;color:#166534!important;border:1px solid #bbf7d0!important}.radio-card-group{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}.radio-card{position:relative;cursor:pointer;border:2px solid #e5e7eb;border-radius:12px;padding:20px;background:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.radio-card:hover{border-color:#6366f1;background:#f5f3ff}.radio-card.selected{border-color:#6366f1;background:#eef2ff;box-shadow:0 0 0 3px #6366f11a}.radio-card-input{position:absolute;opacity:0;width:0;height:0}.radio-card-content{display:flex;flex-direction:column;align-items:center;gap:8px}.radio-card-icon{font-size:2rem}.radio-card-label{font-size:15px;font-weight:600;color:#374151}.radio-card.selected .radio-card-label{color:#6366f1}.selection-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:8px}.selection-card-grid.two-column{grid-template-columns:repeat(2,1fr)}.selection-card{position:relative;cursor:pointer;border:2px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.selection-card:hover:not(:disabled){border-color:#6366f1;background:#f5f3ff;transform:translateY(-2px)}.selection-card.selected{border-color:#6366f1;background:#eef2ff;box-shadow:0 0 0 3px #6366f11a}.selection-card.error{border-color:#dc2626}.selection-card:disabled{opacity:.5;cursor:not-allowed}.selection-card-icon{font-size:2rem;line-height:1}.selection-card-label{font-size:13px;font-weight:600;color:#374151}.selection-card.selected .selection-card-label{color:#6366f1}.checkbox-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:8px}.checkbox-card{position:relative;cursor:pointer;border:2px solid #e5e7eb;border-radius:10px;padding:12px 16px;background:#fff;transition:all .2s ease;display:flex;align-items:center}.checkbox-card:hover{border-color:#6366f1;background:#f5f3ff}.checkbox-card.selected{border-color:#6366f1;background:#eef2ff}.checkbox-card-input{position:absolute;opacity:0;width:0;height:0}.checkbox-card-content{display:flex;align-items:center;gap:10px;width:100%}.checkbox-card-check{width:20px;height:20px;border:2px solid #d1d5db;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;background:#fff;transition:all .2s ease;flex-shrink:0}.checkbox-card.selected .checkbox-card-check{background:#6366f1;border-color:#6366f1;color:#fff}.checkbox-card-label{font-size:14px;font-weight:500;color:#374151;flex:1}.checkbox-card.selected .checkbox-card-label{color:#6366f1;font-weight:600}@media(max-width:640px){.selection-card-grid{grid-template-columns:repeat(2,1fr)}.checkbox-card-grid,.radio-card-group{grid-template-columns:1fr}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.permissions-modal{width:1200px}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 32px;border-bottom:1px solid #e5e7eb}.modal-title{font-size:24px;font-weight:600;color:#111827;margin:0}.modal-subtitle{font-size:14px;color:#6b7280;margin:4px 0 0}.modal-close{background:none;border:none;cursor:pointer;color:#6b7280;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.modal-close:hover{background-color:#f3f4f6;color:#111827}.modal-body{flex:1;overflow-y:auto;padding:24px 32px}.loading-state,.error-message{padding:40px;text-align:center;color:#6b7280}.error-message{color:#dc2626;background-color:#fee2e2;border-radius:8px;padding:16px}.permissions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px}.permission-category{border:1px solid #e5e7eb;border-radius:8px;padding:16px;background:#f9fafb}.category-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.category-header h3{font-size:16px;font-weight:600;color:#111827;margin:0}.toggle-all-btn{background:none;border:1px solid #d1d5db;color:#6b7280;font-size:12px;padding:4px 12px;border-radius:4px;cursor:pointer;transition:all .2s}.toggle-all-btn:hover{background-color:#e5e7eb;color:#111827;border-color:#9ca3af}.permission-items{display:flex;flex-direction:column;gap:12px}.permission-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s}.permission-checkbox:hover{background-color:#fff}.permission-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#6366f1}.permission-checkbox span{font-size:14px;color:#374151;-webkit-user-select:none;user-select:none}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 32px;border-top:1px solid #e5e7eb;background:#f9fafb}@media(max-width:1024px){.permissions-modal{width:100%}.permissions-grid{grid-template-columns:1fr}}@media(max-width:640px){.modal-header,.modal-body,.modal-footer{padding:16px 20px}.modal-title{font-size:20px}.permission-category{padding:12px}}.staff-list-container{padding:32px;max-width:1400px;margin:0 auto;background:#f9fafb;min-height:100vh}.staff-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.staff-list-title{font-size:1.875rem;font-weight:700;color:#111827;margin:0 0 4px}.staff-list-subtitle{font-size:.875rem;color:#6b7280;margin:0}.staff-list-header button{display:flex;align-items:center;gap:8px}.staff-list-filters{display:flex;gap:16px;margin-bottom:24px;background:#fff;padding:20px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.search-box{flex:1;position:relative}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af}.search-input{width:100%;padding:10px 12px 10px 40px;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:border-color .2s}.search-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.role-filter{padding:10px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;background:#fff;cursor:pointer;min-width:180px;transition:border-color .2s}.role-filter:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.staff-table-container{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.staff-table{width:100%;border-collapse:collapse}.staff-table thead{background:#f9fafb;border-bottom:2px solid #e5e7eb}.staff-table th{padding:16px;text-align:left;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.staff-table tbody tr{border-bottom:1px solid #e5e7eb;transition:background-color .2s}.staff-table tbody tr:hover{background:#f9fafb}.staff-table tbody tr:last-child{border-bottom:none}.staff-table td{padding:16px;font-size:.875rem;color:#374151}.staff-name{font-weight:600;color:#111827}.staff-email,.staff-phone{color:#6b7280}.role-badge{display:inline-block;padding:4px 12px;background:#eef2ff;color:#4f46e5;border-radius:12px;font-size:.75rem;font-weight:500}.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:500}.status-badge.active{background:#dcfce7;color:#166534}.status-badge.inactive{background:#fee2e2;color:#991b1b}.action-buttons{display:flex;gap:8px}.icon-button{padding:8px;border:none;background:transparent;cursor:pointer;border-radius:6px;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.icon-button:hover{background:#f3f4f6}.icon-button.edit{color:#6366f1}.icon-button.edit:hover{background:#eef2ff}.icon-button.permissions{color:#10b981}.icon-button.permissions:hover{background:#d1fae5}.icon-button.delete{color:#dc2626}.icon-button.delete:hover{background:#fee2e2}.empty-state{text-align:center;padding:80px 24px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.empty-state p{font-size:1rem;color:#6b7280;margin:0 0 24px}.staff-count{margin-top:16px;text-align:center;font-size:.875rem;color:#6b7280}.loading-state{text-align:center;padding:80px 24px;font-size:1rem;color:#6b7280}@media(max-width:768px){.staff-list-container{padding:16px}.staff-list-header{flex-direction:column;gap:16px;align-items:flex-start}.staff-list-header button{width:100%;justify-content:center}.staff-list-filters{flex-direction:column}.role-filter{width:100%}.staff-table-container{overflow-x:auto}.staff-table{min-width:800px}}.add-staff-container{padding:32px;max-width:900px;margin:0 auto;background:#f9fafb;min-height:100vh}.add-staff-header{margin-bottom:24px}.add-staff-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000001a;padding:40px}.add-staff-card-header{margin-bottom:32px;text-align:center}.add-staff-title{font-size:1.875rem;font-weight:700;color:#111827;margin:0 0 8px}.add-staff-subtitle{font-size:.875rem;color:#6b7280;margin:0}.add-staff-form{display:flex;flex-direction:column;gap:32px}@media(max-width:768px){.add-staff-container{padding:16px}.add-staff-card{padding:24px}.add-staff-title{font-size:1.5rem}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}.edit-staff-container{padding:32px;max-width:900px;margin:0 auto;background:#f9fafb;min-height:100vh}.edit-staff-header{margin-bottom:24px}.back-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;font-size:.875rem;color:#374151;cursor:pointer;transition:all .2s}.back-button:hover{background:#f9fafb;border-color:#d1d5db}.edit-staff-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000001a;padding:40px}.edit-staff-card-header{margin-bottom:32px;text-align:center}.edit-staff-title{font-size:1.875rem;font-weight:700;color:#111827;margin:0 0 8px}.edit-staff-subtitle{font-size:.875rem;color:#6b7280;margin:0}.error-banner{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px 16px;border-radius:8px;margin-bottom:24px;text-align:center}.edit-staff-form{display:flex;flex-direction:column;gap:32px}.form-section{display:flex;flex-direction:column;gap:20px}.section-title{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 8px;padding-bottom:8px;border-bottom:2px solid #e5e7eb}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:.875rem;font-weight:500;color:#374151}.form-select{padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;background:#fff;cursor:pointer;transition:border-color .2s}.form-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.form-select:disabled{background:#f3f4f6;cursor:not-allowed}.form-helper-text{font-size:.75rem;color:#6b7280;margin:0}.form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:24px;border-top:1px solid #e5e7eb}.form-actions button{min-width:140px}.loading-state,.error-state{text-align:center;padding:80px 24px;font-size:1rem;color:#6b7280}.error-state{color:#dc2626}@media(max-width:768px){.edit-staff-container{padding:16px}.edit-staff-card{padding:24px}.edit-staff-title{font-size:1.5rem}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}.role-permissions-layout{height:100%;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden}.error-banner{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:8px 16px;text-align:center;font-size:.85rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px}.success-banner{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:8px 16px;text-align:center;font-size:.85rem;flex-shrink:0}.permissions-page-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb;flex-shrink:0}.permissions-page-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.permissions-toolbar-actions{display:flex;align-items:center;gap:16px}.role-selector-wrapper{display:flex;align-items:center;gap:8px}.role-selector-label{font-size:.875rem;font-weight:500;color:#6b7280}.role-selector{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;background:#fff;cursor:pointer;outline:none;min-width:180px;transition:all .2s}.role-selector:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.role-permissions-content{flex:1;overflow-y:auto;padding:24px}.permissions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px;max-width:1400px;margin:0 auto}.permission-category-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;display:flex;flex-direction:column;transition:all .2s ease}.permission-category-card:hover{border-color:#d1d5db;box-shadow:0 4px 6px -1px #0000000d}.category-header{padding:16px 20px;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;align-items:flex-start}.category-title{font-size:1rem;font-weight:600;color:#111827;margin:0 0 4px}.category-description{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.select-all-button{font-size:.75rem;color:#2563eb;background:none;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s;white-space:nowrap}.select-all-button:hover{background:#eff6ff}.permissions-list{padding:16px 20px;display:flex;flex-direction:column;gap:8px}.permission-checkbox-label{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background-color .2s}.permission-checkbox-label:hover{background:#f9fafb}.permission-checkbox{width:16px;height:16px;border-radius:4px;border:1px solid #d1d5db;cursor:pointer;accent-color:#2563eb}.permission-label-text{font-size:.875rem;color:#374151}.loading-state{display:flex;align-items:center;justify-content:center;height:200px;color:#6b7280}@media(max-width:768px){.permissions-page-toolbar{flex-direction:column;align-items:flex-start;gap:16px;padding:16px}.permissions-toolbar-actions{width:100%;flex-direction:column;align-items:flex-start}.role-selector-wrapper{width:100%}.role-selector{flex:1}.save-btn{width:100%}.permissions-grid{grid-template-columns:1fr;padding:16px}}.branch-selection-container{padding:2rem;max-width:1400px;margin:0 auto;min-height:100vh;background-color:#f8f9fa}.branch-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.header-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.page-title{font-size:1.75rem;font-weight:700;color:#1a202c;margin:0}.header-actions{display:flex;gap:.75rem;align-items:center}.loading-state,.error-banner,.empty-state{padding:2rem;text-align:center;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.error-banner{background-color:#fee;color:#c33;margin-bottom:1rem}.branches-section{margin-top:1.5rem}.branches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.branch-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;transition:all .3s ease;cursor:pointer;border:2px solid transparent}.branch-card:hover{box-shadow:0 4px 16px #0000001f;border-color:#3182ce;transform:translateY(-2px)}.branch-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.branch-name{font-size:1.25rem;font-weight:600;color:#1a202c;margin:0}.branch-status{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.branch-status.active{background-color:#c6f6d5;color:#22543d}.branch-status.inactive{background-color:#fed7d7;color:#742a2a}.branch-info{margin-bottom:1.5rem}.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f7fafc}.info-label{font-weight:600;color:#718096;font-size:.875rem}.info-value{color:#2d3748;font-size:.875rem;text-align:right}.branch-stats{display:flex;gap:1rem;margin-bottom:1.5rem;padding:1rem;background-color:#f7fafc;border-radius:8px}.stat-item{display:flex;align-items:center;gap:.75rem;flex:1}.stat-icon{font-size:2rem}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:1.5rem;font-weight:700;color:#2d3748;line-height:1}.stat-label{font-size:.75rem;color:#718096;text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.branch-action{display:flex;justify-content:center}.branch-action button{width:100%}@media(max-width:768px){.branch-selection-container{padding:1rem}.branch-header{flex-direction:column;align-items:flex-start}.branches-grid{grid-template-columns:1fr}.page-title{font-size:1.5rem}}.qr-code-modal-component-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.qr-code-modal-component-content{background:#fff;border-radius:12px;box-shadow:0 4px 24px #00000026;max-width:1000px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.qr-code-modal-component-content.qr-preview-only{max-width:600px}.qr-code-modal-component-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e2e8f0;flex-shrink:0}.qr-code-modal-component-title{font-size:1.5rem;font-weight:600;color:#1a202c;margin:0}.qr-code-modal-component-close{background:none;border:none;font-size:2rem;color:#718096;cursor:pointer;transition:color .2s;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}.qr-code-modal-component-close:hover{color:#1a202c}.qr-code-modal-component-body{flex:1;overflow-y:auto;padding:1.5rem}.qr-code-modal-component-loading,.qr-code-modal-component-error{text-align:center;padding:3rem 1.5rem;color:#64748b;font-size:1rem}.qr-code-modal-component-error{color:#dc2626}.qr-preview-simple-layout{display:flex;flex-direction:column;gap:2rem}.qr-display-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.qr-code-display-centered{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:.75rem}.qr-preview-hint{text-align:center;font-size:.875rem;color:#64748b;margin:0}.qr-info-section{display:flex;flex-direction:column;gap:1.5rem}.qr-info-card{background:#f8fafc;border-radius:.5rem;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.qr-info-row{display:flex;justify-content:space-between;align-items:center}.qr-info-label{font-size:.875rem;color:#64748b;font-weight:500}.qr-info-value{font-size:.875rem;color:#1e293b;font-weight:600}.qr-url-section{display:flex;flex-direction:column;gap:.5rem}.qr-url-label{font-size:.875rem;font-weight:600;color:#475569}.qr-url-input-group{display:flex;gap:.5rem}.qr-url-input{flex:1;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:.5rem;font-size:.875rem;font-family:monospace;background:#f8fafc;color:#475569}.qr-modal-footer{display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem;border-top:1px solid #e2e8f0;flex-shrink:0}@media(max-width:640px){.qr-modal-footer{flex-direction:column}.qr-modal-footer button{width:100%}}.table-management-layout{height:100%;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden}.table-page-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb}.table-page-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.table-toolbar-actions{display:flex;align-items:center;gap:12px}.table-filter-container{display:flex;align-items:center}.table-filter-select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;color:#374151;background:#fff;cursor:pointer;outline:none;min-width:150px;transition:border-color .2s}.table-filter-select:hover{border-color:#9ca3af}.table-filter-select:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.table-management-content{display:flex;flex:1;overflow:hidden;height:100%;position:relative}.table-list-panel{flex:1;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden;width:100%}.panel-header{padding:12px 24px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center}.panel-title{font-size:.95rem;font-weight:600;color:#6b7280;margin:0;text-transform:uppercase;letter-spacing:.05em}.table-list-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 24px 24px}.tables-by-location{display:flex;flex-direction:column;gap:20px}.location-group{background:#fff;border-radius:8px;border:1px solid #e5e7eb;overflow:hidden}.location-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:linear-gradient(to right,#f9fafb,#fff);border-bottom:2px solid #e5e7eb}.location-name{font-size:1rem;font-weight:600;color:#111827;margin:0;display:flex;align-items:center;gap:8px}.location-count{font-size:.8rem;font-weight:600;color:#6b7280;background:#fff;padding:5px 12px;border-radius:12px;border:1px solid #e5e7eb}.location-tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:20px}.table-card-compact{background:#fff;border:2px solid #e5e7eb;border-radius:10px;overflow:hidden;transition:all .25s ease;display:flex;flex-direction:column;position:relative}.table-card-compact:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;transition:width .25s ease}.table-card-compact.status-available:before{background:linear-gradient(to bottom,#10b981,#059669)}.table-card-compact.status-occupied:before{background:linear-gradient(to bottom,#ef4444,#dc2626)}.table-card-compact.status-reserved:before{background:linear-gradient(to bottom,#f59e0b,#d97706)}.table-card-compact.status-maintenance:before{background:linear-gradient(to bottom,#6b7280,#4b5563)}.table-card-compact:hover{border-color:#d1d5db;box-shadow:0 4px 12px #0000001a;transform:translateY(-3px)}.table-card-compact:hover:before{width:6px}.table-card-main{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}.table-card-top{display:flex;justify-content:space-between;align-items:center}.table-number-compact{font-size:1.35rem;font-weight:700;color:#111827;letter-spacing:-.02em}.status-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px #0000000d;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.status-dot.status-available{background:#10b981;box-shadow:0 0 0 3px #10b98133}.status-dot.status-occupied{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.status-dot.status-reserved{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}.status-dot.status-maintenance{background:#6b7280;box-shadow:0 0 0 3px #6b728033}.table-capacity{display:flex;align-items:center;justify-content:center;gap:2px;padding:8px 10px;background:#f9fafb;border-radius:8px;font-size:.95rem;font-weight:600;color:#374151;border:1px solid #e5e7eb;flex-wrap:wrap}.person-icon{font-size:1rem;line-height:1}.status-select-compact{width:100%;padding:8px 10px;border:2px solid #e5e7eb;border-radius:8px;font-size:.8rem;color:#374151;background:#fff;cursor:pointer;outline:none;font-weight:600;transition:all .2s ease}.status-select-compact:hover{background:#f9fafb;border-color:#9ca3af}.status-select-compact:focus{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px #2563eb1a}.table-card-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;background:#f9fafb;border-top:2px solid #e5e7eb}.table-card-actions button{font-size:.75rem;padding:8px 10px;min-width:0;font-weight:600;border-radius:6px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;height:100%;color:#6b7280}.empty-icon{font-size:2.5rem;margin-bottom:16px;opacity:.5}.empty-title{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:#374151}.empty-description{font-size:.9rem;margin-bottom:24px;max-width:300px}.table-list-container::-webkit-scrollbar{width:8px}.table-list-container::-webkit-scrollbar-track{background:transparent}.table-list-container::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.table-list-container::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(max-width:1024px){.location-tables-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media(max-width:768px){.table-page-toolbar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.table-toolbar-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.table-filter-container{width:100%;margin-bottom:8px}.table-filter-select{width:100%}.table-list-container{padding:0 16px 16px}.location-tables-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px}.tables-by-location{gap:16px}.table-card-main{padding:14px}}@media(max-width:480px){.location-tables-grid{grid-template-columns:1fr 1fr}.table-number-compact{font-size:1.2rem}}.qr-management-layout{height:100%;background:#f9fafb;display:flex;flex-direction:column;overflow:hidden}.qr-page-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-bottom:1px solid #e5e7eb;flex-shrink:0}.qr-page-title{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.qr-toolbar-actions{display:flex;align-items:center;gap:12px}.error-banner{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:6px 16px;text-align:center;font-size:.8rem;flex-shrink:0}.success-banner{background:#ecfdf5;border:1px solid #d1fae5;color:#065f46;padding:6px 16px;text-align:center;font-size:.8rem;flex-shrink:0}.loading-state{display:flex;align-items:center;justify-content:center;height:100%;font-size:1rem;color:#6b7280}.qr-management-content{display:grid;grid-template-columns:1fr 450px;gap:24px;padding:24px;flex:1;min-height:0;overflow:hidden}.qr-settings-panel{background:#fff;border-radius:8px;padding:20px;border:1px solid #e5e7eb;overflow-y:auto;height:100%}.qr-section-title{font-size:1rem;font-weight:600;color:#111827;margin:0 0 12px}.qr-design-mode-section{margin-bottom:24px}.qr-design-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qr-design-mode-btn{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s}.qr-design-mode-btn:hover{border-color:#d1d5db;background:#f9fafb}.qr-design-mode-btn.active{border-color:#2563eb;background:#eff6ff}.mode-icon{font-size:1.75rem}.mode-name{font-weight:600;color:#111827;font-size:.95rem}.mode-desc{font-size:.8rem;color:#6b7280}.qr-mode-toggle{margin-bottom:20px;padding:12px;background:#f9fafb;border-radius:8px}.qr-mode-toggle label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500;color:#4b5563;font-size:.9rem}.qr-styles-section,.qr-templates-section{margin-bottom:20px}.qr-styles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.qr-style-button{display:flex;align-items:center;gap:10px;padding:10px;border:2px solid;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.85rem}.qr-style-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.qr-style-icon{font-size:1.4rem}.qr-style-name{font-weight:500}.qr-custom-controls{margin-bottom:20px}.qr-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qr-form-field{display:flex;flex-direction:column;gap:8px}.qr-form-label{font-size:.85rem;font-weight:500;color:#4b5563}.qr-color-input{width:100%;height:48px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer}.qr-template-categories{margin-bottom:20px}.qr-category-buttons{display:flex;gap:8px;flex-wrap:wrap}.qr-category-btn{padding:6px 12px;border:2px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:.8rem;font-weight:500;color:#4b5563;transition:all .2s;text-transform:capitalize}.qr-category-btn:hover{border-color:#d1d5db;background:#f9fafb}.qr-category-btn.active{border-color:#2563eb;background:#eff6ff;color:#1e40af}.qr-templates-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}.qr-template-button{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;text-align:left}.qr-template-button:hover{border-color:#d1d5db;background:#f9fafb}.qr-template-button.active{border-color:#2563eb;background:#eff6ff}.qr-template-icon{font-size:1.75rem}.qr-template-info{flex:1;display:flex;flex-direction:column;gap:4px}.qr-template-name{font-weight:600;color:#111827;font-size:.95rem}.qr-template-desc{font-size:.8rem;color:#6b7280}.qr-view-more-button{width:100%;padding:10px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;cursor:pointer;font-weight:500;color:#4b5563;font-size:.85rem;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.qr-view-more-button:hover{border-color:#9ca3af;background:#f9fafb}.qr-view-more-icon{font-size:.8rem}.qr-complexity-section{margin-bottom:20px}.qr-complexity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.qr-complexity-button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s}.qr-complexity-button:hover{border-color:#d1d5db;background:#f9fafb}.qr-complexity-button.active{border-color:#2563eb;background:#eff6ff}.complexity-level{font-size:1.1rem;font-weight:700;color:#111827}.complexity-label{font-size:.7rem;font-weight:500;color:#6b7280}.complexity-percent{font-size:.7rem;color:#9ca3af}.qr-preview-note{font-size:.8rem;color:#6b7280;margin:0}.qr-logo-section{margin-bottom:20px}.qr-file-input{width:100%;padding:10px;border:2px dashed #d1d5db;border-radius:8px;background:#f9fafb;cursor:pointer;font-size:.85rem;margin-bottom:12px}.qr-logo-preview{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;border:2px solid #e5e7eb;border-radius:8px;background:#f9fafb;margin-bottom:12px}.qr-logo-preview-image{max-width:80px;max-height:80px;object-fit:contain}.qr-preview-panel{background:#fff;border-radius:8px;border:1px solid #e5e7eb;height:100%;overflow-y:auto;display:flex;flex-direction:column}.qr-preview-display{display:flex;justify-content:center;align-items:center;padding:24px;background:#f9fafb;border-radius:8px;margin:16px;flex-shrink:0}.qr-preview-hint{text-align:center;font-size:.8rem;color:#6b7280;margin:0 16px 16px;flex-shrink:0}.qr-settings-panel::-webkit-scrollbar,.qr-preview-panel::-webkit-scrollbar{width:8px}.qr-settings-panel::-webkit-scrollbar-track,.qr-preview-panel::-webkit-scrollbar-track{background:transparent}.qr-settings-panel::-webkit-scrollbar-thumb,.qr-preview-panel::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.qr-settings-panel::-webkit-scrollbar-thumb:hover,.qr-preview-panel::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(max-width:1024px){.qr-management-content{grid-template-columns:1fr;overflow-y:auto}.qr-settings-panel,.qr-preview-panel{height:auto;overflow-y:visible}}@media(max-width:768px){.qr-page-toolbar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.qr-toolbar-actions{width:100%}.qr-toolbar-actions button{flex:1}.qr-management-content{padding:16px}.qr-design-mode-buttons,.qr-styles-grid{grid-template-columns:1fr}.qr-complexity-grid{grid-template-columns:repeat(2,1fr)}}:root{--sidebar-width: 280px;--sidebar-collapsed-width: 80px;--sidebar-bg: #ffffff;--sidebar-text: #334155;--sidebar-text-active: #2563eb;--sidebar-bg-active: #eff6ff;--sidebar-border: #e2e8f0;--sidebar-hover: #f8fafc;--transition-speed: .3s}.staff-sidebar{position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;transition:width var(--transition-speed) ease,transform var(--transition-speed) ease;z-index:100;box-shadow:4px 0 24px #00000005}.staff-sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-header{height:70px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--sidebar-border);justify-content:space-between}.staff-sidebar.collapsed .sidebar-header{padding:0;justify-content:center}.logo-container{display:flex;align-items:center;gap:12px;overflow:hidden;white-space:nowrap}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;flex-shrink:0}.company-name{font-size:18px;font-weight:700;color:#0f172a;opacity:1;transition:opacity var(--transition-speed)}.staff-sidebar.collapsed .company-name{opacity:0;width:0;display:none}.toggle-btn{background:transparent;border:1px solid #e2e8f0;cursor:pointer;color:#64748b;padding:4px;border-radius:6px;transition:all .2s;display:flex;align-items:center;justify-content:center}.toggle-btn:hover{background:var(--sidebar-hover);color:var(--sidebar-text);border-color:#cbd5e1}.staff-sidebar.collapsed .toggle-btn{display:flex;margin:0 auto;border:none}.mobile-close-btn{display:none;background:transparent;border:none;cursor:pointer;color:#64748b;padding:8px}.sidebar-nav{flex:1;padding:24px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;color:var(--sidebar-text);text-decoration:none;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}.staff-sidebar.collapsed .nav-item{justify-content:center;padding:12px}.nav-item:hover{background-color:var(--sidebar-hover);color:#0f172a;transform:translate(4px)}.staff-sidebar.collapsed .nav-item:hover{transform:none;background-color:var(--sidebar-hover)}.nav-item.active{background-color:var(--sidebar-bg-active);color:var(--sidebar-text-active);font-weight:600}.nav-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:20px;width:3px;background-color:var(--sidebar-text-active);border-radius:0 4px 4px 0}.staff-sidebar.collapsed .nav-item.active:before{display:none}.nav-icon{width:20px;height:20px;flex-shrink:0}.nav-label{font-size:15px;white-space:nowrap;opacity:1;transition:opacity .2s}.staff-sidebar.collapsed .nav-label{display:none}.nav-item.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.coming-soon-badge{font-size:10px;background:#f1f5f9;color:#64748b;padding:2px 6px;border-radius:4px;margin-left:auto}.staff-sidebar.collapsed .coming-soon-badge{display:none}.sidebar-footer{padding:20px;border-top:1px solid var(--sidebar-border);background:#f8fafc}.staff-sidebar.collapsed .sidebar-footer{padding:12px;display:flex;flex-direction:column;align-items:center}.logout-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid #e2e8f0;background:#fff;border-radius:8px;color:#ef4444;font-weight:500;cursor:pointer;transition:all .2s}.logout-btn:hover{background:#fef2f2;border-color:#fee2e2}.staff-sidebar.collapsed .logout-btn{padding:10px;width:40px;height:40px}.logout-text{display:block}.staff-sidebar.collapsed .logout-text,.mobile-toggle{display:none}@media(max-width:768px){.staff-sidebar{transform:translate(-100%);width:280px;box-shadow:none}.staff-sidebar.mobile-open{transform:translate(0);box-shadow:4px 0 24px #00000026}.staff-sidebar.collapsed{width:280px}.mobile-close-btn{display:block}.toggle-btn{display:none}.mobile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:90;display:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.mobile-overlay.open{display:block}}.nav-group{display:flex;flex-direction:column;gap:4px;position:relative}.nav-chevron{margin-left:auto;color:#94a3b8;display:flex;align-items:center;transition:transform .3s ease}.nav-item.expanded .nav-chevron{transform:rotate(90deg)}.sub-menu{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s cubic-bezier(.25,.8,.25,1),opacity .3s ease-out,margin-top .3s ease;display:flex;flex-direction:column;gap:2px;margin-left:16px;margin-top:0}.sub-menu.open{max-height:300px;opacity:1;margin-top:4px;padding-bottom:4px}.sub-nav-item{display:flex;align-items:center;gap:12px;border-radius:8px;color:#64748b;text-decoration:none;transition:all .2s ease;cursor:pointer;font-size:14px;position:relative;padding:8px 12px 8px 24px}.sub-nav-item:hover{background-color:var(--sidebar-hover);color:#0f172a;transform:translate(4px)}.sub-nav-item.active{background-color:transparent;color:var(--sidebar-text-active);font-weight:500}.sub-nav-item:before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background-color:#cbd5e1;transition:background-color .2s}.sub-nav-item:hover:before{background-color:#94a3b8}.sub-nav-item.active:before{background-color:var(--sidebar-text-active);width:8px;height:8px}.staff-sidebar.collapsed .sub-menu,.staff-sidebar.collapsed .nav-chevron{display:none}.nav-item.active-parent{color:var(--sidebar-text-active);font-weight:600;background-color:transparent}.nav-item.active-parent .nav-icon{color:var(--sidebar-text-active)}.staff-navbar{height:70px;background:#fff;border-bottom:1px solid var(--sidebar-border);display:flex;align-items:center;padding:0 24px;justify-content:space-between;flex-shrink:0;transition:all .3s ease}.staff-navbar-left{display:flex;align-items:center;gap:16px;flex:1;min-width:0}.navbar-page-title{font-size:1.25rem;font-weight:600;color:#0f172a;margin-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navbar-toggle-btn{background:transparent;border:none;cursor:pointer;color:#64748b;padding:8px;border-radius:8px;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center}.navbar-toggle-btn:hover{background:#f1f5f9;color:#0f172a}.navbar-company-brand{display:flex;align-items:center;gap:12px}.navbar-logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;flex-shrink:0}.navbar-company-name{font-size:18px;font-weight:700;color:#0f172a;display:block}.staff-navbar-right{display:flex;align-items:center;gap:16px}.navbar-search{display:flex;align-items:center;background:#f1f5f9;border-radius:8px;padding:0 12px;height:40px;width:240px;transition:all .2s ease}.navbar-search:focus-within{background:#fff;box-shadow:0 0 0 2px #e2e8f0}.search-icon{color:#64748b;margin-right:8px}.search-input{border:none;background:transparent;width:100%;outline:none;font-size:.875rem;color:#0f172a}.search-input::placeholder{color:#94a3b8}.navbar-icon-btn{position:relative;background:transparent;border:none;cursor:pointer;color:#64748b;padding:8px;border-radius:8px;transition:all .2s;display:flex;align-items:center;justify-content:center}.navbar-icon-btn:hover{background:#f1f5f9;color:#0f172a}.notification-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;background:#ef4444;border-radius:50%;border:1px solid white}.profile-dropdown-trigger{display:flex;align-items:center;gap:12px;background:transparent;border:none;cursor:pointer;padding:4px;border-radius:8px;transition:background .2s}.profile-dropdown-trigger:hover{background:#f8fafc}.navbar-avatar{width:36px;height:36px;background:#eff6ff;color:#2563eb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;border:2px solid white;box-shadow:0 0 0 1px #e2e8f0}.navbar-user-info{text-align:left;display:none}@media(min-width:768px){.navbar-user-info{display:block}}.navbar-user-name{display:block;font-size:14px;font-weight:600;color:#0f172a}.navbar-user-role{display:block;font-size:11px;color:#64748b;text-transform:capitalize}@media(max-width:768px){.staff-navbar{padding:0 16px}.navbar-search,.navbar-page-title{display:none}}.staff-layout{display:flex;height:100vh;background-color:#f8fafc;overflow:hidden}.staff-layout-content-wrapper{flex:1;display:flex;flex-direction:column;margin-left:var(--sidebar-width);transition:margin-left .3s ease;width:calc(100% - var(--sidebar-width));height:100%;overflow:hidden}.staff-layout.collapsed .staff-layout-content-wrapper{margin-left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}.page-header{background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 24px}.page-header-top{margin-bottom:12px}.page-breadcrumb{font-size:13px}.page-header-content{display:flex;justify-content:space-between;align-items:center;gap:16px}.page-title{font-size:24px;font-weight:600;color:#1e293b;margin:0}.page-actions{display:flex;gap:8px;align-items:center}.staff-main-content{flex:1;overflow-y:auto;overflow-x:hidden}@media(max-width:768px){.staff-layout-content-wrapper{margin-left:0!important;width:100%!important}.page-header{padding:12px 16px}.page-title{font-size:20px}.page-header-content{flex-direction:column;align-items:flex-start;gap:12px}}.pub-nav-container{background-color:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px #0000000d}.pub-nav-content{max-width:1200px;margin:0 auto;padding:1rem;display:flex;align-items:center;justify-content:space-between}.pub-nav-left{display:flex;align-items:center;gap:.75rem}.pub-nav-logo{width:40px;height:40px;border-radius:8px;object-fit:cover}.pub-nav-details{display:flex;flex-direction:column}.pub-nav-name{font-size:1.125rem;font-weight:700;color:#1a202c;margin:0;line-height:1.2}.pub-nav-right{display:flex;align-items:center}.pub-nav-table-badge{display:flex;align-items:center;gap:.5rem;background-color:#f7fafc;padding:.5rem .875rem;border-radius:20px;border:1px solid #e2e8f0}.pub-nav-table-label{font-size:.75rem;color:#718096;font-weight:500}.pub-nav-table-number{font-size:.875rem;color:#2d3748;font-weight:700}@media(max-width:480px){.pub-nav-content{padding:.75rem 1rem}.pub-nav-logo{width:32px;height:32px}.pub-nav-name{font-size:1rem}.pub-nav-table-badge{padding:.375rem .625rem}.pub-nav-table-label{font-size:.625rem}.pub-nav-table-number{font-size:.75rem}}.bottom-nav-container{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-top:1px solid #e2e8f0;box-shadow:0 -2px 8px #00000014;z-index:100;padding:.5rem 0}.bottom-nav-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-around;align-items:center}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 1rem;background:none;border:none;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit;flex:1;max-width:100px}.bottom-nav-item:hover{background-color:#f7fafc}.bottom-nav-item.active{color:#1a202c}.bottom-nav-item:not(.active){color:#718096}.bottom-nav-icon{font-size:1.5rem;transition:transform .2s}.bottom-nav-item.active .bottom-nav-icon{transform:scale(1.1)}.bottom-nav-label{font-size:.75rem;font-weight:600;white-space:nowrap}.bottom-nav-cart-badge{position:absolute;top:.25rem;right:.5rem;background-color:#e53e3e;color:#fff;font-size:.625rem;font-weight:700;padding:.125rem .375rem;border-radius:10px;min-width:18px;text-align:center}@media(max-width:480px){.bottom-nav-container{padding:.375rem 0}.bottom-nav-item{padding:.375rem .5rem}.bottom-nav-icon{font-size:1.375rem}.bottom-nav-label{font-size:.6875rem}}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;background-color:#f8f9fa}.spinner{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#3182ce;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen p{margin-top:1rem;color:#718096;font-size:1rem}.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;background-color:#f8f9fa}.error-screen h2{color:#e53e3e;margin-bottom:.5rem;font-size:1.5rem}.error-screen p{color:#718096}.public-layout{height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5;overflow:hidden}.public-layout.in-game{background-color:#000}.public-main{flex:1;overflow-y:auto;position:relative;display:flex;flex-direction:column}.game-back-button{position:absolute;top:1rem;left:1rem;z-index:1000;display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50px;color:#fff;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #0000004d}.game-back-button:active{transform:scale(.95);background:#ffffff40}.public-category-filter-container{background-color:#fff;position:fixed;top:68px;z-index:90;padding:0rem 0;margin:0;box-shadow:0 2px 8px #0000000a;width:100%}.public-category-filter-scroll{display:flex;padding:0 1rem;overflow-x:auto;max-width:1200px;margin:0 auto;scrollbar-width:none;-ms-overflow-style:none}.public-category-filter-scroll::-webkit-scrollbar{display:none}.public-category-filter-btn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.75rem .5rem;background-color:transparent;border:none;cursor:pointer;transition:all .2s;min-width:70px}.public-category-filter-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background-color:#f7fafc;transition:all .2s;overflow:hidden}.public-category-filter-btn.active .public-category-filter-icon{background-color:#1a202c}.public-category-filter-btn:hover .public-category-filter-icon{transform:scale(1.05)}.public-category-filter-emoji{font-size:1.5rem}.public-category-filter-btn.active .public-category-filter-emoji{filter:grayscale(100%) brightness(3)}.public-category-filter-img{width:100%;height:100%;object-fit:cover}.public-category-filter-name{font-size:.75rem;font-weight:600;color:#4a5568;text-align:center;white-space:nowrap;transition:color .2s}.public-category-filter-btn.active .public-category-filter-name{color:#1a202c}@media(max-width:768px){.public-category-filter-container{top:52px}.public-category-filter-icon{width:44px;height:44px}.public-category-filter-btn{min-width:65px}}.public-category-grid-section{margin-bottom:2rem}.public-category-grid-title{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0 0 1.25rem}.public-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;grid-auto-rows:140px;grid-auto-flow:dense}.public-category-grid-card{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 8px #00000014}.public-category-grid-card.large{grid-row:span 2}.public-category-grid-card.small{grid-row:span 1}.public-category-grid-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px #0000002e;z-index:10}.public-category-grid-card-image{width:100%;height:100%;object-fit:cover}.public-category-grid-card-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f7fafc,#edf2f7);display:flex;align-items:center;justify-content:center}.public-category-grid-placeholder-icon{font-size:3rem}.public-category-grid-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:1rem;color:#fff}.public-category-grid-card-name{font-size:1rem;font-weight:700;margin:0 0 .25rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.public-category-grid-card-count{font-size:.75rem;margin:0;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.public-category-grid{gap:.75rem;grid-auto-rows:120px}.public-category-grid-title{font-size:1.25rem}.public-category-grid-card-name{font-size:.9375rem}}.menu-item-card-horizontal{background-color:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px #0000000f;transition:transform .2s,box-shadow .2s;cursor:pointer;display:flex;gap:1rem;padding:.75rem}.menu-item-card-horizontal:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.menu-item-card-horizontal.unavailable{opacity:.6;cursor:not-allowed}.menu-item-card-image-wrapper{position:relative;flex-shrink:0;width:100px;height:100px;border-radius:12px;overflow:hidden;background-color:#f7fafc}.menu-item-card-image-horizontal{width:100%;height:100%;object-fit:cover}.menu-item-card-image-placeholder-horizontal{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f7fafc,#edf2f7);font-size:2rem}.menu-item-card-unavailable-overlay{position:absolute;top:.375rem;right:.375rem;background-color:#000000bf;color:#fff;padding:.25rem .5rem;border-radius:8px;font-size:.625rem;font-weight:700}.menu-item-card-info-horizontal{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.menu-item-card-top-row{display:flex;gap:.5rem}.menu-item-card-text-content{flex:1;min-width:0}.menu-item-card-name-horizontal{font-size:1rem;font-weight:700;color:#1a202c;margin:0 0 .25rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.menu-item-card-description-horizontal{font-size:.75rem;color:#718096;line-height:1.4;margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.menu-item-card-meta-horizontal{display:flex;flex-wrap:wrap;gap:.375rem}.menu-item-card-meta-badge{font-size:.625rem;padding:.25rem .5rem;background-color:#f7fafc;color:#4a5568;border-radius:8px;font-weight:600;white-space:nowrap}.menu-item-card-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.menu-item-card-price-horizontal{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.menu-item-card-current-price-horizontal{font-size:1.125rem;font-weight:700;color:#1a202c}.menu-item-card-discount-price-horizontal{font-size:1.125rem;font-weight:700;color:#38a169}.menu-item-card-original-price-horizontal{font-size:.75rem;color:#a0aec0;text-decoration:line-through}.menu-item-card-quantity-control{display:flex;align-items:center;gap:.5rem;background-color:#f7fafc;border-radius:20px;padding:.25rem}.menu-item-card-quantity-btn-minus,.menu-item-card-quantity-btn-plus{width:28px;height:28px;border-radius:50%;background-color:#fff;border:1px solid #e2e8f0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#2d3748;font-weight:600;transition:all .2s}.menu-item-card-quantity-btn-plus{background-color:#1a202c;color:#fff;border-color:#1a202c}.menu-item-card-quantity-btn-minus:hover,.menu-item-card-quantity-btn-plus:hover{transform:scale(1.05)}.menu-item-card-quantity-display{font-size:.875rem;font-weight:700;color:#1a202c;min-width:20px;text-align:center}@media(max-width:480px){.menu-item-card-horizontal{gap:.75rem;padding:.625rem}.menu-item-card-image-wrapper{width:90px;height:90px}.menu-item-card-name-horizontal{font-size:.9375rem}.menu-item-card-description-horizontal{font-size:.6875rem}.menu-item-card-current-price-horizontal,.menu-item-card-discount-price-horizontal{font-size:1rem}.menu-item-card-quantity-btn-minus,.menu-item-card-quantity-btn-plus{width:24px;height:24px;font-size:.875rem}}.category-section-container{margin-bottom:2.5rem;scroll-margin-top:150px}.category-section-header{margin-bottom:1rem}.category-section-title{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 .375rem}.category-section-description{font-size:.875rem;color:#718096;margin:0;line-height:1.5}.category-section-items-list{display:flex;flex-direction:column;gap:.75rem}@media(max-width:768px){.category-section-container{margin-bottom:2rem}.category-section-title{font-size:1.125rem}.category-section-items-list{gap:.625rem}}.menu-item-details-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1000;animation:fadeIn .3s ease}.menu-item-details-drawer{position:fixed;right:0;top:0;bottom:0;width:100%;max-width:480px;background-color:#fff;z-index:1001;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s ease;box-shadow:-4px 0 20px #00000026}.menu-item-details-drawer.open{transform:translate(0)}.menu-item-details-header{display:flex;justify-content:flex-end;padding:1rem;border-bottom:1px solid #e2e8f0}.menu-item-details-close-btn{width:36px;height:36px;border-radius:50%;background-color:#f7fafc;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#4a5568;transition:background-color .2s}.menu-item-details-close-btn:hover{background-color:#e2e8f0}.menu-item-details-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.menu-item-details-image-section{position:relative;width:100%;padding-top:75%;background-color:#f7fafc}.menu-item-details-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.menu-item-details-image-indicators{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;gap:.5rem}.menu-item-details-image-indicator{width:8px;height:8px;border-radius:50%;background-color:#ffffff80;border:none;cursor:pointer;transition:background-color .2s;padding:0}.menu-item-details-image-indicator.active{background-color:#fff}.menu-item-details-info{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.menu-item-details-title-section{display:flex;flex-direction:column;gap:.75rem}.menu-item-details-title{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0;line-height:1.3}.menu-item-details-tags{display:flex;flex-wrap:wrap;gap:.5rem}.menu-item-details-tag{font-size:.75rem;padding:.375rem .75rem;background-color:#edf2f7;color:#4a5568;border-radius:12px;font-weight:600;text-transform:uppercase}.menu-item-details-description{font-size:.9375rem;color:#4a5568;line-height:1.6;margin:0}.menu-item-details-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem}.menu-item-details-meta-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background-color:#f7fafc;border-radius:8px}.menu-item-details-meta-icon{font-size:1.25rem}.menu-item-details-meta-text{font-size:.875rem;color:#2d3748;font-weight:500}.menu-item-details-allergen-section{padding:1rem;background-color:#fff5f5;border-radius:8px;border-left:4px solid #e53e3e}.menu-item-details-allergen-title{font-size:.875rem;font-weight:700;color:#c53030;margin:0 0 .5rem}.menu-item-details-allergen-text{font-size:.875rem;color:#742a2a;margin:0}.menu-item-details-variant-section{display:flex;flex-direction:column;gap:.75rem}.menu-item-details-variant-title{font-size:1rem;font-weight:600;color:#1a202c;margin:0}.menu-item-details-variant-options{display:flex;flex-direction:column;gap:.5rem}.menu-item-details-variant-option{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1rem;background-color:#f7fafc;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.menu-item-details-variant-option:hover{background-color:#edf2f7;border-color:#cbd5e0}.menu-item-details-variant-option.active{background-color:#1a202c;border-color:#1a202c}.menu-item-details-variant-option.active .menu-item-details-variant-name,.menu-item-details-variant-option.active .menu-item-details-variant-price{color:#fff}.menu-item-details-variant-name{font-size:.9375rem;font-weight:600;color:#2d3748}.menu-item-details-variant-price{font-size:.9375rem;font-weight:700;color:#2d3748}.menu-item-details-footer{padding:1rem 1.5rem;border-top:1px solid #e2e8f0;display:flex;gap:1rem;background-color:#fff}.menu-item-details-quantity-selector{display:flex;align-items:center;gap:.75rem;background-color:#f7fafc;border-radius:8px;padding:.5rem}.menu-item-details-quantity-btn{width:32px;height:32px;border-radius:50%;background-color:#fff;border:1px solid #e2e8f0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.125rem;color:#2d3748;font-weight:600;transition:all .2s}.menu-item-details-quantity-btn:hover{background-color:#edf2f7;border-color:#cbd5e0}.menu-item-details-quantity-value{font-size:1rem;font-weight:700;color:#1a202c;min-width:24px;text-align:center}.menu-item-details-add-to-cart-btn{flex:1;padding:.875rem 1.5rem;background-color:#1a202c;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .2s}.menu-item-details-add-to-cart-btn:hover:not(:disabled){background-color:#2d3748}.menu-item-details-add-to-cart-btn:disabled{background-color:#cbd5e0;cursor:not-allowed}@media(max-width:768px){.menu-item-details-drawer{max-width:100%;top:auto;transform:translateY(100%)}.menu-item-details-drawer.open{transform:translateY(0)}.menu-item-details-title{font-size:1.25rem}.menu-item-details-info{padding:1.25rem}.menu-item-details-footer{padding:1rem}}.menu-page-content{max-width:1200px;margin:0 auto;padding:1rem;background-color:#fff;position:relative;top:80px;overflow-y:auto}.wrapper-menu-page{width:100%;min-height:100vh;min-height:100%!important;background-color:#fff;bottom:0;padding-bottom:110px}.orders-page-wrapper{width:100%;height:100%}.orders-container{max-width:1200px;margin:0 auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.orders-container h2{text-align:center;color:#333;font-size:2rem;margin:0 0 1rem}.orders-container p{text-align:center;color:#666;font-size:1rem}.public-cart-page-wrapper{width:100%;height:100%}.public-cart-page-container{max-width:1200px;margin:0 auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.public-cart-page-container h2{text-align:center;color:#333;font-size:2rem;margin:0 0 1rem}.public-cart-page-container p{text-align:center;color:#666;font-size:1rem}.payment-page-wrapper{width:100%;height:100%}.payment-container{max-width:1200px;margin:0 auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.payment-container h2{text-align:center;color:#333;font-size:2rem;margin:0 0 1rem}.payment-container p{text-align:center;color:#666;font-size:1rem}.games-page{padding:1.5rem 1.5rem 5rem;min-height:calc(100vh - 120px);background:#f8fafc}.games-header{margin-bottom:2rem;text-align:center}.games-header h1{font-size:2rem;color:#1a202c;margin-bottom:.5rem}.games-header p{color:#718096}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;max-width:1200px;margin:0 auto}.game-card{background:#fff;border-radius:16px;padding:1.5rem;display:flex;align-items:center;gap:1.25rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;cursor:pointer;transition:all .2s ease;border:1px solid #e2e8f0;position:relative;overflow:hidden}.game-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-color:var(--accent-color)}.game-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--accent-color)}.game-icon{font-size:2.5rem;background:#f7fafc;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px}.game-info{flex:1}.game-info h3{font-size:1.25rem;color:#2d3748;margin-bottom:.25rem}.game-info p{font-size:.875rem;color:#4a5568;line-height:1.4}.game-arrow{font-size:1.5rem;color:#cbd5e0;transition:color .2s}.game-card:hover .game-arrow{color:var(--accent-color)}:root{--bg-dark: #0f0c18;--card-bg: #1d192e;--accent-primary: #a78bfa;--accent-secondary: #7c3aed;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--neon-glow: 0 0 15px rgba(167, 139, 250, .4)}.memory-game-container{min-height:100vh;background:radial-gradient(circle at top right,#1a1625,#0f0c18);color:#fff;padding:1.5rem 1.5rem 6rem;font-family:Outfit,sans-serif;display:flex;justify-content:center}.game-wrapper{width:100%;max-width:480px;display:flex;flex-direction:column;gap:2rem}.game-header-advanced{display:flex;flex-direction:column;gap:1.5rem}.game-nav{display:flex;justify-content:space-between;align-items:center}.game-title{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(to right,#fff,var(--accent-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.glass-btn{width:44px;height:44px;border-radius:12px;background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.glass-btn:hover{background:#ffffff1a;border-color:var(--accent-primary);transform:translateY(-2px)}.btn-icon{font-size:1.25rem}.game-stats-bar{display:flex;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);justify-content:center;align-items:center;gap:2rem}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-label{font-size:.65rem;font-weight:600;color:#94a3b8;letter-spacing:.1em}.stat-value{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-primary)}.stat-divider{width:1px;height:24px;background:var(--glass-border)}.memory-grid-advanced{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;perspective:1200px}.memory-card-advanced{aspect-ratio:.85;position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}.memory-card-advanced.flipped{transform:rotateY(180deg)}.memory-card-advanced.matched{cursor:default}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .3s ease}.card-front{background:var(--card-bg);border:1px solid var(--glass-border);box-shadow:0 4px 15px #0003}.memory-card-advanced:hover .card-front{border-color:#a78bfa4d;box-shadow:0 0 15px #a78bfa1a}.hexagon-container{position:relative;width:40px;height:40px;opacity:.4}.hexagon{width:100%;height:100%;background:var(--accent-secondary);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.hexagon-inner{position:absolute;top:10%;left:10%;width:80%;height:80%;background:var(--card-bg);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.card-texture{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h20L0 20z'/%3E%3C/g%3E%3C/svg%3E");opacity:.1}.card-back{background:linear-gradient(135deg,#2e2443,#1a1625);transform:rotateY(180deg);border:2px solid var(--accent-primary);box-shadow:inset 0 0 20px #a78bfa33}.matched .card-back{background:linear-gradient(135deg,#3d2b5e,#2e2443);border-color:#10b981;box-shadow:0 0 20px #10b98133}.icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.card-icon-main{font-size:2.5rem;z-index:2;filter:drop-shadow(0 0 10px rgba(0,0,0,.3))}.icon-glow{position:absolute;width:100%;height:100%;background:var(--accent-primary);filter:blur(25px);opacity:.3;border-radius:50%}.win-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f0c18cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .4s ease-out}.win-modal{background:linear-gradient(180deg,#2e2443,#1a1625);padding:3rem 2rem;border-radius:32px;width:90%;max-width:360px;text-align:center;border:1px solid var(--accent-primary);box-shadow:0 20px 50px #00000080,0 0 30px #a78bfa33;animation:slideUp .5s cubic-bezier(.16,1,.3,1)}.win-trophy{font-size:4rem;margin-bottom:1rem}.win-modal h2{font-size:2.25rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(to bottom,#fff,var(--accent-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.win-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}.win-stat{background:#ffffff08;padding:1rem;border-radius:16px;display:flex;flex-direction:column;gap:.25rem}.win-stat span{font-size:.75rem;color:#94a3b8;font-weight:600}.win-stat strong{font-size:1.25rem;color:#fff}.play-again-btn{width:100%;background:var(--accent-primary);color:var(--bg-dark);border:none;padding:1.25rem;border-radius:16px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s}.play-again-btn:hover{transform:scale(1.02);box-shadow:0 0 20px #a78bfa66}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:480px){.memory-grid-advanced{gap:8px}.card-icon-main{font-size:1.75rem}}.sg-wrap{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}.sg-canvas{display:block;width:100%;height:100%}.sg-hud{position:absolute;top:0;left:0;right:0;padding:1.4rem 1.6rem 0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:10}.sg-score-pill{font-family:Orbitron,monospace;font-size:clamp(2rem,8vw,3rem);font-weight:900;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.3),0 0 50px rgba(255,255,255,.1);line-height:1}.sg-speed-hint{font-family:Rajdhani,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.15em;color:#ffd32a;text-shadow:0 0 10px rgba(255,211,42,.5);min-height:1.2em;animation:fadeIn .3s ease}.sg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#04000fb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20}.sg-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:2.4rem 2.8rem;text-align:center;max-width:320px;width:90%;box-shadow:0 0 80px #0009,0 0 0 1px #ffffff0a inset;display:flex;flex-direction:column;align-items:center;gap:10px;animation:cardPop .4s cubic-bezier(.175,.885,.32,1.275)}.sg-icon-row{display:flex;gap:6px;margin-bottom:4px}.sg-block-icon{display:block;width:28px;height:16px;border-radius:4px;opacity:.85}.sg-title{font-family:Orbitron,monospace;font-size:clamp(1.8rem,7vw,2.6rem);font-weight:900;color:#fff;letter-spacing:.2em;text-shadow:0 0 30px rgba(255,255,255,.2)}.sg-desc{font-family:Rajdhani,sans-serif;color:#ffffff61;font-size:.9rem;letter-spacing:.08em;line-height:1.4}.sg-best{font-family:Orbitron,monospace;font-size:.68rem;letter-spacing:.2em;color:#ffd32a99;border:1px solid rgba(255,211,42,.15);padding:4px 14px;border-radius:40px}.sg-over-icon{font-size:2.8rem;animation:shake .4s ease .1s}.sg-over-title{font-family:Orbitron,monospace;font-size:clamp(1.2rem,4.5vw,1.7rem);font-weight:900;color:#ffffffd9;letter-spacing:.12em}.sg-final-num{font-family:Orbitron,monospace;font-size:clamp(3rem,14vw,5rem);font-weight:900;color:#fff;line-height:1;text-shadow:0 0 30px rgba(255,255,255,.25)}.sg-final-label{font-family:Rajdhani,sans-serif;font-size:.72rem;letter-spacing:.3em;color:#ffffff4d;text-transform:uppercase}.sg-new-best{font-family:Orbitron,monospace;font-size:.7rem;letter-spacing:.15em;color:#ffd32a;text-shadow:0 0 12px rgba(255,211,42,.4);animation:fadeIn .4s ease .2s both}.sg-btn-row{display:flex;gap:10px;margin-top:4px}.sg-btn{font-family:Orbitron,monospace;font-size:clamp(.7rem,2.5vw,.85rem);font-weight:700;letter-spacing:.16em;padding:13px 38px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.28);border-radius:6px;cursor:pointer;position:relative;overflow:hidden;transition:color .22s,border-color .22s,box-shadow .22s;box-shadow:0 0 12px #ffffff0f;margin-top:6px}.sg-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff1f;transform:translate(-101%);transition:transform .22s ease;z-index:-1}.sg-btn:hover:before{transform:translate(0)}.sg-btn:hover{border-color:#ffffff8c;box-shadow:0 0 22px #ffffff1f}@keyframes cardPop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%{transform:rotate(0)}20%{transform:rotate(-10deg) scale(1.1)}40%{transform:rotate(10deg) scale(1.1)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}to{transform:rotate(0)}}.brick-game-container{width:100%;height:100%;background:radial-gradient(circle at center,#1a1a2e,#0f0f1a);position:relative;overflow:hidden;display:flex;flex-direction:column;color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif}.game-grid-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90(rgba(255,255,255,.05) 1px,transparent 1px));background-size:40px 40px;pointer-events:none;z-index:0}canvas{flex:1;width:100%;height:100%;display:block;cursor:none;z-index:1}.game-stats-overlay{position:absolute;top:15px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;z-index:10}.stat-pill{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:6px 16px;border-radius:20px;display:flex;flex-direction:column;align-items:center;min-width:80px}.stat-pill .label{font-size:10px;font-weight:700;color:#ffffff80;letter-spacing:.05em}.stat-pill .value{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}.back-btn{background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.back-btn:hover{background:#fff3;transform:scale(1.05)}.game-overlay-screen{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f0f1ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}.overlay-content{text-align:center;max-width:320px;padding:40px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 20px 50px #00000080}.overlay-content h2{font-size:32px;margin-bottom:12px;font-weight:800;background:linear-gradient(45deg,#47d1ff,#a088ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.overlay-content h2.lose{background:linear-gradient(45deg,#ff4d4d,#ffb347);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.overlay-content h2.win{background:linear-gradient(45deg,#47ffb3,#d1ff47);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.overlay-content p{color:#fff9;margin-bottom:30px;line-height:1.5}.start-btn{background:#fff;color:#000;border:none;padding:14px 28px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s ease;width:100%}.start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #fff3}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){.overlay-content{width:85%;padding:30px 20px}}:root{--neon-cyan: #00f5ff;--neon-pink: #ff0090;--neon-yellow: #ffe600;--neon-green: #39ff14;--bg-dark: #050510;--grid-color: rgba(0, 245, 255, .055)}.finger-pick-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--bg-dark);background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);background-size:60px 60px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center}.finger-pick-container:before,.finger-pick-container:after{content:"";position:absolute;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0}.finger-pick-container:before{width:600px;height:600px;background:radial-gradient(circle,rgba(0,245,255,.13) 0%,transparent 70%);top:-180px;left:-180px}.finger-pick-container:after{width:500px;height:500px;background:radial-gradient(circle,rgba(255,0,144,.13) 0%,transparent 70%);bottom:-160px;right:-160px}#particle-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px)}.game-info-overlay{position:absolute;top:0;width:100%;text-align:center;color:#fff;z-index:20;pointer-events:none;padding-top:44px}.game-title{font-family:Orbitron,monospace;font-size:clamp(1.1rem,4.5vw,1.8rem);font-weight:900;letter-spacing:.3em;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan),0 0 24px var(--neon-cyan),0 0 70px rgba(0,245,255,.35)}.game-subtitle{font-family:Rajdhani,sans-serif;font-size:clamp(.8rem,2.5vw,1rem);font-weight:600;letter-spacing:.15em;color:#fff6;margin-top:8px}.finger-count{display:inline-block;margin-top:14px;font-family:Orbitron,monospace;font-size:.65rem;letter-spacing:.18em;color:#00f5ffbf;border:1px solid rgba(0,245,255,.22);border-radius:40px;padding:5px 18px;background:#00f5ff0d}.countdown-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:15;pointer-events:none}.countdown-ring{position:relative;width:min(42vw,260px);height:min(42vw,260px)}.countdown-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#00f5ff14;stroke-width:5}.ring-fill{fill:none;stroke:var(--neon-cyan);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--neon-cyan));transition:stroke-dashoffset .95s linear}.countdown-number{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Orbitron,monospace;font-size:clamp(4rem,16vw,7rem);font-weight:900;color:#fff;text-shadow:0 0 20px var(--neon-cyan),0 0 70px var(--neon-cyan);animation:cdPop .2s cubic-bezier(.175,.885,.32,1.4)}.countdown-label{margin-top:22px;font-family:Rajdhani,sans-serif;font-size:clamp(.7rem,2.5vw,.95rem);letter-spacing:.35em;color:#00f5ff8c;text-transform:uppercase}.winner-announcement{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;pointer-events:auto;background:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(57,255,20,.07) 0%,transparent 70%);animation:fadeInBg .4s ease}.win-badge{font-family:Orbitron,monospace;font-size:clamp(.55rem,2vw,.78rem);letter-spacing:.5em;color:var(--neon-green);opacity:0;animation:slideUp .5s .1s forwards}.win-text{font-family:Orbitron,monospace;font-size:clamp(2.5rem,11vw,5.5rem);font-weight:900;letter-spacing:.1em;color:var(--neon-green);text-shadow:0 0 10px var(--neon-green),0 0 35px var(--neon-green),0 0 90px rgba(57,255,20,.45);opacity:0;animation:winPop .7s .2s cubic-bezier(.175,.885,.32,1.275) forwards}.winner-color-dot{width:28px;height:28px;border-radius:50%;margin-top:14px;opacity:0;animation:slideUp .5s .4s forwards}.win-divider{width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--neon-green),transparent);margin:18px auto;opacity:0;animation:slideUp .5s .5s forwards}.reset-btn{font-family:Orbitron,monospace;font-size:clamp(.7rem,2.2vw,.85rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:14px 42px;background:transparent;color:var(--neon-cyan);border:2px solid var(--neon-cyan);border-radius:4px;cursor:pointer;position:relative;overflow:hidden;opacity:0;animation:slideUp .5s .65s forwards;box-shadow:0 0 12px #00f5ff40,inset 0 0 12px #00f5ff0a;transition:color .22s ease,box-shadow .22s ease}.reset-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--neon-cyan);transform:translate(-101%);transition:transform .22s ease;z-index:-1}.reset-btn:hover:before{transform:translate(0)}.reset-btn:hover{color:#000;box-shadow:0 0 22px #00f5ff8c}.touch-indicator{position:absolute;width:110px;height:110px;transform:translate(-50%,-50%);pointer-events:none;z-index:10;transition:opacity .35s ease,transform .35s ease,filter .35s ease}.plasma-ring-2{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;border-radius:50%;border:1px dashed var(--touch-color);opacity:.3;animation:spinRing 7s linear infinite reverse}.plasma-ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;animation:spinRing 2.5s linear infinite;background:conic-gradient(var(--touch-color),transparent 50%,var(--touch-color));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#fff calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#fff calc(100% - 2px));filter:drop-shadow(0 0 4px var(--touch-color));opacity:.8}.inner-circle{position:absolute;top:10px;right:10px;bottom:10px;left:10px;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.25),var(--touch-color) 65%,rgba(0,0,0,.5));border-radius:50%;border:3px solid rgba(255,255,255,.75);box-shadow:0 0 18px var(--touch-color),inset 0 0 15px #0006;display:flex;align-items:center;justify-content:center}.finger-icon{font-size:26px;opacity:.65;line-height:1;filter:drop-shadow(0 0 4px #fff)}.ripple{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--touch-color);animation:rippleOut 2s ease-out infinite;opacity:0}.ripple:nth-child(4){animation-delay:0s}.ripple:nth-child(5){animation-delay:.65s}.ripple:nth-child(6){animation-delay:1.3s}.player-num{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);font-family:Orbitron,monospace;font-size:.58rem;letter-spacing:.12em;color:var(--touch-color);text-shadow:0 0 8px var(--touch-color);white-space:nowrap}.touch-indicator.winner .inner-circle{animation:winnerPulse .55s ease infinite alternate;border-color:#fff;border-width:4px}.touch-indicator.winner .plasma-ring{animation:spinRing .7s linear infinite;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:1}.touch-indicator.winner .plasma-ring-2{opacity:.55;animation-duration:1.2s}.touch-indicator.winner{filter:drop-shadow(0 0 18px var(--touch-color));z-index:25}.touch-indicator.loser{opacity:.15;transform:translate(-50%,-50%) scale(.7);filter:grayscale(1)}.container-shake{animation:shake .18s ease}.confetti-piece{position:absolute;border-radius:2px;z-index:28;pointer-events:none;animation:confettiFall var(--dur, 2s) var(--delay, 0s) ease-in forwards}@keyframes spinRing{to{transform:rotate(360deg)}}@keyframes rippleOut{0%{transform:scale(1);opacity:.7}to{transform:scale(3.5);opacity:0}}@keyframes winnerPulse{0%{box-shadow:0 0 20px var(--touch-color),0 0 50px var(--touch-color);transform:scale(1.4)}to{box-shadow:0 0 40px var(--touch-color),0 0 100px var(--touch-color);transform:scale(1.6)}}@keyframes cdPop{0%{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes winPop{0%{transform:scale(.4) rotate(-6deg);opacity:0}80%{transform:scale(1.06) rotate(1deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBg{0%{opacity:0}to{opacity:1}}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,3px)}80%{transform:translate(3px,-1px)}to{transform:translate(0)}}@keyframes confettiFall{0%{transform:translateY(-60px) rotate(0);opacity:1}to{transform:translate(var(--dx, 0px),100vh) rotate(720deg);opacity:0}}@media(max-width:480px){.touch-indicator{width:88px;height:88px}.plasma-ring{top:-6px;right:-6px;bottom:-6px;left:-6px}.plasma-ring-2{top:-16px;right:-16px;bottom:-16px;left:-16px}}:root{--pink: #ff0090;--cyan: #00f5ff;--green: #39ff14;--bg: #050510}.fastest-finger-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--bg);display:flex;flex-direction:column;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.player-section{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;transition:background-color .15s ease;cursor:default}.top-player{background-color:#ff00900a;border-bottom:1px solid rgba(255,255,255,.08)}.bottom-player{background-color:#00f5ff0a;border-top:1px solid rgba(255,255,255,.08)}.top-player.active{background-color:#ff009014;cursor:pointer}.bottom-player.active{background-color:#00f5ff14;cursor:pointer}.top-player.leading{background-color:#ff009024}.bottom-player.leading{background-color:#00f5ff24}.player-bg-glow{position:absolute;width:400px;height:400px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s ease;filter:blur(80px)}.top-glow{background:var(--pink);top:-100px;left:50%;transform:translate(-50%)}.bottom-glow{background:var(--cyan);bottom:-100px;left:50%;transform:translate(-50%)}.active .player-bg-glow{opacity:.08}.leading .player-bg-glow{opacity:.15}.score-display{font-family:Orbitron,monospace;font-size:clamp(5rem,18vw,9rem);font-weight:900;color:#fff;opacity:.9;pointer-events:none;transition:transform .1s ease;line-height:1}.top-player .score-display{text-shadow:0 0 40px rgba(255,0,144,.6)}.bottom-player .score-display{text-shadow:0 0 40px rgba(0,245,255,.6)}.score-display.score-pop{animation:scorePop .15s ease-out}.tap-hint{font-family:Rajdhani,sans-serif;font-size:clamp(.8rem,2.5vw,1.1rem);font-weight:700;letter-spacing:.25em;color:#fff;opacity:.35;margin-top:12px;pointer-events:none;text-transform:uppercase;animation:tapHintPulse 1s ease-in-out infinite}.leading-badge{font-family:Orbitron,monospace;font-size:.6rem;letter-spacing:.2em;padding:5px 14px;border-radius:40px;margin-top:10px;pointer-events:none}.top-player .leading-badge{color:var(--pink);border:1px solid rgba(255,0,144,.4);background:#ff009014;text-shadow:0 0 10px var(--pink)}.bottom-player .leading-badge{color:var(--cyan);border:1px solid rgba(0,245,255,.4);background:#00f5ff14;text-shadow:0 0 10px var(--cyan)}.score-display.rotated.score-pop{animation:scorePopRotated .15s ease-out}.middle-ui{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;text-align:center;pointer-events:none;width:100%}.overlay-content{background:#050514eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:2.5rem 3rem;border-radius:24px;border:1px solid rgba(255,255,255,.1);pointer-events:auto;display:inline-block;box-shadow:0 0 60px #0009,0 0 0 1px #ffffff0a inset}.idle-icon{font-size:2.5rem;margin-bottom:12px;animation:float 2s ease-in-out infinite}.overlay-content h1{font-family:Orbitron,monospace;color:#fff;font-size:clamp(1.4rem,4vw,2rem);letter-spacing:.15em;margin-bottom:8px;text-shadow:0 0 20px rgba(255,255,255,.3)}.overlay-content p{font-family:Rajdhani,sans-serif;color:#ffffff73;font-size:.95rem;letter-spacing:.1em;margin-bottom:2rem}.start-btn,.reset-btn{font-family:Orbitron,monospace;font-size:clamp(.75rem,2.5vw,.9rem);font-weight:700;letter-spacing:.15em;padding:14px 36px;background:transparent;color:var(--cyan);border:2px solid var(--cyan);border-radius:4px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 0 14px #00f5ff33,inset 0 0 14px #00f5ff0a;transition:color .22s ease,box-shadow .22s ease}.start-btn:before,.reset-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--cyan);transform:translate(-101%);transition:transform .22s ease;z-index:-1}.start-btn:hover:before,.reset-btn:hover:before{transform:translate(0)}.start-btn:hover,.reset-btn:hover{color:#000;box-shadow:0 0 24px #00f5ff80}.countdown-wrapper{display:flex;flex-direction:column;align-items:center;pointer-events:none}.countdown-number{font-family:Orbitron,monospace;font-size:clamp(6rem,22vw,10rem);font-weight:900;color:#fff;text-shadow:0 0 30px var(--cyan),0 0 80px rgba(0,245,255,.3);animation:cdPop .2s cubic-bezier(.175,.885,.32,1.4);line-height:1}.countdown-label{font-family:Rajdhani,sans-serif;font-size:.85rem;letter-spacing:.4em;color:#00f5ff8c;margin-top:12px;text-transform:uppercase}.go-flash{font-family:Orbitron,monospace;font-size:clamp(5rem,20vw,9rem);font-weight:900;color:var(--green);text-shadow:0 0 20px var(--green),0 0 60px rgba(57,255,20,.5);animation:goFlash .7s ease-out forwards;pointer-events:none}.game-timer{width:100%;height:56px;background:#ffffff0a;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);pointer-events:none}.timer-bar{height:100%;transition:width .05s linear,background .5s ease}.timer-bar-glow{position:absolute;top:0;left:0;height:100%;background:inherit;filter:blur(12px);opacity:.4;transition:width .05s linear;pointer-events:none}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,monospace;color:#fff;font-weight:900;font-size:1.4rem;text-shadow:0 0 12px rgba(0,0,0,.8);letter-spacing:.1em;pointer-events:none}.result-overlay{background:#050514f2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:2.5rem 3rem;border-radius:28px;border:1px solid rgba(255,255,255,.1);pointer-events:auto;display:inline-block;min-width:320px;box-shadow:0 0 80px #000000b3;animation:resultPop .5s cubic-bezier(.175,.885,.32,1.275)}.result-top{border-color:#ff009059;box-shadow:0 0 60px #ff009026,0 0 80px #000000b3}.result-bottom{border-color:#00f5ff59;box-shadow:0 0 60px #00f5ff26,0 0 80px #000000b3}.result-draw{border-color:#ffe60059;box-shadow:0 0 60px #ffe6001a,0 0 80px #000000b3}.trophy-icon{font-size:2.2rem;margin-bottom:10px;animation:float 1.5s ease-in-out infinite}.winner-text{font-family:Orbitron,monospace;font-size:clamp(1.3rem,4vw,1.8rem);color:var(--green);margin-bottom:1.8rem;letter-spacing:.1em;text-shadow:0 0 20px rgba(57,255,20,.4)}.final-scores{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:2rem}.score-item{display:flex;flex-direction:column;align-items:center;gap:6px}.score-item span{font-family:Rajdhani,sans-serif;font-size:.75rem;letter-spacing:.25em;color:#fff6;text-transform:uppercase}.score-item strong{font-family:Orbitron,monospace;font-size:clamp(2rem,7vw,3rem);font-weight:900;line-height:1}.score-winner strong{text-shadow:0 0 20px currentColor;transform:scale(1.1);display:inline-block}.score-divider{font-family:Orbitron,monospace;font-size:.7rem;letter-spacing:.2em;color:#fff3;padding-top:20px}.tap-effect{position:absolute;width:100px;height:100px;border-radius:50%;pointer-events:none;animation:tapPulse .5s ease-out forwards;z-index:50}.tap-top{background:radial-gradient(circle,#ff0090b3,#ff00901a);box-shadow:0 0 20px #ff009066}.tap-bottom{background:radial-gradient(circle,#00f5ffb3,#00f5ff1a);box-shadow:0 0 20px #00f5ff66}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);z-index:200}@keyframes cdPop{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes goFlash{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.1);opacity:1}to{transform:scale(1.3);opacity:0}}@keyframes tapPulse{0%{transform:scale(.5);opacity:1}to{transform:scale(2.2);opacity:0}}@keyframes scorePop{0%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes scorePopRotated{0%{transform:rotate(180deg) scale(1.25)}to{transform:rotate(180deg) scale(1)}}@keyframes tapHintPulse{0%,to{opacity:.3}50%{opacity:.6}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes resultPop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.rise-up-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#87ceeb;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif}.rise-up-canvas{width:100%;height:100%;display:block}.game-ui{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;z-index:10}.score-box,.level-box{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.3);color:#fff}.score-box h3,.level-box h3{margin:0;font-size:14px;text-transform:uppercase;opacity:.8}.score-box p,.level-box p{margin:0;font-size:24px;font-weight:700}.game-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:20;text-align:center}.game-overlay h1{font-size:48px;margin-bottom:10px}.game-overlay p{font-size:18px;opacity:.8;margin-bottom:30px}.start-btn,.retry-btn{padding:15px 40px;font-size:18px;font-weight:700;background:#fff;color:#87ceeb;border:none;border-radius:30px;cursor:pointer;box-shadow:0 10px 20px #0003;transition:transform .2s,background-color .2s}.start-btn:hover,.retry-btn:hover{transform:scale(1.05);background:#f0f0f0}.status-text{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:120px;font-weight:900;color:#ffffff1a;pointer-events:none;z-index:5;text-transform:uppercase;letter-spacing:20px}:root{--sky: #0a1628;--sky-mid: #0f2a4a;--leaf: #39ff14;--sun: #FFD93D;--coral: #FF6B6B;--teal: #4ECDC4;--white: #ffffff;--zone-h: 28vh}.cu-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--sky);display:flex;flex-direction:column;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.cu-zone{height:var(--zone-h);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;transition:background .2s ease}.cu-zone--top{background:#4ecdc40f;border-bottom:2px solid rgba(78,205,196,.15)}.cu-zone--bottom{background:#ff6b6b0f;border-top:2px solid rgba(255,107,107,.15)}.cu-zone--top.cu-zone--held{background:#4ecdc424;border-bottom-color:#4ecdc466}.cu-zone--bottom.cu-zone--held{background:#ff6b6b24;border-top-color:#ff6b6b66}.cu-zone--correct{background:#39ff1424!important;border-color:#39ff1480!important}.cu-zone--wrong{background:#ff444424!important;border-color:#ff444480!important}.cu-zone--top:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(78,205,196,.18),transparent 70%);top:-120px;left:50%;transform:translate(-50%);pointer-events:none}.cu-zone--bottom:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,107,.18),transparent 70%);bottom:-120px;left:50%;transform:translate(-50%);pointer-events:none}.cu-zone-inner{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.cu-score-num{font-family:Orbitron,monospace;font-size:clamp(2.2rem,8vw,3.5rem);font-weight:900;color:#fff;line-height:1;opacity:.9}.cu-zone--top .cu-score-num{text-shadow:0 0 20px rgba(78,205,196,.7)}.cu-zone--bottom .cu-score-num{text-shadow:0 0 20px rgba(255,107,107,.7)}.cu-finger-blob{font-size:clamp(1.8rem,6vw,2.6rem);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);transition:all .15s ease}.cu-finger-blob.held{background:#ffffff1f;border-color:#ffffff59;transform:scale(1.1);box-shadow:0 0 20px #ffffff1f}.cu-finger-blob.lifted{background:#39ff1433;border-color:var(--leaf);transform:scale(1.2) translateY(-4px);box-shadow:0 0 24px #39ff1466;animation:floatUp .3s ease-out}.cu-zone-label{font-family:Rajdhani,sans-serif;font-size:clamp(.65rem,2vw,.85rem);font-weight:700;letter-spacing:.18em;color:#ffffff59;text-transform:uppercase}.cu-middle{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:10;overflow:hidden;padding:12px}.cu-idle-card{background:#0a1628eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:2rem 2.2rem;text-align:center;max-width:340px;width:100%;box-shadow:0 0 60px #00000080}.cu-hero-bird{font-size:3.2rem;animation:birdFloat 2.2s ease-in-out infinite;display:block;margin-bottom:10px}.cu-title{font-family:"Baloo 2",cursive;font-size:clamp(1.6rem,6vw,2.4rem);font-weight:800;color:var(--sun);letter-spacing:.08em;text-shadow:0 0 20px rgba(255,217,61,.4);margin-bottom:4px}.cu-subtitle{font-family:Rajdhani,sans-serif;color:#fff6;font-size:.9rem;letter-spacing:.12em;margin-bottom:1.2rem}.cu-rules{display:flex;flex-direction:column;gap:8px;margin-bottom:1.6rem;text-align:left}.cu-rule{font-family:Rajdhani,sans-serif;font-size:.88rem;font-weight:600;letter-spacing:.05em;padding:8px 14px;border-radius:10px}.cu-rule--fly{background:#39ff1414;color:var(--leaf);border:1px solid rgba(57,255,20,.2)}.cu-rule--stay{background:#ff6b6b14;color:var(--coral);border:1px solid rgba(255,107,107,.2)}.cu-rule--time{background:#ffd93d14;color:var(--sun);border:1px solid rgba(255,217,61,.2)}.cu-btn{font-family:Orbitron,monospace;font-size:clamp(.7rem,2.5vw,.85rem);font-weight:700;letter-spacing:.15em;padding:13px 36px;background:transparent;color:var(--sun);border:2px solid var(--sun);border-radius:6px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 0 14px #ffd93d33;transition:color .22s ease,box-shadow .22s ease}.cu-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--sun);transform:translate(-101%);transition:transform .22s ease;z-index:-1}.cu-btn:hover:before{transform:translate(0)}.cu-btn:hover{color:#0a1628;box-shadow:0 0 26px #ffd93d80}.cu-btn--next{color:var(--teal);border-color:var(--teal);box-shadow:0 0 14px #4ecdc433}.cu-btn--next:before{background:var(--teal)}.cu-btn--next:hover{color:#0a1628;box-shadow:0 0 26px #4ecdc480}.cu-waiting-ui{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.cu-round-pill{font-family:Orbitron,monospace;font-size:.65rem;letter-spacing:.2em;color:#fff6;border:1px solid rgba(255,255,255,.12);border-radius:40px;padding:5px 16px;background:#ffffff0a}.cu-waiting-label{font-family:"Baloo 2",cursive;font-size:clamp(1rem,3.5vw,1.4rem);font-weight:600;color:#ffffffbf;letter-spacing:.05em}.cu-hold-dots{display:flex;gap:16px}.cu-hold-dot{font-family:Orbitron,monospace;font-size:.62rem;letter-spacing:.15em;padding:6px 18px;border-radius:40px;border:1px solid rgba(255,255,255,.12);color:#ffffff40;transition:all .2s ease}.cu-hold-dot--on{color:var(--leaf);border-color:#39ff1466;background:#39ff1414;text-shadow:0 0 8px var(--leaf);box-shadow:0 0 10px #39ff1426}.cu-showing-ui{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}.cu-item-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:1rem 2rem;text-align:center;animation:itemPop .4s cubic-bezier(.175,.885,.32,1.275)}.cu-item-emoji{font-size:clamp(3.5rem,14vw,6rem);display:block;line-height:1.1}.cu-item-emoji--fly{animation:itemFly .6s ease-out}.cu-item-call{margin-top:6px;display:flex;align-items:baseline;justify-content:center;gap:4px}.cu-item-name{font-family:"Baloo 2",cursive;font-size:clamp(1rem,4vw,1.4rem);font-weight:800;color:#fff;letter-spacing:.05em}.cu-item-udd{font-family:"Baloo 2",cursive;font-size:clamp(.9rem,3.5vw,1.2rem);font-weight:600;color:var(--sun);letter-spacing:.08em}.cu-timer-ring-wrap{position:relative;width:80px;height:80px}.cu-timer-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.cu-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:6}.cu-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .05s linear,stroke .3s ease;filter:drop-shadow(0 0 4px currentColor)}.cu-timer-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Orbitron,monospace;font-size:1rem;font-weight:900;color:#fff}.cu-lift-status{display:flex;gap:12px}.cu-ls-dot{font-family:Orbitron,monospace;font-size:.58rem;letter-spacing:.12em;padding:5px 14px;border-radius:40px;border:1px solid rgba(255,255,255,.1);color:#ffffff40;transition:all .2s ease}.cu-ls-dot--lifted{color:var(--leaf);border-color:#39ff1466;background:#39ff141a;text-shadow:0 0 8px var(--leaf)}.cu-result-ui{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:340px}.cu-result-item-row{display:flex;align-items:center;gap:10px}.cu-result-emoji{font-size:2.4rem}.cu-result-verdict{font-family:Rajdhani,sans-serif;font-size:1rem;font-weight:700;color:#ffffffb3;letter-spacing:.08em}.cu-result-msg{font-family:"Baloo 2",cursive;font-size:clamp(.85rem,3vw,1.1rem);font-weight:600;color:var(--sun);text-align:center;letter-spacing:.04em}.cu-scoreboard{display:flex;align-items:center;gap:20px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 28px;width:100%;justify-content:center}.cu-sb-col{display:flex;flex-direction:column;align-items:center;gap:4px}.cu-sb-col span{font-family:Rajdhani,sans-serif;font-size:.65rem;letter-spacing:.2em;color:#ffffff59;text-transform:uppercase}.cu-sb-col strong{font-family:Orbitron,monospace;font-size:clamp(1.6rem,6vw,2.2rem);font-weight:900;color:#fff;line-height:1}.cu-sb-col--win strong{color:var(--leaf);text-shadow:0 0 14px var(--leaf)}.cu-sb-col--lose strong{color:var(--coral);text-shadow:0 0 14px var(--coral);opacity:.7}.cu-sb-icon{font-size:1rem;font-weight:700}.cu-sb-col--win .cu-sb-icon{color:var(--leaf)}.cu-sb-col--lose .cu-sb-icon{color:var(--coral)}.cu-sb-vs{font-family:Orbitron,monospace;font-size:.6rem;letter-spacing:.15em;color:#ffffff2e;padding-top:16px}.cu-gameover-ui{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.cu-go-trophy{font-size:3.5rem;animation:birdFloat 1.5s ease-in-out infinite}.cu-go-title{font-family:"Baloo 2",cursive;font-size:clamp(1.8rem,7vw,3rem);font-weight:800;color:var(--sun);letter-spacing:.08em;text-shadow:0 0 30px rgba(255,217,61,.4)}.cu-final-scores{display:flex;align-items:center;gap:24px}.cu-fs-col{display:flex;flex-direction:column;align-items:center;gap:4px}.cu-fs-col span{font-family:Rajdhani,sans-serif;font-size:.7rem;letter-spacing:.2em;color:#ffffff59;text-transform:uppercase}.cu-fs-col strong{font-family:Orbitron,monospace;font-size:clamp(2.4rem,9vw,3.5rem);font-weight:900;color:#ffffff80;line-height:1}.cu-fs-col--champ strong{color:var(--sun);text-shadow:0 0 20px rgba(255,217,61,.5)}.cu-fs-vs{font-family:Orbitron,monospace;font-size:.65rem;letter-spacing:.15em;color:#ffffff2e;padding-top:20px}.cu-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px)}@keyframes birdFloat{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}@keyframes itemPop{0%{transform:scale(.6) rotate(-5deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes itemFly{0%{transform:translateY(10px) scale(.8)}60%{transform:translateY(-8px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes floatUp{0%{transform:scale(1) translateY(0)}to{transform:scale(1.2) translateY(-4px)}}:root{--x-color: #ff6b6b;--o-color: #4ecdc4;--x-glow: rgba(255, 107, 107, .6);--o-glow: rgba(78, 205, 196, .6);--bg: #080c14;--surface: rgba(255, 255, 255, .035);--border: rgba(255, 255, 255, .08);--strip-h: 22vh}*{box-sizing:border-box;margin:0;padding:0}.ttt-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--bg);background-image:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,107,107,.06) 0%,transparent 60%),radial-gradient(ellipse 70% 50% at 50% 100%,rgba(78,205,196,.06) 0%,transparent 60%);display:flex;flex-direction:column;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}.ttt-player-strip{height:var(--strip-h);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:background .25s ease}.ttt-top{background:#ff6b6b0a;border-bottom:1px solid rgba(255,107,107,.12)}.ttt-bottom{background:#4ecdc40a;border-top:1px solid rgba(78,205,196,.12)}.ttt-strip--active.ttt-top{background:#ff6b6b17;border-bottom-color:#ff6b6b59}.ttt-strip--active.ttt-bottom{background:#4ecdc417;border-top-color:#4ecdc459}.ttt-strip--winner.ttt-top{background:#ff6b6b24}.ttt-strip--winner.ttt-bottom{background:#4ecdc424}.ttt-strip--loser{opacity:.4;filter:grayscale(.5)}.ttt-turn-glow{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;animation:stripPulse 1.2s ease-in-out infinite}.ttt-turn-glow--x{background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(255,107,107,.1),transparent)}.ttt-turn-glow--o{background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(78,205,196,.1),transparent)}.ttt-strip-inner{display:flex;align-items:center;gap:clamp(14px,4vw,28px);pointer-events:none;z-index:1}.rotated{transform:rotate(180deg)}.ttt-strip-symbol{font-family:Orbitron,monospace;font-size:clamp(2rem,8vw,3.2rem);font-weight:900;line-height:1;color:#fff;opacity:.85;min-width:1.5ch;text-align:center}.ttt-x-symbol{text-shadow:0 0 22px var(--x-glow)}.ttt-o-symbol{text-shadow:0 0 22px var(--o-glow)}.ttt-strip-mark{font-size:clamp(2rem,7vw,3rem);font-weight:900;line-height:1}.ttt-strip-label{font-family:Rajdhani,sans-serif;font-size:clamp(.6rem,2vw,.82rem);font-weight:700;letter-spacing:.2em;color:#ffffff4d;text-transform:uppercase;min-width:100px}.ttt-strip--active .ttt-strip-label{color:#ffffffb3}.ttt-x-mark{color:var(--x-color);font-family:Orbitron,monospace;font-weight:900}.ttt-o-mark{color:var(--o-color);font-family:Orbitron,monospace;font-weight:900}.ttt-middle{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}.ttt-idle-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;background:#ffffff08;border:1px solid var(--border);border-radius:24px;padding:2rem 2.4rem;max-width:320px;width:100%;box-shadow:0 0 60px #00000080}.ttt-idle-marks{display:flex;align-items:center;gap:14px;font-size:clamp(1.8rem,7vw,2.8rem);font-weight:900}.ttt-idle-vs{font-family:Orbitron,monospace;font-size:.7rem;letter-spacing:.25em;color:#fff3;padding-bottom:4px}.ttt-title{font-family:Orbitron,monospace;font-size:clamp(1.2rem,4.5vw,1.8rem);font-weight:900;color:#fff;letter-spacing:.12em;text-shadow:0 0 30px rgba(255,255,255,.15)}.ttt-subtitle{font-family:Rajdhani,sans-serif;color:#ffffff59;font-size:.88rem;letter-spacing:.1em;margin-bottom:6px}.ttt-btn{font-family:Orbitron,monospace;font-size:clamp(.65rem,2.2vw,.82rem);font-weight:700;letter-spacing:.14em;padding:13px 34px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;position:relative;overflow:hidden;transition:color .22s ease,border-color .22s ease,box-shadow .22s ease;box-shadow:0 0 12px #ffffff0f}.ttt-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff1f;transform:translate(-101%);transition:transform .22s ease;z-index:-1}.ttt-btn:hover:before{transform:translate(0)}.ttt-btn:hover{border-color:#fff9;box-shadow:0 0 22px #ffffff1f}.ttt-btn--sm{padding:10px 22px}.ttt-btn--ghost{color:#ffffff59;border-color:#ffffff1f;box-shadow:none}.ttt-btn--ghost:hover{color:#ffffffb3;border-color:#ffffff4d}.ttt-board-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:360px}.ttt-turn-bar{display:flex;align-items:center;gap:8px;font-family:Rajdhani,sans-serif;font-size:clamp(.75rem,2.5vw,.95rem);font-weight:700;letter-spacing:.15em;padding:7px 20px;border-radius:40px;border:1px solid;animation:turnBarIn .3s ease}.ttt-turn-bar span:first-child{font-size:clamp(.9rem,3vw,1.2rem)}.ttt-turn-bar--x{color:var(--x-color);border-color:#ff6b6b4d;background:#ff6b6b12;box-shadow:0 0 14px #ff6b6b1f}.ttt-turn-bar--o{color:var(--o-color);border-color:#4ecdc44d;background:#4ecdc412;box-shadow:0 0 14px #4ecdc41f}.ttt-result-banner{font-family:Orbitron,monospace;font-size:clamp(.85rem,3.5vw,1.2rem);font-weight:900;letter-spacing:.1em;padding:9px 24px;border-radius:40px;border:1px solid;animation:resultBannerPop .5s cubic-bezier(.175,.885,.32,1.275)}.ttt-res--x{color:var(--x-color);border-color:#ff6b6b59;background:#ff6b6b14;text-shadow:0 0 16px var(--x-glow);box-shadow:0 0 20px #ff6b6b26}.ttt-res--o{color:var(--o-color);border-color:#4ecdc459;background:#4ecdc414;text-shadow:0 0 16px var(--o-glow);box-shadow:0 0 20px #4ecdc426}.ttt-res--draw{color:#ffffffb3;border-color:#ffffff26;background:#ffffff0a}.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,10px);width:100%;aspect-ratio:1 / 1;max-width:min(56vw,290px)}.ttt-cell{aspect-ratio:1 / 1;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:background .15s ease,border-color .15s ease,transform .12s ease}.ttt-cell--empty:hover,.ttt-cell--empty:active{transform:scale(.96)}.ttt-cell--hover-x:not(.ttt-cell--filled):hover{background:#ff6b6b14;border-color:#ff6b6b40}.ttt-cell--hover-o:not(.ttt-cell--filled):hover{background:#4ecdc414;border-color:#4ecdc440}.ttt-cell--filled{cursor:default}.ttt-cell--win{animation:winCellPulse .8s ease-in-out infinite alternate}.ttt-cell--win.ttt-cell--hover-x,.ttt-cell--win{background:#ff6b6b1f;border-color:#ff6b6b66}.ttt-cell--win:has(.ttt-o-mark){background:#4ecdc41f;border-color:#4ecdc466}.ttt-cell-mark{font-family:Orbitron,monospace;font-size:clamp(1.4rem,5.5vw,2.2rem);font-weight:900;line-height:1;display:block}.ttt-mark-pop{animation:markPop .3s cubic-bezier(.175,.885,.32,1.4)}.ttt-mark-glow-x{text-shadow:0 0 18px var(--x-glow),0 0 40px var(--x-glow)}.ttt-mark-glow-o{text-shadow:0 0 18px var(--o-glow),0 0 40px var(--o-glow)}.ttt-board:before{content:"";position:absolute;pointer-events:none}.ttt-score-row{display:flex;align-items:center;gap:18px}.ttt-score-item{display:flex;align-items:center;gap:7px}.ttt-score-item span{font-size:clamp(.9rem,3vw,1.2rem)}.ttt-x-score,.ttt-o-score{font-family:Orbitron,monospace;font-size:clamp(1rem,3.5vw,1.4rem);font-weight:900}.ttt-x-score{color:var(--x-color);text-shadow:0 0 10px var(--x-glow)}.ttt-o-score{color:var(--o-color);text-shadow:0 0 10px var(--o-glow)}.ttt-score-divider{font-family:Orbitron,monospace;font-size:1.2rem;color:#ffffff1f}.ttt-action-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.ttt-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px)}@keyframes stripPulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes turnBarIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes markPop{0%{transform:scale(.3) rotate(-15deg);opacity:0}70%{transform:scale(1.15) rotate(3deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes resultBannerPop{0%{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}@keyframes winCellPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}