:root {
    --primary: #2563EB;
    --secondary: #10B981;
    --accent: #F59E0B;
    --bg: #F0F9FF;
    --dark: #1E293B;
    --light: #F8FAFC;
}

body {
    background-color: var(--bg);
    font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.custom-navbar {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.custom-navbar .nav-link {
    font-weight: 600;
    margin: 0 5px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.custom-navbar .nav-link:hover, .custom-navbar .nav-link.active {
    background: rgba(255,255,255,0.2);
}

.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dashboard-card-primary { border-left: 5px solid var(--primary); }
.dashboard-card-secondary { border-left: 5px solid var(--secondary); }
.dashboard-card-accent { border-left: 5px solid var(--accent); }

.progress {
    height: 1.5rem;
    border-radius: 1rem;
    background-color: #E2E8F0;
}
.progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 1rem;
    font-weight: bold;
}

.quiz-option {
    cursor: pointer;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.2s;
    background: white;
}
.quiz-option:hover {
    border-color: var(--primary);
    background: #EFF6FF;
}
.quiz-option.selected {
    border-color: var(--primary);
    background: #DBEAFE;
    font-weight: bold;
}
.quiz-option.correct {
    border-color: var(--secondary);
    background: #D1FAE5;
    color: #065F46;
}
.quiz-option.wrong {
    border-color: #EF4444;
    background: #FEE2E2;
    color: #991B1B;
}

.snellen-text {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.5rem;
}

.leaderboard-table th {
    background-color: var(--primary);
    color: white;
}
.leaderboard-table tr {
    transition: background-color 0.2s;
}
.leaderboard-table tr:hover {
    background-color: #F1F5F9;
}
.rank-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}
.rank-1 { background-color: #FBBF24; box-shadow: 0 0 10px #FBBF24; } /* Gold */
.rank-2 { background-color: #94A3B8; box-shadow: 0 0 10px #94A3B8; } /* Silver */
.rank-3 { background-color: #B45309; box-shadow: 0 0 10px #B45309; } /* Bronze */

.btn-kid {
    border-radius: 25px;
    font-weight: 700;
    padding: 10px 24px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s;
}
.btn-kid:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.btn-primary-kid { background-color: var(--primary); color: white; border: none; }
.btn-primary-kid:hover { background-color: #1D4ED8; color: white; }

.btn-secondary-kid { background-color: var(--secondary); color: white; border: none; }
.btn-secondary-kid:hover { background-color: #059669; color: white; }

.btn-accent-kid { background-color: var(--accent); color: white; border: none; }
.btn-accent-kid:hover { background-color: #D97706; color: white; }

.flash-message-enter {
    animation: slideDown 0.5s ease-out;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.loading-spinner {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.loading-spinner.active {
    display: flex;
}

.hero-eye { animation: heroFloat 2.8s ease-in-out infinite; }
.hero-orbit { position:absolute; opacity:.35; font-size:2.5rem; animation: orbitFloat 5s ease-in-out infinite; }
.hero-orbit-one { left:8%; top:18%; }
.hero-orbit-two { right:8%; bottom:16%; animation-delay:-2s; }
.mission-check { cursor:pointer; transition:background-color .2s, transform .2s; }
.mission-check:hover { background:#ecfdf5; transform:translateX(4px); }
@keyframes heroFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.06)} }
@keyframes orbitFloat { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(12px,-12px) rotate(12deg)} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }

.flow-steps { margin: 0 auto 2rem; max-width: 760px; border: 1px solid rgba(148,163,184,.18); }
.flow-steps ol { display: flex; list-style: none; margin: 0; padding: 0; }
.flow-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; color: #94a3b8; font-size: .85rem; font-weight: 700; text-align: center; }
.flow-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 3px; background: #dbe4f0; z-index: 0; }
.flow-step-number { position: relative; z-index: 1; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e2e8f0; color: #64748b; border: 3px solid #fff; box-shadow: 0 0 0 2px #dbe4f0; }
.flow-step.active { color: #2563eb; }
.flow-step.active .flow-step-number { background: #2563eb; color: #fff; box-shadow: 0 0 0 2px #93c5fd; }
.flow-step.completed { color: #15803d; }
.flow-step.completed .flow-step-number { background: #22c55e; color: #fff; box-shadow: 0 0 0 2px #86efac; }
.flow-step.completed:not(:last-child)::after { background: #86efac; }
@media (max-width: 576px) { .flow-step { font-size: .72rem; } .flow-step-number { width: 32px; height: 32px; } .flow-step:not(:last-child)::after { top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); } }

/* Modern EduMata shell and Intel-inspired landing page */
.custom-navbar {
    min-height: 68px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 3px 14px rgba(15, 23, 42, .06);
}
.custom-navbar .navbar-brand { display: flex; align-items: center; gap: .65rem; color: #0f5fc6; letter-spacing: -.03em; }
.brand-eye { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #0877d1; border-radius: 3px; }
.custom-navbar .nav-link { color: #4c72a8; margin: 0 2px; border-radius: 2px; font-size: .82rem; font-weight: 800; letter-spacing: .025em; }
.custom-navbar .nav-link { white-space:nowrap; }
.custom-navbar .nav-link:hover, .custom-navbar .nav-link.active { color: #005eb8; background: #eef7ff; }
.custom-navbar .navbar-toggler { border-color: #bfdbfe; color: #075985; }
.nav-cta { color: #fff; background: #0877d1; border: 1px solid #0877d1; }
.nav-cta:hover { color: #fff; background: #075fa8; }

.home-page { background: #fff; }
.home-page #main-content { overflow: hidden; }
.home-hero {
    position: relative;
    min-height: 445px;
    padding: 46px 0 72px;
    background-color: #173244;
    background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 82px 82px;
}
.home-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 76% 32%, rgba(14,165,233,.2), transparent 34%); pointer-events: none; }
.home-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(310px, .76fr) minmax(480px, 1.34fr); align-items: center; max-width: 1260px; }
.home-hero-copy { position: relative; z-index: 2; margin-right: -34px; padding: 42px 48px; color: #fff; background: #557c94; box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.home-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; color: #d7f1ff; font-size: .77rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.home-hero h1 { margin: 0 0 1rem; max-width: 560px; color: #fff; font-size: clamp(2.25rem, 4.2vw, 4.25rem); font-weight: 500; line-height: .99; letter-spacing: -.055em; }
.home-hero-copy > p { max-width: 540px; margin-bottom: 1.6rem; color: #f1f8fc; font-size: 1rem; line-height: 1.55; }
.home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.home-btn-primary { padding: .75rem 1.15rem; color: #075aa7; background: #fff; border: 0; border-radius: 0; font-weight: 800; }
.home-btn-primary:hover { color: #fff; background: #0877d1; }
.home-text-link { color: #fff; font-weight: 750; text-decoration: none; }
.home-text-link:hover { color: #d7f1ff; }
.home-hero-visual { position: relative; z-index: 1; height: 365px; box-shadow: 0 20px 55px rgba(0,0,0,.3); }
.home-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center; }

.quick-launch { position: relative; z-index: 3; margin-top: -38px; background: #fff; }
.quick-launch-inner { max-width: 1050px; padding: 34px 0 30px; text-align: center; }
.quick-launch-inner > strong { display: block; margin-bottom: 1.2rem; color: #1e293b; font-size: 1rem; }
.quick-launch-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.quick-launch-links a { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: #27364b; font-size: .88rem; font-weight: 700; text-decoration: none; }
.quick-launch-links i { color: #0877d1; font-size: 1.5rem; transition: transform .2s ease; }
.quick-launch-links a:hover { color: #0877d1; }
.quick-launch-links a:hover i { transform: translateY(-3px); }

.home-content { max-width: 1160px; padding-top: 28px; padding-bottom: 70px; }
.home-section-heading { position:relative; display:flex; justify-content:space-between; align-items:center; gap:2rem; margin:0 0 1.75rem; padding:1.65rem 1.8rem; overflow:hidden; background:linear-gradient(135deg,#eef8ff,#f4fbff); border:1px solid #d5e9f7; border-radius:1.35rem; box-shadow:0 .65rem 1.8rem rgba(16,69,108,.08); }
.home-section-heading::after { content:''; position:absolute; right:-55px; top:-85px; width:210px; height:210px; border:28px solid rgba(8,119,209,.08); border-radius:50%; }
.home-section-heading > * { position:relative; z-index:1; }
.home-section-heading span { color: #0877d1; font-size: .8rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.home-section-heading h2 { max-width: 640px; margin: .35rem 0 0; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.045em; }
.home-section-heading > p { max-width: 370px; margin: 0; color: #64748b; }
.home-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.home-feature { position:relative; display:flex; flex-direction:column; min-height:305px; padding:1.75rem; color:#10233d; text-decoration:none; overflow:hidden; border:1px solid rgba(16,35,61,.12); border-radius:1.25rem; box-shadow:0 .7rem 1.6rem rgba(15,23,42,.1); transition:transform .22s ease,box-shadow .22s ease; }
.home-feature::after { content: ''; position: absolute; right: -48px; bottom: -62px; width: 160px; height: 160px; border: 30px solid rgba(255,255,255,.25); border-radius: 50%; }
.home-feature:hover { color: #101828; transform: translateY(-6px); box-shadow: 0 18px 35px rgba(15,23,42,.14); }
.feature-blue { background: linear-gradient(145deg, #69b7ff, #a5dbff); }
.feature-lime { background: linear-gradient(145deg, #b9ed6c, #e2ff93); }
.feature-coral { background: linear-gradient(145deg, #ff8c78, #ffc092); }
.feature-violet { color: #fff; background: linear-gradient(145deg, #6536b9, #a934c5); }
.feature-violet:hover { color: #fff; }
.feature-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:1.7rem; color:#0877d1; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.7); border-radius:.85rem; box-shadow:0 .4rem 1rem rgba(15,23,42,.08); font-size:1.25rem; }
.home-feature h3 { margin-bottom: .65rem; font-size: 1.45rem; font-weight: 800; }
.home-feature p { position:relative; z-index:1; flex:1; min-height:0; margin-bottom:1.35rem; color:#253b52; font-size:.92rem; line-height:1.58; }
.feature-violet p { color:#f3eaff; }
.feature-link { position:relative; z-index:1; display:inline-flex; align-items:center; align-self:flex-start; gap:.55rem; margin-top:auto; padding:.55rem .75rem; color:#0a2744; background:rgba(255,255,255,.58); border-radius:.65rem; font-size:.82rem; font-weight:850; }
.feature-violet .feature-link { color:#fff; background:rgba(255,255,255,.16); }
.home-bottom-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 1rem; }
.daily-tip-card { display:flex; gap:1.4rem; padding:2rem; color:#fff; background:#102f43; border:1px solid #254c62; border-radius:1.2rem; box-shadow:0 .7rem 1.6rem rgba(0,0,0,.13); }
.tip-icon { flex: 0 0 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; color: #102f43; background: #ffcb45; font-size: 1.35rem; }
.daily-tip-card small { color: #8ed9ff; font-weight: 850; letter-spacing: .12em; }
.daily-tip-card h2 { margin: .35rem 0 .75rem; font-size: 1.35rem; }
.daily-tip-card p { margin: 0; color: #d7e8f2; }
.home-stats { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:#0877d1; border-radius:1.2rem; box-shadow:0 .7rem 1.6rem rgba(0,73,136,.18); }
.home-stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4rem; color: #fff; text-align: center; }
.home-stats div + div { border-left: 1px solid rgba(255,255,255,.25); }
.home-stats strong { font-size: 2.25rem; line-height: 1; }
.home-stats span { margin-top: .55rem; font-size: .82rem; }

@media (max-width: 991.98px) {
    .custom-navbar .navbar-collapse { padding: 1rem 0; }
    .home-hero { padding: 36px 0; }
    .home-hero-inner { grid-template-columns: 1fr; }
    .home-hero-copy { margin: 0 5% -28px; padding: 34px; }
    .home-hero-visual { height: 330px; }
    .quick-launch { margin-top: 0; }
    .home-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .home-section-heading { display: block; }
    .home-section-heading > p { margin-top: .8rem; }
    .quick-launch-links { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
    .home-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .home-hero-copy { margin-inline: .75rem; padding: 28px 24px; }
    .home-hero h1 { font-size: 2.4rem; }
    .home-hero-visual { height: 245px; }
    .home-feature-grid { grid-template-columns: 1fr; }
    .home-feature { min-height: 250px; }
    .daily-tip-card { flex-direction: column; }
}
.eye-break-optin,.eye-break-overlay,.eye-distance-gate{position:fixed;inset:0;z-index:1090;display:grid;place-items:center;padding:1rem;background:rgba(15,43,45,.68);backdrop-filter:blur(5px)}
.eye-break-optin[hidden],.eye-break-overlay[hidden],.eye-distance-gate[hidden]{display:none}
.eye-distance-gate{z-index:1095;background:linear-gradient(135deg,rgba(194,237,214,.97),rgba(236,255,242,.98))}
.eye-break-overlay{background:linear-gradient(135deg,rgba(25,135,84,.94),rgba(181,230,205,.96));z-index:1100}
.eye-break-card{width:min(92vw,560px);padding:2rem;text-align:center;background:#fffef4;border-radius:1.5rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.2)}
.eye-break-ring{width:8rem;height:8rem;margin:1.25rem auto 0;border-radius:50%;border:.65rem solid #55b889;display:grid;place-content:center;color:#146c43}
.eye-break-ring strong{font-size:2.4rem;line-height:1}.eye-break-ring span{font-size:.8rem;font-weight:700}
.eye-break-mascot{width:110px;height:110px;object-fit:contain;margin:0 auto .75rem;filter:drop-shadow(0 .5rem .8rem rgba(23,84,69,.16))}
.role-siswa { font-size: calc(16px * var(--font-scale, 1)); }
.role-guru,.role-content_admin,.role-developer { font-size: calc(14px * var(--font-scale, 1)); }
.accessibility-tools .btn { color:#315f99; font-weight:800; padding:.25rem .38rem; }
.accessibility-tools { gap:.05rem; margin-inline:.35rem; padding:.15rem .25rem; background:#eef6ff; border:1px solid #dceaf8; border-radius:999px; white-space:nowrap; }
.admin-nav-menu { width:290px; padding:.6rem; border-radius:.8rem; }
.admin-nav-menu .dropdown-item { display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius:.55rem; color:#284a70; }
.custom-navbar .dropdown-menu:not(.admin-nav-menu) .dropdown-item,.custom-navbar .dropdown-menu:not(.admin-nav-menu) .dropdown-item-text { padding:.65rem .75rem; font-size:.88rem; line-height:1.35; }
.admin-nav-menu .dropdown-item:hover { color:#075eb8; background:#eef7ff; }
.admin-nav-menu .dropdown-item > i { width:28px; color:#0877d1; text-align:center; }
.admin-nav-menu .dropdown-item > span { display:flex; flex-direction:column; font-weight:800; line-height:1.2; }
.admin-nav-menu .dropdown-item small { margin-top:.2rem; color:#75879a; font-size:.7rem; font-weight:500; }
.custom-navbar #navbarDropdown { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.theme-dark { color:#e5eef9; background:#071426 !important; }
.theme-dark #main-content,.theme-dark .bg-light { background:#071426 !important; }
.theme-dark .custom-navbar,.theme-dark .card,.theme-dark .modal-content,.theme-dark .dropdown-menu,.theme-dark footer { color:#e5eef9; background:#10233d !important; border-color:#294563 !important; }
.theme-dark .custom-navbar .nav-link.active,.theme-dark .custom-navbar .nav-link:hover,.theme-dark .custom-navbar .nav-link:focus { color:#fff !important; background:#0877d1 !important; }
.theme-dark .custom-navbar #navbarDropdown { color:#d9e9fa !important; }
.theme-dark .accessibility-tools { background:#17314f; border-color:#294563; }
.theme-dark .accessibility-tools .btn { color:#a9caee; }
.theme-dark .admin-nav-menu .dropdown-item { color:#d9e8f8; }
.theme-dark .admin-nav-menu .dropdown-item:hover { color:#fff; background:#183b60; }
.theme-dark .admin-nav-menu .dropdown-item small { color:#9db4cb; }
.theme-dark .text-muted { color:#b8c8da !important; }
.theme-dark p { color:inherit; }
.theme-dark .table { --bs-table-bg:#10233d; --bs-table-color:#e5eef9; --bs-table-border-color:#294563; }
.theme-dark input,.theme-dark select,.theme-dark textarea { color:#f8fafc; background:#0c1b30; border-color:#3b5674; }
.theme-dark .dropdown-menu:not(.admin-nav-menu) { min-width:230px; padding:.55rem; }
.theme-dark .dropdown-menu .dropdown-item,.theme-dark .dropdown-menu .dropdown-item-text { color:#dce9f7 !important; border-radius:.45rem; }
.theme-dark .dropdown-menu .dropdown-item:hover,.theme-dark .dropdown-menu .dropdown-item:focus { color:#fff !important; background:#1b4168 !important; }
.theme-dark .dropdown-menu .dropdown-divider { border-color:#34516f; opacity:1; }
.theme-dark .dropdown-menu .text-warning { color:#ffd166 !important; }
.theme-dark .dropdown-menu .text-danger { color:#ff7d89 !important; }
.theme-dark .form-control,.theme-dark .form-select { color:#eef6ff; background-color:#0d2139; border-color:#385875; }
.theme-dark .form-control::placeholder { color:#8fa8c0; opacity:1; }
.theme-dark .form-control:focus,.theme-dark .form-select:focus { color:#fff; background:#102b49; border-color:#4da3ff; box-shadow:0 0 0 .2rem rgba(77,163,255,.18); }
.theme-dark .form-check-input { background-color:#102b49; border-color:#52718e; }
.theme-dark .form-check-input:checked { background-color:#1685e5; border-color:#1685e5; }
.theme-dark .btn-close { filter:invert(1) grayscale(1) brightness(2); }
.theme-dark hr,.theme-dark .border,.theme-dark .border-top,.theme-dark .border-bottom { border-color:#294563 !important; opacity:1; }
.theme-dark .pagination .page-link { color:#b9d7f5; background:#102b49; border-color:#294f72; }
.theme-dark .pagination .page-link:hover,.theme-dark .pagination .active .page-link { color:#fff; background:#0877d1; border-color:#1685e5; }
.theme-dark .nav-tabs { border-color:#294f72; }
.theme-dark .nav-tabs .nav-link { color:#aac6e3; }
.theme-dark .nav-tabs .nav-link.active { color:#fff; background:#173b60; border-color:#365a7c; }
.theme-dark .accordion-item,.theme-dark .accordion-button,.theme-dark .offcanvas { color:#e7f1fb; background:#102b49; border-color:#294f72; }
.theme-dark .accordion-button:not(.collapsed) { color:#fff; background:#173f68; }
.theme-dark .accordion-button::after { filter:invert(1); }
.theme-dark .alert-info { color:#bde9ff; background:#123c55; border-color:#216986; }
.theme-dark .alert-success { color:#c8f3dc; background:#123d31; border-color:#26765c; }
.theme-dark .alert-warning { color:#ffe7a5; background:#493b16; border-color:#806721; }
.theme-dark .alert-danger { color:#ffd0d4; background:#4b2029; border-color:#853543; }
.theme-dark .progress { background:#203a55; }
.theme-dark .quiz-option { color:#e8f2fc; background:#102b49; border-color:#365a7c; }
.theme-dark .quiz-option:hover,.theme-dark .quiz-option.selected { color:#fff; background:#173f68; border-color:#4da3ff; }
.admin-information-table th,.admin-information-table td { white-space:normal; overflow-wrap:anywhere; word-break:normal; line-height:1.5; }
.admin-information-table td { padding-top:.8rem; padding-bottom:.8rem; }
.games-information-table th:nth-child(1){width:5%}.games-information-table th:nth-child(2){width:27%}.games-information-table th:nth-child(3){width:11%}.games-information-table th:nth-child(4){width:39%}.games-information-table th:nth-child(5){width:18%}
.games-information-table .table-actions { white-space:nowrap; overflow-wrap:normal; }
.theme-dark .home-page,.theme-dark .quick-launch,.theme-dark .quick-launch-inner { background:#071426 !important; }
.theme-dark .home-section-heading { color:#eef7ff; background:linear-gradient(135deg,#102b49,#123956); border-color:#285271; box-shadow:0 .8rem 2rem rgba(0,0,0,.2); }
.theme-dark .home-section-heading h2 { color:#fff; }
.theme-dark .home-section-heading > p { color:#c5d8e9; }
.theme-dark .home-section-heading span { color:#55bdff; }
.theme-dark .home-feature:not(.feature-violet) h3 { color:#10233d; }
.theme-dark .home-feature:not(.feature-violet) p { color:#253b52; }
.theme-dark .home-feature:not(.feature-violet) .feature-link { color:#0a2744; }
.theme-dark .feature-violet h3,.theme-dark .feature-violet p,.theme-dark .feature-violet .feature-link { color:#fff; }
.theme-dark .quick-launch-inner > strong,.theme-dark .quick-launch-links a { color:#e5eef9; }
.theme-dark .quick-launch-links a:hover { color:#65c7ff; }
.theme-dark .card-header,.theme-dark .list-group-item,.theme-dark .table-light,.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { color:#e5eef9 !important; background:#132b49 !important; border-color:#294563 !important; }
.theme-dark .btn-outline-warning { color:#ffd467; }
.theme-dark .eye-break-card { color:#10233d; background:#f4f8ed; }

/* Developer/content-admin dashboard */
.admin-dashboard-shell { max-width:1180px; }
.admin-dashboard-head { position:relative; display:flex; justify-content:space-between; align-items:center; overflow:hidden; padding:2rem 2.2rem; color:#fff; background:linear-gradient(120deg,#075eb8,#079b9b); border-radius:1.25rem; box-shadow:0 1rem 2.5rem rgba(8,95,165,.2); }
.admin-dashboard-head::after { content:''; position:absolute; width:240px; height:240px; right:-65px; top:-105px; border:32px solid rgba(255,255,255,.12); border-radius:50%; }
.admin-dashboard-head h1 { margin:.35rem 0 .45rem; font-weight:800; letter-spacing:-.04em; }
.admin-dashboard-head p { color:#e3f6ff; }
.admin-eyebrow { font-size:.74rem; font-weight:850; letter-spacing:.13em; }
.admin-head-mark { position:relative; z-index:1; width:74px; height:74px; display:grid; place-items:center; flex:0 0 74px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.28); border-radius:22px; font-size:2rem; }
.admin-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.admin-summary { position:relative; min-height:120px; padding:1.25rem 1.4rem; color:#15324f; background:#fff; border:1px solid #e0eaf5; border-radius:1rem; box-shadow:0 .5rem 1.35rem rgba(31,67,107,.07); text-decoration:none; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.admin-summary:hover { color:#075eb8; transform:translateY(-3px); box-shadow:0 .85rem 1.8rem rgba(31,67,107,.13); }
.admin-summary span,.admin-summary strong { position:relative; z-index:1; display:block; }
.admin-summary span { color:#65788f; font-size:.82rem; font-weight:750; }
.admin-summary strong { margin-top:.15rem; font-size:2.1rem; }
.admin-summary > i { position:absolute; right:1rem; bottom:.7rem; color:#cfe8ff; font-size:3.15rem; }
.admin-section-title { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.25rem; }
.admin-section-title span { color:#0877d1; font-size:.73rem; font-weight:900; letter-spacing:.13em; }
.admin-section-title h2 { margin:.2rem 0 0; font-size:1.55rem; font-weight:800; }
.admin-section-title p { max-width:360px; margin:0; color:#6b7f95; }
.admin-tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.admin-tool-card { --tool:#0877d1; position:relative; display:flex; align-items:center; gap:1rem; min-height:126px; padding:1.25rem; color:#172c44; background:#fff; border:1px solid #dfe9f3; border-top:5px solid var(--tool); border-radius:1rem; box-shadow:0 .45rem 1.25rem rgba(27,58,94,.07); text-decoration:none; transition:transform .2s,box-shadow .2s,border-color .2s; }
.admin-tool-card:hover { color:#172c44; transform:translateY(-5px); box-shadow:0 1rem 2rem rgba(27,58,94,.15); border-color:var(--tool); }
.admin-tool-icon { width:48px; height:48px; display:grid; place-items:center; flex:0 0 48px; color:var(--tool); background:color-mix(in srgb,var(--tool) 13%,white); border-radius:14px; font-size:1.25rem; }
.admin-tool-copy { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.admin-tool-copy strong { font-size:1.03rem; }
.admin-tool-copy small { color:#6d7f92; line-height:1.4; }
.admin-tool-arrow { margin-left:auto; color:var(--tool); opacity:.6; }
.tool-blue{--tool:#0877d1}.tool-cyan{--tool:#0ea5c6}.tool-teal{--tool:#0f9f7f}.tool-indigo{--tool:#4f67d8}.tool-amber{--tool:#e59c00}.tool-coral{--tool:#ef6555}.tool-green{--tool:#22965f}.tool-violet{--tool:#8a46d4}.tool-slate{--tool:#53657a}
.theme-dark .admin-summary,.theme-dark .admin-tool-card { color:#e6f0fa; background:#102946; border-color:#274666; }
.theme-dark .admin-summary:hover,.theme-dark .admin-tool-card:hover { color:#fff; }
.theme-dark .admin-summary span,.theme-dark .admin-tool-copy small,.theme-dark .admin-section-title p { color:#afc2d7; }
.theme-dark .admin-summary > i { color:#244b72; }
.theme-dark .admin-tool-icon { background:#183b60; }
.theme-dark .learning-visual,.theme-dark .weekly-game-mission,.theme-dark .recommendation-card,.theme-dark .crossword-row,.theme-dark .metric-card { color:#e6f0fa!important;background:#102946!important;border-color:#274666!important; }
.theme-dark .learning-visual .fact-chip,.theme-dark .learning-visual .condition-grid>div,.theme-dark .learning-visual .symptom-list span,.theme-dark .impact-grid>div,.theme-dark .recommendation-card .bg-white { color:#e6f0fa!important;background:#173b60!important;border-color:#365a7c!important; }
.theme-dark .prevention-grid>div { color:#e6f0fa!important;background:#143c34!important;border-color:#2d6a5a!important; }.theme-dark .prevention-grid span{color:#b9d9cf!important}
.theme-dark .learning-visual span,.theme-dark .impact-grid span,.theme-dark .metric-card span { color:#b8c8da!important; }
.theme-dark .crossword-cell { color:#fff;background:#0d2139;border-color:#466a8c; }
html:has(body.theme-dark) { color-scheme:dark; scrollbar-color:#315678 #071426; }
html:has(body.theme-dark)::-webkit-scrollbar-track { background:#071426; }
html:has(body.theme-dark)::-webkit-scrollbar-thumb { background:#315678; border:2px solid #071426; }
html:has(body.theme-dark)::-webkit-scrollbar-corner { background:#071426; }
@media(max-width:991.98px){.admin-tool-grid{grid-template-columns:repeat(2,1fr)}.admin-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.admin-dashboard-head{padding:1.5rem}.admin-head-mark{display:none}.admin-tool-grid{grid-template-columns:1fr}.admin-section-title{display:block}.admin-section-title p{margin-top:.5rem}}
html,body { max-width:100%; overflow-x:hidden; }

/* EduMata V17 revision */
.screen-illustration-image,.eye-break-mascot,.hero-illustration img{object-fit:contain!important}
[data-quiz-question][hidden],[data-offline-team][hidden]{display:none!important}
.quiz-option input:checked + .card{border-color:#1671c5!important;background:#e7f3ff!important;color:#16324b!important}
body.dark-mode,body[data-theme="dark"]{background:#101f38!important;color:#eef4ff}
body:not(.theme-dark) .bg-light{color:#18314f}
:focus-visible{outline:3px solid #e59f00;outline-offset:3px}
@media print{canvas{max-width:100%!important}.student-report .card{break-inside:avoid}}

/* V18: one theme selector throughout the legacy application. */
body.theme-dark{background:#10213b!important;color:#edf4ff!important}
.theme-dark .text-dark,.theme-dark .card h1,.theme-dark .card h2,.theme-dark .card h3,.theme-dark .card h4,.theme-dark .card h5{color:#edf4ff!important}
.theme-dark .bg-white,.theme-dark .bg-light{background:#142b48!important;color:#edf4ff!important}
.theme-dark .quiz-option input:checked + .card{background:#234c73!important;color:#fff!important;border-color:#80c7ff!important}
.theme-dark .eye-break-card,.theme-dark .eye-break-card h2{background:#f4f8ed!important;color:#142b48!important}
.theme-dark .text-primary{color:#80c7ff!important}.theme-dark .text-success{color:#7ee0ae!important}.theme-dark .text-danger{color:#ffa1ab!important}
.screen-illustration-image{height:auto!important;max-height:310px;object-fit:contain!important}.eye-break-mascot{width:190px;height:145px;object-fit:contain;animation:mascotHello 3s ease-in-out infinite}
@keyframes mascotHello{50%{transform:translateY(-5px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){.eye-break-mascot{animation:none}}
.guide-chart{max-width:380px;width:100%;display:block;margin:1rem auto}.guide-panel{max-width:980px;margin:2rem auto;padding:1.5rem}.guide-panel li{margin-bottom:.65rem}
@media print{.navbar,footer,.d-print-none{display:none!important}.guide-panel{max-width:none;margin:0;padding:0}.card{break-inside:avoid}.guide-chart{max-height:330px;width:auto}body{background:white!important;color:#111!important}}
.theme-dark .custom-navbar .navbar-brand,.theme-dark .custom-navbar .nav-link{color:#dcecff!important}
.theme-dark .flow-step,.theme-dark .flow-step.active{color:#c5dfff!important}
.theme-dark .flow-step.completed{color:#94ecc0!important}
.theme-dark .btn-outline-primary{color:#a4d5ff;border-color:#79bdf5}
.theme-dark .btn-outline-success{color:#9aefc3;border-color:#73d4a1}
.theme-dark .btn-outline-danger{color:#ffb5bd;border-color:#fa8996}
.theme-dark .btn-outline-secondary{color:#d1dfef;border-color:#95aac2}
.theme-dark .btn-outline-primary:hover,.theme-dark .btn-outline-success:hover,.theme-dark .btn-outline-danger:hover,.theme-dark .btn-outline-secondary:hover{background:#27466b;color:#fff}
.theme-dark .team-card{color:#eaf3ff}
.theme-dark .screen-question legend{color:#edf4ff}

@media print{body.theme-dark,body.theme-dark #main-content,body.theme-dark .card,body.theme-dark .card-body,body.theme-dark .bg-white,body.theme-dark .bg-light{background:#fff!important;color:#111!important}body.theme-dark h1,body.theme-dark h2,body.theme-dark h3,body.theme-dark h4,body.theme-dark h5,body.theme-dark p,body.theme-dark .text-dark,body.theme-dark .text-muted{color:#111!important}}

/* V18.1: keep Bootstrap table interaction colors legible in dark mode. */
body.theme-dark .table {
 --bs-table-color:#edf4ff;
 --bs-table-hover-color:#ffffff;
 --bs-table-hover-bg:#203e60;
 --bs-table-striped-color:#edf4ff;
 --bs-table-striped-bg:#162f4e;
 --bs-table-active-color:#ffffff;
 --bs-table-active-bg:#284c73;
}
body.theme-dark .table-hover > tbody > tr:hover > *,
body.theme-dark .table > tbody > tr:focus-within > * {
 color:#ffffff!important;
 background-color:#203e60!important;
 --bs-table-color-state:#ffffff;
 --bs-table-bg-state:#203e60;
}
body.theme-dark .table-hover > tbody > tr:hover > * .text-muted,
body.theme-dark .table > tbody > tr:focus-within > * .text-muted {color:#d6e4f5!important}
@media print {
 body.theme-dark .table {--bs-table-color:#111;--bs-table-bg:#fff;--bs-table-hover-color:#111;--bs-table-hover-bg:#fff;--bs-table-striped-color:#111;--bs-table-striped-bg:#fff;--bs-table-active-color:#111;--bs-table-active-bg:#fff}
 body.theme-dark .table-hover > tbody > tr:hover > *,body.theme-dark .table > tbody > tr:focus-within > * {color:#111!important;background-color:#fff!important;--bs-table-color-state:#111;--bs-table-bg-state:#fff}
}