/* G4-KPI3: layout variants share the same figures and markup; only local palette/layout variables vary. */
.kpi3-shell{--k3-paper:var(--panel);--k3-ink:var(--text);--k3-sub:var(--muted);--k3-line:var(--line);--k3-soft:var(--panel2);--k3-accent:var(--accent);--k3-gap:14px;color:var(--k3-ink);display:grid;gap:var(--k3-gap);min-width:0;margin-bottom:22px}
.kpi3-shell[data-style="dark"]{--k3-paper:var(--desk-dock-bg);--k3-ink:var(--desk-dock-ink);--k3-sub:color-mix(in srgb,var(--desk-dock-ink) 78%,transparent);--k3-line:color-mix(in srgb,var(--desk-dock-ink) 22%,transparent);--k3-soft:color-mix(in srgb,var(--desk-dock-bg) 90%,var(--desk-dock-ink));--k3-accent:var(--amber);padding:18px;border:1px solid var(--k3-line);border-radius:20px;background:var(--desk-dock-bg)}
.kpi3-shell[data-style="command"]{--k3-gap:10px}
body #page-dashboard[data-kpi3-ready="true"]>.hero,body.v72-workspace #page-dashboard[data-kpi3-ready="true"]>#kpis{display:none!important}
.kpi3-context{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:15px 18px;border:1px solid var(--k3-line);border-radius:16px;background:var(--k3-paper)}
.kpi3-context-copy{flex:1 1 250px;min-width:0}.kpi3-context-copy small{font-size:11px;color:var(--k3-sub);letter-spacing:0}.kpi3-context h1{font-size:20px;line-height:1.55;margin:4px 0;overflow-wrap:anywhere}.kpi3-truth{font-size:11px;color:var(--k3-sub)}
.kpi3-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}.kpi3-tools button,.kpi3-home-controls button{font:inherit;font-size:11px;border:1px solid var(--k3-line,var(--line));background:var(--k3-paper,var(--panel));color:var(--k3-ink,var(--text));padding:7px 10px;border-radius:8px;min-height:36px}
.kpi3-compare{display:flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:100%;padding:4px;border-radius:10px;background:var(--k3-soft,var(--panel2));font-size:11px}
.kpi3-compare>span{padding-inline:4px;color:var(--k3-sub,var(--muted))}.kpi3-compare button{border-color:transparent;background:transparent}.kpi3-compare button[aria-pressed="true"]{color:var(--k3-accent,var(--accent));border-color:var(--k3-accent,var(--accent));background:var(--k3-paper,var(--panel))}.kpi3-compare button:disabled{opacity:.5;cursor:not-allowed}
.kpi3-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.kpi3-card{min-width:0;border:1px solid var(--k3-line);border-radius:14px;background:var(--k3-paper);overflow:clip}
.kpi3-pick{display:flex;align-items:stretch;flex-direction:column;gap:7px;text-align:start;width:100%;padding:14px 12px 8px;border:0;border-radius:0;background:transparent;color:var(--k3-ink);font:inherit;cursor:pointer}
.kpi3-label{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;color:var(--k3-sub);font-size:12px}.kpi3-value{font-size:26px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}.kpi3-delta{font-size:11px;min-height:18px}.kpi3-sub{font-size:10px;line-height:1.7;color:var(--k3-sub,var(--muted));display:block;overflow-wrap:anywhere}
.kpi3-badge{display:inline-flex;align-items:center;gap:3px;border:1px solid currentColor;border-radius:999px;font-size:9px;padding:2px 6px;white-space:nowrap;font-weight:500}.kpi3-good{color:var(--green)}.kpi3-bad{color:var(--red)}.kpi3-watch{color:var(--amber)}
.kpi3-spark{display:block;width:100%;height:32px;overflow:visible;direction:ltr;color:var(--k3-accent,var(--accent))}.kpi3-spark polyline{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.kpi3-spark circle{fill:currentColor}
.kpi3-selected{border-color:var(--k3-accent);box-shadow:inset 0 3px var(--k3-accent)}.kpi3-pick:hover{background:var(--k3-soft)}.kpi3-explain{font:inherit;display:block;text-align:start;font-size:10px;border:0;border-top:1px solid var(--k3-line);background:transparent;color:var(--k3-sub);width:100%;border-radius:0;padding:7px 12px}
.kpi3-note{font-size:10px;line-height:1.7;color:var(--k3-sub,var(--muted));margin:5px 0}.kpi3-style-menu{position:relative;z-index:5;max-width:100%}.kpi3-style-menu>summary{font-size:11px;border:1px solid var(--k3-line);border-radius:8px;cursor:pointer;padding:8px 10px;min-height:36px;color:var(--k3-ink);background:var(--k3-paper);list-style:none}
.kpi3-style-pop{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;width:330px;max-width:calc(100vw - 40px);padding:14px;border:1px solid var(--k3-line);border-radius:14px;background:var(--k3-paper);box-shadow:var(--shadow);color:var(--k3-ink)}
.kpi3-style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px}.kpi3-style-options>button{display:grid;gap:7px;font-size:10px;padding:7px}.kpi3-style-options button[aria-pressed="true"]{border-color:var(--k3-accent)}.kpi3-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;height:52px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.kpi3-preview i{background:color-mix(in srgb,var(--accent) 20%,var(--panel));border-radius:2px}.kpi3-preview b{grid-column:1/-1;background:color-mix(in srgb,var(--accent) 50%,var(--panel));border-radius:2px}.kpi3-preview-command{grid-template-columns:repeat(4,1fr);gap:2px}.kpi3-preview-command b{grid-column:span 2}.kpi3-preview-dark{background:var(--desk-dock-bg);border-color:var(--desk-dock-ink)}.kpi3-preview-dark i{background:color-mix(in srgb,var(--desk-dock-ink) 40%,var(--desk-dock-bg))}.kpi3-preview-dark b{background:var(--amber)}
.kpi3-fallback{padding:18px;background:var(--k3-paper);border:1px solid var(--k3-line);border-radius:16px}.kpi3-fallback header{display:flex;justify-content:space-between;align-items:center;gap:10px}.kpi3-fallback h2{font-size:17px;margin:0}.kpi3-fallback header>span{font-size:18px}.kpi3-fallback>.kpi3-spark{height:150px;margin-block:18px}.kpi3-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));font-size:10px;text-align:center;gap:4px;color:var(--k3-sub)}.kpi3-fallback summary{font-size:12px;cursor:pointer}.kpi3-history{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0;font-size:11px}.kpi3-history dt{color:var(--k3-sub)}.kpi3-history dd{margin:3px 0}
.kpi3-explanation{border:1px solid var(--line);border-radius:10px;padding:12px;margin-block:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.kpi3-explanation p{font-size:12px;margin:0;flex-basis:100%}.kpi3-explanation small{font-size:11px;color:var(--muted);letter-spacing:0}.kpi3-home-controls{margin-block:8px}.cc-kpi>.kpi3-badge{align-self:flex-start}
.kpi3-shell[data-style="command"] .kpi3-context{padding:10px 14px}.kpi3-shell[data-style="command"] .kpi3-pick{padding:10px 10px 6px;gap:4px}.kpi3-shell[data-style="command"] .kpi3-value{font-size:24px}.kpi3-shell[data-style="command"] .kpi3-card{border-radius:8px}.kpi3-shell[data-style="command"] .kpi3-fallback{padding:14px}
.kpi3-shell[data-style="dark"] .kpi3-context{border-top:2px solid var(--amber)}.kpi3-shell[data-style="dark"] .kpi3-label{color:var(--k3-ink)}.kpi3-shell[data-style="dark"] .kpi3-card{background:var(--k3-soft)}.kpi3-shell[data-style="dark"] .kpi3-selected{border-color:var(--amber)}
.kpi3-shell :focus-visible,.kpi3-home-controls :focus-visible{outline:3px solid var(--k3-accent,var(--accent));outline-offset:3px}
#kpi3Dashboard .kpi3-pick,#kpi3Dashboard .kpi3-explain{background:transparent;color:var(--k3-ink)}
#kpi3Dashboard .kpi3-pick:hover{background:var(--k3-soft)}
#kpi3Dashboard .kpi3-tools button{background:var(--k3-paper);color:var(--k3-ink)}
#kpi3Dashboard .kpi3-compare button[aria-pressed="true"]{color:var(--k3-accent);border-color:var(--k3-accent)}
#kpi3Dashboard[data-style="dark"]{--k3-accent:color-mix(in srgb,var(--amber) 65%,var(--desk-dock-ink))}
#kpi3Dashboard[data-style="dark"] .kpi3-selected{border-color:var(--k3-accent)}
#kpi3Dashboard[data-style="dark"] .kpi3-badge,#kpi3Dashboard[data-style="dark"] .kpi3-delta{background:var(--desk-dock-ink);border-radius:6px;padding:2px 5px;align-self:flex-start}
#kpi3Dashboard[data-style="dark"] .kpi3-context-copy small{color:var(--k3-sub)}
@media(max-width:1100px){.kpi3-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){body:has(#page-dashboard.active #kpi3Dashboard) #app main{margin-inline:0!important;width:auto!important}.kpi3-cards{grid-template-columns:minmax(0,1fr)}.kpi3-context{padding:14px}.kpi3-context h1{font-size:18px}.kpi3-tools{width:100%;gap:7px}.kpi3-style-menu{position:static}.kpi3-context{position:relative}.kpi3-style-pop{inset-inline:10px;inset-block-start:100%;width:auto}.kpi3-pick{padding:14px}.kpi3-label{flex-wrap:nowrap}.kpi3-sub{font-size:11px}.kpi3-shell[data-style="dark"]{padding:10px}.kpi3-fallback{padding:13px}.kpi3-fallback header{align-items:flex-start;flex-direction:column}.kpi3-months{font-size:8px;gap:1px}.kpi3-history{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi3-compare button,.kpi3-tools button,.kpi3-style-menu>summary{min-height:42px}}
@media(prefers-reduced-motion:reduce){.kpi3-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){#kpi3Dashboard .kpi3-context{flex-direction:row;align-items:flex-start}#kpi3Dashboard .kpi3-context-copy{flex:1 1 auto;width:100%}}