.signup-modal-content {
    text-align: center;
    max-width: 450px;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.signup-modal-content p {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--gray-600);
}

.signup-modal-content .google-signup-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    width: 80%;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.continue-link {
    display: block;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}

.continue-link:hover {
    color: var(--gray-700);
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(42, 133, 244, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(42, 133, 244, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(42, 133, 244, 0);
    }
}


.highlight-for-login {
    animation: pulse-glow 1.5s ease-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Source Sans Pro', sans-serif; 
    background-color: #ffffff;
    color: #1f2937;
    line-height: 1.5;
    min-height: 100vh;
}

:root {
    --yarngpt-green: hsl(142, 72%, 29%);
    --yarngpt-green-hover: hsl(142, 72%, 24%);
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
}

.logo-image {
    height: 40px;
    width: auto;
}



.header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem 1.5rem;
    position: relative;
    z-index: 100;
}

@media (max-width: 1280px) {
    .welcome-title {
        font-size: 2.75rem;
    }
}

.header-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.tagline {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.875rem;
}

.nav-link {
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--gray-900);
}

.nav-separator {
    color: var(--gray-400);
}

.get-started-btn:hover {
    background: var(--yarngpt-green-hover);
}

/* Main Layout */
.main-layout {
    display: flex;
}

body:not(.in-reader-view) #readerView {
    display: none;
}


body.in-reader-view #readerView {
    display: block;
}


body.in-reader-view .sidebar,
body.in-reader-view #input-container {
    display: none;
}


.sidebar {
    width: 320px;
    min-width: 320px;
    background: #ffffff;
    border-right: 1px solid var(--gray-200);
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.voice-settings {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.select-wrapper {
    position: relative;
}

.select-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    background: white;
    font-size: 0.875rem;
    color: var(--gray-900);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    padding-right: 2.5rem;
}

.select-input:focus {
    outline: none;
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 3px rgba(104, 187, 134, 0.1);
}

.voice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}





.voice-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.recent-yarns {
    margin-top: 0rem;
    padding-top: 0rem;
}

.yarns-placeholder {
    text-align: center;
    padding: 2rem 0;
}

.no-yarns {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

.no-yarns-desc {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.yarns-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.yarn-item {
    padding: 0.75rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.yarn-item--latest {
    border-color: var(--yarngpt-green);
    background-color: var(--gray-50);
}

.yarn-play-btn-container {
    flex-shrink: 0;
}

.yarn-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background-color: white;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.yarn-play-btn:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
}
.yarn-play-btn.playing {
    background-color: var(--yarngpt-green);
    border-color: var(--yarngpt-green);
    color: white;
}
.yarn-play-btn .spinner {
    width: 1rem;
    height: 1rem;
}

.yarn-item-info {
    flex-grow: 1;
    overflow: hidden;
}

.yarn-item-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yarn-item-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}


.yarn-item-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem; 
}


.yarn-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background-color: white;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}


.yarn-action-btn:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
}


.yarn-action-btn.toggle-download-menu:hover {
    color: var(--yarngpt-green);
}


.yarn-action-btn.yarn-delete-btn:hover {
    background-color: hsl(0, 100%, 97%);
    color: hsl(0, 72%, 51%);
    border-color: hsl(0, 90%, 85%);
}

.equalizer {
    display: flex;
    gap: 2px;
    height: 16px;
    align-items: flex-end;
}
.equalizer span {
    width: 3px;
    background-color: currentColor;
    animation: wave 1.2s ease-in-out infinite;
}
.equalizer span:nth-child(2) { animation-delay: 0.2s; }
.equalizer span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wave {
    0%, 100% { height: 4px; }
    50% { height: 16px; }
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.welcome-section {
    background: #ffffff;
    padding: 1.5rem 1.5rem;
}

.welcome-text {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-bottom: 0rem;
}

.animated-headline-item.is-visible {
    opacity: 1;
}


 

.features-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
}

.feature-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(104, 187, 134, 0.1);
    color: var(--yarngpt-green);
}

.feature-icon svg {
    width: 30px;
    height: 30px;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}

.feature-desc {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
}


/* TABLET: 2 columns */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* MOBILE: 1 column (stacked) */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}


/* The title container is a good idea if you plan to keep badges. Let's refine it. */
.feature-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem; /* Increased space below the title */
}



/* Keep your badge style if you use it, it's well-styled */
.feature-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 999px;
    background-color: hsl(45, 100%, 95%);
    color: hsl(35, 80%, 40%); 
    border: 1px solid hsl(40, 100%, 85%);
}



/* Input Section */
.input-section {
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: 1rem 2rem 2rem 2rem;
}

.input-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}



.tab:hover:not(.active) {
    color: var(--gray-900);
}

.content-area {
    max-width: 64rem;
    margin: 0 auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.text-input {
    width: 100%;
    min-height: 16rem;
    padding: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--gray-900);
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.text-input:focus, .url-input:focus {
    outline: none;
    /* OLD BORDER: border-color: var(--yarngpt-green); */
    border-color: #A5B4FC; /* A soft, complementary blue */
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); /* The "ring" effect */
}

.text-input::placeholder {
    color: var(--gray-500);
}

.url-input-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.url-input {
    flex: 1;
    padding: 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-900);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.url-input:focus {
    outline: none;
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 3px rgba(104, 187, 134, 0.1);
}

.process-url-btn {
    background: var(--yarngpt-green);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.process-url-btn:hover {
    background: var(--yarngpt-green-hover);
}

.process-url-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.document-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    border: 2px dashed var(--gray-300);
    border-radius: 0.5rem;
    text-align: center;
}

.document-upload svg {
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.document-upload p {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.browse-files-btn {
    background: var(--gray-200);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.browse-files-btn:hover {
    background: var(--gray-300);
}

.browse-files-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.5rem;
    gap: 1rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.char-count {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.char-count.error {
    color: #ef4444; /* A vivid red for errors */
    font-weight: 500;
}


.start-yarning-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--yarngpt-green);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.start-yarning-btn:hover {
    background: var(--yarngpt-green-hover);
}

.start-yarning-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#readerView {
    padding: 2rem 3rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 1280px) { /* This targets screens 1280px and wider */
    #readerView {
        max-width: 960px; /* Increased from 800px. You can adjust this value. */
    }
}

/* --- NEW READER VIEW HEADER STYLES --- */
.reader-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.reader-header h3 {
    font-size: 1.5rem;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}

.reader-header p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 600px; /* Keeps the paragraph readable */
    margin: 0 auto; /* Centers the paragraph block */
}

.reader-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}


.back-to-input-btn {
    background: transparent;
    color: var(--gray-500);
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.back-to-input-btn:hover {
    color: var(--yarngpt-green);
}

.reader-master-controls {
    display: flex;
    gap: 1rem;
}



.master-play-btn {
    background: var(--yarngpt-green);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.master-play-btn:hover {
    background: var(--yarngpt-green-hover);
}

.master-play-btn svg {
    width: 24px;
    height: 24px;
}

.master-download-btn {
    background: var(--gray-600);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.master-download-btn:hover {
    background: var(--gray-800);
}

.master-download-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
}

.master-download-btn .spinner {
    width: 24px;
    height: 24px;
}


.paragraph-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
    border: 1px solid transparent;
}

.paragraph-container.playing {
    background-color: rgba(104, 187, 134, 0.05);
    border-color: rgba(104, 187, 134, 0.2);
}

.paragraph-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.paragraph-text {
    flex: 1;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gray-700);
}

.paragraph-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.paragraph-duration {
    font-size: 0.8rem;
    color: var(--gray-500);
    width: 40px;
    text-align: center;
}

.play-paragraph-btn, .download-paragraph-btn {
    padding: 0.5rem;
    background: none;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.play-paragraph-btn:hover, .download-paragraph-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.play-paragraph-btn:disabled, .download-paragraph-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--gray-100);
    color: var(--gray-400);
}

.play-paragraph-btn .spinner {
    width: 1.25rem;
    height: 1.25rem;
}

/* Per-Paragraph Settings */
.paragraph-settings {
    display: flex;
    gap: 1rem;
    padding-left: 56px; /* Align with text (button width + gap) */
    align-items: center;
}

.paragraph-select {
    max-width: 150px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    background-color: var(--gray-50);
}

.cancel-paragraph-btn {
    padding: 0.5rem;
    background: none;
    border: none; /* Make it borderless for a cleaner look */
    color: var(--gray-400); /* A subtle gray */
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cancel-paragraph-btn:hover {
    background: #FEF2F2; /* Light red background on hover */
    color: #EF4444; /* Red icon color on hover */
}


/* Loading States */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {

    /* 2. Push the main layout down by the exact height of the fixed header */
    .main-layout {
        flex-direction: column;
        height: auto;
    }

    #readerView {
        order: 1; /* When visible, it's first */
    }
    .welcome-section {
        order: 2; /* Welcome section is first in the default view */
    }
    .sidebar {
        order: 4; /* Sidebar correctly comes AFTER welcome but BEFORE input */
    }
    .input-section {
        order: 3; /* Input section is last */
    }

    /* Re-apply styles that were lost on the sidebar due to 'display: contents' */
    .sidebar {
        width: 100%;
        min-width: unset;
        border-right: none;
        padding: 1.5rem;
        border-bottom: none;
        margin-bottom: 2rem;
    }
    
    #readerView, .input-section, .welcome-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* --- END OF REVISED MOBILE FIX --- */


    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content {
        display: flex; /* Re-establish it as a flex container */
        flex-direction: column; /* To stack its children */
        flex: 1; /* Allow it to grow and shrink */
        overflow-y: auto; /* CRITICAL: This allows the entire content area to scroll if needed */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}
/* --- ADDED START: Responsive Navigation Bar Styles --- */

/* The new container for nav links */
body.body-no-scroll {
    overflow: hidden; /* This will prevent scrolling the main page */
}

/* The container for the nav links (Desktop View) */
.nav-links-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* The mobile menu button (hamburger) */
.menu-toggle-btn {
    display: none; /* Hidden on desktop */
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2020; /* Ensure it's on top of everything */
    position: relative; /* Needed for span positioning */
}

.menu-toggle-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--gray-900);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    
}

