/* =========================================================
   电子化收据管理系统 —— 界面样式
   ---------------------------------------------------------
   结构：
     ① 设计令牌（Design Tokens）
     ② 主题皮肤（4 套，data-theme 切换；只换品牌色/侧栏/星幕）
     ③ 基础重置
     ④ 布局外壳（可隐藏侧栏 + 顶栏）
     ⑤ 登录页（星空动效）
     ⑥ 组件（卡片 / 按钮 / 表单 / 表格 / 标签 / 统计卡 / 弹窗 …）
     ⑦ 旧类名兼容（历史渲染代码复用同一套令牌，避免视觉割裂）
   ========================================================= */

/* ============================================================
   ① 设计令牌
   ============================================================ */
:root{
  /* —— 语义色：四套主题共用，永不随主题变 ——
     保证「绿=已完结 / 橙=待处理 / 红=异常 / 紫=承兑」的颜色肌肉记忆稳定 */
  --danger:#d92d20;  --danger-bg:#fef3f2;  --danger-bd:#fecdca;
  --success:#0f8a5f; --success-bg:#ecfdf3; --success-bd:#abefc6;
  --warn:#b54708;    --warn-bg:#fffaeb;    --warn-bd:#fedf89;
  --violet:#6941c6;  --violet-bg:#f4f3ff;  --violet-bd:#d9d6fe;
  /* —— 中性 —— */
  --text:#101828; --text-2:#475467; --text-3:#98a2b3; --text-4:#cbd2dc;
  --bg:#f5f7fa; --surface:#fff; --surface-2:#f8fafc; --surface-3:#f1f4f9;
  --border:#e4e9f0; --border-2:#d3dae4;
  /* —— 尺寸 —— */
  --r-sm:8px; --r:10px; --r-lg:14px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 4px 12px rgba(16,24,40,.09);
  --sh-lg:0 16px 40px rgba(16,24,40,.16);
  --menu-w:250px; --top-h:60px;

  /* —— 兼容别名（历史渲染代码使用 --c-*，此处统一映射到新令牌）—— */
  --c-primary:var(--brand); --c-primary-d:var(--brand-d); --c-primary-l:var(--brand-50);
  --c-accent:var(--danger); --c-accent-l:var(--danger-bg);
  --c-ok:var(--success); --c-ok-l:var(--success-bg);
  --c-warn:var(--warn); --c-warn-l:var(--warn-bg);
  --c-gray:var(--text-3); --c-border:var(--border); --c-bg:var(--bg); --c-white:#fff;
  --c-text:var(--text); --c-text-2:var(--text-2);
  --shadow:var(--sh-xs); --shadow-lg:var(--sh-lg);
}

/* ============================================================
   ② 主题皮肤（操作人员自选；切换方式：根节点 data-theme）
   ============================================================ */
