.tc-root,
.tc-root *,
.tc-root *::before,
.tc-root *::after,
.qc-root,
.qc-root *,
.qc-root *::before,
.qc-root *::after,
.ts-root,
.ts-root *,
.ts-root *::before,
.ts-root *::after,
.mt-root,
.mt-root *,
.mt-root *::before,
.mt-root *::after,
.ctm-backdrop,
.ctm-backdrop *,
.ctm-backdrop *::before,
.ctm-backdrop *::after {
    box-sizing: border-box;
}

/* ===== Create-test header button & FAB on /my-tests ============= */

.mt-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.mt-title-row .mt-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-create-btn {
    display: none;
}

@media (min-width: 768px) {
    .mt-create-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: var(--blue-color);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 10px 14px;
        cursor: pointer;
        font-family: var(--font-family);
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 6px 18px -4px rgba(31, 46, 70, 0.18);
        transition: filter .15s ease, transform .1s ease;
        max-width: 100%;
    }

        .mt-create-btn:hover { filter: brightness(1.05); }
        .mt-create-btn:active { transform: scale(.98); }
}

.mt-create-btn__label { display: none; }

.mt-create-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background-color: var(--blue-color);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -6px rgba(31, 46, 70, 0.3);
    z-index: 900;
    transition: filter .15s ease, transform .1s ease;
}

    .mt-create-fab:hover { filter: brightness(1.05); }
    .mt-create-fab:active { transform: scale(.95); }

@media (min-width: 768px) {
    .mt-create-btn__label { display: inline; }
    /* Tablet+ uses the inline button only; hide the FAB. */
    .mt-create-fab { display: none; }
}

/* ===== Create-test modal (CreateTestModal.razor) ================ */

.ctm-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(22, 30, 39, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1100;
    padding: 0;
}

.ctm-dialog {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    box-shadow: 0 -10px 30px -8px rgba(0,0,0,.2);
    animation: ctm-slide-up .3s ease-out;
}

@keyframes ctm-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ctm-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.ctm-dialog__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

.ctm-dialog__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--gray-200);
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The top padding belongs to the sticky header inside the body, so nothing scrolls through the gap
   above it. */
.ctm-dialog__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ctm-dialog__footer {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    background: #fff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.ctm-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Step titles read as headings of the current decision, left-aligned like the MAUI creation flow. */
.ctm-step__label {
    margin: 0;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    text-align: left;
}

.ctm-step__label--sub {
    font-size: 16px;
    margin-top: 4px;
}

.ctm-step__hint {
    margin: 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 13px;
}

.ctm-input {
    width: 100%;
    border: 1px solid var(--gray-300);
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-dark-color);
    box-sizing: border-box;
}

    .ctm-input:focus {
        outline: none;
        border-color: var(--blue-color);
    }

.ctm-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.ctm-themes--loading .ctm-theme-skeleton {
    display: inline-block;
    background: var(--gray-200);
    border-radius: 8px;
    height: 32px;
    width: 90px;
    animation: ctm-skeleton 1.4s ease-in-out infinite;
}

.ctm-theme {
    border: 1px solid transparent;
    background-color: var(--gray-200);
    color: var(--text-dark-color);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 13px;
}

    .ctm-theme--active {
        background-color: var(--blue-color);
        color: #fff;
    }

/* Four swatches per row, both rows equal — the palette is read as a block, the way the MAUI
   ColorPalettePicker lays it out, rather than as a wrapping track that leaves a ragged second row. */
.ctm-colors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ctm-color {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
}

    .ctm-color--active {
        transform: scale(1);
    }

    .ctm-color:not(.ctm-color--active) {
        transform: scale(.95);
    }

.ctm-color__check {
    color: #fff;
    pointer-events: none;
}

/* Background patterns: each tile is the test card colour with the
   matching SVG icon (the same set used in the MAUI bottom sheet)
   centered inside. The track wraps so that on a narrow settings
   container the tiles stay at a fixed compact size instead of
   stretching to take all available width. */
.ctm-bg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ctm-bg {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;
    border-radius: 14px;
    border: 3px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}

.ctm-bg__icon {
    width: 75%;
    height: 75%;
    object-fit: contain;
    pointer-events: none;
}

.ctm-bg--active {
    border-color: var(--text-dark-color);
}

/* Live preview of the test card — uses the real `/images/cards/{name}.png`
   asset already shipped for the `.test-card-mini` component, so what the
   user sees here matches the card they'll see on the My-tests page. */
.ctm-preview {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    max-height: 132px;
    overflow: hidden;
}

.ctm-preview__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.ctm-preview__chip,
.ctm-preview__title,
.ctm-preview__count { position: relative; z-index: 1; }

