/* ===== 科聪售后 · 网页工作台 样式（西门子工业控制台 HMI 风格 / 深蓝黑底 + teal 强调） ===== */



/* ===== 设计令牌 ===== */

:root {

  /* 主色：西门子 teal */

  --primary: #00C8C8;

  --primary-hover: #33D6D6;

  --primary-active: #00AEAE;

  --primary-light: rgba(0, 200, 200, 0.12);

  --primary-dim: rgba(0, 200, 200, 0.06);

  --primary-glow: rgba(0, 200, 200, 0.28);



  /* 状态色（为深色优化的工业信号色） */

  --success: #3DD68C;

  --success-dim: rgba(61, 214, 140, 0.14);

  --warning: #FFB020;

  --warning-dim: rgba(255, 176, 32, 0.14);

  --danger: #FF5C5C;

  --danger-dim: rgba(255, 92, 92, 0.14);

  --info: #4DA3FF;

  --info-dim: rgba(77, 163, 255, 0.14);

  --violet: #B37FEB;

  --violet-dim: rgba(179, 127, 235, 0.14);

  --steel: #8AA0B6;



  /* 深蓝黑底色层级（控制台） */

  --bg-page: #0A0E14;

  --bg-card: #121A24;

  --bg-card-solid: #0F1620;

  --bg-elev: #16202C;

  --bg-hover: #1B2735;

  --bg-soft: #0E141C;

  --border-color: #243243;

  --border-light: #32455C;

  --grid-line: rgba(255, 255, 255, 0.04);

  --text-primary: #E6EDF3;

  --text-secondary: #9AA7B4;

  --text-tertiary: #67768A;

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.40);

  --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.55);

  --frosted-bg: rgba(15, 22, 32, 0.82);



  /* 排版 */

  --font-sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;



  /* 布局 */

  --sidebar-width: 220px;

  --topbar-height: 56px;

  --radius: 6px;

  --radius-lg: 8px;

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);



  /* 兼容旧类名 */

  --bg: var(--bg-page);

  --card: var(--bg-card);

  --line: var(--border-color);

  --text: var(--text-primary);

  --muted: var(--text-secondary);

  --ok: var(--success);

}



/* 浅色模式（Siemens 浅色企业风：白底 + petrol 强调）

   对比度优化（2026-08-24）：文字三档加深、页面背景/卡片对比拉大、描边加深、

   阴影层级增强、主色与辅助色（teal/蓝/紫）拉开色相与明度，保持气质不变 */

body.light-mode {

  --primary: #008F8F;

  --primary-hover: #00A3A3;

  --primary-active: #007575;

  --primary-light: rgba(0, 143, 143, 0.12);

  --primary-dim: rgba(0, 143, 143, 0.06);

  --primary-glow: rgba(0, 143, 143, 0.22);

  --success: #0C7A45;

  --success-dim: rgba(12, 122, 69, 0.12);

  --warning: #A05F00;

  --warning-dim: rgba(160, 95, 0, 0.12);

  --danger: #B52B28;

  --danger-dim: rgba(181, 43, 40, 0.12);

  --info: #175FB8;

  --info-dim: rgba(23, 95, 184, 0.12);

  --violet: #6E46C4;

  --violet-dim: rgba(110, 70, 196, 0.12);

  --steel: #4E5D6C;

  --bg-page: #E9EDF1;

  --bg-card: #FFFFFF;

  --bg-card-solid: #FFFFFF;

  --bg-elev: #FFFFFF;

  --bg-hover: #EEF2F6;

  --bg-soft: #F4F6F9;

  --border-color: #D3DAE1;

  --border-light: #BCC7D2;

  --grid-line: rgba(20, 32, 48, 0.06);

  --text-primary: #0F1A25;

  --text-secondary: #3E4C5B;

  --text-tertiary: #5F6C7A;

  --shadow: 0 2px 8px rgba(16, 32, 48, 0.12);

  --shadow-lg: 0 12px 32px rgba(16, 32, 48, 0.20);

  --frosted-bg: rgba(255, 255, 255, 0.88);

}

/* 浅色模式局部覆盖：原为深色主题优化的亮青标签，在浅底上改用深青保证可读 */

body.light-mode .tag.primary { color: #007575; border-color: rgba(0, 143, 143, 0.35); }

body.light-mode .tag.ai-llm { background: rgba(0, 143, 143, 0.12); color: #007575; border-color: rgba(0, 143, 143, 0.35); }



/* ===== Reset ===== */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--bg-page);

  color: var(--text-primary);

  font-size: 14px;

  line-height: 1.6;

  transition: background 0.3s ease, color 0.3s ease;

}

button { font-family: inherit; cursor: pointer; border: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.hidden { display: none !important; }



/* ===== 按钮 ===== */

.btn {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 9px 18px; border-radius: var(--radius); font-size: 14px; font-weight: 500; letter-spacing: 0.2px;

  background: var(--primary); color: #04201F; transition: var(--transition); border: none; outline: none; white-space: nowrap;

}

.btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 14px var(--primary-glow); }

.btn:active { background: var(--primary-active); }

.btn.ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }

.btn.ghost:hover { border-color: var(--primary); color: var(--primary); box-shadow: none; transform: none; }

.btn.ok { background: var(--success); color: #04210F; }

.btn.ok:hover { background: var(--success); box-shadow: 0 4px 14px rgba(61, 214, 140, 0.3); }

.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }

