/* UI Structure Plan 1) Keep logic IDs stable, upgrade visual system only. 2) Header = brand + status + actions (theme/login/logout + role segmented). 3) Bottom nav = primary nav; role-aware items; fixed safe-area aware. 4) Home = dashboard cards (daily, quick stats, leaderboard). 5) N5 = segmented-like mode buttons + finder + pager + polished cards. 6) Stats screen = intentional student/teacher stats layouts. 7) Preserve auth/routing/kana/n5 features; mobile-first responsive behavior. */ :root{ --bg:#f2f5f3; --card:#ffffff; --text:#1b2431; --muted:#607185; --border:rgba(27,36,49,.13); --chip:#e7eef9; --good:#067647; --bad:#b42318; --shadow: 0 12px 28px rgba(12,23,38,.09); --ring:#15212f; --radius:18px; --radius-sm:14px; --focus:0 0 0 3px rgba(37,99,235,.24); --surface-1:linear-gradient(180deg,rgba(255,255,255,.94) 0%, rgba(255,255,255,.9) 100%); } /* Mobile Student/Kana organization pass: keep desktop rules untouched. */ @media (max-width:767px){ body.mobile-layout #screenStudent, body.mobile-layout #screenKana{ background:#f6f7fb !important; overflow-x:hidden !important; } body.mobile-layout #screenStudent{ margin-top:0 !important; padding:0 0 calc(96px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; padding:14px !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile > .card{ width:100% !important; max-width:100% !important; min-width:0 !important; min-height:0 !important; box-sizing:border-box !important; margin:0 !important; padding:16px !important; border-radius:18px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentLevelCard{ display:none !important; } body.mobile-layout #screenStudent .studentStreakCard{ order:1 !important; align-self:flex-start !important; width:auto !important; max-width:100% !important; min-height:42px !important; display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; padding:10px 14px !important; border-radius:999px !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentStreakIcon{ width:auto !important; height:auto !important; display:inline-flex !important; flex:0 0 auto !important; font-size:16px !important; line-height:1 !important; filter:none !important; } body.mobile-layout #screenStudent .studentStreakCopy{ min-width:0 !important; display:block !important; } body.mobile-layout #screenStudent .studentStreakLabel, body.mobile-layout #screenStudent .studentStreakHint, body.mobile-layout #screenStudent .studentStreakBest{ display:none !important; } body.mobile-layout #screenStudent .studentStreakValue{ display:inline-flex !important; align-items:center !important; min-width:0 !important; color:#111827 !important; font-size:14px !important; line-height:1.15 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentStreakValue [data-i18n="dayStreak"]{ display:none !important; } body.mobile-layout #screenStudent .studentStreakValue::after{ content:attr(data-mobile-unit); } body.mobile-layout #screenStudent .studentMonthlyCard{ order:2 !important; display:flex !important; flex-direction:column !important; gap:12px !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:3 !important; display:flex !important; flex-direction:column !important; gap:12px !important; } body.mobile-layout #screenStudent .studentCycleSection{ order:4 !important; display:block !important; width:100% !important; height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } body.mobile-layout #screenStudent .studentMonthlyCycleCard{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyHead{ margin:0 !important; display:block !important; } body.mobile-layout #screenStudent .studentMonthlyTitleRow{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyTitle, body.mobile-layout #screenStudent #studentProgressHistoryTitle{ margin:0 !important; color:#111827 !important; font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentMonthlyJourneyPath, body.mobile-layout #screenStudent .studentMonthlyExamPanel, body.mobile-layout #screenStudent .studentProgressHistorySubtitle{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewList{ display:flex !important; flex-direction:column !important; gap:8px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewIcon, body.mobile-layout #screenStudent .studentMonthlyReviewCount, body.mobile-layout #screenStudent .studentMonthlyReviewProgress, body.mobile-layout #screenStudent .studentMonthlyReviewList::before, body.mobile-layout #screenStudent .studentMonthlyReviewRow::before, body.mobile-layout #screenStudent .studentMonthlyReviewRow::after{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow{ width:100% !important; min-width:0 !important; min-height:42px !important; box-sizing:border-box !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "main state" "action action" !important; align-items:center !important; gap:8px 10px !important; padding:10px 12px !important; border-radius:14px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:visible !important; } body.mobile-layout #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; min-width:0 !important; display:block !important; } body.mobile-layout #screenStudent .studentMonthlyReviewName{ color:#111827 !important; font-size:13px !important; line-height:1.25 !important; font-weight:800 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:end !important; max-width:92px !important; min-height:23px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:4px 8px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; display:none !important; justify-self:start !important; width:auto !important; min-height:30px !important; margin:0 !important; padding:0 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewAction{ display:inline-flex !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:rgba(79,70,229,.22) !important; background:#eef2ff !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ background:#4f46e5 !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewState{ background:#ecfdf5 !important; color:#047857 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewState{ background:#e5e7eb !important; color:#6b7280 !important; } body.mobile-layout #screenStudent .studentProgressHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentHistoryPreview{ width:100% !important; min-width:0 !important; margin:0 !important; } body.mobile-layout #screenStudent .studentSelectedMonthCard{ width:100% !important; box-sizing:border-box !important; padding:12px !important; border-radius:14px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentSelectedMonthName{ color:#111827 !important; font-size:14px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #screenStudent .studentSelectedMonthLine, body.mobile-layout #screenStudent .studentSelectedMonthExamLine{ color:#6b7280 !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; margin-top:10px !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics > div{ min-width:0 !important; padding:8px !important; border-radius:12px !important; background:#fff !important; border:1px solid rgba(15,23,42,.06) !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics span{ display:block !important; color:#6b7280 !important; font-size:10px !important; line-height:1.2 !important; font-weight:800 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics b{ display:block !important; margin-top:3px !important; color:#111827 !important; font-size:12px !important; line-height:1.25 !important; font-weight:850 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryBtn{ width:100% !important; min-height:40px !important; justify-content:center !important; border-radius:14px !important; font-size:14px !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthlyCyclePanel, body.mobile-layout #screenStudent .studentMonthlyHistoryPanel{ position:fixed !important; inset:0 !important; z-index:1200 !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; padding:0 !important; background:rgba(8,16,28,.42) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } body.mobile-layout #screenStudent .studentMonthlyCyclePanel[hidden], body.mobile-layout #screenStudent .studentMonthlyHistoryPanel[hidden]{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyCycleSheet, body.mobile-layout #screenStudent .studentMonthlyHistorySheet{ width:100% !important; max-width:100% !important; max-height:min(86svh,720px) !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 !important; padding:16px !important; padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important; box-sizing:border-box !important; border:0 !important; border-radius:22px 22px 0 0 !important; background:#fff !important; box-shadow:0 -18px 44px rgba(7,15,28,.22) !important; } body.mobile-layout #screenKana{ margin-top:0 !important; padding:14px 14px calc(96px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenKana .grid{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; margin:0 !important; } body.mobile-layout #screenKana .kanaJourneyCard{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; padding:16px !important; border-radius:18px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenKana .kanaJourneyHeader{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:8px !important; margin:0 0 14px !important; } body.mobile-layout #screenKana .kanaJourneyHeader > div{ min-width:0 !important; } body.mobile-layout #screenKana .kanaJourneyEyebrow, body.mobile-layout #screenKana #kanaJourneyText, body.mobile-layout #screenKana .kanaJourneyGrid, body.mobile-layout #screenKana .kanaAssessmentStatusTag, body.mobile-layout #screenKana .kanaAssessmentOverallTag, body.mobile-layout #screenKana .kanaWeakMobileTag, body.mobile-layout #screenKana #kanaMobileReviewWeakBtn, body.mobile-layout #screenKana #kanaMobileAssessmentBtn{ display:none !important; } body.mobile-layout #screenKana .kanaJourneyTitle{ margin:0 !important; color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenKana .kanaJourneyMeta{ display:flex !important; align-items:center !important; justify-content:flex-start !important; flex-wrap:wrap !important; gap:6px !important; max-width:100% !important; } body.mobile-layout #screenKana .kanaMobileProgressTag{ display:inline-flex !important; align-items:center !important; max-width:100% !important; min-height:30px !important; gap:6px !important; padding:4px 6px 4px 10px !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.14) !important; background:#eef2ff !important; color:#312e81 !important; font-size:12px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout .mobileInfoButton{ width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.18) !important; background:#fff !important; color:#4f46e5 !important; font-size:12px !important; line-height:1 !important; font-weight:900 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid{ width:100% !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn{ width:100% !important; min-height:54px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; padding:0 14px !important; border-radius:16px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; color:#111827 !important; box-shadow:0 8px 18px rgba(15,23,42,.05) !important; font-size:14px !important; line-height:1.2 !important; font-weight:850 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenKana #kanaMobileQuizBtn{ display:flex !important; border-color:rgba(79,70,229,.2) !important; background:#eef2ff !important; color:#312e81 !important; } body.mobile-layout #screenKana #kanaMobileBrowseBtn{ display:flex !important; } body.mobile-layout #screenKana #kanaMobileReviewWeakBtn[hidden], body.mobile-layout #screenKana #kanaMobileAssessmentBtn[hidden]{ display:none !important; } body.mobile-layout #kanaChartModalBack{ align-items:flex-end !important; justify-content:center !important; padding:0 !important; overflow:hidden !important; background:rgba(8,16,28,.42) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } body.mobile-layout #kanaChartModalBack .kanaChartModalCard{ width:100% !important; max-width:100% !important; max-height:min(88svh,720px) !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; margin:0 !important; padding:14px !important; padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important; border:0 !important; border-radius:22px 22px 0 0 !important; background:#fff !important; box-shadow:0 -18px 44px rgba(7,15,28,.22) !important; overflow:hidden !important; } body.mobile-layout #kanaChartModalBack .kanaChartHeader{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartHeader b{ color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartHeader .hint, body.mobile-layout #kanaChartModalBack .kanaChartFooter{ display:none !important; } body.mobile-layout #kanaChartModalBack #kanaChartCloseBtn{ min-height:34px !important; padding:0 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #kanaChartModalBack .kanaChartSeg{ width:100% !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; margin:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartSeg .seg{ min-width:0 !important; min-height:36px !important; border-radius:12px !important; font-size:13px !important; font-weight:850 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #kanaChartModalBack .kanaChartBody{ min-width:0 !important; width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; padding:0 !important; overflow-x:hidden !important; overflow-y:auto !important; } body.mobile-layout #kanaChartModalBack .kanaChartSection{ min-width:0 !important; width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:8px !important; } body.mobile-layout #kanaChartModalBack .kanaChartSectionHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartSectionHead b, body.mobile-layout #kanaChartModalBack .kanaChartSectionHead .hint{ font-size:11px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; } body.mobile-layout #kanaChartModalBack .kanaChartRows{ width:100% !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:6px !important; } body.mobile-layout #kanaChartModalBack .kanaChartRow, body.mobile-layout #kanaChartModalBack .kanaChartBasicMobile .kanaChartRow.isMobileGojuon{ width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:6px !important; } body.mobile-layout #kanaChartModalBack .kanaChartRow.isCompact{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } body.mobile-layout #kanaChartModalBack .kanaChartBasicMobile .kanaChartRow.isMobileGojuon{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } body.mobile-layout #kanaChartModalBack .kanaChartCell{ min-width:0 !important; min-height:36px !important; aspect-ratio:1 / 1 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; padding:4px !important; border-radius:10px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:hidden !important; } body.mobile-layout #kanaChartModalBack .kanaChartCell.isEmpty{ opacity:0 !important; pointer-events:none !important; border-color:transparent !important; background:transparent !important; } body.mobile-layout #kanaChartModalBack .kanaChartChar{ color:#111827 !important; font-size:16px !important; line-height:1 !important; font-weight:850 !important; } body.mobile-layout #kanaChartModalBack .kanaChartRomaji{ color:#6b7280 !important; font-size:9px !important; line-height:1 !important; font-weight:800 !important; white-space:nowrap !important; } } @media (max-width:374px){ body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:1fr !important; } body.mobile-layout #kanaChartModalBack .kanaChartRow, body.mobile-layout #kanaChartModalBack .kanaChartBasicMobile .kanaChartRow.isMobileGojuon{ gap:5px !important; } body.mobile-layout #kanaChartModalBack .kanaChartCell{ min-height:34px !important; border-radius:9px !important; } body.mobile-layout #kanaChartModalBack .kanaChartChar{ font-size:15px !important; } } /* Mobile-only green accent and minimal month picker pass. */ @media (max-width:767px){ :root{ --mobile-primary:#16a34a; --mobile-primary-soft:#ecfdf5; --mobile-primary-ink:#14532d; --mobile-text:#111827; --mobile-muted:#6b7280; --mobile-card:#ffffff; --mobile-border:rgba(15,23,42,.08); } body.mobile-layout .btn.primary, body.mobile-layout #screenHome .homeSimplePrimaryBtn, body.mobile-layout #screenStudent .studentMonthlyHistoryBtn{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; box-shadow:0 10px 18px rgba(22,163,74,.18) !important; } body.mobile-layout .seg.active, body.mobile-layout #kanaChartModalBack .kanaChartSeg .seg.active{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout .miniTag, body.mobile-layout #screenKana .kanaMobileProgressTag{ border-color:rgba(22,163,74,.16) !important; background:var(--mobile-primary-soft) !important; color:var(--mobile-primary-ink) !important; } body.mobile-layout .mobileInfoButton{ border-color:rgba(22,163,74,.2) !important; color:var(--mobile-primary) !important; } body.mobile-layout #screenHome .homeSimpleProgressFill, body.mobile-layout #screenN5 .core-progress-fill, body.mobile-layout #screenN5 .n5-progress-fill, body.mobile-layout #screenN5 .n5CoreProgressFill, body.mobile-layout #screenStudent .studentMonthlyReviewFill{ background:var(--mobile-primary) !important; } body.mobile-layout #screenKana #kanaMobileQuizBtn, body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:rgba(22,163,74,.22) !important; background:var(--mobile-primary-soft) !important; color:var(--mobile-primary-ink) !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthlyInfoBtn{ border-color:rgba(22,163,74,.2) !important; background:#fff !important; color:var(--mobile-primary) !important; } body.mobile-layout #screenStudent .studentMonthlyHistorySheet{ gap:12px !important; padding:18px !important; padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryModalHead{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:10px !important; min-height:34px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryModalHead > div, body.mobile-layout #screenStudent .studentMonthlyHistoryModalHead h3, body.mobile-layout #screenStudent .studentMonthlyHistoryModalSub, body.mobile-layout #screenStudent .studentMonthlyHistoryDetail{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryCloseBtn{ min-height:34px !important; padding:0 12px !important; border-radius:999px !important; border:1px solid var(--mobile-border) !important; background:#fff !important; color:var(--mobile-text) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryArchive, body.mobile-layout #screenStudent .studentMonthlyHistoryList{ width:100% !important; min-width:0 !important; display:block !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body.mobile-layout #screenStudent .studentMobileMonthPicker{ width:100% !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:12px !important; } body.mobile-layout #screenStudent .studentMonthPickerYearList{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } body.mobile-layout #screenStudent .studentMonthPickerYear, body.mobile-layout #screenStudent .studentMonthPickerMonth, body.mobile-layout #screenStudent .studentMonthPickerBack{ appearance:none !important; -webkit-appearance:none !important; min-width:0 !important; box-sizing:border-box !important; border:1px solid var(--mobile-border) !important; background:#fff !important; color:var(--mobile-text) !important; font-family:inherit !important; letter-spacing:0 !important; box-shadow:none !important; } body.mobile-layout #screenStudent .studentMonthPickerYear{ width:100% !important; min-height:44px !important; padding:0 14px !important; border-radius:14px !important; font-size:16px !important; line-height:1.2 !important; font-weight:850 !important; text-align:center !important; } body.mobile-layout #screenStudent .studentMonthPickerYear.isSelected{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthPickerBack{ align-self:flex-start !important; min-height:34px !important; padding:0 12px !important; border-radius:999px !important; color:var(--mobile-primary) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthPickerYearTitle{ color:var(--mobile-text) !important; font-size:18px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; text-align:left !important; } body.mobile-layout #screenStudent .studentMonthPickerGrid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth{ position:relative !important; width:100% !important; min-height:42px !important; padding:8px 6px !important; border-radius:14px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; color:var(--mobile-muted) !important; font-size:14px !important; line-height:1 !important; font-weight:800 !important; text-align:center !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.hasData{ color:var(--mobile-text) !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.hasData::after{ content:"" !important; display:block !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--mobile-primary) !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.isSelected{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.isSelected.hasData::after{ background:#fff !important; } body.mobile-layout #screenStudent .studentHistoryMonthCard.isSelected, body.mobile-layout #screenStudent .studentHistoryMonthCard.isCompact.isSelected{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } } @media (max-width:374px){ body.mobile-layout #screenStudent .studentMonthPickerGrid{ gap:8px !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth{ min-height:40px !important; border-radius:12px !important; font-size:13px !important; } } /* EOF mobile override: Student summary + monthly review start cleanup. */ @media (max-width:767px){ body.mobile-layout #screenStudent .studentMobileSummaryCard{ order:1 !important; width:100% !important; min-height:46px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; padding:12px 14px !important; border-radius:16px !important; border:1px solid var(--mobile-border, rgba(15,23,42,.08)) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentMobileSummaryName{ min-width:0 !important; color:var(--mobile-text, #111827) !important; font-size:16px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMobileSummaryStreak{ flex:0 0 auto !important; min-height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:6px 10px !important; border-radius:999px !important; border:1px solid rgba(22,163,74,.18) !important; background:var(--mobile-primary-soft, #ecfdf5) !important; color:var(--mobile-primary-ink, #14532d) !important; font-size:13px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentLevelCard, body.mobile-layout #screenStudent .studentStreakCard{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyCard{ order:2 !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:3 !important; } body.mobile-layout #screenStudent .studentCycleSection{ order:4 !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentProgressHistorySubtitle, body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ display:none !important; } body.mobile-layout #screenStudent #studentProgressHistoryTitle{ font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #monthlyCheckpointBack{ align-items:flex-start !important; justify-content:center !important; padding:14px !important; padding-top:calc(14px + env(safe-area-inset-top)) !important; overflow-y:auto !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointModalCard{ width:100% !important; max-width:420px !important; max-height:none !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 auto !important; padding:18px !important; border-radius:20px !important; border:1px solid var(--mobile-border, rgba(15,23,42,.08)) !important; background:#fff !important; box-shadow:0 18px 44px rgba(7,15,28,.18) !important; overflow:visible !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointTop{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:14px !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointCloseBtn{ order:-1 !important; position:static !important; flex:0 0 auto !important; min-height:36px !important; max-width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:8px 12px !important; border-radius:999px !important; border:1px solid var(--mobile-border, rgba(15,23,42,.08)) !important; background:#fff !important; color:var(--mobile-text, #111827) !important; font-size:13px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointTop > div{ min-width:0 !important; width:100% !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointTitle{ display:block !important; margin:0 !important; color:var(--mobile-text, #111827) !important; font-size:20px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointEyebrow, body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointSubtitle, body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointProgressNote, body.mobile-layout #monthlyCheckpointBack .kanaAssessmentFooter{ display:none !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointStartPanel:not([hidden]){ display:block !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartMeta{ display:flex !important; flex-direction:column !important; gap:0 !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow{ min-height:38px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; border-bottom:1px solid rgba(15,23,42,.07) !important; color:var(--mobile-text, #111827) !important; font-size:14px !important; line-height:1.25 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow span{ color:var(--mobile-muted, #6b7280) !important; font-weight:700 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow strong{ color:var(--mobile-text, #111827) !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartBtn{ width:100% !important; min-height:44px !important; margin-top:16px !important; border-radius:14px !important; font-size:14px !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .kanaAssessmentProgressHead{ align-items:center !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointProgressText{ min-height:28px !important; padding:6px 10px !important; border-radius:999px !important; background:var(--mobile-primary-soft, #ecfdf5) !important; color:var(--mobile-primary-ink, #14532d) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointQuestionShell{ padding:14px !important; border-radius:18px !important; } } .studentMobileSummaryCard, .monthlyCheckpointStartPanel{ display:none; } /* Final mobile-only Student summary and monthly review start cleanup. */ @media (max-width:767px){ body.mobile-layout #screenStudent .studentMobileSummaryCard{ order:1 !important; width:100% !important; min-height:46px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; padding:12px 14px !important; border-radius:16px !important; border:1px solid var(--mobile-border, rgba(15,23,42,.08)) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentMobileSummaryName{ min-width:0 !important; color:var(--mobile-text, #111827) !important; font-size:16px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMobileSummaryStreak{ flex:0 0 auto !important; min-height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:6px 10px !important; border-radius:999px !important; border:1px solid rgba(22,163,74,.18) !important; background:var(--mobile-primary-soft, #ecfdf5) !important; color:var(--mobile-primary-ink, #14532d) !important; font-size:13px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentLevelCard, body.mobile-layout #screenStudent .studentStreakCard{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyCard{ order:2 !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:3 !important; } body.mobile-layout #screenStudent .studentCycleSection{ order:4 !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentProgressHistorySubtitle, body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ display:none !important; } body.mobile-layout #screenStudent #studentProgressHistoryTitle{ font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #monthlyCheckpointBack{ align-items:flex-start !important; justify-content:center !important; padding:14px !important; padding-top:calc(14px + env(safe-area-inset-top)) !important; overflow-y:auto !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointModalCard{ width:100% !important; max-width:420px !important; max-height:none !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 auto !important; padding:18px !important; border-radius:20px !important; border:1px solid var(--mobile-border, rgba(15,23,42,.08)) !important; background:#fff !important; box-shadow:0 18px 44px rgba(7,15,28,.18) !important; overflow:visible !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointTop{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:14px !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointCloseBtn{ order:-1 !important; position:static !important; flex:0 0 auto !important; min-height:36px !important; max-width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:8px 12px !important; border-radius:999px !important; border:1px solid var(--mobile-border, rgba(15,23,42,.08)) !important; background:#fff !important; color:var(--mobile-text, #111827) !important; font-size:13px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointTop > div{ min-width:0 !important; width:100% !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointTitle{ display:block !important; margin:0 !important; color:var(--mobile-text, #111827) !important; font-size:20px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointEyebrow, body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointSubtitle, body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointProgressNote, body.mobile-layout #monthlyCheckpointBack .kanaAssessmentFooter{ display:none !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointStartPanel:not([hidden]){ display:block !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartMeta{ display:flex !important; flex-direction:column !important; gap:0 !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow{ min-height:38px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; border-bottom:1px solid rgba(15,23,42,.07) !important; color:var(--mobile-text, #111827) !important; font-size:14px !important; line-height:1.25 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow span{ color:var(--mobile-muted, #6b7280) !important; font-weight:700 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow strong{ color:var(--mobile-text, #111827) !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartBtn{ width:100% !important; min-height:44px !important; margin-top:16px !important; border-radius:14px !important; font-size:14px !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .kanaAssessmentProgressHead{ align-items:center !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointProgressText{ min-height:28px !important; padding:6px 10px !important; border-radius:999px !important; background:var(--mobile-primary-soft, #ecfdf5) !important; color:var(--mobile-primary-ink, #14532d) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointQuestionShell{ padding:14px !important; border-radius:18px !important; } } .mobileInfoButton, .kanaMobileProgressTag, .kanaWeakMobileTag{ display:none; } @media (max-width:767px){ body.mobile-info-sheet-open{ overflow:hidden !important; } .mobileInfoButton{ display:inline-grid !important; place-items:center !important; width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; padding:0 !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.18) !important; background:#eef2ff !important; color:#4f46e5 !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; box-shadow:none !important; } .mobileInfoSheetBack{ position:fixed !important; inset:0 !important; z-index:1800 !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; padding:16px !important; background:rgba(15,23,42,.34) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } .mobileInfoSheetBack[hidden]{ display:none !important; } .mobileInfoSheet{ width:min(420px, 100%) !important; padding:10px 16px 16px !important; border-radius:20px 20px 16px 16px !important; border:1px solid rgba(15,23,42,.1) !important; background:#fff !important; box-shadow:0 24px 60px rgba(15,23,42,.22) !important; color:#111827 !important; } .mobileInfoSheetHandle{ width:36px !important; height:4px !important; margin:0 auto 12px !important; border-radius:999px !important; background:#d1d5db !important; } .mobileInfoSheetHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } .mobileInfoSheetTitle{ min-width:0 !important; color:#111827 !important; font-size:16px !important; font-weight:850 !important; line-height:1.25 !important; } .mobileInfoSheetClose{ min-height:34px !important; border-radius:12px !important; font-size:13px !important; font-weight:800 !important; } .mobileInfoSheetText{ margin:10px 0 0 !important; color:#4b5563 !important; font-size:13px !important; line-height:1.45 !important; } body.mobile-layout[data-current-route="home"] .appMainScroll, body.mobile-layout[data-current-route="home"] .appLayout .wrap.appLayoutWrap, body.mobile-layout[data-current-route="kana"] .appMainScroll, body.mobile-layout[data-current-route="student"] .appMainScroll{ background:#f6f7fb !important; } body.mobile-layout #screenHome.homeSimpleScreen{ margin-top:0 !important; padding:0 0 calc(96px + env(safe-area-inset-bottom)) !important; background:#f6f7fb !important; --ring:#4f46e5; } body.mobile-layout #screenHome .homeSimplePage{ width:100% !important; max-width:560px !important; margin:0 auto !important; padding:0 14px !important; box-sizing:border-box !important; } body.mobile-layout #screenHome .homeSimpleHeader{ display:flex !important; align-items:center !important; justify-content:space-between !important; min-height:34px !important; margin:0 0 10px !important; } body.mobile-layout #screenHome .homeSimpleHeader h1{ margin:0 !important; color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #screenHome .homeSimpleGrid{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; width:100% !important; margin:0 !important; } body.mobile-layout #screenHome .homeSimpleCard{ width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:16px !important; border-radius:20px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; } body.mobile-layout #screenHome .homeDailyGoalSection{ order:1 !important; } body.mobile-layout #screenHome .homeQuickActionSection{ order:2 !important; } body.mobile-layout #screenHome .homeContinueSection{ display:none !important; } body.mobile-layout #screenHome .homeQuickActionSection h3{ display:none !important; } body.mobile-layout #screenHome .homeSimpleCard h3, body.mobile-layout #screenHome .homeSimplePrimaryText{ margin:0 !important; color:#111827 !important; font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenHome .homeSimpleMuted{ margin:4px 0 0 !important; color:#6b7280 !important; font-size:13px !important; line-height:1.35 !important; } body.mobile-layout #screenHome .homeDailyGoalBody{ display:block !important; } body.mobile-layout #screenHome .homeSimpleRingWrap{ display:none !important; } body.mobile-layout #screenHome .homeDailyGoalValue{ margin:8px 0 0 !important; color:#111827 !important; font-size:14px !important; font-weight:850 !important; line-height:1.2 !important; } body.mobile-layout #screenHome .homeSimpleProgressTrack{ height:8px !important; margin:10px 0 0 !important; border-radius:999px !important; background:#e5e7eb !important; overflow:hidden !important; } body.mobile-layout #screenHome .homeSimpleProgressFill{ height:100% !important; border-radius:999px !important; background:#4f46e5 !important; } body.mobile-layout #screenHome #homeMissionReward{ display:none !important; } body.mobile-layout #screenHome .homeSimplePrimaryBtn{ width:100% !important; min-height:42px !important; margin-top:14px !important; border-radius:14px !important; background:#4f46e5 !important; border-color:#4f46e5 !important; color:#fff !important; font-size:14px !important; line-height:1.15 !important; font-weight:800 !important; box-shadow:0 10px 18px rgba(79,70,229,.18) !important; } body.mobile-layout #screenKana{ margin-top:0 !important; padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; background:#f6f7fb !important; } body.mobile-layout #screenKana .grid{ width:100% !important; max-width:560px !important; margin:0 auto !important; gap:12px !important; } body.mobile-layout #screenKana .kanaJourneyCard{ padding:16px !important; border-radius:20px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; } body.mobile-layout #screenKana .kanaJourneyHeader{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:10px !important; margin:0 0 12px !important; } body.mobile-layout #screenKana .kanaJourneyEyebrow, body.mobile-layout #screenKana #kanaJourneyText, body.mobile-layout #screenKana .kanaJourneyGrid, body.mobile-layout #screenKana #kanaMobileBrowseBtn, body.mobile-layout #screenKana .kanaAssessmentStatusTag, body.mobile-layout #screenKana .kanaAssessmentOverallTag{ display:none !important; } body.mobile-layout #screenKana .kanaJourneyTitle{ margin:0 !important; color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; text-align:left !important; } body.mobile-layout #screenKana .kanaJourneyMeta{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; gap:6px !important; max-width:58% !important; } body.mobile-layout #screenKana .kanaMobileProgressTag, body.mobile-layout #screenKana .kanaWeakMobileTag{ display:inline-flex !important; align-items:center !important; gap:6px !important; min-height:30px !important; padding:4px 6px 4px 10px !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.13) !important; background:#eef2ff !important; color:#312e81 !important; font-size:12px !important; font-weight:850 !important; line-height:1 !important; white-space:nowrap !important; } body.mobile-layout #screenKana .kanaMobileActionGrid{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn{ width:100% !important; min-height:56px !important; justify-content:flex-start !important; padding:0 14px !important; border-radius:16px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; color:#111827 !important; box-shadow:0 8px 18px rgba(15,23,42,.05) !important; font-size:14px !important; line-height:1.15 !important; font-weight:850 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenKana #kanaMobileQuizBtn{ border-color:rgba(79,70,229,.2) !important; background:#eef2ff !important; color:#312e81 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn:disabled{ opacity:.55 !important; box-shadow:none !important; } body.mobile-layout #screenKana #kanaMobileAssessmentBtn[hidden]{ display:none !important; } body.mobile-layout #screenKana .kanaPracticePanel{ border-radius:20px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; } body.mobile-layout[data-current-route="student"] .appLayout .wrap.appLayoutWrap, body.mobile-layout #screenStudent{ background:#f6f7fb !important; } body.mobile-layout #screenStudent{ margin-top:0 !important; padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; max-width:560px !important; margin:0 auto !important; padding:0 14px 18px !important; box-sizing:border-box !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile > .card{ border-radius:18px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; } body.mobile-layout #screenStudent .studentMonthlyCard{ order:1 !important; padding:14px !important; gap:10px !important; } body.mobile-layout #screenStudent .studentLevelCard{ order:2 !important; } body.mobile-layout #screenStudent .studentStreakCard{ order:3 !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:4 !important; } body.mobile-layout #screenStudent .studentCycleSection{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyHead, body.mobile-layout #screenStudent .studentMonthlyHead > div{ display:block !important; width:100% !important; } body.mobile-layout #screenStudent .studentMonthlyTitleRow{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; width:100% !important; } body.mobile-layout #screenStudent .studentMonthlyTitle{ margin:0 !important; color:#111827 !important; font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentMonthlyJourneyPath, body.mobile-layout #screenStudent .studentMonthlyExamPanel{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewList::before, body.mobile-layout #screenStudent .studentMonthlyReviewRow::before, body.mobile-layout #screenStudent .studentMonthlyReviewIcon, body.mobile-layout #screenStudent .studentMonthlyReviewCount, body.mobile-layout #screenStudent .studentMonthlyReviewProgress{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow{ display:grid !important; grid-template-columns:minmax(0,1fr) auto auto !important; grid-template-areas:"main state action" !important; align-items:center !important; column-gap:8px !important; min-height:38px !important; width:100% !important; padding:9px 10px !important; border-radius:14px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; min-width:0 !important; width:auto !important; display:block !important; } body.mobile-layout #screenStudent .studentMonthlyReviewName{ display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; color:#111827 !important; font-size:13px !important; line-height:1.2 !important; font-weight:800 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:end !important; min-height:22px !important; max-width:86px !important; margin:0 !important; padding:4px 8px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; display:none !important; width:auto !important; min-width:58px !important; min-height:28px !important; margin:0 !important; padding:0 10px !important; border-radius:999px !important; font-size:11px !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewAction{ display:inline-flex !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewState{ background:#ecfdf5 !important; color:#047857 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:rgba(79,70,229,.22) !important; background:#eef2ff !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ background:#4f46e5 !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isLocked{ opacity:.72 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewState{ background:#e5e7eb !important; color:#6b7280 !important; } body.mobile-layout #screenStudent .studentMonthlyCyclePanel, body.mobile-layout #screenStudent .studentMonthlyHistoryPanel{ z-index:1700 !important; } body.mobile-layout #screenStudent .studentMonthlyCycleSheet{ border-radius:20px 20px 16px 16px !important; } } /* Final UX polish: shared header, global AI, N5 level sheet, and student motivation. */ .topbar.appTopbar{ border-radius:10px !important; border:1px solid color-mix(in srgb, var(--border) 86%, transparent) !important; box-shadow:0 10px 26px rgba(15,23,42,.08) !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; } .appTopbarBrand b{ letter-spacing:0 !important; font-weight:950 !important; } .appTopbarChip, .roleSegBtn, .appSidebarBtn, .bottomNavBtn, .btn{ border-radius:8px !important; } .roleSeg{ border-radius:10px !important; padding:3px !important; } .roleSegBtn.active, .appSidebarBtn.active, .bottomNavBtn.active{ box-shadow:0 8px 18px rgba(15,23,42,.08) !important; } .card{ border-radius:10px !important; box-shadow:0 12px 30px rgba(15,23,42,.07) !important; } body.dark .card, body.dark .topbar.appTopbar{ box-shadow:0 14px 34px rgba(0,0,0,.24) !important; } #screenStudent #studentStatsView.studentDashboardMobile{ gap:14px !important; } #screenStudent .studentLevelCard, #screenStudent .studentMonthlyCard, #screenStudent .studentCycleSection, #screenStudent .studentProgressHistoryCard, #screenStudent .studentStreakCard{ border:1px solid color-mix(in srgb, var(--border) 88%, transparent) !important; } #screenStudent .studentStreakCard{ display:grid !important; grid-template-columns:auto minmax(0, 1fr) auto !important; align-items:center !important; gap:14px !important; padding:16px !important; background: linear-gradient(135deg, color-mix(in srgb, #fff7ed 58%, var(--card) 42%) 0%, color-mix(in srgb, #eef9f4 48%, var(--card) 52%) 100%) !important; } body.dark #screenStudent .studentStreakCard{ background: linear-gradient(135deg, color-mix(in srgb, #422816 34%, var(--card) 66%) 0%, color-mix(in srgb, #17352b 30%, var(--card) 70%) 100%) !important; } #screenStudent .studentStreakIcon{ width:48px !important; height:48px !important; border-radius:999px !important; display:grid !important; place-items:center !important; font-size:24px !important; background:rgba(255,255,255,.72) !important; border:1px solid rgba(15,23,42,.08) !important; } body.dark #screenStudent .studentStreakIcon{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.1) !important; } #screenStudent .studentStreakCopy{ min-width:0 !important; } #screenStudent .studentStreakLabel{ color:var(--muted) !important; font-size:12px !important; line-height:1.2 !important; font-weight:900 !important; } #screenStudent .studentStreakValue{ margin-top:3px !important; color:var(--text) !important; font-size:22px !important; line-height:1.15 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentStreakHint{ margin-top:4px !important; color:var(--muted) !important; font-size:13px !important; line-height:1.35 !important; } #screenStudent .studentStreakBest{ justify-self:end !important; white-space:nowrap !important; } .globalStudyLevelPanel{ position:fixed !important; inset:0 !important; z-index:1500 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; background:rgba(8,16,28,.38) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; } .globalStudyLevelPanel[hidden]{ display:none !important; } .globalStudyLevelPanel .studentStudyLevelSheet{ width:min(420px, 100%) !important; max-height:min(82vh, 620px) !important; overflow:auto !important; border-radius:12px !important; padding:18px !important; background:var(--card) !important; border:1px solid var(--border) !important; box-shadow:0 22px 60px rgba(15,23,42,.24) !important; } .globalStudyLevelPanel .studentStudyLevelModalHead{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:12px !important; margin-bottom:14px !important; } .globalStudyLevelPanel .studentStudyLevelModalHead h3{ margin:0 !important; font-size:20px !important; line-height:1.2 !important; letter-spacing:0 !important; } .globalStudyLevelPanel .studentStudyLevelOptions{ display:flex !important; flex-direction:column !important; gap:10px !important; } .globalStudyLevelPanel .studentStudyLevelOption{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; padding:12px !important; border-radius:10px !important; border:1px solid var(--border) !important; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%) !important; } .globalStudyLevelPanel .studentStudyLevelOption b, .globalStudyLevelPanel .studentStudyLevelOption span{ display:block !important; line-height:1.25 !important; } .globalStudyLevelPanel .studentStudyLevelOption span{ color:var(--muted) !important; font-size:13px !important; margin-top:2px !important; } .globalStudyLevelPanel .studentStudyLevelOption.isLocked{ opacity:.74 !important; } .globalAiFab{ position:fixed !important; right:22px !important; bottom:22px !important; z-index:1400 !important; width:auto !important; min-width:66px !important; height:52px !important; padding:0 17px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; border:1px solid rgba(255,255,255,.38) !important; background:linear-gradient(135deg, #1f2937 0%, #23483d 100%) !important; color:#fff !important; box-shadow:0 16px 38px rgba(15,23,42,.24) !important; } .globalAiFab:hover{ transform:translateY(-2px) !important; } .globalAiFab span{ font-size:0 !important; } .globalAiFab span::after{ content:"AI Friend" !important; font-size:13px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap !important; } .globalAiFab::before{ content:"" !important; width:9px !important; height:9px !important; border-radius:999px !important; background:#d7fff4 !important; box-shadow:0 0 0 4px rgba(215,255,244,.18) !important; } .globalAiBackdrop{ position:fixed !important; inset:0 !important; z-index:1390 !important; background:rgba(8,16,28,.28) !important; opacity:0 !important; transition:opacity .2s ease !important; pointer-events:none !important; } .globalAiBackdrop.open{ opacity:1 !important; pointer-events:auto !important; } .globalAiBackdrop[hidden], .globalAiPanel[hidden]{ display:none !important; } .globalAiPanel{ position:fixed !important; right:22px !important; bottom:86px !important; z-index:1401 !important; width:min(380px, calc(100vw - 28px)) !important; height:min(560px, calc(100vh - 128px)) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; border-radius:14px !important; border:1px solid var(--border) !important; background:var(--card) !important; box-shadow:0 24px 70px rgba(15,23,42,.26) !important; opacity:0 !important; transform:translate3d(0, 12px, 0) scale(.98) !important; transition:opacity .22s ease, transform .22s ease !important; } .globalAiPanel.open{ opacity:1 !important; transform:translate3d(0, 0, 0) scale(1) !important; } .globalAiPanel .studentAiHeader{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:12px !important; padding:14px !important; border-bottom:1px solid var(--border) !important; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%) !important; } .globalAiPanel .studentAiTitle{ font-size:16px !important; line-height:1.2 !important; font-weight:950 !important; color:var(--text) !important; } .globalAiPanel .studentAiSub{ margin-top:3px !important; color:var(--muted) !important; font-size:12px !important; line-height:1.25 !important; } .globalAiPanel .studentAiMessages{ flex:1 !important; min-height:0 !important; overflow:auto !important; padding:14px !important; display:flex !important; flex-direction:column !important; gap:10px !important; } .globalAiPanel .senseiEmptyState{ margin:auto !important; text-align:center !important; max-width:260px !important; color:var(--muted) !important; } .globalAiPanel .senseiEmptyTitle{ color:var(--text) !important; font-size:15px !important; font-weight:950 !important; margin-bottom:5px !important; } .globalAiPanel .senseiEmptyText{ font-size:13px !important; line-height:1.45 !important; } .globalAiPanel .senseiMessage{ max-width:86% !important; } .globalAiPanel .senseiMessage.user{ align-self:flex-end !important; } .globalAiPanel .senseiMessage.sensei{ align-self:flex-start !important; } .globalAiPanel .senseiLabel{ margin:0 0 4px !important; color:var(--muted) !important; font-size:11px !important; font-weight:900 !important; } .globalAiPanel .senseiMessage.user .senseiLabel{ text-align:right !important; } .globalAiPanel .senseiBubble{ padding:10px 12px !important; border-radius:12px !important; font-size:14px !important; line-height:1.45 !important; background:color-mix(in srgb, var(--chip) 22%, var(--card) 78%) !important; border:1px solid var(--border) !important; white-space:pre-wrap !important; } .globalAiPanel .senseiMessage.user .senseiBubble{ background:#1f2937 !important; color:#fff !important; border-color:#1f2937 !important; } .globalAiPanel .senseiBubble.isTyping{ color:var(--muted) !important; font-style:normal !important; } .globalAiPanel .studentAiComposer{ display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; gap:8px !important; padding:12px !important; padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important; border-top:1px solid var(--border) !important; background:var(--card) !important; } .globalAiPanel .studentAiComposer .input{ min-height:42px !important; border-radius:8px !important; } .settingsCleanGrid{ gap:14px !important; } .settingsSectionCard{ border-radius:10px !important; } .settingsInfoRow, .settingsToggleRow, .settingsDangerZone, .settingsAccountSummary{ border-radius:10px !important; border:1px solid color-mix(in srgb, var(--border) 80%, transparent) !important; } @media (max-width: 760px){ .topbar.appTopbar{ border-radius:0 0 12px 12px !important; } #screenStudent .studentStreakCard{ grid-template-columns:auto minmax(0, 1fr) !important; } #screenStudent .studentStreakBest{ grid-column:2 !important; justify-self:start !important; } .globalStudyLevelPanel{ align-items:flex-end !important; padding:0 !important; } .globalStudyLevelPanel .studentStudyLevelSheet{ width:100% !important; max-height:min(82svh, 620px) !important; border-radius:18px 18px 0 0 !important; padding:16px !important; padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important; } .globalAiFab{ right:14px !important; bottom:calc(82px + env(safe-area-inset-bottom)) !important; min-width:54px !important; height:48px !important; padding:0 14px !important; } .globalAiFab span::after{ content:"AI" !important; } .globalAiPanel{ right:10px !important; left:10px !important; bottom:calc(140px + env(safe-area-inset-bottom)) !important; width:auto !important; height:min(520px, calc(100svh - 196px)) !important; } } /* Focused Home cleanup: only Quick Action, Daily Goal, and Continue Learning are visible. */ #screenHome .homeLeaderboardCard, #screenHome .homeWinnerCard, #screenHome .homeMobileMoreCard, #screenHome .homeStatsCard, #screenHome .homePathCard, #screenHome .homeProgressIdentityCard, #screenHome .homeHero, #screenTeacher .teacherTopCard{ display:none !important; } #screenHome.homeSimpleScreen{ padding-bottom:24px; } #screenHome .homeSimplePage{ width:100%; max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } #screenHome .homeSimpleHeader{ display:flex; align-items:flex-end; justify-content:space-between; min-height:38px; } #screenHome .homeSimpleHeader h1{ margin:0; font-size:30px; line-height:1.1; font-weight:950; letter-spacing:0; color:var(--text); } #screenHome .homeSimpleGrid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:stretch; } #screenHome .homeSimpleCard{ border-radius:8px; padding:18px; min-width:0; min-height:220px; display:flex; flex-direction:column; gap:12px; overflow:hidden; } #screenHome .homeSimpleEyebrow{ font-size:12px; line-height:1.2; font-weight:900; color:var(--muted); } #screenHome .homeSimpleCard h3{ margin:0; font-size:18px; line-height:1.2; font-weight:950; letter-spacing:0; color:var(--text); } #screenHome .homeSimplePrimaryText{ margin-top:2px; font-size:22px; line-height:1.18; font-weight:950; color:var(--text); overflow-wrap:anywhere; } #screenHome .homeSimpleMuted{ color:var(--muted); font-size:14px; line-height:1.45; overflow-wrap:anywhere; } #screenHome .homeSimplePrimaryBtn{ margin-top:auto; min-height:44px; align-self:flex-start; border-radius:8px; white-space:normal; text-align:center; } #screenHome .homeDailyGoalBody{ display:flex; gap:14px; align-items:center; min-width:0; flex:1; } #screenHome .homeSimpleRingWrap, #screenHome .homeSimpleRingWrap .ring{ width:92px; height:92px; flex:0 0 92px; } #screenHome .homeSimpleRingWrap .ringInner{ width:68px; height:68px; } #screenHome .homeSimpleRingValue{ font-size:14px; line-height:1; text-align:center; font-weight:950; } #screenHome .homeSimpleRingLabel{ font-size:10px; text-align:center; margin-top:4px; } #screenHome .homeDailyGoalCopy{ min-width:0; display:flex; flex-direction:column; gap:8px; flex:1; } #screenHome .homeDailyGoalValue{ font-size:24px; line-height:1; font-weight:950; color:var(--text); } #screenHome .homeSimpleProgressTrack{ width:100%; height:10px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,.08); } body.dark #screenHome .homeSimpleProgressTrack{ background:rgba(255,255,255,.1); } #screenHome .homeSimpleProgressFill{ height:100%; width:0%; border-radius:999px; background:var(--ring); transition:width .2s ease; } @media (max-width: 860px){ #screenHome .homeSimpleGrid{ grid-template-columns:1fr; } #screenHome .homeSimpleCard{ min-height:0; } } @media (max-width: 520px){ #screenHome .homeSimplePage{ gap:12px; } #screenHome .homeSimpleHeader h1{ font-size:26px; } #screenHome .homeSimpleCard{ padding:15px; } #screenHome .homeDailyGoalBody{ align-items:flex-start; } #screenHome .homeSimpleRingWrap, #screenHome .homeSimpleRingWrap .ring{ width:82px; height:82px; flex-basis:82px; } #screenHome .homeSimpleRingWrap .ringInner{ width:62px; height:62px; } } body.dark{ --bg:#0f1520; --card:#162131; --text:#f8fafc; --muted:#aab8cb; --border:rgba(255,255,255,.10); --chip:rgba(120,146,186,.20); --shadow: 0 10px 30px rgba(0,0,0,.35); --ring:#e5e7eb; --surface-1:linear-gradient(180deg,rgba(22,33,49,.94) 0%, rgba(19,30,45,.9) 100%); } *{box-sizing:border-box} body{ margin:0; font-family:"Solway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background: radial-gradient(1200px 500px at 50% -120px, color-mix(in srgb, var(--chip) 42%, transparent), transparent 70%), var(--bg); color:var(--text); } .brand b,.tab,.bottomNavBtn,.btn,.card h3,.roleSegBtn{ font-family:"Solway", ui-serif, Georgia, serif; } .wrap{ max-width:1080px; margin:0 auto; padding:14px 14px calc(112px + env(safe-area-inset-bottom)); } .topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); position:sticky; top:10px; z-index:80; backdrop-filter:blur(6px); } .brand{display:flex;flex-direction:column;gap:2px} .brand b{letter-spacing:.2px;font-size:19px} .pill{font-size:12px;color:var(--muted)} .btn{ appearance:none;border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:10px 14px; cursor:pointer; font-weight:700; min-height:44px; touch-action:manipulation; transition:transform .14s ease, box-shadow .18s ease, background-color .18s ease; } .btn:hover{filter:brightness(.98);transform:translateY(-1px);box-shadow:0 8px 18px rgba(14,24,38,.08)} .btn.primary{background:var(--chip);border-color:transparent} .btn.small{padding:8px 12px;min-height:40px;font-weight:800} .btn.danger{border-color:rgba(180,35,24,.25); color:var(--bad)} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .headerActions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .roleSeg{ display:inline-grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--border); border-radius:999px; background:var(--card); min-height:44px; } .roleSegBtn{ border:1px solid transparent; border-radius:999px; min-height:34px; padding:0 10px; font-weight:800; font-size:12px; color:var(--muted); background:transparent; cursor:pointer; min-width:78px; touch-action:manipulation; } .roleSegBtn.active{ background:var(--chip); color:var(--text); border-color:transparent; } .roleSegBtn:disabled{ opacity:.45; cursor:not-allowed; } button:focus-visible,.btn:focus-visible,.tab:focus-visible,.choice:focus-visible,.seg:focus-visible,.bottomNavBtn:focus-visible,.input:focus-visible,.teacherStudentRowBtn:focus-visible{ outline:none; box-shadow:var(--focus); } .tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .tab{ padding:14px 20px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:15px; font-weight:800; color:var(--muted); cursor:pointer; min-height:50px; min-width:120px; line-height:1; display:flex;align-items:center;justify-content:center; } .tab.active{color:var(--text); border-color:transparent; background:var(--chip)} .tab.locked{opacity:.70} .tab.locked::after{ content:"SOON"; margin-left:10px; font-size:11px; font-weight:900; letter-spacing:.10em; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); } #tabs{display:none !important} #bottomNav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); pointer-events:none; } #bottomNav .bottomNavBar{ pointer-events:auto; width:min(980px,100%); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:8px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 88%, transparent); box-shadow:var(--shadow); backdrop-filter:blur(8px); } .bottomNavBtn{ min-height:44px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-weight:800; cursor:pointer; padding:8px 10px; font-size:13px; white-space:nowrap; } .bottomNavBtn.active{ color:var(--text); border-color:transparent; background:var(--chip); } .bottomNavBtn:hover{transform:translateY(-1px)} .bottomNavBtn[hidden]{display:none !important} .grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; margin-top:14px; } @media (max-width:900px){ .grid{grid-template-columns:1fr} } .card{ border:1px solid var(--border); background:var(--surface-1); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); animation:fadeUp .28s ease; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(9,20,36,.12); border-color:color-mix(in srgb, var(--border) 65%, var(--text) 35%); } .card h3{margin:0 0 8px 0;font-size:14px;color:var(--muted);font-weight:900;letter-spacing:.08em;text-transform:uppercase} .homeGrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:14px; margin-top:14px; } .homeGrid .span2{grid-column:1 / -1} .homePremiumGrid{ display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-top:14px; } .homeSpanAll{grid-column:1 / -1} .homeHero{ background: linear-gradient(125deg, color-mix(in srgb, var(--chip) 44%, var(--card) 56%) 0%, color-mix(in srgb, var(--card) 85%, transparent) 58%, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 100%); } .homeHeroInner{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; } .homeHeroTitle{ font-size:28px; line-height:1.15; font-weight:950; letter-spacing:-.02em; margin-top:4px; font-family:"Solway", ui-serif, Georgia, serif; } .homeHeroSub{ margin-top:8px; color:var(--muted); font-size:13px; line-height:1.45; } .homeProgressCard .ringWrap{ align-items:flex-start; } .homeStatHeadline{ font-size:20px; font-weight:950; letter-spacing:-.01em; } .homeActionGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .homeRecommendRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .big{ font-size:64px; font-weight:950; letter-spacing:-1px; text-align:center; padding:10px 0; } .hint{color:var(--muted);font-size:13px;line-height:1.4} .choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px} @media(min-width:740px){ .choices{grid-template-columns:repeat(3,1fr)} } .choice{ border:1px solid var(--border); border-radius:14px; padding:12px; min-height:46px; font-weight:900; background:var(--card); cursor:pointer; } .choice:hover{filter:brightness(.98)} .choice.good{border-color:rgba(6,118,71,.35)} .choice.bad{border-color:rgba(180,35,24,.35)} .feedback{margin-top:10px;font-weight:900} .feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)} .divider{height:1px;background:var(--border);margin:12px 0} .segrow{display:flex;gap:8px;flex-wrap:wrap} .seg{ border:1px solid var(--border); background:var(--card); padding:10px 12px; border-radius:999px; cursor:pointer; font-weight:900; color:var(--muted); min-height:44px; } .seg.active{background:var(--chip);border-color:transparent;color:var(--text)} /* Ring */ .ringWrap{display:flex;gap:14px;align-items:center} .ring{ width:96px; height:96px; border-radius:999px; position:relative; display:grid; place-items:center; background: conic-gradient(var(--ring) var(--progress, 0deg), color-mix(in srgb, var(--border) 60%, transparent) 0deg); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); box-shadow: inset 0 2px 6px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06); } body.dark .ring{ background: conic-gradient(var(--ring) var(--progress, 0deg), rgba(255,255,255,.08) 0deg); box-shadow: inset 0 2px 6px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); } .ringInner{ width:74px; height:74px; border-radius:999px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%) 0%, var(--card) 100%); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); display:grid; place-items:center; font-weight:950; font-size:14px; box-shadow: inset 0 1px 3px rgba(0,0,0,.05); } .ring::after{ content:""; position:absolute; inset:-6px; border-radius:999px; background:radial-gradient(circle, color-mix(in srgb, var(--ring) 18%, transparent) 0%, transparent 70%); z-index:-1; } .toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:14px; padding:12px 14px; min-width:280px; display:none; z-index:99; } .toast b{display:block;margin-bottom:2px} .toast span{color:var(--muted);font-size:13px} .miniList{display:flex;flex-wrap:wrap;gap:8px} .miniTag{ border:1px solid var(--border); border-radius:999px; padding:8px 10px; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); font-weight:900; font-size:12px; color:var(--muted); } .listItem{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; background:var(--card); display:flex;justify-content:space-between;gap:10px;align-items:center; min-height:86px; } .listItem b{font-weight:950} .muted{color:var(--muted)} a, a:visited{color:inherit} .settingsGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .input{ width:100%; min-height:44px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); padding:10px 12px; transition:border-color .18s ease, box-shadow .18s ease; } .input::placeholder{color:var(--muted)} .input:focus{ border-color:transparent; box-shadow:var(--focus); } .note{ font-size:12px; color:var(--muted); line-height:1.4; } .bars{ margin-top:10px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; align-items:end; } .barCol{display:flex;flex-direction:column;align-items:center;gap:6px} .barTrack{ width:100%; height:70px; border-radius:10px; border:1px solid var(--border); background:var(--card); display:flex; align-items:flex-end; overflow:hidden; } .barFill{ width:100%; background:linear-gradient(180deg,#2f6cbf 0%, #7ea7dc 100%); min-height:2px; } .barLbl{ font-size:11px; color:var(--muted); font-weight:700; } .sparkWrap{ margin-top:12px; border:1px solid var(--border); border-radius:14px; background:var(--card); padding:8px; } .sparkSvg{ width:100%; height:74px; display:block; } .progressTrack{ width:100%; height:10px; border-radius:999px; border:1px solid var(--border); background:var(--card); overflow:hidden; margin-top:8px; } .progressFill{ height:100%; width:0%; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .24s ease; } .badgeHistory{ margin-top:10px; display:flex; flex-direction:column; gap:8px; } .winnerMain{ font-size:18px; font-weight:900; letter-spacing:.01em; } .winnerMeta{ margin-top:6px; color:var(--muted); font-size:13px; } .pager{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; justify-content:flex-end; } .finderRow{ display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; } .n5ModeRow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .n5TopMode{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .panelHeader{ position:sticky; top:0; z-index:2; background:var(--surface-1); margin:-14px -14px 12px -14px; padding:14px 14px 12px; border-bottom:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; } .panelHeader .hint{margin-top:4px} .segGroup{ margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px; border:1px solid var(--border); border-radius:999px; background:var(--card); } .segGroup .btn.small{ min-height:38px; border-radius:999px; padding:7px 10px; box-shadow:none; font-size:12px; font-weight:900; } .segGroup .btn.small:not(.primary){ background:transparent; color:var(--muted); } /* N5 workspace */ .practiceHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:6px; } .practiceHeaderLeft{ display:flex; flex-direction:column; gap:6px; min-width:0; } .practiceTitle{ font-size:28px; font-weight:950; letter-spacing:-.02em; margin:0; font-family:"Solway", ui-serif, Georgia, serif; } .practiceSub{ font-size:14px; color:var(--muted); line-height:1.55; margin:0; max-width:62ch; } .practiceActions{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; } .practicePrimaryRow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .practiceSecondaryRow{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:0; } .practiceSection{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); } .practiceChip{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); font-weight:900; font-size:12px; color:var(--muted); font-family:"Solway", ui-serif, Georgia, serif; } .miniLinkBtn{ border:none; background:transparent; color:var(--muted); font-weight:900; cursor:pointer; padding:8px 10px; border-radius:999px; font-family:"Solway", ui-serif, Georgia, serif; white-space:nowrap; } .miniLinkBtn:hover{ background:color-mix(in srgb, var(--card) 70%, var(--chip) 30%); color:var(--text); } .practiceDrawer{ border:1px solid var(--border); border-radius:24px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); padding:18px; margin-top:14px; box-shadow:0 18px 32px rgba(14,24,38,.05); } .tierPyramid { margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; } .tierRow { display:flex; gap:10px; } .tierRow.current .tierCircle.active{ box-shadow:0 0 14px rgba(0,0,0,.10); animation:tierGlow 1.4s ease-in-out infinite; } .tierCircle { appearance:none; padding:0; width:18px; height:18px; border-radius:999px; border:1px solid var(--border); background:var(--card); transition:all .2s ease; cursor:pointer; } .tierCircle.active { background:var(--chip); border-color:transparent; box-shadow:0 0 12px rgba(0,0,0,.08); } .tierCircle.locked { opacity:.35; } .tierTooltip{ position:absolute; bottom:-34px; left:50%; transform:translateX(-50%); border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:800; box-shadow:var(--shadow); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .16s ease; z-index:2; } .tierTooltip.show{opacity:1} .tierPyramid.tierUpgrade{ animation:tierUpgradePulse .36s ease; } @keyframes tierGlow{ 0%,100%{box-shadow:0 0 10px rgba(0,0,0,.08)} 50%{box-shadow:0 0 16px rgba(0,0,0,.14)} } @keyframes tierUpgradePulse{ 0%{transform:scale(.98)} 100%{transform:scale(1)} } .n5PracticeChoices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; } .n5PracticePrompt{ font-size:48px; font-weight:900; text-align:center; line-height:1.1; margin-top:8px; } .n5PracticeFeedback{ margin-top:10px; font-weight:900; } .n5PracticeFeedback.good{color:var(--good)} .n5PracticeFeedback.bad{color:var(--bad)} .n5ModeRow .btn{border-radius:12px} .n5StudyQuizPicker{ display:block; border:1px solid var(--border); border-radius:14px; padding:12px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } .n5StudyQuizPickerHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; } .n5StudyQuizGrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; } .n5StudyQuizOption{ min-height:42px; border-radius:12px; white-space:normal; line-height:1.15; } .n5QuizTypeTag{ width:max-content; margin:0 auto 8px; } .n5QuizInputRow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:10px; } .n5QuizInputRow[hidden]{ display:none !important; } .n5QuizNextBtn{ margin-top:10px; margin-left:auto; min-width:104px; } .n5QuizNextBtn[hidden]{ display:none !important; } @media(max-width:760px){ .n5StudyQuizPickerHead{ flex-direction:column; align-items:stretch; } .n5StudyQuizGrid{ grid-template-columns:1fr; } .n5QuizInputRow{ grid-template-columns:1fr; } .n5QuizInputRow .btn, .n5QuizNextBtn{ width:100%; } } #n5ContentCard #n5PracticePanel{ margin-top:0; } #n5MainGrid{ justify-items:center; margin-top:18px; } #n5ContentCard{ width:min(1040px,100%); margin-inline:auto; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); } .n5HeaderShell{ display:flex; flex-direction:column; gap:20px; } .n5HeaderShell h3{ margin:0; font-size:36px; line-height:1; letter-spacing:-.03em; } .n5HeroMain{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .n5HeroCopy{ display:flex; flex-direction:column; gap:8px; min-width:0; max-width:56ch; } .n5HeaderEyebrow, .n5MetaLabel, .n5StepNumber, .n5SetupLabel, .n5WorkspaceEyebrow, .n5FlowBadge, .n5ExamFactLabel{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .n5HeaderHint{ font-size:15px; line-height:1.55; max-width:48ch; } .n5HeroTools{ display:flex; align-items:flex-start; justify-content:flex-end; gap:12px; flex-wrap:wrap; min-width:min(430px,100%); } .n5StatusCard{ min-width:min(360px,100%); display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--border); border-radius:22px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); box-shadow:0 10px 18px rgba(14,24,38,.04); } .n5StatusHeadline{ font-size:16px; font-weight:900; line-height:1.35; } .n5StatusCounts{ line-height:1.5; white-space:normal; } .n5QuietAction{ background:transparent; box-shadow:none; color:var(--muted); min-height:46px; } .n5ControlGrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:16px; } .n5StepCard{ display:flex; flex-direction:column; justify-content:flex-start; gap:10px; min-width:0; padding:18px; border:1px solid var(--border); border-radius:24px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); box-shadow:0 10px 20px rgba(14,24,38,.04); transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease; } .n5StepCard:hover{ transform:translateY(-1px); box-shadow:0 18px 28px rgba(14,24,38,.06); } .n5StepHeading{ font-size:20px; font-weight:950; letter-spacing:-.01em; font-family:"Solway", ui-serif, Georgia, serif; } .n5StepSupporting{ font-size:13px; line-height:1.5; color:var(--muted); max-width:40ch; } .n5CategorySeg{ margin-top:2px; gap:10px; padding:10px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } .n5CategorySeg .btn.small, .n5SetRow .btn.small, .n5ExamEntryGrid .btn.small, .n5StageActions .btn.small, #n5QuizActionRow .btn.small, #n5QuizActionRow .miniLinkBtn, .n5HeroTools .btn.small{ display:flex; align-items:center; justify-content:center; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .n5CategorySeg .btn.small{ width:100%; min-height:52px; font-size:14px; padding:11px 16px; } .n5InlineActionRow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:stretch; } .n5ActionBtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; width:100%; min-height:96px; padding:16px 14px; border-radius:22px; text-align:center; overflow:hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 94%, var(--chip) 6%) 100%); box-shadow:none; } .n5ActionBtn:hover{ transform:translateY(-1px); } .n5ActionBtnTitle{ display:block; width:100%; font-size:15px; font-weight:950; line-height:1.2; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .n5ActionBtnHint{ display:block; width:100%; font-size:12px; font-weight:700; line-height:1.4; color:var(--muted); max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .n5ActionBtn.primary{ box-shadow:0 18px 28px rgba(14,24,38,.08); } .n5Workspace{ margin-top:2px; } .n5WorkspaceShell{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; align-items:start; } .n5FlowRail{ display:flex; flex-direction:column; gap:12px; } .n5FlowCard{ display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--border); border-radius:22px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); box-shadow:0 9px 18px rgba(14,24,38,.04); } .n5FlowCardPrimary{ background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); } .n5FlowTitle{ font-size:18px; font-weight:950; letter-spacing:-.01em; font-family:"Solway", ui-serif, Georgia, serif; } .n5FlowHint{ font-size:13px; line-height:1.5; color:var(--muted); } .n5WorkspaceMain{ display:flex; flex-direction:column; gap:14px; min-width:0; } .n5WorkspaceSurface{ border:1px solid var(--border); border-radius:28px; background: radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--chip) 7%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); padding:22px; box-shadow:0 14px 30px rgba(14,24,38,.06); } .n5WorkspaceSurface.n5PanelReveal{ animation:n5PanelReveal .22s ease; } @keyframes n5PanelReveal{ 0%{opacity:.72; transform:translateY(8px)} 100%{opacity:1; transform:translateY(0)} } .n5WorkspaceMeta{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:340px; } .n5WorkspaceStage{ margin-top:18px; padding:18px; border:1px solid var(--border); border-radius:24px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); box-shadow:0 10px 20px rgba(14,24,38,.04); } .n5StageHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .n5StageCopy{ display:flex; flex-direction:column; gap:5px; min-width:0; } .n5StageTitle{ font-size:20px; font-weight:950; letter-spacing:-.01em; font-family:"Solway", ui-serif, Georgia, serif; } .n5StageText{ line-height:1.55; max-width:62ch; } .n5StageActions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .n5WorkspaceSearchRow{ margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; } #n5WorkspaceSearch{ min-height:50px; border-radius:16px; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); } .n5WorkspaceStats{ min-height:50px; display:flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--border); border-radius:16px; background:var(--card); font-size:12px; font-weight:800; color:var(--muted); text-align:center; white-space:nowrap; } .n5WorkspaceFilters{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; } .n5FilterTag{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); font-size:12px; font-weight:800; color:var(--muted); } .n5WorkspaceGrid{ margin-top:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .n5PreviewCard{ min-height:152px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--border); border-radius:20px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); box-shadow:0 10px 18px rgba(14,24,38,.04); } .n5PreviewLead{ font-size:24px; font-weight:950; letter-spacing:-.02em; line-height:1.1; word-break:break-word; font-family:"Solway", ui-serif, Georgia, serif; } .n5PreviewLead.small{ font-size:18px; letter-spacing:-.01em; } .n5PreviewMeta{ display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:13px; line-height:1.5; } .n5PreviewFooter{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; font-weight:800; color:var(--muted); } .n5PreviewPill{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } .n5PreviewEmpty{ grid-column:1 / -1; padding:28px 18px; border:1px dashed color-mix(in srgb, var(--border) 70%, transparent); border-radius:20px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); text-align:center; color:var(--muted); line-height:1.55; } #n5QuizActionRow{ padding:14px 16px; border:1px solid var(--border); border-radius:22px; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); } #n5PracticeStartBtn{ min-width:170px; min-height:50px; padding-inline:20px; } .n5QuizSetupGrid{ display:grid; grid-template-columns:minmax(0,180px) 1fr; gap:16px; align-items:start; } .n5SetupBlock{ display:flex; flex-direction:column; gap:8px; min-width:0; } .n5CountField{ display:flex; flex-direction:column; gap:8px; } .n5CountField .input{ min-height:54px; border-radius:18px; font-size:28px; font-weight:900; padding:10px 14px; } .n5SetRow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .n5SetRow .btn.small{ min-height:44px; width:100%; padding-inline:12px; } .n5ExamEntry{ margin-top:16px; border:1px solid var(--border); border-radius:24px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); padding:18px; box-shadow:0 12px 22px rgba(14,24,38,.04); } .n5ExamEntryHead{ font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:11px; color:var(--muted); margin-bottom:12px; } .n5ExamOverview{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .n5ExamFact{ display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); } .n5ExamFact b{ font-size:18px; line-height:1.1; font-family:"Solway", ui-serif, Georgia, serif; } .n5ExamFact span:last-child{ font-size:12px; line-height:1.45; color:var(--muted); } #n5QuizArea{ margin-top:16px; padding:8px 0 2px; } #n5PracticeSummary{ margin-top:16px; padding:16px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); } .n5PanelFooter{ margin-top:16px; justify-content:flex-end; } #n5PracticeExitBtn{ background:transparent; color:var(--muted); box-shadow:none; } .n5FooterBar{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:20px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); } .n5FooterCopy{ display:flex; flex-direction:column; gap:4px; min-width:0; } .n5FooterStatus{ font-size:14px; font-weight:900; line-height:1.4; } .n5FooterCounts, .n5FooterMeta{ font-size:13px; line-height:1.5; color:var(--muted); } .n5ActionBtn:focus-visible, .n5CategorySeg .btn:focus-visible, #n5WorkspaceSearch:focus-visible, .n5PreviewCard:focus-within{ outline:2px solid color-mix(in srgb, var(--chip) 72%, white 28%); outline-offset:2px; } .n5BrowseModalCard{ width:min(1040px,96vw); max-height:min(84vh,920px); display:flex; flex-direction:column; gap:14px; padding:18px; overflow:hidden; } .n5BrowseModalHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .n5BrowseModalBody{ border:1px solid var(--border); border-radius:20px; background: radial-gradient(300px 160px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%), color-mix(in srgb, var(--card) 97%, var(--chip) 3%); padding:14px; max-height:min(56vh,620px); overflow:auto; } .n5BrowseModalMeta{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .n5Grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:stretch; } .n5Grid .listItem, .n5Grid .card{ height:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:14px; } .n5Grid .miniTag{ margin-top:10px; } #screenN5{position:relative} #screenN5.examActive #n5MainGrid{display:none !important} #screenN5.examActive #n5ExamOverlay{display:flex} body.examMode #bottomNav{display:none !important} .n5ExamEntryGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .n5ExamOverlay{ display:none; position:fixed; inset:0; z-index:88; background:var(--bg); color:var(--text); flex-direction:column; } .n5ExamTopbar{ position:sticky; top:0; z-index:2; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:blur(6px); } .n5ExamMeta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .n5ExamMeta .miniTag{ min-width:88px; text-align:center; } #n5ExamTimer.warn{ border-color:rgba(180,35,24,.32); color:var(--bad); } .n5ExamTitle{ text-align:center; font-weight:900; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .n5ExamBody{ flex:1; overflow:auto; padding:18px 12px calc(16px + env(safe-area-inset-bottom)); max-width:900px; width:100%; margin:0 auto; } .n5ExamPrompt{ font-size:13px; color:var(--muted); font-weight:800; letter-spacing:.03em; text-transform:uppercase; } .n5ExamQuestion{ margin-top:10px; font-size:46px; font-weight:900; letter-spacing:-.01em; line-height:1.1; text-align:center; word-break:break-word; } .n5ExamChoices{ margin-top:16px; display:grid; grid-template-columns:1fr; gap:10px; } .n5ExamChoice{ width:100%; min-height:48px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); font-weight:800; text-align:left; padding:10px 12px; cursor:pointer; } .n5ExamChoice.correct{ border-color:rgba(6,118,71,.38); background:color-mix(in srgb, var(--chip) 55%, var(--card) 45%); } .n5ExamChoice.wrong{ border-color:rgba(180,35,24,.38); background:color-mix(in srgb, #ffd9d5 32%, var(--card) 68%); } .n5ExamFeedback{ margin-top:12px; min-height:22px; font-weight:900; } .n5ExamFeedback.good{color:var(--good)} .n5ExamFeedback.bad{color:var(--bad)} .n5ExamResultScore{ margin-top:8px; font-size:28px; font-weight:950; letter-spacing:-.02em; } .n5ExamWeakList{ margin-top:10px; display:flex; flex-direction:column; gap:8px; } @media (min-width:760px){ .n5ExamChoices{grid-template-columns:repeat(2,minmax(0,1fr))} } .pageInfo{ font-size:12px; color:var(--muted); font-weight:800; min-width:84px; text-align:center; } .teacherHealthGrid{ margin-top:10px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .metricTile{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); padding:12px; min-height:88px; display:flex; flex-direction:column; justify-content:space-between; } .metricTile b{ font-size:30px; line-height:1; letter-spacing:-.02em; font-weight:950; } .metricTile .muted{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .teacherRows{ margin-top:10px; display:flex; flex-direction:column; gap:10px; } .radarRows{ margin-top:8px; display:flex; flex-direction:column; gap:10px; } .radarRow{ display:grid; grid-template-columns:minmax(88px,120px) minmax(54px,64px) 1fr auto; align-items:center; gap:8px; } .radarLabel{ font-weight:900; letter-spacing:.02em; } .radarPct{ font-weight:900; text-align:right; font-size:13px; } .radarTrack{ height:8px; border-radius:999px; border:1px solid var(--border); background:var(--card); overflow:hidden; } .radarFill{ height:100%; width:0%; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .2s ease; } .radarFocus{ margin-top:10px; font-weight:900; font-size:13px; color:var(--muted); } .teacherStudentRowBtn{ display:block; width:100%; cursor:pointer; transition:transform .14s ease, box-shadow .18s ease; } .teacherStudentRowBtn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(9,20,36,.10); } .teacherDrawerBack{ position:fixed; inset:0; z-index:85; background:rgba(8,14,24,.44); backdrop-filter:blur(3px); display:none; justify-content:flex-end; } .teacherDrawerBack.open{display:flex} .teacherDrawer{ width:min(420px,100%); height:100%; border-left:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); padding:14px 14px calc(14px + env(safe-area-inset-bottom)); overflow:auto; display:flex; flex-direction:column; gap:10px; outline:none; } .drawerWeek{ margin-top:2px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; align-items:end; } .drawerBar{ height:58px; border:1px solid var(--border); border-radius:10px; background:var(--card); overflow:hidden; display:flex; align-items:flex-end; } .drawerFill{ width:100%; background:linear-gradient(180deg,#2f6cbf 0%, #7ea7dc 100%); min-height:2px; } .drawerBarLbl{ margin-top:4px; text-align:center; font-size:10px; color:var(--muted); font-weight:800; } .nudgeMinRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; } @media (max-width:900px){ .teacherDrawerBack{align-items:flex-end} .teacherDrawer{ width:100%; height:min(70vh,640px); border-left:none; border-top:1px solid var(--border); border-radius:18px 18px 0 0; } } @keyframes fadeUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .modalBack{ position:fixed; inset:0; z-index:60; background:rgba(8,14,24,.46); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:14px; } .modalCard{ width:min(560px,96vw); border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:14px; } @keyframes sessionSummaryReveal{ from{opacity:0;transform:translateY(8px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } .sessionSummaryModalCard{ width:min(520px,96vw); padding:20px; border-radius:24px; animation:sessionSummaryReveal .18s ease; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%) 0%, var(--card) 100%); } .sessionSummaryTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .sessionSummaryEyebrow{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:900; } .sessionSummaryHeadline{ margin:6px 0 0; font-size:28px; line-height:1.12; letter-spacing:-.02em; font-family:"Solway", ui-serif, Georgia, serif; } .sessionSummaryScoreCard{ margin-top:16px; border:1px solid var(--border); border-radius:22px; padding:18px; background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); text-align:center; } .sessionSummaryScoreValue{ font-size:42px; line-height:1; font-weight:950; letter-spacing:-.04em; font-family:"Solway", ui-serif, Georgia, serif; } .sessionSummaryScoreMeta{ margin-top:10px; color:var(--muted); font-weight:800; } .sessionSummaryXpGain{ margin-top:10px; font-size:14px; font-weight:900; color:#2f6cbf; } .sessionSummaryXpGain.isGlow{ text-shadow:0 0 14px rgba(47,108,191,.28); transform:scale(1.02); transition:transform .18s ease, text-shadow .18s ease; } .sessionSummaryContext{ margin-top:8px; display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:12px; font-weight:900; } .sessionSummaryWeakWrap, .sessionSummaryReviewWrap{ margin-top:16px; border:1px solid var(--border); border-radius:20px; padding:14px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } .sessionSummarySectionTitle{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:900; } .sessionSummaryWeakChips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .sessionSummaryChip{ display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:800; } .sessionSummaryReviewList{ display:grid; gap:10px; margin-top:10px; } .sessionSummaryReviewItem{ border:1px solid var(--border); border-radius:16px; padding:12px; background:var(--card); } .sessionSummaryReviewPrompt{ font-weight:900; } .sessionSummaryReviewMeta{ margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5; } .sessionSummaryActions{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; } .onboardingBack{ position:fixed; inset:0; z-index:95; background:rgba(8,14,24,.36); backdrop-filter:blur(18px); display:none; align-items:center; justify-content:center; padding:18px; overflow:hidden; transition:background-color .45s ease, backdrop-filter .45s ease; } .onboardingBack.open{display:flex} .onboardingBack::before{ content:""; position:absolute; inset:-24%; background: radial-gradient(circle at 16% 22%, rgba(76,132,255,.56), transparent 28%), radial-gradient(circle at 80% 8%, rgba(113,210,255,.44), transparent 26%), radial-gradient(circle at 74% 78%, rgba(255,205,123,.34), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.2), rgba(36,58,90,.22)); filter:blur(48px); opacity:.82; transform:scale(1.05); animation:onboardingDrift 18s ease-in-out infinite alternate; transition:background .55s ease, opacity .55s ease; } .onboardingBack::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.14); pointer-events:none; } .onboardingBack[data-ui-language="ja"]::before, .onboardingBack[data-explanation-language="ja"]::before{ background: radial-gradient(circle at 18% 24%, rgba(255,132,157,.54), transparent 28%), radial-gradient(circle at 82% 10%, rgba(255,229,238,.5), transparent 28%), radial-gradient(circle at 74% 78%, rgba(158,190,255,.36), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.18), rgba(105,42,64,.16)); } .onboardingBack[data-ui-language="tl"]::before, .onboardingBack[data-explanation-language="tl"]::before{ background: radial-gradient(circle at 16% 18%, rgba(43,174,142,.46), transparent 28%), radial-gradient(circle at 84% 12%, rgba(255,218,99,.44), transparent 27%), radial-gradient(circle at 70% 78%, rgba(255,126,101,.34), transparent 31%), linear-gradient(135deg, rgba(255,255,255,.18), rgba(35,92,112,.16)); } @keyframes onboardingDrift{ 0%{transform:translate3d(-1.5%, -1%, 0) scale(1.06)} 100%{transform:translate3d(1.5%, 1%, 0) scale(1.1)} } .onboardingCard{ width:min(720px,96vw); max-height:min(92vh,900px); overflow:auto; position:relative; z-index:1; border:1px solid color-mix(in srgb, var(--border) 76%, rgba(255,255,255,.42)); border-radius:26px; background: radial-gradient(640px 220px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%), color-mix(in srgb, var(--card) 88%, rgba(255,255,255,.78)); box-shadow:0 28px 70px rgba(9,20,36,.22); backdrop-filter:blur(24px) saturate(1.12); padding:18px; display:grid; gap:14px; } .onboardingTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .onboardingStepMeta{ display:grid; gap:6px; } .onboardingStepEyebrow{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .onboardingDots{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .onboardingDot{ width:9px; height:9px; border-radius:999px; background:color-mix(in srgb, var(--border) 84%, transparent); transition:transform .18s ease, background-color .18s ease; } .onboardingDot.active{ width:22px; background:var(--text); } .onboardingBody{ display:grid; gap:14px; } .onboardingPane{ display:none; gap:14px; } .onboardingPane.active{ display:grid; } .onboardingHero{ display:grid; gap:12px; padding:20px; border:1px solid var(--border); border-radius:24px; background: linear-gradient(135deg, color-mix(in srgb, var(--chip) 24%, var(--card) 76%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 86%), var(--surface-1); } .onboardingHeroTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .onboardingLanguageSelectWrap{ display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--card) 86%, rgba(255,255,255,.42)); color:var(--muted); font-size:13px; font-weight:900; white-space:nowrap; } .onboardingLanguageSelectWrap select{ border:0; background:transparent; color:var(--text); font:inherit; outline:none; cursor:pointer; } .onboardingTitle{ margin:0; font-size:clamp(30px,4.2vw,46px); line-height:1; letter-spacing:-.04em; font-family:"Solway", ui-serif, Georgia, serif; } .onboardingLead{ max-width:50ch; color:var(--muted); font-size:15px; line-height:1.6; } .onboardingSupportText{ max-width:54ch; color:color-mix(in srgb, var(--muted) 88%, var(--text) 12%); font-size:13px; line-height:1.55; font-weight:700; } .onboardingWarning{ padding:10px 12px; border:1px solid color-mix(in srgb, var(--border) 78%, var(--bad) 22%); border-radius:14px; background:color-mix(in srgb, var(--bad) 8%, var(--card) 92%); color:var(--muted); font-size:12px; line-height:1.5; font-weight:750; } .onboardingAuthOptions{ display:grid; gap:10px; } .onboardingAuthOption{ min-height:48px; width:100%; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; font-weight:900; cursor:pointer; transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } .onboardingAuthOption:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(9,20,36,.08); } .onboardingAuthOption.isComingSoon{ opacity:.58; cursor:not-allowed; } .onboardingAuthOption b{ color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; } .onboardingGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .onboardingChoice{ width:100%; padding:14px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); text-align:left; display:grid; gap:6px; cursor:pointer; transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } .onboardingChoice:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(9,20,36,.08); } .onboardingChoice.active{ border-color:transparent; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 28%, var(--card) 72%) 0%, color-mix(in srgb, var(--card) 99%, transparent) 84%), var(--surface-1); box-shadow:0 12px 24px rgba(9,20,36,.08); } .onboardingChoice.isComingSoon{ opacity:.58; cursor:not-allowed; } .onboardingChoiceLabel{ font-weight:900; font-size:15px; line-height:1.25; } .onboardingChoiceText{ font-size:12px; line-height:1.45; color:var(--muted); } .onboardingChipRow{ display:flex; flex-wrap:wrap; gap:8px; } .onboardingLanguageGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .onboardingChip{ min-height:40px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-weight:800; color:var(--muted); cursor:pointer; transition:background-color .18s ease, border-color .18s ease, color .18s ease; } .onboardingChip.active{ color:var(--text); border-color:transparent; background:color-mix(in srgb, var(--chip) 74%, var(--card) 26%); } .onboardingChip.isComingSoon{ opacity:.58; cursor:not-allowed; display:inline-grid; gap:2px; justify-items:center; } .onboardingChip.isComingSoon span{ font-size:10px; color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.05em; } .onboardingField{ display:grid; gap:6px; } .onboardingField label{ font-size:12px; font-weight:800; color:var(--muted); } .onboardingField .input{ width:100%; } .onboardingSearchField{ gap:10px; } .onboardingSelectedValue{ min-height:34px; display:flex; align-items:center; padding:8px 11px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); color:var(--muted); font-size:12px; font-weight:850; } .onboardingCountryResults{ display:grid; gap:7px; max-height:270px; overflow:auto; padding:2px; } .onboardingCountryOption{ width:100%; min-height:42px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; cursor:pointer; font-weight:850; transition:background-color .18s ease, border-color .18s ease, transform .14s ease; } .onboardingCountryOption:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--card) 84%, var(--chip) 16%); } .onboardingCountryOption.active{ border-color:transparent; background:color-mix(in srgb, var(--chip) 66%, var(--card) 34%); } .onboardingCountryOption b{ color:var(--muted); font-size:11px; letter-spacing:.08em; } .onboardingCountryEmpty{ padding:12px; border:1px dashed var(--border); border-radius:14px; color:var(--muted); font-size:13px; font-weight:800; } .onboardingAssessmentCard, .onboardingRecommendationCard, .onboardingReadyCard{ display:grid; gap:12px; padding:16px; border:1px solid var(--border); border-radius:22px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%); } .onboardingRecommendationTitle, .onboardingReadyTitle{ font-size:24px; line-height:1.15; font-weight:950; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; } .onboardingMiniList{ display:grid; gap:8px; } .onboardingMiniRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } .onboardingMiniRow span{ color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } .onboardingActions{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; } .onboardingActions .row{ gap:8px; flex-wrap:wrap; } .onboardingActions .btn{ min-width:140px; } .studentHeroMeta, .studentHeroAction, .studentQuickActionGrid, .studentExtraDetails, .aiMobileContextRow{ display:none; } @media (max-width:768px){ body.mobile-layout.onboarding-open{ overflow:hidden; } body.mobile-layout.onboarding-open .appMainScroll{ overflow:hidden; } body.mobile-layout .onboardingBack{ align-items:flex-end; justify-content:center; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); } body.mobile-layout .onboardingCard{ width:min(100%, 520px); max-height:min(91svh, 820px); border-radius:24px 24px 18px 18px; padding:14px 14px 12px; gap:12px; box-shadow:0 20px 40px rgba(9,20,36,.16); } body.mobile-layout .onboardingTop{ gap:8px; align-items:flex-start; } body.mobile-layout .onboardingStepMeta{ gap:3px; } body.mobile-layout .onboardingStepEyebrow{ font-size:11px; line-height:1.2; } body.mobile-layout #onboardingStepHint{ font-size:12px; line-height:1.4; } body.mobile-layout .onboardingDots{ gap:4px; justify-content:flex-end; } body.mobile-layout .onboardingDot{ width:8px; height:8px; } body.mobile-layout .onboardingDot.active{ width:16px; } body.mobile-layout .onboardingBody, body.mobile-layout .onboardingPane{ gap:12px; } body.mobile-layout .onboardingHero, body.mobile-layout .onboardingAssessmentCard, body.mobile-layout .onboardingRecommendationCard, body.mobile-layout .onboardingReadyCard{ padding:14px; gap:10px; border-radius:22px; } body.mobile-layout .onboardingTitle{ font-size:26px; line-height:1.02; } body.mobile-layout .onboardingRecommendationTitle, body.mobile-layout .onboardingReadyTitle{ font-size:22px; line-height:1.12; } body.mobile-layout .onboardingLead{ font-size:14px; line-height:1.48; max-width:none; margin:0; } body.mobile-layout .onboardingGrid{ grid-template-columns:1fr; gap:8px; } body.mobile-layout .onboardingChoice{ min-height:78px; padding:12px 13px; gap:5px; border-radius:18px; } body.mobile-layout .onboardingChoiceLabel{ font-size:14px; line-height:1.2; } body.mobile-layout .onboardingChoiceText{ font-size:12px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.mobile-layout .onboardingChipRow{ gap:6px; } body.mobile-layout .onboardingLanguageGrid{ grid-template-columns:1fr; } body.mobile-layout .onboardingChip{ min-height:34px; padding:7px 11px; font-size:11px; } body.mobile-layout .onboardingMiniList{ gap:6px; } body.mobile-layout .onboardingMiniRow{ padding:9px 10px; gap:8px; border-radius:14px; } body.mobile-layout .onboardingMiniRow span{ font-size:11px; } body.mobile-layout .onboardingField{ gap:5px; } body.mobile-layout .onboardingField label{ font-size:11px; line-height:1.25; } body.mobile-layout .onboardingField .input{ min-height:42px; font-size:15px; border-radius:14px; } body.mobile-layout .onboardingActions{ flex-direction:column-reverse; align-items:stretch; gap:8px; } body.mobile-layout .onboardingActions .row{ width:100%; display:grid; grid-template-columns:1fr; } body.mobile-layout .onboardingActions .btn{ width:100%; min-width:0; min-height:48px; border-radius:15px; } body.mobile-layout #onboardingPane1 .onboardingHero{ gap:8px; padding:16px 14px; } body.mobile-layout .onboardingHeroTop{ align-items:flex-start; } body.mobile-layout .onboardingLanguageSelectWrap{ min-height:34px; padding:6px 8px; font-size:12px; } body.mobile-layout #onboardingPane1 .hint{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; } body.mobile-layout #onboardingPane1 .onboardingMiniList{ gap:5px; } body.mobile-layout #onboardingPane1 .onboardingMiniRow{ padding:8px 10px; } body.mobile-layout #onboardingPane2 .onboardingAssessmentCard{ gap:12px; } body.mobile-layout #onboardingPane2 .onboardingRecommendationTitle{ font-size:24px; line-height:1.12; } body.mobile-layout #onboardingPane2 .onboardingField + .onboardingField{ margin-top:2px; } body.mobile-layout #onboardingPane2 .onboardingGrid{ gap:8px; } body.mobile-layout #onboardingPane3 .onboardingAssessmentCard{ gap:10px; } body.mobile-layout #onboardingPane3 .onboardingRecommendationTitle{ font-size:24px; line-height:1.12; } body.mobile-layout #onboardingPane3 .onboardingLead{ font-size:13px; line-height:1.46; } body.mobile-layout .onboardingCountryResults{ max-height:238px; } body.mobile-layout .onboardingCountryOption{ min-height:40px; padding:8px 10px; } body.mobile-layout #onboardingPane4 .onboardingRecommendationCard, body.mobile-layout #onboardingPane5 .onboardingReadyCard{ gap:10px; } body.mobile-layout #onboardingPane4 .onboardingRecommendationTitle, body.mobile-layout #onboardingPane5 .onboardingReadyTitle{ font-size:24px; } body.mobile-layout #onboardingPane4 .onboardingMiniRow, body.mobile-layout #onboardingPane5 .onboardingMiniRow{ align-items:flex-start; } body.mobile-layout #onboardingPane5 .onboardingLead{ font-size:13px; } body.mobile-layout #onboardingSecondaryBtn{ min-height:42px; } } .kanaPracticeHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; } .kanaToolbar{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .kanaQuestionShell{ margin-top:14px; padding:16px; border:1px solid var(--border); border-radius:24px; background: radial-gradient(240px 120px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%), color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } .kanaPromptLabel{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--chip) 68%, transparent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .kanaChartModalCard{ width:min(880px,96vw); max-height:min(84vh,920px); display:flex; flex-direction:column; gap:14px; padding:18px; overflow:hidden; } .kanaChartHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .kanaChartSeg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .kanaChartBody{ flex:1 1 auto; overflow:auto; padding:16px; border:1px solid var(--border); border-radius:24px; background: radial-gradient(320px 180px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%), color-mix(in srgb, var(--card) 97%, var(--chip) 3%); display:flex; flex-direction:column; gap:16px; } .kanaChartSection{ display:flex; flex-direction:column; gap:10px; } .kanaChartSectionHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .kanaChartRows{ display:flex; flex-direction:column; gap:10px; } .kanaChartRow{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } .kanaChartRow.isCompact{ grid-template-columns:repeat(3,minmax(0,1fr)); } .kanaChartCell{ min-height:92px; padding:14px 10px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; box-shadow:0 12px 28px rgba(15,23,42,.06); } .kanaChartChar{ font-size:30px; font-weight:900; line-height:1; letter-spacing:-.03em; } .kanaChartRomaji{ font-size:13px; font-weight:700; color:var(--muted); } .kanaChartFooter{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .kanaAssessmentModalCard{ width:min(640px,96vw); display:flex; flex-direction:column; gap:14px; padding:18px; } .kanaAssessmentHero{ display:flex; flex-direction:column; gap:10px; } .kanaAssessmentEyebrow{ display:inline-flex; align-items:center; gap:8px; width:max-content; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--chip) 72%, transparent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .kanaAssessmentHero h3{ margin:0; font-size:28px; line-height:1.06; letter-spacing:-.03em; } .kanaAssessmentBullets{ display:grid; gap:8px; margin:0; padding:0; list-style:none; } .kanaAssessmentBullets li{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } .kanaAssessmentBullets li::before{ content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(135deg,#2f6cbf 0%, #7ea7dc 100%); margin-top:6px; flex:0 0 auto; } .kanaAssessmentHint{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:16px; border:1px dashed color-mix(in srgb, var(--border) 80%, var(--text) 20%); background:color-mix(in srgb, var(--card) 95%, transparent); color:var(--muted); font-size:13px; font-weight:700; } .kanaAssessmentProgressHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .kanaAssessmentProgressBar{ width:100%; height:10px; border-radius:999px; background:color-mix(in srgb, var(--border) 80%, transparent); overflow:hidden; } .kanaAssessmentProgressFill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .22s ease; } .kanaAssessmentQuestionShell{ display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid var(--border); border-radius:24px; background: radial-gradient(240px 140px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%), color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } .kanaAssessmentQuestionMeta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .kanaAssessmentScriptTag{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--chip) 72%, transparent); font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .kanaAssessmentChar{ font-size:clamp(52px, 10vw, 88px); font-weight:900; letter-spacing:-.04em; line-height:1; text-align:center; } .kanaAssessmentChoices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kanaAssessmentFooter{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .kanaAssessmentResult{ display:flex; flex-direction:column; gap:14px; padding:16px; border:1px solid var(--border); border-radius:24px; background: radial-gradient(240px 140px at 0% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%), color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } .kanaAssessmentResultGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .kanaAssessmentMetric{ padding:12px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); display:flex; flex-direction:column; gap:6px; } .kanaAssessmentMetricLabel{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .kanaAssessmentMetricValue{ font-size:24px; font-weight:900; letter-spacing:-.03em; } .kanaAssessmentWeakList{ display:flex; flex-wrap:wrap; gap:8px; } .kanaAssessmentWeakChip{ min-width:40px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); font-weight:900; text-align:center; } .kanaAssessmentConfusions{ display:grid; gap:8px; } .kanaAssessmentConfusionRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } .kanaAssessmentConfusionKana{ font-size:22px; font-weight:900; line-height:1; } .kanaAssessmentConfusionMeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:13px; font-weight:700; } .kanaAssessmentActions{ display:flex; gap:8px; flex-wrap:wrap; } .kanaAssessmentResultDetailGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .kanaAssessmentResultDetail{ padding:12px 14px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); display:flex; flex-direction:column; gap:6px; } .kanaAssessmentResultDetailValue{ font-size:18px; font-weight:900; letter-spacing:-.02em; } .n5AssessmentQuestionLead{ font-size:clamp(22px, 4vw, 32px); font-weight:900; letter-spacing:-.02em; line-height:1.2; } .n5AssessmentCategoryRows{ display:grid; gap:10px; } .n5AssessmentCategoryRow{ display:grid; grid-template-columns:minmax(78px,110px) minmax(56px,72px) 1fr; align-items:center; gap:10px; } .n5AssessmentCategoryLabel{ font-weight:900; letter-spacing:.02em; } .n5AssessmentCategoryPct{ font-weight:900; text-align:right; color:var(--muted); font-size:13px; } .n5AssessmentCategoryTrack{ height:10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--border) 80%, transparent); overflow:hidden; } .n5AssessmentCategoryFill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .22s ease; } .n5AssessmentRecommendation{ padding:12px 14px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); display:flex; flex-direction:column; gap:6px; } @media (max-width:740px){ .kanaAssessmentModalCard{ padding:16px; } .kanaAssessmentHero h3{ font-size:24px; } .kanaAssessmentChoices, .kanaAssessmentResultGrid, .kanaAssessmentResultDetailGrid{ grid-template-columns:1fr; } .kanaAssessmentFooter{ align-items:flex-start; } } #payModalCard{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); } .payModalPrice{ margin-top:10px; font-size:14px; font-weight:900; color:var(--muted); } #premiumModalCard{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); } .premiumModalPrice{ margin-top:10px; font-size:14px; font-weight:900; color:var(--muted); } .aiProgress{ margin-top:8px; height:6px; border-radius:999px; background:var(--border); overflow:hidden; } .aiProgressInner{ height:100%; width:40%; border-radius:999px; background:color-mix(in srgb, var(--muted) 42%, transparent); animation:aiLoad 1.2s infinite ease-in-out alternate; } @keyframes aiLoad{ from{width:20%} to{width:80%} } @media (prefers-reduced-motion: reduce){ .aiProgressInner{animation:none;width:60%} } .skel{ display:flex; flex-direction:column; gap:8px; } .skelLine,.skelBlock{ border-radius:10px; border:1px solid var(--border); background: linear-gradient(90deg, color-mix(in srgb, var(--card) 85%, var(--border) 15%) 0%, color-mix(in srgb, var(--card) 75%, var(--border) 25%) 50%, color-mix(in srgb, var(--card) 85%, var(--border) 15%) 100%); background-size:220% 100%; animation:skelShift 1.3s ease-in-out infinite; } .skelLine{height:14px} .skelBlock{height:88px;margin-top:2px} @keyframes skelShift{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} } @media (prefers-reduced-motion: reduce){ .skelLine,.skelBlock{animation:none} } .flashCardFront{ margin-top:10px; min-height:128px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); display:grid; align-items:center; justify-content:center; align-content:center; gap:8px; cursor:pointer; user-select:none; text-align:center; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .flashFrontMain{ font-size:clamp(36px, 8vw, 56px); line-height:1; font-weight:950; } .flashFrontReading, .flashFrontRomaji{ font-size:14px; line-height:1.25; font-weight:850; color:var(--muted); } .n5FlashLanguageIndicator{ width:max-content; max-width:100%; margin-bottom:8px; } .flashCardFront:hover{ border-color:color-mix(in srgb, var(--border) 55%, var(--text) 45%); } .flashModeSeg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:6px; margin-top:10px; border:1px solid var(--border); border-radius:999px; background:var(--card); } .flashModeBtn{ min-height:34px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font-weight:800; font-size:12px; cursor:pointer; padding:0 10px; line-height:1.1; } .flashModeBtn.active{ background:var(--chip); color:var(--text); } .flashTapHint{ text-align:center; margin-top:8px; } .flashRevealPanel{ display:none; margin-top:10px; box-shadow:none; width:100%; opacity:0; transform:translateY(6px); } .flashRevealPanel.revealIn{ display:block; animation:flashRevealIn .2s ease forwards; } .flashCardFront.popIn{ animation:flashCardPop .2s ease; } @keyframes flashRevealIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } @keyframes flashCardPop{ from{transform:scale(.98)} to{transform:scale(1)} } .levelGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; } .levelBtn{ min-height:44px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); font-weight:800; cursor:pointer; } .levelBtn.active{ border-color:transparent; background:var(--chip); } @media (max-width:900px){ .homeGrid,.homePremiumGrid{grid-template-columns:1fr} #bottomNav .bottomNavBar{grid-template-columns:repeat(5,minmax(0,1fr))} .settingsGrid{grid-template-columns:1fr} .levelGrid{grid-template-columns:repeat(2,minmax(0,1fr))} .n5Grid{grid-template-columns:repeat(2,minmax(0,1fr))} .n5ModeRow{grid-template-columns:repeat(2,minmax(0,1fr))} .segGroup{grid-template-columns:repeat(2,minmax(0,1fr))} .homeActionGrid{grid-template-columns:1fr} .homeHeroTitle{font-size:24px} .n5PracticePrompt{font-size:42px} .n5ExamQuestion{font-size:38px} .n5ExamEntryGrid{grid-template-columns:1fr} .radarRow{ grid-template-columns:minmax(70px,100px) minmax(48px,58px) 1fr auto; } } @media (max-width:760px){ .wrap{padding:12px 10px calc(112px + env(safe-area-inset-bottom))} #bottomNav .bottomNavBar{width:min(760px,100%)} .topbar{padding:9px 10px} .row{gap:8px} .n5Grid{grid-template-columns:1fr} .headerActions{gap:6px;width:100%;justify-content:flex-start} .roleSeg{width:100%;grid-template-columns:repeat(2,1fr)} .topbar{align-items:flex-start} .flashModeSeg{grid-template-columns:1fr} .panelHeader{ position:static; margin:-14px -14px 10px -14px; } .practicePrimaryRow{ grid-template-columns:1fr; } } @media (min-width:769px){ .wrap{ max-width:1280px; padding:20px 20px 48px; } .topbar{ top:16px; min-height:78px; gap:18px; padding:14px 18px; border-radius:24px; box-shadow:0 20px 40px rgba(12,23,38,.09); } .brand b{font-size:22px} .headerActions{gap:10px} .card{ padding:18px; border-radius:22px; box-shadow:0 18px 34px rgba(12,23,38,.08); } .card h3{ font-size:12px; letter-spacing:.1em; } .miniTag{ padding:9px 12px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } .listItem{ min-height:92px; padding:14px; border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #bottomNav{ position:sticky; left:auto; right:auto; bottom:auto; top:110px; padding:16px 0 0; justify-content:stretch; z-index:70; pointer-events:auto; } #bottomNav .bottomNavBar{ width:100%; gap:10px; padding:10px; border-radius:24px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); background:color-mix(in srgb, var(--card) 92%, transparent); box-shadow:0 18px 36px rgba(12,23,38,.08); } .bottomNavBtn{ min-height:48px; padding:10px 14px; border-radius:16px; font-size:14px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } .bottomNavBtn.active{ background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 72%, var(--card) 28%) 0%, color-mix(in srgb, var(--chip) 46%, var(--card) 54%) 100%); box-shadow:0 10px 22px rgba(27,50,90,.10); } body.dark .bottomNavBtn.active{ box-shadow:0 12px 22px rgba(3,10,20,.34); } #screenHome{margin-top:18px !important} .homePremiumGrid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; align-items:start; } .homeHero.homeSpanAll{ grid-column:1 / -1; padding:26px 28px; border-radius:28px; overflow:hidden; background: radial-gradient(780px 260px at 100% 0%, color-mix(in srgb, var(--chip) 28%, transparent), transparent 64%), linear-gradient(135deg, color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%); } .homeHeroInner{ display:grid; grid-template-columns:minmax(0,1.35fr) auto; gap:18px; align-items:end; } .homeHeroTitle{ margin-top:6px; font-size:clamp(36px,4vw,50px); line-height:1.02; letter-spacing:-.04em; } .homeHeroSub{ margin-top:12px; max-width:54ch; font-size:15px; line-height:1.55; } .homeProgressCard{ grid-column:span 7; min-height:248px; padding:24px; } .homeMissionCard{ grid-column:span 5; min-height:248px; } .homeRecommendationCard, .homeQuickStatsCard, .homeTierCard{ grid-column:span 4; min-height:208px; } .homeLeaderboardCard{ grid-column:span 7; } .homeWinnerCard{ grid-column:span 5; } .homeProgressCard .ring{ width:108px; height:108px; } .homeProgressCard .ringInner{ width:82px; height:82px; } .homeStatHeadline{ font-size:24px; letter-spacing:-.03em; } .homeActionGrid{ gap:10px; margin-top:12px; } .homeActionGrid .btn{ width:100%; } .homeRecommendRow{ align-items:flex-start; gap:16px; } #leaderList{gap:12px !important} .winnerMain{ font-size:28px; letter-spacing:-.02em; } .winnerMeta{ font-size:14px; line-height:1.5; } #screenKana .grid{ grid-template-columns:minmax(0,900px); justify-content:center; gap:18px; align-items:start; } #screenKana .kanaJourneyCard{ padding:24px; background: radial-gradient(380px 220px at 0% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%), var(--surface-1); } #screenKana .kanaJourneyHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } #screenKana .kanaJourneyEyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--chip) 72%, transparent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenKana .kanaJourneyTitle{ margin:10px 0 0; font-size:clamp(28px, 4vw, 36px); letter-spacing:-.03em; line-height:1.05; } #screenKana .kanaJourneyMeta{ display:flex; gap:8px; flex-wrap:wrap; } #screenKana .kanaJourneyGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; } #screenKana .kanaJourneyBlock{ display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--border); border-radius:22px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } #screenKana .kanaFocusChips{ display:flex; flex-wrap:wrap; gap:8px; } #screenKana .kanaFocusChip{ min-width:44px; padding:10px 12px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); font-weight:900; text-align:center; } #screenKana .kanaFocusChip.isEmpty{ min-width:0; font-weight:700; color:var(--muted); } #screenKana .kanaQuickActions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenKana .kanaPracticePanel{ padding:26px; background: radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 70%), var(--surface-1); } #screenKana .kanaModeTabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } #screenKana .kanaSetTabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } #screenKana .kanaModeTabs .seg, #screenKana .kanaSetTabs .seg{ justify-content:center; text-align:center; } #screenKana .big{ min-height:240px; margin-top:14px; padding:18px; border:none; border-radius:22px; background:transparent; font-size:clamp(108px,11vw,168px); } #screenKana .kanaActionBar{ margin-top:16px; gap:10px; justify-content:center; } #screenKana .kanaActionBar .btn{ flex:0 0 auto; min-width:136px; } #screenKana .choices{ margin-top:18px; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); } #screenKana .choice{ min-height:88px; border-radius:18px; font-size:22px; } #screenKana .feedback{ margin-top:14px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } #screenKana .feedback:empty{ display:none; } #screenN5 .grid{ grid-template-columns:minmax(0,1040px); justify-content:center; gap:18px; align-items:start; } #n5ContentCard{ min-height:560px; width:min(1024px,100%); padding:0 24px 24px; border-radius:28px; } #n5ContentCard .panelHeader{ margin:-24px -24px 22px -24px; padding:24px 24px 22px; border-radius:28px 28px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); } #screenN5 .n5HeroMain{ align-items:flex-start; } #screenN5 .n5ControlGrid{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); } #screenN5 .n5StepCard{ min-height:228px; } #screenN5 .n5WorkspaceShell{ grid-template-columns:220px minmax(0,1fr); } #screenN5 .n5WorkspaceSurface{ padding:24px; } #n5Search{ min-height:48px; border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #n5List{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } #n5List .listItem, #n5List .card{ min-height:176px; border-radius:20px; align-items:flex-start; flex-direction:column; justify-content:space-between; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 0%, color-mix(in srgb, var(--card) 92%, var(--chip) 8%) 100%); } .practicePrimaryRow{ gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); } #screenN5 .n5InlineActionRow{ grid-template-columns:repeat(4,minmax(0,1fr)); } #screenN5 .n5ActionBtn{ min-height:100px; } #screenN5 .n5WorkspaceGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenN5 .n5ExamOverview{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenN5 .n5ExamEntryGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenN5 .n5QuizSetupGrid{ grid-template-columns:minmax(0,180px) 1fr; } .n5PracticeChoices{ gap:12px; } .n5ExamChoices{ gap:12px; } #n5ExamQuestionWrap, #n5ExamResultWrap, #n5ExamEmptyWrap, .modalCard{ border-radius:24px; } #studentStatsView{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; } #studentStatsView > .card{ position:relative; overflow:hidden; grid-column:span 6; border-radius:24px; background:var(--surface-1); } #studentStatsView > .card::before{ content:""; position:absolute; inset:0; background:radial-gradient(320px 180px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%); pointer-events:none; } #studentStatsView > .card > *{ position:relative; z-index:1; } #studentStatsView > .studentSummaryCard{ grid-column:span 7; background: radial-gradient(460px 220px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%), linear-gradient(135deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%); } #studentStatsView > .studentProfileCard, #studentStatsView > .studentHistoryCard{ display:none; } #studentStatsView > .studentWeakCard{ grid-column:span 5; } #studentStatsView > .studentCategoryCard, #studentStatsView > .studentWeekCard{ grid-column:span 6; } #studentStatsView > .studentMilestoneCard{ grid-column:1 / -1; } #screenStudent #studentMiniRing{ width:120px; height:120px; } #screenStudent #studentMiniRing .ringInner{ width:86px; height:86px; } #screenStudent .studentSectionIntro{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; } #screenStudent .studentSectionTitle{ font-size:24px; line-height:1.1; font-weight:950; letter-spacing:-.02em; margin:2px 0 0; font-family:"Solway", ui-serif, Georgia, serif; } #screenStudent .studentSummaryBody{ display:grid; grid-template-columns:minmax(240px,.92fr) minmax(0,1.08fr); gap:18px; align-items:center; } #screenStudent .studentSummaryRingBlock{ display:flex; flex-direction:column; gap:14px; } #screenStudent .studentOverviewHero{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } #screenStudent .studentRingContent{ display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center; } #screenStudent .studentRingLabel{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:900; } #screenStudent .studentRingValue{ font-size:clamp(28px,3.6vw,42px); line-height:1; font-weight:950; letter-spacing:-.03em; } #screenStudent .studentRingSub{ font-size:11px; line-height:1.35; color:var(--muted); max-width:92px; } #screenStudent .studentSummaryFocus{ display:flex; flex-direction:column; gap:12px; min-width:0; flex:1 1 220px; } #screenStudent .studentSummaryHeadline{ font-size:24px; line-height:1.2; font-weight:950; letter-spacing:-.02em; font-family:"Solway", ui-serif, Georgia, serif; } #screenStudent .studentIdentityShell{ display:grid; gap:16px; } #screenStudent .studentIdentityHeader{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:16px; align-items:center; } #screenStudent .studentIdentityProfile{ display:flex; align-items:center; gap:14px; min-width:0; } #screenStudent .studentIdentityAvatar{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; font-size:20px; line-height:1; font-weight:950; letter-spacing:-.03em; color:var(--text); border:1px solid color-mix(in srgb, var(--chip) 34%, var(--border) 66%); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, white 74%, var(--chip) 26%), transparent 58%), color-mix(in srgb, var(--card) 88%, var(--chip) 12%); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } #screenStudent .studentIdentityMeta{ min-width:0; display:grid; gap:6px; } #screenStudent .studentIdentityName{ font-size:24px; line-height:1.08; font-weight:950; letter-spacing:-.03em; overflow-wrap:anywhere; font-family:"Solway", ui-serif, Georgia, serif; } #screenStudent .studentIdentitySub{ font-size:13px; line-height:1.5; color:var(--muted); } #screenStudent .studentLevelBadge{ display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--chip) 30%, var(--border) 70%); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); font-size:12px; font-weight:900; letter-spacing:.02em; color:var(--text); width:max-content; transition:transform .2s ease; } #screenStudent .studentLevelBadge.isLevelUp{ transform:scale(1.04); } #screenStudent .studentIdentityHeader .btn{ min-width:180px; } #screenStudent .studentXpCard{ display:grid; gap:10px; padding:16px; border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%); border-radius:22px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } #screenStudent .studentXpTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } #screenStudent .studentXpLabel{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenStudent .studentXpValue{ font-size:24px; line-height:1; font-weight:950; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; } #screenStudent .studentXpTrack{ height:10px; border-radius:999px; overflow:hidden; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); } #screenStudent .studentXpFill{ width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .2s ease, transform .2s ease; transform-origin:left center; } #screenStudent .studentXpFill.isLevelUp{ transform:scaleY(1.18); } #screenStudent .studentXpMeta{ font-size:13px; line-height:1.5; color:var(--muted); } #screenStudent .studentIdentityStats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } #screenStudent .studentIdentityStat{ min-height:108px; padding:16px; border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%); border-radius:20px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); display:grid; gap:8px; align-content:start; } #screenStudent .studentIdentityStatValue{ font-size:clamp(28px,3.2vw,40px); line-height:1; font-weight:950; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; } #screenStudent .studentIdentityStatLabel{ font-size:12px; line-height:1.45; color:var(--muted); font-weight:800; } #screenStudent .studentIdentityNote{ display:grid; gap:8px; } #screenStudent .studentIdentityMetaRow{ display:flex; flex-wrap:wrap; gap:8px; } #screenStudent .studentIdentityMetaRow .miniTag{ min-height:32px; padding:7px 10px; } #screenStudent .studentMetricGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #screenStudent .studentMetricTile, #screenStudent .studentMilestoneTile{ min-height:108px; padding:16px; border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%); border-radius:20px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentMetricTile b, #screenStudent .studentMilestoneTile b{ display:block; margin-top:10px; font-size:clamp(28px,3.2vw,40px); line-height:1; font-weight:950; letter-spacing:-.03em; } #screenStudent .studentMetricTile .note, #screenStudent .studentMilestoneTile .note{ margin-top:10px; } #screenStudent .studentWeakList{ display:flex; flex-direction:column; gap:12px; } #screenStudent .studentWeakGroup{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; padding:14px; border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%); border-radius:20px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } #screenStudent .studentWeakGroupHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; } #screenStudent .studentWeakGroupTitle{ font-weight:900; } #screenStudent .studentWeakGroupMeta, #screenStudent .studentWeakItemMeta{ font-size:12px; color:var(--muted); } #screenStudent .studentWeakChips{ display:flex; flex-wrap:wrap; gap:8px; } #screenStudent .studentWeakChip{ display:inline-flex; align-items:center; min-height:34px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); font-weight:800; font-size:13px; } #screenStudent .studentWeakChip.isEmpty{ color:var(--muted); font-weight:700; } #screenStudent .studentCardActions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; } #screenStudent .studentActivityGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #screenStudent .studentActivityTile{ min-height:108px; padding:16px; border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%); border-radius:20px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } #screenStudent .studentActivityValue{ margin-top:10px; font-size:clamp(30px,3.5vw,42px); line-height:1; font-weight:950; letter-spacing:-.03em; } #screenStudent .studentActivityValueSmall{ font-size:clamp(18px,2vw,24px); line-height:1.2; } #screenStudent .studentSuggestedAction{ margin-top:16px; padding:16px; border:1px solid color-mix(in srgb, var(--border) 86%, var(--chip) 14%); border-radius:20px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentSuggestedLabel{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:900; } #screenStudent .studentSuggestedTitle{ margin-top:8px; font-size:22px; line-height:1.2; font-weight:950; letter-spacing:-.02em; font-family:"Solway", ui-serif, Georgia, serif; } #screenStudent .studentPerfRows{ display:flex; flex-direction:column; gap:12px; } #screenStudent .studentPerfRow{ display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%); border-radius:20px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } #screenStudent .studentPerfRow.isEmpty{ opacity:.82; } #screenStudent .studentPerfHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #screenStudent .studentPerfLabel{ font-weight:900; } #screenStudent .studentPerfValue{ font-weight:950; font-size:18px; letter-spacing:-.02em; } #screenStudent .studentPerfTrack{ width:100%; height:10px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); overflow:hidden; } #screenStudent .studentPerfFill{ height:100%; width:0%; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .24s ease; } #screenStudent .studentPerfMeta{ font-size:12px; color:var(--muted); line-height:1.5; } #screenStudent .studentWeekMeta{ margin-top:12px; } #screenStudent .studentMilestoneGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } #screenStudent .studentMilestoneDetails{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(280px,.96fr); gap:16px; align-items:start; } #screenStudent .studentMilestonePanel{ display:flex; flex-direction:column; gap:12px; } #screenStudent .miniTag{ background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } #screenStudent .barTrack{ height:88px; border-radius:14px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } #screenStudent .bars{ margin-top:14px; gap:10px; } #screenTeacher .teacherDashboardGrid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; } #screenTeacher .teacherDashboardGrid > .card{ position:relative; overflow:hidden; grid-column:span 6; border-radius:24px; background:var(--surface-1); } #screenTeacher .teacherDashboardGrid > .card::before{ content:""; position:absolute; inset:0; background:radial-gradient(360px 180px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%); pointer-events:none; } #screenTeacher .teacherDashboardGrid > .card > *{ position:relative; z-index:1; } #screenTeacher .teacherHeroCard{ grid-column:1 / -1; background: radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--chip) 22%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%); } #screenTeacher .teacherHealthCard{ grid-column:span 7; } #screenTeacher .teacherTopCard{ grid-column:span 5; } #screenTeacher .teacherNeedsCard, #screenTeacher .teacherNudgeCard{ grid-column:span 6; } #screenTeacher .teacherPrototypeCard, #screenTeacher .teacherActionsCard{ grid-column:span 6; } #screenTeacher .teacherRadarCard{ grid-column:1 / -1; } #screenTeacher .teacherHealthGrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } #screenTeacher .metricTile{ min-height:108px; padding:16px; border-radius:18px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenTeacher .metricTile b{ font-size:clamp(30px,3.4vw,42px); } #screenTeacher .teacherRows{ gap:12px; } #screenTeacher .teacherNeedsCard .listItem{ background:color-mix(in srgb, var(--card) 88%, #ffe9ec 12%); border-color:color-mix(in srgb, var(--border) 72%, #ef9fb0 28%); } #screenTeacher .teacherNudgeCard .listItem{ background:color-mix(in srgb, var(--card) 88%, #e8f0ff 12%); border-color:color-mix(in srgb, var(--border) 70%, #9fbcf7 30%); } #screenSettings .settingsGrid{ grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:18px; } #screenSettings .card{ min-height:100%; border-radius:24px; } #screenSettings .input{ min-height:48px; border-radius:14px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } } @media (min-width:769px) and (max-width:1120px){ .homeProgressCard, .homeMissionCard, .homeRecommendationCard, .homeQuickStatsCard, .homeTierCard, .homeLeaderboardCard, .homeWinnerCard{ grid-column:span 6; } #screenKana .grid, #screenN5 .grid{ grid-template-columns:1fr; } #screenN5 .n5HeroMain{ flex-direction:column; } #screenN5 .n5HeroTools{ width:100%; justify-content:flex-start; } #screenN5 .n5ControlGrid, #screenN5 .n5WorkspaceShell{ grid-template-columns:1fr; } #screenN5 .n5WorkspaceGrid, #screenN5 .n5ExamOverview{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenN5 .n5ExamEntryGrid, #screenN5 .practicePrimaryRow{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenN5 .n5QuizSetupGrid{ grid-template-columns:1fr; } .n5SetRow{ grid-template-columns:repeat(2,minmax(0,1fr)); } #studentStatsView > .studentSummaryCard, #studentStatsView > .studentWeakCard, #studentStatsView > .studentCategoryCard, #studentStatsView > .studentWeekCard{ grid-column:span 6; } #studentStatsView > .studentMilestoneCard{ grid-column:1 / -1; } #screenStudent .studentSummaryBody, #screenStudent .studentMilestoneDetails{ grid-template-columns:1fr; } #screenStudent .studentActivityGrid{ grid-template-columns:1fr; } #screenStudent .studentMilestoneGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenTeacher .teacherHealthCard, #screenTeacher .teacherTopCard, #screenTeacher .teacherNeedsCard, #screenTeacher .teacherNudgeCard, #screenTeacher .teacherPrototypeCard, #screenTeacher .teacherActionsCard{ grid-column:span 6; } #screenTeacher .teacherHealthGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:740px){ #studentStatsView{ grid-template-columns:1fr; gap:14px; } #studentStatsView > .studentSummaryCard, #studentStatsView > .studentWeakCard, #studentStatsView > .studentCategoryCard, #studentStatsView > .studentWeekCard, #studentStatsView > .studentMilestoneCard{ grid-column:1 / -1; } #screenStudent .studentSummaryBody, #screenStudent .studentMilestoneDetails{ grid-template-columns:1fr; } #screenStudent .studentOverviewHero{ flex-direction:column; align-items:flex-start; } #screenStudent .studentMetricGrid, #screenStudent .studentMilestoneGrid, #screenStudent .studentActivityGrid{ grid-template-columns:1fr; } #screenKana .kanaJourneyGrid, #screenKana .kanaQuickActions{ grid-template-columns:1fr; } #screenStudent .studentCardActions .btn{ width:100%; } .kanaPracticeHeader, .kanaChartHeader, .kanaChartFooter, .n5HeroMain, .n5HeroTools, .practiceHeader, .n5WorkspaceMeta, .n5StageHead, .n5FooterBar, .n5BrowseModalHeader, .n5BrowseModalMeta{ flex-direction:column; align-items:stretch; } .kanaToolbar .btn{ flex:1 1 auto; } .n5InlineActionRow{ grid-template-columns:repeat(2,minmax(0,1fr)); } .n5ControlGrid, .n5WorkspaceShell, .n5WorkspaceSearchRow, .n5ExamOverview{ grid-template-columns:1fr; } .n5CategorySeg{ grid-template-columns:repeat(2,minmax(0,1fr)); } .n5ActionBtn{ min-height:96px; } .n5SetRow{ grid-template-columns:repeat(2,minmax(0,1fr)); } .n5WorkspaceGrid{ grid-template-columns:1fr; } #n5QuizActionRow{ flex-direction:column; align-items:stretch; } .n5QuizSetupGrid{ grid-template-columns:1fr; } .n5StageActions .btn, #n5PracticeStartBtn{ width:100%; } .n5WorkspaceStats{ white-space:normal; justify-content:flex-start; } .n5PanelFooter{ justify-content:stretch; } .n5PanelFooter .btn{ width:100%; } .n5BrowseModalCard{ padding:14px; } .n5BrowseModalBody{ padding:12px; max-height:min(58vh,620px); } .kanaChartRow, .kanaChartRow.isCompact{ grid-template-columns:repeat(2,minmax(0,1fr)); } .kanaChartModalCard{ padding:14px; } .kanaChartBody{ padding:12px; } .kanaChartCell{ min-height:82px; } } .appLayoutBody{ min-height:100vh; position:relative; } .appLayoutBody::after{ content:""; position:fixed; inset:0; z-index:32; pointer-events:none; opacity:0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--card) 68%, transparent) 100%); backdrop-filter:blur(0px); transition:opacity .32s ease, backdrop-filter .32s ease; } .isRoleTransitioning.appLayoutBody::after{ opacity:.34; backdrop-filter:blur(6px); } .isRoleTransitioning.roleTransitionEntering.appLayoutBody::after{ opacity:.14; backdrop-filter:blur(2px); } .appBootOverlay{ position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:24px; background: radial-gradient(720px 320px at 50% 18%, color-mix(in srgb, var(--chip) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, var(--card) 3%) 0%, var(--bg) 100%); opacity:1; visibility:visible; transition:opacity .42s ease, visibility 0s linear .42s; } .appBootOverlay.isBootLeaving{ opacity:0; visibility:hidden; } .appBootOverlay.isBootReady{ display:none; } .appBootInner{ min-width:min(360px,100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; } .appBootTitle{ font-family:"Solway", ui-serif, Georgia, serif; font-size:clamp(42px,8vw,78px); line-height:1; letter-spacing:-.06em; font-weight:950; color:var(--text); } .appBootDots{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:14px; } .appBootDot{ width:10px; height:10px; border-radius:999px; background:color-mix(in srgb, var(--chip) 62%, var(--text) 38%); box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 56%, transparent); animation:appBootDotPulse 1.05s ease-in-out infinite; } .appBootDot:nth-child(2){animation-delay:.14s} .appBootDot:nth-child(3){animation-delay:.28s} @keyframes appBootDotPulse{ 0%,80%,100%{ opacity:.26; transform:translateY(0) scale(.84); } 40%{ opacity:1; transform:translateY(-2px) scale(1); } } .appLayout{ min-height:100vh; width:100%; display:flex; background:transparent; } .appMainPane{ flex:1; min-height:100vh; display:flex; flex-direction:column; } .appMainScroll{ flex:1; overflow-y:auto; transition:opacity .26s ease, transform .28s ease; } .isRoleTransitioning .appMainScroll{ opacity:.78; transform:translateY(8px); } .appSidebar{ width:248px; height:100vh; position:sticky; top:0; flex-shrink:0; overflow:auto; display:flex; flex-direction:column; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 0%, color-mix(in srgb, var(--card) 90%, var(--chip) 10%) 100%); border-right:1px solid color-mix(in srgb, var(--border) 82%, transparent); box-shadow:inset -1px 0 0 color-mix(in srgb, var(--border) 35%, transparent); transition:width .2s ease, opacity .24s ease, transform .24s ease; } body[data-app-role="teacher"] .appSidebar{ background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #dde9ff 4%) 0%, color-mix(in srgb, var(--card) 90%, #d9e5fb 10%) 100%); } body.dark .appSidebar, body.dark[data-app-role="teacher"] .appSidebar{ background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--chip) 6%) 0%, color-mix(in srgb, var(--card) 88%, var(--chip) 12%) 100%); border-right-color:color-mix(in srgb, var(--border) 78%, transparent); box-shadow:inset -1px 0 0 color-mix(in srgb, var(--border) 28%, transparent); } .isRoleTransitioning .appSidebar{ opacity:.86; transform:translateX(-6px); } body.examMode .appSidebar{ width:0 !important; opacity:0; transform:translateX(-18px); pointer-events:none; overflow:hidden; border-right-color:transparent; box-shadow:none; } .appSidebarBrand{ min-height:72px; padding:14px 16px; border-bottom:1px solid color-mix(in srgb, var(--border) 82%, transparent); display:flex; align-items:center; gap:12px; } .appSidebarLogo{ width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 82%, var(--card) 18%) 0%, color-mix(in srgb, var(--chip) 52%, var(--card) 48%) 100%); font-size:11px; font-weight:900; color:var(--text); box-shadow:0 10px 24px rgba(27,50,90,.10); } .appSidebarBrandText{ font-family:"Solway", ui-serif, Georgia, serif; font-weight:950; font-size:19px; letter-spacing:-.02em; } .appSidebarNav{ flex:1; display:flex; flex-direction:column; gap:8px; padding:14px 12px; } .appSidebarBtn{ width:100%; min-height:48px; border:1px solid transparent; border-radius:16px; background:transparent; color:var(--muted); display:flex; align-items:center; gap:10px; padding:0 14px; text-align:left; font-weight:800; letter-spacing:-.01em; cursor:pointer; transition:transform .16s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .appSidebarBtn[hidden]{display:none !important} .appSidebarBtn:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--chip) 38%, var(--card) 62%); color:var(--text); } .appSidebarBtn.active{ background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 74%, var(--card) 26%) 0%, color-mix(in srgb, var(--chip) 52%, var(--card) 48%) 100%); color:var(--text); box-shadow:0 12px 22px rgba(27,50,90,.12); } body[data-app-role="teacher"] .appSidebarBtn.active{ background:linear-gradient(135deg, color-mix(in srgb, #d9e9ff 76%, var(--card) 24%) 0%, color-mix(in srgb, #c8dbff 52%, var(--card) 48%) 100%); } body.dark .appSidebarBtn:hover{ background:color-mix(in srgb, var(--chip) 26%, var(--card) 74%); } body.dark .appSidebarBtn.active, body.dark[data-app-role="teacher"] .appSidebarBtn.active{ background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 52%, var(--card) 48%) 0%, color-mix(in srgb, var(--chip) 38%, var(--card) 62%) 100%); box-shadow:0 12px 22px rgba(3,10,20,.34); } .appSidebarGlyph{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:10px; font-weight:900; letter-spacing:.08em; color:var(--text); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 56%, transparent); flex:0 0 30px; } .appSidebarFooter{ padding:12px; border-top:1px solid color-mix(in srgb, var(--border) 82%, transparent); display:flex; flex-direction:column; gap:10px; } .appSidebarMeta{ display:block; padding:8px 10px; text-align:center; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } .appSidebarToggle{ width:100%; min-height:42px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); color:var(--muted); cursor:pointer; font-weight:800; } .appSidebar.collapsed{ width:84px; } .appSidebar.collapsed .appSidebarBrandText, .appSidebar.collapsed .appSidebarLabel, .appSidebar.collapsed .appSidebarMeta{ display:none; } .appSidebar.collapsed .appSidebarBtn{ justify-content:center; padding:0; } .appLayout .wrap.appLayoutWrap{ margin:0; max-width:1380px; width:100%; padding:18px 22px calc(120px + env(safe-area-inset-bottom)); } .topbar.appTopbar{ min-height:68px; border-radius:22px; border:1px solid color-mix(in srgb, var(--border) 80%, transparent); background:color-mix(in srgb, var(--card) 92%, transparent); box-shadow:0 18px 34px rgba(16,24,40,.06); backdrop-filter:blur(14px); } body.dark .topbar.appTopbar{ background:color-mix(in srgb, var(--card) 88%, transparent); border-color:color-mix(in srgb, var(--border) 78%, transparent); box-shadow:0 18px 34px rgba(3,10,20,.34); } .appTopbarLeft{ display:flex; align-items:center; gap:12px; } .appTopbarBrand b{ font-size:20px; letter-spacing:-.02em; } .appTopbarBrand .pill{ margin-top:2px; } .appTopbarRight{ gap:8px; align-items:center; } .appTopbar .roleSeg{ display:inline-grid; } .appTopbarAvatar{ width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--chip) 70%, var(--card) 30%); color:var(--text); display:grid; place-items:center; font-weight:900; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 46%, transparent); flex:0 0 38px; } body.dark .appTopbarAvatar{ background:color-mix(in srgb, var(--chip) 52%, var(--card) 48%); } @media (min-width:769px){ .appLayoutBody #bottomNav{ display:none !important; } .appLayout .wrap.appLayoutWrap{ padding:20px 24px 42px; } .topbar.appTopbar{ top:16px; padding:14px 18px; } .appTopbarRight .btn{ min-height:40px; } } @media (max-width:768px){ .appLayout{ display:block; } .appSidebar{ display:none !important; } .appMainPane, .appMainScroll{ min-height:auto; overflow:visible; } .appLayout .wrap.appLayoutWrap{ padding:12px 10px calc(112px + env(safe-area-inset-bottom)); } .topbar.appTopbar{ border-radius:18px; } .appTopbarRight{ width:100%; justify-content:flex-start; } .appTopbarAvatar{ display:none; } .appTopbarBrand b{ font-size:17px; } } /* Home daily path Keep Home focused on the next study move without changing the shared app shell, navigation, or downstream feature flows. */ #screenHome .homePremiumGrid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; align-items:start; } #screenHome .homeHero.homeSpanAll{ grid-column:1 / -1; padding:30px; border-radius:28px; overflow:hidden; background: radial-gradient(760px 280px at 100% 0%, color-mix(in srgb, var(--chip) 30%, transparent), transparent 64%), linear-gradient(135deg, color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); } #screenHome .homeHeroShell{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:24px; align-items:center; } #screenHome .homeHeroIntro{ display:grid; gap:12px; align-content:center; } #screenHome .homeGreeting{ font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } #screenHome .homeHeroTitle{ font-size:clamp(34px,4.1vw,52px); line-height:1.04; letter-spacing:-.04em; font-family:"Solway", ui-serif, Georgia, serif; } #screenHome .homeHeroLevel{ font-size:14px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenHome .homeHeroSub{ max-width:52ch; font-size:15px; line-height:1.7; color:var(--muted); } #screenHome .homeHeroMeta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; } #screenHome .homeHeroProgressCard{ display:grid; gap:14px; padding:20px; border:1px solid var(--border); border-radius:24px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); box-shadow:0 12px 24px rgba(14,24,38,.06); } #screenHome .homeHeroProgressTop{ display:flex; align-items:center; justify-content:space-between; gap:18px; } #screenHome .homeHeroProgressEyebrow{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenHome .homeHeroProgressValue{ margin-top:6px; font-size:clamp(30px,4vw,46px); line-height:1; font-weight:950; font-family:"Solway", ui-serif, Georgia, serif; letter-spacing:-.04em; } #screenHome .homeHeroProgressText{ font-size:13px; line-height:1.55; color:var(--muted); max-width:24ch; } #screenHome .homeHeroRingWrap{ justify-content:flex-end; min-width:118px; } #screenHome .homeHeroProgressCard .ring{ width:116px; height:116px; } #screenHome .homeHeroProgressCard .ringInner{ width:84px; height:84px; } #screenHome .homeLevelRail{ width:100%; height:10px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); border:1px solid var(--border); } #screenHome .homeLevelRailFill{ height:100%; width:0; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .24s ease; } #screenHome .homeSectionHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; } #screenHome .homeSectionHead h3{ margin:0; } #screenHome .homeSectionSub{ margin-top:6px; max-width:56ch; color:var(--muted); line-height:1.55; font-size:13px; } #screenHome .homePathCard{ grid-column:span 7; display:grid; gap:16px; min-height:100%; } #screenHome .homePathProgress{ display:grid; gap:10px; padding:16px; border:1px solid var(--border); border-radius:20px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); } #screenHome .homePathProgressTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } #screenHome .homePathSummary{ font-size:14px; line-height:1.6; color:var(--muted); max-width:54ch; } #screenHome .homePathList{ display:grid; gap:10px; } #screenHome .homePathStep{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); } #screenHome .homePathStep.isCurrent{ border-color:color-mix(in srgb, var(--ink) 22%, var(--border) 78%); box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); } #screenHome .homePathStep.isComplete{ background:color-mix(in srgb, var(--chip) 12%, var(--card) 88%); } #screenHome .homePathMarker{ width:30px; height:30px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); font-size:12px; font-weight:900; line-height:1; } #screenHome .homePathStep.isComplete .homePathMarker{ background:var(--ink); border-color:var(--ink); color:var(--card); } #screenHome .homePathBody{ display:grid; gap:6px; min-width:0; } #screenHome .homePathTitleRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } #screenHome .homePathTitle{ font-size:15px; line-height:1.4; font-weight:900; } #screenHome .homePathBadge{ flex:0 0 auto; } #screenHome .homePathText{ font-size:13px; line-height:1.55; color:var(--muted); } #screenHome .homeContinueAction{ display:grid; gap:10px; } #screenHome .homeContinueBtn{ width:100%; min-height:72px; padding:18px 20px; border-radius:20px; justify-content:center; text-align:center; font-size:17px; } #screenHome .homeContinueMeta{ font-size:13px; line-height:1.55; color:var(--muted); } #screenHome .homeQuickActionsCard{ grid-column:span 5; display:grid; gap:16px; min-height:100%; } #screenHome .homeProgressIdentityCard{ grid-column:span 5; display:grid; gap:16px; min-height:100%; background: radial-gradient(380px 180px at 100% 0%, color-mix(in srgb, var(--chip) 20%, transparent), transparent 72%), linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%); } #screenHome .homeProgressIdentityHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } #screenHome .homeProgressIdentityTitle{ font-size:24px; line-height:1.1; letter-spacing:-.03em; font-weight:950; font-family:"Solway", ui-serif, Georgia, serif; } #screenHome .homeProgressIdentitySub{ margin-top:6px; font-size:13px; line-height:1.55; color:var(--muted); } #screenHome .homeProgressLevelPill{ min-height:32px; padding:7px 12px; } #screenHome .homeProgressIdentityRail{ display:grid; gap:10px; padding:16px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } #screenHome .homeProgressIdentityTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } #screenHome .homeProgressIdentityValue{ font-size:24px; line-height:1; font-weight:950; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; } #screenHome .homeProgressMiniTrack{ height:10px; border-radius:999px; overflow:hidden; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); } #screenHome .homeProgressMiniFill{ width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%); transition:width .2s ease, transform .2s ease; transform-origin:left center; } #screenHome .homeProgressMiniFill.isLevelUp{ transform:scaleY(1.18); } #screenHome .homeProgressMiniMeta{ font-size:13px; line-height:1.55; color:var(--muted); } #screenHome .homeProgressStats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } #screenHome .homeProgressStat{ padding:14px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); display:grid; gap:6px; } #screenHome .homeProgressStatValue{ font-size:22px; line-height:1; font-weight:950; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; } #screenHome .homeProgressStatLabel{ font-size:12px; line-height:1.45; color:var(--muted); font-weight:800; } #screenHome .homeQuickActionsGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #screenHome .homeQuickActionBtn{ width:100%; min-height:96px; padding:16px 18px; border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; text-align:left; white-space:normal; } #screenHome .homeQuickActionLabel{ font-size:15px; font-weight:900; line-height:1.35; } #screenHome .homeQuickActionText{ font-size:12px; line-height:1.5; color:var(--muted); } #screenHome .homeQuickSupportRow{ gap:10px; flex-wrap:wrap; margin-top:auto; } #screenHome .homeInsightCard{ grid-column:span 7; display:grid; gap:16px; } #screenHome .homeInsightSurface{ display:grid; gap:14px; padding:18px; border:1px solid var(--border); border-radius:22px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); } #screenHome .homeInsightEyebrow{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenHome .homeInsightTitle{ font-size:22px; line-height:1.25; font-weight:950; letter-spacing:-.02em; font-family:"Solway", ui-serif, Georgia, serif; } #screenHome .homeInsightText{ color:var(--muted); line-height:1.6; max-width:60ch; } #screenHome .homeInsightMetaGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #screenHome .homeInsightMetric{ display:grid; gap:6px; padding:14px 16px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenHome .homeInsightMetricLabel{ font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenHome .homeInsightMetricValue{ font-size:14px; line-height:1.5; font-weight:800; } #screenHome .homeInsightActions{ gap:10px; flex-wrap:wrap; } #screenHome .homeStatsCard{ grid-column:span 5; display:grid; gap:16px; min-height:100%; } #screenHome .homeStatsGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #screenHome .homeStatTile{ padding:16px; border:1px solid var(--border); border-radius:18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%); } #screenHome .homeStatValue{ font-size:clamp(24px,3vw,34px); line-height:1; font-weight:950; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; } #screenHome .homeStatLabel{ margin-top:8px; font-size:12px; line-height:1.45; color:var(--muted); } #screenHome .homeTierRail{ display:grid; gap:8px; padding:16px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenHome .homeTierRailHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } #screenHome .homeTierRailTitle{ font-size:13px; font-weight:900; letter-spacing:.02em; } #screenHome .homeStatsUtilityRow{ margin-top:auto; gap:10px; flex-wrap:wrap; } #screenHome .homeLeaderboardCard{ grid-column:span 7; } #screenHome .homeWinnerCard{ grid-column:span 5; } @media (max-width:1100px){ #screenHome .homePathCard, #screenHome .homeProgressIdentityCard, #screenHome .homeQuickActionsCard, #screenHome .homeInsightCard, #screenHome .homeStatsCard, #screenHome .homeLeaderboardCard, #screenHome .homeWinnerCard{ grid-column:1 / -1; } #screenHome .homeHeroShell{ grid-template-columns:1fr; } } @media (max-width:768px){ #screenHome .homePremiumGrid{ grid-template-columns:1fr; } #screenHome .homeHero.homeSpanAll, #screenHome .homePathCard, #screenHome .homeQuickActionsCard, #screenHome .homeInsightCard, #screenHome .homeStatsCard, #screenHome .homeLeaderboardCard, #screenHome .homeWinnerCard{ grid-column:1 / -1; } #screenHome .homeHero.homeSpanAll{ padding:20px; } #screenHome .homeHeroProgressTop, #screenHome .homeTierRailHeader, #screenHome .homePathProgressTop{ flex-direction:column; align-items:flex-start; } #screenHome .homeQuickActionsGrid, #screenHome .homeInsightMetaGrid, #screenHome .homeStatsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenHome .homeHeroRingWrap{ min-width:0; } } @media (max-width:560px){ #screenHome .homeQuickActionsGrid, #screenHome .homeInsightMetaGrid, #screenHome .homeStatsGrid{ grid-template-columns:1fr; } #screenHome .homeContinueBtn, #screenHome .homeQuickActionBtn{ min-height:64px; } } /* AI screen Keep the AI hub self-contained so Personal Teacher and AI Friend can grow without leaking layout rules into Home, Kana, N5, Student, Teacher, or Settings. */ #screenAI{ position:relative; width:100%; min-width:0; isolation:isolate; } #screenAI > *{ min-width:0; } #screenAI .aiHubShell{ display:grid; gap:18px; width:100%; min-width:0; } #screenAI .aiHeroCard{ display:grid; gap:16px; padding:22px; background: radial-gradient(130% 130% at 100% 0%, color-mix(in srgb, var(--chip) 46%, transparent), transparent 48%), var(--surface-1); } #screenAI .aiHeroTitle{ margin:0; font-size:clamp(26px, 4vw, 38px); line-height:1; letter-spacing:-.03em; font-family:"Solway", ui-serif, Georgia, serif; font-weight:800; } #screenAI .aiHeroSub{ margin-top:8px; max-width:58ch; color:var(--muted); } #screenAI .aiHeroMeta{ display:flex; flex-wrap:wrap; gap:8px; } #screenAI .aiModeGrid{ display:grid; gap:14px; width:100%; min-width:0; } #screenAI .aiModeCard{ appearance:none; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit; display:grid; gap:10px; border:1px solid var(--border); transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } #screenAI .aiModeCard:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(14,24,38,.08); } #screenAI .aiModeCard.active{ border-color:transparent; background:color-mix(in srgb, var(--chip) 48%, var(--card) 52%); box-shadow:0 16px 30px rgba(14,24,38,.09); } #screenAI .aiModeTitle{ margin:0; font-size:20px; font-family:"Solway", ui-serif, Georgia, serif; font-weight:800; } #screenAI .aiModeText{ color:var(--muted); line-height:1.55; } #screenAI .aiModeAction{ font-weight:900; letter-spacing:.04em; text-transform:uppercase; font-size:11px; color:var(--text); } #screenAI .aiDetailGrid{ display:grid; gap:18px; width:100%; min-width:0; align-items:start; } #screenAI .aiPanelCard{ display:grid; gap:16px; min-width:0; } #screenAI .aiPanelHeader{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; } #screenAI .aiPanelHeader h2{ margin:0; font-size:24px; font-family:"Solway", ui-serif, Georgia, serif; font-weight:800; } #screenAI .aiCoachStats{ display:flex; flex-wrap:wrap; gap:8px; } #screenAI .aiCoachInsightGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } #screenAI .aiCoachInsightCard{ display:grid; gap:10px; padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--card); min-width:0; } #screenAI .aiCoachInsightValue{ font-size:20px; line-height:1.2; font-weight:900; } #screenAI .aiCoachMissedItems{ display:flex; flex-wrap:wrap; gap:8px; min-height:32px; } #screenAI .aiCoachMissedItem{ display:inline-flex; align-items:center; min-height:32px; padding:7px 11px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); font-weight:800; font-size:13px; max-width:100%; } #screenAI .aiCoachMissedItem.isEmpty{ color:var(--muted); font-weight:700; } #screenAI .aiCoachFocus{ display:grid; gap:12px; padding:18px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); min-width:0; } #screenAI .aiCoachFocusLabel{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:900; } #screenAI .aiCoachFocusTitle{ font-size:22px; line-height:1.2; font-weight:900; } #screenAI .aiCoachFocusText{ color:var(--muted); line-height:1.6; } #screenAI .aiCoachChecklist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } #screenAI .aiCoachChecklist li{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:16px; background:var(--card); min-width:0; } #screenAI .aiCoachChecklist li::before{ content:""; width:9px; height:9px; flex:0 0 9px; margin-top:7px; border-radius:999px; background:var(--ring); opacity:.72; } #screenAI .aiCoachActions{ display:flex; flex-wrap:wrap; gap:10px; } #screenAI .aiCoachResponse{ display:grid; gap:12px; padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--card); } #screenAI .senseiMessages{ display:flex; flex-direction:column; gap:12px; min-height:320px; max-height:440px; overflow-y:auto; padding:12px 12px 88px; border-radius:18px; scroll-behavior:smooth; scroll-padding-bottom:88px; } #screenAI .senseiMessage{ display:flex; flex-direction:column; gap:6px; } #screenAI .senseiMessage.user{ align-items:flex-end; } #screenAI .senseiMessage.sensei{ align-items:flex-start; } #screenAI .senseiLabel{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:900; } #screenAI .senseiBubble{ max-width:75%; padding:13px 15px; border-radius:18px; border:1px solid var(--border); background:var(--card); line-height:1.6; white-space:pre-wrap; word-break:break-word; } #screenAI .senseiBubble.isTyping{ color:var(--muted); letter-spacing:.12em; } #screenAI .senseiMessage.user .senseiBubble{ background:color-mix(in srgb, var(--chip) 58%, var(--card) 42%); border-color:transparent; border-bottom-right-radius:8px; } #screenAI .senseiMessage.sensei .senseiBubble{ border-bottom-left-radius:8px; } #screenAI .senseiQuickPrompts{ display:flex; flex-wrap:wrap; gap:8px; } #screenAI .senseiComposer{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; } #screenAI .senseiComposer .input{ width:100%; border-radius:16px; } #screenAI .senseiFooterNote{ color:var(--muted); font-size:12px; line-height:1.5; } @media (min-width:769px){ #screenAI .aiModeGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenAI .aiDetailGrid{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } } @media (max-width:768px){ #screenAI .aiHeroCard{ padding:18px; } #screenAI .aiCoachInsightGrid{ grid-template-columns:1fr; } #screenAI .aiModeGrid, #screenAI .aiDetailGrid, #screenAI .senseiComposer{ grid-template-columns:1fr; } #screenAI .senseiComposer .btn{ width:100%; } } /* Screen architecture safeguards Keep layout ownership inside each screen so broad selectors like .grid, .card, .panelHeader, and .segGroup cannot easily drift screens. */ #screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings{ position:relative; width:100%; min-width:0; isolation:isolate; } #screenHome > *, #screenAI > *, #screenKana > *, #screenN5 > *, #screenStudent > *, #screenTeacher > *, #screenSettings > *{ min-width:0; } #screenHome .homeGrid, #screenHome .homePremiumGrid, #screenKana .grid, #screenN5 .grid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid{ width:100%; min-width:0; align-items:start; } #screenHome .card, #screenAI .card, #screenKana .card, #screenN5 .card, #screenStudent .card, #screenTeacher .card, #screenSettings .card, #screenHome .listItem, #screenAI .listItem, #screenKana .listItem, #screenN5 .listItem, #screenStudent .listItem, #screenTeacher .listItem, #screenSettings .listItem{ min-width:0; } #screenKana .segrow, #screenKana .seg, #screenKana .kanaPracticeHeader, #screenKana .kanaToolbar, #screenKana .kanaQuestionShell, #screenKana .choices{ min-width:0; } #screenN5 .panelHeader, #screenN5 .segGroup, #screenN5 .n5ControlGrid, #screenN5 .n5InlineActionRow, #screenN5 .n5WorkspaceShell, #screenN5 .n5WorkspaceSurface, #screenN5 .n5WorkspaceStage, #screenN5 .n5QuizSetupGrid, #screenN5 .n5SetRow, #screenN5 .n5ExamOverview, #screenN5 .n5ExamEntryGrid, #screenN5 .practiceHeader, #screenN5 .practiceActions, #screenN5 .practicePrimaryRow, #screenN5 .practiceSecondaryRow, #screenN5 .practiceDrawer{ min-width:0; } #screenStudent #studentStatsView, #screenStudent #studentStatsView > .card, #screenTeacher .teacherDashboardGrid, #screenTeacher .teacherDashboardGrid > .card, #screenSettings .settingsGrid{ min-width:0; } @media (min-width:769px){ #screenHome .homePremiumGrid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; align-items:start; } #screenHome .homeGrid{ grid-template-columns:1.15fr .85fr; gap:14px; } #screenKana .grid{ grid-template-columns:minmax(0,900px); justify-content:center; gap:18px; } #screenN5 .grid{ grid-template-columns:minmax(0,1040px); justify-content:center; gap:18px; } #screenStudent #studentStatsView{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; } #screenTeacher .teacherDashboardGrid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; } #screenSettings .settingsGrid{ grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:18px; } } @media (max-width:768px){ #screenHome .homeGrid, #screenHome .homePremiumGrid, #screenKana .grid, #screenN5 .grid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid{ grid-template-columns:1fr; } #screenKana .kanaPracticeHeader, #screenKana .kanaChartHeader, #screenKana .kanaChartFooter, #screenN5 .n5HeroMain, #screenN5 .n5HeroTools, #screenN5 .practiceHeader, #screenN5 .n5WorkspaceMeta, #screenN5 .n5StageHead, #screenN5 .n5FooterBar, #screenN5 .n5BrowseModalHeader, #screenN5 .n5BrowseModalMeta{ flex-direction:column; align-items:stretch; } #screenN5 .n5ControlGrid, #screenN5 .n5WorkspaceShell, #screenN5 .n5WorkspaceSearchRow, #screenN5 .n5ExamOverview, #screenN5 .n5QuizSetupGrid{ grid-template-columns:1fr; } #screenN5 .n5CategorySeg, #screenN5 .n5InlineActionRow, #screenN5 .n5SetRow, #screenN5 .n5ExamEntryGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenN5 #n5QuizActionRow{ flex-direction:column; align-items:stretch; } } /* Architecture stabilization Keep the sidebar app shell as the only desktop layout owner, keep bottom-nav ownership mobile-only, and scope the leak-prone layout selectors to the screens and modals that actually own them. */ #tabs{ display:none !important; visibility:hidden; height:0; margin:0 !important; pointer-events:none; } .appLayout, .appMainPane, .appMainScroll, .appLayout .wrap.appLayoutWrap{ min-width:0; } .appLayout{ align-items:stretch; isolation:isolate; } .appMainPane{ flex:1 1 auto; min-width:0; } .appMainScroll{ min-width:0; overscroll-behavior-y:contain; } .appLayout .wrap.appLayoutWrap{ display:flex; flex-direction:column; gap:14px; } .appLayout .wrap.appLayoutWrap > section{ min-width:0; } #screenHome .homePremiumGrid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid{ display:grid; width:100%; min-width:0; } #screenKana .grid, #screenN5 .grid{ display:grid; width:100%; min-width:0; } #screenN5 .panelHeader{ position:sticky; top:0; z-index:2; background:var(--surface-1); margin:-14px -14px 12px -14px; padding:14px 14px 12px; border-bottom:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; } #screenN5 .panelHeader .hint{ margin-top:4px; } :is(#screenN5, #n5BrowseModalBack) .segGroup{ margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px; border:1px solid var(--border); border-radius:999px; background:var(--card); } :is(#screenN5, #n5BrowseModalBack) .segGroup .btn.small{ min-height:38px; border-radius:999px; padding:7px 10px; box-shadow:none; font-size:12px; font-weight:900; } :is(#screenN5, #n5BrowseModalBack) .segGroup .btn.small:not(.primary){ background:transparent; color:var(--muted); } :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings, #n5BrowseModalBack) .card, :is(#screenHome, #screenAI, #screenN5, #screenStudent, #screenTeacher, #screenSettings, #n5BrowseModalBack, #teacherDrawerBack) .listItem{ min-width:0; } /* N5 isolation Re-own the N5 workspace and browse modal containers so global layout selectors and future screen changes do not become accidental owners. */ #screenN5 #n5MainGrid, #screenN5 #n5ContentCard, #screenN5 #n5PracticePanel, #screenN5 .n5HeaderShell, #screenN5 .n5HeroMain, #screenN5 .n5HeroCopy, #screenN5 .n5HeroTools, #screenN5 .n5StatusCard, #screenN5 .n5ControlGrid, #screenN5 .n5StepCard, #screenN5 .n5InlineActionRow, #screenN5 .n5Workspace, #screenN5 .n5WorkspaceShell, #screenN5 .n5FlowRail, #screenN5 .n5WorkspaceMain, #screenN5 .n5WorkspaceSurface, #screenN5 .n5WorkspaceStage, #screenN5 .n5StageHead, #screenN5 .n5WorkspaceSearchRow, #screenN5 .n5WorkspaceFilters, #screenN5 .n5WorkspaceGrid, #screenN5 .n5PreviewCard, #screenN5 .n5QuizSetupGrid, #screenN5 .n5SetRow, #screenN5 .n5ExamEntry, #screenN5 .n5ExamOverview, #screenN5 .n5ExamEntryGrid, #screenN5 .n5FooterBar, #screenN5 #n5QuizActionRow, #screenN5 .n5PracticeChoices, #screenN5 .n5ExamOverlay, #screenN5 .n5ExamTopbar, #screenN5 .n5ExamBody, #screenN5 .n5ExamChoices, #screenN5 .n5ExamWeakList, #n5BrowseModalBack .n5BrowseModalCard, #n5BrowseModalBack .n5BrowseModalHeader, #n5BrowseModalBack .n5BrowseModalBody, #n5BrowseModalBack .n5BrowseModalMeta, #n5BrowseModalBack #n5BrowsePanel, #n5BrowseModalBack #n5List, #n5BrowseModalBack .n5Grid{ min-width:0; } #n5BrowseModalBack .segGroup, #n5BrowseModalBack .listItem{ min-width:0; } @media (min-width:769px){ .appLayout{ display:flex; } .appLayout > .appSidebar{ display:flex !important; position:sticky; top:0; align-self:stretch; z-index:20; } .appLayout > .appMainPane, .appLayout > .appMainPane > .appMainScroll{ min-width:0; } .appLayout > .appMainPane > .appMainScroll{ overflow-y:auto; } .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:1380px; margin:0; padding:20px 24px 42px; } .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:68px; padding:14px 18px; border-radius:22px; position:sticky; top:16px; z-index:80; } :is(#screenHome, #screenAI, #screenKana, #screenStudent, #screenTeacher, #screenSettings) .card{ padding:18px; border-radius:22px; box-shadow:0 18px 34px rgba(12,23,38,.08); } #screenN5 .card{ padding:18px; border-radius:22px; box-shadow:0 18px 34px rgba(12,23,38,.08); } :is(#screenHome, #screenAI, #screenKana, #screenStudent, #screenTeacher, #screenSettings) .card h3{ font-size:12px; letter-spacing:.1em; } #screenN5 .card h3{ font-size:12px; letter-spacing:.1em; } :is(#screenHome, #screenAI, #screenStudent, #screenTeacher, #screenSettings, #teacherDrawerBack) .listItem{ min-height:92px; padding:14px; border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenN5 .listItem, #n5BrowseModalBack .listItem{ min-height:92px; padding:14px; border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } .appLayoutBody #bottomNav{ display:none !important; position:fixed; left:0; right:0; bottom:0; top:auto; padding:0; opacity:0; visibility:hidden; pointer-events:none; } } @media (max-width:768px){ .appLayout{ display:block; } .appLayout > .appSidebar{ display:none !important; width:0; opacity:0; pointer-events:none; overflow:hidden; } .appMainPane, .appMainScroll{ min-height:auto; min-width:0; } .appMainScroll{ overflow:visible; } .appLayout .wrap.appLayoutWrap{ padding:12px 10px calc(112px + env(safe-area-inset-bottom)); } #screenN5 .panelHeader{ position:static; margin:-14px -14px 10px -14px; } :is(#screenN5, #n5BrowseModalBack) .segGroup{ grid-template-columns:repeat(2,minmax(0,1fr)); } .appLayoutBody #bottomNav{ display:flex !important; position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); opacity:1; visibility:visible; pointer-events:none; } .appLayoutBody #bottomNav .bottomNavBar{ pointer-events:auto; width:min(760px,100%); } body.examMode #bottomNav{ display:none !important; opacity:0; visibility:hidden; } } /* Shared responsive guardrails Keep one app shell and one set of screens while making desktop own the sidebar layout and mobile own the stacked bottom-nav layout. */ .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar, .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ width:100%; min-width:0; } :is(#screenHome .homePremiumGrid, #screenAI .aiHubShell, #screenKana .grid, #screenN5 .grid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid){ width:100%; min-width:0; align-content:start; } @media (min-width:769px){ .appLayout > .appSidebar{ flex:0 0 auto; } .appLayout > .appMainPane{ min-height:100vh; } .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ align-items:stretch; } #screenHome .homePremiumGrid, #screenAI .aiHubShell, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid{ max-width:1240px; margin-inline:auto; } #screenSettings .settingsGrid{ max-width:1180px; margin-inline:auto; } #screenKana .grid{ max-width:920px; margin-inline:auto; } #screenN5 .grid{ max-width:1080px; margin-inline:auto; } } @media (max-width:768px){ .appLayoutBody{ overflow-x:hidden; } .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ gap:12px; } :is(#screenHome .homePremiumGrid, #screenAI .aiHubShell, #screenKana .grid, #screenN5 .grid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid){ margin-inline:0; gap:14px; } #screenHome .homeHero.homeSpanAll, #screenAI .aiHeroCard, #screenKana .kanaJourneyCard, #screenKana .kanaPracticePanel, #screenStudent #studentStatsView > .card, #screenTeacher .teacherDashboardGrid > .card, #screenSettings .card{ border-radius:20px; } #screenAI .aiCoachActions, #screenKana .kanaJourneyMeta, #screenStudent .studentCardActions{ align-items:stretch; } } /* Layout mode ownership The runtime layout controller sets body classes so mobile and desktop rules do not compete once the viewport mode is known. */ body.desktop-layout .appLayout{ display:flex; } body.desktop-layout .appLayout > .appSidebar{ display:flex !important; position:sticky; top:0; width:auto; opacity:1; pointer-events:auto; overflow:auto; } body.desktop-layout .appLayout > .appMainPane, body.desktop-layout .appLayout > .appMainPane > .appMainScroll{ min-height:100vh; min-width:0; } body.desktop-layout .appLayout > .appMainPane > .appMainScroll{ overflow-y:auto; } body.desktop-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ max-width:1380px; padding:20px 24px 42px; } body.desktop-layout .topbar.appTopbar{ top:16px; padding:14px 18px; } body.desktop-layout #bottomNav{ display:none !important; opacity:0; visibility:hidden; pointer-events:none; } body.mobile-layout .appLayout{ display:block; } body.mobile-layout .appLayout > .appSidebar{ display:none !important; width:0; opacity:0; pointer-events:none; overflow:hidden; } body.mobile-layout .appMainPane, body.mobile-layout .appMainScroll{ min-height:auto; min-width:0; } body.mobile-layout .appMainScroll{ overflow:visible; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ max-width:none; padding:12px 10px calc(112px + env(safe-area-inset-bottom)); gap:12px; } body.mobile-layout .topbar.appTopbar{ top:8px; padding:10px 12px; border-radius:18px; } body.mobile-layout #bottomNav{ display:flex !important; position:fixed; left:0; right:0; bottom:0; top:auto; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); opacity:1; visibility:visible; pointer-events:none; } body.mobile-layout #bottomNav .bottomNavBar{ pointer-events:auto; width:min(760px,100%); } body.mobile-layout #screenHome .homeSectionSub, body.mobile-layout #screenAI .aiHeroMeta, body.mobile-layout #screenAI .aiHeroSub, body.mobile-layout #screenStudent .studentMilestoneHint, body.mobile-layout #screenSettings .note{ font-size:12px; line-height:1.45; } .homeMobileMoreCard, .kanaMobileActionGrid, .n5MobileHubCard, .n5MobilePanelBar, .studentMobileMoreCard, .settingsMobileQuickGrid, #kanaMobileHubBtn{ display:none; } #screenN5 .n5MobileContinueCard{ display:none; } body.mobile-layout #screenHome .homeMobileMoreCard{ display:grid; gap:14px; grid-column:1 / -1; } body.mobile-layout #screenHome .homeMobileMoreGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } body.mobile-layout #screenHome .homeMobileMoreGrid .btn{ min-height:56px; border-radius:18px; padding:12px 10px; font-size:12px; } body.mobile-layout #screenHome .homeInsightCard, body.mobile-layout #screenHome .homeStatsCard, body.mobile-layout #screenHome .homeLeaderboardCard, body.mobile-layout #screenHome .homeWinnerCard{ display:none; } body.mobile-layout #screenHome[data-mobile-panel="insight"] .homeInsightCard, body.mobile-layout #screenHome[data-mobile-panel="stats"] .homeStatsCard, body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard, body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{ display:grid; } body.mobile-layout #screenHome .homeHero.homeSpanAll{ padding:18px; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:78px; padding:14px; } body.mobile-layout #screenKana .kanaMobileActionGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn{ min-height:64px; border-radius:18px; padding:12px; } body.mobile-layout #screenKana .kanaJourneyGrid{ display:none; } body.mobile-layout #screenKana .kanaJourneyText{ max-width:none; } body.mobile-layout #screenKana[data-mobile-pane="hub"] .kanaPracticePanel{ display:none; } body.mobile-layout #screenKana[data-mobile-pane="practice"] .kanaJourneyCard{ display:none; } body.mobile-layout #screenKana[data-mobile-pane="practice"] #kanaMobileHubBtn{ display:inline-flex; } body.mobile-layout #screenN5 .n5MobileHubCard{ display:grid; gap:14px; } body.mobile-layout #screenN5 .n5MobileHubTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } body.mobile-layout #screenN5 .n5MobileHubGrid, body.mobile-layout #screenN5 .n5MobileSubhubGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } body.mobile-layout #screenN5 .n5MobileHubGrid .btn, body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn{ min-height:72px; border-radius:20px; padding:14px 12px; white-space:normal; text-align:left; justify-content:flex-start; } body.mobile-layout #screenN5 .n5MobileSubhub{ display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:20px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } body.mobile-layout #screenN5 .n5MobilePanelBar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; } body.mobile-layout #screenN5 .n5ControlGrid, body.mobile-layout #screenN5 .n5HeroTools, body.mobile-layout #screenN5 .n5FlowRail, body.mobile-layout #screenN5 .n5FooterBar{ display:none; } body.mobile-layout #screenN5[data-mobile-pane="hub"] #n5ContentCard, body.mobile-layout #screenN5[data-mobile-pane="study-options"] #n5ContentCard, body.mobile-layout #screenN5[data-mobile-pane="practice-options"] #n5ContentCard, body.mobile-layout #screenN5[data-mobile-pane="exam-options"] #n5ContentCard{ display:none; } body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5MobileHubCard, body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5MobileHubCard{ display:none; } body.mobile-layout #screenN5 .panelHeader{ margin:-18px -18px 14px -18px; padding:18px; position:static; border-radius:22px 22px 0 0; } body.mobile-layout #screenN5 .n5HeroMain{ gap:8px; } body.mobile-layout #screenN5 .n5HeaderHint{ display:none; } body.mobile-layout #screenAI .aiHeroCard{ padding:16px; } body.mobile-layout #screenAI .aiHeroMeta{ display:none; } body.mobile-layout #screenAI .aiModeGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } body.mobile-layout #screenAI .aiModeCard{ min-height:110px; padding:16px; } body.mobile-layout #screenAI .aiModeText{ display:none; } body.mobile-layout #screenAI .aiPanelCard{ display:none; } body.mobile-layout #screenAI .aiPanelCard.isActive{ display:grid; } body.mobile-layout #screenStudent .studentMobileMoreCard{ display:grid; gap:12px; } body.mobile-layout #screenStudent .studentMobileMoreGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } body.mobile-layout #screenStudent .studentMobileMoreGrid .btn{ min-height:54px; padding:10px 8px; border-radius:18px; font-size:12px; } body.mobile-layout #screenStudent .studentCategoryCard, body.mobile-layout #screenStudent .studentMilestoneCard{ display:none; } body.mobile-layout #screenStudent .studentActivityGrid, body.mobile-layout #screenStudent #studentWeekBars, body.mobile-layout #screenStudent #studentWeekHint{ display:none; } body.mobile-layout #screenStudent[data-mobile-panel="performance"] .studentCategoryCard, body.mobile-layout #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{ display:grid; } body.mobile-layout #screenStudent[data-mobile-panel="activity"] .studentActivityGrid{ display:grid; grid-template-columns:1fr; } body.mobile-layout #screenStudent[data-mobile-panel="activity"] #studentWeekBars{ display:flex; } body.mobile-layout #screenStudent[data-mobile-panel="activity"] #studentWeekHint{ display:block; } body.mobile-layout #screenStudent .studentMetricGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } body.mobile-layout #screenStudent .studentMetricTile b{ font-size:26px; } body.mobile-layout #screenStudent .studentWeakCard, body.mobile-layout #screenStudent .studentWeekCard, body.mobile-layout #screenStudent .studentSummaryCard{ gap:14px; } body.mobile-layout #screenSettings .settingsMobileQuickGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0 14px; } body.mobile-layout #screenSettings .settingsMobileQuickGrid .btn{ min-height:48px; border-radius:16px; } body.mobile-layout #screenSettings .divider{ margin:12px 0; } body.mobile-layout #screenSettings .row{ gap:8px; } body.mobile-layout #screenSettings .input{ min-height:46px; } /* Mobile-first refinement Keep the same routes and logic, but make the handheld experience feel like a focused app instead of a compressed desktop dashboard. */ body.mobile-layout{ background: radial-gradient(1200px 540px at 50% -180px, color-mix(in srgb, var(--chip) 52%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--card) 58%, transparent) 0%, transparent 28%), var(--bg); } body.mobile-layout .appMainScroll{ scroll-padding-top:104px; scroll-padding-bottom:140px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding:10px 10px calc(106px + env(safe-area-inset-bottom)); gap:14px; } body.mobile-layout .topbar.appTopbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand actions"; top:max(8px, env(safe-area-inset-top)); gap:10px 10px; padding:10px 12px; min-height:auto; border-radius:20px; background:color-mix(in srgb, var(--card) 90%, transparent); box-shadow:0 14px 28px rgba(12,23,38,.10); transition: transform .22s ease, opacity .22s ease, padding .22s ease, gap .22s ease, background-color .22s ease, box-shadow .22s ease; transform:translateY(0); will-change:transform, opacity; } body.mobile-layout .appTopbarLeft{ grid-area:brand; width:100%; align-items:flex-start; min-width:0; } body.mobile-layout .appTopbarBrand{ width:100%; } body.mobile-layout .appTopbarBrand b{ display:block; font-size:20px; line-height:1; letter-spacing:-.03em; } body.mobile-layout .appTopbarOptional{ display:block; margin-top:4px; font-size:11px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.82; } body.mobile-layout .appTopbarRight{ grid-area:actions; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas: "role utility" "auth auth"; width:min(100%, 252px); gap:8px 10px; align-items:start; min-width:0; } body.mobile-layout .appTopbar .roleSeg{ grid-area:role; width:100%; min-height:42px; padding:3px; border-radius:16px; background:color-mix(in srgb, var(--card) 86%, var(--chip) 14%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } body.mobile-layout .appTopbarChip{ justify-content:center; min-height:40px; padding-inline:14px; border-radius:14px; font-size:12px; font-weight:800; } body.mobile-layout .roleSegBtn{ min-height:36px; min-width:0; padding:0 12px; font-size:12px; } body.mobile-layout .roleSegBtn.active{ box-shadow:0 8px 14px rgba(12,23,38,.08); } body.mobile-layout #themeBtn.appTopbarChip{ grid-area:utility; align-self:start; width:44px; min-width:44px; padding:0; font-size:0; line-height:0; justify-self:end; } body.mobile-layout #themeBtn.appTopbarChip::before{ content:"DK"; font-size:10px; line-height:1; letter-spacing:.08em; } body.mobile-layout.dark #themeBtn.appTopbarChip::before{ content:"LT"; } body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ grid-area:auth; width:100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.mobile-layout #loginBtn.appTopbarChip{ min-height:42px; } body.mobile-layout #logoutBtn.appTopbarChip{ justify-self:stretch; } body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip, body.mobile-layout .appTopbarRight .roleSeg{ max-width:100%; } body.mobile-layout .appTopbarAvatar{ display:none; margin-left:0; width:0; height:0; flex-basis:0; } body.mobile-layout .appTopbarRight .btn{ box-shadow:none; } body.mobile-layout .appTopbarRight .btn:hover{ transform:none; box-shadow:none; } body.mobile-layout .appTopbarRight .btn.primary{ background:color-mix(in srgb, var(--chip) 74%, var(--card) 26%); } body.mobile-layout #themeBtn.appTopbarChip, body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ touch-action:manipulation; } body.mobile-layout #themeBtn.appTopbarChip:hover{ transform:none; } body.mobile-layout #themeBtn.appTopbarChip{ background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); } body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ justify-content:flex-start; text-align:left; } body.mobile-layout #loginBtn.appTopbarChip::before{ content:"Account"; margin-right:8px; font-size:10px; letter-spacing:.08em; opacity:.7; } body.mobile-layout #logoutBtn.appTopbarChip::before{ content:"Signed In"; margin-right:8px; font-size:10px; letter-spacing:.08em; opacity:.7; } body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ justify-content:flex-start; padding-inline:12px; } body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{ transform:translateY(-48px); opacity:.96; box-shadow:0 8px 18px rgba(12,23,38,.08); background:color-mix(in srgb, var(--card) 86%, transparent); } body.mobile-layout #bottomNav{ padding:6px 10px calc(6px + env(safe-area-inset-bottom)); } body.mobile-layout #bottomNav .bottomNavBar{ width:100%; padding:6px; gap:6px; border-radius:22px; border-color:color-mix(in srgb, var(--border) 82%, transparent); background:color-mix(in srgb, var(--card) 94%, transparent); box-shadow:0 12px 24px rgba(9,20,36,.13); backdrop-filter:blur(14px); } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:56px; padding:7px 4px 8px; border-radius:18px; display:grid; grid-auto-flow:row; justify-items:center; align-content:center; gap:4px; font-size:10px; font-weight:900; letter-spacing:.08em; line-height:1.1; text-transform:uppercase; } body.mobile-layout #bottomNav .bottomNavBtn::before{ display:grid; place-items:center; width:28px; height:28px; border-radius:999px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); background:color-mix(in srgb, var(--card) 82%, var(--chip) 18%); font-size:10px; letter-spacing:.08em; } body.mobile-layout #bottomNav .bottomNavBtn[data-route="home"]::before{content:"HM";} body.mobile-layout #bottomNav .bottomNavBtn[data-route="kana"]::before{content:"KN";} body.mobile-layout #bottomNav .bottomNavBtn[data-route="n5"]::before{content:"N5";} body.mobile-layout #bottomNav .bottomNavBtn[data-route="ai"]::before{content:"AI";} body.mobile-layout #bottomNav .bottomNavBtn[data-route="student"]::before{content:"ST";} body.mobile-layout #bottomNav .bottomNavBtn[data-route="teacher"]::before{content:"TC";} body.mobile-layout #bottomNav .bottomNavBtn[data-route="settings"]::before{content:"SE";} body.mobile-layout #bottomNav .bottomNavBtn.active{ transform:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--chip) 30%, transparent); } body.mobile-layout #bottomNav .bottomNavBtn.active::before{ background:color-mix(in srgb, var(--text) 92%, var(--chip) 8%); color:var(--card); border-color:transparent; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ margin-top:0 !important; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{ padding:16px; border-radius:22px; box-shadow:0 16px 30px rgba(9,20,36,.09); } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .hint{ line-height:1.45; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .miniTag{ min-height:34px; display:inline-flex; align-items:center; justify-content:center; } body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) .btn{ touch-action:manipulation; } body.mobile-layout #screenHome .homePremiumGrid{ gap:12px; } body.mobile-layout #screenHome .homeHero.homeSpanAll{ overflow:hidden; padding:18px; background: linear-gradient(135deg, color-mix(in srgb, var(--chip) 48%, var(--card) 52%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 68%), var(--surface-1); } body.mobile-layout #screenHome .homeHeroShell{ gap:16px; } body.mobile-layout #screenHome .homeGreeting{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; } body.mobile-layout #screenHome .homeHeroTitle{ font-size:30px; line-height:.95; letter-spacing:-.04em; } body.mobile-layout #screenHome .homeHeroLevel{ display:inline-flex; width:max-content; padding:7px 12px; border-radius:999px; background:color-mix(in srgb, var(--card) 72%, transparent); } body.mobile-layout #screenHome .homeHeroSub{ max-width:32ch; font-size:14px; } body.mobile-layout #screenHome .homeHeroMeta{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; width:100%; } body.mobile-layout #screenHome .homeHeroProgressText, body.mobile-layout #screenHome .homeContinueMeta, body.mobile-layout #screenHome .homeQuickActionText{ display:none; } body.mobile-layout #screenHome .homeHeroProgressCard{ padding:14px; border-radius:20px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeProgressIdentityCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenHome .homeMobileMoreCard{ gap:14px; } body.mobile-layout #screenHome .homePathList{ gap:10px; } body.mobile-layout #screenHome .homePathStep{ border-radius:18px; padding:12px; } body.mobile-layout #screenHome .homeContinueAction{ gap:10px; } body.mobile-layout #screenHome .homeContinueBtn, body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:64px; text-align:left; justify-content:flex-start; } body.mobile-layout #screenHome .homeQuickActionLabel{ font-size:14px; } body.mobile-layout #screenHome .homeInsightSurface{ gap:14px; } body.mobile-layout #screenHome .homePathSummary, body.mobile-layout #screenHome .homePathText, body.mobile-layout #screenHome .homeHeroSub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.mobile-layout #screenHome .homeInsightCard{ display:grid; } body.mobile-layout #screenHome .homeMobileMoreCard{ display:grid; gap:10px; } body.mobile-layout #screenHome .homeMobileMoreGrid .btn{ min-height:48px; padding:10px 12px; } body.mobile-layout #screenHome .homeInsightMetaGrid{ grid-template-columns:1fr; gap:8px; } body.mobile-layout #screenHome .homeInsightMetric:nth-child(2), body.mobile-layout #screenHome .homeInsightMetric:nth-child(3){ display:none; } body.mobile-layout #screenHome .homeInsightActions .btn:last-child{ display:none; } body.mobile-layout #screenKana .kanaJourneyCard{ background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 72%), var(--surface-1); } body.mobile-layout #screenKana .kanaJourneyHeader{ gap:14px; } body.mobile-layout #screenKana .kanaJourneyTitle{ font-size:28px; letter-spacing:-.03em; } body.mobile-layout #screenKana .kanaJourneyMeta{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; width:100%; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn{ min-height:64px; justify-content:flex-start; text-align:left; } body.mobile-layout #screenKana #kanaMobileBrowseBtn{ display:none; } body.mobile-layout #screenKana .kanaMobileActionGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } body.mobile-layout #screenKana .kanaJourneyActionHint{ display:none; } body.mobile-layout #screenKana .kanaPracticePanel{ min-height:calc(100svh - 220px); } body.mobile-layout #screenKana .kanaQuestionShell{ padding:18px; border-radius:20px; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); } body.mobile-layout #screenKana .big{ font-size:72px; line-height:.95; } body.mobile-layout #screenKana .kanaActionBar{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); } body.mobile-layout #screenKana .choices{ grid-template-columns:1fr; } body.mobile-layout #screenN5 .n5MobileHubCard{ background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 28%, var(--card) 72%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 76%), var(--surface-1); } body.mobile-layout #screenN5 .n5MobileHubTop{ gap:14px; } body.mobile-layout #screenN5 .n5MobileHubTop .hint:last-child{ max-width:30ch; } body.mobile-layout #screenN5 .n5MobileHubGrid .btn, body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn{ min-height:84px; padding:16px 14px; border-radius:20px; } body.mobile-layout #screenN5 .n5MobilePanelBar{ position:sticky; top:92px; z-index:5; margin:-4px 0 12px; padding:10px 12px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(12px); } body.mobile-layout #screenN5 #n5ContentCard{ min-height:calc(100svh - 210px); } body.mobile-layout #screenN5 .n5WorkspaceSurface{ gap:16px; } body.mobile-layout #n5PracticeSummary{ margin-top:8px !important; display:grid; gap:10px; justify-items:center; text-align:center; } body.mobile-layout #n5PracticeSummaryText{ font-size:13px; line-height:1.35; font-weight:800 !important; color:var(--muted); } body.mobile-layout #n5PracticeSummary .n5PracticeSummaryMobile{ display:grid; gap:8px; width:100%; max-width:100%; } body.mobile-layout #n5PracticeSummary .n5PracticeSummaryScore{ font-size:32px; line-height:1; font-weight:950; letter-spacing:-.04em; color:var(--text); } body.mobile-layout #n5PracticeSummary .n5PracticeSummaryAdvice{ font-size:12px; line-height:1.45; color:var(--muted); } body.mobile-layout #n5PracticeSummary .n5PracticeSummaryWeakBtn{ width:100%; min-height:46px; border-radius:15px; } body.mobile-layout #n5PracticeSummary > .row{ width:100%; margin-top:0 !important; } body.mobile-layout #n5PracticeSummary > .row .btn{ width:100%; } body.mobile-layout #screenN5 .practiceHeader{ gap:12px; } body.mobile-layout #screenN5 .practiceActions .btn, body.mobile-layout #screenN5 .n5ExamEntryGrid .btn{ min-height:48px; } body.mobile-layout #screenAI .aiHeroCard{ background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 74%), var(--surface-1); } body.mobile-layout #screenAI .aiModeCard{ min-height:120px; text-align:left; justify-content:space-between; } body.mobile-layout #screenAI .aiMobileBackBtn{ display:inline-flex; min-height:36px; border-radius:12px; } body.mobile-layout #screenAI .aiModeAction{ margin-top:auto; } body.mobile-layout #screenAI .aiPanelCard{ display:none; } body.mobile-layout #screenAI[data-mobile-detail="open"] .aiPanelCard.isActive{ min-height:calc(100svh - 250px); display:grid; } body.mobile-layout #screenStudent .studentSummaryCard{ background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 30%, var(--card) 70%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 72%), var(--surface-1); } body.mobile-layout #screenStudent .studentSectionTitle{ font-size:28px; line-height:1; letter-spacing:-.03em; } body.mobile-layout #screenStudent .studentSummaryBody{ gap:14px; } body.mobile-layout #screenStudent .studentOverviewHero{ gap:14px; } body.mobile-layout #screenStudent .studentMetricTile, body.mobile-layout #screenStudent .studentMilestoneTile{ min-height:108px; border-radius:18px; } body.mobile-layout #screenStudent .studentMetricTile .note{ display:none; } body.mobile-layout #screenStudent .studentMetricTile:nth-child(3), body.mobile-layout #screenStudent .studentMetricTile:nth-child(4){ display:none; } body.mobile-layout #screenStudent .studentMobileMoreCard{ display:grid; gap:10px; } body.mobile-layout #screenStudent[data-mobile-panel="none"] .studentCategoryCard, body.mobile-layout #screenStudent[data-mobile-panel="none"] .studentMilestoneCard{ display:none; } body.mobile-layout #screenStudent .studentWeekCard{ display:grid; gap:12px; } body.mobile-layout #screenStudent .studentWeekCard > h3, body.mobile-layout #screenStudent .studentWeekCard > .hint{ display:none; } body.mobile-layout #screenStudent .studentActivityGrid, body.mobile-layout #screenStudent #studentWeekBars, body.mobile-layout #screenStudent #studentWeekHint{ display:none; } body.mobile-layout #screenStudent .studentSuggestedAction{ margin-top:0; } body.mobile-layout #screenStudent .studentCardActions{ gap:10px; } body.mobile-layout #screenStudent .studentCardActions .btn{ flex:1 1 100%; } body.mobile-layout #screenStudent .studentWeakGroup{ border-radius:18px; } body.mobile-layout #screenTeacher .teacherHeroCard, body.mobile-layout #screenTeacher .teacherHealthCard{ background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 76%), var(--surface-1); } body.mobile-layout #screenTeacher .teacherDashboardGrid{ gap:12px; } body.mobile-layout #screenTeacher .teacherHealthGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } body.mobile-layout #screenTeacher .row .btn{ flex:1 1 calc(50% - 5px); } body.mobile-layout #screenSettings .settingsGrid{ gap:12px; } body.mobile-layout #screenSettings .note{ line-height:1.35; } body.mobile-layout #screenSettings #studentSettingsCard > .note, body.mobile-layout #screenSettings #teacherSettingsCard > .note{ display:none; } body.mobile-layout #screenSettings #studentSettingsCard .row .note, body.mobile-layout #screenSettings #teacherSettingsCard .row .note{ margin-bottom:4px; } body.mobile-layout #screenSettings .settingsMobileQuickGrid{ position:sticky; top:92px; z-index:4; margin:0 0 14px; padding:6px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(10px); } body.mobile-layout #screenSettings [id$="Anchor"]{ scroll-margin-top:152px; } body.mobile-layout #screenSettings .row .btn{ flex:1 1 100%; } body.mobile-layout{ --mobile-topbar-space:92px; --mobile-bottom-nav-space:98px; } body.mobile-layout.appLayoutBody{ height:100svh; overflow:hidden; } body.mobile-layout .appLayout, body.mobile-layout .appMainPane, body.mobile-layout .appMainScroll{ height:100svh; max-height:100svh; } body.mobile-layout .appMainScroll{ overflow-x:hidden; overflow-y:auto; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ min-height:100%; height:auto; padding:4px 8px calc(70px + env(safe-area-inset-bottom)); gap:6px; overflow:visible; box-sizing:border-box; } body.mobile-layout .topbar.appTopbar{ flex:0 0 auto; min-height:50px; padding:4px 8px; border-radius:13px; box-shadow:0 7px 14px rgba(12,23,38,.06); } body.mobile-layout .topbar.appTopbar{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand actions"; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ flex:1 1 auto; min-height:0; overflow:visible; } body.mobile-layout :is(#screenHome .homePremiumGrid, #screenAI .aiHubShell, #screenKana .grid, #screenN5 .grid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid){ min-height:0; height:auto; overflow:visible; align-content:stretch; } body.mobile-layout :is(#screenHome .card, #screenAI .card, #screenKana .card, #screenN5 .card, #screenStudent .card, #screenTeacher .card, #screenSettings .card){ min-height:0; padding:10px; border-radius:16px; } body.mobile-layout #screenHome .homePremiumGrid{ grid-template-columns:1fr; grid-template-rows:auto; gap:8px; } #screenHome .homeMissionCard{ display:none; } #n5PracticeSummary .n5PracticeSummaryMobile{ display:none; } body.mobile-layout #screenHome .homeHero.homeSpanAll{ order:1; overflow:hidden; padding:12px; background: linear-gradient(135deg, color-mix(in srgb, var(--chip) 40%, var(--card) 60%) 0%, color-mix(in srgb, var(--card) 97%, transparent) 72%), var(--surface-1); } body.mobile-layout #screenHome .homePathCard{ order:3; border-color:color-mix(in srgb, var(--chip) 40%, var(--border) 60%); background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%), var(--surface-1); box-shadow:0 10px 20px rgba(9,20,36,.08); } body.mobile-layout #screenHome .homeQuickActionsCard{ order:4; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); } body.mobile-layout #screenHome .homeMobileMoreCard{ order:5; background:color-mix(in srgb, var(--card) 98%, transparent); } body.mobile-layout #screenHome .homeMissionCard{ order:0; display:grid; gap:8px; padding:14px; border-radius:18px; border:1px solid color-mix(in srgb, var(--chip) 34%, var(--border) 66%); background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 24%, var(--card) 76%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%), var(--surface-1); box-shadow:0 10px 20px rgba(9,20,36,.08); } body.mobile-layout #screenHome .homeMissionHeader{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; } body.mobile-layout #screenHome .homeMissionEyebrow{ font-size:11px; line-height:1.1; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } body.mobile-layout #screenHome .homeMissionTitle{ margin-top:4px; font-size:17px; line-height:1.15; font-weight:900; letter-spacing:-.02em; } body.mobile-layout #screenHome .homeMissionStreak{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 10px; border-radius:999px; background:color-mix(in srgb, var(--card) 82%, var(--chip) 18%); color:var(--text); font-size:12px; font-weight:900; white-space:nowrap; } body.mobile-layout #screenHome .homeMissionTasks{ display:grid; gap:8px; } body.mobile-layout #screenHome .homeMissionTask{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; padding:10px 11px; border-radius:16px; border:1px solid color-mix(in srgb, var(--border) 82%, transparent); background:color-mix(in srgb, var(--card) 92%, transparent); } body.mobile-layout #screenHome .homeMissionCheck{ width:20px; height:20px; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--border) 78%, transparent); background:color-mix(in srgb, var(--card) 88%, transparent); box-shadow:inset 0 0 0 3px transparent; } body.mobile-layout #screenHome .homeMissionTask.isDone .homeMissionCheck{ border-color:transparent; background:var(--ok); box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--ok) 28%, #fff 72%); } body.mobile-layout #screenHome .homeMissionTaskBody{ min-width:0; display:grid; gap:2px; } body.mobile-layout #screenHome .homeMissionTaskTitle{ font-size:13px; line-height:1.2; font-weight:800; } body.mobile-layout #screenHome .homeMissionTaskMeta, body.mobile-layout #screenHome .homeMissionContinueMeta, body.mobile-layout #screenHome .homeMissionReward, body.mobile-layout #screenHome .homeMissionProgressLabel, body.mobile-layout #screenHome .homeMissionProgressPct{ font-size:12px; line-height:1.4; color:var(--muted); } body.mobile-layout #screenHome .homeMissionProgress{ display:grid; gap:8px; } body.mobile-layout #screenHome .homeMissionProgressTop{ display:flex; align-items:center; justify-content:space-between; gap:8px; } body.mobile-layout #screenHome .homeMissionProgressTrack{ width:100%; height:6px; overflow:hidden; border-radius:999px; background:color-mix(in srgb, var(--border) 84%, transparent); } body.mobile-layout #screenHome .homeMissionProgressFill{ height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--chip) 50%, var(--text) 50%) 0%, var(--text) 100%); transition:width .22s ease; } body.mobile-layout #screenHome .homeMissionReward{ min-height:18px; } body.mobile-layout #screenHome .homeMissionCard.isComplete .homeMissionReward{ color:var(--ok); font-weight:800; } body.mobile-layout #screenHome .homeMissionAction{ display:grid; gap:6px; } body.mobile-layout #screenHome .homeMissionContinueBtn{ width:100%; min-height:50px; border-radius:16px; font-size:15px; font-weight:900; } body.mobile-layout #screenHome .homePathCard .homeContinueAction{ display:none; } body.mobile-layout #screenHome .homeHero.homeSpanAll, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeProgressIdentityCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenHome .homeInsightCard, body.mobile-layout #screenHome .homeStatsCard, body.mobile-layout #screenHome .homeLeaderboardCard, body.mobile-layout #screenHome .homeWinnerCard{ overflow:hidden; } body.mobile-layout #screenHome .homeHeroShell, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeQuickActionsCard{ height:100%; } body.mobile-layout #screenHome .homeHeroShell{ grid-template-columns:1fr; gap:8px; align-items:start; } body.mobile-layout #screenHome .homeHeroIntro{ gap:8px; } body.mobile-layout #screenHome .homeHeroTitle{ font-size:21px; line-height:1; letter-spacing:-.035em; } body.mobile-layout #screenHome .homeHeroSub{ font-size:13px; line-height:1.45; max-width:none; margin:0; } body.mobile-layout #screenHome .homeHeroMeta{ gap:6px; grid-template-columns:repeat(2, minmax(0, 1fr)); } body.mobile-layout #screenHome .homeHeroMeta .miniTag{ min-height:28px; font-size:11px; justify-content:flex-start; padding-inline:9px; } body.mobile-layout #screenHome .homeHeroProgressCard{ gap:6px; padding:8px 9px; border-radius:14px; grid-template-columns:minmax(0,1fr); } body.mobile-layout #screenHome .homeProgressIdentityCard{ gap:12px; padding:12px; border-radius:20px; } body.mobile-layout #screenHome .homeProgressIdentityTitle{ font-size:20px; } body.mobile-layout #screenHome .homeProgressIdentitySub, body.mobile-layout #screenHome .homeProgressMiniMeta{ font-size:12px; line-height:1.45; } body.mobile-layout #screenHome .homeProgressIdentityRail{ padding:12px; border-radius:16px; gap:8px; } body.mobile-layout #screenHome .homeProgressIdentityValue{ font-size:20px; } body.mobile-layout #screenHome .homeProgressStats{ gap:8px; } body.mobile-layout #screenHome .homeProgressStat{ padding:12px; border-radius:16px; } body.mobile-layout #screenHome .homeProgressStatValue{ font-size:20px; } body.mobile-layout #screenHome .homeHeroProgressTop{ gap:10px; align-items:center; } body.mobile-layout #screenHome .homeHeroProgressValue{ margin-top:3px; font-size:24px; } body.mobile-layout #screenHome .homeHeroRingWrap{ min-width:76px; } body.mobile-layout #screenHome .homeHeroProgressCard .ring{ width:74px; height:74px; } body.mobile-layout #screenHome .homeHeroProgressCard .ringInner{ width:54px; height:54px; } body.mobile-layout #screenHome .homeLevelRail{ height:7px; } body.mobile-layout #screenHome .homeLevelRailHint{ font-size:11px; line-height:1.3; } body.mobile-layout #screenHome .homeGreeting, body.mobile-layout #screenHome .homeHeroLevel{ display:none; } body.mobile-layout #screenHome .homeSectionHead{ gap:8px; align-items:center; } body.mobile-layout #screenHome .homeSectionHead h3{ font-size:13px; letter-spacing:.06em; } body.mobile-layout #screenHome .homePathProgress{ gap:6px; padding:10px; border-radius:14px; } body.mobile-layout #screenHome .homePathProgressTop{ gap:8px; } body.mobile-layout #screenHome .homePathSummary{ font-size:12px; line-height:1.45; } body.mobile-layout #screenHome .homePathStep:nth-child(n+4){ display:none; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; } body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:42px; padding:8px 9px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); border-radius:14px; gap:2px; } body.mobile-layout #screenHome .homeQuickActionLabel{ font-size:13px; } body.mobile-layout #screenHome .homeQuickActionsCard .homeSectionSub{ display:none; } body.mobile-layout #screenHome .homeQuickActionText{ display:none; } body.mobile-layout #screenHome .homeContinueBtn{ min-height:52px; font-size:15px; justify-content:flex-start; padding:10px 12px; border-radius:15px; box-shadow:0 10px 18px rgba(9,20,36,.10); } body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenHome .homeMobileMoreCard{ gap:6px; } body.mobile-layout #screenHome .homePathList{ gap:4px; } body.mobile-layout #screenHome .homePathStep{ padding:7px 9px; border-radius:14px; } body.mobile-layout #screenHome .homePathMarker{ width:24px; height:24px; font-size:10px; } body.mobile-layout #screenHome .homePathBody{ gap:4px; } body.mobile-layout #screenHome .homePathTitle{ font-size:13px; line-height:1.3; } body.mobile-layout #screenHome .homePathText{ font-size:12px; line-height:1.35; } body.mobile-layout #screenHome .homeContinueAction{ margin-top:auto; gap:6px; } body.mobile-layout #screenHome .homeContinueMeta{ font-size:11px; line-height:1.35; } body.mobile-layout #screenHome .homeMobileMoreGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; } body.mobile-layout #screenHome .homeMobileMoreGrid .btn{ min-height:42px; padding:8px 6px; border-radius:14px; font-size:11px; } body.mobile-layout #screenHome .homeInsightSurface{ gap:8px; padding:10px; border-radius:14px; } body.mobile-layout #screenHome .homeInsightMetric{ padding:10px; border-radius:14px; } body.mobile-layout #screenHome .homeStatsGrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; } body.mobile-layout #screenHome .homeStatTile{ padding:10px; border-radius:14px; } body.mobile-layout #screenHome .homeStatValue{ font-size:20px; } body.mobile-layout #screenHome .homeStatLabel{ margin-top:4px; font-size:11px; } body.mobile-layout #screenHome .homeInsightCard, body.mobile-layout #screenHome .homeStatsCard, body.mobile-layout #screenHome .homeLeaderboardCard, body.mobile-layout #screenHome .homeWinnerCard{ display:none !important; } body.mobile-layout #screenHome[data-mobile-panel="insight"] .homeInsightCard, body.mobile-layout #screenHome[data-mobile-panel="stats"] .homeStatsCard, body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard, body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{ display:grid !important; } body.mobile-layout #screenHome[data-mobile-panel]:not([data-mobile-panel="none"]) .homeMobileMoreCard{ display:none !important; } body.mobile-layout #screenKana .grid{ grid-template-rows:minmax(0,1fr); } body.mobile-layout #screenKana .kanaJourneyCard, body.mobile-layout #screenKana .kanaPracticePanel{ height:auto; overflow:auto; } body.mobile-layout #screenKana .kanaJourneyCard{ display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:6px; } body.mobile-layout #screenKana #kanaMobileBrowseBtn{ display:none; } body.mobile-layout #screenKana .kanaMobileActionGrid{ align-content:start; } body.mobile-layout #screenKana .kanaPracticePanel{ min-height:0; padding:10px; } body.mobile-layout #screenKana .kanaJourneyHeader{ gap:6px; } body.mobile-layout #screenKana .kanaJourneyMeta{ gap:4px; } body.mobile-layout #screenN5 .grid{ grid-template-rows:minmax(0,1fr); } body.mobile-layout #screenN5 .n5MobileHubCard, body.mobile-layout #screenN5 #n5ContentCard{ height:auto; min-height:0; } body.mobile-layout #screenN5 .n5MobileHubCard{ overflow:auto; display:grid; grid-auto-rows:max-content; align-content:start; gap:8px; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 99%, transparent) 82%), var(--surface-1); } body.mobile-layout #screenN5 .n5MobileHubTop{ display:grid; gap:4px; justify-items:start; } body.mobile-layout #screenN5 .n5MobileHubTop .hint:first-child{ margin:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; } body.mobile-layout #screenN5 .n5MobileHubTop h3{ margin:0; font-size:0; line-height:0; } body.mobile-layout #screenN5 .n5MobileHubTop h3::before{ content:"N5 Practice"; display:block; font-size:20px; line-height:1.02; letter-spacing:-.03em; color:var(--text); } body.mobile-layout #screenN5 .n5MobileHubTop .hint:last-child{ max-width:none; margin:0; font-size:12px; line-height:1.4; } body.mobile-layout #screenN5 .n5MobileHubTop .miniTag{ display:none; } body.mobile-layout #screenN5 .n5MobileContinueCard{ display:grid; gap:8px; padding:10px; border:1px solid color-mix(in srgb, var(--chip) 36%, var(--border) 64%); border-radius:16px; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 84%), var(--surface-1); box-shadow:0 10px 20px rgba(9,20,36,.08); } body.mobile-layout #screenN5 .n5MobileContinueIntro{ display:grid; gap:4px; } body.mobile-layout #screenN5 .n5MobileContinueTitle{ font-size:16px; line-height:1.2; font-weight:900; } body.mobile-layout #screenN5 .n5MobileContinueHint{ font-size:12px; line-height:1.4; } body.mobile-layout #screenN5 .n5MobileContinueMeta{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; } body.mobile-layout #screenN5 .n5MobileContinueMeta .miniTag{ min-height:28px; justify-content:flex-start; padding-inline:9px; font-size:11px; } body.mobile-layout #screenN5 #n5MobileContinueBtn{ min-height:50px; padding:10px 12px; justify-content:flex-start; text-align:left; border-radius:15px; } body.mobile-layout #screenN5 .n5MobileHubTop .hint:last-child{ max-width:none; } body.mobile-layout #screenN5 .n5MobileHubGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } body.mobile-layout #screenN5 .n5MobileHubGrid [data-n5-mobile-pane="study"], body.mobile-layout #screenN5 .n5MobileHubGrid [data-n5-mobile-pane="practice"], body.mobile-layout #screenN5 .n5MobileHubGrid [data-n5-mobile-pane="exam"], body.mobile-layout #screenN5 #n5MobileAiCoachBtn{ min-height:68px; padding:10px 12px; justify-content:flex-start; text-align:left; font-size:14px; border-radius:15px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } body.mobile-layout #screenN5 #n5MobileAiCoachBtn{ background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 12%, var(--card) 88%) 0%, color-mix(in srgb, var(--card) 99%, transparent) 84%), var(--surface-1); } body.mobile-layout #screenN5[data-mobile-pane="study-options"] .n5MobileContinueCard, body.mobile-layout #screenN5[data-mobile-pane="practice-options"] .n5MobileContinueCard, body.mobile-layout #screenN5[data-mobile-pane="exam-options"] .n5MobileContinueCard, body.mobile-layout #screenN5[data-mobile-pane="study-options"] .n5MobileHubGrid, body.mobile-layout #screenN5[data-mobile-pane="practice-options"] .n5MobileHubGrid, body.mobile-layout #screenN5[data-mobile-pane="exam-options"] .n5MobileHubGrid{ display:none; } body.mobile-layout #screenN5 .n5MobileSubhub{ margin-top:0; padding:10px; border-radius:15px; gap:8px; } body.mobile-layout #screenN5 .n5MobileSubhubBackBtn{ justify-content:center; min-height:34px; padding:6px 10px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } body.mobile-layout #screenN5 .n5MobileSubhub .note{ margin-bottom:4px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; } body.mobile-layout #screenN5 .n5MobileSubhubGrid{ grid-template-columns:1fr; gap:6px; } body.mobile-layout #screenN5 .n5MobilePanelBar{ position:static; margin:0 0 4px; padding:6px 8px; } body.mobile-layout #screenN5 #n5ContentCard{ overflow:auto; padding:8px; border-radius:16px; box-shadow:0 10px 20px rgba(9,20,36,.07); } body.mobile-layout #screenN5[data-mobile-pane="practice"] .panelHeader, body.mobile-layout #screenN5[data-mobile-pane="exam"] .panelHeader{ margin:0 0 6px; padding:8px; border-radius:14px; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); } body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5HeaderEyebrow, body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5HeaderEyebrow, body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5HeaderHint, body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5HeaderHint, body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5WorkspaceMeta, body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5WorkspaceMeta{ display:none; } body.mobile-layout #screenN5[data-mobile-pane="practice"] .practiceTitle, body.mobile-layout #screenN5[data-mobile-pane="exam"] .practiceTitle{ font-size:18px; line-height:1.1; } body.mobile-layout #screenN5[data-mobile-pane="practice"] .practiceSub, body.mobile-layout #screenN5[data-mobile-pane="exam"] .practiceSub{ font-size:12px; line-height:1.35; margin:0; } body.mobile-layout #screenN5 .n5WorkspaceSurface{ gap:10px; } body.mobile-layout #screenN5 .practiceActions{ margin-top:0; } body.mobile-layout #screenN5 .practiceSecondaryRow{ gap:6px; align-items:stretch; } body.mobile-layout #screenN5 .practiceSecondaryRow .btn, body.mobile-layout #screenN5 .practiceSecondaryRow .miniLinkBtn, body.mobile-layout #screenN5 .n5ExamEntryGrid .btn{ min-height:42px; } body.mobile-layout #screenN5 .n5ExamEntry{ gap:8px; } body.mobile-layout #screenN5 .n5ExamEntryGrid{ grid-template-columns:1fr; gap:6px; } body.mobile-layout #screenN5 .n5ExamOverview{ grid-template-columns:1fr; gap:6px; } body.mobile-layout #screenAI .aiHubShell{ display:grid; grid-template-rows:auto auto auto; gap:10px; align-content:start; } body.mobile-layout[data-current-route="ai"] .topbar.appTopbar{ min-height:44px; padding:3px 7px; border-radius:12px; } body.mobile-layout[data-current-route="ai"] .appTopbarBrand b{ font-size:16px; } body.mobile-layout[data-current-route="ai"] #themeBtn.appTopbarChip{ min-height:28px; width:32px; min-width:32px; border-radius:10px; } body.mobile-layout[data-current-route="ai"] .appTopbarAvatar{ display:none; } body.mobile-layout #screenAI .aiModeGrid, body.mobile-layout #screenAI .aiDetailGrid{ min-height:0; } body.mobile-layout #screenAI .aiHeroCard{ padding:12px 14px; border-radius:20px; min-height:auto; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 84%), var(--surface-1); box-shadow:0 12px 24px rgba(9,20,36,.07); } body.mobile-layout #screenAI .aiHeroCard > div{ gap:4px; } body.mobile-layout #screenAI .aiHeroTitle{ font-size:19px; line-height:1.06; letter-spacing:-.03em; margin:0; } body.mobile-layout #screenAI .aiHeroSub{ display:block; margin:0; font-size:12px; line-height:1.42; max-width:32ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.mobile-layout #screenAI .aiHeroMeta{ display:none; } body.mobile-layout #screenAI .aiModeGrid{ grid-template-columns:1fr; align-content:start; gap:10px; } body.mobile-layout #screenAI #aiCoachCardBtn{ min-height:128px; padding:14px 16px; border-radius:22px; border-color:color-mix(in srgb, var(--chip) 34%, var(--border) 66%); background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 28%, var(--card) 72%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 80%), var(--surface-1); box-shadow:0 14px 28px rgba(9,20,36,.09); } body.mobile-layout #screenAI #senseiCardBtn{ min-height:112px; padding:14px 16px; border-radius:20px; opacity:1; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); } body.mobile-layout #screenAI .aiModeCard{ gap:6px; text-align:left; justify-content:flex-start; box-shadow:0 10px 20px rgba(9,20,36,.06); } body.mobile-layout #screenAI .aiModeCard .hint{ font-size:11px; line-height:1.2; text-transform:uppercase; letter-spacing:.08em; } body.mobile-layout #screenAI .aiModeTitle{ font-size:19px; line-height:1.12; margin:0; } body.mobile-layout #screenAI .aiModeText{ display:block; margin:0; font-size:12px; line-height:1.42; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:34px; } body.mobile-layout #screenAI .aiModeAction{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; min-height:44px; width:100%; padding:10px 12px; border-radius:15px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); font-size:13px; font-weight:900; color:var(--text); } body.mobile-layout #screenAI #aiCoachCardBtn .aiModeAction{ background:color-mix(in srgb, var(--text) 92%, var(--chip) 8%); color:var(--card); border-color:transparent; box-shadow:0 8px 16px rgba(9,20,36,.08); } body.mobile-layout #screenAI .aiMobileContextRow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; } body.mobile-layout #screenAI .aiMobileContextRow .btn{ min-height:34px; padding:7px 8px; border-radius:999px; font-size:11px; justify-content:center; } body.mobile-layout #screenAI[data-mobile-detail="open"] .aiHeroCard, body.mobile-layout #screenAI[data-mobile-detail="open"] .aiModeGrid, body.mobile-layout #screenAI[data-mobile-detail="open"] .aiMobileContextRow{ display:none; } body.mobile-layout #screenAI[data-mobile-detail="closed"] .aiDetailGrid{ display:none; } body.mobile-layout #screenAI .aiPanelCard{ height:auto; overflow:auto; padding:12px; border-radius:20px; gap:10px; } body.mobile-layout #screenAI[data-mobile-detail="open"] .aiDetailGrid{ height:auto; display:grid; } body.mobile-layout #screenAI[data-mobile-detail="open"] .aiPanelCard.isActive{ min-height:calc(100svh - 188px); display:grid; } body.mobile-layout #screenAI .aiPanelHeader{ gap:8px; padding-bottom:0; } body.mobile-layout #screenAI .aiPanelHeader h2{ font-size:18px; line-height:1.12; margin:0; } body.mobile-layout #screenAI .aiPanelHeader .hint{ font-size:12px; line-height:1.4; margin-top:2px; } body.mobile-layout #screenAI .aiCoachStats{ gap:6px; } body.mobile-layout #screenAI .aiCoachStats .miniTag{ min-height:30px; font-size:10px; padding-inline:8px; } body.mobile-layout #screenAI .aiCoachInsightGrid{ gap:8px; grid-template-columns:1fr; } body.mobile-layout #screenAI .aiCoachInsightCard, body.mobile-layout #screenAI .aiCoachFocus, body.mobile-layout #screenAI .aiCoachResponse{ padding:12px; border-radius:16px; gap:8px; } body.mobile-layout #screenAI .aiCoachInsightValue, body.mobile-layout #screenAI .aiCoachFocusTitle{ font-size:16px; line-height:1.18; } body.mobile-layout #screenAI .aiCoachFocusText, body.mobile-layout #screenAI .aiCoachCtaText, body.mobile-layout #screenAI .senseiFooterNote{ font-size:12px; line-height:1.42; } body.mobile-layout #screenAI .aiCoachChecklist{ gap:6px; } body.mobile-layout #screenAI .aiCoachChecklist li{ padding-left:18px; font-size:12px; line-height:1.4; } body.mobile-layout #screenAI .aiCoachActions{ gap:6px; grid-template-columns:1fr; } body.mobile-layout #screenAI .aiCoachActions .btn, body.mobile-layout #screenAI #aiCoachOpenSuggestionBtn{ min-height:44px; border-radius:15px; width:100%; justify-content:flex-start; text-align:left; } body.mobile-layout #screenAI .senseiMessages{ min-height:0; max-height:none; flex:1 1 auto; padding:10px 8px 118px; border-radius:16px; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); border:1px solid color-mix(in srgb, var(--border) 82%, transparent); gap:8px; overscroll-behavior:contain; scroll-behavior:smooth; scroll-padding-bottom:118px; } body.mobile-layout #screenAI .senseiMessage{ gap:4px; } body.mobile-layout #screenAI .senseiMessage.grouped{ margin-top:-2px; } body.mobile-layout #screenAI .senseiMessage.grouped .senseiLabel{ display:none; } body.mobile-layout #screenAI .senseiLabel{ font-size:11px; line-height:1.2; padding-inline:4px; } body.mobile-layout #screenAI .senseiBubble{ max-width:75%; padding:10px 12px; border-radius:18px; font-size:14px; line-height:1.46; box-shadow:0 6px 14px rgba(9,20,36,.04); } body.mobile-layout #screenAI .senseiMessage.sensei .senseiBubble{ border-bottom-left-radius:8px; } body.mobile-layout #screenAI .senseiMessage.user .senseiBubble{ border-bottom-right-radius:8px; } body.mobile-layout #screenAI .senseiEmptyState{ display:grid; gap:8px; align-content:center; justify-items:start; min-height:100%; padding:8px; } body.mobile-layout #screenAI .senseiEmptyTitle{ font-size:17px; line-height:1.15; font-weight:900; letter-spacing:-.02em; } body.mobile-layout #screenAI .senseiEmptyText{ font-size:13px; line-height:1.45; color:var(--muted); max-width:28ch; } body.mobile-layout #screenAI .senseiPromptBlock{ display:grid; gap:6px; } body.mobile-layout #screenAI .senseiPromptLabel{ margin:0 !important; font-size:11px; line-height:1.2; text-transform:uppercase; letter-spacing:.08em; } body.mobile-layout #screenAI .senseiQuickPrompts{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:6px; padding-bottom:2px; scroll-snap-type:x proximity; } body.mobile-layout #screenAI .senseiQuickPrompts .btn{ min-height:34px; padding:7px 10px; font-size:11px; border-radius:999px; flex:0 0 auto; width:auto; white-space:nowrap; justify-content:center; scroll-snap-align:start; } body.mobile-layout #screenAI .senseiComposer{ gap:8px; grid-template-columns:minmax(0,1fr) auto; align-items:end; padding:8px; border:1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius:18px; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); position:sticky; bottom:0; z-index:2; } body.mobile-layout #screenAI .senseiComposer .input{ min-height:44px; border-radius:15px; padding:11px 13px; font-size:15px; } body.mobile-layout #screenAI .senseiComposer .btn{ width:42px; min-width:42px; min-height:42px; padding:0; border-radius:14px; justify-content:center; } body.mobile-layout #screenAI #senseiSendBtn{ font-size:0; position:relative; } body.mobile-layout #screenAI #senseiSendBtn::before{ content:attr(data-label); font-size:12px; font-weight:900; line-height:1; } body.mobile-layout #screenAI .senseiFooterNote{ font-size:11px; line-height:1.35; margin-top:2px; } body.mobile-layout #screenAI #aiSenseiPanel{ grid-template-rows:auto minmax(0,1fr) auto auto auto; overflow:hidden; } body.mobile-layout #screenStudent #studentStatsView{ grid-template-rows:minmax(0,.98fr) minmax(0,.88fr) minmax(0,.78fr) auto; } body.mobile-layout #screenStudent .studentSummaryCard{ order:1; } body.mobile-layout #screenStudent .studentWeekCard{ order:2; border-color:color-mix(in srgb, var(--chip) 34%, var(--border) 66%); background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%), var(--surface-1); } body.mobile-layout #screenStudent .studentWeakCard{ order:3; } body.mobile-layout #screenStudent .studentMobileMoreCard{ order:4; } body.mobile-layout #screenStudent .studentSummaryCard, body.mobile-layout #screenStudent .studentWeakCard, body.mobile-layout #screenStudent .studentWeekCard, body.mobile-layout #screenStudent .studentCategoryCard, body.mobile-layout #screenStudent .studentMilestoneCard{ overflow:auto; } body.mobile-layout #screenStudent .studentSummaryCard{ overflow:hidden; } body.mobile-layout #screenStudent .studentWeakList{ max-height:102px; overflow:auto; } body.mobile-layout #screenStudent .studentMobileMoreCard{ padding:7px 9px; } body.mobile-layout #screenStudent .studentMobileMoreCard .hint{ display:none; } body.mobile-layout #screenStudent .studentCategoryCard, body.mobile-layout #screenStudent .studentMilestoneCard{ display:none !important; } body.mobile-layout #screenStudent[data-mobile-panel="performance"] .studentCategoryCard, body.mobile-layout #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{ display:grid !important; } body.mobile-layout #screenStudent[data-mobile-panel]:not([data-mobile-panel="none"]) .studentMobileMoreCard{ display:none !important; } body.mobile-layout #screenTeacher .teacherDashboardGrid{ overflow:visible; } body.mobile-layout #screenTeacher .teacherDashboardGrid > .card{ overflow:auto; } body.mobile-layout #screenSettings .settingsGrid{ grid-template-rows:minmax(0,1fr); } body.mobile-layout #screenSettings .card{ height:100%; overflow:auto; } body.mobile-layout #screenSettings .settingsMobileQuickGrid{ position:static; top:auto; margin:0 0 8px; } body.mobile-layout .topbar.appTopbar{ min-height:48px; padding:4px 8px; border-radius:13px; } body.mobile-layout .appTopbarBrand b{ font-size:17px; } body.mobile-layout .appTopbarOptional{ display:none; } body.mobile-layout .appTopbarRight{ width:auto; display:flex; align-items:center; justify-content:flex-end; gap:3px; flex-wrap:nowrap; min-width:0; } body.mobile-layout .appTopbar .roleSeg{ min-height:30px; padding:1px; border-radius:12px; } body.mobile-layout .roleSegBtn{ min-height:26px; font-size:11px; padding:0 8px; } body.mobile-layout .appTopbarChip{ min-height:30px; border-radius:11px; padding-inline:8px; font-size:11px; } body.mobile-layout .appTopbar .roleSeg, body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ display:none; } body.mobile-layout #themeBtn.appTopbarChip{ width:34px; min-width:34px; } body.mobile-layout[data-current-route="settings"] .appTopbarRight{ width:min(100%, 232px); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas: "role utility" "auth auth"; gap:6px 8px; align-items:start; } body.mobile-layout[data-current-route="settings"] .appTopbar .roleSeg, body.mobile-layout[data-current-route="settings"] #loginBtn.appTopbarChip, body.mobile-layout[data-current-route="settings"] #logoutBtn.appTopbarChip{ display:flex; } body.mobile-layout[data-current-route="settings"] .appTopbar .roleSeg{ display:grid; } body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{ transform:none; opacity:1; box-shadow:0 8px 16px rgba(12,23,38,.06); background:color-mix(in srgb, var(--card) 90%, transparent); } body.mobile-layout.mobile-quiz-active .topbar.appTopbar{ min-height:44px; padding:4px 8px; border-radius:12px; background:color-mix(in srgb, var(--card) 84%, transparent); box-shadow:0 6px 14px rgba(12,23,38,.05); } body.mobile-layout.mobile-quiz-active .appTopbarBrand b{ font-size:16px; } body.mobile-layout.mobile-quiz-active .appTopbarRight{ width:auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; } body.mobile-layout.mobile-quiz-active .appTopbar .roleSeg, body.mobile-layout.mobile-quiz-active #loginBtn.appTopbarChip, body.mobile-layout.mobile-quiz-active #logoutBtn.appTopbarChip{ display:none; } body.mobile-layout.mobile-quiz-active #themeBtn.appTopbarChip{ min-height:30px; width:34px; min-width:34px; border-radius:11px; } body.mobile-layout :is(.btn, .miniTag, .hint, .note, h1, h2, h3, .homeHeroTitle, .practiceTitle, .studentSectionTitle, .aiModeTitle){ min-width:0; overflow-wrap:anywhere; word-break:break-word; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{ overflow:hidden; } body.mobile-layout .miniTag{ max-width:100%; } body.mobile-layout #bottomNav{ padding:2px 6px calc(2px + env(safe-area-inset-bottom)); } body.mobile-layout #bottomNav .bottomNavBar{ padding:2px; gap:3px; border-radius:14px; box-shadow:0 8px 16px rgba(9,20,36,.11); } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:42px; padding:3px 2px 4px; font-size:9px; overflow:hidden; text-overflow:ellipsis; min-width:0; } body.mobile-layout #bottomNav .bottomNavBtn::before{ width:20px; height:20px; font-size:9px; } body.mobile-layout #screenHome .homeHero.homeSpanAll, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenHome .homeMobileMoreCard, body.mobile-layout #screenKana .kanaJourneyCard, body.mobile-layout #screenN5 .n5MobileHubCard, body.mobile-layout #screenAI .aiHeroCard, body.mobile-layout #screenStudent .studentSummaryCard, body.mobile-layout #screenStudent .studentWeakCard, body.mobile-layout #screenStudent .studentMobileMoreCard, body.mobile-layout #screenSettings .card{ box-shadow:0 12px 24px rgba(9,20,36,.07); } body.mobile-layout #screenTeacher .teacherDashboardGrid{ grid-template-rows:minmax(0,1fr); } body.mobile-layout #screenTeacher .teacherDashboardGrid > :not(.teacherHeroCard):not(.teacherHealthCard):not(.teacherActionsCard){ display:none; } body.mobile-layout #screenTeacher .teacherHeroCard, body.mobile-layout #screenTeacher .teacherHealthCard, body.mobile-layout #screenTeacher .teacherActionsCard{ height:100%; overflow:auto; } body.mobile-layout #screenTeacher .teacherActionsCard .row .btn{ flex:1 1 100%; } body.mobile-layout #screenHome .homeQuickActionsGrid, body.mobile-layout #screenKana .kanaMobileActionGrid, body.mobile-layout #screenN5 .n5MobileHubGrid, body.mobile-layout #screenN5 .n5MobileSubhubGrid, body.mobile-layout #screenStudent .studentMobileMoreGrid, body.mobile-layout #screenSettings .settingsMobileQuickGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:5px; } body.mobile-layout #screenHome .homeQuickActionBtn, body.mobile-layout #screenKana .kanaMobileActionGrid .btn, body.mobile-layout #screenN5 .n5MobileHubGrid .btn, body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn, body.mobile-layout #screenStudent .studentMobileMoreGrid .btn, body.mobile-layout #screenSettings .settingsMobileQuickGrid .btn{ width:100%; min-width:0; min-height:40px; padding:7px 9px; justify-content:flex-start; text-align:left; line-height:1.25; white-space:normal; } body.mobile-layout #screenKana .kanaMobileActionGrid #kanaMobileAssessmentBtn, body.mobile-layout #screenKana .kanaMobileActionGrid #kanaMobileQuizBtn{ grid-column:1 / -1; min-height:46px; font-size:14px; box-shadow:0 8px 16px rgba(9,20,36,.07); } body.mobile-layout #screenSettings .row, body.mobile-layout #screenTeacher .row, body.mobile-layout #studentSettingsCard .row, body.mobile-layout #teacherSettingsCard .row{ align-items:stretch; } body.mobile-layout #screenSettings .row .btn, body.mobile-layout #screenTeacher .row .btn, body.mobile-layout #studentSettingsCard .row .btn, body.mobile-layout #teacherSettingsCard .row .btn{ width:100%; min-width:0; } body.mobile-layout #screenSettings .input, body.mobile-layout #screenTeacher .input{ min-width:0; font-size:16px; } body.mobile-layout #screenHome .homeHeroTitle, body.mobile-layout #screenKana .kanaJourneyTitle, body.mobile-layout #screenStudent .studentSectionTitle{ font-size:20px; line-height:1.02; } body.mobile-layout #screenAI .aiHeroTitle, body.mobile-layout #screenN5 .n5MobileHubTop h3{ font-size:18px; line-height:1.04; } body.mobile-layout #screenStudent #studentSuggestedActionBtn{ min-height:44px; font-size:14px; box-shadow:0 8px 14px rgba(9,20,36,.07); } body.mobile-layout #screenStudent #studentReviewWeakItemsBtn{ box-shadow:0 7px 14px rgba(9,20,36,.06); } body.mobile-layout #screenStudent #studentReviewWeakItemsBtn{ min-height:40px; } body.mobile-layout[data-current-route="student"] .topbar.appTopbar{ min-height:44px; padding:3px 7px; border-radius:12px; } body.mobile-layout[data-current-route="student"] .appTopbarBrand b{ font-size:16px; } body.mobile-layout[data-current-route="student"] #themeBtn.appTopbarChip{ min-height:28px; width:32px; min-width:32px; border-radius:10px; } body.mobile-layout #screenStudent #studentStatsView{ grid-template-rows:auto auto auto auto; gap:10px; } body.mobile-layout #screenStudent .studentProfileCard{ order:1; display:none; gap:10px; padding:14px; border-radius:20px; background: linear-gradient(148deg, color-mix(in srgb, var(--chip) 24%, var(--card) 76%) 0%, color-mix(in srgb, var(--card) 97%, transparent) 84%), var(--surface-1); border-color:color-mix(in srgb, var(--chip) 30%, var(--border) 70%); } body.mobile-layout #screenStudent .studentSummaryCard{ order:1; padding:12px 12px 11px; } body.mobile-layout #screenStudent .studentActionCard{ order:3; padding:12px; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 82%), var(--surface-1); } body.mobile-layout #screenStudent .studentHistoryCard{ order:5; display:grid; gap:10px; padding:12px; border-radius:20px; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 14%, var(--card) 86%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 84%), var(--surface-1); } body.mobile-layout #screenStudent .studentWeekCard{ order:7; display:grid !important; padding:11px; gap:8px; border-color:color-mix(in srgb, var(--chip) 34%, var(--border) 66%); background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%), var(--surface-1); } body.mobile-layout #screenStudent .studentMobileMoreCard{ order:6; display:grid; gap:8px; padding:12px; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 16%, var(--card) 84%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 82%), var(--surface-1); } body.mobile-layout #screenStudent .studentWeakCard{ order:4; padding:12px; } body.mobile-layout #screenStudent .studentWeekCard, body.mobile-layout #screenStudent .studentCategoryCard, body.mobile-layout #screenStudent .studentMilestoneCard{ display:none !important; } body.mobile-layout #screenStudent[data-mobile-panel="activity"] .studentWeekCard, body.mobile-layout #screenStudent[data-mobile-panel="performance"] .studentCategoryCard, body.mobile-layout #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{ display:grid !important; order:7; } body.mobile-layout #screenStudent .studentSectionIntro{ gap:6px; } body.mobile-layout #screenStudent .studentSummaryCard h3, body.mobile-layout #screenStudent .studentProfileCard h3, body.mobile-layout #screenStudent .studentHistoryCard h3, body.mobile-layout #screenStudent .studentWeakCard h3, body.mobile-layout #screenStudent .studentMobileMoreCard h3, body.mobile-layout #screenStudent .studentWeekCard h3, body.mobile-layout #screenStudent .studentCategoryCard h3, body.mobile-layout #screenStudent .studentMilestoneCard h3{ font-size:15px; line-height:1.15; letter-spacing:.02em; text-transform:none; color:var(--text); margin:0; } body.mobile-layout #screenStudent .studentSectionTitle{ font-size:16px; line-height:1.18; letter-spacing:-.02em; margin:0; } body.mobile-layout #screenStudent .studentSummaryCard .studentSectionIntro > .miniList, body.mobile-layout #screenStudent .studentSummaryCard .divider, body.mobile-layout #screenStudent .studentSummaryRingBlock > .note, body.mobile-layout #screenStudent .studentWeakCard .hint, body.mobile-layout #screenStudent .studentQuickActionGrid, body.mobile-layout #screenStudent .studentSummaryFocus > .miniList, body.mobile-layout #screenStudent .studentHeroMeta, body.mobile-layout #screenStudent .studentHeroAction{ display:none; } body.mobile-layout #screenStudent .studentProfileRow{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; align-items:center; } body.mobile-layout #screenStudent .studentAvatarPlaceholder{ width:58px; height:58px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; font-size:20px; line-height:1; font-weight:950; letter-spacing:-.03em; color:var(--text); border:1px solid color-mix(in srgb, var(--chip) 34%, var(--border) 66%); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, white 72%, var(--chip) 28%), transparent 58%), color-mix(in srgb, var(--card) 88%, var(--chip) 12%); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } body.mobile-layout #screenStudent .studentProfileMeta{ min-width:0; display:grid; gap:4px; } body.mobile-layout #screenStudent .studentProfileName{ font-size:18px; line-height:1.12; font-weight:950; letter-spacing:-.02em; color:var(--text); overflow-wrap:anywhere; } body.mobile-layout #screenStudent .studentProfileSub, body.mobile-layout #screenStudent .studentProfileTrack, body.mobile-layout #screenStudent .studentProfileFooter, body.mobile-layout #screenStudent .studentHistoryFooter{ font-size:12px; line-height:1.45; color:var(--muted); margin:0; } body.mobile-layout #screenStudent .studentProfileTrack b{ color:var(--text); font-weight:900; } body.mobile-layout #screenStudent .studentProfileChips{ display:flex; flex-wrap:wrap; gap:6px; } body.mobile-layout #screenStudent .studentProfileChips .miniTag{ min-height:32px; padding:7px 10px; border-radius:999px; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); border:1px solid color-mix(in srgb, var(--chip) 20%, var(--border) 80%); } body.mobile-layout #screenStudent .studentHistoryHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } body.mobile-layout #screenStudent .studentHistoryHead .miniTag{ min-height:30px; padding-inline:9px; } body.mobile-layout #screenStudent .studentHistoryGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } body.mobile-layout #screenStudent .studentHistoryItem{ min-width:0; display:grid; gap:5px; padding:10px 11px; border-radius:16px; border:1px solid color-mix(in srgb, var(--chip) 18%, var(--border) 82%); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } body.mobile-layout #screenStudent .studentHistoryLabel{ font-size:11px; line-height:1.2; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } body.mobile-layout #screenStudent .studentHistoryValue{ font-size:13px; line-height:1.32; font-weight:800; color:var(--text); overflow-wrap:anywhere; } body.mobile-layout #screenStudent .studentSummaryBody{ grid-template-columns:1fr; gap:8px; } body.mobile-layout #screenStudent .studentSummaryRingBlock{ gap:8px; } body.mobile-layout #screenStudent .studentOverviewHero{ gap:8px; align-items:flex-start; flex-wrap:nowrap; } body.mobile-layout #screenStudent #studentMiniRing{ width:78px; height:78px; flex:0 0 auto; } body.mobile-layout #screenStudent #studentMiniRing .ringInner{ width:56px; height:56px; } body.mobile-layout #screenStudent .studentRingLabel{ font-size:9px; } body.mobile-layout #screenStudent .studentRingValue{ font-size:18px; } body.mobile-layout #screenStudent .studentRingSub{ font-size:9px; max-width:58px; } body.mobile-layout #screenStudent .studentSummaryFocus{ gap:8px; } body.mobile-layout #screenStudent .studentSummaryHeadline{ font-size:16px; line-height:1.15; } body.mobile-layout #screenStudent .studentIdentityHeader{ grid-template-columns:minmax(0, 1fr); gap:12px; } body.mobile-layout #screenStudent .studentIdentityProfile{ align-items:flex-start; gap:12px; } body.mobile-layout #screenStudent .studentIdentityAvatar{ width:56px; height:56px; font-size:19px; } body.mobile-layout #screenStudent .studentIdentityName{ font-size:20px; } body.mobile-layout #screenStudent .studentIdentitySub, body.mobile-layout #screenStudent .studentXpMeta{ font-size:12px; line-height:1.45; } body.mobile-layout #screenStudent .studentIdentityHeader .btn{ width:100%; min-width:0; min-height:48px; } body.mobile-layout #screenStudent .studentXpCard{ padding:14px 12px; border-radius:18px; gap:8px; } body.mobile-layout #screenStudent .studentXpValue{ font-size:20px; } body.mobile-layout #screenStudent .studentIdentityStats{ gap:8px; } body.mobile-layout #screenStudent .studentIdentityStat{ min-height:88px; padding:12px; border-radius:16px; } body.mobile-layout #screenStudent .studentIdentityStatValue{ font-size:24px; } body.mobile-layout #screenStudent .studentIdentityMetaRow{ gap:6px; } body.mobile-layout #screenStudent .studentIdentityMetaRow .miniTag{ min-height:30px; padding:6px 9px; font-size:11px; } body.mobile-layout #screenStudent #studentSummaryMotivation{ font-size:12px; line-height:1.42; margin:0; } body.mobile-layout #screenStudent .studentSummaryCard .studentSectionIntro .hint{ font-size:12px; line-height:1.4; margin:0; } body.mobile-layout #screenStudent .studentMetricGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; } body.mobile-layout #screenStudent .studentMetricTile{ min-height:68px; padding:9px 10px; border-radius:16px; } body.mobile-layout #screenStudent .studentMetricTile:nth-child(4){ display:none; } body.mobile-layout #screenStudent .studentMetricTile .muted{ font-size:10px; line-height:1.15; } body.mobile-layout #screenStudent .studentMetricTile b{ margin-top:5px; font-size:24px; line-height:1; } body.mobile-layout #screenStudent .studentExtraDetails{ display:block; border-top:1px solid color-mix(in srgb, var(--border) 82%, transparent); padding-top:8px; } body.mobile-layout #screenStudent .studentExtraDetails summary{ list-style:none; cursor:pointer; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:8px; } body.mobile-layout #screenStudent .studentExtraDetails summary::-webkit-details-marker{ display:none; } body.mobile-layout #screenStudent .studentExtraDetails summary::after{ content:"+"; font-size:16px; line-height:1; color:var(--text); } body.mobile-layout #screenStudent .studentExtraDetails[open] summary::after{ content:"-"; } body.mobile-layout #screenStudent .studentExtraDetails .studentMobileMoreGrid{ display:grid; margin-top:8px; } body.mobile-layout #screenStudent[data-mobile-panel]:not([data-mobile-panel="none"]) .studentMobileMoreCard{ display:grid !important; } body.mobile-layout #screenStudent .studentWeakCard > h3{ margin:0 0 2px; } body.mobile-layout #screenStudent .studentWeakList{ gap:8px; max-height:none; overflow:visible; } body.mobile-layout #screenStudent .studentWeakGroup{ gap:8px; padding:10px 11px; border-radius:16px; } body.mobile-layout #screenStudent .studentWeakGroupHead{ align-items:flex-start; gap:6px; flex-direction:column; } body.mobile-layout #screenStudent .studentWeakChips{ gap:6px; } body.mobile-layout #screenStudent .studentWeakChip{ min-height:32px; padding:7px 11px; font-size:11px; } body.mobile-layout #screenStudent #studentWeakFocus{ margin-top:6px !important; font-size:12px; line-height:1.4; } body.mobile-layout #screenStudent .studentCardActions{ margin-top:8px; gap:6px; } body.mobile-layout #screenStudent #studentOpenAiModalBtn{ display:none; } body.mobile-layout #screenStudent #studentReviewWeakItemsBtn{ min-height:42px; width:100%; justify-content:flex-start; text-align:left; border-radius:15px; } body.mobile-layout #screenStudent .studentWeekCard > h3{ display:block; margin:0; } body.mobile-layout #screenStudent .studentWeekCard > .hint, body.mobile-layout #screenStudent .studentActivityGrid, body.mobile-layout #screenStudent #studentWeekBars, body.mobile-layout #screenStudent #studentWeekHint{ display:none; } body.mobile-layout #screenStudent .studentSuggestedAction{ margin-top:0; padding:0; border:none; background:transparent; border-radius:0; display:grid; gap:8px; } body.mobile-layout #screenStudent .studentSuggestedLabel{ font-size:11px; } body.mobile-layout #screenStudent .studentSuggestedTitle{ margin-top:0; font-size:17px; line-height:1.15; } body.mobile-layout #screenStudent #studentSuggestedActionText{ font-size:12px; line-height:1.45; margin:0; } body.mobile-layout #screenStudent .studentActionCard .studentCardActions, body.mobile-layout #screenStudent .studentWeekCard .studentCardActions{ margin-top:0; gap:6px; } body.mobile-layout #screenStudent .studentActionCard .studentCardActions .miniTag, body.mobile-layout #screenStudent .studentWeekCard .studentCardActions .miniTag{ font-size:10px; min-height:30px; padding-inline:8px; } body.mobile-layout #screenStudent #studentSuggestedActionBtn{ min-height:44px; width:100%; justify-content:flex-start; text-align:left; border-radius:15px; box-shadow:0 9px 16px rgba(9,20,36,.08); } body.mobile-layout #screenStudent .studentActionCard > h3, body.mobile-layout #screenStudent .studentActionCard .divider{ display:none; } body.mobile-layout #screenStudent .studentWeekCard, body.mobile-layout #screenStudent .studentCategoryCard, body.mobile-layout #screenStudent .studentMilestoneCard{ padding:11px; gap:8px; } body.mobile-layout .modalBack{ align-items:flex-end; justify-content:stretch; padding:4px 6px calc(4px + env(safe-area-inset-bottom)); overflow:hidden; } body.mobile-layout .modalCard{ width:100%; max-width:none; max-height:min(86svh, 760px); border-radius:20px 20px 14px 14px; padding:8px; overflow:auto; overscroll-behavior:contain; } body.mobile-layout .kanaChartModalCard, body.mobile-layout .n5BrowseModalCard, body.mobile-layout .kanaAssessmentModalCard{ width:100%; max-width:none; max-height:min(86svh, 820px); padding:8px; border-radius:20px 20px 14px 14px; } body.mobile-layout .sessionSummaryModalCard{ width:100%; max-width:none; max-height:min(88svh, 820px); padding:16px; border-radius:22px 22px 18px 18px; } body.mobile-layout .sessionSummaryHeadline{ font-size:24px; } body.mobile-layout .sessionSummaryScoreCard{ padding:16px; border-radius:20px; } body.mobile-layout .sessionSummaryScoreValue{ font-size:36px; } body.mobile-layout .n5BrowseModalBody, body.mobile-layout .kanaChartBody{ max-height:none; min-height:0; } body.mobile-layout .n5BrowseModalHeader, body.mobile-layout .n5BrowseModalMeta, body.mobile-layout .kanaChartHeader, body.mobile-layout .kanaChartFooter{ gap:4px; flex-direction:column; align-items:stretch; } body.mobile-layout #flashModalBack .hint, body.mobile-layout #kanaChartModalBack .hint, body.mobile-layout #n5BrowseModalBack .hint, body.mobile-layout #premiumModalBack .hint, body.mobile-layout #payModalBack .hint{ margin-top:6px !important; } body.mobile-layout .flashModeSeg{ grid-template-columns:1fr; } body.mobile-layout #flashModalBack .row, body.mobile-layout #kanaAssessmentPromptBack .row, body.mobile-layout #kanaAssessmentGateBack .row, body.mobile-layout #kanaAssessmentFlowBack .row, body.mobile-layout #n5KanaFirstGateBack .row, body.mobile-layout #n5AssessmentGateBack .row, body.mobile-layout #n5AssessmentFlowBack .row, body.mobile-layout #premiumModalBack .row, body.mobile-layout #payModalBack .row{ flex-direction:column; align-items:stretch !important; justify-content:flex-start !important; } body.mobile-layout #flashModalBack .row .btn, body.mobile-layout #kanaAssessmentPromptBack .row .btn, body.mobile-layout #kanaAssessmentGateBack .row .btn, body.mobile-layout #kanaAssessmentFlowBack .row .btn, body.mobile-layout #n5KanaFirstGateBack .row .btn, body.mobile-layout #n5AssessmentGateBack .row .btn, body.mobile-layout #n5AssessmentFlowBack .row .btn, body.mobile-layout #premiumModalBack .row .btn, body.mobile-layout #payModalBack .row .btn{ width:100%; } body.mobile-layout #flashModalBack .flashCardFront{ min-height:142px; padding:14px 10px; font-size:clamp(38px, 14vw, 54px); } body.mobile-layout #flashModalBack #n5FlashBack{ padding:10px; } body.mobile-layout #n5BrowseModalBack #n5List{ display:grid !important; grid-template-columns:1fr; gap:8px; } body.mobile-layout #n5BrowseModalBack .pager, body.mobile-layout #n5BrowseModalBack .finderRow{ justify-content:stretch; } body.mobile-layout #n5BrowseModalBack .pager .btn, body.mobile-layout #n5BrowseModalBack .finderRow .input{ width:100%; } body.mobile-layout #n5BrowseModalBack .segGroup{ grid-template-columns:repeat(2, minmax(0,1fr)); } body.mobile-layout .toast{ left:10px; right:10px; bottom:calc(74px + env(safe-area-inset-bottom)); transform:none; min-width:0; width:auto; padding:8px 10px; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticePanel{ display:grid; grid-template-rows:auto auto auto auto minmax(0,1fr) auto; gap:8px; padding:10px 10px 8px; overflow:hidden; min-height:0; border-radius:18px; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticeHeader{ gap:4px; padding-bottom:0; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticeHeader h3, body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticeHeader .hint{ display:none; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] #kanaBrowseBtn, body.mobile-layout #screenKana[data-mobile-quiz-state="active"] #resetKana{ display:none; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaToolbar{ justify-content:flex-start; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaModeTabs, body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaSetTabs{ margin-bottom:0 !important; gap:6px; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .seg{ min-height:32px; padding:7px 9px; font-size:11px; border-radius:12px; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaQuestionShell{ padding:14px 14px 12px; display:grid; gap:10px; align-content:start; justify-items:center; min-height:0; border-radius:22px; background: radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 74%), color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPromptLabel, body.mobile-layout #screenKana[data-mobile-quiz-state="active"] #kanaHint{ font-size:11px; line-height:1.35; text-align:center; margin:0; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .big{ min-height:auto; padding:4px 0 2px; font-size:clamp(76px, 24vw, 108px); line-height:1; text-align:center; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaActionBar{ gap:6px; margin-top:0 !important; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaActionBar .btn{ min-height:40px; min-width:0; padding:8px 10px; font-size:12px; border-radius:13px; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .choices{ margin-top:0; gap:8px; align-content:start; grid-template-columns:1fr; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .choice{ min-height:50px; padding:11px 13px; border-radius:15px; font-size:16px; line-height:1.22; text-align:left; overflow-wrap:anywhere; } body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .feedback{ margin-top:0; min-height:26px; padding:2px 4px 0; border-radius:0; background:transparent; text-align:center; line-height:1.35; font-size:13px; } body.mobile-layout #kanaAssessmentFlowBack .kanaAssessmentModalCard{ width:100%; max-width:none; max-height:min(88svh, 760px); padding:10px; border-radius:22px 22px 16px 16px; gap:10px; overflow:auto; } body.mobile-layout #kanaAssessmentFlowBack .row:first-child{ align-items:center !important; gap:8px; } body.mobile-layout #kanaAssessmentFlowTitle{ font-size:16px; line-height:1.15; } body.mobile-layout #kanaAssessmentFlowSubtitle{ font-size:12px; line-height:1.4; margin-top:2px; } body.mobile-layout #kanaAssessmentFlowCloseBtn{ min-height:34px; padding:7px 10px; border-radius:12px; } body.mobile-layout #kanaAssessmentProgressText{ min-height:24px; font-size:12px; padding:5px 10px; } body.mobile-layout #kanaAssessmentProgressNote{ font-size:11px; line-height:1.35; } body.mobile-layout #kanaAssessmentQuestionPanel{ display:grid; gap:10px; } body.mobile-layout #kanaAssessmentQuestionPanel .kanaAssessmentQuestionShell{ gap:10px; padding:14px; border-radius:22px; } body.mobile-layout #kanaAssessmentQuestionPanel .kanaAssessmentQuestionMeta{ gap:8px; } body.mobile-layout #kanaAssessmentQuestionPanel .kanaAssessmentScriptTag{ min-height:28px; padding:6px 10px; font-size:11px; } body.mobile-layout #kanaAssessmentQuestionHint{ font-size:11px; line-height:1.35; } body.mobile-layout #kanaAssessmentChar{ font-size:clamp(76px, 24vw, 108px); line-height:1; text-align:center; padding:0; } body.mobile-layout #kanaAssessmentChoices{ grid-template-columns:1fr; gap:8px; } body.mobile-layout #kanaAssessmentChoices .choice{ min-height:50px; padding:11px 13px; border-radius:15px; font-size:15px; line-height:1.24; text-align:left; justify-content:flex-start; } body.mobile-layout #kanaAssessmentFeedback{ margin-top:0 !important; min-height:26px; padding:2px 4px 0; font-size:13px; line-height:1.35; text-align:center; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5ContentCard{ display:grid; grid-template-rows:minmax(0,1fr); padding:10px 10px 8px; overflow:hidden; border-radius:18px; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5MobilePanelBar, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .panelHeader, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5FlowRail, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceHeader, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceActions, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceDrawer, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5FooterBar, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .divider, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5PanelFooter{ display:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5PracticePanel, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceShell, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceMain, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{ height:100%; min-height:0; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{ padding:0; gap:0; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{ display:grid !important; grid-template-columns:1fr; grid-template-areas: "progress" "prompt" "sub" "choices" "feedback"; align-content:start; gap:10px; height:100%; min-height:0; overflow:hidden; padding:2px 0 0; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizProgress{ grid-area:progress; margin:0; text-align:center; font-size:12px; line-height:1.25; letter-spacing:.03em; min-height:24px; display:flex; align-items:center; justify-content:center; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--border) 82%, transparent); background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizPrompt{ grid-area:prompt; margin:0; padding:14px 16px 6px; border-radius:22px 22px 16px 16px; background: radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--chip) 14%, transparent), transparent 74%), color-mix(in srgb, var(--card) 96%, var(--chip) 4%); font-size:clamp(28px, 8vw, 34px); line-height:1.16; text-align:center; letter-spacing:-.03em; overflow-wrap:anywhere; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizSubPrompt{ grid-area:sub; margin:0; font-size:12px; line-height:1.42; text-align:center; padding:0 10px; color:var(--muted); min-height:18px; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizChoices{ grid-area:choices; margin-top:0; gap:8px; align-content:start; grid-template-columns:1fr; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizChoices .btn{ width:100%; min-height:50px; padding:11px 13px; border-radius:15px; justify-content:flex-start; text-align:left; font-size:14px; white-space:normal; line-height:1.28; font-weight:800; overflow-wrap:anywhere; box-shadow:none; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback{ grid-area:feedback; margin-top:0; min-height:26px; padding:2px 4px 0; text-align:center; font-size:13px; line-height:1.35; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5PracticePanel{ min-height:0; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceMain{ min-height:0; overflow:hidden; } body.mobile-layout #n5AssessmentFlowBack .kanaAssessmentModalCard{ width:100%; max-width:none; max-height:min(88svh, 760px); padding:10px; border-radius:22px 22px 16px 16px; display:grid; gap:10px; overflow:auto; } body.mobile-layout #n5AssessmentFlowBack .row:first-child{ align-items:center !important; gap:8px; } body.mobile-layout #n5AssessmentFlowTitle{ font-size:16px; line-height:1.15; } body.mobile-layout #n5AssessmentFlowSubtitle{ font-size:12px; line-height:1.4; margin-top:2px; } body.mobile-layout #n5AssessmentFlowCloseBtn{ min-height:34px; padding:7px 10px; border-radius:12px; } body.mobile-layout #n5AssessmentFlowBack .kanaAssessmentProgressHead{ gap:8px; } body.mobile-layout #n5AssessmentProgressText{ min-height:24px; font-size:12px; padding:5px 10px; } body.mobile-layout #n5AssessmentProgressNote{ font-size:11px; line-height:1.35; } body.mobile-layout #n5AssessmentQuestionPanel{ display:grid; gap:10px; } body.mobile-layout #n5AssessmentQuestionPanel .kanaAssessmentQuestionShell{ gap:10px; padding:14px; border-radius:22px; } body.mobile-layout #n5AssessmentQuestionPanel .kanaAssessmentQuestionMeta{ gap:8px; } body.mobile-layout #n5AssessmentQuestionPanel .kanaAssessmentScriptTag{ min-height:28px; padding:6px 10px; font-size:11px; } body.mobile-layout #n5AssessmentQuestionHint{ font-size:11px; line-height:1.35; } body.mobile-layout #n5AssessmentQuestionPrompt{ font-size:22px; line-height:1.2; text-align:center; } body.mobile-layout #n5AssessmentQuestionText{ font-size:clamp(28px, 8vw, 34px); line-height:1.15; padding:0 !important; text-align:center; overflow-wrap:anywhere; } body.mobile-layout #n5AssessmentChoices{ grid-template-columns:1fr; gap:8px; } body.mobile-layout #n5AssessmentChoices .choice{ min-height:50px; padding:11px 13px; border-radius:15px; font-size:14px; line-height:1.28; text-align:left; justify-content:flex-start; } body.mobile-layout #n5AssessmentFeedback{ margin-top:0 !important; min-height:26px; padding:2px 4px 0; font-size:13px; line-height:1.35; text-align:center; } body.mobile-layout .n5ExamTopbar{ min-height:48px; padding:6px 8px; } body.mobile-layout .n5ExamTitle{ font-size:13px; line-height:1.2; } body.mobile-layout .n5ExamMeta{ gap:3px; } body.mobile-layout .n5ExamMeta .miniTag{ min-height:24px; min-width:72px; font-size:10px; padding:4px 7px; } body.mobile-layout .n5ExamBody{ padding:10px 10px calc(10px + env(safe-area-inset-bottom)); overflow:hidden; } body.mobile-layout #n5ExamQuestionWrap{ height:100%; display:grid; align-content:start; gap:10px; overflow:hidden; } body.mobile-layout .n5ExamPrompt{ text-align:center; font-size:12px; } body.mobile-layout .n5ExamQuestion{ margin-top:0; font-size:clamp(28px, 8vw, 34px); line-height:1.16; overflow-wrap:anywhere; } body.mobile-layout .n5ExamChoices{ margin-top:0; gap:8px; align-content:start; grid-template-columns:1fr; } body.mobile-layout .n5ExamChoice{ min-height:50px; padding:11px 13px; border-radius:15px; font-size:14px; line-height:1.28; overflow-wrap:anywhere; } body.mobile-layout .n5ExamFeedback{ margin-top:0; min-height:26px; padding:2px 4px 0; text-align:center; font-size:13px; line-height:1.35; } @media (max-width:560px){ body.mobile-layout #screenHome .homeMobileMoreGrid, body.mobile-layout #screenStudent .studentMobileMoreGrid, body.mobile-layout #screenSettings .settingsMobileQuickGrid, body.mobile-layout #screenN5 .n5MobileHubGrid, body.mobile-layout #screenN5 .n5MobileSubhubGrid{ grid-template-columns:1fr; } body.mobile-layout #screenAI .aiModeGrid, body.mobile-layout #screenKana .kanaMobileActionGrid{ grid-template-columns:1fr; } body.mobile-layout #screenAI .aiPanelCard.isActive{ min-height:auto; } body.mobile-layout .topbar.appTopbar{ grid-template-columns:minmax(0,1fr); grid-template-areas:"brand"; gap:6px; padding:8px 10px; } body.mobile-layout .appTopbarRight{ width:auto; } body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{ transform:none; } body.mobile-layout #themeBtn.appTopbarChip{ justify-self:end; } body.mobile-layout .appTopbarBrand b{ font-size:17px; } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:48px; font-size:8px; } body.mobile-layout #bottomNav .bottomNavBtn::before{ width:22px; height:22px; font-size:8px; } body.mobile-layout[data-current-route="settings"] .topbar.appTopbar{ grid-template-areas: "brand" "actions"; gap:8px; } body.mobile-layout[data-current-route="settings"] .appTopbarRight{ width:100%; grid-template-columns:1fr; grid-template-areas: "utility" "role" "auth"; } body.mobile-layout #screenHome .homeHeroMeta, body.mobile-layout #screenKana .kanaJourneyMeta, body.mobile-layout #screenTeacher .teacherHealthGrid{ grid-template-columns:1fr; } body.mobile-layout #screenKana .kanaActionBar{ grid-template-columns:1fr; } body.mobile-layout #screenN5 .n5MobilePanelBar, body.mobile-layout #screenSettings .settingsMobileQuickGrid{ top:88px; } } @media (max-width: 768px){ body.mobile-layout{ --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding:8px 10px calc(68px + env(safe-area-inset-bottom)); gap:8px; } body.mobile-layout .topbar.appTopbar{ position:sticky; top:4px; min-height:50px; padding:6px 10px; border-radius:12px; gap:6px; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand actions"; align-items:center; box-shadow:0 4px 10px rgba(12,23,38,.05); backdrop-filter:blur(8px); transform:none !important; } body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{ transform:none !important; opacity:1; } body.mobile-layout .appTopbarLeft{ min-width:0; } body.mobile-layout .appTopbarBrand{ min-width:0; gap:6px; align-items:center; } body.mobile-layout .appTopbarBrand b{ font-size:16px; } body.mobile-layout .appTopbarOptional, body.mobile-layout .appTopbarAvatar{ display:none; } body.mobile-layout .appTopbarRight{ width:auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; } body.mobile-layout .appTopbar .roleSeg{ min-height:34px; border-radius:12px; } body.mobile-layout .roleSegBtn{ min-height:34px; font-size:11px; padding:6px 10px; } body.mobile-layout .appTopbarChip{ min-height:34px; padding:6px 10px; border-radius:12px; font-size:12px; } body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ padding-inline:10px; } body.mobile-layout #themeBtn.appTopbarChip{ min-height:34px; min-width:34px; width:34px; padding:6px; justify-content:center; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ width:100%; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{ padding:14px; border-radius:18px; gap:8px; box-shadow:0 8px 16px rgba(9,20,36,.06); } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.card + .card, .card + .homeMobileMoreCard, .card + .studentMobileMoreCard){ margin-top:12px; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(h1, h2, h3){ font-size:20px; line-height:1.15; font-weight:900; margin:0 0 8px; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(p, .hint, .note, .muted, .homeSectionSub, .homePathSummary, .homePathText){ font-size:13px; line-height:1.45; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.miniTag, .label, .n5HeaderEyebrow, .homeGreeting, .homeMissionEyebrow){ font-size:11px; line-height:1.25; } body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) .btn{ min-height:44px; padding:0 12px; border-radius:14px; font-size:14px; line-height:1.2; width:100%; max-width:100%; overflow-wrap:anywhere; } body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) .btn.primary{ min-height:48px; font-weight:800; } body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) :is(.row, .stack, .actions, .homeQuickActionsGrid, .homeMobileMoreGrid, .kanaMobileActionGrid, .n5MobileHubGrid, .n5MobileSubhubGrid, .studentQuickGrid, .settingsMobileQuickGrid){ gap:8px; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.row, .actions){ flex-wrap:wrap; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.row > *, .actions > *, .stack > *, .homeQuickActionsGrid > *, .homeMobileMoreGrid > *, .studentQuickGrid > *){ min-width:0; } body.mobile-layout #screenHome .homePremiumGrid, body.mobile-layout #screenAI .aiHubShell, body.mobile-layout #screenKana .grid, body.mobile-layout #screenN5 .grid, body.mobile-layout #screenStudent #studentStatsView, body.mobile-layout #screenTeacher .teacherDashboardGrid, body.mobile-layout #screenSettings .settingsGrid{ gap:12px; } body.mobile-layout #screenAI .aiHubShell{ grid-template-rows:auto auto; gap:10px; } body.mobile-layout #screenAI .aiHeroCard{ padding:12px 14px; min-height:auto; } body.mobile-layout #screenAI .aiHeroTitle{ font-size:18px; } body.mobile-layout #screenAI .aiHeroSub{ font-size:12px; max-width:30ch; } body.mobile-layout #screenAI .aiModeGrid{ gap:10px; } body.mobile-layout #screenAI #aiCoachCardBtn{ min-height:122px; padding:14px 16px; border-radius:20px; } body.mobile-layout #screenAI #senseiCardBtn{ min-height:112px; padding:14px 16px; border-radius:20px; } body.mobile-layout #screenAI .aiModeCard{ gap:6px; } body.mobile-layout #screenAI .aiModeTitle{ font-size:18px; } body.mobile-layout #screenAI .aiModeText{ font-size:12px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.mobile-layout #screenAI .aiModeAction{ min-height:44px; border-radius:14px; } body.mobile-layout #screenAI .aiMobileContextRow{ display:none; } body.mobile-layout #screenHome .homeHero.homeSpanAll, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenHome .homeMissionCard{ padding:14px; } body.mobile-layout #screenHome .homeHeroTitle, body.mobile-layout #screenKana .kanaJourneyTitle, body.mobile-layout #screenStudent .studentSectionTitle{ font-size:20px; } body.mobile-layout #screenN5 .n5MobileHubGrid .btn, body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn, body.mobile-layout #screenKana .kanaMobileActionGrid .btn, body.mobile-layout #screenAI .aiModeCard{ min-height:44px; padding:14px; border-radius:16px; } body.mobile-layout #screenN5 .n5MobilePanelBar, body.mobile-layout #screenSettings .settingsMobileQuickGrid{ top:66px; padding:8px; border-radius:16px; } body.mobile-layout :is(.input, input, textarea, select){ min-height:44px; padding:10px 12px; border-radius:12px; font-size:14px; line-height:1.35; max-width:100%; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ overflow-x:hidden; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.grid, .row, .actions, .segGroup, .segrow){ max-width:100%; } body.mobile-layout #screenHome .homeHeroShell, body.mobile-layout #screenHome .homeSectionHead, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenAI .aiHeroCard, body.mobile-layout #screenAI .aiModeCard, body.mobile-layout #screenN5 .n5MobileHubTop, body.mobile-layout #screenN5 #n5ContentCard, body.mobile-layout #screenStudent .studentSummaryBody, body.mobile-layout #screenStudent .studentOverviewHero{ gap:8px; } body.mobile-layout #screenHome .homeHero.homeSpanAll, body.mobile-layout #screenAI .aiHeroCard, body.mobile-layout #screenKana .kanaJourneyCard, body.mobile-layout #screenKana .kanaPracticePanel, body.mobile-layout #screenN5 .n5MobileHubCard, body.mobile-layout #screenStudent .studentSummaryCard, body.mobile-layout #screenStudent .studentProfileCard, body.mobile-layout #screenStudent .studentHistoryCard, body.mobile-layout #screenSettings .card{ border-radius:20px; } body.mobile-layout #screenHome .homeHeroSub, body.mobile-layout #screenAI .aiHeroSub, body.mobile-layout #screenN5 .hint, body.mobile-layout #screenStudent .hint{ margin:0; } body.mobile-layout #bottomNav{ padding:6px 10px calc(6px + env(safe-area-inset-bottom)); } body.mobile-layout #bottomNav .bottomNavBar{ padding:6px; gap:6px; border-radius:18px; box-shadow:0 8px 18px rgba(9,20,36,.1); } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:44px; padding:6px; border-radius:12px; font-size:12px; line-height:1.1; } body.mobile-layout #bottomNav .bottomNavBtn::before{ width:22px; height:22px; font-size:8px; } body.mobile-layout [data-current-route]:not([data-current-route="settings"]) .appTopbar .roleSeg, body.mobile-layout [data-current-route]:not([data-current-route="settings"]) #loginBtn.appTopbarChip, body.mobile-layout [data-current-route]:not([data-current-route="settings"]) #logoutBtn.appTopbarChip{ display:none; } body.mobile-layout .modalBack, body.mobile-layout .teacherDrawerBack, body.mobile-layout .onboardingBack{ align-items:flex-end; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); } body.mobile-layout .modalCard, body.mobile-layout .n5BrowseModalCard, body.mobile-layout .kanaAssessmentModalCard, body.mobile-layout .teacherDrawer{ width:100%; max-width:none; max-height:85svh; padding:14px 16px; border-radius:22px 22px 16px 16px; box-shadow:0 12px 26px rgba(9,20,36,.12); overflow:auto; overscroll-behavior:contain; } body.mobile-layout .n5BrowseModalBody, body.mobile-layout .kanaChartBody, body.mobile-layout .teacherDrawer{ min-height:0; } body.mobile-layout #screenHome .homeQuickActionsGrid .btn, body.mobile-layout #screenHome .homeMobileMoreGrid .btn, body.mobile-layout #screenN5 .practiceActions .btn, body.mobile-layout #screenN5 .n5ExamEntryGrid .btn, body.mobile-layout #screenStudent .studentCardActions .btn, body.mobile-layout #screenSettings .settingsMobileQuickGrid .btn{ min-height:44px; } body.mobile-layout #screenKana .kanaQuestionShell, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceDrawer, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .kanaAssessmentQuestionShell{ padding:14px; border-radius:20px; } body.mobile-layout #screenAI .senseiComposer{ padding:8px; border-radius:18px; } body.mobile-layout :is(.card, .btn, .bottomNavBtn, .appTopbarChip, .roleSegBtn){ transition:none; } } /* Friendly AI chat-only shell Keep the existing route and logic, but present AI as one clean chat surface. */ #screenAI[data-ai-chat-only="true"] .aiHubShell{ max-width:780px; margin:0 auto; gap:0; } #screenAI[data-ai-chat-only="true"] .aiHeroCard, #screenAI[data-ai-chat-only="true"] .aiModeGrid, #screenAI[data-ai-chat-only="true"] .aiMobileContextRow, #screenAI[data-ai-chat-only="true"] #aiCoachPanel{ display:none !important; } #screenAI[data-ai-chat-only="true"] .aiDetailGrid{ grid-template-columns:minmax(0,1fr) !important; gap:0; } #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ display:grid !important; gap:14px; min-height:min(720px, calc(100svh - 170px)); padding:20px; border-radius:24px; box-shadow:0 18px 36px rgba(12,23,38,.08); } #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ align-items:center; padding-bottom:8px; border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent); } #screenAI[data-ai-chat-only="true"] .aiPanelHeader .hint{ max-width:44ch; } #screenAI[data-ai-chat-only="true"] .aiMobileBackBtn{ display:none !important; } #screenAI[data-ai-chat-only="true"] .senseiMessages{ flex:1 1 auto; min-height:420px; max-height:calc(100svh - 320px); padding-right:2px; padding-bottom:4px; } #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ display:grid; gap:10px; padding:0; } #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{ gap:10px; } #screenAI[data-ai-chat-only="true"] .senseiComposer{ padding:10px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenAI[data-ai-chat-only="true"] .senseiFooterNote{ margin-top:-2px; } @media (min-width:769px) and (max-width:1100px){ .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar{ min-height:auto; padding:10px 14px; gap:8px 12px; align-items:center; } .appTopbarLeft{ min-width:0; } .appTopbarBrand .pill{ display:none; } .appTopbarBrand b{ font-size:18px; } .appTopbarRight{ gap:6px; flex-wrap:wrap; justify-content:flex-end; } .appTopbar .roleSeg{ min-height:40px; } .appTopbarRight .btn{ min-height:38px; padding:8px 12px; } .appTopbarAvatar{ display:none; } } @media (max-width:768px){ body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding:8px 8px calc(68px + env(safe-area-inset-bottom)); gap:6px; } body.mobile-layout .topbar.appTopbar{ top:max(10px, env(safe-area-inset-top)); min-height:auto; padding:6px 8px 7px; padding-top:calc(6px + min(env(safe-area-inset-top), 6px)); gap:6px 8px; border-radius:12px; } body.mobile-layout .appTopbarBrand b{ font-size:15px; } body.mobile-layout .appTopbarRight{ gap:4px; } body.mobile-layout .appMainScroll{ scroll-padding-top:96px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ margin-top:8px; } body.mobile-layout #screenAI[data-ai-chat-only="true"]{ margin-top:12px !important; padding-top:70px; padding-bottom:calc(132px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiHubShell{ max-width:none; } body.mobile-layout #screenAI .aiHubShell{ gap:12px; } body.mobile-layout #screenAI .aiHeroCard{ margin-top:0; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiDetailGrid, body.mobile-layout #screenAI[data-ai-chat-only="true"][data-mobile-detail="closed"] .aiDetailGrid, body.mobile-layout #screenAI[data-ai-chat-only="true"][data-mobile-detail="open"] .aiDetailGrid{ display:grid !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel, body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiPanelCard.isActive{ min-height:calc(100svh - 144px); padding:14px; padding-bottom:calc(104px + env(safe-area-inset-bottom)); border-radius:20px; box-shadow:0 10px 20px rgba(9,20,36,.07); overflow:visible; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ gap:6px; padding-bottom:6px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:calc(100svh - 330px); max-height:none; padding-bottom:calc(132px + env(safe-area-inset-bottom)); scroll-padding-bottom:calc(132px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts .btn{ width:100%; min-height:36px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer{ position:fixed; left:10px; right:10px; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:39; width:auto; max-width:calc(100vw - 20px); padding:8px; box-shadow:0 12px 28px rgba(9,20,36,.14); } } @media (prefers-reduced-motion: reduce){ .flashCardFront, .flashRevealPanel, .flashCardFront.popIn, .flashRevealPanel.revealIn, .tierCircle, .tierPyramid.tierUpgrade, .tierRow.current .tierCircle.active, .appBootDot, .appMainScroll, .appSidebar, .appLayoutBody::after, .appBootOverlay{ transition:none !important; animation:none !important; } } /* Mobile web app polish Final cascade layer for a phone-sized, standalone-app feel. */ @media (max-width:768px){ html{ min-height:100%; background:var(--bg); -webkit-text-size-adjust:100%; } body.mobile-layout{ min-height:100svh; width:100%; overflow-x:hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--chip) 24%, var(--bg) 76%) 0%, var(--bg) 220px), var(--bg); touch-action:manipulation; -webkit-tap-highlight-color:transparent; } body.mobile-layout::before{ opacity:.42; } body.mobile-layout .appLayout{ min-height:100svh; display:block; } body.mobile-layout .appMainPane, body.mobile-layout .appMainScroll{ min-width:0; min-height:100svh; } body.mobile-layout .appMainScroll{ overflow:visible; overscroll-behavior-y:none; scroll-padding-top:calc(72px + env(safe-area-inset-top)); scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom)); } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ width:100%; max-width:none; padding: calc(8px + env(safe-area-inset-top)) 10px calc(94px + env(safe-area-inset-bottom)); gap:10px; } body.mobile-layout .topbar.appTopbar{ top:max(8px, env(safe-area-inset-top)); min-height:54px; padding:8px 10px; border-radius:18px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; background:color-mix(in srgb, var(--card) 92%, transparent); border-color:color-mix(in srgb, var(--border) 72%, transparent); box-shadow:0 10px 24px rgba(9,20,36,.10); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{ transform:translateY(calc(-58px - env(safe-area-inset-top))); opacity:.92; } body.mobile-layout .appTopbarLeft, body.mobile-layout .appTopbarBrand{ min-width:0; } body.mobile-layout .appTopbarBrand b{ display:block; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:1.05; } body.mobile-layout .appTopbarOptional, body.mobile-layout .appTopbarAvatar{ display:none !important; } body.mobile-layout .appTopbarRight{ width:auto; min-width:0; display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:6px; overflow:hidden; } body.mobile-layout .appTopbar .roleSeg{ display:grid; grid-auto-flow:column; min-height:38px; padding:3px; border-radius:14px; } body.mobile-layout .roleSegBtn{ min-height:32px; padding:6px 8px; border-radius:11px; font-size:11px; line-height:1; white-space:nowrap; } body.mobile-layout .appTopbarChip{ min-height:38px; padding:8px 10px; border-radius:14px; font-size:11px; line-height:1; white-space:nowrap; } body.mobile-layout #themeBtn.appTopbarChip{ width:38px; min-width:38px; padding:0; overflow:hidden; font-size:0; } body.mobile-layout #themeBtn.appTopbarChip::before{ content:"Aa"; font-size:11px; font-weight:900; } body.mobile-layout[data-current-route]:not([data-current-route="settings"]) .appTopbar .roleSeg, body.mobile-layout[data-current-route]:not([data-current-route="settings"]) #loginBtn.appTopbarChip, body.mobile-layout[data-current-route]:not([data-current-route="settings"]) #logoutBtn.appTopbarChip{ display:none !important; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ margin-top:4px !important; min-height:calc(100svh - 168px - env(safe-area-inset-bottom)); } body.mobile-layout :is(#screenHome .homePremiumGrid, #screenAI .aiHubShell, #screenKana .grid, #screenN5 .grid, #screenStudent #studentStatsView, #screenTeacher .teacherDashboardGrid, #screenSettings .settingsGrid){ display:grid; grid-template-columns:1fr !important; gap:12px; width:100%; margin:0; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{ border-radius:18px; padding:14px; box-shadow:0 8px 18px rgba(9,20,36,.08); border-color:color-mix(in srgb, var(--border) 78%, transparent); } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(h1,h2,h3){ line-height:1.12; letter-spacing:0; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.hint,.note,.muted,p){ line-height:1.45; } body.mobile-layout :is(.btn, button, .choice, .seg, .bottomNavBtn){ touch-action:manipulation; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .btn{ min-height:46px; border-radius:14px; padding:10px 12px; justify-content:center; } body.mobile-layout :is(.input, input, textarea, select){ max-width:100%; width:100%; min-height:46px; border-radius:14px; font-size:16px; } body.mobile-layout :is(.row, .actions, .fieldRow, .segrow){ gap:8px; } body.mobile-layout :is(.row, .actions, .fieldRow){ align-items:stretch; } body.mobile-layout :is(.row > .btn, .actions > .btn, .fieldRow > .btn){ flex:1 1 auto; } body.mobile-layout #bottomNav{ z-index:70; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); } body.mobile-layout #bottomNav .bottomNavBar{ width:min(520px, 100%); min-height:58px; padding:5px; gap:4px; border-radius:18px; background:color-mix(in srgb, var(--card) 88%, transparent); border-color:color-mix(in srgb, var(--border) 70%, transparent); box-shadow:0 14px 30px rgba(9,20,36,.18); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } body.mobile-layout #bottomNav .bottomNavBtn{ min-width:0; min-height:48px; padding:4px 2px 5px; border-radius:14px; display:grid; grid-template-rows:22px auto; justify-items:center; align-content:center; gap:3px; overflow:hidden; font-size:10px; line-height:1.05; font-weight:900; white-space:nowrap; text-overflow:ellipsis; } body.mobile-layout #bottomNav .bottomNavBtn::before{ display:grid; place-items:center; width:22px; height:22px; border-radius:9px; background:color-mix(in srgb, var(--card) 86%, var(--chip) 14%); color:var(--muted); font-size:8px; line-height:1; letter-spacing:.04em; } body.mobile-layout #bottomNav .bottomNavBtn.active{ background:color-mix(in srgb, var(--chip) 64%, var(--card) 36%); color:var(--text); border-color:transparent; } body.mobile-layout #bottomNav .bottomNavBtn.active::before{ background:var(--text); color:var(--card); } body.mobile-layout.mobile-quiz-active #bottomNav, body.mobile-layout.examMode #bottomNav{ display:none !important; } body.mobile-layout #screenHome .homeHero.homeSpanAll{ padding:16px; border-radius:20px; } body.mobile-layout #screenHome .homeHeroShell, body.mobile-layout #screenHome .homeHeroProgressTop, body.mobile-layout #screenHome .homeSectionHead, body.mobile-layout #screenHome .homePathProgressTop, body.mobile-layout #screenStudent .studentSummaryBody, body.mobile-layout #screenStudent .studentIdentityHeader{ display:grid; grid-template-columns:1fr; gap:12px; } body.mobile-layout #screenHome .homeHeroTitle{ font-size:30px; } body.mobile-layout #screenHome .homeHeroProgressCard{ padding:14px; border-radius:18px; } body.mobile-layout #screenHome .homeQuickActionsGrid, body.mobile-layout #screenHome .homeProgressStats, body.mobile-layout #screenHome .homeInsightMetaGrid, body.mobile-layout #screenHome .homeStatsGrid, body.mobile-layout #screenStudent .studentMetricGrid, body.mobile-layout #screenStudent .studentActivityGrid, body.mobile-layout #screenSettings .settingsMobileQuickGrid{ grid-template-columns:1fr !important; } body.mobile-layout #screenKana .kanaPracticePanel, body.mobile-layout #screenN5 #n5ContentCard{ min-height:calc(100svh - 168px - env(safe-area-inset-bottom)); } body.mobile-layout #screenKana .big{ font-size:clamp(54px, 24vw, 92px); line-height:1; } body.mobile-layout #screenKana .choices, body.mobile-layout #screenN5 #n5QuizChoices, body.mobile-layout #screenN5 .n5ExamChoices{ grid-template-columns:1fr !important; gap:8px; } body.mobile-layout #screenKana .choice, body.mobile-layout #screenN5 #n5QuizChoices .btn, body.mobile-layout #screenN5 .n5ExamChoice{ min-height:52px; border-radius:15px; font-size:16px; } body.mobile-layout #screenN5 .n5CategorySeg, body.mobile-layout #screenN5 .n5InlineActionRow, body.mobile-layout #screenN5 .n5SetRow, body.mobile-layout #screenN5 .n5ExamEntryGrid, body.mobile-layout :is(#screenN5, #n5BrowseModalBack) .segGroup{ grid-template-columns:1fr 1fr !important; gap:6px; } body.mobile-layout #screenN5 .n5WorkspaceGrid, body.mobile-layout #screenN5 .n5QuizSetupGrid, body.mobile-layout #screenTeacher .teacherHealthGrid{ grid-template-columns:1fr !important; } body.mobile-layout #screenStudent #studentStatsView > .card, body.mobile-layout #screenTeacher .teacherDashboardGrid > .card{ grid-column:1 / -1 !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"]{ padding-top:0; padding-bottom:calc(86px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ min-height:calc(100svh - 142px - env(safe-area-inset-bottom)); padding:14px; padding-bottom:calc(100px + env(safe-area-inset-bottom)); border-radius:20px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:calc(100svh - 328px - env(safe-area-inset-bottom)); padding:10px 8px calc(128px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiBubble{ max-width:78%; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer{ left:10px; right:10px; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:69; border-radius:18px; } body.mobile-layout .modalBack, body.mobile-layout .teacherDrawerBack, body.mobile-layout .onboardingBack{ align-items:flex-end; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); } body.mobile-layout .modalCard, body.mobile-layout .n5BrowseModalCard, body.mobile-layout .kanaAssessmentModalCard, body.mobile-layout .sessionSummaryModalCard, body.mobile-layout .teacherDrawer{ width:100%; max-width:none; max-height:min(88svh, 760px); border-radius:22px 22px 16px 16px; padding:16px; overflow:auto; overscroll-behavior:contain; } body.mobile-layout .toast{ left:10px; right:10px; bottom:calc(78px + env(safe-area-inset-bottom)); width:auto; min-width:0; transform:none; border-radius:16px; } } @media (max-width:380px){ body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding-inline:8px; } body.mobile-layout #bottomNav .bottomNavBtn{ font-size:9px; } body.mobile-layout .appTopbarBrand b{ max-width:34vw; } body.mobile-layout .appTopbarChip{ padding-inline:8px; } } /* Guided Minimalism upgrade Home now behaves as the next-action engine. Secondary feature surfaces stay available, but they no longer compete with the main learning flow. */ :root{ --space-1:8px; --space-2:12px; --space-3:16px; --space-4:20px; --action:#0f766e; --action-strong:#115e59; --action-soft:#dff4ef; --ink:var(--text); --ok:var(--good); --radius:8px; --radius-sm:8px; --shadow:0 8px 20px rgba(12,23,38,.08); } body.dark{ --action:#5eead4; --action-strong:#99f6e4; --action-soft:rgba(94,234,212,.14); } body, button, input{ letter-spacing:0; } .card{ border-radius:8px; padding:16px; box-shadow:var(--shadow); background:var(--card); } .card:hover{ transform:none; box-shadow:0 10px 24px rgba(12,23,38,.10); } .btn, .seg, .tab, .bottomNavBtn{ min-height:44px; border-radius:999px; padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.15; box-shadow:none; } .btn.primary, .seg.active, .tab.active, .bottomNavBtn.active{ background:var(--action); border-color:var(--action); color:#fff; } body.dark .btn.primary, body.dark .seg.active, body.dark .tab.active, body.dark .bottomNavBtn.active{ color:#06201d; } .btn.small{ min-height:36px; padding:8px 12px; font-size:12px; } .btn:not(.primary):hover, .seg:not(.active):hover, .bottomNavBtn:not(.active):hover{ background:color-mix(in srgb, var(--card) 82%, var(--action-soft) 18%); border-color:color-mix(in srgb, var(--border) 70%, var(--action) 30%); } .btn:active, .seg:active, .bottomNavBtn:active{ transform:scale(.98); } .miniTag, .practiceChip{ border-radius:999px; padding:8px 12px; background:color-mix(in srgb, var(--card) 86%, var(--action-soft) 14%); } .progressTrack, #screenHome .homeLevelRail, #screenHome .homeProgressMiniTrack, .studentXpTrack{ height:8px; } .progressFill, #screenHome .homeLevelRailFill, #screenHome .homeProgressMiniFill, .studentXpFill{ background:var(--action); } #screenHome .homePremiumGrid{ max-width:920px; grid-template-columns:1fr; gap:16px; margin:0 auto; } #screenHome .homeMissionCard{ order:1; display:grid; gap:16px; padding:20px; border-radius:8px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--action-soft) 4%) 0%, var(--card) 100%); } #screenHome .homeMissionHeader{order:1} #screenHome .homeMissionAction{ order:2; display:grid; gap:8px; } #screenHome .homeMissionPulse{order:3} #screenHome .homeMissionTasks{order:4} #screenHome .homeMissionProgress{order:5} #screenHome .homeMissionReward{order:6} #screenHome .homeMissionHeader{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:16px; } #screenHome .homeMissionEyebrow, #screenHome .homeMissionPulseLabel, #screenHome .homeSectionHead h3{ font-size:11px; line-height:1.2; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } #screenHome .homeMissionTitle{ margin-top:4px; font-size:clamp(30px,4vw,44px); line-height:1.05; font-weight:950; } #screenHome .homeMissionNextStep{ margin-top:8px; max-width:56ch; color:var(--muted); font-size:16px; line-height:1.5; } #screenHome .homeMissionStreak{ min-height:36px; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); font-size:12px; font-weight:900; white-space:nowrap; } #screenHome .homeMissionPulse{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #screenHome .homeMissionPulseItem{ min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb, var(--card) 92%, var(--action-soft) 8%); } #screenHome .homeMissionPulseValue{ margin-top:8px; font-size:22px; line-height:1; font-weight:950; } #screenHome .homeMissionTasks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #screenHome .homeMissionTask{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; min-height:72px; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--card); } #screenHome .homeMissionCheck{ width:20px; height:20px; margin-top:2px; border-radius:999px; border:2px solid color-mix(in srgb, var(--muted) 50%, transparent); } #screenHome .homeMissionTask.isDone .homeMissionCheck{ background:var(--action); border-color:var(--action); box-shadow:inset 0 0 0 4px var(--card); } #screenHome .homeMissionTaskTitle{ font-weight:900; line-height:1.35; } #screenHome .homeMissionTaskMeta{ margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; } #screenHome .homeMissionProgress{ display:grid; gap:8px; } #screenHome .homeMissionProgressTop{ display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; font-weight:900; } #screenHome .homeMissionProgressTrack{ height:8px; overflow:hidden; border-radius:999px; background:color-mix(in srgb, var(--border) 65%, transparent); } #screenHome .homeMissionProgressFill{ height:100%; width:0; border-radius:inherit; background:var(--action); transition:width .2s ease; } #screenHome .homeMissionReward, #screenHome .homeMissionContinueMeta, #screenHome .homeContinueMeta{ color:var(--muted); font-size:13px; line-height:1.5; } #screenHome .homeMissionContinueBtn, #screenHome .homeContinueBtn, #screenHome .homeProgressIdentityCard > .btn.primary{ width:100%; min-height:56px; font-size:16px; font-weight:950; } #screenHome .homeHero{ display:none !important; } #screenHome .homePathCard, #screenHome .homeProgressIdentityCard, #screenHome .homeQuickActionsCard, #screenHome .homeMobileMoreCard, #screenHome .homeInsightCard, #screenHome .homeStatsCard, #screenHome .homeLeaderboardCard, #screenHome .homeWinnerCard{ grid-column:1 / -1; border-radius:8px; } #screenHome .homePathCard{ order:4; display:grid; gap:16px; } #screenHome .homePathCard .homeContinueAction{ display:none !important; } #screenHome .homeProgressIdentityCard{ order:2; display:grid; gap:12px; min-height:auto; background:var(--card); } #screenHome .homeProgressIdentityHead, #screenHome .homeProgressStats{ display:none !important; } #screenHome .homeProgressIdentityRail{ padding:16px; border-radius:8px; } #screenHome .homeProgressIdentityTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; } #screenHome .homeProgressIdentityValue{ font-size:22px; } #screenHome #homeProgressContinueBtn{ display:none !important; } #screenHome .homeQuickActionsCard{ order:3; display:grid; gap:16px; } #screenHome .homeMobileMoreCard{ order:4; display:grid; gap:12px; } #screenHome .homeInsightCard, #screenHome .homeStatsCard, #screenHome .homeLeaderboardCard, #screenHome .homeWinnerCard{ order:5; display:none !important; } #screenHome[data-mobile-panel="insight"] .homeInsightCard, #screenHome[data-mobile-panel="stats"] .homeStatsCard, #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard, #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{ display:grid !important; } #screenHome[data-mobile-panel]:not([data-mobile-panel="none"]) .homeMobileMoreCard{ display:grid !important; } #screenHome .homePathProgress, #screenHome .homeInsightSurface, #screenHome .homeTierRail{ border-radius:8px; padding:16px; background:color-mix(in srgb, var(--card) 94%, var(--action-soft) 6%); } #screenHome .homePathList{ gap:8px; } #screenHome .homePathStep{ padding:12px; border-radius:8px; } #screenHome .homePathStep:nth-child(n+4){ display:none; } #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } #screenHome .homeQuickActionBtn{ min-height:72px; padding:12px; border-radius:8px; display:flex; flex-direction:column; justify-content:center; text-align:left; align-items:flex-start; white-space:normal; } #screenHome .homeQuickActionText{ display:none; } #screenHome .homeMobileMoreGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #screenStudent #studentStatsView{ max-width:920px; grid-template-columns:1fr; gap:16px; margin:0 auto; } #screenStudent .studentProfileCard, #screenStudent .studentCategoryCard, #screenStudent .studentWeekCard, #screenStudent .studentMilestoneCard{ display:none !important; } #screenStudent .studentMobileMoreCard{ display:grid; gap:12px; } #screenStudent .studentExtraDetails{ display:none; } #screenStudent[data-mobile-panel="performance"] .studentCategoryCard, #screenStudent[data-mobile-panel="activity"] .studentWeekCard, #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{ display:grid !important; } #screenAI[data-ai-chat-only="true"] .aiHubShell{ max-width:860px; } #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ height:min(720px, calc(100svh - 148px)); max-height:calc(100svh - 148px); min-height:0; display:grid !important; grid-template-rows:auto auto minmax(0,1fr) auto auto; gap:12px; padding:16px; border-radius:8px; overflow:hidden; } #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ padding-bottom:12px; } #screenAI[data-ai-chat-only="true"] .aiPanelHeader h2{ font-size:24px; line-height:1.2; } #screenAI[data-ai-chat-only="true"] .senseiQuota{ display:grid; gap:8px; padding:12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb, var(--card) 88%, var(--action-soft) 12%); } #screenAI[data-ai-chat-only="true"] .senseiQuotaTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; font-weight:800; } #screenAI[data-ai-chat-only="true"] .senseiQuotaTop strong{ color:var(--text); font-size:13px; } #screenAI[data-ai-chat-only="true"] .senseiQuotaTrack{ height:8px; overflow:hidden; border-radius:999px; background:color-mix(in srgb, var(--border) 58%, transparent); } #screenAI[data-ai-chat-only="true"] .senseiQuotaFill{ width:0%; height:100%; border-radius:inherit; background:var(--action); transition:width .22s ease, background .22s ease; } #screenAI[data-ai-chat-only="true"] .senseiQuota.isLimitReached .senseiQuotaFill{ background:var(--bad); } #screenAI[data-ai-chat-only="true"] .senseiQuotaNote{ color:var(--muted); font-size:12px; line-height:1.35; } #screenAI[data-ai-chat-only="true"] .senseiQuota.isLimitReached .senseiQuotaNote{ color:var(--bad); font-weight:800; } #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:0; max-height:none; overflow-y:auto; padding:16px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb, var(--card) 92%, var(--action-soft) 8%); scroll-padding-bottom:96px; } #screenAI[data-ai-chat-only="true"] .senseiMessage{ gap:4px; } #screenAI[data-ai-chat-only="true"] .senseiMessage.grouped .senseiLabel{ display:none; } #screenAI[data-ai-chat-only="true"] .senseiLabel{ padding:0 4px; font-size:10px; letter-spacing:.06em; } #screenAI[data-ai-chat-only="true"] .senseiBubble{ max-width:74%; padding:12px 14px; border-radius:16px; background:var(--card); box-shadow:0 2px 8px rgba(12,23,38,.05); } #screenAI[data-ai-chat-only="true"] .senseiMessage.user .senseiBubble{ background:var(--action); color:#fff; border-color:var(--action); border-bottom-right-radius:6px; } body.dark #screenAI[data-ai-chat-only="true"] .senseiMessage.user .senseiBubble{ color:#06201d; } #screenAI[data-ai-chat-only="true"] .senseiMessage.sensei .senseiBubble{ border-bottom-left-radius:6px; } #screenAI[data-ai-chat-only="true"] .senseiBubble.isTyping{ min-width:52px; color:transparent; position:relative; } #screenAI[data-ai-chat-only="true"] .senseiBubble.isTyping::before{ content:""; position:absolute; left:16px; top:50%; width:5px; height:5px; border-radius:999px; background:var(--muted); transform:translateY(-50%); box-shadow:10px 0 0 var(--muted), 20px 0 0 var(--muted); animation:senseiTypingDots 1s ease-in-out infinite; } @keyframes senseiTypingDots{ 0%,100%{opacity:.35} 50%{opacity:1} } #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ padding:0; } #screenAI[data-ai-chat-only="true"] .senseiComposer{ position:sticky; bottom:0; padding:8px; border-radius:8px; background:var(--card); box-shadow:0 -8px 20px rgba(12,23,38,.06); } #screenAI[data-ai-chat-only="true"] .senseiComposer .input{ min-height:44px; border-radius:999px; } #screenAI[data-ai-chat-only="true"] .senseiFooterNote{ display:none; } #screenN5 .n5ActionBtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .aiLoginGateBack{ background:rgba(8,14,24,.36); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .aiLoginGateCard{ width:min(440px,94vw); display:grid; gap:16px; padding:20px; border-radius:12px; } .aiLoginGateEyebrow{ color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.08em; line-height:1.2; text-transform:uppercase; } .aiLoginGateTitle{ margin:0; font-size:28px; line-height:1.1; font-weight:950; } .aiLoginGateText{ color:var(--muted); line-height:1.5; } .aiLoginGateBenefits{ display:grid; gap:8px; } .aiLoginGateBenefit{ min-height:42px; display:flex; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb, var(--card) 90%, var(--action-soft) 10%); font-weight:800; } .aiLoginGateActions{ display:grid; grid-template-columns:1fr; gap:8px; } .aiLoginGateActions .btn{ width:100%; } .aiLocked{ position:relative; } .aiLockInline{ display:inline-flex; align-items:center; justify-content:center; min-height:18px; padding:3px 6px; border-radius:999px; background:color-mix(in srgb, var(--text) 86%, var(--card) 14%); color:var(--card); font-size:9px; line-height:1; font-weight:900; letter-spacing:.06em; margin-left:6px; flex:0 0 auto; } .appSidebarBtn .aiLockInline{ margin-left:auto; } #bottomNav .bottomNavBtn .aiLockInline{ min-height:14px; padding:2px 4px; font-size:7px; margin-left:0; } body.mobile-layout #bottomNav .bottomNavBtn.aiLocked{ grid-template-rows:18px auto 12px; gap:2px; } .homeQuickActionBtn .aiLockInline, .aiModeCard .aiLockInline{ align-self:flex-start; margin-left:0; margin-top:4px; } body.dark .aiLockInline{ background:color-mix(in srgb, var(--action-strong) 72%, var(--card) 28%); color:#06201d; } @media (min-width:769px){ .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ gap:16px; padding:20px 24px 40px; } .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar{ border-radius:8px; } } @media (max-width:900px){ #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:768px){ .appLayout .wrap.appLayoutWrap, body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding:12px 10px calc(92px + env(safe-area-inset-bottom)); gap:12px; } body.mobile-layout .topbar.appTopbar{ border-radius:8px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ margin-top:0 !important; } #screenHome .homePremiumGrid, #screenStudent #studentStatsView{ gap:12px; } #screenHome .homeMissionCard{ padding:16px; gap:12px; } #screenHome .homeMissionHeader, #screenHome .homeMissionPulse, #screenHome .homeMissionTasks, #screenHome .homeQuickActionsGrid, #screenHome .homeMobileMoreGrid{ grid-template-columns:1fr; gap:8px; } #screenHome .homeMissionTitle{ font-size:32px; } #screenHome .homeMissionNextStep{ font-size:14px; } #screenHome .homeMissionStreak{ justify-self:start; } #screenHome .homeMissionPulseItem, #screenHome .homeMissionTask, #screenHome .homePathProgress, #screenHome .homePathStep{ padding:12px; } #screenHome .homeQuickActionBtn{ min-height:52px; } body.mobile-layout #screenHome .homeInsightCard, body.mobile-layout #screenHome .homeStatsCard, body.mobile-layout #screenHome .homeLeaderboardCard, body.mobile-layout #screenHome .homeWinnerCard{ display:none !important; } body.mobile-layout #screenHome[data-mobile-panel="insight"] .homeInsightCard, body.mobile-layout #screenHome[data-mobile-panel="stats"] .homeStatsCard, body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard, body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{ display:grid !important; } body.mobile-layout #screenHome[data-mobile-panel]:not([data-mobile-panel="none"]) .homeMobileMoreCard{ display:grid !important; } body.mobile-layout #screenStudent .studentMobileMoreCard{ display:grid !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"]{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ height:calc(100svh - 136px - env(safe-area-inset-bottom)); max-height:calc(100svh - 136px - env(safe-area-inset-bottom)); min-height:0; padding:12px; padding-bottom:calc(96px + env(safe-area-inset-bottom)); border-radius:8px; overflow:hidden; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:0; padding:12px 8px calc(120px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiBubble{ max-width:78%; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer{ left:10px; right:10px; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:75; border-radius:8px; } } /* Mobile product shell Desktop keeps the sidebar/dashboard layout. Phones get a quieter app shell: one title, one content column, compact cards, and chrome that gets out of the way while scrolling. */ @media (max-width:768px){ body.mobile-layout{ --mobile-header-h:52px; --mobile-nav-h:66px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 20%, var(--bg) 80%) 0, var(--bg) 180px), var(--bg); } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ max-width:none; padding: calc(6px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-h) + 28px + env(safe-area-inset-bottom)); gap:10px; } body.mobile-layout .topbar.appTopbar{ min-height:var(--mobile-header-h); padding:8px 10px; border-radius:8px; grid-template-columns:minmax(0,1fr) auto; box-shadow:0 6px 16px rgba(9,20,36,.08); background:color-mix(in srgb, var(--card) 94%, transparent); transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease; } body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{ transform:translateY(calc(-62px - env(safe-area-inset-top))); opacity:0; } body.mobile-layout .appTopbarBrand b{ max-width:64vw; font-size:18px; line-height:1; letter-spacing:0; text-transform:none; } body.mobile-layout .appTopbarOptional, body.mobile-layout .appTopbarAvatar, body.mobile-layout[data-current-route]:not([data-current-route="settings"]) .appTopbar .roleSeg, body.mobile-layout[data-current-route]:not([data-current-route="settings"]) #loginBtn.appTopbarChip, body.mobile-layout[data-current-route]:not([data-current-route="settings"]) #logoutBtn.appTopbarChip, body.mobile-layout[data-current-route]:not([data-current-route="settings"]) #themeBtn.appTopbarChip{ display:none !important; } body.mobile-layout .appTopbarRight{ gap:6px; max-width:58vw; } body.mobile-layout .appTopbarChip, body.mobile-layout .roleSegBtn{ min-height:34px; border-radius:8px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ margin-top:0 !important; min-height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - env(safe-area-inset-bottom)); scroll-margin-top:calc(var(--mobile-header-h) + 10px + env(safe-area-inset-top)); } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card, body.mobile-layout :is(#screenHome, #screenAI, #screenN5, #screenStudent, #screenTeacher, #screenSettings, #n5BrowseModalBack, #teacherDrawerBack) .listItem{ border-radius:8px; padding:12px; box-shadow:0 4px 14px rgba(9,20,36,.06); } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card + .card{ margin-top:0; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.homeSectionSub, .hint, .note, .muted, p){ font-size:12px; line-height:1.4; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .btn{ min-height:44px; border-radius:8px; padding:10px 12px; } body.mobile-layout #bottomNav{ padding:0 10px calc(8px + env(safe-area-inset-bottom)); transition:transform .22s ease, opacity .18s ease; will-change:transform, opacity; } body.mobile-layout.mobile-chrome-collapsed #bottomNav{ transform:translateY(calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))); opacity:0; pointer-events:none; } body.mobile-layout #bottomNav .bottomNavBar{ width:min(420px, 100%); min-height:56px; padding:5px; gap:4px; border-radius:8px; box-shadow:0 10px 24px rgba(9,20,36,.16); } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:46px; padding:4px 2px; border-radius:8px; grid-template-rows:24px; gap:0; font-size:0; } body.mobile-layout #bottomNav .bottomNavBtn::before{ width:24px; height:24px; border-radius:8px; font-size:9px; } body.mobile-layout #bottomNav .bottomNavBtn.active{ grid-template-rows:22px 12px; gap:2px; font-size:10px; } body.mobile-layout #bottomNav .bottomNavBtn .aiLockInline{ position:absolute; right:3px; top:3px; margin:0; padding:2px 4px; font-size:7px; } body.mobile-layout #screenHome .homePremiumGrid{ gap:10px; } body.mobile-layout #screenHome .homeMissionCard{ order:1; gap:10px; } body.mobile-layout #screenHome .homeMissionTitle{ font-size:28px; line-height:1.05; } body.mobile-layout #screenHome .homeMissionHeader{ gap:8px; } body.mobile-layout #screenHome .homeMissionPulse{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } body.mobile-layout #screenHome .homeMissionPulseItem{ padding:8px; } body.mobile-layout #screenHome .homeMissionPulseLabel{ font-size:10px; } body.mobile-layout #screenHome .homeMissionPulseValue{ font-size:16px; } body.mobile-layout #screenHome .homeMissionTasks{ gap:6px; } body.mobile-layout #screenHome .homeMissionTask{ padding:8px 10px; } body.mobile-layout #screenHome .homeMissionTask:nth-child(n+3), body.mobile-layout #screenHome .homeMissionReward, body.mobile-layout #screenHome .homeMissionContinueMeta, body.mobile-layout #screenHome .homeHero.homeSpanAll{ display:none !important; } body.mobile-layout #screenHome .homeMissionContinueBtn{ width:100%; } body.mobile-layout #screenHome .homeProgressIdentityCard{ order:2; } body.mobile-layout #screenHome .homeProgressIdentityHead, body.mobile-layout #screenHome .homeProgressStats{ grid-template-columns:1fr; gap:8px; } body.mobile-layout #screenHome .homeProgressStat{ padding:8px; } body.mobile-layout #screenHome .homePathCard{ order:3; } body.mobile-layout #screenHome .homePathCard .homeSectionSub, body.mobile-layout #screenHome .homePathCard .homeContinueAction, body.mobile-layout #screenHome .homePathStep:nth-child(n+3){ display:none !important; } body.mobile-layout #screenHome .homePathList{ gap:6px; } body.mobile-layout #screenHome .homeQuickActionsCard{ order:4; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; } body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:50px; align-items:center; } body.mobile-layout #screenHome .homeQuickActionText{ display:none; } body.mobile-layout #screenHome .homeMobileMoreCard{ order:5; } body.mobile-layout #screenHome .homeMobileMoreCard .homeSectionSub{ display:none; } body.mobile-layout #screenHome .homeMobileMoreGrid, body.mobile-layout #screenStudent .studentMobileMoreGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } body.mobile-layout #screenHome .homeMobileMoreGrid .btn, body.mobile-layout #screenStudent .studentMobileMoreGrid .btn{ min-height:38px; padding:8px 6px; font-size:11px; } body.mobile-layout #screenKana .kanaJourneyText, body.mobile-layout #screenN5 .n5PracticeHint, body.mobile-layout #screenN5 .practiceSub, body.mobile-layout #screenTeacher .hint, body.mobile-layout #screenSettings .note{ display:none; } body.mobile-layout #screenTeacher .teacherDashboardGrid > :not(.teacherHeroCard):not(.teacherHealthCard):not(.teacherActionsCard){ display:none !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"]{ padding-bottom:calc(var(--mobile-nav-h) + 14px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:0; padding:10px; padding-bottom:calc(86px + env(safe-area-inset-bottom)); border-radius:8px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ padding-bottom:0; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiPanelHeader h2{ font-size:18px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiQuota{ padding:8px; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ display:none; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:0; padding:10px 6px calc(104px + env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer{ left:8px; right:8px; bottom:calc(var(--mobile-nav-h) + 6px + env(safe-area-inset-bottom)); border-radius:8px; padding:6px; } body.mobile-layout.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ bottom:calc(8px + env(safe-area-inset-bottom)); } } @media (max-width:380px){ body.mobile-layout #screenHome .homeMissionPulse{ grid-template-columns:1fr; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:1fr !important; } body.mobile-layout #bottomNav .bottomNavBar{ width:100%; } body.mobile-layout #bottomNav .bottomNavBtn.active{ font-size:9px; } } /* Mobile shell repair Keep the app chrome reachable, compact, and outside the content area. */ @media (max-width:768px){ html{ width:100%; overflow-x:hidden; } body.mobile-layout{ --mobile-header-h:50px; --mobile-nav-h:64px; min-height:100svh; min-height:100dvh; width:100%; overflow-x:hidden; } body.mobile-layout .appLayout, body.mobile-layout .appMainPane, body.mobile-layout .appMainScroll{ width:100%; min-width:0; min-height:100svh; min-height:100dvh; } body.mobile-layout .appMainScroll{ overflow:visible; scroll-padding-top:calc(var(--mobile-header-h) + 12px + env(safe-area-inset-top)); scroll-padding-bottom:calc(var(--mobile-nav-h) + 16px + env(safe-area-inset-bottom)); } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ width:100%; max-width:none; padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(var(--mobile-nav-h) + 18px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); gap:8px; } body.mobile-layout .topbar.appTopbar{ position:sticky; top:max(6px, env(safe-area-inset-top)); z-index:90; min-height:var(--mobile-header-h); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand actions"; align-items:center; gap:8px; padding:7px 8px; border-radius:10px; transform:none !important; opacity:1 !important; pointer-events:auto; box-shadow:0 8px 18px rgba(9,20,36,.09); } body.mobile-layout .appTopbarLeft{ grid-area:brand; min-width:0; } body.mobile-layout .appTopbarRight{ grid-area:actions; min-width:0; max-width:none; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:6px; overflow:visible; } body.mobile-layout .appTopbarBrand b{ max-width:100%; font-size:18px; line-height:1; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.mobile-layout .appTopbarOptional, body.mobile-layout .appTopbarAvatar{ display:none !important; } body.mobile-layout[data-current-route]:not([data-current-route="settings"]) .topbar.appTopbar{ grid-template-columns:minmax(0,1fr); grid-template-areas:"brand"; } body.mobile-layout[data-current-route]:not([data-current-route="settings"]) .appTopbarRight{ display:none !important; } body.mobile-layout[data-current-route="settings"] .topbar.appTopbar{ grid-template-columns:minmax(0,1fr); grid-template-areas: "brand" "actions"; align-items:stretch; } body.mobile-layout[data-current-route="settings"] .appTopbarRight{ width:100%; max-width:100%; justify-content:flex-start; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } body.mobile-layout[data-current-route="settings"] .appTopbarRight::-webkit-scrollbar{ display:none; } body.mobile-layout .appTopbar .roleSeg, body.mobile-layout .appTopbarChip{ flex:0 0 auto; } body.mobile-layout .appTopbar .roleSeg{ min-height:34px; padding:3px; border-radius:10px; } body.mobile-layout .roleSegBtn, body.mobile-layout .appTopbarChip{ min-height:34px; border-radius:8px; font-size:12px; white-space:nowrap; } body.mobile-layout .roleSegBtn{ min-width:72px; padding:0 10px; } body.mobile-layout #themeBtn.appTopbarChip{ width:auto; min-width:58px; padding:0 10px; font-size:0; } body.mobile-layout #themeBtn.appTopbarChip::before{ content:"Theme"; font-size:12px; font-weight:900; } body.mobile-layout #loginBtn.appTopbarChip, body.mobile-layout #logoutBtn.appTopbarChip{ max-width:128px; overflow:hidden; text-overflow:ellipsis; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ margin-top:0 !important; min-height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); scroll-margin-top:calc(var(--mobile-header-h) + 12px + env(safe-area-inset-top)); } body.mobile-layout #bottomNav{ display:flex !important; z-index:85; padding: 0 calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:none; transition:none; } body.mobile-layout #bottomNav .bottomNavBar{ width:min(500px,100%); min-height:var(--mobile-nav-h); padding:4px; gap:3px; border-radius:12px; pointer-events:auto; background:color-mix(in srgb, var(--card) 94%, transparent); border-color:color-mix(in srgb, var(--border) 72%, transparent); box-shadow:0 10px 22px rgba(9,20,36,.14); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } body.mobile-layout #bottomNav .bottomNavBtn{ position:relative; min-width:0; min-height:54px; padding:4px 2px; border-radius:9px; display:grid; grid-template-rows:24px 0; place-items:center; align-content:center; gap:0; overflow:hidden; font-size:0; line-height:1; letter-spacing:0; text-transform:none; } body.mobile-layout #bottomNav .bottomNavBtn::before{ width:24px; height:24px; border-radius:8px; font-size:9px; line-height:1; } body.mobile-layout #bottomNav .bottomNavBtn.active{ grid-template-rows:22px 13px; gap:2px; font-size:10px; font-weight:900; background:var(--action); border-color:var(--action); color:#fff; } body.dark.mobile-layout #bottomNav .bottomNavBtn.active{ color:#06201d; } body.mobile-layout #bottomNav .bottomNavBtn.active::before{ background:color-mix(in srgb, var(--card) 92%, transparent); color:var(--action); } body.mobile-layout #bottomNav .bottomNavBtn .aiLockInline{ position:absolute; top:2px; right:2px; min-height:11px; padding:1px 3px; font-size:6px; margin:0; } body.mobile-layout #bottomNav .bottomNavBtn.aiLocked{ grid-template-rows:24px 0; } body.mobile-layout #bottomNav .bottomNavBtn.aiLocked.active{ grid-template-rows:22px 13px; } body.mobile-layout #screenKana .kanaPracticePanel, body.mobile-layout #screenN5 #n5ContentCard{ min-height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ height:calc(100svh - var(--mobile-header-h) - var(--mobile-nav-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height:calc(100dvh - var(--mobile-header-h) - var(--mobile-nav-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:none; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ bottom:calc(var(--mobile-nav-h) + 6px + env(safe-area-inset-bottom)); } } @media (max-width:380px){ body.mobile-layout{ --mobile-nav-h:60px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding-inline:6px; } body.mobile-layout #bottomNav{ padding-inline:6px; } body.mobile-layout #bottomNav .bottomNavBar{ min-height:var(--mobile-nav-h); padding:3px; gap:2px; } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:50px; } body.mobile-layout #bottomNav .bottomNavBtn.active{ font-size:9px; } } /* Mobile scroll and chrome trim This wins over older mobile experiments that capped the scroll pane. */ @media (max-width:768px){ html, body.mobile-layout{ height:auto !important; max-height:none !important; overflow-x:hidden !important; overflow-y:auto !important; } body.mobile-layout{ --mobile-header-h:40px; --mobile-nav-h:50px; } body.mobile-layout .appLayout, body.mobile-layout .appMainPane, body.mobile-layout .appMainScroll, body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ height:auto !important; max-height:none !important; overflow:visible !important; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ min-height:100svh; min-height:100dvh; padding: calc(4px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(var(--mobile-nav-h) + 36px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); } body.mobile-layout .topbar.appTopbar{ min-height:var(--mobile-header-h); top:max(4px, env(safe-area-inset-top)); padding:5px 7px; border-radius:8px; box-shadow:0 5px 14px rgba(9,20,36,.07); } body.mobile-layout .appTopbarBrand b{ font-size:15px; } body.mobile-layout .roleSegBtn, body.mobile-layout .appTopbarChip{ min-height:30px; font-size:11px; } body.mobile-layout .appTopbar .roleSeg{ min-height:30px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){ min-height:0 !important; padding-bottom:12px; } body.mobile-layout #bottomNav{ padding: 0 calc(6px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); } body.mobile-layout #bottomNav .bottomNavBar{ min-height:var(--mobile-nav-h); padding:3px; gap:3px; border-radius:10px; box-shadow:0 8px 18px rgba(9,20,36,.12); } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:42px; padding:3px 1px; border-radius:8px; grid-template-rows:20px 0; } body.mobile-layout #bottomNav .bottomNavBtn::before{ width:20px; height:20px; border-radius:7px; font-size:8px; } body.mobile-layout #bottomNav .bottomNavBtn.active{ grid-template-rows:19px 11px; gap:1px; font-size:9px; } body.mobile-layout #screenHome .homePremiumGrid{ gap:8px; } body.mobile-layout #screenHome .homeMissionCard, body.mobile-layout #screenHome .homeProgressIdentityCard, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeQuickActionsCard, body.mobile-layout #screenHome .homeMobileMoreCard{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } body.mobile-layout #screenHome .homeMissionCard{ padding:12px; gap:8px; } body.mobile-layout #screenHome .homeMissionHeader{ grid-template-columns:minmax(0,1fr) auto; gap:8px; } body.mobile-layout #screenHome .homeMissionTitle{ font-size:24px; line-height:1.05; } body.mobile-layout #screenHome .homeMissionNextStep{ font-size:13px; line-height:1.35; } body.mobile-layout #screenHome .homeMissionStreak{ max-width:36vw; min-height:28px; padding:6px 9px; font-size:11px; overflow:hidden; text-overflow:ellipsis; } body.mobile-layout #screenHome .homeMissionContinueBtn{ min-height:42px; } body.mobile-layout #screenHome .homeMissionPulse{ grid-template-columns:repeat(3,minmax(0,1fr)); } body.mobile-layout #screenHome .homeMissionPulseItem, body.mobile-layout #screenHome .homeMissionTask, body.mobile-layout #screenHome .homeProgressIdentityRail, body.mobile-layout #screenHome .homePathProgress, body.mobile-layout #screenHome .homePathStep{ padding:9px; } body.mobile-layout #screenHome .homePathList{ height:auto !important; max-height:none !important; overflow:visible !important; } body.mobile-layout #screenHome .homePathStep{ height:auto !important; min-height:0 !important; overflow:visible !important; } body.mobile-layout #screenHome .homePathStep:nth-child(n+3){ display:grid !important; } body.mobile-layout #screenKana .kanaPracticePanel, body.mobile-layout #screenN5 #n5ContentCard, body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ height:auto !important; max-height:none !important; min-height:0 !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:42svh; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ bottom:calc(var(--mobile-nav-h) + 5px + env(safe-area-inset-bottom)); } } @media (max-width:380px){ body.mobile-layout{ --mobile-nav-h:46px; } body.mobile-layout #bottomNav .bottomNavBtn{ min-height:38px; } body.mobile-layout #bottomNav .bottomNavBtn.active{ font-size:8px; } body.mobile-layout #screenHome .homeMissionPulse{ grid-template-columns:1fr 1fr; } body.mobile-layout #screenHome .homeMissionPulseItem:last-child{ grid-column:1 / -1; } } /* AI mobile SNS chat UX The AI route becomes its own phone chat surface so the composer does not jump with page scroll or the browser keyboard. */ @media (max-width:768px){ body.mobile-layout.ai-chat-shell-active{ --ai-viewport-height:100dvh; --ai-viewport-top:0px; --ai-keyboard-offset:0px; --ai-composer-height:64px; --ai-composer-bottom:max(8px, env(safe-area-inset-bottom)); overflow:hidden !important; height:100dvh !important; max-height:100dvh !important; } body.mobile-layout.ai-chat-shell-active .topbar.appTopbar, body.mobile-layout.ai-chat-shell-active #bottomNav{ display:none !important; } body.mobile-layout.ai-chat-shell-active .appLayout, body.mobile-layout.ai-chat-shell-active .appMainPane, body.mobile-layout.ai-chat-shell-active .appMainScroll, body.mobile-layout.ai-chat-shell-active .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ height:100dvh !important; min-height:0 !important; max-height:100dvh !important; overflow:hidden !important; } body.mobile-layout.ai-chat-shell-active .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ padding:0 !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"]{ position:fixed; z-index:120; left:0; right:0; top:var(--ai-viewport-top); bottom:auto; display:block !important; width:100%; height:var(--ai-viewport-height); min-height:0 !important; max-height:none !important; margin:0 !important; padding:env(safe-area-inset-top) 0 0 !important; overflow:hidden !important; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 34%, var(--bg) 66%) 0, var(--bg) 130px), var(--bg); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiHubShell, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiDetailGrid{ width:100%; height:100%; min-height:0; max-width:none; display:grid !important; grid-template-columns:1fr !important; grid-template-rows:minmax(0,1fr); gap:0; margin:0; overflow:hidden; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelCard.isActive{ width:100%; height:100% !important; min-height:0 !important; max-height:none !important; display:grid !important; grid-template-rows:auto auto minmax(0,1fr) auto; gap:0; padding:0; border:0; border-radius:0; box-shadow:none; overflow:hidden !important; background:transparent; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ min-height:52px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader > div:first-child{ grid-column:2; grid-row:1; min-width:0; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader .hint, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader .miniTag{ display:none !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader h2{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; line-height:1.15; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiMobileBackBtn{ display:inline-flex !important; grid-column:1; grid-row:1; min-width:60px; min-height:34px; padding:0 10px; border-radius:999px; font-size:12px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuota{ display:grid; gap:5px; padding:7px 10px; border:0; border-bottom:1px solid color-mix(in srgb, var(--border) 66%, transparent); border-radius:0; background:color-mix(in srgb, var(--card) 72%, var(--bg) 28%); } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiQuota{ padding-block:5px; } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiQuotaNote{ display:none; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuotaTop{ font-size:11px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuotaTrack{ height:4px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:0 !important; height:auto !important; max-height:none !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:12px 10px 10px; scroll-padding-bottom:20px; border:0; border-radius:0; background: radial-gradient(360px 180px at 50% -80px, color-mix(in srgb, var(--chip) 28%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 88%, var(--card) 12%); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessage{ margin:0 0 8px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiLabel{ font-size:9px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiBubble{ max-width:82%; padding:10px 12px; border-radius:18px; font-size:15px; line-height:1.42; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiPromptBlock, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiFooterNote{ display:none !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.ai-chat-shell-active.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:180; width:calc(100% - 20px); max-width:none; margin:8px 10px var(--ai-composer-bottom); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; padding:8px; border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:22px; background:color-mix(in srgb, var(--card) 94%, transparent); box-shadow:0 12px 32px rgba(9,20,36,.18); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer .input{ width:100%; min-height:42px; max-height:108px; border-radius:999px; padding:10px 14px; font-size:16px; line-height:1.25; background:color-mix(in srgb, var(--card) 88%, var(--bg) 12%); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #senseiSendBtn{ width:48px; min-width:48px; min-height:42px; padding:0; border-radius:999px; font-size:12px; } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiComposer{ bottom:auto !important; margin-bottom:8px; } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiMessages{ padding-bottom:10px; scroll-padding-bottom:20px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiEmptyState{ min-height:100%; display:grid; place-content:center; padding:24px; text-align:center; } } /* Mobile Home simplification Continue Learning and Today's Study Path become one short decision card. */ .homeUnifiedPath{ display:none; } @media (max-width:768px){ body.mobile-layout #screenHome .homePremiumGrid{ gap:8px; } body.mobile-layout #screenHome .homeMissionCard{ order:1; display:grid; gap:8px; padding:12px; } body.mobile-layout #screenHome .homeMissionHeader{ grid-template-columns:1fr; gap:4px; } body.mobile-layout #screenHome .homeMissionEyebrow{ font-size:10px; } body.mobile-layout #screenHome .homeMissionTitle{ margin-top:2px; font-size:24px; line-height:1.05; } body.mobile-layout #screenHome .homeMissionNextStep{ margin-top:4px; font-size:13px; line-height:1.35; } body.mobile-layout #screenHome .homeMissionStreak, body.mobile-layout #screenHome .homeMissionPulse, body.mobile-layout #screenHome .homeMissionTasks, body.mobile-layout #screenHome .homeMissionProgress, body.mobile-layout #screenHome .homeMissionReward, body.mobile-layout #screenHome .homeMissionContinueMeta, body.mobile-layout #screenHome .homeProgressIdentityCard, body.mobile-layout #screenHome .homePathCard, body.mobile-layout #screenHome .homeMobileMoreCard{ display:none !important; } body.mobile-layout #screenHome .homeMissionAction{ order:2; } body.mobile-layout #screenHome .homeMissionContinueBtn{ min-height:44px; font-size:15px; } body.mobile-layout #screenHome .homeUnifiedPath{ order:3; display:grid; gap:8px; padding:10px; border:1px solid var(--border); border-radius:8px; background:color-mix(in srgb, var(--card) 92%, var(--action-soft) 8%); } body.mobile-layout #screenHome .homeUnifiedPathTop{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; } body.mobile-layout #screenHome .homeUnifiedPathLabel{ color:var(--muted); font-size:10px; line-height:1.2; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } body.mobile-layout #screenHome .homeUnifiedPathSummary{ margin-top:3px; font-size:13px; line-height:1.35; font-weight:900; } body.mobile-layout #screenHome .homeUnifiedPathCount{ min-height:28px; padding:6px 8px; font-size:11px; } body.mobile-layout #screenHome .homeUnifiedPathTrack{ height:6px; } body.mobile-layout #screenHome .homeQuickActionsCard{ order:2; padding:12px; gap:10px; } body.mobile-layout #screenHome .homeQuickActionsCard .homeSectionSub{ display:none; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; } body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:42px; padding:8px 10px; align-items:center; text-align:center; } body.mobile-layout #screenHome .homeQuickActionText{ display:none !important; } body.mobile-layout #screenHome .homeInsightCard, body.mobile-layout #screenHome .homeStatsCard, body.mobile-layout #screenHome .homeLeaderboardCard, body.mobile-layout #screenHome .homeWinnerCard{ display:none !important; } } /* AI Friend chat redesign Scoped to the Sensei chat so auth, routing, and the rest of the app stay untouched. */ @keyframes senseiMessageIn{ from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} } @keyframes senseiTypingPulse{ 0%, 100%{opacity:.36} 50%{opacity:1} } #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ overflow:hidden; } #screenAI[data-ai-chat-only="true"] .senseiMessages{ gap:14px; min-height:420px; max-height:min(62vh, 560px); padding:18px; border:1px solid color-mix(in srgb, var(--border) 76%, transparent); border-radius:22px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, var(--card) 14%), color-mix(in srgb, var(--bg) 94%, var(--card) 6%)); scroll-behavior:smooth; scroll-padding-bottom:22px; } #screenAI[data-ai-chat-only="true"] .senseiMessage{ gap:5px; animation:senseiMessageIn .18s ease both; } #screenAI[data-ai-chat-only="true"] .senseiMessage.grouped{ margin-top:-6px; } #screenAI[data-ai-chat-only="true"] .senseiMessage.grouped .senseiLabel{ display:none; } #screenAI[data-ai-chat-only="true"] .senseiLabel{ padding:0 6px; font-size:11px; line-height:1.2; letter-spacing:.06em; opacity:.82; } #screenAI[data-ai-chat-only="true"] .senseiBubble{ max-width:min(75%, 560px); padding:12px 15px; border-radius:23px; border:1px solid color-mix(in srgb, var(--border) 68%, transparent); font-size:15px; line-height:1.55; box-shadow:0 8px 22px rgba(14,24,38,.06); } #screenAI[data-ai-chat-only="true"] .senseiMessage.user .senseiBubble{ color:#fff; background:linear-gradient(135deg,#138476,#0d6f66); border-color:transparent; border-bottom-right-radius:9px; box-shadow:0 10px 22px rgba(13,111,102,.18); } #screenAI[data-ai-chat-only="true"] .senseiMessage.sensei .senseiBubble{ color:var(--text); background:color-mix(in srgb, var(--card) 92%, var(--bg) 8%); border-bottom-left-radius:9px; } #screenAI[data-ai-chat-only="true"] .senseiBubble.isTyping{ min-width:54px; color:var(--muted); letter-spacing:.14em; animation:senseiTypingPulse 1.1s ease-in-out infinite; } #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{ flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts::-webkit-scrollbar{ display:none; } #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts .btn{ flex:0 0 auto; min-height:38px; padding:8px 13px; border-radius:999px; background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); box-shadow:none; } #screenAI[data-ai-chat-only="true"] .senseiComposer{ gap:10px; padding:8px; border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:24px; background:color-mix(in srgb, var(--card) 94%, transparent); box-shadow:0 14px 34px rgba(14,24,38,.10); transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } #screenAI[data-ai-chat-only="true"] .senseiComposer:focus-within{ border-color:color-mix(in srgb, var(--ring) 40%, transparent); box-shadow:0 16px 36px rgba(13,111,102,.14), 0 0 0 3px color-mix(in srgb, var(--ring) 12%, transparent); } #screenAI[data-ai-chat-only="true"] .senseiComposer .input{ min-height:50px; border-radius:999px; padding:0 16px; border-color:color-mix(in srgb, var(--border) 62%, transparent); font-size:16px; line-height:1.25; color:var(--text); background:color-mix(in srgb, var(--card) 88%, var(--bg) 12%); } #screenAI[data-ai-chat-only="true"] .senseiComposer .input::placeholder{ color:color-mix(in srgb, var(--muted) 78%, transparent); } #screenAI[data-ai-chat-only="true"] #senseiSendBtn{ width:52px; min-width:52px; min-height:50px; padding:0; border-radius:999px; font-size:0; line-height:1; box-shadow:0 10px 22px rgba(13,111,102,.20); transition:transform .12s ease, filter .12s ease, box-shadow .12s ease; } #screenAI[data-ai-chat-only="true"] #senseiSendBtn::before{ content:"Send"; font-size:12px; font-weight:900; } #screenAI[data-ai-chat-only="true"] #senseiSendBtn:active{ transform:scale(.96); filter:brightness(.96); } #screenAI[data-ai-chat-only="true"] #senseiSendBtn:disabled{ opacity:.52; filter:saturate(.72); box-shadow:none; cursor:not-allowed; } @media (max-width:768px){ body.mobile-layout.ai-chat-shell-active{ --ai-composer-bottom:max(8px, env(safe-area-inset-bottom)); background:var(--bg); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"]{ height:var(--ai-viewport-height); padding:env(safe-area-inset-top) 0 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 58%, var(--bg) 42%) 0, var(--bg) 112px), var(--bg); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiHubShell, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiDetailGrid{ height:100%; min-height:0; overflow:hidden; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelCard.isActive{ height:100% !important; min-height:0 !important; display:grid !important; grid-template-rows:auto auto minmax(0,1fr) auto auto; gap:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ min-height:0; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; padding:8px 12px 7px; border-bottom:1px solid color-mix(in srgb, var(--border) 58%, transparent); background:color-mix(in srgb, var(--card) 88%, transparent); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader > div:first-child{ grid-column:2; min-width:0; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader h2{ font-size:18px; line-height:1.1; letter-spacing:0; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader .hint:first-child, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader .miniTag{ display:none !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader .hint:last-child{ display:block !important; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.2; color:var(--muted); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiMobileBackBtn{ grid-column:1; min-width:54px; min-height:34px; padding:0 10px; border-radius:999px; font-size:12px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuota{ gap:5px; padding:7px 12px 8px; border:0; border-bottom:1px solid color-mix(in srgb, var(--border) 58%, transparent); border-radius:0; background:color-mix(in srgb, var(--card) 66%, var(--bg) 34%); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuotaTop{ font-size:11px; line-height:1.2; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuotaNote{ display:none; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuotaTrack{ height:5px; border-radius:999px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:0 !important; height:auto !important; max-height:none !important; gap:12px; padding:14px 12px 12px; border:0; border-radius:0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, var(--card) 12%), var(--bg)); scroll-padding-bottom:18px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessage{ margin:0; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessage.grouped{ margin-top:-4px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiLabel{ font-size:10px; letter-spacing:.05em; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiBubble{ max-width:75%; padding:12px 14px; border-radius:24px; font-size:16px; line-height:1.48; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessage.user .senseiBubble{ border-bottom-right-radius:8px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessage.sensei .senseiBubble{ border-bottom-left-radius:8px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ display:block !important; min-width:0; margin:0; padding:5px 0 2px; border-top:1px solid color-mix(in srgb, var(--border) 48%, transparent); background:color-mix(in srgb, var(--bg) 88%, var(--card) 12%); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiPromptLabel{ display:none !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{ padding:5px 12px 6px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts .btn{ min-height:36px; padding:8px 13px; font-size:14px; color:var(--text); border-color:color-mix(in srgb, var(--border) 68%, transparent); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.ai-chat-shell-active.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto; max-width:none; margin:0; padding:8px 10px calc(8px + var(--ai-composer-bottom)); border:0; border-top:1px solid color-mix(in srgb, var(--border) 58%, transparent); border-radius:0; background:color-mix(in srgb, var(--card) 94%, transparent); box-shadow:0 -12px 30px rgba(14,24,38,.08); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer .input{ min-height:52px; padding:0 16px; border-radius:999px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #senseiSendBtn{ width:52px; min-width:52px; min-height:52px; } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiComposer{ margin-bottom:0; padding-bottom:8px; } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiMessages{ padding-bottom:12px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiFooterNote{ display:none !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiEmptyState{ min-height:100%; padding:24px; } } /* AI Friend complete layout repair Final layer: one fixed chat shell, one message scroller, stable composer. */ #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ display:flex !important; flex-direction:column; min-height:0; } #screenAI[data-ai-chat-only="true"] .aiPanelHeader, #screenAI[data-ai-chat-only="true"] .senseiQuota, #screenAI[data-ai-chat-only="true"] .senseiPromptBlock, #screenAI[data-ai-chat-only="true"] .senseiComposer, #screenAI[data-ai-chat-only="true"] .senseiFooterNote{ flex:0 0 auto; } #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ order:1; } #screenAI[data-ai-chat-only="true"] .senseiQuota{ order:2; } #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ order:3; min-width:0; } #screenAI[data-ai-chat-only="true"] .senseiMessages{ order:4; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; -webkit-overflow-scrolling:touch; } #screenAI[data-ai-chat-only="true"] .senseiComposer{ order:5; } #screenAI[data-ai-chat-only="true"] .senseiFooterNote{ order:6; } @media (min-width:769px){ #screenAI[data-ai-chat-only="true"] .aiDetailGrid{ max-width:860px; margin-inline:auto; } #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ min-height:640px; } #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ margin-bottom:-4px; } #screenAI[data-ai-chat-only="true"] .senseiMessages{ min-height:420px; } } @media (max-width:768px){ body.mobile-layout.ai-chat-shell-active{ position:fixed; inset:0; width:100%; overflow:hidden !important; overscroll-behavior:none; touch-action:manipulation; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"]{ display:flex !important; flex-direction:column; height:var(--ai-viewport-height) !important; max-height:var(--ai-viewport-height) !important; min-height:0 !important; overflow:hidden !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiHubShell, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiDetailGrid{ flex:1 1 auto; display:flex !important; flex-direction:column; min-height:0 !important; height:100%; overflow:hidden !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelCard.isActive{ flex:1 1 auto; display:flex !important; flex-direction:column !important; min-height:0 !important; height:100% !important; overflow:hidden !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .aiPanelHeader{ flex:0 0 auto; order:1; padding:7px 12px 6px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuota{ flex:0 0 auto; order:2; padding:6px 12px 7px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{ flex:0 0 auto; order:3; padding:4px 0 3px; border-top:0; border-bottom:1px solid color-mix(in srgb, var(--border) 46%, transparent); } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{ padding:4px 12px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessages{ flex:1 1 auto !important; order:4; min-height:0 !important; height:auto !important; max-height:none !important; overflow-y:auto !important; padding:14px 12px 16px; scroll-padding-bottom:18px; touch-action:pan-y; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.ai-chat-shell-active.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ flex:0 0 auto; order:5; position:sticky !important; bottom:0 !important; z-index:220; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 10px calc(8px + var(--ai-composer-bottom)); transform:translateZ(0); } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiComposer{ padding-bottom:8px; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer .input{ min-width:0; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #senseiSendBtn{ flex:0 0 52px; } } /* AI Friend send button cleanup */ #screenAI[data-ai-chat-only="true"] .senseiPromptBlock, #screenAI[data-ai-chat-only="true"] .aiMobileContextRow{ display:none !important; } #screenAI[data-ai-chat-only="true"] #senseiSendBtn{ display:grid !important; place-items:center; position:relative; overflow:hidden; white-space:nowrap; text-indent:0; user-select:none; } #screenAI[data-ai-chat-only="true"] #senseiSendBtn::before{ content:"" !important; position:absolute; left:50%; top:50%; width:13px; height:13px; border-top:3px solid currentColor; border-right:3px solid currentColor; transform:translate(-47%,-50%) rotate(45deg); } #screenAI[data-ai-chat-only="true"] #senseiSendBtn::after{ content:"" !important; position:absolute; left:50%; top:50%; width:16px; height:3px; border-radius:999px; background:currentColor; transform:translate(-58%,-50%); } #screenAI[data-ai-chat-only="true"] #senseiSendBtn[disabled]::before, #screenAI[data-ai-chat-only="true"] #senseiSendBtn[disabled]::after{ opacity:.62; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessages{ padding-top:16px; transition:padding .16s ease; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer{ transition:box-shadow .16s ease, background-color .16s ease, padding .16s ease; } /* app.dothiro Plus quota + upgrade UX */ #screenAI[data-ai-chat-only="true"] .senseiQuotaTop{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; } #screenAI[data-ai-chat-only="true"] .senseiQuotaUpgradeBtn{ appearance:none; border:1px solid color-mix(in srgb, var(--ring) 28%, var(--border) 72%); border-radius:999px; min-height:30px; padding:0 10px; color:var(--text); background:color-mix(in srgb, var(--chip) 34%, var(--card) 66%); font:inherit; font-size:11px; font-weight:900; cursor:pointer; } #screenAI[data-ai-chat-only="true"] .senseiQuotaUpgradeBtn[hidden]{ display:none !important; } #screenAI[data-ai-chat-only="true"] .senseiQuota.isLimitReached .senseiQuotaFill{ background:linear-gradient(90deg,#c98b32,#b95050); } #screenAI[data-ai-chat-only="true"] .senseiQuota.isPlus .senseiQuotaFill{ width:100% !important; background:linear-gradient(90deg,#138476,#d7b65d); } #screenAI[data-ai-chat-only="true"] .senseiQuota.hasBonus .senseiQuotaFill{ background:linear-gradient(90deg,#138476,#5e9f8f); } .aiPlusModalBack{ z-index:360; padding:16px; align-items:center; } .aiPlusCard{ width:min(560px, 100%); max-height:min(760px, calc(100dvh - 32px)); overflow:auto; -webkit-overflow-scrolling:touch; display:grid; gap:14px; border-radius:24px; padding:18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--chip) 4%), var(--card)); } .aiPlusHeader{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; } .aiPlusBadge{ display:inline-flex; align-items:center; width:max-content; min-height:28px; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ring) 28%, var(--border) 72%); background:color-mix(in srgb, var(--chip) 38%, var(--card) 62%); font-size:11px; font-weight:900; letter-spacing:.04em; } .aiPlusHeader h2{ margin:10px 0 0; font-size:28px; line-height:1.05; letter-spacing:0; font-family:"Solway", ui-serif, Georgia, serif; } .aiPlusHeader p{ margin:8px 0 0; color:var(--muted); line-height:1.45; } .aiPlusCloseBtn{ min-width:70px; } .aiPlusLimitNote{ padding:11px 12px; border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:16px; color:var(--text); background:color-mix(in srgb, var(--bg) 76%, var(--card) 24%); font-weight:800; line-height:1.35; } .aiPlusBenefits{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .aiPlusBenefits div{ min-height:40px; padding:10px 11px; border:1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius:14px; background:color-mix(in srgb, var(--card) 90%, var(--bg) 10%); font-size:13px; font-weight:800; line-height:1.25; } .aiPlusPlans{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .aiPlusPlanBtn{ appearance:none; display:grid; gap:6px; min-height:112px; padding:13px; text-align:left; color:var(--text); border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:18px; background:var(--card); cursor:pointer; font:inherit; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; } .aiPlusPlanBtn:active{ transform:scale(.98); } .aiPlusPlanBtn.active{ border-color:color-mix(in srgb, var(--ring) 45%, var(--border) 55%); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 10%, transparent); } .aiPlusPlanBtn.recommended{ background:linear-gradient(180deg, color-mix(in srgb, var(--chip) 26%, var(--card) 74%), var(--card)); } .aiPlusPlanBtn span{ font-size:13px; color:var(--muted); font-weight:900; } .aiPlusPlanBtn strong{ font-size:20px; line-height:1.1; font-family:"Solway", ui-serif, Georgia, serif; } .aiPlusPlanBtn em{ width:max-content; max-width:100%; padding:5px 8px; border-radius:999px; color:var(--text); background:color-mix(in srgb, var(--chip) 42%, var(--card) 58%); font-size:11px; font-style:normal; font-weight:900; } .aiPlusMath{ display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; line-height:1.35; } .aiPlusMath b{ color:var(--text); } .aiPlusActions{ display:grid; grid-template-columns:1fr auto; gap:10px; } .aiPlusActions .btn{ min-height:48px; } .aiRedeemBox{ display:grid; gap:10px; padding-top:12px; border-top:1px solid color-mix(in srgb, var(--border) 68%, transparent); } .aiRedeemTitle{ font-weight:900; font-size:15px; } .aiRedeemHint{ margin-top:3px; color:var(--muted); font-size:13px; line-height:1.35; } .aiRedeemForm{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; } .aiRedeemForm .input{ min-width:0; width:100%; border-radius:16px; text-transform:uppercase; } .aiRedeemForm .btn{ min-height:46px; } .aiRedeemStatus{ min-height:18px; color:var(--muted); font-size:13px; font-weight:800; } .aiRedeemStatus[data-tone="success"]{color:var(--good)} .aiRedeemStatus[data-tone="error"]{color:var(--bad)} @media (max-width:768px){ .aiPlusModalBack{ align-items:flex-end; padding:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); } .aiPlusCard{ width:100%; max-height:calc(100dvh - max(20px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))); border-radius:24px 24px 18px 18px; padding:16px; } .aiPlusHeader h2{ font-size:24px; } .aiPlusBenefits, .aiPlusPlans, .aiPlusActions, .aiRedeemForm{ grid-template-columns:1fr; } .aiPlusPlanBtn{ min-height:94px; } .aiPlusMath{ display:grid; } .aiPlusCloseBtn{ min-width:58px; padding-inline:10px; } } /* N5 pathway refresh */ #screenN5 .n5PathGrid{ grid-template-columns:minmax(280px,.92fr) minmax(0,1.08fr); gap:16px; align-items:start; } #screenN5 .n5PathHubCard{ display:grid; gap:14px; align-content:start; padding:18px; border-radius:18px; background:var(--surface-1); } #screenN5 .n5PathTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenN5 .n5PathTop h3{ margin:5px 0 6px; font-size:25px; line-height:1.08; letter-spacing:0; } #screenN5 .n5PathStageCard, #screenN5 .n5RecommendedCard, #screenN5 .n5MonthlyStatusCard, #screenN5 .n5FocusDock{ border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); padding:14px; } #screenN5 .n5PathStageTitle, #screenN5 .n5MonthlyStatusTitle{ margin-top:4px; font-size:18px; line-height:1.2; font-weight:950; } #screenN5 .n5PathRail{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:12px; } #screenN5 .n5PathStep{ min-height:38px; display:flex; align-items:center; justify-content:center; text-align:center; padding:7px 5px; border-radius:12px; border:1px solid var(--border); color:var(--muted); font-size:11px; font-weight:900; line-height:1.1; background:var(--card); } #screenN5 .n5PathStep.isComplete{ color:var(--text); background:color-mix(in srgb, var(--good) 10%, var(--card) 90%); border-color:color-mix(in srgb, var(--good) 30%, var(--border) 70%); } #screenN5 .n5PathStep.isCurrent{ color:var(--text); background:var(--chip); border-color:transparent; } #screenN5 .n5RecommendedCard{ display:grid; gap:10px; } #screenN5 .n5FeatureGrid{ display:grid; grid-template-columns:1fr; gap:10px; } #screenN5 .n5FeatureCard{ width:100%; min-height:92px; display:grid; gap:6px; align-content:center; justify-items:start; padding:15px; border-radius:16px; text-align:left; white-space:normal; background:var(--card); } #screenN5 .n5FeatureCard.isDisabled, #screenN5 .n5FeatureCard:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; } #screenN5 .n5FeatureLabel{ font-size:17px; line-height:1.15; font-weight:950; } #screenN5 .n5FeatureText{ color:var(--muted); font-size:13px; line-height:1.4; font-weight:700; } #screenN5 .n5MonthlyStatusCard{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenN5 .n5FocusDock{ display:grid; gap:10px; } #screenN5 .n5FocusDock .n5CategorySeg{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #screenN5 .n5WritingSupport, #screenN5 .n5ExamMonthlyResult, #flashModalCard .n5WritingSupport{ margin-top:10px; padding:10px 12px; border:1px dashed color-mix(in srgb, var(--border) 76%, var(--chip) 24%); border-radius:12px; color:var(--muted); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); font-size:12px; font-weight:900; line-height:1.35; } #screenN5 .n5LibraryCard{ gap:12px; } #screenN5 .n5LibraryCard::after{ display:none; } #screenN5 .n5LibraryExample + .n5LibraryExample{ margin-top:0; padding-top:0; border-top:0; } body.mobile-layout #screenN5 .n5PathHubCard{ display:grid; gap:10px; padding:14px; border-radius:18px; } body.mobile-layout #screenN5 .n5PathTop h3{ margin:4px 0; font-size:21px; line-height:1.12; color:var(--text); } body.mobile-layout #screenN5 .n5PathTop h3::before{ content:none; } body.mobile-layout #screenN5 .n5PathRail{ grid-template-columns:repeat(5,minmax(44px,1fr)); overflow-x:auto; padding-bottom:2px; } body.mobile-layout #screenN5 .n5FeatureCard{ min-height:82px; border-radius:15px; } body.mobile-layout #screenN5 .n5MonthlyStatusCard, body.mobile-layout #screenN5 .n5PathTop{ display:grid; justify-items:start; } body.mobile-layout #screenN5 .n5FocusDock .n5CategorySeg{ grid-template-columns:1fr 1fr; } @media (max-width:900px){ #screenN5 .n5PathGrid{ grid-template-columns:1fr; } } @media (max-width:460px){ #screenN5 .n5FocusDock .n5CategorySeg{ grid-template-columns:1fr; } } /* Student pathway profile */ #screenStudent .studentPathLevelCard, #screenStudent .studentAbilityTile{ border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); padding:14px; } #screenStudent .studentPathLevelTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenStudent .studentPathLevelName{ margin-top:4px; font-size:19px; line-height:1.2; font-weight:950; } #screenStudent .studentPathLevelList{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:12px; } #screenStudent .studentPathLevelStep{ min-height:52px; display:grid; align-content:center; gap:3px; padding:8px 6px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--muted); text-align:center; } #screenStudent .studentPathLevelStep span{ font-size:10px; font-weight:900; text-transform:uppercase; } #screenStudent .studentPathLevelStep b{ font-size:11px; line-height:1.15; } #screenStudent .studentPathLevelStep.isComplete{ color:var(--text); border-color:color-mix(in srgb, var(--good) 30%, var(--border) 70%); background:color-mix(in srgb, var(--good) 9%, var(--card) 91%); } #screenStudent .studentPathLevelStep.isCurrent{ color:var(--text); border-color:transparent; background:var(--chip); } #screenStudent .studentAbilityGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } #screenStudent .studentAbilityTile{ min-height:76px; display:grid; gap:6px; align-content:center; } #screenStudent .studentAbilityTile b{ font-size:14px; line-height:1.2; } body.mobile-layout #screenStudent .studentPathLevelList, body.mobile-layout #screenStudent .studentAbilityGrid{ grid-template-columns:1fr; } /* Calm pathway pass: N5, Student, Settings */ #screenN5 .n5PathGrid{ grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr); gap:16px; align-items:start; } #screenN5 .n5PathHubCard{ display:grid; gap:12px; padding:16px; border-radius:18px; box-shadow:0 10px 22px rgba(12,23,38,.06); } #screenN5 .n5PathTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenN5 .n5PathTop h3{ margin:4px 0; font-size:24px; line-height:1.12; } #screenN5 .n5PathStageCard, #screenN5 .n5RecommendedCard, #screenN5 .n5MonthlyStatusCard, #screenN5 .n5FocusDock, #screenN5 .n5MiniProgressCard, #screenN5 .n5WeakPreviewCard{ border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); box-shadow:none; padding:13px; } #screenN5 .n5PathRail{ margin-top:12px; } #screenN5 .n5FeatureGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenN5 .n5FeatureCard{ min-height:118px; border-radius:14px; padding:14px; } #screenN5 .n5FeatureCard.primary, #screenN5 .n5FeatureCard.is-selected{ background:var(--chip); border-color:transparent; box-shadow:none; } #screenN5 .n5PathSummaryRow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; } #screenN5 .n5MiniProgressTitle{ margin:4px 0 8px; font-weight:950; font-size:17px; line-height:1.2; } #screenN5 .n5MiniProgressTrack{ height:8px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--border) 64%, transparent); margin-bottom:8px; } #screenN5 .n5MiniProgressFill{ width:20%; height:100%; border-radius:inherit; background:var(--good); transition:width .25s ease; } #screenN5 .n5WeakPreviewList{ display:grid; gap:7px; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.35; font-weight:800; } #screenN5 .n5WeakPreviewItem{ display:grid; gap:2px; } #screenN5 .n5WeakPreviewItem b{ color:var(--text); font-size:13px; } #screenN5 .n5WeakPreviewEmpty{ min-height:32px; display:flex; align-items:center; } #screenN5 .n5FocusDock{ gap:8px; } #screenN5 .n5FocusDock .hint{ font-size:12px; } #screenN5 #n5ContentCard{ border-radius:18px; padding:14px; box-shadow:none; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); } #screenN5 #n5ContentCard .panelHeader{ margin:0 0 10px; padding:0; border:0; background:transparent; } #screenN5 .n5HeaderEyebrow, #screenN5 .n5WorkspaceEyebrow, #screenN5 .n5SetupLabel{ letter-spacing:0; text-transform:none; } #screenN5 .n5HeroTools{ opacity:.82; } #screenN5 .n5StatusCard{ padding:9px 10px; border-radius:12px; box-shadow:none; } #screenN5 .n5MetaLabel, #screenN5 .n5StatusCounts, #screenN5 .n5FlowRail, #screenN5 .n5WorkspaceMeta, #screenN5 .n5FooterBar, #screenN5 .n5PanelFooter{ display:none; } #screenN5 .n5WorkspaceShell, #screenN5 .n5WorkspaceMain{ display:block; } #screenN5 .n5WorkspaceSurface{ padding:16px; border-radius:16px; border:1px solid var(--border); box-shadow:none; background:var(--card); } #screenN5 .practiceHeader{ gap:10px; margin-bottom:12px; } #screenN5 .practiceTitle{ font-size:24px; line-height:1.15; } #screenN5 .practiceSub{ max-width:48rem; margin-top:4px; line-height:1.45; } #screenN5 .n5StageHead{ border-radius:14px; padding:14px; background:color-mix(in srgb, var(--card) 93%, var(--chip) 7%); border:1px solid var(--border); } #screenN5 .n5WorkspaceSearchRow, #screenN5 .n5WorkspaceFilters{ margin-top:10px; } #screenN5 .practiceActions{ margin-top:12px; } #screenN5 #n5QuizArea{ margin-top:8px; padding:18px; border-radius:16px; border:1px solid var(--border); background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); min-height:360px; align-content:center; } #screenN5 #n5QuizPrompt{ font-size:clamp(42px, 10vw, 82px); line-height:1; margin:8px auto 10px; min-height:92px; display:flex; align-items:center; justify-content:center; } #screenN5 .n5PracticeChoices{ display:grid; grid-template-columns:1fr; gap:10px; max-width:560px; margin:16px auto 0; } #screenN5 .n5PracticeChoices .btn, #screenN5 .n5PracticeChoices button{ min-height:50px; border-radius:14px; white-space:normal; line-height:1.25; } #screenN5 .n5ExamEntry{ border-radius:16px; padding:16px; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); border:1px solid color-mix(in srgb, var(--ring) 16%, var(--border) 84%); } #screenN5 .n5ExamEntryHead{ font-size:22px; letter-spacing:0; } #screenN5 .n5ExamFact{ border-radius:14px; min-height:116px; background:var(--card); box-shadow:none; } #flashModalCard{ max-width:620px; border-radius:20px; padding:18px; } #flashModalCard .flashModeSeg{ margin-top:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:4px; border-radius:14px; background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); border:1px solid var(--border); } #flashModalCard .flashModeBtn{ min-height:38px; border-radius:10px; white-space:normal; line-height:1.15; } #flashModalCard #flashCardFront{ min-height:220px; margin:14px 0 8px; border-radius:18px; display:grid; align-items:center; justify-content:center; align-content:center; gap:10px; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); border:1px solid var(--border); box-shadow:none; } #flashModalCard .flashFrontMain{ font-size:clamp(58px, 15vw, 112px); } #flashModalCard .flashRevealPanel{ margin-top:12px; border-radius:16px; box-shadow:none; background:var(--card); } #screenStudent .studentAnalyticsGrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:16px; } #screenStudent .studentProfileCard{ display:none; } #screenStudent .studentSummaryCard{ grid-column:1 / -1; order:1; padding:18px; background:var(--card); } #screenStudent #studentStatsView > .card::before{ display:none; } #screenStudent .studentActionCard{ order:2; } #screenStudent .studentWeakCard{ order:3; } #screenStudent .studentCategoryCard{ order:4; } #screenStudent .studentWeekCard{ order:5; } #screenStudent .studentHistoryCard{ order:6; } #screenStudent .studentMilestoneCard{ order:7; } #screenStudent .studentMobileMoreCard{ order:8; } #screenStudent .studentSectionIntro .hint, #screenStudent .studentProfileChips, #screenStudent .studentProfileFooter, #screenStudent .studentMobileMoreCard .hint, #screenStudent .studentHistoryHead .miniTag, #screenStudent .studentMilestoneCard .miniList{ display:none; } #screenStudent .studentIdentityShell{ gap:14px; } #screenStudent .studentIdentityHeader{ align-items:center; gap:14px; } #screenStudent .studentIdentityName{ font-size:24px; line-height:1.15; } #screenStudent .studentLevelBadge{ margin-top:4px; font-size:14px; } #screenStudent #studentHeroContinueBtn, #screenStudent #studentSuggestedActionBtn{ min-height:48px; border-radius:14px; } #screenStudent .studentPathLevelCard, #screenStudent .studentAbilityTile, #screenStudent .studentXpCard, #screenStudent .studentIdentityStat, #screenStudent .studentHistoryItem, #screenStudent .studentActivityTile, #screenStudent .studentMilestoneTile, #screenStudent .studentMilestonePanel{ border-radius:14px; box-shadow:none; } #screenStudent .studentIdentityMetaRow{ gap:6px; } #screenStudent .studentIdentityMetaRow .miniTag{ padding:7px 9px; } #screenStudent .studentCardActions{ gap:8px; } #screenStudent .studentCardActions .miniTag{ display:none; } #screenSettings .settingsCleanGrid{ grid-template-columns:minmax(0,760px); justify-content:center; gap:16px; } #screenSettings .settingsStudentStack{ display:grid; gap:14px; min-width:0; } #screenSettings .settingsSectionCard{ display:grid; gap:14px; padding:16px; border-radius:18px; box-shadow:none; } #screenSettings .settingsSectionHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenSettings .settingsSectionHead h3{ margin:3px 0 0; font-size:21px; line-height:1.15; } #screenSettings .settingsStatusLine{ padding:12px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); color:var(--muted); font-size:13px; line-height:1.35; font-weight:800; } #screenSettings .settingsStatusLine b{ color:var(--text); overflow-wrap:anywhere; } #screenSettings .settingsFieldGroup{ display:grid; gap:8px; } #screenSettings .settingsInlineField{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; } #screenSettings .settingsActionRow, #screenSettings .settingsSegmentRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } #screenSettings .settingsSectionCard .btn{ border-radius:14px; min-height:44px; white-space:normal; line-height:1.2; } #screenSettings .settingsMobileQuickGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; position:sticky; top:76px; z-index:3; padding:6px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter:blur(8px); } #screenSettings .settingsDangerCard{ border-color:color-mix(in srgb, var(--bad) 28%, var(--border) 72%); background:color-mix(in srgb, var(--card) 94%, rgba(180,35,24,.08) 6%); } #screenSettings .teacherSettingsSection{ margin-top:4px; } @media (max-width:900px){ #screenN5 .n5PathGrid, #screenStudent .studentAnalyticsGrid{ grid-template-columns:1fr; } #screenN5 .n5FeatureGrid, #screenN5 .n5PathSummaryRow{ grid-template-columns:1fr; } #screenStudent .studentSummaryCard, #screenStudent .studentActionCard, #screenStudent .studentWeakCard, #screenStudent .studentCategoryCard, #screenStudent .studentWeekCard, #screenStudent .studentHistoryCard, #screenStudent .studentMilestoneCard{ grid-column:auto; } } @media (max-width:560px){ #screenN5 .n5PathHubCard, #screenN5 #n5ContentCard, #screenStudent .studentSummaryCard, #screenSettings .settingsSectionCard{ padding:14px; border-radius:16px; } #screenN5 .n5PathTop, #screenN5 .n5MonthlyStatusCard, #screenN5 .n5StageHead, #screenStudent .studentIdentityHeader, #screenSettings .settingsSectionHead{ display:grid; justify-items:start; } #screenN5 .n5FeatureCard{ min-height:86px; } #screenN5 #n5QuizArea{ min-height:320px; padding:14px; } #flashModalCard{ width:min(100%, 440px); max-height:calc(100dvh - 20px); overflow:auto; padding:14px; } #flashModalCard .flashModeSeg{ grid-template-columns:1fr; } #flashModalCard #flashCardFront{ min-height:190px; } #screenStudent .studentPathLevelList, #screenStudent .studentAbilityGrid, #screenStudent .studentIdentityStats{ grid-template-columns:1fr; } #screenSettings .settingsMobileQuickGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); top:70px; } #screenSettings .settingsInlineField{ grid-template-columns:1fr; } #screenSettings .settingsSectionCard .btn, #screenSettings .settingsActionRow .btn, #screenSettings .settingsSegmentRow .btn{ width:100%; } } /* N5 simplification pass */ #screenN5{ --n5-gap:14px; --n5-card-pad:16px; --n5-card-radius:22px; --n5-inner-radius:18px; --n5-button-height:46px; --n5-button-radius:15px; --n5-button-shadow:0 7px 16px rgba(12,23,38,.07); --n5-button-shadow-hover:0 10px 20px rgba(12,23,38,.10); } #screenN5, #screenN5 *{ min-width:0; } #screenN5 .n5PathGrid{ grid-template-columns:1fr; gap:var(--n5-gap); max-width:1080px; margin-inline:auto; } #screenN5 .n5PathHubCard{ display:grid; gap:var(--n5-gap); padding:var(--n5-card-pad); border-radius:var(--n5-card-radius); box-shadow:0 10px 22px rgba(12,23,38,.06); background:var(--surface-1); } #screenN5 .n5PathTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenN5 .n5PathTop h3{ margin:2px 0 6px; font-size:clamp(24px, 3vw, 32px); line-height:1.08; letter-spacing:0; color:var(--text); } #screenN5 .n5CompactStageLine{ color:var(--muted); font-size:14px; line-height:1.35; font-weight:800; } #screenN5 .n5CompactStageLine b{ color:var(--text); font-weight:950; } #screenN5 .n5RecommendedCard{ display:grid; grid-template-columns:minmax(0,1fr) minmax(150px, 180px); align-items:center; gap:var(--n5-gap); padding:var(--n5-card-pad); border-radius:var(--n5-card-radius); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); border:1px solid var(--border); box-shadow:none; } #screenN5 .n5MobileContinueTitle{ margin-top:3px; font-size:19px; line-height:1.2; font-weight:950; color:var(--text); } #screenN5 .n5MobileContinueMeta{ display:none; } #screenN5 #n5MobileContinueBtn{ min-height:var(--n5-button-height); height:var(--n5-button-height); min-width:150px; border-radius:var(--n5-button-radius); justify-content:center; padding:0 16px; font-size:14px; line-height:1.15; box-shadow:none; transition:transform .14s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; } #screenN5 .n5FeatureGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--n5-gap); align-items:stretch; } #screenN5 .n5FeatureCard{ display:grid; grid-template-rows:auto minmax(42px, 1fr) minmax(44px, auto) var(--n5-button-height); gap:10px; align-content:stretch; height:100%; min-height:190px; padding:var(--n5-card-pad); border:1px solid var(--border); border-radius:var(--n5-card-radius); background:var(--card); box-shadow:none; transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; } #screenN5 .n5FeatureCard:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(12,23,38,.07); border-color:color-mix(in srgb, var(--border) 72%, var(--text) 28%); } #screenN5 .n5FeatureLabel{ font-size:18px; line-height:1.18; font-weight:950; color:var(--text); } #screenN5 .n5FeatureText{ color:var(--muted); font-size:14px; line-height:1.38; font-weight:700; } #screenN5 .n5FeatureAction{ grid-row:4; width:100%; min-height:var(--n5-button-height); height:var(--n5-button-height); margin-top:auto; border-radius:var(--n5-button-radius); justify-content:center; white-space:normal; line-height:1.15; padding:0 16px; font-size:14px; box-shadow:none; transition:transform .14s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; } #screenN5 .n5FeatureAction:hover, #screenN5 #n5MobileContinueBtn:hover, #screenN5 .n5FocusDock .btn.small:hover, #screenN5 .n5MoreActions .btn.small:hover, #screenN5 #n5QuizActionRow .btn:hover, #screenN5 #n5QuizActionRow .miniLinkBtn:hover, #screenN5 .n5ExamEntry .btn.small:hover{ transform:translateY(-1px); box-shadow:var(--n5-button-shadow-hover); } #screenN5 .n5FeatureAction:active, #screenN5 #n5MobileContinueBtn:active, #screenN5 .n5FocusDock .btn.small:active, #screenN5 .n5MoreActions .btn.small:active, #screenN5 #n5QuizActionRow .btn:active, #screenN5 #n5QuizActionRow .miniLinkBtn:active, #screenN5 .n5ExamEntry .btn.small:active{ transform:translateY(0); box-shadow:var(--n5-button-shadow); } #screenN5 .n5FeatureAction.is-selected, #screenN5 .n5FeatureAction.primary{ background:var(--chip); border-color:transparent; } #screenN5 .n5FeatureAction.isDisabled, #screenN5 .n5FeatureAction:disabled{ opacity:.58; cursor:not-allowed; transform:none; box-shadow:none; } #screenN5 .n5ExamMicroStatus{ display:grid; gap:3px; min-height:44px; align-content:start; color:var(--muted); font-size:12px; line-height:1.25; font-weight:800; } #screenN5 .n5ExamMicroStatus span:first-child{ color:var(--text); font-size:13px; font-weight:950; } #screenN5 .n5MoreDetails{ border:1px solid var(--border); border-radius:var(--n5-card-radius); background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); overflow:hidden; } #screenN5 .n5MoreDetails summary{ min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; cursor:pointer; color:var(--text); font-size:14px; font-weight:950; list-style:none; } #screenN5 .n5MoreDetails summary::-webkit-details-marker{ display:none; } #screenN5 .n5MoreDetails summary::after{ content:"+"; width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-weight:950; line-height:1; } #screenN5 .n5MoreDetails[open] summary::after{ content:"-"; } #screenN5 .n5MoreContent{ display:grid; gap:var(--n5-gap); padding:0 14px 14px; } #screenN5 .n5MoreGrid, #screenN5 .n5PathSummaryRow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--n5-gap); align-items:stretch; } #screenN5 .n5PathStageCard, #screenN5 .n5MiniProgressCard, #screenN5 .n5WeakPreviewCard, #screenN5 .n5FocusDock, #screenN5 .n5MonthlyStatusCard{ padding:var(--n5-card-pad); border-radius:var(--n5-inner-radius); border:1px solid var(--border); background:var(--card); box-shadow:none; } #screenN5 .n5PathRail{ grid-template-columns:repeat(5,minmax(92px,1fr)); gap:8px; overflow-x:auto; padding-bottom:2px; } #screenN5 .n5PathStep{ min-height:44px; padding:8px 7px; border-radius:14px; font-size:11px; line-height:1.15; } #screenN5 .n5FocusDock{ display:grid; gap:12px; } #screenN5 .n5FocusDock .n5CategorySeg{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } #screenN5 .n5FocusDock .btn.small, #screenN5 .n5MoreActions .btn.small{ min-height:var(--n5-button-height); height:var(--n5-button-height); border-radius:var(--n5-button-radius); padding:0 14px; font-size:14px; box-shadow:none; } #screenN5 .n5MonthlyStatusCard{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenN5 .n5MoreActions{ display:flex; justify-content:flex-start; gap:8px; flex-wrap:wrap; } body:not(.mobile-layout) #screenN5:not([data-n5-action]) #n5ContentCard, body:not(.mobile-layout) #screenN5[data-n5-action="browse"] #n5ContentCard, body:not(.mobile-layout) #screenN5[data-n5-action="flashcards"] #n5ContentCard{ display:none; } body:not(.mobile-layout) #screenN5[data-n5-action="quiz"] #n5ContentCard, body:not(.mobile-layout) #screenN5[data-n5-action="exam"] #n5ContentCard{ display:block; width:100%; max-width:940px; margin-inline:auto; } #screenN5 #n5ContentCard{ border-radius:var(--n5-card-radius); } #screenN5 .n5ExamEntry{ border-radius:var(--n5-inner-radius); padding:var(--n5-card-pad); } #screenN5 .n5ExamOverview{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; } #screenN5 .n5ExamFact{ min-height:92px; border-radius:16px; } #screenN5 #n5QuizActionRow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; } #screenN5 #n5QuizActionRow .btn, #screenN5 #n5QuizActionRow .miniLinkBtn, #screenN5 .n5ExamEntry .btn.small{ min-height:var(--n5-button-height); height:var(--n5-button-height); border-radius:var(--n5-button-radius); padding:0 16px; font-size:14px; line-height:1.15; box-shadow:none; } body.mobile-layout #screenN5 .n5PathHubCard{ gap:12px; padding:14px; border-radius:var(--n5-card-radius); overflow:visible; background:var(--surface-1); } body.mobile-layout #screenN5 .n5PathTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } body.mobile-layout #screenN5 .n5MobileHubTop h3{ margin:2px 0 6px; font-size:24px; line-height:1.08; letter-spacing:0; } body.mobile-layout #screenN5 .n5MobileHubTop h3::before{ content:none !important; display:none !important; } body.mobile-layout #screenN5 .n5MobileHubTop .hint:first-child{ font-size:12px; letter-spacing:0; text-transform:none; } body.mobile-layout #screenN5 .n5MobileHubTop .miniTag{ display:flex; } body.mobile-layout #screenN5 .n5RecommendedCard{ grid-template-columns:1fr; padding:14px; border-radius:var(--n5-card-radius); gap:10px; } body.mobile-layout #screenN5 #n5MobileContinueBtn{ width:100%; min-height:var(--n5-button-height); height:var(--n5-button-height); justify-content:center; text-align:center; } body.mobile-layout #screenN5 .n5FeatureGrid{ grid-template-columns:1fr !important; gap:10px; } body.mobile-layout #screenN5 .n5FeatureCard{ min-height:178px; padding:14px; border-radius:var(--n5-card-radius); } body.mobile-layout #screenN5 .n5FeatureText{ min-height:0; } body.mobile-layout #screenN5 .n5FeatureAction{ min-height:var(--n5-button-height); } body.mobile-layout #screenN5 .n5MoreGrid, body.mobile-layout #screenN5 .n5PathSummaryRow{ grid-template-columns:1fr; } body.mobile-layout #screenN5 .n5MoreDetails{ border-radius:var(--n5-card-radius); } body.mobile-layout #screenN5 .n5MoreDetails summary{ min-height:44px; padding-inline:14px; } body.mobile-layout #screenN5 .n5MoreContent{ padding:0 12px 12px; } body.mobile-layout #screenN5 .n5PathRail{ grid-template-columns:repeat(5,minmax(92px,1fr)); } body.mobile-layout #screenN5 .n5FocusDock .n5CategorySeg{ grid-template-columns:1fr 1fr !important; } body.mobile-layout #screenN5 .n5MonthlyStatusCard{ display:grid; justify-items:start; } /* N5 clean study mode: the visible N5 path is Flashcards + Quiz only. */ #screenN5 .n5MobileContinueCard[hidden], #screenN5 .n5MoreDetails[hidden], #screenN5 .n5FeatureCard[hidden], #screenN5 .n5ExamFeatureCard, #screenN5 .n5MonthlyStatusCard, #screenN5 #n5ExamEntry{ display:none !important; } #screenN5 .n5FeatureGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:var(--n5-gap); align-items:stretch; } #screenN5 .n5FeatureCard{ min-height:176px; grid-template-rows:auto minmax(56px,1fr) var(--n5-button-height) !important; } #screenN5 .n5FeatureAction{ grid-row:3 !important; } body.mobile-layout #screenN5 .n5FeatureGrid{ grid-template-columns:1fr !important; gap:10px; } body.mobile-layout #screenN5 .n5FeatureCard{ min-height:164px; } /* Compact multilingual text */ .nav-pill, .study-level-button, .status-badge, .language-button, .appTopbarChip, .roleSegBtn, .tab, .bottomNavBtn, .miniTag, .studentMonthlyStatusBadge, .studentMonthlyReviewState, .studentMonthlyJourneyState, .appSidebarLabel{ max-width:140px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .appSidebarLabel, .bottomNavBtn, .tab, .roleSegBtn, .appTopbarChip{ display:inline-flex; align-items:center; justify-content:center; } #bottomNav .bottomNavBtn{ width:100%; max-width:100%; } .card-title, .section-title, .n5-core-card-title, #screenN5 .n5CoreCardTitle, #screenN5 .n5PathTop h3, #screenSettings .settingsSectionHead h3, #screenStudent .studentMonthlyTitle{ line-height:1.25; overflow-wrap:anywhere; } .card-description, .n5-core-card-description, #screenN5 .n5CoreCardDescription, #screenN5 .n5CompactStageLine, #screenSettings .settingsRowText span, #screenStudent .studentMonthlyHelp{ line-height:1.45; overflow-wrap:break-word; } #screenSettings .language-button{ flex:0 1 120px; justify-content:center; } #screenN5 .n5CoreGrid, #screenN5 .n5-core-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--n5-gap); align-items:stretch; } #screenN5 .n5CoreCard, #screenN5 .n5-core-card{ display:grid; grid-template-rows:auto minmax(44px,1fr) var(--n5-button-height); gap:10px; min-height:154px; padding:var(--n5-card-pad); border:1px solid var(--border); border-radius:var(--n5-card-radius); background:var(--card); box-shadow:none; cursor:pointer; transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease; } #screenN5 .n5CoreCard:hover, #screenN5 .n5CoreCard:focus-visible{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(12,23,38,.07); border-color:color-mix(in srgb, var(--border) 72%, var(--text) 28%); outline:none; } #screenN5 .n5CoreCardTitle, #screenN5 .n5-core-card-title{ font-size:18px; font-weight:950; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #screenN5 .n5CoreCardDescription, #screenN5 .n5-core-card-description{ color:var(--muted); font-size:13px; font-weight:750; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #screenN5 .n5CoreAction{ width:100%; min-height:var(--n5-button-height); height:var(--n5-button-height); border-radius:var(--n5-button-radius); justify-content:center; padding:0 14px; line-height:1.15; box-shadow:none; } @media (max-width:1024px){ #screenN5 .n5CoreGrid, #screenN5 .n5-core-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:767px){ .nav-pill, .study-level-button, .status-badge, .language-button, .appTopbarChip, .roleSegBtn, .tab, .bottomNavBtn, .miniTag, .studentMonthlyStatusBadge, .studentMonthlyReviewState, .studentMonthlyJourneyState, .appSidebarLabel{ max-width:110px; font-size:12px; } .section-title{ font-size:18px; } .card-description, .n5-core-card-description, #screenN5 .n5CoreCardDescription{ font-size:13px; } #screenN5 .n5CoreGrid, #screenN5 .n5-core-grid{ grid-template-columns:1fr; gap:10px; } #screenN5 .n5CoreCard, #screenN5 .n5-core-card{ min-height:138px; padding:14px; } #screenSettings .language-button{ flex:1 1 0; max-width:none; } } /* Student growth profile pass */ #screenStudent{ --student-gap:14px; --student-card-pad:16px; --student-card-radius:22px; --student-inner-radius:18px; --student-button-height:46px; --student-button-radius:15px; --student-soft-shadow:0 10px 22px rgba(12,23,38,.06); --student-hover-shadow:0 12px 24px rgba(12,23,38,.08); } #screenStudent, #screenStudent *{ min-width:0; } #screenStudent #studentStatsView.studentAnalyticsGrid{ display:grid; grid-template-columns:1fr; gap:var(--student-gap); max-width:1080px; margin-inline:auto; align-items:start; } #screenStudent #studentStatsView > .card{ padding:var(--student-card-pad); border:1px solid var(--border); border-radius:var(--student-card-radius); background:var(--surface-1); box-shadow:var(--student-soft-shadow); overflow:hidden; } #screenStudent #studentStatsView > .card::before, #screenStudent .studentProfileCard, #screenStudent .studentCardActions .miniTag, #screenStudent .studentHistoryHead .miniTag, #screenStudent .studentMilestoneCard .miniList, #screenStudent .studentMobileMoreCard > .studentMobileMoreGrid{ display:none !important; } #screenStudent .studentSummaryCard{ order:1; grid-column:1 / -1; } #screenStudent .studentActionCard{ order:2; } #screenStudent .studentWeakCard{ order:3; } #screenStudent .studentMobileMoreCard{ order:4; } #screenStudent .studentCategoryCard{ order:5; } #screenStudent .studentWeekCard{ order:6; } #screenStudent .studentHistoryCard{ order:7; } #screenStudent .studentMilestoneCard{ order:8; } #screenStudent .studentCategoryCard, #screenStudent .studentWeekCard, #screenStudent .studentHistoryCard, #screenStudent .studentMilestoneCard{ display:none; } #screenStudent[data-mobile-panel="performance"] .studentCategoryCard, #screenStudent[data-mobile-panel="activity"] .studentWeekCard, #screenStudent[data-mobile-panel="activity"] .studentHistoryCard, #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{ display:grid !important; gap:12px; } #screenStudent .studentIdentityShell{ display:grid; gap:var(--student-gap); } #screenStudent .studentSectionIntro{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0; } #screenStudent .studentSectionIntro h3{ margin:0 0 4px; color:var(--muted); font-size:13px; line-height:1.2; font-weight:900; } #screenStudent .studentSectionTitle{ margin:0; color:var(--text); font-size:clamp(24px, 3vw, 32px); line-height:1.08; letter-spacing:0; font-weight:950; } #screenStudent .studentSectionIntro .hint{ display:block; margin-top:5px; max-width:520px; font-size:14px; line-height:1.35; font-weight:700; } #screenStudent .studentIdentityHeader{ display:grid; grid-template-columns:minmax(0,1fr) minmax(168px,auto); align-items:center; gap:12px; padding:var(--student-card-pad); border:1px solid var(--border); border-radius:var(--student-card-radius); background:var(--card); box-shadow:none; } #screenStudent .studentIdentityProfile{ display:flex; align-items:center; gap:12px; min-width:0; } #screenStudent .studentIdentityAvatar{ width:58px; height:58px; flex:0 0 58px; border-radius:18px; display:grid; place-items:center; background:var(--chip); color:var(--text); font-size:19px; line-height:1; font-weight:950; box-shadow:none; } #screenStudent .studentIdentityMeta{ display:grid; gap:5px; min-width:0; } #screenStudent .studentIdentityName{ margin:0; color:var(--text); font-size:clamp(22px, 2.8vw, 30px); line-height:1.08; letter-spacing:0; font-weight:950; overflow-wrap:anywhere; } #screenStudent .studentLevelBadge{ width:max-content; max-width:100%; margin:0; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--chip) 72%, var(--card) 28%); color:var(--text); font-size:13px; line-height:1.15; font-weight:950; overflow-wrap:anywhere; } #screenStudent .studentIdentitySub{ color:var(--muted); font-size:12px; line-height:1.35; font-weight:700; overflow-wrap:anywhere; } #screenStudent .btn, #screenStudent #studentHeroContinueBtn, #screenStudent #studentSuggestedActionBtn, #screenStudent #studentReviewWeakItemsBtn, #screenStudent #studentOpenAiModalBtn{ min-height:var(--student-button-height); border-radius:var(--student-button-radius); padding:0 14px; display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:normal; line-height:1.15; font-size:14px; font-weight:900; box-shadow:none; transition:transform .14s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, filter .16s ease; } #screenStudent .btn:hover, #screenStudent #studentHeroContinueBtn:hover, #screenStudent #studentReviewWeakItemsBtn:hover, #screenStudent #studentOpenAiModalBtn:hover{ transform:translateY(-1px); box-shadow:var(--student-hover-shadow); } #screenStudent .btn:active, #screenStudent #studentHeroContinueBtn:active, #screenStudent #studentReviewWeakItemsBtn:active, #screenStudent #studentOpenAiModalBtn:active{ transform:translateY(0); box-shadow:none; } #screenStudent #studentHeroContinueBtn{ width:100%; min-width:168px; height:48px; align-self:center; } #screenStudent .studentPathLevelCard, #screenStudent .studentXpCard, #screenStudent .studentAbilityTile, #screenStudent .studentIdentityStat, #screenStudent .studentWeakGroup, #screenStudent .studentActivityTile, #screenStudent .studentHistoryItem, #screenStudent .studentMilestoneTile, #screenStudent .studentMilestonePanel, #screenStudent .studentPerfRow{ border:1px solid var(--border); border-radius:var(--student-inner-radius); background:var(--card); box-shadow:none; } #screenStudent .studentPathLevelCard{ display:grid; gap:12px; padding:var(--student-card-pad); } #screenStudent .studentPathLevelTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenStudent .studentXpLabel{ margin:0 0 4px; color:var(--muted); font-size:12px; line-height:1.2; font-weight:900; } #screenStudent .studentPathLevelName{ color:var(--text); font-size:20px; line-height:1.15; font-weight:950; } #screenStudent #studentPathLevelStatus{ flex:0 0 auto; border-radius:999px; padding:7px 10px; font-size:12px; line-height:1.1; font-weight:900; } #screenStudent #studentPathLevelText{ margin:0; color:var(--muted); font-size:14px; line-height:1.4; font-weight:700; } #screenStudent .studentPathLevelList{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; align-items:stretch; } #screenStudent .studentPathLevelStep{ min-height:66px; display:grid; gap:4px; align-content:center; padding:10px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); opacity:.58; } #screenStudent .studentPathLevelStep.isComplete{ opacity:.82; background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); } #screenStudent .studentPathLevelStep.isCurrent{ opacity:1; border-color:color-mix(in srgb, var(--ring) 34%, var(--border) 66%); background:color-mix(in srgb, var(--chip) 58%, var(--card) 42%); box-shadow:0 8px 16px rgba(12,23,38,.05); } #screenStudent .studentPathLevelStep span{ color:var(--muted); font-size:11px; line-height:1.15; font-weight:900; } #screenStudent .studentPathLevelStep b{ color:var(--text); font-size:13px; line-height:1.18; font-weight:950; } #screenStudent .studentAbilityGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } #screenStudent .studentAbilityTile{ min-height:72px; display:grid; align-content:center; gap:4px; padding:12px; } #screenStudent .studentAbilityTile .note, #screenStudent .studentIdentityStatLabel, #screenStudent .studentActivityTile .note, #screenStudent .studentHistoryLabel, #screenStudent .studentMilestoneTile .note, #screenStudent .studentPerfMeta{ color:var(--muted); font-size:12px; line-height:1.3; font-weight:700; } #screenStudent .studentAbilityTile b{ color:var(--text); font-size:14px; line-height:1.2; font-weight:950; } #screenStudent .studentXpCard{ display:grid; gap:10px; padding:var(--student-card-pad); } #screenStudent .studentXpTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; } #screenStudent .studentXpValue{ color:var(--text); font-size:18px; line-height:1.1; font-weight:950; } #screenStudent .studentXpTrack{ height:10px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--chip) 50%, var(--card) 50%); } #screenStudent .studentXpFill{ height:100%; border-radius:inherit; background:var(--ring); transition:width .28s ease; } #screenStudent .studentXpMeta{ color:var(--muted); font-size:12px; line-height:1.3; font-weight:700; } #screenStudent .studentIdentityStats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #screenStudent .studentIdentityStat{ display:grid; gap:4px; align-content:center; min-height:74px; padding:12px; } #screenStudent .studentIdentityStatValue{ color:var(--text); font-size:22px; line-height:1.05; font-weight:950; } #screenStudent .studentIdentityNote{ display:grid; gap:8px; padding:2px 2px 0; } #screenStudent .studentSummaryHeadline{ margin:0; color:var(--text); font-size:18px; line-height:1.25; font-weight:950; } #screenStudent #studentSummaryMotivation{ margin:0; color:var(--muted); font-size:14px; line-height:1.4; font-weight:700; } #screenStudent .studentIdentityMetaRow{ display:none; } #screenStudent .studentActionCard{ align-self:stretch; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentSuggestedAction{ display:grid; gap:10px; height:100%; align-content:start; } #screenStudent .studentSuggestedLabel{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:950; } #screenStudent .studentSuggestedTitle{ color:var(--text); font-size:20px; line-height:1.22; font-weight:950; } #screenStudent #studentSuggestedActionText{ margin:0; color:var(--muted); font-size:14px; line-height:1.42; font-weight:700; } #screenStudent .studentActionCard #studentSuggestedActionBtn{ display:none; } #screenStudent .studentWeakCard{ display:grid; gap:12px; } #screenStudent .studentWeakCard h3, #screenStudent .studentMobileMoreCard h3, #screenStudent .studentCategoryCard h3, #screenStudent .studentWeekCard h3, #screenStudent .studentHistoryCard h3, #screenStudent .studentMilestoneCard h3{ margin:0; color:var(--text); font-size:20px; line-height:1.18; letter-spacing:0; font-weight:950; } #screenStudent .studentWeakCard > .hint, #screenStudent .studentMobileMoreCard > .hint, #screenStudent .studentCategoryCard > .hint, #screenStudent .studentWeekCard > .hint, #screenStudent .studentHistoryCard .hint, #screenStudent .studentMilestoneCard .hint{ margin:0; color:var(--muted); font-size:14px; line-height:1.4; font-weight:700; } #screenStudent .studentWeakCard .divider, #screenStudent .studentCategoryCard .divider, #screenStudent .studentMilestoneCard .divider{ display:none; } #screenStudent .studentWeakList{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenStudent .studentWeakGroup{ display:grid; gap:10px; padding:12px; } #screenStudent .studentWeakGroupHead{ display:grid; gap:4px; } #screenStudent .studentWeakGroupTitle{ color:var(--text); font-size:15px; line-height:1.2; font-weight:950; } #screenStudent .studentWeakGroupMeta, #screenStudent .studentWeakItemMeta{ color:var(--muted); font-size:12px; line-height:1.3; font-weight:700; } #screenStudent .studentWeakChips{ display:flex; flex-wrap:wrap; gap:6px; } #screenStudent .studentWeakChip{ padding:7px 9px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--card) 84%, var(--chip) 16%); color:var(--text); font-size:12px; line-height:1.15; font-weight:900; } #screenStudent .studentWeakChip.isEmpty{ width:100%; border-radius:14px; color:var(--muted); font-weight:800; } #screenStudent #studentWeakFocus{ margin:0 !important; color:var(--muted); font-size:13px; line-height:1.4; font-weight:800; } #screenStudent .studentCardActions{ display:flex; flex-wrap:wrap; gap:8px; margin:0; align-items:center; } #screenStudent .studentWeakCard .studentCardActions .btn{ flex:1 1 180px; } #screenStudent .studentMobileMoreCard{ display:grid; gap:12px; } #screenStudent .studentQuickActionGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } #screenStudent .studentExtraDetails{ display:block; border:1px solid var(--border); border-radius:var(--student-inner-radius); background:var(--card); overflow:hidden; } #screenStudent .studentExtraDetails summary{ min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; color:var(--text); font-size:14px; line-height:1.15; font-weight:950; cursor:pointer; list-style:none; } #screenStudent .studentExtraDetails summary::-webkit-details-marker{ display:none; } #screenStudent .studentExtraDetails summary::after{ content:"+"; width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-weight:950; line-height:1; } #screenStudent .studentExtraDetails[open] summary::after{ content:"-"; } #screenStudent .studentExtraDetails .studentMobileMoreGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 12px 12px; } #screenStudent .studentExtraDetails .btn[aria-pressed="true"], #screenStudent .studentExtraDetails .btn.primary{ background:var(--chip); border-color:transparent; color:var(--text); } #screenStudent .studentActivityGrid, #screenStudent .studentHistoryGrid, #screenStudent .studentMilestoneGrid, #screenStudent .studentMilestoneDetails{ display:grid; gap:10px; } #screenStudent .studentActivityGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentHistoryGrid, #screenStudent .studentMilestoneGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenStudent .studentMilestoneDetails{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenStudent .studentActivityTile, #screenStudent .studentHistoryItem, #screenStudent .studentMilestoneTile, #screenStudent .studentMilestonePanel{ padding:12px; } #screenStudent .studentActivityValue, #screenStudent .studentHistoryValue, #screenStudent .studentMilestoneTile b{ color:var(--text); font-size:20px; line-height:1.1; font-weight:950; } #screenStudent .studentActivityValueSmall{ font-size:15px; line-height:1.25; } #screenStudent .studentPerfRows{ display:grid; gap:10px; } #screenStudent .studentPerfRow{ display:grid; gap:8px; padding:12px; } #screenStudent .studentPerfHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #screenStudent .studentPerfLabel, #screenStudent .studentPerfValue{ color:var(--text); font-size:14px; line-height:1.2; font-weight:950; } #screenStudent .studentPerfTrack{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--chip) 50%, var(--card) 50%); overflow:hidden; } #screenStudent .studentPerfFill{ height:100%; border-radius:inherit; background:var(--ring); } #screenStudent .bars{ min-height:132px; } body.mobile-layout #screenStudent[data-mobile-panel]:not([data-mobile-panel="none"]) .studentMobileMoreCard{ display:grid !important; } @media (min-width:820px){ #screenStudent #studentStatsView.studentAnalyticsGrid{ grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); } #screenStudent .studentSummaryCard, #screenStudent .studentMobileMoreCard, #screenStudent .studentMilestoneCard{ grid-column:1 / -1; } #screenStudent .studentActionCard, #screenStudent .studentWeakCard{ min-height:220px; } } @media (max-width:680px){ #screenStudent{ --student-gap:12px; --student-card-pad:14px; --student-card-radius:20px; --student-inner-radius:16px; } #screenStudent #studentStatsView.studentAnalyticsGrid{ gap:var(--student-gap); } #screenStudent #studentStatsView > .card{ padding:var(--student-card-pad); } #screenStudent .studentSectionTitle{ font-size:25px; } #screenStudent .studentIdentityHeader{ grid-template-columns:1fr; justify-items:stretch; padding:var(--student-card-pad); } #screenStudent .studentIdentityProfile{ align-items:flex-start; } #screenStudent .studentIdentityAvatar{ width:54px; height:54px; flex-basis:54px; border-radius:17px; } #screenStudent #studentHeroContinueBtn{ min-width:0; width:100%; } #screenStudent .studentPathLevelTop{ display:grid; } #screenStudent #studentPathLevelStatus{ justify-self:start; } #screenStudent .studentPathLevelList{ grid-template-columns:1fr; } #screenStudent .studentPathLevelStep{ min-height:54px; grid-template-columns:78px minmax(0,1fr); align-items:center; align-content:center; } #screenStudent .studentAbilityGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenStudent .studentIdentityStats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #screenStudent .studentIdentityStat{ min-height:66px; padding:10px 8px; } #screenStudent .studentIdentityStatValue{ font-size:19px; } #screenStudent .studentIdentityStatLabel{ font-size:11px; } #screenStudent .studentWeakList, #screenStudent .studentActivityGrid, #screenStudent .studentHistoryGrid, #screenStudent .studentMilestoneGrid, #screenStudent .studentMilestoneDetails{ grid-template-columns:1fr; } #screenStudent .studentQuickActionGrid, #screenStudent .studentExtraDetails .studentMobileMoreGrid{ grid-template-columns:1fr 1fr; } #screenStudent .studentWeakCard .studentCardActions{ display:grid; grid-template-columns:1fr; } #screenStudent .studentWeakCard .studentCardActions .btn{ width:100%; } } /* Student identity-only refinement */ #screenStudent{ --student-profile-max:880px; } #screenStudent #studentStatsView.studentAnalyticsGrid{ max-width:var(--student-profile-max); grid-template-columns:1fr !important; justify-content:center; gap:12px; } #screenStudent .studentActionCard, #screenStudent .studentMobileMoreCard, #screenStudent .studentCategoryCard, #screenStudent .studentWeekCard, #screenStudent .studentHistoryCard, #screenStudent .studentMilestoneCard, #screenStudent #studentHeroContinueBtn, #screenStudent .studentQuickActionGrid, #screenStudent .studentWeakCard .studentCardActions{ display:none !important; } #screenStudent .studentSummaryCard{ padding:20px; background:var(--surface-1); box-shadow:0 12px 26px rgba(12,23,38,.06); } #screenStudent .studentSummaryCard > .studentIdentityShell > .studentSectionIntro{ display:none; } #screenStudent .studentIdentityShell{ gap:16px; } #screenStudent .studentIdentityHeader{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:18px 12px 8px; border:0; border-radius:0; background:transparent; } #screenStudent .studentIdentityProfile{ display:grid; justify-items:center; gap:12px; } #screenStudent .studentIdentityAvatar{ width:74px; height:74px; flex-basis:74px; border-radius:24px; font-size:23px; box-shadow:0 10px 22px rgba(12,23,38,.07); } #screenStudent .studentIdentityMeta{ justify-items:center; gap:7px; } #screenStudent .studentIdentityName{ font-size:20px; line-height:1.1; color:var(--muted); } #screenStudent .studentLevelBadge{ width:auto; max-width:min(100%, 620px); padding:0; border:0; border-radius:0; background:transparent; color:var(--text); font-size:clamp(26px, 5vw, 36px); line-height:1.05; font-weight:950; } #screenStudent .studentIdentitySub{ max-width:540px; color:var(--muted); font-size:14px; line-height:1.45; font-weight:750; text-align:center; } #screenStudent .studentPathLevelCard{ padding:16px; gap:14px; background:var(--card); } #screenStudent .studentPathLevelTop{ display:grid; justify-items:center; text-align:center; gap:7px; } #screenStudent .studentPathLevelTop > div:first-child{ display:grid; gap:4px; } #screenStudent .studentPathLevelName{ font-size:19px; line-height:1.16; } #screenStudent #studentPathLevelStatus{ justify-self:center; padding:7px 11px; } #screenStudent #studentPathLevelText{ max-width:560px; margin-inline:auto; text-align:center; } #screenStudent .studentPathLevelList{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; } #screenStudent .studentPathLevelStep{ min-height:76px; padding:10px 8px; border-radius:18px; text-align:center; } #screenStudent .studentPathLevelStep.isCurrent{ transform:translateY(-2px); box-shadow:0 12px 20px rgba(12,23,38,.07); } #screenStudent .studentPathLevelStep.isNext{ opacity:.82; border-style:dashed; background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%); } #screenStudent .studentAbilityGrid{ display:none; } #screenStudent .studentXpCard{ padding:16px; gap:11px; background:var(--card); } #screenStudent .studentXpLabel{ font-size:12px; letter-spacing:0; } #screenStudent .studentXpValue{ font-size:20px; } #screenStudent .studentXpTrack{ height:9px; } #screenStudent .studentIdentityStats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #screenStudent .studentIdentityStat{ min-height:68px; padding:10px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } #screenStudent .studentIdentityStatValue{ font-size:21px; } #screenStudent .studentIdentityStatLabel{ font-size:11px; line-height:1.25; } #screenStudent .studentIdentityNote{ display:none; } #screenStudent .studentSummaryHeadline{ font-size:15px; line-height:1.3; color:var(--text); } #screenStudent #studentSummaryMotivation{ max-width:540px; font-size:13px; line-height:1.45; } #screenStudent .studentWeakCard{ gap:10px; padding:14px; box-shadow:none; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentWeakCard h3{ font-size:18px; } #screenStudent .studentWeakCard > .hint{ font-size:13px; } #screenStudent .studentWeakList{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #screenStudent .studentWeakGroup{ padding:10px; gap:8px; border-radius:16px; } #screenStudent .studentWeakGroupMeta{ display:none; } #screenStudent .studentWeakChips{ gap:5px; } #screenStudent .studentWeakChip{ padding:6px 8px; font-size:12px; } #screenStudent #studentWeakFocus{ display:none; } @media (min-width:820px){ #screenStudent #studentStatsView.studentAnalyticsGrid{ grid-template-columns:minmax(0,var(--student-profile-max)) !important; } #screenStudent .studentSummaryCard, #screenStudent .studentWeakCard, #screenStudent .studentCategoryCard, #screenStudent .studentWeekCard, #screenStudent .studentHistoryCard, #screenStudent .studentMilestoneCard{ grid-column:1 / -1; } #screenStudent .studentWeakCard{ min-height:0; } } @media (max-width:680px){ #screenStudent #studentStatsView.studentAnalyticsGrid{ max-width:100%; gap:11px; } #screenStudent .studentSummaryCard{ padding:16px 14px; } #screenStudent .studentIdentityHeader{ padding-top:12px; } #screenStudent .studentIdentityAvatar{ width:68px; height:68px; flex-basis:68px; border-radius:22px; } #screenStudent .studentIdentityName{ font-size:18px; } #screenStudent .studentPathLevelList{ grid-template-columns:1fr; } #screenStudent .studentPathLevelStep{ min-height:54px; grid-template-columns:88px minmax(0,1fr); justify-items:start; text-align:left; } #screenStudent .studentPathLevelStep.isCurrent{ transform:none; } #screenStudent .studentIdentityStats{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentWeakList, #screenStudent .studentExtraDetails .studentMobileMoreGrid{ grid-template-columns:1fr; } } /* Home and navigation refinement */ :root{ --dothiro-control-h:44px; --dothiro-control-radius:12px; --dothiro-card-radius:10px; --dothiro-home-gap:14px; --dothiro-home-pad:18px; } .btn, .tab, .bottomNavBtn, .roleSegBtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--dothiro-control-h); line-height:1.15; text-align:center; } .btn{ border-radius:var(--dothiro-control-radius); padding:10px 14px; } .btn.small{ min-height:40px; padding:8px 12px; border-radius:10px; } .appSidebarBtn{ min-height:48px; border-radius:var(--dothiro-control-radius); padding:0 12px; } .bottomNavBtn{ min-height:46px; padding:8px 10px; border-radius:var(--dothiro-control-radius); } .roleSegBtn{ min-height:36px; border-radius:10px; } #screenHome .homePremiumGrid{ gap:var(--dothiro-home-gap); align-items:stretch; } #screenHome :is(.homeMissionCard, .homeProgressIdentityCard, .homePathCard, .homeQuickActionsCard, .homeMobileMoreCard, .homeInsightCard, .homeStatsCard, .homeLeaderboardCard, .homeWinnerCard){ border-radius:var(--dothiro-card-radius); padding:var(--dothiro-home-pad); align-content:start; gap:var(--dothiro-home-gap); } #screenHome :is(.homeMissionPulse, .homeMissionTasks, .homeProgressStats, .homeInsightMetaGrid, .homeStatsGrid, .homeQuickActionsGrid, .homeMobileMoreGrid){ gap:10px; } #screenHome :is(.homeMissionPulseItem, .homeMissionTask, .homePathProgress, .homePathStep, .homeInsightSurface, .homeInsightMetric, .homeStatTile, .homeTierRail, .homeProgressIdentityRail, .homeUnifiedPath){ border-radius:var(--dothiro-card-radius); } #screenHome .homeSectionHead{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; } #screenHome .homeMissionHeader{ align-items:start; } #screenHome :is(.homeMissionAction, .homeContinueAction, .homeInsightActions, .homeStatsUtilityRow){ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; align-items:center; } #screenHome :is(.homeMissionAction, .homeContinueAction, .homeInsightActions, .homeStatsUtilityRow) .btn{ width:100%; } #screenHome :is(.homeMissionContinueBtn, .homeContinueBtn, #homeProgressContinueBtn){ min-height:52px; border-radius:var(--dothiro-control-radius); padding:12px 16px; } #screenHome .homeQuickActionsGrid{ align-items:stretch; } #screenHome .homeQuickActionBtn{ height:100%; min-height:76px; padding:12px 14px; border-radius:var(--dothiro-control-radius); align-items:flex-start; justify-content:center; gap:5px; } #screenHome .homeMobileMoreGrid .btn{ width:100%; min-height:44px; } .teacherComingSoonBack{ z-index:96; background:rgba(8,14,24,.34); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .teacherComingSoonCard{ width:min(420px,92vw); display:grid; gap:12px; padding:22px; border-radius:18px; text-align:center; box-shadow:0 24px 70px rgba(8,14,24,.18); animation:teacherComingSoonIn .18s ease; } .teacherComingSoonBadge{ justify-self:center; min-height:30px; display:inline-flex; align-items:center; justify-content:center; padding:7px 12px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .teacherComingSoonCard h2{ margin:2px 0 0; font-size:32px; line-height:1.05; font-weight:950; } .teacherComingSoonCard p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; } .teacherComingSoonSub{ font-size:12px !important; } .teacherComingSoonActions{ display:grid; margin-top:4px; } .teacherComingSoonActions .btn{ width:100%; min-height:46px; } @keyframes teacherComingSoonIn{ from{opacity:0;transform:translateY(6px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} } @media (max-width:768px){ body.mobile-layout #screenHome .homePremiumGrid{ gap:10px; } body.mobile-layout #screenHome :is(.homeMissionCard, .homeQuickActionsCard){ padding:14px; gap:10px; } body.mobile-layout #screenHome .homeMissionContinueBtn{ min-height:46px; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; } body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:46px; padding:10px 8px; align-items:center; justify-content:center; text-align:center; } body.mobile-layout #screenHome .homeSectionHead{ grid-template-columns:1fr; } body.mobile-layout #bottomNav .bottomNavBtn, body.mobile-layout #bottomNav .bottomNavBtn.active{ min-height:48px; grid-template-rows:22px 12px; gap:3px; padding:5px 3px; } body.mobile-layout .teacherComingSoonBack{ align-items:center; padding:18px; } body.mobile-layout .teacherComingSoonCard{ width:min(390px,100%); padding:20px; border-radius:18px; } } @media (max-width:420px){ body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:1fr !important; } } /* Home calm simplification Keep Home focused: continue, progress, quick actions, then More. */ #screenHome{ --home-calm-gap:12px; --home-calm-radius:14px; --home-calm-pad:18px; --home-calm-shadow:0 8px 20px rgba(9,20,36,.07); } #screenHome .homePremiumGrid{ width:min(100%, 780px); max-width:780px; display:grid; grid-template-columns:1fr !important; gap:var(--home-calm-gap); margin:0 auto; align-items:stretch; } #screenHome .card{ box-shadow:var(--home-calm-shadow); border-color:color-mix(in srgb, var(--border) 76%, transparent); transition:transform .14s ease, box-shadow .16s ease, border-color .16s ease; } #screenHome .card:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(9,20,36,.08); } #screenHome :is(.homeMissionCard, .homeProgressIdentityCard, .homeQuickActionsCard, .homeMobileMoreCard, .homeInsightCard, .homeStatsCard, .homeLeaderboardCard, .homeWinnerCard){ grid-column:1 / -1; border-radius:var(--home-calm-radius); padding:var(--home-calm-pad); gap:var(--home-calm-gap); background:var(--card); } #screenHome .homeMissionCard{ order:1; display:grid; min-height:0; padding:22px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%, var(--card) 100%); } #screenHome .homeMissionHeader{ order:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; } #screenHome .homeMissionEyebrow, #screenHome .homeUnifiedPathLabel, #screenHome .homeSectionHead h3{ letter-spacing:.06em; } #screenHome .homeMissionTitle{ margin-top:4px; font-size:clamp(28px, 3.3vw, 38px); line-height:1.06; letter-spacing:0; } #screenHome .homeMissionNextStep{ margin-top:6px; max-width:44ch; font-size:14px; line-height:1.45; } #screenHome .homeMissionStreak{ min-height:32px; padding:7px 10px; border-radius:999px; font-size:11px; box-shadow:none; } #screenHome .homeMissionAction{ order:2; display:grid; grid-template-columns:1fr; gap:0; } #screenHome .homeMissionContinueBtn{ width:100%; min-height:54px; border-radius:var(--dothiro-control-radius); font-size:16px; font-weight:950; } #screenHome .homeUnifiedPath{ order:3; display:grid; gap:8px; padding:12px; border:1px solid var(--border); border-radius:var(--home-calm-radius); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenHome .homeUnifiedPathTop{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; } #screenHome .homeUnifiedPathSummary{ margin-top:3px; color:var(--text); font-size:13px; font-weight:800; line-height:1.4; } #screenHome .homeUnifiedPathCount{ min-height:30px; padding:6px 9px; font-size:11px; } #screenHome .homeUnifiedPathTrack{ height:6px; } #screenHome :is(.homeMissionPulse, .homeMissionTasks, .homeMissionProgress, .homeMissionReward, .homeMissionContinueMeta, .homeHero, .homePathCard){ display:none !important; } #screenHome .homeProgressIdentityCard{ order:2; display:grid !important; min-height:0; } #screenHome .homeProgressIdentityHead{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; } #screenHome .homeProgressIdentityHead h3{ margin:0 0 5px; } #screenHome .homeProgressIdentityTitle{ font-size:20px; line-height:1.15; letter-spacing:0; } #screenHome .homeProgressIdentitySub{ display:none; } #screenHome .homeProgressLevelPill{ min-height:30px; padding:6px 9px; font-size:11px; } #screenHome .homeProgressIdentityRail{ padding:12px; border-radius:var(--home-calm-radius); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenHome .homeProgressIdentityTop{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; } #screenHome .homeProgressIdentityValue{ font-size:20px; letter-spacing:0; } #screenHome .homeProgressMiniTrack{ height:7px; } #screenHome .homeProgressMiniMeta{ font-size:12px; line-height:1.35; } #screenHome .homeProgressStats, #screenHome #homeProgressContinueBtn{ display:none !important; } #screenHome .homeQuickActionsCard{ order:3; display:grid !important; } #screenHome .homeQuickActionsCard .homeSectionHead{ display:grid; grid-template-columns:1fr; gap:0; } #screenHome .homeQuickActionsCard .homeSectionSub, #screenHome .homeQuickActionText{ display:none !important; } #screenHome .homeQuickActionsGrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px; align-items:stretch; } #screenHome .homeQuickActionBtn{ min-height:50px; height:100%; padding:10px 8px; border-radius:var(--dothiro-control-radius); align-items:center; justify-content:center; text-align:center; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); box-shadow:none; white-space:normal; } #screenHome .homeQuickActionLabel{ font-size:13px; line-height:1.15; font-weight:900; } #screenHome .homeMobileMoreCard{ order:4; display:grid !important; padding:14px; } #screenHome .homeMobileMoreCard .homeSectionHead{ display:grid; grid-template-columns:1fr; } #screenHome .homeMobileMoreCard .homeSectionSub{ display:none; } #screenHome .homeMobileMoreGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; } #screenHome .homeMobileMoreGrid .btn{ min-height:42px; width:100%; padding:8px 10px; border-radius:var(--dothiro-control-radius); box-shadow:none; } #screenHome .homeInsightCard, #screenHome .homeStatsCard, #screenHome .homeLeaderboardCard, #screenHome .homeWinnerCard{ order:5; display:none !important; } #screenHome[data-mobile-panel="insight"] .homeInsightCard, #screenHome[data-mobile-panel="stats"] .homeStatsCard, #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard, #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{ display:grid !important; } #screenHome .homeInsightSurface, #screenHome .homeTierRail{ padding:12px; border-radius:var(--home-calm-radius); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenHome .homeInsightMetaGrid, #screenHome .homeStatsGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #screenHome .homeInsightActions, #screenHome .homeStatsUtilityRow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; } #screenHome .homeInsightActions .btn, #screenHome .homeStatsUtilityRow .btn{ width:100%; } @media (max-width:768px){ body.mobile-layout #screenHome{ --home-calm-gap:10px; --home-calm-pad:14px; } body.mobile-layout #screenHome .homePremiumGrid{ width:100%; max-width:none; gap:var(--home-calm-gap); } body.mobile-layout #screenHome :is(.homeMissionCard, .homeProgressIdentityCard, .homeQuickActionsCard, .homeMobileMoreCard, .homeInsightCard, .homeStatsCard, .homeLeaderboardCard, .homeWinnerCard){ padding:var(--home-calm-pad); border-radius:var(--home-calm-radius); } body.mobile-layout #screenHome :is(.homeMissionCard, .homeProgressIdentityCard, .homeQuickActionsCard, .homeMobileMoreCard){ display:grid !important; } body.mobile-layout #screenHome .homeMissionCard{ padding:16px; gap:10px; } body.mobile-layout #screenHome .homeMissionHeader{ grid-template-columns:1fr auto; gap:10px; } body.mobile-layout #screenHome .homeMissionTitle{ font-size:26px; } body.mobile-layout #screenHome .homeMissionNextStep{ font-size:13px; line-height:1.35; } body.mobile-layout #screenHome .homeMissionStreak{ align-self:start; white-space:nowrap; } body.mobile-layout #screenHome .homeMissionContinueBtn{ min-height:48px; } body.mobile-layout #screenHome .homeUnifiedPath{ padding:10px; } body.mobile-layout #screenHome .homeProgressIdentityHead{ grid-template-columns:1fr auto; } body.mobile-layout #screenHome .homeProgressIdentityTitle, body.mobile-layout #screenHome .homeProgressIdentityValue{ font-size:18px; } body.mobile-layout #screenHome .homeQuickActionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; } body.mobile-layout #screenHome .homeQuickActionBtn{ min-height:48px; } body.mobile-layout #screenHome .homeMobileMoreGrid{ gap:8px; } body.mobile-layout #screenHome .homeMobileMoreGrid .btn{ min-height:40px; font-size:12px; } body.mobile-layout #screenHome .homeInsightMetaGrid, body.mobile-layout #screenHome .homeStatsGrid{ grid-template-columns:1fr !important; } } @media (max-width:420px){ body.mobile-layout #screenHome .homeMissionHeader, body.mobile-layout #screenHome .homeProgressIdentityHead, body.mobile-layout #screenHome .homeProgressIdentityTop{ grid-template-columns:1fr; } body.mobile-layout #screenHome .homeMissionStreak, body.mobile-layout #screenHome .homeProgressLevelPill{ justify-self:start; } } /* Settings product polish */ #screenSettings{ --settings-gap:14px; --settings-radius:22px; --settings-inner-radius:16px; } #screenSettings .settingsPageShell, #screenSettings .settingsCleanGrid{ width:min(100%, 860px); margin-inline:auto; } #screenSettings .settingsPageShell{ display:grid; gap:12px; margin-bottom:14px; } #screenSettings .settingsPageIntro{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:2px 2px 0; } #screenSettings .settingsPageIntro h2{ margin:3px 0 0; font-size:clamp(24px, 3vw, 34px); line-height:1.08; letter-spacing:0; } #screenSettings .settingsCleanGrid{ display:grid; grid-template-columns:1fr; gap:var(--settings-gap); justify-content:center; } #screenSettings .settingsStudentStack{ display:grid; gap:var(--settings-gap); min-width:0; } #screenSettings .settingsMobileQuickGrid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:6px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(10px); position:sticky; top:76px; z-index:4; } #screenSettings .settingsMobileQuickGrid .btn{ min-height:42px; border-radius:14px; padding:8px 10px; } #screenSettings .settingsSectionCard{ display:grid; gap:14px; padding:18px; border-radius:var(--settings-radius); box-shadow:none; background:color-mix(in srgb, var(--surface-1, var(--card)) 96%, var(--chip) 4%); } #screenSettings .settingsSectionHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenSettings .settingsSectionHead h3{ margin:3px 0 0; font-size:21px; line-height:1.15; letter-spacing:0; text-transform:none; } #screenSettings .settingsAccountSummary{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; } #screenSettings .settingsAccountAvatar{ width:58px; height:58px; display:grid; place-items:center; border-radius:18px; border:1px solid var(--border); background:color-mix(in srgb, var(--chip) 64%, var(--card) 36%); font-weight:950; letter-spacing:0; } #screenSettings .settingsAccountMain{ display:grid; gap:8px; min-width:0; } #screenSettings .settingsStatusLine{ display:grid; gap:2px; padding:0; border:0; background:transparent; color:var(--muted); font-size:13px; line-height:1.35; font-weight:800; } #screenSettings .settingsStatusLine b{ color:var(--text); font-size:16px; overflow-wrap:anywhere; } #screenSettings .settingsAccountMeta, #screenSettings .settingsActionRow, #screenSettings .settingsSegmentRow, #screenSettings .settingsInlineActions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } #screenSettings .settingsFormGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenSettings .settingsFieldGroup{ display:grid; gap:8px; min-width:0; } #screenSettings .settingsInlineField{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; } #screenSettings .settingsInfoRows{ display:grid; gap:8px; } #screenSettings .settingsInfoRow, #screenSettings .settingsToggleRow, #screenSettings .settingsSubsection, #screenSettings .settingsDangerZone{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--border); border-radius:var(--settings-inner-radius); background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenSettings .settingsInfoRow div, #screenSettings .settingsRowText{ display:grid; gap:3px; min-width:0; } #screenSettings .settingsInfoRow b, #screenSettings .settingsRowText b{ font-size:14px; line-height:1.25; } #screenSettings .settingsInfoRow span, #screenSettings .settingsRowText span{ color:var(--muted); font-size:13px; line-height:1.35; } #screenSettings .settingsInfoRow strong{ font-size:14px; text-align:right; white-space:nowrap; } #screenSettings .settingsAdvancedDetails{ display:grid; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--settings-inner-radius); background:color-mix(in srgb, var(--card) 96%, transparent); } #screenSettings .settingsAdvancedDetails summary{ cursor:pointer; font-weight:900; min-height:34px; display:flex; align-items:center; color:var(--text); } #screenSettings .settingsAdvancedDetails[open]{ gap:14px; } #screenSettings .settingsAdvancedDetails[open] summary{ margin-bottom:10px; } #screenSettings .settingsSectionCard .btn{ border-radius:14px; min-height:44px; white-space:normal; line-height:1.2; display:inline-flex; align-items:center; justify-content:center; text-align:center; } #screenSettings .settingsAccountActions .btn{ min-width:150px; } #screenSettings .settingsDangerZone{ border-color:color-mix(in srgb, var(--bad) 26%, var(--border) 74%); background:color-mix(in srgb, var(--card) 94%, rgba(180,35,24,.08) 6%); } #screenSettings .settingsDangerZone .btn{ min-width:148px; } #screenSettings .teacherSettingsSection{ margin-top:0; } @media (max-width:720px){ #screenSettings .settingsPageIntro{ display:grid; } #screenSettings .settingsMobileQuickGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); top:70px; } #screenSettings .settingsSectionCard{ padding:14px; border-radius:20px; } #screenSettings .settingsSectionHead, #screenSettings .settingsAccountSummary, #screenSettings .settingsFormGrid, #screenSettings .settingsInfoRow, #screenSettings .settingsToggleRow, #screenSettings .settingsSubsection, #screenSettings .settingsDangerZone, #screenSettings .settingsInlineField{ grid-template-columns:1fr; } #screenSettings .settingsInfoRow strong{ text-align:left; } #screenSettings .settingsActionRow .btn, #screenSettings .settingsInlineActions .btn, #screenSettings .settingsSegmentRow .btn, #screenSettings .settingsToggleRow .btn, #screenSettings .settingsDangerZone .btn, #screenSettings .settingsAccountActions .btn{ width:100%; min-height:46px; } } @media (max-width:420px){ #screenSettings .settingsMobileQuickGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Student monthly learning cycle */ #screenStudent .studentMonthlyCard{ display:grid; gap:12px; padding:16px; border:1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius:18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 0%, var(--card) 100%); box-shadow:none; } #screenStudent .studentMonthlyHead{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; } #screenStudent .studentMonthlyEyebrow{ color:var(--muted); font-size:11px; line-height:1.2; font-weight:950; letter-spacing:.08em; text-transform:uppercase; } #screenStudent .studentMonthlyTitle{ margin-top:3px; color:var(--text); font-size:21px; line-height:1.12; font-weight:950; } #screenStudent .studentMonthlyCountdown{ min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--chip) 40%, var(--card) 60%); color:var(--text); font-size:12px; line-height:1.15; font-weight:900; text-align:center; white-space:normal; } #screenStudent .studentMonthlyReviewList{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #screenStudent .studentMonthlyReviewRow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; align-items:center; min-height:82px; padding:12px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentMonthlyReviewRow.isComplete{ border-color:color-mix(in srgb, var(--good) 28%, var(--border) 72%); background:color-mix(in srgb, var(--good) 8%, var(--card) 92%); } #screenStudent .studentMonthlyReviewMain{ display:grid; gap:3px; min-width:0; } #screenStudent .studentMonthlyReviewName{ color:var(--text); font-size:14px; line-height:1.18; font-weight:950; } #screenStudent .studentMonthlyReviewState, #screenStudent .studentMonthlyReviewCount{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:850; } #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewState{ color:var(--good); } #screenStudent .studentMonthlyReviewCount{ justify-self:end; padding:5px 7px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text); font-weight:950; } #screenStudent .studentMonthlyReviewProgress{ grid-column:1 / -1; height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--chip) 44%, var(--card) 56%); } #screenStudent .studentMonthlyReviewFill{ height:100%; border-radius:inherit; background:var(--ring); transition:width .24s ease; } #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewFill{ background:var(--good); } #screenStudent .studentMonthlyExamPanel{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } #screenStudent .studentMonthlyExamPanel.isUnlocked{ border-color:color-mix(in srgb, var(--good) 30%, var(--border) 70%); background:color-mix(in srgb, var(--good) 7%, var(--card) 93%); } #screenStudent .studentMonthlyExamPanel.isPassed{ border-color:color-mix(in srgb, var(--good) 34%, var(--border) 66%); background:color-mix(in srgb, var(--good) 9%, var(--card) 91%); } #screenStudent .studentMonthlyExamCopy{ display:grid; gap:4px; min-width:0; } #screenStudent .studentMonthlyExamStatus{ color:var(--text); font-size:16px; line-height:1.2; font-weight:950; } #screenStudent .studentMonthlyExamMeta, #screenStudent .studentMonthlyPassedMeta{ color:var(--muted); font-size:13px; line-height:1.35; font-weight:800; } #screenStudent .studentMonthlyPassedMeta{ color:var(--good); } #screenStudent .studentMonthlyExamBtn{ min-width:176px; min-height:46px; border-radius:14px; white-space:normal; } #screenStudent .studentMonthlyExamBtn[hidden], #screenStudent .studentMonthlyPassedMeta[hidden]{ display:none !important; } @media (max-width:720px){ #screenStudent .studentMonthlyCard{ padding:14px; border-radius:16px; } #screenStudent .studentMonthlyHead, #screenStudent .studentMonthlyExamPanel{ grid-template-columns:1fr; } #screenStudent .studentMonthlyCountdown{ justify-self:start; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:1fr; } #screenStudent .studentMonthlyReviewRow{ min-height:76px; } #screenStudent .studentMonthlyExamBtn{ width:100%; min-width:0; } } /* Student Monthly Learning Identity refinement */ #screenStudent{ --student-profile-max:760px; --student-refine-gap:10px; --student-refine-pad:14px; --student-refine-radius:16px; --student-refine-shadow:0 8px 18px rgba(9,20,36,.06); } #screenStudent #studentStatsView.studentAnalyticsGrid{ width:min(100%, var(--student-profile-max)); max-width:var(--student-profile-max); gap:var(--student-refine-gap); margin:0 auto; } #screenStudent #studentStatsView > .card{ border-radius:var(--student-refine-radius); border-color:color-mix(in srgb, var(--border) 78%, transparent); box-shadow:var(--student-refine-shadow); } #screenStudent .studentSummaryCard{ padding:var(--student-refine-pad); background:var(--card); } #screenStudent .studentIdentityShell{ gap:var(--student-refine-gap); } #screenStudent .studentIdentityHeader{ padding:10px 6px 4px; gap:8px; background:transparent; border:0; box-shadow:none; } #screenStudent .studentIdentityProfile{ gap:9px; } #screenStudent .studentIdentityAvatar{ width:58px; height:58px; flex-basis:58px; border-radius:18px; font-size:19px; box-shadow:none; } #screenStudent .studentIdentityMeta{ gap:5px; } #screenStudent .studentIdentityName{ color:var(--muted); font-size:15px; line-height:1.15; font-weight:900; } #screenStudent .studentLevelBadge{ max-width:min(100%, 560px); color:var(--text); font-size:clamp(24px, 4.8vw, 31px); line-height:1.08; letter-spacing:0; } #screenStudent .studentIdentitySub{ max-width:440px; font-size:13px; line-height:1.38; font-weight:750; } #screenStudent .studentMonthlyCard, #screenStudent .studentPathLevelCard, #screenStudent .studentXpCard, #screenStudent .studentWeakCard{ border-radius:var(--student-refine-radius); padding:var(--student-refine-pad); border-color:color-mix(in srgb, var(--border) 80%, transparent); background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); box-shadow:none; } #screenStudent .studentMonthlyCard{ gap:10px; border-color:color-mix(in srgb, var(--ring) 18%, var(--border) 82%); background: linear-gradient(180deg, color-mix(in srgb, var(--chip) 9%, var(--card) 91%) 0%, var(--card) 100%); } #screenStudent .studentMonthlyHead{ align-items:center; gap:10px; } #screenStudent .studentMonthlyEyebrow{ font-size:10px; letter-spacing:.07em; } #screenStudent .studentMonthlyTitle, #screenStudent .studentPathLevelName{ font-size:20px; line-height:1.15; letter-spacing:0; } #screenStudent .studentMonthlyCountdown{ min-height:30px; padding:6px 9px; font-size:11px; font-weight:900; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:1fr; gap:7px; } #screenStudent .studentMonthlyReviewRow{ grid-template-columns:minmax(0,1fr) 88px 58px; min-height:48px; gap:6px 10px; padding:9px 10px; border-radius:12px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentMonthlyReviewName{ font-size:14px; line-height:1.2; } #screenStudent .studentMonthlyReviewState, #screenStudent .studentMonthlyReviewCount{ justify-self:end; align-self:center; color:var(--muted); font-size:12px; line-height:1.2; font-weight:900; text-align:right; } #screenStudent .studentMonthlyReviewCount{ min-width:48px; padding:0; border:0; background:transparent; color:var(--text); } #screenStudent .studentMonthlyReviewProgress{ height:5px; margin-top:1px; } #screenStudent .studentMonthlyExamPanel{ min-height:58px; padding:11px; border-radius:13px; gap:10px; } #screenStudent .studentMonthlyExamStatus{ font-size:15px; line-height:1.2; } #screenStudent .studentMonthlyExamMeta, #screenStudent .studentMonthlyPassedMeta{ font-size:12px; line-height:1.32; } #screenStudent .studentMonthlyExamBtn{ min-width:154px; min-height:42px; border-radius:12px; font-size:13px; } #screenStudent .studentPathLevelCard{ gap:11px; } #screenStudent .studentPathLevelTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; } #screenStudent .studentPathLevelTop .studentXpLabel, #screenStudent #studentPathLevelText{ display:none; } #screenStudent #studentPathLevelStatus{ flex:0 0 auto; justify-self:auto; padding:6px 9px; font-size:11px; border-radius:999px; } #screenStudent .studentPathLevelList{ position:relative; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding-top:12px; } #screenStudent .studentPathLevelList::before{ content:""; position:absolute; top:23px; left:9%; right:9%; height:2px; border-radius:999px; background:color-mix(in srgb, var(--border) 68%, var(--chip) 32%); } #screenStudent .studentPathLevelStep{ position:relative; min-height:58px; padding:24px 5px 0; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; opacity:.58; } #screenStudent .studentPathLevelStep::before{ content:""; position:absolute; top:5px; left:50%; width:12px; height:12px; border:2px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%); border-radius:999px; background:var(--card); transform:translateX(-50%); z-index:1; } #screenStudent .studentPathLevelStep.isComplete, #screenStudent .studentPathLevelStep.isCurrent, #screenStudent .studentPathLevelStep.isNext{ background:transparent; border:0; } #screenStudent .studentPathLevelStep.isComplete{ opacity:.86; } #screenStudent .studentPathLevelStep.isComplete::before{ border-color:var(--good); background:var(--good); } #screenStudent .studentPathLevelStep.isCurrent{ opacity:1; transform:none; box-shadow:none; } #screenStudent .studentPathLevelStep.isCurrent::before{ width:16px; height:16px; top:3px; border-color:var(--ring); background:var(--card); box-shadow:0 0 0 4px color-mix(in srgb, var(--chip) 58%, transparent); } #screenStudent .studentPathLevelStep span{ color:var(--muted); font-size:10px; line-height:1.15; letter-spacing:0; text-transform:none; } #screenStudent .studentPathLevelStep b{ margin-top:2px; color:var(--text); font-size:12px; line-height:1.16; } #screenStudent .studentXpCard{ gap:8px; } #screenStudent .studentXpTop{ gap:8px; } #screenStudent .studentXpLabel{ font-size:11px; line-height:1.2; letter-spacing:.04em; text-transform:uppercase; } #screenStudent .studentXpValue{ font-size:15px; line-height:1.2; } #screenStudent .studentXpTrack{ height:7px; } #screenStudent .studentXpMeta{ font-size:12px; line-height:1.3; } #screenStudent .studentIdentityStats{ gap:7px; } #screenStudent .studentIdentityStat{ min-height:56px; padding:8px; border-radius:12px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentIdentityStatValue{ font-size:17px; line-height:1.1; } #screenStudent .studentIdentityStatLabel{ font-size:10px; line-height:1.18; letter-spacing:0; text-transform:none; } #screenStudent .studentWeakCard{ display:grid; gap:9px; padding:12px; } #screenStudent .studentWeakCard h3{ font-size:17px; line-height:1.2; } #screenStudent .studentWeakCard > .hint{ display:none; } #screenStudent .studentWeakList{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } #screenStudent .studentWeakGroup{ min-height:66px; padding:9px; gap:7px; border-radius:12px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentWeakGroupTitle{ font-size:13px; } #screenStudent .studentWeakGroupMeta, #screenStudent .studentWeakItemMeta{ display:none; } #screenStudent .studentWeakChips{ gap:5px; } #screenStudent .studentWeakChip{ padding:5px 7px; border-radius:999px; font-size:11px; font-weight:850; } @media (max-width:680px){ #screenStudent{ --student-refine-gap:9px; --student-refine-pad:12px; --student-refine-radius:15px; } #screenStudent .studentSummaryCard{ padding:12px; } #screenStudent .studentIdentityHeader{ padding:8px 4px 2px; } #screenStudent .studentIdentityAvatar{ width:52px; height:52px; flex-basis:52px; border-radius:16px; font-size:17px; } #screenStudent .studentLevelBadge{ font-size:24px; } #screenStudent .studentIdentitySub{ font-size:12px; } #screenStudent .studentMonthlyHead{ grid-template-columns:1fr; justify-items:start; } #screenStudent .studentMonthlyReviewRow{ grid-template-columns:minmax(0,1fr) 78px 50px; min-height:46px; padding:8px 9px; } #screenStudent .studentMonthlyReviewState, #screenStudent .studentMonthlyReviewCount{ font-size:11px; } #screenStudent .studentMonthlyExamPanel{ grid-template-columns:1fr; } #screenStudent .studentPathLevelTop{ align-items:flex-start; } #screenStudent .studentPathLevelList{ grid-template-columns:1fr; gap:7px; padding:2px 0 0 18px; } #screenStudent .studentPathLevelList::before{ top:10px; left:6px; right:auto; width:2px; height:calc(100% - 20px); } #screenStudent .studentPathLevelStep{ min-height:34px; grid-template-columns:70px minmax(0,1fr); justify-items:start; align-items:center; gap:7px; padding:0 0 0 8px; text-align:left; } #screenStudent .studentPathLevelStep::before{ top:50%; left:-17px; transform:translateY(-50%); } #screenStudent .studentPathLevelStep.isCurrent::before{ top:50%; transform:translateY(-50%); } #screenStudent .studentIdentityStats{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentWeakList{ grid-template-columns:1fr; } } @media (max-width:420px){ #screenStudent .studentMonthlyReviewRow{ grid-template-columns:minmax(0,1fr) auto; } #screenStudent .studentMonthlyReviewCount{ grid-column:2; } #screenStudent .studentMonthlyReviewProgress{ grid-column:1 / -1; } #screenStudent .studentIdentityStats{ grid-template-columns:1fr 1fr 1fr; } #screenStudent .studentIdentityStat{ padding:7px 5px; } } /* Monthly loop merge: checkpoint logic in journey form */ #screenStudent .studentPathLevelCard{ display:none !important; } #screenStudent .studentMonthlyCard{ gap:12px; } #screenStudent .studentMonthlyTitle{ font-size:22px; } #screenStudent .studentMonthlySubtitle{ max-width:430px; margin-top:4px; color:var(--muted); font-size:13px; line-height:1.35; font-weight:750; } #screenStudent .studentMonthlyReviewList{ position:relative; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding-top:10px; } #screenStudent .studentMonthlyReviewList::before{ content:""; position:absolute; top:28px; left:7%; right:7%; height:2px; border-radius:999px; background:color-mix(in srgb, var(--border) 70%, var(--chip) 30%); } #screenStudent .studentMonthlyReviewRow{ position:relative; grid-template-columns:1fr; justify-items:center; align-content:start; min-height:112px; padding:31px 8px 10px; gap:5px; text-align:center; border-radius:14px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); opacity:.72; } #screenStudent .studentMonthlyReviewRow::before{ content:""; position:absolute; top:12px; left:50%; width:12px; height:12px; border:2px solid color-mix(in srgb, var(--border) 68%, var(--text) 32%); border-radius:999px; background:var(--card); transform:translateX(-50%); z-index:1; } #screenStudent .studentMonthlyReviewRow.isComplete{ opacity:1; border-color:color-mix(in srgb, var(--good) 26%, var(--border) 74%); background:color-mix(in srgb, var(--good) 7%, var(--card) 93%); } #screenStudent .studentMonthlyReviewRow.isComplete::before{ border-color:var(--good); background:var(--good); } #screenStudent .studentMonthlyReviewRow.isCurrent{ opacity:1; border-color:color-mix(in srgb, var(--ring) 34%, var(--border) 66%); background:color-mix(in srgb, var(--chip) 18%, var(--card) 82%); } #screenStudent .studentMonthlyReviewRow.isCurrent::before{ top:10px; width:16px; height:16px; border-color:var(--ring); box-shadow:0 0 0 4px color-mix(in srgb, var(--chip) 58%, transparent); } #screenStudent .studentMonthlyReviewRow.isLocked{ opacity:.54; } #screenStudent .studentMonthlyReviewRow.isExam{ border-style:solid; border-color:color-mix(in srgb, var(--ring) 24%, var(--border) 76%); } #screenStudent .studentMonthlyReviewRow.isExam::before{ border-radius:8px; } #screenStudent .studentMonthlyReviewRow.isExam.isCurrent{ background:color-mix(in srgb, var(--good) 8%, var(--card) 92%); border-color:color-mix(in srgb, var(--good) 32%, var(--border) 68%); } #screenStudent .studentMonthlyReviewName{ min-height:32px; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1.18; } #screenStudent .studentMonthlyReviewState{ justify-self:center; color:var(--muted); font-size:11px; line-height:1.15; text-align:center; } #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState, #screenStudent .studentMonthlyReviewRow.isExam.isCurrent .studentMonthlyReviewState{ color:var(--text); } #screenStudent .studentMonthlyReviewCount{ justify-self:center; min-width:0; color:var(--text); font-size:12px; line-height:1.15; text-align:center; } #screenStudent .studentMonthlyReviewProgress{ width:100%; height:5px; margin-top:auto; } #screenStudent .studentMonthlyReviewAction{ min-height:30px; padding:6px 8px; border-radius:10px; font-size:11px; line-height:1; justify-self:center; white-space:nowrap; } #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewProgress, #screenStudent .studentMonthlyReviewRow.isExam .studentMonthlyReviewProgress{ opacity:.5; } #screenStudent .studentMonthlyExamPanel{ background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%); } @media (max-width:680px){ #screenStudent .studentMonthlyReviewList{ grid-template-columns:1fr; gap:7px; padding:2px 0 0 19px; } #screenStudent .studentMonthlyReviewList::before{ top:12px; bottom:14px; left:6px; right:auto; width:2px; height:auto; } #screenStudent .studentMonthlyReviewRow{ grid-template-columns:minmax(0,1fr) 72px 56px 68px; justify-items:stretch; align-items:center; min-height:54px; padding:9px 10px; text-align:left; } #screenStudent .studentMonthlyReviewRow::before{ top:50%; left:-19px; transform:translateY(-50%); } #screenStudent .studentMonthlyReviewRow.isCurrent::before{ top:50%; transform:translateY(-50%); } #screenStudent .studentMonthlyReviewName{ min-height:0; justify-content:flex-start; font-size:13px; } #screenStudent .studentMonthlyReviewState, #screenStudent .studentMonthlyReviewCount{ justify-self:end; text-align:right; } #screenStudent .studentMonthlyReviewProgress{ grid-column:1 / -1; grid-row:2; } #screenStudent .studentMonthlyReviewAction{ grid-column:4; grid-row:1; justify-self:end; align-self:center; min-height:28px; padding:5px 8px; } } @media (max-width:420px){ #screenStudent .studentMonthlyReviewRow{ grid-template-columns:minmax(0,1fr) auto auto; column-gap:6px; } #screenStudent .studentMonthlyReviewState{ grid-column:2; } #screenStudent .studentMonthlyReviewCount{ grid-column:2; grid-row:2; } #screenStudent .studentMonthlyReviewAction{ grid-column:3; grid-row:1 / span 2; align-self:center; } #screenStudent .studentMonthlyReviewProgress{ grid-row:3; } } /* Student monthly review clean-up: review cards with one exam button below. */ #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:10px !important; padding:0 !important; } #screenStudent .studentMonthlyReviewList::before{ content:none !important; display:none !important; } #screenStudent .studentMonthlyReviewRow{ position:relative; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-content:stretch; align-items:center; justify-items:stretch; min-height:126px !important; padding:12px !important; gap:8px 10px !important; text-align:left !important; opacity:1 !important; border-radius:var(--student-inner-radius) !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; } #screenStudent .studentMonthlyReviewRow::before{ content:none !important; display:none !important; } #screenStudent .studentMonthlyReviewName{ grid-column:1 / -1; min-height:0 !important; display:block !important; font-size:14px !important; line-height:1.2 !important; text-align:left !important; } #screenStudent .studentMonthlyReviewState{ grid-column:1; justify-self:start !important; text-align:left !important; font-size:12px !important; } #screenStudent .studentMonthlyReviewCount{ grid-column:2; justify-self:end !important; grid-row:auto !important; text-align:right !important; font-size:12px !important; } #screenStudent .studentMonthlyReviewProgress{ grid-column:1 / -1 !important; grid-row:auto !important; width:100%; height:6px !important; margin-top:2px !important; } #screenStudent .studentMonthlyReviewAction{ grid-column:1 / -1 !important; grid-row:auto !important; justify-self:stretch !important; width:100%; min-height:36px !important; border-radius:12px !important; font-size:12px !important; line-height:1.1 !important; white-space:normal !important; } #screenStudent .studentMonthlyExamPanel{ grid-template-columns:minmax(0,1fr); gap:10px; align-items:stretch; padding:12px; border-radius:var(--student-inner-radius); background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentMonthlyExamPanel.isPassed{ border-color:color-mix(in srgb, var(--good) 24%, var(--border) 76%); background:color-mix(in srgb, var(--good) 6%, var(--card) 94%); } #screenStudent .studentMonthlyExamBtn{ width:100%; min-width:0; min-height:46px; border-radius:14px; justify-content:center; } #screenStudent .studentMonthlyExamBtn:disabled{ opacity:.62; cursor:not-allowed; transform:none; box-shadow:none; } #screenStudent .studentMonthlyPassedMeta{ display:none !important; } @media (max-width:980px){ #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:680px){ #screenStudent .studentMonthlyReviewList{ grid-template-columns:1fr !important; } #screenStudent .studentMonthlyReviewRow{ min-height:96px !important; } } .monthlyCheckpointModalCard{ width:min(560px,96vw); max-height:min(88vh,760px); overflow:auto; } .monthlyCheckpointTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .monthlyCheckpointQuestionShell{ gap:12px; } .monthlyCheckpointPrompt{ color:var(--muted); font-size:13px; font-weight:850; line-height:1.35; } .monthlyCheckpointQuestionText{ min-height:72px; display:flex; align-items:center; justify-content:center; padding:10px; border-radius:14px; background:color-mix(in srgb, var(--chip) 52%, transparent); color:var(--text); font-size:34px; font-weight:950; line-height:1.15; text-align:center; } .monthlyCheckpointReading{ margin-top:-4px; text-align:center; font-weight:750; } .monthlyCheckpointInputRow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; } .monthlyCheckpointInputRow[hidden]{ display:none !important; } .monthlyCheckpointChoices{ margin-top:0; } .monthlyCheckpointNextBtn{ margin-top:10px; margin-left:auto; min-width:104px; } .monthlyCheckpointNextBtn[hidden]{ display:none !important; } .monthlyCheckpointResult{ gap:14px; } .monthlyCheckpointActions{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; } @media (max-width:560px){ .monthlyCheckpointModalCard{ width:96vw; padding:12px; } .monthlyCheckpointTop{ gap:10px; } .monthlyCheckpointQuestionText{ min-height:62px; font-size:28px; } .monthlyCheckpointInputRow{ grid-template-columns:1fr; } .monthlyCheckpointInputRow .btn{ width:100%; } .monthlyCheckpointActions{ flex-direction:column; } .monthlyCheckpointNextBtn{ width:100%; } .monthlyCheckpointActions .btn{ width:100%; } } /* Student dashboard: mobile-first monthly learning loop */ #screenStudent{ --student-mobile-max:560px; --student-mobile-gap:12px; --student-card-pad:16px; --student-card-radius:22px; --student-inner-radius:16px; --student-friendly-green:#3f8f6b; --student-friendly-amber:#f0a44f; --student-friendly-coral:#e66f63; --student-friendly-violet:#7c6bd6; } #screenStudent, #screenStudent *{ box-sizing:border-box; min-width:0; } #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, var(--student-mobile-max)); max-width:var(--student-mobile-max); margin:0 auto; padding:0 2px 18px; display:grid !important; grid-template-columns:1fr !important; gap:var(--student-mobile-gap); align-items:start; } #screenStudent .studentDashboardHeader{ display:grid; gap:2px; padding:4px 4px 0; } #screenStudent .studentDashboardBrand{ color:var(--text); font-family:"Solway", ui-serif, Georgia, serif; font-size:30px; line-height:1; font-weight:950; letter-spacing:0; } #screenStudent .studentDashboardHeader h2{ margin:0; color:var(--muted); font-size:17px; line-height:1.35; font-weight:850; letter-spacing:0; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ width:100%; display:grid; gap:14px; padding:var(--student-card-pad); border:1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius:var(--student-card-radius); background:var(--surface-1); box-shadow:0 12px 24px rgba(12,23,38,.07); overflow:hidden; } #screenStudent #studentStatsView.studentDashboardMobile > .card::before{ content:none !important; display:none !important; } #screenStudent .studentLevelCard{ background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--student-friendly-green) 6%), var(--surface-1)) !important; } #screenStudent .studentLevelProfile{ display:flex; align-items:center; gap:13px; } #screenStudent .studentIdentityAvatar{ width:58px; height:58px; flex:0 0 58px; border-radius:18px; display:grid; place-items:center; background:color-mix(in srgb, var(--student-friendly-amber) 24%, var(--card) 76%); color:var(--text); border:1px solid color-mix(in srgb, var(--student-friendly-amber) 34%, var(--border) 66%); box-shadow:none; font-size:20px; line-height:1; font-weight:950; letter-spacing:0; } #screenStudent .studentLevelCopy{ display:grid; gap:5px; } #screenStudent .studentIdentityName{ margin:0; color:var(--muted); font-size:16px; line-height:1.2; font-weight:900; letter-spacing:0; overflow-wrap:anywhere; } #screenStudent .studentLevelBadge{ width:auto; max-width:100%; padding:0; border:0; border-radius:0; background:transparent; color:var(--text); font-size:28px; line-height:1.08; font-weight:950; letter-spacing:0; overflow-wrap:anywhere; } #screenStudent .studentIdentitySub{ max-width:none; color:var(--muted); font-size:15px; line-height:1.45; font-weight:750; text-align:left; } #screenStudent .studentJlptLevelStrip{ display:grid; grid-template-columns:1fr; gap:8px; } #screenStudent .studentJlptLevel{ min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); color:var(--muted); } #screenStudent .studentJlptLevel.isCurrent{ border-color:color-mix(in srgb, var(--student-friendly-green) 38%, var(--border) 62%); background:color-mix(in srgb, var(--student-friendly-green) 10%, var(--card) 90%); color:var(--text); } #screenStudent .studentJlptLevel b{ color:var(--text); font-size:17px; line-height:1; font-weight:950; } #screenStudent .studentJlptLevel span{ font-size:13px; line-height:1.2; font-weight:850; text-align:right; } #screenStudent #studentHeroContinueBtn, #screenStudent .studentMonthlyReviewAction, #screenStudent .studentMonthlyExamBtn, #screenStudent #badgeHistoryBtn{ width:100%; min-width:0; min-height:48px; border-radius:15px; padding:10px 14px; justify-content:center; font-size:15px; line-height:1.15; font-weight:950; white-space:normal; box-shadow:none; } #screenStudent .studentMonthlyCard{ gap:14px; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--student-friendly-violet) 6%), var(--surface-1)) !important; border-color:color-mix(in srgb, var(--student-friendly-violet) 22%, var(--border) 78%) !important; } #screenStudent .studentMonthlyHead{ display:grid; grid-template-columns:1fr; gap:10px; align-items:start; justify-items:start; } #screenStudent .studentMonthlyEyebrow{ margin:0; color:var(--muted); font-size:12px; line-height:1.2; font-weight:950; letter-spacing:.06em; text-transform:uppercase; } #screenStudent .studentMonthlyTitle{ margin:3px 0 0; color:var(--text); font-size:25px; line-height:1.1; font-weight:950; letter-spacing:0; } #screenStudent .studentMonthlySubtitle{ max-width:none; margin-top:6px; color:var(--muted); font-size:15px; line-height:1.45; font-weight:750; } #screenStudent .studentMonthlyCountdown, #screenStudent .studentProgressMonth{ min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border:1px solid color-mix(in srgb, var(--student-friendly-amber) 36%, var(--border) 64%); border-radius:999px; background:color-mix(in srgb, var(--student-friendly-amber) 14%, var(--card) 86%); color:var(--text); font-size:14px; line-height:1.2; font-weight:950; text-align:center; white-space:normal; } #screenStudent .studentMonthlyReviewList{ width:100%; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; padding:0 !important; } #screenStudent .studentMonthlyReviewList::before{ content:none !important; display:none !important; } #screenStudent .studentMonthlyReviewRow{ width:100%; min-height:0 !important; display:grid !important; grid-template-columns:42px minmax(0,1fr) auto !important; gap:10px 12px !important; align-items:center !important; justify-items:stretch !important; padding:14px !important; border:1px solid var(--border); border-radius:var(--student-inner-radius) !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; opacity:1 !important; text-align:left !important; box-shadow:none; } #screenStudent .studentMonthlyReviewRow::before{ content:none !important; display:none !important; } #screenStudent .studentMonthlyReviewIcon{ grid-column:1; grid-row:1 / span 2; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:14px; background:var(--card); color:var(--text); font-size:17px; line-height:1; font-weight:950; } #screenStudent .studentMonthlyReviewMain{ display:grid; gap:4px; } #screenStudent .studentMonthlyReviewName{ grid-column:auto !important; min-height:0 !important; display:block !important; color:var(--text); font-size:17px !important; line-height:1.18 !important; font-weight:950; text-align:left !important; } #screenStudent .studentMonthlyReviewState{ grid-column:auto !important; justify-self:start !important; color:var(--muted); font-size:14px !important; line-height:1.2; font-weight:850; text-align:left !important; } #screenStudent .studentMonthlyReviewCount{ grid-column:3 !important; grid-row:1 !important; justify-self:end !important; min-width:0; padding:5px 8px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text); font-size:14px !important; line-height:1.1; font-weight:950; text-align:right !important; } #screenStudent .studentMonthlyReviewProgress{ grid-column:2 / 4 !important; grid-row:2 !important; width:100%; height:8px !important; margin:0 !important; border-radius:999px; background:color-mix(in srgb, var(--chip) 56%, var(--card) 44%); overflow:hidden; } #screenStudent .studentMonthlyReviewFill{ height:100%; border-radius:inherit; background:var(--student-friendly-violet); } #screenStudent .studentMonthlyReviewAction{ grid-column:1 / -1 !important; grid-row:3 !important; justify-self:stretch !important; margin-top:2px; } #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:color-mix(in srgb, var(--student-friendly-violet) 46%, var(--border) 54%); background:color-mix(in srgb, var(--student-friendly-violet) 12%, var(--card) 88%) !important; box-shadow:0 10px 20px rgba(12,23,38,.08); } #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewIcon{ border-color:color-mix(in srgb, var(--student-friendly-violet) 50%, var(--border) 50%); background:color-mix(in srgb, var(--student-friendly-violet) 18%, var(--card) 82%); } #screenStudent .studentMonthlyReviewRow.isComplete{ border-color:color-mix(in srgb, var(--student-friendly-green) 42%, var(--border) 58%); background:color-mix(in srgb, var(--student-friendly-green) 9%, var(--card) 91%) !important; } #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewIcon, #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewFill{ background:var(--student-friendly-green); color:white; border-color:var(--student-friendly-green); } #screenStudent .studentMonthlyReviewRow.isLocked{ opacity:.58 !important; filter:saturate(.82); } #screenStudent .studentMonthlyReviewAction:disabled, #screenStudent .studentMonthlyExamBtn:disabled{ opacity:.72; cursor:not-allowed; filter:saturate(.72); transform:none; box-shadow:none; } #screenStudent .studentMonthlyExamPanel{ display:grid; grid-template-columns:1fr !important; gap:12px; align-items:stretch; padding:16px; border:1px solid color-mix(in srgb, var(--student-friendly-amber) 34%, var(--border) 66%); border-radius:20px; background:color-mix(in srgb, var(--student-friendly-amber) 10%, var(--card) 90%) !important; } #screenStudent .studentMonthlyExamPanel.isLocked{ opacity:.78; } #screenStudent .studentMonthlyExamPanel.isUnlocked{ border-color:color-mix(in srgb, var(--student-friendly-green) 48%, var(--border) 52%); background:color-mix(in srgb, var(--student-friendly-green) 11%, var(--card) 89%) !important; box-shadow:0 12px 22px rgba(12,23,38,.08); } #screenStudent .studentMonthlyExamPanel.isPassed{ border-color:color-mix(in srgb, var(--student-friendly-green) 52%, var(--border) 48%); background:color-mix(in srgb, var(--student-friendly-green) 13%, var(--card) 87%) !important; } #screenStudent .studentMonthlyExamCopy{ display:grid; gap:5px; } #screenStudent .studentMonthlyExamStatus{ color:var(--text); font-size:20px; line-height:1.18; font-weight:950; } #screenStudent .studentMonthlyExamMeta, #screenStudent .studentMonthlyPassedMeta{ color:var(--muted); font-size:15px; line-height:1.4; font-weight:750; } #screenStudent .studentProgressHistoryCard h3{ margin:3px 0 0; color:var(--text); font-size:22px; line-height:1.15; font-weight:950; letter-spacing:0; } #screenStudent .studentProgressHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; } #screenStudent .studentProgressMonth{ flex-direction:column; align-items:flex-end; gap:1px; min-height:44px; } #screenStudent .studentProgressMonth span{ color:var(--muted); font-size:11px; line-height:1; font-weight:900; } #screenStudent .studentProgressMonth b{ font-size:14px; line-height:1.1; font-weight:950; } #screenStudent .studentXpCard{ display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:var(--student-inner-radius); background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentXpTop{ display:grid; gap:5px; } #screenStudent .studentXpLabel{ margin:0; color:var(--muted); font-size:13px; line-height:1.25; font-weight:900; letter-spacing:0; text-transform:none; } #screenStudent .studentXpValue{ color:var(--text); font-size:20px; line-height:1.1; font-weight:950; } #screenStudent .studentXpTrack{ width:100%; height:10px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--chip) 55%, var(--card) 45%); border:0; } #screenStudent .studentXpFill{ height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--student-friendly-green), var(--student-friendly-violet)); transition:width .24s ease; } #screenStudent .studentXpMeta{ color:var(--muted); font-size:13px; line-height:1.35; font-weight:750; } #screenStudent .studentProgressStats, #screenStudent .studentHistoryMini{ display:grid; grid-template-columns:1fr; gap:8px; } #screenStudent .studentProgressStat, #screenStudent .studentHistoryMiniRow{ min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--card); } #screenStudent .studentProgressStat span, #screenStudent .studentHistoryMiniRow span, #screenStudent .studentBadgeTop span{ color:var(--muted); font-size:13px; line-height:1.2; font-weight:850; } #screenStudent .studentProgressStat b, #screenStudent .studentHistoryMiniRow b, #screenStudent .studentBadgeTop b{ color:var(--text); font-size:18px; line-height:1.1; font-weight:950; text-align:right; } #screenStudent .studentBadgePanel{ display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:var(--student-inner-radius); background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentBadgeTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; } #screenStudent .miniList{ display:flex; flex-wrap:wrap; gap:8px; } #screenStudent .miniTag{ min-height:34px; display:inline-flex; align-items:center; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text); font-size:13px; line-height:1.2; font-weight:850; } #screenStudent .badgeHistory{ display:grid; gap:8px; margin-top:0; } #screenStudent .badgeHistory[hidden], #screenStudent .studentMonthlyPassedMeta[hidden]{ display:none !important; } #screenStudent .badgeHistory .listItem{ padding:10px 12px; border-radius:14px; background:var(--card); } @media (max-width:420px){ #screenStudent{ --student-card-pad:14px; --student-card-radius:20px; } #screenStudent .studentDashboardBrand{ font-size:28px; } #screenStudent .studentLevelBadge{ font-size:25px; } #screenStudent .studentLevelProfile{ align-items:flex-start; } #screenStudent .studentMonthlyReviewRow{ grid-template-columns:38px minmax(0,1fr) auto !important; padding:12px !important; } #screenStudent .studentMonthlyReviewIcon{ width:38px; height:38px; } #screenStudent .studentMonthlyReviewName{ font-size:16px !important; } #screenStudent .studentMonthlyReviewCount{ font-size:13px !important; } } /* Student dashboard responsive redesign */ #screenStudent{ --student-dashboard-max:1180px; --student-dashboard-gap:18px; --student-soft-shadow:0 12px 26px rgba(12,23,38,.07); } #screenStudent .studentMonthlyStatusCard, #screenStudent .studentMonthlyJourneyPath{ display:none !important; } #screenStudent .studentMonthlyStatusHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenStudent .studentMonthlyStatusHead h3{ margin:3px 0 0; color:var(--text); font-size:24px; line-height:1.12; font-weight:950; letter-spacing:0; } #screenStudent .studentMonthlyStatusBadge{ min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--student-friendly-amber) 14%, var(--card) 86%); color:var(--text); font-size:12px; line-height:1.15; font-weight:950; text-align:center; white-space:normal; } #screenStudent .studentMonthlyStatusBadge.isUnlocked, #screenStudent .studentMonthlyStatusBadge.isComplete{ border-color:color-mix(in srgb, var(--student-friendly-green) 42%, var(--border) 58%); background:color-mix(in srgb, var(--student-friendly-green) 12%, var(--card) 88%); } #screenStudent .studentMonthlyStatusBadge.isSoon{ background:color-mix(in srgb, var(--chip) 52%, var(--card) 48%); } #screenStudent .studentMonthlyStatusGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenStudent .studentMonthlyStatusMetric, #screenStudent .studentMonthlyNextAction{ display:grid; gap:5px; min-height:78px; padding:12px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentMonthlyStatusMetric span, #screenStudent .studentMonthlyNextAction span{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:850; } #screenStudent .studentMonthlyStatusMetric b, #screenStudent .studentMonthlyNextAction b{ color:var(--text); font-size:19px; line-height:1.15; font-weight:950; letter-spacing:0; } #screenStudent .studentMonthlyNextAction{ min-height:0; } #screenStudent #studentMonthlyNextActionBtn{ width:100%; min-height:46px; border-radius:14px; white-space:normal; } #screenStudent .studentMonthlyJourneyPath{ position:relative; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:10px 4px 4px; } #screenStudent .studentMonthlyJourneyPath::before{ content:""; position:absolute; top:31px; left:9%; right:9%; height:2px; border-radius:999px; background:color-mix(in srgb, var(--border) 58%, var(--chip) 42%); } #screenStudent .studentMonthlyJourneyStep{ position:relative; z-index:1; display:grid; justify-items:center; gap:5px; min-height:94px; padding:0 6px; text-align:center; color:var(--muted); } #screenStudent .studentMonthlyJourneyDot{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text); font-size:14px; line-height:1; font-weight:950; box-shadow:0 0 0 5px color-mix(in srgb, var(--card) 82%, transparent); } #screenStudent .studentMonthlyJourneyLabel{ color:var(--text); font-size:13px; line-height:1.18; font-weight:950; } #screenStudent .studentMonthlyJourneyState{ max-width:132px; color:var(--muted); font-size:11px; line-height:1.25; font-weight:800; } #screenStudent .studentMonthlyJourneyStep.isCurrent .studentMonthlyJourneyDot, #screenStudent .studentMonthlyJourneyStep.isExam.isCurrent .studentMonthlyJourneyDot{ border-color:color-mix(in srgb, var(--student-friendly-violet) 54%, var(--border) 46%); background:color-mix(in srgb, var(--student-friendly-violet) 16%, var(--card) 84%); box-shadow:0 0 0 5px color-mix(in srgb, var(--student-friendly-violet) 14%, transparent); } #screenStudent .studentMonthlyJourneyStep.isComplete .studentMonthlyJourneyDot{ border-color:var(--student-friendly-green); background:var(--student-friendly-green); color:#fff; } #screenStudent .studentMonthlyJourneyStep.isLocked{ opacity:.62; } @media (min-width:1025px){ #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, var(--student-dashboard-max)) !important; max-width:var(--student-dashboard-max) !important; margin:0 auto !important; padding:0 0 34px !important; display:grid !important; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr) !important; gap:var(--student-dashboard-gap) !important; align-items:start; } #screenStudent .studentDashboardHeader{ grid-column:1 / -1; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:2px 2px 0; } #screenStudent .studentDashboardBrand{ font-size:36px; } #screenStudent .studentDashboardHeader h2{ font-size:18px; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ gap:16px; padding:18px; border-radius:18px; box-shadow:var(--student-soft-shadow); } #screenStudent .studentLevelCard{ grid-column:1; min-height:202px; grid-template-columns:minmax(0,1fr) auto; align-items:center; background:linear-gradient(135deg, color-mix(in srgb, var(--card) 95%, var(--student-friendly-green) 5%), var(--surface-1)) !important; } #screenStudent .studentMonthlyStatusCard{ display:grid !important; grid-column:2; min-height:202px; align-content:start; } #screenStudent .studentLevelProfile{ align-items:center; gap:16px; } #screenStudent .studentIdentityAvatar{ width:64px; height:64px; flex-basis:64px; border-radius:18px; } #screenStudent .studentIdentityName{ font-size:15px; } #screenStudent .studentLevelBadge{ font-size:31px; } #screenStudent .studentIdentitySub{ max-width:520px; font-size:14px; } #screenStudent #studentHeroContinueBtn{ width:auto; min-width:190px; align-self:center; justify-self:end; } #screenStudent .studentMonthlyCard{ grid-column:1 / -1; gap:18px; padding:20px; border-radius:20px; } #screenStudent .studentMonthlyHead{ grid-template-columns:minmax(0,1fr) auto !important; align-items:start; justify-items:stretch; } #screenStudent .studentMonthlyTitle{ font-size:30px; } #screenStudent .studentMonthlySubtitle{ max-width:610px; font-size:14px; } #screenStudent .studentMonthlyCountdown{ justify-self:end; } #screenStudent .studentMonthlyJourneyPath{ display:grid !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:172px !important; grid-template-columns:44px minmax(0,1fr) auto !important; align-content:start !important; padding:14px !important; border-radius:16px !important; } #screenStudent .studentMonthlyReviewIcon{ width:44px; height:44px; } #screenStudent .studentMonthlyReviewName{ font-size:16px !important; } #screenStudent .studentMonthlyReviewState, #screenStudent .studentMonthlyReviewCount{ font-size:13px !important; } #screenStudent .studentMonthlyReviewAction{ min-height:42px; } #screenStudent .studentMonthlyExamPanel{ grid-template-columns:minmax(0,1fr) auto !important; align-items:center; min-height:118px; padding:18px; border-radius:18px; } #screenStudent .studentMonthlyExamStatus{ font-size:22px; } #screenStudent .studentMonthlyExamBtn{ width:auto; min-width:190px; } #screenStudent .studentProgressHistoryCard{ grid-column:1 / -1; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); align-items:start; } #screenStudent .studentProgressHead, #screenStudent .studentXpCard{ grid-column:1; } #screenStudent .studentProgressStats, #screenStudent .studentHistoryMini, #screenStudent .studentJlptLevelStrip, #screenStudent .studentBadgePanel{ grid-column:2; } #screenStudent .studentProgressStats{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentHistoryMini{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentJlptLevelStrip{ grid-template-columns:repeat(5,minmax(0,1fr)); } #screenStudent .studentJlptLevel{ min-height:70px; flex-direction:column; align-items:flex-start; } #screenStudent .studentBadgePanel{ align-self:stretch; } #screenStudent #badgeHistoryBtn{ width:auto; justify-self:start; } } @media (min-width:769px) and (max-width:1024px){ #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 940px) !important; max-width:940px !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; } #screenStudent .studentDashboardHeader, #screenStudent .studentMonthlyCard, #screenStudent .studentProgressHistoryCard{ grid-column:1 / -1; } #screenStudent .studentMonthlyStatusCard{ display:grid !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ border-radius:18px; } #screenStudent .studentMonthlyHead{ grid-template-columns:minmax(0,1fr) auto !important; } #screenStudent .studentMonthlyJourneyPath{ display:grid !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #screenStudent .studentMonthlyReviewRow{ min-height:148px !important; } #screenStudent .studentMonthlyExamPanel{ grid-template-columns:minmax(0,1fr) auto !important; } #screenStudent .studentMonthlyExamBtn{ width:auto; min-width:170px; } } /* Student dashboard cleanup: concise cards and hidden history details */ #screenStudent #studentHeroContinueBtn, #screenStudent .studentMonthlyJourneyPath, #screenStudent .studentMonthlyExamPanel, #screenStudent .studentProgressMonth{ display:none !important; } #screenStudent .studentMonthlyStatusCard, #screenStudent .studentN5ProgressCard, #screenStudent .studentProgressHistoryCard{ display:grid !important; align-content:start; gap:14px; } #screenStudent .studentIdentitySub{ font-size:14px; line-height:1.35; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:1fr !important; } #screenStudent .studentMonthlyReviewRow.isExam{ border-color:color-mix(in srgb, var(--student-friendly-amber) 36%, var(--border) 64%); background:color-mix(in srgb, var(--student-friendly-amber) 10%, var(--card) 90%) !important; } #screenStudent .studentMonthlyReviewRow.isExam.isCurrent{ border-color:color-mix(in srgb, var(--student-friendly-green) 46%, var(--border) 54%); background:color-mix(in srgb, var(--student-friendly-green) 10%, var(--card) 90%) !important; } #screenStudent .studentMonthlyReviewRow:not(.isCurrent) .studentMonthlyReviewAction{ display:none !important; } #screenStudent .studentProgressHead{ align-items:flex-start; } #screenStudent .studentProgressHead h3, #screenStudent .studentN5ProgressCard h3{ margin:3px 0 0; color:var(--text); font-size:24px; line-height:1.12; font-weight:950; letter-spacing:0; } #screenStudent .studentXpCard{ min-height:114px; } #screenStudent .studentXpLabel{ text-transform:none; letter-spacing:0; } #screenStudent .studentXpTrack{ height:10px; } #screenStudent .studentHistoryMini{ display:grid; grid-template-columns:1fr; gap:10px; } #screenStudent .studentMonthlyHistoryBtn{ width:100%; min-height:46px; border-radius:14px; white-space:normal; } #screenStudent .studentMonthlyHistoryPanel{ display:grid; gap:12px; padding:14px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentMonthlyHistoryPanel[hidden]{ display:none !important; } #screenStudent .studentMonthlyHistorySelectLabel{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:900; } #screenStudent .studentMonthlyHistorySelect{ width:100%; min-width:0; border-radius:14px; } #screenStudent .studentMonthlyHistorySummary{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #screenStudent .studentMonthlyHistoryRow{ min-height:54px; display:grid; gap:4px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--card); } #screenStudent .studentMonthlyHistoryRow span{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:850; } #screenStudent .studentMonthlyHistoryRow b{ color:var(--text); font-size:16px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyHistoryBadges .hint{ min-height:38px; display:flex; align-items:center; color:var(--muted); font-size:13px; font-weight:850; } @media (min-width:1025px){ #screenStudent #studentStatsView.studentDashboardMobile{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; } #screenStudent .studentLevelCard, #screenStudent .studentMonthlyStatusCard{ min-height:218px; padding:20px !important; border-radius:18px !important; } #screenStudent .studentLevelCard{ grid-column:1 !important; } #screenStudent .studentMonthlyStatusCard{ grid-column:2 !important; } #screenStudent .studentMonthlyCard{ grid-column:1 / -1 !important; padding:20px !important; border-radius:18px !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:12px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:142px !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto 1fr auto; padding:14px !important; } #screenStudent .studentMonthlyReviewIcon{ grid-column:1 / -1; grid-row:1; } #screenStudent .studentMonthlyReviewMain{ grid-column:1 / -1; grid-row:2; } #screenStudent .studentMonthlyReviewCount{ grid-column:1 / -1 !important; grid-row:3 !important; justify-self:start !important; } #screenStudent .studentMonthlyReviewProgress{ grid-column:1 / -1 !important; grid-row:4 !important; } #screenStudent .studentMonthlyReviewAction{ grid-column:1 / -1 !important; grid-row:5 !important; min-height:40px; } #screenStudent .studentN5ProgressCard, #screenStudent .studentProgressHistoryCard{ grid-column:auto !important; min-height:360px; padding:20px !important; border-radius:18px !important; } #screenStudent .studentProgressStats{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentJlptLevelStrip{ grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:auto; } #screenStudent .studentJlptLevel{ min-height:70px; flex-direction:column; align-items:flex-start; justify-content:center; } #screenStudent .studentHistoryMini{ grid-template-columns:repeat(3,minmax(0,1fr)); } #screenStudent .studentMonthlyHistoryBtn{ align-self:end; } } @media (min-width:769px) and (max-width:1024px){ #screenStudent .studentLevelCard, #screenStudent .studentMonthlyStatusCard, #screenStudent .studentN5ProgressCard, #screenStudent .studentProgressHistoryCard{ grid-column:auto !important; } #screenStudent .studentMonthlyCard{ grid-column:1 / -1 !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #screenStudent .studentN5ProgressCard{ grid-column:1 !important; } #screenStudent .studentProgressHistoryCard{ grid-column:2 !important; } #screenStudent .studentJlptLevelStrip{ grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (max-width:768px){ #screenStudent #studentStatsView.studentDashboardMobile{ max-width:560px !important; } #screenStudent .studentMonthlyStatusCard, #screenStudent .studentN5ProgressCard, #screenStudent .studentProgressHistoryCard{ padding:14px !important; border-radius:20px !important; } #screenStudent .studentMonthlyStatusHead h3, #screenStudent .studentProgressHead h3, #screenStudent .studentN5ProgressCard h3{ font-size:22px; } #screenStudent .studentMonthlyStatusGrid, #screenStudent .studentProgressStats{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenStudent .studentProgressStats .studentProgressStat:nth-child(3), #screenStudent .studentHistoryMini, #screenStudent .studentJlptLevelStrip{ display:none !important; } #screenStudent .studentMonthlyReviewRow{ min-height:0 !important; } #screenStudent .studentMonthlyHistorySummary{ grid-template-columns:1fr; } } /* Student dashboard: focused monthly learning view */ #screenStudent .studentDashboardHeader, #screenStudent .studentMonthlyStatusCard, #screenStudent .studentN5ProgressCard, #screenStudent #studentHeroContinueBtn, #screenStudent .studentMonthlyJourneyPath, #screenStudent .studentMonthlyExamPanel, #screenStudent .studentHistoryMini{ display:none !important; } #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 1040px) !important; max-width:1040px !important; margin:0 auto !important; display:grid !important; grid-template-columns:1fr !important; gap:18px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:20px !important; border-radius:20px !important; box-shadow:0 12px 26px rgba(12,23,38,.06); } #screenStudent .studentLevelCard, #screenStudent .studentMonthlyCard, #screenStudent .studentProgressHistoryCard{ grid-column:1 / -1 !important; } #screenStudent .studentLevelCard{ min-height:150px !important; grid-template-columns:1fr !important; align-items:center; background:linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, var(--student-friendly-green) 4%), var(--surface-1)) !important; } #screenStudent .studentLevelProfile{ align-items:center; gap:16px; } #screenStudent .studentIdentityAvatar{ width:64px; height:64px; flex-basis:64px; border-radius:18px; } #screenStudent .studentIdentityName{ font-size:14px; text-transform:none; } #screenStudent .studentLevelBadge{ font-size:30px; line-height:1.08; } #screenStudent .studentIdentitySub{ font-size:15px; } #screenStudent .studentMonthlyCard{ gap:16px; } #screenStudent .studentMonthlyHead{ grid-template-columns:1fr !important; gap:4px; } #screenStudent .studentMonthlyTitle{ font-size:30px; line-height:1.1; } #screenStudent .studentMonthlySubtitle{ margin-top:2px; color:var(--muted); font-size:16px; line-height:1.35; font-weight:850; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:12px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:146px !important; display:grid !important; grid-template-columns:44px minmax(0,1fr) !important; grid-template-rows:auto auto 1fr auto; align-content:start !important; gap:8px 10px !important; padding:14px !important; border-radius:16px !important; } #screenStudent .studentMonthlyReviewIcon{ grid-column:1; grid-row:1; width:42px; height:42px; border-radius:14px; } #screenStudent .studentMonthlyReviewMain{ grid-column:2; grid-row:1; align-self:center; } #screenStudent .studentMonthlyReviewName{ font-size:16px !important; } #screenStudent .studentMonthlyReviewState{ font-size:13px !important; } #screenStudent .studentMonthlyReviewCount{ grid-column:1 / -1 !important; grid-row:2 !important; justify-self:start !important; font-size:13px !important; } #screenStudent .studentMonthlyReviewProgress{ grid-column:1 / -1 !important; grid-row:3 !important; align-self:end; } #screenStudent .studentMonthlyReviewAction{ grid-column:1 / -1 !important; grid-row:4 !important; min-height:40px; } #screenStudent .studentProgressHistoryCard{ gap:16px; } #screenStudent .studentProgressHead h3{ font-size:28px; } #screenStudent .studentHistoryPreview, #screenStudent .studentMonthlyHistoryList{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #screenStudent .studentHistoryMonthCard{ min-height:134px; display:grid; gap:10px; align-content:start; padding:15px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentHistoryMonthCard.is-complete{ border-color:color-mix(in srgb, var(--student-friendly-green) 36%, var(--border) 64%); background:color-mix(in srgb, var(--student-friendly-green) 9%, var(--card) 91%); } #screenStudent .studentHistoryMonthCard.is-no-data{ opacity:.74; } #screenStudent .studentHistoryMonthTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } #screenStudent .studentHistoryMonthTop b{ color:var(--text); font-size:18px; line-height:1.15; font-weight:950; } #screenStudent .studentHistoryMonthTop span{ min-height:28px; display:inline-flex; align-items:center; justify-content:center; padding:5px 8px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); font-size:12px; line-height:1.1; font-weight:900; text-align:center; } #screenStudent .studentHistoryMonthPoints{ color:var(--text); font-size:24px; line-height:1; font-weight:950; } #screenStudent .studentHistoryMonthExam{ color:var(--muted); font-size:13px; line-height:1.25; font-weight:850; } #screenStudent .studentMonthlyHistoryPanel{ padding:0; border:0; background:transparent; } #screenStudent .studentMonthlyHistoryBtn{ width:auto; justify-self:start; min-width:160px; } @media (max-width:768px){ #screenStudent #studentStatsView.studentDashboardMobile{ max-width:560px !important; gap:12px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:15px !important; border-radius:20px !important; } #screenStudent .studentLevelCard{ min-height:0 !important; } #screenStudent .studentLevelProfile{ align-items:flex-start; gap:12px; } #screenStudent .studentIdentityAvatar{ width:54px; height:54px; flex-basis:54px; border-radius:16px; } #screenStudent .studentLevelBadge{ font-size:24px; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ font-size:24px; } #screenStudent .studentMonthlySubtitle{ font-size:14px; } #screenStudent .studentMonthlyReviewList, #screenStudent .studentMonthlyHistoryList{ grid-template-columns:1fr !important; } #screenStudent .studentMonthlyReviewRow{ min-height:0 !important; grid-template-columns:42px minmax(0,1fr) auto !important; grid-template-rows:auto auto auto; } #screenStudent .studentMonthlyReviewIcon{ grid-column:1; grid-row:1 / span 2; } #screenStudent .studentMonthlyReviewMain{ grid-column:2; grid-row:1; } #screenStudent .studentMonthlyReviewCount{ grid-column:3 !important; grid-row:1 !important; justify-self:end !important; } #screenStudent .studentMonthlyReviewProgress{ grid-column:2 / 4 !important; grid-row:2 !important; } #screenStudent .studentMonthlyReviewAction{ grid-column:1 / -1 !important; grid-row:3 !important; } #screenStudent .studentHistoryPreview{ grid-template-columns:1fr; } #screenStudent .studentHistoryPreview .studentHistoryMonthCard:nth-child(n+2){ display:none; } #screenStudent .studentHistoryMonthCard{ min-height:118px; } #screenStudent .studentMonthlyHistoryBtn{ width:100%; } } /* Monthly archive modal */ #screenStudent .studentProgressHistorySubtitle, #screenStudent .studentMonthlyHistoryModalSub{ margin-top:5px; color:var(--muted); font-size:14px; line-height:1.35; font-weight:800; } #screenStudent .studentHistoryMonthCard{ appearance:none; width:100%; color:inherit; text-align:left; cursor:pointer; transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease; } #screenStudent .studentHistoryMonthCard:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(12,23,38,.08); } #screenStudent .studentHistoryMonthCard.isSelected{ border-color:color-mix(in srgb, var(--student-friendly-violet) 44%, var(--border) 56%); box-shadow:0 0 0 3px color-mix(in srgb, var(--student-friendly-violet) 16%, transparent); } #screenStudent .studentHistoryMonthCard.is-in-progress{ border-color:color-mix(in srgb, var(--student-friendly-amber) 36%, var(--border) 64%); background:color-mix(in srgb, var(--student-friendly-amber) 8%, var(--card) 92%); } #screenStudent .studentHistoryMonthCard.is-no-data{ background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); } #screenStudent .studentMonthlyHistoryPanel{ position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(9,18,30,.38); backdrop-filter:blur(8px); } #screenStudent .studentMonthlyHistoryPanel[hidden]{ display:none !important; } #screenStudent .studentMonthlyHistorySheet{ width:min(940px, 96vw); max-height:min(84vh, 780px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:16px; padding:20px; border:1px solid color-mix(in srgb, var(--border) 84%, transparent); border-radius:22px; background:var(--surface-1); box-shadow:0 24px 60px rgba(7,15,28,.22); overflow:hidden; } #screenStudent .studentMonthlyHistoryModalHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } #screenStudent .studentMonthlyHistoryModalHead h3{ margin:3px 0 0; color:var(--text); font-size:28px; line-height:1.1; font-weight:950; } #screenStudent .studentMonthlyHistoryCloseBtn{ flex:0 0 auto; border-radius:14px; } #screenStudent .studentMonthlyHistoryArchive{ min-height:0; display:grid; grid-template-columns:minmax(280px,.95fr) minmax(320px,1.05fr); gap:16px; } #screenStudent .studentMonthlyHistoryList{ min-height:0; display:grid; grid-template-columns:1fr; gap:14px; overflow:auto; padding-right:4px; } #screenStudent .studentMonthlyHistoryYearGroup{ display:grid; gap:9px; } #screenStudent .studentMonthlyHistoryYearGroup h4{ margin:0; color:var(--muted); font-size:12px; line-height:1.2; font-weight:950; letter-spacing:.06em; text-transform:uppercase; } #screenStudent .studentMonthlyHistoryYearGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthCard{ min-height:116px; padding:12px; border-radius:16px; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthTop{ display:grid; gap:7px; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthTop b{ font-size:16px; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthTop span{ justify-self:start; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthPoints{ font-size:20px; } #screenStudent .studentMonthlyHistoryDetail{ min-height:0; display:grid; align-content:start; gap:16px; padding:18px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%); overflow:auto; } #screenStudent .studentMonthlyDetailHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #screenStudent .studentMonthlyDetailMonth{ color:var(--text); font-size:30px; line-height:1.05; font-weight:950; } #screenStudent .studentMonthlyDetailStatus{ display:inline-flex; align-items:center; margin-top:10px; min-height:30px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); font-size:13px; line-height:1.1; font-weight:900; } #screenStudent .studentMonthlyDetailGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenStudent .studentMonthlyDetailMetric{ min-height:78px; display:grid; gap:5px; align-content:center; padding:12px; border:1px solid var(--border); border-radius:15px; background:var(--card); } #screenStudent .studentMonthlyDetailMetric span{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:850; } #screenStudent .studentMonthlyDetailMetric b{ color:var(--text); font-size:18px; line-height:1.15; font-weight:950; } @media (max-width:768px){ #screenStudent .studentHistoryPreview{ display:flex; grid-template-columns:none; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; margin:0 -2px; } #screenStudent .studentHistoryPreview .studentHistoryMonthCard{ display:grid; min-width:82%; scroll-snap-align:start; } #screenStudent .studentHistoryPreview .studentHistoryMonthCard:nth-child(n+2){ display:grid; } #screenStudent .studentMonthlyHistoryPanel{ align-items:flex-end; padding:0; background:rgba(9,18,30,.44); } #screenStudent .studentMonthlyHistorySheet{ width:100%; max-height:88vh; border-radius:24px 24px 0 0; padding:16px; } #screenStudent .studentMonthlyHistoryModalHead{ gap:12px; } #screenStudent .studentMonthlyHistoryModalHead h3{ font-size:24px; } #screenStudent .studentMonthlyHistoryArchive{ grid-template-columns:1fr; overflow:auto; } #screenStudent .studentMonthlyHistoryList{ overflow:visible; padding-right:0; } #screenStudent .studentMonthlyHistoryYearGrid{ grid-template-columns:1fr; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthCard{ min-height:82px; grid-template-columns:minmax(0,1fr) auto; align-items:center; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthPoints{ justify-self:end; font-size:18px; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthExam{ grid-column:1 / -1; } #screenStudent .studentMonthlyHistoryDetail{ padding:14px; } #screenStudent .studentMonthlyDetailMonth{ font-size:24px; } #screenStudent .studentMonthlyDetailGrid{ grid-template-columns:1fr; } } /* Study level chooser */ #screenStudent .studentStudyLevelCard{ display:grid; gap:14px; align-content:center; min-height:150px; background:linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, var(--student-friendly-violet) 4%), var(--surface-1)) !important; } #screenStudent .studentStudyLevelCard h3{ margin:3px 0 0; color:var(--text); font-size:30px; line-height:1.08; font-weight:950; letter-spacing:0; } #screenStudent .studentStudyLevelSub, #screenStudent .studentStudyLevelModalSub{ margin-top:5px; color:var(--muted); font-size:14px; line-height:1.35; font-weight:800; } #screenStudent .studentStudyLevelBtn{ width:100%; min-height:46px; border-radius:14px; white-space:normal; } #screenStudent .studentStudyLevelPanel{ position:fixed; inset:0; z-index:230; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(9,18,30,.38); backdrop-filter:blur(8px); } #screenStudent .studentStudyLevelPanel[hidden]{ display:none !important; } #screenStudent .studentStudyLevelSheet{ width:min(560px, 96vw); display:grid; gap:16px; padding:20px; border:1px solid color-mix(in srgb, var(--border) 84%, transparent); border-radius:22px; background:var(--surface-1); box-shadow:0 24px 60px rgba(7,15,28,.22); } #screenStudent .studentStudyLevelModalHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } #screenStudent .studentStudyLevelModalHead h3{ margin:3px 0 0; color:var(--text); font-size:28px; line-height:1.1; font-weight:950; } #screenStudent .studentStudyLevelCloseBtn{ flex:0 0 auto; border-radius:14px; } #screenStudent .studentStudyLevelOptions{ display:grid; gap:10px; } #screenStudent .studentStudyLevelOption{ min-height:76px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentStudyLevelOption.isCurrent{ border-color:color-mix(in srgb, var(--student-friendly-green) 42%, var(--border) 58%); background:color-mix(in srgb, var(--student-friendly-green) 9%, var(--card) 91%); } #screenStudent .studentStudyLevelOption.isLocked{ opacity:.68; filter:saturate(.82); } #screenStudent .studentStudyLevelOption b{ color:var(--text); font-size:18px; line-height:1.15; font-weight:950; } #screenStudent .studentStudyLevelOption span{ display:block; margin-top:4px; color:var(--muted); font-size:13px; line-height:1.25; font-weight:850; } #screenStudent .studentStudyLevelOption .btn{ min-width:96px; border-radius:14px; } @media (min-width:769px){ #screenStudent #studentStatsView.studentDashboardMobile{ grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr) !important; } #screenStudent .studentLevelCard{ grid-column:1 !important; } #screenStudent .studentStudyLevelCard{ grid-column:2 !important; } #screenStudent .studentMonthlyCard, #screenStudent .studentProgressHistoryCard{ grid-column:1 / -1 !important; } } @media (max-width:768px){ #screenStudent .studentStudyLevelCard{ min-height:0; padding:15px !important; border-radius:20px !important; } #screenStudent .studentStudyLevelCard h3{ font-size:24px; } #screenStudent .studentStudyLevelPanel{ align-items:flex-end; padding:0; background:rgba(9,18,30,.44); } #screenStudent .studentStudyLevelSheet{ width:100%; border-radius:24px 24px 0 0; padding:16px; } #screenStudent .studentStudyLevelModalHead h3{ font-size:24px; } #screenStudent .studentStudyLevelOption{ min-height:68px; padding:12px; } #screenStudent .studentStudyLevelOption .btn{ min-width:86px; } } /* Student dashboard final cleanup: study level lives in the header, history shows one selected month */ body:not([data-app-role="student"]) #studentStudyLevelNavBtn{ display:none !important; } #studentStudyLevelNavBtn.studyLevelNavBtn{ display:inline-flex; align-items:center; gap:7px; border-color:color-mix(in srgb, var(--student-friendly-violet) 28%, var(--border) 72%); background:color-mix(in srgb, var(--student-friendly-violet) 8%, var(--card) 92%); color:var(--text); font-weight:900; white-space:nowrap; } #studentStudyLevelNavBtn.studyLevelNavBtn::after{ content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.68; } #screenStudent .studentMonthlyHelp{ margin-top:6px; color:var(--muted); font-size:14px; line-height:1.35; font-weight:800; } #screenStudent .studentMonthlyHead{ grid-template-columns:minmax(0,1fr) minmax(240px,300px) !important; align-items:stretch; gap:16px !important; } #screenStudent .studentMonthlyCycleCard{ display:grid; align-content:start; gap:7px; padding:13px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); box-shadow:0 8px 18px rgba(12,23,38,.04); } #screenStudent .studentMonthlyCycleLabel{ color:var(--muted); font-size:12px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyCycleMonth{ color:var(--text); font-size:18px; line-height:1.1; font-weight:950; } #screenStudent .studentMonthlyCyclePhase{ width:max-content; max-width:100%; min-height:26px; display:inline-flex; align-items:center; padding:5px 8px; border:1px solid color-mix(in srgb, var(--student-friendly-green) 34%, var(--border) 66%); border-radius:999px; background:color-mix(in srgb, var(--student-friendly-green) 9%, var(--card) 91%); color:var(--text); font-size:12px; line-height:1.1; font-weight:900; } #screenStudent .studentMonthlyCycleCard.is-last-day .studentMonthlyCyclePhase{ border-color:color-mix(in srgb, var(--student-friendly-amber) 44%, var(--border) 56%); background:color-mix(in srgb, var(--student-friendly-amber) 12%, var(--card) 88%); } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ min-height:0; padding:0; border:0; background:transparent; color:var(--text); font-size:14px; line-height:1.2; font-weight:950; } #screenStudent .studentMonthlyCycleMeta{ color:var(--muted); font-size:13px; line-height:1.3; font-weight:850; } #screenStudent .studentMonthlyCycleBtn{ justify-self:start; min-height:36px; border-radius:12px; } #screenStudent .studentMonthlyCyclePanel{ position:fixed; inset:0; z-index:225; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(9,18,30,.38); backdrop-filter:blur(8px); } #screenStudent .studentMonthlyCyclePanel[hidden]{ display:none !important; } #screenStudent .studentMonthlyCycleSheet{ width:min(640px, 96vw); display:grid; gap:16px; padding:20px; border:1px solid color-mix(in srgb, var(--border) 84%, transparent); border-radius:22px; background:var(--surface-1); box-shadow:0 24px 60px rgba(7,15,28,.22); } #screenStudent .studentMonthlyCycleModalHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } #screenStudent .studentMonthlyCycleModalHead h3{ margin:3px 0 0; color:var(--text); font-size:28px; line-height:1.1; font-weight:950; letter-spacing:0; text-transform:none; } #screenStudent .studentMonthlyCycleModalSub{ margin-top:5px; color:var(--muted); font-size:14px; line-height:1.35; font-weight:850; } #screenStudent .studentMonthlyCycleCloseBtn{ flex:0 0 auto; border-radius:14px; } #screenStudent .studentMonthlyCycleTimeline{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #screenStudent .studentMonthlyCycleTimelineItem{ min-height:130px; display:grid; align-content:start; gap:8px; padding:13px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentMonthlyCycleTimelineItem span{ color:var(--muted); font-size:12px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyCycleTimelineItem b{ color:var(--text); font-size:17px; line-height:1.12; font-weight:950; } #screenStudent .studentMonthlyCycleTimelineItem p{ margin:0; color:var(--muted); font-size:13px; line-height:1.35; font-weight:800; } #screenStudent .studentMonthlyCycleCurrent{ padding:14px; border:1px solid color-mix(in srgb, var(--student-friendly-violet) 30%, var(--border) 70%); border-radius:16px; background:color-mix(in srgb, var(--student-friendly-violet) 8%, var(--card) 92%); } #screenStudent .studentMonthlyCycleCurrent div{ display:grid; gap:6px; } #screenStudent .studentMonthlyCycleCurrent span{ color:var(--muted); font-size:12px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyCycleCurrent b{ color:var(--text); font-size:22px; line-height:1.1; font-weight:950; } #screenStudent .studentMonthlyCycleCurrent strong{ color:var(--text); font-size:15px; line-height:1.2; font-weight:950; } #screenStudent .studentMonthlyCycleCurrent p{ margin:0; color:var(--muted); font-size:14px; line-height:1.35; font-weight:850; } #screenStudent .studentStudyLevelCard{ display:none !important; } #screenStudent .studentLeaderboardCard{ display:grid; gap:14px; } #screenStudent .studentLeaderboardHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } #screenStudent .studentLeaderboardHead h3{ margin:0; color:var(--text); font-size:28px; line-height:1.1; font-weight:950; letter-spacing:0; text-transform:none; } #screenStudent .studentLeaderboardMonth, #screenStudent .studentLeaderboardSync{ margin-top:5px; color:var(--muted); font-size:14px; line-height:1.35; font-weight:850; } #screenStudent .studentLeaderboardSync{ min-height:30px; display:inline-flex; align-items:center; justify-content:center; margin-top:0; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); white-space:nowrap; } #screenStudent .studentLeaderboardOwnRank{ min-height:0; } #screenStudent .studentLeaderboardRankCard{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:13px 14px; border:1px solid color-mix(in srgb, var(--student-friendly-green) 34%, var(--border) 66%); border-radius:16px; background:color-mix(in srgb, var(--student-friendly-green) 8%, var(--card) 92%); } #screenStudent .studentLeaderboardRankCard span{ color:var(--muted); font-size:13px; line-height:1.2; font-weight:850; } #screenStudent .studentLeaderboardRankCard b, #screenStudent .studentLeaderboardRankCard strong{ color:var(--text); font-size:18px; line-height:1.1; font-weight:950; } #screenStudent .studentLeaderboardList{ display:grid; gap:8px; } #screenStudent .studentLeaderboardRow{ min-height:58px; display:grid; grid-template-columns:82px minmax(0,1fr) 96px minmax(190px,.75fr); align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentLeaderboardRow.isSelf{ border-color:color-mix(in srgb, var(--student-friendly-violet) 38%, var(--border) 62%); box-shadow:0 0 0 3px color-mix(in srgb, var(--student-friendly-violet) 12%, transparent); } #screenStudent .studentLeaderboardRank{ color:var(--text); font-size:15px; line-height:1.1; font-weight:950; } #screenStudent .studentLeaderboardName{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:15px; line-height:1.2; font-weight:950; } #screenStudent .studentLeaderboardPoints{ justify-self:end; color:var(--text); font-size:15px; line-height:1.2; font-weight:950; white-space:nowrap; } #screenStudent .studentLeaderboardMeta{ display:flex; align-items:center; justify-content:flex-end; gap:7px; color:var(--muted); font-size:12px; line-height:1.2; font-weight:850; text-align:right; } #screenStudent .studentLeaderboardBadge{ min-height:24px; display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--student-friendly-green) 34%, var(--border) 66%); background:color-mix(in srgb, var(--student-friendly-green) 10%, var(--card) 90%); color:var(--text); font-size:11px; line-height:1.1; font-weight:900; white-space:nowrap; } #screenStudent .studentLeaderboardEmpty{ padding:14px; border:1px dashed var(--border); border-radius:16px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); color:var(--muted); font-size:14px; line-height:1.35; font-weight:850; } #screenStudent .studentHistoryPreview{ display:block !important; grid-template-columns:1fr !important; overflow:visible !important; padding:0 !important; margin:0 !important; } #screenStudent .studentSelectedMonthCard{ min-height:174px; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:14px; padding:18px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 97%, var(--student-friendly-green) 3%); box-shadow:0 10px 22px rgba(12,23,38,.05); } #screenStudent .studentSelectedMonthCard.is-complete{ border-color:color-mix(in srgb, var(--student-friendly-green) 38%, var(--border) 62%); background:color-mix(in srgb, var(--student-friendly-green) 9%, var(--card) 91%); } #screenStudent .studentSelectedMonthCard.is-in-progress{ border-color:color-mix(in srgb, var(--student-friendly-amber) 36%, var(--border) 64%); background:color-mix(in srgb, var(--student-friendly-amber) 8%, var(--card) 92%); } #screenStudent .studentSelectedMonthCard.is-no-data{ background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%); opacity:.86; } #screenStudent .studentSelectedMonthMain{ min-width:0; display:grid; align-content:center; gap:12px; } #screenStudent .studentSelectedMonthName{ color:var(--text); font-size:30px; line-height:1.08; font-weight:950; } #screenStudent .studentSelectedMonthStatus{ width:max-content; max-width:100%; margin-top:10px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); font-size:13px; line-height:1.1; font-weight:900; } #screenStudent .studentSelectedMonthPoints{ color:var(--text); font-size:32px; line-height:1; font-weight:950; } #screenStudent .studentSelectedMonthExam{ color:var(--muted); font-size:14px; line-height:1.25; font-weight:850; } #screenStudent .studentSelectedMonthMetrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #screenStudent .studentSelectedMonthMetrics > div{ min-height:72px; display:grid; align-content:center; gap:5px; padding:12px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%); } #screenStudent .studentSelectedMonthMetrics span{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:850; } #screenStudent .studentSelectedMonthMetrics b{ color:var(--text); font-size:17px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyHistoryArchive{ grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr) !important; } #screenStudent .studentMonthlyHistoryYearGrid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthCard.isCompact{ position:relative; min-height:78px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:5px 8px; padding:11px; border-radius:15px; } #screenStudent .studentHistoryMonthDot{ grid-column:1; grid-row:1 / span 2; width:8px; height:8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--muted) 34%, transparent); background:transparent; } #screenStudent .studentHistoryMonthCard.hasData .studentHistoryMonthDot{ border-color:transparent; background:var(--student-friendly-green); } #screenStudent .studentHistoryMonthCard.isCurrentMonth .studentHistoryMonthDot{ width:10px; height:10px; background:var(--student-friendly-violet); } #screenStudent .studentHistoryMonthShort{ min-width:0; color:var(--text); font-size:15px; line-height:1.1; font-weight:950; } #screenStudent .studentHistoryMonthBadge{ justify-self:start; max-width:100%; padding:4px 7px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--muted); font-size:11px; line-height:1.1; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthCard.isCompact .studentHistoryMonthPoints{ grid-column:2; color:var(--muted); font-size:12px; line-height:1.15; font-weight:850; } @media (min-width:769px){ #screenStudent #studentStatsView.studentDashboardMobile{ grid-template-columns:1fr !important; } #screenStudent .studentLevelCard, #screenStudent .studentMonthlyCard, #screenStudent .studentProgressHistoryCard, #screenStudent .studentLeaderboardCard{ grid-column:1 / -1 !important; } } @media (max-width:768px){ body.mobile-layout #studentStudyLevelNavBtn.appTopbarChip{ display:inline-flex !important; width:auto !important; min-width:78px !important; height:38px !important; padding:0 10px !important; font-size:12px !important; } #screenStudent .studentMonthlyHelp{ font-size:13px; } #screenStudent .studentMonthlyHead{ grid-template-columns:1fr !important; gap:12px !important; } #screenStudent .studentMonthlyCycleCard{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px 10px; padding:12px; } #screenStudent .studentMonthlyCycleLabel{ grid-column:1; } #screenStudent .studentMonthlyCycleMonth{ grid-column:1; font-size:17px; } #screenStudent .studentMonthlyCyclePhase{ grid-column:1; } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ grid-column:2; grid-row:1 / span 2; justify-self:end; } #screenStudent .studentMonthlyCycleMeta{ grid-column:1 / -1; } #screenStudent .studentMonthlyCycleBtn{ grid-column:1 / -1; width:100%; } #screenStudent .studentMonthlyCyclePanel{ align-items:flex-end; padding:0; background:rgba(9,18,30,.44); } #screenStudent .studentMonthlyCycleSheet{ width:100%; max-height:88vh; overflow:auto; border-radius:24px 24px 0 0; padding:16px; } #screenStudent .studentMonthlyCycleModalHead h3{ font-size:24px; } #screenStudent .studentMonthlyCycleTimeline{ grid-template-columns:1fr; } #screenStudent .studentMonthlyCycleTimelineItem{ min-height:0; } #screenStudent .studentSelectedMonthCard{ min-height:0; grid-template-columns:1fr; padding:14px; gap:12px; } #screenStudent .studentSelectedMonthName{ font-size:24px; } #screenStudent .studentSelectedMonthPoints{ font-size:28px; } #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:repeat(2,minmax(0,1fr)); } #screenStudent .studentSelectedMonthMetrics > div{ min-height:64px; } #screenStudent .studentSelectedMonthMetrics > div:nth-child(2), #screenStudent .studentSelectedMonthMetrics > div:nth-child(4){ display:none; } #screenStudent .studentLeaderboardHead{ align-items:flex-start; } #screenStudent .studentLeaderboardHead h3{ font-size:24px; } #screenStudent .studentLeaderboardRankCard{ grid-template-columns:1fr; gap:6px; } #screenStudent .studentLeaderboardList{ gap:10px; } #screenStudent .studentLeaderboardRow{ min-height:0; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; padding:12px; } #screenStudent .studentLeaderboardRank{ grid-column:1; grid-row:1 / span 2; min-width:46px; } #screenStudent .studentLeaderboardName{ grid-column:2; grid-row:1; } #screenStudent .studentLeaderboardPoints{ grid-column:3; grid-row:1; } #screenStudent .studentLeaderboardMeta{ grid-column:2 / 4; grid-row:2; justify-content:flex-start; text-align:left; } #screenStudent .studentMonthlyHistoryArchive{ grid-template-columns:1fr !important; } #screenStudent .studentMonthlyHistoryYearGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } #screenStudent .studentMonthlyHistoryYearGrid .studentHistoryMonthCard.isCompact{ min-height:72px; grid-template-columns:auto minmax(0,1fr); padding:10px; } #screenStudent .studentMonthlyHistoryDetail{ max-height:none; } } /* Student dashboard compact UX refresh */ body[data-current-route="student"] #tabs{ display:none !important; } body.student-ai-open{ overflow:hidden; } body.student-ai-open .appMainScroll{ overflow:hidden; overscroll-behavior:contain; } #screenStudent{ --student-compact-gap:12px; --student-compact-radius:16px; --student-compact-pad:14px; --student-chat-green:#138476; --student-chat-green-dark:#0d6f66; padding-bottom:96px; } #screenStudent .studentDashboardHeader, #screenStudent .studentLeaderboardCard, #screenStudent .studentMonthlyHelp, #screenStudent .studentMonthlyJourneyPath, #screenStudent .studentMonthlyExamPanel, #screenStudent .studentProgressHistorySubtitle, #screenStudent .studentSelectedMonthMetrics{ display:none !important; } #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 1120px) !important; max-width:1120px !important; margin:0 auto !important; padding:0 0 24px !important; display:grid !important; grid-template-columns:1fr !important; gap:var(--student-compact-gap) !important; align-items:start !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ display:grid !important; gap:12px !important; padding:var(--student-compact-pad) !important; border-radius:var(--student-compact-radius) !important; border:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important; background:color-mix(in srgb, var(--card) 96%, var(--bg) 4%) !important; box-shadow:0 8px 22px rgba(12,23,38,.055) !important; overflow:visible !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card::before{ content:none !important; } #screenStudent .studentLevelCard{ grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; background:color-mix(in srgb, var(--card) 94%, var(--student-friendly-green) 6%) !important; } #screenStudent .studentLevelProfile{ gap:10px !important; min-width:0; } #screenStudent .studentIdentityAvatar{ width:44px !important; height:44px !important; flex-basis:44px !important; border-radius:14px !important; font-size:15px !important; } #screenStudent .studentLevelCopy{ gap:2px !important; } #screenStudent .studentIdentityName{ font-size:13px !important; line-height:1.2 !important; letter-spacing:0 !important; } #screenStudent .studentLevelBadge{ font-size:18px !important; line-height:1.15 !important; letter-spacing:0 !important; } #screenStudent .studentIdentitySub{ font-size:12px !important; line-height:1.25 !important; } #screenStudent .studentLevelActions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; } #screenStudent #studentHeroContinueBtn, #screenStudent .studentStudyLevelBtn{ display:inline-flex !important; align-items:center; justify-content:center; min-height:36px !important; padding:8px 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:900 !important; white-space:nowrap; } #screenStudent .studentStudyLevelBtn{ border-color:color-mix(in srgb, var(--student-friendly-violet) 30%, var(--border) 70%); background:color-mix(in srgb, var(--student-friendly-violet) 9%, var(--card) 91%); } #screenStudent .studentMonthlyCard{ align-content:start; } #screenStudent .studentMonthlyHead{ display:flex !important; align-items:flex-start !important; justify-content:space-between; gap:10px !important; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ margin:0 !important; color:var(--text) !important; font-size:20px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:0 !important; text-transform:none !important; } #screenStudent .studentMonthlySubtitle{ margin-top:3px !important; color:var(--muted) !important; font-size:13px !important; line-height:1.25 !important; font-weight:850 !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin:0 !important; } #screenStudent .studentMonthlyReviewRow{ position:relative; display:grid !important; grid-template-columns:34px minmax(0,1fr) auto !important; grid-template-areas: "icon main count" "icon progress action" !important; align-items:center !important; gap:7px 9px !important; min-height:64px !important; padding:9px 10px !important; border:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important; border-radius:14px !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; box-shadow:none !important; } #screenStudent .studentMonthlyReviewRow::before{ content:none !important; } #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:color-mix(in srgb, var(--student-friendly-violet) 48%, var(--border) 52%) !important; background:color-mix(in srgb, var(--student-friendly-violet) 10%, var(--card) 90%) !important; } #screenStudent .studentMonthlyReviewRow.isComplete{ border-color:color-mix(in srgb, var(--student-friendly-green) 46%, var(--border) 54%) !important; background:color-mix(in srgb, var(--student-friendly-green) 8%, var(--card) 92%) !important; } #screenStudent .studentMonthlyReviewRow.isLocked{ opacity:.72; } #screenStudent .studentMonthlyReviewIcon{ grid-area:icon; width:34px !important; height:34px !important; border-radius:12px !important; font-size:12px !important; font-weight:950 !important; } #screenStudent .studentMonthlyReviewMain{ grid-area:main; min-width:0; display:flex !important; align-items:center; flex-wrap:wrap; gap:5px 7px !important; } #screenStudent .studentMonthlyReviewName{ color:var(--text) !important; font-size:14px !important; line-height:1.15 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyReviewState{ min-height:22px; display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; background:var(--card); color:var(--muted) !important; font-size:11px !important; line-height:1 !important; font-weight:900 !important; } #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ color:var(--text) !important; background:color-mix(in srgb, var(--student-friendly-violet) 14%, var(--card) 86%); } #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewState{ color:var(--text) !important; background:color-mix(in srgb, var(--student-friendly-green) 16%, var(--card) 84%); } #screenStudent .studentMonthlyReviewCount{ grid-area:count; justify-self:end; color:var(--text) !important; font-size:12px !important; line-height:1.1 !important; font-weight:950 !important; white-space:nowrap; } #screenStudent .studentMonthlyReviewProgress{ grid-area:progress; height:6px !important; margin:0 !important; border:0 !important; border-radius:999px !important; background:color-mix(in srgb, var(--chip) 50%, var(--card) 50%) !important; overflow:hidden !important; } #screenStudent .studentMonthlyReviewFill{ height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--student-friendly-green), var(--student-friendly-violet)) !important; } #screenStudent .studentMonthlyReviewAction{ grid-area:action; justify-self:end; min-height:30px !important; padding:6px 9px !important; border-radius:10px !important; font-size:11px !important; line-height:1 !important; } #screenStudent .studentMonthlyReviewRow:not(.isCurrent) .studentMonthlyReviewAction{ display:none !important; } #screenStudent .studentCycleSection{ padding:var(--student-compact-pad) !important; align-content:start; } #screenStudent .studentCycleSection .studentMonthlyCycleCard{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:6px 10px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #screenStudent .studentMonthlyCycleLabel{ grid-column:1 / -1; color:var(--text) !important; font-size:18px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyCycleMonth{ display:none !important; } #screenStudent .studentMonthlyCyclePhase{ min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--muted) !important; font-size:13px !important; line-height:1.2 !important; font-weight:900 !important; } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ justify-self:end; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--text) !important; font-size:13px !important; line-height:1.2 !important; font-weight:950 !important; } #screenStudent .studentMonthlyCycleMeta{ grid-column:1; color:var(--muted) !important; font-size:12px !important; line-height:1.25 !important; font-weight:800 !important; } #screenStudent .studentMonthlyCycleBtn{ grid-column:2; grid-row:3; justify-self:end !important; min-height:34px !important; padding:7px 11px !important; border-radius:999px !important; font-size:12px !important; } #screenStudent .studentProgressHistoryCard{ align-content:start; } #screenStudent .studentProgressHead{ margin:0 !important; } #screenStudent .studentHistoryPreview{ display:block !important; padding:0 !important; margin:0 !important; } #screenStudent .studentSelectedMonthCard{ min-height:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:8px 12px !important; padding:12px !important; border-radius:14px !important; box-shadow:none !important; } #screenStudent .studentSelectedMonthMain{ display:grid !important; gap:5px !important; align-content:start !important; } #screenStudent .studentSelectedMonthName{ font-size:18px !important; line-height:1.1 !important; letter-spacing:0 !important; } #screenStudent .studentSelectedMonthStatus{ width:max-content; max-width:100%; margin:0 !important; padding:5px 8px !important; font-size:11px !important; } #screenStudent .studentSelectedMonthPoints{ justify-self:end; color:var(--text) !important; font-size:20px !important; line-height:1 !important; } #screenStudent .studentSelectedMonthExam{ grid-column:1 / -1; color:var(--muted) !important; font-size:12px !important; line-height:1.25 !important; } #screenStudent .studentMonthlyHistoryBtn{ justify-self:start; width:auto !important; min-height:36px !important; padding:8px 12px !important; border-radius:999px !important; font-size:12px !important; } #screenStudent .studentMonthlyCyclePanel, #screenStudent .studentMonthlyHistoryPanel, #screenStudent .studentStudyLevelPanel{ position:fixed !important; inset:0 !important; z-index:230 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; background:rgba(9,18,30,.40) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } #screenStudent .studentMonthlyCyclePanel[hidden], #screenStudent .studentMonthlyHistoryPanel[hidden], #screenStudent .studentStudyLevelPanel[hidden]{ display:none !important; } #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ width:min(640px, 96vw) !important; max-height:min(82vh, 720px) !important; overflow:auto !important; display:grid !important; gap:12px !important; padding:16px !important; border:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important; border-radius:20px !important; background:var(--card) !important; box-shadow:0 24px 64px rgba(7,15,28,.24) !important; animation:studentDialogRise .22s ease-out both; overscroll-behavior:contain; } @keyframes studentDialogRise{ from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } #screenStudent .studentMonthlyCycleModalHead, #screenStudent .studentMonthlyHistoryModalHead, #screenStudent .studentStudyLevelModalHead{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:12px !important; } #screenStudent .studentMonthlyCycleModalHead h3, #screenStudent .studentMonthlyHistoryModalHead h3, #screenStudent .studentStudyLevelModalHead h3{ margin:0 !important; font-size:20px !important; line-height:1.1 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyCycleTimeline{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentMonthlyCycleTimelineItem{ min-height:0 !important; padding:11px !important; border-radius:14px !important; } #screenStudent .studentMonthlyHistoryArchive{ grid-template-columns:minmax(0,1fr) !important; gap:12px !important; } #screenStudent .studentMonthlyHistoryYearGrid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentMonthlyHistoryDetail{ max-height:none !important; } #screenStudent .studentStudyLevelOptions{ display:grid !important; gap:8px !important; } #screenStudent .studentStudyLevelOption{ min-height:48px !important; padding:10px 12px !important; border-radius:14px !important; } #screenStudent .studentStudyLevelOption .btn{ display:none !important; } #screenStudent .studentAiFab{ position:fixed; right:22px; bottom:22px; z-index:220; width:58px; height:58px; display:grid; place-items:center; border:0; border-radius:999px; background:linear-gradient(135deg, var(--student-chat-green), var(--student-chat-green-dark)); color:#fff; box-shadow:0 16px 36px rgba(13,111,102,.24); cursor:pointer; font:inherit; font-size:15px; font-weight:950; line-height:1; touch-action:manipulation; transition:transform .14s ease, box-shadow .18s ease, filter .18s ease; } #screenStudent .studentAiFab:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 18px 40px rgba(13,111,102,.30); } #screenStudent .studentAiBackdrop{ position:fixed; inset:0; z-index:235; background:rgba(9,18,30,.28); opacity:0; pointer-events:none; transition:opacity 220ms ease; } #screenStudent .studentAiBackdrop.open{ opacity:1; pointer-events:auto; } #screenStudent .studentAiBackdrop[hidden], #screenStudent .studentAiPanel[hidden]{ display:none !important; } #screenStudent .studentAiPanel{ position:fixed; right:22px; bottom:88px; z-index:240; width:min(390px, calc(100vw - 28px)); height:min(560px, calc(100svh - 126px)); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; padding:14px; border:1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius:20px; background:var(--card); box-shadow:0 24px 64px rgba(7,15,28,.22); opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity 220ms ease, transform 220ms ease; overflow:hidden; } #screenStudent .studentAiPanel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } #screenStudent .studentAiHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); } #screenStudent .studentAiTitle{ color:var(--text); font-size:17px; line-height:1.15; font-weight:950; letter-spacing:0; } #screenStudent .studentAiSub{ margin-top:3px; color:var(--muted); font-size:12px; line-height:1.25; font-weight:800; } #screenStudent .studentAiCloseBtn{ min-height:32px !important; padding:6px 10px !important; border-radius:999px !important; font-size:12px !important; } #screenStudent .studentAiMessages{ display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; padding:10px; border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:16px; background:color-mix(in srgb, var(--bg) 84%, var(--card) 16%); overscroll-behavior:contain; scroll-behavior:smooth; } #screenStudent .studentAiMessages .senseiEmptyState{ margin:auto; max-width:28ch; text-align:center; color:var(--muted); } #screenStudent .studentAiMessages .senseiEmptyTitle{ color:var(--text); font-size:15px; line-height:1.2; font-weight:950; } #screenStudent .studentAiMessages .senseiEmptyText{ margin-top:6px; font-size:12px; line-height:1.35; font-weight:800; } #screenStudent .studentAiMessages .senseiMessage{ display:flex; flex-direction:column; gap:4px; animation:senseiMessageIn .18s ease both; } #screenStudent .studentAiMessages .senseiMessage.user{ align-items:flex-end; } #screenStudent .studentAiMessages .senseiMessage.sensei{ align-items:flex-start; } #screenStudent .studentAiMessages .senseiMessage.grouped{ margin-top:-5px; } #screenStudent .studentAiMessages .senseiMessage.grouped .senseiLabel{ display:none; } #screenStudent .studentAiMessages .senseiLabel{ padding:0 4px; color:var(--muted); font-size:10px; line-height:1.2; font-weight:900; letter-spacing:0; text-transform:none; } #screenStudent .studentAiMessages .senseiBubble{ max-width:82%; padding:10px 12px; border:1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius:17px; background:var(--card); color:var(--text); font-size:14px; line-height:1.45; word-break:break-word; white-space:pre-wrap; box-shadow:0 5px 16px rgba(12,23,38,.045); } #screenStudent .studentAiMessages .senseiMessage.user .senseiBubble{ color:#fff; background:linear-gradient(135deg, var(--student-chat-green), var(--student-chat-green-dark)); border-color:transparent; border-bottom-right-radius:7px; } #screenStudent .studentAiMessages .senseiMessage.sensei .senseiBubble{ border-bottom-left-radius:7px; } #screenStudent .studentAiMessages .senseiBubble.isTyping{ min-width:50px; color:transparent; position:relative; } #screenStudent .studentAiMessages .senseiBubble.isTyping::before{ content:""; position:absolute; left:15px; top:50%; width:5px; height:5px; border-radius:999px; background:var(--muted); transform:translateY(-50%); box-shadow:10px 0 0 var(--muted), 20px 0 0 var(--muted); animation:senseiTypingDots 1s ease-in-out infinite; } #screenStudent .studentAiComposer{ display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:8px; align-items:center; padding:8px; border:1px solid color-mix(in srgb, var(--border) 76%, transparent); border-radius:16px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentAiComposer .input{ min-height:42px; width:100%; border-radius:999px; font-size:14px; } #screenStudent #studentAiSendBtn{ width:46px; min-width:46px; min-height:42px; display:grid !important; place-items:center; position:relative; padding:0 !important; border-radius:999px !important; font-size:0; overflow:hidden; box-shadow:0 10px 22px rgba(13,111,102,.18); } #screenStudent #studentAiSendBtn::before{ content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-top:3px solid currentColor; border-right:3px solid currentColor; transform:translate(-47%,-50%) rotate(45deg); } #screenStudent #studentAiSendBtn::after{ content:""; position:absolute; left:50%; top:50%; width:15px; height:3px; border-radius:999px; background:currentColor; transform:translate(-58%,-50%); } #screenStudent #studentAiSendBtn:disabled{ opacity:.54; box-shadow:none; cursor:not-allowed; } @media (min-width:900px){ #screenStudent #studentStatsView.studentDashboardMobile{ grid-template-columns:minmax(0,1fr) minmax(280px,330px) !important; grid-template-areas: "monthly summary" "monthly cycle" "history history" !important; gap:14px !important; } #screenStudent .studentMonthlyCard{ grid-area:monthly !important; min-height:100%; } #screenStudent .studentLevelCard{ grid-area:summary !important; } #screenStudent .studentCycleSection{ grid-area:cycle !important; } #screenStudent .studentProgressHistoryCard{ grid-area:history !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #screenStudent .studentProgressHistoryCard{ grid-template-columns:minmax(0,1fr) auto !important; align-items:start !important; } #screenStudent .studentProgressHead{ grid-column:1 / -1 !important; } #screenStudent .studentHistoryPreview{ grid-column:1 !important; } #screenStudent .studentMonthlyHistoryBtn{ grid-column:2 !important; align-self:start !important; } } @media (max-width:899px){ #screenStudent{ padding-bottom:calc(116px + env(safe-area-inset-bottom)); } body.mobile-layout[data-current-route="student"] .topbar.appTopbar{ padding:7px 8px !important; border-radius:14px !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand .pill, body.mobile-layout[data-current-route="student"] #themeBtn.appTopbarChip, body.mobile-layout[data-current-route="student"] .appTopbarAvatar{ display:none !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand b{ font-size:17px !important; } body.mobile-layout[data-current-route="student"] #studentStudyLevelNavBtn.appTopbarChip{ display:inline-flex !important; min-width:0 !important; min-height:34px !important; height:34px !important; padding:0 10px !important; font-size:12px !important; } #screenStudent #studentStatsView.studentDashboardMobile{ max-width:560px !important; padding:0 2px 18px !important; gap:10px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:12px !important; border-radius:16px !important; } #screenStudent .studentLevelCard{ grid-template-columns:1fr !important; } #screenStudent .studentLevelActions{ justify-content:stretch; } #screenStudent .studentLevelActions .btn{ flex:1 1 0; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ font-size:18px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:60px !important; padding:9px !important; } #screenStudent .studentMonthlyReviewAction{ min-width:66px; } #screenStudent .studentCycleSection .studentMonthlyCycleCard{ grid-template-columns:minmax(0,1fr) auto !important; } #screenStudent .studentMonthlyCycleBtn{ grid-column:1 / -1 !important; grid-row:auto !important; justify-self:stretch !important; width:100% !important; } #screenStudent .studentSelectedMonthCard{ grid-template-columns:1fr !important; } #screenStudent .studentSelectedMonthPoints{ justify-self:start; } #screenStudent .studentMonthlyHistoryBtn{ width:100% !important; } #screenStudent .studentMonthlyCyclePanel, #screenStudent .studentMonthlyHistoryPanel, #screenStudent .studentStudyLevelPanel{ align-items:flex-end !important; padding:0 !important; background:rgba(9,18,30,.45) !important; } #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ width:100% !important; max-height:84svh !important; border-radius:22px 22px 0 0 !important; padding:14px !important; animation:studentSheetUp .24s ease-out both; } @keyframes studentSheetUp{ from{transform:translateY(100%)} to{transform:translateY(0)} } #screenStudent .studentMonthlyCycleTimeline{ grid-template-columns:1fr !important; } #screenStudent .studentMonthlyHistoryYearGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } #screenStudent .studentAiFab{ right:16px; bottom:calc(82px + env(safe-area-inset-bottom)); width:56px; height:56px; } #screenStudent .studentAiBackdrop{ background:rgba(9,18,30,.44); } #screenStudent .studentAiPanel{ left:0; right:0; bottom:0; width:100%; height:min(82svh, 720px); max-height:82svh; padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); border-right:0; border-left:0; border-bottom:0; border-radius:22px 22px 0 0; opacity:1; transform:translateY(100%); transition:transform 240ms ease; } #screenStudent .studentAiPanel.open{ transform:translateY(0); } #screenStudent .studentAiMessages{ padding:10px 8px; } #screenStudent .studentAiComposer{ position:sticky; bottom:0; } } @media (prefers-reduced-motion:reduce){ #screenStudent .studentAiPanel, #screenStudent .studentAiBackdrop, #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ animation:none !important; transition:none !important; } } /* Final desktop-only student dashboard layout. Make the desktop student section use a centered max-width dashboard grid. The top two cards are equal height, the monthly loop is the main full-width card, and progress history is a clean full-width card below. */ @media (min-width:1024px){ body[data-current-route="student"] .appLayout .wrap.appLayoutWrap{ max-width:1280px; } #screenStudent{ padding-bottom:88px; } #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 1180px) !important; max-width:1180px !important; margin:0 auto !important; padding:4px 0 40px !important; display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-template-areas: "summary cycle" "monthly monthly" "history history" !important; gap:20px !important; align-items:stretch !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ min-height:0 !important; padding:22px !important; border-radius:18px !important; border:1px solid color-mix(in srgb, var(--border) 78%, transparent) !important; background:color-mix(in srgb, var(--card) 98%, var(--bg) 2%) !important; box-shadow:0 10px 24px rgba(12,23,38,.055) !important; } #screenStudent .studentLevelCard{ grid-area:summary !important; } #screenStudent .studentCycleSection{ grid-area:cycle !important; } #screenStudent .studentLevelCard, #screenStudent .studentCycleSection{ height:100% !important; min-height:188px !important; align-content:space-between !important; } #screenStudent .studentLevelProfile{ align-items:flex-start !important; gap:14px !important; } #screenStudent .studentIdentityAvatar{ width:48px !important; height:48px !important; flex-basis:48px !important; border-radius:14px !important; } #screenStudent .studentIdentityName{ font-size:13px !important; line-height:1.15 !important; } #screenStudent .studentLevelBadge{ margin-top:2px !important; font-size:25px !important; line-height:1.08 !important; } #screenStudent .studentIdentitySub{ font-size:14px !important; } #screenStudent .studentLevelActions{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; margin-top:12px !important; } #screenStudent #studentHeroContinueBtn{ display:none !important; } #screenStudent .studentStudyLevelBtn, #screenStudent .studentMonthlyCycleBtn, #screenStudent .studentMonthlyHistoryBtn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-height:40px !important; padding:9px 14px !important; border-radius:999px !important; font-size:13px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap !important; } #screenStudent .studentStudyLevelBtn::after{ content:""; width:7px; height:7px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); } #screenStudent .studentMonthlyCycleCard{ height:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto auto 1fr auto !important; gap:8px 12px !important; align-content:stretch !important; } #screenStudent .studentMonthlyCycleLabel{ grid-column:1 / -1 !important; font-size:18px !important; } #screenStudent .studentMonthlyCyclePhase{ grid-column:1 !important; grid-row:2 !important; color:var(--text) !important; font-size:22px !important; line-height:1.1 !important; font-weight:950 !important; } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; justify-self:end !important; min-height:30px !important; padding:6px 10px !important; border:1px solid color-mix(in srgb, var(--student-amber) 32%, var(--border) 68%) !important; border-radius:999px !important; background:color-mix(in srgb, var(--student-amber) 11%, var(--card) 89%) !important; color:var(--text) !important; } #screenStudent .studentMonthlyCycleMeta{ grid-column:1 / -1 !important; grid-row:3 !important; font-size:14px !important; } #screenStudent .studentMonthlyCycleBtn{ grid-column:1 !important; grid-row:5 !important; justify-self:start !important; align-self:end !important; } #screenStudent .studentMonthlyCard{ grid-area:monthly !important; padding:24px !important; gap:18px !important; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ font-size:26px !important; line-height:1.08 !important; } #screenStudent .studentMonthlySubtitle{ margin-top:5px !important; font-size:15px !important; } #screenStudent .studentMonthlyHelp{ margin-top:5px !important; font-size:14px !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:14px !important; align-items:stretch !important; } #screenStudent .studentMonthlyReviewRow{ min-height:164px !important; height:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto minmax(54px,auto) auto 1fr auto !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; align-content:stretch !important; align-items:start !important; gap:10px !important; padding:14px !important; border-radius:16px !important; } #screenStudent .studentMonthlyReviewIcon{ width:40px !important; height:40px !important; border-radius:13px !important; } #screenStudent .studentMonthlyReviewMain{ display:grid !important; grid-template-rows:auto auto !important; align-content:start !important; gap:7px !important; } #screenStudent .studentMonthlyReviewName{ font-size:15px !important; line-height:1.18 !important; } #screenStudent .studentMonthlyReviewState{ width:max-content !important; max-width:100% !important; min-height:24px !important; padding:5px 8px !important; } #screenStudent .studentMonthlyReviewCount{ justify-self:start !important; align-self:start !important; color:var(--muted) !important; font-size:13px !important; } #screenStudent .studentMonthlyReviewProgress{ align-self:end !important; height:7px !important; } #screenStudent .studentMonthlyReviewAction{ width:100% !important; justify-self:stretch !important; min-height:38px !important; padding:9px 10px !important; } #screenStudent .studentProgressHistoryCard{ grid-area:history !important; display:grid !important; grid-template-columns:1fr !important; gap:16px !important; padding:24px !important; } #screenStudent .studentProgressHead{ display:block !important; } #screenStudent .studentHistoryPreview{ display:block !important; } #screenStudent .studentSelectedMonthCard{ display:grid !important; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr) !important; gap:18px !important; align-items:stretch !important; padding:18px !important; border-radius:16px !important; } #screenStudent .studentSelectedMonthTop{ display:grid !important; grid-template-columns:1fr !important; align-content:center !important; gap:10px !important; } #screenStudent .studentSelectedMonthName{ font-size:24px !important; } #screenStudent .studentSelectedMonthLine{ margin-top:0 !important; } #screenStudent .studentSelectedMonthMetrics{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:10px !important; align-self:stretch !important; } #screenStudent .studentSelectedMonthMetrics div{ min-height:78px !important; display:grid !important; align-content:center !important; justify-content:stretch !important; gap:7px !important; padding:12px !important; } #screenStudent .studentSelectedMonthMetrics b{ font-size:16px !important; } #screenStudent .studentMonthlyHistoryBtn{ justify-self:start !important; grid-column:auto !important; align-self:auto !important; } } /* Prevent monthly step text/count overlap on desktop widths with limited content space. */ @media (min-width:1024px){ #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)) !important; gap:14px !important; align-items:stretch !important; } #screenStudent .studentMonthlyReviewRow{ min-height:176px !important; overflow:hidden !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:40px minmax(54px,auto) 28px minmax(10px,1fr) minmax(0,auto) !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; row-gap:10px !important; } #screenStudent .studentMonthlyReviewIcon{ grid-area:icon !important; align-self:start !important; justify-self:start !important; } #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; display:grid !important; grid-template-rows:auto auto !important; align-content:start !important; gap:7px !important; min-height:54px !important; } #screenStudent .studentMonthlyReviewName{ display:block !important; max-width:100% !important; overflow-wrap:break-word !important; line-height:1.18 !important; } #screenStudent .studentMonthlyReviewState{ justify-self:start !important; align-self:start !important; max-width:100% !important; white-space:normal !important; } #screenStudent .studentMonthlyReviewCount{ grid-area:count !important; align-self:start !important; justify-self:start !important; width:max-content !important; max-width:100% !important; white-space:nowrap !important; line-height:1.1 !important; } #screenStudent .studentMonthlyReviewProgress{ grid-area:progress !important; align-self:end !important; width:100% !important; } #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; align-self:end !important; min-width:0 !important; } } /* Final mobile student app pass: compact rows, no overlap, mounted AI bottom sheet. */ body.no-scroll{ overflow:hidden !important; } @media (min-width:1024px){ #screenStudent .studentMonthlyReviewRow{ grid-template-rows:40px minmax(34px,auto) 26px 28px minmax(10px,1fr) minmax(0,auto) !important; grid-template-areas: "icon" "main" "state" "count" "progress" "action" !important; } #screenStudent .studentMonthlyReviewMain{ min-height:0 !important; } #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:start !important; align-self:start !important; max-width:100% !important; } } @media (max-width:767px){ body.mobile-layout[data-current-route="student"]{ overflow-x:hidden !important; } body.mobile-layout[data-current-route="student"] .topbar.appTopbar{ position:sticky !important; top:max(6px, env(safe-area-inset-top)) !important; z-index:80 !important; min-height:48px !important; padding:7px 8px !important; border-radius:14px !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand b{ font-size:18px !important; letter-spacing:0 !important; } body.mobile-layout[data-current-route="student"] #studentStudyLevelNavBtn.appTopbarChip{ display:inline-flex !important; align-items:center !important; height:34px !important; min-height:34px !important; padding:0 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:950 !important; white-space:nowrap !important; } #screenStudent{ margin-top:10px !important; overflow-x:hidden !important; padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important; } #screenStudent #studentStatsView.studentDashboardMobile{ width:100% !important; max-width:560px !important; margin:0 auto !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; padding:0 2px 18px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:14px !important; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--border) 72%, transparent) !important; box-shadow:0 8px 20px rgba(12,23,38,.05) !important; } #screenStudent .studentLevelCard{ min-height:0 !important; padding:12px 14px !important; } #screenStudent .studentIdentityAvatar, #screenStudent .studentIdentityName, #screenStudent .studentLevelActions{ display:none !important; } #screenStudent .studentLevelProfile{ display:block !important; } #screenStudent .studentLevelBadge{ font-size:17px !important; line-height:1.2 !important; } #screenStudent .studentIdentitySub{ margin-top:2px !important; font-size:13px !important; line-height:1.25 !important; } #screenStudent .studentMonthlyCard{ gap:12px !important; padding:15px !important; } #screenStudent .studentMonthlyHead{ margin:0 !important; } #screenStudent .studentMonthlyTitle{ font-size:20px !important; line-height:1.12 !important; } #screenStudent .studentMonthlySubtitle{ margin-top:2px !important; font-size:13px !important; line-height:1.25 !important; } #screenStudent .studentMonthlyHelp, #screenStudent .studentMonthlyJourneyPath, #screenStudent .studentMonthlyExamPanel{ display:none !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin-top:0 !important; overflow:visible !important; } #screenStudent .studentMonthlyReviewList::before, #screenStudent .studentMonthlyReviewRow::before{ display:none !important; } #screenStudent .studentMonthlyReviewRow{ display:grid !important; grid-template-columns:34px minmax(0, 1fr) auto !important; grid-template-areas: "icon main state" "icon count state" "progress progress progress" "action action action" !important; align-items:center !important; column-gap:12px !important; row-gap:5px !important; min-height:0 !important; padding:13px !important; border-radius:14px !important; overflow:visible !important; } #screenStudent .studentMonthlyReviewIcon{ grid-area:icon !important; width:30px !important; height:30px !important; min-width:30px !important; align-self:center !important; justify-self:start !important; font-size:13px !important; line-height:1 !important; } #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; min-width:0 !important; display:block !important; } #screenStudent .studentMonthlyReviewName{ min-width:0 !important; max-width:100% !important; font-size:15px !important; line-height:1.25 !important; overflow-wrap:anywhere !important; white-space:normal !important; } #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:end !important; align-self:center !important; max-width:96px !important; min-height:24px !important; padding:5px 8px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenStudent .studentMonthlyReviewCount{ grid-area:count !important; min-width:0 !important; justify-self:start !important; align-self:start !important; width:auto !important; max-width:100% !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--muted) !important; font-size:12px !important; line-height:1.25 !important; font-weight:850 !important; white-space:normal !important; } #screenStudent .studentMonthlyReviewProgress{ grid-area:progress !important; width:100% !important; height:7px !important; margin-top:4px !important; align-self:end !important; } #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; width:100% !important; min-height:38px !important; margin-top:4px !important; justify-self:stretch !important; } #screenStudent .studentMonthlyReviewRow:not(.isCurrent) .studentMonthlyReviewAction{ display:none !important; } #screenStudent .studentMonthlyReviewRow.isLocked{ opacity:.72 !important; } #screenStudent .studentCycleSection{ padding:13px 14px !important; } #screenStudent .studentMonthlyCycleCard{ display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; grid-template-areas: "label day" "phase phase" "meta button" !important; gap:5px 10px !important; align-items:center !important; } #screenStudent .studentMonthlyCycleLabel{ grid-area:label !important; font-size:12px !important; } #screenStudent .studentMonthlyCountdown{ grid-area:day !important; justify-self:end !important; padding:5px 9px !important; border-radius:999px !important; font-size:11px !important; white-space:nowrap !important; } #screenStudent .studentMonthlyCyclePhase{ grid-area:phase !important; font-size:16px !important; line-height:1.2 !important; } #screenStudent .studentMonthlyCycleMeta{ grid-area:meta !important; min-width:0 !important; font-size:12px !important; line-height:1.3 !important; } #screenStudent .studentMonthlyCycleBtn{ grid-area:button !important; width:auto !important; min-height:34px !important; padding:7px 11px !important; justify-self:end !important; white-space:nowrap !important; } #screenStudent .studentMonthlyCycleMonth{ display:none !important; } #screenStudent .studentProgressHistoryCard{ gap:12px !important; padding:14px !important; } #screenStudent .studentProgressHead h3{ font-size:19px !important; line-height:1.18 !important; } #screenStudent .studentSelectedMonthCard{ grid-template-columns:1fr !important; gap:12px !important; padding:13px !important; border-radius:14px !important; } #screenStudent .studentSelectedMonthTop{ grid-template-columns:minmax(0, 1fr) !important; gap:8px !important; } #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentSelectedMonthMetrics div{ min-width:0 !important; padding:9px !important; border-radius:12px !important; } #screenStudent .studentMonthlyHistoryBtn{ width:100% !important; min-height:38px !important; justify-self:stretch !important; } #screenStudent .studentAiFab{ right:16px !important; bottom:calc(82px + env(safe-area-inset-bottom)) !important; width:56px !important; height:56px !important; z-index:1002 !important; } #screenStudent .studentAiBackdrop, #screenStudent .studentAiBackdrop[hidden]{ display:block !important; position:fixed !important; inset:0 !important; z-index:1000 !important; background:rgba(0, 0, 0, .28) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity 220ms ease-out, visibility 0s linear 220ms !important; } #screenStudent .studentAiBackdrop.open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transition:opacity 220ms ease-out, visibility 0s !important; } #screenStudent .studentAiPanel, #screenStudent .studentAiPanel[hidden]{ display:flex !important; flex-direction:column !important; position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100% !important; height:min(82svh, 680px) !important; max-height:82svh !important; margin-top:0 !important; padding:0 !important; border-right:0 !important; border-left:0 !important; border-bottom:0 !important; border-radius:22px 22px 0 0 !important; background:var(--card) !important; opacity:1 !important; visibility:hidden !important; pointer-events:none !important; transform:translate3d(0, 100%, 0) !important; transition:transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 260ms !important; will-change:transform !important; overflow:hidden !important; z-index:1001 !important; } #screenStudent .studentAiPanel.open{ visibility:visible !important; pointer-events:auto !important; transform:translate3d(0, 0, 0) !important; transition:transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s !important; } #screenStudent .studentAiHeader{ flex:0 0 auto !important; padding:14px 16px !important; } #screenStudent .studentAiMessages{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; margin:0 14px !important; padding:12px !important; overscroll-behavior:contain !important; } #screenStudent .studentAiComposer{ flex:0 0 auto !important; position:relative !important; bottom:auto !important; margin:12px 14px 0 !important; padding:10px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; border-radius:14px !important; } } @media (prefers-reduced-motion:reduce){ #screenStudent .studentAiPanel, #screenStudent .studentAiBackdrop{ transition:none !important; } } /* Student desktop/web symmetry pass */ @media (min-width:1024px){ body[data-current-route="student"] .appLayout .wrap.appLayoutWrap{ max-width:1280px; } #screenStudent{ padding-bottom:88px; } #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 1180px) !important; max-width:1180px !important; margin:0 auto !important; padding:4px 0 40px !important; display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-template-areas: "summary cycle" "monthly monthly" "history history" !important; gap:20px !important; align-items:stretch !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ min-height:0 !important; padding:22px !important; border-radius:18px !important; border:1px solid color-mix(in srgb, var(--border) 78%, transparent) !important; background:color-mix(in srgb, var(--card) 98%, var(--bg) 2%) !important; box-shadow:0 10px 24px rgba(12,23,38,.055) !important; } #screenStudent .studentLevelCard, #screenStudent .studentCycleSection{ height:100% !important; min-height:188px !important; align-content:space-between !important; } #screenStudent .studentLevelCard{ grid-area:summary !important; } #screenStudent .studentCycleSection{ grid-area:cycle !important; } #screenStudent .studentLevelProfile{ align-items:flex-start !important; gap:14px !important; } #screenStudent .studentIdentityAvatar{ width:48px !important; height:48px !important; flex-basis:48px !important; border-radius:14px !important; } #screenStudent .studentIdentityName{ font-size:13px !important; line-height:1.15 !important; } #screenStudent .studentLevelBadge{ margin-top:2px !important; font-size:25px !important; line-height:1.08 !important; } #screenStudent .studentIdentitySub{ font-size:14px !important; } #screenStudent .studentLevelActions{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; margin-top:12px !important; } #screenStudent #studentHeroContinueBtn{ display:none !important; } #screenStudent .studentStudyLevelBtn, #screenStudent .studentMonthlyCycleBtn, #screenStudent .studentMonthlyHistoryBtn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:40px !important; padding:9px 14px !important; border-radius:999px !important; font-size:13px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap !important; } #screenStudent .studentStudyLevelBtn::after{ content:""; width:7px; height:7px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); } #screenStudent .studentMonthlyCycleCard{ height:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto auto 1fr auto !important; gap:8px 12px !important; align-content:stretch !important; } #screenStudent .studentMonthlyCycleLabel{ grid-column:1 / -1 !important; font-size:18px !important; } #screenStudent .studentMonthlyCyclePhase{ grid-column:1 !important; grid-row:2 !important; color:var(--text) !important; font-size:22px !important; line-height:1.1 !important; font-weight:950 !important; } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ grid-column:2 !important; grid-row:2 !important; align-self:start !important; justify-self:end !important; min-height:30px !important; padding:6px 10px !important; border:1px solid color-mix(in srgb, var(--student-amber) 32%, var(--border) 68%) !important; border-radius:999px !important; background:color-mix(in srgb, var(--student-amber) 11%, var(--card) 89%) !important; color:var(--text) !important; } #screenStudent .studentMonthlyCycleMeta{ grid-column:1 / -1 !important; grid-row:3 !important; font-size:14px !important; } #screenStudent .studentMonthlyCycleBtn{ grid-column:1 !important; grid-row:5 !important; justify-self:start !important; align-self:end !important; } #screenStudent .studentMonthlyCard{ grid-area:monthly !important; padding:24px !important; gap:18px !important; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ font-size:26px !important; line-height:1.08 !important; } #screenStudent .studentMonthlySubtitle{ margin-top:5px !important; font-size:15px !important; } #screenStudent .studentMonthlyHelp{ margin-top:5px !important; font-size:14px !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:14px !important; align-items:stretch !important; } #screenStudent .studentMonthlyReviewRow{ min-height:164px !important; height:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto minmax(54px,auto) auto 1fr auto !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; align-content:stretch !important; align-items:start !important; gap:10px !important; padding:14px !important; border-radius:16px !important; } #screenStudent .studentMonthlyReviewIcon{ width:40px !important; height:40px !important; border-radius:13px !important; } #screenStudent .studentMonthlyReviewMain{ display:grid !important; grid-template-rows:auto auto !important; align-content:start !important; gap:7px !important; } #screenStudent .studentMonthlyReviewName{ font-size:15px !important; line-height:1.18 !important; } #screenStudent .studentMonthlyReviewState{ width:max-content !important; max-width:100% !important; min-height:24px !important; padding:5px 8px !important; } #screenStudent .studentMonthlyReviewCount{ justify-self:start !important; align-self:start !important; color:var(--muted) !important; font-size:13px !important; } #screenStudent .studentMonthlyReviewProgress{ align-self:end !important; height:7px !important; } #screenStudent .studentMonthlyReviewAction{ width:100% !important; justify-self:stretch !important; min-height:38px !important; padding:9px 10px !important; } #screenStudent .studentProgressHistoryCard{ grid-area:history !important; display:grid !important; grid-template-columns:1fr !important; gap:16px !important; padding:24px !important; } #screenStudent .studentProgressHead{ display:block !important; } #screenStudent .studentHistoryPreview{ display:block !important; } #screenStudent .studentSelectedMonthCard{ display:grid !important; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr) !important; gap:18px !important; align-items:stretch !important; padding:18px !important; border-radius:16px !important; } #screenStudent .studentSelectedMonthTop{ display:grid !important; grid-template-columns:1fr !important; align-content:center !important; gap:10px !important; } #screenStudent .studentSelectedMonthName{ font-size:24px !important; } #screenStudent .studentSelectedMonthLine{ margin-top:0 !important; } #screenStudent .studentSelectedMonthMetrics{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:10px !important; align-self:stretch !important; } #screenStudent .studentSelectedMonthMetrics div{ min-height:78px !important; display:grid !important; align-content:center !important; justify-content:stretch !important; gap:7px !important; padding:12px !important; } #screenStudent .studentSelectedMonthMetrics b{ font-size:16px !important; } #screenStudent .studentMonthlyHistoryBtn{ justify-self:start !important; grid-column:auto !important; align-self:auto !important; } } @media (min-width:768px) and (max-width:1023px){ #screenStudent #studentStatsView.studentDashboardMobile{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-template-areas: "summary cycle" "monthly monthly" "history history" !important; gap:16px !important; } #screenStudent .studentLevelCard, #screenStudent .studentCycleSection{ min-height:172px !important; } #screenStudent .studentLevelActions{ display:flex !important; } #screenStudent #studentHeroContinueBtn{ display:none !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:10px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:142px !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; } #screenStudent .studentSelectedMonthCard{ grid-template-columns:minmax(0,1fr) minmax(260px,.85fr) !important; } #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } } /* Student UX redesign: dashboard on desktop, learning app on mobile */ body[data-current-route="student"] #tabs{ display:none !important; } body[data-current-route="student"] .appTopbar .roleSeg, body[data-current-route="student"] #themeBtn.appTopbarChip, body[data-current-route="student"] #statusPill{ display:none !important; } body[data-current-route="student"] .topbar.appTopbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding:12px 16px; border-radius:18px; } body[data-current-route="student"] .appTopbarRight{ display:flex; justify-content:flex-end; gap:8px; margin-left:auto; } body[data-current-route="student"] #studentStudyLevelNavBtn.studyLevelNavBtn{ display:inline-flex !important; align-items:center; gap:7px; min-height:38px; padding:0 13px; border-radius:999px; border-color:color-mix(in srgb, #6f6bcf 28%, var(--border) 72%); background:color-mix(in srgb, #6f6bcf 9%, var(--card) 91%); color:var(--text); font-size:13px; font-weight:950; white-space:nowrap; } body[data-current-route="student"] #studentStudyLevelNavBtn.studyLevelNavBtn::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.78; } #screenStudent{ --student-green:#328f69; --student-violet:#6f6bcf; --student-amber:#d99132; --student-red:#d35c52; --student-line:color-mix(in srgb, var(--border) 80%, transparent); --student-card:color-mix(in srgb, var(--card) 97%, var(--bg) 3%); --student-shadow:0 10px 26px rgba(12,23,38,.06); padding-bottom:96px; } #screenStudent, #screenStudent *{ box-sizing:border-box; min-width:0; } #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 1160px) !important; max-width:1160px !important; margin:0 auto !important; padding:0 0 32px !important; display:grid !important; grid-template-columns:1fr !important; gap:12px !important; align-items:start !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ display:grid !important; gap:14px !important; padding:16px !important; border:1px solid var(--student-line) !important; border-radius:18px !important; background:var(--student-card) !important; box-shadow:var(--student-shadow) !important; overflow:visible !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card::before{ content:none !important; } #screenStudent .studentLevelCard{ grid-area:summary; align-items:center !important; background: linear-gradient(180deg, color-mix(in srgb, var(--student-green) 7%, var(--card) 93%) 0%, var(--student-card) 100%) !important; } #screenStudent .studentLevelProfile{ display:flex !important; align-items:center !important; gap:12px !important; } #screenStudent .studentIdentityAvatar{ width:46px !important; height:46px !important; flex:0 0 46px !important; border-radius:14px !important; border:1px solid color-mix(in srgb, var(--student-amber) 34%, var(--border) 66%) !important; background:color-mix(in srgb, var(--student-amber) 18%, var(--card) 82%) !important; box-shadow:none !important; font-size:14px !important; } #screenStudent .studentLevelCopy{ display:grid !important; gap:4px !important; } #screenStudent .studentIdentityName{ color:var(--muted) !important; font-size:13px !important; line-height:1.15 !important; font-weight:900 !important; letter-spacing:0 !important; } #screenStudent .studentLevelBadge{ width:auto !important; max-width:100% !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--text) !important; font-size:20px !important; line-height:1.12 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentIdentitySub{ color:var(--muted) !important; font-size:13px !important; line-height:1.3 !important; font-weight:800 !important; } #screenStudent .studentLevelActions, #screenStudent #studentHeroContinueBtn, #screenStudent .studentLeaderboardCard, #screenStudent .studentMonthlyExamPanel, #screenStudent .studentMonthlyJourneyPath{ display:none !important; } #screenStudent .studentMonthlyCard{ grid-area:monthly; gap:16px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--student-violet) 6%, var(--card) 94%) 0%, var(--student-card) 100%) !important; } #screenStudent .studentMonthlyHead{ display:grid !important; grid-template-columns:1fr !important; gap:4px !important; align-items:start !important; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ margin:0 !important; color:var(--text) !important; font-size:22px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:0 !important; text-transform:none !important; } #screenStudent .studentMonthlySubtitle{ margin:0 !important; color:var(--muted) !important; font-size:13px !important; line-height:1.25 !important; font-weight:900 !important; } #screenStudent .studentMonthlyHelp{ display:block !important; margin-top:4px !important; color:var(--muted) !important; font-size:13px !important; line-height:1.3 !important; font-weight:750 !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:1fr !important; gap:9px !important; margin:0 !important; padding:0 !important; } #screenStudent .studentMonthlyReviewRow{ position:relative; display:grid !important; grid-template-columns:36px minmax(0,1fr) auto !important; grid-template-areas: "icon main count" "icon progress action" !important; align-items:center !important; gap:8px 10px !important; min-height:64px !important; padding:10px !important; border:1px solid var(--student-line) !important; border-radius:14px !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; box-shadow:none !important; opacity:1 !important; filter:none !important; } #screenStudent .studentMonthlyReviewRow::before{ content:none !important; } #screenStudent .studentMonthlyReviewIcon{ grid-area:icon; width:36px !important; height:36px !important; display:grid !important; place-items:center !important; border:1px solid var(--student-line) !important; border-radius:12px !important; background:var(--card) !important; color:var(--text) !important; font-size:12px !important; line-height:1 !important; font-weight:950 !important; } #screenStudent .studentMonthlyReviewMain{ grid-area:main; display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:6px 8px !important; } #screenStudent .studentMonthlyReviewName{ color:var(--text) !important; font-size:14px !important; line-height:1.15 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyReviewState{ min-height:22px; display:inline-flex !important; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; background:var(--card); color:var(--muted) !important; font-size:11px !important; line-height:1 !important; font-weight:950 !important; } #screenStudent .studentMonthlyReviewCount{ grid-area:count; justify-self:end !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--text) !important; font-size:12px !important; line-height:1.1 !important; font-weight:950 !important; white-space:nowrap; } #screenStudent .studentMonthlyReviewProgress{ grid-area:progress; width:100%; height:6px !important; margin:0 !important; border:0 !important; border-radius:999px !important; background:color-mix(in srgb, var(--chip) 46%, var(--card) 54%) !important; overflow:hidden !important; } #screenStudent .studentMonthlyReviewFill{ height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--student-green), var(--student-violet)) !important; } #screenStudent .studentMonthlyReviewAction{ grid-area:action; justify-self:end; min-height:30px !important; min-width:68px; padding:6px 10px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap; } #screenStudent .studentMonthlyReviewRow:not(.isCurrent) .studentMonthlyReviewAction{ display:none !important; } #screenStudent .studentMonthlyReviewRow.isComplete{ border-color:color-mix(in srgb, var(--student-green) 44%, var(--border) 56%) !important; background:color-mix(in srgb, var(--student-green) 8%, var(--card) 92%) !important; } #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewIcon{ background:var(--student-green) !important; border-color:var(--student-green) !important; color:#fff !important; } #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewState{ color:var(--text) !important; background:color-mix(in srgb, var(--student-green) 15%, var(--card) 85%) !important; } #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:color-mix(in srgb, var(--student-violet) 48%, var(--border) 52%) !important; background:color-mix(in srgb, var(--student-violet) 10%, var(--card) 90%) !important; box-shadow:0 10px 22px rgba(12,23,38,.07) !important; } #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewIcon, #screenStudent .studentMonthlyReviewRow.isExam.isCurrent .studentMonthlyReviewIcon{ border-color:color-mix(in srgb, var(--student-violet) 54%, var(--border) 46%) !important; background:color-mix(in srgb, var(--student-violet) 17%, var(--card) 83%) !important; } #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ color:var(--text) !important; background:color-mix(in srgb, var(--student-violet) 15%, var(--card) 85%) !important; } #screenStudent .studentMonthlyReviewRow.isLocked{ opacity:.62 !important; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%) !important; } #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewIcon, #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewName, #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewCount{ color:var(--muted) !important; } #screenStudent .studentMonthlyReviewRow.isExam:not(.isCurrent):not(.isComplete){ border-color:color-mix(in srgb, var(--student-amber) 34%, var(--border) 66%) !important; background:color-mix(in srgb, var(--student-amber) 7%, var(--card) 93%) !important; } #screenStudent .studentCycleSection{ grid-area:cycle; align-content:start; } #screenStudent .studentMonthlyCycleCard{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:6px 10px !important; align-items:center !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } #screenStudent .studentMonthlyCycleLabel{ grid-column:1 / -1; color:var(--text) !important; font-size:18px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyCycleMonth{ display:none !important; } #screenStudent .studentMonthlyCyclePhase{ color:var(--muted) !important; font-size:13px !important; line-height:1.2 !important; font-weight:950 !important; padding:0 !important; border:0 !important; background:transparent !important; } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ justify-self:end; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--text) !important; font-size:13px !important; line-height:1.2 !important; font-weight:950 !important; } #screenStudent .studentMonthlyCycleMeta{ grid-column:1; color:var(--muted) !important; font-size:12px !important; line-height:1.3 !important; font-weight:800 !important; } #screenStudent .studentMonthlyCycleBtn{ grid-column:2; grid-row:3; justify-self:end !important; min-height:34px !important; padding:7px 11px !important; border-radius:999px !important; font-size:12px !important; font-weight:950 !important; } #screenStudent .studentProgressHistoryCard{ grid-area:history; gap:14px !important; align-content:start; } #screenStudent .studentProgressHead{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; } #screenStudent .studentProgressHistorySubtitle{ display:none !important; } #screenStudent .studentHistoryPreview{ display:block !important; margin:0 !important; padding:0 !important; } #screenStudent .studentSelectedMonthCard{ display:grid !important; gap:12px !important; min-height:0 !important; padding:14px !important; border:1px solid var(--student-line) !important; border-radius:14px !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; box-shadow:none !important; } #screenStudent .studentSelectedMonthTop{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; } #screenStudent .studentSelectedMonthName{ color:var(--text) !important; font-size:20px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentSelectedMonthLine{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; } #screenStudent .studentSelectedMonthStatus, #screenStudent .studentSelectedMonthPoints{ min-height:26px; display:inline-flex; align-items:center; padding:5px 8px !important; border:1px solid var(--student-line); border-radius:999px; background:var(--card); color:var(--muted) !important; font-size:12px !important; line-height:1 !important; font-weight:950 !important; } #screenStudent .studentSelectedMonthCard.is-complete .studentSelectedMonthStatus{ color:var(--text) !important; border-color:color-mix(in srgb, var(--student-green) 42%, var(--border) 58%); background:color-mix(in srgb, var(--student-green) 12%, var(--card) 88%); } #screenStudent .studentSelectedMonthExam{ justify-self:end; color:var(--text) !important; font-size:13px !important; line-height:1.2 !important; font-weight:950 !important; text-align:right; } #screenStudent .studentSelectedMonthMetrics{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #screenStudent .studentSelectedMonthMetrics div{ min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid var(--student-line); border-radius:12px; background:var(--card); } #screenStudent .studentSelectedMonthMetrics span{ color:var(--muted); font-size:12px; line-height:1.1; font-weight:850; } #screenStudent .studentSelectedMonthMetrics b{ color:var(--text); font-size:14px; line-height:1; font-weight:950; white-space:nowrap; } #screenStudent .studentMonthlyHistoryBtn{ justify-self:start !important; width:auto !important; min-height:36px !important; padding:8px 13px !important; border-radius:999px !important; font-size:12px !important; font-weight:950 !important; white-space:nowrap; } #screenStudent .studentMonthlyCyclePanel, #screenStudent .studentMonthlyHistoryPanel, #screenStudent .studentStudyLevelPanel{ position:fixed !important; inset:0 !important; z-index:230 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; background:rgba(9,18,30,.40) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } #screenStudent .studentMonthlyCyclePanel[hidden], #screenStudent .studentMonthlyHistoryPanel[hidden], #screenStudent .studentStudyLevelPanel[hidden]{ display:none !important; } #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ width:min(760px, 96vw) !important; max-height:min(84vh, 760px) !important; overflow:auto !important; display:grid !important; gap:14px !important; padding:18px !important; border:1px solid var(--student-line) !important; border-radius:20px !important; background:var(--card) !important; box-shadow:0 24px 64px rgba(7,15,28,.24) !important; animation:studentDialogRiseFinal 220ms ease-out both; overscroll-behavior:contain; } #screenStudent .studentMonthlyHistorySheet{ width:min(880px, 96vw) !important; grid-template-rows:auto minmax(0,1fr); } @keyframes studentDialogRiseFinal{ from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} } #screenStudent .studentMonthlyCycleModalHead, #screenStudent .studentMonthlyHistoryModalHead, #screenStudent .studentStudyLevelModalHead{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:12px !important; } #screenStudent .studentMonthlyCycleModalHead h3, #screenStudent .studentMonthlyHistoryModalHead h3, #screenStudent .studentStudyLevelModalHead h3{ margin:0 !important; color:var(--text) !important; font-size:22px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyCycleCloseBtn, #screenStudent .studentMonthlyHistoryCloseBtn, #screenStudent .studentStudyLevelCloseBtn{ min-height:34px !important; padding:7px 11px !important; border-radius:999px !important; font-size:12px !important; } #screenStudent .studentMonthlyCycleTimeline{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } #screenStudent .studentMonthlyCycleTimelineItem{ min-height:0 !important; display:grid !important; gap:6px !important; padding:12px !important; border:1px solid var(--student-line) !important; border-radius:14px !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; } #screenStudent .studentMonthlyCycleTimelineItem span{ color:var(--student-violet); font-size:12px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyCycleTimelineItem b{ color:var(--text); font-size:15px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyCycleTimelineItem p, #screenStudent .studentMonthlyCycleCurrent p{ margin:0; color:var(--muted); font-size:12px; line-height:1.35; font-weight:750; } #screenStudent .studentMonthlyCycleCurrent{ padding:12px; border:1px solid color-mix(in srgb, var(--student-amber) 34%, var(--border) 66%); border-radius:14px; background:color-mix(in srgb, var(--student-amber) 8%, var(--card) 92%); } #screenStudent .studentMonthlyCycleCurrent div{ display:grid; gap:4px; } #screenStudent .studentMonthlyCycleCurrent span{ color:var(--muted); font-size:11px; line-height:1.1; font-weight:950; text-transform:uppercase; letter-spacing:.06em; } #screenStudent .studentMonthlyCycleCurrent b, #screenStudent .studentMonthlyCycleCurrent strong{ color:var(--text); font-size:15px; line-height:1.15; font-weight:950; } #screenStudent .studentMonthlyHistoryArchive{ min-height:0; display:grid !important; grid-template-columns:minmax(300px,.95fr) minmax(320px,1.05fr) !important; gap:16px !important; } #screenStudent .studentMonthlyHistoryList{ min-height:0; display:grid !important; grid-template-columns:1fr !important; gap:14px !important; overflow:auto; padding-right:4px; } #screenStudent .studentMonthlyHistoryYearGroup{ display:grid; gap:9px; } #screenStudent .studentMonthlyHistoryYearGroup h4{ margin:0 !important; color:var(--muted) !important; font-size:12px !important; line-height:1.1 !important; font-weight:950 !important; letter-spacing:.06em !important; text-transform:uppercase !important; } #screenStudent .studentMonthlyHistoryYearGrid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentHistoryMonthCard.isCompact{ min-height:46px !important; display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:center !important; gap:7px !important; padding:9px 10px !important; border:1px solid var(--student-line) !important; border-radius:12px !important; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%) !important; color:var(--muted) !important; text-align:left !important; box-shadow:none !important; cursor:pointer; } #screenStudent .studentHistoryMonthCard.isCompact:hover{ transform:none !important; border-color:color-mix(in srgb, var(--student-violet) 28%, var(--border) 72%) !important; box-shadow:none !important; } #screenStudent .studentHistoryMonthCard.isCompact .studentHistoryMonthDot{ width:7px; height:7px; border-radius:999px; background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, transparent); } #screenStudent .studentHistoryMonthCard.isCompact.hasData .studentHistoryMonthDot{ background:var(--student-green); box-shadow:none; } #screenStudent .studentHistoryMonthCard.isCompact .studentHistoryMonthShort{ color:inherit; font-size:13px; line-height:1.1; font-weight:950; } #screenStudent .studentHistoryMonthCard.isCompact.hasNoData{ opacity:.55; } #screenStudent .studentHistoryMonthCard.isCompact.isSelected, #screenStudent .studentHistoryMonthCard.isCompact.isCurrentMonth.isSelected{ color:var(--text) !important; border-color:color-mix(in srgb, var(--student-violet) 54%, var(--border) 46%) !important; background:color-mix(in srgb, var(--student-violet) 12%, var(--card) 88%) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--student-violet) 14%, transparent) !important; opacity:1; } #screenStudent .studentMonthlyHistoryDetail{ min-height:0; display:grid !important; align-content:start; gap:12px !important; padding:14px !important; border:1px solid var(--student-line) !important; border-radius:14px !important; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%) !important; overflow:auto; } #screenStudent .studentMonthlyDetailMonth{ color:var(--text) !important; font-size:24px !important; line-height:1.05 !important; font-weight:950 !important; } #screenStudent .studentMonthlyDetailGrid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentMonthlyDetailMetric{ min-height:68px !important; padding:10px !important; border-radius:12px !important; } #screenStudent .studentStudyLevelOptions{ display:grid !important; gap:8px !important; } #screenStudent .studentStudyLevelOption{ min-height:58px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:10px !important; padding:11px 12px !important; border:1px solid var(--student-line) !important; border-radius:14px !important; background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%) !important; } #screenStudent .studentStudyLevelOption.isCurrent{ border-color:color-mix(in srgb, var(--student-green) 44%, var(--border) 56%) !important; background:color-mix(in srgb, var(--student-green) 9%, var(--card) 91%) !important; } #screenStudent .studentStudyLevelOption.isLocked{ opacity:.62; filter:saturate(.75); } #screenStudent .studentStudyLevelOption .btn{ display:none !important; } #screenStudent .studentAiFab{ position:fixed; right:22px; bottom:22px; z-index:220; width:56px; height:56px; display:grid; place-items:center; border:0; border-radius:999px; background:linear-gradient(135deg, #128476, #0d6f66); color:#fff; box-shadow:0 16px 36px rgba(13,111,102,.24); cursor:pointer; font:inherit; font-size:14px; font-weight:950; line-height:1; touch-action:manipulation; transition:transform 160ms ease, box-shadow 180ms ease, filter 180ms ease; } #screenStudent .studentAiFab:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 18px 40px rgba(13,111,102,.30); } #screenStudent .studentAiBackdrop{ position:fixed; inset:0; z-index:235; background:rgba(9,18,30,.28); opacity:0; pointer-events:none; transition:opacity 220ms ease-out; } #screenStudent .studentAiBackdrop.open{ opacity:1; pointer-events:auto; } #screenStudent .studentAiBackdrop[hidden], #screenStudent .studentAiPanel[hidden]{ display:none !important; } #screenStudent .studentAiPanel{ position:fixed; right:22px; bottom:88px; z-index:240; width:min(390px, calc(100vw - 28px)); height:min(540px, calc(100svh - 126px)); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; padding:14px; border:1px solid var(--student-line); border-radius:18px; background:var(--card); box-shadow:0 24px 64px rgba(7,15,28,.22); opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity 220ms ease-out, transform 220ms ease-out; overflow:hidden; } #screenStudent .studentAiPanel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } #screenStudent .studentAiHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); } #screenStudent .studentAiTitle{ color:var(--text); font-size:17px; line-height:1.15; font-weight:950; letter-spacing:0; } #screenStudent .studentAiSub{ margin-top:3px; color:var(--muted); font-size:12px; line-height:1.25; font-weight:800; } #screenStudent .studentAiCloseBtn{ min-height:32px !important; padding:6px 10px !important; border-radius:999px !important; font-size:12px !important; } #screenStudent .studentAiMessages{ min-height:0; overflow-y:auto; padding:10px; border:1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius:14px; background:color-mix(in srgb, var(--bg) 84%, var(--card) 16%); overscroll-behavior:contain; scroll-behavior:smooth; } #screenStudent .studentAiComposer{ display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:center; padding:8px; border:1px solid color-mix(in srgb, var(--border) 76%, transparent); border-radius:14px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } #screenStudent .studentAiComposer .input{ min-height:40px; width:100%; border-radius:999px; font-size:14px; } #screenStudent #studentAiSendBtn{ width:44px; min-width:44px; min-height:40px; display:grid !important; place-items:center; position:relative; padding:0 !important; border-radius:999px !important; font-size:0; overflow:hidden; box-shadow:0 10px 22px rgba(13,111,102,.18); } @media (min-width:1024px){ #screenStudent #studentStatsView.studentDashboardMobile{ grid-template-columns:minmax(0,1fr) minmax(300px,340px) !important; grid-template-areas: "monthly summary" "monthly cycle" "history history" !important; gap:16px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:20px !important; border-radius:18px !important; } #screenStudent .studentMonthlyCard{ min-height:100%; padding:22px !important; } #screenStudent .studentMonthlyTitle{ font-size:26px !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:10px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:140px !important; grid-template-columns:minmax(0,1fr) !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; align-content:start !important; align-items:start !important; padding:12px !important; } #screenStudent .studentMonthlyReviewIcon{ width:38px !important; height:38px !important; } #screenStudent .studentMonthlyReviewMain{ display:grid !important; gap:6px !important; align-items:start !important; } #screenStudent .studentMonthlyReviewName{ font-size:14px !important; } #screenStudent .studentMonthlyReviewState{ justify-self:start; } #screenStudent .studentMonthlyReviewCount{ justify-self:start !important; } #screenStudent .studentMonthlyReviewProgress{ align-self:end; } #screenStudent .studentMonthlyReviewAction{ justify-self:stretch; width:100%; } #screenStudent .studentLevelCard, #screenStudent .studentCycleSection{ min-height:0 !important; } #screenStudent .studentProgressHistoryCard{ grid-template-columns:minmax(0,1fr) auto !important; align-items:start !important; } #screenStudent .studentProgressHead{ grid-column:1 / -1 !important; } #screenStudent .studentHistoryPreview{ grid-column:1 !important; } #screenStudent .studentMonthlyHistoryBtn{ grid-column:2 !important; align-self:start !important; } #screenStudent .studentSelectedMonthCard{ grid-template-columns:minmax(0,1fr) minmax(220px,.45fr) !important; align-items:center; } #screenStudent .studentSelectedMonthTop{ grid-template-columns:minmax(0,1fr) auto; } #screenStudent .studentSelectedMonthMetrics{ align-self:stretch; } } @media (min-width:768px) and (max-width:1023px){ #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 920px) !important; max-width:920px !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-areas: "summary cycle" "monthly monthly" "history history" !important; gap:14px !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #screenStudent .studentMonthlyReviewRow{ min-height:92px !important; } } @media (max-width:767px){ body.mobile-layout[data-current-route="student"] .topbar.appTopbar{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; min-height:48px !important; padding:7px 8px !important; border-radius:14px !important; } body.mobile-layout[data-current-route="student"] .appTopbarLeft, body.mobile-layout[data-current-route="student"] .appTopbarRight{ width:auto !important; min-width:0 !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand b{ font-size:18px !important; line-height:1 !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand .pill, body.mobile-layout[data-current-route="student"] .appTopbar .roleSeg, body.mobile-layout[data-current-route="student"] #loginBtn.appTopbarChip, body.mobile-layout[data-current-route="student"] #logoutBtn.appTopbarChip, body.mobile-layout[data-current-route="student"] .appTopbarAvatar{ display:none !important; } body.mobile-layout[data-current-route="student"] #studentStudyLevelNavBtn.appTopbarChip{ display:inline-flex !important; height:34px !important; min-height:34px !important; padding:0 11px !important; font-size:12px !important; } body.mobile-layout[data-current-route="student"] #bottomNav .bottomNavBtn[data-route="ai"], body.mobile-layout[data-current-route="student"] #bottomNav .bottomNavBtn[data-route="teacher"]{ display:none !important; } #screenStudent{ padding-bottom:calc(116px + env(safe-area-inset-bottom)); } #screenStudent #studentStatsView.studentDashboardMobile{ width:100% !important; max-width:560px !important; gap:10px !important; padding:0 2px 18px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:14px !important; border-radius:16px !important; } #screenStudent .studentLevelCard{ padding:13px 14px !important; } #screenStudent .studentIdentityAvatar, #screenStudent .studentIdentityName{ display:none !important; } #screenStudent .studentLevelProfile{ gap:0 !important; } #screenStudent .studentLevelBadge{ font-size:18px !important; } #screenStudent .studentIdentitySub{ font-size:13px !important; } #screenStudent .studentMonthlyTitle, #screenStudent .studentProgressHead h3{ font-size:20px !important; } #screenStudent .studentMonthlyReviewRow{ min-height:60px !important; padding:9px !important; grid-template-columns:34px minmax(0,1fr) auto !important; gap:7px 9px !important; } #screenStudent .studentMonthlyReviewIcon{ width:34px !important; height:34px !important; } #screenStudent .studentMonthlyReviewName{ font-size:13px !important; } #screenStudent .studentMonthlyReviewState{ font-size:10px !important; min-height:20px; padding:4px 7px; } #screenStudent .studentMonthlyCycleBtn, #screenStudent .studentMonthlyHistoryBtn{ grid-column:1 / -1 !important; width:100% !important; justify-self:stretch !important; } #screenStudent .studentSelectedMonthTop{ grid-template-columns:1fr !important; } #screenStudent .studentSelectedMonthExam{ justify-self:start; text-align:left; } #screenStudent .studentMonthlyCyclePanel, #screenStudent .studentMonthlyHistoryPanel, #screenStudent .studentStudyLevelPanel{ align-items:flex-end !important; padding:0 !important; background:rgba(9,18,30,.45) !important; } #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ width:100% !important; max-height:84svh !important; border-radius:22px 22px 0 0 !important; padding:14px !important; animation:studentSheetUpFinal 240ms ease-out both; } @keyframes studentSheetUpFinal{ from{transform:translateY(100%)} to{transform:translateY(0)} } #screenStudent .studentMonthlyCycleTimeline, #screenStudent .studentMonthlyHistoryArchive{ grid-template-columns:1fr !important; } #screenStudent .studentMonthlyHistoryList{ overflow:visible; padding-right:0; } #screenStudent .studentMonthlyHistoryYearGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } #screenStudent .studentMonthlyDetailGrid{ grid-template-columns:1fr !important; } #screenStudent .studentAiFab{ right:16px; bottom:calc(82px + env(safe-area-inset-bottom)); width:56px; height:56px; } #screenStudent .studentAiBackdrop{ background:rgba(9,18,30,.44); } #screenStudent .studentAiPanel{ left:0; right:0; bottom:0; width:100%; height:min(82svh, 720px); max-height:82svh; padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); border-right:0; border-left:0; border-bottom:0; border-radius:22px 22px 0 0; opacity:1; transform:translateY(100%); transition:transform 240ms ease-out; } #screenStudent .studentAiPanel.open{ transform:translateY(0); } #screenStudent .studentAiComposer{ position:sticky; bottom:0; } } @media (prefers-reduced-motion:reduce){ #screenStudent .studentAiPanel, #screenStudent .studentAiBackdrop, #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ animation:none !important; transition:none !important; } } /* Final desktop-only student dashboard override. Do not stretch a mobile layout onto desktop. */ @media (min-width:1024px){ #screenStudent #studentStatsView.studentDashboardMobile{ width:min(100%, 1180px) !important; max-width:1180px !important; margin:0 auto !important; padding:4px 0 40px !important; display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-template-areas: "summary cycle" "monthly monthly" "history history" !important; gap:20px !important; align-items:stretch !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:22px !important; border-radius:18px !important; border:1px solid color-mix(in srgb, var(--border) 78%, transparent) !important; background:color-mix(in srgb, var(--card) 98%, var(--bg) 2%) !important; box-shadow:0 10px 24px rgba(12,23,38,.055) !important; } #screenStudent .studentLevelCard{ grid-area:summary !important; } #screenStudent .studentCycleSection{ grid-area:cycle !important; } #screenStudent .studentLevelCard, #screenStudent .studentCycleSection{ min-height:188px !important; height:100% !important; align-content:space-between !important; } #screenStudent .studentIdentityAvatar{ display:none !important; } #screenStudent .studentLevelProfile{ gap:0 !important; align-items:flex-start !important; } #screenStudent .studentLevelActions{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; margin-top:12px !important; } #screenStudent #studentHeroContinueBtn{ display:none !important; } #screenStudent .studentStudyLevelBtn, #screenStudent .studentMonthlyCycleBtn, #screenStudent .studentMonthlyHistoryBtn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-height:40px !important; padding:9px 14px !important; border-radius:999px !important; font-size:13px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap !important; } #screenStudent .studentStudyLevelBtn::after{ content:""; width:7px; height:7px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); } #screenStudent .studentMonthlyCycleCard{ height:100% !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto auto 1fr auto !important; gap:8px 12px !important; align-content:stretch !important; } #screenStudent .studentMonthlyCyclePhase{ grid-column:1 !important; grid-row:2 !important; color:var(--text) !important; font-size:22px !important; line-height:1.1 !important; font-weight:950 !important; } #screenStudent .studentMonthlyCycleCard .studentMonthlyCountdown{ grid-column:2 !important; grid-row:2 !important; justify-self:end !important; min-height:30px !important; padding:6px 10px !important; border:1px solid color-mix(in srgb, var(--student-amber) 32%, var(--border) 68%) !important; border-radius:999px !important; background:color-mix(in srgb, var(--student-amber) 11%, var(--card) 89%) !important; } #screenStudent .studentMonthlyCycleMeta{ grid-column:1 / -1 !important; grid-row:3 !important; font-size:14px !important; } #screenStudent .studentMonthlyCycleBtn{ grid-column:1 !important; grid-row:5 !important; justify-self:start !important; align-self:end !important; } #screenStudent .studentMonthlyCard{ grid-area:monthly !important; padding:24px !important; gap:18px !important; } #screenStudent .studentMonthlyHelp{ display:none !important; } #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:14px !important; align-items:stretch !important; } #screenStudent .studentMonthlyReviewRow{ min-height:164px !important; height:100% !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto minmax(54px,auto) auto 1fr auto !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; align-content:stretch !important; align-items:start !important; gap:10px !important; padding:14px !important; border-radius:16px !important; } #screenStudent .studentMonthlyReviewIcon{ width:40px !important; height:40px !important; } #screenStudent .studentMonthlyReviewMain{ display:grid !important; grid-template-rows:auto auto !important; gap:7px !important; } #screenStudent .studentMonthlyReviewCount{ justify-self:start !important; color:var(--muted) !important; } #screenStudent .studentMonthlyReviewAction{ width:100% !important; justify-self:stretch !important; min-height:38px !important; } #screenStudent .studentProgressHistoryCard{ grid-area:history !important; grid-template-columns:1fr !important; gap:16px !important; padding:24px !important; } #screenStudent .studentSelectedMonthCard{ grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr) !important; gap:18px !important; padding:18px !important; border-radius:16px !important; } #screenStudent .studentSelectedMonthTop{ grid-template-columns:1fr !important; align-content:center !important; } #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:10px !important; } #screenStudent .studentSelectedMonthMetrics div{ min-height:78px !important; display:grid !important; align-content:center !important; gap:7px !important; padding:12px !important; } #screenStudent .studentMonthlyHistoryBtn{ justify-self:start !important; grid-column:auto !important; align-self:auto !important; } } /* Final monthly-loop anti-overlap fix. This must stay after the desktop layout override. */ @media (min-width:1024px){ #screenStudent .studentMonthlyReviewList{ grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)) !important; gap:14px !important; align-items:stretch !important; } #screenStudent .studentMonthlyReviewRow{ min-height:176px !important; overflow:hidden !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:40px minmax(54px,auto) 28px minmax(10px,1fr) minmax(0,auto) !important; grid-template-areas: "icon" "main" "count" "progress" "action" !important; row-gap:10px !important; } #screenStudent .studentMonthlyReviewIcon{ grid-area:icon !important; align-self:start !important; justify-self:start !important; } #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; display:grid !important; grid-template-rows:auto auto !important; align-content:start !important; gap:7px !important; min-height:54px !important; } #screenStudent .studentMonthlyReviewName{ display:block !important; max-width:100% !important; overflow-wrap:break-word !important; line-height:1.18 !important; } #screenStudent .studentMonthlyReviewState{ justify-self:start !important; align-self:start !important; max-width:100% !important; white-space:normal !important; } #screenStudent .studentMonthlyReviewCount{ grid-area:count !important; align-self:start !important; justify-self:start !important; width:max-content !important; max-width:100% !important; white-space:nowrap !important; line-height:1.1 !important; } #screenStudent .studentMonthlyReviewProgress{ grid-area:progress !important; align-self:end !important; width:100% !important; } #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; align-self:end !important; min-width:0 !important; } } /* Final cascade guard: keep mobile loop rows separated and AI as a mounted bottom sheet. */ @media (min-width:1024px){ #screenStudent .studentMonthlyReviewRow{ grid-template-rows:40px minmax(34px,auto) 26px 28px minmax(10px,1fr) minmax(0,auto) !important; grid-template-areas: "icon" "main" "state" "count" "progress" "action" !important; } #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:start !important; align-self:start !important; } } @media (max-width:767px){ body.no-scroll, body.student-ai-open{ overflow:hidden !important; } body.student-ai-open .appMainScroll{ overflow:hidden !important; overscroll-behavior:contain !important; } #screenStudent{ overflow-x:hidden !important; padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important; } #screenStudent #studentStatsView.studentDashboardMobile{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; max-width:560px !important; margin:0 auto !important; padding:0 2px 18px !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ padding:14px !important; border-radius:16px !important; } #screenStudent .studentLevelCard{ min-height:0 !important; padding:12px 14px !important; } #screenStudent .studentIdentityAvatar, #screenStudent .studentIdentityName, #screenStudent .studentLevelActions, #screenStudent .studentMonthlyHelp, #screenStudent .studentMonthlyJourneyPath, #screenStudent .studentMonthlyExamPanel{ display:none !important; } #screenStudent .studentMonthlyCard{ gap:12px !important; padding:15px !important; } #screenStudent .studentMonthlyTitle{ font-size:20px !important; line-height:1.12 !important; } #screenStudent .studentMonthlySubtitle{ margin-top:2px !important; font-size:13px !important; } #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; overflow:visible !important; } #screenStudent .studentMonthlyReviewList::before, #screenStudent .studentMonthlyReviewRow::before{ display:none !important; } #screenStudent .studentMonthlyReviewRow{ display:grid !important; grid-template-columns:34px minmax(0,1fr) auto !important; grid-template-areas: "icon main state" "icon count state" "progress progress progress" "action action action" !important; align-items:center !important; column-gap:12px !important; row-gap:5px !important; min-height:0 !important; height:auto !important; padding:13px !important; border-radius:14px !important; overflow:visible !important; } #screenStudent .studentMonthlyReviewIcon{ grid-area:icon !important; width:30px !important; height:30px !important; min-width:30px !important; align-self:center !important; justify-self:start !important; font-size:13px !important; } #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; min-width:0 !important; display:block !important; } #screenStudent .studentMonthlyReviewName{ min-width:0 !important; max-width:100% !important; font-size:15px !important; line-height:1.25 !important; white-space:normal !important; overflow-wrap:anywhere !important; } #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:end !important; align-self:center !important; max-width:96px !important; min-height:24px !important; padding:5px 8px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenStudent .studentMonthlyReviewCount{ grid-area:count !important; min-width:0 !important; justify-self:start !important; width:auto !important; max-width:100% !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--muted) !important; font-size:12px !important; line-height:1.25 !important; white-space:normal !important; } #screenStudent .studentMonthlyReviewProgress{ grid-area:progress !important; width:100% !important; height:7px !important; margin-top:4px !important; } #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; width:100% !important; min-height:38px !important; margin-top:4px !important; justify-self:stretch !important; } #screenStudent .studentMonthlyReviewRow:not(.isCurrent) .studentMonthlyReviewAction{ display:none !important; } #screenStudent .studentMonthlyCycleCard{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "label day" "phase phase" "meta button" !important; gap:5px 10px !important; align-items:center !important; } #screenStudent .studentMonthlyCycleLabel{ grid-area:label !important; } #screenStudent .studentMonthlyCountdown{ grid-area:day !important; justify-self:end !important; white-space:nowrap !important; } #screenStudent .studentMonthlyCyclePhase{ grid-area:phase !important; } #screenStudent .studentMonthlyCycleMeta{ grid-area:meta !important; } #screenStudent .studentMonthlyCycleBtn{ grid-area:button !important; width:auto !important; justify-self:end !important; white-space:nowrap !important; } #screenStudent .studentMonthlyCycleMonth{ display:none !important; } #screenStudent .studentProgressHistoryCard{ gap:12px !important; padding:14px !important; } #screenStudent .studentProgressHead h3{ font-size:19px !important; line-height:1.18 !important; } #screenStudent .studentSelectedMonthCard{ grid-template-columns:1fr !important; gap:12px !important; padding:13px !important; border-radius:14px !important; } #screenStudent .studentSelectedMonthTop{ grid-template-columns:minmax(0,1fr) !important; gap:8px !important; } #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentSelectedMonthMetrics div{ min-width:0 !important; padding:9px !important; border-radius:12px !important; } #screenStudent .studentMonthlyHistoryBtn{ width:100% !important; min-height:38px !important; justify-self:stretch !important; } #screenStudent .studentAiFab{ right:16px !important; bottom:calc(82px + env(safe-area-inset-bottom)) !important; z-index:1002 !important; } #screenStudent .studentAiBackdrop, #screenStudent .studentAiBackdrop[hidden]{ display:block !important; position:fixed !important; inset:0 !important; z-index:1000 !important; background:rgba(0,0,0,.28) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity 220ms ease-out, visibility 0s linear 220ms !important; } #screenStudent .studentAiBackdrop.open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transition:opacity 220ms ease-out, visibility 0s !important; } #screenStudent .studentAiPanel, #screenStudent .studentAiPanel[hidden]{ display:flex !important; flex-direction:column !important; position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100% !important; height:min(82svh,680px) !important; max-height:82svh !important; margin-top:0 !important; padding:0 !important; border-right:0 !important; border-left:0 !important; border-bottom:0 !important; border-radius:22px 22px 0 0 !important; opacity:1 !important; visibility:hidden !important; pointer-events:none !important; transform:translate3d(0,100%,0) !important; transition:transform 260ms cubic-bezier(.22,1,.36,1), visibility 0s linear 260ms !important; will-change:transform !important; overflow:hidden !important; z-index:1001 !important; } #screenStudent .studentAiPanel.open{ visibility:visible !important; pointer-events:auto !important; transform:translate3d(0,0,0) !important; transition:transform 260ms cubic-bezier(.22,1,.36,1), visibility 0s !important; } #screenStudent .studentAiHeader{ flex:0 0 auto !important; padding:14px 16px !important; } #screenStudent .studentAiMessages{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; margin:0 14px !important; padding:12px !important; } #screenStudent .studentAiComposer{ flex:0 0 auto !important; position:relative !important; bottom:auto !important; margin:12px 14px 0 !important; padding:10px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; } } @media (prefers-reduced-motion:reduce){ #screenStudent .studentAiPanel, #screenStudent .studentAiBackdrop{ transition:none !important; } } /* Final mobile rebuild: simple vertical student app, not a squeezed dashboard. */ .studentSelectedMonthExamLine{ display:none; } @media (max-width:767px){ body.mobile-layout[data-current-route="student"], body[data-current-route="student"]{ overflow-x:hidden !important; } body.no-scroll, body.student-ai-open{ overflow:hidden !important; } body.student-ai-open .appMainScroll{ overflow:hidden !important; overscroll-behavior:contain !important; } body.mobile-layout[data-current-route="student"] .topbar.appTopbar{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; min-height:48px !important; padding:12px 14px !important; border-radius:0 !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand{ min-width:0 !important; } body.mobile-layout[data-current-route="student"] .appTopbarBrand b{ font-size:18px !important; line-height:1 !important; letter-spacing:0 !important; } body.mobile-layout[data-current-route="student"] #studentStudyLevelNavBtn.appTopbarChip{ flex-shrink:0 !important; white-space:nowrap !important; height:34px !important; min-height:34px !important; padding:0 12px !important; border-radius:999px !important; } #screenStudent{ width:100% !important; margin-top:8px !important; overflow-x:hidden !important; padding:0 0 calc(112px + env(safe-area-inset-bottom)) !important; } #screenStudent #studentStatsView.studentDashboardMobile{ display:flex !important; flex-direction:column !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 14px 18px !important; gap:12px !important; box-sizing:border-box !important; } #screenStudent #studentStatsView.studentDashboardMobile > .card{ width:100% !important; max-width:100% !important; margin:0 !important; padding:16px !important; box-sizing:border-box !important; border-radius:16px !important; overflow:visible !important; } #screenStudent .studentLevelCard{ min-height:0 !important; } #screenStudent .studentIdentityAvatar, #screenStudent .studentIdentityName, #screenStudent .studentLevelActions{ display:none !important; } #screenStudent .studentLevelProfile, #screenStudent .studentLevelCopy{ display:block !important; width:100% !important; } #screenStudent .studentLevelBadge{ margin:0 !important; font-size:17px !important; line-height:1.25 !important; font-weight:950 !important; } #screenStudent .studentIdentitySub{ margin:3px 0 0 !important; font-size:13px !important; line-height:1.3 !important; } #screenStudent .studentMonthlyCard{ display:flex !important; flex-direction:column !important; gap:12px !important; } #screenStudent .studentMonthlyHead, #screenStudent .studentMonthlyHead > div{ display:block !important; width:100% !important; } #screenStudent .studentMonthlyTitle{ margin:0 !important; font-size:20px !important; line-height:1.2 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlySubtitle{ margin:3px 0 0 !important; font-size:13px !important; line-height:1.3 !important; } #screenStudent .studentMonthlyHelp{ display:block !important; margin:6px 0 0 !important; color:var(--muted) !important; font-size:13px !important; line-height:1.35 !important; } #screenStudent .studentMonthlyJourneyPath, #screenStudent .studentMonthlyExamPanel{ display:none !important; } #screenStudent .studentMonthlyReviewList{ display:flex !important; flex-direction:column !important; width:100% !important; gap:10px !important; margin:0 !important; overflow:visible !important; } #screenStudent .studentMonthlyReviewList::before, #screenStudent .studentMonthlyReviewRow::before{ display:none !important; } #screenStudent .studentMonthlyReviewRow{ position:static !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; width:100% !important; min-width:0 !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:14px !important; box-sizing:border-box !important; gap:6px !important; border-radius:14px !important; overflow:visible !important; } #screenStudent .studentMonthlyReviewIcon{ display:none !important; } #screenStudent .studentMonthlyReviewMain{ display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; } #screenStudent .studentMonthlyReviewName{ display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; color:var(--text) !important; font-size:15px !important; line-height:1.3 !important; font-weight:900 !important; letter-spacing:0 !important; white-space:normal !important; overflow-wrap:anywhere !important; } #screenStudent .studentMonthlyReviewState{ position:static !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; max-width:100% !important; min-height:24px !important; margin:0 !important; padding:5px 9px !important; border-radius:999px !important; font-size:12px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; } #screenStudent .studentMonthlyReviewCount{ position:static !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--muted) !important; font-size:13px !important; line-height:1.3 !important; font-weight:850 !important; white-space:normal !important; } #screenStudent .studentMonthlyReviewProgress{ position:static !important; display:block !important; width:100% !important; height:6px !important; margin:2px 0 0 !important; } #screenStudent .studentMonthlyReviewAction{ position:static !important; display:flex !important; width:100% !important; min-height:38px !important; margin:4px 0 0 !important; justify-content:center !important; } #screenStudent .studentMonthlyReviewRow:not(.isCurrent) .studentMonthlyReviewAction{ display:none !important; } #screenStudent .studentMonthlyCycleCard{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; width:100% !important; gap:6px !important; } #screenStudent .studentMonthlyCycleMonth{ display:none !important; } #screenStudent .studentMonthlyCycleLabel, #screenStudent .studentMonthlyCyclePhase, #screenStudent .studentMonthlyCountdown, #screenStudent .studentMonthlyCycleMeta{ position:static !important; width:100% !important; margin:0 !important; text-align:left !important; } #screenStudent .studentMonthlyCycleLabel{ color:var(--muted) !important; font-size:12px !important; line-height:1.2 !important; font-weight:950 !important; text-transform:none !important; } #screenStudent .studentMonthlyCyclePhase{ font-size:17px !important; line-height:1.25 !important; font-weight:950 !important; } #screenStudent .studentMonthlyCountdown{ display:block !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--text) !important; font-size:14px !important; line-height:1.3 !important; font-weight:900 !important; white-space:normal !important; } #screenStudent .studentMonthlyCycleMeta{ color:var(--muted) !important; font-size:13px !important; line-height:1.35 !important; } #screenStudent .studentMonthlyCycleBtn{ position:static !important; width:100% !important; min-height:38px !important; margin:4px 0 0 !important; justify-content:center !important; } #screenStudent .studentProgressHistoryCard{ display:flex !important; flex-direction:column !important; gap:12px !important; } #screenStudent .studentProgressHead, #screenStudent .studentProgressHead > div{ display:block !important; width:100% !important; } #screenStudent .studentProgressHead h3{ margin:0 !important; font-size:19px !important; line-height:1.25 !important; } #screenStudent .studentProgressHistorySubtitle{ display:none !important; } #screenStudent .studentHistoryPreview, #screenStudent .studentSelectedMonthCard, #screenStudent .studentSelectedMonthTop, #screenStudent .studentSelectedMonthTop > div{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; } #screenStudent .studentSelectedMonthCard{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } #screenStudent .studentSelectedMonthName{ margin:0 0 8px !important; font-size:16px !important; line-height:1.25 !important; } #screenStudent .studentSelectedMonthLine{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:7px !important; margin:0 !important; } #screenStudent .studentSelectedMonthStatus{ display:inline-flex !important; width:auto !important; max-width:100% !important; padding:5px 9px !important; border-radius:999px !important; font-size:12px !important; line-height:1 !important; font-weight:950 !important; } #screenStudent .studentSelectedMonthPoints{ display:block !important; margin:0 !important; color:var(--text) !important; font-size:14px !important; line-height:1.3 !important; font-weight:900 !important; } #screenStudent .studentSelectedMonthExamLine{ display:block !important; margin:7px 0 0 !important; color:var(--muted) !important; font-size:13px !important; line-height:1.35 !important; font-weight:850 !important; } #screenStudent .studentSelectedMonthMetrics{ display:none !important; } #screenStudent .studentMonthlyHistoryBtn{ width:100% !important; min-height:38px !important; margin:0 !important; justify-content:center !important; } #screenStudent .studentAiFab{ right:16px !important; bottom:calc(82px + env(safe-area-inset-bottom)) !important; z-index:1002 !important; } #screenStudent .studentAiBackdrop, #screenStudent .studentAiBackdrop[hidden]{ display:block !important; position:fixed !important; inset:0 !important; z-index:1000 !important; background:rgba(0,0,0,.28) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity 220ms ease-out, visibility 0s linear 220ms !important; } #screenStudent .studentAiBackdrop.open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transition:opacity 220ms ease-out, visibility 0s !important; } #screenStudent .studentAiPanel, #screenStudent .studentAiPanel[hidden]{ display:flex !important; flex-direction:column !important; position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100% !important; height:min(82svh,680px) !important; max-height:82svh !important; margin:0 !important; padding:0 !important; border-right:0 !important; border-left:0 !important; border-bottom:0 !important; border-radius:22px 22px 0 0 !important; opacity:1 !important; visibility:hidden !important; pointer-events:none !important; transform:translate3d(0,100%,0) !important; transition:transform 260ms cubic-bezier(.22,1,.36,1), visibility 0s linear 260ms !important; will-change:transform !important; overflow:hidden !important; z-index:1001 !important; } #screenStudent .studentAiPanel.open{ visibility:visible !important; pointer-events:auto !important; transform:translate3d(0,0,0) !important; transition:transform 260ms cubic-bezier(.22,1,.36,1), visibility 0s !important; } #screenStudent .studentAiHeader{ flex:0 0 auto !important; padding:14px 16px !important; } #screenStudent .studentAiMessages{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; margin:0 14px !important; padding:12px !important; overscroll-behavior:contain !important; } #screenStudent .studentAiComposer{ flex:0 0 auto !important; position:relative !important; bottom:auto !important; margin:12px 14px 0 !important; padding:10px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; } } /* Mobile student rescue pass: bottom sheets, AI navigator, stable vertical layout. */ @media (max-width:767px){ body.student-sheet-open, body.no-scroll{ overflow:hidden !important; } body.student-sheet-open .appMainScroll, body.no-scroll .appMainScroll{ overflow:hidden !important; overscroll-behavior:contain !important; } body.mobile-layout[data-current-route="student"] #bottomNav .bottomNavBtn[data-route="ai"]:not([hidden]){ display:flex !important; } body.mobile-layout[data-current-route="student"] #bottomNav .bottomNavBtn[data-route="teacher"]{ display:none !important; } body.mobile-layout[data-current-route="student"] #bottomNav .bottomNavBtn[data-route="ai"]::before{ content:"AI" !important; } #screenStudent #studentStatsView.studentDashboardMobile{ display:flex !important; flex-direction:column !important; gap:12px !important; width:100% !important; max-width:100% !important; } #screenStudent .studentMonthlyReviewList, #screenStudent .studentMonthlyReviewRow, #screenStudent .studentMonthlyCycleCard, #screenStudent .studentProgressHistoryCard{ min-width:0 !important; max-width:100% !important; } #screenStudent .studentMonthlyReviewRow{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; } #screenStudent .studentMonthlyReviewIcon{ display:none !important; } #screenStudent .studentMonthlyCyclePanel, #screenStudent .studentMonthlyHistoryPanel, #screenStudent .studentStudyLevelPanel{ position:fixed !important; inset:0 !important; z-index:1200 !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; padding:0 !important; background:rgba(8, 16, 28, .42) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } #screenStudent .studentMonthlyCyclePanel[hidden], #screenStudent .studentMonthlyHistoryPanel[hidden], #screenStudent .studentStudyLevelPanel[hidden]{ display:none !important; } #screenStudent .studentMonthlyCycleSheet, #screenStudent .studentMonthlyHistorySheet, #screenStudent .studentStudyLevelSheet{ width:100% !important; max-width:100% !important; max-height:min(86svh, 720px) !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 !important; padding:16px !important; padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important; box-sizing:border-box !important; border:0 !important; border-radius:22px 22px 0 0 !important; background:var(--card) !important; box-shadow:0 -18px 44px rgba(7,15,28,.22) !important; animation:studentMobileSheetUp 240ms cubic-bezier(.22,1,.36,1) both !important; overscroll-behavior:contain !important; } @keyframes studentMobileSheetUp{ from{transform:translate3d(0,100%,0)} to{transform:translate3d(0,0,0)} } #screenStudent .studentMonthlyCycleModalHead, #screenStudent .studentMonthlyHistoryModalHead, #screenStudent .studentStudyLevelModalHead{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:12px !important; width:100% !important; } #screenStudent .studentMonthlyCycleModalHead h3, #screenStudent .studentMonthlyHistoryModalHead h3, #screenStudent .studentStudyLevelModalHead h3{ margin:0 !important; font-size:20px !important; line-height:1.2 !important; letter-spacing:0 !important; } #screenStudent .studentMonthlyCycleCloseBtn, #screenStudent .studentMonthlyHistoryCloseBtn, #screenStudent .studentStudyLevelCloseBtn{ flex:0 0 auto !important; min-height:34px !important; padding:7px 11px !important; border-radius:999px !important; } #screenStudent .studentMonthlyCycleTimeline, #screenStudent .studentMonthlyHistoryArchive, #screenStudent .studentStudyLevelOptions{ display:flex !important; flex-direction:column !important; gap:10px !important; width:100% !important; min-width:0 !important; } #screenStudent .studentMonthlyCycleTimelineItem{ width:100% !important; min-height:0 !important; padding:13px !important; box-sizing:border-box !important; border-radius:14px !important; } #screenStudent .studentMonthlyCycleTimelineItem span{ font-size:12px !important; line-height:1.2 !important; } #screenStudent .studentMonthlyCycleTimelineItem b{ font-size:15px !important; line-height:1.25 !important; } #screenStudent .studentMonthlyCycleTimelineItem p{ margin:0 !important; font-size:13px !important; line-height:1.35 !important; } #screenStudent .studentMonthlyCycleCurrent{ width:100% !important; padding:13px !important; border-radius:14px !important; } #screenStudent .studentMonthlyCycleCurrent div{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:5px !important; } #screenStudent .studentMonthlyHistoryList, #screenStudent .studentMonthlyHistoryDetail{ width:100% !important; max-height:none !important; overflow:visible !important; } #screenStudent .studentMonthlyHistoryYearGrid{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; } #screenStudent .studentAiFab{ width:auto !important; min-width:92px !important; height:52px !important; padding:0 14px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; border-radius:999px !important; } #screenStudent .studentAiFab::before{ content:"" !important; width:9px !important; height:9px !important; border-radius:999px !important; background:#d7fff4 !important; box-shadow:0 0 0 4px rgba(215,255,244,.18) !important; } #screenStudent .studentAiFab span{ font-size:0 !important; } #screenStudent .studentAiFab span::after{ content:"AI Friend" !important; font-size:13px !important; line-height:1 !important; font-weight:950 !important; white-space:nowrap !important; } } /* Final header and cleanup overrides. Keep Student aligned with the shared app shell. */ .appTopbarAvatar{ appearance:none !important; -webkit-appearance:none !important; padding:0 !important; cursor:pointer !important; font:inherit !important; } .appTopbarAvatar:hover{ transform:translateY(-1px) !important; box-shadow:0 10px 18px rgba(15,23,42,.10), inset 0 0 0 1px color-mix(in srgb, var(--border) 46%, transparent) !important; } .appTopbarAvatar:focus-visible{ outline:none !important; box-shadow:var(--focus), inset 0 0 0 1px color-mix(in srgb, var(--border) 46%, transparent) !important; } body[data-current-route="student"] .appTopbar .roleSeg{ display:inline-grid !important; } body[data-current-route="student"] #themeBtn.appTopbarChip, body[data-current-route="student"] #statusPill{ display:inline-flex !important; } body[data-current-route="student"] .appTopbarAvatar{ display:grid !important; } #screenTeacher .teacherTopCard, #screenTeacher .teacherTopCard[hidden]{ display:none !important; } body.mobile-layout[data-current-route="student"] .appTopbar .roleSeg, body.mobile-layout[data-current-route="student"] #statusPill, body.mobile-layout[data-current-route="student"] #loginBtn.appTopbarChip, body.mobile-layout[data-current-route="student"] #logoutBtn.appTopbarChip, body.mobile-layout[data-current-route="student"] .appTopbarAvatar{ display:none !important; } body.mobile-layout[data-current-route="student"] #themeBtn.appTopbarChip{ display:inline-flex !important; width:36px !important; min-width:36px !important; height:34px !important; min-height:34px !important; padding:0 !important; align-items:center !important; justify-content:center !important; border-radius:10px !important; } /* Final small-screen adaptive pass Keeps the app inside the viewport and lets the N5 hub, quiz, and exam surfaces breathe on narrow phones without changing desktop layouts. */ @media (max-width:768px){ html, body.mobile-layout{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } body.mobile-layout{ --mobile-edge:clamp(6px, 2.6vw, 12px); --mobile-panel-gap:clamp(8px, 2.8vw, 12px); --mobile-panel-pad:clamp(10px, 3.2vw, 14px); --mobile-radius:10px; } body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{ width:100% !important; max-width:100% !important; padding-inline: calc(var(--mobile-edge) + env(safe-area-inset-left)) calc(var(--mobile-edge) + env(safe-area-inset-right)) !important; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings), body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) *{ min-width:0 !important; max-width:100%; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{ padding:var(--mobile-panel-pad) !important; border-radius:var(--mobile-radius) !important; overflow:hidden; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.row, .actions, .segrow, .segGroup){ width:100%; max-width:100%; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.btn, button, .miniTag, .input, input, select, textarea){ max-width:100%; } body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.btn, button){ white-space:normal; overflow-wrap:anywhere; } body.mobile-layout #bottomNav .bottomNavBar{ width:min(100%, 460px) !important; } body.mobile-layout #bottomNav .bottomNavBtn{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5{ --n5-gap:var(--mobile-panel-gap); --n5-card-pad:var(--mobile-panel-pad); --n5-card-radius:var(--mobile-radius); --n5-inner-radius:var(--mobile-radius); --n5-button-height:44px; overflow:visible !important; } body.mobile-layout #screenN5 .n5PathGrid{ gap:var(--mobile-panel-gap) !important; margin:0 !important; } body.mobile-layout #screenN5 .n5PathHubCard{ gap:var(--mobile-panel-gap) !important; padding:var(--mobile-panel-pad) !important; border-radius:var(--mobile-radius) !important; } body.mobile-layout #screenN5 .n5PathTop, body.mobile-layout #screenN5 .n5MobileHubTop{ display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:start !important; gap:8px !important; } body.mobile-layout #screenN5 .n5PathTop h3, body.mobile-layout #screenN5 .n5MobileHubTop h3{ margin:1px 0 5px !important; font-size:clamp(21px, 6.4vw, 26px) !important; line-height:1.08 !important; overflow-wrap:anywhere; } body.mobile-layout #screenN5 .n5CompactStageLine{ font-size:clamp(12px, 3.7vw, 14px) !important; line-height:1.4 !important; } body.mobile-layout #screenN5 #n5PathStageLabel{ justify-self:end; max-width:min(34vw, 112px); } body.mobile-layout #screenN5 .n5CoreGrid, body.mobile-layout #screenN5 .n5-core-grid{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important; } body.mobile-layout #screenN5 .n5CoreCard, body.mobile-layout #screenN5 .n5-core-card{ min-height:0 !important; padding:12px !important; border-radius:var(--mobile-radius) !important; grid-template-rows:auto minmax(38px, auto) auto !important; gap:8px !important; } body.mobile-layout #screenN5 .n5CoreCardTitle, body.mobile-layout #screenN5 .n5-core-card-title{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:clamp(15px, 4.4vw, 18px) !important; line-height:1.16 !important; } body.mobile-layout #screenN5 .n5CoreCardDescription, body.mobile-layout #screenN5 .n5-core-card-description{ -webkit-line-clamp:3 !important; font-size:12px !important; line-height:1.35 !important; } body.mobile-layout #screenN5 .n5CoreAction{ width:100% !important; height:auto !important; min-height:42px !important; padding:8px 10px !important; border-radius:8px !important; } body.mobile-layout #screenN5 #n5ContentCard{ width:100% !important; min-height:0 !important; padding:var(--mobile-panel-pad) !important; border-radius:var(--mobile-radius) !important; overflow:hidden !important; } body.mobile-layout #screenN5 .n5MobilePanelBar{ position:sticky; top:calc(var(--mobile-header-h, 50px) + 8px + env(safe-area-inset-top)) !important; display:grid !important; grid-template-columns:1fr !important; gap:6px !important; padding:8px !important; margin:0 0 var(--mobile-panel-gap) !important; border-radius:var(--mobile-radius) !important; } body.mobile-layout #screenN5 #n5MobileBackBtn{ width:100%; } body.mobile-layout #screenN5 .panelHeader{ margin:calc(var(--mobile-panel-pad) * -1) calc(var(--mobile-panel-pad) * -1) var(--mobile-panel-gap) !important; padding:var(--mobile-panel-pad) !important; border-radius:var(--mobile-radius) var(--mobile-radius) 0 0 !important; } body.mobile-layout #screenN5 .n5HeroMain, body.mobile-layout #screenN5 .practiceHeader, body.mobile-layout #screenN5 .n5StageHead, body.mobile-layout #screenN5 .n5WorkspaceSearchRow, body.mobile-layout #screenN5 .n5QuizSetupGrid, body.mobile-layout #screenN5 #n5QuizInputRow, body.mobile-layout #screenN5 #n5QuizActionRow, body.mobile-layout #screenN5 #n5PracticeSummary > .row{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; } body.mobile-layout #screenN5 .n5WorkspaceSurface{ padding:0 !important; gap:var(--mobile-panel-gap) !important; } body.mobile-layout #screenN5 .n5StudyQuizGrid, body.mobile-layout #screenN5 .n5SetRow, body.mobile-layout #screenN5 .n5PracticeChoices, body.mobile-layout #screenN5 #n5QuizChoices{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; } body.mobile-layout #screenN5 #n5QuizArea{ min-height:0 !important; padding:var(--mobile-panel-pad) !important; border-radius:var(--mobile-radius) !important; } body.mobile-layout #screenN5 #n5QuizPrompt{ font-size:clamp(34px, 18vw, 58px) !important; line-height:1.05 !important; overflow-wrap:anywhere; } body.mobile-layout #screenN5 #n5QuizChoices .btn, body.mobile-layout #screenN5 #n5QuizChoices button, body.mobile-layout #screenN5 .n5PracticeChoices .btn, body.mobile-layout #screenN5 .n5PracticeChoices button{ min-height:50px !important; border-radius:8px !important; font-size:15px !important; line-height:1.2 !important; padding:10px !important; } body.mobile-layout #screenN5 #n5PracticeSummary, body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryMobile{ width:100% !important; } body.mobile-layout #screenN5.examActive #n5ExamOverlay{ display:flex !important; } body.mobile-layout #screenN5 .n5ExamOverlay{ height:100svh; height:100dvh; overflow:hidden; } body.mobile-layout #screenN5 .n5ExamTopbar{ display:grid !important; grid-template-columns:auto minmax(0,1fr); gap:8px !important; min-height:0 !important; padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left)) !important; } body.mobile-layout #screenN5 .n5ExamTitle{ text-align:left !important; white-space:normal !important; line-height:1.15 !important; } body.mobile-layout #screenN5 .n5ExamMeta{ grid-column:1 / -1; display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px !important; align-items:stretch !important; } body.mobile-layout #screenN5 .n5ExamMeta .miniTag{ width:100% !important; min-width:0 !important; } body.mobile-layout #screenN5 .n5ExamBody{ width:100% !important; max-width:none !important; flex:1 1 auto; padding: var(--mobile-panel-pad) calc(var(--mobile-edge) + env(safe-area-inset-right)) calc(var(--mobile-panel-pad) + env(safe-area-inset-bottom)) calc(var(--mobile-edge) + env(safe-area-inset-left)) !important; overflow:auto !important; } body.mobile-layout #screenN5 #n5ExamQuestionWrap, body.mobile-layout #screenN5 #n5ExamResultWrap, body.mobile-layout #screenN5 #n5ExamEmptyWrap{ padding:var(--mobile-panel-pad) !important; border-radius:var(--mobile-radius) !important; } body.mobile-layout #screenN5 #n5ExamQuestionText{ font-size:clamp(38px, 20vw, 70px) !important; line-height:1.05 !important; } body.mobile-layout #screenN5 .n5ExamChoices, body.mobile-layout #screenN5 #n5ExamChoices, body.mobile-layout #screenN5 #n5ExamResultWrap .row, body.mobile-layout #screenN5 #n5ExamEmptyWrap .row{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; } body.mobile-layout #screenN5 .n5ExamChoice, body.mobile-layout #screenN5 #n5ExamChoices button{ min-height:50px !important; border-radius:8px !important; white-space:normal !important; } } @media (max-width:480px){ body.mobile-layout{ --mobile-edge:6px; --mobile-panel-gap:8px; --mobile-panel-pad:10px; } body.mobile-layout .topbar.appTopbar{ border-radius:8px !important; } body.mobile-layout #screenN5 .n5PathTop, body.mobile-layout #screenN5 .n5MobileHubTop{ grid-template-columns:1fr !important; } body.mobile-layout #screenN5 #n5PathStageLabel{ justify-self:start; max-width:100%; } body.mobile-layout #screenN5 .n5CoreGrid, body.mobile-layout #screenN5 .n5-core-grid{ grid-template-columns:1fr !important; } body.mobile-layout #screenN5 .n5CoreCard, body.mobile-layout #screenN5 .n5-core-card{ grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; } body.mobile-layout #screenN5 .n5CoreCardDescription, body.mobile-layout #screenN5 .n5-core-card-description{ grid-column:1 / -1; -webkit-line-clamp:2 !important; } body.mobile-layout #screenN5 .n5CoreAction{ grid-column:2; grid-row:1; width:auto !important; min-width:74px; } body.mobile-layout #screenN5 #n5QuizPrompt{ font-size:clamp(32px, 20vw, 50px) !important; } } @media (max-width:360px){ body.mobile-layout{ --mobile-header-h:44px; --mobile-nav-h:54px; --mobile-edge:5px; --mobile-panel-pad:9px; } body.mobile-layout .appTopbarBrand b{ font-size:16px !important; } body.mobile-layout #bottomNav .bottomNavBar{ padding:3px !important; gap:2px !important; } body.mobile-layout #bottomNav .bottomNavBtn, body.mobile-layout #bottomNav .bottomNavBtn.active{ min-height:40px !important; font-size:0 !important; grid-template-rows:20px !important; gap:0 !important; } body.mobile-layout #screenN5 .n5CoreAction{ min-width:64px; min-height:38px !important; padding-inline:8px !important; font-size:12px !important; } body.mobile-layout #screenN5 .n5CoreCard, body.mobile-layout #screenN5 .n5-core-card{ padding:10px !important; } body.mobile-layout #screenN5 #n5ExamQuestionText{ font-size:clamp(34px, 20vw, 58px) !important; } } /* N5 Core mobile final pass: stable tap-list cards on phones. */ @media (max-width:768px){ body.mobile-layout #screenN5{ margin-top:0 !important; } body.mobile-layout #screenN5 .n5PathHubCard{ box-shadow:0 8px 18px rgba(12,23,38,.055) !important; } body.mobile-layout #screenN5 .n5MobileHubTop{ align-items:center !important; } body.mobile-layout #screenN5 .n5CoreGrid, body.mobile-layout #screenN5 .n5-core-grid{ grid-template-columns:1fr !important; gap:8px !important; align-items:stretch !important; } body.mobile-layout #screenN5 .n5CoreCard, body.mobile-layout #screenN5 .n5-core-card{ overflow:hidden !important; box-shadow:0 4px 12px rgba(12,23,38,.045) !important; } } @media (max-width:640px){ body.mobile-layout #screenN5 .n5CoreGrid, body.mobile-layout #screenN5 .n5-core-grid{ grid-template-columns:1fr !important; gap:8px !important; } body.mobile-layout #screenN5 .n5CoreCard, body.mobile-layout #screenN5 .n5-core-card{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto !important; align-items:center !important; column-gap:12px !important; row-gap:5px !important; min-height:0 !important; padding:12px !important; } body.mobile-layout #screenN5 .n5CoreCardTitle, body.mobile-layout #screenN5 .n5-core-card-title{ grid-column:1 !important; grid-row:1 !important; font-size:clamp(16px, 4.8vw, 18px) !important; } body.mobile-layout #screenN5 .n5CoreCardDescription, body.mobile-layout #screenN5 .n5-core-card-description{ grid-column:1 / -1 !important; grid-row:2 !important; display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important; font-size:12px !important; line-height:1.35 !important; } body.mobile-layout #screenN5 .n5CoreAction{ grid-column:2 !important; grid-row:1 !important; align-self:center !important; width:auto !important; min-width:74px !important; min-height:38px !important; height:38px !important; padding:0 12px !important; border-radius:999px !important; white-space:nowrap !important; } } @media (max-width:360px){ body.mobile-layout #screenN5 .n5CoreCard, body.mobile-layout #screenN5 .n5-core-card{ column-gap:9px !important; padding:10px !important; } body.mobile-layout #screenN5 .n5CoreAction{ min-width:60px !important; min-height:36px !important; height:36px !important; padding-inline:9px !important; } } /* Mobile-only request polish: date title on Home, cleaner AI chat input. */ @media (max-width:768px){ body.mobile-layout #screenHome .homeSimpleHeader{ display:none !important; } body.mobile-layout[data-current-route="ai"] .globalAiFab, body.mobile-layout.ai-chat-shell-active .globalAiFab{ display:none !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer, body.mobile-layout.ai-chat-shell-active.mobile-chrome-collapsed #screenAI[data-ai-chat-only="true"] .senseiComposer{ width:auto !important; margin: 8px calc(10px + env(safe-area-inset-right)) calc(8px + var(--ai-composer-bottom, env(safe-area-inset-bottom))) calc(10px + env(safe-area-inset-left)) !important; padding:7px !important; border:1px solid color-mix(in srgb, var(--border) 62%, transparent) !important; border-radius:999px !important; background:color-mix(in srgb, var(--card) 96%, transparent) !important; box-shadow:0 12px 28px rgba(9,20,36,.12) !important; } body.mobile-layout.ai-chat-input-focused #screenAI[data-ai-chat-only="true"] .senseiComposer{ margin-bottom:8px !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer .input, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiComposer .input{ min-height:48px !important; border-radius:999px !important; padding:0 16px !important; border-color:transparent !important; background:color-mix(in srgb, var(--card) 88%, var(--bg) 12%) !important; } body.mobile-layout #screenAI[data-ai-chat-only="true"] #senseiSendBtn, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #senseiSendBtn{ width:48px !important; min-width:48px !important; height:48px !important; min-height:48px !important; aspect-ratio:1 !important; display:grid !important; place-items:center !important; padding:0 !important; border-radius:999px !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiMessages{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiLabel, body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] .senseiEmptyTitle{ display:none !important; } } #screenAI[data-ai-chat-only="true"] #senseiSendBtn::before, #screenStudent #studentAiSendBtn::before{ content:"➤" !important; position:static !important; display:grid !important; place-items:center !important; width:1em !important; height:1em !important; border:0 !important; background:transparent !important; transform:translateX(1px) !important; font-size:20px !important; line-height:1 !important; letter-spacing:0 !important; text-align:center !important; } #screenAI[data-ai-chat-only="true"] #senseiSendBtn::after, #screenStudent #studentAiSendBtn::after{ content:none !important; display:none !important; } .appBootOverlay:not(.isBootReady) ~ .globalAiFab, .appBootOverlay:not(.isBootReady) ~ .globalAiBackdrop, .appBootOverlay:not(.isBootReady) ~ .globalAiPanel, body.ai-section-loading-active .globalAiFab, body.ai-section-loading-active .globalAiBackdrop, body.ai-section-loading-active .globalAiPanel{ display:none !important; } @keyframes aiSectionBootDots{ 0%,80%,100%{opacity:.28;transform:translateY(0) scale(.84)} 40%{opacity:1;transform:translateY(-5px) scale(1)} } @keyframes aiSectionBootWash{ 0%{background-position:0% 50%, 0 0} 100%{background-position:100% 50%, 0 0} } @media (max-width:768px){ body.mobile-layout.ai-section-loading-active #screenAI[data-ai-loading="true"]{ min-height:var(--ai-viewport-height, 100svh); overflow:hidden !important; } body.mobile-layout.ai-section-loading-active #screenAI[data-ai-loading="true"] .aiHubShell{ opacity:0 !important; transform:translateY(6px); pointer-events:none !important; } body.mobile-layout.ai-section-loading-active #screenAI[data-ai-loading="true"]::before{ content:""; position:absolute; inset:0; z-index:30; pointer-events:none; background: radial-gradient(580px 260px at 50% 18%, color-mix(in srgb, var(--chip) 24%, transparent), transparent 70%), linear-gradient( 112deg, color-mix(in srgb, var(--bg) 96%, var(--card) 4%) 0%, color-mix(in srgb, var(--card) 92%, var(--chip) 8%) 44%, var(--bg) 100% ); background-size:100% 100%, 220% 100%; animation:aiSectionBootWash 1.7s ease-in-out infinite alternate; } body.mobile-layout.ai-section-loading-active #screenAI[data-ai-loading="true"]::after{ content:""; position:absolute; left:50%; top:50%; z-index:31; width:10px; height:10px; border-radius:999px; background:color-mix(in srgb, var(--chip) 62%, var(--text) 38%); box-shadow: -20px 0 0 color-mix(in srgb, var(--chip) 62%, var(--text) 38%), 20px 0 0 color-mix(in srgb, var(--chip) 62%, var(--text) 38%); transform:translate(-50%,-50%); animation:aiSectionBootDots 1.05s ease-in-out infinite; } } @keyframes aiMobileLoadingSweep{ 0%{transform:translate3d(-36%,0,0)} 100%{transform:translate3d(36%,0,0)} } @keyframes aiMobileLoadingBreath{ 0%,100%{opacity:.18} 50%{opacity:.34} } @keyframes aiMobileLoadingBackground{ 0%{background-position:0% 50%, 0 0} 100%{background-position:100% 50%, 0 0} } @media (max-width:768px){ body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{ position:relative !important; isolation:isolate; } body.mobile-layout.ai-chat-shell-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel > *{ position:relative; z-index:1; } body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient( 112deg, transparent 0%, transparent 28%, color-mix(in srgb, var(--ring) 18%, transparent) 44%, color-mix(in srgb, var(--chip) 24%, transparent) 53%, transparent 70%, transparent 100% ); filter:blur(18px); transform:translate3d(-36%,0,0); animation: aiMobileLoadingSweep 3.8s ease-in-out infinite alternate, aiMobileLoadingBreath 2.4s ease-in-out infinite; } body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] .senseiMessages{ background: linear-gradient( 112deg, transparent 0%, transparent 28%, color-mix(in srgb, var(--ring) 14%, transparent) 43%, color-mix(in srgb, var(--chip) 20%, transparent) 54%, transparent 72%, transparent 100% ), color-mix(in srgb, var(--bg) 92%, var(--card) 8%) !important; background-size:230% 100%, 100% 100% !important; background-position:0% 50%, 0 0 !important; animation:aiMobileLoadingBackground 4.2s ease-in-out infinite alternate; } body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] .senseiBubble.isTyping{ min-width:62px !important; color:transparent !important; position:relative !important; overflow:hidden; } body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] .senseiBubble.isTyping::after{ content:""; position:absolute; inset:0; background: linear-gradient( 110deg, transparent 0%, transparent 34%, color-mix(in srgb, #fff 34%, transparent) 50%, transparent 66%, transparent 100% ); transform:translate3d(-100%,0,0); animation:aiMobileTypingShine 1.45s ease-in-out infinite; } } @keyframes aiMobileTypingShine{ 0%{transform:translate3d(-100%,0,0)} 100%{transform:translate3d(100%,0,0)} } @media (prefers-reduced-motion: reduce){ body.mobile-layout.ai-section-loading-active #screenAI[data-ai-loading="true"]::before, body.mobile-layout.ai-section-loading-active #screenAI[data-ai-loading="true"]::after, body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] #aiSenseiPanel::before, body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] .senseiMessages, body.mobile-layout.ai-chat-shell-active.ai-chat-loading-active #screenAI[data-ai-chat-only="true"] .senseiBubble.isTyping::after{ animation:none !important; } } /* N5 Core learning-flow cleanup: Core practice first, monthly systems later. */ .kanaCoreReturnRow{ display:flex; justify-content:flex-start; margin:0 0 10px; } #kanaCoreBackBtn[hidden]{ display:none !important; } #screenKana[data-n5-core-return="true"] .kanaJourneyEyebrow{ color:var(--muted); } #screenN5[data-n5-core-section] .n5MobilePanelBar{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin-bottom:12px !important; } #screenN5[data-n5-core-section] #n5MobileBackBtn{ display:inline-flex !important; min-height:38px !important; border-radius:999px !important; } @media (max-width:768px){ body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5WorkspaceEyebrow, body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5WorkspaceMeta, body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5FlowRail, body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5SetupLabel, body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5StudyQuizPicker, body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5PracticeSettingsBtn, body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5WorkspaceSearchRow, body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5WorkspaceFilters, body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5WorkspaceGrid, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5WorkspaceEyebrow, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5WorkspaceMeta, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5FlowRail, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5SetupLabel, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5StudyQuizPicker, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5PracticeSettingsBtn, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5WorkspaceSearchRow, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5WorkspaceFilters, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5WorkspaceGrid{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .practiceHeader, body.mobile-layout #screenN5[data-n5-core-section="writing"] .practiceHeader{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .practiceTitle, body.mobile-layout #screenN5[data-n5-core-section="writing"] .practiceTitle{ font-size:24px !important; line-height:1.12 !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .practiceSub, body.mobile-layout #screenN5[data-n5-core-section="writing"] .practiceSub{ max-width:32ch !important; font-size:14px !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5FlashArea, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5FlashArea{ padding:0 !important; border:0 !important; background:transparent !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5StageHead, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5StageHead{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; padding:14px !important; border:1px solid var(--border) !important; border-radius:var(--mobile-radius) !important; background:var(--card) !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5StageTitle, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5StageTitle{ font-size:20px !important; line-height:1.16 !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5StageText, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5StageText{ font-size:13px !important; line-height:1.42 !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5QuizActionRow, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5QuizActionRow{ grid-template-columns:1fr !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5PracticeStartBtn, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5PracticeStartBtn{ width:100% !important; min-height:48px !important; border-radius:999px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5ContentCard{ display:block !important; min-height:auto !important; overflow:visible !important; padding:10px 10px calc(112px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5PracticePanel, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceShell, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceMain, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{ height:auto !important; min-height:0 !important; overflow:visible !important; transform:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{ grid-template-areas: "back" "progress" "prompt" "sub" "input" "choices" "feedback" "next" !important; height:auto !important; min-height:calc(100dvh - 176px) !important; overflow:visible !important; padding-bottom:120px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizBackBtn{ grid-area:back; display:inline-flex !important; justify-self:start; min-height:38px !important; border-radius:999px !important; padding-inline:14px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizInputRow{ grid-area:input; display:grid; grid-template-columns:1fr !important; gap:8px !important; scroll-margin-bottom:140px; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizInputRow[hidden]{ display:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizAnswerInput{ width:100% !important; min-height:48px !important; font-size:16px !important; border-radius:12px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizSubmitBtn, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizNextBtn{ min-height:46px !important; border-radius:999px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizNextBtn{ grid-area:next; width:100% !important; margin:0 !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizChoices{ grid-area:choices; } body.mobile-layout #screenN5[data-n5-core-section="sentences"][data-mobile-quiz-state="active"] #n5QuizTypeTag, body.mobile-layout #screenN5[data-n5-core-section="writing"][data-mobile-quiz-state="active"] #n5QuizTypeTag{ display:none !important; } } /* Smaller draggable AI bubble. */ button#studentAiFab.globalAiFab.ai-floating-button{ position:fixed !important; left:0 !important; top:0 !important; right:auto !important; bottom:auto !important; --ai-x:calc(100vw - 64px); --ai-y:calc(100dvh - 76px); width:48px !important; min-width:48px !important; height:48px !important; min-height:48px !important; padding:0 !important; border-radius:999px !important; z-index:1000 !important; touch-action:none; cursor:grab !important; user-select:none; will-change:transform; transform:translate3d(var(--ai-x), var(--ai-y), 0) !important; transition:box-shadow 160ms ease, scale 160ms ease, opacity 160ms ease !important; } button#studentAiFab.globalAiFab.ai-floating-button.isDragging, button#studentAiFab.globalAiFab.ai-floating-button.dragging{ cursor:grabbing !important; transition:none !important; scale:.98; } button#studentAiFab.globalAiFab.ai-floating-button[data-dragged="true"]{ right:auto !important; bottom:auto !important; } button#studentAiFab.globalAiFab.ai-floating-button span{ display:none !important; } button#studentAiFab.globalAiFab.ai-floating-button::before{ content:"AI" !important; width:auto !important; height:auto !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:currentColor !important; font-size:13px !important; line-height:1 !important; font-weight:950 !important; letter-spacing:0 !important; } @media (max-width:767px){ body.mobile-layout button#studentAiFab.globalAiFab.ai-floating-button{ --ai-x:calc(100vw - 58px); --ai-y:calc(100dvh - 136px); width:46px !important; min-width:46px !important; height:46px !important; min-height:46px !important; right:auto !important; bottom:auto !important; } body.mobile-layout button#studentAiFab.globalAiFab.ai-floating-button[data-dragged="true"]{ right:auto !important; bottom:auto !important; } } .n5VocabularySearchLabel, .n5VocabularyWordListBtn{ display:none; } .n5VocabularyListBack[hidden]{ display:none !important; } .n5VocabularyListBack{ position:fixed; inset:0; z-index:1100; display:flex; align-items:flex-end; justify-content:center; padding:12px; background:rgba(15,23,42,.34); } .n5VocabularyListSheet{ width:min(520px,100%); max-height:min(72dvh,560px); overflow:auto; border:1px solid var(--border); border-radius:18px 18px 14px 14px; background:var(--card); box-shadow:0 24px 52px rgba(15,23,42,.24); padding:10px 12px 12px; } .n5VocabularyListHandle{ width:42px; height:4px; border-radius:999px; background:color-mix(in srgb, var(--muted) 34%, transparent); margin:2px auto 10px; } .n5VocabularyListHeader, .n5VocabularyListPager{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .n5VocabularyListTitle{ font-weight:950; font-size:18px; line-height:1.15; } .n5VocabularyListMeta, .n5VocabularyListMeaning{ color:var(--muted); font-size:13px; line-height:1.35; } .n5VocabularyListItems{ display:grid; gap:8px; margin:12px 0; } .n5VocabularyListItem{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px 10px; align-items:start; padding:10px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%); } .n5VocabularyListIndex{ width:24px; height:24px; display:grid; place-items:center; border-radius:999px; background:var(--chip); font-size:12px; font-weight:900; } .n5VocabularyListWord{ min-width:0; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:baseline; } .n5VocabularyListWord b{ font-size:17px; line-height:1.15; } .n5VocabularyListWord span{ color:var(--muted); font-size:13px; line-height:1.2; } .n5VocabularyListMeaning{ grid-column:2; } .n5VocabularyListEmpty{ padding:14px; border:1px solid var(--border); border-radius:12px; color:var(--muted); text-align:center; font-weight:800; } @media (max-width:767px){ body.mobile-layout #screenN5{ overflow-x:hidden !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) #n5MainGrid{ display:block !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) #n5ContentCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5MobileHubTop, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5PathTop, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5RecommendedCard, body.mobile-layout #screenN5:not([data-n5-core-section]) #n5CoreKanaCard{ display:none !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5PathHubCard{ padding:8px 0 calc(96px + env(safe-area-inset-bottom)) !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreGrid, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-grid{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card{ min-height:112px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto !important; align-items:center !important; gap:6px 12px !important; padding:14px !important; border-radius:14px !important; border:1px solid var(--border) !important; background:var(--card) !important; box-shadow:0 8px 22px rgba(15,23,42,.07) !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardTitle, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-title{ grid-column:1 !important; font-size:18px !important; line-height:1.18 !important; font-weight:950 !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardDescription, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-description{ grid-column:1 !important; font-size:13px !important; line-height:1.35 !important; color:var(--muted) !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreAction{ grid-column:2 !important; grid-row:1 / span 2 !important; min-width:76px !important; min-height:42px !important; border-radius:999px !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5PathHubCard{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5MainGrid{ display:block !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5ContentCard{ display:block !important; padding:10px 10px calc(104px + env(safe-area-inset-bottom)) !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5MobilePanelBar{ margin:0 0 12px !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5MobilePanelBar .miniTag, body.mobile-layout #screenN5[data-n5-core-section] .panelHeader, body.mobile-layout #screenN5[data-n5-core-section] .n5FlowRail, body.mobile-layout #screenN5[data-n5-core-section] .n5WorkspaceEyebrow, body.mobile-layout #screenN5[data-n5-core-section] .n5WorkspaceMeta, body.mobile-layout #screenN5[data-n5-core-section] .n5SetupLabel, body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceFilters, body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceGrid, body.mobile-layout #screenN5[data-n5-core-section] .n5FooterBar, body.mobile-layout #screenN5[data-n5-core-section] .n5PanelFooter{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5Workspace, body.mobile-layout #screenN5[data-n5-core-section] .n5WorkspaceShell, body.mobile-layout #screenN5[data-n5-core-section] .n5WorkspaceMain, body.mobile-layout #screenN5[data-n5-core-section] .n5WorkspaceSurface{ display:block !important; height:auto !important; min-height:0 !important; overflow:visible !important; transform:none !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceHeader{ display:block !important; padding:0 !important; margin:0 0 14px !important; border:0 !important; background:transparent !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceTitle{ font-size:24px !important; line-height:1.14 !important; font-weight:950 !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceSub{ margin-top:5px !important; font-size:14px !important; line-height:1.4 !important; color:var(--muted) !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5FlashArea{ display:block !important; padding:0 !important; border:0 !important; background:transparent !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5StageHead{ display:block !important; padding:0 !important; border:0 !important; background:transparent !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5StageCopy{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5StageActions, body.mobile-layout #screenN5[data-n5-core-section] #n5QuizActionRow{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5ActionLaunchBtn, body.mobile-layout #screenN5[data-n5-core-section] #n5PracticeStartBtn{ width:100% !important; min-height:48px !important; border-radius:999px !important; } body.mobile-layout #screenN5[data-n5-core-section][data-mobile-quiz-state="active"] #n5FlashArea, body.mobile-layout #screenN5[data-n5-core-section][data-n5-practice-state="summary"] #n5FlashArea, body.mobile-layout #screenN5[data-n5-core-section][data-mobile-quiz-state="active"] .practiceActions, body.mobile-layout #screenN5[data-n5-core-section][data-n5-practice-state="summary"] .practiceActions, body.mobile-layout #screenN5[data-n5-core-section][data-mobile-quiz-state="active"] .practiceHeader, body.mobile-layout #screenN5[data-n5-core-section][data-mobile-quiz-state="active"] .n5MobilePanelBar{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearchRow{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:16px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .n5VocabularySearchLabel{ display:block !important; font-size:13px !important; font-weight:950 !important; color:var(--muted) !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearch{ width:100% !important; min-height:46px !important; font-size:16px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceStats{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .n5VocabularyWordListBtn{ display:inline-flex !important; width:100% !important; min-height:44px !important; border-radius:999px !important; justify-content:center !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceGrid[data-has-query="true"]{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:8px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceGrid[data-has-query="true"] .n5PreviewCard{ padding:10px !important; border-radius:12px !important; } body.mobile-layout #screenN5:not([data-n5-core-section="vocabulary"]) .n5VocabularySearchLabel, body.mobile-layout #screenN5:not([data-n5-core-section="vocabulary"]) .n5VocabularyWordListBtn{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] #n5CoreLibrarySection, body.mobile-layout #screenN5[data-n5-core-section="writing"] #n5CoreLibrarySection{ display:none !important; } body.mobile-layout .n5VocabularyListBack{ padding:0 10px calc(10px + env(safe-area-inset-bottom)); } body.mobile-layout .n5VocabularyListSheet{ border-radius:18px 18px 0 0; max-height:72dvh; } body.mobile-layout .n5VocabularyListPager .btn{ min-width:84px; } } /* Mobile-only N5 Core card polish. Desktop layout intentionally unchanged. */ @media (max-width:767px){ #screenN5:not([data-n5-core-section]) #n5MainGrid{ display:block !important; } #screenN5:not([data-n5-core-section]) #n5ContentCard, #screenN5:not([data-n5-core-section]) .n5RecommendedCard{ display:none !important; } #screenN5:not([data-n5-core-section]) .n5MobileHubTop, #screenN5:not([data-n5-core-section]) .n5PathTop, #screenN5:not([data-n5-core-section]) #n5CoreTitle, #screenN5:not([data-n5-core-section]) #n5CoreDescription, #screenN5:not([data-n5-core-section]) #n5PathStageLabel, #screenN5:not([data-n5-core-section]) #n5CoreKanaCard{ display:none !important; } #screenN5:not([data-n5-core-section]) .n5PathHubCard{ padding:6px 0 calc(92px + env(safe-area-inset-bottom)) !important; border:0 !important; background:transparent !important; box-shadow:none !important; } #screenN5:not([data-n5-core-section]) .n5CoreGrid, #screenN5:not([data-n5-core-section]) .n5-core-grid{ display:flex !important; flex-direction:column !important; gap:10px !important; width:100% !important; max-width:100% !important; overflow:hidden !important; } #screenN5:not([data-n5-core-section]) .n5CoreCard, #screenN5:not([data-n5-core-section]) .n5-core-card{ display:grid !important; grid-template-columns:40px minmax(0,1fr) 64px !important; grid-template-rows:auto auto !important; align-items:center !important; gap:2px 12px !important; min-height:72px !important; height:72px !important; max-height:72px !important; box-sizing:border-box !important; padding:12px 14px !important; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important; background:var(--card) !important; box-shadow:0 8px 20px rgba(15,23,42,.07) !important; overflow:hidden !important; } #screenN5:not([data-n5-core-section]) .n5CoreCard::before, #screenN5:not([data-n5-core-section]) .n5-core-card::before{ grid-column:1 !important; grid-row:1 / span 2 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:13px !important; background:color-mix(in srgb, var(--chip) 78%, var(--card) 22%) !important; color:var(--text) !important; font-size:21px !important; line-height:1 !important; font-weight:950 !important; letter-spacing:0 !important; flex-shrink:0 !important; } #screenN5:not([data-n5-core-section]) #n5CoreVocabularyCard::before{ content:"📘" !important; } #screenN5:not([data-n5-core-section]) #n5CoreSentencesCard::before{ content:"💬" !important; } #screenN5:not([data-n5-core-section]) #n5CoreWritingCard::before{ content:"✍️" !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardTitle, #screenN5:not([data-n5-core-section]) .n5-core-card-title{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; margin:0 !important; font-size:0 !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardTitle::after, #screenN5:not([data-n5-core-section]) .n5-core-card-title::after{ display:block !important; min-width:0 !important; color:var(--text) !important; font-size:15px !important; font-weight:800 !important; line-height:1.15 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) #n5CoreVocabularyTitle::after{ content:"Vocabulary Core" !important; } #screenN5:not([data-n5-core-section]) #n5CoreSentencesTitle::after{ content:"Sentence Core" !important; } #screenN5:not([data-n5-core-section]) #n5CoreWritingTitle::after{ content:"Writing Core" !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardDescription, #screenN5:not([data-n5-core-section]) .n5-core-card-description{ grid-column:2 !important; grid-row:2 !important; min-width:0 !important; margin:0 !important; color:var(--muted) !important; font-size:0 !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardDescription::after, #screenN5:not([data-n5-core-section]) .n5-core-card-description::after{ display:block !important; min-width:0 !important; color:var(--muted) !important; font-size:12px !important; font-weight:700 !important; line-height:1.15 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) #n5CoreVocabularyDescription::after{ content:"Flashcards" !important; } #screenN5:not([data-n5-core-section]) #n5CoreSentencesDescription::after{ content:"Quiz" !important; } #screenN5:not([data-n5-core-section]) #n5CoreWritingDescription::after{ content:"Practice" !important; } #screenN5:not([data-n5-core-section]) .n5CoreAction, #screenN5:not([data-n5-core-section]) .study-level-button{ grid-column:3 !important; grid-row:1 / span 2 !important; align-self:center !important; justify-self:end !important; width:64px !important; min-width:64px !important; max-width:64px !important; height:34px !important; min-height:34px !important; padding:0 !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; white-space:nowrap !important; font-size:0 !important; font-weight:850 !important; line-height:1 !important; } #screenN5:not([data-n5-core-section]) .n5CoreAction::after, #screenN5:not([data-n5-core-section]) .study-level-button::after{ content:"Open" !important; font-size:12px !important; font-weight:850 !important; line-height:1 !important; white-space:nowrap !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{ width:100% !important; box-sizing:border-box !important; padding:14px !important; border-radius:16px !important; overflow:hidden !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizBackBtn, #screenN5[data-mobile-quiz-state="active"] #n5QuizTypeTag, #screenN5[data-mobile-quiz-state="active"] #n5QuizProgress, #screenN5[data-mobile-quiz-state="active"] .miniTag, #screenN5[data-mobile-quiz-state="active"] .btn.small{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizTypeTag{ max-width:100% !important; font-size:12px !important; line-height:1.2 !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizPrompt{ max-width:100% !important; margin:0 !important; font-size:clamp(16px,4.2vw,20px) !important; line-height:1.25 !important; letter-spacing:0 !important; overflow-wrap:break-word !important; word-break:normal !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizSubPrompt{ max-width:100% !important; font-size:13px !important; line-height:1.25 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizInputRow{ width:100% !important; min-width:0 !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizAnswerInput{ width:100% !important; min-height:44px !important; box-sizing:border-box !important; font-size:16px !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizSubmitBtn, #screenN5[data-mobile-quiz-state="active"] #n5QuizNextBtn{ width:100% !important; min-height:42px !important; font-size:14px !important; } } /* Mobile-only symmetry pass: no icons, fixed card/button columns, one-line quiz text. */ @media (max-width:767px){ #screenN5:not([data-n5-core-section]) .n5CoreGrid, #screenN5:not([data-n5-core-section]) .n5-core-grid{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; max-width:100% !important; } #screenN5:not([data-n5-core-section]) .n5CoreCard, #screenN5:not([data-n5-core-section]) .n5-core-card{ width:100% !important; height:68px !important; min-height:68px !important; max-height:68px !important; display:grid !important; grid-template-columns:minmax(0,1fr) 64px !important; grid-template-rows:1fr 1fr !important; align-items:center !important; column-gap:12px !important; row-gap:0 !important; padding:12px 14px !important; box-sizing:border-box !important; border-radius:16px !important; overflow:hidden !important; } #screenN5:not([data-n5-core-section]) .n5CoreCard::before, #screenN5:not([data-n5-core-section]) .n5-core-card::before{ content:"" !important; display:none !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardTitle, #screenN5:not([data-n5-core-section]) .n5-core-card-title{ grid-column:1 !important; grid-row:1 !important; align-self:end !important; min-width:0 !important; max-width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardTitle::after, #screenN5:not([data-n5-core-section]) .n5-core-card-title::after{ font-size:14px !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardDescription, #screenN5:not([data-n5-core-section]) .n5-core-card-description{ grid-column:1 !important; grid-row:2 !important; align-self:start !important; min-width:0 !important; max-width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardDescription::after, #screenN5:not([data-n5-core-section]) .n5-core-card-description::after{ font-size:12px !important; line-height:1.05 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5:not([data-n5-core-section]) .n5CoreAction, #screenN5:not([data-n5-core-section]) .study-level-button{ grid-column:2 !important; grid-row:1 / span 2 !important; width:64px !important; min-width:64px !important; max-width:64px !important; height:34px !important; min-height:34px !important; padding:0 !important; justify-self:end !important; align-self:center !important; white-space:nowrap !important; overflow:hidden !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{ gap:9px !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizTypeTag, #screenN5[data-mobile-quiz-state="active"] #n5QuizProgress{ max-width:100% !important; font-size:11px !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizPrompt{ max-width:100% !important; font-size:clamp(18px, var(--n5-quiz-prompt-size, 22px), 24px) !important; line-height:1.25 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere !important; word-break:keep-all !important; letter-spacing:0 !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizSubPrompt{ max-width:100% !important; font-size:var(--n5-quiz-subprompt-size, 11px) !important; line-height:1.25 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; overflow-wrap:normal !important; } #screenN5[data-n5-core-section] .n5StageCopy, #screenN5[data-n5-core-section] #n5ActionIntroLabel, #screenN5[data-n5-core-section] #n5ActionIntroTitle, #screenN5[data-n5-core-section] #n5ActionIntroText, #screenN5[data-n5-core-section] .n5StageTitle, #screenN5[data-n5-core-section] .n5StageText{ display:none !important; } #screenN5[data-n5-core-section] .practiceHeader{ margin-bottom:10px !important; } #screenN5[data-n5-core-section] .practiceTitle, #screenN5[data-n5-core-section] .practiceSub{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback{ max-width:100% !important; font-size:12px !important; line-height:1.2 !important; overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; } #screenN5[data-mobile-quiz-state="active"] #n5QuizChoices .btn{ min-height:38px !important; font-size:13px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5ContentCard, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5PracticePanel, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceShell, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceMain, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{ height:auto !important; min-height:auto !important; overflow:visible !important; transform:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:12px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{ grid-template-areas: "back" "progress" "prompt" "sub" "feedback" "input" "choices" "next" !important; width:100% !important; max-width:100% !important; height:auto !important; min-height:auto !important; box-sizing:border-box !important; overflow:visible !important; gap:12px !important; padding:16px 14px calc(120px + env(safe-area-inset-bottom)) !important; border-radius:18px !important; border:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important; background:color-mix(in srgb, var(--card) 96%, white 4%) !important; box-shadow:0 8px 24px rgba(15, 23, 42, 0.06) !important; align-content:start !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizProgress{ grid-area:progress !important; display:block !important; width:100% !important; min-height:0 !important; margin:0 0 2px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; text-align:initial !important; letter-spacing:0 !important; overflow:visible !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizProgressTop{ display:grid !important; grid-template-columns:minmax(0, 1fr) auto auto !important; align-items:center !important; gap:8px !important; width:100% !important; margin-bottom:6px !important; color:var(--muted) !important; font-size:12px !important; line-height:1.2 !important; font-weight:800 !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizProgressLabel, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizProgressCount{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizProgressCount{ justify-self:end !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizScorePill{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:52px !important; height:26px !important; padding:0 10px !important; border-radius:999px !important; background:color-mix(in srgb, var(--ring) 12%, transparent) !important; color:color-mix(in srgb, var(--ring) 78%, var(--text) 22%) !important; font-size:12px !important; font-weight:850 !important; line-height:1 !important; white-space:nowrap !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizProgressTrack{ width:100% !important; height:8px !important; border-radius:999px !important; background:color-mix(in srgb, var(--border) 74%, transparent) !important; overflow:hidden !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizProgressFill{ width:var(--n5-quiz-progress, 0%) !important; height:100% !important; border-radius:999px !important; background:var(--ring) !important; transition:width 220ms ease !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizPrompt{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:block !important; min-height:auto !important; margin:0 !important; padding:12px 14px !important; font-size:clamp(18px, var(--n5-quiz-prompt-size, 22px), 24px) !important; line-height:1.25 !important; white-space:normal !important; overflow:visible !important; overflow-wrap:anywhere !important; word-break:keep-all !important; text-overflow:clip !important; transform:none !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #flashCardFront{ height:auto !important; min-height:auto !important; overflow:visible !important; padding:16px 14px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #flashCardFront .flashFrontMain{ font-size:clamp(18px, 5vw, 24px) !important; line-height:1.25 !important; max-width:100% !important; overflow-wrap:anywhere !important; word-break:keep-all !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizBackBtn{ min-height:38px !important; padding:8px 12px !important; border-radius:999px !important; font-size:14px !important; line-height:1 !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizInputRow{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin-top:14px !important; padding:12px !important; border-radius:18px !important; border:1px solid color-mix(in srgb, var(--border) 78%, transparent) !important; background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%) !important; scroll-margin-bottom:140px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizInputRow::before{ content:attr(data-answer-label); font-size:13px !important; line-height:1.2 !important; font-weight:800 !important; color:color-mix(in srgb, var(--text) 78%, var(--muted) 22%) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizInputRow[hidden]{ display:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizAnswerInput{ width:100% !important; min-height:50px !important; box-sizing:border-box !important; padding:12px 14px !important; border-radius:14px !important; border:1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%) !important; background:color-mix(in srgb, var(--card) 98%, white 2%) !important; color:var(--text) !important; font-size:16px !important; line-height:1.35 !important; outline:none !important; box-shadow:0 1px 0 rgba(15, 23, 42, 0.03) inset !important; transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizAnswerInput:focus{ border-color:color-mix(in srgb, var(--ring) 74%, #3b82f6 26%) !important; box-shadow:0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent), 0 1px 0 rgba(15, 23, 42, 0.03) inset !important; background:var(--card) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizAnswerInput::placeholder{ color:color-mix(in srgb, var(--muted) 78%, transparent) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizSubmitBtn, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizNextBtn{ width:100% !important; min-height:48px !important; border-radius:14px !important; border:0 !important; font-size:15px !important; font-weight:850 !important; line-height:1 !important; cursor:pointer !important; transition:transform 120ms ease, opacity 120ms ease, filter 160ms ease !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizSubmitBtn:active, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizNextBtn:active{ transform:scale(0.98) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizSubmitBtn:disabled, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizNextBtn:disabled{ opacity:0.55 !important; cursor:not-allowed !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback{ grid-area:feedback !important; display:block !important; margin-top:4px !important; padding:12px 14px !important; border-radius:14px !important; font-size:14px !important; line-height:1.35 !important; font-weight:800 !important; overflow:visible !important; text-align:left !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important; animation:n5AnswerFadeIn 180ms ease-out !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback:empty{ display:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback.good{ color:color-mix(in srgb, var(--good) 72%, var(--text) 28%) !important; background:color-mix(in srgb, var(--good) 10%, transparent) !important; border:1px solid color-mix(in srgb, var(--good) 24%, transparent) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback.bad{ color:color-mix(in srgb, var(--bad) 76%, var(--text) 24%) !important; background:color-mix(in srgb, var(--bad) 10%, transparent) !important; border:1px solid color-mix(in srgb, var(--bad) 24%, transparent) !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizAnswerPanel{ display:flex !important; flex-direction:column !important; gap:6px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizAnswerState{ font-size:12px !important; line-height:1.2 !important; font-weight:900 !important; text-transform:none !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizAnswerText{ font-size:18px !important; line-height:1.25 !important; font-weight:850 !important; overflow-wrap:anywhere !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5QuizAnswerFull{ font-size:15px !important; line-height:1.35 !important; font-weight:750 !important; overflow-wrap:anywhere !important; } @keyframes n5AnswerFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } } } @media (max-width:420px){ body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizPrompt{ font-size:clamp(16px, var(--n5-quiz-prompt-size, 20px), 21px) !important; line-height:1.25 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #flashCardFront .flashFrontMain{ font-size:clamp(16px, 4.8vw, 21px) !important; } } /* N5 Core final cleanup: desktop hub/cards and one-title core pages. */ #screenN5[data-n5-core-section] #n5ContentCard .panelHeader, #screenN5[data-n5-core-section] .n5MobilePanelBar .miniTag, #screenN5[data-n5-core-section] .n5WorkspaceEyebrow, #screenN5[data-n5-core-section] .practiceSub, #screenN5[data-n5-core-section] .n5StageCopy, #screenN5[data-n5-core-section] #n5ActionIntroLabel, #screenN5[data-n5-core-section] #n5ActionIntroTitle, #screenN5[data-n5-core-section] #n5ActionIntroText, #screenN5[data-n5-core-section] .n5StageTitle, #screenN5[data-n5-core-section] .n5StageText, #screenN5[data-n5-core-section] #n5QuizTypeTag{ display:none !important; } body[data-current-route="n5"] #studentStudyLevelNavBtn{ display:none !important; } #screenN5:not([data-n5-core-section]) #n5CoreDescription, #screenN5:not([data-n5-core-section]) #n5PathStageLabel, #screenN5:not([data-n5-core-section]) .n5RecommendedCard{ display:none !important; } #screenN5[data-n5-core-section="sentences"] #n5WorkspaceSearchRow, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceFilters, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceGrid, #screenN5[data-n5-core-section="writing"] #n5WorkspaceSearchRow, #screenN5[data-n5-core-section="writing"] #n5WorkspaceFilters, #screenN5[data-n5-core-section="writing"] #n5WorkspaceGrid{ display:none !important; } #screenN5[data-n5-core-section] .practiceHeader{ margin:0 0 14px !important; padding:0 !important; border:0 !important; background:transparent !important; } #screenN5[data-n5-core-section] .practiceTitle{ font-size:28px !important; line-height:1.12 !important; font-weight:950 !important; letter-spacing:0 !important; } #screenN5[data-n5-core-section] .n5StageHead{ display:flex !important; align-items:center !important; justify-content:flex-start !important; padding:0 !important; border:0 !important; background:transparent !important; } #screenN5[data-n5-core-section="vocabulary"] .n5VocabularySearchLabel{ display:block !important; color:var(--muted) !important; font-size:13px !important; font-weight:900 !important; line-height:1.2 !important; } @media (min-width:768px){ #screenN5:not([data-n5-core-section]) #n5ContentCard{ display:none !important; } #screenN5[data-n5-core-section] .n5PathHubCard{ display:none !important; } #screenN5[data-n5-core-section] #n5MainGrid{ display:grid !important; grid-template-columns:minmax(0, 920px) !important; justify-content:center !important; } #screenN5[data-n5-core-section] #n5ContentCard{ display:block !important; } #screenN5:not([data-n5-core-section]) .n5PathGrid{ max-width:920px !important; } #screenN5:not([data-n5-core-section]) .n5CoreGrid, #screenN5:not([data-n5-core-section]) .n5-core-grid{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:18px !important; align-items:stretch !important; } #screenN5:not([data-n5-core-section]) #n5CoreKanaCard{ display:none !important; } #screenN5:not([data-n5-core-section]) .n5CoreCard, #screenN5:not([data-n5-core-section]) .n5-core-card{ min-height:140px !important; height:100% !important; padding:22px !important; border-radius:18px !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; gap:18px !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardDescription, #screenN5:not([data-n5-core-section]) .n5-core-card-description{ display:none !important; } #screenN5:not([data-n5-core-section]) .n5CoreCardTitle, #screenN5:not([data-n5-core-section]) .n5-core-card-title{ font-size:18px !important; font-weight:900 !important; line-height:1.2 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } #screenN5:not([data-n5-core-section]) .n5CoreAction, #screenN5:not([data-n5-core-section]) .study-level-button{ width:100% !important; min-height:44px !important; height:44px !important; justify-content:center !important; border-radius:14px !important; } #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearchRow{ display:grid !important; grid-template-columns:max-content minmax(0, 1fr) auto auto !important; align-items:center !important; gap:10px !important; } } /* Sentence/Writing Core web tools. */ .n5CoreListBack[hidden]{ display:none !important; } .n5CoreListBack{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.34); } .n5CoreListSheet{ width:min(660px,100%); max-height:min(78dvh,640px); overflow:auto; border:1px solid var(--border); border-radius:18px; background:var(--card); box-shadow:0 24px 52px rgba(15,23,42,.24); padding:14px; } .n5CoreListHandle{ width:42px; height:4px; border-radius:999px; background:color-mix(in srgb, var(--muted) 34%, transparent); margin:0 auto 12px; } .n5CoreListHeader, .n5CoreListPager{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .n5CoreListTitle{ font-size:20px; line-height:1.15; font-weight:950; } .n5CoreListMeta, .n5CoreListLine{ color:var(--muted); font-size:13px; line-height:1.35; } .n5CoreListSearch{ width:100%; min-width:0; margin-top:12px; } .n5CoreListItems{ display:grid; gap:8px; margin:12px 0; } .n5CoreListItem{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px 10px; align-items:start; padding:11px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } .n5CoreListIndex{ width:24px; height:24px; display:grid; place-items:center; border-radius:999px; background:var(--chip); font-size:12px; font-weight:900; } .n5CoreListBody{ display:grid; gap:4px; min-width:0; } .n5CoreListLead{ font-size:18px; line-height:1.15; font-weight:950; overflow-wrap:anywhere; } .n5CoreListExample{ color:var(--text); font-size:15px; line-height:1.35; font-weight:850; overflow-wrap:anywhere; } .n5CoreListEmpty{ padding:16px; border:1px solid var(--border); border-radius:12px; color:var(--muted); text-align:center; font-weight:850; } .n5CoreListBack[data-mode="details"] .n5CoreListSearch, .n5CoreListBack[data-mode="details"] .n5CoreListMeta, .n5CoreListBack[data-mode="details"] .n5CoreListPager{ display:none !important; } .n5CoreDetailContent{ display:grid; gap:14px; margin-top:12px; } .n5CoreDetailLead{ font-size:32px; line-height:1.05; font-weight:950; overflow-wrap:anywhere; } .n5CoreDetailBlock{ display:grid; gap:5px; padding:12px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%); } .n5CoreDetailLabel{ color:var(--muted); font-size:12px; line-height:1.2; font-weight:900; text-transform:uppercase; letter-spacing:0; } .n5CoreDetailText{ color:var(--text); font-size:15px; line-height:1.45; font-weight:750; overflow-wrap:anywhere; } .core-library-section{ box-sizing:border-box; overflow:hidden; } .core-library-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; } .core-library-title{ margin:0; color:var(--text); font-size:16px; font-weight:950; line-height:1.25; letter-spacing:0; } .core-library-subtitle{ margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.35; } @media (min-width:768px){ #screenN5[data-n5-core-section="vocabulary"][data-n5-action="flashcards"][data-n5-practice-state="idle"] .n5WorkspaceSurface, #screenN5[data-n5-core-section="sentences"][data-n5-action="quiz"][data-n5-practice-state="idle"] .n5WorkspaceSurface, #screenN5[data-n5-core-section="writing"][data-n5-action="quiz"][data-n5-practice-state="idle"] .n5WorkspaceSurface{ display:flex !important; flex-direction:column !important; gap:0 !important; align-items:stretch !important; } #screenN5[data-n5-core-section="vocabulary"][data-n5-action="flashcards"][data-n5-practice-state="idle"] .practiceHeader, #screenN5[data-n5-core-section="sentences"][data-n5-action="quiz"][data-n5-practice-state="idle"] .practiceHeader, #screenN5[data-n5-core-section="writing"][data-n5-action="quiz"][data-n5-practice-state="idle"] .practiceHeader{ order:1 !important; } #screenN5[data-n5-core-section="vocabulary"][data-n5-action="flashcards"][data-n5-practice-state="idle"] #n5FlashArea, #screenN5[data-n5-core-section="sentences"][data-n5-action="quiz"][data-n5-practice-state="idle"] #n5FlashArea, #screenN5[data-n5-core-section="writing"][data-n5-action="quiz"][data-n5-practice-state="idle"] #n5FlashArea{ order:3 !important; display:block !important; margin-top:22px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; } #screenN5[data-n5-core-section="vocabulary"][data-n5-action="flashcards"][data-n5-practice-state="idle"] .practiceActions, #screenN5[data-n5-core-section="sentences"][data-n5-action="quiz"][data-n5-practice-state="idle"] .practiceActions, #screenN5[data-n5-core-section="writing"][data-n5-action="quiz"][data-n5-practice-state="idle"] .practiceActions{ order:2 !important; } #screenN5[data-n5-core-section="vocabulary"] #n5CoreLibrarySection, #screenN5[data-n5-core-section="sentences"] #n5CoreLibrarySection, #screenN5[data-n5-core-section="writing"] #n5CoreLibrarySection{ margin-top:0; padding:18px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb, var(--card) 94%, transparent); } #screenN5[data-n5-core-section="vocabulary"] .n5StageHead{ margin-bottom:22px !important; } #screenN5[data-n5-core-section="sentences"] .n5StageHead, #screenN5[data-n5-core-section="writing"] .n5StageHead{ display:none !important; } #screenN5[data-n5-core-section="sentences"][data-n5-action="quiz"][data-n5-practice-state="idle"] #n5PracticeSettingsPanel, #screenN5[data-n5-core-section="writing"][data-n5-action="quiz"][data-n5-practice-state="idle"] #n5PracticeSettingsPanel{ order:4 !important; } #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearchRow, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceSearchRow, #screenN5[data-n5-core-section="writing"] #n5WorkspaceSearchRow{ display:grid !important; grid-template-columns:1fr !important; gap:9px !important; margin-top:0 !important; max-width:460px !important; } #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearch, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceSearch, #screenN5[data-n5-core-section="writing"] #n5WorkspaceSearch{ width:100% !important; max-width:460px !important; height:40px !important; padding:8px 12px !important; border-radius:12px !important; box-sizing:border-box !important; } #screenN5[data-n5-core-section="vocabulary"] #n5VocabularyWordListBtn, #screenN5[data-n5-core-section="sentences"] #n5VocabularyWordListBtn, #screenN5[data-n5-core-section="writing"] #n5VocabularyWordListBtn{ display:none !important; } #screenN5[data-n5-core-section="vocabulary"] .n5VocabularySearchLabel, #screenN5[data-n5-core-section="sentences"] .n5VocabularySearchLabel, #screenN5[data-n5-core-section="writing"] .n5VocabularySearchLabel{ display:block !important; color:var(--text) !important; font-size:14px !important; font-weight:900 !important; line-height:1.2 !important; } #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceFilters, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceFilters, #screenN5[data-n5-core-section="writing"] #n5WorkspaceFilters{ display:none !important; } #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceGrid, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceGrid, #screenN5[data-n5-core-section="writing"] #n5WorkspaceGrid{ display:block !important; margin-top:12px !important; } #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceStats, #screenN5[data-n5-core-section="sentences"] #n5WorkspaceStats, #screenN5[data-n5-core-section="writing"] #n5WorkspaceStats{ display:none !important; } #screenN5[data-n5-core-section="vocabulary"] .core-list-grid, #screenN5[data-n5-core-section="sentences"] .core-list-grid, #screenN5[data-n5-core-section="writing"] .core-list-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:0; } #screenN5[data-n5-core-section="vocabulary"] .core-list-item, #screenN5[data-n5-core-section="sentences"] .core-list-item, #screenN5[data-n5-core-section="writing"] .core-list-item{ appearance:none; width:100%; min-width:0; min-height:64px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); cursor:pointer; font:inherit; text-align:left; box-shadow:none; } #screenN5[data-n5-core-section="vocabulary"] .core-list-item:hover, #screenN5[data-n5-core-section="sentences"] .core-list-item:hover, #screenN5[data-n5-core-section="writing"] .core-list-item:hover{ background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%); } #screenN5[data-n5-core-section="vocabulary"] .core-list-item:focus-visible, #screenN5[data-n5-core-section="sentences"] .core-list-item:focus-visible, #screenN5[data-n5-core-section="writing"] .core-list-item:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px; } #screenN5[data-n5-core-section="vocabulary"] .core-list-main, #screenN5[data-n5-core-section="sentences"] .core-list-main, #screenN5[data-n5-core-section="writing"] .core-list-main{ display:block; width:100%; font-size:15px; font-weight:900; line-height:1.25; overflow-wrap:anywhere; } #screenN5[data-n5-core-section="vocabulary"] .core-list-sub, #screenN5[data-n5-core-section="sentences"] .core-list-sub, #screenN5[data-n5-core-section="writing"] .core-list-sub{ display:block; width:100%; color:var(--muted); font-size:13px; line-height:1.25; overflow-wrap:anywhere; } #screenN5[data-n5-core-section="vocabulary"] .core-pagination, #screenN5[data-n5-core-section="sentences"] .core-pagination, #screenN5[data-n5-core-section="writing"] .core-pagination{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; } #screenN5[data-n5-core-section="vocabulary"] .core-list-empty, #screenN5[data-n5-core-section="sentences"] .core-list-empty, #screenN5[data-n5-core-section="writing"] .core-list-empty{ max-width:460px; padding:14px; border:1px solid var(--border); border-radius:12px; color:var(--muted); font-weight:850; text-align:center; background:var(--card); } } @media (min-width:768px) and (max-width:900px){ #screenN5[data-n5-core-section="vocabulary"] .core-list-grid, #screenN5[data-n5-core-section="sentences"] .core-list-grid, #screenN5[data-n5-core-section="writing"] .core-list-grid{ grid-template-columns:1fr; } } .core-list-arrow{ display:none; } @keyframes vocabSheetSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } } @media (max-width:767px){ body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5CoreLibrarySection{ margin-top:18px !important; padding:14px !important; border:1px solid rgba(0,0,0,.08) !important; border-radius:18px !important; background:rgba(255,255,255,.92) !important; box-shadow:0 12px 30px rgba(15,23,42,.08) !important; overflow:visible !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearchRow{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:0 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .n5VocabularySearchLabel{ color:var(--text) !important; font-size:13px !important; font-weight:950 !important; line-height:1.2 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceSearch{ width:100% !important; height:42px !important; min-height:42px !important; padding:10px 12px !important; border-radius:14px !important; box-sizing:border-box !important; font-size:16px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .n5VocabularyWordListBtn, body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceStats, body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceFilters{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceGrid, body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] #n5WorkspaceGrid[data-has-query="true"]{ display:block !important; margin-top:12px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-grid{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:0 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-item{ min-height:52px !important; padding:10px 12px !important; border-radius:14px !important; display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; align-items:center !important; gap:10px !important; border:1px solid rgba(0,0,0,.08) !important; background:var(--card) !important; box-shadow:0 4px 12px rgba(15,23,42,.045) !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-copy{ min-width:0 !important; display:block !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-main{ font-size:17px !important; font-weight:900 !important; line-height:1.2 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-sub{ margin-top:3px !important; color:#6b7280 !important; font-size:12px !important; line-height:1.2 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-arrow{ display:block !important; color:var(--muted) !important; font-size:22px !important; line-height:1 !important; opacity:.55 !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-pagination{ display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; margin-top:12px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-pagination .btn{ min-width:82px !important; min-height:38px !important; border-radius:999px !important; padding:0 12px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-pagination .miniTag{ min-height:32px !important; display:inline-flex !important; align-items:center !important; white-space:nowrap !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .core-list-empty{ margin-top:0 !important; padding:14px !important; border:1px solid rgba(0,0,0,.08) !important; border-radius:14px !important; background:var(--card) !important; color:var(--muted) !important; text-align:center !important; font-weight:850 !important; } body.mobile-layout .n5CoreListBack[data-mode="details"]{ align-items:flex-end !important; padding:0 10px calc(10px + env(safe-area-inset-bottom)) !important; background:rgba(15,23,42,.34) !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreListSheet{ width:100% !important; max-height:72vh !important; padding:18px !important; border-radius:22px 22px 0 0 !important; background:var(--card) !important; animation:vocabSheetSlideUp 240ms cubic-bezier(.22,1,.36,1); } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreDetailContent{ gap:12px !important; margin-top:12px !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreDetailLead{ font-size:30px !important; line-height:1.08 !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreDetailBlock{ padding:12px !important; border-radius:16px !important; } } @media (prefers-reduced-motion: reduce){ body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreListSheet{ animation:none !important; } } /* N5 Core mobile symmetry pass. Desktop rules are intentionally untouched. */ @media (max-width:767px){ body.mobile-layout #screenN5, body.mobile-layout #screenN5 *{ box-sizing:border-box; } body.mobile-layout #screenN5{ width:100% !important; overflow-x:hidden !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreGrid, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-grid{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card{ width:100% !important; min-height:72px !important; height:72px !important; max-height:72px !important; display:grid !important; grid-template-columns:36px minmax(0,1fr) 64px !important; grid-template-rows:auto auto !important; align-items:center !important; gap:2px 12px !important; padding:12px 14px !important; border-radius:16px !important; overflow:hidden !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCard::before, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card::before{ width:36px !important; height:36px !important; border-radius:12px !important; font-size:19px !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardTitle::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-title::after{ font-size:14px !important; font-weight:850 !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardDescription::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-description::after{ font-size:11px !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreAction, body.mobile-layout #screenN5:not([data-n5-core-section]) .study-level-button{ width:64px !important; min-width:64px !important; height:34px !important; min-height:34px !important; border-radius:999px !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5ContentCard{ width:100% !important; padding:14px 14px calc(104px + env(safe-area-inset-bottom)) !important; overflow-x:hidden !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5WorkspaceSurface{ width:100% !important; display:flex !important; flex-direction:column !important; gap:0 !important; overflow:visible !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceHeader{ order:1 !important; width:100% !important; margin:0 0 12px !important; padding:0 !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceTitle{ margin:0 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceSub{ display:block !important; margin:4px 0 0 !important; color:var(--muted) !important; font-size:12px !important; line-height:1.3 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-n5-core-section] .practiceActions{ order:2 !important; width:100% !important; margin:0 0 14px !important; } body.mobile-layout #screenN5[data-n5-core-section="vocabulary"] .practiceActions{ display:none !important; margin:0 !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5QuizActionRow{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5PracticeStartBtn, body.mobile-layout #screenN5[data-n5-core-section] #n5ActionLaunchBtn{ width:100% !important; min-height:44px !important; height:44px !important; border-radius:999px !important; justify-content:center !important; font-size:14px !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5FlashArea{ order:3 !important; width:100% !important; display:block !important; padding:0 !important; overflow:visible !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5StageHead{ width:100% !important; display:block !important; margin:0 0 14px !important; padding:0 !important; } body.mobile-layout #screenN5[data-n5-core-section="sentences"] .n5StageHead, body.mobile-layout #screenN5[data-n5-core-section="writing"] .n5StageHead{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5CoreLibrarySection{ width:100% !important; display:flex !important; flex-direction:column !important; gap:0 !important; margin-top:0 !important; padding:14px !important; border:1px solid rgba(0,0,0,.08) !important; border-radius:18px !important; background:rgba(255,255,255,.92) !important; box-shadow:0 12px 30px rgba(15,23,42,.08) !important; overflow:hidden !important; } body.mobile-layout.dark #screenN5[data-n5-core-section] #n5CoreLibrarySection{ background:color-mix(in srgb, var(--card) 94%, transparent) !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceSearchRow{ order:1 !important; width:100% !important; display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin:0 !important; max-width:none !important; } body.mobile-layout #screenN5[data-n5-core-section] .n5VocabularySearchLabel{ display:block !important; color:var(--text) !important; font-size:12px !important; font-weight:850 !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceSearch{ width:100% !important; max-width:none !important; height:42px !important; min-height:42px !important; padding:10px 12px !important; border-radius:14px !important; font-size:16px !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5VocabularyWordListBtn, body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceStats, body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceFilters{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-library-header{ order:2 !important; width:100% !important; display:block !important; margin:12px 0 0 !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-library-title{ margin:0 !important; font-size:14px !important; line-height:1.2 !important; font-weight:850 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-library-subtitle{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceGrid, body.mobile-layout #screenN5[data-n5-core-section] #n5WorkspaceGrid[data-has-query="true"]{ order:3 !important; width:100% !important; display:block !important; margin-top:10px !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-grid{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:0 !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-item{ width:100% !important; min-height:52px !important; padding:10px 12px !important; border-radius:14px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; gap:8px !important; border:1px solid rgba(0,0,0,.08) !important; background:var(--card) !important; text-align:left !important; overflow:hidden !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-copy{ min-width:0 !important; display:block !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-main{ display:block !important; width:100% !important; font-size:15px !important; font-weight:850 !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-sub{ display:block !important; width:100% !important; margin-top:3px !important; color:#6b7280 !important; font-size:11px !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-arrow{ display:block !important; color:var(--muted) !important; font-size:20px !important; line-height:1 !important; opacity:.55 !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-pagination{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; margin-top:12px !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-pagination .btn{ min-width:72px !important; height:34px !important; min-height:34px !important; padding:0 10px !important; border-radius:999px !important; font-size:12px !important; white-space:nowrap !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-pagination .miniTag{ min-height:30px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:12px !important; white-space:nowrap !important; } body.mobile-layout #screenN5[data-n5-core-section] .core-list-empty{ width:100% !important; max-width:none !important; padding:14px !important; border-radius:14px !important; font-size:13px !important; } body.mobile-layout .n5CoreListBack[data-mode="details"]{ align-items:flex-end !important; justify-content:center !important; padding:0 !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreListSheet{ width:100% !important; max-height:72vh !important; padding:18px !important; border-radius:22px 22px 0 0 !important; overflow-y:auto !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreListHeader{ align-items:flex-start !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreListTitle{ font-size:16px !important; line-height:1.2 !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreDetailLead{ font-size:20px !important; font-weight:850 !important; line-height:1.2 !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreDetailLabel{ font-size:12px !important; font-weight:850 !important; } body.mobile-layout .n5CoreListBack[data-mode="details"] .n5CoreDetailText{ font-size:14px !important; line-height:1.4 !important; } } /* Mobile-only repair for the N5 Core entry cards. Keep quiz/detail screens unchanged. */ @media (max-width:767px){ body.mobile-layout #screenN5:not([data-n5-core-section]){ width:100% !important; margin-top:0 !important; padding:14px 14px calc(92px + env(safe-area-inset-bottom)) !important; overflow-x:hidden !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) #n5MainGrid{ width:100% !important; display:block !important; margin:0 !important; overflow:visible !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) #n5ContentCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5MobileHubTop, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5PathTop, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5MobileContinueCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5RecommendedCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5MoreDetails, body.mobile-layout #screenN5:not([data-n5-core-section]) #n5CoreKanaCard{ display:none !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5PathHubCard{ width:100% !important; max-width:none !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreGrid, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-grid{ width:100% !important; max-width:none !important; display:flex !important; flex-direction:column !important; gap:12px !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCard, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card{ position:relative !important; width:100% !important; max-width:none !important; min-height:96px !important; height:auto !important; max-height:none !important; box-sizing:border-box !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto !important; align-items:center !important; gap:5px 12px !important; padding:16px !important; border-radius:18px !important; border:1px solid rgba(0,0,0,.08) !important; background:var(--card) !important; box-shadow:0 10px 24px rgba(15,23,42,.07) !important; color:var(--text) !important; overflow:hidden !important; transform:none !important; pointer-events:auto !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCard::before, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card::before, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardTitle::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-title::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardDescription::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-description::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreAction::after, body.mobile-layout #screenN5:not([data-n5-core-section]) .study-level-button::after{ content:none !important; display:none !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardTitle, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-title{ grid-column:1 !important; grid-row:1 !important; min-width:0 !important; max-width:100% !important; display:block !important; margin:0 !important; color:var(--text) !important; font-size:16px !important; font-weight:850 !important; line-height:1.2 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; opacity:1 !important; visibility:visible !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardDescription, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-description, body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreCardDescription[hidden], body.mobile-layout #screenN5:not([data-n5-core-section]) .n5-core-card-description[hidden]{ grid-column:1 !important; grid-row:2 !important; min-width:0 !important; max-width:100% !important; display:block !important; margin:0 !important; color:#6b7280 !important; font-size:12px !important; font-weight:600 !important; line-height:1.35 !important; letter-spacing:0 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; opacity:1 !important; visibility:visible !important; } body.mobile-layout #screenN5:not([data-n5-core-section]) .n5CoreAction, body.mobile-layout #screenN5:not([data-n5-core-section]) .study-level-button{ grid-column:2 !important; grid-row:1 / span 2 !important; align-self:center !important; justify-self:end !important; z-index:1 !important; flex:0 0 auto !important; width:auto !important; min-width:68px !important; max-width:none !important; height:38px !important; min-height:38px !important; padding:0 14px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:inherit !important; font-size:13px !important; font-weight:800 !important; line-height:1 !important; white-space:nowrap !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } } /* N5 Core quiz context and static Back/header layout. */ #screenN5[data-n5-core-section] .n5MobilePanelBar{ position:static !important; z-index:auto !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; margin:0 0 16px !important; transform:none !important; } #screenN5[data-n5-core-section] #n5MobileBackBtn, #screenN5[data-mobile-quiz-state="active"] #n5QuizBackBtn{ position:static !important; z-index:auto !important; transform:none !important; flex:0 0 auto !important; white-space:nowrap !important; } #screenN5[data-n5-core-section] .practiceHeader{ position:static !important; z-index:auto !important; display:flex !important; align-items:flex-start !important; gap:12px !important; } #screenN5 #n5QuizSubPrompt.has-context-panel{ width:min(680px, 100%) !important; max-width:100% !important; margin:0 auto !important; text-align:left !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; color:var(--text) !important; font-size:14px !important; line-height:1.4 !important; } #screenN5 .n5QuizContextPanel{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; width:100% !important; padding:14px !important; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--border) 86%, transparent) !important; background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%) !important; box-shadow:0 8px 22px rgba(15,23,42,.055) !important; } #screenN5 .n5QuizContextPanel.writing{ background:color-mix(in srgb, var(--card) 92%, #eef6f2 8%) !important; } #screenN5 .n5QuizContextKicker{ color:var(--text) !important; font-size:13px !important; font-weight:900 !important; line-height:1.2 !important; } #screenN5 .n5QuizContextPrompt{ color:var(--text) !important; font-size:15px !important; font-weight:850 !important; line-height:1.35 !important; } #screenN5 .n5QuizContextBlock{ display:grid !important; grid-template-columns:1fr !important; gap:3px !important; min-width:0 !important; } #screenN5 .n5QuizContextLabel{ color:var(--muted) !important; font-size:12px !important; font-weight:850 !important; line-height:1.2 !important; } #screenN5 .n5QuizContextText{ color:var(--text) !important; font-size:14px !important; font-weight:700 !important; line-height:1.4 !important; overflow-wrap:anywhere !important; } #screenN5[data-n5-core-section="sentences"] #n5QuizPrompt, #screenN5[data-n5-core-section="writing"] #n5QuizPrompt{ min-height:auto !important; white-space:normal !important; text-align:center !important; line-height:1.18 !important; overflow-wrap:anywhere !important; word-break:keep-all !important; } #screenN5[data-n5-core-section="writing"] #n5QuizPrompt{ font-size:clamp(26px, 5vw, 46px) !important; } @media (max-width:767px){ body.mobile-layout #screenN5[data-n5-core-section] .n5MobilePanelBar{ display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:center !important; gap:10px !important; margin:0 0 14px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5MobilePanelBar{ display:none !important; } body.mobile-layout #screenN5[data-n5-core-section] #n5MobileBackBtn, body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizBackBtn{ min-height:36px !important; padding:8px 12px !important; border-radius:999px !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{ grid-template-areas: "back" "progress" "prompt" "sub" "input" "choices" "feedback" "next" !important; } body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizBackBtn{ grid-area:back !important; justify-self:start !important; } body.mobile-layout #screenN5 #n5QuizSubPrompt.has-context-panel{ width:100% !important; margin:0 !important; font-size:14px !important; } body.mobile-layout #screenN5 .n5QuizContextPanel{ padding:12px !important; border-radius:16px !important; gap:9px !important; } body.mobile-layout #screenN5 .n5QuizContextPrompt{ font-size:14px !important; } body.mobile-layout #screenN5 .n5QuizContextText{ font-size:14px !important; } } /* Mobile-only N5 focus, quiz completion, and Settings cleanup. */ @media (max-width:767px){ body.mobile-layout.core-focus-mode .topbar.appTopbar, body.mobile-layout.core-focus-mode #bottomNav, body.mobile-layout.core-focus-mode .main-mobile-header, body.mobile-layout.ai-open #bottomNav{ display:none !important; } body.mobile-layout.core-focus-mode .appMainScroll{ padding-bottom:12px !important; } body.mobile-layout.core-focus-mode #screenN5{ margin-top:0 !important; padding-top:10px !important; } body.mobile-layout #screenN5 #n5PracticeSummary{ width:100% !important; box-sizing:border-box !important; gap:14px !important; justify-items:center !important; margin:10px 0 0 !important; padding:20px !important; border-radius:20px !important; text-align:center !important; border:1px solid rgba(15,23,42,.08) !important; background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%) !important; box-shadow:0 10px 28px rgba(15,23,42,.07) !important; } body.mobile-layout #screenN5 #n5PracticeSummary[style*="block"]{ display:grid !important; } body.mobile-layout #screenN5 #n5PracticeSummaryText{ margin:0 !important; color:var(--text) !important; font-size:18px !important; font-weight:900 !important; line-height:1.18 !important; letter-spacing:0 !important; } body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryMobile{ display:grid !important; gap:8px !important; width:100% !important; max-width:340px !important; justify-items:center !important; } body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryScore{ margin:2px 0 0 !important; color:var(--text) !important; font-size:42px !important; font-weight:950 !important; line-height:1 !important; letter-spacing:0 !important; } body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryAdvice{ margin:0 0 8px !important; color:#6b7280 !important; font-size:14px !important; font-weight:700 !important; line-height:1.35 !important; } body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryWeakBtn, body.mobile-layout #screenN5 #n5PracticeSummary > .row .btn{ width:100% !important; min-height:44px !important; border-radius:14px !important; font-size:14px !important; font-weight:800 !important; white-space:nowrap !important; } body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryWeakBtn[disabled], body.mobile-layout #screenN5 #n5PracticeSummary .n5PracticeSummaryWeakBtn.isDisabled{ opacity:.58 !important; box-shadow:none !important; } body.mobile-layout #screenN5 #n5PracticeSummary > .row{ width:100% !important; max-width:340px !important; display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:0 !important; } body.mobile-layout #screenN5 #n5PracticeBackBrowseBtn{ order:1 !important; } body.mobile-layout #screenN5 #n5PracticeRetryBtn{ order:2 !important; background:transparent !important; color:var(--text) !important; box-shadow:none !important; } body.mobile-layout #screenSettings{ width:100% !important; box-sizing:border-box !important; margin-top:0 !important; padding:14px !important; overflow-x:hidden !important; } body.mobile-layout #screenSettings .settingsPageShell, body.mobile-layout #screenSettings .settingsCleanGrid, body.mobile-layout #screenSettings .settingsStudentStack{ width:100% !important; max-width:100% !important; margin:0 !important; display:grid !important; grid-template-columns:1fr !important; gap:12px !important; } body.mobile-layout #screenSettings .settingsMobileQuickGrid{ display:none !important; } body.mobile-layout #screenSettings .settingsPageIntro{ display:grid !important; gap:4px !important; padding:0 !important; } body.mobile-layout #screenSettings .settingsPageIntro .note{ font-size:12px !important; line-height:1.2 !important; } body.mobile-layout #screenSettings .settingsPageIntro h2{ margin:0 !important; font-size:20px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; } body.mobile-layout #screenSettings .settingsPageIntro .hint{ margin:0 !important; font-size:12px !important; line-height:1.35 !important; } body.mobile-layout #screenSettings .settingsSectionCard{ width:100% !important; box-sizing:border-box !important; display:grid !important; gap:12px !important; padding:16px !important; border-radius:18px !important; margin:0 !important; overflow:hidden !important; } body.mobile-layout #screenSettings .settingsSectionHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; } body.mobile-layout #screenSettings .settingsSectionHead h3{ margin:0 !important; font-size:15px !important; font-weight:900 !important; line-height:1.2 !important; letter-spacing:0 !important; } body.mobile-layout #screenSettings .settingsSectionHead .note{ font-size:11px !important; line-height:1.2 !important; } body.mobile-layout #screenSettings .settingsAccountSummary{ display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; gap:12px !important; align-items:center !important; } body.mobile-layout #screenSettings .settingsAccountAvatar{ width:48px !important; height:48px !important; border-radius:16px !important; font-size:14px !important; } body.mobile-layout #screenSettings .settingsInfoRow, body.mobile-layout #screenSettings .settingsToggleRow, body.mobile-layout #screenSettings .settingsSubsection, body.mobile-layout #screenSettings .settingsDangerZone{ width:100% !important; box-sizing:border-box !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:12px !important; align-items:center !important; min-height:44px !important; padding:12px !important; border-radius:16px !important; } body.mobile-layout #screenSettings .settingsSubsection, body.mobile-layout #screenSettings .settingsDangerZone{ grid-template-columns:1fr !important; } body.mobile-layout #screenSettings .settingsInfoRow b, body.mobile-layout #screenSettings .settingsRowText b, body.mobile-layout #screenSettings .settingsLabel{ font-size:14px !important; font-weight:800 !important; line-height:1.25 !important; } body.mobile-layout #screenSettings .settingsInfoRow span, body.mobile-layout #screenSettings .settingsRowText span, body.mobile-layout #screenSettings .settingsValue, body.mobile-layout #screenSettings .settingsStatusLine span, body.mobile-layout #screenSettings .settingsAccountHint{ font-size:12px !important; line-height:1.35 !important; } body.mobile-layout #screenSettings .settingsInfoRow strong{ font-size:13px !important; text-align:right !important; white-space:nowrap !important; } body.mobile-layout #screenSettings .settingsFormGrid, body.mobile-layout #screenSettings .settingsActionRow, body.mobile-layout #screenSettings .settingsInlineActions{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; width:100% !important; } body.mobile-layout #screenSettings .settingsSegmentRow{ width:100% !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; } body.mobile-layout #screenSettings .settingsSegmentRow .btn, body.mobile-layout #screenSettings .settingsActionRow .btn, body.mobile-layout #screenSettings .settingsInlineActions .btn, body.mobile-layout #screenSettings .settingsToggleRow .btn, body.mobile-layout #screenSettings .settingsDangerZone .btn{ width:100% !important; min-width:0 !important; min-height:44px !important; padding:8px 10px !important; border-radius:14px !important; font-size:13px !important; font-weight:800 !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenSettings .input{ width:100% !important; min-height:44px !important; box-sizing:border-box !important; font-size:16px !important; } } /* Mobile UX pass: Home, Kana, and Student only. Kept at the end to win older mobile rules. */ @media (max-width:767px){ body.mobile-layout[data-current-route="home"] .appMainScroll, body.mobile-layout[data-current-route="home"] .appLayout .wrap.appLayoutWrap, body.mobile-layout[data-current-route="kana"] .appMainScroll, body.mobile-layout[data-current-route="student"] .appMainScroll, body.mobile-layout[data-current-route="student"] .appLayout .wrap.appLayoutWrap{ background:#f6f7fb !important; } .mobileInfoButton{ display:inline-grid !important; place-items:center !important; width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; padding:0 !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.18) !important; background:#eef2ff !important; color:#4f46e5 !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; box-shadow:none !important; } body.mobile-layout #screenHome.homeSimpleScreen{ margin-top:0 !important; padding:0 0 calc(96px + env(safe-area-inset-bottom)) !important; background:#f6f7fb !important; --ring:#4f46e5; } body.mobile-layout #screenHome .homeSimplePage, body.mobile-layout #screenKana .grid, body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile{ width:100% !important; max-width:560px !important; margin:0 auto !important; box-sizing:border-box !important; } body.mobile-layout #screenHome .homeSimplePage{ padding:0 14px !important; } body.mobile-layout #screenHome .homeSimpleHeader{ display:flex !important; align-items:center !important; justify-content:space-between !important; min-height:34px !important; margin:0 0 10px !important; } body.mobile-layout #screenHome .homeSimpleHeader h1{ margin:0 !important; color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #screenHome .homeSimpleGrid{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin:0 !important; } body.mobile-layout #screenHome .homeSimpleCard, body.mobile-layout #screenKana .kanaJourneyCard, body.mobile-layout #screenKana .kanaPracticePanel, body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile > .card{ width:100% !important; box-sizing:border-box !important; padding:16px !important; border-radius:20px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; } body.mobile-layout #screenHome .homeDailyGoalSection{ order:1 !important; } body.mobile-layout #screenHome .homeQuickActionSection{ order:2 !important; } body.mobile-layout #screenHome .homeContinueSection, body.mobile-layout #screenHome .homeQuickActionSection h3, body.mobile-layout #screenHome .homeSimpleRingWrap, body.mobile-layout #screenHome #homeMissionReward{ display:none !important; } body.mobile-layout #screenHome .homeSimpleCard h3, body.mobile-layout #screenHome .homeSimplePrimaryText{ margin:0 !important; color:#111827 !important; font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenHome .homeSimpleMuted{ margin:4px 0 0 !important; color:#6b7280 !important; font-size:13px !important; line-height:1.35 !important; } body.mobile-layout #screenHome .homeDailyGoalBody{ display:block !important; } body.mobile-layout #screenHome .homeDailyGoalValue{ margin:8px 0 0 !important; color:#111827 !important; font-size:14px !important; font-weight:850 !important; } body.mobile-layout #screenHome .homeSimpleProgressTrack{ height:8px !important; margin:10px 0 0 !important; border-radius:999px !important; background:#e5e7eb !important; overflow:hidden !important; } body.mobile-layout #screenHome .homeSimpleProgressFill{ height:100% !important; border-radius:999px !important; background:#4f46e5 !important; } body.mobile-layout #screenHome .homeSimplePrimaryBtn{ width:100% !important; min-height:42px !important; margin-top:14px !important; border-radius:14px !important; background:#4f46e5 !important; border-color:#4f46e5 !important; color:#fff !important; font-size:14px !important; font-weight:800 !important; box-shadow:0 10px 18px rgba(79,70,229,.18) !important; } body.mobile-layout #screenKana{ margin-top:0 !important; padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; background:#f6f7fb !important; } body.mobile-layout #screenKana .grid{ gap:12px !important; } body.mobile-layout #screenKana .kanaJourneyHeader{ display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:10px !important; margin:0 0 12px !important; } body.mobile-layout #screenKana .kanaJourneyEyebrow, body.mobile-layout #screenKana #kanaJourneyText, body.mobile-layout #screenKana .kanaJourneyGrid, body.mobile-layout #screenKana #kanaMobileBrowseBtn, body.mobile-layout #screenKana .kanaAssessmentStatusTag, body.mobile-layout #screenKana .kanaAssessmentOverallTag{ display:none !important; } body.mobile-layout #screenKana .kanaJourneyTitle{ margin:0 !important; color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; text-align:left !important; } body.mobile-layout #screenKana .kanaJourneyMeta{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; gap:6px !important; max-width:58% !important; } body.mobile-layout #screenKana .kanaMobileProgressTag, body.mobile-layout #screenKana .kanaWeakMobileTag{ display:inline-flex !important; align-items:center !important; gap:6px !important; min-height:30px !important; padding:4px 6px 4px 10px !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.13) !important; background:#eef2ff !important; color:#312e81 !important; font-size:12px !important; font-weight:850 !important; line-height:1 !important; white-space:nowrap !important; } body.mobile-layout #screenKana .kanaMobileActionGrid{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn{ width:100% !important; min-height:56px !important; justify-content:flex-start !important; padding:0 14px !important; border-radius:16px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; color:#111827 !important; box-shadow:0 8px 18px rgba(15,23,42,.05) !important; font-size:14px !important; font-weight:850 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenKana #kanaMobileQuizBtn{ border-color:rgba(79,70,229,.2) !important; background:#eef2ff !important; color:#312e81 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn:disabled{ opacity:.55 !important; box-shadow:none !important; } body.mobile-layout #screenKana #kanaMobileAssessmentBtn[hidden]{ display:none !important; } body.mobile-layout #screenStudent{ margin-top:0 !important; padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; background:#f6f7fb !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; padding:0 14px 18px !important; } body.mobile-layout #screenStudent .studentMonthlyCard{ order:1 !important; padding:14px !important; gap:10px !important; } body.mobile-layout #screenStudent .studentLevelCard{ order:2 !important; } body.mobile-layout #screenStudent .studentStreakCard{ order:3 !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:4 !important; } body.mobile-layout #screenStudent .studentCycleSection{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyTitleRow{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; width:100% !important; } body.mobile-layout #screenStudent .studentMonthlyTitle{ margin:0 !important; color:#111827 !important; font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentMonthlyJourneyPath, body.mobile-layout #screenStudent .studentMonthlyExamPanel{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewList{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewList::before, body.mobile-layout #screenStudent .studentMonthlyReviewRow::before, body.mobile-layout #screenStudent .studentMonthlyReviewIcon, body.mobile-layout #screenStudent .studentMonthlyReviewCount, body.mobile-layout #screenStudent .studentMonthlyReviewProgress{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow{ display:grid !important; grid-template-columns:minmax(0,1fr) auto auto !important; grid-template-areas:"main state action" !important; align-items:center !important; column-gap:8px !important; min-height:38px !important; width:100% !important; padding:9px 10px !important; border-radius:14px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; min-width:0 !important; display:block !important; } body.mobile-layout #screenStudent .studentMonthlyReviewName{ color:#111827 !important; font-size:13px !important; line-height:1.2 !important; font-weight:800 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:end !important; min-height:22px !important; max-width:86px !important; margin:0 !important; padding:4px 8px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; display:none !important; width:auto !important; min-width:58px !important; min-height:28px !important; margin:0 !important; padding:0 10px !important; border-radius:999px !important; font-size:11px !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewAction{ display:inline-flex !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:rgba(79,70,229,.22) !important; background:#eef2ff !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ background:#4f46e5 !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isComplete .studentMonthlyReviewState{ background:#ecfdf5 !important; color:#047857 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isLocked .studentMonthlyReviewState{ background:#e5e7eb !important; color:#6b7280 !important; } } /* Final mobile-only Student/Kana overrides for the May 29 layout repair. */ @media (max-width:767px){ body.mobile-layout #screenStudent, body.mobile-layout #screenKana{ background:#f6f7fb !important; overflow-x:hidden !important; } body.mobile-layout #screenStudent{ margin-top:0 !important; padding:0 0 calc(96px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; padding:14px !important; } body.mobile-layout #screenStudent #studentStatsView.studentDashboardMobile > .card{ width:100% !important; max-width:100% !important; min-width:0 !important; min-height:0 !important; box-sizing:border-box !important; margin:0 !important; padding:16px !important; border-radius:18px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentLevelCard{ display:none !important; } body.mobile-layout #screenStudent .studentStreakCard{ order:1 !important; align-self:flex-start !important; width:auto !important; max-width:100% !important; min-height:42px !important; display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; padding:10px 14px !important; border-radius:999px !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentStreakIcon{ width:auto !important; height:auto !important; flex:0 0 auto !important; font-size:16px !important; line-height:1 !important; } body.mobile-layout #screenStudent .studentStreakCopy{ min-width:0 !important; display:block !important; } body.mobile-layout #screenStudent .studentStreakLabel, body.mobile-layout #screenStudent .studentStreakHint, body.mobile-layout #screenStudent .studentStreakBest{ display:none !important; } body.mobile-layout #screenStudent .studentStreakValue{ display:inline-flex !important; align-items:center !important; color:#111827 !important; font-size:14px !important; line-height:1.15 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentStreakValue [data-i18n="dayStreak"]{ display:none !important; } body.mobile-layout #screenStudent .studentStreakValue::after{ content:attr(data-mobile-unit); } body.mobile-layout #screenStudent .studentMonthlyCard{ order:2 !important; display:flex !important; flex-direction:column !important; gap:12px !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:3 !important; display:flex !important; flex-direction:column !important; gap:12px !important; } body.mobile-layout #screenStudent .studentCycleSection{ order:4 !important; display:block !important; width:100% !important; height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } body.mobile-layout #screenStudent .studentMonthlyCycleCard{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyTitleRow{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyTitle, body.mobile-layout #screenStudent #studentProgressHistoryTitle{ margin:0 !important; color:#111827 !important; font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentMonthlyJourneyPath, body.mobile-layout #screenStudent .studentMonthlyExamPanel, body.mobile-layout #screenStudent .studentProgressHistorySubtitle{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewList{ display:flex !important; flex-direction:column !important; gap:8px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyReviewIcon, body.mobile-layout #screenStudent .studentMonthlyReviewCount, body.mobile-layout #screenStudent .studentMonthlyReviewProgress, body.mobile-layout #screenStudent .studentMonthlyReviewList::before, body.mobile-layout #screenStudent .studentMonthlyReviewRow::before, body.mobile-layout #screenStudent .studentMonthlyReviewRow::after{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow{ width:100% !important; min-width:0 !important; min-height:42px !important; box-sizing:border-box !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "main state" "action action" !important; align-items:center !important; gap:8px 10px !important; padding:10px 12px !important; border-radius:14px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:visible !important; } body.mobile-layout #screenStudent .studentMonthlyReviewMain{ grid-area:main !important; min-width:0 !important; display:block !important; } body.mobile-layout #screenStudent .studentMonthlyReviewName{ color:#111827 !important; font-size:13px !important; line-height:1.25 !important; font-weight:800 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewState{ grid-area:state !important; justify-self:end !important; max-width:92px !important; min-height:23px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:4px 8px !important; border-radius:999px !important; font-size:11px !important; line-height:1 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMonthlyReviewAction{ grid-area:action !important; display:none !important; justify-self:start !important; width:auto !important; min-height:30px !important; margin:0 !important; padding:0 12px !important; border-radius:999px !important; font-size:12px !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewAction{ display:inline-flex !important; } body.mobile-layout #screenStudent .studentProgressHead{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentHistoryPreview{ width:100% !important; min-width:0 !important; margin:0 !important; } body.mobile-layout #screenStudent .studentSelectedMonthCard{ width:100% !important; box-sizing:border-box !important; padding:12px !important; border-radius:14px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentSelectedMonthName{ color:#111827 !important; font-size:14px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #screenStudent .studentSelectedMonthLine, body.mobile-layout #screenStudent .studentSelectedMonthExamLine{ color:#6b7280 !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; margin-top:10px !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics > div{ min-width:0 !important; padding:8px !important; border-radius:12px !important; background:#fff !important; border:1px solid rgba(15,23,42,.06) !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics span, body.mobile-layout #screenStudent .studentSelectedMonthMetrics b{ display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics span{ color:#6b7280 !important; font-size:10px !important; line-height:1.2 !important; font-weight:800 !important; } body.mobile-layout #screenStudent .studentSelectedMonthMetrics b{ margin-top:3px !important; color:#111827 !important; font-size:12px !important; line-height:1.25 !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryBtn{ width:100% !important; min-height:40px !important; justify-content:center !important; border-radius:14px !important; font-size:14px !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthlyCyclePanel, body.mobile-layout #screenStudent .studentMonthlyHistoryPanel{ position:fixed !important; inset:0 !important; z-index:1200 !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; padding:0 !important; background:rgba(8,16,28,.42) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } body.mobile-layout #screenStudent .studentMonthlyCyclePanel[hidden], body.mobile-layout #screenStudent .studentMonthlyHistoryPanel[hidden]{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyCycleSheet, body.mobile-layout #screenStudent .studentMonthlyHistorySheet{ width:100% !important; max-width:100% !important; max-height:min(86svh,720px) !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 !important; padding:16px !important; padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important; box-sizing:border-box !important; border:0 !important; border-radius:22px 22px 0 0 !important; background:#fff !important; box-shadow:0 -18px 44px rgba(7,15,28,.22) !important; } body.mobile-layout #screenKana{ margin-top:0 !important; padding:14px 14px calc(96px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenKana .grid{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; margin:0 !important; } body.mobile-layout #screenKana .kanaJourneyCard{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; padding:16px !important; border-radius:18px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenKana .kanaJourneyHeader{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:8px !important; margin:0 0 14px !important; } body.mobile-layout #screenKana .kanaJourneyEyebrow, body.mobile-layout #screenKana #kanaJourneyText, body.mobile-layout #screenKana .kanaJourneyGrid, body.mobile-layout #screenKana .kanaAssessmentStatusTag, body.mobile-layout #screenKana .kanaAssessmentOverallTag, body.mobile-layout #screenKana .kanaWeakMobileTag, body.mobile-layout #screenKana #kanaMobileReviewWeakBtn, body.mobile-layout #screenKana #kanaMobileAssessmentBtn{ display:none !important; } body.mobile-layout #screenKana .kanaJourneyTitle{ margin:0 !important; color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenKana .kanaJourneyMeta{ display:flex !important; align-items:center !important; justify-content:flex-start !important; flex-wrap:wrap !important; gap:6px !important; max-width:100% !important; } body.mobile-layout #screenKana .kanaMobileProgressTag{ display:inline-flex !important; align-items:center !important; max-width:100% !important; min-height:30px !important; gap:6px !important; padding:4px 6px 4px 10px !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.14) !important; background:#eef2ff !important; color:#312e81 !important; font-size:12px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenKana .kanaMobileActionGrid{ width:100% !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin:0 !important; } body.mobile-layout #screenKana .kanaMobileActionGrid .btn{ width:100% !important; min-height:54px !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; padding:0 14px !important; border-radius:16px !important; border:1px solid rgba(15,23,42,.08) !important; background:#fff !important; color:#111827 !important; box-shadow:0 8px 18px rgba(15,23,42,.05) !important; font-size:14px !important; line-height:1.2 !important; font-weight:850 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenKana #kanaMobileQuizBtn{ display:flex !important; border-color:rgba(79,70,229,.2) !important; background:#eef2ff !important; color:#312e81 !important; } body.mobile-layout #screenKana #kanaMobileBrowseBtn{ display:flex !important; } body.mobile-layout .mobileInfoButton{ width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; border-radius:999px !important; border:1px solid rgba(79,70,229,.18) !important; background:#fff !important; color:#4f46e5 !important; font-size:12px !important; line-height:1 !important; font-weight:900 !important; } body.mobile-layout #kanaChartModalBack{ align-items:flex-end !important; justify-content:center !important; padding:0 !important; overflow:hidden !important; background:rgba(8,16,28,.42) !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } body.mobile-layout #kanaChartModalBack .kanaChartModalCard{ width:100% !important; max-width:100% !important; max-height:min(88svh,720px) !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; margin:0 !important; padding:14px !important; padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important; border:0 !important; border-radius:22px 22px 0 0 !important; background:#fff !important; box-shadow:0 -18px 44px rgba(7,15,28,.22) !important; overflow:hidden !important; } body.mobile-layout #kanaChartModalBack .kanaChartHeader{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartHeader b{ color:#111827 !important; font-size:18px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartHeader .hint, body.mobile-layout #kanaChartModalBack .kanaChartFooter{ display:none !important; } body.mobile-layout #kanaChartModalBack .kanaChartSeg{ width:100% !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important; margin:0 !important; } body.mobile-layout #kanaChartModalBack .kanaChartBody{ min-width:0 !important; width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:12px !important; padding:0 !important; overflow-x:hidden !important; overflow-y:auto !important; } body.mobile-layout #kanaChartModalBack .kanaChartRows{ width:100% !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:6px !important; } body.mobile-layout #kanaChartModalBack .kanaChartRow, body.mobile-layout #kanaChartModalBack .kanaChartBasicMobile .kanaChartRow.isMobileGojuon{ width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:6px !important; } body.mobile-layout #kanaChartModalBack .kanaChartRow.isCompact{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } body.mobile-layout #kanaChartModalBack .kanaChartBasicMobile .kanaChartRow.isMobileGojuon{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } body.mobile-layout #kanaChartModalBack .kanaChartCell{ min-width:0 !important; min-height:36px !important; aspect-ratio:1 / 1 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; padding:4px !important; border-radius:10px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; box-shadow:none !important; overflow:hidden !important; } body.mobile-layout #kanaChartModalBack .kanaChartCell.isEmpty{ opacity:0 !important; pointer-events:none !important; border-color:transparent !important; background:transparent !important; } body.mobile-layout #kanaChartModalBack .kanaChartChar{ color:#111827 !important; font-size:16px !important; line-height:1 !important; font-weight:850 !important; } body.mobile-layout #kanaChartModalBack .kanaChartRomaji{ color:#6b7280 !important; font-size:9px !important; line-height:1 !important; font-weight:800 !important; white-space:nowrap !important; } } @media (max-width:374px){ body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ grid-template-columns:1fr !important; } body.mobile-layout #kanaChartModalBack .kanaChartRow, body.mobile-layout #kanaChartModalBack .kanaChartBasicMobile .kanaChartRow.isMobileGojuon{ gap:5px !important; } body.mobile-layout #kanaChartModalBack .kanaChartCell{ min-height:34px !important; border-radius:9px !important; } body.mobile-layout #kanaChartModalBack .kanaChartChar{ font-size:15px !important; } } /* Final mobile-only green theme and month picker overrides. */ @media (max-width:767px){ :root{ --mobile-primary:#16a34a; --mobile-primary-soft:#ecfdf5; --mobile-primary-ink:#14532d; --mobile-text:#111827; --mobile-muted:#6b7280; --mobile-card:#ffffff; --mobile-border:rgba(15,23,42,.08); } body.mobile-layout #screenStudent .studentMobileSummaryCard{ order:1 !important; width:100% !important; min-height:0 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:8px !important; margin:0 !important; padding:14px !important; border-radius:18px !important; border:1px solid var(--mobile-border) !important; background:#fff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important; overflow:hidden !important; } body.mobile-layout #screenStudent .studentMobileSummaryTop{ width:100% !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } body.mobile-layout #screenStudent .studentMobileSummaryName{ min-width:0 !important; color:var(--mobile-text) !important; font-size:16px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentMobileSummaryStreak{ flex:0 0 auto !important; min-height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:6px 10px !important; border-radius:999px !important; border:1px solid rgba(22,163,74,.18) !important; background:var(--mobile-primary-soft) !important; color:var(--mobile-primary-ink) !important; font-size:13px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #screenStudent .studentMobileSummaryLevel{ align-self:flex-start !important; max-width:100% !important; min-height:24px !important; display:none !important; align-items:center !important; padding:5px 9px !important; border-radius:999px !important; border:1px solid rgba(15,23,42,.07) !important; background:#f9fafb !important; color:var(--mobile-muted) !important; font-size:12px !important; line-height:1 !important; font-weight:750 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.mobile-layout #screenStudent .studentLevelCard, body.mobile-layout #screenStudent .studentStreakCard{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyCard{ order:2 !important; } body.mobile-layout #screenStudent .studentProgressHistoryCard{ order:3 !important; } body.mobile-layout #screenStudent .studentCycleSection{ order:4 !important; } body.mobile-layout #screenStudent .studentMonthlySubtitle, body.mobile-layout #screenStudent .studentMonthlyHelp, body.mobile-layout #screenStudent .studentProgressHistorySubtitle, body.mobile-layout #screenStudent .studentSelectedMonthMetrics{ display:none !important; } body.mobile-layout #screenStudent #studentProgressHistoryTitle{ font-size:16px !important; line-height:1.25 !important; font-weight:850 !important; letter-spacing:0 !important; } body.mobile-layout #monthlyCheckpointBack{ align-items:flex-start !important; justify-content:center !important; padding:14px !important; padding-top:calc(14px + env(safe-area-inset-top)) !important; overflow-y:auto !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointModalCard{ width:100% !important; max-width:420px !important; max-height:none !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; gap:14px !important; margin:0 auto !important; padding:18px !important; border-radius:20px !important; border:1px solid var(--mobile-border) !important; background:#fff !important; box-shadow:0 18px 44px rgba(7,15,28,.18) !important; overflow:visible !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointTop{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:14px !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointCloseBtn{ order:-1 !important; position:static !important; flex:0 0 auto !important; min-height:36px !important; max-width:100% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:8px 12px !important; border-radius:999px !important; border:1px solid var(--mobile-border) !important; background:#fff !important; color:var(--mobile-text) !important; font-size:13px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointTop > div{ min-width:0 !important; width:100% !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointTitle{ display:block !important; margin:0 !important; color:var(--mobile-text) !important; font-size:20px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointEyebrow, body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointSubtitle, body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointProgressNote, body.mobile-layout #monthlyCheckpointBack .kanaAssessmentFooter{ display:none !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointStartPanel:not([hidden]){ display:block !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartMeta{ display:flex !important; flex-direction:column !important; gap:0 !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow{ min-height:38px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; border-bottom:1px solid rgba(15,23,42,.07) !important; color:var(--mobile-text) !important; font-size:14px !important; line-height:1.25 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow span{ color:var(--mobile-muted) !important; font-weight:700 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartRow strong{ color:var(--mobile-text) !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointStartBtn{ width:100% !important; min-height:44px !important; margin-top:16px !important; border-radius:14px !important; font-size:14px !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack .kanaAssessmentProgressHead{ align-items:center !important; margin:0 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointProgressText{ min-height:28px !important; padding:6px 10px !important; border-radius:999px !important; background:var(--mobile-primary-soft) !important; color:var(--mobile-primary-ink) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #monthlyCheckpointBack #monthlyCheckpointTimer:not([hidden]){ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:28px !important; padding:6px 10px !important; border-radius:999px !important; border:1px solid rgba(22,163,74,.18) !important; background:#fff !important; color:var(--mobile-primary-ink) !important; font-size:12px !important; font-weight:900 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointQuestionShell{ padding:14px !important; border-radius:18px !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointPrompt{ display:flex !important; flex-direction:column !important; gap:6px !important; color:var(--mobile-text) !important; font-size:14px !important; line-height:1.35 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointPrompt .monthlyCheckpointContextLabel{ margin-top:2px !important; color:var(--mobile-muted) !important; font-size:12px !important; font-weight:750 !important; } body.mobile-layout #monthlyCheckpointBack .monthlyCheckpointPrompt strong{ color:var(--mobile-text) !important; font-size:14px !important; line-height:1.35 !important; font-weight:850 !important; } body.mobile-layout .btn.primary, body.mobile-layout #screenHome .homeSimplePrimaryBtn, body.mobile-layout #screenStudent .studentMonthlyHistoryBtn{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; box-shadow:0 10px 18px rgba(22,163,74,.18) !important; } body.mobile-layout .seg.active, body.mobile-layout #kanaChartModalBack .kanaChartSeg .seg.active{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenHome .homeSimpleProgressFill, body.mobile-layout #screenStudent .studentMonthlyReviewFill{ background:var(--mobile-primary) !important; } body.mobile-layout .mobileInfoButton{ border-color:rgba(22,163,74,.2) !important; color:var(--mobile-primary) !important; } body.mobile-layout #screenKana .kanaMobileProgressTag, body.mobile-layout #screenKana #kanaMobileQuizBtn, body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent{ border-color:rgba(22,163,74,.22) !important; background:var(--mobile-primary-soft) !important; color:var(--mobile-primary-ink) !important; } body.mobile-layout #screenStudent .studentMonthlyReviewRow.isCurrent .studentMonthlyReviewState{ background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthlyHistorySheet{ gap:12px !important; padding:18px !important; padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryModalHead{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:10px !important; min-height:34px !important; margin:0 !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryModalHead > div, body.mobile-layout #screenStudent .studentMonthlyHistoryModalHead h3, body.mobile-layout #screenStudent .studentMonthlyHistoryModalSub, body.mobile-layout #screenStudent .studentMonthlyHistoryDetail{ display:none !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryCloseBtn{ min-height:34px !important; padding:0 12px !important; border-radius:999px !important; border:1px solid var(--mobile-border) !important; background:#fff !important; color:var(--mobile-text) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthlyHistoryArchive, body.mobile-layout #screenStudent .studentMonthlyHistoryList{ width:100% !important; min-width:0 !important; display:block !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body.mobile-layout #screenStudent .studentMobileMonthPicker{ width:100% !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:12px !important; } body.mobile-layout #screenStudent .studentMonthPickerYearList{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } body.mobile-layout #screenStudent .studentMonthPickerYear, body.mobile-layout #screenStudent .studentMonthPickerMonth, body.mobile-layout #screenStudent .studentMonthPickerBack{ appearance:none !important; -webkit-appearance:none !important; min-width:0 !important; box-sizing:border-box !important; border:1px solid var(--mobile-border) !important; background:#fff !important; color:var(--mobile-text) !important; font-family:inherit !important; letter-spacing:0 !important; box-shadow:none !important; } body.mobile-layout #screenStudent .studentMonthPickerYear{ width:100% !important; min-height:44px !important; padding:0 14px !important; border-radius:14px !important; font-size:16px !important; line-height:1.2 !important; font-weight:850 !important; text-align:center !important; } body.mobile-layout #screenStudent .studentMonthPickerYear.isSelected{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthPickerBack{ align-self:flex-start !important; min-height:34px !important; padding:0 12px !important; border-radius:999px !important; color:var(--mobile-primary) !important; font-size:12px !important; font-weight:850 !important; } body.mobile-layout #screenStudent .studentMonthPickerYearTitle{ color:var(--mobile-text) !important; font-size:18px !important; line-height:1.2 !important; font-weight:900 !important; letter-spacing:0 !important; } body.mobile-layout #screenStudent .studentMonthPickerGrid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth{ width:100% !important; min-height:42px !important; padding:8px 6px !important; border-radius:14px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; color:var(--mobile-muted) !important; font-size:14px !important; line-height:1 !important; font-weight:800 !important; text-align:center !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.hasData{ color:var(--mobile-text) !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.hasData::after{ content:"" !important; display:block !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--mobile-primary) !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.isSelected{ border-color:var(--mobile-primary) !important; background:var(--mobile-primary) !important; color:#fff !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth.isSelected.hasData::after{ background:#fff !important; } } @media (max-width:374px){ body.mobile-layout #screenStudent .studentMonthPickerGrid{ gap:8px !important; } body.mobile-layout #screenStudent .studentMonthPickerMonth{ min-height:40px !important; border-radius:12px !important; font-size:13px !important; } }