@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Kumbh+Sans:wght@400;500;600;700&display=swap');

/* ── Variables ── */
#cst-root {
  --navy:       #131e3b;
  --navy-mid:   #1c2d57;
  --navy-hover: #0d1628;
  --navy-light: #dde3f0;
  --blue-soft:  #f0f4fb;
  --green:      #16a34a;
  --green-bg:   #f0fdf4;
  --green-ring: #22c55e;
  --amber:      #d97706;
  --amber-bg:   #fffbeb;
  --red:        #dc2626;
  --red-bg:     #fef2f2;
  --border:     #d1d5db;
  --text:       #111827;
  --muted:      #6b7280;
  --white:      #ffffff;
  --radius:     10px;
  --shadow:     0 4px 24px rgba(19,30,59,.10), 0 1px 4px rgba(19,30,59,.06);
  font-family:  'Kumbh Sans', 'Roboto', sans-serif;
  color:        var(--text);
  max-width:    1200px;
  margin:       0 auto;
  padding:      28px 20px;
  box-sizing:   border-box;
}
#cst-root * { box-sizing: border-box; }

/* ── Card ── */
.cst-card { margin-top:-35px;
  background:    var(--white);
  border-radius: 18px;
  box-shadow:    var(--shadow);
  border:        1px solid var(--navy-light);
  overflow:      hidden;
}

/* ════════════════════════════════════════
   SCOREBOARD HEADER
════════════════════════════════════════ */
.cst-header {
  background: var(--navy);
  padding:    28px 32px 24px;
}

.cst-header-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   24px;
}

.cst-header-eyebrow {
  font-size:      .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.45);
  font-weight:    700;
  margin-bottom:  4px;
}

.cst-header-title {
  font-size:   1.4rem;
  font-weight: 700;
  color:       #fff;
  line-height: 1.2;
}

.cst-month-pill {
  background:    rgba(255,255,255,.1);
  border:        1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding:       5px 14px;
  font-size:     .78rem;
  color:         rgba(255,255,255,.75);
  font-weight:   600;
  white-space:   nowrap;
  flex-shrink:   0;
}

/* ── Big scoreboard number ── */
.cst-scoreboard {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             20px;
}

.cst-score-left {
  display:    flex;
  align-items:baseline;
  gap:        10px;
  flex-shrink:0;
}

.cst-deals-num {
  font-size:      5rem;
  font-weight:    900;
  color:          #fff;
  line-height:    1;
  font-family:    'Roboto', sans-serif;
  letter-spacing: -.04em;
  transition:     color .3s;
}

.cst-deals-num.is-done { color: var(--green-ring); }

.cst-score-divider {
  font-size:   2.8rem;
  font-weight: 300;
  color:       rgba(255,255,255,.25);
  line-height: 1;
  margin-top:  6px;
}

.cst-goal-num {
  font-size:   2.8rem;
  font-weight: 700;
  color:       rgba(255,255,255,.5);
  line-height: 1;
  font-family: 'Roboto', sans-serif;
  margin-top:  6px;
}

.cst-score-label {
  font-size:   .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:       rgba(255,255,255,.4);
  margin-top:  6px;
  font-weight: 600;
}

/* ── Circle progress ── */
.cst-circle-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  flex-shrink:    0;
}

.cst-circle {
  position: relative;
  width:    100px;
  height:   100px;
}

.cst-circle svg {
  width:     100%;
  height:    100%;
  transform: rotate(-90deg);
}

.cst-arc-bg   { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.cst-arc-fill {
  fill: none; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 283;
  transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1), stroke .4s;
}

.cst-circle-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.cst-circle-pct {
  font-size:   1.3rem;
  font-weight: 900;
  color:       #fff;
  font-family: 'Roboto', sans-serif;
  line-height: 1;
}
.cst-circle-lbl {
  font-size:      .5rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          rgba(255,255,255,.4);
  margin-top:     2px;
}

/* ── Progress bar ── */
.cst-progress-bar-wrap { margin-top: 20px; }

.cst-prog-labels {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   7px;
}

.cst-prog-label {
  font-size:      .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          rgba(255,255,255,.4);
  font-weight:    600;
}

