/* ============================================================================
   ui-tokens.css — 梦一城 · 统一设计令牌层 v1
   ----------------------------------------------------------------------------
   用途：把 13 个站的配色 / 圆角 / 阴影 / 动效收成一套。
   原则：
     1. 只定义 :root 变量 + .ui- 前缀组件类，【零全局元素选择器】
        → 塞进 qiye/sales.html 这种 1.6MB 老页面也不会污染任何既有样式
     2. 换肤只改 :root 里 6 个 --glass-* 变量
     3. 骨架数值抄 Arco，皮肤是玻璃；两层互不干扰
   引入：<link rel="stylesheet" href="/assets/ui-tokens.css">
   ========================================================================== */

:root{
  /* ── 主色：全站统一一种蓝 ───────────────────────────────── */
  --ui-primary:#165DFF;
  --ui-primary-hover:#4080FF;
  --ui-primary-active:#0E42D2;
  --ui-primary-light:#E8F3FF;
  --ui-primary-ring:rgba(22,93,255,.14);

  /* ── 业务语义色（保险/保函场景固定含义，别乱用） ────────── */
  --ui-ok:#00B42A;      /* 已出函 / 正常 / 通过 */
  --ui-warn:#FF7D00;    /* 待跟进 / 即将到期 */
  --ui-danger:#F53F3F;  /* 已逾期 / 风险 / 删除 */
  --ui-info:#165DFF;    /* 审核中 / 进行中 */
  --ui-ok-bg:#E8FFEA;
  --ui-warn-bg:#FFF7E8;
  --ui-danger-bg:#FFECE8;
  --ui-info-bg:#E8F3FF;

  /* ── 底色与文字 ────────────────────────────────────────── */
  --ui-page:#F2F5F9;      /* 页面底：玻璃必须有底色，纯白上放玻璃=看不见 */
  --ui-surface:#FFFFFF;
  --ui-surface-2:#F7F8FA;
  --ui-ink-1:#1D2129;     /* 正文 / 标题 */
  --ui-ink-2:#4E5969;     /* 次要文字（玻璃上最浅只到这里） */
  --ui-ink-3:#86909C;     /* 辅助说明（只在实底上用） */
  --ui-ink-4:#C9CDD4;     /* 占位符 / 禁用 */

  /* ── 描边 ──────────────────────────────────────────────── */
  --ui-line:#E5E6EB;
  --ui-line-2:#F2F3F5;
  --ui-line-input:#D9DCE2;

  /* ── 圆角：三档 + squircle ─────────────────────────────── */
  --ui-r-card:14px;
  --ui-r-btn:8px;
  --ui-r-tag:6px;
  --ui-r-squircle:22px;   /* 玻璃底板专用，别和 8px 混用 */

  /* ── 阴影：两档 + 玻璃 ─────────────────────────────────── */
  --ui-sh-1:0 1px 3px rgba(29,33,41,.05);
  --ui-sh-2:0 4px 16px rgba(29,33,41,.07);
  --ui-sh-3:0 12px 32px rgba(29,33,41,.10);

  /* ── 皮肤：柔和玻璃拟物（换皮肤只改这一段） ─────────────── */
  --ui-glass-bg:rgba(255,255,255,.70);
  --ui-glass-brd:rgba(255,255,255,.92);
  --ui-glass-blur:blur(20px) saturate(175%);
  --ui-glass-shadow:0 8px 32px rgba(31,38,135,.08),
                    inset 0 1px 0 rgba(255,255,255,.95);
  --ui-glass-sheen:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 42%);

  /* ── 字号：四级 ────────────────────────────────────────── */
  --ui-fs-h1:26px;
  --ui-fs-h2:17px;
  --ui-fs-body:14px;
  --ui-fs-aux:12.5px;
  --ui-lh:1.6;

  /* ── 间距：8 栅格 ──────────────────────────────────────── */
  --ui-gap:8px;
  --ui-pad-card:20px;
  --ui-pad-page:24px;

  /* ── 动效 ──────────────────────────────────────────────── */
  --ui-e-out:cubic-bezier(.2,.8,.2,1);
  --ui-e-inout:cubic-bezier(.25,.1,.25,1);
  --ui-t-fast:150ms;
  --ui-t-base:250ms;
  --ui-t-slow:350ms;

  /* ── 字体 ──────────────────────────────────────────────── */
  --ui-font:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans",
            "Microsoft YaHei",system-ui,sans-serif;
  --ui-mono:ui-monospace,"SF Mono",Consolas,"Cascadia Mono",monospace;

  /* ── 层级：qiye 登录遮罩是 3000，其上浮层必须 ≥3200 ─────── */
  --ui-z-login:3000;
  --ui-z-dialog:3200;
  --ui-z-toast:3400;
}

