/* User Profile Styles */
/* max-width usklađen sa Steam-om (izmereno na pravom profilu: .profile_content ~952px na
   stranici od 1386px = 68.7% širine) — ranijih 1200px je ostavljalo premalo prostora sa
   strane da se pozadina profila uopšte vidi. */
#user-profile-container {
    max-width: 976px;
    margin: 0 auto;
    background: var(--background-color, #1a1a1a);
    min-height: 100vh;
}

/* Profile Info Section — čist okvir bez punih površina, da pozadina profila
   (kad je postavljena) ostane vidljiva kroz ceo blok; gasi se ka dnu istim
   gradientom kao i do sada preko #user-profile-page-background::after. */
#user-profile-info {
    padding: 28px 40px 24px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 0;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 30%, transparent);
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 30%, transparent);
}

#user-profile-avatar-wrap {
    position: relative;
    width: 148px;
    height: 148px;
    flex-shrink: 0;
}

/* Prsten je plain CSS border direktno na avataru — najmanje pokretnih delova,
   dokazano glatko na 1/3/8px u izolovanom testu, bez ::after sloja i bez
   GPU layer promotion trikova koji su ranije unosili aliasing (box-shadow na
   ::after + translateZ(0) je davao mekšu/stepenastu ivicu na zumu). border-box
   znači da border "jede" iz iste 100% dimenzije umesto da je uvećava. */
#user-profile-avatar {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #3a3a3a;
    margin-top: 0;
    border: var(--dn-avatar-border-width, 3px) solid var(--dn-accent-1, #e11d48);
}

/* Avatar dekoracija — animirani okvir preko avatara (Discord-style), veći od avatara samog
   i centriran, ne blokira klik na avatar. */
#user-profile-avatar-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116%;
    height: 150%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    object-fit: contain;
    background: transparent;
}

/* Deljena klasa za dekoraciju avatara van profilne stranice (header, notifikacije,
   liste prijatelja, Zanimacija, Spin Wars...) — isti procentualni odnos, relativan
   prema kontejneru u kom se nalazi, radi na avatarima raznih veličina. */
.avatar-decoration-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116%;
    height: 150%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    object-fit: contain;
    background: transparent;
}

#user-profile-details {
    flex: 1;
    padding-bottom: 20px;
    padding-top: 10px;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: visible; /* Allow hover animations to extend */
}

#user-profile-header-text {
    margin-bottom: 15px;
    width: 100%;
    min-width: 0;
    overflow: visible; /* Allow hover animations to extend */
}

#user-profile-display-name {
    font-size: 2.5rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.5px;
    margin: 0 0 5px 0;
    color: var(--text-color, #ffffff);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    white-space: normal;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* Level / XP traka — placeholder, vrednosti pune JS kasnije */
#user-profile-level-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0 0;
    max-width: 360px;
}

#user-profile-level-badge {
    flex-shrink: 0;
    font-weight: 800;
    font-style: italic;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(115deg, var(--dn-accent-1, #e11d48), var(--dn-accent-2, #991b1e));
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

#user-profile-xp-bar {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--dn-accent-1, #e11d48);
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 30%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

#user-profile-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48));
    box-shadow: 0 0 8px var(--dn-accent-1, #e11d48);
    transition: width 0.4s ease;
}

#user-profile-xp-text {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: #aaa;
    white-space: nowrap;
}

#user-profile-active-title {
    vertical-align: middle;
    align-self: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Equipovana titula — pill u site jeziku: zaobljeni uglovi, tamna providna pozadina,
   boja rariteta ide samo kroz ivicu/ikonicu/glow, ne kroz šareni gradient. */
.rn-title-badge {
    --tier-color: #9e9e9e;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px 6px 13px;
    background: rgba(30, 30, 40, 0.88);
    border: 1px solid color-mix(in srgb, var(--tier-color) 55%, transparent);
    border-radius: 999px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.rn-title-badge i {
    color: var(--tier-color);
    font-size: 0.85em;
}

.rn-title-badge:hover {
    transform: translateY(-1px);
    background: rgba(38, 38, 50, 0.95);
    border-color: var(--tier-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--tier-color) 40%, transparent);
}

.rn-title-badge[data-rarity="secret"] {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.3);
}
.rn-title-badge[data-rarity="secret"]:hover {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

/* Poslednje gledano + Prijatelji u istom redu */
#user-lastwatched-friends-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
    align-items: start;
}

/* Grid item po defaultu ne može da se skupi ispod sadržajne (min-content) širine
   svoje dece (isti kvirk kao kod #header flex-a) - kartice "poslednje gledano"
   su zato gurale ceo red širi od ekrana na mobilnom umesto da tekst elipsuje. */
#user-last-watched-section,
#last-watched-cards {
    min-width: 0;
}

@media (max-width: 900px) {
    #user-lastwatched-friends-row {
        grid-template-columns: 1fr;
    }
}

