@import '_content/TAC.Blazor/TAC.Blazor.42573y5f1x.bundle.scp.css';

/* /Pages/AssignmentsPage.razor.rz.scp.css */
/* Play button styles */
.assignment-play-btn[b-b9goglr0hs] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.assignment-play-btn:hover[b-b9goglr0hs] {
    background-color: var(--trak-color-light-gray, #E2E3E9);
}

.assignment-play-icon[b-b9goglr0hs] {
    font-size: 18px;
    color: var(--trak-color-dark-blue, #0A2463);
}
/* /Pages/AvailableBooksPage.razor.rz.scp.css */
/* ===== Bookstore Page Layout ===== */
.bookstore-page[b-ytmgpw0sx2] {
    padding: 16px 20px;
    background-color: #f5f5f7;
    min-height: 100%;
}

/* ===== Search Bar ===== */
.bookstore-search[b-ytmgpw0sx2] {
    margin-bottom: 12px;
    max-width: 600px;
}

/* ===== Filter Row ===== */
.bookstore-filters[b-ytmgpw0sx2] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.bookstore-filters > *[b-ytmgpw0sx2] {
    min-width: 160px;
    flex: 1;
    max-width: 220px;
}

/* ===== Sort Row ===== */
.bookstore-sort[b-ytmgpw0sx2] {
    margin-bottom: 12px;
    max-width: 220px;
}

/* ===== Active Filter Chips ===== */
.active-filters-row[b-ytmgpw0sx2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.active-filters-label[b-ytmgpw0sx2] {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}

.filter-chip[b-ytmgpw0sx2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.chip-remove[b-ytmgpw0sx2] {
    background: none;
    border: none;
    color: #1565c0;
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.chip-remove:hover[b-ytmgpw0sx2] {
    opacity: 1;
}

.chip-clear-all[b-ytmgpw0sx2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #ef5350;
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.chip-clear-all:hover[b-ytmgpw0sx2] {
    background: #e53935;
}

/* ===== Loading & Empty States ===== */
.bookstore-loading[b-ytmgpw0sx2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.bookstore-empty[b-ytmgpw0sx2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    gap: 8px;
    color: #555;
    font-size: 16px;
}

.bookstore-empty-hint[b-ytmgpw0sx2] {
    font-size: 14px;
    color: #888;
}

.empty-clear-link[b-ytmgpw0sx2] {
    background: none;
    border: none;
    color: #1976d2;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 0;
    margin-top: 4px;
}

.empty-clear-link:hover[b-ytmgpw0sx2] {
    color: #0d47a1;
}

/* ===== Book Grid ===== */
.bookstore-grid[b-ytmgpw0sx2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
}

/* ===== Flip Card Container ===== */
.flip-card[b-ytmgpw0sx2] {
    width: 100%;
    max-width: 280px;
    height: 380px;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.2s;
}

.flip-card:hover[b-ytmgpw0sx2] {
    transform: translateY(-4px) rotate(1deg);
}

.flip-card-inner[b-ytmgpw0sx2] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner[b-ytmgpw0sx2] {
    transform: rotateY(180deg);
}

/* ===== Card Faces (shared) ===== */
.flip-card-front[b-ytmgpw0sx2],
.flip-card-back[b-ytmgpw0sx2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
}

/* ===== In Library Card Highlight ===== */
.flip-card.in-library .flip-card-front[b-ytmgpw0sx2],
.flip-card.in-library .flip-card-back[b-ytmgpw0sx2] {
    border: 2px solid #4caf50;
}

/* ===== Front of Card ===== */
.flip-card-front[b-ytmgpw0sx2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    position: relative;
}

/* ===== Library Badge ===== */
.library-badge[b-ytmgpw0sx2] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #4caf50;
    color: white;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
    white-space: nowrap;
}

.card-cover-container[b-ytmgpw0sx2] {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
    margin-bottom: 10px;
}

.card-cover-image[b-ytmgpw0sx2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-title[b-ytmgpw0sx2] {
    font-weight: 700;
    font-size: 17px;
    color: #222;
    text-align: center;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    word-wrap: break-word;
}

.card-meta[b-ytmgpw0sx2] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 6px;
}

/* ===== Reading Level Badges ===== */
.reading-level-badge[b-ytmgpw0sx2] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.badge-level-1[b-ytmgpw0sx2] {
    background-color: #4caf50;
}

.badge-level-2[b-ytmgpw0sx2] {
    background-color: #2196f3;
}

.badge-level-3[b-ytmgpw0sx2] {
    background-color: #9c27b0;
}

.badge-level-4[b-ytmgpw0sx2] {
    background-color: #ff9800;
}

.badge-level-5[b-ytmgpw0sx2] {
    background-color: #f44336;
}

.badge-level-default[b-ytmgpw0sx2] {
    background-color: #757575;
}

.card-page-count[b-ytmgpw0sx2] {
    font-size: 14px;
    color: #666;
}

.card-tap-hint[b-ytmgpw0sx2] {
    font-size: 11px;
    color: #aaa;
    margin-top: auto;
    display: none;
}

/* ===== Back of Card ===== */
.flip-card-back[b-ytmgpw0sx2] {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.card-back-title[b-ytmgpw0sx2] {
    font-weight: 700;
    font-size: 18px;
    color: #222;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-back-meta[b-ytmgpw0sx2] {
    display: flex;
    gap: 12px;
    font-size: 15px;
    color: #555;
    margin-bottom: 8px;
}

.card-back-categories[b-ytmgpw0sx2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.category-tag[b-ytmgpw0sx2] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    background-color: #e8eaf6;
    color: #3949ab;
    font-size: 13px;
    font-weight: 500;
}

.card-back-summary[b-ytmgpw0sx2] {
    font-size: 15px;
    color: #444;
    line-height: 1.4;
    margin: 0 0 auto 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Card Action Buttons ===== */
.card-back-actions[b-ytmgpw0sx2] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.btn-card-action[b-ytmgpw0sx2] {
    flex: 1;
    padding: 10px 4px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-card-action:disabled[b-ytmgpw0sx2] {
    opacity: 0.5;
    cursor: default;
}

.btn-read[b-ytmgpw0sx2] {
    background-color: #1976d2;
    color: white;
}

.btn-read:not(:disabled):hover[b-ytmgpw0sx2] {
    background-color: #1565c0;
}

.btn-add-library[b-ytmgpw0sx2] {
    background-color: #4caf50;
    color: white;
}

.btn-add-library:hover[b-ytmgpw0sx2] {
    background-color: #43a047;
}

.btn-in-library[b-ytmgpw0sx2] {
    background-color: #e0e0e0;
    color: #888;
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
    .bookstore-grid[b-ytmgpw0sx2] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
    .bookstore-page[b-ytmgpw0sx2] {
        padding: 12px;
    }

    .bookstore-grid[b-ytmgpw0sx2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .flip-card[b-ytmgpw0sx2] {
        height: 340px;
    }

    .card-cover-container[b-ytmgpw0sx2] {
        height: 160px;
    }

    .bookstore-filters > *[b-ytmgpw0sx2] {
        min-width: 140px;
        max-width: none;
    }

    .bookstore-sort[b-ytmgpw0sx2] {
        max-width: none;
    }

    /* Show tap hint on touch devices */
    .card-tap-hint[b-ytmgpw0sx2] {
        display: block;
    }

    /* Disable hover flip on mobile — use tap toggle only */
    .flip-card:hover[b-ytmgpw0sx2] {
        transform: none;
    }
}
/* /Pages/BookEditorPage.razor.rz.scp.css */
/* BookEditorPage Styles */

.book-editor-input-group[b-mcticushl8] {
    margin-bottom: 5px;
}

.book-editor-series-row[b-mcticushl8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.book-editor-series-row > :first-child[b-mcticushl8] {
    flex: 1;
}

.book-editor-add-series-btn[b-mcticushl8] {
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-editor-add-series-btn:hover[b-mcticushl8] {
    background: #e0e0e0;
}
/* /Pages/BookReaderPage.razor.rz.scp.css */
.book-reader-content[b-azsked1blt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #FDF4E3;
}

.book-reader-loading[b-azsked1blt] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 300px;
}

.book-reader-empty[b-azsked1blt] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    color: #666;
}

.book-reader-container[b-azsked1blt] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    position: relative;
    touch-action: pan-y;
    user-select: none;
}

.btn-nav[b-azsked1blt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

.btn-nav:hover[b-azsked1blt] {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-nav:active[b-azsked1blt] {
    background-color: rgba(0, 0, 0, 0.1);
}

.nav-arrow[b-azsked1blt] {
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.book-reader-page[b-azsked1blt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
}

.book-reader-image[b-azsked1blt] {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.book-reader-cover[b-azsked1blt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
}

.book-reader-cover-title[b-azsked1blt] {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.book-reader-the-end[b-azsked1blt] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.book-reader-the-end-text[b-azsked1blt] {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    font-style: italic;
}

.book-reader-text-area[b-azsked1blt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 8px 16px;
    width: 100%;
}

.book-reader-text[b-azsked1blt] {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    text-align: center;
}

.btn-tts[b-azsked1blt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
}

.btn-tts:hover[b-azsked1blt] {
    background-color: rgba(0, 0, 0, 0.08);
}

.btn-tts:disabled[b-azsked1blt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tts-icon[b-azsked1blt] {
    width: 32px;
    height: 32px;
}

.book-reader-page-indicator[b-azsked1blt] {
    display: flex;
    justify-content: center;
    padding: 8px 0 16px 0;
    font-size: 14px;
    color: #666;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .btn-nav[b-azsked1blt] {
        width: 36px;
        min-width: 36px;
    }

    .nav-arrow[b-azsked1blt] {
        font-size: 22px;
    }

    .book-reader-page[b-azsked1blt] {
        padding: 8px;
    }

    .book-reader-image[b-azsked1blt] {
        max-height: 50vh;
    }

    .book-reader-cover-title[b-azsked1blt] {
        font-size: 22px;
    }

    .book-reader-the-end-text[b-azsked1blt] {
        font-size: 28px;
    }

    .book-reader-text[b-azsked1blt] {
        font-size: 16px;
    }

    .book-reader-text-area[b-azsked1blt] {
        padding: 4px 8px;
    }
}
/* /Pages/BookReviewPage.razor.rz.scp.css */
/* BookReviewPage Styles */

.book-review-content[b-jpjh6p9s5e] {
    padding: 1rem;
}

.book-review-loading[b-jpjh6p9s5e] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.book-review-form[b-jpjh6p9s5e] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.book-review-error[b-jpjh6p9s5e] {
    color: red;
    font-size: 0.9rem;
}

.book-review-input-group[b-jpjh6p9s5e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.book-review-label[b-jpjh6p9s5e] {
    font-weight: 600;
    font-size: 0.95rem;
}

.book-review-comments[b-jpjh6p9s5e] {
    min-height: 120px;
}
/* /Pages/BookSeriesEditPage.razor.rz.scp.css */
/* BookSeriesEditPage Styles */

.bookseries-edit-content[b-fa5fb5w626] {
    padding: 1rem;
}

.bookseries-edit-loading[b-fa5fb5w626] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.bookseries-edit-form[b-fa5fb5w626] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.bookseries-edit-error[b-fa5fb5w626] {
    color: red;
    font-size: 0.9rem;
}

.bookseries-edit-input-group[b-fa5fb5w626] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bookseries-chip-active[b-fa5fb5w626],
.bookseries-chip-inactive[b-fa5fb5w626] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.bookseries-chip-active[b-fa5fb5w626] {
    background-color: #4caf50;
    color: #fff;
}

.bookseries-chip-inactive[b-fa5fb5w626] {
    background-color: #e0e0e0;
    color: #424242;
}

.bookseries-chip-active:hover[b-fa5fb5w626],
.bookseries-chip-inactive:hover[b-fa5fb5w626] {
    opacity: 0.85;
}

.bookseries-edit-not-found[b-fa5fb5w626] {
    padding: 1rem;
}
/* /Pages/BookSeriesPage.razor.rz.scp.css */
/* BookSeriesPage Styles */
/* /Pages/BooksPage.razor.rz.scp.css */
/* ===== Page Layout ===== */
.books-page-content[b-9yzp5faw56] {
    padding: 16px 20px;
    background-color: #f5f5f7;
    min-height: 100%;
}

.books-loading[b-9yzp5faw56] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* ===== Empty Library State ===== */
.books-empty[b-9yzp5faw56] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    gap: 12px;
}

.empty-title[b-9yzp5faw56] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.empty-hint[b-9yzp5faw56] {
    font-size: 14px;
    color: #888;
}

.btn-browse-books-empty[b-9yzp5faw56] {
    margin-top: 8px;
    padding: 10px 24px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-browse-books-empty:hover[b-9yzp5faw56] {
    background-color: #1565c0;
}

/* ===== Section Titles ===== */
.section-title[b-9yzp5faw56] {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
}

/* ===== Continue Reading Section ===== */
.continue-reading-section[b-9yzp5faw56] {
    margin-bottom: 20px;
}

.continue-reading-list[b-9yzp5faw56] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.continue-reading-card[b-9yzp5faw56] {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.continue-reading-card:hover[b-9yzp5faw56] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.continue-card-cover[b-9yzp5faw56] {
    width: 60px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #f0f0f0;
}

.continue-card-image[b-9yzp5faw56] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.continue-card-details[b-9yzp5faw56] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.continue-card-title[b-9yzp5faw56] {
    font-weight: 600;
    font-size: 15px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.continue-card-progress-text[b-9yzp5faw56] {
    font-size: 12px;
    color: #666;
}

.continue-card-progress-bar[b-9yzp5faw56],
.card-progress-bar[b-9yzp5faw56] {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill[b-9yzp5faw56] {
    height: 100%;
    background: #4caf50;
    border-radius: 3px;
    transition: width 0.3s;
}

.continue-card-percent[b-9yzp5faw56] {
    font-size: 12px;
    font-weight: 600;
    color: #4caf50;
}

.btn-continue-reading[b-9yzp5faw56] {
    align-self: flex-start;
    margin-top: 4px;
    padding: 6px 16px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-continue-reading:hover[b-9yzp5faw56] {
    background-color: #1565c0;
}

/* ===== Browse Books Banner ===== */
.browse-books-banner[b-9yzp5faw56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 12px;
    margin-bottom: 20px;
}

.browse-banner-text[b-9yzp5faw56] {
    font-size: 15px;
    font-weight: 500;
    color: #1565c0;
}

.btn-browse-books[b-9yzp5faw56] {
    padding: 8px 20px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-browse-books:hover[b-9yzp5faw56] {
    background-color: #1565c0;
}

/* ===== Library Section ===== */
.library-section[b-9yzp5faw56] {
    margin-bottom: 20px;
}

/* ===== Library Grid ===== */
.library-grid[b-9yzp5faw56] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
}

/* ===== Flip Card Container ===== */
.flip-card[b-9yzp5faw56] {
    width: 100%;
    max-width: 280px;
    height: 420px;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.2s;
}

.flip-card:hover[b-9yzp5faw56] {
    transform: translateY(-4px);
}

.flip-card-inner[b-9yzp5faw56] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner[b-9yzp5faw56] {
    transform: rotateY(180deg);
}

/* ===== Card Faces (shared) ===== */
.flip-card-front[b-9yzp5faw56],
.flip-card-back[b-9yzp5faw56] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
}

/* ===== Front of Card ===== */
.flip-card-front[b-9yzp5faw56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
}

.card-cover-container[b-9yzp5faw56] {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
    margin-bottom: 10px;
}

.card-cover-image[b-9yzp5faw56] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-title[b-9yzp5faw56] {
    font-weight: 700;
    font-size: 17px;
    color: #222;
    text-align: center;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    word-wrap: break-word;
}

.card-meta[b-9yzp5faw56] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 6px;
}

/* ===== Reading Level Badges ===== */
.reading-level-badge[b-9yzp5faw56] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.badge-level-1[b-9yzp5faw56] { background-color: #4caf50; }
.badge-level-2[b-9yzp5faw56] { background-color: #2196f3; }
.badge-level-3[b-9yzp5faw56] { background-color: #9c27b0; }
.badge-level-4[b-9yzp5faw56] { background-color: #ff9800; }
.badge-level-5[b-9yzp5faw56] { background-color: #f44336; }
.badge-level-default[b-9yzp5faw56] { background-color: #757575; }

.card-page-count[b-9yzp5faw56] {
    font-size: 14px;
    color: #666;
}

/* ===== Reading Status Indicators ===== */
.card-reading-status[b-9yzp5faw56] {
    width: 100%;
    margin-top: 4px;
    text-align: center;
}

.status-completed[b-9yzp5faw56] {
    display: inline-block;
    padding: 3px 12px;
    background-color: #e8f5e9;
    color: #2e7d32;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.status-not-started[b-9yzp5faw56] {
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

.status-in-progress[b-9yzp5faw56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 0 8px;
}

.status-progress-text[b-9yzp5faw56] {
    font-size: 13px;
    color: #666;
}

.card-tap-hint[b-9yzp5faw56] {
    font-size: 11px;
    color: #aaa;
    margin-top: auto;
    display: none;
}

/* ===== Back of Card ===== */
.flip-card-back[b-9yzp5faw56] {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.card-back-title[b-9yzp5faw56] {
    font-weight: 700;
    font-size: 18px;
    color: #222;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-back-meta[b-9yzp5faw56] {
    display: flex;
    gap: 12px;
    font-size: 15px;
    color: #555;
    margin-bottom: 8px;
}

.card-back-categories[b-9yzp5faw56] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.category-tag[b-9yzp5faw56] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    background-color: #e8eaf6;
    color: #3949ab;
    font-size: 13px;
    font-weight: 500;
}

.card-back-summary[b-9yzp5faw56] {
    font-size: 15px;
    color: #444;
    line-height: 1.4;
    margin: 0 0 auto 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Card Action Buttons ===== */
.card-back-actions[b-9yzp5faw56] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.btn-card-action[b-9yzp5faw56] {
    flex: 1;
    padding: 10px 4px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-read[b-9yzp5faw56] {
    background-color: #1976d2;
    color: white;
}

.btn-read:hover[b-9yzp5faw56] {
    background-color: #1565c0;
}

.btn-remove[b-9yzp5faw56] {
    background-color: #ef5350;
    color: white;
}

.btn-remove:hover[b-9yzp5faw56] {
    background-color: #e53935;
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
    .library-grid[b-9yzp5faw56] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
    .books-page-content[b-9yzp5faw56] {
        padding: 12px;
    }

    .library-grid[b-9yzp5faw56] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .flip-card[b-9yzp5faw56] {
        height: 380px;
    }

    .card-cover-container[b-9yzp5faw56] {
        height: 150px;
    }

    .browse-books-banner[b-9yzp5faw56] {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .continue-card-cover[b-9yzp5faw56] {
        width: 50px;
        height: 65px;
    }

    /* Show tap hint on touch devices */
    .card-tap-hint[b-9yzp5faw56] {
        display: block;
    }

    /* Disable hover on mobile */
    .flip-card:hover[b-9yzp5faw56] {
        transform: none;
    }
}
/* /Pages/ClassCategoriesPage.razor.rz.scp.css */
/* ClassCategoriesPage Styles */
/* Most styling is now handled by TrakListLayout */

/* Page-specific overrides can be added here if needed */
/* /Pages/ClassCategoryEditPage.razor.rz.scp.css */
/* ClassCategoryEditPage Styles */

.class-category-content[b-mttkg9ke9p] {
    padding: 1rem;
}

.class-category-loading[b-mttkg9ke9p] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.class-category-form[b-mttkg9ke9p] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.class-category-error[b-mttkg9ke9p] {
    color: red;
    font-size: 0.9rem;
}

.class-category-input-group[b-mttkg9ke9p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Pages/ClassDetailsPage.razor.rz.scp.css */
/* ClassDetailsPage Styles */

.class-details-content[b-aafn5tmnpx] {
    padding: 1rem;
}

.class-details-loading[b-aafn5tmnpx] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.class-details-form[b-aafn5tmnpx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.class-details-error[b-aafn5tmnpx] {
    color: red;
    font-size: 0.9rem;
}

.class-details-field[b-aafn5tmnpx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.class-details-title[b-aafn5tmnpx] {
    font-size: 1.5rem;
    font-weight: bold;
}

.class-details-label[b-aafn5tmnpx] {
    font-weight: 600;
    color: #666;
    font-size: 0.85rem;
}

.class-details-empty[b-aafn5tmnpx] {
    padding: 1rem;
}

.btn-select-class[b-aafn5tmnpx] {
    margin-top: 1rem;
}
/* /Pages/ClassEditPage.razor.rz.scp.css */
/* ClassEditPage Styles */

.class-edit-content[b-00cxqip8jh] {
    padding: 1rem;
}

.class-edit-loading[b-00cxqip8jh] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.class-edit-form[b-00cxqip8jh] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.class-edit-error[b-00cxqip8jh] {
    color: red;
    font-size: 0.9rem;
}

.class-edit-input-group[b-00cxqip8jh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.class-edit-category-row[b-00cxqip8jh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.class-edit-category-row > :first-child[b-00cxqip8jh] {
    flex: 1;
}

.class-edit-add-category-btn[b-00cxqip8jh] {
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.class-edit-add-category-btn:hover[b-00cxqip8jh] {
    background: #e0e0e0;
}

.class-edit-sections-group[b-00cxqip8jh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.class-edit-sections-header[b-00cxqip8jh] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e0e0e0;
}

.class-edit-section-row[b-00cxqip8jh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
}

.class-edit-section-row:hover[b-00cxqip8jh] {
    background: #f5f5f5;
}

.class-edit-section-name[b-00cxqip8jh] {
    flex: 1;
}

.class-edit-section-arrow[b-00cxqip8jh] {
    color: #999;
}

.class-edit-sections-empty[b-00cxqip8jh] {
    color: #999;
    font-style: italic;
    padding: 0.5rem 0;
}

.class-edit-not-found[b-00cxqip8jh] {
    padding: 1rem;
}
/* /Pages/ClassesPage.razor.rz.scp.css */
/* ClassesPage Styles */
/* Most styling is now handled by TrakListLayout */

/* Page-specific overrides can be added here if needed */
/* /Pages/ClassWorkPage.razor.rz.scp.css */
/* ClassWorkPage Styles */

.class-work-content[b-3ycrs0048m] {
    padding: 1rem;
}

.class-work-loading[b-3ycrs0048m] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.class-work-empty[b-3ycrs0048m] {
    padding: 1rem;
}

.class-work-header[b-3ycrs0048m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.class-work-title[b-3ycrs0048m] {
    font-size: 1.5rem;
    font-weight: bold;
}

.class-work-selected-on[b-3ycrs0048m] {
    color: #666;
    font-size: 0.9rem;
}

.class-work-sections[b-3ycrs0048m] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.class-work-sections-label[b-3ycrs0048m] {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.class-work-no-sections[b-3ycrs0048m] {
    color: #888;
    font-style: italic;
}

.class-work-section-row[b-3ycrs0048m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: background-color 0.2s;
}

.class-work-section-row:hover[b-3ycrs0048m] {
    background: #f0f0f0;
}

.class-work-section-name[b-3ycrs0048m] {
    font-weight: 500;
}

.class-work-section-tags[b-3ycrs0048m] {
    display: flex;
    gap: 0.5rem;
}

.class-work-tag[b-3ycrs0048m] {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 0.8rem;
    font-weight: 500;
}
/* /Pages/ClassWorkSectionsPage.razor.rz.scp.css */
/* ClassWorkSectionsPage Styles */

.section-content[b-rtd9zdf3sl] {
    padding: 1rem;
}

.section-loading[b-rtd9zdf3sl] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.section-empty[b-rtd9zdf3sl] {
    padding: 1rem;
    color: #888;
    font-style: italic;
}

.section-items[b-rtd9zdf3sl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-card[b-rtd9zdf3sl] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.section-card-assignment[b-rtd9zdf3sl] {
    cursor: pointer;
}

.section-card-assignment:hover[b-rtd9zdf3sl] {
    background: #f0f0f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.section-card-lesson[b-rtd9zdf3sl] {
    cursor: default;
}

.section-card-icon[b-rtd9zdf3sl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 1rem;
}

.section-card-assignment .section-card-icon[b-rtd9zdf3sl] {
    background: #fce8e6;
    color: #d93025;
}

.section-card-body[b-rtd9zdf3sl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.section-card-name[b-rtd9zdf3sl] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.section-card-detail[b-rtd9zdf3sl] {
    font-size: 0.85rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.section-card-type[b-rtd9zdf3sl] {
    display: flex;
    align-items: flex-start;
    padding-top: 0.125rem;
}

.section-type-tag[b-rtd9zdf3sl] {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.section-type-lesson[b-rtd9zdf3sl] {
    background: #e3f2fd;
    color: #1565c0;
}

.section-type-assignment[b-rtd9zdf3sl] {
    background: #fce4ec;
    color: #c62828;
}

@media (max-width: 600px) {
    .section-content[b-rtd9zdf3sl] {
        padding: 0.5rem;
    }

    .section-card[b-rtd9zdf3sl] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .section-card-icon[b-rtd9zdf3sl] {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.875rem;
    }

    .section-card-name[b-rtd9zdf3sl] {
        font-size: 0.875rem;
    }

    .section-card-detail[b-rtd9zdf3sl] {
        font-size: 0.8rem;
    }
}
/* /Pages/DoAssignmentPage.razor.rz.scp.css */
.do-assignment-content[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    height: 100%;
}

.do-assignment-loading[b-sblpu5ox2t] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.do-assignment-error[b-sblpu5ox2t] {
    color: #d32f2f;
    font-size: 1rem;
    padding: 16px;
    text-align: center;
}

.do-assignment-empty[b-sblpu5ox2t] {
    color: #666;
    font-size: 1rem;
    padding: 32px;
    text-align: center;
}

/* ===== Question View ===== */
.do-assignment-question[b-sblpu5ox2t] {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 28px 24px 24px;
    margin-top: 8px;
}

.question-top-section[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    border-bottom: none;
    width: 100%;
}

.question-timers[b-sblpu5ox2t] {
    display: flex;
    gap: 16px;
}

.timer-text[b-sblpu5ox2t] {
    font-size: 0.875rem;
    color: #555;
}

/* ===== Progress Bar ===== */
.progress-bar-container[b-sblpu5ox2t] {
    width: 100%;
    max-width: 480px;
    height: 12px;
    background-color: var(--trak-color-light-gray, #E2E3E9);
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill[b-sblpu5ox2t] {
    height: 100%;
    background: linear-gradient(90deg, var(--trak-color-blue, #0275FD), #42a5f5);
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* ===== Bottom Navigation ===== */
.question-bottom-nav[b-sblpu5ox2t] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 20px;
    margin-top: auto;
    gap: 12px;
}

/* ===== Fill in the Blank ===== */
.fill-blank-label[b-sblpu5ox2t] {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--trak-color-dark-blue, #0A2463);
}

.question-number[b-sblpu5ox2t] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--trak-color-blue, #0275FD);
    white-space: nowrap;
}

.question-text[b-sblpu5ox2t] {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    padding: 28px 0;
    color: var(--trak-color-dark-blue, #0A2463);
}

.question-answer-area[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.text-answer-input[b-sblpu5ox2t] {
    width: 100%;
    max-width: 280px;
}

/* Centered, larger text inside answer input */
[b-sblpu5ox2t] .answer-input-centered .e-input,
[b-sblpu5ox2t] .answer-input-centered input.e-input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 12px 8px;
}

[b-sblpu5ox2t] .answer-input-centered.e-input-group,
[b-sblpu5ox2t] .answer-input-centered.e-input-group.e-control-wrapper {
    min-height: 52px;
}

/* ===== Multiple Choice Options ===== */
.mc-options-label[b-sblpu5ox2t] {
    font-weight: bold;
    font-size: 0.95rem;
    color: #333;
}

.mc-options-list[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 400px;
}

.mc-option-btn[b-sblpu5ox2t] {
    padding: 10px 20px;
    border-radius: 15px;
    border: 1px solid #bbb;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: left;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.mc-option-unselected[b-sblpu5ox2t] {
    background-color: #fff;
    color: #333;
    border-color: #bbb;
}

.mc-option-unselected:hover:not(:disabled)[b-sblpu5ox2t] {
    background-color: #f0f0f0;
    border-color: #888;
}

.mc-option-selected[b-sblpu5ox2t] {
    background-color: #1565C0;
    color: #fff;
    border-color: #0D47A1;
}

.mc-option-btn:disabled[b-sblpu5ox2t] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Review View ===== */
.do-assignment-review[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px;
    width: 100%;
    max-width: 700px;
}

.review-message[b-sblpu5ox2t] {
    font-size: 1.15rem;
    color: #333;
    text-align: center;
}

.review-question-list[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.review-question-row[b-sblpu5ox2t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
}

.review-question-number[b-sblpu5ox2t] {
    font-weight: bold;
    font-size: 0.9rem;
    color: #555;
    min-width: 28px;
    text-align: right;
}

.review-question-info[b-sblpu5ox2t] {
    flex: 1;
    min-width: 0;
}

.review-question-text[b-sblpu5ox2t] {
    font-size: 0.95rem;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-question-answer[b-sblpu5ox2t] {
    font-size: 0.85rem;
    color: #1565C0;
    margin-top: 2px;
}

.review-not-answered[b-sblpu5ox2t] {
    color: #999;
    font-style: italic;
}

.review-edit-btn[b-sblpu5ox2t] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 8px;
    color: #666;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.review-edit-btn:hover[b-sblpu5ox2t] {
    background-color: #f0f0f0;
    color: #1565C0;
}

.review-actions[b-sblpu5ox2t] {
    display: flex;
    gap: 12px;
}

/* ===== Results View ===== */
.do-assignment-results[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px;
}

.results-score[b-sblpu5ox2t],
.results-time[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.results-label[b-sblpu5ox2t] {
    font-size: 0.95rem;
    color: #666;
}

.results-value[b-sblpu5ox2t] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #222;
}

/* ===== Results Question List ===== */
.results-question-list[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 700px;
}

.results-question-row[b-sblpu5ox2t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}

.results-row-correct[b-sblpu5ox2t] {
    border-left: 4px solid #2E7D32;
}

.results-row-wrong[b-sblpu5ox2t] {
    border-left: 4px solid #d32f2f;
}

.results-question-icon[b-sblpu5ox2t] {
    min-width: 24px;
    text-align: center;
    font-size: 1.2rem;
    padding-top: 2px;
}

.results-icon-correct[b-sblpu5ox2t] {
    color: #2E7D32;
    font-weight: bold;
}

.results-icon-wrong[b-sblpu5ox2t] {
    color: #d32f2f;
    font-weight: bold;
}

.results-question-detail[b-sblpu5ox2t] {
    flex: 1;
    min-width: 0;
}

.results-question-text[b-sblpu5ox2t] {
    font-size: 0.95rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 4px;
}

.results-your-answer[b-sblpu5ox2t],
.results-correct-answer[b-sblpu5ox2t] {
    font-size: 0.85rem;
    margin-top: 2px;
}

.results-answer-label[b-sblpu5ox2t] {
    color: #666;
    margin-right: 4px;
}

.results-answer-correct[b-sblpu5ox2t] {
    color: #2E7D32;
}

.results-answer-wrong[b-sblpu5ox2t] {
    color: #d32f2f;
}

/* ===== Buttons ===== */
.do-assignment-btn[b-sblpu5ox2t] {
    padding: 10px 24px;
    border-radius: 24px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.do-assignment-btn:active:not(:disabled)[b-sblpu5ox2t] {
    transform: scale(0.97);
}

.do-assignment-btn-primary[b-sblpu5ox2t] {
    background-color: var(--trak-color-blue, #0275FD);
    color: #fff;
    border-color: var(--trak-color-blue, #0275FD);
    box-shadow: 0 2px 8px rgba(2, 117, 253, 0.25);
}

.do-assignment-btn-primary:hover[b-sblpu5ox2t] {
    background-color: var(--trak-color-dark-blue, #0A2463);
    border-color: var(--trak-color-dark-blue, #0A2463);
}

.do-assignment-btn-secondary[b-sblpu5ox2t] {
    background-color: #fff;
    color: var(--trak-color-blue, #0275FD);
    border-color: var(--trak-color-blue, #0275FD);
}

.do-assignment-btn-secondary:hover[b-sblpu5ox2t] {
    background-color: rgba(2, 117, 253, 0.06);
}

/* Back button - outlined pill */
.do-assignment-btn-back[b-sblpu5ox2t] {
    background-color: #fff;
    color: var(--trak-color-blue, #0275FD);
    border-color: var(--trak-color-blue, #0275FD);
}

.do-assignment-btn-back:hover:not(:disabled)[b-sblpu5ox2t] {
    background-color: rgba(2, 117, 253, 0.06);
}

/* Next button - filled primary pill */
.do-assignment-btn-next[b-sblpu5ox2t] {
    background-color: var(--trak-color-blue, #0275FD);
    color: #fff;
    border-color: var(--trak-color-blue, #0275FD);
    box-shadow: 0 2px 8px rgba(2, 117, 253, 0.25);
}

.do-assignment-btn-next:hover:not(:disabled)[b-sblpu5ox2t] {
    background-color: var(--trak-color-dark-blue, #0A2463);
    border-color: var(--trak-color-dark-blue, #0A2463);
}

.do-assignment-btn-back:disabled[b-sblpu5ox2t],
.do-assignment-btn-next:disabled[b-sblpu5ox2t] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ===== Spelling Word Reveal ===== */
.spelling-word-area[b-sblpu5ox2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.spelling-instructions[b-sblpu5ox2t] {
    text-align: center;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.spelling-instructions p[b-sblpu5ox2t] {
    margin: 0 0 4px 0;
}

.spelling-show-btn[b-sblpu5ox2t] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 24px;
    border: 2px solid var(--trak-color-blue, #0275FD);
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    color: var(--trak-color-dark-blue, #0A2463);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(2, 117, 253, 0.15);
}

.spelling-show-btn:hover:not(:disabled)[b-sblpu5ox2t] {
    background: linear-gradient(135deg, #BBDEFB, #90CAF9);
    box-shadow: 0 4px 12px rgba(2, 117, 253, 0.25);
}

.spelling-show-btn:active:not(:disabled)[b-sblpu5ox2t] {
    transform: scale(0.97);
}

.spelling-show-btn:disabled[b-sblpu5ox2t] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.spelling-word-display[b-sblpu5ox2t] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--trak-color-dark-blue, #0A2463);
    background: #E3F2FD;
    padding: 12px 28px;
    border-radius: 12px;
    border: 2px solid var(--trak-color-blue, #0275FD);
    text-align: center;
    min-width: 120px;
}

/* ===== Vertical Math Layout ===== */
[b-sblpu5ox2t] .math-vertical {
    display: inline-block;
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    line-height: 1.4;
}

[b-sblpu5ox2t] .math-vertical-row {
    white-space: nowrap;
}

[b-sblpu5ox2t] .math-vertical-line {
    border-bottom: 2px solid #333;
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 0;
    line-height: 0;
    height: 2px;
    overflow: hidden;
}

[b-sblpu5ox2t] .math-digit {
    display: inline-block;
    width: 0.6em;
    text-align: center;
}
/* /Pages/EditAssignmentPage.razor.rz.scp.css */
/* EditAssignmentPage Styles */

/* ===== Centered Container ===== */

.edit-assignment-content[b-a0f2toida4] {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.edit-assignment-loading[b-a0f2toida4] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.edit-assignment-form[b-a0f2toida4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.edit-assignment-error[b-a0f2toida4] {
    color: #d32f2f;
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
}

/* ===== Page Subtitle ===== */

.edit-assignment-subtitle[b-a0f2toida4] {
    color: #777;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

/* ===== Assignment Details Card ===== */

.assignment-details-card[b-a0f2toida4] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.assignment-details-title[b-a0f2toida4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.assignment-details-field[b-a0f2toida4] {
    margin-bottom: 1rem;
}

.assignment-details-field:last-child[b-a0f2toida4] {
    margin-bottom: 0;
}

.assignment-details-label[b-a0f2toida4] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.assignment-details-card[b-a0f2toida4]  .e-input-group,
.assignment-details-card[b-a0f2toida4]  .e-ddl.e-input-group {
    font-size: 1rem;
}

.assignment-details-card[b-a0f2toida4]  .e-input-group input.e-input,
.assignment-details-card[b-a0f2toida4]  .e-input-group .e-input {
    padding: 10px 14px;
    font-size: 1rem;
    height: auto;
}

.assignment-details-textarea[b-a0f2toida4]  textarea.e-input {
    min-height: 80px;
    resize: vertical;
}

/* ===== Assignment Type Buttons ===== */

.assignment-type-btn-group[b-a0f2toida4] {
    display: flex;
    gap: 8px;
    padding: 0.25rem 0;
}

.assignment-type-btn[b-a0f2toida4] {
    border-radius: 20px;
    padding: 6px 18px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.assignment-type-btn:hover[b-a0f2toida4] {
    border-color: #1565C0;
    color: #1565C0;
}

.assignment-type-btn.active[b-a0f2toida4] {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

.assignment-type-info[b-a0f2toida4] {
    font-size: 0.85rem;
    color: #1565C0;
    background: #E3F2FD;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0.5rem 0 0 0;
    line-height: 1.4;
}

/* ===== Navigation Buttons (Trak Style) ===== */

.edit-assignment-nav-group[b-a0f2toida4] {
    margin-bottom: 0;
}

.edit-assignment-nav-btn[b-a0f2toida4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #1565C0;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.edit-assignment-nav-btn:hover[b-a0f2toida4] {
    background: #0D47A1;
}

.edit-assignment-nav-btn:active[b-a0f2toida4] {
    background: #0A3D91;
}

.edit-assignment-nav-label[b-a0f2toida4] {
    font-weight: 500;
}

.edit-assignment-nav-arrow[b-a0f2toida4] {
    font-size: 1.1rem;
    opacity: 0.85;
}

/* ===== Comments ===== */

.edit-assignment-textarea-group[b-a0f2toida4] {
    margin-bottom: 0;
}

.edit-assignment-label[b-a0f2toida4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    display: block;
}

.edit-assignment-not-found[b-a0f2toida4] {
    text-align: center;
    color: #777;
    padding: 2rem;
    font-size: 1rem;
}

/* ===== Learning Options Card ===== */

.learning-options-card[b-a0f2toida4] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.learning-options-title[b-a0f2toida4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.learning-options-group[b-a0f2toida4] {
    margin-bottom: 1.25rem;
}

.learning-options-group:last-child[b-a0f2toida4] {
    margin-bottom: 0;
}

.learning-options-group-header[b-a0f2toida4] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem 0;
    padding-top: 0.25rem;
}

.learning-options-toggle-row[b-a0f2toida4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

.learning-options-toggle-row:last-child[b-a0f2toida4] {
    border-bottom: none;
}

.learning-options-label[b-a0f2toida4] {
    font-size: 0.95rem;
    color: #333;
    flex: 1;
    margin-right: 1rem;
    line-height: 1.4;
}

/* ===== Assessment Mode Chips ===== */

.learning-options-chip-group[b-a0f2toida4] {
    padding: 0.5rem 0;
}

.learning-options-chip-group[b-a0f2toida4]  .e-chip-list {
    display: flex;
    gap: 8px;
}

.learning-options-chip-group[b-a0f2toida4]  .e-chip-list .e-chip {
    border-radius: 20px;
    padding: 6px 18px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.learning-options-chip-group[b-a0f2toida4]  .e-chip-list .e-chip:hover {
    border-color: #1565C0;
    color: #1565C0;
}

.learning-options-chip-group[b-a0f2toida4]  .e-chip-list .e-chip.e-active {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

/* ===== Time Limits Card ===== */

.time-limits-card[b-a0f2toida4] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.time-limits-title[b-a0f2toida4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.time-limits-toggle-row[b-a0f2toida4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.time-limits-label[b-a0f2toida4] {
    font-size: 0.95rem;
    color: #333;
    flex: 1;
    margin-right: 1rem;
    line-height: 1.4;
}

.time-limits-group[b-a0f2toida4] {
    margin-top: 1rem;
}

.time-limits-group-header[b-a0f2toida4] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem 0;
}

.time-limits-type-group[b-a0f2toida4] {
    display: flex;
    gap: 8px;
    padding: 0.25rem 0;
}

.time-limits-type-btn[b-a0f2toida4] {
    border-radius: 20px;
    padding: 6px 18px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.time-limits-type-btn:hover[b-a0f2toida4] {
    border-color: #1565C0;
    color: #1565C0;
}

.time-limits-type-btn.active[b-a0f2toida4] {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

.time-limits-card[b-a0f2toida4]  .e-input-group {
    font-size: 1rem;
}

.time-limits-card[b-a0f2toida4]  .e-input-group input.e-input {
    padding: 10px 14px;
    font-size: 1rem;
    height: auto;
}

/* Quick Presets */

.time-limits-presets[b-a0f2toida4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.time-limits-preset-btn[b-a0f2toida4] {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-limits-preset-btn:hover[b-a0f2toida4] {
    border-color: #1565C0;
    color: #1565C0;
}

.time-limits-preset-btn.active[b-a0f2toida4] {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

/* ===== Toast Notification ===== */

.toast-success[b-a0f2toida4] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 9999;
    animation: toast-fade-in-b-a0f2toida4 0.3s ease;
}

@keyframes toast-fade-in-b-a0f2toida4 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Status Buttons ===== */

.status-btn-group[b-a0f2toida4] {
    display: flex;
    gap: 8px;
    padding: 0.25rem 0;
}

.status-btn[b-a0f2toida4] {
    border-radius: 20px;
    padding: 6px 18px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.status-btn:hover[b-a0f2toida4] {
    border-color: #1565C0;
    color: #1565C0;
}

.status-btn.active[b-a0f2toida4] {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

/* ===== Scoring Card ===== */

.scoring-card[b-a0f2toida4] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.scoring-title[b-a0f2toida4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.scoring-field[b-a0f2toida4] {
    margin-bottom: 1rem;
}

.scoring-label[b-a0f2toida4] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.scoring-toggle-row[b-a0f2toida4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

.scoring-total-row[b-a0f2toida4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.scoring-total-value[b-a0f2toida4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1565C0;
}

.scoring-card[b-a0f2toida4]  .e-input-group {
    font-size: 1rem;
}

.scoring-card[b-a0f2toida4]  .e-input-group input.e-input {
    padding: 10px 14px;
    font-size: 1rem;
    height: auto;
}

/* ===== Availability Card ===== */

.availability-card[b-a0f2toida4] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.availability-title[b-a0f2toida4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.availability-field[b-a0f2toida4] {
    margin-bottom: 1rem;
}

.availability-field:last-of-type[b-a0f2toida4] {
    margin-bottom: 0;
}

.availability-label[b-a0f2toida4] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.availability-datetime-input[b-a0f2toida4] {
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.availability-datetime-input:focus[b-a0f2toida4] {
    outline: none;
    border-color: #1565C0;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.15);
}

.availability-toggle-row[b-a0f2toida4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

/* ===== Add Subject Link ===== */

.add-subject-link[b-a0f2toida4] {
    display: inline-block;
    font-size: 0.85rem;
    color: #1565C0;
    cursor: pointer;
    margin-top: 0.4rem;
    text-decoration: none;
    font-weight: 500;
}

.add-subject-link:hover[b-a0f2toida4] {
    text-decoration: underline;
    color: #0D47A1;
}

/* ===== Create Subject Modal ===== */

.create-subject-form[b-a0f2toida4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-subject-error[b-a0f2toida4] {
    color: #d32f2f;
    font-size: 0.85rem;
    padding: 8px 12px;
    background: #fdecea;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
}

.create-subject-field[b-a0f2toida4] {
    display: flex;
    flex-direction: column;
}

.create-subject-label[b-a0f2toida4] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.create-subject-color-chips[b-a0f2toida4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.color-chip[b-a0f2toida4] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.color-chip:hover[b-a0f2toida4] {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.color-chip-selected[b-a0f2toida4] {
    border-color: #222;
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.color-chip-check[b-a0f2toida4] {
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.create-subject-actions[b-a0f2toida4] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.create-subject-cancel-btn[b-a0f2toida4] {
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.create-subject-cancel-btn:hover[b-a0f2toida4] {
    background: #f5f5f5;
    border-color: #999;
}

.create-subject-submit-btn[b-a0f2toida4] {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: #1565C0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.create-subject-submit-btn:hover[b-a0f2toida4] {
    background: #0D47A1;
}

.create-subject-submit-btn:disabled[b-a0f2toida4] {
    background: #bbb;
    cursor: not-allowed;
}

/* ===== Responsive ===== */

@media (max-width: 600px) {
    .edit-assignment-content[b-a0f2toida4] {
        padding: 12px;
    }

    .learning-options-card[b-a0f2toida4],
    .time-limits-card[b-a0f2toida4],
    .scoring-card[b-a0f2toida4],
    .availability-card[b-a0f2toida4] {
        padding: 1rem;
        border-radius: 8px;
    }

    .edit-assignment-nav-btn[b-a0f2toida4] {
        padding: 10px 14px;
    }

    .toast-success[b-a0f2toida4] {
        left: 20px;
        right: 20px;
    }
}
/* /Pages/EditQuestionAnswerPage.razor.rz.scp.css */
/* EditQuestionAnswerPage Styles */

.edit-question-form[b-pjrxpb9rie] {
    margin: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== Context Header ===== */

.edit-question-context-header[b-pjrxpb9rie] {
    background: linear-gradient(135deg, #1565C0, #0A2463);
    color: #fff;
    border-radius: 12px;
    padding: 24px;
}

.edit-question-context-assignment[b-pjrxpb9rie] {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

.edit-question-context-number[b-pjrxpb9rie] {
    font-size: 30px;
    font-weight: 600;
    margin-top: 4px;
}

/* ===== Card Sections ===== */

.edit-question-card[b-pjrxpb9rie] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.edit-question-card-title[b-pjrxpb9rie] {
    font-size: 21px;
    font-weight: 600;
    color: #222;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
}

/* ===== Form Fields ===== */

.edit-question-input-group[b-pjrxpb9rie] {
    margin-bottom: 12px;
}

/* Increase font size inside all Syncfusion inputs within the form */
.edit-question-card[b-pjrxpb9rie]  .e-input-group input.e-input,
.edit-question-card[b-pjrxpb9rie]  .e-input-group textarea.e-input,
.edit-question-card[b-pjrxpb9rie]  .e-input-group .e-input,
.edit-question-card[b-pjrxpb9rie]  .e-input,
.edit-question-card[b-pjrxpb9rie]  input.e-input,
.edit-question-card[b-pjrxpb9rie]  textarea.e-input {
    font-size: 18px !important;
    padding: 10px 12px !important;
}

/* Increase float label size */
.edit-question-card[b-pjrxpb9rie]  .e-float-text,
.edit-question-card[b-pjrxpb9rie]  label.e-float-text,
.edit-question-card[b-pjrxpb9rie]  .e-label-top,
.edit-question-card[b-pjrxpb9rie]  .e-label-bottom {
    font-size: 16px !important;
    font-weight: 500;
}

/* Increase dropdown font size */
.edit-question-card[b-pjrxpb9rie]  .e-ddl .e-input,
.edit-question-card[b-pjrxpb9rie]  .e-dropdownlist .e-input,
.edit-question-card[b-pjrxpb9rie]  .e-ddl input.e-input {
    font-size: 18px !important;
    padding: 10px 12px !important;
}

/* Ensure numeric inputs are also sized up */
.edit-question-card[b-pjrxpb9rie]  .e-numerictextbox input.e-input,
.edit-question-card[b-pjrxpb9rie]  .e-numeric input.e-input {
    font-size: 18px !important;
    padding: 10px 12px !important;
}

/* Textarea min-heights per field */
[data-testid="card-question-content"][b-pjrxpb9rie]  textarea.e-input {
    min-height: 80px;
}

[data-testid="card-answer"][b-pjrxpb9rie]  textarea.e-input {
    min-height: 60px;
}

[data-testid="card-explanation"][b-pjrxpb9rie]  textarea.e-input {
    min-height: 80px;
}

.edit-question-order-number[b-pjrxpb9rie] {
    max-width: 200px;
}

.edit-question-points[b-pjrxpb9rie] {
    max-width: 200px;
}

.edit-question-indent[b-pjrxpb9rie] {
    margin-left: 20px;
}

/* ===== MC/MultipleSelect Options ===== */

.edit-question-options-section[b-pjrxpb9rie] {
    margin-top: 12px;
}

.edit-question-options-header[b-pjrxpb9rie] {
    font-weight: 500;
    font-size: 17px;
    color: var(--trak-color-dark-blue, #0A2463);
    display: block;
    margin-bottom: 8px;
}

.edit-question-options-hint[b-pjrxpb9rie] {
    font-size: 15px;
    color: var(--trak-color-gray, #A9A9A9);
    font-style: italic;
    margin-bottom: 8px;
}

.edit-question-option-row[b-pjrxpb9rie] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--trak-color-white, white);
    border: 1px solid var(--trak-color-light-gray, #E2E3E9);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 6px;
    gap: 10px;
}

.edit-question-option-row[b-pjrxpb9rie]  .e-input-group {
    flex: 1;
}

.edit-question-option-text[b-pjrxpb9rie] {
    flex: 1;
}

.edit-question-option-delete[b-pjrxpb9rie] {
    background: none;
    border: none;
    color: #cc0000;
    font-size: 20px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}

.edit-question-option-delete:hover[b-pjrxpb9rie] {
    color: #ff0000;
}

.edit-question-special-option-row[b-pjrxpb9rie] {
    background-color: #f0f4ff;
    border-style: dashed;
}

.edit-question-special-option-text[b-pjrxpb9rie] {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding: 4px 8px;
}

.edit-question-add-option-row[b-pjrxpb9rie] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.edit-question-add-option-input[b-pjrxpb9rie] {
    flex: 1;
}

.edit-question-add-option-btn[b-pjrxpb9rie] {
    background-color: var(--trak-color-dark-blue, #0A2463);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 20px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-question-add-option-btn:hover[b-pjrxpb9rie] {
    opacity: 0.85;
}

/* ===== Toast Notification ===== */

.toast-success[b-pjrxpb9rie] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 9999;
    animation: toast-fade-in-b-pjrxpb9rie 0.3s ease;
}

@keyframes toast-fade-in-b-pjrxpb9rie {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Pages/EditSubjectPage.razor.rz.scp.css */
/* EditSubjectPage Styles */

.edit-subject-color-group[b-ya90h7r06r] {
    margin-top: 1rem;
}

.edit-subject-color-label[b-ya90h7r06r] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.edit-subject-color-chips[b-ya90h7r06r] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.color-chip[b-ya90h7r06r] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.color-chip:hover[b-ya90h7r06r] {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.color-chip-selected[b-ya90h7r06r] {
    border-color: #222;
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.color-chip-check[b-ya90h7r06r] {
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* /Pages/EditWordListPage.razor.rz.scp.css */
.editwordlist-content[b-gxytjpvo0f] {
    padding: 16px;
}

.editwordlist-loading[b-gxytjpvo0f] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.editwordlist-form[b-gxytjpvo0f] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
}

.editwordlist-input-group[b-gxytjpvo0f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editwordlist-label[b-gxytjpvo0f] {
    font-weight: 600;
    font-size: 14px;
}

.editwordlist-hint[b-gxytjpvo0f] {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.editwordlist-textarea[b-gxytjpvo0f]  textarea {
    min-height: 200px;
    font-family: monospace;
}

.editwordlist-error[b-gxytjpvo0f] {
    color: #d32f2f;
    background: #fce4ec;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.editwordlist-not-found[b-gxytjpvo0f] {
    text-align: center;
    padding: 40px;
    color: #666;
}
/* /Pages/GenerateMathQuestionsModal.razor.rz.scp.css */
/* ===== Modal Overlay ===== */
.math-gen-overlay[b-h9joz3i0i6] {
    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: 1000;
}

.math-gen-modal[b-h9joz3i0i6] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Header ===== */
.math-gen-header[b-h9joz3i0i6] {
    background-color: #1976d2;
    color: #fff;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
}

/* ===== Body ===== */
.math-gen-body[b-h9joz3i0i6] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.math-gen-error[b-h9joz3i0i6] {
    background-color: #ffebee;
    color: #c62828;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 14px;
}

/* ===== Sections ===== */
.math-gen-section[b-h9joz3i0i6] {
    margin-bottom: 16px;
}

.math-gen-section-title[b-h9joz3i0i6] {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    color: #333;
}

/* ===== Radio Group ===== */
.math-gen-radio-group[b-h9joz3i0i6] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.math-gen-layout-note[b-h9joz3i0i6] {
    font-size: 12px;
    color: #e65100;
    margin-top: 4px;
    font-style: italic;
}

/* ===== Fields Row ===== */
.math-gen-fields[b-h9joz3i0i6] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.math-gen-field[b-h9joz3i0i6] {
    flex: 1;
    min-width: 100px;
}

/* ===== Digit Level ===== */
.math-gen-digit-level-group[b-h9joz3i0i6] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.math-gen-field-label[b-h9joz3i0i6] {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    display: block;
}

.math-gen-digit-level-options[b-h9joz3i0i6] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.math-gen-radio-label[b-h9joz3i0i6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
}

.math-gen-radio-label input[type="radio"][b-h9joz3i0i6] {
    accent-color: #1976d2;
    margin: 0;
    cursor: pointer;
}

/* ===== Tables Number Chips ===== */
.math-gen-tables-section[b-h9joz3i0i6] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.math-gen-tables-grid[b-h9joz3i0i6] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.math-gen-table-chip[b-h9joz3i0i6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.math-gen-table-chip:hover[b-h9joz3i0i6] {
    border-color: #90CAF9;
    background: #f0f7ff;
}

.math-gen-table-chip.selected[b-h9joz3i0i6] {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

.math-gen-table-chip.selected:hover[b-h9joz3i0i6] {
    background: #1565c0;
    border-color: #1565c0;
}

/* ===== Preview ===== */
.math-gen-preview-section[b-h9joz3i0i6] {
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
}

.math-gen-preview-list[b-h9joz3i0i6] {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background-color: #fafafa;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.math-gen-preview-item[b-h9joz3i0i6] {
    padding: 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.math-gen-preview-number[b-h9joz3i0i6] {
    font-weight: 600;
    min-width: 28px;
    color: #555;
}

.math-gen-preview-text[b-h9joz3i0i6] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
}

/* ===== Footer ===== */
.math-gen-footer[b-h9joz3i0i6] {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background-color: #fafafa;
}

.math-gen-btn[b-h9joz3i0i6] {
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.math-gen-btn:disabled[b-h9joz3i0i6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.math-gen-btn-primary[b-h9joz3i0i6] {
    background-color: #1976d2;
    color: #fff;
}

.math-gen-btn-primary:hover:not(:disabled)[b-h9joz3i0i6] {
    background-color: #1565c0;
}

.math-gen-btn-secondary[b-h9joz3i0i6] {
    background-color: #e0e0e0;
    color: #333;
}

.math-gen-btn-secondary:hover:not(:disabled)[b-h9joz3i0i6] {
    background-color: #bdbdbd;
}

/* ===== Vertical Math Layout ===== */
[b-h9joz3i0i6] .math-vertical {
    display: inline-block;
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    line-height: 1.4;
}

[b-h9joz3i0i6] .math-vertical-row {
    white-space: nowrap;
}

[b-h9joz3i0i6] .math-vertical-operand {
    /* First operand row, right-aligned by container */
}

[b-h9joz3i0i6] .math-vertical-operator {
    /* Operator row with symbol + second operand */
}

[b-h9joz3i0i6] .math-vertical-line {
    border-bottom: 2px solid #333;
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 0;
    line-height: 0;
    height: 2px;
    overflow: hidden;
}

[b-h9joz3i0i6] .math-digit {
    display: inline-block;
    width: 0.6em;
    text-align: center;
}
/* /Pages/GoalEditPage.razor.rz.scp.css */
.goal-edit-content[b-knr3v00q0m] {
    padding: 16px;
}

.goal-edit-loading[b-knr3v00q0m] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.goal-edit-form[b-knr3v00q0m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.goal-edit-input-group[b-knr3v00q0m] {
    width: 100%;
}

.goal-edit-error[b-knr3v00q0m] {
    color: #d32f2f;
    font-size: 14px;
    padding: 8px;
    background: #fce4ec;
    border-radius: 4px;
}

.goal-edit-not-found[b-knr3v00q0m] {
    text-align: center;
    padding: 40px;
    color: var(--trak-text-secondary, #888);
}
/* /Pages/GoalsPage.razor.rz.scp.css */
.goals-page-content[b-cqge19s9lg] {
    padding: 16px;
}

.goals-loading[b-cqge19s9lg] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* Streak Card */
.goals-streak-card[b-cqge19s9lg] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    color: white;
    text-align: center;
}

.goals-streak-icon[b-cqge19s9lg] {
    font-size: 32px;
}

.goals-streak-title[b-cqge19s9lg] {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.goals-streak-details[b-cqge19s9lg] {
    display: flex;
    justify-content: space-around;
}

.goals-streak-row[b-cqge19s9lg] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goals-streak-label[b-cqge19s9lg] {
    font-size: 12px;
    opacity: 0.9;
}

.goals-streak-value[b-cqge19s9lg] {
    font-size: 16px;
    font-weight: bold;
}

/* Goals List */
.goals-list[b-cqge19s9lg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goals-card[b-cqge19s9lg] {
    background: var(--trak-card-bg, #fff);
    border: 1px solid var(--trak-border, #e0e0e0);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
}

.goals-card:hover[b-cqge19s9lg] {
    background: var(--trak-card-hover, #f5f5f5);
}

.goals-card-completed[b-cqge19s9lg] {
    border-color: #4caf50;
}

.goals-card-header[b-cqge19s9lg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.goals-card-name[b-cqge19s9lg] {
    font-weight: 600;
    font-size: 15px;
}

.goals-card-period[b-cqge19s9lg] {
    font-size: 12px;
    color: var(--trak-text-secondary, #888);
    background: var(--trak-badge-bg, #f0f0f0);
    padding: 2px 8px;
    border-radius: 10px;
}

.goals-card-completed-badge[b-cqge19s9lg] {
    color: #4caf50;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.goals-card-progress[b-cqge19s9lg] {
    margin-bottom: 6px;
}

.goals-card-value[b-cqge19s9lg] {
    font-size: 13px;
    color: var(--trak-text-secondary, #666);
}

/* Progress Bar */
.goals-progress-bar[b-cqge19s9lg] {
    height: 10px;
    background: var(--trak-progress-bg, #e0e0e0);
    border-radius: 5px;
    overflow: hidden;
}

.goals-progress-fill[b-cqge19s9lg] {
    height: 100%;
    background: #2196f3;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.goals-progress-complete[b-cqge19s9lg] {
    background: #4caf50;
}

/* Empty State */
.goals-empty[b-cqge19s9lg] {
    text-align: center;
    padding: 40px;
    color: var(--trak-text-secondary, #888);
}
/* /Pages/MathGeneratorPage.razor.rz.scp.css */
/* MathGeneratorPage Styles */

/* ===== Container ===== */

.mathgen-content[b-1xha9gxq1x] {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.mathgen-loading[b-1xha9gxq1x] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.mathgen-form[b-1xha9gxq1x] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mathgen-subtitle[b-1xha9gxq1x] {
    color: #777;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

.mathgen-not-found[b-1xha9gxq1x] {
    text-align: center;
    color: #777;
    padding: 2rem;
    font-size: 1rem;
}

.mathgen-error[b-1xha9gxq1x] {
    color: #d32f2f;
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
}

/* ===== Card ===== */

.mathgen-card[b-1xha9gxq1x] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mathgen-card-title[b-1xha9gxq1x] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

/* ===== Operation Rows ===== */

.mathgen-operation-row[b-1xha9gxq1x] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f2f2f2;
}

.mathgen-operation-row:last-child[b-1xha9gxq1x] {
    border-bottom: none;
    padding-bottom: 0;
}

.mathgen-operation-header[b-1xha9gxq1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mathgen-operation-symbol[b-1xha9gxq1x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E3F2FD;
    color: #1565C0;
    font-size: 1rem;
    font-weight: 700;
}

.mathgen-operation-name[b-1xha9gxq1x] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.mathgen-operation-fields[b-1xha9gxq1x] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mathgen-field-inline[b-1xha9gxq1x] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 80px;
    max-width: 120px;
}

.mathgen-field-label[b-1xha9gxq1x] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.mathgen-card[b-1xha9gxq1x]  .mathgen-num-input .e-input-group,
.mathgen-card[b-1xha9gxq1x]  .mathgen-num-input {
    font-size: 0.9rem;
}

.mathgen-card[b-1xha9gxq1x]  .mathgen-num-input input.e-input {
    padding: 6px 10px;
    font-size: 0.9rem;
    height: auto;
    text-align: center;
}

/* ===== Digit Level Radio Group ===== */

.mathgen-digit-level-group[b-1xha9gxq1x] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.mathgen-digit-level-options[b-1xha9gxq1x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.mathgen-radio-label[b-1xha9gxq1x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #444;
    cursor: pointer;
}

.mathgen-radio-label input[type="radio"][b-1xha9gxq1x] {
    accent-color: #1565C0;
    margin: 0;
    cursor: pointer;
}

/* ===== Tables Number Chips ===== */

.mathgen-tables-section[b-1xha9gxq1x] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.mathgen-tables-grid[b-1xha9gxq1x] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.mathgen-table-chip[b-1xha9gxq1x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.mathgen-table-chip:hover[b-1xha9gxq1x] {
    border-color: #90CAF9;
    background: #f0f7ff;
}

.mathgen-table-chip.selected[b-1xha9gxq1x] {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

.mathgen-table-chip.selected:hover[b-1xha9gxq1x] {
    background: #0D47A1;
    border-color: #0D47A1;
}

/* ===== Layout Buttons ===== */

.mathgen-layout-btn-group[b-1xha9gxq1x] {
    display: flex;
    gap: 8px;
    padding: 0.25rem 0;
}

.mathgen-layout-btn[b-1xha9gxq1x] {
    border-radius: 20px;
    padding: 6px 18px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mathgen-layout-btn:hover[b-1xha9gxq1x] {
    border-color: #1565C0;
    color: #1565C0;
}

.mathgen-layout-btn.active[b-1xha9gxq1x] {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}

.mathgen-layout-example[b-1xha9gxq1x] {
    font-size: 0.9rem;
    color: #666;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

.mathgen-layout-example-vertical[b-1xha9gxq1x] {
    margin: 0.75rem 0 0 0;
    padding: 0.5rem;
    background: #fafafa;
    border-radius: 6px;
    display: inline-block;
}

/* ===== Math Vertical Layout (shared with DoAssignment rendering) ===== */

.math-vertical[b-1xha9gxq1x] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    line-height: 1.6;
    display: inline-block;
}

.math-vertical-row[b-1xha9gxq1x] {
    text-align: right;
    white-space: nowrap;
}

.math-vertical-operand[b-1xha9gxq1x] {
    color: #333;
}

.math-vertical-operator[b-1xha9gxq1x] {
    color: #333;
}

.math-vertical-line[b-1xha9gxq1x] {
    color: #333;
    letter-spacing: 0;
}

.math-digit[b-1xha9gxq1x] {
    display: inline-block;
    width: 0.65em;
    text-align: center;
}

/* ===== Generate Button ===== */

.mathgen-generate-btn[b-1xha9gxq1x] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    border: none;
    background: #1565C0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mathgen-generate-btn:hover[b-1xha9gxq1x] {
    background: #0D47A1;
}

.mathgen-generate-btn:active[b-1xha9gxq1x] {
    background: #0A3D91;
}

.mathgen-generate-btn:disabled[b-1xha9gxq1x] {
    background: #bbb;
    cursor: not-allowed;
}

/* ===== Preview List ===== */

.mathgen-preview-list[b-1xha9gxq1x] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mathgen-preview-item[b-1xha9gxq1x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
}

.mathgen-preview-item:last-child[b-1xha9gxq1x] {
    border-bottom: none;
}

.mathgen-preview-number[b-1xha9gxq1x] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    min-width: 2rem;
    text-align: right;
}

.mathgen-preview-text[b-1xha9gxq1x] {
    flex: 1;
    font-size: 0.95rem;
    color: #333;
}

.mathgen-preview-answer[b-1xha9gxq1x] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2E7D32;
    background: #E8F5E9;
    padding: 2px 10px;
    border-radius: 12px;
}

/* ===== Action Buttons ===== */

.mathgen-action-group[b-1xha9gxq1x] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8e8e8;
}

.mathgen-action-btn[b-1xha9gxq1x] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mathgen-action-secondary[b-1xha9gxq1x] {
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
}

.mathgen-action-secondary:hover[b-1xha9gxq1x] {
    background: #f5f5f5;
    border-color: #999;
}

.mathgen-action-primary[b-1xha9gxq1x] {
    border: none;
    background: #2E7D32;
    color: #fff;
}

.mathgen-action-primary:hover[b-1xha9gxq1x] {
    background: #1B5E20;
}

.mathgen-action-btn:disabled[b-1xha9gxq1x] {
    background: #bbb;
    border-color: #bbb;
    color: #fff;
    cursor: not-allowed;
}

/* ===== Toast ===== */

.mathgen-toast[b-1xha9gxq1x] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 9999;
    animation: mathgen-toast-in-b-1xha9gxq1x 0.3s ease;
}

@keyframes mathgen-toast-in-b-1xha9gxq1x {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive ===== */

@media (max-width: 600px) {
    .mathgen-content[b-1xha9gxq1x] {
        padding: 12px;
    }

    .mathgen-card[b-1xha9gxq1x] {
        padding: 1rem;
        border-radius: 8px;
    }

    .mathgen-operation-fields[b-1xha9gxq1x] {
        gap: 0.5rem;
    }

    .mathgen-field-inline[b-1xha9gxq1x] {
        min-width: 70px;
    }

    .mathgen-action-group[b-1xha9gxq1x] {
        flex-direction: column;
    }

    .mathgen-action-btn[b-1xha9gxq1x] {
        width: 100%;
        justify-content: center;
    }

    .mathgen-toast[b-1xha9gxq1x] {
        left: 20px;
        right: 20px;
    }
}
/* /Pages/RemindersEditPage.razor.rz.scp.css */
/* RemindersEditPage Styles */

.reminder-edit-content[b-myzte24hrl] {
    padding: 1rem;
}

.reminder-edit-loading[b-myzte24hrl] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.reminder-edit-form[b-myzte24hrl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.reminder-edit-error[b-myzte24hrl] {
    color: red;
    font-size: 0.9rem;
}

.reminder-edit-input-group[b-myzte24hrl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reminder-edit-not-found[b-myzte24hrl] {
    padding: 1rem;
}
/* /Pages/RemindersPage.razor.rz.scp.css */
/* RemindersPage Styles */

.reminders-summary-cell[b-1t7snxe8k1] {
    max-width: 200px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.reminders-reminder-cell[b-1t7snxe8k1] {
    max-height: 75px;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.reminders-chip-complete[b-1t7snxe8k1],
.reminders-chip-incomplete[b-1t7snxe8k1] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.reminders-chip-complete[b-1t7snxe8k1] {
    background-color: #4caf50;
    color: #fff;
}

.reminders-chip-incomplete[b-1t7snxe8k1] {
    background-color: #e0e0e0;
    color: #424242;
}

.reminders-chip-complete:hover[b-1t7snxe8k1],
.reminders-chip-incomplete:hover[b-1t7snxe8k1] {
    opacity: 0.85;
}
/* /Pages/SectionEditPage.razor.rz.scp.css */
/* SectionEditPage Styles */

.section-edit-content[b-o6h0ukpwul] {
    padding: 1rem;
}

.section-edit-loading[b-o6h0ukpwul] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.section-edit-form[b-o6h0ukpwul] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
}

.section-edit-error[b-o6h0ukpwul] {
    color: red;
    font-size: 0.9rem;
}

.section-edit-input-group[b-o6h0ukpwul] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-edit-list-group[b-o6h0ukpwul] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-edit-list-header[b-o6h0ukpwul] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e0e0e0;
}

.section-edit-list-row[b-o6h0ukpwul] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
}

.section-edit-list-row:hover[b-o6h0ukpwul] {
    background: #f5f5f5;
}

.section-edit-list-number[b-o6h0ukpwul] {
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
}

.section-edit-list-name[b-o6h0ukpwul] {
    flex: 1;
}

.section-edit-list-arrow[b-o6h0ukpwul] {
    color: #999;
}

.section-edit-empty[b-o6h0ukpwul] {
    color: #999;
    font-style: italic;
    padding: 0.5rem 0;
}

.section-edit-not-found[b-o6h0ukpwul] {
    padding: 1rem;
}
/* /Pages/SpellingGeneratorPage.razor.rz.scp.css */
/* SpellingGeneratorPage Styles */

/* ===== Container ===== */

.spellgen-content[b-0drnzmllmp] {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.spellgen-loading[b-0drnzmllmp] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.spellgen-form[b-0drnzmllmp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.spellgen-subtitle[b-0drnzmllmp] {
    color: #777;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

.spellgen-not-found[b-0drnzmllmp] {
    text-align: center;
    color: #777;
    padding: 2rem;
    font-size: 1rem;
}

.spellgen-error[b-0drnzmllmp] {
    color: #d32f2f;
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
}

.spellgen-hint[b-0drnzmllmp] {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 0.5rem 0;
}

/* ===== Card ===== */

.spellgen-card[b-0drnzmllmp] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.spellgen-card-title[b-0drnzmllmp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

/* ===== Word List Source ===== */

.spellgen-radio-group[b-0drnzmllmp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}

.spellgen-radio-label[b-0drnzmllmp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

.spellgen-saved-list-row[b-0drnzmllmp] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.spellgen-saved-list-row[b-0drnzmllmp]  .e-ddl {
    flex: 1;
}

.spellgen-edit-lists-btn[b-0drnzmllmp] {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.spellgen-edit-lists-btn:hover[b-0drnzmllmp] {
    background: #f5f5f5;
    border-color: #999;
}

/* ===== Textarea ===== */

[b-0drnzmllmp] .spellgen-textarea .e-input,
[b-0drnzmllmp] .spellgen-textarea textarea.e-input {
    min-height: 160px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== Generate Button ===== */

.spellgen-generate-btn[b-0drnzmllmp] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    border: none;
    background: #1565C0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.spellgen-generate-btn:hover[b-0drnzmllmp] {
    background: #0D47A1;
}

.spellgen-generate-btn:active[b-0drnzmllmp] {
    background: #0A3D91;
}

.spellgen-generate-btn:disabled[b-0drnzmllmp] {
    background: #bbb;
    cursor: not-allowed;
}

/* ===== Preview List ===== */

.spellgen-preview-list[b-0drnzmllmp] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.spellgen-preview-item[b-0drnzmllmp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
}

.spellgen-preview-item:last-child[b-0drnzmllmp] {
    border-bottom: none;
}

.spellgen-preview-number[b-0drnzmllmp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    min-width: 2rem;
    text-align: right;
}

.spellgen-preview-text[b-0drnzmllmp] {
    flex: 1;
    font-size: 0.95rem;
    color: #333;
}

.spellgen-preview-answer[b-0drnzmllmp] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2E7D32;
    background: #E8F5E9;
    padding: 2px 10px;
    border-radius: 12px;
}

/* ===== Action Buttons ===== */

.spellgen-action-group[b-0drnzmllmp] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8e8e8;
}

.spellgen-action-btn[b-0drnzmllmp] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spellgen-action-secondary[b-0drnzmllmp] {
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
}

.spellgen-action-secondary:hover[b-0drnzmllmp] {
    background: #f5f5f5;
    border-color: #999;
}

.spellgen-action-primary[b-0drnzmllmp] {
    border: none;
    background: #2E7D32;
    color: #fff;
}

.spellgen-action-primary:hover[b-0drnzmllmp] {
    background: #1B5E20;
}

.spellgen-action-btn:disabled[b-0drnzmllmp] {
    background: #bbb;
    border-color: #bbb;
    color: #fff;
    cursor: not-allowed;
}

/* ===== Toast ===== */

.spellgen-toast[b-0drnzmllmp] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 9999;
    animation: spellgen-toast-in-b-0drnzmllmp 0.3s ease;
}

@keyframes spellgen-toast-in-b-0drnzmllmp {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive ===== */

@media (max-width: 600px) {
    .spellgen-content[b-0drnzmllmp] {
        padding: 12px;
    }

    .spellgen-card[b-0drnzmllmp] {
        padding: 1rem;
        border-radius: 8px;
    }

    .spellgen-action-group[b-0drnzmllmp] {
        flex-direction: column;
    }

    .spellgen-action-btn[b-0drnzmllmp] {
        width: 100%;
        justify-content: center;
    }

    .spellgen-toast[b-0drnzmllmp] {
        left: 20px;
        right: 20px;
    }
}
/* /Pages/SpellingMemoryGamePage.razor.rz.scp.css */
/* SpellingMemoryGamePage Styles */

/* ===== Container ===== */

.memory-game-content[b-i87slivwq1] {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}

.memory-game-loading[b-i87slivwq1] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.memory-game-error[b-i87slivwq1] {
    color: #d32f2f;
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    text-align: center;
}

.memory-game-empty[b-i87slivwq1] {
    text-align: center;
    color: #777;
    padding: 2rem;
    font-size: 1rem;
}

/* ===== Game Grid ===== */

.memory-game-grid[b-i87slivwq1] {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    justify-items: center;
}

/* ===== Tile ===== */

.memory-tile[b-i87slivwq1] {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    perspective: 600px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.memory-tile-inner[b-i87slivwq1] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

/* Face-down: show back */
.memory-tile-down .memory-tile-inner[b-i87slivwq1] {
    transform: rotateY(180deg);
}

/* Face-up: show front */
.memory-tile-up .memory-tile-inner[b-i87slivwq1] {
    transform: rotateY(0deg);
}

/* Matched: show front with green highlight */
.memory-tile-matched .memory-tile-inner[b-i87slivwq1] {
    transform: rotateY(0deg);
}

.memory-tile-front[b-i87slivwq1],
.memory-tile-back[b-i87slivwq1] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Front face (word) */
.memory-tile-front[b-i87slivwq1] {
    background: #fff;
    color: #222;
    border: 2px solid #1565C0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Back face (hidden) */
.memory-tile-back[b-i87slivwq1] {
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: #fff;
    font-size: 1.8rem;
    transform: rotateY(180deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Matched tile visual */
.memory-tile-matched .memory-tile-front[b-i87slivwq1] {
    background: #E8F5E9;
    border-color: #2E7D32;
    color: #2E7D32;
}

.memory-tile-matched[b-i87slivwq1] {
    cursor: default;
    pointer-events: none;
}

/* Disable pointer during processing */
.memory-tile-up[b-i87slivwq1] {
    pointer-events: none;
}

.memory-tile-down:active .memory-tile-inner[b-i87slivwq1] {
    transform: rotateY(180deg) scale(0.97);
}

/* ===== Completion View ===== */

.memory-game-complete[b-i87slivwq1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1rem;
    text-align: center;
}

.memory-game-congrats[b-i87slivwq1] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2E7D32;
    line-height: 1.4;
}

.memory-game-continue-btn[b-i87slivwq1] {
    padding: 14px 32px;
    border-radius: 10px;
    border: none;
    background: #1565C0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.memory-game-continue-btn:hover[b-i87slivwq1] {
    background: #0D47A1;
}

.memory-game-continue-btn:active[b-i87slivwq1] {
    background: #0A3D91;
}

/* ===== Responsive ===== */

@media (max-width: 600px) {
    .memory-game-grid[b-i87slivwq1] {
        gap: 8px;
    }

    .memory-tile[b-i87slivwq1] {
        max-width: 140px;
    }

    .memory-tile-front[b-i87slivwq1] {
        font-size: 0.85rem;
    }

    .memory-tile-back[b-i87slivwq1] {
        font-size: 1.4rem;
    }

    .memory-game-congrats[b-i87slivwq1] {
        font-size: 1.2rem;
    }
}
/* /Pages/SpellingSentencePracticePage.razor.rz.scp.css */
/* SpellingSentencePracticePage Styles */

/* ===== Container ===== */

.sentence-practice-content[b-3tkrh489t5] {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

.sentence-practice-loading[b-3tkrh489t5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.sentence-practice-error[b-3tkrh489t5] {
    color: #d32f2f;
    font-size: 0.9rem;
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    text-align: center;
}

.sentence-practice-empty[b-3tkrh489t5] {
    text-align: center;
    color: #777;
    padding: 2rem;
    font-size: 1rem;
}

/* ===== Question View ===== */

.sentence-practice-question[b-3tkrh489t5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sentence-practice-progress[b-3tkrh489t5] {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.sentence-practice-sentence[b-3tkrh489t5] {
    background: #f5f7fa;
    border: 2px solid #1565C0;
    border-radius: 12px;
    padding: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    color: #222;
}

/* ===== Answer Choices ===== */

.sentence-practice-choices[b-3tkrh489t5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sentence-practice-choice[b-3tkrh489t5] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.sentence-practice-choice:hover:not(:disabled)[b-3tkrh489t5] {
    border-color: #1565C0;
    background: #f0f7ff;
}

.sentence-practice-choice:active:not(:disabled)[b-3tkrh489t5] {
    transform: scale(0.98);
}

.sentence-practice-choice:disabled[b-3tkrh489t5] {
    cursor: default;
}

.sentence-practice-choice-letter[b-3tkrh489t5] {
    font-weight: 700;
    color: #1565C0;
    min-width: 24px;
}

.sentence-practice-choice-text[b-3tkrh489t5] {
    font-weight: 500;
    color: #333;
}

/* Correct answer highlight */
.sentence-practice-choice-correct[b-3tkrh489t5] {
    border-color: #2E7D32;
    background: #E8F5E9;
}

.sentence-practice-choice-correct .sentence-practice-choice-letter[b-3tkrh489t5] {
    color: #2E7D32;
}

.sentence-practice-choice-correct .sentence-practice-choice-text[b-3tkrh489t5] {
    color: #2E7D32;
}

/* Incorrect answer highlight */
.sentence-practice-choice-incorrect[b-3tkrh489t5] {
    border-color: #d32f2f;
    background: #fdecea;
}

.sentence-practice-choice-incorrect .sentence-practice-choice-letter[b-3tkrh489t5] {
    color: #d32f2f;
}

.sentence-practice-choice-incorrect .sentence-practice-choice-text[b-3tkrh489t5] {
    color: #d32f2f;
}

/* ===== Feedback ===== */

.sentence-practice-feedback[b-3tkrh489t5] {
    text-align: center;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.sentence-practice-feedback-correct[b-3tkrh489t5] {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

.sentence-practice-feedback-incorrect[b-3tkrh489t5] {
    background: #fdecea;
    color: #d32f2f;
    border: 1px solid #f5c6cb;
}

/* ===== Completion View ===== */

.sentence-practice-complete[b-3tkrh489t5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1rem;
    text-align: center;
}

.sentence-practice-congrats[b-3tkrh489t5] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2E7D32;
    line-height: 1.4;
}

.sentence-practice-continue-btn[b-3tkrh489t5] {
    padding: 14px 32px;
    border-radius: 10px;
    border: none;
    background: #1565C0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sentence-practice-continue-btn:hover[b-3tkrh489t5] {
    background: #0D47A1;
}

.sentence-practice-continue-btn:active[b-3tkrh489t5] {
    background: #0A3D91;
}

/* ===== Responsive ===== */

@media (max-width: 600px) {
    .sentence-practice-content[b-3tkrh489t5] {
        padding: 12px;
    }

    .sentence-practice-sentence[b-3tkrh489t5] {
        font-size: 1.05rem;
        padding: 1rem;
    }

    .sentence-practice-choice[b-3tkrh489t5] {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .sentence-practice-congrats[b-3tkrh489t5] {
        font-size: 1.2rem;
    }
}
/* /Pages/SubjectSettingsPage.razor.rz.scp.css */
/* SubjectSettingsPage Styles */
/* Most styling is handled by TrakListLayout */

.subject-color-dot[b-jp04gpcg24] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
/* /Pages/SubjectsPage.razor.rz.scp.css */
/* SubjectsPage Styles */
/* Most styling is now handled by TrakListLayout */

/* Page-specific overrides can be added here if needed */
/* /Pages/WordListsPage.razor.rz.scp.css */
/* WordListsPage styles - minimal, inherits from TrakListLayout */