:root{--bg:#f4f6f3;--white:#fff;--ink:#1c2923;--muted:#718078;--line:#e5eae6;--green:#1a684d;--green2:#e9f3ed;--orange:#be6b3d;--gold:#92702d;--red:#ad514b;--shadow:0 6px 20px #22392c0a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 "Segoe UI","Microsoft YaHei",sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #83aa92;outline-offset:2px}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:226px;background:#fff;border-right:1px solid var(--line);padding:20px 13px 13px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:10px;padding:0 9px 20px}.brandmark{height:34px;width:34px;border-radius:10px;background:var(--green);color:white;display:grid;place-items:center;font:18px Georgia}.brand b{font-size:14px}.brand small{display:block;color:var(--muted);font-size:10px}.nav-label{font-size:9px;color:#a1aaa4;letter-spacing:.13em;font-weight:750;padding:12px 11px 6px}.nav{display:grid;gap:3px}.nav button{border:0;background:transparent;border-radius:7px;text-align:left;display:flex;align-items:center;gap:10px;padding:9px 11px;color:#59665f;font-size:12px}.nav button:hover{background:#f5f7f5}.nav button.active{background:var(--green2);color:var(--green);font-weight:650}.glyph{width:17px;text-align:center;color:#829087;font-size:14px}.active .glyph{color:var(--green)}.pill{margin-left:auto;border-radius:20px;background:#f7ebe0;color:#9a6136;padding:1px 6px;font-size:9px}.spacer{flex:1}.health{padding:10px;border:1px solid var(--line);background:#fafcfb;border-radius:8px;margin:8px 3px 12px}.health b{font-size:10px}.health small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.user{border-top:1px solid var(--line);padding:12px 7px 0;display:flex;align-items:center;gap:9px}.avatar{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#e9eee9;color:#365745;font-weight:700;font-size:10px}.user small{display:block;color:var(--muted);font-size:9px}.main{margin-left:226px;min-width:0}.topbar{height:56px;position:sticky;top:0;z-index:4;background:#ffffffeb;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.crumb{color:var(--muted);font-size:10px}.crumb b{color:#38473f;font-weight:600}.topright{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:10px}.flag{background:#f8f1e4;color:#926e30;border-radius:4px;padding:4px 7px;font-size:9px;font-weight:650}.content{max-width:1450px;margin:auto;padding:25px 28px 42px}.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:17px}.kicker{font-size:9px;color:var(--orange);font-weight:750;letter-spacing:.14em;margin-bottom:4px}.pagehead h1{font:600 25px/1.2 Georgia,"Microsoft YaHei",serif;letter-spacing:-.03em;margin:0}.pagehead p{color:var(--muted);font-size:11px;margin:6px 0 0}.actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.btn{border:1px solid var(--line);background:white;color:#526158;border-radius:6px;padding:7px 10px;font-size:10px}.btn:hover{border-color:#aebfb4}.btn.primary{background:var(--green);border-color:var(--green);color:white;font-weight:650}.btn.text{border-color:transparent;background:transparent;color:var(--green)}.period,.select{height:29px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 8px;color:#536159;font-size:10px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:12px}.metric{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);min-width:0}.metric:before{content:"";display:block;width:18px;height:3px;background:#8fb09a;border-radius:2px;margin-bottom:8px}.metric:nth-child(2):before{background:#d89b73}.metric:nth-child(3):before{background:#c9b47c}.metric:nth-child(4):before{background:#89aaa1}.metric:nth-child(5):before{background:#b0a2bb}.metric label{font-size:10px;color:var(--muted)}.metric strong{display:block;font:24px/1.2 Georgia,"Microsoft YaHei",serif;margin:7px 0 3px;white-space:nowrap}.metric small{font-size:9px;color:#89948d}.warn{color:var(--orange)!important}.grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.84fr);gap:11px}.stack{display:grid;gap:11px}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:0}.panelhead{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 15px 9px;gap:10px}.panelhead h2{font-size:11px;margin:0;font-weight:700}.panelhead p{color:var(--muted);font-size:9px;margin:4px 0 0}.tiny{font-size:9px;color:#98a29c}.chart{padding:0 12px;height:185px}.chart svg{width:100%;height:100%}.axis{font-size:9px;fill:#8b9690}.gridline{stroke:#edf0ed}.bar1{fill:#367f5d}.bar2{fill:#b5cfbc}.bar3{fill:#e5d8c5}.legend{display:flex;align-items:center;gap:12px;font-size:9px;color:var(--muted)}.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;background:#367f5d;margin-right:4px}.legend .c2{background:#b5cfbc}.legend .c3{background:#e5d8c5}.legendbox{padding:0 15px 12px;display:flex;justify-content:space-between}.project-list,.tasklist{padding:0 15px 7px}.project-row{padding:8px 0;border-top:1px solid #eef1ee;display:grid;grid-template-columns:1fr auto;gap:3px;cursor:pointer}.project-row b{font-size:10px}.project-row small{display:block;font-size:9px;color:var(--muted)}.project-row strong{font:12px Georgia}.progress{height:4px;border-radius:5px;background:#eef2ef;grid-column:1/3;overflow:hidden;margin-top:4px}.progress i{height:100%;display:block;background:#70977e}.task{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:7px;border-top:1px solid #eef1ee;padding:8px 0}.taskicon{width:21px;height:21px;border-radius:6px;background:#fbf0e9;color:var(--orange);display:grid;place-items:center;font-size:10px}.task b{display:block;font-size:9px}.task small{display:block;color:var(--muted);font-size:8px}.lower{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}.bars{padding:1px 15px 12px}.barrow{display:grid;grid-template-columns:66px 1fr 74px;align-items:center;gap:8px;padding:7px 0;font-size:9px}.barrow label{color:#637068}.bartrack{height:6px;background:#eff2ef;border-radius:7px;overflow:hidden}.bartrack i{height:100%;display:block;background:#7ea48a}.barrow strong{text-align:right;font-size:9px}.callout{padding:9px 11px;border-radius:6px;background:#f6f8f6;color:#657169;font-size:9px;margin:9px 0}.minis{padding:2px 15px 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mini{background:#f8faf8;border-radius:7px;padding:8px}.mini small{display:block;color:var(--muted);font-size:8px}.mini b{font:15px Georgia;display:block;margin-top:3px}.tablepanel{margin-top:11px}.tools{display:flex;align-items:center;gap:6px;padding:0 15px 10px;flex-wrap:wrap}.search{height:28px;min-width:160px;border:1px solid var(--line);border-radius:5px;padding:0 8px;font-size:9px}.tools .spacer{flex:1}table{border-collapse:collapse;width:100%;white-space:nowrap}th{background:#fafbfa;color:#849088;text-align:left;font-size:8px;font-weight:650;padding:9px 11px;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}td{font-size:9px;color:#58655e;padding:9px 11px;border-bottom:1px solid #f0f2f0;vertical-align:middle}tbody tr:hover{background:#fbfcfb}td strong{color:#26372e;font-size:9px}.sub{color:#929d95;font-size:8px;margin-top:2px}.money{font-variant-numeric:tabular-nums;font-weight:650;color:#29392f}.badge{display:inline-block;border-radius:20px;padding:3px 7px;font-size:8px;font-weight:600;background:#f0f2f0;color:#77837b}.badge.green{background:#edf5ef;color:#367051}.badge.amber{background:#faf3e5;color:#94702d}.badge.red{background:#f9eceb;color:#a9524c}.tablefoot{padding:9px 14px;display:flex;justify-content:space-between;color:#8b9690;font-size:8px}.settings-tabs{display:flex;gap:4px;padding:0 15px 10px;border-bottom:1px solid var(--line)}.tab{border:1px solid transparent;background:white;border-radius:5px;padding:6px 9px;color:#69766e;font-size:9px}.tab.active{background:var(--green2);color:var(--green);font-weight:650}.settinggrid{padding:13px 15px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.setting{border:1px solid #eef1ee;border-radius:7px;padding:10px}.setting b{font-size:9px}.setting p{font-size:8px;color:var(--muted);margin:4px 0 8px}.setting input{height:27px;width:100%;border:1px solid var(--line);border-radius:5px;padding:0 7px;font-size:9px}.shade{position:fixed;inset:0;background:#14231b55;z-index:10;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:.18s}.shade.show{opacity:1;pointer-events:auto}.drawer{width:min(470px,100%);height:100%;background:white;display:flex;flex-direction:column;box-shadow:-15px 0 40px #14251d1a;transform:translateX(20px);transition:.2s}.shade.show .drawer{transform:none}.dhead{padding:18px 20px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.dhead h2{font:600 19px Georgia,"Microsoft YaHei",serif;margin:0}.dhead small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.dbody{padding:14px 20px;overflow:auto;flex:1}.dfoot{border-top:1px solid var(--line);padding:10px 20px;display:flex;justify-content:flex-end;gap:7px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field{border-bottom:1px solid #eef1ee;padding:7px 0}.field.full{grid-column:1/3}.field label{font-size:8px;color:var(--muted);display:block;margin-bottom:3px}.field strong{font-size:10px;font-weight:600}.toast{position:fixed;right:20px;bottom:20px;background:#203d30;color:#fff;border-radius:7px;padding:10px 13px;font-size:10px;box-shadow:0 8px 22px #152b2030;opacity:0;transform:translateY(7px);transition:.18s;z-index:20;pointer-events:none}.toast.show{opacity:1;transform:none}.note{font-size:8px;color:#a1aaa4;margin-top:12px}
@media(max-width:1100px){.sidebar{width:198px}.main{margin-left:198px}.content{padding:21px 18px}.metrics{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}.stack{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sidebar{position:sticky;top:0;width:100%;height:auto;padding:6px 8px;display:block;overflow:auto;white-space:nowrap;border-right:0;border-bottom:1px solid var(--line)}.brand{display:inline-flex;padding:0 8px 0 0}.brandmark{width:28px;height:28px}.brand b{font-size:11px}.brand small,.nav-label,.health,.user,.spacer{display:none}.nav{display:inline-flex;vertical-align:middle;gap:1px}.nav button{display:inline-flex;padding:7px;font-size:9px}.glyph,.pill{display:none}.main{margin-left:0}.topbar{height:43px;padding:0 10px}.topright span:first-child{display:none}.content{padding:16px 10px 30px}.pagehead{display:block}.pagehead h1{font-size:22px}.actions{margin-top:11px}.metrics{grid-template-columns:repeat(2,1fr);gap:6px}.metric{padding:10px}.metric strong{font-size:20px}.grid{display:block}.grid>.panel,.stack{margin-bottom:10px}.stack{display:grid;grid-template-columns:1fr}.lower{grid-template-columns:1fr}.settinggrid{grid-template-columns:1fr}.tools{gap:5px}.search{min-width:110px}.chart{height:160px}.minis{gap:5px}.tablepanel{overflow:hidden}}

/* ===== 正式版新增组件（视觉沿用原型设计变量） ===== */
/* 登录视图 */
[hidden]{display:none!important}
.login-view{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:20px}
.login-card{width:340px;max-width:92vw;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:28px 26px}
.login-card .brand{padding:0 0 16px}
.login-card h1{font:600 19px Georgia,"Microsoft YaHei",serif;margin:0 0 4px}
.login-card>p{margin:0 0 14px;color:var(--muted);font-size:10px}
.login-card label{display:block;font-size:10px;color:var(--muted);margin:10px 0 4px}
.login-card input{width:100%;height:32px;border:1px solid var(--line);border-radius:6px;padding:0 10px;background:#fafcfb}
.login-card .btn.primary{width:100%;margin-top:16px;padding:9px 10px}
.login-err{color:var(--red);font-size:10px;min-height:15px;margin:8px 0 0}
/* 页面四态 */
.state{padding:38px 16px;text-align:center;color:var(--muted)}
.state b{display:block;color:var(--ink);font-size:13px;margin-bottom:6px}
.state p{margin:0 auto 12px;font-size:11px;max-width:420px}
.skl{border-radius:6px;background:linear-gradient(90deg,#eef1ee 25%,#f7f9f7 50%,#eef1ee 75%);background-size:200% 100%;animation:skl 1.2s infinite}
@keyframes skl{to{background-position:-200% 0}}
/* 确认弹窗（复用遮罩，居中） */
.shade.center{justify-content:center;align-items:center}
.confirm-box{width:430px;max-width:92vw;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:20px}
.confirm-box h2{font:600 16px Georgia,"Microsoft YaHei",serif;margin:0 0 10px}
.confirm-box .cbody{font-size:11px;color:var(--ink);margin-bottom:16px}
.confirm-box .cfoot{display:flex;justify-content:flex-end;gap:8px}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* 表单行（抽屉与设置页共用） */
.formrow{display:grid;gap:4px;margin-bottom:12px}
.formrow label{font-size:10px;color:var(--muted)}
.formrow input,.formrow select,.formrow textarea{height:29px;border:1px solid var(--line);border-radius:6px;padding:0 9px;background:#fafcfb;width:100%;font-size:11px}
.formrow textarea{height:auto;padding:7px 9px;resize:vertical}
/* 结算流程步骤 */
.stepper{display:flex;gap:6px;flex-wrap:wrap}
.step{flex:1;min-width:110px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fafcfb;color:var(--muted);font-size:9px}
.step b{display:block;font-size:11px;color:var(--ink);margin-bottom:2px}
.step.done{border-color:#bcd6c6;background:var(--green2)}
.step.current{border-color:var(--gold);background:#faf6ea}
/* 抽屉内键值与明细表 */
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;font-size:11px;margin:4px 0 10px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-all}
.dtable{width:100%;border-collapse:collapse;font-size:10px;margin:8px 0;white-space:normal}
.dtable th,.dtable td{border-bottom:1px solid #f0f2f0;padding:6px 8px;text-align:left}
.dtable th{color:var(--muted);font-weight:600;font-size:9px;background:#fafbfa}
.warnline{color:var(--orange);font-size:10px;margin:4px 0}
/* 连接状态旗标 */
.flag.ok{background:#edf5ef;color:#367051}
.flag.bad{background:#f9eceb;color:#a9524c}
.flag.warn{background:#faf3e0;color:#8a6a2b}
/* 演示降级横幅 */
.demo-banner{border-color:#ecd9ac;background:#fdf8ec;color:#7a5f24}
.demo-banner b{color:#8a6a2b}
/* 分页按钮组 */
.pager{display:inline-flex;align-items:center;gap:8px}
.pager .btn{padding:3px 8px}
/* 工具条日期输入 */
.tools input[type="date"],.tools input[type="month"],.actions input[type="month"]{height:28px;border:1px solid var(--line);border-radius:5px;padding:0 8px;font-size:10px;background:#fff;color:#536159}
/* 退出登录按钮 */
.topright .btn.text{padding:2px 6px;font-size:9px}