body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #0d0d0d; /* Very dark background */
    color: #e0e0e0; /* Light gray text for general content */
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

.container {
    background-color: #1a1a1a; /* Dark container background */
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 550px;
}

h1 {
    text-align: left;
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 30px;
    font-weight: 600;
}

.highlight-text {
    color: #c77dff; /* Purple highlight for "Article" */
}

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

.form-group label,
label[for="newsletterOptIn"] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #b0b0b0; /* Lighter gray for labels */
}

.form-group label .required,
label[for="newsletterOptIn"] .required {
    color: #c77dff; /* Asterisk color */
    margin-left: 2px;
}

input[type="email"] {
    width: calc(100% - 24px); /* Account for padding */
    padding: 12px;
    background-color: #2c2c2c; /* Dark input background */
    border: 1px solid #444444; /* Subtle border */
    border-radius: 6px;
    color: #ffffff;
    font-size: 16px;
    box-sizing: border-box;
}

input[type="email"]:focus {
    outline: none;
    border-color: #c77dff;
    box-shadow: 0 0 0 2px rgba(199, 125, 255, 0.3);
}

.instruction {
    font-size: 13px;
    color: #888888;
    margin-bottom: 12px;
    margin-top: -4px; /* Adjust spacing after main label */
}

.options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.options-grid div { /* This div wraps the checkbox and its label */
    display: contents; /* Make the div not affect layout of its children for flexbox */
}

input[type="checkbox"] {
    display: none; /* Hide original checkbox */
}

.checkbox-label {
    padding: 8px 15px;
    border-radius: 20px; /* Pill shape */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    text-align: center;
}

/* Default tag appearance */
label[for="option1"], label[for="option2"] { background-color: #4a4a38; color: #f0f0d8; border-color: #6e6e57;} /* Personal Finance, Health & Wellness - beige/yellowish */
label[for="option3"] { background-color: #384a38; color: #d8f0d8; border-color: #576e57;} /* Technology & Startups - yellow-green */
label[for="option4"] { background-color: #384a40; color: #d8f0e0; border-color: #576e60;} /* Productivity & Self-Improvement - green */
label[for="option5"] { background-color: #38404a; color: #d8e0f0; border-color: #57606e;} /* Marketing & Business Strategy - blue */
label[for="option6"] { background-color: #404045; color: #e0e0e5; border-color: #606068;} /* News & Current Events - gray/blue */
label[for="option7"] { background-color: #4a384a; color: #f0d8f0; border-color: #6e576e;} /* Investing & Cryptocurrency - pink/purple */

/* Hover effect for tags */
.checkbox-label:hover {
    opacity: 0.8;
}

/* Checked state for tags */
input[type="checkbox"]:checked + .checkbox-label {
    box-shadow: 0 0 0 2px #ffffff; /* White outline for selected */
    opacity: 1;
}
/* Specific brighter checked colors - can be same as default or brighter */
input[type="checkbox"]:checked + label[for="option1"], input[type="checkbox"]:checked + label[for="option2"] { background-color: #E8E8A6; color: #3D3D29; border-color: #E8E8A6;}
input[type="checkbox"]:checked + label[for="option3"] { background-color: #A6E8A6; color: #293D29; border-color: #A6E8A6;}
input[type="checkbox"]:checked + label[for="option4"] { background-color: #A6E8C0; color: #293D33; border-color: #A6E8C0;}
input[type="checkbox"]:checked + label[for="option5"] { background-color: #A6C0E8; color: #29333D; border-color: #A6C0E8;}
input[type="checkbox"]:checked + label[for="option6"] { background-color: #C0C0D0; color: #333338; border-color: #C0C0D0;}
input[type="checkbox"]:checked + label[for="option7"] { background-color: #E8A6E8; color: #3D293D; border-color: #E8A6E8;}


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

.newsletter-group input[type="checkbox"] {
    display: inline-block; /* Show this checkbox */
    width: 16px;
    height: 16px;
    accent-color: #c77dff; /* Match highlight color */
}

.newsletter-group label {
    margin-bottom: 0; /* Reset margin from .form-group label */
    font-weight: normal;
    font-size: 13px;
    color: #b0b0b0;
}

button[type="submit"] {
    background-color: #ffffff;
    color: #1a1a1a; /* Dark text to match container */
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: 100%;
    text-align: center;
}

button[type="submit"]:hover {
    background-color: #f0f0f0; /* Slightly off-white on hover */
}

button[type="submit"]:active {
    transform: scale(0.98);
}

button[type="submit"]:disabled {
    background-color: #555555;
    color: #888888;
    cursor: not-allowed;
}

.error-message {
    color: #ff6b6b; /* Brighter red for dark theme */
    font-size: 14px;
    margin-top: -10px; /* Adjust spacing */
    margin-bottom: 15px;
    text-align: left;
}