/* ============================================================
   LUXINTEL V3 · 设计令牌 (Design Tokens)
   风格：简约 · 科技 · 易读  ·  深色科技底 + 青蓝强调
   ============================================================ */
:root{
  --bg-0:#0a0f16; --bg-1:#0f1620; --bg-2:#141d29; --bg-3:#1b2735; --bg-4:#243244;
  --line:#243244; --line-soft:#1a2532;
  --txt-0:#eef4f9; --txt-1:#aebccb; --txt-2:#6f8296; --txt-3:#4a5b6e;
  --acc:#31c8ff; --acc-2:#0aa5e0; --acc-soft:rgba(49,200,255,.12); --acc-line:rgba(49,200,255,.35);
  --ok:#38d39f; --ok-soft:rgba(56,211,159,.14);
  --warn:#ffb454; --warn-soft:rgba(255,180,84,.14);
  --err:#ff6b6b; --err-soft:rgba(255,107,107,.14);
  --info:#7aa2ff; --info-soft:rgba(122,162,255,.14); --purple:#b98cff;
  --role-customer:#31c8ff; --role-supplier:#38d39f; --role-competitor:#ffb454;
  --role-multi:#b98cff; --role-person:#ffd166; --role-product:#5b8cff;
  --role-project:#ff6b6b; --role-standard:#8aa0b3;
  --r-s:6px; --r-m:10px; --r-l:16px; --r-pill:999px;
  --sh-2:0 6px 24px rgba(0,0,0,.35);
  --font:'Inter','Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);
  background:radial-gradient(1200px 600px at 80% -10%,rgba(49,200,255,.08),transparent 60%),var(--bg-1);
  color:var(--txt-0);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand .logo{width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));display:grid;place-items:center;font-weight:800;color:#04222e}
.brand b{font-size:16px;letter-spacing:.5px}
.brand span{font-size:11px;color:var(--txt-2);display:block}
.nav-group{margin:14px 0 6px;padding:0 8px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-3)}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
  color:var(--txt-1);font-size:13px;margin:2px 0;transition:.15s}
.nav a .i{width:16px;text-align:center;opacity:.85}
.nav a:hover{background:var(--bg-3);color:var(--txt-0)}
.nav a.on{background:var(--acc-soft);color:var(--acc);box-shadow:inset 2px 0 0 var(--acc)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:58px;display:flex;align-items:center;gap:14px;padding:0 22px;
  border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(15,22,32,.82);backdrop-filter:blur(10px);z-index:20}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;color:var(--txt-2)}
.search input{background:none;border:none;outline:none;color:var(--txt-0);width:100%;font-size:13px}
.tb-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt-1);cursor:pointer;position:relative}
.tb-btn:hover{color:var(--acc);border-color:var(--acc-line)}
.dot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--err);color:#fff;font-size:10px;display:grid;place-items:center;font-weight:700}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2a3b4f,#405a75);
  display:grid;place-items:center;font-weight:700;color:var(--txt-0);font-size:13px}
.content{padding:22px;overflow:auto}

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:20px;font-weight:700}
.page-head .sub{color:var(--txt-2);font-size:12px;margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-s);
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt-0);font-size:13px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--acc-line)}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc-2));border:none;color:#04222e;font-weight:600}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12px}

.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-h h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-h .tools{display:flex;gap:6px;color:var(--txt-2)}
.card-h .tools span{cursor:pointer;padding:2px 6px;border-radius:5px}
.card-h .tools span:hover{background:var(--bg-3);color:var(--acc)}

.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px}
.kpi .n{font-size:24px;font-weight:800;font-family:var(--mono)}
.kpi .l{font-size:11px;color:var(--txt-2);margin-top:2px}
.kpi .d{font-size:11px;margin-top:6px}
.up{color:var(--ok)} .down{color:var(--err)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;background:var(--bg-3);color:var(--txt-1);border:1px solid var(--line)}
.badge.acc{background:var(--acc-soft);color:var(--acc);border-color:var(--acc-line)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.err{background:var(--err-soft);color:var(--err);border-color:transparent}
.badge.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.badge.ai{background:rgba(185,140,255,.14);color:var(--purple);border-color:transparent}
.tag{display:inline-flex;padding:2px 8px;border-radius:var(--r-s);font-size:11px;
  background:var(--bg-3);color:var(--txt-1);border:1px solid var(--line)}
.tag.brand{color:#8fd4ff}.tag.cat{color:#8affc0}.tag.app{color:#ffd08a}

table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{text-align:left;color:var(--txt-2);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--line)}
table.grid td{padding:11px 12px;border-bottom:1px solid var(--line-soft)}
table.grid tr:hover td{background:var(--bg-3)}
.flag{width:20px;height:14px;border-radius:2px;display:inline-block;vertical-align:middle;
  background:var(--bg-4);font-size:9px;text-align:center;line-height:14px;color:var(--txt-1);font-weight:700}

.pill-tabs{display:flex;gap:6px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px;width:fit-content}
.pill-tabs a{padding:6px 14px;border-radius:var(--r-pill);font-size:12px;color:var(--txt-1);cursor:pointer}
.pill-tabs a.on{background:var(--acc);color:#04222e;font-weight:600}

.progress{height:6px;background:var(--bg-4);border-radius:6px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-2))}

.muted{color:var(--txt-2)}.mono{font-family:var(--mono)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media(max-width:1200px){.kpi-row{grid-template-columns:repeat(3,1fr)}.col-4,.col-6,.col-8{grid-column:span 12}}