body {
    text-align: center;
    font-style: italic;
    margin: 3px;
    background: #1C1C1C; /* Dark Charcoal Background */
    color: #F0E68C; /* Light Goldenrod Text */
}

a {
    text-decoration: none;
    color: #40E0D0; /* Turquoise/Aqua for links */
}

h1 {
    margin: 2px;
    font-size: 24px;
}

hr {
    border-top: 1px solid #40E0D0; /* Aqua separator */
}

/* Changed: Removed original rainbow, replaced with a subtle golden/aqua gradient text effect */
.text-rainbow-animation {
    background-image:
        linear-gradient(to right, #FFD700, #40E0D0, #FFD700); /* Gold to Aqua gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gold-aqua-animation 45s linear infinite; /* Adjusted animation name */
}

@keyframes gold-aqua-animation {
    to {
        background-position: 4500vh; /* Kept large position change for scrolling effect */
    }
}

.header {
    border: 2px solid #FFD700; /* Gold border */
    padding: 5px;
    margin-bottom: 4px;
    border-radius: 5px;
    font-size: 13px;
    box-shadow: 0px 0px 8px #40E0D0; /* Aqua shadow */
    background: #474000; /* Darker header background */
}

.head {
    border: 2px solid #40E0D0; /* Aqua border (was red) */
    padding: 5px;
    margin-bottom: 4px;
    border-radius: 5px;
    font-size: 13px;
    box-shadow: 0px 0px 8px #FFD700; /* Gold shadow */
    background: #333; /* Darker head background */
}

/* --- Scrolling Text Styles (Benefits) --- */
.benefits {
    position: relative;
    overflow: hidden;
    display: flex;
    font-size: 1em;
    flex-direction: column;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 0 5px;
    height: 40px;
}

@keyframes auto-scroll {
    0% {
        transform: translate(0, 60%);
    }
    100% {
        transform: translate(0, -1350%);
    }
}

.benefits span {
    color: #40E0D0; /* Aqua text for the scrolling element (was black) */
    font-size: 0.9em;
    animation: auto-scroll 8s linear infinite;
}

/* --- Result Head --- */
.resulthead {
    background: linear-gradient(to right, #40E0D0, #000000, #40E0D0); /* Aqua to Black gradient (was green/black/green) */
    padding: 4px 8px;
    border: 1px solid #FFD700; /* Gold border (was purple) */
    border-radius: 7px;
    color: #FFFFFF; /* White text for contrast */
    margin-bottom: 4px;
    box-shadow: 0px 0px 5px #40E0D0; /* Aqua shadow */
}

/* --- Buttons --- */
.button {
    display: inline-block;
    padding: 12px 24px;
    margin: 10px;
    font-size: 16px;
    color: #1C1C1C; /* Dark text for contrast */
    background-color: #40E0D0; /* Aqua primary button (was green) */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.call {
    background-color: #FFD700; /* Gold call button (was blue) */
    color: #1C1C1C;
}

/* --- Jodi List Styles --- */
.jodilisthead {
    background: linear-gradient(to right, #474000, #474000, #474000); /* Gold/Aqua Gradient (was red/purple/red) */
    color: yellow; /* Dark text for contrast */
    padding: 4px;
    border: 2px solid #40E0D0; /* Aqua border */
    border-radius: .75em .75em 0em 0em;
    margin-top: 6px;
    margin-bottom: none;
}

.jodilist {
    background: #474000; /* Darker list background (was white) */
    color: #474000; /* Aqua text */
    border: 2px solid #474000; /* Aqua border */
    border-radius: 0em 0em .75em .75em;
    margin-top: none;
    margin-bottom: 5px;
    padding: 0px 0px 7px 0px;
}

.jodi {
    padding: 6px;
    border-bottom: 1px solid #FFD700; /* Gold separator */
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    font-style: italic;
    background: #E7F3F9; /* Slightly lighter dark background for striping (was mintcream) */
    color: #F0E68C; /* Light goldenrod text color */
}

/* --- Panel List Styles --- */
.panellisthead {
    background: linear-gradient(to right, #474000, #474000, #474000); /* Aqua/Gold Gradient (was red/black/red) */
    padding: 4px;
    border: 2px solid #FFD700; /* Gold border (was red) */
    border-radius: .75em .75em 0em 0em;
    color: yellow; /* Dark text for contrast */
    margin-bottom: none;
    font-style: italic;
}

.panellist {
    background: #474000; /* Darker list background (was white) */
    border: 2px solid #474000; /* Gold border (was red) */
    border-radius: 0em 0em .75em .75em;
    margin-top: none;
    margin-bottom: 5px;
    padding: 0px 0px 7px 0px;
}

.panel {
    padding: 6px;
    border-bottom: 1px solid #474000; /* Aqua separator (was red) */
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
    background: #E7F3F9; /* Slightly lighter dark background for striping (was mintcream) */
    color: #474000; /* Light goldenrod text color */
}

/* --- Article & Footer --- */
.article {
    font-size: 14px;
    border: 2px inset #FFD700; /* Gold inset border (was red) */
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
    text-align: left;
    box-shadow: 0px 0px 5px #40E0D0; /* Corrected error (boox-shadow -> box-shadow) and set to Aqua */
    color: #F0E68C; /* Light Goldenrod text */
}

/* Container to center the button and provide universal margins */
.button-container {
    text-align: center;
    padding: 20px 5px; /* Adds vertical padding and small side margin */
    margin: 10px auto;
    /* Using a light background here so the dark button stands out */
    max-width: 95%; /* Ensures a small margin from the device edges on wide screens */
}

/* Download App Button Styles */
.download-app-btn {
    /* Layout and Sizing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    margin: 0; /* Margin is handled by the container */
    width: 90%; /* Button takes up 90% of the container width */
    max-width: 350px; /* Prevents the button from becoming too wide on desktop */

    /* Theme Colors (Aqua and Dark Charcoal) */
    background-color: #40E0D0; /* Aqua background */
    color: #1C1C1C; /* Dark Charcoal text for high contrast */
    border: 2px solid #FFD700; /* Gold border */
    border-radius: 8px;

    /* Typography */
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    
    /* Visual Effects */
    box-shadow: 0 0 15px #FFD700; /* Soft golden glow */
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Hover Effect */
.download-app-btn:hover {
    background-color: #38C0B2; 
    box-shadow: 0 0 25px #FFD700; 
    cursor: pointer;
}

/* Icon Styling */
.download-app-btn::before {
    content: '↓'; /* Downward arrow character */
    font-size: 22px;
    margin-right: 10px;
    color: #1C1C1C;
}

/* Media Query for smaller screens (Optional, but ensures even better mobile fit) */
@media (max-width: 480px) {
    .download-app-btn {
        font-size: 16px;
        padding: 12px 20px;
    }
}

.footer {
    border: 2px solid #40E0D0; /* Aqua border (was yellow) */
    border-radius: 5px;
    padding: 4px;
    font-weight: bold;
    font-size: 18px;
    font-style: italic;
    background: #FFD700; /* Gold background (was yellow) */
    color: #1C1C1C; /* Dark text for contrast */
}