:root {
    /* --- THEME-AWARE COLOR PALETTE --- */
    /* Light Mode (default) */
    --bg-color: #f7faff;
    --card-bg-color: #ffffff;
    --card-secondary-bg-color: #eff3f7;
    --text-color: #3d4f63;
    --text-muted-color: #7e8b9f;
    --border-color: #e5eaf1;
    --shadow-color-heavy: rgba(45, 55, 72, 0.15);
    --shadow-color-light: rgba(45, 55, 72, 0.08);
    --top-bar-bg: rgba(247, 250, 255, 0.8);
    --input-bg-color: #f0f4f8;

    /* Brand Colors (mostly unchanged) */
    --duo-green: #58cc02;
    --duo-green-dark: #46a302;
    --duo-yellow: #ffd600;
    --duo-red: #ff4b4b;
    --duo-blue: #1cb0f6;
    --duo-purple: #9069fe;
    --duo-orange: #ff9600;
    --duo-gem: #4de1ff;
    --duo-fire: #ffb300;
    --duo-xp: #ffc800;
    --duo-font: "Nunito", "Baloo 2", Arial, sans-serif;
    --duo-anim: cubic-bezier(0.4, 1.4, 0.6, 1);

    /* --- Updated Border Radius --- */
    --duo-radius: 24px;
    --duo-radius-sm: 99px;
    /* Pill shape for buttons and inputs */
}

body.dark {
    /* Dark Mode Overrides */
    --bg-color: #1c2a34;
    --card-bg-color: #283845;
    --card-secondary-bg-color: #24323e;
    --text-color: #e5e5e5;
    --text-muted-color: #afb8c1;
    --border-color: #4a5e6d;
    --shadow-color-heavy: rgba(0, 0, 0, 0.25);
    --shadow-color-light: rgba(0, 0, 0, 0.2);
    --top-bar-bg: rgba(28, 42, 52, 0.8);
    --input-bg-color: #3a4c5a;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--duo-font);
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
}

/* Hide scrollbar for a cleaner look */
.main-content::-webkit-scrollbar {
    display: none;
}

.main-content {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 960px;
    /* Wider for desktop */
    margin: 0 auto;
    box-shadow: none;
    /* Shadow on cards instead */
    background: transparent;
    position: relative;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7em 1.5em;
    /* More padding */
    background: var(--top-bar-bg);
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 60px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    transition: background-color 0.3s, border-color 0.3s;
}

.app-brand {
    font-family: "Baloo 2", cursive;
    font-size: 1.8em;
    font-weight: 700;
    color: var(--duo-green);
    position: absolute;
    left: 1.5rem;
    user-select: none;
}

.top-bar-center {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.top-bar .streak {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s var(--duo-anim);

}

.top-bar .streak:active {
    transform: scale(0.95);
}

.top-bar .streak .fire-anim {
    width: 36px;
    /* Slightly larger */
    height: 36px;
    margin-right: 0.5em;
    margin-top: 0.3em;
    animation: firePulse 1.2s infinite alternate;
    filter: drop-shadow(0 0 8px var(--duo-fire));
}

@keyframes firePulse {
    0% {
        transform: scale(1) rotate(-5deg);
    }

    100% {
        transform: scale(1.15) rotate(5deg);
    }
}

.top-bar .streak .streak-count {
    font-size: 1.4em;
    font-weight: 800;
    /* Bolder font */
    color: var(--duo-fire);
    text-shadow: 0 0 8px #ffb30099;
    margin-right: 1em;

}

.top-bar .gems,
.top-bar .xp-bar {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: 700;
    background: var(--card-bg-color);
    color: var(--text-color);
    border-radius: var(--duo-radius);
    padding: 0.4em 0.8em;
    margin: 0 0.5em;
    box-shadow: 0 2px 4px var(--shadow-color-light);
    min-width: 70px;
    justify-content: center;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.top-bar .gems .gem-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.4em;
    filter: drop-shadow(0 0 5px var(--duo-gem));
}

.top-bar .xp-bar .xp-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.4em;
    filter: drop-shadow(0 0 5px var(--duo-xp));
}

.main-content {
    flex: 1 1 auto;
    padding: 1.5em 1em 80px 1em;
    /* More padding */
    background: transparent;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    gap: 1.5rem;
    /* Add gap between cards */
}

