@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Nunito:wght@500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');

:root {
    --oqu-ink: #102033;
    --oqu-muted: #64748b;
    --oqu-sky: #38bdf8;
    --oqu-blue: #2563eb;
    --oqu-mint: #22c55e;
    --oqu-leaf: #10b981;
    --oqu-sun: #facc15;
    --oqu-coral: #fb7185;
    --oqu-violet: #7c3aed;
    --oqu-paper: #fffdf5;
    
    /* Dark mode variables */
    --dark-bg: #f7fbff;
    --dark-surface: #ffffff;
    --dark-text: #102033;
    --dark-border: #e2e8f0;
    --dark-hover: #f1f5f9;
}

* {
    letter-spacing: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: 'Nunito', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--oqu-ink);
    background-color: #f7fbff;
    touch-action: manipulation;
}

main {
    flex: 1;
}

footer {
}

body.bg-gray-50,
body:not([class*="bg-"]):not(.cert-body) {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        #f7fbff;
    background-size: 28px 28px;
}

.hero-bg {
    position: relative;
    overflow: hidden;
    background: var(--oqu-blue);
}

.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: 0.8;
}

.hero-bg > * {
    position: relative;
    z-index: 1;
}

.nav-bg {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        var(--oqu-blue) !important;
    background-size: 22px 22px !important;
}

.xp-bar,
[data-progress] {
    width: 0;
    transition: width 900ms cubic-bezier(.2, .8, .2, 1);
}

.card-hover {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.16);
}

.badge-glow {
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2), 0 12px 30px rgba(250, 204, 21, 0.35);
}

.nav-active {
    background: rgba(255, 255, 255, 0.24);
}

/* Sidebar Styling */
.sidebar-menu {
    position: fixed;
    left: 0;
    top: 64px;
    width: 280px;
    height: calc(100vh - 64px);
    background: #ffffff;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 999px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.25);
}

.sidebar-content {
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
}

.sidebar-link i {
    font-size: 16px;
    min-width: 18px;
    text-align: center;
    transition: transform 200ms ease;
}

.sidebar-link span {
    flex: 1;
    transition: color 200ms ease;
}

.sidebar-link:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.sidebar-link:hover i {
    transform: scale(1.1);
}

.sidebar-link-active {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    font-weight: 600;
    box-shadow: inset 2px 0 0 0 #2563eb, 0 2px 8px rgba(37, 99, 235, 0.12);
}

.sidebar-link-active i {
    color: #2563eb;
}

.sidebar-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px 8px;
    margin: 8px 0;
}

/* Adjust main content area - only when sidebar is present */
aside.sidebar-menu ~ div {
    margin-left: 280px;
}

