:root{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#233f46;background:#f6f7f5;font-size:15px}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:28px;align-items:center;padding:20px 32px;background:#233f46;color:white;flex-wrap:wrap}header a{font-size:24px;color:#f7dfa0;text-decoration:none;font-weight:700}small{display:block;font-size:12px;font-weight:400;opacity:.75}#identity{margin-left:auto;font-size:13px}.shell{display:flex;max-width:1600px;margin:auto;min-height:80vh}nav{width:220px;flex-shrink:0;padding:28px 16px;border-right:1px solid #dde3df}nav:empty{display:none}nav button{display:block;width:100%;text-align:left;margin-bottom:8px;background:transparent;border:0}nav button.active{background:#e3ece8;color:#174c3c;font-weight:bold}main{padding:30px;min-width:0;flex:1}h1{font-size:27px;margin:0 0 8px}h2{font-size:19px;margin:28px 0 14px}p{line-height:1.65}.muted{color:#667a7c;font-size:13px}.filters,.buttons{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}button,input,select{font:inherit;border:1px solid #cbd6d1;border-radius:7px;padding:10px 12px}button{cursor:pointer;background:white;color:#233f46}button:hover{border-color:#47765f}button:disabled{opacity:.5;cursor:wait}.primary{background:#245b49;color:white;border-color:#245b49}.danger{color:#a32828;border-color:#dca9a9}label{display:block;font-size:13px;margin:14px 0 6px}label input,label select{display:block;width:100%;margin-top:6px;background:white}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.metric{background:white;border:1px solid #dce5df;padding:20px;border-radius:12px}.metric strong{display:block;font-size:27px;margin-top:12px;overflow-wrap:anywhere}.metric span{color:#667a7c;font-size:13px}.tablewrap{max-width:100%;overflow:auto;background:white;border:1px solid #dce5df;border-radius:10px}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:14px 12px;text-align:left;border-bottom:1px solid #e8eeea;white-space:nowrap}th{background:#edf3ef;font-weight:600}td button{padding:6px 9px;margin:2px}.pill{padding:4px 8px;background:#fff2d8;border-radius:12px}.Paid{background:#def2e5}.Void{background:#f5dede}.login{max-width:440px;margin:40px auto;background:white;border:1px solid #dce5df;border-radius:16px;padding:32px}#notice{padding:0 30px;color:#a02323}#notice:not(:empty){padding:14px 30px;background:#fff0ea}dialog{border:0;border-radius:14px;max-width:660px;width:calc(100% - 24px);max-height:90vh;padding:26px;color:#233f46}dialog::backdrop{background:#162e3899}#fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}#formerror{color:#a02323}.warning{padding:14px;border-left:4px solid #ca8c35;background:#fff3db;line-height:1.6}.wide{grid-column:1/-1}footer{padding:20px;text-align:center;font-size:12px;color:#667a7c}.empty{padding:30px;color:#667a7c}.account{max-width:550px}.summary{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}@media(max-width:900px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.shell{display:block}nav{display:flex;overflow:auto;width:100%;padding:12px;border-right:0;border-bottom:1px solid #ddd}nav button{width:auto;white-space:nowrap;margin:0 4px}main{padding:20px}header{padding:16px;gap:12px}}@media(max-width:480px){.metrics{gap:8px}.metric{padding:14px}.metric strong{font-size:22px}#fields{grid-template-columns:1fr}header span{font-size:13px}main{padding:16px}.login{padding:22px}h1{font-size:23px}}
/* BeeAI red brand theme */
:root{color:#382b2d;background:#faf7f7}header{background:#a71930;color:#fff}header a{color:#fff}header img{display:block;object-fit:contain}nav{border-color:#eadcde}nav button.active{background:#fbe7eb;color:#a71930}button{color:#582b33;border-color:#ddc6cc}button:hover{border-color:#b6213b}.primary{background:#b21d36;border-color:#b21d36;color:#fff}.primary:hover{background:#95182d}.metric,.tablewrap,.login{border-color:#eadcde}th{background:#faedef}.muted,.metric span,footer{color:#78666b}input:focus,select:focus,button:focus-visible{outline:2px solid #c9314c;outline-offset:2px}dialog{color:#382b2d}.Paid{background:#def2e5;color:#205637}.Void{background:#f5dede;color:#922b37}
header>span:first-of-type{font-size:25px;font-weight:750}input,select,button{font-size:16px;min-height:48px}label{font-size:16px}.commission-preview{padding:20px;background:#fff0f3;border:1px solid #edb7c3;border-radius:12px}.commission-preview strong{display:block;color:#a71930;font-size:32px;margin:10px 0}.commission-preview small{line-height:1.6;opacity:1}.commission-preview p{margin:8px 0}dialog .buttons{position:sticky;bottom:0;background:white;padding:12px 0;margin-bottom:0}dialog .buttons button{flex:1}
@media(max-width:600px){header{gap:12px}header>span:first-of-type{font-size:24px;flex:1;min-width:200px}header #identity{font-size:14px;width:100%;margin:0}header img{width:48px;height:48px}h1{font-size:26px}.summary{display:block}.summary>div{margin:16px 0}.summary .primary{width:100%;font-size:18px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filters label{margin:0}dialog{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:18px 18px 0 0;padding:20px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}#fields{grid-template-columns:1fr}#formtitle{font-size:25px;margin-top:0}input,select{padding:14px 12px;min-height:52px}nav button{min-height:48px}.tablewrap{border:0;background:transparent;overflow:visible}table,tbody,tr,td{display:block;width:100%}thead{display:none}tr{background:white;border:1px solid #eadcde;border-radius:12px;margin:12px 0;padding:8px 14px}td{display:flex;justify-content:space-between;gap:12px;padding:10px 0;white-space:normal;overflow-wrap:anywhere}td:before{content:attr(data-label);color:#78666b;flex:0 0 35%;font-size:14px}td:last-child{border-bottom:0}td button{min-height:44px}pre{white-space:pre-wrap;overflow-wrap:anywhere}.metric span{font-size:14px}}
.sales-overview{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sales-overview h2{margin:0}.sales-overview button{white-space:normal;width:100%}.order-files{max-width:340px;min-width:180px}.file-link{display:block;padding:10px 0;color:#a71930;overflow-wrap:anywhere;white-space:normal}.file-link small{font-size:12px}.payment-card{background:white;border:1px solid #eadcde;border-radius:14px;padding:22px;margin:20px 0;max-width:680px}.payment-card h2{margin-top:0}.paynow-qr{display:block;max-width:100%;width:360px;height:auto}.payment-uen{font-size:24px;font-weight:700;color:#a71930}dt{font-weight:700;margin-top:18px}dd{margin:6px 0;overflow-wrap:anywhere}input[type=file]{max-width:100%;padding:12px 4px}a{color:#a71930}
@media(max-width:600px){.sales-overview{grid-template-columns:1fr}.order-files{min-width:0;max-width:100%;flex:1}.order-files button{width:100%}.payment-card{padding:16px}.payment-uen{font-size:22px}}
.bank-details{margin:16px 0;overflow-wrap:anywhere}.bank-details dt{font-weight:700;margin-top:12px}.bank-details dd{margin:4px 0 12px;white-space:pre-wrap}input[type=checkbox]{width:24px;min-height:24px;height:24px;vertical-align:middle}
/* Role-specific legibility: admin desktop workspace, sales mobile-first. */
body[data-role=admin]{font-size:18px;line-height:1.55}
body[data-role=admin] .shell{max-width:1920px}
body[data-role=admin] nav{width:240px}
body[data-role=admin] h1{font-size:32px}
body[data-role=admin] h2{font-size:24px}
body[data-role=admin] table,body[data-role=admin] label,body[data-role=admin] button,body[data-role=admin] input,body[data-role=admin] select{font-size:18px}
body[data-role=admin] small,body[data-role=admin] .muted,body[data-role=admin] .metric span,body[data-role=admin] #identity{font-size:16px}
body[data-role=admin] .metric strong{font-size:34px}
body[data-role=admin] th,body[data-role=admin] td{white-space:normal;min-width:130px;padding:18px 14px;vertical-align:top}
body[data-role=admin] td:last-child{min-width:190px}
body[data-role=admin] dialog{max-width:860px;font-size:18px;line-height:1.6}
body[data-role=sales]{font-size:17px;line-height:1.6}
body[data-role=sales] .shell{max-width:1440px}
body[data-role=sales] table,body[data-role=sales] label{font-size:16px}
body[data-role=sales] small,body[data-role=sales] .muted{font-size:14px}
body[data-role=sales] th,body[data-role=sales] td{white-space:normal;vertical-align:top}
body[data-role=sales] .pill{display:inline-block;white-space:normal}
@media(min-width:901px){body[data-role=sales] main{padding:32px 36px}body[data-role=sales] .sales-overview{grid-template-columns:1fr 1fr}body[data-role=sales] dialog{max-width:760px}body[data-role=admin] nav{position:sticky;top:0;align-self:flex-start}}
@media(max-width:900px){body[data-role=admin] nav{width:100%}}
@media(max-width:600px){body[data-role=sales] main{padding:18px 14px}body[data-role=sales] nav{position:sticky;top:0;z-index:5;background:#faf7f7;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px}body[data-role=sales] nav button{font-size:14px;white-space:normal;text-align:center;padding:10px 4px;margin:0;line-height:1.4}body[data-role=sales] .sales-overview{grid-template-columns:1fr}body[data-role=sales] td{display:block;padding:12px 0}body[data-role=sales] td:before{display:block;margin-bottom:6px;font-weight:600}body[data-role=sales] .order-files{max-width:100%;width:100%}body[data-role=sales] .order-files button{width:100%;margin:6px 0}body[data-role=sales] .filters{grid-template-columns:1fr 1fr}body[data-role=sales] input,body[data-role=sales] select{font-size:17px}body[data-role=admin] h1{font-size:28px}body[data-role=admin] td{min-width:0}body[data-role=admin] dialog{font-size:17px}dialog textarea{font:inherit;max-width:100%}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.form-grid[hidden]{display:none!important}input[readonly]{background:#f1eded;color:#5a4b50}.invoice-item{white-space:normal;margin-bottom:16px;overflow-wrap:anywhere}.invoice-item strong{display:block}.text-button{border:0;padding:6px 0;text-decoration:underline;color:#a71930;background:none}td>div{min-width:0;overflow-wrap:anywhere}.order-files a{display:inline-block;padding:6px 0}#fields h3{margin-top:24px}#fields section{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}.summary>div>button{width:100%;margin:5px 0}td>div{flex:1}td small{line-height:1.6}.invoice-item button{display:block;margin-top:8px}}