/* ── USER MENU (header) ── */
.auth-btn, .user-menu { display: none; }
body[data-auth="guest"] .auth-btn  { display: flex; }
body[data-auth="user"]  .user-menu { display: flex; align-items: center; gap: 10px; }

/* Nút Discord login */
.auth-btn {
  margin-left: auto;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--neon-head), .55);
  background: rgb(var(--neon-core));
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 14px rgba(var(--neon-core), .45);
}
.auth-btn:hover {
  background: rgb(var(--neon-head));
  box-shadow: 0 0 22px rgba(var(--neon-head), .65);
}
.auth-btn svg { width: 18px; height: 18px; fill: #fff; stroke: none; flex-shrink: 0; }

/* User chip */
.user-menu { position: relative; margin-left: auto; }
.user-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px 0 5px;
  border-radius: 999px;
  background: rgba(var(--cyan),.06);
  border: 1px solid rgba(var(--cyan),.5);   /* viền xanh luôn hiện */
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.user-menu__chip:hover,
.user-menu__chip:focus-visible {
  border-color: rgba(var(--cyan),.85);
  background: rgba(var(--cyan),.1);
  box-shadow: 0 0 10px rgba(var(--cyan),.25);
}
.user-menu__avatar {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(var(--cyan),.15) center/cover no-repeat;
  border: 1px solid rgba(var(--cyan),.5);
  overflow: hidden;
}
.user-menu__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badge HOST (admin) */
.user-menu__role {
  flex: none;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(244,63,94,.16);
  border: 1px solid rgba(244,63,94,.7);
  color: #ff4d6d;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.4;
  text-shadow: 0 0 6px rgba(244,63,94,.6);
  box-shadow: 0 0 8px rgba(244,63,94,.3);
}
.user-menu__role[hidden] { display: none; }
.user-menu__out {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-muted);
  transition: color .2s ease;
}
.user-menu__chip:hover .user-menu__out,
.user-menu__chip:focus-visible .user-menu__out { color: #f43f5e; }

/* Dropdown panel */
.user-menu__panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(14,17,23,.97);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
  z-index: 50;
}
.user-menu__panel.is-open { display: block; }
.user-menu__info {
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}
.user-menu__info strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}
.user-menu__item svg { flex: none; width: 16px; height: 16px; }
.user-menu__item:hover { background: rgba(255,255,255,.05); }
.user-menu__item:hover svg { color: rgb(var(--cyan)); }
.user-menu__sep { height: 1px; margin: 6px 4px; background: rgba(255,255,255,.08); }
.user-menu__item--danger:hover { background: rgba(var(--neon-core),.12); color: rgb(var(--neon-head)); }
.user-menu__item--danger:hover svg { color: rgb(var(--neon-head)); }

/* Thông báo đăng nhập (auth.js) */
.auth-toast{position:fixed;top:72px;right:18px;z-index:200;max-width:min(420px,calc(100vw - 32px));padding:12px 14px;border-radius:10px;
  background:rgba(20,24,33,.96);border:1px solid rgba(34,211,238,.45);color:#e8eaed;font-size:13px;line-height:1.45;
  box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s}
.auth-toast.is-on{opacity:1;transform:none;pointer-events:auto}
.auth-toast.is-bad{border-color:rgba(244,63,94,.6)}

/* Tên + ID Discord xếp 2 dòng trong chip */
.user-menu__who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.user-menu__id { font-size: 11px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.user-menu__id:empty { display: none; }

/* Nút vai trò cạnh chip: Thành viên (xanh) / Admin (đỏ) */
.user-menu__rank {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(var(--cyan),.5); background: rgba(var(--cyan),.06);
  color: rgb(var(--cyan)); font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
  text-shadow: 0 0 6px rgba(var(--cyan),.4);
}
.user-menu__rank.is-admin {
  border-color: rgba(244,63,94,.7); background: rgba(244,63,94,.12); color: #ff4d6d;
  text-shadow: 0 0 6px rgba(244,63,94,.6); box-shadow: 0 0 10px rgba(244,63,94,.25);
}
@media (max-width: 480px) { .user-menu__rank { height: 36px; padding: 0 10px; font-size: 12px; } }

/* Nút số thành viên đang dùng app */
.user-menu__online { gap: 0; }
.user-menu__online b { font-variant-numeric: tabular-nums; }
/* Icon trong nút: người (online, xanh lá) · búa (Admin, chỉ hiện khi là admin) */
.user-menu__ico {
  width: 16px; height: 16px; margin-right: 7px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.user-menu__online .user-menu__ico { color: #4ade80; filter: drop-shadow(0 0 4px rgba(74,222,128,.7)); }
.user-menu__hammer { display: none; width: 18px; height: 18px; stroke-width: 2.4; }
.user-menu__rank.is-admin .user-menu__hammer { display: block; filter: drop-shadow(0 0 4px rgba(244,63,94,.7)); }
@media (max-width: 640px) { .user-menu__online { display: none; } }
/* Vương miện cho Thành viên (ẩn khi là Admin — Admin dùng cây búa) */
.user-menu__crown { width: 17px; height: 17px; filter: drop-shadow(0 0 4px rgba(var(--cyan),.6)); }
.user-menu__rank.is-admin .user-menu__crown { display: none; }

/* ── Hide Name ── */
.hide-name-btn { cursor: pointer; font-family: inherit; transition: background .2s, box-shadow .2s; }
.hide-name-btn:hover, .hide-name-btn:focus-visible { background: rgba(var(--cyan),.14); box-shadow: 0 0 12px rgba(var(--cyan),.3); outline: none; }
.hide-name-btn.is-on { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.08); color: #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,.4); }