/* The mobile navigation overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1999; /* Below the menu, above the content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 768px) {
    /* Reduce padding on key sections for smaller screens */
    .header { padding: 1rem; }
    .sidebar, .welcome-section, .input-section, #readerView, .account-container { padding: 1rem; }

    .paragraph-main {
        gap: 0; /* Step 1: Remove the universal gap between all items */
    }

    .paragraph-main .paragraph-text {
        margin-left: 1rem;  /* This keeps the space from the play button */
        margin-right: 0.25rem; /* EDIT THIS VALUE from 0rem to 0.5rem to create a smaller gap */
    }
     
    .paragraph-settings {
        /* REMOVE the padding-left rule */
        /* padding-left: 0; */ 
        flex-wrap: wrap;

        /* ADD these new rules */
        margin-left: 56px; /* Aligns it with the start of the text (play button width + gap) */
        margin-top: 0.5rem;  /* Adds a little space below the text */
    }

    .play-paragraph-btn,
    .toggle-download-menu,
    .cancel-paragraph-btn {
        width: 36px;
        height: 36px;
    }

    .play-paragraph-btn svg {
        width: 18px;
        height: 18px;
    }


    .welcome-title {
        font-size: 2.125rem;  
        line-height: 1.25;
    }
    .welcome-desc {
        font-size: 0.9375rem;
        line-height: 1.65;
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .settings-grid {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

    .settings-grid .form-group {
        flex: 1;
        margin-bottom: 0;
    }

    .settings-grid .voice-selector-display,
    .settings-grid .select-input {
        height: 58px; /* This matches the height of the taller element (the voice selector) */
        box-sizing: border-box; /* Ensures padding and border are included in the height */
    }

    /* Hide the tagline */
    .tagline { display: none; }
    
    .header-nav {
        gap: 1rem;
    }

    /* Show the hamburger button on mobile */
    .menu-toggle-btn {
        display: block;
    }
    
    .menu-toggle-btn span {
        position: absolute;
        left: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .menu-toggle-btn span:nth-child(1) { top: 4px; }
    .menu-toggle-btn span:nth-child(2) { top: 11px; }
    .menu-toggle-btn span:nth-child(3) { top: 18px; }

    /* Animate hamburger to 'X' when active */
    .menu-toggle-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-toggle-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

        .nav-links-container {
        position: fixed; /* Use fixed positioning */
        top: 0;
        right: 0;
        z-index: 2000; /* Above the overlay */
        background: white;
        width: 280px; /* A bit wider */
        max-width: 80%;
        height: 100vh;
        flex-direction: column;
        align-items: stretch; /* Change to stretch */
        padding: 5rem 1.5rem 2rem 1.5rem; /* MODIFIED: Reduced padding */
        gap: 0.5rem; /* MODIFIED: Reduced gap for tighter grouping */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    /* This class will be toggled by JavaScript to show/hide menu */
    .nav-links-container.active {
        transform: translateX(0);
    }

    /* Style links inside the mobile menu */
    .nav-links-container .nav-link,
    .nav-links-container .get-started-btn,
    .nav-links-container .google-signup-btn,
    .nav-links-container .user-profile {
        display: flex;
        width: 100%;
        font-size: 1rem; /* Slightly larger text for mobile */
    }
    .user-profile {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    .nav-links-container .nav-separator {
        display: none;
    }
    .user-profile > span {
        display: block !important;
    }

    /* Other Mobile Styles (unchanged from your file) */
    .pricing-grid { grid-template-columns: 1fr; }
    .plan-card { transform: scale(1) !important; }
    .paragraph-text { font-size: 0.9375rem; }
    .paragraph-settings { padding-left: 0; flex-wrap: wrap; }
    .url-input-container { flex-direction: column; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .api-key-display { flex-direction: column; align-items: stretch; }

    .nav-links-container.active .nav-link,
    .nav-links-container.active .user-menu-link {
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease, color 0.2s ease; /* Added color transition */
    }

    .nav-links-container.active .nav-link:hover,
    .nav-links-container.active .user-menu-link:hover {
        background-color: var(--gray-100);
        color: var(--gray-900); /* Added a color change for better feedback */
    }

    .nav-links-container a[href="logout"] {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--gray-200);
    }

    .nav-links-container .nav-link--api {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--gray-200);
    }
}


.video-form-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; 
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
}


.spinner {
    display: inline-block;
}

.voice-card-skeleton {
  height: 80px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 8px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ADDED: New Header Styles */
.header-nav {
    gap: 1.5rem; /* Adjust gap */
}

.google-signup-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.google-signup-btn:hover {
    background-color: var(--gray-50);
}


/* ADDED: Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
}
.modal-close-btn:hover {
    color: var(--gray-700);
}

.modal-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--gray-900);
}

.modal-step {
    margin-bottom: 1.25rem;
}

.modal-step h4 {
    margin-bottom: 0.5rem;
    color: var(--yarngpt-green);
}

.modal-step p, .modal-step ul {
    color: var(--gray-600);
    line-height: 1.6;
}

.modal-step ul {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

/* Specific styles for the pricing modal container */
.modal-content.pricing-modal-content {
    max-width: 900px;
}

/* The grid that holds the plan cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default to 3 columns for desktop */
    gap: 2rem;
    margin-top: 2rem;
}

/* Styling for an individual plan card */
.plan-card {
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column; /* Use flexbox for alignment */
    transition: transform 0.2s, box-shadow 0.2s;
}

.plan-card h3 {
    font-size: 1.25rem;
    color: var(--yarngpt-green);
}

.plan-card .plan-price {
    font-size: 2rem;
    font-weight: 700;
    margin: 1rem 0;
}

.plan-card .plan-price .plan-price-unit {
    font-size: 1rem;
    font-weight: 400;
}

.plan-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    color: var(--gray-600);
    flex-grow: 1; /* Pushes the button to the bottom */
}

.plan-card li {
    margin-bottom: 0.75rem;
}

.plan-card .select-plan-btn {
    margin-top: auto; /* Aligns button at the bottom of the card */
}

/* Tablet view: Switch to 2 columns */
@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile view: Switch to 1 column and allow scrolling */
@media (max-width: 768px) {
    .modal-content.pricing-modal-content {
        /* Allow the modal itself to scroll if the content is too tall for the screen */
        max-height: 85vh;
        overflow-y: auto;
    }

    .pricing-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
    }

    /* Highlight the recommended plan even on mobile, but don't scale it */
    .plan-card[style*="transform"] {
        transform: scale(1) !important;
    }
}

/* Style for the 'Get started' button */
.get-started-btn {
    display: inline-block;
    /* OLD: background: var(--yarngpt-green); */
    background-image: linear-gradient(to right, hsl(142, 60%, 35%), var(--yarngpt-green));
    color: white;
    padding: 0.6rem 1.25rem; /* Slightly more padding */
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border: none; /* Make sure there's no border */
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.1), 0 2px 8px -2px rgba(0,0,0,0.08);
}

.get-started-btn:hover {
     /* OLD: background: var(--yarngpt-green-hover); */
     transform: translateY(-2px);
     box-shadow: 0 7px 20px -3px rgba(0,0,0,0.15), 0 4px 10px -2px rgba(0,0,0,0.1);
 }

/* ADDED START: Upload Progress Bar Styles */
.upload-progress-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border: none;
    border-radius: 4px;
    background-color: var(--gray-200);
}

/* For Chrome, Safari */
progress::-webkit-progress-bar {
    background-color: var(--gray-200);
    border-radius: 4px;
}

progress::-webkit-progress-value {
    background-color: var(--yarngpt-green);
    border-radius: 4px;
    transition: width 0.2s ease-in-out;
}

/* For Firefox */
progress::-moz-progress-bar {
    background-color: var(--yarngpt-green);
    border-radius: 4px;
}
/* ADDED END */
/* --- ADDED START: Styles for non-interactive inputs --- */

/* Style for read-only inputs that prompt for login on click */
#urlInput:read-only {
    background-color: var(--gray-100);
    opacity: 0.7;
    cursor: pointer; /* Use 'pointer' to encourage clicking */
}

#urlInput:read-only:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--gray-300);
}

/* Consistent style for the main text area when disabled for guests */
#textInput:disabled {
    background-color: var(--gray-100);
    opacity: 0.7;
    cursor: not-allowed;
}
/* --- ADDED END --- */

.paragraph-container.has-error {
    border-color: #ef4444; /* A tailwind red-500 color */
    background-color: rgba(239, 68, 68, 0.05);
}
/* --- ADDED END --- */

.paragraph-container.playing {
    background-color: rgba(104, 187, 134, 0.05);
    border-color: rgba(104, 187, 134, 0.2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A dedicated class for the premium action button */
.upgrade-plan-btn {
    background-color: #6D28D9; /* A strong, confident purple */
    transition: background-color 0.2s ease-in-out;
}

.upgrade-plan-btn:hover {
    background-color: #5B21B6; /* A slightly darker shade for feedback */
}



#animated-headline {
    display: inline-block;
    transition: opacity 0.4s ease-in-out;
}

#animated-headline.fade-out {
    opacity: 0;
}



/* --- ADDED: Keyframe Animation for Smooth Transitions --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 
.voice-card-play-btn {
    position: relative; 
    flex-shrink: 0;     
    width: 33px;        /* Changed from 44px */
    height: 33px;       /* Changed from 44px */
    border-radius: 50%;
    background-color: var(--gray-100); 
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    z-index: 10;
}

.voice-card-play-btn svg, .voice-card-play-btn .spinner {
    width: 18px;
    height: 18px;
}

.voice-card:hover .voice-card-play-btn {
    background-color: var(--gray-200);
    border-color: var(--gray-300);
}

.voice-card-info {
    text-align: left; /* Professional left-alignment */
    flex-grow: 1;     /* Allows text block to fill available space */
}


.voice-card {
    position: relative;
    display: flex;
    flex-direction: row; 
    align-items: center; 
    gap: 1rem;           
    padding: 1rem;       
    border: 1px solid transparent; /* Set border to transparent */
    border-radius: 0.75rem; 
    background: white;
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
    /* This shadow perfectly simulates a 0.5px border */
    box-shadow: inset 0 0 0 0.5px var(--gray-300);
}

/* Add a subtle shadow on hover for a lifting effect */
.voice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--gray-300);
}

/* Make the active state more prominent */
.voice-card.active {
    /* Use a calm, secondary blue for the border color */
    border: 1px solid #A5B4FC; 
    
    /* The background color is now a very light gray for a subtle lift */
    background-color: var(--gray-50);

    /* IMPORTANT: Remove the box-shadow entirely to reduce prominence */
    box-shadow: none; 
}


.voice-name {
    font-weight: 600; /* Bolder for more importance */
    font-size: 0.9375rem; /* 15px */
    color: var(--gray-900);
    margin-bottom: 0.1rem;
}

.voice-desc {
    font-size: 0.8125rem; /* 13px */
    color: var(--gray-500);
}

.download-menu-container {
    position: relative; /* This is the anchor for the absolute menu */
    display: flex;
    align-items: center;
}

/* Style for the main download button that opens the menu */
.toggle-download-menu {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-200);
    background-color: white;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.toggle-download-menu:hover {
    background-color: var(--gray-50);
    color: var(--yarngpt-green);
    border-color: var(--gray-300);
}

/* The dropdown menu itself (hidden by default) */
.download-menu {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 110%; /* Position it above the button */
    right: 0;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid var(--gray-200);
    z-index: 100;
    width: 150px; /* Set a fixed width */
    overflow: hidden; /* Ensures buttons conform to border-radius */
    padding: 0.25rem;
}

/* Show the menu when it has the .active class */
.download-menu.active {
    display: block;
}

/* Styling for the buttons inside the menu */
.download-menu-btn {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}


.download-menu .download-menu-btn:first-child {
    border-bottom: 1px solid var(--gray-200);
}


.download-menu-btn:hover:not(:disabled) {
    background-color: var(--gray-100);
    color: var(--gray-900);
}

.download-menu-btn:disabled {
    color: var(--gray-400);
    cursor: not-allowed;
}


.nav-balance {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    background-color: hsla(142, 72%, 29%, 0.1);
    border: 1px solid hsla(142, 72%, 29%, 0.2); 
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--yarngpt-green-hover);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
}



/* --- START: Definitive Animated Headline Styles --- */

/* The main container's only job is to center the slides. */
.animated-headline-container {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center; /* Ensures the wrapper is always centered */
}

 .animated-headline-item {
    width: 100%;
    display: none; /* Kept hidden by default */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.animated-headline-item.is-visible {
    opacity: 1;
}
   
/* Keyframe for our new dynamic animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Base styles for the main container */
.animated-headline-container {
    position: relative;
    width: 100%;
    min-height: 150px; /* Provides consistent spacing */
    display: flex;
    align-items: center;
    justify-content: center;
}

 

.animated-headline-item.is-visible {
    display: flex; /* Show the active item */
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.headline-content-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 95rem;
    width: 100%;
    padding: 0 1.5rem;
}

.headline-text-content {
    flex-grow: 1; 
    text-align: center; /* This is the only change needed here */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The fluid font size remains the same */
.welcome-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem 0;
    line-height: 1.25;
    font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3.1rem);
}

.headline-subtext {
    font-size: 1.125rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* 
 * THE ANCHOR: This is the most critical change. We give the image container
 * a fixed width and height, ensuring it never moves and never changes size.
 */
.headline-image-container {
    width: 450px;       /* A fixed, predictable width */
    height: 300px;      /* A fixed height to create a consistent 4:3 frame */
    flex-shrink: 0;     /* Prevents the container from ever shrinking */
    position: relative;
    /* REMOVED: aspect-ratio and flex-basis are replaced by fixed dimensions */
}

/* 
 * THE MAGIC: This forces every image to perfectly fill the fixed container
 * without distortion, guaranteeing they all appear the same size.
 */
.headline-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Makes the image fill the space, cropping if needed */
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
}


/* --- START: New Voice Selector Styles --- */

/* Main container - MUST be relative for the popup positioning */
.voice-selector-container {
    position: relative;
}

/* The visible bar showing the selected voice */
.voice-selector-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    background-color: white;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.voice-selector-display:hover {
    border-color: var(--yarngpt-green);
}

/* Shared style for all circular voice avatars */
.voice-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--gray-100); /* Shows while image loads */
}

/* The text area in the selector bar */
.voice-selector-info {
    flex-grow: 1;
}

.voice-selector-info .voice-name {
    font-weight: 500;
    color: var(--gray-800);
}

/* The dropdown arrow icon */
.voice-selector-arrow {
    color: var(--gray-500);
    transition: transform 0.3s ease;
}

