.ui-template-page { display: flex; flex-direction: column; gap: var(--sct-page-section-gap); }
.ui-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sct-card-gap); align-items: start; }
.ui-template-card { min-width: 0; overflow: visible; }
.ui-template-card[data-template-card] { padding: 0; overflow: hidden; }
.ui-template-card-header { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, auto); align-items: center; width: 100%; min-width: 0; min-height: calc(var(--sct-control-height) + 4px); box-sizing: border-box; column-gap: var(--sct-card-header-icon-gap); padding: var(--sct-card-padding); border: 0; border-bottom: 1px solid var(--sct-border); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); color: var(--sct-text); text-align: left; cursor: pointer; }
.ui-template-card[data-template-card] > .sct-card-subtitle,
.ui-template-card[data-template-card] > .ui-template-card-body,
.ui-template-card[data-template-card] > .ui-template-card-footer { padding-right: var(--sct-card-padding); padding-left: var(--sct-card-padding); }
.ui-template-card[data-template-card] > .ui-template-card-footer { padding-bottom: var(--sct-card-padding); }
.ui-template-card[data-template-card] > .ui-template-card-body:last-child { padding-bottom: var(--sct-card-padding); }
.ui-template-card[data-template-card].is-collapsed > .ui-template-card-header { border-bottom: 0; }
.ui-template-card-icon { width: calc(var(--sct-card-header-icon-size-pct) * 0.01 * var(--sct-control-height)); height: calc(var(--sct-card-header-icon-size-pct) * 0.01 * var(--sct-control-height)); flex: 0 0 auto; --sct-icon-size: calc(var(--sct-card-header-icon-size-pct) * 0.01 * var(--sct-control-height)); margin-left: var(--sct-card-header-icon-indent); }
.ui-template-card-heading { display: grid; gap: 3px; min-width: 0; }
.ui-template-card-heading strong { font-size: 1rem; }
.ui-template-card-collapse-icon { display: none; }
.ui-template-card-heading small, .ui-template-card-subtitle, .ui-template-note span { color: color-mix(in srgb, var(--sct-text) 70%, white 30%); }
.ui-template-card-tools { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; max-width: 100%; gap: var(--sct-row-action-gap); overflow: hidden; }
.ui-template-card-tools > button:has(.sct-icon) { gap: 8px; }
.ui-template-card-tools > button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-card.is-collapsed .ui-template-card-tools--collapse-hidden { display: none; }
.ui-template-range-pill { display: inline-flex; align-items: center; gap: 6px; min-height: var(--sct-control-height); padding: 0 7px; border: 1px solid color-mix(in srgb, var(--sct-border) 82%, white 18%); border-radius: 999px; background: color-mix(in srgb, var(--sct-surface-alt) 86%, black 14%); }
.ui-template-range-pill input[type='range'] { flex: 1 1 auto; width: 100%; min-width: 0; }
.ui-template-row-cell .ui-template-range-pill { width: 100%; height: var(--sct-control-height); min-height: var(--sct-control-height); box-sizing: border-box; }
.ui-template-density-control input { width: 94px; }
.ui-template-card.is-collapsed > .sct-card-subtitle, .ui-template-card.is-collapsed > .ui-template-card-body, .ui-template-card.is-collapsed > .ui-template-card-footer { display: none; }
.ui-template-card-body { display: flex; flex-direction: column; gap: var(--sct-card-gap); }
.ui-template-card-footer { align-items: center; }
.ui-template-card-footer .sct-card-footer-actions > button:has(.sct-icon) { gap: 8px; }
.ui-template-card-footer .sct-card-footer-actions > button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sct-card-gap); }
.ui-template-note { display: grid; gap: 5px; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-filter-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .38fr) minmax(150px, .38fr); gap: var(--sct-row-field-gap); --ui-template-subtext-space: 0px; }
.ui-template-filter-flags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(33.333% + var(--sct-row-field-gap) + var(--sct-row-field-gap)); gap: var(--sct-row-field-gap); }
.ui-template-filter-flags-label { grid-column: 1 / -1; color: color-mix(in srgb, var(--sct-text) 72%, white 28%); font-size: var(--sct-row-title-size); font-weight: 700; }
.ui-template-filter-flag { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: calc(var(--sct-row-title-size) * 1.2) 5px var(--sct-control-height); min-width: 0; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-filter-flag strong { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; font-size: var(--sct-row-title-size); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-filter-flag::after { grid-column: 2; grid-row: 1; width: calc(var(--sct-row-title-size) * 1.2); height: calc(var(--sct-row-title-size) * 1.2); content: ''; background: currentColor; mask: var(--ui-template-filter-flag-icon) center / contain no-repeat; -webkit-mask: var(--ui-template-filter-flag-icon) center / contain no-repeat; }
.ui-template-filter-flag[data-template-filter-key='moderator'] { --ui-template-filter-flag-icon: url('/assets/ui-icons/Crown%20Icon.PNG'); }
.ui-template-filter-flag[data-template-filter-key='test'] { --ui-template-filter-flag-icon: url('/assets/ui-icons/Vial%20Icon.PNG'); }
.ui-template-filter-flag[data-template-filter-key='bot'] { --ui-template-filter-flag-icon: url('/assets/ui-icons/Robot%20Icon.PNG'); }
.ui-template-filter-flag[data-template-filter-key='active'] { --ui-template-filter-flag-icon: url('/assets/ui-icons/Chat%20Icon.PNG'); }
.ui-template-filter-flag [role='group'] { grid-column: 1 / -1; grid-row: 3; display: inline-flex; justify-self: start; gap: 6px; }
.ui-template-filter-flag button { display: grid; place-items: center; width: var(--sct-control-height); min-width: var(--sct-control-height); min-height: var(--sct-control-height); padding: 0; border: 1px solid var(--sct-border); border-radius: 7px; background: var(--sct-surface); color: color-mix(in srgb, var(--sct-text) 72%, white 28%); }
.ui-template-filter-flag button .sct-icon { --sct-icon-size: 13px; }
.ui-template-filter-flag button[aria-pressed='true'][data-template-filter-state='include'] { background: var(--sct-button-accept); color: var(--sct-button-accept-text); }
.ui-template-filter-flag button[aria-pressed='true'][data-template-filter-state='exclude'] { background: var(--sct-button-cancel); color: var(--sct-button-cancel-text); }
.ui-template-filter-results { display: grid; gap: 7px; }
.ui-template-filter-result-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sct-row-field-gap); font-size: var(--sct-row-title-size); }
.ui-template-filter-result-header span { color: color-mix(in srgb, var(--sct-text) 68%, white 32%); }
.ui-template-filter-result-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sct-row-field-gap); }
.ui-template-filter-result { display: grid; gap: 3px; align-items: center; min-width: 0; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-filter-result[hidden] { display: none; }
.ui-template-filter-result strong, .ui-template-filter-result span:not(.sct-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-filter-result span:not(.sct-icon) { color: color-mix(in srgb, var(--sct-text) 68%, white 32%); font-size: 11px; }
.ui-template-input-row { display: grid; grid-template-columns: 58px max-content minmax(140px, 1.5fr) 92px max-content 120px 140px 72px var(--sct-control-height); gap: var(--sct-row-field-gap); align-items: start; overflow-x: auto; padding-bottom: 3px; --ui-template-subtext-space: 0px; }
.ui-template-input-row:has(.ui-template-row-cell > small:not(:empty)), .ui-template-list-row:has(.ui-template-row-cell > small:not(:empty)), .ui-template-aligned-fields:has(.ui-template-row-cell > small:not(:empty)) { --ui-template-subtext-space: calc(var(--sct-row-subtext-size) * 1.35 + 5px); }
.ui-template-row-cell { display: grid; grid-template-rows: calc(var(--sct-row-title-size) * 1.2) 5px var(--sct-control-height) var(--ui-template-subtext-space, 0px); align-items: center; min-width: 0; gap: 0; }
.ui-template-row-cell > :first-child { grid-row: 1; }
.ui-template-row-cell > :nth-child(2) { grid-row: 3; }
.ui-template-row-cell > :nth-child(3) { grid-row: 4; }
.ui-template-row-label, .ui-template-row-slot { overflow: hidden; min-height: 0; line-height: 1.2; }
.ui-template-row-label { color: color-mix(in srgb, var(--sct-text) 74%, white 26%); font-size: var(--sct-row-title-size); text-overflow: ellipsis; white-space: nowrap; }
.ui-template-row-cell small { min-width: 0; overflow: hidden; align-self: center; color: color-mix(in srgb, var(--sct-text) 64%, white 36%); font-size: var(--sct-row-subtext-size); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-row-content { box-sizing: border-box; width: 100%; height: var(--sct-control-height); min-height: var(--sct-control-height); margin: 0; }
.ui-template-search-input { position: relative; display: block; }
.ui-template-search-input input { width: 100%; padding-right: calc(var(--sct-control-height) + 24px); }
.ui-template-search-actions { position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; gap: 8px; transform: translateY(-50%); }
.ui-template-search-actions > .sct-icon, .ui-template-search-clear .sct-icon { --sct-icon-color: #000000; --sct-icon-size: 15px; }
.ui-template-search-clear { display: grid; place-items: center; width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ui-template-search-clear:hover { background: transparent; }
.ui-template-search-clear:focus-visible { outline: 2px solid #000000; outline-offset: 1px; }
.ui-template-search-clear[hidden] { display: none; }
.ui-template-page input[type='text'], .ui-template-page input[type='search'], .ui-template-page input[type='number'], .ui-template-page select, .ui-template-page textarea { border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); color: var(--sct-input-text); box-sizing: border-box; font: inherit; }
.ui-template-page input[type='text'], .ui-template-page input[type='search'], .ui-template-page input[type='number'], .ui-template-page select { height: var(--sct-control-height); min-height: var(--sct-control-height); padding: 0 var(--sct-control-padding-x, 10px); }
.ui-template-search-input input[type='text'] { padding-right: calc(var(--sct-control-height) + 24px); }
.ui-template-select { position: relative; display: block; min-width: 0; }
.ui-template-native-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-template-select-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; height: var(--sct-control-height); min-height: var(--sct-control-height); padding: 0 var(--sct-control-padding-x, 10px); border: 1px solid var(--sct-select-border); border-radius: 8px; background: var(--sct-select-bg); color: var(--sct-select-text); box-sizing: border-box; font: inherit; text-align: left; cursor: pointer; }
.ui-template-select-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-select-trigger .sct-icon { --sct-icon-size: var(--sct-button-icon-size); --sct-icon-color: currentColor; }
.ui-template-select-trigger[aria-expanded='true'] { outline: 2px solid #ffffff; outline-offset: 1px; }
.ui-template-select-menu { position: fixed; z-index: 30; display: grid; overflow: hidden; padding: 4px; border: 1px solid var(--sct-select-border); border-radius: 8px; background: var(--sct-select-bg); box-shadow: 0 12px 28px rgb(0 0 0 / .35); box-sizing: border-box; }
.ui-template-select-menu[hidden] { display: none; }
.ui-template-select-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: var(--sct-control-height); padding: 0 var(--sct-control-padding-x, 10px); border: 0; border-radius: 5px; background: transparent; color: var(--sct-select-text); font: inherit; text-align: left; cursor: pointer; }
.ui-template-select-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-select-option-thumbnail { width: calc(var(--sct-control-height) - 8px); height: calc(var(--sct-control-height) - 8px); border-radius: 50%; object-fit: cover; }
.ui-template-select-option:hover, .ui-template-select-option:focus-visible { background: var(--sct-primary-hover); outline: 0; }
.ui-template-shop-patterns { gap: calc(var(--sct-card-gap) * 1.5); }
.ui-template-shop-item { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sct-row-field-gap); padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-shop-previews { display: flex; gap: var(--sct-row-field-gap); }
.ui-template-shop-preview { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); }
.ui-template-shop-preview-square { width: calc(var(--sct-control-height) * 2); aspect-ratio: 1; }
.ui-template-shop-preview-avatar { width: calc(var(--sct-control-height) * 4 / 3); aspect-ratio: 2 / 3; }
.ui-template-shop-preview img, .ui-template-shop-artist-preview img, .ui-template-shop-preview-card img, .ui-template-shop-round-preview img { width: 100%; height: 100%; object-fit: contain; }
.ui-template-shop-item-fields { display: grid; gap: var(--sct-row-field-gap); min-width: 0; }
.ui-template-shop-inline-row, .ui-template-shop-action-row { display: flex; align-items: flex-start; gap: var(--sct-row-field-gap); min-width: 0; }
.ui-template-shop-name-price-row { gap: calc(var(--sct-row-field-gap) * 2); }
.ui-template-shop-artist-row { gap: calc(var(--sct-row-field-gap) * 2); }
.ui-template-shop-artist-select-group { display: flex; flex: 1 1 260px; align-items: flex-start; gap: var(--sct-row-field-gap); min-width: 0; }
.ui-template-shop-artist-select-group .ui-template-shop-inline-field-grow { flex: 1 1 auto; }
.ui-template-shop-inline-field { display: flex; align-items: center; gap: var(--sct-row-field-gap); min-width: 0; color: var(--sct-text); font-weight: 700; white-space: nowrap; }
.ui-template-shop-inline-field > input, .ui-template-shop-inline-field > .ui-template-select { flex: 1 1 auto; min-width: 0; }
.ui-template-shop-inline-field > input, .ui-template-shop-inline-field .ui-template-select-trigger, .ui-template-shop-inline-field .ui-template-number-input { font-weight: 400; }
.ui-template-shop-inline-field-grow > input[type='text'] { font-weight: 400 !important; }
.ui-template-shop-inline-field-grow { flex: 1 1 260px; }
.ui-template-shop-spore-field, .ui-template-shop-step-field { position: relative; flex: 0 1 210px; }
.ui-template-shop-artist-row .ui-template-shop-spore-field, .ui-template-shop-artist-row .ui-template-shop-step-field { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: var(--sct-control-height) auto; column-gap: var(--sct-row-field-gap); row-gap: 4px; padding-bottom: 0; }
.ui-template-shop-artist-row .ui-template-shop-spore-field > span:first-child, .ui-template-shop-artist-row .ui-template-shop-step-field > span:first-child { grid-column: 1; grid-row: 1; align-self: center; }
.ui-template-shop-artist-row .ui-template-shop-spore-field > .ui-template-number-input, .ui-template-shop-artist-row .ui-template-shop-step-field > .ui-template-number-input { grid-column: 2; grid-row: 1; }
.ui-template-shop-spore-field > .ui-template-number-input, .ui-template-shop-step-field > .ui-template-number-input { flex: 1 1 auto; min-width: 0; }
.ui-template-shop-spore-field > .ui-template-number-input { grid-template-columns: minmax(0, 1fr) 18px auto; }
.ui-template-shop-spore-field > .ui-template-number-input::after { width: var(--sct-button-icon-size); height: var(--sct-button-icon-size); content: ''; background: currentColor; mask: url('/assets/ui-icons/Spore%20Icon.PNG') center / contain no-repeat; -webkit-mask: url('/assets/ui-icons/Spore%20Icon.PNG') center / contain no-repeat; }
.ui-template-shop-spore-field small, .ui-template-shop-step-field small { position: absolute; bottom: 0; left: 0; color: color-mix(in srgb, var(--sct-text) 64%, white 36%); font-size: var(--sct-row-subtext-size); font-weight: 400; }
.ui-template-shop-artist-row .ui-template-shop-spore-field small, .ui-template-shop-artist-row .ui-template-shop-step-field small { position: static; grid-column: 2; grid-row: 2; justify-self: start; }
.ui-template-shop-spore-field small strong, .ui-template-shop-step-field small strong { color: var(--sct-text); font-weight: 700; }
.ui-template-shop-adjusted-price { display: grid; grid-template-columns: auto minmax(3ch, auto) auto; align-items: center; gap: 6px; height: var(--sct-control-height); color: color-mix(in srgb, var(--sct-text) 74%, white 26%); white-space: nowrap; }
.ui-template-shop-adjusted-price .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-shop-adjusted-price strong { display: grid; place-items: center; min-width: 3ch; font-size: var(--sct-control-height); line-height: 1; }
.ui-template-shop-artist-preview { display: grid; place-items: center; width: var(--sct-control-height); height: var(--sct-control-height); flex: 0 0 auto; overflow: hidden; border: 1px solid var(--sct-input-border); border-radius: 50%; background: var(--sct-input-bg); }
.ui-template-shop-upload-preview { display: grid; place-items: center; width: var(--sct-control-height); height: var(--sct-control-height); overflow: hidden; border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); }
.ui-template-shop-upload-preview .sct-icon { --sct-icon-size: 18px; }
.ui-template-shop-action-row .sct-upload-button { min-height: var(--sct-control-height); }
.ui-template-shop-default-control { min-height: var(--sct-control-height); }
.ui-template-shop-divider, .ui-template-page-divider { width: 75%; height: 4px; clip-path: polygon(0 37.5%, 19% 25%, 35% 0, 65% 0, 81% 25%, 100% 37.5%, 100% 62.5%, 81% 75%, 65% 100%, 35% 100%, 19% 75%, 0 62.5%); }
.ui-template-shop-divider { margin: var(--sct-card-gap) auto; background: linear-gradient(to bottom, transparent 0 1px, #000000 1px 3px, transparent 3px 4px) center / 62% 4px no-repeat, #000000; }
.ui-template-page-divider { --ui-template-divider-spacing: calc(var(--sct-page-section-gap) * 2); margin-block: var(--ui-template-divider-spacing); margin-inline: auto; background: linear-gradient(to bottom, transparent 0 1px, #000000 1px 3px, transparent 3px 4px) center / 62% 4px no-repeat, #000000; }
.ui-template-shop-reference-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: var(--sct-card-gap); align-items: center; }
.ui-template-shop-preview-collection { display: flex; align-items: end; gap: var(--sct-card-gap); }
.ui-template-shop-preview-collection > div { display: grid; gap: 6px; color: color-mix(in srgb, var(--sct-text) 74%, white 26%); font-size: var(--sct-row-title-size); }
.ui-template-shop-preview-card, .ui-template-shop-round-preview { display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); }
.ui-template-shop-round-preview { border-radius: 50%; }
.ui-template-shop-preview-card-wide { width: 108px; }
@media (max-width: 760px) { .ui-template-shop-item { grid-template-columns: 1fr; } .ui-template-shop-inline-row { flex-wrap: wrap; } .ui-template-shop-inline-field-grow { flex-basis: 100%; } .ui-template-shop-reference-grid { grid-template-columns: 1fr; } }
.ui-template-page textarea { padding: 8px var(--sct-control-padding-x, 10px); }
.ui-template-row-icon .sct-icon { grid-row: 1 / 4; align-self: center; width: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); height: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); min-width: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); min-height: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); --sct-icon-size: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); }
.ui-template-checkbox-control { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: max-content; min-width: 0; border: 1px solid #ffffff; border-radius: 8px; background: color-mix(in srgb, var(--sct-select-bg) 72%, black 28%); color: var(--sct-select-text); padding: 0 var(--sct-control-padding-x, 10px); cursor: pointer; font: inherit; white-space: nowrap; }
.ui-template-checkbox-control:has(input:checked) { background: var(--sct-select-bg); outline: 2px solid #ffffff; outline-offset: 1px; }
.ui-template-checkbox-box { position: relative; display: grid; place-items: center; width: calc(var(--sct-control-height) * var(--sct-checkbox-scale-percent) / 100); height: calc(var(--sct-control-height) * var(--sct-checkbox-scale-percent) / 100); flex: 0 0 auto; }
.ui-template-checkbox-box input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-template-checkbox-box input:focus-visible { outline: 2px solid color-mix(in srgb, var(--sct-primary) 64%, white 36%); outline-offset: 2px; }
.ui-template-checkbox-icon { grid-area: 1 / 1; --sct-icon-size: calc(var(--sct-control-height) * var(--sct-checkbox-scale-percent) / 100); pointer-events: none; }
.ui-template-checkbox-icon-selected { display: none; }
.ui-template-checkbox-box:has(input:checked) .ui-template-checkbox-icon-unselected { display: none; }
.ui-template-checkbox-box:has(input:checked) .ui-template-checkbox-icon-selected { display: inline-block; }
.ui-template-upload-cell { grid-template-columns: max-content 58px; column-gap: var(--sct-row-field-gap); width: max-content; }
.ui-template-upload-cell .sct-upload-control { grid-row: 3; width: max-content; align-self: stretch; }
.ui-template-upload-cell .sct-upload-button { width: max-content; height: var(--sct-control-height); min-height: var(--sct-control-height); }
.ui-template-upload-cell .sct-upload-file-name { display: none; }
.ui-template-upload-preview { grid-column: 2; grid-row: 1 / 4; display: grid; place-items: center; width: 58px; height: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); overflow: hidden; border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); color: color-mix(in srgb, var(--sct-text) 62%, white 38%); }
.ui-template-upload-preview .sct-icon { --sct-icon-size: 18px; }
.ui-template-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.ui-template-upload-preview:has(img:not([hidden])) > .sct-icon { display: none; }
.ui-template-color-cell { width: calc(var(--sct-control-height) * 2); }
.ui-template-color-cell input { width: auto; aspect-ratio: 2 / 1; appearance: none; -webkit-appearance: none; padding: 4px; border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); cursor: pointer; }
.ui-template-color-cell input::-webkit-color-swatch-wrapper { padding: 0; }
.ui-template-color-cell input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.ui-template-media-layout { display: grid; grid-template-columns: minmax(160px, auto) minmax(180px, 1fr); gap: var(--sct-card-gap); align-items: center; }
.ui-template-video-preview { position: relative; display: grid; place-items: center; min-height: 142px; overflow: hidden; border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); color: color-mix(in srgb, var(--sct-text) 74%, white 26%); }
.ui-template-video-empty { display: grid; justify-items: center; gap: 5px; }
.ui-template-video-preview .sct-icon { --sct-icon-size: 30px; }
.ui-template-video-preview small { font-size: 12px; }
.ui-template-video-preview video { width: 100%; height: 100%; min-height: 142px; object-fit: contain; background: #000000; }
.ui-template-video-status { position: absolute; right: 8px; bottom: 7px; left: 8px; overflow: hidden; color: var(--sct-text); text-align: center; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / .8); }
.ui-template-video-status:empty { display: none; }
.ui-template-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sct-row-field-gap); }
.ui-template-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: center; gap: 6px; min-width: 0; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 80%, black 20%); }
.ui-template-stat .sct-icon { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; --sct-icon-size: 20px; }
.ui-template-stat span:not(.sct-icon) { grid-column: 1; grid-row: 1; overflow: hidden; color: color-mix(in srgb, var(--sct-text) 74%, white 26%); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-stat strong { grid-column: 1; grid-row: 2; font-size: 18px; }
.ui-template-stack { display: flex; flex-direction: column; gap: var(--sct-card-gap); }
.ui-template-pill-row, .ui-template-button-grid { display: flex; flex-wrap: wrap; gap: var(--sct-row-action-gap); }
.ui-template-expanded-pill-row { display: flex; flex-wrap: wrap; gap: var(--sct-row-action-gap); }
/* Darker than the shared toolbar pill styling since these sit nested inside a card on this page */
.ui-template-expanded-pill-row .current-session-pill,
.ui-template-expanded-pill-row .current-poll-pill,
.ui-template-expanded-pill-row .listener-status { background: color-mix(in srgb, var(--sct-surface) 65%, black 35%); }
.ui-template-expanded-pill { max-width: min(100%, 420px); }
.ui-template-button-groups { display: grid; gap: calc(var(--sct-row-action-gap) * 1.5); }
.ui-template-status-pill { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; padding: 6px 9px; border: 1px solid var(--sct-border); border-radius: 999px; background: color-mix(in srgb, var(--sct-surface) 65%, black 35%); font-size: 12px; }
.ui-template-status-pill .sct-icon { grid-row: span 2; --sct-icon-size: 16px; }
.ui-template-status-pill span:not(.sct-icon) { color: color-mix(in srgb, var(--sct-text) 72%, white 28%); }
.ui-template-status-pill.is-live { border-color: color-mix(in srgb, var(--sct-button-accept) 70%, white 30%); background: color-mix(in srgb, var(--sct-button-accept) 35%, black 65%); }
.ui-template-status-pill.is-muted { opacity: .72; }
.ui-template-button-grid button { display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; min-height: var(--sct-control-height); }
.ui-template-button-grid .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-button-grid button.is-active { outline: 2px solid color-mix(in srgb, var(--sct-primary) 64%, white 36%); outline-offset: 1px; }
.ui-template-icon-button-grid { margin-top: calc(var(--sct-row-action-gap) * -1); }
.ui-template-action-icon-button { display: grid; place-items: center; justify-content: center; width: var(--sct-control-height); min-width: var(--sct-control-height); height: var(--sct-control-height); min-height: var(--sct-control-height); padding: 0; }
.ui-template-button-grid .ui-template-action-icon-button { justify-content: center; }
.ui-template-action-icon-button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-remove-cell .ui-template-action-icon-button { justify-self: center; }
.ui-template-list-row .ui-template-remove-cell > button,
.ui-template-catalog .ui-template-remove-cell > button { display: grid; place-items: center; justify-content: center; justify-self: center; width: var(--sct-control-height); min-width: var(--sct-control-height); height: var(--sct-control-height); min-height: var(--sct-control-height); padding: 0; }
.ui-template-list-row .ui-template-remove-cell > button .sct-icon,
.ui-template-catalog .ui-template-remove-cell > button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-preview { min-height: 156px; display: grid; place-items: center; padding: var(--sct-card-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-bg) 76%, var(--sct-surface) 24%); }
.ui-template-preview-message { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: min(100%, 440px); padding: 9px; border: 1px solid var(--sct-chat-item-border-color); border-radius: var(--sct-chat-item-radius); background: var(--sct-chat-item-bg); color: var(--sct-chat-item-text-color); }
.ui-template-preview-message .sct-icon { --sct-icon-size: 23px; }
.ui-template-preview-message div { display: grid; gap: 3px; min-width: 0; }
.ui-template-preview-message div span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-preview-message b { color: var(--sct-button-accept); }
.ui-template-list-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--sct-card-gap) * 1.5); }
.ui-template-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sct-row-field-gap); }
.ui-template-grid-field { display: grid; grid-template-rows: calc(var(--sct-row-title-size) * 1.2) 5px var(--sct-control-height); gap: 0; min-width: 0; color: color-mix(in srgb, var(--sct-text) 74%, white 26%); }
.ui-template-grid-field > span:first-child { grid-row: 1; overflow: hidden; font-size: var(--sct-row-title-size); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-grid-field > input[type='number'],
.ui-template-grid-field > .ui-template-number-input,
.ui-template-grid-field > .ui-template-range-pill { grid-row: 3; width: 100%; height: var(--sct-control-height); min-height: var(--sct-control-height); box-sizing: border-box; }
.ui-template-grid-field > .ui-template-conversion-control { grid-row: 3; width: 100%; height: var(--sct-control-height); min-height: var(--sct-control-height); box-sizing: border-box; }
.ui-template-conversion-control { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.ui-template-conversion-control--single { grid-template-columns: auto auto minmax(0, 1fr); }
.ui-template-conversion-control--two-unit { grid-template-columns: var(--sct-control-height) minmax(0, 1fr) auto minmax(0, 1fr); }
.ui-template-conversion-control--single > .sct-icon:not(.ui-template-conversion-equals),
.ui-template-conversion-control--two-unit > .sct-icon:not(.ui-template-conversion-equals) { width: var(--sct-control-height); height: var(--sct-control-height); min-width: var(--sct-control-height); min-height: var(--sct-control-height); --sct-icon-size: var(--sct-control-height); }
.ui-template-number-input,
.ui-template-unit-input { display: grid; grid-template-columns: minmax(0, 1fr) 18px auto; column-gap: 5px; align-items: center; height: var(--sct-control-height); min-width: 0; padding: 0 var(--sct-control-padding-x, 10px); border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); color: var(--sct-input-text); box-sizing: border-box; }
.ui-template-number-input { grid-template-columns: minmax(0, 1fr) 18px; }
.ui-template-number-input input[type='number'],
.ui-template-unit-input input[type='number'] { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; }
.ui-template-number-input input[type='number']::-webkit-inner-spin-button,
.ui-template-number-input input[type='number']::-webkit-outer-spin-button,
.ui-template-unit-input input[type='number']::-webkit-inner-spin-button,
.ui-template-unit-input input[type='number']::-webkit-outer-spin-button { appearance: none !important; -webkit-appearance: none !important; display: none !important; opacity: 0 !important; margin: 0 !important; }
.ui-template-number-input:focus-within,
.ui-template-unit-input:focus-within { outline: 2px solid #ffffff; outline-offset: 1px; }
.ui-template-number-input input[type='number']:focus,
.ui-template-unit-input input[type='number']:focus { outline: 0; }
.ui-template-unit-input .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-number-stepper { display: grid; grid-template-rows: 1fr 1fr; width: 18px; height: calc(var(--sct-control-height) - 8px); overflow: hidden; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.ui-template-number-input:focus-within .ui-template-number-stepper,
.ui-template-unit-input:focus-within .ui-template-number-stepper,
.ui-template-number-input:hover .ui-template-number-stepper,
.ui-template-unit-input:hover .ui-template-number-stepper { opacity: 1; pointer-events: auto; }
.ui-template-number-stepper button { display: grid; place-items: center; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--sct-button-text); }
/* data-sct-number-step is generated by the shared enhanceNumberInputs() helper; data-template-step is used by this page's hand-authored stepper markup (see Grid Fields). Both are styled so either works. */
.ui-template-number-stepper button[data-sct-number-step='up'], .ui-template-number-stepper button[data-template-step='up'] { background: var(--sct-button-accept); color: var(--sct-button-accept-text); }
.ui-template-number-stepper button[data-sct-number-step='up']:hover, .ui-template-number-stepper button[data-template-step='up']:hover { background: var(--sct-button-accept-hover); }
.ui-template-number-stepper button[data-sct-number-step='down'], .ui-template-number-stepper button[data-template-step='down'] { background: var(--sct-button-cancel); color: var(--sct-button-cancel-text); }
.ui-template-number-stepper button[data-sct-number-step='down']:hover, .ui-template-number-stepper button[data-template-step='down']:hover { background: var(--sct-button-cancel-hover); }
.ui-template-number-stepper .sct-icon { --sct-icon-size: 9px; }
.ui-template-duration-field { width: max-content; max-width: 100%; }
.ui-template-duration-field .sct-duration-input { width: max-content; max-width: 100%; }
.ui-template-page .sct-duration-input .ui-template-number-input { grid-template-columns: minmax(0, 1fr) 14px; width: 64px; min-height: calc(var(--sct-control-height) - 10px); height: calc(var(--sct-control-height) - 10px); padding: 0 4px; border: 0; border-radius: 4px; background: transparent; }
.ui-template-page .sct-duration-input .ui-template-number-stepper { width: 14px; height: calc(var(--sct-control-height) - 16px); }
.ui-template-page .sct-duration-input .ui-template-number-input input[type='number'] { min-height: 0; }
.ui-template-conversion-equals { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-grid-field > small { grid-row: 4; align-self: center; min-width: 0; overflow: hidden; color: color-mix(in srgb, var(--sct-text) 64%, white 36%); font-size: var(--sct-row-subtext-size); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-grid-adjustment { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sct-row-field-gap); --ui-template-subtext-space: calc(var(--sct-row-subtext-size) * 1.35); }
.ui-template-grid-adjustment-range .ui-template-action-icon-button,
.ui-template-list-zoom-control .ui-template-action-icon-button { display: grid; place-items: center; width: 22px; min-width: 22px; height: 22px; min-height: 22px; flex: 0 0 22px; padding: 0; background: transparent; color: var(--sct-text); }
.ui-template-grid-adjustment-range .ui-template-action-icon-button .sct-icon,
.ui-template-list-zoom-control .ui-template-action-icon-button .sct-icon { --sct-icon-size: 14px; }
.ui-template-grid-adjustment-reset > button { grid-row: 3; height: var(--sct-control-height); min-height: var(--sct-control-height); gap: 8px; }
.ui-template-grid-adjustment-reset > button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-grid-adjustment-range { padding-right: 11px; }
.ui-template-grid-adjustment-range > output { min-width: 4.5ch; height: 100%; display: grid; place-items: center; font-weight: 700; white-space: nowrap; }
.ui-template-list-zoom-target { display: flex; flex-direction: column; gap: var(--sct-card-gap); transform-origin: top left; }
.ui-template-list-zoom-control input { width: 94px; }
.ui-template-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--sct-row-field-gap); }
.ui-template-section-heading button { display: inline-flex; align-items: center; gap: 6px; }
.ui-template-section-heading .sct-icon { --sct-icon-size: 14px; }
.ui-template-single-list, .ui-template-multi-list { display: grid; gap: var(--sct-row-field-gap); }
.ui-template-list-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(112px, .55fr) var(--sct-control-height); align-items: start; gap: var(--sct-row-field-gap); padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); --ui-template-subtext-space: 0px; }
.ui-template-list-icon .sct-icon, .ui-template-catalog-icon .sct-icon { grid-row: 1 / 4; align-self: center; justify-self: center; --sct-icon-size: calc(var(--sct-row-title-size) * 1.2 + 5px + var(--sct-control-height)); }
.ui-template-catalog { display: grid; gap: var(--sct-row-field-gap); padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-aligned-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sct-row-field-gap); align-items: start; --ui-template-subtext-space: 0px; }
.ui-template-catalog-fields { grid-template-columns: 58px minmax(0, 1fr) minmax(112px, .55fr) 92px var(--sct-control-height); }
.ui-template-catalog-messages { display: grid; gap: 5px; }
.ui-template-catalog-messages textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.ui-template-subsections { display: grid; gap: calc(var(--sct-card-gap) * 1.3); }
.ui-template-subsections section { display: grid; gap: 8px; }
.ui-template-subsections section + section { padding-top: var(--sct-card-gap); border-top: 1px solid var(--sct-border); }
.ui-template-subsections h5, .ui-template-subsections p { margin: 0; }
.ui-template-subsections p { color: color-mix(in srgb, var(--sct-text) 70%, white 30%); font-size: 12px; }
.ui-template-subsection-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--sct-row-field-gap); }
.ui-template-subsection-heading > div { display: grid; gap: 4px; }
.ui-template-subsection-heading .ui-template-status-pill { flex: 0 0 auto; }
.ui-template-composition-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sct-row-field-gap); align-items: start; --ui-template-subtext-space: calc(var(--sct-row-subtext-size) * 1.35 + 5px); }
.ui-template-automation-fields { grid-template-columns: minmax(150px, 220px) max-content calc(var(--sct-control-height) * 2); }
.ui-template-composition-span { grid-column: span 2; }
.ui-template-poll-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: start; gap: calc(var(--sct-card-gap) * 1.5); }
.ui-template-poll-results { display: grid; gap: var(--sct-row-field-gap); min-width: 0; padding-left: calc(var(--sct-card-gap) * 1.5); border-left: 1px solid var(--sct-border); }
.ui-template-queue-list { display: grid; gap: var(--sct-row-field-gap); }
.ui-template-queue-item { display: grid; gap: var(--sct-row-field-gap); padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-queue-item.is-muted { opacity: .8; }
.ui-template-queue-item .ui-template-section-heading { margin: 0; }
.ui-template-queue-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(276px, max-content); align-items: start; gap: var(--sct-row-field-gap); }
.ui-template-queue-content .ui-template-preview-message { box-sizing: border-box; width: 100%; min-width: 0; }
.ui-template-queue-content .ui-template-duration-field { justify-self: end; --ui-template-subtext-space: calc(var(--sct-row-subtext-size) * 1.35 + 5px); }
.ui-template-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--sct-control-height) * 2.25); gap: var(--sct-row-field-gap); align-items: center; }
.ui-template-progress-track { position: relative; min-height: var(--sct-control-height); overflow: hidden; border: 1px solid var(--sct-border); border-radius: 7px; background: color-mix(in srgb, var(--sct-surface-alt) 80%, black 20%); box-sizing: border-box; }
.ui-template-progress-fill { display: flex; align-items: center; height: 100%; min-height: calc(var(--sct-control-height) - 2px); padding: 0 9px; box-sizing: border-box; background: var(--sct-poll-color-1); color: var(--sct-button-text); font-weight: 600; white-space: nowrap; }
.ui-template-progress-fill span { color: #ffffff; -webkit-text-stroke: 5px #000000; paint-order: stroke fill; }
.ui-template-progress-fill.is-alt { background: var(--sct-poll-color-2); }
.ui-template-progress-row > output { min-height: var(--sct-control-height); display: grid; place-items: center; box-sizing: border-box; font-size: var(--sct-control-height); font-weight: 700; line-height: 1; text-align: right; }
.ui-template-condensed-list { display: grid; gap: 7px; }
.ui-template-condensed-list details { padding: 8px; border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 82%, black 18%); }
.ui-template-condensed-list summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 700; }
.ui-template-condensed-list summary span, .ui-template-condensed-list p { color: color-mix(in srgb, var(--sct-text) 70%, white 30%); font-size: 12px; }
.ui-template-condensed-list p { margin: 7px 0 0; }
.ui-template-floating-menu { position: fixed; z-index: 40; display: grid; min-width: 170px; gap: 3px; padding: 7px; border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: var(--sct-surface); box-shadow: 0 16px 38px rgb(0 0 0 / .36); }
.ui-template-floating-menu strong { padding: 5px 6px; font-size: 12px; }
.ui-template-floating-menu button { justify-content: space-between; width: 100%; }
.ui-template-floating-menu button:has(.sct-icon) { gap: 8px; }
.ui-template-floating-menu button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }
.ui-template-modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgb(0 0 0 / .56); }
.ui-template-modal { width: min(100%, 520px); }
.ui-template-modal-field { display: grid; gap: 5px; color: color-mix(in srgb, var(--sct-text) 74%, white 26%); }
.ui-template-modal-field input, .ui-template-modal-field textarea { width: 100%; box-sizing: border-box; }

