/* ui-kit/components.css — 组件层样式（第3层之上）。只用语义/组件令牌，零写死色 → 换肤即生效。
   配套 ui-kit/components.js 的工厂函数。命名空间 wc-*。 */

/* ============ 按钮 ============ */
.wc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--wc-btn-h); padding:0 18px; border-radius:var(--wc-r);
  border:1px solid var(--wc-color-border); background:var(--wc-color-surface); color:var(--wc-color-text);
  cursor:pointer; font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  transition:filter var(--wc-dur) var(--wc-ease), transform var(--wc-dur) var(--wc-ease); }
.wc-btn:active{ transform:translateY(1px); }
.wc-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.wc-btn--primary{ background:var(--wc-color-primary); color:var(--wc-color-on-primary); border-color:transparent; }
.wc-btn--brand{ background:var(--wc-g-brand); color:var(--wc-color-on-primary); border-color:transparent; }
.wc-btn--soft{ background:var(--wc-color-surface-2); color:var(--wc-color-primary); border-color:transparent; }
.wc-btn--ghost{ background:transparent; border-color:transparent; color:var(--wc-color-sub); }
.wc-btn--danger{ background:var(--wc-color-bad); color:var(--wc-white); border-color:transparent; }
.wc-btn--sm{ height:34px; padding:0 12px; font-size:13px; border-radius:var(--wc-r-sm); }
.wc-btn--lg{ height:50px; padding:0 24px; font-size:15.5px; }
.wc-btn--block{ display:flex; width:100%; }
.wc-btn--pill{ border-radius:var(--wc-r-pill); }
.wc-btn .wc-btn__ic{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }
@media(hover:hover){ .wc-btn:hover:not([disabled]){ filter:brightness(1.05); } }

/* ============ 通用标记 ============ */
.wc-mark{ display:inline-block; width:10px; height:10px; border-radius:999px; background:currentColor; opacity:.92; }
.wc-mark--xs{ width:8px; height:8px; }
.wc-mark--sm{ width:10px; height:10px; }
.wc-mark--md{ width:12px; height:12px; }
.wc-mark--lg{ width:18px; height:18px; border-radius:6px; }
.wc-mark--muted{ opacity:.4; }
.wc-mark--strong{ opacity:1; }

/* ============ 卡片 ============ */
.wc-card{ background:var(--wc-color-surface); border:1px solid var(--wc-color-border);
  border-radius:var(--wc-r-lg); padding:var(--wc-card-pad); box-shadow:var(--wc-sh); }
.wc-card--pad0{ padding:0; overflow:hidden; }
.wc-card--lift{ box-shadow:var(--wc-sh-lg); }
.wc-card__hd{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wc-card__hd .t{ font-weight:800; font-size:16px; }
.wc-card__hd .s{ color:var(--wc-color-sub); font-size:12.5px; }
.wc-card__hd .sp{ flex:1; }

/* ============ Hero / 渐变面 ============ */
.wc-hero{ background:var(--wc-g-brand); color:var(--wc-color-on-primary);
  border-radius:var(--wc-r-lg); padding:22px; position:relative; overflow:hidden; }
.wc-hero h3{ color:var(--wc-color-on-primary); }
.wc-hero .wc-hero__sub{ opacity:.9; font-size:13.5px; }

/* ============ chip / tag / badge ============ */
.wc-chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--wc-r-pill);
  background:var(--wc-color-surface-2); color:var(--wc-color-sub); font-size:12.5px; font-weight:600;
  border:1px solid transparent; cursor:default; }
.wc-chip--click{ cursor:pointer; transition:background var(--wc-dur); }
@media(hover:hover){ .wc-chip--click:hover{ background:var(--wc-color-border); } }
.wc-chip--on{ background:var(--wc-blue-50); color:var(--wc-color-primary); border-color:var(--wc-blue-100); }
.wc-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:var(--wc-r-sm);
  font-size:11.5px; font-weight:700; line-height:1.5; }
