/* --- CSS VARIABLES & GLOBAL STYLES --- */
:root {
    --bg-dark-deep: #060814;
    --bg-dark-blue: #16152B;
    --primary-purple: #8A2BE2;
    --accent-cyan: #00FFFF;
    --accent-pink: #ff33a1;
    --text-light: #E0E0EE;
    --text-dark: #A0A0C0;
    --glass-bg: rgba(22, 21, 43, 0.7);
    --border-color: rgba(138, 43, 226, 0.3);
    --border-color-hover: rgba(0, 255, 255, 0.5);
    --glow-color: rgba(138, 43, 226, 0.8);
    --staff-card-bg: #1A192D;
    --staff-card-border: #2c2f48;
    --font-family: 'Poppins', sans-serif;
    --input-bg: #0D0C1D;
    --accent-cyan-transparent: rgba(0, 255, 255, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    background-color: var(--bg-dark-deep);
    color: var(--text-light);
    font-family: var(--font-family);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

main#main-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* GALAXY & BACKGROUNDS */
@keyframes move-stars-slow {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

@keyframes move-stars-fast {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

@keyframes rotateNebula {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) rotate(-45deg);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(300vw) rotate(-45deg);
        opacity: 0;
    }
}

@keyframes aurora-drift {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
    }

    25% {
        transform: translateX(-45%) translateY(-55%) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translateX(-50%) translateY(-50%) rotate(180deg) scale(1);
    }

    75% {
        transform: translateX(-55%) translateY(-45%) rotate(270deg) scale(1.1);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg) scale(1);
    }
}

#hero {
    overflow: hidden;
    position: relative;
    background: radial-gradient(ellipse at 50% 100%, #1a1735 0%, #060814 60%);
}

.galaxy-bg {
    position: absolute;
    inset: -400px;
    z-index: 0;
}

.galaxy-bg::before,
.galaxy-bg::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150vmax;
    height: 150vmax;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    filter: blur(90px) saturate(0.8);
    will-change: transform;
}

.galaxy-bg::before {
    background-image: radial-gradient(circle, var(--accent-pink), var(--primary-purple) 40%, transparent 70%);
    animation: rotateNebula 200s linear infinite;
    opacity: 0.15;
}

.galaxy-bg::after {
    background-image: radial-gradient(circle, var(--accent-cyan), #0072ff 35%, transparent 65%);
    animation: rotateNebula 160s linear infinite reverse;
    opacity: 0.2;
}

#galaxy-stars-small,
#galaxy-stars-medium {
    width: 1px;
    height: 1px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

#galaxy-stars-small {
    animation: move-stars-slow 250s linear infinite;
    box-shadow: 204px 1757px #FFF, 24px 792px #FFF, 881px 119px #FFF, 959px 1319px #FFF, 252px 648px #FFF, 351px 1545px #FFF, 532px 1459px #FFF, 151px 1690px #FFF, 829px 1475px #FFF, 584px 343px #FFF, 356px 6px #FFF, 172px 1776px #FFF, 1799px 1105px #FFF, 108px 67px #FFF, 1425px 233px #FFF, 1876px 1464px #FFF, 1269px 922px #FFF, 1419px 584px #FFF, 1373px 713px #FFF, 75px 1230px #FFF, 1152px 907px #FFF, 942px 1279px #FFF, 1173px 185px #FFF, 903px 899px #FFF, 1845px 1481px #FFF, 929px 621px #FFF, 1024px 85px #FFF, 1708px 610px #FFF, 227px 1178px #FFF, 1718px 235px #FFF, 1214px 1332px #FFF, 545px 1913px #FFF, 672px 55px #FFF, 891px 644px #FFF, 269px 914px #FFF, 1532px 555px #FFF, 133px 160px #FFF, 706px 421px #FFF, 1599px 1156px #FFF, 1341px 1502px #FFF, 148px 1359px #FFF, 452px 941px #FFF, 1111px 403px #FFF, 1860px 589px #FFF, 999px 635px #FFF, 794px 628px #FFF, 1403px 108px #FFF, 281px 130px #FFF;
}

#galaxy-stars-medium {
    animation: move-stars-fast 150s linear infinite;
    box-shadow: 418px 1285px 2px #FFF, 49px 404px 2px #FFF, 32px 728px 2px #FFF, 517px 271px 2px #FFF, 729px 1869px 2px #FFF, 335px 99px 2px #FFF, 537px 1569px 2px #FFF, 1528px 1007px 2px #FFF, 301px 815px 2px #FFF, 153px 439px 2px #FFF, 1302px 341px 2px #FFF, 1541px 1656px 2px #FFF, 843px 213px 2px #FFF, 497px 1933px 2px #FFF, 847px 1735px 2px #FFF, 532px 843px 2px #FFF, 622px 1699px 2px #FFF, 835px 697px 2px #FFF, 712px 1978px 2px #FFF, 888px 1957px 2px #FFF, 344px 1965px 2px #FFF, 917px 997px 2px #FFF, 1965px 848px 2px #FFF, 1459px 1083px 2px #FFF, 280px 1891px 2px #FFF, 960px 791px 2px #FFF, 107px 881px 2px #FFF, 755px 1205px 2px #FFF, 361px 899px 2px #FFF, 95px 1969px 2px #FFF;
}

.shooting-star {
    position: absolute;
    height: 2px;
    width: 150px;
    background: linear-gradient(to left, var(--accent-cyan), transparent);
    border-radius: 50%;
    opacity: 0;
    will-change: transform;
    animation-name: shootingStar;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.shooting-star:nth-of-type(1) {
    top: 10%;
    left: -150px;
    animation-duration: 8s;
    animation-delay: 1s;
}

.shooting-star:nth-of-type(2) {
    top: 40%;
    left: -150px;
    animation-duration: 12s;
    animation-delay: 3s;
}

.shooting-star:nth-of-type(3) {
    top: 85%;
    left: -150px;
    animation-duration: 7s;
    animation-delay: 5s;
}

.page-section:not(#hero) {
    position: relative;
    overflow: hidden;
}

.page-section:not(#hero)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    padding-bottom: 200%;
    z-index: -1;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, rgba(0, 255, 255, 0.05) 30%, transparent 60%);
    mix-blend-mode: screen;
    filter: blur(50px);
    animation: aurora-drift 80s linear infinite;
    will-change: transform;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark-deep);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.loader {
    border: 8px solid var(--border-color);
    border-top: 8px solid var(--primary-purple);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-small {
    margin: 2rem auto;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-purple);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

#main-header.scrolled {
    background-color: var(--glass-bg);
    backdrop-filter: blur(10px);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-decoration: none;
    border-bottom: none;
    /* Aceasta este noua linie adăugată */
}

#desktop-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

#desktop-nav a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 400;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s;
    cursor: pointer;
}

#desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-purple);
    transition: width 0.3s ease;
}

#desktop-nav a:hover,
#desktop-nav a.active {
    color: var(--primary-purple);
}

#desktop-nav a:hover::after,
#desktop-nav a.active::after {
    width: 100%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.page-section {
    padding: 8rem 2rem 6rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark-deep);
    display: none;
}

.page-section.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* <<<--- ACEASTĂ LINIE A FOST ADĂUGATĂ PENTRU CENTRARE */
    flex-grow: 1;
    animation: fadeIn 0.5s forwards;
}

.page-section.fullscreen-section {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

section:last-of-type {
    border-bottom: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 600;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-dark);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-box {
    width: 100%;
    max-width: 450px;
    padding: 3rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    text-align: center;
    box-shadow: 0 0 40px var(--glow-color);
}

.login-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--text-dark);
    margin-bottom: 2.5rem;
}

.input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

.input-group input {
    width: 100%;
    padding: 1rem 1rem 1rem 45px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 10px var(--glow-color);
}

.login-button {
    width: 100%;
    margin-top: 1rem;
}

.cta-button {
    position: relative;
    display: inline-block;
    padding: 1rem 2.5rem;
    color: var(--text-light);
    background: var(--primary-purple);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color);
    cursor: pointer;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--glow-color), 0 0 50px var(--glow-color);
}

.action-button,
.back-button {
    background: none;
    border: 1px solid var(--primary-purple);
    color: var(--primary-purple);
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s;
}

.action-button:hover,
.back-button:hover {
    background: var(--primary-purple);
    color: white;
}

.delete-button,
.delete-action {
    background: none;
    border: 1px solid #F44336;
    color: #F44336;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.delete-button:hover,
.delete-action:hover {
    background-color: #F44336;
    color: white;
}

.rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .rules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rule-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.rule-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.rule-card h3 {
    color: var(--primary-purple);
    margin-bottom: 1rem;
}

.rule-card ul {
    list-style: none;
    padding-left: 0;
}

.rule-card li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-dark);
}

.rule-card li::before {
    content: '»';
    font-family: 'Courier New', Courier, monospace;
    position: absolute;
    left: 0;
    color: var(--primary-purple);
}

.item-card {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 10px;
    margin: 0 auto 1rem auto;
    max-width: 800px;
    transition: all 0.3s;
    border-left: 4px solid var(--primary-purple);
    text-align: left;
}

.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    border-left-color: var(--accent-cyan);
}

.item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.item-card-header h5 {
    font-size: 1.4rem;
    margin: 0;
}

.item-card-content {
    color: var(--text-dark);
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.item-card-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.status-badge {
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.status-OPEN,
.status-accepted {
    color: #00e676;
    background-color: rgba(0, 230, 118, 0.1);
}

.status-CLOSED,
.status-rejected {
    color: #ff5252;
    background-color: rgba(255, 82, 82, 0.1);
}

.status-pending {
    color: #ffab40;
    background-color: rgba(255, 171, 64, 0.1);
}

#staff-panel-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2rem;
}

#staff-panel-menu button {
    background: linear-gradient(45deg, var(--primary-purple), #6a1ead);
    color: white;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

#staff-panel-menu button:hover,
#staff-panel-menu button.active {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6);
}

#panel-dynamic-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

#panel-dynamic-content h4 {
    font-size: 1.3rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    text-align: center;
}

.panel-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    color: var(--text-light);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 1rem 0;
    font-weight: 600;
}

.manager-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.manager-list li {
    padding: 1rem 1.5rem;
    border: 1px solid var(--staff-card-border);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
    margin-bottom: 0.5rem;
}

.manager-list li:hover {
    background-color: var(--staff-card-bg);
}

.manager-list-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.manager-list-rank {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.color-picker-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.color-picker-group .form-input {
    flex-grow: 1;
}

input[type="color"] {
    padding: 4px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--staff-card-border);
    cursor: pointer;
    background-color: var(--input-bg);
}

.hidden-field {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding: 0;
    border: none;
    transition: all 0.4s ease-out;
}

.form-group:not(.hidden-field) {
    margin-bottom: 1rem;
    transition: all 0.4s ease-in;
}

.small-btn {
    padding: 5px 10px;
    font-size: 0.9rem;
}

.small-btn i {
    pointer-events: none;
}

.question-editor-card {
    background: var(--staff-card-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.question-editor-header {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.question-editor-header .form-input {
    flex-grow: 1;
}

.question-editor-header .question-type {
    max-width: 200px;
}

.question-editor-body .small-label {
    font-size: 0.8rem;
    color: var(--text-dark);
}

.options-container {
    border-top: 1px dashed var(--staff-card-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.option-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.image-upload-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.image-preview {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: var(--input-bg);
    border: 1px dashed var(--staff-card-border);
    object-fit: cover;
}

.image-upload-label {
    flex-grow: 1;
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.image-upload-label:hover {
    border-color: var(--border-color-hover);
    color: var(--accent-cyan);
}

.image-upload-group input[type="file"] {
    display: none;
}

.remove-image-wrapper {
    margin-top: 0.5rem;
    text-align: right;
}

.remove-image-btn {
    font-size: 0.8rem;
    text-decoration: underline;
    color: var(--text-dark);
    cursor: pointer;
    background: none;
    border: none;
}

.remove-image-btn:hover {
    color: #F44336;
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.fade-in-up {
    transform: translateY(30px);
}

.animate-on-scroll.fade-in-down {
    transform: translateY(-30px);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

.hidden {
    display: none !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark-deep);
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple);
    border-radius: 10px;
    border: 3px solid var(--bg-dark-deep);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6a1ead;
}

.drag-handle {
    cursor: grab;
    color: var(--text-dark);
    margin-right: 1rem;
    transition: color 0.2s;
    align-self: center;
}

.drag-handle:hover {
    color: var(--text-light);
}

.sortable-ghost {
    opacity: 0.4;
    background: var(--primary-purple);
}

.sortable-chosen {
    cursor: grabbing;
}

/* === APPLICATION FORM REDESIGN v6 - Final Fixes === */
.application-layout-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
}

/* Specific centering fix for the public application form only */
/* MODIFICAT: Corecție de centrare specifică pentru formular și pagina de profil */
#application-form .application-layout-container,
#player-profile-container .application-layout-container {
    align-items: center;
    position: relative;
    transform: translateX(calc(-20px - 1.25rem));
    /* Adjusts for bookmark width + gap */
}


.form-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    position: sticky;
    top: 120px;
}

.nav-bookmark {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid var(--staff-card-border);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.3s ease;
    position: relative;
}

.nav-bookmark:hover {
    border-color: var(--primary-purple);
    transform: scale(1.1);
}

.nav-bookmark.completed {
    color: var(--accent-cyan);
    border-color: rgba(0, 255, 255, 0.5);
}

.nav-bookmark.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--text-light);
    box-shadow: 0 0 15px var(--glow-color);
}

/* Tooltip points to the left */
.nav-bookmark::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: right;
    background: var(--staff-card-bg);
    border: 1px solid var(--staff-card-border);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-light);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10;
}

.nav-bookmark:hover::after {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
}

.multi-step-form-content {
    flex-grow: 1;
    max-width: 750px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    box-shadow: 0 0 50px var(--glow-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#application-form-container .progress-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#application-form-container .progress-text {
    color: var(--text-dark);
    white-space: nowrap;
}

#application-form-container .progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

#application-form-container .progress-bar-inner {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-purple), var(--accent-cyan));
    transition: width 0.5s ease;
}

#application-form-container form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Compact Form Fix: remove min-height and absolute positioning */
#application-form-container .form-steps-wrapper {
    position: relative;
    flex-grow: 1;
}

#application-form-container .form-step {
    width: 100%;
    display: none;
    /* Hide inactive steps */
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#application-form-container .form-step.active-step {
    display: flex;
    /* Show the active step */
    animation: fadeIn 0.4s ease-out forwards;
}

#application-form-container .question-image {
    max-width: 100%;
    max-height: 180px;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

#application-form-container .question-label {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    max-width: 95%;
}

#application-form-container .question-label .required-star {
    color: var(--accent-pink);
}

#application-form-container .form-input {
    width: 100%;
    max-width: 500px;
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    color: var(--text-light);
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s;
    text-align: center;
}

#application-form-container .form-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

#application-form-container textarea.form-input {
    min-height: 140px;
    text-align: left;
}

#application-form-container .char-counter {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
}

#application-form-container .validation-message {
    font-size: 0.9rem;
    color: var(--accent-pink);
    margin-top: 0.75rem;
    min-height: 1.25rem;
    font-weight: 600;
}

#application-form-container .app-options-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 500px;
    align-items: stretch;
    /* <<< ADAUGĂ ACEASTĂ LINIE */
}

#application-form-container .app-radio-label,
#application-form-container .app-checkbox-label {
    background-color: transparent;
    border: 1px solid var(--staff-card-border);
    transition: all 0.2s;
    position: relative;
    padding: 0.9rem 1rem 0.9rem 3.25rem;
    cursor: pointer;
    text-align: left;
    border-radius: 10px;
}

#application-form-container .app-radio-label:hover,
#application-form-container .app-checkbox-label:hover {
    background-color: var(--input-bg);
    border-color: var(--primary-purple);
    transform: scale(1.02);
}

.app-radio-label input,
.app-checkbox-label input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.app-radio-label.checked,
.app-checkbox-label.checked {
    border-color: var(--accent-cyan);
    background-color: var(--accent-cyan-transparent);
}

.app-radio-label.checked span,
.app-checkbox-label.checked span {
    color: var(--text-light);
    font-weight: 600;
}

.custom-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--staff-card-border);
    background-color: var(--input-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.custom-icon.radio {
    border-radius: 50%;
}

.custom-icon.checkbox {
    border-radius: 6px;
}

.app-radio-label.checked .custom-icon,
.app-checkbox-label.checked .custom-icon {
    border-color: var(--accent-cyan);
    background-color: var(--accent-cyan);
}

.custom-icon svg {
    color: var(--bg-dark-deep);
    width: 14px;
    height: 14px;
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}

.app-radio-label.checked .custom-icon svg,
.app-checkbox-label.checked .custom-icon svg {
    transform: scale(1);
}

#application-form-container .form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding-top: 1rem;
    margin-top: auto;
}

/* --- FINISHING & OTHER STYLES --- */
.submit-success-view {
    text-align: center;
    padding: 2rem;
}

.submit-success-view h2 {
    font-size: 2rem;
    color: var(--accent-cyan);
}

.submit-success-view p {
    color: var(--text-dark);
    margin: 1rem 0 2rem;
}

.success-link-box {
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    padding: 1rem;
    border-radius: 8px;
    word-break: break-all;
    font-family: 'Courier New', Courier, monospace;
}

.copy-link-btn {
    margin-top: 1rem;
}

#view-application-container h2 {
    text-align: center;
}

.status-card {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2.5rem;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.status-card .status-text {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1rem 0;
}

.status-card small {
    color: var(--text-dark);
}

#server-status-card {
    width: 100%;
    max-width: 450px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

#server-status-card.collapsible:hover {
    cursor: pointer;
    transform: scale(1.02);
    border-color: var(--border-color-hover);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

#status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#status-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

#status-indicator.online {
    background-color: #00e676;
    box-shadow: 0 0 10px #00e676;
}

#status-indicator.offline {
    background-color: #ff5252;
}

#status-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
}

.chevron {
    color: var(--text-dark);
    font-size: 0.8rem;
    transition: transform 0.4s ease;
}

#server-status-card.expanded .chevron {
    transform: rotate(180deg);
}

#player-list-area {
    max-height: 0;
    transition: max-height 0.4s ease-out;
}

#server-status-card.expanded #player-list-area {
    max-height: 350px;
}

.player-list-content {
    padding: 10px 15px 15px 15px;
    background-color: rgba(18, 20, 34, 0.5);
    border-top: 1px solid var(--border-color);
    max-height: 300px;
    overflow-y: auto;
}

.player-list-redesigned {
    list-style: none;
    padding: 0;
    margin: 0;
}

.player-list-redesigned li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
    margin-bottom: 2px;
}

.player-list-redesigned li:hover {
    background-color: var(--accent-cyan-transparent);
}

.player-list-redesigned li>a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.2s ease-in-out;
}

.player-list-redesigned li:hover>a {
    color: var(--text-light);
}

.player-list-redesigned li>a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-rank {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.8;
    margin-left: 10px;
    flex-shrink: 0;
}

.no-players-message {
    text-align: center;
    padding: 20px;
    color: var(--text-dark);
}

#staff-list-container {
    text-align: left;
}

.staff-rank-title {
    position: relative;
    padding-left: 20px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--text-light);
}

.staff-rank-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 5px;
    background-image: linear-gradient(to bottom, var(--accent-cyan), var(--accent-pink));
    border-radius: 5px;
}

.staff-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.staff-card {
    background-color: #1a1c2d;
    border: 1px solid #2c2f48;
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
    position: relative;
}

a.staff-card {
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.staff-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-cyan);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.15);
}

.staff-details {
    line-height: 1.3;
}

.staff-username {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.staff-nickname {
    color: var(--text-dark);
    font-style: italic;
    font-size: 0.9rem;
}

.staff-rank {
    font-weight: 600;
    margin-top: 1rem;
}

.online-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #00e676;
    color: #060814;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0, 230, 118, 1);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
    }
}

/* --- RESPONSIVE ADJUSTMENTS for v5 --- */
@media (max-width: 992px) {

    #application-form .application-layout-container,
    .application-layout-container {
        flex-direction: column;
        gap: 1.5rem;
        transform: none;
        /* Disable centering trick on mobile */
    }

    .form-sidebar-nav {
        flex-direction: row;
        justify-content: center;
        width: 100%;
        padding: 0;
        position: static;
    }

    .nav-bookmark::after {
        left: 50%;
        top: 130%;
        transform: translateX(-50%) scaleY(0);
        transform-origin: top;
        right: auto;
    }

    .nav-bookmark:hover::after {
        transform: translateX(-50%) scaleY(1);
    }
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .staff-cards-container {
        grid-template-columns: 1fr;
    }

    .multi-step-form-content {
        padding: 2rem 1.5rem;
    }

    #application-form-container .question-label {
        font-size: 1.4rem;
    }
}

/* FIȘIER: style.css */
/* ADAUGĂ ACEST BLOC LA FINALUL FIȘIERULUI */

/* --- STILURI PENTRU VIZUALIZARE COMPACTĂ APLICAȚIE --- */
#staff-panel {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.app-detail-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(10px);
}

.app-detail-container .back-button {
    margin-bottom: 1.5rem;
}

.app-detail-header {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.app-detail-header h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.app-detail-header p {
    color: var(--text-dark);
    margin: 0.1rem 0;
    font-size: 0.95rem;
}

.app-detail-status {
    margin-top: 0.75rem;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.app-detail-answers h3,
.app-detail-actions h4 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-purple);
}

.answer-item {
    background-color: var(--input-bg);
    border-left: 3px solid var(--primary-purple);
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    text-align: left;
}

.answer-question {
    display: block;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.answer-text {
    color: var(--text-dark);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9rem;
}

.app-detail-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.app-detail-actions .action-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Stil explicit pentru butonul de ștergere, ca să iasă în evidență */
.app-detail-actions .delete-button {
    background: none;
    border: 1px solid #F44336;
    color: #F44336;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.app-detail-actions .delete-button:hover {
    background-color: #F44336;
    color: white;
}

#public-forms-container {
    text-align: center;
}

/* ADAUGĂ ACESTE STILURI LA FINALUL FIȘIERULUI style.css */

.answer-item-image {
    max-width: 100%;
    max-height: 250px;
    /* Previne imaginile prea mari */
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
}

.answer-options-list {
    list-style: none;
    padding: 0;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-item {
    padding: 0.6rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.option-item i {
    font-size: 1.1em;
    flex-shrink: 0;
}

.option-item.selected {
    background-color: var(--accent-cyan-transparent);
    border-color: rgba(0, 255, 255, 0.5);
    color: var(--text-light);
    font-weight: 600;
}

.option-item.selected i {
    color: var(--accent-cyan);
}

.form-status-toggle-btn {
    background: none;
    border: 2px solid;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.form-status-toggle-btn i {
    font-size: 1.1em;
}

/* Stil pentru statusul DESCHIS (verde) */
.form-status-toggle-btn.status-open {
    color: #00e676;
    border-color: #00e676;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.3);
}

/* Stil pentru statusul ÎNCHIS (roșu) */
.form-status-toggle-btn.status-closed {
    color: #ff5252;
    border-color: #ff5252;
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.3);
}

/* === COD ACTUALIZAT PENTRU BUTOANELE DIN SECȚIUNEA HERO === */

/* Container pentru butoanele din secțiunea Hero */
.hero-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    /* MODIFICAT: Distanță mărită de la 1.5rem la 2.5rem */
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Ajustări la butonul principal pentru a include pictograme */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.cta-button i {
    font-size: 1.2em;
}

/* Stil personalizat pentru butonul de Discord */
.cta-button.discord {
    background: #1E90FF;
    /* MODIFICAT: O nuanță vibrantă de albastru */
    /* Efect de strălucire (glow) adaptat pentru noua culoare albastră */
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.7), 0 0 30px rgba(30, 144, 255, 0.7);
}

.cta-button.discord:hover {
    box-shadow: 0 0 25px rgba(30, 144, 255, 0.9), 0 0 50px rgba(30, 144, 255, 0.9);
}

/* --- Stiluri pentru noul Panou de Administrare Grade --- */

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.rank-manager-container {
    background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #2c4a6e);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(13, 114, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.rank-manager-header {
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.5rem;
}

.rank-manager-header h3 {
    font-size: 2rem;
    color: var(--text-light);
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
}

.rank-manager-header p {
    font-size: 1rem;
    color: var(--text-dark);
    max-width: 600px;
    margin: 0 auto;
}

#rank-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.rank-editor-card {
    background-color: rgba(14, 23, 46, 0.8);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(13, 114, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.rank-editor-card:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Efect de scanline/grilaj subtil */
.rank-editor-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 3px;
    opacity: 0.5;
    pointer-events: none;
}


.rank-card-color-indicator {
    width: 10px;
    height: 100%;
    align-self: stretch;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.rank-card-inputs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.rank-card-inputs .form-group {
    margin: 0;
}

.rank-card-inputs .small-label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    color: var(--text-dark);
}

/* Stiluri îmbunătățite pentru input-uri */
.rank-card-inputs .form-input {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(13, 114, 255, 0.3);
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
}

.rank-card-inputs .form-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 195, 255, 0.5);
}

input.rank-color-input {
    padding: 2px !important;
    height: 40px;
    width: 100%;
    cursor: pointer;
}

.rank-manager-actions {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

#save-all-ranks {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
}

/* --- Stiluri pentru A-Color-Picker și ajustări Panou Grade --- */

.rank-editor-card {
    gap: 0.5rem;
    /* Micșorăm spațiul pentru a încăpea butonul */
    align-items: stretch;
}

.rank-card-inputs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rank-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(13, 114, 255, 0.1);
}

.rank-card-actions .small-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
}


/* ADAUGĂ ACEST STIL PENTRU SELECTORUL ORIGINAL */
input.rank-color-input {
    padding: 2px !important;
    height: 40px;
    width: 100%;
    cursor: pointer;
    border-color: rgba(13, 114, 255, 0.3);
}

/* --- LIBRĂRIA DE STILURI SPECIALE PENTRU GRADE --- */

/* Stilul de bază și structura */
.staff-rank,
.player-rank {
    /* Folosim o variabilă CSS pentru ca efectele să preia culoarea dinamic */
    --rank-color: #FFFFFF;
    color: var(--rank-color);
}

/* ====================================
   EFECTE DE GLOW & NEON
   ==================================== */
.glow-strong {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--rank-color), 0 0 20px var(--rank-color), 0 0 25px var(--rank-color);
}

.glow-soft {
    text-shadow: 0 0 10px var(--rank-color);
}

.neon-outline {
    text-shadow: 0 0 3px #fff, 0 0 5px var(--rank-color);
    -webkit-text-stroke: 0.5px var(--rank-color);
}

/* ====================================
   EFECTE DE TEXTURĂ ȘI UMBRE
   ==================================== */
.text-shadow-fire {
    text-shadow: 0 0 4px #fff, 0 -3px 4px #ff3, 2px -5px 6px #fd3, -2px -10px 11px #f80, 2px -12px 18px #f20;
}

.text-shadow-ice {
    text-shadow: 0px 0px 4px var(--rank-color), 0px 0px 10px #fff;
}

.text-shadow-3d {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
}

.text-inset {
    background-color: var(--rank-color);
    color: transparent;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
    -webkit-background-clip: text;
    background-clip: text;
}

.text-outline {
    color: rgba(0, 0, 0, 0.6);
    -webkit-text-stroke: 1px var(--rank-color);
}

.text-ghost {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.6), 0 0 3px var(--rank-color);
    color: transparent;
}


/* ====================================
   EFECTE ANIMATE
   ==================================== */

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-animation {
    0% {
        text-shadow: 0 0 4px var(--rank-color);
    }

    70% {
        text-shadow: 0 0 14px var(--rank-color);
    }

    100% {
        text-shadow: 0 0 4px var(--rank-color);
    }
}

@keyframes flicker-animation {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        text-shadow: 0 0 4px var(--rank-color), 0 0 11px var(--rank-color), 0 0 19px var(--rank-color);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}

@keyframes scanline-animation {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(50%);
    }
}

.animated-rainbow {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-animation 6s ease-in-out infinite;
    background-size: 200% 200%;
}

.animated-pulse {
    animation: pulse-animation 2s infinite ease-in-out;
}

.animated-flicker {
    animation: flicker-animation 4s infinite linear;
}

.animated-gold {
    background: linear-gradient(140deg, #b48811, #fcf4a3, #b48811);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-animation 8s infinite;
    background-size: 300%;
}

.animated-ocean {
    background: linear-gradient(90deg, #1fa2ff, #12d8fa, #a6ffcb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-animation 10s infinite;
    background-size: 400%;
}

.animated-scanline {
    position: relative;
    overflow: hidden;
}

.animated-scanline::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: var(--rank-color);
    opacity: 0.6;
    animation: scanline-animation 1.5s infinite ease-in-out alternate;
}

/* ====================================
   EFECTE DE FUNDAL (BORDER & BACKGROUND)
   ==================================== */

.bg-gradient {
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    /* Culoare fixă pentru lizibilitate */
    background: linear-gradient(90deg, var(--rank-color), #000);
}

.border-dashed {
    border: 1px dashed var(--rank-color);
    padding: 2px 8px;
    border-radius: 4px;
}

.bg-glow {
    padding: 3px 9px;
    border-radius: 5px;
    box-shadow: 0 0 10px -2px var(--rank-color);
    background: rgba(0, 0, 0, 0.3);
}

/* --- STILURI PENTRU NOUL DESIGN AL EDITORULUI DE GRADE --- */

#rank-cards-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* Optimizare pentru dimensiuni */
}

/* Noul layout principal al cardului */
.rank-editor-card.extended {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Eliminăm gap-ul principal, controlăm spațiul intern */
    padding: 0;
    overflow: hidden;
    /* Important pentru border-radius */
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.8), rgba(14, 23, 46, 0.8));
    backdrop-filter: blur(5px);
}

/* 1. Secțiunea de PREVIEW */
.rank-card-preview {
    padding: 1.5rem 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(13, 114, 255, 0.2);
    min-height: 80px;
    /* Asigură un spațiu adecvat */
    display: flex;
    justify-content: center;
    align-items: center;
}