.ctm-preview__chip {
    align-self: flex-start;
    background: rgba(255,255,255,.92);
    color: var(--text-dark-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* The chip sits at the top of the card and the text block at its foot, the way the MAUI cover lays
   them out; the auto margin holds the text down even before a theme chip exists. */
.ctm-preview__title {
    margin: auto 0 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.ctm-preview__count {
    margin: 0;
    font-family: var(--font-family);
    font-size: 12px;
    opacity: .9;
}

.ctm-error {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 105, 81, .08);
    color: var(--red-color);
    font-family: var(--font-family);
    font-size: 13px;
}

.ctm-btn {
    flex: 1 1 auto;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
    min-height: 48px;
}

    .ctm-btn:hover:not(:disabled) { filter: brightness(1.05); }
    .ctm-btn:active:not(:disabled) { transform: scale(.98); }
    .ctm-btn:disabled { opacity: .55; cursor: not-allowed; }

.ctm-btn--primary { background: var(--blue-color); color: #fff; }
.ctm-btn--ghost { background: var(--gray-200); color: var(--text-dark-color); }
.ctm-btn--danger { background: var(--red-color); color: #fff; }

@keyframes ctm-skeleton {
    0%, 100% { opacity: .65; }
    50% { opacity: 1; }
}

@media (min-width: 768px) {
    .ctm-backdrop { align-items: center; padding: 24px; }
    .ctm-dialog {
        max-width: 520px;
        max-height: 88vh;
        border-radius: 24px;
        animation: ctm-fade-in .25s ease-out;
    }
}

@keyframes ctm-fade-in {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== Test constructor page (TestConstructorPage.razor) ======== */

.tc-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.tc-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Toolbar stays full body width; only the test preview, questions
   list and action footer below it use the centered narrow column.
   This keeps the back button + title row anchored to the page
   edges while the editable content stays focused on desktop. */
.tc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tc-preview,
.tc-body > .tc-section {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.tc-toolbar__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
}

.tc-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease, color .15s ease;
}

    .tc-icon-button:hover { background: var(--gray-200); color: var(--text-dark-color); }

.tc-icon-button--dark { color: var(--text-dark-color); }
    .tc-icon-button--dark:hover { background: var(--gray-200); }

/* Card preview — same pattern asset and colours as `.test-card-mini`,
   but read-only inside the constructor to act as a contextual badge. */
.tc-preview {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    overflow: hidden;
}

.tc-preview__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

.tc-preview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 12px;
}

.tc-chip--solid { background: #fff; color: var(--text-dark-color); }
.tc-chip--outline { border: 1px solid #fff; color: #fff; }

/* Cover artwork on the constructor header, same geometry as the card and the creation preview. */
.tc-preview__glyph {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.tc-preview__glyph--corner {
    right: -18px;
    bottom: -22px;
    width: 96px;
    height: 96px;
    opacity: .24;
}

.tc-preview__glyph--feature {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    opacity: .9;
}

.tc-preview__tiles {
    position: absolute;
    inset: 0;
    background-size: 30px 30px;
    background-repeat: repeat;
    background-position: 8px 8px;
    opacity: .24;
    pointer-events: none;
    z-index: 0;
}

.tc-preview__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.tc-skeleton {
    background: var(--gray-200);
    border-radius: 8px;
    min-height: 22px;
    animation: ctm-skeleton 1.4s ease-in-out infinite;
}

.tc-skeleton--title { background: rgba(255,255,255,.25); }

.tc-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.tc-section__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tc-section__heading {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
}

.tc-section__add {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--blue-color);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px -4px rgba(75, 159, 255, 0.5);
}

    .tc-section__add:hover { filter: brightness(1.05); }

.tc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Question card — alternating accent colour cycles through
   blue / green / yellow / red, matching `.tp-answer--*` on the
   passing page so the visual language is consistent. */

.tc-question-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--tc-accent, var(--blue-color));
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.tc-question-card--blue { --tc-accent: #4B9FFF; }
.tc-question-card--green { --tc-accent: #1CCD9D; }
.tc-question-card--yellow { --tc-accent: #FCAF2A; }
.tc-question-card--red { --tc-accent: #FF6951; }

.tc-question-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

.tc-q-icon {
    display: inline-flex;
    color: var(--tc-accent);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tc-accent) 15%, transparent);
    align-items: center;
    justify-content: center;
}

.tc-q-order { flex: 1 1 auto; font-size: 12px; color: var(--text-dark-color); font-family: var(--font-family); font-weight: 600; }
.tc-q-time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-gray-color); }

.tc-q-action {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: none;
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .tc-q-action:hover { color: var(--tc-accent); }

.tc-question-card__body {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
}

.tc-question-card__title { flex: 1 1 auto; }

.tc-question-card__chevron {
    flex: 0 0 auto;
    color: var(--tc-accent);
    transition: transform .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tc-accent) 12%, transparent);
}

.tc-question-card__chevron--open { transform: rotate(90deg); }

.tc-question-card__details {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-question-card__image {
    max-width: 100%;
    max-height: 160px;
    border-radius: 10px;
    object-fit: cover;
    align-self: flex-start;
}

.tc-answer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-answer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark-color);
}

.tc-answer-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tc-answer-marker--ok { background: var(--green-color); }
.tc-answer-marker--wrong { background: var(--red-color); }

.tc-answer-order {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 auto;
}

.tc-answer-text { flex: 1 1 auto; word-break: break-word; }

.tc-match-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark-color);
}

