body{background-color:#121212;color:#e0e0e0;font-family:'Segoe UI',sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:64px}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.site-logo{height:50px;width:auto}
.header-bar{position:fixed;top:0;left:0;right:0;z-index:3000;background:rgba(18,18,18,0.92);border-bottom:1px solid #2b2b2b}
.header-inner{padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:992px){.header-inner{padding:10px 12px}}
.top-links{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.top-link{color:#b0b0b0;text-decoration:none;font-size:0.85rem;display:flex;align-items:center;gap:6px;transition:.3s}
.top-link:hover{color:#fff}
.header-right{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex}
.lang-btn{background-color:#1e1e1e;color:#888;border:1px solid #333;padding:5px 12px;font-size:0.85rem;cursor:pointer;transition:.3s}
.lang-btn.active{background-color:#d32f2f;color:white;border-color:#d32f2f;font-weight:700}
.lang-btn:first-child{border-radius:4px 0 0 4px;border-right:none}
.lang-btn:last-child{border-radius:0 4px 4px 0}
.card-dark{background-color:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.5)}
.btn-check-custom{background-color:#d32f2f;color:white;border:none;width:100%;padding:12px;font-weight:700;border-radius:6px;margin-top:10px;transition:.2s}
.btn-check-custom:hover{background-color:#b71c1c;color:white;cursor:pointer}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.online-indicator{width:14px;height:14px;background-color:#4caf50;border-radius:50%;display:inline-block;box-shadow:0 0 10px #4caf50;flex-shrink:0}
.server-badge{background-color:#0d47a1;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.88rem;font-weight:700;text-transform:uppercase;vertical-align:middle}
.location-text{color:#ffca28;font-size:1.1rem;margin-top:2px;font-weight:600}
.info-subtext{font-size:1.4rem;color:#bdbdbd;margin-top:2px}
.player-row .fs-5{font-size:1.8rem !important}
#player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:992px){#player-list{grid-template-columns:1fr}}
.player-row{background-color:#252525;border:1px solid #333;border-radius:10px;padding:15px;display:flex;flex-direction:column;gap:10px;transition:.2s;animation:fadeIn .5s ease-in-out}
.player-row:hover{background-color:#2a2a2a;border-color:#444}
.player-top{display:flex;gap:10px;align-items:center}
.player-info{min-width:0}
.player-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.player-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:5px}
.player-actions{display:flex}
.player-actions .btn{padding:5px 12px;font-size:0.85rem}
#staff-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:992px){#staff-list{grid-template-columns:1fr}}
.staff-card{background:#202428;border:1px solid #3b3f44;border-radius:10px;padding:10px 10px;animation:fadeIn .35s ease-in-out;transition:.2s}
.staff-card:hover{border-color:#555;background:#242a2f}
.staff-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.staff-left{display:flex;align-items:center;gap:8px;min-width:0}
.staff-dot{width:10px;height:10px;background:#4caf50;border-radius:50%;box-shadow:0 0 6px #4caf50;flex-shrink:0}
.staff-name{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.staff-role{background:#d32f2f;color:#fff;border-radius:6px;font-size:0.7rem;font-weight:800;padding:2px 6px;flex-shrink:0}
.staff-body{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.staff-loc{color:#ffca28;font-weight:700;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.staff-srv{color:#bdbdbd;font-size:0.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.staff-actions .btn{padding:2px 8px;font-size:0.75rem}
.recent-btn{border-color:#444 !important;color:#e0e0e0 !important}
.recent-btn:hover{border-color:#d32f2f !important;color:#fff !important}
.recent-modal{position:fixed;inset:0;z-index:5000}
.recent-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.recent-modal-card{position:relative;width:min(520px,92vw);margin:70px auto 0 auto;background:#1e1e1e;border:1px solid #333;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6);overflow:hidden;animation:fadeIn .18s ease-in-out}
.recent-modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #333}
.recent-modal-title{font-weight:800;color:#fff;font-size:0.95rem}
.recent-modal-close{background:transparent;border:none;color:#bbb;font-size:1.1rem;line-height:1}
.recent-modal-close:hover{color:#fff}
.recent-modal-body{padding:10px 12px;overflow:auto;max-height:55vh}
.recent-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:9px 10px;border:1px solid #2d2d2d;border-radius:10px;background:#181818;margin-bottom:8px}
.recent-item:hover{background:#202020;border-color:#3a3a3a;cursor:pointer}
.recent-left{min-width:0;flex:1}
.recent-left-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.recent-name{color:#fff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;font-size:0.95rem}
.recent-meta{color:#bdbdbd;font-size:.82rem;margin-top:2px}
.recent-id-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #3a3a3a;background:#141414;color:#ffca28;font-weight:800;font-size:.82rem}
.recent-chev{color:#777;flex-shrink:0}
#staff-list::-webkit-scrollbar{width:6px}
#staff-list::-webkit-scrollbar-track{background:#1e1e1e}
#staff-list::-webkit-scrollbar-thumb{background:#555;border-radius:3px}
#staff-list::-webkit-scrollbar-thumb:hover{background:#d32f2f}
.quick-search-box{border-left:1px solid #333;padding-left:1.5rem}
@media (max-width:768px){.quick-search-box{border-left:none;border-top:1px solid #333;padding-left:0;padding-top:1rem;margin-top:1rem}}
.custom-select-wrapper{position:relative}
.custom-select-filter{background:#2b2b2b;border:1px solid #444;color:#fff;width:100%;padding:8px 10px;border-radius:6px;margin-bottom:5px;font-size:0.9rem}
.custom-select-filter:focus{outline:none;border-color:#d32f2f}
.custom-select-filter::placeholder{color:#fff !important;opacity:1}
.custom-select-list{background:#2b2b2b;border:1px solid #444;color:#fff;width:100%;border-radius:6px;max-height:180px;overflow-y:auto}
.custom-select-list option{color:#fff;padding:8px;border-bottom:1px solid #333;cursor:pointer}
.custom-select-list optgroup{background:#1e1e1e;color:#aaa;font-style:normal;font-weight:bold}
.role-badge{font-size:1.1rem;color:#e0e0e0;display:flex;align-items:center;gap:6px;font-weight:600}
.update-time{font-size:0.75rem;color:#b0b0b0;margin-left:8px;font-weight:600;background-color:rgba(255,255,255,0.1);padding:2px 8px;border-radius:4px;border:1px solid #3a3a3a;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
@media (max-width:576px){.update-time{margin-left:0;margin-top:4px;display:inline-flex;width:fit-content}}
.loc-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #333}
.loc-badge{background-color:#2c2c2c;border:1px solid #444;color:#e0e0e0;padding:4px 10px;border-radius:20px;font-size:0.9rem;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px;font-weight:600}
.loc-badge:hover{background-color:#d32f2f;border-color:#d32f2f;color:#fff;transform:translateY(-2px)}
.loc-badge .count{color:#2ecc71;font-size:1.1rem;font-weight:800;margin-left:2px}
.id-text{color:#fff !important;font-weight:500}