/* ============================================================================
 * FDE 3.0 · shell.css — 前端 Shell / 设计系统（移动端优先）
 * 作者：S 前端 shell 分片   时间戳：2026-10-06 11:0x (UTC+8)
 * 风格：高级简约商业化 · 中性灰白底 · indigo #4F6BED 唯一主操作色（旧海军蓝已废弃）
 * 作用域：全部组件类以 .fde- 前缀隔离，不污染既有 v17/sr2 样式。
 * 红线：本文件由 shell 分片唯一拥有；u1/u2/u3 只写自己的 uN.css。
 * ========================================================================== */

/* ---------- 0. 字体接线（Noto Sans SC 双片分包加载） ----------
   latin 片小(53KB) 仅拉丁/标点；cjk 片大(308KB) 仅汉字/日韩符号。
   靠 unicode-range 让浏览器按字符自动选片，首屏拉丁字不加载大中文片。 */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100 600;
  font-display: swap;
  src: url('/fonts/NotoSansSC-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100 600;
  font-display: swap;
  src: url('/fonts/NotoSansSC-cjk.woff2') format('woff2');
  unicode-range: U+2E80-2EFF, U+3000-303F, U+3040-309F, U+30A0-30FF, U+3100-312F,
                 U+31A0-31BF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

/* ---------- 1. 设计 Token（移动端优先基准） ---------- */
:root {
  --fde-font:  'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* 品牌色：indigo #4F6BED 为唯一主操作/激活色（旧 --fde-navy 已重定向到 indigo） */
  --fde-navy:      #4F6BED;   /* = indigo-500 主按钮底 / 激活 / 重色（旧 #13294b 已废弃） */
  --fde-navy-2:    #3D55D4;   /* = indigo-600 按下/悬停 */
  --fde-blue:      #4F6BED;   /* 行动色与主操作统一 indigo */
  --fde-blue-weak: rgba(79, 107, 237, .08);
  --fde-blue-line: rgba(79, 107, 237, .28);

  /* 中性色阶：灰白底，留白充分 */
  --fde-bg:        #F5F5F7;   /* 页面底 */
  --fde-surface:   #ffffff;   /* 卡片底 */
  --fde-surface-2: #f0f2f6;   /* 次级填充 */
  --fde-line:      #e6e9ef;   /* 分隔线 */
  --fde-line-2:    #eef1f5;
  --fde-ink:       #1D1D1F;   /* 一级文字（对齐旗舰中性黑） */
  --fde-ink-2:     #6E6E73;   /* 二级文字 */
  --fde-ink-3:     #8E8E93;   /* 三级/占位 */
  --fde-on-navy:   #eef1ff;

  /* 语义色（低饱和，克制） */
  --fde-success:   #1f7a5c;
  --fde-warning:   #b97f14;
  --fde-danger:    #c0392b;
  --fde-success-weak: rgba(31,122,92,.10);
  --fde-warning-weak: rgba(185,127,20,.10);
  --fde-danger-weak: rgba(192,57,43,.08);

  /* 字号阶梯（移动基准） */
  --fde-fs-xs: 11px;
  --fde-fs-sm: 12.5px;
  --fde-fs-md: 14px;
  --fde-fs-lg: 16px;
  --fde-fs-xl: 19px;
  --fde-fs-2xl: 24px;

  /* 间距（4px 基准） */
  --fde-sp-1: 4px;
  --fde-sp-2: 8px;
  --fde-sp-3: 12px;
  --fde-sp-4: 16px;
  --fde-sp-5: 24px;
  --fde-sp-6: 32px;

  /* 圆角 / 阴影 / 层级 */
  --fde-r-sm:14px;
  --fde-r-md:14px;
  --fde-r-lg:14px;
  --fde-r-xl:24px;
  --fde-shadow-1: 0 1px 2px rgba(19,41,75,.04), 0 1px 3px rgba(19,41,75,.06);
  --fde-shadow-2: 0 4px 16px -4px rgba(19,41,75,.10), 0 2px 6px rgba(19,41,75,.05);
  --fde-shadow-3: 0 18px 48px -12px rgba(19,41,75,.22);
  --fde-z-dock: 30;
  --fde-z-modal: 100;
  --fde-z-toast: 110;

  --fde-ease: cubic-bezier(.22,.61,.36,1);
}

/* 桌面端放大节奏 */
@media (min-width: 900px) {
  :root {
    --fde-fs-xl: 22px;
    --fde-fs-2xl: 30px;
  }
}

/* ---------- 2. FDE 工作区骨架（host 容器） ---------- */
.fde-ws {
  display: flex; flex-direction: column; gap: var(--fde-sp-4);
  width: 100%; box-sizing: border-box;
  margin: var(--fde-sp-3) 0;
}
/* 全局字体族：优先 Noto Sans SC，回退系统栈（P1-6） */
body { font-family: var(--fde-font); -webkit-font-smoothing: antialiased; }
/* 顶部身份栏 */
.fde-ws__identity {
  display: flex; align-items: center; gap: var(--fde-sp-3);
  padding: var(--fde-sp-3) var(--fde-sp-4);
  background: var(--fde-surface);
  border: 1px solid var(--fde-line);
  border-radius: var(--fde-r-lg);
  box-shadow: var(--fde-shadow-1);
}
.fde-ws__identity .fde-ws-id-main { flex: 1; min-width: 0; }
.fde-ws__identity .fde-ws-id-name {
  font-size: var(--fde-fs-lg); font-weight: 600; color: var(--fde-ink);
  letter-spacing: .2px;
}
.fde-ws__identity .fde-ws-id-sub {
  font-size: var(--fde-fs-sm); color: var(--fde-ink-3); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Tab 条（视图级）：移动端横向滚动 */
.fde-ws__tabs {
  display: flex; gap: var(--fde-sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 4px;
}
.fde-ws__tabs::-webkit-scrollbar { display: none; }
.fde-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--fde-surface); color: var(--fde-ink-2);
  border: 1px solid var(--fde-line);
  font-size: var(--fde-fs-md); font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .16s var(--fde-ease); white-space: nowrap;
}
.fde-tab .fde-tab-ic { font-size: 17px; line-height: 1; }
.fde-tab:hover { border-color: var(--fde-blue-line); color: var(--fde-navy); }
.fde-tab.on {
  background: var(--fde-navy); border-color: var(--fde-navy); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(19,41,75,.45);
}

/* 主体：内容 + 右栏 */
.fde-ws__body { display: flex; flex-direction: column; gap: var(--fde-sp-4); align-items: flex-start; }
.fde-ws__main { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--fde-sp-4); }
.fde-ws__rail { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--fde-sp-3); }
@media (min-width: 1024px) {
  .fde-ws__body { flex-direction: row; align-items: flex-start; }
  .fde-ws__main { flex: 1 1 auto; }
  .fde-ws__rail { flex: 0 0 300px; max-width: 300px; position: sticky; top: 16px; }
}