.tc-match-arrow { color: var(--gray-500); }

.tc-answer-text-block {
    margin: 0;
    padding: 8px 12px;
    background: var(--gray-200);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark-color);
    word-break: break-word;
}

.tc-answer-section-label {
    margin: 0;
    color: var(--gray-700);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
}

/* Sequence preview — flex-wrap row of chips, the same way MAUI shows
   them. Chips inherit the cycling colour palette via `--ans-bg`. */
.tc-seq-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-seq-block {
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--ans-bg, var(--blue-color));
    color: #fff;
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.4;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tc-seq-block--blue   { --ans-bg: #4B9FFF; }
.tc-seq-block--green  { --ans-bg: #1CCD9D; }
.tc-seq-block--yellow { --ans-bg: #FCAF2A; }
.tc-seq-block--red    { --ans-bg: #FF6951; }

.tc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 16px;
    border: 1px dashed var(--gray-500);
    border-radius: 16px;
}

.tc-empty__title {
    margin: 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 14px;
    text-align: center;
}

.tc-empty__add {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--blue-color);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -6px rgba(31, 46, 70, 0.25);
}

.tc-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--gray-200) 30%);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0));
    z-index: 5;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 750px;
    box-sizing: border-box;
}

.tc-footer__warning {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(252, 175, 42, .12);
    color: #8a5a00;
    font-family: var(--font-family);
    font-size: 13px;
    text-align: center;
}

.tc-footer__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 600px) {
    .tc-footer__row { flex-direction: row; }
    .tc-footer__row .tc-button { flex: 1 1 0; }
}

.tc-button {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    min-height: 48px;
    transition: filter .15s ease, transform .1s ease;
    box-sizing: border-box;
}

    .tc-button:hover:not(:disabled) { filter: brightness(1.05); }
    .tc-button:active:not(:disabled) { transform: scale(.99); }
    .tc-button:disabled { opacity: .55; cursor: not-allowed; }

.tc-button--save { color: #fff; }
.tc-button--primary { background: var(--blue-color); color: #fff; }
.tc-button--ghost { background: var(--gray-200); color: var(--text-dark-color); }
.tc-button--danger { background: var(--red-color); color: #fff; }

.tc-panel {
    margin: 24px 0;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.tc-panel--error { border: 1px solid var(--red-color); color: var(--red-color); }

.tc-panel__title {
    margin: 0 0 12px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.tc-type-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-type-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: #fff;
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--text-dark-color);
    text-align: left;
}

    .tc-type-row:hover { background: var(--gray-200); }

.tc-type-row--active {
    border-color: var(--blue-color);
    background: rgba(75, 159, 255, .08);
}

.tc-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--gray-200);
    color: var(--blue-color);
}

.tc-type-label { flex: 1 1 auto; font-size: 15px; font-weight: 500; }

.tc-type-badge {
    background: var(--yellow-color);
    color: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.tc-type-chevron { color: var(--gray-500); }

@media (min-width: 768px) {
    .tc-toolbar { padding: 12px 16px; }
    .tc-toolbar__title { font-size: 18px; }
    .tc-section { padding: 20px; }

    /* Promote the page to a 3-row grid so the publish CTAs stay
       pinned to the bottom of the .body container even when the
       questions list is shorter than the viewport. */
    .tc-root {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
        gap: 16px;
    }

    .tc-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tc-footer {
        position: static;
        background: transparent;
        margin-top: 0;
    }
}

/* ===== Question constructor page (QuestionConstructorPage.razor) === */

.qc-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.qc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 8px 12px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.qc-toolbar__center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.qc-toolbar__center .qc-type-trigger {
    width: 100%;
    max-width: 700px;
}

.qc-type-trigger {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
    min-height: 44px;
}

.qc-type-trigger__icon {
    color: var(--blue-color);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gray-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-type-trigger__label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qc-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--gray-200);
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-icon-button--dark { color: var(--text-dark-color); }
    .qc-icon-button--dark:hover { background: var(--gray-300); }

    .qc-icon-button:hover { color: var(--text-dark-color); }

.qc-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
    flex: 1 1 auto;
    min-height: 0;

    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.qc-title {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-dark-color);

    resize: none;
    min-height: 70px;
    box-sizing: border-box;
}

    .qc-title:focus { outline: none; border-color: var(--blue-color); }

.qc-photo-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--gray-200);
    cursor: pointer;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
    align-self: flex-start;
    border: none;
}