/* Prijatelji — kompaktna vertikalna lista sa scroll-om, najviši level na vrhu */
#friends-list-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.friend-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-align: left !important;
    padding: 5px 6px !important;
    margin: 0 !important;
}

.friend-item .friend-avatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.friend-item .friend-info {
    flex: 1;
    min-width: 0;
}

.friend-item .friend-name {
    font-size: 0.82rem !important;
}

.friend-item .friend-username {
    font-size: 0.72rem !important;
}

.friend-item .friend-name,
.friend-item .friend-username {
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-level-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48));
    padding: 2px 7px;
    border-radius: 999px;
}

#user-profile-username {
    font-size: 1.3rem;
    font-weight: normal;
    margin: 0;
    color: #888;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

#user-profile-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 20px;
    margin-top: 15px;
}

#user-profile-biography {
    margin-top: 30px;
    margin-bottom: 15px;
    padding: 15px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ddd;
    font-size: 1rem;
    line-height: 1.6;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    clear: both;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#user-profile-biography p {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#user-profile-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    margin-top: 15px;
}

.user-profile-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.like-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.like-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.user-profile-btn.like-btn.liked {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
}

.user-profile-btn.like-btn.liked:hover {
    background: #c0392b;
    border-color: #c0392b;
}

.user-profile-btn.friend-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-profile-btn.friend-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.user-profile-btn.spin-wars-btn {
    background: rgba(255, 87, 34, 0.2);
    color: white;
    border: 1px solid rgba(255, 87, 34, 0.4);
}

.user-profile-btn.spin-wars-btn:hover {
    background: rgba(255, 87, 34, 0.3);
    border-color: rgba(255, 87, 34, 0.6);
}

.user-profile-btn.friend-btn.friends {
    background: #4a90e2;
    border-color: #4a90e2;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-profile-btn.friend-btn.friends:hover {
    background: #e74c3c;
    border-color: #e74c3c;
}

.user-profile-btn.friend-btn.request-sent {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

.user-profile-btn.friend-btn.request-sent:hover {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.5);
}

.user-profile-btn.friend-btn.request-received {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
    color: #4caf50;
    cursor: default;
}

.edit-btn {
    background: #4a90e2;
    color: white;
}

.edit-btn:hover {
    background: #357abd;
}

.report-btn {
    background: #e74c3c;
    color: white;
}

.report-btn:hover {
    background: #c0392b;
}

/* Profile Content */
#user-profile-content {
    padding: 0 40px 40px;
}

/* User Search Section — čist red bez pozadinske kutije, underline input */
#user-search-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 40px;
}

.user-search-container {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.user-search-input {
    flex: 1;
    padding: 10px 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.user-search-input:focus {
    outline: none;
    border-color: var(--dn-accent-1, #e11d48);
}

.user-search-input::placeholder {
    color: #777;
}

.user-search-container #user-search-btn {
    padding: 10px 22px;
    border: 1px solid var(--dn-accent-1, #e11d48);
    background: transparent;
    color: var(--dn-accent-1, #e11d48);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-search-container #user-search-btn:hover {
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48));
    color: #fff;
    border-color: transparent;
}

.user-search-result-item {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-search-result-item:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    transform: translateX(5px);
}

.user-search-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #3a3a3a;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Friends Section */
.friend-item {
    padding: 12px 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    transition: border-color 0.3s;
    text-align: center;
    transform: none !important;
}

.friend-item:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    transform: none !important;
}

.friend-avatar {
    display: block;
}

.friend-item:hover .friend-avatar {
    transition: none;
}

/* Favorite Anime Styles */
.favorite-anime-item {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
}

.favorite-anime-item:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    transform: translateY(-2px);
}

.favorite-anime-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-color: transparent;
}

.favorite-anime-name {
    padding: 10px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Favorites Modal - Desktop styles */
.modal-overlay .modal-content {
    padding: 0;
}

.modal-overlay .modal-header {
    padding: 20px 24px;
}

.modal-overlay .modal-body {
    padding: 24px;
}

#favorites-modal-list {
    padding: 0;
}

/* Stats — čist red, bez pojedinačnih kutija, samo tanke razdelne linije */
#user-profile-stats {
    display: flex;
    border-top: 1px solid var(--dn-accent-1, #e11d48);
    border-top-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 25%, transparent);
    border-bottom: 1px solid var(--dn-accent-1, #e11d48);
    border-bottom-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 25%, transparent);
    margin-bottom: 40px;
}

.stat-item {
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    padding: 16px 8px;
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}

.stat-item:last-child {
    border-right: none;
}

