.cc-workspace {
  color-scheme: light;
  --ui-bg: #fff; --ui-surface: #fff; --ui-ink: #0b1d36; --ui-muted: #36516b; --ui-line: #cbd4df;
  --ui-primary: #c8102e; --ui-action: #c8102e; --ui-on-action: #fff; --ui-soft: #edf2f7;
  --ui-focus: #0047a0; --ui-pick: #0047a0; --ui-pick-bg: #e3edfb; --ui-paid-bg: #eceff3; --ui-success: #196743; --ui-success-bg: #e0f3e9;
  --ui-danger: #b23b36; --ui-danger-bg: #fbe8e6; --ui-warn: #895000; --ui-warn-bg: #fff0d8;
  width: 100%; max-width: 90rem; overflow-x: hidden; border: 1px solid var(--ui-line); border-radius: 18px;
  background: var(--ui-bg); color: var(--ui-ink); box-shadow: 0 12px 32px rgb(11 29 54 / 8%);
}
.cc-workspace * { box-sizing: border-box; }
.cc-workspace-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--ui-line); }
.cc-workspace-head h2 { margin: 0; }
.cc-kicker, .cc-step { color: var(--ui-primary); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.cc-contract { padding: .35rem .7rem; border-radius: 999px; background: var(--ui-soft); color: var(--ui-muted); font-size: .82rem; font-weight: 700; }
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 32rem; }
.cc-column { min-width: 0; padding: 1rem 1.1rem; border-right: 1px solid var(--ui-line); }
.cc-column:last-child { border-right: 0; }
.cc-column h3 { margin: .25rem 0 .8rem; font-size: 1.25rem; }
.cc-muted, .cc-status, .cc-payer { color: var(--ui-muted); font-size: .9rem; }
.cc-birth { margin: .35rem 0; color: var(--ui-ink); font-weight: 800; }
.cc-status { min-height: 1.4rem; font-weight: 700; }
.cc-person { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.cc-photo { display: grid; place-items: center; width: 5.5rem; aspect-ratio: 1; flex: none; overflow: hidden; border: 3px solid var(--ui-line); border-radius: 22px; background: var(--ui-soft); }
.cc-photo img { width: 100%; height: 100%; object-fit: cover; }
.cc-illustration { position: relative; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: #d9e1eb; }
.cc-illustration::before { content: ""; position: absolute; top: .55rem; left: 1.25rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #7890aa; }
.cc-illustration::after { content: ""; position: absolute; left: .65rem; bottom: .35rem; width: 2.5rem; height: 1.45rem; border-radius: 1.5rem 1.5rem .6rem .6rem; background: #7890aa; }
.cc-field { display: grid; gap: .3rem; font-weight: 700; }
.cc-field select { width: 100%; min-height: 56px; padding: .5rem .8rem; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.cc-workspace :is(button, select, input, summary):focus-visible { outline: 4px solid var(--ui-focus); outline-offset: 3px; }
.ui .mv .cc-workspace .cc-link, .cc-workspace .cc-link { display: inline-flex; align-items: center; min-height: 56px; margin-top: .5rem; padding: .4rem 0; border: 0; background: transparent; color: var(--ui-muted); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.cc-fallback { margin-top: .4rem; }
.ui .mv .cc-workspace button:not(.cc-link), .cc-workspace button:not(.cc-link) { min-height: 56px; }
.cc-tablet-preview { display: grid; place-items: center; min-height: 8.5rem; padding: .7rem; border: 7px solid #172033; border-radius: 18px; background: #fff; text-align: center; box-shadow: inset 0 0 0 1px #aeb8c7; }
.cc-tablet-preview strong { font-size: 1.05rem; }
.cc-tablet-preview small { color: var(--ui-muted); }
.cc-tablet-bar { align-self: start; width: 100%; padding-bottom: .35rem; border-bottom: 1px solid var(--ui-line); color: var(--ui-success); font-size: .7rem; font-weight: 800; }
.cc-help { margin-bottom: .7rem; border-radius: 10px; background: var(--ui-soft); }
.cc-help summary { min-height: 56px; padding: .7rem; cursor: pointer; font-weight: 700; }
.cc-help p { padding: 0 .7rem .7rem; }
.cc-months { display: grid; gap: .45rem; max-height: 22rem; overflow-y: auto; }
.cc-month { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 56px; padding: .55rem .7rem; border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; cursor: pointer; }
.cc-month input { width: 1.35rem; height: 1.35rem; accent-color: var(--ui-pick); }
.cc-month span, .cc-month strong, .cc-month small { display: block; min-width: 0; }
.cc-month small { color: var(--ui-muted); }
.cc-month.open, .cc-month.overdue { border-color: var(--ui-danger); background: var(--ui-danger-bg); }
.cc-month.overdue { border-left: 5px solid var(--ui-danger); }
.cc-month.advance { border-style: dashed; }
.cc-month.paid { border-color: transparent; background: var(--ui-paid-bg); color: var(--ui-muted); cursor: default; }
.cc-month.picked, .cc-month:has(input:checked) { border-color: var(--ui-pick); background: var(--ui-pick-bg); }
.cc-tag { padding: .15rem .55rem; border-radius: 999px; background: var(--ui-danger); color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.cc-tag.advance { background: var(--ui-soft); color: var(--ui-muted); border: 1px dashed var(--ui-muted); }
.cc-tag.paid { background: #d4dbe4; color: var(--ui-muted); }
.cc-tag.picked { background: var(--ui-pick); color: #fff; }
.cc-future { margin-top: .8rem; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-soft); }
.cc-future summary { min-height: 56px; padding: .8rem; cursor: pointer; font-weight: 800; }
.cc-future > p { margin: 0; padding: 0 .8rem .8rem; }
.cc-future-list { display: grid; gap: .4rem; padding: 0 .55rem .55rem; }
.cc-future-month { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem;
  min-height: 56px; padding: .55rem .65rem; border: 1px dashed var(--ui-line); border-radius: 10px; background: #fff; }
.cc-future-month span, .cc-future-month strong, .cc-future-month small { display: block; min-width: 0; }
.cc-future-month small { color: var(--ui-muted); }
.cc-future-tag { max-width: 10rem; padding: .15rem .5rem; border-radius: 999px; background: var(--ui-soft);
  color: var(--ui-muted); font-size: .75rem; font-weight: 800; text-align: center; }
.cc-future-tag.prepaid { background: var(--ui-success-bg); color: var(--ui-success); }
.cc-future-tag.generated { background: #d4dbe4; color: var(--ui-muted); }
.cc-future-tag.unavailable { background: var(--ui-warn-bg); color: var(--ui-warn); }
.cc-total { display: block; margin: 1.2rem 0; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1; text-align: center; }
.cc-prepayment { margin-bottom: 1rem; padding: .8rem; border: 1px solid var(--ui-line); border-radius: 12px;
  background: var(--ui-soft); }
.cc-prepayment h4 { margin: 0; font-size: 1rem; }
.cc-prepayment-panel { display: grid; gap: .35rem; margin: .7rem 0; }
.cc-prepayment-price { margin: .35rem 0 0; color: var(--ui-ink); font-weight: 800; }
.cc-prepayment-action { width: 100%; }
.cc-prepayment .af-feedback { margin-bottom: 0; }
.cc-warning { margin: .8rem 0; padding: .75rem; border-left: 5px solid var(--ui-warn); background: var(--ui-warn-bg); font-size: .88rem; }
.cc-book { width: 100%; }
.cc-booked { padding: .7rem; border-radius: 12px; background: var(--ui-success-bg); color: var(--ui-success); font-weight: 800; }
.cc-receipt { display: grid; gap: .7rem; text-align: center; }

@media(max-width: 1000px) {
  .cc-grid { grid-template-columns: 1fr; min-height: 0; }
  .cc-column { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .cc-column:last-child { border-bottom: 0; }
  .cc-months { max-height: none; }
}
@media(max-width: 520px) {
  .cc-workspace-head { align-items: flex-start; flex-direction: column; }
  .cc-actions > *, .cc-receipt > button { width: 100%; }
  .cc-future-month { grid-template-columns: 1fr; }
  .cc-future-tag { max-width: none; justify-self: start; text-align: left; }
}