/* Rotate the arrow when the popup is open */
.voice-selector-container.open .voice-selector-arrow {
    transform: rotate(180deg);
}

 


@media (max-width: 900px) {
    .animated-headline-container {
        /* This lets the container grow automatically to fit its content on mobile */
        height: auto; 
 
        padding: 2rem 0; 
    }

    
    .headline-content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
 
    }


    .headline-text-content {
        order: 2;
        text-align: center;
    }

    .headline-image-container {
        display: none;
        order: 1;
        width: 320px;
        height: 240px; 
        max-width: 100%; 
    }

    .welcome-title {
        line-height: 1.2;
    }

    .headline-subtext {
        font-size: 1rem;
        margin: 0 auto;
    }
}

/* --- START: Centered Voice Modal Styles --- */

/* Replace your old .voice-popup rule with this */
.voice-popup {
    display: none;
    position: fixed;

    /* This is the classic centering technique */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Set a responsive width */
    max-width: 500px;
    width: 90%;
    
    background-color: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    z-index: 1001;
    padding: 1.5rem;
    animation: scaleInFadeIn 0.3s ease-out;
}

.voice-popup.active {
    display: block;
}

.voice-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.voice-popup-overlay.active {
    display: block;
}

.voice-popup-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
    transition: color 0.2s;
}

.voice-popup-title {
    margin-bottom: 1.25rem;
    color: var(--gray-800);
    font-size: 1.125rem;
    text-align: center;
}

.voice-popup-close-btn:hover {
    color: var(--gray-700);
}

@keyframes scaleInFadeIn {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.voice-popup-grid {
    display: flex;             /* CHANGE: Use Flexbox for a single row layout */
    overflow-x: auto;          /* CHANGE: Enable horizontal scrolling */
    overflow-y: hidden;        /* NEW: Disable vertical scrolling */
    padding-bottom: 1rem;      /* NEW: Add space for the scrollbar so it doesn't overlap content */
    gap: 1rem;
    
    /* These properties hide the scrollbar visually for a cleaner look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.voice-popup-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Ensure items in the flex row don't shrink */
.voice-popup-grid .voice-popup-item {
    flex-shrink: 0;
    width: 90px; /* Give items a fixed width */
}

.voice-popup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* Slightly smaller gap to keep it compact */
    padding: 0.75rem; /* Uniform padding */
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    border: 1px solid transparent;
    width: auto;
}


.voice-popup-item:hover {
    background-color: var(--gray-50);
    transform: translateY(-2px); /* Subtle lift effect */
}

/* Add a style for the currently selected voice in the popup */
.voice-popup-item.selected {
    background-color: hsla(142, 72%, 29%, 0.1);
    border-color: hsla(142, 72%, 29%, 0.3);
}

.voice-popup-item .voice-name {
    font-size: 0.9rem; /* A slightly larger font for clarity */
    font-weight: 500;
    color: var(--gray-800);
}


.voice-popup-item .voice-avatar-container {
    position: relative;
    display: flex; /* Helps center the button */
    align-items: center;
    justify-content: center;
}


/* Show the button on hover */
.voice-popup-item:hover .voice-play-btn {
    opacity: 1;
    transform: scale(1);
}

/* Keep the button visible when its voice is playing */
.voice-popup-item.playing .voice-play-btn {
    opacity: 1;
    transform: scale(1);
    background-color: var(--yarngpt-green);
}

.voice-play-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* A subtle effect for the avatar when a voice is playing */
.voice-popup-item.playing .voice-avatar {
    opacity: 0.8;
}

/* ADD THESE NEW RULES at the end of the voice modal styles */

/* Container for the avatar and the play button */
.voice-popup-item .voice-avatar-container {
    position: relative;
    display: flex; /* Helps center the button */
    align-items: center;
    justify-content: center;
}

.voice-play-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s ease-in-out;
    padding: 0;
}


/* Add a subtle hover effect to the visible button */
.voice-popup-item:hover .voice-play-btn {
    transform: scale(1.1); /* Slightly enlarge the button */
    background-color: var(--yarngpt-green); /* Change background color on hover */
}

/* Keep the button visible when its voice is playing or loading */
.voice-popup-item.playing .voice-play-btn,
.voice-popup-item.loading .voice-play-btn {
    opacity: 1;
    transform: scale(1);
    background-color: var(--yarngpt-green);
}

.voice-play-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Also style the spinner inside this button */
.voice-play-btn .spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* A subtle effect for the avatar when a voice is playing or loading */
.voice-popup-item.playing .voice-avatar,
.voice-popup-item.loading .voice-avatar {
    opacity: 0.7;
    filter: blur(1px);
}

.tab-tooltip {
    position: absolute; /* Allows us to position it anywhere on the page */
    background-color: var(--gray-700);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 280px; /* Constrains its width */
    font-size: 0.875rem;
    line-height: 1.6;
    z-index: 1000;

    /* Hidden by default with a fade effect */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Class to make the tooltip visible */
.tab-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tab-tooltip-content strong {
    color: #a7f3d0; 
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* The little arrow pointing to the button */
.tab-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--gray-700); /* Must match the tooltip background */
    bottom: -8px; /* Positions it at the bottom */
    left: 50%;
    transform: translateX(-50%);
}

.tabs-wrapper {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    /* Make sure there is NO overflow property here */
}

.tabs-container {
    display: flex;
    flex-wrap: wrap; /* THIS is the key rule that makes it work */
    justify-content: center; /* This centers the buttons nicely */
    gap: 0.75rem;
    padding: 0.5rem;
}

.tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background-color: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tab:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-900);
    transform: translateY(-2px);
}

.tab.active {
    background-color: var(--gray-900);
    border-color: var(--gray-900);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15);
}

.tab.active:hover {
    background-color: var(--gray-700);
    border-color: var(--gray-700);
    transform: translateY(0);
}


.integrated-input-container {
    position: relative;
    border-radius: 1rem; /* 16px */
    background-color: #f9fafb; /* gray-50 */
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.05);
    overflow: visible;
}

/* Modify the main text area */
#text-content .text-input {
    min-height: 20rem; /* Taller by default */
    border: none;
    background-color: transparent; /* Makes the container background visible */
    border-radius: 1rem 1rem 0 0;
    box-shadow: none;
    padding-bottom: 5rem; /* Crucial: Creates space for the controls bar */
    scroll-padding-bottom: 5rem;
}
#text-content .text-input:focus {
    box-shadow: none; /* Remove the focus ring from the textarea itself */
}

/* The controls bar at the bottom */
.integrated-input-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem; /* 12px 16px */
    background-color: #ffffff;
    border-top: 1px solid var(--gray-200);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.controls-left, .controls-right {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
}


.integrated-input-controls .voice-selector-display {
    padding: 0.375rem; /* 6px */
    border-radius: 9999px; /* Pill shape */
    border: none;
    background-color: var(--gray-100);
}
.integrated-input-controls .voice-selector-display:hover {
    background-color: var(--gray-200);
}
.integrated-input-controls .voice-avatar {
    width: 40px;
    height: 40px;
}
.integrated-input-controls .voice-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.integrated-input-controls .voice-selector-arrow {
    display: block;
}

.integrated-input-controls .select-input {
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* Increased right padding for the arrow */
    border-radius: 9999px; /* Pill shape */
    border: none;
    background-color: var(--gray-100);
    font-weight: 500;
    
    /* ADDED: The SVG arrow icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    -webkit-appearance: none; /* This is important to ensure the custom arrow is shown */
    -moz-appearance: none;
    appearance: none;
}

.integrated-input-controls .select-input:focus {
    box-shadow: none;
}

/* --- START: Definitive Mobile Layout for the Entire Input Section --- */
@media (max-width: 768px) {
    /* 1. Add more vertical space around the tabs for breathing room */
    .input-tabs {
        margin-bottom: 2rem; /* Was 1.5rem */
    }

    /* 2. Main controls container: Stack the rows and add padding */
    .integrated-input-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    /* 3. Top row (selectors): Use grid for perfect 50/50 columns */
    .controls-left {
        display: grid;
        grid-template-columns: 1fr; /* Single column, full width */
        gap: 0.75rem;
    }

    /* 4. Style BOTH selectors for better tappability and a consistent, modern look */
    .integrated-input-controls .voice-selector-display,
    .integrated-input-controls .select-input {
        padding: 0.75rem 0.5rem;
        justify-content: center;
        font-size: 0.875rem;
        height: 46px; /* Give them a consistent height */
        box-sizing: border-box;
        background-color: var(--gray-100); /* Consistent background */
        border: 1px solid var(--gray-200); /* Subtle border for definition */
    }

    .integrated-input-controls .select-input {
        text-align: center;
        text-align-last: center;
    }

    /* 5. Bottom row (char count & button): Make the button the primary focus */
    .controls-right {
        display: flex;
        align-items: center;
        gap: 1rem; /* More space between char count and button */
    }


    .integrated-input-controls .char-count {
        flex-shrink: 0;
        padding: 0 0.25rem;
        color: var(--gray-500);
        font-size: 0.875rem;
    }


    .integrated-input-controls .start-yarning-btn {
        flex-grow: 1;
        justify-content: center; /* This centers the icon and text within the large button */
        height: 46px; /* Match the height of the selectors for vertical rhythm */
        font-weight: 600;
        background: var(--yarngpt-green); /* Ensure it has the correct brand color */
    }

    .integrated-input-controls .start-yarning-btn:hover {
        background: var(--yarngpt-green-hover);
    }
}


.custom-select-wrapper {
    position: relative;
    width: 150px; /* Give it a specific width */
    z-index: 10;  /* ADD THIS LINE */
}

/* The visible, clickable part */
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 9999px; /* Pill shape */
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: var(--gray-800);
}

.custom-select-wrapper.open .custom-select-trigger,
.custom-select-trigger:hover {
    border-color: var(--yarngpt-green);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(104, 187, 134, 0.1);
}

/* The arrow icon inside the trigger */
.custom-select-arrow {
    transition: transform 0.3s ease;
    color: var(--gray-500);
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
}

