*{box-sizing:border-box}body{margin:0;background:#f6f7f9;color:#18202a;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}.shell{min-height:100vh}aside{position:fixed;right:0;top:0;bottom:0;width:245px;background:#fff;border-left:1px solid #e5e9ef;padding:24px;display:flex;flex-direction:column}main{margin-right:245px;padding:40px 46px}.brand{display:flex;gap:11px;align-items:center;margin-bottom:32px}.brand i{font-style:normal;width:39px;height:39px;display:grid;place-items:center;background:#151a21;color:white;border-radius:12px;font-weight:800}.brand b,.brand small{display:block}.brand small{color:#8a929d;font-size:11px}nav{display:grid;gap:5px;flex:1}nav a{padding:11px 13px;border-radius:10px;text-decoration:none;color:#56606c;font-weight:650}nav a:hover{background:#f1f3f6;color:#111}header{margin-bottom:28px}header span{font-size:11px;letter-spacing:1.5px;color:#8a939f;font-weight:800}header h1{font-size:35px;letter-spacing:-1px;margin:5px 0}header p{color:#727c88;margin:0}.card{background:#fff;border:1px solid #e5e9ef;border-radius:18px;box-shadow:0 5px 20px rgba(20,30,50,.035);padding:22px}.cols{display:grid;grid-template-columns:380px 1fr;gap:18px}.tri{display:grid;grid-template-columns:320px 320px 1fr;gap:18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.form{display:grid;gap:14px;align-content:start}.form h2{margin:0}.form label{display:grid;gap:6px;font-size:13px;font-weight:650;color:#4f5965}.form input,.form select{width:100%;padding:11px 12px;border:1px solid #d9dfe7;border-radius:10px;background:#fff}.form button,button{border:0;background:#151a21;color:white;border-radius:10px;padding:12px 15px;font-weight:750;cursor:pointer}.ghost{background:#eef1f4;color:#333;width:100%}.mini{padding:7px 10px}.table{overflow:auto}table{width:100%;border-collapse:collapse}td,th{padding:12px 10px;border-bottom:1px solid #edf0f3;text-align:right;font-size:13px}th{font-size:11px;color:#7b8590}.alert{border-right:4px solid #d7dbe1}.alert.critical{border-right-color:#df4242}.alert.warning{border-right-color:#e1a12c}.alert em{font-size:10px;text-transform:uppercase;font-style:normal;font-weight:800}.empty{grid-column:1/-1;text-align:center;padding:55px}.kpis{display:flex;gap:10px;margin-top:16px}.kpis b{background:#fff;border:1px solid #e5e9ef;border-radius:12px;padding:10px 15px}.toast{position:fixed;left:25px;top:20px;z-index:9;background:#1e252d;color:#fff;padding:12px 18px;border-radius:11px;max-width:600px}.toast.err{background:#a33737}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 60% 20%,#fff,#f3f5f7 55%,#e9edf2)}.auth{width:min(430px,92vw);display:grid;gap:15px;padding:38px}.auth label{display:grid;gap:6px}.center{margin:auto}.auth h1,.auth p{text-align:center;margin:0}.auth p{color:#737d88}@media(max-width:1000px){.tri,.cols{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){aside{position:static;width:auto}main{margin:0;padding:22px}.grid{grid-template-columns:1fr}}
/* ── owner view / shared utilities ───────────────────────────────────────────
   Everything here exists so no view needs an inline style= attribute: the CSP
   sets style-src 'self' with no 'unsafe-inline', which blocks inline styles
   outright (they would silently render as unstyled, e.g. zero-height bars). */
.mt{margin-top:14px}.mb{margin-bottom:14px}.mt-s{margin-top:10px}.inline{display:inline}
.muted{color:#7b8590}.brk{word-break:break-word}.nowrap{white-space:nowrap}
.scroll-x{overflow-x:auto;max-width:100%}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;background:#eef1f4;color:#414a55;font-size:11px;font-weight:750}
.badge.ok{background:#e6f4ea;color:#1e6b34}.badge.bad{background:#fdeaea;color:#a12727}
.btn{border:0;background:#151a21;color:#fff;border-radius:10px;padding:10px 13px;font-weight:750;cursor:pointer}
.btn.small{padding:6px 10px;font-size:12px}.btn.ghost{background:#eef1f4;color:#333}
.row-between{display:flex;gap:8px;align-items:center;justify-content:space-between}
.flow{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center}
.bar{background:#eceff3;border-radius:6px;height:22px;overflow:hidden;position:relative}
.bar>i{display:block;height:100%;font-style:normal}
.bar .out{background:#8a94a6}.bar .in{background:#2f7fa5}
.bar .accrued{position:absolute;inset-inline-start:0;top:0;height:100%;background:#12384a}
/* width buckets — 5% steps, so a computed percentage needs a class, not inline CSS */
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}
.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}
.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}
.w90{width:90%}.w95{width:95%}.w100{width:100%}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile{border-inline-start:4px solid #d7dbe1}.tile.ok{border-inline-start-color:#2e7d32}
.tile.warn{border-inline-start-color:#ed6c02}.tile.bad{border-inline-start-color:#c62828}
.tile b{display:block;font-size:20px;line-height:1.3}
.pos{color:#1e6b34;font-weight:700}.neg{color:#a12727;font-weight:700}
.amt{width:100px}.pager{display:flex;gap:12px;align-items:center}
.cell-wide{max-width:420px}
/* the current page must be visibly distinct: conversions.php emits class="active" on the
   selected status tab, and the sidebar marks the open screen. Without this rule all five
   conversion tabs rendered identically while the operator bulk-approved money. */
nav a.active,.tabs a.active{background:#151a21;color:#fff}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{padding:7px 12px;border-radius:9px;text-decoration:none;color:#56606c;font-weight:650;background:#f1f3f6}
.ack{border:1px solid #e5e9ef;border-radius:12px;padding:12px;display:grid;gap:8px}
.ack legend{font-size:12px;color:#7b8590;padding:0 6px}
.chk{display:flex;gap:8px;align-items:center;font-weight:600}
.chk input{width:auto}