/* —— 主题一：星空蓝（默认）—— */
:root,:root[data-theme="starry"]{
  --brand:#2563eb; --brand-d:#1d4ed8; --brand-l:#3b82f6; --brand-ink:#1e40af;
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-ring:rgba(37,99,235,.18);
  --brand-sh:rgba(37,99,235,.32);
  --rail:#081327; --rail-2:#0c1f3d; --rail-3:#112a52;
  --rail-text:#c6d6ee; --rail-dim:#7891b6; --rail-line:rgba(255,255,255,.08);
  --rail-on:rgba(59,130,246,.28); --rail-glow:rgba(59,130,246,.45);
  --sky:linear-gradient(160deg,#03060d 0%,#071328 34%,#0d2450 66%,#1746a8 100%);
  --neb-a:rgba(59,130,246,.42); --neb-b:rgba(99,102,241,.28); --neb-c:rgba(56,189,248,.22);
  --meteor:#dceaff; --swatch:#2563eb; --sky-accent:#8fbdfb;
}
/* —— 主题二：国旗红 —— */
:root[data-theme="flag"]{
  --brand:#c8102e; --brand-d:#9c0c24; --brand-l:#ef4444; --brand-ink:#8f1a1f;
  --brand-50:#fff1f2; --brand-100:#ffe0e3; --brand-ring:rgba(200,16,46,.18);
  --brand-sh:rgba(200,16,46,.32);
  --rail:#1a0408; --rail-2:#2a070d; --rail-3:#3d0b13;
  --rail-text:#f0cfd4; --rail-dim:#b17c86; --rail-line:rgba(255,255,255,.09);
  --rail-on:rgba(239,68,68,.28); --rail-glow:rgba(239,68,68,.45);
  --sky:linear-gradient(160deg,#0b0203 0%,#20060a 34%,#540f18 66%,#b3121f 100%);
  --neb-a:rgba(225,29,42,.42); --neb-b:rgba(244,63,94,.26); --neb-c:rgba(251,146,60,.20);
  --meteor:#ffe2e0; --swatch:#c8102e; --sky-accent:#ff9f9a;
}
/* —— 主题三：护眼绿 —— */
:root[data-theme="eye"]{
  --brand:#4d7c0f; --brand-d:#3f6212; --brand-l:#65a30d; --brand-ink:#365314;
  --brand-50:#f7fee7; --brand-100:#ecfccb; --brand-ring:rgba(77,124,15,.18);
  --brand-sh:rgba(77,124,15,.32);
  --rail:#0b1206; --rail-2:#131d09; --rail-3:#1e2c0d;
  --rail-text:#dbe8c6; --rail-dim:#8b9c6e; --rail-line:rgba(255,255,255,.09);
  --rail-on:rgba(101,163,13,.26); --rail-glow:rgba(101,163,13,.45);
  --sky:linear-gradient(160deg,#040702 0%,#0c1405 34%,#1d2f0a 66%,#4d7c0f 100%);
  --neb-a:rgba(101,163,13,.38); --neb-b:rgba(16,185,129,.24); --neb-c:rgba(250,204,21,.16);
  --meteor:#eefbda; --swatch:#4d7c0f; --sky-accent:#cbe86b;
}
/* —— 主题四：典雅紫 —— */
:root[data-theme="violet"]{
  --brand:#7c3aed; --brand-d:#6d28d9; --brand-l:#8b5cf6; --brand-ink:#5b21b6;
  --brand-50:#f5f3ff; --brand-100:#ede9fe; --brand-ring:rgba(124,58,237,.18);
  --brand-sh:rgba(124,58,237,.32);
  --rail:#0b0618; --rail-2:#150c2c; --rail-3:#221041;
  --rail-text:#d8cdf0; --rail-dim:#8d7cb5; --rail-line:rgba(255,255,255,.09);
  --rail-on:rgba(139,92,246,.28); --rail-glow:rgba(139,92,246,.45);
  --sky:linear-gradient(160deg,#050310 0%,#0f0a24 34%,#1e1148 66%,#5b21b6 100%);
  --neb-a:rgba(139,92,246,.40); --neb-b:rgba(217,70,239,.24); --neb-c:rgba(56,189,248,.20);
  --meteor:#efe6ff; --swatch:#7c3aed; --sky-accent:#c4b5fd;
}

/* ============================================================
   ③ 基础重置
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:14px;color:var(--text);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis-weight:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:13.5px;color:var(--text)}
a{color:var(--brand);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c8d0db;border-radius:5px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#aab4c2;background-clip:content-box}
.mono{font-family:"SFMono-Regular",Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.muted{color:var(--text-3)}
.right{text-align:right}.center{text-align:center}.grow{flex:1}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.flex{display:flex;align-items:center;gap:10px}.flex-w{flex-wrap:wrap}
.g6{gap:6px}.g10{gap:10px}.g16{gap:16px}
.h2{font-size:16px;font-weight:700;margin-bottom:12px}
.h3{font-size:14px;font-weight:700;margin-bottom:10px}

/* ============================================================
   ④ 布局外壳
   ---------------------------------------------------------
   侧栏默认收起（不占位）；鼠标移入左边缘或侧栏 → 浮出覆盖；
   点「图钉」锁定为常显（常显时内容才右移）。
   ============================================================ */
.layout{display:flex;min-height:100vh}
.rail{width:var(--menu-w);background:var(--rail);flex-shrink:0;position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;z-index:22;
  transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s}
.layout.rail-open .rail{transform:none;box-shadow:18px 0 46px rgba(2,6,23,.34)}
.layout.pinned .rail{transform:none;box-shadow:none}
/* 左侧触发热区：悬停即浮出，点击即锁定常显 */
.rail-hot{position:fixed;left:0;top:0;bottom:0;width:16px;z-index:21;cursor:pointer}
.rail-hot .grip{position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:56px;
  border-radius:0 6px 6px 0;background:var(--brand);opacity:.45;transition:.2s}
.rail-hot:hover .grip{opacity:1;width:9px;box-shadow:0 0 14px var(--rail-glow)}
.rail-hidden{display:none}
.brand{padding:16px;border-bottom:1px solid var(--rail-line);display:flex;align-items:center;gap:9px}
.brand .logo{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.brand .mark{width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-l),var(--brand));
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px var(--rail-glow)}
.brand .mark svg{width:20px;height:20px}
.brand .nm{color:#fff;font-size:16.5px;font-weight:700;letter-spacing:.2px;line-height:1.3}
.brand .sb{color:var(--rail-dim);font-size:12px;letter-spacing:1.4px;margin-top:3px}
.rail-pin{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--rail-dim);flex-shrink:0;transition:.15s}
.rail-pin svg{width:16px;height:16px}
.rail-pin:hover{background:rgba(255,255,255,.1);color:#fff}
.rail-pin.on{background:var(--rail-on);color:#fff}
.nav{flex:1;overflow-y:auto;padding:12px 12px 18px}
.nav-g{padding:19px 12px 9px;font-size:14px;color:var(--rail-text);opacity:.72;
  letter-spacing:.9px;font-weight:700}
.nav-i{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;font-size:16px;
  color:var(--rail-text);cursor:pointer;transition:.13s;margin-bottom:2px;font-weight:500}
.nav-i svg{width:19px;height:19px;flex-shrink:0;opacity:.9}
.nav-i:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-i.on{background:var(--rail-on);color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.nav-i.on svg{opacity:1}
.nav-i .sfx{margin-left:auto;font-size:13px;color:var(--rail-dim);font-weight:600;letter-spacing:.6px}
.nav-i.on .sfx{color:#fff;opacity:.75}
.nav-i .bdg{margin-left:auto;background:var(--danger);color:#fff;font-size:12px;font-weight:700;
  min-width:22px;height:22px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;padding:0 6px}
.rail-foot{padding:14px 16px;border-top:1px solid var(--rail-line);display:flex;align-items:center;gap:11px}
.rail-foot .av{width:36px;height:36px;border-radius:50%;background:var(--rail-on);color:#cfe0f8;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px;flex-shrink:0}
.rail-foot .nm{color:#e3ecf8;font-size:14.5px;font-weight:600;line-height:1.3}
.rail-foot .rl{color:var(--rail-dim);font-size:12.5px;line-height:1.3}

.main{flex:1;margin-left:0;display:flex;flex-direction:column;min-width:0;
  transition:margin-left .26s cubic-bezier(.4,0,.2,1)}
.layout.pinned .main{margin-left:var(--menu-w)}
.top{height:var(--top-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;
  gap:14px;padding:0 24px;position:sticky;top:0;z-index:10}
.top .tt{font-size:16.5px;font-weight:700;letter-spacing:.2px;line-height:1.25}
.top .cr{font-size:12px;color:var(--text-3);line-height:1.25}
.top .sp{flex:1}
.bell{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  position:relative;color:var(--text-2);transition:.15s;flex-shrink:0}
.bell:hover{background:var(--surface-3);color:var(--text)}
.bell .dot{position:absolute;top:5px;right:5px;min-width:16px;height:16px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid #fff}
.ubtn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border-radius:9px;transition:.15s}
.ubtn:hover{background:var(--surface-3)}
.ubtn .av{width:30px;height:30px;border-radius:50%;background:var(--brand-50);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.ubtn .nm{font-size:13px;font-weight:600;line-height:1.25;text-align:left}
.ubtn .rl{font-size:10.5px;color:var(--text-3);line-height:1.25;text-align:left}
.content{padding:22px 24px 48px;flex:1;min-width:0}

/* 顶栏主题切换器 */
.tpick{display:flex;align-items:center;gap:2px;background:var(--surface-3);padding:3px;border-radius:11px;flex-shrink:0}
.tpick .lb{font-size:11.5px;color:var(--text-3);font-weight:600;padding:0 7px;white-space:nowrap}
.tpick button{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;font-size:12.5px;
  color:var(--text-2);font-weight:500;transition:.15s;white-space:nowrap}
.tpick button i{width:11px;height:11px;border-radius:50%;background:var(--swatch);flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tpick button:hover{background:#fff;color:var(--text);box-shadow:var(--sh-xs)}
.tpick button.on{background:#fff;color:var(--brand);font-weight:700;box-shadow:var(--sh-xs)}
@media(max-width:1500px){.tpick .lb{display:none}}

/* ============================================================
   ⑤ 登录页（左栏：星空动态背景）
   ============================================================ */
.login{min-height:100vh;display:grid;grid-template-columns:1.02fr .98fr;position:relative}
.login-l{background:var(--sky);position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;padding:0 68px;color:#fff}
.login-l .in{position:relative;z-index:2;max-width:540px;animation:lg-in .8s cubic-bezier(.2,.7,.3,1) both}
.login-l .lg{display:flex;align-items:center;gap:14px;margin-bottom:42px}
.login-l .lg .mk{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  animation:mk-glow 4.6s ease-in-out infinite}
.login-l .lg .mk svg{width:28px;height:28px}
.login-l .lg .nm{font-size:21px;font-weight:700;letter-spacing:.6px}
.login-l .lg .sb{font-size:12.5px;color:rgba(255,255,255,.66);letter-spacing:2.6px;margin-top:3px}
.login-l h2{font-size:40px;font-weight:700;line-height:1.34;letter-spacing:.8px;
  text-shadow:0 3px 30px rgba(2,6,18,.6)}
.login-l h2 em{font-style:normal;color:var(--sky-accent)}
/* 「线上化」三字光泽流动（不支持 background-clip:text 时自然回退为纯色）
   主色始终是 accent，只在中间留一道白光带 —— 不能大面积用白，
   否则流光扫过的瞬间字体与前面白字同色，「线上化」就失去强调作用。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .login-l h2 em{background-image:linear-gradient(100deg,
      var(--sky-accent) 0%,var(--sky-accent) 32%,#fff 46%,var(--sky-accent) 60%,var(--sky-accent) 100%);
    background-size:300% 100%;background-position:150% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:lg-flow 7s linear infinite}
}
@keyframes lg-flow{from{background-position:200% 50%}to{background-position:-100% 50%}}
.login-l .rule{width:88px;height:3px;border-radius:2px;margin-top:28px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.05));box-shadow:0 0 20px var(--rail-glow);
  animation:lg-in .8s cubic-bezier(.2,.7,.3,1) both .14s}
.login-l .foot{position:absolute;bottom:26px;left:68px;font-size:12.5px;color:rgba(255,255,255,.46);z-index:2}
@keyframes lg-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mk-glow{0%,100%{box-shadow:0 8px 26px rgba(2,6,23,.45),0 0 0 0 rgba(255,255,255,.2)}
  50%{box-shadow:0 8px 26px rgba(2,6,23,.45),0 0 0 10px rgba(255,255,255,0)}}
/* 星幕：星云 + 三层星点视差 + 流星 + 鼠标视差层 */
.sky{position:absolute;inset:0;overflow:hidden;z-index:0}
.sky .par{position:absolute;inset:-4%;will-change:transform;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.sky .neb{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform}
.sky .neb-a{width:620px;height:620px;background:var(--neb-a);top:-230px;right:-180px;animation:float-a 26s ease-in-out infinite}
.sky .neb-b{width:470px;height:470px;background:var(--neb-b);bottom:-200px;left:-150px;animation:float-b 33s ease-in-out infinite}
.sky .neb-c{width:340px;height:340px;background:var(--neb-c);top:36%;right:6%;animation:float-a 41s ease-in-out infinite reverse}
.sky .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,6,18,.20) 0%,rgba(2,6,18,.46) 60%,rgba(2,6,18,.64) 100%)}
.sky .stars{position:absolute;inset:-70% -32%;background-repeat:repeat;will-change:transform}
.sky .star-a{background-image:
    radial-gradient(1.7px 1.7px at 24px 36px,rgba(255,255,255,.95),transparent),
    radial-gradient(1.3px 1.3px at 128px 104px,rgba(255,255,255,.68),transparent),
    radial-gradient(1.5px 1.5px at 214px 28px,rgba(200,227,255,.88),transparent),
    radial-gradient(1.1px 1.1px at 76px 188px,rgba(255,255,255,.52),transparent);
  background-size:262px 262px;animation:drift 120s linear infinite,twinkle 6s ease-in-out infinite}
.sky .star-b{background-image:
    radial-gradient(1.1px 1.1px at 60px 20px,rgba(255,255,255,.62),transparent),
    radial-gradient(.9px .9px at 178px 148px,rgba(214,235,255,.5),transparent);
  background-size:178px 178px;animation:drift 78s linear infinite,twinkle 4.4s ease-in-out infinite .8s}
.sky .star-c{background-image:
    radial-gradient(2.2px 2.2px at 92px 72px,rgba(255,255,255,.9),transparent),
    radial-gradient(1.8px 1.8px at 238px 198px,rgba(203,229,255,.72),transparent);
  background-size:340px 340px;animation:drift 176s linear infinite,twinkle 8s ease-in-out infinite 1.6s}
.sky .shoot{position:absolute;width:172px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--meteor) 76%,#fff 100%);
  filter:drop-shadow(0 0 7px var(--meteor))}
.sky .shoot.s1{top:11%;left:4%;animation:meteor 9s ease-in infinite 1.2s}
.sky .shoot.s2{top:50%;left:1%;width:128px;animation:meteor 13s ease-in infinite 6.4s}
.sky .shoot.s3{top:74%;left:6%;width:150px;animation:meteor 11s ease-in infinite 3.6s}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-262px,-262px,0)}}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes float-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-48px,38px,0) scale(1.08)}}
@keyframes float-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(54px,-32px,0) scale(1.12)}}
@keyframes meteor{0%{opacity:0;transform:translate3d(0,0,0) rotate(28deg) scaleX(.3)}
  6%{opacity:1}
  26%,100%{opacity:0;transform:translate3d(560px,298px,0) rotate(28deg) scaleX(1)}}
/* ---- 右栏：登录表单（大字号 + 呼吸光晕 + 逐项入场） ---- */
.login-r{display:flex;align-items:center;justify-content:center;padding:44px 34px;
  background:#fff;position:relative;overflow:hidden}
.login-r::before,.login-r::after{content:'';position:absolute;border-radius:50%;filter:blur(58px);
  opacity:.075;pointer-events:none;will-change:transform}
.login-r::before{width:470px;height:470px;top:-190px;right:-160px;
  background:radial-gradient(circle at 50% 50%,var(--brand),transparent 68%);
  animation:halo-a 24s ease-in-out infinite}
.login-r::after{width:390px;height:390px;bottom:-170px;left:-140px;
  background:radial-gradient(circle at 50% 50%,var(--brand-d),transparent 68%);
  animation:halo-b 31s ease-in-out infinite}
@keyframes halo-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-72px,56px,0)}}
@keyframes halo-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(64px,-48px,0)}}
.login-f{width:100%;max-width:420px;position:relative;z-index:1}
.login-f>*{animation:lg-in .62s cubic-bezier(.2,.7,.3,1) both}
.login-f h3{font-size:30px;font-weight:700;letter-spacing:.3px;line-height:1.24;animation-delay:.04s}
.login-f .sub{font-size:15.5px;color:var(--text-3);margin-top:10px;margin-bottom:32px;animation-delay:.10s}
.login-f form>*{animation:lg-in .6s cubic-bezier(.2,.7,.3,1) both}
.login-f form>*:nth-child(1){animation-delay:.16s}
.login-f form>*:nth-child(2){animation-delay:.22s}
.login-f form>*:nth-child(3){animation-delay:.28s}
.login-f form>*:nth-child(4){animation-delay:.32s}
.login-f form>*:nth-child(5){animation-delay:.38s}
.login-f .lg-sep{animation-delay:.46s}
.login-f .lg-th{animation-delay:.52s}

