.user-profile-page {
    width: min(1080px, calc(100% - 32px));
    margin: 16px auto 48px;
    color: var(--hodl-text);
}

.user-profile-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    color: var(--hodl-text-2);
    background: var(--hodl-accent-muted);
    border: 1px solid color-mix(in srgb, var(--hodl-accent) 30%, transparent);
    border-radius: var(--hodl-radius-lg);
    font-size: 12px;
}

.user-profile-preview-banner > div { display: flex; align-items: center; gap: 8px; }
.user-profile-preview-banner i { color: var(--hodl-accent-text); font-size: 16px; }
.user-profile-preview-banner__action {
    color: var(--hodl-accent-text);
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.user-profile-preview-banner__action:hover { color: var(--hodl-text); text-decoration: underline; }

.user-profile-page.is-public-preview .user-profile-public {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hodl-accent) 28%, transparent), 0 18px 48px rgba(5, 10, 18, .16);
}

.user-profile-public,
.user-profile-private {
    overflow: hidden;
    background: var(--hodl-surface);
    border: 1px solid var(--hodl-border);
    border-radius: var(--hodl-radius-lg);
    box-shadow: 0 18px 48px rgba(5, 10, 18, .16);
}

.user-profile-hero {
    position: relative;
}

.user-profile-hero__cover {
    height: 84px;
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--hodl-accent) 45%, transparent), transparent 30%),
        radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--hodl-up) 22%, transparent), transparent 28%),
        var(--hodl-panel-accent-bg);
}

.user-profile-hero__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to right, #000, transparent 85%);
}

.user-profile-hero__content {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 0 16px 16px;
}

.user-profile-avatar-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin-top: -36px;
}

.user-profile-avatar {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: cover;
    background: var(--hodl-surface-2);
    border: 4px solid var(--hodl-surface);
    border-radius: var(--hodl-radius-pill);
    box-shadow: 0 10px 24px rgba(5, 10, 18, .32);
}

.user-profile-avatar-status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    background: var(--hodl-up);
    border: 3px solid var(--hodl-surface);
    border-radius: 50%;
    color: var(--hodl-text-on-up);
}

.user-profile-identity { min-width: 0; padding-top: 8px; }
.user-profile-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.user-profile-eyebrow { display: inline-flex; align-items: center; gap: 4px; color: var(--hodl-text-3); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.user-profile-title-row h1 { margin: 2px 0 0; color: var(--hodl-text); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em; }
.user-profile-handle { margin: 0; color: var(--hodl-text-2); font-size: 12px; }

.user-profile-actions,
.user-profile-section-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.user-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    color: var(--hodl-text);
    background: var(--hodl-surface-2);
    border: 1px solid var(--hodl-border-strong);
    border-radius: var(--hodl-radius-md);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.user-profile-btn:hover { color: var(--hodl-text); transform: translateY(-1px); }
.user-profile-btn--primary { color: var(--hodl-text-on-accent); background: var(--hodl-accent); border-color: var(--hodl-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--hodl-accent) 30%, transparent); }
.user-profile-btn--primary:hover { background: var(--hodl-accent-hover); }
.user-profile-btn--secondary:hover { background: var(--hodl-surface-3); }
.user-profile-btn--following { color: var(--hodl-up-text); background: var(--hodl-up-soft); border-color: color-mix(in srgb, var(--hodl-up) 35%, transparent); }
.user-profile-btn:disabled { cursor: wait; opacity: .58; transform: none; }

.user-profile-bio { max-width: 56ch; margin: 8px 0 8px; color: var(--hodl-text-2); font-size: 13px; line-height: 1.5; }
.user-profile-bio--empty { color: var(--hodl-text-3); font-style: italic; }
.user-profile-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.user-profile-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; color: var(--hodl-text-2); background: var(--hodl-surface-2); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-pill); font-size: 11px; }
.user-profile-meta i { color: var(--hodl-accent); }

.user-profile-metrics-hub {
    display: grid;
    gap: 8px;
    padding: 12px 16px 12px;
    border-top: 1px solid var(--hodl-border);
    background: var(--hodl-surface-2);
}

