/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    color: #f0f0f0;
}

/* ===== NAVBAR ===== */
.navbar {
    background: #2a2a3a;
    border-bottom: 2px solid #4a4a6a;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 28px;
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #dcdc64;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 10px;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: #3a4a6a;
}

.nav-link.active {
    background: #4682b4;
    box-shadow: 0 2px 10px rgba(70, 130, 180, 0.3);
}

/* Tab-specific active colors */
.nav-link[href="scenario.html"].active {
    background: #4682b4;
}

.nav-link[href="leaderboard.html"].active {
    background: #dcdc64;
    color: #1a1a2e;
}

.nav-link[href="profile.html"].active {
    background: #64c8c8;
}

.nav-link[href="social.html"].active {
    background: #a064c8;
}

.nav-icon {
    font-size: 20px;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #1e1e2f;
    padding: 5px 15px;
    border-radius: 30px;
    border: 1px solid #4a4a6a;
}

.user-level {
    color: #dcdc64;
    font-weight: bold;
}

.user-avatar {
    font-size: 24px;
}

/* ===== HERO SECTION ===== */
.hero {
    background: linear-gradient(135deg, #4682b4 0%, #1e3a5f 100%);
    padding: 100px 20px;
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 48px;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: 20px;
    margin-bottom: 30px;
    color: #e0e0e0;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.btn-primary {
    background: #4682b4;
    color: #fff;
}

.btn-primary:hover {
    background: #5a9ed4;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(70, 130, 180, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background: #fff;
    color: #1a1a2e;
    transform: translateY(-2px);
}

.btn-large {
    padding: 15px 40px;
    font-size: 18px;
}

.btn-full {
    width: 100%;
    margin-top: 15px;
}

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

/* ===== FEATURES SECTION ===== */
.features {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #dcdc64;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: #2a2a3a;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid #4a4a6a;
}

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

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 20px;
}

.feature-icon.scenario-bg {
    background: #4682b4;
}

.feature-icon.leaderboard-bg {
    background: #dcdc64;
    color: #1a1a2e;
}

.feature-icon.profile-bg {
    background: #64c8c8;
}

.feature-icon.social-bg {
    background: #a064c8;
}

.feature-card h3 {
    margin-bottom: 15px;
    color: #fff;
}

.feature-card p {
    color: #b0b0d0;
    margin-bottom: 20px;
    line-height: 1.6;
}

.feature-link {
    color: #4682b4;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.feature-link:hover {
    color: #5a9ed4;
}

/* ===== STATS SECTION ===== */
.stats {
    background: #1e1e2f;
    padding: 60px 20px;
    border-top: 2px solid #4a4a6a;
    border-bottom: 2px solid #4a4a6a;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stat-number {
    font-size: 48px;
    font-weight: bold;
    color: #dcdc64;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 18px;
    color: #b0b0d0;
}

/* ===== CTA SECTION ===== */
.cta {
    background: linear-gradient(135deg, #a064c8 0%, #4682b4 100%);
    padding: 100px 20px;
    text-align: center;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #e0e0e0;
}

/* ===== PAGE HEADER ===== */
.page-header {
    background: linear-gradient(135deg, #2a2a3a 0%, #1e1e2f 100%);
    padding: 60px 20px;
    text-align: center;
    border-bottom: 2px solid #4a4a6a;
}

.page-title {
    font-size: 42px;
    margin-bottom: 10px;
    color: #dcdc64;
}

.page-subtitle {
    font-size: 18px;
    color: #b0b0d0;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.content-section {
    margin-bottom: 60px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* ===== SCENARIO CARDS ===== */
.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.scenario-card {
    background: #2a2a3a;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #4a4a6a;
    transition: transform 0.3s ease;
}

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

.scenario-card.locked {
    opacity: 0.7;
    position: relative;
}

.scenario-card h3 {
    margin-bottom: 10px;
    color: #fff;
}

.scenario-card p {
    color: #b0b0d0;
    margin-bottom: 15px;
    font-size: 14px;
}

.scenario-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.difficulty {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.difficulty.easy {
    background: #64c864;
    color: #1a1a2e;
}

.difficulty.medium {
    background: #dcdc64;
    color: #1a1a2e;
}

.difficulty.hard {
    background: #ff6b6b;
    color: #fff;
}

.exp {
    color: #64c8c8;
    font-weight: bold;
}

.lock-message {
    text-align: center;
    color: #ff6b6b;
    font-size: 14px;
    margin-bottom: 10px;
}

/* ===== WEEKLY CHALLENGE ===== */
.weekly-challenge-card {
    background: linear-gradient(135deg, #a064c8 0%, #4682b4 100%);
    padding: 30px;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: center;
}

.challenge-info h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff;
}

.challenge-meta {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.meta-item {
    background: rgba(255,255,255,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
}

.challenge-progress {
    text-align: center;
}

.progress-text {
    margin-bottom: 10px;
    font-weight: bold;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: #dcdc64;
    border-radius: 5px;
}

/* ===== STATS GRID ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.stat-card {
    background: #2a2a3a;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #4a4a6a;
}

.stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #dcdc64;
    margin-bottom: 5px;
}

/* ===== BADGES ===== */
.badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.challenge-badge {
    background: #ff6b6b;
    color: #fff;
}

/* ===== FOOTER ===== */
.footer {
    background: #1a1a2a;
    border-top: 2px solid #4a4a6a;
    padding: 60px 20px 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    color: #dcdc64;
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-section p {
    color: #b0b0d0;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #b0b0d0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #4682b4;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: #2a2a3a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #4682b4;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #4a4a6a;
    color: #8080a0;
    font-size: 14px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* You might want to add a hamburger menu for mobile */
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .weekly-challenge-card {
        grid-template-columns: 1fr;
    }
    
    .challenge-meta {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .nav-logo span:not(.logo-icon) {
        display: none;
    }
    
    .page-title {
        font-size: 32px;
    }
    
    .stat-number {
        font-size: 36px;
    }
}


/* ===== NOTIFICATION SYSTEM ===== */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.notification {
    background: #2a2a3a;
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left: 4px solid #4682b4;
    animation: slideIn 0.3s ease;
    min-width: 250px;
}

.notification-success {
    border-left-color: #64c864;
}

.notification-error {
    border-left-color: #ff6b6b;
}

.notification-info {
    border-left-color: #4682b4;
}

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

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

/* ===== MOBILE MENU ===== */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #2a2a3a;
        flex-direction: column;
        padding: 20px;
        border-bottom: 2px solid #4a4a6a;
    }
    
    .nav-menu.show {
        display: flex;
    }
    
    .nav-item {
        width: 100%;
    }
    
    .nav-link {
        padding: 15px;
        justify-content: center;
    }
}

/* ===== PAGE-SPECIFIC ACTIVE COLORS ===== */
.nav-link.scenario-active {
    background: #4682b4;
}

.nav-link.leaderboard-active {
    background: #dcdc64;
    color: #1a1a2e;
}

.nav-link.profile-active {
    background: #64c8c8;
}

.nav-link.social-active {
    background: #a064c8;
}



/* ===== LEADERBOARD STYLES ===== */

/* Leaderboard Tabs */
.leaderboard-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
}

.leaderboard-tab {
    padding: 12px 30px;
    background: #2a2a3a;
    border: 2px solid #4a4a6a;
    border-radius: 30px;
    color: #f0f0f0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.leaderboard-tab:hover {
    background: #3a4a6a;
    transform: translateY(-2px);
}

.leaderboard-tab.active {
    background: #4682b4;
    border-color: #4682b4;
    box-shadow: 0 4px 12px rgba(70, 130, 180, 0.3);
}

/* Leaderboard Tables */
.leaderboard-table {
    display: none;
    background: #2a2a3a;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #4a4a6a;
    margin-bottom: 40px;
}

.leaderboard-table.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.leaderboard-header {
    display: grid;
    grid-template-columns: 80px 2fr 1fr 1fr 1.5fr;
    background: #1e1e2f;
    padding: 15px 20px;
    border-bottom: 2px solid #4a4a6a;
    font-weight: bold;
    color: #dcdc64;
}

#friends-leaderboard .leaderboard-header {
    grid-template-columns: 80px 2fr 1fr 1fr 2fr;
}

#weekly-leaderboard .leaderboard-header {
    grid-template-columns: 80px 2fr 1fr 1fr 1fr 1.5fr;
}

.leaderboard-entries {
    max-height: 500px;
    overflow-y: auto;
}

.leaderboard-entry {
    display: grid;
    grid-template-columns: 80px 2fr 1fr 1fr 1.5fr;
    padding: 12px 20px;
    border-bottom: 1px solid #4a4a6a;
    align-items: center;
    transition: background 0.2s ease;
}

#friends-leaderboard .leaderboard-entry {
    grid-template-columns: 80px 2fr 1fr 1fr 2fr;
}

#weekly-leaderboard .leaderboard-entry {
    grid-template-columns: 80px 2fr 1fr 1fr 1fr 1.5fr;
}

.leaderboard-entry:hover {
    background: #32324a;
}

.leaderboard-entry.current-user {
    background: rgba(70, 130, 180, 0.2);
    border-left: 4px solid #4682b4;
}

.leaderboard-entry.current-user:hover {
    background: rgba(70, 130, 180, 0.3);
}

.rank {
    font-weight: bold;
    color: #dcdc64;
}

.player {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-name {
    color: #f0f0f0;
    font-weight: 500;
}

.player-badge {
    background: #4682b4;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
}

.score {
    font-weight: 600;
    color: #64c8c8;
}

.level {
    color: #b0b0d0;
}

.badge {
    font-size: 20px;
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-text {
    font-size: 13px;
    color: #b0b0d0;
}

.attempts {
    color: #64c8c8;
}

.reward {
    color: #dcdc64;
    font-weight: 500;
}

/* Weekly Info Card */
.weekly-info-card {
    background: linear-gradient(135deg, #2a2a3a 0%, #1e1e2f 100%);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 40px;
    border: 1px solid #a064c8;
    box-shadow: 0 8px 20px rgba(160, 100, 200, 0.2);
}

.weekly-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.weekly-icon {
    font-size: 32px;
}

.weekly-info-header h3 {
    color: #a064c8;
    font-size: 22px;
}

.weekly-info-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.weekly-time {
    background: #32324a;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.time-label {
    display: block;
    color: #b0b0d0;
    font-size: 14px;
    margin-bottom: 5px;
}

.time-value {
    display: block;
    color: #dcdc64;
    font-size: 20px;
    font-weight: bold;
}

.weekly-progress {
    background: #32324a;
    padding: 15px;
    border-radius: 10px;
}

.progress-label {
    color: #b0b0d0;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar-bg {
    flex: 1;
    height: 20px;
    background: #1e1e2f;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 200%;
    background: linear-gradient(90deg, #64c8c8, #a064c8);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.progress-percent {
    color: #dcdc64;
    font-weight: bold;
    min-width: 45px;
}

.weekly-attempts {
    background: #32324a;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.attempts-label {
    display: block;
    color: #b0b0d0;
    font-size: 14px;
    margin-bottom: 5px;
}

.attempts-value {
    display: block;
    color: #ff6b6b;
    font-size: 20px;
    font-weight: bold;
}

.weekly-rewards {
    background: #32324a;
    padding: 15px;
    border-radius: 10px;
}

.weekly-rewards h4 {
    color: #dcdc64;
    margin-bottom: 12px;
    font-size: 16px;
    text-align: center;
}

.rewards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #4a4a6a;
}

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

.reward-rank {
    color: #f0f0f0;
    font-size: 14px;
}

.reward-exp {
    color: #64c864;
    font-size: 14px;
    font-weight: 500;
}

/* Rankings Summary */
.rankings-summary {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #4a4a6a;
}

.rankings-summary h3 {
    color: #dcdc64;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
}

.rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.ranking-card {
    background: #32324a;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s ease;
}

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

.ranking-icon {
    font-size: 32px;
    background: #1e1e2f;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-info {
    display: flex;
    flex-direction: column;
}

.ranking-label {
    color: #b0b0d0;
    font-size: 14px;
}

.ranking-value {
    color: #dcdc64;
    font-size: 24px;
    font-weight: bold;
}

/* Scrollbar Styling */
.leaderboard-entries::-webkit-scrollbar {
    width: 8px;
}

.leaderboard-entries::-webkit-scrollbar-track {
    background: #1e1e2f;
}

.leaderboard-entries::-webkit-scrollbar-thumb {
    background: #4a4a6a;
    border-radius: 4px;
}

.leaderboard-entries::-webkit-scrollbar-thumb:hover {
    background: #5a5a7a;
}

/* Responsive Design */
@media (max-width: 768px) {
    .leaderboard-tabs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .leaderboard-header {
        font-size: 14px;
    }
    
    .leaderboard-entry {
        font-size: 13px;
    }
    
    .weekly-info-content {
        grid-template-columns: 1fr;
    }
    
    .rankings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .leaderboard-header,
    .leaderboard-entry {
        font-size: 12px;
        padding: 10px;
    }
    
    .player-badge {
        display: none;
    }
    
    .rankings-grid {
        grid-template-columns: 1fr;
    }
}


/* Add to your existing CSS */

/* Player department tag */
.player-dept {
    font-size: 11px;
    color: #8080a0;
    margin-left: 8px;
    background: #1e1e2f;
    padding: 2px 6px;
    border-radius: 12px;
}

/* Completed column */
.completed {
    color: #64c8c8;
    font-weight: 500;
    text-align: center;
}

/* Update leaderboard header columns */
#global-leaderboard .leaderboard-header {
    grid-template-columns: 80px 2.5fr 0.8fr 0.8fr 0.8fr;
}

#global-leaderboard .leaderboard-entry {
    grid-template-columns: 80px 2.5fr 0.8fr 0.8fr 0.8fr;
}

#friends-leaderboard .leaderboard-header {
    grid-template-columns: 80px 2.5fr 0.8fr 0.8fr 1.5fr;
}

#friends-leaderboard .leaderboard-entry {
    grid-template-columns: 80px 2.5fr 0.8fr 0.8fr 1.5fr;
}

