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

:root {
    /* Simple Duo Theme: Paper & Pencil */
    --primary: #2d2d2d;
    --primary-dark: #1a1a1a;
    --secondary: #4a4a4a;
    --accent: #888888;
    --success: #48bb78;
    --warning: #ed8936;
    --danger: #f56565;
    --dark: #1a1a1a;
    --light: #fdfbf6;
    --card-bg: #ffffff;
    --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

body.dark-mode {
    --primary: #767676; /* Lighter grey for elements in dark mode */
    --primary-dark: #fdfbf6;
    --secondary: #999;
    --dark: #fdfbf6; /* Text becomes light */
    --light: #121212; /* Background becomes dark */
    --card-bg: #1e1e1e;
    --gradient: linear-gradient(135deg, #444 0%, #222 100%);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Patrick Hand', 'Poppins', sans-serif;
    font-size: 1.1rem; /* Handwritten fonts usually need to be slightly larger */
    background: var(--light);
    min-height: 100vh;
    padding: 20px;
    color: var(--dark);
}

body.modal-open {
    overflow: hidden;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.header {
    text-align: center;
    color: var(--dark);
    margin-bottom: 30px;
    animation: fadeInDown 0.8s ease;
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.header h1 i {
    margin-right: 10px;
}

.header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Lesson Selector */
.lesson-selector {
    background: transparent;
    /* Removed border and simplified since it's deeply nested now? No, user wants it to look good */
    /* Let's keep the sketchy border but make it a flex container for buttons */
    /* Or maybe remove the box look and just have floating buttons? User said "Select a Lesson" moved to bottom */
    /* I'll keep the box look as it groups them nicely */
    border: 2px solid var(--dark);
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.8s ease;
    
    /* Layout for buttons */
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* Old .lesson-selector h2 styles removed as h2 is outside now */

/* Old .lesson-buttons styles removed as buttons are direct children */

.lesson-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    background: var(--card-bg);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    cursor: pointer;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark);
    transition: var(--transition);
}

.lesson-btn:nth-child(odd) {
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
}

.lesson-btn:nth-child(even) {
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
}

.lesson-btn:hover {
    border-color: var(--primary);
    background: #f2f2f2;
    transform: translateY(-2px);
}

.lesson-btn.active {
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.lesson-btn i {
    font-size: 1rem;
}

/* Progress Bar */
.progress-container {
    background: transparent;
    border: 2px solid var(--dark);
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.8s ease 0.1s backwards;
}

.progress-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}

.progress-text {
    color: #718096;
    font-weight: 400;
    margin-left: 5px;
}

.progress-bar {
    height: 14px;
    background: transparent;
    border: 2px solid var(--dark);
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
    padding: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--dark);
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    width: 0%;
    transition: width 0.5s ease;
}

/* Flashcard Container */
.flashcard-container {
    perspective: 1500px;
    margin-bottom: 25px;
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.flashcard {
    width: 100%;
    min-height: 380px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.flashcard:hover {
    transform: translate(-3px, -3px);
}

.flashcard-inner {
    width: 100%;
    height: 380px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Sketchy card */
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
    border: 2px solid var(--dark);
}

.flashcard-front {
    background: var(--light);
}

.flashcard-back {
    background: var(--dark);
    color: var(--light);
    transform: rotateY(180deg);
}

.card-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.flashcard-front .card-label {
    color: var(--dark);
}

.flashcard-back .card-label {
    color: var(--light);
}

.lesson-badge {
    display: inline-block;
    background: var(--gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 20px;
    align-self: flex-start;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0 10px;
    width: 100%;
    overflow-y: auto;
    word-break: break-word;
}

.flashcard-front .card-content {
    color: var(--dark);
    font-weight: 500;
}

.flashcard-back .card-content {
    font-size: 1.5rem;
}

/* Markdown Styles */
.card-content p {
    margin-bottom: 0.8em;
}

.card-content p:last-child {
    margin-bottom: 0;
}

.card-content strong {
    font-weight: 700;
    color: inherit;
}

.card-content em {
    font-style: italic;
}

.card-content ul, .card-content ol {
    text-align: left;
    margin: 0.5em 0;
    padding-left: 1.5em;
    width: 100%; /* Ensure lists take full width */
    max-width: fit-content; /* Center the list block itself */
}

.card-content li {
    margin-bottom: 0.3em;
}

.card-content code {
    background: rgba(0,0,0,0.08); /* Darker subtle background for front */
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    color: var(--secondary);
}

.flashcard-back .card-content code {
    background: rgba(255,255,255,0.15); /* Light background for back */
    color: #f093fb; /* Accent color for code on dark background */
}

.card-content blockquote {
    border-left: 4px solid var(--accent);
    margin: 1em 0;
    padding: 0.5em 1em;
    font-style: italic;
    background: rgba(0,0,0,0.03);
    border-radius: 0 8px 8px 0;
    text-align: left;
    width: 100%;
}

.flashcard-back .card-content blockquote {
    background: rgba(255,255,255,0.05);
}

.flip-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.6;
    margin-top: 15px;
}

.flashcard-front .flip-hint {
    color: var(--dark);
}

/* Controls */
.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    animation: fadeInUp 0.8s ease 0.3s backwards;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    cursor: pointer;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    border: 2px solid var(--dark); /* ensuring border exists for the look */
}

.prev-btn {
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
}

.next-btn {
     border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
}

.prev-btn,
.next-btn {
    background: white;
    color: var(--dark);
}

.prev-btn:hover,
.next-btn:hover {
    background: var(--dark);
    color: var(--light); /* Ensure text is visible on dark background */
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
}

.shuffle-btn {
    background: var(--gradient);
    color: white;
}

.shuffle-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
}

/* Shortcuts */
.shortcuts {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    color: var(--dark);
    font-size: 0.85rem;
    margin-bottom: 25px;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.4s backwards;
}

.shortcuts p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shortcuts span {
    display: flex;
    align-items: center;
    gap: 5px;
}

kbd {
    background: transparent;
    padding: 4px 10px;
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    border: 2px solid var(--dark);
    font-family: 'Patrick Hand', sans-serif;
    font-size: 0.9rem;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* Stats */
.stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    animation: fadeInUp 0.8s ease 0.5s backwards;
}

.stat-item {
    background: transparent;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px 35px;
    text-align: center;
    color: var(--dark);
    border: 2px solid var(--dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.stat-item:nth-child(1) {
     border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
}

.stat-item:nth-child(2) {
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
}

.stat-item:nth-child(3) {
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
}

.stat-item i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.stat-item span {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.stat-item p {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 5px;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.flashcard:hover .flashcard-front,
.flashcard:hover .flashcard-back {
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        display: none;
    }

    .lesson-buttons {
        justify-content: center;
    }

    .lesson-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .flashcard {
        height: 350px;
    }

    .flashcard-front p,
    .flashcard-back p {
        font-size: 1rem;
    }

    .controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "prev next"
            "shuffle shuffle";
        gap: 10px;
        margin-bottom: 15px;
    }

    .prev-btn { grid-area: prev; }
    .next-btn { grid-area: next; }
    .shuffle-btn { grid-area: shuffle; }

    .secondary-controls {
         margin-bottom: 10px;
    }

    .control-btn {
        width: 100%;
        min-width: 0; 
        padding: 12px;
        justify-content: center;
        font-size: 0.9rem;
    }

    .control-btn span {
        display: none; /* Hide text on mobile for extra compactness? Or keep it? User didn't explicitly say hide text, but "more compact". Maybe just smaller font and padding is enough. Let's keep text for now but reduce padding. */
    }

    /* Actually, let's keep text but make it fit nicely */
    .control-btn span {
        display: inline; 
        font-size: 0.8rem;
    }
    
    .stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .stat-item {
        width: calc(33.33% - 10px);
        min-width: 80px;
        padding: 10px 5px;
    }
    
    .stat-item i {
        font-size: 1rem;
    }
    
    .stat-item span {
        font-size: 1.2rem;
    }
    
    .stat-item p {
        font-size: 0.7rem;
    }

    .shortcuts {
        display: none;
    }
}

@media (max-width: 480px) {
    body {
        padding: 15px;
    }

    .flashcard {
        height: 320px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: 20px;
    }
}

/* Secondary Controls (Reset Button) */
.secondary-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease 0.35s backwards;
}

.reset-btn {
    background: transparent;
    color: var(--dark);
    border: 2px solid var(--dark);
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-family: 'Patrick Hand', sans-serif;
    letter-spacing: 1px;
}

.reset-btn:hover {
    background: var(--dark);
    color: var(--light);
    border-color: var(--dark);
    transform: translateY(-2px);
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--light);
    border: 2px solid var(--dark);
    padding: 15px 25px;
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
    box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    z-index: 1000;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification.show {
    transform: translateX(0);
}

.notification-success {
    border-left: 4px solid var(--success);
}

.notification-success i {
    color: var(--success);
}

.notification-info {
    border-left: 4px solid var(--primary);
}

.notification-info i {
    color: var(--primary);
}

.notification i {
    font-size: 1.2rem;
}

/* Shuffled indicator */
.shuffle-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--warning);
    color: white;
    padding: 4px 10px;
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Progress saved indicator */
.saved-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--light);
    border: 1px dashed var(--dark);
    color: var(--dark);
    padding: 8px 15px;
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.saved-indicator i {
    color: var(--success);
}

@media (max-width: 768px) {
    .notification {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-120%);
    }
    
    .notification.show {
        transform: translateY(0);
    }
    
    .saved-indicator {
        bottom: 10px;
        left: 10px;
        right: 10px;
        justify-content: center;
    }
}

