/* 伙伴门户皮肤层 —— 由 scripts/brand/apply-operator.mjs 从 styles/skins/vinera.css 复制（档案 partnerSkin），勿手改。 */
/* ============================================================
   伙伴门户皮肤 · Vinera（与 CRM 的 Vinera 主题同一套视觉：frontend/themes/vinera/tokens.css + skin.css）
   ------------------------------------------------------------
   构建期由 scripts/brand/apply-operator.mjs 复制成 styles/skin.css（档案 partnerSkin = "vinera"），
   index.html 在 app.css 之后引入 —— 只覆盖 token 与组件外观，不改 DOM、不改 JS。

   取值（CRM 主题手册口径）：
     Cloud 页面底 #F4F6F8 · 白卡 #FFF · ink #0B2E2A · 正文 #24403B · 说明 #5A6D69 · 线 #DCE6E3（1px）
     Deep Teal #0F6B5B / 悬停 #0A4A40 · 薄荷深档 #2C9C80（细线 / 指示）· Ice #E6F4EF（选中态）
     Plus Jakarta Sans + Noto Sans SC；卡 18px / 控件 12px / 导航 9px / 徽章胶囊；柔和青色阴影
     浅色侧栏 #FAFCFB + Ice 选中底 + 深青字；登录 = 满屏深青（同 CRM 登录页的 brand-stage 网格）+ 白卡表单

   三条约定：
   1. **租户主色仍然赢**：js/brand.js 把工作区主色注入成 :root 上的 --terracotta / --primary / --primary-strong
      （<style> 追加在 head 末尾）。本文件的 token 也只写在 :root（同特异度、源顺序在前），所以租户值覆盖本皮肤；
      由主色派生的面（Ice 选中底、登录深底、焦点光晕）一律用 color-mix 从这三个 token 推，换主色时一起换。
   2. **只有浅色**（与 CRM 的 Vinera 主题一致）：本皮肤在 :root 声明 --skin-scheme: light，index.html 紧跟 skin.css
      的一小段内联脚本据此给 <html> 加 data-theme="light" —— app.css 的深色 token 与 brand.js 的租户深色档都以
      :not([data-theme="light"]) 为前提，于是系统深色下也恒用浅色 token，租户主色也恒用浅色档。
      侧栏 / 手机顶栏的运营方标志 <picture> 的 <source media="(prefers-color-scheme: dark)"> 看的是系统偏好、
      不看 data-theme，所以本文件末尾在系统深色下把 picture 改画浅色版（背景图）并隐藏 <img>；
      登录页左幕（深青底）本来就用深色版 <img>，不受影响。没有皮肤的部署不声明
      --skin-scheme，脚本什么也不做，深浅色行为与改前完全相同。
   3. 不出现任何运营方字样（主题名除外）；不用 !important（reduced-motion 除外，那是 app.css 的规则）。
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* 只有浅色：index.html 的内联脚本见到它就给 <html> 加 data-theme="light"（见头注释第 2 条） */
  --skin-scheme: light;
  color-scheme: light;

  /* --- 面 --- */
  --paper: #f4f6f8;
  --surface: #eef3f1;
  --raise: #ffffff;
  --panel: #0a4a40;
  --ink: #0b2e2a;
  --muted: #5a6d69;
  --faint: #5e716d;
  --on-void: #e6f4ef;
  --sk-text: #24403b;          /* 正文（标题仍是 ink） */
  --sk-side: #fafcfb;          /* 侧栏底 */
  --sk-chrome: #ffffff;        /* 顶栏底 */
  --sk-row-hover: #f7faf9;
  --sk-th: #f7faf9;            /* 表头底 */
  --sk-line-hover: #c3d1cd;

  /* --- 线：一律 1px --- */
  --rule: #dce6e3;
  --hair: #e7eeec;
  --rule-w: 1px;
  --hair-w: 1px;
  --rule-on-void: rgba(230, 244, 239, .16);

  /* --- 品牌三档（租户主色覆盖这三个） --- */
  --terracotta: #2c9c80;
  --primary: #0f6b5b;
  --primary-strong: #0a4a40;
  --on-primary: #fff;
  /* 派生：Ice 选中底 / 登录深底 / 焦点光晕 / 薄荷装饰 —— 跟着上面三档走 */
  --sk-ice: color-mix(in srgb, var(--terracotta) 12%, #fff);
  --sk-ice-2: color-mix(in srgb, var(--terracotta) 22%, #fff);
  --void: color-mix(in srgb, var(--primary) 40%, #080509);
  --sk-glow: color-mix(in srgb, var(--primary) 22%, transparent);
  --sk-on-void-accent: color-mix(in srgb, var(--terracotta) 70%, #fff);

  /* --- 语义色（成功 = 绿，与深青主色拉开；危险 = 手册红；待处理 = Gold） --- */
  --kelp: #1f7a4d;     --kelp-soft: #e5f5ec;
  --cinnabar: #b4432f; --cinnabar-soft: #fbece8;
  --amber: #8a6d17;    --amber-soft: #fbf5e4;
  --slate: #4a5d59;    --slate-soft: #eef3f1;

  /* --- 形态 --- */
  --sk-r-card: 18px;
  --sk-r-ctl: 12px;
  --sk-r-sm: 10px;
  --sk-r-nav: 9px;
  --sk-r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 46, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 107, 91, .10);
  --shadow-lg: 0 18px 48px rgba(11, 46, 42, .16);
  --sk-shadow-card: 0 10px 30px rgba(15, 107, 91, .08);

  /* --- 外壳 --- */
  --side-w: 240px;
  --shell-pad: 24px;

  /* --- 动效：克制、无过冲 --- */
  --ease-press: cubic-bezier(.2, .8, .2, 1);
  --dur-enter: .32s;
  --dur-press: .2s;

  --font-ui: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ============================================================
   基础 / 排版
   ============================================================ */
body { color: var(--sk-text); font-size: 14px; }
:focus-visible { outline-color: var(--primary); }
.on-void :focus-visible { outline-color: var(--sk-on-void-accent); }
.boot-mark { border-radius: 50%; background: var(--primary); }

.kicker { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--primary); }
h1.vt { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 6px; }
.lede { color: var(--muted); font-size: 14px; }
.blk-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--muted); border-bottom-color: var(--hair); }
.hint { color: var(--muted); }

