/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Arial, sans-serif; }
body { background: #1e1f22; color: #dbdee1; font-size: 14px; overflow: hidden; }
.hidden { display: none !important; }

/* ── Auth ── */
#auth-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#1e1f22; }
.auth-card { background:#2b2d31; border-radius:8px; padding:32px; width:440px; max-width:94vw; border:1px solid #1e1f22; }
.auth-logo { font-size:18px; font-weight:700; color:#5865f2; text-align:center; margin-bottom:20px; }
.auth-title { font-size:24px; font-weight:700; color:#f2f3f5; text-align:center; margin-bottom:8px; }
.auth-sub { font-size:14px; color:#b5bac1; text-align:center; margin-bottom:24px; }
.field-group { margin-bottom:16px; }
.field-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#b5bac1; margin-bottom:6px; }
.auth-input, .disc-input { width:100%; background:#1e1f22; border:1px solid #1e1f22; border-radius:4px; padding:10px 12px; color:#dbdee1; font-family:inherit; font-size:15px; outline:none; transition:border-color .15s; }
.auth-input:focus, .disc-input:focus { border-color:#5865f2; }
.auth-input::placeholder, .disc-input::placeholder { color:#4e5058; }
.auth-error { font-size:13px; color:#ed4245; margin-bottom:12px; min-height:18px; }
.auth-btn { width:100%; border:none; border-radius:4px; font-family:inherit; font-size:15px; font-weight:600; padding:11px; cursor:pointer; margin-bottom:12px; transition:filter .1s; }
.auth-btn.primary { background:#5865f2; color:#fff; }
.auth-btn.primary:hover { filter:brightness(1.12); }
.auth-switch { font-size:13px; color:#b5bac1; text-align:center; }
.auth-switch span { color:#5865f2; cursor:pointer; }
.auth-switch span:hover { text-decoration:underline; }

/* ── App shell ── */
#app-screen { height:100vh; }
#app { display:flex; height:100vh; background:#1e1f22; position:relative; overflow:hidden; }

/* ── Left Sidebar ── */
#sidebar { width:240px; background:#2b2d31; display:flex; flex-direction:column; flex-shrink:0; height:100%; }
#server-header { padding:0 16px; height:48px; display:flex; align-items:center; border-bottom:1px solid #1e1f22; font-weight:600; font-size:15px; color:#f2f3f5; gap:8px; flex-shrink:0; }
.server-icon { color:#5865f2; }
#channels { flex:1; overflow-y:auto; padding:8px 0; }
#channels::-webkit-scrollbar { width:3px; }
#channels::-webkit-scrollbar-thumb { background:#1e1f22; border-radius:2px; }
.ch-category { padding:16px 8px 4px 16px; font-size:11px; font-weight:700; color:#949ba4; letter-spacing:.06em; text-transform:uppercase; }

/* Channel rows */
.ch-row { display:flex; align-items:center; padding:0 8px; margin:0 8px; border-radius:4px; cursor:pointer; color:#949ba4; gap:6px; font-size:15px; height:34px; transition:background .08s, color .08s; }
.ch-row:hover { background:#35373c; color:#dbdee1; }
.ch-row.active { background:#404249; color:#f2f3f5; }

/* Custom channel icons — no emoji */
.ch-hash { font-size:18px; font-weight:700; color:inherit; flex-shrink:0; width:20px; text-align:center; line-height:1; }

/* VC speaker icon — CSS only */
.ch-vc-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0;
  position:relative;
}
.ch-vc-icon::before {
  content:'';
  display:block;
  width:8px; height:10px;
  background:currentColor;
  border-radius:1px 1px 0 0;
  clip-path: polygon(20% 0%, 80% 0%, 100% 15%, 100% 85%, 80% 100%, 20% 100%, 0% 85%, 0% 15%);
}
.ch-vc-icon::after {
  content:'';
  position:absolute;
  right:-2px; top:50%; transform:translateY(-50%);
  width:5px; height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:0 4px 4px 0;
}

/* User panel */
#user-panel { height:52px; background:#232428; display:flex; align-items:center; padding:0 8px; gap:8px; flex-shrink:0; }
.my-avatar { width:32px; height:32px; border-radius:50%; background:#5865f2; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; position:relative; }
.my-avatar .sdot { position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; border-radius:50%; background:#23a559; border:2px solid #232428; }
.my-info { flex:1; min-width:0; }
.my-name { font-size:13px; font-weight:600; color:#f2f3f5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.my-tag  { font-size:11px; color:#949ba4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn { width:32px; height:32px; border-radius:4px; background:none; border:none; color:#b5bac1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .08s, color .08s; padding:0; }
.icon-btn:hover { background:#35373c; color:#dbdee1; }

/* ── Main area ── */
#main { flex:1; display:flex; flex-direction:column; background:#313338; min-width:0; height:100%; }
#main-header { height:48px; border-bottom:1px solid #1e1f22; display:flex; align-items:center; padding:0 16px; gap:10px; flex-shrink:0; }
.main-ch-icon { font-size:20px; color:#80848e; display:flex; align-items:center; }
.main-ch-name { font-weight:600; font-size:15px; color:#f2f3f5; }
.main-sep { width:1px; height:20px; background:#3f4147; margin:0 4px; }
.main-ch-desc { font-size:13px; color:#80848e; }

/* Header channel type icons */
.hdr-hash { font-size:22px; font-weight:700; color:#80848e; }
.hdr-vc {
  width:22px; height:22px; position:relative; display:inline-flex; align-items:center; justify-content:center; color:#80848e;
}

/* ── Text channel ── */
#text-view { flex:1; display:flex; flex-direction:column; min-height:0; }
#messages { flex:1; overflow-y:auto; padding:16px 0 8px; min-height:0; }
#messages::-webkit-scrollbar { width:6px; }
#messages::-webkit-scrollbar-thumb { background:#1e1f22; border-radius:3px; }
.empty-ch { text-align:center; color:#80848e; padding:40px 20px; font-size:14px; }
.msg { display:flex; gap:16px; padding:2px 16px; transition:background .06s; }
.msg:hover { background:#2e3035; }
.msg:not(.compact) { margin-top:16px; }
.msg.compact { padding:1px 16px; }
.msg-av { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; margin-top:2px; cursor:pointer; transition:opacity .1s; }
.msg-av:hover { opacity:.8; }
.compact-spacer { width:40px; flex-shrink:0; }
.msg-body { flex:1; min-width:0; }
.msg-header { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.msg-name { font-weight:600; font-size:15px; color:#f2f3f5; cursor:pointer; transition:color .1s; }
.msg-name:hover { color:#5865f2 !important; text-decoration:underline; }
.msg-name-me { color:#5865f2; }
.msg-rarity { font-size:10px; font-weight:700; padding:1px 7px; border-radius:3px; border:1px solid; }
.msg-time { font-size:11px; color:#4e5058; }
.msg-text { font-size:15px; color:#dbdee1; line-height:1.4; word-break:break-word; }

#chat-bar { padding:12px 16px; border-top:1px solid #1e1f22; display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
#chat-input-row { display:flex; gap:8px; }
.chat-input { flex:1; background:#383a40; border:1px solid transparent; border-radius:8px; padding:10px 14px; color:#dbdee1; font-family:inherit; font-size:15px; outline:none; transition:border-color .15s; }
.chat-input:focus { border-color:#5865f2; }
.chat-input::placeholder { color:#4e5058; }
.send-btn { width:40px; padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── Voice channel ── */
#vc-view { flex:1; display:flex; flex-direction:column; }
#vc-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.vc-title { font-size:12px; color:#80848e; text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:20px; }
#vc-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:700px; margin-bottom:24px; }
.vc-tile { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; padding:14px 16px; border-radius:8px; background:#2b2d31; border:1px solid #1e1f22; transition:background .1s, border-color .1s; min-width:92px; position:relative; }
.vc-tile:hover { background:#35373c; }
.vc-tile.speaking { border-color:#23a559 !important; }
.vc-tile.owned-by-me { border-color:#5865f2 !important; }
.vc-avatar-lg { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; position:relative; flex-shrink:0; }
.speaking-ring { position:absolute; inset:-3px; border-radius:50%; border:2.5px solid #23a559; display:none; }
.vc-tile.speaking .speaking-ring { display:block; }
.vc-username { font-size:12px; font-weight:600; max-width:90px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rarity-badge { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px; letter-spacing:.04em; white-space:nowrap; }
.owned-star { position:absolute; top:5px; right:5px; font-size:12px; }
.mic-mute { position:absolute; bottom:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#ed4245; display:flex; align-items:center; justify-content:center; }
.mic-mute::after { content:''; width:2px; height:8px; background:#fff; transform:rotate(45deg); display:block; }
#vc-controls { padding:16px 24px; border-top:1px solid #1e1f22; display:flex; justify-content:center; flex-shrink:0; }

/* ── Right Member List ── */
#member-list {
  width:240px;
  background:#2b2d31;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  height:100%;
  border-left:1px solid #1e1f22;
  overflow-y:auto;
  transition:width .2s;
}
#member-list.collapsed { width:0; overflow:hidden; }
#member-list::-webkit-scrollbar { width:3px; }
#member-list::-webkit-scrollbar-thumb { background:#1e1f22; border-radius:2px; }
.member-list-header { padding:16px 16px 6px; font-size:11px; font-weight:700; color:#949ba4; letter-spacing:.06em; text-transform:uppercase; flex-shrink:0; }

.member-group-label { padding:8px 16px 4px; font-size:11px; font-weight:700; color:#949ba4; letter-spacing:.04em; text-transform:uppercase; }

.member-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 12px;
  border-radius:4px;
  margin:0 8px 2px;
  cursor:pointer;
  transition:background .08s;
  min-height:40px;
}
.member-row:hover { background:#35373c; }

.member-av {
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff;
  flex-shrink:0; position:relative;
}
.member-av .sdot {
  position:absolute; bottom:-1px; right:-1px;
  width:10px; height:10px; border-radius:50%;
  background:#23a559; border:2px solid #2b2d31;
}
.member-info { flex:1; min-width:0; }
.member-name { font-size:14px; font-weight:500; color:#dbdee1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-name:hover { color:#fff; }

/* Rarity tag next to name */
.member-tag {
  font-size:9px; font-weight:800;
  padding:1px 5px; border-radius:3px;
  border:1px solid;
  letter-spacing:.04em;
  white-space:nowrap;
  flex-shrink:0;
}

/* Custom symbols for member status indicators */
.sym-online  { width:8px; height:8px; border-radius:50%; background:#23a559; flex-shrink:0; }
.sym-muted   { width:8px; height:8px; border-radius:50%; background:#ed4245; flex-shrink:0; }
.sym-idle    { width:8px; height:8px; border-radius:50%; background:#faa61a; flex-shrink:0; }

/* ── Shared ── */
.coin-pill { display:inline-flex; align-items:center; gap:6px; background:#2b2d31; border-radius:20px; padding:6px 16px; font-size:13px; font-weight:600; color:#f2f3f5; }
.coin-sym { width:18px; height:18px; border-radius:50%; background:#faa61a; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:#111; flex-shrink:0; }
#coin-disp, #coin-disp-vc { color:#faa61a; font-weight:700; }
.action-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Buttons */
.disc-btn { border:none; border-radius:4px; font-family:inherit; font-size:13px; font-weight:600; padding:8px 14px; cursor:pointer; transition:filter .1s, transform .08s; display:flex; align-items:center; gap:5px; }
.disc-btn:active { transform:scale(.97); }
.disc-btn.primary   { background:#5865f2; color:#fff; }
.disc-btn.primary:hover { filter:brightness(1.12); }
.disc-btn.secondary { background:#4e5058; color:#dbdee1; }
.disc-btn.secondary:hover { background:#6d6f78; }
.disc-btn.danger    { background:#ed4245; color:#fff; }
.disc-btn.danger:hover { filter:brightness(1.1); }
.sm-btn { border:none; border-radius:3px; font-family:inherit; font-size:11px; font-weight:700; padding:4px 10px; cursor:pointer; }
.sm-btn.eq  { background:#5865f2; color:#fff; }
.sm-btn.eq.on { background:#23a559; }
.sm-btn.dl  { background:#ed4245; color:#fff; }

/* Button symbols */
.btn-sym { width:16px; height:16px; border-radius:3px; background:rgba(255,255,255,.15); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; flex-shrink:0; }

/* Modal */
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:200; }
.modal { background:#313338; border-radius:8px; width:460px; max-width:94vw; border:1px solid #1e1f22; overflow:hidden; }
.modal-header { padding:20px 20px 0; }
.modal-title  { font-size:20px; font-weight:700; color:#f2f3f5; margin-bottom:6px; }
.modal-sub    { font-size:13px; color:#b5bac1; line-height:1.5; }
.modal-body   { padding:16px 20px; }
.modal-footer { padding:14px 20px; background:#2b2d31; display:flex; justify-content:flex-end; gap:8px; }
.err-txt { font-size:13px; color:#ed4245; margin-top:8px; min-height:18px; }
.ok-txt  { font-size:13px; color:#23a559;  margin-top:8px; min-height:18px; }
.inv-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; background:#2b2d31; margin-bottom:6px; }

/* Profile modal */
.modal-profile { max-height:90vh; overflow-y:auto; position:relative; }
.modal-profile::-webkit-scrollbar { width:4px; }
.modal-profile::-webkit-scrollbar-thumb { background:#1e1f22; border-radius:2px; }
.modal-x-btn { position:absolute; top:10px; right:10px; z-index:10; background:rgba(0,0,0,.45); border:none; border-radius:50%; width:28px; height:28px; color:#dbdee1; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .1s; }
.modal-x-btn:hover { background:rgba(0,0,0,.7); }
.profile-banner { width:100%; height:80px; flex-shrink:0; }
.profile-av-wrap { padding:0 20px; margin-top:-28px; display:flex; align-items:flex-end; gap:12px; margin-bottom:4px; }
.profile-av { width:72px; height:72px; border-radius:50%; border:5px solid; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:#fff; flex-shrink:0; }
.profile-av-badge { font-size:10px; font-weight:800; padding:3px 8px; border-radius:4px; border:1px solid; letter-spacing:.05em; margin-bottom:8px; }
.profile-body { padding:4px 20px 20px; }
.profile-name { font-size:22px; font-weight:800; line-height:1.2; margin-bottom:4px; }
.profile-joined { font-size:13px; color:#80848e; display:flex; align-items:center; gap:5px; }
.profile-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#80848e; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.profile-badges { display:flex; flex-wrap:wrap; gap:7px; }
.profile-badge { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:6px; border:1px solid; cursor:default; transition:opacity .1s; }
.profile-badge:hover { opacity:.85; }
.badge-icon { font-size:10px; font-weight:900; line-height:1; font-style:normal; font-family:monospace; }
.badge-label { font-size:11px; font-weight:700; white-space:nowrap; }
.profile-stats { display:flex; gap:8px; flex-wrap:wrap; }
.stat-pill { background:#2b2d31; border-radius:6px; padding:8px 12px; text-align:center; min-width:60px; }
.stat-val { font-size:20px; font-weight:800; color:#f2f3f5; line-height:1; }
.stat-lbl { font-size:10px; color:#80848e; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }
.profile-inv { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; padding-right:4px; }
.profile-inv::-webkit-scrollbar { width:3px; }
.profile-inv::-webkit-scrollbar-thumb { background:#1e1f22; border-radius:2px; }
.profile-inv-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; background:#2b2d31; }

/* Toast */
#toast-container { position:absolute; bottom:72px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; z-index:500; pointer-events:none; align-items:center; }
.toast { background:#23a559; color:#fff; font-size:13px; font-weight:600; padding:8px 20px; border-radius:4px; white-space:nowrap; animation:tIn .2s ease, tOut .3s ease 2s forwards; }
.toast.err  { background:#ed4245; }
.toast.warn { background:#faa61a; color:#111; }
@keyframes tIn  { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
@keyframes tOut { from{opacity:1}to{opacity:0} }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#1e1f22; border-radius:3px; }