/* Theme Toggle */
.theme-toggle {
    background: var(--card-bg);
    border: 2px solid var(--dark);
    font-size: 1rem;
    color: var(--dark);
    cursor: pointer;
    transition: var(--transition);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}

.theme-toggle:hover {
    transform: rotate(15deg) scale(1.1);
}

/* Bionic Reading Toggle */
.bionic-toggle {
    background: var(--card-bg);
    border: 2px solid var(--dark);
    font-size: 1rem;
    color: var(--dark);
    cursor: pointer;
    transition: var(--transition);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}

.bionic-toggle:hover {
    transform: scale(1.1);
}

.bionic-toggle.active {
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.toggle-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark);
    min-width: 80px;
}

/* Dark Mode Specific Adjustments */
body.dark-mode .lesson-btn {
    border-color: #444;
}

body.dark-mode .lesson-btn:hover {
    background: #333;
    border-color: var(--primary);
}

body.dark-mode .progress-container, 
body.dark-mode .progress-bar {
    border-color: #555;
    background: #2d2d2d;
}

body.dark-mode .progress-text {
    color: #a0aec0;
}

body.dark-mode .flashcard-back {
    background: #333;
    color: var(--dark);
}

body.dark-mode .flashcard-back .card-label {
    color: #ccc;
}


