:root{
  --bg:#02091a;
  --bg-top:#061946;
  --panel:#06152d;
  --line:#14509a;
  --blue:#148dff;
  --blue-soft:#20a9ff;
  --orange:#ff6a00;
  --text:#f6f8ff;
  --muted:#b7c2d8;
  --green:#8bd63d;
  --danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--text)}
body{overflow:hidden;font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.stage{width:100vw;height:100vh;display:grid;grid-template-rows:28vh .45vh 1fr 6.5vh;background:radial-gradient(circle at 50% -12%,rgba(19,60,137,.34),transparent 35%),linear-gradient(180deg,var(--bg-top) 0 28%,var(--bg) 28% 100%)}
.header{display:grid;grid-template-columns:1fr 1.7fr 1fr;align-items:center;padding:2.2vh 3vw 1vh}
.period,.eyebrow,.live-label,.footer{font-family:Consolas,"Courier New",monospace;font-weight:700;letter-spacing:.15em}
.period{font-size:clamp(17px,1.45vw,28px)}
.brand{text-align:center;align-self:center}
.eyebrow{font-size:clamp(14px,1.15vw,22px);letter-spacing:.34em;margin-bottom:.6vh}
.brand-logo{display:block;width:clamp(260px,28vw,520px);height:auto;object-fit:contain;margin:0 auto .5vh;background:transparent}
.subtitle{font-size:clamp(16px,1.28vw,24px);font-weight:500;color:#f5f6fa}
.live-box{text-align:right;align-self:center}
.live-label{font-size:clamp(18px,1.5vw,29px);color:var(--green);display:flex;justify-content:flex-end;align-items:center;gap:.65vw}
.live-dot{display:inline-block;width:clamp(12px,.9vw,18px);height:clamp(12px,.9vw,18px);border-radius:50%;background:var(--green);box-shadow:0 0 18px rgba(139,214,61,.85)}
.live-box strong{display:block;margin-top:.9vh;font-size:clamp(24px,2vw,39px);font-weight:500;letter-spacing:.06em}
.accent-line{background:linear-gradient(90deg,var(--blue),#7d7bf4 50%,var(--orange))}
.cards{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1.5vw;padding:4.2vh 2.3vw 2.3vh}
.card{min-width:0;display:grid;grid-template-columns:43% 57%;align-items:center;padding:3.8vh 1.8vw 3vh;border:1px solid rgba(36,122,219,.72);border-radius:26px;background:linear-gradient(145deg,rgba(7,26,58,.99),rgba(2,10,27,.99));box-shadow:inset 0 0 32px rgba(22,88,160,.08),0 16px 46px rgba(0,0,0,.28)}
.metric-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:.2vw}
.metric-title{display:flex;align-items:center;gap:1.2vw;font-size:clamp(24px,2.1vw,40px);font-weight:800;letter-spacing:.05em}
.metric-icon{width:clamp(48px,4.2vw,78px);height:clamp(48px,4.2vw,78px);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:800;font-size:clamp(30px,2.4vw,46px);background:linear-gradient(145deg,#126fe8,#159eff);box-shadow:0 0 20px rgba(20,141,255,.45)}
.chart-icon{background:linear-gradient(145deg,#ff8f00,#ff5a00);font-family:Arial,sans-serif}
.sales .metric-title,.sales .primary,.sales .gauge-number{color:var(--blue)}
.billing .metric-title,.billing .primary,.billing .gauge-number{color:var(--orange)}
.metric-block{margin-top:3.5vh}
.metric-label{font-size:clamp(17px,1.35vw,26px);color:var(--muted);font-weight:700;letter-spacing:.02em}
.metric-money{margin-top:1.1vh;line-height:1;white-space:nowrap;font-weight:800}
.metric-money.primary{font-size:clamp(38px,3.55vw,69px)}
.metric-money.realized{font-size:clamp(35px,3vw,58px);color:#fff}
.separator{width:83%;height:1px;margin-top:3.2vh;background:linear-gradient(90deg,rgba(35,130,240,.9),rgba(35,130,240,.22))}
.billing .separator{background:linear-gradient(90deg,rgba(255,106,0,.9),rgba(255,106,0,.22))}
.gauge-wrap{position:relative;width:min(31vw,54vh);height:min(26.5vw,46vh);justify-self:center;align-self:center}
.gauge-wrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}
.track,.arc{fill:none;stroke-width:17;stroke-linecap:round}
.track{stroke:#183763}
.arc{transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1)}
.sales .arc{stroke:var(--blue);filter:drop-shadow(0 0 10px rgba(20,141,255,.85))}
.billing .arc{stroke:var(--orange);filter:drop-shadow(0 0 10px rgba(255,106,0,.82))}
.ticks line{stroke:#365f9b;stroke-width:3;stroke-linecap:round}
.sales .ticks line{stroke:#1777d7}.billing .ticks line{stroke:#c65a08}
.zero,.hundred{position:absolute;bottom:14%;font-size:clamp(16px,1.35vw,26px);font-weight:800;color:#fff}.zero{left:7%}.hundred{right:5%}
.gauge-number{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);font-size:clamp(45px,4.3vw,82px);font-weight:850;line-height:1;white-space:nowrap}
.gauge-caption{position:absolute;left:50%;top:85%;transform:translateX(-50%);white-space:nowrap;color:var(--muted);font-size:clamp(14px,1.2vw,23px);font-weight:600}
.footer{display:flex;align-items:center;justify-content:space-between;padding:0 3vw;color:#c4cedf;font-size:clamp(11px,.9vw,17px);letter-spacing:.03em;border-top:1px solid rgba(30,91,166,.3)}
.footer b{color:var(--blue)}
.footer .error{color:var(--danger)}
@media(max-aspect-ratio:4/3){body{overflow:auto}.stage{height:auto;min-height:100vh;grid-template-rows:auto auto auto auto}.header{grid-template-columns:1fr;gap:12px}.period,.live-box{text-align:center}.live-label{justify-content:center}.cards{grid-template-columns:1fr}.card{grid-template-columns:1fr 1fr}.footer{flex-direction:column;gap:8px;padding:16px;text-align:center}}