@media (min-width: 900px) {
    .user-profile-metrics-hub:has(.user-profile-metrics-group--private) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.user-profile-metrics-group {
    padding: 8px;
    background: var(--hodl-surface);
    border: 1px solid var(--hodl-border);
    border-radius: var(--hodl-radius-lg);
}

.user-profile-metrics-group--private {
    background: var(--hodl-surface-3);
    border-color: var(--hodl-border);
}

.user-profile-metrics-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.user-profile-metrics-group__head .user-profile-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.user-profile-metrics-group__head .user-profile-eyebrow i {
    color: var(--hodl-accent);
    font-size: 12px;
}

.user-profile-metrics-group--private .user-profile-metrics-group__head .user-profile-eyebrow i {
    color: var(--hodl-text-3);
}

.user-profile-metrics-group__hint {
    color: var(--hodl-text-3);
    font-size: 11px;
    white-space: nowrap;
}

.user-profile-metrics-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.user-profile-metric-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 6px 8px;
    background: var(--hodl-surface-2);
    border: 1px solid var(--hodl-border);
    border-radius: var(--hodl-radius-md);
    transition: background .14s ease, border-color .14s ease;
}

.user-profile-metric-chip:hover {
    background: var(--hodl-surface-3);
    border-color: var(--hodl-border-strong);
}

.user-profile-metric-chip strong,
.user-profile-metric-chip span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-metric-chip strong {
    color: var(--hodl-text);
    font-size: 14px;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.user-profile-metric-chip span {
    color: var(--hodl-text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.2;
}

.user-profile-metric-chip--private {
    background: var(--hodl-surface-3);
    border-color: var(--hodl-border);
}

.user-profile-metric-chip--private strong {
    color: var(--hodl-text);
}

.user-profile-metric-chip--private span {
    color: var(--hodl-text-3);
}

.user-profile-page.is-public-preview [data-profile-private-stats] {
    display: none !important;
}

.user-profile-public-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 16px 16px;
}

@media (min-width: 900px) {
    .user-profile-public-grid--split {
        grid-template-columns: minmax(0, 1.55fr) minmax(240px, 300px);
        align-items: start;
    }
}

.user-profile-content-card { min-width: 0; overflow: hidden; background: var(--hodl-surface); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); }
.user-profile-content-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 12px; border-bottom: 1px solid var(--hodl-border); }
.user-profile-content-head h2 { margin: 2px 0 0; color: var(--hodl-text); font-size: 14px; }
.user-profile-content-head > span { color: var(--hodl-text-3); font-size: 11px; white-space: nowrap; }

.user-profile-note-list,
.user-profile-wallet-list { display: grid; }
.user-profile-note,
.user-profile-wallet { display: grid; align-items: start; gap: 8px; padding: 8px 12px; color: inherit; border-bottom: 1px solid var(--hodl-border-subtle); text-decoration: none; transition: background .14s ease; }
.user-profile-note { grid-template-columns: auto minmax(0, 1fr); }
.user-profile-wallet { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
.user-profile-note:last-child, .user-profile-wallet:last-child { border-bottom: 0; }
.user-profile-note:hover, .user-profile-wallet:hover { color: inherit; background: var(--hodl-accent-muted); }

.user-profile-note__icon, .user-profile-wallet__logo {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--hodl-accent-text);
    background: var(--hodl-accent-muted);
    border: 1px solid color-mix(in srgb, var(--hodl-accent) 20%, transparent);
    border-radius: var(--hodl-radius-md);
}

.user-profile-note__icon > i,
.user-profile-note__icon.mdi::before {
    font-size: 1rem;
    line-height: 1;
    font-style: normal;
}

.user-profile-note__icon--coin {
    padding: 0;
    background: var(--hodl-surface-2);
    border: 1px solid var(--hodl-border);
    overflow: hidden;
}

.user-profile-note__icon--coin img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--hodl-radius-md);
}

.user-profile-note__body { min-width: 0; display: grid; gap: 2px; }
.user-profile-note__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.user-profile-note__head strong {
    min-width: 0;
    overflow: hidden;
    color: var(--hodl-text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-note__tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--hodl-text-3);
    font-size: 11px;
}

.user-profile-note__tags b {
    color: var(--hodl-accent-text);
    font-weight: 700;
}

.user-profile-note__excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: var(--hodl-text-2);
    font-size: 11px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.user-profile-note__engagement { display: flex; gap: 8px; color: var(--hodl-text-3); font-size: 11px; }
