/* =====================================================================
   mulu1 系目录页 · 童话主题适配层（2026-09-14，共享给 4 个页面）
   ---------------------------------------------------------------------
   服务页面：units/36wys_all.html · units/36spell_all.html
             test/choice_all.html · test/test_all.html
   底座：comm/disney-kit.css（令牌 + 材质配方）
   挂载：页面里 mulu1.css 之后加两行
         <link rel="stylesheet" href="/comm/disney-kit.css">
         <link rel="stylesheet" href="/units/36wys-disney.css">
   回滚：删掉那两行 <link> 即可，共享的 comm/mulu1.css 一行未动。
   ---------------------------------------------------------------------
   本页结构：loader 遮罩 + .container > .grade-grid > .grade-card
             （.grade-header 可点展开 + .units-container > .unit-list）
   图标：四页统一内联矢量 —— <svg class="cap-svg"> 学士帽 +
         <span class="icon-star">★</span> 金星 + <span class="icon-chevron">›</span> 箭头，
         页面不再依赖 Font Awesome CDN（外链被跟踪防护拦截时会拖慢首屏 3 秒+）。
   红线：JS 只写 .units-container 的 maxHeight 内联值与 .toggle-icon 的
         rotate 内联值 —— 这两处样式表一律不去碰 transform/max-height。
   ===================================================================== */

/* ============ 1. 外壳 ============ */
body{
  background-color:var(--dk-sky-2) !important;
  background-image:
    radial-gradient(56% 38% at 88% -6%, rgba(185,164,255,.40), rgba(185,164,255,0) 72%),
    radial-gradient(46% 34% at -10% 20%, rgba(127,230,207,.34), rgba(127,230,207,0) 72%),
    radial-gradient(44% 30% at 108% 66%, rgba(255,194,166,.34), rgba(255,194,166,0) 74%),
    radial-gradient(48% 34% at 2% 104%, rgba(255,223,142,.36), rgba(255,223,142,0) 74%),
    linear-gradient(180deg,var(--dk-sky-1) 0%,var(--dk-sky-2) 32%,var(--dk-sky-3) 66%,var(--dk-sky-4) 100%) !important;
  background-attachment:fixed;
  color:var(--dk-ink) !important;
  font-family:var(--dk-font-cn) !important;
}

/* 加载遮罩：墨绿 → 晨光天空，文字压最暗天空 ≥4.5:1 */
.loader-container{
  background:
    radial-gradient(60% 40% at 80% -8%, rgba(185,164,255,.45), rgba(185,164,255,0) 72%),
    linear-gradient(180deg,var(--dk-sky-1) 0%,var(--dk-sky-3) 60%,var(--dk-sky-4) 100%) !important;
}
.loading-text, .loader-text{
  color:var(--dk-ink-on-sky) !important;
  letter-spacing:4px;
  text-shadow:0 1px 0 #fff, 0 0 22px rgba(150,110,255,.45);
}
/* 36spell_all 的圆点 loader：白点压浅底看不清 → 主题紫 */
.mystic-loader .dot{
  background:var(--dk-vio) !important;
  box-shadow:0 0 10px rgba(106,68,236,.55) !important;
}
/* 36spell_all 的浮层装饰圆：浅紫气泡 */
.floating-element{ background:rgba(122,85,240,.08) !important; }

/* ============ 2. 年级卡片（象牙故事书页） ============ */
/* 网格默认 stretch 会把折叠卡拉到与展开卡同高（原版就有一大块空白），
   改 start 让折叠卡贴住自己的标题栏 */
.grade-grid{ align-items:start !important; }
.grade-card{
  background:var(--dk-page-bg) !important;
  border-radius:24px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    var(--dk-ring),
    inset 0 -3px 0 var(--dk-lip),
    var(--dk-cast) !important;
  backdrop-filter:none !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease !important;
}
.grade-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    var(--dk-ring),
    inset 0 -3px 0 var(--dk-lip),
    0 20px 34px -18px rgba(78,54,155,.42) !important;
}

/* ============ 3. 年级标题栏（可点 → 光晕只给这里） ============ */
.grade-header{
  padding:16px 18px !important;
  border-radius:24px 24px 0 0;
  transition:background-color .2s ease, box-shadow .2s ease !important;
}
.grade-header:hover{
  background-color:rgba(122,85,240,.07) !important;
  box-shadow:var(--dk-halo);
}
.grade-header:active{ background-color:rgba(122,85,240,.12) !important; }

/* 学士帽圆徽：白瓷挤塑钮 */
.grade-icon{
  width:42px !important; height:42px !important;
  border-radius:50% !important;
  background:var(--dk-vio-plastic) !important;
  box-shadow:var(--dk-vio-plastic-shadow), var(--dk-halo) !important;
  color:#fff !important;
  font-size:1.15rem !important;
  flex-shrink:0;
}
.grade-icon:active{ transform:translateY(2px); box-shadow:var(--dk-plastic-shadow-press) !important; }
/* 学士帽 SVG（2026-09-14 替换 🎓/Font Awesome，四页统一内联矢量）：
   白描边、随字号清晰，页面不再有 FA 外链 */
.grade-icon .cap-svg{ width:22px; height:22px; display:block; filter:drop-shadow(0 1px 1px rgba(40,10,110,.45)); }

.grade-title{
  font-family:var(--dk-font-cn) !important;
  font-weight:800 !important;
  color:var(--dk-ink-strong) !important;
  letter-spacing:.5px;
}

/* 内联的 #667eea 压成主题紫（36spell_all 无页内样式，这里同时补齐排版） */
.toggle-icon, .icon-chevron{
  color:var(--dk-vio) !important;
  font-weight:bold;
  display:inline-block;
  font-size:1.4rem;
  transition:transform .3s ease;
}

/* ============ 4. 单元列表（书页内芯 = 更暖的奶油底） ============ */
.units-container{
  background:
    linear-gradient(180deg, rgba(122,85,240,.05), rgba(122,85,240,0) 26%),
    linear-gradient(180deg,var(--dk-paper-b) 0%,var(--dk-paper-c) 100%) !important;
  box-shadow:inset 0 6px 12px -8px rgba(96,66,190,.25);
}

/* 单元行：金色小星星 + 悬停紫字光晕 */
.unit-link{
  color:var(--dk-ink-soft) !important;
  font-weight:700;
  font-family:var(--dk-font-cn);
  transition:color .2s ease, padding-left .3s ease !important;
}
.unit-link:hover{
  color:var(--dk-vio-deep) !important;
  text-shadow:0 0 14px rgba(150,110,255,.35);
}
.unit-link::before{
  background:linear-gradient(90deg, rgba(122,85,240,.12), rgba(122,85,240,0)) !important;
  border-radius:0 999px 999px 0;
}
.icon-star{ color:var(--dk-gold-2) !important; font-size:1.2rem; text-shadow:0 0 8px rgba(255,184,77,.45); }
.unit-link:hover .icon-star{ transform:scale(1.18) rotate(10deg); }

/* ============ 5. 移动端微调 ============ */
@media (max-width:480px){
  .grade-card{ border-radius:20px !important; }
  .grade-header{ border-radius:20px 20px 0 0; padding:14px 15px !important; }
  .grade-icon{ width:38px !important; height:38px !important; }
  .grade-title{ font-size:1.05rem !important; }
}