:root{--bg:#f6f7f9;--ink:#202c39;--muted:#87909c;--line:#e9edf1;--green:#16856b;--green-bg:#edf7f2;--orange:#b47d2b;--sidebar:#192b30;--font:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font)}button,input,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8ed2bf;outline-offset:2px}button{color:inherit}a{color:inherit;text-decoration:none}.sidebar{width:222px;position:fixed;inset:0 auto 0 0;background:var(--sidebar);color:#b7c4c6;padding:30px 18px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;padding:0 9px;color:white;font-size:20px;font-weight:600;letter-spacing:2px}.brand-icon{display:grid;place-items:center;background:#d3e9d9;color:#254c40;width:37px;height:41px;border-radius:12px 12px 12px 3px;font:italic 700 27px Georgia}.brand-sub{display:block;font-size:8px;letter-spacing:1.8px;margin-top:3px;color:#98b2b4;font-weight:400}.workspace{margin:30px 3px 20px;border:1px solid #3b4c50;padding:10px 12px;border-radius:6px;font-size:12px;color:#d4dddd}.workspace span{float:right}.nav-label{font-size:10px;color:#768d91;letter-spacing:2px;padding:4px 13px}nav{display:grid;gap:8px}nav button{border:0;background:none;text-align:left;color:#aabdc0;display:flex;gap:13px;align-items:center;border-radius:7px;padding:13px 15px;font-size:13px}nav button.active{background:#304e4b;color:#eaf8ed}nav button:hover{background:#263e42}nav svg{width:18px;height:18px}.nav-count{margin-left:auto;background:#597770;color:#e9f5ef;padding:1px 6px;border-radius:4px;font-size:10px}.sidebar-bottom{margin-top:auto}.secure{font-size:11px;color:#7e999c;padding:15px 12px}.profile{border-top:1px solid #34474c;padding:22px 8px 0;display:flex;align-items:center;gap:10px;color:#d7e2e3;font-size:12px}.avatar{background:#49615f;color:#e7f5eb;border-radius:50%;display:grid;place-items:center;width:33px;height:33px}.profile small{display:block;color:#8ca4a7;font-size:10px;margin-top:3px}.online{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#82b79c}.shell{margin-left:222px}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);padding:0 35px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#737f8c}#crumb span{padding:0 14px;color:#bbc1c9}.header-right{display:flex;gap:8px;align-items:center}.demo-dot{width:6px;height:6px;background:#7ca58c;border-radius:50%}.divider{height:13px;border-left:1px solid #d9dee5;margin:0 10px}.text-button{border:0;background:none;font-size:11px;color:#6e7e8a;padding:4px}main{padding:30px 35px 10px;max-width:1610px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-size:9px;letter-spacing:2.6px;color:#9aa4ad;margin:0 0 8px}h1{font-size:26px;letter-spacing:-.7px;margin:0;font-weight:600}h2{font-size:19px;margin:0}h3{font-size:14px;margin:0;font-weight:600}.subtitle{font-size:12px;color:#85919c;margin:8px 0 0}.button{border:1px solid transparent;border-radius:6px;padding:9px 15px;font-size:12px;display:inline-flex;align-items:center;gap:7px;justify-content:center;white-space:nowrap}.button.primary{background:var(--green);color:white;box-shadow:0 2px 3px #144a3820}.button.primary:hover{background:#0c6d55}.button.secondary{background:white;border-color:#dfe5e9;color:#51606c}.button.secondary:hover{background:#f8faf9}.button.small{font-size:11px;padding:6px 10px}.button.ghost{background:transparent;color:var(--green);padding:6px 8px}.button svg{height:14px;width:14px}.buttons{display:flex;gap:9px;align-items:center}.metrics{display:grid;grid-template-columns:1.22fr 1.22fr 1fr 1fr;gap:16px;margin-bottom:23px}.metric{padding:20px 23px;background:white;border:1px solid var(--line);border-radius:9px;text-align:left;position:relative}.metric-label{color:#7b8792;font-size:12px;display:flex;align-items:center;justify-content:space-between}.metric-label svg{height:17px;width:17px;color:#a3afba}.metric strong{font-size:27px;font-weight:550;letter-spacing:-.7px;display:block;margin-top:13px;font-variant-numeric:tabular-nums}.metric strong small{font-size:17px;margin-right:5px;color:#64707c;font-weight:400}.metric-foot{font-size:10px;color:#9ba4ad;margin-top:10px}.metric-foot .good{color:var(--green)}.metric.action{cursor:pointer}.metric.action:hover{border-color:#bbd8cc}.metric.action strong{color:var(--orange)}.metric.action .metric-foot{display:flex;justify-content:space-between}.count{font-size:9px;border-radius:4px;padding:2px 6px;background:#fff5e5;color:#aa792c}.notice{border:1px solid #e7ede8;background:#f0f5f1;color:#6c8174;border-radius:6px;font-size:11px;padding:10px 14px;display:flex;align-items:center;gap:9px;margin-bottom:20px}.notice svg{width:14px;height:14px}.notice b{font-weight:500;color:#416e5b}.notice button{margin-left:auto}.panel{background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:19px 22px}.panel-heading{display:flex;align-items:center;gap:12px}.panel-heading small{font-size:10px;color:#9ca4ad;font-weight:400}.month{border:1px solid #e4e8ec;border-radius:5px;padding:6px 10px;background:white;font-size:12px;color:#5a6875}.toolbar{padding:0 22px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px}.segmented{background:#f3f5f6;padding:3px;display:inline-flex;border-radius:6px;gap:3px}.segmented button{background:transparent;border:0;color:#8b949e;font-size:11px;padding:6px 12px;border-radius:4px}.segmented button.active{background:white;color:#344955;box-shadow:0 1px 4px #24383d14}.search{border:1px solid #e4e8ee;border-radius:5px;padding:7px 10px;background:white;font-size:11px;width:190px;color:#576676}.ledger{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}.ledger th{background:#fafbfc;color:#8b96a2;font-weight:400;font-size:10px;padding:12px 18px;text-align:right;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ledger th:first-child,.ledger td:first-child{text-align:left;width:20%}.ledger th:last-child,.ledger td:last-child{width:19%;text-align:right}.ledger td{padding:15px 18px;text-align:right;border-bottom:1px solid #edf0f3;font-variant-numeric:tabular-nums;letter-spacing:.15px}.day-row{cursor:pointer}.day-row:hover{background:#fafcfb}.day-row.selected{background:#edf6f1}.day-row.selected td{border-bottom-color:#d6e9dc}.day-button{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:11px;font-size:12px}.chevron{color:#9aa8ad;font-size:10px;display:inline-block;width:10px}.selected .chevron{color:var(--green)}.today{font-size:8px;background:#dcebe1;color:#548369;border-radius:3px;padding:1px 4px}.income{color:var(--green)}.out{color:#59636e}.number{font-variant-numeric:tabular-nums}.balance{font-weight:550;color:#273842}.muted{color:#a0a8b0}.tag{display:inline-flex;gap:4px;align-items:center;border-radius:4px;font-size:10px;padding:3px 7px;white-space:nowrap}.tag.warn{background:#fff5e7;color:#ad7c34}.tag.ok{background:#edf7f1;color:#5c9779}.tag.gray{background:#f1f3f6;color:#89929c}.tag.blue{background:#edf3fc;color:#6b8eb4}.detail-row>td{padding:0!important;text-align:left!important;letter-spacing:0}.day-details{padding:0 22px 19px;background:#f9fbfa;border-left:3px solid #359878}.detail-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e9e6;gap:10px}.tabs{display:flex;gap:24px}.tabs button{border:0;background:none;padding:17px 0 13px;font-size:12px;color:#8b959e;border-bottom:2px solid transparent}.tabs button.active{color:#1c8065;border-bottom-color:#278e70;font-weight:550}.tabs button span{font-size:9px;display:inline-flex;align-items:center;justify-content:center;background:#eaf0ed;color:#82938a;border-radius:4px;padding:0 4px;margin-left:5px}.detail-intro{display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;font-size:10px;color:#8b9991}.details-table{border-collapse:collapse;width:100%;font-size:11px;table-layout:auto;background:white;border:1px solid #e6ece8;border-radius:6px}.details-table th{text-align:left!important;width:auto!important;font-size:10px;padding:10px 13px;background:#f5f8f6;color:#8b9890;white-space:nowrap}.details-table td{padding:13px!important;text-align:left!important;width:auto!important;border-bottom:1px solid #edf1ee;vertical-align:middle;letter-spacing:0!important}.details-table .right{text-align:right!important}.details-table td small{display:block;font-size:9px;color:#9aa4a0;margin-top:3px}.details-table .money{font-weight:550}.link{color:#278467;font-size:10px;background:none;border:0;padding:3px;white-space:nowrap}.detail-summary{padding-top:13px;display:flex;justify-content:space-between;color:#96a098;font-size:10px}.detail-summary b{color:#637b6c;font-weight:500}.panel-foot{display:flex;justify-content:space-between;padding:13px 22px;color:#99a3ac;font-size:10px;background:#fff}.panel-foot b{color:#4a6b59;font-weight:500}.helper{margin:17px 0 8px;color:#949fa7;font-size:10px;display:flex;gap:20px}.helper span:before{content:'•';margin-right:7px;color:#a6b9ad}footer{font-size:9px;color:#a5adb4;display:flex;justify-content:space-between;padding:24px 35px;max-width:1610px;margin:auto}.empty{text-align:center;color:#98a29b;font-size:12px;padding:35px}.project-strip{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:21px}.project-strip button{padding:10px 17px;border:1px solid #dce5e0;border-radius:6px;background:white;font-size:12px;color:#718278}.project-strip button.active{background:#e9f4ed;border-color:#8dbba4;color:#287653}.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px}.account-card{border:1px solid var(--line);border-radius:9px;background:white;padding:22px;text-align:left;cursor:pointer}.account-card.active{border-color:#83b89e;box-shadow:0 0 0 1px #83b89e}.account-symbol{width:35px;height:35px;display:grid;place-items:center;background:#eff5f2;border-radius:9px;color:#6d927f;margin-bottom:14px}.account-card strong{font-size:22px;display:block;margin-top:9px;font-weight:550}.account-card small{color:#99a5a0;font-size:10px}.account-card p{font-size:12px;margin:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-grid .panel{padding:23px}.settings-list{margin-top:20px}.setting-line{padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px}.setting-line:last-child{border:0}.setting-line small{font-size:10px;color:#8d99a2;display:block;margin-top:4px}.review{margin-top:15px;padding:15px;background:#fff;border:1px solid #e2e9e5;border-radius:5px}.review-grid{display:flex;align-items:end;gap:10px;margin-top:12px;flex-wrap:wrap}.review input{width:130px}.review label{font-size:10px;color:#7c8b82}.review p{font-size:11px;color:#91a097;margin:5px 0}.review-result{font-size:11px;color:#8c7b5e}.date-hint{font-size:10px;color:#b08847;margin:0 0 10px}dialog{border:0;padding:0;width:540px;max-width:calc(100vw - 32px);border-radius:13px;box-shadow:0 20px 90px #152b3040;color:var(--ink);max-height:90vh}dialog::backdrop{background:#182e3e66;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:25px 27px 16px}.modal-head .eyebrow{font-size:8px}.modal-head .close{font-size:23px;border:0;background:none;color:#97a1aa;padding:5px}.modal-foot{padding:18px 27px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:#fafbfc}#form-body{padding:0 27px 23px;max-height:58vh;overflow:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#6a7b86}.field.full{grid-column:1/-1}.field input,.field select,.review input{padding:9px 10px;border:1px solid #dfe6e9;border-radius:5px;background:white;color:#394b59;min-width:0}.field input:disabled{background:#f5f7f8;color:#8c979e}.form-note{padding:11px 13px;margin:0 0 18px;background:#f0f6f2;border-radius:6px;font-size:11px;color:#6d8b7a}.allocation-row{display:grid;grid-template-columns:1fr 110px 25px;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.allocation-row input[type=number]{width:110px;border:1px solid #e0e6e4;padding:7px;border-radius:4px}.allocation-row label{display:flex;align-items:center;gap:9px}.allocation-row span{color:#8e9f94;font-size:11px}.allocation-total{background:#f1f6f2;margin-top:14px;padding:12px;color:#517763;font-size:12px;display:flex;justify-content:space-between}.allocation-total.invalid{background:#fff4e9;color:#a7732b}#form-error{font-size:11px;color:#b85c4d;padding:0 27px 13px}#form-error:empty{display:none}#toast{position:fixed;left:calc(50% + 60px);bottom:30px;transform:translateX(-50%) translateY(20px);background:#254a3b;color:white;box-shadow:0 6px 25px #173c2e30;border-radius:7px;padding:12px 22px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.mini-stats{display:flex;gap:25px;font-size:11px;color:#8e9c94;padding:0 0 15px}.mini-stats b{color:#385e49;margin-left:7px}.warning-note{margin:15px 0;color:#9e8a63;font-size:11px}.scroll-table{overflow-x:auto}.account-grid+.panel .details-table{border:0}.project-metrics{grid-template-columns:repeat(3,1fr)}@media(min-width:1500px){main{padding-top:40px}.metric{padding:24px}.ledger td{padding-top:18px;padding-bottom:18px}}@media(max-width:1100px){.sidebar{width:185px;padding:25px 12px}.shell{margin-left:185px}main{padding:25px 22px 10px}.topbar{padding:0 22px}.metric{padding:16px}.metric strong{font-size:23px}.ledger th,.ledger td{padding-left:12px;padding-right:12px}.tabs{gap:15px}.account-grid{grid-template-columns:repeat(2,1fr)}.details-table{min-width:650px}.day-details{padding-left:14px;padding-right:14px}.metric-foot{font-size:9px}}@media(max-width:780px){.sidebar{position:static;width:auto;padding:15px}.brand{font-size:17px}.brand-icon{width:30px;height:33px}.workspace,.nav-label,.sidebar-bottom{display:none}nav{display:flex;margin-top:18px;gap:4px}nav button{padding:9px 10px;font-size:11px;gap:7px}nav svg{width:14px}.nav-count{display:none}.shell{margin:0}.topbar{height:48px;padding:0 18px}.header-right{font-size:9px}.divider{margin:0 3px}main{padding:22px 15px 0}.heading{gap:12px}.heading h1{font-size:23px}.subtitle{font-size:10px}.heading .buttons{flex-direction:column;align-items:stretch}.metrics{grid-template-columns:repeat(2,1fr);gap:10px}.metric{padding:15px}.metric strong{font-size:23px}.notice{font-size:10px}.notice button{display:none}.panel-head{padding:15px}.panel-heading{gap:8px}.panel-heading small{display:none}.toolbar{padding:0 15px 13px}.search{width:135px}.ledger{min-width:700px}.ledger-wrap{overflow-x:auto}.detail-top{gap:8px}.tabs{gap:14px}.helper{flex-direction:column;gap:5px}.settings-grid{grid-template-columns:1fr}footer{padding:22px 15px;gap:15px;font-size:8px}.project-metrics{grid-template-columns:repeat(3,1fr)}.project-metrics .metric strong{font-size:18px}.form-grid{gap:12px}#toast{left:50%;width:max-content;max-width:90vw}.segmented button{padding:6px 9px}.review-grid{align-items:start}} .metric,.account-card{min-width:0}.day-button{white-space:nowrap}.field select{width:100%}.review label select{display:block;margin-top:4px}@media(max-width:480px){nav button{flex:1;white-space:nowrap;justify-content:center;padding:10px 3px;gap:0;font-size:10px}nav svg{display:none}.metric{padding:13px 11px}.metric strong{font-size:19px;white-space:nowrap;letter-spacing:-.8px}.metric strong small{font-size:12px;margin-right:2px}.metric-label{font-size:10px}.metric-label svg{width:13px}.metric-foot{font-size:8px;min-height:24px}.header-right{font-size:8px;white-space:nowrap}.topbar{padding:0 12px;gap:10px}#crumb{font-size:9px;white-space:nowrap}#crumb span{padding:0 4px}.text-button{font-size:9px;padding:0}.segmented button{white-space:nowrap;font-size:10px}.search{width:130px}.heading .subtitle{max-width:180px}.project-metrics{grid-template-columns:1fr}.account-grid{gap:10px}.account-card{padding:15px}.account-card strong{font-size:18px}.form-grid{grid-template-columns:1fr}.allocation-row{grid-template-columns:1fr 90px 15px}.allocation-row input[type=number]{width:90px}.modal-head,#form-body{padding-left:19px;padding-right:19px}} .company-ledger{min-width:940px}.company-ledger>thead>tr>th:first-child,.company-ledger>tbody>.day-row>td:first-child{width:16%}.company-ledger>thead>tr>th:last-child,.company-ledger>tbody>.day-row>td:last-child{width:17%}.company-ledger>thead>tr>th:nth-child(5){width:16%}.company-ledger .day-row .link{white-space:normal;font-size:10px} .procurement-review{margin-top:20px;padding:20px}.review-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.procurement-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.procurement-stats>div{background:#f4f8f5;border:1px solid #e3ece5;border-radius:6px;padding:14px;font-size:11px;color:#7b8e82}.procurement-stats strong{display:block;font-size:20px;color:#345f48;margin-top:8px;font-variant-numeric:tabular-nums}.review p.review-equation{background:#f8faf9;padding:13px;color:#657f6e;line-height:1.9}.reconcile-title{margin-top:22px}.procurement-review .review-grid input{width:145px}@media(max-width:780px){.procurement-stats{grid-template-columns:repeat(2,1fr)}.review-heading{align-items:flex-start}.procurement-stats strong{font-size:16px}} /* Historical source rows stay separate from the demonstration ledger. */ .history-details{min-width:950px}.history-details td{white-space:normal;max-width:250px}.history-details .money{white-space:nowrap}.history-details .tag{margin:3px 0}.history-raw{white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f7f9;padding:14px;font-size:11px}#history-form-body{padding:0 27px 23px;max-height:60vh;overflow:auto}#history-error{color:#b85c4d}.history-notice{font-size:12px;line-height:1.8}.panel+.panel{margin-top:20px}.project-strip{flex-wrap:wrap}.heading>.button{flex-shrink:0}#history-form-body .setting-line{gap:20px}.history-details small{overflow-wrap:anywhere}@media(max-width:480px){.heading>.button{padding:7px;font-size:10px}.metric strong{font-size:18px}.history-notice{font-size:10px}#history-form-body{padding-left:19px;padding-right:19px}} #live-body{padding:0 27px 23px;max-height:62vh;overflow:auto}#live-body .form-grid{margin-bottom:16px}#live-error{padding:0 27px;color:#b85c4d;font-size:12px}.live-add-buttons{margin:0 0 18px;flex-wrap:wrap}.link.danger{color:#b85c4d;margin-left:9px}#live-split{margin-top:14px}.details-table td .link{white-space:nowrap}.settings-list{padding:0 22px 15px} /* Clear ledger layout: shared by the imported company and project books. */ .history-mode{--bg:#f5f6fb;--ink:#263044;--muted:#9096a5;--line:#e5e8ef} .history-mode .sidebar{background:#fff;color:#687083;border-right:1px solid var(--line)} .history-mode .brand{color:#263044;font-size:18px;letter-spacing:0}.history-mode .brand-icon{background:#414cc6;color:#fff;border-radius:9px 9px 9px 2px;box-shadow:0 4px 12px #414cc620}.history-mode .brand-sub{color:#8e95a5;font-size:7px;letter-spacing:1.5px} .history-mode .workspace{background:#f7f8fc;border-color:#ececf3;color:#576071;padding:18px 12px}.history-mode .nav-label{color:#969baa}.history-mode nav{gap:10px}.history-mode nav button{color:#636d80;padding:15px 12px}.history-mode nav button.active{background:#eeefff;color:#3f49b5;font-weight:600}.history-mode nav button:hover{background:#f3f4fb}.history-mode .nav-count{background:#e2e5ff;color:#4b54ba}.history-mode .profile{border-color:var(--line);color:#586174}.history-mode .profile small,.history-mode .secure{color:#9299a7}.history-mode .avatar{background:#f2f3f9;color:#7e8698} .history-mode .button.primary{background:#414bcb;box-shadow:0 3px 6px #414bcb15}.history-mode .button.primary:hover{background:#343fb8}.history-mode .link{color:#414bb2}.history-mode .link.danger{color:#b8625c}.history-mode button:focus-visible,.history-mode summary:focus-visible{outline-color:#9ba4ed}.history-mode .topbar{height:70px}.history-mode main{padding-top:30px}.history-mode .heading h1{font-size:28px;font-weight:650}.history-mode .heading{margin-bottom:24px}.history-mode .subtitle{color:#8990a1;line-height:1.8}.history-mode .panel{border-color:#e1e5ed;box-shadow:0 2px 7px #25335202} .ledger-heading .button,.new-record-menu>summary{min-height:39px;padding:10px 17px}.new-record-menu{position:relative}.new-record-menu summary{list-style:none;cursor:pointer}.new-record-menu summary::-webkit-details-marker{display:none}.new-record-options{position:absolute;right:0;top:47px;width:155px;padding:7px;display:grid;gap:3px;background:white;box-shadow:0 8px 28px #26304425;border:1px solid var(--line);border-radius:8px;z-index:20}.new-record-options .button{border:0;justify-content:flex-start} .ledger-notice{min-height:62px;padding:17px 20px;background:#f8faff;border:1px dashed #c8d0e3;color:#738099;font-size:12px;border-radius:9px;margin-bottom:18px}.ledger-notice b{color:#596b88;font-weight:500} .ledger-controls{display:flex;gap:12px;align-items:center;margin-bottom:21px}.ledger-book-label,.ledger-controls select{display:block;min-width:210px;padding:10px 15px;border:1px solid #dfe3eb;background:white;border-radius:6px;font-size:12px;color:#4b566d}.ledger-controls select{cursor:pointer}.ledger-controls .month{min-width:165px;padding:10px 15px;border-color:#dfe3eb}.ledger-controls .segmented{background:#e9ebf2}.ledger-controls .segmented button{padding:7px 16px} .ledger-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:23px 0;background:white;border:1px solid #e1e5ed;border-radius:10px;margin-bottom:25px}.ledger-metrics .metric{border:0;border-right:1px solid #e8eaf1;border-radius:0;padding:0 23px;box-shadow:none}.ledger-metrics .metric:last-child{border-right:0}.ledger-metrics .metric strong{font-size:26px;margin-top:10px;letter-spacing:-.6px}.ledger-metrics .metric strong small{font-size:15px;color:#9da4b1;margin-right:4px}.ledger-metrics .metric:nth-child(2) strong{color:#258773}.ledger-metrics .metric:nth-child(3) strong{color:#be7068}.ledger-metrics .metric:nth-child(4) strong{color:#ae853c}.ledger-metrics .metric-label{font-size:11px}.ledger-metrics .metric-foot{font-size:10px;margin-top:7px;color:#999fad} .balance-panel .panel-head{padding:19px 22px}.balance-panel .panel-head>small{font-size:10px;color:#959dad}.clear-ledger{font-size:11px;min-width:820px}.clear-ledger>thead>tr>th,.clear-ledger>tbody>.day-row>td,.clear-ledger>tfoot>tr>td{padding:15px 12px;white-space:nowrap}.clear-ledger>thead>tr>th:first-child,.clear-ledger>tbody>.day-row>td:first-child,.clear-ledger>tfoot>tr>td:first-child{width:13%;padding-left:22px}.clear-ledger>thead>tr>th:last-child,.clear-ledger>tbody>.day-row>td:last-child,.clear-ledger>tfoot>tr>td:last-child{width:12%;text-align:center}.clear-ledger>thead>tr>th{background:#f8f9fc;color:#8992a3}.clear-ledger .day-button{font-size:11px;gap:4px}.clear-ledger .day-row.selected{background:#eef0ff;box-shadow:inset 3px 0 #5862cb}.clear-ledger .day-row.selected td{border-bottom-color:#e7eafa}.clear-ledger .day-row:hover{background:#f5f6fe}.clear-ledger tfoot{background:#f9faff;font-size:10px;border-top:2px solid #dce1ec;font-weight:600}.clear-ledger tfoot small{font-size:9px;color:#939cad;font-weight:400;margin-left:4px}.expense-text{color:#b86d66!important}.payable-text{color:#ad853f!important}.clear-details{background:#f5f7fc;border:0;padding:22px 20px 26px}.day-detail-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.day-detail-heading h3{font-size:13px;letter-spacing:0}.day-detail-heading>.link{font-size:11px} .detail-card{color:var(--ink);background:white;border:1px solid #dfe5ef;border-radius:8px;overflow:hidden;margin-top:12px}.detail-card-head{display:flex;align-items:center;min-height:65px;padding-right:17px;gap:14px}.detail-toggle{border:0;background:none;display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:17px 18px;text-align:left;font-size:12px;color:var(--ink)}.detail-toggle b{font-weight:600;white-space:nowrap}.detail-toggle small{font-size:10px;color:#919bab;white-space:nowrap}.detail-arrow{color:#a3aaba;font-size:16px;width:12px}.detail-icon{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:7px;background:#edf7f3;color:#459a83;font-size:19px}.expense .detail-icon{color:#bc8278;background:#fcf1ed}.payable .detail-icon{color:#b59760;background:#fcf6e9}.detail-amount{margin-left:auto;color:#667187;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.detail-card .card-add{padding:5px 0 5px 17px;border-left:1px solid #e5e8ef;min-width:95px;font-size:11px}.detail-card [id^=detail-]{border-top:1px solid #edf0f5}.detail-card .empty{padding:29px 15px;color:#939dac;font-size:11px}.detail-card .history-details{border:0;min-width:900px}.history-mode .details-table th{background:#fafbfe;color:#9099aa}.history-mode .details-table small{color:#8c96a7}.history-explanation{margin:17px 0;color:#8c95a4;font-size:11px}.history-explanation summary{cursor:pointer;padding:5px 0}.history-explanation p{line-height:1.9;padding:0 14px;max-width:950px}.history-mode details.panel>summary{cursor:pointer;color:#7e8799;font-size:11px;padding:14px 20px}.history-mode .panel-foot{font-size:10px;gap:15px;line-height:1.8}.history-mode .form-note{background:#f3f5fd;color:#7987a2} @media(min-width:1400px){.history-mode main{max-width:1410px;padding-left:40px;padding-right:40px}.ledger-metrics .metric strong{font-size:29px}} @media(max-width:1100px){.ledger-metrics .metric{padding:0 18px}.ledger-metrics .metric strong{font-size:22px}.ledger-wrap{overflow-x:auto}} @media(max-width:780px){.history-mode .sidebar{padding:15px;border-bottom:1px solid var(--line)}.history-mode nav{gap:3px}.history-mode nav button{padding:9px 7px}.history-mode .topbar{height:48px}.ledger-heading{align-items:flex-start;flex-wrap:wrap}.ledger-heading .buttons{flex-direction:row;align-items:center}.ledger-controls{flex-wrap:wrap;gap:8px}.ledger-controls select,.ledger-book-label{min-width:160px;flex:1}.ledger-controls .month{min-width:145px}.ledger-metrics{grid-template-columns:repeat(2,1fr);padding:0;gap:0}.ledger-metrics .metric{padding:18px;border-bottom:1px solid var(--line)}.ledger-metrics .metric:nth-child(2){border-right:0}.ledger-metrics .metric:nth-child(n+3){border-bottom:0}.ledger-metrics .metric-foot{min-height:0;font-size:9px}.ledger-metrics .metric strong{font-size:22px}.history-mode .heading .subtitle{max-width:none}.balance-panel .panel-head{padding:16px}.balance-panel .panel-head>small{font-size:9px}.ledger-notice{font-size:11px}.history-mode .brand{font-size:17px}} @media(max-width:480px){.ledger-metrics .metric{padding:15px 11px}.ledger-metrics .metric strong{font-size:18px}.ledger-metrics .metric-foot{font-size:8px}.ledger-metrics .metric-label{font-size:10px}.history-mode nav button{font-size:10px;padding:10px 3px}.ledger-heading .button,.new-record-menu>summary{font-size:11px;min-height:35px}.ledger-controls .segmented button{padding:7px 16px}} .detail-card .scroll-table{overflow-x:auto}.detail-card .history-details thead{position:sticky;top:0;z-index:1} @media(max-width:780px){.clear-details{position:sticky;left:0;width:calc(100vw - 32px);padding:18px 12px}.day-detail-heading h3{font-size:11px}.day-detail-heading .link{font-size:10px}.detail-card-head{padding-right:10px;gap:5px;flex-wrap:wrap}.detail-toggle{padding:12px 10px;gap:8px;flex-wrap:wrap}.detail-toggle small{font-size:9px}.detail-toggle b{font-size:11px}.detail-icon{width:25px;height:25px;font-size:16px}.detail-amount{font-size:11px}.detail-card .card-add{min-width:80px;padding-left:10px;font-size:10px}} @media(max-width:480px){.detail-toggle{flex-basis:100%;padding-bottom:5px}.detail-card .card-add{margin:0 8px 10px auto;border:0;padding:4px 6px}.detail-arrow{width:8px}.detail-card .empty{font-size:10px;padding:20px 12px}.detail-amount{flex-basis:100%;padding-left:41px}.history-mode .panel-foot{align-items:flex-start;flex-direction:column}} .alipay-accounts{grid-template-columns:repeat(2,1fr)}.alipay-accounts .account-card{padding:22px;border-color:#e1e5ed}.alipay-accounts .account-card.active{border-color:#8b93d9;box-shadow:0 0 0 1px #8b93d9}.alipay-accounts .account-card p{font-weight:600;margin-bottom:12px}.alipay-accounts .account-card strong{font-size:23px;color:#3f4c69}.alipay-card-stats{display:flex;gap:28px;margin-top:17px;font-size:11px;color:#929aad}.alipay-card-stats b{display:block;color:#54617a;font-size:16px;margin-top:4px;font-weight:500}.alipay-daily{min-width:980px}.alipay-daily>thead>tr>th:first-child,.alipay-daily>tbody>.day-row>td:first-child{width:16%}.alipay-daily .day-row td{font-size:11px}.alipay-day-details{padding-top:18px}.alipay-day-details>.subtitle{margin:0 0 14px}.alipay-transactions{overflow-x:auto}.alipay-transactions table{min-width:1050px}.alipay-transactions td{max-width:260px;overflow-wrap:anywhere}.alipay-transactions thead{position:sticky;top:0;z-index:1}.alipay-transactions details{font-size:10px;color:#8591a5}.alipay-notes p{line-height:1.9;color:#7d889a;font-size:11px}#alipay-body{padding:0 27px 22px}#alipay-body .field{margin-bottom:16px}#alipay-error{padding:0 27px;color:#bd695c;font-size:12px}#alipay-date,#alipay-filter{border:1px solid #dce1eb;padding:7px 10px;border-radius:5px;background:#fff;color:#59657b;font-size:12px}.ledger-controls>label{font-size:12px;color:#79859b}.ledger-controls>small{font-size:11px;color:#939bad}@media(max-width:780px){.alipay-accounts{grid-template-columns:1fr}.alipay-day-details .day-detail-heading{gap:12px;flex-wrap:wrap}.alipay-card-stats{justify-content:space-between}.alipay-day-details .subtitle{font-size:10px}} .prepaid-expense-note{display:block;font-size:8px;color:#939bad;margin-top:4px;font-weight:400;white-space:normal}.alipay-daily>thead>tr>th:first-child,.alipay-daily>tbody>.day-row>td:first-child{width:14%}.alipay-daily>thead>tr>th:last-child,.alipay-daily>tbody>.day-row>td:last-child{width:15%} @media(max-width:780px){.alipay-heading{flex-wrap:wrap;gap:16px}.alipay-heading>div:first-child{width:100%}.alipay-heading .buttons{flex-direction:row;flex-wrap:wrap}.alipay-heading .subtitle{max-width:none!important}} .daily-balance-check .panel-head { flex-wrap: wrap; gap: 12px; } /* Keep the two disclosure levels visible without relying on the arrow alone. */ .clear-ledger .day-button { gap: 8px; } .day-toggle-label { color: #5964b5; font-size: 10px; padding: 3px 7px; border-radius: 4px; background: #f0f2fa; } .selected .day-toggle-label { background: #5964b5; color: white; } .detail-card.is-open { border-color: #a4ace0; box-shadow: 0 2px 8px #404b8510; } .detail-card.is-open .detail-card-head { background: #eef1fc; border-left: 3px solid #5964b5; } .detail-card.is-closed .detail-card-head { background: #fff; } .detail-toggle-label { flex-shrink: 0; padding: 6px 10px; border: 1px solid #d9deef; border-radius: 5px; color: #4d58a6; background: white; font-size: 11px; font-weight: 600; white-space: nowrap; } .is-open .detail-toggle-label { border-color: #a4ace0; background: #5964b5; color: white; } .detail-toggle:focus-visible { outline: 2px solid #5964b5; outline-offset: -3px; } .ledger-entry-details .entry-date { width: 110px; white-space: nowrap; color: #69758a; } .ledger-entry-details .entry-summary { min-width: 145px; } .history-mode .ledger-entry-details .entry-title { color: #283348; font-size: 12px; font-weight: 600; margin-top: 0; } .ledger-entry-details th:nth-child(3) { width: 21%; } .ledger-entry-details th:nth-child(4) { width: 120px; } .ledger-entry-details th:last-child { width: 160px; } @media(max-width:480px) { .detail-toggle-label { margin-left: auto; } .detail-amount { flex-basis: auto; padding-left: 0; margin-left: 0; } } .ledger-amount-button { border: 0; background: transparent; padding: 5px 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .ledger-amount-button:hover { text-decoration: underline; text-underline-offset: 4px; } .ledger-amount-button:focus-visible, .funding-info:focus-visible { outline: 2px solid #5964b5; outline-offset: 3px; } .funding-info { display:inline-flex; align-items:center; justify-content:center; margin-left:2px; padding:4px; width:26px; height:26px; border:0; border-radius:6px; color:#8792a6; background:transparent; cursor:default; vertical-align:middle; } .funding-info svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;cursor:default}.funding-info:hover,.funding-info:focus-visible{color:#5964b5;background:#eef0fa} .funding-tooltip{position:fixed;z-index:1000;max-width:min(340px,calc(100vw - 16px));padding:12px 16px;border:1px solid #e2e6ef;border-radius:10px;background:#fff;color:#46536a;box-shadow:0 6px 22px #27365220;font-size:12px;line-height:1.8;white-space:pre-line;pointer-events:none}.funding-tooltip[hidden]{display:none} .project-navigation { margin: 0 0 20px; padding: 18px 20px; border: 1px solid #e0e5ef; border-radius: 9px; background: white; } .project-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .project-nav-head b { font-size: 13px; } .project-nav-head small { margin-left: 8px; color: #8b95a7; font-weight: 400; } .project-tabs { display: flex; gap: 9px; flex-wrap: wrap; } .project-tab { padding: 10px 17px; border: 1px solid #dde2ee; border-radius: 6px; background: #fafbfe; color: #536079; cursor: pointer; font: inherit; font-size: 12px; } .project-tab:hover { border-color: #838bd0; } .project-tab.active { background: #4d58c5; border-color: #4d58c5; color: white; font-weight: 600; box-shadow: 0 2px 6px #4d58c522; } .project-tab:focus-visible { outline: 2px solid #4d58c5; outline-offset: 3px; } .project-navigation .danger { color: #ad5e55; } .deleted-projects { border-top: 1px solid #edf0f6; margin-top: 15px; padding-top: 12px; color: #838d9f; font-size: 11px; } .deleted-projects summary { cursor: pointer; } @media(max-width:480px) { .project-navigation { padding: 14px; } .project-tab { padding: 9px 12px; } .project-nav-head .buttons { flex-wrap: wrap; } } .alipay-daily td small{display:block;margin-top:5px;font-size:10px;color:#939bad}.alipay-daily td{font-size:12px}.alipay-daily>thead>tr>th:first-child,.alipay-daily>tbody>tr>td:first-child{width:15%}.alipay-table-note{padding:12px 22px;margin:0;font-size:11px;line-height:1.8;color:#8993a5}#alipay-transactions-dialog{width:min(1200px,94vw);max-width:94vw}#alipay-transactions-body{padding:0 24px 24px} .prepaid-project-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.prepaid-project-option{display:flex;align-items:center;gap:9px;border:1px solid #e1e5ed;border-radius:6px;padding:9px 12px;font-size:12px}.prepaid-project-option input{width:auto;margin:0} .prepaid-month-panel{margin-bottom:20px}.prepaid-month-panel .panel-head{gap:20px}.prepaid-month-panel .ledger{min-width:680px} .category-field .buttons { gap: 16px; margin: 8px 0; } .category-field small { display: block; color: var(--muted); line-height: 1.6; } .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .auth-panel { width: min(460px, 100%); padding: 32px; } .auth-panel .field { margin: 18px 0; } .permission-option { display: flex; gap: 10px; align-items: center; margin: 14px 0; } .permission-option input { width: auto; } .partner-shell { max-width: 1280px; margin: 24px auto; padding: 20px; } .project-opening-input { max-width: 180px; } #history-group-dialog { width: min(1320px, 96vw); max-width: 96vw; } #history-group-dialog .group-records { padding: 0 24px 24px; } #history-group-dialog .scroll-table { max-height: none; overflow-y: visible; } .category-field { position: relative; } .category-options { position: absolute; top: 68px; left: 0; right: 0; z-index: 5; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px #26324b22; max-height: 160px; overflow-y: auto; padding: 6px; } .category-options button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 10px; color: var(--ink); border-radius: 5px; } .category-options button:hover, .category-options button[aria-selected="true"] { background: #eeeeff; } .category-options p { margin: 8px; color: var(--muted); font-size: 12px; } dialog .modal-head > button { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: #f0f2f7; color: #596477; font-size: 30px; line-height: 1; } dialog .modal-head > button:hover { background: #e4e8f0; color: #263044; } .history-details tr.pending-highlight > td { background: #fff5d9; border-top: 2px solid #deb052; border-bottom: 2px solid #deb052; } .history-details tr.pending-highlight { outline: none; scroll-margin: 80px; } .pending-location { color: #966313; font-weight: 600; } .pending-location button { margin-left: 12px; } .payment-bills-body{padding:24px}.payment-bills-body .buttons{flex-wrap:wrap;gap:12px}.payment-bills-body label.button{position:relative;cursor:pointer}.payment-bills-body input[type=file]{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.bill-preview{margin-top:24px;padding:20px;border:1px solid #d9deee;border-radius:12px;background:#f8f9ff}.bill-preview .ledger-wrap{margin-top:18px}.payment-bills-body .subtitle{line-height:1.8} .settings-module-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0}.settings-module-tabs .project-tab{padding:11px 22px} .payroll-form-body{padding:0 27px 23px;max-height:62vh;overflow:auto}.payroll-form-body .form-grid{margin-bottom:16px} /* Cashflow colors: income red, expenditure green. */ .income,.ledger-metrics .metric:nth-child(2) strong{color:#be5149!important} .expense-text,.ledger-metrics .metric:nth-child(3) strong{color:#16856b!important} .detail-card.income .detail-toggle{color:#be5149}.detail-card.expense .detail-toggle,.detail-card.supplier .detail-toggle,.detail-card.funding .detail-toggle{color:#16856b} .income .detail-icon{color:#be5149;background:#fcf1ed}.expense .detail-icon,.supplier .detail-icon,.funding .detail-icon{color:#16856b;background:#edf7f3} .clear-ledger .day-button{font-size:13px;font-weight:600} .detail-card.income .detail-amount{color:#be5149}.detail-card.expense .detail-amount,.detail-card.supplier .detail-amount,.detail-card.funding .detail-amount{color:#16856b} .alipay-daily{min-width:980px}.alipay-daily>thead>tr>th,.alipay-daily>tbody>tr>td{padding:14px 10px}.alipay-daily>thead>tr>th:first-child,.alipay-daily>tbody>tr>td:first-child{width:12%}.alipay-daily>thead>tr>th:last-child,.alipay-daily>tbody>tr>td:last-child{width:11%}.alipay-daily th small{display:block;font-weight:400} .alipay-day-toggle{border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:5px 0;white-space:nowrap}.alipay-day-toggle small{color:#5d61bc!important}.alipay-day-toggle:focus-visible{outline:2px solid #5d61bc;outline-offset:4px;border-radius:3px}.alipay-summary-row.is-expanded{background:#eef0ff}.alipay-closing{font-weight:600}.alipay-daily>tbody>.alipay-raw-row>td{padding:0;background:#f6f7fc}.alipay-raw-details{padding:16px}.alipay-raw-details h4{margin:0 0 12px;font-size:13px}.alipay-raw-details h4 small{display:inline;margin-left:8px;font-weight:400}.alipay-raw-scroll{overflow-x:auto}.alipay-raw-table{width:100%;min-width:1700px;background:#fff;border:1px solid #e1e5ed;border-collapse:collapse;table-layout:fixed}.alipay-raw-table th,.alipay-raw-table td{padding:12px;text-align:left;white-space:normal;overflow-wrap:anywhere;border-bottom:1px solid #e1e5ed;font-size:12px}.alipay-raw-table th{background:#f8f9fc;color:#8993a5;font-weight:500}.alipay-raw-table th:nth-child(6){width:240px}.alipay-raw-table th:nth-child(11),.alipay-raw-table th:nth-child(12){width:210px}.alipay-raw-table th:nth-child(7),.alipay-raw-table th:nth-child(8){width:90px} .alipay-raw-table th:first-child{width:85px}.alipay-raw-table input[type="checkbox"]{width:18px;height:18px;cursor:pointer}.alipay-transfer-panel .button{margin-right:8px}.alipay-transfer-panel .setting-line{gap:16px} .alipay-raw-details h4{text-align:left}.alipay-raw-table th:nth-child(2){width:150px} .alibaba-account{gap:18px}.alibaba-account>div:first-child{min-width:0;overflow-wrap:anywhere}.alibaba-account .buttons{flex-shrink:0}.alibaba-error{color:#ba5149;font-size:12px}.alibaba-form-body{padding:0 27px 22px;max-height:65vh;overflow:auto}.alibaba-form-body .form-grid{margin-bottom:16px}.alibaba-form-body .permission-option{display:flex;align-items:center;gap:8px;margin-top:16px}.alibaba-test-result{margin-top:22px;padding:20px;background:#f7f8fc;border:1px solid #e1e5f0;border-radius:8px;overflow-wrap:anywhere}.alibaba-test-result>p{font-size:12px}.alibaba-test-result h4{font-size:12px;margin-bottom:9px}.alibaba-order-info{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:12px}.alibaba-order-info dt{color:#8993a5}.alibaba-order-info dd{margin:4px 0 0}.alibaba-test-result .details-table{min-width:460px}#alibaba-settings button:disabled{opacity:.55;cursor:default}@media(max-width:680px){.alibaba-account{align-items:flex-start;flex-direction:column}.alibaba-order-info{grid-template-columns:1fr}.alibaba-form-body{padding:0 19px 20px}} .alibaba-sync-section,.alibaba-orders-section{margin-top:26px;padding-top:22px;border-top:1px solid #e3e7ee}.alibaba-section-head,.alibaba-pagination{display:flex;justify-content:space-between;align-items:center;gap:14px}.alibaba-sync-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:17px 0}.alibaba-sync-summary>div{padding:15px;background:#f6f7fc;border:1px solid #e4e7f1;border-radius:7px}.alibaba-sync-summary small,.alibaba-sync-summary span{display:block;color:#8993a5;font-size:11px}.alibaba-sync-summary strong{display:block;font-size:17px;margin:7px 0;color:#303a50}.alibaba-sync-accounts,.alibaba-orders-table{margin-top:16px;min-width:820px}.alibaba-pagination{font-size:12px;color:#8993a5;padding:16px 0 3px}.alibaba-account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.alibaba-order-dialog{width:860px}.alibaba-order-dialog .alibaba-test-result{margin:0}.alibaba-orders-section .field select{max-width:240px}@media(max-width:680px){.alibaba-sync-summary{grid-template-columns:1fr}.alibaba-section-head{align-items:flex-start;flex-wrap:wrap}.alibaba-section-head .buttons{flex-wrap:wrap}} /* Liquid Glass presentation layer. Business selectors and DOM remain unchanged. */ html[data-appearance="glass"], html[data-appearance="glass"] body.history-mode { --bg: #e8eae7; --ink: #25332f; --muted: #616e69; --line: rgba(56, 75, 67, .13); --green: #276d5b; --green-bg: #e6f0eb; --orange: #91651e; --accent: #286b5b; --accent-soft: #e3eee8; --glass-edge: rgba(255, 255, 255, .76); --glass-solid: #f2f5ed; --glass-shadow: 0 8px 28px rgba(39, 55, 47, .07), inset 0 1px 0 rgba(255, 255, 255, .86), inset 0 -1px 0 rgba(67, 81, 72, .05); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) { background: radial-gradient(ellipse at 12% 6%, rgba(255, 253, 242, .58), transparent 58%), radial-gradient(ellipse at 90% 72%, rgba(154, 180, 178, .22), transparent 68%), linear-gradient(122deg, #c6d2cf, #e9eae4 56%, #ccd5d4); background-attachment: fixed; min-height: 100vh; color: var(--ink); -webkit-font-smoothing: antialiased; color-scheme: light; } /* Clear controls, regular glass navigation, and quieter frosted data surfaces. */ :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.glass-clear, .topbar, .search, .ledger-controls, .procurement-tabs, .settings-module-tabs) { background: linear-gradient(125deg, rgba(255,255,255,.52), rgba(247,250,246,.25)); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(135%) brightness(1.03); backdrop-filter: blur(20px) saturate(135%) brightness(1.03); box-shadow: var(--glass-shadow); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.glass-regular, .sidebar, dialog, .new-record-options, .category-options) { background: linear-gradient(135deg, rgba(255,255,252,.78), rgba(234,241,234,.63)); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(28px) saturate(145%) brightness(1.02); backdrop-filter: blur(28px) saturate(145%) brightness(1.02); box-shadow: var(--glass-shadow); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.frosted-content, .panel, .metric, .account-card, .project-navigation, .procurement-metrics > div) { background: rgba(253,254,252,.9); border: 1px solid rgba(255,255,255,.92); border-radius: 13px; box-shadow: 0 3px 14px rgba(39,55,47,.035), inset 0 0 0 1px rgba(56,75,67,.045); } /* Keep the stronger optical treatment on navigation, not on financial content. */ :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.sidebar, .topbar) { background: linear-gradient(115deg, rgba(255,255,255,.48), rgba(255,255,255,.08) 38%, rgba(239,248,244,.04) 70%, rgba(255,255,255,.22)), rgba(232,242,237,.18); border-color: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.025); backdrop-filter: blur(24px) saturate(150%) brightness(1.025); box-shadow: 0 14px 36px rgba(37,63,53,.1), 0 2px 5px rgba(37,63,53,.04), inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(56,84,71,.12); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .topbar { background: linear-gradient(105deg, rgba(255,255,255,.42), rgba(255,255,255,.07) 48%, rgba(241,249,245,.18)); -webkit-backdrop-filter: blur(20px) saturate(145%) brightness(1.035); backdrop-filter: blur(20px) saturate(145%) brightness(1.035); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .sidebar { inset: 14px auto 14px 14px; width: 224px; border-radius: 18px; padding: 27px 14px 18px; color: var(--muted); overflow-y: auto; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .brand { color: var(--ink); gap: 10px; padding: 0 10px; font-size: 17px; letter-spacing: -.3px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .brand-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, #577e6f, #2a5145); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #ffffff66, 0 3px 8px #304e4320; color: #fff; font: 600 20px var(--font); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .brand-sub { font-size: 7px; color: #667a70; letter-spacing: 1.35px; margin-top: 5px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .workspace { background: #ffffff3b; border-color: #788a7324; border-radius: 8px; color: #52675a; margin: 27px 5px 20px; padding: 12px 10px; font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .nav-label { color: #69776d; font-size: 10px; letter-spacing: 1px; padding: 0 13px; margin-bottom: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav { gap: 5px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav button { color: #4b5e54; padding: 13px 12px; min-height: 44px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; gap: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav button:hover { background: #ffffff70; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav button.active { color: #214e3f; background: linear-gradient(140deg, #ffffffdb, #e5eee6b3); border-color: #ffffffeb; box-shadow: 0 3px 10px #34543a0d, inset 0 1px 0 white; font-weight: 600; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav svg { width: 18px; height: 18px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .nav-count { background: #d7e7dd; color: #315e49; border-radius: 5px; font-size: 9px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .secure { color: #69776f; font-size: 10px; padding: 18px 10px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .profile { border-color: var(--line); padding: 18px 8px 0; color: #40564a; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .profile small { color: #65766b; font-size: 10px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .avatar { background: #dfe8de; color: #47614d; box-shadow: inset 0 1px 1px #ffffffbb; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .online { background: #528369; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .shell { margin-left: 252px; min-width: 0; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .topbar { margin: 14px 24px 0 0; padding: 0 24px; height: 54px; border-radius: 12px; color: #526158; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #crumb { font-size: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #crumb span { color: #7e8b80; padding: 0 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .header-right { color: #5c6c61; gap: 12px; font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .header-right .text-button { border: 1px solid #ffffffc7; background: #ffffff50; border-radius: 6px; padding: 5px 10px; color: #42594b; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) main { max-width: 1660px; padding: 30px 26px 10px 4px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .heading { gap: 22px; margin-bottom: 24px; flex-wrap: wrap; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .heading h1 { font-size: 27px; font-weight: 650; letter-spacing: -.8px; color: #253c31; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .eyebrow { color: #65776a; font-size: 9px; letter-spacing: 2px; margin-bottom: 9px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .subtitle { color: var(--muted); font-size: 12px; line-height: 1.8; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) h2 { font-size: 18px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) h3 { font-size: 14px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .buttons { flex-wrap: wrap; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(button, .button, summary, input, select, textarea) { -webkit-tap-highlight-color: transparent; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(button, .button, summary) { transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(button, .button, summary):active:not(:disabled) { transform: translateY(1px); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .button { min-height: 35px; padding: 8px 14px; border-radius: 8px; font-size: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .button.secondary { color: #3d5548; background: linear-gradient(#ffffffd9, #f3f7f1b0); border-color: #ffffffed; box-shadow: 0 2px 4px #2a49310a, inset 0 0 0 1px #657f5e17; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .button.secondary:hover { background: #fff; border-color: #c0d0c3; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .button.primary { background: linear-gradient(#3d7a65, #2c6350); border: 1px solid #285a48; color: white; box-shadow: inset 0 1px 0 #ffffff33, 0 2px 4px #1b3b2915; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .button.primary:hover { background: #295a48; box-shadow: inset 0 1px 0 #ffffff40, 0 3px 7px #1b3b2920; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .button.small { min-height: 30px; padding: 5px 10px; font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.button.ghost, .link) { color: #286b52; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .link { font-size: 11px; border-radius: 4px; padding: 4px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .link:hover { background: #dfece4; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .link.danger { color: #a53e35; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid #44856fb3; outline-offset: 3px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) button:disabled { cursor: not-allowed; opacity: .58; transform: none; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-notice { min-height: auto; padding: 12px 16px; margin-bottom: 18px; border: 1px solid #ffffff8a; border-radius: 9px; background: #ffffff42; color: #53675b; font-size: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .notice { color: #506657; background: #f1f6eee0; border-color: #c8d8c53d; line-height: 1.8; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .notice b { color: #385944; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-controls { width: fit-content; max-width: 100%; padding: 6px; gap: 8px; border-radius: 11px; flex-wrap: wrap; margin-bottom: 20px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.ledger-book-label, .ledger-controls select, .ledger-controls .month) { min-width: 155px; padding: 8px 12px; border: 1px solid #c2cec0a3; border-radius: 7px; background: #ffffff96; color: #3f5648; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .segmented { background: #c7d3c448; border: 1px solid #afbfad45; border-radius: 8px; padding: 3px; gap: 2px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .segmented button { padding: 7px 15px; color: #55675a; border-radius: 5px; font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .segmented button.active { color: #2d503c; background: #fffffff2; box-shadow: 0 1px 4px #304b3220; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .search { border-radius: 8px; color: #354f3e; font-size: 12px; min-height: 34px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) input::placeholder, :where(html[data-appearance="glass"]) :is(body, body.history-mode) textarea::placeholder { color: #6b796e; opacity: 1; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .metrics { gap: 14px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics { grid-template-columns: 1.3fr 1fr 1fr .85fr; padding: 0; gap: 0; background: #fcfdfaeb; border: 1px solid #fffffff5; border-radius: 13px; box-shadow: 0 3px 14px #27372f09; overflow: hidden; margin-bottom: 24px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 24px 22px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric:first-child { background: linear-gradient(120deg, #e1ebe0b3, #f3f7ef80); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric:last-child { border-right: 0; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .metric-label { font-size: 12px; color: #596c5e; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .metric strong { font-size: clamp(23px, 2vw, 32px); letter-spacing: -.8px; font-weight: 600; color: #2c4635; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .metric strong small { color: #637965; font-size: 15px; font-weight: 400; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .metric-foot { color: #657369; font-size: 11px; margin-top: 9px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric:nth-child(4) strong { color: #91651e; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .panel-head { padding: 19px 22px; gap: 12px; flex-wrap: wrap; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.panel-heading small, .balance-panel .panel-head > small) { color: #69776e; font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.ledger, .details-table, .alipay-raw-table) { color: #33463b; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.ledger th, .details-table th, .clear-ledger > thead > tr > th, .alipay-raw-table th) { background: #f0f3edef; color: #596c5e; border-color: var(--line); font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .clear-ledger { min-width: 1060px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .clear-ledger > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child { width: 150px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger td { border-bottom-color: #748c651a; font-size: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .clear-ledger > tbody > .day-row > td { padding-top: 17px; padding-bottom: 17px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .day-row:hover { background: #edf3e9; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .clear-ledger .day-row.selected, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .day-row.selected, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .alipay-summary-row.is-expanded { background: #e4eee1; box-shadow: inset 3px 0 #4a7958; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .day-toggle-label { background: #eaf0e6; color: #42664a; font-size: 10px; border-radius: 4px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .selected .day-toggle-label { background: #3b6a4d; color: white; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .clear-ledger tfoot { background: #eff4ec; border-top: 1px solid #becdba; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.panel-foot, .modal-foot) { background: #f4f7f0ad; color: #5e7062; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .panel-foot { font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .panel-foot b { color: #3f6248; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.clear-details, .day-details, .alipay-daily > tbody > .alipay-raw-row > td) { background: #edf2e9; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .detail-card { background: #fcfdfb; border-color: #d5dfd0; border-radius: 9px; box-shadow: none; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .detail-card.is-open { border-color: #9bb69c; box-shadow: 0 2px 6px #344f3108; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .detail-card.is-open .detail-card-head { background: #e3eddf; border-left-color: #57835a; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .detail-card.is-closed .detail-card-head { background: #fcfdfb; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .detail-toggle-label { color: #3e6a48; border-color: #c4d5c0; border-radius: 5px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .is-open .detail-toggle-label { background: #3b6a4d; border-color: #3b6a4d; color: white; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.detail-toggle small, .details-table small, .alipay-daily td small, .alipay-table-note, .prepaid-expense-note, .history-explanation, .muted) { color: #69776c; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .details-table { background: #fdfefb; border-color: #d9e2d4; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .details-table td { border-bottom-color: #dfe6db; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tag { padding: 3px 7px; border-radius: 5px; font-size: 10px; line-height: 1.5; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tag.warn, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .count { background: #f4e9d2; color: #805913; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tag.ok { background: #e2eee0; color: #3c6a41; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tag.gray { background: #e8ede5; color: #52664f; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tag.blue { background: #e4edf2; color: #3f657d; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-tab { border-color: transparent; color: #52644f; border-radius: 7px; background: transparent; padding: 9px 14px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-tab:hover { background: #ffffffa1; border-color: #c6d4bf; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-tab.active, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-strip button.active { color: #fff; background: #3d6d52; border-color: #3d6d52; box-shadow: inset 0 1px 0 #ffffff26; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.settings-module-tabs, .procurement-tabs) { padding: 6px; border-radius: 11px; gap: 5px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-navigation { padding: 18px 20px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .account-card { padding: 22px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .account-card.active { border-color: #8daa87; box-shadow: inset 0 0 0 1px #8daa8766, 0 3px 9px #3b573510; background: linear-gradient(130deg, #f6fbf1ef, #e8f0e2e8); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .account-card strong, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .alipay-card-stats b { color: #345239; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .account-card small, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .alipay-card-stats { color: #62725f; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .account-symbol { background: #e3ecdc; color: #527343; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #alipay-date, :where(html[data-appearance="glass"]) :is(body, body.history-mode) #alipay-filter { border-color: #bdcbb7; background: #ffffffe8; color: #304735; border-radius: 7px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-controls > small, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-controls > label, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-nav-head small { color: #61705e; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .alipay-day-toggle small { color: #426d50 !important; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tabs button { color: #60745f; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .tabs button.active { color: #315d3e; border-bottom-color: #426f4c; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { color: #304735; border: 1px solid #bdcbb7; border-radius: 7px; background-color: #ffffffe8; padding: 8px 10px; font: inherit; font-size: 12px; min-height: 35px; max-width: 100%; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(input, select, textarea):disabled { background-color: #e8ede4; color: #677460; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(input[type=checkbox], input[type=radio]) { accent-color: #3a7153; width: 16px; height: 16px; flex-shrink: 0; } /* File inputs retain native selection, accept filters, and disabled states. */ :where(html[data-appearance="glass"]) :is(body, body.history-mode) label.button:has(> input[type=file]) { position: relative; cursor: pointer; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) label.button > input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) input[type=file] { max-width: 100%; background: transparent; border: 0; padding: 2px; color: var(--muted); font: inherit; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) input[type=file]::file-selector-button { border: 1px solid #285a48; border-radius: 8px; padding: 8px 14px; min-height: 35px; background: linear-gradient(#3d7a65, #2c6350); color: #fff; box-shadow: inset 0 1px 0 #ffffff30, 0 2px 5px #233f2e1a; margin-right: 10px; font: inherit; font-size: 12px; cursor: pointer; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) input[type=file]:enabled:hover::file-selector-button { background: #295a48; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) label.button:has(input[type=file]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) label.button:has(input[type=file]:disabled), :where(html[data-appearance="glass"]) :is(body, body.history-mode) input[type=file]:disabled::file-selector-button { opacity: .55; cursor: not-allowed; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .field { color: #4c614c; font-size: 12px; gap: 8px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.form-note, .bill-preview, .review, .alibaba-test-result) { background: #f0f5eb; border-color: #d1dec9; color: #536d4b; border-radius: 8px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) dialog { border-radius: 16px; box-shadow: 0 24px 80px #1e392d33, 0 2px 8px #1e392d17, inset 0 1px 0 white; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) dialog::backdrop { background: #293a343d; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) dialog .modal-head { padding: 22px 27px 20px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) dialog .modal-head > button { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: #ffffff8f; border: 1px solid #ffffffd9; color: #536a53; font-size: 25px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) dialog .modal-head > button:hover { background: #fff; color: #244a2c; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .modal-foot { padding: 16px 27px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .new-record-options { border-radius: 10px; padding: 6px; min-width: 170px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .new-record-options .button { background: transparent; box-shadow: none; min-height: 36px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .new-record-options .button:hover, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .category-options button:hover, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .category-options button[aria-selected=true] { background: #dcead6; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .category-options { border-radius: 9px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .setting-line { min-height: 62px; border-color: var(--line); gap: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .setting-line small { color: #63745f; font-size: 11px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .empty { color: #62745e; font-size: 13px; padding: 42px 20px; line-height: 1.8; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .procurement-metrics > div { border-radius: 10px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .procurement-metrics .attention { background: #fbf4e5; border-color: #e4d0a5; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .procurement-warning { border-left-color: #aa7a32; background: #f8f0df; color: #78531d; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .alibaba-sync-summary > div { background: #f0f5eb; border-color: #d5e1ce; border-radius: 8px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #toast { background: #eff5eaf5; color: #29482d; border: 1px solid #fff; border-radius: 10px; box-shadow: 0 8px 30px #263d2829; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) footer { padding: 22px 26px 24px 4px; color: #637360; font-size: 10px; gap: 20px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .auth-shell { padding: 30px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .auth-panel { padding: 36px; background: linear-gradient(140deg, #ffffffdc, #f0f5e7c7); border: 1px solid #fff; box-shadow: 0 20px 65px #3e57361c, inset 0 1px 0 white; border-radius: 18px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .auth-panel h1 { font-size: 23px; margin-bottom: 26px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .auth-panel h2 { font-size: 16px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .auth-panel .button { width: 100%; margin: 10px 0; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .partner-shell { max-width: 1480px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .partner-shell > .panel-head { margin-bottom: 20px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .partner-shell .project-tabs { padding: 0 22px 18px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.ledger-wrap, .scroll-table, .alipay-raw-scroll) { overflow-x: auto; } @media (min-width: 1600px) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) main { padding-top: 36px; } } @media (max-width: 1200px) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) .sidebar { width: 200px; left: 10px; padding-left: 9px; padding-right: 9px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .shell { margin-left: 222px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .brand { font-size: 16px; padding: 0 8px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .topbar { margin-right: 16px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) main { padding-right: 16px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric { padding: 20px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric:nth-child(2) { border-right: 0; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } @media (max-width: 780px) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) .sidebar { position: static; width: auto; margin: 10px; padding: 16px 12px; border-radius: 14px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .shell { margin-left: 0; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav { display: flex; flex-wrap: wrap; margin-top: 16px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav button { flex: 1 0 130px; padding: 9px; min-height: 38px; font-size: 12px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .topbar { margin: 0 10px; padding: 0 14px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) main { padding: 24px 12px 10px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .heading .buttons { flex-direction: row; flex-wrap: wrap; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .heading h1 { font-size: 24px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .heading .subtitle { max-width: none; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .ledger-metrics .metric { padding: 18px 14px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .metric strong { font-size: 23px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .notice button { display: inline-flex; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .toolbar { flex-wrap: wrap; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) footer { padding: 18px 12px; flex-wrap: wrap; } } /* The new appearance follows the OS; classic retains its original colors. */ html[data-appearance="glass"][data-color-scheme="dark"], html[data-appearance="glass"][data-color-scheme="dark"] body.history-mode { --bg: #1b2831; --ink: #e5ecee; --muted: #b2c0c6; --line: rgba(190,211,221,.14); --green: #78cbb0; --green-bg: #223d36; --orange: #e6bb78; --accent: #84c9b3; --accent-soft: #2b4942; --glass-edge: rgba(222,239,245,.24); --glass-solid: #293740; --glass-shadow: 0 10px 30px #080e1530, inset 0 1px 0 #e6f6ff24, inset 0 -1px 0 #0c162d40; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) { background: radial-gradient(ellipse at 8% 4%, #67818a24, transparent 60%), radial-gradient(ellipse at 90% 75%, #477d7717, transparent 68%), linear-gradient(125deg, #172a36, #27353c 58%, #1d2a35); color: var(--ink); color-scheme: dark; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.glass-clear, .topbar, .search, .ledger-controls, .procurement-tabs, .settings-module-tabs) { background: linear-gradient(120deg, #c8e8f019, #bfdad306); border-color: var(--glass-edge); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.glass-regular, .sidebar, dialog, .new-record-options, .category-options) { background: linear-gradient(135deg, #344b56e8, #24323dee); border-color: var(--glass-edge); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.sidebar, .topbar) { background: linear-gradient(115deg, #d3ecf51c, #c4e4ed04 42%, #bdddd208 70%, #d8f0ec14), #152a3733; box-shadow: 0 16px 40px #06101c30, 0 2px 6px #07131c1a, inset 0 1px 0 #ecfaff4d, inset 1px 0 0 #d2edff21, inset 0 -1px 0 #08152255; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.frosted-content, .panel, .metric, .account-card, .project-navigation, .procurement-metrics > div, .ledger-metrics) { background: #24313af7; border-color: #d4e6ee21; box-shadow: 0 3px 12px #050e1814, inset 0 1px 0 #ffffff06; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.brand, .heading h1, h2, h3, .metric strong, .account-card strong, .alipay-card-stats b, .balance, .out, .detail-toggle, .detail-amount, .history-mode .ledger-entry-details .entry-title) { color: #e5ecee; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .brand-icon { background: linear-gradient(145deg, #548778, #315a50); color: white; border-color: #c9efdf55; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.brand-sub, .workspace, .nav-label, .secure, .profile, .profile small, .topbar, #crumb, .header-right, .eyebrow, .subtitle, .metric-label, .metric-foot, .metric strong small, .panel-heading small, .balance-panel .panel-head > small, .detail-toggle small, .details-table small, .alipay-daily td small, .alipay-table-note, .prepaid-expense-note, .history-explanation, .muted, .account-card small, .alipay-card-stats, .field, .setting-line small, .empty, footer, .ledger-controls > small, .ledger-controls > label, .project-nav-head small, .procurement-metrics small, .procurement-metrics span, .procurement-toolbar small, .procurement-table small, .alibaba-sync-summary small, .alibaba-sync-summary span, .alibaba-pagination, .alibaba-order-info dt) { color: var(--muted); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .workspace { background: #d0e7ef08; border-color: #d1e8f51f; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) #nav button { color: #d1e0e4; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) #nav button:hover { background: #daf2ff12; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) #nav button.active { background: linear-gradient(130deg, #d7f3ec25, #d7eef412); border-color: #d9f4f53d; color: #f0faf8; box-shadow: inset 0 1px 0 #e5ffff30, 0 3px 10px #060c1814; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .nav-count, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .avatar { color: #c0e4d8; background: #608d7a40; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .header-right .text-button { color: #d9e8e8; background: #e0f1ef0d; border-color: #dbeef426; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .button.secondary { color: #dce8e8; background: linear-gradient(#9eb8c320, #9bb4bd12); border-color: #d4e5ee26; box-shadow: inset 0 1px 0 #ffffff0d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .button.secondary:hover { background: #c6e3e52b; border-color: #c4e2e54d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .button.primary { background: linear-gradient(#427d6a, #326451); border-color: #9bdbbf4d; color: #fff; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .button.primary:hover { background: #477e68; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.button.ghost, .link) { color: #8ed4bb; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .link:hover { background: #a5dcbe17; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .link.danger, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .alibaba-error { color: #f2a29a; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.notice, .ledger-notice, .form-note, .bill-preview, .review, .alibaba-test-result) { background: #33494080; color: #bfd5c6; border-color: #abcbb424; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .notice b, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .panel-foot b { color: #c0e2d0; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.ledger-book-label, .ledger-controls select, .ledger-controls .month) { color: #d5e4e3; background: #9ab8bd12; border-color: #b8cfd333; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .segmented { background: #101d274d; border-color: #b5cfd322; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .segmented button { color: #b7c9ce; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .segmented button.active { color: #eff9f5; background: #c7e2d323; box-shadow: inset 0 1px 0 #ffffff18, 0 1px 4px #00000018; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .ledger-metrics .metric { background: transparent; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .ledger-metrics .metric:first-child { background: linear-gradient(120deg, #497c6747, #405e4e1a); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.income, .ledger-metrics .metric:nth-child(2) strong) { color: #f2958a !important; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.expense-text, .ledger-metrics .metric:nth-child(3) strong) { color: #7ed4b5 !important; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.payable-text, .ledger-metrics .metric:nth-child(4) strong) { color: #e8be7d !important; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.ledger, .details-table, .alipay-raw-table) { color: #dce7e8; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.ledger th, .details-table th, .clear-ledger > thead > tr > th, .alipay-raw-table th, .clear-ledger tfoot) { background: #2b3b43; color: #bdcdd2; border-color: var(--line); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.details-table, .alipay-raw-table) { background: #23323b; border-color: var(--line); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.ledger td, .details-table td, .alipay-raw-table td) { border-bottom-color: var(--line); } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .day-row:hover { background: #cedfd00b; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.clear-ledger .day-row.selected, .day-row.selected, .alipay-summary-row.is-expanded) { background: #324d46; box-shadow: inset 3px 0 #82b698; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .day-toggle-label { background: #9ecbb522; color: #c1e1cd; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .selected .day-toggle-label { background: #42775e; color: #fff; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.clear-details, .day-details, .alipay-daily > tbody > .alipay-raw-row > td) { background: #1b2b32; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .detail-card { background: #25353d; border-color: #c0dcd32b; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .detail-card.is-open { border-color: #80b99b70; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .detail-card.is-open .detail-card-head { background: #2f4a40; border-left-color: #82b698; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .detail-card.is-closed .detail-card-head { background: #25353d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .detail-toggle-label { background: #d3efdc0d; color: #c4e7cf; border-color: #9ac7a54d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .is-open .detail-toggle-label { background: #426e51; color: white; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .detail-card.income :is(.detail-toggle, .detail-amount) { color: #f2958a; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.detail-card.expense, .detail-card.supplier, .detail-card.funding) :is(.detail-toggle, .detail-amount) { color: #7ed4b5; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.detail-icon, .account-symbol) { background: #b3d7bc19; color: #c4e3c5; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.panel-foot, .modal-foot) { background: #1b2a334d; color: #b2c9c0; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .tag.warn, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .count { background: #624d2e70; color: #f1cd91; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .tag.ok { background: #385c4266; color: #a9d8b3; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .tag.gray { background: #586a6533; color: #c0d0c9; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .tag.blue { background: #39566d70; color: #b0d3eb; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .project-tab, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .project-strip button { color: #c4d7ca; background: transparent; border-color: transparent; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .project-tab:hover { background: #e2f1e412; border-color: #bfdcc32b; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .project-tab.active, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .project-strip button.active { color: #fff; background: #3c6953; border-color: #82ae8f40; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .account-card.active { background: linear-gradient(130deg, #304a3de8, #263c39e8); border-color: #81b79c80; box-shadow: inset 0 1px 0 #cbecdd14; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .alipay-day-toggle small { color: #aad5bd !important; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .tabs button { color: #b2c7b7; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .tabs button.active { color: #cfecd4; border-bottom-color: #91b89b; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, #alipay-date, #alipay-filter) { background-color: #1b2b33ed; color: #e2eeea; border-color: #78978b70; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) input::placeholder, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) textarea::placeholder { color: #a4b9ad; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(input, select, textarea):disabled { background-color: #2e3d42; color: #a3b5b0; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) input[type=file] { color: #e2eeea; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) input[type=file]::file-selector-button { background: linear-gradient(#427d6a, #326451); color: #fff; border-color: #9bdbbf4d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(button, input, select, textarea, summary, a):focus-visible { outline-color: #a5d5be; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) dialog { box-shadow: 0 24px 80px #07101866, inset 0 1px 0 #ffffff30; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) dialog::backdrop { background: #050e2259; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) dialog .modal-head > button { background: #d0e5ed14; color: #d9ece3; border-color: #d6eef229; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) dialog .modal-head > button:hover { background: #d0e5ed29; color: white; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .new-record-options .button { background: transparent; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .new-record-options .button:hover, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .category-options button:hover, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .category-options button[aria-selected=true] { background: #617e654d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .procurement-metrics .attention, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .procurement-warning, :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .allocation-total.invalid { background: #54452c70; color: #efcd95; border-color: #d5ae6555; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .procurement-metrics .attention strong { color: #f1cd91; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.alibaba-sync-summary > div, .procurement-stats > div, .allocation-total, .history-raw, .procurement-dialog-body pre) { background: #304239; border-color: #b5cdb32b; color: #c4d9c6; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.alibaba-sync-summary strong, .procurement-stats strong, .review p, .review label, .review-equation, .detail-summary, .mini-stats, .alipay-notes p) { color: #bdd5c2; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .history-details tr.pending-highlight > td { background: #58482b; border-color: #c6a661; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(.pending-location, .warning-note, .date-hint, .review-result) { color: #ebc884; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) :is(#form-error, #live-error, #history-error, #alipay-error, #user-error, #auth-error, .danger[role=alert]) { color: #f4a099; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) #toast { color: #deefdf; background: #2d453cf5; border-color: #c6e7cb4d; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .auth-panel { background: linear-gradient(140deg, #344a50ed, #243a35f2); border-color: #d8ecdf40; box-shadow: 0 20px 65px #060c2433, inset 0 1px 0 #ffffff26; } :where(html[data-appearance="glass"][data-color-scheme="dark"]) :is(body, body.history-mode) .funding-tooltip { background: #293d44; color: #dce8e8; border-color: var(--line); } @media (prefers-reduced-motion: reduce) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) *, :where(html[data-appearance="glass"]) :is(body, body.history-mode) *::before, :where(html[data-appearance="glass"]) :is(body, body.history-mode) *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(button, .button, summary):active { transform: none; } } @media (prefers-reduced-transparency: reduce) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.glass-clear, .glass-regular, .sidebar, .topbar, dialog, .new-record-options, .category-options, .search, .ledger-controls, .settings-module-tabs, .procurement-tabs) { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.glass-clear, .glass-regular, .sidebar, .topbar, dialog, .new-record-options, .category-options, .search, .ledger-controls, .settings-module-tabs, .procurement-tabs) { background: var(--glass-solid); } } @media (forced-colors: active) { :where(html[data-appearance="glass"]) :is(body, body.history-mode) :is(.panel, .metric, .button, .sidebar, .topbar, dialog, .project-tab) { border: 1px solid ButtonText; box-shadow: none; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) #nav button.active, :where(html[data-appearance="glass"]) :is(body, body.history-mode) .project-tab.active { outline: 2px solid Highlight; } } :where(html[data-appearance="glass"]) :is(body, body.history-mode) select[data-color-scheme] { min-height: 28px; width: auto; padding: 4px 7px; margin-inline: 4px; font-size: 11px; border-radius: 6px; } :where(html[data-appearance="glass"]) :is(body, body.history-mode) .procurement-upload > label.button:has(> input[type=file]) { order: -1; } /* Mobile finance workspace: keep tables scrollable and controls readable. */ @media (max-width:780px) { :is(body,body.history-mode) #nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } :is(body,body.history-mode) #nav button { min-height:44px; padding:8px 6px; font-size:13px; justify-content:center; white-space:normal; } :is(body,body.history-mode) #nav svg { display:none; } :is(body,body.history-mode) .topbar { height:auto; min-height:56px; padding:10px 12px; gap:8px; flex-wrap:wrap; } :is(body,body.history-mode) #crumb, :is(body,body.history-mode) .header-right { font-size:12px; white-space:normal; } :is(body,body.history-mode) .header-right { flex-wrap:wrap; gap:8px; } :is(body,body.history-mode) .header-right > button { flex-shrink:0; } :is(body,body.history-mode) .header-right .text-button { min-height:36px; padding:6px; font-size:12px; } :is(body,body.history-mode) .ledger-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } :is(body,body.history-mode) .ledger-metrics .metric strong { font-size:19px; } :is(body,body.history-mode) .heading, :is(body,body.history-mode) .panel-head { flex-wrap:wrap; gap:12px; } :is(body,body.history-mode) .heading .buttons { flex-direction:row; flex-wrap:wrap; } :is(body,body.history-mode) .button, :is(body,body.history-mode) .project-tab, :is(body,body.history-mode) .segmented button { min-height:44px; } :is(body,body.history-mode) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { font-size:16px; min-height:44px; max-width:100%; } :is(body,body.history-mode) .field { min-width:0; font-size:13px; } .setting-line { flex-wrap:wrap; gap:12px; } .setting-line .buttons { flex-wrap:wrap; } .procurement-upload > label.button { width:100%; min-width:0; flex-direction:column; align-items:flex-start; white-space:normal; } .procurement-upload .field { min-width:0; flex-basis:100%; } .procurement-upload input[type=file] { width:100%; min-width:0; } .procurement-toolbar .field { flex-basis:100%; } :is(body,body.history-mode) dialog { max-height:92vh; max-height:92dvh; } :is(body,body.history-mode) dialog .form-grid { grid-template-columns:minmax(0,1fr); } :is(body,body.history-mode) dialog .modal-head { gap:12px; padding:16px; } :is(body,body.history-mode) dialog .modal-head > button { width:44px; height:44px; min-width:44px; font-size:30px; } :is(body,body.history-mode) dialog .modal-foot { flex-wrap:wrap; padding:12px 16px; } #live-body, #history-form-body, #form-body, .payroll-form-body, .procurement-dialog-body { max-height:calc(92vh - 176px); max-height:calc(92dvh - 176px); padding-left:16px; padding-right:16px; } .prepaid-project-options { grid-template-columns:minmax(0,1fr); } .prepaid-project-option { min-height:44px; } .auth-shell { padding:16px; } .auth-panel { padding:24px 20px; } } @media (max-width:360px) { :is(body,body.history-mode) #nav { grid-template-columns:repeat(2,minmax(0,1fr)); } :is(body,body.history-mode) .ledger-metrics { grid-template-columns:minmax(0,1fr); } } #audit-results pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:38rem;font-size:13px} #audit-results td small{display:block}