@charset "UTF-8";
/* ============================================================================
   GiftScene Design System (GDS) 1.0.0
   适用范围：gift_admin 后台管理端（员工使用），不含面向客户的 gift.php / viewer
   加载顺序：bootstrap.min.css → bootstrap-icons → **gds.css** → admin.css → 页面模块CSS
   规范文档：claude/gds_design_system.md
   迁移方案：claude/gds_migration_plan.md

   本文件分四层：
     L1 设计令牌            —— 唯一的色值/圆角/阴影/字体真源
     L2 Bootstrap 变量映射   —— 让 BS5.3 自带组件跟随 GDS，不改任何页面 markup
     L3 Bootstrap 变体重定义 —— btn-dark/outline-dark/light 的语义映射
     L4 GDS 通用组件        —— BS 没有的东西（产品工作室专用组件在批次2再加）

   ⚠ 改色值只改 L1。L2/L3/L4 一律用 var(--gds-*)，不得出现裸色值。
   ============================================================================ */

/* ==========================================================================
   L1 · 设计令牌
   ========================================================================== */
:root{
  /* ---- 中性色阶 ---- */
  --gds-ground:#f2f1f6;          /* 页面画布 */
  --gds-ground-blur:rgba(242,241,246,.86); /* 吸顶栏半透明背景 */
  --gds-surface:#ffffff;         /* 卡片/面板 */
  --gds-soft:#f7f6fa;            /* 浅色区块：表头、次要分区 */
  --gds-sunk:#edecf3;            /* 凹陷：缩略图占位、禁用态、中性徽标底 */
  --gds-line:#e2e0ea;            /* 常规描边 */
  --gds-hair:#ecebf1;            /* 卡片内部细分隔线 */

  /* ---- 文字 ---- */
  --gds-ink:#201d2b;             /* 主文字 */
  --gds-ink-soft:#6a6579;        /* 次要文字 */
  --gds-ink-faint:#898497;       /* 三级/占位/元信息 */
  --gds-ink-on-accent:#ffffff;   /* 深色/主色底上的文字 */

  /* ---- 主色调（紫） ---- */
  --gds-accent:#6f4bf2;
  --gds-accent-strong:#5a38d8;   /* hover/active/高对比文字 */
  --gds-accent-light:#9a82ff;    /* 渐变亮端、深底上的强调文字、hover描边 */
  --gds-accent-soft:#efeaff;     /* 浅色底：徽标、选中态、图标块 */
  --gds-accent-rgb:111,75,242;   /* 供 rgba() 使用 */
  --gds-accent-glow:rgba(111,75,242,.14);
  --gds-accent-glow-strong:rgba(111,75,242,.22);

  /* ---- 侧边栏（固定深色导航锚点，不是暗黑模式） ---- */
  --gds-sidebar-bg:#17151f;
  --gds-sidebar-ink:#ffffff;
  --gds-sidebar-ink-muted:#a9a3ba;  /* 导航项常态文字 */
  --gds-sidebar-ink-dim:#6f6a7d;    /* 分区标题 */
  --gds-sidebar-active-bg:#2a2438;  /* 选中/hover 底色 */
  --gds-sidebar-chip:#302a40;       /* 头像块、角标 */
  --gds-sidebar-line:#2b2539;       /* 分隔线 */
  --gds-sidebar-scroll:#463f57;     /* 滚动条滑块 */
  --gds-sidebar-rail:var(--gds-accent); /* 选中项左侧高亮条 */

  /* ---- 语义状态色（四态，互不替代） ---- */
  --gds-good:#137f4c;    --gds-good-bg:#e5f7ee;
  --gds-info:#266ec4;    --gds-info-bg:#e7f3ff;
  --gds-warn:#996307;    --gds-warn-bg:#fff2d8;
  --gds-danger:#c1293e;  --gds-danger-bg:#ffe9ed;

  /* ---- 字体 ----
     中文正文/标题/按钮一律 --gds-font-cjk。
     --gds-font-mono 仅用于版本号、GLB节点名、百分比读数、编码、微标签，
     绝不套用在中文文案上。 */
  --gds-font-cjk:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --gds-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* ---- 圆角 ---- */
  --gds-radius-sm:6px;    /* 按钮、输入框、小徽标 */
  --gds-radius-md:10px;   /* 表单区块、内嵌卡片 */
  --gds-radius-lg:16px;   /* 面板卡片、网格卡片 */
  --gds-radius-xl:22px;   /* Hero 横幅 */
  --gds-radius-pill:999px;

  /* ---- 阴影 ---- */
  --gds-shadow-sm:0 1px 2px rgba(32,29,43,.05),0 8px 24px rgba(32,29,43,.06);
  --gds-shadow-card:0 5px 20px rgba(32,29,43,.05);
  --gds-shadow-hover:0 10px 28px rgba(60,46,110,.10);
  --gds-shadow-hero:0 16px 40px rgba(95,64,214,.18);
  --gds-shadow-modal:0 20px 70px rgba(32,29,43,.14);

  /* ---- 渐变（成套使用，避免逐个色标令牌化） ---- */
  --gds-gradient-hero:linear-gradient(130deg,#211d2e 0%,#2e2742 68%,var(--gds-accent-strong) 140%);
  --gds-gradient-welcome:linear-gradient(120deg,var(--gds-accent) 0%,var(--gds-accent-light) 100%);
  --gds-gradient-brand:linear-gradient(135deg,var(--gds-accent-light),var(--gds-accent-strong));
  --gds-gradient-login:radial-gradient(circle at 70% 25%,var(--gds-accent) 0,transparent 32%),linear-gradient(145deg,var(--gds-sidebar-bg),#2e2742);

  /* ---- 间距刻度（供新组件使用；旧组件保留既有数值不动） ---- */
  --gds-space-1:4px;  --gds-space-2:6px;  --gds-space-3:8px;  --gds-space-4:10px;
  --gds-space-5:12px; --gds-space-6:14px; --gds-space-7:16px; --gds-space-8:20px;
  --gds-space-9:24px; --gds-space-10:32px; --gds-space-11:40px;
}

/* ---- IBM Plex Mono 本地字体文件（自托管于 assets/fonts/，不依赖任何CDN）---- */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/IBMPlexMono-Bold.woff2") format("woff2");}

/* ==========================================================================
   L2 · Bootstrap 5.3 变量映射
   BS5.3 的组件样式由 --bs-* 自定义属性驱动，重定义变量即可改变全站外观，
   无需覆盖选择器、无需 !important、不会被 BS 小版本更新打破。
   ========================================================================== */
:root{
  /* 主色：BS 的 primary 与 GDS 主色调对齐 */
  --bs-primary:var(--gds-accent);
  --bs-primary-rgb:var(--gds-accent-rgb);
  --bs-primary-text-emphasis:var(--gds-accent-strong);
  --bs-primary-bg-subtle:var(--gds-accent-soft);
  --bs-primary-border-subtle:var(--gds-accent-light);

  /* 语义色 */
  --bs-success:var(--gds-good);
  --bs-info:var(--gds-info);
  --bs-warning:var(--gds-warn);
  --bs-danger:var(--gds-danger);
  --bs-success-bg-subtle:var(--gds-good-bg);
  --bs-info-bg-subtle:var(--gds-info-bg);
  --bs-warning-bg-subtle:var(--gds-warn-bg);
  --bs-danger-bg-subtle:var(--gds-danger-bg);
  --bs-success-text-emphasis:var(--gds-good);
  --bs-info-text-emphasis:var(--gds-info);
  --bs-warning-text-emphasis:var(--gds-warn);
  --bs-danger-text-emphasis:var(--gds-danger);

  /* 正文与中性 */
  --bs-body-font-family:var(--gds-font-cjk);
  --bs-body-color:var(--gds-ink);
  --bs-body-bg:var(--gds-ground);
  --bs-emphasis-color:var(--gds-ink);
  --bs-secondary-color:var(--gds-ink-soft);
  --bs-tertiary-color:var(--gds-ink-faint);
  --bs-secondary-bg:var(--gds-soft);
  --bs-tertiary-bg:var(--gds-sunk);
  --bs-border-color:var(--gds-line);
  --bs-border-color-translucent:var(--gds-line);

  /* 链接 */
  --bs-link-color:var(--gds-accent-strong);
  --bs-link-color-rgb:var(--gds-accent-rgb);
  --bs-link-hover-color:var(--gds-accent);

  /* 圆角：BS 的四档对齐 GDS 刻度 */
  --bs-border-radius:var(--gds-radius-md);
  --bs-border-radius-sm:var(--gds-radius-sm);
  --bs-border-radius-lg:var(--gds-radius-lg);
  --bs-border-radius-xl:var(--gds-radius-lg);
  --bs-border-radius-2xl:var(--gds-radius-xl);
  --bs-border-radius-pill:var(--gds-radius-pill);

  /* 聚焦环 */
  --bs-focus-ring-color:var(--gds-accent-glow);
  --bs-focus-ring-width:3px;

  /* 等宽字体 */
  --bs-font-monospace:var(--gds-font-mono);
}

/* ==========================================================================
   L3 · Bootstrap 组件变体重定义
   ========================================================================== */

/* ---- 按钮：语义映射（见 gds_migration_plan.md 决定1）----
   全站实际用法：dark=主操作(71处)、outline-dark=次操作(31处)、light=行内三级(28处)。
   类名字面与外观不一致（叫dark却是紫的）是有意为之的取舍：
   零 markup 改动覆盖130处按钮。未来页面因别的原因重写时再渐进换成 btn-primary。 */
.btn{--bs-btn-border-radius:var(--gds-radius-sm);--bs-btn-font-weight:600}

.btn-dark,.btn-primary{
  --bs-btn-color:var(--gds-ink-on-accent);
  --bs-btn-bg:var(--gds-accent);
  --bs-btn-border-color:var(--gds-accent);
  --bs-btn-hover-color:var(--gds-ink-on-accent);
  --bs-btn-hover-bg:var(--gds-accent-strong);
  --bs-btn-hover-border-color:var(--gds-accent-strong);
  --bs-btn-active-color:var(--gds-ink-on-accent);
  --bs-btn-active-bg:var(--gds-accent-strong);
  --bs-btn-active-border-color:var(--gds-accent-strong);
  --bs-btn-disabled-color:var(--gds-ink-on-accent);
  --bs-btn-disabled-bg:var(--gds-accent);
  --bs-btn-disabled-border-color:var(--gds-accent);
  --bs-btn-focus-shadow-rgb:var(--gds-accent-rgb);
}

.btn-outline-dark,.btn-outline-secondary,.btn-outline-primary{
  --bs-btn-color:var(--gds-ink-soft);
  --bs-btn-bg:var(--gds-surface);
  --bs-btn-border-color:var(--gds-line);
  --bs-btn-hover-color:var(--gds-accent-strong);
  --bs-btn-hover-bg:var(--gds-accent-soft);
  --bs-btn-hover-border-color:var(--gds-accent-light);
  --bs-btn-active-color:var(--gds-accent-strong);
  --bs-btn-active-bg:var(--gds-accent-soft);
  --bs-btn-active-border-color:var(--gds-accent);
  --bs-btn-disabled-color:var(--gds-ink-faint);
  --bs-btn-disabled-border-color:var(--gds-line);
  --bs-btn-focus-shadow-rgb:var(--gds-accent-rgb);
}

.btn-light{
  --bs-btn-color:var(--gds-ink-soft);
  --bs-btn-bg:var(--gds-surface);
  --bs-btn-border-color:var(--gds-line);
  --bs-btn-hover-color:var(--gds-ink);
  --bs-btn-hover-bg:var(--gds-soft);
  --bs-btn-hover-border-color:var(--gds-line);
  --bs-btn-active-color:var(--gds-ink);
  --bs-btn-active-bg:var(--gds-sunk);
  --bs-btn-active-border-color:var(--gds-line);
  --bs-btn-disabled-color:var(--gds-ink-faint);
  --bs-btn-focus-shadow-rgb:var(--gds-accent-rgb);
}

.btn-outline-danger{
  --bs-btn-color:var(--gds-danger);
  --bs-btn-border-color:var(--gds-danger);
  --bs-btn-hover-color:var(--gds-ink-on-accent);
  --bs-btn-hover-bg:var(--gds-danger);
  --bs-btn-hover-border-color:var(--gds-danger);
  --bs-btn-active-color:var(--gds-ink-on-accent);
  --bs-btn-active-bg:var(--gds-danger);
  --bs-btn-active-border-color:var(--gds-danger);
}
.btn-outline-success{--bs-btn-color:var(--gds-good);--bs-btn-border-color:var(--gds-good);--bs-btn-hover-bg:var(--gds-good);--bs-btn-hover-border-color:var(--gds-good);--bs-btn-active-bg:var(--gds-good);--bs-btn-active-border-color:var(--gds-good)}
.btn-outline-info{--bs-btn-color:var(--gds-info);--bs-btn-border-color:var(--gds-info);--bs-btn-hover-bg:var(--gds-info);--bs-btn-hover-border-color:var(--gds-info);--bs-btn-active-bg:var(--gds-info);--bs-btn-active-border-color:var(--gds-info)}
.btn-success{--bs-btn-bg:var(--gds-good);--bs-btn-border-color:var(--gds-good);--bs-btn-hover-bg:var(--gds-good);--bs-btn-hover-border-color:var(--gds-good)}
.btn-link{--bs-btn-color:var(--gds-accent-strong);--bs-btn-hover-color:var(--gds-accent)}

/* Hero 等深色底上的按钮反相（.workbench-hero .btn 原本就无边框） */
.workbench-hero .btn-light,.welcome-card .btn-light{
  --bs-btn-color:var(--gds-accent-strong);
  --bs-btn-bg:var(--gds-surface);
  --bs-btn-hover-color:var(--gds-accent-strong);
  --bs-btn-hover-bg:var(--gds-accent-soft);
}

/* ---- 表单控件 ----
   BS5.3 的 .form-control:focus 是编译死值（蓝色），必须直接覆盖。 */
.form-control,.form-select{
  border-color:var(--gds-line);
  border-radius:var(--gds-radius-md);
  color:var(--gds-ink);
  background-color:var(--gds-surface);
}
.form-control:focus,.form-select:focus{
  border-color:var(--gds-accent);
  box-shadow:0 0 0 3px var(--gds-accent-glow);
}
.form-control::placeholder{color:var(--gds-ink-faint)}
.form-control:disabled,.form-select:disabled{background-color:var(--gds-sunk);color:var(--gds-ink-faint)}
.form-check-input:checked{background-color:var(--gds-accent);border-color:var(--gds-accent)}
.form-check-input:focus{border-color:var(--gds-accent);box-shadow:0 0 0 3px var(--gds-accent-glow)}
.form-switch .form-check-input:focus{border-color:var(--gds-accent)}
.form-range::-webkit-slider-thumb{background-color:var(--gds-accent)}
.form-range::-moz-range-thumb{background-color:var(--gds-accent)}
.input-group-text{background-color:var(--gds-soft);border-color:var(--gds-line);color:var(--gds-ink-faint)}
.form-label{color:var(--gds-ink-soft)}

/* ---- 警告条 ---- */
.alert{--bs-alert-border-radius:var(--gds-radius-md);border-width:0}
.alert-success{--bs-alert-color:#0d5c39;--bs-alert-bg:var(--gds-good-bg)}
.alert-info{--bs-alert-color:#1c5490;--bs-alert-bg:var(--gds-info-bg)}
.alert-warning{--bs-alert-color:#7a4906;--bs-alert-bg:var(--gds-warn-bg)}
.alert-danger{--bs-alert-color:#8f1c2d;--bs-alert-bg:var(--gds-danger-bg)}
.alert-light{--bs-alert-color:var(--gds-ink-soft);--bs-alert-bg:var(--gds-soft);--bs-alert-border-color:var(--gds-line);border-width:1px}
.alert-secondary{--bs-alert-color:var(--gds-ink-soft);--bs-alert-bg:var(--gds-sunk)}

/* ---- 徽标 ----
   .text-bg-*-subtle 不是 BS 自带类（页面里有在用），这里补齐使其真正生效。 */
.badge{--bs-badge-border-radius:var(--gds-radius-pill);--bs-badge-font-weight:600;letter-spacing:.01em}
.text-bg-success-subtle{color:var(--gds-good)!important;background-color:var(--gds-good-bg)!important}
.text-bg-info-subtle{color:var(--gds-info)!important;background-color:var(--gds-info-bg)!important}
.text-bg-warning-subtle{color:var(--gds-warn)!important;background-color:var(--gds-warn-bg)!important}
.text-bg-danger-subtle{color:var(--gds-danger)!important;background-color:var(--gds-danger-bg)!important}
.text-bg-secondary-subtle{color:var(--gds-ink-faint)!important;background-color:var(--gds-sunk)!important}
.text-bg-primary-subtle{color:var(--gds-accent-strong)!important;background-color:var(--gds-accent-soft)!important}
.text-bg-success{color:var(--gds-ink-on-accent)!important;background-color:var(--gds-good)!important}
.text-bg-secondary{color:var(--gds-ink-on-accent)!important;background-color:var(--gds-ink-soft)!important}
.text-bg-dark{color:var(--gds-ink-on-accent)!important;background-color:var(--gds-ink)!important}

/* ---- 表格 ---- */
.table{--bs-table-color:var(--gds-ink);--bs-table-bg:transparent;--bs-table-border-color:var(--gds-hair);--bs-table-striped-bg:var(--gds-soft);--bs-table-hover-bg:var(--gds-soft)}

/* ---- 模态框 ---- */
.modal{--bs-modal-bg:var(--gds-surface);--bs-modal-border-color:var(--gds-line);--bs-modal-border-radius:var(--gds-radius-lg);--bs-modal-header-border-color:var(--gds-hair);--bs-modal-footer-border-color:var(--gds-hair);--bs-modal-box-shadow:var(--gds-shadow-modal)}

/* ---- 分页 ---- */
.pagination{--bs-pagination-color:var(--gds-ink-soft);--bs-pagination-bg:var(--gds-surface);--bs-pagination-border-color:var(--gds-line);--bs-pagination-border-radius:var(--gds-radius-sm);--bs-pagination-hover-color:var(--gds-accent-strong);--bs-pagination-hover-bg:var(--gds-accent-soft);--bs-pagination-hover-border-color:var(--gds-accent-light);--bs-pagination-active-bg:var(--gds-accent);--bs-pagination-active-border-color:var(--gds-accent);--bs-pagination-focus-box-shadow:0 0 0 3px var(--gds-accent-glow)}

/* ---- 卡片（BS 原生 .card，与 admin.css 的 .panel-card 并存） ---- */
.card{--bs-card-bg:var(--gds-surface);--bs-card-border-color:var(--gds-line);--bs-card-border-radius:var(--gds-radius-lg);--bs-card-cap-bg:var(--gds-soft)}

/* ---- 折叠/下拉 ---- */
.dropdown-menu{--bs-dropdown-bg:var(--gds-surface);--bs-dropdown-border-color:var(--gds-line);--bs-dropdown-border-radius:var(--gds-radius-md);--bs-dropdown-link-active-bg:var(--gds-accent);--bs-dropdown-link-hover-bg:var(--gds-accent-soft);--bs-dropdown-box-shadow:var(--gds-shadow-sm)}
.nav-tabs{--bs-nav-tabs-link-active-color:var(--gds-accent-strong);--bs-nav-tabs-link-active-border-color:var(--gds-line) var(--gds-line) var(--gds-surface);--bs-nav-link-color:var(--gds-ink-soft);--bs-nav-link-hover-color:var(--gds-accent-strong)}
.progress{--bs-progress-bg:var(--gds-sunk);--bs-progress-bar-bg:var(--gds-accent);--bs-progress-border-radius:var(--gds-radius-pill)}

/* ==========================================================================
   L4 · GDS 通用组件（Bootstrap 没有的）
   产品工作室专用组件（行程栏 rail / 目标进度行 / 高级模式托盘）在批次2随
   product-studio.css 一并并入，此处不预置未被使用的类。
   ========================================================================== */

/* ---- 等宽数据文本：版本号、编码、百分比读数 ---- */
.gds-mono{font-family:var(--gds-font-mono);font-variant-numeric:tabular-nums}

/* ---- 分区小标题（eyebrow）---- */
.gds-eyebrow{font:600 10.5px/1 var(--gds-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gds-ink-faint)}

/* ---- 开关（高级模式等布尔态）---- */
.gds-switch{position:relative;width:42px;height:23px;border:1px solid var(--gds-line);border-radius:var(--gds-radius-pill);background:var(--gds-sunk);cursor:pointer;padding:0;flex:none;transition:background .16s,border-color .16s}
.gds-switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--gds-surface);box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .16s}
.gds-switch[aria-pressed="true"]{background:var(--gds-accent);border-color:var(--gds-accent)}
.gds-switch[aria-pressed="true"]::after{transform:translateX(19px)}
.gds-switch:focus-visible{outline:2px solid var(--gds-accent);outline-offset:2px}

/* ---- 状态圆点 ---- */
.gds-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.gds-dot.is-done{background:var(--gds-good)}
.gds-dot.is-todo{background:var(--gds-warn)}
.gds-dot.is-info{background:var(--gds-info)}
.gds-dot.is-opt{background:transparent;border:1.5px solid var(--gds-ink-faint)}

/* ---- 行动提示条（下一步）---- */
.gds-nextbar{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--gds-accent-soft);border-radius:var(--gds-radius-md);flex-wrap:wrap}
.gds-nextbar .gds-nextbar-tag{font:600 10px var(--gds-font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--gds-accent-strong);border:1px solid currentColor;padding:3px 8px;border-radius:4px;flex:none}
.gds-nextbar p{margin:0;font-size:13px;color:var(--gds-ink);flex:1 1 240px}

/* ---- 专业页面顶部的"返回工作区"导航（V1.14.4起：与产品工作室视觉统一） ----
   用于 model_nodes / model_motion_assistant / model_quality / model_validation
   等约25个独立专业页面，由 inc/studio_workspace.php 的 gift_studio_navigation() 输出。
   这些页面本身仍是独立页面，不是产品工作室左侧竖排导航栏（.studio-rail）的替代，
   只是让顶部这条"跳回工作区"按钮组用同一套GDS令牌，不再是裸的Bootstrap灰色按钮。 ---- */
.gds-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0;padding:5px;background:var(--gds-soft);border:1px solid var(--gds-line);border-radius:var(--gds-radius-pill)}
.gds-subnav a{padding:7px 15px;border-radius:var(--gds-radius-pill);font-size:13px;font-weight:600;color:var(--gds-ink-soft);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.gds-subnav a:hover{background:var(--gds-surface);color:var(--gds-accent-strong)}
.gds-subnav a.active{background:var(--gds-accent);color:var(--gds-ink-on-accent)}

@media(prefers-reduced-motion:reduce){
  .gds-switch,.gds-switch::after{transition:none}
}