.duo-card {
    background: var(--card-bg-color);
    color: var(--text-color);
    border-radius: var(--duo-radius);
    box-shadow: 0 8px 24px var(--shadow-color-heavy);
    margin: 0;
    /* Remove margin, use gap instead */
    padding: 1.5em;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    animation: cardPop 0.5s var(--duo-anim);
}

@keyframes cardPop {
    0% {
        transform: scale(0.95) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.duo-card .duo-title {
    font-size: 1.6em;
    /* Larger title */
    font-weight: 800;
    margin-bottom: 0.5em;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.duo-card .duo-title i {
    margin-right: 0.5rem;
    color: var(--duo-blue);
}

.duo-card .duo-title-secondary {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 1em;
    color: var(--text-muted-color);
    text-align: center;
}

.duo-card .duo-subtitle {
    color: var(--text-muted-color);
    font-size: 1.1em;
    margin-bottom: 1em;
}

.duo-foreign-text {
    font-size: 1.8em;
    /* Larger foreign text */
    font-weight: 700;
    margin-bottom: 0.5em;
    color: var(--text-color);
    text-align: center;
    line-height: 1.4;
}

/* --- Button Modernization --- */
.duo-btn {
    background: var(--duo-green);
    color: #fff;
    border: none;
    border-radius: var(--duo-radius-sm);
    padding: 1em 1.5em;
    font-size: 1.1em;
    font-weight: 700;
    margin: 0.5em 0;
    cursor: pointer;
    border-bottom: 4px solid var(--duo-green-dark);
    /* Modern 3D effect */
    box-shadow: 0 2px 4px var(--shadow-color-light);
    transition: all 0.15s ease-out;
    outline: none;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    text-transform: none;
    /* No more uppercase */
    letter-spacing: 0.5px;
}

.duo-btn:hover:not([disabled]) {
    filter: brightness(1.05);
}

.duo-btn:active:not([disabled]) {
    transform: translateY(2px);
    border-bottom-width: 2px;
    box-shadow: none;
}

.duo-btn.secondary {
    background: var(--duo-blue);
    border-bottom-color: #158fcc;
}

.duo-btn.danger {
    background: var(--duo-red);
    border-bottom-color: #d93b3b;
}

/* Tertiary/Ghost button style */
#change-lang-btn,
#skip-topic-btn,
#choose-topic-btn {
    background-color: transparent;
    color: var(--duo-blue);
    border: 2px solid var(--duo-blue);
    border-bottom-width: 2px;
    padding-top: calc(1em - 2px);
    padding-bottom: calc(1em - 2px);
    box-shadow: none;
}

#change-lang-btn:active,
#skip-topic-btn:active,
#choose-topic-btn:active {
    background-color: rgba(28, 176, 246, 0.1);
    transform: none;
}

#skip-topic-btn {
    color: var(--duo-orange);
    border-color: var(--duo-orange);
}

#choose-topic-btn {
    color: var(--duo-purple);
    border-color: var(--duo-purple);
}

.duo-btn[disabled] {
    background: var(--border-color);
    color: var(--text-muted-color);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border-bottom: 2px solid var(--border-color);
}

/* --- Exercise UI Modernization --- */
.progress-bar-container {
    width: 100%;
    height: 16px;
    background-color: var(--input-bg-color);
    border-radius: 99px;
    margin-bottom: 1em;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--duo-yellow);
    border-radius: 99px;
    transition: width 0.3s ease-out;
}

.duo-mcq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2-column layout for choices */
    gap: 1em;
    margin: 1.5em 0;
}

.duo-mcq .duo-mcq-option {
    background: var(--card-secondary-bg-color);
    color: var(--text-color);
    border-radius: var(--duo-radius);
    padding: 1.2em 1em;
    min-height: 5.5em;
    font-size: 1.1em;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-bottom-width: 4px;
    transition: all 0.15s ease-out;
}

.duo-mcq-option:hover {
    background: var(--border-color);
    border-color: var(--duo-blue);
}

.duo-mcq .duo-mcq-option.selected {
    border-color: var(--duo-blue);
    background: rgba(28, 176, 246, 0.2);
}

.duo-mcq .duo-mcq-option.correct {
    border-color: var(--duo-green);
    background: rgba(88, 204, 2, 0.2);
    color: var(--text-color);
    font-weight: bold;
}

