:root {

    --card-bg-light: rgba(255, 255, 255, 0.9);

    --card-bg-dark: rgba(33, 37, 41, 0.85);

    --text-light: #212529;

    --text-dark: #fff;

    --accent-light: #53C3FB;

    --accent-dark: #7DD3FB;

    --muted-light: #6c757d;

    --muted-dark: #a7a7a7;

    --link-light: #53C3FB;

    --link-dark: #7DD3FB;

}



body {

    position: relative;

    min-height: 100vh;

    text-align: center;

    background-color: #c9c9c9;

    background-image: url('../images/mooo.jpeg');

    background-position: center;

    background-size: cover;

    transition: all 0.3s ease;

}



body.light-theme {

    color: var(--text-light);

}



body.dark-theme {

    color: var(--text-dark);

}



.theme-switch {

    position: fixed;

    top: 1rem;

    right: 1rem;

    z-index: 1000;

    background: none;

    border: none;

    font-size: 1.5rem;

    cursor: pointer;

    padding: 0.5rem;

    background-color: rgba(0, 0, 0, 0.2);

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    transition: all 0.3s ease;

}



.theme-switch:hover {

    transform: rotate(360deg);

    background-color: rgba(0, 0, 0, 0.4);

}



.nav-menu {

    position: fixed;

    top: 0;

    left: -300px;

    width: 300px;

    height: 100vh;

    background: var(--card-bg-dark);

    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 999;

    padding: 90px 20px 20px;

    backdrop-filter: blur(15px);

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

    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

}



.nav-menu.active {

    left: 0;

    opacity: 1;

    visibility: visible;

}



.nav-menu.active {

    left: 0;

}



.nav-menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.nav-menu li {

    margin: 5px 0;

}



.nav-menu a {

    color: var(--text-dark);

    text-decoration: none;

    font-size: 1.1rem;

    display: block;

    padding: 12px 15px;

    transition: all 0.3s ease;

    position: relative;

    background: transparent;

}



.nav-menu a:hover {

    transform: translateX(5px);

    opacity: 0.8;

}



.dropdown-content {

    max-height: 0;

    overflow: hidden;

    padding-left: 15px;

    margin: 0;

    border-left: 2px solid rgba(255, 255, 255, 0.1);

    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;

    opacity: 0;

}



.dropdown-content a {

    font-size: 0.95rem;

    padding: 10px 15px;

    opacity: 0.8;

    transform: translateX(-10px);

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

}



.dropdown-content.show {

    max-height: 500px;

    opacity: 1;

 }



.dropdown-content.show a {

    transform: translateX(0);

}



.dropdown-toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-right: 35px !important;

}



.dropdown-toggle::after {

    content: '';

    position: absolute;

    right: 15px;

    top: 50%;

    width: 24px;

    height: 24px;

    transform: translateY(-50%);

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");

    background-position: center;

    background-repeat: no-repeat;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    opacity: 0.7;

}



.dropdown-toggle.active::after {

    transform: translateY(-50%) rotate(-180deg);

}



.dropdown-toggle:hover::after {

    opacity: 1;

}



.light-theme .nav-menu {

    background: var(--card-bg-light);

    border-right: 1px solid rgba(0, 0, 0, 0.1);

    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);

}



.light-theme .nav-menu a {

    color: var(--text-light);

}



.light-theme .dropdown-content {

    border-left: 1px solid rgba(0, 0, 0, 0.1);

}



.light-theme .hamburger-menu {

    background: rgba(0, 0, 0, 0.1);

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

    color: var(--text-light);

}



.light-theme .hamburger-menu:hover {

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

}



.light-theme .hamburger-menu.active {

    background: rgba(0, 0, 0, 0.2);

}