.qc-photo-row__icon {
    color: var(--blue-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-photo-row__label { flex: 1 1 auto; }

.qc-media {
    position: relative;
    align-self: flex-start;
    border-radius: 12px;
    overflow: hidden;
    max-width: 220px;
}

.qc-media__image { display: block; max-width: 100%; max-height: 200px; }

.qc-media__remove {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(22, 30, 39, .55);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qc-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-answers__label {
    margin: 0;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
}

.qc-answers__hint { color: var(--text-gray-color); font-weight: 400; font-size: 12px; }

.qc-answer {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ans-bg, var(--gray-200));
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

.qc-answer--blue   { --ans-bg: #4B9FFF; }
.qc-answer--green  { --ans-bg: #1CCD9D; }
.qc-answer--yellow { --ans-bg: #FCAF2A; }
.qc-answer--red    { --ans-bg: #FF6951; }

.qc-answer--neutral {
    background: var(--gray-200);
    color: var(--text-dark-color);
}

.qc-list-sortable {
    display: flex;
    flex-direction: column;
    gap: 10px;
    touch-action: none;
}

    .qc-list-sortable > *:not(.tp-sortable-dragging) {
        transition: transform .18s ease;
    }

.qc-list-sortable .qc-answer,
.qc-list-sortable .qc-match-pair {
    will-change: transform;
}

.qc-answer__handle,
.qc-match-pair__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 24px;
    color: rgba(255,255,255,.7);
    cursor: grab;
    flex: 0 0 auto;
    user-select: none;
}

    .qc-answer__handle:active,
    .qc-match-pair__handle:active { cursor: grabbing; }

.sortable-chosen {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: .35;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .25) 0,
        rgba(255, 255, 255, .25) 8px,
        transparent 8px,
        transparent 16px
    );
    outline: 2px dashed rgba(22, 30, 57, .3);
    outline-offset: -2px;
    border-radius: inherit;
}

    .sortable-ghost > * { visibility: hidden; }

.sortable-drag {
    box-shadow: 0 18px 36px -8px rgba(22, 30, 57, .35) !important;
    cursor: grabbing !important;
    opacity: 1 !important;
    filter: brightness(1.04);
    transition: none !important;
    pointer-events: none !important;
}

.qc-seq-ghost {
    visibility: hidden;
}

.qc-answer__check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(255,255,255,.18);
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.qc-answer__check--ok {
    background: #fff;
    border-color: #fff;
    color: var(--ans-bg, var(--green-color));
}

.qc-answer__order {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.qc-answer__order-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}

    .qc-answer__order-btn:hover:not(:disabled) { background: rgba(255,255,255,.32); }
    .qc-answer__order-btn:disabled { opacity: .35; cursor: not-allowed; }

.qc-answer__remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

    .qc-answer--neutral .qc-answer__remove { color: var(--gray-600); }
    .qc-answer__remove:hover { color: #fff; background: rgba(255,255,255,.18); border-radius: 50%; }

.qc-answer__input {
    flex: 1 1 auto;
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
    min-width: 0;
}

    .qc-answer__input::placeholder { color: rgba(255,255,255,.7); }
    .qc-answer__input:focus { background: rgba(255,255,255,.32); }

.qc-answer--neutral .qc-answer__input {
    background: #fff;
    color: var(--text-dark-color);
    border: 1px solid var(--gray-300);
}

.qc-answer__input--ta {
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 28px;
    field-sizing: content;
}

.qc-answer--neutral .qc-answer__input::placeholder { color: var(--text-gray-color); }

.qc-answer__input--full {
    flex: 1 1 auto;
    padding: 12px 14px;
    background: var(--gray-200);
    color: var(--text-dark-color);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

.qc-answer__input--full::placeholder {
    color: var(--text-gray-color);
}

.qc-match-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-match-grid__head,
.qc-match-pair {
    display: grid;
    grid-template-columns: 22px 1fr 1fr 28px;
    align-items: center;
    gap: 10px;
}

.qc-match-grid__head {
    padding: 0 12px;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qc-match-grid__head-cell:first-of-type { grid-column: 2; }
.qc-match-grid__head-cell:last-of-type { grid-column: 3; }

.qc-match-pair {
    background: var(--ans-bg, var(--gray-200));
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

.qc-match-pair--blue   { --ans-bg: #4B9FFF; }
.qc-match-pair--green  { --ans-bg: #1CCD9D; }
.qc-match-pair--yellow { --ans-bg: #FCAF2A; }
.qc-match-pair--red    { --ans-bg: #FF6951; }

.qc-match-pair__input {
    border: none;
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
    width: 100%;
    min-width: 0;
    line-height: 1.4;
    min-height: 28px;
    resize: none;
    overflow: hidden;
    field-sizing: content;
}

    .qc-match-pair__input::placeholder { color: rgba(255,255,255,.7); }
    .qc-match-pair__input:focus { background: rgba(255,255,255,.32); }

.qc-match-pair__remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
    padding: 0;
}

    .qc-match-pair__remove:hover { color: #fff; background: rgba(255,255,255,.18); }

@media (max-width: 599px) {
    .qc-match-grid__head { display: none; }

    .qc-match-pair {
        grid-template-columns: 22px 1fr 28px;
        grid-template-areas:
            "handle left   remove"
            "handle right  remove";
        row-gap: 6px;
    }

    .qc-match-pair__handle { grid-area: handle; }
    .qc-match-pair__remove { grid-area: remove; align-self: start; }
    .qc-match-pair__input:nth-of-type(1) { grid-area: left; }
    .qc-match-pair__input:nth-of-type(2) { grid-area: right; }
}

.qc-seq-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: var(--gray-200);
    align-items: center;
}

.qc-seq-zone--empty { color: var(--text-gray-color); font-size: 13px; }

.qc-seq-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--ans-bg, var(--blue-color));
    color: #fff;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(22, 30, 57, .12);

    max-width: 100%;
    cursor: grab;
    user-select: none;
}

    .qc-seq-block:active { cursor: grabbing; }

.qc-seq-block--blue   { --ans-bg: #4B9FFF; }
.qc-seq-block--green  { --ans-bg: #1CCD9D; }
.qc-seq-block--yellow { --ans-bg: #FCAF2A; }
.qc-seq-block--red    { --ans-bg: #FF6951; }

.qc-seq-block__order {
    min-width: 16px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 700;
}

.qc-seq-block__input {
    border: none;
    background: rgba(255,255,255,.22);
    color: #fff;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: var(--font-family);
    font-size: 13px;
    outline: none;
    min-width: 90px;

    width: auto;
    max-width: min(420px, 80vw);
    field-sizing: content;
}

    .qc-seq-block__input::placeholder { color: rgba(255,255,255,.75); }
    .qc-seq-block__input:focus { background: rgba(255,255,255,.36); }

.qc-seq-block__remove {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.22);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

    .qc-seq-block__remove:hover { background: rgba(255,255,255,.4); }

.qc-add-row {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--gray-500);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--blue-color);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
}

    .qc-add-row:disabled {
        opacity: .45;
        cursor: not-allowed;
        color: var(--gray-600);
        border-color: var(--gray-300);
    }

.qc-add-row--ghost { color: var(--gray-700); }

.qc-add-row__hint {
    margin: 4px 0 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.35;
}

.qc-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
    cursor: pointer;
}

.qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input),
.qc-setting-row > input[type="checkbox"]:not(.qc-switch__input) {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    margin: 0;
    background: var(--gray-300);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input)::before,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input)::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(22, 30, 57, .2);
        transition: transform .2s ease;
    }

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input):checked,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input):checked {
        background: var(--blue-color);
    }

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input):checked::before,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input):checked::before {
        transform: translateX(20px);
    }

    .qc-toggle-row > input[type="checkbox"]:not(.qc-switch__input):focus-visible,
    .qc-setting-row > input[type="checkbox"]:not(.qc-switch__input):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(75, 159, 255, .25);
    }

.qc-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
}

    .qc-setting-row:last-child { border-bottom: none; }

.qc-setting-row__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.qc-setting-row__title {
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.qc-setting-row__hint {
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.35;
}

.qc-setting-row__select,
.qc-setting-row__number {
    flex: 0 0 auto;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
    background: #fff;
    min-width: 140px;
    cursor: pointer;
}

.qc-setting-row__number {
    min-width: 96px;
    width: 96px;
    text-align: center;
}

    .qc-setting-row__select:focus,
    .qc-setting-row__number:focus {
        outline: none;
        border-color: var(--blue-color);
    }

.qc-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    cursor: pointer;
}

.qc-switch__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.qc-switch__track {
    position: absolute;
    inset: 0;
    background: var(--gray-300);
    border-radius: 999px;
    transition: background-color .2s ease;
    pointer-events: none;
}

.qc-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(22, 30, 57, .2);
    transition: transform .2s ease;
}