/* Responsive Sidebar */
@media (max-width: 1024px) {
    .sidebar-menu {
        width: 260px;
    }
    
    aside.sidebar-menu ~ div {
        margin-left: 260px;
    }
    
    .sidebar-link {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .sidebar-link i {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .sidebar-menu {
        position: fixed;
        left: -280px;
        width: 280px;
        height: calc(100vh - 64px);
        transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
        top: 64px;
    }
    
    .sidebar-menu.active {
        left: 0;
    }
    
    aside.sidebar-menu ~ div {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .sidebar-menu {
        width: 240px;
        left: -240px;
    }
    
    .sidebar-content {
        padding: 16px 10px;
        gap: 4px;
    }
    
    .sidebar-link {
        padding: 8px 12px;
        font-size: 13px;
        gap: 10px;
    }
    
    .sidebar-link i {
        font-size: 14px;
    }
}

/* Main Content Area */
main {
    padding: 32px;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        #f7fbff;
    background-size: 28px 28px;
}

@media (max-width: 768px) {
    main {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    main {
        padding: 16px;
    }
}

/* Header Gradient Enhancement */
.nav-bg {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        var(--oqu-blue) !important;
    background-size: 22px 22px !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.desktop-nav {
    display: none;
}

.mobile-nav {
    display: block;
}

.menu-group {
    position: relative;
}

.menu-panel {
    display: none;
}

.menu-group:hover .menu-panel,
.menu-group:focus-within .menu-panel {
    display: block;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
    }

    .mobile-nav {
        display: none;
    }
}

.toast {
    animation: oqu-slide-in 300ms ease;
}

.lesson-rich-textarea {
    min-height: 260px;
}

.ck.ck-editor {
    border-radius: 1rem;
}

.ck.ck-editor__main > .ck-editor__editable {
    min-height: 300px;
    border-radius: 0 0 1rem 1rem !important;
    font-size: 0.95rem;
    line-height: 1.75;
}

.ck.ck-toolbar {
    border-radius: 1rem 1rem 0 0 !important;
}

.lesson-content {
    overflow-wrap: anywhere;
}

.lesson-content h2,
.lesson-content h3,
.lesson-content h4 {
    color: #1e293b;
    font-weight: 900;
    line-height: 1.25;
    margin: 1.25rem 0 0.65rem;
}

.lesson-content h2 {
    font-size: 1.45rem;
}

.lesson-content h3 {
    font-size: 1.2rem;
}

.lesson-content h4 {
    font-size: 1.05rem;
}

.lesson-content p {
    margin: 0.85rem 0;
}

.lesson-content ul,
.lesson-content ol {
    padding-left: 1.35rem;
    margin: 0.85rem 0;
}

.lesson-content ul {
    list-style: disc;
}

.lesson-content ol {
    list-style: decimal;
}

.lesson-content li {
    margin: 0.35rem 0;
}

.lesson-content blockquote {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--oqu-blue);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 0 0.85rem 0.85rem 0;
}

.lesson-content a {
    color: var(--oqu-blue);
    font-weight: 700;
    text-decoration: underline;
}

.lesson-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.lesson-content th,
.lesson-content td {
    border: 1px solid #e5e7eb;
    padding: 0.65rem;
    vertical-align: top;
}

.lesson-content th {
    background: #f8fafc;
    font-weight: 800;
}

.quiz-question-content {
    line-height: 1.65;
}

.quiz-question-content p:first-child,
.quiz-question-content h2:first-child,
.quiz-question-content h3:first-child,
.quiz-question-content h4:first-child {
    margin-top: 0;
}

.quiz-question-content p:last-child,
.quiz-question-content ul:last-child,
.quiz-question-content ol:last-child {
    margin-bottom: 0;
}

#quizQuestionEditor + .ck.ck-editor .ck-editor__editable {
    min-height: 180px;
}

@keyframes oqu-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.float {
    animation: oqu-float 3.8s ease-in-out infinite;
}

.float-delay-1 {
    animation-delay: .45s;
}

.float-delay-2 {
    animation-delay: .9s;
}

.float-delay-3 {
    animation-delay: 1.35s;
}

@keyframes oqu-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

button,
a[class*="bg-"],
.nav-link {
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

table th,
table td {
    transition: background-color 180ms ease, color 180ms ease;
}

table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.08);
}

button:not(:disabled):hover,
a[class*="bg-"]:hover,
.nav-link:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
}

button:not(:disabled):active,
a[class*="bg-"]:active {
    transform: translateY(0) scale(.98);
}

.btn-answer {
    transition: transform 110ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.btn-answer:active {
    transform: scale(.96);
}

.team-card {
    display: block;
    padding: 0;
    border-radius: 1.5rem;
    border: 2px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    position: relative;
    overflow: hidden;
}

.team-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59,130,246,0.5);
}

.team-card input.team-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.team-card .team-card-inner {
    padding: 1.75rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.team-card .team-card-inner .text-sm {
    letter-spacing: 0.18em;
}

.team-card .team-card-inner .text-4xl {
    font-size: 2.5rem;
}

.team-card.selected,
.team-card input.team-input:checked + .team-card-inner {
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.18);
    border-color: rgba(59,130,246,0.85);
}

.team-card input.team-input:checked + .team-card-inner::after {
    content: '✓';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 0 0 6px rgba(59,130,246,0.16);
}

.team-card.blue {
    background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(59,130,246,0.08));
    color: #eff6ff;
}

.team-card.orange {
    background: linear-gradient(180deg, rgba(249,115,22,0.18), rgba(249,115,22,0.08));
    color: #ffedd5;
}

.pop {
    animation: oqu-pop 300ms ease forwards;
}

