:root {
    --ztl-primary: #b14e00;
    --ztl-primary-text: #6f3100;
    --ztl-primary-dark: #5a2600;
    --ztl-orange: #ffbf75;
    --ztl-gold: #ffe08a;
    --ztl-mint: #c9f2dd;
    --ztl-sky: #c7e7ff;
    --ztl-pink: #ffd6e7;
    --ztl-twitch: #7a45e8;
    --ztl-twitch-dark: #7343e6;
    --ztl-state-on: #0b5d3b;
    --ztl-state-on-dark: #0f5132;
    --ztl-state-off: #8f1d14;
    --ztl-state-off-dark: #8f1d14;
    --ztl-ink: #1f2430;
    --ztl-muted: #4b5563;
    --ztl-line: #eadfd2;
    --ztl-control-border: #6f5f55;
    --ztl-surface: #ffffff;
    --ztl-soft: #fffaf4;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ztl-soft);
    color: var(--ztl-ink);
    padding-top: 78px;
}

.ztl-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(23, 21, 31, .08);
    backdrop-filter: blur(14px);
}

.ztl-topbar-spacer {
    min-height: 74px;
}

.ztl-page-kicker {
    color: var(--ztl-muted);
    font-size: .875rem;
}

.ztl-brandmark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--ztl-primary-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0;
}

.ztl-cta {
    background: var(--ztl-twitch);
    border-color: var(--ztl-twitch);
    color: #fff;
    box-shadow: 0 12px 24px rgba(137, 86, 251, .24);
    font-size: 1.18rem;
    font-weight: 700;
    white-space: nowrap;
}

.ztl-cta:hover,
.ztl-cta:focus {
    background: var(--ztl-twitch-dark);
    border-color: var(--ztl-twitch-dark);
    color: #fff;
}

.ztl-floating-cta {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1031;
    display: none;
}

.ztl-hero {
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    background:
        linear-gradient(120deg, rgba(199, 231, 255, .72), rgba(255, 214, 231, .52) 48%, rgba(255, 224, 138, .48)),
        #fff;
    border-bottom: 1px solid var(--ztl-line);
}

.ztl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(177, 78, 0, .28);
    background: rgba(255, 224, 138, .42);
    color: var(--ztl-primary-dark);
    border-radius: 999px;
    padding: .45rem .75rem;
    font-weight: 700;
    font-size: .9rem;
}

.ztl-accent-text {
    color: var(--ztl-primary-text);
}

.ztl-hero h1 {
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    line-height: .95;
    letter-spacing: 0;
    font-weight: 800;
}

.ztl-lead {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: #4b5563;
    max-width: 680px;
}

.ztl-permission-note {
    max-width: 760px;
    border: 1px solid rgba(177, 78, 0, .28);
    border-left: 4px solid var(--ztl-primary);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 224, 138, .34), rgba(255, 214, 231, .28));
    color: #3f1f16;
    padding: 1rem 1.15rem;
}

.ztl-stat {
    border-left: 4px solid var(--ztl-primary);
    padding-left: 1rem;
}

.ztl-stat-success {
    border-left-color: var(--ztl-state-on);
}

.ztl-stat-info {
    border-left-color: #2f75a8;
}

.ztl-dashboard {
    border: 1px solid rgba(23, 21, 31, .1);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 70px rgba(23, 21, 31, .12);
}

.ztl-dashboard-bar {
    background: linear-gradient(135deg, var(--ztl-sky), var(--ztl-mint));
    color: var(--ztl-ink);
    min-height: 48px;
}

.ztl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--ztl-primary);
}

.ztl-dot-success {
    background: var(--ztl-state-on);
}

.ztl-dot-info {
    background: #2f75a8;
}

.ztl-command-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: .75rem;
    align-items: center;
    border-bottom: 1px solid var(--ztl-line);
    padding: .85rem 1rem;
}

.ztl-command-row:last-child {
    border-bottom: 0;
}

.ztl-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(199, 231, 255, .72), rgba(201, 242, 221, .74));
    color: var(--ztl-primary-text);
}

