.wmap-acc-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}







#wmap-auth-overlay.open, #wmap-edit-profile-modal.open { display: flex; }


/* XP modal overlay (centered like login) */
#wmap-xp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.72);
  z-index: 1000002; /* above auth overlay */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#wmap-xp-overlay.open { display: flex; }

.wmap-xp-modal {
  width: min(92vw, 520px);
  max-height: 86vh;
  background: #0f172ae6;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: #e5e7eb;
  box-shadow: 0 14px 48px rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wmap-xp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #263042;
}
.wmap-xp-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.wmap-xp-close {
  background: transparent; border: 0; color: #cbd5e1;
  padding: 6px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1;
}
.wmap-xp-close:hover { background: #263042; color: #fff; }

.wmap-xp-body {
  padding: 16px;
  overflow: auto;
  max-height: calc(86vh - 56px);
}

/* Keep the small anchored style as fallback, but it stays hidden in this flow */
.wmap-xp-popover { display: none !important; }

/* Avatar Cropper overlay */
#wmap-cropper-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.72);
  z-index: 1000000;
  display: none; /* Initially hidden */
  place-items: center;
}
#wmap-cropper-overlay.open {
  display: grid;
}
.wmap-cropper-modal {
  background: #20232b;
  border-radius: 12px;
  padding: 1.25rem;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border: 1px solid #333842;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.wmap-cropper-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.wmap-cropper-head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #f0f2f5;
}
.wmap-cropper-img-container {
  width: 100%;
  height: 250px;
  background: #111318;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.wmap-cropper-img-container img {
  position: absolute;
  cursor: move;
  will-change: transform;
}
.wmap-cropper-controls {
  margin-top: 1rem;
}
.wmap-cropper-controls label {
  font-size: 0.8rem;
  color: #9ea4b0;
  margin-bottom: 0.5rem;
  display: block;
}
.wmap-cropper-controls input[type="range"] {
  width: 100%;
}
.wmap-cropper-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.wmap-edit-divider { font-size: 14px; font-weight: 700; color: #fff; margin: 12px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* Register: centered avatar picker with circular placeholder */
.wmap-register-avatar-wrap {
  display: grid;
  justify-items: center;
  margin: 8px 0 16px;
}
.wmap-avatar-picker {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px dashed #4a505c;
  display: grid;
  place-items: center;
  cursor: pointer;
  background-color: #2c303a;
  transition: all .2s ease;
  overflow: hidden; /* For the preview */
}
.wmap-avatar-picker:hover, .wmap-avatar-picker:focus {
  border-color: #6c7585;
  background-color: #353a46;
}
.wmap-avatar-picker:focus-visible {
    outline: 2px solid #5897fb;
    outline-offset: 2px;
}
.wmap-avatar-placeholder {
  color: #858c99;
  text-align: center;
  font-size: 0.75rem;
}
.wmap-avatar-placeholder svg {
  margin-bottom: 4px;
}
.wmap-avatar-picker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* Initially hidden */
}
.wmap-avatar-picker.has-image .wmap-avatar-placeholder {
  display: none;
}
.wmap-avatar-picker.has-image img {
  display: block;
}

.wmap-cropper-canvas-wrap {
  position: relative;
  width: 100%;
  background: #0b1323;
  border: 1px solid #263042;
  border-radius: 12px;
  overflow: hidden;
  display: grid; /* Makes child take up full area */
  line-height: 0;
}
/* Mobile crop canvas improvements */
#wmap-cropper-canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}


/* ========================================================================= */
/* wmap-modal.css & frontend.css (core styles)                             */
/* ========================================================================= */

body.wmap-modal-open { overflow: hidden; }
body.wmap-modal-open .wmap-pane[data-wmap-inline="1"] { display: none !important; }

#wmap-auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.72);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: wmapFadeInBackground .25s ease forwards;
}
/* Edit Profile overlay, centered like the auth overlay */
#wmap-edit-profile-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.72);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#wmap-auth-overlay.open, #wmap-edit-profile-modal.open { display: flex; }

@keyframes wmapFadeInBackground {
  from { opacity: 0; } to { opacity: 1; }
}