@keyframes oqu-pop {
    0% {
        transform: scale(.82);
        opacity: 0;
    }

    70% {
        transform: scale(1.05);
    }

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

.firework-particle {
    position: fixed;
    left: var(--x-start);
    top: var(--y-start);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 9999;
    background: var(--particle-color, var(--oqu-sun));
    box-shadow: 0 0 12px currentColor;
    animation: oqu-firework 720ms cubic-bezier(.12, .82, .28, 1) forwards;
}

.firework-target {
    position: relative;
    z-index: 10;
}

.firework-target .fa-solid {
    pointer-events: none;
}

@keyframes oqu-firework {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50% + var(--x-end)), calc(-50% + var(--y-end))) scale(.18);
        opacity: 0;
    }
}

.role-card {
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.role-card:hover {
    transform: translateY(-2px);
    border-color: #38bdf8;
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.14);
}

.role-card.selected {
    border-color: #22c55e;
    background: #ecfdf5;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.setup-message {
    max-width: 560px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 18px;
    border: 2px solid #22c55e;
    background: #f0fdf4;
    color: #14532d;
    font-family: 'Nunito', 'Inter', sans-serif;
    box-shadow: 0 18px 44px rgba(16, 185, 129, 0.12);
}

.setup-message h2,
.setup-message-title {
    color: #15803d;
    font-weight: 900;
    margin: 0 0 12px;
}

.setup-message-error {
    border-color: #ef4444;
    background: #fff1f2;
    color: #991b1b;
}

.setup-message-error h2,
.setup-message-error .setup-message-title {
    color: #dc2626;
}

.setup-link,
.setup-message a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 24px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #10b981);
}

.setup-note {
    max-width: 560px;
    margin: 18px auto;
    color: #15803d;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-weight: 800;
}

.setup-note-error {
    color: #dc2626;
}

.crossword-board {
    --cw-cell: 48px;
    display: grid;
    gap: 4px;
    width: max-content;
    min-width: max-content;
    grid-auto-rows: var(--cw-cell);
}

.crossword-cell {
    width: var(--cw-cell);
    height: var(--cw-cell);
    min-width: var(--cw-cell);
    min-height: var(--cw-cell);
    flex: 0 0 var(--cw-cell);
}

@media (max-width: 640px) {
    .crossword-board {
        --cw-cell: 42px;
    }
}

.chat-window-panel {
    max-height: 480px;
}

.chat-messages-panel {
    min-height: 200px;
    max-height: 300px;
}

.cert-body {
    font-family: 'Inter', sans-serif;
    background: #f3f4f6;
}

