:root { --color-primary: #58cc02; --color-primary-dark: #46a302; --color-secondary: #1cb0f6; --color-warning: #ffc800; --color-danger: #ff4b4b; --color-bg: #ffffff; --color-bg-soft: #f7f9fb; --color-border: #e5e5e5; --color-text: #4b4b4b; --color-text-light: #8a8a8a; --color-heading: #1f1f1f; --radius: 14px; --radius-lg: 20px; --shadow: 0 4px 14px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --font: "Nunito", "Segoe UI", Arial, sans-serif; --page-hero-bg: #f0ffe6; --page-levelup-a: #f0ffe6; --page-levelup-b: #eafbe0; --nav-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, opacity 0.18s ease; --skeleton-a: #eaecf0; --skeleton-b: #f7f8fb; } /* ---- Dark theme overrides (only place where page-wide gradients are OK) -- */ html[data-theme="dark"] { --page-hero-bg: linear-gradient(180deg, #0f2c10 0%, #131720 100%); --page-levelup-a: #10301a; --page-levelup-b: #0f2716; --skeleton-a: #1c2130; --skeleton-b: #222a3d; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; opacity: 0; transform: translateY(2px); transition: opacity 0.15s ease-out, transform 0.15s ease-out; } /* Paint commit after first paint (or when scripts fail), flip on. The inline bootstrap in sets `data-page-ready="1"` on the HTML element once we know the theme + auth-hint state is applied so the fade-in is smooth, never sudden. */ html[data-page-ready="1"] body { opacity: 1; transform: none; } /* Respect reduced-motion preferences no fade-in on users who opt out. */ @media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } body { opacity: 1 !important; transform: none !important; transition: none !important; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .container { max-width: 1040px; margin: 0 auto; padding: 0 20px; } a { text-decoration: none; color: inherit; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 12px 24px; border-radius: 14px; font-family: var(--font); font-size: 15px; font-weight: 800; text-align: center; cursor: pointer; border: 2px solid transparent; transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn[hidden], .js-nav-login[hidden] { display: none; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 4px 0 var(--color-primary-dark); } .btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 4px 0 var(--color-primary-dark); } .btn-outline { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-border); box-shadow: 0 2px 0 var(--color-border); } .btn-outline:hover { background: var(--color-bg-soft); } .btn-danger { background: var(--color-danger); color: #fff; box-shadow: 0 4px 0 #c93b3b; } .btn-danger:hover { background: #d93b3b; box-shadow: 0 4px 0 #c93b3b; } .btn-lg { padding: 16px 32px; font-size: 17px; border-radius: 16px; } /* ---------- Navbar ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 2px solid var(--color-bg-soft); will-change: transform; } .nav-inner { max-width: 1040px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; /* Opacity guard prevents a brief "everything visible" flash while the auth hint is being read the underlying HTML still has everything marked `hidden` for non-JS users, but we layer opacity so the paint is clean. */ opacity: 1; transition: opacity 0.25s ease-out; } .brand { display: flex; align-items: center; gap: 10px; } .brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 20px; font-weight: 900; } .brand-name { font-size: 22px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; /* Guarantee no FOUT width jump before Nunito loads slightly wider than the fallback "Segoe UI" at this weight. */ min-width: 6ch; } .nav-links { display: flex; gap: 24px; } .nav-link { font-weight: 700; color: var(--color-text); padding: 6px 0; border-bottom: 3px solid transparent; transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .nav-link:hover { color: var(--color-primary); } .nav-actions { display: flex; gap: 12px; align-items: center; min-width: 0; } /* Batched visibility toggles for navbar slots (all use `display:none` instead of relying on [hidden] so dropdown-item CSS selectors can't override the intent). nav.js already sets both these rules lock it in. */ .profile-menu[hidden], .js-nav-login[hidden], .js-auth-cta[hidden], .js-nav-dashboard[hidden], #login-btn[hidden], #signup-btn[hidden] { display: none !important; } /* ---------- Avatar profile dropdown ---------- */ .profile-menu[hidden] { display: none; } .profile-menu { position: relative; display: inline-flex; } .profile-avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-border); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; font-family: var(--font); font-size: 17px; font-weight: 900; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .profile-avatar-btn:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-1px); } .profile-dropdown[hidden] { display: none !important; } .profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; z-index: 150; animation: pop-in 0.15s ease; } .profile-dropdown-name { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 14px; font-weight: 900; color: var(--color-heading); border-bottom: 2px solid var(--color-bg-soft); margin-bottom: 6px; overflow-wrap: anywhere; } .profile-dropdown-level { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 2px solid var(--color-bg-soft); margin-bottom: 6px; } .profile-dropdown-level-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 2px 8px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 900; } .profile-dropdown-xp { font-size: 13px; font-weight: 800; color: var(--color-text-light); } .profile-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: 10px; font-family: var(--font); font-size: 14px; font-weight: 800; color: var(--color-text); cursor: pointer; text-align: left; transition: background 0.15s ease, color 0.15s ease; } .profile-dropdown-item:hover { background: var(--color-bg-soft); color: var(--color-primary-dark); } .profile-dropdown-item.is-danger { color: var(--color-danger); } .profile-dropdown-item.is-danger:hover { background: #fff2f0; color: var(--color-danger); } /* ---------- Player chip ---------- */ .nav-player[hidden] { display: none; } .nav-player { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 2px solid var(--color-border); border-radius: 999px; background: var(--color-bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .nav-player:hover { border-color: var(--color-primary); box-shadow: var(--shadow); } .nav-level { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 900; } .nav-player-xp { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 800; color: var(--color-heading); } .nav-xp-bar { display: block; width: 90px; height: 6px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; } .nav-xp-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-warning); transition: width 0.4s ease; } /* ---------- XP bar (shared) ---------- */ .xp-bar { height: 10px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; border: 1px solid var(--color-border); } .xp-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary) 0%, #8ae64e 100%); transition: width 0.4s ease; } /* ---------- Level-up banner ---------- */ .level-up-banner[hidden] { display: none; } .level-up-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 18px; border-radius: var(--radius); border: 2px solid #b7e49a; background: linear-gradient(90deg, var(--page-levelup-a) 0%, var(--page-levelup-b) 100%); color: var(--color-primary-dark); font-weight: 800; font-size: 15px; animation: pop-in 0.4s ease; } .level-up-icon { font-size: 22px; } @keyframes pop-in { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* ---------- Course card progress ---------- */ .course-progress-block { margin-top: 14px; text-align: left; } .course-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .course-level-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 800; } .course-progress-meta { font-size: 12px; font-weight: 800; color: var(--color-text-light); } /* ---------- Lesson sidebar course XP ---------- */ .course-xp-block { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--color-bg-soft); } .course-xp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .course-level-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--color-warning); color: #fff; font-size: 12px; font-weight: 800; } .course-xp-meta { font-size: 12px; font-weight: 800; color: var(--color-text-light); } /* ---------- Hero ---------- */ .hero { background: var(--page-hero-bg); padding: 64px 0 40px; /* Stay off the compositor path no repaint jank when scrolling the hero banner below the sticky nav. */ isolation: isolate; } .hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } .hero-title { font-size: 48px; font-weight: 900; color: var(--color-heading); line-height: 1.15; letter-spacing: -1px; margin-bottom: 20px; } .hero-subtitle { font-size: 19px; color: var(--color-text); max-width: 460px; margin-bottom: 28px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero-art { display: flex; justify-content: center; } .art-card { background: var(--color-heading); color: #d7f7a4; border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 380px; font-family: "Consolas", "Courier New", monospace; font-size: 15px; line-height: 2; box-shadow: var(--shadow-lg); } .art-code { display: block; } .art-success { color: #8ae64e; } /* ---------- Stats ---------- */ .stats { padding: 32px 0; border-bottom: 2px solid var(--color-bg-soft); } .stats-inner { display: flex; justify-content: space-around; text-align: center; gap: 16px; flex-wrap: wrap; } .stat-value { display: block; font-size: 34px; font-weight: 900; color: var(--color-primary); } .stat-label { color: var(--color-text-light); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } /* ---------- Sections ---------- */ section { padding: 64px 0; } .section-title { font-size: 34px; font-weight: 900; color: var(--color-heading); text-align: center; margin-bottom: 12px; letter-spacing: -0.5px; } .section-subtitle { text-align: center; color: var(--color-text-light); font-size: 17px; margin-bottom: 40px; } /* ---------- Courses ---------- */ .courses { background: var(--color-bg); padding: 40px 0 72px; } /* Compact horizontal course cards that scale without growing bulky. */ .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .course-card { display: flex; align-items: center; gap: 18px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; cursor: pointer; } .course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .course-card-empty { opacity: 0.7; cursor: default; } .course-card-empty:hover { transform: none; box-shadow: none; border-color: var(--color-border); } .course-card-no-results { flex-direction: column; text-align: center; padding: 40px 24px; grid-column: 1 / -1; } .course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .course-meta-line { font-size: 13px; font-weight: 800; color: var(--color-text-light); margin-top: 4px; } .course-inline-bar { margin-top: 6px; } /* Search toolbar + show-all controls */ .course-toolbar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; } .course-search { position: relative; flex: 1; max-width: 360px; } .course-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-light); font-size: 16px; pointer-events: none; } .course-search input { width: 100%; padding: 11px 16px 11px 40px; border: 2px solid var(--color-border); border-radius: 999px; background: var(--color-bg-soft); color: var(--color-text); font-family: var(--font); font-size: 15px; font-weight: 600; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .course-search input:focus { outline: none; border-color: var(--color-primary); background: var(--color-bg); box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.12); } .course-count { color: var(--color-text-light); font-size: 14px; font-weight: 800; white-space: nowrap; } .course-more { text-align: center; margin-top: 24px; } /* Continue-learning strip (shown to logged-in users with progress) */ .continue-learning { margin-bottom: 28px; } .continue-title { font-size: 18px; font-weight: 900; color: var(--color-heading); margin-bottom: 14px; } .continue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .continue-item { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; cursor: pointer; } .continue-item:hover { transform: translateY(-3px); border-color: var(--color-primary); background: var(--color-bg); } .continue-item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-light); font-size: 22px; font-weight: 700; } .continue-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .continue-item-name { font-size: 16px; font-weight: 900; color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .continue-item-meta { font-size: 13px; font-weight: 700; color: var(--color-text-light); } .continue-item-bar { margin-top: 2px; } .continue-item-arrow { flex-shrink: 0; color: var(--color-text-light); font-size: 20px; font-weight: 900; } /* Skeleton loading states (shimmer placeholders shown while data loads) */ .skeleton-block, .skeleton-line { background: linear-gradient(90deg, var(--color-bg-soft) 25%, var(--color-border) 50%, var(--color-bg-soft) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 8px; } .skeleton-line { height: 14px; margin: 10px auto; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .course-card-skeleton { cursor: default; } .course-card-skeleton:hover { transform: none; box-shadow: none; border-color: var(--color-border); } .course-card-skeleton .course-icon { background: transparent; } .quest-item-skeleton { height: 54px; border-radius: var(--radius-lg); } .quest-list.is-loading { min-height: 120px; } /* Shared skeleton shimmer pure CSS, runs on the compositor thread so it doesn't block paint while content loads. */ @keyframes skeleton-shimmer { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } .stat-value.is-loading { display: inline-block; min-width: 34px; height: 1.2em; border-radius: 6px; color: transparent; background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 50%, var(--skeleton-a) 100%); background-size: 180% 100%; background-repeat: no-repeat; animation: skeleton-shimmer 1.35s ease-in-out infinite; /* Skip the GPU if the user opted out of motion. */ } @media (prefers-reduced-motion: reduce) { .stat-value.is-loading { animation: none; background-image: none; background: var(--skeleton-a); } } .course-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--color-bg-soft); color: var(--color-text-light); font-size: 32px; font-weight: 700; } .course-name { font-size: 19px; font-weight: 900; color: var(--color-heading); margin-bottom: 2px; } .course-desc { font-size: 14px; color: var(--color-text-light); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .course-lessons { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--color-bg-soft); color: var(--color-primary-dark); font-size: 13px; font-weight: 800; } /* ---------- Features ---------- */ .features { background: var(--color-bg-soft); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .feature-card { background: var(--color-bg); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; box-shadow: var(--shadow); /* Skip layout and paint of cards below the fold until they get close to the viewport shaves ~20-30ms off initial paint on low-end devices. */ content-visibility: auto; contain-intrinsic-size: 280px; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--color-bg-soft); font-size: 26px; } .feature-title { font-size: 18px; font-weight: 900; color: var(--color-heading); margin-bottom: 8px; } .feature-text { font-size: 15px; color: var(--color-text); } /* ---------- About ---------- */ .about-inner { max-width: 680px; } .about-text { text-align: center; font-size: 18px; color: var(--color-text); } /* ---------- Footer ---------- */ .footer { background: var(--color-heading); color: #fff; padding: 32px 0; } .footer-inner { text-align: center; } .footer-brand { font-size: 20px; font-weight: 900; color: var(--color-primary); } .footer-text { font-size: 14px; color: #b0b0b0; margin-top: 4px; } .footer-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; } .footer-links a { font-size: 13px; font-weight: 800; color: #cfcfcf; text-decoration: none; position: relative; transition: color 0.15s ease; } .footer-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .footer-links a:hover { color: #ffffff; } .footer-links a:hover::after { transform: scaleX(1); } /* ---------- Legal & policy pages ---------- */ .legal { padding: 48px 0 72px; background: linear-gradient(180deg, #eafbe0 0%, var(--color-bg) 260px); } .legal-inner { max-width: 820px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px 44px; } .legal-title { font-size: 38px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; text-align: center; } .legal-subtitle { font-size: 14px; color: var(--color-text-light); text-align: center; margin: 8px 0 4px; padding-bottom: 24px; border-bottom: 2px solid var(--color-border); } .legal-heading { font-size: 18px; font-weight: 900; color: var(--color-heading); margin: 28px 0 10px; padding-left: 14px; border-left: 4px solid var(--color-primary); } .legal-paragraph { font-size: 15px; line-height: 1.75; color: var(--color-text); margin-bottom: 12px; } .legal-list { margin: 0 0 16px 26px; } .legal-list li { font-size: 15px; line-height: 1.7; color: var(--color-text); margin-bottom: 8px; padding-left: 4px; } .legal-note { background: var(--color-bg); border: 2px solid var(--color-border); border-left: 6px solid var(--color-primary); border-radius: var(--radius); padding: 18px 20px; margin: 24px 0; font-size: 15px; font-weight: 600; line-height: 1.7; color: var(--color-heading); } .legal-note strong { color: var(--color-heading); font-weight: 900; } .legal-inner a:not(.btn) { color: var(--color-primary-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } .legal-inner a:not(.btn):hover { color: var(--color-primary); } /* ---------- Pricing page ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 28px 0 12px; } .pricing-card { position: relative; border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 22px 24px; background: var(--color-bg-soft); text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .pricing-card:hover { transform: translateY(-3px); } .pricing-card.is-featured { border-color: var(--color-primary); background: var(--color-bg); box-shadow: var(--shadow-lg); } .pricing-popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #ffffff; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; white-space: nowrap; } .pricing-name { font-size: 19px; font-weight: 900; color: var(--color-heading); } .pricing-price { font-size: 44px; font-weight: 900; color: var(--color-heading); margin: 12px 0 2px; } .pricing-price .pricing-currency { font-size: 26px; vertical-align: 10px; color: var(--color-text-light); } .pricing-per { font-size: 13px; color: var(--color-text-light); margin-bottom: 6px; } .pricing-features { list-style: none; padding: 0; margin: 18px 0 20px; text-align: left; } .pricing-features li { position: relative; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--color-heading); padding: 7px 0 7px 26px; border-bottom: 1px dashed var(--color-border); } .pricing-features li:last-child { border-bottom: none; } .pricing-features li::before { content: "\2713"; position: absolute; left: 0; top: 7px; color: var(--color-primary); font-weight: 900; } .pricing-cta { margin-top: 4px; } /* ---------- Checkout status (Razorpay) ---------- */ .checkout-status { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--radius); font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--color-heading); background: var(--color-bg); border: 2px solid var(--color-border); } .checkout-status.is-success { border-color: var(--color-primary); } .checkout-status.is-error { border-color: var(--color-danger); color: var(--color-danger); } /* ---------- Auth ---------- */ .auth-main { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 48px 20px; background: linear-gradient(180deg, #eafbe0 0%, #ffffff 100%); } .auth-card { width: 100%; max-width: 420px; background: var(--color-bg); border-radius: var(--radius-lg); border: 2px solid var(--color-border); box-shadow: var(--shadow-lg); padding: 40px 36px; } .auth-title { font-size: 28px; font-weight: 900; color: var(--color-heading); text-align: center; letter-spacing: -0.5px; } .auth-subtitle { text-align: center; color: var(--color-text-light); font-size: 15px; margin: 6px 0 24px; } .field { margin-bottom: 18px; } .field-label { display: block; font-size: 14px; font-weight: 800; color: var(--color-heading); margin-bottom: 6px; } .field-input { width: 100%; padding: 12px 14px; border: 2px solid var(--color-border); border-radius: 12px; font-family: var(--font); font-size: 15px; color: var(--color-heading); background: var(--color-bg); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.15); } .field-hint { font-size: 12px; color: var(--color-text-light); margin-top: 5px; } .field-error { background: #fff2f0; color: var(--color-danger); border: 2px solid #ffd2cf; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 700; margin-bottom: 18px; } .field-error.is-success { background: #f0ffe6; color: var(--color-primary-dark); border-color: #b7e49a; } .btn-block { display: block; width: 100%; } .auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-text); } .auth-switch a { color: var(--color-primary-dark); font-weight: 800; } .auth-switch a:hover { text-decoration: underline; } /* ---------- Lesson page ---------- */ .lesson-main { min-height: calc(100vh - 120px); background: var(--color-bg-soft); padding: 32px 0 64px; } .lesson-layout[hidden] { display: none; } .lesson-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 20px; color: var(--color-text); font-weight: 800; } .lesson-loading[hidden] { display: none; } .lesson-loading-spinner { width: 40px; height: 40px; border: 4px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .lesson-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } .lesson-sidebar { position: sticky; top: 88px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .lesson-sidebar-head { padding: 16px 20px; border-bottom: 2px solid var(--color-bg-soft); background: linear-gradient(135deg, #eafbe0 0%, #ffffff 100%); } .lesson-course-name { font-size: 20px; font-weight: 900; color: var(--color-heading); } .lesson-course-progress { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--color-primary-dark); } .lesson-list { list-style: none; max-height: calc(100vh - 220px); overflow-y: auto; padding: 8px; } .lesson-section-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; padding: 10px 12px; border-radius: 10px; border-top: 3px solid var(--color-primary); background: #f0ffe6; color: var(--color-primary-dark); font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .lesson-section-divider:first-child { margin-top: 4px; border-top: none; } .lesson-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background 0.15s ease; } .lesson-item:hover { background: var(--color-bg-soft); } .lesson-item.is-active { background: #eafbe0; } .lesson-item.is-done .lesson-item-name { color: var(--color-text-light); text-decoration: line-through; } .lesson-item-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-soft); color: var(--color-text); font-size: 13px; font-weight: 800; } .lesson-item.is-done .lesson-item-num { background: var(--color-primary); color: #fff; } .lesson-item.is-active .lesson-item-num { background: var(--color-primary); color: #fff; } .lesson-item-name { font-size: 14px; font-weight: 700; color: var(--color-heading); } .lesson-content { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px 40px; max-width: 760px; } .lesson-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .lesson-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--color-bg-soft); color: var(--color-text); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; } .lesson-xp { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fff8dc; color: var(--color-warning); font-size: 12px; font-weight: 800; } .lesson-title { font-size: 34px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; margin-bottom: 24px; } .lesson-body { font-size: 16px; line-height: 1.75; color: var(--color-text); } .lesson-body h2 { font-size: 24px; font-weight: 900; color: var(--color-heading); margin: 32px 0 12px; } .lesson-body h3 { font-size: 19px; font-weight: 900; color: var(--color-heading); margin: 24px 0 10px; } .lesson-body p { margin-bottom: 14px; } .lesson-body ul, .lesson-body ol { margin: 0 0 14px 24px; } .lesson-body li { margin-bottom: 6px; } .lesson-body strong { color: var(--color-heading); } .lesson-body code { font-family: "Consolas", "Courier New", monospace; font-size: 0.9em; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 6px; color: #c7254e; } .code-block { position: relative; background: var(--color-heading); color: #d7f7a4; border-radius: 12px; padding: 18px 20px; margin: 16px 0 20px; overflow-x: auto; } .code-block code { font-family: "Consolas", "Courier New", monospace; font-size: 14px; line-height: 1.6; background: transparent; border: none; padding: 0; color: inherit; } .code-block[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #8ae64e; opacity: 0.8; } /* Embedded Strudel REPL (runnable music code) */ .strudel-repl { display: block; width: 100%; border-radius: 12px; margin: 16px 0 20px; overflow: hidden; background: #1a1a2e; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .strudel-repl::before { content: "\25B6 Strudel - edit the code, then press play"; display: block; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #9aa0b5; background: #22223a; border-bottom: 1px solid #33334f; } .strudel-repl iframe { display: block; width: 100%; max-width: 100%; border: none; min-height: 300px; } .strudel-repl .strudel-play { display: inline-flex; align-items: center; gap: 6px; margin: 12px 14px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #fff; background: #58cc02; border: none; border-radius: 8px; cursor: pointer; } .strudel-repl .strudel-play:hover { background: #4bb301; } .strudel-repl .strudel-play:disabled { opacity: 0.6; cursor: default; } .dark .strudel-repl, [data-theme="dark"] .strudel-repl { background: #16162a; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .lesson-body hr { border: none; border-top: 2px solid var(--color-border); margin: 24px 0; } .lesson-body blockquote { border-left: 4px solid var(--color-primary); background: var(--color-bg-soft); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 0 0 14px; } .table-wrap { overflow-x: auto; margin: 16px 0 20px; } .lesson-body table { width: 100%; border-collapse: collapse; font-size: 14px; } .lesson-body th, .lesson-body td { border: 2px solid var(--color-border); padding: 10px 14px; text-align: left; } .lesson-body th { background: var(--color-bg-soft); font-weight: 900; color: var(--color-heading); } .lesson-body td code { white-space: nowrap; } /* ---------- Quiz ---------- */ .lesson-quiz:empty { display: none; } .lesson-quiz { margin-top: 40px; border-top: 2px dashed var(--color-border); padding-top: 28px; } .quiz-heading { font-size: 24px; font-weight: 900; color: var(--color-heading); margin-bottom: 20px; } .quiz-card { border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 20px; } .quiz-num { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-light); margin-bottom: 8px; } .quiz-prompt { font-size: 17px; font-weight: 800; color: var(--color-heading); margin-bottom: 14px; } .quiz-option { display: block; width: 100%; text-align: left; padding: 12px 16px; margin-bottom: 10px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-bg); font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--color-heading); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .quiz-option:hover { border-color: var(--color-primary); transform: translateY(-1px); } .quiz-option.is-correct { border-color: var(--color-primary); background: #f0ffe6; color: var(--color-primary-dark); } .quiz-option.is-wrong { border-color: var(--color-danger); background: #fff2f0; color: var(--color-danger); } .quiz-option:disabled { cursor: default; opacity: 1; } .quiz-option:disabled:hover { transform: none; } .quiz-feedback { margin-top: 10px; font-size: 14px; font-weight: 800; } .quiz-feedback.is-correct { color: var(--color-primary-dark); } .quiz-feedback.is-wrong { color: var(--color-danger); } .quiz-explanation { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--color-text); } .quiz-done { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--color-primary-dark); } .btn-sm { padding: 8px 16px; font-size: 14px; } .quiz-fill-row { display: flex; gap: 10px; align-items: center; } .quiz-input { flex: 1; min-width: 0; padding: 11px 14px; border: 2px solid var(--color-border); border-radius: 12px; font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--color-heading); background: var(--color-bg); outline: none; transition: border-color 0.15s ease; } .quiz-input:focus { border-color: var(--color-primary); } .quiz-input.is-correct { border-color: var(--color-primary); background: #f0ffe6; } .quiz-input.is-wrong { border-color: var(--color-danger); background: #fff2f0; } .match-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .match-col { display: flex; flex-direction: column; gap: 8px; } .match-item { text-align: left; padding: 11px 14px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-bg); font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--color-heading); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .match-item:hover { border-color: var(--color-primary); } .match-item.is-selected { border-color: var(--color-primary); background: #eef6ff; } .match-item.is-correct.is-matched { border-color: var(--color-primary); background: #f0ffe6; color: var(--color-primary-dark); cursor: default; } .match-item.is-wrong { border-color: var(--color-danger); background: #fff2f0; color: var(--color-danger); } .order-pick { min-height: 48px; border: 2px dashed var(--color-border); border-radius: 12px; padding: 10px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; } .order-hint { font-size: 13px; font-weight: 700; color: var(--color-text-light); margin: auto; } .order-pool { display: flex; flex-wrap: wrap; gap: 8px; } .order-chip { padding: 8px 14px; border: 2px solid var(--color-border); border-radius: 20px; background: var(--color-bg); font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--color-heading); cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; } .order-chip:hover { border-color: var(--color-primary); transform: translateY(-1px); } .order-chip-picked { border-color: var(--color-primary); background: #f0ffe6; color: var(--color-primary-dark); cursor: pointer; } .order-chip:disabled { cursor: default; opacity: 1; } /* ---------- Modal ---------- */ body.has-modal { overflow: hidden; } .modal-backdrop[hidden] { display: none; } .modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.45); animation: fade-in 0.2s ease; } .modal-card { width: 100%; max-width: 400px; background: var(--color-bg); border-radius: var(--radius-lg); border: 2px solid var(--color-border); box-shadow: var(--shadow-lg); padding: 32px 28px; text-align: center; animation: pop-in 0.3s ease; } .modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: #fff8dc; font-size: 30px; } .modal-title { font-size: 22px; font-weight: 900; color: var(--color-heading); margin-bottom: 8px; } .modal-text { font-size: 15px; color: var(--color-text); margin-bottom: 20px; } .modal-actions { display: flex; flex-direction: column; gap: 10px; } .modal-link { background: none; border: none; font-family: var(--font); font-size: 14px; font-weight: 800; color: var(--color-text-light); cursor: pointer; padding: 8px; } .modal-link:hover { color: var(--color-primary-dark); text-decoration: underline; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- Lesson nav ---------- */ .lesson-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--color-border); } .lesson-nav-side { display: flex; gap: 12px; } .complete-hint { display: inline-block; font-size: 13px; font-weight: 700; color: var(--color-text-light); align-self: center; } .complete-hint[hidden] { display: none; } .btn.is-disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* ---------- Profile page ---------- */ .profile-main { min-height: calc(100vh - 120px); background: var(--color-bg-soft); padding: 40px 0 72px; } .profile-layout[hidden], .profile-missing[hidden] { display: none; } .profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; } .profile-content { display: grid; gap: 32px; } /* --- Profile identity card --- */ .profile-card { position: sticky; top: 88px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 28px 32px; text-align: center; } .profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; font-size: 42px; font-weight: 900; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--color-border); } .profile-username { font-size: 25px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; overflow-wrap: anywhere; } .profile-name-row { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } /* ---------- Premium badge ---------- */ .premium-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%); color: #5a4300; font-size: 12px; font-weight: 900; letter-spacing: 0.2px; white-space: nowrap; box-shadow: 0 1px 3px rgba(255, 150, 0, 0.35); } .premium-badge-sm { padding: 1px 8px; font-size: 11px; } .profile-fullname { font-size: 15px; font-weight: 700; color: var(--color-text); margin-top: 4px; } .profile-since { font-size: 13px; font-weight: 700; color: var(--color-text-light); margin-top: 4px; } .profile-level-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 5px 16px; border-radius: 999px; background: var(--color-bg-soft); border: 1px solid var(--color-border); color: var(--color-primary-dark); font-size: 13px; font-weight: 800; } .profile-level-progress { margin-top: 20px; text-align: left; } .profile-level-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .profile-level-progress-label { font-size: 12px; font-weight: 800; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; } .profile-level-progress-meta { font-size: 12px; font-weight: 800; color: var(--color-primary-dark); } /* --- Stats row --- */ .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; } .profile-stat { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px 12px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .profile-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-primary); } .profile-stat-value { display: block; font-size: 30px; font-weight: 900; color: var(--color-heading); line-height: 1.1; letter-spacing: -0.5px; } .profile-stat-label { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.6px; } /* --- Course progress --- */ .profile-courses { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; } .profile-courses .section-title { font-size: 22px; text-align: left; margin-bottom: 4px; } .profile-courses-sub { color: var(--color-text-light); font-size: 14px; margin-bottom: 24px; } .profile-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; } .profile-course-grid .course-card { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 26px 20px; background: var(--color-bg-soft); border: 1px solid var(--color-border); } .profile-course-grid .course-card:hover { border-color: var(--color-primary); background: var(--color-bg); } .profile-course-grid .course-icon { width: 64px; height: 64px; font-size: 32px; background: var(--color-bg); border: 1px solid var(--color-border); } .profile-course-grid .course-name { font-size: 18px; } .profile-course-grid .course-desc { font-size: 13px; } .profile-course-grid .course-card .course-progress-block { width: 100%; margin-top: auto; padding-top: 16px; } .profile-course-grid .course-card-empty { opacity: 0.55; background: var(--color-bg); border-style: dashed; cursor: default; transform: none; box-shadow: none; } .profile-course-grid .course-card-empty:hover { background: var(--color-bg); border-color: var(--color-border); transform: none; box-shadow: none; } .profile-course-grid .profile-course-card-placeholder .course-icon { background: var(--color-bg-soft); border: 1px solid var(--color-border); } .profile-missing { text-align: center; padding: 80px 20px; } .profile-missing-title { font-size: 34px; font-weight: 900; color: var(--color-heading); margin-bottom: 10px; } .profile-missing-text { font-size: 16px; color: var(--color-text-light); margin-bottom: 24px; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .profile-layout { grid-template-columns: 1fr; } .profile-card { position: static; } .profile-stats { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .hero-inner { grid-template-columns: 1fr; gap: 32px; } .hero-title { font-size: 36px; } .nav-links { display: none; } .nav-actions .btn-outline { display: none; } .lesson-layout { grid-template-columns: 1fr; } .profile-stats { grid-template-columns: repeat(2, 1fr); } .lesson-sidebar { position: static; } .lesson-list { max-height: 260px; } .lesson-content { padding: 24px 20px; } .match-wrap { grid-template-columns: 1fr; } .quiz-fill-row { flex-direction: column; align-items: stretch; } } /* ---------- Today dashboard (home) ---------- */ .today { background: var(--color-bg); padding: 40px 0 64px; } .today[hidden] { display: none; } .today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .today-card { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow); } .daily-goal-card { text-align: center; } .goal-ring-wrap { display: flex; justify-content: center; margin-bottom: 12px; } .goal-ring { width: 150px; height: 150px; } .goal-ring-track { fill: none; stroke: var(--color-bg-soft); stroke-width: 12; } .goal-ring-fill { fill: none; stroke: var(--color-primary); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; } .goal-ring-text { font-family: var(--font); font-size: 17px; font-weight: 900; fill: var(--color-heading); text-anchor: middle; } .goal-ring-label { font-family: var(--font); font-size: 11px; font-weight: 800; fill: var(--color-text-light); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.5px; } .today-card-title { font-size: 18px; font-weight: 900; color: var(--color-heading); margin-bottom: 6px; } .today-card-text { font-size: 14px; color: var(--color-text-light); margin-bottom: 14px; } .today-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 50%; background: var(--color-bg-soft); font-size: 24px; } /* --- Quests --- */ .quest-list { display: flex; flex-direction: column; gap: 16px; } .quest-item { padding-bottom: 14px; border-bottom: 2px solid var(--color-bg-soft); } .quest-item:last-child { border-bottom: none; padding-bottom: 0; } .quest-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .quest-item-title { font-size: 14px; font-weight: 800; color: var(--color-heading); } .quest-item-reward { font-size: 12px; font-weight: 900; color: var(--color-primary-dark); white-space: nowrap; } .quest-item-bar-wrap { margin-top: 8px; } .quest-item-bar { height: 8px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; } .quest-item-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-warning); transition: width 0.4s ease; } .quest-item-meta { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--color-text-light); } .quest-claim { margin-top: 10px; } .quest-claimed { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--color-primary-dark); } .quest-item.is-done .quest-item-title { color: var(--color-primary-dark); } /* ---------- Lesson locking & practice ---------- */ .lesson-item.is-locked { opacity: 0.6; cursor: not-allowed; } .lesson-item.is-locked:hover { background: transparent; } .lesson-item.is-locked .lesson-item-name { color: var(--color-text-light); } .lesson-item.is-locked .lesson-item-num { font-size: 12px; } .lesson-practice { padding: 12px; border-top: 2px solid var(--color-bg-soft); } .lesson-practice-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff8dc; transition: background 0.15s ease; } .lesson-practice-link:hover { background: #fff3c0; } .lesson-practice-icon { font-size: 20px; } .lesson-practice-text { display: flex; flex-direction: column; } .lesson-practice-title { font-size: 14px; font-weight: 900; color: var(--color-heading); } .lesson-practice-sub { font-size: 12px; font-weight: 700; color: var(--color-text-light); } /* --- Achievement banner (lesson page) --- */ .achievement-banner { border-color: #f0dfa0; background: linear-gradient(90deg, #fff8dc 0%, #fff3c0 100%); color: #8a6d00; } /* ---------- Review page ---------- */ .review-main { min-height: calc(100vh - 120px); background: var(--color-bg-soft); padding: 32px 0 64px; } .review-layout[hidden], .review-empty[hidden], .review-done[hidden] { display: none; } .review-layout { max-width: 760px; margin: 0 auto; } .review-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .review-icon { font-size: 40px; } .review-title { font-size: 30px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; } .review-subtitle { font-size: 15px; color: var(--color-text-light); } .review-content { max-width: none; } .review-progress { font-size: 13px; font-weight: 800; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .review-lesson-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .review-lesson-title { font-size: 26px; font-weight: 900; color: var(--color-heading); margin-bottom: 16px; } .review-done { text-align: center; padding: 60px 20px; } .review-done-icon { font-size: 56px; } .review-done-title { font-size: 28px; font-weight: 900; color: var(--color-heading); margin: 16px 0 8px; } .review-done-text { font-size: 16px; color: var(--color-text); margin-bottom: 24px; } .review-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .review-empty { text-align: center; padding: 80px 20px; } .review-empty-icon { font-size: 56px; } .review-empty-title { font-size: 30px; font-weight: 900; color: var(--color-heading); margin: 16px 0 8px; } .review-empty-text { font-size: 16px; color: var(--color-text-light); max-width: 460px; margin: 0 auto 24px; } /* ---------- Leaderboard ---------- */ .leaderboard-main { min-height: calc(100vh - 120px); background: var(--color-bg-soft); padding: 32px 0 64px; } .leaderboard-layout[hidden] { display: none; } .leaderboard-layout { max-width: 760px; margin: 0 auto; } .leaderboard-hero { text-align: center; margin-bottom: 24px; } .leaderboard-hero-icon { font-size: 52px; } .leaderboard-title { font-size: 32px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; } .leaderboard-week { color: var(--color-text-light); font-size: 15px; font-weight: 700; } .leaderboard-me { display: flex; align-items: center; gap: 14px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 28px; box-shadow: var(--shadow); } .leaderboard-me-icon { font-size: 30px; } .leaderboard-me-copy { display: flex; flex-direction: column; flex: 1; } .leaderboard-me-league { font-size: 17px; font-weight: 900; color: var(--color-heading); } .leaderboard-me-rank { font-size: 13px; font-weight: 800; color: var(--color-primary-dark); } .leaderboard-me-xp { font-size: 14px; font-weight: 800; color: var(--color-text-light); white-space: nowrap; } .leaderboard-groups { display: flex; flex-direction: column; gap: 28px; } .lb-league { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .lb-league-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 2px solid var(--color-bg-soft); background: linear-gradient(135deg, #eafbe0 0%, #ffffff 100%); } .lb-league-icon { font-size: 24px; } .lb-league-name { font-size: 17px; font-weight: 900; color: var(--color-heading); } .lb-list { padding: 8px; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; } .lb-row:hover { background: var(--color-bg-soft); } .lb-row.is-me { background: #eafbe0; } .lb-rank { flex: 0 0 40px; font-size: 14px; font-weight: 900; color: var(--color-text-light); } .lb-rank.is-top { color: var(--color-warning); } .lb-name { flex: 1; font-size: 15px; font-weight: 800; color: var(--color-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-meta { display: flex; gap: 12px; align-items: center; white-space: nowrap; } .lb-xp { font-size: 13px; font-weight: 900; color: var(--color-primary-dark); } .lb-streak { font-size: 13px; font-weight: 700; color: var(--color-text-light); } .lb-empty { text-align: center; color: var(--color-text-light); font-weight: 700; padding: 40px 20px; } /* ---------- Profile: league + achievements ---------- */ .profile-league { display: flex; align-items: center; gap: 14px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: var(--shadow); transition: border-color 0.15s ease, transform 0.15s ease; } .profile-league:hover { border-color: var(--color-primary); transform: translateY(-2px); } .profile-league-icon { font-size: 30px; } .profile-league-copy { display: flex; flex-direction: column; flex: 1; } .profile-league-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-light); } .profile-league-text { font-size: 16px; font-weight: 900; color: var(--color-heading); } .profile-league-arrow { font-size: 20px; color: var(--color-primary); } .profile-achievements { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; } .profile-achievements .section-title { font-size: 22px; text-align: left; margin-bottom: 4px; } .achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .achievement { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 12px; border: 2px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-soft); } .achievement.is-earned { background: #f0ffe6; border-color: #b7e49a; } .achievement-icon { font-size: 32px; } .achievement:not(.is-earned) .achievement-icon { opacity: 0.5; } .achievement-name { font-size: 14px; font-weight: 900; color: var(--color-heading); } .achievement-desc { font-size: 12px; color: var(--color-text-light); line-height: 1.4; } .achievement:not(.is-earned) .achievement-name, .achievement:not(.is-earned) .achievement-desc { opacity: 0.6; } .achievement-count { grid-column: 1 / -1; text-align: center; font-size: 13px; font-weight: 800; color: var(--color-primary-dark); margin-top: 8px; } /* --- XP analytics --- */ .profile-analytics { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; } .profile-analytics .section-title { font-size: 22px; text-align: left; margin-bottom: 4px; } .analytics-chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; margin: 20px 0 24px; padding: 0 4px; border-bottom: 2px solid var(--color-bg-soft); } .analytics-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; } .analytics-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; min-height: 0; } .analytics-bar-value { font-size: 11px; font-weight: 800; color: var(--color-text-light); margin-bottom: 2px; } .analytics-bar { width: 100%; max-width: 40px; min-height: 4px; border-radius: 6px 6px 0 0; background: var(--color-bg-soft); transition: height 0.4s ease; } .analytics-bar.has-xp { background: var(--color-primary); } .analytics-col-label { font-size: 11px; font-weight: 800; color: var(--color-text-light); text-transform: uppercase; } .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; } .analytics-stat { background: var(--color-bg-soft); border-radius: var(--radius); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .analytics-stat .profile-stat-value { font-size: 20px; } /* --- Missed questions --- */ .profile-missed { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; } .profile-missed .section-title { font-size: 22px; text-align: left; margin-bottom: 4px; } .missed-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .missed-item { border: 2px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; background: var(--color-bg-soft); } .missed-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .missed-prompt { font-size: 14px; font-weight: 800; color: var(--color-heading); line-height: 1.4; } .missed-count { font-size: 11px; font-weight: 900; color: var(--color-danger); white-space: nowrap; background: #ffe3e3; border-radius: 999px; padding: 2px 8px; } .missed-answer { margin-top: 6px; font-size: 13px; color: var(--color-text-light); } .missed-item-bottom { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .missed-where { font-size: 12px; font-weight: 700; color: var(--color-text-light); } /* ---------- Home: streak card ---------- */ .streak-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; } .streak-flame { font-size: 34px; } .streak-count { font-size: 34px; font-weight: 900; color: var(--color-heading); } .streak-label { font-size: 14px; font-weight: 800; color: var(--color-text-light); } .streak-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; } .streak-day { height: 20px; border-radius: 6px; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 11px; } .streak-day.is-studied { background: var(--color-primary); } .streak-day.is-frozen { background: #bfe3ff; color: #0b6bcb; } .streak-day.is-missed { background: #ffd9d6; } .streak-day.is-future { background: #f3f3f3; } .streak-items { display: flex; gap: 8px; justify-content: center; } .streak-item { font-size: 12px; font-weight: 800; color: var(--color-text-light); background: var(--color-bg-soft); border-radius: 999px; padding: 4px 10px; } .streak-gems { margin-top: 10px; text-align: center; } .streak-gems-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin-bottom: 4px; } .streak-gems-track { height: 8px; border-radius: 999px; background: var(--color-bg-soft); border: 1px solid var(--color-border); overflow: hidden; } .streak-gems-fill { height: 100%; border-radius: 999px; background: var(--color-warning); transition: width 0.3s ease; } .streak-gems-count { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 900; color: var(--color-warning); } .goal-adjusted { max-width: 1080px; margin: 14px auto 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--color-primary-dark); background: #f0ffe6; border: 2px solid #b7e49a; border-radius: 12px; padding: 10px 14px; } /* ---------- Home: friend feed ---------- */ .feed-list { display: flex; flex-direction: column; gap: 12px; } .feed-item { padding-bottom: 10px; border-bottom: 2px solid var(--color-bg-soft); } .feed-item:last-child { border-bottom: none; padding-bottom: 0; } .feed-item p { font-size: 14px; color: var(--color-text); line-height: 1.45; } .feed-who { font-weight: 900; color: var(--color-primary-dark); text-decoration: none; } .feed-who:hover { text-decoration: underline; } .feed-course { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; color: var(--color-primary-dark); background: #f0ffe6; border-radius: 999px; padding: 2px 8px; } .feed-when { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--color-text-light); } /* ---------- Lesson: crowns + perfect + gems ---------- */ .lesson-section-divider { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .section-crowns { display: inline-flex; gap: 1px; } .section-crown { font-size: 13px; } .lesson-item-perfect { margin-left: auto; font-size: 13px; } .gem-banner { border-color: #a8d8ff; background: linear-gradient(90deg, #eaf6ff 0%, #ddeeff 100%); color: #0b6bcb; } .course-crowns-pill { font-size: 12px; font-weight: 800; color: #8a6d00; background: #fff8dc; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } /* ---------- Profile: level ring ---------- */ .profile-level-ring-wrap { display: flex; justify-content: center; margin: 14px 0 6px; } .profile-level-ring { width: 130px; height: 130px; } .profile-level-ring-fill { fill: none; stroke: var(--color-warning); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 0.6s ease; } .profile-level-ring-num { font-family: var(--font); font-size: 30px; font-weight: 900; fill: var(--color-heading); text-anchor: middle; } .profile-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } .profile-followers { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--color-text-light); } /* ---------- Profile: shop ---------- */ .profile-shop { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; } .profile-shop .section-title { font-size: 22px; text-align: left; margin-bottom: 4px; } /* ---------- Profile: danger zone ---------- */ .profile-danger { background: rgba(255, 75, 75, 0.06); border: 2px solid rgba(255, 75, 75, 0.28); border-radius: var(--radius-lg); padding: 28px; } .profile-danger .section-title { display: flex; align-items: center; gap: 10px; font-size: 22px; text-align: left; margin-bottom: 4px; color: var(--color-danger); } .profile-danger .section-title::before { content: "⚠️"; font-size: 20px; line-height: 1; } .profile-danger .profile-courses-sub { margin-bottom: 18px; } .shop-gems { font-weight: 900; color: var(--color-warning); } .shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; } .shop-card { border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; background: var(--color-bg-soft); } .shop-icon { font-size: 34px; display: block; margin-bottom: 8px; } .shop-title { font-size: 16px; font-weight: 900; color: var(--color-heading); margin-bottom: 6px; } .shop-desc { font-size: 13px; color: var(--color-text-light); line-height: 1.45; margin-bottom: 10px; min-height: 38px; } .shop-cost { display: block; font-size: 13px; font-weight: 900; color: var(--color-primary-dark); margin-bottom: 12px; } .shop-hint { margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--color-primary-dark); } .shop-hint.is-error { color: var(--color-danger); } /* ---------- Lesson sidebar: premium pill ---------- */ .premium-sidebar-pill { display: flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; margin: 10px auto 4px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%); color: #5a4300; font-size: 12px; font-weight: 900; letter-spacing: 0.2px; } /* ---------- Admin dashboard ---------- */ .admin-main { min-height: 70vh; padding: 40px 0 60px; } .admin-layout[hidden], .admin-missing[hidden] { display: none; } .admin-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; } .admin-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; font-size: 30px; flex-shrink: 0; } .admin-title { font-size: 30px; font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; } .admin-subtitle { font-size: 15px; font-weight: 700; color: var(--color-text-light); margin-top: 4px; } .admin-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 28px; } .admin-summary-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 16px; text-align: center; box-shadow: var(--shadow); } .admin-summary-card.is-premium { border-color: rgba(255, 180, 40, 0.5); background: linear-gradient(135deg, rgba(255, 208, 0, 0.08) 0%, rgba(255, 149, 0, 0.12) 100%); } .admin-summary-value { display: block; font-size: 26px; font-weight: 900; color: var(--color-heading); } .admin-summary-label { font-size: 13px; font-weight: 800; color: var(--color-text-light); } .admin-users { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow); } .admin-users-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .admin-users-title { font-size: 22px; font-weight: 900; color: var(--color-heading); } .admin-search { display: flex; gap: 8px; flex: 1; max-width: 420px; } .admin-users-meta { font-size: 13px; font-weight: 800; color: var(--color-text-light); margin-bottom: 10px; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 900; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 2px solid var(--color-border); white-space: nowrap; } .admin-table td { padding: 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; color: var(--color-text); font-weight: 700; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr.is-premium td { background: rgba(255, 180, 40, 0.05); } .admin-table tr:hover td { background: var(--color-bg-soft); } .admin-cell-user { display: flex; flex-direction: column; gap: 2px; } .admin-user-name { font-weight: 900; color: var(--color-primary-dark); } .admin-user-email { font-size: 12px; font-weight: 700; color: var(--color-text-light); } .admin-cell-muted { font-size: 13px; color: var(--color-text-light); white-space: nowrap; } .admin-badge { display: inline-flex; align-items: center; padding: 2px 10px; margin: 2px 4px 2px 0; border-radius: 999px; background: var(--color-bg-soft); border: 1px solid var(--color-border); color: var(--color-text-light); font-size: 12px; font-weight: 900; white-space: nowrap; } .admin-badge.is-admin { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; } .admin-badge.is-premium { background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%); border-color: transparent; color: #5a4300; } [data-theme="dark"] .admin-badge.is-admin { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.4); color: #c7d2fe; } .admin-empty { text-align: center; padding: 28px 0; font-size: 14px; font-weight: 800; color: var(--color-text-light); } .admin-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } .admin-page { font-size: 14px; font-weight: 900; color: var(--color-text); } .admin-missing { text-align: center; padding: 60px 0; } .admin-missing-title { font-size: 28px; font-weight: 900; color: var(--color-heading); margin-bottom: 10px; } .admin-missing-text { font-size: 15px; font-weight: 700; color: var(--color-text-light); margin-bottom: 20px; } @media (max-width: 640px) { .admin-users-head { flex-direction: column; align-items: stretch; } .admin-search { max-width: none; } } /* ---------- Profile: share modal ---------- */ .share-modal-card { max-width: 640px; } .share-preview { margin: 14px 0; } .share-preview canvas { max-width: 100%; height: auto; display: block; border-radius: 16px; } /* ---------- Leaderboard: duels ---------- */ .duels-section { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 20px; margin-bottom: 28px; box-shadow: var(--shadow); } .duels-head { text-align: center; margin-bottom: 16px; } .duels-title { font-size: 24px; font-weight: 900; color: var(--color-heading); } .duels-sub { font-size: 14px; color: var(--color-text-light); margin-top: 4px; } .duel-invite { display: flex; gap: 10px; max-width: 420px; margin: 0 auto 6px; } .duel-invite .field-input { flex: 1; } .duel-invite-error { text-align: center; font-size: 13px; font-weight: 800; color: var(--color-danger); margin-bottom: 8px; } .duel-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .duel-card { border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 18px; } .duel-card.is-finished { opacity: 0.75; } .duel-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .duel-vs { font-size: 15px; font-weight: 900; color: var(--color-heading); } .duel-result { font-size: 13px; font-weight: 900; color: var(--color-primary-dark); } .duel-wager-line { margin-top: 8px; font-size: 12px; font-weight: 900; color: #8a6d00; background: #fff7d6; border: 1px solid #f4c013; border-radius: 999px; padding: 4px 12px; display: inline-block; } .duel-bars { display: flex; flex-direction: column; gap: 10px; } .duel-bar-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; } .duel-bar-label { font-size: 12px; font-weight: 800; color: var(--color-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duel-bar-row.is-me .duel-bar-label { color: var(--color-primary-dark); } .duel-bar-track { height: 10px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; } .duel-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); transition: width 0.4s ease; } .duel-card-meta { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--color-text-light); } .duel-actions { display: flex; gap: 10px; margin-top: 12px; } /* ========================================================= Theme toggle (injected by nav.js) ========================================================= */ .nav-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-bg-soft); font-size: 18px; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; } .nav-theme-toggle:hover { border-color: var(--color-primary); transform: translateY(-1px); } /* ========================================================= Duel notification toast (injected by nav.js) ========================================================= */ .duel-notice { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 480px); background: var(--color-bg); border: 2px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px 16px; font-size: 14px; font-weight: 800; color: var(--color-heading); animation: pop-in 0.25s ease; } .duel-notice-actions { display: flex; gap: 8px; margin-left: auto; flex: none; } /* ========================================================= Profile settings (edit profile / change password) ========================================================= */ .profile-settings-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 720px) { .profile-settings-grid { grid-template-columns: 1fr 1fr; } } .settings-card { background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius); padding: 20px; } .settings-card h3 { font-size: 16px; font-weight: 900; color: var(--color-heading); margin-bottom: 14px; } .settings-card .field { margin-bottom: 14px; } .settings-message { font-size: 13px; font-weight: 800; margin-top: 12px; } .settings-message.is-error { color: var(--color-danger); } .settings-message.is-success { color: var(--color-primary-dark); } /* ========================================================= Dark mode ========================================================= */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #151a23; --color-bg-soft: #1e2530; --color-border: #333b4a; --color-text: #cdd3de; --color-text-light: #8d95a6; --color-heading: #f2f4f8; --color-primary-dark: #7ed957; --shadow: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .hero, [data-theme="dark"] .auth-main { background: linear-gradient(180deg, rgba(88, 204, 2, 0.07) 0%, var(--color-bg) 100%); } [data-theme="dark"] .level-up-banner { background: linear-gradient(90deg, rgba(88, 204, 2, 0.16) 0%, rgba(88, 204, 2, 0.08) 100%); border-color: rgba(88, 204, 2, 0.4); } [data-theme="dark"] .lesson-sidebar-head, [data-theme="dark"] .lb-league-head { background: linear-gradient(135deg, rgba(88, 204, 2, 0.08) 0%, var(--color-bg) 100%); } [data-theme="dark"] .achievement-banner { background: linear-gradient(90deg, rgba(255, 200, 0, 0.16) 0%, rgba(255, 200, 0, 0.07) 100%); } [data-theme="dark"] .art-card, [data-theme="dark"] .code-block { background: #0e1320; } [data-theme="dark"] .footer { background: #0f131c; } [data-theme="dark"] .lesson-body code { background: var(--color-bg-soft); color: #ff8fab; } /* green surfaces */ [data-theme="dark"] .lesson-section-divider, [data-theme="dark"] .lesson-item.is-active, [data-theme="dark"] .lb-row.is-me, [data-theme="dark"] .achievement.is-earned, [data-theme="dark"] .goal-adjusted, [data-theme="dark"] .feed-course, [data-theme="dark"] .field-error.is-success, [data-theme="dark"] .quiz-option.is-correct, [data-theme="dark"] .quiz-input.is-correct, [data-theme="dark"] .match-item.is-correct.is-matched, [data-theme="dark"] .order-chip-picked { background: rgba(88, 204, 2, 0.14); } [data-theme="dark"] .field-error.is-success { border-color: rgba(88, 204, 2, 0.4); } /* red / error surfaces */ [data-theme="dark"] .field-error, [data-theme="dark"] .quiz-option.is-wrong, [data-theme="dark"] .quiz-input.is-wrong, [data-theme="dark"] .match-item.is-wrong, [data-theme="dark"] .profile-dropdown-item.is-danger:hover { background: rgba(255, 75, 75, 0.14); } [data-theme="dark"] .field-error { border-color: rgba(255, 75, 75, 0.35); } /* blue surfaces */ [data-theme="dark"] .match-item.is-selected { background: rgba(28, 176, 246, 0.16); } [data-theme="dark"] .streak-day.is-frozen { background: rgba(28, 176, 246, 0.14); border-color: rgba(28, 176, 246, 0.3); } [data-theme="dark"] .streak-day.is-future { background: var(--color-bg-soft); } [data-theme="dark"] .gem-banner { background: linear-gradient(90deg, rgba(28, 176, 246, 0.14) 0%, rgba(28, 176, 246, 0.08) 100%); border-color: rgba(28, 176, 246, 0.3); } /* yellow surfaces */ [data-theme="dark"] .modal-icon, [data-theme="dark"] .lesson-xp, [data-theme="dark"] .lesson-practice-link, [data-theme="dark"] .course-crowns-pill { background: rgba(255, 200, 0, 0.15); } [data-theme="dark"] .lesson-practice-link:hover { background: rgba(255, 200, 0, 0.22); } [data-theme="dark"] .duel-notice { background: var(--color-bg-soft); } [data-theme="dark"] .missed-item { background: var(--color-bg); } [data-theme="dark"] .missed-count { background: rgba(255, 77, 79, 0.18); } [data-theme="dark"] .duel-wager-line { background: rgba(244, 192, 19, 0.12); border-color: #8a6d00; color: #f4c013; } @media (prefers-reduced-motion: reduce) { .duel-notice { animation: none; } } /* ------------------------------------------------------------------ */ /* Personalized learning path ---------- */ .path { background: var(--color-bg-soft); padding: 40px 0 56px; } .path [hidden], .path-onboard-prompt[hidden], .path-next-card[hidden] { display: none; } .path-onboard-prompt { max-width: 560px; margin: 0 auto; text-align: center; background: var(--color-bg); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px; } .path-onboard-prompt .btn { margin-top: 6px; } .path-next-card { max-width: 640px; margin: 0 auto 20px; } .path-next { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 2px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-lg); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .path-next:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .path-next-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 26px; font-weight: 800; } .path-next-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .path-next-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-dark); } .path-next-course { font-size: 13px; font-weight: 800; color: var(--color-text-light); } .path-next-title { font-size: 20px; font-weight: 900; color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .path-next-meta { font-size: 13px; font-weight: 700; color: var(--color-text-light); } .path-next-arrow { flex-shrink: 0; color: var(--color-primary-dark); font-size: 24px; font-weight: 900; } .path-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 20px; } .path-list-item { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .path-list-item:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } /* ---------- Onboarding (placement check) ---------- */ .onboard-main { min-height: calc(100vh - 120px); padding: 48px 20px; background: linear-gradient(180deg, #eafbe0 0%, #ffffff 100%); } [data-theme="dark"] .onboard-main { background: linear-gradient(180deg, rgba(88, 204, 2, 0.07) 0%, var(--color-bg) 100%); } .onboard-card { width: 100%; max-width: 640px; margin: 0 auto; background: var(--color-bg); border-radius: var(--radius-lg); border: 2px solid var(--color-border); box-shadow: var(--shadow-lg); padding: 40px 36px; } .onboard-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .onboard-course { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .onboard-course:hover { border-color: var(--color-primary); transform: translateY(-2px); } .onboard-course.is-selected { border-color: var(--color-primary); background: rgba(88, 204, 2, 0.1); } .onboard-course-input { position: absolute; opacity: 0; pointer-events: none; } .onboard-course-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-light); font-size: 19px; font-weight: 700; } .onboard-course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .onboard-course-name { font-size: 15px; font-weight: 900; color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .onboard-course-meta { font-size: 12px; font-weight: 700; color: var(--color-text-light); } .onboard-course-order { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 900; } .onboard-experience { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .onboard-experience-option { cursor: pointer; } .onboard-experience-option input { position: absolute; opacity: 0; pointer-events: none; } .onboard-experience-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 18px 14px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .onboard-experience-option:hover .onboard-experience-card { border-color: var(--color-primary); transform: translateY(-2px); } .onboard-experience-option input:checked+.onboard-experience-card { border-color: var(--color-primary); background: rgba(88, 204, 2, 0.1); } .onboard-experience-emoji { font-size: 26px; } .onboard-experience-name { font-size: 15px; font-weight: 900; color: var(--color-heading); } .onboard-experience-desc { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--color-text-light); } #onboard-skip { margin-top: 10px; } /* ---------- Dashboard v2: compact strip + grid ---------- */ .dash-strip { background: var(--color-bg-soft); padding: 24px 0 4px; } .dash-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .strip-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } a.strip-card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } .strip-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--color-bg-soft); font-size: 24px; } .strip-card-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .strip-card-value { font-size: 18px; font-weight: 900; color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strip-card-label { font-size: 13px; font-weight: 700; color: var(--color-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strip-goal-ring { flex-shrink: 0; width: 52px; height: 52px; } .strip-goal-ring .goal-ring-text { font-size: 12px; } .dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; } .dash-side { display: flex; flex-direction: column; gap: 24px; } .courses-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .courses-head .section-title { margin-bottom: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .card-head .today-card-title { margin-bottom: 0; } .card-head-xp { font-size: 12px; font-weight: 900; color: var(--color-primary-dark); background: #f0ffe6; border-radius: 999px; padding: 4px 10px; white-space: nowrap; } [data-theme="dark"] .card-head-xp { background: rgba(88, 204, 2, 0.15); } @media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } .courses-head { flex-direction: column; align-items: flex-start; } } /* Onboarding custom styles */ .onboard-experience-option { display: flex; flex-direction: column; height: 100%; } .onboard-experience-card { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; } .onboard-experience-desc-spaced { margin-top: 8px; } /* ---------- Lesson Notes & Bookmarks ---------- */ .lesson-notes-section { margin-top: 40px; padding: 24px; background: var(--color-bg-soft); border: 2px solid var(--color-border); border-radius: var(--radius-lg); } [data-theme="dark"] .lesson-notes-section { background: rgba(255, 255, 255, 0.03); } .notes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .notes-title { margin: 0; font-size: 18px; font-weight: 900; color: var(--color-heading); } .btn-bookmark { display: inline-flex; align-items: center; gap: 6px; background: var(--color-bg); border: 2px solid var(--color-border); border-radius: 12px; color: var(--color-text); font-weight: 700; font-size: 14px; padding: 8px 16px; cursor: pointer; transition: all 0.15s ease; } .btn-bookmark:hover { border-color: var(--color-warning); color: var(--color-warning); } .btn-bookmark.is-active { background: #fff8dc; border-color: var(--color-warning); color: var(--color-warning); } [data-theme="dark"] .btn-bookmark.is-active { background: rgba(255, 215, 0, 0.15); } .notes-textarea { width: 100%; min-height: 120px; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-heading); font-family: var(--font); font-size: 15px; line-height: 1.6; resize: vertical; margin-bottom: 12px; outline: none; transition: border-color 0.15s ease; } .notes-textarea:focus { border-color: var(--color-primary); } .notes-footer { display: flex; justify-content: space-between; align-items: center; } .notes-status { font-size: 13px; font-weight: 700; color: var(--color-text-light); }