.stat-item:hover {
    background: color-mix(in srgb, var(--dn-accent-1, #e11d48) 6%, transparent);
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    font-style: italic;
    color: var(--dn-accent-1, #e11d48);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.78rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Tabs */
#user-profile-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.profile-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #aaa;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}

.profile-tab:hover {
    color: var(--text-color, #ffffff);
}

.profile-tab.active {
    color: var(--accent-color, #4a90e2);
    border-bottom-color: var(--accent-color, #4a90e2);
}

/* Tab Content */
#user-profile-tab-content {
    min-height: 300px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1rem;
}

/* Responsive */
/* Edit Profile Modal */
.edit-profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 100% zna da bude viši od stvarno vidljivog dela na mobilnom (adresna traka
       se računa u layout viewport ali ne u vidljivi) - dvh prati stvarnu vidljivu
       visinu pa se sadržaj ne pomera ispod nje. Fallback 100% ostaje za starije browsere. */
    height: 100dvh;
    background: rgba(0, 0, 0, 0.82);
    /* Namerno NE flex+align-items:center - kad je sadržaj viši od kontejnera,
       centriran flex item "curi" simetrično gore/dole, ali gornji deo koji ode
       van vrha kontejnera se ne može skrolovati do njega (poznat CSS kvirk, i
       nepouzdano podržan "safe center" fix na starijim mobilnim browserima kao
       Samsung Internet). Umesto toga: običan blok layout + margin:auto na
       sadržaju - uvek počinje od vrha, nikad se ne odseca, samo se skroluje. */
    display: block;
    text-align: center;
    z-index: 10000;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.edit-profile-modal-content {
    background: #161616;
    border: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 35%, transparent);
    border-radius: 4px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px color-mix(in srgb, var(--dn-accent-1, #e11d48) 8%, transparent);
    box-sizing: border-box;
    /* Overlay je sad blok + text-align:center (vidi .edit-profile-modal-overlay) -
       inline-block + margin daje horizontalno centriranje i razmak od vrha bez
       flex align-items:center kvirka koji je odsecao sadržaj. */
    display: inline-block;
    text-align: left;
    margin: 40px auto;
    vertical-align: top;
}

.edit-profile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 30%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--dn-accent-1, #e11d48) 8%, transparent), transparent);
}

.edit-profile-modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.3px;
    color: var(--text-color, #ffffff);
    text-shadow: 1px 1px 0 color-mix(in srgb, var(--dn-accent-1, #e11d48) 40%, transparent);
}

.edit-profile-modal-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 1.5rem;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.edit-profile-modal-close:hover {
    background: color-mix(in srgb, var(--dn-accent-1, #e11d48) 15%, transparent);
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    color: #fff;
}

.edit-profile-modal-body {
    padding: 25px;
}

.edit-profile-form-group {
    margin-bottom: 22px;
}

.edit-profile-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.edit-profile-input,
.edit-profile-textarea {
    width: 100%;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--text-color, #ffffff);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
    max-width: 100%;
}

.edit-profile-input:focus,
.edit-profile-textarea:focus {
    outline: none;
    border-color: var(--dn-accent-1, #e11d48);
    background: color-mix(in srgb, var(--dn-accent-1, #e11d48) 6%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-accent-1, #e11d48) 15%, transparent);
}

/* Native <select> dropdown popup ne nasleđuje pozadinu stranice (OS-render) — Firefox i
   Chrome ipak poštuju background/color postavljen direktno na <option>, pa se eksplicitno
   postavlja da lista ne ostane bela na tamnoj temi. */
select.edit-profile-input option {
    background: #1e1e1e;
    color: #ffffff;
}

.edit-profile-textarea {
    resize: vertical;
    min-height: 100px;
}

.edit-profile-help {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #777;
}

.edit-profile-error {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #ff6b6b;
}

.edit-profile-success {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #4ade80;
    font-weight: 500;
}

.edit-profile-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.edit-profile-btn {
    padding: 10px 22px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #ddd;
}

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

.cancel-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #aaa;
}

.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.save-btn {
    background: linear-gradient(115deg, var(--dn-accent-1, #e11d48), var(--dn-accent-2, #991b1e));
    color: #fff;
}

.save-btn:hover {
    background: linear-gradient(115deg, #f43060, #b3222a);
    box-shadow: 0 0 16px color-mix(in srgb, var(--dn-accent-1, #e11d48) 40%, transparent);
}

.save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Checkbox/range accent — accent-color je nativna CSS osobina (Chrome/Firefox je
   podržavaju bez potrebe za custom markup-om) koja oboji i checkbox i <input type=range>
   thumb/track u akcentnu boju sajta, umesto plavog OS default-a. */
.edit-profile-form-group input[type="checkbox"],
.edit-profile-form-group input[type="range"] {
    accent-color: var(--dn-accent-1, #e11d48);
}

/* Dugme koje otvara custom color picker popover (vidi .dn-color-popover) — zamena za
   <input type="color">, jer native color-picker dijalog je OS-nivo prozor koji se ne može
   stilizovati (ista prepreka kao native <select> popup). Krug sa crvenim okvirom prati
   avatar-ring estetiku sajta. */
.dn-color-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    flex-shrink: 0;
}

.dn-color-swatch:hover {
    border-color: var(--dn-accent-1, #e11d48);
    transform: scale(1.06);
}

.dn-color-popover {
    position: absolute;
    z-index: 10001;
    width: 220px;
    padding: 14px;
    background: #161616;
    border: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 40%, transparent);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px color-mix(in srgb, var(--dn-accent-1, #e11d48) 12%, transparent);
}

.dn-color-sv {
    position: relative;
    width: 100%;
    height: 130px;
    border-radius: 4px;
    cursor: crosshair;
    touch-action: none;
    margin-bottom: 12px;
}

.dn-color-sv-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.dn-color-hue {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    cursor: pointer;
    touch-action: none;
    margin-bottom: 12px;
}

.dn-color-hue-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.dn-color-popover-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dn-color-popover-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.dn-color-hex-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-family: monospace;
    font-size: 0.9rem;
    text-transform: lowercase;
}

.dn-color-hex-input:focus {
    outline: none;
    border-color: var(--dn-accent-1, #e11d48);
}

.dn-font-select {
    margin-bottom: 14px;
}

.dn-style-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dn-style-row:last-of-type {
    border-bottom: none;
}

/* element+class da nadjača .edit-profile-form-group label (isti nivo specifičnosti,
   pobeđuje po redosledu jer je definisano posle) — bez ovoga bi cele rečenice u
   checkbox labelama (npr. privacy opcije) postale UPPERCASE/bold kao section naslovi. */
label.dn-style-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: normal;
    color: #ddd;
    cursor: pointer;
    margin-bottom: 0;
}

.dn-style-toggle-hint {
    color: #777;
    font-weight: 400;
    font-size: 0.82rem;
}

/* Toggle switch — zamenjuje plain checkbox svuda u Uredi profil (izgled imena, akcentna
   boja, ivica avatara, privacy opcije). Sam <input type="checkbox"> ostaje funkcionalno
   isti (getElementById/checked/change event rade nepromenjeno), samo je vizuelno sakriven
   i zamenjen sa .toggle-slider koji prati njegovo :checked stanje preko + selektora. */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
}

.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48));
    border-color: transparent;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(15px);
}

.toggle-switch input[type="checkbox"]:focus-visible + .toggle-slider {
    outline: 2px solid var(--dn-accent-1, #e11d48);
    outline-offset: 2px;
}

label.dn-glow-intensity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #999;
    font-weight: 600;
    margin-left: auto;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal;
}

.dn-glow-intensity input[type="range"] {
    width: 90px;
}

.dn-preview-box {
    margin-top: 14px;
    padding: 22px 16px;
    background: #0d0d0d;
    border: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 20%, transparent);
    border-radius: 4px;
    text-align: center;
}

.dn-preview-box span {
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
}

/* Mini-mockup nivo bedža/xp trake/statistike u editoru akcentne boje — reciklira iste
   var(--dn-accent-1/2) i color-mix formule kao stvarni elementi na profilu, samo u
   manjoj razmeri, da korisnik vidi rezultat uživo dok bira boju bez izlaska iz modala. */
.dn-accent-preview-box {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 14px 16px;
}

.dn-accent-preview-avatar {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #3a3a3a;
    border: var(--dn-avatar-border-width, 3px) solid var(--dn-accent-1, #e11d48);
}

.dn-accent-preview-main {
    flex: 1;
    min-width: 0;
}

.dn-accent-preview-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dn-accent-preview-level-badge {
    flex-shrink: 0;
    font-weight: 800;
    font-style: italic;
    font-size: 0.7rem;
    color: #fff;
    background: linear-gradient(115deg, var(--dn-accent-1, #e11d48), var(--dn-accent-2, #991b1e));
    padding: 2px 8px;
    border-radius: 999px;
}

.dn-accent-preview-xp-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--dn-accent-1, #e11d48);
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 30%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

.dn-accent-preview-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48));
    box-shadow: 0 0 6px var(--dn-accent-1, #e11d48);
}

.dn-accent-preview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 10px;
}

.dn-accent-preview-stats > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

/* Specifičnost mora da nadjača ".dn-preview-box span" (deli isti .dn-preview-box okvir sa
   izgledom imena, gde span nasilno postaje belo/1.5rem) — bez ovoga brojevi ovde ostaju
   beli i ne prate promenu akcentne boje. */
.dn-accent-preview-box .dn-accent-preview-stat-value {
    font-size: 1rem;
    font-weight: 800;
    font-style: italic;
    color: var(--dn-accent-1, #e11d48);
}

.dn-accent-preview-box .dn-accent-preview-stat-label {
    font-size: 0.7rem;
    color: #999;
}

@media (max-width: 768px) {
    /* Horizontalni raspored i na mobilnom — avatar levo, sve ostalo desno u koloni,
       isto kao desktop samo manje, umesto centriranog vertikalnog steka. */
    #user-profile-info {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 18px;
        gap: 14px;
    }

    #user-profile-level-row {
        max-width: 100%;
        justify-content: flex-start;
        margin-bottom: 8px;
    }

    #user-profile-avatar-wrap {
        width: 84px;
        height: 84px;
        margin-bottom: 0;
        order: 1;
    }

    #user-profile-details {
        width: auto;
        flex: 1;
        min-width: 0;
        align-items: flex-start;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        order: 2;
        overflow: visible; /* Allow hover animations to extend */
    }

    #user-profile-header-text {
        margin-bottom: 6px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        order: 1;
        overflow: visible; /* Allow hover animations to extend */
    }

    #user-profile-display-name {
        font-size: 1.35rem;
        margin: 0;
        line-height: 1.25;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        order: 2;
        gap: 6px;
        width: 100%;
        text-align: left;
        overflow: hidden;
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        padding: 0;
    }

    /* Streak badge on mobile */
    .streak-badge {
        font-size: 0.85rem !important;
        margin-left: 4px !important;
        padding: 2px 5px !important;
        margin-top: 0 !important;
    }
}

/* Streak tooltip animations */
@keyframes streakTooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes streakTooltipFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(5px);
    }
}

@media (max-width: 768px) {
    /* Active title styling for mobile — levo poravnato, isto kao ostatak hero bloka. */
    #user-profile-header-text > #user-profile-active-title {
        order: 1;
        margin-bottom: 6px;
        display: block !important;
        width: auto;
        text-align: left;
        margin-left: 0 !important;
        margin-right: auto !important;
        align-self: flex-start;
    }

    /* Active title when inside display name (should not happen on mobile, but just in case) */
    #user-profile-display-name #user-profile-active-title {
        order: -1;
        margin-bottom: 6px;
        display: block !important;
        width: auto;
        text-align: left;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: flex-start;
    }

    #user-profile-active-title > div {
        margin-left: 0 !important;
        margin-right: auto !important;
        justify-content: flex-start !important;
    }

    #user-profile-username {
        font-size: 0.95rem;
        margin: 0;
        order: 3;
        margin-top: 2px;
        width: 100%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        max-width: 100%;
        padding: 0;
    }

    #user-profile-meta {
        justify-content: flex-start;
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 0.78rem;
        order: 2;
        width: 100%;
        text-align: left;
        flex-wrap: wrap;
        gap: 10px;
    }

    #user-profile-biography {
        order: 3;
        width: 100%;
        text-align: left;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    #user-profile-actions {
        order: 4;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #user-profile-actions .user-profile-btn {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    #user-profile-content {
        padding: 0 20px 20px;
    }
    
    #user-profile-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .stat-item {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stat-item:nth-child(2n) {
        border-right: none;
    }

    .stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .user-search-container {
        flex-direction: column;
    }
    
    /* Modal improvements for mobile */
    .edit-profile-modal-overlay {
        padding: 16px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .edit-profile-modal-content {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        max-height: calc(100dvh - 32px);
        margin: 0 auto;
        border-radius: 12px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .edit-profile-modal-body {
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .edit-profile-input,
    .edit-profile-textarea {
        box-sizing: border-box;
        max-width: 100%;
    }
    
    .edit-profile-modal-header {
        padding: 18px 20px;
    }
    
    .edit-profile-modal-header h2 {
        font-size: 1.3rem;
    }
    
    .edit-profile-modal-close {
        width: 32px;
        height: 32px;
        font-size: 1.8rem;
    }
    
    .edit-profile-modal-body {
        padding: 20px;
    }
    
    .edit-profile-form-group {
        margin-bottom: 18px;
    }
    
    .edit-profile-form-group label {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    
    .edit-profile-input,
    .edit-profile-textarea {
        padding: 12px;
        font-size: 1rem;
    }
    
    .edit-profile-textarea {
        min-height: 100px;
    }

    /* .dn-style-row sad sme da prelomi red (flex-wrap) kad "Debljina"/"Jačina" kontrole ne
       stanu pored toggle labele — margin-left:auto bi ih inače i dalje gurao skroz desno
       na sopstvenom redu (izgleda čudno umesto da krenu od leve ivice). */
    label.dn-glow-intensity {
        margin-left: 0;
    }

    .edit-profile-form-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 25px;
        padding-top: 20px;
    }
    
    .edit-profile-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 1rem;
    }
    
}

.banner-url-input-wrapper .edit-profile-input {
    flex: 1;
}

@media (max-width: 768px) {
    /* Favorites modal responsive */
    .modal-overlay {
        padding: 10px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .modal-overlay .modal-content {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        margin: 0 auto !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .modal-overlay .modal-header {
        padding: 18px 20px !important;
        box-sizing: border-box !important;
    }
    
    .modal-overlay .modal-header h2 {
        font-size: 1.3rem !important;
    }
    
    .modal-overlay .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.8rem !important;
    }
    
    .modal-overlay .modal-body {
        padding: 20px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    #favorites-modal-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #watched-modal-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .favorite-anime-item {
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    .favorite-anime-cover {
        height: 140px !important;
    }
    
    .favorite-anime-name {
        font-size: 0.85rem !important;
        padding: 8px 4px !important;
    }
}

/* Notification animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Title Card Animations */
@keyframes titlePulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(74, 144, 226, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(74, 144, 226, 0.7);
    }
}

@keyframes titleBadgePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes titleGlow {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes titleShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Kartice u modalu "Kolekcija titula" — staklen panel, bez isečenog ugla: tanka
   linija na vrhu i glow prsten oko ikonice nose boju rariteta (isti jezik kao
   team.css kartice), umesto clip-path chipped-corner pristupa. */
.rn-title-modal-card {
    --tier-color: #9e9e9e;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 18px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.rn-title-modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tier-color), transparent);
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

.rn-title-modal-card:not(.is-locked):hover {
    transform: translateY(-5px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

.rn-title-modal-card:not(.is-locked):hover::before {
    opacity: 1;
}

.rn-title-modal-card.is-active::before {
    opacity: 1;
}

.rn-title-modal-card.is-locked {
    opacity: 0.55;
    filter: grayscale(70%);
}

.rn-title-modal-card .rn-title-icon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tier-color) 18%, rgba(255, 255, 255, 0.04));
    color: var(--tier-color);
    font-size: 1.5rem;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(20, 20, 26, 1), 0 0 0 4px rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.3s ease;
}

.rn-title-modal-card .rn-title-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--tier-color) 40%, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.rn-title-modal-card:not(.is-locked):hover .rn-title-icon,
.rn-title-modal-card.is-active .rn-title-icon {
    box-shadow: 0 0 0 3px rgba(20, 20, 26, 1), 0 0 0 4px color-mix(in srgb, var(--tier-color) 70%, transparent);
}

.rn-title-modal-card:not(.is-locked):hover .rn-title-icon::after,
.rn-title-modal-card.is-active .rn-title-icon::after {
    opacity: 1;
}

.rn-title-modal-card .rn-title-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.rn-title-modal-card .rn-title-name {
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
}

.rn-title-modal-card .rn-title-rarity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--tier-color) 50%, transparent);
    color: var(--tier-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.rn-title-modal-card .rn-title-desc {
    color: #aaa;
    font-size: 0.82rem;
    line-height: 1.4;
    font-style: italic;
    margin: 0;
}

.rn-title-modal-card .rn-title-active-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tier-color);
    color: #111;
}

