:root{--navy:#3e4854;--magenta:#ca236a;--silver:#cac9ca;--charcoal:#282828;--orange:#f09f5b;--yellow:#fee08b;--bg:#f7fafc;--card:#fff;--rail:#cfd6df;--radius:14px;--gap:18px}
*{box-sizing:border-box}
.tjs-cgc{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--charcoal)}
.tjs-cgc h1{font-size:24px;margin:0 0 8px;color:var(--navy)}
.tjs-cgc p.sub{margin:0 0 18px;color:#556}
.tjs-cgc .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.tjs-cgc .card{background:var(--card);border:1px solid #e8ecef;border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.04);padding:18px}
.tjs-cgc .section{background:var(--bg);border:1px solid #eef2f7;border-radius:var(--radius);padding:16px;margin-bottom:18px}
.tjs-cgc .title{font-size:16px;font-weight:800;color:var(--navy)}
.tjs-cgc .help{font-size:12px;color:#667;margin:4px 0 10px}
.tjs-cgc .pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--yellow);border:1px solid var(--orange);color:var(--navy);font-weight:800;font-size:12px;line-height:1}
.tjs-cgc .pill.pulse{animation:tjs-cgc-badgePulse .9s ease-out}
.tjs-cgc .pill:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(240,159,91,.25)}
@keyframes tjs-cgc-badgePulse{0%{box-shadow:0 0 0 0 rgba(254,224,139,.8)}70%{box-shadow:0 0 0 10px rgba(254,224,139,0)}100%{box-shadow:0 0 0 0 rgba(254,224,139,0)}}

.tjs-cgc .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px}
.tjs-cgc .kpi{background:var(--bg);border:1px solid #eef2f7;border-radius:12px;padding:14px}
.tjs-cgc .kpi h3{margin:0 0 6px;font-size:12px;color:var(--navy);font-weight:800}
.tjs-cgc .kpi .val{font-size:22px;font-weight:800}
.tjs-cgc .hr{height:1px;background:#eee;margin:14px 0}
.tjs-cgc .money{font-size:26px;font-weight:900;color:var(--magenta);display:inline-block}
.tjs-cgc .annual{font-size:12px;color:#667;margin-top:2px}
.tjs-cgc .money.pop{animation:tjs-cgc-pop .45s ease-out}
@keyframes tjs-cgc-pop{0%{transform:scale(1)}35%{transform:scale(1.04)}100%{transform:scale(1)}}

/* Sliders */
.tjs-cgc .likert{--track:var(--rail);--thumb:var(--navy);position:relative}
.tjs-cgc .likert .rail{position:relative;height:8px;background:var(--track);border-radius:6px;margin:18px 0 16px;overflow:hidden}
.tjs-cgc .likert .fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--orange));transition:width .18s ease}
.tjs-cgc .likert .dots{position:relative;height:24px;display:flex;justify-content:space-between}
.tjs-cgc .likert .dot{position:relative;top:10px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--silver)}
.tjs-cgc .likert .dot.active{background:var(--yellow);border-color:var(--orange)}
.tjs-cgc .likert input[type=range]{position:absolute;left:0;right:0;top:-10px;width:100%;height:32px;background:transparent;-webkit-appearance:none;appearance:none}
/* Rounded-square thumb centered on 8px rail */
.tjs-cgc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--thumb);border:3px solid #fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.18);margin-top:-8px;transition:transform .08s ease}
.tjs-cgc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.05)}
.tjs-cgc input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--thumb);border:3px solid #fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.tjs-cgc .labels{display:flex;justify-content:space-between;font-size:12px;color:#444;margin-top:6px}

.tjs-cgc input[type=number]{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #ddd;border-radius:10px;font-size:14px}
@media (max-width:980px){.tjs-cgc .wrap{grid-template-columns:1fr}}