:root{
  --emerald:#10B981; --emerald-deep:#059669; --emerald-dark:#047857; --emerald-bg:#ECFDF5;
  --bg:#F5F7F6; --card:#FFFFFF; --ink:#0F172A; --ink-2:#475569; --ink-3:#94A3B8;
  --line:#E2E8F0; --amber:#F59E0B; --amber-bg:#FFFBEB; --red:#EF4444; --red-bg:#FEF2F2;
  --blue:#3B82F6; --blue-bg:#EFF6FF; --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;}
body{background:var(--bg);color:var(--ink);font-size:14px;}
.hidden{display:none!important;}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}

/* 登录 */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;width:360px;}
.login-card .logo.big{justify-content:center;font-size:19px;margin-bottom:6px;}
.login-sub{text-align:center;color:var(--ink-3);font-size:12px;margin-bottom:24px;}
.login-btn{width:100%;padding:11px;font-size:14px;margin-top:6px;}
.login-hint{font-size:11px;color:var(--ink-3);text-align:center;margin-top:14px;}
.lg-err{color:var(--red);font-size:12px;min-height:16px;margin-top:4px;}

/* 顶栏 */
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:16px;position:sticky;top:0;z-index:50;}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;}
.logo .dot{width:28px;height:28px;border-radius:9px;background:var(--emerald-deep);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;}
.role-chip{font-size:12px;color:var(--emerald-dark);background:var(--emerald-bg);border:1px solid #A7F3D0;border-radius:999px;padding:3px 10px;}
.whoami{font-size:13px;color:var(--ink-2);}
.topbar .sp{flex:1}

/* 布局 */
.layout{display:flex;min-height:calc(100vh - 56px);}
.sidebar{width:248px;background:#fff;border-right:1px solid var(--line);padding:16px 12px;flex-shrink:0;}
.side-title{font-size:12px;color:var(--ink-3);font-weight:600;padding:0 8px 8px;letter-spacing:.05em;}
.client-item{border-radius:12px;padding:12px;cursor:pointer;border:1.5px solid transparent;margin-bottom:8px;transition:.15s;}
.client-item:hover{background:var(--bg);}
.client-item.active{background:var(--emerald-bg);border-color:#6EE7B7;}
.client-item .cname{font-weight:600;display:flex;align-items:center;gap:8px;}
.cbadge{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex-shrink:0;}
.client-item .cmeta{font-size:12px;color:var(--ink-3);margin-top:4px;}
.mini-track{height:4px;background:#E2E8F0;border-radius:99px;margin-top:8px;overflow:hidden;}
.mini-track i{display:block;height:100%;background:var(--emerald-deep);border-radius:99px;}
.side-add{width:100%;border:1.5px dashed #CBD5E1;background:none;border-radius:12px;padding:10px;color:var(--ink-2);cursor:pointer;font-size:13px;margin-top:4px;}
.side-add:hover{border-color:var(--emerald);color:var(--emerald-dark);background:var(--emerald-bg);}

.main{flex:1;padding:20px 24px;max-width:1120px;}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:10px;}
.crumb b{color:var(--ink-2);font-weight:600;}
.client-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.client-head h1{font-size:20px;}
.client-head .sub{color:var(--ink-3);font-size:12px;margin-top:4px;}
.head-actions{margin-left:auto;display:flex;gap:8px;}
.btn{border:none;border-radius:10px;padding:8px 14px;font-size:13px;cursor:pointer;font-weight:500;}
.btn-primary{background:var(--emerald-deep);color:#fff;}
.btn-primary:hover{background:var(--emerald-dark);}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2);}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald-dark);}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid #FECACA;}

.tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;width:fit-content;margin-bottom:18px;flex-wrap:wrap;}
.tab{padding:7px 14px;border-radius:9px;font-size:13px;color:var(--ink-2);cursor:pointer;border:none;background:none;font-weight:500;}
.tab:hover{color:var(--emerald-dark);}
.tab.active{background:var(--emerald-deep);color:#fff;}
.panel{display:none;animation:fade .2s;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

.grid{display:grid;gap:14px;}
.g2{grid-template-columns:1fr 1fr;} .g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.card h3{font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.card h3 .more{margin-left:auto;font-size:12px;color:var(--emerald-dark);cursor:pointer;font-weight:400;}
.kpi{font-size:26px;font-weight:700;}
.kpi small{font-size:12px;color:var(--ink-3);font-weight:400;margin-left:4px;}
.kpi-label{font-size:12px;color:var(--ink-3);margin-top:2px;}

.stage{margin-bottom:14px;} .stage:last-child{margin-bottom:0}
.stage .row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;}
.stage .row b{font-weight:600;} .stage .row span{color:var(--ink-3);}
.track{height:8px;background:#F1F5F9;border-radius:99px;overflow:hidden;}
.track i{display:block;height:100%;border-radius:99px;background:var(--emerald-deep);}

.task{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);margin-bottom:8px;background:#fff;}
.task:hover{border-color:#6EE7B7;}
.task .chk{width:20px;height:20px;border-radius:6px;border:2px solid #CBD5E1;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;}
.task.done .chk{background:var(--emerald-deep);border-color:var(--emerald-deep);}
.task.done .tname{text-decoration:line-through;color:var(--ink-3);}
.task .tname{font-weight:500;flex:1;}
.task .tmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:500;white-space:nowrap;}
.tag-s1{background:var(--emerald-bg);color:var(--emerald-dark);}
.tag-s2{background:var(--blue-bg);color:var(--blue);}
.tag-s3{background:#F5F3FF;color:#7C3AED;}
.tag-plat{background:#F1F5F9;color:var(--ink-2);}
.tag-warn{background:var(--amber-bg);color:#B45309;}
.tag-done{background:var(--emerald-bg);color:var(--emerald-dark);}
.tag-doing{background:var(--blue-bg);color:var(--blue);}
.tag-todo{background:#F1F5F9;color:var(--ink-3);}
.tag-rev{background:var(--amber-bg);color:#B45309;}

.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.plat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;position:relative;}
.plat-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.picon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;font-weight:700;}
.plat-head .pn{font-weight:600;font-size:14px;}
.plat-head .ps{font-size:11px;color:var(--ink-3);margin-top:2px;display:flex;align-items:center;gap:4px;}
.st-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.st-ok{background:var(--emerald);} .st-warn{background:var(--amber);} .st-bad{background:var(--red);}
.acc-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border-radius:10px;margin-bottom:8px;font-size:12.5px;}
.acc-row .an{flex:1;min-width:0;}
.acc-row .an b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acc-row .an span{font-size:11px;color:var(--ink-3);}
.acc-del{cursor:pointer;color:var(--ink-3);font-size:12px;}
.acc-del:hover{color:var(--red);}
.pwd-box{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);margin:2px 0 10px;padding-left:2px;}
.pwd-box .pw{font-family:Consolas,monospace;letter-spacing:1px;word-break:break-all;}
.eye{cursor:pointer;opacity:.6;font-size:12px;} .eye:hover{opacity:1}
.plat-actions{display:flex;gap:8px;}
.mini-btn{flex:1;text-align:center;font-size:12px;padding:7px 0;border-radius:9px;cursor:pointer;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--ink-2);}
.mini-btn:hover{border-color:var(--emerald);color:var(--emerald-dark);}
.mini-btn.primary{background:var(--emerald-deep);border-color:var(--emerald-deep);color:#fff;}
.mini-btn.primary:hover{background:var(--emerald-dark);}
.plat-foot{font-size:11px;color:var(--ink-3);margin-top:8px;display:flex;gap:6px;align-items:center;}
.plat-add{border:1.5px dashed #CBD5E1;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-3);cursor:pointer;min-height:180px;font-size:13px;background:transparent;}
.plat-add:hover{border-color:var(--emerald);color:var(--emerald-dark);background:var(--emerald-bg);}
.plat-add .plus{width:40px;height:40px;border-radius:12px;background:var(--emerald-bg);color:var(--emerald-dark);display:flex;align-items:center;justify-content:center;font-size:20px;}

.kg-wrap{display:flex;gap:14px;}
.kg-svg{flex:1.4;background:#FAFDFC;border:1px solid var(--line);border-radius:var(--radius);}
.kg-side{flex:1;display:flex;flex-direction:column;gap:14px;}
.kg-list{max-height:220px;overflow:auto;}
.kg-item{padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:12.5px;background:#fff;}
.kg-item b{font-size:13px;}
.kg-item .rel{color:var(--emerald-dark);font-size:11px;background:var(--emerald-bg);border-radius:99px;padding:1px 8px;margin-left:6px;}
.kg-item p{color:var(--ink-2);margin-top:4px;font-size:12px;line-height:1.6;}

.entity-field{display:flex;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.entity-field:last-child{border-bottom:none}
.entity-field .k{width:110px;color:var(--ink-3);flex-shrink:0;}
.entity-field .v{flex:1;font-weight:500;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.chip{font-size:12px;background:var(--emerald-bg);color:var(--emerald-dark);border-radius:999px;padding:4px 10px;}
.chip.gray{background:#F1F5F9;color:var(--ink-2);}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:12px;color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:10px;border-bottom:1px solid #F1F5F9;}
tr:hover td{background:#FAFDFB;}
.fname{font-weight:500;display:flex;align-items:center;gap:8px;}
.ficon{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.fi-doc{background:var(--blue-bg);} .fi-img{background:var(--amber-bg);} .fi-vid{background:#F5F3FF;} .fi-txt{background:var(--emerald-bg);}
.link{color:var(--emerald-dark);cursor:pointer;font-size:12px;}
.link.danger{color:var(--red);}

.tl{position:relative;padding-left:20px;}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#E2E8F0;border-radius:2px;}
.tl-item{position:relative;padding:0 0 18px 10px;}
.tl-item::before{content:"";position:absolute;left:-19px;top:4px;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--emerald);}
.tl-item .t{font-size:11px;color:var(--ink-3);}
.tl-item p{font-size:13px;margin-top:2px;}

.modal-mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:100;align-items:center;justify-content:center;}
.modal-mask.show{display:flex;}
.modal{background:#fff;border-radius:18px;width:420px;padding:22px;max-height:88vh;overflow:auto;}
.modal h3{font-size:16px;margin-bottom:16px;}
.field{margin-bottom:12px;}
.field label{font-size:12px;color:var(--ink-2);display:block;margin-bottom:6px;font-weight:500;}
.field input,.field select{width:100%;height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font-size:13px;outline:none;background:#fff;}
.field input:focus,.field select:focus{border-color:var(--emerald);}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#0F172A;color:#fff;padding:10px 20px;border-radius:99px;font-size:13px;opacity:0;transition:.25s;z-index:200;pointer-events:none;max-width:80vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.note{font-size:11.5px;color:var(--ink-3);background:var(--bg);border-radius:10px;padding:8px 12px;margin-top:12px;line-height:1.6;}
.empty{color:var(--ink-3);font-size:13px;padding:16px 0;text-align:center;}