/* ── Profile Page Shell ───────────────────────────────────── */
.profile-page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 0 4rem;
    position: relative;
}

.profile-page::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    pointer-events: none;
    background:
        radial-gradient(65% 90% at 12% 0%, rgba(186, 158, 255, 0.14), rgba(186, 158, 255, 0) 70%),
        radial-gradient(55% 75% at 92% 10%, rgba(248, 160, 16, 0.10), rgba(248, 160, 16, 0) 70%);
    z-index: 0;
}

.profile-page > * {
    position: relative;
    z-index: 1;
}

/* ── Hero — full-width surface ─────────────────────────────── */
.profile-hero {
    width: 100%;
    border-bottom: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
    margin-bottom: 0;
    padding-bottom: 0;
}

.profile-hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem clamp(1.25rem, 4vw, 3rem) 1.75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
}

/* ── Body inner — centered content below hero ──────────────── */
.profile-body-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem clamp(1.25rem, 4vw, 3rem) 0;
}

.profile-hero-lead {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.75rem;
    align-items: center;
    min-width: 0;
}

/* Avatar */
.profile-hero-avatar {
    position: relative;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
}

.profile-hero-avatar-img,
.profile-hero-avatar-placeholder {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: block;
    box-shadow:
        0 0 0 3px rgba(186, 158, 255, 0.32),
        0 0 36px rgba(132, 85, 239, 0.38);
}

.profile-hero-avatar-img {
    object-fit: cover;
}

.profile-hero-avatar-placeholder {
    background: linear-gradient(135deg, var(--platea-primary-dim, #8455ef), var(--platea-primary, #ba9eff));
    color: #fff;
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    user-select: none;
}

.profile-hero-avatar-edit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: background 0.18s ease;
}

.profile-hero-avatar:hover .profile-hero-avatar-edit {
    background: rgba(0, 0, 0, 0.55);
}

.profile-hero-avatar-edit-icon {
    color: #fff;
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.profile-hero-avatar:hover .profile-hero-avatar-edit-icon {
    opacity: 1;
}

.user-profile-picture-input {
    display: none;
}

/* Hero info */
.profile-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.profile-hero-kicker { display: none; }

/* Inline social stats row */
.profile-hero-social-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 0.15rem 0 0.1rem;
}

.profile-hero-social-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
    color: inherit;
}

.profile-hero-social-num {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--platea-text-primary, #f7f2ff);
    font-variant-numeric: tabular-nums;
}

.profile-hero-social-label {
    font-size: 0.88rem;
    color: rgba(247, 242, 255, 0.55);
    transition: color 0.15s;
}

.profile-hero-social-btn:hover .profile-hero-social-label {
    color: var(--platea-text-primary, #f7f2ff);
}

.public-profile-inline-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1.35rem;
    margin-top: 0.1rem;
}

.public-profile-inline-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
}

.public-profile-inline-stat-value {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--platea-text-primary, #f7f2ff);
    font-variant-numeric: tabular-nums;
}

.public-profile-inline-stat-value-warm {
    color: var(--platea-secondary, #f8a010);
}

.public-profile-inline-stat-scale {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(247, 242, 255, 0.44);
    margin-left: 0.08rem;
}

.public-profile-inline-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247, 242, 255, 0.52);
}

.public-profile-rating-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.45rem;
    max-width: 440px;
}

.public-profile-rating-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
}

.public-profile-rating-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247, 242, 255, 0.58);
}

.public-profile-rating-meta {
    font-size: 0.8rem;
    color: rgba(247, 242, 255, 0.62);
    font-variant-numeric: tabular-nums;
}

.public-profile-rating-chart {
    height: 58px;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.3rem;
    align-items: end;
}

.public-profile-rating-bar-wrap {
    height: 100%;
    display: flex;
    align-items: end;
}

.public-profile-rating-bar {
    width: 100%;
    min-height: 4px;
    height: 0;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(186, 158, 255, 0.92), rgba(132, 85, 239, 0.62));
    box-shadow: 0 6px 14px rgba(132, 85, 239, 0.18);
}