#preview-text {
    font-size: 1.5rem;
    /* Text mai mare și mai vizibil */
    font-weight: 700;
    line-height: 1.2;
}

/* 2. Secțiunea pentru CONTROALE */
.rank-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Spațiu între grupurile de controale */
}

.rank-card-body .form-group {
    margin: 0;
    /* Resetăm marginile default */
}

.rank-card-body .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    color: var(--text-dark);
}

/* Grid pentru Culoare și Stil */
.secondary-controls {
    display: grid;
    grid-template-columns: 80px 1fr;
    /* Spațiu fix pentru culoare, restul pentru stil */
    gap: 1rem;
    align-items: end;
    /* Aliniem elementele la bază */
}

/* 3. Secțiunea pentru BUTONUL DE SALVARE */
.rank-card-footer {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    margin-top: auto;
    /* Împinge footer-ul la baza cardului */
    border-top: 1px solid rgba(13, 114, 255, 0.1);
}

.rank-card-footer .save-rank-btn {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    background: var(--accent-pink);
    box-shadow: 0 0 15px -2px var(--accent-pink);
    transition: all 0.2s ease-in-out;
}

.rank-card-footer .save-rank-btn:hover {
    background: #ff2996;
    box-shadow: 0 0 20px 0px var(--accent-pink);
}

.rank-card-footer .save-rank-btn:disabled {
    background-color: #555;
    box-shadow: none;
    cursor: wait;
}

/* --- STIL ȘI ANIMAȚIE PENTRU WATERMARK --- */

@keyframes slideInWatermark {

    /* Animația pornește cu elementul în afara ecranului și invizibil */
    from {
        transform: translateY(100%);
        /* Mutat 100% în jos (sub ecran) */
        opacity: 0;
    }

    /* Animația se termină cu elementul în poziția finală și vizibil */
    to {
        transform: translateY(0);
        opacity: 0.6;
        /* Opacitatea finală, pentru un aspect subtil */
    }
}

#watermark {
    /* Poziționare fixă în colțul din dreapta-jos al paginii */
    position: fixed;
    bottom: 10px;
    right: 15px;

    /* Stilul textului - îl facem mic și subtil */
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;

    /* Adăugăm o umbră fină pentru lizibilitate pe orice fundal */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);

    /* Asigurăm că stă deasupra altor elemente */
    z-index: 1000;

    /* Traseul animației */
    /* Numele animației: slideInWatermark */
    /* Durata: 1 secundă */
    /* Funcția de timing: ease-out (începe rapid, încetinește la final) */
    /* Delay: 1.5 secunde (așteaptă ca animațiile principale să ruleze) */
    /* Starea finală: 'forwards' (păstrează starea de la finalul animației) */
    animation: slideInWatermark 1s ease-out 1.5s forwards;

    /* Opacitate inițială zero pentru a preveni "flash"-ul înainte de animație */
    opacity: 0;

    /* Efect fin de tranziție pentru hover */
    transition: color 0.3s ease;
}

#watermark:hover {
    color: rgba(255, 255, 255, 0.9);
    /* Devine puțin mai vizibil la hover */
}

/* --- STILURI NOI PENTRU VIZUALIZARE JUCĂTORI și STAFF OFFLINE --- */

.player-search-wrapper {
    max-width: 600px;
    margin: 0 auto 3rem auto;
}

.search-bar {
    position: relative;
}

.search-bar i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#player-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 50px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-light);
    font-size: 1.1rem;
    transition: all 0.3s;
}

#player-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
}

#player-viewer-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.player-stat-card {
    background: linear-gradient(145deg, var(--staff-card-bg), var(--bg-dark-blue));
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.player-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.player-card-name {
    font-size: 1.3rem;
    font-weight: 600;
    word-break: break-all;
}

.player-card-rank {
    flex-shrink: 0;
    margin-left: 1rem;
    font-weight: 700;
    color: var(--primary-purple);
    font-size: 1.6rem;
}

.player-card-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.player-card-stat {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-dark);
    text-transform: uppercase;
}

.player-card-footer {
    margin-top: auto;
    text-align: center;
}

.player-card-footer a {
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 600;
    transition: text-shadow 0.3s;
}

.player-card-footer a:hover {
    text-shadow: 0 0 10px var(--accent-cyan);
}

/* Stil pentru statusul OFFLINE (HIDDEN) */
.offline-hidden-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #ff5252;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    opacity: 0.7;
}

/* Mesaj pentru când nu se găsesc jucători */
#player-viewer-container .no-players-message {
    grid-column: 1 / -1;
    /* Ocupă tot rândul */
    text-align: center;
    padding: 3rem;
    color: var(--text-dark);
    font-size: 1.2rem;
}

#player-viewer-container.loading-state {
    display: flex;
    /* Schimbăm în flexbox doar în starea de încărcare */
    justify-content: center;
    align-items: center;
    min-height: 250px;
    /* Adăugăm o înălțime minimă pentru a centra vertical */
    grid-template-columns: none;
    /* Dezactivăm grid-ul temporar */
}

/* --- STILURI NOI PENTRU AVATARE JUCĂTORI --- */

.player-card-header {
    /* Aliniază elementele pe orizontală */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.player-card-info {
    /* Grupează avatarul și numele */
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Permite numelui să se întindă, dar să nu depășească cardul */
    min-width: 0;
}

.player-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    object-fit: cover;
    /* Previne deformarea pozei */
    flex-shrink: 0;
    /* Nu lasă imaginea să se micșoreze */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.player-card-name {
    /* Resetăm proprietățile vechi pentru a se potrivi în noul layout */
    font-size: 1.2rem;
    /* Trunchiază numele dacă este prea lung */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- STILURI NOI PENTRU PAGINA DE PROFIL JUCĂTOR --- */

#player-profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.profile-card-wrapper {
    width: 100%;
    max-width: 800px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.9), rgba(14, 23, 46, 0.9));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 2.5rem 3rem;
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Back Button Link */
.back-to-players-link {
    position: absolute;
    top: 20px;
    left: 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.back-to-players-link:hover {
    color: var(--text-light);
}

.back-to-players-link i {
    margin-right: 0.5rem;
}

.profile-header {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--accent-cyan);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    object-fit: cover;
    margin-bottom: 1.5rem;
}

.profile-name {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-light);
    margin: 0;
}

.profile-last-seen {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    margin-bottom: 2.5rem;
}

.profile-stat-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
}

.profile-stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1;
}

.profile-stat-label {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

/* Stil special pentru K/D Ratio */
.profile-stat-value.kd-ratio {
    background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-actions {
    margin-top: 1rem;
}

/* Butonul mare și vizibil pentru Steam */
.steam-profile-button {
    background: linear-gradient(45deg, #1b2838, #2a475e);
    box-shadow: 0 0 20px rgba(27, 40, 56, 0.7);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    color: white;
}

.steam-profile-button:hover {
    box-shadow: 0 0 30px rgba(97, 192, 242, 0.7);
    background: linear-gradient(45deg, #2a475e, #1b2838);
}

/* --- Stiluri pentru Pagina de Profil Jucător (Adaugă la finalul style.css) --- */

#player-profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 80vh;
    /* Asigură că are o înălțime minimă */
}

.profile-card-wrapper {
    width: 100%;
    max-width: 800px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.9), rgba(14, 23, 46, 0.9));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 2.5rem 3rem;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.back-to-players-link {
    position: absolute;
    top: 20px;
    left: 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.back-to-players-link:hover {
    color: var(--text-light);
}

.back-to-players-link i {
    margin-right: 0.5rem;
}

.profile-header {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--accent-cyan);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    object-fit: cover;
    margin-bottom: 1.5rem;
}

.profile-name {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-light);
    margin: 0;
    word-break: break-word;
}

.profile-last-seen {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    margin-bottom: 2.5rem;
}

.profile-stat-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
}

.profile-stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1;
}

.profile-stat-label {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.profile-stat-value.kd-ratio {
    background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-actions {
    margin-top: 1rem;
}

.steam-profile-button {
    background: linear-gradient(45deg, #1b2838, #2a475e);
    box-shadow: 0 0 20px rgba(27, 40, 56, 0.7);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    color: white;
}

.steam-profile-button:hover {
    box-shadow: 0 0 30px rgba(97, 192, 242, 0.7);
    background: linear-gradient(45deg, #2a475e, #1b2838);
}

#mobile-menu-toggle {
    display: none;
    /* Ascuns pe desktop */
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.6rem;
    /* Mărime potrivită pentru icon */
    cursor: pointer;
    padding: 0.5rem;
    /* Crește zona de click */
    z-index: 1002;
    line-height: 1;
    /* Aliniază iconița vertical */
}

#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 8, 20, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

body.mobile-menu-open #mobile-menu {
    opacity: 1;
    pointer-events: auto;
}

#mobile-menu-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 2.2rem;
    cursor: pointer;
}

#mobile-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#mobile-menu li {
    margin: 2rem 0;
}

#mobile-menu a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 600;
}

#mobile-menu a:hover {
    color: var(--primary-purple);
}


/* Media Query: Aceste reguli se aplică DOAR pe telefoane (ecrane sub 768px) */
@media (max-width: 768px) {

    /* Corecția de aliniere: folosim Flexbox pentru a alinia elementele */
    .header-container {
        display: flex;
        justify-content: space-between;
        /* <- Punctul cheie! Împinge elementele la capete */
        align-items: center;
        width: 100%;
        /* Asigură că se întinde pe toată lățimea */
        padding: 0 1.5rem;
    }

    #desktop-nav {
        display: none;
        /* Ascundem meniul desktop */
    }

    #mobile-menu-toggle {
        display: block;
        /* Afișăm butonul hamburger */
    }

    /* Asigură-te că și logo-ul nu mai este centrat forțat */
    .header-container .logo {
        margin: 0;
    }
}
/* --- STILURI NOI PENTRU PAGINA DE PROFIL EXTINSĂ (Adaugă la finalul style.css) --- */

.profile-stats-grid-extended {
    display: grid;
    /* 3 coloane pe desktop, 2 pe mobil */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
    .profile-stats-grid-extended {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-name {
        font-size: 2rem;
    }
}

.profile-scp-section {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    margin: 2.5rem 0;
    padding: 1.5rem;
}

.scp-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}

.scp-tab-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scp-tab-btn:hover {
    background: var(--input-bg);
    color: var(--text-light);
}

.scp-tab-btn.active {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: white;
    box-shadow: 0 0 15px var(--glow-color);
}

.scp-tab-pane {
    display: none;
    /* Ascundem toate panourile by default */
    padding: 0.5rem;
    animation: fadeIn 0.5s ease;
}

.scp-tab-pane.active {
    display: block;
    /* Afișăm doar panoul activ */
}

.scp-general-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    align-items: center;
}

@media (max-width: 600px) {
    .scp-general-grid {
        grid-template-columns: 1fr;
    }
}

.favorite-scp-card {
    background: linear-gradient(45deg, var(--accent-pink), var(--primary-purple));
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.favorite-scp-label {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.favorite-scp-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.favorite-scp-subtext {
    font-size: 0.8rem;
    opacity: 0.7;
}

.scp-general-stats,
.scp-individual-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scp-stat-item {
    background: var(--input-bg);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid var(--accent-cyan);
}

.scp-stat-item span {
    color: var(--text-dark);
    font-weight: 500;
}

.scp-stat-item strong {
    font-size: 1.4rem;
    color: var(--text-light);
}

.scp-pane-title {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}
/* --- PROFIL JUCĂTOR V2 (DESIGN NOU) - Adaugă la finalul style.css --- */

.profile-v2-wrapper {
    width: 100%;
    max-width: 900px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.9), rgba(14, 23, 46, 0.9));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.profile-v2-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.profile-v2-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    flex-shrink: 0;
}

.profile-v2-name {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-light);
    margin: 0;
    word-break: break-word;
}

.profile-v2-lastseen {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
}

.profile-period-selector {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.period-btn {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.period-btn:hover {
    color: var(--text-light);
}

.period-btn.active {
    background-color: var(--primary-purple);
    color: white;
    box-shadow: 0 0 10px var(--glow-color);
}

.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
}

.stat-card-icon {
    font-size: 2rem;
    color: var(--accent-cyan);
    margin-bottom: 1rem;
    line-height: 1;
}

.stat-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card-label {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.stat-card-value.kd-ratio,
.stat-card-icon.kd-ratio i {
    color: var(--accent-pink);
}

.scp-stats-showcase {
    display: grid;
    grid-template-columns: 200px 1fr;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
}

.scp-nav-tabs {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scp-nav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dark);
    text-align: left;
    font-weight: 600;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.scp-nav-btn i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}

.scp-nav-btn:hover {
    background: var(--input-bg);
    color: var(--text-light);
}

.scp-nav-btn.active {
    background-color: var(--glass-bg);
    color: var(--accent-cyan);
    border-color: var(--border-color);
}

.scp-content-area {
    padding: 2rem;
}

.scp-content-pane {
    display: none;
}

.scp-content-pane.active {
    display: block;
    animation: fadeIn 0.4s;
}

.favorite-scp-hero {
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary-purple));
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    color: white;
    margin-bottom: 1.5rem;
}

.hero-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.8;
}

.hero-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
}

.stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--input-bg);
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

.stat-list-item span {
    color: var(--text-dark);
}

.stat-list-item strong {
    font-size: 1.2rem;
    color: var(--text-light);
}

.profile-v2-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Responsive Design */
@media (max-width: 900px) {
    .profile-v2-wrapper {
        padding: 1.5rem;
    }

    .scp-stats-showcase {
        grid-template-columns: 1fr;
    }

    .scp-nav-tabs {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .scp-nav-btn {
        flex-shrink: 0;
    }

    .scp-content-area {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .profile-v2-header {
        flex-direction: column;
        text-align: center;
    }

    .stat-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-v2-name {
        font-size: 1.8rem;
    }

    .profile-v2-avatar {
        width: 80px;
        height: 80px;
    }
}
/* --- PROFIL JUCĂTOR V2.1 (AJUSTĂRI VIZUALE) - Adaugă la finalul style.css --- */

/* 1. Corecție suprapunere header profil */
.profile-v2-header {
    margin-top: 2rem; /* Adaugă spațiu deasupra, împingând conținutul mai jos */
}

/* 2. Text "Decese" și "Kill-uri pe SCP" */
.stat-card-label {
    white-space: nowrap; /* Previne ruperea textului pe două rânduri */
}

/* 3. Stiluri pentru imagini în tab-urile de navigație SCP */
.scp-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scp-nav-btn img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.05);
    object-fit: contain; /* Păstrează proporțiile imaginii */
    padding: 2px;
}
/* scoatem iconita din butonul "General" */
.scp-nav-btn[data-target="general"] i {
    display: none;
}
.scp-nav-btn[data-target="general"] span {
    padding-left: calc(28px + 0.75rem); /* Aliniere cu celelalte butoane */
}

/* 4. Stiluri pentru imaginea din cardul "SCP Favorit" */
.favorite-scp-hero {
    position: relative;
    overflow: hidden; /* Important pentru imaginea de fundal */
    z-index: 1;
}

.favorite-scp-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%; /* Imaginea va fi puțin mai mare ca fundalul */
    height: 110%;
    object-fit: cover;
    opacity: 0.15; /* Foarte subtilă */
    filter: blur(5px) grayscale(50%);
    z-index: -1;
}
/* --- PROFIL JUCĂTOR V2.2 (AJUSTĂRI FINALE) - Adaugă la finalul style.css --- */

/* 1. Stil pentru noul card "SCP Favorit" cu imagine vizibilă */
.favorite-scp-hero.with-image {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Spațiu între imagine și text */
    padding: 1rem 1.5rem;
    /* Padding intern */
    text-align: left;
    /* Aliniem textul la stânga */
}

/* Stil pentru imaginea din card */
.favorite-scp-hero-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Container pentru text */
.favorite-scp-hero-text {
    flex-grow: 1;
}

/* 2. Modificare card Kill-uri pe Oameni - Iconiță nouă */
.stat-card-icon .fa-users {
    color: var(--accent-cyan);
}

/* 3. Ajustare responsive pentru grila principală de statistici */
@media (max-width: 500px) {
    .stat-card-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 coloane pe telefoane mici */
    }
}
/* --- PROFIL JUCĂTOR V2.3 (ANTET SCP) - Adaugă la finalul style.css --- */

/* Antetul din interiorul fiecărui panou SCP */
.scp-pane-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Imaginea din antet */
.scp-pane-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 5px;
    border: 1px solid var(--staff-card-border);
}

/* Titlul (ex: Profil: SCP-096) */
.scp-pane-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0 0 0.5rem 0;
}

/* Descrierea SCP-ului */
.scp-pane-description {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0;
}

/* Responsive pentru antet pe mobil */
@media (max-width: 600px) {
    .scp-pane-header {
        flex-direction: column;
        text-align: center;
    }
}
/* --- PROFIL JUCĂTOR V2.4 (AJUSTĂRI FINALE TEXT) - Adaugă la finalul style.css --- */

/* Asigură alinierea corectă a textului din panoul SCP */
.scp-pane-text {
    text-align: left;
    /* Aliniere standard pe desktop */
}

/* MODIFICAT: Centrarea textului în headerul panoului SCP, atât pe mobil cât și pe desktop */
@media (max-width: 600px) {
    .scp-pane-header {
        text-align: center;
        /* Centrare pe mobil */
    }
}
/* --- STILURI PENTRU PLAYER CARDS (PAGINA JUCĂTORI) --- */

.player-card-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.player-card-identity-rank {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rank-color, #fff);
}


/* --- STILURI PENTRU PROFILUL INDIVIDUAL --- */

.profile-v2-name-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* Permite trecerea pe rândul următor pe mobil */
}

.player-profile-rank {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.profile-v2-lastseen .player-profile-online {
    color: #00e676;
    /* Verde aprins */
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 230, 118, 0.7);
}

.profile-v2-lastseen .player-profile-online .fa-circle {
    font-size: 0.8em;
    vertical-align: middle;
    margin-right: 0.5rem;
    animation: pulse 2s infinite;
    /* Reutilizăm animația existentă */
}

/* --- FIX VIZUAL PENTRU LISTA DE JUCĂTORI (PLAYER LIST) --- */

/* 1. Asigurăm că header-ul cardului aliniază corect elementele */
.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Aliniem la partea de sus */
    width: 100%;
    gap: 1rem;
    /* Spațiu între zona numelui și numărul rank-ului */
}

/* 2. Forțăm containerul de informații să nu depășească spațiul alocat */
.player-card-info {
    flex: 1;
    /* Permite containerului să ocupe spațiul disponibil */
    min-width: 0;
    /* Aceasta este regula "magică" care permite text-overflow */
}

/* 3. CORECȚIA PRINCIPALĂ: Trunchiem numele care sunt prea lungi */
.player-card-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /* Asigură că se comportă corect ca un bloc */
    max-width: 100%;
    /* Nu permite numelui să fie mai lat decât containerul său */
}

/* 4. Poziționăm numărul rank-ului fix, fără să se încalece */
.player-card-rank {
    flex-shrink: 0;
    /* Nu permite numărului să se micșoreze */
}

/* 5. Ajustare fină pentru indicatorul OFFLINE ca să nu se suprapună peste text */
.offline-hidden-indicator {
    z-index: 2;
    /* Asigură că este deasupra fundalului, dar nu deranjează */
}
/* --- FIX VIZUAL ROBUST PENTRU PLAYER LIST ȘI PROFIL --- */

/* 1. Asigurăm că `player-stat-card` este containerul de referință pentru badg-ul de status */
.player-stat-card {
    position: relative;
}

/* 2. Adăugăm spațiu în interiorul header-ului pentru a preveni suprapunerea */
.player-card-header {
    /* Mărește padding-ul din dreapta pentru a face loc badg-ului "OFFLINE" */
    /* Valoarea de 80px este sigură pentru a cuprinde textul și padding-ul badg-ului */
    padding-right: 80px;
}

/* 3. Ne asigurăm că numele este mereu trunchiat corect dacă depășește spațiul */
.player-card-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* --- STILURI PENTRU PLAYER MUZICĂ PROFIL & ADMIN --- */

.music-player-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.player-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    background: var(--primary-purple);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px var(--glow-color);
}

.player-btn:hover {
    transform: scale(1.1);
}

.player-info {
    flex-grow: 1;
}

.song-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.progress-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
    font-size: 0.8rem;
}

input[type="range"].progress-bar,
input[type="range"].volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-cyan);
}

.volume-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 150px;
}

.profile-admin-actions {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Stiluri pentru Modal */
#upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 8, 20, 0.8);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#upload-modal-content {
    background: var(--glass-bg);
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 500px;
}

#upload-modal-content h2 {
    margin-top: 0;
}

.modal-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
/* --- PROFIL JUCĂTOR - DESIGN NOU (V3) --- */

.profile-v3-container {
    width: 100%;
    max-width: 850px;
    background-color: #12141D;
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.profile-v3-back-link {
    display: inline-block;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2.5rem;
    transition: color 0.3s;
}

.profile-v3-back-link:hover {
    color: var(--text-light);
}

.profile-v3-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-v3-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    flex-shrink: 0;
}

.profile-v3-identity {
    display: flex;
    flex-direction: column;
}

.profile-v3-name-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.profile-v3-name {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.player-profile-rank-v3 {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 3px 10px;
    border-radius: 5px;
}

/* Stiluri pentru gradul Champion ca în poză */
.player-profile-rank-v3[style*="--rank-color: #FFD700;"] {
    background-color: #FFD700;
    color: #12141D;
    text-shadow: none;
}


.profile-status {
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-status.online {
    color: #24FFB5;
}

.profile-status.offline {
    color: var(--text-dark);
}

.profile-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #24FFB5;
    box-shadow: 0 0 8px #24FFB5;
}

.profile-v3-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .profile-v3-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .profile-v3-container {
        padding: 1.5rem;
    }

    .profile-v3-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-v3-name-wrapper {
        justify-content: center;
    }
}

.stat-v3-card {
    background-color: #1A1D2A;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-v3-icon {
    font-size: 1.8rem;
    color: var(--accent-cyan);
    margin-bottom: 1rem;
}

.stat-v3-icon.kd-ratio {
    color: #F92B86;
}

.stat-v3-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-v3-value.kd-ratio {
    color: #F92B86;
}

.stat-v3-label {
    font-size: 0.8rem;
    color: var(--text-dark);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.profile-v3-footer {
    margin-top: 2.5rem;
    text-align: center;
}

.steam-v3-button {
    background-color: #2A2E40;
    color: var(--text-light);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.3s;
}

.steam-v3-button:hover {
    background-color: #383D54;
    color: #fff;
}
/* --- PROFIL JUCĂTOR - DESIGN "V4" COMPLET --- */

.profile-v4-container {
    width: 100%;
    max-width: 850px;
    background-color: #12141D;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.profile-v4-back-link {
    display: inline-block;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2.5rem;
    transition: color 0.3s;
}

.profile-v4-back-link:hover {
    color: var(--text-light);
}

.profile-v4-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.profile-v4-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    flex-shrink: 0;
}

.profile-v4-identity {
    display: flex;
    flex-direction: column;
}

