.ttv-matching {
    --ttv-match-ink: var(--ttv-ink, #17334A);
    --ttv-match-muted: #536273;
    --ttv-match-line: var(--ttv-border, #D8C9AC);
    --ttv-match-accent: var(--ttv-brick, #A33327);
    --ttv-match-surface: var(--ttv-surface, #FFFAF0);
    width: min(1120px, calc(100% - 2rem));
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 5rem);
    color: var(--ttv-match-ink);
}
.ttv-matching [hidden] { display: none !important; }

.ttv-matching__intro { max-width: 45rem; }
.ttv-matching__eyebrow { margin: 0 0 .5rem; color: var(--ttv-match-accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ttv-matching h1, .ttv-matching h2, .ttv-matching h3 { color: var(--ttv-match-ink); }
.ttv-matching h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.08; }
.ttv-matching h2 { margin: 0 0 1rem; font-size: 1rem; line-height: 1.3; }
.ttv-matching__intro > p:last-child { max-width: 60ch; margin: 1rem 0 0; color: var(--ttv-match-muted); line-height: 1.6; }

.ttv-matching__status, .ttv-matching__feedback, .ttv-matching__empty, .ttv-matching__failure {
    margin-top: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--ttv-match-line);
    border-radius: .75rem;
    background: var(--ttv-match-surface);
}
.ttv-matching__status { color: var(--ttv-match-muted); }
.ttv-matching__feedback[data-state="success"] { border-color: #28745a; background: #f0faf5; }
.ttv-matching__feedback[data-state="error"] { border-color: var(--ttv-match-accent); background: #fff7f5; }

.ttv-matching__toolbar, .ttv-matching__metrics { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
.ttv-matching__toolbar label { font-weight: 700; }
.ttv-matching__toolbar select { min-width: min(100%, 20rem); padding: .7rem .8rem; border: 1px solid var(--ttv-match-line); border-radius: .5rem; color: var(--ttv-match-ink); background: var(--ttv-match-surface); font: inherit; }
.ttv-matching__button { min-height: 2.75rem; padding: .7rem 1rem; border: 1px solid var(--ttv-match-ink); border-radius: .5rem; color: #fff; background: var(--ttv-match-ink); font: inherit; font-weight: 700; cursor: pointer; }
.ttv-matching__button:hover { background: #23476f; }
.ttv-matching__button:disabled { cursor: not-allowed; opacity: .55; }
.ttv-matching__metrics { justify-content: flex-start; color: var(--ttv-match-muted); }
.ttv-matching__metrics span { padding: .45rem .7rem; border: 1px solid var(--ttv-match-line); border-radius: 999px; background: var(--ttv-match-surface); }
.ttv-matching__metrics strong { color: var(--ttv-match-ink); }

.ttv-matching__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 2rem); margin-top: 1.5rem; }
.ttv-matching__column { min-width: 0; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--ttv-match-line); border-radius: 1rem; background: var(--ttv-match-surface); }
.ttv-matching__column h3 { margin: 0 0 1rem; font-size: 1rem; }
.ttv-matching__cards { display: grid; gap: .75rem; }
.ttv-matching__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; min-height: 3.5rem; padding: .75rem; border: 2px solid var(--ttv-match-line); border-radius: .75rem; color: var(--ttv-match-ink); background: var(--ttv-match-surface); font: inherit; text-align: start; cursor: pointer; }
.ttv-matching__card:hover:not(:disabled) { border-color: var(--ttv-match-ink); }
.ttv-matching__card:disabled { cursor: default; }
.ttv-matching__card[aria-pressed="true"] { border-color: var(--ttv-match-accent); background: #fff6f3; }
.ttv-matching__card[data-matched="true"] { border-color: #28745a; background: #f0faf5; }
.ttv-matching__card:focus-visible, .ttv-matching__button:focus-visible, .ttv-matching__toolbar select:focus-visible { outline: 3px solid var(--ttv-match-ink); outline-offset: 3px; }
.ttv-matching__card img { display: block; width: 3rem; height: 3rem; border-radius: .5rem; object-fit: cover; }
.ttv-matching__card-label { min-width: 0; overflow-wrap: anywhere; }
.ttv-matching__empty p, .ttv-matching__failure p { margin: 0 0 .9rem; color: var(--ttv-match-muted); }
.ttv-matching__prize { margin-top: 1.5rem; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid var(--ttv-match-accent); border-radius: 1rem; background: var(--ttv-match-surface); }
.ttv-matching__prize-rules { margin-bottom: 1rem; color: var(--ttv-match-muted); white-space: pre-wrap; }
.ttv-matching__prize form { display: grid; gap: .85rem; max-width: 34rem; }
.ttv-matching__prize label { display: grid; gap: .35rem; font-weight: 700; }
.ttv-matching__prize input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid var(--ttv-match-line); border-radius: .5rem; color: var(--ttv-match-ink); background: var(--ttv-match-surface); font: inherit; }
.ttv-matching__prize .ttv-matching__consent { display: flex; grid-template-columns: auto 1fr; align-items: flex-start; gap: .5rem; font-weight: 400; }
.ttv-matching__prize-result { margin: 1rem 0 0; color: #28745a; font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 42rem) {
    .ttv-matching { width: min(100% - 1.25rem, 36rem); }
    .ttv-matching__board { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ttv-matching *, .ttv-matching *::before, .ttv-matching *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}