/* ================================================================
   theme-override.css — Board Book · New Education Theme
   Vibrant dark navy with colorful accents
   Loaded LAST to override all component styles safely
   ================================================================ */

/* ── GLOBAL RADIUS OVERRIDE ── */
/* Reduce all rounded corners to sharp, professional look */

.lp-entry-card,
.lp-feat-card,
.lp-btn-primary,
.lp-btn-ghost,
.lp-btn-lg,
.auth-modal,
.auth-tabs,
.auth-tab,
.auth-input,
.auth-submit,
.auth-close,
.role-card,
.dialog-modal,
.dialog-btn,
.dialog-input,
.toast,
.notification-panel-premium,
.notif-item,
.premium-modal-box,
.custom-modal,
.modal-btn,
.nav-item,
.nav-book-item,
.student-card,
.dash-btn,
.dash-select,
.confirm-step,
.bulk-btn,
.nav-bulk-bar,
.ctx-menu-item,
#nav-context-menu,
.student-panel-content,
.close-panel,
.lobby-students-grid,
.lobby-qr-enlarge-box,
.lobby-floating-qr .floating-qr-btn,
.lobby-floating-qr .floating-qr-panel,
.input-modern,
.btn-create-modern,
.orientation-card,
.email-confirm-tip,
.email-confirm-role-badge {
    border-radius: 8px !important;
}

.ui-control-btn {
    border-radius: 10px !important;
}

#btn-student-dashboard {
    border-radius: 10px !important;
}

.side-panel {
    border-radius: 0 10px 10px 0 !important;
}

.nav-panel {
    border-radius: 10px 0 0 10px !important;
}

.side-tab {
    border-radius: 0 6px 6px 0 !important;
}

.nav-tab {
    border-radius: 6px 0 0 6px !important;
}

.tool-btn {
    border-radius: 6px !important;
}

.nav-btn {
    border-radius: 6px !important;
}

.slide-mini-thumb {
    border-radius: 4px !important;
}

.avatar-circle {
    border-radius: 8px !important;
}

.teacher-profile-mini .avatar-circle {
    border-radius: 8px !important;
}

.teacher-profile-mini {
    border-radius: 10px !important;
}

.active-color-btn {
    border-radius: 6px !important;
}

.size-btn {
    border-radius: 4px !important;
}

.color-grid-popup {
    border-radius: 10px !important;
}

.modal-icon {
    border-radius: 12px !important;
}

.lp-entry-icon {
    border-radius: 8px !important;
}

.lp-feat-icon {
    border-radius: 8px !important;
}

.icon-btn.small {
    border-radius: 6px !important;
}

.nav-close-btn {
    border-radius: 6px !important;
}

.bookshelf-toggle {
    border-radius: 6px !important;
}

.checkmark {
    border-radius: 4px !important;
}

/* ================================================================
   COLOR OVERRIDES — Landing Page
   ================================================================ */

/* Header */
.landing-header {
    background: rgba(44, 62, 80, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.logo-domain {
    color: #00CEC9 !important;
}

/* Primary buttons */
.lp-btn-primary {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 100%) !important;
    color: #2C3E50 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 24px -6px rgba(249, 202, 36, 0.45) !important;
}

.lp-btn-primary:hover {
    box-shadow: 0 16px 32px -6px rgba(249, 202, 36, 0.55) !important;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%) !important;
}

/* Ghost buttons */
.lp-btn-ghost {
    border-color: rgba(249, 202, 36, 0.3) !important;
    color: var(--accent-dynamic) !important;
}

.lp-btn-ghost:hover {
    background: rgba(249, 202, 36, 0.1) !important;
    border-color: var(--accent-dynamic) !important;
    color: var(--accent-dynamic) !important;
}

/* Hero */
.lp-gradient-text {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #00CEC9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.lp-eyebrow {
    color: #00CEC9 !important;
}

.lp-eyebrow-dot {
    background: #00CEC9 !important;
}

@keyframes eyebrowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 206, 201, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(0, 206, 201, 0); }
}

/* Hero Glows */
.lp-hero-glow.g1 {
    background: radial-gradient(circle, var(--accent-dynamic) 0%, transparent 70%) !important;
    opacity: 0.15 !important;
}

.lp-hero-glow.g2 {
    background: radial-gradient(circle, #00CEC9 0%, transparent 70%) !important;
    opacity: 0.15 !important;
}

/* Entry Cards */
.lp-entry-card.teacher-card:hover {
    border-color: var(--accent-dynamic) !important;
}

.lp-entry-card.student-card:hover {
    border-color: #00CEC9 !important;
}

.lp-entry-card.teacher-card::before {
    background: linear-gradient(135deg, rgba(249, 202, 36, 0.08), transparent) !important;
}

.lp-entry-card.student-card::before {
    background: linear-gradient(135deg, rgba(0, 206, 201, 0.08), transparent) !important;
}

.lp-entry-icon.teacher {
    background: rgba(249, 202, 36, 0.12) !important;
    color: var(--accent-dynamic) !important;
}

.lp-entry-icon.student {
    background: rgba(0, 206, 201, 0.12) !important;
    color: #00CEC9 !important;
}

.lp-entry-card:hover .lp-entry-arrow {
    color: var(--accent-dynamic) !important;
}

/* Trust badges */
.lp-hero-meta .fa-check-circle {
    color: #00CEC9 !important;
}

/* Features section */
.lp-section-label {
    color: var(--accent-dynamic) !important;
}

.lp-feat-card:hover {
    border-color: rgba(249, 202, 36, 0.25) !important;
}

/* About badges */
.lp-badge.purple {
    background: rgba(232, 67, 147, 0.1) !important;
    color: #E84393 !important;
    border-color: rgba(232, 67, 147, 0.2) !important;
}

.lp-badge.green {
    background: rgba(0, 206, 201, 0.1) !important;
    color: #00CEC9 !important;
    border-color: rgba(0, 206, 201, 0.2) !important;
}

.lp-badge.blue {
    background: rgba(116, 185, 255, 0.1) !important;
    color: #74B9FF !important;
    border-color: rgba(116, 185, 255, 0.2) !important;
}

.lp-fact i {
    background: rgba(249, 202, 36, 0.08) !important;
    color: var(--accent-dynamic) !important;
}

/* CTA bar */
.lp-cta-bar {
    background: linear-gradient(135deg, rgba(249, 202, 36, 0.06) 0%, rgba(0, 206, 201, 0.04) 100%) !important;
    border-top-color: rgba(249, 202, 36, 0.12) !important;
    border-bottom-color: rgba(249, 202, 36, 0.12) !important;
}

/* Footer */
.lp-footer-domain a {
    color: #00CEC9 !important;
}

.lp-footer-copy a {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   COLOR OVERRIDES — Auth System
   ================================================================ */

.auth-tab.active {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 6px 16px -4px rgba(249, 202, 36, 0.35) !important;
}

.auth-submit {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    box-shadow: 0 8px 24px -8px rgba(249, 202, 36, 0.45) !important;
    font-weight: 800 !important;
}

.auth-submit:hover {
    background: linear-gradient(135deg, #F39C12, #E67E22) !important;
    box-shadow: 0 12px 32px -8px rgba(249, 202, 36, 0.55) !important;
}

.auth-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 4px rgba(249, 202, 36, 0.15) !important;
}

.role-card.active {
    background: rgba(249, 202, 36, 0.08) !important;
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 6px 18px -4px rgba(249, 202, 36, 0.22) !important;
}

.role-card.active i {
    color: var(--accent-dynamic) !important;
}

.role-card.active .check-badge {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

/* ================================================================
   COLOR OVERRIDES — Navigation & Toolbars
   ================================================================ */

/* Side tab active colors — vibrant education palette */
#tab-draw.active {
    color: #74B9FF !important;
    border-right-color: #74B9FF !important;
}

#tab-insert.active {
    color: #00CEC9 !important;
    border-right-color: #00CEC9 !important;
}

#tab-background.active {
    color: #BADC58 !important;
    border-right-color: #BADC58 !important;
}