.public-profile-rating-bar-h-0 { height: 0; min-height: 0; }
.public-profile-rating-bar-h-1 { height: 1%; }
.public-profile-rating-bar-h-2 { height: 2%; }
.public-profile-rating-bar-h-3 { height: 3%; }
.public-profile-rating-bar-h-4 { height: 4%; }
.public-profile-rating-bar-h-5 { height: 5%; }
.public-profile-rating-bar-h-6 { height: 6%; }
.public-profile-rating-bar-h-7 { height: 7%; }
.public-profile-rating-bar-h-8 { height: 8%; }
.public-profile-rating-bar-h-9 { height: 9%; }
.public-profile-rating-bar-h-10 { height: 10%; }
.public-profile-rating-bar-h-11 { height: 11%; }
.public-profile-rating-bar-h-12 { height: 12%; }
.public-profile-rating-bar-h-13 { height: 13%; }
.public-profile-rating-bar-h-14 { height: 14%; }
.public-profile-rating-bar-h-15 { height: 15%; }
.public-profile-rating-bar-h-16 { height: 16%; }
.public-profile-rating-bar-h-17 { height: 17%; }
.public-profile-rating-bar-h-18 { height: 18%; }
.public-profile-rating-bar-h-19 { height: 19%; }
.public-profile-rating-bar-h-20 { height: 20%; }
.public-profile-rating-bar-h-21 { height: 21%; }
.public-profile-rating-bar-h-22 { height: 22%; }
.public-profile-rating-bar-h-23 { height: 23%; }
.public-profile-rating-bar-h-24 { height: 24%; }
.public-profile-rating-bar-h-25 { height: 25%; }
.public-profile-rating-bar-h-26 { height: 26%; }
.public-profile-rating-bar-h-27 { height: 27%; }
.public-profile-rating-bar-h-28 { height: 28%; }
.public-profile-rating-bar-h-29 { height: 29%; }
.public-profile-rating-bar-h-30 { height: 30%; }
.public-profile-rating-bar-h-31 { height: 31%; }
.public-profile-rating-bar-h-32 { height: 32%; }
.public-profile-rating-bar-h-33 { height: 33%; }
.public-profile-rating-bar-h-34 { height: 34%; }
.public-profile-rating-bar-h-35 { height: 35%; }
.public-profile-rating-bar-h-36 { height: 36%; }
.public-profile-rating-bar-h-37 { height: 37%; }
.public-profile-rating-bar-h-38 { height: 38%; }
.public-profile-rating-bar-h-39 { height: 39%; }
.public-profile-rating-bar-h-40 { height: 40%; }
.public-profile-rating-bar-h-41 { height: 41%; }
.public-profile-rating-bar-h-42 { height: 42%; }
.public-profile-rating-bar-h-43 { height: 43%; }
.public-profile-rating-bar-h-44 { height: 44%; }
.public-profile-rating-bar-h-45 { height: 45%; }
.public-profile-rating-bar-h-46 { height: 46%; }
.public-profile-rating-bar-h-47 { height: 47%; }
.public-profile-rating-bar-h-48 { height: 48%; }
.public-profile-rating-bar-h-49 { height: 49%; }
.public-profile-rating-bar-h-50 { height: 50%; }
.public-profile-rating-bar-h-51 { height: 51%; }
.public-profile-rating-bar-h-52 { height: 52%; }
.public-profile-rating-bar-h-53 { height: 53%; }
.public-profile-rating-bar-h-54 { height: 54%; }
.public-profile-rating-bar-h-55 { height: 55%; }
.public-profile-rating-bar-h-56 { height: 56%; }
.public-profile-rating-bar-h-57 { height: 57%; }
.public-profile-rating-bar-h-58 { height: 58%; }
.public-profile-rating-bar-h-59 { height: 59%; }
.public-profile-rating-bar-h-60 { height: 60%; }
.public-profile-rating-bar-h-61 { height: 61%; }
.public-profile-rating-bar-h-62 { height: 62%; }
.public-profile-rating-bar-h-63 { height: 63%; }
.public-profile-rating-bar-h-64 { height: 64%; }
.public-profile-rating-bar-h-65 { height: 65%; }
.public-profile-rating-bar-h-66 { height: 66%; }
.public-profile-rating-bar-h-67 { height: 67%; }
.public-profile-rating-bar-h-68 { height: 68%; }
.public-profile-rating-bar-h-69 { height: 69%; }
.public-profile-rating-bar-h-70 { height: 70%; }
.public-profile-rating-bar-h-71 { height: 71%; }
.public-profile-rating-bar-h-72 { height: 72%; }
.public-profile-rating-bar-h-73 { height: 73%; }
.public-profile-rating-bar-h-74 { height: 74%; }
.public-profile-rating-bar-h-75 { height: 75%; }
.public-profile-rating-bar-h-76 { height: 76%; }
.public-profile-rating-bar-h-77 { height: 77%; }
.public-profile-rating-bar-h-78 { height: 78%; }
.public-profile-rating-bar-h-79 { height: 79%; }
.public-profile-rating-bar-h-80 { height: 80%; }
.public-profile-rating-bar-h-81 { height: 81%; }
.public-profile-rating-bar-h-82 { height: 82%; }
.public-profile-rating-bar-h-83 { height: 83%; }
.public-profile-rating-bar-h-84 { height: 84%; }
.public-profile-rating-bar-h-85 { height: 85%; }
.public-profile-rating-bar-h-86 { height: 86%; }
.public-profile-rating-bar-h-87 { height: 87%; }
.public-profile-rating-bar-h-88 { height: 88%; }
.public-profile-rating-bar-h-89 { height: 89%; }
.public-profile-rating-bar-h-90 { height: 90%; }
.public-profile-rating-bar-h-91 { height: 91%; }
.public-profile-rating-bar-h-92 { height: 92%; }
.public-profile-rating-bar-h-93 { height: 93%; }
.public-profile-rating-bar-h-94 { height: 94%; }
.public-profile-rating-bar-h-95 { height: 95%; }
.public-profile-rating-bar-h-96 { height: 96%; }
.public-profile-rating-bar-h-97 { height: 97%; }
.public-profile-rating-bar-h-98 { height: 98%; }
.public-profile-rating-bar-h-99 { height: 99%; }
.public-profile-rating-bar-h-100 { height: 100%; }