body.dark-mode .prev-btn,
body.dark-mode .next-btn {
    background: var(--card-bg); /* Use the card background color (dark grey) */
    border-color: #555;
}

body.dark-mode .prev-btn:hover,
body.dark-mode .next-btn:hover {
    background: #444;
    color: var(--dark);
}


/* Deck Management Controls - Styled to match "Paper & Pencil" Theme */

.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
    background: transparent;
    animation: fadeInDown 0.8s ease;
}

.deck-selector {
    flex-grow: 1;
    position: relative;
    max-width: 70%;
}

.custom-select {
    width: 100%;
    padding: 12px 40px 12px 20px; /* Space for the arrow */
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.1rem;
    border: 2px solid var(--dark);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Sketchy border */
    background-color: var(--card-bg);
    color: var(--dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    text-overflow: ellipsis;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
    transition: var(--transition);
}

/* Dark mode fix for the SVG arrow */
body.dark-mode .custom-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfbf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.custom-select:hover, .custom-select:focus {
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
    outline: none;
}

.action-btn {
    padding: 12px 24px;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--light);
    background: var(--dark);
    border: 2px solid transparent;
    border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; /* Opposite sketchy border */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.action-btn i {
    font-size: 0.9em;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
    background: var(--dark);
    /* In dark mode, maybe a lighter hover? handled in dark mode block */
}

/* Modal Styles - Sketchy Card Look */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: var(--card-bg);
    margin: 5% auto;
    padding: 40px;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Sketchy card */
    border: 2px solid var(--dark);
    width: 90%;
    max-width: 600px;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.close-modal {
    color: var(--accent);
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 0.8;
}

.close-modal:hover {
    color: var(--danger);
}

.modal h2 {
    font-family: 'Patrick Hand', cursive;
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 25px;
    border-bottom: 2px dashed var(--accent);
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--secondary);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Sketchy inputs */
    font-family: inherit; /* Use default font for input, but.. */
    font-size: 1rem;
    background-color: var(--light);
    color: var(--dark);
    transition: border-color 0.3s;
}