/* ============================================================================
   组件层 —— 全部 .ui- 前缀，不碰任何既有类名
   ========================================================================== */

/* ── 按钮 ─────────────────────────────────────────────────── */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 16px;border:1px solid transparent;
  border-radius:var(--ui-r-btn);
  font-family:var(--ui-font);font-size:13.5px;font-weight:600;line-height:1;
  background:var(--ui-primary);color:#fff;cursor:pointer;
  transition:transform var(--ui-t-fast) var(--ui-e-out),
             background var(--ui-t-fast) ease,
             box-shadow var(--ui-t-fast) ease;
  -webkit-tap-highlight-color:transparent;
}
.ui-btn:hover{background:var(--ui-primary-hover);box-shadow:0 4px 14px rgba(22,93,255,.26)}
.ui-btn:active{transform:scale(.97);filter:brightness(.95)}
.ui-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-primary-ring)}
.ui-btn:disabled,.ui-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.ui-btn--ghost{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-ink-1);box-shadow:none}
.ui-btn--ghost:hover{background:var(--ui-surface-2);border-color:var(--ui-ink-4);box-shadow:none}
.ui-btn--soft{background:var(--ui-primary-light);color:var(--ui-primary);box-shadow:none}
.ui-btn--soft:hover{background:#D8E9FF;box-shadow:none}
.ui-btn--danger{background:var(--ui-danger)}
.ui-btn--danger:hover{background:#E03B3A;box-shadow:0 4px 14px rgba(245,63,63,.26)}
.ui-btn--sm{height:28px;padding:0 11px;font-size:12.5px;border-radius:6px}
.ui-btn--pill{border-radius:999px}
.ui-btn--block{display:flex;width:100%}

/* ── 卡片 ─────────────────────────────────────────────────── */
.ui-card{
  background:var(--ui-surface);border:1px solid var(--ui-line);
  border-radius:var(--ui-r-card);padding:var(--ui-pad-card);
  box-shadow:var(--ui-sh-1);
}
.ui-card--hover{
  transition:transform var(--ui-t-base) var(--ui-e-out),
             box-shadow var(--ui-t-base) var(--ui-e-out);
}
.ui-card--hover:hover{transform:translateY(-4px);box-shadow:var(--ui-sh-3)}

/* ── 玻璃卡：三条硬约束见文末注释 ─────────────────────────── */
.ui-glass{
  position:relative;overflow:hidden;
  background:var(--ui-glass-bg);
  border:1px solid var(--ui-glass-brd);
  border-radius:var(--ui-r-squircle);
  -webkit-backdrop-filter:var(--ui-glass-blur);
  backdrop-filter:var(--ui-glass-blur);
  box-shadow:var(--ui-glass-shadow);
}
.ui-glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--ui-glass-sheen);
}
/* 内容必须抬到高光层之上，否则会被糊白 */
.ui-glass>*{position:relative;z-index:1}

/* ── 标签 ─────────────────────────────────────────────────── */
.ui-tag{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:var(--ui-r-tag);
  font-family:var(--ui-font);font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--ui-info-bg);color:var(--ui-primary);
}
.ui-tag--ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-tag--warn{background:var(--ui-warn-bg);color:var(--ui-warn)}
.ui-tag--danger{background:var(--ui-danger-bg);color:var(--ui-danger)}
.ui-tag--mute{background:var(--ui-line-2);color:var(--ui-ink-2)}

