*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}
.navbar{background:#1e293b;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 6px rgba(0,0,0,.3)}
.navbar h1{font-size:24px;color:#3b82f6}
.navbar .user-info{display:flex;align-items:center;gap:20px}
.navbar .username{font-weight:600}
.nav-links{display:flex;gap:15px}
.nav-link{background:#334155;color:#e2e8f0;padding:10px 20px;border-radius:8px;text-decoration:none;transition:background .2s;font-weight:500}
.nav-link:hover{background:#475569}
.nav-link.admin{background:#dc2626;color:#fff;font-weight:600}
.nav-link.admin:hover{background:#b91c1c}
.navbar .logout-btn{background:#dc2626;color:#fff;padding:10px 20px;border-radius:8px;text-decoration:none;transition:background .2s}
.navbar .logout-btn:hover{background:#b91c1c}
.user-menu{position:relative}
.user-menu-trigger{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#334155;border-radius:8px;cursor:pointer;transition:all .2s;user-select:none}
.user-menu-trigger:hover{background:#475569}
.user-menu.active .user-menu-trigger{background:#475569;border-bottom-left-radius:0;border-bottom-right-radius:0}
.user-avatar-mini{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #3b82f6}
.user-menu-trigger span{color:#e2e8f0;font-weight:600}
.dropdown-arrow{font-size:14px;color:#94a3b8;transition:transform .3s}
.user-menu.active .dropdown-arrow{transform:rotate(180deg)}
.user-dropdown{position:absolute;top:100%;right:0;background:#1e293b;border:1px solid #334155;border-radius:0 0 8px 8px;min-width:200px;box-shadow:0 8px 16px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s;z-index:1000}
.user-menu.active .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 16px;color:#e2e8f0;text-decoration:none;transition:all .2s;font-size:14px;font-weight:500}
.dropdown-item:hover{background:#334155}
.dropdown-item i{font-size:16px;width:20px;text-align:center;color:#94a3b8}
.dropdown-item:hover i{color:#3b82f6}
.dropdown-item.logout{color:#ef4444}
.dropdown-item.logout:hover{background:rgba(239,68,68,.1)}
.dropdown-item.logout i{color:#ef4444}
.dropdown-divider{height:1px;background:#334155;margin:8px 0}
.container{max-width:1400px;margin:0 auto;padding:40px 20px}
.upload-section{background:#1e293b;border-radius:12px;padding:30px;margin-bottom:40px;border:2px dashed #334155;text-align:center}
.upload-section h2{margin-bottom:20px;color:#e2e8f0}
.file-input-wrapper{position:relative;display:inline-block;margin-bottom:15px}
.file-input-wrapper input[type="file"]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}
.file-input-label{background:#334155;color:#e2e8f0;padding:12px 24px;border-radius:8px;cursor:pointer;display:inline-block;transition:background .2s}
.file-input-label:hover{background:#475569}
.file-name{color:#94a3b8;margin:10px 0;font-size:14px}
.upload-btn{background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);color:#fff;padding:14px 32px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s}
.upload-btn:hover{transform:translateY(-2px)}
.upload-btn:disabled{opacity:.5;cursor:not-allowed}
.games-header{margin-bottom:30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}
.games-header h2{font-size:28px;color:#e2e8f0}
.games-header-actions{display:flex;gap:10px;align-items:center}
.refresh-ranks-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px}
.refresh-ranks-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,185,129,.4)}
.refresh-ranks-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sort-select{background:#334155;color:#e2e8f0;padding:10px 15px;border:1px solid #475569;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.sort-select:hover{background:#475569}
.sort-select:focus{outline:0;border-color:#3b82f6}
.refresh-log-box{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:15px;margin-top:20px;margin-bottom:30px;max-height:300px;overflow-y:auto;font-family:'Courier New',monospace;font-size:.85rem;color:#94a3b8;line-height:1.6;display:none}
.refresh-log-box.visible{display:block}
.log-success{color:#10b981}
.log-error{color:#ef4444}
.log-info{color:#3b82f6}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}
.game-card{background:#1e293b;border-radius:12px;overflow:hidden;transition:transform .2s;border:1px solid #334155;position:relative}
.game-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.game-card img{width:100%;height:180px;object-fit:cover}
.game-card-content{padding:20px}
.game-card h3{color:#e2e8f0;margin-bottom:8px;font-size:18px}
.category-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.category-row p{margin:0;color:#94a3b8;font-size:14px;flex:1}
.settings-icon{background:none;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:4px;transition:all .2s;opacity:.6;flex-shrink:0}
.settings-icon:hover{background:#334155;opacity:1}
.game-card .stats{display:flex;gap:15px;margin:15px 0;font-size:13px;flex-wrap:wrap}
.game-card .stat{color:#64748b}
.rank-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);color:#fff;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}
.rank-badge.verified{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.rank-badge.unavailable{background:#475569;color:#94a3b8}
.game-card .view-btn{display:block;background:#3b82f6;color:#fff;text-align:center;padding:12px;border-radius:8px;text-decoration:none;transition:background .2s;margin-bottom:10px}
.game-card .view-btn:hover{background:#2563eb}
.public-indicator{background:#10b981;color:#fff;padding:6px 10px;border-radius:6px;margin-bottom:10px;font-size:12px;text-align:center;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px}
.game-actions{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s;flex-shrink:0}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn.public{background:linear-gradient(135deg,#10b981,#059669);color:#fff;flex:1}
.icon-btn.private{background:linear-gradient(135deg,#64748b,#475569);color:#fff;flex:1}
.icon-btn.link{background:#334155;color:#3b82f6}
.icon-btn.link:hover{background:#475569}
.icon-btn.delete{background:#dc2626;color:#fff}
.icon-btn.delete:hover{background:#b91c1c}
.game-card.deleting{opacity:.5;pointer-events:none}
.empty-state{text-align:center;padding:60px 20px;color:#64748b}
.empty-state h3{font-size:24px;margin-bottom:10px}
.progress-bar{background:#334155;height:4px;border-radius:2px;overflow:hidden;margin:20px 0;display:none}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6 0%,#8b5cf6 100%);transition:width .3s}
.status-text{color:#64748b;font-size:14px;text-align:center;margin-top:10px}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.7);animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-content{background:#1e293b;margin:10% auto;padding:30px;border-radius:12px;width:90%;max-width:500px;border:1px solid #334155;animation:slideIn .3s}
@keyframes slideIn{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-header h3{color:#e2e8f0;margin:0}
.close-modal{background:none;border:none;color:#94a3b8;font-size:28px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}
.close-modal:hover{background:#334155;color:#e2e8f0}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:#94a3b8;margin-bottom:8px;font-size:14px}
.form-group input{width:100%;padding:12px;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#e2e8f0;font-size:14px}
.form-group input:focus{outline:0;border-color:#3b82f6}
.form-group small{display:block;color:#64748b;margin-top:6px;font-size:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.btn{background:#3b82f6;color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;transition:background .2s;font-weight:600}
.btn:hover{background:#2563eb}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:#334155;color:#e2e8f0;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;transition:background .2s}
.btn-secondary:hover{background:#475569}
.btn-danger{background:#dc2626;color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;transition:background .2s;font-weight:600}
.btn-danger:hover{background:#b91c1c}
.status-selector{margin:10px 0}
.status-dropdown{width:100%;padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.status-dropdown:hover{border-color:#3b82f6;background:#1e293b}
.status-dropdown:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.status-dropdown option{background:#1e293b;color:#e2e8f0}
.game-card[data-status="abandoned"]{opacity:.6}
.game-card[data-status="planning"]{border-left:3px solid #f59e0b}
.game-card[data-status="active"]{border-left:3px solid #10b981}
.group-header{background:#1e293b;padding:20px;border-radius:12px;margin:40px 0 20px 0;border:1px solid #334155;display:flex;justify-content:space-between;align-items:center}
.group-title h3{display:flex;align-items:center;gap:10px;font-size:20px;color:#e2e8f0;margin:0}
.group-header .count{background:#334155;color:#94a3b8;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:600}
.settings-section{background:#1e293b;border-radius:12px;padding:30px;max-width:700px;margin:0 auto}
.settings-form{margin-top:20px}
.message{padding:15px;border-radius:8px;margin-bottom:20px;font-weight:600}
.message.success{background:#10b981;color:#fff}
.message.error{background:#ef4444;color:#fff}
.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer}
.checkbox-label input[type="checkbox"]{width:20px;height:20px;cursor:pointer}
.profile-toggle{padding:10px 0;margin-top:10px}
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#94a3b8;transition:color .2s}
.toggle-label.small{font-size:13px}
.toggle-label:hover{color:#e2e8f0}
.toggle-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:#3b82f6}
.group-actions .toggle-label{font-size:14px}
.game-card.dragging{opacity:.5;cursor:grabbing!important}
.game-card.drag-over{border:2px dashed #3b82f6!important;background:rgba(59,130,246,.1)}
.sort-btn{background:#334155;color:#e2e8f0;padding:10px 20px;border-radius:8px;text-decoration:none;transition:all .2s;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.sort-btn:hover{background:#475569;transform:translateY(-2px)}
.sort-btn.active{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.drag-handle{cursor:grab;color:#64748b;transition:color .2s}
.game-card:hover .drag-handle{color:#3b82f6}
.sort-buttons{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.notifications-container{max-width:1200px;margin:0 auto;padding:20px 20px 0}
.notification{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:18px 20px;border-radius:12px;margin-bottom:15px;border:1px solid;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:slideIn .3s ease}
.notification-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.notification-content{flex:1}
.notification-title{font-size:16px;font-weight:700;margin-bottom:6px}
.notification-message{font-size:14px;line-height:1.5;margin-bottom:10px}
.notification-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;margin-top:8px}
.dismiss-btn{background:transparent;border:none;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s;opacity:.6;flex-shrink:0}
.dismiss-btn:hover{opacity:1;background:rgba(0,0,0,.1)}
.notification-info{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:#e2e8f0}
.notification-info .notification-icon{background:rgba(59,130,246,.2);color:#3b82f6}
.notification-info .notification-action{background:#3b82f6;color:#fff}
.notification-info .notification-action:hover{background:#2563eb;transform:translateY(-2px)}
.notification-warning{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#e2e8f0}
.notification-warning .notification-icon{background:rgba(245,158,11,.2);color:#f59e0b}
.notification-warning .notification-title{color:#f59e0b}
.notification-warning .notification-action{background:#f59e0b;color:#fff}
.notification-warning .notification-action:hover{background:#d97706;transform:translateY(-2px)}
.notification-success{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#e2e8f0}
.notification-success .notification-icon{background:rgba(16,185,129,.2);color:#10b981}
.notification-success .notification-title{color:#10b981}
.notification-success .notification-action{background:#10b981;color:#fff}
.notification-success .notification-action:hover{background:#059669;transform:translateY(-2px)}
.notification-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#e2e8f0}
.notification-error .notification-icon{background:rgba(239,68,68,.2);color:#ef4444}
.notification-error .notification-title{color:#ef4444}
.notification-error .notification-action{background:#ef4444;color:#fff}
.notification-error .notification-action:hover{background:#dc2626;transform:translateY(-2px)}
.custom-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999!important;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .2s ease}
.custom-modal.show{visibility:visible;opacity:1}
.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:1}
.modal-content-custom{position:relative;z-index:100;background:#1e293b;border:1px solid #334155;border-radius:12px;width:90%;max-width:450px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);transform:scale(.95);transition:transform .2s ease;overflow:hidden}
.custom-modal.show .modal-content-custom{transform:scale(1)}
.modal-header-custom{padding:20px 24px;background:#1e293b;border-bottom:1px solid #334155;display:flex;align-items:center;gap:16px}
.modal-header-custom h3{margin:0;color:#f8fafc;font-size:1.25rem;font-weight:600}
.modal-body-custom{padding:24px;color:#cbd5e1;font-size:1rem;line-height:1.5;background:#1e293b}
.modal-footer-custom{padding:16px 24px;background:#0f172a;border-top:1px solid #334155;display:flex;justify-content:flex-end;gap:12px}
.modal-footer-custom button{cursor:pointer;position:relative;z-index:200;padding:10px 20px;border-radius:6px;font-weight:600;border:none;font-size:.95rem}
@keyframes modalSlideIn{from{transform:translateY(-20px) scale(.95)}to{transform:translateY(0) scale(1)}}
.modal-body-custom ul{margin:1rem 0;padding-left:1.5rem}
.modal-body-custom ul li{margin:.5rem 0}
.dashboard-notification{position:fixed;top:20px;right:20px;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:1.5rem;box-shadow:0 10px 40px rgba(0,0,0,.5);z-index:10000;min-width:400px;max-width:600px;opacity:0;transform:translateX(400px);transition:all .3s cubic-bezier(.4,0,.2,1)}
.dashboard-notification.show{opacity:1;transform:translateX(0)}
.dashboard-notification.success{border-left:4px solid #10b981}
.dashboard-notification.error{border-left:4px solid #ef4444}
.dashboard-notification.success i{color:#10b981}
.dashboard-notification.error i{color:#ef4444}
.notification-text{color:#e2e8f0;font-size:.95rem;line-height:1.6;white-space:pre-wrap}
@media (max-width:768px){.navbar{padding:15px 20px;flex-direction:column;gap:15px}.user-menu-trigger{width:100%}.user-dropdown{right:auto;left:0;width:100%}}
.game-select-overlay{position:absolute;top:10px;right:10px;z-index:10;opacity:0;transition:opacity .2s ease;background:rgba(15,23,42,.75);border-radius:6px;padding:6px;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.game-card:hover .game-select-overlay,.game-card.selected .game-select-overlay{opacity:1}
.bulk-check{width:20px;height:20px;cursor:pointer;accent-color:#3b82f6;display:block;margin:0}
.game-card.selected{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.4),0 10px 30px rgba(0,0,0,.5);transform:translateY(-4px)}
.bulk-action-bar{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(120px);background:#1e293b;border:1px solid #334155;border-radius:12px;padding:12px 24px;display:flex;align-items:center;gap:20px;box-shadow:0 20px 50px rgba(0,0,0,.7);z-index:9000;opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.175,.885,.32,1.275);min-width:450px}
.bulk-action-bar.active{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.bulk-info{font-weight:600;color:#e2e8f0;display:flex;align-items:center;gap:10px;padding-right:15px;border-right:1px solid #334155;font-size:14px}
.bulk-info .count-badge{background:#3b82f6;color:white;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:700}
.bulk-actions{display:flex;align-items:center;gap:10px}
.vr{width:1px;height:24px;background:#334155;margin:0 5px}
.btn-icon-bulk{background:#334155;color:#e2e8f0;border:none;width:38px;height:38px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s}
.btn-icon-bulk:hover{background:#475569;color:#fff;transform:translateY(-2px)}
.btn-icon-bulk.delete{background:rgba(239,68,68,.1);color:#ef4444}
.btn-icon-bulk.delete:hover{background:#ef4444;color:white}
.bulk-select{padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;font-size:13px;cursor:pointer;outline:none}
.bulk-select:focus{border-color:#3b82f6}
.close-bulk{margin-left:auto;background:none;border:none;color:#94a3b8;font-size:24px;cursor:pointer;padding:0 5px;line-height:1;display:flex;align-items:center}
.close-bulk:hover{color:#e2e8f0}
.upload-split-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
.upload-box{background:#1e293b;border:2px dashed #475569;border-radius:16px;padding:30px;text-align:center;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;position:relative}
.upload-box:hover,.upload-box.dragover{border-color:#3b82f6;background:rgba(59,130,246,.05);transform:translateY(-2px)}
.icon-wrapper{width:60px;height:60px;background:rgba(51,65,85,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:15px;transition:background .2s}
.upload-box:hover .icon-wrapper{background:#3b82f6}
.icon-wrapper i{font-size:28px;color:#94a3b8;transition:color .2s}
.upload-box:hover .icon-wrapper i{color:#ffffff}
.upload-title{font-size:1.25rem;font-weight:700;color:#f1f5f9;margin-bottom:8px}
.upload-desc{font-size:.9rem;color:#94a3b8;line-height:1.5;max-width:250px}
.status-select-mini{width:100%;padding:8px 12px;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#e2e8f0;margin-bottom:10px;cursor:pointer}
.upload-btn-mini{width:100%;padding:10px;background:#3b82f6;color:white;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s}
.upload-btn-mini:hover{background:#2563eb}
.file-name{background:#334155;padding:6px 12px;border-radius:6px;font-size:.85rem;color:#e2e8f0;margin-bottom:10px;word-break:break-all}
@media (max-width:768px){.upload-split-container{grid-template-columns:1fr}}
.game-actions,.status-selector,.profile-toggle,.settings-icon{position:relative;z-index:50!important;pointer-events:auto!important}
.game-select-overlay{z-index:10!important}
.game-card a.view-btn{position:relative;z-index:50!important}