@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--bg-primary: #060a13;--bg-secondary: #0c1222;--bg-card: rgba(15, 23, 42, .75);--bg-card-hover: rgba(20, 30, 55, .85);--bg-elevated: #131c31;--bg-sidebar: #080d1a;--bg-input: rgba(15, 23, 42, .6);--accent-primary: #3b82f6;--accent-primary-hover: #2563eb;--accent-glow: rgba(59, 130, 246, .15);--accent-secondary: #8b5cf6;--accent-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6);--success: #10b981;--success-bg: rgba(16, 185, 129, .1);--warning: #f59e0b;--warning-bg: rgba(245, 158, 11, .1);--danger: #ef4444;--danger-bg: rgba(239, 68, 68, .1);--info: #06b6d4;--info-bg: rgba(6, 182, 212, .1);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--text-accent: #3b82f6;--border-color: rgba(148, 163, 184, .08);--border-glow: rgba(59, 130, 246, .25);--sidebar-width: 272px;--sidebar-collapsed: 72px;--topbar-height: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--shadow-card: 0 4px 24px rgba(0, 0, 0, .25);--shadow-glow: 0 0 30px rgba(59, 130, 246, .08);--shadow-elevated: 0 8px 32px rgba(0, 0, 0, .35);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow:hidden}#root{display:flex;height:100vh;width:100vw;overflow:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.app-layout{display:flex;width:100%;height:100vh}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.page-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:28px 32px;scroll-behavior:smooth}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width var(--transition-slow),min-width var(--transition-slow);z-index:100;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed);min-width:var(--sidebar-collapsed)}.sidebar-brand{height:var(--topbar-height);display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--border-color);flex-shrink:0}.sidebar-brand .brand-icon{width:36px;height:36px;border-radius:var(--radius-md);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}.sidebar-brand .brand-text{font-weight:700;font-size:1.1rem;white-space:nowrap;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:1;transition:opacity var(--transition-base)}.sidebar.collapsed .brand-text{opacity:0;pointer-events:none}.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto;overflow-x:hidden}.nav-section-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);padding:20px 12px 8px;white-space:nowrap;overflow:hidden;transition:opacity var(--transition-base)}.sidebar.collapsed .nav-section-label{opacity:0;height:0;padding:0}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.9rem;font-weight:500;transition:all var(--transition-base);white-space:nowrap;position:relative;margin-bottom:2px;border:1px solid transparent}.nav-item:hover{color:var(--text-primary);background:#3b82f60f}.nav-item.active{color:var(--accent-primary);background:#3b82f61a;border-color:#3b82f626}.nav-item.active:before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--accent-primary);border-radius:0 3px 3px 0}.nav-item .nav-icon{width:20px;height:20px;flex-shrink:0;opacity:.8}.nav-item.active .nav-icon{opacity:1}.nav-item .nav-label{opacity:1;transition:opacity var(--transition-base)}.sidebar.collapsed .nav-label{opacity:0;pointer-events:none}.sidebar-footer{padding:12px;border-top:1px solid var(--border-color);flex-shrink:0}.sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-radius:var(--radius-md);background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);font-size:.85rem;transition:all var(--transition-base)}.sidebar-toggle:hover{background:var(--bg-card);color:var(--text-primary)}.topbar{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--border-color);background:#060a13cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-shrink:0;z-index:50}.topbar-left{display:flex;align-items:center;gap:16px}.topbar-left h1{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.topbar-left .breadcrumb{font-size:.8rem;color:var(--text-muted)}.topbar-right{display:flex;align-items:center;gap:8px}.user-avatar{width:36px;height:36px;border-radius:var(--radius-md);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;margin-left:4px;cursor:pointer;transition:transform var(--transition-base)}.user-avatar:hover{transform:scale(1.05)}.profile-dropdown-wrapper{position:relative}.profile-dropdown-panel{position:absolute;top:calc(100% + 12px);right:0;width:290px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden;z-index:100;animation:fadeIn var(--transition-fast)}.pd-section{padding:16px;border-bottom:1px solid var(--border-color)}.pd-section:last-child{border-bottom:none}.pd-identity{display:flex;gap:14px;align-items:center}.pd-avatar{width:48px;height:48px;border-radius:var(--radius-md);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:#fff;flex-shrink:0}.pd-info{display:flex;flex-direction:column;gap:4px;overflow:hidden}.pd-name{font-weight:700;font-size:1.05rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.pd-position{font-size:.8rem;color:var(--text-secondary)}.pd-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}.pd-badges .badge{font-size:.65rem;padding:2px 8px;border-radius:12px}.pd-email{font-size:.75rem;color:var(--text-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pd-salary{background:#0f172a66}.pd-loading{font-size:.85rem;color:var(--text-secondary);text-align:center;padding:8px 0}.pd-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pd-stat{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--text-primary)}.pd-stat svg{color:var(--accent-primary)}.full-width{grid-column:1 / -1;color:var(--text-secondary);font-weight:500}.pd-links{display:flex;flex-direction:column;gap:4px;padding:8px}.pd-link-btn{display:flex;align-items:center;gap:12px;padding:10px 14px;width:100%;background:transparent;border:none;color:var(--text-secondary);font-size:.9rem;font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast);text-align:left}.pd-link-btn:hover{background:#3b82f614;color:var(--text-primary)}.pd-logout{color:var(--danger);margin-top:4px;border-top:1px solid var(--border-color);border-radius:var(--radius-md)}.pd-logout:hover{background:var(--danger-bg);color:var(--danger);border-top-color:transparent}.page-header{margin-bottom:28px}.page-header h2{font-size:1.6rem;font-weight:800;margin-bottom:4px}.page-header p{color:var(--text-secondary);font-size:.9rem}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--transition-base)}.card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:22px 24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--transition-base);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-gradient);opacity:0;transition:opacity var(--transition-base)}.stat-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.stat-card:hover:before{opacity:1}.stat-card .stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.stat-card .stat-label{font-size:.8rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stat-card .stat-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.stat-card .stat-value{font-size:1.85rem;font-weight:800;margin-bottom:6px;line-height:1}.stat-card .stat-trend{display:flex;align-items:center;gap:4px;font-size:.78rem;font-weight:500}.stat-card .stat-trend.up{color:var(--success)}.stat-card .stat-trend.down{color:var(--danger)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:28px}.content-grid{display:grid;gap:24px}.content-grid.two-col{grid-template-columns:2fr 1fr}.table-container{overflow-x:auto;border-radius:var(--radius-lg)}.data-table{width:100%;border-collapse:collapse;font-size:.88rem}.data-table thead th{text-align:left;padding:14px 16px;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);border-bottom:1px solid var(--border-color);white-space:nowrap;background:#0f172a66}.data-table tbody tr{transition:background var(--transition-fast);border-bottom:1px solid var(--border-color)}.data-table tbody tr:hover{background:#3b82f60a}.data-table tbody tr:last-child{border-bottom:none}.data-table tbody td{padding:14px 16px;color:var(--text-secondary);white-space:nowrap}.data-table tbody td:first-child{color:var(--text-primary);font-weight:500}.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.badge.live{background:var(--success-bg);color:var(--success)}.badge.upcoming{background:var(--info-bg);color:var(--info)}.badge.completed{background:#8b5cf61a;color:var(--accent-secondary)}.badge.voided{background:var(--danger-bg);color:var(--danger)}.badge.draft{background:#64748b26;color:var(--text-muted)}.badge.published{background:var(--info-bg);color:var(--info)}.badge.rewarded,.badge.approved{background:var(--success-bg);color:var(--success)}.badge.open{background:#6366f11f;color:#818cf8}.badge.on_hold,.badge.pending{background:var(--warning-bg);color:var(--warning)}.badge.rejected{background:var(--danger-bg);color:var(--danger)}.badge.active{background:var(--success-bg);color:var(--success)}.badge.suspended{background:var(--warning-bg);color:var(--warning)}.badge.banned{background:var(--danger-bg);color:var(--danger)}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.badge.live .badge-dot{animation:pulse-dot 1.5s infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:var(--radius-md);font-size:.85rem;font-weight:600;border:1px solid transparent;transition:all var(--transition-base);white-space:nowrap}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-primary-hover);box-shadow:0 0 20px #3b82f64d}.btn-ghost{background:transparent;border-color:var(--border-color);color:var(--text-secondary)}.btn-ghost:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--text-muted)}.btn-success{background:var(--success);color:#fff}.btn-success:hover{filter:brightness(1.1)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(1.1)}.btn-sm{padding:6px 12px;font-size:.78rem}.filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.filter-bar select,.filter-bar input{padding:8px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.85rem;outline:none;transition:border-color var(--transition-base)}.filter-bar select:focus,.filter-bar input:focus{border-color:var(--accent-primary)}.filter-bar select option{background:var(--bg-secondary)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}.form-label{font-size:.82rem;font-weight:600;color:var(--text-muted)}.form-input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.9rem;outline:none;transition:all var(--transition-base)}.form-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);background:#0f172acc}.form-input::placeholder{color:#94a3b866}.form-input:disabled{opacity:.5;cursor:not-allowed;background:#0f172a4d}.form-input option{background:var(--bg-secondary)}.form-row{display:flex;gap:12px}.form-row>*{flex:1}.alert-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:8px;font-size:.85rem;transition:all var(--transition-base)}.alert-item:hover{border-color:var(--border-glow)}.alert-item .alert-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.alert-item .alert-dot.red{background:var(--danger)}.alert-item .alert-dot.yellow{background:var(--warning)}.alert-item .alert-dot.blue{background:var(--accent-primary)}.alert-item .alert-text{color:var(--text-secondary);flex:1}.alert-item .alert-count{font-weight:700;color:var(--text-primary);font-size:.9rem}.chart-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.chart-card .chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.chart-card .chart-title{font-size:1rem;font-weight:700}.tabs{display:flex;gap:2px;margin-bottom:24px;border-bottom:1px solid var(--border-color)}.tab-btn{padding:10px 20px;background:transparent;border:none;color:var(--text-secondary);font-size:.88rem;font-weight:500;position:relative;transition:color var(--transition-base)}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--accent-primary)}.tab-btn.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent-primary);border-radius:2px 2px 0 0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-in{animation:fadeInUp .4s ease forwards}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}.spin{animation:spin 1s linear infinite}select option{background:var(--bg-secondary)}.profile-modal-overlay{position:fixed;inset:0;z-index:1000;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:modalFadeIn .25s ease;padding:24px}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.profile-modal-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);width:100%;max-width:720px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-elevated),0 0 60px #3b82f614;animation:modalSlideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.profile-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color);flex-shrink:0}.profile-modal-header h3{font-size:1.15rem;font-weight:700;color:var(--text-primary)}.profile-modal-close{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);cursor:pointer}.profile-modal-close:hover{background:var(--danger-bg);color:var(--danger);border-color:#ef44444d}.profile-modal-body{flex:1;overflow-y:auto;padding:24px}.profile-section{margin-bottom:28px}.profile-section:last-child{margin-bottom:0}.profile-section-title{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skel{border-radius:6px;background:linear-gradient(90deg,#94a3b80f 25%,#94a3b81f,#94a3b80f 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.skel-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-color);gap:12px}.skel-row:last-child{border-bottom:none}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.content-grid.two-col{grid-template-columns:1fr}.page-content{padding:20px}}@media(max-width:768px){.sidebar{position:absolute;z-index:200}.sidebar.collapsed{width:0;min-width:0;border:none}.topbar{padding:0 16px}.profile-modal-card{max-height:90vh;border-radius:var(--radius-lg)}.profile-modal-overlay{padding:12px}}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100vw;background:var(--bg-primary);background-image:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.06) 0%,transparent 50%)}.login-card{width:100%;max-width:400px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:40px 36px 32px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-elevated)}.login-header{text-align:center;margin-bottom:32px}.login-logo{width:56px;height:56px;margin:0 auto 16px;border-radius:var(--radius-lg);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;color:#fff}.login-header h1{font-size:1.5rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-subtitle{color:var(--text-secondary);font-size:.88rem;margin-top:4px}.login-form{display:flex;flex-direction:column;gap:18px}.login-form .form-group{display:flex;flex-direction:column;gap:6px}.login-form .form-group label{font-size:.82rem;font-weight:600;color:var(--text-secondary)}.login-form .form-group input{width:100%;padding:11px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.9rem;outline:none;transition:all var(--transition-base)}.login-form .form-group input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.login-form .form-group input::placeholder{color:var(--text-muted)}.password-input-wrapper{position:relative}.password-input-wrapper input{padding-right:42px!important}.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);padding:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast)}.password-toggle:hover{color:var(--text-primary)}.login-error{padding:10px 14px;background:var(--danger-bg);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);color:var(--danger);font-size:.84rem;font-weight:500}.login-btn{width:100%;padding:12px;border:none;border-radius:var(--radius-md);background:var(--accent-gradient);color:#fff;font-size:.92rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all var(--transition-base);margin-top:4px}.login-btn:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 0 24px #3b82f64d}.login-btn:disabled{opacity:.7;cursor:not-allowed}.login-footer{text-align:center;margin-top:24px;color:var(--text-muted);font-size:.78rem}.spin-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.protected-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw;gap:16px;color:var(--text-muted)}.protected-loading p{font-size:.95rem}.access-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center;color:var(--text-secondary)}.access-denied svg{color:var(--danger);margin-bottom:16px;opacity:.6}.access-denied h2{font-size:1.4rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}.access-denied p{font-size:.92rem;max-width:400px}.access-denied-hint{margin-top:4px;color:var(--text-muted);font-size:.84rem!important}.sidebar-admin-info{display:flex;flex-direction:column;padding:8px 10px 12px;gap:2px}.sidebar-admin-info .admin-name{font-size:.85rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-admin-info .admin-position{font-size:.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-footer-actions{display:flex;flex-direction:column;gap:6px}.sidebar-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-radius:var(--radius-md);background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);font-size:.85rem;transition:all var(--transition-base)}.sidebar-logout:hover{background:var(--danger-bg);color:var(--danger);border-color:#ef444433}.setup-page{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100vw;background:var(--bg-primary);background-image:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.06) 0%,transparent 50%);padding:24px}.setup-card{width:100%;max-width:520px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:36px 32px 32px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-elevated)}.step-indicator{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:36px}.step-item{display:flex;align-items:center;gap:0}.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;border:2px solid var(--border-color);color:var(--text-muted);background:transparent;transition:all var(--transition-base);flex-shrink:0}.step-item.active .step-circle{border-color:var(--accent-primary);background:var(--accent-primary);color:#fff;box-shadow:0 0 16px var(--accent-glow)}.step-item.completed .step-circle{border-color:var(--success);background:var(--success);color:#fff}.step-label{display:none}.step-line{width:40px;height:2px;background:var(--border-color);margin:0 6px;border-radius:2px;transition:background var(--transition-base)}.step-item.completed+.step-item .step-line,.step-item.completed .step-line{background:var(--success)}.setup-loading,.setup-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0;gap:16px}.setup-error-state svg{color:var(--warning);opacity:.8}.setup-error-state h2{font-size:1.3rem;font-weight:700;color:var(--text-primary)}.setup-error-state p{color:var(--text-secondary);font-size:.9rem;max-width:360px;line-height:1.6}.setup-loading p{color:var(--text-muted);font-size:.92rem}.setup-welcome{text-align:center;padding:20px 0 8px}.setup-title{font-size:1.5rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.setup-role{color:var(--text-secondary);font-size:.92rem;margin-bottom:12px}.setup-role strong{color:var(--accent-primary)}.setup-desc{color:var(--text-muted);font-size:.88rem;line-height:1.6;margin-bottom:28px}.setup-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:none;border-radius:var(--radius-md);font-size:.92rem;font-weight:700;cursor:pointer;transition:all var(--transition-base)}.setup-btn.primary{background:var(--accent-gradient);color:#fff}.setup-btn.primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 0 24px #3b82f64d}.setup-btn.primary:disabled{opacity:.5;cursor:not-allowed}.setup-btn.full-width{width:100%;margin-top:8px}.setup-form{display:flex;flex-direction:column;gap:4px}.setup-section{padding:20px 0;border-bottom:1px solid var(--border-color)}.setup-section:last-of-type{border-bottom:none}.setup-section-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--text-primary)}.setup-section-header h3{font-size:1rem;font-weight:700;margin:0}.setup-section-header svg{color:var(--accent-primary)}.setup-section-subtitle{color:var(--text-secondary);font-size:.84rem;margin-bottom:14px;margin-top:-8px}.optional-tag{font-size:.72rem;font-weight:500;color:var(--text-muted);background:#64748b26;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle}.password-strength{display:flex;align-items:center;gap:10px;margin-top:6px}.strength-bar{flex:1;height:4px;background:#94a3b81a;border-radius:4px;overflow:hidden}.strength-fill{height:100%;border-radius:4px;transition:width var(--transition-base),background var(--transition-base)}.strength-fill.weak{background:var(--danger)}.strength-fill.medium{background:var(--warning)}.strength-fill.strong{background:var(--success)}.strength-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.strength-label.weak{color:var(--danger)}.strength-label.medium{color:var(--warning)}.strength-label.strong{color:var(--success)}.payment-method-selector{display:flex;gap:8px;margin-bottom:16px}.payment-method-btn{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);text-align:center}.payment-method-btn:hover{border-color:var(--text-muted);color:var(--text-primary)}.payment-method-btn.active{border-color:var(--accent-primary);background:#3b82f61a;color:var(--accent-primary);box-shadow:0 0 12px var(--accent-glow)}.field-error{font-size:.78rem;color:var(--danger);margin-top:4px}.field-success{font-size:.78rem;color:var(--success);margin-top:4px}.field-hint{font-size:.76rem;color:var(--text-muted);margin-top:4px;line-height:1.5}.setup-success{text-align:center;padding:32px 0 16px}.success-checkmark{margin-bottom:20px;color:var(--success);animation:successPop .5s cubic-bezier(.4,0,.2,1)}@keyframes successPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.setup-redirect-text{color:var(--text-muted);font-size:.84rem;margin-top:8px}.redirect-loader{margin-top:20px;color:var(--text-muted)}.setup-form .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}.setup-form .form-group label{font-size:.82rem;font-weight:600;color:var(--text-secondary)}.setup-form .form-group input{width:100%;padding:11px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.9rem;outline:none;transition:all var(--transition-base)}.setup-form .form-group input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.setup-form .form-group input::placeholder{color:var(--text-muted)}@media(max-width:560px){.setup-card{padding:28px 20px 24px}.step-line{width:24px}.step-circle{width:28px;height:28px;font-size:.72rem}.payment-method-selector{flex-direction:column}}.emp-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.emp-stat-card{display:flex;align-items:center;gap:14px;padding:20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.emp-stat-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.emp-stat-value{font-size:1.5rem;font-weight:800;color:var(--text-primary);line-height:1}.emp-stat-label{font-size:.78rem;color:var(--text-muted);margin-top:2px}.emp-filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.emp-search-box{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);flex:1;min-width:200px;max-width:320px;color:var(--text-muted)}.emp-search-box input{background:none;border:none;outline:none;color:var(--text-primary);font-size:.85rem;width:100%}.emp-search-box input::placeholder{color:var(--text-muted)}.emp-filter-group{display:flex;align-items:center;gap:8px}.emp-filter-select{padding:9px 12px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.82rem;outline:none;cursor:pointer}.emp-filter-select:focus{border-color:var(--accent-primary)}.emp-table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.emp-table td{vertical-align:middle;padding:12px 16px}.emp-cell-user{display:flex;align-items:center;gap:12px}.emp-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6366f14d,#8b5cf64d);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#a5b4fc;flex-shrink:0}.emp-user-name{font-weight:600;font-size:.88rem;color:var(--text-primary)}.emp-user-email{font-size:.76rem;color:var(--text-muted)}.emp-position{font-size:.84rem;color:var(--text-secondary)}.emp-row-expanded{border-bottom:none!important}.emp-badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:.72rem;font-weight:600;letter-spacing:.3px}.emp-badge-active{color:var(--success);background:#10b9811f}.emp-badge-suspended{color:var(--danger);background:#ef44441f}.emp-badge-pending{color:var(--warning);background:#f59e0b1f}.emp-actions{display:flex;gap:4px}.emp-action-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:none;color:var(--text-muted);cursor:pointer;transition:all var(--transition-base)}.emp-action-btn:hover{color:var(--accent-primary);border-color:var(--accent-primary);background:#3b82f614}.emp-action-danger:hover{color:var(--danger)!important;border-color:var(--danger)!important;background:#ef444414!important}.emp-action-success:hover{color:var(--success)!important;border-color:var(--success)!important;background:#10b98114!important}.emp-detail-row td{padding:0 16px 16px!important;border-top:none!important}.emp-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:16px 20px;background:#6366f108;border:1px solid var(--border-color);border-radius:var(--radius-md)}.emp-detail-section h5{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--text-primary);margin-bottom:10px}.emp-detail-section h5 svg{color:var(--accent-primary)}.emp-detail-perms{display:grid;grid-template-columns:1fr 1fr;gap:4px}.emp-detail-tags{display:flex;flex-wrap:wrap;gap:6px}.emp-detail-tag{padding:2px 10px;border-radius:10px;font-size:.72rem;font-weight:600;color:var(--text-secondary);background:#94a3b81a;border:1px solid var(--border-color)}.emp-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .2s ease}.emp-modal{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;width:480px;max-width:92vw;max-height:85vh;overflow-y:auto;animation:slideUp .25s ease}.emp-modal-lg{width:600px}.emp-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.emp-modal-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.emp-modal-close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:var(--radius-sm)}.emp-modal-close:hover{color:var(--text-primary)}.emp-modal-actions{display:flex;gap:10px;justify-content:flex-end}.emp-modal-error{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--danger);margin-bottom:14px}.emp-btn-secondary{padding:9px 18px;border-radius:var(--radius-md);background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-weight:500}.emp-btn-danger{padding:9px 18px;border-radius:var(--radius-md);background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#ef4444;cursor:pointer;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}.emp-btn-danger:disabled,.emp-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.emp-invite-form{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.emp-form-section{padding:16px 0;border-bottom:1px solid var(--border-color)}.emp-form-section:last-child{border-bottom:none}.emp-form-section-title{font-size:.88rem;font-weight:700;color:var(--text-primary);margin-bottom:14px}.emp-form-row{display:flex;gap:14px;margin-bottom:12px}.emp-form-field{flex:1;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}.emp-field-label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}.emp-field-input{padding:9px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.88rem;outline:none;width:100%;box-sizing:border-box;transition:border-color var(--transition-base)}.emp-field-input:focus{border-color:var(--accent-primary)}.emp-field-input::placeholder{color:var(--text-muted)}.emp-field-select{padding:9px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.88rem;outline:none;cursor:pointer;width:100%;box-sizing:border-box}.emp-field-select:focus{border-color:var(--accent-primary)}.emp-input-affix{display:flex;align-items:center;gap:0;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.emp-input-affix:focus-within{border-color:var(--accent-primary)}.emp-input-affix .emp-field-input{border:none;border-radius:0;background:transparent}.emp-affix-pre,.emp-affix-post{padding:0 10px;font-size:.82rem;font-weight:700;color:var(--text-muted);flex-shrink:0}.emp-checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.emp-perm-grid{grid-template-columns:repeat(3,1fr)}.emp-checkbox-item{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-secondary);cursor:pointer;padding:4px 0}.emp-checkbox-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary);cursor:pointer}.emp-readonly{opacity:.7;cursor:default}.emp-readonly input{cursor:default!important}@media(max-width:768px){.emp-stats-row{grid-template-columns:1fr}.emp-filter-bar{flex-direction:column;align-items:stretch}.emp-search-box{max-width:100%}.emp-filter-group{flex-wrap:wrap}.emp-form-row{flex-direction:column}.emp-perm-grid{grid-template-columns:repeat(2,1fr)}.emp-detail-grid{grid-template-columns:1fr}.emp-modal-lg{width:95vw}}.asgn-workload-panel{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg, 14px);margin-bottom:20px;overflow:hidden}.asgn-workload-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:transparent;border:none;color:var(--text-primary);cursor:pointer;transition:background .15s}.asgn-workload-toggle:hover{background:var(--hover-bg, rgba(255,255,255,.03))}.asgn-workload-count{font-size:.72rem;padding:2px 8px;border-radius:10px;background:var(--accent-primary-bg, rgba(99,102,241,.12));color:var(--accent-primary, #6366f1);font-weight:600}.asgn-workload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:0 20px 20px}.asgn-workload-card{background:var(--hover-bg, rgba(255,255,255,.03));border:1px solid var(--border-color);border-radius:var(--radius-md, 10px);padding:14px;transition:border-color .2s}.asgn-workload-card:hover{border-color:var(--accent-primary, #6366f1)}.asgn-wl-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.asgn-wl-role{font-size:.72rem;padding:1px 6px;border-radius:6px;background:#6366f11a;color:var(--accent-primary, #6366f1);font-weight:500}.asgn-wl-stats{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.asgn-wl-payment{font-size:.68rem;padding:1px 5px;border-radius:4px;background:#f59e0b1a;color:#f59e0b;font-weight:500;text-transform:capitalize}.asgn-wl-bar-track{height:4px;background:#ffffff0f;border-radius:2px;overflow:hidden}.asgn-wl-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width .4s ease;min-width:4px}.asgn-table th,.asgn-table td{vertical-align:middle}.asgn-game-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:.72rem;font-weight:600;white-space:nowrap}.asgn-unassigned-ref{color:#ef4444;font-size:.82rem;font-weight:600;background:#ef44441a;padding:2px 8px;border-radius:6px}.asgn-no-caster{color:#f59e0b;font-size:.82rem;font-weight:500;background:#f59e0b14;padding:2px 8px;border-radius:6px}.asgn-acting-caster{color:#8b5cf6;font-size:.78rem;font-weight:500;font-style:italic;background:#8b5cf614;padding:2px 8px;border-radius:6px}.asgn-badge-pending{background:#f59e0b1f!important;color:#f59e0b!important}.asgn-badge-assigned{background:#3b82f61f!important;color:#3b82f6!important}.asgn-badge-completed{background:#10b9811f!important;color:#10b981!important}.asgn-badge-passed{background:#ef44441f!important;color:#ef4444!important}.asgn-pm-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:600}.asgn-pm-fixed{background:#10b9811a;color:#10b981}.asgn-pm-pct{background:#f59e0b1a;color:#f59e0b}.asgn-pm-toggle{display:flex;gap:0;border:1px solid var(--border-color);border-radius:var(--radius-md, 10px);overflow:hidden;width:fit-content}.asgn-pm-opt{padding:6px 18px;font-size:.82rem;font-weight:600;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s}.asgn-pm-opt.active{background:var(--accent-primary, #6366f1);color:#fff}.asgn-staff-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;border:1px solid var(--border-color);border-radius:var(--radius-md, 10px);padding:8px}.asgn-staff-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s}.asgn-staff-option:hover{background:var(--hover-bg, rgba(255,255,255,.04))}.asgn-staff-option.selected{background:#6366f114;border:1px solid rgba(99,102,241,.25)}.asgn-staff-option input[type=radio]{accent-color:var(--accent-primary, #6366f1)}.asgn-recommended-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:6px;font-size:.65rem;font-weight:700;background:#10b9811f;color:#10b981;text-transform:uppercase;letter-spacing:.02em}.asgn-modal-details{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--hover-bg, rgba(255,255,255,.03));border-radius:var(--radius-md, 10px);margin-bottom:16px}.asgn-modal-detail-row{display:flex;align-items:center;justify-content:space-between;font-size:.84rem}.asgn-modal-detail-label{color:var(--text-muted);font-size:.78rem}.asgn-force-warning{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#ef444414;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md, 10px);color:#ef4444;font-size:.82rem;font-weight:500;margin-bottom:16px}.asgn-textarea{resize:vertical;min-height:80px;font-family:inherit}.asgn-rac-toggle{padding:12px 14px;background:#8b5cf60f;border:1px solid rgba(139,92,246,.15);border-radius:var(--radius-md, 10px);margin-bottom:12px}@media(max-width:768px){.asgn-workload-grid{grid-template-columns:1fr}}.sal-card-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:8px;font-size:.72rem;font-weight:600;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s}.sal-card-btn:hover{background:var(--hover-bg, rgba(255,255,255,.04));border-color:var(--accent-primary, #6366f1);color:var(--text-primary)}.sal-card-btn-accent{background:#6366f114;border-color:#6366f133;color:var(--accent-primary, #6366f1)}.sal-card-btn-accent:hover{background:#6366f129;border-color:#6366f159}.sal-dropdown{margin-top:10px;padding:10px 12px;background:var(--hover-bg, rgba(255,255,255,.03));border-radius:var(--radius-md, 10px);display:flex;flex-direction:column;gap:7px}.sal-dropdown-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-muted)}.sal-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sal-section-label{font-size:.82rem;font-weight:700;color:var(--text-secondary);margin:0 0 10px;letter-spacing:.02em}.sal-game-label{font-weight:700;font-size:.8rem}.sal-settings-table{width:100%;border-collapse:collapse;font-size:.8rem}.sal-settings-table th{text-align:left;padding:6px 10px;font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border-color)}.sal-settings-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.03)}.sal-inline-value{cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-weight:600;font-size:.8rem;transition:background .15s}.sal-inline-value:hover{background:#6366f114}.sal-edit-icon{opacity:0;transition:opacity .15s;color:var(--text-muted)}.sal-inline-value:hover .sal-edit-icon{opacity:1}.sal-inline-input{width:72px;padding:3px 8px;border:1px solid var(--accent-primary, #6366f1);border-radius:6px;background:var(--card-bg);color:var(--text-primary);font-size:.82rem;font-weight:600;outline:none}.sal-salary-groups{display:flex;flex-direction:column;gap:12px}.sal-emp-card{padding:16px 20px!important}.sal-emp-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.sal-emp-records{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border-color);padding-top:10px}.sal-record-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:6px;transition:background .15s}.sal-record-row:hover{background:var(--hover-bg, rgba(255,255,255,.03))}.sal-records-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-md, 10px);padding:8px}.sal-record-item{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:6px;font-size:.82rem}.sal-record-item:nth-child(odd){background:#ffffff05}.access-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 40px;color:var(--text-muted);text-align:center}.access-denied h2{margin-top:12px;font-size:1.2rem;color:var(--text-primary)}.access-denied p{font-size:.88rem;margin-top:6px}@media(max-width:1200px){.sal-settings-grid{grid-template-columns:1fr}}@media(max-width:768px){.sal-emp-header{flex-direction:column;gap:12px}}.logout-modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.logout-modal-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:32px;max-width:400px;width:90%;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.logout-modal-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}