:root{
  --ink:#14213D; --ink2:#1F2E50; --paper:#F6F7F9; --card:#FFFFFF;
  --line:#E4E7EE; --line2:#EEF0F5;
  --muted:#6B7488; --muted2:#9AA1B2; --txt:#1A2236;
  --green:#0F7B4F; --green-bg:#E8F4ED;
  --red:#C1272D; --red-bg:#FBEAEA;
  --amber:#E08A00; --amber-bg:#FCF2E0;
  --shadow:0 1px 2px rgba(20,33,61,.04),0 4px 16px rgba(20,33,61,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--txt);font-feature-settings:"tnum" 1,"cv05" 1;-webkit-font-smoothing:antialiased;line-height:1.45}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px 80px}

header{background:var(--ink);color:#fff;padding:26px 0 22px;position:relative;overflow:hidden}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--red) 0 50%,var(--green) 50% 100%)}
.hd{max-width:1320px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:3px}
.logo{font-family:'Archivo',sans-serif;font-weight:900;font-size:30px;letter-spacing:.14em;line-height:1;display:flex;align-items:center;gap:14px}
.cur-tag{font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;padding:5px 12px;border-radius:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.tag{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9DAACB;font-weight:600}
.hmeta{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.hmeta .t1{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em}
.hmeta .t2{font-size:12px;color:#9DAACB;letter-spacing:.04em}
.hrow{display:flex;gap:10px;align-items:center;margin-top:7px}
.recov-pill{display:inline-flex;align-items:baseline;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:8px}
.recov-pill b{font-family:'Archivo',sans-serif;font-size:18px;font-weight:800}
.recov-pill small{font-size:10.5px;color:#9DAACB;letter-spacing:.1em;text-transform:uppercase}
.switch{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:9px 14px;border-radius:8px;text-decoration:none;transition:transform .12s}
.switch:hover{transform:translateY(-1px)}
.switch svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2.4;fill:none}

.eyebrow{font-family:'Archivo',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:38px 0 16px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--ink)}
.eyebrow .c{margin-left:auto;font-weight:600;letter-spacing:.04em;color:var(--muted2);text-transform:none;font-family:'Inter'}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .lab{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.kpi .val{font-family:'Archivo',sans-serif;font-weight:800;font-size:25px;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.kpi .val .u{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}
.kpi .sub{font-size:11.5px;color:var(--muted);margin-top:9px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi.accent-red::before,.kpi.accent-green::before,.kpi.accent-ink::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.kpi.accent-red::before{background:var(--red)} .kpi.accent-green::before{background:var(--green)} .kpi.accent-ink::before{background:var(--ink)}
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.02em}
.chip.r{background:var(--red-bg);color:var(--red)} .chip.g{background:var(--green-bg);color:var(--green)} .chip.a{background:var(--amber-bg);color:var(--amber)}

.aging-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow);margin-top:18px}
.aging-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.aging-head h3{font-family:'Archivo',sans-serif;font-size:17px;font-weight:700;color:var(--ink)}
.aging-head .tot{font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;color:var(--ink)}
.aging-head .tot small{color:var(--muted);font-weight:500;font-size:12px}
.bar{display:flex;height:46px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.seg{position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12.5px;min-width:2px}
.seg:hover{opacity:.88}
.seg span{font-family:'Archivo',sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.18);font-variant-numeric:tabular-nums}
.legend{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:18px;border-top:1px solid var(--line2);padding-top:4px}
.lg{padding:14px 8px 4px;border-right:1px solid var(--line2)}
.lg:last-child{border-right:none}
.lg .dot{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:1px}
.lg .nm{font-size:11.5px;color:var(--muted);font-weight:600}
.lg .mt{font-family:'Archivo',sans-serif;font-size:17px;font-weight:800;color:var(--ink);margin-top:5px}
.lg .pc{font-size:11px;color:var(--muted2);margin-top:2px}
.lg .nb{font-size:10.5px;color:var(--muted2);margin-top:1px}

.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-top:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.panel h3{font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px}
.panel .ph{font-size:11.5px;color:var(--muted);margin-bottom:16px}
.cvs{position:relative;height:300px}

.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 12px}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line);border-radius:10px;font-family:'Inter';font-size:13.5px;background:var(--card);color:var(--txt)}
.search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,33,61,.08)}
.search svg{position:absolute;left:13px;top:12px;width:15px;height:15px;stroke:var(--muted2);fill:none;stroke-width:2}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fbtn{padding:9px 14px;border:1px solid var(--line);background:var(--card);border-radius:9px;font-family:'Inter';font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .12s}
.fbtn:hover{border-color:var(--ink);color:var(--ink)}
.fbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--ink);color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:13px 14px;text-align:right;white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0}
thead th:first-child{text-align:left}
thead th .ar{opacity:.4;font-size:9px;margin-left:3px}
thead th.sorted .ar{opacity:1}
tbody td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap;font-variant-numeric:tabular-nums}
tbody td:first-child{text-align:left;font-weight:600;color:var(--ink);white-space:normal;min-width:200px;max-width:280px}
tbody tr:hover{background:#FAFBFC}
tbody tr:last-child td{border-bottom:none}
.miniwrap{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.mini{width:74px;height:8px;border-radius:4px;overflow:hidden;display:flex;background:var(--line2);flex-shrink:0}
.mini i{height:100%}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.01em}
.badge.ok{background:var(--green-bg);color:var(--green)}
.badge.dep{background:var(--red-bg);color:var(--red)}
.badge.zero{background:#EFE9F7;color:#6B3FA0}
.badge.nd{background:#EEF0F5;color:var(--muted)}
.util-bar{display:inline-flex;align-items:center;gap:7px}
.util-track{width:54px;height:6px;background:var(--line2);border-radius:3px;overflow:hidden}
.util-track i{display:block;height:100%;border-radius:3px}
.retard{font-weight:700}
.tfoot{padding:13px 16px;font-size:11.5px;color:var(--muted);background:#FAFBFC;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.tfoot b{color:var(--ink);font-family:'Archivo';font-variant-numeric:tabular-nums}

.period{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}
.period select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-family:'Inter';font-size:13px;background:var(--card);color:var(--txt)}
.period label{font-size:12px;color:var(--muted);font-weight:600}

footer{margin-top:50px;padding-top:22px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* loading / error */
.state{max-width:560px;margin:90px auto;text-align:center;padding:0 24px}
.spin{width:42px;height:42px;border:4px solid var(--line);border-top-color:var(--ink);border-radius:50%;margin:0 auto 22px;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.state h2{font-family:'Archivo',sans-serif;font-size:19px;color:var(--ink);margin-bottom:8px}
.state p{font-size:13.5px;color:var(--muted);line-height:1.6}
.state.err .ic{font-size:40px;margin-bottom:14px}
.state code{background:#EEF0F5;padding:2px 7px;border-radius:5px;font-size:12.5px;color:var(--ink)}

@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.legend{grid-template-columns:repeat(2,1fr)}.lg{border-bottom:1px solid var(--line2)}}
@media(max-width:560px){.wrap{padding:0 16px 60px}.hd{padding:0 16px}.kpis{grid-template-columns:1fr}.legend{grid-template-columns:1fr}}