/* =====================================================================
   东远润兴 MES V3 · 设计系统
   深色科技风：深海军蓝底 + 青蓝霓虹 + HUD 切角 + 发光数值
   语义色沿用中国制造业直觉：合格绿 / 预警橙 / 异常红
   ---------------------------------------------------------------------
   说明：类名与 CSS 变量名与浅色版完全一致（视图层有大量
   style="color:var(--xxx)" 内联引用），只替换取值与追加科技风规则。
   ===================================================================== */

:root{
  --bg:#060f1d;
  --surface:rgba(11,26,46,.78);
  --surface-2:rgba(15,34,58,.62);
  --surface-3:rgba(22,44,72,.66);
  --border:rgba(46,144,250,.22);
  --border-strong:rgba(46,144,250,.36);
  --text:#e6f1fc;
  --text-2:#9db6d0;
  --muted:#5f7893;

  --brand:#2e90fa;
  --brand-2:#22d3ee;
  --primary:#38a4ff;
  --primary-soft:rgba(46,144,250,.16);

  --ok:#35d07f;
  --ok-soft:rgba(53,208,127,.14);
  --danger:#ff5b5b;
  --danger-soft:rgba(255,91,91,.14);
  --warn:#ffab3d;
  --warn-soft:rgba(255,171,61,.14);
  --info:#22d3ee;
  --info-soft:rgba(34,211,238,.14);
  --purple:#a78bfa;
  --purple-soft:rgba(167,139,250,.16);

  --r:4px; --r-sm:3px; --r-lg:6px;
  --sh:inset 0 1px 0 rgba(140,200,255,.06), 0 10px 30px rgba(0,0,0,.38);
  --sh-lg:0 20px 60px rgba(0,0,0,.55);
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  --glow:0 0 18px rgba(34,211,238,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text);font-size:14px;line-height:1.55;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(34,211,238,.16) 0%, transparent 62%),
    radial-gradient(900px 700px at 92% 6%, rgba(110,90,240,.16) 0%, transparent 60%),
    radial-gradient(900px 700px at 4% 4%, rgba(34,211,238,.10) 0%, transparent 58%),
    linear-gradient(180deg,#050d1a 0%,#071628 46%,#050c18 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* 网格底纹：仅在页面上部显影，营造纵深 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(46,144,250,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,144,250,.075) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1200px 620px at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(1200px 620px at 50% 0%,#000 0%,transparent 78%);
}
#login,#app{position:relative;z-index:1}

.hidden{display:none !important}
a{color:var(--primary);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.ic{flex:0 0 auto;vertical-align:-3px}

/* ============================ 登录 ============================ */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;
}
.login-wrap::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.9),transparent);
  background-size:36% 100%;background-repeat:no-repeat;
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{0%{background-position:-42% 0}100%{background-position:142% 0}}
.login-card{
  width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:32px 30px 24px;
  backdrop-filter:blur(10px);position:relative;
}
.login-card::before,.login-card::after{
  content:"";position:absolute;width:20px;height:20px;border:2px solid var(--info);pointer-events:none;
}
.login-card::before{left:-1px;top:-1px;border-right:none;border-bottom:none}
.login-card::after{right:-1px;bottom:-1px;border-left:none;border-top:none}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.logo-mark{
  width:48px;height:48px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 6px 22px rgba(46,144,250,.42), 0 0 0 1px rgba(120,190,255,.25);
}
.logo-mark img{width:100%;height:100%;display:block;object-fit:contain}
.logo-mark.sm{width:34px;height:34px;border-radius:9px}
.login-brand h1{font-size:20px;letter-spacing:.6px;
  background:linear-gradient(90deg,#ffffff,#9fdcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-brand p{font-size:12.5px;color:var(--muted)}
.login-card label{display:block;font-size:13px;color:var(--text-2);margin-bottom:14px;font-weight:600}
.login-card input{
  width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);background:rgba(6,18,34,.72);font-weight:400;transition:.15s;
}
.login-card input:focus{outline:none;border-color:var(--primary);background:rgba(8,24,44,.9);box-shadow:0 0 0 3px var(--primary-soft)}
.login-quick{margin-bottom:20px}
.login-quick>label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.quick-btn{
  text-align:left;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:rgba(12,28,50,.6);cursor:pointer;transition:.15s;font-size:12px;line-height:1.35;
}
.quick-btn:hover{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 14px rgba(46,144,250,.25)}
.quick-btn b{display:block;font-size:12.5px;color:var(--text)}
.quick-btn span{color:var(--muted);font-size:11px}
.login-err{color:var(--danger);font-size:12.5px;margin-top:12px;min-height:18px;font-weight:600}
.login-foot{
  display:flex;justify-content:space-between;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--border);font-size:11px;color:var(--muted);
}

/* ============================ 布局 ============================ */
.app{display:flex;min-height:100vh}
.sidebar{
  width:228px;flex:0 0 228px;background:rgba(8,20,38,.9);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;backdrop-filter:blur(8px);
}
.sb-head{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--border);
  position:relative}