/* Popups card: variety of anchored/floating popup and submenu patterns, all reposition on scroll/resize like dropdown menus */
.ui-template-popup-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sct-row-field-gap); }
.ui-template-popup-demo { display: grid; gap: 8px; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-popup-demo > span { color: color-mix(in srgb, var(--sct-text) 70%, white 30%); font-size: 12px; }
.ui-template-popup-trigger { width: 100%; justify-content: space-between; gap: 8px; }
.ui-template-popup-trigger .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }

.ui-template-confirm-popover { position: fixed; z-index: 40; display: grid; gap: 8px; width: min(260px, calc(100vw - 20px)); padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: var(--sct-surface); box-shadow: 0 16px 38px rgb(0 0 0 / .36); box-sizing: border-box; }
.ui-template-confirm-popover[hidden] { display: none; }
.ui-template-confirm-popover-actions { display: flex; justify-content: flex-end; gap: var(--sct-row-action-gap); }
.ui-template-confirm-popover-actions button:has(.sct-icon) { gap: 8px; }
.ui-template-confirm-popover-actions button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }

.ui-template-tooltip-popover { position: fixed; z-index: 40; max-width: 240px; padding: 8px 10px; border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: var(--sct-surface); box-shadow: 0 12px 28px rgb(0 0 0 / .35); font-size: 12px; color: color-mix(in srgb, var(--sct-text) 84%, white 16%); pointer-events: none; }
.ui-template-tooltip-popover[hidden] { display: none; }