#tab-math.active {
    color: var(--accent-dynamic) !important;
    border-right-color: var(--accent-dynamic) !important;
}

#tab-classroom.active {
    color: #E84393 !important;
    border-right-color: #E84393 !important;
}

#tab-animation.active {
    color: #F39C12 !important;
    border-right-color: #F39C12 !important;
}

/* Nav tab active colors */
#tab-nav-library.active {
    color: #74B9FF !important;
    border-left-color: #74B9FF !important;
}

#tab-nav-view.active {
    color: #E84393 !important;
    border-left-color: #E84393 !important;
}

#tab-nav-slides.active {
    color: var(--accent-dynamic) !important;
    border-left-color: var(--accent-dynamic) !important;
}

/* Tool buttons active */
.tool-btn.active {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 15px rgba(249, 202, 36, 0.4) !important;
}

/* Nav buttons active */
.nav-btn.active {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

/* Active slide thumbnail */
.slide-mini-thumb.active {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 36, 0.3), var(--shadow-main) !important;
}

/* OneNote nav — book item active */
.nav-book-item.active {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    box-shadow: 0 8px 20px rgba(249, 202, 36, 0.3) !important;
}

.nav-book-item:hover {
    border-color: var(--accent-dynamic) !important;
}

/* Nav item active */
.nav-item.active {
    color: var(--accent-dynamic) !important;
}

.nav-item.active::before {
    background: var(--accent-dynamic) !important;
    box-shadow: 0 0 12px var(--accent-dynamic) !important;
}

/* Profile avatar gradient */
.teacher-profile-mini .avatar-circle {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
}

/* Bookshelf toggle hover */
.bookshelf-toggle:hover {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

/* Icon btn hover */
.icon-btn.small:hover {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

/* Context menu hover */
.ctx-menu-item:hover {
    color: var(--accent-dynamic) !important;
}

/* Bulk actions primary */
.bulk-btn.primary {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

.bulk-info::before {
    color: var(--accent-dynamic) !important;
}

/* Checkbox overrides */
.item-selection input[type="checkbox"] {
    border-color: var(--accent-dynamic) !important;
}

.item-selection input[type="checkbox"]:checked {
    background: var(--accent-dynamic) !important;
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 10px rgba(249, 202, 36, 0.4) !important;
}

/* Col subtitle */
.col-subtitle {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   COLOR OVERRIDES — UI Controls & Buttons
   ================================================================ */

.ui-control-btn:hover {
    color: var(--accent-dynamic) !important;
}

/* Student count badge */
.lobby-student-tag .lobby-avatar {
    background: rgba(249, 202, 36, 0.25) !important;
}

/* QR code accent */
.lobby-qr-enlarge-box .qr-enlarge-code {
    color: var(--accent-dynamic) !important;
}

.lobby-floating-qr .floating-qr-code-val {
    color: var(--accent-dynamic) !important;
}

.lobby-floating-qr .floating-qr-btn:hover {
    background: rgba(249, 202, 36, 0.9) !important;
    box-shadow: 0 8px 30px rgba(249, 202, 36, 0.4) !important;
}

/* ================================================================
   COLOR OVERRIDES — Modals & Dialogs
   ================================================================ */

.btn-create-modern:not(#activity-mode-picker-ov .btn-create-modern):not(#quest-lobby .btn-create-modern):not(#auraTeacherGame .btn-create-modern):not(#auraResults .btn-create-modern):not(#amp-share-modal .btn-create-modern):not(#amp-board-overlay .btn-create-modern) {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 100%) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
    font-weight: 800 !important;
}

.btn-create-modern:not(#activity-mode-picker-ov .btn-create-modern):not(#quest-lobby .btn-create-modern):not(#auraTeacherGame .btn-create-modern):not(#auraResults .btn-create-modern):not(#amp-share-modal .btn-create-modern):not(#amp-board-overlay .btn-create-modern):hover {
    box-shadow: 0 8px 20px rgba(249, 202, 36, 0.4) !important;
}

/* Keep the secondary "Edit Lesson" button subtle */
#btn-edit-lesson-only.btn-create-modern {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    box-shadow: none !important;
}

#btn-edit-lesson-only.btn-create-modern:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Start Live button green override */
#btn-start-live-lesson.btn-create-modern {
    background: linear-gradient(135deg, #00CEC9 0%, #00B894 100%) !important;
    color: #fff !important;
}

.modal-title-text {
    background: linear-gradient(to right, #fff, var(--accent-dynamic)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Light theme: gradient text is white → make it dark */
[data-theme="light"] .modal-title-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    color: var(--text-main) !important;
}

.input-modern:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 4px rgba(249, 202, 36, 0.15) !important;
}

.orientation-card.active,
.orientation-card:has(input:checked) {
    background: rgba(249, 202, 36, 0.08) !important;
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 10px 20px -5px rgba(249, 202, 36, 0.2) !important;
}

.orientation-card input[type="radio"]:checked {
    border-color: var(--accent-dynamic) !important;
    background: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 4px rgba(249, 202, 36, 0.15) !important;
}

/* Dialog confirm button */
.dialog-btn.confirm {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

.dialog-btn.confirm:hover {
    box-shadow: 0 10px 20px -5px rgba(249, 202, 36, 0.4) !important;
}

/* Toast icons */
.toast.success .toast-icon {
    color: #00CEC9 !important;
}

.toast.info .toast-icon {
    color: #74B9FF !important;
}

.toast.warning .toast-icon {
    color: var(--accent-dynamic) !important;
}

/* Sync toast */
.toast.sync-toast.success {
    border-color: #00CEC9 !important;
    background: #00CEC9 !important;
    box-shadow: 0 0 15px rgba(0, 206, 201, 0.4) !important;
}

/* Notification unread */
.notif-item.unread {
    border-left-color: var(--accent-dynamic) !important;
}

.notif-item:hover {
    border-color: var(--accent-dynamic) !important;
}

.notif-time {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   COLOR OVERRIDES — Dashboard
   ================================================================ */

.dash-btn.freeze {
    background: #74B9FF !important;
}

.dash-btn.warning {
    background: #F39C12 !important;
}

.dash-btn.danger {
    background: #E74C3C !important;
    color: #ffffff !important;          /* Ensure text is always white and visible */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.student-card:hover {
    border-color: var(--accent-dynamic) !important;
}

.student-avatar-small {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
}

.frozen-overlay i {
    color: #74B9FF !important;
}

/* Feedback bar */
.feedback-bar {
    background: #2C3E50 !important;
    border: 1px solid rgba(249, 202, 36, 0.3) !important;
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.4) !important;
}

.feedback-bar i {
    color: var(--accent-dynamic) !important;
}

.feedback-bar .btn-exit-feedback:hover {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

/* ================================================================
   COLOR OVERRIDES — Presence Notch
   ================================================================ */

#btn-live-session {
    background: #00CEC9 !important;
}

/* ================================================================
   EMAIL CONFIRMATION — Color overrides
   ================================================================ */

.envelope-body {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    box-shadow: 0 12px 32px -8px rgba(249, 202, 36, 0.55) !important;
}

.envelope-flap {
    border-top-color: rgba(243, 156, 18, 0.9) !important;
}

.email-confirm-role-badge {
    background: rgba(249, 202, 36, 0.12) !important;
    border-color: rgba(249, 202, 36, 0.25) !important;
    color: var(--accent-dynamic) !important;
}

.email-confirm-role-badge.student-role {
    background: rgba(0, 206, 201, 0.1) !important;
    border-color: rgba(0, 206, 201, 0.25) !important;
    color: #00CEC9 !important;
}

.email-confirm-address {
    color: var(--accent-dynamic) !important;
    background: rgba(249, 202, 36, 0.08) !important;
}

.confirm-step-num {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 10px rgba(249, 202, 36, 0.3) !important;
}

/* ================================================================
   SCROLLBAR OVERRIDES
   ================================================================ */

::-webkit-scrollbar-thumb {
    background: rgba(249, 202, 36, 0.2) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 202, 36, 0.4) !important;
}

/* ================================================================
   GENERAL AVATAR OVERRIDE
   ================================================================ */

.avatar-circle {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
}

/* ================================================================
   LANDING PAGE — SVG Logo Override
   ================================================================ */

.header-logo svg path:first-child {
    fill: var(--accent-dynamic) !important;
}

.header-logo svg path:last-child {
    fill: #00CEC9 !important;
}

/* ================================================================
   PRESENCE NOTCH / CLOCK
   ================================================================ */

.presence-notch {
    border-color: var(--accent-dynamic) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    background: var(--bg-surface-solid) !important;
}

.presence-notch:hover {
    border-color: var(--accent-dynamic) !important;
}

#digital-clock {
    color: var(--accent-dynamic);
    text-shadow: 0 0 12px rgba(249, 202, 36, 0.4);
}

#digital-date {
    color: #95A5A6;
}

.presence-notch .pulse-dot {
    background: #00CEC9 !important;
    box-shadow: 0 0 10px #00CEC9 !important;
}

@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 206, 201, 0.7); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(0, 206, 201, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 206, 201, 0); }
}