.cert-page {
    font-family: 'Playfair Display', serif;
    background: white;
    width: 297mm;
    min-height: 210mm;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.cert-border-outer {
    position: absolute;
    inset: 12px;
    border: 3px solid #7c3aed;
    border-radius: 8px;
    pointer-events: none;
}

.cert-border-inner {
    position: absolute;
    inset: 18px;
    border: 1px solid #c4b5fd;
    border-radius: 4px;
    pointer-events: none;
}

.cert-corner {
    position: absolute;
    width: 48px;
    height: 48px;
}

.cert-corner svg {
    width: 100%;
    height: 100%;
}

.cert-corner.tl {
    top: 8px;
    left: 8px;
}

.cert-corner.tr {
    top: 8px;
    right: 8px;
    transform: scaleX(-1);
}

.cert-corner.bl {
    bottom: 8px;
    left: 8px;
    transform: scaleY(-1);
}

.cert-corner.br {
    bottom: 8px;
    right: 8px;
    transform: scale(-1, -1);
}

.gold-text {
    color: #b45309;
}

.cert-title,
.cert-serif {
    font-family: 'Playfair Display', serif;
}

.cert-ui-font {
    font-family: 'Inter', sans-serif;
}

.cert-content {
    min-height: 210mm;
}

.cert-student-name {
    font-family: 'Playfair Display', serif;
}

.watermark {
    position: absolute;
    bottom: 40px;
    right: 40px;
    opacity: 0.05;
    font-size: 80px;
    transform: rotate(-30deg);
    pointer-events: none;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    color: #7c3aed;
    white-space: nowrap;
}

.seal {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px white, 0 0 0 6px #c4b5fd;
}

.signature-line {
    border-bottom: 1.5px solid #374151;
    width: 160px;
}

@media print {
    .cert-body {
        background: white;
        margin: 0;
        padding: 0;
    }

    .no-print {
        display: none !important;
    }

    .cert-page {
        box-shadow: none;
        margin: 0;
        width: 100%;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

/* ========================================
   ENHANCED BUTTON ANIMATIONS
   ======================================== */

.magic-btn,
.fire-btn,
.ghost-btn {
    position: relative;
    overflow: hidden;
    transition: all 250ms cubic-bezier(0.23, 1, 0.320, 1);
}

.magic-btn::before,
.fire-btn::before,
.ghost-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 500ms, height 500ms;
    pointer-events: none;
}

.magic-btn:hover::before,
.fire-btn:hover::before,
.ghost-btn:hover::before {
    width: 300px;
    height: 300px;
}

.magic-btn:hover,
.fire-btn:hover,
.ghost-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.magic-btn:active,
.fire-btn:active,
.ghost-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Logo Animation */
.brand-logo {
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: logo-float 4s ease-in-out infinite;
    color: #facc15;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

html.dark-mode .brand-logo {
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.7);
}

.brand-logo:hover {
    animation: logo-pulse 500ms ease-in-out;
}

@keyframes logo-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes logo-pulse {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.brand-logo i {
    transition: transform 300ms ease;
}

.brand-logo:hover i {
    animation: icon-spin 600ms ease-in-out;
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* ========================================
   DARK MODE STYLES
   ======================================== */

html.dark-mode {
    --dark-bg: #0f172a;
    --dark-surface: #1a2940;
    --dark-text: #e2e8f0;
    --dark-border: #334155;
    --dark-hover: #2a3f5f;
}

html.dark-mode body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

html.dark-mode body:not([class*="cert"]) {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.18) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.18) 1px, transparent 1px),
        var(--dark-bg);
    background-size: 28px 28px;
}

html.dark-mode .nav-bg {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        var(--oqu-blue) !important;
    background-size: 22px 22px !important;
}

html.dark-mode .hero-bg {
    background: var(--oqu-blue);
}

/* Dark mode sidebar styles */
html.dark-mode .sidebar-menu {
    background: var(--dark-surface);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    border-right-color: rgba(148, 163, 184, 0.1);
}

html.dark-mode .sidebar-link {
    color: #cbd5e1;
}

html.dark-mode .sidebar-link:hover {
    background: rgba(37, 99, 235, 0.15);
    color: #38bdf8;
}

html.dark-mode .sidebar-link-active {
    background: rgba(37, 99, 235, 0.2);
    color: #38bdf8;
    box-shadow: inset 2px 0 0 0 #38bdf8, 0 2px 8px rgba(56, 189, 248, 0.15);
}

html.dark-mode .sidebar-link-active i {
    color: #38bdf8;
}

html.dark-mode .sidebar-group-title {
    color: #64748b;
}

html.dark-mode .sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.2);
}

html.dark-mode .sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(203, 213, 225, 0.35);
}

html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900 {
    color: var(--dark-text);
}

html.dark-mode .text-gray-600,
html.dark-mode .text-gray-700 {
    color: #cbd5e1;
}

html.dark-mode .text-gray-500 {
    color: #94a3b8;
}

html.dark-mode .text-gray-400,
html.dark-mode .text-gray-300 {
    color: #64748b;
}

html.dark-mode .text-white {
    color: var(--dark-text);
}

html.dark-mode .text-white\/70 {
    color: rgba(226, 232, 240, 0.7);
}

html.dark-mode .text-white\/80 {
    color: rgba(226, 232, 240, 0.8);
}

html.dark-mode .text-white\/20 {
    color: rgba(226, 232, 240, 0.2);
}

html.dark-mode .text-white\/10 {
    color: rgba(226, 232, 240, 0.1);
}

/* Light mode overrides for hero-bg */
.hero-bg .text-white\/70 {
    color: rgba(0, 0, 0, 0.7);
}

.hero-bg .text-white\/80 {
    color: rgba(0, 0, 0, 0.8);
}

html.dark-mode .bg-white\/10 {
    background-color: rgba(26, 41, 64, 0.1);
}

html.dark-mode .bg-white\/20 {
    background-color: rgba(26, 41, 64, 0.2);
}

html.dark-mode .hover\:bg-white\/20:hover {
    background-color: rgba(26, 41, 64, 0.2);
}

html.dark-mode .border-gray-100 {
    border-color: var(--dark-border);
}

html.dark-mode .bg-gray-100,
html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-200 {
    background-color: var(--dark-hover);
}