.btn.danger:hover { background: var(--danger); color: #fff; box-shadow: none; transform: none; }

.btn-primary { background: var(--primary); color: #04201F; }

.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }

.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-icon { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: transparent; color: var(--text-secondary); }

.btn-icon:hover { background: var(--bg-hover); color: var(--primary); }



/* ===== 表单 ===== */

.inp, .sel, textarea.inp {

  background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: var(--radius);

  padding: 9px 12px; font-size: 14px; width: 100%; color: var(--text-primary); outline: none; transition: var(--transition); font-family: inherit;

}

.inp:focus, .sel:focus, textarea.inp:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

.inp::placeholder, textarea.inp::placeholder { color: var(--text-tertiary); }

.inp { margin-bottom: 10px; }

textarea.inp { min-height: 70px; resize: vertical; }

.sel { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386909C' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.chk { width: 16px; height: 16px; accent-color: var(--primary); }



/* ===== 登录 ===== */

.login-mask { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 70% -10%, rgba(0,200,200,0.20), transparent), linear-gradient(135deg, #0A0E14, #0B2A2E); display: flex; align-items: center; justify-content: center; z-index: 100; }

.login-card { background: #0E2529; border: 1px solid rgba(0,200,200,0.35); border-radius: 12px; padding: 34px 32px 20px; width: 400px; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,0.45); }

.login-brand { font-size: 20px; font-weight: 700; color: #E6EDF3; display: flex; align-items: center; gap: 10px; justify-content: center; letter-spacing: 1px; }

.login-logo { height: 36px; width: auto; object-fit: contain; }

.login-sub { color: #7FA8AC; margin: 6px 0 22px; font-size: 12.5px; text-align: center; }

.login-row { display: flex; flex-direction: column; gap: 10px; }

.login-provider { flex: 1; background: transparent; border: 1px solid #1F4448; border-radius: 8px; padding: 12px; font-size: 14px; color: #AECDD1; transition: var(--transition); }

.login-provider:hover, .login-provider.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

.login-provider:first-child { background: var(--primary); border-color: var(--primary); color: #04201F; font-weight: 600; }

.login-provider:first-child:hover, .login-provider:first-child.active { background: var(--primary-hover); border-color: var(--primary-hover); color: #04201F; }

.login-scan { margin-top: 16px; padding: 16px; background: #0A1B1F; border: 1px solid #1F4448; border-radius: 10px; }

.login-qr { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }

.login-hint { color: var(--text-secondary); font-size: 12px; margin-bottom: 12px; }

.login-select { width: 100%; margin-bottom: 12px; }

.login-btn { width: 100%; background: var(--primary); color: #04201F; padding: 11px; border-radius: 8px; font-size: 15px; font-weight: 600; }

.login-btn:hover { background: var(--primary-hover); }

.login-divider { text-align: center; color: var(--text-tertiary); margin: 18px 0 12px; font-size: 13px; }

.login-warn { background: rgba(245, 63, 63, 0.10); border: 1px solid rgba(245, 63, 63, 0.4); color: var(--danger); font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }

.login-warn b { color: var(--danger); }

.login-roles { display: flex; flex-wrap: wrap; gap: 8px; }

.login-role { background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 20px; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); transition: var(--transition); }

.login-role:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.login-guest { background: transparent; color: var(--primary); border: none; padding: 8px; font-size: 13.5px; width: 100%; margin-top: 2px; transition: var(--transition); }

.login-guest::after { content: ' →'; }

.login-guest:hover { background: transparent; color: var(--primary-hover); }

.login-guest:hover { background: var(--primary); color: #fff; }

/* 手机号登录 / 测试登录 / 演示模式 */

.login-phone { display: flex; flex-direction: column; gap: 10px; }

.login-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-hover); color: var(--text-primary); font-size: 14px; transition: var(--transition); }

.login-input::placeholder { color: var(--text-tertiary); opacity: 1; }

.login-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.login-phone-row { display: flex; gap: 10px; }

.login-phone-row .login-input { flex: 1; }

.login-btn-sm { flex: 0 0 auto; background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--primary); border-radius: 8px; padding: 0 14px; font-size: 13px; white-space: nowrap; transition: var(--transition); }

.login-btn-sm:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); }

.login-btn-sm:disabled { opacity: .55; cursor: not-allowed; }

.login-test { width: 100%; background: linear-gradient(135deg, #00C8C8, #0096C7); color: #fff; padding: 12px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: var(--transition); }

.login-test:hover { filter: brightness(1.08); }

.login-demo { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 4px; color: var(--text-secondary); font-size: 13px; cursor: pointer; user-select: none; }

.login-demo input { width: 16px; height: 16px; accent-color: var(--primary); }

.login-mask { flex-direction: column; }

.login-foot { width: 400px; max-width: 92vw; margin-top: 14px; display: flex; justify-content: space-between; color: #3E6A6E; font-size: 11px; }



/* ===== 主布局 ===== */

.app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

.app.guest .sidebar { display: none; }



.sidebar {

  width: var(--sidebar-width); flex-shrink: 0;

  background: var(--bg-card-solid); border-right: 1px solid var(--border-color);

  display: flex; flex-direction: column; transition: var(--transition); z-index: 100;

}

.sidebar-header { height: var(--topbar-height); display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--border-color); }

.sidebar-logo-img { height: 30px; width: auto; object-fit: contain; flex-shrink: 0; }

.sidebar-title { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand { font-size: 19px; font-weight: 700; color: var(--text-primary); }

.brand-sub { font-size: 12px; color: var(--text-tertiary); margin-bottom: 22px; }



.sidebar-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-group { margin-bottom: 8px; }

.nav-group-label { font-size: 11px; color: var(--text-tertiary); padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: 0.5px; }



.nav-item {

  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);

  font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: var(--transition);

  position: relative; margin-bottom: 2px;

}

.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }

.nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 500; }

.nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--primary); border-radius: 0 2px 2px 0; }

.ni-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }

.nav-spacer { flex: 1; }



.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-color); }

.side-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; border-radius: 6px; transition: background 0.15s; }

.side-user:hover { background: var(--bg-hover); }

.su-avatar { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #00C8C8, #009999); color: #04201F; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.su-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }

.su-role { font-size: 10px; color: var(--text-secondary); }

.side-logout { padding: 10px 14px; color: var(--danger); font-size: 13px; background: none; text-align: left; width: 100%; margin-top: 8px; }

.side-logout:hover { color: var(--danger); }



.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }



/* 顶栏（玻璃态，原型同款） */

.topbar { height: var(--topbar-height); background: var(--frosted-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 50; }

.tb-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }

.tb-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.tb-user { font-size: 13px; color: var(--text-secondary); }

.topbar-spacer { flex: 1; }

.topbar-action { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius); cursor: pointer; color: var(--text-secondary); transition: var(--transition); font-size: 13px; }

.topbar-action:hover { background: var(--bg-hover); color: var(--text-primary); }

.topbar-user { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 20px; cursor: pointer; transition: var(--transition); }

.topbar-user:hover { background: var(--bg-hover); }

.user-avatar { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #00C8C8, #009999); display: flex; align-items: center; justify-content: center; color: #04201F; font-size: 13px; font-weight: 700; }

.user-name { font-size: 13px; color: var(--text-primary); }

.user-role { font-size: 11px; color: var(--text-secondary); }

.theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--text-secondary); font-size: 18px; }

.theme-toggle:hover { background: var(--bg-hover); color: var(--primary); }

.lang-select { height: 36px; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 13px; padding: 0 8px; cursor: pointer; outline: none; transition: var(--transition); }

.lang-select:hover, .lang-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }



.view { padding: 20px 24px; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }

.content-area { flex: 1; overflow-y: auto; padding: 20px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }



/* ===== 卡片 / 面板（控制台风） ===== */

.card, .panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; transition: var(--transition); margin-bottom: 16px; position: relative; }

.card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--primary), var(--primary-active)); opacity: 0.9; }

.card:hover { border-color: var(--border-light); box-shadow: var(--shadow); }

.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }

.card-title-bar { width: 3px; height: 16px; background: var(--primary); border-radius: 2px; }

.panel-h { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }

.panel-h::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--primary); }

.sec-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 700; }

.panel-sub { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 2px; }



/* ===== 状态标签 ===== */

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); }

.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }

.tag-pending, .tag-waiting, .tag-suspended { background: var(--warning-dim); color: var(--warning); border-color: rgba(255,176,32,0.3); }

.tag-processing { background: var(--info-dim); color: var(--info); border-color: rgba(77,163,255,0.3); }

.tag-testing, .tag-verifying { background: var(--violet-dim); color: var(--violet); border-color: rgba(179,127,235,0.3); }

.tag-escalated { background: rgba(232,111,208,0.14); color: #E86FD0; border-color: rgba(232,111,208,0.3); }

.tag-closed { background: var(--success-dim); color: var(--success); border-color: rgba(61,214,140,0.3); }

.tag-rejected { background: var(--danger-dim); color: var(--danger); border-color: rgba(255,92,92,0.3); }

.tag-urgent { background: var(--danger-dim); color: var(--danger); border-color: rgba(255,92,92,0.3); }

.tag-high { background: var(--warning-dim); color: var(--warning); border-color: rgba(255,176,32,0.3); }

.tag-medium { background: var(--info-dim); color: var(--info); border-color: rgba(77,163,255,0.3); }

.tag-low { background: var(--success-dim); color: var(--success); border-color: rgba(61,214,140,0.3); }

.tag-portal { background: rgba(138,160,182,0.12); color: var(--steel); border-color: rgba(138,160,182,0.3); }

.tag-internal { background: var(--primary-light); color: var(--primary); border-color: rgba(0,200,200,0.3); }

.tag.primary { background: var(--primary-light); color: var(--primary); border-color: rgba(0,200,200,0.35); }

.tag-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); }



/* ===== 列表 / 行卡片 ===== */

.list { display: flex; flex-direction: column; gap: 10px; }

.row-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; cursor: pointer; transition: var(--transition); }

.row-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }

.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.rc-title { font-weight: 600; color: var(--text-primary); }

.rc-meta { color: var(--text-secondary); font-size: 12px; margin-top: 6px; }

.rc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.link { color: var(--primary); font-size: 13px; cursor: pointer; }

.link:hover { text-decoration: underline; }

.empty, .empty-state { text-align: center; color: var(--text-tertiary); padding: 40px; }