.qc-switch__input:checked + .qc-switch__track {
    background: var(--blue-color);
}

.qc-switch__input:checked + .qc-switch__track .qc-switch__thumb {
    transform: translateX(20px);
}

.qc-switch__input:focus-visible + .qc-switch__track {
    box-shadow: 0 0 0 3px rgba(75, 159, 255, .25);
}

.qc-switch__input:disabled + .qc-switch__track {
    opacity: .55;
    cursor: not-allowed;
}

.qc-toggle-row__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.qc-toggle-row__title {
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.qc-toggle-row__hint {
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.35;
}

.qc-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-size: 14px;
}

    .qc-input-row input {
        border: 1px solid var(--gray-300);
        border-radius: 10px;
        padding: 10px 12px;
        font-family: var(--font-family);
        font-size: 14px;
    }


.qc-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(246,246,247,0) 0%, var(--gray-200) 30%);
    display: flex;
    gap: 12px;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0));
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
    width: 100%;
    max-width: 750px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .qc-root {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
        gap: 12px;
    }

    .qc-card {
        padding: 24px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .qc-footer {
        position: static;
        background: transparent;
        margin-top: 0;
    }
}

/* ===== Test settings & privacy pages =========================== */

.ts-root {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
}

.ts-root--narrow { max-width: none; margin: 0; }