.profile-v4-name-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.profile-v4-name {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.player-profile-rank-v4 {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 3px 10px;
    border-radius: 5px;
}

.player-profile-rank-v4[style*="--rank-color: #FFD700;"] {
    background-color: #FFD700;
    color: #12141D;
    text-shadow: none;
}

.profile-status-v4 {
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-status-v4.online {
    color: #24FFB5;
}

.profile-status-v4.offline {
    color: var(--text-dark);
}

.profile-status-v4 .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #24FFB5;
    box-shadow: 0 0 8px #24FFB5;
}

.profile-v4-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-v4-card {
    background-color: #1A1D2A;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-v4-icon {
    font-size: 1.8rem;
    color: var(--accent-cyan);
    margin-bottom: 1rem;
}

.stat-v4-icon.kd-ratio {
    color: #F92B86;
}

.stat-v4-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-v4-value.kd-ratio {
    color: #F92B86;
}

.stat-v4-label {
    font-size: 0.8rem;
    color: var(--text-dark);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.profile-v4-footer {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.steam-v4-button {
    background-color: #2A2E40;
    color: var(--text-light);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.3s;
}

.steam-v4-button:hover {
    background-color: #383D54;
    color: #fff;
}

/* Adaptare vizuală pentru secțiunea SCP */
.scp-stats-showcase {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 3rem;
    overflow: hidden;
}

.scp-nav-tabs {
    background: #1A1D2A;
}

.scp-nav-btn {
    color: var(--text-dark);
}

.scp-nav-btn:hover {
    background: #2A2E40;
    color: var(--text-light);
}

.scp-nav-btn.active {
    background-color: var(--primary-purple);
    color: white;
    border-color: transparent;
}

.scp-content-area {
    padding: 1.5rem;
}

.scp-pane-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scp-pane-image {
    background-color: #1A1D2A;
    border-color: rgba(255, 255, 255, 0.1);
}

.favorite-scp-hero {
    background: linear-gradient(135deg, #1A1D2A, #12141D);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-list-item {
    background: #1A1D2A;
}

@media (max-width: 900px) {
    .scp-stats-showcase {
        grid-template-columns: 1fr;
    }

    .scp-nav-tabs {
        flex-direction: row;
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .profile-v4-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .profile-v4-container {
        padding: 1.5rem;
    }

    .profile-v4-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-v4-name-wrapper {
        justify-content: center;
    }
}
/* --- PROFIL JUCĂTOR V4.1 (ARANJARE GRID 3x2) --- */

/* Această regulă se aplică ecranelor de tip desktop/laptop */
.profile-v4-stats-grid {
    /* Forțăm grila să aibă 3 coloane de lățime egală */
    grid-template-columns: repeat(3, 1fr);
    /* Păstrăm celelalte proprietăți pentru spațiere */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Păstrăm regula pentru ecranele mai mici (tablete/telefoane) */
@media (max-width: 768px) {
    .profile-v4-stats-grid {
        /* Pe ecrane mai mici, trecem la 2 coloane pentru a nu fi prea înghesuite */
        grid-template-columns: repeat(2, 1fr);
    }
}
/* --- PROFIL JUCĂTOR V4.2 (CENTRARE TEXT SCP) --- */

/* Centrarea întregului conținut din antetul panoului SCP */
.scp-pane-header {
    /* Forțăm conținutul să fie aliniat pe centru, inclusiv pe desktop */
    text-align: center;
    /* Schimbăm direcția pe mobil pentru un aspect mai bun */
    flex-direction: column;
}

/* Ne asigurăm că și containerul specific textului preia alinierea */
.scp-pane-text {
    text-align: center;
}
/* ADAUGĂ TOATE ACESTE STILURI LA FINALUL FIȘIERULUI style.css */

/* --- ÎNLOCUIEȘTE BLOCUL VECHI CU ACESTA --- */
/* --- SISTEM DE STILURI PROCEDURALE PENTRU PROFILUL JUCĂTORULUI (V2 - CORECTAT) --- */

/* Resetăm stilul containerului pentru a folosi variabilele din teme */
.profile-v4-container {
    background: var(--profile-bg, #12141D);
    border: 2px solid var(--profile-border, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: background 0.5s ease, border-color 0.5s ease;
    /* Adăugăm tranziție */
}

.profile-v4-container::before,
.profile-v4-container::after {
    content: '';
    position: absolute;
    /* Facem elementul mult mai mare decât containerul și îl centrăm */
    left: -100%;
    top: -100%;
    width: 300%;
    height: 300%;
    pointer-events: none;
    z-index: -1;
    /* Nu mai avem nevoie de border-radius aici, deoarece overflow: hidden se ocupă de asta */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 1. TEME DE CULORI DE BAZĂ (CU SELECTORI SPECIFICI) */
.profile-v4-container.theme-cosmic {
    --profile-bg: linear-gradient(160deg, #1D2B4D, #12141D);
    --profile-border: #3A7DFF;
    --profile-glow: rgba(58, 125, 255, 0.5);
    --profile-accent: #3A7DFF;
    --profile-secondary-bg: #192238;
}

.profile-v4-container.theme-crimson {
    --profile-bg: linear-gradient(160deg, #4D1D1D, #12141D);
    --profile-border: #FF3A3A;
    --profile-glow: rgba(255, 58, 58, 0.5);
    --profile-accent: #FF3A3A;
    --profile-secondary-bg: #381919;
}

.profile-v4-container.theme-cyber {
    --profile-bg: linear-gradient(160deg, #0C4040, #12141D);
    --profile-border: #00FFFF;
    --profile-glow: rgba(0, 255, 255, 0.5);
    --profile-accent: #00FFFF;
    --profile-secondary-bg: #0E2E2E;
}

.profile-v4-container.theme-golden {
    --profile-bg: linear-gradient(160deg, #4D3D1D, #12141D);
    --profile-border: #FFD700;
    --profile-glow: rgba(255, 215, 0, 0.5);
    --profile-accent: #FFD700;
    --profile-secondary-bg: #382D19;
}

.profile-v4-container.theme-amethyst {
    --profile-bg: linear-gradient(160deg, #3E1D4D, #12141D);
    --profile-border: #C33AFF;
    --profile-glow: rgba(195, 58, 255, 0.5);
    --profile-accent: #C33AFF;
    --profile-secondary-bg: #2E1938;
}

/* Aplicăm culorile temei la elementele interne */
.profile-v4-container .stat-v4-card,
.profile-v4-container .scp-stats-showcase,
.profile-v4-container .achievements-section {
    margin-top: 1rem;
    /* MODIFICAT: Adăugat spațiu DEASUPRA secțiunii */
    margin-bottom: 1rem;
    /* NOU: Adăugat spațiu DEDESUBTUL secțiunii */
    padding: 1.5rem;
    background-color: var(--profile-secondary-bg, #1A1D2A);
    border-radius: 12px;
}

.profile-v4-container .stat-v4-icon {
    color: var(--profile-accent, var(--accent-cyan));
}

.profile-v4-container .profile-v4-avatar {
    border-color: var(--profile-accent, var(--accent-cyan));
    box-shadow: 0 0 20px var(--profile-glow, rgba(0, 255, 255, 0.4));
}

/* 2. EFECTE DE FUNDAL ANIMATE */
@keyframes bg-stars-anim {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-2000px);
    }
}

.profile-v4-container.bg-stars::before {
    background-image: radial-gradient(1px 1px at 20px 30px, white, transparent), radial-gradient(1px 1px at 80px 120px, white, transparent), radial-gradient(2px 2px at 150px 250px, white, transparent), radial-gradient(1px 1px at 90% 10%, white, transparent), radial-gradient(2px 2px at 80% 50%, white, transparent), radial-gradient(1px 1px at 20% 90%, white, transparent);
    background-size: 400px 400px;
    animation: bg-stars-anim 100s linear infinite;
    opacity: 1;
}

@keyframes bg-grid-anim {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100px 100px;
    }
}

.profile-v4-container.bg-grid::before {
    background-image: linear-gradient(var(--profile-accent) 1px, transparent 1px), linear-gradient(90deg, var(--profile-accent) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    animation: bg-grid-anim 10s linear infinite;
}

@keyframes bg-flow-anim {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.profile-v4-container.bg-flow::before {
    background: radial-gradient(circle at 30% 30%, var(--profile-accent), transparent 40%), radial-gradient(circle at 70% 80%, var(--profile-glow), transparent 40%);
    opacity: 0.1;
    animation: bg-flow-anim 40s linear infinite;
}

@keyframes bg-aurora-anim {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}

.profile-v4-container.bg-aurora::before {
    background: linear-gradient(135deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 200% 200%;
    opacity: 0.15;
    filter: blur(50px);
    animation: bg-aurora-anim 20s linear infinite;
}

/* 3. EFECTE DE BORDURĂ */
.profile-v4-container.border-glow {
    box-shadow: 0 0 20px var(--profile-glow);
}

.profile-v4-container.border-dashed {
    border-style: dashed;
}

@keyframes border-gradient-anim {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.profile-v4-container.border-animated-gradient::after {
    background: conic-gradient(from 0deg, transparent 50%, var(--profile-accent) 100%);
    animation: border-gradient-anim 4s linear infinite;
    opacity: 0.8;
}

/* --- CORECȚIE CRITICĂ PENTRU AFIȘAREA TROFEELOR --- */

.achievements-grid {
    display: grid;
    /* Folosim grid pentru aliniere */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* Fiecare card are minim 100px */
    gap: 1rem;
}

.achievement-card {
    display: flex;
    /* Folosim flex pentru aliniere internă */
    flex-direction: column;
    /* Iconița deasupra, textul dedesubt */
    justify-content: center;
    /* Aliniere verticală pe centru */
    align-items: center;
    /* Aliniere orizontală pe centru */
    gap: 0.5rem;

    background: #12141D;
    border-radius: 8px;
    border: 1px solid #2c2f48;
    padding: 0.75rem;
    text-align: center;
    /* Asigură centrarea textului */
    min-height: 100px;

    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rarity-color, #888);
}

.achievement-icon {
    font-size: 2rem;
    color: var(--rarity-color, #888);
    text-shadow: 0 0 10px var(--rarity-color);
}

.achievement-name-display {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.achievement-card:not(.locked) .achievement-name-display {
    color: var(--text-light);
}
.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    /* MODIFICAT: Mărit de la 1rem la 1.5rem pentru mai mult spațiu */
}
/* ADAUGĂ ACEST BLOC CSS NOU LA FINALUL style.css PENTRU A REPARA MODALUL */

/* Stilul pentru fundalul semi-transparent care acoperă toată pagina */
.modal-overlay {
    position: fixed;
    /* Cheia: Stă fix pe ecran, chiar și la scroll */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(6, 8, 20, 0.85);
    /* Fundal întunecat */
    backdrop-filter: blur(10px);
    /* Efect de sticlă mată */
    z-index: 1000;
    /* Asigură că este deasupra tuturor celorlalte elemente */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
    /* Animație subtilă de apariție */
}

/* Fereastra principală a modalului */
.modal-content {
    background: #12141D;
    width: 100%;
    max-width: 800px;
    /* Lățimea maximă a ferestrei */
    max-height: 90vh;
    /* Înălțime maximă, lasă spațiu sus și jos */
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    /* Structură flexibilă: header, body scrollabil */
    overflow: hidden;
    /* Previne conținutul să iasă din colțurile rotunjite */
}

/* Antetul ferestrei (cu titlu și buton de închidere) */
.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* Nu lasă header-ul să se micșoreze */
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.modal-close-btn:hover {
    color: var(--text-light);
    transform: rotate(90deg);
}

/* Conținutul scrollabil al ferestrei */
.modal-body {
    overflow-y: auto;
    /* Adaugă scrollbar vertical DOAR dacă e necesar */
    padding: 1.5rem;
}

/* Grupul pentru fiecare raritate */
.modal-rarity-group {
    margin-bottom: 2rem;
}

/* Titlul rarității (Common, Epic, etc.) */
.rarity-title {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
}

.rarity-title.rarity-common {
    color: #90A4AE;
    border-color: #90A4AE;
}

.rarity-title.rarity-uncommon {
    color: #4CAF50;
    border-color: #4CAF50;
}

.rarity-title.rarity-rare {
    color: #2196F3;
    border-color: #2196F3;
}

.rarity-title.rarity-epic {
    color: #9C27B0;
    border-color: #9C27B0;
}

.rarity-title.rarity-legendary {
    color: #FFC107;
    border-color: #FFC107;
}

/* Grila de trofee din interiorul modalului */
.modal-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Cardul individual al unui trofeu din modal */
.modal-achievement-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--staff-card-bg);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--rarity-color);
    transition: background-color 0.2s;
}

/* Stil pentru trofeele blocate (gri) */
.modal-achievement-card.locked {
    filter: grayscale(80%);
    opacity: 0.6;
}

.modal-achievement-card:not(.locked):hover {
    background-color: var(--input-bg);
}

.modal-achievement-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
    color: var(--rarity-color);
}

.modal-achievement-name {
    font-weight: 600;
    color: var(--text-light);
}

.modal-achievement-desc {
    font-size: 0.85rem;
    color: var(--text-dark);
}
/* ADAUGĂ ACEST BLOC NOU LA FINALUL style.css */

/* GĂSEȘTE STILURILE PENTRU TROFEE ȘI ÎNLOCUIEȘTE-LE CU ACEST BLOC CORECTAT */

/* Containerul principal pentru secțiunea de trofee */
.achievements-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--profile-secondary-bg, #1A1D2A);
    border-radius: 12px;
}

/* Antetul (Titlu + Buton) */
.achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.achievements-header .section-subtitle {
    margin-bottom: 0;
}

/* Grila unde stau cardurile de trofee */
.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Centrează rândurile de carduri */
    gap: 1rem;
    /* Spațiul dintre carduri a fost redus puțin pentru a se potrivi mai bine */
}

/* Stilul de bază pentru FIECARE card de trofeu */
.achievement-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 110px;
    /* O lățime fixă pentru consistență */
    min-height: 100px;
    background: #12141D;
    border-radius: 8px;
    border: 1px solid #2c2f48;
    padding: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* BARA COLORATĂ de deasupra cardului */
.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--rarity-color);
    /* Folosește direct variabila de raritate */
}

/* Iconița trofeului */
.achievement-card .achievement-icon {
    font-size: 2.2rem;
    color: var(--rarity-color);
    /* Folosește direct variabila de raritate */
    text-shadow: 0 0 10px var(--rarity-color);
    line-height: 1;
}

/* Numele trofeului */
.achievement-card .achievement-name-display {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.achievement-card:not(.locked) .achievement-name-display {
    color: var(--text-light);
}

/* === DEFINIȚIILE CULORILOR PENTRU FIECARE RARITATE === */
/* Aici definim variabila --rarity-color pentru fiecare clasă specifică */

.achievement-card.rarity-common {
    --rarity-color: #90A4AE;
    /* Gri */
}

.achievement-card.rarity-uncommon {
    --rarity-color: #4CAF50;
    /* Verde */
}

.achievement-card.rarity-rare {
    --rarity-color: #2196F3;
    /* Albastru */
}

.achievement-card.rarity-epic {
    --rarity-color: #9C27B0;
    /* Mov */
}

.achievement-card.rarity-legendary {
    --rarity-color: #FFC107;
    /* Auriu */
    animation: legendary-glow 2s infinite alternate;
}
/*
================================================================================
|                                                                              |
|           SISTEM DE STILURI PENTRU PROFIL V4 (EDIȚIA DEFINITIVĂ)               |
|                                                                              |
|     Acest fișier este un înlocuitor complet (1:1) pentru stilurile tale.      |
|     Toate numele claselor au fost păstrate pentru compatibilitate perfectă.   |
|     Fiecare efect a fost reimaginat pentru o experiență vizuală unică.        |
|     * NOU: Adăugat stiluri pentru a centra cardul pe pagină.                   |
|                                                                              |
================================================================================
*/


/* --- STILURI DE BAZĂ ȘI LAYOUT --- */
:root {
    --transition-speed: 0.8s;
}

/* NOU: Aceste reguli centrează containerul profilului pe pagină */
#player-profile-container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Centrează cardul de profil din interiorul acestui container */
    padding: 3rem 1.5rem;
    /* Adaugă spațiu de aerisire sus/jos și pe margini */
    box-sizing: border-box;
}


/* --- CONFIGURARE CARD PROFIL --- */
.profile-v4-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    /* Setează o lățime maximă pentru card */
    border-radius: 20px;
    overflow: hidden;
    background: var(--profile-bg, #10141f);
    border: 1px solid var(--profile-border, #5892ff);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.05),
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all var(--transition-speed) cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateZ(0);
}

.profile-v4-container::before,
.profile-v4-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    border-radius: 20px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease-out;
}

.profile-v4-container[class*="bg-"]::before,
.profile-v4-container[class*="border-animated"]::after,
.profile-v4-container[class*="border-corners"]::after,
.profile-v4-container[class*="overlay-"]::after {
    opacity: 1;
}

/* --- 1. TEME DE CULORI (Premium & Vibrante) --- */
.profile-v4-container.theme-cosmic {
    --profile-bg: #10141f;
    --profile-border: #5892ff;
    --profile-glow: rgba(88, 146, 255, 0.6);
    --profile-accent: #a7c8ff;
    --profile-secondary-bg: #1e2949;
}

.profile-v4-container.theme-crimson {
    --profile-bg: #141010;
    --profile-border: #ff5858;
    --profile-glow: rgba(255, 88, 88, 0.6);
    --profile-accent: #ff9d9d;
    --profile-secondary-bg: #491e1e;
}

.profile-v4-container.theme-cyber {
    --profile-bg: #0f1c1c;
    --profile-border: #00ffff;
    --profile-glow: rgba(0, 255, 255, 0.6);
    --profile-accent: #c0ffff;
    --profile-secondary-bg: #0a4343;
}

.profile-v4-container.theme-golden {
    --profile-bg: #1c1911;
    --profile-border: #ffd700;
    --profile-glow: rgba(255, 215, 0, 0.6);
    --profile-accent: #fff5b1;
    --profile-secondary-bg: #5c4c1a;
}

.profile-v4-container.theme-amethyst {
    --profile-bg: #17111c;
    --profile-border: #e08aff;
    --profile-glow: rgba(200, 94, 255, 0.6);
    --profile-accent: #f0c3ff;
    --profile-secondary-bg: #3b1e49;
}

.profile-v4-container.theme-emerald {
    --profile-bg: #111c16;
    --profile-border: #3aff88;
    --profile-glow: rgba(58, 255, 136, 0.6);
    --profile-accent: #beffda;
    --profile-secondary-bg: #1e492e;
}

.profile-v4-container.theme-ruby {
    --profile-bg: #1e1111;
    --profile-border: #ff4d4d;
    --profile-glow: rgba(255, 77, 77, 0.6);
    --profile-accent: #ffbaba;
    --profile-secondary-bg: #5a1212;
}

.profile-v4-container.theme-obsidian {
    --profile-bg: #0a0a0a;
    --profile-border: #ffffff;
    --profile-glow: rgba(255, 255, 255, 0.5);
    --profile-accent: #ffffff;
    --profile-secondary-bg: #1f1f1f;
}


/* --- 2. ANIMAȚII CHEIE (Motorul efectelor) --- */
@keyframes pan-background {
    to {
        background-position: 200% center;
    }
}

@keyframes rotate-center {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes breath-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 8px var(--profile-glow));
        opacity: 0.8;
    }

    50% {
        filter: drop-shadow(0 0 16px var(--profile-glow));
        opacity: 1;
    }
}

/* --- 3. EFECTE DE FUNDAL (pe ::before) --- Complet reimplementate --- */

/* Secțiunea: Efecte Speciale / Abstracte */
.bg-aurora::before {
    background: linear-gradient(-60deg, var(--profile-glow), var(--profile-accent), var(--profile-secondary-bg));
    background-size: 300% 300%;
    opacity: 0.25 !important;
    filter: blur(120px) brightness(1.2);
    animation: pan-background 30s ease-in-out infinite alternate;
}

.bg-nebula::before {
    background: radial-gradient(ellipse at 40% 30%, var(--profile-glow), transparent 50%), radial-gradient(ellipse at 70% 80%, var(--profile-accent), transparent 60%);
    background-blend-mode: color-dodge;
    filter: blur(100px) saturate(1.5);
    opacity: 0.4 !important;
    animation: pan-background 30s ease-in-out infinite alternate;
}

.bg-flow::before {
    background: radial-gradient(ellipse at 20% 80%, var(--profile-glow), transparent 50%), radial-gradient(ellipse at 80% 20%, var(--profile-accent), transparent 50%);
    filter: blur(100px);
    opacity: 0.2 !important;
    animation: rotate-center 30s ease-in-out infinite alternate;
}

.bg-plasma::before {
    background: radial-gradient(circle at 25% 25%, var(--profile-accent), transparent 50%), radial-gradient(circle at 75% 75%, var(--profile-glow), transparent 50%);
    opacity: 0.2 !important;
    filter: blur(80px);
    animation: rotate-center 20s ease-in-out infinite alternate;
}

.bg-liquid::before {
    background: radial-gradient(circle at 100% 100%, var(--profile-glow), var(--profile-accent) 20%, transparent), radial-gradient(circle at 0% 0%, var(--profile-accent), var(--profile-glow) 40%, transparent);
    opacity: 0.1 !important;
    filter: blur(50px);
    animation: pan-background 25s ease-in-out infinite;
}

.bg-clouds::before {
    background: radial-gradient(circle at 10% 20%, var(--profile-glow), transparent 50%), radial-gradient(circle at 80% 40%, var(--profile-accent), transparent 60%), radial-gradient(circle at 40% 90%, var(--profile-glow), transparent 50%);
    filter: blur(50px);
    opacity: 0.15 !important;
    animation: pan-background 30s ease-in-out infinite;
}

.bg-crystal::before {
    background: linear-gradient(135deg, transparent 45%, var(--profile-accent) 50%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--profile-glow) 50%, transparent 55%);
    background-size: 80px 80px;
    opacity: 0.1 !important;
    animation: breath-glow 6s infinite alternate;
}

.bg-constellation::before {
    background: radial-gradient(1px 1px, var(--profile-accent), transparent) 10% 10%, radial-gradient(1px 1px, white, transparent) 50% 50%, radial-gradient(1.5px 1.5px, white, transparent) 80% 20%, linear-gradient(120deg, var(--profile-glow), transparent 50%), linear-gradient(200deg, var(--profile-glow), transparent 60%);
    opacity: 0.25 !important;
    background-size: 500px 500px;
    animation: pan-background 100s linear infinite;
}

/* Secțiunea: Efecte Digitale / Sci-Fi */
.bg-stars::before {
    background: radial-gradient(1px 1px at 20% 30%, var(--profile-accent), transparent), radial-gradient(1.5px 1.5px at 80% 60%, white, transparent), radial-gradient(1px 1px at 50% 85%, var(--profile-accent), transparent);
    background-size: 800px 800px;
    opacity: 0.6 !important;
    animation: pan-background 200s linear infinite, breath-glow 10s ease-in-out infinite alternate;
}

.bg-grid::before {
    background: linear-gradient(var(--profile-accent) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, var(--profile-accent) 1px, transparent 1px) 0 0 / 30px 30px;
    opacity: 0.1 !important;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    animation: rotate-center 20s linear infinite reverse, breath-glow 5s ease-in-out infinite;
}

@keyframes matrix-fall {
    to {
        background-position: 0 100%;
    }
}

.bg-matrix::before {
    content: " quix.";
    color: var(--profile-accent);
    font-family: monospace;
    font-size: 20px;
    line-height: 1;
    text-shadow: 0 0 5px var(--profile-glow);
    word-break: break-all;
    opacity: 0.2 !important;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    animation: matrix-fall 10s linear infinite;
}

.bg-hyperspace::before {
    background: repeating-conic-gradient(from 0deg, var(--profile-accent) 0deg 1deg, transparent 1deg 30deg);
    mask-image: radial-gradient(circle at center, black 10%, transparent 80%);
    opacity: 0.2 !important;
    animation: rotate-center 10s linear infinite;
}

.bg-tunnel::before {
    background: repeating-radial-gradient(circle at center, transparent 0, transparent 5px, var(--profile-accent) 6px, transparent 7px);
    animation: rotate-center 20s linear infinite, breath-glow 5s infinite alternate;
    opacity: 0.1 !important;
}

.bg-vortex::before {
    background: radial-gradient(transparent 30%, var(--profile-accent) 100%);
    clip-path: polygon(50% 50%, 0 0, 10% 100%, 50% 50%, 100% 0, 90% 100%);
    opacity: 0.1;
    animation: rotate-center 10s linear infinite;
}

.bg-radar::before {
    background: conic-gradient(from 0deg at 50% 50%, transparent 0%, var(--profile-glow) 5%, transparent 15%);
    opacity: 0.2 !important;
    animation: rotate-center 4s linear infinite;
}

.bg-binary::before {
    content: "0101";
    color: var(--profile-accent);
    font-size: 16px;
    line-height: 2;
    word-break: break-all;
    text-align: justify;
    opacity: 0.1 !important;
    animation: matrix-fall 15s linear infinite;
}

@keyframes glitch-anim {
    0% {
        clip-path: inset(86% 0 8% 0);
        transform: translateX(-5px);
    }

    10% {
        clip-path: inset(5% 0 86% 0);
        transform: translateX(5px);
    }

    50% {
        clip-path: inset(59% 0 25% 0);
        transform: translateY(-2px);
    }

    100% {
        clip-path: inset(86% 0 8% 0);
        transform: translateY(0);
    }
}

.bg-glitch::before {
    content: '';
    background: linear-gradient(45deg, var(--profile-accent), var(--profile-glow));
    opacity: 0.2 !important;
    z-index: -2;
    animation: glitch-anim 2s steps(2, end) infinite;
}

/* Secțiunea: Efecte de Energie & Particule */
@keyframes pulse-intense {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter: brightness(1.5);
    }
}

.bg-pulse::before {
    background: radial-gradient(circle, var(--profile-glow) 0%, transparent 60%);
    opacity: 0.4 !important;
    animation: pulse-intense 5s ease-in-out infinite alternate;
}

.bg-rain::before {
    background-image: linear-gradient(transparent, var(--profile-accent));
    background-size: 1px 50px;
    opacity: 0.2 !important;
    animation: matrix-fall 0.8s linear infinite;
}

.bg-energy::before {
    background: repeating-linear-gradient(transparent 0%, var(--profile-accent) 50%, transparent 100%);
    background-size: 100% 4px;
    opacity: 0.15 !important;
    animation: matrix-fall 2s linear infinite;
}

.bg-bubbles::before {
    background: radial-gradient(circle at 20% 30%, var(--profile-accent) 4px, transparent 4px), radial-gradient(circle at 70% 80%, var(--profile-accent) 2px, transparent 2px), radial-gradient(circle at 50% 50%, var(--profile-glow) 5px, transparent 5px);
    background-size: 100px 100px;
    opacity: 0.2 !important;
    animation: matrix-fall 20s linear infinite;
}

.bg-electric::before {
    background: linear-gradient(transparent 45%, var(--profile-glow) 50%, transparent 55%), linear-gradient(60deg, transparent 45%, var(--profile-accent) 50%, transparent 55%), linear-gradient(-60deg, transparent 45%, var(--profile-accent) 50%, transparent 55%);
    opacity: 0.1;
    animation: breath-glow 2s ease-in-out infinite;
}

.bg-fire-embers::before {
    background: radial-gradient(circle, var(--profile-accent) 1px, transparent 1.5px);
    background-size: 50px 50px;
    opacity: 0.4;
    animation: matrix-fall 5s linear infinite reverse, breath-glow 5s infinite;
}

.bg-soundwave::before {
    background: repeating-radial-gradient(circle at center, var(--profile-accent) 0, var(--profile-accent) 2px, transparent 2px, transparent 40px);
    opacity: 0.05 !important;
    animation: pulse-intense 2s linear infinite;
}

.bg-spotlight::before {
    background: conic-gradient(from 135deg at 50% -10%, transparent 40%, var(--profile-glow) 50%, transparent 60%);
    opacity: 0.15;
}

/* Secțiunea: Texturi & Modele Geometrice */
.bg-hex::before {
    background-color: var(--profile-accent);
    opacity: 0.05 !important;
    mask-image: repeating-linear-gradient(60deg, #0000 0 19px, #000 20px 40px), repeating-linear-gradient(120deg, #0000 0 19px, #000 20px 40px);
    mask-size: 80px 80px;
    animation: pan-background 20s linear infinite reverse;
}

.bg-carbon::before {
    background: linear-gradient(335deg, var(--profile-secondary-bg) 23px, #0000 23px), linear-gradient(155deg, var(--profile-accent) 23px, #0000 23px);
    background-size: 58px 58px;
    opacity: 0.1;
}

.bg-stripes-diag::before {
    background: repeating-linear-gradient(-45deg, var(--profile-secondary-bg), var(--profile-secondary-bg) 5px, var(--profile-accent) 5px, var(--profile-accent) 6px);
    opacity: 0.1;
}

.bg-stripes-vert::before {
    background: repeating-linear-gradient(var(--profile-secondary-bg), var(--profile-secondary-bg) 5px, var(--profile-accent) 5px, var(--profile-accent) 6px);
    opacity: 0.1;
}

.bg-scanline-h::before {
    background: repeating-linear-gradient(transparent, transparent 2px, var(--profile-secondary-bg) 3px, var(--profile-secondary-bg) 4px);
    opacity: 0.2;
}

.bg-scanline-v::before {
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, var(--profile-secondary-bg) 3px, var(--profile-secondary-bg) 4px);
    opacity: 0.2;
}

.bg-polka::before {
    background-image: radial-gradient(var(--profile-accent) 10%, transparent 11%);
    background-size: 50px 50px;
    opacity: 0.05;
    animation: breath-glow 5s ease-in-out infinite;
}

.bg-checkerboard::before {
    background-image: linear-gradient(45deg, var(--profile-secondary-bg) 25%, #0000 25%), linear-gradient(-45deg, var(--profile-secondary-bg) 25%, #0000 25%), linear-gradient(45deg, #0000 75%, var(--profile-secondary-bg) 75%), linear-gradient(-45deg, #0000 75%, var(--profile-secondary-bg) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    opacity: 0.2;
}

.bg-diamonds::before {
    background: repeating-conic-gradient(var(--profile-secondary-bg) 0% 25%, var(--profile-accent) 0% 50%) 50% / 30px 30px;
    opacity: 0.05;
}

.bg-triangles::before {
    background: linear-gradient(315deg, var(--profile-accent) 25%, #0000 25%) -10px 0, linear-gradient(225deg, var(--profile-accent) 25%, #0000 25%) -10px 0, linear-gradient(135deg, var(--profile-accent) 25%, #0000 25%), linear-gradient(45deg, var(--profile-accent) 25%, #0000 25%);
    background-size: 20px 20px;
    opacity: 0.04;
}

.bg-gears::before {
    background: radial-gradient(circle, #0000 20px, var(--profile-accent) 21px, var(--profile-accent) 23px, #0000 24px), repeating-linear-gradient(45deg, var(--profile-accent) 0 2px, #0000 2px 5px);
    background-size: 60px 60px;
    opacity: 0.1;
}

.bg-tectonic::before {
    background: repeating-linear-gradient(45deg, #000 0, #000 5px, var(--profile-accent) 5px, var(--profile-accent) 10px), repeating-linear-gradient(-45deg, #000 0, #000 5px, var(--profile-accent) 5px, var(--profile-accent) 10px);
    opacity: 0.05;
}

.bg-waves::before {
    background: radial-gradient(circle at 0 50%, #0000 10px, var(--profile-accent) 11px, var(--profile-accent) 12px, #0000 13px) -100px 0;
    background-size: 200px 50px;
    opacity: 0.1;
    animation: pan-background 4s linear infinite;
}

.bg-sunburst::before {
    background: repeating-conic-gradient(var(--profile-glow) 0deg 5deg, transparent 5deg 15deg);
    opacity: 0.1;
    animation: rotate-center 20s linear infinite;
}


/* --- 4. EFECTE DE BORDURĂ (pe ::after) - Extravagante --- */
.profile-v4-container.border-glow::after {
    border: 2px solid var(--profile-accent);
    filter: blur(8px) brightness(1.5);
    animation: breath-glow 5s ease-in-out infinite alternate;
    opacity: 0.7 !important;
    border-radius: 20px;
}

.profile-v4-container.border-dashed {
    border-style: dashed;
    border-width: 1px;
}

.profile-v4-container.border-double {
    border-width: 5px;
    border-style: double;
}

.profile-v4-container.border-inset {
    box-shadow: inset 0 0 12px 3px var(--profile-glow), 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes border-gradient-anim {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.profile-v4-container.border-animated-gradient {
    border-color: transparent;
    padding: 2px;
    background-clip: padding-box;
    background-color: var(--profile-bg);
}

.profile-v4-container.border-animated-gradient::after {
    inset: -2px;
    background: conic-gradient(from var(--angle), var(--profile-glow), var(--profile-accent), var(--profile-glow));
    filter: blur(5px);
    animation: border-gradient-anim 4s linear infinite;
}

@keyframes corner-flicker {

    0%,
    100% {
        clip-path: polygon(0 0, 30px 0, 30px 3px, 3px 3px, 3px 30px, 0 30px);
    }

    10% {
        clip-path: polygon(0 0, 100% 0, 100% 3px, 97% 3px, 97% 97%, 100% 97%, 100% 100%, 0 100%, 0 97%, 3% 97%, 3% 3%, 0 3%);
    }

    20% {
        clip-path: polygon(calc(100% - 30px) 0, 100% 0, 100% 30px, calc(100% - 3px) 30px, calc(100% - 3px) 3px, calc(100% - 30px) 3px);
    }

    30% {
        clip-path: polygon(0 0, 3px 0, 3px 3px, 97% 3px, 97% 0, 100% 0, 100% 100%, 97% 100%, 97% 97%, 3% 97%, 3% 100%, 0 100%);
    }

    50% {
        clip-path: polygon(calc(100% - 30px) 100%, 100% 100%, 100% calc(100% - 30px), calc(100% - 3px) calc(100% - 30px), calc(100% - 3px) calc(100% - 3px), calc(100% - 30px) calc(100% - 3px));
    }

    75% {
        clip-path: polygon(0 calc(100% - 30px), 30px calc(100% - 30px), 30px calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 0 100%);
    }
}

.profile-v4-container.border-corners {
    border-color: transparent;
}

.profile-v4-container.border-corners::after {
    background: var(--profile-accent);
    filter: drop-shadow(0 0 8px var(--profile-glow));
    animation: corner-flicker 8s ease-in-out infinite;
}

/* --- 5. SUPRAPUNERI (pe ::after) - 100% CSS --- */
.profile-v4-container.overlay-vignette::after {
    background: radial-gradient(ellipse at center, transparent 35%, black 100%);
    opacity: 0.8 !important;
}

.profile-v4-container.overlay-scanlines::after {
    background: repeating-linear-gradient(transparent 0, transparent 3px, rgba(0, 0, 0, 0.5) 4px, rgba(0, 0, 0, 0.5) 5px);
    opacity: 0.2 !important;
    mix-blend-mode: overlay;
    animation: pan-background 40s linear infinite alternate;
}

@keyframes static-noise {
    0% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-2%, 2%)
    }

    20% {
        transform: translate(2%, -2%)
    }

    30% {
        transform: translate(-2%, -2%)
    }

    40% {
        transform: translate(2%, 2%)
    }

    50% {
        transform: translate(-1%, 1%)
    }

    60% {
        transform: translate(1%, -1%)
    }

    70% {
        transform: translate(-1%, -1%)
    }

    80% {
        transform: translate(1%, 1%)
    }

    90% {
        transform: translate(-2%, 1%)
    }

    100% {
        transform: translate(0, 0)
    }
}

.profile-v4-container.overlay-static::after {
    background: repeating-conic-gradient(rgba(0, 0, 0, 0.2) 0% 25%, transparent 25% 50%) 50% / 2px 2px;
    opacity: 0.1 !important;
    animation: static-noise 0.2s steps(2, jump-start) infinite;
}
/* ADAUGĂ ACEST BLOC NOU LA FINALUL style.css PENTRU A REPARA MODALUL ȘI AFIȘAREA TROFEELOR */

/* ================================================ */
/* STILURI PENTRU FEREASTRA MODALĂ (TOATE TROFEELE) */
/* ================================================ */

/* Fundalul semi-transparent care acoperă toată pagina */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(6, 8, 20, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

/* Fereastra principală a modalului */
.modal-content {
    background: #12141D;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Antetul ferestrei (cu titlu și buton de închidere) */
.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.modal-close-btn:hover {
    color: var(--text-light);
    transform: rotate(90deg);
}

/* Conținutul scrollabil al ferestrei */
.modal-body {
    overflow-y: auto;
    padding: 1.5rem;
}

/* Grupul pentru fiecare raritate */
.modal-rarity-group {
    margin-bottom: 2rem;
}

/* Titlul rarității (Common, Epic, etc.) */
.rarity-title {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
}

/* Culorile specifice pentru fiecare raritate */
.rarity-title.rarity-common {
    color: #90A4AE;
    border-color: #90A4AE;
}

.rarity-title.rarity-uncommon {
    color: #4CAF50;
    border-color: #4CAF50;
}

.rarity-title.rarity-rare {
    color: #2196F3;
    border-color: #2196F3;
}

.rarity-title.rarity-epic {
    color: #9C27B0;
    border-color: #9C27B0;
}

.rarity-title.rarity-legendary {
    color: #FFC107;
    border-color: #FFC107;
}

/* Grila de trofee din interiorul modalului */
.modal-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Cardul individual al unui trofeu din modal */
.modal-achievement-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--staff-card-bg);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--rarity-color);
    /* Folosește variabila definită mai jos */
    transition: background-color 0.2s;
}

/* Stil pentru trofeele blocate (gri) */
.modal-achievement-card.locked {
    filter: grayscale(80%);
    opacity: 0.6;
}

.modal-achievement-card:not(.locked):hover {
    background-color: var(--input-bg);
}

.modal-achievement-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
    color: var(--rarity-color);
}

.modal-achievement-name {
    font-weight: 600;
    color: var(--text-light);
}

.modal-achievement-desc {
    font-size: 0.85rem;
    color: var(--text-dark);
}


/* ======================================================== */
/* STILURI PENTRU SECȚIUNEA DE TROFEE DE PE PAGINA DE PROFIL */
/* ======================================================== */

.achievements-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--profile-secondary-bg, #1A1D2A);
    border-radius: 12px;
}

.achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.achievements-header .section-subtitle {
    margin-bottom: 0;
}

.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.achievement-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 110px;
    min-height: 100px;
    background: #12141D;
    border-radius: 8px;
    border: 1px solid #2c2f48;
    padding: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--rarity-color);
}

.achievement-card .achievement-icon {
    font-size: 2.2rem;
    color: var(--rarity-color);
    text-shadow: 0 0 10px var(--rarity-color);
    line-height: 1;
}

.achievement-card .achievement-name-display {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.achievement-card:not(.locked) .achievement-name-display {
    color: var(--text-light);
}

/* Variabilele de culoare pentru fiecare raritate */
.modal-achievement-card.rarity-common,
.achievement-card.rarity-common {
    --rarity-color: #90A4AE;
}

.modal-achievement-card.rarity-uncommon,
.achievement-card.rarity-uncommon {
    --rarity-color: #4CAF50;
}

.modal-achievement-card.rarity-rare,
.achievement-card.rarity-rare {
    --rarity-color: #2196F3;
}

.modal-achievement-card.rarity-epic,
.achievement-card.rarity-epic {
    --rarity-color: #9C27B0;
}

.modal-achievement-card.rarity-legendary,
.achievement-card.rarity-legendary {
    --rarity-color: #FFC107;
}
/* --- CORECȚIE FORȚATĂ PENTRU CENTRARE PROFIL JUCĂTOR --- */
/* Adaugă acest bloc la finalul absolut al fișierului style.css */

#player-profile-container {
    /* Ne asigurăm că acest container ocupă toată lățimea pe care i-o oferă părintele său */
    width: 100%;

    /* Schimbăm layout-ul în 'block' pentru a permite centrarea clasică cu 'margin' */
    display: block;
}

#player-profile-container .profile-v4-container {
    /* REGULA CHEIE:
        - Această regulă anulează orice aliniere moștenită de la un flexbox părinte.
        - 'margin: auto' pe orizontală va centra perfect cardul în spațiul containerului său. */
    margin-left: auto;
    margin-right: auto;
}
/*
================================================================================
|                                                                              |
|           SISTEM DE STILURI PENTRU PROFIL V4 (EDIȚIA ATMOSFERICĂ)              |
|                                                                              |
|     Acest fișier înlocuiește complet blocul anterior.                         |
|     Toate efectele sunt acum animate, dar cu un accent major pe subtilitate.  |
|                                                                              |
================================================================================
*/


/* --- STILURI DE BAZĂ ȘI LAYOUT (Neschimbat) --- */
:root {
    --transition-speed: 0.8s;
}

#player-profile-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
    box-sizing: border-box;
}

/* --- CONFIGURARE CARD PROFIL (FUNDAȚIA PENTRU EFECTE) --- */
.profile-v4-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--profile-bg, #10141f);
    border: 1px solid var(--profile-border, rgba(88, 146, 255, 0.5));
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all var(--transition-speed) cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateZ(0);
}

.profile-v4-container::before,
.profile-v4-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    border-radius: 20px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease-out;
}

.profile-v4-container[class*="bg-"]::before,
.profile-v4-container[class*="border-animated"]::after,
.profile-v4-container.border-corners::after,
.profile-v4-container[class*="overlay-"]::after {
    opacity: 1;
}

/* --- 1. TEME DE CULORI (Neschimbat) --- */
.profile-v4-container.theme-cosmic {
    --profile-bg: #10141f;
    --profile-border: #5892ff;
    --profile-glow: rgba(88, 146, 255, 0.6);
    --profile-accent: #a7c8ff;
    --profile-secondary-bg: #1e2949;
}

.profile-v4-container.theme-crimson {
    --profile-bg: #141010;
    --profile-border: #ff5858;
    --profile-glow: rgba(255, 88, 88, 0.6);
    --profile-accent: #ff9d9d;
    --profile-secondary-bg: #491e1e;
}

.profile-v4-container.theme-cyber {
    --profile-bg: #0f1c1c;
    --profile-border: #00ffff;
    --profile-glow: rgba(0, 255, 255, 0.6);
    --profile-accent: #c0ffff;
    --profile-secondary-bg: #0a4343;
}

.profile-v4-container.theme-golden {
    --profile-bg: #1c1911;
    --profile-border: #ffd700;
    --profile-glow: rgba(255, 215, 0, 0.6);
    --profile-accent: #fff5b1;
    --profile-secondary-bg: #5c4c1a;
}

.profile-v4-container.theme-amethyst {
    --profile-bg: #17111c;
    --profile-border: #e08aff;
    --profile-glow: rgba(200, 94, 255, 0.6);
    --profile-accent: #f0c3ff;
    --profile-secondary-bg: #3b1e49;
}

/* --- 2. ANIMAȚII CHEIE (Motorul efectelor) --- */
@keyframes pan-background {
    to {
        background-position: 200% center;
    }
}

@keyframes rotate-center {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes breath-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 5px var(--profile-glow));
        opacity: 0.6;
    }

    50% {
        filter: drop-shadow(0 0 12px var(--profile-glow));
        opacity: 1;
    }
}