/* 字段：聚焦时标签/图标染色 + 框内下划线向两侧展开 */
.lgf{margin-bottom:22px}
.lgf>label{display:block;font-size:15px;font-weight:600;color:var(--text-2);
  margin-bottom:9px;letter-spacing:.2px;transition:color .22s}
.lgf:focus-within>label{color:var(--brand)}
.lgw{position:relative}
.lgw .inp{height:54px;padding:0 46px;font-size:16.5px;border-radius:13px;
  transition:border-color .22s,box-shadow .3s,background .22s}
.lgw .inp:hover{border-color:#b9c2d0}
.lgw .inp:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring),0 8px 20px -12px var(--brand-sh)}
.lgw::after{content:'';position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));
  transition:left .34s cubic-bezier(.2,.7,.3,1),right .34s cubic-bezier(.2,.7,.3,1),opacity .22s}
.lgf:focus-within .lgw::after{left:18px;right:18px;opacity:.85}
.lg-ic{position:absolute;left:16px;top:50%;width:20px;height:20px;color:var(--text-4);pointer-events:none;
  transform:translateY(-50%);transition:color .22s,transform .3s cubic-bezier(.2,.7,.3,1)}
.lg-ic svg{width:20px;height:20px;display:block}
.lgf:focus-within .lg-ic{color:var(--brand);transform:translateY(-50%) scale(1.08)}
.lg-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;
  color:var(--text-4);border-radius:10px;transition:color .2s,background .2s,transform .2s}