.ztl-pill {
    border-radius: 999px;
    background: rgba(255, 224, 138, .42);
    color: var(--ztl-primary-dark);
    padding: .25rem .55rem;
    font-size: .78rem;
    font-weight: 700;
}

.ztl-section {
    padding: 5rem 0;
}

.ztl-section-white {
    background: #fff;
    border-top: 1px solid var(--ztl-line);
    border-bottom: 1px solid var(--ztl-line);
}

.ztl-feature-card {
    height: 100%;
    border: 1px solid var(--ztl-line);
    border-radius: 8px;
    background: var(--ztl-surface);
    padding: 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ztl-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 78, 0, .30);
    box-shadow: 0 14px 34px rgba(23, 21, 31, .08);
}

.ztl-feature-card h3 {
    font-size: 1.05rem;
    margin-bottom: .55rem;
}

.ztl-feature-card p {
    color: var(--ztl-muted);
    margin-bottom: 0;
}

.ztl-feature-card.is-upcoming {
    position: relative;
    background: linear-gradient(180deg, #fffaf4 0%, #fff2d5 100%);
    border-color: #b14e00;
    box-shadow: inset 0 0 0 1px rgba(177, 78, 0, .16);
}

.ztl-feature-card.is-upcoming::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: repeating-linear-gradient(
        135deg,
        var(--ztl-primary) 0,
        var(--ztl-primary) 10px,
        var(--ztl-sky) 10px,
        var(--ztl-sky) 20px
    );
    border-radius: 8px 8px 0 0;
}

.ztl-feature-card.is-upcoming .ztl-icon {
    background: rgba(255, 224, 138, .46);
    color: var(--ztl-primary-text);
}

.ztl-upcoming-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(177, 78, 0, .28);
    padding-top: .85rem;
    color: var(--ztl-primary-text);
    font-size: .88rem;
    font-weight: 700;
}

.ztl-status-upcoming {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--ztl-primary-text);
    border-radius: 999px;
    background: #fff2d5;
    color: var(--ztl-primary-text);
    padding: .28rem .62rem;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.ztl-flow-step {
    border-left: 4px solid var(--ztl-primary);
    background: #fff;
    border-radius: 0 8px 8px 0;
    padding: 1.15rem 1.25rem;
    height: 100%;
}

.ztl-flow-step.ztl-flow-step-success {
    border-left-color: var(--ztl-state-on);
}

.ztl-flow-step.ztl-flow-step-info {
    border-left-color: #2f75a8;
}

.ztl-final-band {
    background: linear-gradient(135deg, var(--ztl-sky), var(--ztl-mint));
    color: var(--ztl-ink);
}

.ztl-final-band p {
    color: var(--ztl-muted);
}

.ztl-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background: rgba(255, 250, 244, .96);
    color: var(--ztl-muted);
    border-top: 1px solid rgba(31, 36, 48, .10);
    padding: .45rem 0;
    font-size: .78rem;
    line-height: 1.35;
}

.ztl-footer a {
    color: var(--ztl-primary-text);
    font-weight: 700;
}

.ztl-logout {
    white-space: nowrap;
}

.ztl-logout.btn-outline-danger {
    background: #fff;
    border-color: var(--ztl-primary-text);
    color: var(--ztl-primary-text);
}

.ztl-logout.btn-outline-danger:hover,
.ztl-logout.btn-outline-danger:focus {
    background: var(--ztl-primary-dark);
    border-color: var(--ztl-primary-dark);
    color: #fff;
}

.ztl-theme .form-switch .form-check-input[type=checkbox] + .form-check-label[data-unchecked] {
    visibility: hidden;
}