@keyframes slow-pan-vertical {
    to {
        background-position: 0 200px;
    }
}

/* --- 3. EFECTE DE FUNDAL ANIMATE ȘI SUBTILE (pe ::before) --- */

/* Secțiunea: Efecte Atmosferice (cele mai subtile) */
.bg-aurora::before {
    background: linear-gradient(-60deg, var(--profile-glow), var(--profile-accent));
    background-size: 300% 300%;
    opacity: 0.15 !important;
    filter: blur(150px);
    animation: pan-background 40s ease-in-out infinite alternate;
}

.bg-nebula::before {
    background: radial-gradient(ellipse at 40% 30%, var(--profile-glow), transparent 60%), radial-gradient(ellipse at 70% 80%, var(--profile-accent), transparent 70%);
    filter: blur(120px);
    opacity: 0.2 !important;
    animation: pan-background 50s ease-in-out infinite alternate;
}

.bg-flow::before {
    background: radial-gradient(ellipse at 20% 80%, var(--profile-glow), transparent 60%), radial-gradient(ellipse at 80% 20%, var(--profile-accent), transparent 60%);
    filter: blur(120px);
    opacity: 0.15 !important;
    animation: rotate-center 50s ease-in-out infinite alternate;
}

.bg-stars::before {
    background: radial-gradient(1px 1px at 20% 30%, var(--profile-accent), transparent), radial-gradient(1.5px 1.5px at 80% 60%, white, transparent);
    background-size: 800px 800px;
    opacity: 0.5 !important;
    animation: pan-background 300s linear infinite;
}

.bg-pulse::before {
    background: radial-gradient(circle, var(--profile-glow) 0%, transparent 70%);
    opacity: 0.2 !important;
    animation: breath-glow 6s ease-in-out infinite;
    transform-origin: center;
}

/* Secțiunea: Efecte Digitale (animate fin) */
.bg-grid::before {
    background: linear-gradient(var(--profile-accent) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--profile-accent) 1px, transparent 1px) 0 0 / 40px 40px;
    opacity: 0.08 !important;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
    animation: pan-background 40s linear infinite reverse;
}

.bg-scanline-h::before {
    background: repeating-linear-gradient(transparent, transparent 2px, rgba(0, 0, 0, 0.5) 3px, rgba(0, 0, 0, 0.5) 4px);
    opacity: 0.15 !important;
    animation: slow-pan-vertical 10s linear infinite;
}

.bg-hyperspace::before {
    background: repeating-conic-gradient(from 0deg, var(--profile-accent) 0deg 1deg, transparent 1deg 40deg);
    mask-image: radial-gradient(circle at center, black 5%, transparent 70%);
    opacity: 0.15 !important;
    animation: rotate-center 25s linear infinite;
}

.bg-binary::before {
    content: "010101";
    color: var(--profile-accent);
    font-family: monospace;
    line-height: 1.5;
    font-size: 14px;
    text-shadow: 0 0 5px var(--profile-glow);
    word-break: break-all;
    opacity: 0.05 !important;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    animation: slow-pan-vertical 15s linear infinite;
}

/* Secțiunea: Texturi & Modele (animate subtil) */
.bg-hex::before {
    background-color: var(--profile-accent);
    opacity: 0.04 !important;
    mask-image: repeating-linear-gradient(60deg, #0000 0 19px, #000 20px 40px), repeating-linear-gradient(120deg, #0000 0 19px, #000 20px 40px);
    mask-size: 80px 80px;
    animation: pan-background 50s linear infinite reverse;
}

.bg-carbon::before {
    background: linear-gradient(335deg, #000 23px, transparent 23px), linear-gradient(155deg, var(--profile-secondary-bg) 23px, transparent 23px);
    background-size: 58px 58px;
    opacity: 0.2;
    animation: pan-background 60s linear infinite;
}

.bg-stripes-diag::before {
    background: repeating-linear-gradient(-45deg, var(--profile-secondary-bg), var(--profile-secondary-bg) 4px, var(--profile-accent) 4px, var(--profile-accent) 5px);
    opacity: 0.05 !important;
    animation: pan-background 30s linear infinite;
}

.bg-waves::before {
    background: radial-gradient(circle at 0 50%, transparent 10px, var(--profile-accent) 11px, var(--profile-accent) 12px, transparent 13px);
    background-size: 200px 50px;
    opacity: 0.05 !important;
    animation: pan-background 8s linear infinite;
}

/* --- 4. EFECTE DE BORDURĂ ANIMATE (pe ::after) --- */
.profile-v4-container.border-glow::after {
    border: 1px solid var(--profile-accent);
    filter: blur(5px);
    animation: breath-glow 5s ease-in-out infinite alternate;
    opacity: 0.8 !important;
    border-radius: 20px;
}

.profile-v4-container.border-dashed {
    border-style: dashed;
    border-width: 1px;
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes border-gradient-anim {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

.profile-v4-container.border-animated-gradient {
    border-color: transparent;
}

.profile-v4-container.border-animated-gradient::after {
    inset: -1px;
    background: conic-gradient(from var(--angle), var(--profile-glow), var(--profile-accent) 25%, var(--profile-accent) 75%, var(--profile-glow));
    animation: border-gradient-anim 5s linear infinite;
}

.profile-v4-container.border-corners {
    border-color: transparent;
}

.profile-v4-container.border-corners::after {
    background: var(--profile-accent);
    filter: drop-shadow(0 0 5px var(--profile-glow));
    animation: corner-flicker 10s ease-in-out infinite;
}

/* --- 5. SUPRAPUNERI SUBTILE (pe ::after) --- */
.profile-v4-container.overlay-vignette::after {
    background: radial-gradient(ellipse at center, transparent 40%, black 100%);
    opacity: 0.7 !important;
}

.profile-v4-container.overlay-scanlines::after {
    background: repeating-linear-gradient(transparent 0, transparent 3px, rgba(0, 0, 0, 0.4) 4px, rgba(0, 0, 0, 0.4) 5px);
    opacity: 0.1 !important;
    mix-blend-mode: overlay;
    animation: slow-pan-vertical 20s linear infinite;
}

.profile-v4-container.overlay-static::after {
    background: repeating-conic-gradient(rgba(0, 0, 0, 0.2) 0% 25%, transparent 25% 50%) 50% / 2px 2px;
    opacity: 0.08 !important;
}
/* --- Feedback Button on Staff Page --- */
#feedback-button-container {
    text-align: center;
    margin-bottom: 3rem;
    /* Crește spațiul față de lista staff-ului */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
}

.cta-button.feedback-btn {
    background: linear-gradient(45deg, var(--accent-pink), var(--primary-purple));
    box-shadow: 0 0 15px var(--accent-pink), 0 0 30px var(--primary-purple);
    font-size: 1.1rem;
    padding: 1rem 3rem;
}

.cta-button.feedback-btn:hover {
    box-shadow: 0 0 25px var(--accent-pink), 0 0 50px var(--primary-purple);
}


/* --- Feedback Modal --- */
.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 8, 20, 0.85);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.feedback-modal-content {
    background: var(--bg-dark-blue);
    width: 100%;
    max-width: 800px;
    /* MODIFICAT: Mărit de la 600px la 800px */
    max-height: 90vh;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feedback-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feedback-modal-header h2 {
    font-size: 1.5rem;
    margin: 0;
}

.feedback-modal-content .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.feedback-modal-content .modal-body p {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}

.feedback-submit-btn {
    width: 100%;
    margin-top: 1rem;
}

.feedback-success-view {
    text-align: center;
    padding: 2rem 0;
}

.feedback-success-view i {
    font-size: 4rem;
    color: var(--accent-cyan);
    margin-bottom: 1.5rem;
}

.feedback-success-view h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}


/* --- Admin: Feedback Manager Panel --- */
.feedback-admin-section {
    background: var(--staff-card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--staff-card-border);
    margin: 2rem 0;
}

.feedback-admin-section h4 {
    margin-top: 0;
    text-align: left;
    border: none;
    margin-bottom: 1.5rem;
}

.toggle-switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary-purple);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

#feedback-questions-editor .question-editor-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr auto auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.form-checkbox-label.small {
    font-size: 0.8rem;
    margin: 0;
}

.feedback-submission {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* --- Stiluri pentru Întrebarea de tip Scară de Evaluare --- */
.rating-scale-container {
    width: 100%;
    max-width: 800px;
    margin: 1.5rem auto 0 auto;
}

.rating-scale-table {
    width: 100%;
    border-collapse: collapse;
}

.rating-scale-table th,
.rating-scale-table td {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--staff-card-border);
}

.rating-scale-table th {
    color: var(--text-dark);
    font-size: 0.9rem;
}

.rating-scale-table th small {
    display: block;
    font-weight: normal;
}

.rating-scale-table .item-label-cell {
    text-align: left;
    font-weight: 600;
    width: 25%;
}

/* Stil pentru butoanele radio ca puncte */
.rating-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.rating-radio:hover {
    border-color: var(--primary-purple);
}

.rating-radio:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    box-shadow: 0 0 10px var(--glow-color);
}

/* --- Responsive pentru mobil (magia e aici) --- */
@media (max-width: 768px) {

    /* Ascundem tabelul complet */
    .rating-scale-table thead,
    .rating-scale-table tbody {
        display: none;
    }

    /* Afișăm containerul pentru mobil */
    .rating-mobile-stack {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }

    .rating-mobile-item {
        background-color: var(--input-bg);
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid var(--accent-cyan);
    }

    .rating-mobile-item-label {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        display: block;
    }

    .rating-mobile-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rating-mobile-btn {
        flex-grow: 1;
        /* Butoanele ocupă spațiu egal */
        min-width: 35px;
        /* Lățime minimă */
        padding: 8px;
        background: transparent;
        border: 1px solid var(--staff-card-border);
        color: var(--text-dark);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s;
    }

    .rating-mobile-btn:hover {
        border-color: var(--primary-purple);
        color: var(--text-light);
    }

    .rating-mobile-btn.selected {
        background-color: var(--primary-purple);
        color: white;
        border-color: var(--primary-purple);
    }
}
/* --- Stiluri pentru vizualizare răspuns Scară de Evaluare (Panou Staff) --- */
.rating-answer-table {
    width: 100%;
    max-width: 400px;
    margin-top: 0.5rem;
    border-collapse: collapse;
    background-color: var(--staff-card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.rating-answer-table th,
.rating-answer-table td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.rating-answer-table thead {
    background-color: rgba(0, 0, 0, 0.2);
}

.rating-answer-table th {
    font-weight: 600;
    color: var(--text-dark);
}

.rating-answer-table td:last-child {
    text-align: center;
    font-size: 1.1rem;
}

.rating-answer-table tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--staff-card-border);
}
/* --- Stil pentru vizualizarea detaliilor feedback (Modal Admin) --- */

.feedback-modal-overlay .modal-body {
    text-align: left;
}

.feedback-modal-overlay .modal-body h4 {
    color: var(--primary-purple);
    margin: 1rem 0 0.5rem 0;
}

.feedback-modal-overlay .modal-body p {
    margin: 0;
    white-space: pre-wrap;
    color: var(--text-light);
    background: var(--input-bg);
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.feedback-modal-overlay .modal-body hr {
    border: none;
    border-top: 1px solid var(--staff-card-border);
    margin: 1rem 0;
}

.rating-view-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rating-view-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--input-bg);
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.rating-view-list li span {
    color: var(--text-dark);
}

.rating-view-list li strong {
    font-size: 1.1rem;
    color: var(--accent-cyan);
}
/* --- Stiluri pentru Întrebarea de tip Scară de Evaluare --- */
.rating-scale-container {
    width: 100%;
    margin: 1.5rem auto 0 auto;
}

.rating-scale-table-wrapper {
    overflow-x: auto;
    /* Adaugă scroll orizontal pe desktop dacă tabelul e prea lat */
}

.rating-scale-table {
    width: 100%;
    border-collapse: collapse;
}

.rating-scale-table th,
.rating-scale-table td {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--staff-card-border);
    vertical-align: middle;
}

.rating-scale-table th {
    color: var(--text-dark);
    font-size: 0.9rem;
    white-space: nowrap;
}

.rating-scale-table .item-label-cell {
    text-align: left;
    font-weight: 600;
    width: 30%;
    /* Lățime fixă pentru consistență */
    min-width: 150px;
}

/* Stil pentru butoanele radio ca puncte */
.rating-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.rating-radio:hover {
    border-color: var(--primary-purple);
}

.rating-radio:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    box-shadow: 0 0 10px var(--glow-color);
}

.rating-mobile-stack {
    display: none !important;
}

/* --- Responsive pentru mobil --- */
@media (max-width: 768px) {
    .rating-scale-table-wrapper {
        display: none;
    }

    .rating-mobile-stack {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }

    .rating-mobile-item {
        background-color: var(--input-bg);
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid var(--accent-cyan);
    }

    .rating-mobile-item-label {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        display: block;
    }

    .rating-mobile-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rating-mobile-btn {
        flex-grow: 1;
        min-width: 35px;
        padding: 8px;
        background: transparent;
        border: 1px solid var(--staff-card-border);
        color: var(--text-dark);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s;
    }

    .rating-mobile-btn:hover {
        border-color: var(--primary-purple);
        color: var(--text-light);
    }

    .rating-mobile-btn.selected {
        background-color: var(--primary-purple);
        color: white;
        border-color: var(--primary-purple);
    }
}
/* --- STILURI NOI PENTRU FEEDBACK MANAGER ACORDEON --- */

/* Cardul principal pentru fiecare feedback */
.feedback-accordion .item-card-header {
    transition: background-color 0.2s ease;
}

/* Adaugă un indiciu vizual la hover, dar nu face tot header-ul clickabil, pentru a proteja butoanele */
.feedback-accordion .item-card-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Containerul ascuns care va conține detaliile */
.feedback-details-content {
    padding: 1.5rem;
    border-top: 1px solid var(--staff-card-border);
    background-color: rgba(0, 0, 0, 0.2);
    /* Inițial ascuns, va fi afișat de JavaScript */
    display: none;
}

/* Stiluri pentru conținutul din interiorul acordeonului */
.feedback-details-content .answer-group {
    margin-bottom: 1rem;
}

.feedback-details-content h4 {
    color: var(--primary-purple);
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.feedback-details-content p.answer-text {
    white-space: pre-wrap;
    /* Păstrează formatarea textului (ex: noi rânduri) */
    word-wrap: break-word;
    color: var(--text-light);
    background: var(--input-bg);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 0;
}

/* Animația pentru iconița săgeată (chevron) */
.toggle-feedback-details i {
    transition: transform 0.3s ease;
}

.feedback-accordion.expanded .toggle-feedback-details i {
    transform: rotate(180deg);
    /* Rotește săgeata în sus când este deschis */
}
/* --- Stiluri pentru Întrebarea de tip Scară de Evaluare --- */
.rating-scale-container {
    width: 100%;
    margin: 1.5rem auto 0 auto;
}

.rating-scale-table-wrapper {
    overflow-x: auto;
}

.rating-scale-table {
    width: 100%;
    /* Forțează tabelul să ocupe toată lățimea */
    border-collapse: collapse;
    table-layout: fixed;
    /* Asigură că lățimile coloanelor sunt respectate */
}

.rating-scale-table th,
.rating-scale-table td {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--staff-card-border);
    vertical-align: middle;
}

.rating-scale-table th {
    color: var(--text-dark);
    font-size: 0.9rem;
    white-space: nowrap;
    /* Setăm o lățime mică pentru coloanele cu numere, pentru a lăsa spațiu numelui */
    width: 50px;
}

/* Prima coloană (cu numele) va ocupa spațiul rămas */
.rating-scale-table .item-label-cell {
    text-align: left;
    font-weight: 600;
    width: auto;
    /* Permitem acestei coloane să fie flexibilă */
    min-width: 200px;
    /* Asigurăm o lățime minimă pentru lizibilitate */
}

/* Stil pentru butoanele radio ca puncte */
.rating-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.rating-radio:hover {
    border-color: var(--primary-purple);
}

.rating-radio:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    box-shadow: 0 0 10px var(--glow-color);
}

.rating-mobile-stack {
    display: none !important;
}

/* --- Responsive pentru mobil --- */
@media (max-width: 768px) {
    .rating-scale-table-wrapper {
        display: none;
    }

    .rating-mobile-stack {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }

    .rating-mobile-item {
        background-color: var(--input-bg);
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid var(--accent-cyan);
    }

    .rating-mobile-item-label {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        display: block;
    }

    .rating-mobile-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rating-mobile-btn {
        flex-grow: 1;
        min-width: 35px;
        padding: 8px;
        background: transparent;
        border: 1px solid var(--staff-card-border);
        color: var(--text-dark);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s;
    }

    .rating-mobile-btn:hover {
        border-color: var(--primary-purple);
        color: var(--text-light);
    }

    .rating-mobile-btn.selected {
        background-color: var(--primary-purple);
        color: white;
        border-color: var(--primary-purple);
    }
}
/* --- Stiluri pentru Întrebarea de tip Scară de Evaluare --- */
.rating-scale-container {
    width: 100%;
    margin: 1.5rem auto 0 auto;
}

.rating-scale-table-wrapper {
    overflow-x: auto;
}

.rating-scale-table {
    width: 100%;
    /* Forțează tabelul să ocupe toată lățimea */
    border-collapse: collapse;
    table-layout: fixed;
    /* Cheia pentru a avea coloane uniforme */
}

.rating-scale-table th,
.rating-scale-table td {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--staff-card-border);
    vertical-align: middle;
}

/* MODIFICAT: Nu mai setăm o lățime fixă pentru coloanele cu numere */
.rating-scale-table th {
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 600;
    /* Textul numerelor puțin mai bold */
    white-space: nowrap;
}

/* MODIFICAT: Setăm o lățime fixă doar pentru prima coloană (cea cu numele) */
.rating-scale-table .item-label-cell {
    text-align: left;
    font-weight: 600;
    width: 250px;
    /* O lățime fixă și generoasă pentru nume */
    word-wrap: break-word;
    /* Previne textul prea lung să strice layout-ul */
}

/* Stil pentru butoanele radio ca puncte */
.rating-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.rating-radio:hover {
    border-color: var(--primary-purple);
}

.rating-radio:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    box-shadow: 0 0 10px var(--glow-color);
}

.rating-mobile-stack {
    display: none !important;
}

/* --- Responsive pentru mobil (Rămâne neschimbat) --- */
@media (max-width: 768px) {
    .rating-scale-table-wrapper {
        display: none;
    }

    .rating-mobile-stack {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }

    .rating-mobile-item {
        background-color: var(--input-bg);
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid var(--accent-cyan);
    }

    .rating-mobile-item-label {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        display: block;
    }

    .rating-mobile-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rating-mobile-btn {
        flex-grow: 1;
        min-width: 35px;
        padding: 8px;
        background: transparent;
        border: 1px solid var(--staff-card-border);
        color: var(--text-dark);
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s;
    }

    .rating-mobile-btn:hover {
        border-color: var(--primary-purple);
        color: var(--text-light);
    }

    .rating-mobile-btn.selected {
        background-color: var(--primary-purple);
        color: white;
        border-color: var(--primary-purple);
    }
}
/* --- Stiluri pentru ascunderea editorului de întrebări --- */

/* Container pentru titlu și butonul de ascundere */
.feedback-admin-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    /* Păstrează spațiul original de sub titlu */
}

/* Resetăm marginea titlului, deoarece containerul se va ocupa de spațiere */
.feedback-admin-section .section-header h4 {
    margin: 0;
}

/* Stil pentru butonul de ascundere/afișare */
#toggle-questions-editor {
    background: none;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

#toggle-questions-editor:hover {
    background-color: var(--input-bg);
    color: var(--text-light);
}

#toggle-questions-editor i {
    margin-right: 0.5rem;
    transition: transform 0.3s ease-out;
    /* Animație pentru rotația săgeții */
}

/* Clasa 'collapsed' va roti săgeata */
#toggle-questions-editor.collapsed i {
    transform: rotate(-90deg);
}

/* Zona care va fi ascunsă/afișată */
#questions-editor-collapsible-area {
    max-height: 3000px;
    /* O valoare foarte mare, mai mare decât va fi vreodată conținutul */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding-top 0.5s ease-in-out,
        margin-top 0.5s ease-in-out, border-top-width 0.5s ease-in-out;

    /* Adăugăm spațiere și o linie de separare când este vizibil */
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--staff-card-border);
}

/* Când zona este ascunsă (are clasa 'collapsed') */
#questions-editor-collapsible-area.collapsed {
    max-height: 0;
    padding-top: 0;
    margin-top: 0;
    border-top: 1px solid transparent;
    /* Ascundem și bordura */
}
/* --- Stiluri pentru Întrebarea de tip Scară de Evaluare --- */
.rating-scale-table-wrapper {
    overflow-x: auto;
    /* ADAUGAT: Permite scroll orizontal pe desktop dacă tabelul e prea lat */
}
/* --- BLOC FINAL ȘI FUNCȚIONAL PENTRU STILIZAREA OPȚIUNILOR (ÎNLOCUIRE COMPLETĂ) --- */

/* Containerul principal al opțiunilor */
#application-form-container .app-options-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Stilul de bază pentru FIECARE opțiune (label) */
#application-form-container .app-radio-label {
    background-color: transparent;
    border: 1px solid var(--staff-card-border);
    transition: all 0.2s ease-in-out;
    position: relative;
    padding: 0.9rem 1rem 0.9rem 3.25rem;
    cursor: pointer;
    border-radius: 10px;
    text-align: left;
    display: block;
}

#application-form-container .app-radio-label:hover {
    background-color: var(--input-bg);
    border-color: var(--primary-purple);
}

/* Ascundem input-ul original */
.app-radio-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Stil când opțiunea este selectată */
.app-radio-label.checked {
    border-color: var(--accent-cyan);
    background-color: var(--accent-cyan-transparent);
}

.app-radio-label.checked>span:not(.custom-icon) {
    font-weight: 600;
    color: var(--text-light);
}

/* Iconița personalizată (pătrat/cerc) */
.custom-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--staff-card-border);
    background-color: var(--input-bg);
    transition: all 0.2s;
}

/* Corecție pentru alinierea iconiței la opțiunea "Altele" */
.app-radio-label.option-with-other .custom-icon {
    top: 1.1rem;
}

.custom-icon.radio {
    border-radius: 50%;
}

.custom-icon.checkbox {
    border-radius: 6px;
}

.app-radio-label.checked .custom-icon {
    border-color: var(--accent-cyan);
    background-color: var(--accent-cyan);
}


/* REZOLVAREA VIZIBILITĂȚII ȘI ALINIERII PENTRU TEXTBOX */
.other-option-input.form-input {
    /* === MODIFICĂRILE CHEIE SUNT AICI === */
    /* 1. Lățimea este calculată să ocupe 100% din părinte PLUS spațiul de padding orizontal. */
    width: calc(100% + 4.25rem);
    /* 100% + padding-stânga (3.25rem) + padding-dreapta (1rem) */

    /* 2. Mutăm textbox-ul spre stânga cu exact valoarea padding-ului pentru a-l alinia. */
    margin-left: -3.25rem;

    /* 3. Adăugăm padding intern pentru ca textul să nu fie lipit de margini. */
    padding-left: 1rem;
    padding-right: 1rem;
    /* === SFÂRȘITUL MODIFICĂRILOR === */

    box-sizing: border-box;
    background: var(--input-bg) !important;
    border: 1px solid var(--staff-card-border) !important;
    color: var(--text-light) !important;
    font-size: 1rem !important;
    box-shadow: none;
    text-align: left !important;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out, opacity 0.2s ease-out, border-width 0.1s;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    opacity: 0;
    border-width: 0;
    overflow: hidden;
}