.rn-title-modal-card .rn-title-lock {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #777;
    font-size: 0.9rem;
}

/* Active Title Display Animation */
@keyframes activeTitleSecretGlow {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }
}

@keyframes activeTitleEpicShimmer {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 8px rgba(156, 39, 176, 0.5);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(156, 39, 176, 0.6);
        filter: brightness(1.08);
    }
}

@keyframes activeTitlePulse {
    0%, 100% {
        transform: scale(1) translateZ(0);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.02) translateZ(0);
        filter: brightness(1.1);
    }
}

/* Title Opening Animations */
@keyframes titleOpeningGlow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes titleOpeningScale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes titleOpeningRotate {
    0% {
        transform: rotate(-180deg) scale(0);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes titleOpeningFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes particleExplode {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5);
    }
}

/* Achievement Notification Animations */
@keyframes achievementPopIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes achievementPopOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

/* Spin Animation Styles */
@keyframes spinWinPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

@keyframes arrowPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes notificationFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes notificationFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes titleNotificationGlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes titleNotificationScale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes titleNotificationFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notificationParticleExplode {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5);
    }
}

@keyframes secretExplosion {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(0px);
    }
    20% {
        opacity: 0.8;
        transform: scale(1.8);
        filter: blur(4px);
    }
    50% {
        opacity: 1;
        transform: scale(2.5);
        filter: blur(6px);
    }
    100% {
        opacity: 0.95;
        transform: scale(3);
        filter: blur(4px);
    }
}

