.skpoll-page__header {
    margin-bottom: 32px;
}

.skpoll-page__header h1 {
    margin: 0 0 12px;
}

.skpoll-page__header p {
    margin: 0;
    max-width: 760px;
}

.skpoll-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.skpoll-tab {
    appearance: none;
    border: 1px solid #d7dce2;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
    transition: 0.2s ease;
}

.skpoll-tab:hover,
.skpoll-tab:focus-visible {
    border-color: #0f62fe;
    outline: none;
}

.skpoll-tab.is-active {
    background: #0f62fe;
    border-color: #0f62fe;
    color: #fff;
}

.skpoll-list {
    display: grid;
    gap: 16px;
}

.skpoll-card {
    border: 1px solid #e5e7eb;
    border-radius: var(--sk-radius-out);
    background: #fff;
    overflow: hidden;
}

.skpoll-card__toggle {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 20px;
    cursor: pointer;
    font: inherit;
    transition: all 0.2s ease-in-out;
}

.skpoll-card__toggle:hover,
.skpoll-card__toggle:focus-visible {
    outline: none;
    background: #f8fafc;
}

.skpoll-card__heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    align-items: center;
}

.skpoll-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

.skpoll-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    font-size: 0.9375rem;
}

.skpoll-card__date {
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skpoll-card__content {
    padding: 0 20px 20px;
    border-top: 1px solid #edf0f3;
}

.skpoll-card__excerpt {
    margin-top: 20px;
    font-weight: 600;
}

.skpoll-card__description {
    margin-top: 16px;
}

.skpoll-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.skpoll-badge--active {
    background: #dcfce7;
    color: #166534;
}

.skpoll-badge--closed {
    background: #fee2e2;
    color: #991b1b;
}

.skpoll-form {
    margin-top: 24px;
}

.skpoll-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.skpoll-form legend {
    font-weight: 700;
    margin-bottom: 14px;
}

.skpoll-options {
    display: grid;
    gap: 12px;
}

.skpoll-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.skpoll-option:has(input:checked) {
    border-color: var(--sk-accent);
    background: #f8fbff;
}

.skpoll-option:hover {
    border-color: var(--sk-accent);
    background: #f8fbff;
}

.skpoll-option input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.skpoll-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.skpoll-submit {
    appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    background: #0f62fe;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.skpoll-submit:hover,
.skpoll-submit:focus-visible {
    background: #0b54d6;
    outline: none;
}

.skpoll-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.skpoll-link {
    text-decoration: underline;
}

.skpoll-message {
    margin-top: 14px;
    color: #374151;
}

.skpoll-results {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #edf0f3;
}

.skpoll-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.skpoll-results__item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid #edf0f3;
    border-radius: 12px;
}

.skpoll-single__header {
    margin-bottom: 24px;
}

.skpoll-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.container--narrow {
    max-width: 860px;
}

@media (max-width: 767px) {
    .skpoll-page {
        padding: 32px 0;
    }

    .skpoll-card__heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .skpoll-card__meta {
        justify-content: flex-start;
    }

    .skpoll-card__toggle,
    .skpoll-card__content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .skpoll-option {
        padding: 12px 14px;
    }
}

html.sk-a11y .skpoll-page,
html.sk-a11y .skpoll-page *,
html.sk-a11y .skpoll-page *::before,
html.sk-a11y .skpoll-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.sk-a11y .skpoll-page,
html.sk-a11y .skpoll-page .container,
html.sk-a11y .skpoll-list,
html.sk-a11y .skpoll-card,
html.sk-a11y .skpoll-card__toggle,
html.sk-a11y .skpoll-card__heading,
html.sk-a11y .skpoll-card__content,
html.sk-a11y .skpoll-card__excerpt,
html.sk-a11y .skpoll-card__description,
html.sk-a11y .skpoll-form,
html.sk-a11y .skpoll-form fieldset,
html.sk-a11y .skpoll-options,
html.sk-a11y .skpoll-option,
html.sk-a11y .skpoll-results,
html.sk-a11y .skpoll-results__item,
html.sk-a11y .skpoll-single,
html.sk-a11y .skpoll-single__header,
html.sk-a11y .skpoll-single__meta,
html.sk-a11y .skpoll-page aside,
html.sk-a11y .skpoll-page article,
html.sk-a11y .skpoll-page section,
html.sk-a11y .skpoll-page [class*="bg-"],
html.sk-a11y .skpoll-page [class*="shadow"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.sk-a11y .skpoll-card,
html.sk-a11y .skpoll-card__content,
html.sk-a11y .skpoll-option,
html.sk-a11y .skpoll-results,
html.sk-a11y .skpoll-results__item,
html.sk-a11y .skpoll-tab,
html.sk-a11y .skpoll-badge,
html.sk-a11y .skpoll-submit,
html.sk-a11y .skpoll-page .sk-main-btn,
html.sk-a11y .skpoll-page input,
html.sk-a11y .skpoll-page select,
html.sk-a11y .skpoll-page textarea {
    border-color: #fff !important;
}

html.sk-a11y .skpoll-page h1,
html.sk-a11y .skpoll-page h2,
html.sk-a11y .skpoll-page h3,
html.sk-a11y .skpoll-page h4,
html.sk-a11y .skpoll-page p,
html.sk-a11y .skpoll-page li,
html.sk-a11y .skpoll-page span,
html.sk-a11y .skpoll-page div,
html.sk-a11y .skpoll-page label,
html.sk-a11y .skpoll-page legend,
html.sk-a11y .skpoll-page strong {
    color: #fff !important;
}

html.sk-a11y .skpoll-page a,
html.sk-a11y .skpoll-page a span,
html.sk-a11y .skpoll-link {
    color: #ffff00 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

html.sk-a11y .skpoll-tab,
html.sk-a11y .skpoll-card__toggle,
html.sk-a11y .skpoll-option,
html.sk-a11y .skpoll-badge,
html.sk-a11y .skpoll-submit,
html.sk-a11y .skpoll-page .sk-main-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
}

html.sk-a11y .skpoll-tab.is-active,
html.sk-a11y .skpoll-tab[aria-pressed="true"],
html.sk-a11y .skpoll-option:has(input:checked) {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border-color: #ffff00 !important;
    outline: 2px solid #ffff00 !important;
    outline-offset: 2px !important;
}

html.sk-a11y .skpoll-page :where(a, button, input, select, textarea, label):hover,
html.sk-a11y .skpoll-tab:hover,
html.sk-a11y .skpoll-card:hover,
html.sk-a11y .skpoll-card__toggle:hover,
html.sk-a11y .skpoll-card__heading:hover,
html.sk-a11y .skpoll-option:hover,
html.sk-a11y .skpoll-submit:hover,
html.sk-a11y .skpoll-page .sk-main-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    border-color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

html.sk-a11y .skpoll-page a:hover,
html.sk-a11y .skpoll-page a:hover span,
html.sk-a11y .skpoll-link:hover {
    color: #ffff00 !important;
}

html.sk-a11y .skpoll-page :where(a, button, input, select, textarea, label):focus-visible,
html.sk-a11y .skpoll-tab:focus-visible,
html.sk-a11y .skpoll-card__toggle:focus-visible,
html.sk-a11y .skpoll-option:focus-within,
html.sk-a11y .skpoll-submit:focus-visible,
html.sk-a11y .skpoll-page .sk-main-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
    outline: 4px solid #fff !important;
    outline-offset: 4px !important;
    box-shadow: none !important;
}

html.sk-a11y .skpoll-page input[type="radio"] {
    accent-color: #ffff00;
}