:root{--bg:#fff;--soft:#F7F8FA;--line:#E8EBF0;--ink:#0F172A;--sub:#64748B;--muted:#94A3B8;--accent:#2F6BFF;--accent-50:#EEF3FF;--accent-100:#DCE6FF;
--open:#94A3B8;--doing:#2F6BFF;--done:#16A34A;--cancel:#CBD5E1;--red:#EF4444;--amber:#F59E0B;--r:14px;
--font:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--soft);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
header.top{display:flex;align-items:center;gap:20px;padding:14px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;white-space:nowrap}
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2F6BFF,#6A93FF);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 4px 12px rgba(47,107,255,.35)}
.brand small{font-weight:500;color:var(--sub);font-size:13px;margin-left:4px}
.tabs{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{border:1px solid var(--line);background:#fff;color:var(--sub);padding:6px 14px;border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap;transition:all .25s}
.tab:hover{border-color:var(--accent-100);color:var(--accent)}.tab.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(47,107,255,.28)}
.clock{text-align:right;white-space:nowrap}.clock b{font-size:20px;font-weight:600}.clock div{font-size:12px;color:var(--sub)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sub)}.dot{width:8px;height:8px;border-radius:50%;background:var(--done);position:relative}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--done);opacity:.35;animation:pulse 2s infinite}.dot.off{background:var(--red)}.dot.off::after{background:var(--red)}
@keyframes pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.8);opacity:0}}
main{padding:20px 28px 28px;display:grid;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(16,24,40,.05);padding:16px 18px;min-width:0;opacity:0;transform:translateY(10px);animation:in .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes in{to{opacity:1;transform:none}}
.card h3{margin:0 0 10px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.card h3 span{font-weight:400;color:var(--muted);font-size:12px}
.kpi{position:relative;overflow:hidden}.kpi .lab{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px}
.kpi .val{font-size:44px;font-weight:700;line-height:1.1;margin-top:6px;letter-spacing:-1px}.kpi .foot{font-size:12px;color:var(--sub);margin-top:4px}
.kpi .bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}.kpi.red .bar{background:var(--red)}.kpi.red .val{color:var(--red)}.kpi.amber .bar{background:var(--amber)}.kpi.amber .val{color:#D97706}.kpi.green .bar{background:var(--done)}
.kpi .spark{position:absolute;right:10px;bottom:8px;width:90px;height:34px}
.up{color:var(--done)}.down{color:var(--red)}
.row2{display:grid;grid-template-columns:4.2fr 2.4fr 2.6fr 2.8fr;gap:16px}.row3{display:grid;grid-template-columns:4.4fr 4.4fr 3.2fr;gap:16px}.row3.norep{grid-template-columns:7fr 5fr}.row3.norep #repCard{display:none}
.chart{height:270px}.chart.sm{height:200px}.chart.xs{height:116px}
.tbl{height:420px;overflow:hidden;position:relative}.tbl table{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;background:#fff;text-align:left;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:1px solid var(--line);z-index:1}
.tbl td{white-space:nowrap;padding:9px 6px;border-bottom:1px solid #F1F3F7;vertical-align:middle}.tbl tr{transition:background .3s}.tbl tbody tr:hover{background:var(--accent-50)}
.tbl .c{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroller{transition:transform 1s cubic-bezier(.4,0,.2,1)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;white-space:nowrap}
.pill.open{background:#F1F5F9;color:#475569}.pill.doing{background:var(--accent-50);color:var(--accent)}.pill.done{background:#ECFDF3;color:#15803D}.pill.cancelled{background:#F8FAFC;color:#94A3B8}
.pill.proj{background:#F5F3FF;color:#6D28D9}
.due{font-size:12px}.due.late{color:var(--red);font-weight:600}.due.soon{color:#D97706;font-weight:600}
.feed{height:420px;overflow:hidden;position:relative}.feed ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line)}
.feed li{position:relative;padding:8px 8px 10px 14px;margin-bottom:4px;border-radius:10px;animation:slide .6s cubic-bezier(.2,.7,.2,1)}
.feed li::before{content:"";position:absolute;left:-21px;top:13px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.feed li.k-done::before{border-color:var(--done);background:var(--done)}.feed li.k-created::before{border-color:var(--accent);background:var(--accent)}.feed li.k-cancelled::before{border-color:var(--cancel)}
.feed li.fresh{animation:slide .6s cubic-bezier(.2,.7,.2,1),flash 2.4s ease-out}
@keyframes slide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@keyframes flash{0%,30%{background:var(--accent-50)}100%{background:transparent}}
.feed .t{font-size:13px}.feed .t b{font-weight:600}.feed .m{font-size:12px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fade{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,#fff);pointer-events:none}
.proj-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}.proj-item .h{display:flex;justify-content:space-between;font-size:13px}.proj-item .h span{color:var(--sub);font-size:12px}
.prog{height:8px;border-radius:99px;background:#F1F5F9;overflow:hidden;margin-top:6px;display:flex}.prog i{display:block;height:100%;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.empty{color:var(--muted);font-size:13px;padding:30px 0;text-align:center}
.demo{position:fixed;right:14px;bottom:10px;font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 8px;border-radius:6px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.row2,.row3{grid-template-columns:1fr}}
@media (max-width:640px){header.top{flex-wrap:wrap;padding:12px 14px;gap:10px}.tabs{order:3;flex-basis:100%}.clock b{font-size:16px}main{padding:12px;gap:12px}
.kpis{grid-template-columns:repeat(2,1fr);gap:10px}.kpi .val{font-size:32px}.kpi .spark{display:none}.chart{height:230px}.tbl,.feed{height:auto;max-height:520px;overflow:auto}.tbl .c{max-width:130px}.tbl td,.tbl th{padding:8px 4px;font-size:12px}.hide-m{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}
/* simple pages */
.center{min-height:100vh;display:grid;place-items:center;padding:20px}.box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;max-width:440px;width:100%;text-align:center;box-shadow:0 10px 40px rgba(15,23,42,.06)}
.box h1{font-size:20px;margin:16px 0 8px}.box p{color:var(--sub);font-size:14px;line-height:1.6}.box .logo{margin:0 auto;width:48px;height:48px;font-size:22px;border-radius:14px}
.spin{width:28px;height:28px;border:3px solid var(--accent-100);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite;margin:18px auto 0}@keyframes sp{to{transform:rotate(360deg)}}
.btn{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-size:14px;cursor:pointer;font-family:inherit}.btn:hover{background:#1F5AEE}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.danger{background:#fff;color:var(--red);border:1px solid #FECACA}
input,select{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}

/* reports */
.rep #reps{display:flex;flex-direction:column;gap:10px}
.ritem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;transition:box-shadow .3s}.ritem:hover{box-shadow:0 4px 14px rgba(15,23,42,.06)}
.ritem.fresh{animation:slide .6s cubic-bezier(.2,.7,.2,1),flashb 2.6s ease-out}@keyframes flashb{0%,35%{background:var(--accent-50);border-color:var(--accent-100)}100%{background:#fff}}
.ritem .hd{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub)}.ritem .hd b{color:var(--ink);font-size:13px}.ritem .hd .tm{margin-left:auto;white-space:nowrap}
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:600;flex:none}
.ritem .bd{font-size:13px;line-height:1.6;margin-top:6px;color:#1E293B;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
/* empty states */
.es{height:100%;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--sub);font-size:13px;gap:6px;padding:10px}
.es .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-50);color:var(--accent);display:grid;place-items:center;font-size:20px}
.es b{color:var(--ink);font-size:14px}.es code{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--accent);font-family:inherit;margin-top:4px;line-height:1.5}
.es.sm{min-height:80px}.es.sm .ic{width:32px;height:32px;font-size:15px;border-radius:9px}
@media (max-width:1100px){.row3.norep{grid-template-columns:1fr}}
@media (max-width:640px){.rep{max-height:560px}.chart.xs{height:150px}}
.tbl td .es,.tbl td .es *{white-space:normal}.es code{word-break:break-all;max-width:100%}