.duo-mcq .duo-mcq-option.wrong {
    border-color: var(--duo-red);
    background: rgba(255, 75, 75, 0.2);
    color: var(--text-color);
}

.duo-fill-blank-sentence {
    font-size: 1.5em;
    /* Bigger sentence text */
    line-height: 2;
}

.duo-fill-blank .duo-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    margin-top: 2em;
    justify-content: center;
}

.duo-fill-blank .duo-word {
    padding: 0.6em 1.4em;
    min-height: 4.5em;
    font-size: 1.1em;
    border-radius: var(--duo-radius);
    border-bottom: 4px solid var(--border-color);
    background: var(--card-secondary-bg-color);
    color: var(--text-color);
}

.translate-sentence-target-area {
    background: var(--input-bg-color);
    border: 2px solid var(--border-color);
    border-radius: var(--duo-radius);
    padding: 1em;
    margin-bottom: 2em;
    min-height: 60px;
    box-shadow: inset 0 2px 8px var(--shadow-color-light);
}

.translate-sentence-word-bank {
    gap: 0.8em;
}

.translate-sentence-word-option {
    padding: 0.8em 1.2em;
    font-size: 1em;
    border-radius: var(--duo-radius);
    border-bottom: 4px solid var(--border-color);
    min-height: 4em;
    background: var(--card-secondary-bg-color);
    color: var(--text-color);
}

.tap-pairs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1em;
    margin: 2em 0;
}

.tap-pairs-word {
    padding: 0.8em;
    font-size: 1em;
    min-height: 4.5em;
    border-radius: var(--duo-radius);
    border-bottom: 4px solid var(--border-color);
    background: var(--card-secondary-bg-color);
    color: var(--text-color);
}

.tap-pairs-word.selected {
    border-color: var(--duo-yellow);
    background: rgba(255, 214, 0, 0.2);
    transform: scale(1.05) translateY(-2px);
}

.duo-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.3em;
    padding: 0.8em 1.2em;
    border-radius: var(--duo-radius-sm);
    border: 2px solid var(--border-color);
    background: var(--input-bg-color);
    color: var(--text-color);
    margin-bottom: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: inset 0 1px 4px var(--shadow-color-light);
}

.duo-input:focus {
    border-color: var(--duo-blue);
    box-shadow: inset 0 1px 4px var(--shadow-color-light),
        0 0 0 3px rgba(28, 176, 246, 0.3);
    outline: none;
}

.lesson-complete-card {
    background: var(--card-bg-color);
    border: 2px solid var(--duo-green);
    text-align: center;
    padding: 2em 1.5em;
    box-shadow: 0 0 30px rgba(88, 204, 2, 0.3);
}

.lesson-complete-title {
    font-size: 2.2em;
    color: var(--duo-green);
    font-family: "Baloo 2", cursive;
    margin-bottom: 1em;
}

.lesson-complete-stats {
    display: flex;
    justify-content: space-around;
    margin: 2em 0;
    background: var(--bg-color);
    padding: 1em 0.5em;
    border-radius: var(--duo-radius);
}

.streak-calendar-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

/* --- Bottom Bar Modernization --- */
.bottom-bar {
    display: flex;
    align-items: stretch;
    /* Stretch items */
    justify-content: space-around;
    padding: 0.5em 0;
    /* Adjust padding */
    background: var(--top-bar-bg);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--border-color);
    position: fixed;
    /* Changed to fixed for consistency */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    min-height: 65px;
    flex-shrink: 0;
    transition: background-color 0.3s, border-color 0.3s;
}

.bottom-bar .nav-btn {
    background: none;
    border: none;
    color: var(--text-muted-color);
    font-size: 0.75em;
    /* Font size for label */
    cursor: pointer;
    opacity: 0.8;
    transition: color 0.2s, opacity 0.2s, transform 0.1s;
    outline: none;
    padding: 0.5em;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
    font-weight: 700;
    position: relative;
}

.bottom-bar .nav-btn::after {
    content: attr(title);
    /* Use title for label */
    display: block;
    margin-top: 4px;
}

.bottom-bar .nav-btn i {
    font-size: 26px;
    width: 30px;
    height: 30px;
    margin-bottom: 2px;
}

.bottom-bar .nav-btn.active {
    color: var(--duo-green);
    opacity: 1;
}

.bottom-bar .nav-btn.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: var(--duo-green);
    border-radius: 2px;
}