.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }

.empty-text { font-size: 14px; }



/* ===== 看板 ===== */

.dash-top { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }

.ring-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }

.metric-grid { flex: 1; min-width: 320px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.metric { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px; transition: var(--transition); position: relative; overflow: hidden; }

.metric::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); }

.metric.success::before { background: var(--success); }

.metric.warning::before { background: var(--warning); }

.metric.danger::before { background: var(--danger); }

.metric.info::before { background: var(--info); }

.m-val { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; }

.m-lab { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

.sbar { display: flex; align-items: center; gap: 10px; padding: 7px 0; }

.sb-lab { width: 84px; font-size: 13px; color: var(--text-secondary); }

.sb-track { flex: 1; background: var(--bg-hover); border-radius: 6px; height: 10px; overflow: hidden; }

.sb-fill { display: block; height: 100%; background: var(--primary); border-radius: 6px; }

.sb-num { width: 40px; text-align: right; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.quick { display: flex; gap: 12px; flex-wrap: wrap; }

.qbtn { background: var(--primary-light); color: var(--primary); border-radius: 10px; padding: 12px 18px; font-size: 14px; transition: var(--transition); }

.qbtn:hover { background: var(--primary); color: #fff; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: 12px; }

.lg { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); }

.lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }



/* ===== 工单详情 ===== */

.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.detail-head h2 { margin: 0; font-size: 18px; color: var(--text-primary); }

.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.kv { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--border-color); font-size: 14px; gap: 12px; }

.kv:last-child { border-bottom: none; }

.kv span:first-child { color: var(--text-secondary); flex-shrink: 0; }

.kv span:last-child { color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; text-align: right; word-break: break-all; }

.kv .tag, .kv .status, .kv .source-tag { font-family: var(--font-sans); }

.timeline { display: flex; flex-direction: column; gap: 4px; position: relative; padding-left: 20px; }

.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--border-color); }

.tl-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }

.tl-dot { position: absolute; left: -20px; top: 12px; width: 11px; height: 11px; border-radius: 3px; background: var(--primary); border: 2px solid var(--bg-card-solid); box-shadow: 0 0 0 3px var(--primary-dim); }

.tl-item.tl-overdue .tl-dot { box-shadow: 0 0 0 3px rgba(255,92,92,0.18); }

.tl-dot.tl-warning { background: var(--warning); } .tl-dot.tl-danger { background: var(--danger); } .tl-dot.tl-success { background: var(--success); } .tl-dot.tl-escalate { background: var(--danger); } .tl-dot.tl-approve { background: var(--success); } .tl-dot.tl-reject { background: var(--danger); }

.tl-time { font-size: 12px; color: var(--text-secondary); }

.tl-desc { font-size: 14px; color: var(--text-primary); }

.tl-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.tl-att { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-page); color: var(--text-secondary); font-size: 12px; text-decoration: none; max-width: 200px; }

.tl-att:hover { border-color: var(--primary); color: var(--primary); }

.tl-att-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }

.tl-title { font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }

.tl-owner { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: var(--primary-light); color: var(--primary); font-size: 11px; }

.tl-item.tl-overdue .tl-desc { color: var(--danger); font-weight: 600; }

.tl-item.tl-overdue .tl-dot { box-shadow: 0 0 0 3px rgba(245,63,63,0.18); }

.overdue { color: var(--danger); font-weight: 600; }

.sat { padding-top: 12px; } .stars { font-size: 26px; color: var(--text-tertiary); margin: 8px 0; }

.star { cursor: pointer; transition: color 0.15s; } .star:hover, .star.on { color: var(--warning); }

.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; align-items: center; }

/* 表单行内的下拉/输入并排显示，避免 width:100% 堆叠错位 */

.row-btns .sel, .row-btns .inp { width: auto; flex: 1 1 160px; min-width: 140px; margin-bottom: 0; }

/* 新建工单表单网格 */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }

.form-grid .inp, .form-grid .sel { width: 100%; }

/* 角色权限矩阵 */

.perm-matrix { min-width: 760px; }

.perm-matrix th, .perm-matrix td { text-align: center; padding: 8px 6px; font-size: 12px; }

.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }

.perm-matrix tr:nth-child(even) { background: var(--bg-soft); }

@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }



/* ===== 调度候选 ===== */

.cand { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; display: flex; align-items: flex-start; gap: 14px; transition: var(--transition); }

.cand:hover { border-color: var(--primary); }

.cand-rank { font-size: 18px; font-weight: 700; color: var(--primary); width: 34px; flex-shrink: 0; }

.cand-main { flex: 1; min-width: 0; }

.cand-name { font-weight: 600; color: var(--text-primary); }

.cand-reason { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }

/* ===== 回访计划（SLA / 满意度 / 反馈） ===== */

.cb-table td, .cb-table th { vertical-align: middle; }

.cb-overdue { background: rgba(245, 63, 63, 0.06); }

.cb-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.cb-done-row td { padding: 0 12px 12px; background: var(--bg-hover); }

.cb-done-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; }

.cb-form-lbl { font-size: 12px; color: var(--text-secondary); }

.cb-stars { display: flex; gap: 4px; font-size: 24px; line-height: 1; }

.cb-stars .star { color: var(--text-tertiary); cursor: pointer; transition: var(--transition); }

.cb-stars .star.on { color: #ffb400; }

.cb-stars .star:hover { transform: scale(1.12); }

.cb-sat { white-space: nowrap; color: #ffb400; letter-spacing: 1px; }

/* ===== 派单规则（协调栅格） ===== */

.rule-list { max-width: 880px; display: flex; flex-direction: column; gap: 12px; }

.rule-card { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 18px; transition: var(--transition); }

.rule-card:hover { border-color: var(--primary); }

.rule-cat { display: flex; align-items: center; gap: 10px; }

.rule-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }

.rule-cat-name { font-weight: 600; color: var(--text-primary); }

.rule-cat-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

.rule-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }

.rule-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.rule-lbl { font-size: 12px; color: var(--text-secondary); }

.rule-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; padding-bottom: 9px; }

.rule-actions { max-width: 880px; margin-top: 14px; }

@media (max-width: 720px) { .rule-card { grid-template-columns: 1fr; } .rule-fields { grid-template-columns: 1fr; } }

.cand-score { font-size: 22px; font-weight: 700; color: var(--info); }



/* ===== 统计 ===== */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px; position: relative; overflow: hidden; transition: var(--transition); }

.stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); }

.stat:hover { border-color: var(--border-light); }

.type { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); }

.blk { margin-top: 14px; }

.on { color: var(--primary); }



/* ===== 知识库 ===== */

.tabs2 { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); padding-bottom: 0; }

.t2 { font-size: 13px; color: var(--text-secondary); padding: 9px 16px; background: transparent; cursor: pointer; border: none; border-bottom: 2px solid transparent; border-radius: 0; transition: var(--transition); margin-bottom: -1px; }

.t2.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }

.toolbar .inp, .toolbar .sel { width: auto; min-width: 160px; margin: 0; }

.scope { font-size: 11px; padding: 1px 8px; border-radius: 10px; margin-left: 6px; }

.scope.public { background: var(--primary-light); color: var(--primary); }

