/* Shared visual shell for every PHP secondary page and module-entry menu.
   Business forms and document annotation surfaces keep their own layouts. */
:root {
  --home-menu-night: #0d192b;
  --home-menu-night-raised: #193451;
  --home-menu-blue: #18314d;
  --home-menu-blue-light: #214562;
  --home-menu-gold: #d9b66b;
  --home-menu-gold-light: #f2d797;
  --home-menu-paper: #fffaf0;
  --home-menu-ink: #20364e;
}

body.detail-view-active {
  background:
    radial-gradient(ellipse at 52% 0, #193451 0, #0d192b 45%, #080f1d 100%) !important;
  color: #e6edf5 !important;
}

body.detail-view-active #homeLibraryShell > .workbench-main {
  background: transparent !important;
  color: #e6edf5 !important;
}

body.detail-view-active #detail-page-header {
  top: 62px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 24px !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 15% 0, #d9b66b24, transparent 30%),
    linear-gradient(110deg, #101f33, #18314d 56%, #214562) !important;
  border-bottom: 2px solid var(--home-menu-gold) !important;
  box-shadow: 0 5px 0 #06112045, 0 12px 22px #0611203d, inset 0 1px #ffffff1a !important;
}

body.detail-view-active #detail-page-header::before {
  content: "ENGLISH WORLD" !important;
  position: absolute !important;
  top: 8px !important;
  left: 24px !important;
  display: block !important;
  color: var(--home-menu-gold) !important;
  font: 800 9px/1.2 "Segoe UI", "Microsoft YaHei UI", sans-serif !important;
  letter-spacing: 2px !important;
}

body.detail-view-active #detail-page-title {
  position: absolute !important;
  top: 27px !important;
  left: 24px !important;
  right: 210px !important;
  overflow: hidden !important;
  color: #f5f1e7 !important;
  font: 800 22px/1.25 "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif !important;
  letter-spacing: .2px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 8px #06112080 !important;
  pointer-events: none !important;
}

body.detail-view-active #detail-page-header .module-back-btn,
body.detail-view-active #detail-page-header .module-overlay-close {
  min-height: 36px !important;
  border: 1px solid #d8e7f255 !important;
  border-radius: 9px !important;
  background: #ffffff12 !important;
  color: #edf3f8 !important;
  box-shadow: 0 3px 0 #06112040, inset 0 1px #ffffff20 !important;
  font: 700 12px/1.2 "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif !important;
}

body.detail-view-active #detail-page-header .module-back-btn:hover,
body.detail-view-active #detail-page-header .module-overlay-close:hover {
  border-color: var(--home-menu-gold) !important;
  background: #d9b66b2b !important;
  color: #fffaf0 !important;
}

body.detail-view-active #sentence-view:not([hidden]),
body.detail-view-active #wordbank-view:not([hidden]),
body.detail-view-active #spelling-view:not([hidden]),
body.detail-view-active #multimeaning-view:not([hidden]),
body.detail-view-active #study-listening-view:not([hidden]),
body.detail-view-active #course-view:not([hidden]),
body.detail-view-active #daily-view:not([hidden]),
body.detail-view-active #essay-view:not([hidden]),
body.detail-view-active #qbank-view:not([hidden]),
body.detail-view-active #qa-view:not([hidden]),
body.detail-view-active #mistakes-view:not([hidden]),
body.detail-view-active #materials-view:not([hidden]),
body.detail-view-active #analysis-view:not([hidden]),
body.detail-view-active #knowledge-map-view:not([hidden]),
body.detail-view-active #teacher-view:not([hidden]),
body.detail-view-active #maintenance-view:not([hidden]) {
  top: 134px !important;
  background:
    radial-gradient(ellipse at 52% 0, #193451 0, #0d192b 46%, #080f1d 100%) !important;
  color: #e6edf5 !important;
}

/* Menu/intro banners echo the dark library hero; interactive content below
   them remains on readable paper-colored cards. */