.wmap-auth-modal {
  width: 100%;
  max-width: 420px;
  background: #0f172ae6;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  color: #e5e7eb;
  box-shadow: 0 14px 48px rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  transform: translateY(8px);
  animation: wmapAuthIn .18s ease-out forwards;
  display: flex;
  flex-direction: column;
}
@keyframes wmapAuthIn { to { transform: translateY(0); opacity: 1; } from { opacity: 0; } }

#wmap-edit-profile-modal .wmap-auth-modal {
    margin: auto;
    max-width: 520px;
}

.wmap-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #263042;
  flex-shrink: 0;
}
.wmap-auth-tabs {
  display: inline-flex;
  gap: 6px;
  background: #1f2a3a;
  padding: 3px;
  border-radius: 10px;
}
.wmap-auth-tab {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
}
.wmap-auth-tab.active { background: #334155; color: #fff; }
.wmap-auth-close, #wmap-edit-profile-modal .wmap-edit-close {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  padding: 6px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.wmap-auth-close:hover, #wmap-edit-profile-modal .wmap-edit-close:hover { background: #263042; color: #fff; }

.wmap-auth-body {
  padding: 22px;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
}
.wmap-title, .wmap-logo, .wmap-foot, .wmap-auth-loading { text-align: center; }

.wmap-pane {
  width: 100%;
  max-width: 520px;
  background: transparent;
  margin: 0 auto;
}
.wmap-topspace { height: 8px; }
.wmap-title {
  text-align: center;
  margin: 8px 0 18px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.wmap-logo {
  display: block;
  width: 210px;
  max-width: 70%;
  margin: 0 auto 14px;
}

.wmap-alert {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 12px;
  font-size: 14px;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(148,163,184,.08);
  color: #e5e7eb;
  animation: wmapPop .18s ease-out;
  text-align: left;
}
.wmap-alert::before {
  content: "ℹ";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #334155;
  color: #cbd5e1;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.wmap-alert.ok {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: #bbf7d0;
}
.wmap-alert.ok::before {
  content: "✓";
  background: rgba(34,197,94,.25);
  color: #22c55e;
}
.wmap-alert.error {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.28);
  color: #fecaca;
}
.wmap-alert.error::before {
  content: "!";
  background: rgba(239,68,68,.25);
  color: #ef4444;
}
.wmap-alert.warn {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: #fde68a;
}
.wmap-alert.warn::before {
  content: "!";
  background: rgba(245,158,11,.25);
  color: #f59e0b;
}
.wmap-alert.info {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.28);
  color: #bfdbfe;
}
.wmap-alert.info::before {
  content: "i";
  background: rgba(59,130,246,.25);
  color: #60a5fa;
}

