/* 全站公共：外壳、顶栏、底部标签栏、页面容器、通用部件。颜色/间距/圆角只用 ZhaoUI 的 --zh-* 变量。
   单一强调色：橘（--zh-color-primary）。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--zh-bg-subtle); color: var(--zh-text); font-family: var(--zh-font-sans); min-height: 100dvh; -webkit-text-size-adjust: 100%; }
/* 配色收敛（柔和杏橘与中性底色）：暖白底、白卡片加细边框、一个橘色强调（ZhaoUI.setBrand('#eeb68d')）、中性灰黑文字。
   魔方蓝绿红黄只留在 logo 图本身；词卡中/韩/英三行有语义色（取自原站 layout.php 的 --c-zh/--c-kr/--c-en）；答对绿、答错红是功能状态色。 */
:root { --zh-bg-subtle: #f8f9fb; --zh-border: #e7e9ed; --zh-border-strong: #d3d7df; --zh-text: #1c1c1e; --zh-text-secondary: #55555c; --zh-text-tertiary: #72727b;
  --brand-ink: #30343b; --w-zh: #966200; --w-kr: #05735a; --w-en: #2563b8; }
:root[data-mode="dark"] { --zh-bg: #0e0e10; --zh-bg-subtle: #121214; --zh-bg-elevated: #1a1a1d; --zh-border: #2b2b30; --zh-border-strong: #3a3a41; --zh-text: #f2f2f3; --zh-text-secondary: #b9b9c0; --zh-text-tertiary: #8d8d96;
  --brand-ink: #fbe6cc; --w-zh: #e8c84a; --w-kr: #10b98b; --w-en: #7ba7f5; }
body { --sec: var(--zh-color-primary); }
a { color: var(--zh-color-primary-text); }
:focus-visible { outline: 2px solid var(--zh-color-primary); outline-offset: 2px; }
.hide-sm {}
@media (max-width: 767px) { .hide-sm { display: none !important; } }

/* 顶栏：半透明 + 模糊，滚动时内容从下面透出来 */
.app-header { position: sticky; top: 0; z-index: var(--zh-z-sticky); background: color-mix(in srgb, var(--zh-bg-elevated) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--zh-border); }
.app-header-in { display: flex; align-items: center; gap: var(--zh-space-5); max-width: none; margin: 0; padding: 0 clamp(16px, 3vw, 56px); min-height: 60px; }
.front .app-header { padding-top: env(safe-area-inset-top); }
.front .app-header-in { padding-left: max(clamp(16px, 3vw, 56px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 3vw, 56px), env(safe-area-inset-right)); }
.brand { display: inline-flex; align-items: center; gap: var(--zh-space-3); text-decoration: none; color: var(--zh-text); white-space: nowrap; }
.brand .logo-mark { flex: none; width: 38px; height: 38px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-size: 1.05rem; letter-spacing: .02em; color: var(--brand-ink); }
.brand-text small { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--zh-text-tertiary); margin-top: 2px; }
.main-nav { display: flex; gap: var(--zh-space-1); flex: 1; }
.main-nav a { position: relative; display: inline-flex; align-items: center; gap: var(--zh-space-2); padding: var(--zh-space-2) var(--zh-space-3); border-radius: 999px; color: var(--zh-text-secondary); text-decoration: none; white-space: nowrap; font-weight: 500; transition: background var(--zh-dur-fast) var(--zh-ease), color var(--zh-dur-fast) var(--zh-ease); }
.main-nav a i { color: var(--zh-text-tertiary); }
.main-nav a:hover { background: var(--zh-bg-subtle); color: var(--zh-text); }
.main-nav a[aria-current="page"] { background: var(--zh-color-primary-subtle); color: var(--zh-color-primary-text); font-weight: 600; }
.main-nav a[aria-current="page"] i { color: var(--zh-color-primary-text); }
.header-tools { display: flex; align-items: center; gap: var(--zh-space-2); margin-left: auto; }
.icon-btn { padding-inline: var(--zh-space-2); }
.user-btn { display: inline-flex; align-items: center; gap: var(--zh-space-2); border: 1px solid var(--zh-border); background: var(--zh-bg-elevated); color: var(--zh-text); border-radius: 999px; padding: 3px var(--zh-space-3) 3px 3px; font: inherit; cursor: pointer; }
.user-btn:hover { border-color: var(--zh-border-strong); }
.user-name { display: inline-flex; align-items: center; max-width: 9.5em; min-width: 0; white-space: nowrap; font-size: .875rem; }
.user-name-text { overflow: hidden; text-overflow: ellipsis; }
.dingtalk-badge { display: inline-block; flex: none; width: 16px; height: 16px; margin-left: 4px; vertical-align: -.15em; color: #0089ff; }

/* 页面容器 */
.page { max-width: none; margin: 0; padding: var(--zh-space-6) clamp(16px, 3vw, 56px) var(--zh-space-12); }
.front .page { padding-left: max(clamp(16px, 3vw, 56px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 3vw, 56px), env(safe-area-inset-right)); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--zh-space-4); flex-wrap: wrap; margin-bottom: var(--zh-space-5); }
.page-head h1, .page-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.01em; }
.page-head p { margin: var(--zh-space-1) 0 0; color: var(--zh-text-secondary); }
.page-title { display: flex; align-items: baseline; gap: var(--zh-space-3); flex-wrap: wrap; margin-bottom: var(--zh-space-4); }
.page-title small { font-size: .85rem; font-weight: 400; color: var(--zh-text-tertiary); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--zh-space-2); font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--zh-color-primary-text); text-transform: uppercase; }
.zh-alert { margin-bottom: var(--zh-space-3); }
.muted { color: var(--zh-text-tertiary); }
.panel { background: var(--zh-bg-elevated); border: 1px solid var(--zh-border); border-radius: var(--zh-radius-lg); padding: var(--zh-space-5); box-shadow: var(--zh-shadow-sm); }
.panel + .panel { margin-top: var(--zh-space-4); }
.sect-h { display: flex; align-items: center; gap: var(--zh-space-2); font-size: 1.05rem; margin: 0 0 var(--zh-space-3); }
.sect-h small { font-weight: 400; color: var(--zh-text-tertiary); font-size: .85rem; }
.stack { display: flex; flex-direction: column; gap: var(--zh-space-3); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag-line { display: flex; flex-wrap: wrap; gap: var(--zh-space-2); align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--zh-space-2); align-items: center; margin-bottom: var(--zh-space-4); }
.toolbar .zh-input { max-width: 340px; }
.toolbar .grow { flex: 1; }
.pills { display: flex; flex-wrap: wrap; gap: var(--zh-space-2); }
.pill { border: 1px solid var(--zh-border); background: var(--zh-bg-elevated); color: var(--zh-text-secondary); border-radius: 999px; padding: var(--zh-space-1) var(--zh-space-3); cursor: pointer; font: inherit; font-size: .875rem; text-decoration: none; display: inline-block; line-height: 1.7; transition: border-color var(--zh-dur-fast) var(--zh-ease), background var(--zh-dur-fast) var(--zh-ease); }
.pill:hover { border-color: var(--zh-border-strong); color: var(--zh-text); }
.pill.active, .pill[aria-pressed="true"] { background: var(--zh-color-primary); border-color: var(--zh-color-primary); color: var(--zh-on-primary); }
.pill-scroll { display: flex; gap: var(--zh-space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pill-scroll .pill { flex: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--zh-space-3); margin-top: var(--zh-space-5); flex-wrap: wrap; }
.pager .info { color: var(--zh-text-secondary); font-size: .875rem; }
.zh-empty { padding: var(--zh-space-10, 3rem) var(--zh-space-4); text-align: center; color: var(--zh-text-tertiary); }
.zh-result { text-align: center; padding: var(--zh-space-12) var(--zh-space-4); }
.zh-result-code { font-size: 4rem; font-weight: 700; background: var(--zh-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--zh-color-primary-subtle); color: var(--zh-color-primary-text); flex: none; }

/* 手机：顶部抽屉提供完整导航，底部标签栏保留常用入口。 */
.tabbar { display: none; }
.front-menu-btn { display: none; }
.front .front-nav-drawer { inset: 0 auto 0 0; width: min(86vw, 320px); height: 100dvh; max-height: 100dvh; max-width: 100vw; margin: 0; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; text-align: left; }
.front-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.front-drawer-user { display: flex; align-items: center; gap: 10px; padding: 12px 0 20px; border-bottom: 1px solid var(--zh-border); margin-bottom: 12px; overflow-wrap: anywhere; }
.front-drawer-user b { min-width: 0; }
.front-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.front-drawer-links :is(a, button) { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 12px; border-radius: var(--zh-radius-md); color: var(--zh-text-secondary); text-decoration: none; font: inherit; }
.front-drawer-links a:hover, .front-drawer-links a[aria-current="page"] { background: var(--zh-color-primary-subtle); color: var(--zh-color-primary-text); }
@media (max-width: 767px) {
  .front-menu-btn { display: inline-flex; flex: none; }
  .app-header-in { padding: 0 var(--zh-space-4); min-height: 54px; gap: var(--zh-space-3); }
  .main-nav, .user-name, .user-btn > i, .user-btn > svg, .header-tools .tool-link { display: none; }
  .front .brand { min-width: 0; flex: 1; gap: 8px; min-height: 44px; }
  .front .brand-text { min-width: 0; }
  .front .brand-text :is(b, small) { overflow: hidden; text-overflow: ellipsis; }
  .front .header-tools { flex: none; gap: 4px; }
  .user-btn { padding: 2px; }
  .page { padding: var(--zh-space-4) var(--zh-space-4) calc(76px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--zh-z-sticky); background: color-mix(in srgb, var(--zh-bg-elevated) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--zh-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: var(--zh-radius-md); color: var(--zh-text-tertiary); text-decoration: none; font-size: .68rem; min-height: 44px; justify-content: center; }
  .tabbar a[aria-current="page"] { color: var(--zh-color-primary-text); font-weight: 600; }
  .tabbar a[aria-current="page"] i { color: var(--zh-color-primary-text); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 跨板块共用 */
.head-title { margin: var(--zh-space-1) 0 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.01em; }
.zh-btn-group .zh-btn { display: inline-flex; align-items: center; gap: var(--zh-space-2); text-decoration: none; }
@media (max-width: 767px) { .zh-btn-group .zh-btn span { display: none; } .zh-btn-group .zh-btn.is-active span { display: inline; } }
.search-box { position: relative; flex: 1; max-width: 460px; margin-bottom: var(--zh-space-4); }
.toolbar .search-box { margin-bottom: 0; }
.search-box > svg, .search-box > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--zh-text-tertiary); pointer-events: none; }
.search-box .zh-input { width: 100%; padding-left: 42px; max-width: none; }
.mv-thumb { aspect-ratio: 16 / 9; border-radius: var(--zh-radius-md); background: var(--zh-color-primary-subtle); overflow: hidden; display: block; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-t { display: flex; flex-direction: column; gap: 2px; font-weight: 600; line-height: 1.4; font-size: .9rem; overflow-wrap: anywhere; }
.mv-t small { font-weight: 400; }
.side-title { font-size: .75rem; letter-spacing: .1em; color: var(--zh-text-tertiary); }

/* 进度环与进度条：亮色下用低饱和杏棕（对白底 3:1 以上），暗色沿用主色 */
:root { --orange-graphic: #ac7048; }
:root[data-mode="dark"] { --orange-graphic: var(--zh-color-primary); }
.zh-ring, .zh-progress { --zh-progress-color: var(--orange-graphic); }

/* 全站面包屑分隔符统一为 ">"（含后台） */
.zh-crumb li + li::before, .adm-crumb .zh-crumb li + li::before { content: ">"; margin-right: 8px; color: var(--zh-text-tertiary); }
/* 平板宽度：导航名变长后顶栏会放不下，收起用户名与品牌副标题 */
@media (min-width: 768px) and (max-width: 1000px) { .user-name, .user-btn > svg, .brand-text small { display: none; } .app-header-in { gap: var(--zh-space-3); } .main-nav a { padding-inline: var(--zh-space-2); } }

/* Touch controls and text inputs also apply to tablets and embedded mobile browsers. */
@media (pointer: coarse), (max-width: 1024px) {
  :is(.front, .bare) :is(.zh-btn, .pill, .user-btn, .main-nav a, .brand, .zh-check, .zh-menu a) { min-height: 44px; }
  :is(.front, .bare) .pill { display: inline-flex; align-items: center; justify-content: center; }
  :is(.front, .bare) :is(.icon-btn, .user-btn) { min-width: 44px; justify-content: center; }
  :is(.front, .bare) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; min-height: 44px; }
  .front .zh-btn-group .zh-btn { min-width: 44px; }
  .front :is(.lesson-side a, .kn-side a) { min-height: 44px; }
  .bare .auth-card .alt a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .bare .auth-panel { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}
@media (min-width: 768px) and (max-width: 1000px) { .front .header-tools .tool-link { display: none; } }
@media (max-width: 767px) {
  .front .app-header-in { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 8px; }
  .front .page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .front .tabbar { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  .front .zh-menu { max-width: calc(100vw - 24px); }
}
.search-box, .toolbar .grow { min-width: 0; }

/* Four learning modules share the header and six mobile tabs. */
@media (min-width:768px) and (max-width:1180px){.front .user-name,.front .user-btn>svg,.front .brand-text small,.front .header-tools .tool-link{display:none}.front .app-header-in{gap:var(--zh-space-3)}.front .main-nav a{padding-inline:var(--zh-space-2)}}
@media (min-width:768px) and (max-width:860px){.front .app-header-in{gap:8px}.front .main-nav a{gap:6px;padding-inline:6px}.front .header-tools{gap:4px}}
@media (max-width:767px){.front .tabbar{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* Short, finite feedback; no scroll listeners or permanently promoted layers. */
:root { --zh-motion-fast: 140ms; --zh-motion-enter: 260ms; --zh-motion-ease: cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: no-preference) {
  :is(.zh-btn, .pill, .user-btn, .sys-tab, .dr-link, .zh-skill-tag, .qopt) {
    transition: background-color var(--zh-motion-fast), border-color var(--zh-motion-fast), color var(--zh-motion-fast), translate var(--zh-motion-fast) var(--zh-motion-ease);
  }
  :is(.zh-btn, .pill, .user-btn, .qopt):not(:disabled):active { translate: 0 1px; }
  .zh-skill-card { transition: translate 180ms var(--zh-motion-ease), border-color 180ms; }
  :is(.word-grid, .zh-skills-grid) > :nth-child(-n+6),
  .kn-group:first-of-type .lcard:nth-child(-n+6),
  .vgrid:not(.vgrid-row) > .vcard:nth-child(-n+6) {
    animation: zh-card-enter var(--zh-motion-enter) var(--zh-motion-ease) backwards;
  }
  :is(.word-grid, .zh-skills-grid, .kn-group:first-of-type .kn-grid, .vgrid:not(.vgrid-row)) > :nth-child(2) { animation-delay: 20ms; }
  :is(.word-grid, .zh-skills-grid, .kn-group:first-of-type .kn-grid, .vgrid:not(.vgrid-row)) > :nth-child(3) { animation-delay: 40ms; }
  :is(.word-grid, .zh-skills-grid, .kn-group:first-of-type .kn-grid, .vgrid:not(.vgrid-row)) > :nth-child(n+4):nth-child(-n+6) { animation-delay: 60ms; }
  .qexp:not([hidden]) { animation: zh-answer-enter 180ms var(--zh-motion-ease); }
  .adm-main > :is(.adm-ph, .zh-module-tabs), .zh-knowledge-overview > section {
    animation: zh-card-enter var(--zh-motion-enter) var(--zh-motion-ease);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .zh-skill-card:hover { translate: 0 -2px; }
  :is(.sys-tab, .dr-link, .zh-skill-tag):hover { background-color: var(--zh-color-primary-subtle); }
}
@keyframes zh-card-enter { from { translate: 0 6px; } to { translate: 0 0; } }
@keyframes zh-answer-enter { from { opacity: .6; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
@media (hover: none) {
  :is(.lcard, .vcard):hover, .vcard:hover :is(.vthumb img, .vplay) { transform: none; }
}
/* Prompt and command surfaces keep their contrast in every theme. */
:root { --zh-terminal-bg: #17212d; --zh-terminal-fg: #f1f5f9; --zh-terminal-border: #526175; }
:root body :is(.lesson .lb, .zh-skill-detail) pre,
:root body pre.zh-code,
:root body :is(#courseQuestionPrompt, #skillPrompt, #installCommand) {
  box-sizing: border-box; min-width: 0; max-width: 100%;
  padding: 20px; border: 1px solid var(--zh-terminal-border); border-radius: 12px;
  background: var(--zh-terminal-bg); color: var(--zh-terminal-fg);
  font-family: var(--zh-font-mono, monospace); font-size: .95rem; line-height: 1.85;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; overflow: auto;
  tab-size: 2; color-scheme: dark;
}
:root body :is(.lesson .lb, .zh-skill-detail) pre code {
  padding: 0; background: transparent; color: inherit; font: inherit;
  white-space: inherit; overflow-wrap: inherit;
}
:root body .lesson .lb .lesson-copy-block {
  padding: 12px; border: 1px solid var(--zh-terminal-border); border-radius: 14px;
  background: var(--zh-terminal-bg); color: var(--zh-terminal-fg);
}
:root body .lesson .lb .lesson-copy-block pre { margin: 0; border: 0; padding: 12px; }
:root body .zh-skill-detail pre.zh-code { padding-top: 66px !important; }
:root body .lesson-copy-bar [role="status"] { color: #cbd5e1; }
:root body :is(.lesson-copy-button, .zh-skill-detail .zh-code-copy) {
  background: #30445b; color: #fff; border: 1px solid #8295ad; min-height: 44px;
}
:root body :is(.lesson-copy-button, .zh-skill-detail .zh-code-copy):hover { background: #405976; }
:root body :is(.lesson-copy-button, .zh-skill-detail .zh-code-copy, #courseQuestionPrompt, #skillPrompt, #installCommand):focus-visible {
  outline: 3px solid #8ed8ff; outline-offset: 3px;
}
:root body :is(pre.zh-code, #courseQuestionPrompt, #skillPrompt, #installCommand)::selection,
:root body pre.zh-code code::selection { background: #b9e5ff; color: #102030; }
/* Solid mobile chrome avoids repainting the scrolling content through blur. */
@media (max-width: 767px), (prefers-reduced-transparency: reduce) {
  :is(.app-header, .tabbar) { background: var(--zh-bg-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is(.lcard, .vcard):hover, .vcard:hover :is(.vthumb img, .vplay) { transform: none; }
}

@media (min-width:768px) and (max-width:860px){.front .main-nav a>svg{display:none}}