#weekly-leaderboard .leaderboard-header {
    grid-template-columns: 80px 2.5fr 0.8fr 0.8fr 0.8fr 1.2fr;
}

#weekly-leaderboard .leaderboard-entry {
    grid-template-columns: 80px 2.5fr 0.8fr 0.8fr 0.8fr 1.2fr;
}

/* Loading spinner */
.loading-spinner {
    text-align: center;
    padding: 40px;
    color: #8080a0;
    font-style: italic;
}

/* Level badge */
.level {
    font-weight: bold;
    color: #dcdc64;
    font-size: 18px;
}

/* Remove country styles since not needed */
.player-country {
    display: none;
}




/* ===== PROFILE PAGE STYLES ===== */

/* Profile Overview */
.profile-overview {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #4a4a6a;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
}

.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 25px;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #4682b4, #64c8c8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #dcdc64;
}

.avatar-emoji {
    font-size: 50px;
}

.profile-title h2 {
    font-size: 28px;
    color: #fff;
    margin: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.profile-edit-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e1e2f;
    color: #dcdc64;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.profile-edit-btn:hover {
    background: #3a4a6a;
    border-color: #64c8c8;
    transform: translateY(-1px);
}

.change-password-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    border-color: #64c8c8;
    color: #f0f0f0;
    background: #1e1e2f;
}

.change-password-btn:hover {
    background: #3a4a6a;
    border-color: #dcdc64;
}

.profile-role {
    display: block;
    color: #dcdc64;
    font-size: 16px;
    margin-bottom: 5px;
}

.profile-department {
    display: block;
    color: #b0b0d0;
    font-size: 14px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.profile-stat-card {
    background: #1e1e2f;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #4a4a6a;
}

.stat-icon {
    font-size: 28px;
    background: #2a2a3a;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-detail {
    display: flex;
    flex-direction: column;
}

.stat-detail .stat-label {
    color: #b0b0d0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-detail .stat-value {
    color: #dcdc64;
    font-size: 24px;
    font-weight: bold;
}

/* Progress Section */
.progress-section {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #4a4a6a;
}

.section-subtitle {
    color: #dcdc64;
    font-size: 18px;
    margin-bottom: 20px;
}

.exp-bar-container {
    max-width: 600px;
    margin: 0 auto;
}

.exp-bar-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #b0b0d0;
    font-size: 14px;
}

.exp-bar-bg {
    width: 100%;
    height: 20px;
    background: #1e1e2f;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #64c864, #dcdc64);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.exp-to-next {
    text-align: center;
    color: #b0b0d0;
    font-size: 14px;
}

.exp-to-next-value {
    color: #64c8c8;
    font-weight: bold;
    margin-left: 5px;
}

/* Detailed Stats */
.detailed-stats {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #4a4a6a;
}

.stats-grid-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-item-detailed {
    background: #1e1e2f;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #4a4a6a;
}

.stat-item-detailed .stat-label {
    display: block;
    color: #b0b0d0;
    font-size: 12px;
    margin-bottom: 5px;
}

.stat-item-detailed .stat-value {
    display: block;
    color: #dcdc64;
    font-size: 20px;
    font-weight: bold;
}

.analytics-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: -10px 0 30px;
    padding: 20px 22px;
    border: 1px solid rgba(100, 200, 200, 0.28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(100, 200, 200, 0.12), rgba(220, 220, 100, 0.08));
}

.analytics-cta h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 20px;
}

.analytics-cta p {
    margin: 0;
    color: #b0b0d0;
    line-height: 1.45;
}

/* Scenario History */
.scenario-history {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #4a4a6a;
}

.history-table {
    width: 100%;
    margin-bottom: 20px;
}