.hamburger-menu {

    position: fixed;

    top: 1rem;

    left: 1rem;

    z-index: 1000;

    background: rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(8px);

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

    cursor: pointer;

    padding: 0.75rem;

    border-radius: 12px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.hamburger-menu:hover {

    background: rgba(0, 0, 0, 0.3);

}



.hamburger-menu.active {

    background: rgba(0, 0, 0, 0.4);

}



.hamburger-menu.active svg {

    transform: scale(0.9);

}



.hamburger-menu svg {

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.light-theme .hamburger-menu {

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

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

    color: var(--text-light);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.light-theme .hamburger-menu:hover {

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

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.info-card {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    margin-bottom: 20px;

    transform: translateY(0);

    position: relative;

    overflow: hidden;

}



.info-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.info-card:hover {

    transform: translateY(-5px) scale(1.02);

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}



.info-card:hover::before {

    opacity: 1;

}



.dark-theme .info-card:hover {

    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

}



.light-theme .info-card,

.light-theme .card {

    background-color: var(--card-bg-light) !important;

    color: var(--text-light);

}



.dark-theme .info-card,

.dark-theme .card {

    background-color: var(--card-bg-dark) !important;

    color: var(--text-dark);

}



.light-theme .card-title {

    color: var(--accent-light) !important;

}



.dark-theme .card-title {

    color: var(--accent-dark) !important;

}



.light-theme .text-muted {

    color: var(--muted-light) !important;

}



.dark-theme .text-muted {

    color: var(--muted-dark) !important;

}



footer {

    background-color: var(--card-bg-dark);

    transition: all 0.3s ease;

}



.light-theme footer {

    background-color: var(--card-bg-light);

    color: var(--text-light);

}



.dark-theme footer {

    background-color: var(--card-bg-dark);

    color: var(--text-dark);

}



footer a {

    text-decoration: none;

    transition: all 0.3s ease;

}



.light-theme footer a {

    color: var(--link-light);

}



.dark-theme footer a {

    color: var(--link-dark);

}



footer a:hover {

    opacity: 0.8;

}



.moo-toast {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0,0,0,0.8);

    color: white;

    padding: 10px 20px;

    border-radius: 20px;

    z-index: 1000;

    animation: float-up 2s ease-out;

}



.light-theme .moo-toast {

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

    color: var(--text-light);

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



@keyframes float-up {

    0% { transform: translate(-50%, 100%); opacity: 0; }

    20% { transform: translate(-50%, 0); opacity: 1; }

    80% { transform: translate(-50%, 0); opacity: 1; }

    100% { transform: translate(-50%, -100%); opacity: 0; }

}



@keyframes heartbeat {

    0% { transform: scale(1); }

    25% { transform: scale(1.1); }

    50% { transform: scale(1); }

    75% { transform: scale(1.1); }

    100% { transform: scale(1); }

}



footer span {

    display: inline-block;

    animation: heartbeat 1.5s infinite;

}



.cow-fact-container {

    position: fixed;

    bottom: 20px;

    left: 20px;

    max-width: 300px;

    background: var(--card-bg-light);

    padding: 15px 20px;

    border-radius: 15px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    transform: translateX(-110%);

    opacity: 0;

    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    z-index: 1000;

}



.cow-fact-container.show {

    transform: translateX(0);

    opacity: 1;

}



@keyframes factWobble {

    0% { transform: translateX(-120%) rotate(0deg); }

    15% { transform: translateX(5%) rotate(5deg); }

    30% { transform: translateX(-10%) rotate(-3deg); }

    45% { transform: translateX(5%) rotate(3deg); }

    60% { transform: translateX(-5%) rotate(-2deg); }

    75% { transform: translateX(2%) rotate(1deg); }

    100% { transform: translateX(0) rotate(0deg); }

}

/* Mobile Responsiveness Improvements */
@media (max-width: 768px) {
    .ip-display {
        font-size: 1.5rem;
        word-break: break-all;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
    
    #speedtest-container {
        min-height: 300px !important;
    }
    
    #speedtest-container iframe {
        min-height: 300px !important;
    }
    
    .cow-fact-container {
        max-width: 250px;
        font-size: 0.9rem;
    }
    
    .modal-content {
        width: 95%;
        max-width: 95%;
    }
    
    .modal-scroll-container {
        padding: 20px 15px;
    }
}

/* Easter Egg: Cursor Cow Emojis */
.cursor-emoji {
    position: fixed;
    font-size: 36px; /* Increased from 24px */
    pointer-events: none;
    z-index: 9999;
    user-select: none;
    transform-origin: center;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
    will-change: transform, opacity;
    /* Animation now handled by JavaScript for better browser compatibility */
}

.dark-theme .cursor-emoji {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.9));
}

.light-theme .cursor-emoji {
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
}

/* Easter Egg: Cow Emoji Rain */
.cow-emoji-rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
    transition: opacity 1s ease;
}

.cow-emoji-rain-container.fade-out {
    opacity: 0;
}

.falling-cow-emoji {
    position: absolute;
    font-size: 24px;
    opacity: 0.9;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    animation: emoji-fall-direct 5s linear forwards;
}

@keyframes emoji-fall-direct {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.9;
        transform: translateY(calc(100vh + 50px)) rotate(359deg);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(100vh + 100px)) rotate(720deg);
    }
}



.dark-theme .cow-fact-container {

    background: var(--card-bg-dark);

    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

}