/* For textarea specifically, keep monospace for JSON */
.form-group textarea {
    border-radius: unset;
    height: 180px;
    resize: vertical;
    font-family: 'Consolas', 'Monaco', monospace; /* Keep code font for JSON */
    font-size: 0.9rem;
    line-height: 1.5;
    border: 2px dashed var(--secondary); /* Dashed border for "notes" feel */
}

/* Textarea specific scrollbar */
.form-group textarea::-webkit-scrollbar {
    width: 10px;
}

.form-group textarea::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.02);
    border-left: none;
    margin: 8px 0;
}

.form-group textarea::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.form-group textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary);
}

/* Custom resize handle for textarea */
.form-group textarea::-webkit-resizer {
    background-color: transparent;
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--secondary) var(--secondary) transparent;
    /* Sketchy lines effect using box-shadow */
    box-shadow: -3px -3px 0 var(--light), -5px -5px 0 var(--accent);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}

.input-hint {
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 5px;
    font-style: italic;
}

.error-message {
    color: var(--danger);
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-actions {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

/* Ensure modal buttons look good */
.modal-actions button {
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.1rem;
    padding: 10px 25px;
    border-width: 2px;
}

#cancelDeckBtn {
    background: transparent;
    color: var(--dark);
    border-color: var(--dark);
}

#cancelDeckBtn:hover {
    background: #f0f0f0;
}

#saveDeckBtn {
    background: var(--dark);
    color: var(--light);
    border-color: var(--dark);
}

#saveDeckBtn:hover {
    background: var(--primary);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Dark Mode fixes for Deck Management */
body.dark-mode .custom-select {
    border-color: var(--primary); /* Lighter border in dark mode */
}

body.dark-mode .action-btn {
    background: var(--card-bg); /* Use dark card background */
    border: 2px solid var(--primary);
    color: var(--dark);
}

body.dark-mode .action-btn:hover {
    background: #333;
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background-color: rgba(255,255,255,0.05);
    border-color: #555;
    color: var(--dark);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    border-color: var(--primary);
    background-color: rgba(255,255,255,0.08);
}

#deleteDeckBtn { padding: 12px 15px; }

/* Custom Scrollbar - Pencil/Sketch Style */
::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-left: 1px dashed var(--accent); /* Dashed line like a sketchbook margin */
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary); /* Pencil lead color */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Sketchy shape */
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary);
}

/* Dark mode scrollbar */
body.dark-mode ::-webkit-scrollbar-track {
    border-left-color: #555;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #777;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

/* Search Container */
.search-container {
    position: relative;
    margin-bottom: 25px;
    animation: fadeInUp 0.8s ease 0.05s backwards;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 18px;
    color: var(--accent);
    font-size: 1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 15px 45px 15px 50px;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.1rem;
    border: 2px solid var(--dark);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: var(--card-bg);
    color: var(--dark);
    outline: none;
    transition: var(--transition);
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.search-input::placeholder {
    color: var(--accent);
}

.clear-search-btn {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 5px;
    font-size: 1rem;
    transition: var(--transition);
}

.clear-search-btn:hover {
    color: var(--danger);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 2px solid var(--dark);
    border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
}

.search-result-item {
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px dashed var(--accent);
    transition: var(--transition);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.search-result-item .result-question {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
    font-size: 1rem;
}

.search-result-item .result-answer {
    font-size: 0.9rem;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-item .result-lesson {
    font-size: 0.8rem;
    color: var(--primary);
    margin-top: 4px;
}

.search-no-results {
    padding: 15px 18px;
    color: var(--accent);
    text-align: center;
    font-style: italic;
}

.search-highlight {
    background-color: rgba(237, 137, 54, 0.3);
    padding: 0 2px;
    border-radius: 3px;
}

body.dark-mode .search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}