.cp-root {
  --cp-bg: var(--bg, #0b0f14);
  --cp-panel: var(--surface, #111821);
  --cp-panel-soft: var(--surface2, rgba(255, 255, 255, 0.04));
  --cp-input-bg: var(--surface2, #0d131b);
  --cp-border: var(--border2, #263241);
  --cp-border-soft: var(--border, rgba(255, 255, 255, 0.08));
  --cp-text: var(--text, #e8edf3);
  --cp-muted: var(--text2, #8d9aaa);
  --cp-green: var(--green, #35d07f);
  --cp-blue: #6d91ff;
  --cp-card-gloss: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .cp-root {
  --cp-bg: #0b0f14;
  --cp-panel: #111821;
  --cp-panel-soft: #0d131b;
  --cp-input-bg: #0d131b;
  --cp-border: #263241;
  --cp-border-soft: rgba(255, 255, 255, 0.08);
  --cp-text: #e8edf3;
  --cp-muted: #8d9aaa;
  --cp-green: #35d07f;
  --cp-card-gloss: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .cp-root {
  --cp-bg: var(--bg, #eceae4);
  --cp-panel: var(--surface, #ffffff);
  --cp-panel-soft: var(--surface2, #f9f8f5);
  --cp-input-bg: #ffffff;
  --cp-border: var(--border2, rgba(0, 0, 0, 0.13));
  --cp-border-soft: var(--border, rgba(0, 0, 0, 0.07));
  --cp-text: var(--text, #18170f);
  --cp-muted: var(--mid, #6b7280);
  --cp-green: var(--green, #16a34a);
  --cp-blue: #4f6fdc;
  --cp-card-gloss: rgba(22, 163, 74, 0.035);
}
.cp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
  min-width: 0;
}

.cp-with-partials .cp-grid {
  grid-template-columns: 220px minmax(620px, 1fr);
  gap: 8px;
}

.cp-no-admin .cp-grid,
.cp-no-admin.cp-with-partials .cp-grid {
  grid-template-columns: minmax(0, 1fr);
}

.cp-no-admin .cp-admin-card {
  display: none;
}

.cp-admin-card {
  width: min(100%, 220px);
}

.cp-admin-stack {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.cp-current-card {
  width: min(100%, 268px);
}

.cp-current-list {
  display: grid;
  gap: 7px;
}

.cp-current-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.cp-current-row span {
  color: var(--cp-muted);
}

.cp-current-row strong {
  color: var(--cp-text);
  text-align: right;
}

.cp-current-money {
  border-top: 1px solid var(--cp-border);
  margin-top: 3px;
  padding-top: 9px;
}

.cp-admin-card .cp-head {
  padding: 14px 12px 10px;
}

.cp-admin-card .cp-fields {
  padding: 12px;
  gap: 8px;
}

.cp-admin-card .cp-row2 {
  gap: 8px;
}

.cp-admin-card input {
  padding-left: 9px;
  padding-right: 9px;
}

.cp-card {
  background: linear-gradient(180deg, var(--cp-card-gloss), rgba(255, 255, 255, 0.012)), var(--cp-panel);
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  color: var(--cp-text);
  min-width: 0;
  overflow: hidden;
}

.cp-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--cp-border-soft);
}

.cp-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.cp-head p {
  margin: 0;
  color: var(--cp-muted);
  font-size: 12px;
}

.cp-head-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cp-col-toggles {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cp-col-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--cp-muted);
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: var(--cp-input-bg);
  user-select: none;
}

.cp-col-toggle input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border-radius: 3px;
  padding: 0;
  accent-color: var(--cp-green);
  cursor: pointer;
}

.cp-fields {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cp-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cp-row4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cp-root label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.cp-root input {
  width: 100%;
  border: 1px solid var(--cp-border);
  background: var(--cp-input-bg);
  color: var(--cp-text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.cp-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6px;
}

.cp-calc-fields {
  gap: 0;
}

.cp-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cp-green);
  padding: 10px 0 2px;
}

.cp-section-label:first-child {
  padding-top: 2px;
}

.cp-hide-daily .cp-col-daily,
.cp-hide-period .cp-col-period {
  display: none;
}

.cp-with-partials.cp-hide-daily .cp-calc-row,
.cp-with-partials.cp-hide-period .cp-calc-row {
  grid-template-columns: minmax(210px, 1fr) auto minmax(108px, 0.28fr);
}

.cp-with-partials.cp-hide-daily.cp-hide-period .cp-calc-row {
  grid-template-columns: minmax(210px, 1fr) auto;
}

.cp-calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cp-border-soft);
}

.cp-with-partials .cp-calc-row {
  grid-template-columns: minmax(210px, 1fr) auto minmax(108px, 0.28fr) minmax(108px, 0.28fr);
}

.cp-calc-row:last-of-type {
  border-bottom: 1px solid var(--cp-border-soft);
}

.cp-calc-meta strong {
  display: block;
  font-size: 15px;
}

.cp-calc-meta {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
}

.cp-calc-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-content: space-around;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--cp-green);
  background: rgba(53, 208, 127, 0.12);
  border: 1px solid rgba(53, 208, 127, 0.22);
  align-self: center;
  justify-self: center;
  flex-shrink: 0;
}

.cp-calc-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  margin: auto;
  transform: translateY(0);
}

.cp-calc-meta span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--cp-muted);
}

.cp-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cp-input-bg);
  max-width: 100%;
}

.cp-stepper button {
  width: 36px;
  height: 36px;
  border: 0;
  color: var(--cp-text);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cp-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cp-stepper-value {
  min-width: 86px;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  padding: 0 8px;
  border-left: 1px solid var(--cp-border);
  border-right: 1px solid var(--cp-border);
}

.cp-partial {
  min-width: 0;
  text-align: right;
}

.cp-partial strong {
  display: block;
  color: var(--cp-text);
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cp-partial .cp-dec {
  font-size: 0.52em;
  vertical-align: 0.24em;
}

.cp-partial .cp-euro {
  font-size: 0.5em;
  vertical-align: 0.28em;
}

.cp-partial small {
  display: block;
  margin-top: 4px;
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 800;
}

.cp-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(95, 131, 255, 0.16);
  border: 1px solid rgba(95, 131, 255, 0.38);
  color: #7ca6ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 12px;
}

.cp-total-badges {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}

.cp-total-badge {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--cp-border);
  background: var(--cp-panel-soft);
}

.cp-total-badge > span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cp-muted);
}