html.dark-mode .bg-indigo-700 {
    background-color: #1e3a8a;
}

html.dark-mode .bg-purple-600,
html.dark-mode .bg-purple-500 {
    background-color: #6d28d9;
}

html.dark-mode .bg-blue-100,
html.dark-mode .bg-green-100,
html.dark-mode .bg-yellow-100,
html.dark-mode .bg-orange-100,
html.dark-mode .bg-purple-50 {
    background-color: var(--dark-hover);
}

html.dark-mode .hover\:bg-blue-100:hover,
html.dark-mode .hover\:bg-green-100:hover,
html.dark-mode .hover\:bg-yellow-100:hover,
html.dark-mode .hover\:bg-orange-100:hover,
html.dark-mode .hover\:bg-purple-100:hover {
    background-color: var(--dark-surface);
}

html.dark-mode .text-purple-700 {
    color: #c084fc;
}

html.dark-mode .text-purple-600 {
    color: #d8b4fe;
}

html.dark-mode .text-purple-500 {
    color: #e9d5ff;
}

html.dark-mode .text-blue-700 {
    color: #93c5fd;
}

html.dark-mode .text-green-700 {
    color: #86efac;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

html.dark-mode .toast {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* Theme toggle button */
.theme-toggle {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 300ms ease;
    font-size: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(14px);
}

.theme-toggle:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.28);
}

.theme-toggle i {
    transition: transform 300ms ease;
}

.theme-toggle:hover i {
    animation: theme-icon-spin 400ms ease;
}

@keyframes theme-icon-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

html.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #edf2f7;
}

html.dark-mode .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Dark mode form elements */
html.dark-mode .role-card {
    border-color: #475569;
    background-color: #1e293b;
}

html.dark-mode .role-card.selected {
    border-color: #22c55e;
    background-color: var(--dark-hover);
}

html.dark-mode .role-card:hover {
    border-color: #0ea5e9;
    background-color: #0f172a;
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.14);
}