/* The list of options */
.custom-select-options {
    position: absolute;
    bottom: calc(100% + 8px); /* Position above the trigger */
    left: 0;
    right: 0;
    background-color: white;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 0.5rem;
    
    /* Hidden by default with a nice transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.custom-select-wrapper.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* A single option in the list */
.custom-select-option {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-select-option:hover {
    background-color: var(--gray-100);
}


.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


.paragraph-settings {
    padding-left: 56px;
    display: flex;
    gap: 1rem;
}


.paragraph-settings .custom-select-wrapper {
    flex: 1;
    width: auto;
}

.paragraph-settings .custom-select-trigger {
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
}


.paragraph-settings .custom-select-options {
    bottom: calc(100% + 5px);
    top: auto;
}


@media (max-width: 768px) {
    .paragraph-settings {
        margin-left: 0;
        padding-left: 0;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
}


.paragraph-voice-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.paragraph-voice-trigger:hover {
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 3px rgba(104, 187, 134, 0.1);
}

.paragraph-voice-trigger .voice-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.paragraph-voice-trigger .voice-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-800);
}

.paragraph-settings .paragraph-voice-trigger,
.paragraph-settings .custom-select-trigger {
    padding: 0.375rem 0.6rem;
    height: 38px;
    box-sizing: border-box;
}


.paragraph-settings .paragraph-voice-trigger,
.paragraph-settings .custom-select-wrapper {
    flex-grow: 0;
    flex-shrink: 1;
    width: auto;    
    min-width: 120px; 
}


.paragraph-settings .paragraph-voice-trigger .voice-avatar {
    width: 32px;
    height: 32px;
}


.paragraph-settings .voice-name,
.paragraph-settings .custom-select-value {
    font-size: 0.8125rem; 
}


.paragraph-settings .custom-select-arrow {
    width: 16px;
    height: 16px;
}


@media (max-width: 768px) {
    .paragraph-settings {
        padding-left: calc(36px + 1rem);
        margin-left: 0;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
}


@media (max-width: 768px) {
    .content-area {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    .controls {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    .integrated-input-container {
        max-width: 100%;
    }
}

.logo-link {
    display: flex;       
    align-items: center;
    width: 160px;       
    max-height: 40px;
    flex-shrink: 0;
}

.logo-image {
    width: 80%;
    height: 70%;
    object-fit: contain;
}


.hero-cta-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.8rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap; 
}


.cta-button {
    background-color: #ffffff;
    color: var(--yarngpt-green);
    border-color: var(--yarngpt-green);
}

.cta-button:hover {
    background-color: hsla(142, 72%, 29%, 0.05);
    transform: translateY(-2px);
}

.cta-button.cta-button--primary {
    background: var(--yarngpt-green);
    color: white;
    border-color: var(--yarngpt-green);
}

.cta-button.cta-button--primary:hover {
    background: var(--yarngpt-green-hover);
    border-color: var(--yarngpt-green-hover);
}


@media (max-width: 768px) {
    .hero-cta-container {
        flex-direction: row;
        justify-content: center;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .cta-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}

.mobile-text {
    display: none;
}


@media (max-width: 768px) {
    .desktop-text {
        display: none;
    }

    .mobile-text {
        display: inline;
    }
}

.nav-link--api {
    background-color: transparent;
    border: 1.5px solid var(--yarngpt-green);
    color: var(--yarngpt-green);
    padding: 0.5rem 1.2rem; 
    border-radius: 9999px;
    font-weight: 600; 
    transition: all 0.2s ease;
}

.nav-link--api:hover {
    background-color: var(--yarngpt-green);
    color: white;
    transform: translateY(-1px);
}

/* On mobile, inside the hamburger menu, it should still look like a plain link */
@media (max-width: 768px) {
    .nav-links-container.active .nav-link--api {
        background-color: transparent;
        border: none;
        font-weight: 400;
        color: var(--gray-600);
        transform: none;
    }

    .nav-links-container.active .nav-link--api:hover {
        /* Reset the hover effect as well */
        background-color: transparent;
        color: var(--gray-900);
    }
}

/* --- END: Enhanced API Nav Link --- */

/* --- START: User Dropdown Menu Styles --- */
.user-menu-container {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-menu-trigger:hover {
    background-color: var(--gray-100);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.user-menu-chevron {
    color: var(--gray-500);
    transition: transform 0.3s ease;
}

/* Rotate chevron when the menu is open */
.user-menu-trigger.active .user-menu-chevron {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: white;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1);
    z-index: 100;
    width: 180px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.user-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: background-color 0.2s;
}

.user-menu-link:hover {
    background-color: var(--gray-100);
    color: var(--gray-900);
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }


    .nav-links-container.active .mobile-only {
        display: flex;
        width: 100%;
    }
}

.input-3d-effect {
    box-shadow: none;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-300);
    transition: all 0.2s ease-in-out;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.06);
}


.input-3d-effect:focus {
    background-color: #ffffff;
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 4px hsla(142, 72%, 29%, 0.1);
}

@media (max-width: 768px) {
    .welcome-text {
        margin-bottom: 2rem;
    }

    .hero-cta-container, .hero-welcome-message {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .input-tabs {
        margin-bottom: 1rem;
    }

    .input-section {
        padding-top: 1rem;
    }
    
    #text-content .text-input {
        min-height: 15rem;
        padding-bottom: 6rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 9.5rem;
        scroll-padding-bottom: 9.5rem;
    }
}


@media (max-width: 768px) {
    .animated-headline-container {
        padding-top: 1rem;
        padding-bottom: 0;
        min-height: auto;
    }


    .welcome-text {
        margin-bottom: 0.5rem;
    }

    .welcome-section {
        padding-top: 0.5rem;
        padding-bottom: 0;
    }
}


@keyframes pulse-glow-green {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.highlight-new-yarn {
    animation: pulse-glow-green 1.5s ease-out;
}

.mobile-only-btn {
    display: none;
}

body.user-is-logged-in .welcome-section {
    padding-bottom: 4rem;
}


@media (max-width: 768px) {
    .desktop-only-btn {
        display: none;
    }

    .mobile-only-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--yarngpt-green);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        flex-shrink: 0;
    }

    .mobile-only-btn:hover {
        background: var(--yarngpt-green-hover);
    }


    .controls-right {
        justify-content: space-between;
        width: 100%;
    }

    .integrated-input-controls .char-count {
        font-weight: 500;
        color: var(--gray-600);
    }

    body.user-is-logged-in .welcome-section {
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
  body.user-is-guest .hero-cta-container {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
  }
}


@media (max-width: 768px) {
    body.user-is-logged-in .welcome-section {
        padding-bottom: 0.5rem;
    }
}

.conversation-lines-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.conversation-line-item {
    background-color: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow 0.2s;
}

.conversation-line-item:focus-within {
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 3px rgba(104, 187, 134, 0.1);
}

.conversation-text-input {
    width: 100%;
    min-height: 70px;
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
}

.conversation-line-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.conversation-line-controls .paragraph-voice-trigger,
.conversation-line-controls .custom-select-wrapper {
    flex: 1;
}

.remove-line-btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background-color: white;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.remove-line-btn:hover {
    background-color: hsl(0, 100%, 97%);
    color: hsl(0, 72%, 51%);
    border-color: hsl(0, 90%, 85%);
}

.conversation-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#add-conversation-line-btn {
    padding: 0.6rem 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}


@media (max-width: 768px) {
    .conversation-line-controls {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }

    .remove-line-btn {
        margin-left: 0;
        margin-top: 0.5rem;
        align-self: flex-end;
    }
}




@media (max-width: 768px) {
    .video-table {
        border: none;
    }

    .video-table thead {
        display: none;
    }


    .video-table tr {
        display: block;
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        padding: 1.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    }

    .video-table td {
        display: block;
        padding: 0;
        border-bottom: none;
        text-align: left;
    }

    .video-table td[data-label="File Name"]::before {
        display: none;
    }


    .video-table .video-filename {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 1rem;
        word-break: break-all;
    }

    .video-table td[data-label="Date Processed"],
    .video-table td[data-label="Status"] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-top: 1px solid var(--gray-100);
        font-size: 0.875rem;
    }

    .video-table td[data-label="Date Processed"]::before,
    .video-table td[data-label="Status"]::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--gray-600);
    }

    .video-table td[data-label="Action"] {
        padding-top: 1.25rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--gray-100);
    }

    .video-table .download-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        font-weight: 600;
    }

    .video-table td[data-label="Date Processed"] {
        align-items: flex-start;
    }


    .video-table .video-date {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    
    .video-table .date-part {
        font-size: 0.875rem;
        color: var(--gray-700);
        font-weight: 500;
    }


    .video-table .time-part {
        font-size: 0.8125rem;
        color: var(--gray-500);
        margin-top: 0.125rem;
    }
}

#text-content .text-input {
    overscroll-behavior: contain;
}

.confirmation-modal-content {
    max-width: 420px;
    text-align: center;
    padding: 2.5rem 2rem 2rem 2rem;
}

.confirmation-icon {
    margin: 0 auto 1.5rem auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation-icon svg {
    width: 28px;
    height: 28px;
}

/* Icon Color Variants */
.confirmation-icon.type-danger {
    background-color: #FEF2F2; /* Tailwind red-50 */
    color: #EF4444; /* Tailwind red-500 */
}
.confirmation-icon.type-warning {
    background-color: #FFFBEB; /* Tailwind amber-50 */
    color: #F59E0B; /* Tailwind amber-500 */
}
.confirmation-icon.type-info {
    background-color: #EFF6FF; /* Tailwind blue-50 */
    color: #3B82F6; /* Tailwind blue-500 */
}

#confirmation-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

#confirmation-message {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 2rem;
}

#confirmation-message strong {
    color: var(--gray-700);
    font-weight: 600;
}

.confirmation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Base Button Style */
.confirmation-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Secondary (Cancel) Button */
.confirmation-actions .btn-secondary {
    background-color: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.confirmation-actions .btn-secondary:hover {
    background-color: var(--gray-50);
}

/* Primary and Danger (Confirm) Buttons */
.confirmation-actions .btn-primary {
    background-color: var(--yarngpt-green);
    color: white;
}
.confirmation-actions .btn-primary:hover {
    background-color: var(--yarngpt-green-hover);
}

.confirmation-actions .btn-danger {
    background-color: #EF4444; /* red-500 */
    color: white;
}
.confirmation-actions .btn-danger:hover {
    background-color: #DC2626; /* red-600 */
}

/* --- START: Site Footer Styles --- */
.site-footer {
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 2rem 1.5rem;
    margin-top: 2rem;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer p {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.footer-nav {
    display: flex;
    gap: 1.5rem;
}

.footer-nav a {
    font-size: 0.875rem;
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--yarngpt-green);
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

.login-consent {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: center;
    margin-top: 1rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.login-consent a {
    color: var(--gray-600);
    text-decoration: underline;
}


/* --- START: New Pricing Page Styles --- */

/* Main container for the pricing page */
.pricing-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 2rem;
    text-align: center;
}

/* Header section with title and subtitle */
.pricing-header {
    margin-bottom: 4rem;
}

.pricing-header h1 {
    font-size: clamp(2rem, 5vw, 2.75rem); /* Responsive font size */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.pricing-subtitle {
    font-size: 1.125rem;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.pricing-grid {
    display: grid;
    /* This is the key change: it forces exactly 3 columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch; /* Use stretch to make cards equal height */
}

/* Individual pricing card */
.price-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 2.5rem 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards equal height */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08);
}

/* Content inside the cards */
.plan-name {
    font-size: 1.5rem;
    color: var(--yarngpt-green);
    font-weight: 600;
}

.plan-description {
    color: var(--gray-500);
    margin-top: 0.25rem;
    min-height: 40px; /* Reserve space */
}


.plan-price {
    font-size: 3rem;
    font-weight: 700;
    margin: 1.5rem 0;
    color: var(--gray-800);
}

.price-unit {
    font-size: 1rem;
    color: var(--gray-500);
    font-weight: 400;
}

.features-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1; /* Pushes the button to the bottom */
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-600);
}

.features-list li svg {
    color: var(--yarngpt-green);
    flex-shrink: 0;
}

/* Call-to-action buttons */
.plan-button {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Primary button style */
.plan-button {
    background: var(--yarngpt-green);
    color: white;
}
.plan-button:hover {
    background: var(--yarngpt-green-hover);
    transform: translateY(-2px);
}

/* Secondary (outline) button style */
.plan-button-secondary {
    background: white;
    color: var(--yarngpt-green);
    border: 1px solid var(--yarngpt-green);
}
.plan-button-secondary:hover {
    background: hsla(142, 72%, 29%, 0.05);
}

/* FAQ Section */
.faq-section {
    margin-top: 6rem;
    border-top: 1px solid var(--gray-200);
    padding-top: 4rem;
}

.faq-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 2rem;
}

.faq-placeholder {
    color: var(--gray-500);
}



@media (max-width: 900px) {
    .pricing-grid {
       align-items: stretch;
    }
}


.download-btn {
    background-color: var(--yarngpt-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center; 
}

.silence-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gray-50);
}

.silence-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-600);
    font-weight: 500;
}

.silence-duration-input {
    width: 60px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    text-align: center;
}

/* ADD THIS TO THE END OF styles.css */
.silence-item-reader {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gray-50);
    padding: 1rem 1.5rem;
}

.silence-duration-input-reader {
    width: 60px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    text-align: center;
    background-color: white;
}

.beta-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;      /* Small and subtle */
    font-weight: 600;
    line-height: 1;
    color: #3B82F6;          /* A friendly blue text color */
    background-color: #DBEAFE; /* A very light blue background */
    border-radius: 9999px;  /* Pill shape */
    margin-left: 0.1rem;    /* Space from the main text */
    vertical-align: middle; /* Ensures it aligns nicely with the text */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* A little extra spacing for readability */
}

/* Make the tag look good when the button is active */
.tab.active .beta-tag {
    color: #1E3A8A; /* A darker blue for contrast on a light background */
    background-color: #ffffff; /* Make the tag's background white */
}


.voice-popup-item {
    position: relative;
}

/* 2. Style the tooltip itself: a light theme. */
.voice-description-tooltip {
    position: absolute;
    top: calc(80% + 0px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: var(--gray-700);
    border: 1px solid var(--gray-200); /* Added a border for definition */
    
    padding: 0.2rem 0.2rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Soft shadow */
    
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
    width: auto;
    
    z-index: 10;
    pointer-events: none;
    
    /* Animation remains the same */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -5px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.voice-popup-item:hover .voice-description-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}


.info-tooltip {
    position: absolute;
    background-color: var(--gray-700);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 280px;
    font-size: 0.875rem;
    line-height: 1.6;
    z-index: 2000; /* High z-index to appear on top */

    /* Hidden by default with a fade/slide effect */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Start slightly above */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none; /* Prevents the tooltip from interfering with mouse events */
}

.info-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Move to final position */
}

