/* ============================================================
   PureWare — PROFILE page · full theme template (original CSS)
   ------------------------------------------------------------
   Paste into Settings → Custom CSS and edit any value.
   Rules are auto-scoped to YOUR profile page, EXCEPT body/html
   /:root which intentionally theme the whole-page background.

   Default palette (override anywhere):
     page bg   #0F1115     card      #1B202A
     surface   #161A22     hover     #242B38
     text      #FFFFFF     muted     #9CA3AF
     success   #22C55E     danger    #EF4444
     border    #242B38

   Element hooks on this page:
     body / :root        whole-page background
     .pw-custom          content wrapper (max-width, font, etc.)
     .pw-profile-header   the header card
     .pw-banner           profile banner area
     .pw-avatar           avatar
     .pw-name             display name (h1)
     .pw-level            "Lvl N" badge
     .pw-handle           @username
     .pw-xp               XP block      .pw-xp-track / .pw-xp-fill
     .pw-badge            achievement badges
     .pw-bio              bio paragraph
     .pw-stats            projects/followers/following row
     .pw-projects         projects section (.card = each project)
     .card .btn .btn-primary .btn-secondary a h1 h2 h3 p img
   ============================================================ */

/* ---------- PAGE BACKGROUND (whole page) ---------- */
body {
  background-color: #0f1115;
  /* try an image or gradient: */
  background-image: radial-gradient(1200px 600px at 50% -10%, #241038, #0f1115);
  /* background-image: url("https://your.cdn/bg.jpg");
     background-size: cover; background-attachment: fixed; */
}

/* content wrapper */
.pw-custom {
  /* max-width: 940px; margin: 0 auto; */
  font-family: inherit;
}

/* ---------- TYPOGRAPHY ---------- */
h1, .pw-name { color: #ffffff; font-weight: 600; letter-spacing: -0.01em; }
h2 { color: #ffffff; }
p  { color: #9ca3af; }
a  { color: #ffffff; }
a:hover { text-decoration: underline; }

/* ---------- HEADER CARD ---------- */
.pw-profile-header {
  background-color: #1b202a;
  border: 1px solid #242b38;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* banner */
.pw-banner {
  background-color: #161a22;
  /* height: 12rem; */
}
.pw-banner img { object-fit: cover; }

/* avatar */
.pw-avatar {
  border: 4px solid #1b202a;
  border-radius: 9999px;   /* square logo? use 12px */
  /* box-shadow: 0 0 0 3px #8b5cf6; */
}

/* level pill + handle */
.pw-level { background-color: #161a22; color: #9ca3af; border-radius: 6px; }
.pw-handle { color: #9ca3af; }

/* ---------- XP BAR ---------- */
.pw-xp-track {
  background-color: #161a22;
  border-radius: 9999px;
  height: 0.5rem;
}
.pw-xp-fill {
  background-color: #22c55e;     /* change the XP color */
  /* background-image: linear-gradient(90deg, #8b5cf6, #22c55e); */
}

/* ---------- BADGES ---------- */
.pw-badge {
  background-color: #161a22;
  color: #9ca3af;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
}

/* bio + stats */
.pw-bio  { color: #9ca3af; }
.pw-stats { border-top: 1px solid #242b38; color: #9ca3af; }

/* ---------- PROJECT CARDS ---------- */
.pw-projects .card,
.card {
  background-color: #1b202a;
  border: 1px solid #242b38;
  border-radius: 10px;
}
.pw-projects .card:hover,
.card:hover { border-color: #8b5cf6; }

/* ---------- BUTTONS ---------- */
.btn { border-radius: 10px; transition: all 200ms ease; }
.btn-primary { background-color: #ffffff; color: #0f1115; }
.btn-primary:hover { background-color: #a78bfa; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background-color: #1b202a; color: #ffffff; border: 1px solid #242b38; }
.btn-secondary:hover { background-color: #242b38; }
.btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

/* ---------- ANIMATIONS (keyframes stay global) ---------- */
@keyframes pw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* .pw-avatar { animation: pw-float 4s ease-in-out infinite; } */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  h1, .pw-name { font-size: 1.4rem; }
}