.app-layout{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden}.auth-layout{flex:1;display:flex;flex-direction:column;width:100%;height:100%}.main-layout{display:flex;flex:1;overflow:hidden;width:100%;height:100%}.sidebar{width:250px;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:var(--transition);height:100vh;position:fixed;z-index:100}.logo-section{padding:1rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:center;align-items:center}.logo{display:flex;align-items:center;justify-content:center}.logo-video{width:180px;height:60px;object-fit:contain;mix-blend-mode:screen;filter:brightness(1.5) contrast(2)}.logo-image{width:40px;height:40px;object-fit:contain;display:none}.logo-text{display:none}.main-menu{flex:1;padding:1rem 0;overflow-y:auto}.main-menu ul{list-style:none;padding:0;margin:0}.main-menu li{margin-bottom:.25rem}.menu-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;text-decoration:none;color:var(--text-secondary);transition:var(--transition);border-left:3px solid transparent}.menu-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}.menu-item.active{background:var(--bg-tertiary);color:var(--accent-color);border-left:3px solid var(--accent-color)}.menu-icon{font-size:1.25rem;width:24px;text-align:center}.main-content-wrapper{flex:1;display:flex;flex-direction:column;margin-left:250px;height:100vh;width:calc(100% - 250px);overflow:hidden}.top-navbar{display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem;height:60px;background:var(--bg-primary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:90}.submenu-section{flex:1}.submenu{display:flex;list-style:none;gap:8px;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;margin:0;padding:8px 0 8px 16px}.submenu-item{padding:10px 20px;text-decoration:none;color:var(--text-secondary);border-radius:8px;transition:all .35s cubic-bezier(.43,.13,.23,.96);position:relative;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;background:transparent;border:none;font-size:.95rem;letter-spacing:.3px}.submenu-item:after{content:"";position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--accent-color) 0%,var(--accent-color) 100%);transition:width .35s cubic-bezier(.43,.13,.23,.96),box-shadow .35s cubic-bezier(.43,.13,.23,.96);border-radius:3px 3px 0 0}.submenu-item:hover{color:var(--accent-color);background:rgba(76,175,80,.1);transform:translateY(-3px);box-shadow:0 4px 12px #4caf5026}.submenu-item:hover:after{width:100%;box-shadow:0 2px 8px #4caf504d}.submenu-item.active{color:var(--accent-color);background:rgba(76,175,80,.15);font-weight:600;box-shadow:0 4px 16px #4caf5033}.submenu-item.active:after{width:100%;box-shadow:0 2px 10px #4caf5066}.user-section{display:flex;align-items:center;gap:1rem}.business-status-btn{position:relative;width:180px;height:44px;border:none;border-radius:22px;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.status-text{position:relative;z-index:2;color:#fff;letter-spacing:.5px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2);transition:all .3s ease}.status-icon{position:absolute;left:12px;width:10px;height:10px;border-radius:50%;background:white;z-index:3;transition:all .3s ease;box-shadow:0 0 8px #fffc;animation:statusPulse 2s ease-in-out infinite}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.business-status-btn.status-changing{transform:scale(1.05)}.business-status-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.business-status-btn:active{transform:scale(.98)}.status-offline{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.status-offline:hover{background:linear-gradient(135deg,#7c8eec 0%,#8a5cb0 100%)}.status-online{background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);animation:onlineGlow 3s ease-in-out infinite}.status-online:hover{background:linear-gradient(135deg,#13a89e 0%,#45f589 100%)}@keyframes onlineGlow{0%,to{box-shadow:0 2px 8px #38ef7d66}50%{box-shadow:0 4px 16px #38ef7d99}}.status-gaming{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);cursor:not-allowed;animation:gamingPulse 2s ease-in-out infinite}.status-gaming:hover{background:linear-gradient(135deg,#f3a0fc 0%,#f66d7f 100%)}@keyframes gamingPulse{0%,to{box-shadow:0 2px 8px #f5576c66}50%{box-shadow:0 4px 16px #f5576c99}}.status-text{position:relative;z-index:1;letter-spacing:.5px}.user-info{display:flex;align-items:center;gap:.75rem}.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-color);color:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem}.avatar-image-header{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-color);cursor:pointer;transition:all .3s ease}.avatar-image-header:hover{transform:scale(1.1);box-shadow:0 2px 8px #4caf504d}.username{font-weight:500;color:var(--text-primary)}.main-content-area{flex:1;overflow-y:auto;padding:1.5rem 20px;background:var(--bg-primary);width:100%;height:100%;animation:fadeInSmoothly .45s cubic-bezier(.43,.13,.23,.96)}@keyframes fadeInSmoothly{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInSmoothly{0%{opacity:0;transform:translate(25px)}to{opacity:1;transform:translate(0)}}.page-container{width:100%;max-width:100%;margin:0 auto;padding:0 20px;animation:slideInSmoothly .45s cubic-bezier(.43,.13,.23,.96)}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes barGrowUp{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes barSlideIn{0%{opacity:0;transform:translate(30px) scaleY(.8)}to{opacity:1;transform:translate(0) scaleY(1)}}@keyframes tooltipBounce{0%{opacity:0;transform:translateY(10px) scale(.8)}50%{transform:translateY(-5px) scale(1.05)}to{opacity:1;transform:translateY(0) scale(1)}}.page-title{text-align:left;margin-bottom:1.5rem;font-size:1.5rem;color:var(--text-primary);font-weight:600}.dashboard-container,.orders-container,.customers-container,.quick-dispatch-container{display:flex;flex-direction:column;gap:1.5rem;width:100%}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-bottom:1.5rem}.stat-card{background:rgba(45,50,65,.6);border:1px solid rgba(76,175,80,.2);border-radius:10px;padding:1.5rem;text-align:center;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-card:hover{border-color:#4caf5066;background:rgba(45,50,65,.8);transform:translateY(-4px);box-shadow:0 8px 20px #4caf501a}.table-container,.orders-list,.customers-list{background:rgba(45,50,65,.6);border:1px solid rgba(76,175,80,.2);border-radius:10px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chart-container{background:rgba(45,50,65,.6);border:1px solid rgba(76,175,80,.2);border-radius:10px;padding:1.5rem;margin-bottom:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.filter-bar,.search-bar{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;background:rgba(45,50,65,.4);padding:1rem 1.5rem;border-radius:10px;border:1px solid rgba(76,175,80,.15)}@media (max-width: 768px){.sidebar{width:70px}.logo-text,.menu-text{display:none}.logo{justify-content:center}.menu-item{justify-content:center;padding:.75rem}.main-content-wrapper{margin-left:70px}}.form-group label{display:block;margin-bottom:.5rem;font-weight:700}.form-group input,.form-group textarea,.form-group select{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.submit-btn{background-color:#007bff;color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;border-radius:4px;cursor:pointer;margin-top:1rem}.submit-btn:hover{background-color:#0056b3}.order-card{border:1px solid #ddd;border-radius:8px;padding:1rem;margin-bottom:1rem;box-shadow:0 2px 4px #0000001a}.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #eee}.order-title{font-size:1.2rem;font-weight:700}.order-status{padding:.25rem .5rem;border-radius:4px;font-size:.875rem;font-weight:700}.status-pending{background-color:#fff3cd;color:#856404}.status-assigned{background-color:#cce5ff;color:#004085}.status-completed{background-color:#d4edda;color:#155724}.order-details{margin-top:1rem}.order-detail-item{display:flex;margin-bottom:.5rem}.order-detail-label{font-weight:700;width:120px}.order-actions{margin-top:1rem;display:flex;gap:.5rem}.action-btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem}.btn-primary{background-color:#007bff;color:#fff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-success{background-color:#28a745;color:#fff}.error-text{color:#dc3545;font-size:.875rem;margin-top:.25rem;display:block}.search-bar{margin-bottom:1rem}.search-input-container{position:relative;display:flex;align-items:center}.search-input{flex:1;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.clear-button{position:absolute;right:60px;background:none;border:none;cursor:pointer;color:#999}.search-button{background-color:#007bff;color:#fff;border:none;padding:.5rem 1rem;border-radius:0 4px 4px 0;cursor:pointer;margin-left:-1px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;transform:translateZ(0);will-change:opacity}.modal-content{background:var(--bg-secondary);border-radius:16px;box-shadow:0 25px 80px #00000080,0 0 40px #667eea26,inset 0 1px #ffffff1a;max-width:560px;width:100%;max-height:calc(100vh - 2rem);overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(102,126,234,.35);transform:translateZ(0);will-change:transform,opacity;margin:0}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;flex-shrink:0;gap:1rem;margin:0;border:none}.modal-header h2{margin:0;font-size:.9375rem;font-weight:600;color:#fff!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;text-shadow:0 1px 3px rgba(0,0,0,.2)}.modal-close{background:rgba(0,0,0,.3)!important;border:none;width:32px;height:32px;border-radius:50%;font-size:1.25rem;font-weight:300;line-height:1;cursor:pointer;color:#fff!important;display:flex;align-items:center;justify-content:center;transition:background .15s ease;flex-shrink:0}.modal-close:hover{background:rgba(0,0,0,.5)!important;color:#fff!important}.modal-body{padding:1.25rem;overflow-y:auto;flex:1;background:var(--bg-secondary);border-radius:0 0 16px 16px}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#007bff;border-radius:50%;animation:spin 1s linear infinite}.spinner-small{width:20px;height:20px}.spinner-medium{width:40px;height:40px}.spinner-large{width:60px;height:60px}.loading-message{margin-top:1rem;color:#666}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1rem;text-align:center}.stat-card h3{margin-top:0;color:#666}.stat-value{font-size:2rem;font-weight:700;margin:0}.stat-value.pending{color:#ffc107}.stat-value.completed{color:#28a745}.stat-value.today{color:#007bff}.chart-placeholder{background:#f8f9fa;border:1px dashed #dee2e6;border-radius:8px;padding:2rem;text-align:center;color:#666;margin-bottom:2rem}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}.feature-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1.5rem;text-align:center}.feature-card h3{margin-top:0;color:#333}.cta-section{text-align:center;margin:2rem 0;padding:2rem;background:#e9f7fe;border-radius:8px}.error-message{background-color:#f8d7da;color:#721c24;padding:.75rem;border-radius:4px;margin-bottom:1rem}.orders-filter{margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.orders-filter select{padding:.5rem;border:1px solid #ddd;border-radius:4px}.profile-card{background:#282a2c52;border:1px solid #9ce49a83;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.profile-header{display:flex;align-items:center;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #dee2e6}.profile-avatar{margin-right:1rem}.avatar-placeholder{width:80px;height:80px;background:#007bff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.profile-info h2{margin:0 0 .5rem}.profile-info p{margin:0;color:#666}.detail-item{display:flex;margin-bottom:1rem}.detail-label{font-weight:700;width:100px}.form-actions{margin-top:1.5rem;display:flex;gap:.5rem}.security-section{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1.5rem}.security-section h3{margin-top:0}.security-options{display:flex;gap:.5rem;flex-wrap:wrap}:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e0e0e0;--text-primary: #212121;--text-secondary: #757575;--text-tertiary: #9e9e9e;--border-color: #e0e0e0;--shadow: 0 2px 10px rgba(0, 0, 0, .1);--accent-color: #000000;--accent-hover: #333333;--success: #4caf50;--warning: #ff9800;--error: #f44336;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary: #121212;--bg-secondary: #1e1e1e;--bg-tertiary: #2d2d2d;--text-primary: #ffffff;--text-secondary: #bdbdbd;--text-tertiary: #9e9e9e;--border-color: #333333;--shadow: 0 2px 10px rgba(0, 0, 0, .3);--accent-color: #ffffff;--accent-hover: #cccccc;--success: #66bb6a;--warning: #ffa726;--error: #ef5350}.theme-toggle{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;padding:.25rem;display:flex;align-items:center;cursor:pointer;transition:var(--transition);width:60px;height:30px;position:relative}.theme-toggle:hover{background:var(--bg-tertiary)}.toggle-handle{width:24px;height:24px;border-radius:50%;background:var(--accent-color);position:absolute;transition:var(--transition);transform:translate(2px);box-shadow:0 2px 4px #0003}[data-theme=dark] .toggle-handle{transform:translate(32px)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);transition:var(--transition);line-height:1.6}.animated-button{position:relative;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;cursor:pointer;overflow:hidden;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.animated-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.5s}.animated-button:hover:before{left:100%}.animated-button:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-color)}.animated-button:active{transform:translateY(0)}.animated-button.primary{background:var(--accent-color);color:var(--bg-primary);border-color:var(--accent-color)}.animated-button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.animated-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--shadow)}.animated-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.1),transparent);transform:translate(-100%);transition:transform .6s ease;z-index:1}.animated-card:hover:before{transform:translate(100%)}.animated-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #00000026}.modern-navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--bg-primary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition)}.nav-brand{font-size:1.5rem;font-weight:700;color:var(--accent-color);text-decoration:none}.nav-menu{display:flex;list-style:none;gap:1rem}.nav-link{position:relative;color:var(--text-secondary);text-decoration:none;padding:.5rem 1rem;border-radius:8px;transition:var(--transition)}.nav-link:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent-color);transition:var(--transition);transform:translate(-50%)}.nav-link:hover{color:var(--text-primary)}.nav-link:hover:after{width:70%}.nav-link.active{color:var(--accent-color);background:var(--bg-secondary)}.nav-actions{display:flex;align-items:center;gap:1rem}.pulse-loader{display:inline-block;position:relative;width:80px;height:80px}.pulse-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:var(--accent-color);animation-timing-function:cubic-bezier(0,1,1,0)}.pulse-loader div:nth-child(1){left:8px;animation:pulse-loader1 .6s infinite}.pulse-loader div:nth-child(2){left:8px;animation:pulse-loader2 .6s infinite}.pulse-loader div:nth-child(3){left:32px;animation:pulse-loader2 .6s infinite}.pulse-loader div:nth-child(4){left:56px;animation:pulse-loader3 .6s infinite}@keyframes pulse-loader1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes pulse-loader3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes pulse-loader2{0%{transform:translate(0)}to{transform:translate(24px)}}.modern-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;transition:opacity .3s ease}.modern-modal-overlay.open{opacity:1}.modern-modal-content{background:var(--bg-primary);border-radius:16px;box-shadow:0 25px 50px #0000004d;max-width:500px;width:90%;max-height:90vh;overflow:hidden;transform:scale(.9);transition:transform .3s ease;border:1px solid rgba(76,175,80,.2)}.modern-modal-overlay.open .modern-modal-content{transform:scale(1)}.modern-input{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:1rem;transition:var(--transition)}.modern-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #0000001a}.modern-input::placeholder{color:var(--text-tertiary)}.modern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin:1.5rem 0}.status-indicator{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:24px;font-size:.875rem;font-weight:600;margin:0 auto;transition:all .3s ease;box-shadow:0 2px 8px #00000014;letter-spacing:.5px;min-width:130px}.status-indicator.success{background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);color:#fff;box-shadow:0 4px 15px #38ef7d66;animation:statusGlow 2s ease-in-out infinite}.status-indicator.warning{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff;box-shadow:0 4px 15px #f5576c66;animation:statusPulse 2s ease-in-out infinite}.status-indicator.info{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 4px 15px #667eea66}.status-indicator.primary{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;box-shadow:0 4px 15px #4facfe66;animation:statusShimmer 3s linear infinite}.status-indicator.default{background:linear-gradient(135deg,#bdc3c7 0%,#95a5a6 100%);color:#fff;box-shadow:0 2px 8px #bdc3c74d}.status-indicator.error{background:linear-gradient(135deg,#eb3349 0%,#f45c43 100%);color:#fff;box-shadow:0 4px 15px #eb334966}.status-dot{width:10px;height:10px;border-radius:50%;background:#ffffff;box-shadow:0 0 0 2px #ffffff4d;animation:statusDotPulse 2s ease-in-out infinite}@keyframes statusGlow{0%,to{box-shadow:0 4px 15px #38ef7d66}50%{box-shadow:0 4px 20px #38ef7d99}}@keyframes statusPulse{0%,to{transform:scale(1);box-shadow:0 4px 15px #f5576c66}50%{transform:scale(1.05);box-shadow:0 4px 20px #f5576c99}}@keyframes statusShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes statusDotPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.8}}.modern-footer{text-align:center;padding:2rem;border-top:1px solid var(--border-color);margin-top:2rem;color:var(--text-secondary);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.95)}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}:root{--mobile-nav-height: 64px;--mobile-header-height: 56px;--mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);--mobile-safe-area-top: env(safe-area-inset-top, 0px);--mobile-touch-target: 44px}@media (max-width: 767px){.sidebar{display:none!important}.main-content-wrapper{margin-left:0!important;width:100%!important;height:calc(100vh - var(--mobile-nav-height) - var(--mobile-safe-area-bottom))!important;padding-bottom:0!important}.top-navbar{height:var(--mobile-header-height)!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}.mobile-header-logo{display:flex;align-items:center;height:48px;width:120px;flex-shrink:0}.mobile-logo-video{width:120px;height:48px;border-radius:6px;object-fit:contain;background:transparent!important;mix-blend-mode:multiply}[data-theme=dark] .mobile-logo-video{mix-blend-mode:screen}.submenu-section{display:none!important}.user-section{flex:1;justify-content:flex-end;gap:8px!important}.user-info{display:none!important}.main-content-area{padding:0 12px!important;padding-bottom:var(--mobile-nav-height)!important}.page-container{padding:0!important}.page-title{font-size:1.25rem!important;margin-bottom:1rem!important}}.mobile-bottom-nav{display:none}@media (max-width: 767px){.mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(var(--mobile-nav-height) + var(--mobile-safe-area-bottom));padding-bottom:var(--mobile-safe-area-bottom);background:var(--bg-secondary);border-top:1px solid var(--border-color);z-index:1000;justify-content:space-around;align-items:center;box-shadow:0 -2px 10px #0000001a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.mobile-bottom-nav.mobile-order-tabs{justify-content:center;gap:0}.mobile-order-tabs .mobile-nav-item{flex:1;max-width:50%;height:100%;border-radius:0;padding:12px 0;border-right:1px solid var(--border-color)}.mobile-order-tabs .mobile-nav-item:last-child{border-right:none}.mobile-order-tabs .mobile-nav-item.active{background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1))}.mobile-order-tabs .mobile-nav-item.active:before{width:60%;height:3px;top:0}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 12px;min-width:60px;text-decoration:none;color:var(--text-secondary);font-size:10px;font-weight:500;transition:all .2s ease;border-radius:8px;position:relative}.mobile-nav-item:active{transform:scale(.95);background:var(--bg-tertiary)}.mobile-nav-item.active{color:var(--accent-color)}.mobile-nav-item.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:24px;height:3px;background:var(--accent-color);border-radius:0 0 3px 3px}.mobile-nav-icon{font-size:22px;line-height:1}.mobile-nav-label{font-size:11px;white-space:nowrap;font-weight:600}.mobile-nav-status{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}.mobile-nav-status-dot{position:absolute;top:2px;right:8px;width:8px;height:8px;border-radius:50%;animation:statusPulse 2s infinite}.mobile-nav-status-dot.offline{background:#667eea}.mobile-nav-status-dot.online{background:#38ef7d}.mobile-nav-status-dot.gaming{background:#f5576c}}@media (max-width: 767px){.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:calc(12px + var(--mobile-safe-area-top));background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.mobile-header-title{font-size:18px;font-weight:600;color:var(--text-primary)}.mobile-header-actions{display:flex;align-items:center;gap:12px}.mobile-header-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:var(--text-primary);font-size:20px;cursor:pointer;transition:background .2s}.mobile-header-btn:active{background:var(--bg-tertiary)}}@media (max-width: 767px){.mobile-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:16px;margin-bottom:12px;transition:all .2s ease}.mobile-card:active{transform:scale(.98);background:var(--bg-tertiary)}.mobile-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mobile-card-title{font-size:16px;font-weight:600;color:var(--text-primary)}.mobile-card-status{font-size:12px;padding:4px 10px;border-radius:12px}.mobile-card-content{display:flex;flex-direction:column;gap:8px}.mobile-card-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}.mobile-card-label{color:var(--text-secondary)}.mobile-card-value{color:var(--text-primary);font-weight:500}.mobile-card-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}.mobile-card-btn{flex:1;padding:10px 16px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-height:var(--mobile-touch-target)}.mobile-card-btn:active{transform:scale(.98)}.mobile-card-btn.primary{background:var(--accent-color);color:var(--bg-primary)}.mobile-card-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary)}}@media (max-width: 767px){.stats-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;margin-bottom:16px!important}.stat-card{padding:12px!important;border-radius:10px!important}.stat-card .stat-icon{font-size:20px!important;margin-bottom:4px!important}.stat-card .stat-label{font-size:11px!important}.stat-card .stat-value{font-size:18px!important}}@media (max-width: 767px){.form-group{margin-bottom:16px}.form-group label{font-size:14px;margin-bottom:8px}.form-group input,.form-group select,.form-group textarea,.modern-input{min-height:var(--mobile-touch-target)!important;font-size:16px!important;padding:12px!important;border-radius:10px!important}input,textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none}}@media (max-width: 767px){.animated-button{min-height:var(--mobile-touch-target);padding:12px 20px;font-size:15px;border-radius:10px}.animated-button.small{min-height:36px;padding:8px 14px;font-size:13px}.mobile-btn-full{width:100%;display:flex;justify-content:center;align-items:center}}@media (max-width: 767px){.modal-overlay,.modern-modal-overlay,.first-login-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.6)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;z-index:10000!important;animation:mobileFadeIn .2s ease!important}.modal-content,.modern-modal-content,.first-login-modal{width:100%!important;max-width:100%!important;min-width:unset!important;max-height:90vh!important;margin:0!important;padding:0!important;border-radius:24px 24px 0 0!important;background:var(--bg-secondary, #1a1a2e)!important;box-shadow:0 -20px 60px #0006!important;animation:mobileSlideUp .35s cubic-bezier(.32,.72,0,1)!important;transform:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}.modal-content:before,.modern-modal-content:before{content:""!important;display:block!important;width:40px!important;height:5px!important;background:rgba(255,255,255,.3)!important;border-radius:3px!important;margin:12px auto 8px!important;flex-shrink:0!important}.modal-header{padding:12px 20px 16px!important;background:transparent!important;border:none!important;flex-shrink:0!important}.modal-header h2{font-size:20px!important;font-weight:700!important;color:var(--text-primary, #fff)!important;text-align:center!important;margin:0!important;text-shadow:none!important}.modal-close{position:absolute!important;top:16px!important;right:16px!important;width:36px!important;height:36px!important;border-radius:50%!important;background:rgba(255,255,255,.1)!important;border:none!important;font-size:20px!important;color:var(--text-primary, #fff)!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;z-index:10!important}.modal-body{flex:1!important;overflow-y:auto!important;padding:0 20px 20px!important;-webkit-overflow-scrolling:touch!important}.modal-body button,.modal-content button,.modern-modal-content button{min-height:50px!important;font-size:16px!important;border-radius:14px!important;font-weight:600!important}.modal-body input,.modal-body select,.modal-body textarea{min-height:50px!important;font-size:16px!important;padding:14px 16px!important;border-radius:12px!important;background:var(--bg-primary, #12121a)!important;border:1px solid var(--border-color, #333)!important}.modal-actions,.modal-footer{display:flex!important;gap:12px!important;padding:16px 20px!important;padding-bottom:calc(16px + env(safe-area-inset-bottom,20px))!important;background:var(--bg-secondary, #1a1a2e)!important;border-top:1px solid var(--border-color, #333)!important;flex-shrink:0!important}.modal-actions button,.modal-footer button{flex:1!important}.btn-save,.btn-confirm{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;color:#fff!important;border:none!important}.btn-cancel{background:rgba(255,255,255,.1)!important;color:var(--text-primary, #fff)!important;border:1px solid rgba(255,255,255,.2)!important}}@keyframes mobileSlideUp{0%{transform:translateY(100%);opacity:.8}to{transform:translateY(0);opacity:1}}@keyframes mobileSlideDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.8}}@keyframes mobileFadeIn{0%{opacity:0}to{opacity:1}}@keyframes mobileScaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 767px){.table-container table,.order-table-container table{display:none!important}.mobile-order-list{display:block!important}.mobile-order-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:16px;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000000f;transition:transform .2s ease,box-shadow .2s ease}.mobile-order-card:active{transform:scale(.98);box-shadow:0 1px 4px #0000001a}.mobile-order-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-accent, var(--accent-color));border-radius:4px 0 0 4px}.mobile-order-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding-left:8px}.mobile-order-id{font-size:14px;color:var(--text-primary);font-weight:600;font-family:monospace}.mobile-order-time{font-size:12px;color:var(--text-tertiary);margin-top:2px}.mobile-order-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:12px;padding-left:8px;line-height:1.4}.mobile-order-info{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;font-size:14px;margin-bottom:12px;padding:12px;background:var(--bg-tertiary);border-radius:10px}.mobile-order-info-item{display:flex;align-items:center;gap:6px}.mobile-order-info-label{color:var(--text-tertiary);font-size:16px}.mobile-order-info-value{color:var(--text-primary);font-weight:500}.mobile-order-price{font-size:20px;font-weight:700;color:#f5576c}.mobile-order-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border-color);gap:8px}.mobile-order-status{font-size:12px;padding:4px 10px;border-radius:10px}.mobile-order-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.mobile-order-btn{padding:10px 16px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;min-height:40px;transition:all .2s ease}.mobile-order-btn:active{transform:scale(.95)}.mobile-order-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.mobile-order-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.page-container{padding:0!important}.mobile-page-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:50}.mobile-page-title{font-size:18px;font-weight:700;color:var(--text-primary)}.mobile-page-count{font-size:14px;color:var(--text-secondary);background:var(--bg-tertiary);padding:4px 12px;border-radius:20px}.mobile-page-count strong{color:var(--accent-color);font-weight:700}.mobile-filter-bar{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.mobile-filter-bar::-webkit-scrollbar{display:none}.mobile-filter-chip{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;font-size:13px;color:var(--text-primary);white-space:nowrap;cursor:pointer;transition:all .2s ease}.mobile-filter-chip.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.mobile-filter-chip:active{transform:scale(.95)}.mobile-order-list-container{padding:12px 16px;padding-bottom:calc(var(--mobile-nav-height) + 20px + var(--mobile-safe-area-bottom))}.mobile-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.mobile-empty-icon{font-size:48px;margin-bottom:16px}.mobile-empty-text{font-size:15px;color:var(--text-secondary);line-height:1.6}}@media (max-width: 767px){.filter-bar,.search-bar{flex-direction:column!important;gap:10px!important;padding:12px!important;margin-bottom:12px!important}.filter-bar>*,.search-bar>*{width:100%!important}.filter-bar input,.filter-bar select,.search-bar input{min-height:var(--mobile-touch-target)}}@media (max-width: 767px){.pagination{flex-wrap:wrap;justify-content:center;gap:6px;padding:12px}.pagination button{min-width:40px;min-height:40px;padding:8px 12px;font-size:14px}.pagination-info{width:100%;text-align:center;order:-1;margin-bottom:8px}}@media (max-width: 767px){.business-status-btn{width:auto!important;min-width:100px;height:36px!important;font-size:12px!important;padding:0 14px}.status-icon{width:8px!important;height:8px!important;left:10px!important}}@media (max-width: 767px){.quick-dispatch-container{padding:0!important}.quick-dispatch-form{padding:16px!important}.quick-dispatch-form .form-row{flex-direction:column!important;gap:12px!important}.quick-dispatch-form .form-group{width:100%!important}}@media (max-width: 767px){.user-card{padding:14px!important;margin-bottom:10px!important}.user-card-header{flex-direction:column!important;gap:8px!important;align-items:flex-start!important}.user-card-actions{width:100%;display:flex;justify-content:flex-end;gap:8px;margin-top:8px}}@media (max-width: 767px){.balance-card{padding:20px 16px!important}.balance-amount{font-size:32px!important}.withdraw-form{padding:16px!important}}@media (max-width: 767px){.profile-container{padding:16px!important}.profile-header{flex-direction:column!important;text-align:center!important}.profile-avatar{margin-bottom:16px!important}.profile-form .form-row{flex-direction:column!important}}@media (max-width: 767px){.role-list{grid-template-columns:1fr!important}.permission-group{padding:12px!important}.permission-checkbox{padding:10px!important}}@media (max-width: 767px){.dashboard-tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.dashboard-tabs::-webkit-scrollbar{display:none}.chart-section{padding:12px!important;margin-bottom:12px!important}.chart-container{padding:10px!important;overflow-x:auto!important}.chart-bar-wrapper{min-width:40px!important}}@media (max-width: 767px){.mobile-scroll-container{-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.pull-to-refresh{position:absolute;top:-60px;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:14px}.pull-to-refresh-spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin .8s linear infinite}}@media (max-width: 767px){.mobile-slide-in{animation:mobileSlideIn .3s ease}.mobile-fade-in{animation:mobileFadeIn .2s ease}@keyframes mobileSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes mobileFadeIn{0%{opacity:0}to{opacity:1}}}@supports (padding-bottom: env(safe-area-inset-bottom)){@media (max-width: 767px){.mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom)}.main-content-area{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px)}}}.hide-mobile{display:block}.show-mobile{display:none}@media (max-width: 767px){.hide-mobile{display:none!important}.show-mobile{display:block!important}.show-mobile-flex{display:flex!important}.show-mobile-grid{display:grid!important}}@media (max-width: 767px){.mobile-text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-text-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}@media (max-width: 767px){.mobile-hide-pool-filters{display:none!important}.page-container>div:first-child{padding:12px!important;margin-bottom:12px!important}.page-container>div:nth-child(2):has(select){display:none!important}}@media (max-width: 767px){.my-orders-filters{display:flex!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;gap:8px!important;padding:10px 12px!important;scrollbar-width:none!important}.my-orders-filters::-webkit-scrollbar{display:none!important}.my-orders-filters input,.my-orders-filters select{min-width:80px!important;max-width:100px!important;flex-shrink:0!important;padding:8px 10px!important;font-size:14px!important;min-height:40px!important}.my-orders-filters button{min-width:60px!important;flex-shrink:0!important;padding:8px 12px!important;font-size:14px!important;min-height:40px!important}.my-orders-title{font-size:18px!important;margin-bottom:8px!important;padding:0 12px!important}}@media (max-width: 767px){.profile-layout{display:flex!important;flex-direction:column!important;gap:16px!important;padding:16px!important}.profile-left,.profile-right{width:100%!important;max-width:100%!important}.profile-card{padding:20px!important}.profile-card h3,.module-header h3{font-size:20px!important;font-weight:700!important}.profile-avatar-section{margin-bottom:20px!important}.avatar-wrapper{width:80px!important;height:80px!important}.avatar-placeholder{width:80px!important;height:80px!important;font-size:32px!important}.user-info h2{font-size:22px!important;font-weight:700!important}.profile-details .label{font-size:14px!important;color:var(--text-secondary)!important}.profile-details .value{font-size:17px!important;font-weight:600!important}.detail-row{gap:16px!important;margin-bottom:12px!important}.detail-item{padding:12px!important;background:var(--bg-primary)!important;border-radius:12px!important}.profile-form label{font-size:15px!important;font-weight:600!important}.profile-form input,.profile-form select{font-size:16px!important;padding:14px!important;min-height:50px!important}.game-card{padding:14px 16px!important;border-radius:12px!important}.game-card .game-name{font-size:16px!important;font-weight:600!important}.game-card .game-desc{font-size:13px!important}.module-content{min-height:100px!important}.games-grid{gap:10px!important}.edit-btn,.add-btn{font-size:15px!important;padding:10px 18px!important;min-height:44px!important}.empty-state{font-size:16px!important;padding:24px!important}}@media (max-width: 767px){.modal-body [style*="padding: 1rem"]{padding:0!important}.modal-body [style*=linear-gradient]{margin:0 -20px 16px!important;border-radius:0!important;padding:16px 20px!important}.order-info-card{padding:16px!important;border-radius:14px!important;margin-bottom:14px!important}.order-info-row{padding:10px 0!important;font-size:15px!important}.order-info-row .label{font-size:14px!important}.order-info-row .value{font-size:15px!important;font-weight:600!important}}.first-login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}.first-login-modal{background:var(--bg-secondary);border-radius:20px;width:90%;max-width:750px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 80px #0006;animation:modalSlideIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.first-login-modal .fl-modal-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:1.5rem 2rem;text-align:center;border-radius:20px 20px 0 0}.first-login-modal .fl-modal-header h2{color:#fff;margin:0;font-size:1.5rem;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.2)}.first-login-modal .fl-modal-body{flex:1;overflow-y:auto;padding:1.25rem 2rem;display:flex;flex-direction:column;gap:1.25rem}.tutorial-section h3,.rules-section h3{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.tutorial-list{display:flex;flex-direction:column;gap:.6rem}.tutorial-item{display:flex;align-items:flex-start;gap:1rem;padding:.85rem 1rem;background:var(--bg-primary);border-radius:12px;border-left:4px solid #667eea;animation:slideInLeft .5s ease-out backwards;transition:all .3s ease}.tutorial-item:hover{transform:translate(5px);box-shadow:0 4px 15px #0000001a}.step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:.875rem;font-weight:700;flex-shrink:0}.step-text{font-size:.9rem;color:var(--text-primary);line-height:1.6}.step-text strong{color:#667eea}.rules-grid{display:flex;flex-direction:column;gap:.4rem;max-height:280px;overflow-y:auto;padding-right:.5rem}.rules-grid::-webkit-scrollbar{width:6px}.rules-grid::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}.rules-grid::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.rules-grid::-webkit-scrollbar-thumb:hover{background:#764ba2}.rules-section .rule-item{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem .85rem;background:var(--bg-primary);border-radius:8px;animation:fadeInUp .4s ease-out backwards;transition:all .3s ease}.rules-section .rule-item:hover{transform:translate(5px)}.rule-tag{display:inline-block;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;flex-shrink:0;background:#667eea;color:#fff}.rules-section .rule-item.bonus .rule-tag{background:#10b981}.rules-section .rule-item.warning .rule-tag{background:#f59e0b}.rules-section .rule-text{font-size:.8rem;color:var(--text-primary);line-height:1.4}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-footer{padding:1.5rem 2rem;border-top:1px solid var(--border-color);display:flex;justify-content:center}.close-btn{padding:1rem 3rem;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);min-width:250px}.close-btn.disabled{background:var(--bg-tertiary);color:var(--text-secondary);cursor:not-allowed}.close-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 25px #667eea66}.close-btn.active:hover{transform:translateY(-3px);box-shadow:0 12px 35px #667eea80}.close-btn.active:active{transform:translateY(-1px)}@media (max-width: 768px){.first-login-modal{width:95%;max-height:90vh;border-radius:16px}.first-login-modal .fl-modal-header{padding:1.25rem 1.5rem}.first-login-modal .fl-modal-header h2{font-size:1.25rem}.first-login-modal .fl-modal-body{padding:1rem 1.25rem}.tutorial-item{padding:.75rem}.close-btn{width:100%;min-width:unset}}.login-container{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.login-bg-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.login-bg-overlay{display:none}.login-background{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;opacity:.3}.gradient-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:float 15s ease-in-out infinite}.gradient-orb-1{width:400px;height:400px;background:radial-gradient(circle,rgba(76,175,80,.5),transparent);top:-100px;left:-100px;animation:float 15s ease-in-out infinite}.gradient-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(33,150,243,.5),transparent);bottom:-150px;right:-150px;animation:float 20s ease-in-out infinite reverse}.gradient-orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(255,152,0,.5),transparent);top:50%;right:10%;animation:float 18s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0)}25%{transform:translate(30px,-50px)}50%{transform:translate(-20px,30px)}75%{transform:translate(50px,20px)}}.login-card{position:relative;z-index:10;width:380px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:3rem 2.5rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:cardSlideIn .8s cubic-bezier(.34,1.56,.64,1);margin:0 auto}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-header{text-align:center;margin-bottom:2.5rem;animation:slideDown .8s cubic-bezier(.34,1.56,.64,1) .1s backwards}.login-logo-container{width:350px;height:140px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;animation:logoScale .6s cubic-bezier(.34,1.56,.64,1) .2s backwards;overflow:hidden}.login-logo-image{max-width:100%;max-height:100%;object-fit:contain;display:block;margin:0 auto 0 -20px}@keyframes logoScale{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.login-logo,.login-title{display:none}.login-subtitle{font-size:1.1rem;color:#fffffff2;margin:0;letter-spacing:1px;font-family:PingFang SC,Microsoft YaHei,Helvetica Neue,Arial,sans-serif;font-weight:300;text-shadow:0 1px 3px rgba(0,0,0,.3)}.login-error{display:flex;align-items:center;gap:.75rem;background:rgba(244,67,54,.1);border:1px solid rgba(244,67,54,.3);color:#f44336;padding:1rem 1.25rem;border-radius:12px;margin-bottom:2rem;font-size:.875rem;animation:shake .5s cubic-bezier(.34,1.56,.64,1)}.error-icon{font-size:1.25rem;flex-shrink:0}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.login-form{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.login-form-group{animation:slideUp .8s cubic-bezier(.34,1.56,.64,1) backwards}.login-form-group:nth-child(1){animation-delay:.2s}.login-form-group:nth-child(2){animation-delay:.3s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-input-wrapper{display:flex;align-items:center;gap:.75rem;padding:0 1rem;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:rgba(255,255,255,.1);transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.login-input-wrapper:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.login-input-wrapper.focused{border-color:#fff9;background:rgba(255,255,255,.15);box-shadow:0 0 0 3px #ffffff1a;transform:translateY(-2px)}.login-input-wrapper.focused:before{left:100%}.input-icon{font-size:1.25rem;flex-shrink:0;transition:transform .3s ease}.login-input-wrapper.focused .input-icon{transform:scale(1.2)}.login-input{flex:1;border:none;background:transparent;color:#fff;font-size:.95rem;padding:.875rem 0;outline:none;font-family:inherit}.login-input::placeholder{color:#fff9;opacity:1}.login-input:disabled{opacity:.6;cursor:not-allowed}.login-input:-webkit-autofill,.login-input:-webkit-autofill:hover,.login-input:-webkit-autofill:focus,.login-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px transparent inset!important;box-shadow:0 0 0 30px transparent inset!important;-webkit-text-fill-color:var(--text-primary)!important}.login-button{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.95rem 1.5rem;background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;animation:slideUp .8s cubic-bezier(.34,1.56,.64,1) .4s backwards}.login-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.login-button:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 15px 35px #4caf504d}.login-button:not(:disabled):active{transform:translateY(-1px)}.login-button:hover:not(:disabled):before{left:100%}.login-button:disabled{opacity:.8;cursor:not-allowed}.login-button.loading{background:linear-gradient(135deg,#666 0%,#555 100%)}.loading-spinner{display:inline-block;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.login-footer{text-align:center;font-size:.8rem;color:#fffc;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);animation:slideUp .8s cubic-bezier(.34,1.56,.64,1) .5s backwards}.login-footer p{margin:0;letter-spacing:.5px}@media (max-width: 767px){.login-container{padding:20px;padding-top:env(safe-area-inset-top,20px)}.login-card{width:100%;max-width:100%;padding:2rem 1.5rem;border-radius:20px;margin:0}.login-logo-container{width:280px;height:110px;margin-bottom:1rem}.login-logo-image{margin-left:-15px}.login-subtitle{font-size:.95rem}.login-header{margin-bottom:2rem}.login-form{gap:1.25rem}.login-input-wrapper{padding:0 .875rem;border-radius:10px}.login-input{font-size:16px;padding:.75rem 0}.input-icon{font-size:1.1rem}.login-button{padding:.875rem 1.25rem;font-size:1rem;border-radius:10px;min-height:48px}.login-error{padding:.875rem 1rem;font-size:.8rem;margin-bottom:1.5rem}.gradient-orb-1,.gradient-orb-2,.gradient-orb-3{opacity:.15}.login-background{display:none}}@media (max-width: 480px){.login-card{padding:1.75rem 1.25rem}.login-logo-container{width:240px;height:95px}.login-subtitle{font-size:.875rem}}@media (max-width: 767px) and (orientation: landscape){.login-container{padding:10px 20px}.login-card{padding:1.5rem;max-width:450px}.login-logo-container{width:200px;height:70px;margin-bottom:.75rem}.login-header{margin-bottom:1rem}.login-form{gap:1rem}}.welcome-container{width:100%;height:100%;display:flex;gap:1.5rem;padding:1.5rem;overflow:hidden;background:var(--bg-primary)}.welcome-left,.welcome-right{flex:1;display:flex;flex-direction:column;gap:1.5rem;min-width:0}.welcome-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;padding:2rem 2.5rem;animation:slideDown .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 10px 40px #667eea4d;position:relative;overflow:hidden}.welcome-header:before{content:"";position:absolute;top:0;left:-100%;width:300%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.15) 75%,transparent 100%);animation:shimmer 4s ease-in-out infinite}.welcome-header:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.2) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(255,255,255,.15) 0%,transparent 50%);animation:pulse 3s ease-in-out infinite alternate}@keyframes shimmer{0%{transform:translate(-30%)}to{transform:translate(30%)}}@keyframes pulse{0%{opacity:.5}to{opacity:1}}.welcome-title{font-size:1.8rem;font-weight:700;color:#fff;margin:0 0 .5rem;text-shadow:0 2px 10px rgba(0,0,0,.2);position:relative;z-index:1}.welcome-subtitle{font-size:1rem;color:#ffffffe6;margin:0;position:relative;z-index:1}.rules-section{flex:1;background:var(--bg-secondary);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);display:flex;flex-direction:column;animation:slideUp .6s cubic-bezier(.34,1.56,.64,1) .1s backwards;overflow:hidden}.rules-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.rules-icon{font-size:1.5rem}.rules-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.rule-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-radius:10px;background:var(--bg-primary);border-left:4px solid var(--primary);animation:fadeInLeft .5s ease-out backwards;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.rule-item:hover{transform:translate(8px);box-shadow:0 4px 15px #0000001a}.rule-item.rule-bonus{border-left-color:#10b981;background:linear-gradient(135deg,rgba(16,185,129,.1) 0%,transparent 100%)}.rule-item.rule-warning{border-left-color:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.1) 0%,transparent 100%)}.rule-item.rule-rule{border-left-color:#ef4444;background:linear-gradient(135deg,rgba(239,68,68,.12) 0%,rgba(239,68,68,.05) 100%)}.rule-item.rule-rule .rule-number{background:#ef4444}.rule-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:.75rem;font-weight:600;flex-shrink:0}.rule-item.rule-bonus .rule-number{background:#10b981}.rule-item.rule-warning .rule-number{background:#f59e0b}.rule-text{font-size:.9rem;color:var(--text-primary);line-height:1.5}.announcement-section{background:var(--bg-secondary);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);animation:slideDown .6s cubic-bezier(.34,1.56,.64,1) .2s backwards}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:.5rem}.section-icon{font-size:1.5rem}.edit-announcement-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease}.edit-announcement-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.announcement-content{display:flex;flex-direction:column;gap:.75rem;max-height:200px;overflow-y:auto}.announcement-item{padding:1rem;background:var(--bg-primary);border-radius:10px;border-left:4px solid #f59e0b;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;animation:fadeInRight .5s ease-out backwards;transition:all .3s ease}.announcement-item:hover{transform:translate(-4px);box-shadow:0 4px 15px #0000001a}.announcement-text{font-size:.9rem;color:var(--text-primary);line-height:1.6;flex:1}.edit-btn-inline{padding:.25rem .75rem;background:transparent;color:var(--primary);border:1px solid var(--primary);border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .2s ease;flex-shrink:0}.edit-btn-inline:hover{background:var(--primary);color:#fff}.empty-announcement{padding:2rem;text-align:center;color:var(--text-secondary);font-size:.9rem}.leaderboard-section{flex:1;background:var(--bg-secondary);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);display:flex;flex-direction:column;animation:slideUp .6s cubic-bezier(.34,1.56,.64,1) .3s backwards;overflow:hidden}.time-range-selector{display:flex;gap:.25rem;background:var(--bg-primary);border-radius:8px;padding:.25rem}.range-btn{padding:.4rem .75rem;border:none;background:transparent;color:var(--text-secondary);border-radius:6px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease}.range-btn:hover{color:var(--text-primary)}.range-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 2px 10px #667eea4d}.leaderboard-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.leaderboard-list{flex:1;overflow-y:auto}.leaderboard-header{display:grid;grid-template-columns:60px 1fr 100px;align-items:center;padding:.75rem 1rem;background:var(--bg-tertiary);border-radius:8px;margin-bottom:.5rem;font-size:.8rem;font-weight:600;color:var(--text-secondary)}.leaderboard-item{display:grid;grid-template-columns:60px 1fr 100px;align-items:center;padding:.75rem 1rem;background:var(--bg-primary);border-radius:8px;margin-bottom:.5rem;font-size:.9rem;color:var(--text-primary);animation:fadeInUp .4s ease-out backwards;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.leaderboard-item:hover{transform:scale(1.02);box-shadow:0 4px 15px #0000001a}.leaderboard-item.rank-1{background:linear-gradient(135deg,rgba(255,215,0,.15) 0%,transparent 100%);border:1px solid rgba(255,215,0,.3)}.leaderboard-item.rank-2{background:linear-gradient(135deg,rgba(192,192,192,.15) 0%,transparent 100%);border:1px solid rgba(192,192,192,.3)}.leaderboard-item.rank-3{background:linear-gradient(135deg,rgba(205,127,50,.15) 0%,transparent 100%);border:1px solid rgba(205,127,50,.3)}.col-rank{font-weight:600;display:flex;align-items:center}.col-name{font-weight:500}.col-count{text-align:right;font-weight:600;color:var(--primary)}.medal{font-size:1.5rem}.empty-leaderboard{padding:3rem;text-align:center;color:var(--text-secondary);font-size:.9rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease}.announcement-editor{background:var(--bg-secondary);border-radius:16px;padding:2rem;width:90%;max-width:500px;box-shadow:0 20px 60px #0000004d;animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1)}.announcement-editor h3{margin:0 0 1.5rem;font-size:1.25rem;color:var(--text-primary)}.announcement-editor textarea{width:100%;padding:1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;resize:vertical;min-height:120px}.announcement-editor textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #667eea33}.editor-actions{display:flex;gap:1rem;margin-top:1.5rem;justify-content:flex-end}.btn-save{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-save:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-cancel{padding:.75rem 1.5rem;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-cancel:hover{background:var(--bg-tertiary)}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 1024px){.welcome-container{flex-direction:column;overflow-y:auto}.welcome-left,.welcome-right{flex:none}.rules-section,.leaderboard-section{max-height:400px}}@media (max-width: 767px){.welcome-container{padding:0 0 20px;gap:12px;height:auto;min-height:100%}.welcome-header{padding:1.25rem 1rem;border-radius:12px;margin:0}.welcome-header:before{animation:none}.welcome-title{font-size:1.25rem;margin-bottom:.25rem}.welcome-subtitle{font-size:.85rem}.rules-section,.announcement-section,.leaderboard-section{padding:1rem;border-radius:12px;max-height:none}.rules-title,.section-title{font-size:1rem;margin-bottom:.75rem}.rules-icon,.section-icon{font-size:1.25rem}.rule-item{padding:.625rem .75rem;border-radius:8px}.rule-item:hover{transform:none}.rule-number{width:20px;height:20px;font-size:.7rem}.rule-text{font-size:.825rem;line-height:1.4}.section-header{flex-direction:column;gap:.5rem;align-items:flex-start}.edit-announcement-btn{width:100%;padding:.625rem 1rem;text-align:center}.announcement-content{max-height:180px}.announcement-item{padding:.75rem;flex-direction:column;gap:.5rem}.announcement-item:hover{transform:none}.announcement-text{font-size:.825rem}.edit-btn-inline{align-self:flex-end}.time-range-selector{width:100%;justify-content:space-between;overflow-x:auto;-webkit-overflow-scrolling:touch}.range-btn{padding:.375rem .625rem;font-size:.75rem;flex-shrink:0}.leaderboard-header,.leaderboard-item{grid-template-columns:45px 1fr 70px;font-size:.8rem;padding:.625rem .75rem}.leaderboard-item:hover{transform:none}.medal{font-size:1.25rem}.col-count{font-size:.85rem}.modal-overlay{align-items:flex-end;padding:0}.announcement-editor{width:100%;max-width:100%;border-radius:16px 16px 0 0;padding:1.5rem;max-height:80vh;overflow-y:auto}.announcement-editor h3{font-size:1.1rem;margin-bottom:1rem}.announcement-editor textarea{font-size:16px;min-height:100px}.editor-actions{flex-direction:column;gap:.75rem}.btn-save,.btn-cancel{width:100%;padding:.875rem;text-align:center}}@media (max-width: 480px){.welcome-title{font-size:1.1rem}.rules-section,.announcement-section,.leaderboard-section{padding:.875rem}.leaderboard-header,.leaderboard-item{grid-template-columns:40px 1fr 60px;padding:.5rem .625rem}}.time-range-tabs{display:flex;gap:.25rem;background:var(--bg-primary);border-radius:10px;padding:.25rem}.time-range-tabs button{padding:.5rem 1rem;border:none;background:transparent;color:var(--text-secondary);border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease}.time-range-tabs button:hover{color:var(--text-primary)}.time-range-tabs button.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 2px 10px #667eea4d}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.5rem}@media (max-width: 1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.stats-grid{grid-template-columns:1fr}}.stat-card{background:var(--bg-secondary);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--card-accent, var(--primary))}.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0000001f}.stat-card .stat-icon{font-size:2.5rem;margin-bottom:.75rem}.stat-card .stat-label{font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.stat-card .stat-value{font-size:1.75rem;font-weight:700;color:var(--text-primary)}.stat-card .stat-value.highlight{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.operation-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:1.5rem}@media (max-width: 1400px){.operation-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.operation-grid{grid-template-columns:repeat(2,1fr)}}.operation-card{background:var(--bg-secondary);border-radius:12px;padding:1.25rem;border:1px solid var(--border-color);text-align:center;transition:all .3s ease}.operation-card:hover{transform:scale(1.02);box-shadow:0 8px 25px #0000001a}.operation-card .op-icon{font-size:1.75rem;margin-bottom:.5rem}.operation-card .op-value{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.25rem}.operation-card .op-label{font-size:.8rem;color:var(--text-secondary)}.ranking-section{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}@media (max-width: 1024px){.ranking-section{grid-template-columns:1fr}}.ranking-card{background:var(--bg-secondary);border-radius:16px;border:1px solid var(--border-color);overflow:hidden;display:flex;flex-direction:column;max-height:450px}.ranking-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.ranking-header h3{margin:0;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.ranking-list{flex:1;overflow-y:auto;padding:.5rem}.ranking-list::-webkit-scrollbar{width:6px}.ranking-list::-webkit-scrollbar-track{background:var(--bg-tertiary)}.ranking-list::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}.ranking-table-header{display:grid;padding:.75rem 1rem;background:var(--bg-tertiary);border-radius:8px;margin-bottom:.5rem;font-size:.75rem;font-weight:600;color:var(--text-secondary)}.ranking-table-header.revenue{grid-template-columns:50px 1fr 90px 80px 90px;text-align:center}.ranking-table-header.timeout{grid-template-columns:50px 1fr 100px;text-align:center}.ranking-item{display:grid;align-items:center;padding:.6rem 1rem;background:var(--bg-primary);border-radius:8px;margin-bottom:.4rem;font-size:.85rem;transition:all .2s ease}.ranking-item.revenue{grid-template-columns:50px 1fr 90px 80px 90px;text-align:center}.ranking-item.timeout{grid-template-columns:50px 1fr 100px;text-align:center}.ranking-item:hover{transform:translate(4px);box-shadow:0 2px 10px #00000014}.ranking-item.top-1{background:linear-gradient(135deg,rgba(255,215,0,.15) 0%,transparent 100%);border:1px solid rgba(255,215,0,.3)}.ranking-item.top-2{background:linear-gradient(135deg,rgba(192,192,192,.15) 0%,transparent 100%);border:1px solid rgba(192,192,192,.3)}.ranking-item.top-3{background:linear-gradient(135deg,rgba(205,127,50,.15) 0%,transparent 100%);border:1px solid rgba(205,127,50,.3)}.rank-badge{font-weight:700;font-size:1.25rem;text-align:center}.rank-name{font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.rank-value{text-align:center;font-weight:600;color:var(--primary)}.chart-section{background:var(--bg-secondary);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);margin-bottom:1.5rem}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.chart-header h3{margin:0;font-size:1.1rem;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.chart-container{height:280px;display:flex;align-items:flex-end;gap:.5rem;padding:1rem 0;position:relative}.chart-bar-wrapper{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.chart-bar{width:100%;max-width:40px;background:linear-gradient(135deg,#667eea99 0%,#764ba299 100%);border-radius:6px 6px 0 0;transition:all .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer;position:relative}.chart-bar:hover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transform:scaleY(1.05);transform-origin:bottom}.chart-bar-label{font-size:.7rem;color:var(--text-secondary);margin-top:.5rem;text-align:center}.chart-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:.5rem .75rem;box-shadow:0 4px 15px #00000026;z-index:10;white-space:nowrap;font-size:.8rem;margin-bottom:8px}.chart-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--bg-primary)}.chart-loading{display:flex;align-items:center;justify-content:center;height:280px;color:var(--text-secondary)}.chart-loading .spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.section-title{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.section-title h2{margin:0;font-size:1.25rem;color:var(--text-primary)}.section-title .section-icon{font-size:1.5rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fadeInUp{animation:fadeInUp .5s ease-out backwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.animated-number{display:inline-block;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.ranking-item span,.ranking-table-header span{display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.time-range-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:.2rem}.time-range-tabs::-webkit-scrollbar{display:none}.time-range-tabs button{padding:.4rem .75rem;font-size:.75rem;flex-shrink:0}.stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:.75rem;margin-bottom:1rem}.stat-card{padding:1rem;border-radius:12px}.stat-card:hover{transform:none}.stat-card .stat-icon{font-size:1.75rem;margin-bottom:.5rem}.stat-card .stat-label{font-size:.75rem;margin-bottom:.25rem}.stat-card .stat-value{font-size:1.25rem}.operation-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.operation-card{padding:.75rem .5rem;border-radius:10px}.operation-card:hover{transform:none}.operation-card .op-icon{font-size:1.25rem;margin-bottom:.25rem}.operation-card .op-value{font-size:1rem;margin-bottom:.125rem}.operation-card .op-label{font-size:.65rem}.ranking-section{grid-template-columns:1fr;gap:1rem}.ranking-card{max-height:350px;border-radius:12px}.ranking-header{padding:.75rem 1rem}.ranking-header h3{font-size:.9rem}.ranking-list{padding:.375rem}.ranking-table-header{padding:.5rem .75rem;font-size:.65rem;border-radius:6px}.ranking-table-header.revenue{grid-template-columns:35px 1fr 60px 50px 65px}.ranking-table-header.timeout{grid-template-columns:35px 1fr 70px}.ranking-item{padding:.5rem .75rem;font-size:.75rem;border-radius:6px;margin-bottom:.25rem}.ranking-item:hover{transform:none}.ranking-item.revenue{grid-template-columns:35px 1fr 60px 50px 65px}.ranking-item.timeout{grid-template-columns:35px 1fr 70px}.rank-badge{font-size:1rem}.chart-section{padding:1rem;border-radius:12px;margin-bottom:1rem}.chart-header{flex-direction:column;gap:.75rem;align-items:flex-start;margin-bottom:1rem}.chart-header h3{font-size:1rem}.chart-container{height:200px;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:.375rem;padding:.5rem 0}.chart-bar-wrapper{min-width:36px;flex-shrink:0}.chart-bar{max-width:28px;border-radius:4px 4px 0 0}.chart-bar-label{font-size:.6rem;margin-top:.375rem}.chart-tooltip{font-size:.7rem;padding:.4rem .5rem}.chart-loading{height:200px}.empty-state{padding:2rem}.empty-state .empty-icon{font-size:2rem}.section-title{margin-bottom:.75rem}.section-title h2{font-size:1rem}.section-title .section-icon{font-size:1.25rem}}@media (max-width: 480px){.stats-grid{gap:.5rem}.stat-card{padding:.75rem}.stat-card .stat-icon{font-size:1.5rem}.stat-card .stat-value{font-size:1.1rem}.operation-grid{grid-template-columns:repeat(2,1fr)}.ranking-table-header.revenue,.ranking-item.revenue{grid-template-columns:30px 1fr 55px 45px}.ranking-item.revenue span:nth-child(5),.ranking-table-header.revenue span:nth-child(5){display:none}}.quick-dispatch-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;width:100%;height:calc(100vh - 120px);padding:2rem;background:var(--bg-primary);overflow:hidden}.dispatch-games-section{position:relative;display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.games-header{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.header-title-row{display:flex;justify-content:space-between;align-items:center}.games-header h2{margin:0;font-size:1.25rem;color:var(--text-primary)}.refresh-controls{display:flex;align-items:center;gap:1rem}.refresh-btn{width:36px;height:36px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.refresh-btn:hover{background:rgba(76,175,80,.1);border-color:var(--primary);box-shadow:0 2px 8px #4caf5033}.refresh-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.refresh-btn.refreshing{animation:rotate360 .6s ease-out}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.refresh-icon{font-size:20px;font-weight:700}.countdown-text{font-size:.85rem;color:var(--text-secondary)}.countdown-number{display:inline-block;min-width:20px;text-align:center;font-weight:700;font-size:1rem;color:var(--primary);padding:0 4px}.refresh-tip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(76,175,80,.95);color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:600;box-shadow:0 4px 12px #4caf5066;animation:tipFadeIn .3s ease,tipFadeOut .3s ease 1.7s forwards;z-index:1000}.no-companion-tip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,68,68,.95);color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:600;box-shadow:0 4px 12px #f446;animation:tipFadeIn .3s ease,tipFadeOut .3s ease 2.2s forwards;z-index:1000;text-align:center;max-width:280px}.validation-tip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,152,0,.95);color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;box-shadow:0 4px 12px #ff980066;animation:tipFadeIn .3s ease,tipFadeOut .3s ease 2.2s forwards;z-index:2000;text-align:center;min-width:200px}.success-tip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(76,175,80,.95);color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;box-shadow:0 4px 12px #4caf5066;animation:tipFadeIn .3s ease,tipFadeOut .3s ease 2.2s forwards;z-index:2000;text-align:center;min-width:200px}@keyframes tipFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes tipFadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.games-search{padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.95rem;outline:none;transition:all .3s ease}.games-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4caf501a}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;overflow-y:auto;max-height:calc(100vh - 300px);padding-right:.5rem}.game-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:1rem;background:var(--bg-primary);border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);animation:fadeInPlace .25s ease-out;overflow:hidden;min-height:160px}.glow-effect{position:absolute;bottom:-50%;left:50%;transform:translate(-50%);width:120%;height:100%;background:radial-gradient(ellipse at center bottom,rgba(76,175,80,.4) 0%,rgba(76,175,80,.15) 30%,transparent 70%);opacity:0;transition:all .4s ease;pointer-events:none}.game-card:hover .glow-effect{opacity:1;bottom:-30%}.game-card:hover{border-color:#4caf5080;transform:translateY(-4px);box-shadow:0 0 20px #4caf5026,0 10px 40px #0003}.game-card.active{border-color:var(--primary);background:rgba(76,175,80,.08);box-shadow:0 0 0 2px #4caf504d,inset 0 0 20px #4caf500d}.game-card.active .glow-effect{opacity:.8;bottom:-35%}.game-card.disabled{opacity:.5;cursor:not-allowed}.game-card.disabled:hover{transform:none;border-color:#ffffff1a;box-shadow:none}.game-card.disabled .glow-effect{display:none}.card-top{width:100%;text-align:center;margin-bottom:.75rem}.status-badge{display:inline-block;padding:.35rem .9rem;border-radius:20px;font-size:.75rem;font-weight:600;letter-spacing:.5px;transition:all .3s ease}.status-badge.online{background:linear-gradient(135deg,rgba(76,175,80,.2) 0%,rgba(56,142,60,.3) 100%);color:#4caf50;border:1px solid rgba(76,175,80,.3);box-shadow:0 0 12px #4caf5033}.status-badge.offline{background:rgba(100,116,139,.15);color:#94a3b8;border:1px solid rgba(100,116,139,.2)}.game-card:hover .status-badge.online{box-shadow:0 0 16px #4caf5066;background:linear-gradient(135deg,rgba(76,175,80,.3) 0%,rgba(56,142,60,.4) 100%)}.card-center{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1;justify-content:center}.game-icon{font-size:2.5rem;transition:transform .3s ease}.game-card:hover .game-icon{transform:scale(1.1)}.game-title{margin:0;font-size:.95rem;font-weight:600;color:var(--text-primary);text-align:center;transition:color .3s ease}.game-card:hover .game-title{color:#4caf50}.card-bottom{display:flex;justify-content:center;gap:1.5rem;width:100%;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.06)}.gender-stat{display:flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:16px;background:rgba(100,116,139,.1);transition:all .3s ease}.gender-stat .gender-icon{font-size:.9rem}.gender-stat .gender-count{font-size:.85rem;font-weight:700;color:#64748b;min-width:12px;text-align:center}.gender-stat.male.has-count{background:rgba(59,130,246,.15)}.gender-stat.male.has-count .gender-count{color:#3b82f6}.gender-stat.female.has-count{background:rgba(236,72,153,.15)}.gender-stat.female.has-count .gender-count{color:#ec4899}.game-card:hover .gender-stat.has-count{transform:scale(1.05)}.loading-state,.empty-state{grid-column:1 / -1;padding:3rem 2rem;text-align:center;color:var(--text-secondary);font-size:.95rem}.dispatch-form-section{display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);overflow-y:auto;max-height:calc(100vh - 120px)}.form-header{margin-bottom:1.5rem;border-bottom:2px solid var(--primary);padding-bottom:1rem}.form-header h2{margin:0;font-size:1.25rem;color:var(--text-primary)}.dispatch-form{display:flex;flex-direction:column;gap:.85rem}.form-group{display:flex;flex-direction:column;gap:.4rem}.form-group label{font-size:1rem;font-weight:700;color:var(--text-primary)}.required{color:#f44;margin-left:.25rem;font-weight:700;font-size:1.1rem}.form-input,.form-textarea,.form-select,select{padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.95rem;font-family:inherit;outline:none;transition:all .3s ease}.form-select,select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:12px;padding-right:2.5rem}.form-select option,select option{background:var(--bg-primary);color:var(--text-primary);padding:.5rem}.form-select option:hover,select option:hover{background:var(--primary);color:#fff}.form-select option:disabled,select option:disabled{color:#999;background:var(--bg-secondary)}.form-input:focus,.form-textarea:focus,.form-select:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4caf501a}.form-textarea{resize:vertical;min-height:60px}.form-row.form-row-three{grid-template-columns:1fr 1fr 1fr}.duration-input-group{display:flex!important;gap:.5rem;align-items:stretch}.duration-input-group .form-input{flex:1;min-width:0}.duration-type-select{width:68px!important;max-width:68px!important;min-width:68px!important;height:auto!important;padding:.75rem 1.75rem .75rem .5rem!important;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .4rem center;background-size:10px;color:var(--text-primary);font-size:.9rem;cursor:pointer;outline:none;transition:all .3s ease;flex-shrink:0;text-align:left;appearance:none;-webkit-appearance:none;-moz-appearance:none}.duration-type-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4caf501a}.submit-btn{position:relative;padding:1rem 2rem;background:linear-gradient(135deg,#4CAF50 0%,#45a049 50%,#66BB6A 100%);background-size:200% 100%;color:#fff;border:2px solid transparent;border-radius:12px;font-size:1.1rem;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);margin-top:1rem;overflow:hidden;box-shadow:0 4px 15px #4caf504d,0 0 #4caf5066,inset 0 1px #fff3}.submit-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.submit-btn:hover{transform:translateY(-3px) scale(1.02);background-position:100% 0;border-color:#ffffff4d;box-shadow:0 8px 25px #4caf5066,0 0 30px #4caf504d,inset 0 1px #ffffff4d;letter-spacing:2px}.submit-btn:hover:before{left:100%}.submit-btn:active{transform:translateY(-1px) scale(.98);box-shadow:0 4px 15px #4caf5066,0 0 20px #4caf5033,inset 0 3px 10px #0003;background-position:50% 0}@keyframes buttonPulse{0%,to{box-shadow:0 4px 15px #4caf504d,0 0 #4caf5066,inset 0 1px #fff3}50%{box-shadow:0 4px 15px #4caf504d,0 0 0 8px #4caf5000,inset 0 1px #fff3}}.submit-btn{animation:buttonPulse 2s ease-in-out infinite}@keyframes fadeInPlace{0%{opacity:0}to{opacity:1}}@media (max-width: 1200px){.quick-dispatch-container{grid-template-columns:1fr;gap:1.5rem}.games-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.quick-dispatch-container{padding:1rem;gap:1rem}.games-grid{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}}@media (max-width: 767px){.quick-dispatch-container{padding:0;gap:.75rem}.section-card{border-radius:12px;padding:1rem}.section-header{padding:.75rem 0;margin-bottom:.75rem}.section-title{font-size:.9rem}.section-icon{font-size:1.1rem}.games-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.game-card{padding:.75rem .5rem;border-radius:8px}.game-card .game-icon{font-size:1.5rem;margin-bottom:.25rem}.game-card .game-name{font-size:.7rem}.form-group{margin-bottom:.75rem}.form-group label{font-size:.8rem;margin-bottom:.375rem}.form-group input,.form-group select,.form-group textarea{font-size:16px;padding:.75rem;border-radius:8px}.form-row{gap:.75rem}.duration-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.duration-option{padding:.625rem;font-size:.8rem}.submit-btn{width:100%;min-height:48px;font-size:1rem;border-radius:10px}.users-section{padding:1rem}.users-list{max-height:300px}.user-item{padding:.75rem;border-radius:8px}.user-avatar{width:36px;height:36px;font-size:14px}.user-name{font-size:.875rem}.user-status{font-size:.7rem;padding:.2rem .5rem}}@media (max-width: 480px){.games-grid{grid-template-columns:repeat(2,1fr)}.duration-options{grid-template-columns:1fr 1fr}}.role-permission-container{display:grid;grid-template-columns:320px 1fr;gap:0;width:100%;height:100%;background:var(--bg-primary);overflow:hidden}.role-list-section{display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-color);height:100%;overflow:hidden}.section-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);z-index:10;flex-shrink:0}.section-header h2{margin:0;font-size:1.2rem;color:var(--text-primary)}.btn-add-role{padding:.5rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.btn-add-role:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-add-role:hover{transform:translateY(-3px);box-shadow:0 12px 24px #4caf5066}.btn-add-role:hover:before{width:300px;height:300px}.btn-add-role:active{transform:translateY(-1px)}.add-role-form{display:flex;flex-direction:column;gap:.75rem;padding:1rem 1.5rem;background:var(--bg-primary);border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color)}.add-role-form .form-input,.add-role-form .form-textarea{padding:.625rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:.9rem;font-family:inherit;outline:none;transition:all .3s ease}.add-role-form .form-input:focus,.add-role-form .form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4caf501a}.add-role-form .btn-confirm{padding:.625rem;background:var(--primary);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease}.add-role-form .btn-confirm:hover{background:#45a049}.role-items{display:flex;flex-direction:column;gap:0;overflow-y:auto;flex:1;padding:1.5rem 0}.role-item{padding:1rem 1.5rem;background:transparent;border:none;border-bottom:1px solid var(--border-color);cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;animation:fadeIn .4s ease;overflow:hidden}.role-item:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.role-item:last-child{border-bottom:none}.role-item:hover{background:var(--bg-primary)}.role-item:hover:before{transform:scaleY(1)}.role-item.active{background:var(--bg-primary)}.role-item.active:before{transform:scaleY(1)}.role-name{font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.role-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--text-secondary)}.role-users,.role-perms{display:flex;align-items:center}.btn-delete{position:absolute;top:.5rem;right:.5rem;padding:.25rem .5rem;background:#f44336;color:#fff;border:none;border-radius:4px;font-size:.75rem;cursor:pointer;opacity:0;transition:all .3s ease}.role-item:hover .btn-delete{opacity:1}.btn-delete:hover{background:#d32f2f}.permission-config-section{display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:0;padding:0;border:none;overflow:hidden;height:100%}.permission-config-section .section-header{position:relative;background:var(--bg-secondary);z-index:10;margin-bottom:0;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--border-color);border-radius:0;flex-shrink:0}.action-buttons{display:flex;gap:.75rem;align-items:center}.action-buttons .btn-save{margin-left:auto;margin-bottom:0;padding:.5rem 1.5rem}.btn-select-all,.btn-clear-all{padding:.5rem 1rem;border:1px solid var(--primary);background:transparent;color:var(--primary);border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.btn-select-all:before,.btn-clear-all:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--primary);transition:left .4s cubic-bezier(.34,1.56,.64,1);z-index:-1}.btn-select-all:hover,.btn-clear-all:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px #4caf504d}.btn-select-all:hover:before,.btn-clear-all:hover:before{left:0}.role-info{padding:1rem 1.5rem;background:transparent;border-radius:0;margin-bottom:0;border:none;border-bottom:1px solid var(--border-color)}.role-description{margin:0 0 .75rem;color:var(--text-primary);font-size:.95rem;line-height:1.5}.role-stats{display:flex;gap:2rem;font-size:.9rem;color:var(--text-secondary)}.role-stats strong{color:var(--primary);font-weight:600}.permissions-list{display:flex;flex-direction:column;gap:0;margin-bottom:0;overflow-y:auto;flex:1;padding:1.5rem 0}.permission-module{padding:0 1.5rem;background:transparent;border-radius:0;border:none;border-bottom:1px solid var(--border-color)}.module-title{margin:1rem 0 .75rem;font-size:.95rem;font-weight:600;color:var(--primary);border-bottom:none;padding-bottom:0;position:relative;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.module-title:after{content:"";position:absolute;bottom:-2px;left:0;height:2px;background:linear-gradient(90deg,var(--primary),transparent);width:0;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.permission-module:hover .module-title{transform:translate(4px)}.permission-module:hover .module-title:after{width:100%}.module-permissions{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.permission-tree-item{display:flex;flex-direction:column;margin-bottom:.5rem}.permission-page-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:var(--bg-primary);border-radius:6px;transition:all .3s ease;border:1px solid var(--border-color)}.permission-page-item:hover{background:var(--bg-secondary);box-shadow:0 2px 8px #0000001a}.permission-left{display:flex;align-items:center;gap:.5rem;flex:1}.expand-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--text-secondary);transition:all .3s cubic-bezier(.34,1.56,.64,1);-webkit-user-select:none;user-select:none}.expand-icon:hover{color:var(--primary);transform:scale(1.2)}.expand-icon.expanded{transform:rotate(90deg);color:var(--primary)}.expand-icon-placeholder{width:20px;height:20px}.permission-checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;flex:1}.permission-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary);transition:transform .2s ease;flex-shrink:0}.permission-checkbox-label input[type=checkbox]:hover{transform:scale(1.2)}.children-count{font-size:.8rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:4px;font-weight:600}.permission-children{display:flex;flex-direction:column;gap:.25rem;margin-left:2.5rem;margin-top:.5rem;padding-left:1rem;border-left:2px solid var(--border-color)}.permission-child-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;cursor:pointer;transition:all .3s ease;border-radius:4px;background:transparent}.permission-child-item:hover{background:var(--bg-primary);transform:translate(4px)}.permission-child-item input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);transition:transform .2s ease;flex-shrink:0}.permission-child-item input[type=checkbox]:hover{transform:scale(1.2)}.permission-child-item .permission-name{font-size:.9rem;color:var(--text-primary);font-weight:400;flex:1}.permission-child-item .permission-code{font-size:.7rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.2rem .4rem;border-radius:3px;font-family:monospace}.permission-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);border-radius:0;animation:fadeIn .4s ease;position:relative}.permission-item:after{content:"";position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--primary);transition:width .4s cubic-bezier(.34,1.56,.64,1)}.permission-item:hover{background:transparent;transform:none;padding-left:.5rem}.permission-item:hover:after{width:100%}.permission-item input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary);transition:transform .2s ease;flex-shrink:0}.permission-item input[type=checkbox]:hover{transform:scale(1.2)}.permission-item input[type=checkbox]:checked{animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1)}.permission-name{font-size:.95rem;color:var(--text-primary);font-weight:500;flex:1}.permission-code{font-size:.75rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.25rem .5rem;border-radius:4px;font-family:monospace}.button-group{display:none}.btn-save{padding:.75rem 2rem;background:linear-gradient(135deg,var(--primary) 0%,#45a049 100%);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.btn-save:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}.btn-save:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.btn-save:hover{transform:translateY(-3px);box-shadow:0 16px 32px #4caf5080}.btn-save:hover:before{left:100%}.btn-save:hover:after{opacity:1}.btn-save:active{transform:translateY(-1px);box-shadow:0 8px 16px #4caf504d}@media (max-width: 1200px){.role-permission-container{grid-template-columns:280px 1fr}}@media (max-width: 768px){.role-permission-container{grid-template-columns:1fr}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{transform:scale(.8)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{box-shadow:0 0 #4caf50b3}50%{box-shadow:0 0 0 10px #4caf5000}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes glow{0%,to{text-shadow:0 0 5px rgba(76,175,80,0)}50%{text-shadow:0 0 10px rgba(76,175,80,.5)}}.page-container{padding:20px;margin:0 auto;background:transparent;max-width:100%}.page-title{font-size:24px;font-weight:600;margin-bottom:2rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.profile-layout{display:grid;grid-template-columns:360px 1fr;gap:2rem;align-items:start}.profile-left{position:sticky;top:20px}.profile-card{background:linear-gradient(135deg,rgba(45,50,65,.9) 0%,rgba(35,40,55,.9) 100%);border:1px solid rgba(76,175,80,.15);border-radius:16px;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #0000004d;transition:all .3s ease;height:824px}.profile-card:hover{border-color:#4caf504d;box-shadow:0 12px 48px #4caf501a}.profile-avatar-section{padding:2rem 2rem 1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:1px solid rgba(76,175,80,.1)}.avatar-wrapper{margin-bottom:1.2rem}.avatar-placeholder{width:100px;height:100px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;font-weight:700;box-shadow:0 8px 24px #4caf504d;border:3px solid rgba(255,255,255,.1);transition:all .3s ease}.profile-card:hover .avatar-placeholder{transform:scale(1.05);box-shadow:0 12px 32px #4caf5066}.user-info{display:flex;flex-direction:column;align-items:center}.user-info h2{margin:0 0 .8rem;font-size:22px;font-weight:600;color:#fff;letter-spacing:.5px}.user-info .role{display:inline-block;margin:0;padding:.4rem 1rem;background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.3);border-radius:20px;font-size:12px;color:#4caf50;font-weight:500}.profile-info-section{padding:1.5rem 2rem}.section-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:rgba(76,175,80,.03);border-bottom:1px solid rgba(76,175,80,.1);flex-shrink:0}.section-header h3{margin:0;font-size:16px;font-weight:600;color:#ffffffe6;letter-spacing:.5px}.profile-form{display:flex;flex-direction:column;gap:1rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:12px;font-weight:500;color:#fff9;letter-spacing:.3px}.form-group input,.form-group select{padding:.7rem .9rem;background:rgba(255,255,255,.03);border:1px solid rgba(76,175,80,.2);border-radius:8px;color:#fff;font-size:14px;outline:none;transition:all .3s ease}.form-group input:focus,.form-group select:focus{background:rgba(255,255,255,.05);border-color:#4caf50;box-shadow:0 0 0 3px #4caf501a}.form-group input::placeholder{color:#ffffff4d}.form-actions{display:flex;gap:.8rem;margin-top:.5rem}.readonly-field{padding:.7rem .9rem;background:rgba(255,255,255,.02);border:1px solid rgba(76,175,80,.1);border-radius:8px;color:#ffffffb3;font-size:14px;display:flex;align-items:center;gap:.5rem}.readonly-hint{font-size:11px;color:#fff6;font-style:italic}.profile-details{display:flex;flex-direction:column;gap:.8rem}.detail-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.detail-item{display:flex;flex-direction:column;gap:.4rem;padding:.8rem;background:rgba(255,255,255,.02);border-radius:8px;border:1px solid rgba(76,175,80,.05);transition:all .3s ease}.detail-item:hover{background:rgba(255,255,255,.04);border-color:#4caf5026}.detail-item .label{font-size:11px;color:#ffffff80;font-weight:500;letter-spacing:.3px;text-transform:uppercase}.detail-item .value{font-size:14px;color:#ffffffe6;font-weight:400}.profile-right{display:flex;flex-direction:column;gap:1.5rem}.game-module{background:linear-gradient(135deg,rgba(45,50,65,.9) 0%,rgba(35,40,55,.9) 100%);border:1px solid rgba(76,175,80,.15);border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #0000004d;transition:all .3s ease;display:flex;flex-direction:column;overflow:hidden}.game-module:first-of-type{height:500px}.game-module:last-of-type{height:300px}.game-module:hover{border-color:#4caf504d;box-shadow:0 12px 48px #4caf501a}.module-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:rgba(76,175,80,.03);border-bottom:1px solid rgba(76,175,80,.1);flex-shrink:0}.module-header h3{margin:0;font-size:16px;font-weight:600;color:#ffffffe6;letter-spacing:.5px}.module-content{padding:1.8rem 2rem;flex:1;overflow:hidden}.module-content.scrollable{overflow-y:auto;overflow-x:hidden}.module-content.scrollable::-webkit-scrollbar{width:6px}.module-content.scrollable::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:3px}.module-content.scrollable::-webkit-scrollbar-thumb{background:rgba(76,175,80,.3);border-radius:3px;transition:all .3s ease}.module-content.scrollable::-webkit-scrollbar-thumb:hover{background:rgba(76,175,80,.5)}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.2rem;padding:.5rem 0}.game-card{position:relative;padding:1.5rem 1rem;min-height:80px;background:rgba(255,255,255,.02);border:1px solid rgba(76,175,80,.15);border-radius:12px;transition:all .3s ease;cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem}.game-card.editable{cursor:pointer}.game-card.editable:hover{background:rgba(255,255,255,.08);border-color:#4caf50;transform:translateY(-3px);box-shadow:0 8px 24px #4caf5040}.game-card.selected{background:rgba(76,175,80,.1);border-color:#4caf5066}.game-card.animating{animation:gameMove .4s cubic-bezier(.4,0,.2,1)}@keyframes gameMove{0%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.game-name{font-size:15px;font-weight:600;color:#fffffff2;margin:0;line-height:1.5;word-wrap:break-word;word-break:break-word;padding:0;text-align:center;width:100%}.game-desc{font-size:12px;color:#ffffff80;line-height:1.4;text-align:center;width:100%;margin:0}.game-add-icon,.game-remove-icon{position:absolute;top:6px;right:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:16px;font-weight:700;transition:all .3s ease;opacity:0}.game-card.editable .game-add-icon,.game-card.editable .game-remove-icon{opacity:.6}.game-add-icon{background:rgba(76,175,80,.2);color:#4caf50}.game-remove-icon{background:rgba(244,67,54,.2);color:#f44336}.game-card.editable:hover .game-add-icon{opacity:1;background:#4CAF50;color:#fff;transform:rotate(90deg)}.game-card.editable:hover .game-remove-icon{opacity:1;background:#f44336;color:#fff;transform:rotate(90deg)}.empty-state{text-align:center;padding:3rem 2rem;color:#fff6;font-size:14px;font-weight:400;letter-spacing:.5px}.edit-btn,.add-btn,.btn-save,.btn-cancel{padding:.5rem 1.2rem;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s ease;border:none;outline:none;letter-spacing:.3px}.edit-btn,.add-btn{background:rgba(76,175,80,.15);color:#4caf50;border:1px solid rgba(76,175,80,.3)}.edit-btn:hover,.add-btn:hover{background:rgba(76,175,80,.25);border-color:#4caf50;transform:translateY(-1px);box-shadow:0 4px 12px #4caf5033}.edit-btn:active,.add-btn:active{transform:translateY(0)}.btn-save{background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%);color:#fff;border:1px solid #4CAF50;box-shadow:0 2px 8px #4caf5033}.btn-save:hover{background:linear-gradient(135deg,#45a049 0%,#388e3c 100%);transform:translateY(-1px);box-shadow:0 4px 16px #4caf504d}.btn-save:active{transform:translateY(0);box-shadow:0 2px 8px #4caf5033}.btn-cancel{background:rgba(255,255,255,.05);color:#ffffffb3;border:1px solid rgba(255,255,255,.1)}.btn-cancel:hover{background:rgba(255,255,255,.1);border-color:#fff3;color:#ffffffe6;transform:translateY(-1px)}.btn-cancel:active{transform:translateY(0)}.game-actions{display:flex;gap:.8rem;align-items:center}.modal-content{background:linear-gradient(135deg,rgba(45,50,65,.98) 0%,rgba(35,40,55,.98) 100%);border:1px solid rgba(76,175,80,.3);border-radius:16px;padding:2rem;min-width:400px;max-width:500px;box-shadow:0 20px 60px #00000080}.modal-content h3{margin:0 0 1.5rem;font-size:18px;font-weight:600;color:#fff;letter-spacing:.5px}.modal-actions{display:flex;gap:1rem;margin-top:1.5rem;justify-content:flex-end}@media (max-width: 1200px){.profile-layout{grid-template-columns:320px 1fr}.games-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}@media (max-width: 968px){.profile-layout{grid-template-columns:1fr}.profile-left{position:static}.modal-content{min-width:90%;max-width:500px}.game-module{height:350px}}@media (max-width: 767px){.page-container{padding:16px!important}.page-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;padding:0 4px}.profile-layout{gap:16px;display:flex;flex-direction:column}.profile-left,.profile-right{width:100%!important}.profile-card{border-radius:16px;height:auto!important;padding:20px!important}.module-header{margin-bottom:16px}.module-header h3{font-size:20px!important;font-weight:700!important}.profile-avatar-section{padding:0 0 20px;text-align:center}.avatar-wrapper{width:90px!important;height:90px!important;margin:0 auto 12px}.avatar-placeholder{width:90px!important;height:90px!important;font-size:36px!important}.user-info h2{font-size:24px!important;font-weight:700!important}.section-header{padding:1rem}.section-header h3{font-size:16px}.profile-info-section{padding:0}.profile-details{display:flex;flex-direction:column;gap:12px}.detail-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-item{background:var(--bg-primary);padding:14px!important;border-radius:12px}.detail-item .label{font-size:13px!important;color:var(--text-secondary);margin-bottom:6px;display:block}.detail-item .value{font-size:18px!important;font-weight:600!important;color:var(--text-primary)}.form-row{grid-template-columns:1fr;gap:12px}.form-group{margin-bottom:0}.form-group label{font-size:15px!important;font-weight:600!important;margin-bottom:8px}.form-group input,.form-group select{font-size:17px!important;padding:14px!important;min-height:52px!important;border-radius:12px!important}.form-actions{flex-direction:column;gap:12px;margin-top:20px}.form-actions button{width:100%;min-height:50px!important;font-size:16px!important;font-weight:600!important;border-radius:12px!important}.game-module{height:auto!important;min-height:200px}.content-module{padding:16px!important}.module-content{padding:0}.games-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}.game-card{padding:14px 10px!important;border-radius:12px!important;text-align:center}.game-card .game-name{font-size:15px!important;font-weight:600!important}.game-card .game-desc{font-size:12px!important;margin-top:4px}.edit-btn,.add-btn{font-size:15px!important;padding:10px 18px!important;min-height:44px!important;border-radius:10px!important}.btn-save,.btn-cancel{font-size:15px!important;padding:10px 16px!important;min-height:44px!important;border-radius:10px!important}.empty-state{font-size:16px!important;padding:32px 16px!important;color:var(--text-secondary)}}@media (max-width: 480px){.avatar-placeholder{width:70px;height:70px;font-size:24px}.games-grid{grid-template-columns:repeat(2,1fr)!important}}.user-manage{padding:20px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.actions{display:flex;gap:8px}.filters{display:flex;gap:10px;align-items:center;margin-bottom:12px}.filters input,.filters select{padding:6px 10px;border:1px solid #444;border-radius:6px;background:var(--card-bg);color:var(--text-color)}.table{border:1px solid #333;border-radius:10px;overflow:auto}.thead,.trow{display:grid;grid-template-columns:70px 100px 120px 100px 90px 60px 70px 100px 120px 60px 110px 70px 180px;align-items:center;text-align:center;min-width:1350px;gap:4px}.thead{background:var(--card-bg);font-weight:600;padding:12px 10px;font-size:13px;color:#ffffffe6}.trow{padding:12px 10px;border-top:1px solid #333;font-size:13px}.loading{padding:20px;text-align:center}.team-select-row{display:flex;gap:8px;align-items:center}.team-select-row select{flex:1}.commission-input{display:flex;align-items:center;gap:8px}.commission-input input{flex:1}.commission-input .unit{font-weight:700;min-width:30px}.user-info-display{background:rgba(255,255,255,.05);padding:12px;border-radius:8px;margin-bottom:16px}.user-info-display p{margin:4px 0}.btn{padding:6px 12px;border-radius:8px;border:1px solid #444;background:var(--card-bg);color:var(--text-color);cursor:pointer;transition:transform .2s ease}.btn:hover{transform:translateY(-1px)}.btn.primary{background:#2f7;color:#000;border-color:#2f7}.btn.danger{background:#f44;border-color:#f44;color:#fff}.pwd-cell{display:flex;justify-content:center;align-items:center}.btn-icon{background:transparent;border:none;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .2s}.btn-icon:hover{background:rgba(255,255,255,.1)}.action-cell{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}.action-cell .btn{padding:6px 14px;font-size:12px;font-weight:500;border-radius:6px;transition:all .2s ease;white-space:nowrap}.action-cell .btn:first-child{background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%);border:none;color:#fff;box-shadow:0 2px 8px #4caf504d}.action-cell .btn:first-child:hover{background:linear-gradient(135deg,#5CBF60 0%,#4CAF50 100%);box-shadow:0 4px 12px #4caf5066;transform:translateY(-2px)}.action-cell .btn:last-child{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#ffffffd9}.action-cell .btn:last-child:hover{background:rgba(255,255,255,.15);border-color:#ffffff4d;transform:translateY(-2px)}.toast{position:fixed;top:80px;right:20px;background:#4CAF50;color:#fff;padding:12px 24px;border-radius:8px;box-shadow:0 4px 12px #0000004d;z-index:9999;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.pwd-display{background:rgba(255,255,255,.05);padding:16px;border-radius:8px;text-align:center;font-size:24px;letter-spacing:4px;margin:20px 0;font-family:monospace}.modal-content.small{max-width:400px}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#888;border-radius:999px;transition:.2s}.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+.slider{background:#2f7}.switch input:checked+.slider:before{transform:translate(20px)}.badge{padding:4px 8px;border-radius:999px;font-size:12px}.badge.online{background:#2f7;color:#000}.badge.offline{background:#999;color:#000}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{width:460px;max-height:85vh;display:flex;flex-direction:column;background:var(--card-bg);color:var(--text-color);border:1px solid rgba(76,175,80,.2);border-radius:12px;padding:16px;box-shadow:0 20px 60px #0000004d}.modal-content .form{overflow-y:auto;flex:1;padding-right:8px}@keyframes pop{0%{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}.form{display:flex;flex-direction:column;gap:8px}.form input,.form textarea,.form select{padding:8px;border-radius:8px;border:1px solid #444;background:var(--bg-color);color:var(--text-color)}.custom-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right 8px center;background-size:20px;padding-right:32px;cursor:pointer}.custom-select:hover{border-color:#2f7}.custom-select option{background:var(--bg-color);color:var(--text-color);padding:8px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.role-checkboxes{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:rgba(255,255,255,.05);border-radius:8px;max-height:150px;overflow-y:auto}.role-checkbox-item{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--card-bg);border:1px solid #444;border-radius:6px;cursor:pointer;transition:all .2s}.role-checkbox-item:hover{border-color:#2f7}.role-checkbox-item input{width:16px;height:16px;cursor:pointer}.role-checkbox-item input:checked+span{color:#2f7;font-weight:500}.no-roles{color:#888;font-style:italic}.balance-layout{display:grid;grid-template-columns:350px 1fr;gap:1.5rem}.balance-left{display:flex;flex-direction:column;gap:1.5rem}.balance-right{min-width:0}.balance-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;padding:2rem;color:#fff;box-shadow:0 10px 40px #667eea4d;position:relative;overflow:hidden}.balance-card:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.balance-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.balance-icon{font-size:1.5rem}.balance-label{font-size:1rem;opacity:.9}.balance-amount{display:flex;align-items:baseline;margin-bottom:.5rem}.balance-amount .currency{font-size:1.5rem;margin-right:.25rem;opacity:.9}.balance-amount .amount{font-size:3rem;font-weight:700;letter-spacing:-2px}.balance-tip{font-size:.875rem;opacity:.7}.withdraw-card{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.card-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem;color:var(--text-primary)}.title-icon{font-size:1.25rem}.card-desc{color:var(--text-secondary);font-size:.875rem;margin:0}.records-card{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);height:calc(100vh - 200px);display:flex;flex-direction:column}.records-table-container{flex:1;overflow:auto;margin-top:1rem}.records-table{width:100%;border-collapse:collapse;font-size:.875rem}.records-table thead{position:sticky;top:0;background:var(--bg-secondary);z-index:10}.records-table th{padding:.75rem 1rem;text-align:center;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border-color);white-space:nowrap}.records-table td{padding:.75rem 1rem;color:var(--text-primary);border-bottom:1px solid var(--border-color);white-space:nowrap;text-align:center}.records-table tr:hover{background:rgba(102,126,234,.05)}.type-badge{display:inline-block;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500}.type-badge.type-order{background:rgba(16,185,129,.1);color:#10b981}.type-badge.type-withdraw{background:rgba(239,68,68,.1);color:#ef4444}.type-badge.type-other{background:rgba(102,126,234,.1);color:#667eea}.remark-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--text-secondary)}.empty-icon{font-size:3rem;margin-bottom:1rem}.loading-state{display:flex;align-items:center;justify-content:center;padding:3rem;color:var(--text-secondary)}.withdraw-form{padding:1rem 0}.warning-banner{display:flex;align-items:center;gap:.75rem;padding:1rem;background:linear-gradient(135deg,rgba(245,158,11,.1) 0%,rgba(239,68,68,.1) 100%);border:1px solid rgba(245,158,11,.3);border-radius:8px;margin-bottom:1.5rem}.warning-icon{font-size:1.5rem}.warning-text{color:#f59e0b;font-weight:600;font-size:.9375rem}.form-group .required{color:#ef4444}.form-group input{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.9375rem;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-hint{display:block;margin-top:.375rem;font-size:.75rem;color:var(--text-secondary)}.balance-display{font-size:1.5rem;font-weight:600;color:#10b981}.qrcode-upload{display:flex;justify-content:center}.upload-btn{width:150px;height:150px;border:2px dashed var(--border-color);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;overflow:hidden}.upload-btn:hover{border-color:#667eea;background:rgba(102,126,234,.05)}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.875rem}.upload-icon{font-size:2rem}.qrcode-preview{width:100%;height:100%;object-fit:cover}.withdraw-confirm{padding:1rem 0}.confirm-warning{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:rgba(245,158,11,.1);border-radius:8px;margin-bottom:1.5rem;color:#f59e0b;font-weight:500}.confirm-info{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.confirm-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border-color)}.confirm-row:last-child{border-bottom:none}.confirm-label{color:var(--text-secondary);font-size:.875rem}.confirm-value{color:var(--text-primary);font-weight:500}.confirm-value.amount{font-size:1.25rem;color:#667eea}@media (max-width: 1024px){.balance-layout{grid-template-columns:1fr}.records-card{height:auto;max-height:500px}}@media (max-width: 767px){.balance-layout{gap:1rem}.balance-card{padding:1.5rem 1rem;border-radius:12px}.balance-card-header{margin-bottom:.75rem}.balance-icon{font-size:1.25rem}.balance-label{font-size:.875rem}.balance-amount .currency{font-size:1.25rem}.balance-amount .amount{font-size:2.25rem;letter-spacing:-1px}.balance-tip{font-size:.75rem}.withdraw-card{padding:1rem;border-radius:12px}.card-title{font-size:.9rem}.card-desc{font-size:.8rem}.records-card{padding:1rem;border-radius:12px;max-height:none;height:auto}.records-table-container{margin-top:.75rem}.records-table{display:block}.records-table thead{display:none}.records-table tbody{display:flex;flex-direction:column;gap:10px}.records-table tr{display:flex;flex-direction:column;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;padding:12px;gap:8px}.records-table tr:hover{background:var(--bg-primary)}.records-table td{display:flex;justify-content:space-between;align-items:center;padding:0;border:none;text-align:left;white-space:normal}.records-table td:before{content:attr(data-label);font-size:12px;color:var(--text-secondary);font-weight:500;flex-shrink:0;margin-right:8px}.records-table td:nth-child(1){font-size:11px;color:var(--text-secondary)}.records-table td:nth-child(2){font-size:12px;color:var(--text-secondary)}.records-table td:nth-child(3){order:-1}.records-table td:nth-child(4){font-size:16px;font-weight:700}.records-table td:nth-child(5){font-size:12px}.type-badge{padding:.25rem .625rem;font-size:.7rem}.remark-cell{max-width:none}.mobile-records-list{display:flex;flex-direction:column;gap:10px;margin-top:.75rem}.mobile-record-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;padding:12px}.mobile-record-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.mobile-record-amount{font-size:18px;font-weight:700}.mobile-record-info{display:flex;justify-content:space-between;align-items:center}.mobile-record-time{font-size:12px;color:var(--text-secondary)}.mobile-record-remark{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-color);font-size:12px;color:var(--text-secondary);word-break:break-all}.empty-state{padding:2rem 1rem}.empty-icon{font-size:2rem}.withdraw-modal{width:100%!important;max-width:100%!important;border-radius:16px 16px 0 0!important;position:fixed;bottom:0;left:0;right:0;margin:0}.withdraw-form{padding:1rem}.withdraw-form input{font-size:16px;padding:.875rem}.withdraw-form button{width:100%;min-height:48px}}@media (max-width: 480px){.balance-amount .amount{font-size:2rem}}.filter-card{background:var(--bg-secondary);border-radius:12px;padding:.75rem;border:1px solid var(--border-color);margin-bottom:1.5rem}.filter-row{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.5rem}.filter-row:last-child{margin-bottom:0}.filter-item{display:flex;flex-direction:column;gap:.2rem;min-width:110px}.filter-item label{font-size:.65rem;color:var(--text-secondary);font-weight:500}.filter-item input,.filter-item select{padding:.35rem .5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:.8rem;transition:all .3s ease}.filter-item input:focus,.filter-item select:focus{outline:none;border-color:#667eea}.filter-actions{display:flex;gap:.5rem;margin-left:auto}.list-card{background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color);overflow:hidden}.list-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border-color)}.list-title{font-size:1rem;font-weight:500;color:var(--text-primary)}.list-count{font-size:.875rem;color:var(--text-secondary)}.list-count strong{color:#667eea;font-size:1rem}.table-container{overflow-x:auto;max-height:calc(100vh - 350px)}.data-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-table thead{position:sticky;top:0;background:var(--bg-secondary);z-index:10}.data-table th{padding:.875rem 1rem;text-align:center;color:var(--text-secondary);font-weight:500;border-bottom:1px solid var(--border-color);white-space:nowrap}.data-table td{padding:.875rem 1rem;color:var(--text-primary);border-bottom:1px solid var(--border-color);white-space:nowrap;text-align:center}.data-table tr:hover{background:rgba(102,126,234,.03)}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500}.amount-cell{font-weight:600;color:#667eea}.view-qrcode{color:#667eea;cursor:pointer;font-weight:500}.view-qrcode:hover{text-decoration:underline}.action-btns{display:flex;gap:.75rem;justify-content:center}.action-btn{cursor:pointer;font-weight:500;font-size:.8125rem;padding:.25rem .5rem;border-radius:4px;transition:all .3s ease}.action-btn.reject{color:#ef4444}.action-btn.reject:hover{background:rgba(239,68,68,.1)}.action-btn.process{color:#10b981}.action-btn.process:hover{background:rgba(16,185,129,.1)}.action-done{color:var(--text-secondary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;color:var(--text-secondary)}.empty-icon{font-size:3.5rem;margin-bottom:1rem}.empty-text{font-size:.9375rem}.loading-state{display:flex;align-items:center;justify-content:center;padding:4rem;color:var(--text-secondary)}.reject-form{padding:1rem 0}.warning-info{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:rgba(245,158,11,.1);border-radius:8px;margin-bottom:1.5rem;color:#f59e0b;font-size:.875rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-size:.875rem;font-weight:500}.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.9375rem;resize:vertical;font-family:inherit}.form-group textarea:focus{outline:none;border-color:#667eea}.form-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.qrcode-view{display:flex;justify-content:center;padding:1rem}.qrcode-view img{max-width:300px;max-height:300px;border-radius:8px}.floating-tip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:500;z-index:99999;box-shadow:0 4px 20px #0000004d;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.process-form{padding:.5rem 0}.process-info{background:var(--bg-secondary);border-radius:10px;padding:1rem;margin-bottom:1rem}.info-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px dashed var(--border-color)}.info-row:last-child{border-bottom:none}.info-label{color:var(--text-secondary);font-size:.875rem}.info-value{color:var(--text-primary);font-weight:600}.info-value.amount{color:#667eea;font-size:1.25rem}.process-tip{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:rgba(102,126,234,.1);border-radius:8px;margin-bottom:1.5rem;color:#667eea;font-size:.875rem}.tip-icon{font-size:1rem}.user-cards-section{background:var(--card-bg);border-radius:16px;padding:1.5rem;margin-bottom:2rem;border:1px solid var(--border-color);box-shadow:0 2px 12px #00000014}.user-cards-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.user-cards-header h3{margin:0;color:var(--text-primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.user-search-box{display:flex;gap:.75rem;align-items:center}.user-search-box input{padding:.625rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.875rem;width:200px;transition:all .3s ease}.user-search-box input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #4a90e21a}.user-cards-grid{display:flex;flex-wrap:wrap;gap:1rem;max-height:400px;overflow-y:auto;padding:.5rem}.user-cards-grid::-webkit-scrollbar{width:6px}.user-cards-grid::-webkit-scrollbar-track{background:transparent}.user-cards-grid::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.user-card{background:var(--bg-secondary);border-radius:8px;padding:.875rem 1.25rem;border:1px solid var(--border-color);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:1rem;min-width:180px}.user-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:var(--accent-color);background:var(--bg-tertiary)}.user-card-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;font-weight:600;flex-shrink:0}.user-card-info{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}.user-card-name{font-size:.875rem;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-card-balance{font-size:1rem;color:#f59e0b;font-weight:600}.system-records-section{background:var(--card-bg);border-radius:16px;padding:1.5rem;border:1px solid var(--border-color);box-shadow:0 2px 12px #00000014}.system-records-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.system-records-header h3{margin:0;color:var(--text-primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.filter-area{margin-bottom:1.5rem}.filter-row{display:flex;flex-wrap:wrap;gap:.75rem;padding:1rem;background:var(--bg-secondary);border-radius:12px;align-items:flex-end}.filter-item{display:flex;flex-direction:column;gap:.25rem}.filter-item label{font-size:.7rem;color:var(--text-secondary);font-weight:500}.filter-item input,.filter-item select{padding:.4rem .6rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:.8125rem;transition:all .3s ease;min-width:120px}.filter-item input:focus,.filter-item select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #4a90e21a}.filter-actions{display:flex;gap:.5rem;align-items:flex-end}.records-table-wrapper{overflow-x:auto;border-radius:8px;border:1px solid var(--border-color)}.records-table{width:100%;border-collapse:collapse;min-width:800px}.records-table thead{background:var(--bg-secondary);position:sticky;top:0;z-index:10}.records-table th,.records-table td{padding:.875rem 1rem;text-align:center;border-bottom:1px solid var(--border-color)}.records-table th{font-size:.8125rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.records-table td{font-size:.875rem;color:var(--text-primary)}.records-table tbody tr{transition:background .2s ease}.records-table tbody tr:hover{background:var(--bg-tertiary)}.amount-positive{color:#10b981;font-weight:600}.amount-negative{color:#ef4444;font-weight:600}.type-badge{display:inline-flex;padding:.25rem .625rem;border-radius:12px;font-size:.75rem;font-weight:500}.type-order{background:rgba(16,185,129,.1);color:#10b981}.type-withdraw{background:rgba(239,68,68,.1);color:#ef4444}.type-other{background:rgba(107,114,128,.1);color:#6b7280}.edit-form{padding:.5rem 0}.user-preview{margin-bottom:1.25rem;padding:1rem;background:linear-gradient(135deg,rgba(102,126,234,.05) 0%,rgba(118,75,162,.05) 100%);border-radius:12px;border:1px solid rgba(102,126,234,.15)}.preview-row{display:flex;justify-content:space-between;align-items:center;padding:.625rem 0;border-bottom:1px dashed rgba(102,126,234,.1)}.preview-row:last-child{border-bottom:none;padding-bottom:0}.preview-label{color:var(--text-secondary);font-size:.8125rem;font-weight:500}.preview-value{color:var(--text-primary);font-weight:600;font-size:.9375rem}.preview-value.balance{color:#f59e0b;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.adjust-section{background:var(--bg-secondary);padding:1rem;border-radius:12px;margin-bottom:1rem}.form-group{margin-bottom:1rem}.form-group:last-child{margin-bottom:0}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.8125rem;font-weight:500}.adjust-type-btns{display:flex;gap:.75rem;margin-bottom:1rem}.type-btn{flex:1;padding:.875rem;border:2px solid var(--border-color);background:var(--bg-primary);border-radius:10px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:var(--text-primary)}.type-btn:hover{border-color:var(--accent-color);transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.type-btn.active.add{border-color:#10b981;background:linear-gradient(135deg,rgba(16,185,129,.1) 0%,rgba(5,150,105,.05) 100%);color:#10b981}.type-btn.active.subtract{border-color:#ef4444;background:linear-gradient(135deg,rgba(239,68,68,.1) 0%,rgba(220,38,38,.05) 100%);color:#ef4444}.form-group input,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:.9375rem;transition:all .3s ease;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #4a90e21a}.form-group textarea{min-height:70px;resize:vertical;font-family:inherit}.required{color:#ef4444;margin-left:.25rem}.balance-preview{background:linear-gradient(135deg,rgba(245,158,11,.1) 0%,rgba(234,88,12,.05) 100%);padding:1rem 1.25rem;border-radius:10px;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(245,158,11,.2)}.balance-preview-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.balance-preview-value{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.balance-change{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600}.balance-change.increase{color:#10b981}.balance-change.decrease{color:#ef4444}.balance-arrow{font-size:1.25rem}.preview-label{color:var(--text-secondary);font-size:.875rem}.preview-value{font-size:1.5rem;font-weight:700;color:#f59e0b}.preview-change{display:flex;align-items:center;gap:.5rem}.preview-arrow{font-size:1.25rem}.preview-change.increase{color:#10b981}.preview-change.decrease{color:#ef4444}.modal-footer-buttons{display:flex;gap:.75rem;justify-content:flex-end;padding-top:1rem;border-top:1px solid var(--border-color)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.empty-state .icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.empty-state .text{font-size:.9375rem}.loading-overlay{display:flex;justify-content:center;align-items:center;min-height:200px}.float-tip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:500;z-index:99999;box-shadow:0 4px 20px #0000004d;animation:fadeInTip .3s ease}@keyframes fadeInTip{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (max-width: 768px){.user-cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.filter-row{flex-direction:column;align-items:stretch}.filter-group,.filter-group input,.filter-group select{width:100%}}.section-card{background:var(--card-bg);border-radius:16px;padding:1.5rem;margin-bottom:2rem;border:1px solid var(--border-color);box-shadow:0 2px 12px #00000014}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.section-title{margin:0;color:var(--text-primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.search-box{display:flex;gap:.75rem;align-items:center}.search-box input{padding:.625rem 1rem;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.875rem;width:200px;transition:all .3s ease}.search-box input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #4a90e21a}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{margin:0;padding:0;width:100%;height:100vh;overflow:hidden}#root{width:100%;height:100%;overflow:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4CAF50 0%,#45a049 100%);border-radius:4px;transition:all .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#45a049 0%,#3d8b40 100%);box-shadow:0 0 6px #4caf5066}::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#3d8b40 0%,#2e7031 100%)}*{scrollbar-width:thin;scrollbar-color:#4CAF50 transparent}*::-moz-scrollbar{width:8px;height:8px}*::-moz-scrollbar-track{background:transparent}*::-moz-scrollbar-thumb{background:linear-gradient(180deg,#4CAF50 0%,#45a049 100%);border-radius:4px;transition:all .3s ease}*::-moz-scrollbar-thumb:hover{background:linear-gradient(180deg,#45a049 0%,#3d8b40 100%)}