.info-tooltip-content strong {
    color: #a7f3d0; /* A light green for contrast */
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.info-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--gray-700); 
    top: -8px; 
    left: 50%;
    transform: translateX(-50%);
}

.body-sticky-footer {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the body is at least as tall as the viewport */
}

/* This targets the main content area of the page (e.g., <main>) */
.body-sticky-footer main {
    flex-grow: 1; /* Allows the main content to grow and push the footer down */
}


.reader-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.reader-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08);
}

.reader-card-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.reader-card-header h3 {
    font-size: 1.25rem;
    color: var(--gray-800);
    margin: 0;
}

.reader-card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.reader-card-info-item {
    display: flex;
    justify-content: space-between;
    color: var(--gray-600);
}

.reader-card-info-item .value {
    font-weight: 500;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reader-card-footer {
    padding: 1rem 1.25rem;
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    border: 2px dashed var(--gray-200);
    border-radius: 0.75rem;
    background-color: var(--gray-50);
}

.empty-state svg {
    color: var(--gray-400);
    margin-bottom: 1rem;
}

/* --- NEW: Analytics Page Styles --- */
.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-card-icon svg {
    width: 24px;
    height: 24px;
}

.stat-card.plays .stat-card-icon { background-color: #DBEAFE; color: #3B82F6; }
.stat-card.finishes .stat-card-icon { background-color: #D1FAE5; color: #10B981; }

.page-header .action-btn {
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
}

/* --- NEW: "Get Code" Modal Styles --- */
.code-modal-content {
    max-width: 700px;
}

.code-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
}

.code-tab {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    border-bottom: 2px solid transparent;
}

.code-tab.active {
    color: var(--yarngpt-green);
    border-bottom-color: var(--yarngpt-green);
}

.code-panel { display: none; }
.code-panel.active { display: block; }

.code-block {
    position: relative;
    background-color: var(--gray-900);
    color: var(--gray-200);
    padding: 0rem;
    border-radius: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.copy-code-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--gray-700);
    color: white;
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; /* <-- This is the corrected value */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.page-header h1 {
    font-size: 1.75rem;
    color: var(--gray-800);
}

.action-btn {
    font-size: 0.875rem !important;
    padding: 0.6rem 1rem !important;
}

/* Card layout for the reader list */
.reader-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.reader-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08);
}

.reader-card-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.reader-card-header h3 {
    font-size: 1.25rem;
    color: var(--gray-800);
    margin: 0;
}

.reader-card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.reader-card-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gray-600);
}

.reader-card-info-item .value {
    font-weight: 500;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reader-card-footer {
    padding: 1rem 1.25rem;
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Beautiful empty state for when there are no readers */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    border: 2px dashed var(--gray-200);
    border-radius: 0.75rem;
    background-color: var(--gray-50);
}

.empty-state svg { color: var(--gray-400); margin-bottom: 1rem; }
.empty-state h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* Analytics Page: Stat Cards */
.stat-card .value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-card-icon svg { width: 24px; height: 24px; }
.stat-card.plays .stat-card-icon { background-color: #DBEAFE; color: #3B82F6; }
.stat-card.finishes .stat-card-icon { background-color: #D1FAE5; color: #10B981; }

/* "Get Code" Modal Styles */
.code-modal-content { max-width: 700px; }
.code-tabs { display: flex; border-bottom: 1px solid var(--gray-200); margin-bottom: 1.5rem; }
.code-tab { padding: 0.75rem 1.25rem; cursor: pointer; border: none; background: none; font-size: 0.875rem; font-weight: 500; color: var(--gray-500); border-bottom: 2px solid transparent;}
.code-tab.active { color: var(--yarngpt-green); border-bottom-color: var(--yarngpt-green); }
.code-panel { display: none; }
.code-panel.active { display: block; }

/* In styles.css */

/* In styles.css */

.code-block {
    position: relative;
    background-color: var(--gray-900);
    color: var(--gray-200);
    padding: 0; /* Remove padding from the outer container */
    border-radius: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    overflow: hidden; /* This is important for the rounded corners */
}

.copy-code-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--gray-700); color: white; border: none; padding: 0.3rem 0.6rem; border-radius: 0.25rem; font-size: 0.75rem; cursor: pointer; }
.copy-code-btn:hover { background: var(--gray-600); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
#edit-create-modal .form-group {
    display: flex;
    flex-direction: column;
}
.form-group label { margin-bottom: 0.5rem; font-weight: 500; color: var(--gray-700); }
#edit-create-modal .form-group input, #edit-create-modal .form-group select { padding: 0.75rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; font-size: 1rem; }
.full-width { grid-column: 1 / -1; }
.domain-input-group { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.domain-input-group input { flex-grow: 1; }


/* --- NEW: Reader List & Analytics Page Styles --- */

/* General page layout improvements */
.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* <-- This is the corrected value */
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.page-header h1 {
    font-size: 1.75rem;
    color: var(--gray-800);
}

.action-btn {
    font-size: 0.875rem !important;
    padding: 0.6rem 1rem !important;
}

/* Card layout for the reader list */
.reader-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.reader-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08);
}

.reader-card-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.reader-card-header h3 {
    font-size: 1.25rem;
    color: var(--gray-800);
    margin: 0;
}

.reader-card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.reader-card-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gray-600);
}

.reader-card-info-item .value {
    font-weight: 500;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reader-card-footer {
    padding: 1rem 1.25rem;
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Beautiful empty state for when there are no readers */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    border: 2px dashed var(--gray-200);
    border-radius: 0.75rem;
    background-color: var(--gray-50);
}

.empty-state svg { color: var(--gray-400); margin-bottom: 1rem; }
.empty-state h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* --- NEW: Form Styling Improvements --- */

.form-grid {
    display: grid;
    /* Creates two columns of equal width */
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

#edit-create-modal .form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--gray-700);
}

.form-group input, .form-group select {
    padding: 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 1rem;
}

/* A utility class to make a form group span both columns */
.full-width {
    grid-column: 1 / -1;
}

/* Specific styling for the domain input fields */
.domain-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.domain-input-group input {
    flex-grow: 1; /* Allows the input to take up available space */
}

/* --- NEW: Analytics Page Styles --- */

/* Grid for the main statistics cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Individual statistic card */
.stat-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.stat-card h3 {
    font-size: 1rem;
    color: var(--gray-600);
    margin: 0;
}

.stat-card .value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

/* Colored icons for each stat */
.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-card-icon svg {
    width: 24px;
    height: 24px;
}

/* Specific colors for 'Plays' and 'Finishes' cards */
.stat-card.plays .stat-card-icon { background-color: #DBEAFE; color: #3B82F6; } /* Light blue bg, dark blue icon */
.stat-card.finishes .stat-card-icon { background-color: #D1FAE5; color: #10B981; } /* Light green bg, dark green icon */


/* Refined Table Styles */
.reader-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.reader-table th, .reader-table td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.reader-table th {
    background-color: var(--gray-50);
    color: black;
    font-weight: bold;
}

.reader-table td a {
    color: var(--yarngpt-green);
    text-decoration: none;
}

.reader-table td a:hover {
    text-decoration: underline;
}


.page-header h1 { order: 0; }
.page-header .action-btn { order: 2; }



.reader-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--gray-50);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.reader-stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: block;
    margin-bottom: 0.25rem;
}

.reader-stat-item .stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
}

.reader-color-preview {
    display: flex;
    gap: 0.5rem;
}

.color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--gray-300);
}

/* --- Analytics Page UI Enhancements --- */
.stat-card .stat-value-large {
    font-size: 3rem; /* Larger font for the main number */
}

/* Player Preview in Modal */
.player-preview-container {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--gray-100);
    border-radius: 0.5rem;
}
.player-preview-container > p {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.player-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.player-preview .preview-text {
    font-weight: 500;
}

/* --- Create/Edit Reader UI Enhancements --- */
.form-preview-layout {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2rem;
}

@media (min-width: 1024px) {
    .form-preview-layout {
        /* 2 columns on desktop, preview is narrower */
        grid-template-columns: 2fr 1fr;
    }
}

.preview-pane .preview-sticky-content {
    position: sticky;
    top: 2rem; /* Sticks below the header */
}

.preview-pane h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.live-player-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.live-player-preview .player-name {
    font-weight: 600;
}

.live-player-preview .player-branding {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: .4s;
    border-radius: 28px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--yarngpt-green);
}
input:checked + .slider:before {
    transform: translateX(22px);
}

/* --- Create/Edit Reader UI Enhancements --- */
.form-preview-layout {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 2rem;
}

@media (min-width: 1024px) {
    .form-preview-layout {
        /* 2 columns on desktop, preview is narrower */
        grid-template-columns: 2fr 1fr;
    }
}

.preview-pane .preview-sticky-content {
    position: sticky;
    top: 2rem; /* Sticks below the header */
}

.preview-pane h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.live-player-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.live-player-preview .player-name {
    font-weight: 600;
}

.live-player-preview .player-branding {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: .4s;
    border-radius: 28px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--yarngpt-green);
}
input:checked + .slider:before {
    transform: translateX(22px);
}


.account-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    min-height: calc(100vh - 200px);
}

/* Modern page header */
.page-header {
    margin-bottom: 3rem;
    text-align: left;
}

/* In styles.css */
.page-header h1 {
    font-family: 'Poppins', sans-serif; /* Use the new font */
    font-size: 2.25rem; /* Make it a bit larger */
    font-weight: 600;
    color: #111827; /* A very dark gray, almost black */
    letter-spacing: -0.02em; /* Tighten up letter spacing slightly */
}

.page-subtitle {
    font-size: 1.125rem; /* Slightly larger for better hierarchy */
    color: var(--gray-500);
    margin-top: 0.5rem;
    max-width: 500px; /* Constrain line length for readability */
}

/* Premium layout with proper spacing */
.form-preview-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Modern form sections with card design */
.account-section {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}

.account-section:hover {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.04);
}

/* Section headers with modern typography */
.account-section h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.account-section > p {
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    margin-top: 0;
}

/* Enhanced form grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

/* Professional form inputs */
.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.625rem;
    letter-spacing: 0.01em;
}

.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
    color: var(--gray-900);
}

.form-group input[type="text"]:hover,
.form-group select:hover {
    border-color: var(--gray-300);
}

.form-group input[type="text"]:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 4px rgba(104, 187, 134, 0.1);
    background-color: white;
}

/* Modern color picker */
.form-group input[type="color"] {
    width: 100%;
    height: 52px;
    padding: 0.375rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
}

.form-group input[type="color"]:hover {
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 4px rgba(104, 187, 134, 0.05);
}

/* Premium toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 32px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 32px;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(255, 255, 255, 0.8);
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .slider {
    background: linear-gradient(to bottom, var(--yarngpt-green), var(--yarngpt-green-hover));
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(24px);
}

.toggle-switch:hover .slider {
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(255, 255, 255, 0.8),
        0 0 0 4px rgba(104, 187, 134, 0.1);
}

/* Professional domain inputs */
#domains-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.domain-input-group {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.domain-input-group input {
    flex: 1;
    padding: 0.875rem 1.125rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: 'Monaco', 'Courier New', monospace;
    transition: all 0.2s ease;
    background-color: var(--gray-50);
}

.domain-input-group input:hover {
    border-color: var(--gray-300);
    background-color: white;
}

.domain-input-group input:focus {
    outline: none;
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 4px rgba(104, 187, 134, 0.1);
    background-color: white;
}

.domain-input-group .action-btn {
    padding: 0.875rem 1.25rem;
    min-width: 48px;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.domain-input-group .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.domain-input-group .action-btn:active {
    transform: translateY(0);
}

/* Premium preview pane */
.preview-pane {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.02);
    position: sticky;
    top: 2rem;
}

.preview-pane h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1.75rem;
    letter-spacing: -0.01em;
}

/* Realistic player preview matching yarn-reader.js */
.live-player-preview {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: visible;
}

/* Play button styling to match the real player */
.live-player-preview svg {
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s;
    cursor: pointer;
}

.live-player-preview svg:hover {
    transform: scale(1.05);
}

/* Controls section */
.live-preview-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    flex-grow: 1;
}

