/* 企微内置应用 · 令牌（两个应用共用：广告助手、发货安排）
 *
 * 家在 services/webapp-kit/web/base.css，各应用在 index.html 里先引 kit/vendor 的组件库样式、
 * 再引这一份、最后引自己的 styles.css（根 AGENTS.md 一、19「同一类动作只准有一份实现」）。
 * 2026-10-06 原样从广告应用的 styles.css「一、令牌」那一段搬来（发货安排也做成企微应用，
 * 两边要同一套颜色、字号、圆角）。这一套的来历——2026-09-29 晚张洋看了截图后的那几轮——写在
 * services/ads-gateway/web/styles.css 文件头。**组件里不许写死色值**，要改风格只改这里。
 */

/* ══════════════════════════════════════════════════════════════════
   一、令牌
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #f1f3f6;
  --line:      #e3e6eb;
  --line-2:    #edf0f4;
  --text:      #14171f;
  --text-2:    #3f4655;
  --text-3:    #6b7280;
  --text-4:    #9aa1ad;
  --accent:    #2f5fd8;
  --tone-brand:  #2f5fd8; --tone-brand-bg:  #eaf0fc; --tone-brand-line: #c3d2f3;
  --tone-ok:     #16794c; --tone-ok-bg:     #e6f5ec;
  --tone-warn:   #9a5b00; --tone-warn-bg:   #fff3d6;
  --tone-danger: #b3261e; --tone-danger-bg: #fdecec;
  --tone-calm:   #4b5563; --tone-calm-bg:   #eef0f3;
  /* 图表：类别色按固定顺序（蓝 / 橙 / 青 / 黄，dataviz 校验过色盲可分），文字用文字色 */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --grid: #e9ecf1;
  /* 规则的专属颜色：一个色对 = 字色（700 档）+ 浅底（100 档）。预算家是暖色、ACoS 紫、高点击无销售家是冷色（对应 app.js RULE_LOOK） */
  --hue-rose: #be123c;   --hue-rose-bg: #ffe4e6;
  --hue-orange: #c2410c; --hue-orange-bg: #ffedd5;
  --hue-amber: #b45309;  --hue-amber-bg: #fef3c7;
  --hue-yellow: #a16207; --hue-yellow-bg: #fef9c3;
  --hue-violet: #6d28d9; --hue-violet-bg: #ede9fe;
  --hue-indigo: #4338ca; --hue-indigo-bg: #e0e7ff;
  --hue-blue: #1d4ed8;   --hue-blue-bg: #dbeafe;
  --hue-sky: #0369a1;    --hue-sky-bg: #e0f2fe;
  --hue-teal: #0f766e;   --hue-teal-bg: #ccfbf1;
  --hue-gray: #4b5563;   --hue-gray-bg: #eef0f3;
  /* 实心填了 --hue-* 的块上写字用的颜色（发货安排选中的状态框）：浅色主题 hue 是深色 → 白字 */
  --on-hue: #ffffff;
  /* 组头那一层很浅的底（按优先级） */
  --tint-danger: #fff4f4; --tint-warn: #fff8ea; --tint-calm: #f5f6f9; --tint-brand: #f3f6fe;
  --tint-danger-line: #f3cfcf; --tint-warn-line: #efdcb0; --tint-calm-line: #dfe3ea;
  --r: 8px; --r-s: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans CJK SC", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-w: 216px;

  /* Element Plus 的令牌接到我们的上面 */
  --el-color-primary: #2f5fd8;
  --el-color-primary-dark-2: #2650bd;
  --el-color-primary-light-3: #5c82e0;
  --el-color-primary-light-5: #8aa5ea;
  --el-color-primary-light-7: #b9cbf2;
  --el-color-primary-light-8: #d3dff8;
  --el-color-primary-light-9: #eaf0fc;
  --el-color-success: #16794c; --el-color-success-light-9: #e6f5ec; --el-color-success-light-8: #cfe9da; --el-color-success-light-5: #8fc7a8; --el-color-success-light-3: #4f9c74;
  --el-color-warning: #9a5b00; --el-color-warning-light-9: #fff3d6; --el-color-warning-light-8: #f7e3b3; --el-color-warning-light-5: #d9b46a; --el-color-warning-light-3: #b8853a;
  --el-color-danger: #b3261e;  --el-color-danger-light-9: #fdecec;  --el-color-danger-light-8: #f6d3d1;  --el-color-danger-light-5: #e39a96;  --el-color-danger-light-3: #cc5f59;
  --el-color-error: #b3261e;   --el-color-error-light-9: #fdecec;   --el-color-error-light-8: #f6d3d1;
  --el-color-info: #6b7280;    --el-color-info-light-9: #eef0f3;    --el-color-info-light-8: #e0e3e8;    --el-color-info-light-5: #b3b9c3;    --el-color-info-light-3: #8a919d;
  --el-text-color-primary: var(--text);
  --el-text-color-regular: var(--text-2);
  --el-text-color-secondary: var(--text-3);
  --el-text-color-placeholder: var(--text-4);
  --el-border-color: var(--line);
  --el-border-color-light: var(--line);
  --el-border-color-lighter: var(--line-2);
  --el-border-color-extra-light: var(--line-2);
  --el-border-color-hover: #b3bac6;
  --el-fill-color-blank: var(--surface);
  --el-fill-color-light: var(--surface-2);
  --el-fill-color-lighter: var(--surface-2);
  --el-fill-color: var(--surface-3);
  --el-bg-color: var(--surface);
  --el-bg-color-overlay: var(--surface);
  --el-bg-color-page: var(--bg);
  --el-font-family: var(--font);
  --el-font-size-base: 13px;
  --el-font-size-small: 12px;
  --el-font-size-extra-small: 11px;
  --el-font-size-medium: 14px;
  --el-font-size-large: 16px;
  --el-border-radius-base: 6px;
  --el-border-radius-small: 4px;
  --el-component-size: 32px;
  --el-component-size-small: 26px;
  --el-component-size-large: 38px;
  --el-box-shadow-light: 0 6px 20px rgba(16, 24, 40, .08);
  --el-box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
}
html.dark {
  --bg:        #0f1115;
  --surface:   #161a21;
  --surface-2: #1b2029;
  --surface-3: #212734;
  --line:      #262c37;
  --line-2:    #202632;
  --text:      #e9ecf1;
  --text-2:    #c3c9d3;
  --text-3:    #8f97a5;
  --text-4:    #6f7785;
  --accent:    #6d93f0;
  --tone-brand:  #6d93f0; --tone-brand-bg:  #1a2540; --tone-brand-line: #2f4577;
  --tone-ok:     #4cc27a; --tone-ok-bg:     #12311f;
  --tone-warn:   #e0b04a; --tone-warn-bg:   #3a2c10;
  --tone-danger: #f07070; --tone-danger-bg: #3b1c1c;
  --tone-calm:   #a3abb8; --tone-calm-bg:   #232936;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --grid: #262b39;
  --hue-rose: #fda4af;   --hue-rose-bg: #3f1a24;
  --hue-orange: #fdba74; --hue-orange-bg: #3d2314;
  --hue-amber: #fcd34d;  --hue-amber-bg: #3a2c12;
  --hue-yellow: #fde047; --hue-yellow-bg: #363012;
  --hue-violet: #c4b5fd; --hue-violet-bg: #2d2350;
  --hue-indigo: #a5b4fc; --hue-indigo-bg: #232a55;
  --hue-blue: #93c5fd;   --hue-blue-bg: #172b4d;
  --hue-sky: #7dd3fc;    --hue-sky-bg: #10304a;
  --hue-teal: #5eead4;   --hue-teal-bg: #0f3532;
  --hue-gray: #a3abb8;   --hue-gray-bg: #232936;
  /* 深色主题 hue 是浅色 → 深字 */
  --on-hue: #0f1115;
  --tint-danger: #2a1b1e; --tint-warn: #2a2418; --tint-calm: #1b2029; --tint-brand: #1a2233;
  --tint-danger-line: #4a2a2e; --tint-warn-line: #4a3d22; --tint-calm-line: #2a3140;
  --el-color-primary: #6d93f0;
  --el-color-primary-dark-2: #5b80dc;
  --el-color-primary-light-3: #587fd8;
  --el-color-primary-light-5: #3f5fa8;
  --el-color-primary-light-7: #2f4577;
  --el-color-primary-light-8: #253861;
  --el-color-primary-light-9: #1a2540;
  --el-color-success: #4cc27a; --el-color-success-light-9: #12311f; --el-color-success-light-8: #1a4a2e; --el-color-success-light-5: #2c7a4c; --el-color-success-light-3: #3d9f64;
  --el-color-warning: #e0b04a; --el-color-warning-light-9: #3a2c10; --el-color-warning-light-8: #4d3b16; --el-color-warning-light-5: #7d5f23; --el-color-warning-light-3: #b18a35;
  --el-color-danger: #f07070;  --el-color-danger-light-9: #3b1c1c;  --el-color-danger-light-8: #4d2323;  --el-color-danger-light-5: #7d3838;  --el-color-danger-light-3: #b55252;
  --el-color-error: #f07070;   --el-color-error-light-9: #3b1c1c;   --el-color-error-light-8: #4d2323;
  --el-color-info: #a3abb8;    --el-color-info-light-9: #232936;    --el-color-info-light-8: #2b3340;    --el-color-info-light-5: #4a5262;    --el-color-info-light-3: #6e7787;
  --el-border-color-hover: #3a4252;
  --el-box-shadow-light: 0 6px 20px rgba(0, 0, 0, .35);
  --el-box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}


