/*
 * English World · secondary page visual system
 *
 * The home page is the visual anchor for the application: deep navy framing,
 * warm gold actions, and quiet paper surfaces for study content.  Secondary
 * workspaces keep their existing markup and behavior, while this file gives
 * them one deliberate, reusable visual language.
 */
:root {
  --ew-navy-950: #0d1d31;
  --ew-navy-900: #102a46;
  --ew-navy-800: #173b5d;
  --ew-navy-700: #285878;
  --ew-gold: #c59a45;
  --ew-gold-bright: #e2b85e;
  --ew-gold-soft: #f6edd8;
  --ew-paper: #f7fafc;
  --ew-paper-deep: #e7eff6;
  --ew-edge: #cbd9e5;
  --ew-ink: #20364e;
  --ew-muted: #728399;
  --ew-shadow: 0 15px 34px rgba(10, 30, 50, .14), 0 4px 8px rgba(10, 30, 50, .07);
  --ew-lift: 0 5px 0 rgba(207, 220, 231, .9), 0 11px 19px rgba(20, 48, 74, .08), inset 0 1px rgba(255,255,255,.92);
}

/* The dark glass backdrop makes it clear that a workspace is a focused mode. */
.module-overlay-bg,
.wb-overlay-bg,
.analysis-overlay,
.potato-chat-overlay {
  background: rgba(6, 18, 32, .72) !important;
  backdrop-filter: blur(8px) saturate(.88) !important;
}

.module-overlay,
.wb-overlay,
#analysisPanel,
.mistake-center-panel {
  color: var(--ew-ink) !important;
  background:
    radial-gradient(ellipse at 78% 0%, rgba(255,255,255,.92), transparent 38%),
    linear-gradient(145deg, var(--ew-paper) 0%, var(--ew-paper-deep) 100%) !important;
  border: 1px solid rgba(203, 217, 229, .95) !important;
  box-shadow: 0 18px 0 rgba(172, 192, 208, .52), var(--ew-shadow) !important;
}

/* Learning analysis opens below the fixed home toolbar so its title never
   disappears behind the toolbar on compact screens. */
.analysis-overlay.open {
  align-items: flex-start !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  padding: 70px 20px 20px !important;
}
#analysisPanel {
  width: min(900px, 96vw) !important;
  max-height: calc(100vh - 90px) !important;
  margin: 0 auto !important;
  position: relative !important;
  isolation: isolate !important;
}

/* A shared navy header gives every secondary page the same point of arrival. */
.wb-header,
.module-overlay-header,
.analysis-header,
.mistake-center-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  min-height: 76px !important;
  padding: 16px 26px !important;
  color: #f7f1df !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(226,184,94,.16), transparent 30%),
    linear-gradient(110deg, var(--ew-navy-950), var(--ew-navy-900) 56%, var(--ew-navy-800)) !important;
  border-bottom: 2px solid var(--ew-gold) !important;
  box-shadow: 0 5px 0 rgba(10, 30, 50, .14), 0 12px 22px rgba(10, 30, 50, .16), inset 0 1px rgba(255,255,255,.1) !important;
}

.wb-header h2,
.module-overlay-header h2,
.analysis-header h2,
.mistake-center-title h2 {
  color: #fffaf0 !important;
  font-family: "Microsoft YaHei UI", "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.18) !important;
}