/* 视图内二级 Tab（registerTab） */
.fde-subtabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--fde-surface-2); border-radius: var(--fde-r-md);
  align-self: flex-start;
}
.fde-subtab {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 20px; border-radius: 14px; font-size: 13px;
  font-weight: 600; color: var(--fde-ink-3); font-family: inherit; transition: all .15s;
}
.fde-subtab.on { background: var(--fde-surface); color: var(--fde-navy); box-shadow: var(--fde-shadow-1); }

/* ---------- 3. 基础组件 ---------- */

/* 玻璃卡片 */
.fde-panel {
  background: var(--fde-surface);
  border: 1px solid var(--fde-line);
  border-radius: var(--fde-r-lg);
  padding: var(--fde-sp-4);
  box-shadow: var(--fde-shadow-1);
  box-sizing: border-box;
}
.fde-panel--glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-color: rgba(255,255,255,.6);
}
.fde-panel--flat { box-shadow: none; }
.fde-panel__hd { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: var(--fde-sp-3); }
.fde-panel__title { font-size: var(--fde-fs-lg); font-weight: 600; color: var(--fde-ink); margin: 0; }
.fde-panel__sub { font-size: var(--fde-fs-sm); color: var(--fde-ink-3); margin-top: 4px; }

/* 按钮 */
.fde-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 14px; border: 1px solid transparent;   /* D-03：控件圆角统一 10px（铁律 §零之一·4「控件 8–11px」），与 controls.css 一致 */
  font-size: var(--fde-fs-md); font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s var(--fde-ease); line-height: 1.2;
}
.fde-btn--primary { background: var(--fde-navy); color: #fff; }
.fde-btn--primary:hover { background: var(--fde-navy-2); }
.fde-btn--accent { background: var(--fde-blue); color: #fff; }
.fde-btn--accent:hover { background: #2647b8; }
.fde-btn--ghost { background: var(--fde-surface); color: var(--fde-ink-2); border-color: var(--fde-line); }
.fde-btn--ghost:hover { border-color: var(--fde-blue-line); color: var(--fde-navy); }
.fde-btn--danger { background: var(--fde-danger-weak); color: var(--fde-danger); }
.fde-btn--sm { padding: 8px 12px; font-size: var(--fde-fs-sm); border-radius: var(--fde-r-sm); }
.fde-btn--block { width: 100%; }

/* 输入 */
.fde-input, .fde-textarea, .fde-select {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; border: 1px solid var(--fde-line);
  border-radius: 14px; background: var(--fde-surface);                       /* D-03：输入控件同样统一 10px（卡片才用 14–16px） */
  font-size: var(--fde-fs-md); color: var(--fde-ink); font-family: inherit;
  outline: none; transition: border-color .15s;
}
.fde-input:focus, .fde-textarea:focus, .fde-select:focus { border-color: var(--fde-blue); }
.fde-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.fde-label { display: block; font-size: var(--fde-fs-sm); font-weight: 600; color: var(--fde-ink-2); margin: 16px 0 8px; }

/* 标签 / 徽章 */
.fde-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  font-size: var(--fde-fs-xs); font-weight: 600;
  background: var(--fde-surface-2); color: var(--fde-ink-2);
}
.fde-tag--blue { background: var(--fde-blue-weak); color: var(--fde-blue); }
.fde-tag--navy { background: rgba(19,41,75,.08); color: var(--fde-navy); }
.fde-tag--success { background: var(--fde-success-weak); color: var(--fde-success); }
.fde-tag--warn { background: var(--fde-warning-weak); color: var(--fde-warning); }
.fde-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--fde-danger); color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
}

