/* H23 Reports — 28s loop: Overview (KPIs, AI insights, revenue trend draws, invoice donut) → Revenue (category bars grow, top customers, quote performance) → Payments (tender table, by customer) → Services (horizontal bars) → change range to Last 90 Days, KPIs recalc (needs hero-graphics.css shell) */
.rcg .h23{--t:28s}
.rcg .h23 .top{margin-bottom:0;height:28px}
.rcg .h23 .rtabs span{padding:4px 8px;font-size:9px;border-radius:5px;white-space:nowrap}
.rcg .h23 .rtabs .t1{animation:rpT1 var(--t) step-end infinite}.rcg .h23 .rtabs .t2{animation:rpT2 var(--t) step-end infinite}.rcg .h23 .rtabs .t3{animation:rpT3 var(--t) step-end infinite}.rcg .h23 .rtabs .t4{animation:rpT4 var(--t) step-end infinite}
@keyframes rpT1{0%,30%{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}30.01%,100%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}}
@keyframes rpT2{0%,30%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}30.01%,52%{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}52.01%,100%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}}
@keyframes rpT3{0%,52%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}52.01%,70%{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}70.01%,100%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}}
@keyframes rpT4{0%,70%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}70.01%,100%{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}}
.rcg .h23 .cal{width:9px;height:8px;border:1.3px solid currentColor;border-top-width:2.5px;border-radius:2px;display:inline-block}.rcg .h23 .sel.dr .sw b{white-space:nowrap}
.rcg .h23 .dl{width:8px;height:8px;display:inline-block;position:relative;border-bottom:1.3px solid currentColor}.rcg .h23 .dl::before{content:"";position:absolute;left:3.3px;top:-2px;width:1.3px;height:6px;background:currentColor}.rcg .h23 .dl::after{content:"";position:absolute;left:1.5px;top:1px;width:4px;height:4px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg)}
.rcg .h23 .btn.ex{width:26px;padding:0;justify-content:center}.rcg .h23 .btn.sm{height:20px;padding:0 7px;font-size:8.5px;gap:4px;margin-left:6px}.rcg .h23 .btn.sm .dl{width:7px;height:7px}
.rcg .h23 .d1 .a{animation:rpA87 var(--t) step-end infinite}.rcg .h23 .d1 .b{animation:rpB87 var(--t) step-end infinite}
@keyframes rpA87{0%,87.5%{opacity:1}87.51%,100%{opacity:0}}@keyframes rpB87{0%,87.5%{opacity:0}87.51%,100%{opacity:1}}
/* views */
.rcg .h23 .vw{position:absolute;left:22px;right:22px;top:58px;bottom:18px;opacity:0;display:flex;flex-direction:column;gap:8px}
.rcg .h23 .vw.ov{opacity:1;animation:rpVov var(--t) ease-in-out infinite}.rcg .h23 .vw.rv{animation:rpVrv var(--t) ease-in-out infinite}.rcg .h23 .vw.py{animation:rpVpy var(--t) ease-in-out infinite}.rcg .h23 .vw.sv{animation:rpVsv var(--t) ease-in-out infinite}
@keyframes rpVov{0%,30%{opacity:1;transform:none}31.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes rpVrv{0%,30.5%{opacity:0;transform:translateX(10px)}32%,52%{opacity:1;transform:none}53.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes rpVpy{0%,52.5%{opacity:0;transform:translateX(10px)}54%,70%{opacity:1;transform:none}71.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes rpVsv{0%,70.5%{opacity:0;transform:translateX(10px)}72%,100%{opacity:1;transform:none}}
/* kpis */
.rcg .h23 .kps{display:grid;gap:8px}.rcg .h23 .k5{grid-template-columns:repeat(5,1fr)}.rcg .h23 .k4{grid-template-columns:repeat(4,1fr)}.rcg .h23 .k3{grid-template-columns:repeat(3,1fr)}
.rcg .h23 .kpi{padding:8px 10px}.rcg .h23 .kpi .k{font-size:7.5px}.rcg .h23 .kpi .v{font-size:14px;margin-top:3px;display:grid}.rcg .h23 .kpi .v>span{grid-area:1/1;white-space:nowrap}.rcg .h23 .kpi .d{font-size:7.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .h23 .kpi .d i{font-style:normal;color:var(--g-mute,#6b7280);font-weight:500}.rcg .h23 .kpi .d.mu{color:var(--g-mute,#6b7280);font-weight:500}
.rcg .h23 .kpi .v.sw .b{color:var(--blue)}
/* ai insights */
.rcg .h23 .ins{border:1px solid var(--g-blueline,#bfd3fb);border-radius:8px;padding:7px 10px;display:grid;gap:5px}
.rcg .h23 .ih{display:flex;align-items:center;gap:6px;font-size:9px}.rcg .h23 .ih i{font-style:normal;color:var(--blue);font-size:10px}.rcg .h23 .ih b{font-weight:700}.rcg .h23 .ih small{color:var(--g-mute,#6b7280);font-size:8px}.rcg .h23 .ih span{margin-left:auto;color:var(--blue);font-size:8px;font-weight:600}
.rcg .h23 .ir{border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:5px 8px;opacity:0;transform:translateY(4px)}.rcg .h23 .ir b{display:block;font-size:8.5px;font-weight:600}.rcg .h23 .ir small{display:block;font-size:7.5px;color:var(--g-mute,#6b7280);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcg .h23 .ir.i1{animation:rpI1 var(--t) ease-out infinite}.rcg .h23 .ir.i2{animation:rpI2 var(--t) ease-out infinite}
@keyframes rpI1{0%,4%{opacity:0;transform:translateY(4px)}6%,100%{opacity:1;transform:none}}@keyframes rpI2{0%,6.5%{opacity:0;transform:translateY(4px)}8.5%,100%{opacity:1;transform:none}}
/* cards */
.rcg .h23 .rg2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;flex:1;min-height:0}
.rcg .h23 .rcard{border:1px solid var(--g-line,#e6e8ed);border-radius:8px;padding:8px 10px;background:var(--g-bg,#fff);display:flex;flex-direction:column;min-height:0;min-width:0}
.rcg .h23 .ct{font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:6px}.rcg .h23 .ct small{font-weight:500;font-size:8px;color:var(--g-mute,#6b7280);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* line chart */
.rcg .h23 .ln{flex:1;display:flex;flex-direction:column;min-height:0}.rcg .h23 .ln svg{flex:1;width:100%;min-height:0;overflow:visible}
.rcg .h23 .ln .ar{fill:url(#rpg);opacity:0;animation:rpAr var(--t) ease-out infinite}.rcg .h23 .ln .st{fill:none;stroke:var(--blue);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000;animation:rpSt var(--t) cubic-bezier(.4,0,.2,1) infinite}
@keyframes rpSt{0%,3%{stroke-dashoffset:1000}12%,100%{stroke-dashoffset:0}}@keyframes rpAr{0%,8%{opacity:0}13%,100%{opacity:1}}
.rcg .h23 .xs{display:flex;justify-content:space-between;font-size:7px;color:var(--g-mute,#6b7280);margin-top:4px}
/* donut */
.rcg .h23 .dn{flex:1;display:flex;align-items:center;gap:10px;min-height:0}.rcg .h23 .dn svg{height:100%;max-height:96px;aspect-ratio:1;transform:rotate(-90deg)}.rcg .h23 .dn circle{fill:none;stroke-width:14;stroke-dasharray:var(--l,0) 238.76;stroke-dashoffset:var(--o,0)}
.rcg .h23 .dn .r0{stroke:var(--grn);animation:rpD0 var(--t) ease-out infinite}.rcg .h23 .dn .r1{stroke:var(--org);animation:rpD1 var(--t) ease-out infinite}.rcg .h23 .dn .r2{stroke:var(--g-mute2,#9aa0ab);animation:rpD2 var(--t) ease-out infinite}
@keyframes rpD0{0%,4%{stroke-dasharray:0 238.76}11%,100%{stroke-dasharray:var(--l) 238.76}}@keyframes rpD1{0%,5%{stroke-dasharray:0 238.76}11%,100%{stroke-dasharray:var(--l) 238.76}}@keyframes rpD2{0%,6%{stroke-dasharray:0 238.76}11%,100%{stroke-dasharray:var(--l) 238.76}}
.rcg .h23 .lg{display:grid;gap:5px;font-size:8px;color:var(--g-mute,#6b7280)}.rcg .h23 .lg span{display:flex;align-items:center;gap:5px;white-space:nowrap}.rcg .h23 .lg i{width:6px;height:6px;border-radius:50%}.rcg .h23 .lg b{color:var(--g-ink,#111318);font-weight:700}
/* vertical bars */
.rcg .h23 .vbars{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;min-height:0;padding-top:4px}.rcg .h23 .vbar{display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}.rcg .h23 .vbar i{width:70%;max-width:26px;height:calc(var(--h)*100% - 14px);min-height:2px;background:var(--bc);border-radius:3px 3px 0 0;transform-origin:bottom;animation:rpGrow var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h23 .vbar small{font-size:6.5px;color:var(--g-mute,#6b7280);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes rpGrow{0%,32%{transform:scaleY(0)}36%,100%{transform:scaleY(1)}}
/* top customers */
.rcg .h23 .tc{display:grid;gap:2px}.rcg .h23 .tr{display:grid;grid-template-columns:14px minmax(0,1fr) 56px 54px;align-items:center;gap:6px;height:20px;font-size:8.5px}.rcg .h23 .tr i{width:14px;height:14px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:7px;font-weight:700;display:grid;place-items:center}.rcg .h23 .tr b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .h23 .tr strong{text-align:right;font-weight:700}
.rcg .h23 .mb{display:flex;align-items:center;gap:3px;font-size:7.5px;color:var(--g-mute,#6b7280)}.rcg .h23 .mb em{font-style:normal}.rcg .h23 .mb u{flex:1;height:4px;border-radius:2px;background:var(--g-hi,#f3f4f6);position:relative;overflow:hidden;text-decoration:none}.rcg .h23 .mb u::after{content:"";position:absolute;inset:0;width:calc(var(--w)*100%);background:var(--blue);border-radius:2px;transform-origin:left;animation:rpGrowX var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes rpGrowX{0%,32%{transform:scaleX(0)}37%,100%{transform:scaleX(1)}}
/* quote performance */
.rcg .h23 .qp{flex:none}.rcg .h23 .qk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rcg .h23 .qk>div{border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:6px 8px}.rcg .h23 .qk i{display:block;font-style:normal;font-size:7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-mute,#6b7280)}.rcg .h23 .qk b{display:block;font-size:12px;font-weight:700;margin-top:2px}.rcg .h23 .qk b.gr{color:var(--grn)}.rcg .h23 .qk b.rd{color:var(--red)}.rcg .h23 .qk small{display:block;font-size:7px;color:var(--g-mute,#6b7280);margin-top:1px}
/* payments */
.rcg .h23 .note{border:1px solid var(--g-line,#e6e8ed);border-radius:8px;padding:6px 10px;font-size:8px;color:var(--g-mute,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .h23 .note b{color:var(--g-ink,#111318)}
.rcg .h23 .tbl .hd{padding:0 0 5px;font-size:7px}.rcg .h23 .tbl .row{height:24px;padding:0;font-size:8.5px}.rcg .h23 .tbl .row>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.rcg .h23 .tbl .row.tot{font-weight:700;border-bottom:0}.rcg .h23 .tbl .amt{font-weight:600}.rcg .h23 .tbl .mu{color:var(--g-mute2,#9aa0ab)}
.rcg .h23 .tt .hd,.rcg .h23 .tt .row{grid-template-columns:minmax(0,1fr) 70px 90px 110px}.rcg .h23 .tt .row>:nth-child(2),.rcg .h23 .tt .hd>:nth-child(2),.rcg .h23 .tt .row>:nth-child(3),.rcg .h23 .tt .hd>:nth-child(3){text-align:right}
.rcg .h23 .sh{display:flex;align-items:center;gap:6px;justify-content:flex-end}.rcg .h23 .sh u{width:60px;height:4px;border-radius:2px;background:var(--g-hi,#f3f4f6);position:relative;overflow:hidden;text-decoration:none}.rcg .h23 .sh u::after{content:"";position:absolute;inset:0;width:calc(var(--w)*100%);min-width:2px;background:var(--blue);border-radius:2px;transform-origin:left;animation:rpGrowP var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h23 .sh small{font-size:7.5px;color:var(--g-mute,#6b7280);width:22px;text-align:right}
@keyframes rpGrowP{0%,54%{transform:scaleX(0)}59%,100%{transform:scaleX(1)}}
.rcg .h23 .bc .hd,.rcg .h23 .bc .row{grid-template-columns:minmax(0,1fr) 110px 110px 110px}.rcg .h23 .bc .row>:not(:first-child),.rcg .h23 .bc .hd>:not(:first-child){text-align:right}
/* services horizontal bars */
.rcg .h23 .sv .rcard:nth-child(2){flex:1}.rcg .h23 .hb{display:grid;gap:4px;flex:1;align-content:space-evenly}.rcg .h23 .hr{display:grid;grid-template-columns:110px minmax(0,1fr) 54px;align-items:center;gap:8px;font-size:8px}.rcg .h23 .hr small{color:var(--g-ink2,#3a3f4b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px}.rcg .h23 .hr u{height:12px;border-radius:3px;background:var(--bc);width:calc(var(--w)*100%);transform-origin:left;text-decoration:none;display:block;animation:rpGrowS var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h23 .hr em{font-style:normal;font-weight:600;text-align:right}
@keyframes rpGrowS{0%,72%{transform:scaleX(0)}77%,100%{transform:scaleX(1)}}
.rcg .h23 .xa{display:grid;grid-template-columns:110px minmax(0,1fr) 54px;margin-top:4px}.rcg .h23 .xa span{display:none}.rcg .h23 .xa::before{content:"";grid-column:1}.rcg .h23 .xa::after{content:"";grid-column:3}
/* range dropdown */
.rcg .h23 .pop.dd{right:56px;top:44px;width:110px;padding:4px;opacity:0;transform:translateY(-4px);animation:rpDd var(--t) ease-out infinite}.rcg .h23 .dd span{display:flex;align-items:center;height:21px;padding:0 8px;border-radius:5px;font-size:9px;font-weight:600;color:var(--g-ink2,#3a3f4b)}.rcg .h23 .dd .hv{animation:rpHv var(--t) step-end infinite}
@keyframes rpDd{0%,84.5%{opacity:0;transform:translateY(-4px)}85%,87.4%{opacity:1;transform:none}87.6%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes rpHv{0%,86.6%{background:transparent}86.61%,87.5%{background:var(--g-hi,#f3f4f6)}87.51%,100%{background:transparent}}
/* toasts */
.rcg .h23 .toast.tA{animation:rpTA var(--t) ease-out infinite}.rcg .h23 .toast.tB{animation:rpTB var(--t) ease-out infinite}
@keyframes rpTA{0%,16%{opacity:0;transform:translateY(8px)}17.2%,27%{opacity:1;transform:none}28.2%,100%{opacity:0;transform:translateY(4px)}}
@keyframes rpTB{0%,88.5%{opacity:0;transform:translateY(8px)}89.7%,97.5%{opacity:1;transform:none}98.7%,100%{opacity:0;transform:translateY(4px)}}
/* cursor */
.rcg .h23 .cur{animation:rpCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes rpCur{0%,12%{opacity:0;left:540px;top:300px}16%{opacity:1;left:460px;top:250px}26%{left:460px;top:250px}29%{left:118px;top:36px}29.5%{left:118px;top:36px;transform:scale(1)}29.9%{transform:scale(.8)}30.5%{transform:scale(1)}32%{left:118px;top:36px}36%{left:300px;top:260px}48%{left:300px;top:260px}51%{left:174px;top:36px}51.5%{left:174px;top:36px;transform:scale(1)}51.9%{transform:scale(.8)}52.5%{transform:scale(1)}54%{left:174px;top:36px}58%{left:420px;top:300px}66%{left:420px;top:300px}69%{left:224px;top:36px}69.5%{left:224px;top:36px;transform:scale(1)}69.9%{transform:scale(.8)}70.5%{transform:scale(1)}72%{left:224px;top:36px}76%{left:400px;top:230px}82%{left:400px;top:230px}84%{left:712px;top:36px}84.5%{left:712px;top:36px;transform:scale(1)}84.9%{transform:scale(.8)}85.5%{transform:scale(1)}86%{left:712px;top:36px}86.6%{left:700px;top:102px}87%{left:700px;top:102px;transform:scale(1)}87.4%{transform:scale(.8)}88%{transform:scale(1)}89%{left:700px;top:102px}92%{opacity:1;left:600px;top:260px}95%,100%{opacity:0;left:600px;top:260px}}