#auth-slot { display: inline-flex; align-items: center; margin-left: 6px; }
/* Avatar-only auth control (both signed-in and guest). */
.auth-chip {
  display: inline-grid; place-items: center; padding: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; line-height: 0;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.2s var(--ease);
}
.auth-chip .avatar { width: 34px; height: 34px; }
.auth-chip:hover { box-shadow: 0 0 0 2px var(--accent); }
.auth-guest .avatar-fallback { background: var(--surface-3); color: #8b8ba3; }

.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-3); flex-shrink: 0; }
.avatar-fallback { display: grid; place-items: center; color: var(--muted); }
.avatar-fallback svg { width: 60%; height: 60%; }

.auth-wrap { min-height: 60vh; display: grid; place-items: center; padding: 20px 0; }
.auth-card {
  width: min(94vw, 380px); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-lg); text-align: center;
  animation: pop 0.25s var(--ease);
}
/* The brand mark stands on its own here too — no tile behind it. */
.auth-logo {
  width: 62px; height: 62px; margin: 0 auto 14px; display: grid; place-items: center;
  filter: drop-shadow(0 6px 18px rgba(139, 92, 246, 0.42));
}
.auth-logo svg { width: 62px; height: 62px; display: block; }
/* …except for the outline icons (the 2FA shield), which need one to be legible. */
.auth-logo.auth-logo-plate {
  width: 54px; height: 54px; border-radius: var(--radius);
  background: var(--accent-grad); color: #fff; filter: none;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}
.auth-logo.auth-logo-plate svg { width: 28px; height: 28px; }
.auth-card h1 { margin: 0 0 4px; font-size: 24px; }
.auth-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.field {
  width: 100%; height: 48px; padding: 0 16px; margin-bottom: 12px;
  background: rgba(9,9,15,0.6); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 15px; outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field:hover { border-color: var(--border); background: rgba(9,9,15,0.75); }
.field:focus { border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 4px var(--accent-soft); }
.btn.block { width: 100%; margin-top: 4px; }
.form-err { color: #f87171; font-size: 13.5px; min-height: 1.2em; margin-top: 8px; }
.auth-switch { margin-top: 18px; color: var(--muted); font-size: 14px; }
.auth-switch a { color: var(--accent); font-weight: 600; }


/* Full-width profile with a two-column editor grid (single column on mobile). */
.profile { max-width: none; margin: 0 auto; animation: sectionIn 0.4s var(--ease) both; }
.profile-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.profile-col { min-width: 0; display: flex; flex-direction: column; }
.profile-hero-actions { display: flex; gap: 10px; align-items: center; align-self: flex-end; padding-bottom: 10px; margin-left: auto; }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-identity { flex-wrap: wrap; margin: -44px 4px 0 8px; gap: 12px; }
  .profile-identity .avatar { width: 92px; height: 92px; }
  .profile-hero-actions { margin-left: 0; width: 100%; padding-bottom: 0; }
  .profile-hero-actions .btn { flex: 1; }
}

/* Phones: stack the identity centered BELOW the banner so the banner stays
   fully visible (only the avatar overlaps its bottom-centre). */
@media (max-width: 600px) {
  /* Taller banner so it stays clearly visible on phones (some banners barely showed). */
  .profile-banner { height: clamp(190px, 48vw, 250px); }
  .profile-identity {
    flex-direction: column; align-items: center; text-align: center;
    margin: -48px 0 0; gap: 10px;
  }
  .profile-id-text { width: 100%; padding-bottom: 0; }
  .profile-name, .profile-handle, .profile-stats { justify-content: center; }
  .profile-bio { border-left: 0; padding-left: 0; text-align: center; max-width: none; margin: 6px auto 0; }
  .profile-hero-actions { justify-content: center; }
}

/* Hero: banner + overlapping avatar + identity */
/* Classic overlap hero: rounded banner, avatar + name resting on its bottom edge. */
.profile-hero { margin-bottom: 26px; }
.profile-banner {
  position: relative; height: clamp(160px, 28vw, 250px); border-radius: var(--radius-lg);
  background-size: cover; background-position: center; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.profile-banner.empty { background: linear-gradient(120deg, #241b3a, #3a1830 60%, #1a1730); }
/* Bottom fade for name legibility + a faint top sheen for depth. */
.profile-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 22%, transparent 55%, rgba(11,11,18,0.58)); }
.profile-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); pointer-events: none; }
.banner-edit {
  position: absolute; z-index: 2; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600;
}
.banner-edit:hover { background: var(--accent); }
.banner-edit svg { width: 15px; height: 15px; }

/* Identity row overlapping the banner bottom (the classic look). The avatar is
   anchored to the top so a long bio grows downward and never shifts it. */
.profile-identity {
  display: flex; align-items: flex-start; gap: 18px;
  position: relative; z-index: 2;
  margin: -34px 4px 0 12px;
}
.profile-avatar { position: relative; border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.profile-identity > .avatar, .profile-avatar .avatar { width: 112px; height: 112px; border: 4px solid var(--bg); box-shadow: var(--shadow); }
.profile-avatar:hover .avatar { border-color: var(--accent); }
.avatar-edit {
  position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; border: 3px solid var(--bg);
}
.avatar-edit svg { width: 16px; height: 16px; color: #fff; }
.profile-id-text { flex: 1; min-width: 0; padding-bottom: 4px; }
.profile-name { margin: 0 0 5px; font-size: clamp(23px, 4vw, 30px); font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.profile-handle { color: var(--muted); font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.profile-country { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 500; }
.profile-bio { color: #d3d4e0; font-size: 15px; line-height: 1.6; margin: 4px 0 12px; padding-left: 12px; border-left: 3px solid var(--accent); white-space: pre-wrap; word-break: break-word; max-width: 560px; }

/* Public profile: back link + favorite showcase */
.profile-public { max-width: 1100px; }
.profile-back {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px;
  padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border-soft); transition: 0.15s;
}
.profile-back:hover { color: var(--text); border-color: var(--accent); transform: translateX(-2px); }
.profile-back svg { width: 18px; height: 18px; }

.fav-showcase {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 18px; margin-bottom: 22px; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
  background: var(--surface); transition: transform 0.25s var(--ease), border-color 0.2s, box-shadow 0.25s;
  animation: sectionIn 0.45s var(--ease) both;
}
.fav-showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--fav-bg) center/cover; filter: blur(30px) saturate(1.4); opacity: 0.28; transform: scale(1.3);
}
.fav-showcase::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--surface) 30%, rgba(22,22,31,0.6)); }
.fav-showcase:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
.fav-showcase-cover { position: relative; z-index: 1; width: 74px; height: 106px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow); }
.fav-showcase-cover img { width: 100%; height: 100%; object-fit: cover; }
.fav-showcase-body { position: relative; z-index: 1; min-width: 0; }
.fav-showcase-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #f472b6; }
.fav-showcase-label svg { width: 15px; height: 15px; }
.fav-showcase-title { font-size: clamp(18px, 3vw, 23px); font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Real flag images (used everywhere instead of emoji flags) */
.flag { width: 21px; height: 15px; border-radius: 3px; object-fit: cover; vertical-align: -3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); display: inline-block; }
.profile-country .flag { width: 24px; height: 17px; vertical-align: -1px; }
.inline-flag .flag { width: 16px; height: 12px; }
.member-chip-name .flag { width: 16px; height: 12px; }
.profile-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.profile-stats span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.profile-stats b {
  font-size: 14.5px; font-weight: 800;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Life: rotating gradient ring around the profile avatar */
.avatar-ring, .profile-avatar { position: relative; display: inline-flex; border-radius: 50%; padding: 4px; flex-shrink: 0; isolation: isolate; }
.avatar-ring::before, .profile-avatar::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: conic-gradient(#7c3aed, #db2777, #f59e0b, #db2777, #7c3aed);
  animation: spin 9s linear infinite;
}
.avatar-ring > .avatar, .profile-avatar .avatar { border: 4px solid var(--bg); }

/* Rank badges */
.rank-badge {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4;
}
.rank-badge.owner { position: relative; overflow: hidden; background: linear-gradient(100deg, #f59e0b, #ef4444); color: #fff; box-shadow: 0 3px 12px rgba(239,68,68,0.4); }
/* Life: shine sweeps across the Owner badge */
.rank-badge.owner::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  animation: badgeShine 3.4s ease-in-out infinite;
}
@keyframes badgeShine { 55%, 100% { transform: translateX(110%); } }
.rank-badge.manager { background: var(--accent-soft); color: #d9c9ff; border: 1px solid var(--accent); }
.member-name .rank-badge, .member-chip .rank-badge { font-size: 10px; padding: 2px 8px; }

/* 18+ age-verified badge (profile name row) */
.badge-18 {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.4;
  background: linear-gradient(100deg, #db2777, #7f1d1d); color: #fff;
  box-shadow: 0 3px 12px rgba(219,39,119,0.35);
}
.member-name .badge-18 { font-size: 10px; padding: 2px 7px; }
.age-verified { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #f9a8d4; margin-bottom: 8px; }

/* 18+ gate shown instead of a locked adult series */
.age-gate {
  max-width: 460px; margin: 48px auto; text-align: center;
  background: linear-gradient(180deg, rgba(30,30,43,0.6), rgba(18,18,28,0.6));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 40px 28px;
  animation: sectionIn 0.4s var(--ease) both;
}
.age-gate-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%; margin-bottom: 18px;
  font-size: 22px; font-weight: 900; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(135deg, #db2777, #7f1d1d); box-shadow: 0 8px 26px rgba(219,39,119,0.4);
}
.age-gate h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.age-gate-name { font-weight: 700; color: var(--text); margin: 0 0 10px; }
.age-gate-desc { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.age-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.field-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); margin: 4px 0 6px; }
.select { cursor: pointer; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9ab4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

/* Favorite */
.fav-card { display: inline-flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border-soft); transition: 0.2s var(--ease); }
.fav-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fav-cover { width: 56px; height: 80px; border-radius: var(--radius-xs); overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.fav-cover img { width: 100%; height: 100%; object-fit: cover; }
.fav-title { font-weight: 700; font-size: 15px; }
.settings-card .fav-card { margin-bottom: 12px; }

.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; padding: 8px 0; }
.fav-pick { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; }
.fav-pick .fav-cover { width: 100%; height: auto; aspect-ratio: 2/3; margin-bottom: 6px; border: 2px solid transparent; transition: 0.15s; }
.fav-pick:hover .fav-cover { border-color: var(--accent); transform: translateY(-3px); }
.fav-pick-title { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Banner picker */
.modal-scroll { flex: 1; overflow-y: auto; padding: 8px 22px 24px; }
/* Search bar on avatar/banner pickers — fixed between the head and the scroll grid */
.picker-search { flex-shrink: 0; padding: 12px 22px; border-bottom: 1px solid var(--border-soft); }
.picker-search .field { margin-bottom: 0; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.banner-pick {
  position: relative; height: 84px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background-size: cover; background-position: center;
  display: flex; align-items: flex-end; transition: 0.15s;
}
.banner-pick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%); }
.banner-pick:hover { border-color: var(--accent); transform: translateY(-2px); }
.banner-pick-title { position: relative; z-index: 1; padding: 8px 10px; font-size: 12px; font-weight: 600; color: #fff; }

.settings-card {
  position: relative;
  background: linear-gradient(180deg, rgba(30,30,43,0.55), rgba(18,18,28,0.55));
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 16px;
  transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
  animation: sectionIn 0.45s var(--ease) both;
}
/* Thin gradient accent line, inset so it stays inside the rounded corners
   (no overflow:hidden on the card — that would clip the country dropdown). */
.settings-card::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.5; transition: opacity 0.25s;
}
.settings-card:hover { border-color: rgba(139,92,246,0.35); box-shadow: 0 14px 40px rgba(0,0,0,0.35); transform: translateY(-2px); }
.settings-card:hover::before { opacity: 1; }
/* While the country dropdown is open, lift its card above the sibling cards —
   they each build a stacking context (backdrop-filter) and would paint over it. */
.settings-card:has(.cselect-panel:not([hidden])) { z-index: 20; }
.profile-col .settings-card:nth-child(1) { animation-delay: 0.04s; }
.profile-col .settings-card:nth-child(2) { animation-delay: 0.1s; }
.profile-col .settings-card:nth-child(3) { animation-delay: 0.16s; }
.settings-card-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 700; margin-bottom: 16px;
}
.sct-ic {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(219,39,119,0.28));
  color: #e9d5ff; border: 1px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 4px 12px rgba(124,58,237,0.2);
}
.sct-ic svg { width: 16px; height: 16px; }
.field-row { display: flex; gap: 10px; align-items: center; }
.field-row .field { margin-bottom: 0; }
.field-row .btn { flex-shrink: 0; }
.inline-msg { font-size: 13px; }
.inline-msg.ok { color: #6ee7b7; }
.inline-msg.err { color: #f87171; }
.profile-actions { margin-top: 6px; }
.btn-danger { background: rgba(220,38,38,0.12); border-color: #7f1d1d; color: #fca5a5; }
.btn-danger:hover { background: rgba(220,38,38,0.22); }

.modal-overlay {
  position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px; animation: fadein 0.2s var(--ease);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(96vw, 760px); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: pop 0.25s var(--ease);
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 22px; line-height: 1; transition: 0.15s; }
.modal-close:hover { background: var(--accent); color: #fff; }

.avatar-tabs { flex-shrink: 0; display: flex; gap: 8px; padding: 14px 22px 12px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); }
.avatar-tab {
  flex-shrink: 0; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: 0.15s;
}
.avatar-tab:hover { color: var(--text); border-color: var(--accent); }
.avatar-tab.active { background: var(--accent-soft); color: #fff; border-color: var(--accent); }

.avatar-body { flex: 1; overflow-y: auto; padding: 8px 22px 26px; }
.avatar-group { margin-top: 20px; }
.avatar-group-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; margin-bottom: 12px;
}
.avatar-group-title .dot { width: 6px; height: 17px; border-radius: 4px; background: var(--accent-grad); }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 8px; }

.avatar-pick {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; padding: 4px 2px; background: none; cursor: pointer; border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.avatar-pick:hover { background: var(--surface-2); }
.avatar-pick-img {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--border); background: var(--surface-3);
  transition: border-color 0.15s, transform 0.2s var(--ease);
}
.avatar-pick:hover .avatar-pick-img { border-color: var(--accent); transform: scale(1.06); }
.avatar-pick-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.avatar-pick-name {
  font-size: 11.5px; line-height: 1.25; color: var(--muted); text-align: center;
  max-width: 92px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.avatar-pick:hover .avatar-pick-name { color: var(--text); }

.badge {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle;
}
.badge.ok { background: rgba(16,185,129,0.14); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.35); }
.badge.warn { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.35); }

.notice { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 14px; line-height: 1.5; }
.notice.warn { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: #fcd34d; }
.notice.ok { background: rgba(16,185,129,0.09); border: 1px solid rgba(16,185,129,0.28); color: #6ee7b7; }

.settings-card.highlight { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.card-desc { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.settings-card .field { margin-bottom: 12px; }

.btn-ghost { background: none; border-color: var(--border); color: var(--muted); margin-top: 10px; }
.btn-ghost:hover { color: var(--text); }
.code-input { letter-spacing: 0.35em; text-align: center; font-size: 19px; font-weight: 700; }

.qr-box {
  width: 216px; padding: 12px; margin: 4px 0 14px; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.qr-box svg { display: block; width: 100%; height: auto; }
.secret-code {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-xs); background: var(--bg-elev);
  border: 1px solid var(--border); font-size: 12.5px; letter-spacing: 0.06em; color: #d9c9ff;
  word-break: break-all; user-select: all;
}
.profile-email { color: var(--muted); }

.link-more { color: var(--accent); font-weight: 600; }
.link-more:hover { text-decoration: underline; }

.member-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.member-chip {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 92px; padding: 14px 10px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  transition: border-color 0.15s, transform 0.2s var(--ease);
}
.member-chip:hover { border-color: var(--accent); transform: translateY(-3px); }
.member-chip .avatar { width: 56px; height: 56px; }
.member-chip-name {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-size: 12.5px; font-weight: 600;
}
.member-chip-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.member-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  transition: border-color 0.15s, transform 0.2s var(--ease), box-shadow 0.2s;
  animation: sectionIn 0.35s var(--ease) both;
}
.member-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.member-card .avatar { width: 72px; height: 72px; }
.member-card-text { min-width: 0; width: 100%; }
.member-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.member-handle { color: var(--faint); font-size: 12.5px; }
.member-joined { color: var(--muted); font-size: 12px; }
.member-chip { position: relative; }
.member-chip .rank-badge { position: absolute; top: 6px; right: 6px; }

.stat-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
/* Compact count-up stat cards inside the own-profile hero (3 cards). */
.profile-statboxes { grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 12px; margin: 16px 0 0; max-width: 480px; }

/* ===== Achievements ===== */
.achv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.achv { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-soft); opacity: 0.5; filter: grayscale(0.85); transition: opacity 0.2s, filter 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.achv.on { opacity: 1; filter: none; border-color: var(--border); }
.achv.on:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 0 26px rgba(139, 92, 246, 0.14); }
.achv-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; background: var(--surface-3); }
.achv.on .achv-ic { background: var(--accent-grad); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4); }
.achv-ic svg { width: 22px; height: 22px; }
.achv-name { font-weight: 700; font-size: 14px; }
.achv-desc { font-size: 12px; color: var(--faint); }

/* ===== Watch history list ===== */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-soft); transition: border-color 0.15s, background 0.15s; }
.history-row:hover { border-color: var(--accent); background: var(--surface-2); }
.history-cover { width: 46px; height: 64px; object-fit: cover; border-radius: var(--radius-xs); flex: 0 0 auto; background: var(--surface-3); }
.history-info { flex: 1 1 auto; min-width: 0; }
.history-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-ep { font-size: 13px; color: var(--muted); }
.history-time { font-size: 12px; color: var(--faint); white-space: nowrap; }
.history-continue { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--accent-grad); color: #fff; font-weight: 650; font-size: 13px; white-space: nowrap; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35); }
.history-continue svg { width: 15px; height: 15px; }
.history-del { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-xs); color: var(--faint); cursor: pointer; }
.history-del:hover { background: rgba(220, 38, 38, 0.15); color: #fca5a5; }
.history-del svg { width: 18px; height: 18px; }
@media (max-width: 620px) { .history-continue span { display: none; } .history-time { display: none; } }
.stat-box {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 14px 18px; text-align: center;
  background: linear-gradient(180deg, rgba(30,30,43,0.5), rgba(18,18,28,0.5));
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  transition: border-color 0.18s, transform 0.22s var(--ease), box-shadow 0.22s;
}
.stat-box::before {
  content: ""; position: absolute; top: -40%; left: 50%; width: 120%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.22), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.stat-box:hover { border-color: rgba(139,92,246,0.4); box-shadow: 0 0 34px rgba(139,92,246,0.14); }
.stat-box:hover::before { opacity: 1; }
.stat-box:hover .stat-ic { box-shadow: 0 0 18px rgba(139,92,246,0.4); }
.stat-ic {
  position: relative; z-index: 1; width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(219,39,119,0.24));
  border: 1px solid rgba(139,92,246,0.32); color: #e9d5ff;
}
.stat-ic svg { width: 21px; height: 21px; }
.stat-val { position: relative; z-index: 1; }
.stat-box b { font-size: 28px; font-weight: 800; line-height: 1; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-box span { position: relative; z-index: 1; color: var(--muted); font-size: 12.5px; font-weight: 600; }
@media (max-width: 560px) {
  .stat-boxes { grid-template-columns: repeat(2, 1fr); }
  /* Own profile: three small boxes in one row, rather than two and a lonely third. */
  .stat-boxes.profile-statboxes { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: none; }
  .profile-statboxes .stat-box { padding: 14px 6px 12px; gap: 6px; }
  .profile-statboxes .stat-ic { width: 34px; height: 34px; }
  .profile-statboxes .stat-box b { font-size: 22px; }
  .profile-statboxes .stat-box span { font-size: 11.5px; }
  .history-row { gap: 10px; }
}

/*  Custom country picker                                         */

/* Phone/tablet layout of the profile header, repeated here AFTER the base rules. The
   media blocks near the top of this file come before those base rules and lost to them,
   so on a phone the avatar hung on the left while the name was centred, the bio kept
   its desktop border, and the taller banner never applied. */
@media (max-width: 900px) {
  .profile-identity { flex-wrap: wrap; margin: -44px 4px 0 8px; gap: 12px; }
  .profile-identity > .avatar, .profile-avatar .avatar { width: 92px; height: 92px; }
}
@media (max-width: 600px) {
  .profile-banner { height: clamp(170px, 46vw, 240px); }
  .profile-identity { flex-direction: column; align-items: center; text-align: center; margin: -48px 0 0; gap: 10px; }
  .profile-id-text { width: 100%; padding-bottom: 0; }
  .profile-bio { border-left: 0; padding-left: 0; text-align: center; max-width: none; margin: 6px auto 0; }
  .profile-back { margin-bottom: 10px; }
}