/* Când JS face textbox-ul vizibil, acesta va apărea corect aliniat */
.other-option-input.form-input:not(:disabled) {
    max-height: 150px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 0.75rem;
    opacity: 1;
    border-width: 1px;
}

.other-option-input.form-input:focus {
    outline: none;
    border-color: var(--border-color-hover) !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}
/* --- Log Viewer Panel --- */
#panel-dynamic-content h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-light);
}

.logs-controls-wrapper {
    max-width: 1000px;
    margin: 0 auto 2rem auto;
    background: var(--staff-card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--staff-card-border);
}

.log-search-bar {
    position: relative;
    margin-bottom: 1.5rem;
}

.log-search-bar i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#log-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 50px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-light);
    font-size: 1.1rem;
    transition: all 0.3s;
}

#log-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
}

.log-filters-container h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left;
    border-bottom: 0;
    font-size: 1rem;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.log-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--input-bg);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--staff-card-border);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.log-filter-label:hover {
    border-color: var(--filter-color, var(--primary-purple));
    background-color: var(--staff-card-bg);
}

.log-filter-label input[type="checkbox"] {
    display: none;
}

.custom-checkbox-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--staff-card-border);
    color: var(--text-dark);
    transition: all 0.2s;
}

.log-filter-label input:checked+.custom-checkbox-v2 {
    background-color: var(--filter-color, var(--primary-purple));
    border-color: var(--filter-color, var(--primary-purple));
    color: #fff;
    box-shadow: 0 0 10px var(--filter-color, var(--primary-purple));
}

.log-filter-label span {
    font-weight: 600;
}

#logs-output-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.log-entry {
    background: linear-gradient(90deg, rgba(26, 28, 45, 0.8), rgba(22, 21, 43, 0.5));
    border-left: 4px solid var(--action-color, #757575);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: fadeIn 0.5s forwards;
}

.log-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.log-icon {
    font-size: 1.5rem;
    color: var(--action-color, #757575);
}

.log-content {
    flex-grow: 1;
}

.log-main-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 1.1rem;
}

.log-admin {
    font-weight: 700;
    color: var(--text-light);
}

.log-action {
    background-color: var(--action-color, #757575);
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.log-target {
    font-weight: 700;
    color: var(--accent-cyan);
}

.log-details {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-style: italic;
}

.log-timestamp {
    font-size: 0.85rem;
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
}

.no-logs-found {
    text-align: center;
    padding: 3rem;
    color: var(--text-dark);
}

.no-logs-found i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-logs-found.error {
    color: var(--accent-pink);
}

@media (max-width: 768px) {
    .log-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .log-timestamp {
        margin-left: 0;
        width: 100%;
        text-align: left;
        border-top: 1px dashed var(--staff-card-border);
        padding-top: 0.75rem;
        margin-top: 0.5rem;
    }
}
/* --- Stiluri pentru Log Viewer Full-Page --- */
.logs-full-page-wrapper {
    width: 100%;
    max-width: 1200px;
    /* Mărim lățimea maximă pentru vizibilitate mai bună */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Ne asigurăm că pagina nu depășește înălțimea vizibilă */
    height: calc(100vh - 12rem);
    /* 100% din înălțimea ecranului minus padding-ul secțiunii */
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    /* Header-ul nu se micșorează */
}

.logs-header h3 {
    margin: 0;
    font-size: 1.8rem;
}

#back-to-staff-panel {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
}

.logs-controls-wrapper {
    flex-shrink: 0;
    /* Controalele nu se micșorează */
    max-width: none;
    /* Anulăm lățimea maximă anterioară */
}

#logs-output-container {
    /* REGULA CHEIE: Această secțiune va ocupa spațiul rămas și va fi scrollabilă */
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    margin: 0 -1rem;
    /* Extindem containerul pentru a alinia scrollbar-ul la margine */
    border-radius: 8px;
}

/* Stil pentru scrollbar-ul din log-uri */
#logs-output-container::-webkit-scrollbar {
    width: 12px;
}

#logs-output-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#logs-output-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple);
    border-radius: 10px;
    border: 3px solid rgba(0, 0, 0, 0.2);
}
/* --- Stiluri pentru Log Viewer Paginare & Dropdown Filtre --- */

.logs-controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-filters-accordion {
    position: relative;
}

#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

#toggle-filters-btn .chevron-indicator {
    transition: transform 0.3s ease-in-out;
}

#filters-collapsible-area {
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 500px;
    /* Sau o valoare mare */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, opacity 0.2s;
}

#filters-collapsible-area.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-width: 0;
}

.logs-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.logs-per-page-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.logs-per-page-selector select {
    width: 80px;
    font-size: 0.9rem;
    padding: 0.5rem;
}

#logs-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
}

.pagination-btn {
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--staff-card-bg);
    color: var(--text-light);
    border-color: var(--primary-purple);
}

.pagination-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color);
}

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

@media (max-width: 600px) {
    .logs-footer {
        flex-direction: column;
        gap: 1.5rem;
    }
}
/* --- STILURI NOI PENTRU LOG VIEWER (DESIGN COMPACT & TIMELINE) --- */

.logs-full-page-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 12rem);
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.8rem;
}

#back-to-staff-panel {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
}

.logs-controls-wrapper {
    flex-shrink: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-search-bar {
    position: relative;
}

.log-search-bar i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#log-search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 50px; /* Padding redus */
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px; /* Mai puțin rotunjit pentru un look mai serios */
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s;
}

#log-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
}

.log-filters-accordion {
    position: relative;
}

#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem; /* Padding redus */
    background: transparent;
    border: 1px solid var(--border-color);
}

#toggle-filters-btn .chevron-indicator {
    transition: transform 0.3s ease-in-out;
}

#filters-collapsible-area {
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, opacity 0.2s;
}

#filters-collapsible-area.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-width: 0;
}

/* Containerul principal pentru log-uri */
#logs-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px; /* Spațiu pentru scrollbar */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Spațiu FOARTE mic între intrări */
}

/* Intrarea individuală de log - AICI SUNT MODIFICĂRILE CHEIE */
.log-entry {
    background: linear-gradient(90deg, rgba(26, 28, 45, 0.5), rgba(22, 21, 43, 0.2));
    border-left: 3px solid var(--action-color, #757575);
    padding: 0.6rem 1rem; /* Padding vertical redus drastic */
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem; /* Spațiu redus între icon și conținut */
    transition: transform 0.2s, box-shadow 0.2s;
    animation: fadeIn 0.5s forwards;
}

.log-entry:hover {
    background: linear-gradient(90deg, rgba(26, 28, 45, 0.9), rgba(22, 21, 43, 0.6));
    transform: scale(1.01); /* Efect de hover mai subtil */
}

/* Iconița (precum fantoma din imagine) */
.log-icon {
    font-size: 1.4rem; /* Iconiță puțin mai mică */
    color: var(--action-color, #757575);
    opacity: 0.8;
}

.log-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Forțează detaliile să fie sub linia principală */
}

/* Linia principală de informații */
.log-main-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem; /* Font puțin mai mic */
}

.log-admin { font-weight: 700; color: var(--text-light); }
.log-target { font-weight: 700; color: var(--accent-cyan); }

.log-action {
    background-color: rgba(255,255,255,0.1); /* Fundal mai subtil */
    color: var(--text-dark);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    border: 1px solid var(--staff-card-border);
}

/* Detaliile acțiunii */
.log-details {
    margin-top: 3px; /* Spațiu foarte mic */
    font-size: 0.85rem; /* Font mai mic */
    color: var(--text-dark);
    padding-left: 0; /* Aliniat cu textul de sus */
    font-style: italic;
    background: none; /* Fără fundal */
    border-radius: 0;
}

/* Timestamp-ul */
.log-timestamp {
    font-size: 0.8rem; /* Font mai mic */
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
    align-self: center; /* Aliniere pe centru vertical */
}

.no-logs-found {
    text-align: center; padding: 3rem; color: var(--text-dark);
}
.no-logs-found i {
    font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;
}
.no-logs-found.error {
    color: var(--accent-pink);
}

@media (max-width: 768px) {
    .log-entry { flex-wrap: wrap; }
    .log-timestamp { width: 100%; text-align: left; padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px dashed var(--staff-card-border); }
}

/* Footer-ul cu paginare */
.logs-footer {
    flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; margin-top: auto; border-top: 1px solid var(--border-color);
}
.logs-per-page-selector {
    display: flex; align-items: center; gap: 0.75rem; color: var(--text-dark);
}
.logs-per-page-selector select {
    width: 80px; font-size: 0.9rem; padding: 0.5rem; background-color: var(--input-bg); border-color: var(--staff-card-border); color: var(--text-light); border-radius: 6px;
}
#logs-pagination {
    display: flex; align-items: center; gap: 0.5rem; color: var(--text-dark);
}
.pagination-btn {
    background: var(--input-bg); border: 1px solid var(--staff-card-border); color: var(--text-dark); font-weight: 600; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
    background-color: var(--staff-card-bg); color: var(--text-light); border-color: var(--primary-purple);
}
.pagination-btn.active {
    background-color: var(--primary-purple); border-color: var(--primary-purple); color: #fff; box-shadow: 0 0 10px var(--glow-color);
}
.pagination-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
@media (max-width: 600px) {
    .logs-footer { flex-direction: column; gap: 1.5rem; }
}

/* SCROLLBAR STILIZAT PENTRU A SE POTRIVI CU IMAGINEA */
#logs-output-container::-webkit-scrollbar {
    width: 6px; /* Lățime fixă, subțire */
}
#logs-output-container::-webkit-scrollbar-track {
    background: transparent; /* Track-ul este invizibil */
}
#logs-output-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple); /* Culoarea mov din imagine */
    border-radius: 6px; /* Rotunjit complet */
    border: none;
}
#logs-output-container::-webkit-scrollbar-thumb:hover {
    background-color: #a94dff; /* O nuanță mai deschisă la hover */
}
/* --- STILURI PENTRU LOG VIEWER (DESIGN HYPER-COMPACT ȘI EFICIENT) --- */

.logs-full-page-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Folosim o înălțime mai dinamică pentru a maximiza spațiul */
    height: calc(100vh - 15rem); 
    min-height: 500px; /* Înălțime minimă pentru ecrane mici */
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

#back-to-staff-panel {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.logs-controls-wrapper {
    flex-shrink: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Spațiu redus */
    margin-bottom: 1rem; /* Spațiu adăugat sub controale */
}

.log-search-bar { position: relative; }
.log-search-bar i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-dark); }
#log-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 45px; /* Padding vertical redus */
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.95rem;
    transition: all 0.3s;
}
#log-search-input:focus { outline: none; border-color: var(--border-color-hover); box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }

.log-filters-accordion { position: relative; }
#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem; /* Padding redus */
    background: transparent;
    border: 1px solid var(--border-color);
}
#toggle-filters-btn .chevron-indicator { transition: transform 0.3s ease-in-out; }
#filters-collapsible-area {
    background-color: var(--input-bg); border: 1px solid var(--staff-card-border); border-top: none; border-radius: 0 0 10px 10px; padding: 1rem; overflow: hidden; max-height: 500px; transition: all 0.4s ease-in-out;
}
#filters-collapsible-area.collapsed {
    max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-width: 0;
}

/* Containerul principal pentru log-uri - AICI ESTE MAGIA */
#logs-output-container {
    flex-grow: 1; /* Ocupă tot spațiul vertical rămas */
    overflow-y: auto; /* Adaugă scroll DOAR dacă este necesar */
    padding: 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Spațiu minim între intrări */
}

/* Intrarea individuală de log - ULTRA COMPACT */
.log-entry {
    background: rgba(26, 28, 45, 0.4);
    border-left: 3px solid var(--action-color, #757575);
    padding: 6px 12px; /* Padding foarte mic */
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px; /* Spațiu optim între elemente */
    transition: background-color 0.2s;
    flex-shrink: 0; /* Previne micșorarea intrărilor */
}
.log-entry:hover { background: rgba(26, 28, 45, 0.8); }

.log-icon {
    font-size: 1.2rem; /* Iconiță mai mică */
    color: var(--action-color, #757575);
    opacity: 0.7;
}

.log-content { flex-grow: 1; display: flex; flex-direction: column; }

.log-main-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem; /* Font principal mai mic */
}

.log-admin { font-weight: 600; color: var(--text-light); }
.log-target { font-weight: 600; color: var(--accent-cyan); }

.log-action {
    background-color: rgba(255,255,255,0.08);
    color: var(--text-dark);
    font-size: 0.65rem; /* Font foarte mic pentru tag */
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    border: 1px solid var(--staff-card-border);
}

.log-details {
    margin-top: 2px; /* Aproape lipit de linia principală */
    font-size: 0.8rem; /* Font mai mic pentru detalii */
    color: var(--text-dark);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Trunchiază detaliile prea lungi */
}

.log-timestamp {
    font-size: 0.75rem; /* Font foarte mic pentru timp */
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
}

.no-logs-found { text-align: center; padding: 3rem; color: var(--text-dark); }
.no-logs-found i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

/* Footer-ul cu paginare */
.logs-footer {
    flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; margin-top: auto; border-top: 1px solid var(--border-color);
}
.logs-per-page-selector { display: flex; align-items: center; gap: 0.75rem; color: var(--text-dark); }
.logs-per-page-selector select { width: 80px; font-size: 0.9rem; padding: 0.5rem; background-color: var(--input-bg); border-color: var(--staff-card-border); color: var(--text-light); border-radius: 6px; }
#logs-pagination { display: flex; align-items: center; gap: 0.5rem; color: var(--text-dark); }
.pagination-btn { background: var(--input-bg); border: 1px solid var(--staff-card-border); color: var(--text-dark); font-weight: 600; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.pagination-btn:hover:not(:disabled) { background-color: var(--staff-card-bg); color: var(--text-light); border-color: var(--primary-purple); }
.pagination-btn.active { background-color: var(--primary-purple); border-color: var(--primary-purple); color: #fff; box-shadow: 0 0 10px var(--glow-color); }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Scrollbar stilizat */
#logs-output-container::-webkit-scrollbar { width: 6px; }
#logs-output-container::-webkit-scrollbar-track { background: transparent; }
#logs-output-container::-webkit-scrollbar-thumb { background-color: var(--primary-purple); border-radius: 6px; border: none; }
#logs-output-container::-webkit-scrollbar-thumb:hover { background-color: #a94dff; }
/* --- STILURI PENTRU LOG VIEWER (VERSIUNEA FINALĂ, CENTRATĂ ȘI LIZIBILĂ) --- */

/* REGULA CHEIE PENTRU CENTRARE:
   Forțăm secțiunea staff-panel să acționeze ca un container flexbox
   care își centrează perfect copilul (pagina de log-uri).
*/
#staff-panel.page-section.active {
    padding: 2rem; /* Reducem padding-ul pentru a maximiza spațiul util */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logs-full-page-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Înălțimea maximă este 100% din spațiul părintelui (după padding) */
    max-height: 100%; 
    height: 100%; /* Ocupă tot spațiul vertical disponibil */
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 { margin: 0; font-size: 1.6rem; }
#back-to-staff-panel { font-size: 0.9rem; padding: 0.5rem 1rem; }

.logs-controls-wrapper {
    flex-shrink: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.log-search-bar { position: relative; }
.log-search-bar i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-dark); }
#log-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 45px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.95rem;
    transition: all 0.3s;
}
#log-search-input:focus { outline: none; border-color: var(--border-color-hover); box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }

.log-filters-accordion { position: relative; }
#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: transparent;
    border: 1px solid var(--border-color);
}
#toggle-filters-btn .chevron-indicator { transition: transform 0.3s ease-in-out; }
#filters-collapsible-area {
    background-color: var(--input-bg); border: 1px solid var(--staff-card-border); border-top: none; border-radius: 0 0 10px 10px; padding: 1rem; overflow: hidden; max-height: 500px; transition: all 0.4s ease-in-out;
}
#filters-collapsible-area.collapsed {
    max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-width: 0;
}

/* Containerul principal pentru log-uri (scrollabil) */
#logs-output-container {
    flex-grow: 1; /* Ocupă tot spațiul vertical rămas */
    overflow-y: auto;
    padding: 5px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 1px solid var(--staff-card-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Intrarea individuală de log */
.log-entry {
    background: rgba(26, 28, 45, 0.4);
    border-left: 3px solid var(--action-color, #757575);
    padding: 6px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.log-entry:hover { background: rgba(36, 40, 65, 0.6); }

.log-icon { font-size: 1.2rem; color: var(--action-color, #757575); opacity: 0.7; }
.log-content { flex-grow: 1; display: flex; flex-direction: column; }
.log-main-info { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.log-admin { font-weight: 600; color: var(--text-light); }
.log-target { font-weight: 600; color: var(--accent-cyan); }
.log-action {
    background-color: rgba(255,255,255,0.08); color: var(--text-dark); font-size: 0.65rem; font-weight: bold; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; border: 1px solid var(--staff-card-border);
}

/* MODIFICAREA CHEIE PENTRU VIZIBILITATE */
.log-details {
    margin-top: 2px;
    font-size: 0.85rem;
    color: rgba(224, 224, 238, 0.75); /* Culoare mai deschisă, semi-transparentă */
    font-style: normal; /* Am scos italic-ul */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-timestamp { font-size: 0.75rem; color: var(--text-dark); white-space: nowrap; margin-left: auto; align-self: center; }

.no-logs-found { text-align: center; padding: 3rem; color: var(--text-dark); }
.no-logs-found i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

/* Footer-ul cu paginare */
.logs-footer {
    flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; margin-top: auto; border-top: 1px solid var(--border-color);
}
.logs-per-page-selector { display: flex; align-items: center; gap: 0.75rem; color: var(--text-dark); }
.logs-per-page-selector select { width: 80px; font-size: 0.9rem; padding: 0.5rem; background-color: var(--input-bg); border-color: var(--staff-card-border); color: var(--text-light); border-radius: 6px; }
#logs-pagination { display: flex; align-items: center; gap: 0.5rem; color: var(--text-dark); }
.pagination-btn { background: var(--input-bg); border: 1px solid var(--staff-card-border); color: var(--text-dark); font-weight: 600; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.pagination-btn:hover:not(:disabled) { background-color: var(--staff-card-bg); color: var(--text-light); border-color: var(--primary-purple); }
.pagination-btn.active { background-color: var(--primary-purple); border-color: var(--primary-purple); color: #fff; box-shadow: 0 0 10px var(--glow-color); }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Scrollbar stilizat */
#logs-output-container::-webkit-scrollbar { width: 6px; }
#logs-output-container::-webkit-scrollbar-track { background: transparent; }
#logs-output-container::-webkit-scrollbar-thumb { background-color: var(--primary-purple); border-radius: 6px; border: none; }
#logs-output-container::-webkit-scrollbar-thumb:hover { background-color: #a94dff; }
/* --- STILURI PENTRU LOG VIEWER (DESIGN FINAL - PANOURI SIMETRICE) --- */

#staff-panel.page-section.active {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logs-full-page-wrapper {
    width: 100%;
    max-width: 1100px;
    /* Lățime redusă pentru un aspect mai focusat */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    height: 100%;
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

#back-to-staff-panel {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* --- A. SIMETRIE: Container pentru Controale --- */
.logs-controls-wrapper {
    flex-shrink: 0;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    /* Colțuri rotunjite, ca în imagine */
    padding: 1.5rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-search-bar {
    position: relative;
}

.log-search-bar i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#log-search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 45px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s;
}

#log-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.log-filters-accordion {
    position: relative;
}

#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* Aceleași colțuri ca la search bar */
}

#toggle-filters-btn .chevron-indicator {
    transition: transform 0.3s ease-in-out;
}

#filters-collapsible-area {
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 500px;
    transition: all 0.4s ease-in-out;
}

#filters-collapsible-area.collapsed {
    max-height: 0;
    padding: 0;
    opacity: 0;
    border-width: 0;
}

/* --- B. LIZIBILITATE ȘI DESIGN: Panoul și Intrările de Log Rafinate --- */
#logs-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
    /* Padding intern pentru a distanța log-urile de margine */
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    /* Aceleași colțuri ca la panoul de control */
    position: relative;
    /* Pentru timeline */
}

/* Timeline-ul vertical din imagine */
#logs-output-container::before {
    content: '';
    position: absolute;
    right: 20px;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    background-color: rgba(138, 43, 226, 0.2);
    /* Mov transparent */
    border-radius: 4px;
}

/* Fiecare intrare de log */
.log-entry {
    background: transparent;
    /* Stă direct pe fundalul panoului */
    border: none;
    border-bottom: 1px solid rgba(138, 43, 226, 0.1);
    /* Separator foarte subtil */
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.log-icon {
    font-size: 1.3rem;
    color: var(--text-dark);
}

.log-content {
    flex-grow: 1;
}

.log-main-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.log-admin {
    font-weight: 600;
    color: var(--text-light);
}

.log-target {
    font-weight: 600;
    color: var(--accent-cyan);
}

.log-action {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

/* Textul de detalii, acum mult mai vizibil */
.log-details {
    margin-top: 3px;
    font-size: 0.9rem;
    color: rgba(224, 224, 238, 0.8);
    font-style: normal;
}

.log-timestamp {
    font-size: 0.8rem;
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
}

/* Footer-ul cu paginare */
.logs-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0 0 0;
    margin-top: auto;
}

.logs-per-page-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.logs-per-page-selector select {
    width: 80px;
    font-size: 0.9rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-color: var(--staff-card-border);
    color: var(--text-light);
    border-radius: 6px;
}

#logs-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
}

.pagination-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--staff-card-bg);
    color: var(--text-light);
    border-color: var(--primary-purple);
}

.pagination-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color);
}

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

/* Scrollbar stilizat */
#logs-output-container::-webkit-scrollbar {
    width: 8px;
}

#logs-output-container::-webkit-scrollbar-track {
    background: transparent;
}

#logs-output-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple);
    border-radius: 8px;
    border: 2px solid var(--glass-bg);
}

#logs-output-container::-webkit-scrollbar-thumb:hover {
    background-color: #a94dff;
}
/* --- STILURI PENTRU LOG VIEWER (VERSIUNEA FINALĂ - DESIGN SIMETRIC & RAFINAT) --- */

/* 1. CORECȚIA PENTRU SUPRAPUNERE */
#staff-panel.page-section.active {
    padding-top: 8rem;
    /* Asigură spațiu suficient sub meniul principal */
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* Permite containerului să se întindă vertical */
}

/* 2. CONTAINERUL PRINCIPAL */
.logs-full-page-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Spațiul dintre cele două panouri simetrice */
    height: 100%;
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 0;
    /* Marginile sunt acum gestionate de gap */
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

#back-to-staff-panel {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* 3. PANOUL DE CONTROL (SUS) */
.logs-controls-wrapper {
    flex-shrink: 0;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-search-bar {
    position: relative;
}

.log-search-bar i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#log-search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 45px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s;
}

#log-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.log-filters-accordion {
    position: relative;
}

#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

#toggle-filters-btn .chevron-indicator {
    transition: transform 0.3s ease-in-out;
}

#filters-collapsible-area {
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 500px;
    transition: all 0.4s ease-in-out;
}

#filters-collapsible-area.collapsed {
    max-height: 0;
    padding: 0;
    opacity: 0;
    border-width: 0;
}

/* 4. PANOUL DE LOG-URI (JOS) - STILIZAT SIMETRIC */
#logs-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    /* Padding intern pentru a distanța log-urile de margine */
    background: var(--glass-bg);
    /* Același fundal ca la panoul de control */
    border: 1px solid var(--border-color);
    /* Aceeași bordură */
    border-radius: 16px;
    /* Aceleași colțuri rotunjite */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Spațiu mai aerisit între intrări */
}

/* Timeline-ul vertical */
#logs-output-container::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 1rem;
    bottom: 1rem;
    width: 3px;
    background-color: rgba(138, 43, 226, 0.2);
    border-radius: 3px;
}

/* Intrarea de log individuală, acum ca un card propriu */
.log-entry {
    background: rgba(10, 12, 28, 0.5);
    border: 1px solid var(--staff-card-border);
    padding: 0.7rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.log-entry:hover {
    background-color: rgba(36, 40, 65, 0.4);
    border-color: rgba(138, 43, 226, 0.4);
}

/* 5. CORECȚIA PENTRU CULOAREA ICONIȚELOR */
.log-icon {
    font-size: 1.3rem;
    color: var(--action-color, var(--text-dark));
    /* Folosește culoarea dinamică */
    opacity: 0.9;
    text-shadow: 0 0 8px var(--action-color);
}

.log-content {
    flex-grow: 1;
}

.log-main-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.log-admin {
    font-weight: 600;
    color: var(--text-light);
}

.log-target {
    font-weight: 600;
    color: var(--accent-cyan);
}

.log-action {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

.log-details {
    margin-top: 3px;
    font-size: 0.9rem;
    color: rgba(224, 224, 238, 0.8);
    font-style: normal;
}

.log-timestamp {
    font-size: 0.8rem;
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
}

.no-logs-found {
    text-align: center;
    padding: 3rem;
    color: var(--text-dark);
    margin: auto;
}

.no-logs-found i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Footer-ul cu paginare */
.logs-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: auto;
}

.logs-per-page-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.logs-per-page-selector select {
    width: 80px;
    font-size: 0.9rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-color: var(--staff-card-border);
    color: var(--text-light);
    border-radius: 6px;
}

#logs-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
}

.pagination-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--staff-card-bg);
    color: var(--text-light);
    border-color: var(--primary-purple);
}

.pagination-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color);
}

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

/* Scrollbar stilizat */
#logs-output-container::-webkit-scrollbar {
    width: 8px;
}

#logs-output-container::-webkit-scrollbar-track {
    background: transparent;
}

#logs-output-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple);
    border-radius: 8px;
    border: 2px solid var(--glass-bg);
}

#logs-output-container::-webkit-scrollbar-thumb:hover {
    background-color: #a94dff;
}
/* --- STILURI PENTRU LOG VIEWER (DESIGN FINAL - PANOUL UNIFICAT) --- */

#staff-panel.page-section.active {
    padding-top: 8rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* 1. "SUPER-PANOUL" PRINCIPAL - Containerul care unifică totul */
.logs-full-page-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Aici aplicăm stilul de panou principal */
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

#back-to-staff-panel {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* 2. SECȚIUNEA DE CONTROALE (fără fundal sau bordură proprie) */
.logs-controls-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    /* Linia fină de separare */
    border-bottom: 1px solid var(--border-color);
}

.log-search-bar {
    position: relative;
}

.log-search-bar i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#log-search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 45px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s;
}

#log-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.log-filters-accordion {
    position: relative;
}

#toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

#toggle-filters-btn .chevron-indicator {
    transition: transform 0.3s ease-in-out;
}

#filters-collapsible-area {
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 500px;
    transition: all 0.4s ease-in-out;
}

#filters-collapsible-area.collapsed {
    max-height: 0;
    padding: 0;
    opacity: 0;
    border-width: 0;
}

/* 3. SECȚIUNEA DE LOG-URI (fără fundal, doar un container scrollabil) */
#logs-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    /* Spațiu pentru scrollbar */
    margin-right: -10px;
    /* Compensare pentru a alinia conținutul */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Fiecare intrare de log, stilizată ca un card individual */
.log-entry {
    background: rgba(10, 12, 28, 0.6);
    border: 1px solid var(--staff-card-border);
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.log-entry:hover {
    background-color: rgba(36, 40, 65, 0.6);
    border-color: rgba(138, 43, 226, 0.4);
}

.log-icon {
    font-size: 1.4rem;
    color: var(--action-color, var(--text-dark));
    text-shadow: 0 0 8px var(--action-color);
    opacity: 0.9;
}

.log-content {
    flex-grow: 1;
}

.log-main-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.log-admin {
    font-weight: 600;
    color: var(--text-light);
}

.log-target {
    font-weight: 600;
    color: var(--accent-cyan);
}

.log-action {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

.log-details {
    margin-top: 3px;
    font-size: 0.9rem;
    color: rgba(224, 224, 238, 0.8);
    font-style: normal;
}

.log-timestamp {
    font-size: 0.8rem;
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
}

.no-logs-found {
    text-align: center;
    padding: 3rem;
    color: var(--text-dark);
    margin: auto;
}

.no-logs-found i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Footer-ul cu paginare */
.logs-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: auto;
}

.logs-per-page-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
}

.logs-per-page-selector select {
    width: 80px;
    font-size: 0.9rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-color: var(--staff-card-border);
    color: var(--text-light);
    border-radius: 6px;
}

#logs-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
}

.pagination-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--staff-card-bg);
    color: var(--text-light);
    border-color: var(--primary-purple);
}

.pagination-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color);
}

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

/* Scrollbar stilizat */
#logs-output-container::-webkit-scrollbar {
    width: 8px;
}

#logs-output-container::-webkit-scrollbar-track {
    background: transparent;
}

#logs-output-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple);
    border-radius: 8px;
}

#logs-output-container::-webkit-scrollbar-thumb:hover {
    background-color: #a94dff;
}
/* --- Stiluri pentru Butonul Realtime & Animație Log Nou --- */

/* Butonul de toggle */
.realtime-btn {
    margin-left: auto;
    /* Împinge butonul la dreapta */
    background: var(--input-bg);
    border-color: var(--staff-card-border);
    color: var(--text-dark);
}

/* Punctul indicator */
.realtime-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #F44336;
    /* Roșu by default (OFF) */
    margin-right: 0.5rem;
    transition: background-color 0.3s;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(36, 255, 181, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(36, 255, 181, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(36, 255, 181, 0);
    }
}

/* Stilul când butonul este activ */
.realtime-btn.active {
    border-color: #24FFB5;
    color: #24FFB5;
}

.realtime-btn.active .realtime-dot {
    background-color: #24FFB5;
    /* Verde (ON) */
    animation: pulse-dot 2s infinite;
}