.presence-nav-arrows button:hover {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   LOADER / SPINNER
   ================================================================ */

#app-loader .spinner {
    border-color: rgba(249, 202, 36, 0.15) !important;
    border-top-color: var(--accent-dynamic) !important;
}

#app-loader h2 {
    background: linear-gradient(135deg, #ECF0F1 0%, var(--accent-dynamic) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Generic spinner / fa-spin color override */
.fa-spin {
    color: var(--accent-dynamic);
}

/* ================================================================
   WORKSHEET MODAL — Full Theme
   ================================================================ */

/* Modal box */
.ws-modal-box {
    background: #2C3E50 !important;
    border-radius: 12px !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(249, 202, 36, 0.1) !important;
}

/* Header gradient */
.ws-header {
    background: linear-gradient(180deg, rgba(249, 202, 36, 0.06), transparent) !important;
}

.ws-header-left h2 i {
    color: var(--accent-dynamic) !important;
}

.ws-close-btn {
    border-radius: 8px !important;
}

.ws-close-btn:hover {
    background: rgba(231, 76, 60, 0.2) !important;
    color: #E74C3C !important;
    border-color: rgba(231, 76, 60, 0.3) !important;
}

/* Tabs */
.ws-tab.active {
    color: var(--accent-dynamic) !important;
    border-bottom-color: var(--accent-dynamic) !important;
}

/* Scrollbar */
.ws-content::-webkit-scrollbar-thumb {
    background: rgba(249, 202, 36, 0.3) !important;
}

/* Input focus */
.ws-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 36, 0.15) !important;
}

/* Type chips */
.ws-type-chip:hover {
    background: rgba(249, 202, 36, 0.1) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
    color: var(--accent-dynamic) !important;
}

.ws-type-chip.selected {
    background: rgba(249, 202, 36, 0.15) !important;
    border-color: var(--accent-dynamic) !important;
    color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 1px rgba(249, 202, 36, 0.3) !important;
}

.ws-type-chip i {
    color: var(--accent-dynamic) !important;
}

/* Generate button */
.ws-generate-btn {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(249, 202, 36, 0.3) !important;
}

.ws-generate-btn:hover {
    box-shadow: 0 12px 30px rgba(249, 202, 36, 0.4) !important;
}

/* Question cards */
.ws-question-card {
    border-radius: 10px !important;
}

.ws-question-card:hover {
    border-color: rgba(249, 202, 36, 0.2) !important;
}

.ws-q-number {
    color: var(--accent-dynamic) !important;
}

.ws-q-type-badge {
    background: rgba(249, 202, 36, 0.1) !important;
    border-color: rgba(249, 202, 36, 0.2) !important;
    color: var(--accent-dynamic) !important;
    border-radius: 6px !important;
}

.ws-q-action-btn:hover {
    background: rgba(249, 202, 36, 0.15) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
    color: var(--accent-dynamic) !important;
}

.ws-q-textarea:focus {
    border-color: var(--accent-dynamic) !important;
}

/* Option labels */
.ws-option-label {
    color: var(--accent-dynamic) !important;
}

.ws-option-input:focus {
    border-bottom-color: var(--accent-dynamic) !important;
}

/* Toolbar buttons */
.ws-toolbar-btn:hover {
    background: rgba(249, 202, 36, 0.15) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
}

.ws-toolbar-btn.primary {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

.ws-toolbar-btn.success {
    background: linear-gradient(135deg, #00CEC9, #00B894) !important;
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.3) !important;
}

/* Header config */
.ws-header-config {
    background: rgba(249, 202, 36, 0.04) !important;
    border-color: rgba(249, 202, 36, 0.1) !important;
    border-radius: 10px !important;
}

.ws-header-config h4 {
    color: var(--accent-dynamic) !important;
}

/* Saved worksheet cards */
.ws-saved-card {
    border-radius: 10px !important;
}

.ws-saved-card:hover {
    background: rgba(249, 202, 36, 0.08) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
}

.ws-saved-card .ws-card-meta i {
    color: var(--accent-dynamic) !important;
}

.ws-btn-preview {
    background: rgba(249, 202, 36, 0.15) !important;
    color: var(--accent-dynamic) !important;
    border-radius: 8px !important;
}

.ws-btn-edit {
    background: rgba(0, 206, 201, 0.15) !important;
    color: #00CEC9 !important;
    border-radius: 8px !important;
}

.ws-btn-delete {
    border-radius: 8px !important;
}

/* Print preview accent colors */
.ws-print-q-text .q-num {
    color: var(--accent-dynamic) !important;
}

.ws-print-option .opt-letter {
    color: var(--accent-dynamic) !important;
}

.ws-answer-key-item .key-num {
    color: var(--accent-dynamic) !important;
}

/* Loading */
.ws-loading {
    color: var(--accent-dynamic) !important;
}

/* Sketch box */
.ws-sketch-box {
    background: #2C3E50 !important;
    border-radius: 12px !important;
}

.ws-sketch-header h3 i {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   LESSON SLIDES MODAL — Theme
   ================================================================ */

.ls-slide-card {
    border-left-color: var(--accent-dynamic) !important;
    border-radius: 8px !important;
}

.ls-slide-card:hover {
    border-left-color: #F39C12 !important;
}

.ls-head-input {
    background: rgba(249, 202, 36, 0.04) !important;
    border-color: rgba(249, 202, 36, 0.1) !important;
    border-radius: 8px !important;
}

.ls-tab.active {
    color: #E84393 !important;
    border-bottom-color: #E84393 !important;
}

.ls-saved-card {
    border-radius: 10px !important;
}

.ls-saved-card:hover {
    border-color: #E84393 !important;
}

#ls-btn-use {
    background: linear-gradient(135deg, #E84393, #C2185B) !important;
    box-shadow: 0 4px 12px rgba(232, 67, 147, 0.3) !important;
    border-radius: 10px !important;
}

/* ================================================================
   AI SLIDE GENERATOR — Theme
   ================================================================ */

.ai-sg-panel {
    border-radius: 12px !important;
}

.ai-sg-header {
    background: linear-gradient(135deg,
                rgba(249, 202, 36, 0.08) 0%,
                rgba(0, 206, 201, 0.05) 100%) !important;
}

.ai-sg-logo {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 50%, #E84393 100%) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(249, 202, 36, 0.35) !important;
}

.ai-sg-header-sub .ai-sg-badge {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
}

.ai-sg-close {
    border-radius: 8px !important;
}

.ai-sg-topic-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 4px rgba(249, 202, 36, 0.12),
                0 4px 16px rgba(249, 202, 36, 0.1) !important;
}

.ai-sg-select:focus,
.ai-sg-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 36, 0.1) !important;
}