.public-profile-rating-scale {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
}

.public-profile-rating-scale-min,
.public-profile-rating-scale-max {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247, 242, 255, 0.52);
}

.public-profile-page .profile-hero-inner,
.self-profile-page .profile-hero-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.public-profile-hero-rating {
    justify-self: end;
    width: min(430px, 100%);
    min-width: 300px;
}

.public-profile-page .profile-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem clamp(1.25rem, 4vw, 3rem) 0;
}

.public-profile-page .public-profile-section-card,
.self-profile-page .public-profile-section-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem 0 0.35rem;
}

.public-profile-page .public-profile-section-card:first-child,
.self-profile-page .public-profile-section-card:first-child {
    border-top: 0;
    padding-top: 0;
}

.public-profile-page .profile-prod-grid,
.self-profile-page .profile-prod-grid {
    gap: 1rem;
}

.public-profile-page .public-profile-section-card .profile-recent-row,
.self-profile-page .public-profile-section-card .profile-recent-row {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    padding: 0.85rem 0;
}

.public-profile-page .public-profile-section-card .profile-recent-list li:first-child .profile-recent-row,
.self-profile-page .public-profile-section-card .profile-recent-list li:first-child .profile-recent-row {
    border-top: 0;
    padding-top: 0;
}

.public-profile-pagination {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.25rem;
}

.public-profile-page-link {
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 255, 0.6);
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.public-profile-page-link:hover {
    color: #fff;
    border-color: rgba(186, 158, 255, 0.45);
    background: rgba(186, 158, 255, 0.08);
}

.profile-hero-name {
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--platea-text-primary, #f7f2ff);
    margin: 0;
}

.profile-hero-name em {
    font-style: italic;
    background: linear-gradient(135deg, #d6c1ff, #9a7bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    flex-wrap: wrap;
}

.profile-hero-email {
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
}

.profile-hero-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    display: inline-block;
}

.profile-hero-bio {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    margin-top: 0.25rem;
    max-width: 52ch;
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-style: italic;
}

.profile-hero-bio-empty {
    font-style: italic;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    font-family: var(--platea-font-ui, sans-serif);
    font-size: 0.88rem;
}

/* Activity mini panel */
.profile-hero-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 140px));
    gap: 0.4rem;
    padding: 1.1rem 1.25rem;
    background:
        linear-gradient(180deg, rgba(186, 158, 255, 0.05), rgba(186, 158, 255, 0) 60%),
        var(--platea-surface-container-low, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    min-width: 280px;
}

.profile-hero-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(186, 158, 255, 0.5), transparent);
}

.profile-hero-panel-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    margin-bottom: 0.35rem;
}