.ts-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ts-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ts-root .qc-footer {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.ts-header__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

.ts-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 14px -8px rgba(31, 46, 70, 0.1);
}

.ts-section--danger {
    background: rgba(255, 105, 81, .04);
    border: 1px solid rgba(255, 105, 81, .25);
}

.ts-section__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
}

.ts-section__sub {
    margin: 0;
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.4;
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-field__label {
    color: var(--text-gray-color);
    font-family: var(--font-family);
    font-size: 13px;
}

.ts-input,
.ts-textarea {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
    box-sizing: border-box;
}

.ts-textarea { min-height: 100px; resize: vertical; }

.ts-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
    text-align: left;
}

    .ts-picker__chevron {
        color: var(--gray-400);
        font-size: 20px;
        line-height: 1;
    }

    .ts-input:focus, .ts-textarea:focus {
        outline: none;
        border-color: var(--blue-color);
    }

.ts-plus-hint {
    background: var(--yellow-color);
    color: #fff;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
}

.ts-cover {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.ts-cover__preview {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    overflow: hidden;
    max-width: 312px;
}

.ts-cover__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    pointer-events: none;
    z-index: 0;
}

.ts-cover__chip,
.ts-cover__title,
.ts-cover__count { position: relative; z-index: 1; }

.ts-cover__chip {
    align-self: flex-start;
    background: rgba(255,255,255,.92);
    color: var(--text-dark-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.ts-cover__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
}

.ts-cover__count {
    margin: 12px 0 0;
    font-family: var(--font-family);
    font-size: 12px;
    opacity: .9;
}

.tp-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
}

    .tp-radio input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.tp-radio__indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gray-500);
    flex: 0 0 auto;
    position: relative;
}

.tp-radio input:checked + .tp-radio__indicator { border-color: var(--blue-color); }

.tp-radio input:checked + .tp-radio__indicator::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--blue-color);
}