.user-profile-note__engagement span { display: inline-flex; align-items: center; gap: 2px; }
.user-profile-note__engagement i { font-size: 12px; color: var(--hodl-accent-text); }

.user-profile-wallet > span { min-width: 0; }
.user-profile-wallet strong { display: block; overflow: hidden; color: var(--hodl-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-wallet small { display: block; margin-top: 2px; overflow: hidden; color: var(--hodl-text-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-wallet__value { text-align: right; }
.user-profile-wallet__value small.is-positive, .is-positive { color: var(--hodl-up-text); }
.user-profile-wallet__value small.is-negative, .is-negative { color: var(--hodl-down-text); }
.user-profile-wallet > i { color: var(--hodl-text-3); }

.user-profile-empty {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--hodl-text-3);
    text-align: center;
}

.user-profile-empty--compact {
    min-height: 108px;
    padding: 16px 12px;
}

.user-profile-empty i { margin-bottom: 6px; color: var(--hodl-accent-text); font-size: 18px; }
.user-profile-empty strong { color: var(--hodl-text-2); font-size: 12px; }
.user-profile-empty span { max-width: 280px; margin-top: 2px; font-size: 11px; line-height: 1.4; }

.user-profile-private { margin-top: 12px; padding: 16px; }
.user-profile-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.user-profile-section-head h2 { margin: 2px 0 2px; color: var(--hodl-text); font-size: 1rem; }
.user-profile-section-head p { margin: 0; color: var(--hodl-text-3); font-size: 11px; }
.user-profile-private-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 8px; }
.user-profile-private-grid--duo { grid-template-columns: 1.15fr .85fr; }
.user-profile-private-card { min-width: 0; padding: 12px; background: var(--hodl-surface); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); }
.user-profile-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.user-profile-card-title > span { display: grid; place-items: center; width: 32px; height: 32px; color: var(--hodl-accent-text); background: var(--hodl-accent-muted); border-radius: var(--hodl-radius-md); }
.user-profile-card-title small, .user-profile-card-title h3 { display: block; margin: 0; }
.user-profile-card-title small { color: var(--hodl-text-3); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.user-profile-card-title h3 { margin-top: 1px; color: var(--hodl-text); font-size: 13px; }
.user-profile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.user-profile-metrics > div { min-width: 0; padding: 8px; background: var(--hodl-surface-2); border-radius: var(--hodl-radius-md); }
.user-profile-metrics span, .user-profile-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.user-profile-metrics span { color: var(--hodl-text-3); font-size: 11px; }
.user-profile-metrics strong { margin-top: 2px; color: var(--hodl-text); font-size: 12px; white-space: nowrap; }
.user-profile-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--hodl-text-3); font-size: 11px; }
.user-profile-card-footer span { padding: 2px 6px; background: var(--hodl-surface-2); border-radius: var(--hodl-radius-pill); }
.user-profile-card-footer a { margin-left: auto; color: var(--hodl-accent-text); font-weight: 700; }
.user-profile-private-list { display: grid; gap: 6px; }
.user-profile-private-list > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 6px; color: var(--hodl-text-2); border-bottom: 1px solid var(--hodl-border-subtle); font-size: 11px; }
.user-profile-private-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.user-profile-private-list strong { color: var(--hodl-text); font-size: 11px; }
.user-profile-private-email { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-progress { height: 4px; margin-top: 12px; overflow: hidden; background: var(--hodl-surface-3); border-radius: var(--hodl-radius-pill); }
.user-profile-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--hodl-accent), var(--hodl-up)); }
.user-profile-card-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--hodl-accent-text); font-size: 11px; font-weight: 700; }

.user-profile-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.user-profile-activity-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.user-profile-activity-summary > div {
    padding: 8px;
    background: linear-gradient(135deg, var(--hodl-accent-muted), var(--hodl-up-soft));
    border: 1px solid color-mix(in srgb, var(--hodl-accent) 22%, transparent);
    border-radius: var(--hodl-radius-md);
}

.user-profile-activity-summary span,
.user-profile-activity-summary strong {
    display: block;
}

