.page-header{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px;display:flex}.title-copy{flex-direction:column;display:flex}.page-header h1{font-size:var(--fs-title);letter-spacing:-.04em;color:#111827;font-weight:800;line-height:1.05}.top-controls{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fffffff2;border-radius:18px;align-items:flex-end;gap:10px;padding:12px;display:flex}.select-field{gap:6px;display:grid}.select-field label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}select{border:1px solid var(--border);width:104px;height:40px;color:var(--text);background:#fff;border-radius:10px;padding:0 12px;font-size:14px;font-weight:600;transition:border-color .16s,box-shadow .16s}select:focus{border-color:#5b61e673;outline:none;box-shadow:0 0 0 3px #5b61e61f}.top-controls button{color:#fff;cursor:pointer;background:#111827;border:0;border-radius:12px;min-width:42px;height:40px;padding:0 14px;font-size:13px;font-weight:700;transition:transform .15s,opacity .15s,background .15s}.top-controls button:hover{background:#1f2937;transform:translateY(-1px)}.kpi-content{grid-template-columns:minmax(0,1fr) 1px minmax(360px,520px);align-items:center;gap:22px;margin-top:18px;display:grid;overflow:hidden}.gauges{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.gauge-card{border:1px solid var(--border);background:var(--panel-soft);border-radius:18px;align-content:start;justify-items:center;padding:14px 10px 12px;display:grid}.gauge-visual{width:160px;height:96px;position:relative}.gauge-svg{width:160px;height:96px;display:block}.gauge-track,.gauge-progress{fill:none;stroke-width:18px;stroke-linecap:round}.gauge-track{stroke:#eceff4}.gauge-progress{stroke-dasharray:var(--gauge-value) 100;animation:.9s cubic-bezier(.2,.8,.2,1) both gaugeArc}.gauge-progress-green{stroke:var(--green)}.gauge-progress-red{stroke:var(--red)}.gauge-progress-blue{stroke:var(--blue)}.gauge-center{justify-items:center;display:grid;position:absolute;top:38px;left:0;right:0}.gauge-percent{color:var(--muted);font-size:11px;font-weight:700;line-height:1}.gauge-center strong{color:#111827;letter-spacing:-.04em;margin-top:2px;font-size:27px;font-weight:700;line-height:1}.gauge-scale{width:160px;color:var(--muted);justify-content:space-between;margin-top:-1px;font-size:10px;font-weight:700;display:flex}.gauge-card p{color:#4b5563;font-size:var(--fs-label);margin-top:6px;font-weight:700}.divider{background:var(--border);width:1px;height:84px}.stats-area{grid-template-columns:minmax(0,1fr) minmax(130px,170px);align-items:stretch;gap:18px;min-width:0;display:grid}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0;display:grid}.stat{border:1px solid var(--border);background:#fff;border-radius:16px;min-width:0;padding:12px 14px}.stats-grid .stat{min-height:74px}.stat span{color:var(--muted);font-size:var(--fs-label);font-weight:600;line-height:1.25;display:block}.stat strong{color:#111827;font-size:var(--fs-value);letter-spacing:-.03em;overflow-wrap:anywhere;margin-top:6px;font-weight:800;line-height:1;display:block}.total-revenue{min-width:0}.total-revenue .stat{min-height:162px;box-shadow:var(--shadow-md);background:linear-gradient(135deg,#1925ff 0%,#6d77f6 100%);border-color:#0000;align-content:center;width:100%;min-width:0;display:grid;overflow:hidden}.total-revenue .stat span{color:#ffffffd1}.total-revenue .stat strong{color:#fff;white-space:nowrap;font-size:clamp(34px,3vw,44px)}.stat-large strong{font-size:44px}.chart-grid{grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;display:grid}.chart-panel{padding:18px 18px 14px}.chart-wrap{margin-top:12px}svg{width:100%;height:auto;display:block;overflow:visible}.grid-line{stroke:var(--grid);stroke-width:1px}.axis-text{fill:#8a93a1;font-size:var(--fs-xsm);font-weight:700}.month-label{font-size:9px}.area{opacity:0;animation:.7s .3s forwards areaIn}.area-green{fill:var(--green-soft)}.area-red{fill:var(--red-soft)}.area-blue{fill:var(--blue-soft)}.area-amber{fill:var(--amber-soft)}.line{fill:none;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:1.1s forwards drawLine}.line-green{stroke:#29a354}.line-red{stroke:#ef5a4b}.line-blue{stroke:var(--blue)}.line-amber{stroke:var(--amber)}.point-group{opacity:0;animation:.35s forwards pointIn;animation-delay:calc(.5s + var(--delay))}.point{stroke:#fff;stroke-width:2px}.point-green{fill:#29a354}.point-red{fill:#ef5a4b}.point-blue{fill:var(--blue)}.point-amber{fill:var(--amber)}.value-label{font-size:8.5px;font-weight:800}.value-green{fill:#228444}.value-red{fill:#e04a3a}.value-blue{fill:#4350d8}.value-amber{fill:#da8d0b}.legend{color:var(--muted);justify-content:center;gap:22px;margin-top:8px;font-size:12px;font-weight:700;display:flex}.legend span{align-items:center;gap:7px;display:inline-flex}.dot{border-radius:50%;width:8px;height:8px;display:inline-block}.dot-green{background:#29a354}.dot-red{background:#ef5a4b}.dot-blue{background:var(--blue)}.dot-amber{background:var(--amber)}.wide-chart{padding:18px 18px 16px}.wide-chart .line{stroke-width:3px}.wide-chart .value-label{font-size:8.5px}.wide-chart .axis-text{font-size:var(--fs-xsm)}.wide-chart .month-label{font-size:9px}:root{--bg:#f6f7fb;--panel:#fff;--panel-soft:#fbfcff;--text:#111827;--muted:#6b7280;--muted-2:#9ca3af;--border:#e5e7eb;--grid:#eceff3;--green:#22c55e;--green-soft:#22c55e1f;--red:#ef4444;--red-soft:#ef44441f;--blue:#5b61e6;--blue-strong:#4f46e5;--blue-soft:#5b61e624;--amber:#f59e0b;--amber-soft:#f59e0b24;--shadow-sm:0 4px 14px #1118270a;--shadow-md:0 10px 28px #1118270f;--radius-xl:24px;--radius-lg:20px;--radius-md:16px;--radius-sm:12px;--fs-title:34px;--fs-section:16px;--fs-label:12px;--fs-value:16px;--fs-value-lg:36px;--fs-sm:12px;--fs-xsm:8px}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,select{font:inherit}h1,h2,p{margin:0}.dashboard{width:min(1240px,100% - 48px);margin:0 auto;padding:30px 0 40px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.kpi-panel,.chart-panel,.wide-chart{overflow:hidden}.kpi-panel{margin-bottom:18px;padding:18px 18px 20px}.kpi-panel h2,.chart-panel h2,.wide-chart h2{font-size:var(--fs-section);letter-spacing:-.02em;color:#111827;font-weight:700}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes areaIn{to{opacity:1}}@keyframes pointIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes gaugeArc{0%{stroke-dasharray:0 100}to{stroke-dasharray:var(--gauge-value) 100}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}@media (width<=1180px){.dashboard{width:min(100% - 32px,1240px)}.kpi-content{grid-template-columns:1fr;gap:18px}.divider{display:none}.stats-area{grid-template-columns:1fr}.total-revenue .stat{min-height:auto}.stat-large strong{font-size:38px}}@media (width<=980px){.page-header{flex-direction:column;align-items:stretch;gap:18px}.top-controls{grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;width:100%;display:grid}.select-field{min-width:0}select{width:100%}.top-controls button{width:100%;padding:0 10px}.chart-grid{grid-template-columns:1fr}}@media (width<=820px){.dashboard{width:min(100% - 24px,1240px);padding-top:22px}.page-header h1{font-size:30px}.gauges{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gauge-card{padding:12px 6px 10px}.gauge-visual,.gauge-svg{width:130px;height:80px}.gauge-visual{transform-origin:top;margin-bottom:-8px;transform:scale(.92)}.gauge-center{top:32px}.gauge-center strong{font-size:24px}.gauge-scale{width:122px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat{padding:11px 12px}.stat strong{font-size:20px}.total-revenue .stat{min-height:96px}.stat-large strong{font-size:34px}}@media (width<=700px){.top-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.select-field{grid-column:span 2}.gauges{grid-template-columns:repeat(2,minmax(0,1fr))}.gauge-card:last-child{grid-column:1/-1;justify-self:center;width:min(100%,260px)}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-panel,.chart-panel,.wide-chart{padding:16px 14px}.chart-wrap{padding-bottom:4px;overflow:auto hidden}.chart-wrap svg{min-width:620px}.wide-chart .chart-wrap svg{min-width:760px}.legend{flex-wrap:wrap;gap:14px}}@media (width<=560px){.dashboard{width:min(100% - 18px,1240px);padding-top:18px}.page-header h1{font-size:28px}.top-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}.select-field{grid-column:span 3}.top-controls button{min-width:0;height:38px;font-size:12px}.kpi-content{margin-top:14px}.gauges{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gauge-card{min-width:0}.gauge-card:last-child{grid-column:span 2}.gauge-visual{margin-bottom:-14px;transform:scale(.82)}.gauge-card p{text-align:center;font-size:11px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat{min-width:0;padding:10px}.stat span{font-size:11px}.stat strong{overflow-wrap:anywhere;font-size:18px}.total-revenue .stat{min-height:90px}.stat-large strong{font-size:30px}.chart-panel h2,.wide-chart h2,.kpi-panel h2{font-size:15px}}@media (width<=420px){.page-header h1{font-size:25px}.top-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.select-field{grid-column:span 1}.top-controls button{min-width:0}.top-controls button:last-child{grid-column:1/-1}.gauges{grid-template-columns:1fr}.gauge-card:last-child{grid-column:auto;width:100%}.gauge-visual{margin-bottom:-8px;transform:scale(.9)}.stats-grid{grid-template-columns:1fr}.stat{justify-content:space-between;align-items:center;gap:12px;display:flex}.stat span{max-width:52%}.stat strong{text-align:right;margin-top:0}.total-revenue .stat{display:block}.total-revenue .stat strong{text-align:left;margin-top:6px}.chart-wrap svg{min-width:560px}.wide-chart .chart-wrap svg{min-width:680px}}