/* 由 index.html 的内联 <style> 抽出（2026-10-05）。
   CSP: style-src-elem: inline 阻断项 —— 内联样式元素是收紧 style-src 的阻塞点，
   迁出为外链样式表后归 style-src-elem 'self' 管辖。内容原样搬移，未做改动。 */
@import './semantic-aliases.css';

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;outline:none}
.hidden{display:none!important}

/* ===== 登录页 · 全屏品牌沉浸（对齐工作台 index.html） ===== */
#loginPage{min-height:100vh;display:flex;background:var(--grad-login);position:relative;overflow:hidden}
/* 装饰：柔光 */
#loginPage::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 85%,var(--a-white-mid) 0%,transparent 40%),radial-gradient(circle at 85% 15%,var(--a-white-weak) 0%,transparent 35%);pointer-events:none}
/* 装饰：科技感网格 */
#loginPage::after{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--a-white-weak) 1px,transparent 1px),linear-gradient(90deg,var(--a-white-weak) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;-webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 75%);mask-image:radial-gradient(circle at center,black 0%,transparent 75%)}
.login-wrap{position:relative;z-index:1;display:flex;width:100%;min-height:100vh;align-items:center;justify-content:center;padding:var(--sp-xxl)}
/* 左侧品牌区 */
.login-brand{flex:1;max-width:560px;color:var(--on-brand);padding:60px;display:flex;flex-direction:column;justify-content:center}
.login-brand .brand-logo-big{width:240px;height:auto;margin-bottom:var(--sp-huge);filter:drop-shadow(0 8px 24px var(--a-black-mid))}
.login-brand h1{font-size:var(--glyph-splash);font-weight:var(--fw-bold);letter-spacing:1px;margin-bottom:var(--sp-md);line-height:var(--lh-tight)}
.login-brand .tagline{font-size:var(--fs-titleLg);opacity:.9;margin-bottom:var(--sp-huge);font-weight:var(--fw-regular)}
.login-brand .features{display:flex;flex-direction:column;gap:var(--sp-lg);margin-top:var(--sp-xxl)}
.login-brand .feat{display:flex;align-items:center;gap:var(--sp-md);font-size:var(--fs-bodyLg);opacity:.95}
.login-brand .feat::before{content:'✓';width:22px;height:22px;border-radius:50%;background:var(--a-white-mid);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
/* 右侧登录卡片 */
.login-box{background:var(--surface);border-radius:var(--radius-xxl);padding:44px var(--sp-huge);width:420px;max-width:100%;box-shadow: var(--elev-ink-xxl);position:relative;overflow:hidden}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-brand-h)}
.login-box .login-title{font-size:var(--fs-hero);font-weight:var(--fw-bold);color:var(--text);margin-bottom:var(--sp-sm)}
.login-box .login-sub{font-size:var(--fs-body);color:var(--text-3);margin-bottom:var(--sp-huge)}
.login-box .form-group{margin-bottom:var(--sp-xl)}
.login-box .form-input{width:100%;height:var(--ctl-secondary);padding:0 var(--sp-lg) 0 44px;font-size:var(--fs-bodyLg);border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);transition:all .15s;outline:none}
.login-box .form-input:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 4px var(--a-green-weak)}
.login-box .input-wrap{position:relative}
.login-box .input-wrap .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:var(--fs-title);pointer-events:none;display:inline-flex}
.login-box .btn-login{width:100%;height:var(--ctl-secondary);font-size:var(--fs-bodyLg);font-weight:var(--fw-semibold);border-radius:var(--radius-md);letter-spacing:1px;background:var(--grad-brand);border:none;color:var(--on-brand);box-shadow:var(--shadow-brand);cursor:pointer;margin-top:var(--sp-sm);transition:all .15s}
.login-box .btn-login:hover{transform:translateY(-1px);box-shadow: var(--elev-brand-lg)}
.login-err{color:var(--bad);font-size:var(--fs-body);min-height:20px;margin-top:var(--sp-md);text-align:center}
.login-foot{text-align:center;color:var(--text-3);font-size:var(--fs-caption);margin-top:var(--sp-xxl);line-height:var(--lh-relaxed)}
/* 移动端：品牌区隐藏，仅保留登录卡片 */
@media(max-width:760px){
  .login-brand{display:none}
  .login-box{width:100%;max-width:420px}
}