.ai-sg-count-btn.active {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 100%) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

.ai-sg-style-chip.active {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 100%) !important;
    color: #2C3E50 !important;
    box-shadow: 0 3px 10px rgba(249, 202, 36, 0.25) !important;
}

.ai-sg-activity-toggle.active {
    border-color: rgba(249, 202, 36, 0.4) !important;
    background: rgba(249, 202, 36, 0.08) !important;
}

.ai-sg-activity-toggle.active .act-check {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
}

.ai-sg-generate-btn {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 50%, #E84393 100%) !important;
    color: #2C3E50 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(249, 202, 36, 0.35) !important;
    font-weight: 800 !important;
}

.ai-sg-generate-btn:hover {
    box-shadow: 0 8px 30px rgba(249, 202, 36, 0.45) !important;
}

/* Progress orb */
.ai-sg-progress-orb {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 50%, #E84393 100%) !important;
    box-shadow: 0 0 40px rgba(249, 202, 36, 0.4),
                0 0 80px rgba(232, 67, 147, 0.2) !important;
}

.ai-sg-progress-bar-fill {
    background: linear-gradient(90deg, var(--accent-dynamic), #F39C12, #E84393) !important;
}

/* ================================================================
   AI SIDEBAR — Theme
   ================================================================ */

.ai-expand-toggle {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

.ai-expand-toggle:hover {
    background: #F39C12 !important;
    box-shadow: -6px 0 20px rgba(249, 202, 36, 0.4) !important;
}

.ai-badge {
    background: rgba(249, 202, 36, 0.1) !important;
    color: var(--accent-dynamic) !important;
    border-color: rgba(249, 202, 36, 0.2) !important;
}

.ai-context-select:hover {
    border-color: var(--accent-dynamic) !important;
}

.new-chat-btn:hover {
    color: var(--accent-dynamic) !important;
}

/* Chat body background */
.ai-body {
    background-image: radial-gradient(circle at 20% 20%, rgba(249, 202, 36, 0.04) 0%, transparent 50%) !important;
}

/* AI system avatar */
.system .ai-avatar {
    background: linear-gradient(135deg, var(--accent-dynamic), #E84393) !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

/* User bubble */
.user .ai-bubble {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

/* Input focus */
.ai-input-container:focus-within {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 2px rgba(249, 202, 36, 0.1) !important;
}

/* Send button */
#btnSendAi {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

#btnSendAi:hover:not(:disabled) {
    background: #F39C12 !important;
}

/* ================================================================
   ACTIVITY STORE — Theme
   ================================================================ */

.store-logo-icon {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 50%, #00CEC9 100%) !important;
    box-shadow: 0 4px 15px rgba(249, 202, 36, 0.35) !important;
    border-radius: 10px !important;
}

.store-logo-text span {
    background: linear-gradient(135deg, var(--accent-dynamic), #00CEC9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.store-search-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 4px rgba(249, 202, 36, 0.15) !important;
}

.store-publish-btn {
    background: linear-gradient(135deg, var(--accent-dynamic) 0%, #F39C12 100%) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
    border-radius: 8px !important;
}

.store-tab.active {
    background: rgba(249, 202, 36, 0.12) !important;
    color: var(--accent-dynamic) !important;
}

.store-tab.active .tab-count {
    background: rgba(249, 202, 36, 0.2) !important;
    color: var(--accent-dynamic) !important;
}

.store-filter-btn.active {
    background: rgba(249, 202, 36, 0.12) !important;
    border-color: var(--accent-dynamic) !important;
    color: var(--accent-dynamic) !important;
}

.store-card {
    border-radius: 12px !important;
}

.store-card:hover {
    border-color: rgba(249, 202, 36, 0.35) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(249, 202, 36, 0.15) !important;
}

.store-teacher-avatar {
    background: linear-gradient(135deg, var(--accent-dynamic), #00CEC9) !important;
    border-radius: 6px !important;
}

.store-profile-avatar {
    background: linear-gradient(135deg, var(--accent-dynamic), #00CEC9) !important;
    border-radius: 10px !important;
}

.store-empty-icon {
    background: rgba(249, 202, 36, 0.1) !important;
    color: var(--accent-dynamic) !important;
    border-radius: 14px !important;
}

.store-publish-card {
    border-radius: 12px !important;
}

.store-card-skeleton {
    border-radius: 12px !important;
}

/* Store card type badges — education palette */
.store-card-type-badge.lesson { background: rgba(0, 206, 201, 0.2) !important; color: #00CEC9 !important; border-color: rgba(0, 206, 201, 0.3) !important; }
.store-card-type-badge.quiz { background: rgba(249, 202, 36, 0.2) !important; color: var(--accent-dynamic) !important; border-color: rgba(249, 202, 36, 0.3) !important; }
.store-card-type-badge.match-mind { background: rgba(116, 185, 255, 0.2) !important; color: #74B9FF !important; border-color: rgba(116, 185, 255, 0.3) !important; }
.store-card-type-badge.insight-wall { background: rgba(232, 67, 147, 0.2) !important; color: #E84393 !important; border-color: rgba(232, 67, 147, 0.3) !important; }
.store-card-type-badge.jigsaw { background: rgba(186, 220, 88, 0.2) !important; color: #BADC58 !important; border-color: rgba(186, 220, 88, 0.3) !important; }
.store-card-type-badge.sketch-solve { background: rgba(243, 156, 18, 0.2) !important; color: #F39C12 !important; border-color: rgba(243, 156, 18, 0.3) !important; }

/* ================================================================
   STRATEGY BADGE MANAGER — Theme
   ================================================================ */

.stb-modal {
    background: linear-gradient(145deg, #2C3E50 0%, #1a2634 100%) !important;
    border-radius: 12px !important;
}

.stb-title i {
    color: var(--accent-dynamic) !important;
}

/* Language toggle */
.stb-lang-thumb {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    box-shadow: 0 2px 8px rgba(249, 202, 36, 0.4) !important;
}

/* AI banner */
.stb-ai-banner {
    background: linear-gradient(135deg, rgba(249, 202, 36, 0.08), rgba(243, 156, 18, 0.04)) !important;
    border-color: rgba(249, 202, 36, 0.18) !important;
    border-radius: 10px !important;
}

.stb-ai-banner:hover {
    background: linear-gradient(135deg, rgba(249, 202, 36, 0.15), rgba(243, 156, 18, 0.08)) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
    box-shadow: 0 6px 20px rgba(249, 202, 36, 0.15) !important;
}

.stb-ai-icon {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    box-shadow: 0 3px 10px rgba(249, 202, 36, 0.3) !important;
}

.stb-ai-arrow {
    color: var(--accent-dynamic) !important;
}

/* Strategy cards */
.stb-strategy-card {
    border-radius: 10px !important;
}

/* Custom input focus */
.stb-custom-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 36, 0.12) !important;
}

/* Custom save button */
.stb-custom-save {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.3) !important;
}

/* Add custom button hover */
.stb-add-custom-btn:hover {
    background: rgba(249, 202, 36, 0.07) !important;
    border-color: rgba(249, 202, 36, 0.25) !important;
    color: var(--accent-dynamic) !important;
}

/* AI result card */
.stb-ai-result-card {
    background: rgba(249, 202, 36, 0.04) !important;
    border-color: rgba(249, 202, 36, 0.15) !important;
    border-radius: 10px !important;
}

.stb-ai-result-header {
    background: rgba(249, 202, 36, 0.08) !important;
    color: var(--accent-dynamic) !important;
}

.stb-ai-result-header i {
    color: var(--accent-dynamic) !important;
}

/* AI apply button */
.stb-ai-apply-btn {
    background: linear-gradient(135deg, #00CEC9, #00B894) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.3) !important;
}

/* AI spinner */
.stb-ai-spinner {
    border-color: rgba(249, 202, 36, 0.2) !important;
    border-top-color: var(--accent-dynamic) !important;
}

.stb-ai-loading {
    background: rgba(249, 202, 36, 0.06) !important;
    border-color: rgba(249, 202, 36, 0.15) !important;
    color: var(--accent-dynamic) !important;
    border-radius: 10px !important;
}

/* ================================================================
   QUIZ (AURA QUEST) & ACTIVITY MODALS — Additional radius/colors
   ================================================================ */

/* Generic activity overlay modals */
.activity-game-overlay,
.quiz-overlay,
.aura-overlay {
    border-radius: 0 !important;
}

/* Activity panel/cards inside modals */
.activity-card,
.quiz-card,
.game-card {
    border-radius: 10px !important;
}

/* Timer display accents */
.timer-display,
.game-timer {
    color: var(--accent-dynamic) !important;
}

.timer-bar-fill,
.progress-fill {
    background: linear-gradient(90deg, var(--accent-dynamic), #00CEC9) !important;
}

/* Score displays */
.score-display,
.score-value {
    color: var(--accent-dynamic) !important;
}

/* Activity mode picker cards */
.mode-card {
    border-radius: 10px !important;
}

.mode-card.active,
.mode-card:hover {
    border-color: var(--accent-dynamic) !important;
}

/* Tracking sidebar accent */
.tracking-header-icon {
    color: var(--accent-dynamic) !important;
}

/* Animation tab — accent colors */
.anim-add-btn {
    background: linear-gradient(135deg, var(--accent-dynamic), #F39C12) !important;
    color: #2C3E50 !important;
    border-radius: 8px !important;
}

/* What's New / Changelog modal */
.whats-new-modal {
    border-radius: 12px !important;
}

.whats-new-badge {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

/* Note slider accent */
.note-slider-handle {
    background: var(--accent-dynamic) !important;
}

/* ================================================================
   ADDITIONAL GLOBAL RADIUS FIXES — New components
   ================================================================ */

.ws-modal-box,
.ws-sketch-box,
.ai-sg-panel,
.stb-modal,
.store-card,
.store-publish-card,
.store-card-skeleton,
.store-sidebar,
.store-tab,
.store-header-btn,
.store-close-btn,
.store-search-input,
.store-publish-btn,
.store-filter-btn,
.ai-sg-close,
.ai-sg-topic-input,
.ai-sg-select,
.ai-sg-input,
.ai-sg-count-btn,
.ai-sg-style-chip,
.ai-sg-activity-toggle,
.ai-sg-generate-btn,
.ai-sg-logo,
.stb-close-btn,
.stb-ai-banner,
.stb-strategy-card,
.stb-custom-input,
.stb-custom-save,
.stb-custom-cancel,
.stb-add-custom-btn,
.stb-ai-apply-btn,
.stb-ai-result-card,
.stb-ai-loading,
.ws-close-btn,
.ws-input,
.ws-type-chip,
.ws-generate-btn,
.ws-question-card,
.ws-q-action-btn,
.ws-toolbar-btn,
.ws-header-config,
.ws-saved-card,
.ws-btn-preview,
.ws-btn-edit,
.ws-btn-delete,
.ls-slide-card,
.ls-saved-card,
#ls-btn-use,
.ai-bubble,
.ai-input-container {
    border-radius: 10px !important;
}

.ai-input-container {
    border-radius: 22px !important;
}

.store-filter-btn {
    border-radius: 16px !important;
}

.ai-sg-style-chip {
    border-radius: 16px !important;
}

.ws-q-type-badge,
.store-card-type-badge {
    border-radius: 6px !important;
}

/* ================================================================
   WEB SEARCH SIDEBAR — Theme
   ================================================================ */

/* Search title icon */
.search-title i {
    color: var(--accent-dynamic) !important;
}

/* Search tabs */
.search-tab.active {
    color: var(--accent-dynamic) !important;
}

.search-tab.active::after {
    background: var(--accent-dynamic) !important;
}

.search-tab:hover {
    background: rgba(249, 202, 36, 0.05) !important;
}

/* Search items */
.search-item:hover {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 4px 12px rgba(249, 202, 36, 0.1) !important;
}

.search-item {
    border-radius: 10px !important;
}

.search-item-title {
    color: var(--accent-dynamic) !important;
}

.search-item-url {
    color: #00CEC9 !important;
}

/* Search input bar */
.search-input-container {
    border-radius: 22px !important;
}

.search-input-container:focus-within {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 36, 0.12) !important;
}

.btn-run-search {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

.btn-run-search:hover {
    background: #F39C12 !important;
}

/* Image action buttons */
.btn-img-action.add {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 2px 4px rgba(249, 202, 36, 0.3) !important;
}

.search-image-item {
    border-radius: 8px !important;
}

/* Safe search badge */
.safe-search-badge {
    background: rgba(0, 206, 201, 0.1) !important;
    color: #00CEC9 !important;
    border-color: rgba(0, 206, 201, 0.2) !important;
}

.safe-search-badge i {
    color: #00CEC9 !important;
}

/* PNG verified glow */
.search-image-item.png-verified {
    box-shadow: 0 0 0 2px rgba(0, 206, 201, 0.4) !important;
}

.png-verify-badge.verifying {
    background: rgba(249, 202, 36, 0.2) !important;
    color: var(--accent-dynamic) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
}

.png-verify-badge.verified {
    background: rgba(0, 206, 201, 0.2) !important;
    color: #00CEC9 !important;
    border-color: rgba(0, 206, 201, 0.3) !important;
}

/* ================================================================
   UNIFIED ARROW CLOSE BUTTONS — All sidebars
   Directional arrows point toward center for consistent UX
   Right panels → fa-chevron-right  |  Left panels → fa-chevron-left
   ================================================================ */

/* Web Search close button (right side → arrow pointing right) */
#btnCloseWebSearch {
    transition: all 0.2s !important;
}

#btnCloseWebSearch:hover {
    color: var(--accent-dynamic) !important;
    background: rgba(249, 202, 36, 0.1) !important;
}

/* Tracking sidebar close button (already has chevron) */
.close-tracking-btn {
    transition: all 0.2s !important;
}

.close-tracking-btn:hover {
    color: var(--accent-dynamic) !important;
    background: rgba(249, 202, 36, 0.1) !important;
}

/* Chat slider close */
.chat-close-btn {
    transition: all 0.2s !important;
}

.chat-close-btn:hover {
    color: var(--accent-dynamic) !important;
    background: rgba(249, 202, 36, 0.1) !important;
}

/* AI sidebar close button — already chevron, just color */
.ai-side-close-btn:hover {
    color: var(--accent-dynamic) !important;
    background: rgba(249, 202, 36, 0.1) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
}

/* Tracking side close arrow button */
.tracking-side-close-btn:hover {
    color: var(--accent-dynamic) !important;
    background: rgba(249, 202, 36, 0.1) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
}

/* OneNote nav close (already chevron-left) — just color */
.nav-close-btn:hover {
    color: var(--accent-dynamic) !important;
    border-color: rgba(249, 202, 36, 0.3) !important;
    background: rgba(249, 202, 36, 0.1) !important;
    transform: scale(1.1) !important;
}

/* Dashboard close (the close-btn-modern X) — keep as X for full-screen overlays */
.close-btn-modern:hover {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   SEARCH BAR THEMING — Store search & general search inputs
   ================================================================ */

/* Store search bar — gold focus ring */
.store-search-input {
    border-radius: 10px !important;
}

.store-search-input:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 4px rgba(249, 202, 36, 0.15) !important;
}

/* AI sidebar header sparkle icon */
.ai-title i {
    color: var(--accent-dynamic) !important;
}

/* ================================================================
   ACTIVITY CARDS / LOBBIES / GAME MODALS — Unified sharp geometry
   Less rounded, consistent with the platform's professional look
   ================================================================ */

/* -------- Lobby Shared Styles -------- */
.lobby-students-grid {
    border-radius: 10px !important;
}

.lobby-student-tag {
    border-radius: 6px !important;
}

.lobby-student-tag .lobby-avatar {
    background: rgba(249, 202, 36, 0.25) !important;
}

.lobby-qr-enlarge-box {
    border-radius: 12px !important;
}

.lobby-qr-enlarge-box .qr-enlarge-code {
    color: var(--accent-dynamic) !important;
}

.lobby-floating-qr .floating-qr-btn {
    border-radius: 8px !important;
}

.lobby-floating-qr .floating-qr-btn:hover {
    background: rgba(249, 202, 36, 0.9) !important;
    box-shadow: 0 8px 30px rgba(249, 202, 36, 0.4) !important;
}

.lobby-floating-qr .floating-qr-panel {
    border-radius: 10px !important;
}

.lobby-floating-qr .floating-qr-code-val {
    color: var(--accent-dynamic) !important;
}

/* -------- Insight Wall — Sharper geometry -------- */
.iw-modal {
    border-radius: 12px !important;
}

.iw-btn {
    border-radius: 8px !important;
}

.iw-btn-primary {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
}

.iw-note {
    border-radius: 10px !important;
}

.iw-creator-card {
    border-radius: 14px !important;
}

.iw-textarea {
    border-radius: 10px !important;
}

.iw-textarea:focus {
    border-color: var(--accent-dynamic) !important;
}

.iw-config-card {
    border-radius: 14px !important;
}

.iw-input-premium {
    border-radius: 8px !important;
}

.iw-input-premium:focus {
    border-color: var(--accent-dynamic) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 36, 0.1) !important;
}

.iw-texture-btn {
    border-radius: 6px !important;
}

.iw-texture-btn.active {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    border-color: var(--accent-dynamic) !important;
}

.iw-texture-btn:hover {
    border-color: var(--accent-dynamic) !important;
}

.iw-note-image {
    border-radius: 8px !important;
}

.iw-media-preview {
    border-radius: 10px !important;
}

/* -------- AuraQuiz Cards — Sharper -------- */
.aura-quiz-grid {
    border-radius: 10px !important;
}

/* -------- AuraQuiz Cards — Sharper (actual class names from JS) -------- */
.aura-quiz-card {
    border-radius: 10px !important;
}

.aura-quiz-card:hover {
    border-color: var(--accent-dynamic) !important;
}

.aura-quiz-card button {
    border-radius: 8px !important;
}

.aura-quiz-card .actions {
    border-radius: 0 !important;
}

/* Quiz search/filter inputs */
#aura-quiz-search,
#aura-quiz-filter,
#aura-quiz-sort {
    border-radius: 10px !important;
}

/* Lens stat cards */
.lens-stat-card {
    border-radius: 10px !important;
}

.lens-btn {
    border-radius: 10px !important;
}

/* Result boxes (quiz game grid) */
.result-box {
    border-radius: 10px !important;
}

/* Preview toolbar */
.aura-preview-toolbar {
    border-radius: 10px !important;
}

/* Move buttons */
.aura-move-btn {
    border-radius: 6px !important;
}

/* Generic quiz option/card styling */
.aq-question-card,
.aq-answer-card,
.aq-option-card {
    border-radius: 10px !important;
}

.aq-modal,
.aq-config-modal {
    border-radius: 12px !important;
}

.aq-btn-primary {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    border-radius: 8px !important;
}

.aq-input,
.aq-select {
    border-radius: 8px !important;
}

.aq-input:focus,
.aq-select:focus {
    border-color: var(--accent-dynamic) !important;
}

/* -------- Activity Store Cards -------- */
.store-card {
    border-radius: 10px !important;
}

.store-card:hover {
    border-color: var(--accent-dynamic) !important;
}

.store-card-footer {
    border-radius: 0 0 10px 10px !important;
}

.store-modal,
.store-detail-modal {
    border-radius: 12px !important;
}

.store-search-input {
    border-radius: 10px !important;
}

.store-logo-icon {
    border-radius: 10px !important;
}

/* -------- MatchMind Cards -------- */
.mm-card,
.mm-card-stu {
    border-radius: 10px !important;
}

.mm-modal,
.mm-config-modal {
    border-radius: 12px !important;
}

.mm-grid-container {
    border-radius: 10px !important;
}

.mm-btn-primary {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    border-radius: 8px !important;
}

/* -------- Jigsaw -------- */
.jigsaw-modal,
.jigsaw-config {
    border-radius: 12px !important;
}

.jigsaw-hud {
    border-radius: 10px !important;
}

.jigsaw-piece {
    border-radius: 4px !important;
}

/* -------- SketchSolve -------- */
.ss-modal,
.ss-config-modal {
    border-radius: 12px !important;
}

.ss-canvas-container {
    border-radius: 10px !important;
}

.ss-btn-primary {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    border-radius: 8px !important;
}

/* -------- Timer Widget -------- */
.zen-timer {
    border-radius: 14px !important;
}

.zt-close-btn:hover {
    background: rgba(249, 202, 36, 0.15) !important;
    color: var(--accent-dynamic) !important;
}

.zt-switch-container {
    border-radius: 8px !important;
}

.zt-mode-btn {
    border-radius: 6px !important;
}

.zt-switch-highlight {
    border-radius: 6px !important;
}

.zt-ctrl-btn {
    border-radius: 10px !important;
}

.zt-ctrl-btn.play {
    background: var(--accent-dynamic) !important;
    color: #2C3E50 !important;
    box-shadow: 0 8px 20px rgba(249, 202, 36, 0.3) !important;
}

.zt-ctrl-btn.play:hover {
    background: #F39C12 !important;
    box-shadow: 0 12px 28px rgba(249, 202, 36, 0.5) !important;
}

.zt-ctrl-btn:hover {
    color: var(--accent-dynamic) !important;
}

.zt-preset-pill {
    border-radius: 6px !important;
}

.zt-preset-pill:hover {
    color: var(--accent-dynamic) !important;
}

.zt-icon {
    color: var(--accent-dynamic) !important;
}

/* -------- Transfer Modal -------- */
.transfer-card {
    border-radius: 12px !important;
}

.transfer-item {
    border-radius: 8px !important;
}

/* -------- Chat Slider -------- */
.chat-slider {
    border-radius: 12px 0 0 12px !important;
}

.chat-header h3 i {
    color: var(--accent-dynamic) !important;
}

.chat-msg-card {
    border-radius: 10px !important;
}

.chat-msg-action {
    background: rgba(249, 202, 36, 0.1) !important;
    color: var(--accent-dynamic) !important;
    border-radius: 8px !important;
}

.chat-msg-action:hover {
    background: rgba(249, 202, 36, 0.2) !important;
}

.btn-chat-clear {
    border-radius: 8px !important;
}

.chat-close-btn {
    border-radius: 8px !important;
}

.chat-close-btn:hover {
    background: rgba(249, 202, 36, 0.1) !important;
    color: var(--accent-dynamic) !important;
}

/* -------- Generic Activity Shared Radii -------- */
/* All inline-style modals from JS: match common radii patterns to sharpen */
/* Using attribute selectors for inline border-radius overrides */
[style*="border-radius: 24px"],
[style*="border-radius:24px"] {
    border-radius: 12px !important;
}

[style*="border-radius: 28px"],
[style*="border-radius:28px"] {
    border-radius: 12px !important;
}

[style*="border-radius: 20px"],
[style*="border-radius:20px"] {
    border-radius: 10px !important;
}

[style*="border-radius: 18px"],
[style*="border-radius:18px"] {
    border-radius: 10px !important;
}

[style*="border-radius: 16px"],
[style*="border-radius:16px"] {
    border-radius: 10px !important;
}

/* -------- Clock Notch — Allow JS color cycling -------- */
/* Don't force a color on the clock; let setupNotchColorCycle() control it */
#digital-clock {
    text-shadow: 0 0 12px rgba(249, 202, 36, 0.4) !important;
}

/* ================================================================
   UNIFIED CENTER-EDGE CLOSE ARROWS
   Floating circular buttons at the vertical center of each panel edge.
   Right panels → left edge (pointing right)
   Left panels  → right edge (pointing right toward center)
   ================================================================ */

/* --- Web Search Sidebar Edge Close --- */
.search-side-close-btn {
    position: absolute;
    top: 50%;
    left: -22px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: var(--bg-surface-solid);
    border: 2px solid var(--border-glass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    font-size: 1rem;
}

.search-sidebar-container.open .search-side-close-btn {
    opacity: 1;
    pointer-events: auto;
}

.search-side-close-btn:hover {
    transform: translateY(-50%) scale(1.1);
    background: var(--bg-item-hover);
    color: var(--accent-dynamic);
    border-color: var(--accent-dynamic);
    box-shadow: -4px 0 16px rgba(249, 202, 36, 0.2);
}

/* --- Chat Slider Edge Close --- */
.chat-side-close-btn {
    position: absolute;
    top: 50%;
    left: -22px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: var(--bg-surface-solid);
    border: 2px solid var(--border-glass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    font-size: 1rem;
}

.chat-slider.open .chat-side-close-btn {
    opacity: 1;
    pointer-events: auto;
}

.chat-side-close-btn:hover {
    transform: translateY(-50%) scale(1.1);
    background: var(--bg-item-hover);
    color: var(--accent-dynamic);
    border-color: var(--accent-dynamic);
    box-shadow: -4px 0 16px rgba(249, 202, 36, 0.2);
}

/* --- OneNote Nav Edge Close (right edge, since panel is on the left) --- */
/* Must override container overflow so button at right:-22px isn't clipped */
#onenote-nav {
    overflow: visible !important;
}

.onenote-edge-close-btn {
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: var(--bg-surface-solid);
    border: 2px solid var(--border-glass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    font-size: 1rem;
}

#onenote-nav.show .onenote-edge-close-btn {
    opacity: 1;
    pointer-events: auto;
}

.onenote-edge-close-btn:hover {
    transform: translateY(-50%) scale(1.1);
    background: var(--bg-item-hover);
    color: var(--accent-dynamic);
    border-color: var(--accent-dynamic);
    box-shadow: 2px 0 16px rgba(249, 202, 36, 0.2);
}

/* --- AI Sidebar Edge Close — override to match dynamic accent --- */
.ai-side-close-btn:hover {
    color: var(--accent-dynamic) !important;
    border-color: var(--accent-dynamic) !important;
}

/* --- TrackPro Edge Close — override to match dynamic accent --- */
.tracking-side-close-btn:hover {
    color: var(--accent-dynamic) !important;
    border-color: var(--accent-dynamic) !important;
}

/* ================================================================
   LIGHT THEME — Fix white-on-white text issues in profile panel
   All the inline styles below use hardcoded "color: white" or
   rgba(255,255,255,…) which are invisible on light backgrounds.
   These overrides target elements by ID so they win over inline.
   ================================================================ */

[data-theme="light"] {

    /* ── Profile modal header ─────────────────────────────────── */

    /* Header row border */
    #teacherAccountModal [style*="border-bottom:1px solid rgba(255,255,255"] {
        border-bottom-color: var(--border-glass) !important;
    }

    /* Teacher name text */
    #teacher-profile-name {
        color: var(--text-main) !important;
    }

    /* Email text */
    #teacher-profile-email {
        color: var(--text-muted) !important;
    }

    /* Close × button */
    #btn-close-teacher-account {
        border-color: var(--border-glass) !important;
        background: var(--bg-item) !important;
        color: var(--text-muted) !important;
    }

    /* ── Store stats banner ───────────────────────────────────── */

    #teacher-store-stats-banner {
        background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.06) 100%) !important;
        border-color: rgba(99,102,241,0.15) !important;
    }

    /* Individual stat cells */
    #teacher-store-stats-banner [style*="background:rgba(255,255,255,0.04)"] {
        background: var(--bg-item) !important;
    }

    /* "Published" stat number — was white */
    #store-stat-published {
        color: var(--text-main) !important;
    }

    /* Sub-labels: Published / Likes / Clones */
    #teacher-store-stats-banner [style*="color:#94a3b8"] {
        color: var(--text-muted) !important;
    }

    /* View Profile button in store banner */
    #teacher-store-stats-banner button {
        background: rgba(99,102,241,0.1) !important;
        border-color: rgba(99,102,241,0.2) !important;
        color: #6366f1 !important;
    }

    /* ── Bio / About Me textarea ──────────────────────────────── */

    #teacher-profile-bio {
        background: var(--bg-item) !important;
        border-color: var(--border-glass) !important;
        color: var(--text-main) !important;
    }

    /* "About Me" section label */
    #teacher-bio-section label {
        color: var(--text-muted) !important;
    }

    /* ── Auth modal overlay background ───────────────────────── */

    .auth-modal-overlay .auth-modal,
    .auth-modal-overlay .dashboard-modal {
        background: var(--bg-surface-solid) !important;
        color: var(--text-main) !important;
    }

    /* ── dashboard-modal.css: #dash-user-name was gradient → fix ── */

    #dash-user-name {
        background: none !important;
        -webkit-text-fill-color: var(--text-main) !important;
        color: var(--text-main) !important;
    }

    /* ── dashboard-modal.css: user role badge ────────────────── */

    .user-role-badge {
        color: #4f46e5 !important;
    }

    /* ── Store stats in old dashboard-modal (dash-btn.primary) ── */

    .dash-btn.primary {
        color: #ffffff !important;   /* keep white text on colored bg */
    }

    /* ── "Choose Avatar" label ───────────────────────────────── */

    #avatar-mgmt-section label {
        color: var(--text-muted) !important;
    }

    /* ── Account details section labels ─────────────────────── */

    .detail-item label,
    .account-details label {
        color: var(--text-muted) !important;
    }

    /* ── detail-value cells ──────────────────────────────────── */

    .detail-value {
        background: var(--bg-item) !important;
        color: var(--text-main) !important;
    }

    /* ── icon-btn-text edit buttons ─────────────────────────── */

    .icon-btn-text {
        color: var(--text-muted) !important;
    }

    /* ================================================================
       ACTIVITY OVERLAYS — LIGHT & SKETCH THEME FIXES
       Overrides hardcoded dark backgrounds in lobbies, games, etc.
       ================================================================ */

     .lobby-overlay,
     #quest-lobby, #auraTeacherGame, #auraResults, #auraStudentLobby, #auraStudentGame,
     #mm-lobby, #mm-monitor, #mm-results,
     #js-lobby, #js-monitor, #jigsaw-student-view,
     #ss-lobby, #ss-monitor,
     #ssv2-lobby,
     #iw-lobby, #iw-wall-ov,
     #is-lobby, #is-teacher-monitor,
     #aura-bs-overlay, #aura-share-modal, #aura-big-screen {
         background: var(--bg-surface-solid) !important;
         color: var(--text-main) !important;
     }

    /* Target inner panels with semi-transparent dark backgrounds */
     #quest-lobby > .lobby-inner > .lobby-header,
     #quest-lobby > .lobby-inner > .lobby-body,
     #auraTeacherGame > div,
     #auraResults > div,
     #mm-lobby > div,
     #mm-monitor > div,
     #mm-results > div,
     #js-lobby > div,
     #js-monitor > div,
     #ss-lobby > div,
     #ssv2-lobby > div,
     #ss-monitor > div,
     #iw-lobby > div,
     #iw-wall-ov > div,
     #is-lobby > div,
     #is-teacher-monitor > div,
     #aura-bs-overlay > div,
     #aura-share-modal > div,
     #aura-big-screen > div {
         border-color: var(--border-glass) !important;
     }
     
     /* Fix dark dialog boxes (#1e293b is a slate dark color used in many dialogs) */
     #mm-lobby [style*="#1e293b"],
     #js-lobby [style*="#1e293b"],
     #ss-lobby [style*="#1e293b"],
     #ssv2-lobby [style*="#1e293b"],
     #iw-lobby [style*="#1e293b"],
     #is-lobby [style*="#1e293b"],
    #is-teacher-monitor [style*="#1e293b"],
    #aura-share-modal [style*="#1e293b"],
    #aura-bs-overlay [style*="#1e293b"] {
        background: var(--bg-surface) !important;
        border-color: var(--border-strong) !important;
        color: var(--text-main) !important;
    }

     /* Target any divs with rgba(0,0,0,x) or rgba(255,255,255,x) backgrounds inside these overlays */
     #quest-lobby div[style*="rgba(0,0,0"],
     #auraTeacherGame div[style*="rgba(0,0,0"],
     #auraResults div[style*="rgba(0,0,0"],
     #mm-lobby div[style*="rgba(0,0,0"],
     #mm-monitor div[style*="rgba(0,0,0"],
     #mm-results div[style*="rgba(0,0,0"],
     #js-lobby div[style*="rgba(0,0,0"],
     #js-monitor div[style*="rgba(0,0,0"],
     #ss-lobby div[style*="rgba(0,0,0"],
     #ssv2-lobby div[style*="rgba(0,0,0"],
     #ss-monitor div[style*="rgba(0,0,0"],
     #iw-lobby div[style*="rgba(0,0,0"],
     #iw-wall-ov div[style*="rgba(0,0,0"],
     #is-lobby div[style*="rgba(0,0,0"],
     #is-teacher-monitor div[style*="rgba(0,0,0"],
     #aura-bs-overlay div[style*="rgba(0,0,0"],
     #aura-share-modal div[style*="rgba(0,0,0"],
     #aura-big-screen div[style*="rgba(0,0,0"],
     #quest-lobby div[style*="rgba(255,255,255,0."],
     #auraTeacherGame div[style*="rgba(255,255,255,0."],
     #auraResults div[style*="rgba(255,255,255,0."],
     #mm-lobby div[style*="rgba(255,255,255,0."],
     #mm-monitor div[style*="rgba(255,255,255,0."],
     #mm-results div[style*="rgba(255,255,255,0."],
     #js-lobby div[style*="rgba(255,255,255,0."],
     #js-monitor div[style*="rgba(255,255,255,0."],
     #ss-lobby div[style*="rgba(255,255,255,0."],
     #ssv2-lobby div[style*="rgba(255,255,255,0."],
     #ss-monitor div[style*="rgba(255,255,255,0."],
     #iw-lobby div[style*="rgba(255,255,255,0."],
     #iw-wall-ov div[style*="rgba(255,255,255,0."],
     #is-lobby div[style*="rgba(255,255,255,0."],
     #is-teacher-monitor div[style*="rgba(255,255,255,0."],
    #aura-bs-overlay div[style*="rgba(255,255,255,0."],
    #aura-share-modal div[style*="rgba(255,255,255,0."],
    #aura-big-screen div[style*="rgba(255,255,255,0."] {
        background: var(--bg-item) !important;
        border-color: var(--border-glass) !important;
        color: var(--text-main) !important;
    }

    /* Specific fixes for white text inside these elements */
     #quest-lobby [style*="color: white"],
     #auraTeacherGame [style*="color: white"],
     #auraResults [style*="color: white"],
     #mm-lobby [style*="color: white"],
     #mm-monitor [style*="color: white"],
     #mm-results [style*="color: white"],
     #js-lobby [style*="color: white"],
     #js-monitor [style*="color: white"],
     #ss-lobby [style*="color: white"],
     #ssv2-lobby [style*="color: white"],
     #ss-monitor [style*="color: white"],
     #iw-lobby [style*="color: white"],
     #iw-wall-ov [style*="color: white"],
     #is-lobby [style*="color: white"],
     #is-teacher-monitor [style*="color: white"],
     #aura-bs-overlay [style*="color: white"],
     #aura-share-modal [style*="color: white"],
     #aura-big-screen [style*="color: white"],
     #quest-lobby [style*="color:white"],
     #auraTeacherGame [style*="color:white"],
     #auraResults [style*="color:white"],
     #mm-lobby [style*="color:white"],
     #mm-monitor [style*="color:white"],
     #mm-results [style*="color:white"],
     #js-lobby [style*="color:white"],
     #js-monitor [style*="color:white"],
     #ss-lobby [style*="color:white"],
     #ssv2-lobby [style*="color:white"],
     #ss-monitor [style*="color:white"],
     #iw-lobby [style*="color:white"],
     #iw-wall-ov [style*="color:white"],
     #is-lobby [style*="color:white"],
     #is-teacher-monitor [style*="color:white"],
    #aura-bs-overlay [style*="color:white"],
    #aura-share-modal [style*="color:white"],
    #aura-big-screen [style*="color:white"] {
        color: var(--text-main) !important;
    }

    /* ── AuraLens Big Screen — Question counter & header chips ──── */
    /* .bs-counter gets color:white from an injected <style> class, not an
       inline style attr, so the [style*="color:white"] selector above misses it. */
    .bs-counter,
    #q-counter-text,
    #bs-accuracy-display {
        color: var(--text-main) !important;
        background: var(--bg-item) !important;
        border-color: var(--border-glass) !important;
    }
    .bs-brand {
        color: #b45309 !important; /* amber shade readable on light bg */
    }
    .bs-live-indicator {
        color: var(--text-main) !important;
        background: rgba(59,130,246,0.08) !important;
        border-color: rgba(59,130,246,0.2) !important;
    }

    /* Fix buttons and borders */
     #auraTeacherGame button[style*="color:white"],
     #auraTeacherGame button[style*="color: white"],
     #mm-lobby button[style*="color:white"],
     #mm-lobby button[style*="color: white"],
     #is-lobby button[style*="color:white"],
     #is-lobby button[style*="color: white"],
    #is-teacher-monitor button[style*="color:white"],
    #is-teacher-monitor button[style*="color: white"] {
        color: var(--text-main) !important;
        border-color: var(--border-glass) !important;
    }

    #auraTeacherGame [style*="border-bottom"],
    #auraTeacherGame [style*="border-top"],
     #mm-lobby [style*="border-bottom"] {
        border-color: var(--border-glass) !important;
    }
}