/* ============================================================
   按钮 / 表单
   ============================================================ */
.btn {
  border: 1.5px solid var(--primary); border-radius: var(--sk-r-ctl);
  background: var(--raise); color: var(--primary);
  font-size: 13.5px; font-weight: 600; padding: 8px 16px;
  transition: transform var(--dur-press) var(--ease-press), background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s linear;
}
.btn:hover { background: var(--sk-ice); }
.btn:active { background: var(--sk-ice-2); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.btn-primary:active { background: var(--primary-strong); }
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--sk-text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-sm { font-size: 12.5px; padding: 5px 12px; border-width: 1.5px; border-radius: var(--sk-r-sm); }
.btn-block { justify-content: center; }
.burger, .side-close { border-radius: var(--sk-r-sm); border-color: var(--rule); color: var(--muted); }

input, select, textarea {
  font-size: 14px; color: var(--ink); background: var(--raise);
  border: 1px solid var(--rule); border-radius: var(--sk-r-ctl);
  padding: 9px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--sk-line-hover); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--sk-glow);
}
input[type="checkbox"] { accent-color: var(--primary); }
label.fld > span {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--sk-text); margin-bottom: 6px;
}
.fld-err input, .fld-err select { border-color: var(--cinnabar); border-width: 1px; box-shadow: 0 0 0 3px var(--cinnabar-soft); }

.badge { border-radius: var(--sk-r-pill); font-size: 11.5px; font-weight: 600; letter-spacing: 0; padding: 2px 9px; }

.formerr { border-width: 1px; border-radius: var(--sk-r-ctl); }

/* ============================================================
   登录 / 邀请：满屏深青（CRM 登录页同款细网格）+ 白卡表单
   ============================================================ */
.auth {
  background-color: var(--void);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 24px 24px;
}
.auth-brand { background: transparent; border: 0; }
@media (min-width: 900px) { .auth-brand { border-right: 0; } }
.fin { border-radius: 4px; }
.brand { font-weight: 800; }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--terracotta); }
.on-void .brand-sub { color: var(--sk-on-void-accent); }
.auth-pitch h2 { font-weight: 800; font-size: 30px; letter-spacing: -.025em; }
.auth-pitch p { opacity: .72; }
.auth-rule { height: 1px; }

.auth-panel { padding: 0 var(--gutter) 48px; }
@media (min-width: 900px) { .auth-panel { padding: 48px; justify-content: center; } }
.auth-form {
  max-width: 420px; background: var(--raise); color: var(--sk-text);
  border-radius: var(--sk-r-card); box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}
