.cw-panel {
  display: grid;
  gap: 16px;
}

.cw-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, rgba(9, 152, 168, 0.08), rgba(255, 255, 255, 0.92));
}

.cw-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cw-block__title {
  font-family: Overpass, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(41, 28, 91, 0.86);
}

.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(233, 184, 15, 0.18);
  border: 1px solid rgba(233, 184, 15, 0.24);
  color: rgba(41, 28, 91, 0.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cw-chip [class^="icon-"] {
  color: var(--clr-set-1);
  font-size: 14px;
}

.cw-chip--muted {
  background: rgba(41, 28, 91, 0.06);
  border-color: rgba(41, 28, 91, 0.1);
  color: rgba(0, 0, 0, 0.58);
}

.cw-budget {
  display: grid;
  gap: 10px;
}

.cw-bar {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.cw-seg {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 10px 10px 9px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  min-width: 86px;
}

.cw-seg__k {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(41, 28, 91, 0.9);
}

.cw-seg__v {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
}

.cw-seg--system {
  flex: 0.75;
  background: linear-gradient(180deg, rgba(41, 28, 91, 0.12), rgba(255, 255, 255, 0.96));
}

.cw-seg--prompt {
  flex: 0.9;
  background: linear-gradient(180deg, rgba(233, 184, 15, 0.18), rgba(255, 255, 255, 0.96));
}

.cw-seg--history {
  flex: 1.2;
  background: linear-gradient(180deg, rgba(9, 152, 168, 0.16), rgba(255, 255, 255, 0.96));
}

.cw-seg--docs {
  flex: 2;
  background: linear-gradient(180deg, rgba(233, 184, 15, 0.14), rgba(255, 255, 255, 0.96));
}

.cw-seg--output {
  flex: 1.1;
  background: linear-gradient(180deg, rgba(0, 182, 109, 0.14), rgba(255, 255, 255, 0.96));
}

.cw-budget__note {
  color: rgba(0, 0, 0, 0.66);
  font-size: 13px;
  line-height: 1.45;
}

.cw-budget__note strong {
  color: rgba(41, 28, 91, 0.9);
}

.cw-ruler {
  position: relative;
  height: 140px;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.cw-ruler__line {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 74px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(41, 28, 91, 0.18), rgba(9, 152, 168, 0.16), rgba(233, 184, 15, 0.18));
}

.cw-tick {
  position: absolute;
  left: calc(18px + (100% - 36px) * var(--x));
  top: 62px;
  transform: translateX(-50%);
  display: grid;
  gap: 6px;
  justify-items: center;
}

.cw-tick__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(41, 28, 91, 0.32);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.cw-tick__lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(41, 28, 91, 0.66);
}

.cw-model {
  position: absolute;
  left: calc(18px + (100% - 36px) * var(--x));
  top: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
}

.cw-model__badge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
}

.cw-model__badge img {
  width: 18px;
  height: 18px;
}

.cw-model__name {
  font-family: Overpass, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(41, 28, 91, 0.86);
  font-size: 13px;
  line-height: 1.1;
}

.cw-model__meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.52);
  text-transform: uppercase;
  margin-top: 2px;
}

.cw-model--gemini {
  transform: translateX(-100%);
}

.cw-foot {
  color: rgba(0, 0, 0, 0.62);
  font-size: 13px;
  line-height: 1.45;
}

.cw-foot strong {
  color: rgba(41, 28, 91, 0.86);
}