.bottom-bar .nav-btn:active {
    transform: scale(0.95);
}

/* --- Settings Page --- */
.settings-card {
    padding: 1.5em;
}

.settings-section {
    margin-bottom: 2em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--border-color);
}

.settings-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.settings-section h4 {
    margin: 0 0 1.5em 0;
    color: var(--duo-blue);
    font-size: 1.2em;
    font-weight: 700;
}

.settings-card label {
    display: flex;
    align-items: center;
    margin-bottom: 1.2em;
    font-size: 1.1em;
    cursor: pointer;
    justify-content: space-between;
}

#font-size-controls {
    display: flex;
    align-items: center;
    gap: 1em;
}

#font-size-slider {
    flex-grow: 1;
}

#font-size-value {
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}

/* --- Home Screen Specifics --- */
.duo-card#revisit-topics-card,
.duo-card#lesson-history-card {
    background-color: var(--card-secondary-bg-color);
}

#revisit-topics-list,
#lesson-history-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Spacing between items */
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
}

#revisit-topics-list .topic-item,
#lesson-history-list .history-item {
    border: 1px solid var(--border-color);
    border-radius: var(--duo-radius);
}

#revisit-topics-list .topic-item {
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    padding: 0.8em 1em;
    background: var(--input-bg-color);
    font-weight: 700;
}

#revisit-topics-list .topic-item:hover {
    background: var(--duo-blue);
    color: white;
    border-color: var(--duo-blue);
}

/* --- Mascot Loader --- */
#mascot-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
}

.pixel-turtle {
    display: grid;
    grid-template-columns: repeat(8, 10px);
    grid-template-rows: repeat(8, 10px);
    gap: 1px;
    width: max-content;
    margin-bottom: 2em;
    animation: jump 1s ease-in-out infinite;
}

@keyframes jump {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-30px) scale(1.05);
    }
}

.pixel {
    width: 10px;
    height: 10px;
    background: transparent;
}

.shell {
    background: #388e3c;
}

.head {
    background: #8bc34a;
}

.leg {
    background: #5d4037;
}

.body {
    background: #43a047;
}

.pixel-turtle>div:nth-child(33) {
    position: relative;
}

/* Head pixel for eye positioning */
.pixel-turtle>div:nth-child(33)::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 1px;
}

.pixel-turtle>div:nth-child(33)::after {
    content: '';
    display: block;
    width: 2px;
    height: 2px;
    background: #222;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 1px;
}

/* --- Desktop & Tablet Layout --- */
@media (min-width: 768px) {
    .app-brand {
        display: block;
    }

    .top-bar-center {
        justify-content: flex-start;
        margin-left: 10rem;
    }

    .bottom-bar {
        /* Transform bottom bar to a fixed sidebar on desktop */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        left: 0;
        top: 0;
        bottom: 0;
        width: 90px;
        height: 100vh;
        padding: 2em 0;
        border-top: none;
        border-right: 2px solid var(--border-color);
    }

    .bottom-bar .nav-btn {
        width: 100%;
        padding: 1.5em 0;
    }

    .bottom-bar .nav-btn.active::before {
        /* Active indicator on the left for sidebar */
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 40px;
    }

    #app {
        padding-left: 90px;
        /* Make space for the new sidebar */
    }

    .main-content {
        padding-bottom: 2em;
        /* Reset bottom padding */
    }

    /* Create a 2-column grid for the home screen on wider displays */
    .main-content:has(#revisit-topics-card) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
        gap: 24px;
        align-items: start;
    }

    /* This is a modern selector, should work in current browsers */
    .main-content:has(#revisit-topics-card)>.duo-card:nth-child(1),
    .main-content:has(#revisit-topics-card)>.duo-card:nth-child(3),
    .main-content:has(#revisit-topics-card)>.duo-card.duo-summary {
        grid-column: 1 / 2;
    }

    #revisit-topics-card,
    #lesson-history-card {
        grid-column: 2 / 3;
    }

    .duo-mcq {
        /* Can afford 2 columns even on tablet */
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .app-brand {
        display: none;
    }

    .top-bar-center {
        justify-content: center;
    }

    /* On mobile, stack all home cards */
    .main-content {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    #app {
        max-width: 100vw;
        padding-left: 0;
        /* No padding on mobile */
    }

    .main-content {
        padding: 1em 0.7em 80px 0.7em;
    }

    .duo-card,
    .settings-card,
    .lesson-complete-card {
        padding: 1.2em;
    }

    .duo-mcq {
        grid-template-columns: 1fr;
        /* Single column MCQ on small screens */
    }
}

/* Original style passthroughs for compatibility */
.duo-foreign-text-with-translit {
    margin-bottom: 0.5em;
    text-align: center;
}

.duo-foreign-text-with-translit .duo-translit {
    margin-bottom: 0.1em;
}

.duo-foreign-text-with-translit .duo-foreign-text {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color);
    line-height: 1.3;
    margin-bottom: 0;
}