.scope.private { background: rgba(245, 63, 63, 0.12); color: var(--danger); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* 管理配置-下拉选项 的标签：品牌蓝底，深浅模式均清晰可读 */

.chip { background: var(--primary-light); color: var(--primary); font-size: 12px; padding: 5px 12px; border-radius: 16px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; line-height: 1.4; }

.chips .chip:hover { background: rgba(0,200,200,0.18); }

.chip-x { color: var(--danger); cursor: pointer; font-size: 15px; line-height: 1; }

/* 业务线映射：可点击切换的标签（选中态 on） */

.chip.toggle { cursor: pointer; user-select: none; border: 1px solid var(--border-color); background: var(--bg-card-solid); color: var(--text-secondary); }

.chip.toggle:hover { border-color: var(--primary); color: var(--primary); }

.chip.toggle.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 人员管理：每行表单 */

.field { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

.field .rule-lbl { flex: 0 0 96px; padding-top: 8px; }

.field .chips { flex: 1; }

.person-card { padding: 10px 0; border-bottom: 1px solid var(--border-color); }

.person-card:last-child { border-bottom: none; }

.person-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.person-row .inp, .person-row .sel { flex: 1 1 140px; min-width: 120px; margin-bottom: 0; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 300; animation: fadeIn 0.2s ease; }

.modal-card { background: var(--bg-elev); border: 1px solid var(--border-light); border-radius: 14px; padding: 24px; width: 440px; max-width: 92vw; box-shadow: var(--shadow-lg); }



/* ===== 通用提示对话框（客户门户提交反馈等） ===== */

.dlg-card { text-align: center; padding: 28px 26px 24px; }

.dlg-ico { font-size: 40px; line-height: 1; margin-bottom: 12px; }

.dlg-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }

.dlg-body { font-size: 14px; color: var(--text-secondary); }

.dlg-missing { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; display: inline-block; }

.dlg-missing li::before { content: '· '; color: var(--danger); font-weight: 700; }

.dlg-missing li { padding: 2px 0; color: var(--text-1, var(--text-primary)); }

.dlg-msg { margin: 4px 0 2px; color: var(--danger); word-break: break-word; }

.dlg-wo { display: inline-block; text-align: left; min-width: 240px; margin-top: 2px; }

.dlg-wo .kv { display: flex; justify-content: space-between; gap: 24px; padding: 5px 0; border-bottom: 1px dashed var(--border-light); }

.dlg-wo .kv:last-child { border-bottom: none; }

.dlg-wo-id { color: var(--primary); font-size: 15px; }

.dlg-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.dlg-actions .btn { min-width: 96px; }

@media (max-width: 480px) {

  .dlg-card { padding: 22px 16px 18px; }

  .dlg-actions .btn { min-width: 0; flex: 1; }

}



/* ===== 新建工单弹框（1:1 还原原型） ===== */

.btn-primary { background: var(--primary); color: #fff; }

.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,200,200,0.3); }

.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }

.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.cm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 400; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 0; animation: fadeIn 0.2s ease; }

.cm { background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 640px; max-width: 94vw; max-height: calc(100vh - 48px); margin: auto; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slideUp 0.25s ease; }

.cm-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }

.cm-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }

.cm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 20px 24px; }

/* ===== 新建工单弹框（单页紧凑版：双栏分组网格，所有字段同一视口可见） ===== */

.cm.cm-create { width: 940px; max-width: 96vw; }

.cm-create .cm-body { padding: 14px 18px; }

.cm-create .cm-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 14px; align-items: start; }

.cm-create .cm-sec { background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; }

.cm-create .cm-sec + .cm-sec { margin-top: 12px; }

.cm-create .cm-sec-h { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

.cm-create .cm-sec-h .sec-ico { font-size: 13px; }

.cm-create .form-group { margin-bottom: 10px; }

.cm-create .form-group:last-child { margin-bottom: 0; }

.cm-create .form-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }

.cm-create .form-input { padding: 6px 10px; font-size: 13px; height: 32px; border-radius: 8px; }

.cm-create .form-textarea { font-size: 13px; min-height: 0; resize: vertical; }

.cm-create .cm-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.cm-create .cm-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.cm-create .upload-area { padding: 10px 12px; border-radius: 8px; }

.cm-create .upload-icon { font-size: 16px; }

.cm-create .env-tag-sec { margin-top: 6px; }

.cm-create .env-tag-h { font-size: 11.5px; color: var(--text-tertiary); }

.cm-create .env-tag { padding: 2px 9px; font-size: 11.5px; }

@media (max-width: 860px) {

  .cm.cm-create { width: 96vw; }

  .cm-create .cm-grid { grid-template-columns: 1fr; }

  .cm-create .cm-row-3, .cm-create .cm-row-4 { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 480px) {

  .cm-create .cm-row-3, .cm-create .cm-row-4 { grid-template-columns: 1fr; }

}

.cm-footer { padding: 12px 24px; border-top: 1px solid var(--border-color); display: flex; gap: 8px; justify-content: flex-end; }

.form-group { margin-bottom: 16px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

.form-label .required { color: var(--danger); margin-left: 2px; }

.form-input, .form-textarea, .form-select { width: 100%; background: var(--bg-page); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 9px 12px; color: var(--text-primary); font-size: 13px; outline: none; transition: var(--transition); font-family: inherit; box-sizing: border-box; }

.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

.form-textarea { resize: vertical; min-height: 72px; }

.upload-area { border: 1px dashed var(--border-color); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: var(--transition); color: var(--text-secondary); }

.upload-area:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.upload-area.sm { padding: 8px 12px; font-size: 12px; display: inline-block; }

.upload-icon { font-size: 28px; margin-bottom: 8px; }

.attachment-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-page); border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 6px; font-size: 13px; }

.attachment-item .att-rm { margin-left: auto; cursor: pointer; color: var(--danger); border: none; background: transparent; }

.env-tag { padding: 4px 10px; border-radius: 14px; font-size: 11px; background: var(--bg-card-solid); border: 1px solid var(--border-light); color: var(--text-secondary); cursor: pointer; }

.env-tag:hover { border-color: var(--primary); color: var(--primary); }

.cm-combo-list { position: fixed; max-height: 220px; overflow-y: auto; background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: var(--shadow-lg); z-index: 9999; }

.cm-combo-list > div { padding: 8px 12px; font-size: 13px; color: var(--text-primary); cursor: pointer; border-bottom: 1px solid var(--border-light); }

.cm-combo-list > div:last-child { border-bottom: none; }

.cm-combo-list .cm-opt:hover { background: var(--bg-hover); }

.cm-combo-list .cm-opt.cm-opt-active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.cm-combo-list .cm-opt.cm-empty { color: var(--text-tertiary); cursor: default; }

@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } .cm { width: 96vw; } }



/* ===== 远程运维 ===== */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.dev-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; cursor: pointer; transition: var(--transition); }

.dev-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.dev-sn { font-weight: 700; color: var(--text-primary); }

.dev-model { color: var(--text-secondary); font-size: 12px; margin-bottom: 8px; }

.dev-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--text-secondary); }

.logs { font-family: monospace; font-size: 12px; background: #0b1020; color: #9fe6a0; padding: 12px; border-radius: 8px; max-height: 240px; overflow: auto; border: 1px solid var(--border-color); }

.log { padding: 2px 0; }



/* ===== 客户门户 ===== */

.hint { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 14px; }

.portal-form { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }

.pf-hint { font-size: 13px; color: var(--text-secondary); background: var(--primary-light); border: 1px solid rgba(0,200,200,0.3); padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; }

.pf-hint b { color: var(--danger); }

.pf-ref { background: linear-gradient(135deg, #fff7e6, #fffbe6); border-color: #ffd591; color: #ad6800; font-weight: 500; }

.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }

.pf-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }

.pf-f.blk { margin-top: 14px; grid-column: 1 / -1; }

.pf-f span { font-weight: 500; color: var(--text-primary); }

.pf-f .inp, .pf-f .sel { margin-bottom: 0; width: 100%; }

.pf-f .required { color: var(--danger); margin-left: 2px; }

.ticket-ok { margin-top: 18px; background: rgba(0, 180, 42, 0.08); border: 1px solid rgba(0, 180, 42, 0.4); border-radius: 12px; padding: 22px; text-align: center; }

.to-ico { font-size: 34px; }

.to-title { font-size: 17px; font-weight: 700; margin: 6px 0; color: var(--text-primary); }

.to-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }

.to-sub b { color: var(--primary); }

.muted { color: var(--text-secondary); font-size: 12px; }

.ok { color: var(--success); }

.danger { color: var(--danger); }