.cow-fact-title {

    font-weight: bold;

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.cow-fact-content {

    font-size: 0.95rem;

    line-height: 1.4;

}



.cow-facts-btn {

    background-color: #53C3FB;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 6px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    font-weight: 500;

    position: relative;

    overflow: hidden;

    margin: 0 5px;

}



.cow-facts-btn::before {

    content: '🐮';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0);

    opacity: 0;

    transition: all 0.3s ease;

}



.cow-facts-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 2px 8px rgba(0,0,0,0.2);

    background-color: #3AB3EB;

}



.cow-facts-btn:hover::before {

    animation: mooBounce 0.5s ease-out;

}



@keyframes mooBounce {

    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }

    50% { transform: translate(-50%, -50%) scale(2); opacity: 0.5; }

    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }

}



.dark-theme .cow-facts-btn {

    background-color: #53C3FB;

}



.content-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(8px);

    outline: none;

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    align-items: center;

    justify-content: center;

}



.content-modal.active {

    opacity: 1;

    visibility: visible;

}



.modal-content {

    background: var(--card-bg-dark);

    border-radius: 15px;

    width: 90%;

    max-width: 800px;

    max-height: 90vh;

    position: relative;

    transform: translateY(-20px);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

}



.light-theme .modal-content {

    background: var(--card-bg-light);

}



.content-modal.active .modal-content {

    transform: translateY(0);

}



.modal-scroll-container {

    padding: 30px;

    overflow-y: auto;

    max-height: calc(90vh - 60px);

    scrollbar-width: thin;

    scrollbar-color: var(--accent-light) transparent;

}



.modal-scroll-container details {

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

    border-radius: 8px;

    padding: 12px;

    margin-bottom: 12px;

}



.dark-theme .modal-scroll-container details {

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

}



.modal-scroll-container summary {

    cursor: pointer;

    font-weight: 500;

    padding: 4px 8px;

}



.modal-scroll-container summary:hover {

    color: var(--accent-light);

}



.dark-theme .modal-scroll-container summary:hover {

    color: var(--accent-dark);

}



.modal-scroll-container code {

    background: rgba(0, 0, 0, 0.1);

    padding: 2px 6px;

    border-radius: 4px;

    font-family: monospace;

}



.dark-theme .modal-scroll-container code {

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

}



/* Modal content styling */

.modal-main-title {

    margin-bottom: 1rem;

    padding-bottom: 0.8rem;

    border-bottom: 2px solid rgba(83, 195, 251, 0.3);

    font-size: 1.75rem;

    color: var(--accent-light);

    text-align: center;

}



.dark-theme .modal-main-title {

    color: var(--accent-dark);

    border-bottom: 2px solid rgba(125, 211, 251, 0.3);

}



.modal-subtitle {

    font-size: 1.1rem;

    color: var(--accent-light);

    margin-bottom: 1.5rem;

    text-align: center;

    font-weight: 500;

}



.dark-theme .modal-subtitle {

    color: var(--accent-dark);

}



.expand-all-button {

    background-color: var(--accent-light);

    color: white;

    border: none;

    border-radius: 4px;

    padding: 8px 12px;

    font-size: 0.9rem;

    cursor: pointer;

    margin-bottom: 20px;

    transition: all 0.2s ease;

    display: block;

    margin-left: auto;

    margin-right: auto;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    font-weight: 500;

}



.expand-all-button:hover {

    background-color: #3AB3EB;

    transform: translateY(-1px);

}



.dark-theme .expand-all-button {

    background-color: var(--accent-dark);

}



.dark-theme .expand-all-button:hover {

    background-color: #5ABCF5;

}



.modal-section {

    margin-bottom: 1.5rem;

    border-radius: 8px;

    overflow: hidden;

    transition: transform 0.2s ease;

}



.modal-section:hover {

    transform: translateY(-2px);

}



.modal-section-title {

    display: flex;

    align-items: center;

    padding: 12px 15px;

    margin: 0;

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

    color: var(--accent-light);

    font-size: 1.2rem;

    border-radius: 8px 8px 0 0;

    border-bottom: 1px solid rgba(128, 128, 128, 0.2);

    position: relative;

}



.modal-section-title::after {

    content: '';

    position: absolute;

    right: 15px;

    width: 12px;

    height: 12px;

    border-right: 2px solid var(--accent-light);

    border-bottom: 2px solid var(--accent-light);

    transform: rotate(45deg);

    transition: transform 0.3s ease;

    opacity: 0;

}



.modal-section-title.active::after {

    transform: rotate(-135deg);

}



