/* ============================================================
   取经风格顶栏 · 与「西游记 · 取经学习工作台」统一视觉
   使用方：
     - 语文/英语入口页：套用 .xytop 组件（替换原 .top）
     - 数学入口页：已自带 #topbar，本文件覆盖其配色与品牌
   设计语言：暖棕木纹底 #3E2C20 + 金橙 #F7C548/#E08E3F + 取经红 #C5533A
   ============================================================ */

/* ---------- 1. 取经顶栏组件（语文/英语用 .xytop） ---------- */
.xytop{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:#3E2C20; color:#fff;
  box-shadow:0 4px 14px rgba(62,44,32,.22);
  position:sticky; top:0; z-index:60;
}
.xytop .xyback{
  width:44px; height:44px; border:none; border-radius:14px;
  background:rgba(255,255,255,.14); color:#fff; font-size:22px; font-weight:900;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.xytop .xyback:active{ transform:scale(.93); }
.xytop .xyback:focus-visible,.xydock a:focus-visible{outline:3px solid #FFE082;outline-offset:2px;}
.xytop .xylogo{
  width:40px; height:40px; border-radius:13px;
  background:linear-gradient(135deg,#F7C548,#E08E3F);
  display:flex; align-items:center; justify-content:center; font-size:24px; flex:none;
  box-shadow:0 3px 8px rgba(224,142,63,.35);
}
.xytop .xytitle{ flex:1; min-width:0; font-size:18px; font-weight:900; line-height:1.2; color:#FFE082; }
.xytop .xytitle b{ display:block; font-size:18px; font-weight:900; line-height:1.2; color:#FFE082; }
.xytop .xysubtitle{ font-size:12px; font-weight:700; color:#C9B8A8; margin-top:2px; }
.xytop .xytitle small{ display:block; font-size:12px; font-weight:700; color:#C9B8A8; margin-top:2px; }

/* ---------- 2. 语文 / 英语入口页：整体强调色切到取经金棕 ---------- */
body.mod-chinese,
body.mod-english{
  --accent:#E08E3F; --accent-2:#C5533A;
  --accent-soft:#FFE9D6; --accent-ink:#B8531F;
  --bg:#FFF7EB; --bg-2:#FFF1E2; --line:#F0E0CC;
}
body.mod-chinese .hero,
body.mod-english .hero{
  background:linear-gradient(135deg,#C5533A 0%,#E08E3F 100%) !important;
}
body.mod-chinese .sec,
body.mod-english .sec{ color:#8C6B55; }

/* ---------- 3. 数学 #topbar 取经化覆盖 ---------- */
#topbar{
  background:linear-gradient(180deg,#3E2C20 0%,#4A3526 100%) !important;
  box-shadow:0 4px 14px rgba(62,44,32,.22);
}
#topbar #tb-title{ color:#FFE082 !important; letter-spacing:1px; }
#topbar .tb-btn{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
}
#topbar .xylogo{
  width:40px; height:40px; border-radius:13px;
  background:linear-gradient(135deg,#F7C548,#E08E3F);
  display:flex; align-items:center; justify-content:center; font-size:24px; flex:none;
  box-shadow:0 3px 8px rgba(224,142,63,.35); margin-right:2px;
}
#topbar #tb-stars{
  background:linear-gradient(135deg,#F7C548,#E08E3F) !important; color:#3E2C20 !important;
}

/* ---------- 4. 手机端统一学习导航 ---------- */
.xydock{display:none;}
@media(max-width:760px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
  .xydock{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));z-index:80;background:rgba(62,44,32,.96);
    border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:6px;
    box-shadow:0 10px 28px rgba(62,44,32,.28);backdrop-filter:blur(12px);
  }
  .xydock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;border-radius:14px;color:#C9B8A8;font-size:12px;font-weight:800;}
  .xydock a i{font-style:normal;font-size:20px;line-height:1;}
  .xydock a.on{background:rgba(255,255,255,.14);color:#FFE082;}
  #sync-pill{bottom:calc(78px + env(safe-area-inset-bottom));}
}