.visual-overview { margin-top: 18px; }
.visual-overview-head, .section-visual-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.visual-overview-head h3, .section-visual-head h3, .section-visual-head h4 { margin:2px 0 0; }
.visual-overview-head p:not(.eyebrow) { margin:4px 0 0; color:var(--muted); font-size:12px; }
.visual-period { padding:6px 10px; border:1px solid rgba(40,96,83,.15); border-radius:999px; color:var(--muted); font-size:10px; background:rgba(255,255,255,.55); }
.visual-kpi-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid rgba(40,96,83,.12); border-radius:18px 18px 7px 18px; background:rgba(40,96,83,.12); box-shadow:0 14px 34px rgba(49,63,50,.06); }
.visual-kpi-strip > div { padding:13px 15px; background:rgba(255,255,255,.88); min-width:0; }
.visual-kpi-strip span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.visual-kpi-strip strong { display:block; margin-top:4px; font-size:18px; font-variant-numeric:tabular-nums; }
.visual-kpi-strip .is-good strong { color:#25715b; }
.visual-kpi-strip .is-bad strong { color:#aa4e42; }
.visual-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr); gap:12px; margin-top:12px; }
.visual-card, .visual-section-card { border:1px solid rgba(40,96,83,.12); background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,244,235,.83)); box-shadow:0 18px 42px rgba(50,65,52,.07); }
.visual-card { padding:16px; border-radius:22px 22px 8px 22px; min-width:0; }
.visual-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.visual-card header span, .section-visual-head .eyebrow { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.visual-card h4 { margin:2px 0 0; font-size:15px; }
.visual-card header > strong, .section-visual-head > strong { color:var(--brand); font-size:13px; }
.visual-legend { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; }
.visual-legend i { width:7px; height:7px; border-radius:50%; }
.legend-income { background:#2d8c72; }.legend-expense { background:#d28a5e; }
.visual-columns { display:grid; grid-template-columns:repeat(6,minmax(38px,1fr)); gap:8px; height:190px; align-items:end; }
.visual-column { display:grid; grid-template-rows:132px auto auto; gap:4px; min-width:0; text-align:center; }
.visual-column-bars { display:flex; align-items:flex-end; justify-content:center; gap:4px; height:132px; padding:0 4px; border-bottom:1px solid rgba(40,96,83,.12); background:repeating-linear-gradient(to top,transparent 0,transparent 32px,rgba(40,96,83,.055) 33px); }
.visual-column-bars i { width:min(15px,42%); min-height:0; border-radius:6px 6px 2px 2px; transform-origin:bottom; animation:visual-grow .62s cubic-bezier(.2,.8,.2,1) both; }
.visual-income { background:linear-gradient(#54ad8f,#25715b); }.visual-expense { background:linear-gradient(#e7ad7f,#c97956); }
.visual-column > strong { overflow:hidden; text-overflow:ellipsis; font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.visual-column > span { color:var(--muted); font-size:9px; text-transform:capitalize; }
.is-bad { color:#aa4e42!important; }
.stock-donut-wrap { display:flex; align-items:center; justify-content:center; gap:18px; min-height:136px; }
.stock-donut { --stock-ok:0%;--stock-low:0%; width:112px; aspect-ratio:1; flex:0 0 auto; display:grid; place-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle at center,#fbfaf5 0 54%,transparent 55%),conic-gradient(#2d8c72 0 var(--stock-ok),#e0b54f var(--stock-ok) var(--stock-low),#c85f52 var(--stock-low) 100%); box-shadow:inset 0 0 0 1px rgba(40,96,83,.07),0 10px 26px rgba(48,77,62,.1); }
.stock-donut b { font-size:23px; line-height:1; }.stock-donut small { margin-top:4px; color:var(--muted); font-size:9px; }
.stock-donut-legend { display:grid; gap:8px; font-size:10px; }.stock-donut-legend span { display:flex; align-items:center; gap:7px; }.stock-donut-legend i { width:8px;height:8px;border-radius:50%; }
.dot-ok{background:#2d8c72}.dot-low{background:#e0b54f}.dot-zero{background:#c85f52}
.visual-risk-list, .visual-category-list { display:grid; gap:5px; margin-top:10px; }
.visual-risk-list span, .visual-category-list span { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid rgba(40,96,83,.08); font-size:10px; }
.visual-risk-list small, .visual-category-list small { color:var(--muted); }
.visual-empty { color:var(--muted); font-size:11px; }
.work-heatmap { display:grid; grid-template-columns:repeat(14,1fr); gap:4px; }
.work-heatmap i { display:grid; place-items:center; aspect-ratio:1; border-radius:5px 5px 2px 5px; background:#e9e7df; transition:transform .2s ease,filter .2s ease; }
.work-heatmap i:hover { transform:translateY(-2px); filter:saturate(1.15); }
.work-heatmap small { color:rgba(30,46,37,.72); font-size:7px; font-style:normal; }
.work-heatmap .heat-1{background:#c9e2d6}.work-heatmap .heat-2{background:#8dc7ae}.work-heatmap .heat-3{background:#4b9d7f}.work-heatmap .heat-4{background:#226850}.work-heatmap .heat-3 small,.work-heatmap .heat-4 small{color:white}
.visual-work-card > p { margin:9px 0 0; color:var(--muted); font-size:10px; }
.visual-horizontal-bars { display:grid; gap:9px; }
.visual-horizontal-bars > div { display:grid; grid-template-columns:minmax(90px,1.1fr) minmax(80px,1.5fr) auto; align-items:center; gap:9px; }
.visual-horizontal-bars span { min-width:0; }.visual-horizontal-bars span b,.visual-horizontal-bars span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.visual-horizontal-bars span b { font-size:10px; }.visual-horizontal-bars span small { color:var(--muted); font-size:9px; }
.visual-horizontal-bars > div > i,.section-status-bars i,.work-category-bars i { height:7px; overflow:hidden; border-radius:999px; background:rgba(40,96,83,.09); }
.visual-horizontal-bars em,.section-status-bars em,.work-category-bars em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#67b99a,#27745d); animation:visual-width .62s cubic-bezier(.2,.8,.2,1) both; }
.visual-horizontal-bars > div > strong { font-size:10px; font-variant-numeric:tabular-nums; }
.visual-section-card { margin-bottom:12px; padding:16px; border-radius:20px 20px 8px 20px; }
.section-visual-head > span { color:var(--muted); font-size:10px; }
.section-visual-grid { display:grid; grid-template-columns:auto minmax(180px,.7fr) minmax(240px,1.3fr); align-items:center; gap:24px; }
.section-status-bars,.work-category-bars { display:grid; gap:10px; }.section-status-bars > div,.work-category-bars > div { display:grid; gap:5px; }.section-status-bars span,.work-category-bars span { display:flex; justify-content:space-between; font-size:10px; }
.section-status-bars .status-ok{background:#2d8c72}.section-status-bars .status-low{background:#e0b54f}.section-status-bars .status-zero{background:#c85f52}
.section-risk-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.section-risk-list span { padding:9px 10px; border-radius:11px; background:rgba(224,181,79,.11); border-left:3px solid #e0b54f; }.section-risk-list span.zero { background:rgba(200,95,82,.09); border-left-color:#c85f52; }.section-risk-list span.ok { background:rgba(45,140,114,.09); border-left-color:#2d8c72; }.section-risk-list b,.section-risk-list small{display:block}.section-risk-list b{font-size:10px}.section-risk-list small{margin-top:2px;color:var(--muted);font-size:9px}
.work-insight-layout,.sales-insight-layout { display:grid; grid-template-columns:minmax(300px,1fr) minmax(280px,1fr); gap:22px; align-items:center; }.work-heatmap.is-large { gap:6px; }.work-heatmap.is-large i { border-radius:7px 7px 2px 7px; }.work-category-bars > div { grid-template-columns:92px 1fr 65px; align-items:center; }.work-category-bars span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.work-category-bars strong { font-size:9px; text-align:right; }.work-insight-layout p{font-size:9px;margin:7px 0 0}
.sales-mini-columns { display:grid; grid-template-columns:repeat(6,1fr); align-items:end; gap:7px; height:120px; }.sales-mini-columns > div { display:grid; grid-template-rows:78px auto auto; gap:2px; text-align:center; }.sales-mini-columns i { display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid rgba(40,96,83,.1); }.sales-mini-columns em { display:block; width:55%; border-radius:7px 7px 2px 2px; background:linear-gradient(#79c2a6,#2b7b61); animation:visual-grow .62s cubic-bezier(.2,.8,.2,1) both; }.sales-mini-columns strong{font-size:10px}.sales-mini-columns span{font-size:8px;color:var(--muted);text-transform:capitalize}.visual-horizontal-bars.compact{gap:7px}
@keyframes visual-grow { from { transform:scaleY(.05); opacity:.3 } to { transform:scaleY(1); opacity:1 } }
@keyframes visual-width { from { transform:scaleX(.05); transform-origin:left; opacity:.35 } to { transform:scaleX(1); transform-origin:left; opacity:1 } }
@media (max-width:900px){.visual-dashboard-grid{grid-template-columns:1fr}.visual-kpi-strip{grid-template-columns:repeat(2,1fr)}.section-visual-grid{grid-template-columns:auto 1fr}.section-risk-list{grid-column:1/-1}.work-insight-layout,.sales-insight-layout{grid-template-columns:1fr}}
@media (max-width:620px){.visual-overview-head,.section-visual-head{align-items:flex-start}.visual-period{display:none}.visual-kpi-strip{grid-template-columns:1fr 1fr}.visual-kpi-strip>div{padding:10px}.visual-kpi-strip strong{font-size:15px}.visual-card{padding:13px}.visual-columns{gap:3px;height:165px}.visual-column{grid-template-rows:110px auto auto}.visual-column-bars{height:110px;padding:0}.visual-column>strong{font-size:8px}.stock-donut-wrap{justify-content:flex-start}.section-visual-grid{grid-template-columns:1fr}.section-visual-grid .stock-donut{margin:auto}.section-risk-list{grid-template-columns:1fr}.work-heatmap{gap:2px}.work-heatmap small{font-size:6px}.visual-horizontal-bars>div{grid-template-columns:minmax(78px,1fr) 1fr auto}.sales-insight-layout{gap:14px}}
@media (prefers-reduced-motion:reduce){.visual-column-bars i,.visual-horizontal-bars em,.section-status-bars em,.work-category-bars em,.sales-mini-columns em{animation:none}}