/* ═══════════════════════════════════════════════════════════
   StemLab Profile  v1.4.0 — Premium Dark Theme + Titles
   ═══════════════════════════════════════════════════════════ */

/* ─── Variables ─── */
.slpf {
    --slpf-bg:           #0a0a12;
    --slpf-card:         #111118;
    --slpf-card-border:  rgba(255,255,255,.06);
    --slpf-accent:       #E63988;
    --slpf-accent-glow:  rgba(230,57,136,.25);
    --slpf-gold:         #FFD700;
    --slpf-text:         #ffffff;
    --slpf-text-sub:     rgba(255,255,255,.45);
    --slpf-text-dim:     rgba(255,255,255,.28);
    --slpf-radius:       14px;
    --slpf-radius-sm:    10px;
    --slpf-font:         'Inter', 'Satoshi', system-ui, -apple-system, sans-serif;
}

/* ─── Container ─── */
.slpf {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px 100px;
    font-family: var(--slpf-font);
    color: var(--slpf-text);
    -webkit-font-smoothing: antialiased;
}

/* ─── Loading ─── */
.slpf-loading {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 120px 0;
}
.slpf-loading-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--slpf-accent);
    opacity: .4;
    animation: slpf-pulse .8s ease-in-out infinite alternate;
}
.slpf-loading-dot:nth-child(2) { animation-delay: .15s; }
.slpf-loading-dot:nth-child(3) { animation-delay: .3s; }
@keyframes slpf-pulse { to { opacity: 1; transform: scale(1.3); } }

/* ─── Login prompt ─── */
.slpf-login {
    text-align: center;
    padding: 80px 20px;
}
.slpf-login p {
    color: var(--slpf-text-sub);
    font-size: 15px;
    margin: 0 0 24px;
}
.slpf-login-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ═══════════════════════════════════
   HERO — Avatar + Name + Title Selector
   ═══════════════════════════════════ */
.slpf-hero {
    text-align: center;
    margin-bottom: 32px;
}

/* Avatar */
.slpf-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}
.slpf-avatar {
    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--slpf-card-border);
    background: var(--slpf-card);
    transition: border-color .3s;
}
.slpf-avatar-wrap:hover .slpf-avatar {
    border-color: var(--slpf-accent);
}
.slpf-avatar-edit {
    position: absolute; bottom: 2px; right: 2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--slpf-accent);
    border: 2px solid var(--slpf-bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .2s, background .2s;
}
.slpf-avatar-edit:hover {
    transform: scale(1.1);
    background: #f04090;
}
.slpf-avatar-edit svg {
    width: 14px; height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.slpf-avatar-input { display: none; }

/* Name */
.slpf-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--slpf-text);
}

/* ─── Title Selector (Premium Reward Feel) ─── */
.slpf-title-wrap {
    position: relative;
    display: inline-block;
    margin-top: 2px;
}

.slpf-title-selected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(230,57,136,.12) 0%, rgba(255,215,0,.08) 100%);
    border: 1px solid rgba(230,57,136,.25);
    color: var(--slpf-accent);
    font-family: var(--slpf-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 0 16px rgba(230,57,136,.08), inset 0 0 12px rgba(230,57,136,.04);
}
.slpf-title-selected:hover,
.slpf-title-selected--open {
    background: linear-gradient(135deg, rgba(230,57,136,.2) 0%, rgba(255,215,0,.12) 100%);
    border-color: rgba(230,57,136,.4);
    color: #fff;
    box-shadow: 0 0 24px rgba(230,57,136,.15), inset 0 0 12px rgba(230,57,136,.06);
}
.slpf-title-chevron {
    transition: transform .25s ease;
    opacity: .5;
    flex-shrink: 0;
}
.slpf-title-selected--open .slpf-title-chevron {
    transform: rotate(180deg);
    opacity: .8;
}

/* Title dropdown */
.slpf-title-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    background: #14141e;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 6px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.slpf-title-dropdown--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.slpf-title-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--slpf-text-sub);
    font-family: var(--slpf-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    text-align: left;
}
.slpf-title-opt:hover {
    background: rgba(255,255,255,.06);
    color: var(--slpf-text);
}
.slpf-title-opt--active {
    background: rgba(230,57,136,.12);
    color: var(--slpf-accent);
}
.slpf-title-opt--active:hover {
    background: rgba(230,57,136,.18);
    color: var(--slpf-accent);
}
.slpf-title-opt-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-style: normal;
}