/* Top 4 Anime Section */
#user-top-anime-section {
    margin-bottom: 40px;
}

#user-top-anime-section .section-header {
    text-align: center;
}

#top-anime-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(auto, 1fr);
    gap: 16px;
}

.top-anime-item {
    position: relative;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
}

.top-anime-item:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    transform: translateY(-2px);
}

.top-anime-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.top-anime-item:hover .top-anime-remove {
    opacity: 1;
    pointer-events: auto;
}

.top-anime-remove:hover {
    background: rgba(220, 38, 38, 0.9);
    border-color: rgba(220, 38, 38, 1);
    color: white;
    transform: scale(1.05);
}

.top-anime-remove i {
    font-size: 0.9rem;
}

.top-anime-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
}

.top-anime-name {
    padding: 12px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.top-anime-placeholder {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    min-height: 200px;
}

.top-anime-placeholder:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.top-anime-placeholder-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-anime-plus {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    line-height: 1;
}

.top-anime-empty {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    aspect-ratio: 3 / 4;
    min-height: 200px;
}

.top-anime-empty-content {
    width: 100%;
    height: 100%;
}

/* Top Anime Search Modal */
#top-anime-search-modal .modal-overlay {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#top-anime-search-modal .modal-content {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#top-anime-search-modal .modal-body {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#top-anime-search-results {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

#top-anime-search-input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.top-anime-search-result {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
}