.duo-translit {
    font-size: 0.9em;
    color: var(--duo-yellow);
    margin-bottom: 0.2em;
    font-style: italic;
    display: block;
    text-align: center;
    line-height: 1.2;
}

.duo-mcq-option .mcq-option-translit {
    font-size: 0.75em;
    color: var(--duo-yellow);
    display: block;
    margin-bottom: 0.1em;
    font-style: italic;
    line-height: 1.1;
    height: 1.1em;
    overflow: hidden;
}

.duo-mcq-option .mcq-option-text {
    font-size: 1em;
    line-height: 1.2;
    display: block;
}

.duo-fill-blank .duo-blank {
    min-width: 80px;
    min-height: 36px;
    background: var(--input-bg-color);
    border-radius: var(--duo-radius);
    border: 2px dashed var(--text-muted-color);
    display: inline-block;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    color: var(--text-muted-color);
    margin: 0 0.2em;
    padding: 0.3em 0.8em;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: baseline;
    box-sizing: border-box;
}

.duo-fill-blank .duo-blank.filled {
    background: var(--duo-blue);
    color: #fff;
    border: 2px solid var(--duo-blue);
    cursor: default;
}

.duo-fill-blank .duo-blank.correct {
    background: var(--duo-green);
    color: #fff;
    border: 2px solid var(--duo-green);
}

.duo-fill-blank .duo-blank.wrong {
    background: var(--duo-red);
    color: #fff;
    border: 2px solid var(--duo-red);
}

.duo-word .word-translit {
    font-size: 0.7em;
    color: var(--duo-yellow);
    display: block;
    margin-bottom: 0.1em;
    font-style: italic;
    line-height: 1.1;
    height: 1.1em;
    overflow: hidden;
}

.duo-word .word-text {
    font-size: 0.9em;
    line-height: 1.2;
    display: block;
}

.duo-fill-blank .duo-word.selected {
    background: #555;
    color: #aaa;
    border-color: #555;
    border-bottom-color: #444;
    cursor: default;
    box-shadow: none;
    transform: none;
}

#feedback-area {
    margin-top: 1.5em;
    min-height: 1.5em;
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
}

.duo-tts-btn {
    background: none;
    border: none;
    color: var(--duo-blue);
    font-size: 1.1em;
    margin-left: 0.5em;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: color 0.2s, transform 0.1s;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    border-radius: 50%;
}

.duo-tts-btn:hover {
    background-color: rgba(28, 176, 246, 0.15);
}

.duo-tts-btn:active {
    color: var(--duo-green);
    transform: scale(0.9);
}

.duo-tts-btn i {
    font-size: 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.translate-sentence-container {
    margin: 1em 0;
}

.translate-sentence-source-display {
    margin-bottom: 1em;
    text-align: center;
}

.translate-sentence-source-display .duo-translit {
    font-size: 0.9em;
    color: var(--duo-yellow);
    margin-bottom: 0.2em;
    font-style: italic;
}

.translate-sentence-source-display .source-text {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--text-color);
    line-height: 1.3;
}

.translate-sentence-source-display .source-text .duo-tts-btn {
    margin-left: 0.5em;
    vertical-align: middle;
}

.translate-sentence-target-area.empty::before {
    content: "Build your translation here";
    color: var(--text-muted-color);
    font-style: italic;
    width: 100%;
    text-align: center;
}

.translate-sentence-word-option .word-option-translit {
    font-size: 0.7em;
    color: var(--duo-yellow);
    display: block;
    margin-bottom: 0.1em;
    font-style: italic;
    line-height: 1;
    height: 1em;
    overflow: hidden;
}

.translate-sentence-word-option .word-option-text {
    font-size: 0.9em;
    line-height: 1.2;
    display: block;
}

