/* ═══════════════════════════════════════════════
   遁一 · TDesign 设计体系适配层
   · ① TDesign Mobile 设计令牌（圆角/间距/字阶/动效）
   · ② TDesign 组件形态（Picker / Cell / Tabs / Input / Button / Navbar / TabBar）
   · ③ 两套官方皮肤：晨光蓝（浅）/ 夜幕（深）
   · 二次元皮肤（cute=1）只换配色与圆角，不破坏规范
   ═══════════════════════════════════════════════ */

/* ───────── ① 设计令牌 ───────── */
:root {
  --td-radius-small: 3px;
  --td-radius-default: 6px;
  --td-radius-large: 9px;
  --td-radius-xl: 12px;
  --td-radius-xxl: 16px;
  --td-radius-round: 999px;

  --td-spacer: 8px;
  --td-spacer-1: 12px;
  --td-spacer-2: 16px;
  --td-spacer-3: 24px;

  --td-font-size-xs: 12px;
  --td-font-size-base: 14px;
  --td-font-size-m: 16px;
  --td-font-size-l: 18px;
  --td-font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  /* 品牌色默认跟随当前主题的 --gold；仅 TDesign 两皮肤自行覆盖为官方蓝 */
  --td-brand: var(--gold, #0052d9);
  --td-brand-hover: var(--gold-bright, #1463e0);
  --td-brand-active: var(--gold-deep, #003cab);
  --td-brand-light: var(--gold-hi, #d9e1fb);
  --td-success: #2ba471;
  --td-warning: #e37318;
  --td-error: #d54941;

  --td-ease: cubic-bezier(.38, 0, .24, 1);
  --td-dur: .24s;
  --td-dur-slow: .32s;
}

/* ───────── ③-a 皮肤：TDesign 晨光蓝（浅色） ───────── */
[data-theme="td-light"] {
  --bg: #f3f3f3;
  --bg-2: #eeeeee;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --line: #e7e7e7;
  --line-strong: #0052d9;
  --line-soft: #e7e7e7;
  --fg: rgba(0, 0, 0, .9);
  --fg-dim: rgba(0, 0, 0, .6);
  --gold: #0052d9;
  --gold-bright: #0052d9;
  --gold-hi: #d9e1fb;
  --gold-deep: #003cab;
  --gold-fg: #0052d9;
  --on-gold: #ffffff;
  --cinnabar: #d54941;
  --cinnabar-deep: #ad352f;
  --cinnabar-fg: #d54941;
  --violet: #0052d9;
  --violet-fg: #0052d9;
  --jade: #2ba471;
  --jade-fg: #2ba471;
  --water: #0052d9;
  --fire: #d54941;
  --earth: #e37318;
  --metal: #8b8b8b;
  --wood: #2ba471;
  --sur-1: rgba(0, 0, 0, .04);
  --sur-2: rgba(0, 0, 0, .06);
  --bar-1: rgba(255, 255, 255, .97);
  --bar-2: rgba(255, 255, 255, .92);
  --bar-3: rgba(255, 255, 255, .7);
  --toast-bg: rgba(0, 0, 0, .8);
  --toast-fg: #ffffff;
  --fade: rgba(0, 0, 0, .35);
  --glow-1: rgba(0, 82, 217, .12);
  --glow-2: rgba(0, 82, 217, .1);
  --glow-3: rgba(43, 164, 113, .1);
  --radius: var(--td-radius-xl);
  --radius-sm: var(--td-radius-default);
  --card-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  --card-shadow-lg: 0 6px 24px rgba(0, 0, 0, .14);
  --font-ui: var(--td-font-family);
  --star-op: 0;
  --cute: 0;
}
[data-theme="td-light"] { --td-brand: #0052d9; --acc-soft: rgba(0, 82, 217, .08); --acc-line: rgba(0, 82, 217, .3); --acc-shadow: rgba(0, 82, 217, .22); --acc-strong: #0052d9;
  --acc-surface: rgba(0, 82, 217, .08); --acc-surface-2: rgba(0, 82, 217, .14); --acc-edge: rgba(0, 82, 217, .34); --acc-ink: #0052d9; }

/* ───────── ③-b 皮肤：TDesign 夜幕（深色） ───────── */
[data-theme="td-dark"] {
  --bg: #181818;
  --bg-2: #242424;
  --panel: #242424;
  --panel-solid: #242424;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .4);
  --line-soft: rgba(255, 255, 255, .08);
  --fg: #ffffff;
  --fg-dim: rgba(255, 255, 255, .55);
  --gold: #699ef5;
  --gold-bright: #8bb8ff;
  --gold-hi: #1e3a6b;
  --gold-deep: #4a7ad6;
  --gold-fg: #8bb8ff;
  --on-gold: #ffffff;
  --cinnabar: #e88080;
  --cinnabar-deep: #b95a55;
  --cinnabar-fg: #f5a9a5;
  --violet: #699ef5;
  --violet-fg: #a3c6ff;
  --jade: #45c48f;
  --jade-fg: #7ee0b4;
  --water: #699ef5;
  --fire: #e88080;
  --earth: #e3a060;
  --metal: #a6a6a6;
  --wood: #45c48f;
  --sur-1: rgba(255, 255, 255, .06);
  --sur-2: rgba(255, 255, 255, .1);
  --bar-1: rgba(24, 24, 24, .97);
  --bar-2: rgba(24, 24, 24, .88);
  --bar-3: rgba(24, 24, 24, .7);
  --toast-bg: rgba(58, 58, 58, .96);
  --toast-fg: #ffffff;
  --fade: rgba(0, 0, 0, .5);
  --glow-1: rgba(105, 158, 245, .18);
  --glow-2: rgba(105, 158, 245, .12);
  --glow-3: rgba(69, 196, 143, .1);
  --radius: var(--td-radius-xl);
  --radius-sm: var(--td-radius-default);
  --card-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  --card-shadow-lg: 0 6px 24px rgba(0, 0, 0, .55);
  --font-ui: var(--td-font-family);
  --star-op: .35;
  --cute: 0;
}
[data-theme="td-dark"] { --td-brand: #699ef5; --acc-soft: rgba(105, 158, 245, .14); --acc-line: rgba(105, 158, 245, .4); --acc-shadow: rgba(105, 158, 245, .3); --acc-strong: #699ef5;
  --acc-surface: rgba(105, 158, 245, .16); --acc-surface-2: rgba(105, 158, 245, .26); --acc-edge: rgba(105, 158, 245, .46); --acc-ink: #a3c6ff; }

/* ═══════════ ② 组件形态（TDesign 规范） ═══════════ */

/* 动效统一为 TDesign 缓动 */
[data-cute="0"] { --spring: var(--td-ease); --ease-out: var(--td-ease); }
[data-cute="0"] .screen { animation-duration: var(--td-dur-slow); }

/* ---------- 顶部导航 Navbar ---------- */
[data-cute="0"] .topbar {
  background: var(--bar-1);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
[data-cute="0"] .tabbar {
  background: var(--bar-1);
  border-top: 1px solid var(--line);
  box-shadow: none;
  border-radius: 0;
}
[data-cute="0"] .tabbar .tab { font-size: 11px; }
[data-cute="0"] .tabbar .tab.is-on { color: var(--td-brand); }

/* ---------- 按钮 Button ---------- */
[data-cute="0"] .btn {
  border-radius: var(--td-radius-default);
  font-weight: 600;
  font-size: var(--td-font-size-m);
  min-height: 44px;
  letter-spacing: 0;
}
[data-cute="0"] .btn.primary {
  background: var(--td-brand);
  box-shadow: none !important;
  color: var(--on-gold, #fff);
}
[data-cute="0"] .btn.primary:active { background: var(--td-brand-active); }

/* ---------- 卡片 / 单元格 Card & Cell ---------- */
[data-cute="0"] .panel {
  border-radius: var(--td-radius-xl);
  border: none;
  background: var(--panel-solid);
  padding: var(--td-spacer-2);
}
[data-cute="0"] .panel-title {
  font-family: var(--td-font-family);
  font-size: var(--td-font-size-m);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg);
  margin-bottom: var(--td-spacer-1);
}
[data-cute="0"] .panel-title::before {
  width: 3px; height: 14px; border-radius: 0;
  background: var(--td-brand);
}
[data-cute="0"] .tile {
  border-radius: var(--td-radius-xl);
  border: none;
  background: var(--panel-solid);
  padding: var(--td-spacer-2) var(--td-spacer-1);
  gap: 4px;
}
[data-cute="0"] .tile-icon { font-size: 22px; }
[data-cute="0"] .info-cell { border-radius: var(--td-radius-default); }

/* ---------- 输入框 Input ---------- */
[data-cute="0"] input[type=text],
[data-cute="0"] input[type=number],
[data-cute="0"] input[type=password] {
  border-radius: var(--td-radius-default);
  border: 1px solid var(--line);
  background: var(--panel-solid);
  padding: var(--td-spacer-1) var(--td-spacer-1);
  font-size: var(--td-font-size-m);
}
[data-cute="0"] input[type=text]:focus,
[data-cute="0"] input[type=number]:focus,
[data-cute="0"] input[type=password]:focus {
  border-color: var(--td-brand);
  box-shadow: 0 0 0 2px var(--glow-1);
  transform: none;
}
[data-cute="0"] .field > label { font-size: var(--td-font-size-base); color: var(--fg-dim); margin-bottom: var(--td-spacer); }

/* ---------- 复选框 / 开关 ---------- */
[data-cute="0"] .check input[type=checkbox] {
  border-radius: var(--td-radius-small);
  border-color: var(--line-strong);
  background: var(--panel-solid);
}
[data-cute="0"] .check input[type=checkbox]:checked { background: var(--td-brand); }

/* ---------- 分段控件 Tabs（下划线滑块） ---------- */
[data-cute="0"] .seg {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
[data-cute="0"] .seg-item {
  border-radius: 0;
  padding: var(--td-spacer-1) 0;
  font-size: var(--td-font-size-m);
  color: var(--fg-dim);
  font-weight: 400;
}
[data-cute="0"] .seg-item.is-on { color: var(--td-brand); font-weight: 600; }
[data-cute="0"] .seg-slider {
  top: auto; bottom: -1px; height: 2px;
  border-radius: 2px;
  background: var(--td-brand);
  box-shadow: none;
}

/* ---------- Picker 选择器 ---------- */
[data-cute="0"] .us-sheet { border-radius: var(--td-radius-xxl) var(--td-radius-xxl) 0 0; }
[data-cute="0"] .us-trigger {
  border-radius: var(--td-radius-default);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  font-size: var(--td-font-size-m);
}
[data-cute="0"] .us-trigger .us-arrow {
  width: 16px; height: 16px; border-radius: 0;
  background: none; border: none;
}
[data-cute="0"] .us-trigger.is-open { border-color: var(--td-brand); box-shadow: 0 0 0 2px var(--glow-1); }
[data-cute="0"] .us-trigger.is-open .us-arrow { background: none; transform: rotate(180deg); }
[data-cute="0"] .us-trigger.is-open .us-arrow::after { border-color: var(--td-brand); }

/* 顶栏：取消 | 标题 | 确定 */
.us-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--td-spacer-2);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.us-bar .us-cancel, .us-bar .us-ok {
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--td-font-size-m);
  padding: var(--td-spacer); min-width: 48px;
  -webkit-tap-highlight-color: transparent;
}
.us-bar .us-cancel { color: var(--fg-dim); text-align: left; }
.us-bar .us-ok { color: var(--td-brand); font-weight: 600; text-align: right; }
.us-bar .us-ttl {
  flex: 1; text-align: center; font-size: var(--td-font-size-m);
  font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 二次元皮肤：只留居中标题 */
[data-cute="1"] .us-bar { height: auto; border-bottom: none; padding: 2px 6px 10px; display: block; }
[data-cute="1"] .us-bar .us-cancel,
[data-cute="1"] .us-bar .us-ok { display: none; }
[data-cute="1"] .us-bar .us-ttl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--fg-dim);
}
[data-cute="1"] .us-bar .us-ttl::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* 选项：TDesign 规范（浅高亮 + 右侧勾） */
[data-cute="0"] .us-list { gap: 2px; }
[data-cute="0"] .us-opt {
  border-radius: var(--td-radius-default);
  background: transparent;
  padding: 0 var(--td-spacer-2);
  height: 48px;
  font-size: var(--td-font-size-m);
  font-weight: 400;
}
[data-cute="0"] .us-opt.is-on {
  background: var(--glow-1);
  color: var(--td-brand);
  font-weight: 600;
  box-shadow: none;
}
[data-cute="0"] .us-opt .uk {
  background: none; color: var(--td-brand);
  font-size: 16px; width: auto; height: auto;
  opacity: 0; transform: scale(.5);
}

/* ---------- Toast ---------- */
[data-cute="0"] .toast {
  border-radius: var(--td-radius-default);
  background: var(--toast-bg);
  color: var(--toast-fg);
  border: none;
  font-size: var(--td-font-size-base);
}

/* ---------- 主题面板 / 释义弹层：TDesign 形态 ---------- */
[data-cute="0"] .theme-sheet,
[data-cute="0"] .gloss-sheet { border-radius: var(--td-radius-xxl) var(--td-radius-xxl) 0 0; }
[data-cute="0"] .theme-card {
  border-radius: var(--td-radius-xl);
  border: 1px solid var(--line);
  background: var(--panel-solid);
}
[data-cute="0"] .theme-card.is-on { border-color: var(--td-brand); background: var(--glow-1); }
[data-cute="0"] .theme-card .tk { color: var(--td-brand); }
[data-cute="0"] .view-tabs { border-radius: var(--td-radius-default); }
[data-cute="0"] .view-tabs button.is-on {
  background: var(--glow-1); color: var(--td-brand); box-shadow: none;
}