:root {
  --bg: #23272A;
  --panel: #2C2F33;
  --muted: #99AAB5;
  --accent: #5865F2; /* chosen accent */
  --text: #FFFFFF;
  --card: #2F3136;
}

body { background: var(--bg); color: var(--text); font-family: "Segoe UI", Roboto, Arial, sans-serif; margin:0; }

/* Sidebar */
.app { display:flex; min-height:100vh; }
.sidebar { width:80px; background:var(--panel); padding:12px 8px; box-sizing:border-box; display:flex; flex-direction:column; gap:8px; align-items:center; }
.sidebar .logo { width:56px; height:56px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--accent); }
.sidebar a.icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; color:var(--text); text-decoration:none; border-radius:12px; }
.sidebar a.icon:hover { background:rgba(255,255,255,0.04); }

/* Main area */
.main { flex:1; display:flex; flex-direction:column; }
.header { height:64px; display:flex; align-items:center; padding:0 16px; background:var(--panel); border-bottom:1px solid rgba(0,0,0,0.2); }
.header .server-title { font-weight:600; margin-left:12px; color:var(--text); }

.content { display:flex; flex:1; gap:16px; padding:16px; }
.channels { width:240px; background:var(--card); border-radius:8px; padding:12px; color:var(--muted); }
.chat-area { flex:1; display:flex; flex-direction:column; }
.chat-window { flex:1; overflow:auto; padding:12px; background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent); border-radius:8px; }
.message { display:flex; gap:12px; margin-bottom:8px; align-items:flex-start; }
.message .avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; background:#111; }
.message .bubble { background:var(--panel); padding:10px 12px; border-radius:8px; color:var(--text); }
.message .meta { font-size:12px; color:var(--muted); margin-bottom:4px; }

.input-row { display:flex; gap:8px; margin-top:12px; }
.input-row input { flex:1; padding:10px; border-radius:8px; border:none; background:#202225; color:var(--text); }
.input-row button { padding:10px 12px; border-radius:8px; border:none; background:var(--accent); color:white; cursor:pointer; }

/* Small responsive */
@media (max-width:800px){ .channels{display:none;} .sidebar{width:64px;} }


/* existing styles below */
:root{
  --bg:#0b1220; --card:#0f1720; --text:#e6eef8; --muted:#9fb0c8; --accent:#2ea44f; --btn:#238636;
}
body.theme-light{ --bg:#f6f8fa; --card:#ffffff; --text:#0b1220; --muted:#57606a; --accent:#0b66c3; --btn:#0b66c3; }
body{background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;margin:0}
.center{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.card{background:var(--card);padding:28px;border-radius:12px;width:360px;box-shadow:0 6px 30px rgba(2,6,23,0.6);display:flex;flex-direction:column;gap:10px}
.card h1{margin:0;font-size:22px}
.muted{color:var(--muted);font-size:13px;margin:0}
.small{font-size:12px;color:var(--muted)}
input{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
.row{display:flex;gap:8px;margin-top:6px}
.btn{padding:10px;border-radius:8px;border:none;background:transparent;color:var(--text);cursor:pointer}
.btn.primary{background:var(--btn);color:white}
.btn:hover{opacity:0.95}

.admin-badge{background:#2f80ed;color:#fff;padding:2px 6px;border-radius:6px;font-size:12px;margin-left:6px}