.ghost { color: var(--text-secondary); }



/* ===== 表格（回访 / 学习日志） ===== */

.table-wrapper { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead { background: var(--bg-hover); }

th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 12px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }

td { padding: 12px 16px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }

tbody tr { transition: var(--transition); }

tbody tr:hover { background: var(--bg-hover); }

tbody tr:last-child td { border-bottom: none; }

.table-id { color: var(--primary); font-weight: 500; }



/* 学习日志状态 */

.log-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; }

.log-status.learning { background: var(--primary-light); color: var(--primary); }

.log-status.pending { background: rgba(255, 125, 0, 0.12); color: var(--warning); }

.log-status.approved { background: rgba(0, 180, 42, 0.12); color: var(--success); }

.log-status.rejected, .log-status.failed { background: rgba(245, 63, 63, 0.12); color: var(--danger); }



/* ===== AI 智能问答（原型同款聊天界面） ===== */

.chat-container { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-height) - 80px); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }

.chat-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; }

.chat-bot-avatar { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #00C8C8, #009999); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }

.chat-bot-info { flex: 1; }

.chat-bot-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.chat-bot-status { font-size: 11px; color: var(--success); display: flex; align-items: center; gap: 4px; }

.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.chat-message { display: flex; gap: 10px; max-width: 80%; animation: fadeInUp 0.3s ease; }

.chat-message.user { align-self: flex-end; flex-direction: row-reverse; }

.chat-msg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }

.chat-message.bot .chat-msg-avatar { background: linear-gradient(135deg, #00C8C8, #009999); color: #fff; }

.chat-message.user .chat-msg-avatar { background: linear-gradient(135deg, #00B42A, #00C8C8); color: #fff; }

.chat-bubble { padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; }

.chat-message.bot .chat-bubble { background: var(--bg-card-solid); border: 1px solid var(--border-color); border-top-left-radius: 4px; color: var(--text-primary); }

.chat-message.user .chat-bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }

.chat-source { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); font-size: 11px; color: var(--text-secondary); }

.chat-source a { color: var(--primary); text-decoration: none; cursor: pointer; }

.chat-feedback { margin-top: 8px; display: flex; gap: 8px; font-size: 11px; }

.feedback-btn { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; transition: var(--transition); font-size: 11px; }

.feedback-btn:hover { border-color: var(--primary); color: var(--primary); }

.feedback-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

.chat-typing { display: inline-flex; gap: 4px; padding: 12px 16px; }

.chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); animation: bounce 1.4s infinite; }

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }

.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

.chat-input-area { padding: 12px 20px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; align-items: flex-end; }

.chat-input { flex: 1; background: var(--bg-page); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 10px 14px; color: var(--text-primary); font-size: 13px; outline: none; resize: none; min-height: 40px; max-height: 120px; font-family: inherit; transition: var(--transition); }

.chat-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

.chat-quick-actions { display: flex; gap: 8px; padding: 0 20px 8px; flex-wrap: wrap; }

.quick-action { padding: 5px 12px; border-radius: 16px; background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: var(--transition); }

.quick-action:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }



/* AI 问答：双栏布局（侧边会话列表 + 主聊天区） */

.chat-layout { display: flex; gap: 14px; height: calc(100vh - var(--topbar-height) - 80px); min-height: 420px; }

.chat-side { width: 224px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px; overflow-y: auto; }

.chat-side-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-primary); }

.ai-sessions { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; }

.ai-session { padding: 8px 10px; border-radius: 8px; background: var(--bg-hover); border: 1px solid transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: var(--transition); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ai-session:hover { border-color: var(--primary); color: var(--primary); }

.ai-session.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.ai-session-empty { font-size: 12px; color: var(--text-tertiary); padding: 8px 4px; }

.chat-side .block { width: 100%; text-align: center; text-decoration: none; }

.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }

.chat-badges { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

.chat-badges .tag { font-size: 10px; padding: 1px 7px; border-radius: 8px; }

.tag.ai-llm { background: rgba(0,200,200,0.15); color: #00C8C8; border: 1px solid rgba(0,200,200,0.4); }

.tag.ai-rule { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); }

.chat-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.to-ticket-btn { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-color); background: transparent; color: var(--primary); cursor: pointer; font-size: 11px; transition: var(--transition); }

.to-ticket-btn:hover { background: var(--primary-light); border-color: var(--primary); }

.ai-adv { margin: 8px 0; border-top: 1px dashed var(--border-color); padding-top: 8px; }

.ai-adv summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); outline: none; }

.ai-adv .kv { font-size: 12px; }

.ai-test-result { font-size: 11px; margin-top: 6px; color: var(--text-secondary); min-height: 14px; }

.btn.sm, .btn.ghost.sm { padding: 4px 10px; font-size: 12px; }

.btn.block { display: block; width: 100%; text-align: center; }



/* ===== Toast ===== */

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.82); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; z-index: 1000; animation: fadeInUp 0.25s ease; }



/* ===== 动画 ===== */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

.fade-in { animation: fadeIn 0.3s ease; }



/* ===== 响应式 ===== */

@media (max-width: 1200px) {

  .dash-cols, .stats { grid-template-columns: 1fr; }

}

@media (max-width: 900px) {

  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; }

  .sidebar-header { display: none; }

  .app { flex-direction: column; }

  .nav { flex-direction: row; }

  .nav-group-label { display: none; }

  .dash-cols, .detail-cols, .stats { grid-template-columns: 1fr; }

  .pf-grid, .metric-grid { grid-template-columns: 1fr; }

}



/* ===== 品牌 Logo 栏（美化） ===== */

.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #00C8C8, #009999); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 14px var(--primary-glow); }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

.brand-name { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }

.brand-sub2 { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

.login-brand { display: flex; align-items: center; gap: 12px; justify-content: flex-start; margin-bottom: 6px; padding-top: 4px; }

.login-logo, .sidebar-logo-img, .sidebar-title { display: none; }

.sidebar-header { height: var(--topbar-height); display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border-color); }



/* ===== 语言切换器（自定义下拉 + 国家代码色块） ===== */

.lang-dd { position: relative; }

.lang-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: var(--transition); }

.lang-btn:hover, .lang-btn:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

.lang-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lang-caret { font-size: 10px; color: var(--text-tertiary); }

.flag-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 16px; border-radius: 3px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; flex-shrink: 0; }

.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 184px; background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 200; max-height: 340px; overflow-y: auto; }

.lang-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: var(--transition); }

.lang-opt:hover { background: var(--bg-hover); color: var(--text-primary); }

.lang-opt.on { color: var(--primary); background: var(--primary-light); }

.lang-opt-name { flex: 1; }

.lang-check { color: var(--primary); font-size: 12px; }



/* ===== 工单管理（表格化 + SLA） ===== */

.wo-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.wo-scope-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-page); border: 1px solid var(--border-color); border-radius: 10px; padding: 7px 12px; margin-bottom: 12px; }

.wo-scope-hint .scope-badge { display: inline-flex; align-items: center; gap: 4px; background: #E6F1FB; color: #0E6BFF; font-weight: 500; font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

.wo-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.wo-filters .sel, .wo-filters .inp { width: auto; min-width: 128px; margin: 0; }

.chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }

.wo-search { display: flex; gap: 10px; align-items: center; }

.wo-search .inp { flex: 1; min-width: 220px; margin: 0; }

.wo-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }

.wo-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 18px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; }

.wo-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border-color); }

.wo-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }

.wo-stat.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

.wo-stat-val { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; }