.tp-code {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.tp-code__value {
    margin: 0;
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.2em;
    color: var(--text-dark-color);
}

.tp-code__copy,
.tp-code__regen {
    background: transparent;
    border: none;
    color: var(--blue-color);
    font-family: var(--font-family);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

    .tp-code__regen:disabled { opacity: .55; cursor: not-allowed; }

/* ===== Specific-people access (ViaLinkSome) ====== */

.tp-access {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tp-access__add {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.tc-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: var(--gray-200);
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark-color);
}

    .tc-input:disabled { opacity: .55; }

.tp-access__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-access__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: var(--gray-200);
}

.tp-access__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tp-access__name {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-access__email {
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-gray-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .ts-header { padding: 12px 16px; }

    .ts-root {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
    }

    .ts-form {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
    }
}

/* ===== Question type icon (matches MAUI QuestionTypeIcon) ====== */

.qti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 6px;
    flex: 0 0 auto;
}

.qti--sm { width: 22px; height: 22px; padding: 4px; border-radius: 6px; }
.qti--md { width: 28px; height: 28px; padding: 5px; }
.qti--lg { width: 40px; height: 40px; border-radius: 10px; padding: 7px; }

.qti__img { width: 100%; height: 100%; display: block; pointer-events: none; }

.qti--choice    { background: #4B9FFF; }
.qti--reorder   { background: #1CCD9D; }
.qti--match     { background: #FCAF2A; }
.qti--text      { background: #8B5CF6; }
.qti--sequence  { background: #FF6951; }
.qti--fill-gap  { background: #6C7589; }

/* ===== Language picker ========================================= */

.lp-root {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.lp-header__label {
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
}

.lp-header__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--gray-200);
    color: var(--text-gray-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color .15s ease, color .15s ease;
}

    .lp-header__arrow:hover {
        background: var(--blue-color);
        color: #fff;
    }

.mt-tag--with-flag { padding: 6px 14px 6px 8px; }

.lp-flag {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    background: var(--gray-200);
    box-shadow: 0 0 0 1px rgba(22, 30, 57, .08);
}

.lp-row .lp-flag {
    width: 28px;
    height: 20px;
    border-radius: 4px;
}


.lp-panel {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, .2);
    animation: ctm-slide-up .25s ease-out;
    box-sizing: border-box;
}

.lp-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--text-dark-color);
    font-size: 15px;
    text-align: left;
    transition: background-color .15s ease;
}

    .lp-row:hover { background: var(--gray-200); }

.lp-row--selected { background: rgba(75, 159, 255, .08); }

.lp-row__label { flex: 1 1 auto; }

.lp-row__check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #fff;
}

.lp-row__check--on {
    background: var(--blue-color);
    border-color: var(--blue-color);
}

@media (min-width: 768px) {
    .lp-panel {
        max-width: 460px;
        max-height: 70vh;
        border-radius: 24px;
        animation: ctm-fade-in .25s ease-out;
    }
}

/* ===== AI CTA on the home page ================================ */

.home-ai-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: linear-gradient(135deg, rgba(252, 175, 42, .14) 0%, rgba(252, 175, 42, .04) 100%);
    border: 1px solid rgba(252, 175, 42, .35);
    border-radius: 18px;
    padding: 16px 18px;
    cursor: pointer;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    text-align: left;
    transition: filter .15s ease, transform .1s ease;
    box-sizing: border-box;
}

    .home-ai-cta:hover { filter: brightness(1.03); border-color: rgba(252, 175, 42, .6); }
    .home-ai-cta:active { transform: scale(.99); }

.home-ai-cta__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(252, 175, 42, .2);
    color: var(--yellow-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-ai-cta__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.home-ai-cta__title {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home-ai-cta__sub {
    font-size: 13px;
    color: var(--text-gray-color);
    line-height: 1.35;
}

.home-ai-cta__chevron {
    flex: 0 0 auto;
    color: var(--text-gray-color);
    display: inline-flex;
    align-items: center;
}

/* ===== AI generation row in CreateTestModal ===================== */

.ctm-ai-row {
    background: rgba(252, 175, 42, .08);
    border: 1px solid rgba(252, 175, 42, .35);
    border-radius: 14px;
    padding: 12px 14px;
}

.ctm-ai-row__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(252, 175, 42, .15);
    color: var(--yellow-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ctm-ai-row--locked {
    background: rgba(252, 175, 42, .1);
    border-style: dashed;
}

    .ctm-ai-row--locked .qc-setting-row__title { color: var(--text-dark-color); }
    .ctm-ai-row--locked .qc-setting-row__hint { color: var(--text-gray-dark); }

/* AI questions-count input — minus / number / plus stepper. */
.ctm-ai-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: #fff;
    width: max-content;
}

.ctm-ai-count__step {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--gray-200);
    color: var(--text-dark-color);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ctm-ai-count__step:hover:not(:disabled) {
        background: var(--blue-color);
        color: #fff;
    }

    .ctm-ai-count__step:disabled { opacity: .4; cursor: not-allowed; }

.ctm-ai-count__input {
    width: 56px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark-color);
    outline: none;
    -moz-appearance: textfield;
}

    .ctm-ai-count__input::-webkit-outer-spin-button,
    .ctm-ai-count__input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* AI prompt textarea — same look as ctm-input but with vertical
   resize disabled and a tall default height. */
.ctm-input--ta {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-family);
    line-height: 1.45;
}

/* ===== Plus-required modal ===================================== */

.plus-required__panel {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    box-shadow: 0 -10px 30px -8px rgba(0,0,0,.2);
    margin: 0 16px;
}

.plus-required__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(75, 159, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plus-required__title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

.plus-required__sub {
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-gray-color);
    line-height: 1.4;
}

.plus-required__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .plus-required__panel { max-width: 420px; }
    .plus-required__actions { flex-direction: row; }
}

/* Header actions: create + import buttons grouped */
.mt-title-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mt-create-btn--secondary {
    background-color: transparent;
    color: var(--blue-color);
    box-shadow: none;
    border: 1px solid rgba(75, 159, 255, 0.4);
}

.mt-create-btn--busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Create-test modal: artwork tabs, glyph grid, layout segments and cover preview glyphs. */
.ctm-artwork-tabs,
.ctm-layout-segments {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ctm-layout-segments {
    margin-bottom: 0;
}

.ctm-artwork-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 12px;
    border: none;
    background: var(--background-color, #F2F4F7);
    color: var(--text-gray-dark-color, #5B6470);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ctm-artwork-tab--active {
    background: #4B9FFF;
    color: #fff;
}

.ctm-lock {
    flex: 0 0 auto;
}

.ctm-color {
    position: relative;
}

.ctm-color__lock {
    position: absolute;
    top: 5px;
    right: 5px;
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.ctm-glyph-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ctm-glyph__icon {
    width: 28px;
    height: 28px;
    pointer-events: none;
}

.ctm-mt-10 {
    margin-top: 10px;
}

.ctm-tonal-row {
    margin: 12px 0;
}

.ctm-preview__glyph {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.ctm-preview__glyph--corner {
    right: -18px;
    bottom: -22px;
    width: 96px;
    height: 96px;
    opacity: .24;
}

.ctm-preview__glyph--feature {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    opacity: .9;
}

.ctm-preview__tiles {
    position: absolute;
    inset: 0;
    background-size: 30px 30px;
    background-repeat: repeat;
    background-position: 8px 8px;
    opacity: .24;
    pointer-events: none;
    z-index: 0;
}

/* Creation flow chrome: the progress row and the cover preview stay pinned above the current step,
   matching the MAUI page where the preview is never rebuilt and only grows as choices land. */
.ctm-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    padding: 20px 0 12px;
}

.ctm-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ctm-progress__track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--gray-200);
    overflow: hidden;
}

.ctm-progress__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--blue-color);
    transition: width .26s ease-out;
}