.cst-pace-badge {
  font-size:     .72rem;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: 20px;
  letter-spacing:.04em;
}
.cst-pace-ahead  { background: rgba(34,197,94,.2);  color: #86efac; }
.cst-pace-behind { background: rgba(220,38,38,.2);  color: #fca5a5; }
.cst-pace-done   { background: rgba(34,197,94,.3);  color: #4ade80; }

.cst-bar-track {
  height:        10px;
  background:    rgba(255,255,255,.1);
  border-radius: 99px;
  overflow:      hidden;
}

.cst-bar-fill {
  height:        100%;
  border-radius: 99px;
  background:    var(--green-ring);
  transition:    width .6s cubic-bezier(.4,0,.2,1), background .3s;
}

/* ════════════════════════════════════════
   TABS
════════════════════════════════════════ */
.cst-tabs {
  display:       flex;
  border-bottom: 2px solid var(--navy-light);
  padding:       0 32px;
}

.cst-tab {
  padding:       13px 20px;
  font-size:     .86rem;
  font-weight:   600;
  color:         var(--muted);
  cursor:        pointer;
  border:        none;
  background:    none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:    color .2s, border-color .2s;
  font-family:   'Kumbh Sans', 'Roboto', sans-serif;
  white-space:   nowrap;
}
.cst-tab:hover  { color: var(--navy); }
.cst-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* ════════════════════════════════════════
   PANELS
════════════════════════════════════════ */
.cst-panel        { display: none; padding: 28px 32px; }
.cst-panel.active { display: block; }

/* ════════════════════════════════════════
   CONTROLS PANEL
════════════════════════════════════════ */

/* Goal input row */
.cst-goal-row {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: 28px;
  flex-wrap:     wrap;
}

.cst-goal-label {
  font-size:   .84rem;
  font-weight: 700;
  color:       var(--navy);
  white-space: nowrap;
  min-width:   130px;
}

.cst-goal-field {
  position: relative;
  flex:      1;
  min-width: 120px;
  max-width: 200px;
}

input.cst-goal-input {
    margin-bottom: 0px;

  width:         100%;
  border:        1px solid var(--border);
  padding:       12px 14px;
  font-family:   "Kumbh Sans", "Roboto", sans-serif;
  font-size:     1rem;
  font-weight:   700;
  color:         var(--navy);
  border-radius: var(--radius);
  background:    var(--white);
  outline:       none;
  text-align:    center;
  transition:    border-color .2s, box-shadow .2s;
  -moz-appearance: textfield;
}
input.cst-goal-input::-webkit-inner-spin-button,
input.cst-goal-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.cst-goal-input:focus {
  border-color: var(--navy);
  box-shadow:   0 0 0 3px rgba(19,30,59,.1);
}
input.cst-goal-input::placeholder { color: #c0c4cc; font-weight: 400; }

.cst-goal-unit {
  font-size:   .82rem;
  color:       var(--muted);
  font-weight: 500;
}

/* ── +/- deal counter ── */
.cst-section-title {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--navy);
  margin-bottom:  16px;
  padding-bottom: 10px;
  border-bottom:  2px solid var(--navy-light);
}

.cst-counter-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  padding:         24px 0;
  margin-bottom:   24px;
}

.cst-counter-btn {
  width:         60px;
  height:        60px;
  border-radius: 50%;
  border:        2px solid var(--navy-light);
  background:    var(--white);
  font-size:     1.6rem;
  font-weight:   700;
  color:         var(--navy);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .15s, border-color .15s, transform .1s, box-shadow .15s;
  line-height:   1;
  flex-shrink:   0;
  font-family:   'Roboto', sans-serif;
}
.cst-counter-btn:hover  { background: var(--blue-soft); border-color: var(--navy); box-shadow: 0 3px 12px rgba(19,30,59,.15); }
.cst-counter-btn:active { transform: scale(.93); }

.cst-counter-btn.cst-btn-plus {
  width:       70px;
  height:      70px;
  font-size:   2rem;
  background:  var(--navy);
  border-color:var(--navy);
  color:       #fff;
}
.cst-counter-btn.cst-btn-plus:hover { background: var(--navy-hover); box-shadow: 0 6px 20px rgba(19,30,59,.3); }

.cst-counter-display {
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         4px;
  min-width:   100px;
}

.cst-counter-num {
  font-size:   3.2rem;
  font-weight: 900;
  color:       var(--navy);
  font-family: 'Roboto', sans-serif;
  line-height: 1;
  letter-spacing: -.03em;
}

.cst-counter-sub {
  font-size:   .72rem;
  color:       var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Manual input below counter */
.cst-manual-row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  margin-bottom:   28px;
}

.cst-manual-label {
  font-size:   .8rem;
  color:       var(--muted);
  font-weight: 600;
}

input.cst-manual-input {
  width:         90px;
  border:        1px solid var(--border);
  padding:       9px 14px;
  font-family:   "Kumbh Sans", "Roboto", sans-serif;
  font-size:     .95rem;
  font-weight:   700;
  color:         var(--navy);
  border-radius: var(--radius);
  background:    var(--white);
  outline:       none;
  text-align:    center;
  transition:    border-color .2s, box-shadow .2s;
  -moz-appearance: textfield;
}
input.cst-manual-input::-webkit-inner-spin-button,
input.cst-manual-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.cst-manual-input:focus {
  border-color: var(--navy);
  box-shadow:   0 0 0 3px rgba(19,30,59,.1);
}

/* ── Stats row ── */
.cst-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
  margin-bottom:         28px;
}

.cst-stat {
  background:    var(--blue-soft);
  border:        1px solid var(--navy-light);
  border-radius: var(--radius);
  padding:       16px 18px;
  text-align:    center;
}

.cst-stat-value {
  display:     block;
  font-size:   1.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 5px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: -.02em;
}
.cst-stat-label {
  font-size:      .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  font-weight:    600;
}

.color-navy  { color: var(--navy);  }
.color-green { color: var(--green); }
.color-amber { color: var(--amber); }
.color-red   { color: var(--red);   }

/* ── Save button ── */
.cst-actions {
    display: flex;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
    justify-content: end;
}
.cst-save-btn {
  background:    var(--navy);
  color:         #fff;
  border:        none;
  border-radius: var(--radius);
  padding:       13px 36px;
  font-family:   'Kumbh Sans', 'Roboto', sans-serif;
  font-weight:   700;
  font-size:     .88rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:        pointer;
  transition:    background .2s, box-shadow .2s, transform .1s;
}
.cst-save-btn:hover    { background: var(--navy-hover); box-shadow: 0 5px 18px rgba(19,30,59,.28); }
.cst-save-btn:active   { transform: translateY(1px); }
.cst-save-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.cst-save-msg {
    font-size: .82rem;
    font-weight: 600;
    color: var(--green);
    opacity: 0;
    transition: opacity .3s;
    margin-right: 15px;
}
.cst-save-msg.show { opacity: 1; }

/* ════════════════════════════════════════
   YTD TABLE
════════════════════════════════════════ */
.cst-ytd-intro {
  font-size:     .85rem;
  color:         var(--muted);
  margin-bottom: 18px;
  line-height:   1.5;
}

.cst-table-wrap {
  overflow-x:    auto;
  border-radius: var(--radius);
  border:        1px solid var(--navy-light);
  margin-bottom: 0;
}

.cst-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .86rem;
  min-width:       420px;
}

