:root{ --bg:#0b0505;--surface:#160a0a;--surface2:#220f0f;--border:#3a1c1c; --orange:#e74c3c;--orange2:#c0392b;--orange-dim:#7a221b;--orange-glow:rgba(231,76,60,0.15); --text:#f5e6d0;--text-dim:#a88a8a;--text-muted:#5a4040; --diamond:#4dd9e8;--dg:rgba(77,217,232,0.2); --success:#2ecc71;--r:8px; }
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh; overflow-x:hidden;}
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(231,76,60,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(231,76,60,0.05) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate; }
@keyframes gridDriftX { 0% { background-position-x: 0px; } 100% { background-position-x: 1024px; } }
@keyframes gridDriftY { 0% { background-position-y: 0px; } 100% { background-position-y: 1024px; } }

.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center; justify-content:space-between;padding:11px 20px; background:rgba(11,5,5,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.mc-title{font-family:'Press Start 2P',monospace;font-size:0.6rem;color:var(--orange);text-shadow:0 0 10px var(--orange);}
.mc-sub{font-size:0.73rem;color:var(--text-dim);margin-top:2px;font-weight:700;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-link{background:transparent;border:1px solid var(--border);border-radius:var(--r); padding:7px 12px;color:var(--text-dim);font-size:0.78rem;font-weight:700; cursor:pointer;transition:0.15s;text-decoration:none; white-space:nowrap;}
.topbar-link:hover{border-color:var(--orange);color:var(--orange);}

.bell-btn{position:relative;cursor:pointer;font-size:1.3rem;text-decoration:none;}
.bell-badge{position:absolute;top:-5px;right:-8px;background:var(--diamond);color:#000;font-size:0.5rem;font-family:'Press Start 2P',monospace;padding:3px 5px;border-radius:10px;display:none;}

.layout{position:relative;z-index:1;display:flex;max-width:1300px;margin:30px auto;padding:0 20px;gap:20px;align-items:flex-start;}
.sidebar{width:220px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px;}
.main{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:25px;}

.sidebar-title{font-family:'Press Start 2P',monospace;font-size:0.5rem;color:var(--orange);margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.tab-btn{display:block;width:100%;text-align:left;background:transparent;border:none; border-radius:5px;padding:12px;color:var(--text-dim);font-family:'Nunito',sans-serif;font-weight:800;font-size:0.9rem;cursor:pointer; transition:0.15s;margin-bottom:8px; border-left:3px solid transparent;}
.tab-btn:hover{color:var(--text); background:var(--surface2);}
.tab-btn.active{background:var(--orange-glow);border-left-color:var(--orange);color:var(--orange);}

.panel-title { font-family:'Press Start 2P',monospace; font-size:0.8rem; color:var(--text); margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:15px; }

.data-grid { display:flex; flex-direction:column; gap:10px; }
.data-row { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:15px; display:flex; flex-wrap:wrap; gap:15px; align-items:center; }
.col { flex:1; min-width:120px; display:flex; flex-direction:column; gap:5px; }
.col label { font-size:0.7rem; font-weight:800; color:var(--text-dim); text-transform:uppercase; }
.col-val { font-size:0.9rem; font-weight:700; color:var(--text); }

.form-input, .form-select { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:8px 10px; color:var(--text); font-family:inherit; outline:none; width:100%; }
.form-input:focus, .form-select:focus { border-color:var(--orange); }

.btn { padding:8px 15px; border:none; border-radius:4px; font-weight:800; cursor:pointer; font-family:'Nunito',sans-serif; transition:0.1s; }
.btn-save { background:var(--success); color:#000; }
.btn-save:hover { filter:brightness(1.2); }
.btn-danger { background:rgba(231,76,60,0.1); border:1px solid var(--orange); color:var(--orange); }
.btn-danger:hover { background:var(--orange); color:#000; box-shadow:0 0 10px rgba(231,76,60,0.4);}
.btn-primary { background:var(--diamond); color:#000; }

.banned-row { border-color:var(--orange); opacity:0.8; }

.db-viewer { display:flex; height:550px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface2); overflow:hidden; }
.db-col { flex:1; border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; background:var(--surface); }
.db-col:last-child { border-right:none; flex:2; background:#000; }
.db-header { padding:12px; background:var(--surface2); font-family:'Press Start 2P',monospace; font-size:0.5rem; color:var(--text-dim); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;}
.db-item { padding:12px; cursor:pointer; border-bottom:1px solid var(--border); color:var(--text); font-size:0.85rem; font-weight:700; transition:0.1s; display:flex; flex-direction:column; gap:4px;}
.db-item:hover, .db-item.active { background:var(--orange-glow); border-left:3px solid var(--orange); color:var(--orange); }
.db-textarea { flex:1; background:transparent; color:#a6e22e; font-family:monospace; font-size:0.9rem; border:none; padding:15px; resize:none; outline:none; line-height:1.5; }

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--surface); border:1px solid var(--orange);border-radius:var(--r);padding:10px 20px; font-size:0.86rem;font-weight:700;color:var(--orange);z-index:999; opacity:0;transition:transform 0.25s,opacity 0.25s;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

@media (max-width: 768px) {
.layout { flex-direction:column; padding:10px; gap:10px; }
.sidebar { width:100%; display:flex; overflow-x:auto; padding:10px; }
.tab-btn { width:auto; border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
.tab-btn.active { border-left-color:transparent; border-bottom-color:var(--orange); }
.main { padding: 15px; }
.data-row { flex-direction:column; align-items:stretch; }
.db-viewer { flex-direction:column; height:800px; }
.db-col { flex:none; height:33%; border-right:none; border-bottom:1px solid var(--border); }
}
::-webkit-scrollbar{height:4px; width:5px;}::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}