.wmap-label { font-size: 13px; color: #cbd5e1; margin: 6px 2px 6px; text-align: left; display: block; }

.wmap-form { display: flex; flex-direction: column; gap: 10px; }
.wmap-field { position: relative; }

/* -- START FINAL ICON FIX -- */
.wmap-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wmap-input-wrap .wmap-icon {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  pointer-events: none;
  height: 18px; /* Explicit height */
  width: 18px;  /* Explicit width */
}
.wmap-input-wrap input {
  padding-left: 36px;
  flex: 1; /* Make input fill the rest of the space */
}
/* -- END FINAL ICON FIX -- */


.wmap-field input[type="text"],
.wmap-field input[type="email"],
.wmap-field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  background: #0b1323;
  border: 1px solid #263042;
  border-radius: 10px;
  color: #e5e7eb;
  padding: 0 12px;
  outline: none;
  transition: border-color .15s ease;
}
.wmap-field input::placeholder { color: #94a3b8; }
.wmap-field input:focus { border-color: #4f46e5; }
.wmap-field.with-icon .wmap-input-wrap input { padding-left: 36px; }

/* Field validation + error feedback */
.wmap-field.has-error input {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.15);
}
.wmap-field.has-error .wmap-icon { color: #fca5a5; }
.wmap-field-hint {
  display: block;
  margin: 4px 2px 0;
  font-size: 12px;
  color: #94a3b8;
  text-align: left;
}
.wmap-field-hint.error { color: #fecaca; }
.wmap-form.form-error { animation: wmapShake .28s ease-out; }

.wmap-subtle { font-size: 12px; margin: -4px 2px 6px; display: inline-block; }

.wmap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: all .15s ease;
}
.wmap-btn:hover { background: #1f2937; }
.wmap-btn[disabled],
.wmap-btn.disabled {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(.15);
}
.wmap-btn.primary { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.wmap-btn.primary:hover { background: #6d28d9; border-color: #6d28d9; }
.wmap-btn.small { height: 34px; padding: 0 12px; font-size: 14px; }
.wmap-btn.muted { opacity: .85; }
.wmap-btn.danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.wmap-btn.danger:hover { background: #dc2626; border-color: #dc2626; }
.wmap-block { width: 100%; }
.wmap-mt { margin-top: 6px; }
.wmap-actions-row { display: flex; gap: 10px; margin-top: 6px; }
.wmap-flex1 { flex: 1 1 0; }
.wmap-btn.social .wmap-ico { display: inline-flex; fill: currentColor; }
.wmap-btn.social .txt { font-weight: 600; }
.wmap-btn.social.discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.wmap-btn.social.discord:hover { background: #4752c4; border-color: #4752c4; }
.wmap-btn.icon-only { width: 42px; height: 42px; padding: 0; }
.wmap-btn.icon-only svg { width: 18px; height: 18px; }

.wmap-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: #9ca3af;
  font-size: 13px;
  margin: 8px 0 6px;
}
.wmap-divider::before, .wmap-divider::after {
  content: "";
  height: 1px;
  background: #334155;
}
.wmap-link { color: #93c5fd; text-decoration: none; }
.wmap-link:hover { text-decoration: underline; }
.text-center { text-align: center; }
.wmap-foot { margin-top: 8px; font-size: 14px; }

.wmap-auth-loading {
    display: grid;
    place-items: center;
    color: #cbd5e1;
    padding: 30px 10px;
    min-height: 150px;
    justify-items: stretch;
}

.wmap-auth-spinner {
  width: 36px; 
  height: 36px; 
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: #8b5cf6;
  animation: wmapSpin .8s linear infinite;
  margin: 0 auto 10px; /* Center horizontally and keep bottom margin */
}

@keyframes wmapSpin { to { transform: rotate(360deg); } }

@keyframes wmapPop {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes wmapShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ========================================================================= */
/* account.css (profile page styles)                                       */
/* ========================================================================= */
.wmap-acc {
  --bg: #0b1323;
  --panel: #111827;
  --muted: #9aa3b2;
  --text: #e5e7eb;
  --border: #263042;
  --accent: #14b8a6;   /* teal */
  --accent2: #3b82f6;  /* blue */
  --gold: #f59e0b;
  --violet: #8b5cf6;
  --danger: #ef4444;
  --ring: #334155;
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  color: var(--text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px;
}

.wmap-acc-hero {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0f1324;
}

.wmap-acc-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 380px at 0% -20%, rgba(59,130,246,.14), rgba(20,184,166,.08) 45%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg, #0f1324 0%, #0f1324 100%);
}
.wmap-acc-cover .wmap-acc-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.wmap-acc-cover .wmap-acc-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,20,0) 0%, rgba(10,12,20,.55) 65%, rgba(10,12,20,.85) 100%);
  pointer-events: none;
}

.wmap-acc-hero_body {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px;
  z-index: 1;
}

.wmap-acc-hero_left { display: flex; align-items: flex-end; justify-content: center; }

/* Hero avatar: independent frame sizing */
.wmap-acc-avatar {
  --hero-pfp-scale: 0.9;      /* PFP is 90% of the container size */
  --hero-frame-scale: 1.05;   /* Frame is 105% of the container size */
  position: relative;
  width: 120px; height: 120px;
  background: #0b1323;
  box-shadow: 0 10px 32px rgba(0,0,0,.45), 0 0 0 4px rgba(17,24,39,.6);
  overflow: visible; /* allow frame to extend out */
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.wmap-acc-avatar img.pfp {
  width: calc(92% * var(--hero-pfp-scale));
  height: calc(92% * var(--hero-pfp-scale));
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.wmap-acc-avatar img.frame {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(100% * var(--hero-frame-scale));
  height: calc(100% * var(--hero-frame-scale));
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  border-radius: 0; /* Let the frame have its own shape */
}

/* Optional glow enhancement for hero frame */
.wmap-acc-avatar img.frame.glow-ring {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 0 12px rgba(20,184,166,.45));
}

.wmap-acc-hero_right { display: grid; gap: 10px; align-content: flex-end; }
.wmap-acc-username { margin: 0; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: .2px; }
.wmap-acc-email { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.wmap-acc-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.wmap-acc-meta-chip {
  font-size: 12px; color: #b4c5ff; background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.28);
  padding: 4px 8px; border-radius: 10px;
}
.wmap-level-display {
    position: relative;
    background: #101723b5;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* XP trigger inside level chip */
.wmap-xp-info-trigger {
  position: relative;
  top: -2px;
  right: -4px;
  background: #1e293b;
  border: 1px solid #334155;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, transform .15s;
}
.wmap-xp-info-trigger:hover {
  background: #334155;
  transform: translateY(-2px);
}
.wmap-xp-info-trigger:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Popover anchored to chip */
#wmap-level-chip .wmap-xp-popover {
  top: calc(100% + 8px);
  right: 0;
  position: absolute;
  width: min(280px, 80vw);
  background: #0f172ae6;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  z-index: 50;
  animation: wmap-fade-in .25s ease;
}
#wmap-level-chip .wmap-xp-popover-inner h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
#wmap-level-chip .wmap-xp-content {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #cbd5e1;
}

.wmap-level-header { display: flex; justify-content: space-between; align-items: center; }
.wmap-level-text { font-size: 13px; font-weight: 700; color: #fde047; text-shadow: 0 0 4px rgba(253, 224, 71, 0.5); }
.wmap-level-xp-text { font-size: 11px; color: var(--muted); }
.wmap-level-bar-bg { width: 100%; height: 6px; background: #111827; border-radius: 6px; overflow: hidden; }
.wmap-level-bar-fg {
    height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    transition: width .5s cubic-bezier(0.25, 1, 0.5, 1);
    width: 0%;
}

.wmap-wallet-card {
    display: inline-flex; align-items: center; gap: 8px;
	background: linear-gradient(135deg, #33415547, #31491e);    border: 1px solid #475569;
    border-radius: 10px; padding: 6px 12px;
}
.wmap-wallet-icon { color: #f59e0b; font-size: 18px; line-height: 1; }
.wmap-wallet-bal { font-size: 16px; font-weight: 700; color: #fff; }
.wmap-wallet-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.wmap-wallet-add {
  display: inline-flex;
  margin-left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  align-items: center;
  justify-content: center;
  color: #31ff00;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  transition: background .2s, transform .15s;
}
.wmap-wallet-add:hover {
  background: #334155;
  transform: translateY(-2px);
  color: #fff;
}
.wmap-wallet-add:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}


.wmap-acc-bio { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

.wmap-acc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.wmap-acc-btn { padding: 10px 14px; border-radius: 12px; }
.wmap-acc .wmap-btn { transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.wmap-acc .wmap-btn:hover { transform: translateY(-1px); }
.wmap-acc .wmap-btn.accent { background: var(--accent); border-color: var(--accent); color: #052e2b; font-weight: 700; }
.wmap-acc .wmap-btn.danger { background: var(--danger); border-color: var(--danger); }

/* Main Profile Layout Grid - FIXED */
.wmap-acc-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr; /* Default to 1 column for mobile */
  margin-top: 16px;
}

.wmap-acc-col-left, .wmap-acc-col-right { display: grid; gap: 16px; align-content: start; }

.wmap-card {
  background: rgba(17,24,39,.86);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.wmap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wmap-card-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.wmap-muted { color: var(--muted); font-size: 13px; }

.wmap-acc-data-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: space-evenly;
}

.wmap-account-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 10px;
}
.wmap-account-actions-bar .wmap-btn {
  flex: 1 1 160px;
  min-width: 140px;
}
@media (max-width: 620px) {
  .wmap-account-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .wmap-account-actions-bar .wmap-btn {
    flex: 1 1 auto;
  }
}
.wmap-chip {
    font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
    transition: all .2s ease;
}
.wmap-chip.violet { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); color: #c4b5fd; }
.wmap-chip.violet:hover { background: rgba(139, 92, 246, 0.25); }
.wmap-chip.danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
.wmap-chip.danger:hover { background: rgba(239, 68, 68, 0.25); }


.wmap-acc-tabs-bar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); padding: 6px; border-radius: 14px; margin-bottom: 10px;
}
.wmap-tab-btn {
  background: transparent; border: 0; color: #b8c3d6; font-weight: 600; padding: 10px 8px; border-radius: 10px; cursor: pointer;
  transition: background .2s, color .2s;
}
.wmap-tab-btn.active { background: #1a2234; color: #fff; }
.wmap-tab-panel { animation: wmap-fade-in .3s ease; }
.wmap-tab-panel.hidden { display: none; }
@keyframes wmap-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Cosmetics Sub-Tabs */
.wmap-cosmetics-sub-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    justify-content: center;
}
.wmap-cosmetics-sub-tab-btn {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.wmap-cosmetics-sub-tab-btn:hover {
  color: var(--text);
}
.wmap-cosmetics-sub-tab-btn.active {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}
.wmap-cosmetics-sub-panel.hidden {
  display: none;
}


.wmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}
.wmap-grid-item-ct { position: relative; }
.wmap-grid-item {
  display: block;
  text-decoration: none;
  color: var(--text);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .2s ease;
}
.wmap-grid-item:hover { transform: translateY(-3px); }
.wmap-grid-item img { width: 100%; height: auto; aspect-ratio: 11 / 16; object-fit: cover; background: var(--bg); border-radius: 6px; }
.wmap-grid-item-title { font-size: .85rem; padding: .5rem .2rem; text-align: center; }
#wmap-bookmarks-list .wmap-btn.small { height: 28px; padding: 0 10px; font-size: 12px; }


.wmap-cosmetics-grid { display: flex; flex-direction: column; gap: 1rem; }
.wmap-cosmetics-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 1rem; }
.wmap-cosmetic-item {
  position: relative;
  cursor: pointer;
  text-align: center;
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 4px;
  transition: border-color .2s, background-color .2s, opacity .2s;
}
.wmap-cosmetic-item:hover, .wmap-cosmetic-item:focus { border-color: var(--accent2); outline: none; }
.wmap-cosmetic-item.selected { border-color: var(--accent); background-color: rgba(20, 184, 166, .1); }
.wmap-cosmetic-item.locked { cursor: not-allowed; opacity: 0.5; }
.wmap-cosmetic-item.locked:hover, .wmap-cosmetic-item.locked:focus { border-color: transparent; }
.wmap-cosmetic-item.is-loading { opacity: 0.4; pointer-events: none; }


.wmap-cosmetic-preview {
  aspect-ratio: 1 / 1; /* Makes the box responsive and square */
  background: var(--bg);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 0.5rem;
  /* Adjust these for global defaults */
  --cos-pfp-scale: 0.70;     /* How big the avatar image is relative to the box */
  --cos-frame-scale: 0.82;   /* How big the frame overlay is */
  --cos-frame-rotate: 0deg;  /* If you ever want to rotate frames */
  --cos-frame-offset-x: 0px; /* Fine positional tweaks */
  --cos-frame-offset-y: 0px;
  position: relative;
}
.wmap-cosmetic-preview .wmap-cosmetic-none-icon { font-size: 2rem; color: var(--muted); }

/* Base positioning for preview elements */
.wmap-cosmetic-pfp-preview,
.wmap-cosmetic-frame-preview {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* PFP is scaled and masked into a circle */
.wmap-cosmetic-pfp-preview {
  width: calc(98% * var(--cos-pfp-scale));
  height: calc(98% * var(--cos-pfp-scale));
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  z-index: 1; /* PFP is behind */
}

/* Frame is scaled, positioned, and placed ON TOP */
.wmap-cosmetic-frame-preview {
  width: calc(100% * var(--cos-frame-scale));
  height: calc(100% * var(--cos-frame-scale));
  transform:
    translate(-50%, -50%)
    translate(var(--cos-frame-offset-x), var(--cos-frame-offset-y))
    rotate(var(--cos-frame-rotate));
  object-fit: contain; /* Use contain to prevent clipping the frame's details */
  z-index: 2; /* Frame is in front */
  border-radius: 0; /* CRITICAL: Do not clip the frame image */
}

/* Optional: subtle frame glow ring using pseudo-element */
.wmap-cosmetic-frame-preview.glow-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  box-shadow: 0 0 10px rgba(255,255,255,.35), 0 0 25px rgba(0,255,255,.25);
  pointer-events: none;
}

/* Lock icon layering safe */
.wmap-cosmetic-lock {
  z-index: 5;
}

.wmap-cosmetic-name { font-size: 0.8rem; font-weight: 500; }
#wmap-bookmarks-list, #wmap-cosmetics-frames, #wmap-cosmetics-banners {
    min-height: 150px;
}
#wmap-bookmarks-list:not(:has(.wmap-grid)), 
#wmap-cosmetics-frames:not(:has(.wmap-cosmetics-items)), 
#wmap-cosmetics-banners:not(:has(.wmap-cosmetics-items)) {
    display: flex; align-items: center; justify-content: center;
}

/* Edit Profile Modal */
#wmap-edit-profile-modal .wmap-auth-head h3 { margin:0; font-weight: 800; font-size: 18px; }
#wmap-edit-profile-form { display: flex; flex-direction: column; gap: 12px; }
.wmap-form-label { font-size: 13px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px;}
.wmap-form-input, #wmap-edit-profile-form textarea {
    width: 100%; box-sizing: border-box; 
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px; color: var(--text); padding: 10px 12px;
}
.wmap-form-input:focus, #wmap-edit-profile-form textarea:focus {
    border-color: #4f46e5;
    outline: none;
}
.wmap-form-note { font-size: 12px; color: var(--muted); margin: -8px 0 4px; }
.wmap-form-actions { margin-top: 12px; text-align: right; }

.wmap-edit-pfp-area { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.wmap-edit-pfp-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bg); }


@media (min-width: 981px) {
  /* On wide screens, use a two-column layout for the hero and the main content */
  .wmap-acc-hero_body {
      grid-template-columns: 150px 1fr;
  }
  .wmap-acc-grid {
      grid-template-columns: minmax(280px, 320px) 1fr;
  }
}

@media (max-width: 980px) {
  /* On tablet-sized screens, stack the hero content and use a single column for main content */
  .wmap-acc-hero_body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-top: 100px;
    margin-top: 0;
  }
  .wmap-acc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* On mobile, further adjust hero content alignment */
  .wmap-acc-hero_body {
    padding-top: 100px; /* Ensure space for hero avatar */
  }
  .wmap-acc-hero_left { justify-content: center; }
  .wmap-acc-actions { justify-content: center; }

  /* Wallet card ABOVE chips, centered */
  .wmap-acc-meta-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }
  .wmap-wallet-card {
    order: 0;
    margin-bottom: 4px;
  }
  .wmap-acc-meta-chip {
    order: 1;
    width: auto;
  }
}

/* Per-item overrides using data-item-id */
.wmap-cosmetic-item[data-item-id="624"] .wmap-cosmetic-preview {
  --cos-pfp-scale: 0.68;
  --cos-frame-scale: 0.90;
  --cos-frame-rotate: 0deg;
}

/* Another example item with a bigger frame glow */
.wmap-cosmetic-item[data-item-id="900"] .wmap-cosmetic-frame-preview {
  --cos-frame-scale: 0.95;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}

/* Utility classes (add to .wmap-cosmetic-item or .wmap-cosmetic-preview) */
.wmap-frame-large .wmap-cosmetic-preview { --cos-frame-scale: 0.95; }
.wmap-frame-small .wmap-cosmetic-preview { --cos-frame-scale: 0.75; }
.wmap-frame-rotate-30 .wmap-cosmetic-preview { --cos-frame-rotate: 30deg; }
.wmap-frame-offset-up .wmap-cosmetic-preview { --cos-frame-offset-y: -4px; }