/* Animația pentru un log nou adăugat */
@keyframes slide-in-log {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.log-entry.new-log {
    animation: slide-in-log 0.5s ease-out forwards;
    /* Adaugă o bordură temporară pentru a-l evidenția */
    border-left-color: #00FFFF !important;
}
/* --- STILURI PENTRU PLAYER LOGS VIEWER --- */

.violation-entry {
    border-left-color: var(--accent-pink) !important;
    background: linear-gradient(90deg, rgba(255, 51, 161, 0.1), transparent 50%) !important;
}

.violation-icon {
    color: var(--accent-pink) !important;
    text-shadow: 0 0 10px var(--accent-pink);
}

.moderation-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--staff-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.violation-status {
    font-weight: 600;
    font-size: 0.9rem;
}

.violation-status.status-pending {
    color: #ffab40;
}

.violation-status.status-in-progress {
    color: var(--accent-cyan);
}

.violation-status.status-resolved {
    color: #00e676;
}

.moderation-actions {
    display: flex;
    gap: 0.5rem;
}

/* Stil pentru checkbox-ul de filtrare */
#violations-only-filter:checked+.custom-checkbox-v2 {
    background-color: var(--accent-pink);
    border-color: var(--accent-pink);
    color: #fff;
    box-shadow: 0 0 10px var(--accent-pink);
}
/* --- STILURI NOI PENTRU PLAYER LOGS VIEWER --- */

/* Clasa specială adăugată pe #staff-panel când un viewer full-page este activ */
#staff-panel.active-logs-viewer {
    padding-top: 8rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

#staff-panel.active-logs-viewer #staff-panel-menu,
#staff-panel.active-logs-viewer #panel-dynamic-content,
#staff-panel.active-logs-viewer .section-title {
    display: none;
    /* Ascundem meniul și containerul vechi */
}

/* Stil pentru checkbox-ul de filtrare a încălcărilor */
.log-filter-label[style*="--accent-pink"] input:checked+.custom-checkbox-v2 {
    background-color: var(--accent-pink);
    border-color: var(--accent-pink);
    box-shadow: 0 0 10px var(--accent-pink);
}

/* Stilizarea intrărilor care sunt încălcări */
.violation-entry {
    border-left-color: var(--accent-pink) !important;
    background: linear-gradient(90deg, rgba(255, 51, 161, 0.1), transparent 60%) !important;
    border: 1px solid rgba(255, 51, 161, 0.2);
}

.violation-icon {
    color: var(--accent-pink) !important;
    text-shadow: 0 0 10px var(--accent-pink);
}

/* Panoul de moderare pentru încălcări */
.moderation-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--staff-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.violation-status {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 5px;
}

.violation-status.status-pending {
    color: #ffab40;
    background-color: rgba(255, 171, 64, 0.1);
}

.violation-status.status-in-progress {
    color: var(--accent-cyan);
    background-color: rgba(0, 255, 255, 0.1);
}

.violation-status.status-resolved {
    color: #00e676;
    background-color: rgba(0, 230, 118, 0.1);
}

.moderation-actions {
    display: flex;
    gap: 0.5rem;
}

.moderation-actions .small-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* --- STILURI PENTRU PLAYER LOGS VIEWER (DESIGN NOU) --- */

#staff-panel.active-logs-viewer {
    padding-top: 8rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

#staff-panel.active-logs-viewer #staff-panel-menu,
#staff-panel.active-logs-viewer #panel-dynamic-content,
#staff-panel.active-logs-viewer .section-title {
    display: none;
}

.logs-full-page-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

#back-to-staff-panel {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.logs-controls-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

#logs-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -10px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.log-entry {
    background: rgba(10, 12, 28, 0.6);
    border: 1px solid var(--staff-card-border);
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.log-entry:hover {
    background-color: rgba(36, 40, 65, 0.6);
    border-color: rgba(138, 43, 226, 0.4);
}

.violation-entry {
    border-color: rgba(255, 51, 161, 0.3) !important;
    background: linear-gradient(90deg, rgba(255, 51, 161, 0.1), transparent 70%);
}

.violation-icon {
    color: var(--accent-pink) !important;
    text-shadow: 0 0 10px var(--accent-pink);
}

.moderation-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--staff-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.violation-status {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 5px;
}

.violation-status.status-pending {
    color: #ffab40;
    background-color: rgba(255, 171, 64, 0.1);
}

.violation-status.status-in-progress {
    color: var(--accent-cyan);
    background-color: rgba(0, 255, 255, 0.1);
}

.violation-status.status-resolved {
    color: #00e676;
    background-color: rgba(0, 230, 118, 0.1);
}

.moderation-actions {
    display: flex;
    gap: 0.5rem;
}

.moderation-actions .small-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.log-icon {
    font-size: 1.4rem;
    color: var(--action-color, var(--text-dark));
    text-shadow: 0 0 8px var(--action-color);
    opacity: 0.9;
}
/* --- STILURI UNIFICATE PENTRU LOGS VIEWER (PLAYER & STAFF) --- */

/* Face containerul principal să ocupe tot spațiul când un viewer e activ */
#staff-panel.active-logs-viewer {
    padding-top: 8rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

#staff-panel.active-logs-viewer #staff-panel-menu,
#staff-panel.active-logs-viewer #panel-dynamic-content,
#staff-panel.active-logs-viewer .section-title {
    display: none;
    /* Ascunde meniul și conținutul vechi */
}

/* Containerul principal al paginii de log-uri */
.logs-full-page-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
}

.logs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.logs-header h3 {
    margin: 0;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

#back-to-staff-panel {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Secțiunea de controale (search, filters) */
.logs-controls-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.log-search-bar {
    position: relative;
}

.log-search-bar i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

/* Ambele input-uri de search vor folosi acest stil */
#log-search-input,
#player-log-search-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 45px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s;
}

#log-search-input:focus,
#player-log-search-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.log-filters-accordion #toggle-filters-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

#toggle-filters-btn .chevron-indicator {
    transition: transform 0.3s ease-in-out;
}

#filters-collapsible-area {
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.5rem;
    overflow: hidden;
    max-height: 500px;
    transition: all 0.4s ease-in-out;
}

#filters-collapsible-area.collapsed {
    max-height: 0;
    padding: 0 1.5rem;
    opacity: 0;
    border-width: 0;
}

/* Containerul unde apar log-urile */
#logs-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -10px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Stilul pentru fiecare intrare de log */
.log-entry {
    background: rgba(10, 12, 28, 0.6);
    border: 1px solid var(--staff-card-border);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    border-left: 3px solid var(--action-color, transparent);
}

.log-entry:hover {
    background-color: rgba(36, 40, 65, 0.6);
    border-color: rgba(138, 43, 226, 0.4);
}

.log-icon {
    font-size: 1.5rem;
    color: var(--action-color, var(--text-dark));
    text-shadow: 0 0 8px var(--action-color);
    opacity: 0.9;
    width: 25px;
    /* Aliniere */
    text-align: center;
}

.log-content {
    flex-grow: 1;
}

.log-main-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    /* Pentru ecrane mici */
    font-size: 0.95rem;
}

.log-target {
    font-weight: 700;
    color: var(--accent-cyan);
}

.log-action {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.log-details {
    margin-top: 4px;
    font-size: 0.9rem;
    color: rgba(224, 224, 238, 0.8);
}

.log-timestamp {
    font-size: 0.8rem;
    color: var(--text-dark);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 1rem;
}

/* Footer cu paginare și selecție */
.logs-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.5rem;
    margin-top: auto;
}

.logs-per-page-selector label {
    color: var(--text-dark);
    font-size: 0.9rem;
}

#player-logs-pagination,
#logs-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
}

.pagination-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--staff-card-bg);
    color: var(--text-light);
    border-color: var(--primary-purple);
}

.pagination-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color);
}

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

/* --- STILURI SPECIFICE PENTRU ÎNCĂLCĂRI (PLAYER LOGS) --- */
.violation-entry {
    border-left-color: var(--accent-pink) !important;
    border-color: rgba(255, 51, 161, 0.3) !important;
    background: linear-gradient(90deg, rgba(255, 51, 161, 0.1), transparent 70%);
}

.violation-icon {
    color: var(--accent-pink) !important;
    text-shadow: 0 0 10px var(--accent-pink);
}

.moderation-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--staff-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.violation-status {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 5px;
}

.violation-status.status-pending {
    color: #ffab40;
    background-color: rgba(255, 171, 64, 0.1);
}

.violation-status.status-in-progress {
    color: var(--accent-cyan);
    background-color: rgba(0, 255, 255, 0.1);
}

.violation-status.status-resolved {
    color: #00e676;
    background-color: rgba(0, 230, 118, 0.1);
}

.moderation-actions {
    display: flex;
    gap: 0.5rem;
}

.moderation-actions .small-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


/* --- BUTON REALTIME & ANIMAȚII --- */
.realtime-btn {
    margin-left: auto;
    background: var(--input-bg);
    border-color: var(--staff-card-border);
    color: var(--text-dark);
}

.realtime-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #F44336;
    margin-right: 0.5rem;
    transition: background-color 0.3s;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(36, 255, 181, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(36, 255, 181, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(36, 255, 181, 0);
    }
}

.realtime-btn.active {
    border-color: #24FFB5;
    color: #24FFB5;
}

.realtime-btn.active .realtime-dot {
    background-color: #24FFB5;
    animation: pulse-dot 2s infinite;
}

@keyframes slide-in-log {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.log-entry.new-log {
    animation: slide-in-log 0.5s ease-out forwards;
    border-left-color: #00FFFF !important;
}

/* Scrollbar stilizat */
#logs-output-container::-webkit-scrollbar {
    width: 8px;
}

#logs-output-container::-webkit-scrollbar-track {
    background: transparent;
}

#logs-output-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-purple);
    border-radius: 8px;
}

#logs-output-container::-webkit-scrollbar-thumb:hover {
    background-color: #a94dff;
}
.false-positive-btn {
    background: none;
    border-color: #607D8B;
    /* Gri neutru */
    color: #CFD8DC;
}

.false-positive-btn:hover {
    background: #607D8B;
    color: white;
}

/* Stil pentru statusul "Fals Pozitiv" */
.violation-status.status-false_positive {
    color: #90A4AE;
    /* Gri deschis */
    background-color: rgba(144, 164, 174, 0.1);
}
/* --- STILURI PENTRU NOUA FEREASTRĂ MODALĂ DE CONTEXT --- */

#context-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 12, 28, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade-in 0.3s ease-out;
}

#context-modal-overlay.fade-out {
    animation: fade-out 0.3s ease-in forwards;
}

#context-modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: scale-up 0.3s ease-out;
}

#context-modal-overlay.fade-out #context-modal-content {
    animation: scale-down 0.3s ease-in forwards;
}

.context-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.context-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.close-button {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

.close-button:hover {
    color: var(--text-light);
}

.context-modal-info {
    padding: 1rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.context-modal-info .info-item span:first-child {
    color: var(--text-dark);
}

.player-tag-p1 {
    color: var(--accent-cyan);
    font-weight: bold;
}

.player-tag-p2 {
    color: var(--accent-pink);
    font-weight: bold;
}

.context-modal-timeline {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.context-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    border-left: 3px solid;
}

.context-log-p1 {
    border-left-color: var(--accent-cyan);
}

.context-log-p2 {
    border-left-color: var(--accent-pink);
}

.context-log-p1 .context-log-player {
    color: var(--accent-cyan);
}

.context-log-p2 .context-log-player {
    color: var(--accent-pink);
}

.context-log-incident {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--primary-purple);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
}

.context-log-time {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.context-log-content {
    flex: 1;
}

.context-log-player {
    font-weight: bold;
    margin-right: 0.5em;
}

.context-log-details {
    font-size: 0.9rem;
    color: var(--text-light-hover);
}

.context-log-details strong {
    color: var(--accent-pink);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.context-incident-tag {
    background-color: var(--primary-purple);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 5px;
    align-self: center;
}

/* Stil pentru butonul de context */
.context-view-btn {
    background: none;
    border-color: #00BCD4;
    /* Cyan */
    color: #80DEEA;
}

.context-view-btn:hover {
    background: #00BCD4;
    color: white;
}

/* Animații */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes scale-up {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-down {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.95);
        opacity: 0;
    }
}
/* Stiluri pentru eticheta de severitate */
.severity-tag {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 10px;
    color: #fff;
    text-transform: capitalize;
    vertical-align: middle;
    line-height: 1;
}

.log-main-info .severity-tag {
    display: inline-block;
}

.severity-scăzută {
    background-color: #3498db;
}

.severity-medie {
    background-color: #f1c40f;
    /* Galben */
    color: #333;
}

.severity-mare {
    background-color: #e74c3c;
}
.context-modal-info .info-item .severity-tag {
    margin-left: 5px;
}
/* --- Stiluri pentru filtrarea după interval orar --- */

.time-filter-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: rgba(10, 12, 28, 0.5);
    /* Un fundal subtil */
    border-radius: 10px;
    border: 1px solid var(--staff-card-border);
    flex-wrap: wrap;
    /* Permite trecerea pe rândul următor pe ecrane mici */
}

.time-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 1;
    /* Permite grupurilor să ocupe spațiu egal */
}

.time-input-group label {
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

.time-input {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    min-width: 180px;
    /* Asigură suficient spațiu */
    color-scheme: dark;
    /* Îmbunătățește aspectul picker-ului în teme întunecate */
}

.time-input:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.15);
}

/* Stil pentru butonul de resetare/ștergere */
.time-filter-container .clear-btn {
    background: transparent;
    border-color: #607D8B;
    /* Gri neutru */
    color: #CFD8DC;
    padding: 0.6rem 0.8rem;
    /* Ajustare padding pentru a se potrivi cu iconița */
}

.time-filter-container .clear-btn:hover {
    background: #c93c3c;
    border-color: #c93c3c;
    color: white;
}
/* /style.css - Adaugă la finalul fișierului */

/* Stil pentru overlay-ul de reîncărcare de securitate */
#security-reload-overlay {
    position: fixed;
    inset: 0;
    /* O metodă modernă pentru top:0, left:0, right:0, bottom:0 */
    width: 100%;
    height: 100%;
    background-color: rgba(10, 0, 20, 0.85);
    backdrop-filter: blur(5px);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    z-index: 99999;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

#security-reload-overlay div {
    padding: 1.5rem 2rem;
    background: var(--staff-card-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
/* Stil pentru butonul de afișare a jucătorilor */
.view-players-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.view-players-btn:hover {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
}

.view-players-btn i {
    margin-right: 5px;
}

/* Stiluri pentru modalul cu lista de jucători */
#player-list-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 12, 28, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1050; /* Mai mare decât alte elemente */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fade-in 0.3s ease-out;
}

#player-list-modal-overlay.fade-out {
    animation: fade-out 0.3s ease-in forwards;
}

.player-list-modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: scale-up 0.3s ease-out;
}

#player-list-modal-overlay.fade-out .player-list-modal-content {
    animation: scale-down 0.3s ease-in forwards;
}

.player-list-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.player-list-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.player-list-modal-info {
    padding: 0.75rem 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    color: var(--text-dark);
}

.player-list-modal-ul {
    list-style: none;
    padding: 1rem 1.5rem;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}

.player-list-modal-ul li {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--staff-card-border);
    transition: background-color 0.2s;
}

.player-list-modal-ul li:last-child {
    border-bottom: none;
}

.player-list-modal-ul li:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Folosim animațiile deja definite, dacă nu există, adaugă-le */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes scale-up { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes scale-down { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; } }
/* --- STILURI PENTRU NOUA SECȚIUNE WIKI --- */

.wiki-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.wiki-header {
    text-align: center;
    margin-bottom: 3rem;
}

.wiki-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.wiki-header p {
    font-size: 1.2rem;
    color: var(--text-dark);
    max-width: 700px;
    margin: 0 auto;
}

.wiki-controls {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wiki-controls .search-bar {
    position: relative;
}

.wiki-controls .search-bar i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

#plugin-search {
    width: 100%;
    padding: 1rem 1rem 1rem 50px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-light);
    font-size: 1.1rem;
    transition: all 0.3s;
}

#plugin-search:focus {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
}

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--primary-purple);
    color: var(--text-light);
}

.filter-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: white;
    box-shadow: 0 0 15px var(--glow-color);
}

.wiki-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.wiki-card {
    background: var(--staff-card-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wiki-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.plugin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--staff-card-border);
    padding-bottom: 1rem;
}

.plugin-header h2 {
    font-size: 1.4rem;
    color: var(--text-light);
    margin: 0;
}

.plugin-category {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 15px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.plugin-description {
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1;
}

.admin-feature {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--staff-card-border);
}

.admin-feature code {
    background: var(--input-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    color: var(--accent-pink);
}

.admin-feature p {
    font-size: 0.9rem;
    color: var(--text-dark);
}

.admin-tag {
    color: var(--accent-pink);
    font-weight: 700;
    margin-right: 0.5rem;
}

.category-gameplay { background-color: rgba(0, 255, 255, 0.1); color: var(--accent-cyan); }
.category-evenimente { background-color: rgba(138, 43, 226, 0.15); color: var(--primary-purple); }
.category-utilitare { background-color: rgba(255, 215, 0, 0.1); color: #FFD700; }
.category-admin { background-color: rgba(255, 51, 161, 0.1); color: var(--accent-pink); }

@media (max-width: 768px) {
    .wiki-header h1 { font-size: 2.5rem; }
    .wiki-controls { flex-direction: column; }
    .wiki-grid { grid-template-columns: 1fr; }
}
/* --- Stiluri pentru Căutare Multiplă (Tag Input) --- */

.multi-search-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permite tag-urilor să treacă pe rândul următor */
    gap: 8px; /* Spațiu între tag-uri și input */
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 45px; /* Padding ajustat pentru iconiță */
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px; /* Mai puțin rotunjit pentru un aspect mai profesional */
    color: var(--text-light);
    font-size: 1rem;
    transition: all 0.3s;
    position: relative; /* Necesar pentru iconița de search */
    box-sizing: border-box;
}

.multi-search-container:focus-within {
    outline: none;
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.multi-search-container > i.fa-search {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
    font-size: 1rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-purple);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.tag-remove-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.tag-remove-btn:hover {
    opacity: 1;
}

.multi-search-input {
    flex-grow: 1; /* Ocupă spațiul rămas */
    min-width: 200px; /* Lățime minimă pentru a fi utilizabil */
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-light);
    font-size: 1rem;
    font-family: var(--font-family);
    padding: 5px 0; /* Padding vertical pentru aliniere */
}
/* --- DESIGN NOU PENTRU CONTROALELE DE CĂUTARE (PLAYER LOGS) --- */

/* 1. Containerul principal pentru TOATE controalele de căutare */
.search-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Spațiu între rândul de căutare și cel de dată */
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem; /* Spațiu față de acordeonul de filtre */
}

/* 2. Container-părinte pentru alinierea barei de căutare și a comutatorului */
.search-and-mode-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Spațiu între search bar și switch */
    flex-wrap: wrap; /* Permite trecerea pe rândul următor pe ecrane mici */
}

/* 3. Bara de căutare multiplă (rafinată) */
.multi-search-container {
    flex-grow: 1; /* Ocupă spațiul disponibil */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: auto; /* Lățime automată în context flex */
    padding: 8px 15px 8px 45px;
    background: rgba(10, 12, 28, 0.7); /* Fundal puțin mai închis */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.3s;
    position: relative;
    cursor: text;
}

.multi-search-container:focus-within {
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.multi-search-container > i.fa-search {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
}

.tag-list {
    display: contents;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-purple);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    animation: fadeIn 0.3s ease;
}

.tag-remove-btn {
    background: none; border: none; color: white; cursor: pointer;
    font-size: 1.2rem; font-weight: bold; line-height: 1;
    opacity: 0.7; transition: all 0.2s; padding: 0;
}
.tag-remove-btn:hover { opacity: 1; transform: scale(1.1); }

.multi-search-input {
    flex-grow: 1; min-width: 200px; background: transparent;
    border: none; outline: none; color: var(--text-light);
    font-size: 1rem; font-family: var(--font-family); padding: 5px 0;
}
.multi-search-input::placeholder { color: var(--text-dark); opacity: 0.8; }


/* 4. Comutatorul de mod (integrat și elegant) */
.search-mode-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* Nu se micșorează */
}

.search-mode-switch label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-dark);
    cursor: pointer;
    white-space: nowrap; /* Previne ruperea textului */
}

/* Stil pentru textul activ (TOȚI / ORICARE) */
.search-mode-switch label strong {
    color: var(--text-light);
    font-weight: 600;
}

.search-mode-switch .toggle-switch {
    position: relative; display: inline-block; width: 50px; height: 28px;
}
.search-mode-switch .toggle-switch input { opacity: 0; width: 0; height: 0; }
.search-mode-switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--staff-card-bg);
    border: 1px solid var(--staff-card-border);
    transition: .4s; border-radius: 28px;
}
.search-mode-switch .slider:before {
    position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px;
    background-color: var(--text-dark); transition: .4s; border-radius: 50%;
}
.search-mode-switch input:checked + .slider {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    box-shadow: 0 0 10px var(--glow-color);
}
.search-mode-switch input:checked + .slider:before {
    background-color: white;
    transform: translateX(22px);
}
/* --- DESIGN FINAL PENTRU PANOUL DE CONTROL (PLAYER LOGS) --- */

/* 1. Containerul principal care unifică totul */
.logs-controls-wrapper {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Spațiu între rânduri */
    margin-bottom: 1rem;
}

/* 2. Bara de căutare multiplă */
.multi-search-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 15px 12px 45px; /* Padding generos */
    background: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    transition: all 0.3s;
    position: relative;
    cursor: text;
}
.multi-search-container:focus-within {
    border-color: var(--border-color-hover);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}
.multi-search-container > i.fa-search {
    position: absolute; left: 18px; top: 50%;
    transform: translateY(-50%); color: var(--text-dark);
}
.tag-list { display: contents; }
.tag-item {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-purple); color: white;
    padding: 6px 12px; border-radius: 8px; font-weight: 500;
    font-size: 0.9rem; animation: fadeIn 0.3s ease;
}
.tag-remove-btn {
    background: none; border: none; color: white; cursor: pointer;
    font-size: 1.2rem; line-height: 1; opacity: 0.7;
    transition: all 0.2s; padding: 0;
}
.tag-remove-btn:hover { opacity: 1; transform: scale(1.1); }
.multi-search-input {
    flex-grow: 1; min-width: 200px; background: transparent;
    border: none; outline: none; color: var(--text-light);
    font-size: 1rem; font-family: var(--font-family); padding: 5px 0;
}
.multi-search-input::placeholder { color: var(--text-dark); opacity: 0.8; }

/* 3. Comutatorul de mod (AND/OR) */
.search-mode-switch {
    display: flex;
    align-items: center;
    gap: 12px;
}
.search-mode-switch label {
    font-size: 0.95rem; color: var(--text-dark); cursor: pointer;
}
.search-mode-switch label strong { color: var(--text-light); font-weight: 600; }
.search-mode-switch .toggle-switch {
    position: relative; display: inline-block; width: 44px; height: 24px;
}
.search-mode-switch .toggle-switch input { opacity: 0; width: 0; height: 0; }
.search-mode-switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #373c50; transition: .4s; border-radius: 24px;
}
.search-mode-switch .slider:before {
    position: absolute; content: ""; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background-color: white;
    transition: .4s; border-radius: 50%;
}
.search-mode-switch input:checked + .slider {
    background-color: var(--primary-purple);
}
.search-mode-switch input:checked + .slider:before { transform: translateX(20px); }

/* 4. Containerul pentru filtrele de dată */
.time-filter-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--staff-card-border);
    border-radius: 12px;
    flex-wrap: wrap;
}
.time-input-group {
    display: flex; align-items: center; gap: 0.75rem; flex-grow: 1;
}
.time-input-group label { font-size: 0.9rem; color: var(--text-dark); }
.time-input {
    background-color: transparent; border: none; color: var(--text-light);
    border-radius: 8px; padding: 0.5rem 0.75rem; font-family: inherit;
    font-size: 1rem; flex-grow: 1; color-scheme: dark;
}
.time-input:focus { outline: none; }
.time-filter-container .action-button {
    width: 40px; height: 40px; padding: 0;
    font-size: 1rem; flex-shrink: 0;
}

/* 5. Butonul pentru filtrele de evenimente */
.log-filters-accordion #toggle-filters-btn {
    width: 100%; display: flex; justify-content: center; align-items: center;
    gap: 0.75rem; padding: 0.8rem; background: transparent;
    border: 1px solid var(--border-color); border-radius: 12px;
    color: var(--primary-purple);
}
#toggle-filters-btn .chevron-indicator { transition: transform 0.3s ease-in-out; }
/* /style.css - Adaugă la finalul fișierului */

/* --- STILURI PENTRU FEREASTRA MODALĂ DE AUTENTIFICARE EXPIRATĂ --- */

/* Animații pentru apariția ferestrei */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUpModal {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Containerul principal care acoperă tot ecranul (overlay) */
#auth-modal-overlay {
    position: fixed;
    inset: 0; /* O metodă modernă pentru top:0, left:0, right:0, bottom:0 */
    width: 100%;
    height: 100%;
    background-color: rgba(6, 8, 20, 0.85);
    backdrop-filter: blur(10px); /* Efect de sticlă mată */
    z-index: 99999; /* Asigură că este deasupra oricărui alt element */
    
    /* Cheia pentru centrare: */
    display: flex;
    justify-content: center; /* Centrează pe orizontală */
    align-items: center; /* Centrează pe verticală */

    padding: 1rem;
    box-sizing: border-box;
    animation: fadeInModal 0.3s ease-out forwards;
}

/* Fereastra cu conținutul propriu-zis, care stă în centrul overlay-ului */
#auth-modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 500px; /* Lățimea maximă a ferestrei */
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: scaleUpModal 0.4s ease-out forwards;
}

/* Stiluri pentru iconiță, text și buton */
.auth-modal-icon {
    font-size: 4rem;
    color: var(--primary-purple);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px var(--glow-color);
}

#auth-modal-content h2 {
    font-size: 1.8rem;
    color: var(--text-light);
    margin-top: 0;
    margin-bottom: 1rem;
}

#auth-modal-content p {
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

#reauth-button {
    width: 100%;
    font-size: 1.1rem;
}
/* Adaugă sau modifică în style.css */

/* Container pentru opțiunile de sub parolă */
.login-options {
    display: flex;
    justify-content: flex-start; /* Aliniază elementul la stânga */
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

/* Stil pentru checkbox-ul "Ține-mă minte" */
.remember-me-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-dark);
    user-select: none;
}

/* Ascundem checkbox-ul default */
.remember-me-label input[type="checkbox"] {
    display: none;
}

/* Creăm un checkbox personalizat */
.custom-checkbox {
    width: 20px;
    height: 20px;
    background: var(--input-bg);
    border: 2px solid var(--staff-card-border);
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    transition: all 0.2s;
    position: relative;
}

/* Stil pentru bifa din interior */
.custom-checkbox::after {
    content: '\f00c'; /* Iconița de check de la Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 12px;
    transition: transform 0.2s ease-in-out;
}

/* Când checkbox-ul este bifat */
.remember-me-label input:checked + .custom-checkbox {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

.remember-me-label input:checked + .custom-checkbox::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Îmbunătățire pentru butonul de login */
.login-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.login-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
}
/* --- ADAUGĂ SAU ÎNLOCUIEȘTE ACESTE STILURI LA FINALUL FIȘIERULUI style.css --- */

/* Container pentru linia de status și ID, pentru aliniere corectă */
.profile-v4-status-line {
    display: flex;
    align-items: center;
    gap: 1rem; /* Spațiu între status (Online/Offline) și tag-ul de ID */
    flex-wrap: wrap; /* Permite trecerea pe rândul următor pe ecrane mici */
    margin-top: 0.5rem;
}

/* Stilul pentru eticheta (tag-ul) cu rangul jucătorului */
.profile-id-tag {
    font-size: 0.85rem;
    font-weight: 600; /* Text mai bold */
    color: var(--text-light); /* Text mai deschis */
    background: linear-gradient(45deg, rgba(138, 43, 226, 0.2), rgba(0, 255, 255, 0.1)); /* Gradient subtil */
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(138, 43, 226, 0.5); /* Bordură mov */
    display: inline-flex;
    align-items: center;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Umbră pentru lizibilitate */
}

/* Stil pentru iconița din interiorul tag-ului */
.profile-id-tag i {
    margin-right: 0.5rem;
    color: var(--accent-cyan); /* Culoare cyan pentru a se potrivi cu gradientul */
}
/* --- Stiluri pentru Controalele Paginii de Jucători --- */
.player-controls-container {
    width: 100%;
    max-width: 1100px; /* Se aliniază cu containerul principal */
    margin: 0 auto 3rem auto;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.player-sort-options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.player-sort-options .sort-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-right: 1rem;
    flex-shrink: 0;
}

.sort-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sort-btn:hover {
    border-color: var(--primary-purple);
    color: var(--text-light);
    transform: translateY(-2px);
}

.sort-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: white;
    box-shadow: 0 0 15px var(--glow-color);
    transform: translateY(-2px);
}

.player-search-wrapper {
    margin: 0; /* Resetăm marginea, deoarece este acum în interiorul noului container */
    max-width: 100%; /* Ocupă lățimea containerului părinte */
}
#player-viewer-container {
    display: grid;
    /* 3 coloane pe ecrane mari (desktop) */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Pe ecrane medii (tablete), trecem la 2 coloane */
@media (max-width: 992px) {
    #player-viewer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pe ecrane mici (telefoane), trecem la o singură coloană */
@media (max-width: 600px) {
    #player-viewer-container {
        grid-template-columns: 1fr;
    }
}
/* Stil pentru afișarea UID-ului pe cardul de jucător */
.player-card-uid {
    flex-shrink: 0;
    margin-left: 1rem;
    font-weight: 700;
    color: var(--primary-purple);
    font-size: 1.6rem;
}
/* Adaugă acest stil nou în style.css */

.status-badge.status-viewed {
    color: #00bcd4; /* Cyan */
    background-color: rgba(0, 188, 212, 0.1);
}
/* --- Stiluri pentru Controalele Paginii de Jucători & Paginare --- */
.player-controls-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 3rem auto;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.player-sort-options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.player-sort-options .sort-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-right: 1rem;
    flex-shrink: 0;
}

