/* Light Mode (Default) */
:root {
    /* Primary Colors */
    --orange-orange: #fe8115;
    --green-green: #438e7a;

    /* Neutral Colors */
    --black-black: #060606;
    --white-white: #fdfdfd;
    --grey-grey: #5b5b5b;

    /* Additional Greys */
    --grey-light-grey: #f1f1f1;
    --grey-input: #a2a2a2;

    /* Background Colors */
    --white-bg2: #fff;
    --orange-light-orange: #fcf7f2;
    --container-bg: #fafafa;

    /* Additional UI Colors */
    --blue-stroke: #F4F4F4;

    /* Semantic Colors */
    --text-primary: var(--black-black);
    --text-secondary: var(--grey-grey);
    --background-primary: var(--white-white);
    --background-secondary: var(--white-bg2);
    --border-color: var(--grey-light-grey);
    --shadow-color: rgba(210, 210, 210, 0.24);

    /* Shared app shell surfaces */
    --pp-shell-page-bg:
        radial-gradient(circle at 8% 0%, rgba(254, 129, 21, 0.08), transparent 28%),
        radial-gradient(circle at 94% 6%, rgba(67, 142, 122, 0.10), transparent 30%),
        linear-gradient(180deg, #f7f8f5 0%, #f2f5f1 100%);
    --pp-shell-sidebar-bg: rgba(255, 253, 249, 0.92);
    --pp-shell-surface: rgba(255, 255, 255, 0.86);
    --pp-shell-surface-solid: #fffdf9;
    --pp-shell-surface-hover: rgba(67, 142, 122, 0.08);
    --pp-shell-active-bg: linear-gradient(135deg, rgba(254, 129, 21, 0.14), rgba(67, 142, 122, 0.12));
    --pp-shell-active-border: rgba(254, 129, 21, 0.32);
    --pp-shell-border: rgba(25, 31, 35, 0.10);
    --pp-shell-popover-bg: rgba(255, 253, 249, 0.96);
    --pp-shell-shadow: 0 22px 58px rgba(54, 63, 58, 0.12), 0 2px 10px rgba(54, 63, 58, 0.06);
    --pp-shell-shadow-soft: 0 12px 34px rgba(54, 63, 58, 0.10), 0 1px 0 rgba(255, 255, 255, 0.68) inset;
    --pp-shell-focus-ring: 0 0 0 3px rgba(254, 129, 21, 0.14);

    /* Button Colors */
    --button-primary: #277461;
    --button-hover: #357a68;
    --button-disabled: rgba(39, 116, 97, 0.2);
    --button-disabled-border: rgba(39, 116, 97, 0.1);
    --button-disabled-text: rgba(255, 255, 255, 0.7);

    /* Icon Filters */
    --icon-filter: invert(0);  /* Black icons */
    --icon-filter-orange: invert(48%) sepia(95%) saturate(2299%) hue-rotate(346deg) brightness(101%) contrast(101%);  /* Orange active state */
}

/* System Dark Mode - LOWER specificity than manual override */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary Colors */
        --orange-orange: #ff9433;
        --green-green: #4fa892;

        /* Neutral Colors - Inverted */
        --black-black: #fdfdfd;    /* Now used for light text */
        --white-white: #1e1e1e;    /* Lighter background for better visibility */
        --grey-grey: #a0a0a0;      /* Lighter grey for better readability */

        /* Additional Greys - Adjusted for dark mode */
        --grey-light-grey: #2a2a2a;
        --grey-input: #808080;

        /* Background Colors - Darkened but more visible */
        --white-bg2: #242424;
        --orange-light-orange: #2c1810;
        --container-bg: #1a1a1a;

        /* Additional UI Colors */
        --blue-stroke: #2a2a2a;

        /* Semantic Colors */
        --text-primary: #fdfdfd;
        --text-secondary: #a0a0a0;
        --background-primary: #1e1e1e;
        --background-secondary: #242424;
        --border-color: #2a2a2a;
        --shadow-color: rgba(0, 0, 0, 0.4);

        /* Shared app shell surfaces */
        --pp-shell-page-bg:
            radial-gradient(circle at 8% 0%, rgba(255, 148, 51, 0.12), transparent 28%),
            radial-gradient(circle at 94% 6%, rgba(79, 168, 146, 0.12), transparent 30%),
            linear-gradient(180deg, #111416 0%, #0c0f11 100%);
        --pp-shell-sidebar-bg: rgba(22, 24, 26, 0.90);
        --pp-shell-surface: rgba(31, 33, 35, 0.82);
        --pp-shell-surface-solid: #1f2123;
        --pp-shell-surface-hover: rgba(79, 168, 146, 0.12);
        --pp-shell-active-bg: linear-gradient(135deg, rgba(255, 148, 51, 0.18), rgba(79, 168, 146, 0.15));
        --pp-shell-active-border: rgba(255, 148, 51, 0.34);
        --pp-shell-border: rgba(255, 255, 255, 0.10);
        --pp-shell-popover-bg: rgba(28, 30, 32, 0.96);
        --pp-shell-shadow: 0 24px 68px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
        --pp-shell-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
        --pp-shell-focus-ring: 0 0 0 3px rgba(255, 148, 51, 0.18);

        /* Button Colors - slightly lighter in dark mode for better contrast */
        --button-primary: #2d8871;
        --button-hover: #3b9a7a;
        --button-disabled: rgba(45, 136, 113, 0.2);
        --button-disabled-border: rgba(45, 136, 113, 0.1);
        --button-disabled-text: rgba(255, 255, 255, 0.7);

        /* Icon Filters */
        --icon-filter: invert(1);  /* White icons */
        --icon-filter-orange: invert(72%) sepia(75%) saturate(4907%) hue-rotate(334deg) brightness(103%) contrast(101%);  /* Light orange active state */
    }
}