/* 列表 */
.fde-list { display: flex; flex-direction: column; }
.fde-list__item {
  display: flex; align-items: center; gap: var(--fde-sp-3);
  padding: var(--fde-sp-3) 0; border-bottom: 1px solid var(--fde-line-2);
}
.fde-list__item:last-child { border-bottom: none; }
.fde-list__main { flex: 1; min-width: 0; }
.fde-list__title { font-size: var(--fde-fs-md); font-weight: 600; color: var(--fde-ink); }
.fde-list__meta { font-size: var(--fde-fs-sm); color: var(--fde-ink-3); margin-top: 4px; }

/* 空状态 */
.fde-empty {
  text-align: center; padding: var(--fde-sp-6) var(--fde-sp-4);
  color: var(--fde-ink-3);
}
.fde-empty__icon { font-size: 34px; line-height: 1; margin-bottom: var(--fde-sp-2); opacity: .7; }
.fde-empty__title { font-size: var(--fde-fs-md); font-weight: 600; color: var(--fde-ink-2); margin-bottom: 4px; }
.fde-empty__desc { font-size: var(--fde-fs-sm); }

/* 网格（卡片墙） */
.fde-grid { display: grid; grid-template-columns: 1fr; gap: var(--fde-sp-3); }
@media (min-width: 640px) { .fde-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fde-grid { grid-template-columns: repeat(3, 1fr); } }

