/* Profile features from app OTA 2.6.0 → e20 (js/profile-e20.js): owner accent on a visited profile, wallpaper +
   frosted glass, profile song chip, extra tabs (Komiks, Audio, Market, Playlist, Collections), Profile visitors and
   Customize dialogs. Everything is scoped to #profilePage or the .pe-* dialog classes. */

/* ── A visited profile in its OWNER's accent. The shades mirror body[data-accent] in style.css; the derived aliases
   are re-declared here because a custom property's var() is resolved where it is declared (see style.css). ── */
#profilePage[data-owner-accent="purple"] { --accent-rgb: 139, 92, 246; --accent-primary: #8b5cf6; --accent-strong: #7c3aed; --accent-dark: #5b21b6; --accent-light: #c4b5fd; }
#profilePage[data-owner-accent="pink"] { --accent-rgb: 236, 72, 153; --accent-primary: #ec4899; --accent-strong: #db2777; --accent-dark: #9d174d; --accent-light: #f9a8d4; }
#profilePage[data-owner-accent="blue"] { --accent-rgb: 59, 130, 246; --accent-primary: #3b82f6; --accent-strong: #2563eb; --accent-dark: #1d4ed8; --accent-light: #93c5fd; }
#profilePage[data-owner-accent="green"] { --accent-rgb: 34, 197, 94; --accent-primary: #22c55e; --accent-strong: #16a34a; --accent-dark: #15803d; --accent-light: #86efac; }
#profilePage[data-owner-accent="orange"] { --accent-rgb: 249, 115, 22; --accent-primary: #f97316; --accent-strong: #ea580c; --accent-dark: #c2410c; --accent-light: #fdba74; }
#profilePage[data-owner-accent="red"] { --accent-rgb: 239, 68, 68; --accent-primary: #ef4444; --accent-strong: #dc2626; --accent-dark: #b91c1c; --accent-light: #fca5a5; }
#profilePage[data-owner-accent="teal"] { --accent-rgb: 20, 184, 166; --accent-primary: #14b8a6; --accent-strong: #0d9488; --accent-dark: #0f766e; --accent-light: #5eead4; }
#profilePage[data-owner-accent="indigo"] { --accent-rgb: 99, 102, 241; --accent-primary: #6366f1; --accent-strong: #4f46e5; --accent-dark: #4338ca; --accent-light: #a5b4fc; }
#profilePage[data-owner-accent="sky"] { --accent-rgb: 14, 165, 233; --accent-primary: #0ea5e9; --accent-strong: #0284c7; --accent-dark: #0369a1; --accent-light: #7dd3fc; }
#profilePage[data-owner-accent="rose"] { --accent-rgb: 244, 63, 94; --accent-primary: #f43f5e; --accent-strong: #e11d48; --accent-dark: #be123c; --accent-light: #fda4af; }
#profilePage[data-owner-accent="amber"] { --accent-rgb: 245, 158, 11; --accent-primary: #f59e0b; --accent-strong: #d97706; --accent-dark: #b45309; --accent-light: #fcd34d; }
#profilePage[data-owner-accent="slate"] { --accent-rgb: 100, 116, 139; --accent-primary: #64748b; --accent-strong: #475569; --accent-dark: #334155; --accent-light: #cbd5e1; }
#profilePage[data-owner-accent="ink"] { --accent-rgb: 0, 0, 0; --accent-primary: #000000; --accent-strong: #1f1f1f; --accent-dark: #000000; --accent-light: #8c8c8c; }
#profilePage[data-owner-accent="sepia"] { --accent-rgb: 138, 90, 68; --accent-primary: #8a5a44; --accent-strong: #744a37; --accent-dark: #4f3124; --accent-light: #d3ae9c; }
#profilePage[data-owner-accent="crimson"] { --accent-rgb: 158, 23, 45; --accent-primary: #9e172d; --accent-strong: #870f23; --accent-dark: #630918; --accent-light: #d69aa4; }
body:not(.light) #profilePage[data-owner-accent="ink"] { --accent-rgb: 255, 255, 255; --accent-primary: #ffffff; --accent-strong: #e5e5e5; --accent-dark: #d4d4d4; --accent-light: #a3a3a3; --accent-contrast: #000000; }
#profilePage[data-owner-accent] {
  --accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-dark) 100%);
  --accent-soft: rgba(var(--accent-rgb), 0.10);
  --accent-softer: rgba(var(--accent-rgb), 0.06);
  --accent-border: rgba(var(--accent-rgb), 0.24);
  --accent-glow: rgba(var(--accent-rgb), 0.35);
  --purple: var(--accent-primary);
  --purple-dk: var(--accent-dark);
  --purple-lt: var(--accent-light);
  --purple-grad: var(--accent-gradient);
  --primary: var(--accent-primary);
  --accent-purple: var(--accent-primary);
  --primaryContrast: var(--accent-contrast);
}
body:not(.light) #profilePage[data-owner-accent] {
  --bg2: color-mix(in srgb, rgb(var(--accent-rgb)) 14%, #0b0d16);
  --bg3: color-mix(in srgb, rgb(var(--accent-rgb)) 18%, #111421);
}

/* ── Wallpaper: fixed behind the whole profile (it does not scroll), under a veil of the page colour. ── */
#profilePage.pe-has-wallpaper { position: relative; isolation: isolate; }
#profilePage > .pe-wallpaper {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
#profilePage > .pe-wallpaper::after { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: 0.3; }
/* The Nomad theme: its cards stay solid; the wallpaper is the page behind them, under a deeper veil of Nomad's own
   night green so the design's colours keep their contrast. */
#profilePage.nomad-active > .pe-wallpaper::after { background: #07130f; opacity: 0.62; }
/* Over a wallpaper the header, the tab bar and the cards turn to frosted glass. */
#profilePage.pe-has-wallpaper .profile-head,
#profilePage.pe-has-wallpaper .profile-tabs,
#profilePage.pe-has-wallpaper .profile-tab-content .post-card,
#profilePage.pe-has-wallpaper .profile-tab-content .pm-toolbar,
#profilePage.pe-has-wallpaper .profile-tab-content .profile-empty,
#profilePage.pe-has-wallpaper .pe-card,
#profilePage.pe-has-wallpaper .pe-list-row {
  background: color-mix(in srgb, var(--bg2) 58%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
body.light #profilePage.pe-has-wallpaper .profile-head,
body.light #profilePage.pe-has-wallpaper .profile-tabs,
body.light #profilePage.pe-has-wallpaper .pe-card { border-color: rgba(255, 255, 255, 0.6); }
#profilePage.pe-has-wallpaper .profile-tabs { border-radius: 16px; padding: 0 6px; }
#profilePage.pe-has-wallpaper .pm-toolbar { padding: 8px 12px; border-radius: 14px; }

/* ── Profile song chip ── */
.pe-song {
  display: inline-flex; align-items: center; gap: 6px; max-width: min(100%, 360px);
  margin: 0 0 10px; padding: 4px 6px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--text);
}
.pe-song button {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-grid; place-items: center; background: var(--purple); color: var(--accent-contrast, #fff);
}
.pe-song .pe-song-auto { background: transparent; color: var(--text2); }
.pe-song .pe-song-auto[aria-pressed="false"] { color: var(--text3); }
.pe-song button:focus-visible { outline: 2px solid var(--purple-lt); outline-offset: 2px; }
.pe-song-text { overflow: hidden; white-space: nowrap; min-width: 0; flex: 1; font-size: 13px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pe-song-marquee { display: inline-block; padding-right: 24px; }
.pe-song.is-playing .pe-song-marquee { animation: pe-marquee 14s linear infinite; }
@keyframes pe-marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(min(0px, calc(-100% + 180px))); } }
@media (prefers-reduced-motion: reduce) { .pe-song.is-playing .pe-song-marquee { animation: none; } .pe-song-text { text-overflow: ellipsis; } }
.pe-song.has-error { border-color: rgba(239, 68, 68, 0.45); }
.pe-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pe-spin 0.8s linear infinite; }
@keyframes pe-spin { to { transform: rotate(360deg); } }