body.detail-view-active .module-panel-intro,
body.detail-view-active #qbank-view .module-panel-intro,
body.detail-view-active .teacher-home-hero,
body.detail-view-active #teacher-view .teacher-home-hero,
body.detail-view-active #materials-view .materials-hero,
body.detail-view-active #wordbank-view .word-menu-hero {
  border: 1px solid #6883a466 !important;
  border-left: 5px solid var(--home-menu-gold) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 84% 18%, #2b567566, transparent 48%),
    linear-gradient(115deg, #101d30, #152d48 60%, #11243d) !important;
  box-shadow: 0 14px 30px #0004, inset 0 1px #f4d89824 !important;
  color: #f2ede1 !important;
}

/* The qbank launcher has a two-ID legacy selector with !important; match its
   scope so this shared hero theme wins without reaching question forms/results. */
body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro {
  border: 1px solid #6883a466 !important;
  border-left: 5px solid var(--home-menu-gold) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 84% 18%, #2b567566, transparent 48%),
    linear-gradient(115deg, #101d30, #152d48 60%, #11243d) !important;
  box-shadow: 0 14px 30px #0004, inset 0 1px #f4d89824 !important;
  color: #f2ede1 !important;
}

body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro h3 {
  color: #f5f1e7 !important;
}

body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro p {
  color: #b8c9d8 !important;
}

body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro-kicker {
  color: var(--home-menu-gold) !important;
}

body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro-mark {
  border-color: #e2c777 !important;
  background: linear-gradient(145deg, #fff9e7, #dce8f0) !important;
  color: #173653 !important;
  box-shadow: 0 4px 0 #a28348, 0 8px 15px #0003, inset 0 1px #fff !important;
}

body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro-count[data-qbank-entry] {
  border: 1px solid #f5dfaa !important;
  border-radius: 10px !important;
  background: linear-gradient(130deg, var(--home-menu-gold-light), #c49a48) !important;
  color: #172234 !important;
  box-shadow: 0 4px 0 #71562e, 0 9px 24px #d9b66b26 !important;
}

body.detail-view-active .module-panel-intro h3,
body.detail-view-active #qbank-view .module-panel-intro h3,
body.detail-view-active .teacher-home-hero h2,
body.detail-view-active #teacher-view .teacher-home-hero h2,
body.detail-view-active #materials-view .materials-hero h2,
body.detail-view-active #wordbank-view .word-menu-hero h2 {
  color: #f5f1e7 !important;
}

body.detail-view-active .module-panel-intro p,
body.detail-view-active #qbank-view .module-panel-intro p,
body.detail-view-active .teacher-home-hero p,
body.detail-view-active #teacher-view .teacher-home-hero p,
body.detail-view-active #materials-view .materials-hero p,
body.detail-view-active #wordbank-view .word-menu-hero p {
  color: #b8c9d8 !important;
}

body.detail-view-active .module-panel-intro-kicker,
body.detail-view-active #qbank-view .module-panel-intro-kicker,
body.detail-view-active .teacher-home-hero-kicker,
body.detail-view-active #teacher-view .teacher-home-hero-kicker,
body.detail-view-active #materials-view .materials-hero small,
body.detail-view-active #wordbank-view .word-menu-kicker {
  color: var(--home-menu-gold) !important;
}

body.detail-view-active .module-panel-intro-mark,
body.detail-view-active #qbank-view .module-panel-intro-mark,
body.detail-view-active .teacher-home-hero-mark,
body.detail-view-active #teacher-view .teacher-home-hero-mark,
body.detail-view-active #materials-view .materials-hero-mark,
body.detail-view-active #wordbank-view .word-menu-hero-icon {
  border-color: #e2c777 !important;
  background: linear-gradient(145deg, #fff9e7, #dce8f0) !important;
  color: #173653 !important;
  box-shadow: 0 4px 0 #a28348, 0 8px 15px #0003, inset 0 1px #fff !important;
}

/* The material list and module-entry cards use the same paper/card contrast
   as the home learning cards, with gold kept for primary actions. */
body.detail-view-active #materials-view .materials-toolbar,
body.detail-view-active #materials-view .materials-row,
body.detail-view-active #materials-view .materials-empty,
body.detail-view-active .module-feature-btn,
body.detail-view-active #wordbank-view .word-menu-card {
  border-color: #d4dce2 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fffdf7, #f4eddd) !important;
  color: var(--home-menu-ink) !important;
  box-shadow: 0 5px 0 #c1ae8559, 0 10px 18px #020c1733, inset 0 1px #fff !important;
}