.top-anime-search-result:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
    transform: translateY(-2px);
}

.top-anime-search-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-color: transparent;
}

.top-anime-search-name {
    padding: 10px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

@media (max-width: 768px) {
    #top-anime-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: minmax(auto, 1fr) !important;
        gap: 12px !important;
    }
    
    .top-anime-item,
    .top-anime-placeholder,
    .top-anime-empty {
        min-height: 200px;
    }
    
    .top-anime-plus {
        font-size: 3rem;
    }
    
    /* Show remove button always on mobile */
    .top-anime-remove {
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 36px;
        height: 36px;
        top: 6px;
        right: 6px;
    }
    
    .top-anime-remove i {
        font-size: 1rem;
    }
    
    #top-anime-search-results {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Top anime search modal responsive */
    #top-anime-search-modal .modal-overlay {
        padding: 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #top-anime-search-modal .modal-content {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #top-anime-search-modal .modal-body {
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }
    
    #top-anime-search-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Pozadina profila (Steam-style page background, admin-kurirana galerija).
   Provereno direktno na pravom Steam profilu (.no_header element): pozadina NIJE
   position:fixed i NIJE ograničena na širinu sadržajne kolone — puna je širina stranice,
   position:relative/normalan tok (background-attachment:scroll), skroluje se ZAJEDNO sa
   sadržajem, i pokriva tačno visinu profila (ne ceo viewport, ne beskonačno).
   NAPOMENA: body NE sme biti providan — ceo sajt je fiksiran na 1920px (#page-content
   max-width u main.css) i oslanja se na body-jevu tamnu boju da popuni prostor van tog
   okvira na širim ekranima. Ranije sam to greškom uklonio, pa je iskočila bela boja
   browsera van 1920px. Providnost treba samo #page-content (child bg div je unutar njega). */