.wc-tag--info{ background:var(--wc-blue-50); color:var(--wc-color-primary); }
.wc-tag--good{ background:color-mix(in srgb,var(--wc-color-good) 15%,transparent); color:var(--wc-color-good); }
.wc-tag--warn{ background:color-mix(in srgb,var(--wc-color-warn) 18%,transparent); color:var(--wc-color-warn); }
.wc-tag--bad{ background:color-mix(in srgb,var(--wc-color-bad) 15%,transparent); color:var(--wc-color-bad); }
.wc-tag--muted{ background:var(--wc-color-surface-2); color:var(--wc-color-sub); }
/* 难度星级（查词/词单卡用） */
.wc-stars{ color:var(--wc-color-warn); letter-spacing:1px; font-size:13px; }
.wc-stars .off{ color:var(--wc-color-border); }

/* ============ 表单 field ============ */
.wc-field{ display:block; }
.wc-field__lab{ display:block; font-size:12.5px; font-weight:700; color:var(--wc-color-sub); margin-bottom:6px; }
.wc-input{ width:100%; height:var(--wc-field-h); padding:0 14px; border-radius:var(--wc-r);
  border:1px solid var(--wc-color-border); background:var(--wc-color-surface); color:var(--wc-color-text);
  font-size:14px; transition:border-color var(--wc-dur), box-shadow var(--wc-dur); outline:none; }
.wc-input:focus{ border-color:var(--wc-color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--wc-color-primary) 18%,transparent); }
.wc-input::placeholder{ color:var(--wc-color-faint); }
.wc-field__hint{ font-size:11.5px; color:var(--wc-color-faint); margin-top:5px; }
/* 大搜索条（查词主卡） */
.wc-search{ display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; border-radius:var(--wc-r-pill);
  border:1px solid var(--wc-color-border); background:var(--wc-color-surface); box-shadow:var(--wc-sh); }
.wc-search input{ flex:1; border:none; background:none; outline:none; font-size:16px; color:var(--wc-color-text); }
.wc-search .ic{ font-size:20px; color:var(--wc-color-faint); }

/* ============ segmented 分段控件 ============ */
.wc-seg{ display:inline-flex; padding:3px; gap:2px; border-radius:var(--wc-r-pill);
  background:var(--wc-color-surface-2); }
.wc-seg__o{ border:none; background:none; cursor:pointer; padding:7px 16px; border-radius:var(--wc-r-pill);
  font-size:13px; font-weight:700; color:var(--wc-color-sub); transition:all var(--wc-dur) var(--wc-ease); }
.wc-seg__o.on{ background:var(--wc-color-surface); color:var(--wc-color-primary); box-shadow:var(--wc-sh); }

/* ============ switch 开关 ============ */
.wc-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.wc-switch__t{ width:46px; height:27px; border-radius:var(--wc-r-pill); background:var(--wc-color-border);
  position:relative; transition:background var(--wc-dur) var(--wc-ease); flex:none; }
.wc-switch__t::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:var(--wc-white); box-shadow:var(--wc-sh); transition:transform var(--wc-dur) var(--wc-ease); }
.wc-switch.on .wc-switch__t{ background:var(--wc-color-primary); }
.wc-switch.on .wc-switch__t::after{ transform:translateX(19px); }
.wc-switch__lab{ font-size:14px; }

/* ============ list 列表 ============ */
.wc-list{ background:var(--wc-color-surface); border:1px solid var(--wc-color-border);
  border-radius:var(--wc-r-lg); overflow:hidden; }
.wc-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--wc-color-border);
  background:none; width:100%; text-align:left; border-left:none; border-right:none; border-top:none; cursor:default; }
