:root {
  --bg: #0b0b12; --panel: #14141f; --panel2: #1b1b2a; --line: #262637;
  --text: #e8e8f2; --dim: #8b8ba0; --acc: #ff9f43; --acc2: #7c3aed;
  --ok: #4ade80; --bad: #f87171; --warn: #ffd000;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, sans-serif; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: var(--panel); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; }
.brand { font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; }
.brand span { color: var(--acc); display: block; font-size: 11px; letter-spacing: 3px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.nav-group { color: var(--dim); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin: 12px 4px 4px; opacity: .85; }
.nav-group:first-child { margin-top: 0; }
.sidebar a { color: var(--dim); text-decoration: none; padding: 9px 10px; border-radius: 8px; }
.sidebar a:hover, .sidebar a.active { background: var(--panel2); color: var(--text); }
.sidebar a[hidden] { display: none; }
.textarea { width: 100%; min-height: 100px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 10px; border-radius: 8px; font: inherit; resize: vertical; }
.me { color: var(--dim); font-size: 13px; padding: 6px; border-top: 1px solid var(--line); }
button, .btn { background: var(--acc); color: #161005; border: 0; padding: 9px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--dim); }
.content { flex: 1; padding: 22px; max-width: 1100px; }
h1 { font-size: 20px; margin: 0 0 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card b { display: block; font-size: 22px; color: var(--acc); }
.card span { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
th { color: var(--dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--panel2); }
input, select { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: 8px; min-width: 0; }
label { display: block; color: var(--dim); font-size: 12px; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 1px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.row > div { flex: 1; min-width: 140px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.panel h2 { margin: 0 0 8px; font-size: 15px; color: var(--acc); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pill.king { background: rgba(255,215,0,.2); color: #ffd700; }
.pill.co_king, .pill.head_admin { background: rgba(255,159,67,.18); color: var(--acc); }
.pill.admin, .pill.developer { background: rgba(124,58,237,.22); color: #c4b5fd; }
.pill.best_capybara { background: rgba(255,255,255,.14); color: #e8e8f2; }
.pill.friend, .pill.citizen, .pill.visitante, .pill.cool { background: rgba(74,222,128,.12); color: var(--ok); }
.pill.hazbin { background: rgba(248,113,113,.15); color: var(--bad); }
.pill.custom { background: rgba(248,113,113,.18); color: #ff4444; }
.pill.owner,.pill.admin-x { background: rgba(255,159,67,.15); color: var(--acc); }
.pill.moderator { background: rgba(124,58,237,.2); color: #c4b5fd; }
.pill.player { background: rgba(74,222,128,.12); color: var(--ok); }
.pill.banned,.pill.suspended { background: rgba(248,113,113,.15); color: var(--bad); }
.pill.active { background: rgba(74,222,128,.12); color: var(--ok); }
tr.selected-row { outline: 2px solid var(--acc2); outline-offset: -2px; background: var(--panel2) !important; }
.ok-msg { color: var(--ok); } .bad-msg { color: var(--bad); } .dim { color: var(--dim); }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: min(440px, 92vw); }
.modal h3 { margin-top: 0; }
.checks { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.checks label { display: flex; gap: 6px; align-items: center; text-transform: none; font-size: 14px; margin: 0; color: var(--text); }
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; width: min(400px, 94vw); }
.login-card h1 { text-align: center; letter-spacing: 2px; } .login-card h1 span { color: var(--acc); }
.login-card section h2 { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 2px; }
.login-card input { width: 100%; margin-bottom: 8px; }
.login-card button { width: 100%; margin-top: 6px; }
.divider { text-align: center; color: var(--dim); margin: 14px 0; position: relative; }
.divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.divider span { position: relative; background: var(--panel); padding: 0 10px; }
.err { color: var(--bad); font-size: 13px; }
.back { display: block; text-align: center; margin-top: 16px; color: var(--dim); }
@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
}

/* ---- admin chat ---- */
.chat-msg { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.chat-msg:hover { background: var(--panel2); }
.chat-msg.chat-me { background: rgba(124,58,237,.1); }
.chat-msg .chat-text { font-size: 14px; flex: 1; min-width: 0; word-break: break-word; }
.chat-panel #chat-input { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; }