body.detail-view-active #materials-view .materials-item-title,
body.detail-view-active .module-feature-btn .f-label,
body.detail-view-active #wordbank-view .word-menu-label {
  color: #173653 !important;
}

body.detail-view-active #materials-view .materials-meta small,
body.detail-view-active .module-feature-btn .f-desc,
body.detail-view-active #wordbank-view .word-menu-desc {
  color: #728399 !important;
}

body.detail-view-active #materials-view .materials-button.is-primary,
body.detail-view-active .module-panel-intro-count,
body.detail-view-active .teacher-home-back {
  border: 1px solid #f5dfaa !important;
  background: linear-gradient(130deg, var(--home-menu-gold-light), #c49a48) !important;
  color: #172234 !important;
  box-shadow: 0 4px 0 #71562e, 0 9px 24px #d9b66b26 !important;
}

body.detail-view-active .teacher-home-nav {
  border-color: #526d84 !important;
  background: linear-gradient(110deg, #0b1d31, #1b3b59) !important;
}

body.detail-view-active .teacher-home-tab.active {
  border-color: #e2c777 !important;
  background: linear-gradient(145deg, #fff9e9, #ead9ae) !important;
  color: #173653 !important;
  box-shadow: 0 3px 0 #a88437, 0 7px 13px #04122140 !important;
}

@media (max-width: 760px) {
  body.detail-view-active #detail-page-header {
    top: 62px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 12px !important;
  }
  body.detail-view-active #detail-page-header::before {
    top: 6px !important;
    left: 12px !important;
    font-size: 8px !important;
  }
  body.detail-view-active #detail-page-title {
    top: 24px !important;
    left: 12px !important;
    right: 138px !important;
    font-size: 17px !important;
  }
  body.detail-view-active #detail-page-header .module-back-btn,
  body.detail-view-active #detail-page-header .module-overlay-close {
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  body.detail-view-active #detail-page-header .module-overlay-close {
    width: 32px !important;
    padding: 0 !important;
  }
  body.detail-view-active #sentence-view:not([hidden]),
  body.detail-view-active #wordbank-view:not([hidden]),
  body.detail-view-active #spelling-view:not([hidden]),
  body.detail-view-active #multimeaning-view:not([hidden]),
  body.detail-view-active #study-listening-view:not([hidden]),
  body.detail-view-active #course-view:not([hidden]),
  body.detail-view-active #daily-view:not([hidden]),
  body.detail-view-active #essay-view:not([hidden]),
  body.detail-view-active #qbank-view:not([hidden]),
  body.detail-view-active #qa-view:not([hidden]),
  body.detail-view-active #mistakes-view:not([hidden]),
  body.detail-view-active #materials-view:not([hidden]),
  body.detail-view-active #analysis-view:not([hidden]),
  body.detail-view-active #knowledge-map-view:not([hidden]),
  body.detail-view-active #teacher-view:not([hidden]),
  body.detail-view-active #maintenance-view:not([hidden]) {
    top: 122px !important;
  }
  body.detail-view-active .module-panel-intro,
  body.detail-view-active #qbank-view .module-panel-intro,
  body.detail-view-active .teacher-home-hero,
  body.detail-view-active #teacher-view .teacher-home-hero,
  body.detail-view-active #materials-view .materials-hero,
  body.detail-view-active #wordbank-view .word-menu-hero {
    border-radius: 14px !important;
  }
  body.detail-view-active #qbank-view.qbank-legacy-launcher #mBody .module-panel-intro {
    border-radius: 14px !important;
  }
  body.detail-view-active #materials-view .materials-toolbar,
  body.detail-view-active #materials-view .materials-row,
  body.detail-view-active #materials-view .materials-empty,
  body.detail-view-active .module-feature-btn,
  body.detail-view-active #wordbank-view .word-menu-card {
    box-shadow: 0 3px 0 #c1ae8559, 0 6px 12px #020c1726, inset 0 1px #fff !important;
  }
}