.modal-section-title:hover::after {

    opacity: 0.7;

}



.dark-theme .modal-section-title {

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

    color: var(--accent-dark);

}



.dark-theme .modal-section-title::after {

    border-right: 2px solid var(--accent-dark);

    border-bottom: 2px solid var(--accent-dark);

}



.modal-icon {

    margin-right: 10px;

    font-size: 1.2em;

}



.modal-section-content {

    padding: 15px;

    background: rgba(0, 0, 0, 0.02);

    border-radius: 0 0 8px 8px;

}



.dark-theme .modal-section-content {

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

}



.feature-list li, .tools-list li {

    margin-bottom: 8px;

    position: relative;

    padding-left: 5px;

}



.feature-highlight {

    font-weight: 600;

    color: var(--accent-light);

}



.dark-theme .feature-highlight {

    color: var(--accent-dark);

}



.benefit-list {

    list-style: none;

    padding: 0;

}



.benefit-list li {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

}



.benefit-icon {

    display: inline-block;

    width: 30px;

    text-align: center;

    margin-right: 10px;

    font-size: 1.2em;

}



.modal-footer {

    margin-top: 2rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(128, 128, 128, 0.2);

    text-align: center;

    color: var(--muted-light);

}



.dark-theme .modal-footer {

    color: var(--muted-dark);

}



.footer-note {

    font-size: 0.9em;

    font-style: italic;

}



.heart-icon {

    display: inline-block;

    animation: heartbeat 1.5s infinite;

    color: #ff0066;

}



/* FAQ styling */

.faq-item {

    margin-bottom: 15px;

    border-radius: 8px;

    overflow: hidden;

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

}



.faq-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.dark-theme .faq-item:hover {

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}



.faq-question {

    padding: 12px 15px;

    background: rgba(83, 195, 251, 0.08);

    font-weight: 600;

    cursor: pointer;

    position: relative;

    border-left: 3px solid var(--accent-light);

    transition: background-color 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.faq-question::after {

    content: '▼';

    font-size: 0.7em;

    transition: transform 0.3s ease;

    opacity: 0.7;

}



.faq-question.active::after {

    transform: rotate(180deg);

}



.faq-question:hover {

    background: rgba(83, 195, 251, 0.12);

}



.dark-theme .faq-question {

    background: rgba(83, 195, 251, 0.1);

    border-left: 3px solid var(--accent-dark);

}



.dark-theme .faq-question:hover {

    background: rgba(83, 195, 251, 0.15);

}



.faq-answer {

    padding: 15px;

    background: rgba(0, 0, 0, 0.02);

}



.dark-theme .faq-answer {

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

}



.modal-scroll-container .lead {

    font-size: 1.1rem;

    color: var(--accent-light);

    margin-bottom: 1.5rem;

}



.dark-theme .modal-scroll-container .lead {

    color: var(--accent-dark);

}



.modal-scroll-container pre {

    white-space: pre-wrap;

    word-wrap: break-word;

    font-family: monospace;

    font-size: 14px;

    line-height: 1.4;

}



.dark-theme .modal-scroll-container pre {

    background: rgba(255,255,255,0.1) !important;

    color: var(--text-dark);

}



.light-theme .modal-scroll-container pre {

    background: rgba(0,0,0,0.05) !important;

    color: var(--text-light);

}



.modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    border-radius: 50%;

    color: currentColor;

    transition: all 0.3s ease;

    z-index: 1;

}



.modal-close:hover {

    background: rgba(0, 0, 0, 0.1);

    transform: rotate(90deg);

}



.light-theme .modal-close:hover {

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

}



.dark-theme .cow-facts-btn:hover {

    background-color: #3AB3EB;

}



.text-primary {

    color: var(--link-dark) !important;

}



.light-theme .text-primary {

    color: var(--link-light) !important;

}



.loading {

    opacity: 0.5;

    pointer-events: none;

}



.ip-display {

    font-size: 2rem;

    font-weight: bold;

    margin: 1rem 0;

    cursor: pointer;

    transition: all 0.2s ease;

}



.ip-display:hover {

    opacity: 0.8;

}



.card-text, .ip-display {

    cursor: pointer;

    position: relative;

}



.card-text:hover::after, .ip-display:hover::after {

    content: 'Click to copy';

    position: absolute;

    bottom: -20px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0,0,0,0.8);

    color: white;

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 12px;

    white-space: nowrap;

}



/* Changelog styles */

.changelog-icon {

    display: inline-block;

    margin-right: 5px;

    animation: pulse 2s infinite;

}



