/* ==========================================================
   广州同步教材知识库 · 简笔手绘漫画风主题
   清新白底 / 卡通扁平 / 手写字感 / 柔和线条 / 低饱和马卡龙
   排除：3D 渲染 · 深色背景 · 复杂纹理 · 粗重黑边 · 照片质感
   ========================================================== */

:root{
  /* —— 文字与线条：文字用近纯黑保证清晰，线条保持柔和 —— */
  --ink:      #1a1917;
  --ink-2:    #4e4842;
  --line:     #ece5da;
  --line-2:   #ded4c5;

  /* —— 底色 —— */
  --paper:    #ffffff;
  --wash:     #fdfaf5;

  /* —— 低饱和马卡龙配色 —— */
  --mint:     #dcece4;
  --sky:      #d9e7f6;
  --lilac:    #e4dff3;
  --butter:   #fbf2d0;
  --peach:    #fde2d1;
  --rose:     #fadcdc;
  --sage:     #dfecd6;
  --sand:     #f6efe3;

  /* —— 旧色名别名（registry.js 的科目/版本颜色仍在引用，勿删）—— */
  --white:  #ffffff;
  --yellow: #fbf2d0;
  --coral:  #fadcdc;
  --teal:   #dcece4;
  --purple: #e4dff3;
  --pink:   #fbdee2;
  --green:  #dfecd6;
  --orange: #fde2d1;
  --blue:   #d9e7f6;
  --lime:   #e4edcf;

  /* —— 圆角（手绘感：四角略有差异）—— */
  --r-lg: 24px 20px 26px 18px;
  --r-md: 20px 18px 22px 16px;
  --r-sm: 14px 12px 15px 11px;

  /* —— 柔和线条 + 柔光阴影（无硬阴影）—— */
  --bd:     2px solid var(--line);
  --bd-2:   2px solid var(--line-2);
  --sh:     0 6px 18px rgba(92,86,79,.07);
  --sh-sm:  0 4px 12px rgba(92,86,79,.06);
  --sh-xs:  0 2px 6px rgba(92,86,79,.05);

  /* —— 手写字感字体栈（逐级回退）——
     首位 LXGW WenKai Lite 由 assets/css/font-lxgw.css 以 base64 内嵌提供，
     不依赖用户机器是否安装；file:// 双击打开同样生效。 */
  --font: "LXGW WenKai Lite","LXGW WenKai","霞鹜文楷","幼圆",YouYuan,"楷体",KaiTi,STKaiti,
          "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; height:100%; }

body{
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--wash);
  /* 极淡的手账点格，非纹理贴图 */
  background-image: radial-gradient(rgba(92,86,79,.055) 1.2px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .2px;
}

::selection{ background: var(--butter); color: var(--ink); }

.app{ display:flex; min-height:100vh; }

/* ---------------- 侧边栏 ---------------- */
.sidebar{
  width: 292px;
  flex: 0 0 292px;
  background: var(--paper);
  border-right: var(--bd);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
  z-index: 40;
}

.brand{
  display:flex; align-items:center; gap:12px;
  padding: 18px 16px 14px;
  border-bottom: var(--bd);
  background: var(--butter);
}
.brand-badge{
  width:44px; height:44px; flex:0 0 44px;
  border-radius: 16px 14px 17px 13px;
  background: var(--rose); color: var(--ink);
  border: var(--bd);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800;
  box-shadow: var(--sh-xs);
  transform: rotate(-4deg);
}
.brand-txt{ min-width:0; }
.brand-title{ font-size:17px; font-weight:800; letter-spacing:.5px; line-height:1.3; }
.brand-sub{ font-size:11.5px; font-weight:600; color: var(--ink-2); }

.menu{ flex:1; overflow-y:auto; padding: 14px 10px 20px; }
.menu::-webkit-scrollbar{ width:8px; }
.menu::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius:8px; }