.history-header {
    display: grid;
    grid-template-columns: 100px 1.5fr 80px 100px 60px;
    padding: 12px 15px;
    background: #1e1e2f;
    border-radius: 8px;
    color: #dcdc64;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

.history-entry {
    display: grid;
    grid-template-columns: 100px 1.5fr 80px 100px 60px;
    padding: 12px 15px;
    background: #1e1e2f;
    border-radius: 8px;
    margin-bottom: 5px;
    align-items: center;
    transition: background 0.2s ease;
}

.history-entry:hover {
    background: #32324a;
}

.history-date {
    color: #b0b0d0;
    font-size: 13px;
}

.history-scenario {
    color: #fff;
}

.history-score {
    font-weight: bold;
}

.history-exp {
    color: #64c8c8;
}

.history-badge {
    font-size: 18px;
    text-align: center;
}

.btn-view-all {
    width: 200px;
    margin: 0 auto;
    display: block;
}

/* Badges Section */
.badges-section {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #4a4a6a;
}

.badges-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.btn-small {
    padding: 8px 15px;
    font-size: 14px;
    background: #4682b4;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#viewAllBadges {
    border: 1px solid rgba(100, 200, 200, 0.35);
    background: rgba(100, 200, 200, 0.12);
    color: #dffafa;
    font-weight: 800;
    box-shadow: none;
}

#viewAllBadges:hover {
    background: rgba(100, 200, 200, 0.22);
    border-color: #64c8c8;
    color: #ffffff;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Badge Cards */
.badge-card {
    background: #1e1e2f;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #4a4a6a;
    transition: transform 0.2s ease;
}

.badge-card:hover {
    transform: translateY(-3px);
}

.badge-card.featured {
    background: linear-gradient(135deg, #1e1e2f, #2a2a3a);
    border-left: 4px solid;
}

.badge-card.rarity-common { border-left-color: #b0b0b0; }
.badge-card.rarity-uncommon { border-left-color: #64c864; }
.badge-card.rarity-rare { border-left-color: #4682b4; }
.badge-card.rarity-epic { border-left-color: #a064c8; }
.badge-card.rarity-legendary { border-left-color: #dcdc64; }

.badge-icon {
    font-size: 32px;
    background: #2a2a3a;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-info h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 3px;
}

.badge-info p {
    color: #b0b0d0;
    font-size: 11px;
}

.badge-rarity {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    background: #2a2a3a;
    color: #b0b0b0;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
}

.full-history-modal {
    z-index: 2000;
}

.history-detail-modal:not(.full-history-modal) {
    z-index: 2100;
}

.modal-content {
    background: #2a2a3a;
    margin: 50px auto;
    padding: 0;
    width: 90%;
    max-width: 900px;
    border-radius: 15px;
    border: 2px solid #4a4a6a;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    background: #1e1e2f;
    padding: 20px;
    border-bottom: 2px solid #4a4a6a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px 15px 0 0;
}

.modal-header h2 {
    color: #dcdc64;
    font-size: 24px;
}

.modal-close {
    background: none;
    border: none;
    color: #b0b0d0;
    font-size: 28px;
    cursor: pointer;
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.profile-edit-modal-content {
    max-width: 460px;
}

.profile-edit-form {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.profile-edit-form label {
    display: grid;
    gap: 6px;
    color: #f0f0f0;
    font-weight: 700;
}

.profile-edit-form input {
    width: 100%;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    background: #1e1e2f;
    color: #f0f0f0;
    padding: 11px 12px;
    font: inherit;
}

.profile-edit-form input:focus {
    outline: 2px solid rgba(100, 200, 200, 0.24);
    border-color: #64c8c8;
}

.profile-edit-error {
    min-height: 20px;
    color: #ff8a8a;
    font-size: 14px;
}

.profile-edit-message {
    min-height: 20px;
    font-size: 14px;
}

.profile-edit-message.is-error {
    color: #ff8a8a;
}

.profile-edit-message.is-success {
    color: #64c864;
}

.profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Badge Filters */
.badge-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.badge-filter {
    padding: 8px 20px;
    background: #1e1e2f;
    border: 1px solid #4a4a6a;
    color: #b0b0d0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.badge-filter:hover,
.badge-filter.active {
    background: #4682b4;
    color: #fff;
    border-color: #4682b4;
}

/* Badge Gallery */
.badge-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.badge-card.gallery {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

.badge-card.gallery .badge-icon {
    width: 70px;
    height: 70px;
    font-size: 36px;
    margin-bottom: 10px;
}

.badge-card.gallery .badge-details {
    width: 100%;
}

.badge-card.gallery h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.badge-description {
    font-size: 12px;
    color: #b0b0d0;
    margin-bottom: 10px;
}

.badge-requirement {
    font-size: 12px;
    color: #64c864;
    margin-bottom: 10px;
}

.badge-progress {
    margin-top: 8px;
}

.progress-bar-small {
    width: 100%;
    height: 6px;
    background: #1e1e2f;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px;
}

.progress-fill-small {
    height: 100%;
    background: #64c864;
    border-radius: 3px;
}

.progress-text {
    font-size: 11px;
    color: #b0b0d0;
}

.badge-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
}

.badge-category {
    color: #b0b0d0;
    text-transform: capitalize;
}

.badge-rarity-tag {
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.badge-rarity-tag.common { background: #808080; color: #fff; }
.badge-rarity-tag.uncommon { background: #64c864; color: #1a1a2e; }
.badge-rarity-tag.rare { background: #4682b4; color: #fff; }
.badge-rarity-tag.epic { background: #a064c8; color: #fff; }
.badge-rarity-tag.legendary { background: #dcdc64; color: #1a1a2e; }

.badge-card.locked {
    opacity: 0.7;
}

.badge-card.locked .badge-icon {
    background: #2a2a3a;
    color: #808080;
}

.badge-card.locked .badge-details h4 {
    color: #808080;
}

.modal-footer {
    background: #1e1e2f;
    padding: 20px;
    border-top: 2px solid #4a4a6a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 15px 15px;
}

.badge-stats {
    color: #b0b0d0;
    font-size: 14px;
}

.badge-stat {
    font-weight: bold;
    color: #dcdc64;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-overview {
        padding-top: 76px;
    }

    .change-password-btn {
        top: 20px;
        right: 20px;
    }

    .profile-avatar-section {
        flex-direction: column;
        text-align: center;
    }
    
    .history-header,
    .history-entry {
        grid-template-columns: 80px 1fr 60px 80px 50px;
        font-size: 12px;
        padding: 10px;
    }
    
    .badge-gallery {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 20px auto;
    }
}


/* ===== SOCIAL PAGE STYLES ===== */
.social-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Mentor Section */
.mentor-section {
    margin-bottom: 40px;
}

.mentor-card {
    background: linear-gradient(135deg, #2a2a3a 0%, #1e1e2f 100%);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    gap: 30px;
    border: 2px solid #dcdc64;
    box-shadow: 0 8px 20px rgba(220, 220, 100, 0.2);
}

.mentor-avatar {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #dcdc64, #a064c8);
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
}

.mentor-emoji {
    font-size: 60px;
}

.mentor-info {
    flex: 1;
}

.mentor-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.mentor-header h3 {
    font-size: 24px;
    color: #dcdc64;
}

.mentor-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.mentor-badge.available {
    background: #64c864;
    color: #1a1a2e;
}

.mentor-badge.busy {
    background: #ff6b6b;
    color: #fff;
}

.mentor-badge.offline {
    background: #808080;
    color: #fff;
}

.mentor-title {
    color: #b0b0d0;
    font-size: 16px;
    margin-bottom: 15px;
}

.mentor-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.mentor-stat {
    text-align: center;
}

.mentor-stat .stat-label {
    display: block;
    color: #b0b0d0;
    font-size: 12px;
    margin-bottom: 5px;
}

.mentor-stat .stat-value {
    display: block;
    color: #dcdc64;
    font-size: 20px;
    font-weight: bold;
}

.mentor-expertise {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.expertise-tag {
    background: #1e1e2f;
    color: #64c8c8;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    border: 1px solid #4a4a6a;
}

.mentor-bio {
    color: #f0f0f0;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
}

.mentor-actions {
    display: flex;
    gap: 15px;
}

/* Friends Section */
.friends-section {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 40px;
    border: 1px solid #4a4a6a;
}

.friends-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.friend-count {
    color: #64c8c8;
    font-size: 14px;
    background: #1e1e2f;
    padding: 5px 15px;
    border-radius: 20px;
}

.friend-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.friend-card {
    background: #1e1e2f;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #4a4a6a;
    transition: transform 0.2s ease;
}

.friend-card:hover {
    transform: translateX(5px);
    border-color: #64c8c8;
}

.friend-avatar {
    position: relative;
    width: 50px;
    height: 50px;
}

.friend-emoji {
    font-size: 30px;
    width: 50px;
    height: 50px;
    background: #2a2a3a;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.friend-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    border: 2px solid #1e1e2f;
}

.friend-details {
    flex: 1;
}

.friend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.friend-name {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.friend-level {
    color: #dcdc64;
    font-size: 14px;
}

.friend-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 12px;
}

.friend-dept {
    color: #64c8c8;
}

.friend-mutual {
    color: #b0b0d0;
}

.friend-activity {
    color: #b0b0d0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.friend-actions {
    display: flex;
    gap: 8px;
}

.friend-action-btn {
    width: 32px;
    height: 32px;
    background: #2a2a3a;
    border: 1px solid #4a4a6a;
    border-radius: 16px;
    color: #b0b0d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.friend-action-btn:hover {
    background: #4682b4;
    color: #fff;
    border-color: #4682b4;
    transform: translateY(-2px);
}

.action-icon {
    font-size: 16px;
}

/* Social Actions */
.social-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    justify-content: center;
}

.btn-icon {
    font-size: 18px;
}

.btn-accent {
    background: #a064c8;
    color: #fff;
}

.btn-accent:hover {
    background: #b47ed4;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(160, 100, 200, 0.4);
}

/* Activity Section */
.activity-section {
    background: #2a2a3a;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #4a4a6a;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: #1e1e2f;
    border-radius: 10px;
    border-left: 4px solid;
    border-left-color: #4682b4;
}

.activity-item:nth-child(2n) {
    border-left-color: #a064c8;
}

.activity-item:nth-child(3n) {
    border-left-color: #64c864;
}

.activity-avatar {
    width: 40px;
    height: 40px;
    background: #2a2a3a;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.activity-content {
    flex: 1;
}

.activity-text {
    color: #f0f0f0;
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4;
}

.activity-text strong {
    color: #dcdc64;
}

.activity-time {
    color: #8080a0;
    font-size: 11px;
}

/* Modal Styles */
.modal-description {
    color: #b0b0d0;
    margin-bottom: 20px;
}

.scenario-select,
.friend-select {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto;
}

.scenario-option,
.friend-option {
    background: #1e1e2f;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #4a4a6a;
}

.scenario-option input[type="radio"],
.friend-option input[type="radio"] {
    display: none;
}

.scenario-option label,
.friend-option label {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    width: 100%;
}

.scenario-option input[type="radio"]:checked + label,
.friend-option input[type="radio"]:checked + label {
    color: #dcdc64;
}

.scenario-option:has(input:checked),
.friend-option:has(input:checked) {
    border-color: #dcdc64;
    background: #2a2a4a;
}

.scenario-name {
    flex: 1;
    color: #fff;
}

.scenario-difficulty {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.option-avatar {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: #2a2a3a;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-name {
    flex: 1;
    color: #fff;
}

.option-level {
    color: #dcdc64;
}

.mentor-message {
    margin-top: 20px;
}

.mentor-message label {
    display: block;
    color: #b0b0d0;
    margin-bottom: 8px;
}

.mentor-message textarea {
    width: 100%;
    background: #1e1e2f;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    resize: vertical;
}

/* Challenge Settings */
.challenge-settings {
    margin-top: 20px;
}

.challenge-settings label {
    display: block;
    color: #b0b0d0;
    margin-bottom: 8px;
}

.challenge-select {
    width: 100%;
    background: #1e1e2f;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    margin-bottom: 15px;
}

.challenge-settings textarea {
    width: 100%;
    background: #1e1e2f;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    resize: vertical;
}

/* Add Friend Search */
.friend-search {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.friend-search input {
    flex: 1;
    background: #1e1e2f;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    padding: 12px;
    color: #fff;
}

.search-results {
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #1e1e2f;
    border-radius: 8px;
    margin-bottom: 8px;
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-name {
    color: #fff;
    font-weight: bold;
}

.result-dept {
    color: #64c8c8;
    font-size: 12px;
}

.result-mutual {
    color: #b0b0d0;
    font-size: 11px;
}

.no-results {
    text-align: center;
    color: #b0b0d0;
    padding: 20px;
}

/* Scrollbar for friend list */
.friend-list::-webkit-scrollbar,
.scenario-select::-webkit-scrollbar,
.friend-select::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
    width: 8px;
}

.friend-list::-webkit-scrollbar-track,
.scenario-select::-webkit-scrollbar-track,
.friend-select::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track {
    background: #1e1e2f;
}

.friend-list::-webkit-scrollbar-thumb,
.scenario-select::-webkit-scrollbar-thumb,
.friend-select::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
    background: #4a4a6a;
    border-radius: 4px;
}

.friend-list::-webkit-scrollbar-thumb:hover,
.scenario-select::-webkit-scrollbar-thumb:hover,
.friend-select::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover {
    background: #5a5a7a;
}

/* Responsive */
@media (max-width: 768px) {
    .mentor-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .mentor-header {
        justify-content: center;
    }
    
    .mentor-stats {
        justify-content: center;
    }
    
    .mentor-expertise {
        justify-content: center;
    }
    
    .mentor-actions {
        justify-content: center;
    }
    
    .friend-card {
        flex-direction: column;
        text-align: center;
    }
    
    .friend-header {
        flex-direction: column;
        gap: 5px;
    }
    
    .friend-actions {
        justify-content: center;
    }
    
    .social-actions {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
    }
    
    .friend-search {
        flex-direction: column;
    }
}


/* ===== SCENARIO LIST STYLES ===== */
.scenarios-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.scenario-list-item {
    background: #2a2a3a;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #4a4a6a;
    transition: all 0.3s ease;
    position: relative;
}

.scenario-list-item:hover {
    transform: translateX(5px);
    border-color: #4682b4;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.scenario-list-item.locked {
    opacity: 0.7;
    background: #1e1e2f;
    border-color: #ff6b6b;
}

.scenario-list-item.locked:hover {
    transform: none;
    border-color: #ff6b6b;
}

.scenario-item-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.scenario-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.scenario-title h3 {
    color: #fff;
    font-size: 18px;
}

.difficulty-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.difficulty-badge.easy {
    background: #64c864;
    color: #1a1a2e;
}

.difficulty-badge.medium {
    background: #dcdc64;
    color: #1a1a2e;
}

.difficulty-badge.hard {
    background: #ff6b6b;
    color: #fff;
}

.scenario-reward {
    color: #64c8c8;
    font-weight: bold;
    font-size: 16px;
}

.scenario-description {
    color: #b0b0d0;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.scenario-progress {
    margin-bottom: 15px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    color: #b0b0d0;
    font-size: 13px;
    margin-bottom: 5px;
}

.best-score {
    color: #dcdc64;
    font-weight: bold;
}

.progress-bar-container {
    width: 100%;
    height: 14px;
    background: #1e1e2f;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-bg {
    width: 100%;
    height: 100%;
    background: #1e1e2f;
}

.progress-bar-fill {
    height: 200%;
    transition: width 0.3s ease;
    border-radius: 2px;
}

.unlock-requirement {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #ff6b6b;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
    border: 1px solid #ff6b6b;
    display: none;
}

.scenario-list-item.locked .unlock-requirement {
    display: block;
}

/* Level Progress Summary */
.level-summary {
    background: #1e1e2f;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #4a4a6a;
}

.level-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.level-label {
    color: #b0b0d0;
    font-size: 14px;
}

.level-value {
    color: #dcdc64;
    font-size: 24px;
    font-weight: bold;
}

.level-progress-bar {
    width: 100%;
    height: 10px;
    background: #2a2a3a;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #64c864, #dcdc64);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.level-exp {
    color: #b0b0d0;
    font-size: 13px;
    text-align: center;
}

.level-exp span {
    color: #64c8c8;
    font-weight: bold;
}

/* Update stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-card {
    background: #2a2a3a;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #4a4a6a;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #dcdc64;
    margin-bottom: 5px;
}

.stat-label {
    color: #b0b0d0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 768px) {
    .scenario-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .scenario-title {
        flex-wrap: wrap;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Add to your style.css file */

/* Badge icons in leaderboard */
.leaderboard-entry .badge {
    display: flex;
    gap: 4px;
    align-items: center;
}

.badge-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: help;
    transition: transform 0.2s ease;
}

.badge-icon-small:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.2);
}

/* Adjust column widths for leaderboard headers */
.leaderboard-header .badge {
    text-align: center;
}

/* Make sure the badge column has proper width */
.leaderboard-header .badge,
.leaderboard-entry .badge {
    min-width: 80px;
    text-align: center;
}


/* Create Your Own Scenario Section */
.create-scenario-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.create-scenario-card.locked {
    opacity: 0.7;
    filter: grayscale(0.5);
}

.create-scenario-card.unlocked {
    border-color: rgba(100, 200, 100, 0.3);
    box-shadow: 0 0 20px rgba(100, 200, 100, 0.1);
}

.create-scenario-preview {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.preview-icon {
    font-size: 48px;
    background: rgba(255, 255, 255, 0.1);
    width: 80px;
    height: 80px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-text h3 {
    margin: 0 0 8px 0;
    color: #ffffff;
}

.preview-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.create-features {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
}

.feature-icon {
    font-size: 20px;
}

.create-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unlock-message {
    color: #ffaa00;
    font-size: 14px;
}

/* Saved Custom Scenarios Section */
.custom-scenarios-list {
    margin-top: 20px;
}

.scenario-list-item.custom {
    border-left: 3px solid #9b59b6;
    position: relative;
}

.scenario-list-item.is-deleting {
    pointer-events: none;
    opacity: 0;
    transform: translateX(12px);
    border-color: rgba(255, 107, 107, 0.35);
}

.creator-badge {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 8px;
}

.scenario-meta {
    display: flex;
    gap: 20px;
    margin: 10px 0;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

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

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

.empty-custom-message {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}


/* Empty states */
.empty-history, .empty-badges, .empty-gallery {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    grid-column: 1 / -1;
}

/* History table improvements */
.history-table {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.history-header {
    display: grid;
    grid-template-columns: 100px 1fr 80px 100px 80px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.history-entry {
    display: grid;
    grid-template-columns: 100px 1fr 80px 100px 80px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.history-entry:hover {
    background: rgba(255, 255, 255, 0.02);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.history-scenario {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.history-score {
    font-weight: bold;
    font-size: 14px;
}

.history-exp {
    color: #64c864;
    font-size: 14px;
}

.history-badge {
    font-size: 16px;
    text-align: center;
}

.btn-view-all {
    margin-top: 16px;
    width: 100%;
}



/* Badge selection styles */
.badge-card.gallery.selectable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: 2px solid transparent;
}

.badge-card.gallery.selectable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.badge-card.gallery.selectable.selected {
    border-color: #64c864;
    background: rgba(100, 200, 100, 0.1);
}

.badge-select-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.select-checkbox {
    color: #64c864;
    font-weight: bold;
}

.badge-card.gallery.selectable.selected .badge-select-indicator {
    background: #64c864;
}

.badge-card.gallery.selectable.selected .select-checkbox {
    color: #ffffff;
}

/* Modal footer button spacing */
.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

#customizeBadgesBtn {
    margin-right: auto;
}

#saveBadgesBtn {
    background: #64c864;
}

#saveBadgesBtn:hover {
    background: #4cae4c;
}

/* Empty states */
.empty-history, .empty-badges, .empty-gallery {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    grid-column: 1 / -1;
}

/* History table improvements */
.history-table {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    overflow: hidden;
}

.history-header {
    display: grid;
    grid-template-columns: 100px 1fr 80px 100px 80px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.history-entry {
    display: grid;
    grid-template-columns: 100px 1fr 80px 100px 80px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.history-entry:hover {
    background: rgba(255, 255, 255, 0.02);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.history-scenario {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.history-score {
    font-weight: bold;
    font-size: 14px;
}

.history-exp {
    color: #64c864;
    font-size: 14px;
}

.history-badge {
    font-size: 16px;
    text-align: center;
}

.btn-view-all {
    margin-top: 16px;
    width: 100%;
}

/* Mentor actions */
.mentor-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.mentor-actions .btn {
    width: 100%;
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #4a90e2;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.mentor-actions .btn-icon {
    font-size: 16px;
}

/* Remove message option from challenge modal */
.challenge-settings textarea {
    display: none;
}

/* Social actions */
.social-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.action-btn {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-icon {
    font-size: 18px;
}

/* Friend badges */
.friend-badges {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.friend-badge-icon {
    font-size: 14px;
    opacity: 0.8;
}

/* Empty states */
.empty-friends, .no-friends, .no-results {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Friend option styling */
.friend-option {
    margin-bottom: 10px;
}

.friend-option label {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.friend-option label:hover {
    background: rgba(255, 255, 255, 0.1);
}

.friend-option input[type="radio"] {
    margin-right: 10px;
}

.option-avatar {
    font-size: 24px;
    margin-right: 10px;
}

.option-name {
    flex: 1;
    font-weight: 500;
}

.option-level {
    color: #64c864;
    margin-right: 10px;
}

.option-dept {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}



/* ===== ADMIN DASHBOARD STYLES ===== */

/* Graphs Container */
.graphs-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.graph-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.graph-title {
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
}

.graph-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bar Chart */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    height: 180px;
    gap: 10px;
}

.bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.bar {
    width: 100%;
    background: linear-gradient(to top, #4a90e2, #64c864);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.bar-value {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.bar-label {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Pie Chart Placeholder */
.pie-chart-placeholder {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        #64c864 0% 45%,
        #dcdc64 45% 80%,
        #ff6b6b 80% 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pie-chart-placeholder::after {
    content: '';
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(30, 30, 40, 0.9);
    position: absolute;
}

/* Outcome pie chart container and legend */
.pie-chart-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

#outcomePie {
    width: 200px;
    height: 200px;
}

.pie-chart-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
    font-size: 13px;
}

.pie-legend-item { display: flex; align-items: center; gap: 8px; }
.pie-chart-note {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.35;
}
.legend-color { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* Horizontal Bars */
.horizontal-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.horiz-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.horiz-label {
    width: 80px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.horiz-bar-bg {
    flex: 1;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.horiz-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a90e2, #64c864);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.horiz-value {
    width: 45px;
    font-size: 13px;
    color: #64c864;
    text-align: right;
}

/* Line Chart */
.line-chart-placeholder {
    width: 100%;
    height: 180px;
    position: relative;
}

.admin-line-chart {
    width: 100%;
    height: 180px;
}

.admin-line-axis {
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1;
}

.admin-line-grid {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.admin-score-line {
    fill: none;
    stroke: #64c864;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-line-point {
    fill: #4a90e2;
    stroke: #ffffff;
    stroke-width: 1.5;
}

.admin-line-label,
.admin-line-tick {
    fill: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}

.admin-line-value {
    fill: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 600;
}

.line-empty-state {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-align: center;
}

.line-svg {
    width: 100%;
    height: 120px;
}

.line-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* Current Weekly Card */
.current-weekly-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.current-weekly-section {
    margin-top: 24px;
}

.current-weekly-section .current-weekly-card {
    margin-bottom: 0;
}

.current-weekly-section .scheduled-weekly-card {
    margin-top: 18px;
}

.current-weekly-card h3 {
    margin: 0 0 15px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

.current-challenge-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.current-weekly-list {
    display: grid;
    gap: 12px;
}

.current-weekly-item {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr));
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.current-weekly-schedule {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

.current-weekly-empty {
    color: rgba(255, 255, 255, 0.68);
}

.challenge-detail {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.detail-value {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.title-detail .detail-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-value.difficulty {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.detail-value.difficulty.easy {
    background: rgba(100, 200, 100, 0.2);
    color: #64c864;
}

.detail-value.difficulty.medium {
    background: rgba(220, 220, 100, 0.2);
    color: #dcdc64;
}

.detail-value.difficulty.hard {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

/* Admin Creator Form */
.create-weekly-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.create-weekly-card h3 {
    margin: 0 0 20px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

.scenario-creator.admin-creator {
    max-width: 100%;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.form-input, .form-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-select option {
    background: #1e1e2f;
    color: #f0f0f0;
}

.form-select {
    color-scheme: dark;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #4a90e2;
    background: rgba(255, 255, 255, 0.1);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.creator-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.clear-form-modal-content {
    max-width: 480px;
}

.feature-weekly-actions {
    margin: 16px 0 20px;
}

.feature-weekly-schedule {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.feature-weekly-schedule h3 {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
}

.feature-weekly-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.45);
    background: rgba(255, 107, 107, 0.12);
    color: #ffb1b1;
    font-size: 13px;
    font-weight: 700;
}

.scenario-create-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.45);
    background: rgba(255, 107, 107, 0.12);
    color: #ffb1b1;
    font-size: 13px;
    font-weight: 700;
}

.generated-scenario-modal-content {
    max-width: 920px;
}

.choose-voice-modal-content {
    max-width: 780px;
}

.unsaved-scenario-edit-modal-content {
    max-width: 560px;
}

.generated-scenario-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.generated-scenario-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 96px;
    padding: 16px;
    border: 1px solid rgba(100, 200, 200, 0.18);
    border-radius: 8px;
    background: rgba(30, 30, 47, 0.72);
}

.generated-scenario-key {
    color: #dcdc64;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.generated-scenario-value {
    flex: 1;
    min-height: 40px;
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    white-space: pre-wrap;
}

.generated-scenario-field:nth-child(n + 5) {
    grid-column: 1 / -1;
}

.generated-scenario-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.generated-scenario-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.generated-scenario-edit-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(100, 200, 200, 0.38);
    border-radius: 6px;
    background: rgba(10, 10, 18, 0.82);
    color: rgba(255, 255, 255, 0.94);
    padding: 10px;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}

textarea.generated-scenario-edit-input {
    min-height: 120px;
}

.generated-scenario-edit-input:focus {
    outline: none;
    border-color: #64c8c8;
    box-shadow: 0 0 0 3px rgba(100, 200, 200, 0.16);
}

.voice-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.voice-choice-section {
    padding: 18px;
    border-radius: 8px;
    border: 1px solid rgba(100, 200, 200, 0.18);
    background: rgba(30, 30, 47, 0.72);
}

.voice-choice-section h3 {
    margin: 0 0 14px;
    color: #dcdc64;
    font-size: 14px;
}

.voice-choice-section h4 {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 800;
}

.client-voice-list {
    display: grid;
    gap: 16px;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

.client-voice-card {
    display: grid;
    gap: 14px;
}

.voice-edit-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.voice-edit-card-top h3 {
    margin: 0;
}

.remove-voice-client-btn {
    border: 1px solid rgba(255, 107, 107, 0.45);
    border-radius: 6px;
    background: #8f2630;
    color: #ffffff;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.remove-voice-client-btn:hover {
    background: #a8323d;
}

.voice-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.voice-edit-field {
    display: grid;
    gap: 8px;
}

.voice-edit-field span {
    color: #dcdc64;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.voice-edit-field-full {
    grid-column: 1 / -1;
}

.voice-add-client-row {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0 2px;
}

.voice-edit-warning {
    display: none;
    border: 1px solid rgba(255, 190, 88, 0.55);
    border-radius: 8px;
    background: rgba(217, 130, 43, 0.18);
    color: #ffd89a;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.voice-choice-warning {
    margin-top: 14px;
    border: 1px solid rgba(255, 107, 107, 0.45);
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.12);
    color: #ffb1b1;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.client-voice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-voice-header h3 {
    margin: 0;
    font-size: 18px;
}

.client-voice-header span {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(100, 200, 200, 0.24);
    background: rgba(100, 200, 200, 0.1);
    color: #64c8c8;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
}

.client-voice-description,
.voice-empty-state {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.5;
}

.voice-empty-state {
    padding: 18px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

.voice-option-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.voice-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.voice-option input {
    accent-color: #64c8c8;
}

@media (max-width: 760px) {
    .generated-scenario-preview {
        grid-template-columns: 1fr;
    }

    .generated-scenario-field:nth-child(n + 5) {
        grid-column: auto;
    }

    .voice-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* Section Description */
.section-description {
    color: rgba(255, 255, 255, 0.6);
    margin: -10px 0 20px 0;
    font-size: 14px;
}

/* Admin Custom Scenarios List */
#adminCustomScenarios {
    margin-top: 20px;
}

.scenario-database-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}

.rating-filter {
    position: relative;
}

.rating-filter summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 41px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}

.rating-filter summary::-webkit-details-marker {
    display: none;
}

.rating-filter summary::after {
    content: "▾";
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
}

#scenarioDatabaseRatingSummary {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.62);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rating-filter-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1e1e2f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.rating-filter-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    cursor: pointer;
}

.rating-filter-menu input {
    accent-color: #64c8c8;
}

.scenario-database-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.scenario-database-pagination .btn-secondary {
    background: #4682b4;
    color: #fff;
    border: 2px solid #4682b4;
}

.scenario-database-pagination .btn-secondary:hover {
    background: #5a9bd4;
    color: #fff;
    border: 2px solid #5a9bd4;
}

.scenario-database-pagination .btn-secondary:disabled {
    background: #888;
    border: 2px solid #888;
    color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.scenario-list-empty {
    padding: 22px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.68);
    text-align: center;
}

#adminCustomScenarios .scenario-list-item {
    position: relative;
    border-left: 3px solid #9b59b6;
}

#adminCustomScenarios .scenario-item-header {
    align-items: flex-start;
    gap: 12px;
}

.scenario-database-star {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.scenario-database-star.is-starred {
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.45);
    background: rgba(255, 209, 102, 0.12);
}

.scenario-database-star:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.scenario-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.scenario-status-badge.available {
    background: rgba(46, 204, 113, 0.16);
    color: #7bed9f;
    border: 1px solid rgba(46, 204, 113, 0.35);
}

.scenario-status-badge.weekly {
    background: rgba(255, 165, 2, 0.16);
    color: #ffbe58;
    border: 1px solid rgba(255, 165, 2, 0.38);
}

.scenario-status-badge.scheduled-weekly {
    background: rgba(100, 200, 200, 0.14);
    color: #8fe7e7;
    border: 1px solid rgba(100, 200, 200, 0.34);
}

.scenario-status-badge.system {
    background: rgba(116, 185, 255, 0.14);
    color: #9bd1ff;
    border: 1px solid rgba(116, 185, 255, 0.32);
}

#adminCustomScenarios .custom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.feature-challenge-btn {
    background: #9b59b6;
}

.feature-challenge-btn:hover {
    background: #8e44ad;
}

.feature-available-btn {
    background: #24543a;
    color: #ffffff;
}

.feature-available-btn:hover {
    background: #2f6b4a;
}

.remove-active-btn {
    background: #d9822b;
    color: #111827;
}

.remove-active-btn:hover {
    background: #f0a04b;
}

.delete-scenario-btn,
.btn-danger {
    background: #8f2630;
    color: #ffffff;
    border: 1px solid rgba(255, 107, 107, 0.35);
}

.delete-scenario-btn:hover,
.btn-danger:hover {
    background: #a8323d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .graphs-container {
        grid-template-columns: 1fr;
    }

    .scenario-database-toolbar {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .current-challenge-info {
        grid-template-columns: 1fr;
    }

    .current-weekly-item {
        grid-template-columns: 1fr;
    }
}


/* ===== ADMIN OBJECTIVES SYSTEM STYLES ===== */

/* Objectives Header */
.objectives-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.objectives-header label {
    margin-bottom: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* Template Preview */
.template-preview {
    background: rgba(100, 200, 100, 0.1);
    border: 1px solid rgba(100, 200, 100, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.template-content h4 {
    margin: 0 0 10px 0;
    color: #64c864;
    font-size: 14px;
}

.template-example, .template-format {
    margin-bottom: 15px;
}

.template-example p, .template-format p {
    margin: 0 0 5px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
}

.template-example ul, .template-format ul {
    margin: 0;
    padding-left: 20px;
}

.template-example li, .template-format li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.6;
}

/* Objectives Input */
.objectives-input {
    font-family: inherit;
    line-height: 1.6;
}

/* Quick Inserts */
.quick-inserts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.quick-insert-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.btn-tiny {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tiny:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Objectives Modal */
.objectives-display {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.objectives-display h4 {
    margin: 0 0 15px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
}

.objectives-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.objective-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.objective-bullet {
    color: #64c864;
    font-weight: bold;
}

.scenario-info {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scenario-info h3 {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

.scenario-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

.modal-actions {
    margin-top: 20px;
    text-align: center;
}

#useTheseObjectivesBtn {
    min-width: 200px;
}

/* Form Actions */
.creator-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

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

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

/* View Objectives Button */
.view-objectives-btn {
    background: rgba(100, 200, 100, 0.1);
    border-color: rgba(100, 200, 100, 0.3);
    color: #64c864;
}

.view-objectives-btn:hover {
    background: rgba(100, 200, 100, 0.2);
    border-color: #64c864;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quick-inserts {
        justify-content: flex-start;
    }
    
    .btn-tiny {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .creator-actions {
        flex-direction: column;
    }
    
    .creator-actions .btn {
        width: 100%;
    }
}


/* Level display with prestige */
.level-display {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.prestige-level {
    font-size: 20px;
    color: #ffaa00;
    background: rgba(255, 170, 0, 0.15);
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
}


/* Share Modal Scenario List */
#scenarioSelect {
    max-height: 400px;
    overflow-y: auto;
    margin: 15px 0;
}

.scenario-option {
    margin-bottom: 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.scenario-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.scenario-option input[type="radio"] {
    display: none;
}

.scenario-option label {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scenario-option input[type="radio"]:checked + label {
    background: rgba(100, 200, 100, 0.15);
    border-color: #64c864;
    box-shadow: 0 0 10px rgba(100, 200, 100, 0.2);
}

.scenario-name {
    flex: 1;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.scenario-meta {
    display: flex;
    gap: 15px;
    margin-right: 15px;
    align-items: center;
}

.scenario-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.scenario-score {
    font-weight: bold;
    min-width: 45px;
    text-align: right;
}

.scenario-difficulty {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scenario-difficulty.easy {
    background: rgba(100, 200, 100, 0.2);
    color: #64c864;
}

.scenario-difficulty.medium {
    background: rgba(220, 220, 100, 0.2);
    color: #dcdc64;
}

.scenario-difficulty.hard {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.no-scenarios {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}


/* Badge Progress Indicators */
.badge-progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    font-weight: 500;
}

.badge-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.badge-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a90e2, #64c864);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.badge-progress-container {
    margin-top: 8px;
}

.progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-top: 4px;
}

.progress-text.earned {
    color: #64c864;
    font-weight: 600;
}

/* Featured badge styling */
.badge-card.featured {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.badge-card.featured:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.badge-card.featured .badge-icon {
    font-size: 36px;
    min-width: 50px;
    text-align: center;
}

.badge-card.featured .badge-info {
    flex: 1;
}

.badge-card.featured .badge-info h4 {
    margin: 0 0 4px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

.badge-card.featured .badge-info p {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.4;
}

.badge-card.featured .badge-rarity {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-card.featured .badge-rarity.common {
    background: rgba(200, 200, 200, 0.2);
    color: #c8c8c8;
}

.badge-card.featured .badge-rarity.uncommon {
    background: rgba(100, 200, 100, 0.2);
    color: #64c864;
}

.badge-card.featured .badge-rarity.rare {
    background: rgba(100, 200, 200, 0.2);
    color: #64c8c8;
}

.badge-card.featured .badge-rarity.epic {
    background: rgba(200, 100, 200, 0.2);
    color: #c864c8;
}

.badge-card.featured .badge-rarity.legendary {
    background: rgba(255, 200, 100, 0.2);
    color: #ffc864;
}

/* Gallery badge styling */
.badge-card.gallery {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

.badge-card.gallery:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.badge-card.gallery .badge-icon {
    font-size: 32px;
    min-width: 45px;
    text-align: center;
}

.badge-card.gallery .badge-details {
    flex: 1;
}

.badge-card.gallery .badge-details h4 {
    margin: 0 0 4px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
}

.badge-card.gallery .badge-description {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.4;
}

.badge-card.gallery .badge-meta {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.badge-card.gallery .badge-category {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: capitalize;
}

.badge-card.gallery .badge-rarity-tag {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-card.gallery .badge-rarity-tag.common {
    background: rgba(200, 200, 200, 0.15);
    color: #c8c8c8;
}

.badge-card.gallery .badge-rarity-tag.uncommon {
    background: rgba(100, 200, 100, 0.15);
    color: #64c864;
}

.badge-card.gallery .badge-rarity-tag.rare {
    background: rgba(100, 200, 200, 0.15);
    color: #64c8c8;
}

.badge-card.gallery .badge-rarity-tag.epic {
    background: rgba(200, 100, 200, 0.15);
    color: #c864c8;
}

.badge-card.gallery .badge-rarity-tag.legendary {
    background: rgba(255, 200, 100, 0.15);
    color: #ffc864;
}

/* Locked badge styling */
.badge-card.locked {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.badge-card.locked .badge-icon.locked-icon {
    opacity: 0.5;
}

/* Selection mode styling */
.badge-card.selectable {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.badge-card.selectable:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.badge-card.selectable.selected {
    border-color: #64c864;
    background: rgba(100, 200, 100, 0.1);
}

.badge-select-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-checkbox {
    color: #64c864;
    font-weight: bold;
    font-size: 14px;
}

.badge-card.selectable.selected .badge-select-indicator {
    background: #64c864;
}

.badge-card.selectable.selected .select-checkbox {
    color: white;
}

/* Badge Stat Display */
.badge-stat {
    font-size: 13px;
    color: #64c864;
    margin-top: 5px;
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(100, 200, 100, 0.1);
    border-radius: 4px;
    display: inline-block;
}

.badge-stat-container {
    margin: 10px 0;
}

.badge-stat-large {
    font-size: 14px;
    color: #64c864;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(100, 200, 100, 0.15);
    border-radius: 6px;
    border-left: 3px solid #64c864;
}

.badge-requirement {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.req-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 6px;
}

.badge-progress-container {
    margin-top: 6px;
}

.badge-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.badge-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a90e2, #64c864);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    text-align: right;
}

.progress-text.earned {
    color: #64c864;
    font-weight: 600;
    text-align: left;
}

/* Featured badge stat styling */
.badge-card.featured .badge-stat {
    font-size: 13px;
    margin-top: 8px;
    display: inline-block;
}


/* Badge Details Modal */
.badge-detail-container {
    padding: 10px;
}

.badge-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-detail-icon {
    font-size: 64px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 2px solid transparent;
}

.badge-detail-icon.common {
    border-color: #c8c8c8;
    box-shadow: 0 0 15px rgba(200, 200, 200, 0.3);
}

.badge-detail-icon.uncommon {
    border-color: #64c864;
    box-shadow: 0 0 15px rgba(100, 200, 100, 0.3);
}

.badge-detail-icon.rare {
    border-color: #64c8c8;
    box-shadow: 0 0 15px rgba(100, 200, 200, 0.3);
}

.badge-detail-icon.epic {
    border-color: #c864c8;
    box-shadow: 0 0 15px rgba(200, 100, 200, 0.3);
}

.badge-detail-icon.legendary {
    border-color: #ffc864;
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.4);
}

.badge-detail-title h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.95);
}

.badge-detail-owner {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.badge-detail-description {
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.badge-detail-stats {
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.badge-stat-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.badge-stat-row:last-child {
    border-bottom: none;
}

.badge-stat-label {
    width: 100px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.badge-stat-value {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.badge-detail-owner-stats {
    margin-bottom: 25px;
}

.badge-detail-owner-stats h4 {
    margin: 0 0 15px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

.owner-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 10px;
}

.owner-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.owner-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.owner-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #64c864;
}

.badge-detail-achievement {
    text-align: center;
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
}

.achievement-badge.earned {
    background: rgba(100, 200, 100, 0.2);
    color: #64c864;
    border: 1px solid #64c864;
}

.achievement-badge.locked {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}

/* Clickable badge styling */
.badge-icon-small.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.badge-icon-small.clickable:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Modal close button styling */
#closeBadgeDetailsBtn {
    min-width: 100px;
}


/* Message Section Styling */
.message-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.message-section label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

.message-input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
}

.message-input:focus {
    outline: none;
    border-color: #4a90e2;
    background: rgba(255, 255, 255, 0.1);
}

.message-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.message-hint {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}


.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 18%, rgba(100, 200, 200, 0.16), transparent 26%),
        radial-gradient(circle at 86% 14%, rgba(220, 220, 100, 0.12), transparent 28%),
        linear-gradient(135deg, #15182d 0%, #1e2b46 55%, #172033 100%);
    color: #f7f9ff;
}

.auth-shell {
    width: min(480px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 48px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-panel,
.auth-aside {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.auth-panel {
    width: 100%;
    padding: 40px;
    background: rgba(25, 30, 50, 0.92);
    border-radius: 16px;
    backdrop-filter: blur(18px);
}

.auth-brand {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.auth-mark {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #64c8c8, #4682b4);
    color: #10162a;
    font-weight: 800;
    letter-spacing: 0;
}

.auth-kicker {
    margin: 0 0 4px;
    color: #64c8c8;
    font-size: 13px;
    font-weight: 700;
}

.auth-panel h1 {
    margin: 0;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.1;
}

.auth-intro {
    color: #b8c3dd;
    line-height: 1.6;
    margin: 0 0 26px;
}

.auth-panel .form-group {
    margin-bottom: 18px;
}

.auth-panel .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #dfe7f8;
    font-size: 14px;
    font-weight: 700;
}

.field-note {
    display: block;
    margin-top: 4px;
    color: #dcdc64;
    font-size: 12px;
    font-weight: 700;
}

.auth-panel .form-group input {
    width: 100%;
    min-height: 52px;
    padding: 14px 15px;
    border: 1px solid rgba(184, 195, 221, 0.24);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
        rgba(8, 12, 24, 0.58);
    color: #ffffff;
    font-size: 16px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.auth-panel .form-group input::placeholder {
    color: rgba(184, 195, 221, 0.58);
}

.auth-panel .form-group input:focus {
    border-color: #64c8c8;
    background: rgba(8, 12, 24, 0.68);
    box-shadow:
        0 0 0 4px rgba(100, 200, 200, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.auth-panel .btn-full {
    min-height: 50px;
    margin-top: 6px;
    background: linear-gradient(135deg, #64c8c8, #4682b4);
    color: #10162a;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(70, 130, 180, 0.24);
}

.auth-panel .btn-full:hover {
    background: linear-gradient(135deg, #79dddd, #5a9ed4);
    color: #10162a;
}

.auth-switch {
    margin: 22px 0 0;
    color: #b8c3dd;
    text-align: center;
}

.auth-switch a {
    color: #dcdc64;
    font-weight: 800;
    text-decoration: none;
}

.auth-switch a:hover {
    color: #f0f08a;
    text-decoration: underline;
}

.auth-aside {
    display: none;
    min-height: 430px;
    padding: 42px;
    border-radius: 14px;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(180deg, rgba(70, 130, 180, 0.18), rgba(160, 100, 200, 0.14)),
        rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
}

.auth-aside::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    pointer-events: none;
}

.auth-aside-label {
    position: relative;
    margin: 0 0 14px;
    color: #dcdc64;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.auth-aside h2 {
    position: relative;
    max-width: 520px;
    margin: 0 0 28px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.18;
}

.auth-aside-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.auth-aside-grid span {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #dfe7f8;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.error {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.12);
    color: #ffb8b8;
    font-weight: 700;
}

.voice-option.selected {
    border: 2px solid #58e6e6;
    background: rgba(88, 230, 230, 0.16);
    box-shadow: 0 0 0 2px rgba(88, 230, 230, 0.18);
}

.voice-option.selected span {
    color: #ffffff;
    font-weight: 800;
}

.voice-option input[type="radio"]:checked {
    accent-color: #58e6e6;
}

.voice-option input[type="radio"]:disabled {
    opacity: 1;
}

.selected-voice-summary {
    display: inline-block;
    margin: 8px 0 18px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(88, 230, 230, 0.18);
    color: #58e6e6;
    font-weight: 800;
}

@media (max-width: 860px) {
    .auth-shell {
        width: min(480px, calc(100% - 28px));
        padding: 28px 0;
    }
}

@media (max-width: 520px) {
    .auth-panel {
        padding: 26px;
    }

    .auth-brand {
        align-items: flex-start;
    }

    .auth-panel h1 {
        font-size: 26px;
    }

    .auth-aside-grid {
        grid-template-columns: 1fr;
    }
}


.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background: #fff;
    min-width: 120px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 4px;
}
.dropdown-content a {
    color: #333;
    padding: 10px 16px;
    display: block;
    text-decoration: none;
}
.dropdown-content a:hover { background: #f1f1f1; }
.dropdown:hover .dropdown-content { display: block; }


/* ---- User area in navbar ---- */
.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Circular avatar (shows the first letter) */
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #4a90d9;      /* your brand color */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown menu (hidden until hover) */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 45px;
    background: #fff;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border-radius: 6px;
    z-index: 100;
    padding: 5px 0;
}

.dropdown-content a {
    color: #333;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
}
.dropdown-content a:hover {
    background: #f5f5f5;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* ---- Login / Sign up links ---- */
.nav-link.login-link,
.nav-link.signup-link {
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    color: #fff;
    background-color: #4a90d9;
    transition: background 0.2s;
}
.nav-link.signup-link {
    background-color: #64c864;
}
.nav-link.login-link:hover {
    background-color: #3a7bc8;
}
.nav-link.signup-link:hover {
    background-color: #4aaf4a;
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 16px;
  font-size: 14px;
  color: inherit;
}

.remember-row input {
  width: auto;
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* The actual dropdown menu – hidden by default */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;          /* directly under the avatar/username */
  margin-top: 8px;
  background: #fff;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 130px;
  z-index: 1000;
  padding: 4px 0;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Links inside dropdown */
.dropdown-content a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  font-size: 0.95rem;
}
.dropdown-content a:hover {
  background: #f0f0f0;
}

/* Server-backed profile scenario history */
.history-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.history-section-head .section-subtitle {
    margin-bottom: 0;
}

.history-view-tabs {
    display: inline-flex;
    padding: 4px;
    border: 1px solid rgba(100, 200, 200, 0.24);
    border-radius: 8px;
    background: rgba(30, 30, 47, 0.75);
}

.history-view-tab {
    border: 0;
    background: transparent;
    color: #b0b0d0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.history-view-tab.active {
    background: rgba(100, 200, 200, 0.18);
    color: #f0ffff;
}

.scenario-history .history-header,
.scenario-history .history-entry {
    grid-template-columns: 34px 92px minmax(180px, 1fr) 76px 96px 250px;
    align-items: center;
    gap: 10px;
}

.history-star {
    display: flex;
    justify-content: center;
}

.history-star-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: transparent;
    -webkit-text-stroke: 1.3px #b0b0d0;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.history-star-btn:hover,
.history-star-btn.is-starred {
    color: #dcdc64;
    -webkit-text-stroke-color: #dcdc64;
}

.history-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.history-action-btn {
    border: 1px solid rgba(100, 200, 200, 0.35);
    background: rgba(100, 200, 200, 0.12);
    color: #dffafa;
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.history-action-btn:hover {
    background: rgba(100, 200, 200, 0.22);
    border-color: #64c8c8;
}

.history-action-btn.is-disabled,
.history-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    color: #b0b0d0;
    border-color: rgba(176, 176, 208, 0.22);
    background: rgba(176, 176, 208, 0.08);
}

.full-history-modal .modal-content {
    max-width: 1120px;
}

.full-history-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 170px auto auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.full-history-filters label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #b0b0d0;
    font-size: 12px;
    font-weight: 800;
}

.full-history-filters input[type="search"],
.full-history-filters input[type="date"] {
    min-height: 38px;
    border: 1px solid rgba(100, 200, 200, 0.28);
    border-radius: 8px;
    background: #1e1e2f;
    color: #fff;
    padding: 8px 10px;
}

.full-history-check {
    flex-direction: row !important;
    align-items: center;
    min-height: 38px;
}

.full-history-check input {
    width: 16px;
    height: 16px;
}

.full-history-table {
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

.full-history-table .history-header,
.full-history-table .history-entry {
    grid-template-columns: 34px 112px minmax(220px, 1fr) 76px 82px 250px;
}

.modal-subtitle {
    margin: 6px 0 0;
    color: #b0b0d0;
    font-size: 13px;
}

.history-detail-modal .modal-content {
    max-width: 880px;
}

.profile-case-section {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-case-section.featured {
    border-color: rgba(100, 200, 200, 0.28);
    background: rgba(100, 200, 200, 0.08);
}

.profile-case-section h3 {
    margin: 0 0 10px;
    color: #dcdc64;
}

.profile-case-section div {
    color: #f0f0f0;
    line-height: 1.6;
    white-space: pre-wrap;
}

.profile-chat-log {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-chat-turn {
    max-width: 86%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-chat-turn.user {
    align-self: flex-end;
    background: rgba(70, 130, 180, 0.18);
    border-color: rgba(70, 130, 180, 0.35);
}

.profile-chat-turn.model {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
}

.profile-chat-role {
    margin-bottom: 8px;
    color: #64c8c8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-chat-text {
    color: #f0f0f0;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Analytics dashboard */
.analytics-header {
    position: relative;
    padding-bottom: 42px;
}

.analytics-back-link {
    position: absolute;
    left: 24px;
    top: 24px;
    border: 1px solid rgba(100, 200, 200, 0.32);
    border-radius: 8px;
    background: rgba(30, 30, 47, 0.8);
    color: #dffafa;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.analytics-back-link:hover {
    background: rgba(100, 200, 200, 0.16);
    border-color: #64c8c8;
}

.analytics-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.analytics-toolbar,
.analytics-panel,
.analytics-kpi {
    border: 1px solid rgba(100, 200, 200, 0.18);
    background: rgba(42, 42, 58, 0.96);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}

.analytics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 12px;
}

.analytics-toolbar h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 26px;
}

.analytics-toolbar p,
.analytics-panel-head p {
    margin: 0;
    color: #b0b0d0;
    line-height: 1.45;
}

.analytics-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.analytics-toolbar select {
    min-height: 42px;
    min-width: 170px;
    border: 1px solid rgba(100, 200, 200, 0.28);
    border-radius: 8px;
    background: #1e1e2f;
    color: #ffffff;
    padding: 8px 12px;
    font-weight: 700;
}

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
}

.analytics-kpi {
    min-height: 132px;
    padding: 18px;
    border-radius: 10px;
}

.analytics-kpi span,
.analytics-kpi small {
    display: block;
    color: #b0b0d0;
}

.analytics-kpi span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.analytics-kpi strong {
    display: block;
    margin: 12px 0 8px;
    color: #dcdc64;
    font-size: 30px;
}

.analytics-kpi small {
    line-height: 1.35;
}

.analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 24px;
}

.analytics-layout-wide {
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
}

.analytics-panel {
    padding: 24px;
    border-radius: 12px;
}

.analytics-panel-large {
    min-height: 310px;
}

.analytics-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.analytics-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.analytics-panel-head h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 20px;
}

.analytics-chip {
    flex: 0 0 auto;
    border: 1px solid rgba(220, 220, 100, 0.35);
    border-radius: 999px;
    background: rgba(220, 220, 100, 0.1);
    color: #f2f2a0;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 900;
}

.domain-bars {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.domain-bar-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: 800;
}

.domain-bar-meta strong {
    color: #dcdc64;
}

.domain-bar-track {
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #1e1e2f;
}

.domain-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
}

.domain-bar-fill.heart {
    background: linear-gradient(90deg, #ff6b6b, #f7a1a1);
}

.domain-bar-fill.head {
    background: linear-gradient(90deg, #64c8c8, #8be0e0);
}

.domain-bar-fill.hands {
    background: linear-gradient(90deg, #64c864, #dcdc64);
}

.bars-detail-panel {
    margin-top: 0;
}

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

.bars-detail-domain + .bars-detail-domain {
    margin-top: 22px;
}

.bars-detail-domain h4 {
    margin: 0 0 12px;
    color: #dcdc64;
    font-size: 15px;
}

.bars-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bars-detail-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 14px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(100, 200, 200, 0.14);
    border-radius: 8px;
    background: #1e1e2f;
}

.bars-detail-copy strong,
.bars-detail-copy span {
    display: block;
}

.bars-detail-copy strong {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
}

.bars-detail-copy span {
    margin-top: 5px;
    color: #b0b0d0;
    font-size: 12px;
}

.bars-detail-score b {
    display: block;
    margin-bottom: 7px;
    color: #dcdc64;
    text-align: right;
}

.bars-detail-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.bars-detail-track div {
    height: 100%;
    border-radius: inherit;
}

.bars-detail-track .heart {
    background: linear-gradient(90deg, #ff6b6b, #f7a1a1);
}

.bars-detail-track .head {
    background: linear-gradient(90deg, #64c8c8, #8be0e0);
}

.bars-detail-track .hands {
    background: linear-gradient(90deg, #64c864, #dcdc64);
}

.focus-card {
    padding: 18px;
    border-radius: 10px;
    background: #1e1e2f;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.focus-card strong {
    display: block;
    margin-bottom: 8px;
    color: #dcdc64;
    font-size: 28px;
}

.focus-domain {
    display: inline-flex;
    margin-bottom: 12px;
    border: 1px solid rgba(100, 200, 200, 0.24);
    border-radius: 999px;
    background: rgba(100, 200, 200, 0.1);
    color: #64c8c8;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.focus-score {
    margin-bottom: 14px !important;
}

.focus-card h4 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.35;
}

.focus-card p {
    margin: 0;
    color: #d8d8ea;
    font-size: 13px;
    line-height: 1.55;
}

.focus-metric {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.focus-metric span {
    color: #b0b0d0;
}

.focus-metric b {
    color: #ffffff;
    text-align: right;
}

.analytics-table-wrap {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 830px;
}

.analytics-table th,
.analytics-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.analytics-table th {
    color: #dcdc64;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #1e1e2f;
}

.analytics-table td {
    color: #f0f0f0;
}

.analytics-table td:first-child strong,
.analytics-table td:first-child span {
    display: block;
}

.analytics-table td:first-child span {
    margin-top: 4px;
    color: #b0b0d0;
    font-size: 13px;
}

/* Admin user management */
.admin-users-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-users-page-actions {
    display: flex;
    justify-content: flex-start;
}

.admin-users-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
}

.admin-users-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    width: 100%;
}

.admin-users-filters input {
    min-height: 42px;
    border: 1px solid rgba(100, 200, 200, 0.28);
    border-radius: 8px;
    background: #1e1e2f;
    color: #ffffff;
    padding: 8px 12px;
    font-weight: 700;
}

.admin-users-filters input::placeholder {
    color: #8585a6;
}

.admin-users-filter-toggles {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.admin-users-filter-toggles label,
.profile-edit-form .admin-user-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f0f0f0;
    font-weight: 800;
}

.admin-users-filter-toggles input,
.profile-edit-form .admin-user-checkbox-row input {
    width: 18px;
    height: 18px;
    accent-color: #64c8c8;
}

.admin-users-table th:last-child,
.admin-users-table td:last-child {
    text-align: right;
}

.admin-user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-user-actions .btn {
    padding: 7px 11px;
    min-height: 34px;
    font-size: 12px;
}

.admin-user-actions .delete-user-btn {
    border-color: rgba(255, 107, 107, 0.42);
    color: #ffd0d0;
}

.admin-user-actions .delete-user-btn:hover {
    background: rgba(255, 107, 107, 0.14);
    border-color: #ff8a8a;
}

.admin-user-modal-content {
    max-width: 520px;
}

.admin-user-delete-body {
    display: grid;
    gap: 10px;
    padding: 20px;
    color: #f0f0f0;
}

.admin-user-delete-body p {
    margin: 0;
    line-height: 1.45;
}

.admin-user-delete-warning {
    color: #ffb8b8;
    font-weight: 800;
}

.admin-user-delete-actions {
    padding: 0 20px 20px;
}

.delete-user-confirm-btn {
    background: #8f2f3f;
    border-color: #ff8a8a;
}

.delete-user-confirm-btn:hover {
    background: #a63a4d;
    border-color: #ffd0d0;
}

.admin-users-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    color: #b0b0d0;
    font-weight: 800;
}

.trend-up {
    color: #64c864;
    font-weight: 900;
}

.trend-down {
    color: #ff8f8f;
    font-weight: 900;
}

.score-distribution,
.recent-attempts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.distribution-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
}

.distribution-row span {
    color: #b0b0d0;
    font-weight: 800;
}

.distribution-row strong {
    color: #ffffff;
    text-align: right;
}

.distribution-track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #1e1e2f;
}

.distribution-track div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4682b4, #dcdc64);
}

.timeline-chart,
.attempt-chart,
.rubric-insights {
    min-height: 220px;
}

.analytics-line-chart,
.analytics-bar-chart,
.analytics-horizontal-chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.chart-axis {
    stroke: rgba(176, 176, 208, 0.45);
    stroke-width: 1.5;
}

.chart-guide {
    stroke: rgba(220, 220, 100, 0.22);
    stroke-width: 1;
    stroke-dasharray: 5 5;
}

.chart-grid {
    stroke: rgba(176, 176, 208, 0.12);
    stroke-width: 1;
}

.chart-area {
    fill: rgba(100, 200, 200, 0.12);
}

.chart-line {
    fill: none;
    stroke: #64c8c8;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(100, 200, 200, 0.35));
}

.chart-point {
    fill: #dcdc64;
    stroke: #1e1e2f;
    stroke-width: 3;
}

.chart-label {
    fill: #b0b0d0;
    font-size: 12px;
    font-weight: 800;
}

.chart-label-left {
    fill: #f0f0f0;
}

.chart-tick {
    fill: #8f96b9;
    font-size: 11px;
    font-weight: 800;
}

.chart-value {
    fill: #dcdc64;
    font-size: 12px;
    font-weight: 900;
}

.chart-bar {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
}

.distribution-bar {
    fill: url("#distributionGradient");
}

.attempt-bar {
    fill: #64c8c8;
}

.analytics-bar-chart .distribution-bar {
    fill: #64c8c8;
}

.attempt-chart {
    overflow-x: auto;
}

.attempt-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1fr) 36px;
    gap: 12px;
    align-items: center;
}

.attempt-label strong,
.attempt-label span {
    display: block;
}

.attempt-label strong {
    color: #ffffff;
    font-size: 13px;
}

.attempt-label span {
    margin-top: 3px;
    color: #b0b0d0;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attempt-track {
    height: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: #1e1e2f;
}

.attempt-track div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a064c8, #64c8c8);
}

.attempt-row b {
    color: #dcdc64;
    text-align: right;
}

.rubric-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.rubric-card {
    padding: 16px;
    border: 1px solid rgba(100, 200, 200, 0.18);
    border-radius: 10px;
    background: #1e1e2f;
}

.rubric-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rubric-card-head span {
    color: #64c8c8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.rubric-card-head strong {
    color: #dcdc64;
    white-space: nowrap;
}

.rubric-card h4 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.35;
}

.rubric-card p {
    margin: 0 0 12px;
    color: #d8d8ea;
    line-height: 1.5;
    font-size: 13px;
}

.coaching-example {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(100, 200, 200, 0.08);
    border: 1px solid rgba(100, 200, 200, 0.16);
}

.coaching-example span,
.coaching-example em {
    color: #b0b0d0;
    font-size: 12px;
    line-height: 1.45;
}

.coaching-example b {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.45;
}

.coaching-example em {
    font-style: normal;
}

.recent-attempt-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.recent-attempt-row strong,
.recent-attempt-row span {
    display: block;
}

.recent-attempt-row strong {
    color: #ffffff;
}

.recent-attempt-row span {
    margin-top: 4px;
    color: #b0b0d0;
    font-size: 13px;
}

.recent-attempt-row b {
    color: #dcdc64;
    font-size: 20px;
}

.analytics-loading {
    grid-column: 1 / -1;
    padding: 24px;
    border-radius: 10px;
    background: #2a2a3a;
    color: #b0b0d0;
    text-align: center;
}

/* =============================================
   Profile Chat — Custom Audio Player
   ============================================= */

.profile-chat-audio {
    margin-bottom: 1.2rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Hidden real audio element */
#profileAudioEl {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

.pca-player {
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: none;
}

/* ── Controls row ── */
.pca-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Buttons ── */
.pca-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #e0e0f0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.pca-btn:hover  { color: #ffffff; transform: scale(1.1); }
.pca-btn:active { transform: scale(0.95); }

.pca-play-btn svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 6px rgba(130, 160, 255, 0.5));
}
.pca-play-btn:hover svg {
    filter: drop-shadow(0 0 10px rgba(130, 160, 255, 0.8));
}

.pca-skip-btn svg {
    width: 22px;
    height: 22px;
    opacity: 0.85;
}
.pca-skip-btn:hover svg { opacity: 1; }

.pca-vol-btn svg {
    width: 20px;
    height: 20px;
    opacity: 0.75;
}
.pca-vol-btn:hover svg { opacity: 1; }

/* ── Time labels ── */
.pca-time {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: #9090b0;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Progress bar ── */
.pca-progress-wrap {
    flex: 1;
    cursor: pointer;
    padding: 8px 0;          /* larger hit area */
    position: relative;
    touch-action: none;
}
.pca-progress-bg {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: visible;
    transition: height 0.15s;
}
.pca-progress-wrap:hover .pca-progress-bg {
    height: 6px;
}
.pca-progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, #6e8efb, #a777e3);
    border-radius: 4px;
    pointer-events: none;
    transition: width 0.1s linear;
}
.pca-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(110, 142, 251, 0.8);
    opacity: 1;
    transition: opacity 0.15s, left 0.1s linear;
}

/* ── Loading status ── */
.pca-loading-status {
    margin-left: 12px;
    color: #8f96b9;
    font-size: 0.75rem;
    min-width: 88px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Volume bar ── */
.pca-vol-wrap {
    width: 70px;
    cursor: pointer;
    padding: 8px 0;
    flex-shrink: 0;
}
.pca-vol-bg {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
.pca-vol-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    pointer-events: none;
    transition: width 0.08s;
}
.pca-vol-wrap:hover .pca-vol-bg { height: 6px; }

/* ── Responsive: hide volume on very small screens ── */
@media (max-width: 480px) {
    .pca-vol-wrap,
    .pca-vol-btn { display: none; }
    .pca-skip-btn svg { width: 20px; height: 20px; }
}

@media (max-width: 760px) {
    .analytics-cta,
    .analytics-toolbar,
    .analytics-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .analytics-panel-actions {
        justify-content: flex-start;
    }

    .analytics-toolbar-actions {
        justify-content: stretch;
    }

    .analytics-toolbar select {
        width: 100%;
    }

    .admin-users-filters {
        grid-template-columns: 1fr;
        width: 100%;
    }

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

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

    .analytics-panel {
        padding: 18px;
    }

    .attempt-row {
        grid-template-columns: 1fr 42px;
    }

    .attempt-label {
        grid-column: 1 / -1;
    }

    .bars-detail-item {
        grid-template-columns: 1fr;
    }

    .bars-detail-score b {
        text-align: left;
    }

    .focus-metric,
    .recent-attempt-row {
        flex-direction: column;
    }

    .focus-metric b,
    .recent-attempt-row b {
        text-align: left;
    }

    .history-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .scenario-history .history-header {
        display: none;
    }

    .scenario-history .history-entry {
        grid-template-columns: 28px 1fr;
        gap: 8px;
    }

    .history-star {
        grid-row: span 5;
        justify-content: flex-start;
    }

    .history-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .full-history-filters {
        grid-template-columns: 1fr;
    }

    .full-history-table .history-header {
        display: none;
    }

    .full-history-table .history-entry {
        grid-template-columns: 28px 1fr;
    }

    .profile-chat-turn {
        max-width: 100%;
    }
}



.friends-sort-toggle {
    display: inline-flex;
    margin-left: 20px;
    gap: 8px;
}
.sort-btn {
    background: none;
    border: 1px solid #ccc;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}
.sort-btn.active {
    background: #4a90e2;
    color: white;
    border-color: #4a90e2;
}
.sort-btn:hover:not(.active) {
    background: #f0f0f0;
}


/* Shared scenarios section */
.shared-scenarios-section {
    margin-top: 2rem;
    background: #2a2a3a;
    border: 1px solid #4a4a6a;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.shared-tabs {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid #4a4a6a;
    margin-bottom: 1rem;
}
.shared-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    color: #b0b0d0;
    font-weight: 700;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.shared-tab:hover {
    color: #f0f0f0;
    background: rgba(100, 200, 200, 0.08);
}
.shared-tab.active {
    color: #64c8c8;
    border-bottom-color: #64c8c8;
    margin-bottom: -2px;
}
.share-card {
    background: #1e1e2f;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #4a4a6a;
    border-left: 4px solid #64c8c8;
}
.share-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.share-sender, .share-recipient {
    font-weight: 600;
    color: #f0f0f0;
}
.share-date {
    font-size: 0.8rem;
    color: #b0b0d0;
}
.share-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: #32324a;
    color: #dcdc64;
}
.share-status.pending {
    background: rgba(220, 220, 100, 0.15);
    color: #dcdc64;
}
.share-status.replied {
    background: rgba(100, 200, 100, 0.16);
    color: #64c864;
}
.share-status.completed {
    background: rgba(100, 200, 200, 0.16);
    color: #64c8c8;
}
.share-message {
    margin: 0.5rem 0;
    color: #d7d7ea;
    font-style: italic;
}
.share-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
}
.share-actions-print {
    margin: 1rem 0;
}
.share-details p {
    margin: 0.5rem 0;
    color: #f0f0f0;
}
.pdf-upload-section {
    margin-top: 1rem;
}
.pdf-upload-section label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.empty-shares {
    text-align: center;
    color: #b0b0d0;
    padding: 2rem;
    background: #1e1e2f;
    border: 1px dashed #4a4a6a;
    border-radius: 10px;
}


.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #4a4a6a;
    align-items: flex-start;
    background: #2a2a3a;
    color: #f0f0f0;
}
.notification-item:hover {
    background-color: #32324a;
}
.notif-icon, .notif-avatar {
    font-size: 1.2rem;
    width: 32px;
    text-align: center;
}
.notif-content {
    flex: 1;
}
.notif-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #f0f0f0;
}
.notif-message {
    font-size: 0.8rem;
    color: #b0b0d0;
    margin-top: 4px;
    font-style: italic;
}
.notif-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}
.btn-small {
    padding: 4px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    background: #e2e8f0;
    border: none;
    cursor: pointer;
}
.btn-small:hover {
    background: #cbd5e1;
}


.player-name-link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.player-name-link:hover {
    text-decoration: underline;
    color: #4a90e2;
}


.section-divider {
    margin: 2rem 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ccc, transparent);
}
.admin-extra-sections {
    margin-top: 2rem;
}

/* Admin scenario history – wider date column to prevent overlap */
.admin-history .history-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.admin-history .history-header,
.admin-history .history-entry {
    display: table-row;
}

.admin-history .history-header > div,
.admin-history .history-entry > div {
    display: table-cell;
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}

/* Date column – double the default width (e.g., from ~60px to 130px) */
.admin-history .history-header .history-date,
.admin-history .history-entry .history-date {
    width: 130px;
    min-width: 130px;
    white-space: normal;
    word-break: keep-all;
}

/* Scenario column – takes remaining space */
.admin-history .history-header .history-scenario,
.admin-history .history-entry .history-scenario {
    width: auto;
}

/* Score column – fixed narrow width */
.admin-history .history-header .history-score,
.admin-history .history-entry .history-score {
    width: 80px;
    text-align: center;
}

/* Actions column – fixed width for buttons */
.admin-history .history-header .history-actions,
.admin-history .history-entry .history-actions {
    width: 140px;
    text-align: right;
}


/* Admin scenario history – proper column alignment using grid */
.admin-history .history-table {
    width: 100%;
    overflow-x: auto;
}

.admin-history .history-header,
.admin-history .history-entry {
    display: grid;
    grid-template-columns: 130px minmax(200px, 1fr) 80px 140px;
    gap: 0;
    align-items: center;
}

/* Cell styling */
.admin-history .history-header > div,
.admin-history .history-entry > div {
    padding: 10px 12px;
    word-break: break-word;
}

/* Score column – center text */
.admin-history .history-score {
    text-align: center;
}

/* Actions column – right align buttons */
.admin-history .history-actions {
    text-align: right;
}

#adminCustomScenarios .custom-actions .feature-challenge-btn {
    background: #263b2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(100, 200, 100, 0.25) !important;
    opacity: 1 !important;
}

#adminCustomScenarios .custom-actions .feature-challenge-btn:hover {
    background: #314c3b !important;
}

#adminCustomScenarios .custom-actions .preview-custom-btn {
    background: #263b2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(100, 200, 100, 0.25) !important;
    opacity: 1 !important;
}

#adminCustomScenarios .custom-actions .preview-custom-btn:hover {
    background: #314c3b !important;
}

#adminCustomScenarios .custom-actions .feature-available-btn {
    background: #24543a !important;
    color: #ffffff !important;
    border: 1px solid rgba(46, 204, 113, 0.32) !important;
    opacity: 1 !important;
}

#adminCustomScenarios .custom-actions .feature-available-btn:hover {
    background: #2f6b4a !important;
}

#adminCustomScenarios .custom-actions .remove-active-btn {
    background: #d9822b !important;
    color: #111827 !important;
    border: 1px solid rgba(255, 190, 88, 0.45) !important;
    opacity: 1 !important;
}

#adminCustomScenarios .custom-actions .remove-active-btn:hover {
    background: #f0a04b !important;
}

#adminCustomScenarios .custom-actions .delete-scenario-btn {
    background: #8f2630 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 107, 107, 0.35) !important;
    margin-left: auto;
    opacity: 1 !important;
}

#adminCustomScenarios .custom-actions .delete-scenario-btn:hover {
    background: #a8323d !important;
}


.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Base styles for both help icons */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    cursor: help;
    position: relative;
}

/* Share Modal tooltip */
#shareHelpIcon:hover::after {
    content: "Share your finished scenarios with colleagues for feedback!\A Pick a scenario from your scenario history, and share it with a comment.\A Your colleague you shared it with will have access to the case data, chat logs and scoring analysis.";
    white-space: pre-wrap;
    max-width: 300px;
    width: max-content;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#shareHelpIcon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    pointer-events: none;
}

/* Challenge Modal tooltip – placeholder, you can edit later */
#challengeHelpIcon:hover::after {
    content: "Challenge a colleague in a duel for honour, glory, and recognition!\A Select a scenario from the list, add in a comment, and send the challenge.\A You will be sent to the scenario player to do the scenario, and your score will be recorded.\A Your colleague will receive the challenge with your score and complete the scenario on their end.\A Compare your scores afterward to determine the winner!";
    white-space: pre-wrap;
    max-width: 300px;
    width: max-content;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#challengeHelpIcon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    pointer-events: none;
}


/* Container for section header with help icon on the right */
.section-header-with-help {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.5rem;
    position: relative;
}

.section-help-icon {
    /* small adjustment to not interfere with tabs */
    margin-left: auto;
}

/* Tooltip for Shares section */
#sharesSectionHelpIcon:hover::after {
    content: "Share your completed scenarios with friends.\A Incoming: Scenarios shared that were you, you can reply with feedback.\A Outgoing: scenarios you've shared with others, see their replies and learn from them.";
    white-space: pre-wrap;
    max-width: 320px;
    width: max-content;
    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#sharesSectionHelpIcon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 10px;
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    pointer-events: none;
}

/* Tooltip for Challenges section */
#challengesSectionHelpIcon:hover::after {
    content: "Challenge a friend to a scenario.\A Incoming: challenges sent to you, accept and play to compare scores.\A Outgoing: challenges you've sent to colleagues, see the results when completed.";
    white-space: pre-wrap;
    max-width: 320px;
    width: max-content;
    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#challengesSectionHelpIcon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 10px;
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    pointer-events: none;
}


/* Reusable help icon styles */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    cursor: help;
    position: relative;
    margin-left: 8px;
    flex-shrink: 0;
}

.section-header-with-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.customize-button-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
}

.badge-footer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Level Progress tooltip */
#levelProgressHelpIcon:hover::after {
    content: "Complete scenarios to earn EXP.\A Each scenario awards EXP based on your highest score obtained.\A Reach 100 EXP to advance to the next level!";
    white-space: pre-wrap;
    max-width: 280px;
    width: max-content;
    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#levelProgressHelpIcon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    pointer-events: none;
}

/* Customize Badges tooltip */
#customizeBadgesHelpIcon:hover::after {
    content: "Select up to 3 badges you've earned\A to feature on your public profile.\A Click on any earned badge to toggle selection.";
    white-space: pre-wrap;
    max-width: 280px;
    width: max-content;
    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 1000;
    pointer-events: none;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#customizeBadgesHelpIcon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    pointer-events: none;
}


/* Challenge Result Modal - Fancy Design */
.challenge-result-container {
    padding: 0.5rem;
}

.challenge-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(100, 200, 200, 0.3);
}

.scenario-title {
    font-size: 1.6rem;
    color: #dcdc64;
    margin: 0 0 0.5rem 0;
}

.challenge-comment {
    font-style: italic;
    color: #b0b0d0;
    background: rgba(255,255,255,0.05);
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 20px;
}

.versus-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.competitor-card {
    flex: 1;
    min-width: 220px;
    background: rgba(30, 30, 47, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(100, 200, 200, 0.2);
    position: relative;
    backdrop-filter: blur(4px);
}

.competitor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    border-color: rgba(100, 200, 200, 0.5);
}

.winner-card {
    background: linear-gradient(135deg, rgba(220, 220, 100, 0.15), rgba(100, 200, 200, 0.1));
    border: 2px solid #dcdc64;
    box-shadow: 0 0 20px rgba(220, 220, 100, 0.3);
}

.competitor-avatar {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.competitor-name {
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.competitor-score {
    font-size: 2.5rem;
    font-weight: 800;
    color: #64c8c8;
    margin: 0.5rem 0;
    letter-spacing: 2px;
}

.winner-badge {
    background: linear-gradient(135deg, #dcdc64, #f0c674);
    color: #1e1e2f;
    padding: 0.4rem 1rem;
    border-radius: 40px;
    display: inline-block;
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0.75rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

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

.btn-view-logs {
    display: inline-block;
    background: rgba(70, 130, 180, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s;
    border: 1px solid rgba(255,255,255,0.2);
}

.btn-view-logs:hover {
    background: #4682b4;
    transform: scale(1.02);
}

.no-logs {
    color: #8080a0;
    font-size: 0.8rem;
    font-style: italic;
}

.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #dcdc64;
    background: rgba(0,0,0,0.4);
    border-radius: 60px;
    width: 60px;
    margin: 0 0.5rem;
}

.vs-text {
    background: #2a2a3a;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    font-size: 1.2rem;
    border: 1px solid #dcdc64;
}

.tie-message {
    text-align: center;
    font-size: 1.2rem;
    background: rgba(220, 220, 100, 0.2);
    padding: 0.8rem;
    border-radius: 40px;
    color: #dcdc64;
    font-weight: bold;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .versus-grid {
        flex-direction: column;
        align-items: center;
    }
    .competitor-card {
        width: 100%;
        max-width: 320px;
    }
    .vs-divider {
        margin: 0;
        width: auto;
        background: transparent;
    }
    .vs-text {
        padding: 0.3rem 0.8rem;
        font-size: 1rem;
    }
}


/* Loser badge */
.loser-badge {
    background: linear-gradient(135deg, #6b6b6b, #4a4a4a);
    color: #f0f0f0;
    padding: 0.3rem 1rem;
    border-radius: 40px;
    display: inline-block;
    font-weight: bold;
    font-size: 0.85rem;
    margin: 0.75rem 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Loser card styling (muted) */
.loser-card {
    border-color: #5a5a7a;
    background: rgba(30, 30, 47, 0.7);
    filter: grayscale(0.2);
}

.loser-card .competitor-score {
    color: #a0a0c0;
}

.result-badges {
    min-height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.auth-note {
  margin-top: 14px;
  margin-bottom: 0;
  color: #c4c4e8;
  font-size: 0.95rem;
  line-height: 1.4;
}


/* ===== SOCIAL PAGE BUTTONS - DARKER & SOFTER ===== */

/* Shared scenario action buttons */
.view-share-btn,
.view-reply-btn,
.accept-challenge-btn,
.view-result-btn {
    background: #3a4a6a !important;        /* dark muted blue-gray */
    border: 1px solid #5a6a8a !important;
    color: #e0e4f0 !important;
    transition: all 0.2s ease;
}

.view-share-btn:hover,
.view-reply-btn:hover,
.accept-challenge-btn:hover,
.view-result-btn:hover {
    background: #2c3a55 !important;
    border-color: #7a8aaa !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Ensure secondary variant (if any) also gets darker */
.btn-secondary.view-share-btn,
.btn-secondary.view-reply-btn,
.btn-secondary.accept-challenge-btn,
.btn-secondary.view-result-btn {
    background: #2a2a3a !important;
    border-color: #5a6a8a !important;
    color: #c0c8e0 !important;
}

.btn-secondary.view-share-btn:hover,
.btn-secondary.view-reply-btn:hover,
.btn-secondary.accept-challenge-btn:hover,
.btn-secondary.view-result-btn:hover {
    background: #1e1e2f !important;
    color: #ffffff !important;
}

/* Challenge result button (if not covered) */
.btn-view-logs {
    background: #3a4a6a !important;
    border-color: #5a6a8a !important;
    color: #e0e4f0 !important;
}

.btn-view-logs:hover {
    background: #2c3a55 !important;
    color: #ffffff !important;
}

/* Primary action buttons in modals (Share, Challenge) – already decent but ensure consistency */
.modal-footer .btn-primary {
    background: #3a4a6a !important;
    border: 1px solid #5a6a8a !important;
}

.modal-footer .btn-primary:hover {
    background: #2c3a55 !important;
}

/* Remove any extra brightness from outline or focus */
.view-share-btn:focus,
.view-reply-btn:focus,
.accept-challenge-btn:focus,
.view-result-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(90, 106, 138, 0.5);
}

/* ===== NOTIFICATION DROPDOWN BUTTONS - DARKER ===== */
.notification-dropdown .btn-small,
.notification-dropdown .btn-small:link,
.notification-dropdown .btn-small:visited,
.notification-dropdown .reply-to-share {
    background: #3a4a6a !important;        /* dark muted blue-gray */
    border: 1px solid #5a6a8a !important;
    color: #e0e4f0 !important;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.notification-dropdown .btn-small:hover,
.notification-dropdown .reply-to-share:hover {
    background: #2c3a55 !important;
    border-color: #7a8aaa !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Ensure any anchor or button inside notification items gets this treatment */
.notification-item .btn-small,
.notification-item .reply-to-share {
    background: #3a4a6a !important;
    border: 1px solid #5a6a8a !important;
    color: #e0e4f0 !important;
}

.notification-item .btn-small:hover,
.notification-item .reply-to-share:hover {
    background: #2c3a55 !important;
    color: #ffffff !important;
}


/* Improve full history filters layout */
.full-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
    background: transparent;
}

.full-history-filters label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: #b0b0d0;
}

.full-history-filters input[type="search"],
.full-history-filters input[type="date"] {
    background: #1e1e2f;
    border: 1px solid #4a4a6a;
    border-radius: 6px;
    padding: 8px 10px;
    color: #fff;
    width: auto;
    min-width: 140px;
}

.full-history-filters .full-history-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.full-history-filters button {
    align-self: center;
    margin-top: 0;
    background: #3a4a6a;
    border: 1px solid #5a6a8a;
    color: #e0e4f0;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.full-history-filters button:hover {
    background: #2c3a55;
}

/* Ensure date inputs show calendar icon on click – native behavior */


/* Ensure date inputs show native calendar picker */
input[type="date"] {
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
}

/* Allow the date picker icon to be clickable */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Position relative to contain the absolute indicator */
.full-history-filters input[type="date"] {
    position: relative;
    padding-right: 30px;
}


/* Darken print log button in friend profile admin view */
.btn-secondary.print-log-btn,
.btn-secondary.view-print-log,
.history-actions .btn-secondary,
.admin-history .history-actions .btn-secondary {
    background: #3a4a6a !important;
    border: 1px solid #5a6a8a !important;
    color: #e0e4f0 !important;
}

.btn-secondary.print-log-btn:hover,
.btn-secondary.view-print-log:hover,
.history-actions .btn-secondary:hover,
.admin-history .history-actions .btn-secondary:hover {
    background: #2c3a55 !important;
    border-color: #7a8aaa !important;
    color: #ffffff !important;
}

input[type="date"] {
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.full-history-filters input[type="date"] {
    position: relative;
    padding-right: 30px;
}


/* Admin Full History Modal - Column Separation */
#adminFullHistoryEntries .history-header,
#adminFullHistoryEntries .history-entry {
    display: grid;
    grid-template-columns: 110px minmax(220px, 1.5fr) 80px 160px;
    gap: 20px;
    align-items: center;
    width: 100%;
}

/* Date column - prevent wrapping */
#adminFullHistoryEntries .history-date {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scenario column - allow wrapping if needed */
#adminFullHistoryEntries .history-scenario {
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
}

/* Score column - center text */
#adminFullHistoryEntries .history-score {
    text-align: center;
    font-weight: 600;
}

/* Actions column - right align buttons */
#adminFullHistoryEntries .history-actions {
    text-align: right;
    white-space: nowrap;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #adminFullHistoryEntries .history-header,
    #adminFullHistoryEntries .history-entry {
        grid-template-columns: 90px 1fr 60px 120px;
        gap: 10px;
        font-size: 12px;
    }
    
    #adminFullHistoryEntries .history-actions .btn-small {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* Ensure the header and entry rows align properly */
.full-history-table .history-header,
.full-history-table .history-entry {
    display: grid;
    grid-template-columns: 110px minmax(220px, 1.5fr) 80px 160px;
    gap: 20px;
    align-items: center;
    padding: 12px 16px;
}

/* Consistent padding for header */
.full-history-table .history-header {
    background: rgba(30, 30, 47, 0.8);
    font-weight: bold;
    border-bottom: 1px solid #4a4a6a;
}




/* Delete (X) button */
.notification-item {
    position: relative;
    padding-right: 30px;
}
.notif-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 10;
}
.notif-delete:hover {
    background: rgba(255,255,255,0.1);
    color: #ff6b6b;
}

/* Clear All button */
.dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}
.btn-clear-all {
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
}
.btn-clear-all:hover {
    background: #ff4444;
}



/* Friend Requests Modal */
.friend-request-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.request-avatar {
    width: 40px;
    height: 40px;
    background: rgba(100,200,200,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.request-info {
    flex: 1;
}
.request-name {
    font-weight: bold;
}
.request-detail {
    font-size: 12px;
    color: #aaa;
}
.request-actions {
    display: flex;
    gap: 8px;
}
.empty-requests {
    text-align: center;
    padding: 20px;
    color: #aaa;
}

/* Darker Send Request button */
.send-request-btn {
    background: #2c3e50 !important;
    border-color: #1a2632 !important;
}
.send-request-btn:hover {
    background: #1e2c38 !important;
}

.search-result-item .send-request-btn {
    background: #2c3e50;
    border-color: #1a2632;
}
.search-result-item .send-request-btn:hover {
    background: #1e2c38;
}

/* Darker View All buttons (Shared Scenarios & Challenges) */
.view-all-shares-btn,
.view-all-challenges-btn {
    background: #2c3e50 !important;
    border-color: #1a2632 !important;
    color: #e0e0e0 !important;
}
.view-all-shares-btn:hover,
.view-all-challenges-btn:hover {
    background: #1e2c38 !important;
    border-color: #0f1a22 !important;
}

/* Also ensure any btn-secondary used in these sections gets the same treatment,
   if the buttons are using that class. */
.shared-scenarios-section .btn-secondary,
.friends-section .btn-secondary {
    background: #2c3e50 !important;
    border-color: #1a2632 !important;
    color: #e0e0e0 !important;
}
.shared-scenarios-section .btn-secondary:hover,
.friends-section .btn-secondary:hover {
    background: #1e2c38 !important;
}


/* Full History Modal - proper column alignment */
.full-history-table .history-header,
.full-history-table .history-entry {
    display: grid;
    grid-template-columns: 40px 100px 1fr 80px 60px 180px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.full-history-table .history-header {
    background: rgba(255,255,255,0.05);
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.full-history-table .history-entry {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Ensure star column is centered */
.full-history-table .history-star {
    text-align: center;
}

/* Adjust action buttons to fit */
.full-history-table .history-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .full-history-table .history-header,
    .full-history-table .history-entry {
        grid-template-columns: 40px 80px 1fr 70px 50px 160px;
        gap: 8px;
        font-size: 12px;
    }
    .history-action-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}


.full-history-table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 20px 0 10px;
    padding: 12px;
}

.pagination-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #eff6ff;
}
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-info {
    color: #a9b8c8;
    font-size: 0.9rem;
}