.ui-template-toast-stack { position: fixed; z-index: 60; right: 18px; bottom: 18px; display: grid; gap: 8px; pointer-events: none; }
.ui-template-toast { display: flex; align-items: center; gap: 8px; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: var(--sct-surface); box-shadow: 0 16px 38px rgb(0 0 0 / .36); font-size: 13px; animation: ui-template-toast-in .18s ease-out; }
.ui-template-toast .sct-icon { --sct-icon-size: var(--sct-button-icon-size); --sct-icon-color: var(--sct-button-accept); }
@keyframes ui-template-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.ui-template-chat-preview { min-height: 210px; max-height: 340px; overflow: auto; border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); padding: 8px; }

.ui-template-viz-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sct-card-gap); }
.ui-template-viz-panel { display: grid; gap: 10px; align-content: start; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-viz-panel .ui-template-section-heading span { color: color-mix(in srgb, var(--sct-text) 68%, white 32%); font-size: 12px; }

.ui-template-donut-row { display: grid; grid-template-columns: minmax(84px, 116px) minmax(84px, 116px) minmax(0, 1fr); align-items: center; gap: var(--sct-row-field-gap); }
.ui-template-viz-chart-slot { display: grid; justify-items: center; gap: 4px; }
.ui-template-viz-chart-slot small { color: color-mix(in srgb, var(--sct-text) 64%, white 36%); font-size: 11px; }
.ui-template-donut, .ui-template-pie-solid { width: 100%; aspect-ratio: 1 / 1; }
.ui-template-donut-track { fill: none; stroke: color-mix(in srgb, var(--sct-surface) 70%, black 30%); stroke-width: 14; }
.ui-template-donut-segment { fill: none; stroke: var(--sct-viz-color); stroke-width: 14; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .3s ease, stroke-dashoffset .3s ease, opacity .2s ease; }
.ui-template-donut-total { fill: var(--sct-text); font-size: 20px; font-weight: 700; }
.ui-template-donut-caption { fill: color-mix(in srgb, var(--sct-text) 64%, white 36%); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.ui-template-pie-wedge { fill: var(--sct-viz-color); stroke: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); stroke-width: 1.5; transition: opacity .2s ease; }
.ui-template-donut-segment.is-dimmed, .ui-template-pie-wedge.is-dimmed { opacity: .22; }
.ui-template-legend { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ui-template-legend button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: calc(var(--sct-control-height) * .82); padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--sct-text); font: inherit; text-align: left; cursor: pointer; }
.ui-template-legend button:hover { background: color-mix(in srgb, var(--sct-surface-alt) 70%, black 30%); }
.ui-template-legend button span { width: 10px; height: 10px; border-radius: 999px; background: var(--sct-viz-color); }
.ui-template-legend button b { color: color-mix(in srgb, var(--sct-text) 72%, white 28%); font-size: 12px; }
.ui-template-legend button.is-active { border-color: var(--sct-viz-color); background: color-mix(in srgb, var(--sct-surface-alt) 62%, black 38%); }
.ui-template-legend button.is-dimmed { opacity: .45; }