/* Title bar */
.live-preview-text .player-name {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

/* Progress bar simulation */
.live-preview-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.live-preview-time {
    font-size: 0.8rem;
    font-family: 'Monaco', 'Courier New', monospace;
    flex-shrink: 0;
    opacity: 0.8;
}

.live-preview-bar {
    flex-grow: 1;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.live-preview-bar-filled {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    border-radius: 2px;
    transition: width 0.2s;
}

/* Secondary controls */
.live-preview-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.25rem;
}

.live-preview-control-btn {
    opacity: 0.7;
    transition: opacity 0.2s;
    cursor: pointer;
}

.live-preview-control-btn:hover {
    opacity: 1;
}

.live-preview-control-btn svg {
    width: 16px;
    height: 16px;
    padding: 0;
}

.live-preview-speed {
    font-weight: 600;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Branding */
.live-preview-text .player-branding {
    position: absolute;
    bottom: 1rem;
    right: 1.25rem;
    font-size: 0.75rem;
    opacity: 0.6;
    font-weight: 400;
}

/* Mobile preview adjustments */
@media (max-width: 768px) {
    .live-player-preview {
        gap: 1rem;
    }
    
    .live-player-preview svg {
        width: 48px;
        height: 48px;
        padding: 12px;
    }
    
    .live-preview-text .player-name {
        font-size: 0.8rem;
    }
    
    .live-preview-time {
        font-size: 0.75rem;
    }
    
    .live-preview-control-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .live-preview-speed {
        font-size: 0.8rem;
    }
}

/* Info box styling */
.preview-pane .account-section {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    padding: 1.75rem;
    margin-top: 2rem;
    border-radius: 8px;
    box-shadow: none;
}

.preview-pane .account-section:hover {
    box-shadow: none;
}

.preview-pane .account-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}

.preview-pane .account-section p {
    margin: 0;
}

/* Professional action buttons */
.form-preview-layout > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 2rem;
    margin-top: 1rem;
}

.get-started-btn {
    padding: 0.875rem 2rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.01em;
}

.get-started-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
}

.get-started-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.1);
}

/* In styles.css */

/* Change the main action button color to a more modern, slightly desaturated green */
.get-started-btn.action-btn {
    background-color: #111827; /* Use the dark heading color for high contrast */
    color: white;
    font-weight: 600;
    border-radius: 8px; /* A slightly softer corner */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.get-started-btn.action-btn:hover {
    transform: translateY(-2px);
    background-color: #374151; /* A slightly lighter gray on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}



/* Keep preview on the side on desktop */
@media (min-width: 1025px) {
    .preview-pane {
        position: sticky;
        top: 2rem;
    }
}

/* Responsive refinements */
@media (max-width: 1024px) {
    .form-preview-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .preview-pane {
        order: -1;
        position: static;
    }
    
    .account-container {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .account-container {
        padding: 1.5rem 1rem;
        background: white;
    }
    
    .page-header h1 {
        font-size: 1.75rem;
    }
    
    .account-section {
        padding: 1.75rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .domain-input-group {
        flex-direction: column;
    }
    
    .domain-input-group .action-btn {
        width: 100%;
    }
    
    .preview-pane {
        padding: 1.75rem;
    }
    
    .form-preview-layout > div:last-child {
        flex-direction: column-reverse;
    }
    
    .get-started-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Accessibility improvements */
*:focus-visible {
    outline: 2px solid var(--yarngpt-green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Loading states */
.get-started-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Placeholder styling */
input::placeholder {
    color: var(--gray-400);
    font-weight: 400;
}

/* Better disabled states */
input:disabled,
select:disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: 0.6;
    border-color: var(--gray-200);
}

/* Helper text */
.form-group small {
    font-size: 0.8125rem;
    color: var(--gray-500);
    display: block;
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Add subtle animation on page load */
.account-section {
    animation: fadeInUp 0.4s ease-out;
}

.preview-pane {
    animation: fadeInUp 0.4s ease-out 0.1s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Professional select dropdown arrow */
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

/* Add depth to cards */
.account-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 0, 0, 0.05) 50%,
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-section {
    position: relative;
}

.account-section:hover::after {
    opacity: 1;
}

/* === Professional Table Row Line Fix === */

/* Find and REPLACE your existing .reader-table rule with this one */
.reader-table {
    width: 100%;
    border-collapse: collapse; /* This is the key change */
    /* border-spacing is removed as it's not needed with collapse */
}

/* Find and REPLACE your existing .reader-table td rule with this one */
.reader-table td {
    padding: 1.5rem; /* Increased padding slightly to maintain vertical space */
    vertical-align: middle;
    color: var(--gray-700);
    font-weight: 500;
}

/* Find and REMOVE these two rules for the rounded corners on cells */
/* .reader-table tr td:first-child { ... } */
/* .reader-table tr td:last-child { ... } */

/* ADD this new rule to apply a clean, unbroken line to each row */
.reader-table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background-color 0.2s ease;
}

/* ADD this new rule for a nice hover effect on the entire row */
.reader-table tbody tr:hover {
    background-color: var(--gray-50); /* A very light gray for a subtle highlight */
}

.action-cell {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--gray-500);
    transition: background-color 0.2s, color 0.2s;
}

/* Make default icons a darker, more confident gray */
.icon-btn {
    color: var(--gray-600);
}

/* Change the icon hover color to match the new button style for consistency */
.icon-btn:hover {
    background-color: #f3f4f6; /* A very light gray */
    color: #111827; /* Dark text color on hover */
}
.icon-btn.danger:hover {
    background-color: #FEF2F2; /* red-50 */
    color: #EF4444; /* red-500 */
}

.form-modal-content {
    max-width: 800px; /* Wider than the other modals */
    text-align: left;
}

/* In styles.css */

/* Wider modal for the form */
.form-modal-content {
    max-width: 600px;
    text-align: left;
}

/* Numbered Form Sections */
.form-section {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.form-section-description {
    font-size: 0.875rem;
    color: var(--gray-500);
}
.section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
    flex-shrink: 0;
    margin-top: 4px;
}

/* Styled Language Radio Pills */
.language-pills {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.language-pills input[type="radio"] {
    display: none;
}
.language-pills span {
    display: block; padding: 0.6rem 1.2rem;
    border: 1px solid var(--gray-300); border-radius: 9999px;
    cursor: pointer; transition: all 0.2s ease; font-weight: 500;
}
.language-pills input[type="radio"]:checked + span {
    background-color: var(--yarngpt-green); color: white; border-color: var(--yarngpt-green);
}

/* Custom Color Inputs */
.color-input-wrapper { display: flex; flex-direction: column; }
.custom-color-input {
    position: relative; display: flex; align-items: center;
    gap: 0.75rem; padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300); border-radius: 8px; cursor: pointer;
}
.custom-color-input input[type="color"] {
    position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.custom-color-input .color-swatch {
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gray-200);
}
.custom-color-input .hex-code {
    font-family: monospace; font-weight: 500;
}

/* Form Action Buttons */
.form-actions {
    display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem;
}
.form-actions button {
    padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.btn-primary { background-color: var(--gray-900); color: white; }
.btn-primary:hover { background-color: var(--gray-700); }
.btn-secondary { background-color: white; color: var(--gray-700); border-color: var(--gray-300); }
.btn-secondary:hover { background-color: var(--gray-100); }

/* In styles.css */

/* Container for the domain pills */
.domain-pills {
    display: flex;
    flex-wrap: wrap; /* Allows pills to wrap onto the next line if there are many */
    gap: 0.5rem; /* Space between each pill */
}

/* Styling for a single domain pill */
.domain-pills span {
    background-color: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.75rem; /* Vertical and horizontal padding */
    border-radius: 9999px; /* Makes it a pill shape */
    font-size: 0.8125rem; /* 13px */
    font-family: 'Courier New', Courier, monospace; /* Monospace font looks good for domains */
    font-weight: 500;
    border: 1px solid var(--gray-200); /* A subtle border */
}

.reader-table td:first-child {
    color: var(--gray-800);
    font-weight: 600; /* Makes the name stand out */
    font-size: 0.9375rem; /* 15px */
}

.reader-table td:nth-child(2) {
    max-width: 350px; /* Set a maximum width. Adjust this value as needed. */
    overflow-x: auto; /* Enable horizontal scrolling only when content overflows. */
    white-space: nowrap; /* Ensures the content doesn't wrap to a new line. */
}

.reader-table td:nth-child(2)::-webkit-scrollbar {
    height: 6px; /* Makes the scrollbar thinner */
}

.reader-table td:nth-child(2)::-webkit-scrollbar-thumb {
    background-color: var(--gray-300); /* A subtle gray for the handle */
    border-radius: 10px;
}

.reader-table td:nth-child(2)::-webkit-scrollbar-track {
    background: transparent; /* Make the track invisible */
}

/* Style the scrollbar for Firefox */
.reader-table td:nth-child(2) {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

/* In styles.css */
.domain-pills {
    padding-bottom: 5px; /* Creates space for the scrollbar to sit below the pills */
    padding-right: 10px; /* Ensures the last pill doesn't touch the edge */
}


/* In styles.css */

@media (max-width: 768px) {
    /* Hide the original table headers on mobile */
    .reader-table thead {
        display: none;
    }

    /* Make each row a block-level card */
    .reader-table tr {
        display: block;
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        padding: 1.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
        position: relative; /* This is crucial for positioning the action buttons */
    }

    /* Make table cells stack vertically inside the card */
    .reader-table td {
        display: block;
        padding: 0;
        border-bottom: none;
        text-align: left;
    }


    .reader-table td:first-child {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 1rem;
        padding-right: 5rem;
    }
    
    .reader-table td:nth-child(2) {
        max-width: none;
        overflow-x: visible;
        white-space: normal; 
    }

    .reader-table td:nth-child(2)::before {
        content: 'Allowed Domains';
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--gray-500);
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .reader-table .action-cell {
        position: absolute;
        top: 1rem;
        right: 0.75rem;
    }

    /* Ensure the individual buttons don't have extra background on mobile */
    .action-cell .icon-btn:hover {
        background-color: transparent;
    }
}


/* =================================================================== */
/* ELEVATED STYLES FOR READER ANALYTICS PAGE (reader_analytics.html) */
/* =================================================================== */

/* --- 1. Refined Page Header & Back Link --- */
.back-to-readers-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--gray-500);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.back-to-readers-link:hover {
    color: var(--yarngpt-green);
}

.analytics-page-header h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

/* --- 2. Modernized Statistic Cards --- */
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px; /* Softer corners */
    padding: 1.5rem;
    display: flex;
    align-items: flex-start; /* Align icon and text to the top */
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.07);
}

.stat-card .stat-card-icon {
    margin-bottom: 0; /* Remove margin as we use flex gap now */
    width: 44px; /* Slightly smaller icon container */
    height: 44px;
}

.stat-card .stat-card-icon svg {
    width: 22px;
    height: 22px;
}

.stat-card-content {
    display: flex;
    flex-direction: column;
}

.stat-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-600);
    margin: 0 0 0.25rem 0;
}

.stat-card .value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

/* --- 3. Enhanced "Recent Events" Table --- */
.events-table-container {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.events-table-container h2 {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0 1rem 1rem 1rem;
}

.events-table .event-type-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.event-type-pill.play {
    background-color: #DBEAFE; /* Light Blue */
    color: #1E40AF; /* Dark Blue */
}

.event-type-pill.finish {
    background-color: #D1FAE5; /* Light Green */
    color: #065F46; /* Dark Green */
}

.events-table .page-url-link {
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: var(--gray-600);
    text-decoration: none;
}
.events-table .page-url-link:hover {
    text-decoration: underline;
    color: var(--yarngpt-green);
}

.events-table .event-timestamp {
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* --- 4. Mobile View for Events Table (Card Layout) --- */
@media (max-width: 768px) {
    .events-table thead {
        display: none;
    }

    .events-table tr {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid var(--gray-200);
    }
    .events-table tr:last-child {
        border-bottom: none;
    }

    .events-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        text-align: right; /* Aligns the data to the right */
        border-bottom: none;
    }

    .events-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-600);
        text-align: left; /* Aligns the label to the left */
        margin-right: 1rem;
    }

    .events-table .page-url-link {
        max-width: 180px; /* Adjust width for mobile */
    }
}

/* In styles.css */

/* This makes the modal content area scrollable if it's too tall for the screen */
.form-modal-content {
    padding: 0;
    max-height: 85vh; /* Limit height to 85% of the viewport */
    overflow-y: auto; /* Add a vertical scrollbar only when needed */
}


.form-modal-content .form-actions {
    position: sticky;
    bottom: 0; /* Stick to the absolute bottom of the scroll container */
    background: white; /* Use a solid white background */
    
    /* Add padding inside the footer to align the buttons */
    padding: 1rem 2rem;
    
    /* Use negative margins to break out of the form's padding */
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: 2rem; /* Keep space above the footer */
    
    border-top: 1px solid var(--gray-200);
    
    /* Round the bottom corners to match the modal's shape */
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}


/* In styles.css */

/* --- Style for the "Reader name" input in the readers_list.html modal --- */

/* This rule specifically targets the input field with the id "name" inside the reader form */
#reader-form #name {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
    color: var(--gray-900);
}