/* 头像 */
.fde-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--fde-navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fde-fs-sm); overflow: hidden;
}
.fde-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.fde-avatar--lg { width: 48px; height: 48px; font-size: var(--fde-fs-md); }

/* ---------- 4. 模态 / Toast（全局根由 shell.js 注入 <body>） ---------- */
.fde-modal-root { position: fixed; inset: 0; z-index: var(--fde-z-modal); }
.fde-modal-overlay {
  position: absolute; inset: 0; background: rgba(19,41,75,.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s; backdrop-filter: blur(2px);
}
.fde-modal-overlay.show { opacity: 1; }
.fde-modal {
  background: var(--fde-surface); border-radius: var(--fde-r-lg);
  width: 100%; max-width: 460px; max-height: 86vh; overflow: auto;
  box-shadow: var(--fde-shadow-3); transform: translateY(12px) scale(.98);
  transition: transform .2s var(--fde-ease);
}
.fde-modal-overlay.show .fde-modal { transform: none; }
.fde-modal__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--fde-line);
  position: sticky; top: 0; background: var(--fde-surface); z-index: 1;
  border-radius: var(--fde-r-lg) var(--fde-r-lg) 0 0;
}
.fde-modal__title { margin: 0; font-size: var(--fde-fs-lg); font-weight: 600; color: var(--fde-ink); }
.fde-modal__x {
  border: none; background: var(--fde-surface-2); width: 28px; height: 28px;
  border-radius: var(--fde-r-sm); cursor: pointer; color: var(--fde-ink-3); font-size: 17px; line-height: 1;
}
.fde-modal__bd { padding: 16px 20px; }
.fde-modal__ft { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--fde-line); }

.fde-toast-root {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: var(--fde-z-toast); display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.fde-toast {
  background: var(--fde-navy); color: #fff; padding: 8px 16px;
  border-radius: var(--fde-r-md); font-size: var(--fde-fs-md);
  box-shadow: var(--fde-shadow-2); opacity: 0; transform: translateY(8px);
  transition: all 0.22s var(--fde-ease); max-width: 86vw;
}
.fde-toast.show { opacity: .96; transform: none; }
.fde-toast--success { background: var(--fde-success); }
.fde-toast--danger { background: var(--fde-danger); }

/* 骨架屏（加载中） */
.fde-skel { background: var(--fde-surface-2); border-radius: var(--fde-r-sm); position: relative; overflow: hidden; }
.fde-skel::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: fdeshim 1.4s infinite; transform: translateX(-100%);
}
@keyframes fdeshim { to { transform: translateX(100%); } }

/* 工具类 */
.fde-mt-2{margin-top: 8px}.fde-mt-3{margin-top: 12px}.fde-mt-4{margin-top: 16px}
.fde-row{display:flex;align-items:center;gap: 8px}.fde-wrap{flex-wrap:wrap}
.fde-muted{color:var(--fde-ink-3)}
.fde-hide{display:none !important}

/* 页面进场微动（与既有 pageIn 不冲突，仅 fde 工作区） */
@keyframes fdeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }
.fde-ws > * { animation: fdeIn 0.22s var(--fde-ease); }

/* 功能样板角标（shell 自带演示视图用，克制） */
.fde-demo {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  font-size: var(--fde-fs-xs); font-weight: 600; letter-spacing: .4px;
  color: var(--fde-blue); background: var(--fde-blue-weak);
  border: 1px dashed var(--fde-blue-line);
  border-radius: 999px; padding: 4px 8px;
}
.fde-demo__note {
  font-size: var(--fde-fs-sm); color: var(--fde-ink-3);
  background: var(--fde-surface-2); border-radius: var(--fde-r-sm);
  padding: 8px 12px; line-height: 1.5;
}

/* S-2 引导浮层收敛：定位不挡 CTA，reduced-motion 无动画 */
#p4Coach { bottom: 84px !important; right: 16px !important; z-index: 80 !important; }
@media (prefers-reduced-motion: reduce) {
  #p4Coach, #p4Coach * { transition: none !important; animation: none !important; }
}