.sort-btn {
    background: transparent;
    border: 1px solid var(--staff-card-border);
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sort-btn:hover {
    border-color: var(--primary-purple);
    color: var(--text-light);
    transform: translateY(-2px);
}

.sort-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: white;
    box-shadow: 0 0 15px var(--glow-color);
    transform: translateY(-2px);
}

#player-viewer-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Stil pentru afișarea UID-ului pe cardul de jucător */
.player-card-uid {
    flex-shrink: 0;
    margin-left: 1rem;
    font-weight: 700;
    color: var(--primary-purple);
    font-size: 1.6rem;
}


/* --- Stiluri pentru Paginare --- */
.player-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    padding: 1rem;
    background: var(--glass-bg);
    border-radius: 50px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pagination-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dark);
    font-weight: 700;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--accent-cyan-transparent);
    color: var(--accent-cyan);
    transform: scale(1.1);
}

.pagination-btn.active {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: #fff;
    box-shadow: 0 0 15px var(--glow-color);
    transform: scale(1.1);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-separator {
    color: var(--text-dark);
    font-weight: bold;
    padding: 0 0.5rem;
}
/* --- STILURI PENTRU GRILA DE JUCĂTORI (RESTAURARE LAYOUT) --- */
#player-viewer-container {
    display: grid;
    /* 3 coloane pe ecrane mari (desktop) */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Pe ecrane medii (tablete), trecem la 2 coloane */
@media (max-width: 992px) {
    #player-viewer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pe ecrane mici (telefoane), trecem la o singură coloană */
@media (max-width: 600px) {
    #player-viewer-container {
        grid-template-columns: 1fr;
    }
}

/* Stil distinct pentru RANK (#1, #2 etc.) */
.player-card-rank {
    flex-shrink: 0;
    margin-left: 1rem;
    font-weight: 700;
    color: var(--accent-cyan); /* Culoare diferită pentru a le distinge */
    font-size: 1.6rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Stil distinct pentru UID (UID #123) */
.player-card-uid {
    flex-shrink: 0;
    margin-left: 1rem;
    font-weight: 700;
    color: var(--primary-purple); /* Păstrăm mov pentru UID */
    font-size: 1.6rem;
}
/* --- DESIGN FINAL PENTRU PAGINA DE JUCĂTORI (CONFORM IMAGINII) --- */

/* Grila principală pentru carduri */
#player-viewer-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    #player-viewer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    #player-viewer-container {
        grid-template-columns: 1fr;
    }
}

/* Stilul cardului principal */
.player-stat-card {
    background: #1A192D; /* Fundalul mov închis */
    border: 1px solid #2c2f48;
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.player-stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-purple);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Header-ul (Avatar, Nume, Rank/UID) */
.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #2c2f48;
}

.player-card-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.player-card-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.player-card-identity {
    min-width: 0;
}

.player-card-name {
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stil pentru RANK (#123) cu efect de glow */
.player-card-rank {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-shadow: 0 0 8px var(--accent-cyan);
}

/* Stil pentru UID (UID #123) cu efect de glow */
.player-card-uid {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-cyan); /* Ambele vor avea aceeași culoare pentru consistență */
    text-shadow: 0 0 8px var(--accent-cyan);
}

/* Stil pentru badge-urile de rank (Owner, Admin etc.) */
.player-card-identity-rank {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rank-color, #fff);
}


/* Secțiunea de statistici (Timp, Kill-uri, Decese) */
.player-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

.player-card-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.player-card-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-dark);
    text-transform: uppercase;
}

/* Footer-ul (Vezi Profilul Complet) */
.player-card-footer {
    margin-top: auto;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

.player-card-footer span i {
    transition: transform 0.3s ease;
}

.player-stat-card:hover .player-card-footer span i {
    transform: translateX(5px);
}

/* Badge-urile de status (ONLINE/OFFLINE) */
.online-indicator, .offline-hidden-indicator {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}

.online-indicator {
    background-color: #00e676;
    color: #060814;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.offline-hidden-indicator {
    background-color: #F44336;
    color: #fff;
}
/* --- REWORK DESIGN CARD JUCĂTOR (ALINIERE ȘI COMPACTARE) --- */

/* 1. REGULA CHEIE: Centrează vertical conținutul din header. */
.player-card-header {
    align-items: center; /* Schimbă din 'flex-start' în 'center' */
}

/* 2. Reduce spațiul gol de sub header și de sub statistici. */
.player-card-header,
.player-card-stats {
    margin-bottom: 1.25rem; /* Valoare redusă pentru un aspect mai compact */
}

/* 3. Păstrează regulile corecte pentru coloana din dreapta. */
.player-card-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 1rem;
}

/* 4. Anulează orice stiluri vechi care ar putea interfera. */
.online-indicator, .offline-hidden-indicator {
    position: static;
}

.player-card-rank,
.player-card-uid {
    margin-top: 0;
    color: var(--primary-purple);
    text-shadow: 0 0 10px var(--glow-color);
}

/* 5. Asigură afișarea corectă a numelor lungi. */
.player-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
/* --- DESIGN FINAL PENTRU PAGINA DE JUCĂTORI (CONFORM IMAGINII) --- */

/* Grila principală pentru carduri */
#player-viewer-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    #player-viewer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    #player-viewer-container {
        grid-template-columns: 1fr;
    }
}

/* Stilul cardului principal */
.player-stat-card {
    background: #1A192D; /* Fundalul mov închis */
    border: 1px solid #2c2f48;
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.player-stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-purple);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Header-ul (Avatar, Nume, Rank/UID) */
.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* ALINIERE VERTICALA CORECTA */
    gap: 1rem;
    padding-bottom: 1.25rem; /* Spatiu redus */
    margin-bottom: 1.25rem; /* Spatiu redus */
    border-bottom: 1px solid #2c2f48;
}

.player-card-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.player-card-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.player-card-identity {
    min-width: 0;
}

.player-card-name {
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Container pentru coloana din dreapta (Status + Rank/UID) */
.player-card-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aliniere la dreapta */
    gap: 0.5rem; /* Spațiu între status și rank */
    flex-shrink: 0;
}

/* Stil pentru RANK (#123) cu efect de glow */
.player-card-rank {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-purple);
    text-shadow: 0 0 10px var(--glow-color);
}

/* Stil pentru UID (UID #123) cu efect de glow */
.player-card-uid {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-purple);
    text-shadow: 0 0 10px var(--glow-color);
}


/* Stil pentru badge-urile de rank (Owner, Admin etc.) */
.player-card-identity-rank {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rank-color, #fff);
}


/* Secțiunea de statistici (Timp, Kill-uri, Decese) */
.player-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

.player-card-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.player-card-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-dark);
    text-transform: uppercase;
}

/* Footer-ul (Vezi Profilul Complet) */
.player-card-footer {
    margin-top: auto;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

.player-card-footer span i {
    transition: transform 0.3s ease;
    font-size: 0.8em;
    margin-left: 4px;
}

.player-stat-card:hover .player-card-footer span i {
    transform: translateX(5px);
}

/* Badge-urile de status (ONLINE/OFFLINE) */
.online-indicator, .offline-hidden-indicator {
    position: static; /* Poziționare relativă în noul container */
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}

.online-indicator {
    background-color: #00e676;
    color: #060814;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.offline-hidden-indicator {
    background-color: #F44336;
    color: #fff;
}

/* Mesaj pentru când nu se găsesc jucători */
#player-viewer-container .no-players-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-dark);
    font-size: 1.2rem;
}

#player-viewer-container.loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    grid-template-columns: none;
}
/* Secțiunea de statistici (Timp, Kill-uri, Decese) */
.player-card-stats {
    display: flex; /* Schimbat din grid în flex */
    justify-content: space-between; /* Distribuie elementele egal */
    text-align: left;
    margin-bottom: 1.5rem;
}
/* --- DESIGN FINAL PENTRU PAGINA DE JUCĂTORI (VERSIUNEA DEFINITIVĂ) --- */

#player-viewer-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    #player-viewer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    #player-viewer-container {
        grid-template-columns: 1fr;
    }
}

.player-stat-card {
    background: #1A192D;
    border: 1px solid #2c2f48;
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.player-stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-purple);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* 1. HEADER-UL: Folosim Flexbox pentru a distribui elementele la capete */
.player-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* <-- ADD THIS LINE */
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #2c2f48;
}

.player-card-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0; /* Previne împingerea elementelor de către nume lungi */
}

.player-card-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.player-card-identity {
    min-width: 0;
}

.player-card-name {
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card-right-column {
    /* margin-left: auto; */ /* <-- REMOVE OR COMMENT OUT THIS LINE */
    padding-left: 1rem; /* Spațiu de siguranță */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.player-card-rank,
.player-card-uid {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-purple);
    text-shadow: 0 0 10px var(--glow-color);
}

.player-card-identity-rank {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rank-color, #fff);
}


/* 2. STATISTICILE: Folosim Grid pentru a distribui perfect conținutul */
.player-card-stats {
    display: grid;
    /* Folosim grid */
    grid-template-columns: auto auto auto;
    /* 3 coloane, fiecare lată cât conținutul său */
    justify-content: space-between;
    /* Distribuie coloanele pe toată lățimea */
    text-align: left;
    margin-bottom: 1.5rem;
}


.player-card-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.player-card-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-dark);
    text-transform: uppercase;
}

.player-card-footer {
    margin-top: auto;
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

.player-card-footer span i {
    transition: transform 0.3s ease;
    font-size: 0.8em;
    margin-left: 4px;
}

.player-stat-card:hover .player-card-footer span i {
    transform: translateX(5px);
}

.online-indicator, .offline-hidden-indicator {
    position: static;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}

.online-indicator {
    background-color: #00e676;
    color: #060814;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.offline-hidden-indicator {
    background-color: #F44336;
    color: #fff;
}

#player-viewer-container .no-players-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-dark);
    font-size: 1.2rem;
}

#player-viewer-container.loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    grid-template-columns: none;
}
/* --- FIX PENTRU ALINIEREA STATISTICILOR --- */

/* Prima statistică rămâne aliniată la stânga (deja setat de părinte) */
.player-card-stat:first-child {
    text-align: left;
}

/* A doua statistică (cea din mijloc) o centrăm */
.player-card-stat:nth-child(2) {
    text-align: center;
}

/* A treia statistică (cea din dreapta) o aliniem la dreapta */
.player-card-stat:last-child {
    text-align: right;
}
/* =============================================================== */
/* == START: DROP-IN REPLACEMENT FOR PLAYER CARD LAYOUT          == */
/* =============================================================== */

/* 1. HEADER: Force it to distribute content to the absolute edges. */
.player-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* THIS IS THE KEY RULE FOR THE HEADER */
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #2c2f48;
}

/* 2. HEADER'S RIGHT COLUMN: Remove the conflicting margin rule. */
.player-card-right-column {
    /* margin-left: auto; */ /* DELETE THIS LINE. It fights with the parent's justify-content. */
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* This right-aligns its own text content, which is correct. */
    gap: 0.5rem;
    flex-shrink: 0;
}

/* 3. STATS GRID: Rebuild it with three EQUAL, full-width columns. */
.player-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* THE KEY RULE FOR STATS: 3 equal, flexible columns. */
    margin-bottom: 1.5rem;
    /* The old `justify-content` and `text-align` are no longer needed here. */
}

/* 4. INDIVIDUAL STATS: Align the text WITHIN each of the new columns. */
.player-card-stat:first-child {
    text-align: left;
}

.player-card-stat:nth-child(2) {
    text-align: center;
}

.player-card-stat:last-child {
    text-align: right; /* This will align "1155" perfectly under "#1". */
}

/* =================================================================== */
/* ==         FROM-SCRATCH PLAYER CARD STYLES (VERSION 2.0)         == */
/* =================================================================== */

/* --- The Main Card Container --- */
/* We use Flexbox in a column direction. This is key for the footer. */
.player-card {
    background: #1A192D;
    border: 1px solid #2c2f48;
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: white;
    
    /* CORE LAYOUT: This card is a vertical flex container */
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Space between header, stats, and footer */

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.player-card:hover {
    transform: translateY(-5px);
    border-color: #7c4dff; /* Using a direct color for example */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}


/* --- 1. The Header --- */
/* This is a horizontal flex container. We push its children to the edges. */
.player-card__header {
    display: flex;
    justify-content: space-between; /* THE MOST IMPORTANT RULE */
    align-items: center;
    gap: 1rem; /* Space between left and right side if they get close */
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #2c2f48;
}

/* Left side of the header (Avatar, Name, Rank) */
.player-card__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0; /* Prevents long names from breaking layout */
}

.player-card__avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.player-card__name-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.player-card__name {
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card__rank-tags {
    display: flex;
    gap: 0.5rem;
}

.player-card__rank-tag {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rank-color, #fff);
}

/* Right side of the header (Status, #1) */
.player-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right-aligns the text */
    gap: 0.5rem;
    flex-shrink: 0;
}

.player-card__status {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}

.player-card__status--online {
    background-color: #00e676;
    color: #060814;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.7);
}

.player-card__status--offline {
    background-color: #F44336;
    color: #fff;
}

.player-card__rank {
    font-size: 1.6rem;
    font-weight: 700;
    color: #7c4dff; /* Using a direct color for example */
    text-shadow: 0 0 10px rgba(124, 77, 255, 0.7);
}


/* --- 2. The Stats --- */
/* This is ALSO a horizontal flex container. It mimics the header's layout. */
.player-card__stats {
    display: flex;
    justify-content: space-between; /* THIS PERFECTLY MIRRORS THE HEADER */
    align-items: center;
}

.stat {
    display: flex;
    flex-direction: column;
}

/* We align the text inside the stats to match the visual flow */
.stat:first-child { text-align: left; }
.stat:nth-child(2) { text-align: center; }
.stat:last-child { text-align: right; } /* This aligns '1155' to the right edge */

.stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat__label {
    font-size: 0.75rem;
    color: #8A8DA0; /* Example color */
    text-transform: uppercase;
}


/* --- 3. The Footer --- */
.player-card__footer {
    /* This pushes the footer to the bottom of the card, ALWAYS. */
    margin-top: auto; 
    text-align: left;
    font-size: 0.9rem;
    color: #8A8DA0; /* Example color */
    font-weight: 500;
}

.player-card__footer i {
    transition: transform 0.3s ease;
    font-size: 0.8em;
    margin-left: 4px;
}

.player-card:hover .player-card__footer i {
    transform: translateX(5px);
}
/* =================================================================== */
/* ==      ELEGANT PLAYER CARD REVAMP (BUILT ON CSS GRID)           == */
/* =================================================================== */

:root {
    --card-bg-color: rgba(26, 25, 45, 0.65);
    --card-border-color: rgba(68, 63, 113, 0.5);
    --card-glow-color: rgba(168, 85, 247, 0.7);
    --text-primary: #EAEAF5;
    --text-secondary: #A09EC0;
    --purple-accent: #A855F7;
    --online-color: #34D399;
    --offline-color: #F87171;
}

/* --- Main Grid Container for the Cards --- */
#player-viewer-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* --- THE NEW PLAYER CARD --- */
.player-card {
    /* Glassmorphism Background */
    background: 
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.15), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.1), transparent 35%),
        var(--card-bg-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid var(--card-border-color);
    border-radius: 16px;
    padding: 1.25rem;
    text-decoration: none;
    color: var(--text-primary);
    
    /* The core of the new layout: CSS GRID */
    display: grid;
    grid-template-columns: auto 1fr auto; /* Avatar | Name/Tags | Meta */
    grid-template-rows: auto auto 1fr; /* Top row | Stats | Footer (takes remaining space) */
    grid-template-areas:
        "avatar identity meta"
        "stats  stats    stats"
        "footer footer   footer";
    gap: 1rem 1.25rem; /* Row gap | Column gap */
    
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.player-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--card-glow-color);
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5), 0 0 20px var(--card-glow-color);
}


/* --- GRID AREA: AVATAR --- */
.player-card__avatar-link {
    grid-area: avatar;
    align-self: center; /* Vertically center the avatar */
}
.player-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border-color);
}

/* --- GRID AREA: IDENTITY (Name & Tags) --- */
.player-card__identity {
    grid-area: identity;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0; /* Prevents overflow */
}
.player-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.player-card__rank-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.player-card__rank-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
    border: 1px solid var(--rank-color, #fff);
    background-color: rgba(0,0,0,0.3);
}

/* --- GRID AREA: META (Status & Rank) --- */
.player-card__meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* ALIGNS TO THE RIGHT */
    justify-content: center;
    gap: 0.4rem;
}
.player-card__status {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    color: #000;
}
.player-card__status--online {
    background-color: var(--online-color);
    box-shadow: 0 0 10px var(--online-color);
}
.player-card__status--offline {
    background-color: var(--offline-color);
    box-shadow: 0 0 10px var(--offline-color);
}
.player-card__rank {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--purple-accent);
    text-shadow: 0 0 12px var(--card-glow-color);
}

/* --- GRID AREA: STATS --- */
.player-card__stats {
    grid-area: stats;
    display: flex; /* Using flexbox here is now safe and reliable */
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border-color);
}
.stat {
    display: flex;
    flex-direction: column;
    text-align: center; /* Centering stats is a clean modern look */
}
.stat__value {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}
.stat__label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- GRID AREA: FOOTER --- */
.player-card__footer {
    grid-area: footer;
    align-self: end; /* Pushes the footer to the bottom of the card */
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}
.player-card:hover .player-card__footer {
    color: var(--text-primary);
}
.player-card__footer i {
    margin-left: 4px;
    transition: transform 0.3s ease;
}
.player-card:hover .player-card__footer i {
    transform: translateX(5px);
}
/* --- Main Grid Container for the Cards --- */
#player-viewer-container {
    display: grid;
    /* CORE CHANGE: Explicitly define 3 equal-width columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Make it responsive for tablets */
@media (max-width: 992px) {
    #player-viewer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Make it responsive for mobile */
@media (max-width: 600px) {
    #player-viewer-container {
        grid-template-columns: 1fr;
    }
}

/* THE REST OF YOUR ELEGANT CARD STYLES REMAIN THE SAME... */
/* .player-card { ...etc } */
/* --- GRID AREA: IDENTITY (Name & Tags) --- */
.player-card__identity {
    grid-area: identity;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0; /* CRITICAL: Allows this grid area to shrink */
}

/* ROBUST FIX FOR LONG NAMES */
.player-card__name {
    font-size: 1.25rem; /* The default size */
    font-weight: 600;
    color: var(--text-primary);
    
    /* These 3 lines are the CSS safety net that prevents overflow */
    white-space: nowrap;      /* Don't allow the name to wrap to a new line */
    overflow: hidden;         /* Hide any part of the name that goes past the edge */
    text-overflow: ellipsis;  /* Show "..." if the name is hidden */
}

/* STYLES FOR THE RETURNING RANK TAGS */
.player-card__rank-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.player-card__rank-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
    border: 1px solid var(--rank-color, #fff);
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
}
/* --- GRID AREA: IDENTITY (Name & Tags) --- */
.player-card__identity {
    grid-area: identity;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;

    /* --- THE ABSOLUTE FIX --- */
    /* This forces the grid cell to clip anything that tries to overflow it. */
    /* This is the rule that was missing and fixes both the name and rank issue. */
    overflow: hidden;
    min-width: 0; /* Still important for grid/flex cooperation */
}

/* We still want the ellipsis on the name itself */
.player-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    
    white-space: nowrap;
    overflow: hidden;         /* Redundant but safe */
    text-overflow: ellipsis;  /* This will now work as intended */
}

/* STYLES FOR THE RANK TAGS (Unchanged, but they will now be visible) */
.player-card__rank-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.player-card__rank-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1;
    border: 1px solid var(--rank-color, #fff);
    background-color: rgba(0,0,0,0.3);
    color: var(--text-primary);
}
/* =================================================================== */
/* ==             ELEGANT STAFF LIST COMPONENT STYLES             == */
/* =================================================================== */

/* --- Styling for the Role Titles (e.g., "Manager") --- */
.staff-role-header {
    font-size: 1.75rem;
    font-weight: 700;
    color: #EAEAF5; /* --text-primary */
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 2.5rem; /* Space between role groups */
}

/* No top margin for the very first title in the list */
#staff-list-container > .staff-role-header:first-of-type {
    margin-top: 0;
}