.lg-eye svg{width:19px;height:19px}
.lg-eye:hover{color:var(--brand);background:var(--brand-50);transform:translateY(-50%) scale(1.06)}
.lg-eye.on{color:var(--brand)}

/* 报错：胶囊提示 + 抖动 */
.login-f .err{margin:-4px 0 18px;padding:11px 14px;font-size:14.5px;line-height:1.5;border-radius:11px;
  color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-bd)}
.lg-shake{animation:lg-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes lg-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.lg-rem{display:flex;align-items:center;gap:9px;width:fit-content;font-size:15px;color:var(--text-2);
  margin:-2px 0 24px;cursor:pointer;user-select:none;transition:color .2s}
.lg-rem:hover{color:var(--text)}
.lg-rem input{width:19px;height:19px;accent-color:var(--brand);cursor:pointer;transition:transform .2s}
.lg-rem:hover input{transform:scale(1.1)}

/* 登录按钮：渐变流光 + 上浮 + 周期性扫光 */
.login-f .lg-btn{height:56px;width:100%;border:none;border-radius:13px;color:#fff;
  font-size:17.5px;font-weight:700;letter-spacing:5px;text-indent:5px;position:relative;overflow:hidden;
  background-color:var(--brand);
  background-image:linear-gradient(115deg,var(--brand) 0%,var(--brand-d) 48%,var(--brand) 100%);
  background-size:230% 100%;background-position:0% 50%;
  box-shadow:0 8px 20px -8px var(--brand-sh),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s,background-position .6s ease}
.login-f .lg-btn:hover{transform:translateY(-2px);background-position:100% 50%;
  box-shadow:0 14px 30px -10px var(--brand-sh),inset 0 1px 0 rgba(255,255,255,.3)}
.login-f .lg-btn:active{transform:translateY(0) scale(.99)}
.login-f .lg-btn::after{content:'';position:absolute;top:-70%;left:-60%;width:38%;height:240%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  transform:skewX(-20deg);animation:lg-shine 5.2s ease-in-out infinite 1.6s}
@keyframes lg-shine{0%{left:-60%}46%,100%{left:132%}}
.login-f .lg-btn .lg-t{position:relative;z-index:1}
.login-f .lg-btn.loading{letter-spacing:2px;text-indent:2px;pointer-events:none;
  background-position:55% 50%;opacity:1}
.lg-spin{display:inline-block;width:17px;height:17px;margin-right:9px;vertical-align:-3px;
  border-radius:50%;border:2px solid rgba(255,255,255,.32);border-top-color:#fff;
  animation:lg-rot .68s linear infinite;position:relative;z-index:1}
@keyframes lg-rot{to{transform:rotate(360deg)}}

/* 分隔线 + 主题选择（表单下方唯一次要区块） */
.login-f .lg-sep{height:1px;margin:30px 0 20px;
  background:linear-gradient(90deg,transparent,var(--border-2) 18%,var(--border-2) 82%,transparent)}
.login-f .lg-th{display:flex;justify-content:center}
.login-f .lg-tpick{width:100%;justify-content:center;flex-wrap:wrap;gap:4px;padding:5px;border-radius:14px}
.login-f .lg-tpick .lb{display:block;font-size:13.5px;padding:0 8px}
.login-f .lg-tpick button{padding:8px 11px;font-size:14px;border-radius:10px;gap:5px;
  transition:transform .22s,background .2s,color .2s,box-shadow .2s}
.login-f .lg-tpick button i{width:10px;height:10px}
.login-f .lg-tpick button:hover{transform:translateY(-1px)}
.login-f .lg-tpick button.on{transform:translateY(-1px);box-shadow:0 2px 9px -3px rgba(15,23,42,.18)}

@media(max-width:1180px){
  .login{grid-template-columns:1fr}
  .login-l{display:none}
  .login-r{background:linear-gradient(180deg,var(--brand-50) 0%,#fff 46%)}
  .login-f{max-width:402px}
}
@media(max-width:480px){
  .login-f h3{font-size:26px}
  .login-f .sub{font-size:14.5px;margin-bottom:26px}
  .lgw .inp{height:50px;font-size:16px}
  .lg-rem{font-size:14px}
  .login-f .lg-btn{height:52px;font-size:16px;letter-spacing:3px;text-indent:3px}
}
@media(prefers-reduced-motion:reduce){
  .login-f>*,.login-f form>*,.login-l .in,.login-l .rule,.login-l .lg .mk,
  .login-r::before,.login-r::after{animation:none!important}
  .sky .neb,.sky .stars,.sky .shoot,.login-l h2 em{animation:none}
  .sky .par{transition:none}
  .login-f .lg-btn::after{display:none}
}

/* ============================================================
   ⑥ 组件
   ============================================================ */
/* ---- 卡片 ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.card-hd{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card-hd .t{font-size:14.5px;font-weight:700}
.card-hd .sp{flex:1}
.card-bd{padding:20px}
.card-bd.flush{padding:0}

/* ---- 按钮 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;
  border-radius:var(--r-sm);border:1px solid var(--border-2);background:#fff;color:var(--text-2);
  font-size:13.5px;font-weight:600;transition:.15s;white-space:nowrap;line-height:1}
.btn svg{width:15px;height:15px}
.btn:hover{border-color:#b6c0cd;background:var(--surface-2);color:var(--text)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px var(--brand-sh)}
.btn-primary:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#b42318;border-color:#b42318;color:#fff}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{background:#0b6f4c;border-color:#0b6f4c;color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--brand);box-shadow:none}
.btn-ghost:hover{background:var(--brand-50);color:var(--brand-d)}
.btn-sm{height:34px;padding:0 13px;font-size:13.5px;border-radius:8px}
.btn-sm svg{width:14px;height:14px}
.btn-lg{height:44px;padding:0 26px;font-size:14.5px;border-radius:10px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---- 表单 ---- */
.field,.fld2{margin-bottom:17px}
.field>label,.fld2>label{display:block;font-size:12.5px;color:var(--text-2);font-weight:600;margin-bottom:6px;letter-spacing:.1px}
.field>label .req,.fld2>label .req{color:var(--danger);margin-left:2px}
.inp,.sel,.area{width:100%;padding:9px 12px;border:1px solid var(--border-2);border-radius:var(--r-sm);
  background:#fff;transition:.15s;outline:none;height:38px}
.area{height:auto;min-height:76px;resize:vertical;line-height:1.65}
.inp:focus,.sel:focus,.area:focus{border-color:var(--brand-l);box-shadow:0 0 0 3px var(--brand-ring)}
.inp::placeholder,.area::placeholder{color:var(--text-4)}
.inp[readonly],.inp:disabled,.inp.disabled{background:var(--surface-2);color:var(--text-2)}
.sel{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:32px;cursor:pointer}
.hint{font-size:11.5px;color:var(--text-3);margin-top:5px;line-height:1.6}
.err{font-size:11.5px;color:var(--danger);margin-top:5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}

/* ---- 标签 ---- */
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:600;white-space:nowrap}
.tag svg{width:11px;height:11px}
/* 新命名 */
.t-brand{background:var(--brand-50);color:var(--brand)}
.t-ok{background:var(--success-bg);color:var(--success)}
.t-warn{background:var(--warn-bg);color:var(--warn)}
.t-danger{background:var(--danger-bg);color:var(--danger)}
.t-violet{background:var(--violet-bg);color:var(--violet)}
.t-gray{background:var(--surface-3);color:var(--text-2)}
.t-line{background:#fff;border:1px solid var(--border-2);color:var(--text-2)}
/* 旧命名兼容 */
.tag-x{background:var(--danger-bg);color:var(--danger)}
.tag-y{background:var(--brand-50);color:var(--brand)}
.tag-z{background:var(--violet-bg);color:var(--violet)}
.tag-ok{background:var(--success-bg);color:var(--success)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-gray{background:var(--surface-3);color:var(--text-2)}
.tag-red{background:var(--danger-bg);color:var(--danger)}
.tag-brand{background:var(--brand-50);color:var(--brand)}

/* ---- 表格 ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl-lg{font-size:15px}
.tbl-lg th{font-size:13px;padding:12px 16px}
.tbl-lg td{padding:12px 16px}
.tbl th{background:var(--surface-2);text-align:left;padding:11px 14px;font-weight:600;color:var(--text-3);
  font-size:11.5px;letter-spacing:.4px;border-bottom:1px solid var(--border);white-space:nowrap;
  position:sticky;top:0;z-index:1}
.tbl td{padding:13px 14px;border-bottom:1px solid #f0f3f7;vertical-align:middle}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:#f8fafd}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tbl .ctr{text-align:center}
/* 列表勾选框（批量核销）：跟随品牌色；不可核销的行用「—」占位而非禁用灰框，避免误以为能勾 */
.tbl input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--brand);vertical-align:middle;margin:0}
.tbl tfoot td{background:var(--surface-2);font-weight:700;border-top:1px solid var(--border-2);font-size:13px}
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--border);border-radius:var(--r);background:#fff}
.tbl-link{color:var(--brand);font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.tbl-link:hover{text-decoration:underline}

/* ---- 统计卡 ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:17px 18px;
  box-shadow:var(--sh-xs);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-22px;top:-22px;width:88px;height:88px;border-radius:50%;opacity:.07}
.stat .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat .ic svg{width:17px;height:17px}
.stat .lb{font-size:12.5px;color:var(--text-3);font-weight:600;display:flex;align-items:center;gap:6px}
.stat .vl{font-size:26px;font-weight:700;margin-top:5px;letter-spacing:-.6px;line-height:1.15;
  font-variant-numeric:tabular-nums}
.stat .sub{font-size:11.5px;color:var(--text-3);margin-top:6px}
/* 新语义命名 */
.stat.a::after{background:var(--brand)} .stat.a .vl{color:var(--brand)}
.stat.a .ic{background:var(--brand-50);color:var(--brand)}
.stat.b::after{background:var(--success)} .stat.b .vl{color:var(--success)}
.stat.b .ic{background:var(--success-bg);color:var(--success)}
.stat.c::after{background:var(--warn)} .stat.c .vl{color:var(--warn)}
.stat.c .ic{background:var(--warn-bg);color:var(--warn)}
.stat.d::after{background:var(--violet)} .stat.d .vl{color:var(--violet)}
.stat.d .ic{background:var(--violet-bg);color:var(--violet)}
/* 旧命名兼容 */
.stat.x::after{background:var(--danger)} .stat.x .vl{color:var(--danger)}
.stat.x .ic{background:var(--danger-bg);color:var(--danger)}
.stat.y::after{background:var(--brand)} .stat.y .vl{color:var(--brand)}
.stat.y .ic{background:var(--brand-50);color:var(--brand)}
.stat.z::after{background:var(--violet)} .stat.z .vl{color:var(--violet)}
.stat.z .ic{background:var(--violet-bg);color:var(--violet)}
.stat.g::after{background:var(--success)} .stat.g .vl{color:var(--success)}
.stat.g .ic{background:var(--success-bg);color:var(--success)}
.stat.neutral::after{background:var(--text-3)}
.stat.neutral .ic{background:var(--surface-3);color:var(--text-2)}

/* ---- 提示框 ---- */
.alert{padding:12px 15px;border-radius:var(--r);font-size:12.5px;line-height:1.75;margin-bottom:14px;
  display:flex;gap:10px;align-items:flex-start;border:1px solid transparent}
.alert svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.alert .ic{flex-shrink:0}
.alert.info{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-ink)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:#7a4210}
.alert.ok{background:var(--success-bg);border-color:var(--success-bd);color:#0b6f4c}
.alert.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:#a3241a}

/* ---- 键值表 ---- */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
.kv .it{display:flex;padding:11px 0;border-bottom:1px dashed #eef1f5;font-size:13.5px;gap:12px}
.kv .it .k{width:104px;color:var(--text-3);flex-shrink:0;font-size:12.5px}
.kv .it .v{flex:1;font-weight:500;word-break:break-word}

/* ---- 流转流程（新版：圆点 + 连线）---- */
.flow{display:flex;margin:2px 0 0}
.flow .st{flex:1;min-width:0;padding-right:16px}
.flow .st:last-child{padding-right:0}
.flow .dotwrap{display:flex;align-items:center;gap:9px;height:20px;margin-bottom:11px}
.flow .dot{width:19px;height:19px;border-radius:50%;background:var(--surface-3);border:2px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.flow .dot svg{width:10px;height:10px;color:#fff}
.flow .line{flex:1;height:2px;background:var(--border);border-radius:1px}
.flow .st:last-child .line{display:none}
.flow .nm{font-size:11.5px;color:var(--text-3);font-weight:600}
.flow .s{font-size:13px;font-weight:600;margin-top:3px}
.flow .tm{font-size:11px;color:var(--text-3);margin-top:3px}
.flow .st.done .dot{background:var(--success);border-color:var(--success)}
.flow .st.done .line{background:var(--success-bd)}
.flow .st.done .s{color:var(--success)}
.flow .st.cur .dot{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}
.flow .st.cur .s,.flow .st.cur .nm{color:var(--brand)}
.flow .st.bad .dot{background:var(--danger);border-color:var(--danger)}
.flow .st.bad .s{color:var(--danger)}
/* 旧版流程条兼容（.step） */
.flow .step{flex:1;position:relative;padding:14px 10px 14px 16px;border-left:2px solid var(--border)}
.flow .step:first-child{border-left:0}
.flow .step .n{font-size:11.5px;color:var(--text-3);font-weight:600}
.flow .step .s{font-size:13px;font-weight:600;margin-top:3px}
.flow .step .t{font-size:11px;color:var(--text-3);margin-top:3px}
.flow .step.done .n,.flow .step.done .s{color:var(--success)}
.flow .step.cur .n,.flow .step.cur .s{color:var(--brand)}

/* ---- 日志 ---- */
.log-list{max-height:420px;overflow-y:auto}
.log-item{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid #f0f3f7;font-size:12.5px}
.log-item:hover{background:#f8fafd}
.log-item .time{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11.5px;width:132px;flex-shrink:0}
.log-item .act{font-weight:600;min-width:86px;flex-shrink:0}
.log-item .who{color:var(--text-3);min-width:82px;flex-shrink:0}
.log-item .rem{flex:1;color:var(--text-2);word-break:break-word}

/* ---- 弹窗 ---- */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;
  justify-content:center;z-index:100;animation:fade .15s ease}
.modal{background:#fff;border-radius:14px;box-shadow:var(--sh-lg);width:480px;max-width:92vw;
  max-height:88vh;display:flex;flex-direction:column;animation:pop .18s ease}
.modal-lg{width:760px}
.modal-hd{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.modal-hd .t{font-size:15px;font-weight:700;flex:1}
.modal-bd{padding:20px 22px;overflow-y:auto}
.modal-ft{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.x-close{background:none;border:none;font-size:20px;color:var(--text-3);line-height:1;padding:2px 6px;border-radius:5px}
.x-close:hover{background:var(--surface-3);color:var(--text)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---- Toast ---- */
#toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{background:#fff;border-radius:10px;box-shadow:var(--sh-lg);padding:11px 20px;font-size:13px;
  display:flex;align-items:center;gap:9px;animation:pop .2s ease;border-left:4px solid var(--brand);max-width:560px}
.toast.ok{border-left-color:var(--success)}
.toast.err{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}

/* ---- 上传 ---- */
.up{border:1.5px dashed var(--border-2);border-radius:var(--r);padding:22px;text-align:center;cursor:pointer;
  transition:.15s;color:var(--text-3);font-size:13px;background:var(--surface-2)}
.up:hover{border-color:var(--brand);background:var(--brand-50);color:var(--brand)}
.up .ic{font-size:26px;margin-bottom:6px}
.up-file{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--surface-2);border-radius:7px;
  margin-top:9px;font-size:12.5px;border:1px solid var(--border)}
.up-file .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-file .rm{color:var(--danger);cursor:pointer;font-size:15px}

/* ---- 空状态 ---- */
.empty{text-align:center;padding:54px 20px;color:var(--text-3)}
.empty .ic{font-size:44px;margin-bottom:12px;opacity:.4}
.empty .t{font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.empty .s{font-size:12.5px}

/* ---- 复选框多选 ---- */
.chk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:5px 10px;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);max-height:230px;overflow:auto}
.chk-item{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:7px;cursor:pointer;line-height:1.4}
.chk-item:hover{background:var(--brand-50)}
.chk-item input{width:15px;height:15px;flex:0 0 auto;cursor:pointer;accent-color:var(--brand)}
.chk-item .nm{font-weight:600;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk-item .code{font-size:11px;color:var(--text-3);font-family:ui-monospace,SFMono-Regular,monospace;flex:0 0 auto}

/* ---- 工具条 ---- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .grow{flex:1}
.fld{display:flex;align-items:center;gap:8px}
.fld>label{font-size:13px;color:var(--text-2);white-space:nowrap}
.fld .inp,.fld .sel{width:auto;min-width:112px;height:38px;font-size:14px;padding:0 12px}
.fld .inp.date{width:152px}
.search{position:relative}
.search .inp{padding-left:30px;width:210px}
.search::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-52%);
  color:var(--text-3);font-size:15px}
/* 搜索框（新） */
.qbar{display:flex;align-items:center;height:38px;border:1px solid var(--border-2);border-radius:var(--r-sm);
  padding:0 13px;gap:9px;background:#fff;min-width:250px;transition:.15s}
.qbar:focus-within{border-color:var(--brand-l);box-shadow:0 0 0 3px var(--brand-ring)}
.qbar svg{width:16px;height:16px;color:var(--text-2);flex-shrink:0}
.qbar input{border:none;outline:none;width:100%;font-size:14px;background:none}
/* 分段按钮组 */
.chips{display:flex;gap:7px;background:var(--surface-3);padding:4px;border-radius:10px}
.chips button{padding:7px 14px;border-radius:8px;font-size:14px;color:var(--text-2);font-weight:500;transition:.15s}
.chips button:hover{background:rgba(255,255,255,.7)}
.chips button.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:var(--sh-xs)}
.pager{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:12.5px;color:var(--text-3)}
.pager .sp{flex:1}

/* ---- Tabs ---- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px}
.tab{padding:11px 21px;font-size:15.5px;color:var(--text-2);border-bottom:2px solid transparent;
  margin-bottom:-1px;font-weight:600;cursor:pointer;transition:.15s}
.tab:hover{color:var(--text)}
.tab.on,.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---- 详情头 ---- */
.detail-hd{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-bottom:1px solid var(--border)}
.detail-hd .no{font-size:21px;font-weight:700;font-family:"SFMono-Regular",Consolas,monospace;letter-spacing:.4px}
.detail-hd .no.blank{color:var(--text-3);font-family:inherit;font-size:19px}
.amt-big{font-size:25px;font-weight:700;color:var(--danger);letter-spacing:.4px}
.amt-small{font-size:14px;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ---- 印章预览 ---- */
.seal-card{display:flex;gap:20px;align-items:center}
.seal-box,.sealbox{width:132px;height:132px;border:1px dashed var(--border-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;background:#fffdfd;flex-shrink:0}
.seal-svg{width:118px;height:118px}
.seal-info{flex:1;min-width:0}
.badge-line{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
/* 印章卡片（新版） */
.seal-tile{display:flex;gap:16px;align-items:flex-start}
.seal-tile .sealbox{width:96px;height:96px}
.seal-tile .sealbox svg{width:88px;height:88px}

/* ---- 折叠块 ---- */
.fold{border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-xs);overflow:hidden}
.fold>.fold-hd{padding:14px 20px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.fold>.fold-hd .t{font-size:13.5px;font-weight:700;flex:1}
.fold>.fold-hd .cv{width:15px;height:15px;color:var(--text-3);transition:transform .2s;flex-shrink:0}
.fold.open>.fold-hd .cv{transform:rotate(90deg)}
.fold>.fold-bd{display:none;padding:0 20px 18px;font-size:12.5px;color:var(--text-2);line-height:1.9}
.fold.open>.fold-bd{display:block}
/* 高级选项（默认收起） */
.adv{margin-top:6px;border:1px dashed var(--border-2);border-radius:var(--r);background:var(--surface-2)}
.adv>.adv-hd{padding:10px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;
  color:var(--text-2);font-weight:600;user-select:none}
.adv>.adv-hd .cv{width:14px;height:14px;color:var(--text-3);transition:transform .2s}
.adv.open>.adv-hd .cv{transform:rotate(90deg)}
.adv>.adv-bd{display:none;padding:4px 14px 14px}
.adv.open>.adv-bd{display:block}
.adv>.adv-hd .tip{margin-left:auto;font-size:11.5px;color:var(--text-3);font-weight:400}

/* 金额大写即时预览条 */
.upper-bar{margin-top:9px;padding:10px 13px;background:var(--surface-2);border:1px dashed var(--border-2);
  border-radius:var(--r-sm);display:flex;align-items:center;gap:10px}
.upper-bar .lb{font-size:11.5px;color:var(--text-3);flex-shrink:0}
.upper-bar .vl{font-size:14.5px;font-weight:600;letter-spacing:1px;flex:1;word-break:break-all}
.amount-inp{position:relative}
.amount-inp .cur{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);
  font-size:15px;font-weight:600;pointer-events:none}
.amount-inp .inp{padding-left:32px;height:46px;font-size:19px;font-weight:700;letter-spacing:.4px;
  font-variant-numeric:tabular-nums}
.char-count{float:right;color:var(--text-3);font-weight:400}

/* ---- 收款明细（多事由 + 各自金额）：新建/编辑表单 ---- */
.items{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.item-row{display:grid;grid-template-columns:30px 1fr 178px 34px;align-items:center;gap:10px;
  padding:9px 10px;background:#fff;border-bottom:1px solid var(--border)}
.item-row:last-child{border-bottom:none}
.item-row .idx{width:22px;height:22px;border-radius:var(--r-full);background:var(--brand-50);color:var(--brand);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto}
.item-row .inp{height:38px;font-size:13.5px}
.item-row .amount-inp .inp{padding-left:30px;height:38px;font-size:15px}
.item-row .amount-inp .cur{left:11px;font-size:13.5px}
.item-row .ic-btn{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--border-2);background:#fff;
  color:var(--text-3);cursor:pointer;font-size:12px;line-height:1;transition:.15s}
.item-row .ic-btn:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}
.item-row .ic-btn:disabled{opacity:.35;cursor:not-allowed}
.items-foot{display:flex;align-items:center;gap:10px;padding:10px 2px 0}
.items-foot .lb{font-size:11.5px;color:var(--text-3)}
.items-foot .ttl{font-size:17px;font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums;
  letter-spacing:.3px}

/* ---- 收款明细：详情页只读展示 ---- */
.items-view{display:flex;flex-direction:column;gap:5px;width:100%}
.items-view .iv{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:baseline;font-size:13px}
.items-view .iv .n{color:var(--text-3);font-size:11.5px;text-align:right}
.items-view .iv .r{color:var(--text);word-break:break-all}
.items-view .iv .m{color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.items-view .iv.sum{border-top:1px dashed var(--border-2);padding-top:5px;margin-top:2px}
.items-view .iv.sum .r{color:var(--text-2)}
.items-view .iv.sum .m{color:var(--danger);font-weight:700}

/* ---- 主题卡片（设计规范 / 个人设置）---- */
.thcard{display:block;text-align:left;border:1px solid var(--border);border-radius:var(--r);padding:9px;
  background:#fff;transition:.15s;width:100%}
.thcard:hover{border-color:var(--brand);box-shadow:var(--sh-sm)}
.thcard.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.thcard .prev{height:58px;border-radius:8px;position:relative;overflow:hidden;margin-bottom:10px}
.thcard .prev .rb{position:absolute;left:0;top:0;bottom:0;width:24%}
.thcard .prev .tb{position:absolute;left:33%;top:12px;width:56%;height:8px;border-radius:4px;background:rgba(255,255,255,.40)}
.thcard .prev .bp{position:absolute;left:33%;bottom:13px;width:44%;height:11px;border-radius:5px}
.thcard .nm{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.thcard .nm span{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-50);padding:1px 7px;border-radius:var(--r-full)}
.thcard .ds{font-size:11.5px;color:var(--text-3);line-height:1.65;margin-top:4px}

/* 快捷操作栅格 */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ---- 我的消息（站内消息中心）---- */
.ms-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s;
  background:var(--surface);position:relative}
.ms-item:last-child{border-bottom:none}
.ms-item:hover{background:var(--surface-2)}
/* 未读：左侧品牌色竖条 + 浅底强调，一眼能扫出「还没看过的」 */
.ms-item.unread{background:var(--brand-50)}
.ms-item.unread:hover{background:var(--brand-50)}
.ms-item.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.ms-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ms-t{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:3px}
.ms-b{font-size:12.5px;color:var(--text-2);line-height:1.7;word-break:break-all;margin-bottom:8px}
.ms-ft{display:flex;align-items:center;gap:8px}
.dot-new{color:var(--danger);font-size:9px;line-height:1}

@media(max-width:1100px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .row2,.row3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
}
/* 窄屏：明细行改为「事由一行、金额与删除一行」，避免金额输入框被压扁 */
@media(max-width:720px){
  .item-row{grid-template-columns:26px 1fr 34px;grid-template-areas:'idx reason del' 'idx amount del';
    row-gap:7px}
  .item-row .idx{grid-area:idx}
  .item-row .it-reason{grid-area:reason}
  .item-row .it-amt{grid-area:amount}
  .item-row .ic-btn{grid-area:del}
  .items-foot{flex-wrap:wrap}
}