.profile-hero-panel-head-accent {
    color: var(--platea-primary, #ba9eff);
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.45rem 0.3rem;
    line-height: 1;
}

.profile-stat-num {
    font-size: 1.65rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--platea-text-primary, #f7f2ff);
    letter-spacing: -0.01em;
}

.profile-stat-num-accent { color: var(--platea-primary, #ba9eff); }
.profile-stat-num-warm   { color: var(--platea-secondary, #f8a010); }

.profile-stat-sub {
    font-size: 0.72rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.profile-stat-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
}

.profile-stat-link {
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 0.15s;
}

.profile-stat-link:hover {
    background: rgba(186, 158, 255, 0.10);
}

.profile-hero-panel-social-head {
    margin-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding-top: 0.65rem;
    margin-bottom: 0;
}

/* ── Layout (sidebar + content) ───────────────────────────── */
.profile-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: sticky;
    top: 6rem;
}

.profile-sidebar-section {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    margin: 1.1rem 0.5rem 0.5rem;
}

.profile-sidebar-section:first-of-type { margin-top: 0; }

.profile-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.profile-sidebar-item:hover {
    color: var(--platea-text-primary, #f7f2ff);
    background: rgba(186, 158, 255, 0.06);
}

.profile-sidebar-item.is-active {
    background: transparent;
    color: var(--platea-text-primary, #f7f2ff);
    box-shadow: inset 2px 0 0 var(--platea-primary, #ba9eff);
}

.profile-sidebar-count {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    font-variant-numeric: tabular-nums;
}

/* ── Content area ─────────────────────────────────────────── */
.profile-content {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

.profile-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.self-profile-page .profile-panel[data-panel="overview"] {
    gap: 2.25rem;
}

.profile-panel[hidden] { display: none; }

/* ── Section head (used across panels) ───────────────────── */
.profile-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-section-title {
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.profile-section-title em {
    font-style: italic;
    background: linear-gradient(135deg, #d6c1ff, #9a7bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-section-sub {
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    max-width: 62ch;
}

.profile-section-link {
    background: none;
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--platea-primary, #ba9eff);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    border: 1px solid rgba(186, 158, 255, 0.3);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.profile-section-link:hover {
    color: #d6c1ff;
    background: rgba(186, 158, 255, 0.08);
    border-color: rgba(186, 158, 255, 0.55);
}

/* ── Stat cards (overview) ────────────────────────────────── */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.profile-statcard {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.25rem 1.15rem;
    background: var(--platea-surface-container-low, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.profile-statcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.profile-statcard-violet::before { background: linear-gradient(90deg, #d6c1ff, #9a7bff); }
.profile-statcard-amber::before  { background: linear-gradient(90deg, #ffcf5a, #f8a010); }
.profile-statcard-emerald::before { background: linear-gradient(90deg, #b7f2c2, #4fd36c); }

.profile-statcard-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
}

.profile-statcard-value {
    font-size: 2.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--platea-text-primary, #f7f2ff);
}

.profile-statcard-value-small { font-size: 1.7rem; }

.profile-statcard-scale {
    font-size: 1rem;
    font-weight: 700;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    margin-left: 0.2rem;
}

.profile-statcard-delta {
    font-size: 0.78rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    font-weight: 500;
}

.profile-statcard-delta-up { color: #9be7a8; }

/* ── Two-column row (overview) ────────────────────────────── */
.profile-two-col {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.5rem;
}

/* ── Generic card ─────────────────────────────────────────── */
.profile-card {
    padding: 1.5rem;
    background: var(--platea-surface-container-low, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Recent review rows ───────────────────────────────────── */
.profile-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-recent-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.15s, border-color 0.15s;
}


.profile-activity-unseen-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e50914;
    flex-shrink: 0;
    align-self: center;
}

.profile-recent-row:hover {
    background: rgba(186, 158, 255, 0.06);
    border-color: rgba(186, 158, 255, 0.25);
}

.profile-recent-poster {
    width: 56px;
    height: 75px;
    border-radius: 4px;
    background: repeating-linear-gradient(45deg, #26242e 0 10px, #201e27 10px 20px);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.profile-recent-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.profile-recent-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--platea-text-primary, #f7f2ff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-recent-snippet {
    font-size: 0.8rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.profile-recent-score {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    background: rgba(248, 160, 16, 0.08);
    border: 1px solid rgba(248, 160, 16, 0.28);
    color: var(--platea-secondary, #f8a010);
    font-weight: 800;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.profile-recent-score-scale {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.6;
}

/* ── Rating distribution ──────────────────────────────────── */
.profile-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-breakdown-row {
    display: grid;
    grid-template-columns: 2.6rem 1fr 1.8rem;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.76rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
}

.profile-breakdown-row.is-dim { opacity: 0.38; }

.profile-breakdown-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--platea-secondary, #f8a010);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.76rem;
    line-height: 1;
}

.profile-breakdown-score-star { font-size: 0.7rem; line-height: 1; }

.profile-breakdown-score-num {
    font-size: 0.8rem;
    letter-spacing: -0.01em;
    color: var(--platea-text-primary, #f7f2ff);
}

.profile-breakdown-row.is-dim .profile-breakdown-score-num {
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
}

.profile-breakdown-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    display: block;
}

.profile-breakdown-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(248, 160, 16, 0.35), var(--platea-secondary, #f8a010));
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(248, 160, 16, 0.2);
}

.profile-breakdown-count {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--platea-text-primary, #f7f2ff);
    text-align: right;
    font-size: 0.82rem;
}

/* ── Watchlist production grid ────────────────────────────── */
.profile-prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 180px));
    justify-content: start;
    gap: 1.1rem;
}

.profile-prod-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.profile-prod-card:hover {
    transform: translateY(-2px);
}

.profile-prod-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 7px;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #26242e 0 10px, #201e27 10px 20px);
}

.profile-prod-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-prod-poster-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(10, 7, 18, 0.74);
    backdrop-filter: blur(6px);
    color: var(--platea-primary, #ba9eff);
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(186, 158, 255, 0.32);
}

.profile-prod-poster-badge-live {
    color: #9be7a8;
    box-shadow: inset 0 0 0 1px rgba(155, 231, 168, 0.30);
}

.profile-prod-poster-badge-ended {
    color: rgba(247, 242, 255, 0.56);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.profile-prod-info { display: flex; flex-direction: column; gap: 0.1rem; }

.profile-prod-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--platea-text-primary, #f7f2ff);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-prod-venue {
    font-size: 0.72rem;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Full review list (reviews panel) ────────────────────── */
.profile-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-review-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--platea-surface-container-low, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.profile-review-card:hover {
    border-color: rgba(186, 158, 255, 0.28);
    background: rgba(186, 158, 255, 0.05);
}

.profile-review-card-unseen {
    background: rgba(186, 158, 255, 0.07);
    border-color: rgba(186, 158, 255, 0.2);
}

.profile-activity-icon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(255, 255, 255, 0.05);
    height: 72px;
}

.profile-review-img {
    width: 72px;
    height: 100px;
    border-radius: 6px;
    object-fit: cover;
    background: repeating-linear-gradient(45deg, #26242e 0 10px, #201e27 10px 20px);
    display: block;
    flex-shrink: 0;
}

.profile-review-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.profile-review-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--platea-text-primary, #f7f2ff);
}

.profile-review-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-style: italic;
}

.profile-review-meta {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    font-weight: 700;
}

/* ── Activity (notification history) ─────────────────────── */
.notif-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.notif-activity-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    border-radius: 10px;
}

.notif-activity-item:last-child {
    border-bottom: none;
}

.notif-activity-item:hover {
    background: rgba(186, 158, 255, 0.05);
}

.notif-activity-item-unseen {
    background: rgba(186, 158, 255, 0.07);
}

.notif-activity-avatar-link {
    flex-shrink: 0;
    text-decoration: none;
}

.notif-activity-text {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    text-decoration: none;
}

.notif-activity-text:hover {
    color: #fff;
}

.notif-activity-text strong {
    color: #fff;
    font-weight: 700;
}

.notif-activity-date {
    display: inline;
    margin-left: 0.35em;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

/* ── Empty states ─────────────────────────────────────────── */
.profile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: 3rem 1.5rem;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: var(--platea-surface-container-low, rgba(255, 255, 255, 0.04));
}

.profile-empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(186, 158, 255, 0.1);
    border: 1px solid rgba(186, 158, 255, 0.2);
    color: var(--platea-primary, #ba9eff);
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.profile-empty-title {
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.profile-empty-sub {
    font-size: 0.9rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    max-width: 42ch;
    line-height: 1.5;
    margin: 0;
}

.profile-empty-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

/* ── Account form cards ───────────────────────────────────── */
.profile-form-card {
    padding: 1.5rem 1.75rem;
    background: var(--platea-surface-container-low, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
    border-radius: 16px;
}

.profile-form-card-head {
    margin-bottom: 1.25rem;
}

.profile-form-card-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--platea-secondary, #f8a010);
    margin-bottom: 0.4rem;
}

.profile-form-card-kicker-primary {
    color: var(--platea-primary, #ba9eff);
}

.profile-form-card-title {
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.profile-form-card-sub {
    font-size: 0.85rem;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    margin-top: 0.35rem;
    line-height: 1.5;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.15rem;
}

.profile-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.profile-form-field-full { grid-column: 1 / -1; }

.profile-form-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
}

.profile-form-input,
.profile-form-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
    color: var(--platea-text-primary, #f7f2ff);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-form-input:focus,
.profile-form-textarea:focus {
    outline: none;
    border-color: rgba(186, 158, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(186, 158, 255, 0.18);
}

.profile-form-textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.5;
    font-family: var(--platea-font-editorial, Georgia, serif);
    font-style: italic;
}

.profile-form-readonly {
    opacity: 0.55;
    cursor: not-allowed;
}

.profile-form-hint {
    font-size: 0.75rem;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
}

.profile-form-hint-warn {
    color: rgba(248, 160, 16, 0.9);
}

/* ── Username pencil-unlock ──────────────────────────────── */
.profile-username-wrap {
    position: relative;
    display: block;
}

/* make room for the pencil icon inside the input */
.profile-username-wrap .profile-form-input {
    padding-right: 2.75rem;
    width: 100%;
}

.profile-username-edit-btn {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(247, 242, 255, 0.45);
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}

.profile-username-edit-btn:hover:not(:disabled) {
    color: rgba(186, 158, 255, 0.9);
    background: rgba(186, 158, 255, 0.12);
}

.profile-form-counter {
    text-align: right;
    font-size: 0.72rem;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.field-error {
    color: #ff9298;
    font-size: 0.82rem;
}

.profile-form-submit {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.profile-btn {
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    font-family: inherit;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}

.profile-btn-cta {
    background: linear-gradient(135deg, #d6c1ff, #9a7bff);
    color: #241348;
    box-shadow: 0 8px 24px rgba(132, 85, 239, 0.35);
}

.profile-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(132, 85, 239, 0.45);
}

.profile-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--platea-text-muted, rgba(247, 242, 255, 0.68));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.profile-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── Security rows ────────────────────────────────────────── */
.profile-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.9rem;
}

.profile-security-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-security-row-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--platea-text-primary, #f7f2ff);
}

.profile-security-row-sub {
    font-size: 0.78rem;
    color: var(--platea-text-soft, rgba(247, 242, 255, 0.44));
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .profile-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .public-profile-page .profile-content {
        padding: 1rem 1.5rem 0;
    }

    .public-profile-page .profile-hero-inner,
    .self-profile-page .profile-hero-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .public-profile-hero-rating {
        justify-self: stretch;
        min-width: 0;
        width: 100%;
        margin-top: 0.8rem;
    }

    .profile-hero-panel {
        min-width: 0;
        width: 100%;
    }

    .profile-layout { grid-template-columns: 1fr; }

    .profile-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--platea-ghost-border, rgba(255, 255, 255, 0.09));
        gap: 0.25rem;
    }

    .profile-sidebar-section { display: none; }

    .profile-sidebar-item.is-active {
        box-shadow: inset 0 -3px 0 var(--platea-primary, #ba9eff);
    }
}

@media (max-width: 640px) {
    .profile-page,
    .public-profile-page,
    .self-profile-page {
        padding: 0 0 3rem;
    }

    .public-profile-page .profile-hero-inner,
    .self-profile-page .profile-hero-inner {
        padding: 1.6rem 1rem 1.2rem;
    }

    .public-profile-page .profile-content {
        padding: 0.75rem 1rem 0;
    }

    .profile-body-inner {
        padding: 1.4rem 1rem 0;
    }

    .public-profile-rating-summary {
        max-width: none;
    }

    .public-profile-rating-chart {
        height: 52px;
        gap: 0.25rem;
    }

    .profile-hero-lead {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .profile-form-grid { grid-template-columns: 1fr; }

    .profile-review-card {
        grid-template-columns: 56px 1fr;
    }

    .profile-review-card .profile-recent-score {
        grid-column: 2;
    }
}

/* Language selector */
.profile-language-form {
    margin-top: 1rem;
}

.profile-language-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-language-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.profile-language-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

.profile-language-btn--active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.profile-language-btn--active:hover {
    background: #6d28d9;
    border-color: #6d28d9;
}