/* =========================================================
   tril-skin.css — 东钢词汇学习看板 · 统一主题/皮肤系统
   ---------------------------------------------------------
   阶段 5+6 · 三套完整主题（整站同步：背景/导航/按钮/卡片/页脚）
   - default  深海蓝调（精致几何点阵 + 玻璃质感）
   - guofeng  中国风（墨底朱红 · 祥云纹 · 龙鳞纹 · 鎏金边 · 灯笼 · 山水立轴 · 中国龙）
   - malaysia 马来西亚（国旗蓝红金 · songket 星格纹 · 新月十四角星 · 条纹）
   附加节日皮肤：chunjie 春节 / kaifa 开斋节 / zhongqiu 中秋
   切换键：localStorage.tril_skin（保留 30 天），由 tril-skin.js 写入 html[data-skin]
   ========================================================= */

/* ===================== 默认调色板 ===================== */
:root{
  --bg:#0e1320; --bg2:#151c2e; --panel:#1a2238; --panel2:#212c47;
  --line:#2c3756; --txt:#e8edf7; --muted:#93a0bd; --accent:#5b8cff;
  --en:#5b8cff; --bm:#ffb454; --zh:#4fd1a5; --danger:#ff6b6b;
  --ok:#4fd1a5; --glow:0 0 0 2px rgba(91,140,255,.35); --shadow:rgba(0,0,0,.35);
  --btn-hover:#2b3a5e;
  --grad-2:#7aa2ff;
  --ex-en:#cfe0ff; --ex-bm:#ffe2bb; --ex-zh:#bff3df; --ex-th:#e9cdf7;
  --skin-primary:#5b8cff; --skin-gold:#ffd166; --skin-name:'默认';
  /* 看板调色板 */
  --dash-bg:#ffffff; --dash-bg2:#f9fafb; --dash-panel:#f8fafc; --dash-line:#e5e7eb;
  --dash-txt:#1f2937; --dash-muted:#6b7280; --dash-faint:#9ca3af;
  --dash-stripe:linear-gradient(90deg,#2563eb,#5b8cff 30%,#4fd1a5 60%,#D4AF37 90%,#C8102E);
  --dash-chart1:#5b8cff; --dash-chart2:#2563eb;
  --dash-ok:#10b981; --dash-warn:#f59e0b; --dash-bad:#ef4444;
  --dash-levels:#ff6b6b,#ff9a3c,#ffd166,#a3d977,#4fd1a5,#3da9c4,#5b8cff;
  --dash-heat:#5b8cff;
  /* 播放高亮背景（学习器/播放器朗读时当前词条底色） */
  --hl-en:rgba(91,140,255,.24); --hl-bm:rgba(255,180,84,.20);
  --hl-zh:rgba(79,209,165,.20);
}

html[data-skin="default"]{
  --bg:#0e1320; --bg2:#151c2e; --panel:#1a2238; --panel2:#212c47;
  --line:#2c3756; --txt:#e8edf7; --muted:#93a0bd; --accent:#5b8cff;
  --en:#5b8cff; --bm:#ffb454; --zh:#4fd1a5; --danger:#ff6b6b;
  --ok:#4fd1a5; --glow:0 0 0 2px rgba(91,140,255,.35); --shadow:rgba(0,0,0,.35);
  --btn-hover:#2b3a5e; --grad-2:#7aa2ff;
  --ex-en:#cfe0ff; --ex-bm:#ffe2bb; --ex-zh:#bff3df; --ex-th:#e9cdf7;
  --skin-primary:#5b8cff; --skin-gold:#ffd166; --skin-name:'默认';
  --dash-bg:#ffffff; --dash-bg2:#f9fafb; --dash-panel:#f8fafc; --dash-line:#e5e7eb;
  --dash-txt:#1f2937; --dash-muted:#6b7280; --dash-faint:#9ca3af;
  --dash-stripe:linear-gradient(90deg,#2563eb,#5b8cff 30%,#4fd1a5 60%,#D4AF37 90%,#C8102E);
  --dash-chart1:#5b8cff; --dash-chart2:#2563eb;
  --dash-ok:#10b981; --dash-warn:#f59e0b; --dash-bad:#ef4444;
  --dash-levels:#ff6b6b,#ff9a3c,#ffd166,#a3d977,#4fd1a5,#3da9c4,#5b8cff;
  --dash-heat:#5b8cff;
  /* 播放高亮背景（学习器/播放器朗读时当前词条底色） */
  --hl-en:rgba(91,140,255,.24); --hl-bm:rgba(255,180,84,.20);
  --hl-zh:rgba(79,209,165,.20);
}

/* ===================== 中国风 · 墨底朱红描金 ===================== */

/* =========================================================
   主题二 · 中国风「宣纸留白」— 宣纸底 + 墨色浓淡 + 朱砂点睛 + 书法字体 + 大块留白
   （v24 重写：去两侧满屏山水 / 去黑影龙 / 去大灯笼，改宣纸留白 + 书法 + 印章）
   ========================================================= */


/* =========================================================
   主题二 · 中国风「故宫卷轴」— 暗红·朱红·鎏金 | 悬挂卷轴 | 左右对称 | 滚动展卷 | 会动
   （v25 重写：恢复两侧漆山水墨画立轴 + 卷轴裱边 + 祥云流光 + 金龙游动 + 展卷视差）
   ========================================================= */

html[data-skin="guofeng"]{
  /* —— 暗红·朱红·鎏金（故宫庄重色系）—— */
  --bg:#1a0c0c; --bg2:#241010; --panel:#2a1414; --panel2:#331818;
  --line:#5e2a1a; --txt:#f3e3cf; --muted:#c9a884; --accent:#C8102E;
  --en:#e08a5a; --bm:#d4af37; --zh:#7bbfa0; --danger:#ff6b6b;
  --ok:#8fbf9a; --glow:0 0 0 2px rgba(212,175,55,.4); --shadow:rgba(0,0,0,.55);
  --btn-hover:#3a1c1c; --grad-2:#e23b4e;
  --ex-en:#f0d3c4; --ex-bm:#f0e3c0; --ex-zh:#d6e7df; --ex-th:#ecdcf0;
  --skin-primary:#C8102E; --skin-gold:#D4AF37; --skin-name:'中国风';
  --dash-bg:#faf3e3; --dash-bg2:#f5ecd8; --dash-panel:#f5ecd8; --dash-line:#e0d0b0;
  --dash-txt:#3d2b1f; --dash-muted:#7a6650; --dash-faint:#a89878;
  --dash-stripe:linear-gradient(90deg,#C8102E,#e23b4e 30%,#D4AF37 65%,#8a6a2a 100%);
  --dash-chart1:#C8102E; --dash-chart2:#8a1a2a;
  --dash-ok:#5a8a5a; --dash-warn:#b8860b; --dash-bad:#c8382e;
  --dash-levels:#c8382e,#b87430,#b8860b,#9aa75a,#5a8a5a,#4a9a8a,#2a6a8a;
  --dash-heat:#C8102E;
  /* 播放高亮：朱红/鎏金/青绿淡晕染（深底上提亮） */
  --hl-en:rgba(224,138,90,.22); --hl-bm:rgba(212,175,55,.20);
  --hl-zh:rgba(123,191,160,.18);
  /* 纹样：祥云团纹（暗金描线，极淡，仅作肌理）—— */
  --pat-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1.3'%3E%3Cg opacity='.08'%3E%3Ccircle cx='36' cy='38' r='15'/%3E%3Ccircle cx='52' cy='31' r='10'/%3E%3Ccircle cx='60' cy='41' r='7'/%3E%3Cpath d='M22 49q16 7 36 2'/%3E%3C/g%3E%3Cg opacity='.06'%3E%3Ccircle cx='116' cy='112' r='13'/%3E%3Ccircle cx='103' cy='104' r='9'/%3E%3Ccircle cx='124' cy='102' r='6'/%3E%3Cpath d='M100 120q18 5 32 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* 龙鳞纹（卡片暗纹，极淡）—— */
  --pat-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%23d4af37' opacity='.05'%3E%3Cpath d='M0 24a12 12 0 0 1 24 0z'/%3E%3Cpath d='M-12 12a12 12 0 0 1 24 0z'/%3E%3Cpath d='M12 12a12 12 0 0 1 24 0z'/%3E%3C/g%3E%3C/svg%3E");
  /* 宫墙底色置于「根」：body 设为透明，两侧立轴/祥云/金龙（z-index:-1）方可透出 */
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 620px at 50% -12%, rgba(200,16,46,.22), transparent 60%),
    radial-gradient(1000px 720px at 50% 114%, rgba(212,175,55,.12), transparent 60%),
    var(--pat-bg);
  background-repeat:no-repeat, no-repeat, repeat;
  background-position:center, center, left top;
  background-attachment:fixed, fixed, fixed;
  color:var(--txt);
}

/* 1) 页面主体：body 透明，透出根的宫墙底与两侧立轴/祥云/金龙 */
html[data-skin="guofeng"] body{
  background:transparent;
  color:var(--txt);
}

/* 2) 两侧漆山水墨画立轴（左右对称·悬挂卷轴·滚动展卷视差）— 加宽，更有「卷轴」气势 */
html[data-skin="guofeng"]:not(:has(body.guofeng-study-page))::before,
html[data-skin="guofeng"]:not(:has(body.guofeng-study-page))::after{
  content:""; position:fixed; top:0;
  width:clamp(120px, 13vw, 300px); height:100%;
  background-repeat:no-repeat; background-size:cover;
  border-top:14px solid; border-bottom:14px solid;
  border-image:linear-gradient(90deg,#7a5a1e,#e7c66a,#7a5a1e) 1;
  box-shadow:0 0 42px rgba(0,0,0,.65), inset 0 0 0 2px rgba(212,175,55,.42);
  z-index:-1; pointer-events:none;
  animation:gf-drop 1.1s ease-out both;
}
html[data-skin="guofeng"]:not(:has(body.guofeng-study-page))::before{
  left:clamp(4px, 2vw, 40px);
  background-image:url("guofeng-landscape-left.png");
  background-position:calc(50% + var(--sy,0) * -0.045px) center;
}
html[data-skin="guofeng"]:not(:has(body.guofeng-study-page))::after{
  right:clamp(4px, 2vw, 40px);
  background-image:url("guofeng-landscape-right.png");
  background-position:calc(50% + var(--sy,0) * -0.045px) center;
}

/* 3) 祥云流光（缓慢漂移，添「会动」气息） */
html[data-skin="guofeng"] body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='180' viewBox='0 0 420 180'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M40 130q22-46 64-34q12-40 60-28q34-34 66 2q44-22 60 24q38-6 44 28'/%3E%3Cpath d='M250 70q18-30 50-22q26-26 52 4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:520px auto; background-position:0 14%;
  opacity:.12;
  animation:gf-clouds 90s linear infinite;
}

/* 4) 金龙游动（居中淡影，缓慢起伏，会动） */
html[data-skin="guofeng"] body::after{
  content:""; position:fixed; top:50%; left:50%;
  width:min(62vw, 760px); height:min(62vw, 760px);
  transform:translate(-50%,-50%);
  background:url("guofeng-dragon.png") center/contain no-repeat;
  opacity:.17; pointer-events:none; z-index:-1;
  animation:gf-dragon 28s ease-in-out infinite;
}

/* 5) 整页如悬挂卷轴：中央内容区缩进，两侧留出更宽立轴余地（左右对称） */
html[data-skin="guofeng"]:not(:has(body.guofeng-study-page)) .layout{
  margin:0 clamp(14px, 15vw, 340px);
  animation:gf-unroll 1.05s cubic-bezier(.2,.8,.2,1) both;
}

/* 6) 顶栏=卷轴天杆（鎏金轴杆 + 流光） */
html[data-skin="guofeng"] header{
  background:linear-gradient(180deg,#3a1414 0%, #240a0a 100%);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#7a5a1e,#e7c66a,#7a5a1e) 1;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  position:relative; color:#f3e3cf;
}
html[data-skin="guofeng"] header h1,
html[data-skin="guofeng"] header .sub{ color:#f3e3cf; }
html[data-skin="guofeng"] header::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, transparent, #e7c66a, transparent);
  background-size:220% 100%;
  animation:gf-shimmer 6.5s linear infinite;
  pointer-events:none;
}
/* 朱砂印章点睛（标题前） */
html[data-skin="guofeng"] header h1::before{
  content:""; display:inline-block; width:26px; height:26px;
  background:url("guofeng-seal.svg") center/contain no-repeat;
  margin-right:9px; vertical-align:-5px;
  filter:drop-shadow(0 1px 3px rgba(120,20,20,.4));
}

/* 7) 卡片：暗红漆面 + 金边 + 朱红顶线 + 龙鳞暗纹 */
html[data-skin="guofeng"] .qcard,
html[data-skin="guofeng"] .startpanel,
html[data-skin="guofeng"] .ucard,
html[data-skin="guofeng"] .rcard,
html[data-skin="guofeng"] .bigcard,
html[data-skin="guofeng"] .flashcard,
html[data-skin="guofeng"] .derivcard,
html[data-skin="guofeng"] .expanel,
html[data-skin="guofeng"] .card{
  background-color:var(--panel);
  border:1px solid rgba(212,175,55,.42);
  border-top:3px solid rgba(200,16,46,.75);
  background-image:var(--pat-card);
  box-shadow:0 5px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(212,175,55,.16);
}
html[data-skin="guofeng"] .qcard:hover,
html[data-skin="guofeng"] .startpanel:hover,
html[data-skin="guofeng"] .ucard:hover,
html[data-skin="guofeng"] .card:hover{
  border-color:rgba(212,175,55,.7);
  box-shadow:0 8px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.2), inset 0 1px 0 rgba(212,175,55,.24);
}

/* 8) 操作栏（lessonbar / unitbar / quizbar）：暗红条 + 鎏金底线 */
html[data-skin="guofeng"] .lessonbar,
html[data-skin="guofeng"] .unitbar,
html[data-skin="guofeng"] .quizbar{
  border:1px solid rgba(212,175,55,.35);
  border-bottom:2px solid rgba(200,16,46,.5);
  background:linear-gradient(180deg, #331818, #281212);
  color:var(--txt);
}

/* 9) 主按钮：朱红渐变 + 金边鎏光 */
html[data-skin="guofeng"] .primary,
html[data-skin="guofeng"] button.primary{
  background:linear-gradient(135deg, #d42034, #8e0f1d);
  border:1px solid rgba(212,175,55,.7);
  color:#fff3e6;
  box-shadow:0 4px 14px rgba(200,16,46,.35), inset 0 1px 0 rgba(255,220,150,.25);
}
html[data-skin="guofeng"] .primary:hover{
  background:linear-gradient(135deg, #e23b4e, #ab1425);
  box-shadow:0 0 0 2px rgba(212,175,55,.32), 0 6px 18px rgba(200,16,46,.45), inset 0 1px 0 rgba(255,220,150,.3);
}

/* 10) 页脚：鎏金顶线 + 回纹呼应 */
html[data-skin="guofeng"] footer{ border-top:1px solid rgba(212,175,55,.45); color:var(--muted); }
html[data-skin="guofeng"] footer::before{
  content:""; display:block; height:8px; margin-bottom:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='8' viewBox='0 0 30 8'%3E%3Cpath d='M1 7V1h22v4H9V3h9' fill='none' stroke='%23d4af37' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center / 30px 8px;
  opacity:.45;
}

/* 11) 目录（nav）：暗红漆面 + 金线 + 极淡墨山浮水印 */
html[data-skin="guofeng"] nav{
  position:relative;
  background:linear-gradient(180deg, #2a1414, #221010);
  border-right:2px solid transparent; border-image:linear-gradient(180deg,#7a5a1e,#e7c66a,#7a5a1e) 1;
}
html[data-skin="guofeng"] nav::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:260px;
  background:url("guofeng-landscape-left.png") center bottom / cover no-repeat;
  opacity:.10; pointer-events:none; z-index:0; transform:scaleX(-1);
  mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
}
html[data-skin="guofeng"] nav > *{ position:relative; z-index:1; }

/* 12) 单词背诵界面（学习器 lesson / 闪记页）：暗红卷轴卡 + 金龙淡影，全幅氛围 */
html[data-skin="guofeng"] .lesson{
  position:relative;
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(200,16,46,.22), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(212,175,55,.10), transparent 60%),
    #1a0c0c;
}
html[data-skin="guofeng"] .lesson .lessonbar{
  background:linear-gradient(180deg, #331818, #281212);
  border-bottom:2px solid rgba(200,16,46,.55);
  color:var(--txt);
}
html[data-skin="guofeng"] .lesson .tablewrap,
html[data-skin="guofeng"] .lesson .rootwrap{
  background-color:rgba(42,20,20,.9);
  backdrop-filter:blur(3px);
  border:1px solid rgba(212,175,55,.42);
  border-radius:14px;
  box-shadow:0 10px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,175,55,.15);
  padding:8px 12px;
}
/* 闪记页：整页暗红氛围 + 金龙淡影，字卡为卷轴卡 */
html[data-skin="guofeng"] body.guofeng-study-page{
  /* 透明：透出根的宫墙底 + 金龙淡影（body::after 动画） */
  background:transparent;
}
html[data-skin="guofeng"] body.guofeng-study-page::after{
  content:""; position:fixed; top:50%; left:50%; width:min(72vw, 840px); height:min(72vw, 840px);
  transform:translate(-50%,-50%);
  background:url("guofeng-dragon.png") center/contain no-repeat;
  opacity:.20; pointer-events:none; z-index:-1;
  animation:gf-dragon 28s ease-in-out infinite;
}
/* 闪记卡片：给 .face（正反面可见面）做卷轴底板，千万不能给 .flashcard 3D 容器加 background-color，会压平 3D 上下文导致翻卡画面上下颠倒 */
html[data-skin="guofeng"] body.guofeng-study-page .face{
  background-color:rgba(42,20,20,.96) !important;
  background-image:
    radial-gradient(1000px 600px at 50% -12%, rgba(200,16,46,.20), transparent 60%),
    radial-gradient(900px 600px at 50% 112%, rgba(212,175,55,.12), transparent 60%),
    var(--pat-card);
  border:2px solid rgba(212,175,55,.55);
  border-top:4px solid rgba(200,16,46,.8);
  box-shadow:0 14px 54px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,175,55,.25);
}
html[data-skin="guofeng"] body.guofeng-study-page .face::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(212,175,55,.12), transparent 55%);
}

/* 13) 播放高亮：深底上提亮（暖金/朱红晕染 + 米白字） */
html[data-skin="guofeng"] table.vid tr.speak-en td,
html[data-skin="guofeng"] table.vid tr.speak-bm td,
html[data-skin="guofeng"] table.vid tr.speak-zh td,
html[data-skin="guofeng"] table.vid tr.speak-en td *,
html[data-skin="guofeng"] table.vid tr.speak-bm td *,
html[data-skin="guofeng"] table.vid tr.speak-zh td *,
html[data-skin="guofeng"] .wrow.speak-en,
html[data-skin="guofeng"] .wrow.speak-bm,
html[data-skin="guofeng"] .wrow.speak-zh,
html[data-skin="guofeng"] .wrow.speak-en .wtext,
html[data-skin="guofeng"] .wrow.speak-bm .wtext,
html[data-skin="guofeng"] .wrow.speak-zh .wtext,
html[data-skin="guofeng"] .single.speak-en .sword,
html[data-skin="guofeng"] .single.speak-bm .sword,
html[data-skin="guofeng"] .single.speak-zh .sword{
  color:var(--txt) !important;
  font-weight:700 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.6) !important;
}

/* 14) 看板（浅色区）：宣纸 + 祥云角饰 */
html[data-skin="guofeng"] .dashboard .cc,
html[data-skin="guofeng"] .dashboard .sc{
  background-image:var(--pat-card);
}

/* ===== 动效关键帧 ===== */
@keyframes gf-drop{ from{ opacity:0; transform:translateY(-26px); } to{ opacity:1; transform:none; } }
@keyframes gf-unroll{ from{ opacity:0; transform:translateY(-14px) scaleY(.985); } to{ opacity:1; transform:none; } }
@keyframes gf-clouds{ from{ background-position:0 14%; } to{ background-position:-1040px 14%; } }
@keyframes gf-dragon{
  0%,100%{ transform:translate(-50%,-50%) rotate(-2deg) translateY(0); }
  50%{ transform:translate(-50%,-52%) rotate(2deg) translateY(-16px); }
}
@keyframes gf-shimmer{ from{ background-position:220% 0; } to{ background-position:-220% 0; } }

/* ===================== 马来西亚 · 辉煌条纹（皇家蓝金版） ===================== */
html[data-skin="malaysia"]{
  --bg:#030615; --bg2:#050a2e; --panel:#0a1247; --panel2:#111d52;
  --line:#1e2b6b; --txt:#f0f4ff; --muted:#8a9bd4; --accent:#CC0001;
  --en:#ffd24d; --bm:#ff8a8a; --zh:#8fd4ff; --danger:#ff5252;
  --ok:#5fd0a0; --glow:0 0 0 2px rgba(204,0,1,.38); --shadow:rgba(0,0,0,.5);
  --btn-hover:#16235c; --grad-2:#ff5b5b;
  --ex-en:#fff0c2; --ex-bm:#ffd6d6; --ex-zh:#cfe6ff; --ex-th:#fff0b0;
  --skin-primary:#010066; --skin-gold:#FFCC00; --skin-name:'马来西亚';
  --dash-bg:#f2f6ff; --dash-bg2:#e8efff; --dash-panel:#e8efff; --dash-line:#c4d4f5;
  --dash-txt:#081440; --dash-muted:#4a5a8a; --dash-faint:#7a8ab8;
  --dash-stripe:linear-gradient(90deg,#010066,#CC0001 40%,#FFCC00 75%,#ffffff 100%);
  --dash-chart1:#CC0001; --dash-chart2:#8a0001;
  --dash-ok:#5fd0a0; --dash-warn:#FFCC00; --dash-bad:#CC0001;
  --dash-levels:#CC0001,#ff6648,#FFCC00,#a8d08a,#5fd0a0,#3a9ad8,#010066;
  --dash-heat:#010066;
  /* 纹样：songket 金线几何 */
  --pat-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg stroke='%23FFCC00' fill='none' stroke-width='1' opacity='.07'%3E%3Cpath d='M22 3L41 22L22 41L3 22z'/%3E%3Cpath d='M22 11L33 22L22 33L11 22z'/%3E%3Cpath d='M0 0l9 0L0 9z'/%3E%3Cpath d='M44 0l-9 0L44 9z'/%3E%3Cpath d='M0 44l9 0L0 35z'/%3E%3Cpath d='M44 44l-9 0L44 35z'/%3E%3C/g%3E%3Cg fill='%23FFCC00' opacity='.09'%3E%3Ccircle cx='22' cy='22' r='1.8'/%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3Ccircle cx='44' cy='0' r='1.5'/%3E%3Ccircle cx='0' cy='44' r='1.5'/%3E%3Ccircle cx='44' cy='44' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --pat-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg stroke='%23FFCC00' fill='none' stroke-width='.9' opacity='.05'%3E%3Cpath d='M15 3L27 15L15 27L3 15z'/%3E%3Cpath d='M15 9L21 15L15 21L9 15z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===================== 节日皮肤 ===================== */
html[data-skin="chunjie"]{
  --bg:#1a0808; --bg2:#260d0d; --panel:#2a0f0f; --panel2:#3a1414;
  --line:#4a1a1a; --txt:#ffe8d6; --muted:#c89880; --accent:#ff3b30;
  --en:#ffd6a5; --bm:#ff9a8d; --zh:#ffcf99; --danger:#ff5252;
  --ok:#9ddba4; --glow:0 0 0 2px rgba(255,59,48,.42); --shadow:rgba(0,0,0,.5);
  --btn-hover:#4a1a1a; --grad-2:#ff6b5e;
  --ex-en:#fff0dd; --ex-bm:#ffd9d9; --ex-zh:#ffe8c2; --ex-th:#ffddbb;
  --skin-primary:#ff3b30; --skin-gold:#ffd700; --skin-name:'春节';
  --dash-bg:#fff8f0; --dash-bg2:#fff2e5; --dash-panel:#fff2e5; --dash-line:#f0d8c0;
  --dash-txt:#4a1a10; --dash-muted:#8a6050; --dash-faint:#b89080;
  --dash-stripe:linear-gradient(90deg,#ff3b30,#ff6b5e 35%,#ffd700 75%,#ff9500 100%);
  --dash-chart1:#ff3b30; --dash-chart2:#c82018;
  --dash-ok:#9ddba4; --dash-warn:#ff9500; --dash-bad:#ff3b30;
  --dash-levels:#ff3b30,#ff6648,#ff9500,#ffd700,#c8d88a,#9ddba4,#5aa878;
  --dash-heat:#ff3b30;
}
html[data-skin="kaifa"]{
  --bg:#06180f; --bg2:#0a2417; --panel:#0d2b1c; --panel2:#123a25;
  --line:#1d4a31; --txt:#e0f5e9; --muted:#8fc0a5; --accent:#4fd199;
  --en:#8ce0b8; --bm:#c8e6d0; --zh:#f0d9a8; --danger:#ff5252;
  --ok:#4fd199; --glow:0 0 0 2px rgba(79,209,153,.35); --shadow:rgba(0,0,0,.4);
  --btn-hover:#173a26; --grad-2:#6fd8a5;
  --ex-en:#d0f0dd; --ex-bm:#e0f5e9; --ex-zh:#ffeec7; --ex-th:#d8f0c0;
  --skin-primary:#0e7a4e; --skin-gold:#d4af37; --skin-name:'开斋节';
  --dash-bg:#f2faf5; --dash-bg2:#e8f5ec; --dash-panel:#e8f5ec; --dash-line:#c0e0cc;
  --dash-txt:#0a3a20; --dash-muted:#4a7a5c; --dash-faint:#80a890;
  --dash-stripe:linear-gradient(90deg,#0e7a4e,#4fd199 35%,#d4af37 75%,#8a6a2a 100%);
  --dash-chart1:#0e7a4e; --dash-chart2:#0a5a3a;
  --dash-ok:#4fd199; --dash-warn:#d4952a; --dash-bad:#c8382e;
  --dash-levels:#c8382e,#d4683a,#d4952a,#a8b05a,#4fd199,#2a9a78,#0a6a8a;
  --dash-heat:#0e7a4e;
}
html[data-skin="zhongqiu"]{
  --bg:#0e0a1c; --bg2:#141024; --panel:#181230; --panel2:#1f183e;
  --line:#2c2450; --txt:#f0e8d8; --muted:#a898c0; --accent:#d4af37;
  --en:#e8d5a8; --bm:#d8b0ff; --zh:#f0d9a8; --danger:#ff5252;
  --ok:#9ddba4; --glow:0 0 0 2px rgba(212,175,55,.35); --shadow:rgba(0,0,0,.4);
  --btn-hover:#2c2450; --grad-2:#f0c860;
  --ex-en:#f5e8c8; --ex-bm:#e8d0f8; --ex-zh:#ffe8c2; --ex-th:#e0d0f0;
  --skin-primary:#d4af37; --skin-gold:#f5e8a0; --skin-name:'中秋';
  --dash-bg:#faf8f2; --dash-bg2:#f5f0e8; --dash-panel:#f5f0e8; --dash-line:#e0d8c8;
  --dash-txt:#2a2040; --dash-muted:#6a6080; --dash-faint:#9890a8;
  --dash-stripe:linear-gradient(90deg,#d4af37,#f0c860 35%,#c8a8e8 75%,#8a78a8 100%);
  --dash-chart1:#d4af37; --dash-chart2:#a8882a;
  --dash-ok:#9ddba4; --dash-warn:#d4952a; --dash-bad:#c8382e;
  --dash-levels:#c8382e,#d4683a,#d4952a,#d4af37,#a8c08a,#68b098,#4878a8;
  --dash-heat:#d4af37;
}

/* =========================================================
   通用装饰基础（所有皮肤共享）
   ========================================================= */

/* 按钮波纹 */
@keyframes tril-ripple{
  0%   { transform:scale(0);   opacity:.35; }
  100% { transform:scale(2.6); opacity:0;   }
}
button{ position:relative; overflow:hidden; }
button::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, transparent 60%);
  transform:scale(0); opacity:0; pointer-events:none;
  transition:transform .5s ease-out, opacity .5s ease-out;
}
button:active::after{ animation:tril-ripple .55s ease-out; }

@keyframes tril-sway{
  0%,100%{ transform:rotate(-6deg); }
  50%    { transform:rotate(6deg);  }
}
@keyframes tril-sway-slow{
  0%,100%{ transform:rotate(-4deg); }
  50%    { transform:rotate(4deg);  }
}

/* 卡片悬浮细化 */
.qcard, .startpanel, .cc, .card, .ucard, .rcard, .bigcard, .flashcard, .derivcard, .expanel{
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qcard:hover, .startpanel:hover{ border-color:var(--accent); }

/* 皮肤标识角标（右下角）— 中国风/马来西亚由 header 印章代指，排除以免与 body::after 装饰冲突 */
html[data-skin]:not([data-skin="default"]):not([data-skin="guofeng"]):not([data-skin="malaysia"]) body::after{
  content:var(--skin-name, "皮肤");
  position:fixed; right:10px; bottom:10px; padding:3px 9px;
  font-size:11px; border-radius:99px;
  background:var(--panel2); color:var(--muted);
  border:1px solid var(--line); z-index:998; pointer-events:none; opacity:.75;
}

/* 文本选色 */
html[data-skin="guofeng"]    ::selection{ background:#C8102E; color:#ffe9c8; }
html[data-skin="malaysia"]   ::selection{ background:#FFCC00; color:#010066; }
html[data-skin="default"]    ::selection{ background:#5b8cff; color:#fff; }

/* 滚动条 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
html[data-skin="default"]    ::-webkit-scrollbar-thumb{ background:#2c3756; border-radius:6px; }
html[data-skin="guofeng"]    ::-webkit-scrollbar-thumb{ background:#3a2424; border-radius:6px; border:2px solid #160d0d; }
html[data-skin="malaysia"]   ::-webkit-scrollbar-thumb{ background:#26347a; border-radius:6px; border:2px solid #050a2e; }

/* =========================================================
   主题一 · 默认蓝「深海蓝调」— 精致几何 + 玻璃质感
   ========================================================= */
html[data-skin="default"] body{
  background-image:
    radial-gradient(1100px 520px at 88% -10%, rgba(91,140,255,.12), transparent 60%),
    radial-gradient(900px 500px at -8% 110%, rgba(79,209,165,.07), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='1' fill='%23ffffff' opacity='.03'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%235b8cff' opacity='.05'/%3E%3Ccircle cx='34' cy='34' r='1' fill='%235b8cff' opacity='.05'/%3E%3C/svg%3E");
}
html[data-skin="default"] header{
  background:linear-gradient(180deg, rgba(26,34,56,.96) 0%, rgba(21,28,46,.92) 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,.32);
}
html[data-skin="default"] header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(91,140,255,.85) 30%, rgba(79,209,165,.55) 70%, transparent);
}
html[data-skin="default"] .primary,
html[data-skin="default"] button.primary{
  background:linear-gradient(135deg, #5b8cff, #2563eb);
  box-shadow:0 4px 14px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.22);
  border:1px solid rgba(122,162,255,.55);
}
html[data-skin="default"] .primary:hover{
  box-shadow:0 6px 20px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.28);
}

/* =========================================================
   主题三 · 马来西亚「辉煌条纹·皇家蓝金」— songket 立轴 · 新月十四角星 · 木槿花
   ========================================================= */

/* 1) 页面根：深海夜空 + 金辉 + 底部绯红辉光 + songket 暗纹
   body 透明，装饰放在负 z 层 */
html[data-skin="malaysia"]{
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 620px at 50% -12%, rgba(255,204,0,.16), transparent 60%),
    radial-gradient(1000px 720px at 50% 114%, rgba(204,0,1,.12), transparent 60%),
    var(--pat-bg);
}
html[data-skin="malaysia"] body{
  background:transparent;
}

/* 2) 两侧 songket 金框立轴 */
html[data-skin="malaysia"]:not(:has(body.guofeng-study-page))::before,
html[data-skin="malaysia"]:not(:has(body.guofeng-study-page))::after{
  content:""; position:fixed; top:0; height:100%; width:clamp(120px,13vw,300px);
  z-index:-1; pointer-events:none;
  background-repeat:no-repeat; background-size:cover; background-position:calc(50% + var(--sy,0)*-0.045px) center;
  border-style:solid; border-color:transparent;
  border-width:18px 0;
  border-image-source:linear-gradient(180deg,
    #d4af37 0%, #ffdf70 8%, #d4af37 16%, #8a6a2a 30%, #d4af37 45%,
    #b8943a 55%, #d4af37 70%, #8a6a2a 84%, #ffdf70 92%, #d4af37 100%);
  border-image-slice:18 0 fill;
  border-image-width:18px 0;
  box-shadow:0 0 42px rgba(0,0,0,.55), inset 0 0 28px rgba(0,0,0,.35);
  animation:my-drop .8s cubic-bezier(.22,.61,.36,1) both;
}
html[data-skin="malaysia"]:not(:has(body.guofeng-study-page))::before{
  left:clamp(4px,2vw,40px);
  background-image:url("malaysia-panel-left.png");
}
html[data-skin="malaysia"]:not(:has(body.guofeng-study-page))::after{
  right:clamp(4px,2vw,40px);
  background-image:url("malaysia-panel-right.png");
}

/* 3) 木槿花水印（body::before） */
html[data-skin="malaysia"] body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("malaysia-watermark.svg") repeat; opacity:.05;
  animation:my-watermark 160s linear infinite;
}

/* 4) 新月十四角星 floating emblem（body::after） */
html[data-skin="malaysia"] body::after{
  content:""; position:fixed; top:12%; left:50%; width:clamp(120px,18vw,260px); aspect-ratio:1/1;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:url("malaysia-emblem.svg") no-repeat center/contain; opacity:.13;
  filter:drop-shadow(0 0 18px rgba(255,204,0,.25));
  animation:my-emblem 26s ease-in-out infinite;
}

/* 5) 内容区卷轴入场 */
html[data-skin="malaysia"]:not(:has(body.guofeng-study-page)) .layout{
  margin:0 clamp(14px,15vw,340px);
  animation:my-unroll .7s cubic-bezier(.22,.61,.36,1) both;
}

/* 6) 顶栏：皇家金杆 + 木槿朱砂印章 */
html[data-skin="malaysia"] header{
  background:linear-gradient(180deg, rgba(10,18,71,.96) 0%, rgba(5,10,46,.92) 100%);
  border-bottom:1px solid rgba(212,175,55,.55);
  box-shadow:0 6px 22px rgba(0,0,20,.5);
  position:relative;
}
html[data-skin="malaysia"] header h1,
html[data-skin="malaysia"] header .sub{ color:#f3e3cf; }
html[data-skin="malaysia"] header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,204,0,.8) 30%, rgba(212,175,55,.5) 70%, transparent);
  background-size:220% 100%;
  animation:my-shimmer 6.5s linear infinite;
  pointer-events:none;
}
html[data-skin="malaysia"] header h1::before{
  content:""; display:inline-block; vertical-align:middle; width:34px; height:34px; margin-right:10px;
  background:url("malaysia-seal.svg") no-repeat center/contain;
  filter:drop-shadow(0 0 6px rgba(255,204,0,.35));
}

/* 7) 卡片：深蓝漆器 + 金边 + 绯红顶线 + songket 暗纹 */
html[data-skin="malaysia"] .qcard,
html[data-skin="malaysia"] .startpanel,
html[data-skin="malaysia"] .ucard,
html[data-skin="malaysia"] .rcard,
html[data-skin="malaysia"] .bigcard,
html[data-skin="malaysia"] .flashcard,
html[data-skin="malaysia"] .derivcard,
html[data-skin="malaysia"] .expanel,
html[data-skin="malaysia"] .card{
  background-color:rgba(10,18,71,.90);
  background-image:var(--pat-card);
  border:1px solid rgba(255,204,0,.28);
  border-top:3px solid rgba(204,0,1,.75);
  box-shadow:0 6px 22px rgba(0,0,30,.45), inset 0 1px 0 rgba(255,204,0,.12);
}
html[data-skin="malaysia"] .qcard:hover,
html[data-skin="malaysia"] .startpanel:hover,
html[data-skin="malaysia"] .ucard:hover,
html[data-skin="malaysia"] .card:hover{
  border-color:rgba(255,204,0,.55);
  box-shadow:0 8px 28px rgba(0,0,40,.55), 0 0 0 1px rgba(255,204,0,.15), inset 0 1px 0 rgba(255,204,0,.18);
}

/* 8) 操作栏 */
html[data-skin="malaysia"] .lessonbar,
html[data-skin="malaysia"] .unitbar,
html[data-skin="malaysia"] .quizbar{
  border:1px solid rgba(255,204,0,.24);
  border-bottom:2px solid rgba(255,204,0,.42);
  background:linear-gradient(180deg, #0d1740, #0a1247);
}

/* 9) 主按钮：旗帜红渐变 + 金边 */
html[data-skin="malaysia"] .primary,
html[data-skin="malaysia"] button.primary{
  background:linear-gradient(135deg, #e01516, #9a0001);
  border:1px solid rgba(255,204,0,.55);
  box-shadow:0 4px 14px rgba(204,0,1,.42), inset 0 1px 0 rgba(255,220,120,.25);
}
html[data-skin="malaysia"] .primary:hover{
  background:linear-gradient(135deg, #f02526, #ab0102);
  box-shadow:0 0 0 2px rgba(255,204,0,.25), 0 6px 18px rgba(204,0,1,.55), inset 0 1px 0 rgba(255,220,120,.3);
}

/* 10) 页脚 */
html[data-skin="malaysia"] footer{
  border-top:1px solid rgba(212,175,55,.45); color:var(--muted);
}

/* 11) 目录区装饰（立轴局部） */
html[data-skin="malaysia"] nav{
  position:relative;
}
html[data-skin="malaysia"] nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:240px;
  background:url("malaysia-panel-left.png") center bottom/cover no-repeat;
  opacity:.10; transform:scaleX(-1);
  mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 60%, transparent 100%);
  pointer-events:none; z-index:0;
}
html[data-skin="malaysia"] nav > *{ position:relative; z-index:1; }

/* 12) 目录项 */
html[data-skin="malaysia"] .lesson{
  background:rgba(10,18,71,.55);
  border:1px solid rgba(255,204,0,.18);
}
html[data-skin="malaysia"] .lesson .lessonbar{
  background:linear-gradient(180deg, #0d1740, #0a1247);
}
html[data-skin="malaysia"] .lesson .tablewrap,
html[data-skin="malaysia"] .lesson .rootwrap{
  background:rgba(6,10,30,.35);
}

/* 13) 背诵/闪记页暗色氛围 + 卡片面（背景放 face，不放 flashcard 容器，避免 3D 翻转被压平） */
html[data-skin="malaysia"] body.guofeng-study-page{
  background:
    radial-gradient(1200px 600px at 50% -12%, rgba(255,204,0,.10), transparent 60%),
    radial-gradient(1000px 700px at 50% 112%, rgba(204,0,1,.08), transparent 60%),
    var(--bg);
}
html[data-skin="malaysia"] body.guofeng-study-page::after{ opacity:.08; }
html[data-skin="malaysia"] body.guofeng-study-page .face{
  background-color:rgba(10,18,71,.96) !important;
  background-image: radial-gradient(1000px 600px at 50% -12%, rgba(255,204,0,.14), transparent 60%), radial-gradient(900px 600px at 50% 112%, rgba(212,175,55,.10), transparent 60%), var(--pat-card);
  border:2px solid rgba(212,175,55,.55); border-top:4px solid rgba(204,0,1,.8);
  box-shadow:0 14px 54px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,175,55,.25);
}
html[data-skin="malaysia"] body.guofeng-study-page .face::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(212,175,55,.12), transparent 55%);
}

/* 14) 语音高亮条 */
html[data-skin="malaysia"] table.vid tr.speak-en td,
html[data-skin="malaysia"] table.vid tr.speak-bm td,
html[data-skin="malaysia"] table.vid tr.speak-zh td,
html[data-skin="malaysia"] table.vid tr.speak-en td *,
html[data-skin="malaysia"] table.vid tr.speak-bm td *,
html[data-skin="malaysia"] table.vid tr.speak-zh td *,
html[data-skin="malaysia"] .wrow.speak-en,
html[data-skin="malaysia"] .wrow.speak-bm,
html[data-skin="malaysia"] .wrow.speak-zh,
html[data-skin="malaysia"] .wrow.speak-en .wtext,
html[data-skin="malaysia"] .wrow.speak-bm .wtext,
html[data-skin="malaysia"] .wrow.speak-zh .wtext,
html[data-skin="malaysia"] .single.speak-en .sword,
html[data-skin="malaysia"] .single.speak-bm .sword,
html[data-skin="malaysia"] .single.speak-zh .sword{
  background-color:rgba(255,204,0,.10) !important;
  color:#fff8e0 !important;
}

/* 15) 看板 */
html[data-skin="malaysia"] .dashboard .cc,
html[data-skin="malaysia"] .dashboard .sc{
  background-image:var(--pat-card);
}

/* 16) 表格头 */
html[data-skin="malaysia"] th{
  background:rgba(255,204,0,.08);
  border-bottom:1px solid rgba(255,204,0,.3) !important;
}

/* 17) 动效关键帧 */
@keyframes my-drop{
  from{ opacity:0; transform:translateY(-22px) scaleY(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes my-unroll{
  from{ opacity:0; transform:translateY(-14px) scaleY(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes my-watermark{
  from{ background-position:0 0; }
  to{ background-position:-320px 240px; }
}
@keyframes my-emblem{
  0%,100%{ transform:translate(-50%,-50%) rotate(-2deg) translateY(0); }
  50%{ transform:translate(-50%,-52%) rotate(2deg) translateY(-14px); }
}
@keyframes my-shimmer{
  from{ background-position:220% 0; }
  to{ background-position:-220% 0; }
}

/* =========================================================
   可读性与动效保护
   ========================================================= */
/* 装饰不拦截交互 */
html[data-skin="guofeng"]::before,
html[data-skin="guofeng"]::after,
html[data-skin="malaysia"]::before,
html[data-skin="malaysia"]::after{ pointer-events:none; }

/* 小屏彻底隐藏两侧立轴/金龙，并把内容边距收回，避免主内容被挤太窄 */
@media (max-width:760px){
  html[data-skin="guofeng"]:not(:has(body.guofeng-study-page))::before,
  html[data-skin="guofeng"]:not(:has(body.guofeng-study-page))::after{ display:none; }
  html[data-skin="guofeng"]:not(:has(body.guofeng-study-page)) .layout{ margin:0 8px; }
  html[data-skin="malaysia"]::before,
  html[data-skin="malaysia"]::after{ display:none; }
  html[data-skin="malaysia"] body::after{ display:none; }
  html[data-skin="malaysia"] .layout{ margin:0 8px; }
  html[data-skin="guofeng"] body{ background-attachment:scroll; }
  html[data-skin="guofeng"] body::after{ display:none; }
  html[data-skin="guofeng"] .lesson,
  html[data-skin="guofeng"] body.guofeng-study-page{ background-attachment:scroll; }
}

/* 动效敏感用户：停用摇曳/波纹 */
@media (prefers-reduced-motion: reduce){
  html[data-skin="guofeng"]::before,
  html[data-skin="guofeng"]::after,
  html[data-skin="malaysia"]::before,
  html[data-skin="malaysia"]::after{ animation:none; }
  button::after{ display:none; }
}

/* 节日皮肤沿用既有装饰 */
html[data-skin="chunjie"] h1::before{
  content:"🧧"; margin-right:8px; font-size:.95em;
  animation:tril-sway 2.4s ease-in-out infinite;
}
html[data-skin="kaifa"] h1::before{ content:"🌙"; margin-right:8px; font-size:.95em; }
html[data-skin="zhongqiu"] h1::before{
  content:"🥮"; margin-right:8px; font-size:.95em;
  animation:tril-sway 3s ease-in-out infinite;
}
html[data-skin="chunjie"] .qcard,
html[data-skin="chunjie"] .startpanel{ border-top:2px solid var(--skin-gold, #ffd700); }
html[data-skin="zhongqiu"] .qcard,
html[data-skin="zhongqiu"] .startpanel{ border-top:2px solid rgba(212,175,55,.55); }

/* =========================================================
   统一侧栏目录（学习器/测试器/闪记/复习/错题专练 · 共用）
   ========================================================= */
.layout{flex:1;display:flex;min-height:0}
.layout > nav,
#nav{
  flex:0 0 250px;
  background:var(--panel);
  border-right:1px solid var(--line);
  overflow-y:auto;
  padding:10px;
  min-height:0;
}
.layout > main,
#main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:auto;
}
.navstage{margin-bottom:6px}
.navstage>h3{
  font-size:13px;
  margin:8px 6px 4px;
  color:var(--accent);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}
.navstage .cnt{font-size:11px;color:var(--muted);font-weight:400}
.navfile{
  display:block;width:100%;text-align:left;
  margin:2px 0;padding:7px 10px;font-size:13px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--txt);cursor:pointer;font-family:inherit;
}
.navfile:hover{background:var(--panel2)}
.navfile.active{background:var(--panel2);border-color:var(--accent)}
.navfile .fc{float:right;color:var(--muted);font-size:11px}
.navfile .rt{float:right;color:var(--zh);font-size:10px;margin-right:6px}
.navunit{
  display:block;width:100%;text-align:left;
  margin:1px 0;padding:6px 12px;font-size:13px;
  background:transparent;border:1px solid transparent;
  border-left:3px solid var(--line);
  border-radius:0 8px 8px 0;
  color:var(--txt);cursor:pointer;font-family:inherit;
}
.navunit:hover{background:var(--panel2)}
.navunit.active{background:var(--panel2);border-left-color:var(--accent)}
.navunit .fc{float:right;color:var(--muted);font-size:11px}
.navback{
  display:block;width:100%;text-align:left;
  margin:2px 0 6px;padding:5px 8px;font-size:12px;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;color:var(--muted);cursor:pointer;font-family:inherit;
}
.navback:hover{color:var(--txt)}

.unitlist{flex:1;overflow-y:auto;padding:18px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:12px}
.breadcrumb b{color:var(--txt)}
.unitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ucard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px;cursor:pointer;
  transition:.15s;position:relative;overflow:hidden}
.ucard:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.ucard .ut{font-size:14px;font-weight:600;line-height:1.4}
.ucard .umeta{font-size:11px;color:var(--muted);margin-top:6px}
.ucard .badge{position:absolute;top:10px;right:10px;font-size:10px;padding:2px 7px;border-radius:99px;background:var(--panel2);color:var(--muted)}
.ucard.done .badge{background:rgba(79,209,165,.18);color:var(--zh)}
.ucard .mini{height:4px;background:var(--panel2);border-radius:99px;margin-top:10px;overflow:hidden}
.ucard .mini>i{display:block;height:100%;background:var(--zh)}

@media (max-width:560px){
  .layout{flex-direction:column}
  .layout > nav,#nav{flex:0 0 auto;max-height:38vh;border-right:none;border-bottom:1px solid var(--line)}
}

/* =========================================================
   通用可折叠面板：所有 6 个 app 共享
   - 学习器 / 测试器 / 闪记 / 播放器 4 个 app 共用 sidebar + topbar
   - 复习 / 错题复习使用 3 级侧栏 unitFilter 模式，无 sidebar 切换
   作用：把 hide-sidebar / hide-topbar 集中到一处，
   各 app HTML 内嵌样式不再重复定义，避免优先级冲突
   ========================================================= */
header{
  transition:max-height .3s ease,padding .3s ease,opacity .25s ease,border-width .3s ease;
  max-height:160px;
  overflow:hidden;
}
.layout > nav,
#nav{
  transition:width .3s ease,flex-basis .3s ease,opacity .25s ease,padding .3s ease;
  overflow-x:hidden;
}
body.hide-topbar header{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  border-bottom-width:0;
  pointer-events:none;
}
body.hide-sidebar .layout > nav,
body.hide-sidebar #nav{
  width:0;
  flex-basis:0;
  min-width:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
  border-right-width:0;
  pointer-events:none;
  overflow:hidden;
  transform:translateX(-12px);
}
/* sidebar 隐藏时 main 占满剩余空间 */
body.hide-sidebar .layout > main,
body.hide-sidebar #main{
  flex:1 1 auto;
  min-width:0;
}
/* 复习 / 错题专练：收起侧栏时卡片加宽（覆盖到原侧栏位置） */
body.hide-sidebar .card,
body.hide-sidebar #main .card{
  width:min(820px,100%);
}
body.hide-sidebar .stage,
body.hide-sidebar #main .stage{
  padding:8px 6px;
}
/* ===== 复习 / 错题专练：语言显示控制面板（共用） ===== */
.display-panel{background:var(--panel);border-bottom:1px solid var(--line);padding:0;flex:0 0 auto}
.display-panel-header{padding:8px 14px;cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--txt)}
.display-panel-header:hover{background:var(--panel2)}
.display-panel-body{padding:10px 14px;display:flex;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);background:var(--bg2)}
/* hidden 属性必须生效：上面这条作者样式的 display:flex 会覆盖 UA 的
   [hidden]{display:none}，导致「显示设置」面板永远展开（手机端占 384px）。 */
.display-panel-body[hidden]{display:none}
.display-section{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px}
.display-section .sec-label{color:var(--muted);font-size:11px;min-width:auto;margin-right:2px}
.lang-toggle,.lang-radio{display:flex;align-items:center;gap:4px;padding:4px 9px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;cursor:pointer;margin:0}
.lang-toggle input,.lang-radio input{margin:0}
body.hide-lang-en .lang-en, body.hide-lang-bm .lang-bm, body.hide-lang-zh .lang-zh{display:none !important}
body.hide-examples .examples-row{display:none !important}
/* 播放器小屏下 nav 变抽屉，hide-sidebar 时直接关闭抽屉 */
@media (max-width:820px){
  body.hide-sidebar .layout > nav,
  body.hide-sidebar #nav{
    transform:translateX(-105%);
    width:84%;
    flex-basis:auto;
  }
}