/* The QA workspace is a viewport modal, even while the shared detail-page shell is active. Keep this stronger rule last so the generic top:122px detail offset cannot move it below the viewport. */
body.detail-view-active.qa-modal-open #qa-view:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 12000 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(12px, 2.2vw, 28px) !important;
  overflow: auto !important;
}

@media (max-width: 640px) {
  body.detail-view-active.qa-modal-open #qa-view:not([hidden]) {
    padding: 0 !important;
  }
}

/* Shared materials: align the page geometry and toolbar hierarchy with the
   legacy materials screenshot while keeping this override scoped to the page. */
body.detail-view-active #materials-view:not([hidden]) {
  padding: 42px 20px 36px !important;
}

body.detail-view-active #materials-view .materials-page {
  width: 100% !important;
  max-width: 1232px !important;
  color: #24364b !important;
}

body.detail-view-active #materials-view .materials-hero {
  box-sizing: border-box !important;
  min-height: 131px !important;
  padding: 22px 26px !important;
  margin-bottom: 20px !important;
}

body.detail-view-active #materials-view .materials-hero h2 {
  font-size: 23px !important;
  letter-spacing: .2px !important;
}

body.detail-view-active #materials-view .materials-hero p {
  margin-top: 7px !important;
  font-size: 13px !important;
}

body.detail-view-active #materials-view .materials-toolbar {
  box-sizing: border-box !important;
  min-height: 66px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  flex-direction: row !important;
  align-items: center !important;
}

body.detail-view-active #materials-view .materials-count {
  margin: 0 auto 0 0 !important;
  color: #69798a !important;
  font-size: 12px !important;
}

body.detail-view-active #materials-view .materials-toolbar-actions {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

body.detail-view-active #materials-view .materials-row {
  box-sizing: border-box !important;
  min-height: 83px !important;
  padding: 15px 17px !important;
  gap: 16px !important;
  border-radius: 8px !important;
}

body.detail-view-active #materials-view .materials-file-icon {
  width: 40px !important;
  height: 44px !important;
  border-radius: 6px !important;
  background: #f5f7f9 !important;
  font-size: 21px !important;
  letter-spacing: 0 !important;
}

body.detail-view-active #materials-view .materials-item-title {
  font-size: 14px !important;
}

body.detail-view-active #materials-view .materials-meta small {
  margin-top: 1px !important;
  font-size: 11px !important;
}

body.detail-view-active #materials-view .materials-row-actions {
  gap: 6px !important;
}

body.detail-view-active #materials-view .materials-button {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

@media (max-width: 760px) {
  body.detail-view-active #materials-view:not([hidden]) {
    padding: 18px 10px 25px !important;
  }

  body.detail-view-active #materials-view .materials-hero {
    min-height: 0 !important;
    padding: 16px !important;
  }

  body.detail-view-active #materials-view .materials-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.detail-view-active #materials-view .materials-toolbar-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.detail-view-active #materials-view .materials-count {
    width: 100% !important;
    margin: 0 !important;
  }

  body.detail-view-active #materials-view .materials-row {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    padding: 12px !important;
  }

  body.detail-view-active #materials-view .materials-row-actions {
    justify-content: flex-start !important;
  }
}

.materials-auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12, 25, 41, .58);
}

.materials-auth-dialog {
  width: min(500px, 100%);
  box-sizing: border-box;
  margin: 0;
  padding: 30px;
  border: 1px solid #d7e0e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(23, 54, 93, .1);
}

.materials-auth-dialog h3 { margin: 0 0 8px; color: #17365d; font-size: 19px; }
.materials-auth-dialog p { margin: 0 0 18px; color: #6b7787; font-size: 13px; line-height: 1.6; }
.materials-auth-dialog input[type="password"] { width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid #cbd5df; border-radius: 6px; background: #fff; color: #26384e; font: inherit; font-size: 14px; outline: none; }
.materials-auth-dialog input[type="password"]:focus { border-color: #54749b; box-shadow: 0 0 0 3px rgba(84, 116, 155, .13); }
.materials-auth-message { min-height: 20px; margin-top: 8px; color: #68798b; font-size: 12px; }
.materials-auth-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@media (max-width: 650px) {
  .materials-auth-dialog { padding: 22px; }
}