/* =========================================================
   Làng Ẩn Dật - REBUILD V5 PROFILE
   ========================================================= */
.profile-page{padding:18px}
.profile-shell{
  width:min(1400px,100%);
  height:100%;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(16,14,22,.74),rgba(42,24,20,.58));
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
}
.profile-head{margin:0;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.12)}
.profile-head h1{margin:0;color:var(--gold);text-transform:uppercase;font-size:38px;line-height:1}
.profile-head p{margin:6px 0 0;color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.12em}
.profile-grid{
  min-height:0;overflow:auto;padding:16px 18px 18px;
  display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px;align-items:start;
}
.profile-card{
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(135deg,rgba(18,16,24,.74),rgba(28,19,18,.58));
  box-shadow:0 18px 55px rgba(0,0,0,.32);padding:16px;
}
.profile-history-card{grid-column:1/-1}
.profile-avatar-box{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center}
.profile-avatar{width:92px;height:92px;border-radius:24px;object-fit:cover;border:1px solid rgba(245,213,137,.38);background:rgba(0,0,0,.24)}
.profile-avatar-box h2{margin:0;color:var(--gold-2);font-size:22px}
.profile-avatar-box span{color:var(--muted);font-size:12px;font-weight:800}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.profile-stats div{border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(0,0,0,.20);padding:12px;text-align:center}
.profile-stats b{display:block;color:var(--gold-2);font-size:18px}
.profile-stats span{color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:950}
.profile-card-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.profile-card-title h2{margin:0;color:var(--gold);text-transform:uppercase;font-size:20px}
.profile-card-title span{color:var(--muted);font-size:12px;font-weight:800}
.profile-form{display:grid;gap:10px}
.profile-form.two{grid-template-columns:1fr 1fr}
.profile-full{grid-column:1/-1}
.profile-field{display:grid;gap:6px}
.profile-field span{color:var(--muted);text-transform:uppercase;font-size:10px;font-weight:950;letter-spacing:.10em}
.profile-field input,.profile-field select{
  min-height:42px;border-radius:14px;border:1px solid var(--line);
  background:rgba(7,8,12,.64);color:var(--text);padding:0 12px;outline:none;
}
.profile-btn{
  min-height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(93,96,110,.88),rgba(45,47,58,.88));
  color:#fff7df;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.07em;
  padding:0 14px;display:grid;place-items:center;text-align:center;
}
.profile-primary{background:linear-gradient(180deg,#fff0aa,#d4a33c);color:#1c1004;border-color:#ffe69a}
.profile-danger{background:linear-gradient(180deg,#ff5a7d,#b8193a);color:#fff;border-color:#ff9bad}
.profile-avatar-edit{display:grid;gap:12px;border:1px solid rgba(245,213,137,.22);border-radius:16px;background:rgba(0,0,0,.18);padding:12px}
.profile-avatar-preview-wrap{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;align-items:center}
.profile-avatar-small{width:68px;height:68px;border-radius:18px;object-fit:cover;border:1px solid rgba(245,213,137,.38);background:rgba(0,0,0,.28);display:none}
.profile-avatar-preview-wrap b{color:var(--gold-2);text-transform:uppercase;font-size:13px}
.profile-avatar-preview-wrap p{margin:5px 0 0;color:var(--muted);font-size:12px}
.profile-avatar-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-file-btn{cursor:pointer}
.profile-history{display:grid;gap:8px}
.profile-history-row{border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(0,0,0,.18);padding:10px 12px;display:grid;gap:5px}
.profile-history-row b{color:var(--gold-2)}
.profile-history-row span{color:var(--muted);font-size:12px}
.profile-empty{border:1px dashed rgba(245,213,137,.22);border-radius:16px;background:rgba(0,0,0,.16);color:var(--muted);text-align:center;padding:18px;font-weight:800}
@media(max-width:900px){
  .profile-page{padding:9px}.profile-grid{grid-template-columns:1fr;padding:12px}.profile-form.two{grid-template-columns:1fr}
}
@media(max-width:560px){
  .profile-head{display:grid;gap:10px;padding:14px}.profile-head h1{font-size:30px}
  .profile-card{padding:12px;border-radius:16px}.profile-stats{grid-template-columns:1fr}
  .profile-avatar-actions{grid-template-columns:1fr}
}


/* =========================================================
   REBUILD V5.1 - PROFILE AVATAR FIX
   ========================================================= */
.profile-avatar,
.profile-avatar-small{
  background-image:linear-gradient(180deg,rgba(255,231,150,.08),rgba(0,0,0,.18));
}

/* REBUILD V5.2 - PROFILE SAVE FEEDBACK */
.profile-avatar-small,
.profile-avatar{
  image-rendering:auto;
}

/* Avatar crop/drag in Profile */
.profile-avatar-cropper{
  width:min(220px,100%);
  aspect-ratio:1/1;
  border-radius:22px;
  border:1px solid rgba(245,213,137,.38);
  background:rgba(0,0,0,.28);
  overflow:hidden;
  position:relative;
  cursor:grab;
  touch-action:none;
  user-select:none;
  justify-self:start;
}
.profile-avatar-cropper:active{cursor:grabbing}
.profile-avatar-cropper img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:none;
  pointer-events:none;
}
.profile-avatar-cropper span{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff7df;
  font-size:11px;
  font-weight:900;
  text-align:center;
  padding:7px 9px;
  backdrop-filter:blur(6px);
}
.profile-avatar,
.profile-avatar-small,
.home-donate-avatar{
  object-position:var(--avatar-position, 50% 50%);
}
.avatar-dot.account-avatar{
  background-position:var(--avatar-position, center);
}
@media(max-width:560px){
  .profile-avatar-cropper{width:100%;max-width:220px;justify-self:center}
}