:root {

    --text-color: rgba(255, 255, 255, 0.9);

    --text-other-color: rgba(255, 255, 255, 0.7);

    --font-main: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;

}



* {

    font-family: var(--font-main);

}



::-webkit-scrollbar {

    width: 4px;

    background: #000;

}



::-webkit-scrollbar-thumb {

    background: rgb(73, 73, 73);

    border-radius: 20px;

}



::-webkit-scrollbar-button {

    display: none;

}



/* ==== FLOATING PILL HEADER (Matching Vexion & Chicago DLC Style) ==== */

header {

    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: auto;

    max-width: 92vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    background: rgba(18, 18, 28, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    padding: 7px 10px 7px 18px;

    border-radius: 999px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);

    z-index: 1000;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



header .open-ul {

    display: none;

}



header .logo-text {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: #ffffff;

    font-weight: 700;

    font-size: 15.5px;

    letter-spacing: -0.2px;

    white-space: nowrap;

    transition: transform 0.2s ease, opacity 0.2s ease;

}



header .logo-text:hover {

    opacity: 0.9;

    transform: scale(1.02);

}



header .logo-text img {

    width: 22px;

    height: 22px;

    object-fit: contain;

    display: block;

}



header .logo {

    color: var(--text-color);

    font-size: 16px;

    font-weight: 600;

}



/* Header buttons & Links */

header ul {

    display: flex;

    align-items: center;

    gap: 18px;

    list-style: none;

    margin: 0;

    padding: 0;

}



header li {

    margin: 0;

}



header li a {

    color: rgba(255, 255, 255, 0.7);

    font-weight: 500;

    font-size: 13.5px;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

    transition: color 0.2s ease, transform 0.2s ease;

}



header li a:hover, header li a.active {

    color: #ffffff;

}



header li a i {

    font-size: 16px;

    color: rgba(255, 255, 255, 0.65);

    transition: color 0.2s ease;

}



header li a:hover i, header li a.active i {

    color: #ffffff;

}



/* Action Button */

.header-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}



header .button {

    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

    border: none;

    color: #ffffff;

    padding: 7px 18px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

    transition: transform 0.2s, box-shadow 0.2s;

    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);

    white-space: nowrap;

}



header .button:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);

    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);

}



/* Profile Button */

.profile-button, .header-actions .highlight {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 4px 14px 4px 5px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);

    color: #ffffff;

    font-size: 13.5px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.profile-button:hover, .header-actions .highlight:hover {

    background: rgba(255, 255, 255, 0.15);

    border-color: rgba(255, 255, 255, 0.25);

    transform: translateY(-1px);

}



.profile-avatar, .header-actions .avatar {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    object-fit: cover;

}



.profile-name, .header-name {

    color: #ffffff;

    font-size: 13.5px;

    font-weight: 600;

}



/* Mobile responsive */

@media (max-width: 768px) {

    header {

        top: 12px;

        width: calc(100% - 24px);

        max-width: calc(100% - 24px);

        padding: 8px 14px;

    }



    header ul {

        display: none;

    }



    header.menu-open {

        border-radius: 20px;

    }



    header .open-ul {

        display: flex;

        align-items: center;

        justify-content: center;

        background-color: transparent;

        border: none;

        outline: none;

        cursor: pointer;

        color: #ffffff;

        font-size: 22px;

        padding: 4px;

    }



    header ul.mobile-open {

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        width: 100%;

        z-index: 200;

        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        background: rgba(18, 18, 28, 0.95);

        backdrop-filter: blur(24px);

        -webkit-backdrop-filter: blur(24px);

        border: 1px solid rgba(255, 255, 255, 0.1);

        border-radius: 20px;

        padding: 14px 10px;

        gap: 6px;

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);

    }



    header ul.mobile-open li {

        width: 100%;

    }



    header ul.mobile-open li a {

        font-size: 15px;

        padding: 10px 14px;

        border-radius: 12px;

        background: rgba(255, 255, 255, 0.03);

    }

}



/* Skeletons */

.skeleton {

    position: relative;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 1000px;

}



.skeleton::after {

    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;

    transform: translateX(-100%);

    background-image: linear-gradient(

        90deg,

        rgba(255, 255, 255, 0) 0,

        rgba(255, 255, 255, 0.05) 20%,

        rgba(255, 255, 255, 0.1) 60%,

        rgba(255, 255, 255, 0)

    );

    animation: shimmer 2s infinite;

    content: '';

}



@keyframes shimmer {

    100% {

        transform: translateX(100%);

    }

}



/* Toast notifications */

.toast-container {

    position: fixed;

    right: 24px;

    bottom: 24px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 10000;

    pointer-events: none;

}



.toast {

    position: relative;

    min-width: 280px;

    max-width: 380px;

    padding: 14px 18px;

    border-radius: 16px;

    color: var(--text-color);

    background: rgba(20, 20, 28, 0.85);

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    font-size: 14px;

    font-weight: 500;

    opacity: 0;

    transform: translateY(20px) scale(0.95);

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: auto;

}



.toast.show {

    opacity: 1;

    transform: translateY(0) scale(1);

}



img {

    -webkit-user-drag: none;

}