/* ============================================================================
 * 溪雨AI服务 · 样式（2026-09-10 从 index.html 内联 <style> 拆出，规则未改）
 * 组织：设计变量(:root) → 各区块样式，区块用 `/* ========== 名称 ========== *\/` 分隔
 * 主题：深浅两套靠 html[data-theme] 切换，颜色一律走 :root 变量
 * ========================================================================== */

  :root {
    --bg: #F5F7FA;
    --ink: #1A2A3A;
    --ink-sub: #666666;
    --ink-faint: #999999;
    --ink-soft: #6B7280;
    --card: #FFFFFF;
    --radius: 20px;
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
    --accent: #3B82F6;
    --accent-dark: #2563EB;
    --accent-bg: #F0F6FF;
    --accent-bg-2: #BFDBFE;
    --danger: #EF4444;
    --danger-dark: #B91C1C;
    --danger-bg: #FEF2F2;
    --line: #E8ECF1;
    --border: #D8DEE6;
    --hover: #F1F3F5;
    --ok: #16A34A;
    --ok-dark: #15803D;
    --ok-bg: #DCFCE7;
    --violet: #8B5CF6;
    --violet-dark: #6D28D9;
    --violet-bg: #F5F3FF;
    --warning: #EA580C;
    --warning-dark: #92400E;
    --warn-bg: #FFFBEB;
    --warn-line: #FDE68A;
    --indigo: #6366F1;
  }

  /* ========== 深色主题(优化⑥):html[data-theme="dark"] ========== */
  html[data-theme="dark"] {
    --bg: #0F172A;
    --ink: #E2E8F0;
    --ink-sub: #94A3B8;
    --ink-faint: #64748B;
    --ink-soft: #94A3B8;
    --card: #1E293B;
    --shadow: 0 4px 12px rgba(0,0,0,0.45);
    --accent: #60A5FA;
    --accent-dark: #3B82F6;
    --accent-bg: #1E3A5F;
    --accent-bg-2: #1E3A5F;
    --danger: #F87171;
    --danger-dark: #EF4444;
    --danger-bg: #3A1D1D;
    --line: #334155;
    --border: #334155;
    --hover: #273449;
    --ok: #4ADE80;
    --ok-dark: #22C55E;
    --ok-bg: #16321F;
    --violet: #A78BFA;
    --violet-dark: #8B5CF6;
    --violet-bg: #312E45;
    --warning: #FB923C;
    --warning-dark: #EA580C;
    --warn-bg: #3A2E1A;
    --warn-line: #78350F;
    --indigo: #818CF8;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* 滚动条深色适配(轨道随主题变量,修复订单列表横向滚动条白底) */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); border-radius: 5px; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
  * { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg); }

  html, body { height: 100%; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 80px;
    position: relative;
  }

  /* ========== 右上角用户功能区(头像/订单/客服) ========== */
  .user-zone {
    position: fixed;
    top: 24px;
    right: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 50;
  }

  /* 深浅主题切换按钮(优化⑥) */
  .theme-toggle {
    /* 2026-09-19：34 → 40 —— 走查实测顶部三个按钮的热区都低于常见的 44×44 触控下限。 */
    width: 40px; height: 40px;
    position: relative;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink-sub);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  .theme-toggle:hover { border-color: var(--accent); transform: scale(1.08); }

  .round-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
    background: #D8DCE2;
    color: #8A94A6;
    position: relative;
    flex-shrink: 0;   /* 2026-09-19：顶部栏是 flex，别让按钮被压扁 */
  }
  /* 2026-09-19：手机端顶部这几个按钮视觉是 40×40（1361 行，紧凑是刻意的），热区补到 44+：
     用透明伪元素外扩 3px。为此把 .round-btn 的 overflow:hidden 去掉了 —— 它会把外扩的伪元素裁掉，
     而里面的 svg 是 22×22 居中，本来也不会溢出。（顶部栏 gap:10px，外扩不会互相压。） */
  .theme-toggle::after,
  .round-btn::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
  .round-btn:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  .round-btn.white { background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
  .round-btn.white:hover { color: var(--accent); }
  .round-btn.logged {
    background: linear-gradient(135deg, var(--accent), var(--violet));
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  .round-btn svg { width: 22px; height: 22px; }
  .round-btn span { display: none; }

  /* 未登录:右上角「登录/注册」按钮 */
  .login-text-btn {
    border: 1.5px solid var(--accent);
    background: var(--card);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    /* 2026-09-19：原来 padding 8px 14px，实测高度只有 36px（走查发现，低于 44 的触控下限）。
       改成固定 44 高 + 水平内边距，文字用 flex 居中，视觉高度不再随字体抖动。 */
    padding: 0 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  .login-text-btn:hover { background: var(--accent); color: #fff; }
  .user-zone.logged-in .login-text-btn { display: none; }
  .user-zone:not(.logged-in) .round-btn.user-only { display: none; }

  /* 头像旁:用户中心标签(优化③:与头像融合为整体胶囊) */
  .user-chip {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 6px 4px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: border-color .15s ease;
  }
  .user-chip:hover { border-color: var(--accent); }
  .user-chip .user-center-tag {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
  }
  .user-chip .user-center-tag:hover { color: var(--accent); }
  .user-chip .round-btn {
    width: 32px; height: 32px;
    border: none;
    box-shadow: none;
  }
  .user-chip .round-btn svg { width: 18px; height: 18px; }
  .user-zone:not(.logged-in) .user-chip { display: none; }

  /* 首页「我的订单」区 */
  .home-orders {
    width: 100%;
    max-width: 820px;
    margin: 6px auto 0;
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(26,42,58,.08);
    padding: 16px 18px;
    box-sizing: border-box;
  }
  .home-orders .ho-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .home-orders .ho-head h3 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
  .home-orders .ho-all {
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: all .15s ease;
  }
  .home-orders .ho-all:hover { background: var(--accent); color: var(--card); border-color: var(--accent); }
  .home-orders .ho-list { display: flex; flex-direction: column; gap: 8px; }
  .ho-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--hover);
  }
  .ho-item .ho-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ho-item .ho-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
  .ho-item .ho-ops { display: flex; gap: 6px; flex-shrink: 0; }
  .ho-empty { font-size: 13px; color: var(--ink-soft); padding: 14px 0 6px; text-align: center; }
  .ho-empty .go-btn { display: block; margin: 10px auto 0; }

  /* 需求预设小卡片 */
  .preset-block { margin-bottom: 12px; }
  .preset-label { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
  .preset-row { display: flex; flex-direction: column; gap: 8px; }
  /* 分类按行分布:label 固定宽 + chips 容器换行 */
  .preset-group { display: flex; align-items: flex-start; gap: 10px; }
  .preset-group-label { flex: 0 0 64px; margin: 0; padding-top: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
  /* gap 从 6px 放到 8px —— 不是为了好看，是给下面的热区外扩留出空间（2026-09-15） */
  .preset-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
  .preset-chip {
    font-size: 12px;
    /* 视觉高度 26px → 32px：手机上原来那一排真的偏小（探针量出来只有 26px 高） */
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid #DDE3EA;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    transition: all .12s ease;
    position: relative;
  }
  /* 触摸热区补到 40px（视觉仍然是个小圆角标签，布局密度不变）。
     相邻 chip 的 gap 是 8px，上下各向外扩 4px 正好不重叠 —— 再大就会吃掉邻居的热区。
     iOS 建议 44px、安卓 48px；这里取 40px 是在"手指够得着"和"不撑散版面"之间取的折中：
     这些是辅助的预设标签，不是主操作按钮。 */
  .preset-chip::after {
    content: '';
    position: absolute;
    inset: -4px 0;
  }
  .preset-chip:hover { border-color: var(--accent); color: var(--accent); }
  .preset-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* 模板选择 */
  .template-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .template-card {
    flex: 1 1 200px;
    max-width: 240px;
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease;
    text-align: left;
  }
  .template-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
  .template-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,111,184,.12); }
  .template-preview {
    height: 120px;
    border-radius: 8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    position: relative;
  }
  .template-preview img.tpl-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tpl-zoom {
    position: absolute; top: 6px; right: 6px;
    /* 2026-09-15：26×26 在手机上按不准。直接给到 32×32（它是独立图标钮，不用伪元素扩热区
       —— 那个会被模板格的 overflow 裁掉）。 */
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(15,23,42,.55); color: #fff; font-size: 14px;
    cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
  }
  .tpl-zoom:hover { background: rgba(15,23,42,.85); }
  /* 模板样张大图预览 */
  /* ===== 模板样张·全屏查看器(2026.8.15 v2:全屏+等比缩放) ===== */
  #tplModal.tpl-mask { background: rgba(0,0,0,.88); backdrop-filter: none; padding: 0; }
  .tpl-full { width: 100vw; height: 100vh; display: flex; flex-direction: column; }
  .tpl-full-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 6px; color: #fff; }
  .tpl-full-title { font-size: 17px; font-weight: 700; }
  .tpl-full-close {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; font-size: 17px; cursor: pointer; line-height: 1;
  }
  .tpl-full-close:hover { background: rgba(255,255,255,.28); }
  .tpl-full-viewer { flex: 1; overflow: auto; position: relative; padding: 6px 2px; }
  /* 明显滚动条(2026.8.15 总控师要求) */
  #tplViewer::-webkit-scrollbar { width: 12px; height: 12px; }
  #tplViewer::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 6px; }
  #tplViewer::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 6px; border: 2px solid rgba(0,0,0,.35); }
  #tplViewer::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); }
  #tplViewer::-webkit-scrollbar-corner { background: transparent; }
  #tplViewer { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) rgba(255,255,255,.07); }
  /* 图片:块级+margin auto——小于容器居中,大于容器从左上开始(溢出可滚动,修复放大后左侧被吞) */
  .tpl-full-viewer img { display: block; margin: auto; max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 6px 26px rgba(0,0,0,.45); }
  .tpl-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff; font-size: 24px; cursor: pointer;
    line-height: 1; margin: 0;
  }
  #tplPrev { left: 14px; }
  #tplNext { right: 14px; }
  .tpl-nav:hover { background: rgba(255,255,255,.3); }
  .tpl-full-bottom { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 8px 22px 16px; color: #fff; flex-wrap: wrap; }
  .tpl-zoom-ctrl { display: flex; align-items: center; gap: 8px; }
  .tpl-zoom-ctrl button {
    width: 36px; height: 32px; border: none; border-radius: 8px;
    background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
  }
  .tpl-zoom-ctrl button:hover { background: rgba(255,255,255,.26); }
  .tpl-zoom-pct { min-width: 54px; text-align: center; font-size: 13px; color: #CBD5E1; }
  .tpl-page-num { font-size: 13px; color: #94A3B8; }
  .tpl-modal-tip { font-size: 12px; color: #64748B; }
  .tp-gu { background: linear-gradient(160deg, #1F4A3D, #3E6B52 55%, #A9762F); }
  .tp-simple { background: linear-gradient(160deg, #F4F6F8, #E8ECF0 60%, #2F6FED); color: var(--ink); }
  /* 优化④:品类模板预览渐变(Word 蓝灰/Excel 绿/多彩) */
  .tp-wa { background: linear-gradient(160deg, #1E3A5F, #3B82F6 55%, #93C5FD); }
  .tp-wb { background: linear-gradient(160deg, #334155, #64748B 55%, #CBD5E1); }
  .tp-wc { background: linear-gradient(160deg, #0F766E, #14B8A6 55%, #5EEAD4); }
  .tp-ea { background: linear-gradient(160deg, #14532D, #16A34A 55%, #86EFAC); }
  .tp-eb { background: linear-gradient(160deg, #1E3A8A, #2563EB 55%, #93C5FD); }
  .tp-ec { background: linear-gradient(160deg, #451A03, #EA580C 55%, #FDBA74); }
  .tp-p1 { background: linear-gradient(160deg, #1E3A8A, #3B82F6 55%, #93C5FD); }
  .tp-p2 { background: linear-gradient(160deg, #111827, #374151 55%, #F59E0B); }
  .tp-p3 { background: linear-gradient(160deg, #0F766E, #14B8A6 55%, #A7F3D0); }
  .tp-p4 { background: linear-gradient(160deg, #7C2D12, #EA580C 55%, #FDBA74); }
  .tp-p5 { background: linear-gradient(160deg, #7F1D1D, #DC2626 55%, #FCA5A5); }
  .tp-p6 { background: linear-gradient(160deg, #4C1D95, #8B5CF6 55%, #C4B5FD); }
  .tp-none { background: #F1F3F5; border: 1.5px dashed var(--border); color: var(--ink-sub); font-size: 12px; }
  .template-card .tc-name { font-size: 12px; font-weight: 600; color: var(--ink); }
  .template-card .tc-desc { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

  /* 档位回显里的两处强调色（2026-09-18）：原来直接写 Tailwind 的绿 #16A34A / 橙 #EA580C ——
     它们是外来色（跟宣纸/墨/朱砂不同族）。改成走品牌变量：免费 = 墨绿 --ok，
     加急后总价 = 朱砂 --accent（全站语义本来就是"朱砂 = 钱与行动"）。 */
  #tierEchoText .echo-free { color: var(--ok); }
  #tierEchoText .echo-total { color: var(--accent); }

  /* 支付弹窗(收款码) */
  .pay-qr-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; justify-content: center; }
  .pay-qr-box {
    width: 128px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    background: var(--hover);
  }
  .pay-qr-box .qr-name { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
  .pay-qr-box .qr-img {
    width: 96px; height: 96px;
    border-radius: 8px;
    background: #EEF1F4;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #9AA3AE;
    margin: 0 auto 6px;
    overflow: hidden;
  }
  .pay-qr-box .qr-img img { width: 100%; height: 100%; object-fit: cover; }
  .pay-qr-box .qr-tip { font-size: 10px; color: var(--ink-soft); }
  /* 一个收款码都没配好时的兜底（2026-09-18 加）：不留空弹窗，指路客服 */
  .pay-qr-row .qr-empty {
    font-size: 13px; line-height: 1.7; color: var(--ink-sub);
    padding: 14px 16px; border: 1px dashed var(--border); border-radius: 10px;
  }
  .pay-note { font-size: 12px; color: #B45309; background: #FEF3C7; border-radius: 8px; padding: 8px 10px; margin-top: 4px; }

  /* 个人中心(订单界面改造:左侧导航) */
  .profile-layout { display: flex; gap: 16px; align-items: flex-start; }
  .profile-nav {
    flex-shrink: 0;
    width: 176px;
    background: var(--card);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(26,42,58,.08);
    padding: 10px;
  }
  .profile-nav .pn-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }
  .profile-nav .pn-item:hover { background: #F3F6F9; }
  .profile-nav .pn-item.on { background: var(--accent); color: #fff; }
  .profile-nav .pn-more {
    font-size: 11px;
    color: var(--ink-soft);
    padding: 12px 12px 4px;
    border-top: 1px dashed var(--line);
    margin-top: 8px;
  }
  .profile-main { flex: 1; min-width: 0; }
  @media (max-width: 720px) {
    .profile-layout { flex-direction: column; }
    .profile-nav { width: 100%; display: flex; overflow-x: auto; }
    .profile-nav .pn-item { white-space: nowrap; }
    .profile-nav .pn-more { display: none; }
  }

  /* 头像下拉菜单 */
  .avatar-menu {
    position: absolute;
    top: 52px;
    right: 0;
    min-width: 150px;
    background: var(--card);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
  }
  .avatar-menu.open { display: flex; }
  .avatar-menu button {
    border: none;
    background: none;
    text-align: left;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
  }
  .avatar-menu button:hover { background: var(--hover); }
  .avatar-menu button.logout { color: var(--danger); }
  .avatar-menu .menu-hint {
    padding: 10px 14px;
    font-size: 12px;
    color: var(--ink-faint);
    border-bottom: 1px solid #F0F0F0;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  /* ========== 品牌区 ========== */
  .brand { text-align: center; margin-top: 7vh; margin-bottom: 36px; }
  .brand h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .brand-logo { width: clamp(44px, 6vw, 64px); height: clamp(44px, 6vw, 64px); border-radius: 50%; box-shadow: 0 4px 14px rgba(30,58,95,.25); flex-shrink: 0; }
  .pay-title { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .pay-logo { width: 30px; height: 30px; border-radius: 50%; }
  .pay-brand-tag { text-align: center; font-size: 12px; color: var(--ink-faint); margin: -4px 0 10px; letter-spacing: 1px; }
  .brand .subtitle { margin-top: 14px; font-size: clamp(14px, 2vw, 17px); color: var(--ink-sub); }
  .brand .tip { margin-top: 10px; font-size: 12px; color: var(--ink-faint); }

  /* ========== 提交区 ========== */
  .composer {
    width: min(72%, 880px);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px 24px;
    transition: box-shadow .2s ease;
    position: relative;
  }
  .composer:focus-within { box-shadow: 0 8px 28px rgba(26,42,58,.10); }

  .field-block { margin-bottom: 18px; }
  .field-block:last-of-type { margin-bottom: 20px; }

  .field-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .field-label .req { color: var(--danger); }
  .field-label .hint { font-size: 12px; font-weight: 400; color: var(--ink-faint); }

  .name-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: var(--card);
    color: var(--ink);
  }
  .name-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }

  /* 素材上传 */
  .upload-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    background: var(--bg);
  }
  .plus-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
  }
  .plus-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
  .plus-btn svg { width: 18px; height: 18px; }

  .file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    background: var(--accent-bg);
    color: var(--accent-dark);
    border: 1px solid var(--accent-bg-2);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    font-size: 13px;
  }
  .file-chip .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
  .file-chip .fmeta { color: var(--ink-faint); font-size: 12px; flex-shrink: 0; }
  .file-chip .fdel {
    border: none; background: none; cursor: pointer; color: #94A3B8;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0; transition: color .15s ease, background .15s ease;
  }
  .file-chip .fdel:hover { color: var(--danger); background: #FEE2E2; }

  .upload-hint { font-size: 12px; color: var(--ink-faint); width: 100%; }
  .upload-hint b { color: var(--accent); font-weight: 600; }

  /* 素材分块(优化①+2026.8.20 总控师反馈):文档每行=可编辑标签名+原文件名;图片按图片组分块 */
  .upload-doc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .doc-list { display: flex; flex-direction: column; gap: 6px; }
  .file-item {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); background: var(--card);
    border-radius: 8px; padding: 5px 10px; font-size: 12px;
  }
  .file-item .fnote {
    flex-shrink: 0; width: 96px; border: 1px solid var(--accent-bg-2); border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--accent-dark); text-align: center;
    padding: 3px 8px; background: var(--accent-bg); outline: none;
  }
  .file-item .fnote:focus { border-color: var(--accent); background: var(--bg); }
  .file-item .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; color: var(--ink); }
  .file-item .fmeta { color: var(--ink-faint); font-size: 11px; flex-shrink: 0; }
  .file-item .fdel { border: none; background: none; cursor: pointer; color: #94A3B8; font-size: 14px; flex-shrink: 0; line-height: 1; }
  .file-item .fdel:hover { color: var(--danger); }
  .add-file-btn {
    align-self: flex-start; border: 1.5px dashed var(--line); border-radius: 999px;
    background: var(--bg); color: var(--ink-sub); font-size: 12px;
    /* 2026-09-15：这是客户**上传素材的主入口**，原来只有 26px 高（探针量出来的），
       在手机上偏小。拔到 34px —— 宽度本来就够（93~125px），只补高度。 */
    padding: 9px 16px; cursor: pointer; transition: all .15s ease;
  }
  .add-file-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
  /* 图片组分块:每组=标签名(可编辑)+组内图片网格 */
  .img-groups { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .img-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--card); }
  .img-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .img-group-head .gnote {
    flex-shrink: 0; width: 96px; border: 1px solid var(--accent-bg-2); border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--accent-dark); text-align: center;
    padding: 3px 8px; background: var(--accent-bg); outline: none;
  }
  .img-group-head .gnote:focus { border-color: var(--accent); background: var(--bg); }
  .img-group-head .g-hint { font-size: 11px; color: var(--ink-faint); flex: 1; min-width: 0; }
  .img-group-head .g-del { border: none; background: none; cursor: pointer; color: #94A3B8; font-size: 13px; flex-shrink: 0; line-height: 1; }
  .img-group-head .g-del:hover { color: var(--danger); }
  .img-group-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .img-group-add {
    margin-top: 8px; align-self: flex-start; border: 1.5px dashed var(--line); border-radius: 999px;
    background: var(--bg); color: var(--ink-sub); font-size: 12px;
    padding: 8px 14px; cursor: pointer; transition: all .15s ease;  /* 24px → 32px，同上理由 */
  }
  .img-group-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
  .img-item {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--line); border-radius: 10px; padding: 6px;
    background: var(--card); width: 118px;
  }
  .img-item img { width: 100%; height: 74px; object-fit: cover; border-radius: 6px; background: #EDF0F4; }
  .img-item .fnote { width: 100%; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; padding: 2px 6px; background: var(--bg); color: var(--ink); outline: none; }
  .img-item .fnote:focus { border-color: var(--accent); }
  .img-item .img-meta-row { display: flex; align-items: center; gap: 4px; }
  .img-item .fmeta { color: var(--ink-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .img-item .fdel { border: none; background: none; cursor: pointer; color: #94A3B8; font-size: 14px; margin-left: auto; line-height: 1; }
  .img-item .fdel:hover { color: var(--danger); }

  /* 订单需求 */
  textarea.req-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    font-size: 15px;
    line-height: 1.6;
    font-family: inherit;
    color: var(--ink);
    min-height: 76px;
    max-height: 260px;
    background: var(--card);
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  textarea.req-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
  textarea.req-input::placeholder { color: var(--ink-faint); }

  /* 提交按钮 */
  .submit-row { display: flex; justify-content: flex-end; }
  .submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 34px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, transform .1s ease;
  }
  .submit-btn:hover { background: var(--accent-dark); }
  .submit-btn:active { transform: scale(.96); }
  .submit-btn svg { width: 17px; height: 17px; }

  /* ========== 服务反馈区 ========== */
  .feedback-section {
    width: min(72%, 880px);
    margin-top: 44px;
  }
  .feedback-section h2 {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  .feedback-section h2 .bar { width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
  .feedback-section h2 .sub { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
  .feedback-cards { display: flex; flex-direction: column; gap: 12px; }
  .fb-card {
    background: var(--card);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 16px 20px;
    border-left: 3px solid var(--accent);
  }
  .fb-card .fb-id { font-size: 12px; color: var(--ink-faint); font-family: ui-monospace, Consolas, monospace; margin-bottom: 6px; }
  .fb-card .fb-text { font-size: 14px; line-height: 1.7; color: var(--ink); }
  .fb-empty { font-size: 13px; color: var(--ink-faint); padding: 8px 2px; }
  .fb-hint { font-size: 12px; color: var(--ink-faint); margin: 2px 0 10px; }

  /* ========== 列表/表格视图(订单界面 & 控制台) ========== */
  .list-view {
    width: min(95%, 1500px);
    margin-top: 6vh;
    display: none;
    flex-direction: column;
  }
  .list-view.show { display: flex; }
  .list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .list-header h2 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
  .list-header .list-sub { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
  .back-btn {
    padding: 10px 20px;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 12px;
    font-size: 14px;
    color: var(--ink-sub);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
  }
  .back-btn:hover { border-color: var(--accent); color: var(--accent); }

  .table-card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .table-wrap { overflow-x: auto; }
  table.order-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
  .table-card table.order-table { min-width: 1080px; }
  .order-table th {
    background: var(--hover);
    color: #475569;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    white-space: nowrap;
    font-size: 12.5px;
    border-bottom: 1px solid var(--line);
  }
  .order-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hover);
    vertical-align: top;
    color: var(--ink);
  }
  .order-table tbody tr:last-child td { border-bottom: none; }
  .order-table tbody tr:hover { background: var(--hover); }
  .td-name { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .td-id { font-family: ui-monospace, Consolas, monospace; color: var(--ink-sub); white-space: nowrap; font-size: 12px; }
  .td-req { max-width: 260px; color: var(--ink-sub); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .td-time { white-space: nowrap; color: var(--ink-sub); font-size: 12px; }
  .td-files { max-width: 200px; }
  .td-files a {
    display: block;
    color: var(--accent);
    text-decoration: none;
    font-size: 12.5px;
    padding: 1px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .td-files a:hover { text-decoration: underline; }
  .td-files .no-file { color: var(--ink-faint); font-size: 12px; }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .status-pill.pending { background: var(--warn-bg); color: #C2410C; border: 1px solid #FED7AA; }
  .status-pill.received { background: #EFF6FF; color: #1D4ED8; border: 1px solid var(--accent-bg-2); }
  .status-pill.done { background: var(--ok-bg); color: var(--ok-dark); border: 1px solid #BBF7D0; }

  .mini-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .15s ease;
  }
  .mini-btn.primary { background: var(--accent); color: #fff; }
  .mini-btn.primary:hover { background: var(--accent-dark); }
  .mini-btn.ghost { background: var(--card); color: var(--ink-sub); border: 1px solid var(--border); }
  .mini-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
  .mini-btn:disabled { opacity: .5; cursor: not-allowed; }
  .mini-btn.link { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 6px 4px; }
  .mini-btn.done { background: var(--ok-bg); color: var(--ok-dark); cursor: default; }
  .mini-btn.sent { background: var(--ok-bg); color: var(--ok-dark); cursor: default; }
  .mini-btn.feedback-done { background: var(--hover); color: #9CA3AF; cursor: default; }

  .console-bar {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
  }
  .ctrl-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
  }
  .ctrl-btn.primary { background: var(--accent); color: #fff; }
  .ctrl-btn.primary:hover { background: var(--accent-dark); }
  .ctrl-btn.ghost { background: var(--card); color: var(--ink-sub); border: 1px solid var(--border); }
  .ctrl-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
  .ctrl-btn.danger { color: var(--danger); border-color: rgba(239,68,68,.45); }
  .ctrl-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

  .list-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-faint);
    font-size: 14px;
  }

  /* ========== 弹窗通用 ========== */
  .modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    /* 2026-09-18：iOS/Safari 18 之前只认带前缀的写法（不带就等于没加模糊，观感不一致） */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
  }
  .modal-mask.show { display: flex; }
  .modal {
    width: min(92%, 420px);
    background: var(--card);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    padding: 28px 26px 24px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
  .modal .modal-sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 20px; }
  .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: none;
    font-size: 20px;
    color: var(--ink-faint);
    cursor: pointer;
    line-height: 1;
  }
  .modal-close:hover { color: var(--ink); }

  .form-row { display: flex; gap: 10px; margin-bottom: 14px; }
  .form-row input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease;
  }
  .form-row input:focus { border-color: var(--accent); }
  .form-row .code-btn {
    flex-shrink: 0;
    padding: 0 14px;
    border: 1px solid var(--accent);
    background: var(--card);
    color: var(--accent);
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .15s ease;
  }
  .form-row .code-btn:hover { background: var(--accent-bg); }
  .form-row .code-btn:disabled { color: var(--ink-faint); border-color: var(--border); background: #F5F6F8; cursor: not-allowed; }

  .login-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease;
  }
  .login-btn:hover { background: var(--accent-dark); }
  .login-btn:disabled { background: #BFD3F8; cursor: not-allowed; }

  .modal-note {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-faint);
    background: var(--hover);
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent-bg-2);
  }

  /* 反馈弹窗 */
  .feedback-modal textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    font-size: 15px;
    line-height: 1.7;
    font-family: inherit;
    color: var(--ink);
    min-height: 110px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .feedback-modal textarea:focus { border-color: var(--accent); }

  .upload-area {
    border: 1.5px dashed var(--line);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    color: var(--ink-sub);
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
    background: var(--card);
    margin-bottom: 16px;
  }
  .upload-area:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
  .upload-area .up-name { color: var(--ink); font-weight: 600; margin-top: 6px; font-size: 14px; }

  /* 客服弹窗 */
  .service-modal .modal h2 { font-size: 17px; }
  .service-modal .svc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hover);
    font-size: 14px;
    color: var(--ink);
  }
  .service-modal .svc-item:last-child { border-bottom: none; }
  .service-modal .svc-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

  /* 客服留言表单 */
  .svc-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--hover);
  }
  .svc-form input,
  .svc-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #E2E6EA;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--card);
    outline: none;
    transition: border-color .2s;
  }
  .svc-form textarea { min-height: 84px; resize: vertical; }
  .svc-form input:focus,
  .svc-form textarea:focus { border-color: var(--accent); }
  .svc-form .login-btn { align-self: flex-end; min-width: 108px; }

  /* 留言列表 */
  .msg-list { margin-top: 16px; max-height: 46vh; overflow-y: auto; }
  /* 客服留言优化(2026.8.15):订单号下拉 + 我的留言 + 回复闭环 */
  .msg-order-wrap { position: relative; }
  .msg-order-drop {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 8;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 170px; overflow-y: auto; padding: 4px;
  }
  .msg-order-drop button {
    display: block; width: 100%; padding: 8px 10px; text-align: left; border: none;
    background: none; color: var(--ink); font-size: 12.5px; cursor: pointer; border-radius: 7px;
  }
  .msg-order-drop button:hover { background: var(--hover); }
  .msg-order-drop .od-empty { padding: 8px 10px; font-size: 12px; color: var(--ink-faint); }
  .msg-my-list { margin-top: 14px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .msg-my-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }

  /* 微信式客服对话(2026.8.16) */
  .chat-box {
    max-height: 250px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
    padding: 4px 2px;
  }
  .chat-row { display: flex; align-items: flex-start; }
  .chat-row.user { justify-content: flex-end; }
  .chat-row.admin { justify-content: flex-start; }
  .chat-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: #E8EDF3; display: flex; align-items: center; justify-content: center;
    font-size: 14px; margin-right: 8px; flex-shrink: 0;
  }
  .chat-row.user .chat-avatar { order: 2; margin-right: 0; margin-left: 8px; background: #E8F0FE; }
  .chat-bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
  }
  .chat-row.user .chat-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
  .chat-row.admin .chat-bubble { background: #F1F3F5; color: var(--ink); border-bottom-left-radius: 3px; }
  .chat-meta { font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; text-align: right; }
  .chat-row.admin .chat-meta { text-align: left; }
  .chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
  .chat-input-row textarea { flex: 1; min-height: 46px; }
  /* width:auto 必须写死 —— 全局 .login-btn 是 width:100%（登录按钮要通栏），
     在 flex 行里 flex-shrink:0 + width:100% 会把 textarea 挤成一根细条（2026-09-15 实测修）。 */
  .chat-input-row .login-btn { width: auto; min-width: 88px; height: 46px; flex-shrink: 0; }
  .msg-my-item .mm-head { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: 11px; margin-bottom: 4px; }
  .msg-my-item .mm-body { color: var(--ink); line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
  .msg-my-item .mm-reply { margin-top: 6px; padding: 6px 8px; background: var(--accent-bg); border-radius: 8px; color: var(--ink); }
  .msg-my-item .mm-reply .mr-tag { font-weight: 700; color: var(--accent); font-size: 11.5px; margin-right: 6px; }
  .msg-item .msg-reply { margin-top: 6px; padding: 6px 8px; background: var(--accent-bg); border-radius: 8px; font-size: 12.5px; }
  .msg-item .msg-reply .mr-tag { font-weight: 700; color: var(--accent); }
  .msg-reply-input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; margin-top: 6px; background: var(--card); color: var(--ink); box-sizing: border-box; }
  .msg-reply-btn { margin-top: 6px; font-size: 12px; padding: 5px 14px; }
  .msg-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--hover);
    font-size: 14px;
  }
  .msg-item:last-child { border-bottom: none; }
  .msg-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-faint);
    margin-bottom: 4px;
  }
  .msg-at { flex-shrink: 0; }
  .msg-body { color: var(--ink); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

  .toast {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background: rgba(26,42,58,.92);
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    z-index: 200;
    transition: transform .25s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
  }
  .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

  /* ========== 首页三按钮(品类选择) ========== */
  .select-wrap {
    width: min(72%, 880px);
    margin-bottom: 0;
  }
  /* 优化③:视图容器占满页面宽度,内部元素保持原居中规则(修复容器化导致的偏左) */
  #homeView, #selectFlow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .home-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .home-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px 20px 28px;
    border: none;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    border: 1.5px solid transparent;
  }
  .home-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(26,42,58,.10); border-color: var(--accent-bg-2); }
  .home-card .hc-icon { font-size: 44px; line-height: 1; }
  .home-card .hc-name { font-size: 19px; font-weight: 700; color: var(--ink); }
  .home-card .hc-desc { font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; text-align: center; }
  .home-card .hc-arrow { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 4px; }
  .home-hint { text-align: center; margin-top: 22px; font-size: 12px; color: var(--ink-faint); }

  /* ========== 第一层选档 ========== */
  .tier-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
  .tier-head h2 { font-size: 26px; font-weight: 800; }
  .tier-hint { font-size: 13px; color: var(--ink-sub); margin-left: auto; }
  .back-link {
    border: 1px solid var(--border); background: var(--card); cursor: pointer;
    font-size: 13px; color: var(--ink-sub); font-family: inherit;
    padding: 7px 14px; border-radius: 10px; transition: all .15s ease;
    font-weight: 600;
  }
  .back-link:hover { border-color: var(--accent); color: var(--accent); background: var(--hover); }
  .tier-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
  .tier-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all .18s ease;
  }
  .tier-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(59,130,246,.10); transform: translateY(-2px); }
  .tier-card .tc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tier-card .tc-name { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); }
  .tier-card .tc-desc { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; line-height: 1.6; }
  .tier-card .tc-price { font-size: 19px; font-weight: 800; color: var(--accent); white-space: nowrap; }
  .tier-card .tc-price small { font-size: 12px; font-weight: 600; color: var(--ink-faint); }
  .tier-card .tc-go { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
  .tier-card.premium-card {
    border-style: dashed;
    background: linear-gradient(135deg, #FAFBFF, #F7F5FF);
  }
  .tier-card.premium-card:hover { border-color: var(--violet); box-shadow: 0 6px 18px rgba(139,92,246,.14); }
  .tier-card.premium-card .tc-name { color: var(--violet-dark); }
  .tier-card.premium-card .tc-price { color: var(--violet); }
  .tier-card.premium-card .tc-go { color: var(--violet); }
  .tier-foot { text-align: center; margin-top: 20px; font-size: 12px; color: var(--ink-faint); }

  /* ========== 订单模板:档位回显/加急/免费/专属 ========== */
  .tier-echo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--accent-bg);
    border: 1px solid var(--accent-bg-2);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
  }
  .tier-echo .echo-text { font-size: 14.5px; font-weight: 600; color: var(--accent-dark); line-height: 1.5; }
  .tier-echo .echo-text b { color: var(--accent); }
  .tier-echo .back-link { font-weight: 600; white-space: nowrap; }

  .urgent-row { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 14px; padding: 12px 16px; }
  .urgent-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; font-weight: 700; color: var(--warning-dark); cursor: pointer;
  }
  .urgent-label input[type=checkbox] {
    /* 2026-09-18：accent-color 原来是写死的 Tailwind 琥珀 #F59E0B，换成品牌赭黄（深浅主题各有一套） */
    width: 18px; height: 18px; accent-color: var(--warning, #A9651A); cursor: pointer;
  }
  .urgent-label b { color: var(--warning); }
  .urgent-tip { font-size: 12px; color: var(--warning-dark, #7E4B12); margin-top: 8px; line-height: 1.6; }
  /* 加急名额满了：整行收暗，勾不了（app.js 会把 checkbox 置 disabled） */
  .urgent-row.soldout { opacity: .72; }
  .urgent-row.soldout .urgent-label { cursor: not-allowed; }

  .free-note {
    background: linear-gradient(135deg, var(--danger-bg), var(--warn-bg));
    border: 1px dashed #FCA5A5;
    color: var(--danger-dark);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
  }

  /* 专属订单高级样式 */
  .composer.premium {
    border: 1.5px solid #C4B5FD;
    background: linear-gradient(180deg, #FBFAFF, var(--card) 26%);
    box-shadow: 0 8px 30px rgba(139,92,246,.12);
  }
  .composer.premium .premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--violet), var(--indigo));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    letter-spacing: 1px;
  }
  .composer.premium .field-label { color: var(--violet-dark); }
  .composer.premium .tier-echo { background: var(--violet-bg); border-color: #DDD6FE; }
  .composer.premium .tier-echo .echo-text { color: var(--violet-dark); }
  .composer.premium .submit-btn { background: linear-gradient(135deg, var(--violet), var(--indigo)); }
  .composer.premium .submit-btn:hover { background: linear-gradient(135deg, #7C3AED, #4F46E5); }

  .premium-note {
    font-size: 12.5px;
    color: var(--violet-dark);
    background: var(--violet-bg);
    border-left: 3px solid var(--violet);
    border-radius: 8px;
    padding: 10px 14px;
    line-height: 1.7;
    margin-top: 4px;
  }

  /* 订单表格:档位/价格/加急 */
  .td-tier { white-space: nowrap; font-size: 12.5px; color: var(--ink-sub); }
  .td-price { white-space: nowrap; font-weight: 700; color: var(--ink); }
  .td-price .free { color: var(--ok); }
  /* 2026-09-18：原来没有左边距，"¥2.26"与"未付款"是贴在一起的（表格与卡片里都能看到） */
  .td-price .wait-quote { color: var(--violet); font-weight: 600; margin-left: 6px; }
  .urgent-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--warning); margin-left: 6px; vertical-align: 1px; }
  .quote-hint { font-size: 12px; color: var(--violet-dark); font-weight: 600; }
  .quote-hint .qty { font-size: 15px; font-weight: 800; }

  /* 今日加急名额条 */
  .urgent-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warning-dark);
  }
  .urgent-bar .used { color: var(--warning); font-weight: 800; }
  .urgent-bar.full { background: var(--danger-bg); border-color: #FECACA; color: var(--danger-dark); }

  /* 品牌标题右侧小点:隐蔽管理员入口(悬停才显影) */
  .admin-dot {
    display: inline-block;
    font-size: 13px;
    color: transparent;
    cursor: default;
    user-select: none;
    padding: 0 6px;
    transition: color .2s ease;
  }
  .admin-dot:hover { color: rgba(26,42,58,.14); cursor: pointer; }

  /* 视觉隐藏但可访问(供文件输入使用,不影响布局) */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
  }

  /* 响应式 · 移动端适配 */
  @media (max-width: 640px) {
    .page { padding: 24px 14px 60px; }
    .user-zone { right: 12px; top: 12px; gap: 8px; }
    .round-btn { width: 40px; height: 40px; }
    .round-btn svg { width: 20px; height: 20px; }
    .brand { margin-top: 4vh; margin-bottom: 26px; }
    .brand .tip { font-size: 11px; line-height: 1.6; }

    /* 提交区:窄屏全宽 + 提交按钮通栏 */
    .composer { width: 100%; padding: 18px 16px 20px; }
    .submit-row { justify-content: stretch; }
    .submit-btn { width: 100%; justify-content: center; }
    .feedback-section { width: 100%; margin-top: 32px; }

    /* 列表/表格:窄屏贴边留白 + 横向滚动顺滑 */
    .list-view { width: 100%; padding: 0 14px; margin-top: 4vh; }
    .list-header { margin-bottom: 14px; }
    .list-header h2 { font-size: 19px; }
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .order-table th, .order-table td { padding: 10px 12px; }

    /* 控制台:按钮通栏竖排 */
    .console-bar { flex-direction: column; gap: 10px; }
    .ctrl-btn { width: 100%; text-align: center; }

    /* 弹窗:边距收紧 + 登录行竖排 */
    .modal-mask { padding: 12px; }
    .modal { padding: 24px 18px 20px; }
    .form-row { flex-direction: column; }
    .form-row .code-btn { width: 100%; padding: 12px; }
    .svc-form .login-btn { width: 100%; min-width: 0; align-self: stretch; }
    /* 2026-09-19：上面这条会把「客服弹窗里跟输入框同一行的发送按钮」也弄成通栏 ——
       通栏后 textarea 被 flex 挤成 26px 的一根竖缝，手机客户看不见自己打的字（线上 390 实测复现）。
       这里用同优先级、更靠后的选择器把发送按钮还原成固定宽（与 1091 行那条保持一致）。 */
    .chat-input-row .login-btn { width: auto; min-width: 76px; flex: 0 0 auto; align-self: auto; }

    /* 留言列表:头部可换行 */
    .msg-head { flex-direction: column; align-items: flex-start; gap: 2px; }

    /* 素材区:chip 撑满一行可滚动省略 */
    .upload-zone { padding: 10px; }
    .file-chip { max-width: 100%; }

    /* 反馈卡片 */
    .fb-card { padding: 14px 16px; }
    .fb-card .fb-text { font-size: 13.5px; }

    /* 首页三按钮:竖排通栏 */
    .home-cards { grid-template-columns: 1fr; gap: 12px; }
    .home-card { padding: 22px 16px; flex-direction: row; text-align: left; gap: 14px; }
    .home-card .hc-icon { font-size: 32px; }
    .home-card .hc-arrow { margin-top: 0; margin-left: auto; }
    .tier-head h2 { font-size: 22px; }
    .tier-card { padding: 15px 16px; gap: 12px; }
    .tier-card .tc-price { font-size: 17px; }
    .tier-card .tc-go { display: none; }
    .tier-echo { flex-direction: column; align-items: flex-start; gap: 6px; }
    .urgent-row { padding: 11px 13px; }
  }

  /* ============================================================
     溪雨 v3 品牌升级覆盖层 —— 2026.8.19 第三次更新·全部更新设计
     策略:纯 CSS 覆盖(变量重声明 + 组件样式),JS/class/id 一行未动
     决策单:工作\溪雨ai工具\设计决策单.md
     品牌体系:深蓝 #0F2B4C 系(信任/专业) + 品牌橙 #F59E0B(唯一 CTA 色)
     ============================================================ */

  /* ---------- 1. 品牌变量重声明(浅色) ---------- */
  :root {
    /* 品牌主色 */
    --brand: #0F2B4C;
    --brand-mid: #16385F;
    --brand-bright: #1E4A7A;
    /* 背景/卡片 */
    --bg: #F6F8FB;
    --card: #FFFFFF;
    --block: #FAFCFE;
    /* 文字 */
    --ink: #0F2B4C;
    --ink-sub: #3D5368;
    --ink-faint: #8BA0B4;
    --ink-soft: #5A7188;
    /* 交互/高亮(通用,克制) */
    --accent: #16385F;
    --accent-dark: #0F2B4C;
    --accent-bg: #EAF1F9;
    --accent-bg-2: #C9DCF0;
    /* 行动号召(唯一橙) */
    --cta: #F59E0B;
    --cta-dark: #D97706;
    /* 线/面 */
    --line: #E6ECF2;
    --border: #D3DEE9;
    --hover: #F0F4F8;
    /* 语义色 */
    --danger: #E11D48;
    --danger-dark: #BE123C;
    --danger-bg: #FEF0F3;
    --ok: #16A34A;
    --ok-dark: #15803D;
    --ok-bg: #E7F6EC;
    --violet: #7C6CF0;
    --violet-dark: #5B4FD6;
    --violet-bg: #F0EEFD;
    --warning: #EA580C;
    --warning-dark: #9A3412;
    --warn-bg: #FEF4E8;
    --warn-line: #FCD9A8;
    --indigo: #6366F1;
    /* 版式 */
    --radius: 16px;
    --radius-lg: 20px;
    --content-width: 1120px;
    --shadow: 0 2px 4px rgba(15,43,76,.05), 0 12px 32px rgba(15,43,76,.08);
    --shadow-hover: 0 6px 16px rgba(15,43,76,.10), 0 18px 44px rgba(15,43,76,.14);
  }

  /* ---------- 2. 品牌变量重声明(深色) ---------- */
  html[data-theme="dark"] {
    --bg: #0B1A30;
    --card: #12233C;
    --block: #152440;
    --ink: #E6EDF5;
    --ink-sub: #A9BBD0;
    --ink-faint: #7C90A8;
    --ink-soft: #94A3B8;
    --accent: #7FA8E0;
    --accent-dark: #5B8ACB;
    --accent-bg: #1A3050;
    --accent-bg-2: #24406A;
    --line: #20365B;
    --border: #2C456E;
    --hover: #162940;
    --danger: #F87171;
    --danger-dark: #FCA5A5;
    --danger-bg: #3A1D28;
    --ok: #4ADE80;
    --ok-dark: #22C55E;
    --ok-bg: #16321F;
    --violet: #A78BFA;
    --violet-dark: #8B5CF6;
    --violet-bg: #312E45;
    --warning: #FB923C;
    --warning-dark: #FDBA74;
    --warn-bg: #3A2E1A;
    --warn-line: #78350F;
    --indigo: #818CF8;
    --shadow: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
    --shadow-hover: 0 8px 20px rgba(0,0,0,.50), 0 20px 48px rgba(0,0,0,.55);
  }

  /* ---------- 3. 内容版心(全站 1120 网格) ---------- */
  .select-wrap, .composer, .feedback-section { width: min(72%, var(--content-width)); }

  /* ---------- 4. Hero 品牌深蓝大色域(破格点,锚点2) ---------- */
  .brand {
    position: relative;
    width: calc(100% + 48px);
    margin: -48px -24px 40px;
    padding: 7vh 24px 54px;
    overflow: hidden;
    background: linear-gradient(165deg, #0F2B4C 0%, #16385F 52%, #1E4A7A 100%);
    text-align: center;
  }
  /* 微网格纹理(装饰手法1) */
  .brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
  }
  /* 右上暖橙光晕(品牌橙呼应,装饰手法2) */
  .brand::after {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(245,158,11,.22), rgba(245,158,11,0) 62%);
    pointer-events: none;
  }
  .brand h1 {
    position: relative;
    z-index: 1;
    font-size: clamp(40px, 5.5vw, 52px);
    font-weight: 700;
    letter-spacing: 3px;
    color: #FFFFFF;
    text-shadow: 0 2px 18px rgba(0,0,0,.22);
    animation: brandFadeUp .5s ease-out both;
  }
  .brand .subtitle {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(255,255,255,.88);
  }
  .brand .tip {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: .4px;
    color: rgba(255,255,255,.66);
  }
  .brand-logo { box-shadow: 0 6px 22px rgba(0,0,0,.30), 0 0 0 3px rgba(255,255,255,.10); }
  .brand .admin-dot:hover { color: rgba(255,255,255,.35); }
  @keyframes brandFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  html[data-theme="dark"] .brand {
    background: linear-gradient(165deg, #10294A 0%, #16385F 55%, #1D4A78 100%);
    border-bottom: 1px solid rgba(127,168,224,.18);
  }

  /* ---------- 5. 首页服务卡(home-card,母版-01 错落三栏) ---------- */
  .home-cards { gap: 20px; }
  .home-card {
    padding: 36px 22px 30px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(135deg, rgba(22,56,95,.28), rgba(245,158,11,.16)) border-box;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  /* 错落:中卡下沉 */
  .home-card:nth-child(2) { margin-top: 14px; }
  .home-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(135deg, var(--brand-mid), var(--cta)) border-box;
  }
  .home-card .hc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px; height: 78px;
    border-radius: 22px;
    font-size: 40px;
    transition: transform .2s ease;
  }
  /* 分类渐变图标底(Word 蓝/Excel 绿/敬请期待橙,顺序固定) */
  .home-card:nth-child(1) .hc-icon { background: linear-gradient(135deg, #EAF1F9, #D6E4F5); }
  .home-card:nth-child(2) .hc-icon { background: linear-gradient(135deg, #E7F6EC, #CBEADC); }
  .home-card:nth-child(3) .hc-icon { background: linear-gradient(135deg, #FEF3E2, #FBE0BE); }
  .home-card:hover .hc-icon { transform: scale(1.05); }
  .home-card .hc-name { font-size: 20px; font-weight: 600; }
  .home-card .hc-desc { font-size: 13px; color: var(--ink-sub); }
  .home-card .hc-arrow {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    padding: 6px 14px;
    border: 1.5px solid var(--accent-bg-2);
    border-radius: 999px;
    transition: all .2s ease;
  }
  /* 悬停时箭头=橙(瞬态 CTA,常驻橙仅提交按钮) */
  .home-card:hover .hc-arrow { color: #fff; background: var(--cta); border-color: var(--cta); }
  html[data-theme="dark"] .home-card {
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(135deg, rgba(127,168,224,.40), rgba(245,158,11,.25)) border-box;
  }
  html[data-theme="dark"] .home-card:hover {
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(135deg, #7FA8E0, #F59E0B) border-box;
  }

  /* ---------- 6. 档位选择(tier 强化,母版-10 大数字) ---------- */
  .tier-head h2 { font-size: 28px; }
  .tier-card {
    border: 1.5px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 20px 24px;
  }
  .tier-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
  }
  .tier-card .tc-price { font-size: 24px; }
  .tier-card .tc-go { color: var(--accent); font-weight: 600; }
  .tier-echo { background: var(--accent-bg); border: 1px solid var(--accent-bg-2); border-left: 4px solid var(--accent); }

  /* ---------- 7. 下单表单 A-E 步骤化分块(母版-08) ---------- */
  .composer {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
  }
  .composer:focus-within { box-shadow: var(--shadow-hover); }
  .composer .field-block:not(.urgent-row):not(.premium-note) {
    background: var(--block);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 16px 16px;
    margin-bottom: 14px;
  }
  .composer .field-label {
    font-size: 15px;
    padding-left: 11px;
    border-left: 3px solid var(--accent);
  }
  .composer.premium .field-block:not(.urgent-row):not(.premium-note) {
    background: var(--violet-bg);
    border-color: #DDD6FE;
  }
  .composer.premium .field-label { border-left-color: var(--violet); }
  .name-input, textarea.req-input {
    border-radius: 12px;
    border-color: var(--border);
    background: var(--card);
  }
  .name-input:focus, textarea.req-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22,56,95,.12);
  }
  .preset-chip { border-radius: 999px; border-color: var(--border); }
  .preset-chip.on { background: var(--accent); border-color: var(--accent); }
  .upload-zone { border-color: var(--accent-bg-2); background: var(--bg); border-radius: 16px; }
  .file-chip { background: var(--accent-bg); color: var(--accent-dark); border-color: var(--accent-bg-2); }

  /* ---------- 8. 提交按钮=品牌橙 CTA(锚点1,全站唯一常驻橙) ---------- */
  .submit-btn {
    background: linear-gradient(135deg, #F59E0B, #E8930C);
    border-radius: 14px;
    padding: 13px 40px;
    font-size: 15.5px;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(245,158,11,.35);
  }
  .submit-btn:hover {
    background: linear-gradient(135deg, #D97706, #C96B05);
    box-shadow: 0 10px 24px rgba(217,119,6,.40);
    transform: translateY(-1px);
  }
  /* 专属单保持紫色 CTA(高级语义,不被橙覆盖) */
  .composer.premium .submit-btn { background: linear-gradient(135deg, var(--violet), var(--indigo)); box-shadow: none; }
  .composer.premium .submit-btn:hover { background: linear-gradient(135deg, #7C3AED, #4F46E5); }

  /* ---------- 9. 模板卡(母版-07 案例卡:缩略图+悬停上浮) ---------- */
  .template-grid { gap: 14px; }
  .template-card {
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(15,43,76,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--accent-bg-2); }
  .template-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,56,95,.12); }
  .template-preview { border-radius: 10px; height: 132px; }
  /* 样张缩略图外面的 <picture> 必须显式撑满，里面 img 的 width/height:100% 才有正确参照(2026.9.15 阶段9) */
  .template-preview picture { display: block; width: 100%; height: 100%; }
  .template-card .tc-name { font-size: 13px; }
  .template-card .tc-desc { font-size: 11.5px; color: var(--ink-faint); }

  /* ---------- 10. 服务反馈区(左竖条品牌蓝) ---------- */
  .feedback-section h2 { font-size: 26px; margin-bottom: 16px; }
  .feedback-section h2 .bar { width: 5px; height: 24px; background: var(--accent); }
  .feedback-section h2 .sub { font-size: 13px; margin-left: 4px; }
  .fb-card {
    border-radius: 16px;
    border-left: 4px solid var(--accent);
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .fb-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

  /* ---------- 11. 列表页/弹窗/通用 ---------- */
  .list-header h2 { border-left: 4px solid var(--accent); padding-left: 12px; }
  .home-orders { box-shadow: var(--shadow); border: 1px solid var(--line); }
  .modal { border-radius: var(--radius-lg); }
  .modal h2 { font-size: 21px; }
  .login-btn { border-radius: 12px; }
  .back-btn, .back-link, .ctrl-btn { border-radius: 12px; }

  /* ---------- 12. 深色微调 ---------- */
  html[data-theme="dark"] .name-input:focus, html[data-theme="dark"] textarea.req-input:focus {
    box-shadow: 0 0 0 3px rgba(127,168,224,.15);
  }
  html[data-theme="dark"] .template-card.on { box-shadow: 0 0 0 3px rgba(127,168,224,.20); }

  /* ---------- 13. 移动端适配(v3) ---------- */
  @media (max-width: 640px) {
    .brand {
      width: calc(100% + 28px);
      margin: -24px -14px 30px;
      padding: 5vh 16px 44px;
    }
    .brand h1 { font-size: 34px; letter-spacing: 2px; }
    .select-wrap, .composer, .feedback-section { width: 100%; }
    .home-card:nth-child(2) { margin-top: 0; }
    .home-card { padding: 24px 18px; }
    .home-card .hc-icon { width: 62px; height: 62px; font-size: 32px; }
    .composer .field-block:not(.urgent-row):not(.premium-note) { padding: 12px 13px 14px; }
  }

  /* ---------- 14. v3 首轮微调(审图 2026.8.19:对比度可修项) ---------- */
  .home-card .hc-desc { font-size: 13.5px; }
  .tier-foot, .fb-hint, .home-hint, .upload-hint { color: var(--ink-soft); }
  html[data-theme="dark"] .home-card .hc-arrow {
    color: #A9C4EA;
    border-color: rgba(127,168,224,.45);
  }

/* ============================================================================
 * 溪雨 v4 品牌升级层 —— 2026-09-14（大副 · 夜）
 * 依据：新 logo（宣纸底 + 朱红毛笔书法「溪雨」+ 细红水波 + 方形印章）
 *       新宗旨「最真诚的克制，最认真的设计，最真挚的敬意。」
 * 策略：沿用 v3 的「纯 CSS 覆盖」——重声明变量 + 覆盖组件样式，JS / class / id 一行未动
 * 配色全部取自 logo 本身：宣纸 #F6F1E7 · 墨 #1F1A17 · 朱砂 #C4161C（只做点睛，不做大面积色块）
 * 与 v3 的差别（都由「克制」这条宗旨管）：去深蓝大色块、去渐变描边、去投影堆砌、
 *       去三色图标底、去错落下沉 → 宣纸留白 + 细线分隔 + 衬线标题 + 朱砂点睛
 * 图片：assets/brand/（纸底 logo-full.jpg / 透明 logo-transparent*.png / seal.png / favicon-*）
 *       2026-09-15 首屏减重：hero 与白字版各有 WebP 版（logo-hero.webp / logo-hero-white.webp），
 *       前者配 <picture> 回落、后者配 image-set 回落；seal.png 已按显示尺寸(28px)的 3 倍重采样。
 * ========================================================================== */

  /* ---------- 1. 品牌变量(浅色:宣纸 + 墨 + 朱砂) ---------- */
  :root {
    --paper:       #F6F1E7;
    --paper-2:     #FBF8F2;
    --paper-dim:   #F1EADC;
    --vermilion:   #C4161C;
    --vermilion-d: #9E1116;
    --vermilion-l: #F7EAE7;

    --bg:    var(--paper);
    --card:  var(--paper-2);
    --block: var(--paper-2);

    --ink:       #1F1A17;
    --ink-sub:   #4A423B;
    --ink-soft:  #6E655D;
    --ink-faint: #8A8078;

    --brand:        var(--ink);
    --brand-mid:    #2E2723;
    --brand-bright: #4A423B;

    --accent:      var(--vermilion);
    --accent-dark: var(--vermilion-d);
    --accent-bg:   var(--vermilion-l);
    --accent-bg-2: #E7D2CB;
    --cta:         var(--vermilion);
    --cta-dark:    var(--vermilion-d);

    --line:   #E8E1D5;
    --border: #DCD2C2;
    --hover:  #F1EADF;

    /* 语义色收进「宣纸 · 墨 · 朱砂」这一族（2026-09-15）。
       原来 --ok 是冷绿、--violet/--indigo 是冷紫蓝 —— 它们和 logo 的宣纸/朱砂不同族，
       全站扫一眼就能看出"这几个颜色不是这套东西的"。现在换成同族的暖调：
       **语义一个没动**（好=墨绿 / 等待=赭褐 / 次要=深墨褐），只是把外来的冷色请出去。
       白底与宣纸底(#F6F1E7)对比度都实测过：墨绿 6.98/6.20、赭褐 6.18/5.49 ——
       比原来的绿(5.24/4.66)、紫(5.92/5.25)反而更高，可读性没让步。
       danger(红) 与 warning(赭黄) 本来就是暖色族，保持原样。 */
    --ok: #3F6146;      --ok-dark: #2F4A35;     --ok-bg: #E8EFE7;
    --danger: #B3261E;  --danger-dark: #8E1D16; --danger-bg: #F6E7E4;
    --warning: #A9651A; --warning-dark: #7E4B12; --warn-bg: #F7EEDF; --warn-line: #E4D2AE;
    --violet: #7C5A42;  --violet-dark: #5E4230; --violet-bg: #F2EAE1;
    --indigo: #6B5344;

    --radius: 10px;
    --radius-lg: 14px;
    --content-width: 1040px;
    --shadow: 0 1px 2px rgba(31,26,23,.03);
    --shadow-hover: 0 6px 18px rgba(31,26,23,.07);
    --hairline: 1px solid var(--line);

    --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "Songti TC", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }

  /* ---------- 2. 品牌变量(深色:墨底 + 米白字 + 朱砂提亮) ---------- */
  html[data-theme="dark"] {
    --paper:     #17130F;
    --paper-2:   #1F1A15;
    --paper-dim: #241E18;
    --vermilion:   #E0554A;
    --vermilion-d: #F0705F;
    --vermilion-l: #2E1A17;

    --bg:    var(--paper);
    --card:  var(--paper-2);
    --block: var(--paper-dim);

    --ink:       #EDE6DA;
    --ink-sub:   #C6BCAD;
    --ink-soft:  #A79C8C;
    --ink-faint: #8A8078;

    --brand:        var(--ink);
    --brand-mid:    #C6BCAD;
    --brand-bright: #EDE6DA;

    /* accent/cta 必须显式重声明:v3 的深色块把它们设成蓝 #7FA8E0,不写就会被蓝色翻盘 */
    --accent:      var(--vermilion);
    --accent-dark: var(--vermilion-d);
    --cta:         var(--vermilion);
    --cta-dark:    var(--vermilion-d);
    --accent-bg:   var(--vermilion-l);
    --accent-bg-2: #4A2C26;

    --line:   #332B23;
    --border: #3E352B;
    --hover:  #262019;

    --ok: #6FBF87;      --ok-dark: #8FD4A3;     --ok-bg: #1B2A1F;
    --danger: #E08A80;  --danger-dark: #F0A79E; --danger-bg: #331D18;
    --warning: #D9A05B; --warning-dark: #E8BC85; --warn-bg: #2E2419; --warn-line: #4A3A22;
    --violet: #A99BC4;  --violet-dark: #C0B4D6; --violet-bg: #262130;
    --shadow: 0 1px 2px rgba(0,0,0,.40);
    --shadow-hover: 0 8px 22px rgba(0,0,0,.45);
  }

  /* ---------- 3. 版式基调(标题衬线,正文系统无衬线) ---------- */
  .brand .creed, .brand .subtitle, .brand .tip,
  .brand h1, h2, h3, .hc-name, .ho-head h3, .tpl-full-title {
    font-family: var(--font-serif);
  }
  h2, h3 { font-weight: 600; letter-spacing: .04em; }
  .feedback-section h2, .list-header h2, .modal h2, .tier-head h2 { font-weight: 600; letter-spacing: .06em; }
  .order-table th { color: var(--ink-sub); letter-spacing: .06em; }
  .home-hint, .tier-foot, .fb-hint, .upload-hint { letter-spacing: .04em; }
  .brand h1 { color: var(--ink); text-shadow: none; }   /* v3 给 h1 写了白色+文字投影(现在 h1 里只有图) */
  .home-card { color: var(--ink); }                     /* button 默认黑字,统一到墨色 */

  /* ---------- 4. Hero:宣纸留白 + 书法 logo + 宗旨 ---------- */
  .brand {
    position: relative;
    width: 100%;              /* 撑满内容区:否则 .brand 会缩到文字宽,宗旨两侧的细线没地方站 */
    margin: 0 0 52px;
    padding: 5vh 0 0;
    background: none;
    overflow: visible;
  }
  .brand::before { display: none; }            /* 去 v3 的深蓝网格纹理 */
  .brand::after {                              /* 去 v3 的橙色光晕 → 一道细短线收尾 */
    content: '';
    position: static;
    display: block;
    top: auto; right: auto;
    width: 56px; height: 1px;
    margin: 38px auto 0;
    background: var(--border);
  }
  .brand-row { display: block; }
  /* <picture> 默认是行内元素,会在图片下方留出行盒基线间隙 —— 必显式 block */
  .brand-row picture { display: block; }
  .brand-logo {
    display: block;
    width: clamp(244px, 32vw, 440px);
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    /* 用材:logo-hero.png = assets/brand/logo-transparent.png 按内容居中重裁(原画布内容偏右 5.6%,
       且只占 44% 宽 → 直接显示会既偏心又偏小)。真透明 + 对称留边 → 朱红书法直接落在宣纸上,
       没有纸底色块、不依赖 mask/blend(浏览器兼容与层叠上下文都不再是变量)。 */
  }
  .brand .creed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 980px;
    margin: 34px auto 0;
    padding: 0 4px;
    font-size: clamp(16px, 2.05vw, 22px);
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.9;
    color: var(--ink);
  }
  /* 宗旨是一句话,宽屏上不许折行(折了之后两侧细线会落在折缝上,很难看) */
  /* ── 宗旨的三个词：克制 / 设计 / 敬意（2026-09-15 总控师要的交互）────────
     鼠标移到哪个词上，它前面那半句（"最真诚的"）才浮出来；默认只有三个词。
     半句用**绝对定位**挂在词的上方 —— 必须这样，否则它一出现就会把另外两个词挤开。 */
  .brand .creed > .creed-word {
    white-space: nowrap;
    position: relative;
    transition: color .22s ease;
  }
  .brand .creed > .creed-word > i {
    font-style: normal;
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translate(-50%, 4px);
    white-space: nowrap;
    font-size: .66em;
    letter-spacing: .14em;
    color: var(--accent);
    opacity: 0;
    pointer-events: none;                 /* 别挡住鼠标，否则会出现"一闪一闪" */
    transition: opacity .22s ease, transform .22s ease;
  }
  .brand .creed > .creed-word:hover,
  .brand .creed > .creed-word:focus-visible { color: var(--accent); }
  .brand .creed > .creed-word:hover > i,
  .brand .creed > .creed-word:focus-visible > i {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  /* 触摸设备没有 hover —— 不能把那半句藏成永远看不到：
     直接平铺成完整的那句话（手机上看到的就是完整宗旨）。 */
  @media (hover: none) {
    .brand .creed > .creed-word > i {
      position: static;
      transform: none;
      opacity: 1;
      font-size: .82em;
      letter-spacing: .06em;
      color: inherit;
      margin-right: 2px;
    }
    .brand .creed > .creed-word:not(:last-child)::after { content: '，'; }
  }
  .brand .creed::before,
  .brand .creed::after {
    content: '';
    flex: 0 0 84px;           /* 定长:不能被文字挤成 0(挤没了等于没画) */
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border));
  }
  .brand .creed::after { background: linear-gradient(90deg, var(--border), transparent); }
  /* 放不下一整行时(窄屏/平板)改为折行,并撤掉两侧细线——线落在折缝上比没有线更难看 */
  @media (max-width: 900px) {
    .brand .creed > span { white-space: normal; }
    .brand .creed::before, .brand .creed::after { display: none; }
  }
  .brand .subtitle {
    margin-top: 20px;
    font-size: clamp(13.5px, 1.6vw, 15.5px);
    letter-spacing: .10em;
    color: var(--ink-sub);
  }
  .brand .subtitle #brandTitle { color: var(--ink); font-weight: 600; letter-spacing: .22em; }
  .brand .tip {
    margin-top: 12px;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--ink-faint);
  }
  .brand .admin-dot:hover { color: var(--ink-faint); }

  /* ---------- 5. 首页三卡:细线纸卡(去渐变描边 / 去错落下沉) ---------- */
  .home-cards { gap: 18px; }
  .home-card {
    padding: 32px 22px 26px;
    background: var(--card);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .home-card:nth-child(2) { margin-top: 0; }
  .home-card:hover {
    transform: translateY(-2px);
    border-color: var(--vermilion);
    box-shadow: var(--shadow-hover);
    background: var(--card);
  }
  .home-card:nth-child(1) .hc-icon,
  .home-card:nth-child(2) .hc-icon,
  .home-card:nth-child(3) .hc-icon {
    width: 58px; height: 58px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 26px;
  }
  .home-card:hover .hc-icon { transform: none; border-color: var(--vermilion); background: var(--vermilion-l); }
  .home-card .hc-name { font-size: 19px; font-weight: 600; letter-spacing: .08em; }
  .home-card .hc-desc { font-size: 13px; color: var(--ink-soft); }
  .home-card .hc-arrow {
    color: var(--ink-sub);
    background: none;
    border: 1px solid var(--border);
    padding: 5px 15px;
    font-size: 12.5px;
    letter-spacing: .08em;
  }
  .home-card:hover .hc-arrow { color: #fff; background: var(--vermilion); border-color: var(--vermilion); }

  /* ---------- 6. 档位与下单表单:细线分块 ---------- */
  .tier-head h2 { font-size: 24px; }
  .tier-card {
    background: var(--card);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 20px 22px;
  }
  .tier-card:hover { border-color: var(--vermilion); box-shadow: var(--shadow-hover); transform: none; }
  .tier-card .tc-price { font-size: 22px; }
  .tier-card .tc-go { color: var(--vermilion); font-weight: 600; letter-spacing: .06em; }
  .tier-echo { background: var(--vermilion-l); border: 1px solid var(--accent-bg-2); border-left: 3px solid var(--vermilion); }
  .composer { background: var(--card); border: var(--hairline); border-radius: var(--radius-lg); box-shadow: none; }
  .composer:focus-within { box-shadow: var(--shadow-hover); }
  .composer .field-block:not(.urgent-row):not(.premium-note) {
    background: var(--bg);
    border: var(--hairline);
    border-radius: var(--radius);
  }
  .composer .field-label { border-left: 2px solid var(--vermilion); padding-left: 10px; letter-spacing: .04em; }
  .composer.premium .field-block:not(.urgent-row):not(.premium-note) { background: var(--violet-bg); border-color: var(--accent-bg-2); }
  .composer.premium .field-label { border-left-color: var(--violet); }
  .name-input, textarea.req-input { background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius); }
  .name-input:focus, textarea.req-input:focus { border-color: var(--vermilion); box-shadow: 0 0 0 3px rgba(196,22,28,.10); }
  .preset-chip { background: var(--paper-2); border: 1px solid var(--border); color: var(--ink-sub); }
  .preset-chip.on { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
  .upload-zone { background: var(--paper-dim); border: 1px dashed var(--border); border-radius: var(--radius); }
  .file-chip { background: var(--vermilion-l); color: var(--vermilion-d); border: 1px solid var(--accent-bg-2); }
  .template-card { background: var(--card); border: var(--hairline); border-radius: var(--radius); box-shadow: none; }
  .template-card:hover { transform: none; border-color: var(--vermilion); box-shadow: var(--shadow-hover); }
  .template-card.on { border-color: var(--vermilion); box-shadow: 0 0 0 2px var(--vermilion-l); }

  /* ---------- 7. 按钮:朱砂=印章(小圆角直角感,全站唯一常驻红) ---------- */
  .submit-btn {
    background: var(--vermilion);
    border: 0;
    border-radius: 4px;
    padding: 13px 42px;
    font-size: 15px;
    letter-spacing: .16em;
    box-shadow: none;
  }
  .submit-btn:hover { background: var(--vermilion-d); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(196,22,28,.16); }
  .composer.premium .submit-btn { background: var(--ink); box-shadow: none; }
  .composer.premium .submit-btn:hover { background: var(--brand-mid); }
  .login-btn, .ctrl-btn, .back-btn, .back-link, .mini-btn, .code-btn { border-radius: 4px; }
  .login-btn:disabled { background: var(--paper-dim); color: var(--ink-faint); }   /* 旧版是硬编码浅蓝 #BFD3F8 */

  /* ---------- 8. 反馈区:印章作区块角标(低存在感) ---------- */
  .feedback-section { position: relative; }
  .feedback-section::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 28px; height: 28px;
    opacity: .42;
    background: url("/assets/brand/seal.png") center / contain no-repeat;
    pointer-events: none;
  }
  .feedback-section h2 { font-size: 20px; }
  .feedback-section h2 .bar { width: 3px; height: 17px; border-radius: 0; background: var(--vermilion); }
  .fb-card { background: var(--card); border: var(--hairline); border-left: 3px solid var(--vermilion); border-radius: var(--radius); box-shadow: none; }
  .fb-card:hover { transform: none; box-shadow: var(--shadow-hover); }
  .list-header h2 { border-left: 3px solid var(--vermilion); padding-left: 12px; }

  /* ---------- 9. 列表 / 表格 / 弹窗 ---------- */
  .table-card { background: var(--card); border: var(--hairline); border-radius: var(--radius); box-shadow: none; }
  .order-table th { background: var(--paper-dim); border-bottom: 1px solid var(--border); }
  .order-table td { border-bottom: 1px solid var(--line); }
  .order-table tbody tr:hover { background: var(--hover); }
  .status-pill.pending { color: var(--warning-dark); border-color: var(--warn-line); }
  .status-pill.received { background: var(--vermilion-l); color: var(--vermilion-d); border-color: var(--accent-bg-2); }
  .status-pill.done { border-color: rgba(47,122,75,.28); }
  .mini-btn.feedback-done { color: var(--ink-faint); }
  .ctrl-btn.danger { border-color: rgba(179,38,30,.40); }
  .modal-mask { background: rgba(31,26,23,.42); }
  .modal {
    background: var(--card);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(31,26,23,.16);
  }
  /* 提示条:旧版是硬编码墨蓝,改用墨色(深色主题下反相为米白底墨字) */
  .toast { background: rgba(31,26,23,.94); color: var(--paper); border-radius: 4px; letter-spacing: .06em; }
  html[data-theme="dark"] .toast { background: rgba(237,230,218,.94); color: #17130F; }

  /* ---------- 10. 深色主题:换米白字版 logo(纸底版在墨底上会露出一块白) ---------- */
  html[data-theme="dark"] .brand-logo { display: none; }
  html[data-theme="dark"] .brand-row::after {
    content: '';
    display: block;
    width: clamp(244px, 32vw, 440px);
    aspect-ratio: 768 / 411;
    margin: 0 auto;
    /* 第一行给不认识 image-set 的浏览器兜底，后两行 webp 优先（40.8KB vs 79.1KB，逐像素无损） */
    background: url("/assets/brand/logo-hero-white.png") center / contain no-repeat;
    background-image: -webkit-image-set(url("/assets/brand/logo-hero-white.webp") 1x type("image/webp"),
                                        url("/assets/brand/logo-hero-white.png") 1x type("image/png"));
    background-image: image-set(url("/assets/brand/logo-hero-white.webp") type("image/webp"),
                                url("/assets/brand/logo-hero-white.png") type("image/png"));
  }
  html[data-theme="dark"] .home-card:hover .hc-arrow { color: #17130F; }
  html[data-theme="dark"] .name-input:focus,
  html[data-theme="dark"] textarea.req-input:focus { box-shadow: 0 0 0 3px rgba(224,85,74,.18); }
  /* v3 的深色块用 html[data-theme="dark"] 提了一级优先级(渐变底/蓝描边),
     这里必须同等优先级压回去,否则深色下首页卡、hero、模板选中态会露出旧蓝色系 */
  html[data-theme="dark"] .brand { background: none; border-bottom: 0; }
  html[data-theme="dark"] .home-card { background: var(--card); }
  html[data-theme="dark"] .home-card:hover { background: var(--card); }
  html[data-theme="dark"] .home-card .hc-arrow { color: var(--ink-sub); border-color: var(--border); }
  html[data-theme="dark"] .template-card.on { box-shadow: 0 0 0 2px var(--vermilion-l); }
  html[data-theme="dark"] .feedback-section::after { opacity: .5; }

  /* ---------- 10b. 内页细节:删除钮 / 样张占位 / 全屏查看器(清掉旧石板灰) ---------- */
  .file-item .fdel, .img-item .fdel, .img-group-head .g-del { color: var(--ink-faint); }
  .file-item .fdel:hover, .img-item .fdel:hover, .img-group-head .g-del:hover { color: var(--vermilion); }
  .tpl-zoom { background: rgba(31,26,23,.55); }
  .tpl-zoom:hover { background: rgba(31,26,23,.85); }
  .tpl-zoom-pct { color: rgba(246,241,231,.75); }
  .tpl-page-num { color: rgba(246,241,231,.62); }
  .tpl-modal-tip { color: rgba(246,241,231,.62); }
  /* 模板样张占位块:旧版 13 套彩色渐变(蓝/绿/橙/紫) → 统一成宣纸底 + 墨字,与全站同一张纸 */
  .tp-gu, .tp-simple, .tp-wa, .tp-wb, .tp-wc, .tp-ea, .tp-eb, .tp-ec,
  .tp-p1, .tp-p2, .tp-p3, .tp-p4, .tp-p5, .tp-p6 {
    background: var(--paper-dim);
    border: 1px solid var(--line);
    color: var(--ink-sub);
    font-size: 12px;
    letter-spacing: .04em;
  }
  .tp-none { background: var(--paper-dim); border: 1px dashed var(--border); color: var(--ink-faint); }
  .template-preview { color: var(--ink-sub); }

  /* ---------- 11. 移动端与偏好 ---------- */
  @media (max-width: 640px) {
    .brand { margin: 0 0 34px; padding: 3.5vh 0 0; }
    .brand-logo { width: min(72vw, 300px); }
    .brand .creed { gap: 10px; font-size: 15px; letter-spacing: .10em; }
    .brand .subtitle { letter-spacing: .06em; }
    .select-wrap, .composer, .feedback-section { width: 100%; }
    .home-card:nth-child(2) { margin-top: 0; }
    .home-card { padding: 24px 18px; }
    .home-card .hc-icon { width: 52px; height: 52px; font-size: 24px; }
    .submit-btn { padding: 12px 28px; }
    html[data-theme="dark"] .brand-row::after { width: min(72vw, 300px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand h1 { animation: none; }
  }

  /* ---------- 12. 图标:线性 SVG 取代彩色 emoji ----------
     彩色 emoji 自带配色(Word 蓝、Excel 三色、太阳橙黄),在宣纸·墨·朱砂体系里就是一堆外来色块;
     而且各系统字形不同、不随主题变色。改用 sprite + <use> + currentColor:
     图标本体只在 index.html 定义一次,颜色由 CSS 给 —— 一处改,全站(含深色)跟着变。 */
  .ico {
    width: 1em; height: 1em;
    display: inline-block;
    vertical-align: -.13em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .home-card .hc-icon { color: var(--vermilion); font-size: 28px; }
  .home-card:hover .hc-icon { color: var(--vermilion-d); }
  .theme-toggle .ico { width: 18px; height: 18px; }
  /* 手机(390px)上「开始选择 →」曾折成两行 —— 按钮 76px 宽、文字 12.5px,窄屏必折。
     不折行之后它会挤窄描述(一度把「· 按文件大小定价」挤成三行、"价"字孤行),
     所以窄屏同时收紧图标/按钮/内边距,把宽度还给描述。 */
  .home-card .hc-arrow { white-space: nowrap; flex-shrink: 0; }
  /* 手机首屏三张卡：第3张名称「敬请期待」在 390px 下折成两行，与前两张(Word/Excel)不齐。
     名称不折行即可；描述仍能自己折行。 */
  .home-card .hc-name { white-space: nowrap; }
  @media (max-width: 640px) {
    .home-card { padding: 22px 15px; }
    .home-card .hc-icon { width: 48px; height: 48px; font-size: 25px; }
    .home-card .hc-desc { font-size: 12.5px; }
    .home-card .hc-arrow { padding: 4px 12px; font-size: 12px; letter-spacing: .04em; }
  }

  /* ---------- 13. 手机可用性 + 全屏查看器避让（2026-09-15 凌晨 · 390×844 真仿真视口实测后补） ----------
     三处都是「先用眼睛看、再用数字量出来」抓到的真毛病,不是凭印象调样式:
     ① 全屏模板样张被固定页脚盖住 —— 页脚是 position:fixed 且 z-index:99999,弹窗只有 100;
        elementFromPoint 戳页脚中心返回的是页脚里的 <a>(不在弹窗内);实测页脚与缩放控件行重叠 14px,
        截图里一条浅色版权条横穿深色查看器。
     ② × 删除钮热区只有 8×13px —— 手机上根本点不中(iOS 建议 44、安卓 48)。
        只长大——内边距把热区撑到约 33px;视觉上仍是一个小 ×,不喧宾夺主。
     ③ 手机上「B · 订单素材」被右侧说明挤成「订单素 / 材」孤字(和阶段 6 的「敬请期待」同一类)。 */
  /* 页脚高度由 app.js 实测写进 --footer-h（窄屏页脚会折成两行,不能写死 30px） */
  .tpl-full { height: calc(100vh - var(--footer-h, 30px)); }
  /* 遮罩默认把内容垂直居中:795px 的查看器放进 844px 视口会上下各留 25px,
     底部那 25px 又钻回页脚底下(实测提示文字被压 9px)。全屏查看器贴顶排。 */
  #tplModal.tpl-mask { align-items: flex-start; }
  /* 标签本身不许断行,让它右边的说明去折行 */
  .field-label { white-space: nowrap; }
  .field-label .hint, .field-label .req { white-space: normal; }
  /* 删除钮热区:9/12px 内边距 = 热区约 33×33,行高自然长一点点 */
  .file-item .fdel, .img-item .fdel, .img-group-head .g-del { font-size: 15px; padding: 9px 12px; }
  .img-item .fdel { margin-left: auto; }
  /* 用户中心:原本 48×14 的热区,负外边距放热区、不动布局 */
  .user-chip .user-center-tag { padding: 9px 6px; margin: -9px -6px; }


  /* ---------- 14. 列表页底部安全留白（2026-09-15 凌晨 · 真实数据边界体检实测后补） ----------
     怎么发现的：前 9 轮验的都是「排版规不规整」，没人量过**内容放不下时发生了什么**。
     本轮用极端真实数据（超长中文名 / 无空格长串 / 上百字需求 / 30 单）在真浏览器里逐屏扫，
     抓到一处**真 bug**：订单列表 / 控制台 / 以往订单三屏的容器 .list-view 底部 padding = 0，
     而页脚是 position:fixed; z-index:99999 的常驻条 ——
     页面滚到最底，最后一行（订单名、或控制台按钮行）仍然压在页脚下面，**永远点不到、看不到**。

     实测（同一套探针，修复前）：
       1440×900 + 30 单：滚到页面最底用 elementFromPoint 戳按钮中心，
         「一键接收 / 一键交付 / 以往订单 / 客服留言 / 退出登录」**5 个全部命中页脚**；
       390×844 + 30 单：「退出登录」同样；订单表的 td-name 被永久遮住 48px。
       3 单时页面不够长，问题不显现 —— 所以**必须用真实量级的数据量**才量得出来。

     为什么首页三屏没这毛病：.page 自带 80px（窄屏 60px）底部留白，差的就是这一块。
     用 --footer-h（app.js 实测页脚高，窄屏折行时是 49px、不是 30px）而不是写死值。 */
  .list-view { padding-bottom: calc(var(--footer-h, 30px) + 20px); }

  /* ---------- 15. 手机端订单列表整页横向滚动（2026-09-15 凌晨 · 真走到订单屏才量出来） ----------
     怎么发现的：阶段10 给探针加了「实际走到了哪个屏」的自检，才发现以前 v=orders 的用例
     找的按钮 id（ordersBtn/myOrdersBtn）在页面上根本不存在 —— 探针一直停在首页，
     **所有"订单屏没问题"的结论都是空跑的**。真走到 ordersView 之后，当场量出：
       390×844 视口下 文档 scrollWidth = 7526px（视口 390）→ 整页能用手指左右划走。

     根因（量了祖先链，不是猜的）：
       .profile-layout 桌面是 `display:flex; align-items:flex-start`；
       窄屏只改了 `flex-direction: column`，**align-items 还是 flex-start**。
       column 方向下 align-items 管的是**宽度**（交叉轴）——flex-start 意味着
       「子项宽度由内容决定」，于是 .profile-main 被里面 .order-table 的
       `min-width: 1080px` 撑到 1087px，一层层顶出视口：
         .profile-main 1087 / .table-card 1087 / .table-wrap 1085 / 文档 7526
       桌面（row 方向）不受影响：flex:1 + min-width:0 正常工作。

     修：窄屏下让 .profile-layout 交叉轴拉伸（这才是 column 布局该有的语义），
     .profile-main 回到容器宽度（362），里面 .table-wrap 的 overflow-x:auto 才真正把
     **表格的横向滚动关在表格里**（客户仍能横滑看全表，但划不动整页）。 */
  @media (max-width: 640px) {
    .profile-layout { align-items: stretch; }
  }

  /* ==========================================================================
     电脑整理服务（tidy）· 2026-09-15 大副加
     官网第三个服务入口：服务说明 + 档位选择 + 留联系方式。
     设计口径照品牌层：宣纸底 / 墨字 / 朱砂只做点睛 / 细线分隔 / 不堆投影。
     颜色一律走品牌变量（--ink-sub / --line / --accent…），深浅主题自动跟随。
     ========================================================================== */
  .tidy-line { font-size: 13px; line-height: 1.95; color: var(--ink-sub); }
  .tidy-line.tidy-no { color: var(--ink-faint); }

  .tidy-plans { margin: 14px 0 6px; }
  .tidy-plan {
    border: var(--hairline, 1px solid var(--line, #E8E1D5));
    border-radius: var(--radius, 10px);
    padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .tidy-plan:hover { background: var(--hover, #F1EADF); }
  .tidy-plan.on { border-color: var(--accent, #C4161C); }
  .tidy-plan .tp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .tidy-plan .tp-name { font-weight: 600; color: var(--ink, #1F1A17); }
  .tidy-plan .tp-price { color: var(--accent, #C4161C); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
  .tidy-plan .tp-desc { margin: 6px 0 8px; font-size: 12.5px; line-height: 1.8; color: var(--ink-sub, #4A423B); }
  .tidy-plan .tp-items { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.95; color: var(--ink-faint, #8A8078); }
  .home-card-tidy .hc-icon { color: var(--accent, #C4161C); }

  /* 关闭按钮的热区：实测只有 20px 高，手指不好点（2026-09-15 探针抓到）。
     只改这一个弹窗的 —— 全站共用的 .modal-close 要动的话得单独评估，
     别顺手改出别的屏的回归。 */
  #tidyModal .modal-close {
    min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }

  /* ==========================================================================
     体验价 + 服务公告 + 名额 / 预约（大副加 · 2026-09-16）

     一、服务公告：宣纸卡片 + 细线，只有"数字"用朱砂点睛（品牌规范里朱砂只做点睛）。
     二、首页卡价格：衬线体，字号压得住"2.26"这个数字（它现在是卖点本身）。
     三、所有颜色走品牌变量（--ink / --line / --accent…），深浅主题自动跟随，不硬编码。
     ========================================================================== */

  /* ---------- 服务公告 ---------- */
  .select-wrap + .notice, .notice { margin-bottom: 22px; }
  .notice {
    padding: 16px 18px;
    border: var(--hairline, 1px solid var(--line, #E8E1D5));
    border-radius: var(--radius, 10px);
    background: var(--card, #FBF8F2);
  }
  .notice-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; letter-spacing: .10em;
    color: var(--ink, #1F1A17);
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: var(--hairline, 1px solid var(--line, #E8E1D5));
  }
  .notice-head .ico { color: var(--accent, #C4161C); }
  .notice-list { list-style: none; margin: 0; padding: 0; }
  .notice-list li {
    position: relative; padding-left: 14px;
    font-size: 12.5px; line-height: 1.95; color: var(--ink-sub, #4A423B);
  }
  .notice-list li::before {
    content: ''; position: absolute; left: 0; top: .80em;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--ink-faint, #8A8078);
  }
  .notice-list li b { color: var(--ink, #1F1A17); font-weight: 600; }
  /* 这一行是活的：今日已接 N/上限 + 排期，数字用朱砂 */
  .notice-live::before { background: var(--accent, #C4161C); }
  .notice-live b { color: var(--accent, #C4161C); font-weight: 700; }
  .notice-live.full { color: var(--accent, #C4161C); }

  /* 换行别留孤字：卡里的描述最多两行，balance 让两行长度接近
     （2026-09-16 探针在 1280 抓到过"第二行只剩一个字"） */
  .home-card .hc-desc { text-wrap: balance; }

  /* ---------- 首页卡：价格 ---------- */
  .home-card .hc-price {
    font-family: var(--font-serif, serif);
    font-size: 21px; font-weight: 700; line-height: 1.15;
    color: var(--accent, #C4161C);
  }
  .home-card .hc-price small {
    font-family: var(--font-sans, sans-serif);
    font-size: 11.5px; font-weight: 500; letter-spacing: 0;
    color: var(--ink-faint, #8A8078);
  }
  /* 电脑整理那张卡：预约人数是信息不是价格，不抢眼（只有数字跳一下色） */
  .home-card .hc-price.tidy-leads {
    font-family: var(--font-sans, sans-serif);
    font-size: 13px; font-weight: 500; color: var(--ink-sub, #4A423B);
  }
  .home-card .hc-price.tidy-leads b { color: var(--accent, #C4161C); font-size: 16px; font-weight: 700; }

  /* ---------- 电脑整理弹窗的状态行 ---------- */
  .tidy-status {
    margin: 0 0 14px; padding-left: 10px;
    font-size: 12.5px; line-height: 1.85; color: var(--accent, #C4161C);
    border-left: 2px solid var(--accent, #C4161C);
  }

  /* 控制台里"待收款"的行（先收费后开工 · 2026-09-16）：左侧一道朱砂细线，手机横向滚动时也认得出 */
  .order-table tbody tr.row-unpaid td:first-child { box-shadow: inset 2px 0 0 var(--accent, #C4161C); }
  .order-table tbody tr.row-unpaid td { background: var(--accent-bg, #FBF1F1); }

  /* 首页订单区（登录后显示）的两个按钮实测只有 30px / 28px 高，手机上不好点
     （2026-09-16 探针抓到）。只提这一块的热区，不动全站共用的 .mini-btn —— 控制台表格
     里那个按钮密度不一样，一起改要单独评估。 */
  .home-orders .ho-all, .home-orders .mini-btn { min-height: 32px; }

  /* 窄屏（手机）：首页卡是横排的，价格容易把名字/箭头挤掉 —— 改成两行网格：
       [图标] 名称        价格
       [图标] 描述        开始选择 →
     （图标跨两行，价格与箭头各自靠右，视线从"是什么"到"多少钱"再到"点这里"是一条线） */
  @media (max-width: 640px) {
    .home-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "hicon hname hprice"
        "hicon hdesc harrow";
      align-items: center;
      gap: 4px 10px;
      text-align: left;
    }
    .home-card .hc-icon { grid-area: hicon; }
    .home-card .hc-name { grid-area: hname; }
    .home-card .hc-desc { grid-area: hdesc; text-align: left; }
    .home-card .hc-price { grid-area: hprice; justify-self: end; font-size: 15px; }
    .home-card .hc-arrow { grid-area: harrow; justify-self: end; margin-top: 0; margin-left: 0; font-size: 11.5px; }
    .home-card .hc-price.tidy-leads { font-size: 12.5px; }
    .home-card .hc-price.tidy-leads b { font-size: 15px; }
    .notice { padding: 13px 14px; margin-bottom: 16px; }
    .notice-list li { font-size: 12px; line-height: 1.9; }
    .tidy-status { font-size: 12px; }
  }

  /* ==========================================================================
     手机端「我的订单」：表格 → 卡片（2026-09-18 大副加）

     为什么改（实测数字，不是观感）：390×844 视口下，这张表宽 1112px、容器只有 360px，
     靠横向滚动看全 —— 而**状态徽标和操作按钮在最后一格**。
     客户要交钱（去付款）或者取件（下载作品），得先用手指把表格横滑到底；
     打开「我的订单」看到的是"订单名 + 一串 18 位订单ID"，看不到"待付款 / 去付款"。

     改法：窄屏下不摆表格，一行 = 一张卡片（沿用 .home-card 那套 grid 卡片的写法）：
         订单名                    [状态]
         档位 / 价格 · 模板标签
         需求 …
         提交 … ／ 交付 …
         [ 操作按钮 —— 整行铺开，拇指够得着 ]
     订单ID 在卡片里不摆（18 位数字占半屏又没人读；真要引用时客服弹窗里有订单号下拉）。
     ========================================================================== */
  @media (max-width: 700px) {
    #ordersView .table-card { background: transparent; border: none; box-shadow: none; padding: 0; }
    #ordersView .table-wrap { overflow-x: visible; }
    #ordersView table.order-table { display: block; min-width: 0; font-size: 13px; }
    #ordersView .order-table thead { display: none; }
    #ordersView .order-table tbody { display: block; }
    #ordersView .order-table tr {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "name   status"
        "tier   tier"
        "req    req"
        "sub    sub"
        "del    del"
        "ops    ops";
      gap: 3px 10px;
      padding: 14px 14px 12px;
      margin-bottom: 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--card);
    }
    #ordersView .order-table tbody tr:hover { background: var(--card); }
    #ordersView .order-table td { display: block; padding: 0; border: none; }
    /* ⚠️ 下面这些选择器必须带 `td.` —— 上面那条 `#ordersView .order-table td`（1,1,1）比
       `#ordersView .td-id`（1,1,0）更具体，不加会被它压掉（实测踩过：订单ID 藏不掉、
       按钮的 flex 不生效）。 */
    #ordersView .order-table td.td-id { display: none; }
    /* 名字在卡片里要能换行（表格里是单行省略，卡片里省略就看不清是哪一单了） */
    #ordersView .order-table td.td-name { grid-area: name; max-width: none; white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.5; }
    #ordersView .order-table td.td-status { grid-area: status; align-self: start; }
    /* 表格里 .td-tier/.td-price 是 nowrap（一行一格）；卡片窄，带模板标签时必须能折行，
       所以连**内层**那两个 div 一起放开（tierPriceHtml 返回的就是这两个 div）。 */
    #ordersView .order-table td.td-tier, #ordersView .td-tier .td-tier, #ordersView .td-tier .td-price {
      grid-area: tier; white-space: normal;
    }
    /* -webkit-line-clamp 要配 display:-webkit-box 才生效，而上面那条 td{display:block} 会把它顶掉 */
    #ordersView .order-table td.td-req { grid-area: req; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-width: none; margin-top: 2px; }
    #ordersView .order-table td.td-time { grid-area: sub; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
    #ordersView .order-table td.td-time[data-label="交付"] { grid-area: del; }
    #ordersView .order-table td.td-time::before { content: attr(data-label) "　"; letter-spacing: .06em; }
    #ordersView .order-table td.td-ops { grid-area: ops; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    #ordersView .td-ops .mini-btn { flex: 1 1 auto; min-width: 104px; padding: 11px 14px; font-size: 13px; text-align: center; }
    #ordersView .td-ops .quote-hint { flex: 1 1 100%; }
    /* 未付款的卡片：表格里是"整行淡红底 + 首列一条朱砂线"，卡片里换成边框与左边线 */
    #ordersView .order-table tr.row-unpaid { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-bg); }
    #ordersView .order-table tr.row-unpaid td { background: transparent; box-shadow: none; }
    #ordersView .order-table td.list-empty {
      grid-column: 1 / -1; text-align: center; padding: 26px 10px;
      border: 1px solid var(--border); border-radius: 12px; background: var(--card);
    }
  }

  /* 管理员那两张表（控制台 / 以往订单）列多、要的是密度，手机上**保留横向滚动**，
     但把第一列钉住 —— 横滑去看后面的列时，不至于"不知道自己在看哪一单"。
     （这是渐进增强：不支持 sticky 的浏览器照旧横滑，没有副作用。） */
  @media (max-width: 900px) {
    #consoleView .order-table th:first-child,
    #consoleView .order-table td:first-child,
    #historyView .order-table th:first-child,
    #historyView .order-table td:first-child {
      position: sticky; left: 0; z-index: 2;
      background: var(--card);
      box-shadow: 1px 0 0 var(--line);
    }
    #consoleView .order-table th:first-child,
    #historyView .order-table th:first-child { background: var(--paper-dim); z-index: 3; }
    /* 未付款行整行有底色，钉住那一列要跟着行色走，否则会露出一块白 */
    #consoleView .order-table tr.row-unpaid td:first-child { background: var(--accent-bg); }
  }

/* ===== 2026-09-19 代码审查修复 ===== */
/* ① 放大镜图标的点击判定：卡片用 closest('.tpl-zoom') 判过了，这里再让图标本身不接收指针事件
      —— 双保险，顺带让 hover 效果作用在按钮上而不是 svg 上。 */
.tpl-zoom svg { pointer-events: none; }

/* ② 键盘焦点圈：原来按钮/卡片/链接没有可见焦点（Tab 走一圈不知道自己在哪，
      代码审查实测「连按 Tab 第一站落在弹窗外、且无焦点圈」）。
      输入框有自己的 focus 边框（.name-input:focus 那几处 outline:none），这里不含它们，免得显示两圈。 */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] [role="button"]:focus-visible,
html[data-theme="dark"] a:focus-visible {
  outline-color: #63DCC6;   /* 深色皮肤的主色（玉青）—— 暗底上 var(--accent) 看不清 */
}