@media (min-width: 900px) { .auth-form { padding: 40px 36px; } }
.auth-form h1 { font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--ink); }
.auth-sep { height: 1px; background: var(--rule); }

.idcard { border-width: 1px; border-color: var(--rule); border-radius: var(--sk-r-ctl); overflow: hidden; }
.idrow { border-bottom-color: var(--hair); }
.idrow > .k { width: 100px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.pwseg { border-radius: var(--sk-r-pill); }
.pwseg > i { background: var(--primary); }
.pwtoggle { border-radius: var(--sk-r-sm); border-color: var(--rule); font-weight: 600; letter-spacing: 0; height: 40px; }

/* ============================================================
   外壳：浅色侧栏（右 1px 线）+ 白色顶栏（下 1px 线）
   ============================================================ */
.side { background: var(--sk-side); border-right: 1px solid var(--rule); }
/* 手机：收起的抽屉不投影（白顶栏左缘会透出一道灰），展开时才有 */
@media (max-width: 899px) { .shell:not([data-side="open"]) .side { box-shadow: none; } }
.side-brand .sub { font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.side-brand .brand { font-size: 17px; letter-spacing: -.015em; color: var(--ink); }

/* 激活态：Ice 圆角底 + 深青字（滑动指示器保留，只换外观；左侧竖条收掉） */
.nav-ind { background: var(--sk-ice); border-radius: var(--sk-r-nav); }
.nav-bar { display: none; }
.navitem { border-radius: var(--sk-r-nav); color: var(--muted); transition: color .2s ease, background-color .2s ease; }
.navitem:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.navitem[aria-current="page"], .navitem[aria-current="page"]:hover { color: var(--primary); background: transparent; }
.navitem[aria-current="page"] .ico { color: var(--primary); }
.navitem .en { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.navitem[aria-current="page"] .en { font-weight: 600; }
.navitem .zh { color: var(--faint); }
.navitem .cnt {
  border-radius: var(--sk-r-pill); background: var(--primary); color: var(--on-primary);
  font-family: var(--font-ui); font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center;
}

.side-user { border-top: 1px solid var(--rule); }
.initial { border-radius: 50%; font-weight: 700; }
.side-user .nm b { color: var(--ink); font-weight: 600; }
.side-user .nm span { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--muted); }
.side-ver { color: var(--faint); }
.langsw .chip { text-align: center; }

.top { background: var(--sk-chrome); border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .top { padding: var(--space-3) 32px; min-height: 64px; } }
.top .titles h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.top .titles .kicker { font-size: 10px; }
.top .org b { font-weight: 600; }

@media (min-width: 900px) { .view > .inner { padding: 32px 32px 72px; } }

/* ============================================================
   业务页
   ============================================================ */
/* 筛选条：去掉结构线，chip 改胶囊；选中 = Ice 底 + 深青字 600 */
.filters { border-top: 0; border-bottom: 0; padding: var(--space-1) 0; gap: var(--space-3) 18px; }
.fgroup > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.chip {
  border-radius: var(--sk-r-pill); border: 1px solid var(--rule); background: var(--raise);
  color: var(--sk-text); font-weight: 500; padding: 4px 12px;
  transition: transform var(--dur-press) var(--ease-press), border-color .2s ease, color .2s ease, background-color .2s ease;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip[aria-pressed="true"] { background: var(--sk-ice); border-color: var(--sk-ice); color: var(--primary); font-weight: 600; }
.fsearch input, input.fsearch { border-radius: var(--sk-r-pill); padding-left: 16px; }

/* 产品卡：白底 18px、1px 线、柔和青色阴影，卡间留缝 */
.pgrid { gap: var(--space-4); border-top: 0; }
.pcard {
  border: 1px solid var(--rule); border-radius: var(--sk-r-card); background: var(--raise);
  box-shadow: var(--sk-shadow-card); padding: 20px 22px;
}
.pcard-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.pcard-intro { color: var(--muted); font-size: 13px; }
.prices { border-top-color: var(--hair); }
.pcell-l, .btotal .l, .tot-l { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.pcell-v, .btotal .v, .tot-v { font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.pcell-v { font-size: 17px; }
.pcell-margin .pcell-v, .tot-margin .tot-v, .cell-margin { color: var(--kelp); }
.bitems { border-top-color: var(--hair); }
.btotal { border-top: 1px solid var(--rule); }

/* 表格：外包白卡；表头浅底 600 说明色、句式大小写；行 hover 极浅 */
.scrollx {
  background: var(--raise); border: 1px solid var(--rule); border-radius: var(--sk-r-card);
  box-shadow: var(--sk-shadow-card);
}
table { font-size: 13.5px; }
thead th {
  background: var(--sk-th); font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--muted); border-bottom: 1px solid var(--rule); padding: 12px 10px 12px 0;
}
thead th:first-child, tbody td:first-child, tfoot td:first-child { padding-left: 18px; }
thead th:last-child, tbody td:last-child, tfoot td:last-child { padding-right: 18px; }
td input, td select { padding: 7px 10px; }
tbody td { color: var(--sk-text); border-bottom-color: var(--hair); padding-top: 10px; padding-bottom: 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--sk-row-hover); }
tfoot td { border-top: 1px solid var(--rule); padding-bottom: 12px; }
.cell-code { color: var(--faint); }
.cell-sub { color: var(--muted); }

/* 合计：KPI 小卡（白底 1px 线 12px、无阴影）一字排开 */
.totals { border: 0; background: transparent; gap: var(--space-3); }
.tot { background: var(--raise); border: 1px solid var(--rule); border-radius: var(--sk-r-ctl); padding: 14px 18px; }
.tot:last-child { border-right: 1px solid var(--rule); }
.tot-v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }

/* 抽屉：白卡、左侧两角圆、遮罩带一点青 */
.scrim { background: rgba(11, 46, 42, .3); }
.drawer {
  background: var(--raise); border-left: 0; box-shadow: var(--shadow-lg);
  border-radius: var(--sk-r-card) 0 0 var(--sk-r-card);
}
.drawer-head { border-bottom: 1px solid var(--hair); }
.drawer h2 { font-weight: 800; color: var(--ink); }
ul.tight li::marker { color: var(--terracotta); }

/* 交付进度：分段圆角块 —— 已过 Ice + 深青、当前深青实心、未到白底描线（同 CRM 阶段条） */
.flow { border: 0; background: transparent; gap: 6px; }
.fstep { border: 1px solid var(--rule); border-radius: var(--sk-r-ctl); background: var(--raise); }
.fstep:last-child { border-right: 1px solid var(--rule); }
.fstep.done { background: var(--sk-ice); border-color: var(--sk-ice); }
.fstep.done .fstep-t { color: var(--primary); }
.fstep.now { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.fstep.now .fstep-t, .fstep.now .fstep-n { color: var(--on-primary); }

.ck { border-bottom-color: var(--hair); }
.empty { border-top: 1px solid var(--rule); color: var(--muted); }
.note { border: 1px solid var(--rule); border-radius: var(--sk-r-ctl); background: var(--surface); color: var(--sk-text); }
.note b { font-weight: 700; }
.note-warn { border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: var(--amber-soft); color: var(--amber); }
.view-foot { border-top: 1px solid var(--rule); }

/* Toast：ink 底圆角、薄荷圆点 */
.toast { border-radius: var(--sk-r-ctl); background: var(--ink); color: var(--paper); }
.toast::before { border-radius: 50%; background: var(--terracotta); }

/* 选型咨询 */
.adv-compose, .adv-history { border-top: 1px solid var(--rule); }
.adv-drop { border-radius: var(--sk-r-ctl); border-color: var(--sk-line-hover); background: var(--raise); }
.adv-drop .ico { color: var(--primary); }
.adv-drop:hover, .adv-drop[data-drag="on"] { border-color: var(--primary); background: var(--sk-ice); }
.adv-rec {
  border: 1px solid var(--rule); border-radius: var(--sk-r-card); background: var(--raise);
  box-shadow: var(--sk-shadow-card); padding: 18px 20px;
}
.adv-rec-name { color: var(--ink); }
.adv-hist { border-bottom-color: var(--hair); border-radius: 0; }

/* ============================================================
   系统深色下的运营方标志：<picture> 的深色 <source> 按系统偏好生效、不看 data-theme，
   这里把 picture 画成浅色版（尺寸 = 内部 <img> 的 width/height）并隐藏 <img>。只在系统深色时生效，浅色下 DOM / 像素不变。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .op-mark-pic { background: url("/operator-mark.svg") center / contain no-repeat; }
  .op-mark-pic > img { visibility: hidden; }
}