/* KPI panels (v1.6.5), ported from the approved mock. Reuses --j-* tokens from j-theme.css */
.kpi{margin:0 0 var(--j-gap);font-family:var(--j-font);color:var(--j-tx)}
.kpi *{box-sizing:border-box}
.kpi h2{margin:0;font-size:28px;line-height:1.1}
.kpi .kpi-sub{font-size:16px;color:var(--j-mu);margin:4px 0 0;line-height:1.4}
.kpi .kpi-lab{font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--j-mu);font-weight:700}
.kpi .kpi-big{font-family:var(--j-serif);font-weight:700;font-size:72px;line-height:1;color:var(--j-gold);margin:6px 0 0}
.kpi .kpi-big small{display:block;font-family:var(--j-font);font-size:20px;font-weight:700;color:var(--j-tx);margin-top:6px}
.kpi .kpi-big.plain small{display:inline;margin:0 0 0 6px}
.kpi .kpi-big.plain{color:var(--j-tx)}
.kpi .kpi-gold{color:var(--j-gold)}
.kpi .kpi-done{font-size:18px;font-weight:700;color:var(--j-tx);margin:8px 0 0;line-height:1.35}
.kpi .kpi-note{font-size:15px;color:var(--j-mu);line-height:1.4;margin:0}
.kpi .kpi-pan{background:var(--j-card);border-radius:var(--j-radius);padding:22px 26px}
.kpi .kpi-pill{display:inline-block;font-size:15px;font-weight:700;padding:6px 14px;border-radius:999px;line-height:1.3}
.kpi .kpi-pill.warn{background:var(--j-warn-bg);color:var(--j-warn-tx)}
.kpi .kpi-pill.ok{background:var(--j-ok-bg);color:var(--j-ok-tx)}
.kpi .kpi-bar{height:14px;border-radius:999px;background:var(--j-bar);overflow:hidden}
.kpi .kpi-bar i{display:block;height:100%;background:var(--j-gold);border-radius:999px}
.kpi .kpi-btn{font-family:var(--j-font);font-size:16px;font-weight:700;min-height:48px;padding:10px 20px;border-radius:14px;border:0;background:var(--j-gold);color:var(--j-bg);cursor:pointer}
.kpi .kpi-btn.quiet{background:var(--j-bg);color:var(--j-tx)}
.kpi .kpi-foot{font-size:15px;color:var(--j-mu);margin:12px 0 0;line-height:1.4}
/* B */
.kpi-b .kpi-pan+.kpi-pan{margin-top:var(--j-gap)}
.kpi-b-main{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;margin-top:16px}
.kpi-ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px}
.kpi-step{min-width:0}
.kpi-step .kpi-bar{height:12px;border-radius:6px}
.kpi-step .kpi-bar i{border-radius:6px}
.kpi-step{display:flex;flex-direction:column}
.kpi-step .kpi-bar{order:0}
.kpi-step b{order:1;display:block;font-size:15px;line-height:1.25;margin-top:8px;font-weight:700;min-height:2.5em}
.kpi-step small{order:2}
.kpi-step .kpi-tag{order:3;white-space:nowrap;align-self:flex-start;padding:3px 6px;font-size:15px}
.kpi-step small{display:block;font-size:15px;color:var(--j-mu);line-height:1.3}
.kpi-step.target b,.kpi-step.target small{color:var(--j-gold)}
.kpi-step.target .kpi-bar{outline:2px solid var(--j-gold);outline-offset:2px}
.kpi-tag{display:inline-block;margin-top:6px;font-size:15px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--j-gold);color:var(--j-bg)}
.kpi-tag.you{background:var(--j-bg);color:var(--j-tx);border:1px solid var(--j-gold)}
.kpi-cases{list-style:none;margin:10px 0 14px;padding:0}
.kpi-cases li{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:10px 0;border-top:1px solid var(--j-grid)}
.kpi-cases li:first-child{border-top:0}
.kpi-cases strong{font-size:16px}
.kpi-cases em{font-style:normal;font-size:16px;font-weight:700;color:var(--j-gold)}
.kpi-cases span{font-size:15px;color:var(--j-mu);grid-column:1/-1}
.kpi-strip{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--j-gap)}
.kpi-mon{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kpi-mon .kpi-mn{font-family:var(--j-serif);font-size:26px;font-weight:600;min-width:46px}
.kpi-boxes{display:flex;gap:6px}
.kpi-boxes span{width:24px;height:24px;border-radius:7px;border:2px solid var(--j-grid);background:var(--j-bar)}
.kpi-boxes span.on{background:var(--j-gold);border-color:var(--j-gold)}
/* sheet */
.kpi-veil{position:fixed;inset:0;background:rgba(10,11,12,.7);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.kpi-sheet{background:var(--j-card);border-radius:24px;padding:26px 28px;width:100%;max-width:580px;max-height:96vh;overflow:auto;color:var(--j-tx);font-family:var(--j-font)}
.kpi-sheet h2{margin:0 0 14px;font-size:30px}
.kpi-fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kpi-fg label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--j-mu)}
.kpi-fg .full{grid-column:1/-1}
.kpi-fg input{font-family:var(--j-font);font-size:16px;min-height:48px;border-radius:12px;border:1px solid var(--j-grid);background:var(--j-bar);color:var(--j-tx);padding:10px 14px;width:100%}
.kpi-after{margin:-4px 0 0;font-size:16px;font-weight:700;color:var(--j-gold);line-height:1.35}
.kpi-tiers{display:flex;flex-wrap:wrap;gap:8px}
.kpi-tiers button{min-height:44px!important;padding:8px 14px!important;font-size:15px!important;border-radius:12px!important;background:var(--j-bar)!important;color:var(--j-tx)!important;border:1px solid var(--j-grid)!important}
.kpi-tiers button.on{background:var(--j-gold)!important;color:var(--j-bg)!important}
.kpi-acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
@media(max-width:820px){
 .kpi-b-main,.kpi-strip{grid-template-columns:minmax(0,1fr)}
 .kpi-b-main{gap:18px}
 .kpi-ladder{grid-template-columns:1fr;gap:12px}
 .kpi-step{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px}
 .kpi-step .kpi-bar{grid-column:1/-1;order:3}
 .kpi-step b{margin:0;min-height:0}
 .kpi-step small{text-align:right}
 .kpi-step .kpi-tag{grid-column:1/-1;justify-self:start;order:4;margin-top:0}
}
@media(max-width:600px){
 .kpi .kpi-pan{padding:16px}
 .kpi h2{font-size:24px}
 .kpi .kpi-big{font-size:52px}
 .kpi-fg{grid-template-columns:1fr}
 .kpi-sheet{padding:20px}
}
html body .kpi-sheet .kpi-btn{font-family:var(--j-font);font-size:16px;font-weight:700;min-height:48px;padding:10px 22px;border-radius:14px;background:var(--j-gold)!important;color:var(--j-bg)!important}
html body .kpi-sheet .kpi-btn.quiet{background:var(--j-bg)!important;color:var(--j-tx)!important}