/* Add a hover effect for better interactivity */
#reader-form #name:hover {
    border-color: var(--gray-300);
}

/* Add the professional focus glow effect */
#reader-form #name:focus {
    outline: none;
    border-color: var(--yarngpt-green);
    box-shadow: 0 0 0 4px rgba(104, 187, 134, 0.1);
    background-color: white;
}

#reader-form label[for="name"] {
    font-size: 1.125rem; /* Increase font size to match the <h4> elements */
    font-weight: 600;   /* This font-weight is consistent with other titles */
    color: var(--gray-800); /* Use a darker color for more emphasis */
}
/* In styles.css */

/* This new rule styles the container for the "Show Branding" toggle */
.toggle-group {
    margin-top: 1.5rem; /* Adds space above the toggle */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.remove-domain-btn {
    background-color: #fee2e2; /* A light, friendly red (Tailwind red-100) */
    color: #ef4444; /* A strong red for the icon (Tailwind red-500) */
    padding: 0.875rem; /* Creates a nice square shape */
    min-width: auto; /* Overrides any other button styles */
    flex-shrink: 0; /* Prevents the button from shrinking */
}

.remove-domain-btn:hover {
    background-color: #fecaca; /* A slightly darker red on hover (Tailwind red-200) */
    color: #dc2626; /* (Tailwind red-600) */
}



/* In styles.css */

/* Add padding to the title and the form itself */
.form-modal-content .modal-title {
    padding: 2rem 2rem 0;
    margin-bottom: 1.5rem;
}

#reader-form {
    padding: 0 2rem; /* This gives the form sections their side margins back */
}

@media (max-width: 768px) {
    /* Reduce the overall size of the modal on small screens */
    .form-modal-content {
        /* This ensures it doesn't quite touch the screen edges */
        width: calc(100% - 2rem); 
        max-height: 75vh; /* Allow a little more vertical space if needed for scrolling */
    }

    /* Reduce padding for the title area */
    .form-modal-content .modal-title {
        padding: 1.5rem 1.5rem 0; /* Reduced top/side padding */
        font-size: 1.25rem; /* Slightly smaller title */
    }

    /* Reduce padding for the main form area */
    #reader-form {
        padding: 0 1.5rem;
    }

    /* Reduce spacing between and inside form sections */
    .form-section {
        padding: 1.25rem; /* Was 1.5rem */
        margin-bottom: 1rem; /* Was 1.5rem */
    }

    /* Reduce space below the section header */
    .form-section-header {
        margin-bottom: 1rem; /* Was 1.5rem */
    }

    /* Reduce the gap in the color picker grid */
    .form-grid {
        gap: 1rem; /* Was 1.5rem */
    }

    /* Tighten up the sticky footer */
    .form-modal-content .form-actions {
        padding: 0.75rem 1.5rem; /* Reduced vertical padding */
        margin-top: 1.5rem; /* Was 2rem */
    }
    .code-block pre {
        white-space: pre-wrap;   /* This allows the text to wrap to the next line */
        word-break: break-all;   /* This forces a break even in long, unbroken words or URLs */
    }
}

/* === Professional Font & Layout Enhancements === */

/* 1. Expand the main container width for the readers list and other account pages */
.account-container {
    max-width: 1728px; /* Increased from 1280px for a wider layout */
    font-family: 'Inter', sans-serif; /* Set Inter as the default body font for these pages */
}

/* 2. Apply Poppins to all major headings for a clean, modern look */
.page-header h1,
.account-section h2,
.preview-pane h3,
.stat-card h3,
.events-table-container h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em; /* A typical refinement for professional headings */
}

/* 3. Style page subtitles and descriptions for better readability with Inter */
.page-subtitle,
.account-section > p {
    font-family: 'Inter', sans-serif;
}

/* 4. Enhance table typography in readers_list.html */
.reader-table th {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Adds a professional touch to headers */
}

.reader-table td {
    font-family: 'Inter', sans-serif;
}

/* Make the reader name more prominent */
.reader-table td:first-child {
    font-weight: 600;
    font-size: 0.95rem;
}

/* 5. Unify button fonts with Poppins for consistency */
.get-started-btn,
.action-btn,
.icon-btn,
.btn-primary,
.btn-secondary {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* === Domain Pill Font Enhancement === */

/* Apply a clean, monospaced font to the domain pills in the readers list */
.domain-pills span {
    font-family: 'SF Mono', 'Courier New', Courier, monospace;
    font-size: 0.8rem; /* Slightly smaller for a cleaner look */
    font-weight: 500;
}

/* Add this to your styles.css file */
.code-tabs {
    overflow-x: auto; /* Allow horizontal scrolling */
    white-space: nowrap; /* Prevent tabs from wrapping to a new line */
    -ms-overflow-style: none;  /* Hide scrollbar on IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar on Firefox */
}
.code-tabs::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Chrome, Safari, and Opera */
}
.panel-description {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
    padding: 0 0.25rem;
}

.code-block pre {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0.75rem 1.5rem;
    margin: 0; 
}

/* Reduce the bottom margin of the instruction text */
.panel-description {
    margin-top: 1rem; /* Was 1.5rem */
    margin-bottom: 1.25rem; /* Was 1rem */
}

/* Reduce the padding inside the actual code area */
.code-block pre[class*="language-"] {
    padding: 0.25rem !important;; /* Was 1.5rem */
}

/* --- END: Code Modal UI Refinements --- */


.code-modal-content {
    max-width: 600px;
    height: 700px;/* Limit height to 85% of the viewport's height */
    overflow-y: auto;  /* Add a vertical scrollbar ONLY when the content overflows */
}

/* In styles.css */

.code-block {
    position: relative;
    background-color: var(--gray-900);
    color: var(--gray-200);
    padding: 0;
    border-radius: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    overflow: hidden;
}


.code-block pre {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0rem 1rem;
    margin: 0; 
}

@media (max-width: 768px) {
    .code-modal-content {
       
        height: auto;
        max-height: 60vh;
        width: calc(100% - 2rem);
    }
}


.account-container {
    font-family: 'Inter', sans-serif;
}


.page-header h1,
.account-section h2,
.preview-pane h3,
.stat-card h3,
.events-table-container h2,
.form-modal-content .modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em; 
}


.page-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
    max-width: 500px;
}

.reader-table th {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reader-table td {
    font-family: 'Inter', sans-serif;
}

.reader-table td:first-child {
    font-weight: 600;
    font-size: 0.95rem;
}


.get-started-btn,
.action-btn,
.icon-btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.domain-pills span {
    font-family: 'SF Mono', 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    font-weight: 500;
}

/* === FINAL: Refined Reader List Card Layout (Compact Version) === */

.reader-list-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* REDUCED: Space between cards */
}

.reader-card-item {
    position: relative;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.25rem; /* REDUCED: Inner padding of the entire card */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reader-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08);
}

.reader-card-delete-form {
    position: absolute;
    top: 0.75rem; /* REDUCED: Closer to the corner */
    right: 0.75rem; /* REDUCED: Closer to the corner */
}

.reader-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem; /* REDUCED: Slightly smaller title to feel less heavy */
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 1.25rem 0; /* REDUCED: Space below the title */
    padding-right: 2.5rem;
}

/* --- Domains List Styling --- */
.reader-card-domains-list {
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.875rem; /* REDUCED: Padding inside the domains box */
}

.domain-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.domain-item:not(:last-child) {
    margin-bottom: 0.625rem; /* REDUCED: Space between domain items */
}

.domain-item svg {
    flex-shrink: 0;
    color: var(--gray-400);
}

.no-domains-text {
    font-style: italic;
    color: var(--gray-500);
    margin: 0;
}

/* --- Footer Actions Bar --- */
.reader-card-footer-actions {
    display: flex;
    gap: 0.75rem; /* REDUCED: Space between buttons */
    flex-wrap: wrap;
    margin-top: 1.25rem; /* REDUCED: Space above the footer */
    padding-top: 1.25rem; /* REDUCED: Top padding of the footer */
    border-top: 1px solid var(--gray-100);
}

.reader-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-800);
}

.reader-action-btn:hover {
    border-color: var(--yarngpt-green);
    background-color: hsla(142, 72%, 29%, 0.05);
    color: var(--yarngpt-green);
}

/* --- Mobile Layout for Reader Card Buttons --- */
@media (max-width: 768px) {
    .reader-card-footer-actions {
        flex-wrap: nowrap;      /* This is the key: prevents the buttons from wrapping */
        overflow-x: auto;       /* Allows the user to scroll horizontally if buttons overflow */
        padding-bottom: 0.5rem; /* Adds a small amount of space for the scrollbar to exist without looking cramped */

        /* The following rules hide the scrollbar visually for a cleaner look, while keeping the scroll functionality */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;     /* Firefox */
    }

    .reader-card-footer-actions::-webkit-scrollbar {
        display: none; /* Chrome, Safari, and Opera */
    }
}

/* --- Redesigned Horizontal Domain Pills --- */
.reader-card-domains-container {
    display: flex;
    flex-wrap: wrap; /* This is key for horizontal wrapping */
    gap: 0.625rem; /* Space between pills */
}

.domain-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem; /* More horizontal padding for the pill shape */
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 9999px; /* This creates the circular ends */
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem; /* 13px - small and clean */
    font-weight: 500;
    color: var(--gray-700);
}

.domain-pill svg {
    flex-shrink: 0;
    color: var(--gray-400);
}

.domain-pill--none {
    background-color: transparent;
    border-style: dashed;
    color: var(--gray-500);
}


/* --- Mobile Spacing Reduction for Video List --- */
@media (max-width: 768px) {
    .account-container {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .page-header {
        margin-bottom: 0rem;
    }



    .video-table tr {
        display: block;
        background-color: white;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-top: 1.25rem;
        padding-top: 0rem;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    }

}

.yarn-play-btn .spinner {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    border-width: 2px;
}


.embed-link-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem; /* Increased space */
}


.embed-reader-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    /* THIS IS THE KEY CHANGE: A darker, more prominent gray */
    color: var(--gray-700); 
    padding: 0.35rem 0.75rem; /* Slightly more padding for better tappability */
    border-radius: 0.5rem;   /* A slightly larger radius */
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* The hover effect remains the same, but will feel more impactful now */
.embed-reader-link:hover {
    color: var(--yarngpt-green);
    background-color: hsla(142, 72%, 29%, 0.05);
    transform: translateY(-1px); /* Add a subtle lift on hover */
}

/* The icon color will now match the new text color */
.embed-reader-link svg {
    flex-shrink: 0;
    color: var(--gray-500); /* Keep icon slightly more subtle than text */
    transition: color 0.2s ease;
}

.embed-reader-link:hover svg {
    color: var(--yarngpt-green); /* Make the icon green on hover as well */
}


/* === (REVISED) Form Helper Text Style === */
.form-helper-text {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Creates space between the icon and the text */
    font-size: 0.875rem; /* A slightly more readable 14px */
    font-weight: 500; /* Medium weight for better clarity and presence */
    color: var(--gray-600); /* Darker gray for better contrast and readability */
    margin-top: 1rem; /* A little more breathing room from the elements above */
    padding-left: 0; /* We no longer need the old padding */
}

.form-helper-text svg {
    flex-shrink: 0;
    color: var(--gray-400);
}

#textInput:read-only {
    cursor: pointer;
    background-color: var(--gray-50); /* Optional: A slightly different background for the prompt state */
}
/* ============================================== */
/* NEW: Minimalist Vertical Scrollbar Styles      */
/* ============================================== */

/* 1. Reset the container style to remove the fade effect */
.voice-scroller-container {
    position: relative;
    padding: 0; /* Remove padding as it's not needed for the scrollbar */
}