.cst-table thead tr { background: var(--navy); }
.cst-table thead th {
  padding:        13px 18px;
  text-align:     left;
  color:          rgba(255,255,255,.8);
  font-weight:    700;
  font-size:      .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space:    nowrap;
}

.cst-table tbody tr { border-bottom: 1px solid var(--navy-light); transition: background .15s; }
.cst-table tbody tr:last-child { border-bottom: none; }
.cst-table tbody tr:hover { background: var(--blue-soft); }
.cst-table td { padding: 13px 18px; vertical-align: middle; }
.cst-td-num { font-weight: 700; font-family: 'Roboto', sans-serif; }
.cst-td-current { background: var(--blue-soft) !important; font-weight: 700; }

.cst-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 10px;
  border-radius: 20px;
  font-size:     .7rem;
  font-weight:   700;
  letter-spacing:.04em;
  white-space:   nowrap;
}
.cst-badge-green { background: var(--green-bg); color: var(--green); }
.cst-badge-amber { background: var(--amber-bg); color: var(--amber); }
.cst-badge-red   { background: var(--red-bg);   color: var(--red);   }
.cst-badge-muted { background: #f3f4f6; color: var(--muted); }

/* ── History ── */
.cst-history-empty {
  text-align: center; padding: 48px 20px;
  color: var(--muted); font-size: .9rem; line-height: 1.6;
}
.cst-history-empty strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.cst-history-meta { font-size: .78rem; color: var(--muted); margin-bottom: 14px; font-weight: 500; }

/* ── Login ── */
.cst-login-msg {
  background: #fff; border-radius: 18px; padding: 36px; text-align: center;
  box-shadow: var(--shadow); border: 1px solid var(--navy-light);
  font-size: .95rem; color: var(--muted); max-width: 760px; margin: 28px auto;
}
.cst-login-msg a { color: var(--navy); font-weight: 700; text-decoration: none; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 600px) {
  #cst-root     { padding: 14px 10px; }
  .cst-header   { padding: 20px 20px 18px; }
  .cst-tabs     { padding: 0 20px; overflow-x: auto; }
  .cst-panel    { padding: 22px 20px; }

  .cst-deals-num    { font-size: 3.8rem; }
  .cst-score-divider,
  .cst-goal-num     { font-size: 2.2rem; }

  .cst-circle       { width: 82px; height: 82px; }
  .cst-circle-pct   { font-size: 1.1rem; }

  .cst-stats        { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cst-counter-wrap { gap: 14px; }
  .cst-counter-btn.cst-btn-plus { width: 62px; height: 62px; font-size: 1.7rem; }
  .cst-counter-btn  { width: 52px; height: 52px; font-size: 1.4rem; }
  .cst-counter-num  { font-size: 2.6rem; }

  .cst-goal-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cst-goal-field { max-width: 100%; width: 100%; }
  .cst-save-btn { width: 100%; text-align: center; }
}

/* ── Month selector (added for retroactive editing) ── */
.cst-month-selector-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px 0px 15px;
    flex-wrap: wrap;
}
.cst-month-selector-label {
  font-size:   .78rem;
  font-weight: 700;
  color:       var(--navy);
  white-space: nowrap;
}
.cst-month-select {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       8px 12px;
  font-family:   'Kumbh Sans','Roboto',sans-serif;
  font-size:     .88rem;
  font-weight:   600;
  color:         var(--navy);
  background:    var(--white);
  cursor:        pointer;
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
}
.cst-month-select:focus {
  border-color: var(--navy);
  box-shadow:   0 0 0 3px rgba(19,30,59,.1);
}
.cst-month-selector-note {
  font-size:  .72rem;
  color:      var(--muted);
  font-style: italic;
}
@media(max-width:600px){
  .cst-month-selector-row { padding-left:16px; padding-right:16px; }
}