.pe-customize-btn svg, .pe-visitors-stat svg { vertical-align: -3px; }

/* ── Extra tabs ── */
.pe-results { min-height: 80px; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pe-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; min-width: 0;
}
.pe-card > strong, .pe-card > span, .pe-card-open > strong, .pe-card-open > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-card > span, .pe-card-open > span { color: var(--text2); font-size: 12.5px; }
.pe-card:hover { border-color: var(--accent-border); }
.pe-card-art {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--accent-soft); color: var(--purple); font-size: 28px;
}
.pe-grid-tall .pe-card-art { aspect-ratio: 2 / 3; }
.pe-card-art img { width: 100%; height: 100%; object-fit: cover; }
.pe-card-art em { font-style: normal; font-size: 14px; font-weight: 600; padding: 8px; text-align: center; }
.pe-chip { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(24, 19, 34, 0.68); color: #fff; font-size: 11px; font-weight: 600; }
.pe-playlist { cursor: default; }
.pe-card-open { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pe-playlist .btn { margin-top: 4px; }
.pe-list { display: flex; flex-direction: column; gap: 8px; }
.pe-list-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; width: 100%;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.pe-list-row:hover, .pe-list-row.is-picked { border-color: var(--accent-border); background: var(--accent-softer); }
.pe-thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--purple); font-weight: 700; }
.pe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-thumb.pe-round { border-radius: 50%; }
.pe-thumb-wide { width: 86px; height: 48px; }
.pe-list-copy { display: flex; flex-direction: column; min-width: 0; }
.pe-list-copy strong, .pe-list-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-list-copy span { color: var(--text2); font-size: 12.5px; }
.pe-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.pe-section-head h3 { font-size: 16px; margin: 0; }
.pe-section-head span { color: var(--text2); font-size: 13px; }
.pe-trophy { align-items: center; text-align: center; background: linear-gradient(180deg, #18224a, #0b1530); color: #fff; border-width: 1px; }
.pe-trophy img, .pe-badge img, .pe-badge-blank { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pe-trophy > span { color: #c9d0e6; }
.pe-trophy em { font-style: normal; font-weight: 600; font-size: 12.5px; }
.pe-metal-gold { border-color: #e8b64c66; } .pe-metal-gold strong { color: #e8b64c; }
.pe-metal-silver { border-color: #aeb6c666; } .pe-metal-silver strong { color: #aeb6c6; }
.pe-metal-bronze { border-color: #c9814a66; } .pe-metal-bronze strong { color: #c9814a; }
.pe-badge { align-items: center; text-align: center; }

/* ── Centred dialogs ── */
.pe-overlay { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 20, 0.62); }
.pe-dialog {
  width: min(440px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column;
  border-radius: 20px; background: var(--bg2, #fff); color: var(--text, #18202c); box-shadow: 0 20px 70px #0006;
  animation: pe-in 0.18s ease-out;
}
.pe-dialog-wide { width: min(600px, 100%); }
@keyframes pe-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pe-dialog { animation: none; } }
.pe-dialog-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 10px; }
.pe-dialog-head h2 { flex: 1; margin: 0; font-size: 18px; }
.pe-dialog-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pe-dialog-body { padding: 4px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.pe-note { color: var(--text2); font-size: 13.5px; line-height: 1.5; margin: 0; }
.pe-status { min-height: 1.2em; margin: 0; font-size: 13px; color: var(--success); }
.pe-status.is-error { color: var(--red); }
.pe-status:empty { display: none; }
.pe-row, .pe-row-end, .pe-row-center, .pe-row-tight { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-row-end { justify-content: flex-end; }
.pe-row-center { justify-content: center; }
.pe-row-tight { gap: 4px; flex-wrap: nowrap; }
.pe-col { flex-direction: column; text-align: center; padding: 18px 0; }
.pe-off-icon { font-size: 32px; }
.pe-input { flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); font: inherit; }
.pe-input-short { flex: none; width: 80px; min-width: 0; }
.pe-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.pe-sec:first-of-type { border-top: 0; padding-top: 0; }
.pe-sec h3 { margin: 0; font-size: 15px; }
.pe-song-results { max-height: 260px; overflow-y: auto; }
.pe-song-results:empty { display: none; }
.pe-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pe-check small { color: var(--text3); }
.pe-check input { width: 18px; height: 18px; accent-color: var(--purple); }
.pe-switch-card { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border2); background: var(--bg3); }
.pe-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pe-switch > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pe-switch small { color: var(--text2); font-size: 12.5px; }
.pe-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--border2); position: relative; cursor: pointer; transition: background 0.15s; }
.pe-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.pe-switch input:checked { background: var(--purple); }
.pe-switch input:checked::after { transform: translateX(20px); }
.pe-switch input:focus-visible { outline: 2px solid var(--purple-lt); outline-offset: 2px; }
.pe-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.pe-wall {
  aspect-ratio: 9 / 16; border-radius: 12px; border: 2px solid var(--border2); background: var(--bg3) center / cover no-repeat;
  cursor: pointer; display: grid; place-items: center; color: var(--text2); font: inherit; font-size: 12px; text-align: center; padding: 4px;
}
.pe-wall[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 0 0 2px var(--accent-glow); }
.pe-wall-upload span { background: rgba(0, 0, 0, 0.45); color: #fff; border-radius: 8px; padding: 2px 6px; }
.pe-wall-upload:focus-within { outline: 2px solid var(--purple-lt); outline-offset: 2px; }
.pe-tab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pe-tab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--bg3); }
.pe-icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.pe-icon-btn:disabled { opacity: 0.35; cursor: default; }
.pe-showcase { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 0; }
.pe-showcase img { width: min(240px, 70vw); aspect-ratio: 1; object-fit: contain; }
.pe-showcase strong { font-size: 18px; }
.pe-showcase span { color: var(--text2); font-size: 13px; }

@media (max-width: 600px) {
  .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pe-trophies, .pe-badges, .pe-grid-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-song { max-width: 100%; }
  .pe-dialog { max-height: 90vh; }
}