/* ── 账号密码登录页、修改密码弹窗（发货安排 2026-10-14 起；2026-10-16 搬来给两个应用共用）──
   部件在 kit.js（loginView / passwordDialog）。--r-card / --brand-solid / --on-brand 是发货安排自己 :root 里
   定的（它的外观照旧）；广告应用没定，退回到通用的圆角、品牌色和白字。 */
.lgn {
  height: 100vh; height: 100dvh; box-sizing: border-box; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 400px); justify-content: center; align-content: safe center;
  padding: 24px 16px; background: var(--bg);
}
.lgn-card {
  width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 32px 32px 28px;
  background: var(--surface); border-radius: var(--r-card, 14px);
  box-shadow: 0 18px 40px -18px rgba(16, 48, 44, .45), 0 2px 6px -2px rgba(16, 48, 44, .18);
}
.lgn-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.lgn-mark {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--brand-solid, var(--el-color-primary)); color: var(--on-brand, #ffffff);
}
.lgn-mark .ic { width: 24px; height: 24px; }
.lgn-t { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; }
.lgn-s { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.lgn-f { display: flex; flex-direction: column; gap: 6px; }
.lgn-k { font-size: 13px; font-weight: 600; color: var(--text-2); }
.lgn-err {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
  background: var(--tint-warn); color: var(--tone-warn); font-size: 13px;
}
.lgn-err .ic { width: 14px; height: 14px; flex: none; }
.lgn-go.el-button { width: 100%; margin-top: 4px; }
@media (max-width: 480px) { .lgn-card { padding: 26px 20px 22px; } }
/* 修改密码、账号管理的弹窗里那几格：跟登录页同一套格子 */
.pwd { display: flex; flex-direction: column; gap: 14px; }