.wc-row:last-child{ border-bottom:none; }
.wc-row--click{ cursor:pointer; transition:background var(--wc-dur); }
@media(hover:hover){ .wc-row--click:hover{ background:var(--wc-color-surface-2); } }
.wc-row__ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--wc-color-surface-2); flex:none; }
.wc-row__bd{ flex:1; min-width:0; }
.wc-row__t{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc-row__s{ color:var(--wc-color-sub); font-size:12.5px; }
.wc-row__r{ color:var(--wc-color-faint); font-size:13px; flex:none; }

/* ============ ring 进度环（SVG） ============ */
.wc-ring{ display:inline-grid; place-items:center; position:relative; }
.wc-ring svg{ transform:rotate(-90deg); display:block; }
.wc-ring .trk{ stroke:var(--wc-color-border); }
.wc-ring .bar{ stroke:url(#wcgrad); stroke-linecap:round; transition:stroke-dashoffset .5s var(--wc-ease); }
.wc-ring__lab{ position:absolute; text-align:center; }
.wc-ring__lab b{ font-size:18px; font-weight:800; } .wc-ring__lab small{ font-size:10px; color:var(--wc-color-sub); }

/* ============ 进度条 ============ */
.wc-bar{ height:9px; border-radius:var(--wc-r-pill); background:var(--wc-color-surface-2); overflow:hidden; }
.wc-bar__i{ height:100%; border-radius:var(--wc-r-pill); background:var(--wc-g-brand); transition:width .5s var(--wc-ease); }

/* ============ stat 数据格 ============ */
.wc-stat{ background:var(--wc-color-surface); border:1px solid var(--wc-color-border);
  border-radius:var(--wc-r); padding:14px 16px; }
.wc-stat b{ font-size:24px; font-weight:800; letter-spacing:-.5px; display:block; line-height:1.2; }
.wc-stat small{ color:var(--wc-color-sub); font-size:12px; }

/* ============ skeleton 骨架屏 ============ */
.wc-sk{ background:linear-gradient(90deg,var(--wc-color-surface-2) 25%,var(--wc-color-border) 37%,var(--wc-color-surface-2) 63%);
  background-size:400% 100%; border-radius:var(--wc-r-sm); animation:wc-sk 1.3s ease infinite; }
@keyframes wc-sk{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce){ .wc-sk{ animation:none; } }

/* ============ empty 空态 ============ */
.wc-empty{ text-align:center; padding:40px 20px; color:var(--wc-color-sub); }
.wc-empty__ic{ display:grid; place-items:center; margin:0 auto; width:44px; height:44px; opacity:.5; }
.wc-empty__t{ font-weight:700; margin:10px 0 4px; color:var(--wc-color-text); }
.wc-empty__s{ font-size:13px; }

/* ============ avatar ============ */
.wc-ava{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  background:var(--wc-g-brand); color:var(--wc-color-on-primary); font-weight:800; flex:none; }

/* ============ toast 提示（统一） ============ */
.wc-toasts{ position:fixed; left:50%; bottom:calc(var(--wc-nav-h) + 16px); transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
@media (min-width:1024px){ .wc-toasts{ bottom:24px; left:calc(50% + var(--wc-sidebar-w)/2); } }
.wc-toast{ background:var(--wc-color-text); color:var(--wc-color-bg); padding:11px 18px; border-radius:var(--wc-r-pill);
  font-size:13.5px; font-weight:600; box-shadow:var(--wc-sh-lg); max-width:88vw;
  animation:wc-toast-in var(--wc-dur) var(--wc-ease); }
.wc-toast--good{ background:var(--wc-color-good); color:var(--wc-white); }
.wc-toast--bad{ background:var(--wc-color-bad); color:var(--wc-white); }
@keyframes wc-toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ============ sheet 模态（底部/居中） ============ */
.wc-sheet__mask{ position:fixed; inset:0; background:rgba(20,28,55,.42); z-index:70;
  display:flex; align-items:flex-end; justify-content:center; animation:wc-fade var(--wc-dur) var(--wc-ease); }
@media (min-width:1024px){ .wc-sheet__mask{ align-items:center; } }
.wc-sheet{ background:var(--wc-color-surface); width:100%; max-width:520px; border-radius:var(--wc-r-lg) var(--wc-r-lg) 0 0;
  padding:20px; max-height:86vh; overflow:auto; animation:wc-sheet-in .24s var(--wc-ease); }
@media (min-width:1024px){ .wc-sheet{ border-radius:var(--wc-r-lg); } }
.wc-sheet__bar{ width:38px; height:4px; border-radius:99px; background:var(--wc-color-border);
  margin:0 auto 14px; }
.wc-sheet__hd{ display:flex; align-items:center; margin-bottom:12px; }
.wc-sheet__hd .t{ font-weight:800; font-size:17px; flex:1; }
@keyframes wc-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes wc-sheet-in{ from{ transform:translateY(16px); opacity:.6; } to{ transform:none; opacity:1; } }

/* ============ 成就解锁庆祝 ============ */
.wc-celebr{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(20,28,55,.5); transition:opacity .26s; animation:wc-fade var(--wc-dur) var(--wc-ease); }
.wc-celebr__card{ position:relative; background:var(--wc-color-surface); border:1px solid var(--wc-color-border);
  border-radius:var(--wc-r-lg); box-shadow:var(--wc-sh); padding:26px 34px; text-align:center; overflow:hidden;
  animation:wc-celebr-pop .5s cubic-bezier(.18,.9,.3,1.3); }
.wc-celebr__cap{ font-size:12.5px; font-weight:800; color:var(--wc-color-primary); letter-spacing:1px; }
.wc-celebr__badge{ display:grid; place-items:center; width:62px; height:62px; margin:10px auto 6px; animation:wc-celebr-badge .6s var(--wc-ease); color:var(--wc-color-primary); }
.wc-celebr__name{ font-size:19px; font-weight:800; color:var(--wc-color-text); }
.wc-celebr__sub{ font-size:13px; color:var(--wc-color-sub); margin-top:4px; }
.wc-celebr__sparks{ position:absolute; inset:0; pointer-events:none; }
.wc-celebr__spark{ position:absolute; left:50%; top:46%; font-size:18px; color:var(--wc-color-primary);
  opacity:0; animation:wc-celebr-spark 1s ease-out forwards; animation-delay:calc(var(--i) * .055s);
  transform:rotate(calc(var(--i) * 45deg)) translateY(0); }
@keyframes wc-celebr-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes wc-celebr-badge{ 0%{ transform:scale(0) rotate(-30deg); } 60%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:scale(1) rotate(0); } }
@keyframes wc-celebr-spark{ 0%{ opacity:0; transform:rotate(calc(var(--i) * 45deg)) translateY(0) scale(.4); }
  35%{ opacity:1; } 100%{ opacity:0; transform:rotate(calc(var(--i) * 45deg)) translateY(-86px) scale(1); } }
@media (prefers-reduced-motion:reduce){ .wc-celebr__card,.wc-celebr__badge,.wc-celebr__spark{ animation:none; } .wc-celebr__spark{ opacity:0; } }

/* ============ section 小标题 ============ */
.wc-sechd{ display:flex; align-items:center; gap:8px; margin:22px 2px 10px; }
.wc-sechd__t{ font-weight:800; font-size:15px; } .wc-sechd .sp{ flex:1; }
.wc-sechd__more{ font-size:12.5px; color:var(--wc-color-primary); cursor:pointer; }

/* ============ 顶部导航条 navbar（唯一导航 · 桌面悬停下拉 · 触屏点击进入） ============ */
.wc-nav2{ position:sticky; top:0; z-index:50; background:var(--wc-color-surface);
  border-bottom:1px solid var(--wc-color-border); }
.wc-nav2__bar{ display:flex; align-items:center; gap:4px; height:56px; padding:0 14px;
  max-width:var(--wc-content-max); margin:0 auto; }
.wc-nav2__brand{ border:none; background:none; cursor:pointer; font-weight:800; font-size:16px;
  color:var(--wc-color-primary); margin-right:6px; white-space:nowrap; }
/* 桌面：overflow visible 让二级菜单不被裁切；仅触屏才横向滚动 */
.wc-nav2__items{ display:flex; gap:2px; flex:1; min-width:0; }
@media (hover:none){ .wc-nav2__items{ overflow-x:auto; scrollbar-width:none; } }
.wc-nav2__items::-webkit-scrollbar{ display:none; }
.wc-nav2__it{ position:relative; flex:none; }
.wc-nav2__btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:none; background:none;
  cursor:pointer; padding:8px 13px; border-radius:var(--wc-r-pill); font-size:14px; font-weight:600;
  color:var(--wc-color-sub); transition:background var(--wc-dur), color var(--wc-dur); }
.wc-nav2__bic{ display:inline-flex; align-items:center; justify-content:center; width:10px; color:var(--wc-color-primary); }
.wc-nav2__car{ font-size:11px; opacity:.5; }
@media(hover:hover){ .wc-nav2__btn:hover{ color:var(--wc-color-text); background:var(--wc-color-surface-2); } }
.wc-nav2__btn.on{ color:var(--wc-color-primary); background:var(--wc-color-surface-2); }
.wc-nav2__right{ flex:none; margin-left:6px; }
/* 二级下拉（桌面悬停展开） */
.wc-nav2__menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:232px; z-index:60;
  background:var(--wc-color-surface); border:1px solid var(--wc-color-border); border-radius:var(--wc-r-lg);
  box-shadow:var(--wc-sh-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--wc-dur) var(--wc-ease), transform var(--wc-dur) var(--wc-ease), visibility var(--wc-dur); }
@media(hover:hover){ .wc-nav2__it:hover .wc-nav2__menu{ opacity:1; visibility:visible; transform:none; } }
.wc-nav2__it.open .wc-nav2__menu{ opacity:1; visibility:visible; transform:none; }   /* 触屏点击展开 */
.wc-nav2__link{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:none; background:none;
  cursor:pointer; padding:9px 11px; border-radius:var(--wc-r); transition:background var(--wc-dur); }
@media(hover:hover){ .wc-nav2__link:hover{ background:var(--wc-color-surface-2); } }
.wc-nav2__lic{ display:inline-flex; align-items:center; justify-content:center; width:24px; color:var(--wc-color-faint); flex:none; }
.wc-nav2__link b{ font-size:13.5px; font-weight:700; color:var(--wc-color-text); display:block; }
.wc-nav2__link small{ font-size:11.5px; color:var(--wc-color-sub); }

/* ============ 换肤面板 skin ============ */
.wc-skin__lab{ font-size:12.5px; font-weight:700; color:var(--wc-color-sub); margin:0 0 8px; }
.wc-skin__pal{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.wc-skin__cell{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  border:none; background:none; padding:0; color:var(--wc-color-sub); font-size:12px; }
.wc-skin__sw{ width:38px; height:38px; border-radius:50%; display:block;
  box-shadow:var(--wc-sh); border:3px solid transparent; transition:border-color var(--wc-dur), transform var(--wc-dur); }
.wc-skin__cell.on .wc-skin__sw{ border-color:var(--wc-color-primary); transform:scale(1.06); }
.wc-skin__cell.on{ color:var(--wc-color-primary); font-weight:700; }
.wc-skin__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.wc-skin__row .wc-seg{ flex-wrap:wrap; }

/* ============ 网格辅助 ============ */
.wc-grid{ display:grid; gap:var(--wc-gap); }
.wc-grid--2{ grid-template-columns:repeat(2,1fr); }
.wc-grid--3{ grid-template-columns:repeat(3,1fr); }
.wc-grid--auto{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }