/* ============================================================
   四海纵横 · 企业工作台
   深蓝 + 主蓝，卡片化，对齐参考版式
   ============================================================ */
:root {
  --ink:#0B2A4A;
  --ink-2:#123F68;
  --brand:#1668B8;
  --brand-d:#12599F;
  --bg:#F4F7FB;
  --card:#FFFFFF;
  --line:#E3EAF3;
  --line-soft:#EEF3F9;
  --txt:#0B2A4A;
  --txt-2:#415970;
  --txt-3:#6B7A8D;
  --faint:#8E9CAE;
  --green:#0F7B5F;
  --amber:#B8760F;
  --red:#C0392B;
  --shadow:0 1px 3px rgba(11,42,74,.07);
  --shadow-lg:0 12px 32px rgba(11,42,74,.13);
  --r:12px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:"Segoe UI","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  background:var(--bg); color:var(--txt); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
h1,h2,h3,h4 { margin:0; font-weight:600; }
input, select, textarea { font-family:inherit; }

::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:rgba(11,42,74,.16); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:rgba(11,42,74,.28); }

/* ============================ 登录页 ============================ */
.login-page { display:flex; min-height:100vh; }

.brand-pane {
  flex:0 0 48%; position:relative; overflow:hidden;
  background:linear-gradient(155deg,#061B31 0%,#0B2A4A 46%,#12456F 100%);
  color:#fff; display:flex; flex-direction:column;
  padding:44px 52px;
}
/* 背景光晕 + 圆环 */
.brand-pane::before {
  content:''; position:absolute; width:720px; height:720px; border-radius:50%;
  right:-300px; top:-220px;
  background:radial-gradient(circle,rgba(78,155,220,.28) 0%,rgba(78,155,220,.06) 42%,transparent 68%);
}
.brand-pane::after {
  content:''; position:absolute; width:560px; height:560px; border-radius:50%;
  right:-160px; bottom:-260px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 120px rgba(78,155,220,.10);
}
.brand-pane > * { position:relative; z-index:1; }

.bp-logo { display:flex; align-items:center; gap:11px; }
.bp-logo .mark {
  width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:8px;
}
.bp-logo .mark i { background:#5FA8E8; border-radius:1.5px; display:block; }
.bp-logo .mark i:nth-child(2), .bp-logo .mark i:nth-child(3) { background:rgba(255,255,255,.55); }
.bp-logo .nm { font-size:16px; font-weight:700; letter-spacing:1.5px; line-height:1.15; }
.bp-logo .nm small {
  display:block; font-size:9.5px; letter-spacing:2.2px; font-weight:400;
  color:rgba(255,255,255,.45); margin-top:2px;
}

.bp-body { flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 0 30px; }

.bp-kicker {
  font-size:11.5px; letter-spacing:3px; color:#5FA8E8;
  font-weight:600; margin-bottom:20px;
}
.bp-title {
  font-size:42px; line-height:1.28; font-weight:800; letter-spacing:.5px;
  margin-bottom:20px;
}
.bp-title em { font-style:normal; color:#7FC0F2; }
.bp-sub {
  font-size:13.5px; line-height:1.95; color:rgba(255,255,255,.62);
  max-width:420px; margin-bottom:30px;
}
.bp-tags { display:flex; gap:9px; flex-wrap:wrap; }
.bp-tags span {
  font-size:10.5px; letter-spacing:1.4px; font-weight:600;
  padding:6px 13px; border-radius:7px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.72);
}
.bp-foot {
  padding-top:0;
  font-size:11px; line-height:1.85; color:rgba(255,255,255,.35);
}
.bp-foot b { display:block; color:rgba(255,255,255,.55); font-weight:600; margin-bottom:3px; }

.form-pane {
  flex:1; background:#fff; display:flex; align-items:center; justify-content:center;
  padding:44px 40px;
}
.form-box { width:100%; max-width:352px; }
.fb-kicker {
  font-size:10.5px; letter-spacing:2.6px; color:var(--faint);
  font-weight:700; margin-bottom:11px;
}
.fb-title { font-size:26px; font-weight:800; letter-spacing:.3px; margin-bottom:7px; }
.fb-sub { font-size:12.5px; color:var(--txt-3); margin-bottom:30px; }

.fld { margin-bottom:16px; }
.fld > label {
  display:block; font-size:12px; font-weight:600; color:var(--txt-2); margin-bottom:7px;
}
.fld input {
  width:100%; height:44px; border:1px solid var(--line); border-radius:9px;
  padding:0 13px; font-size:13.5px; color:var(--txt); background:#fff;
  outline:none; transition:.15s;
}
.fld input::placeholder { color:#B4C0CE; }
.fld input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(22,104,184,.11); }

.cap-row { display:flex; gap:10px; }
.cap-row input { flex:1; }
.cap-img {
  width:132px; height:44px; border-radius:9px; cursor:pointer; flex:0 0 132px;
  border:1px solid var(--line); display:block; background:#F2F7FC;
}

.btn-login {
  width:100%; height:46px; border:0; border-radius:9px; margin-top:9px;
  background:var(--brand); color:#fff; font-size:14px; font-weight:700;
  letter-spacing:2px; transition:.16s;
  box-shadow:0 6px 18px rgba(22,104,184,.24);
}
.btn-login:hover { background:var(--brand-d); transform:translateY(-1px); box-shadow:0 9px 22px rgba(22,104,184,.30); }
.btn-login:active { transform:none; }

.form-tip {
  margin-top:16px; text-align:center; font-size:12px; color:var(--faint);
}
.form-tip a { color:var(--brand); font-weight:600; }
.form-status {
  margin-top:30px; padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--txt-3);
}
.form-status i {
  width:7px; height:7px; border-radius:50%; background:#22A06B;
  box-shadow:0 0 0 3px rgba(34,160,107,.16); display:block;
}

.alert {
  border-radius:9px; padding:11px 13px; font-size:12.5px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:8px; line-height:1.55;
}
.alert.err { background:#FDF1EF; color:#A93226; border:1px solid #F3CFC9; }
.alert.ok  { background:#EDF8F3; color:#0B6B4F; border:1px solid #C4E6D8; }

/* ============================ 主框架 ============================ */
.shell { display:flex; min-height:100vh; }

.sidebar {
  width:236px; flex:0 0 236px; background:linear-gradient(180deg,#0B2A4A,#081F38);
  color:#fff; display:flex; flex-direction:column; padding:0 0 14px;
  position:sticky; top:0; height:100vh;
}
.sb-logo { padding:20px 20px 18px; display:flex; align-items:center; gap:10px; }
.sb-logo .mark {
  width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  display:grid; grid-template-columns:1fr 1fr; gap:2.5px; padding:7px; flex:0 0 30px;
}
.sb-logo .mark i { background:#5FA8E8; border-radius:1px; display:block; }
.sb-logo .mark i:nth-child(2), .sb-logo .mark i:nth-child(3) { background:rgba(255,255,255,.5); }
.sb-logo .nm { font-size:14px; font-weight:700; letter-spacing:1.3px; line-height:1.2; }
.sb-logo .nm small {
  display:block; font-size:8.5px; letter-spacing:1.8px;
  color:rgba(255,255,255,.40); font-weight:400; margin-top:1px;
}

.sb-group {
  padding:16px 20px 7px; font-size:10px; letter-spacing:1.5px; font-weight:600;
  color:rgba(255,255,255,.33); text-transform:uppercase;
}
.sb-item {
  display:flex; align-items:center; gap:10px; margin:1px 10px;
  padding:9px 11px; border-radius:8px; font-size:13px;
  color:rgba(255,255,255,.76); transition:.15s;
}
.sb-item svg { width:16px; height:16px; flex:0 0 16px; opacity:.75; }
.sb-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.sb-item.on { background:rgba(22,104,184,.92); color:#fff; font-weight:600; box-shadow:0 4px 14px rgba(22,104,184,.30); }
.sb-item.on svg { opacity:1; }
.sb-item .cnt {
  margin-left:auto; font-size:10.5px; background:rgba(255,255,255,.16);
  padding:1px 6px; border-radius:6px;
}

.sb-user {
  margin:auto 12px 0; padding:11px; border-radius:10px;
  background:rgba(255,255,255,.07); display:flex; align-items:center; gap:9px;
}
.sb-user .av {
  width:31px; height:31px; border-radius:8px; flex:0 0 31px;
  background:linear-gradient(135deg,#2E7FC4,#1668B8);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff;
}
.sb-user .info { min-width:0; flex:1; }
.sb-user .nm { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user .rl { font-size:10.5px; color:rgba(255,255,255,.45); margin-top:1px; }
.sb-user .out {
  color:rgba(255,255,255,.42); display:flex; padding:4px; border-radius:5px; transition:.15s;
}
.sb-user .out:hover { color:#fff; background:rgba(255,255,255,.10); }
.sb-user .out svg { width:15px; height:15px; }

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

.topbar {
  height:54px; flex:0 0 54px; background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; position:sticky; top:0; z-index:20;
}
.crumb { font-size:12.5px; color:var(--faint); display:flex; align-items:center; gap:7px; }
.crumb b { color:var(--txt); font-weight:600; }
.tb-right { display:flex; align-items:center; gap:16px; }
.tb-link {
  font-size:12.5px; color:var(--txt-2); display:flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:7px; transition:.15s;
}
.tb-link:hover { background:var(--line-soft); color:var(--brand); }
.tb-link .dot {
  min-width:16px; height:16px; line-height:16px; border-radius:8px; background:var(--brand);
  color:#fff; font-size:10px; text-align:center; padding:0 4px; font-weight:700;
}

.content { flex:1; padding:30px 34px 52px; max-width:1280px; width:100%; }

/* ============================ 门户 ============================ */
.hero { margin-bottom:26px; }
.hero h1 { font-size:23px; letter-spacing:.2px; margin-bottom:7px; }
.hero h1 span { color:var(--brand); }
.hero p { margin:0; font-size:12.5px; color:var(--txt-3); }

.grp-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin:30px 0 14px;
}
.grp-head .en {
  font-size:10px; letter-spacing:1.9px; font-weight:700; color:var(--faint);
  margin-bottom:5px;
}
.grp-head .cn { font-size:15.5px; font-weight:700; letter-spacing:.2px; }
.grp-head .n { font-size:11.5px; color:var(--faint); }

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

.app-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 15px; display:flex; flex-direction:column;
  box-shadow:var(--shadow); transition:.18s; position:relative; min-height:172px;
}
.app-card:hover {
  border-color:#BFD8EF; box-shadow:0 8px 24px rgba(11,42,74,.10);
  transform:translateY(-2px);
}
.ac-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.ac-icon {
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:12.5px; font-weight:800;
  letter-spacing:.4px; flex:0 0 42px; box-shadow:0 4px 12px rgba(11,42,74,.14);
}
.ac-badge { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.ac-badge.on { color:var(--green); background:#EDF8F3; }
.ac-badge.off { color:var(--faint); background:#F1F4F8; }
.ac-name { font-size:15px; font-weight:700; margin-bottom:6px; letter-spacing:.2px; }
.ac-desc {
  font-size:12px; color:var(--txt-3); line-height:1.7; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ac-foot {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
}
.ac-tag {
  font-size:10px; letter-spacing:.9px; font-weight:700; color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:1.5px 6px;
}
.ac-go { font-size:12px; font-weight:600; color:var(--brand); display:flex; align-items:center; gap:3px; }
.app-card:hover .ac-go { gap:6px; }

/* 未授权 */
.app-card.locked { background:#FAFBFD; }
.app-card.locked .ac-icon { filter:grayscale(1); opacity:.42; box-shadow:none; }
.app-card.locked .ac-name { color:var(--txt-3); }
.app-card.locked .ac-go { color:var(--faint); }
.app-card.locked:hover { transform:none; border-color:var(--line); box-shadow:var(--shadow); }
.app-card.locked::after {
  content:'🔒'; position:absolute; right:18px; bottom:56px; font-size:13px; opacity:.35;
}

.empty-hint {
  background:var(--card); border:1px dashed var(--line); border-radius:var(--r);
  padding:44px 20px; text-align:center; color:var(--faint); font-size:13px;
}

/* ============================ 表格 / 管理 ============================ */
.page-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:20px; flex-wrap:wrap;
}
.page-head h1 { font-size:20px; margin-bottom:6px; }
.page-head p { margin:0; font-size:12.5px; color:var(--txt-3); }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden;
}
.card-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.card-head h2 { font-size:14px; }
.card-body { padding:18px; }

.btn {
  border:1px solid var(--line); background:#fff; color:var(--txt-2);
  height:34px; padding:0 14px; border-radius:8px; font-size:12.5px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:.15s; white-space:nowrap;
}
.btn:hover { border-color:var(--brand); color:var(--brand); background:#F5F9FD; }
.btn-pri { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.btn-pri:hover { background:var(--brand-d); border-color:var(--brand-d); color:#fff; }
.btn-sm { height:28px; padding:0 10px; font-size:12px; border-radius:6px; }
.btn-danger:hover { border-color:var(--red); color:var(--red); background:#FDF3F2; }
.btn-ghost { border-color:transparent; background:transparent; }
.btn-ghost:hover { background:var(--line-soft); }

table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th {
  text-align:left; font-size:11.5px; font-weight:600; color:var(--faint);
  padding:10px 14px; background:#F8FAFD; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.tbl td { padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:0; }
table.tbl tbody tr:hover { background:#FAFCFE; }
table.tbl .r { text-align:right; }

.who { display:flex; align-items:center; gap:9px; }
.who .av {
  width:30px; height:30px; flex:0 0 30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#2E7FC4,#1668B8);
}
.who > span:last-child { min-width:0; display:block; }
.who .nm { display:block; font-size:13px; font-weight:600; line-height:1.35; }
.who .un { display:block; font-size:11px; color:var(--faint); margin-top:2px; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }

.tag {
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:6px; white-space:nowrap;
}
.tag.boss { background:#E8F0F8; color:var(--brand); }
.tag.staff { background:#F1F4F8; color:var(--txt-3); }
.tag.on { background:#EDF8F3; color:var(--green); }
.tag.off { background:#FDF1EF; color:var(--red); }

.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:18px; }
.kpi {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; box-shadow:var(--shadow);
}
.kpi .l { font-size:11.5px; color:var(--faint); }
.kpi .v { font-size:25px; font-weight:700; margin-top:7px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .v small { font-size:12px; color:var(--faint); font-weight:500; margin-left:3px; }

/* 授权矩阵 */
.mx-scroll { overflow-x:auto; }
.mx {
  border-collapse:separate; border-spacing:0; font-size:12.5px;
  table-layout:fixed; width:100%; min-width:720px;
}
.mx col.c-name { width:206px; }
.mx col.c-act { width:104px; }
.mx th, .mx td { border-bottom:1px solid var(--line-soft); padding:0; }
.mx thead th {
  background:#F8FAFD; border-bottom:1px solid var(--line);
  padding:9px 6px; font-size:11.5px; font-weight:600; color:var(--faint);
  white-space:nowrap; text-align:center; position:sticky; top:0; z-index:2;
  vertical-align:bottom;
}
.mx thead th.grp {
  font-size:10px; letter-spacing:1.1px; color:var(--brand);
  background:#EEF5FC; padding:6px 4px; border-left:2px solid #fff;
  border-bottom:1px solid #E1EDF9;
}
.mx thead th.name { text-align:left; padding-left:18px; }
.mx tbody td.name { padding:9px 14px 9px 18px; background:#fff; }
.mx tbody td.cell { text-align:center; padding:6px 3px; }
.mx tbody tr:hover td { background:#FAFCFE; }
.mx tbody tr:hover td.name { background:#FAFCFE; }
.mx tfoot td { padding:8px 3px; background:#F8FAFD; font-size:11.5px; color:var(--faint); text-align:center; }

.ck {
  width:19px; height:19px; border-radius:5px; border:1.6px solid #CDD9E5;
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
  transition:.13s; padding:0; color:transparent;
}
.ck:hover { border-color:var(--brand); }
.ck.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.ck svg { width:11px; height:11px; }

/* 表单行 */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.form-grid .full { grid-column:1 / -1; }
.fl { display:flex; flex-direction:column; gap:6px; }
.fl > label { font-size:11.5px; font-weight:600; color:var(--txt-2); }
.fl input, .fl select, .fl textarea {
  height:36px; border:1px solid var(--line); border-radius:8px; padding:0 11px;
  font-size:13px; color:var(--txt); background:#fff; outline:none; transition:.15s; width:100%;
}
.fl input:focus, .fl select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(22,104,184,.10); }
.fl .help { font-size:11px; color:var(--faint); }
.color-row { display:flex; gap:8px; align-items:center; }
.color-row input[type=color] { width:42px; height:36px; padding:2px; cursor:pointer; }

/* 弹层 */
.modal-mask {
  position:fixed; inset:0; background:rgba(11,42,74,.42); z-index:200;
  display:none; align-items:flex-start; justify-content:center; padding:60px 20px 40px;
  overflow-y:auto;
}
.modal-mask.show { display:flex; }
.modal {
  background:#fff; border-radius:14px; width:100%; max-width:540px;
  box-shadow:var(--shadow-lg); animation:pop .18s ease;
}
@keyframes pop { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
.modal-head {
  padding:17px 20px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-head h3 { font-size:15px; }
.modal-head .x {
  border:0; background:transparent; font-size:19px; color:var(--faint);
  line-height:1; padding:2px 6px; border-radius:6px;
}
.modal-head .x:hover { background:var(--line-soft); color:var(--txt); }
.modal-body { padding:20px; }
.modal-foot {
  padding:14px 20px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:flex-end; gap:9px;
}

/* toast */
.toast-wrap { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:900; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:var(--ink); color:#fff; font-size:12.5px; padding:9px 17px; border-radius:9px; box-shadow:0 10px 26px rgba(11,42,74,.28); animation:pop .2s ease; }
.toast.ok { background:#0F7B5F; }
.toast.err { background:#C0392B; }

.flash-wrap { margin-bottom:16px; }

/* 空状态 / 错误页 */
.error-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:30px;
}
.error-box { text-align:center; max-width:420px; }
.error-box .code {
  font-size:64px; font-weight:800; color:#D9E4EF; letter-spacing:2px; line-height:1;
}
.error-box h1 { font-size:19px; margin:16px 0 9px; }
.error-box p { font-size:13px; color:var(--txt-3); line-height:1.8; margin:0 0 22px; }

@media (max-width:1080px) {
  .cards { grid-template-columns:repeat(2,1fr); }
  .kpi-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .brand-pane { display:none; }
  .sidebar { width:64px; flex:0 0 64px; }
  .sb-logo .nm, .sb-group, .sb-item span:not(.cnt), .sb-user .info { display:none; }
  .sb-item { justify-content:center; padding:11px 0; }
  .sb-user { justify-content:center; }
  .content { padding:20px 16px 40px; }
  .cards { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
}