.user-profile-activity-summary span {
    color: var(--hodl-text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.user-profile-activity-summary strong {
    margin-top: 2px;
    color: var(--hodl-text);
    font-size: 13px;
}

.user-profile-activity-tile {
    display: grid;
    gap: 2px;
    padding: 8px;
    background: var(--hodl-surface-2);
    border: 1px solid var(--hodl-border);
    border-radius: var(--hodl-radius-md);
}

.user-profile-activity-tile i {
    color: var(--hodl-accent-text);
    font-size: 14px;
}

.user-profile-activity-tile strong {
    color: var(--hodl-text);
    font-size: 14px;
}

.user-profile-activity-tile span {
    color: var(--hodl-text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.user-profile-private-list--compact {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--hodl-border-subtle);
}

.user-profile-private-card--research .user-profile-card-title {
    margin-bottom: 8px;
}

.user-profile-modal .modal-dialog { max-width: 760px; }
.user-profile-modal__sheet { position: relative; overflow: hidden; color: var(--hodl-text); background: var(--hodl-surface); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-lg); box-shadow: var(--hodl-shadow-lg); }
.user-profile-modal__close { position: absolute; top: 11px; right: 11px; z-index: 5; display: grid; place-items: center; width: 34px; height: 34px; color: var(--hodl-text-2); background: var(--hodl-surface-3); border: 1px solid var(--hodl-border); border-radius: var(--hodl-radius-md); backdrop-filter: blur(8px); }
.user-profile-modal__close:hover { color: var(--hodl-text); background: var(--hodl-surface-2); }
.user-profile-modal .user-profile-public { border: 0; border-radius: 0; box-shadow: none; }
.user-profile-public--compact .user-profile-hero__cover { height: 78px; }
.user-profile-public--compact .user-profile-hero__content { padding-bottom: 16px; }
.user-profile-modal__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; color: var(--hodl-text-3); background: var(--hodl-surface-3); border-top: 1px solid var(--hodl-border); font-size: 11px; }

.user-preview-inline { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; margin-left: auto; color: var(--hodl-text-2); background: transparent; border: 1px solid transparent; border-radius: var(--hodl-radius-md); }
.user-preview-inline:hover { color: var(--hodl-accent-text); background: var(--hodl-accent-muted); border-color: color-mix(in srgb, var(--hodl-accent) 20%, transparent); }
.user-preview-inline.user-profile-btn {
    min-width: 36px;
    margin-left: 0;
    padding-inline: 9px;
}

@media (max-width: 1050px) {
    .user-profile-private-grid { grid-template-columns: 1fr 1fr; }
    .user-profile-private-card--portfolio { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
    .user-profile-metrics-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-profile-public-grid--split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .user-profile-page { width: min(100% - 16px, 1080px); margin-top: 8px; }
    .user-profile-preview-banner, .user-profile-section-head { align-items: flex-start; flex-direction: column; }
    .user-profile-hero__content { grid-template-columns: 1fr; gap: 6px; padding: 0 12px 16px; }
    .user-profile-avatar-wrap { width: 76px; height: 76px; margin-top: -32px; }
    .user-profile-avatar { width: 76px; height: 76px; border-radius: var(--hodl-radius-lg); }
    .user-profile-identity { padding-top: 0; }
    .user-profile-title-row { flex-direction: column; gap: 8px; }
    .user-profile-actions { width: 100%; }
    .user-profile-actions .user-profile-btn { flex: 1; }
    .user-profile-note__head { flex-direction: column; align-items: flex-start; gap: 2px; }
    .user-profile-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-profile-activity-summary { grid-template-columns: 1fr; }
    .user-profile-public-grid, .user-profile-private-grid { grid-template-columns: 1fr; }
    .user-profile-private-card--portfolio { grid-column: auto; }
    .user-profile-section-actions { width: 100%; flex-wrap: wrap; }
    .user-profile-section-actions .user-profile-btn { flex: 1; }
    .user-profile-metrics { grid-template-columns: 1fr; }
    .user-profile-modal .modal-dialog { margin: 8px; }
    .user-profile-modal__footer { align-items: stretch; flex-direction: column; }
}

/* ── Strona feedu notatek usera (/user/<id>/notes) ── */
.user-profile-content-head__link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ct-primary, var(--hodl-accent)); font-size: 13px; font-weight: 600; text-decoration: none;
    white-space: nowrap;
}
.user-profile-content-head__link:hover { text-decoration: underline; }
.user-profile-feed { margin-top: 16px; }
.user-profile-feed .user-profile-content-head { margin-bottom: 12px; }