.wo-stat-lab { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.wo-stat.st-pending::before { background: var(--warning); }

.wo-stat.st-proc::before { background: var(--primary); }

.wo-stat.st-od::before { background: var(--danger); }

.wo-stat.st-od .wo-stat-val { color: var(--danger); }

.wo-stat.st-closed::before { background: var(--success); }

@media (max-width: 1100px) { .wo-stats { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 680px) { .wo-stats { grid-template-columns: repeat(2, 1fr); } }

.wo-table { font-size: 13px; }

.wo-table th { white-space: nowrap; }

.wo-table td { vertical-align: middle; }

.wo-title { font-weight: 500; color: var(--text-primary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wo-table tbody tr { cursor: pointer; }

.sla-cell { min-width: 132px; }

.sla-bar { height: 6px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }

.sla-bar span { display: block; height: 100%; border-radius: 4px; transition: width .3s; }

.sla-lab { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; white-space: nowrap; }

.sla-cell.overdue .sla-lab { color: var(--danger); font-weight: 600; }



/* ===== 新建工单表单 ===== */

.create-panel { max-width: 820px; }

.create-grid { grid-template-columns: 1fr 1fr; gap: 16px 18px; }

.create-grid label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); align-items: flex-start; }

.create-grid label.req::after { content: ' *'; color: var(--danger); margin-left: 2px; }

.create-grid .combo, .create-grid .inp, .create-grid .sel { width: 100%; height: 40px; box-sizing: border-box; }

.create-grid textarea.inp { height: auto; }

.combo { width: 100%; }

.att-block { margin-top: 6px; padding: 12px; border: 1px dashed var(--border-color); border-radius: 10px; background: var(--bg-soft); }

.att-head { font-weight: 600; margin-bottom: 8px; }

.att-head .muted { font-weight: 400; }

.att-prev { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bg); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; max-width: 160px; }



/* ===== 工单详情：处理 / 流转面板 ===== */

.inline-panel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-soft); }

.inline-panel.hidden { display: none; }

.inline-panel .inp, .inline-panel .sel { width: 100%; box-sizing: border-box; margin-bottom: 8px; }

.inline-panel label.mini { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }

/* 工单筛选-可选标签：浅色/深色模式均清晰（描边+主色文字，选中实底） */

.chip-row .chip { border: 1px solid var(--border-color); background: var(--bg-card-solid); color: var(--text-secondary); border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; transition: .15s; }

.chip-row .chip:hover { border-color: var(--primary); color: var(--primary); }

.chip-row .chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.att-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; }

.att-ico { font-size: 18px; }

.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.att-list { display: flex; flex-wrap: wrap; gap: 10px; }

.att-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; text-decoration: none; color: var(--text-primary); font-size: 13px; max-width: 220px; }

.att-item:hover { border-color: var(--primary); }

.att-item .att-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }

@media (max-width: 720px) { .create-grid { grid-template-columns: 1fr; } }



/* ===== 智能调度（细化） ===== */

.disp-wo { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; margin-bottom: 14px; }

.disp-wo-h { display: flex; align-items: center; gap: 10px; }

.disp-wo-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 8px 0; }

.disp-wo-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-secondary); }

.disp-wo-meta b { color: var(--text-primary); font-weight: 500; }

.disp-wo-meta .overdue b { color: var(--danger); }

.cand-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

.cand-dept { font-size: 12px; color: var(--text-secondary); background: var(--bg-hover); padding: 2px 8px; border-radius: 10px; }

.dot { font-size: 11px; padding: 2px 8px; border-radius: 10px; }

.dot.on { background: rgba(0, 180, 42, 0.14); color: var(--success); }

.dot.off { background: var(--bg-hover); color: var(--text-tertiary); }

.cand-factors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.fac { font-size: 11px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--border-color); color: var(--text-tertiary); background: var(--bg-hover); }

.fac.hit { color: var(--success); border-color: rgba(0, 180, 42, 0.4); background: rgba(0, 180, 42, 0.10); }

.fac.miss { opacity: 0.65; }

.cand-score-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.score-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--bg-hover); overflow: hidden; max-width: 220px; }

.score-bar span { display: block; height: 100%; background: linear-gradient(90deg, #00C8C8, #009999); border-radius: 5px; }

.cand-score { font-size: 18px; font-weight: 700; color: var(--info); }



/* ===== 首页看板（与原型一致） ===== */

.dashboard-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 20px; }

.metric-card { background: var(--bg-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; transition: var(--transition); cursor: pointer; }

.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-light); }

.metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); }

.metric-card.success::before { background: var(--success); }

.metric-card.warning::before { background: var(--warning); }

.metric-card.danger::before { background: var(--danger); }

.metric-card.info::before { background: var(--info); }

.metric-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }

.metric-icon.blue { background: var(--primary-light); color: var(--primary); }

.metric-icon.green { background: rgba(0, 180, 42, 0.15); color: var(--success); }

.metric-icon.orange { background: rgba(255, 125, 0, 0.15); color: var(--warning); }

.metric-icon.red { background: rgba(245, 63, 63, 0.15); color: var(--danger); }

.metric-icon.purple { background: rgba(114, 46, 209, 0.15); color: var(--info); }

.metric-value { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; }

.metric-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

.metric-trend { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 8px; }

.metric-trend.up { color: var(--success); }

.metric-trend.down { color: var(--danger); }

.dashboard-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }

.dashboard-charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.chart-container { height: 280px; position: relative; }



/* ===== 统计报表 · 看板（kanban） ===== */

.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.kanban-col { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.kanban-col-h { font-size: 13px; font-weight: 600; color: var(--text-primary); padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; }

.kanban-col-h::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--primary); }

.kanban-tile { background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; transition: var(--transition); }

.kanban-tile:hover { border-color: var(--primary); }

.kanban-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }

.kanban-tile.ok::before { background: var(--success); }

.kanban-tile.warn::before { background: var(--warning); }

.kanban-tile.danger::before { background: var(--danger); }

.kt-val { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.1; font-family: var(--font-mono, monospace); }

.kt-sub { font-size: 12px; font-weight: 500; color: var(--text-secondary); font-family: var(--font-sans, inherit); }

.kt-label { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 640px) { .kanban { grid-template-columns: 1fr; } }



/* ===== 工单详情（西门子工业控制台 HMI） ===== */

.wo-detail { max-width: 1240px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; gap: 12px; }

.detail { height: 100%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }



/* 控制台式头部 */

.wo-head { display: flex; align-items: center; gap: 16px; margin-bottom: 0; flex-wrap: wrap;

  background: linear-gradient(180deg, var(--bg-elev), var(--bg-card)); border: 1px solid var(--border-color);

  border-left: 3px solid var(--primary); border-radius: var(--radius-lg); padding: 12px 18px; }

.wo-head-info { flex: 1; min-width: 220px; }

.wo-head-id { font-size: 12px; color: var(--steel); margin-bottom: 4px; font-family: var(--font-mono); letter-spacing: 0.5px; }

.wo-head-id b { color: var(--primary); font-weight: 600; }

.wo-head-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--text-primary); line-height: 1.3; }

.wo-head-status { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }

.wo-sla-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 600;

  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-soft); color: var(--text-secondary); }

.wo-sla-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

.wo-sla-pill.warn { color: var(--warning); border-color: rgba(255,176,32,0.35); background: var(--warning-dim); }

.wo-sla-pill.warn .dot { background: var(--warning); }

.wo-sla-pill.od { color: var(--danger); border-color: rgba(255,92,92,0.35); background: var(--danger-dim); }

.wo-sla-pill.od .dot { background: var(--danger); }



/* 概览横条（顶部，满载关键指标） */

.wo-overview-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;

  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 12px 18px; }

.ov-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ov-item.ov-sla { flex: 1; min-width: 220px; }

.ov-k { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.5px; }

.ov-v { font-size: 14px; color: var(--text-primary); font-weight: 500; }

.wo-sla-meter { margin-top: 4px; }

.wo-sla-meter .wo-sla-cap { display: none; }



/* 主体两栏（信息 | 进度），内部各自滚动，页面不滚动 */

.wo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.wo-col-left { display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }

.wo-col-right { display: flex; flex-direction: column; gap: 12px; }

.wo-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.wo-info-grid .kv { border-bottom: 1px solid var(--border-color); }