.cp-total-badge strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--cp-green);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.cp-int {
  font-size: 1em;
  font-weight: 950;
}

.cp-dec {
  font-size: 0.46em;
  vertical-align: 0.28em;
  font-weight: 800;
  opacity: 0.95;
}

.cp-euro {
  font-size: 0.42em;
  vertical-align: 0.32em;
  font-weight: 800;
}

.cp-total-badge small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cp-muted);
}

.cp-total-monthly {
  background: linear-gradient(135deg, rgba(53,208,127,0.15), rgba(53,208,127,0.04));
  border-color: rgba(53,208,127,0.35);
}

.cp-total-period {
  background: linear-gradient(135deg, rgba(95,131,255,0.18), rgba(95,131,255,0.04));
  border-color: rgba(95,131,255,0.45);
}

.cp-total-period strong {
  color: var(--cp-blue);
}

.cp-total-savings {
  background: linear-gradient(135deg, rgba(53,208,127,0.18), rgba(53,208,127,0.06));
  border-color: rgba(53,208,127,0.45);
}

@media (max-width: 920px) {
  .cp-grid {
    grid-template-columns: 1fr;
  }

  .cp-with-partials .cp-grid {
    grid-template-columns: 1fr;
  }

  .cp-total-badges {
    grid-template-columns: 1fr;
  }

  .cp-with-partials .cp-calc-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(96px, 0.25fr) minmax(96px, 0.25fr);
  }
}

@media (max-width: 560px) {
  .cp-row2,
  .cp-with-partials .cp-calc-row,
  .cp-calc-row {
    grid-template-columns: 1fr;
  }

  .cp-partial {
    text-align: left;
  }

  .cp-total-badge strong {
    font-size: 32px;
  }

  .cp-stepper {
    width: 100%;
    justify-content: space-between;
  }
}