/* The colorful vertical accent bar */
.staff-role-header::before {
    content: '';
    display: block;
    width: 5px;
    height: 1.5rem;
    border-radius: 5px;
    background: linear-gradient(180deg, #A855F7, #4f46e5); /* Purple gradient */
}

/* --- Grid container for the staff cards within a role --- */
.staff-grid {
    display: grid;
    /* Creates a responsive grid that fits as many cards as possible */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* --- The Individual Staff Card --- */
.staff-card {
    background: rgba(26, 25, 45, 0.65); /* --card-bg-color */
    border: 1px solid rgba(68, 63, 113, 0.5); /* --card-border-color */
    border-radius: 12px;
    padding: 1rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.staff-card:hover {
    transform: translateY(-5px);
    border-color: rgba(168, 85, 247, 0.7); /* --card-glow-color */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* --- THE FIX for the Online/Offline Indicator --- */
.staff-card__status {
    /* This ensures the pill is only as wide as its content */
    display: inline-block;
    width: fit-content;
    
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    color: white; /* Text color for the pill */
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.staff-card__status--online {
    background-color: #34D399; /* --online-color */
}

.staff-card__status--offline {
    background-color: #F87171; /* --offline-color */
}

/* --- Staff Member's Name --- */
.staff-card__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #EAEAF5; /* --text-primary */
}

/* --- Staff Member's Role Name --- */
.staff-card__role {
    font-size: 0.9rem;
    font-weight: 500;
    /* The color is set dynamically via JavaScript */
    color: var(--role-color, #A09EC0);
}
/* =================================================================== */
/* ==       STIL GENERIC PENTRU INDICATORUL DE STATUS ONLINE        == */
/* =================================================================== */

.status-indicator {
    display: inline-block;
    width: fit-content;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    line-height: 1;
}

.status-indicator--online {
    background-color: #34D399; /* Verde */
    color: #060814; /* Text închis pentru lizibilitate */
    box-shadow: 0 0 10px #34D399; /* Efectul de GLOW */
}

.status-indicator--offline {
    background-color: #F87171; /* Roșu */
    color: #fff; /* Text alb */
    box-shadow: 0 0 10px #F87171; /* Efectul de GLOW */
}
/*
================================================================================
|                                                                              |
|           SISTEM DE STILURI PENTRU PROFIL V5 (EDIȚIA ATMOSFERICĂ)              |
|                                                                              |
|     Acest fișier înlocuiește complet blocurile CSS anterioare.                |
|     Toate efectele sunt acum animate, cu un accent major pe subtilitate.      |
|                                                                              |
================================================================================
*/


/* --- STILURI DE BAZĂ ȘI LAYOUT --- */
:root {
    --transition-speed: 0.8s;
}

/* Containerul principal care asigură centrarea */
#player-profile-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
    box-sizing: border-box;
}

/* --- CONFIGURARE CARD PROFIL (FUNDAȚIA PENTRU EFECTE) --- */
.profile-v4-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden; /* Esențial pentru a "tăia" efectele ce ies din card */
    background: var(--profile-bg, #10141f);
    border: 1px solid var(--profile-border, rgba(88, 146, 255, 0.5));
    box-shadow: 
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        0 10px 40px rgba(0, 0, 0, 0.6);
    transition: all var(--transition-speed) cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateZ(0); /* Forțează accelerarea hardware */
    padding: 2rem 2.5rem; /* Readăugat padding aici */
}

/* Pseudoelementele folosite pentru toate efectele speciale (fundal, bordură, overlay) */
.profile-v4-container::before,
.profile-v4-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Le face "invizibile" pentru mouse */
    z-index: -1;
    border-radius: 20px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease-out;
}

/* Activarea vizibilității efectelor atunci când clasa corespunzătoare este adăugată */
.profile-v4-container[class*="bg-"]::before,
.profile-v4-container.border-animated-gradient::after,
.profile-v4-container.border-corners::after,
.profile-v4-container[class*="overlay-"]::after {
    opacity: 1;
}

/* --- 1. TEME DE CULORI (Rafinate) --- */
.profile-v4-container.theme-cosmic {
    --profile-bg: #10141f;
    --profile-border: #5892ff;
    --profile-glow: rgba(88, 146, 255, 0.6);
    --profile-accent: #a7c8ff;
    --profile-secondary-bg: rgba(30, 41, 73, 0.5); /* Semi-transparent */
}

.profile-v4-container.theme-crimson {
    --profile-bg: #141010;
    --profile-border: #ff5858;
    --profile-glow: rgba(255, 88, 88, 0.6);
    --profile-accent: #ff9d9d;
    --profile-secondary-bg: rgba(73, 30, 30, 0.5);
}

.profile-v4-container.theme-cyber {
    --profile-bg: #0f1c1c;
    --profile-border: #00ffff;
    --profile-glow: rgba(0, 255, 255, 0.6);
    --profile-accent: #c0ffff;
    --profile-secondary-bg: rgba(10, 67, 67, 0.5);
}

.profile-v4-container.theme-golden {
    --profile-bg: #1c1911;
    --profile-border: #ffd700;
    --profile-glow: rgba(255, 215, 0, 0.6);
    --profile-accent: #fff5b1;
    --profile-secondary-bg: rgba(92, 76, 26, 0.5);
}

.profile-v4-container.theme-amethyst {
    --profile-bg: #17111c;
    --profile-border: #e08aff;
    --profile-glow: rgba(200, 94, 255, 0.6);
    --profile-accent: #f0c3ff;
    --profile-secondary-bg: rgba(59, 30, 73, 0.5);
}

.profile-v4-container.theme-emerald {
    --profile-bg: #111c16;
    --profile-border: #3aff88;
    --profile-glow: rgba(58, 255, 136, 0.6);
    --profile-accent: #beffda;
    --profile-secondary-bg: rgba(30, 73, 46, 0.5);
}

.profile-v4-container.theme-obsidian {
    --profile-bg: #0a0a0a;
    --profile-border: #ffffff;
    --profile-glow: rgba(255, 255, 255, 0.5);
    --profile-accent: #ffffff;
    --profile-secondary-bg: rgba(31, 31, 31, 0.5);
}

/* --- 2. ANIMAȚII CHEIE (Motorul efectelor) --- */
@keyframes pan-background { to { background-position: 200% center; } }
@keyframes rotate-center { to { transform: rotate(360deg); } }
@keyframes breath-glow {
    0%, 100% { filter: drop-shadow(0 0 5px var(--profile-glow)); opacity: 0.6; }
    50% { filter: drop-shadow(0 0 12px var(--profile-glow)); opacity: 1; }
}
@keyframes slow-pan-vertical { to { background-position: 0 400px; } }
@keyframes corner-flicker {
    0%, 100% { clip-path: polygon(0 0, 30px 0, 30px 3px, 3px 3px, 3px 30px, 0 30px); }
    20% { clip-path: polygon(calc(100% - 30px) 0, 100% 0, 100% 30px, calc(100% - 3px) 30px, calc(100% - 3px) 3px, calc(100% - 30px) 3px); }
    50% { clip-path: polygon(calc(100% - 30px) 100%, 100% 100%, 100% calc(100% - 30px), calc(100% - 3px) calc(100% - 30px), calc(100% - 3px) calc(100% - 3px), calc(100% - 30px) calc(100% - 3px)); }
    75% { clip-path: polygon(0 calc(100% - 30px), 30px calc(100% - 30px), 30px calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 0 100%); }
}

/* --- 3. EFECTE DE FUNDAL ANIMATE ȘI SUBTILE (pe ::before) --- */

.bg-aurora::before {
    background: linear-gradient(-60deg, var(--profile-glow), var(--profile-accent));
    background-size: 300% 300%;
    opacity: 0.15 !important;
    filter: blur(150px);
    animation: pan-background 40s ease-in-out infinite alternate;
}

.bg-nebula::before {
    background: radial-gradient(ellipse at 40% 30%, var(--profile-glow), transparent 60%), radial-gradient(ellipse at 70% 80%, var(--profile-accent), transparent 70%);
    filter: blur(120px);
    opacity: 0.2 !important;
    animation: pan-background 50s ease-in-out infinite alternate;
}

.bg-flow::before {
    background: radial-gradient(ellipse at 20% 80%, var(--profile-glow), transparent 60%), radial-gradient(ellipse at 80% 20%, var(--profile-accent), transparent 60%);
    filter: blur(120px);
    opacity: 0.15 !important;
    animation: rotate-center 50s ease-in-out infinite alternate;
}

.bg-stars::before {
    background: radial-gradient(1px 1px at 20% 30%, var(--profile-accent), transparent), radial-gradient(1.5px 1.5px at 80% 60%, white, transparent);
    background-size: 800px 800px;
    opacity: 0.5 !important;
    animation: pan-background 300s linear infinite;
}

.bg-pulse::before {
    background: radial-gradient(circle, var(--profile-glow) 0%, transparent 70%);
    opacity: 0.2 !important;
    animation: breath-glow 6s ease-in-out infinite;
}

.bg-grid::before {
    background: 
        linear-gradient(var(--profile-accent) 1px, transparent 1px) 0 0 / 40px 40px, 
        linear-gradient(90deg, var(--profile-accent) 1px, transparent 1px) 0 0 / 40px 40px;
    opacity: 0.08 !important;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
    animation: pan-background 40s linear infinite reverse;
}

.bg-hyperspace::before {
    background: repeating-conic-gradient(from 0deg, var(--profile-accent) 0deg 1deg, transparent 1deg 40deg);
    mask-image: radial-gradient(circle at center, black 5%, transparent 70%);
    opacity: 0.15 !important;
    animation: rotate-center 25s linear infinite;
}

/* --- 4. EFECTE DE BORDURĂ ANIMATE (pe ::after) --- */
.profile-v4-container.border-glow::after {
    border: 1px solid var(--profile-accent);
    filter: blur(5px);
    animation: breath-glow 5s ease-in-out infinite alternate;
    opacity: 0.8 !important;
}

.profile-v4-container.border-dashed { border-style: dashed; border-width: 1px; }

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes border-gradient-anim { to { --angle: 360deg; } }
.profile-v4-container.border-animated-gradient { border-color: transparent; }
.profile-v4-container.border-animated-gradient::after {
    inset: -1px;
    background: conic-gradient(from var(--angle), var(--profile-glow), var(--profile-accent) 25%, var(--profile-accent) 75%, var(--profile-glow));
    animation: border-gradient-anim 5s linear infinite;
}

.profile-v4-container.border-corners { border-color: transparent; }
.profile-v4-container.border-corners::after {
    background: var(--profile-accent);
    filter: drop-shadow(0 0 5px var(--profile-glow));
    animation: corner-flicker 10s ease-in-out infinite;
}

/* --- 5. SUPRAPUNERI SUBTILE (pe ::after) --- */
.profile-v4-container.overlay-vignette::after {
    background: radial-gradient(ellipse at center, transparent 40%, black 100%);
    opacity: 0.7 !important;
}

.profile-v4-container.overlay-scanlines::after {
    background: repeating-linear-gradient(transparent 0, transparent 3px, rgba(0,0,0,0.4) 4px, rgba(0,0,0,0.4) 5px);
    opacity: 0.1 !important;
    mix-blend-mode: overlay;
    animation: slow-pan-vertical 20s linear infinite;
}

.profile-v4-container.overlay-static::after {
    background: repeating-conic-gradient(rgba(0,0,0,.2) 0% 25%, transparent 25% 50%) 50% / 2px 2px;
    opacity: 0.08 !important;
}

/*
================================================================================
|                       STILURI INTERNE ALE CARDULUI                            |
================================================================================
*/

/* --- Header & Identitate --- */
.profile-v4-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-v4-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--profile-accent, var(--accent-cyan));
    box-shadow: 0 0 25px var(--profile-glow, rgba(0, 255, 255, 0.4));
    flex-shrink: 0;
    transition: transform 0.4s ease;
}
.profile-v4-avatar:hover {
    transform: scale(1.1);
}

.profile-v4-identity { display: flex; flex-direction: column; }
.profile-v4-name-wrapper { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.profile-v4-name { font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1; }

.player-profile-rank-v4 {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 6px;
    background-color: var(--rank-color, #888);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.player-profile-rank-v4[style*="--rank-color: #FFD700;"] { color: #12141D; text-shadow: none; }

.profile-v4-status-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-status-v4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.profile-status-v4.online { color: #24FFB5; }
.profile-status-v4.offline { color: var(--text-dark); }
.profile-status-v4 .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; box-shadow: 0 0 8px currentColor; }

/* --- Butoane Perioadă --- */
.profile-period-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: rgba(0,0,0,0.2);
    padding: 0.5rem;
    border-radius: 10px;
}
.period-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dark);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.period-btn:hover { background-color: rgba(255,255,255,0.1); color: #fff; }
.period-btn.active { background-color: var(--profile-accent, var(--accent-cyan)); color: #10141f; }


/* --- Grid Statistici --- */
.profile-v4-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.stat-v4-card {
    background-color: var(--profile-secondary-bg, #1A1D2A);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px); /* Efect sticlă */
}
.stat-v4-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.stat-v4-icon { font-size: 1.8rem; color: var(--profile-accent, var(--accent-cyan)); margin-bottom: 1rem; }
.stat-v4-value { font-size: 2rem; font-weight: 700; color: #FFFFFF; margin-bottom: 0.5rem; line-height: 1; }
.stat-v4-label { font-size: 0.8rem; color: var(--text-dark); text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; }


/* --- Secțiune SCP & Trofee (unificate) --- */
.achievements-section,
.scp-stats-showcase {
    background-color: var(--profile-secondary-bg, rgba(26, 29, 42, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    margin-bottom: 2.5rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
}
.achievements-section { padding: 1.5rem; }


/* --- Footer --- */
.profile-v4-footer {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.steam-v4-button {
    background-color: #2A2E40;
    color: var(--text-light);
    border: 1px solid transparent;
    padding: 0.8rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.steam-v4-button:hover {
    background-color: var(--profile-accent);
    color: #10141f;
    border-color: var(--profile-accent);
    box-shadow: 0 0 15px var(--profile-glow);
}

/* --- Stiluri SCP Specifice --- */
.scp-nav-tabs { background: rgba(0,0,0,0.2); display:flex; flex-wrap: wrap;}
.scp-nav-btn {
    color: var(--text-dark); 
    background: transparent;
    border:none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.3s;
    flex-grow: 1;
}
.scp-nav-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.scp-nav-btn.active { background-color: var(--profile-accent); color: #10141f; }
.scp-content-area { padding: 1.5rem; }

/* ... păstrează celelalte stiluri pentru trofee și modal neatinse, sunt deja bine scrise ... */
/* AICI SE TERMINA NOUL COD PENTRU PROFIL */

/*
================================================================================
|             STILURI PENTRU TROFEE & MODAL (PĂSTRATE ȘI VERIFICATE)              |
================================================================================
*/
/* Containerul principal pentru secțiunea de trofee */
.achievements-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--profile-secondary-bg, #1A1D2A);
    border-radius: 12px;
}

/* Antetul (Titlu + Buton) */
.achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.achievements-header .section-subtitle { margin-bottom: 0; }
.section-subtitle { /* Asigură-te că ai un stil de bază pentru acest titlu */
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}


/* Grila unde stau cardurile de trofee */
.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Stilul de bază pentru FIECARE card de trofeu */
.achievement-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 110px;
    min-height: 100px;
    background: #12141D;
    border-radius: 8px;
    border: 1px solid #2c2f48;
    padding: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* BARA COLORATĂ de deasupra cardului */
.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--rarity-color);
}

/* Iconița trofeului */
.achievement-card .achievement-icon {
    font-size: 2.2rem;
    color: var(--rarity-color);
    text-shadow: 0 0 10px var(--rarity-color);
    line-height: 1;
}

/* Numele trofeului */
.achievement-card .achievement-name-display {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.achievement-card:not(.locked) .achievement-name-display { color: var(--text-light); }


/* DEFINIȚIILE CULORilor pentru raritate */
.achievement-card.rarity-common { --rarity-color: #90A4AE; }
.achievement-card.rarity-uncommon { --rarity-color: #4CAF50; }
.achievement-card.rarity-rare { --rarity-color: #2196F3; }
.achievement-card.rarity-epic { --rarity-color: #9C27B0; }
.achievement-card.rarity-legendary { --rarity-color: #FFC107; }

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(6, 8, 20, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.modal-content {
    background: #12141D;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2 { margin: 0; font-size: 1.5rem; }
.modal-close-btn { background: none; border: none; font-size: 2rem; color: var(--text-dark); cursor: pointer; transition: all 0.2s; }
.modal-close-btn:hover { color: var(--text-light); transform: rotate(90deg); }
.modal-body { overflow-y: auto; padding: 1.5rem; }

/* --- Ajustări Header & Link "Înapoi" --- */
.profile-v4-back-link {
    display: inline-block; /* Îl readuce în fluxul normal al paginii */
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1.5rem; /* CREEAZĂ SPAȚIUL care împinge header-ul mai jos */
    transition: color 0.3s;
    padding-left: 0; /* Resetează orice padding anterior */
}

.profile-v4-back-link:hover {
    color: var(--text-light);
}

.profile-v4-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem; /* Spațiu mărit după header */
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* FĂRĂ margin-top, spațiul este acum controlat de link-ul de deasupra */
}
/* --- Grid Statistici (Ajustat 3x2) --- */
.profile-v4-stats-grid {
    display: grid;
    /* REGULA CHEIE: Forțează 3 coloane egale pe ecrane mari */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* Mărit spațiul pentru un aspect mai curat */
    margin-bottom: 3rem;
}

/* Asigură un aspect bun pe tablete */
@media (max-width: 768px) {
    .profile-v4-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Asigură un aspect bun pe telefoanele mobile */
@media (max-width: 480px) {
    .profile-v4-stats-grid {
        /* O singură coloană pe ecrane foarte mici pentru lizibilitate maximă */
        grid-template-columns: 1fr;
    }
}
/* --- EFECTE VIZUALE ATENUATE --- */

.bg-rain::before {
    background-image: linear-gradient(transparent, var(--profile-accent));
    background-size: 10px 10px;
    opacity: 0.1 !important; /* Modificat: Opacitate redusă */
    animation: matrix-fall 100s linear infinite; /* Modificat: Animație încetinită */
}

.bg-diamonds::before {
    background: repeating-conic-gradient(var(--profile-secondary-bg) 0% 25%, var(--profile-accent) 0% 50%) 50% / 30px 30px;
    opacity: 0.03 !important; /* Modificat: Opacitate foarte redusă */
}

.bg-triangles::before {
    background: linear-gradient(315deg, var(--profile-accent) 25%, #0000 25%) -10px 0, linear-gradient(225deg, var(--profile-accent) 25%, #0000 25%) -10px 0, linear-gradient(135deg, var(--profile-accent) 25%, #0000 25%), linear-gradient(45deg, var(--profile-accent) 25%, #0000 25%);
    background-size: 20px 20px;
    opacity: 0.02 !important; /* Modificat: Opacitate extrem de redusă */
}

.bg-sunburst::before {
    background: repeating-conic-gradient(var(--profile-glow) 0deg 5deg, transparent 5deg 25deg); /* Modificat: Mai mult spațiu gol */
    opacity: 0.08 !important; /* Modificat: Opacitate redusă */
}

.bg-vortex::before {
    background: radial-gradient(transparent 40%, var(--profile-accent) 100%); /* Modificat: Gradient mai subtil */
    clip-path: polygon(500% 500%, 0 0, 100% 1000%, 500% 500%, 1000% 0, 900% 1000%);
    opacity: 0.07 !important; /* Modificat: Opacitate redusă */
}

.bg-gears::before {
    background: radial-gradient(circle, #0000 20px, var(--profile-accent) 21px, var(--profile-accent) 23px, #0000 24px), repeating-linear-gradient(45deg, var(--profile-accent) 0 2px, #0000 2px 5px);
    background-size: 60px 60px;
    opacity: 0.05 !important; /* Modificat: Opacitate redusă */
}

.bg-stripes-vert::before {
    background: repeating-linear-gradient(var(--profile-secondary-bg), var(--profile-secondary-bg) 10px, var(--profile-accent) 10px, var(--profile-accent) 11px); /* Modificat: Dungile mai late */
    opacity: 0.05 !important; /* Modificat: Opacitate redusă */
}

.bg-tectonic::before {
    background: repeating-linear-gradient(45deg, #000 0, #000 8px, var(--profile-accent) 8px, var(--profile-accent) 16px), repeating-linear-gradient(-45deg, #000 0, #000 8px, var(--profile-accent) 8px, var(--profile-accent) 16px); /* Modificat: Pattern mai mare */
    opacity: 0.04 !important; /* Modificat: Opacitate redusă */
}

.bg-constellation::before {
    background: radial-gradient(1px 1px, var(--profile-accent), transparent) 10% 10%, radial-gradient(1px 1px, white, transparent) 50% 50%, radial-gradient(1.5px 1.5px, white, transparent) 80% 20%, linear-gradient(120deg, var(--profile-glow), transparent 50%), linear-gradient(200deg, var(--profile-glow), transparent 60%);
    opacity: 0.15 !important; /* Modificat: Opacitatea petelor de culoare redusă */
    background-size: 10px 10px;
    animation: pan-background 100s linear infinite;
}

/* Modificare pentru bordura animată */
.profile-v4-container.border-animated-gradient::after {
    inset: -2px;
    background: conic-gradient(from var(--angle), transparent, var(--profile-glow), var(--profile-accent), var(--profile-glow), transparent 30%); /* Modificat: Gradient mai moale */
    filter: blur(10px); /* Modificat: Efect de blur adăugat */
    animation: border-gradient-anim 8s linear infinite; /* Modificat: Animație încetinită */
}
/* Stiluri pentru Tooltip-ul de Trofee */
.achievement-tooltip {
    position: fixed; /* Poziționare relativă la ecran */
    z-index: 1000;
    width: 300px;
    background-color: #1e2024;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Tooltip-ul nu poate fi interacționat direct */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.achievement-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.achievement-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #3a3f44;
}

.achievement-tooltip .tooltip-icon {
    font-size: 2.5rem;
}

.achievement-tooltip .tooltip-title h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-light);
}

.achievement-tooltip .tooltip-title span {
    font-size: 0.8rem;
    text-transform: capitalize;
    font-weight: 500;
}

.achievement-tooltip .tooltip-body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-normal);
    line-height: 1.5;
}

/* Culori specifice pentru raritate (bordură și iconiță) */
.achievement-tooltip.rarity-common { border-left: 4px solid #b0b0b0; }
.achievement-tooltip.rarity-common .tooltip-icon { color: #b0b0b0; }
.achievement-tooltip.rarity-common .tooltip-title span { color: #b0b0b0; }

.achievement-tooltip.rarity-uncommon { border-left: 4px solid #4caf50; }
.achievement-tooltip.rarity-uncommon .tooltip-icon { color: #4caf50; }
.achievement-tooltip.rarity-uncommon .tooltip-title span { color: #4caf50; }

.achievement-tooltip.rarity-rare { border-left: 4px solid #2196f3; }
.achievement-tooltip.rarity-rare .tooltip-icon { color: #2196f3; }
.achievement-tooltip.rarity-rare .tooltip-title span { color: #2196f3; }

.achievement-tooltip.rarity-epic { border-left: 4px solid #9c27b0; }
.achievement-tooltip.rarity-epic .tooltip-icon { color: #9c27b0; }
.achievement-tooltip.rarity-epic .tooltip-title span { color: #9c27b0; }

.achievement-tooltip.rarity-legendary { border-left: 4px solid #ff9800; }
.achievement-tooltip.rarity-legendary .tooltip-icon { color: #ff9800; }
.achievement-tooltip.rarity-legendary .tooltip-title span { color: #ff9800; }
/* ============================================= */
/* ==   DESIGN LEADERBOARD FUTURIST V2        == */
/* ============================================= */

/* Containerul principal - fundal întunecat, high-tech */
.leaderboard-container-v2 {
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    background: 
        radial-gradient(ellipse at center, rgba(10, 23, 60, 0.8), transparent 70%),
        linear-gradient(160deg, #02041b 0%, #0f172a 100%);
    border: 1px solid rgba(0, 246, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0, 246, 255, 0.15), inset 0 0 15px rgba(0, 246, 255, 0.1);
    position: relative;
    overflow: hidden;
    padding: 1.5rem 2.5rem;
    animation: fadeIn 0.5s ease-out;
}

/* Efect de scanline animat pentru un look de monitor vechi/hologramă */
.scanline-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
    background-size: 100% 4px;
    animation: scanline 15s linear infinite;
    z-index: 1;
}
@keyframes scanline {
    from { background-position: 0 0; }
    to { background-position: 0 100vh; }
}


/* Header-ul cu titlu și buton */
.leaderboard-header-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    text-align: center;
}
.back-button-v2 {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(0, 246, 255, 0.5);
    color: rgba(0, 246, 255, 0.8);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.back-button-v2:hover {
    background: rgba(0, 246, 255, 0.1);
    color: #00f6ff;
    box-shadow: 0 0 15px rgba(0, 246, 255, 0.5);
}

/* Efect de GLITCH pentru titlu - foarte tare! */
.glitch {
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00f6ff;
    text-shadow: 0 0 5px #00f6ff, 0 0 10px #00f6ff, 0 0 20px #ff00ff;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #02041b;
    overflow: hidden;
}
.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
    0% { clip-path: inset(15% 0 86% 0); } 100% { clip-path: inset(89% 0 1% 0); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(46% 0 46% 0); } 100% { clip-path: inset(11% 0 83% 0); }
}

/* Lista de jucători */
.leaderboard-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Stil pentru fiecare rând din clasament */
.leaderboard-item-v2 {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(0, 246, 255, 0.05), transparent);
    border-left: 3px solid rgba(0, 246, 255, 0.3);
    border-right: 3px solid transparent;
    border-top: 1px solid rgba(0, 246, 255, 0.08);
    border-bottom: 1px solid rgba(0, 246, 255, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
    opacity: 0;
    transform: translateX(-30px);
    animation: fadeInSlide 0.5s ease-out forwards;
}
@keyframes fadeInSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.leaderboard-item-v2:hover {
    background: linear-gradient(90deg, rgba(0, 246, 255, 0.15), rgba(0, 246, 255, 0.05));
    border-left-color: #00f6ff;
    transform: scale(1.02);
    z-index: 10;
}

/* Stil pentru rang (#1, #2, etc.) */
.rank-v2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.player-name-v2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
}

.stat-value-v2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f8fafc;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Stiluri speciale pentru TOP 3 */
.leaderboard-item-v2.gold {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), transparent);
    border-left-color: #FFD700;
}
.leaderboard-item-v2.gold:hover {
    border-left-color: #fff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.leaderboard-item-v2.gold .rank-v2,
.leaderboard-item-v2.gold .stat-value-v2 {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.leaderboard-item-v2.silver {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), transparent);
    border-left-color: #C0C0C0;
}
.leaderboard-item-v2.silver .rank-v2,
.leaderboard-item-v2.silver .stat-value-v2 {
    color: #C0C0C0;
}

.leaderboard-item-v2.bronze {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), transparent);
    border-left-color: #CD7F32;
}
.leaderboard-item-v2.bronze .rank-v2,
.leaderboard-item-v2.bronze .stat-value-v2 {
    color: #CD7F32;
}

/* Mesaj pentru când nu există date */
.no-data-v2 {
    text-align: center;
    padding: 4rem 2rem;
    font-family: 'Courier New', Courier, monospace;
    color: var(--accent-pink);
    font-size: 1.2rem;
    border: 1px dashed var(--accent-pink);
    background: rgba(255, 0, 193, 0.05);
}
/* ======================================================= */
/* == STILURI PENTRU ELEMENTE CLICABILE ȘI REZOLVĂRI     == */
/* ======================================================= */

/* 
  Rezolvare pentru problema 1: 
  Asigură-te că link-urile (<a>) din clasament se comportă ca blocurile noastre stilizate
  și nu au aspectul default de link (albastru, subliniat).
*/
.leaderboard-item-v2 {
    display: grid; /* Asigură-te că layout-ul grid este reaplicat */
    text-decoration: none; /* Elimină sublinierea link-ului */
    color: inherit; /* Moștenește culoarea textului de la părinte */
}


/*
  Rezolvare pentru problema 2:
  Adaugă feedback vizual pentru TOATE statisticile care au clasa '.clickable-stat'
  (acestea se află pe pagina de profil).
*/

/* Stil de bază pentru statisticile clicabile de pe profil */
.clickable-stat {
    border-radius: 8px; /* Colțuri rotunjite pentru a se potrivi cu designul cardurilor */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative; /* Necesar pentru pseudo-elemente */
    overflow: hidden; /* Ascunde ce depășește colțurile rotunjite */
}

/* Efect de hover spectaculos */
.clickable-stat:hover {
    transform: translateY(-4px); /* Se ridică puțin la hover */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Adaugă umbră pentru adâncime */
    background: rgba(255, 255, 255, 0.03); /* Iluminare subtilă */
}

/* Adaugă un efect de strălucire la hover care se potrivește cu tema */
.clickable-stat::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--accent-cyan, #00f6ff) 0%, transparent 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

.clickable-stat:hover::before {
    width: 250%; /* Face cercul mult mai mare decât elementul */
    height: 250%; /* pentru un efect de "undă de lumină" */
    opacity: 0.1;
}
/* ============================================= */
/* ==   STIL TITLU HEAVENLY / GODLY           == */
/* ============================================= */

/* Stilul de bază pentru noul titlu */
.title-heavenly {
    position: relative;
    font-size: 2.8rem; /* Puțin mai mare pentru a impune respect */
    font-weight: 700;
    color: transparent; /* Textul în sine e transparent, culoarea vine din fundal */
    
    /* Gradientul auriu-alb care formează culoarea textului */
    background: linear-gradient(125deg, #FFD700, #FFFFFF, #FADF6E);
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Animația de strălucire care mișcă gradientul */
    background-size: 200% auto;
    animation: heavenly-shine 5s linear infinite;

    /* Umbre multiple pentru un efect de "glow" profund și cald */
    text-shadow: 
        1px 1px 2px rgba(255, 230, 150, 0.5), /* Umbră fină pentru definire */
        0 0 15px rgba(255, 215, 0, 0.7),     /* Glow principal auriu */
        0 0 30px rgba(255, 180, 0, 0.5),     /* Aura exterioară portocalie */
        0 0 50px rgba(255, 100, 0, 0.3);     /* Cea mai largă aură, subtilă */
}

/* O aură de lumină în spatele textului care pulsează lent */
.title-heavenly::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 150%;
    z-index: -1; /* Asigură că este în spatele textului */
    border-radius: 50%;
    
    /* Gradientul radial care formează aura */
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    
    /* Animația care face aura să "respire" */
    animation: heavenly-pulse 4s ease-in-out infinite;
}


/* Animația care mișcă gradientul pe text pentru efectul de strălucire */
@keyframes heavenly-shine {
    to {
        background-position: -200% center;
    }
}

/* Animația care face aura din spate să pulseze */
@keyframes heavenly-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
}
/* ======================================================= */
/* ==       STILURI PENTRU VIZUALIZATOR APLICAȚII V2      == */
/* ======================================================= */
/*              -- Un design modern și animat --            */
/* ======================================================= */

/* --- Import Font & Variabile Globale --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --bg-color: #10101a;
    --panel-bg: rgba(28, 28, 42, 0.6);
    --panel-bg-solid: #1c1c2a;
    --border-color: rgba(70, 70, 90, 0.5);
    --primary-accent: #8A2BE2; /* Un mov vibrant */
    --secondary-accent: #4169E1; /* Albastru Royal */
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b8;
    --success-color: #28a745;
    --error-color: #dc3545;
    --viewed-color: #17a2b8;
    --pending-color: #ffc107;
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.2);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.4);
    --backdrop-blur: 10px;
}

/* --- RESET & STILURI DE BAZĂ RECONSTRUITE --- */
#app-viewer-container,
#app-viewer-container * {
    all: revert;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

#app-viewer-container {
    display: flex;
    height: 80vh; /* Înălțime mai generoasă */
    background: linear-gradient(135deg, #1a1a2e 0%, var(--bg-color) 100%);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-heavy);
    overflow: hidden;
    position: relative; /* Pentru elemente pseudo */
}

/* Efect de lumină subtil în fundal */
#app-viewer-container::before {
    content: '';
    position: absolute;
    top: -20%; left: -20%;
    width: 40%; height: 40%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, rgba(138, 43, 226, 0) 70%);
    animation: light-move 15s infinite alternate ease-in-out;
}

@keyframes light-move {
    from { transform: translate(0, 0); }
    to { transform: translate(150%, 150%); }
}

/* --- Panoul din Stânga (Lista Aplicațiilor) --- */
.app-viewer-list-panel {
    width: 380px;
    min-width: 320px;
    background: var(--panel-bg);
    backdrop-filter: blur(var(--backdrop-blur));
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.app-viewer-list-header h3 {
    padding: 1.75rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(to right, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border-bottom: 1px solid var(--border-color);
}

.app-viewer-list-body {
    overflow-y: auto;
    flex-grow: 1;
    padding: 1rem;
}

/* Stil pentru scrollbar personalizat */
.app-viewer-list-body::-webkit-scrollbar { width: 8px; }
.app-viewer-list-body::-webkit-scrollbar-track { background: transparent; }
.app-viewer-list-body::-webkit-scrollbar-thumb {
    background-color: var(--primary-accent);
    border-radius: 10px;
    border: 2px solid var(--panel-bg-solid);
}

.app-viewer-list-item {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    transform: perspective(1000px) scale(1);
}

.app-viewer-list-item:hover {
    background-color: rgba(138, 43, 226, 0.2);
    border-color: var(--primary-accent);
    transform: perspective(1000px) translateZ(20px);
    box-shadow: 0 5px 20px rgba(138, 43, 226, 0.2);
}

.app-viewer-list-item.active {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.5);
}
.app-viewer-list-item.active .app-viewer-item-title { color: white; }
.app-viewer-list-item.active .app-viewer-item-meta span:first-child { color: #e0e0e0; }

.app-viewer-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

.app-viewer-item-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Panoul din Dreapta (Detalii) --- */
.app-viewer-detail-panel {
    flex-grow: 1;
    overflow-y: auto;
    padding: 3rem;
    position: relative;
}

.app-viewer-detail-panel::-webkit-scrollbar { width: 8px; }
.app-viewer-detail-panel::-webkit-scrollbar-track { background: transparent; }
.app-viewer-detail-panel::-webkit-scrollbar-thumb {
    background-color: var(--secondary-accent);
    border-radius: 10px;
    border: 2px solid var(--bg-color);
}

/* Animație de intrare pentru conținut */
.app-viewer-detail-header, .app-viewer-answers, .app-viewer-actions {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}
.app-viewer-answers { animation-delay: 0.1s; }
.app-viewer-actions { animation-delay: 0.2s; }

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

.app-viewer-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--text-secondary);
    text-align: center;
}

.app-viewer-placeholder i {
    font-size: 5rem;
    background: linear-gradient(to right, var(--primary-accent), var(--secondary-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
    animation: pulse 2.5s infinite ease-in-out;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.app-viewer-placeholder p { font-size: 1.1rem; margin: 0; }

/* Header Detalii */
.app-viewer-detail-header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}
.app-viewer-detail-header h2 {
    margin: 0 0 0.5rem 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
}
.app-viewer-detail-header p {
    margin: 0.25rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Răspunsuri */
.app-viewer-answer-item {
    background: var(--panel-bg-solid);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-light);
}
.app-viewer-question {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: block;
    font-size: 1.1rem;
}
.app-viewer-answer-text, .answer-options-list {
    color: #c7c7d1;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Acțiuni Staff */
.app-viewer-actions {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--panel-bg-solid);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.app-viewer-actions h4 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Butoane de acțiune */
.app-viewer-action-buttons button {
    background: linear-gradient(to right, var(--primary-accent), var(--secondary-accent));
    color: white;
    border: none;
    padding: 12px 20px;
    margin: 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    background-size: 200% 100%;
}
.app-viewer-action-buttons button:hover {
    background-position: 100% 0;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
    transform: translateY(-2px);
}
.app-viewer-action-buttons button:disabled {
    background: #404058;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    color: #808090;
}
.app-viewer-action-buttons button.reject,
.app-viewer-action-buttons button.delete {
    background: var(--error-color);
}
.app-viewer-action-buttons button.reject:hover,
.app-viewer-action-buttons button.delete:hover {
    background: #e44d5c;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.5);
}

/* Badge-uri de Status Animate */
.app-viewer-status-badge {
    padding: 0.3em 0.8em;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    animation: status-glow 2s infinite alternate;
}

@keyframes status-glow {
    from { box-shadow: 0 0 5px -2px currentColor; }
    to { box-shadow: 0 0 8px 2px currentColor; }
}

.status-pending { background-color: var(--pending-color); color: #332701; }
.status-viewed { background-color: var(--viewed-color); color: #053840; }
.status-accepted { background-color: var(--success-color); color: #0a3612; }
.status-rejected { background-color: var(--error-color); color: #3b0d11; }

/* --- Responsive --- */
@media (max-width: 992px) {
    #app-viewer-container {
        flex-direction: column;
        height: auto;
        max-height: 90vh;
    }
    .app-viewer-list-panel {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        height: 40vh; /* Ocupă 40% din înălțime */
    }
    .app-viewer-detail-panel {
        position: fixed;
        top: 0;
        left: 100%; /* Începe în afara ecranului */
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
        z-index: 1000;
        padding-top: 5rem;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .app-viewer-detail-panel.show-mobile {
        transform: translateX(-100%); /* Glisează în ecran */
    }
    /* Buton de închidere pentru mobil */
    .app-viewer-detail-panel::after {
        content: '← Înapoi';
        position: absolute;
        top: 1rem;
        left: 1rem;
        padding: 0.5rem 1rem;
        background: var(--primary-accent);
        color: white;
        border-radius: 8px;
        cursor: pointer;
        z-index: 1001;
        font-weight: 500;
    }
}
/* --- CONTAINER PRINCIPAL --- */
/* Asigură-te că acest container principal are la bază display: flex */
#app-viewer-container {
    display: flex; /* Activează modul Flexbox */
    flex-direction: row; /* Aranjează elementele copil pe orizontală (stânga -> dreapta) */
    width: 100%; /* Ocupă toată lățimea disponibilă */
    height: 85vh; /* O înălțime generoasă pentru vizualizator */
    background: linear-gradient(135deg, #1a1a2e 0%, var(--bg-color) 100%);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-heavy);
    overflow: hidden; /* Previne depășirea conținutului */
}

/* --- Panoul din Stânga (Lista Aplicațiilor) --- */
/* Acest panou va avea o lățime fixă */
.app-viewer-list-panel {
    width: 380px; /* Lățime fixă pentru meniu */
    min-width: 320px;
    flex-shrink: 0; /* Împiedică micșorarea panoului dacă nu este suficient spațiu */
    background: var(--panel-bg);
    backdrop-filter: blur(var(--backdrop-blur));
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

/* --- Panoul din Dreapta (Detalii) --- */
/* Acest panou va ocupa restul spațiului disponibil */
.app-viewer-detail-panel {
    flex-grow: 1; /* Permite panoului să se extindă pentru a umple spațiul rămas */
    overflow-y: auto; /* Adaugă scroll vertical dacă conținutul este prea lung */
    padding: 3rem;
    position: relative;
}

/* Se asigură că pe mobil (sub 992px) panourile se așează unul sub celălalt */
@media (max-width: 992px) {
    #app-viewer-container {
        flex-direction: column; /* Pe ecrane mici, panourile trec unul sub altul */
        height: auto;
        max-height: 90vh;
    }
    .app-viewer-list-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        height: 40vh;
    }
    /* Restul stilurilor pentru mobil rămân neschimbate */
}