/* 一级：年级 */
.lv1{ margin-bottom: 6px; }
.lv1-head{
  display:flex; align-items:center; gap:8px;
  padding: 9px 11px;
  border: var(--bd); border-radius: var(--r-sm);
  background: var(--sage);
  cursor:pointer; user-select:none;
  font-weight:800; font-size:14.5px;
  box-shadow: var(--sh-xs);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.lv1-head:hover{ transform: translateY(-1px); box-shadow: var(--sh-sm); background: #e6f0de; }
.lv1-head .caret{ font-size:11px; transition: transform .18s; display:inline-block; color: var(--ink-2); }
.lv1.open > .lv1-head .caret{ transform: rotate(90deg); }
.lv1-head .g-emoji{ font-size:16px; }
.lv1-head .g-count{
  margin-left:auto; font-size:10.5px; font-weight:700;
  background: var(--paper); border: var(--bd); border-radius:999px;
  padding:1px 8px; color: var(--ink-2);
}

/* 二级：学期 / 分组 */
.lv2-wrap{ display:none; padding: 8px 0 4px 14px; }
.lv1.open > .lv2-wrap{ display:block; }
.lv2{ margin-bottom:5px; }
.lv2-head{
  display:flex; align-items:center; gap:7px;
  padding: 7px 11px;
  border: var(--bd); border-radius: 12px;
  background: var(--mint);
  cursor:pointer; user-select:none;
  font-weight:700; font-size:13px;
  transition: background .16s;
}
.lv2-head:hover{ background: #e6f1ea; }
.lv2-head .caret{ font-size:10px; transition: transform .18s; color: var(--ink-2); }
.lv2.open > .lv2-head .caret{ transform: rotate(90deg); }
.lv2-head .t-count{
  margin-left:auto; font-size:10px; font-weight:700;
  background: var(--paper); border: var(--bd); border-radius:999px;
  padding:0 7px; color: var(--ink-2);
}

/* 三级：科目 */
.lv3-wrap{ display:none; padding: 6px 0 4px 12px; }
.lv2.open > .lv3-wrap{ display:block; }
.lv3{
  display:flex; align-items:center; gap:8px;
  padding: 7px 11px; margin-bottom:4px;
  border: var(--bd); border-radius: 12px;
  background: var(--paper);
  cursor:pointer; user-select:none;
  font-weight:600; font-size:13px;
  transition: transform .14s, background .14s, box-shadow .14s;
}
.lv3:hover{ transform: translateX(3px); background: var(--wash); box-shadow: var(--sh-xs); }
.lv3.active{ background: var(--mint); font-weight:800; }
.lv3 .s-emoji{ font-size:14px; }
.lv3 .s-dot{
  margin-left:auto; width:9px; height:9px; border-radius:50%;
  border: 1.5px solid var(--line-2);
}
.lv3.empty .s-dot{ background: var(--paper); }
.lv3.ready .s-dot{ background: #a9cfa0; border-color:#a9cfa0; }

.sidebar-foot{ padding: 10px 14px 14px; border-top: var(--bd); background: var(--wash); }
.dot-row{ display:flex; gap:6px; margin-bottom:6px; }
.dot-row span{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line-2); }
.dot-row span:nth-child(1){ background: var(--rose); }
.dot-row span:nth-child(2){ background: var(--butter); }
.dot-row span:nth-child(3){ background: var(--sky); }
.foot-txt{ font-size:10.5px; font-weight:600; color: var(--ink-2); line-height:1.6; }
.foot-qr{
  display:block; width:92px; margin:8px auto 0;
  border: var(--bd); border-radius: 16px;
  box-shadow: var(--sh-xs);
  transition: transform .18s, box-shadow .18s;
}
.foot-qr:hover{ transform: translateY(-2px) rotate(-1.5deg); box-shadow: var(--sh-sm); }

.scrim{ display:none; }

/* ---------------- 主区 ---------------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  position: sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding: 12px 26px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: var(--bd);
}
.burger{
  display:none;
  width:38px; height:38px; border: var(--bd); border-radius:12px;
  background: var(--butter); font-size:17px; cursor:pointer;
  box-shadow: var(--sh-xs);
}
.crumbs{ font-size:13px; font-weight:700; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.crumbs .cr-sep{ color: var(--line-2); }
.crumbs a{ color: var(--ink); text-decoration:none; border-bottom:2px solid var(--butter); }
.crumbs a:hover{ background: var(--butter); border-radius:4px; }
.crumbs .cr-now{
  background: var(--lilac); border-radius:999px; padding:2px 11px; font-size:12px; font-weight:800;
}
.topbar-tag{
  margin-left:auto; font-size:11px; font-weight:800; letter-spacing:2px;
  background: var(--lilac); color: var(--ink);
  border: var(--bd); border-radius:999px; padding:3px 13px;
}

.view{ padding: 26px 26px 10px; flex:1; }

.page-foot{
  padding: 18px 26px 26px;
  font-size:12px; font-weight:600; color: var(--ink-2);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}

/* ---------------- 通用卡片 ---------------- */
.card{
  background: var(--paper);
  border: var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 20px 22px;
}

.chip{
  display:inline-block;
  border: 1.5px solid var(--line-2); border-radius:999px;
  padding: 2px 11px; font-size:12px; font-weight:700;
  background: var(--paper);
  margin: 0 6px 6px 0;
  color: var(--ink);
}
.chip.y{ background: var(--butter); border-color:#f0e3b4; }
.chip.c{ background: var(--rose);   border-color:#f0c9c9; }
.chip.t{ background: var(--mint);   border-color:#c4ded1; }
.chip.p{ background: var(--lilac);  border-color:#cdc4e8; }
.chip.g{ background: var(--sage);   border-color:#c8dcbc; }
.chip.b{ background: var(--sky);    border-color:#c2d8ee; }
.chip.o{ background: var(--peach);  border-color:#f2cdb4; }
.chip.k{ background: var(--sand);   border-color:#e5d9c4; }

/* ---------------- 首页 ---------------- */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, #fbf7ea 0%, #fdeee6 100%);
  border: var(--bd); border-radius: 30px 26px 32px 24px;
  box-shadow: var(--sh);
  padding: 32px 34px;
  margin-bottom: 24px;
}
.hero:after{
  content:""; position:absolute; right:-40px; top:-40px;
  width:150px; height:150px; border-radius:50%;
  border: 2px dashed rgba(92,86,79,.16);
}
.hero h1{
  margin:0 0 10px; font-size:33px; font-weight:800; letter-spacing:.5px; line-height:1.35;
}
.hero p{ margin:0; font-size:14.5px; font-weight:600; color: var(--ink-2); max-width: 720px; line-height:1.85; }
.hero .hero-badges{ margin-top:16px; }

.sec-title{
  display:inline-flex; align-items:center; gap:8px;
  font-size:19px; font-weight:800; margin: 26px 0 14px;
  background: var(--paper); border: var(--bd); border-radius:999px;
  padding: 5px 18px; box-shadow: var(--sh-xs);
}
.sec-title .st-emoji{ font-size:20px; }

.quick-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.quick{
  display:block; text-decoration:none; color: var(--ink);
  background: var(--paper); border: var(--bd); border-radius: var(--r-lg);
  box-shadow: var(--sh); padding:16px 18px;
  transition: transform .18s, box-shadow .18s;
}
.quick:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(92,86,79,.11); }
.quick .q-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.quick .q-emoji{
  width:40px; height:40px; border-radius:14px 12px 15px 11px; border: var(--bd);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background: var(--sand);
}
.quick .q-name{ font-size:16px; font-weight:800; }
.quick .q-sub{ font-size:12px; font-weight:600; color: var(--ink-2); }
.quick .q-desc{ font-size:12.5px; font-weight:600; color: var(--ink-2); line-height:1.75; }

.howto{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.howto .step{
  background: var(--paper); border: var(--bd); border-radius: var(--r-md);
  box-shadow: var(--sh-sm); padding:14px 16px;
}
.howto .step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border: 1.5px solid var(--line-2); background: var(--rose); color: var(--ink);
  font-weight:800; font-size:13px; margin-bottom:8px;
}
.howto .step h4{ margin:0 0 5px; font-size:14px; font-weight:800; }
.howto .step p{ margin:0; font-size:12.5px; font-weight:600; color: var(--ink-2); line-height:1.8; }

/* ---------------- 科目页 ---------------- */
.subj-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  background: var(--paper); border: var(--bd); border-radius: 28px 24px 30px 22px;
  box-shadow: var(--sh); padding: 20px 24px; margin-bottom: 20px;
}
.subj-emoji{
  width:66px; height:66px; flex:0 0 66px; border-radius: 22px 19px 23px 18px;
  border: var(--bd); display:flex; align-items:center; justify-content:center;
  font-size:32px; background: var(--sand); transform: rotate(-4deg);
}
.subj-meta{ flex:1; min-width:220px; }
.subj-meta h2{ margin:0 0 4px; font-size:24px; font-weight:800; }
.subj-meta .sm-sub{ font-size:12.5px; font-weight:600; color: var(--ink-2); }
.subj-stat{ display:flex; gap:10px; flex-wrap:wrap; }
.stat-box{
  border: var(--bd); border-radius:16px; padding:6px 14px; text-align:center;
  background: var(--sand);
}
.stat-box .sv{ font-size:20px; font-weight:800; line-height:1.3; }
.stat-box .sl{ font-size:10.5px; font-weight:600; color: var(--ink-2); }

.unit-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:18px; }

.unit-card{
  position:relative; text-decoration:none; color: var(--ink);
  display:flex; flex-direction:column;
  background: var(--paper);
  border: var(--bd); border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 18px 20px 16px;
  transition: transform .18s, box-shadow .18s;
}
.unit-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 26px rgba(92,86,79,.12); }
.uc-no{
  position:absolute; right:-10px; top:-12px;
  width:44px; height:44px; border-radius:50% 46% 52% 48%;
  border: var(--bd); background: var(--rose); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; box-shadow: var(--sh-xs);
  transform: rotate(6deg);
}
.unit-card h3{ margin:0 0 8px; font-size:17.5px; font-weight:800; padding-right:32px; line-height:1.5; }
.uc-summary{ font-size:13px; font-weight:600; color: var(--ink-2); line-height:1.8; margin-bottom:10px; }
.uc-lessons{ margin-bottom:12px; }
.uc-lessons .chip{ font-size:11.5px; padding:1.5px 9px; }
.uc-go{ margin-top:auto; font-size:13px; font-weight:800; }
.uc-go span{ display:inline-block; border-bottom:2px solid var(--butter); }

/* ---------------- 单元详情页 ---------------- */
.back-btn{
  display:inline-flex; align-items:center; gap:6px;
  border: var(--bd); border-radius:999px; padding:5px 15px;
  background: var(--paper); font-weight:700; font-size:12.5px;
  text-decoration:none; color: var(--ink); box-shadow: var(--sh-xs);
  margin-bottom:16px;
  transition: background .16s;
}
.back-btn:hover{ background: var(--sand); }

.unit-head{
  background: var(--paper); border: var(--bd); border-radius: 28px 24px 30px 22px;
  box-shadow: var(--sh); padding: 22px 26px; margin-bottom: 20px;
}
.unit-head .uh-no{
  display:inline-block; background: var(--lilac); color: var(--ink);
  border-radius:999px; padding:2px 14px; font-size:12px; font-weight:800; margin-bottom:8px;
}
.unit-head h2{ margin:0 0 8px; font-size:26px; font-weight:800; line-height:1.4; }
.unit-head .uh-sum{ font-size:13.5px; font-weight:600; color: var(--ink-2); line-height:1.85; }

.blk{
  background: var(--paper); border: var(--bd); border-radius: var(--r-lg);
  box-shadow: var(--sh); margin-bottom: 18px; overflow:hidden;
}
.blk-head{
  display:flex; align-items:center; gap:10px;
  padding: 12px 20px; border-bottom: var(--bd);
  font-size:16px; font-weight:800;
}
.blk-head .bh-emoji{
  width:32px; height:32px; border-radius: 11px 9px 12px 10px; border: 1.5px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:16px; background: var(--paper);
}
.blk-body{ padding: 16px 20px 18px; }

.blk.advice .blk-head{ background: var(--mint); }
.blk.core   .blk-head{ background: var(--sky); }
.blk.key    .blk-head{ background: var(--butter); }
.blk.hard   .blk-head{ background: var(--rose); }
.blk.exam   .blk-head{ background: var(--lilac); }

/* 列表项 */
.item{
  display:flex; gap:10px; padding: 9px 0;
  border-bottom: 1.5px dashed var(--line);
  font-size:14px; font-weight:600; line-height:1.85;
}
.item:last-child{ border-bottom:none; }
.item .it-k{
  flex:0 0 auto; font-weight:800;
  border: 1.5px solid var(--line-2); border-radius:9px;
  padding:0 8px; height:24px; line-height:21px; font-size:12px;
  background: var(--wash); margin-top:3px;
}
.item .it-b{ flex:1; min-width:0; }
.item .it-t{ font-weight:800; margin-right:6px; }

/* 重点高亮：柔和荧光笔 */
.hl{
  background: linear-gradient(180deg, transparent 62%, #fbeec0 62%);
  padding: 0 2px; font-weight:800;
}
strong{ font-weight:800; }
.blk.key .item .it-k{ background: var(--butter); border-color:#f0e3b4; }
.blk.key .hl{ color: #a3462f; }
.blk.hard .item .it-k{ background: var(--rose); border-color:#f0c9c9; }

.exam-q{
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--wash); padding: 10px 14px; margin-bottom: 10px;
  font-size:13.5px; font-weight:600; line-height:1.8;
}
.exam-q:last-child{ margin-bottom:0; }
.exam-q .eq-tag{
  display:inline-block; font-size:11px; font-weight:800;
  background: var(--lilac); color: var(--ink); border-radius:999px; padding:1px 10px; margin-right:8px;
}

/* 教材版本条 */
.ver-bar{
  margin-top: 8px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background: var(--sand); color: var(--ink);
  border: var(--bd); border-radius: 20px;
  padding: 12px 20px; box-shadow: var(--sh-sm);
}
.ver-bar .vb-lab{
  font-size:11px; font-weight:800; letter-spacing:1px;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius:999px; padding:2px 11px;
}
.ver-bar .vb-ed{
  font-size:11.5px; font-weight:800; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-2); border-radius:999px; padding:2px 11px;
}
.ver-bar .vb-txt{ font-size:13px; font-weight:700; }
.ver-bar .vb-note{ font-size:11.5px; font-weight:600; color: var(--ink-2); width:100%; line-height:1.8; }

/* ---------------- 教材版本切换器 ---------------- */
.ed-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  background: var(--paper);
  border: var(--bd); border-radius: 22px;
  box-shadow: var(--sh-sm);
  padding: 14px 20px; margin-bottom: 20px;
}
.ed-bar .ed-lab{
  font-size:12px; font-weight:800;
  background: var(--butter); color: var(--ink);
  border: 1.5px solid #f0e3b4; border-radius:999px; padding:3px 13px;
  white-space:nowrap;
}
.ed-bar .ed-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.ed-chip{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; color: var(--ink);
  background: var(--wash);
  border: 1.5px solid var(--line-2); border-radius: 999px;
  padding: 5px 13px;
  transition: transform .16s, box-shadow .16s, background .16s;
}
.ed-chip:hover{ transform: translateY(-2px); box-shadow: var(--sh-xs); background: var(--paper); }
.ed-chip .ed-name{ font-size:13px; font-weight:800; }
.ed-chip .ed-badge{
  font-size:10px; font-weight:700; color: var(--ink-2);
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius:999px; padding:1px 8px;
}
.ed-chip.on{
  background: var(--mint); border-color: #a8cdb9; font-weight:800;
  box-shadow: var(--sh-xs);
}
.ed-chip.on .ed-badge{ background: var(--paper); color: var(--ink); }
.ed-chip.todo{ background: transparent; border-style: dashed; opacity:.75; }
.ed-chip.todo .ed-badge{ background: transparent; border-style: dashed; }
.ed-bar .ed-tip{ width:100%; font-size:11.5px; font-weight:600; color: var(--ink-2); }

/* 空态 */
.empty-state{
  background: var(--paper); border: var(--bd); border-radius: var(--r-lg);
  box-shadow: var(--sh); padding: 44px 30px; text-align:center;
}
.empty-state .es-emoji{ font-size:52px; }
.empty-state h3{ margin:10px 0 8px; font-size:20px; font-weight:800; }
.empty-state p{ margin:0 auto 16px; font-size:13.5px; font-weight:600; color: var(--ink-2); max-width:520px; line-height:1.85; }
.code-box{
  display:inline-block; text-align:left;
  background: var(--sand); color: var(--ink);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md); padding: 12px 18px;
  font-family: ui-monospace,Consolas,monospace; font-size:12.5px; line-height:1.9;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px){
  .sidebar{
    position: fixed; left:0; top:0; height:100vh;
    transform: translateX(-100%); transition: transform .24s;
    box-shadow: 0 0 30px rgba(92,86,79,.14);
  }
  .sidebar.show{ transform: translateX(0); }
  .scrim.show{ display:block; position:fixed; inset:0; background:rgba(92,86,79,.28); z-index:35; }
  .burger{ display:flex; align-items:center; justify-content:center; }
  .view{ padding: 18px 16px 10px; }
  .hero{ padding: 24px 20px; }
  .hero h1{ font-size:26px; }
  .unit-head h2{ font-size:21px; }
}