/* Manual Dark Mode - HIGHER specificity than system preference */
:root[data-theme="dark"] {
    /* Primary Colors */
    --orange-orange: #ff9433;
    --green-green: #4fa892;

    /* Neutral Colors */
    --black-black: #fdfdfd;
    --white-white: #1e1e1e;    /* Updated to match system dark mode */
    --grey-grey: #a0a0a0;

    /* Additional Greys */
    --grey-light-grey: #2a2a2a;
    --grey-input: #808080;

    /* Background Colors */
    --white-bg2: #242424;      /* Updated to match system dark mode */
    --orange-light-orange: #2c1810;
    --container-bg: #1a1a1a;

    /* Additional UI Colors */
    --blue-stroke: #2a2a2a;

    /* Semantic Colors */
    --text-primary: #fdfdfd;
    --text-secondary: #a0a0a0;
    --background-primary: #1e1e1e;
    --background-secondary: #242424;
    --border-color: #2a2a2a;
    --shadow-color: rgba(0, 0, 0, 0.4);

    /* Shared app shell surfaces */
    --pp-shell-page-bg:
        radial-gradient(circle at 8% 0%, rgba(255, 148, 51, 0.12), transparent 28%),
        radial-gradient(circle at 94% 6%, rgba(79, 168, 146, 0.12), transparent 30%),
        linear-gradient(180deg, #111416 0%, #0c0f11 100%);
    --pp-shell-sidebar-bg: rgba(22, 24, 26, 0.90);
    --pp-shell-surface: rgba(31, 33, 35, 0.82);
    --pp-shell-surface-solid: #1f2123;
    --pp-shell-surface-hover: rgba(79, 168, 146, 0.12);
    --pp-shell-active-bg: linear-gradient(135deg, rgba(255, 148, 51, 0.18), rgba(79, 168, 146, 0.15));
    --pp-shell-active-border: rgba(255, 148, 51, 0.34);
    --pp-shell-border: rgba(255, 255, 255, 0.10);
    --pp-shell-popover-bg: rgba(28, 30, 32, 0.96);
    --pp-shell-shadow: 0 24px 68px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --pp-shell-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --pp-shell-focus-ring: 0 0 0 3px rgba(255, 148, 51, 0.18);

    /* Button Colors */
    --button-primary: #2d8871;
    --button-hover: #3b9a7a;
    --button-disabled: rgba(45, 136, 113, 0.2);
    --button-disabled-border: rgba(45, 136, 113, 0.1);
    --button-disabled-text: rgba(255, 255, 255, 0.7);

    /* Icon Filters */
    --icon-filter: invert(1);
    --icon-filter-orange: invert(72%) sepia(75%) saturate(4907%) hue-rotate(334deg) brightness(103%) contrast(101%);
}

/* Manual Light Mode - HIGHER specificity than system preference */
:root[data-theme="light"] {
    /* Primary Colors */
    --orange-orange: #fe8115;
    --green-green: #438e7a;

    /* Neutral Colors */
    --black-black: #060606;
    --white-white: #fdfdfd;
    --grey-grey: #5b5b5b;

    /* Additional Greys */
    --grey-light-grey: #f1f1f1;
    --grey-input: #a2a2a2;

    /* Background Colors */
    --white-bg2: #fff;
    --orange-light-orange: #fcf7f2;
    --container-bg: #fafafa;

    /* Additional UI Colors */
    --blue-stroke: #F4F4F4;

    /* Semantic Colors */
    --text-primary: var(--black-black);
    --text-secondary: var(--grey-grey);
    --background-primary: var(--white-white);
    --background-secondary: var(--white-bg2);
    --border-color: var(--grey-light-grey);
    --shadow-color: rgba(210, 210, 210, 0.24);

    /* Shared app shell surfaces */
    --pp-shell-page-bg:
        radial-gradient(circle at 8% 0%, rgba(254, 129, 21, 0.08), transparent 28%),
        radial-gradient(circle at 94% 6%, rgba(67, 142, 122, 0.10), transparent 30%),
        linear-gradient(180deg, #f7f8f5 0%, #f2f5f1 100%);
    --pp-shell-sidebar-bg: rgba(255, 253, 249, 0.92);
    --pp-shell-surface: rgba(255, 255, 255, 0.86);
    --pp-shell-surface-solid: #fffdf9;
    --pp-shell-surface-hover: rgba(67, 142, 122, 0.08);
    --pp-shell-active-bg: linear-gradient(135deg, rgba(254, 129, 21, 0.14), rgba(67, 142, 122, 0.12));
    --pp-shell-active-border: rgba(254, 129, 21, 0.32);
    --pp-shell-border: rgba(25, 31, 35, 0.10);
    --pp-shell-popover-bg: rgba(255, 253, 249, 0.96);
    --pp-shell-shadow: 0 22px 58px rgba(54, 63, 58, 0.12), 0 2px 10px rgba(54, 63, 58, 0.06);
    --pp-shell-shadow-soft: 0 12px 34px rgba(54, 63, 58, 0.10), 0 1px 0 rgba(255, 255, 255, 0.68) inset;
    --pp-shell-focus-ring: 0 0 0 3px rgba(254, 129, 21, 0.14);

    /* Button Colors */
    --button-primary: #277461;
    --button-hover: #357a68;
    --button-disabled: rgba(39, 116, 97, 0.2);
    --button-disabled-border: rgba(39, 116, 97, 0.1);
    --button-disabled-text: rgba(255, 255, 255, 0.7);

    /* Icon Filters */
    --icon-filter: invert(0);  /* Black icons */
    --icon-filter-orange: invert(48%) sepia(95%) saturate(2299%) hue-rotate(346deg) brightness(101%) contrast(101%);  /* Orange active state */
} 

* {
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight */
  }

  * {
    outline: none; /* Remove default focus outlines */
  }

/* Shared prep-page form controls.
   Native select popups in mobile WebViews do not always inherit CSS variables,
   so keep the control and its option sheet on explicit light/dark colors. */
.prep-section {
    --prep-card-bg: var(--background-secondary, #fff);
    --prep-panel-bg: #fafafa;
    --prep-border-color: #e4e4e4;
    --prep-text-primary: var(--text-primary, #060606);
    --prep-text-secondary: #4d4d4d;
}

.prep-section .prep-card {
    background: var(--prep-card-bg);
    border-color: var(--prep-border-color) !important;
}

.prep-section .prep-card h3,
.prep-section .section-overview h4,
.prep-section .flow-step {
    color: var(--prep-text-primary) !important;
}

.prep-section .prep-card p,
.prep-section .prep-card li,
.prep-section .practice-strategy,
.prep-section .practice-strategy span,
.prep-section .section-overview p,
.prep-section .time-indicator,
.prep-section .word-count-badge {
    color: var(--prep-text-secondary) !important;
}

.prep-section .practice-strategy,
.prep-section .exam-structure,
.prep-section .section-overview,
.prep-section .flow-step,
.prep-section .time-indicator,
.prep-section .word-count-badge {
    background: var(--prep-panel-bg) !important;
    border-color: var(--prep-border-color) !important;
}

.prep-section .form-select {
    background-color: var(--prep-card-bg) !important;
    color: var(--prep-text-primary) !important;
    border-color: var(--prep-border-color) !important;
    color-scheme: light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23060606' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
}

.prep-section .form-select option,
.prep-section .form-select optgroup {
    background-color: #fff !important;
    color: #060606 !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prep-section {
        --prep-card-bg: #252525;
        --prep-panel-bg: #1b1b1b;
        --prep-border-color: #3a3a3a;
        --prep-text-primary: #ffffff;
        --prep-text-secondary: #d7d7d7;
    }

    :root:not([data-theme="light"]) .prep-section .prep-card {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important;
    }

    :root:not([data-theme="light"]) .prep-section .form-select {
        color-scheme: dark;
        background-color: #202020 !important;
        border-color: #3a3a3a !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    }

    :root:not([data-theme="light"]) .prep-section .form-select option,
    :root:not([data-theme="light"]) .prep-section .form-select optgroup {
        background-color: #242424 !important;
        color: #fdfdfd !important;
    }
}

:root[data-theme="dark"] .prep-section {
    --prep-card-bg: #252525;
    --prep-panel-bg: #1b1b1b;
    --prep-border-color: #3a3a3a;
    --prep-text-primary: #ffffff;
    --prep-text-secondary: #d7d7d7;
}

:root[data-theme="dark"] .prep-section .prep-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important;
}

:root[data-theme="dark"] .prep-section .form-select {
    color-scheme: dark;
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fdfdfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

:root[data-theme="dark"] .prep-section .form-select option,
:root[data-theme="dark"] .prep-section .form-select optgroup {
    background-color: #242424 !important;
    color: #fdfdfd !important;
}

:root[data-theme="light"] .prep-section .form-select {
    color-scheme: light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23060606' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .prep-section .form-select option,
:root[data-theme="light"] .prep-section .form-select optgroup {
    background-color: #fff !important;
    color: #060606 !important;
}

/* Polished status badges (e.g., Speaking Beta) */
.pp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #f1f1f1);
    background: var(--container-bg, #fafafa);
    color: var(--text-secondary, #5b5b5b);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-1px);
}

/* Page header badge for Speaking (uses pseudo-element to avoid translation scripts stripping markup) */
.pp-page-speaking .section-title {
    position: relative;
}

.pp-page-speaking .pp-page-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px; /* fallback if JS positioning fails */
}