/* 带圆点的状态徽章（列表里用这个，比纯色块好认） */
.ui-badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:var(--ui-r-tag);background:var(--ui-line-2);
  font-size:11.5px;font-weight:650;line-height:1.7;color:var(--ui-ink-2);
}
.ui-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.ui-badge--ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-badge--warn{background:var(--ui-warn-bg);color:#D25F00}
.ui-badge--danger{background:var(--ui-danger-bg);color:#CB2634}

/* ── 表格 ─────────────────────────────────────────────────── */
.ui-table{width:100%;border-collapse:collapse;font-family:var(--ui-font);font-size:13px}
.ui-table th{
  text-align:left;font-weight:650;color:var(--ui-ink-2);background:var(--ui-surface-2);
  padding:10px 13px;border-bottom:1px solid var(--ui-line);white-space:nowrap;font-size:12.5px;
}
.ui-table td{padding:11px 13px;border-bottom:1px solid var(--ui-line-2);vertical-align:top}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background var(--ui-t-fast) ease}
.ui-table tbody tr:hover{background:#FAFBFC}
/* 数字必须等宽 + 右对齐，否则列对不齐 */
.ui-table .ui-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 输入 ─────────────────────────────────────────────────── */
.ui-input{
  width:100%;height:36px;padding:0 12px;
  border:1px solid var(--ui-line-input);border-radius:var(--ui-r-btn);
  background:var(--ui-surface);color:var(--ui-ink-1);
  font-family:var(--ui-font);font-size:13.5px;outline:none;
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.ui-input::placeholder{color:var(--ui-ink-4)}
.ui-input:focus{border-color:var(--ui-primary);box-shadow:0 0 0 3px var(--ui-primary-ring)}
.ui-input--err{border-color:var(--ui-danger);box-shadow:0 0 0 3px rgba(245,63,63,.11)}
.ui-label{display:block;font-size:12.5px;font-weight:600;color:var(--ui-ink-2);margin-bottom:6px}
.ui-hint{font-size:11.5px;color:var(--ui-danger);margin-top:5px}

/* ── 数字：金额/统计专用 ──────────────────────────────────── */
.ui-metric{
  font-variant-numeric:tabular-nums;font-weight:750;
  letter-spacing:-.5px;line-height:1.15;
}
.ui-metric--lg{font-size:26px}
.ui-metric--xl{font-size:34px}
.ui-metric small{font-size:12px;font-weight:600;color:var(--ui-ink-3);margin-left:2px;letter-spacing:0}

/* 涨红跌绿（中国股市惯例，金融相关页面专用） */
.ui-up{color:var(--ui-danger)}
.ui-down{color:var(--ui-ok)}

/* ── 骨架屏 ───────────────────────────────────────────────── */
.ui-skel{
  position:relative;overflow:hidden;border-radius:6px;
  background:#EDEFF3;
}
.ui-skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  animation:ui-shimmer 1400ms linear infinite;
}
@keyframes ui-shimmer{to{transform:translateX(100%)}}

/* ── 空状态 ───────────────────────────────────────────────── */
.ui-empty{text-align:center;padding:30px 16px}
.ui-empty__icon{
  width:56px;height:56px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#F0F5FF,#E4EEFF);border:1px solid #DCE8FF;
}
.ui-empty__title{font-size:13.5px;font-weight:640;color:var(--ui-ink-1)}
.ui-empty__desc{font-size:12px;color:var(--ui-ink-3);margin-top:4px}

/* ── Toast ────────────────────────────────────────────────── */
.ui-toast{
  position:fixed;left:50%;bottom:38px;z-index:var(--ui-z-toast);
  display:flex;align-items:center;gap:9px;
  height:44px;padding:0 20px;border-radius:999px;
  background:rgba(24,30,42,.92);color:#fff;
  font-family:var(--ui-font);font-size:13.5px;font-weight:550;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.3);
  opacity:0;transform:translate(-50%,20px);pointer-events:none;
  transition:opacity 200ms ease,transform var(--ui-t-slow) var(--ui-e-out);
}
.ui-toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ── 列表进场 ─────────────────────────────────────────────── */
.ui-stagger>*{animation:ui-fade-up 200ms var(--ui-e-out) both}
@keyframes ui-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 换肤入口 ─────────────────────────────────────────────── */
/* 想在某个站临时关掉玻璃（低端设备/打印），给它加 data-ui-skin="flat" 即可 */
[data-ui-skin="flat"] .ui-glass{
  background:var(--ui-surface);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:var(--ui-line);
  box-shadow:var(--ui-sh-1);
  border-radius:var(--ui-r-card);
}
[data-ui-skin="flat"] .ui-glass::before{display:none}

/* ── 无障碍 ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ui-btn,.ui-card--hover,.ui-toast,.ui-stagger>*,.ui-skel::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}

/* ============================================================================
   玻璃三条硬约束（踩过坑，别违反）
   1. 必须有底色 —— 页面底色至少 #F2F5F9。纯白底上放 .ui-glass 等于没有。
   2. 玻璃上的次级文字最浅只能到 --ui-ink-2。用 --ui-ink-3 会看不清。
   3. 同屏玻璃卡 ≤ 6 个 —— backdrop-filter 会掉帧。
      列表项（几十个）一律用 .ui-card 实底，不要玻璃。
   ========================================================================== */