.wo-progress-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.wo-progress-card .card-header { flex-shrink: 0; }

.wo-progress-card .timeline { flex: 1; min-height: 0; overflow-y: auto; margin-top: 4px; }



/* 操作栏（底部） */

.wo-act-bar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;

  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 10px 14px; flex-shrink: 0; }

.wo-act-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.wo-act-btns .btn { min-width: 110px; justify-content: center; }

.wo-act-bar .inline-panel { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 30;

  background: var(--bg-card-solid); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-lg); }



/* 流程步骤条（流转主视觉） */

.wo-steps { display: flex; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 22px; margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; }

.wo-step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; min-width: 78px; }

.wo-step-dot { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;

  background: var(--bg-soft); border: 2px solid var(--border-light); color: var(--text-tertiary); z-index: 1; transition: var(--transition); }

.wo-step-label { font-size: 12px; margin-top: 8px; color: var(--text-secondary); white-space: nowrap; }

.wo-step-line { position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: var(--border-light); z-index: 0; border-radius: 2px; }

.wo-step-done .wo-step-dot { background: var(--success); border-color: var(--success); color: #04210F; }

.wo-step-done .wo-step-label { color: var(--text-primary); }

.wo-step-done .wo-step-line { background: var(--success); }

.wo-step-active .wo-step-dot { background: var(--primary); border-color: var(--primary); color: #04201F; box-shadow: 0 0 0 5px var(--primary-glow); }

.wo-step-active .wo-step-label { color: var(--primary); font-weight: 700; }



/* 侧栏遥测面板 */

.wo-overview .kv:last-child { border-bottom: none; }

.wo-sla-meter { margin-top: 6px; }

.wo-sla-track { height: 8px; background: var(--bg-soft); border-radius: 5px; overflow: hidden; border: 1px solid var(--border-color); }

.wo-sla-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--success), #7EE0A8); transition: width 0.4s ease; }

.wo-sla-fill.warn { background: linear-gradient(90deg, var(--warning), #FFD27A); }

.wo-sla-fill.od { background: linear-gradient(90deg, var(--danger), #FF9A9A); }

.wo-sla-cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); margin-top: 6px; font-family: var(--font-mono); }

.sat-done { padding: 16px; color: var(--text-primary); font-size: 15px; letter-spacing: 1px; }



/* ===== 智能调度（易用性提升 + 提示说明） ===== */

.dispatch { max-width: 1100px; margin: 0 auto; }

.dispatch-tip { background: var(--primary-dim); border: 1px solid rgba(0,200,200,0.25); border-radius: var(--radius-lg); padding: 12px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }

.dispatch-tip b { color: var(--primary); }

.dispatch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.dispatch-or { color: var(--text-tertiary); font-size: 13px; }

.dispatch-pending { margin-top: 20px; }



/* 门户进度卡片内嵌步骤条（紧凑） */

.row-card .wo-steps { padding: 10px 12px; margin: 8px 0; border-radius: 8px; }

.row-card .wo-step { min-width: 56px; flex: 1; }

.row-card .wo-step-dot { width: 22px; height: 22px; font-size: 11px; }

.row-card .wo-step-label { font-size: 11px; }

.row-card .wo-step-line { top: 11px; }



/* ===== 知识库（1:1 还原：分类树 + 文档网格 + 预览） ===== */

.kb { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; max-width: 1200px; margin: 0 auto; }

.kb-side { background: var(--bg-card-solid); border: 1px solid var(--border-color); border-radius: var(--radius-lg); align-self: stretch; }

.kb-side-inner { position: sticky; top: 16px; padding: 16px 14px; }

.kb-side-title { font-weight: 700; font-size: 15px; color: var(--text-primary); margin-bottom: 14px; padding: 0 2px; }

.kb-cats { display: flex; flex-direction: column; gap: 4px; }

.kb-cat { padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: var(--transition); }

.kb-cat:hover { background: var(--bg-hover); color: var(--text-primary); }

.kb-cat.on { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.kb-cat-n { font-size: 11px; background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: 10px; padding: 1px 8px; color: var(--text-secondary); }

.kb-cat.on .kb-cat-n { background: #fff; color: var(--primary); border-color: transparent; }

.kb-cat-group { font-size: 11px; color: var(--text-secondary); margin: 16px 0 6px; padding: 0 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

.kb-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }

.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.kb-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; gap: 8px; }

.kb-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }

.kb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.kb-card-title { font-weight: 600; color: var(--text-primary); font-size: 14px; }

.kb-card-meta { font-size: 12px; color: var(--text-secondary); }

.kb-wo-src { color: var(--info); }

.kb-wo-src b { font-weight: 600; }

.kb-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.kb-tag { display: inline-flex; align-items: center; font-size: 11px; color: var(--info); background: var(--info-dim); border-radius: 999px; padding: 1px 9px; }

.kb-wo-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }

.kb-wo-link:last-child { border-bottom: none; }

.kb-wo-link .link { font-weight: 500; }

/* ===== 工单转知识库（单条/批量导入弹框） ===== */

.kbwo-pane { padding-top: 10px; }

.kbwo-list { background: var(--bg-card); }

.kbwo-item:hover { background: var(--bg-hover); border-radius: 6px; }

.kbwo-item input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; }



/* ===== 统计报表（布局重构：顶部概览 / 中部图表 / 底部明细，响应式） ===== */

.stats-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }

.stats-toolbar .filter-input, .stats-toolbar .filter-select { height: 32px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card-solid); color: var(--text-primary); font-size: 13px; }

.stats-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }

.stats-group .stats-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.stats-tile { background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; }

.stats-tile .st-val { font-size: 22px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }

.stats-tile .st-sub { font-size: 12px; font-weight: 400; color: var(--text-secondary); }

.stats-tile .st-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.stats-tile.ok { border-color: rgba(18, 183, 106, 0.45); background: rgba(18, 183, 106, 0.06); }

.stats-tile.ok .st-val { color: var(--success); }

.stats-tile.warn { border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.07); }

.stats-tile.warn .st-val { color: var(--warning); }

.stats-tile.danger { border-color: rgba(255, 92, 92, 0.5); background: rgba(255, 92, 92, 0.07); }

.stats-tile.danger .st-val { color: var(--danger); }

.stats-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }

.stats-charts .chart-container { height: 240px; }

.stats-table { margin-bottom: 20px; }

.stats-table .table-wrapper { border: none; border-radius: 0; }