.changelog-link {

    position: relative;

}



.changelog-container {

    text-align: left;

    max-width: 800px;

    padding: 0 5px;

}



.changelog-title {

    margin-bottom: 1rem;

    padding-bottom: 0.8rem;

    border-bottom: 2px solid rgba(83, 195, 251, 0.3);

    font-size: 1.75rem;

    color: var(--accent-light);

    text-align: center;

}



.dark-theme .changelog-title {

    color: var(--accent-dark);

    border-bottom: 2px solid rgba(125, 211, 251, 0.3);

}



.changelog-version {

    margin-bottom: 1.5rem;

}



.changelog-section {

    margin-top: 2rem;

    margin-bottom: 0;

    color: var(--accent-light);

    display: flex;

    align-items: center;

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

    padding: 12px 15px;

    border-radius: 8px 8px 0 0;

    border-bottom: 1px solid rgba(128, 128, 128, 0.2);

    font-weight: 600;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

    transition: background-color 0.2s ease;

    position: relative;

}



.dark-theme .changelog-section {

    color: var(--accent-dark);

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

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}



.changelog-section:hover {

    background: rgba(0, 0, 0, 0.07);

}



.dark-theme .changelog-section:hover {

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

}



.changelog-section::before {

    content: '🔄';

    margin-right: 12px;

    font-size: 1.2em;

}



.changelog-section::after {

    content: '';

    position: absolute;

    right: 15px;

    width: 12px;

    height: 12px;

    border-right: 2px solid var(--accent-light);

    border-bottom: 2px solid var(--accent-light);

    transform: rotate(45deg);

    transition: transform 0.3s ease;

    opacity: 0.7;

}



.changelog-section.active::after {

    transform: rotate(-135deg);

}



.dark-theme .changelog-section::after {

    border-right: 2px solid var(--accent-dark);

    border-bottom: 2px solid var(--accent-dark);

}



.changelog-summary {

    margin-top: 0;

    margin-bottom: 0;

    padding: 14px 18px 14px 48px;

    background: rgba(83, 195, 251, 0.08);

    border-radius: 0;

    border-left: 3px solid var(--accent-light);

    font-weight: 500;

    color: #4a90e2;

    font-size: 0.95rem;

    line-height: 1.5;

    position: relative;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

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

}



.changelog-summary:hover {

    transform: translateY(-1px);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);

}



.changelog-summary::before {

    content: "ℹ️";

    position: absolute;

    left: 15px;

    top: 14px;

    font-size: 1.2em;

}



.dark-theme .changelog-summary {

    background: rgba(83, 195, 251, 0.1);

    color: #7bb9ff;

    border-left: 3px solid var(--accent-dark);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

}



.dark-theme .changelog-summary:hover {

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);

}



/* No special styling needed for dark theme emoji */



.changelog-content {

    padding: 15px 0 5px 0;

    border-radius: 0 0 8px 8px;

    background: rgba(0, 0, 0, 0.01);

}



.dark-theme .changelog-content {

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

}



.changelog-item {

    display: flex;

    margin-bottom: 1rem;

    background: rgba(0, 0, 0, 0.02);

    padding: 12px 15px;

    border-radius: 8px;

    border-left: 3px solid var(--accent-light);

    transition: transform 0.15s ease, background-color 0.15s ease;

}



.changelog-item:hover {

    background: rgba(0, 0, 0, 0.04);

    transform: translateX(2px);

}



.dark-theme .changelog-item {

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

    border-left: 3px solid var(--accent-dark);

}



.dark-theme .changelog-item:hover {

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

}



.changelog-bullet {

    flex-shrink: 0;

    color: var(--accent-light);

    margin-right: 12px;

    font-weight: bold;

}



.dark-theme .changelog-bullet {

    color: var(--accent-dark);

}



.changelog-text {

    flex-grow: 1;

    line-height: 1.5;

}



.changelog-footer {

    margin-top: 2.5rem;

    padding-top: 1.2rem;

    border-top: 1px solid rgba(128, 128, 128, 0.2);

    font-size: 0.9rem;

    text-align: center;

    color: var(--muted-light);

}



.dark-theme .changelog-footer {

    color: var(--muted-dark);

}



@keyframes pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.1); }

    100% { transform: scale(1); }

}



.new-badge {

    position: absolute;

    top: -8px;

    right: -8px;

    background-color: var(--accent-light);

    color: white;

    font-size: 0.6rem;

    padding: 2px 4px;

    border-radius: 4px;

    font-weight: bold;

}



.dark-theme .new-badge {

    background-color: var(--accent-dark);

}