:root{--bg:#f5f7fa;--card:#fff;--line:#e5e8ee;--txt:#1f2733;--sub:#68738a;--pri:#2b5cff;--ok:#18a058;--warn:#e6a23c;--bad:#d9463e}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.6 "Segoe UI","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt)}
.login-body{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:36px 40px;width:380px;box-shadow:0 8px 30px rgba(30,40,70,.08)}
.login-card h1{font-size:20px;margin-bottom:2px}
.login-card .sub{color:var(--sub);margin-bottom:18px;font-size:12px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.field input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.cap-row{display:flex;gap:8px;align-items:center}
.cap-row input{flex:1}
#cap{cursor:pointer;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#f5f7fa}
#cap svg{display:block}
.err{color:var(--bad);font-size:12px;min-height:18px;margin-bottom:6px}
#btn,.btn{background:var(--pri);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer;width:100%}
.btn{width:auto;display:inline-block}

.layout{display:flex;min-height:100vh}
.side{width:200px;background:#1c2438;color:#c9d2e8;position:fixed;top:0;bottom:0;overflow-y:auto}
.side .brand{padding:18px 16px;font-size:16px;font-weight:600;color:#fff;border-bottom:1px solid #2a3350}
.side a{display:block;padding:11px 18px;color:#c9d2e8;text-decoration:none;font-size:14px;border-left:3px solid transparent}
.side a:hover{background:#232d47}
.side a.on{background:#2b5cff22;color:#fff;border-left-color:var(--pri)}
.main{flex:1;margin-left:200px;padding:20px 24px;max-width:1500px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.topbar h2{font-size:18px}
.topbar .who{color:var(--sub);font-size:13px}
.topbar .who a{color:var(--pri);cursor:pointer;margin-left:10px;text-decoration:none}

.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.kpi .v{font-size:24px;font-weight:700;margin-top:2px}
.kpi .l{color:var(--sub);font-size:12px}
.kpi .d{font-size:12px;color:var(--sub);margin-top:2px}
.kpi.good .v{color:var(--ok)} .kpi.bad .v{color:var(--bad)} .kpi.warn .v{color:var(--warn)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.card h3{font-size:14px;margin-bottom:10px;color:var(--txt)}
.card h3 .hint{font-weight:400;color:var(--sub);font-size:12px;margin-left:6px}
.chart{width:100%;height:300px}
.chart.tall{height:360px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--sub);font-weight:500;background:#fafbfc;position:sticky;top:0}
tr:hover td{background:#f6f9ff}
.tbl-wrap{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px}
.tag.ok{background:#e8f7ef;color:var(--ok)} .tag.bad{background:#fdeaea;color:var(--bad)}
.tag.warn{background:#fdf3e3;color:#b88230} .tag.info{background:#eaf0ff;color:var(--pri)}
.toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.toolbar .btn{padding:7px 14px;font-size:13px}
.btn.gray{background:#5b6a8c}
.pager{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;color:var(--sub)}
.pager button{padding:5px 12px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer}

/* pipeline board */
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.col{background:#eef1f6;border-radius:10px;padding:10px;min-height:200px}
.col h4{font-size:13px;margin-bottom:8px;display:flex;justify-content:space-between}
.col h4 .n{color:var(--sub)}
.lead{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px}
.lead .t{font-weight:600;font-size:13px}
.lead .m{color:var(--sub)}

/* plan */
.plan-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.plan-item .bar{flex:1}
.plan-item input[type=text]{flex:1;padding:6px 10px;border:1px solid var(--line);border-radius:6px}
.progress{height:8px;background:#e8ecf3;border-radius:4px;overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;background:var(--pri)}
.mini{font-size:12px;color:var(--sub)}
.mut{color:var(--sub)}
@media(max-width:1100px){.grid2,.grid3{grid-template-columns:1fr}.board{grid-template-columns:repeat(2,1fr)}}