.ztl-theme .form-switch .form-check-input[type=checkbox] + .form-check-label[data-unchecked]::before {
    content: attr(data-unchecked);
    visibility: visible;
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:checked + .form-check-label[data-checked] {
    visibility: hidden;
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:checked + .form-check-label[data-checked]::before {
    content: attr(data-checked);
    visibility: visible;
}

.ztl-theme .form-outline .form-control {
    border: 1px solid #1f2430;
}

.ztl-theme :focus-visible {
    outline: 3px solid var(--ztl-primary-text);
    outline-offset: 3px;
}

.ztl-theme .form-outline .form-control:not(:placeholder-shown) ~ .form-label,
.ztl-theme .form-outline .form-control:focus ~ .form-label,
.ztl-theme .form-outline .form-control.active ~ .form-label {
    transform: translateY(-1rem) translateY(.1rem) scale(.8);
    background-color: #fff;
    padding: 0 .5em;
}

.ztl-border-left-section {
    border-left: 2px solid rgba(177, 78, 0, .34);
}

.ztl-collapse-trigger {
    cursor: pointer;
    box-shadow: none;
}

.ztl-search-field {
    position: relative;
}

.ztl-search-field .form-control {
    padding-right: 2rem;
    border-bottom-color: var(--ztl-control-border) !important;
}

.ztl-search-clear {
    position: absolute;
    top: 50%;
    right: .25rem;
    z-index: 4;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    background: transparent;
    color: var(--ztl-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    opacity: .8;
    transition: color .15s ease, opacity .15s ease;
}

.ztl-search-clear:hover,
.ztl-search-clear:focus {
    color: var(--ztl-primary-dark);
    opacity: 1;
}

.ztl-search-clear[hidden] {
    display: none;
}

.ztl-card-smooth {
    transition: all .2s ease-in-out;
}

.ztl-inline-icon-small {
    font-size: .75rem;
}

.ztl-reward-card {
    border: 1px solid;
    border-color: var(--reward-background-color, var(--ztl-line));
    transition: all .2s ease-in-out;
}

.ztl-reward-card-header {
    height: 10vh;
    background-color: var(--reward-background-color);
}

.ztl-reward-card > .card-body > .card-title {
    font-size: .9rem;
    line-height: 1.2;
    height: 2.4rem;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.ztl-points-icon {
    vertical-align: middle;
}

.ztl-reward-card > .card-header > svg.audio,
.ztl-reward-card > .card-header > svg.image,
.ztl-reward-card > .card-header > svg.video,
.ztl-reward-card > .card-header > svg.tts {
    background: rgba(221, 221, 221, .5);
    border-radius: 50%;
    padding: .25rem;
    width: 1.75rem;
    float: left;
    position: absolute;
}

.ztl-reward-card > .card-header > svg.audio {
    top: .25rem;
    right: .25rem;
}

.ztl-reward-card > .card-header > svg.image {
    top: .25rem;
    left: .25rem;
}

.ztl-reward-card > .card-header > svg.tts {
    bottom: .25rem;
    left: .25rem;
}

.ztl-reward-card > .card-header > svg.video {
    bottom: .25rem;
    right: .25rem;
}

.ztl-reward-card > .card-header > svg.audio > path,
.ztl-reward-card > .card-header > svg.image > path,
.ztl-reward-card > .card-header > svg.tts > path,
.ztl-reward-card > .card-header > svg.video > path {
    fill: #000;
}

.ztl-theme .btn > .spinner {
    display: none;
    margin-right: 1em;
    vertical-align: middle;
}

.ztl-theme .btn:disabled > .spinner {
    display: inline-block;
}

.ztl-is-clickable {
    cursor: pointer;
}

.rotate-icon,
.rotate-180 {
    transition: transform .3s ease;
}

.collapsed .rotate-icon {
    transform: rotate(-90deg);
}

.more-actions-toggle:not(.collapsed) .rotate-180 {
    transform: rotate(180deg);
}

.ztl-scroll-panel {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.ztl-modal-wide {
    max-width: 1080px;
}

.chat-builder-sentence {
    background: linear-gradient(140deg, rgba(199, 231, 255, .66) 0%, rgba(255, 224, 138, .46) 100%);
    border: 1px solid var(--ztl-line);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.chat-builder-sentence .command-group {
    max-width: 280px;
    min-width: 220px;
}

.chat-builder-kanban {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.chat-builder-kanban.single-column {
    grid-template-columns: 1fr;
}

.chat-builder-column {
    border: 1px solid var(--ztl-line);
    border-radius: 1rem;
    background: var(--ztl-surface);
    box-shadow: 0 8px 24px rgba(31, 36, 48, .07);
    padding: .9rem;
}

.chat-builder-column h6 {
    margin-bottom: .3rem;
}

.chat-builder-column .help {
    color: var(--ztl-muted);
    font-size: .825rem;
    margin-bottom: .75rem;
}

.chat-builder-dropzone {
    min-height: 210px;
    border: 2px dashed #9fcdf1;
    border-radius: .9rem;
    background: #fff;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    transition: border-color .2s ease, background-color .2s ease;
}

.chat-builder-dropzone.is-over {
    border-color: var(--ztl-primary-text);
    background: #fff9e8;
}

.chat-builder-empty {
    color: var(--ztl-muted);
    text-align: center;
    border: 1px dashed var(--ztl-line);
    border-radius: .7rem;
    padding: 1.1rem .5rem;
    margin: auto 0;
}

.chat-builder-action {
    border: 1px solid var(--ztl-line);
    border-radius: .8rem;
    background: linear-gradient(180deg, #fff 0%, #fffaf4 100%);
    box-shadow: 0 6px 16px rgba(31, 36, 48, .08);
    padding: .65rem .7rem;
    cursor: grab;
}

.chat-builder-action.dragging {
    opacity: .55;
}

.chat-builder-action-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.chat-builder-action-title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ztl-primary-text);
}

.chat-builder-action .remove {
    border: 0;
    background: transparent;
    color: var(--bs-danger, #dc3545);
    font-size: 1rem;
    line-height: 1;
    padding: .2rem;
    cursor: pointer;
}

.chat-builder-action .remove:hover,
.chat-builder-action .remove:focus-visible {
    color: #b02a37;
}

.ztl-delete-all-chat-event-actions,
.ztl-delete-all-chat-event-actions:hover,
.ztl-delete-all-chat-event-actions:focus,
.ztl-delete-all-chat-event-actions:active {
    background-color: transparent !important;
    box-shadow: none !important;
}

.ztl-delete-all-chat-event-actions:hover,
.ztl-delete-all-chat-event-actions:focus-visible {
    color: #b02a37 !important;
}

.chat-builder-action textarea {
    resize: vertical;
    min-height: 66px;
}

.chat-multitext-entry .form-outline {
    min-width: 0;
}

.chat-multitext-control {
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--ztl-muted);
    font-size: .72rem;
    line-height: 1;
    padding: .3rem .35rem;
    opacity: .7;
}

.chat-multitext-control:hover,
.chat-multitext-control:focus-visible {
    opacity: 1;
}

.ztl-theme .btn-primary {
    background: var(--ztl-primary-dark);
    border-color: var(--ztl-primary-dark);
    color: #fff;
}

.ztl-theme .btn-primary:hover,
.ztl-theme .btn-primary:focus {
    background: #432000;
    border-color: #432000;
    color: #fff;
}

.ztl-theme .btn-outline-primary {
    border-color: var(--ztl-primary-text);
    color: var(--ztl-primary-text);
}

.ztl-theme .btn-outline-primary:hover,
.ztl-theme .btn-outline-primary:focus {
    background: var(--ztl-primary-dark);
    border-color: var(--ztl-primary-dark);
    color: #fff;
}

.ztl-theme .bg-primary {
    background-color: var(--ztl-primary-dark) !important;
}

.ztl-theme .text-primary {
    color: var(--ztl-primary-text) !important;
}

.ztl-theme .text-info,
.ztl-theme .text-primary-emphasis {
    color: var(--ztl-primary-text) !important;
}

.ztl-theme .bg-primary-subtle {
    background-color: rgba(255, 224, 138, .42) !important;
}

.ztl-theme .border-primary-subtle {
    border-color: rgba(177, 78, 0, .34) !important;
}

.ztl-command-card {
    border-color: var(--ztl-line);
}

.ztl-command-header {
    background: linear-gradient(135deg, rgba(199, 231, 255, .62), rgba(201, 242, 221, .60));
    border-bottom: 1px solid var(--ztl-line);
}

.ztl-command-header .command {
    color: var(--ztl-ink);
}

.ztl-command-header-active {
    background: linear-gradient(135deg, rgba(201, 242, 221, .78), rgba(199, 231, 255, .48));
    border-bottom: 1px solid rgba(35, 132, 95, .28);
}

.ztl-command-header.ztl-inactive-command {
    background: #fff1ef;
    border-color: rgba(180, 35, 24, .55);
    border-bottom: 1px solid rgba(180, 35, 24, .55);
    border-left: 5px solid var(--ztl-state-off);
    color: var(--ztl-state-off-dark);
}

.ztl-command-header.ztl-inactive-command .command {
    color: var(--ztl-state-off-dark);
}

.ztl-action-item {
    border: 1px solid var(--ztl-line);
    background: #fff;
}

.ztl-priority-badge {
    font-size: .6rem;
}

.ztl-action-meta {
    font-size: .65rem;
}

.ztl-action-description {
    font-size: .6rem;
}

.priority-badge.ztl-priority-success {
    background-color: var(--ztl-state-on);
    color: #fff;
}

.priority-badge.ztl-priority-warning {
    background-color: var(--ztl-gold);
    color: var(--ztl-ink);
}

.priority-badge.ztl-priority-danger {
    background-color: var(--ztl-state-off);
    color: #fff;
}

.priority-badge.ztl-priority-low {
    background-color: #fff;
    border: 1px solid var(--ztl-control-border);
    color: var(--ztl-ink);
}

.ztl-inactive-command {
    position: relative;
    background: #fff1ef;
    border-color: rgba(180, 35, 24, .55);
    border-bottom: 1px solid rgba(180, 35, 24, .55);
    border-left: 5px solid var(--ztl-state-off);
    color: var(--ztl-state-off-dark);
}

.ztl-inactive-command .command {
    color: var(--ztl-state-off-dark);
}

.ztl-inactive-action,
.ztl-action-item.ztl-inactive-action {
    background: #fff1ef;
    border-color: rgba(180, 35, 24, .55);
    border-left-color: var(--ztl-state-off);
    border-left-width: 5px;
    border-left-style: solid;
    color: var(--ztl-ink);
    opacity: 1;
}

.ztl-inactive-action .chat-builder-action-title,
.ztl-inactive-action .chat-action-title {
    color: var(--ztl-state-off-dark);
}

.ztl-inactive-action .priority-badge.ztl-priority-success {
    color: #fff;
}

.ztl-inactive-action .priority-badge.ztl-priority-warning,
.ztl-inactive-action .priority-badge.ztl-priority-low {
    color: var(--ztl-ink);
}

.ztl-inactive-action .priority-badge.ztl-priority-danger {
    color: #fff;
}

.ztl-theme .form-switch .form-check-input[type=checkbox] {
    background-color: var(--ztl-state-off) !important;
    border-color: var(--ztl-state-off-dark) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    cursor: pointer;
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:after {
    background-color: #fffaf4 !important;
    box-shadow: 0 1px 4px rgba(23, 21, 31, .28);
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:checked {
    background-color: var(--ztl-state-on) !important;
    border-color: var(--ztl-state-on-dark) !important;
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:checked:after {
    background-color: #fff !important;
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:focus {
    border-color: currentColor;
    box-shadow: 0 0 0 .2rem rgba(177, 78, 0, .22);
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:checked:focus {
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .22);
}

.ztl-theme .form-switch .form-check-input[type=checkbox] + .form-check-label {
    color: var(--ztl-state-off-dark);
    font-weight: 600;
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:checked + .form-check-label {
    color: var(--ztl-state-on-dark);
}

.ztl-theme .form-switch .form-check-input[type=checkbox]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.ztl-managed-channel-switcher {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    min-height: 32px;
    padding: .2rem .35rem;
    border: 1px solid var(--ztl-line);
    border-radius: .35rem;
    background: rgba(255, 255, 255, .62);
}

.ztl-managed-channel-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
}

.ztl-managed-channel-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    margin: 0;
    color: #6441a5;
}

.ztl-managed-channel-switcher .form-select {
    flex: 0 1 30ch;
    width: 30ch;
    max-width: 30ch;
    min-width: 8rem;
    height: 30px;
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.ztl-managed-channel-context {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 1 11rem;
    min-width: 0;
    height: 30px;
    padding: 0 .5rem;
    overflow: hidden;
    border: 1px solid rgba(13, 110, 253, .25);
    border-radius: .25rem;
    background: rgba(13, 110, 253, .07);
    color: var(--ztl-ink);
    font-size: .72rem;
    white-space: nowrap;
}

.ztl-managed-channel-context span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ztl-managed-channel-context i {
    flex: 0 0 auto;
    color: var(--ztl-twitch);
}

.ztl-managed-channel-context-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.ztl-managed-channel-context .ztl-managed-channel-context-close i {
    color: var(--ztl-muted);
}

.ztl-managed-channel-context-close:hover,
.ztl-managed-channel-context-close:focus-visible {
    background: rgba(31, 36, 48, .1);
    outline: none;
}

.ztl-managed-channel-context .ztl-managed-channel-context-close:hover i,
.ztl-managed-channel-context .ztl-managed-channel-context-close:focus-visible i {
    color: var(--ztl-ink);
}

.ztl-managed-channel-switcher .btn {
    flex: 0 0 auto;
    min-height: 30px;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.ztl-managed-channel-status {
    display: none;
    width: 100%;
    max-width: 100%;
    margin-top: .2rem;
    overflow: hidden;
    color: var(--ztl-muted);
    font-size: .7rem;
    line-height: 1.1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ztl-managed-channel-status:not(:empty) {
    display: block;
}

.ztl-twitch-reward-card {
    min-height: 18rem;
    overflow: hidden;
}

.ztl-twitch-reward-header {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 6.5rem;
    gap: 1rem;
    border: 0;
    border-bottom: 1px solid var(--ztl-line);
    background: color-mix(in srgb, var(--reward-background-color, #9147ff) 35%, white);
    color: inherit;
    cursor: pointer;
}

.ztl-twitch-reward-header:hover,
.ztl-twitch-reward-header:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--reward-background-color, #9147ff) 85%, transparent);
    outline-offset: -3px;
}

.ztl-twitch-reward-image {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}

.ztl-twitch-reward-add-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    gap: .5rem;
    border: 1px dashed var(--ztl-twitch);
    border-radius: .35rem;
    background: transparent;
    color: var(--ztl-twitch);
    cursor: pointer;
}

.ztl-twitch-reward-add-action:hover,
.ztl-twitch-reward-add-action:focus-visible {
    background: rgba(100, 65, 165, .08);
    outline: 2px solid var(--ztl-twitch);
}

.ztl-twitch-reward-add-action:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ztl-twitch-rewards-status:not(:empty),
.ztl-twitch-rewards-partial-error {
    padding: .65rem .8rem;
    border: 1px solid var(--ztl-line);
    border-radius: .35rem;
    background: rgba(100, 65, 165, .06);
}

.ztl-twitch-rewards-partial-error + .ztl-twitch-rewards-partial-error {
    margin-top: .5rem;
}

.ztl-reward-setting-group {
    padding: .75rem;
    border: 1px solid var(--ztl-line);
    border-radius: .35rem;
}

#edit_custom_reward_rewardImage {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

#edit_custom_reward .ztl-save-custom-reward:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

.ztl-counter-status:not(:empty) {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .65rem .8rem;
    border: 1px solid var(--ztl-line);
    border-radius: .35rem;
    background: rgba(177, 78, 0, .05);
    color: var(--ztl-muted);
}

.ztl-counter-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--ztl-line);
    border-radius: .5rem;
    background: var(--ztl-surface);
    box-shadow: 0 .25rem .8rem rgba(31, 36, 48, .06);
}

.ztl-counter-table-wrapper .table {
    min-width: 680px;
}

.ztl-counter-table-wrapper .table > :not(caption) > * > * {
    padding: .35rem .55rem;
    line-height: 1.2;
}

.ztl-counter-table-wrapper thead {
    background: rgba(255, 224, 138, .22);
}

.ztl-counter-table-wrapper tbody tr:not(.ztl-counter-empty-row):hover {
    background: rgba(199, 231, 255, .18);
}

.ztl-counter-command {
    display: inline;
    color: var(--ztl-ink);
    font-weight: 700;
    white-space: nowrap;
}

.ztl-counter-id,
.ztl-counter-game-note {
    display: inline;
    margin-left: .4rem;
    color: var(--ztl-muted);
    font-size: .72rem;
    font-weight: 400;
    white-space: nowrap;
}

.ztl-counter-game-note {
    width: 15rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

.ztl-counter-actions {
    width: 1%;
}

.ztl-counter-actions .btn {
    padding: .25rem .45rem;
    line-height: 1;
}

.ztl-game-selection-combobox {
    position: relative;
}

.ztl-game-selection-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + .35rem);
    right: 0;
    left: 0;
    max-height: min(18rem, 42vh);
    margin-top: 0;
    overflow-y: auto;
    border: 1px solid var(--ztl-line);
    border-radius: .35rem;
    background: var(--ztl-surface);
    box-shadow: 0 .35rem .9rem rgba(31, 36, 48, .12);
}

.ztl-game-selection-results[hidden] {
    display: none;
}

.ztl-game-selection-option {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--ztl-line);
    cursor: pointer;
}

.ztl-game-selection-option:last-child {
    border-bottom: 0;
}

.ztl-game-selection-option:hover,
.ztl-game-selection-option.is-active {
    background: rgba(199, 231, 255, .32);
}

.ztl-game-selection-option[aria-selected="true"] {
    background: rgba(255, 224, 138, .3);
}

.ztl-game-selection-option.is-active {
    outline: 2px solid var(--ztl-primary);
    outline-offset: -2px;
}

.ztl-game-selection-image,
.ztl-game-selection-image-placeholder {
    flex: 0 0 40px;
    width: 40px;
    height: 56px;
    margin-right: .65rem;
    border-radius: .2rem;
}

.ztl-game-selection-image {
    object-fit: cover;
}

.ztl-game-selection-image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 36, 48, .08);
    color: var(--ztl-muted);
}

.ztl-game-selection-option-copy {
    min-width: 0;
}

.ztl-game-selection-option-name,
.ztl-game-selection-option-id {
    display: block;
}

.ztl-game-selection-option-name {
    overflow: hidden;
    color: var(--ztl-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ztl-game-selection-option-id {
    color: var(--ztl-muted);
    font-size: .75rem;
}

.ztl-game-selection-status {
    min-height: 1.25rem;
    margin-top: .25rem;
    color: var(--ztl-muted);
}

.ztl-game-selection-status.is-error {
    color: var(--ztl-state-off);
}

@media (min-width: 1200px) {
    .ztl-counter-table-wrapper .table {
        min-width: 1100px;
    }

    .ztl-counter-table-wrapper .ztl-counter-group-start {
        padding-left: .8rem;
        border-left: 2px solid var(--ztl-line);
    }
}

.ztl-counter-message-fields {
    padding: 1rem;
    border: 1px solid var(--ztl-line);
    border-radius: .5rem;
    background: rgba(255, 250, 244, .55);
}

#edit_counter_form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#edit_counter_form .modal-body {
    overflow-y: auto;
}

.ztl-counter-modal[aria-busy="true"] {
    cursor: wait;
}

.ztl-counter-modal[aria-busy="true"] .modal-content {
    opacity: .86;
}

@media (max-width: 767.98px) {
    body {
        padding-top: 66px;
    }

    .ztl-topbar .ztl-cta {
        display: none;
    }

    .ztl-floating-cta {
        display: inline-flex;
        right: .75rem;
        left: .75rem;
        bottom: 3rem;
        justify-content: center;
    }

    .ztl-hero {
        min-height: auto;
        padding: 3.25rem 0 2.5rem;
    }

    .ztl-command-row {
        grid-template-columns: 36px 1fr;
    }

    .ztl-command-row .ztl-pill {
        grid-column: 2;
        justify-self: start;
    }

    .ztl-managed-channel-controls {
        gap: .25rem;
    }

    .ztl-managed-channel-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .ztl-managed-channel-context {
        flex-basis: 6rem;
        padding: 0 .35rem;
    }

    #create_counter .modal-footer .ztl-create-counter-submit {
        flex: 1 1 100%;
    }

    .ztl-counter-message-fields {
        padding: .75rem;
    }
}

@media (max-width: 991.98px) {
    .chat-builder-kanban {
        grid-template-columns: 1fr;
    }
}