.sb-head::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(34,211,238,.75),transparent)}
.sb-title strong{display:block;font-size:14px;letter-spacing:.4px}
.sb-title span{font-size:10.5px;color:var(--muted)}
.sb-nav{flex:1;overflow-y:auto;padding:10px 8px}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.nav-group{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.9px;padding:12px 10px 5px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-2);font-size:13px;transition:.13s;border:1px solid transparent;position:relative;
}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:#8fd0ff;font-weight:700;border-color:rgba(46,144,250,.42)}
.nav-item.active::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;background:var(--info);box-shadow:var(--glow)}
.nav-item .ni{width:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nav-item .nb{margin-left:auto;font-size:10px;background:var(--danger);color:#fff;border-radius:9px;padding:1px 6px;font-weight:700}
.nav-item.locked{opacity:.42;cursor:not-allowed}
.nav-parent{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;margin:2px 6px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text);border:1px solid transparent;transition:all .15s ease;user-select:none}
.nav-parent:hover{background:var(--surface-3);color:var(--text);border-color:rgba(56,164,255,.18)}
.nav-parent .ni{width:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nav-parent .nt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-parent .nc{font-size:10px;color:var(--muted);transition:transform .2s ease}
.nav-parent.expanded .nc{transform:rotate(-180deg);color:var(--info)}
.nav-parent.locked{opacity:.42;cursor:not-allowed}
.nav-sub{padding:2px 0 6px 18px;margin:0 6px 4px;border-left:1px dashed rgba(56,164,255,.18);margin-left:18px}
.nav-sub-item{display:flex;align-items:center;gap:7px;padding:5px 10px;margin:1px 0;border-radius:5px;cursor:pointer;font-size:12px;color:var(--text-2);border:1px solid transparent;transition:all .12s ease;user-select:none}
.nav-sub-item:hover{background:var(--surface-3);color:var(--text);border-color:rgba(56,164,255,.14)}
.nav-sub-item .ni{width:11px;color:var(--muted);font-weight:700;flex:0 0 auto;text-align:center}
.nav-sub-item b{color:var(--info);font-weight:600;margin-right:3px;font-size:11.5px;font-family:'Consolas','Monaco',monospace}
.nav-sub-item .tag-branch{display:inline-block;padding:0 5px;margin-left:4px;font-size:10px;background:rgba(255,171,61,.16);color:#ffab3d;border-radius:3px;font-style:normal;font-weight:600}

/* SMT 核心生产 m3 子菜单优化 */
.nav-sub-item.nav-sub-root{background:rgba(56,164,255,.06);border:1px solid rgba(56,164,255,.18);margin:2px 6px 6px;font-weight:600;color:var(--text);position:relative}
.nav-sub-item.nav-sub-root:hover{background:rgba(56,164,255,.14);border-color:rgba(56,164,255,.32)}
.nav-sub-item.nav-sub-root b{color:#8fd0ff;font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:13px}
.nav-sub-item.nav-sub-root .ni{color:var(--info);font-size:13px}
.nav-sub-item .sub-meta{display:inline-block;margin-left:6px;font-size:10.5px;color:var(--muted);font-style:normal;font-weight:400}
.nav-sub-item.branch{opacity:.78}
.nav-sub-item.branch b{color:#ffab3d}
.sb-foot{padding:12px;border-top:1px solid var(--border)}
.sb-user{margin-bottom:9px}
.sb-user b{display:block;font-size:13px}
.sb-user span{font-size:11px;color:var(--muted)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;background:rgba(8,20,38,.86);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
}
.tb-left h2{font-size:17px;letter-spacing:.4px;display:flex;align-items:center;gap:9px}
.tb-left h2 .pt-ic{color:var(--info);filter:drop-shadow(0 0 8px rgba(34,211,238,.55))}
.tb-sub{font-size:12px;color:var(--muted)}
.tb-right{display:flex;align-items:center;gap:12px}
.clock{font-family:var(--mono);font-size:12.5px;color:var(--text-2);background:var(--surface-3);
  padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--border)}
.gate-badge{
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;background:var(--surface-3);
  cursor:pointer;border:1px solid var(--border);display:inline-flex;align-items:center;gap:7px;
}
.gate-badge b{font-family:var(--mono)}
.gate-badge .gb-sep{width:1px;height:11px;background:var(--border-strong);display:inline-block}
.gate-badge.alert{background:var(--danger-soft);color:var(--danger);border-color:rgba(255,91,91,.42)}
.gate-badge.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(53,208,127,.4)}
.view{padding:20px 22px 48px;flex:1}

/* ============================ 组件 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;
  transition:.14s;white-space:nowrap;
}
.btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:0 0 14px rgba(46,144,250,.22)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--brand-2));color:#04121f;border-color:transparent;font-weight:800}
.btn-primary:hover{filter:brightness(1.1);color:#04121f;box-shadow:0 0 22px rgba(34,211,238,.45)}
.btn-danger{background:var(--danger);color:#180505;border-color:transparent;font-weight:800}
.btn-danger:hover{filter:brightness(1.08);color:#180505}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:6px}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:16px;
  backdrop-filter:blur(8px);position:relative}
.card::before,.card::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid rgba(34,211,238,.55);pointer-events:none}
.card::before{left:-1px;top:-1px;border-right:none;border-bottom:none}
.card::after{right:-1px;bottom:-1px;border-left:none;border-top:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(46,144,250,.07),transparent)}
.card-head h3{font-size:14px;display:flex;align-items:center;gap:8px}
.card-head h3 .ic{color:var(--info)}
.card-head .ch-sub{font-size:11.5px;color:var(--muted);font-weight:400}
.card-body{padding:16px}
.card-body.tight{padding:10px}

/* KPI */
.kpi-row{display:grid;gap:12px;margin-bottom:16px}
.kpi-row.c2{grid-template-columns:repeat(2,1fr)}
.kpi-row.c3{grid-template-columns:repeat(3,1fr)}
.kpi-row.c4{grid-template-columns:repeat(4,1fr)}
.kpi-row.c5{grid-template-columns:repeat(5,1fr)}
.kpi-row.c6{grid-template-columns:repeat(6,1fr)}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--sh);position:relative;overflow:hidden;backdrop-filter:blur(8px);
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border-strong)}
.kpi.ok::before{background:var(--ok);box-shadow:0 0 14px rgba(53,208,127,.6)}
.kpi.warn::before{background:var(--warn);box-shadow:0 0 14px rgba(255,171,61,.6)}
.kpi.danger::before{background:var(--danger);box-shadow:0 0 14px rgba(255,91,91,.6)}
.kpi.info::before{background:var(--info);box-shadow:0 0 14px rgba(34,211,238,.6)}
.kpi.brand::before{background:var(--primary);box-shadow:0 0 14px rgba(56,164,255,.6)}
.kpi .k-label{font-size:11.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.kpi .k-val{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.1;font-family:var(--mono)}
.kpi .k-val small{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px;font-family:inherit}
.kpi .k-sub{font-size:11.5px;color:var(--muted);margin-top:4px}
.kpi.danger .k-val{color:var(--danger);text-shadow:0 0 18px rgba(255,91,91,.5)}
.kpi.warn .k-val{color:var(--warn);text-shadow:0 0 18px rgba(255,171,61,.45)}
.kpi.ok .k-val{color:var(--ok);text-shadow:0 0 18px rgba(53,208,127,.45)}
.kpi.brand .k-val{color:#9fd4ff;text-shadow:0 0 18px rgba(56,164,255,.5)}
.kpi.info .k-val{color:#9fe9f7;text-shadow:0 0 18px rgba(34,211,238,.5)}

/* 产线运行监控（hero） */
.card-hero{border-color:rgba(46,144,250,.4);box-shadow:0 0 40px rgba(12,44,88,.5), var(--sh)}
.card-hero::before,.card-hero::after{border-color:rgba(34,211,238,.85);width:20px;height:20px}
.hero-body{padding:6px 10px 2px;background:
  radial-gradient(700px 280px at 50% 62%, rgba(46,144,250,.10), transparent 70%)}
.hero-legend{display:flex;gap:13px;font-size:11.5px;color:var(--text-2);flex-wrap:wrap}
.hero-legend span{display:inline-flex;align-items:center;gap:5px}
.lg-dot{width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.hero-strip{
  display:grid;grid-template-columns:repeat(8,1fr);
  border-top:1px solid var(--border);background:rgba(6,18,34,.5);
}
.hs-cell{padding:11px 13px;border-right:1px solid var(--border);position:relative}
.hs-cell:last-child{border-right:none}
.hs-cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent}
.hs-cell.brand::before{background:var(--primary)}
.hs-cell.ok::before{background:var(--ok)}
.hs-cell.warn::before{background:var(--warn)}
.hs-cell.danger::before{background:var(--danger)}
.hs-l{font-size:11px;color:var(--muted);margin-bottom:3px}
.hs-v{font-size:19px;font-weight:800;font-family:var(--mono);letter-spacing:-.4px;line-height:1.15}
.hs-v small{font-size:11px;font-weight:600;color:var(--muted);margin-left:2px}
.hs-cell.ok .hs-v{color:var(--ok)} .hs-cell.warn .hs-v{color:var(--warn)}
.hs-cell.danger .hs-v{color:var(--danger)} .hs-cell.brand .hs-v{color:#9fd4ff}
.hs-s{font-size:10.5px;color:var(--muted);margin-top:2px}

/* ================= 产线示意图（设备实物图卡片流） ================= */
.linemap{display:flex;flex-direction:column;gap:13px}
.lm-scroll{overflow-x:auto;padding:6px 2px 10px}
.lm-scroll::-webkit-scrollbar{height:8px}
.lm-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.lm-track{display:flex;align-items:stretch;flex-wrap:wrap;row-gap:15px}

.lm-card{
  flex:0 0 auto;width:118px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:11px 8px 10px;border-radius:14px;position:relative;text-decoration:none;color:inherit;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(17,36,60,.78),rgba(9,22,40,.55));
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.lm-card:hover{transform:translateY(-3px);border-color:var(--primary);
  box-shadow:0 14px 26px -12px rgba(46,144,250,.65)}
.lm-card.lm-run{border-color:rgba(34,211,238,.45)}
.lm-card.lm-warn{border-color:rgba(255,171,61,.52)}
.lm-card.lm-abn{border-color:rgba(255,91,91,.55)}
.lm-photo{margin:2px 0 6px}
.lm-code{font-family:var(--mono);font-size:11px;font-weight:800;color:#9fd4ff;letter-spacing:.6px}
.lm-name{font-size:11px;color:var(--text-2);text-align:center;line-height:1.25;min-height:26px}
.lm-state{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);margin-top:1px}
.lm-state b{font-family:var(--mono);color:#9fd4ff}
.lm-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.lm-run .lm-dot{background:#22d3ee;box-shadow:0 0 7px #22d3ee}
.lm-warn .lm-dot{background:#ffab3d;box-shadow:0 0 7px #ffab3d}
.lm-abn .lm-dot{background:#ff5b5b;box-shadow:0 0 7px #ff5b5b}
.lm-idx{position:absolute;top:7px;left:10px;font-family:var(--mono);font-size:10px;
  font-weight:700;color:var(--muted);letter-spacing:.5px}
.lm-done{font-size:10px;color:var(--ok);margin-top:1px}

.lm-link{flex:0 0 20px;display:flex;align-items:center;justify-content:center;
  color:rgba(46,144,250,.6);font-size:17px;font-weight:700;user-select:none}
.lm-link::before{content:"›";line-height:1}

.lm-branch{margin-left:66px;padding:10px 0 0 20px;
  border-left:2px dashed rgba(167,139,250,.5);display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.lm-card.lm-side{width:122px;border-style:dashed;border-color:rgba(167,139,250,.55);
  background:linear-gradient(180deg,rgba(167,139,250,.16),rgba(9,22,40,.5))}
.lm-branch-note{font-size:11.5px;color:#a78bfa;line-height:1.45;max-width:330px}

.lm-io{flex:0 0 auto;min-width:88px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:12px 14px;border-radius:13px;font-size:11.5px;text-align:center}
.lm-io b{font-size:13.5px}
.lm-io span{font-size:10.5px;color:var(--muted);line-height:1.3}
.lm-in{border:1px dashed rgba(34,211,238,.45);background:rgba(34,211,238,.08);color:#7fe3f5}
.lm-out{border:1px dashed rgba(53,208,127,.45);background:rgba(53,208,127,.08);color:#6fe0a4}

.lm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.lm-legend .lg{display:inline-flex;align-items:center;gap:5px}
.lm-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.lg-run i{background:#22d3ee}.lg-warn i{background:#ffab3d}
.lg-abn i{background:#ff5b5b}.lg-idle i{background:#5f7893}
.lg-tip{margin-left:auto;opacity:.72}

/* 表格 */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-sm)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{
  background:rgba(22,44,72,.72);text-align:left;padding:9px 11px;font-weight:700;
  color:#a9c6e2;border-bottom:1px solid var(--border-strong);white-space:nowrap;font-size:11.5px;letter-spacing:.3px;
}
table.tbl td{padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:top}
table.tbl tr:hover td{background:rgba(46,144,250,.09)}
table.tbl tr:last-child td{border-bottom:none}
.tbl-empty{text-align:center;color:var(--muted);padding:32px;font-size:13px}
.mono{font-family:var(--mono);font-size:12px}

/* 徽标 */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.b-ok{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(53,208,127,.3)}
.b-danger{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(255,91,91,.32)}
.b-warn{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(255,171,61,.32)}
.b-info{background:var(--info-soft);color:var(--info);box-shadow:inset 0 0 0 1px rgba(34,211,238,.32)}
.b-muted{background:var(--surface-3);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.b-brand{background:var(--primary-soft);color:#8fd0ff;box-shadow:inset 0 0 0 1px rgba(46,144,250,.35)}
.b-purple{background:var(--purple-soft);color:var(--purple);box-shadow:inset 0 0 0 1px rgba(167,139,250,.35)}

/* 表单 */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.form-grid.c3{grid-template-columns:repeat(3,1fr)}
.form-grid.c1{grid-template-columns:1fr}
.fld{display:flex;flex-direction:column;gap:5px}
.fld.span2{grid-column:span 2}
.fld.span3{grid-column:span 3}
.fld label{font-size:12px;font-weight:700;color:var(--text-2);display:flex;align-items:center;gap:5px}
.fld label .req{color:var(--danger)}
.fld label .unit{color:var(--muted);font-weight:500;font-size:11px}
.fld input,.fld select,.fld textarea{
  padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:rgba(6,18,34,.72);transition:.14s;width:100%;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)
}
.fld .hint{font-size:11px;color:var(--muted)}
.fld .hint.crit{color:var(--purple);font-weight:600}
.fld select option{background:#0b1a2e;color:var(--text)}
.dim-tag{
  font-size:10px;font-weight:800;padding:1px 5px;border-radius:4px;background:var(--surface-3);
  color:var(--text-2);letter-spacing:.5px;
}
.dim-tag.d-ren{background:rgba(77,141,255,.18);color:#8fb8ff}
.dim-tag.d-ji{background:rgba(34,211,238,.18);color:#7fe3f5}
.dim-tag.d-liao{background:rgba(255,171,61,.18);color:#ffc775}
.dim-tag.d-fa{background:rgba(167,139,250,.20);color:#c4b5fd}
.dim-tag.d-huan{background:rgba(53,208,127,.18);color:#6fe0a4}
.dim-tag.d-jian{background:rgba(255,91,91,.18);color:#ff9090}

.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}

/* 六维分组 */
.dim-block{border:1px solid var(--border);border-radius:var(--r);margin-bottom:13px;overflow:hidden;background:rgba(9,22,40,.5)}
.dim-block > .db-head{
  display:flex;align-items:center;gap:9px;padding:9px 13px;background:rgba(22,44,72,.55);
  font-weight:700;font-size:12.5px;border-bottom:1px solid var(--border);
}
.dim-block > .db-body{padding:13px}

/* 工序流水线 */
.flow{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 12px}
.flow::-webkit-scrollbar{height:7px}
.flow::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
.flow-node{
  flex:0 0 118px;border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 10px;
  background:rgba(11,26,46,.6);position:relative;cursor:pointer;transition:.14s;
}
.flow-node:hover{border-color:var(--primary);box-shadow:0 0 18px rgba(46,144,250,.3)}
.flow-node .fn-code{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:700}
.flow-node .fn-name{font-size:12.5px;font-weight:700;margin:2px 0 6px;line-height:1.3}
.flow-node .fn-stat{font-size:11px;color:var(--text-2);display:flex;justify-content:space-between}
.flow-node .fn-stat b{font-size:13px;font-family:var(--mono);color:#9fd4ff}
.flow-node.branch{border-style:dashed;background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.4)}
.flow-node.hasabn{box-shadow:inset 0 0 0 2px rgba(255,91,91,.4)}
.flow-node.bottleneck{border-color:var(--warn);background:rgba(255,171,61,.12);box-shadow:0 0 20px rgba(255,171,61,.28)}
.flow-node .dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px currentColor}
.flow-node .dot.warn{background:var(--warn)} .flow-node .dot.danger{background:var(--danger)}

/* ================= 工序设备「实物图」卡片（device-icons.js） ================= */
/* 白底圆角卡 + 状态色环（--st 由状态决定），实物图居中 */
.devic{position:relative;display:inline-flex;flex-direction:column;align-items:center;
  width:var(--dev,96px);flex:0 0 auto}
.devic-ring{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--dev,96px);height:var(--dev,96px);border-radius:26%;
  background:linear-gradient(160deg,#ffffff 0%,#e8f0fa 100%);
  box-shadow:0 0 0 2px var(--st,#5f7893),0 10px 20px -8px rgba(4,18,38,.5),
    inset 0 1px 0 rgba(255,255,255,.95)}
.devic-img{position:relative;width:calc(var(--dev,96px) * .84);height:calc(var(--dev,96px) * .84);
  margin:calc(var(--dev,96px) * .08);object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(6,20,38,.22))}
.devic-badge{position:absolute;top:0;right:0;width:calc(var(--dev,96px) * .14);
  height:calc(var(--dev,96px) * .14);border-radius:50%;background:var(--st,#5f7893);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 9px var(--st,#5f7893)}
.devic-cap{position:relative;margin-top:6px;font-size:10.5px;font-weight:700;
  color:var(--text-2);letter-spacing:.3px;white-space:nowrap}
.devic.devic-abn .devic-ring{animation:devPulse 1.7s ease-in-out infinite}
@keyframes devPulse{
  0%,100%{box-shadow:0 0 0 2px var(--st),0 10px 20px -8px rgba(4,18,38,.5),inset 0 1px 0 rgba(255,255,255,.95)}
  50%{box-shadow:0 0 0 5px var(--st),0 10px 22px -6px rgba(4,18,38,.55),inset 0 1px 0 rgba(255,255,255,.95)}}

/* 工序模块卡：实物图居中 + 设备名 */
.flow-node.dev-node{flex:0 0 172px;padding:9px 10px 10px}
.flow-node .fn-dev{display:flex;justify-content:center;align-items:flex-end;min-height:98px;margin:3px 0 5px}
.flow-node .fn-eq{font-size:10.5px;color:var(--muted);margin:0 0 7px;line-height:1.35;text-align:center}

/* 作业台头部：左表单 + 右设备实物图 */
.wb-head{display:flex;gap:18px;align-items:stretch}
.wb-head-main{flex:1 1 auto;min-width:0}
.wb-dev{
  flex:0 0 226px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:16px 12px 13px;
  background:radial-gradient(120% 90% at 50% 8%,rgba(34,211,238,.10) 0%,rgba(11,26,46,.55) 62%);
}
.wb-dev-name{font-size:12.5px;font-weight:700;color:var(--text);margin-top:10px;text-align:center;line-height:1.35}
.wb-dev-tag{font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.3px;text-align:center}
@media (max-width:820px){.wb-head{flex-direction:column}.wb-dev{flex:0 0 auto}}

/* 时间轴 */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;margin-bottom:13px}
.tl-item::before{
  content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--ok);border:2.5px solid #050d1a;box-shadow:0 0 0 2px var(--ok-soft);
}
.tl-item.warn::before{background:var(--warn);box-shadow:0 0 0 2px var(--warn-soft)}
.tl-item.danger::before{background:var(--danger);box-shadow:0 0 0 2px var(--danger-soft)}
.tl-item.skip::before{background:#33465c;box-shadow:0 0 0 2px rgba(51,70,92,.4)}
.tl-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tl-head b{font-size:13px}
.tl-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.tl-body{margin-top:7px;background:rgba(6,18,34,.55);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:6px 14px;font-size:11.5px}
.kv{display:flex;gap:6px}
.kv .kk{color:var(--muted);flex:0 0 auto}
.kv .vv{font-weight:600;word-break:break-all}
.kv .vv.bad{color:var(--danger)}

/* 中控六宫格 */
.dim6{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dim-card{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;
  box-shadow:var(--sh);position:relative;backdrop-filter:blur(8px)}
.dim-card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--dc),transparent)}
.dim-card:hover{box-shadow:0 0 26px rgba(46,144,250,.22), var(--sh)}
.dim-card .dc-head{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(46,144,250,.07),transparent);
}
.dim-card .dc-head .dc-icon{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid transparent;position:relative;filter:drop-shadow(0 0 8px rgba(46,144,250,.28));
}
.dim-card .dc-head .dc-icon .dc-gn{
  position:absolute;right:-2px;bottom:-3px;font-size:9px;font-style:normal;font-weight:800;
  background:#061422;border:1px solid var(--border);border-radius:3px;padding:0 2px;color:var(--text-2);line-height:1.3;
}
.dim-card .dc-head b{font-size:13.5px}
.dim-card .dc-head span{font-size:11px;color:var(--muted);display:block}
.dim-card .dc-body{padding:11px 13px}
.metric-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.metric-row:last-child{border-bottom:none}
.metric-row .m-val{font-weight:800;font-family:var(--mono)}
.metric-row .m-val.bad{color:var(--danger)} .metric-row .m-val.warn{color:var(--warn)} .metric-row .m-val.good{color:var(--ok)}

/* 报警条 */
.abn-strip{display:flex;flex-direction:column;gap:7px;max-height:330px;overflow-y:auto}
.abn-line{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r-sm);
  border-left:3px solid var(--warn);background:var(--warn-soft);font-size:12.5px;
}
.abn-line.danger{border-left-color:var(--danger);background:var(--danger-soft)}
.abn-line.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.abn-line .al-time{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
.abn-line .al-txt{flex:1;min-width:0}
.abn-line .al-rule{font-size:10.5px;color:var(--text-2);background:rgba(6,18,34,.62);padding:1px 6px;border-radius:4px;font-weight:700}

/* 拦截弹窗 */
.intercept{
  border:2px solid var(--danger);border-radius:var(--r);overflow:hidden;background:rgba(30,10,14,.55);
}
.intercept .ic-head{background:linear-gradient(90deg,rgba(255,91,91,.9),rgba(255,91,91,.65));color:#1a0505;padding:12px 16px;font-weight:800;display:flex;align-items:center;gap:9px}
.intercept .ic-body{padding:14px 16px}
.intercept .ic-item{
  display:flex;gap:10px;padding:9px 11px;border-radius:var(--r-sm);background:var(--danger-soft);
  margin-bottom:8px;font-size:12.5px;border-left:3px solid var(--danger);
}
.intercept .ic-item.warn{background:var(--warn-soft);border-left-color:var(--warn)}
.intercept .ic-rule{font-family:var(--mono);font-weight:800;font-size:11px;flex:0 0 auto;color:var(--danger)}
.intercept .ic-item.warn .ic-rule{color:var(--warn)}
.intercept .ic-tip{margin-top:12px;padding:10px 12px;background:rgba(6,18,34,.6);border-radius:var(--r-sm);font-size:12px;color:var(--text-2)}

/* 弹窗 */
.modal-mask{
  position:fixed;inset:0;background:rgba(3,9,18,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;
}
.modal{
  background:rgba(9,22,40,.97);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:680px;max-height:88vh;display:flex;flex-direction:column;
}
.modal.wide{max-width:1000px}
.modal.xwide{max-width:1240px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 19px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(46,144,250,.08),transparent)}
.modal-head h3{font-size:15.5px}
.modal-body{padding:19px;overflow-y:auto;flex:1}
.modal-foot{padding:13px 19px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* Toast */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{
  min-width:270px;max-width:420px;padding:12px 15px;border-radius:var(--r);
  box-shadow:var(--sh-lg);background:rgba(9,22,40,.97);border:1px solid var(--border);
  border-left:4px solid var(--info);animation:tin .22s ease;font-size:13px;
}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}
.toast b{display:block;margin-bottom:2px;font-size:13px}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tab{
  padding:9px 15px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;transition:.14s;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--info);border-bottom-color:var(--info);text-shadow:0 0 12px rgba(34,211,238,.5)}

/* 进度条 */
.pbar{height:6px;background:rgba(6,18,34,.8);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.pbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--brand-2));border-radius:3px;box-shadow:0 0 10px rgba(34,211,238,.55)}
.pbar.ok > i{background:var(--ok);box-shadow:0 0 10px rgba(53,208,127,.55)}
.pbar.warn > i{background:var(--warn);box-shadow:0 0 10px rgba(255,171,61,.55)}
.pbar.danger > i{background:var(--danger);box-shadow:0 0 10px rgba(255,91,91,.55)}

/* 六维矩阵 */
.matrix{font-size:11.5px}
.matrix th{font-size:11px;text-align:center;padding:7px 5px}
.matrix td{padding:7px 9px;border:1px solid var(--border)}
.matrix td.c{text-align:center}
.matrix .cell-ok{color:var(--ok);font-weight:800}
.matrix .cell-no{color:var(--danger);font-weight:800}

/* 空状态 */
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .e-icon{font-size:38px;margin-bottom:10px;opacity:.5}
.empty b{display:block;color:var(--text-2);margin-bottom:4px;font-size:14px}

/* 说明块 */
.note{
  padding:11px 13px;border-radius:var(--r-sm);background:var(--info-soft);
  border-left:3px solid var(--info);font-size:12.5px;color:var(--text-2);margin-bottom:14px;
}
.note.warn{background:var(--warn-soft);border-left-color:var(--warn)}
.note.danger{background:var(--danger-soft);border-left-color:var(--danger)}
.note.ok{background:var(--ok-soft);border-left-color:var(--ok)}
.note b{color:var(--text)}

/* 搜索栏 */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input[type=text],.toolbar input[type=search],.toolbar select,.toolbar input[type=date]{
  padding:8px 11px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:rgba(6,18,34,.72);
}
.toolbar input[type=text]{min-width:260px}
.toolbar .spacer{flex:1}

.chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.chip{
  padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:rgba(11,26,46,.6);
  cursor:pointer;font-size:12px;font-weight:600;transition:.14s;
}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.active{background:var(--primary);color:#04121f;border-color:var(--primary);font-weight:800;box-shadow:0 0 16px rgba(46,144,250,.4)}

.section-title{font-size:13px;font-weight:800;color:var(--text-2);margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.section-title:first-child{margin-top:0}
.section-title::after{content:"";flex:1;height:1px;background:var(--border)}

/* 报告 */
.report-head{text-align:center;padding:16px 0 14px;border-bottom:2px solid var(--border-strong);margin-bottom:16px}
.report-head h1{font-size:19px;letter-spacing:1.4px;
  background:linear-gradient(90deg,#ffffff,#8fd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.report-head p{font-size:12px;color:var(--muted);margin-top:5px}
.insight{
  display:flex;gap:11px;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(6,18,34,.55);border-left:3px solid var(--brand);margin-bottom:9px;
}
.insight .i-icon{font-size:17px;flex:0 0 auto}
.insight b{display:block;font-size:13px;margin-bottom:2px}
.insight p{font-size:12.5px;color:var(--text-2);margin:0}

.audit-ok{background:var(--ok-soft);border:1px solid rgba(53,208,127,.42);border-radius:var(--r);padding:16px;text-align:center}
.audit-bad{background:var(--danger-soft);border:1px solid rgba(255,91,91,.45);border-radius:var(--r);padding:16px}
.hashline{font-family:var(--mono);font-size:11px;color:var(--text-2);word-break:break-all;background:rgba(6,18,34,.6);padding:7px 9px;border-radius:6px;margin-top:6px}

/* 打印：回到白底黑字，保证纸质可读 */
@media print{
  :root{
    --bg:#fff; --surface:#fff; --surface-2:#f7f9fc; --surface-3:#eef3f9;
    --border:#d8dfe8; --border-strong:#bcc7d6;
    --text:#0f1b2d; --text-2:#42526b; --muted:#6b7a90;
    --ok-soft:#e6f6ec; --danger-soft:#fdeaea; --warn-soft:#fff4e0; --info-soft:#e4f3fb;
    --primary-soft:#e8f0fe; --purple-soft:#f1ebfd;
  }
  body{background:#fff !important}
  body::before{display:none !important}
  .sidebar,.topbar,.no-print{display:none !important}
  .view{padding:0}
  .card,.kpi,.dim-card{box-shadow:none;backdrop-filter:none}
  .card::before,.card::after{display:none}
  .linemap{filter:none}
  .card{break-inside:avoid}
}
@media(max-width:1280px){
  .dim6{grid-template-columns:repeat(2,1fr)}
  .kpi-row.c6{grid-template-columns:repeat(3,1fr)}
  .kpi-row.c5{grid-template-columns:repeat(3,1fr)}
  .hero-strip{grid-template-columns:repeat(4,1fr)}
  .hero-strip .hs-cell:nth-child(4n){border-right:none}
}
@media(max-width:900px){
  .sidebar{display:none}
  .dim6,.kpi-row.c4,.kpi-row.c3{grid-template-columns:repeat(2,1fr)}
  .form-grid,.form-grid.c3{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .login-wrap::after,.lm-sweep,.lm-led{animation:none !important}
}

/* ===== 数据导入中心 ===== */
.exl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px;margin-top:6px}
.exl-card{position:relative}
.exl-card .card-head h3{display:flex;align-items:center;gap:6px;font-size:14px}
.exl-card .card-head h3 .ch-sub{font-weight:400;font-size:11.5px;color:var(--muted);margin-left:4px}
.exl-count{position:absolute;right:14px;top:14px;font-size:11px;color:var(--muted);background:var(--surface-3);padding:3px 9px;border-radius:10px;font-weight:600}
.exl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.exl-row .exl-meta{margin-left:auto;font-size:11px;color:var(--muted);font-family:'Consolas','Monaco',monospace}
.exl-result{margin-top:8px}
.exl-result .note{margin-bottom:0;padding:10px 12px;font-size:12.5px;line-height:1.6}
.log-err{color:var(--danger)}
.log-warn{color:#ffab3d}
.log-err-n{color:var(--danger);font-weight:700}

/* 文件夹监听状态面板 */
.exl-watch{margin-top:14px;border-color:rgba(53,208,127,.34)}
.exl-watch.warn{border-color:rgba(255,171,61,.40)}
.exl-watch .card-head h3{display:flex;align-items:center;gap:6px;font-size:14px}
.exl-watch .card-head h3 .ch-sub{font-weight:400;font-size:11.5px;color:var(--muted);margin-left:4px}
.exl-watch .kv-grid>div{display:flex;flex-direction:column;gap:2px}
.exl-watch .kv-grid span{color:var(--muted)}
.exl-watch .kv-grid b{font-size:12.5px;word-break:break-all}
.exl-watch .kv-grid code{font-size:11.5px;color:#8fd0ff}
.exl-badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:.3px}
.exl-badge.on{background:rgba(53,208,127,.16);color:#35d07f;border:1px solid rgba(53,208,127,.34)}
.exl-badge.off{background:rgba(255,91,91,.16);color:#ff5b5b;border:1px solid rgba(255,91,91,.34)}
.src-auto{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:600;background:rgba(56,164,255,.16);color:#8fd0ff;border:1px solid rgba(56,164,255,.26)}
.exl-card-form{border-color:rgba(56,164,255,.34)}
.exl-card-form .card-head h3 .ic{color:#8fd0ff}
.exl-hint{margin:0 0 8px;padding:8px 10px;font-size:11.5px;line-height:1.6;color:var(--muted);background:var(--surface-3);border-left:2px solid rgba(56,164,255,.5);border-radius:0 4px 4px 0}
.exl-hint b{color:var(--text)}

/* =====================================================================
   系统配置页（工艺制程配置 / 角色与岗位维护 / 人员与岗位）
   —— 左列清单 + 右列编辑器；深色科技风，沿用既有变量，不新增语义色
   ===================================================================== */
.btn-xs{padding:3px 9px;font-size:11.5px;border-radius:var(--r-sm);line-height:1.5}
.card-head .ch-actions{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}

.cfg-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:14px;align-items:start}
.cfg-side{position:sticky;top:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.cfg-side-head{padding:11px 13px;border-bottom:1px solid var(--border);background:var(--surface-2);
  display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.cfg-side-head .ch-sub{font-size:11px;color:var(--muted);font-weight:400}
.cfg-items{max-height:min(70vh,720px);overflow:auto}
.cfg-item{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;border-left:2px solid transparent;
  border-bottom:1px solid rgba(46,144,250,.10);transition:background .15s,border-color .15s}
.cfg-item:hover{background:var(--surface-3)}
.cfg-item.active{background:var(--primary-soft);border-left-color:var(--brand)}
.cfg-item .cfg-code{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-item .cfg-name{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.cfg-item .cfg-dot{width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px rgba(255,171,61,.7);flex:0 0 auto}
.cfg-item.ov .cfg-code{color:#ffd08a}
.cfg-main{min-width:0}

.cfg-checks{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:4px}
.cfg-checks label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);cursor:pointer;font-weight:400}
.cfg-checks input{accent-color:var(--brand);width:14px;height:14px}

/* 参数判据表：单元格内是紧凑输入控件 */
.cfg-param{min-width:1080px}
.cfg-param th{font-size:11px;white-space:nowrap;padding:7px 5px}
.cfg-param td{padding:4px 5px;vertical-align:middle}
.cfg-param input[type=text],.cfg-param input:not([type]),.cfg-param select{
  width:100%;min-width:70px;padding:4px 7px;font-size:12px;background:rgba(6,16,30,.62);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:inherit}
.cfg-param input[type=number]{width:74px;padding:4px 6px;font-size:12px;background:rgba(6,16,30,.62);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:inherit}
.cfg-param input:focus,.cfg-param select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--primary-soft)}
.cfg-param input:disabled{opacity:.42;cursor:not-allowed}
.cfg-param input[type=checkbox]{accent-color:var(--brand);width:14px;height:14px}
.cfg-param .cfg-k{white-space:nowrap;font-size:11.5px;color:var(--text-2)}
.cfg-param .cfg-key{width:96px !important;font-size:11.5px}
.cfg-param .cfg-unit{width:62px}
.cfg-param td.c{text-align:center}
.cfg-param tr.chg{background:rgba(255,171,61,.055)}
.cfg-param tr.chg td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* 角色编辑器：勾选网格 */
.cfg-chk{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface-2);cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.cfg-chk:hover{border-color:var(--border-strong)}
.cfg-chk input{accent-color:var(--brand);width:14px;height:14px;margin-top:2px;flex:0 0 auto}
.cfg-chk input:disabled{opacity:.35}
.cfg-chk span{font-size:12.5px;display:flex;flex-direction:column;gap:1px}
.cfg-chk span i{font-style:normal;font-size:10.5px;color:var(--muted)}
.cfg-chk span em{font-style:normal;font-size:11px;color:var(--muted);line-height:1.45}
.cfg-chk-all{max-width:220px;margin-bottom:8px;border-color:rgba(255,171,61,.34);background:rgba(255,171,61,.07)}
.cfg-chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:7px}
.cfg-chk-grid.wide{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}

/* 工序授权勾选（人员建档弹窗内） */
.proc-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;
  max-height:300px;overflow:auto;padding:9px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.proc-pick .pp-head{grid-column:1/-1;font-size:11.5px;font-weight:700;color:var(--info);padding:4px 0 2px;
  border-bottom:1px dashed var(--border);letter-spacing:.4px}
.proc-pick .pp-item{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;font-weight:400;padding:2px 4px;border-radius:var(--r-sm)}
.proc-pick .pp-item:hover{background:var(--surface-3)}
.proc-pick .pp-item input{accent-color:var(--brand);width:14px;height:14px;flex:0 0 auto}
.proc-pick .pp-item b{color:var(--brand-2);margin-right:5px;font-weight:700}
.proc-pick .pp-item span{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cfg-msg{margin-top:10px;font-size:12.5px;min-height:18px}
.cfg-msg .bad{color:var(--danger);font-weight:600}
.cfg-msg .hint{margin:0}

@media(max-width:1080px){
  .cfg-grid{grid-template-columns:1fr}
  .cfg-side{position:static}
  .cfg-items{max-height:260px}
}

/* =====================================================================
   侧栏「全屏」角标（可视化大屏入口）
   ===================================================================== */
.nav-item.nav-bs{color:#8fd0ff}
.nav-item.nav-bs .ni{color:var(--info)}
.nav-item.nav-bs.active .ni,.nav-item.nav-bs:hover .ni{color:var(--brand-2)}
.nav-tag{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-size:9.5px;font-weight:700;letter-spacing:.5px;padding:1px 5px;border-radius:8px;
  background:rgba(34,211,238,.15);color:var(--info);border:1px solid rgba(34,211,238,.32)}

/* =====================================================================
   自研 SVG 图表库（charts.js）
   —— 几何图形自身的颜色由 JS 从 CSS 变量解析后内联，这里只管容器、动效与提示层
   ===================================================================== */
.ch-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.ch-card-head{display:flex;align-items:center;gap:8px;padding:8px 11px 6px;border-bottom:1px solid rgba(46,144,250,.12)}
.ch-card-title{font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-tone{width:7px;height:7px;border-radius:50%;margin-left:auto;flex:0 0 auto;box-shadow:0 0 8px currentColor}
.ch-tone.t-ok{background:var(--ok);color:var(--ok)}
.ch-tone.t-warn{background:var(--warn);color:var(--warn)}
.ch-tone.t-danger{background:var(--danger);color:var(--danger)}
.ch-tone.t-info{background:var(--info);color:var(--info)}
.ch-tone.t-brand{background:var(--brand);color:var(--brand)}
.ch-tone.t-purple{background:var(--purple);color:var(--purple)}
.ch-card-body{padding:6px 8px 8px;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.ch-card-note{padding:0 11px 8px;font-size:10.5px;line-height:1.55;color:var(--muted)}
.chart-svg{display:block;width:100%;height:auto;max-height:100%;overflow:visible}

/* 图形入场动效：柱从底部生长、弧面淡入、折线描边推进 */
@keyframes ck-rise{from{transform:scaleY(.02);opacity:.15}to{transform:scaleY(1);opacity:1}}
@keyframes ck-fade{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
@keyframes ck-draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.ck-bar,.ck-bar-h{transform-box:fill-box;animation:ck-rise .5s cubic-bezier(.22,1,.36,1) both}
.ck-bar{transform-origin:center bottom}
.ck-bar-h{transform-origin:left center}
.ck-arc,.ck-dot{transform-box:fill-box;transform-origin:center;animation:ck-fade .55s cubic-bezier(.22,1,.36,1) both}
.ck-line{stroke-dasharray:1400;animation:ck-draw .95s cubic-bezier(.4,0,.2,1) both}
.ck-grid{opacity:.75}
@media(prefers-reduced-motion:reduce){
  .ck-bar,.ck-bar-h,.ck-arc,.ck-dot,.ck-line{animation:none}
  .ck-line{stroke-dasharray:none}
}

/* 悬浮提示（跟随光标，图表与整屏共用同一个 DOM 节点） */
.chart-tip{position:fixed;z-index:9200;pointer-events:none;max-width:280px;
  padding:6px 10px;font-size:11.5px;line-height:1.5;color:var(--text);
  background:rgba(6,18,34,.96);border:1px solid var(--border-strong);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(0,0,0,.55);white-space:nowrap}

/* =====================================================================
   生产管理可视化大屏（#bigscreen · body 级全屏覆盖层）
   —— 现有布局是「固定侧栏 + 滚动主区」，没有真全屏承载层，故用 fixed inset:0 覆盖，
      并用 body.bs-on 锁掉底层滚动，保证大屏是纯粹的 HUD 形态
   ===================================================================== */
body.bs-on{overflow:hidden}

.bigscreen{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  background:radial-gradient(1200px 620px at 12% -8%,rgba(46,144,250,.16),transparent 62%),
             radial-gradient(1000px 560px at 88% 4%,rgba(34,211,238,.13),transparent 60%),
             linear-gradient(168deg,#04101f 0%,#061527 46%,#040d1a 100%);
  color:var(--text);overflow:hidden;animation:bs-in .34s ease both}
@keyframes bs-in{from{opacity:0;transform:scale(.994)}to{opacity:1;transform:scale(1)}}
.bigscreen.hidden{display:none}

/* 背景技术网格 */
.bs-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(46,144,250,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(46,144,250,.055) 1px,transparent 1px);
  background-size:44px 44px}
.bs-grid-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,transparent 40%,rgba(2,8,18,.55) 100%)}

/* ---------- 顶栏 ---------- */
.bs-head{position:relative;z-index:2;display:flex;align-items:center;gap:18px;
  padding:12px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(9,26,48,.92),rgba(6,18,34,.72))}
.bs-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.bs-logo{width:44px;height:44px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  background:rgba(46,144,250,.12);border:1px solid var(--border-strong);box-shadow:var(--glow)}
.bs-logo img{width:30px;height:30px;object-fit:contain}
.bs-brand-txt h1{margin:0;font-size:19px;font-weight:800;letter-spacing:.6px;
  background:linear-gradient(92deg,#e9f4ff,#7fd6f7 58%,#8fd0ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bs-brand-txt p{margin:3px 0 0;font-size:11px;color:var(--muted);letter-spacing:.3px}

.bs-head-kpi{display:flex;gap:9px;flex:1;min-width:0;justify-content:center;flex-wrap:nowrap;overflow:hidden}
.bs-hkpi{min-width:104px;padding:7px 12px;border-radius:var(--r-lg);background:rgba(8,24,44,.72);
  border:1px solid var(--border);border-left:2px solid var(--brand)}
.bs-hkpi.ok{border-left-color:var(--ok)}
.bs-hkpi.warn{border-left-color:var(--warn)}
.bs-hkpi.danger{border-left-color:var(--danger)}
.bs-hkpi.info{border-left-color:var(--info)}
.bs-hkpi-v{font-size:21px;font-weight:800;line-height:1.12;font-family:var(--mono);color:var(--text)}
.bs-hkpi.ok .bs-hkpi-v{color:var(--ok)}
.bs-hkpi.warn .bs-hkpi-v{color:var(--warn)}
.bs-hkpi.danger .bs-hkpi-v{color:var(--danger)}
.bs-hkpi.info .bs-hkpi-v{color:var(--info)}
.bs-hkpi-v small{font-size:11px;font-weight:600;margin-left:2px;color:var(--text-2)}
.bs-hkpi-l{font-size:11.5px;color:var(--text-2);margin-top:2px;white-space:nowrap}
.bs-hkpi-s{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap}

.bs-head-ops{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bs-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;margin-right:4px}
.bs-clock b{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--brand-2);
  text-shadow:0 0 14px rgba(34,211,238,.5);letter-spacing:.5px}
.bs-clock span{font-size:10.5px;color:var(--muted)}
.bs-btn{padding:6px 13px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;
  background:rgba(12,32,56,.8);border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:inherit;transition:.15s;white-space:nowrap}
.bs-btn:hover{border-color:var(--border-strong);color:var(--text);background:rgba(18,46,78,.9)}
.bs-btn.on{background:rgba(34,211,238,.15);border-color:rgba(34,211,238,.46);color:var(--info)}
.bs-btn.danger:hover{background:rgba(255,91,91,.14);border-color:rgba(255,91,91,.46);color:var(--danger)}

/* ---------- 主体三栏 ---------- */
.bs-body{position:relative;z-index:2;flex:1;min-height:0;display:grid;
  grid-template-columns:274px minmax(0,1fr) 348px;gap:12px;padding:12px 14px}
.bs-col{display:flex;flex-direction:column;gap:9px;min-width:0;overflow:auto;padding-right:3px}
.bs-col::-webkit-scrollbar,.bs-charts::-webkit-scrollbar{width:7px}
.bs-col::-webkit-scrollbar-thumb,.bs-charts::-webkit-scrollbar-thumb{background:rgba(46,144,250,.3);border-radius:4px}
.bs-col::-webkit-scrollbar-track,.bs-charts::-webkit-scrollbar-track{background:transparent}
.bs-center{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.bs-center.flash{animation:bs-flash .5s ease}
@keyframes bs-flash{0%{opacity:.55;transform:translateY(4px)}100%{opacity:1;transform:none}}

.bs-col-head{display:flex;align-items:center;gap:8px;padding-bottom:6px;
  border-bottom:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:.4px}
.bs-col-head i{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:400;color:var(--muted)}
.bs-col-head.mt{margin-top:6px}
.bs-col-head::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--brand-2);box-shadow:var(--glow)}

/* ---------- AI 智能可视化控件 ---------- */
.bs-ai{flex:0 0 auto;padding:11px 14px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(46,144,250,.12),rgba(34,211,238,.07) 52%,rgba(167,139,250,.09));
  border:1px solid var(--border-strong);box-shadow:inset 0 1px 0 rgba(140,200,255,.08)}
.bs-ai-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bs-ai-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.6px;
  padding:3px 10px;border-radius:10px;color:#06121f;background:linear-gradient(94deg,#5fd0f5,#8fd0ff)}
.bs-ai-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:#06121f;
  animation:bs-blink 1.6s ease-in-out infinite}
@keyframes bs-blink{0%,100%{opacity:1}50%{opacity:.25}}
.bs-ai-pick{display:flex;align-items:center;gap:8px;font-weight:400}
.bs-ai-pick-lb{font-size:11.5px;color:var(--text-2);white-space:nowrap}
.bs-ai-pick select{padding:6px 11px;font-size:12.5px;font-weight:600;font-family:inherit;color:var(--text);
  background:rgba(6,18,34,.92);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  min-width:212px;cursor:pointer}
.bs-ai-pick select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 2px rgba(34,211,238,.2)}
.bs-ai-pick option{background:#0a1c33;color:var(--text)}
.bs-ai-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.bs-chip{padding:4px 11px;font-size:11.5px;font-family:inherit;color:var(--text-2);cursor:pointer;
  background:rgba(10,28,50,.7);border:1px solid var(--border);border-radius:12px;transition:.15s}
.bs-chip:hover{color:var(--text);border-color:var(--border-strong)}
.bs-chip.on{background:rgba(46,144,250,.22);border-color:var(--brand);color:#cfe8ff;font-weight:600}
.bs-chip.hot::after{content:'◆';margin-left:5px;font-size:8px;color:var(--info);vertical-align:middle}
.bs-ai-title{margin-top:9px}
.bs-ai-title h2{margin:0;font-size:16px;font-weight:700;color:var(--text);letter-spacing:.4px}
.bs-ai-title p{margin:3px 0 0;font-size:11.5px;line-height:1.6;color:var(--text-2)}

/* ---------- 图表区 ---------- */
.bs-charts{flex:1;min-height:0;overflow:auto;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;padding-right:3px}
.bs-chart{min-width:0}
.bs-chart.wide{grid-column:1/-1}
.bs-chart .ch-card{height:100%}
.bs-chart.wide .ch-card-body{min-height:268px}
.bs-chart:not(.wide) .ch-card-body{min-height:216px}

/* ---------- 左栏 KPI / 右栏 AI 洞察 ---------- */
.bs-kpi{padding:9px 12px;border-radius:var(--r-lg);background:rgba(8,24,44,.68);
  border:1px solid var(--border);border-left:2px solid var(--brand)}
.bs-kpi.ok{border-left-color:var(--ok)}
.bs-kpi.warn{border-left-color:var(--warn)}
.bs-kpi.danger{border-left-color:var(--danger)}
.bs-kpi.info{border-left-color:var(--info)}
.bs-kpi-v{font-size:23px;font-weight:800;line-height:1.1;font-family:var(--mono);color:var(--text)}
.bs-kpi.ok .bs-kpi-v{color:var(--ok)}
.bs-kpi.warn .bs-kpi-v{color:var(--warn)}
.bs-kpi.danger .bs-kpi-v{color:var(--danger)}
.bs-kpi.info .bs-kpi-v{color:var(--info)}
.bs-kpi-v small{font-size:11px;font-weight:600;margin-left:2px;color:var(--text-2)}
.bs-kpi-l{font-size:11.5px;color:var(--text-2);margin-top:3px}
.bs-kpi-s{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.45}

.bs-mini{margin-top:auto;padding:9px 12px;border-radius:var(--r-lg);
  background:rgba(6,18,34,.6);border:1px solid var(--border)}
.bs-mini-h{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;margin-bottom:6px}
.bs-mini-r{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 0;font-size:11.5px;color:var(--text-2);border-bottom:1px dashed rgba(46,144,250,.13)}
.bs-mini-r:last-child{border-bottom:none}
.bs-mini-r b{font-family:var(--mono);font-size:12.5px;color:var(--brand-2)}

.bs-ins{position:relative;padding:9px 12px 9px 13px;border-radius:var(--r-lg);cursor:pointer;
  background:rgba(8,24,44,.68);border:1px solid var(--border);border-left:3px solid var(--info);transition:.15s}
.bs-ins:hover{background:rgba(14,36,62,.85);transform:translateX(2px)}
.bs-ins.compact{cursor:default;padding:7px 11px 7px 12px}
.bs-ins.compact:hover{transform:none}
.bs-ins.danger{border-left-color:var(--danger)}
.bs-ins.warn{border-left-color:var(--warn)}
.bs-ins.info{border-left-color:var(--info)}
.bs-ins.ok{border-left-color:var(--ok)}
.bs-ins-h{display:flex;align-items:flex-start;gap:7px}
.bs-ins-i{font-size:12px;line-height:1.5;flex:0 0 auto;font-style:normal}
.bs-ins-h b{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.5}
.bs-ins p{margin:4px 0 0;font-size:11.5px;line-height:1.65;color:var(--text-2)}
.bs-ins-tag{display:inline-block;margin-top:5px;font-size:10px;padding:1px 7px;border-radius:8px;
  background:rgba(46,144,250,.14);color:#8fd0ff;border:1px solid rgba(46,144,250,.24)}
.bs-ins.danger .bs-ins-tag{background:rgba(255,91,91,.13);color:#ff9a9a;border-color:rgba(255,91,91,.28)}
.bs-ins.warn .bs-ins-tag{background:rgba(255,171,61,.13);color:#ffcb85;border-color:rgba(255,171,61,.28)}
.bs-ins.ok .bs-ins-tag{background:rgba(53,208,127,.13);color:#8ce0b2;border-color:rgba(53,208,127,.28)}

/* ---------- 底栏 ---------- */
.bs-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:7px 18px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);
  background:rgba(5,15,29,.85);white-space:nowrap;overflow:hidden}

/* ---------- 大屏响应式 ---------- */
@media(max-width:1500px){
  .bs-body{grid-template-columns:238px minmax(0,1fr) 300px}
  .bs-head-kpi .bs-hkpi:nth-child(n+6){display:none}
}
@media(max-width:1240px){
  .bs-body{grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;overflow:auto}
  .bs-col{overflow:visible;max-height:none}
  .bs-charts{grid-template-columns:minmax(0,1fr);overflow:visible}
  .bs-head{flex-wrap:wrap}
  .bs-head-kpi{order:3;width:100%;justify-content:flex-start;overflow-x:auto}
  .bs-foot{flex-direction:column;align-items:flex-start;white-space:normal;line-height:1.6}
}