*{box-sizing:border-box}body{margin:0;font-family:Barlow,-apple-system,Segoe UI,Roboto,sans-serif;background:#3A3D42;color:#B9DDF3}
a{color:inherit;text-decoration:none}.app{display:flex;min-height:100vh}
.side{width:230px;background:#05539C;color:#C9D3E3;padding:22px 16px;flex-shrink:0}
.logo{font-weight:800;font-size:20px;color:#fff;margin-bottom:28px}.logo b{color:#E04848;display:block;font-size:13px;letter-spacing:3px}
.side a{display:block;padding:10px 12px;border-radius:8px;margin:2px 0;font-size:14px}.side a.on,.side a:hover{background:#05539C;color:#fff}
main{flex:1;padding:26px 32px;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}
h1{margin:0;font-size:24px}h2{font-size:16px;margin:0}.sub{color:#8FB4CF;font-size:13px}
.btn{background:#05539C;color:#fff;border:0;padding:9px 14px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;display:inline-block}
.btn.red{background:#E04848}.btn.ghost{background:#2E3135;color:#6FB6E3;border:1px solid #4A4E54}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
.stage{background:#2E3135;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0B142614;border-top:4px solid #4A4E54}
.stage .n{font-size:28px;font-weight:800}.stage .v{font-size:12px;color:#8FB4CF}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{background:#2E3135;border-radius:12px;padding:18px;box-shadow:0 1px 3px #0B142614;min-width:0}
.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:9px 6px;border-bottom:1px solid #4A4E54;text-align:left}th{color:#8FB4CF;font-weight:600;font-size:11px;text-transform:uppercase}
td.r,th.r{text-align:right}.pill{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.draft{background:#3A3D42;color:#C3CAD2}.review{background:#463A1A;color:#F2C572}.approved{background:#12324F;color:#6FB6E3}.unpaid{background:#4A3118;color:#F5A462}.paid{background:#1E3B2B;color:#6FD39A}.overdue{background:#4A2326;color:#FF8A8A}.sent{background:#2F2850;color:#B9A8FF}.viewed{background:#463A1A;color:#F2C572}.signed{background:#1E3B2B;color:#6FD39A}
.ms{display:flex;gap:6px;margin:6px 0 14px}.m{flex:1;padding:8px;border-radius:8px;background:#3A3D42;font-size:12px}.m.done{background:#1E3B2B}.m b{display:block}
.tag{position:fixed;right:12px;bottom:12px;background:#E04848;color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:20px;box-shadow:0 2px 8px #0003;z-index:9}
.wide{grid-column:1/-1}
@media(max-width:900px){.app{display:block}.side{width:auto;padding:12px;display:flex;gap:4px;overflow-x:auto;align-items:center}.logo{margin:0 10px 0 0;font-size:15px;white-space:nowrap}.side a{white-space:nowrap;font-size:13px}main{padding:16px}.pipe{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}.hm{display:none}}
@media(max-width:480px){.pipe{grid-template-columns:repeat(2,1fr)}}
h1,h2,.stage .n,.amt{font-family:'Barlow Condensed',sans-serif;letter-spacing:.3px}h1{font-size:28px}h2{font-size:18px}
.side{background:linear-gradient(180deg,#4A4E54,#101c35)}.side a.on{background:#05539C}.side a:hover{background:#101c35;color:#F2F4F7}.side a.on:hover{background:#05539C}
.btn.ghost{color:#6FB6E3;border-color:#4A4E54}.approved{background:#12324F;color:#6FB6E3}.overdue{background:#4A2326;color:#E04848}
@media(max-width:900px){.side .logo{min-width:96px;padding:4px!important}.side .logo img{max-height:36px!important}}
/* dark theme */
body{background:#0A0A0A!important;color:#B9DDF3}
.side{background:#050505!important;border-right:1px solid #1F2226}.side a{color:#9FC6E3}.side a.on,.side a.on:hover{background:#2186C8!important;color:#fff}.side a:hover{background:#1A1C1F!important;color:#fff}
h1,h2,.amt,.stage .n,td.r{color:#2186C8}h1,h2{color:#3A9AD9}
.card,.stage{border:1px solid #4A4E54;box-shadow:none!important}
.btn{background:#05539C;color:#fff}.btn.ghost{background:transparent!important;color:#6FB6E3!important;border:1px solid #2186C8!important}.btn.red{background:#B3262A}
a{color:inherit}td a{color:#6FB6E3}
input,select,textarea,[contenteditable]{background:#232528!important;color:#DCEBF7!important;border-color:#4A4E54!important;color-scheme:dark}
input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:2px solid #2186C8!important;outline-offset:1px}
::placeholder{color:#7E95A8}
.pill.paid,.pill.signed{background:#1E3B2B;color:#6FD39A}.pill.overdue{background:#4A2326;color:#FF8A8A}.pill.review,.pill.viewed{background:#463A1A;color:#F2C572}.pill.unpaid{background:#4A3118;color:#F5A462}.pill.draft{background:#3A3D42;color:#C3CAD2}.pill.approved{background:#12324F;color:#6FB6E3}.pill.sent{background:#2F2850;color:#B9A8FF}
th{color:#8FB4CF}td,th{border-color:#3A3D42!important}.sub{color:#8FB4CF}
.prog i{background:#2186C8!important}.sw.on{background:#2186C8!important}.tag{background:#B3262A!important}
.staff{border-color:#2186C8!important}.staff .bar,.sb .line{border-color:#2186C8}
.stage{border-top-width:4px!important}td.r{color:#6FB6E3}.btn.red{background:#05539C!important}
@media(max-width:600px){td .btn{padding:6px 8px;font-size:11px;white-space:nowrap}.card{overflow-x:auto}}
@media(max-width:600px){table.stk tr:has(th){display:none}table.stk,table.stk tbody{display:block}table.stk tr{display:block;padding:10px 0;border-bottom:1px solid #3A3D42}table.stk td{display:block;border:0!important;padding:2px 0;text-align:left!important}table.stk td:first-child{font-weight:700}table.stk td .btn{display:block;width:100%;text-align:center;margin-top:6px;padding:8px}}
.cp{position:relative;margin:4px 0 14px}.cp #c_q{width:100%;box-sizing:border-box;background:#232528;color:#DCEBF7;border:1px solid #4A4E54;border-radius:8px;padding:10px 12px;font:inherit;font-size:14px}.cp #c_q:focus{outline:2px solid #2186C8;border-color:#2186C8}