.cct-wrapper {
  --cct-primary-color: #2563eb;
  --cct-button-text-color: #fff;
  --cct-background-color: #fff;
  --cct-border-color: #e5e7eb;
  --cct-border-radius: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--cct-border-color);
  border-radius: var(--cct-border-radius);
  background: var(--cct-background-color);
  color: #111827;
  font-family: inherit;
  text-align: right;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.cct-wrapper *,
.cct-wrapper *::before,
.cct-wrapper *::after { box-sizing: border-box; }

.cct-header { margin-bottom: 20px; }
.cct-title { margin: 0 0 8px; font: inherit; font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.4; color: inherit; }
.cct-description { margin: 0; color: #4b5563; line-height: 1.9; }

.cct-button,
.cct-case-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: calc(var(--cct-border-radius) * .65);
  background: var(--cct-primary-color);
  color: var(--cct-button-text-color);
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.cct-button:hover,
.cct-case-link:hover { color: var(--cct-button-text-color); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, .12); }
.cct-button:focus-visible,
.cct-case-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--cct-primary-color) 30%, transparent); outline-offset: 3px; }
.cct-button:disabled { cursor: wait; opacity: .72; transform: none; }

.cct-loading { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; animation: cct-spin .75s linear infinite; }
.cct-button.is-loading .cct-loading { display: inline-block; }
@keyframes cct-spin { to { transform: rotate(360deg); } }

.cct-test-control { width: 100%; }
.cct-test-control > label { display: block; margin-bottom: 8px; font-weight: 700; }
.cct-test-control__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.cct-test-control input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 13px; border: 1px solid var(--cct-border-color); border-radius: calc(var(--cct-border-radius) * .55); background: #fff; color: #111827; font: inherit; direction: ltr; text-align: left; }
.cct-test-control input:focus { border-color: var(--cct-primary-color); outline: 3px solid color-mix(in srgb, var(--cct-primary-color) 22%, transparent); outline-offset: 1px; }
.cct-test-control input:disabled { background: #f8fafc; opacity: .72; }

.cct-results { margin-top: 22px; }
.cct-results:empty { display: none; }
.cct-results__heading { margin-bottom: 12px; font-size: 18px; font-weight: 800; }
.cct-case-list { display: grid; gap: 12px; }
.cct-case-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--cct-border-color); border-radius: calc(var(--cct-border-radius) * .72); background: rgba(248, 250, 252, .75); }
.cct-case-item__title { font-weight: 700; }
.cct-case-link { min-height: 42px; padding: 8px 16px; font-size: .94em; }

.cct-message { padding: 13px 15px; border: 1px solid var(--cct-border-color); border-radius: calc(var(--cct-border-radius) * .6); background: #f8fafc; color: #334155; line-height: 1.8; }
.cct-message--warning { background: #fffbeb; border-color: #fde68a; color: #854d0e; }
.cct-message--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cct-message--empty { background: #f8fafc; }
.cct-message--loading { color: #475569; }
.cct-wrapper--message .cct-button { margin-top: 10px; }

@media (max-width: 560px) {
  .cct-wrapper { padding: 20px 16px; }
  .cct-button { width: 100%; }
	.cct-test-control__row { grid-template-columns: 1fr; }
  .cct-case-item { align-items: stretch; flex-direction: column; }
  .cct-case-link { width: 100%; }
}