:root{--bg-main:#111214;--bg-main-end:#0c0d0f;--bg-sidebar:#1a1b1e;--bg-sidebar-border:#252628;--bg-hover:#222428;--bg-input:#1e1f23;--bg-modal:#1a1b1e;--bg-modal-border:#2a2b2f;--accent-green:#27ae60;--accent-green-hover:#229954;--accent-green-dim:#27ae601f;--text-primary:#e4e5e8;--text-secondary:#9a9ba0;--text-muted:#52535a;--text-green:#4ade80;--sidebar-width:200px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font:"Inter", system-ui, -apple-system, sans-serif;--bg-dark:var(--bg-main);--bg-dark-end:var(--bg-main-end);--bg-card:var(--bg-sidebar);--border-color:var(--bg-modal-border);--purple-glow:var(--accent-green-dim);--accent-blue:var(--accent-green);--accent-blue-hover:var(--accent-green-hover);--font-inter:var(--font)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);background:linear-gradient(135deg, var(--bg-main) 0%, var(--bg-main-end) 100%);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.app-layout{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--bg-sidebar-border);flex-direction:column;display:flex;overflow:hidden}.sidebar-top,.logo-area{padding:14px 12px 10px}.logo-area h2{font-family:var(--font);letter-spacing:.5px;color:var(--accent-green);font-size:16px;font-weight:700;line-height:1.2}.logo-area span{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:600}.sidebar-middle{flex:1;overflow-y:auto}.sidebar-nav{flex-direction:column;gap:2px;padding:4px 8px;display:flex}.menu{flex-direction:column;flex:1;gap:2px;padding:4px 8px;display:flex}.nav-btn,.menu-item{border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-secondary);text-align:left;cursor:pointer;background:0 0;border:none;border-left:3px solid #0000;align-items:center;width:100%;padding:7px 10px;font-size:13px;font-weight:500;line-height:1.3;text-decoration:none;transition:all .15s;display:flex}.nav-btn:hover,.menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-btn.active,.menu-item.active{background:var(--bg-hover);color:var(--text-primary);border-left-color:var(--accent-green);font-weight:600}.menu-icon-svg{flex-shrink:0;width:15px;height:15px;margin-right:8px}.menu-divider{background:var(--bg-sidebar-border);height:1px;margin:8px 0}.sidebar-bottom,.sidebar-footer{border-top:1px solid var(--bg-sidebar-border);color:var(--text-secondary);padding:8px 12px 12px;font-size:11px}.admin-user-tag strong{color:var(--text-primary);font-size:12px}.btn-logout{color:#ef4444}.btn-logout:hover{color:#fca5a5;background:#ef444414}.content-area{flex:1;padding:24px 32px;overflow-y:auto}.top-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.top-header h1{color:var(--text-primary);margin-bottom:2px;font-size:18px;font-weight:700}.subtitle{color:var(--text-secondary);font-size:13px}.connection-status{background:var(--accent-green-dim);color:var(--text-green);white-space:nowrap;border:1px solid #27ae602e;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600}.content-section{display:none}.content-section.active{animation:.25s ease-in-out fadeIn;display:block}.card{background:var(--bg-sidebar);border:1px solid var(--bg-modal-border);border-radius:var(--radius-md);margin-bottom:20px;padding:20px}.card h3{color:var(--text-primary);margin-bottom:8px;font-size:15px;font-weight:600}.description-text{color:var(--text-secondary);margin-bottom:16px;font-size:12px;line-height:1.5}.card-grid-two{grid-template-columns:1fr 1fr;gap:20px;display:grid}.card-glow-purple{background:linear-gradient(135deg, #27ae600a 0%, var(--bg-sidebar) 100%);border-color:#27ae6033}.form-stack{flex-direction:column;gap:14px;display:flex}.form-row-2col{grid-template-columns:1fr 1fr;gap:14px;display:grid}.form-grid{grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:14px;display:grid}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}input,select{background:var(--bg-input);border:1px solid var(--bg-modal-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:var(--font);outline:none;padding:9px 12px;transition:border-color .2s}input:focus,select:focus{border-color:var(--accent-green)}input::placeholder{color:var(--text-muted)}.password-input-container{align-items:center;width:100%;display:flex;position:relative}.password-input-container input{width:100%;padding-right:40px!important}.password-toggle-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:color .15s;display:flex;position:absolute;right:12px}.password-toggle-btn:hover{color:var(--text-primary)}input[type=file]{display:none}.file-upload-area{border:2px dashed var(--bg-modal-border);border-radius:var(--radius-md);text-align:center;cursor:pointer;color:var(--text-secondary);background:var(--bg-input);flex-direction:column;justify-content:center;align-items:center;min-height:100px;padding:24px 16px;font-size:13px;transition:border-color .2s,background .2s;display:flex}.file-upload-area:hover,.file-upload-area.dragover{border-color:var(--accent-green);background:var(--accent-green-dim);color:var(--text-primary)}.btn{border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;text-align:center;border:none;padding:8px 16px;line-height:1.4;transition:all .15s}.btn-primary{background:var(--accent-green);color:#fff}.btn-primary:hover{background:var(--accent-green-hover)}.btn-success{background:var(--accent-green);color:#fff}.btn-success:hover{background:var(--accent-green-hover)}.btn-danger{color:#fff;background:#e74c3c}.btn-danger:hover{background:#c0392b}.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--bg-modal-border)}.btn-secondary:hover{background:var(--bg-modal-border)}.full-width{width:100%}.mt-2{margin-top:8px}.mt-4{margin-top:24px}.capes-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;display:grid}.cape-card{background:var(--bg-input);border:1px solid var(--bg-modal-border);border-radius:var(--radius-sm);text-align:center;flex-direction:column;align-items:center;padding:12px;display:flex;position:relative}.cape-preview-img{object-fit:contain;width:36px;height:56px;image-rendering:pixelated;margin-bottom:8px}.cape-card span{color:var(--text-primary);margin-bottom:2px;font-size:12px;font-weight:600}.cape-card code{color:var(--text-secondary);background:#ffffff0a;border-radius:3px;margin-bottom:8px;padding:2px 5px;font-size:10px}.btn-delete-cape{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:3px;transition:all .15s;position:absolute;top:6px;right:6px}.btn-delete-cape:hover{color:#ef4444;background:#ef44441a}.keys-output{background:var(--bg-input);border:1px solid var(--bg-modal-border);border-radius:var(--radius-sm);flex-direction:column;justify-content:center;min-height:60px;padding:16px;display:flex}.keys-list{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.key-badge{background:var(--accent-green-dim);color:var(--text-green);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #27ae6033;padding:5px 10px;font-family:monospace;font-size:12px;transition:all .15s}.key-badge:hover{background:#27ae6033}.table-container{border:1px solid var(--bg-modal-border);border-radius:var(--radius-sm);overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%;font-size:12px}th,td{border-bottom:1px solid var(--bg-modal-border);padding:10px 14px}th{background:var(--bg-sidebar);color:var(--text-primary);text-transform:uppercase;letter-spacing:.3px;font-size:11px;font-weight:600}tr:last-child td{border-bottom:none}code{color:var(--text-primary);background:#ffffff0d;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px}.status-badge{text-transform:uppercase;letter-spacing:.3px;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:700}.status-badge.available{color:var(--text-green);background:#2ecc711a}.status-badge.used{color:#f39c12;background:#f39c121a}.status-badge.expired{color:#e74c3c;background:#e74c3c1a}.search-wrapper{gap:10px;margin-bottom:20px;display:flex}.search-input{flex:1}.player-details-grid{grid-template-columns:180px 1fr;gap:20px;margin-top:16px;display:grid}.player-avatar-box{background:var(--bg-input);border:1px solid var(--bg-modal-border);border-radius:var(--radius-md);text-align:center;flex-direction:column;align-items:center;padding:16px;display:flex}.player-avatar-img{width:56px;height:56px;image-rendering:pixelated;background:#000;border-radius:4px;margin-bottom:10px}.player-avatar-box h4{color:var(--text-primary);margin-bottom:3px;font-size:14px}.player-avatar-box p{color:var(--text-secondary);word-break:break-all;font-size:10px}.cosmetics-active-card{border:1px dashed var(--bg-modal-border);border-radius:var(--radius-sm);background:#ffffff05;width:100%;margin-top:12px;padding:12px}.cosmetics-active-card h5{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;font-size:11px;font-weight:600}.cosmetics-active-card div{color:var(--text-primary);margin-bottom:3px;font-size:12px}.player-manage-panel{flex-direction:column;gap:16px;display:flex}.sub-panel-card{border:1px solid var(--bg-modal-border);border-radius:var(--radius-sm);background:var(--bg-sidebar);padding:16px}.sub-panel-card h4{color:var(--text-primary);margin-bottom:10px;font-size:14px}.flex-row{align-items:center;gap:10px;display:flex}.login-overlay{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2000;background:#0c0d0feb;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.login-card{background:var(--bg-sidebar);border:1px solid var(--bg-modal-border);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:380px;padding:36px;animation:.35s cubic-bezier(.16,1,.3,1) loginScaleIn;box-shadow:0 8px 32px #00000080}.login-logo{margin-bottom:24px}.login-logo h2{color:var(--accent-green);margin-bottom:4px;font-size:22px;font-weight:700}.login-logo p{color:var(--text-secondary);font-size:13px}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{border-radius:var(--radius-sm);color:#fff;pointer-events:auto;justify-content:space-between;align-items:center;min-width:220px;max-width:360px;padding:12px 16px;font-size:13px;font-weight:600;animation:.3s ease-out slideIn;display:flex;box-shadow:0 8px 24px #00000059}.toast.success{background:var(--accent-green);box-shadow:0 8px 24px #27ae6040}.toast.error{background:#e74c3ceb;box-shadow:0 8px 24px #e74c3c40}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes loginScaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.empty-text{color:var(--text-muted);font-size:12px;font-style:italic}.guide-preview-box{border-radius:var(--radius-sm);border:1px solid var(--bg-modal-border);background:#ffffff05;gap:16px;margin-top:12px;padding:12px;display:flex}.pixel-info{color:var(--text-secondary);font-size:11px}.pixel-info strong{color:var(--text-primary)}.content-area::-webkit-scrollbar{width:6px}.content-area::-webkit-scrollbar-track{background:0 0}.content-area::-webkit-scrollbar-thumb{background:var(--bg-sidebar-border);border-radius:3px}.content-area::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}