@media (max-width: 1200px) { .stats-overview { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { .stats-overview, .stats-charts { grid-template-columns: 1fr; } .stats-group .stats-tiles { grid-template-columns: repeat(2, 1fr); } }

.kb-card-foot { display: flex; gap: 14px; margin-top: auto; padding-top: 6px; }

.kb-card-foot .danger { color: var(--danger); }

.modal-lg { width: 680px; max-width: 94vw; }

.kb-view-body { padding: 4px 0; color: var(--text-primary); }

.kb-content { margin-top: 12px; padding: 16px; background: var(--bg-hover); border: 1px solid var(--border-light); border-radius: 8px; white-space: pre-wrap; font-size: 13px; line-height: 1.7; color: var(--text-primary); max-height: 50vh; overflow: auto; }

.scope.public { background: rgba(0,180,42,0.12); color: var(--success); }

.scope.private { background: rgba(114,46,209,0.12); color: var(--info); }



/* 知识库上传弹窗：本地文件 / 文件夹 + 云盘关联 */

.kb-tabs { display: flex; gap: 8px; margin-bottom: 16px; }

.kb-tab-btn { flex: 1; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: var(--transition); }

.kb-tab-btn:hover { border-color: var(--primary); color: var(--primary); }

.kb-tab-btn.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.kb-drop { border: 1.5px dashed var(--border-color); border-radius: var(--radius-lg); padding: 22px; text-align: center; cursor: pointer; transition: var(--transition); color: var(--text-secondary); background: var(--bg-soft); }

.kb-drop:hover, .kb-drop.on { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

.kb-drop-ico { font-size: 30px; }

.kb-drop-tip { font-size: 13px; margin: 8px 0 12px; }

.kb-drop-btns { display: flex; gap: 10px; justify-content: center; }

.kb-filelist { margin: 12px 0; max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }

.kb-file { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 13px; }

.kb-file-ico { font-size: 16px; flex-shrink: 0; }

.kb-file-name { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kb-file-size { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }

.kb-file-del { color: var(--text-tertiary); cursor: pointer; flex-shrink: 0; padding: 0 4px; }

.kb-file-del:hover { color: var(--danger); }

.kb-card-storage { margin-top: 2px; }

.kb-store { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 10px; }

.kb-store.local { background: var(--bg-hover); color: var(--text-secondary); }

.kb-store.cloud { background: var(--primary-light); color: var(--primary); }



@media (max-width: 900px) {

  .wo-grid { grid-template-columns: 1fr; }

  .wo-info-grid { grid-template-columns: 1fr; }

  .kb { grid-template-columns: 1fr; }

  .kb-side { position: static; align-self: auto; }

  .kb-side-inner { position: static; padding: 14px; }

}



/* ===== 汉堡按钮（移动端显示） ===== */

.hamburger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 18px; cursor: pointer; flex-shrink: 0; }

.hamburger:hover, .hamburger:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }



/* ===== 顶部加载进度条（缺陷13） ===== */

#loadingBar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--primary), #3DD68C); z-index: 500; opacity: 0; transition: opacity .2s ease; }

#loadingBar.active { opacity: 1; animation: loadingPulse 1.1s ease-in-out infinite; }

@keyframes loadingPulse { 0% { width: 15%; } 50% { width: 85%; } 100% { width: 15%; } }



/* ===== 错误提示样式（缺陷17） ===== */

.toast-error { background: #d4380d; box-shadow: 0 6px 20px rgba(212,56,13,.35); font-weight: 500; }



/* ===== 移动端抽屉式侧栏（缺陷15） ===== */

@media (max-width: 768px) {

  .hamburger { display: flex; }

  .sidebar {

    position: fixed; top: 0; left: 0; height: 100vh; z-index: 200;

    width: 260px; max-width: 82vw; flex-direction: column;

    transform: translateX(-100%); transition: transform .25s ease;

    box-shadow: 0 0 30px rgba(0,0,0,.3);

  }

  .sidebar.open { transform: translateX(0); }

  .app.guest .sidebar { display: none; }

  .sidebar-header { display: flex; }

  .nav { flex-direction: column; }

  .nav-group-label { display: block; }

  .main { width: 100%; }

}



/* ===== 客户门户「我的工单」：支付 / 内联评价 操作区 ===== */

.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }

.btn.sm { padding: 5px 12px; font-size: 12px; line-height: 1.4; }

.star { font-size: 20px; line-height: 1; color: var(--warning); }

.star-off { color: var(--text-tertiary); }



/* ===== 智能调度台：责任人能力看板 ===== */

.tech-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card-solid); }

.tech-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.tech-name { font-weight: 700; font-size: 14px; }

.tech-meta { font-size: 12px; color: var(--text-secondary); }

.tech-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }

.tech-load { font-size: 12px; color: var(--text-tertiary); }



/* ===== 系统配置：SLA 时效配置表 + 小输入框 ===== */

.form-input.sm { width: 90px; padding: 6px 8px; font-size: 13px; }

.cfg-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }

.cfg-tbl th, .cfg-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: left; }

.cfg-tbl th { background: var(--bg-soft); color: var(--text-secondary); font-weight: 600; }

.cfg-tbl tbody tr:hover { background: var(--bg-soft); }

.cfg-tbl .form-input.sm { width: 84px; }



/* ===== KC-FIX-LAYOUT: 工单表 客户3字一行 / 标题完整 / SLA状态分开 / 居中 ===== */

.wo-table th, .wo-table td { text-align: center; }                 /* 表头+单元格水平居中 */

.wo-table td { vertical-align: middle; }                          /* 垂直居中（保留） */

.wo-title {                                                        /* 标题完整：去掉截断，允许换行 */

  white-space: normal !important;

  overflow: visible !important;

  text-overflow: clip !important;

  word-break: break-word !important;

  max-width: 320px;

}

.wo-cust {                                                         /* 客户列锁宽 -> 配合 fmtCust 每3字断行 */

  max-width: 54px !important;

  min-width: 54px !important;

  width: 54px !important;

  white-space: normal !important;

  word-break: break-all !important;

  text-align: center !important;

  vertical-align: middle !important;

  padding: 6px 3px !important;

}

.wo-table tbody td:nth-child(7), .wo-table thead th:nth-child(7) { min-width: 150px !important; } /* SLA 列加宽 */

.wo-table tbody td:nth-child(8), .wo-table thead th:nth-child(8) { min-width: 96px !important; white-space: nowrap !important; } /* 状态列加宽不换行 */

/* KC-FIX-LAYOUT END */

/* === v41: 待办窗口(dt-win,加载时判定一次全程保留)=整页可滚+14px滚动条；仅详情页(dt-detail,随路由切换)=隐藏侧栏；钉钉应用界面零改动 === */
.dt-win, .dt-win body { overflow-y: auto !important; overflow-x: auto !important; height: auto !important; min-height: 100vh !important; }
.dt-win .app { height: auto !important; min-height: 100vh; overflow: visible !important; width: 100% !important; }
.dt-win .view { overflow: visible !important; max-height: none !important; padding: 14px 16px; }
.dt-win .detail { overflow: visible !important; max-height: none !important; }
.dt-win .wo-detail { max-width: 100% !important; }
.dt-win .topbar { padding: 8px 14px; }
.dt-win ::-webkit-scrollbar { width: 14px !important; height: 14px !important; -webkit-appearance: none; }
.dt-win ::-webkit-scrollbar-track { background: rgba(127,127,127,0.18); border-radius: 7px; }
.dt-win ::-webkit-scrollbar-thumb { background: #8f959e !important; border-radius: 7px; border: 3px solid transparent; background-clip: content-box; }
.dt-win ::-webkit-scrollbar-thumb:hover { background: #6d737c !important; background-clip: content-box; }
/* 非详情页：侧栏钉在左侧不跟内容滑走（桌面宽度才启用） */
@media (min-width: 901px) {
  .dt-win .sidebar { position: fixed !important; left: 0 !important; top: 0 !important; height: 100vh !important; }
  .dt-win .main { margin-left: var(--sidebar-width) !important; }
  .dt-win.dt-detail .main { margin-left: 0 !important; }
}
/* 详情页：隐藏侧栏与汉堡按钮 */
.dt-win.dt-detail .sidebar { display: none !important; }
.dt-win.dt-detail .hamburger { display: none !important; }
.dt-win.dt-detail .topbar::after { content: "v41"; margin-left: 10px; padding: 1px 8px; font-size: 10px; color: #888; border: 1px solid #ccc; border-radius: 10px; white-space: nowrap; }

.login-head { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 20px; }

.login-logo-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--primary); color: #04201F; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex: none; }

.login-title-wrap { text-align: left; }

.login-title { font-size: 18px; font-weight: 700; color: #E6EDF3; letter-spacing: 1px; }

.login-title-sub { font-size: 11px; color: var(--primary); letter-spacing: 2px; margin-top: 3px; }

.login-welcome { font-size: 15px; font-weight: 600; color: #E6EDF3; text-align: center; }

.login-card-sub { font-size: 12px; color: #7FA8AC; text-align: center; margin: 6px 0 22px; }

.login-other { display: flex; align-items: center; gap: 10px; color: #3E6A6E; font-size: 11px; margin: 18px 0 12px; }

.login-other::before, .login-other::after { content: ''; flex: 1; border-top: 1px solid #1F4448; }

.login-demo { display: none !important; }