.kpi-step .kpi-slot{order:-1;display:block;min-height:32px}
.kpi-step .kpi-slot .kpi-tag{margin:0}
@media(max-width:820px){.kpi-step .kpi-slot{grid-column:1/-1;order:4;min-height:0}.kpi-step .kpi-slot:empty{display:none}.kpi-step .kpi-slot .kpi-tag{margin-top:2px}}

/* v1.6.5 additions */
.kpi .kpi-labrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.kpi .kpi-link{background:none;border:0;color:var(--j-gold);font-family:var(--j-font);font-size:15px;font-weight:700;min-height:44px;padding:6px 4px;text-decoration:underline;cursor:pointer;letter-spacing:0;text-transform:none}
.kpi .kpi-pick h2{font-size:26px;margin:8px 0 4px}
.kpi .kpi-pick .kpi-tiers{margin-top:14px}
.kpi .kpi-pill.idle{background:var(--j-bar);color:var(--j-mu)}
.kpi .kpi-cnt{font-size:22px}
.kpi .kpi-none{display:block!important;color:var(--j-mu);font-size:16px;padding:10px 0}
.kpi .kpi-btnrow{display:flex;gap:10px;flex-wrap:wrap}
.kpi .kpi-seebtn{margin-top:14px}
.kpi .kpi-big small{line-height:1.3}
.kpi-sheet h2{line-height:1.15}
.kpi-sheet .kpi-sub{font-size:16px;color:var(--j-mu);margin:0 0 14px}
.kpi-sheet .kpi-tiers{margin-top:8px}
.kpi-err{color:var(--j-bad-tx);font-size:15px;font-weight:700;margin:10px 0 0;min-height:0}
.kpi-err:empty{display:none}
.kpi-all,.kpi-act{list-style:none;margin:0 0 6px;padding:0}
.kpi-all li{padding:12px 0;border-top:1px solid var(--j-grid)}
.kpi-all li:first-child{border-top:0}
.kpi-allt{display:flex;justify-content:space-between;gap:12px}
.kpi-allt strong{font-size:16px}.kpi-allt em{font-style:normal;font-size:16px;font-weight:700;color:var(--j-gold)}
.kpi-all li>span{display:block;font-size:15px;color:var(--j-mu)}
.kpi-rowbtns{display:flex;gap:8px;margin-top:8px}
.kpi-sheet .kpi-rowbtns .kpi-btn{min-height:44px;padding:6px 18px;font-size:15px}
.kpi-act li{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:10px 0;border-top:1px solid var(--j-grid)}
.kpi-act li:first-child{border-top:0}
.kpi-act strong{font-size:16px}.kpi-act span{font-size:15px;color:var(--j-mu)}
.kpi-act em{font-style:normal;font-size:15px;color:var(--j-mu);align-self:center;grid-row:1/3;grid-column:2}
.kpi-none2{color:var(--j-mu);font-size:16px}
.kpi-sheet{max-height:92vh}
.kpi-fg input{width:100%}
.kpi .kpi-tiers button,.kpi-sheet .kpi-tiers button{min-height:44px!important;padding:8px 14px!important;font-size:15px!important;border-radius:12px!important;background:var(--j-bar)!important;color:var(--j-tx)!important;border:1px solid var(--j-grid)!important;cursor:pointer}
.kpi .kpi-tiers button.on,.kpi-sheet .kpi-tiers button.on{background:var(--j-gold)!important;color:var(--j-bg)!important}