/* #page-content mora biti pozicioniran (relative) da bi apsolutno pozicionirana pozadina
   unutar njega mogla da se rasteže na njegovu punu (sadržajem određenu) visinu — inače
   bi position:absolute + inset:0 pao nazad na visinu viewporta. */
#page-content {
    position: relative;
    background-color: transparent;
}

#user-profile-page-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Steam NE razvlači pozadinu (potvrđeno na pravom profilu: background-size:auto,
       prirodna rezolucija slike, ne cover) — razvlačenje/skaliranje je razlog zašto je
       izgledalo loše. Slika se prikazuje u svojoj stvarnoj veličini, centrirano gore. */
    background-size: auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #0e0e0e;
}

/* Isti princip kao slika iznad — prirodna veličina, centrirano gore, bez razvlačenja. */
#user-profile-page-background-video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    max-width: none;
}

#user-profile-page-background.has-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.85) 60%, #0e0e0e 100%);
}

/* Providnost centralnog bloka kontroliše isključivo ručni toggle iz podešavanja profila —
   ne aktivira se automatski samo zato što je pozadina stranice postavljena. */
#user-profile-container.profile-block-transparent {
    background: transparent;
    outline: 1px solid rgba(255, 255, 255, 0.12);
    outline-offset: -1px;
    border-radius: 12px;
}

/* Na mobilnom je viewport uzan, pa prirodna veličina + centrirano gore (desktop pravilo
   iznad) lako ostavi najzanimljiviji deo velike pozadine van kadra. Ovde se prelazi na
   cover (razvlačenje je ovde prihvatljivo — telefon je uzan pa se ionako gubi širina) i
   koristi horizontalna pozicija koju je korisnik izabrao u "Prikaz za mobilne" podešavanju
   (--page-bg-mobile-x, podrazumevano 50% = centar).
   BITNO: #user-profile-page-background inače (desktop, inset:0) rasteže se na PUNU visinu
   #page-content-a — a to je visina cele profil stranice (prijatelji, top anime, komentari...),
   ne samo herою bloka. Da je mobilni "cover" primenjen na tu ogromnu visinu, cover bi zumirao
   sliku toliko da bi trebalo skrolovati čitavu stranicu da se stigne do sredine slike. Zato se
   ovde visina ograničava na jedan ekran (100vh) — cela slika (cover-ovana, samo horizontalno
   isečena po --page-bg-mobile-x) stane odmah na početku, a fade u crninu (::after, koji prati
   istu visinu jer je i sam inset:0 unutar ovog elementa) ide odmah ispod toga. */
