/* Avatar tròn + menu tài khoản — DÙNG CHUNG cho trang chủ và cho /app/.
   ============================================================================
   Hai trang có hai bảng màu khác nhau và tên biến cũng khác:

       trang công khai   --bg2  --card  --line  --ink   --dim   --gold
       ứng dụng /app/    --panel2 --panel --border --text --muted --gold

   Nên tệp này chỉ dùng bộ tên của trang công khai, còn /app/ khai một khối
   BÍ DANH ngay trên .acct để ánh xạ sang (xem public/app/index.html). Cách đó
   giữ được đúng MỘT tệp CSS cho cả hai nơi — chép làm hai bản thì sớm muộn
   sửa một bên quên bên kia, và không ai phát hiện ra vì cả hai vẫn "chạy". */

.acct{ position:relative; display:flex; align-items:center; }
.avatar{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--gold); color:#1b1a15; font-weight:700; font-size:13px;
  letter-spacing:.5px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; font-family:inherit; overflow:hidden; flex:0 0 auto;
}
.avatar:hover{ filter:brightness(1.08); }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.acct-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:190px; z-index:40;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:6px; box-shadow:0 10px 28px rgba(0,0,0,.45); display:none;
}
.acct-menu.open{ display:block; }
.acct-menu .who{ padding:7px 10px 9px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.acct-menu .who b{ display:block; font-size:13.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-menu .who span{ font-size:11.5px; color:var(--dim); }
.acct-menu a{ display:block; padding:8px 10px; border-radius:7px;
  font-size:13.5px; color:var(--ink); text-decoration:none; }
/* Chỉ áp :hover cho thiết bị có chuột. Trên iPhone, phần tử mang kiểu :hover
   khiến chạm lần đầu chỉ hiện trạng thái rê chuột chứ không kích hoạt —
   người dùng tưởng nút chết. Đây là lỗi thật đã gặp ngày 06/08/2026. */
@media (hover:hover){ .acct-menu a:hover{ background:var(--card); } }
.acct-menu a.out{ color:#e07b7b; }