.translate-sentence-word-option:hover:not(.selected-in-target):not(.used-in-bank) {
    border-color: var(--duo-blue);
    transform: translateY(-1px);
}

.translate-sentence-word-option:active:not(.selected-in-target):not(.used-in-bank) {
    transform: translateY(1px);
    border-bottom-width: 2px;
}

.translate-sentence-word-bank .translate-sentence-word-option.used-in-target {
    opacity: 0.4;
    background: var(--border-color);
    border-color: var(--border-color);
    border-bottom-color: var(--border-color);
    color: var(--text-muted-color);
    cursor: default;
    pointer-events: none;
}

.translate-sentence-target-area .translate-sentence-word-option {
    background: var(--duo-blue);
    color: #fff;
    border-color: var(--duo-blue);
    border-bottom: 4px solid #158fcc;
}

.translate-sentence-target-area .translate-sentence-word-option:hover {
    background: #158fcc;
    transform: translateY(-1px);
}

.translate-sentence-target-area .translate-sentence-word-option:active {
    transform: translateY(1px);
    border-bottom-width: 2px;
}

.tap-pairs-word .pair-word-translit {
    font-size: 0.65em;
    color: var(--duo-yellow);
    display: block;
    margin-bottom: 0.1em;
    font-style: italic;
    line-height: 1;
    height: 1em;
    overflow: hidden;
}

.tap-pairs-word .pair-word-text {
    font-size: 0.95em;
    line-height: 1.2;
    display: block;
}

.tap-pairs-word.correctly-paired {
    background: var(--duo-green);
    color: #fff;
    border-color: var(--duo-green);
    border-bottom-color: var(--duo-green-dark);
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}

.tap-pairs-word.incorrectly-paired {
    background: var(--duo-red);
    color: #fff;
    border-color: var(--duo-red);
    animation: shake 0.3s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.duo-input.correct {
    border-color: var(--duo-green);
    background: #58cc0222;
}

.duo-input.wrong {
    border-color: var(--duo-red);
    background: #ff4b4b22;
}

.type-what-you-hear-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}

.type-what-you-hear-prompt .duo-tts-btn {
    font-size: 2em;
    padding: 0.5em;
    background: var(--duo-blue);
    color: #fff;
    border-radius: 50%;
    margin-right: 0.5em;
}

.type-what-you-hear-prompt .duo-tts-btn.slow i {
    transform: scale(0.8);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    color: var(--text-muted-color);
    flex: 1;
}

.stat-item i {
    font-size: 24px;
    margin-bottom: 0.2em;
    width: 28px;
    height: 28px;
}

.stat-value {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 0.2em;
}

.stat-xp .stat-value {
    color: var(--duo-xp);
}

.stat-xp i {
    color: var(--duo-xp);
}

.stat-gems .stat-value {
    color: var(--duo-gem);
}

.stat-gems i {
    color: var(--duo-gem);
}

.stat-accuracy .stat-value {
    color: var(--duo-blue);
}

.stat-accuracy i {
    color: var(--duo-blue);
}

.lesson-complete-summary {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 2em;
    text-align: left;
    white-space: pre-wrap;
}

.streak-calendar {
    background: var(--card-bg-color);
    color: var(--text-color);
    border-radius: var(--duo-radius);
    padding: 1.5em 1.2em;
    min-width: 320px;
    max-width: 90%;
    box-shadow: 0 2px 12px #0005;
    position: relative;
    animation: cardPop 0.5s var(--duo-anim);
}

.streak-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1em 0;
}

.streak-calendar-header h3 {
    margin: 0;
    color: var(--duo-fire);
    text-align: center;
    flex-grow: 1;
}

.month-nav-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.2em 0.5em;
    opacity: 0.7;
}

.month-nav-btn:hover {
    opacity: 1;
}

.streak-calendar .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5em;
    margin-bottom: 1em;
    place-items: center;
}

.streak-calendar .day-header {
    font-size: 0.8em;
    color: var(--text-muted-color);
    text-align: center;
}

.streak-calendar .calendar-day {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--input-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: var(--text-muted-color);
    border: 2px solid transparent;
    transition: background 0.2s, border 0.2s;
}

.streak-calendar .calendar-day.placeholder {
    background: none;
    opacity: 0;
}

.streak-calendar .calendar-day.streak {
    background: var(--duo-fire);
    color: #fff;
    border: 2px solid #fff3;
    box-shadow: 0 0 8px #ffb30099;
    font-weight: bold;
}