html.dark-mode .role-card.selected {
    border-color: #22c55e;
    background: #064e3b;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

html.dark-mode .role-card .text-gray-700 {
    color: #e2e8f0;
}

html.dark-mode .role-card .text-gray-400 {
    color: #94a3b8;
}

html.dark-mode .bg-white {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

html.dark-mode .border-gray-200 {
    border-color: var(--dark-border);
}

html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"] {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus {
    background-color: #1e293b;
    border-color: #0ea5e9;
    outline: none;
}

/* ========================================
   INTERACTIVE REMINDERS & NOTIFICATIONS
   ======================================== */

.reminders-widget {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 20px;
    color: white;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    animation: widget-slide-in 500ms ease-out;
}

@keyframes widget-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reminders-widget h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reminders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reminder-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 300ms ease;
    animation: reminder-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.reminder-item:nth-child(1) { animation-delay: 0s; }
.reminder-item:nth-child(2) { animation-delay: 100ms; }
.reminder-item:nth-child(3) { animation-delay: 200ms; }
.reminder-item:nth-child(4) { animation-delay: 300ms; }

@keyframes reminder-pop {
    from {
        opacity: 0;
        transform: scale(0.8) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

.reminder-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(8px);
}

.reminder-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reminder-content {
    flex: 1;
}

.reminder-title {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 2px;
}

.reminder-time {
    font-size: 12px;
    opacity: 0.85;
    margin: 0;
}

.reminder-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reminder-close:hover {
    color: white;
    transform: scale(1.2) rotate(90deg);
}

/* Dashboard cards with enhanced hover */
.dashboard-card {
    transition: all 300ms cubic-bezier(0.23, 1, 0.320, 1);
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 500ms ease;
    pointer-events: none;
}

.dashboard-card:hover::before {
    left: 100%;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Achievement badge animation */
.achievement-badge {
    animation: achievement-float 3s ease-in-out infinite;
}

@keyframes achievement-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ========================================
   DARK MODE STYLES FOR REMINDERS & WIDGETS
   ======================================== */

html.dark-mode .reminders-widget {
    background: linear-gradient(135deg, #4f46e5 0%, #5a21b0 100%);
    border-radius: 16px;
}

html.dark-mode .reminder-item {
    background: rgba(30, 27, 75, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

html.dark-mode .reminder-item:hover {
    background: rgba(55, 48, 163, 0.8);
    border-color: rgba(139, 92, 246, 0.5);
}

html.dark-mode .reminder-close:hover {
    color: #fca5a5;
}

/* Dark mode for form inputs and selects */
html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: #1a1a2e !important;
    color: #e2e8f0 !important;
    border-color: #404060 !important;
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background-color: #252540 !important;
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

html.dark-mode .role-card input[type="radio"] {
    accent-color: #7c3aed;
}

html.dark-mode button {
    transition: all 250ms ease;
}

html.dark-mode .magic-btn,
html.dark-mode .fire-btn,
html.dark-mode .ghost-btn {
    color: inherit;
}

html.dark-mode .bg-blue-50,
html.dark-mode .bg-red-50,
html.dark-mode .bg-green-50 {
    background-color: var(--dark-hover) !important;
}

html.dark-mode .text-red-700,
html.dark-mode .text-green-700,
html.dark-mode .text-blue-700 {
    color: #e2e8f0 !important;
}

html.dark-mode .border-red-200,
html.dark-mode .border-green-200,
html.dark-mode .border-blue-200 {
    border-color: #475569 !important;
}

/* ========================================
   UNIVERSAL DARK MODE STABILIZER
   ======================================== */

html.dark-mode {
    color-scheme: dark;
}

html.dark-mode body,
html.dark-mode main {
    color: var(--dark-text) !important;
}

html.dark-mode main {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.18) 1px, transparent 1px),
        linear-gradient(rgba(37, 99, 235, 0.18) 1px, transparent 1px),
        var(--dark-bg) !important;
    background-size: 28px 28px !important;
}

html.dark-mode .hero-bg,
html.dark-mode .nav-bg {
    color: #ffffff !important;
}

html.dark-mode .hero-bg .text-white,
html.dark-mode .hero-bg .text-white\/70,
html.dark-mode .hero-bg .text-white\/80,
html.dark-mode .hero-bg .text-white\/90,
html.dark-mode .nav-bg .text-white,
html.dark-mode .nav-bg .text-white\/70,
html.dark-mode .nav-bg .text-white\/80 {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hero-bg .text-white\/70 {
    color: rgba(255, 255, 255, 0.72) !important;
}

.hero-bg .text-white\/80 {
    color: rgba(255, 255, 255, 0.82) !important;
}

html.dark-mode .bg-white,
html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100,
html.dark-mode .bg-gray-200,
html.dark-mode .bg-slate-50,
html.dark-mode .bg-slate-100,
html.dark-mode .menu-panel,
html.dark-mode footer,
html.dark-mode .rounded-2xl.bg-white,
html.dark-mode .rounded-3xl.bg-white {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .bg-blue-50,
html.dark-mode .bg-indigo-50,
html.dark-mode .bg-purple-50,
html.dark-mode .bg-green-50,
html.dark-mode .bg-yellow-50,
html.dark-mode .bg-orange-50,
html.dark-mode .bg-red-50,
html.dark-mode .bg-emerald-50 {
    background-color: rgba(37, 99, 235, 0.12) !important;
}

html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-gray-100:hover,
html.dark-mode .hover\:bg-slate-100:hover,
html.dark-mode .hover\:bg-indigo-50:hover,
html.dark-mode .hover\:bg-purple-50:hover,
html.dark-mode .hover\:bg-red-50:hover {
    background-color: var(--dark-hover) !important;
}

html.dark-mode .border,
html.dark-mode .border-t,
html.dark-mode .border-b,
html.dark-mode .border-l,
html.dark-mode .border-r,
html.dark-mode .border-gray-50,
html.dark-mode .border-gray-100,
html.dark-mode .border-gray-200,
html.dark-mode .border-slate-100,
html.dark-mode .border-slate-200,
html.dark-mode .border-indigo-100,
html.dark-mode .border-purple-100,
html.dark-mode .border-blue-100,
html.dark-mode .border-green-100,
html.dark-mode .border-yellow-100,
html.dark-mode .border-orange-100,
html.dark-mode .border-red-100 {
    border-color: var(--dark-border) !important;
}

html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-slate-900,
html.dark-mode .text-slate-800,
html.dark-mode .text-black {
    color: var(--dark-text) !important;
}

html.dark-mode .text-gray-700,
html.dark-mode .text-gray-600,
html.dark-mode .text-slate-700,
html.dark-mode .text-slate-600 {
    color: #cbd5e1 !important;
}

html.dark-mode .text-gray-500,
html.dark-mode .text-gray-400,
html.dark-mode .text-slate-500,
html.dark-mode .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode option {
    background-color: #0f172a !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background-color: #111c31 !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16) !important;
}

html.dark-mode table,
html.dark-mode thead,
html.dark-mode tbody,
html.dark-mode tr,
html.dark-mode td,
html.dark-mode th {
    background-color: transparent !important;
    border-color: var(--dark-border) !important;
    color: inherit !important;
}

html.dark-mode thead,
html.dark-mode .bg-gray-50.border-b {
    background-color: rgba(15, 23, 42, 0.72) !important;
}

html.dark-mode table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.16) !important;
}

html.dark-mode .shadow-sm,
html.dark-mode .shadow,
html.dark-mode .shadow-lg,
html.dark-mode .shadow-xl,
html.dark-mode .shadow-2xl {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;
}

html.dark-mode .sidebar-menu,
html.dark-mode .menu-panel {
    background-color: var(--dark-surface) !important;
}

html.dark-mode .sidebar-link {
    color: #cbd5e1 !important;
}

html.dark-mode .sidebar-link:hover,
html.dark-mode .sidebar-link-active {
    background-color: rgba(37, 99, 235, 0.18) !important;
    color: #93c5fd !important;
}

html.dark-mode .role-card,
html.dark-mode .team-card,
html.dark-mode .quiz-card,
html.dark-mode .lesson-card,
html.dark-mode .dashboard-card {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .role-card.selected,
html.dark-mode .peer:checked + div,
html.dark-mode .peer-checked\:bg-indigo-50 {
    background-color: rgba(37, 99, 235, 0.2) !important;
    border-color: #60a5fa !important;
    color: #bfdbfe !important;
}

html.dark-mode .bg-yellow-400,
html.dark-mode .hover\:bg-yellow-300:hover {
    background-color: #facc15 !important;
    color: #111827 !important;
}

html.dark-mode .bg-indigo-600,
html.dark-mode .hover\:bg-indigo-700:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark-mode .bg-red-500,
html.dark-mode .bg-red-600,
html.dark-mode .hover\:bg-red-600:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

html.dark-mode .bg-green-500,
html.dark-mode .bg-green-600,
html.dark-mode .hover\:bg-green-600:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

html.dark-mode .text-purple-600,
html.dark-mode .text-purple-700,
html.dark-mode .text-indigo-600,
html.dark-mode .text-indigo-700,
html.dark-mode .text-blue-600,
html.dark-mode .text-blue-700 {
    color: #93c5fd !important;
}

html.dark-mode .text-green-600,
html.dark-mode .text-green-700,
html.dark-mode .text-emerald-600,
html.dark-mode .text-emerald-700 {
    color: #86efac !important;
}

html.dark-mode .text-red-600,
html.dark-mode .text-red-700 {
    color: #fca5a5 !important;
}

html.dark-mode .lesson-content h2,
html.dark-mode .lesson-content h3,
html.dark-mode .lesson-content h4 {
    color: var(--dark-text) !important;
}

html.dark-mode .lesson-content blockquote {
    background: rgba(37, 99, 235, 0.18) !important;
    border-left-color: #60a5fa !important;
}

html.dark-mode .lesson-content a {
    color: #93c5fd !important;
}

html.dark-mode .lesson-content th,
html.dark-mode .lesson-content td {
    border-color: var(--dark-border) !important;
}

html.dark-mode .lesson-content th {
    background: rgba(15, 23, 42, 0.72) !important;
}

html.dark-mode .ck.ck-editor__main > .ck-editor__editable,
html.dark-mode .ck.ck-toolbar {
    background: #0f172a !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html.dark-mode .ck.ck-button,
html.dark-mode .ck.ck-button .ck-button__label,
html.dark-mode .ck.ck-dropdown__button,
html.dark-mode .ck.ck-list__item .ck-button {
    color: var(--dark-text) !important;
}

html.dark-mode .ck.ck-button:hover,
html.dark-mode .ck.ck-button.ck-on,
html.dark-mode .ck.ck-dropdown__panel,
html.dark-mode .ck.ck-list {
    background: var(--dark-hover) !important;
    color: var(--dark-text) !important;
}