:root {
  --brand: #246bfd;
  --brand-50: #f5f8ff;
  --brand-100: #eaf1ff;
  --ink: #151b26;
  --muted: #667085;
  --line: #e7ebf2;
  --bg: #f7f9fc;
  --card: #fff;
  --success: #22b87a;
  --warn: #f59e35;
  --danger: #ef4b5f;
  --purple: #8256e8;
  --shadow: 0 2px 12px rgba(16, 24, 40, .06);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 224px 1fr; }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 9px 14px; font-size: 21px; font-weight: 800; color: #1554d4; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; color: white; background: linear-gradient(135deg,#3b7cff,#1552d5); border-radius: 12px 12px 12px 3px; transform: rotate(-8deg); }
.brand small { display: block; font-size: 10px; color: #5682df; letter-spacing: 2px; font-weight: 600; }
.nav-group { display: grid; gap: 3px; }
.nav-label { color: #98a2b3; font-size: 11px; padding: 12px 11px 5px; }
.nav-item { display: flex; align-items: center; gap: 10px; background: transparent; color: #4c576b; padding: 10px 11px; border-radius: 9px; text-align: left; }
.nav-item:hover { background: #f4f7fc; }
.nav-item.active { background: var(--brand-100); color: var(--brand); font-weight: 700; }
.nav-icon { width: 18px; text-align: center; font-size: 16px; }
.nav-count { margin-left: auto; min-width: 19px; height: 19px; border-radius: 10px; background: #fff0f1; color: var(--danger); display: grid; place-items: center; font-size: 11px; }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 15px; }
.main { min-width: 0; }
.topbar { height: 72px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 30px; position: sticky; top: 0; z-index: 4; }
.mobile-menu { display: none; }
.search { margin-left: auto; width: min(320px, 26vw); position: relative; }
.search input { width: 100%; border: 1px solid var(--line); background: #fafbfc; padding: 10px 13px 10px 34px; border-radius: 8px; outline: none; }
.search:before { content: "⌕"; color: #98a2b3; font-size: 20px; position: absolute; top: 5px; left: 11px; }
.top-button, .primary, .secondary, .danger { padding: 9px 13px; border-radius: 8px; font-weight: 600; }
.primary, .top-button { color: white; background: var(--brand); box-shadow: 0 3px 8px rgba(36,107,253,.22); }
.secondary { background: #f1f4f9; color: #4c576b; }
.danger { background: #fff0f1; color: #d92d45; }
.avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: linear-gradient(135deg,#4d7ef7,#8159e8); }
.profile { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 600; }
.content { padding: 27px 30px 44px; max-width: 1800px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 23px; }
h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.4px; }
.subtle { color: var(--muted); margin: 0; line-height: 1.6; }
.role-select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: #fff; color: #344054; }
.kpis { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 16px; margin-bottom: 18px; }
.kpi, .panel, .task-card, .client-card { background: var(--card); border: 1px solid #edf0f5; box-shadow: var(--shadow); border-radius: 13px; }
.kpi { padding: 18px; min-height: 126px; position: relative; overflow: hidden; }
.kpi-top { display: flex; align-items: center; gap: 10px; color: #4b5568; }
.kpi-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--tint,#eaf1ff); color: var(--tone,var(--brand)); display: grid; place-items: center; font-size: 19px; }
.kpi-number { font-size: 31px; font-weight: 750; margin: 11px 0 2px 48px; letter-spacing: -1px; }
.kpi-meta { margin-left: 48px; color: #98a2b3; font-size: 12px; }.up { color: var(--success); }.hot { color: var(--danger); }
.grid-3 { display: grid; grid-template-columns: 1.05fr 1.35fr 1fr; gap: 16px; margin-bottom: 16px; }.grid-2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.panel { padding: 17px; min-width: 0; }.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 14px; }.panel-title { font-weight: 750; font-size: 15px; }.link { color: var(--brand); background: transparent; font-weight: 600; padding: 3px; }
.risk-row,.activity-row,.timeline-row,.approval-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #f0f2f6; }.risk-row:first-of-type,.activity-row:first-of-type,.timeline-row:first-of-type { border-top: 0; }
.dot { width: 22px; height: 22px; display:grid; place-items:center; color:#fff; font-size:11px; border-radius: 50%; flex: 0 0 auto; }.dot.red { background:var(--danger); }.dot.orange { background:var(--warn); }.dot.blue { background:var(--brand); }.dot.green { background:var(--success); }
.row-main { min-width:0; flex:1; }.row-title { font-weight:650; line-height:1.4; }.row-meta { font-size:12px; color:var(--muted); padding-top:3px; }.tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:5px; font-size:11px; font-weight:650; white-space:nowrap; }.tag.blue{color:#2165eb;background:#eaf1ff}.tag.green{color:#168b5c;background:#e6f7f0}.tag.orange{color:#d98210;background:#fff5e7}.tag.red{color:#d92d45;background:#fff0f1}.tag.purple{color:#6f46d8;background:#f1ecff}.tag.gray{color:#667085;background:#f2f4f7}
.compact-table { width:100%; border-collapse: collapse; }.compact-table th { text-align:left; color:#98a2b3; font-weight:500; background:#fafbfc; font-size:12px; padding:8px 7px; }.compact-table td { padding:10px 7px; border-bottom:1px solid #f0f2f6; }.compact-table tr:last-child td { border-bottom:0; }.mini-person { display:flex;align-items:center;gap:6px; }.mini-avatar { width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eaf1ff;color:var(--brand);font-size:10px;font-weight:bold; }
.load-row { display:grid; grid-template-columns:76px 1fr 33px; gap:8px; align-items:center; margin:13px 0; }.bar { background:#ecf0f5;height:8px;border-radius:8px;overflow:hidden; }.bar > span { display:block;height:100%;background:var(--bar,var(--brand));border-radius:inherit; }
.health-cards { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }.health {border:1px solid var(--line);border-radius:9px;padding:11px;}.health-top{display:flex;justify-content:space-between;align-items:center}.health-score{font-size:23px;font-weight:750;margin:8px 0}.metric{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding-top:5px}
.toolbar { display:flex;gap:8px;align-items:center; flex-wrap:wrap; margin-bottom:16px; }.filter { padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:7px; color:#4c576b; }.table-wrap { overflow:auto; }.data-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #edf0f5; box-shadow:var(--shadow); border-radius:12px; overflow:hidden; }.data-table th { text-align:left;background:#fafbfc;color:#667085;font-weight:600;padding:12px 14px;white-space:nowrap;font-size:12px; }.data-table td{padding:13px 14px;border-top:1px solid #edf0f5;vertical-align:middle;}.data-table tr:hover{background:#fbfcff}.actions{display:flex;gap:6px;}.small-btn{padding:6px 8px;border:1px solid var(--line);color:#445064;background:#fff;border-radius:6px;white-space:nowrap}.small-btn.primary-mini{background:var(--brand);color:#fff;border-color:var(--brand)}
.board { display:grid; grid-template-columns:repeat(4,minmax(235px,1fr)); gap:15px; align-items:start; overflow:auto; padding-bottom:10px; }.board-col { min-height:510px; background:#f0f3f8; border-radius:12px; padding:11px; }.board-head{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 11px;font-weight:700}.board-count{font-size:12px;color:var(--muted);background:#e4e8ef;padding:3px 7px;border-radius:10px}.task-card{padding:13px;margin-bottom:10px;border-radius:10px;box-shadow:none}.task-card:hover{border-color:#bfd2ff}.task-title{font-weight:700;line-height:1.5}.task-link{padding:0;background:transparent;color:var(--ink);text-align:left}.task-link:hover{color:var(--brand);text-decoration:underline}.task-client{font-size:12px;color:var(--muted);padding:7px 0}.task-foot{border-top:1px solid #f0f2f6;padding-top:9px;display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap}.deadline{font-size:12px;color:#667085}.deadline.late{color:var(--danger);font-weight:650}
.split {display:grid;grid-template-columns:340px 1fr;gap:16px}.client-list{display:grid;gap:10px}.client-card{padding:13px;box-shadow:none;cursor:pointer}.client-card.selected{border-color:var(--brand);background:#f9fbff}.client-name{font-weight:700}.client-meta{font-size:12px;color:var(--muted);margin-top:5px}.canvas { background:linear-gradient(#f0f4fa 1px,transparent 1px),linear-gradient(90deg,#f0f4fa 1px,transparent 1px),#fafcff;background-size:22px 22px;min-height:550px;border:1px solid var(--line);border-radius:13px;padding:25px;overflow:auto; }.flow {display:flex;gap:26px;align-items:center;min-width:850px}.flow-col{width:154px;position:relative}.flow-col:not(:last-child):after{content:'→';position:absolute;right:-21px;top:50%;font-size:22px;color:#a7b0c0}.flow-label{font-size:12px;color:#667085;font-weight:700;margin:0 0 8px}.flow-node{background:#fff;border:1px solid #dbe3ef;border-left:4px solid var(--brand);box-shadow:0 2px 5px rgba(16,24,40,.05);border-radius:8px;padding:10px;margin-bottom:12px}.flow-node.blocked{border-left-color:var(--danger)}.flow-node.done{border-left-color:var(--success)}.flow-node small{display:block;color:#667085;padding-top:5px}.report-card{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:11px}.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(21,27,38,.38);display:grid;place-items:center;padding:18px;z-index:10}.modal{width:min(620px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(16,24,40,.22);padding:22px}.modal h2{font-size:19px;margin:0 0 5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:19px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:650;color:#475467}.field input,.field select,.field textarea{border:1px solid #d8dee8;border-radius:8px;padding:9px 10px;outline:none;background:#fff}.field textarea{min-height:80px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.toast{position:fixed;right:25px;bottom:25px;background:#151b26;color:#fff;padding:12px 16px;border-radius:8px;box-shadow:var(--shadow);z-index:20;animation:slide .25s ease}.notice{background:#fff8e6;color:#915c00;padding:9px 11px;border-radius:7px;margin-top:13px;font-size:13px}@keyframes slide{from{transform:translateY(15px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1100px){.grid-3{grid-template-columns:1fr 1fr}.grid-3>.panel:last-child{grid-column:span 2}.kpis{grid-template-columns:repeat(2,1fr)}.health-cards{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:280px 1fr}}@media(max-width:760px){.shell{display:block}.sidebar{display:none;position:fixed;z-index:9;width:240px;box-shadow:var(--shadow)}.sidebar.open{display:flex}.topbar{height:62px;padding:0 14px}.mobile-menu{display:block;background:transparent;font-size:20px}.search{display:none}.content{padding:20px 14px 35px}.profile span{display:none}.top-button{padding:8px 10px;font-size:12px}.page-heading{align-items:flex-start;flex-direction:column}.kpis,.grid-3,.grid-2,.split{grid-template-columns:1fr}.grid-3>.panel:last-child{grid-column:auto}.board{grid-template-columns:repeat(4,260px)}.canvas{min-height:460px}.form-grid{grid-template-columns:1fr}.health-cards{grid-template-columns:repeat(2,1fr)}}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#eaf1ff,transparent 45%),var(--bg)}.login-card{width:min(520px,100%);padding:34px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 48px rgba(16,24,40,.10)}.login-card .brand{padding:0 0 20px}.login-card h1{margin-top:0}.login-users{display:grid;gap:9px;margin-top:24px}.login-user{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);background:#fff;border-radius:10px;text-align:left}.login-user:hover{border-color:var(--brand);background:var(--brand-50)}.login-user>span:nth-child(2){display:grid;gap:3px;flex:1}.login-user small{color:var(--muted)}
.project-canvas{position:relative}.project-canvas .flow{position:relative;z-index:2}.project-canvas .flow-col:not(:last-child):after{display:none}.canvas-link-layer{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}.canvas-connection{fill:none;stroke:#7c8db5;stroke-width:2.2;stroke-linecap:round;opacity:.9}.project-canvas.linking .flow-node{cursor:crosshair}.flow-node.link-source{border-color:#8256e8;box-shadow:0 0 0 3px rgba(130,86,232,.18)}