:root{--red:#de2826;--red-dark:#b91f1d;--charcoal:#2d2926;--ink:#252a3a;--muted:#6b7280;--line:#dedbd7;--paper:#f6f5f3;--white:#fff;--green:#367a58;--amber:#a45a05;--shadow:0 14px 38px rgba(45,41,38,.09)}
*{box-sizing:border-box}html{font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper)}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{margin:0 0 .35rem;font-size:.75rem;font-weight:900;letter-spacing:.2em}.red-text{color:var(--red)}h1,h2,p{margin-top:0}h1{margin-bottom:.35rem}h2{margin-bottom:.65rem;font-size:1.18rem}.login-screen{min-height:100vh;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 75% 20%,rgba(222,40,38,.2),transparent 30%),linear-gradient(135deg,#171615,#302824)}.login-card{width:min(430px,100%);background:white;border-radius:22px;padding:2.2rem;box-shadow:0 30px 90px rgba(0,0,0,.32)}.login-card h1{font-size:2rem}.login-brand{margin-bottom:2rem}.brand-lockup{display:flex;align-items:center;gap:.9rem}.brand-lockup img{width:58px;height:58px;object-fit:contain;background:#211f1e;border-radius:14px}.brand-lockup strong{display:block;font-size:1.65rem;line-height:1}.brand-lockup span{display:block;margin-top:.45rem;color:#c8b8aa;font-size:.72rem;font-weight:800;letter-spacing:.18em}.stack{display:grid;gap:1rem}.stack.compact{margin-top:1.3rem}.stack label,.form-grid label{display:grid;gap:.4rem;font-size:.78rem;font-weight:800;color:#4b5563}input,select,textarea{width:100%;border:1px solid #ccd1da;border-radius:9px;padding:.72rem .8rem;background:white;color:var(--ink)}textarea{min-height:82px;resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid rgba(222,40,38,.13);border-color:var(--red)}.form-error{min-height:1rem;margin:0;color:#b91c1c;font-size:.8rem;font-weight:700}.form-message{font-weight:800}.button{border:0;border-radius:10px;padding:.72rem 1rem;font-weight:900;cursor:pointer;transition:.15s transform,.15s opacity}.button:hover{transform:translateY(-1px)}.button:disabled{opacity:.45;cursor:not-allowed;transform:none}.button.primary{background:var(--red);color:white}.button.neutral{background:#fff;color:var(--charcoal);border:1px solid #cfcac5}.button.ghost{background:transparent;color:white;border:1px solid rgba(255,255,255,.25)}.button.small{padding:.5rem .75rem;font-size:.75rem}.button.full{width:100%}.hero{background:linear-gradient(120deg,#1d1c1b 0%,#2d2926 58%,#47302d 100%);color:white;border-top:5px solid var(--red);padding:1.8rem clamp(1rem,4vw,4rem)}.hero-top{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(440px,1.8fr) minmax(180px,.6fr);gap:2.2rem;align-items:center}.portal-title{border-left:1px solid rgba(255,255,255,.25);padding-left:2.2rem}.portal-title h1{font-size:clamp(1.5rem,2.5vw,2.45rem)}.portal-title>p:last-child{margin:0;color:#d7c7bb}.user-panel{text-align:right}.user-panel strong,.user-panel span{display:block}.user-panel span{margin:.35rem 0 .8rem;color:#d7c7bb;font-size:.78rem}.nav-tabs{display:flex;gap:.3rem;padding:.75rem clamp(1rem,4vw,4rem);background:white;border-bottom:1px solid var(--line);overflow:auto;position:sticky;top:0;z-index:20}.nav-button{white-space:nowrap;border:0;background:transparent;padding:.8rem 1rem;border-radius:10px;font-weight:900;color:#64748b;cursor:pointer}.nav-button.active{background:var(--charcoal);color:white;box-shadow:inset 0 -3px var(--red)}main{padding:1.6rem clamp(1rem,4vw,4rem) 4rem}.tab{display:none}.tab.active{display:block}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(155px,1fr));gap:1rem;margin-bottom:1rem}.kpi{background:white;border:1px solid var(--line);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow)}.kpi span{display:block;color:#8b95ab;font-size:.72rem;font-weight:900;letter-spacing:.08em}.kpi strong{display:block;margin-top:.7rem;font-size:clamp(1.2rem,2vw,1.8rem)}.kpi.red strong{color:var(--red)}.kpi.green strong{color:var(--green)}.kpi.amber strong{color:var(--amber)}.dashboard-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;margin-bottom:1rem}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:1.35rem;box-shadow:var(--shadow);margin-bottom:1rem}.panel-title,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem}.toolbar-actions,.filters{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}.toolbar-actions input,.filters input{min-width:280px}.filters{padding:1rem 0}.filters select{max-width:220px}.pill{display:inline-flex;align-items:center;border-radius:999px;background:#f2efec;padding:.48rem .75rem;font-weight:900;font-size:.78rem}.table-wrap{overflow:auto;border:1px solid #e2dfdc;border-radius:12px}.table-wrap.wide{max-height:62vh}table{width:100%;border-collapse:collapse;min-width:900px}th{position:sticky;top:0;background:#252b3c;color:white;text-align:left;font-size:.75rem;padding:.85rem;white-space:nowrap}td{padding:.78rem .85rem;border-bottom:1px solid #ece9e6;font-size:.78rem;vertical-align:top}tbody tr:hover{background:#fbf6f5}.money{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}.status{display:inline-block;border-radius:999px;padding:.3rem .55rem;background:#f1f3f5;font-size:.68rem;font-weight:900}.status.paid,.status.approved,.status.ready{background:#dcf5e6;color:#22623f}.status.pending,.status.partially{background:#fff1cf;color:#8a5300}.status.rejected,.status.not-paid{background:#fee4e2;color:#a52320}.row-actions{display:flex;gap:.35rem;white-space:nowrap}.row-actions button{border:0;background:#f1f3f5;border-radius:7px;padding:.35rem .55rem;font-size:.68rem;font-weight:900;cursor:pointer}.empty-state{padding:1.5rem;text-align:center;color:#8992a5}.bar-chart{display:flex;align-items:flex-end;gap:.7rem;height:255px;padding:1rem 0 0}.bar-chart .bar-group{flex:1;min-width:42px;display:grid;grid-template-rows:1fr auto;gap:.4rem;height:100%;text-align:center}.bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:100%;border-bottom:1px solid #ddd}.bar{width:14px;min-height:2px;border-radius:4px 4px 0 0;background:var(--red)}.bar.paid{background:var(--green)}.bar-label{font-size:.65rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-list{display:grid;gap:.65rem}.rank-row{display:grid;grid-template-columns:1fr auto;gap:.7rem;padding:.75rem;border-radius:10px;background:#f7f6f4}.rank-row b{display:block}.rank-row span{font-size:.72rem;color:var(--muted)}.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1rem 0}.preview-card{padding:1rem;border-radius:12px;background:#f5f4f2}.preview-card span{display:block;font-size:.7rem;font-weight:900;color:#7b8498}.preview-card strong{display:block;margin-top:.35rem;font-size:1.4rem}.import-error{padding:.7rem;border-left:4px solid var(--red);background:#fff3f2;margin:.4rem 0;font-size:.76rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid.three{grid-template-columns:repeat(3,1fr)}.span-2{grid-column:span 2}.span-3{grid-column:span 3}dialog{border:0;border-radius:18px;padding:0;width:min(800px,calc(100% - 2rem));box-shadow:0 25px 80px rgba(0,0,0,.32)}dialog::backdrop{background:rgba(15,18,25,.65);backdrop-filter:blur(4px)}.dialog-card{padding:1.4rem}.dialog-card.large{width:100%}.dialog-head,.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem}.dialog-head{margin-bottom:1.2rem}.dialog-actions{justify-content:flex-end;border-top:1px solid #e5e1de;padding-top:1rem;margin-top:1rem}.icon-button{border:0;background:#f1f3f5;border-radius:8px;width:36px;height:36px;font-size:1.4rem;cursor:pointer}.toast{position:fixed;right:1.2rem;bottom:1.2rem;background:#20201f;color:white;padding:.9rem 1.1rem;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:none}.toast.error{background:#a52320}
@media(max-width:1100px){.hero-top{grid-template-columns:1fr 1.5fr}.user-panel{grid-column:1/-1;text-align:left;display:flex;align-items:center;gap:1rem}.user-panel span{margin:0}.kpi-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:700px){.hero-top{grid-template-columns:1fr}.portal-title{border-left:0;padding-left:0}.brand-lockup strong{font-size:1.25rem}.kpi-grid{grid-template-columns:1fr 1fr}.form-grid,.form-grid.three{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto}.toolbar,.panel-title{align-items:flex-start;flex-direction:column}.toolbar-actions,.filters{width:100%}.toolbar-actions input,.filters input,.filters select{min-width:0;max-width:none;width:100%}.preview-grid{grid-template-columns:1fr 1fr}}
.toast.bad{background:#a52320}.text-button{border:0;background:transparent;color:#315f87;padding:.25rem .4rem;font-size:.72rem;font-weight:900;cursor:pointer}.text-button.danger,.amount-due{color:#a52320}.bar-chart{display:grid;height:auto;gap:.75rem;padding:.75rem 0}.bar-row{display:grid;grid-template-columns:110px minmax(140px,1fr) 130px;gap:.75rem;align-items:center;font-size:.72rem}.bar-row>span{font-weight:800}.bar-row>strong{text-align:right}.bar-track{position:relative;height:18px;border-radius:999px;background:#f0eeeb;overflow:hidden}.bar-track i,.bar-track b{position:absolute;inset:0 auto 0 0;display:block;border-radius:999px}.bar-track i{background:#f4b8b4}.bar-track b{background:var(--green);height:7px;top:auto;bottom:0}.rank-list>div{display:grid;grid-template-columns:28px 1fr auto;gap:.7rem;align-items:center;padding:.7rem;border-radius:10px;background:#f7f6f4}.rank-list>div>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--charcoal);color:white;font-weight:900}.rank-list p{margin:0}.rank-list small{display:block;margin-top:.2rem;color:var(--muted)}.preview-grid>div{padding:1rem;border-radius:12px;background:#f5f4f2}.preview-grid>div span{display:block;color:var(--muted);font-size:.72rem;font-weight:900}.preview-grid>div strong{display:block;font-size:1.35rem}.error-box,.success-box{padding:1rem;border-radius:10px}.error-box{background:#fff0ef;color:#92201e}.success-box{background:#e8f7ee;color:#256447}.error-box li{margin:.35rem 0}
