/* Room for four plans without changing the reading width of blog articles. */
.catalog-shell, #navbar { max-width: 1536px; }
footer > .max-w-7xl { max-width: 1536px; }
.catalog-plan-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.catalog-plan-grid > * { min-width: 0; }
.plan-card .cta-button { display: flex; align-items: center; justify-content: center; text-align: center; }
@media (min-width: 768px) { .catalog-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .catalog-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .catalog-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dashboard-sidebar { width: 224px; }
  .dashboard-shell { padding-left: 224px; }
  #dashboard-loading { left: 224px; }
  #main-content { padding-left: 24px; padding-right: 24px; }
}
.dashboard-plan-grid { gap: 16px; }
.dashboard-subscription-grid > * { min-width: 0; }
@media (min-width: 1024px) { .dashboard-subscription-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .dashboard-subscription-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .subscription-card { padding: 12px; }
  .subscription-header { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px; }
  .subscription-avatar { width: 40px; height: 40px; }
  .subscription-platform { grid-column: 2 / 4; grid-row: 1; }
  .subscription-channel { grid-column: 2; grid-row: 2; }
  .subscription-status { grid-column: 3; grid-row: 2; width: auto; padding: 2px 4px; font-size: 10px; line-height: 16px; }
  .subscription-expiry { grid-column: 2 / 4; grid-row: 3; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .subscription-start, .subscription-stop { gap: 2px; font-size: 11px; }
  .subscription-start svg, .subscription-stop svg { width: 12px; height: 12px; }
}
@media (min-width: 1600px) { .subscription-card { padding: 16px; } }
.plan-icon { position: absolute; top: 12px; right: 12px; width: 64px; height: 64px; object-fit: contain; pointer-events: none; user-select: none; }
.dashboard-plan-icon { right: 40px; }
/* Match the visible extent, including hands and props, rather than JPG padding. */
.plan-icon:is([src$="lite.png"], [src$="lite.webp"], [src$="lite-64.webp"]) { transform: scale(.914); }
.plan-icon:is([src$="starter.png"], [src$="starter.webp"], [src$="starter-64.webp"]) { transform: scale(1.014); }
.plan-icon:is([src$="standart.png"], [src$="standart.webp"], [src$="standart-64.webp"]) { transform: scale(.921); }
.plan-icon:is([src$="pro.png"], [src$="pro.webp"], [src$="pro-64.webp"]) { transform: scale(.917); }
/* Gentle emoji drift stays behind the popular card's content. */
.plan-has-emoji { position: relative; isolation: isolate; }
.plan-has-emoji > :not(.plan-emoji-background):not(.plan-icon):not(.absolute) { position: relative; z-index: 1; }
.plan-has-emoji > .plan-icon, .plan-has-emoji > .absolute { z-index: 2; }
.plan-emoji-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none; }
.plan-floating-emoji { position: absolute; top: 0; left: var(--emoji-x); width: var(--emoji-size); height: 100%; opacity: 0; animation: plan-emoji-rise var(--emoji-duration) linear infinite; animation-delay: var(--emoji-delay); }
.plan-floating-emoji img { display: block; width: 100%; height: auto; transform: rotate(var(--emoji-tilt)); }
.plan-floating-emoji:nth-child(1) { --emoji-x: 12%; --emoji-size: 38px; --emoji-opacity: .14; --emoji-duration: 13s; --emoji-delay: -2s; --emoji-tilt: -12deg; }
.plan-floating-emoji:nth-child(2) { --emoji-x: 67%; --emoji-size: 42px; --emoji-opacity: .11; --emoji-duration: 16s; --emoji-delay: -9s; --emoji-tilt: 10deg; }
.plan-floating-emoji:nth-child(3) { --emoji-x: 38%; --emoji-size: 26px; --emoji-opacity: .08; --emoji-duration: 15s; --emoji-delay: -6s; --emoji-tilt: -8deg; }
.plan-floating-emoji:nth-child(4) { --emoji-x: 80%; --emoji-size: 28px; --emoji-opacity: .09; --emoji-duration: 18s; --emoji-delay: -14s; --emoji-tilt: 12deg; }
.plan-floating-emoji:nth-child(5) { --emoji-x: 57%; --emoji-size: 34px; --emoji-opacity: .12; --emoji-duration: 17s; --emoji-delay: -1s; --emoji-tilt: 9deg; }
.plan-floating-emoji:nth-child(6) { --emoji-x: 25%; --emoji-size: 30px; --emoji-opacity: .08; --emoji-duration: 19s; --emoji-delay: -13s; --emoji-tilt: -10deg; }
.plan-floating-emoji:nth-child(7) { --emoji-x: 45%; --emoji-size: 32px; --emoji-opacity: .14; --emoji-duration: 14s; --emoji-delay: -10s; --emoji-tilt: -7deg; }
.plan-floating-emoji:nth-child(8) { --emoji-x: 6%; --emoji-size: 26px; --emoji-opacity: .10; --emoji-duration: 17s; --emoji-delay: -6s; --emoji-tilt: 8deg; }
.plan-floating-emoji:nth-child(9) { --emoji-x: 74%; --emoji-size: 22px; --emoji-opacity: .07; --emoji-duration: 20s; --emoji-delay: -9s; --emoji-tilt: -12deg; }
@keyframes plan-emoji-rise {
  0% { transform: translateY(110%); opacity: 0; }
  12%, 78% { opacity: var(--emoji-opacity); }
  100% { transform: translateY(-18%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-floating-emoji { animation: none; display: none; }
}
.twitch-configurator { margin: 8px 0 36px; text-align: center; }
.dashboard-configurator-plans { margin-bottom: 8px; }
.dashboard-configurator-plans > .mb-6 { margin-bottom: 0; }
/* The embedded pricing JSON sits between the plans and the configurator. */
#plans-section:has(~ [data-configurator-platform]:not([hidden])) { margin-bottom: 12px; }
.service-page section:has(+ script + [data-configurator-platform]) { margin-bottom: 12px; }
.twitch-configurator[hidden] { display: none !important; }
.configurator-opener { display: inline-flex; align-items: flex-end; justify-content: center; gap: 8px; max-width: 100%; padding: 8px; border: 0; background: transparent; color: var(--sk-muted, #505a63); font-size: 14px; font-weight: 400; }
.configurator-opener span { min-width: 0; }
.configurator-opener .configurator-link { color: var(--sk-ink, #191c1f); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.configurator-mascot { display: block; width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 8px; }
.twitch-configurator-dialog { width: min(580px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--sk-border, #e2e2e7); border-radius: 20px; color: var(--sk-ink, #191c1f); background: var(--sk-card, #fff); text-align: left; overflow-y: auto; }
.twitch-configurator-dialog::backdrop { background: rgba(25, 28, 31, .45); }
.configurator-card .catalog-dialog-header h2 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; text-align: left; font-size: 22px; line-height: 1; }
.configurator-title-mascot { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; border-radius: 8px; }
.product-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; vertical-align: middle; }
.product-badges:empty { display: none; }
.product-badge { display: inline-block; max-width: 100%; padding: 3px 6px; border-radius: 5px; background: #000; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.product-quality-badge.quality-lq { background: #6b7280; }
.product-quality-badge.quality-mq { background: #2563eb; }
.product-quality-badge.quality-hq { background: #9333ea; }
.product-quality-badge.quality-vhq { background: #dc2626; }
.dashboard-product-label { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; text-align: left; }

/* Public sections overlap gently like stacked, rounded surfaces. */
[data-theme="light"] .home-layout > :is(#services, #reviews, #faq) {
  border-radius: 48px 48px 0 0;
  margin-top: -32px;
  padding-bottom: 112px;
  isolation: isolate;
  scroll-margin-top: 80px;
}
[data-theme="light"] .home-layout > #reviews { background: var(--sk-card, #fff); }
[data-theme="light"] .blog-layout:not(.service-layout) > footer {
  border-radius: 48px 48px 0 0;
}
@media (max-width: 680px) {
  [data-theme="light"] .home-layout > :is(#services, #reviews, #faq) { border-radius: 28px 28px 0 0; margin-top: -20px; padding-bottom: 100px; }
  [data-theme="light"] .blog-layout:not(.service-layout) > footer { border-radius: 28px 28px 0 0; }
}
.configurator-form { padding: 0 24px 24px; }
.configurator-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.configurator-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--sk-muted, #505a63); }
.configurator-form input, .configurator-form select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--sk-border, #e2e2e7); border-radius: 12px; background: var(--sk-card, #fff); color: var(--sk-ink, #191c1f); font-size: 14px; }
.configurator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.configurator-duration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 8px; margin-top: 8px; }
.configurator-duration-hint { margin: 6px 0 0; color: var(--sk-muted, #505a63); font-size: 12px; }
.configurator-hint { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--sk-muted, #505a63); }
.configurator-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.configurator-price { margin-right: auto; font-size: 22px; white-space: nowrap; }
.configurator-form .cta-button { width: auto; margin: 0; padding: 12px 24px; border-radius: 24px; background: #191c1f; color: #fff; font-size: 14px; font-weight: 600; }
.configurator-error { margin: 16px 0; font-size: 13px; color: #b42318; }
.configurator-channel { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--sk-border, #dddfe6); border-radius: 12px; background: transparent; text-align: left; }
.configurator-channel.selected { border-color: #191c1f; background: var(--sk-soft, #f4f4f4); }
.configurator-channel > span { min-width: 0; }
.configurator-channel strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 500; }
.configurator-channel .configurator-hint { display: block; margin: 4px 0 0; }
.configurator-form button:disabled, .configurator-form fieldset:disabled { opacity: .6; }
@media (max-width: 480px) { .configurator-form { padding: 0 16px 20px; } .configurator-fields { grid-template-columns: 1fr; } }
.category-groups { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 48px; }
.category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.category-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.category-btn .category-icon { display: block; width: 20px; height: 20px; aspect-ratio: 1; object-fit: contain; flex-shrink: 0; }
.product-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.product-heading .product-title { min-width: 0; }
.catalog-products .product-list-item { position: relative; }
.catalog-products .product-list-item:hover, .catalog-products .product-list-item:focus-within { z-index: 41; }
.dashboard-product-row { position: relative; }
.catalog-select { position: relative; }
.catalog-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.catalog-select > svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; color: var(--sk-muted, #505a63); }
.dashboard-product-row:hover, .dashboard-product-row:focus-within { z-index: 41; }
.dashboard-product-menu { box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }

.catalog-view-all { text-align: center; margin-top: 24px; }
.catalog-view-all:has([hidden]) { display: none; }
.catalog-view-all .cta-button { width: auto; margin: 0; padding: 12px 28px; }
.catalog-view-all [hidden], .catalog-products [hidden], .catalog-dialog-empty[hidden] { display: none !important; }
.catalog-products-dialog { width: min(900px, calc(100% - 32px)); max-width: none; max-height: min(800px, calc(100dvh - 48px)); margin: auto; padding: 0; border: 1px solid var(--sk-border); border-radius: 20px; background: var(--sk-soft); color: var(--sk-ink); overflow: visible; }
.catalog-products-dialog[open] { display: flex; flex-direction: column; }
.catalog-products-dialog::backdrop { background: rgba(25, 28, 31, .45); }
.catalog-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; flex-shrink: 0; }
.catalog-dialog-header h2 { margin: 0; font-size: 22px; font-weight: 700; text-align: left; }
.catalog-dialog-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--sk-ink); cursor: pointer; flex-shrink: 0; }
.catalog-dialog-search { padding: 0 24px 20px; flex-shrink: 0; }
.catalog-search-field { position: relative; }
.catalog-dialog-search input { width: 100%; padding: 12px 44px 12px 16px; border: 1px solid var(--sk-border); border-radius: 12px; background: var(--sk-card); font-size: 14px; }
.catalog-dialog-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.catalog-search-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sk-ink); cursor: pointer; }
.catalog-search-clear[hidden] { display: none; }
.catalog-search-clear:focus-visible { outline: 2px solid var(--sk-muted, #505a63); outline-offset: -2px; }
.catalog-dialog-search input:focus { outline: none; border-color: var(--sk-border) !important; box-shadow: none; }
.catalog-dialog-search input:focus-visible { border-color: var(--sk-muted, #505a63) !important; }
.catalog-dialog-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 24px 24px; }
.catalog-products-dialog .product-list-item { width: 100%; min-width: 0; backdrop-filter: none; }
.catalog-products-dialog .category-content-fade { animation: none; transform: none; }
.catalog-dialog-empty { padding: 20px 0; margin: 0; color: var(--sk-muted); text-align: center; font-size: 14px; }
@media (max-width: 680px) {
  .catalog-products-dialog { max-height: calc(100dvh - 32px); }
  .catalog-dialog-header { padding: 16px 16px 12px; }
  .catalog-dialog-search { padding: 0 16px 16px; }
  .catalog-dialog-body { padding: 0 16px 16px; }
}
/* Precise API rates must fit next to the order button on small screens. */
.api-unit-product .product-price { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 680px) { .api-unit-product .product-price { flex: 1; font-size: 14px; } }