.slpf-title-opt-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slpf-title-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--slpf-text-dim);
    font-size: 12px;
}

.slpf-member-since {
    color: var(--slpf-text-dim);
    font-size: 12px;
    margin-top: 10px;
}

/* ═══════════════════════════════════
   NEW TITLE EARNED — Popup + Overlay
   ═══════════════════════════════════ */
.slpf-nt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999998;
    opacity: 0;
    transition: opacity .35s ease;
}
.slpf-nt-overlay--show {
    opacity: 1;
}

.slpf-nt-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    width: 320px;
    max-width: 90vw;
    background: linear-gradient(165deg, #1a1a2e 0%, #111118 100%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 40px 32px 32px;
    text-align: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,1,.3,1);
    box-shadow:
        0 24px 80px rgba(0,0,0,.6),
        0 0 60px rgba(230,57,136,.1),
        0 0 0 1px rgba(255,255,255,.06) inset;
}
.slpf-nt-popup--show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.slpf-nt-icon {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 16px;
    animation: slpf-nt-bounce .6s ease .2s both;
}
@keyframes slpf-nt-bounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.slpf-nt-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slpf-accent);
    margin-bottom: 8px;
    font-family: var(--slpf-font);
}

.slpf-nt-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    margin-bottom: 8px;
    font-family: var(--slpf-font);
}

.slpf-nt-desc {
    font-size: 13px;
    color: rgba(255,255,255,.45);
    margin-bottom: 24px;
    line-height: 1.5;
    font-family: var(--slpf-font);
}

.slpf-nt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--slpf-accent), #d42f7b);
    color: #fff;
    font-family: var(--slpf-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 16px rgba(230,57,136,.3);
}
.slpf-nt-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(230,57,136,.45);
}

/* ═══════════════════════════════════
   XP BAR — Level Progress
   ═══════════════════════════════════ */
.slpf-xp {
    background: var(--slpf-card);
    border: 1px solid var(--slpf-card-border);
    border-radius: var(--slpf-radius);
    padding: 24px;
    margin-bottom: 16px;
}
.slpf-xp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.slpf-level-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--slpf-accent), #d42f7b);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
.slpf-xp-label {
    color: var(--slpf-text-sub);
    font-size: 13px;
    font-weight: 500;
}
.slpf-xp-track {
    height: 8px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.slpf-xp-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--slpf-accent), #f04090);
    transition: width .8s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 12px var(--slpf-accent-glow);
}
.slpf-xp-text {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--slpf-text-dim);
}

/* ═══════════════════════════════════
   STATS GRID
   ═══════════════════════════════════ */
.slpf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.slpf-stat {
    background: var(--slpf-card);
    border: 1px solid var(--slpf-card-border);
    border-radius: var(--slpf-radius-sm);
    padding: 18px 14px;
    text-align: center;
}
.slpf-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--slpf-text);
    line-height: 1.2;
}
.slpf-stat-value--accent { color: var(--slpf-accent); }
.slpf-stat-value--gold   { color: var(--slpf-gold); }
.slpf-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--slpf-text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

/* ═══════════════════════════════════
   BROKEN STREAK + FREEZE CARD
   ═══════════════════════════════════ */

/* Broken streak stat card */
.slpf-stat--broken {
    border-color: rgba(255,77,106,.2);
    background: rgba(255,77,106,.04);
}

.slpf-streak-dead {
    font-size: 20px;
    margin-right: 2px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.slpf-streak-zero {
    text-decoration: line-through;
    color: rgba(255,77,106,.7);
}

/* Freeze prompt card */
.slpf-freeze-card {
    background: var(--slpf-card);
    border: 1px solid rgba(33,150,243,.15);
    border-radius: var(--slpf-radius);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.slpf-freeze-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.slpf-freeze-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.slpf-freeze-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--slpf-text);
    margin-bottom: 2px;
}

.slpf-freeze-sub {
    font-size: 12px;
    color: var(--slpf-text-dim);
}

