:root{--blue:#527eb8;--blue-dark:#365f92;--blue-pale:#e8f2fb;--border:#ccdfed;--ink:#35424d;--muted:#8a969f;--red:#d9534f;--navy:#2c3e50;--font:Arial,"Microsoft JhengHei","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);font-size:14px;color:var(--ink);background:#f8fafc}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button,a,input,select,textarea{outline-offset:3px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #719dd0}button{transition:background .15s,color .15s}input,select,textarea{border:1px solid #c9d5df;border-radius:3px;background:#fff;color:var(--ink);padding:8px 10px;min-height:35px}input[type=checkbox]{min-height:0;width:17px;height:17px;accent-color:var(--blue)}textarea{resize:vertical}select{padding-right:26px}input::placeholder,textarea::placeholder{color:#9ba7af}h1,h2,p{margin-top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{color:var(--muted)}.positive{color:#2569af}.negative{color:#d04d50}.number{text-align:right!important;font-variant-numeric:tabular-nums}.required{color:var(--red);font-weight:400}.button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--blue);border-radius:3px;background:var(--blue);color:#fff;padding:8px 14px;min-height:35px;white-space:nowrap}.button:hover:not(:disabled){background:var(--blue-dark);border-color:var(--blue-dark)}.button.secondary{background:#fff;color:#55718c;border-color:#c6d5e2}.button.secondary:hover:not(:disabled){background:#edf4fa}.button.danger{background:var(--red);border-color:var(--red)}.text-button{padding:0;border:0;background:none;color:#3976b2;font-size:13px}.text-button:hover{text-decoration:underline}.text-button.negative{color:var(--red)}.icon-button{width:39px;height:39px;display:inline-flex;justify-content:center;align-items:center;background:none;border:0;color:var(--blue);font-size:23px;border-radius:3px}.icon-button:hover{background:#edf3f8}.icon-button.light{color:white}.icon-button.light:hover{background:rgba(255,255,255,.12)}
.loading-screen,.login-screen{min-height:100vh;background:#bce8ee url('/acc838/original/login.jpg') center center/cover fixed no-repeat;display:flex;align-items:flex-start;justify-content:center}.loading-card{margin:15vh 16px 0;max-width:420px;padding:35px;text-align:center;background:#ffffffea;border-radius:3px}.loading-brand{font-size:27px;font-weight:700;margin-bottom:25px}.spinner{width:26px;height:26px;margin:0 auto 15px;border:3px solid #dae6ef;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-screen{padding:14.3vh 16px 80px;position:relative}.login-panel{width:480px;background:rgba(255,255,255,.76);border:1px solid rgba(220,232,238,.9);border-radius:3px;overflow:hidden;box-shadow:0 1px 3px #44657908}.login-panel header{padding:27px 31px 23px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between}.login-panel h1{font-size:26px;font-weight:700;margin:0}.login-panel header>span{font-size:11px;color:#b6c4d1;letter-spacing:.5px}.login-panel form{padding:15px 31px 42px}.login-select{display:flex;position:relative;align-items:center;margin-bottom:10px}.login-select>span:first-child{position:absolute;left:14px;z-index:1;color:#546777;font-size:20px}.login-select select{width:100%;height:43px;padding-left:46px;border-color:#d7d7d7;border-radius:0;color:#6c777c;background:#fff}.login-field{position:relative;display:flex;align-items:center;border-bottom:1px solid #d1e1e6;min-height:52px}.login-field:focus-within{border-bottom-color:#77a993}.login-field>span:first-child{width:45px;text-align:center;font-size:22px;color:#4b6b7c}.login-field input{width:calc(100% - 45px);border:0;border-radius:0;background:transparent;box-shadow:none;padding:12px 4px;outline:none!important;min-height:51px}.login-field input::placeholder{color:#8d9fa7}.login-submit{width:100%;border:1px solid #8baccf;border-radius:5px;padding:10px;background:#547fb9;color:white;font-size:16px;min-height:42px;margin-top:39px}.login-submit:hover{background:#456fa5}.login-help{margin:10px 0 -16px;color:#80919e;font-size:12px}.login-footer{position:absolute;bottom:25px;font-size:12px;letter-spacing:1px;color:#618593}.setup-intro{padding:8px 0 2px}.setup-intro h2{font-size:15px;font-weight:600;margin:5px 0 8px}.setup-intro p{font-size:12px;line-height:1.7;color:#758b98;margin:0 0 4px}.alert{border-radius:3px;padding:10px 12px;margin-top:16px;font-size:13px;line-height:1.6}.alert.error{background:#fff0ef;color:#b94442;border:1px solid #f1c5c2}
.app-shell{min-height:100vh;--nav:205px}.topbar{height:55px;background:#fff;border-bottom:1px solid #d8e2e9;position:fixed;left:0;top:0;right:0;z-index:20;display:flex;align-items:center;padding:0 16px;gap:15px;box-shadow:0 1px 2px #12345603}.brand{border:0;background:none;font-size:20px;font-weight:700;color:#3b6c9f;padding:0;white-space:nowrap}.edition{border-left:1px solid #e2e8ef;padding-left:16px;color:#98a5b0;font-size:11px;white-space:nowrap}.topbar-right{margin-left:auto;display:flex;gap:8px;align-items:center}.user-name{color:#6e8496;font-size:12px;margin-right:10px}.sidebar{position:fixed;left:0;top:55px;width:var(--nav);bottom:0;background:#f2f5f7;border-right:1px solid #dce5ec;z-index:15;display:flex;flex-direction:column;transition:transform .2s}.sidebar-heading{height:51px;display:flex;align-items:center;padding:0 20px;color:#637d91;font-weight:600;background:#edf2f6;border-bottom:1px solid #dce5ec}.sidebar nav{padding:10px 0;overflow:auto}.nav-group{font-size:10px;letter-spacing:1px;color:#98a8b6;padding:16px 20px 7px}.nav-item{display:flex;align-items:center;width:100%;background:transparent;border:0;border-left:3px solid transparent;color:#5a6c7c;padding:11px 15px 11px 17px;gap:12px;text-align:left;font-size:13px}.nav-item:hover{background:#e8eff6;color:#4276ac}.nav-item.active{background:#dfeaf6;border-left-color:#527eb8;color:#326ba7;font-weight:600}.nav-icon{font-size:18px;width:18px;text-align:center;font-weight:400}.nav-arrow{margin-left:auto;color:#8aa2b9}.sidebar-foot{margin-top:auto;padding:19px 21px;font-size:11px;color:#8b9ba7;border-top:1px solid #e0e7ec}.connection-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#78ab98;margin-right:5px}.workspace{margin-left:var(--nav);padding:78px 24px 0;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .2s}.nav-collapsed .sidebar{transform:translateX(-100%)}.nav-collapsed .workspace{margin-left:0}.nav-shade{display:none}.page-title{display:flex;align-items:baseline;gap:15px;margin:0 0 22px;flex-wrap:wrap}.page-title h1{font-size:22px;font-weight:500;margin:0;color:#3d5c75}.page-title>span{font-size:12px;color:#96a3ad}.page-title .as-of{margin-left:auto;font-size:11px}.panel{border:1px solid var(--border);background:#fff;border-radius:3px;overflow:hidden;margin-bottom:22px;min-width:0}.panel-bar{background:var(--blue);color:#fff;padding:10px 13px;font-size:13px;line-height:20px;display:flex;align-items:center;justify-content:space-between;font-weight:500}.panel-bar>span{font-size:11px;color:#e1edf9}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 14px}.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.toolbar-right>label{font-size:12px;color:#7b8d9b}.toolbar-right select{padding-top:6px;padding-bottom:6px;min-height:33px}.search-field{display:flex;align-items:center;border:1px solid #cbd9e4;border-radius:3px;max-width:270px;width:100%;height:35px;position:relative;background:white}.search-field>span{color:#829bae;font-size:22px;line-height:20px;padding:0 8px 3px 10px}.search-field>input{border:0;padding:6px 0;min-height:31px;min-width:0;width:100%;background:transparent;font-size:12px;outline:none}.search-field:focus-within{outline:2px solid #a2bfdc;outline-offset:1px}.search-field>button{border:0;background:transparent;color:#8196a7;font-size:19px;padding:3px 9px}.page-size{font-size:11px;color:#8898a5;white-space:nowrap}.page-size select{padding:5px 20px 5px 6px;font-size:12px}.filter-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:0 14px 14px;font-size:12px;color:#6a8091}.filter-bar>label{display:flex;gap:7px;align-items:center}.filter-bar input,.filter-bar select{font-size:12px;min-height:32px;padding:5px 8px}.filter-bar select{padding-right:23px;max-width:150px}.filter-bar .button{min-height:32px;font-size:12px;padding:5px 10px;margin-left:auto}.summary-row{display:grid;grid-template-columns:repeat(4,1fr);padding:7px 0 23px}.summary-row>div{padding:0 20px;border-right:1px solid #e0eaf2;display:flex;flex-direction:column;gap:9px}.summary-row>div:last-child{border:0}.summary-row span{font-size:11px;color:#8b9daa}.summary-row strong{font-weight:500;font-size:23px;font-variant-numeric:tabular-nums}.summary-row strong span{font-size:23px}.summary-row strong .positive{color:#2569af}.summary-row strong .negative{color:var(--red)}.summary-row strong .muted{color:var(--muted)}.ledger-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.loss .panel-bar{background:#6b86aa}.table-scroll{overflow:auto;max-width:100%}table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:12px}th{font-weight:500;color:#527493;background:#e8f2fb;border:1px solid #cbdfef;border-left:0;padding:0;text-align:left}th:last-child{border-right:0}td{padding:11px 12px;border:1px solid #e0e9f0;border-left:0;color:#5c6d7b;line-height:19px;vertical-align:middle}td:last-child{border-right:0}tbody tr:nth-child(even){background:#fbfdff}tbody tr:hover{background:#f5f9fc}tr:last-child td{border-bottom:0}.sort-button{width:100%;padding:10px 12px;display:block;background:none;border:0;color:inherit;text-align:inherit;font-size:12px;white-space:nowrap}.sort-button:hover{background:#dcecf8}.actions-cell{padding:8px 11px;min-width:74px}.row-actions{display:flex;align-items:center;gap:10px}.row-actions .text-button{font-size:11px}.badge{display:inline-flex;align-items:center;background:#eef4fb;color:#6383a8;font-size:10px;padding:1px 6px;border-radius:2px;white-space:nowrap}.green-badge{color:#4a8b73;background:#edf7f2}.muted-badge{color:#929aa1;background:#f0f1f3}.void-row td{color:#a4aeb6;background:#f8f9fa}.void-row td.number{text-decoration:line-through}.void-row td .positive,.void-row td .negative{color:#a4aeb6}.empty-cell{height:145px;text-align:center;color:#a5b3be;background:#fff!important;font-size:12px}.empty-icon{display:block;font-size:26px;margin-bottom:12px;color:#c5d5e2;font-weight:400}.pagination{padding:11px 13px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dce7f0;color:#8a9ba8;font-size:10px;background:#fdfefe}.pagination>div{display:flex;align-items:center;gap:11px}.pagination button{background:#fff;border:1px solid #d5e0e9;color:#6e8ba3;width:25px;height:24px;border-radius:2px;line-height:16px;font-size:17px}.table-total{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-top:1px solid #ccdfea;background:#f2f8fd;font-size:12px;color:#657e95}.table-total strong{font-weight:500;font-size:17px}.first-step{border:1px dashed #b9cfdf;background:#f4f9fd;padding:20px 25px;display:flex;align-items:center;gap:17px;margin-bottom:24px;border-radius:3px}.first-step-icon{font-size:31px;color:#8faec6}.first-step h2{font-weight:500;font-size:14px;color:#5c7e9a;margin:0 0 7px}.first-step p{font-size:12px;color:#8c9fac;margin:0}.first-step .button{margin-left:auto;font-size:12px}.workspace-footer{margin-top:auto;color:#a2b0ba;font-size:10px;letter-spacing:.4px;padding:30px 0 17px;text-align:right}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.settings-body{padding:23px}.settings-body dl{display:grid;grid-template-columns:110px 1fr;gap:18px;margin:0 0 28px;font-size:13px}.settings-body dt{color:#92a1ad}.settings-body dd{margin:0;color:#59738a}.toast{position:fixed;right:24px;bottom:24px;z-index:70;background:#fff;border:1px solid #bad8cd;box-shadow:0 5px 24px #2b45551a;border-radius:4px;padding:13px 15px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 35px);font-size:13px}.toast>span{color:#4c987c}.toast>button{background:none;border:0;color:#9ba7ae;font-size:20px;margin-left:15px}
.modal{margin:auto;padding:0;border:1px solid #c2d3e1;border-radius:4px;max-width:calc(100vw - 32px);width:580px;max-height:calc(100vh - 40px);color:var(--ink);box-shadow:0 15px 65px #152b4b2b;background:white}.modal::backdrop{background:rgba(34,53,73,.34)}.modal-wide{width:1100px}.modal-head{padding:10px 16px;background:var(--blue);color:white;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2}.modal-head h2{margin:0;font-size:15px;font-weight:500}.modal-head .icon-button{width:27px;height:27px;font-size:25px}.modal-body{padding:23px}.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px;border-top:1px solid #dce5ed;background:#f7fafc;position:sticky;bottom:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 20px}.field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;color:#647d91}.field input,.field select,.field textarea{width:100%;font-size:13px}.field>small{font-size:10px;line-height:1.6;color:#94a3af}.field.wide{grid-column:1/-1}.check-field{flex-direction:row;align-items:center;gap:10px;justify-content:flex-start}.check-field>input{width:17px;order:-1}.check-field>small{display:none}.confirm-copy{line-height:1.8;color:#637e93;font-size:13px;margin:0 0 20px}.confirm-copy:last-child{margin-bottom:0}.detail-summary{display:flex;gap:25px;padding:0 0 20px;flex-wrap:wrap;font-size:12px;color:#8a9eac}.detail-summary b{font-weight:500;margin-left:9px;color:#496c8c}
@media(min-width:1600px){.workspace{padding-left:35px;padding-right:35px}.ledger-grid{gap:28px}.summary-row>div{padding-left:28px}}
@media(max-width:1100px){.app-shell{--nav:180px}.workspace{padding-left:16px;padding-right:16px}.ledger-grid{grid-template-columns:1fr}.summary-row strong,.summary-row strong span{font-size:19px}.toolbar{flex-wrap:wrap}.filter-bar .button{margin-left:0}.topbar{gap:10px}.row-actions{gap:7px}}
@media(max-width:800px){.app-shell{--nav:205px}.sidebar{z-index:32}.topbar{z-index:35;padding:0 10px;gap:8px}.workspace,.nav-collapsed .workspace{margin-left:0;padding:75px 12px 0}.nav-shade{display:block;position:fixed;inset:55px 0 0;background:#24384b38;z-index:30;border:0}.edition{display:none}.user-name{display:none}.topbar-right{gap:0}.topbar-right .icon-button{width:34px}.brand{font-size:18px}.page-title{margin-bottom:18px;gap:10px}.page-title h1{font-size:20px}.page-title>span{font-size:11px}.page-title .as-of{display:none}.summary-row{grid-template-columns:1fr 1fr;row-gap:23px;padding:8px 0 20px}.summary-row>div:nth-child(2){border:0}.summary-row strong,.summary-row strong span{font-size:20px}.toolbar{padding:12px;gap:10px}.toolbar-right{gap:8px}.search-field{max-width:100%}.filter-bar{padding:0 12px 12px;gap:10px}.filter-bar>label:first-child{flex-wrap:wrap}.filter-bar input[type=date]{max-width:130px}.table-total{font-size:11px}.settings-grid{grid-template-columns:1fr;gap:0}.first-step{padding:18px 15px;gap:12px;flex-wrap:wrap}.first-step-icon{display:none}.first-step .button{margin-left:0}.workspace-footer{text-align:center}.modal-body{padding:18px}.form-grid{gap:17px 14px}.login-screen{padding-top:10vh}.login-panel{max-width:480px}.login-panel header{padding:23px 25px}.login-panel form{padding:15px 25px 34px}.login-panel h1{font-size:24px}.login-footer{font-size:10px}.detail-summary{gap:15px}.page-size{display:none}}
@media(max-width:430px){.login-screen{padding:8vh 16px 60px}.login-panel header>span{font-size:10px}.login-panel header{padding:22px}.login-panel form{padding-left:22px;padding-right:22px}.form-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.summary-row>div{padding:0 14px}.summary-row strong,.summary-row strong span{font-size:18px}.button{padding:8px 11px;font-size:12px}.toolbar-right{width:100%;justify-content:flex-start}.topbar-right .icon-button{width:30px;font-size:21px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.settings-wide{grid-column:1/-1}.settings-note{font-size:12px;color:#8498a8;line-height:1.7}

.customer-cell{display:inline-flex;align-items:center;gap:8px}.due-badge{background:#fff6dc;color:#a8882c}
.company-login-caption{font-size:17px;font-weight:500;color:#567082;margin:16px 0 12px}

/* 匯帳通 — shared product palette and company workspace */
:root{--blue:#087f8c;--blue-dark:#076772;--blue-pale:#eaf7f5;--border:#dfe7ec;--ink:#203344;--muted:#71818d;--red:#c4424b;--navy:#102c3b;--font:"Inter","Noto Sans TC","Microsoft JhengHei","Microsoft YaHei",Arial,sans-serif}
html,body{background:#f3f6f8;color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:var(--font)}
input,select,textarea{border-color:#d9e3e8;border-radius:8px;min-height:39px;padding:9px 12px;color:#203344}
input::placeholder,textarea::placeholder{color:#8a9aa6}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #57b4b9;outline-offset:3px}
.hzt-brand-mark{flex-shrink:0;vertical-align:middle}.loading-brand{display:flex;align-items:center;justify-content:center;gap:12px}
.button{min-height:39px;padding:9px 15px;border-radius:8px;font-weight:600;box-shadow:0 2px 3px #102c3b05}
.button.secondary{color:#496170;border-color:#d8e3e8;background:#fff}.button.secondary:hover:not(:disabled){background:#f0f6f6}
.text-button{color:#087f8c;font-weight:500}.icon-button{border-radius:8px;color:#657c8b}.icon-button:hover{background:#edf6f5;color:#087f8c}
.positive,.summary-row strong .positive{color:#087f8c}.negative{color:#c4424b}.muted{color:#71818d}
.loading-screen,.login-screen{background:#f2f6f7;background-image:none;background-attachment:initial}
.loading-card{border:1px solid #dfe8ed;border-radius:18px;box-shadow:0 20px 60px #102c3b0d;padding:40px;line-height:1.7}
.login-screen{display:grid;grid-template-columns:minmax(300px,500px) minmax(360px,440px);gap:80px;align-items:center;justify-content:center;padding:64px 44px 86px;min-height:100svh;isolation:isolate;overflow:hidden}
.login-screen:before{content:"";position:absolute;inset:0 47% 0 0;background:#102c3b;z-index:-1}
.company-login-story{color:white;align-self:center;padding:30px 12px 30px 0;max-width:470px}
.login-story-label{color:#85baC1;font-size:11px;letter-spacing:2.8px;font-weight:600;margin-bottom:35px}
.company-login-story h2{font-size:clamp(32px,3.5vw,48px);font-weight:650;line-height:1.45;letter-spacing:2px;margin:0 0 24px}
.company-login-story>p{color:#aac1cc;font-size:15px;line-height:1.9;margin:0 0 32px}
.login-story-features{display:flex;gap:15px;flex-wrap:wrap}.login-story-features span{display:flex;align-items:center;gap:7px;font-size:12px;color:#cfe6e6}.login-story-features svg{color:#63c9b7}
.login-story-decoration{height:100px;margin-top:60px;display:flex;gap:8px;align-items:end;position:relative;border-bottom:1px solid #2d4958}
.login-story-decoration>div{width:45px;background:#285867;border-radius:5px 5px 0 0;height:45%}.login-story-decoration>div:nth-child(2){height:73%;background:#287c85}.login-story-decoration>div:nth-child(3){height:100%;background:#46b5a5}
.login-story-decoration>span{font-size:11px;color:#7f9eaa;letter-spacing:1px;margin-left:16px;margin-bottom:10px}
.login-panel{width:100%;max-width:440px;background:#fff;border:1px solid #e1e8ed;border-radius:20px;box-shadow:0 24px 80px #102c3b12;align-self:center}
.login-panel header{padding:31px 32px 20px;background:#fff;color:var(--navy);gap:15px}.login-panel h1{display:flex;align-items:center;gap:11px;font-size:26px;letter-spacing:1px}.login-panel header>span{font-size:9px;color:#8396a2;letter-spacing:1px}
.login-panel form{padding:7px 32px 34px}.login-select{margin:0 0 25px}.login-select>span:first-child{left:12px;display:flex;color:#718795}.login-select select{height:38px;padding-left:38px;border:1px solid #e1e8ed;border-radius:8px;color:#607682;font-size:12px;background:#f8fafb}
.company-login-caption{font-size:19px;color:#203344;font-weight:650;margin:0 0 20px}
.login-field{border:1px solid #dce6eb;border-radius:9px;min-height:48px;margin-bottom:13px;background:#fbfcfd;transition:border-color .15s,box-shadow .15s}.login-field:focus-within{border-color:#329ca4;box-shadow:0 0 0 3px #087f8c12}.login-field>span:first-child{width:43px;display:flex;align-items:center;justify-content:center;color:#849aa8}.login-field input{min-height:46px;padding:11px 8px 11px 0;color:#203344}.login-field input::placeholder{font-size:13px;color:#899ba5}
.login-submit{margin-top:14px;background:#087f8c;border-color:#087f8c;border-radius:9px;font-size:14px;font-weight:600;min-height:46px}.login-submit:hover{background:#076772}.login-help{margin:0 0 7px;color:#71818d}.login-footer{color:#7c919d;font-size:11px;letter-spacing:1px;right:44px;bottom:25px}
.setup-intro p{color:#71818d}.alert{border-radius:9px}.alert.error{color:#a7313b;background:#fff3f3;border-color:#f0ced2}
.app-shell{--nav:224px}.topbar{height:68px;border-color:#dfe7ec;padding:0 22px;gap:17px;box-shadow:0 2px 8px #102c3b03}.brand{display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:.7px;color:#173747}.brand .hzt-brand-mark{width:32px;height:32px}.edition{font-size:12px;color:#70828d;padding-left:18px;max-width:230px;overflow:hidden;text-overflow:ellipsis}.topbar-right{gap:5px}.user-name{color:#5b7280;margin-left:7px;margin-right:5px}
.sidebar{top:68px;background:#102c3b;border:0;color:#e5f0f4}.sidebar-heading{height:72px;background:transparent;border-bottom:1px solid #24404e;padding:18px 24px;color:#f0f6f7;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;font-size:13px}.sidebar-heading small{font-size:9px;letter-spacing:1.7px;color:#7494a3;font-weight:400}
.sidebar nav{padding:8px 12px 14px}.nav-group{font-size:10px;letter-spacing:1px;color:#7392a1;padding:19px 13px 8px}.nav-item{border:0;border-radius:8px;padding:12px 13px;gap:12px;color:#b4c9d2;font-size:13px;margin-bottom:4px;min-height:43px}.nav-item:hover{background:#1b3b4b;color:#f3fbfb}.nav-item.active{background:#17606a;color:#e8fffa;font-weight:600;box-shadow:inset 3px 0 #56d0bc}.nav-icon{display:flex;width:19px;color:inherit}.nav-arrow{color:#6e96a4;font-size:16px}.nav-item.active .nav-arrow{color:#79cec2}.sidebar-foot{border-top:1px solid #24404e;color:#80a5b0;padding:20px 25px;font-size:11px}.connection-dot{width:6px;height:6px;background:#4ac7ae;box-shadow:0 0 0 3px #4ac7ae16}
.workspace{padding:100px 30px 0;background:#f3f6f8}.page-title{gap:12px;margin-bottom:25px}.page-title h1{font-size:25px;font-weight:650;color:#203344;letter-spacing:.2px}.page-title>span{font-size:12px;color:#7c8d98}.page-title .as-of{padding:6px 11px;border:1px solid #e0e8ec;background:#fff;border-radius:7px;color:#71818d}
.panel{border-color:#dfe7ec;border-radius:13px;box-shadow:0 3px 14px #15374704;margin-bottom:24px}.panel-bar{background:#fff!important;color:#203b4a;font-size:14px;line-height:23px;font-weight:650;padding:17px 20px;border-bottom:1px solid #e8eef2}.panel-bar>span{color:#7e929d;font-size:11px;font-weight:400}.loss .panel-bar:before{content:"";width:5px;height:15px;border-radius:3px;background:#d59090;margin-right:9px}.loss .panel-bar{justify-content:flex-start}.loss .panel-bar>span{margin-left:auto}
.toolbar{padding:18px 20px;gap:14px}.toolbar-right>label{color:#708592}.search-field{border-color:#dce5eb;border-radius:8px;height:39px;background:#fbfcfd;max-width:290px}.search-field>input{min-height:35px;font-size:12px}.search-field>span{font-size:22px;color:#8399a6}.search-field:focus-within{outline:2px solid #65b7bd}
.filter-bar{padding:0 20px 18px;gap:12px;color:#6b8391}.filter-bar input,.filter-bar select{border-radius:7px;min-height:35px}.page-size select{min-height:30px;border-radius:6px}.summary-row{padding:7px 20px 23px;gap:12px}.summary-row>div{border:0;border-radius:10px;padding:17px 16px;background:#f5f8fa;gap:11px}.summary-row>div:first-child{background:#edf7f5}.summary-row span{font-size:11px;color:#728591}.summary-row strong,.summary-row strong span{font-size:25px;font-weight:650;letter-spacing:-.6px;color:#254657}.summary-row>div:first-child strong{color:#087f8c}
.ledger-grid{gap:22px}table{font-size:12px}th{color:#637c8a;background:#f5f8fa;border-color:#e4ebef;border-right:0;font-weight:600}td{padding:13px 15px;color:#4b6371;border-color:#edf1f4;border-right:0}tbody tr:nth-child(even){background:#fcfdfd}tbody tr:hover{background:#f1f8f7}.sort-button{padding:12px 15px;font-size:11px;font-weight:600;letter-spacing:.1px}.sort-button:hover{background:#eaf2f3}.row-actions{gap:12px}.row-actions .text-button{font-size:12px}.badge{padding:3px 8px;border-radius:5px;background:#eaf3f6;color:#477789;font-size:10px;font-weight:500}.green-badge{background:#eaf7f1;color:#2d8265}.due-badge{background:#fff4dc;color:#9a7125}.muted-badge{background:#f0f3f5;color:#7b8b96}.pagination{padding:13px 17px;color:#7d909b;border-color:#e7edf1;font-size:11px}.pagination button{width:29px;height:29px;border-radius:6px;border-color:#dce6eb;color:#4e7383;background:#fff}.table-total{background:#f6f9fa;border-color:#e2ebef;padding:15px 18px;color:#718895}.table-total strong{font-size:17px;font-weight:600}.empty-cell{height:165px;color:#8497a1}.empty-icon{color:#b6ccd4}.first-step{background:#eef7f5;border-color:#bcdbd4;border-radius:12px;padding:23px}.first-step h2{color:#356c67;font-weight:600}.first-step p{color:#718f8e}.first-step-icon{color:#73a7a1}.workspace-footer{color:#8b9ba6;font-size:11px;letter-spacing:.6px;padding:25px 0 20px}
.settings-body{padding:25px}.settings-body dt{color:#7a8e99}.settings-body dd{color:#344e5e}.settings-note{color:#758b98}.settings-grid{gap:24px}.settings-wide{grid-column:1/-1}
.modal{border:1px solid #d9e4ea;border-radius:14px;box-shadow:0 26px 90px #102c3b29}.modal::backdrop{background:#102c3b65;backdrop-filter:blur(3px)}.modal-head{padding:16px 20px;background:#102c3b}.modal-head h2{font-size:15px;font-weight:600}.modal-body{padding:25px}.modal-foot{padding:16px 21px;background:#f8fafb;border-color:#e4ebef;flex-wrap:wrap}.field{color:#5e7785;font-size:12px;gap:8px}.field>small{color:#7d929e;font-size:11px}.confirm-copy{color:#607b8b;line-height:1.9}.detail-summary{color:#788e9b}.detail-summary b{color:#32556a}.toast{border-radius:11px;border-color:#c6dfd8;box-shadow:0 10px 35px #102c3b15}
@media(min-width:1600px){.workspace{padding-left:40px;padding-right:40px}}
@media(max-width:1200px){.login-screen{gap:48px}.company-login-story{max-width:380px}.app-shell{--nav:208px}.workspace{padding-left:23px;padding-right:23px}.summary-row{gap:9px;padding-left:16px;padding-right:16px}.summary-row>div{padding:15px 12px}.summary-row strong,.summary-row strong span{font-size:21px}.edition{max-width:155px}}
@media(max-width:900px){.login-screen{grid-template-columns:1fr;gap:28px;padding:45px 24px 70px;justify-items:center}.login-screen:before{inset:0 0 52%}.company-login-story{max-width:440px;width:100%;padding:0}.login-story-label{font-size:10px;margin:0 0 15px}.company-login-story h2{font-size:29px;line-height:1.4;margin:0 0 13px}.company-login-story h2 br{display:none}.company-login-story>p{font-size:13px;margin-bottom:0}.company-login-story>p br{display:none}.login-story-features,.login-story-decoration{display:none}.login-footer{right:auto;left:0;width:100%;text-align:center;bottom:25px}.login-panel{box-shadow:0 20px 70px #102c3b14}.edition{display:none}}
@media(max-width:800px){.topbar{height:62px;padding:0 12px;gap:9px}.topbar-right{gap:1px}.topbar-right .icon-button{width:30px;height:36px}.brand{font-size:18px;gap:7px}.brand .hzt-brand-mark{width:28px;height:28px}.sidebar{top:62px;width:224px}.nav-shade{inset:62px 0 0;background:#102c3b63}.workspace,.nav-collapsed .workspace{padding:87px 16px 0}.page-title h1{font-size:22px}.page-title>span{font-size:11px}.summary-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16px 18px;gap:10px}.summary-row>div{padding:16px 13px}.summary-row strong,.summary-row strong span{font-size:23px}.toolbar{padding:16px;gap:12px}.panel-bar{padding:15px 17px}.filter-bar{padding:0 16px 16px}.settings-grid{gap:0}.table-total{padding:13px 16px}.modal-body{padding:20px}.workspace-footer{text-align:center}}
@media(max-width:430px){.topbar{gap:7px;padding:0 9px}.topbar-right .icon-button{width:27px}.topbar-right .icon-button svg{width:17px}.brand{font-size:16px;gap:5px}.brand .hzt-brand-mark{width:26px;height:26px}.login-screen{padding:29px 18px 64px;gap:22px}.company-login-story h2{font-size:25px}.company-login-story>p{font-size:12px}.login-panel{border-radius:15px}.login-panel header{padding:25px 24px 19px}.login-panel form{padding:0 24px 27px}.login-panel h1{font-size:25px}.login-panel header>span{font-size:8px}.workspace,.nav-collapsed .workspace{padding-left:12px;padding-right:12px}.summary-row{gap:8px;padding-left:12px;padding-right:12px}.summary-row>div{padding:14px 11px}.summary-row strong,.summary-row strong span{font-size:21px}.toolbar-right{width:100%;justify-content:flex-start}.button{min-height:38px}.modal{max-width:calc(100vw - 20px)}.modal-foot{padding:13px 16px}}

/* 匯帳通 · scoped member and messaging interface */
.member-root {
  --member-blue:#087f8c;
  --member-dark:#102c3b;
  --member-ink:#203344;
  --member-muted:#5f7381;
  --member-line:#dfe7ec;
  --member-pale:#f1f7f7;
  min-height: 100vh;
  color: var(--member-ink);
  font-family:
    "Inter",
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: #f3f6f8;
  letter-spacing: .01em;
}
.member-root *,
.member-dialog * {
  box-sizing: border-box;
}
.member-root button,
.member-dialog button {
  font: inherit;
  cursor: pointer;
}
.member-root input,
.member-root select,
.member-dialog input,
.member-dialog select {
  font: inherit;
}
.member-root button:disabled,
.member-dialog button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.member-root button:focus-visible,
.member-root input:focus-visible,
.member-root select:focus-visible,
.member-dialog button:focus-visible,
.member-dialog input:focus-visible {
  outline: 3px solid #30a6ad;
  outline-offset: 3px;
}
.member-root h1,
.member-root h2,
.member-root h3,
.member-dialog h2,
.member-dialog h3 {
  margin: 0;
  line-height: 1.35;
}
.member-root p,
.member-dialog p {
  margin: 0;
}
.member-sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.member-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 19px;
  border: 1px solid #087f8c;
  background: #087f8c;
  border-radius: 9px;
  color: white;
  font-size: 13px !important;
  font-weight: 600!important !important;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background .16s,
    box-shadow .16s,
    border-color .16s;
  border-color: #087f8c;
  box-shadow: 0 2px 3px #102c3b08;
}
.member-button:hover:not(:disabled) {
  background: #076772;
  box-shadow: 0 4px 12px #087f8c20;
}
.member-button-outline {
  color: #087f8c;
  border-color: #cbdfe1;
  background: white;
}
.member-button-outline:hover:not(:disabled) {
  background: #eaf7f5;
  box-shadow: none;
  border-color: #9fc9cc;
}
.member-link {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: #087f8c;
  font-size: 12px !important;
  font-weight: 600!important !important;
  white-space: nowrap;
  min-height: 32px;
}
.member-link:hover:not(:disabled) {
  color: #076772;
}
.member-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #607884;
  padding: 0;
}
.member-icon-button:hover:not(:disabled) {
  background: #eaf7f5;
  color: #087f8c;
}
.member-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #203344;
  font-weight: 600;
  letter-spacing: -.02em;
}
.member-positive {
  color: #087f8c;
}
.member-negative {
  color: #b44750;
}
.member-amount small {
  font-size: 12px;
  font-weight: 400;
  margin-left: 7px;
  color: #5f7381;
  letter-spacing: .3px;
}
.member-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3f6;
  color: #647786;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  line-height: 1.65;
  white-space: nowrap;
  font-weight: 600;
}
.member-status-done {
  background: #e7f5ef;
  color: #267b5e;
}
.member-status-cancelled {
  background: #f4f3f4;
  color: #5f7381;
}
.member-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: #48616f;
  font-size: 12px;
  margin: 0;
}
.member-field > span {
  font-weight: 600;
}
.member-field input,
.member-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #dce5ee;
  border-radius: 9px;
  padding: 9px 12px;
  background: white;
  color: #203344;
  font-size: 13px;
  box-shadow: none;
  border-color: #d6e1e5;
  transition: border-color .15s, box-shadow .15s;
}
.member-field input::placeholder {
  color: #647783;
}
.member-field select {
  padding-right: 27px;
}
.member-field > small {
  font-size: 12px;
  color: #5f7381;
  line-height: 1.7;
}
.member-input-icon {
  display: flex;
  align-items: center;
  position: relative;
}
.member-input-icon > svg {
  position: absolute;
  left: 13px;
  color: #79939d;
  pointer-events: none;
}
.member-input-icon > input {
  padding-left: 40px;
}
.member-alert {
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.8;
  margin-top: 15px;
}
.member-alert-error {
  border: 1px solid #f0d4d2;
  background: #fff4f4;
  color: #a33e45;
  border-color: #efd5d8;
}
.member-inline-note {
  border-radius: 9px;
  background: #eef6f6;
  padding: 12px 14px;
  font-size: 12px;
  color: #4e7077;
  line-height: 1.8;
}
.member-eyebrow {
  font-size: 10px!important !important;
  font-weight: 700;
  letter-spacing: 2px;
  color: #087f8c;
  margin-bottom: 9px !important;
}
.member-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #102c3b;
  white-space: nowrap;
}
.member-brand strong {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
}
.member-brand > span:last-child:not(.member-brand-mark) {
  font-size: 12px;
  color: #5f7381;
  border-left: 1px solid #dfe6ed;
  padding-left: 12px;
  margin-left: 3px;
}
.member-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #087f8c;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 3px 12px #087f8c20;
}
.member-brand-button {
  padding: 0;
  border: 0;
  background: none;
}
.member-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
}
.member-loading-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--member-line);
  border-radius: 20px;
  padding: 38px 42px;
  box-shadow: 0 18px 60px #102c3b0a;
}
.member-loading-card p {
  font-size: 13px;
  color: #5f7381;
}
.member-loading-card .member-button {
  margin-top: 20px;
}
.member-load-error {
  max-width: 320px;
  margin-top: 25px !important;
  line-height: 1.8;
}
.member-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e3edf6;
  border-top-color: #087f8c;
  border-radius: 50%;
  margin: 28px auto 15px;
  animation: member-spin 1s linear infinite;
  border-color: #e1eeee;
}
@keyframes member-spin {
  to {
    transform: rotate(360deg);
  }
}
.member-login {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse at 8% 14%,
      #d7edeb 0,
      transparent 43%),
    radial-gradient(
      ellipse at 92% 95%,
      #e0e9ee 0,
      transparent 40%),
    #f3f6f8;
  min-height: 100vh;
  padding: 56px 32px;
  position: relative;
  overflow: hidden;
}
.member-login-layout {
  width: 100%;
  max-width: 1010px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 440px;
  column-gap: 88px;
  align-items: center;
}
.member-login-card {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 70px #102c3b0d;
  border: 1px solid #e4ebee;
}
.member-login-banner {
  padding: 25px 30px;
  background: #102c3b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.member-login-banner .member-brand {
  color: white;
}
.member-login-banner .member-brand-mark {
  background: #ffffff0f;
  box-shadow: none;
}
.member-login-banner .member-brand strong {
  font-size: 24px;
}
.member-login-tag {
  font-size: 11px;
  color: #b8d5d8;
  letter-spacing: 1px;
  border: 1px solid #ffffff24;
  border-radius: 20px;
  padding: 5px 10px;
}
.member-login-body {
  padding: 32px;
}
.member-login-body h1 {
  font-size: 28px;
  font-weight: 700;
  color: #102c3b;
  margin-bottom: 10px;
  letter-spacing: -.5px;
}
.member-login-intro {
  font-size: 13px;
  color: #5f7381;
  line-height: 1.8;
  margin-bottom: 26px!important !important;
}
.member-login-body form {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.member-login-body .member-inline-note {
  margin-bottom: 19px;
}
.member-login-body .member-field input {
  height: 46px;
  background: #fbfcfd;
}
.member-login-submit {
  width: 100%;
  margin-top: 5px;
  height: 46px;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 17px;
  border-radius: 9px;
}
.member-login-help {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: #5f7381;
  line-height: 1.8;
  margin-top: 24px!important !important;
  padding-top: 18px;
  border-top: 1px solid #e7edef;
}
.member-login-help svg {
  margin-top: 2px;
  flex-shrink: 0;
}
.member-login-footer {
  font-size: 11px;
  color: #5f7381;
  text-align: center;
  letter-spacing: 1px;
  padding-top: 28px;
  grid-column: 1/-1;
}
.member-login-body .member-alert {
  margin: 0;
}
.member-topbar {
  height: 78px;
  background: #102c3b;
  border-bottom: 1px solid #1f4351;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 3px 16px #102c3b14;
}
.member-topbar-inner {
  max-width: 1320px;
  margin: auto;
  padding: 0 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.member-desktop-nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
}
.member-desktop-nav button {
  position: relative;
  border: 0;
  background: none;
  color: #b4c7ce;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 8px;
}
.member-desktop-nav button:hover {
  color: #fff;
  background: #ffffff0b;
}
.member-desktop-nav button.member-nav-active {
  color: #fff;
  background: #ffffff12;
}
.member-desktop-nav button.member-nav-active:after {
  content: "";
  height: 2px;
  position: absolute;
  bottom: 2px;
  left: 15px;
  right: 15px;
  border-radius: 3px 3px 0 0;
  background: #55c0bf;
}
.member-topbar-account {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.member-topbar-account > span {
  font-size: 12px;
  color: #5f7381;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 38px 30px 0;
  min-height: calc(100vh - 78px);
  display: flex;
  flex-direction: column;
  padding-top: 36px;
}
.member-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.member-page-heading h1 {
  font-size: 28px;
  font-weight: 700;
  color: #102c3b;
  letter-spacing: -.5px;
}
.member-page-heading h1 + p {
  font-size: 13px;
  color: #5f7381;
  margin-top: 8px;
}
.member-account-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #087f8c;
  padding: 8px 13px;
  border: 1px solid #dfe7ef;
  border-radius: 20px;
  background: #edf8f6;
  white-space: nowrap;
  border-color: #cee3e3;
}
.member-overview {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 29px;
}
.member-balance-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background:
    linear-gradient(
      115deg,
      #102c3b,
      #17616b);
  color: #fff;
  padding: 24px 27px;
  min-height: 193px;
  box-shadow: 0 8px 24px #102c3b12;
}
.member-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.member-balance-top > span:first-child {
  font-size: 12px;
  color: #c1dfe3;
  letter-spacing: .5px;
}
.member-currency-pill {
  font-size: 12px;
  letter-spacing: 1.4px;
  color: #f0f7ff;
  border: 1px solid #ffffff36;
  padding: 3px 10px;
  border-radius: 12px;
}
.member-main-balance {
  display: block;
  font-size: 34px;
  color: #fff;
  font-weight: 500;
  letter-spacing: .8px;
  margin: 16px 0 20px;
  position: relative;
  z-index: 1;
}
.member-main-balance.member-positive {
  color: #fff;
}
.member-main-balance.member-negative {
  color: #ffd7d5;
}
.member-balance-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: #b9d4d9;
}
.member-balance-bottom button {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: #e0ecf8;
  font-size: 12px;
  padding: 0;
}
.member-balance-orbit {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -97px;
  bottom: -108px;
  border: 25px solid #ffffff06;
  border-radius: 50%;
  box-shadow: 0 0 0 23px #ffffff04, 0 0 0 49px #ffffff03;
}
.member-summary-card {
  background: white;
  border: 1px solid #e2eaf2;
  border-radius: 15px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 193px;
  border-color: #dfe7ec;
  box-shadow: 0 3px 12px #102c3b03;
}
.member-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #eaf7f5;
  border-radius: 11px;
  color: #087f8c;
  flex-shrink: 0;
}
.member-summary-card p {
  font-size: 12px;
  color: #5f7381;
  margin: 12px 0 7px;
}
.member-summary-card > .member-amount {
  font-size: 25px;
  line-height: 1.4;
  font-weight: 500;
}
.member-summary-card > small {
  font-size: 12px;
  color: #5f7381;
  margin-top: auto;
  padding-top: 10px;
}
.member-summary-date {
  font-size: 18px;
  color: #48616f;
  font-weight: 500;
  white-space: nowrap;
}
.member-summary-card > .member-link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px !important;
}
.member-panel {
  border: 1px solid #e0e8f0;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 25px;
  min-width: 0;
  border-color: #dfe7ec;
  box-shadow: 0 4px 18px #102c3b04;
}
.member-section-heading {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.member-section-heading h2 {
  font-size: 16px;
  font-weight: 700;
  color: #203344;
}
.member-section-heading p {
  font-size: 12px;
  color: #5f7381;
  margin-top: 5px;
}
.member-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.member-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.member-table thead th {
  background: #f2f6f7;
  color: #607783;
  font-size: 12px;
  font-weight: 600;
  padding: 13px 24px;
  text-align: left;
  border: 0;
  border-top: 1px solid #e9eff5;
  border-bottom: 1px solid #e9eff5;
  border-color: #e1e9ed;
}
.member-table td {
  border: 0;
  border-bottom: 1px solid #edf1f6;
  padding: 17px 24px;
  color: #526b78;
  background: transparent;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.5;
  border-color: #eaf0f3;
}
.member-table tbody tr:last-child td {
  border-bottom: 0;
}
.member-table tbody tr:hover {
  background: #f6fafb;
}
.member-table-title {
  font-weight: 600;
  color: #203344;
}
.member-remark-preview {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #5f7381;
  margin-top: 4px;
}
.member-number {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
.member-cancelled-row .member-amount {
  color: #5f7381;
  text-decoration: line-through;
}
.member-account-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #eef3f8;
  border: 1px solid #e3ebf2;
  border-radius: 9px;
  padding: 19px 25px;
  gap: 20px;
}
.member-account-strip > div {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #5f7381;
}
.member-account-strip > div > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #5f7381;
}
.member-account-strip strong {
  font-size: 12px;
  color: #48616f;
  font-weight: 500;
}
.member-footer {
  margin-top: auto;
  padding: 30px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  letter-spacing: .2px;
  color: #5f7381;
}
.member-mobile-nav,
.member-mobile-transactions {
  display: none;
}
.member-empty {
  padding: 54px 20px;
  text-align: center;
}
.member-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background: #eef7f7;
  color: #72a5ad;
  margin-bottom: 17px;
}
.member-empty h3 {
  font-size: 15px;
  font-weight: 600;
  color: #48616f;
  margin-bottom: 8px;
}
.member-empty p {
  font-size: 12px;
  color: #5f7381;
  line-height: 1.8;
}
.member-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 23px 0;
}
.member-filter-heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #203344;
  font-weight: 600;
}
.member-filter-heading h2 > span {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #edf4fb;
  color: #48616f;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}
.member-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
  gap: 15px;
  padding: 21px 23px 24px;
}
.member-filters .member-field {
  font-size: 12px;
  gap: 7px;
}
.member-filters .member-field input,
.member-filters .member-field select {
  font-size: 12px;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.member-filter-total {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}
.member-filter-total > span:first-child {
  font-size: 12px;
  color: #5f7381;
}
.member-filter-total > .member-amount {
  font-size: 18px;
  font-weight: 500;
}
.member-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 23px;
  border-top: 1px solid #e7edf4;
  background: #fbfcfd;
  font-size: 12px;
  color: #5f7381;
  border-radius: 0 0 10px 10px;
}
.member-pagination b {
  font-weight: 500;
  color: #48616f;
}
.member-pagination > div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.member-page-button {
  height: 32px;
  width: 32px;
  padding: 0;
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  background: #fff;
  color: #087f8c;
  font-size: 19px !important;
  line-height: 1;
}
.member-page-button:hover:not(:disabled) {
  background: #eef4fa;
}
.member-page-size {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  font-size: 12px;
  color: #5f7381;
}
.member-page-size select {
  min-height: 29px;
  border: 1px solid #dfe7f0;
  border-radius: 4px;
  padding: 4px 20px 4px 7px;
  font-size: 12px;
  color: #48616f;
  background: white;
}
.member-closing-filter .member-filters {
  grid-template-columns: 180px 180px 180px auto;
  align-items: end;
  padding: 21px 23px;
}
.member-closing-filter .member-link {
  align-self: center;
  justify-self: end;
  padding-top: 20px;
}
.member-statements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.member-statement-card {
  border: 1px solid #e0e8f1;
  border-radius: 14px;
  padding: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-color: #dfe7ec;
  box-shadow: 0 4px 18px #102c3b04;
}
.member-statement-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
}
.member-statement-icon {
  display: inline-flex;
  color: #087f8c;
  padding: 10px;
  background: #eaf7f5;
  border-radius: 11px;
}
.member-statement-card > p {
  font-size: 12px;
  color: #5f7381;
  margin-bottom: 5px;
}
.member-statement-card > h2 {
  font-size: 20px;
  color: #203344;
  font-weight: 700;
  margin-bottom: 22px;
}
.member-statement-card dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.member-statement-card dl > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.member-statement-card dt {
  font-size: 12px;
  color: #5f7381;
}
.member-statement-card dt > small {
  font-size: 12px;
  margin-left: 4px;
}
.member-statement-card dd {
  margin: 0;
  font-size: 14px;
}
.member-statement-card > .member-statement-note {
  font-size: 12px;
  color: #5f7381;
  line-height: 1.7;
  margin: 16px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.member-statement-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-top: 1px solid #e6edf4;
  background: none;
  margin: 22px -22px -22px;
  padding: 16px 22px;
  color: #087f8c;
  font-size: 12px!important !important;
  margin-top: auto;
  font-weight: 600;
}
.member-statement-card dl {
  margin-bottom: 22px;
}
.member-statement-card > .member-statement-note {
  margin-top: 0;
  margin-bottom: 18px;
}
.member-statement-button:hover {
  background: #f8fbfe;
}
.member-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: start;
}
.member-profile-avatar {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf7f5;
  color: #087f8c;
  font-size: 17px;
  font-weight: 600;
}
.member-profile-list {
  padding: 0 25px;
  margin: 0;
}
.member-profile-list > div {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #edf1f5;
}
.member-profile-list dt {
  font-size: 12px;
  color: #5f7381;
}
.member-profile-list dd {
  font-size: 13px;
  color: #203344;
  margin: 0;
  text-align: right;
  word-break: break-word;
}
.member-profile-help {
  font-size: 12px;
  color: #5f7381;
  padding: 20px 25px;
  line-height: 1.8;
}
.member-profile-logout {
  padding: 0 25px 25px;
}
.member-profile-logout .member-button {
  font-size: 12px !important;
}
.member-password-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 25px 25px;
}
.member-password-form .member-field input {
  background: #fdfefe;
}
.member-password-form > .member-button {
  align-self: flex-start;
  margin-top: 2px;
}
.member-password-form .member-alert {
  margin-top: 0;
}
.member-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 16px;
  border-radius: 12px;
  border: 1px solid #d2e5dc;
  background: #fff;
  box-shadow: 0 10px 32px #102c3b16;
  color: #267b5e;
  font-size: 13px;
  max-width: calc(100vw - 32px);
  border-color: #b5d9ce;
}
.member-toast > .member-icon-button {
  width: 24px;
  height: 24px;
  margin-left: 15px;
}
.member-dialog {
  --member-blue:#087f8c;
  margin: auto;
  padding: 0;
  width: 480px;
  max-width: calc(100vw - 30px);
  max-height: calc(100dvh - 40px);
  border: 1px solid #d9e4ee;
  border-radius: 16px;
  box-shadow: 0 24px 90px #102c3b35;
  background: #fff;
  color: #48616f;
  font-family:
    "Inter",
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: auto;
  border-color: #dfe7ec;
}
.member-dialog::backdrop {
  background: #0b243c80;
  backdrop-filter: blur(5px);
}
.member-dialog-wide {
  width: 930px;
}
.member-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 23px;
  border-bottom: 1px solid #e7edf3;
  background: #f9fbfc;
  position: sticky;
  top: 0;
  z-index: 2;
  border-color: #e3eaee;
}
.member-dialog-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: #102c3b;
}
.member-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 17px 23px;
  border-top: 1px solid #e8edf3;
  background: #f7fafb;
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-color: #e3eaee;
}
.member-dialog-footer .member-button {
  min-height: 37px;
  font-size: 12px !important;
  padding: 8px 15px;
}
.member-transaction-detail {
  padding: 23px 27px;
}
.member-receipt-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 11px;
  padding: 1px 0 23px;
  border-bottom: 1px dashed #dce6ef;
}
.member-receipt-heading h3 {
  font-size: 14px;
  color: #48616f;
  font-weight: 500;
}
.member-receipt-heading > .member-amount {
  font-size: 29px;
  font-weight: 500;
  margin-bottom: 2px;
}
.member-receipt-heading > .member-amount > small {
  font-size: 12px;
}
.member-detail-list {
  margin: 18px 0 0;
}
.member-detail-list > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
}
.member-detail-list dt {
  font-size: 12px;
  color: #5f7381;
  white-space: nowrap;
}
.member-detail-list dd {
  margin: 0;
  color: #203344;
  font-size: 13px;
  text-align: right;
}
.member-detail-list .member-record-id {
  font-family:
    "Inter",
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Microsoft YaHei",
    sans-serif;
  font-size: 12px;
  overflow-wrap: anywhere;
  max-width: 230px;
  color: #5f7381;
}
.member-detail-note {
  border-radius: 9px;
  background: #f1f7f7;
  padding: 14px 16px;
  margin-top: 16px;
}
.member-detail-note > span {
  font-size: 12px;
  color: #5f7381;
}
.member-detail-note > p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #48616f;
  font-size: 13px;
  line-height: 1.8;
  margin-top: 7px;
}
.member-transaction-detail > .member-inline-note {
  margin-top: 17px;
  font-size: 12px;
}
.member-statement-detail {
  padding: 24px 25px 0;
}
.member-statement-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.member-statement-detail-heading p {
  font-size: 12px;
  color: #5f7381;
  margin-bottom: 5px;
}
.member-statement-detail-heading h3 {
  font-size: 24px;
  font-weight: 500;
  color: #486b89;
}
.member-statement-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f3f7fb;
  border: 1px solid #e6edf4;
  border-radius: 9px;
  padding: 20px 23px;
  margin-bottom: 14px;
  gap: 25px;
}
.member-statement-balances > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.member-statement-balances > div > span:first-child {
  font-size: 12px;
  color: #5f7381;
}
.member-statement-balances .member-amount {
  font-size: 24px;
  font-weight: 500;
}
.member-statement-caption {
  font-size: 12px;
  color: #5f7381;
  line-height: 1.8;
  margin-bottom: 23px !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.member-statement-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}
.member-segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e4eaf2;
  background: #f5f8fb;
  border-radius: 6px;
}
.member-segmented button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 7px 12px;
  font-size: 12px;
  color: #5f7381;
}
.member-segmented button.member-selected {
  background: #fff;
  color: #48616f;
  box-shadow: 0 1px 4px #42608010;
}
.member-statement-range {
  font-size: 12px;
  color: #5f7381;
  margin-bottom: 14px !important;
}
.member-statement-detail .member-table td,
.member-statement-detail .member-table th {
  padding-left: 15px;
  padding-right: 15px;
}
.member-statement-detail .member-pagination {
  padding-left: 0;
  padding-right: 0;
}
.member-logout-content {
  padding: 28px 25px;
}
.member-logout-content > p {
  font-size: 14px;
  color: #48616f;
  margin-top: 18px;
}
.member-logout-content > small {
  display: block;
  font-size: 12px;
  color: #5f7381;
  margin-top: 9px;
  line-height: 1.8;
}
.member-brand-mark > svg {
  width: 29px;
  height: 29px;
}
.member-login-welcome {
  position: relative;
  padding: 20px 0;
}
.member-login-welcome > h2 {
  color: #102c3b;
  font-size: 42px;
  line-height: 1.4;
  letter-spacing: -1px;
  font-weight: 700;
  margin: 20px 0;
}
.member-login-welcome > p:not(.member-eyebrow) {
  font-size: 15px;
  line-height: 1.9;
  color: #647b86;
  max-width: 350px;
}
.member-login-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.member-login-features > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d7e5e6;
  background: #ffffffa8;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 12px;
  color: #40636d;
}
.member-login-features svg {
  color: #087f8c;
}
.member-topbar .member-brand {
  color: #fff;
}
.member-topbar .member-brand > span:last-child:not(.member-brand-mark) {
  color: #a7c2cd;
  border-color: #36525f;
}
.member-topbar .member-brand-mark {
  background: #ffffff10;
  box-shadow: none;
}
.member-topbar-account .member-icon-button {
  color: #c3d6dd;
}
.member-topbar-account .member-icon-button:hover {
  background: #ffffff14;
  color: #fff;
}
.member-reconcile-actions .member-button:first-child {
  background: #fff;
  color: #087f8c;
  border-color: #c3dfe1;
}
.member-reconcile-summary > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 24px;
  border-left: 1px solid #e1e9ed;
}
.member-reconcile-summary > span:first-child {
  padding-left: 0;
  border-left: 0;
}
.member-reconcile-footer .member-negative {
  color: #ffbfc3;
}
.member-reconcile-footer .member-amount small {
  color: #accbd3;
}
@media (max-width: 1050px) {
  .member-topbar-inner {
    padding: 0 22px;
    gap: 16px;
  }
  .member-brand > span:last-child:not(.member-brand-mark) {
    display: none;
  }
  .member-desktop-nav {
    gap: 24px;
    margin-left: 0;
  }
  .member-main {
    padding-left: 22px;
    padding-right: 22px;
  }
  .member-overview {
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 15px;
  }
  .member-summary-card {
    padding: 20px;
  }
  .member-main-balance {
    font-size: 29px;
  }
  .member-summary-card > .member-amount {
    font-size: 22px;
  }
  .member-summary-date {
    font-size: 15px;
  }
  .member-table td,
  .member-table thead th {
    padding-left: 18px;
    padding-right: 18px;
  }
  .member-filters {
    grid-template-columns: repeat(4, 1fr);
  }
  .member-filter-search {
    grid-column: 1/-1;
  }
  .member-closing-filter .member-filters {
    grid-template-columns: 1fr 1fr 1fr auto;
  }
  .member-statements-grid {
    gap: 16px;
  }
  .member-statement-card {
    padding: 20px;
  }
  .member-statement-card > h2 {
    font-size: 18px;
  }
  .member-statement-button {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .member-statement-card dl > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .member-settings-grid {
    gap: 20px;
  }
}
@media (max-width: 760px) {
  .member-topbar {
    height: 66px;
  }
  .member-topbar-inner {
    padding: 0 20px;
  }
  .member-brand strong {
    font-size: 19px;
  }
  .member-brand-mark {
    width: 33px;
    height: 33px;
    border-radius: 8px;
  }
  .member-desktop-nav {
    display: none;
  }
  .member-topbar-account {
    gap: 7px;
  }
  .member-topbar-account > span {
    max-width: 100px;
    font-size: 12px;
  }
  .member-main {
    padding: 28px 18px 78px;
    min-height: calc(100vh - 66px);
  }
  .member-page-heading {
    margin-bottom: 22px;
    align-items: flex-start;
  }
  .member-page-heading h1 {
    font-size: 23px;
  }
  .member-page-heading h1 + p {
    font-size: 12px;
    margin-top: 6px;
  }
  .member-eyebrow {
    font-size: 12px !important;
    margin-bottom: 7px !important;
    letter-spacing: 1.5px;
  }
  .member-account-chip {
    font-size: 12px;
    padding: 6px 9px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
  }
  .member-overview {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
  }
  .member-balance-card {
    grid-column: 1/-1;
    min-height: 186px;
    padding: 23px 24px;
  }
  .member-main-balance {
    font-size: 35px;
    margin-top: 14px;
  }
  .member-summary-card {
    min-height: 177px;
    padding: 19px 20px;
  }
  .member-summary-card > .member-amount {
    font-size: 25px;
  }
  .member-summary-date {
    font-size: 17px;
  }
  .member-panel {
    margin-bottom: 21px;
    border-radius: 9px;
  }
  .member-section-heading {
    padding: 20px;
  }
  .member-section-heading h2 {
    font-size: 14px;
  }
  .member-section-heading p {
    font-size: 12px;
  }
  .member-section-heading > .member-link {
    font-size: 12px !important;
  }
  .member-table td,
  .member-table thead th {
    padding: 15px;
  }
  .member-account-strip {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }
  .member-account-strip > div > span {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    font-size: 12px;
  }
  .member-account-strip strong {
    font-size: 12px;
  }
  .member-footer {
    font-size: 12px;
    padding: 27px 0 12px;
  }
  .member-mobile-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffffed;
    border-top: 1px solid #e0e9f2;
    padding: 8px 8px max(9px, env(safe-area-inset-bottom));
    z-index: 25;
    backdrop-filter: blur(12px);
  }
  .member-mobile-nav button {
    background: transparent;
    border: 0;
    padding: 5px 0 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #5f7381;
    font-size: 12px;
    line-height: 1.6;
  }
  .member-mobile-nav button.member-nav-active {
    color: #4e7daf;
  }
  .member-mobile-nav button.member-nav-active svg {
    filter: drop-shadow(0 2px 3px #527eb815);
  }
  .member-filters {
    grid-template-columns: 1fr 1fr;
    gap: 16px 13px;
    padding: 20px;
  }
  .member-filter-heading {
    padding: 19px 20px 0;
  }
  .member-filter-search {
    grid-column: 1/-1;
  }
  .member-filters .member-field input,
  .member-filters .member-field select {
    min-height: 40px;
    font-size: 12px;
    padding-left: 10px;
  }
  .member-filters .member-input-icon > input {
    padding-left: 36px;
  }
  .member-filter-total > .member-amount {
    font-size: 17px;
  }
  .member-pagination {
    padding: 15px 18px;
    font-size: 12px;
  }
  .member-page-size {
    display: none;
  }
  .member-pagination > div {
    gap: 10px;
  }
  .member-page-button {
    width: 28px;
    height: 28px;
  }
  .member-page-heading > .member-button {
    font-size: 12px !important;
    min-height: 36px;
    padding: 8px 11px;
    margin-top: 22px;
  }
  .member-page-heading > .member-button svg {
    width: 15px;
    height: 15px;
  }
  .member-closing-filter .member-filters {
    grid-template-columns: 1fr 1fr;
  }
  .member-closing-filter .member-field:first-child {
    grid-column: 1/-1;
  }
  .member-closing-filter .member-link {
    grid-column: 1/-1;
    padding-top: 0;
    justify-self: start;
  }
  .member-statements-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }
  .member-statement-card {
    padding: 20px;
  }
  .member-statement-card > h2 {
    font-size: 17px;
  }
  .member-statement-top {
    margin-bottom: 18px;
  }
  .member-statement-card > h2 {
    margin-bottom: 18px;
  }
  .member-statement-card dt {
    font-size: 12px;
  }
  .member-statement-card dd {
    font-size: 15px;
  }
  .member-statement-button {
    font-size: 12px !important;
    padding: 14px 20px;
  }
  .member-settings-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .member-password-form {
    padding: 0 20px 23px;
    gap: 19px;
  }
  .member-profile-list {
    padding: 0 20px;
  }
  .member-profile-help {
    padding: 18px 20px;
  }
  .member-profile-logout {
    padding: 0 20px 22px;
  }
  .member-profile-list dt,
  .member-profile-list dd {
    font-size: 12px;
  }
  .member-toast {
    bottom: 88px;
    white-space: nowrap;
  }
  .member-dialog {
    max-height: calc(100dvh - 30px);
    max-width: calc(100vw - 24px);
  }
  .member-dialog-header {
    padding: 14px 18px;
  }
  .member-dialog-footer {
    padding: 14px 18px;
  }
  .member-transaction-detail {
    padding: 21px 22px;
  }
  .member-statement-detail {
    padding: 21px 18px 0;
  }
  .member-statement-balances {
    padding: 17px 18px;
    gap: 18px;
  }
  .member-statement-balances .member-amount {
    font-size: 21px;
  }
  .member-statement-detail-heading h3 {
    font-size: 21px;
  }
  .member-statement-controls {
    gap: 10px;
  }
  .member-segmented button {
    padding: 7px 9px;
    font-size: 12px;
  }
  .member-statement-controls > .member-link {
    font-size: 12px !important;
    gap: 3px;
  }
  .member-statement-controls > .member-link svg {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 650px) {
  .member-desktop-table {
    display: none;
  }
  .member-mobile-transactions {
    display: block;
  }
  .member-mobile-tx {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 0;
    border-top: 1px solid #edf2f7;
    padding: 17px 20px;
  }
  .member-mobile-tx > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }
  .member-mobile-tx > div:first-child {
    margin-bottom: 9px;
  }
  .member-mobile-tx > div > strong {
    font-size: 12px;
    color: #48616f;
    font-weight: 500;
  }
  .member-mobile-tx .member-amount {
    font-size: 16px;
    font-weight: 500;
  }
  .member-mobile-tx > div:nth-child(2) > span:first-child {
    font-size: 12px;
    color: #5f7381;
  }
  .member-mobile-tx .member-status {
    font-size: 12px;
    padding: 2px 7px;
  }
  .member-mobile-tx > p {
    font-size: 12px;
    color: #5f7381;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 7px;
  }
  .member-mobile-tx:hover {
    background: #fbfdff;
  }
  .member-statement-detail .member-mobile-tx {
    padding-left: 0;
    padding-right: 0;
  }
  .member-table-wrap {
    overflow-x: auto;
  }
  .member-dialog .member-empty {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}
@media (max-width: 420px) {
  .member-login {
    padding: 25px 16px;
  }
  .member-login-banner {
    padding: 23px 25px;
  }
  .member-login-body {
    padding: 27px 25px 24px;
  }
  .member-login-body h1 {
    font-size: 25px;
  }
  .member-login-help {
    font-size: 12px;
  }
  .member-main {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 25px;
  }
  .member-topbar-inner {
    padding: 0 16px;
  }
  .member-summary-card {
    padding: 18px 17px;
  }
  .member-summary-date {
    font-size: 15px;
  }
  .member-summary-card > .member-amount {
    font-size: 22px;
  }
  .member-summary-card > small {
    font-size: 12px;
  }
  .member-summary-card > .member-link {
    font-size: 12px !important;
  }
  .member-main-balance {
    font-size: 32px;
  }
  .member-balance-card {
    padding: 22px;
  }
  .member-statements-grid {
    grid-template-columns: 1fr;
  }
  .member-statement-card {
    padding: 22px;
  }
  .member-statement-card > h2 {
    font-size: 21px;
  }
  .member-statement-card dl > div {
    flex-direction: row;
    align-items: center;
  }
  .member-statement-button {
    margin-left: -22px;
    margin-right: -22px;
    margin-bottom: -22px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 12px !important;
  }
  .member-statement-card dt {
    font-size: 12px;
  }
  .member-statement-card dd {
    font-size: 15px;
  }
  .member-footer {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .member-receipt-heading > .member-amount {
    font-size: 27px;
  }
  .member-detail-list > div {
    gap: 15px;
  }
  .member-detail-list .member-record-id {
    max-width: 190px;
  }
  .member-statement-balances {
    padding: 15px;
    gap: 12px;
  }
  .member-statement-balances .member-amount {
    font-size: 19px;
  }
  .member-statement-balances > div > span:first-child {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .member-root *,
  .member-dialog * {
    animation: none !important;
    transition: none !important;
  }
}
.member-summary-card > .member-amount,
.member-main-balance {
  max-width: 100%;
  overflow-x: auto;
}
.member-statement-balances > div {
  min-width: 0;
}
.member-statement-balances .member-amount {
  max-width: 100%;
  overflow-x: auto;
}
.member-statement-card dd {
  max-width: 100%;
  overflow-x: auto;
}
.member-topbar-account > span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 160px;
}
.member-company-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  color: #48616f;
}
.member-topbar-account > span > small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #5f7381;
}
@media (max-width: 760px) {
  .member-topbar-account > span {
    max-width: 115px;
  }
  .member-company-label {
    font-size: 12px;
  }
}
.member-return-login {
  display: flex;
  margin: 18px auto 0;
}
.member-filter-error {
  font-size: 12px;
  color: #b96463;
  padding: 0 23px 20px !important;
  line-height: 1.7;
}
.member-first-identity {
  padding: 14px 16px;
  margin: 0 0 23px;
  border: 1px solid #e3ebf2;
  border-radius: 10px;
  background: #f1f7f7;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-color: #dce9ea;
}
.member-first-identity > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.member-first-identity dt {
  color: #5f7381;
  font-size: 12px;
  white-space: nowrap;
}
.member-first-identity dd {
  margin: 0;
  text-align: right;
  color: #203344;
  font-size: 12px;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.member-first-identity dd small {
  display: block;
  color: #5f7381;
  font-size: 12px;
  margin-top: 3px;
}
.member-first-logout {
  margin: 21px auto 0;
  display: flex;
  justify-content: center;
}
.member-first-login .member-login-intro {
  margin-bottom: 23px !important;
}
.member-first-login .member-field > small {
  font-size: 12px;
}
.member-button-green {
  background: #087f8c;
  border-color: #087f8c;
}
.member-button-green:hover:not(:disabled) {
  background: #076772;
  border-color: #076772;
}
.member-button-green-outline {
  background: #fff;
  color: #087f8c;
  border-color: #c3dfe1;
}
.member-button-green-outline:hover:not(:disabled) {
  background: #f0f8f4;
  box-shadow: none;
}
.member-reconcile-heading {
  margin-bottom: 22px;
}
.member-reconcile-toolbar {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid #e3ecf4;
  border-color: #e3eaee;
}
.member-reconcile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.member-reconcile-identity strong {
  font-size: 16px;
  font-weight: 700;
  color: #203344;
  overflow-wrap: anywhere;
}
.member-reconcile-identity > span {
  font-size: 12px;
  color: #5f7381;
  white-space: nowrap;
}
.member-reconcile-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.member-reconcile-actions .member-button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 12px!important !important;
  border-radius: 8px;
}
.member-reconcile-summary {
  display: grid;
  gap: 0;
  padding: 24px;
  align-items: center;
  flex-wrap: wrap;
  background: #fbfcfd;
  font-size: 12px;
  color: #5f7381;
  grid-template-columns: 1fr 1fr 1.2fr;
}
.member-reconcile-summary b {
  font-size: 17px;
  font-weight: 600;
  color: #203344;
  margin-left: 0;
}
.member-reconcile-summary > span:last-child {
  margin-left: 0;
}
.member-reconcile-summary .member-amount {
  font-size: 25px;
  margin-left: 0;
  font-weight: 700;
  line-height: 1.2;
}
.member-reconcile-table thead th {
  background: #eff5f6;
  color: #607783;
  border: 0;
  font-size: 12px;
  padding: 13px 18px;
  border-top: 1px solid #dfe7ec;
  border-bottom: 1px solid #dfe7ec;
}
.member-reconcile-table td {
  padding: 15px 18px;
  border: 0;
  font-size: 13px;
  border-bottom: 1px solid #e7eef1;
}
.member-reconcile-table td:first-child,
.member-reconcile-table th:first-child {
  border-left: 0;
}
.member-reconcile-table td:last-child,
.member-reconcile-table th:last-child {
  border-right: 0;
}
.member-reconcile-table .member-reconcile-remark {
  max-width: 220px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.7;
}
.member-reconcile-table .member-table-title {
  font-size: 13px;
}
.member-reconcile-center {
  text-align: center !important;
}
.member-reconcile-opening td {
  background: #f5f9fa!important !important;
  color: #5f7381;
}
.member-reconcile-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #48616f;
  cursor: pointer;
  white-space: nowrap;
  padding: 5px 0;
}
.member-reconcile-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: #087f8c;
}
.member-reconcile-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #21826a;
}
.member-reconcile-table tfoot td {
  background: #f5f9fa;
  border-top: 1px solid #dfe7ec;
  font-size: 12px;
  color: #48616f;
  font-weight: 600;
}
.member-reconcile-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: #102c3b;
  color: #d0e2e8;
  font-size: 13px;
  border-top: 1px solid #cfdfed;
  border: 0;
}
.member-reconcile-footer .member-amount {
  font-size: 23px;
  margin-left: 12px;
  font-weight: 600;
  color: #fff;
}
.member-reconcile-footer > span:last-child {
  font-size: 12px;
  align-self: center;
  color: #bdd1da;
}
.member-reconcile-empty {
  padding: 20px!important !important;
  font-size: 12px;
  color: #5f7381;
  text-align: center;
  border-top: 1px solid #e3edf5;
  background: #fff;
}
.member-reconcile-secondary {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  margin-top: -4px;
  margin-bottom: 15px;
}
.member-reconcile-secondary .member-link {
  font-size: 12px !important;
}
.member-reconcile-mobile {
  display: none;
}
.member-reconcile-error {
  margin: 14px 20px 0;
}
.member-reconcile-confirm {
  padding: 25px;
}
.member-reconcile-confirm > p {
  font-size: 14px;
  color: #48616f;
  line-height: 1.9;
}
.member-reconcile-confirm > small {
  display: block;
  font-size: 12px;
  color: #5f7381;
  margin-top: 8px;
  line-height: 1.8;
}
@media (max-width: 760px) {
  .member-reconcile-toolbar {
    padding: 16px 17px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .member-reconcile-identity {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .member-reconcile-actions {
    width: 100%;
    gap: 8px;
  }
  .member-reconcile-actions .member-button {
    flex: 1;
    min-height: 36px;
    font-size: 12px !important;
  }
  .member-reconcile-summary {
    padding: 14px 17px;
    gap: 10px 20px;
  }
  .member-reconcile-summary > span:last-child {
    margin-left: 0;
    width: 100%;
  }
  .member-reconcile-desktop {
    display: none;
  }
  .member-reconcile-mobile {
    display: block;
  }
  .member-reconcile-mobile .member-reconcile-table {
    table-layout: fixed;
  }
  .member-reconcile-mobile .member-reconcile-table th:nth-child(1) {
    width: 42%;
  }
  .member-reconcile-mobile .member-reconcile-table th:nth-child(2) {
    width: 38%;
  }
  .member-reconcile-mobile .member-reconcile-table th:nth-child(3) {
    width: 20%;
  }
  .member-reconcile-mobile .member-reconcile-table td,
  .member-reconcile-mobile .member-reconcile-table th {
    padding: 12px 11px;
    white-space: normal;
    vertical-align: top;
  }
  .member-reconcile-mobile td > strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #48616f;
    overflow-wrap: anywhere;
  }
  .member-reconcile-mobile td > small {
    display: block;
    font-size: 12px;
    color: #5f7381;
    margin-top: 5px;
  }
  .member-reconcile-mobile td > small > .member-amount {
    font-size: 12px;
    font-weight: 400;
    color: #48616f;
  }
  .member-reconcile-mobile td > p {
    font-size: 12px;
    color: #5f7381;
    line-height: 1.7;
    margin-top: 7px;
    overflow-wrap: anywhere;
  }
  .member-reconcile-mobile td > .member-amount {
    font-size: 13px;
    max-width: 100%;
    display: block;
    overflow-x: auto;
  }
  .member-reconcile-check {
    gap: 4px;
    font-size: 12px;
  }
  .member-reconcile-check input {
    width: 13px;
    height: 13px;
  }
  .member-reconcile-footer {
    padding: 14px 17px;
  }
  .member-reconcile-footer .member-amount {
    font-size: 17px;
    margin-left: 12px;
  }
  .member-reconcile-secondary {
    justify-content: center;
    gap: 22px;
  }
  .member-reconcile-heading .member-account-chip {
    display: none;
  }
}
.member-binding-panel {
  grid-column: 1/-1;
}
.member-binding-table td,
.member-binding-table th {
  font-size: 12px;
  white-space: nowrap;
}
.member-binding-table td > strong {
  font-size: 13px;
  font-weight: 600;
  color: #203344;
}
.member-binding-table td > small {
  display: block;
  font-size: 12px;
  color: #5f7381;
  margin-top: 4px;
}
.member-binding-row-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.member-binding-unlink {
  color: #b44750;
}
.member-binding-panel .member-section-heading > .member-button {
  font-size: 12px !important;
  min-height: 36px;
  padding: 8px 12px;
}
.member-switch-body {
  padding: 22px;
}
.member-current-account {
  font-size: 12px;
  color: #5f7381;
  margin-bottom: 18px !important;
}
.member-current-account strong {
  font-size: 13px;
  color: #203344;
  font-weight: 500;
  margin-left: 8px;
}
.member-switch-button {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 12px !important;
}
.member-link-form {
  padding: 23px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.member-link-form > p {
  font-size: 12px;
  color: #5f7381;
  margin-bottom: 2px;
  line-height: 1.8;
}
.member-link-form .member-alert {
  margin-top: 0;
}
.member-switch-body > .member-alert {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .member-binding-panel .member-section-heading {
    align-items: flex-start;
  }
  .member-binding-panel .member-section-heading p {
    max-width: 200px;
    line-height: 1.8;
  }
  .member-binding-table td,
  .member-binding-table thead th {
    padding: 13px 14px;
  }
  .member-binding-row-actions {
    gap: 12px;
  }
  .member-binding-row-actions .member-link {
    font-size: 12px !important;
  }
  .member-switch-body {
    padding: 18px;
  }
  .member-switch-body .member-table td,
  .member-switch-body .member-table th {
    padding: 12px 10px;
  }
  .member-current-account strong {
    display: block;
    margin: 5px 0 0;
  }
  .member-link-form {
    padding: 20px;
  }
  .member-reconcile-actions .member-button {
    font-size: 12px !important;
    padding-left: 8px;
    padding-right: 8px;
    gap: 5px;
  }
}
.member-reconcile-footer {
  flex-wrap: wrap;
}
.member-reconcile-change .member-amount {
  font-size: 16px;
  margin-left: 8px;
}
.member-reconcile-change > small {
  font-size: 11px;
  margin-left: 9px;
  color: #aac3ce;
}
@media (max-width: 760px) {
  .member-reconcile-footer > span.member-reconcile-change {
    width: 100%;
    font-size: 12px;
  }
  .member-reconcile-change .member-amount {
    font-size: 13px;
    margin-left: 8px;
  }
}
.member-root input:focus,
.member-root select:focus,
.member-dialog input:focus,
.member-dialog select:focus {
  border-color: #58a9af;
  box-shadow: 0 0 0 3px #087f8c0c;
}
.member-topbar-account > span .member-company-label {
  color: #d0e3e9;
  font-size: 12px;
  font-weight: 600;
}
.member-topbar-account > span > small {
  color: #9fbbc6;
  font-size: 11px;
}
.member-mobile-nav button.member-nav-active {
  color: #087f8c;
}
.member-mobile-nav button.member-nav-active svg {
  filter: none;
}
.member-mobile-nav button.member-nav-active:before {
  content: "";
  position: absolute;
  top: 0;
  width: 32px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #087f8c;
}
.member-reconcile-summary .member-amount small {
  font-size: 11px;
}
.member-reconcile-footer .member-reconcile-change .member-amount {
  font-size: 16px;
}
@media (max-width: 1050px) {
  .member-login-layout {
    column-gap: 45px;
    grid-template-columns: 1fr 420px;
  }
  .member-login-welcome > h2 {
    font-size: 36px;
  }
  .member-desktop-nav {
    gap: 3px;
  }
  .member-desktop-nav button {
    padding-left: 11px;
    padding-right: 11px;
  }
  .member-topbar-inner {
    gap: 16px;
  }
  .member-topbar .member-brand > span:last-child:not(.member-brand-mark) {
    display: none;
  }
  .member-topbar-account > span {
    display: none;
  }
}
@media (max-width: 850px) {
  .member-login-layout {
    max-width: 460px;
    display: block;
  }
  .member-login-welcome {
    display: none;
  }
  .member-login {
    padding: 40px 22px;
  }
  .member-login-footer {
    padding-top: 23px;
  }
}
@media (max-width: 760px) {
  .member-topbar {
    height: 68px;
  }
  .member-topbar .member-brand strong {
    font-size: 20px;
  }
  .member-brand-mark {
    width: 35px;
    height: 35px;
  }
  .member-brand-mark > svg {
    width: 27px;
    height: 27px;
  }
  .member-main {
    padding-top: 27px;
    min-height: calc(100vh - 68px);
  }
  .member-page-heading h1 {
    font-size: 25px;
  }
  .member-page-heading h1 + p {
    font-size: 12px;
    line-height: 1.8;
  }
  .member-panel {
    border-radius: 12px;
  }
  .member-section-heading h2 {
    font-size: 15px;
  }
  .member-section-heading p {
    font-size: 12px;
  }
  .member-reconcile-toolbar {
    padding: 18px;
  }
  .member-reconcile-actions .member-button {
    font-size: 12px !important;
    min-height: 40px;
  }
  .member-reconcile-summary {
    padding: 20px 16px;
    grid-template-columns: 1fr 1fr;
    gap: 17px 0;
  }
  .member-reconcile-summary > span {
    padding: 0 16px;
    font-size: 11px;
  }
  .member-reconcile-summary > span:last-child {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid #e3eaee;
    padding: 16px 0 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .member-reconcile-summary b {
    font-size: 16px;
  }
  .member-reconcile-summary .member-amount {
    font-size: 25px;
  }
  .member-reconcile-mobile .member-reconcile-table td,
  .member-reconcile-mobile .member-reconcile-table th {
    padding: 14px 12px;
  }
  .member-reconcile-mobile td > strong {
    font-size: 12px;
    font-weight: 600;
    color: #203344;
  }
  .member-reconcile-mobile td > small {
    font-size: 11px;
    color: #5f7381;
  }
  .member-reconcile-mobile td > p {
    font-size: 11px;
    color: #5f7381;
  }
  .member-reconcile-mobile td > .member-amount {
    font-size: 14px;
  }
  .member-reconcile-mobile td > small > .member-amount {
    font-size: 11px;
    color: #647c89;
  }
  .member-reconcile-check {
    font-size: 11px;
  }
  .member-reconcile-check input {
    width: 16px;
    height: 16px;
  }
  .member-reconcile-footer {
    padding: 18px;
    gap: 12px;
  }
  .member-reconcile-footer .member-amount {
    font-size: 22px;
  }
  .member-reconcile-footer > span.member-reconcile-change {
    font-size: 12px;
  }
  .member-reconcile-footer .member-reconcile-change .member-amount {
    font-size: 14px;
  }
  .member-reconcile-change > small {
    font-size: 10px;
  }
  .member-mobile-nav {
    box-shadow: 0 -3px 18px #102c3b06;
  }
  .member-mobile-nav button {
    font-size: 11px;
    position: relative;
    min-height: 46px;
    color: #5f7381;
  }
  .member-mobile-tx > div > strong {
    color: #203344;
    font-size: 13px;
  }
  .member-mobile-tx > div:nth-child(2) > span:first-child,
  .member-mobile-tx > p {
    font-size: 11px;
    color: #5f7381;
  }
  .member-filters .member-field input,
  .member-filters .member-field select {
    font-size: 14px;
    min-height: 44px;
  }
  .member-page-button {
    width: 32px;
    height: 32px;
  }
  .member-dialog-footer .member-button {
    min-height: 40px;
  }
  .member-footer {
    font-size: 10px;
  }
  .member-reconcile-secondary {
    gap: 18px;
  }
  .member-reconcile-secondary .member-link {
    font-size: 12px !important;
  }
}
@media (max-width: 420px) {
  .member-login {
    padding: 24px 15px;
  }
  .member-login-card {
    border-radius: 18px;
  }
  .member-login-banner {
    padding: 23px 24px;
  }
  .member-login-body {
    padding: 26px 24px;
  }
  .member-login-body .member-field input {
    font-size: 16px;
  }
  .member-login-help {
    font-size: 11px;
  }
  .member-main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .member-topbar-inner {
    padding: 0 15px;
  }
  .member-topbar-account {
    gap: 3px;
  }
  .member-topbar .member-brand {
    gap: 8px;
  }
  .member-topbar .member-brand strong {
    font-size: 19px;
  }
  .member-reconcile-actions {
    gap: 6px;
  }
  .member-reconcile-actions .member-button {
    font-size: 11px !important;
    padding: 8px 9px;
    gap: 5px;
  }
  .member-reconcile-mobile .member-reconcile-table td,
  .member-reconcile-mobile .member-reconcile-table th {
    padding: 13px 9px;
  }
  .member-reconcile-mobile .member-reconcile-table th:nth-child(1) {
    width: 40%;
  }
  .member-reconcile-mobile .member-reconcile-table th:nth-child(2) {
    width: 39%;
  }
  .member-reconcile-mobile .member-reconcile-table th:nth-child(3) {
    width: 21%;
  }
}

.platform-shell,.platform-login,.platform-loading{--platform-blue:#527eb8;--platform-dark:#2c3e50;--platform-border:#d4e1eb;color:#405568;font-family:Arial,"Microsoft JhengHei",sans-serif;font-size:14px}.platform-shell button,.platform-login button,.platform-loading button{font:inherit;cursor:pointer}.platform-shell button:disabled,.platform-login button:disabled{opacity:.5;cursor:not-allowed}.platform-shell a,.platform-login a{color:#497eaf;text-decoration:none}.platform-shell a:hover,.platform-login a:hover{text-decoration:underline}.platform-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;min-height:36px;border:1px solid #527eb8;border-radius:3px;background:#527eb8;color:white;font-size:13px;white-space:nowrap}.platform-button:hover:not(:disabled){background:#3d689e}.platform-secondary{background:white;color:#607c92;border-color:#cbd9e4}.platform-secondary:hover:not(:disabled){background:#edf4f9}.platform-danger{background:#d65a56;border-color:#d65a56}.platform-danger:hover:not(:disabled){background:#bc4541}.platform-topbar{height:58px;position:fixed;inset:0 0 auto;z-index:20;background:#527eb8;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 25px}.platform-brand{display:flex;align-items:center;gap:11px;color:white!important;font-size:14px;text-decoration:none!important}.platform-brand strong{font-size:21px;font-weight:500}.platform-brand-mark{display:inline-flex;width:31px;height:31px;border:1px solid #ffffff80;border-radius:4px;align-items:center;justify-content:center;font-size:19px;color:white;background:#ffffff12}.platform-brand-divider{width:1px;height:23px;background:#ffffff4d;margin:0 2px}.platform-user{display:flex;align-items:center;gap:15px;font-size:12px}.platform-role{padding:3px 6px;border:1px solid #ffffff45;border-radius:3px;font-size:10px}.platform-top-button{border:0;background:transparent;color:#e9f2ff;padding:8px 3px;font-size:12px!important}.platform-top-button:hover{text-decoration:underline}.platform-sidebar{position:fixed;left:0;top:58px;bottom:0;width:205px;border-right:1px solid #d7e2ec;background:white}.platform-nav-caption{font-size:11px;color:#96a5b2;padding:27px 23px 13px}.platform-nav-current{display:flex;align-items:center;gap:12px;border-left:3px solid #527eb8;padding:15px 20px;background:#edf4fa;color:#4775a7;font-size:13px}.platform-nav-current>span{font-size:19px}.platform-nav-note{font-size:11px;line-height:1.8;color:#9aa9b5;padding:23px}.platform-workspace{padding:94px 30px 0;margin-left:205px;min-height:100vh;background:#f8fafc;display:flex;flex-direction:column}.platform-page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:15px}.platform-page-title p{color:#96a8b7;font-size:10px;letter-spacing:1.3px;margin:0 0 7px}.platform-page-title h1{font-size:24px;font-weight:500;letter-spacing:1px;margin:0 0 8px;color:#486a88}.platform-page-title div>span{font-size:12px;color:#92a2b0}.platform-stats{display:grid;grid-template-columns:repeat(3,1fr);background:white;border:1px solid #d4e1eb;margin-bottom:24px;border-radius:3px;padding:23px 0}.platform-stats>div{padding:0 28px;border-right:1px solid #e3ebf1}.platform-stats>div:last-child{border:0}.platform-stats span{display:block;color:#93a5b4;font-size:12px;margin-bottom:12px}.platform-stats strong{font-size:29px;font-weight:400;color:#527eb8}.platform-stats .platform-positive{color:#49967d}.platform-panel{border:1px solid #d0e0ec;border-radius:3px;background:white;overflow:hidden}.platform-panel-head{padding:12px 16px;background:#eaf3fa;border-bottom:1px solid #d0e0ec;display:flex;justify-content:space-between;align-items:center}.platform-panel-head h2{font-size:14px;font-weight:500;margin:0;color:#4d7698}.platform-text-button{border:0;background:transparent;color:#6387a5;padding:0;font-size:11px!important}.platform-toolbar{padding:16px;display:flex;align-items:center;gap:12px}.platform-toolbar>span{margin-left:auto;font-size:11px;color:#93a3b1}.platform-toolbar select,.platform-search input{height:34px;border:1px solid #cddce7;font-size:12px;padding:7px 10px;border-radius:3px;background:white;color:#6b8194}.platform-search{display:flex;align-items:center;position:relative;width:270px;max-width:100%}.platform-search>span{position:absolute;left:10px;color:#9bb0c1;font-size:23px}.platform-search input{padding-left:34px;width:100%}.platform-table-wrap{overflow:auto}.platform-table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}.platform-table th{padding:11px 14px;text-align:left;font-weight:500;color:#6a88a0;background:#f1f7fb;border:1px solid #deE9f1;border-left:0}.platform-table td{padding:17px 14px;border:1px solid #e4ecf2;border-left:0;color:#657c8f}.platform-table th:last-child,.platform-table td:last-child{border-right:0}.platform-table tr:last-child td{border-bottom:0}.platform-table tbody tr:hover{background:#f7fbfe}.platform-company-code{font-weight:500;color:#527da5}.platform-legacy{font-size:9px;padding:2px 5px;background:#edf2f6;color:#8ba0b1;border-radius:2px;margin-left:8px}.platform-status{display:inline-flex;gap:5px;align-items:center;font-size:10px;color:#9ba5ad}.platform-status>span{height:5px;width:5px;border-radius:50%;background:#aeb7c0}.platform-status-active{color:#559b81}.platform-status-active>span{background:#64a68e}.platform-table .platform-date{color:#98a8b4;font-size:11px}.platform-row-actions{display:flex;gap:13px}.platform-row-actions button{border:0;background:transparent;color:#5784a9;padding:0;font-size:11px!important}.platform-row-actions .platform-danger-text{color:#cf6967}.platform-empty{padding:40px;text-align:center;color:#99adbc}.platform-empty>span{font-size:31px;color:#bfd0dd}.platform-empty p{margin:13px 0 20px}.platform-footer{margin-top:auto;padding:28px 0 20px;text-align:right;font-size:10px;letter-spacing:.5px;color:#a1afba}.platform-success{display:flex;align-items:center;justify-content:space-between;border:1px solid #bddbd0;background:#f1faf5;color:#5c907c;font-size:12px;padding:12px 15px;margin-bottom:18px;border-radius:3px}.platform-dismiss{border:0;background:transparent;color:#8eaaa0;font-size:20px!important;padding:0 0 0 15px}.platform-created{border:1px solid #bfd4e5;background:#f0f7fc;border-radius:3px;padding:18px 20px;margin-bottom:22px;display:flex;align-items:center;gap:25px}.platform-created>div:first-child{display:flex;align-items:center;gap:13px}.platform-created-icon{font-size:24px;color:#6c9bbd}.platform-created h2{font-size:14px;font-weight:500;margin:0 0 7px}.platform-created p{font-size:11px;margin:0;color:#8aa0b1}.platform-created p strong{font-weight:500}.platform-created .platform-dismiss{margin-left:auto}.platform-login,.platform-loading{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:13vh 20px 60px;background:#eff5fa}.platform-login-card{width:445px;background:white;border:1px solid #d4e1eb;border-radius:4px;box-shadow:0 10px 35px #3057790a;overflow:hidden}.platform-login-brand{background:#2c3e50;color:white;padding:26px 30px;display:flex;align-items:center;gap:15px}.platform-login-brand>.platform-brand-mark{width:41px;height:41px;font-size:25px}.platform-login-brand h1{font-size:22px;font-weight:500;margin:0 0 7px}.platform-login-brand p{font-size:10px;color:#a9bece;margin:0}.platform-login-card form{padding:26px 30px 25px}.platform-login-card form>h2{font-size:16px;font-weight:500;margin:0 0 10px}.platform-login-description{font-size:12px;line-height:1.8;color:#95a7b5;margin-bottom:24px}.platform-field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#6f879a;margin-bottom:19px}.platform-field input{width:100%;height:37px;border:1px solid #cbd9e4;border-radius:3px;padding:8px 10px;background:white;color:#4a6479;font-size:13px;box-sizing:border-box}.platform-field input:focus{outline:2px solid #a5c6e5;outline-offset:1px}.platform-field>small{font-size:10px;color:#97a9b6}.platform-field b{color:#d77473;font-weight:400}.platform-login-submit{width:100%;margin-top:4px}.platform-error{font-size:12px;color:#c85954;background:#fff4f2;border:1px solid #f0d2cb;line-height:1.7;padding:11px 13px;margin:14px 0;border-radius:3px}.platform-notice{font-size:12px;line-height:1.8;background:#fff9ed;color:#9c8758;padding:11px 13px;border:1px solid #eadcba;border-radius:3px;margin-bottom:20px}.platform-loading-card{text-align:center;max-width:440px;padding:32px;background:white;border:1px solid #d7e4ed;border-radius:4px}.platform-loading-card>.platform-brand-mark{background:#527eb8}.platform-loading-card h1{font-size:21px;font-weight:500;margin:20px 0 15px}.platform-loading-card p{font-size:12px;line-height:1.8;color:#8da1b1}.platform-dialog{padding:0;border:1px solid #c4d6e5;border-radius:4px;width:600px;max-width:calc(100vw - 32px);max-height:calc(100vh - 40px);background:white;color:#527087;box-shadow:0 20px 70px #294c7133}.platform-dialog::backdrop{background:#263d5659}.platform-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:#527eb8;color:white}.platform-dialog-head h2{font-size:15px;font-weight:500;margin:0}.platform-icon{border:0;color:white;background:transparent;font-size:24px!important;padding:0 3px}.platform-dialog-body{padding:24px}.platform-form-intro{font-size:12px;color:#92a6b5;line-height:1.7;margin:0 0 24px}.platform-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.platform-dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:15px 20px;background:#f8fbfd;border-top:1px solid #e0eaf2}.platform-password-fields{max-width:420px;margin:auto}.platform-confirm{text-align:center;padding:10px 8px 15px}.platform-confirm-icon{display:flex;align-items:center;justify-content:center;height:42px;width:42px;border-radius:50%;margin:0 auto 18px;background:#f0f5f9;color:#83a4bf;font-size:20px}.platform-confirm h3{font-size:16px;font-weight:500;line-height:1.6}.platform-confirm p{font-size:12px;color:#91a5b5;line-height:1.9;max-width:410px;margin:12px auto}.platform-dialog .platform-error{margin-bottom:0}@media(max-width:1000px){.platform-sidebar{width:170px}.platform-workspace{margin-left:170px;padding:85px 20px 0}.platform-created{gap:15px;flex-wrap:wrap}.platform-user{gap:10px}.platform-role{display:none}}@media(max-width:720px){.platform-sidebar{display:none}.platform-workspace{margin:0;padding:83px 12px 0}.platform-topbar{padding:0 12px}.platform-brand{font-size:11px;gap:7px}.platform-brand strong{font-size:17px}.platform-brand-mark{width:26px;height:26px;font-size:17px}.platform-user>span{display:none}.platform-top-button{font-size:11px!important}.platform-user{gap:9px}.platform-page-title{align-items:flex-start}.platform-page-title h1{font-size:22px}.platform-page-title div>span{font-size:11px}.platform-stats{padding:20px 0}.platform-stats>div{padding:0 20px}.platform-stats strong{font-size:25px}.platform-stats span{font-size:11px}.platform-toolbar{flex-wrap:wrap;padding:12px;gap:10px}.platform-toolbar>span{font-size:10px}.platform-search{width:100%}.platform-table th,.platform-table td{padding-left:12px;padding-right:12px}.platform-created{padding:16px}.platform-created>.platform-dismiss{position:absolute;right:30px}.platform-login{padding-top:8vh}.platform-login-brand{padding:24px}.platform-login-card form{padding:24px}.platform-dialog-body{padding:20px}.platform-footer{text-align:center}.platform-page-title>.platform-button{padding:8px 11px;font-size:12px}}@media(max-width:430px){.platform-form-grid{grid-template-columns:1fr}.platform-page-title div>span{display:block;max-width:190px;line-height:1.7}.platform-stats>div{padding:0 15px}.platform-brand-divider{display:none}.platform-created h2{font-size:13px}}

.platform-nav-button{width:100%;display:flex;align-items:center;gap:12px;border:0;border-left:3px solid transparent;background:white;text-align:left;padding:15px 20px;color:#6d879b;font-size:13px!important}.platform-nav-button:hover{background:#f3f7fb}.platform-nav-button>span{font-size:19px}.platform-nav-button>small{margin-left:auto;min-width:19px;padding:2px 5px;border-radius:10px;background:#e5edf5;color:#6a87a1;text-align:center;font-size:10px}.platform-nav-button.platform-nav-current{border-left-color:#527eb8;background:#edf4fa;color:#4775a7}.platform-stats-four{grid-template-columns:repeat(4,1fr)}.platform-company-actions{flex-wrap:wrap;gap:12px 15px;max-width:250px;line-height:1.7}.platform-confirm-code{margin:20px 0 0}.platform-confirm-code input{font-family:Consolas,monospace}.platform-accounts{min-width:0}.platform-account-selector{display:flex;align-items:center;gap:18px;margin-bottom:23px;flex-wrap:wrap}.platform-account-selector>label{display:flex;align-items:center;gap:12px;font-size:12px;color:#7690a5}.platform-account-selector select{min-width:250px;max-width:100%;height:36px;background:white;border:1px solid #cbdbe7;border-radius:3px;color:#54758e;padding:6px 11px;font-size:12px}.platform-readonly-badge{font-size:11px;border:1px solid #c7d9e7;background:#eef5fa;border-radius:3px;color:#6d8da7;padding:4px 8px;margin-left:auto}.platform-account-loading{padding:65px 20px;text-align:center;color:#8aa0b2;background:white;border:1px solid #dce7ef;border-radius:3px}.platform-accounts>.platform-error{display:flex;justify-content:space-between;gap:20px}.platform-overview-toolbar{border:1px solid #dce7ef;background:white;margin-bottom:18px;border-radius:3px}.platform-overview-toolbar .platform-search input{padding-left:11px}.platform-company-accounts{display:grid;grid-template-columns:1fr;gap:22px}.platform-company-accounts .platform-panel-head{gap:18px;align-items:flex-start}.platform-company-accounts .platform-panel-head h2{line-height:1.6}.platform-company-accounts .platform-panel-head h2 small{font-size:11px;color:#89a0b3;margin-left:10px}.platform-company-accounts .platform-panel-head p{font-size:11px;color:#95a8b6;margin:8px 0 0;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.platform-company-accounts .platform-panel-head .platform-button{font-size:11px!important;min-height:32px;padding:6px 10px}.platform-account-table .platform-money{white-space:nowrap}.platform-money{font-variant-numeric:tabular-nums;display:inline-block;font-family:Arial,sans-serif}.platform-money-positive{color:#3f75aa}.platform-money-negative{color:#ce5a57}.platform-void-text{color:#a8afb5;text-decoration:line-through}.platform-account-company{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 21px;color:#90a4b5;font-size:12px;flex-wrap:wrap}.platform-account-company>div{display:flex;gap:18px;align-items:center}.platform-account-company strong{font-weight:500;color:#527da5;font-size:15px}.platform-account-tabs{display:flex;gap:0;border-bottom:1px solid #cfdfea;margin:0 0 20px;overflow:auto}.platform-account-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;color:#8da3b4;padding:12px 20px;white-space:nowrap;font-size:12px!important}.platform-account-tabs button[aria-current=page]{color:#527eb8;border-bottom-color:#527eb8}.platform-account-tabs button:hover{background:#edf4fa}.platform-account-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:15px;padding:18px;border-bottom:1px solid #e1ebf2;background:#fff}.platform-account-filters label{display:flex;flex-direction:column;gap:7px;min-width:125px;max-width:230px;flex:1;color:#8b9eae;font-size:11px}.platform-account-filters input,.platform-account-filters select{width:100%;height:35px;padding:7px 9px;border:1px solid #cfdce7;border-radius:3px;color:#607f96;background:#fff;font:inherit;font-size:12px}.platform-account-filters button{margin:0 0 10px}.platform-account-date-error{margin:0;padding:12px 18px;color:#bc625e;font-size:12px;background:#fff6f4}.platform-account-pagination{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:15px 18px;border-top:1px solid #e2ebf2;color:#9aaab7;font-size:11px}.platform-account-pagination>label{display:flex;align-items:center;gap:7px;margin-left:auto}.platform-account-pagination select{border:1px solid #d5e1eb;padding:4px 6px;color:#7e96a9;background:white;border-radius:3px;font-size:11px}.platform-account-pagination>div{display:flex;align-items:center;gap:12px}.platform-account-pagination button{width:27px;height:27px;border:1px solid #cfdfeb;background:#fff;border-radius:3px;color:#6e91ad;font-size:18px!important;padding:0}.platform-account-note{color:#9aadb9;font-size:11px;line-height:1.8;margin:15px 0 0}.platform-account-remark{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.platform-account-dialog{width:960px}.platform-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;margin:0}.platform-detail-list>div{min-width:0;padding-bottom:14px;border-bottom:1px solid #edf2f6}.platform-detail-list dt{font-size:11px;color:#99adbd;margin:0 0 9px}.platform-detail-list dd{margin:0;font-size:13px;color:#557994;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.platform-detail-list>div:last-child{grid-column:1/-1}.platform-account-period-title{font-size:14px;font-weight:500;color:#63839c;margin:25px 0 0}.platform-shell button:focus-visible,.platform-shell a:focus-visible{outline:2px solid #7fa8cf;outline-offset:3px}.platform-shell select:focus-visible,.platform-shell input:focus-visible{outline:2px solid #a5c6e5;outline-offset:1px}.platform-dialog{box-sizing:border-box}.platform-accounts .platform-panel{min-width:0}.platform-table-wrap{max-width:100%}.platform-account-dialog .platform-table-wrap{max-height:42vh}
@media(min-width:1500px){.platform-company-accounts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.platform-sidebar{display:block;position:fixed;top:58px;bottom:auto;width:100%;height:48px;z-index:19;border:0;border-bottom:1px solid #d8e5ee;background:#fff}.platform-sidebar .platform-nav-caption,.platform-sidebar .platform-nav-note{display:none}.platform-sidebar nav{display:flex;height:48px}.platform-nav-button{justify-content:center;padding:10px 8px;font-size:11px!important;border-left:0;border-bottom:3px solid transparent;gap:6px;white-space:nowrap}.platform-nav-button>span{font-size:16px}.platform-nav-button>small{margin-left:0;font-size:9px}.platform-nav-button.platform-nav-current{border-left:0;border-bottom-color:#527eb8}.platform-workspace{padding-top:128px;min-width:0}.platform-stats-four{grid-template-columns:repeat(2,1fr);gap:20px 0}.platform-stats-four>div:nth-child(2){border-right:0}.platform-stats-four>div{padding:0 20px}.platform-stats-four strong{font-size:23px}.platform-account-selector{gap:14px;margin-bottom:20px}.platform-account-selector>label{display:block;flex:1;min-width:0}.platform-account-selector>label>span{display:block;margin-bottom:7px;font-size:11px}.platform-account-selector select{width:100%;min-width:0}.platform-readonly-badge{margin:0}.platform-account-selector>.platform-text-button{order:3;width:100%;text-align:left}.platform-account-tabs button{padding:12px 13px;font-size:11px!important}.platform-account-filters{gap:12px;padding:15px}.platform-account-filters label{min-width:calc(50% - 8px);max-width:none}.platform-account-filters label:first-child{min-width:100%}.platform-account-filters input,.platform-account-filters select{font-size:12px}.platform-account-pagination{gap:12px;padding:12px;font-size:10px}.platform-account-pagination>label{display:none}.platform-account-pagination>div{margin-left:auto}.platform-company-accounts .platform-panel-head{padding:13px 12px;gap:10px}.platform-company-accounts .platform-panel-head h2{font-size:13px}.platform-company-accounts .platform-panel-head h2 small{display:block;margin-left:0}.platform-company-accounts .platform-panel-head p{font-size:10px;gap:9px}.platform-account-company{gap:10px;font-size:10px}.platform-detail-list{grid-template-columns:1fr;gap:17px}.platform-account-dialog{max-width:calc(100vw - 22px)}.platform-account-note{font-size:10px}.platform-company-actions{min-width:140px;max-width:175px;gap:10px 13px}.platform-company-accounts{gap:18px}.platform-overview-toolbar .platform-search{width:100%}.platform-accounts .platform-page-title{gap:12px}.platform-accounts .platform-page-title h1{overflow-wrap:anywhere}}

.platform-purge-warning{padding:17px 19px;border:1px solid #edc6bf;background:#fff5f2;border-radius:4px;color:#ae504b}.platform-purge-warning h3{font-size:16px;font-weight:500;margin:0 0 12px}.platform-purge-warning p{font-size:12px;line-height:1.9;margin:0 0 10px}.platform-purge-warning>strong{font-size:12px;font-weight:600}.platform-purge-scope{font-size:12px;line-height:1.8;color:#7e92a2;margin:19px 0 10px}.platform-purge-list{list-style:none;padding:0;margin:0 0 22px;max-height:220px;overflow:auto;border:1px solid #d8e3ec;border-radius:3px}.platform-purge-list li{display:flex;align-items:baseline;gap:17px;padding:11px 14px;border-bottom:1px solid #e5edf3;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.platform-purge-list li:last-child{border-bottom:0}.platform-purge-list strong{min-width:110px;color:#527da5;font-weight:500}.platform-purge-list span{color:#758da0}.platform-purge-field{margin-bottom:0}.platform-purge-field input{font-size:15px;letter-spacing:2px}.platform-purge-reload{margin-top:2px}@media(max-width:430px){.platform-purge-warning{padding:14px}.platform-purge-warning h3{font-size:14px}.platform-purge-list li{flex-direction:column;gap:3px;padding:10px 12px}.platform-purge-list{max-height:190px}.platform-dialog-foot .platform-danger{white-space:normal}}

/* 匯帳通：超級後台與唯讀查詢 */
.platform-shell,.platform-login,.platform-loading{--platform-blue:var(--blue,#087f8c);--platform-dark:var(--navy,#102c3b);--platform-border:var(--border,#dfe7ec);font-family:Inter,"Microsoft JhengHei","PingFang TC",Arial,sans-serif;color:var(--ink,#203344);font-size:14px}.platform-shell{background:#f3f6f8}.platform-topbar{height:72px;background:#fff;color:#203344;border-bottom:1px solid #dfe7ec;padding:0 30px;box-shadow:0 2px 12px #102c3b04}.platform-shell .platform-brand{color:#173746!important;gap:12px;font-size:12px;font-weight:500}.platform-brand strong{font-size:23px;font-weight:750;letter-spacing:1px}.platform-brand-mark{width:36px;height:36px;border:0;border-radius:9px;color:white;background:#087f8c;flex-shrink:0}.platform-brand-mark svg{display:block;width:29px;height:29px}.platform-brand-divider{height:24px;background:#dce6eb}.platform-user{color:#748792;font-size:12px;gap:17px}.platform-role{border:1px solid #d5e9e6;background:#f0faf7;color:#43887e;padding:5px 8px;border-radius:5px}.platform-top-button{color:#577483;font-size:12px!important}.platform-top-button:hover{color:#087f8c}.platform-sidebar{top:72px;width:228px;background:#102c3b;border:0}.platform-nav-caption{color:#6b8c9d;padding:27px 25px 17px;font-size:10px;letter-spacing:1.8px}.platform-nav-button{width:calc(100% - 24px);margin:5px 12px;padding:14px 16px;border-left:0;border-radius:8px;background:transparent;color:#a7c0cc;gap:12px;font-size:12px!important;transition:background .15s,color .15s}.platform-nav-button>span{font-size:20px;width:22px;text-align:center;color:#6fa3b4}.platform-nav-button:hover{background:#173c4b;color:#e2f2f5}.platform-nav-button.platform-nav-current{background:#174454;border-left:0;box-shadow:inset 3px 0 #39b9ad;color:#fff}.platform-nav-button.platform-nav-current>span{color:#63d1c2}.platform-nav-button>small{background:#235262;color:#bde5e2;font-size:9px}.platform-nav-note{color:#71909f;line-height:1.9;font-size:11px;padding:22px 24px;border-top:1px solid #ffffff0a;margin:23px 14px 0;padding-left:10px;padding-right:10px}.platform-workspace{margin-left:228px;padding:108px 32px 0;min-width:0;background:#f3f6f8;min-height:100vh}.platform-page-title{margin-bottom:27px;align-items:center}.platform-page-title p{font-size:10px;letter-spacing:1.6px;color:#8fa2ad;font-weight:600;margin-bottom:9px}.platform-page-title h1{color:#163647;font-size:28px;line-height:1.25;font-weight:700;letter-spacing:.2px;margin-bottom:9px}.platform-page-title div>span{font-size:12px;color:#81949f;line-height:1.8}.platform-button{border-color:#087f8c;background:#087f8c;border-radius:7px;min-height:39px;padding:10px 16px;font-size:12px!important;font-weight:500;box-shadow:0 2px 5px #087f8c0c;transition:background .15s,border-color .15s}.platform-button:hover:not(:disabled){background:#076772;border-color:#076772}.platform-secondary{background:white;border-color:#d6e2e8;color:#607d8c;box-shadow:none}.platform-secondary:hover:not(:disabled){background:#f0f8f7;border-color:#bad9d5}.platform-danger{background:#c4635e;border-color:#c4635e}.platform-danger:hover:not(:disabled){background:#ae4f4b;border-color:#ae4f4b}.platform-panel{border:1px solid #dfe7ec;border-radius:12px;box-shadow:0 4px 18px #193e5104;background:#fff}.platform-panel-head{background:#fff;border-bottom:1px solid #e5edf1;padding:17px 20px;gap:16px}.platform-panel-head h2{font-size:14px;color:#365b6e;font-weight:600;line-height:1.6}.platform-text-button{color:#16818a;font-size:11px!important}.platform-text-button:hover{text-decoration:underline;text-underline-offset:3px}.platform-stats{border:1px solid #dfe7ec;border-radius:12px;padding:25px 0;margin-bottom:25px;box-shadow:0 4px 18px #193e5104}.platform-stats>div{padding:0 27px;border-color:#e8eef2}.platform-stats span{color:#879ba7;font-size:11px;letter-spacing:.2px;margin-bottom:13px}.platform-stats strong{font-size:31px;line-height:1;font-weight:650;letter-spacing:-.7px;color:#234f64;font-variant-numeric:tabular-nums}.platform-stats .platform-positive{color:#0c8b7b}.platform-toolbar{padding:18px 20px;gap:13px}.platform-toolbar select,.platform-search input,.platform-field input,.platform-account-selector select,.platform-account-filters input,.platform-account-filters select{border:1px solid #d9e4e9;border-radius:6px;color:#4b6d7f;background:#fff;font-size:12px}.platform-toolbar select,.platform-search input{height:37px;padding-top:8px;padding-bottom:8px}.platform-toolbar>span{font-size:10px;color:#8ea2ae}.platform-search>span{color:#8bacb9}.platform-table{font-size:12px}.platform-table th{color:#6f8b9a;background:#f0f5f7;font-size:11px;font-weight:600;letter-spacing:.1px;padding:12px 17px;border:0;border-bottom:1px solid #dfe8ed}.platform-table td{padding:18px 17px;border:0;border-bottom:1px solid #e9eff3;color:#5e7989;vertical-align:middle;line-height:1.6}.platform-table tbody tr:hover{background:#f4faf9}.platform-company-code{color:#137985;font-weight:650;letter-spacing:.25px}.platform-legacy{background:#eef3f6;color:#7f98a7;border-radius:4px;padding:3px 6px}.platform-status{background:#f3f5f7;padding:4px 7px;border-radius:5px;font-size:10px;color:#8c9ca8}.platform-status-active{color:#268a78;background:#eef8f4}.platform-status-active>span{background:#34a58d}.platform-table .platform-date{font-size:10px;color:#8ea2ae;white-space:nowrap}.platform-row-actions button{color:#13818b;font-size:11px!important}.platform-row-actions .platform-danger-text{color:#bb7069}.platform-company-actions{gap:13px 17px}.platform-empty{padding:42px 20px;font-size:12px;line-height:1.9;color:#9aadb8}.platform-empty>span{color:#b9ced6}.platform-empty p{margin:10px 0 20px}.platform-footer{color:#a0b1ba;padding:28px 0 22px;font-size:10px;letter-spacing:1px}.platform-success{border-color:#cce5dd;background:#f0faf5;color:#508c7b;border-radius:8px;padding:13px 17px;font-size:12px}.platform-error{border-color:#edd7d2;background:#fff5f2;color:#b7685f;border-radius:7px;font-size:12px}.platform-notice{border-color:#ecdfbe;background:#fffaf0;color:#a28a57;border-radius:7px;font-size:12px}.platform-created{border-color:#cce0e6;background:#f0f8f9;border-radius:10px;padding:19px 22px}.platform-created-icon{color:#259a94}.platform-created h2{font-size:15px;color:#3e7b82;font-weight:600}.platform-created p{color:#8aa4af}.platform-created p strong{color:#347b85}.platform-dialog{border:1px solid #d4e3e9;border-radius:12px;box-shadow:0 25px 100px #0e2d3c40;color:#4b6d7f}.platform-dialog::backdrop{background:#102c3b69;backdrop-filter:blur(2px)}.platform-dialog-head{padding:17px 22px;background:#163e50}.platform-dialog-head h2{font-size:16px;font-weight:500;letter-spacing:.3px}.platform-dialog-body{padding:27px}.platform-dialog-foot{padding:17px 22px;background:#f7fafb;border-top:1px solid #e4edf1;gap:10px}.platform-field{color:#6e8898;font-size:12px;gap:8px;margin-bottom:21px}.platform-field input{height:41px;padding:9px 11px}.platform-field>small{color:#98adb8;line-height:1.8}.platform-form-intro{font-size:12px;line-height:1.8;color:#879da9}.platform-confirm h3{font-size:17px;color:#446a7e;font-weight:600}.platform-confirm p{line-height:1.9;color:#8b9faa}.platform-confirm-icon{color:#2c929a}.platform-login,.platform-loading{min-height:100svh;align-items:center;padding:45px 20px;background:radial-gradient(ellipse at 8% 15%,#1d5062 0,transparent 45%),radial-gradient(ellipse at 95% 100%,#0f5557 0,transparent 45%),#102c3b}.platform-login-card{width:475px;border:1px solid #ffffff20;border-radius:18px;box-shadow:0 25px 100px #06172155;background:#fff}.platform-login-brand{padding:31px 34px;background:linear-gradient(125deg,#143b4c,#0e4d52);gap:16px}.platform-login-brand>.platform-brand-mark{width:49px;height:49px;background:#ffffff12;border:1px solid #ffffff1a;border-radius:12px}.platform-login-brand>.platform-brand-mark svg{width:37px;height:37px}.platform-login-brand h1{font-size:25px;letter-spacing:.5px;font-weight:650;margin:0 0 8px}.platform-login-brand p{font-size:11px;letter-spacing:.9px;color:#a4c4cc}.platform-login-card form{padding:31px 34px 34px}.platform-login-card form>h2{font-size:18px;color:#294e61;font-weight:650;margin:0 0 11px}.platform-login-description{color:#94a8b3;font-size:12px;line-height:1.9;margin-bottom:26px}.platform-login-submit{min-height:43px;margin-top:7px;border-radius:7px}.platform-loading-card{padding:40px;background:#fff;border:0;border-radius:14px;box-shadow:0 20px 80px #06172144;color:#345e72}.platform-loading-card>.platform-brand-mark{background:#087f8c;width:45px;height:45px}.platform-loading-card h1{font-size:23px;font-weight:600}.platform-loading-card p{color:#8ba4b2}.platform-account-tabs{border-color:#d8e5ea}.platform-account-tabs button{color:#8199a7;font-size:12px!important;border-bottom-width:3px;padding:13px 21px}.platform-account-tabs button[aria-current=page]{color:#087f8c;border-bottom-color:#087f8c}.platform-account-tabs button:hover{background:#ecf7f5}.platform-account-selector{gap:17px}.platform-account-selector select{height:39px;min-width:270px}.platform-readonly-badge{border:1px solid #c9e4df;background:#edf8f4;color:#428d80;border-radius:5px;font-size:10px;padding:4px 8px;white-space:nowrap}.platform-account-company strong{color:#197b83}.platform-account-filters{padding:20px;background:#fff;gap:15px}.platform-account-filters label{color:#8299a7;font-size:11px}.platform-money-positive{color:#147d91}.platform-money-negative{color:#c3625d}.platform-account-pagination{border-color:#e6edf1;padding:16px 19px}.platform-account-pagination button{border-color:#d4e4e9;border-radius:5px;color:#4e9296}.platform-account-note{color:#8fa6b1;font-size:11px}.platform-account-loading{border-color:#dfe9ee;border-radius:10px;color:#84a0af;background:#fff}.platform-detail-list dt{color:#91a7b4}.platform-detail-list dd{color:#466b7f}.platform-shell button:focus-visible,.platform-shell a:focus-visible{outline-color:#76c5bd}.platform-shell select:focus-visible,.platform-shell input:focus-visible,.platform-field input:focus{outline:2px solid #8bd0c855;outline-offset:1px;border-color:#7bb8b5}
.platform-observation{min-width:0}.platform-observe-banner{display:flex;align-items:center;gap:11px;margin:-7px 0 22px}.platform-observe-banner .platform-readonly-badge{margin-left:0}.platform-observe-banner p{margin:0;color:#829ba9;font-size:11px;line-height:1.8}.platform-observe-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 18px;padding:23px;margin-bottom:24px}.platform-observe-filters>label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:11px;color:#8198a5}.platform-observe-filters input,.platform-observe-filters select{width:100%;min-width:0;height:38px;border:1px solid #d8e4e9;background:#fff;border-radius:6px;padding:8px 10px;color:#4e6d7f;font:inherit;font-size:12px}.platform-observe-filters input::placeholder{color:#afbdc6}.platform-observe-search{grid-column:span 2}.platform-observe-filter-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;margin-top:3px;padding-top:17px;border-top:1px solid #edf2f5}.platform-observe-filter-actions>span{font-size:10px;color:#a1b2bc;margin-left:auto}.platform-observe-filter-error{grid-column:1/-1;color:#b5625c;font-size:12px;margin:0;line-height:1.8}.platform-observe-subtitle{font-size:11px;color:#90a5b1;margin:4px 0 0;line-height:1.8}.platform-observe-table td{vertical-align:top}.platform-observe-table td>strong{font-size:12px;font-weight:500;display:block;color:#527183}.platform-observe-table td>small{display:block;margin-top:5px;font-size:10px;color:#9aadb8}.platform-observe-time{font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap}.platform-observe-message-preview{min-width:180px;max-width:340px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:12px}.platform-observe-read{display:inline-block;border:1px solid #e1e8ed;border-radius:5px;background:#f5f7f9;color:#8fa0ac;font-size:10px;padding:3px 7px;white-space:nowrap}.platform-observe-read-done{background:#eef8f4;border-color:#d5e9df;color:#5c9c87}.platform-observe-pagination{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 20px;color:#94a8b4;font-size:11px;border-top:1px solid #e4edf1}.platform-observe-pagination>div{display:flex;align-items:center;gap:10px}.platform-observe-pagination button{border:1px solid #d8e5e9;background:white;color:#5f9099;border-radius:6px;padding:7px 12px;font-size:11px}.platform-observe-pagination button:hover:not(:disabled){background:#eef8f5}.platform-observe-thread{padding:27px;background:linear-gradient(180deg,#f8fbfc,#fff);max-height:65vh;overflow:auto;overscroll-behavior:contain}.platform-observe-message{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 24px}.platform-observe-message:last-child{margin-bottom:0}.platform-observe-message header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:7px;max-width:90%}.platform-observe-message header strong{font-size:12px;font-weight:500;color:#617e8f}.platform-observe-message header span{font-size:10px;color:#9db0bc}.platform-observe-message header time{font-size:10px;color:#a6b6c0}.platform-observe-message>p{max-width:82%;padding:13px 17px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.9;border:1px solid #dfe9ed;border-radius:0 12px 12px;background:#fff;color:#456b7e;margin:0 0 7px;box-shadow:0 2px 6px #24445b03}.platform-observe-message-company{align-items:flex-end}.platform-observe-message-company>p{border-color:#cde5de;background:#eef8f4;border-radius:12px 0 12px 12px;color:#3c796f}.platform-observe-message .platform-observe-read{padding:2px 5px;font-size:9px}.platform-observe-coverage{display:flex;gap:15px;align-items:flex-start;padding:18px 20px;background:#ecf5f6;border:1px solid #d8e8eb;border-radius:10px;margin-bottom:23px}.platform-observe-coverage>span{font-size:23px;color:#6aa4ab;line-height:1}.platform-observe-coverage strong{font-size:12px;color:#547f8b;font-weight:600}.platform-observe-coverage p{font-size:11px;color:#86a2ae;line-height:1.9;margin:5px 0 0}.platform-observe-result{display:inline-block;font-size:10px;padding:4px 7px;border:1px solid #e4e9ed;background:#f4f6f8;color:#8b9ba6;border-radius:5px;white-space:nowrap}.platform-observe-result-success{background:#eef8f2;border-color:#d7e9df;color:#629a7c}.platform-observe-result-failure,.platform-observe-result-denied{background:#fff3f0;border-color:#f0dcd6;color:#b97c72}.platform-observe-result-attempt{background:#fff9ec;border-color:#ece2c7;color:#a8915c}.platform-observe-source{font-size:10px;color:#94a9b5;white-space:nowrap}.platform-observe-detail-note{font-size:11px;line-height:1.9;color:#90a6b2;margin:22px 0 0}.platform-observe-audit td{padding-top:17px;padding-bottom:17px}
@media(max-width:1100px){.platform-sidebar{width:205px}.platform-workspace{margin-left:205px;padding:103px 22px 0}.platform-observe-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-observe-search{grid-column:auto}.platform-user{gap:12px}.platform-role{display:none}.platform-topbar{padding:0 22px}}
@media(max-width:720px){.platform-topbar{height:64px;padding:0 15px}.platform-brand strong{font-size:20px}.platform-brand-mark{width:31px;height:31px;border-radius:8px}.platform-brand-mark svg{width:25px;height:25px}.platform-shell .platform-brand{gap:9px;font-size:11px}.platform-brand-divider{height:20px}.platform-user{gap:10px}.platform-top-button{font-size:11px!important}.platform-sidebar{top:64px;width:100%;height:58px;bottom:auto;border-bottom:1px solid #183e4e;background:#102c3b}.platform-sidebar nav{height:58px;display:flex;overflow:auto;scrollbar-width:none;padding:6px 8px;gap:3px}.platform-sidebar nav::-webkit-scrollbar{display:none}.platform-nav-button{width:auto;min-width:90px;flex:0 0 auto;margin:0;border:0;border-radius:6px;padding:8px 11px;gap:7px;font-size:10px!important;justify-content:center}.platform-nav-button>span{font-size:17px;width:auto}.platform-nav-button.platform-nav-current{border:0;box-shadow:inset 0 -2px #45bfb2;background:#174454}.platform-nav-button>small{font-size:8px}.platform-workspace{margin:0;padding:146px 15px 0;background:#f3f6f8}.platform-page-title{margin-bottom:21px;gap:13px;align-items:flex-start}.platform-page-title p{font-size:9px;letter-spacing:1.2px;margin-bottom:8px}.platform-page-title h1{font-size:24px}.platform-page-title div>span{font-size:11px}.platform-page-title>.platform-button{margin-top:12px;padding:8px 11px;min-height:35px;font-size:11px!important}.platform-panel{border-radius:10px}.platform-panel-head{padding:14px 16px}.platform-panel-head h2{font-size:13px}.platform-stats{padding:21px 0;border-radius:10px;margin-bottom:21px}.platform-stats-four{gap:23px 0}.platform-stats>div{padding:0 22px}.platform-stats span{font-size:10px;margin-bottom:10px}.platform-stats strong{font-size:27px}.platform-toolbar{padding:15px;gap:11px}.platform-toolbar select,.platform-search input{height:37px}.platform-toolbar>span{font-size:10px}.platform-table th{font-size:10px;padding:11px 13px}.platform-table td{font-size:11px;padding:16px 13px}.platform-company-actions{gap:10px 13px}.platform-account-selector select{min-width:0;height:38px}.platform-account-tabs{margin-bottom:17px}.platform-account-tabs button{font-size:11px!important;padding:11px 14px}.platform-dialog{border-radius:10px;max-width:calc(100vw - 24px)}.platform-dialog-head{padding:15px 18px}.platform-dialog-head h2{font-size:15px}.platform-dialog-body{padding:22px 19px}.platform-dialog-foot{padding:15px 18px}.platform-field input{height:42px;font-size:14px}.platform-login,.platform-loading{padding:28px 17px;align-items:center}.platform-login-brand{padding:27px}.platform-login-card form{padding:27px}.platform-login-brand h1{font-size:23px}.platform-login-card{border-radius:15px}.platform-observe-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px;padding:18px;margin-bottom:20px}.platform-observe-filters>label{font-size:10px}.platform-observe-filters input,.platform-observe-filters select{font-size:12px;height:38px}.platform-observe-search{grid-column:1/-1}.platform-observe-filter-actions{gap:15px;flex-wrap:wrap;padding-top:15px}.platform-observe-filter-actions>span{width:100%;margin:0;font-size:9px}.platform-observe-banner{margin-bottom:18px;align-items:flex-start;gap:9px}.platform-observe-banner p{font-size:10px}.platform-observe-pagination{padding:14px 15px;font-size:10px;gap:10px}.platform-observe-pagination button{padding:7px 9px;font-size:10px}.platform-observe-pagination>div{gap:7px}.platform-observe-thread{padding:21px 15px;max-height:65vh}.platform-observe-message>p{max-width:93%;font-size:12px;padding:11px 13px}.platform-observe-message header{gap:6px 9px;max-width:98%}.platform-observe-message header strong{font-size:11px}.platform-observe-message header time{font-size:9px}.platform-observe-coverage{padding:15px;gap:12px;margin-bottom:20px}.platform-observe-coverage p{font-size:10px}.platform-observe-subtitle{font-size:10px}.platform-readonly-badge{font-size:9px}.platform-observe-message-preview{min-width:180px;max-width:250px;font-size:11px}.platform-footer{text-align:center;padding:25px 0 20px}.platform-created{padding:17px}.platform-account-filters{padding:16px}}
@media(prefers-reduced-motion:reduce){.platform-button,.platform-nav-button{transition:none}}

/* 匯帳通 · scoped member and messaging interface */
.acc-chat-control {
  display: inline-flex;
  align-items: center;
  color: #087f8c;
  font-family:
    "Inter",
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Microsoft YaHei",
    sans-serif;
}
.acc-chat-trigger {
  border: 1px solid #cfe3e4;
  border-radius: 9px;
  background: #f1f9f8;
  color: #087f8c;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  min-height: 38px;
  position: relative;
  font-weight: 600;
}
.acc-chat-trigger:hover {
  background: #e4f3f1;
  border-color: #b6d6d8;
}
.acc-chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #d05d67;
  color: white;
  min-width: 18px;
  min-height: 18px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #ffffff40;
}
.acc-chat-dialog {
  padding: 0;
  border: 1px solid #dfe7ec;
  border-radius: 18px;
  width: 960px;
  max-width: calc(100vw - 30px);
  height: 730px;
  max-height: calc(100dvh - 40px);
  background: white;
  color: #203344;
  box-shadow: 0 28px 100px #102c3b40;
  overflow: hidden;
  box-sizing: border-box;
  font-family:
    "Inter",
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Microsoft YaHei",
    sans-serif;
  font-size: 13px;
}
.acc-chat-dialog[open] {
  display: flex;
  flex-direction: column;
}
.acc-chat-dialog::backdrop {
  background: #0b243c80;
  backdrop-filter: blur(5px);
}
.acc-chat-dialog * {
  box-sizing: border-box;
}
.acc-chat-dialog button,
.acc-chat-dialog input,
.acc-chat-dialog textarea,
.acc-chat-dialog select {
  font: inherit;
}
.acc-chat-dialog button {
  cursor: pointer;
}
.acc-chat-dialog button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.acc-chat-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 23px;
  background: #102c3b;
  color: white;
  flex-shrink: 0;
}
.acc-chat-dialog-header h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 5px;
  letter-spacing: .02em;
}
.acc-chat-dialog-header p {
  font-size: 12px;
  margin: 0;
  color: #b6d0d9;
  overflow-wrap: anywhere;
}
.acc-chat-dialog-header > button {
  border: 0;
  background: #ffffff0d;
  color: white;
  font-size: 26px;
  line-height: 1;
  padding: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  flex-shrink: 0;
}
.acc-chat-dialog-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.acc-chat-inbox {
  width: 270px;
  flex-shrink: 0;
  background: #f7fafb;
  border-right: 1px solid #dfe8f1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-color: #dfe7ec;
}
.acc-chat-inbox > label {
  padding: 16px 14px 12px;
  display: block;
  flex-shrink: 0;
}
.acc-chat-inbox input {
  width: 100%;
  border: 1px solid #d7e2ec;
  background: white;
  border-radius: 9px;
  padding: 11px 12px;
  color: #203344;
  font-size: 13px;
  border-color: #d6e1e5;
}
.acc-chat-inbox-list {
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding: 0 8px 10px;
}
.acc-chat-inbox-list > button {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-top: 1px solid #e6edf4;
  background: transparent;
  padding: 13px 13px;
  color: #203344;
  display: block;
  border-radius: 10px;
  margin-bottom: 4px;
  transition: background .15s;
}
.acc-chat-inbox-list > button:hover {
  background: #edf4f5;
}
.acc-chat-inbox-list > button.acc-chat-conversation-active {
  background: #e6f3f1;
  border-left: 3px solid #087f8c;
  padding-left: 13px;
  border: 1px solid #c9e2df;
}
.acc-chat-inbox-list > button > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.acc-chat-inbox-list strong {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-chat-inbox-list small {
  display: block;
  color: #5f7381;
  font-size: 11px;
  margin-top: 4px;
}
.acc-chat-inbox-list p {
  font-size: 12px;
  color: #5f7381;
  margin: 8px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  margin-top: 7px;
}
.acc-chat-mobile-select {
  display: none;
}
.acc-chat-thread {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.acc-chat-thread-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid #e7eef4;
  font-size: 11px;
  color: #5f7381;
  flex-shrink: 0;
  background: #fff;
  border-color: #e4ecef;
}
.acc-chat-thread-toolbar > button,
.acc-chat-alert > button {
  background: none;
  border: 0;
  color: #087f8c;
  padding: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  min-height: 24px;
}
.acc-chat-messages {
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1;
  background: #f4f7f9;
  scrollbar-width: thin;
  scrollbar-color: #c5d6de transparent;
}
.acc-chat-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 23px;
}
.acc-chat-message:last-child {
  margin-bottom: 0;
}
.acc-chat-message-meta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12px;
  color: #5f7381;
  margin: 0 0 6px;
  max-width: 95%;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.acc-chat-message-meta strong {
  font-weight: 600;
  color: #48616f;
  font-size: 12px;
}
.acc-chat-message-meta time {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: #5f7381;
}
.acc-chat-message > p {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #e1e8ec;
  border-radius: 3px 13px 13px;
  background: #fff;
  max-width: 86%;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #203344;
  box-shadow: 0 2px 3px #102c3b03;
}
.acc-chat-outgoing {
  align-items: flex-end;
}
.acc-chat-outgoing > p {
  border-color: #c9e4e1;
  background: #e1f2ef;
  border-radius: 13px 3px 13px 13px;
  color: #214f52;
}
.acc-chat-read {
  font-size: 10px;
  color: #557578;
  margin-top: 6px;
}
.acc-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 48px 20px;
  color: #5f7381;
  font-size: 13px;
  line-height: 1.8;
}
.acc-chat-empty svg {
  width: 35px;
  height: 35px;
  color: #7daeb4;
}
.acc-chat-empty strong {
  font-size: 15px;
  font-weight: 600;
  color: #48616f;
}
.acc-chat-empty span {
  font-size: 12px;
}
.acc-chat-older {
  display: block;
  margin: 0 auto 20px;
  border: 1px solid #d7e3ee;
  background: white;
  color: #087f8c;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 11px!important !important;
  border-color: #cbdfe3;
}
.acc-chat-choose {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #5f7381;
  gap: 14px;
  text-align: center;
  padding: 30px;
  background: #f4f7f9;
}
.acc-chat-choose svg {
  width: 40px;
  height: 40px;
}
.acc-chat-choose h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #48616f;
}
.acc-chat-choose p {
  font-size: 13px;
  margin: 0;
  line-height: 1.8;
}
.acc-chat-compose {
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #e0e9f1;
  flex-shrink: 0;
  border-color: #dfe7ec;
}
.acc-chat-compose textarea {
  width: 100%;
  resize: none;
  min-height: 80px;
  max-height: 160px;
  border: 1px solid #d7e3ed;
  border-radius: 10px;
  padding: 12px 14px;
  color: #203344;
  line-height: 1.7;
  background: #fbfcfd;
  font-size: 14px;
  border-color: #d5e1e6;
}
.acc-chat-compose > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 9px;
}
.acc-chat-compose > div > span {
  font-size: 11px;
  color: #5f7381;
  line-height: 1.5;
}
.acc-chat-compose small {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  color: #8a9ca6;
}
.acc-chat-compose button {
  border: 1px solid #087f8c;
  border-radius: 9px;
  background: #087f8c;
  color: white;
  padding: 10px 16px;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: #087f8c;
  font-weight: 600;
}
.acc-chat-compose button:hover:not(:disabled) {
  background: #076772;
}
.acc-chat-alert {
  padding: 10px 14px;
  background: #fff5f4;
  color: #a33e45;
  border-bottom: 1px solid #efd6ce;
  font-size: 12px;
  line-height: 1.7;
  flex-shrink: 0;
  overflow-wrap: anywhere;
  border-color: #efd5d8;
}
.acc-chat-alert > button {
  margin-left: 10px;
}
.acc-chat-compose .acc-chat-alert {
  margin-top: 8px;
  border: 1px solid #efd6ce;
  border-radius: 3px;
}
.acc-chat-read-error {
  margin: 0;
  padding: 7px 16px;
  font-size: 12px;
  line-height: 1.7;
  color: #a08354;
  background: #fffaf0;
}
.acc-chat-latest {
  position: absolute;
  bottom: 183px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #bdd3e5;
  background: #fff;
  color: #087f8c;
  border-radius: 20px;
  padding: 9px 15px;
  box-shadow: 0 4px 20px #102c3b12;
  font-size: 12px!important !important;
  white-space: nowrap;
  border-color: #b6d6d8;
}
.acc-chat-blocked {
  padding: 35px 24px;
  color: #a33e45;
  line-height: 1.8;
  font-size: 14px;
}
.acc-chat-blocked button {
  border: 1px solid #087f8c;
  background: #087f8c;
  color: #fff;
  border-radius: 9px;
  padding: 9px 15px;
  border-color: #087f8c;
  margin-top: 16px;
}
.acc-chat-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.acc-chat-member-dialog {
  width: 720px;
}
.acc-chat-trigger:focus-visible,
.acc-chat-dialog button:focus-visible,
.acc-chat-dialog textarea:focus-visible,
.acc-chat-dialog input:focus-visible,
.acc-chat-dialog select:focus-visible {
  outline: 2px solid #30a6ad;
  outline-offset: 2px;
}
.acc-chat-dialog-header > button:hover {
  background: #ffffff20;
}
.acc-chat-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.acc-chat-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid #ffffff20;
  border-radius: 13px;
  background: #ffffff0c;
  color: #8ad4d4;
}
.acc-chat-header-icon > svg {
  width: 22px;
  height: 22px;
}
.acc-chat-heading-copy {
  min-width: 0;
}
.acc-chat-read.is-read {
  color: #087f8c;
}
.acc-chat-choose > svg {
  color: #82aeb5;
}
@media (max-width: 760px) {
  .member-chat-enabled > span {
    display: none !important;
  }
  .member-chat-enabled .acc-chat-trigger {
    padding: 6px 8px;
    font-size: 12px;
  }
  .acc-chat-dialog {
    max-width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
    height: 760px;
  }
  .acc-chat-dialog-header {
    padding: 14px 16px;
  }
  .acc-chat-dialog-header h2 {
    font-size: 15px;
  }
  .acc-chat-dialog-header p {
    font-size: 12px;
  }
  .acc-chat-dialog-content {
    flex-direction: column;
  }
  .acc-chat-inbox {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #dbe6ef;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  .acc-chat-inbox > label {
    padding: 0;
    flex: 1;
    min-width: 120px;
  }
  .acc-chat-inbox input {
    height: 34px;
    font-size: 12px;
    padding: 7px 9px;
  }
  .acc-chat-mobile-select {
    display: block;
    flex: 1;
    min-width: 145px;
    max-width: 100%;
    border: 1px solid #d7e2ec;
    border-radius: 4px;
    color: #48616f;
    background: white;
    padding: 6px 8px;
    height: 34px;
    font-size: 12px !important;
  }
  .acc-chat-inbox-list {
    display: none;
  }
  .acc-chat-inbox > .acc-chat-alert {
    width: 100%;
  }
  .acc-chat-thread-toolbar {
    padding: 10px 13px;
    font-size: 12px;
  }
  .acc-chat-messages {
    padding: 17px 14px;
  }
  .acc-chat-message > p {
    max-width: 91%;
    padding: 10px 12px;
    font-size: 13px;
  }
  .acc-chat-compose {
    padding: 11px 13px;
  }
  .acc-chat-compose textarea {
    min-height: 72px;
    font-size: 14px;
  }
  .acc-chat-latest {
    bottom: 155px;
  }
  .acc-chat-message-meta {
    gap: 7px;
  }
  .acc-chat-choose {
    padding: 25px;
  }
  .acc-chat-dialog-header > div {
    min-width: 0;
  }
  .acc-chat-dialog-header p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  .topbar-right .acc-chat-company-control .acc-chat-trigger {
    border: 0;
    background: none;
    padding: 5px 6px;
    min-width: 31px;
  }
  .acc-chat-company-control .acc-chat-trigger > span {
    display: none;
  }
  .acc-chat-company-control .acc-chat-badge {
    position: absolute;
    right: -2px;
    top: 0;
    font-size: 8px;
    min-width: 13px;
    min-height: 13px;
    padding: 1px 3px;
  }
  .member-chat-enabled .acc-chat-trigger > svg {
    display: none;
  }
}
.acc-telegram-control {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.acc-telegram-link,
.acc-telegram-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d8e4ee;
  border-radius: 9px;
  background: #f1f9f8;
  color: #087f8c;
  font-size: 12px;
  padding: 8px 9px;
  min-height: 38px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family:
    "Inter",
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Microsoft YaHei",
    sans-serif;
  border-color: #cfe3e4;
}
.acc-telegram-link:hover,
.acc-telegram-trigger:hover {
  background: #e4f3f1;
}
.acc-telegram-trigger > span:first-child {
  font-size: 15px;
}
.acc-telegram-dialog {
  width: 580px;
  height: auto;
  max-height: calc(100dvh - 40px);
  border-radius: 18px;
}
.acc-telegram-body {
  padding: 25px 28px;
  overflow: auto;
  min-height: 0;
}
.acc-telegram-explain {
  font-size: 13px;
  line-height: 1.9;
  color: #647b86;
  margin: 0 0 20px;
}
.acc-telegram-setup-note {
  padding: 12px 14px;
  background: #edf8f6;
  border: 1px solid #d1e1ef;
  border-radius: 10px;
  color: #4e7077;
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 20px;
  border-color: #cce3e2;
}
.acc-telegram-body a {
  color: #087f8c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.acc-telegram-bot {
  font-size: 12px;
  color: #5f7381;
  margin: 0 0 20px;
}
.acc-telegram-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #48616f;
  margin-bottom: 20px;
}
.acc-telegram-field input {
  width: 100%;
  border: 1px solid #cedde9;
  border-radius: 9px;
  padding: 11px 12px;
  color: #203344;
  font-size: 13px;
  min-height: 44px;
  background: #fbfcfd;
  border-color: #d5e1e6;
}
.acc-telegram-field small {
  font-size: 11px;
  line-height: 1.8;
  color: #5f7381;
}
.acc-telegram-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #48616f;
  margin: 4px 0 12px;
}
.acc-telegram-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #087f8c;
}
.acc-telegram-help,
.acc-telegram-status {
  font-size: 12px;
  color: #5f7381;
  line-height: 1.8;
  margin: 10px 0 18px;
}
.acc-telegram-test-note {
  font-size: 12px;
  color: #5f7381;
  line-height: 1.8;
  margin: 20px 0 12px;
}
.acc-telegram-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.acc-telegram-actions button,
.acc-telegram-retry {
  border: 1px solid #087f8c;
  background: #087f8c;
  color: #fff;
  border-radius: 9px;
  font-size: 13px;
  padding: 10px 14px;
  cursor: pointer;
  border-color: #087f8c;
}
.acc-telegram-actions .acc-telegram-secondary {
  border-color: #c3dfe1;
  background: white;
  color: #087f8c;
}
.acc-telegram-actions .acc-telegram-disable {
  border: 0;
  background: transparent;
  color: #b44750;
  font-size: 12px;
}
.acc-telegram-body > .acc-chat-alert {
  margin-top: 15px;
  border: 1px solid #efd6ce;
  border-radius: 4px;
}
.acc-telegram-success {
  font-size: 13px;
  line-height: 1.8;
  background: #f1f9f4;
  border: 1px solid #cce2d5;
  border-radius: 9px;
  color: #267b5e;
  padding: 10px 13px;
  margin-top: 15px;
  border-color: #c0e1d2;
}
.acc-telegram-retry {
  margin-top: 16px;
}
.acc-telegram-footer {
  padding: 16px 25px;
  border-top: 1px solid #e3ebf2;
  background: #f7fafb;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  border-color: #e3eaee;
}
.acc-telegram-footer button {
  border: 1px solid #cbdce9;
  background: white;
  color: #087f8c;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13px;
  border-color: #c3dfe1;
}
.acc-telegram-control button:focus-visible,
.acc-telegram-control a:focus-visible {
  outline: 2px solid #30a6ad;
  outline-offset: 2px;
}
@media (max-width: 1000px) {
  .topbar-right > .user-name {
    display: none;
  }
  .topbar > .edition {
    display: none;
  }
}
@media (max-width: 600px) {
  .acc-telegram-link,
  .acc-telegram-trigger {
    border: 0;
    background: transparent;
    min-height: 31px;
    padding: 5px 6px;
  }
  .acc-telegram-link > span:last-child,
  .acc-telegram-trigger > span:last-child {
    display: none;
  }
  .acc-telegram-link > span:first-child {
    font-size: 20px;
  }
  .acc-telegram-trigger > span:first-child {
    font-size: 18px;
  }
  .acc-telegram-control {
    gap: 0;
  }
  .acc-telegram-body {
    padding: 18px;
  }
  .acc-telegram-dialog {
    max-height: calc(100dvh - 18px);
  }
}
.acc-chat-sound {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 20px;
  background: #eef6f6;
  border-bottom: 1px solid #e1ebf3;
  flex-shrink: 0;
  color: #4e7077;
  font-size: 12px;
  border-color: #dce8e9;
}
.acc-chat-sound > label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
}
.acc-chat-sound input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #087f8c;
}
.acc-chat-sound > button {
  border: 1px solid #cbdde9;
  background: #fff;
  color: #087f8c;
  border-radius: 7px;
  padding: 6px 12px;
  white-space: nowrap;
  font-size: 11px;
  border-color: #bdd8db;
  font-weight: 600;
}
.acc-chat-sound > span {
  font-size: 11px;
  color: #5f7381;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .acc-chat-sound {
    padding: 9px 13px;
    gap: 8px 13px;
    flex-wrap: wrap;
  }
  .acc-chat-sound > span {
    width: 100%;
    font-size: 12px;
  }
  .acc-chat-sound > button {
    padding: 4px 11px;
  }
}
.member-topbar .acc-chat-trigger {
  color: #daefee;
  background: #ffffff0c;
  border-color: #ffffff21;
}
.member-topbar .acc-chat-trigger:hover {
  background: #ffffff18;
}
.acc-chat-compose textarea:focus,
.acc-chat-inbox input:focus,
.acc-telegram-field input:focus {
  border-color: #58a9af;
  box-shadow: 0 0 0 3px #087f8c0c;
}
.acc-chat-dialog textarea:focus-visible,
.acc-chat-dialog input:focus-visible {
  outline-offset: 1px;
}
.acc-chat-send-icon {
  width: 15px;
  height: 15px;
}
.acc-chat-dialog button {
  transition: background .15s, border-color .15s;
}
.acc-chat-thread-toolbar > span {
  line-height: 1.6;
}
@media (max-width: 760px) {
  .acc-chat-dialog {
    border-radius: 15px;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    height: 780px;
  }
  .acc-chat-dialog-header {
    padding: 16px;
  }
  .acc-chat-dialog-header h2 {
    font-size: 17px;
  }
  .acc-chat-dialog-header p {
    font-size: 11px;
  }
  .acc-chat-header-icon {
    width: 37px;
    height: 37px;
    border-radius: 11px;
  }
  .acc-chat-heading {
    gap: 10px;
  }
  .acc-chat-inbox {
    width: auto;
    padding: 11px 12px;
    gap: 9px;
  }
  .acc-chat-inbox input {
    height: 39px;
    font-size: 13px;
  }
  .acc-chat-mobile-select {
    height: 39px;
    border-radius: 9px;
    font-size: 13px !important;
    color: #203344;
    border-color: #d6e1e5;
  }
  .acc-chat-thread-toolbar {
    padding: 10px 14px;
    font-size: 10px;
  }
  .acc-chat-thread-toolbar > button {
    font-size: 11px;
  }
  .acc-chat-messages {
    padding: 20px 15px;
  }
  .acc-chat-message > p {
    font-size: 14px;
    padding: 11px 14px;
  }
  .acc-chat-message-meta strong {
    font-size: 11px;
  }
  .acc-chat-message-meta time {
    font-size: 10px;
  }
  .acc-chat-compose {
    padding: 12px 14px;
  }
  .acc-chat-compose textarea {
    font-size: 16px;
    min-height: 72px;
    padding: 10px 12px;
  }
  .acc-chat-compose > div > span {
    font-size: 10px;
  }
  .acc-chat-compose button {
    padding: 10px 13px;
    font-size: 12px;
  }
  .acc-chat-sound {
    padding: 10px 14px;
    gap: 7px 12px;
  }
  .acc-chat-sound > span {
    font-size: 10px;
  }
  .acc-chat-sound > button {
    padding: 5px 12px;
  }
  .acc-chat-latest {
    bottom: 168px;
  }
  .acc-telegram-body {
    padding: 20px;
  }
  .acc-telegram-field input {
    font-size: 16px;
  }
  .member-chat-enabled .acc-chat-trigger {
    padding: 7px 9px;
    font-size: 11px;
    min-height: 36px;
  }
  .acc-chat-dialog-content {
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .topbar-right .acc-chat-company-control .acc-chat-trigger {
    border: 1px solid #cfe3e4;
    background: #f1f9f8;
    border-radius: 8px;
    min-width: 34px;
  }
  .acc-telegram-link,
  .acc-telegram-trigger {
    border: 1px solid #cfe3e4;
    background: #f1f9f8;
    border-radius: 8px;
    padding: 6px;
    min-height: 34px;
  }
  .acc-telegram-control {
    gap: 5px;
  }
  .acc-chat-member-dialog .acc-chat-header-icon {
    display: none;
  }
  .acc-telegram-dialog {
    max-height: calc(100dvh - 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .acc-chat-dialog *,
  .acc-chat-trigger,
  .acc-telegram-control * {
    transition: none !important;
    animation: none !important;
  }
}