@media (max-width: 768px) {
    #user-profile-page-background {
        height: 100vh;
        background-size: cover;
        background-position: var(--page-bg-mobile-x, 50%) top;
    }

    #user-profile-page-background-video {
        width: auto;
        height: 100%;
        left: var(--page-bg-mobile-x, 50%);
        transform: translateX(calc(-1 * var(--page-bg-mobile-x, 50%)));
    }

}

/* Picker pozadina (grid u modalu) */
.background-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.background-picker-item {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.background-picker-item img,
.background-picker-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.background-picker-item:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 60%, transparent);
    transform: scale(1.03);
}

.background-picker-item.selected {
    border-color: var(--dn-accent-1, #e11d48);
}

/* ── Anime-styled akcenti (crveni gradient, u skladu sa ostatkom sajta) ────── */

.edit-btn,
.save-btn,
#wall-submit-btn {
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--dn-accent-1, #e11d48) 25%, transparent);
}

.edit-btn:hover,
.save-btn:hover,
#wall-submit-btn:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--dn-accent-2, #991b1e) 80%, black), color-mix(in srgb, var(--dn-accent-1, #e11d48) 80%, black)) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--dn-accent-1, #e11d48) 40%, transparent);
}

.user-profile-btn.friend-btn.friends {
    background: linear-gradient(90deg, var(--dn-accent-2, #991b1e), var(--dn-accent-1, #e11d48));
    border-color: transparent;
}


/* Trenutno gleda */
#user-currently-watching {
    margin-top: 8px;
}

#user-currently-watching a {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--dn-accent-1, #e11d48) 40%, transparent);
    padding: 6px 12px;
    border-radius: 20px;
    transition: border-color 0.2s ease;
}

#user-currently-watching a:hover {
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 70%, transparent);
}

/* Poslednje gledano */
.last-watched-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.last-watched-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
}

/* Zid komentara */
#wall-composer textarea {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    padding: 10px 12px;
    resize: vertical;
}

#wall-composer textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--dn-accent-1, #e11d48) 50%, transparent);
}

.wall-comment-delete-btn {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.wall-comment-delete-btn:hover {
    opacity: 1;
}

#wall-comments-list .wall-comment:last-child {
    border-bottom: none !important;
}

/* ── Persona 5 inspired sekcije: dijagonalni crveni akcent ispred naslova,
   oštri (isečeni) uglovi na karticama umesto zaobljenih ────────────────── */

#user-profile-content .section-header h2 {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.3px;
}

#user-profile-content .section-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) skewX(-20deg);
    width: 10px;
    height: 1.1em;
    background: linear-gradient(180deg, var(--dn-accent-1, #e11d48), var(--dn-accent-2, #991b1e));
}

.top-anime-item,
.favorite-anime-item,
.top-anime-search-result {
    border-radius: 12px;
    overflow: hidden;
}

/* Traka za probni prikaz pozadine iz Shop-a (?preview_bg=...) — vidi
   showShopBackgroundPreviewBanner u user_profile.js. */
#shop-bg-preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dn-accent-1, #e11d48) 85%, #000 15%), color-mix(in srgb, var(--dn-accent-1, #e11d48) 55%, #000 45%));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

#shop-bg-preview-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Slajder za horizontalnu poziciju pozadine (--page-bg-mobile-x) - ima smisla samo na
   uskom ekranu gde se pozadina zaista seče (cover); na desktopu je bez efekta pa se
   ne prikazuje. Ista svrha kao slajder u "Prikaz na telefonu" modalu iz edit profila,
   samo primenjen direktno na pravu pozadinu umesto u izolovanom iframe-u. */
#shop-bg-preview-position-row {
    display: none;
}

@media (max-width: 768px) {
    #shop-bg-preview-position-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.25);
        font-size: 0.75rem;
        font-weight: 500;
    }

    #shop-bg-preview-position-row input[type="range"] {
        flex: 1 1 auto;
        min-width: 0;
        accent-color: #fff;
    }

    #shop-bg-preview-position-row span {
        flex: 0 0 auto;
        max-width: 40%;
        opacity: 0.9;
    }
}

#shop-bg-preview-transparent-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

#shop-bg-preview-banner a {
    color: #fff;
    font-weight: 800;
    text-decoration: underline;
}

#shop-bg-preview-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

@media (max-width: 600px) {
    #shop-bg-preview-banner {
        font-size: 0.75rem;
        gap: 10px;
    }
}