:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f242d;
  --border: #2a2f3a;
  --text: #e6e8ee;
  --muted: #8a93a6;
  --accent: #7c5cff;
  --accent-2: #5e44d6;
  --danger: #e5484d;
  --success: #30a46c;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Latin (English/digits) uses Google Sans; Arabic/Sorani stays on Noto Kufi */
@font-face {
  font-family: 'Latin UI';
  font-weight: 400 700;
  font-style: normal;
  src: local('Google Sans'), local('GoogleSans'), local('Product Sans'), local('Roboto');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F,
                 U+2190-21FF, U+2200-22FF;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Latin UI', "Google Sans", "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
}
body { min-height: 100vh; min-height: 100dvh; }

/* Propagate themed background to <html> so the theme's lit gradient
   always covers the full scroll area — body can end before the viewport
   does on tall pages, leaving a flat-color band under the last card
   otherwise. Painting on html ensures the canvas always matches. */
html:has(body.theme-hellokitty) {
  --bg: #ffeaf3;
  background:
    radial-gradient(circle at 12% 20%, #ffd1e1 0, transparent 40%),
    radial-gradient(circle at 88% 80%, #ffb6cf 0, transparent 45%),
    var(--bg);
}
html:has(body.theme-hearts) {
  --bg: #1a0008;
  background:
    radial-gradient(circle at 20% 10%, rgba(229,0,76,.25) 0, transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(255,45,106,.2) 0, transparent 50%),
    var(--bg);
}
html:has(body.theme-skulls) {
  --bg: #08080a;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,0,0,.18) 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-girlish) {
  --bg: #f8eefc;
  background:
    radial-gradient(circle at 15% 25%, #ead0ff 0, transparent 45%),
    radial-gradient(circle at 85% 75%, #ffd4e8 0, transparent 45%),
    var(--bg);
}
html:has(body.theme-men) {
  --bg: #0a1016;
  background:
    linear-gradient(180deg, #0a1016 0%, #0f1820 100%),
    var(--bg);
}
html:has(body.theme-sport) {
  --bg: #0b1a10;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,210,74,.12) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(15,122,60,.5) 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-galaxy) {
  --bg: #0a0820;
  background:
    radial-gradient(circle at 20% 15%, rgba(110,92,224,.35) 0, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(183,148,244,.22) 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-ocean) {
  --bg: #052838;
  background:
    radial-gradient(circle at 18% 18%, rgba(77,208,225,.20) 0, transparent 50%),
    radial-gradient(circle at 82% 82%, rgba(0,151,167,.35) 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-forest) {
  --bg: #0a1f10;
  background:
    radial-gradient(circle at 15% 20%, rgba(102,187,106,.18) 0, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(46,125,50,.40) 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-gamer) {
  --bg: #08081a;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,255,234,.18) 0, transparent 50%),
    radial-gradient(circle at 80% 75%, rgba(255,0,170,.20) 0, transparent 50%),
    var(--bg);
}
html:has(body.theme-music) {
  --bg: #150522;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,64,129,.22) 0, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(170,0,255,.25) 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-anime) {
  --bg: #fce4f0;
  background:
    radial-gradient(circle at 18% 22%, #ffd0e8 0, transparent 50%),
    radial-gradient(circle at 82% 78%, #cdeff5 0, transparent 55%),
    var(--bg);
}
html:has(body.theme-art) {
  --bg: #fdf6e8;
  background:
    radial-gradient(circle at 20% 20%, #ffe0d0 0, transparent 50%),
    radial-gradient(circle at 80% 80%, #fff3c0 0, transparent 55%),
    var(--bg);
}

/* Scrollbar styled to blend with the page — track matches --bg (which is
   themed per-page via :has above), thumb uses a neutral translucent tone. */
html { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, .35) var(--bg); }
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  {
  background: rgba(128, 128, 128, .35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, .6); background-clip: padding-box; }
html[dir="rtl"] body { text-align: right; }
input, textarea, button { font-family: inherit; }
code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center;
  gap: 10px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}
.topbar .brand { margin-inline-end: auto; }
.topbar nav { display: flex; align-items: center; }

/* Hamburger toggle — hidden on desktop */
.menu-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 10px; cursor: pointer; color: var(--text);
  font-size: 22px;
  transition: background .15s, border-color .15s;
}
.menu-btn:hover { border-color: var(--accent); }
.menu-btn .close { display: none; }
.menu-toggle-input:checked + .menu-btn .open { display: none; }
.menu-toggle-input:checked + .menu-btn .close { display: inline-block; }
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Latin UI', "Google Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  letter-spacing: .2px;
  padding: 2px 0;
  text-decoration: none;
  transition: filter .2s ease;
}
.brand span {
  background: linear-gradient(90deg, var(--accent), #ff7ab6);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand .brand-icon {
  font-size: 24px;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand-icon { transform: rotate(-12deg) scale(1.08); }
.brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #ff7ab6);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
  opacity: .9;
}
.brand:hover { text-decoration: none; filter: drop-shadow(0 0 10px rgba(124,92,255,.45)); }
.brand:hover::after { transform: scaleX(1); }
.topbar nav a { margin-inline-start: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.topbar nav a i { font-size: 18px; line-height: 1; }
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.topbar nav a.btn { background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; }

button, .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
button i, .btn i { font-size: 18px; line-height: 1; }

/* Flip directional icons in RTL so they point the natural way */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); display: inline-block; }

.container { max-width: 760px; margin: 32px auto; padding: 0 20px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}

h1 { margin: 0 0 8px; font-size: 28px; }
h2 { margin: 0 0 10px; font-size: 20px; }
p.muted, .muted { color: var(--muted); }

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
label { font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], textarea {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 110px; }

button, .btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
button:hover, .btn:hover { background: var(--accent-2); text-decoration: none; }
button.secondary { background: var(--surface-2); border: 1px solid var(--border); }
button.danger { background: var(--danger); }

.flash {
  background: rgba(48,163,108,.12);
  border: 1px solid rgba(48,163,108,.4);
  color: #c6f6d5;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
}
.error {
  background: rgba(229,72,77,.12);
  border: 1px solid rgba(229,72,77,.4);
  color: #ffd4d6;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
}

.profile-head {
  text-align: center; padding: 32px 20px;
}
.profile-head h1 { margin-bottom: 2px; }
.avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff7ab6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 12px;
  overflow: hidden;
}
/* Birth-date pill + glowing zodiac chip — both sit just under the bio on
   user profiles when the owner has opted in via settings. The zodiac chip
   pulses with a soft accent glow so it reads as a celebratory accent rather
   than another piece of metadata. */
.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.profile-pill i { font-size: 14px; }
/* Same physical size as .profile-pill — birthday and zodiac live side-by-side
   so they should match. Distinct accent-tinted background to differentiate
   without shouting; no glow, no animation. */
.zodiac-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(123, 94, 255, 0.14);
  border: 1px solid rgba(123, 94, 255, 0.45);
  color: var(--text);
}
.zodiac-chip .zodiac-glyph {
  font-size: 14px;
  line-height: 1;
  color: rgba(123, 94, 255, 1);
}

/* Animated "Level X" plate — rectangular pill that sits between the display
   name and the @handle on profile pages. Shimmering cyan/sapphire gradient,
   subtle hover lift, click opens /levels.php. */
.level-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 2px auto 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #052433;
  text-decoration: none;
  border-radius: 8px;
  background:
    linear-gradient(120deg,
      #b8f1ff 0%,
      #66d9ff 30%,
      #ffffff 50%,
      #66d9ff 70%,
      #1d9bf0 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    0 6px 18px rgba(29, 155, 240, .35),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: levelPlateShimmer 4s linear infinite;
  transition: transform .15s ease, box-shadow .15s ease;
}
.level-plate:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow:
    0 8px 22px rgba(29, 155, 240, .50),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}
.level-plate i {
  font-size: 14px; line-height: 1;
  color: #0a4a66;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8));
  animation: levelPlateSpark 2.4s ease-in-out infinite;
}
.level-plate span { line-height: 1; }

/* Per-tier palettes for the inline plate — match levels-page ladder colors. */
.level-plate.tier-2 {
  color: #053422;
  background: linear-gradient(120deg, #b9f7d4 0%, #6ee7b7 30%, #ffffff 50%, #6ee7b7 70%, #10b981 100%);
  background-size: 220% 100%;
  box-shadow: 0 6px 18px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.level-plate.tier-2 i { color: #064d33; }
.level-plate.tier-3 {
  color: #3a2400;
  background: linear-gradient(120deg, #ffe9a8 0%, #ffd24a 30%, #ffffff 50%, #ffd24a 70%, #ffb547 100%);
  background-size: 220% 100%;
  box-shadow: 0 6px 18px rgba(255, 181, 71, .40), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.level-plate.tier-3 i { color: #5a3a00; }
.level-plate.tier-4 {
  color: #4a0a26;
  background: linear-gradient(120deg, #ffc1d8 0%, #ff9bcb 30%, #ffffff 50%, #ff9bcb 70%, #ff5b9b 100%);
  background-size: 220% 100%;
  box-shadow: 0 6px 18px rgba(255, 91, 155, .40), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.level-plate.tier-4 i { color: #6a0a30; }
.level-plate.tier-5 {
  color: #1f0e2e;
  background: linear-gradient(120deg, #d8cdfd 0%, #c4b5fd 30%, #ffffff 50%, #c4b5fd 70%, #7c5cff 100%);
  background-size: 220% 100%;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.level-plate.tier-5 i { color: #2a0a4a; }

.level-plate.is-max {
  color: #2a0e1f;
  background:
    linear-gradient(120deg,
      #ffe27a 0%,
      #ffb547 25%,
      #ffffff 50%,
      #ff5b9b 75%,
      #7c5cff 100%);
  background-size: 220% 100%;
  box-shadow:
    0 6px 18px rgba(255, 122, 182, .45),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}
.level-plate.is-max i { color: #5a1e0a; }

@keyframes levelPlateShimmer {
  from { background-position:   0% 0%; }
  to   { background-position: 220% 0%; }
}
@keyframes levelPlateSpark {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.18) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .level-plate, .level-plate i { animation: none; }
}
.avatar img, .feed-avatar img, .people-avatar img, .admin-user-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Avatar uploader (settings) */
.avatar-uploader {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--surface-2);
}
.avatar-uploader .avatar-lg {
  width: 72px; height: 72px; margin: 0; flex: 0 0 auto; font-size: 28px;
}
.avatar-controls { flex: 1; min-width: 0; }
.avatar-hint { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.btn-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--accent); color: #fff;
  border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-file:hover { background: var(--accent-2); }
.btn-file input[type="file"] { display: none; }

.handle { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.link-copy {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.link-copy i { font-size: 14px; }
.link-copy:hover { color: var(--accent); border-color: var(--accent); background: rgba(124,92,255,.08); }

.share-bar {
  display: inline-flex; gap: 8px; align-items: center;
  margin-top: 16px;
  flex-wrap: wrap; justify-content: center;
}
.share-bar button, .share-bar .btn { padding: 8px 14px; font-size: 14px; }

.message {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.message .meta { color: var(--muted); font-size: 12px; margin-top: 8px; display: flex; justify-content: space-between; }
.message .reply { margin-top: 12px; padding: 12px 14px; border-inline-start: 3px solid var(--accent); background: var(--surface-2); border-radius: 8px; }
.message form { margin-top: 10px; }

.empty { text-align: center; color: var(--muted); padding: 40px 10px; }

.footer { text-align: center; padding: 30px; color: var(--muted); }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; }

.hero { text-align: center; padding: 40px 10px; }
.hero h1 { font-size: 36px; background: linear-gradient(90deg, var(--accent), #ff7ab6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); font-size: 17px; max-width: 520px; margin: 10px auto 20px; }

/* Level badge — used on the dashboard and the levels page. Matches the
   diamond-themed inline level-mark on profiles. */
.level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800;
  color: #062b3a;
  background: linear-gradient(135deg, #b8f1ff 0%, #66d9ff 50%, #1d9bf0 100%);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow:
    0 4px 12px rgba(29, 155, 240, .35),
    inset 0 1px 0 rgba(255, 255, 255, .60);
  letter-spacing: .2px;
  margin-top: 8px;
}
.level-badge i { font-size: 14px; line-height: 1; color: #0a4a66; }
a.level-badge {
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.level-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(29, 155, 240, .45),
    inset 0 1px 0 rgba(255, 255, 255, .60);
}

/* Per-tier palettes for the badge (dashboard + levels-page status). */
.level-badge.tier-2 {
  color: #053422;
  background: linear-gradient(135deg, #b9f7d4 0%, #6ee7b7 50%, #10b981 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255, 255, 255, .60);
}
.level-badge.tier-2 i { color: #064d33; }
.level-badge.tier-3 {
  color: #3a2400;
  background: linear-gradient(135deg, #ffe9a8 0%, #ffd24a 50%, #ffb547 100%);
  box-shadow: 0 4px 12px rgba(255, 181, 71, .40), inset 0 1px 0 rgba(255, 255, 255, .60);
}
.level-badge.tier-3 i { color: #5a3a00; }
.level-badge.tier-4 {
  color: #4a0a26;
  background: linear-gradient(135deg, #ffc1d8 0%, #ff9bcb 50%, #ff5b9b 100%);
  box-shadow: 0 4px 12px rgba(255, 91, 155, .40), inset 0 1px 0 rgba(255, 255, 255, .60);
}
.level-badge.tier-4 i { color: #6a0a30; }
.level-badge.tier-5 {
  color: #1f0e2e;
  background: linear-gradient(135deg, #d8cdfd 0%, #c4b5fd 50%, #7c5cff 100%);
  box-shadow: 0 4px 12px rgba(124, 92, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .60);
}
.level-badge.tier-5 i { color: #2a0a4a; }

/* ===== Levels page ===== */
.level-page-head h1 { font-size: 22px; }
.level-rules {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}
.level-rules li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.level-rules li i {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
/* Level ladder — 50 ribbons, one per row. Each ribbon's tier (1..5, every 10
   levels) sets its accent color; the current level overlays a purple highlight
   so it reads at a glance. Single-line layout to keep the list compact. */
.level-ladder {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}
.level-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 6px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start-width: 3px;
  transition: border-color .12s ease, background .12s ease;
}

.ribbon-num {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  color: #fff;
  background: var(--ribbon-accent, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  flex: 0 0 auto;
}
.ribbon-num i { font-size: 11px; line-height: 1; opacity: .85; }
.ribbon-num strong { font-size: 13px; line-height: 1; }
.ribbon-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1; min-width: 0;
}
.ribbon-label { font-weight: 600; font-size: 13px; flex: 0 0 auto; }
.ribbon-meta  { font-size: 12px; color: var(--muted); letter-spacing: .2px; margin-inline-start: auto; }

/* Per-tier palettes (10 levels each).
   --ribbon-accent drives the number badge; --ribbon-edge tints the left border. */
.level-ribbon.tier-1 {
  --ribbon-accent: linear-gradient(135deg, #66d9ff, #1d9bf0);
  --ribbon-edge:   #1d9bf0;
  border-inline-start-color: var(--ribbon-edge);
}
.level-ribbon.tier-2 {
  --ribbon-accent: linear-gradient(135deg, #6ee7b7, #10b981);
  --ribbon-edge:   #10b981;
  border-inline-start-color: var(--ribbon-edge);
}
.level-ribbon.tier-3 {
  --ribbon-accent: linear-gradient(135deg, #ffd24a, #ffb547);
  --ribbon-edge:   #ffb547;
  border-inline-start-color: var(--ribbon-edge);
}
.level-ribbon.tier-3 .ribbon-num { color: #3a2a00; }
.level-ribbon.tier-4 {
  --ribbon-accent: linear-gradient(135deg, #ff9bcb, #ff5b9b);
  --ribbon-edge:   #ff5b9b;
  border-inline-start-color: var(--ribbon-edge);
}
.level-ribbon.tier-5 {
  --ribbon-accent: linear-gradient(135deg, #c4b5fd, #7c5cff);
  --ribbon-edge:   #7c5cff;
  border-inline-start-color: var(--ribbon-edge);
}

/* Hover deepens the tier accent through to the row background. */
.level-ribbon:hover {
  border-color: var(--ribbon-edge, var(--border));
}

/* Current level overrides the tier color — it's still the most important visual. */
.level-ribbon.is-current {
  background:
    linear-gradient(90deg, rgba(124, 92, 255, .18), rgba(124, 92, 255, .06)),
    var(--surface-2);
  border-color: var(--accent);
  border-inline-start-color: var(--accent);
  border-inline-start-width: 4px;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .25);
}
.level-ribbon.is-current .ribbon-label { color: var(--accent); }

/* Tier 5 — make level 50 sing a little since it's the cap. */
.level-ribbon.tier-5:last-child .ribbon-num {
  background: linear-gradient(135deg, #ffe27a 0%, #ffb547 30%, #ff5b9b 65%, #7c5cff 100%);
  color: #2a0e1f;
}

/* MAX-level badge gets a richer look so it reads as an achievement. */
.level-badge.is-max {
  background: linear-gradient(135deg, #ffe27a 0%, #ffb547 35%, #ff5b9b 70%, #7c5cff 100%);
  box-shadow:
    0 6px 20px rgba(255, 91, 155, .35),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: levelMaxShimmer 3s ease-in-out infinite;
}
@keyframes levelMaxShimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .level-badge.is-max { animation: none; }
}

/* Dashboard level card — bigger badge + progress. */
.level-card { padding: 16px 20px; }
.level-card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.level-card .level-badge {
  margin-top: 0; font-size: 14px; padding: 6px 14px;
}
.level-card-meta {
  font-size: 13px; color: rgba(255, 255, 255, .85);
  display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: baseline;
}
.level-card-meta .muted { color: var(--muted); }

.level-progress {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  overflow: hidden;
}
.level-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffd24a, #ff7ab6, #7c5cff);
  background-size: 200% 100%;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 122, 182, .35);
  transition: width .4s ease;
  animation: levelShimmer 3s linear infinite;
}
@keyframes levelShimmer {
  from { background-position: 0 0; }
  to   { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .level-progress-bar { animation: none; }
}

/* Verified badge */
.verified-badge {
  color: #1d9bf0;
  font-size: 18px;
  vertical-align: middle;
  margin-inline-start: 3px;
  filter: drop-shadow(0 0 6px rgba(29,155,240,.35));
}
h1 .verified-badge { font-size: 22px; margin-inline-start: 3px; }

/* Glowing name for verified users */
.verified-name {
  background: linear-gradient(90deg, #bce0ff, #ffffff 50%, #bce0ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(29,155,240,.55),
    0 0 22px rgba(29,155,240,.30);
  animation: verified-glow 2.6s ease-in-out infinite alternate;
}
@keyframes verified-glow {
  from { text-shadow: 0 0 6px rgba(29,155,240,.35), 0 0 14px rgba(29,155,240,.20); }
  to   { text-shadow: 0 0 16px rgba(29,155,240,.70), 0 0 32px rgba(29,155,240,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .verified-name { animation: none; }
}

/* Notifications bell */
.topbar a.bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.topbar a.bell:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.topbar a.bell i { font-size: 18px; }
.bell-badge {
  position: absolute; top: -4px; inset-inline-end: -4px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  min-width: 18px; text-align: center;
  border: 2px solid var(--surface);
}

/* Wallet chip in topbar */
.topbar a.wallet-chip {
  background: linear-gradient(135deg, rgba(255,181,71,.10), rgba(255,122,182,.08));
  border: 1px solid rgba(255,181,71,.28);
  color: var(--text);
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s, transform .15s;
}
.topbar a.wallet-chip:hover {
  border-color: rgba(255,181,71,.55);
  background: linear-gradient(135deg, rgba(255,181,71,.16), rgba(255,122,182,.12));
  transform: translateY(-1px);
  text-decoration: none;
}
.topbar a.wallet-chip i { color: #ffb547; font-size: 15px; }
.topbar a.wallet-chip span { color: var(--text); font-weight: 600; }
.topbar a.wallet-chip::after {
  content: "پۆینت";
  color: var(--muted);
  font-size: 11px;
  margin-inline-start: 2px;
}

/* Stats row on dashboard/profile */
.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.stat {
  flex: 1; min-width: 120px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.stat .label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: 20px; font-weight: 700; }
.stat .value.accent { color: var(--accent); }
.stat .value.gold   { color: #ffb547; }
.stat .value.blue   { color: #1d9bf0; }

/* Gifts grid */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.gift-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 10px 14px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
  animation: giftCardIn .35s ease-out both;
}
.gift-card::before {
  /* subtle top sheen */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .05), transparent 70%);
  pointer-events: none;
}
.gift-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 92, 255, .55);
  box-shadow: 0 12px 28px rgba(124, 92, 255, .18);
}
.gift-card input { position: absolute; opacity: 0; pointer-events: none; }
.gift-card:has(input:checked) {
  border-color: var(--accent);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124, 92, 255, .22), transparent 70%),
    var(--surface-2);
  box-shadow:
    0 0 0 2px rgba(124, 92, 255, .35),
    0 16px 36px rgba(124, 92, 255, .30);
}
.gift-card:has(input:checked) .gift-emoji.icon {
  transform: scale(1.15);
  filter: saturate(1.25) drop-shadow(0 6px 14px rgba(124, 92, 255, .55));
}

.gift-card .icon { font-size: 38px; display: block; line-height: 1; }
.gift-card .gift-emoji.icon {
  font-size: 44px; line-height: 1;
  display: inline-block;
  filter: saturate(1.15);
  transform-origin: center bottom;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), filter .2s;
}
.gift-card:hover .gift-emoji.icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
}
.gift-card .name {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  color: rgba(255, 255, 255, .92);
}
.gift-card .cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #ffb547;
  background: rgba(255, 181, 71, .12);
  border: 1px solid rgba(255, 181, 71, .35);
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 8px;
  letter-spacing: .2px;
}

/* Stagger the entrance so the grid feels alive on first paint. */
@keyframes giftCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gift-card:nth-child(2) { animation-delay: .04s; }
.gift-card:nth-child(3) { animation-delay: .08s; }
.gift-card:nth-child(4) { animation-delay: .12s; }
.gift-card:nth-child(5) { animation-delay: .16s; }
.gift-card:nth-child(6) { animation-delay: .20s; }
.gift-card:nth-child(7) { animation-delay: .24s; }
.gift-card:nth-child(8) { animation-delay: .28s; }
.gift-card:nth-child(n+9) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .gift-card { animation: none; }
  .gift-card:hover, .gift-card:hover .gift-emoji.icon { transform: none; }
}

/* Report flag link */
.report-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.report-link:hover {
  color: var(--danger);
  background: rgba(229,72,77,.08);
  text-decoration: none;
}
.report-link.inline { padding: 0; }
.profile-actions {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.profile-actions .report-link {
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
}

/* Report form (report.php) */
.report-target {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0 18px;
}
.report-target-head { font-weight: 600; margin-bottom: 6px; }
.report-target-body { color: var(--text); white-space: pre-wrap; }
.report-target-reply {
  margin-top: 8px; padding: 10px 12px;
  background: var(--surface);
  border-inline-start: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 14px;
}

.report-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.report-reason {
  position: relative;
  cursor: pointer;
}
.report-reason input { position: absolute; opacity: 0; pointer-events: none; }
.report-reason-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  transition: border-color .12s, background .12s;
}
.report-reason-inner i { font-size: 18px; color: var(--muted); flex: 0 0 auto; }
.report-reason:has(input:checked) .report-reason-inner {
  border-color: var(--danger);
  background: rgba(229,72,77,.08);
}
.report-reason:has(input:checked) .report-reason-inner i { color: var(--danger); }
.report-reason:hover .report-reason-inner { border-color: var(--accent); }

/* ====================== Gift send animation ====================== */
/* Fullscreen celebratory overlay shown to the sender immediately after
   submitting a gift. Three tiers scale the intensity by cost. */
.gift-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  animation: giftFadeIn .25s ease-out both;
}
.gift-overlay.is-leaving { animation: giftFadeOut .35s ease-in forwards; }

/* Dark frosted glass — neutral (no blue/purple tint), the page behind shows
   through softly via backdrop-filter blur. */
.gift-overlay-bg {
  position: absolute; inset: 0;
  background: rgba(10, 12, 18, .55);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.gift-overlay[data-tier="3"] .gift-overlay-bg {
  background:
    radial-gradient(50% 50% at 50% 35%, rgba(255, 200, 100, .22), transparent 55%),
    rgba(10, 12, 18, .55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: giftBgPulse 1.6s ease-in-out infinite;
}

.gift-stage {
  position: relative; z-index: 2;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: giftPop 1.4s cubic-bezier(.2,1.6,.4,1) both;
}
.gift-overlay.is-leaving .gift-stage { animation: giftStageOut .35s ease-in forwards; }

.gift-icon-big {
  font-size: 140px; line-height: 1;
  filter: drop-shadow(0 0 28px rgba(255, 210, 74, .55))
          drop-shadow(0 12px 28px rgba(0, 0, 0, .55));
  animation: giftSpin 2.2s ease-in-out infinite;
}
.gift-overlay[data-tier="1"] .gift-icon-big { font-size: 110px; animation-duration: 3s; }
.gift-overlay[data-tier="3"] .gift-icon-big {
  font-size: 170px;
  filter: drop-shadow(0 0 36px rgba(255, 210, 74, .85))
          drop-shadow(0 0 64px rgba(255, 122, 182, .55))
          drop-shadow(0 12px 28px rgba(0, 0, 0, .65));
}
.gift-icon-big .gift-anim-icon { display: inline-block; }
.gift-icon-big .ri-* { font-size: inherit; line-height: 1; }

/* Rive gift overlay: replace the giant icon with the canvas the runtime draws into.
   The .riv has a baked-in white artboard fill, so we match the stage to white
   and frame it as a card — the seam disappears and it reads as intentional. */
.gift-overlay.is-rive .gift-icon-big {
  font-size: 0; animation: none; filter: none;
  width: min(82vw, 520px);
  height: min(50vh, 380px);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08);
}
.gift-rive-stage { width: 100%; height: 100%; display: block; }

/* "Rive" badge on the gift-grid preview. */
.gift-rive-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg, #00e0a4, #1d9bf0);
  color: #062018; padding: 1px 5px; border-radius: 4px;
  margin-inline-start: 4px; vertical-align: super;
}

/* Lottie gift overlay: replace the giant icon with the dotlottie-player element. */
.gift-overlay.is-lottie .gift-icon-big {
  font-size: 0; animation: none; filter: none;
  width: min(78vw, 480px);
  height: min(48vh, 360px);
}
.gift-lottie-stage { width: 100%; height: 100%; display: block; }

/* "Lottie" badge on the gift-grid preview. */
.gift-lottie-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg, #00d1ff, #7c5cff);
  color: #0a0a23; padding: 1px 5px; border-radius: 4px;
  margin-inline-start: 4px; vertical-align: super;
}

/* Dark frosted glass card — sits on the dim translucent overlay. */
.gift-meta {
  background: rgba(15, 17, 25, .60);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 14px 22px;
  color: #fff;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  min-width: 240px;
  animation: giftMetaIn .5s .35s ease-out both;
}
.gift-name {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(90deg, #fff, #ffd24a 50%, #ff7ab6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
}
.gift-to { font-size: 14px; color: rgba(255, 255, 255, .82); }
.gift-cost {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #ffd24a;
  background: rgba(255, 210, 74, .14);
  border: 1px solid rgba(255, 210, 74, .42);
  padding: 3px 10px; border-radius: 999px;
}

/* Tier 2/3 — falling icons */
.gift-rain {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.gift-drop {
  position: absolute; top: -40px;
  display: inline-block;
  animation: giftDrop linear forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

/* Tier 3 — radial burst from center */
.gift-burst {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.gift-ray {
  position: absolute;
  font-size: 28px;
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: giftRay 1.4s ease-out forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

@keyframes giftFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes giftFadeOut { to   { opacity: 0 } }
@keyframes giftBgPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}
@keyframes giftPop {
  0%   { transform: translateY(60px) scale(.4); opacity: 0; }
  55%  { transform: translateY(-12px) scale(1.15); opacity: 1; }
  75%  { transform: translateY(0) scale(.96); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes giftStageOut {
  to { transform: translateY(-30px) scale(.85); opacity: 0; }
}
@keyframes giftSpin {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg)  scale(1.06); }
}
@keyframes giftMetaIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes giftDrop {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
@keyframes giftRay {
  0%   { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0)     scale(.3); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(50vh)  scale(1.2); opacity: 0; }
}

/* Reduced-motion: keep the celebration but kill the kinetic stuff. */
@media (prefers-reduced-motion: reduce) {
  .gift-stage, .gift-icon-big, .gift-meta, .gift-overlay-bg { animation-duration: .2s !important; animation-iteration-count: 1 !important; }
  .gift-rain, .gift-burst { display: none; }
}

/* Pricing card (verify.php) */
.pricing-card {
  position: relative;
  margin: 16px 0 18px;
  padding: 28px 24px 22px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(29,155,240,.18) 0, transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(124,92,255,.22) 0, transparent 55%),
    linear-gradient(135deg, #1a2130, #141821);
  border: 1px solid rgba(124,92,255,.35);
  box-shadow: 0 8px 28px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
}
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(29,155,240,.25), transparent 60%);
  pointer-events: none;
}
.pricing-ribbon {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(29,155,240,.15);
  color: #8bd0ff;
  border: 1px solid rgba(29,155,240,.45);
  font-size: 13px; font-weight: 600;
  margin-bottom: 16px;
}
.pricing-ribbon i { font-size: 15px; }
.pricing-amount {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
  line-height: 1;
}
.pricing-currency { color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .5px; }
.pricing-number {
  font-size: 56px; font-weight: 800; letter-spacing: -1px;
  background: linear-gradient(90deg, #fff, #8bd0ff 50%, #b9a4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-per { color: var(--muted); font-size: 15px; }
.pricing-sub { position: relative; color: var(--muted); font-size: 13px; margin-top: 6px; }
.pricing-features {
  position: relative;
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 8px;
}
.pricing-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.5;
}
.pricing-features li i {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(48,163,108,.2); color: #4ade80;
  font-size: 13px;
  margin-top: 2px;
}
.pricing-stack {
  position: relative;
  margin-top: 16px; padding: 10px 12px;
  background: rgba(255,181,71,.08);
  border: 1px dashed rgba(255,181,71,.4);
  color: #ffd7a8;
  border-radius: 10px;
  font-size: 13px;
}
.pricing-stack i { margin-inline-end: 4px; }

.pay-howto {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.pay-howto h3 { margin: 0 0 4px; font-size: 15px; }

/* Amount field (topup) */
.amount-field {
  position: relative;
  display: flex; align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s;
}
.amount-field:focus-within { border-color: var(--accent); }
.amount-field input {
  border: 0; outline: none; background: transparent;
  flex: 1; min-width: 0;
  padding: 14px 16px;
  font-size: 22px; font-weight: 700;
  letter-spacing: .5px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
/* Hide native number spinners if the browser treats this as numeric */
.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-field input[type=number] { -moz-appearance: textfield; }
.amount-suffix {
  display: inline-flex; align-items: center;
  padding: 0 14px;
  color: var(--muted); font-size: 13px; font-weight: 600;
  letter-spacing: .5px;
  border-inline-start: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-start-end-radius: 10px; border-end-end-radius: 10px;
}
.amount-preview {
  margin-top: 8px;
  font-size: 13px; color: var(--muted);
  min-height: 18px;
  display: flex; align-items: center; gap: 6px;
}
.amount-preview.is-ok  { color: #8bd0ff; }
.amount-preview.is-bad { color: #ffb0b0; }
.amount-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.amount-chip {
  padding: 6px 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  font-family: inherit;
}
.amount-chip:hover { border-color: var(--accent); background: rgba(124,92,255,.08); transform: translateY(-1px); }

/* Payment method cards (verify / topup) */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.pay-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform .12s, border-color .12s, background .12s;
}
.pay-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.pay-card input { position: absolute; opacity: 0; pointer-events: none; }
.pay-card:has(input:checked) { border-color: var(--accent); background: rgba(124,92,255,.08); }
.pay-card .pay-logo { font-size: 40px; display: block; line-height: 1; margin-bottom: 8px; }
.pay-card .pay-logo-img { width: 44px; height: 44px; margin: 0 auto 8px; display: block; }
.pay-card .pay-name { font-size: 15px; font-weight: 600; }
.pay-card .pay-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Received-gift ribbon */
.gift-ribbon {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.gift-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; font-size: 13px;
}
.gift-pill i { font-size: 16px; color: #ff7ab6; }
.gift-pill .gift-emoji { font-size: 15px; line-height: 1; }
.gift-pill[data-gift-replay] { cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.gift-pill[data-gift-replay]:hover { transform: translateY(-1px); border-color: #ff7ab6; }
.gift-pill[data-gift-replay]:focus-visible { outline: 2px solid #ff7ab6; outline-offset: 2px; }

/* Status chips */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.chip-pending  { background: rgba(255,181,71,.12); color: #ffb547; border: 1px solid rgba(255,181,71,.35); }
.chip-approved { background: rgba(48,163,108,.14); color: #4ade80; border: 1px solid rgba(48,163,108,.4); }
.chip-rejected { background: rgba(229,72,77,.12); color: #ffb1b3; border: 1px solid rgba(229,72,77,.4); }

/* Simple data table */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: middle; white-space: nowrap; }
.table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.table tr:last-child td { border-bottom: 0; }

/* Table wrapper for horizontal scroll on narrow screens */
.card .table { display: table; }
.card > .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }

/* ------ Mobile breakpoint ------ */
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 18px; }
  .brand .brand-icon { font-size: 20px; }

  .topbar a.wallet-chip { font-size: 12px; padding: 4px 10px 4px 8px; }
  .topbar a.wallet-chip::after { font-size: 10px; }

  /* Show hamburger */
  .menu-btn { display: inline-flex; }

  /* Nav becomes an absolute drawer, slides down from the bar */
  .topbar nav {
    position: absolute;
    top: 100%; inset-inline: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch;
    padding: 0 14px;
    max-height: 0; overflow: hidden;
    z-index: 50;
    transition: max-height .25s ease, padding .25s ease, box-shadow .25s ease;
  }
  .topbar nav a {
    margin: 0 !important;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 15px; color: var(--text);
  }
  .topbar nav a:last-child { border-bottom: 0; }
  .topbar nav a.btn {
    margin: 10px 0 !important;
    justify-content: center;
    border-bottom: 0;
    padding: 12px 16px;
  }

  .menu-toggle-input:checked ~ nav {
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px 14px 10px;
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
  }

  /* Layout tighten */
  .container { margin: 18px auto; padding: 0 14px; }
  .card { padding: 16px; border-radius: 10px; }
  h1 { font-size: 22px; line-height: 1.3; }
  h2 { font-size: 17px; }
  .profile-head { padding: 22px 14px; }
  .profile-head .avatar { width: 72px; height: 72px; font-size: 30px; }
  .level-self-bar { width: 110px; }

  /* Forms */
  input[type=text], input[type=email], input[type=password], textarea, select {
    font-size: 16px; /* prevent iOS zoom-on-focus */
  }

  /* Share bar wraps */
  .share-bar { flex-wrap: wrap; }
  .share-bar code { flex: 1 1 100%; order: -1; }

  /* Dashboard filter row: buttons wrap naturally */
  .row { gap: 8px; }
  .row > * { flex: 1 1 calc(50% - 4px); }

  /* Gift grid: slightly smaller cells on phone */
  .gift-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .gift-card { padding: 14px 8px 12px; border-radius: 14px; }
  .gift-card .icon { font-size: 34px; }
  .gift-card .gift-emoji.icon { font-size: 38px; }
  .gift-card .name { font-size: 13px; margin-top: 8px; }
  .gift-card .cost { font-size: 10px; padding: 2px 7px; }

  /* Tables: allow horizontal scroll inside a card */
  .card { overflow-x: auto; }
  .table th, .table td { padding: 8px 6px; font-size: 13px; }

  /* Hero */
  .hero h1 { font-size: 26px; }
  .hero p  { font-size: 15px; }

  /* Messages */
  .message { padding: 14px; }
  .message .meta { flex-wrap: wrap; gap: 4px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .topbar { padding: 10px 10px; }
  .brand span { display: none; }       /* keep just the icon to save space */
  .topbar a.wallet-chip::after { content: ""; margin: 0; }
  .row > * { flex: 1 1 100%; }         /* stack buttons */
}

/* ----------------- Follow row on profile ----------------- */
.follow-row {
  display: flex; justify-content: center; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
  font-size: 15px;
}
.count-inline {
  color: inherit;
  display: inline-flex; align-items: baseline; gap: 5px;
}
.count-inline:hover { text-decoration: none; }
.count-inline:hover strong { color: var(--accent); }
.count-inline strong { font-weight: 700; }
.count-sep { color: var(--muted); }
.follow-form button { padding: 9px 18px; }

/* ----------------- Notifications list ----------------- */
.notif-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: rgba(124,92,255,.05); }
.notif-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex: 0 0 auto;
}
.notif-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; }
.notif-msg a { color: var(--accent); font-weight: 600; }
.notif-msg bdi.actor { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; }
.notif-msg bdi.actor .verified-badge { margin-inline-start: 0; font-size: 15px; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notif-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  box-shadow: 0 0 8px var(--accent);
}
.notif-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 16px; flex: 0 0 auto;
  transition: border-color .15s, color .15s, transform .15s;
}
.notif-arrow:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; transform: translateY(-1px); }

/* ----------------- Feed items ----------------- */
.feed-item { padding: 16px; }
.feed-who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff7ab6);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 18px;
  flex: 0 0 auto;
}
.feed-avatar:hover { text-decoration: none; }
.feed-meta { min-width: 0; flex: 1; }
.feed-name { color: var(--text); font-weight: 600; }
.feed-meta .handle { font-size: 12px; }
.feed-question { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; margin-bottom: 8px; }
.feed-question i { color: var(--muted); margin-inline-end: 4px; }

/* ----------------- People list ----------------- */
.people-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-bottom: 1px solid var(--border);
}
.people-row:last-child { border-bottom: 0; }
.people-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff7ab6);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 18px;
  flex: 0 0 auto;
}
.people-avatar:hover { text-decoration: none; }
.people-info { flex: 1; min-width: 0; }
.people-name { color: var(--text); font-weight: 600; }
.people-info .handle { font-size: 12px; }
.people-action button { padding: 8px 14px; font-size: 13px; }
.people-meta { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }

/* "Who viewed your profile" — eye chip on the owner's own profile head. */
.profile-views-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px auto 0; padding: 7px 16px; border-radius: 999px;
  font-size: 14px; color: var(--text);
  background: rgba(123, 94, 255, 0.14);
  border: 1px solid rgba(123, 94, 255, 0.45);
  transition: transform .12s, filter .12s;
}
.profile-views-chip:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); }
.profile-views-chip i.ri-eye-fill { font-size: 17px; color: #a78bff; }
.profile-views-chip strong { font-weight: 800; }
.profile-views-chip .lock { font-size: 13px; color: #f5b82a; }
.profile-views-chip.is-locked { border-color: rgba(245, 184, 42, 0.5); background: rgba(245, 184, 42, 0.12); }

/* Locked teaser shown to unverified owners on viewers.php. */
.viewers-locked { position: relative; overflow: hidden; padding: 0; }
.viewers-blur { filter: blur(7px); opacity: 0.5; pointer-events: none; user-select: none; padding: 8px; }
.viewers-lock-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px; gap: 2px;
  background: radial-gradient(circle at 50% 40%, rgba(20,16,32,.55) 0, rgba(12,10,20,.86) 70%);
}
.viewers-lock-overlay h2 { font-size: 19px; }
.viewers-lock-overlay .btn { margin-top: 4px; }

/* ----------------- Theme swatch picker (mini profile preview) ----------------- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.theme-swatch {
  position: relative;
  cursor: pointer;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .15s;
}
.theme-swatch:hover { transform: translateY(-2px); }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch:has(input:checked) .swatch-preview {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(124,92,255,.28);
}
.theme-swatch:has(input:checked) .swatch-label {
  color: var(--accent);
}
.theme-swatch:has(input:checked) .swatch-preview::after {
  content: "\EB7B"; /* ri-check-line */
  font-family: "remixicon";
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  z-index: 3;
}

/* Mini profile-head inside the swatch */
.swatch-preview {
  padding: 18px 10px 18px;
  text-align: center;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  min-height: 130px;
  border: 2px solid transparent;
  transition: box-shadow .15s, border-color .15s;
}
/* Blurry emoji background — sits behind everything */
.swatch-bg {
  position: absolute; inset: -20px;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: 4px;
  color: rgba(255,255,255,.45);
  filter: blur(8px) saturate(1.3);
  opacity: .55;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-6deg);
}
.swatch-content { position: relative; z-index: 1; }
.swatch-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  font-weight: 700; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, #7c5cff, #ff7ab6);
}
.swatch-name {
  font-weight: 600; font-size: 13px; line-height: 1.3;
  display: flex; justify-content: center;
}
.swatch-name bdi { display: inline-flex; align-items: center; gap: 4px; }
.swatch-name-text {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.swatch-name i { font-size: 13px; color: #1d9bf0; filter: drop-shadow(0 0 5px rgba(29,155,240,.45)); }
.swatch-ribbon {
  font-size: 13px; margin-top: 6px; letter-spacing: 2px; opacity: .9;
}
.swatch-label {
  padding: 2px 4px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  text-align: center;
  transition: color .15s;
}
.theme-swatch:hover .swatch-label { color: var(--text); }

/* Locked themes — shown to non-verified users as previews. The whole swatch
   links to /verify.php; preview is dimmed/blurred until hovered. */
.theme-swatch.is-locked,
.theme-swatch.is-locked:hover {
  text-decoration: none;
}
.theme-swatch.is-locked .swatch-preview {
  filter: blur(2px) saturate(.55) brightness(.7);
  transition: filter .2s;
}
.theme-swatch.is-locked:hover .swatch-preview { filter: none; }
.theme-swatch.is-locked .swatch-label { color: var(--muted); }

/* ---------- Per-theme preview looks ---------- */

/* default — dark site palette with accent glow */
.sw-default .swatch-preview {
  background: radial-gradient(circle at 70% 30%, rgba(124,92,255,.18), transparent 60%), #1f242d;
  color: var(--text);
}
.sw-default .swatch-name-text { text-shadow: 0 0 10px rgba(124,92,255,.45); color: #cbb6ff; }

/* hellokitty — pink paradise */
.sw-hellokitty .swatch-preview {
  background: linear-gradient(135deg, #ff8cc0, #ff5599);
  color: #fff;
}
.sw-hellokitty .swatch-avatar { background: linear-gradient(135deg, #fff, #ffc8dc); color: #ff4488; }
.sw-hellokitty .swatch-name-text { color: #fff; text-shadow: 0 1px 2px rgba(120,0,40,.55), 0 0 10px rgba(255,77,148,.7); }
.sw-hellokitty .swatch-name i { color: #fff; filter: drop-shadow(0 0 6px rgba(255,77,148,.9)) drop-shadow(0 1px 1px rgba(120,0,40,.5)); }
.sw-hellokitty .swatch-ribbon { opacity: 1; }

/* hearts — romantic red */
.sw-hearts .swatch-preview {
  background: linear-gradient(135deg, #7a0026, #e5004c);
  color: #ffe0ea;
}
.sw-hearts .swatch-avatar { background: linear-gradient(135deg, #ff2d6a, #ffb0c5); }
.sw-hearts .swatch-name-text { color: #ffd4e0; text-shadow: 0 0 12px rgba(255,45,106,.85); }
.sw-hearts .swatch-name i { color: #ff6a9c; filter: drop-shadow(0 0 5px rgba(255,106,156,.7)); }

/* skulls — gothic */
.sw-skulls .swatch-preview {
  background: radial-gradient(circle at 50% 0%, rgba(139,0,0,.35), transparent 65%), #0a0a0a;
  color: #d4d4d4;
}
.sw-skulls .swatch-avatar { background: linear-gradient(135deg, #2a0000, #6a0000); color: #e8d4d4; border: 1px solid #5a0000; }
.sw-skulls .swatch-name-text { color: #ff8080; text-shadow: 0 0 12px rgba(198,40,40,.85); }
.sw-skulls .swatch-name i { color: #ff4444; filter: drop-shadow(0 0 5px rgba(198,40,40,.6)); }
.sw-skulls .swatch-ribbon { opacity: .85; }

/* girlish — pastel dreams */
.sw-girlish .swatch-preview {
  background: linear-gradient(135deg, #c9a0ff, #ff7ab6);
  color: #fff;
}
.sw-girlish .swatch-avatar { background: linear-gradient(135deg, #fff, #e8c8ff); color: #9a4fd5; }
.sw-girlish .swatch-name-text { color: #fff; text-shadow: 0 1px 2px rgba(80,30,130,.55), 0 0 10px rgba(183,112,240,.7); }
.sw-girlish .swatch-name i { color: #fff; filter: drop-shadow(0 0 6px rgba(183,112,240,.95)) drop-shadow(0 1px 1px rgba(80,30,130,.5)); }

/* men — steel masculine */
.sw-men .swatch-preview {
  background: linear-gradient(135deg, #1a2a3a, #0a1520);
  color: #d4e8ff;
}
.sw-men .swatch-avatar { background: linear-gradient(135deg, #1d9bf0, #0a1520); }
.sw-men .swatch-name-text { color: #9cd0ff; text-shadow: 0 0 10px rgba(29,155,240,.7); }
.sw-men .swatch-name i { color: #1d9bf0; filter: drop-shadow(0 0 5px rgba(29,155,240,.6)); }

/* sport — green pitch */
.sw-sport .swatch-preview {
  background: linear-gradient(135deg, #0f7a3c, #1b5e20 60%, #103a15);
  color: #eaffe8;
}
.sw-sport .swatch-avatar { background: linear-gradient(135deg, #ffd24a, #ff8a00); color: #14321b; }
.sw-sport .swatch-name-text { color: #ffe98b; text-shadow: 0 0 10px rgba(255,210,74,.7); }
.sw-sport .swatch-name i { color: #ffd24a; filter: drop-shadow(0 0 5px rgba(255,210,74,.7)); }

/* galaxy — cosmic violet */
.sw-galaxy .swatch-preview {
  background: linear-gradient(135deg, #0a0830, #2a1455 55%, #4a25aa);
  color: #e0d8ff;
}
.sw-galaxy .swatch-avatar { background: linear-gradient(135deg, #b794f4, #6e5ce0); color: #fff; }
.sw-galaxy .swatch-name-text { color: #d4c5ff; text-shadow: 0 0 12px rgba(183,148,244,.85); }
.sw-galaxy .swatch-name i { color: #b794f4; filter: drop-shadow(0 0 6px rgba(183,148,244,.8)); }

/* ocean — deep sea */
.sw-ocean .swatch-preview {
  background: linear-gradient(135deg, #02324a, #0a5a82 55%, #0c7d9a);
  color: #d8f2ff;
}
.sw-ocean .swatch-avatar { background: linear-gradient(135deg, #4dd0e1, #007a93); color: #022530; }
.sw-ocean .swatch-name-text { color: #b8eef8; text-shadow: 0 0 12px rgba(77,208,225,.8); }
.sw-ocean .swatch-name i { color: #4dd0e1; filter: drop-shadow(0 0 6px rgba(77,208,225,.7)); }

/* forest — deep woods */
.sw-forest .swatch-preview {
  background: linear-gradient(135deg, #1b3a20, #2c5a30 55%, #3a7a40);
  color: #e0f5e0;
}
.sw-forest .swatch-avatar { background: linear-gradient(135deg, #81c784, #2e7d32); color: #0a2410; }
.sw-forest .swatch-name-text { color: #c5e8c5; text-shadow: 0 0 12px rgba(102,187,106,.75); }
.sw-forest .swatch-name i { color: #66bb6a; filter: drop-shadow(0 0 6px rgba(102,187,106,.75)); }

/* gamer — neon arcade */
.sw-gamer .swatch-preview {
  background: linear-gradient(135deg, #0a0a25, #1c0f3a 55%, #2a0a4a);
  color: #e8eaff;
}
.sw-gamer .swatch-avatar { background: linear-gradient(135deg, #00ffea, #ff00aa); color: #0a0a25; }
.sw-gamer .swatch-name-text { color: #b8fff8; text-shadow: 0 0 12px rgba(0,255,234,.85), 0 0 18px rgba(255,0,170,.4); }
.sw-gamer .swatch-name i { color: #00ffea; filter: drop-shadow(0 0 6px rgba(0,255,234,.85)); }

/* music — vibrant wave */
.sw-music .swatch-preview {
  background: linear-gradient(135deg, #2a0d4a, #5a1a7a 55%, #aa1f80);
  color: #f5e0ff;
}
.sw-music .swatch-avatar { background: linear-gradient(135deg, #ff4081, #aa00ff); color: #fff; }
.sw-music .swatch-name-text { color: #ffc8e8; text-shadow: 0 0 12px rgba(255,64,129,.85); }
.sw-music .swatch-name i { color: #ff4081; filter: drop-shadow(0 0 6px rgba(255,64,129,.8)); }

/* anime — kawaii pastels */
.sw-anime .swatch-preview {
  background: linear-gradient(135deg, #ff80b5, #c084d8 50%, #80deea);
  color: #fff;
}
.sw-anime .swatch-avatar { background: linear-gradient(135deg, #fff, #ffc8dc); color: #d23f7d; }
.sw-anime .swatch-name-text { color: #fff; text-shadow: 0 1px 2px rgba(120,30,80,.55), 0 0 12px rgba(255,128,181,.8); }
.sw-anime .swatch-name i { color: #fff; filter: drop-shadow(0 0 6px rgba(255,128,181,.9)); }

/* art — paint splash */
.sw-art .swatch-preview {
  background: linear-gradient(135deg, #c2185b, #ff6f4f 50%, #ffc107);
  color: #fff;
}
.sw-art .swatch-avatar { background: linear-gradient(135deg, #ff6f4f, #ffd54f); color: #4a1505; }
.sw-art .swatch-name-text { color: #fff; text-shadow: 0 1px 2px rgba(60,20,10,.55), 0 0 12px rgba(255,111,79,.85); }
.sw-art .swatch-name i { color: #fff; filter: drop-shadow(0 0 6px rgba(255,111,79,.9)); }

/* Per-theme tweaks for the blurred-emoji background layer */
.sw-default    .swatch-bg { opacity: .25; color: rgba(255,255,255,.35); }
.sw-hellokitty .swatch-bg { opacity: .55; color: rgba(255,255,255,.65); }
.sw-hearts     .swatch-bg { opacity: .40; color: rgba(255,255,255,.4); }
.sw-skulls     .swatch-bg { opacity: .38; color: rgba(255,255,255,.28); }
.sw-girlish    .swatch-bg { opacity: .55; color: rgba(255,255,255,.6); }
.sw-men        .swatch-bg { opacity: .35; color: rgba(255,255,255,.3); }
.sw-sport      .swatch-bg { opacity: .45; color: rgba(255,255,255,.45); }
.sw-galaxy     .swatch-bg { opacity: .35; color: rgba(212,197,255,.45); }
.sw-ocean      .swatch-bg { opacity: .40; color: rgba(184,238,248,.50); }
.sw-forest     .swatch-bg { opacity: .40; color: rgba(197,232,197,.45); }
.sw-gamer      .swatch-bg { opacity: .38; color: rgba(184,255,248,.45); }
.sw-music      .swatch-bg { opacity: .42; color: rgba(255,200,232,.50); }
.sw-anime      .swatch-bg { opacity: .55; color: rgba(255,255,255,.65); }
.sw-art        .swatch-bg { opacity: .48; color: rgba(255,255,255,.55); }

/* ----------------- Profile themes (applied via body class) ----------------- */

/* Fixed blurry emoji wallpaper behind everything on themed pages.
   No rotation — rotation leaves visible rectangle edges at viewport corners. */
body[class*="theme-"]::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  font-size: 90px;
  line-height: 1.35;
  letter-spacing: 10px;
  word-break: break-all;
  text-align: center;
  filter: blur(7px) saturate(1.35);
  opacity: .45;
  color: rgba(255,255,255,.55);
}
/* Make sure chrome sits above the wallpaper. Topbar sits above main so the
   mobile drawer (nested inside topbar) renders over profile cards. */
body[class*="theme-"] > header.topbar { position: relative; z-index: 2; }
body[class*="theme-"] > main.container,
body[class*="theme-"] > footer.footer { position: relative; z-index: 1; }

/* Per-theme emoji content */
body.theme-hellokitty::before { content: "🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗  🎀  🐱  💗"; }
body.theme-hearts::before     { content: "💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️  💖  💕  ❤️"; }
body.theme-skulls::before     { content: "💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️  💀  🖤  ⚰️"; }
body.theme-girlish::before    { content: "🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷  🌸  🦄  🌷"; }
body.theme-men::before        { content: "⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅  ⚡  🔥  🦅"; }
body.theme-sport::before      { content: "⚽  🏆  🏀  🥇  ⚽  🏆  🏀  🥇  ⚽  🏆  🏀  🥇  ⚽  🏆  🏀  🥇  ⚽  🏆  🏀  🥇  ⚽  🏆  🏀  🥇  ⚽  🏆  🏀  🥇"; }
body.theme-galaxy::before     { content: "🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐  🌌  🪐  ⭐"; }
body.theme-ocean::before      { content: "🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬  🌊  🐚  🐬"; }
body.theme-forest::before     { content: "🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃  🌿  🌳  🍃"; }
body.theme-gamer::before      { content: "🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯  🎮  🕹️  🎯"; }
body.theme-music::before      { content: "🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤  🎵  🎧  🎤"; }
body.theme-anime::before      { content: "🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌  🌸  ⚔️  🎌"; }
body.theme-art::before        { content: "🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨  🎨  🖌️  ✨"; }

/* Per-theme wallpaper opacity (tuned so text stays readable on each palette) */
body.theme-hellokitty::before { opacity: .50; color: rgba(255,255,255,.75); }
body.theme-hearts::before     { opacity: .30; color: rgba(255,200,215,.45); }
body.theme-skulls::before     { opacity: .22; color: rgba(255,255,255,.25); }
body.theme-girlish::before    { opacity: .50; color: rgba(255,255,255,.70); }
body.theme-men::before        { opacity: .25; color: rgba(170,210,255,.30); }
body.theme-sport::before      { opacity: .30; color: rgba(255,230,150,.50); }
body.theme-galaxy::before     { opacity: .28; color: rgba(212,197,255,.45); }
body.theme-ocean::before      { opacity: .30; color: rgba(184,238,248,.45); }
body.theme-forest::before     { opacity: .28; color: rgba(180,220,180,.40); }
body.theme-gamer::before      { opacity: .25; color: rgba(184,255,248,.40); }
body.theme-music::before      { opacity: .32; color: rgba(255,200,232,.50); }
body.theme-anime::before      { opacity: .50; color: rgba(255,128,181,.55); }
body.theme-art::before        { opacity: .42; color: rgba(255,111,79,.45); }

/* hellokitty — pink paradise */
body.theme-hellokitty {
  --bg:        #ffeaf3;
  --surface:   #fff5fa;
  --surface-2: #ffdeed;
  --border:    #ffc0d9;
  --text:      #4a1a2d;
  --muted:     #9a5a76;
  --accent:    #ff4d94;
  --accent-2:  #e0347a;
  background: transparent;
}
body.theme-hellokitty .profile-head {
  background: linear-gradient(135deg, #ff8cc0, #ff5599);
  border-color: #ff4488;
  color: #fff;
}
body.theme-hellokitty .profile-head .handle,
body.theme-hellokitty .profile-head h1 { color: #fff; }
body.theme-hellokitty .profile-head::after {
  content: "🎀  🐱  💗  🎀  🐱  💗";
  display: block;
  margin-top: 14px;
  font-size: 18px;
  letter-spacing: 6px;
  opacity: .85;
}
body.theme-hellokitty .avatar { background: linear-gradient(135deg, #fff, #ffc8dc); color: #ff4488; }
body.theme-hellokitty .gift-pill { background: #fff; border-color: #ffb6cf; color: #4a1a2d; }
body.theme-hellokitty .verified-name {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation-name: glow-pink;
  text-shadow: 0 1px 2px rgba(120,0,40,.55), 0 0 12px rgba(255,77,148,.8);
}
body.theme-hellokitty .verified-badge {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255,77,148,.9)) drop-shadow(0 1px 1px rgba(120,0,40,.5));
}
@keyframes glow-pink {
  from { text-shadow: 0 1px 2px rgba(120,0,40,.55), 0 0 8px rgba(255,77,148,.5); }
  to   { text-shadow: 0 1px 2px rgba(120,0,40,.55), 0 0 20px rgba(255,77,148,1); }
}

/* hearts — romantic red */
body.theme-hearts {
  --bg:        #1a0008;
  --surface:   #2a0010;
  --surface-2: #3a0018;
  --border:    #5a0022;
  --text:      #ffe0ea;
  --muted:     #c088a0;
  --accent:    #ff2d6a;
  --accent-2:  #e5004c;
  background: transparent;
}
body.theme-hearts .profile-head {
  background: linear-gradient(135deg, #7a0026, #e5004c);
  border-color: #ff2d6a;
}
body.theme-hearts .profile-head::after {
  content: "💖  💕  ❤️  💖  💕  ❤️";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-hearts .avatar { background: linear-gradient(135deg, #ff2d6a, #ffb0c5); }
body.theme-hearts .verified-name {
  background: linear-gradient(90deg, #ffc8d8, #ffffff 50%, #ffc8d8);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-red;
}
body.theme-hearts .verified-badge {
  color: #ffd0dc;
  filter: drop-shadow(0 0 8px rgba(255,45,106,.9));
}
@keyframes glow-red {
  from { text-shadow: 0 0 6px rgba(255,45,106,.4),  0 0 14px rgba(229,0,76,.2); }
  to   { text-shadow: 0 0 18px rgba(255,45,106,.9), 0 0 34px rgba(229,0,76,.5); }
}

/* skulls — gothic */
body.theme-skulls {
  --bg:        #08080a;
  --surface:   #121214;
  --surface-2: #1d1d20;
  --border:    #333;
  --text:      #d4d4d4;
  --muted:     #7a7a82;
  --accent:    #c62828;
  --accent-2:  #8b0000;
  background: transparent;
}
body.theme-skulls .profile-head {
  background: linear-gradient(135deg, #0a0a0a, #2a0000);
  border: 1px solid #5a0000;
}
body.theme-skulls .profile-head h1 { color: #e8d4d4; text-shadow: 0 0 12px rgba(198,40,40,.4); }
body.theme-skulls .profile-head::after {
  content: "💀  🖤  ⚰️  💀  🖤  ⚰️";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
  opacity: .85;
}
body.theme-skulls .avatar { background: linear-gradient(135deg, #2a0000, #6a0000); color: #e8d4d4; }
body.theme-skulls a { color: #ff4444; }
body.theme-skulls .verified-name {
  background: linear-gradient(90deg, #ff8080, #ffd4d4 50%, #ff8080);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-blood;
}
body.theme-skulls .verified-badge {
  color: #ff6a6a;
  filter: drop-shadow(0 0 9px rgba(198,40,40,.85));
}
@keyframes glow-blood {
  from { text-shadow: 0 0 6px rgba(198,40,40,.5),  0 0 14px rgba(139,0,0,.35); }
  to   { text-shadow: 0 0 20px rgba(198,40,40,1),  0 0 38px rgba(139,0,0,.7); }
}

/* girlish — pastel dreams */
body.theme-girlish {
  --bg:        #f8eefc;
  --surface:   #ffffff;
  --surface-2: #f2e4ff;
  --border:    #e0c8f5;
  --text:      #3a1a5a;
  --muted:     #7a5a9a;
  --accent:    #b770f0;
  --accent-2:  #9a4fd5;
  background: transparent;
}
body.theme-girlish .profile-head {
  background: linear-gradient(135deg, #e8c8ff, #ff9ecf);
  border-color: #d4a0f0;
  color: #3a1a5a;
}
body.theme-girlish .profile-head .handle,
body.theme-girlish .profile-head h1 { color: #3a1a5a; }
body.theme-girlish .profile-head::after {
  content: "🌸  🦄  🌷  🌸  🦄  🌷";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-girlish .avatar { background: linear-gradient(135deg, #fff, #e8c8ff); color: #9a4fd5; }
body.theme-girlish .verified-name {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation-name: glow-lavender;
  text-shadow: 0 1px 2px rgba(80,30,130,.55), 0 0 12px rgba(183,112,240,.7);
}
body.theme-girlish .verified-badge {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(183,112,240,.95)) drop-shadow(0 1px 1px rgba(80,30,130,.5));
}
@keyframes glow-lavender {
  from { text-shadow: 0 1px 2px rgba(80,30,130,.55), 0 0 8px rgba(183,112,240,.55); }
  to   { text-shadow: 0 1px 2px rgba(80,30,130,.55), 0 0 20px rgba(183,112,240,1); }
}

/* men — steel masculine */
body.theme-men {
  --bg:        #0a1016;
  --surface:   #141d26;
  --surface-2: #1c2836;
  --border:    #2a3c4e;
  --text:      #e0eaf5;
  --muted:     #7a8da0;
  --accent:    #1d9bf0;
  --accent-2:  #1377c0;
  background: transparent;
}
body.theme-men .profile-head {
  background: linear-gradient(135deg, #1a2a3a, #0a1520);
  border: 1px solid #2a4a6a;
}
body.theme-men .profile-head::after {
  content: "⚡  🔥  🦅  ⚡  🔥  🦅";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
  opacity: .9;
}
body.theme-men .avatar { background: linear-gradient(135deg, #1d9bf0, #0a1520); }
body.theme-men .verified-name {
  background: linear-gradient(90deg, #9cd0ff, #ffffff 50%, #9cd0ff);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-steel;
}
body.theme-men .verified-badge {
  color: #bfe3ff;
  filter: drop-shadow(0 0 8px rgba(29,155,240,.9));
}
@keyframes glow-steel {
  from { text-shadow: 0 0 6px rgba(29,155,240,.45), 0 0 14px rgba(19,119,192,.25); }
  to   { text-shadow: 0 0 18px rgba(29,155,240,.85), 0 0 34px rgba(19,119,192,.5); }
}

/* sport — green pitch with gold */
body.theme-sport {
  --bg:        #0b1a10;
  --surface:   #0f2a1a;
  --surface-2: #153a24;
  --border:    #225a38;
  --text:      #eaffe8;
  --muted:     #9cc9a8;
  --accent:    #ffd24a;
  --accent-2:  #f2a900;
  background: transparent;
}
body.theme-sport .profile-head {
  background: linear-gradient(135deg, #0f7a3c, #1b5e20 60%, #103a15);
  border: 1px solid #2d7a3d;
}
body.theme-sport .profile-head::after {
  content: "⚽  🏆  🏀  🥇  ⚾  ⛹️  🏅  🏐";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-sport .avatar { background: linear-gradient(135deg, #ffd24a, #ff8a00); color: #14321b; }
body.theme-sport .verified-name {
  background: linear-gradient(90deg, #ffe98b, #ffffff 50%, #ffe98b);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-gold;
}
body.theme-sport .verified-badge {
  color: #ffd24a;
  filter: drop-shadow(0 0 9px rgba(255,210,74,.9));
}
@keyframes glow-gold {
  from { text-shadow: 0 0 6px rgba(255,210,74,.5), 0 0 14px rgba(242,169,0,.3); }
  to   { text-shadow: 0 0 18px rgba(255,210,74,.9), 0 0 34px rgba(242,169,0,.55); }
}

/* galaxy — cosmic violet */
body.theme-galaxy {
  --bg:        #0a0820;
  --surface:   #150f30;
  --surface-2: #1f1845;
  --border:    #2a2055;
  --text:      #e0d8ff;
  --muted:     #8a82b8;
  --accent:    #b794f4;
  --accent-2:  #6e5ce0;
  background: transparent;
}
body.theme-galaxy .profile-head {
  background: linear-gradient(135deg, #0a0830, #2a1455 55%, #4a25aa);
  border: 1px solid #5a3aa0;
}
body.theme-galaxy .profile-head::after {
  content: "🌌  🪐  ⭐  🌌  🪐  ⭐";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-galaxy .avatar { background: linear-gradient(135deg, #b794f4, #6e5ce0); color: #fff; }
body.theme-galaxy .verified-name {
  background: linear-gradient(90deg, #d4c5ff, #ffffff 50%, #d4c5ff);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-violet;
}
body.theme-galaxy .verified-badge {
  color: #d4c5ff;
  filter: drop-shadow(0 0 9px rgba(183,148,244,.85));
}
@keyframes glow-violet {
  from { text-shadow: 0 0 6px rgba(183,148,244,.5), 0 0 14px rgba(110,92,224,.3); }
  to   { text-shadow: 0 0 18px rgba(183,148,244,.9), 0 0 34px rgba(110,92,224,.55); }
}

/* ocean — deep sea */
body.theme-ocean {
  --bg:        #052838;
  --surface:   #073a52;
  --surface-2: #094c6a;
  --border:    #0f6188;
  --text:      #d8f2ff;
  --muted:     #6eaecc;
  --accent:    #4dd0e1;
  --accent-2:  #0097a7;
  background: transparent;
}
body.theme-ocean .profile-head {
  background: linear-gradient(135deg, #02324a, #0a5a82 55%, #0c7d9a);
  border: 1px solid #167896;
}
body.theme-ocean .profile-head::after {
  content: "🌊  🐚  🐬  🌊  🐚  🐬";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-ocean .avatar { background: linear-gradient(135deg, #4dd0e1, #007a93); color: #022530; }
body.theme-ocean .verified-name {
  background: linear-gradient(90deg, #b8eef8, #ffffff 50%, #b8eef8);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-cyan;
}
body.theme-ocean .verified-badge {
  color: #b8eef8;
  filter: drop-shadow(0 0 9px rgba(77,208,225,.85));
}
@keyframes glow-cyan {
  from { text-shadow: 0 0 6px rgba(77,208,225,.5), 0 0 14px rgba(0,151,167,.3); }
  to   { text-shadow: 0 0 18px rgba(77,208,225,.9), 0 0 34px rgba(0,151,167,.55); }
}

/* forest — deep woods */
body.theme-forest {
  --bg:        #0a1f10;
  --surface:   #15301a;
  --surface-2: #1f4527;
  --border:    #2c5a35;
  --text:      #e0f5e0;
  --muted:     #90b89c;
  --accent:    #66bb6a;
  --accent-2:  #2e7d32;
  background: transparent;
}
body.theme-forest .profile-head {
  background: linear-gradient(135deg, #1b3a20, #2c5a30 55%, #3a7a40);
  border: 1px solid #4a8a50;
}
body.theme-forest .profile-head::after {
  content: "🌿  🌳  🍃  🌿  🌳  🍃";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-forest .avatar { background: linear-gradient(135deg, #81c784, #2e7d32); color: #0a2410; }
body.theme-forest .verified-name {
  background: linear-gradient(90deg, #c5e8c5, #ffffff 50%, #c5e8c5);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-leaf;
}
body.theme-forest .verified-badge {
  color: #c5e8c5;
  filter: drop-shadow(0 0 9px rgba(102,187,106,.85));
}
@keyframes glow-leaf {
  from { text-shadow: 0 0 6px rgba(102,187,106,.5), 0 0 14px rgba(46,125,50,.3); }
  to   { text-shadow: 0 0 18px rgba(102,187,106,.9), 0 0 34px rgba(46,125,50,.55); }
}

/* gamer — neon arcade */
body.theme-gamer {
  --bg:        #08081a;
  --surface:   #110f28;
  --surface-2: #1a163c;
  --border:    #2a2055;
  --text:      #e8eaff;
  --muted:     #7a7c9a;
  --accent:    #00ffea;
  --accent-2:  #ff00aa;
  background: transparent;
}
body.theme-gamer .profile-head {
  background: linear-gradient(135deg, #0a0a25, #1c0f3a 55%, #2a0a4a);
  border: 1px solid #00ffea;
  box-shadow: 0 0 22px rgba(0,255,234,.18), inset 0 0 22px rgba(255,0,170,.12);
}
body.theme-gamer .profile-head::after {
  content: "🎮  🕹️  🎯  🎮  🕹️  🎯";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-gamer .avatar { background: linear-gradient(135deg, #00ffea, #ff00aa); color: #0a0a25; }
body.theme-gamer .verified-name {
  background: linear-gradient(90deg, #b8fff8, #ffffff 50%, #ffb8e8);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-neon;
}
body.theme-gamer .verified-badge {
  color: #b8fff8;
  filter: drop-shadow(0 0 9px rgba(0,255,234,.85));
}
@keyframes glow-neon {
  from { text-shadow: 0 0 6px rgba(0,255,234,.55), 0 0 14px rgba(255,0,170,.35); }
  to   { text-shadow: 0 0 18px rgba(0,255,234,.95), 0 0 34px rgba(255,0,170,.6); }
}

/* music — vibrant wave */
body.theme-music {
  --bg:        #150522;
  --surface:   #221038;
  --surface-2: #321852;
  --border:    #4a247a;
  --text:      #f5e0ff;
  --muted:     #b095c5;
  --accent:    #ff4081;
  --accent-2:  #aa00ff;
  background: transparent;
}
body.theme-music .profile-head {
  background: linear-gradient(135deg, #2a0d4a, #5a1a7a 55%, #aa1f80);
  border: 1px solid #aa00ff;
}
body.theme-music .profile-head::after {
  content: "🎵  🎧  🎤  🎵  🎧  🎤";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-music .avatar { background: linear-gradient(135deg, #ff4081, #aa00ff); color: #fff; }
body.theme-music .verified-name {
  background: linear-gradient(90deg, #ffc8e8, #ffffff 50%, #d8a8ff);
  -webkit-background-clip: text; background-clip: text;
  animation-name: glow-magenta;
}
body.theme-music .verified-badge {
  color: #ffc8e8;
  filter: drop-shadow(0 0 9px rgba(255,64,129,.85));
}
@keyframes glow-magenta {
  from { text-shadow: 0 0 6px rgba(255,64,129,.5), 0 0 14px rgba(170,0,255,.35); }
  to   { text-shadow: 0 0 18px rgba(255,64,129,.9), 0 0 34px rgba(170,0,255,.6); }
}

/* anime — kawaii pastels (light) */
body.theme-anime {
  --bg:        #fce4f0;
  --surface:   #ffffff;
  --surface-2: #ffeaf5;
  --border:    #f0c8dc;
  --text:      #4a1a3a;
  --muted:     #8a5a78;
  --accent:    #d23f7d;
  --accent-2:  #9a4fd5;
  background: transparent;
}
body.theme-anime .profile-head {
  background: linear-gradient(135deg, #ff80b5, #c084d8 50%, #80deea);
  border: 1px solid #ff80b5;
  color: #fff;
}
body.theme-anime .profile-head .handle,
body.theme-anime .profile-head h1 { color: #fff; text-shadow: 0 1px 2px rgba(120,30,80,.55); }
body.theme-anime .profile-head::after {
  content: "🌸  ⚔️  🎌  🌸  ⚔️  🎌";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-anime .avatar { background: linear-gradient(135deg, #fff, #ffc8dc); color: #d23f7d; }
body.theme-anime .gift-pill { background: #fff; border-color: #f0c8dc; color: #4a1a3a; }
body.theme-anime .verified-name {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation-name: glow-sakura;
  text-shadow: 0 1px 2px rgba(120,30,80,.65), 0 0 12px rgba(255,128,181,.85);
}
body.theme-anime .verified-badge {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255,128,181,.9)) drop-shadow(0 1px 1px rgba(120,30,80,.5));
}
@keyframes glow-sakura {
  from { text-shadow: 0 1px 2px rgba(120,30,80,.65), 0 0 8px rgba(255,128,181,.5); }
  to   { text-shadow: 0 1px 2px rgba(120,30,80,.65), 0 0 22px rgba(255,128,181,1); }
}

/* art — paint splash (light) */
body.theme-art {
  --bg:        #fdf6e8;
  --surface:   #ffffff;
  --surface-2: #fff3e0;
  --border:    #f0d8b8;
  --text:      #3a1f0a;
  --muted:     #8a6a4a;
  --accent:    #c2185b;
  --accent-2:  #ff6f4f;
  background: transparent;
}
body.theme-art .profile-head {
  background: linear-gradient(135deg, #c2185b, #ff6f4f 50%, #f59e0b);
  border: 1px solid #ff6f4f;
  color: #fff;
}
body.theme-art .profile-head .handle,
body.theme-art .profile-head h1 { color: #fff; text-shadow: 0 1px 2px rgba(80,30,10,.55); }
body.theme-art .profile-head::after {
  content: "🎨  🖌️  ✨  🎨  🖌️  ✨";
  display: block;
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: 6px;
}
body.theme-art .avatar { background: linear-gradient(135deg, #ff6f4f, #ffd54f); color: #4a1505; }
body.theme-art .gift-pill { background: #fff; border-color: #f0d8b8; color: #3a1f0a; }
body.theme-art .verified-name {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation-name: glow-coral;
  text-shadow: 0 1px 2px rgba(80,30,10,.6), 0 0 12px rgba(255,111,79,.85);
}
body.theme-art .verified-badge {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255,111,79,.9)) drop-shadow(0 1px 1px rgba(80,30,10,.5));
}
@keyframes glow-coral {
  from { text-shadow: 0 1px 2px rgba(80,30,10,.6), 0 0 8px rgba(255,111,79,.5); }
  to   { text-shadow: 0 1px 2px rgba(80,30,10,.6), 0 0 22px rgba(255,111,79,1); }
}

/* ========================= Admin area ========================= */
body.admin-body { background: #0a0c10; }
body.admin-body .topbar { background: #12141a; border-bottom-color: #2a2f3a; }
.admin-topbar .brand { color: #ffb547; }
.admin-topbar .brand span {
  background: linear-gradient(90deg, #ffb547, #ff7ab6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.admin-topbar .brand .brand-icon { color: #ffb547; -webkit-text-fill-color: #ffb547; }
.admin-topbar .brand::after { background: linear-gradient(90deg, #ffb547, #ff7ab6); }
.admin-who {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13px;
}
.admin-container { max-width: 960px; }

/* Login card */
.admin-login { max-width: 380px; margin: 60px auto; }
.admin-login h1 { text-align: center; margin-bottom: 18px; }

/* ========================= Admin users page ========================= */
.admin-toolbar { padding: 14px; }
.admin-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px 12px;
}
.admin-search:focus-within { border-color: var(--accent); }
.admin-search > i { color: var(--muted); font-size: 18px; }
.admin-search input[type=text] {
  border: 0; background: transparent; padding: 10px 0; flex: 1; outline: none;
}
.admin-search-clear {
  color: var(--muted); width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.admin-search-clear:hover { background: var(--border); color: var(--text); text-decoration: none; }
.admin-search button {
  padding: 8px 16px; font-size: 14px;
}

.admin-filters { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.admin-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 500;
}
.admin-filter:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.admin-filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-filter.is-active .admin-filter-count { background: rgba(255,255,255,.22); color: #fff; }
.admin-filter-count {
  background: var(--border); color: var(--text);
  padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  margin-inline-start: 4px;
}

.admin-user-list { padding: 4px; }
.admin-user-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-row:hover { background: var(--surface-2); }
.admin-user-row.is-me { background: rgba(124,92,255,.05); }

.admin-user-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #ff7ab6);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 18px; flex: 0 0 auto;
}
.admin-user-avatar:hover { text-decoration: none; }

.admin-user-info { min-width: 0; }
.admin-user-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-weight: 600; color: var(--text);
}
.admin-user-name a { color: inherit; }
.admin-user-sub {
  color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.tag-admin { background: rgba(255,181,71,.15); color: #ffb547; border: 1px solid rgba(255,181,71,.35); }
.tag-me    { background: rgba(124,92,255,.15); color: var(--accent); border: 1px solid rgba(124,92,255,.35); }

.admin-user-metrics { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.metric {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.metric i { font-size: 14px; color: var(--muted); }

.admin-user-actions { display: flex; gap: 4px; }
.inline-form { display: inline; margin: 0; }
.icon-btn {
  background: transparent; border: 1px solid var(--border);
  width: 34px; height: 34px; border-radius: 8px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.icon-btn i { font-size: 16px; }
.icon-btn.is-on { color: #1d9bf0; border-color: #1d9bf0; background: rgba(29,155,240,.08); }
.icon-btn.is-on-admin { color: #ffb547; border-color: #ffb547; background: rgba(255,181,71,.08); }
.icon-btn.is-banned { color: var(--danger); border-color: var(--danger); background: rgba(229,72,77,.08); }
.admin-user-row.is-banned { opacity: .6; }
.admin-user-row.is-banned:hover { opacity: 1; }

/* Status dot in the corner of an icon-btn — used on the users list to mark
   "has synced contacts" without taking row width for an extra badge. The
   host element needs position:relative which icon-btn doesn't set by
   default, hence the helper class. */
.admin-indicator-host { position: relative; }
.admin-indicator-dot {
  position: absolute;
  top: 4px; inset-inline-end: 4px;
  width: 9px; height: 9px;
  background: #3ac480;
  border: 2px solid var(--bg, #0f1115);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(58,196,128,.4);
}

/* Mobile: stack metrics below info, hide email */
@media (max-width: 720px) {
  .admin-user-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar info actions"
      "avatar metrics metrics";
    row-gap: 8px;
  }
  .admin-user-avatar   { grid-area: avatar; }
  .admin-user-info     { grid-area: info; }
  .admin-user-actions  { grid-area: actions; }
  .admin-user-metrics  { grid-area: metrics; justify-content: flex-start; }
  .admin-user-sub      { display: none; }
  .admin-filters       { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .admin-filter        { flex: 0 0 auto; }
}

/* ===== Landing page ===== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

.hero-animated {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 56px 20px;
  margin-bottom: 20px;
  text-align: center;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 300px at 110% 110%, rgba(255,122,182,.14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
}
.hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  animation: float 12s ease-in-out infinite;
}
.orb-1 { background: #7c5cff; top: -60px; inset-inline-start: -40px; }
.orb-2 { background: #ff7ab6; bottom: -80px; inset-inline-end: -20px; animation-duration: 14s; animation-delay: -4s; }
.orb-3 { background: #1d9bf0; top: 40%; inset-inline-end: 30%; width: 160px; height: 160px; opacity: .35; animation-duration: 16s; animation-delay: -7s; }
@keyframes float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-20px,0) scale(1.06); }
}

.hero-inner { position: relative; max-width: 640px; margin: 0 auto; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  /* Extra vertical padding + line-height so Sorani descenders (ێ, ڵ, ج, ...)
     don't clip against the rounded edge — the default `align-items: center`
     on the flex container otherwise crops them on the baseline. */
  padding: 8px 14px 10px; border-radius: 999px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.hero-animated h1 {
  font-size: 42px; line-height: 1.2; margin: 8px 0 10px;
  background: linear-gradient(90deg, #b9a8ff, #ff7ab6, #b9a8ff);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-animated p { color: var(--muted); font-size: 17px; max-width: 540px; margin: 10px auto 22px; }
.hero-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-ghost { background: var(--surface-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface); }

.teaser {
  position: relative;
  min-height: 140px;
  max-width: 620px;
  margin: 8px auto 28px;
  padding: 44px 56px 36px;
  text-align: center;
}
.teaser::before,
.teaser::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", "Noto Kufi Arabic", serif;
  font-style: italic;
  font-size: 110px;
  line-height: 0.8;
  color: rgba(124, 92, 255, .22);
  text-shadow: 0 4px 20px rgba(124, 92, 255, .18);
  pointer-events: none;
  user-select: none;
}
.teaser::before {
  content: "\201D";
  top: -6px;
  inset-inline-start: 6px;
}
.teaser::after {
  content: "\201C";
  bottom: -30px;
  inset-inline-end: 6px;
}
.teaser-line {
  position: absolute;
  inset: 44px 56px 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1.55;
  font-weight: 500; color: var(--text);
  letter-spacing: .01em;
  opacity: 0;
  animation: teaserCycle 45s infinite;
}
.teaser-line:nth-child(1) { animation-delay:  0s; }
.teaser-line:nth-child(2) { animation-delay:  5s; }
.teaser-line:nth-child(3) { animation-delay: 10s; }
.teaser-line:nth-child(4) { animation-delay: 15s; }
.teaser-line:nth-child(5) { animation-delay: 20s; }
.teaser-line:nth-child(6) { animation-delay: 25s; }
.teaser-line:nth-child(7) { animation-delay: 30s; }
.teaser-line:nth-child(8) { animation-delay: 35s; }
.teaser-line:nth-child(9) { animation-delay: 40s; }
@keyframes teaserCycle {
  0%        { opacity: 0; transform: translateY(12px); }
  2%, 9%    { opacity: 1; transform: translateY(0); }
  11%, 100% { opacity: 0; transform: translateY(-12px); }
}

.cta-card {
  text-align: center;
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(124,92,255,.15), transparent 60%),
    var(--surface);
}
.cta-card h2 { font-size: 22px; }

@media (max-width: 640px) {
  .hero-animated    { padding: 42px 18px; border-radius: 16px; }
  .hero-animated h1 { font-size: 30px; }
  .teaser           { padding: 36px 36px 28px; min-height: 130px; }
  .teaser-line      { inset: 36px 36px 28px; font-size: 17px; }
  .teaser::before, .teaser::after { font-size: 80px; }
  .teaser::after    { bottom: -22px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .orb, .hero-animated h1, .teaser-line { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .teaser-line { position: static; opacity: 0; }
  .teaser-line:first-child { opacity: 1; transform: none; }
}

/* ----------------- App store download badges ----------------- */
.app-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}
.app-stores-label {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  min-width: 170px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  /* Latin store names always read LTR even on RTL pages. */
  direction: ltr;
}
.store-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(124,92,255,.45);
  box-shadow: 0 12px 26px -16px rgba(124,92,255,.7);
  text-decoration: none;
}
.store-badge svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge-cap  { font-size: 10px; opacity: .8; letter-spacing: .4px; text-transform: uppercase; }
.store-badge-name { font-size: 17px; font-weight: 600; letter-spacing: .2px; }

/* Google Play colored triangle slices */
.store-google .gp-1 { fill: #ea4335; }
.store-google .gp-2 { fill: #fbbc04; }
.store-google .gp-3 { fill: #34a853; }
.store-google .gp-4 { fill: #4285f4; }

/* ----------------- Site footer ----------------- */
.site-footer {
  margin-top: 48px;
  padding: 28px 22px 36px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}
.site-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
}
.site-footer-links a { color: var(--muted); }
.site-footer-links a:hover { color: var(--text); }
.site-footer .app-stores { margin-top: 4px; }
.site-footer .store-badge { padding: 8px 14px; min-width: 0; }
.site-footer .store-badge svg { width: 22px; height: 22px; }
.site-footer .store-badge-cap  { font-size: 9px; }
.site-footer .store-badge-name { font-size: 14px; }
.site-footer-copy { font-size: 12px; opacity: .8; }

/* ============================================================================
   IMAGE PROFILE THEMES (v1.2.3) — web parity with the mobile app.
   The scene art is portrait, so:
     • Phones & tablets (<=1024px): show the full-screen scene image.
     • Desktop / laptop (>1024px): NO image — just the theme's colours, fonts
       and buttons (a portrait photo looks wrong on a wide screen).
   Palettes are translucent so cards let the scene show through on mobile.
   This block is intentionally LAST so it overrides the older gradient blocks
   for the themes that became image scenes (galaxy, ocean, hellokitty, …).
   ============================================================================ */

/* ---- 1) Palettes (apply at every screen size) ---- */
body.theme-midnight     { --bg:#08101c; --surface:rgba(16,31,51,.92);  --surface-2:rgba(21,40,68,.92);  --border:#2a4663; --text:#f1e8d6; --muted:#a9b6c9; --accent:#ffb23e; --accent-2:#e0921f; background:transparent; }
body.theme-kurdistan    { --bg:#120c04; --surface:rgba(32,22,8,.92);   --surface-2:rgba(48,34,16,.92);  --border:#5a4220; --text:#f5e8d0; --muted:#c8b088; --accent:#f5c518; --accent-2:#caa010; background:transparent; }
body.theme-peshmerga    { --bg:#160e04; --surface:rgba(36,26,8,.92);   --surface-2:rgba(52,38,18,.92);  --border:#5a4420; --text:#f8ecce; --muted:#cab488; --accent:#f5b82a; --accent-2:#d09a18; background:transparent; }
body.theme-redjamana    { --bg:#180806; --surface:rgba(38,14,10,.92);  --surface-2:rgba(58,22,16,.92);  --border:#5a2a20; --text:#fce6dc; --muted:#c8a098; --accent:#e5453a; --accent-2:#c22a20; background:transparent; }
body.theme-greenjamana  { --bg:#0a1c0a; --surface:rgba(18,48,16,.92);  --surface-2:rgba(28,68,32,.92);  --border:#2c5a30; --text:#eaf5e0; --muted:#a8c8a0; --accent:#3fa050; --accent-2:#2c7a3c; background:transparent; }
body.theme-atlantis     { --bg:#03161f; --surface:rgba(6,42,58,.92);   --surface-2:rgba(10,61,78,.92);  --border:#12546a; --text:#d6f7f5; --muted:#8fc4cc; --accent:#2bd4c8; --accent-2:#1aa89e; background:transparent; }
body.theme-frost        { --bg:#071426; --surface:rgba(11,32,54,.92);  --surface-2:rgba(18,58,82,.92);  --border:#1e5070; --text:#e6f4ff; --muted:#9dbdd4; --accent:#8fe3ff; --accent-2:#5ab8e0; background:transparent; }
body.theme-japan        { --bg:#160812; --surface:rgba(34,16,26,.92);  --surface-2:rgba(58,22,38,.92);  --border:#5a2436; --text:#ffe6d6; --muted:#c79aa0; --accent:#ff8a4a; --accent-2:#e06a30; background:transparent; }
body.theme-car          { --bg:#0e0604; --surface:rgba(26,12,10,.92);  --surface-2:rgba(42,20,16,.92);  --border:#5a2a1c; --text:#ffe0d4; --muted:#c8a090; --accent:#ff4530; --accent-2:#c22a18; background:transparent; }
body.theme-coffee       { --bg:#0e0804; --surface:rgba(30,18,8,.92);   --surface-2:rgba(46,30,16,.92);  --border:#5a3e24; --text:#f5e6d0; --muted:#c8ac8c; --accent:#e8a24a; --accent-2:#c8822a; background:transparent; }
body.theme-gym          { --bg:#0c0a0c; --surface:rgba(22,18,20,.92);  --surface-2:rgba(38,22,24,.92);  --border:#4a2a2a; --text:#f0e0dc; --muted:#b09690; --accent:#e5392e; --accent-2:#c2261c; background:transparent; }
body.theme-cinema       { --bg:#0e0804; --surface:rgba(26,16,10,.92);  --surface-2:rgba(42,24,16,.92);  --border:#5a3220; --text:#f5e6d8; --muted:#c8ac94; --accent:#e5453a; --accent-2:#c2261c; background:transparent; }
body.theme-cottoncandy  { --bg:#1a0614; --surface:rgba(42,12,34,.92);  --surface-2:rgba(62,18,52,.92);  --border:#6a2452; --text:#ffe0f0; --muted:#d8a8c8; --accent:#ff5aa8; --accent-2:#e52888; background:transparent; }
body.theme-strawberries { --bg:#140806; --surface:rgba(32,16,16,.92);  --surface-2:rgba(50,22,24,.92);  --border:#5a2a28; --text:#fce4dc; --muted:#c8a098; --accent:#e5455a; --accent-2:#c21830; background:transparent; }
body.theme-hellokitty   { --bg:#ffeaf3; --surface:rgba(255,240,247,.9); --surface-2:rgba(255,221,236,.9); --border:#ffb6d2; --text:#4a1a2d; --muted:#9a5a76; --accent:#ff4d94; --accent-2:#e0347a; background:transparent; }
body.theme-skulls       { --bg:#0e0402; --surface:rgba(25,10,6,.92);   --surface-2:rgba(42,14,8,.92);   --border:#5a2410; --text:#ffe0d0; --muted:#c89684; --accent:#ff5a1e; --accent-2:#e5401a; background:transparent; }
body.theme-galaxy       { --bg:#0a0820; --surface:rgba(22,15,51,.92);  --surface-2:rgba(31,24,69,.92);  --border:#3a2c6a; --text:#e0d8ff; --muted:#a9a0d8; --accent:#b794f4; --accent-2:#8a5cff; background:transparent; }
body.theme-ocean        { --bg:#03202c; --surface:rgba(7,50,64,.92);   --surface-2:rgba(10,74,86,.92);  --border:#105e72; --text:#e8f6f0; --muted:#9cc8cc; --accent:#4dd0e1; --accent-2:#1aa0b0; background:transparent; }
body.theme-forest       { --bg:#081c10; --surface:rgba(15,42,26,.92);  --surface-2:rgba(24,64,40,.92);  --border:#2c5a38; --text:#e6f5e0; --muted:#a8c8ac; --accent:#8fe08a; --accent-2:#3fa050; background:transparent; }
body.theme-gamer        { --bg:#08081a; --surface:rgba(18,10,46,.92);  --surface-2:rgba(28,21,66,.92);  --border:#3a2a6a; --text:#e8eaff; --muted:#9a9cc0; --accent:#00ffea; --accent-2:#00c8b8; background:transparent; }
body.theme-music        { --bg:#120524; --surface:rgba(28,15,56,.92);  --surface-2:rgba(42,22,82,.92);  --border:#45286f; --text:#f5e0ff; --muted:#c0a8dc; --accent:#c678ff; --accent-2:#a040e0; background:transparent; }
body.theme-anime        { --bg:#160a20; --surface:rgba(32,16,48,.92);  --surface-2:rgba(50,24,72,.92);  --border:#4a2a5a; --text:#ffe6e0; --muted:#c8a8c0; --accent:#ff8ab0; --accent-2:#e05e8a; background:transparent; }
body.theme-art          { --bg:#120a22; --surface:rgba(32,20,51,.92);  --surface-2:rgba(46,28,68,.92);  --border:#4a3060; --text:#fdebd6; --muted:#c8b0c0; --accent:#ffb347; --accent-2:#e0902a; background:transparent; }

/* ---- 2) Desktop / laptop backdrop = solid theme colour (no portrait image) ---- */
html:has(body.theme-midnight),
html:has(body.theme-kurdistan),
html:has(body.theme-peshmerga),
html:has(body.theme-redjamana),
html:has(body.theme-greenjamana),
html:has(body.theme-atlantis),
html:has(body.theme-frost),
html:has(body.theme-japan),
html:has(body.theme-car),
html:has(body.theme-coffee),
html:has(body.theme-gym),
html:has(body.theme-cinema),
html:has(body.theme-cottoncandy),
html:has(body.theme-strawberries),
html:has(body.theme-hellokitty),
html:has(body.theme-skulls),
html:has(body.theme-galaxy),
html:has(body.theme-ocean),
html:has(body.theme-forest),
html:has(body.theme-gamer),
html:has(body.theme-music),
html:has(body.theme-anime),
html:has(body.theme-art) { background: var(--bg); }

/* ---- 3) No emoji wallpaper for image themes (desktop shows only colours) ---- */
body.theme-midnight::before, body.theme-kurdistan::before, body.theme-peshmerga::before,
body.theme-redjamana::before, body.theme-greenjamana::before, body.theme-atlantis::before,
body.theme-frost::before, body.theme-japan::before, body.theme-car::before,
body.theme-coffee::before, body.theme-gym::before, body.theme-cinema::before,
body.theme-cottoncandy::before, body.theme-strawberries::before, body.theme-hellokitty::before,
body.theme-skulls::before, body.theme-galaxy::before, body.theme-ocean::before,
body.theme-forest::before, body.theme-gamer::before, body.theme-music::before,
body.theme-anime::before, body.theme-art::before { content: none; }

/* ---- 4) Phones & tablets: full-screen scene image via the fixed ::before
          layer (avoids iOS background-attachment:fixed bugs). ---- */
@media (max-width: 1024px) {
  body.theme-midnight::before, body.theme-kurdistan::before, body.theme-peshmerga::before,
  body.theme-redjamana::before, body.theme-greenjamana::before, body.theme-atlantis::before,
  body.theme-frost::before, body.theme-japan::before, body.theme-car::before,
  body.theme-coffee::before, body.theme-gym::before, body.theme-cinema::before,
  body.theme-cottoncandy::before, body.theme-strawberries::before, body.theme-hellokitty::before,
  body.theme-skulls::before, body.theme-galaxy::before, body.theme-ocean::before,
  body.theme-forest::before, body.theme-gamer::before, body.theme-music::before,
  body.theme-anime::before, body.theme-art::before {
    content: "";
    filter: none;
    opacity: 1;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }
  body.theme-midnight::before     { background-image: url('themes/skeleton_moon.jpg'); }
  body.theme-kurdistan::before    { background-image: url('themes/kurdistan.jpg'); }
  body.theme-peshmerga::before    { background-image: url('themes/peshmerga.jpg'); }
  body.theme-redjamana::before    { background-image: url('themes/redjamana.jpg'); }
  body.theme-greenjamana::before  { background-image: url('themes/greenjamana.jpg'); }
  body.theme-atlantis::before     { background-image: url('themes/atlantis.jpg'); }
  body.theme-frost::before        { background-image: url('themes/frost.jpg'); }
  body.theme-japan::before        { background-image: url('themes/japan.jpg'); }
  body.theme-car::before          { background-image: url('themes/car.jpg'); }
  body.theme-coffee::before       { background-image: url('themes/coffee.jpg'); }
  body.theme-gym::before          { background-image: url('themes/gym.jpg'); }
  body.theme-cinema::before       { background-image: url('themes/cinema.jpg'); }
  body.theme-cottoncandy::before  { background-image: url('themes/cottoncandy.jpg'); }
  body.theme-strawberries::before { background-image: url('themes/strawberries.jpg'); }
  body.theme-hellokitty::before   { background-image: url('themes/hellokitty.jpg'); }
  body.theme-skulls::before       { background-image: url('themes/hell.jpg'); }
  body.theme-galaxy::before       { background-image: url('themes/galaxy.jpg'); }
  body.theme-ocean::before        { background-image: url('themes/ocean.jpg'); }
  body.theme-forest::before       { background-image: url('themes/forest.jpg'); }
  body.theme-gamer::before        { background-image: url('themes/gamer.jpg'); }
  body.theme-music::before        { background-image: url('themes/music.jpg'); }
  body.theme-anime::before        { background-image: url('themes/anime.jpg'); }
  body.theme-art::before          { background-image: url('themes/art.jpg'); }
}

/* ---- 5) Settings chooser swatches: show the scene art as the tile ---- */
.sw-midnight .swatch-preview, .sw-kurdistan .swatch-preview, .sw-peshmerga .swatch-preview,
.sw-redjamana .swatch-preview, .sw-greenjamana .swatch-preview, .sw-atlantis .swatch-preview,
.sw-frost .swatch-preview, .sw-japan .swatch-preview, .sw-car .swatch-preview,
.sw-coffee .swatch-preview, .sw-gym .swatch-preview, .sw-cinema .swatch-preview,
.sw-cottoncandy .swatch-preview, .sw-strawberries .swatch-preview, .sw-hellokitty .swatch-preview,
.sw-skulls .swatch-preview, .sw-galaxy .swatch-preview, .sw-ocean .swatch-preview,
.sw-forest .swatch-preview, .sw-gamer .swatch-preview, .sw-music .swatch-preview,
.sw-anime .swatch-preview, .sw-art .swatch-preview {
  background-size: cover;
  background-position: center top;
  color: #fff;
}
.sw-midnight .swatch-bg, .sw-kurdistan .swatch-bg, .sw-peshmerga .swatch-bg,
.sw-redjamana .swatch-bg, .sw-greenjamana .swatch-bg, .sw-atlantis .swatch-bg,
.sw-frost .swatch-bg, .sw-japan .swatch-bg, .sw-car .swatch-bg,
.sw-coffee .swatch-bg, .sw-gym .swatch-bg, .sw-cinema .swatch-bg,
.sw-cottoncandy .swatch-bg, .sw-strawberries .swatch-bg, .sw-hellokitty .swatch-bg,
.sw-skulls .swatch-bg, .sw-galaxy .swatch-bg, .sw-ocean .swatch-bg,
.sw-forest .swatch-bg, .sw-gamer .swatch-bg, .sw-music .swatch-bg,
.sw-anime .swatch-bg, .sw-art .swatch-bg { display: none; }
.sw-midnight .swatch-name-text, .sw-kurdistan .swatch-name-text, .sw-peshmerga .swatch-name-text,
.sw-redjamana .swatch-name-text, .sw-greenjamana .swatch-name-text, .sw-atlantis .swatch-name-text,
.sw-frost .swatch-name-text, .sw-japan .swatch-name-text, .sw-car .swatch-name-text,
.sw-coffee .swatch-name-text, .sw-gym .swatch-name-text, .sw-cinema .swatch-name-text,
.sw-cottoncandy .swatch-name-text, .sw-strawberries .swatch-name-text, .sw-hellokitty .swatch-name-text,
.sw-skulls .swatch-name-text, .sw-galaxy .swatch-name-text, .sw-ocean .swatch-name-text,
.sw-forest .swatch-name-text, .sw-gamer .swatch-name-text, .sw-music .swatch-name-text,
.sw-anime .swatch-name-text, .sw-art .swatch-name-text { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

.sw-midnight .swatch-preview     { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/skeleton_moon.jpg'); }
.sw-kurdistan .swatch-preview    { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/kurdistan.jpg'); }
.sw-peshmerga .swatch-preview    { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/peshmerga.jpg'); }
.sw-redjamana .swatch-preview    { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/redjamana.jpg'); }
.sw-greenjamana .swatch-preview  { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/greenjamana.jpg'); }
.sw-atlantis .swatch-preview     { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/atlantis.jpg'); }
.sw-frost .swatch-preview        { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/frost.jpg'); }
.sw-japan .swatch-preview        { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/japan.jpg'); }
.sw-car .swatch-preview          { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/car.jpg'); }
.sw-coffee .swatch-preview       { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/coffee.jpg'); }
.sw-gym .swatch-preview          { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/gym.jpg'); }
.sw-cinema .swatch-preview       { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/cinema.jpg'); }
.sw-cottoncandy .swatch-preview  { background-image: linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.45)), url('themes/thumb/cottoncandy.jpg'); }
.sw-strawberries .swatch-preview { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/strawberries.jpg'); }
.sw-hellokitty .swatch-preview   { background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.35)), url('themes/thumb/hellokitty.jpg'); }
.sw-skulls .swatch-preview       { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/hell.jpg'); }
.sw-galaxy .swatch-preview       { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/galaxy.jpg'); }
.sw-ocean .swatch-preview        { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/ocean.jpg'); }
.sw-forest .swatch-preview       { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/forest.jpg'); }
.sw-gamer .swatch-preview        { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/gamer.jpg'); }
.sw-music .swatch-preview        { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/music.jpg'); }
.sw-anime .swatch-preview        { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/anime.jpg'); }
.sw-art .swatch-preview          { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/art.jpg'); }

/* ---- Qi Card destination account (top-up / verify forms) ---- */
.pay-account {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-account-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.pay-account-logo { width: 22px; height: 22px; border-radius: 5px; }
.pay-account-num {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.pay-account-num:hover { background: var(--surface-2); }
.pay-account-num code {
  font-size: 22px; font-weight: 800; letter-spacing: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
}
.pay-account-num i { font-size: 18px; color: var(--muted); }
.pay-account-num.copied { border-color: var(--success, #2ecc71); }
.pay-account-num.copied i { color: var(--success, #2ecc71); }
.pay-account-note { font-size: 12px; color: var(--muted); }

/* ---- Football club themes (Nawroz / Zakho / Duhok / Erbil) ---- */
body.theme-nawrozfc { --bg:#160604; --surface:rgba(38,12,10,.92); --surface-2:rgba(58,20,16,.92); --border:#5a2418; --text:#ffe6dc; --muted:#c8a098; --accent:#e83a2a; --accent-2:#c22a18; background:transparent; }
body.theme-zakhosc  { --bg:#160606; --surface:rgba(40,12,12,.92); --surface-2:rgba(60,20,20,.92); --border:#5a2222; --text:#ffe6e0; --muted:#c8a0a0; --accent:#e83a2a; --accent-2:#c22020; background:transparent; }
body.theme-duhoksc  { --bg:#060e1c; --surface:rgba(12,28,56,.92); --surface-2:rgba(20,48,82,.92); --border:#24467a; --text:#f0e8d0; --muted:#a8b8d0; --accent:#f5c518; --accent-2:#caa010; background:transparent; }
body.theme-erbilsc  { --bg:#0e0c04; --surface:rgba(28,22,8,.92);  --surface-2:rgba(44,34,16,.92); --border:#5a4620; --text:#f8ecce; --muted:#cab488; --accent:#f5b82a; --accent-2:#d09a18; background:transparent; }

html:has(body.theme-nawrozfc), html:has(body.theme-zakhosc),
html:has(body.theme-duhoksc), html:has(body.theme-erbilsc) { background: var(--bg); }

body.theme-nawrozfc::before, body.theme-zakhosc::before,
body.theme-duhoksc::before, body.theme-erbilsc::before { content: none; }

@media (max-width: 1024px) {
  body.theme-nawrozfc::before, body.theme-zakhosc::before,
  body.theme-duhoksc::before, body.theme-erbilsc::before {
    content: ""; filter: none; opacity: 1;
    background-position: center top; background-size: cover; background-repeat: no-repeat;
  }
  body.theme-nawrozfc::before { background-image: url('themes/nawrozfc.jpg'); }
  body.theme-zakhosc::before  { background-image: url('themes/zakhosc.jpg'); }
  body.theme-duhoksc::before  { background-image: url('themes/duhoksc.jpg'); }
  body.theme-erbilsc::before  { background-image: url('themes/erbilsc.jpg'); }
}

.sw-nawrozfc .swatch-preview, .sw-zakhosc .swatch-preview,
.sw-duhoksc .swatch-preview, .sw-erbilsc .swatch-preview {
  background-size: cover; background-position: center top; color: #fff;
}
.sw-nawrozfc .swatch-bg, .sw-zakhosc .swatch-bg,
.sw-duhoksc .swatch-bg, .sw-erbilsc .swatch-bg { display: none; }
.sw-nawrozfc .swatch-name-text, .sw-zakhosc .swatch-name-text,
.sw-duhoksc .swatch-name-text, .sw-erbilsc .swatch-name-text { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.sw-nawrozfc .swatch-preview { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/nawrozfc.jpg'); }
.sw-zakhosc .swatch-preview  { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/zakhosc.jpg'); }
.sw-duhoksc .swatch-preview  { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/duhoksc.jpg'); }
.sw-erbilsc .swatch-preview  { background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.5)), url('themes/thumb/erbilsc.jpg'); }