.wb-header h2::before,
.module-overlay-header h2::before,
.analysis-header h2::before,
.mistake-center-title h2::before {
  content: "ENGLISH WORLD";
  display: block;
  margin-bottom: 4px;
  color: var(--ew-gold-bright);
  font: 800 9px/1 "Segoe UI", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.wb-header p,
.module-overlay-header p,
.mistake-center-title small {
  color: #b8c9d8 !important;
  letter-spacing: .02em;
}

.wb-close,
.module-overlay-close,
.analysis-close,
.mistake-center-header > button,
.module-back-btn {
  border: 1px solid rgba(220, 235, 246, .34) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  color: #f3f7fb !important;
  box-shadow: 0 3px 0 rgba(4,14,25,.2), inset 0 1px rgba(255,255,255,.16) !important;
}

.wb-close:hover,
.module-overlay-close:hover,
.analysis-close:hover,
.mistake-center-header > button:hover,
.module-back-btn:hover,
.module-back-btn:focus-visible {
  border-color: var(--ew-gold-bright) !important;
  background: rgba(197,154,69,.26) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.module-overlay-body,
.wb-body,
.analysis-body,
.mistake-center-main {
  color: var(--ew-ink) !important;
  background:
    radial-gradient(ellipse at 82% 0%, rgba(255,255,255,.75), transparent 44%),
    linear-gradient(145deg, #edf4f9, #e5eef5 66%, #edf3f8) !important;
}

/* Intro panels are the equivalent of the home hero: a clear title and a next step. */
.module-panel-intro,
.teacher-home-hero,
.shared-materials-hero {
  border: 1px solid #cbd9e5 !important;
  border-left: 5px solid var(--ew-gold) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(197,154,69,.13), transparent 28%),
    linear-gradient(135deg, #fffef9, #eef5fa) !important;
  box-shadow: var(--ew-lift) !important;
}

.module-panel-intro h3,
.teacher-home-hero h2,
.shared-materials-hero h3 {
  color: var(--ew-navy-800) !important;
  font-weight: 800 !important;
}

.module-panel-intro-kicker,
.teacher-home-hero-kicker,
.shared-materials-hero .module-panel-intro-kicker {
  color: #ae7d25 !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}

.module-panel-intro-mark,
.teacher-home-hero-mark,
.shared-materials-hero-mark {
  border-color: #d7bd7d !important;
  background: linear-gradient(145deg, #fffaf0, #edf4f8) !important;
  box-shadow: 0 5px 0 #e1e8ed, 0 10px 17px rgba(39,63,85,.1) !important;
}

/* All large working surfaces use the same paper/card treatment. */
.module-feature-btn,
.teacher-home-action,
.teacher-home-schedule-card,
.teacher-tool-panel,
.teacher-student-panel,
.teacher-note-stats-panel,
.teacher-chart-panel,
.shared-material-row,
.analysis-stat,
.analysis-chart,
.mistake-stat,
.mistake-row,
.help-section,
.help-faq,
.quiz-opt,
.paper-sheet,
.essay-left,
.essay-right {
  border: 1px solid var(--ew-edge) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff, #f2f7fa) !important;
  box-shadow: var(--ew-lift) !important;
}

.module-feature-btn,
.teacher-home-action,
.teacher-home-schedule-card,
.shared-material-row,
.quiz-opt {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.module-feature-btn:hover,
.teacher-home-action:hover,
.teacher-home-schedule-card:hover,
.shared-material-row:hover,
.quiz-opt:hover {
  transform: translateY(-3px) !important;
  border-color: #a5bfd2 !important;
  background: linear-gradient(145deg, #fffef9, #edf5fa) !important;
  box-shadow: 0 7px 0 #d5e1ea, 0 15px 24px rgba(20, 48, 74, .13), inset 0 1px #fff !important;
}

.module-feature-btn .f-label,
.teacher-home-action-head,
.shared-material-title,
.analysis-section h3,
.help-section h3 {
  color: var(--ew-navy-800) !important;
}

.module-feature-btn .f-desc,
.teacher-home-action-desc,
.shared-material-subtitle,
.analysis-stat .as-label,
.help-intro {
  color: var(--ew-muted) !important;
}

/* Gold is reserved for the action that moves the learner forward. */
.module-overlay button.primary,
.module-overlay .primary,
.wb-overlay button.primary,
.wb-overlay .primary,
.teacher-home-action.primary,
.shared-materials-btn.primary,
.practice,
.essay-submit-btn,
#dailyGenBtn,
.qb-submit-btn {
  border-color: #b4872f !important;
  background: linear-gradient(145deg, #e0b65b, #b98225) !important;
  color: #fffdf5 !important;
  box-shadow: 0 4px 0 #8d651c, 0 9px 16px rgba(136, 95, 19, .2), inset 0 1px rgba(255,255,255,.24) !important;
}

.module-overlay button.primary:hover,
.module-overlay .primary:hover,
.wb-overlay button.primary:hover,
.wb-overlay .primary:hover,
.teacher-home-action.primary:hover,
.shared-materials-btn.primary:hover,
.practice:hover,
.essay-submit-btn:hover,
#dailyGenBtn:hover,
.qb-submit-btn:hover {
  background: linear-gradient(145deg, #edc36b, #c18d2d) !important;
  box-shadow: 0 5px 0 #8d651c, 0 13px 21px rgba(136, 95, 19, .26), inset 0 1px rgba(255,255,255,.3) !important;
}

.module-overlay button:not(.primary):not(.module-overlay-close),
.wb-overlay button:not(.primary):not(.wb-close),
.analysis-panel button,
.mistake-center-panel button,
.help-manual button,
.teacher-home button {
  border-radius: 9px !important;
}

:is(.module-overlay,.wb-overlay,.analysis-panel,.mistake-center-panel,.help-manual,.teacher-home) :is(input[type="text"],input[type="search"],input[type="number"],input[type="password"],textarea,select) {
  border: 1px solid #c1d2df !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ew-ink) !important;
  box-shadow: inset 0 2px 5px rgba(30,57,83,.035), 0 2px 0 rgba(255,255,255,.82) !important;
}

:is(.module-overlay,.wb-overlay,.analysis-panel,.mistake-center-panel,.help-manual,.teacher-home) :is(input,textarea,select):focus {
  outline: none !important;
  border-color: var(--ew-gold) !important;
  box-shadow: 0 0 0 3px rgba(197,154,69,.18), inset 0 2px 5px rgba(30,57,83,.025) !important;
}

/* Teacher tabs are the same workbench tabs as the home navigation. */
.teacher-home-nav {
  border: 1px solid #385d7b !important;
  border-radius: 13px !important;
  background: linear-gradient(110deg, var(--ew-navy-950), var(--ew-navy-800)) !important;
  box-shadow: 0 7px 0 rgba(13,29,49,.16), 0 13px 22px rgba(20,48,74,.13) !important;
}
.teacher-home-tab { border-radius: 9px !important; color: #d6e3ee !important; }
.teacher-home-tab.active { background: linear-gradient(145deg, #fffdf6, #edf4f8) !important; color: var(--ew-navy-800) !important; box-shadow: 0 3px 0 #d6e0e8, 0 7px 13px rgba(4,18,33,.18) !important; }

/* Knowledge map shares the same shell, while retaining its graph colors. */
body.knowledge-map-page {
  background: radial-gradient(ellipse at 76% 0%, rgba(255,255,255,.82), transparent 38%), linear-gradient(145deg, #edf2f7, #e5edf5 58%, #edf2f7) !important;
}
body.knowledge-map-page .topbar {
  background: linear-gradient(112deg, var(--ew-navy-950), var(--ew-navy-900) 58%, #214562) !important;
  border-bottom-color: var(--ew-gold) !important;
  box-shadow: 0 8px 22px rgba(16,31,53,.2), inset 0 -1px rgba(255,255,255,.1) !important;
}
body.knowledge-map-page .hero { padding-top: 34px; }
body.knowledge-map-page .hero h1 { color: var(--ew-navy-800); text-shadow: 0 2px #fff, 0 4px 0 rgba(210,222,233,.7); }
body.knowledge-map-page .metric,
body.knowledge-map-page .map-card,
body.knowledge-map-page .side-card {
  border-color: #d4deea !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, #fff, #fbfdff 68%, #eff5f9) !important;
  box-shadow: 0 7px 0 #dfe7ee, 0 12px 22px rgba(28,51,74,.08), inset 0 1px #fff !important;
}
body.knowledge-map-page .card-head { background: linear-gradient(145deg, #fff, #edf4f9); border-radius: 17px 17px 0 0; }
body.knowledge-map-page .detail,
body.knowledge-map-page .weak-list { background: transparent; }
body.knowledge-map-page .practice,
body.knowledge-map-page .submit { background: linear-gradient(145deg, #315f86, #214562); border-color: #284f71; color: #fff; }

@media (max-width: 760px) {
  .wb-header, .module-overlay-header, .analysis-header, .mistake-center-header { min-height: 66px !important; padding: 12px 14px !important; }
  .wb-header h2, .module-overlay-header h2, .analysis-header h2, .mistake-center-title h2 { font-size: 16px !important; }
  .wb-header h2::before, .module-overlay-header h2::before, .analysis-header h2::before, .mistake-center-title h2::before { font-size: 8px; }
  .module-panel-intro, .teacher-home-hero, .shared-materials-hero { border-radius: 13px !important; }
  .analysis-overlay.open { padding: 92px 8px 14px !important; }
  #analysisPanel { width: 100% !important; max-width: none !important; max-height: calc(100vh - 106px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .module-feature-btn, .teacher-home-action, .teacher-home-schedule-card, .shared-material-row, .quiz-opt { transition: none !important; }
}

/* The late legacy style block in index.html defines a second interior theme.
   This final pass intentionally follows it so the visible page actually picks
   up the home page's navy-and-gold identity. */
.module-overlay,
.wb-overlay,
.mistake-center-panel,
#analysisPanel {
  background:
    radial-gradient(ellipse at 76% 0%, rgba(75,119,154,.22), transparent 34%),
    linear-gradient(145deg, #10243b 0%, #0e1f33 56%, #142b44 100%) !important;
  border-color: #39536c !important;
  box-shadow: 0 18px 0 rgba(6,18,31,.34), 0 28px 58px rgba(4,14,26,.48), inset 0 1px rgba(255,255,255,.08) !important;
}

.module-overlay-body,
.wb-body,
.analysis-body,
.mistake-center-main,
.shared-materials-body,
#mBody.module-overlay-body {
  color: #e9f0f6 !important;
  background:
    radial-gradient(ellipse at 54% 0%, rgba(66,108,143,.2), transparent 43%),
    linear-gradient(150deg, #11263e 0%, #0c1d31 62%, #142b43 100%) !important;
}

.module-panel-intro,
.teacher-home-hero,
.shared-materials-hero {
  border: 1px solid #49647d !important;
  border-left: 5px solid var(--ew-gold-bright) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 91% 0%, rgba(226,184,94,.2), transparent 28%),
    linear-gradient(120deg, #1b3855 0%, #17324d 58%, #203e5b 100%) !important;
  box-shadow: 0 7px 0 rgba(5,17,30,.32), 0 16px 28px rgba(3,14,26,.23), inset 0 1px rgba(255,255,255,.11) !important;
}

.module-panel-intro h3,
.teacher-home-hero h2,
.shared-materials-hero h3 {
  color: #fffaf0 !important;
  text-shadow: 0 2px 0 rgba(4,16,28,.3) !important;
}

.module-panel-intro p,
.teacher-home-hero p,
.shared-materials-hero p {
  color: #c1d1df !important;
}

.module-panel-intro-kicker,
.teacher-home-hero-kicker {
  color: var(--ew-gold-bright) !important;
}

.module-panel-intro-mark,
.teacher-home-hero-mark,
.shared-materials-hero-mark {
  border: 1px solid rgba(226,184,94,.66) !important;
  background: linear-gradient(145deg, #f9f1db, #dce8f0) !important;
  box-shadow: 0 4px 0 rgba(5,17,30,.28), 0 10px 19px rgba(4,15,27,.25), inset 0 1px #fff !important;
}

.module-panel-intro-count {
  border-color: rgba(226,184,94,.42) !important;
  border-radius: 10px !important;
  background: rgba(8,24,40,.28) !important;
  color: #f0d38e !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08) !important;
}

.module-feature-btn,
.teacher-home-action,
.teacher-home-schedule-card,
.teacher-tool-panel,
.teacher-student-panel,
.teacher-note-stats-panel,
.teacher-chart-panel,
.teacher-note-jump-panel,
.teacher-master-data-grid .teacher-student-panel,
.shared-material-row,
.analysis-stat,
.analysis-chart,
.mistake-stat,
.mistake-row,
.help-route-item,
.help-note,
.help-faq,
.quiz-opt,
.paper-answer-sheet,
.paper-sheet,
.essay-left,
.essay-right {
  border: 1px solid #d4dce2 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fffdf7 0%, #f4eddd 100%) !important;
  color: #24384d !important;
  box-shadow: 0 5px 0 rgba(193,174,133,.5), 0 11px 19px rgba(2,12,23,.24), inset 0 1px #fff !important;
}

.module-feature-btn {
  border-top: 4px solid var(--ew-gold) !important;
}
.module-feature-btn:nth-child(4n+2),
.module-feature-btn:nth-child(4n+3),
.module-feature-btn:nth-child(4n+4) {
  border-top-color: var(--ew-gold) !important;
}
.module-feature-btn .f-icon,
.module-card-icon.learning-icon-decorated {
  border: 1px solid #e0cc96 !important;
  background: linear-gradient(145deg, #fffaf0, #eee3c9) !important;
}
.module-feature-btn .f-label,
.teacher-home-action-head,
.teacher-home .teacher-word-list h4,
.shared-material-title,
.analysis-section h3,
.analysis-section-title,
.help-section h3,
.help-route-item strong,
.help-step h4,
.mistake-summary strong {
  color: #173653 !important;
}
.module-feature-btn .f-desc,
.teacher-home-action-desc,
.shared-material-subtitle,
.help-route-item span,
.help-step p,
.help-intro {
  color: #627184 !important;
}

.teacher-home-section-label,
.analysis-body > h3,
.analysis-section > h3,
.mistake-center-main > h3 {
  color: #e8d39f !important;
}
.teacher-home-section-label::after {
  background: linear-gradient(90deg, rgba(226,184,94,.52), transparent) !important;
}
.teacher-home-nav {
  border-color: #526d84 !important;
  background: linear-gradient(110deg, #0b1d31, #1b3b59) !important;
  box-shadow: 0 6px 0 rgba(5,17,30,.38), 0 12px 21px rgba(3,14,26,.25) !important;
}
.teacher-home-tab.active {
  background: linear-gradient(145deg, #fff9e9, #ead9ae) !important;
  color: #173653 !important;
  box-shadow: 0 3px 0 #a88437, 0 7px 13px rgba(4,18,33,.25) !important;
}
.teacher-home-tip {
  border-left: 4px solid var(--ew-gold) !important;
  background: linear-gradient(145deg, #fff9e9, #eee1bf) !important;
}

.analysis-header,
.module-overlay-header,
.wb-header,
.mistake-center-header {
  border-bottom: 2px solid var(--ew-gold-bright) !important;
}
.analysis-stat .as-num,
.analysis-stat .as-label,
.analysis-chart,
.analysis-empty,
.analysis-body p,
.mistake-cell,
.mistake-summary span,
.mistake-stat-label {
  color: #334b61 !important;
}
.analysis-empty,
.mistake-empty,
.shared-material-empty,
.shared-material-status {
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fffdf7, #f2ead8) !important;
  color: #607184 !important;
}

.wb-tabs {
  border-color: #344d66 !important;
  background: linear-gradient(180deg, #142e49, #10243b) !important;
}
.wb-tab { color: #c0cfdd !important; }
.wb-tab.active { color: #fff8e8 !important; border-bottom-color: var(--ew-gold-bright) !important; }
.wb-item,
.flashcard,
.quiz-score,
.review-summary,
.wb-empty,
.wb-loading,
.quiz-result {
  border: 1px solid #d4dce2 !important;
  border-left: 4px solid var(--ew-gold) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #fffdf7, #f4eddd) !important;
  color: #24384d !important;
  box-shadow: 0 4px 0 rgba(193,174,133,.48), 0 9px 16px rgba(2,12,23,.2), inset 0 1px #fff !important;
}
.wb-item .wb-word { color: #173653 !important; }
.wb-item .wb-meaning,
.wb-item .wb-pos-tag,
.wb-item .wb-badge { color: #637487 !important; }

.shared-materials-toolbar,
.shared-materials-gate,
.shared-materials-editor,
.help-manual-content,
.help-section,
.help-faq details {
  border-color: #d4dce2 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fffdf7, #f4eddd) !important;
  color: #24384d !important;
  box-shadow: 0 5px 0 rgba(193,174,133,.46), 0 10px 18px rgba(2,12,23,.2) !important;
}
.help-manual { background: #11263e !important; }
.help-manual-nav { background: linear-gradient(180deg, #183653, #10243b) !important; border-color: #49647d !important; }
.help-manual-nav-title { color: #e8d39f !important; }
.help-nav-button { color: #d3dfeb !important; }
.help-nav-button:hover,
.help-nav-button.active { background: #fff8e8 !important; color: #173653 !important; }

.mistake-list { background: transparent !important; border: 0 !important; }
.mistake-row { margin: 8px 0 !important; }
.mistake-actions .primary,
.module-feature-btn.primary,
.teacher-home button.primary,
.shared-materials-btn.primary {
  border-color: #94702b !important;
  background: linear-gradient(145deg, #dfb657, #ae7a21) !important;
  color: #fffdf5 !important;
  box-shadow: 0 4px 0 #79551b, 0 8px 14px rgba(4,14,26,.22) !important;
}

#dailyContent > div,
#dailyContent .daily-question,
#qbEntryPanel .qb-upload-area,
#qbEntryPanel #aiGenPassage,
#qbEntryPanel #aiGenResult,
#qbEntryPanel #qbParsedBar,
#essayPanel .essay-left,
#essayPanel .essay-right {
  border-color: #d4dce2 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fffdf7, #f4eddd) !important;
  color: #24384d !important;
  box-shadow: 0 5px 0 rgba(193,174,133,.46), 0 10px 18px rgba(2,12,23,.2), inset 0 1px #fff !important;
}
#dailyContent h3,
#essayPanel .essay-label,
#essayPanel .essay-section-title {
  color: #173653 !important;
}
#dailyContent p,
#dailyContent li { color: #344b61 !important; }
#dailyContent p[style*="line-height:1.8"] { color: #26384d !important; }
#essayPanel .essay-textarea,
#essayPanel .essay-req-textarea {
  border-radius: 10px !important;
  background: #fffefa !important;
  color: #26384d !important;
}

#videoOverlay {
  background: radial-gradient(ellipse at 75% 0%, rgba(57,96,130,.28), transparent 34%), linear-gradient(145deg, #10243b, #0c1d31 62%, #142b44) !important;
}
#videoMenu > div {
  border: 1px solid #d6dce0 !important;
  border-top: 4px solid var(--ew-gold) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fffdf7, #f2ead8) !important;
  color: #173653 !important;
  box-shadow: 0 5px 0 rgba(193,174,133,.46), 0 11px 19px rgba(2,12,23,.28) !important;
}

@media (max-width: 760px) {
  .module-overlay-body, .wb-body, .analysis-body, .mistake-center-main, .shared-materials-body, #mBody.module-overlay-body {
    background: linear-gradient(150deg, #11263e, #0c1d31 62%, #142b43) !important;
  }
  .teacher-home-hero, .module-panel-intro, .shared-materials-hero { padding: 16px !important; }
}