.slpf-freeze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2196F3, #1565C0);
    color: #fff;
    font-family: var(--slpf-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 16px rgba(33,150,243,.25);
}
.slpf-freeze-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(33,150,243,.4);
}
.slpf-freeze-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.slpf-freeze-btn--upgrade {
    background: linear-gradient(135deg, var(--slpf-accent), #d42f7b);
    box-shadow: 0 4px 16px var(--slpf-accent-glow);
    text-decoration: none;
}
.slpf-freeze-btn--upgrade:hover {
    box-shadow: 0 6px 24px rgba(230,57,136,.4);
    color: #fff;
}

.slpf-freeze-remaining {
    text-align: center;
    font-size: 11px;
    color: var(--slpf-text-dim);
    margin-top: 8px;
}


/* ═══════════════════════════════════
   TICKETS CARD
   ═══════════════════════════════════ */
.slpf-tickets {
    background: var(--slpf-card);
    border: 1px solid var(--slpf-card-border);
    border-radius: var(--slpf-radius);
    padding: 24px;
    margin-bottom: 16px;
}
.slpf-tickets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.slpf-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--slpf-text);
    margin: 0;
}
.slpf-tickets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.slpf-ticket-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--slpf-radius-sm);
    padding: 16px;
    text-align: center;
}
.slpf-ticket-box-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--slpf-text);
}
.slpf-ticket-box-label {
    font-size: 11px;
    color: var(--slpf-text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

/* ═══════════════════════════════════
   ACHIEVEMENTS
   ═══════════════════════════════════ */
.slpf-achievements {
    background: var(--slpf-card);
    border: 1px solid var(--slpf-card-border);
    border-radius: var(--slpf-radius);
    padding: 24px;
    margin-bottom: 16px;
}
.slpf-ach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.slpf-ach-count {
    font-size: 12px;
    color: var(--slpf-text-dim);
    font-weight: 500;
}
.slpf-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}
.slpf-ach {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 6px;
    border-radius: var(--slpf-radius-sm);
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.04);
    transition: transform .2s, border-color .2s;
    cursor: default;
    position: relative;
}
.slpf-ach:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.1);
}
.slpf-ach--locked {
    opacity: .3;
    filter: grayscale(1);
}
.slpf-ach--locked:hover {
    opacity: .5;
    filter: grayscale(.5);
}
.slpf-ach-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 6px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-style: normal;
}

.slpf-ach-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--slpf-text-sub);
    line-height: 1.3;
    letter-spacing: .01em;
}
.slpf-ach--locked .slpf-ach-name {
    color: var(--slpf-text-dim);
}

/* Achievement tooltip */
.slpf-ach-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 11px;
    color: var(--slpf-text-sub);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 10;
}
.slpf-ach:hover .slpf-ach-tooltip {
    opacity: 1;
}

/* ═══════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════ */
.slpf-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

/* ═══════════════════════════════════
   BUTTONS
   ═══════════════════════════════════ */
.slpf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--slpf-radius-sm);
    font-family: var(--slpf-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    border: none;
    outline: none;
}
.slpf-btn--primary {
    background: linear-gradient(135deg, var(--slpf-accent), #d42f7b);
    color: #fff;
    box-shadow: 0 4px 16px var(--slpf-accent-glow);
}
.slpf-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(230,57,136,.4);
}
.slpf-btn--ghost {
    background: rgba(255,255,255,.04);
    color: var(--slpf-text-sub);
    border: 1px solid rgba(255,255,255,.08);
}
.slpf-btn--ghost:hover {
    background: rgba(255,255,255,.08);
    color: var(--slpf-text);
    border-color: rgba(255,255,255,.15);
}
.slpf-btn--full {
    width: 100%;
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 560px) {
    .slpf { padding: 24px 16px 80px; }

    .slpf-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .slpf-stat { padding: 14px 8px; }
    .slpf-stat-value { font-size: 20px; }
    .slpf-stat-label { font-size: 10px; }

    .slpf-ach-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
    }
    .slpf-ach { padding: 10px 4px; }
    .slpf-ach-icon { font-size: 24px; }
    .slpf-ach-name { font-size: 9px; }

    .slpf-tickets-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .slpf-ticket-box-value { font-size: 22px; }

    .slpf-name { font-size: 22px; }
    .slpf-avatar { width: 80px; height: 80px; }

    .slpf-title-dropdown {
        min-width: 200px;
    }

    .slpf-nt-popup {
        width: 290px;
        padding: 32px 24px 28px;
    }
    .slpf-nt-icon { font-size: 44px; }
    .slpf-nt-name { font-size: 19px; }
}

@media (max-width: 380px) {
    .slpf-stats { grid-template-columns: 1fr 1fr 1fr; }
    .slpf-links { grid-template-columns: 1fr; }
}