.ui-template-bar-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 8px; height: 132px; padding: 0; border: 0; background: transparent; }
.ui-template-bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: end; justify-items: center; gap: 5px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--sct-text); font: inherit; cursor: pointer; }
.ui-template-bar span { display: grid; align-items: end; justify-content: center; width: 100%; height: calc(var(--sct-viz-percent) * 1%); min-height: 4px; padding-top: 4px; border-radius: 5px 5px 2px 2px; background: var(--sct-poll-color-1); color: #ffffff; font-size: 11px; font-weight: 700; -webkit-text-stroke: 3px #000000; paint-order: stroke fill; }
.ui-template-bar:nth-child(even) span { background: var(--sct-poll-color-2); }
.ui-template-bar small { color: color-mix(in srgb, var(--sct-text) 68%, white 32%); font-size: 11px; }
.ui-template-bar:hover span, .ui-template-bar:focus-visible span { filter: brightness(1.15); }
.ui-template-bar.is-active span { outline: 2px solid #ffffff; outline-offset: -2px; }

.ui-template-line-chart { width: 100%; height: 132px; }
.ui-template-line-fill { fill: color-mix(in srgb, var(--sct-poll-color-1) 22%, transparent); stroke: none; }
.ui-template-line-stroke { fill: none; stroke: var(--sct-poll-color-1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-template-line-chart circle { fill: var(--sct-surface); stroke: var(--sct-poll-color-1); stroke-width: 2.5; cursor: pointer; transition: r .15s ease; }
.ui-template-line-chart circle:hover, .ui-template-line-chart circle:focus-visible, .ui-template-line-chart circle.is-active { r: 6; fill: var(--sct-poll-color-1); }

.ui-template-sparkline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sct-row-field-gap); }
.ui-template-sparkline-tile { display: grid; gap: 6px; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 84%, black 16%); }
.ui-template-sparkline-tile > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-template-sparkline-tile span { min-width: 0; overflow: hidden; color: color-mix(in srgb, var(--sct-text) 72%, white 28%); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-sparkline-tile strong { flex: 0 0 auto; font-size: 16px; }
.ui-template-sparkline { width: 100%; height: 28px; }
.ui-template-sparkline polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-template-sparkline.is-up polyline { stroke: var(--sct-button-accept); }
.ui-template-sparkline.is-down polyline { stroke: var(--sct-button-cancel); }

/* Dark pills: icon-only pills with a dark fill and a brighter matching outline, used for pot/timer style readouts (see Polls page) */
.ui-template-dark-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sct-button-accept) 70%, white 30%); background: color-mix(in srgb, var(--sct-button-accept) 35%, black 65%); color: #ffffff; white-space: nowrap; }
button.ui-template-dark-pill { cursor: pointer; font: inherit; }
.ui-template-dark-pill .sct-icon { --sct-icon-size: 18px; --sct-icon-color: #ffffff; }
.ui-template-dark-pill-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.ui-template-dark-pill-value { font-size: 13px; font-weight: 700; }
.ui-template-dark-pill.is-warning { border-color: color-mix(in srgb, #f59e0b 70%, white 30%); background: color-mix(in srgb, #f59e0b 35%, black 65%); }
.ui-template-dark-pill.is-danger { border-color: color-mix(in srgb, #dc2626 70%, white 30%); background: color-mix(in srgb, #dc2626 35%, black 65%); }
.ui-template-dark-pill.is-paused { opacity: .6; }

/* Compact info line: bold labels separated by vertical bars, used to summarize several settings in one row */
.ui-template-compact-info-line { font-size: var(--sct-row-subtext-size); color: color-mix(in srgb, var(--sct-text) 74%, white 26%); }
.ui-template-compact-info-line strong { color: var(--sct-text); }
.ui-template-info-separator { margin: 0 8px; color: color-mix(in srgb, var(--sct-text) 50%, white 50%); }

/* Favourite toggle: keeps the same box footprint/spacing as its paired remove button, but stays transparent (no visible background), faded when unfavourited */
.ui-template-favorite-button { background: transparent; opacity: .75; }
.ui-template-favorite-button:hover { background: transparent; }
.ui-template-favorite-button.is-favorited { opacity: 1; }
.ui-template-page button:disabled { opacity: .4; cursor: not-allowed; }
.ui-template-favorite-demo { display: flex; align-items: center; justify-content: space-between; gap: var(--sct-row-field-gap); padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-favorite-demo.is-favorited { outline: 2px solid #ffffff; outline-offset: 1px; }
.ui-template-favorite-demo-info { display: grid; gap: 2px; }
.ui-template-favorite-demo-info span { color: color-mix(in srgb, var(--sct-text) 70%, white 30%); font-size: 12px; }
.ui-template-favorite-demo-actions { display: flex; align-items: center; gap: var(--sct-row-action-gap); }

/* Compact collapsible card list: mirrors the Prepped/Previous Polls list rows */
.ui-template-compact-card-list { display: flex; flex-direction: column; gap: 8px; }
.ui-template-compact-card { border: 1px solid color-mix(in srgb, var(--sct-border) 84%, white 16%); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 82%, black 18%); padding: var(--sct-row-box-padding); }
.ui-template-compact-card.is-favorited { outline: 2px solid #ffffff; outline-offset: 1px; }
.ui-template-compact-card > summary { display: flex; align-items: center; gap: var(--sct-row-action-gap); width: 100%; cursor: pointer; font-weight: 700; list-style: none; }
.ui-template-compact-card > summary::-webkit-details-marker { display: none; }
.ui-template-compact-card-icon { --sct-icon-size: var(--sct-control-height); flex-shrink: 0; }
.ui-template-compact-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-template-compact-card-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* Poll-style bars: a left title inside the bar, a right value inside the bar, and a fixed-width percent readout */
.ui-template-poll-bars { display: flex; flex-direction: column; gap: 8px; }
.ui-template-poll-bar-wrap { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--sct-control-height) * 2.25); gap: 8px; align-items: center; }
.ui-template-poll-bar-track { position: relative; overflow: hidden; border-radius: 7px; border: 1px solid var(--sct-border); background: color-mix(in srgb, var(--sct-surface-alt) 65%, black 35%); min-height: var(--sct-control-height); box-sizing: border-box; }
.ui-template-poll-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; }
.ui-template-poll-bar-label { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; padding: 0 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; -webkit-text-stroke: 5px #000000; paint-order: stroke fill; }
.ui-template-poll-bar-right-label { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; -webkit-text-stroke: 5px #000000; paint-order: stroke fill; }
.ui-template-poll-bar-percent { min-height: var(--sct-control-height); display: grid; place-items: center; box-sizing: border-box; font-size: var(--sct-control-height); font-weight: 700; line-height: 1; text-align: right; }

/* Numbered option list: mirrors the Create Poll option rows (index number, text, colour swatch, remove button) */
.ui-template-numbered-list { display: flex; flex-direction: column; gap: var(--sct-row-field-gap); }
.ui-template-numbered-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.ui-template-numbered-row-index { min-width: 1.4em; text-align: left; font-size: var(--sct-control-height); font-weight: 700; line-height: 1; }
.ui-template-numbered-row-color { width: auto; aspect-ratio: 2 / 1; height: var(--sct-control-height); appearance: none; -webkit-appearance: none; padding: 4px; border: 1px solid var(--sct-input-border); border-radius: 8px; background: var(--sct-input-bg); cursor: pointer; }
.ui-template-numbered-row-color::-webkit-color-swatch-wrapper { padding: 0; }
.ui-template-numbered-row-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.ui-template-numbered-row > button { height: var(--sct-control-height); min-height: var(--sct-control-height); width: var(--sct-control-height); min-width: var(--sct-control-height); padding: 0; }
.ui-template-numbered-row > button .sct-icon { --sct-icon-size: var(--sct-button-icon-size); }

/* Large title and nested darkening backgrounds, used to separate layers of detail without adding another card */
.ui-template-large-title { font-size: 24px; font-weight: 700; }
.ui-template-nested-box { display: grid; gap: 5px; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 78%, black 22%); }
.ui-template-nested-box span { color: color-mix(in srgb, var(--sct-text) 70%, white 30%); font-size: 12px; }
.ui-template-nested-box-inner { display: grid; gap: 5px; margin-top: 8px; padding: var(--sct-row-box-padding); border: 1px solid var(--sct-border); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 65%, black 35%); }
.ui-template-nested-box-inner-most { display: grid; gap: 5px; margin-top: 8px; padding: var(--sct-row-box-padding); border-radius: var(--sct-row-box-radius); background: color-mix(in srgb, var(--sct-surface-alt) 50%, black 50%); }

/* Result popup: icon+label header (via the shared .sct-card-title-with-icon convention), a large title, a dark pill and compact info line together, and a colour-coded winner pill */
.ui-template-result-modal .sct-card-body { display: grid; gap: 12px; }
.ui-template-result-modal .ui-template-pill-row { align-items: center; }
.ui-template-winner-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 13px; color: #ffffff; }
.ui-template-winner-pill .sct-icon { --sct-icon-size: 14px; --sct-icon-color: #ffffff; }
.ui-template-winner-pill-demo { background: color-mix(in srgb, #2563eb 55%, black 45%); border-color: color-mix(in srgb, #2563eb 70%, black 30%); }
.ui-template-result-modal-hint { margin: 0; text-align: center; }

@media (max-width: 950px) { .ui-template-grid, .ui-template-list-layout, .ui-template-two-column, .ui-template-poll-workspace { grid-template-columns: 1fr; } .ui-template-field-grid, .ui-template-composition-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-template-filter-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .ui-template-filter-result-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ui-template-automation-fields { grid-template-columns: minmax(150px, 1fr) max-content calc(var(--sct-control-height) * 2); } .ui-template-poll-results { padding-top: var(--sct-card-gap); padding-left: 0; border-top: 1px solid var(--sct-border); border-left: 0; } .ui-template-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ui-template-viz-layout { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ui-template-automation-fields { grid-template-columns: minmax(0, 1fr) calc(var(--sct-control-height) * 2); } .ui-template-automation-fields .ui-template-duration-field { grid-column: 1 / -1; } }
@media (max-width: 620px) { .ui-template-card-header { grid-template-columns: auto minmax(0, 1fr); } .ui-template-card-tools { grid-column: 1 / -1; justify-content: flex-start; } .ui-template-card[data-template-list-card] > .sct-card-header { flex-wrap: wrap; } .ui-template-list-zoom-control { width: 100%; } .ui-template-list-zoom-control input { flex: 1 1 auto; min-width: 72px; } .ui-template-stat-grid, .ui-template-field-grid, .ui-template-composition-fields, .ui-template-filter-controls, .ui-template-filter-flags, .ui-template-filter-result-list { grid-template-columns: 1fr; } .ui-template-filter-result-header { align-items: start; flex-direction: column; } .ui-template-composition-span { grid-column: auto; } .ui-template-queue-content { grid-template-columns: 1fr; } .ui-template-grid-adjustment { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; } .ui-template-media-layout { grid-template-columns: 1fr; } .ui-template-list-row, .ui-template-catalog-fields { grid-template-columns: 58px minmax(0, 1fr) var(--sct-control-height); } .ui-template-list-row > .ui-template-row-cell:nth-child(3), .ui-template-catalog-fields > .ui-template-row-cell:nth-child(3), .ui-template-catalog-fields > .ui-template-row-cell:nth-child(4) { grid-column: 2; } .ui-template-donut-row { grid-template-columns: 1fr; justify-items: center; } .ui-template-sparkline-grid { grid-template-columns: 1fr; } }