/* ===== 主界面 ===== */
#appPage{min-height:100vh;padding-bottom:var(--sp-xl)}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:0 var(--sp-xxl);height:60px;display:flex;align-items:center;position:sticky;top:0;z-index:50}
.topbar .brand{display:flex;align-items:center;gap:var(--sp-md);font-weight:var(--fw-bold);font-size: var(--fs-title);color:var(--deep)}
.topbar .brand .bi{width:90px;height: var(--ctl-web-sm);border-radius:var(--radius-sm);background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden}
.topbar .brand .bi img{width:100%;height:100%;object-fit:contain;display:block}
.topbar .spacer{flex:1}
.topbar .who{display:flex;align-items:center;gap:var(--sp-md);color:var(--text2);font-size: var(--fs-bodyLg)}
.chip{background:var(--bg);border:1px solid var(--line);color:var(--text2);padding:var(--sp-sm) var(--sp-lg);border-radius:var(--radius-sm);font-size: var(--fs-body)}
.chip:hover{color:var(--deep);border-color:#c7d7e8}
.danger:hover{color:var(--bad);border-color:#fecaca}
.wrap{max-width:1180px;margin:var(--sp-xxl) auto;padding:0 var(--sp-xl)}
.page-title{font-size: var(--fs-display);font-weight:var(--fw-bold);color:var(--deep)}
.page-desc{color:var(--text3);font-size: var(--fs-body);margin:var(--sp-xs) 0 var(--sp-xl)}
.notice{background:#f0f9ff;border:1px solid #bae6fd;color:#0369a1;border-radius:var(--radius-md);padding:var(--sp-md) var(--sp-lg);font-size: var(--fs-body);margin-bottom:var(--sp-lg);line-height:var(--lh-relaxed)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg);margin-bottom:var(--sp-xl)}
.kpi{background:var(--card);border-radius:var(--radius-lg);padding:var(--sp-lg) var(--sp-xl);border:1px solid var(--line);box-shadow: var(--elev-ink-md)}
.kpi .k-label{font-size: var(--fs-body);color:var(--text3);margin-bottom:var(--sp-sm)}
.kpi .k-value{font-size: var(--fs-display);font-weight:var(--fw-bold);color:var(--deep)}
.kpi.green .k-value{color:var(--green-text)}
.kpi.orange .k-value{color:var(--warn)}
.kpi.red .k-value{color:#e11d48}

/* 工具栏 */
.toolbar{display:flex;align-items:center;gap:var(--sp-md);flex-wrap:wrap;margin-bottom:var(--sp-lg)}
.toolbar .spacer{flex:1}
.btn{padding:var(--sp-md) var(--sp-xl);border-radius:var(--radius-sm);font-size: var(--fs-bodyLg);font-weight:var(--fw-semibold);transition:.15s}
.btn-primary{background:var(--grad);color:var(--on-brand);box-shadow: var(--elev-brand-md)}
.btn-primary:hover{opacity:.92}
.btn-outline{border:1px solid var(--line);background:var(--card);color:var(--text2)}
.btn-outline:hover{border-color:#c7d7e8;color:var(--deep)}
.btn-danger{border:1px solid #fecaca;background:var(--card);color:#dc2626}
.btn-danger:hover{background:var(--bad-bg2)}
.btn-sm{padding:var(--sp-xs) var(--sp-md);font-size: var(--fs-caption);border-radius:var(--radius-xs)}
input.search{height: var(--ctl-web-xl);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--sp-md);font-size: var(--fs-bodyLg);width:220px}
input.search:focus,select.sel:focus{border-color:var(--green-text);box-shadow:0 0 0 3px var(--a-green-weak)}
select.sel{height: var(--ctl-web-xl);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--sp-md);font-size: var(--fs-bodyLg);background:var(--card)}
.status-tabs{display:flex;gap:var(--sp-sm);margin-bottom:var(--sp-lg);flex-wrap:wrap}
.stab{padding:var(--sp-sm) var(--sp-lg);border-radius:var(--radius-xxl);font-size: var(--fs-body);color:var(--text2);background:var(--card);border:1px solid var(--line)}
.stab.active{background:var(--deep);color:var(--on-brand);border-color:var(--deep);font-weight:var(--fw-semibold)}
.stab .cnt{opacity:.75;font-size: var(--fs-caption);margin-left:var(--sp-xs)}

/* 卡片/表格 */
.card{background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow: var(--elev-ink-md);overflow:hidden}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size: var(--fs-bodyLg)}
th{text-align:left;color:var(--text3);font-weight:var(--fw-medium);font-size: var(--fs-caption);padding:var(--sp-md) var(--sp-md);border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap}
td{padding:var(--sp-md) var(--sp-md);border-bottom:1px solid #f1f4f7;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfc}
.empty{text-align:center;color:var(--text3);padding:48px 0;font-size: var(--fs-bodyLg)}
.pname{font-weight:var(--fw-semibold)}
.sub{color:var(--text3);font-size: var(--fs-caption)}
.money{font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold)}
.pill{display:inline-block;padding:var(--sp-xxs) var(--sp-md);border-radius:var(--radius-xxl);font-size: var(--fs-caption);white-space:nowrap}
.pill.active{background:#ecfdf5;color:#047857}
.pill.pending{background:#fef3c7;color:#b45309}
.pill.rejected{background:var(--bad-bg);color:#b91c1c}
.pill.disabled{background:#f1f5f9;color:#64748b}
.reject-note{color:var(--bad);font-size: var(--fs-caption);max-width:220px;line-height:var(--lh-normal)}
.op-btn{font-size: var(--fs-caption);padding:var(--sp-xs) var(--sp-md);border-radius:var(--radius-xs);color:var(--blue2);background:#eff6ff}
.op-btn:hover{background:#dbeafe}
.op-btn.del{color:#dc2626;background:var(--bad-bg2)}
.op-btn.del:hover{background:var(--bad-bg)}
.op-btn:disabled{opacity:.4;cursor:not-allowed}

/* 分页 */
.pager{display:flex;align-items:center;gap:var(--sp-md);padding:var(--sp-lg) var(--sp-lg);justify-content:flex-end;font-size: var(--fs-body);color:var(--text2)}
.pager button{border:1px solid var(--line);padding:var(--sp-xs) var(--sp-md);border-radius:var(--radius-xs);background:var(--card);font-size: var(--fs-body)}
.pager button:disabled{opacity:.4}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:var(--c-scrim-sub-modal, rgba(15, 42, 80, 0.5));display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--sp-xl)}
.modal{background:var(--card);border-radius:var(--radius-xl);width:640px;max-width:100%;max-height:92vh;overflow:auto;box-shadow: var(--elev-ink-xxl)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-xl) var(--sp-xxl);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.modal-title{font-size: var(--fs-title);font-weight:var(--fw-bold);color:var(--deep)}
.modal-close{font-size: var(--fs-display);color:var(--text3);line-height:1}
.modal-close:hover{color:var(--bad)}
.modal-body{padding:var(--sp-xl) var(--sp-xxl)}
.modal-foot{padding:var(--sp-lg) var(--sp-xxl);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:var(--sp-md);position:sticky;bottom:0;background:var(--card)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-lg);margin-bottom:var(--sp-lg)}
/* 【v3.4.111】三列行：分类 / 单位 / 系列 放一行。系列是 v3.4.108 才从「品牌/系列」里拆出来的，
   单独占一行会把表单拉长一倍，所以走三列（与平台端 form-row-3 同口径）。 */
.f-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-lg);margin-bottom:var(--sp-lg)}
.f-group label{display:block;font-size: var(--fs-body);color:var(--text2);margin-bottom:var(--sp-xs);font-weight:var(--fw-medium)}
.f-group input,.f-group select,.f-group textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--sp-md);height: var(--ctl-inline);font-size: var(--fs-bodyLg)}
.f-group textarea{height:auto;padding:var(--sp-md) var(--sp-md);resize:vertical;min-height:72px}
.f-group input:focus,.f-group select:focus{border-color:var(--green-text);box-shadow:0 0 0 3px var(--a-green-weak)}
.f-tip{font-size: var(--fs-caption);color:var(--text3);margin-top:var(--sp-xs);line-height:var(--lh-relaxed)}
/* 配件清单维护区 */
.acc-section{margin-top:var(--sp-lg);border-top:1px solid var(--line);padding-top:var(--sp-lg)}
.acc-head{font-size: var(--fs-bodyLg);font-weight:var(--fw-bold);color:var(--deep);margin-bottom:var(--sp-md)}
.acc-hint{font-size: var(--fs-caption);font-weight:var(--fw-regular);color:var(--text3)}
#acc-table td{padding:var(--sp-sm) var(--sp-sm)}
#acc-table input{width:100%;border:1px solid var(--line);border-radius:var(--radius-xs);padding:0 var(--sp-sm);height: var(--ctl-web-md);font-size: var(--fs-body)}
#acc-table input:focus{border-color:var(--green-text);box-shadow:0 0 0 3px var(--a-green-weak)}
#acc-table .op-btn{font-size: var(--fs-caption)}
.required::after{content:' *';color:var(--bad)}

#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#111827;color:var(--on-brand);padding:var(--sp-md) var(--sp-xxl);border-radius:var(--radius-md);font-size: var(--fs-bodyLg);z-index:200;opacity:0;transition:.25s;pointer-events:none;box-shadow: var(--elev-ink-xl)}
#toast.show{opacity:1}
#toast.ok{background:var(--ok-bg)}
#toast.err{background:#dc2626}
#icpBar{position:fixed;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;justify-content:center;gap:var(--sp-sm);font-size: var(--fs-caption);z-index:90;color:var(--a-white-hi-mid);background:var(--c-scrim-sub-bar, rgba(15, 42, 80, 0.55));backdrop-filter:blur(4px)}
#icpBar a{color:var(--a-white-hi-mid);text-decoration:none}
#icpBar.light{color:var(--text3);background:var(--a-white-hi-strong);border-top:1px solid var(--line)}
#icpBar.light a{color:var(--text3)}

/* ===== UI 优化：图标行内对齐 / 焦点态 / 无障碍 / sticky 表头 / 确认弹层 ===== */
.ic{display:inline-flex;vertical-align:-2px;margin-right:var(--sp-sm)}
.btn .ic{margin-right:var(--sp-xs);vertical-align:-1px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
.op-btn:focus-visible{outline-offset:1px}
/* 【CSP 行内属性清零 2026-10-05】原为 `*{…}`（特异性 (0,0,0)）。加 `html:root` 前缀后
   覆盖面不变（html 自身 + 全部后代），特异性抬到 (0,1,1)，才能压住工具类
   `.u-transition-*`（(0,1,0)）—— 否则"系统减弱动效"在挂工具类的元素上失效。
   理由与 common.css 同处两块一致，详见 public/index.html 的定序长注释。 */
@media(prefers-reduced-motion:reduce){html:root,html:root *{animation:none!important;transition:none!important}}
.table-wrap{max-height:calc(100vh - 260px);overflow:auto}
.table-wrap thead th{position:sticky;top:0;z-index:2;background:#fafbfc;box-shadow:inset 0 -1px 0 var(--line)}
.ui-confirm-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height: var(--ctl-web-md);border-radius:50%;font-size: var(--fs-title);font-weight:var(--fw-bold);flex:none}
@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .f-row,.f-row-3{grid-template-columns:1fr}
  .topbar{padding:0 var(--sp-lg)}
  input.search{width:160px}
}