.ctm-progress__label {
    flex: 0 0 auto;
    font-family: var(--font-family);
    font-size: 12px;
    color: var(--text-gray-color);
}

/* Scoring type: one card per option, the shape the MAUI step uses. */
.ctm-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: var(--background-color, #F2F4F7);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ctm-type__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-dark-color);
}

.ctm-type__hint {
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-gray-color);
}

.ctm-type__badge {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #CFDBED;
    color: #185FA5;
}

.ctm-type--active {
    background: var(--blue-color);
}

    .ctm-type--active .ctm-type__title,
    .ctm-type--active .ctm-type__hint {
        color: #fff;
    }

    .ctm-type--active .ctm-type__badge {
        background: rgba(255, 255, 255, .25);
        color: #fff;
    }

/* Artwork grid: four tiles per row for both patterns and glyphs, so the rows stay even. A pattern
   fills its tile the way it fills a cover — the assets carry a low fill-opacity and a small centred
   thumbnail of one is all but invisible — while a glyph is opaque line art and reads better centred. */
.ctm-artwork-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ctm-artwork-cell {
    position: relative;
    aspect-ratio: 16 / 11;
    width: 100%;
    border-radius: 10px;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 0 #fff;
    transition: transform .12s ease, box-shadow .12s ease;
    transform: scale(.95);
}

.ctm-artwork-cell--active {
    transform: scale(1);
    /* Selection is a ring rather than a dimming of the others: the pattern assets are already faint by
       design, and fading them further left the row looking empty. */
    box-shadow: inset 0 0 0 2.5px #fff;
}

.ctm-artwork-cell__pattern {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.ctm-artwork-cell__glyph {
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}

/* On the settings page the container is far wider than a phone, so the pickers are capped: without
   this the swatches stretch to the full column and stop matching the modal and the MAUI editor. */
.ts-section .ctm-colors,
.ts-section .ctm-artwork-grid,
.ts-section .ctm-artwork-tabs,
.ts-section .ctm-layout-segments,
.ts-section .ctm-tonal-row {
    max-width: 420px;
}

/* Generation state of the creation flow: it replaces the current step inside the dialog, so the cover
   stays on screen. Everything that moves is CSS — a Blazor Server circuit should not be pushing a render
   per frame for the whole minute the generator can take. */
.aig-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 8px 4px 4px;
}

.aig-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.aig-sparkle {
    position: absolute;
    width: var(--aig-size);
    height: var(--aig-size);
    color: var(--yellow-color, #FCAF2A);
    opacity: 0;
    animation: aig-drift var(--aig-duration) ease-in-out var(--aig-delay) infinite;
}

    .aig-sparkle svg {
        width: 100%;
        height: 100%;
        display: block;
    }

@keyframes aig-drift {
    0% { opacity: 0; transform: translateY(10px) scale(.6) rotate(0deg); }
    35% { opacity: .95; transform: translateY(-4px) scale(1) rotate(25deg); }
    70% { opacity: .5; transform: translateY(-14px) scale(.85) rotate(-15deg); }
    100% { opacity: 0; transform: translateY(-26px) scale(.6) rotate(10deg); }
}

.aig-core {
    position: relative;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.aig-core__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(75, 159, 255, .35);
    border-top-color: #4B9FFF;
    animation: aig-spin 2.4s linear infinite;
}

.aig-core__ring--slow {
    inset: 15px;
    border-color: rgba(252, 175, 42, .3);
    border-bottom-color: #FCAF2A;
    animation: aig-spin 3.6s linear reverse infinite;
}

@keyframes aig-spin {
    to { transform: rotate(360deg); }
}

.aig-core__star {
    width: 46px;
    height: 46px;
    color: #4B9FFF;
    animation: aig-pulse 2.2s ease-in-out infinite;
}

@keyframes aig-pulse {
    0%, 100% { transform: scale(.92); opacity: .85; }
    50% { transform: scale(1.06); opacity: 1; }
}

.aig-title {
    margin: 0;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-dark-color);
}

/* The caption is keyed on its text, so each new phrase mounts fresh and replays the fade. */
.aig-caption {
    margin: 0;
    min-height: 44px;
    max-width: 320px;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-gray-color);
    animation: aig-caption-in .5s ease-out;
}

@keyframes aig-caption-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .aig-sparkle,
    .aig-core__ring,
    .aig-core__star,
    .aig-caption {
        animation: none;
    }

    .aig-sparkle {
        opacity: .7;
    }
}