/* 2. Add padding directly to the grid and style the scrollbar */
.voice-popup-grid {
    padding: 0.5rem; /* Add padding inside the scrollable area */

    /* For modern browsers (Chrome, Safari, Edge) */
    &::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    &::-webkit-scrollbar-track {
        background: transparent; /* Make the track invisible */
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--gray-300); /* A subtle gray for the handle */
        border-radius: 10px;
        border: 2px solid white; /* Creates a nice padding effect around the handle */
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--gray-400); /* Darken handle on hover */
    }
    
    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

.info-notice {
    background-color: #FFFBEB; /* Amber-50: Warm background */
    color: #92400E;           /* Amber-800: Dark, readable brown/orange */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    border: 1px solid #FDE68A; /* Amber-200: Subtle border */
    
    /* New: A thick left border draws attention without being aggressive */
    border-left-width: 4px;
    border-left-color: #F59E0B; /* Amber-500: Matches your 'Add Funds' button */
}

.info-notice strong {
    color: #B45309; /* Amber-700: Slightly darker for emphasis */
    font-weight: 700;
}

/* --- Change #4: Adjust the grid and recalculate row heights --- */
.voice-popup-grid {
    display: grid;
    /* Increase the min-width to accommodate the larger 80px avatar + padding */
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;

    /* 
     * RECALCULATED DESKTOP HEIGHT for ONE row.
     * New item height is ~150px.
    */
    max-height: 155px;
}

.voice-popup-item {
    width: auto; /* Allow items to fill the grid column width */
}

/* --- END: Add this new code in its place --- */

/* ============================================== */
/* NEW: Vertical Voice Scroller Arrow Styles      */
/* ============================================== */

/* 1. Make the container a positioning context */
.voice-scroller-container {
    position: relative;
    /* This creates a fade effect at the top and bottom where the arrows will sit */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    padding: 0 0.5rem; /* Add some side padding to the scrollable area */
}

/* 2. Base style for the new vertical arrows (hidden by default) */
.scroll-arrow-vertical {
    display: none; /* Hidden on mobile by default */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: var(--gray-700);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease;
}

.scroll-arrow-vertical:hover {
    transform: translateX(-50%) scale(1.05);
    background-color: white;
}

/* 3. Media query to show the arrows ONLY on desktop screens */
@media (min-width: 769px) {
    .scroll-arrow-vertical {
        display: flex; /* Show the arrows */
    }
}

/* 4. Position the up and down arrows */
#voice-scroll-up {
    top: 4px;
}

#voice-scroll-down {
    bottom: 4px;
}

/* 5. Utility class to hide arrows when at the top/bottom of the scroll */
.scroll-arrow-vertical.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.8);
}

/* --- START: Replace with this new code --- */
.voice-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem; /* A little more padding */

    /* 
     * DESKTOP: Set height for ONE row.
     * Calculated based on: 
     *   ~115px (item height: avatar + text + padding) 
     *   + 16px (top/bottom padding of the grid)
     * We'll use 140px as a safe, consistent value.
    */
    max-height: 140px;
}

/* MOBILE: Override the height for TWO rows */
@media (max-width: 768px) {
    .voice-popup-grid {
        max-height: calc(155px * 2 + 1rem);
    }

}
/* --- END: Replace with this new code --- */

/* ================================================ */
/* NEW: Thicker, Styled Vertical Scrollbar Styles   */
/* ================================================ */

/* 1. Reset the container style (no change here) */
.voice-scroller-container {
    position: relative;
    padding: 0;
}

/* 2. Style the scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.voice-popup-grid {
    padding: 0.5rem;

    /* For Firefox: Use the browser's default thickness instead of 'thin' */
    scrollbar-width: auto;
    scrollbar-color: var(--gray-300) transparent;
}

/* --- WebKit Scrollbar Styling Starts Here --- */

/* CHANGE #1: Make the entire scrollbar track wider */
.voice-popup-grid::-webkit-scrollbar {
    width: 12px;
}

/* The track remains transparent */
.voice-popup-grid::-webkit-scrollbar-track {
    background: transparent;
}

/* The "thumb" (the part you drag) styling remains the same */
.voice-popup-grid::-webkit-scrollbar-thumb {
    background-color: var(--gray-300);
    border-radius: 10px;
    border: 3px solid white; /* Slightly thicker border for the wider track */
}

.voice-popup-grid::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-400);
}

/* CHANGE #2: Add styles for the up and down arrow buttons */
.voice-popup-grid::-webkit-scrollbar-button {
    display: block; /* Make the buttons visible */
    height: 10px;   /* Give them a bit of height */
    background-color: var(--gray-100);
    background-repeat: no-repeat;
    background-position: center;
}

.voice-popup-grid::-webkit-scrollbar-button:hover {
    background-color: var(--gray-200);
}

/* Style for the UP arrow */
.voice-popup-grid::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3e%3cpath d='m18 15-6-6-6 6h12z'/%3e%3c/svg%3e");
}

/* Style for the DOWN arrow */
.voice-popup-grid::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3e%3cpath d='m6 9 6 6 6-6H6z'/%3e%3c/svg%3e");
}

/* ================================================= */
/* NEW: CONVERSATION TAB UI FIXES                    */
/* ================================================= */

/* 1. DESKTOP FIX: Constrain the width of the voice selector button */
/* This stops the button from expanding to fill all available space. */
#conversation-content .conversation-line-controls .paragraph-voice-trigger {
    flex: 0 1 auto; /* Prevents the button from growing */
    width: auto;    /* Sets width based on its content */
    min-width: 180px; /* Ensures it has a reasonable minimum width */
}

@media (max-width: 768px) {
    /* Target the controls container specifically within the conversation tab */
    #conversation-content .conversation-line-controls {
        flex-direction: row;    /* Keep the horizontal layout */
        align-items: center;    /* Vertically center the items */
        justify-content: space-between; /* This pushes items to opposite ends */
    }

    /* THIS IS THE CRITICAL FIX: */
    /* Target the voice trigger button directly to control its size. */
    #conversation-content .conversation-line-controls .paragraph-voice-trigger {
        flex-grow: 0;         /* Prevent it from growing to fill space */
        flex-shrink: 1;       /* Allow it to shrink if needed */
        flex-basis: auto;     /* Let its width be determined by its content */
        width: 180px;         /* Set a specific maximum width */
        min-width: 150px;     /* Ensure it doesn't get too small */
    }

    /* Remove the conflicting styles from the delete button */
    #conversation-content .remove-line-btn {
        margin-top: 0;      /* Remove the top margin */
        align-self: auto;   /* Reset the self-alignment */
        margin-left: 1rem;  /* Add a little space between it and the voice selector */
    }
}


/* =================================================================== */
/* FIXED: MOBILE INPUT - Min Error shifts down, Max Error stays middle */
/* =================================================================== */

@media (max-width: 768px) {
    /* 1. Main Grid Container */
    #text-content .integrated-input-controls {
        display: grid;
        grid-template-columns: auto 1fr auto; 
        grid-template-rows: auto auto;     
        gap: 0.5rem;
        align-items: center;
        padding: 0.75rem;
    }

    #text-content .controls-right {
        display: contents; 
    }

    /* 3. Voice Selector (Left) */
    #text-content .controls-left {
        grid-row: 1;
        grid-column: 1;
    }
    
    #text-content .voice-selector-display {
        background-color: var(--gray-100);
        border: 1px solid var(--gray-200);
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        height: 48px; 
        box-sizing: border-box;
        max-width: 140px; 
    }
    
    #text-content .voice-selector-display .voice-name,
    #text-content .voice-selector-display .voice-selector-arrow {
        display: block;
    }
    
    #text-content .voice-selector-display .voice-avatar {
        width: 32px;
        height: 32px;
    }

    /* 4. DEFAULT Position (Counts & Max Error) */
    /* Places the text in the middle of Row 1 */
    #text-content .char-count {
        grid-row: 1;
        grid-column: 2;
        text-align: center;
        font-size: 0.75rem;
        color: var(--gray-600);
        white-space: nowrap;
    }

    /* 5. Red Color for ANY error (Min or Max) */
    #text-content .char-count.error {
        color: #ef4444;
        font-weight: 600;
    }

    /* 6. SPECIFIC SHIFT for Minimum Words Error */
    /* Only this specific error moves to the bottom row */
    #text-content .char-count.error-min {
        grid-row: 2;
        grid-column: 1 / -1; /* Span full width */
        width: 100%;
        text-align: center;
        padding-top: 0.25rem;
        font-size: 0.8rem;
        animation: slideDown 0.2s ease-out;
    }

    /* 7. The "Start Yarning" Button */
    #text-content .start-yarning-btn {
        grid-row: 1;
        grid-column: 3;
        width: auto; 
        padding: 0 1.25rem; 
        height: 48px;
        font-weight: 600;
        margin: 0;
    }
}

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


@media (max-width: 768px) {

    
    #text-content .start-yarning-btn::before,
    #text-content .start-yarning-btn::after {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 768px) {
    #text-content .text-input {
        min-height: 12rem; /* REDUCED: From 15rem to make the box shorter */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
        /* REDUCED & UNIFIED: This padding creates the space for the controls at the bottom */
        /* It's now smaller to match the height of the new 2-row controls */
        padding-bottom: 8.5rem;
        
        /* This property helps the browser scroll correctly when the on-screen keyboard appears */
        scroll-padding-bottom: 8.5rem;
    }
}



/* ================================================ */
/* UPDATED: High-Visibility Vertical Scrollbar      */
/* ================================================ */

/* 1. Reset the container style */
.voice-scroller-container {
    position: relative;
    padding: 0;
}

/* 2. Firefox Styling */
.voice-popup-grid {
    padding: 0.5rem;
    /* Darker thumb (gray-500) and light track (gray-100) for visibility */
    scrollbar-width: auto; 
    scrollbar-color: var(--gray-500) var(--gray-100);
}

/* 3. WebKit (Chrome, Safari, Edge) Styling */

/* Make the scrollbar track wider */
.voice-popup-grid::-webkit-scrollbar {
    width: 14px; /* Increased width for better visibility */
}

/* Give the track a background color so users see the scroll area */
.voice-popup-grid::-webkit-scrollbar-track {
    background-color: var(--gray-100); 
    border-radius: 8px;
    border-left: 1px solid var(--gray-200); /* Optional: adds separation from content */
}

/* Make the thumb darker and more prominent */
.voice-popup-grid::-webkit-scrollbar-thumb {
    background-color: var(--gray-500); /* Much darker than before */
    border-radius: 10px;
    border: 3px solid var(--gray-100); /* Border matches track to create "floating" look */
}

/* Darken significantly on hover to indicate interactivity */
.voice-popup-grid::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-700);
}

/* 4. Arrows (Optional - keeping your existing arrow logic) */
.voice-popup-grid::-webkit-scrollbar-button {
    display: block;
    height: 12px;
    background-color: var(--gray-100);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px; /* Ensure arrow icon fits */
}

.voice-popup-grid::-webkit-scrollbar-button:hover {
    background-color: var(--gray-200);
}

/* Style for the UP arrow */
.voice-popup-grid::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3e%3cpath d='m18 15-6-6-6 6h12z'/%3e%3c/svg%3e");
}

/* Style for the DOWN arrow */
.voice-popup-grid::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3e%3cpath d='m6 9 6 6 6-6H6z'/%3e%3c/svg%3e");
}

/* Add to styles.css */
.custom-select-wrapper.coming-soon {
    opacity: 0.6; /* Make it look slightly disabled */
}

.custom-select-wrapper.coming-soon .custom-select-trigger {
    cursor: not-allowed; /* Show 'stop' cursor */
    pointer-events: none; /* Prevent clicking */
}

/* Ensure the tooltip still triggers on the wrapper */
.custom-select-wrapper.coming-soon {
    pointer-events: auto;
}

/* Hide Language Selector on Mobile */
@media (max-width: 768px) {
    .integrated-input-controls .custom-select-wrapper {
        display: none !important;
    }
}

/* --- FIX: Pricing Page Responsive Layout --- */

/* Tablet: Switch to 2 columns */
@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: Switch to 1 column stack */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pricing-container {
        padding: 1.5rem 1rem; /* Reduce padding */
        margin-top: 0;
    }

    .pricing-header {
        margin-bottom: 2rem; /* Reduce gap below header */
    }
    
    /* Ensure subtitle is readable on small screens */
    .pricing-subtitle {
        font-size: 1rem;
        padding: 0 0.5rem;
    }
}