.streak-calendar .calendar-day.today {
    border: 2px solid var(--duo-blue);
    color: var(--text-color);
}

.streak-calendar .calendar-day.streak-freeze {
    background: var(--duo-blue);
    color: #fff;
    border: 2px solid #fff3;
    font-weight: bold;
    position: relative;
}

.streak-calendar .calendar-day.streak-freeze::after {
    content: "❄️";
    position: absolute;
    font-size: 0.6em;
    top: -2px;
    right: -2px;
    opacity: 0.8;
}

.streak-calendar .close-btn {
    position: absolute;
    top: 0.5em;
    right: 0.7em;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.8em;
    line-height: 1;
    padding: 0.2em;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.streak-calendar .close-btn:hover {
    opacity: 1;
}

.streak-summary {
    text-align: center;
    font-size: 1em;
    line-height: 1.4;
    margin-top: 1em;
}

.streak-summary strong {
    color: var(--duo-fire);
    font-size: 1.2em;
}

.streak-summary .freeze-info {
    color: var(--duo-blue);
}

.settings-card input[type="checkbox"] {
    margin-left: 1em;
    accent-color: var(--duo-green);
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    order: 1;
}

.settings-card label span {
    order: 0;
    padding-right: 1em;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em 0;
    font-size: 1.1em;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-item>span:first-child {
    margin-right: 1em;
}

.settings-item .duo-btn {
    margin: 0.5em 0 0.5em 1em;
    width: auto;
    padding: 0.5em 1em;
    font-size: 1em;
    flex-shrink: 0;
}

.settings-item .gem-icon,
.settings-item .xp-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: 0 0.2em;
}

.settings-item .boost-status {
    font-size: 0.9em;
    color: var(--duo-green);
    font-style: italic;
    margin-left: 0.5em;
}

.settings-card .duo-btn.danger {
    margin-top: 1.5em;
}

.vocab-intro-card {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--border-color);
}

.vocab-intro-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.vocab-intro-card .duo-translit {
    margin-top: 0;
    margin-bottom: 0.1em;
    text-align: left;
}

.vocab-intro-foreign {
    font-size: 2em;
    font-weight: bold;
    color: var(--duo-yellow);
    margin-bottom: 0.3em;
    display: flex;
    align-items: center;
}

.vocab-intro-translation {
    font-size: 1.6em;
    margin-bottom: 0.8em;
    margin-top: 0.2em;
}

.vocab-intro-example {
    background: var(--card-secondary-bg-color);
    padding: 0.8em 1em;
    border-radius: var(--duo-radius);
    margin-top: 1em;
    font-style: italic;
    color: var(--text-muted-color);
    line-height: 1.4;
}

.vocab-intro-example .duo-translit {
    font-size: 0.9em;
    margin-bottom: 0.1em;
    margin-top: 0;
    color: var(--duo-yellow);
    text-align: left;
}

.vocab-intro-example-foreign {
    font-weight: bold;
    color: var(--text-color);
    font-style: normal;
    display: flex;
    align-items: center;
    margin-bottom: 0.3em;
}

.vocab-intro-example-translation {
    font-size: 0.95em;
    margin-top: 0.2em;
}

#start-exercises-btn {
    margin-top: 1.5em;
}

#feedback-area i {
    font-size: 24px;
    vertical-align: middle;
    margin-right: 0.3em;
}

#feedback-area .correct i {
    color: var(--duo-green);
}

#feedback-area .wrong i {
    color: var(--duo-red);
}

#lesson-history-list .history-item {
    padding: 0.7em 0.9em;
    background: var(--input-bg-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--duo-purple);
}

#lesson-history-list .history-item .history-date {
    font-size: 0.8em;
    color: var(--text-muted-color);
    display: block;
    margin-bottom: 0.3em;
}

#lesson-history-list .history-item .history-theme {
    font-weight: bold;
    color: var(--duo-yellow);
    display: block;
    margin-bottom: 0.3em;
}

#lesson-history-list .history-item .history-summary-text {
    font-size: 0.95em;
    line-height: 1.4;
    white-space: pre-wrap;
}

.auth-card {
    max-width: 400px;
    margin: 2rem auto !important;
    text-align: center;
}

.auth-card .duo-input {
    margin-bottom: 1rem;
}