* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; }

.sq-store-preview {
  min-height: 100vh;
  color: var(--sq-text, #e8eaef);
  background-color: var(--sq-page-bg, #0f1117);
  background-image: var(--sq-page-bg-image, none);
  background-size: var(--sq-page-bg-size, 100% auto);
  background-repeat: var(--sq-page-bg-repeat, repeat-y);
  background-position: var(--sq-page-bg-position, top center);
}

.sq-preview-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--sq-card-border-color, #2c3344);
  background: rgba(0,0,0,0.25); font-size: 0.84rem;
}
.sq-preset-tag {
  margin-left: 8px; padding: 2px 8px; border-radius: 6px; font-size: 0.72rem;
  background: var(--sq-accent, #7c9cff); color: #0a0a0a; font-weight: 700;
}
.sq-back { color: var(--sq-accent2, #5eead4); text-decoration: none; }
.sq-back:hover { text-decoration: underline; }

.sq-preview-page-nav-host { padding: 10px 20px 0; }
.sq-preview-page-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-preview-page-btn {
  border: 1px solid var(--sq-card-border-color, #2c3344); background: #1e2230; color: #9aa3b5;
  border-radius: 999px; padding: 8px 16px; font-size: 0.78rem; cursor: pointer;
}
.sq-preview-page-btn.active { background: var(--sq-accent2, #5eead4); color: #0a0a0a; border-color: transparent; font-weight: 650; }

.sq-visual-upgrade-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 14px; justify-content: start;
}
.sq-visual-upgrade-tile .sq-theme-tile-preview .icon { font-size: 1.75rem; }

.sq-catalog-grid {
  display: grid;
  grid-template-columns: repeat(var(--sq-grid-cols, 4), minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.sq-browse-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.sq-browse-search {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--sq-card-border-color, #2c3344);
  background: var(--sq-page-bg-color, #151820);
  color: var(--sq-text-title-color, #e8eaef);
  font-size: 0.84rem;
}
.sq-browse-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-browse-chip {
  border: 1px solid var(--sq-card-border-color, #2c3344);
  background: var(--sq-card-bg-color, #1e2230);
  color: var(--sq-text-desc-color, #9aa3b5);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.72rem;
}
.sq-browse-chip.active {
  background: var(--sq-accent2, #5eead4);
  color: #0b1020;
  border-color: transparent;
}
.sq-browse-subhead {
  margin: 18px 0 10px;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--sq-text-title-color, #e8eaef);
}
.sq-theme-columns-uniform .sq-theme-tile,
.sq-theme-columns-uniform .sq-theme-tile-immersive,
.sq-theme-columns-uniform .sq-set-bundle-tile {
  flex: 0 0 168px;
  width: 168px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.sq-theme-columns-uniform .sq-theme-tile-preview {
  height: 96px;
  min-height: 96px;
  flex-shrink: 0;
}
.sq-set-scroll.sq-theme-columns-uniform .sq-set-bundle-tile {
  border: 1px solid var(--sq-card-border-color, #2c3344);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--sq-card-bg-color, #1e2230);
  padding: 8px 10px 10px;
}
.sq-set-bundle-previews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  min-height: 96px;
}
.sq-set-swatch {
  display: block;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
}
.sq-set-bundle-meta {
  display: block;
  font-size: 0.65rem;
  color: var(--sq-text-meta-color, var(--sq-accent2, #5eead4));
  padding: 0 2px 4px;
}
.sq-catalog-card {
  border: 1px solid var(--sq-card-border-color, #2c3344);
  border-radius: 12px;
  background-color: var(--sq-card-bg-color, #1e2230);
  background-image: var(--sq-card-bg-image, none);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  box-sizing: border-box;
  height: 100%;
}
.sq-catalog-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  background: color-mix(in srgb, var(--item-accent, var(--sq-accent2, #5eead4)) 18%, var(--sq-card-bg-color, #1e2230));
  border: 1px solid color-mix(in srgb, var(--item-accent, var(--sq-accent2, #5eead4)) 30%, transparent);
}
.sq-catalog-card-body { flex: 1; min-height: 0; }
.sq-catalog-card-body .sq-text-title { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.sq-catalog-card-desc {
  font-size: 0.76rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sq-catalog-card-meta { display: block; font-size: 0.68rem; margin-top: 4px; }
.sq-catalog-card-foot { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.sq-banner {
  padding: 14px 20px; text-align: center; font-weight: 700; font-size: 0.95rem;
  color: var(--sq-accent2, #fff);
}
.sq-layout-region-banner {
  padding: 0 !important;
  border: none !important;
  overflow: hidden;
  border-radius: 12px;
  color: var(--sq-accent2, #fff);
  position: relative;
  box-shadow: inset 0 0 0 100vmax var(--sq-overlay-banner-image, transparent);
}
.sq-banner-fill {
  flex: 1;
  width: 100%;
  min-height: 256px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  justify-content: var(--sq-banner-justify, center);
  align-items: var(--sq-banner-align, center);
  box-sizing: border-box;
  padding: 12px 16px;
  color: var(--sq-banner-text-color, var(--sq-accent2, #fff));
  font-size: calc(0.95rem * var(--sq-banner-text-scale, 1));
  font-weight: 700;
  text-align: center;
}
.sq-banner-text,
.sq-banner-overlay span {
  background: var(--sq-overlay-banner-bg, rgba(0,0,0,0.45));
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--sq-banner-text-color, var(--sq-accent2, #fff));
  font-size: calc(0.95rem * var(--sq-banner-text-scale, 1));
}
.sq-theme-border-image .sq-bundle-tile,
.sq-theme-border-image .sq-product-row,
.sq-theme-border-image .sq-theme-tile,
.sq-theme-border-image .play-store-item,
.sq-theme-border-image .play-store-cap-item,
.sq-theme-border-image .layout-cap-item,
.sq-theme-border-image .sq-layout-region:not(.sq-layout-region-banner) {
  border: 2px solid transparent;
  border-image-source: var(--sq-card-border-image);
  border-image-slice: var(--sq-card-border-slice, 30);
  border-image-repeat: round;
}

.sq-layout-canvas { width: 100%; margin: 0; padding: 0; }
body.sq-preview-page .sq-store-preview { min-height: 100vh; }
body.sq-preview-page #layoutCanvas { padding: 0 28px 48px; box-sizing: border-box; }
.sq-layout-grid { width: 100%; }
.sq-layout-region { border-radius: 12px; border: 1px solid var(--sq-card-border-color, #2c3344); padding: 10px 12px; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; position: relative; }
.sq-region-title { margin: 0 0 8px; font-size: 0.95rem; flex-shrink: 0; padding-bottom: 6px; border-bottom: 1px solid var(--sq-card-border-color, #2c3344); color: var(--sq-region-title-color, inherit); }
.sq-layout-canvas.sq-has-line-h .sq-region-title {
  border-bottom: none;
  background-image: var(--sq-line-horizontal-image);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 4px;
  padding-bottom: 10px;
}
.sq-region-body { flex: 1; min-height: 0; overflow: auto; }
.sq-layout-region h2 { margin: 0 0 10px; font-size: 1.05rem; }
.sq-banner-img { min-height: 256px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-bottom: 8px; }
.sq-banner-img span { background: rgba(0,0,0,0.45); padding: 8px 16px; border-radius: 8px; font-weight: 700; }
.sq-empty { color: var(--sq-text-dim, #9aa3b5); font-size: 0.78rem; font-style: italic; margin: 0; }

.sq-preview-body h1 { margin: 0 0 16px; font-size: 1.4rem; }

.sq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sq-nav span {
  padding: 6px 12px; border-radius: 8px; font-size: 0.78rem; color: var(--sq-text-dim, #9aa3b5);
  border: 1px solid var(--sq-card-border-color, #2c3344);
}
.sq-nav span.active {
  background: color-mix(in srgb, var(--sq-accent, #7c9cff) 20%, transparent);
  border-color: var(--sq-accent, #7c9cff); color: var(--sq-text, #e8eaef);
}

.sq-section { margin-bottom: 28px; }
.sq-section h2 { margin: 0 0 6px; font-size: 1.05rem; }
.sq-section p { margin: 0 0 12px; font-size: 0.78rem; color: var(--sq-text-dim, #9aa3b5); }

.sq-bundle-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.sq-bundle-grid {
  display: grid; grid-template-columns: repeat(var(--sq-grid-cols, 4), minmax(0, 1fr));
  gap: 12px; align-items: stretch; width: 100%;
}
.sq-bundle-tile {
  flex: 0 0 260px; padding: 14px; border-radius: 12px;
  display: flex; flex-direction: column;
  background-color: var(--sq-card-bg-color, #1e2230);
  background-image: var(--sq-card-bg-image, none);
  border: 1px solid var(--sq-card-border-color, #2c3344);
  background-size: cover; background-position: center;
  min-height: 240px; height: 100%; box-sizing: border-box;
}
.sq-bundle-grid .sq-bundle-tile { flex: none; width: auto; }
.sq-bundle-tile-body { flex: 1; min-height: 0; }
.sq-bundle-tile-foot { margin-top: auto; flex-shrink: 0; }
.sq-bundle-tile .icon { font-size: 1.5rem; margin-bottom: 6px; }
.sq-bundle-tile .sq-text-title,
.sq-bundle-tile > strong { display: block; margin-bottom: 4px; color: var(--sq-text-title-color, inherit); }
.sq-bundle-tile .sq-text-desc,
.sq-bundle-tile .sq-bundle-desc,
.sq-bundle-tile > span:not(.price):not(.sq-bundle-meta) {
  font-size: 0.72rem; color: var(--sq-text-desc-color, var(--sq-text-dim, #9aa3b5)); line-height: 1.4;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  display: -webkit-box;
}
.sq-layout-region-fit .sq-region-body,
.sq-region-body.sq-region-fit { overflow: visible !important; min-height: auto; }
.sq-bundle-tile .sq-text-meta,
.sq-bundle-tile .sq-bundle-meta { font-size: 0.65rem; color: var(--sq-text-meta-color, var(--sq-accent2, #5eead4)); display: block; margin-top: 4px; }
.sq-bundle-tile-foot .price,
.sq-bundle-tile-foot .sq-text-price { margin: 0 0 8px; font-weight: 700; color: var(--sq-text-price-color, var(--sq-accent2, #5eead4)); }
.sq-tile-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; padding-top: 0; }
.sq-tile-actions .buy,
.sq-tile-actions .cart { flex: 1; min-width: 0; }

.sq-theme-scroll-wrap { margin: 0 -4px; padding: 0 4px 4px; }
.sq-theme-scroll {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 8px; scroll-snap-type: x mandatory; align-items: stretch;
}
.sq-theme-scroll-immersive { gap: 14px; }
.sq-theme-tile {
  flex: 0 0 140px; scroll-snap-align: start; border: 1px solid var(--sq-card-border-color, #2c3344);
  border-radius: 14px; overflow: hidden;
  background-color: var(--sq-card-bg-color, #1e2230);
  background-image: var(--sq-card-bg-image, none);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column;
}
.sq-theme-tile-immersive { flex: 0 0 168px; }
.sq-theme-tile-themed {
  border-color: var(--store-tile-border, var(--sq-card-border-color, #2c3344));
  background-color: var(--store-tile-bg, #1e2230);
  background-image: none;
}
.sq-theme-tile-themed .sq-text-title { color: inherit; }
.sq-theme-tile-preview {
  height: 72px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  flex-shrink: 0; background-size: cover; background-position: center;
}
.sq-theme-tile-preview.theme-tile-preview-skin {
  display: block; padding: 0; gap: 0; overflow: hidden;
  border-bottom: 3px solid var(--store-tile-accent, var(--sq-accent, #7c9cff));
}
.theme-tile-skin {
  display: flex; width: 100%; height: 100%; min-height: inherit; overflow: hidden;
}
.theme-tile-skin-sidebar {
  flex: 0 0 34%; min-width: 0;
  background-size: cover; background-position: center top;
  box-shadow: inset -8px 0 16px rgba(0,0,0,0.18);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.theme-tile-skin-main {
  flex: 1; min-width: 0;
  background-size: cover; background-position: center;
}
.sq-theme-tile-preview .theme-tile-swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.sq-theme-tile-preview span:not(.theme-tile-swatch):not([class]) { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.sq-theme-preview-immersive { height: 96px; }
.sq-theme-tile .sq-text-title {
  display: block; font-size: 0.78rem; padding: 8px 10px 2px;
  color: var(--sq-text-title-color, inherit);
}
.sq-theme-tile-foot { margin-top: auto; padding: 0 8px 10px; }
.sq-theme-tile-price {
  display: block; font-size: 0.72rem; font-weight: 650;
  color: var(--sq-text-price-color, var(--sq-accent2, #5eead4));
  margin-bottom: 6px;
}
.sq-list-price {
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.7;
  text-decoration: line-through;
  margin-left: 6px;
}
.sq-theme-tile-actions { margin-top: 0; }

.sq-readability-bg .sq-text-title,
.sq-readability-bg .sq-text-desc,
.sq-readability-bg .sq-text-meta,
.sq-readability-bg .sq-text-price,
.sq-readability-bg .icon,
.sq-readability-bg .ico,
.sq-bundle-tile.sq-readability-bg .sq-text-title,
.sq-bundle-tile.sq-readability-bg .sq-text-desc,
.sq-bundle-tile.sq-readability-bg .sq-text-meta,
.sq-bundle-tile.sq-readability-bg .price,
.sq-bundle-tile.sq-readability-bg .icon {
  background: var(--sq-overlay-card-bg, rgba(0, 0, 0, 0.45));
  padding: 2px 6px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sq-readability-bg .icon,
.sq-readability-bg .ico {
  display: inline-block;
  width: fit-content;
}
.sq-readability-bg .sq-region-title {
  background: var(--sq-overlay-region-bg, rgba(0, 0, 0, 0.45));
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

/* Theme preview tiles keep their own colours — never inherit store cardBg or readability scrims */
.sq-theme-tile-themed,
.sq-readability-bg .sq-theme-tile-themed {
  background-color: var(--store-tile-bg, #1e2230);
  background-image: none;
}
.sq-theme-tile-themed .sq-text-title,
.sq-theme-tile-themed .sq-text-price,
.sq-theme-tile-themed .sq-theme-tile-foot,
.sq-theme-tile-themed .icon,
.sq-theme-tile-themed .ico,
.sq-readability-bg .sq-theme-tile-themed .sq-text-title,
.sq-readability-bg .sq-theme-tile-themed .sq-text-price,
.sq-readability-bg .sq-theme-tile-themed .icon,
.sq-readability-bg .sq-theme-tile-themed .ico {
  background: none;
  padding: unset;
  border-radius: unset;
  box-decoration-break: unset;
  -webkit-box-decoration-break: unset;
}

.sq-product-list { display: flex; flex-direction: column; gap: 8px; }
.sq-product-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  background-color: var(--sq-card-bg-color, #1e2230);
  background-image: var(--sq-card-bg-image, none);
  border: 1px solid var(--sq-card-border-color, #2c3344);
  background-size: cover; background-position: center;
}
.sq-product-row .ico { font-size: 1.3rem; width: 36px; text-align: center; }
.sq-product-row .body { flex: 1; min-width: 0; }
.sq-product-row .sq-text-title,
.sq-product-row .body strong { display: block; font-size: 0.88rem; color: var(--sq-text-title-color, inherit); }
.sq-product-row .sq-text-meta,
.sq-product-row .body small { color: var(--sq-text-meta-color, var(--sq-text-dim, #9aa3b5)); font-size: 0.72rem; }
.sq-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sq-product-row .buy {
  border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 0.78rem; cursor: default;
  background: var(--sq-btn-primary-bg, #7c9cff); color: var(--sq-btn-primary-text, #0f1117);
  background-size: cover; background-position: center;
}
.sq-product-row .cart {
  border: none; border-radius: 8px; padding: 6px 10px; font-size: 0.72rem; cursor: default;
  background: var(--sq-btn-secondary-bg, #2a3348); color: var(--sq-btn-secondary-text, #e8eaef);
  background-size: cover; background-position: center;
}
.sq-tile-actions .buy {
  border: none; border-radius: 8px; padding: 8px 10px; font-weight: 600; font-size: 0.72rem; cursor: default;
  background: var(--sq-btn-primary-bg, #7c9cff); color: var(--sq-btn-primary-text, #0f1117);
  background-size: cover; background-position: center;
}
.sq-tile-actions .cart {
  border: none; border-radius: 8px; padding: 8px 10px; font-size: 0.72rem; cursor: default;
  background: var(--sq-btn-secondary-bg, #2a3348); color: var(--sq-btn-secondary-text, #e8eaef);
  background-size: cover; background-position: center;
}

.sq-foot { margin-top: 32px; font-size: 0.72rem; color: var(--sq-text-dim, #9aa3b5); font-style: italic; }

.sq-group-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sq-accent, #7c9cff); margin: 16px 0 8px;
}

.layout-capacity-list .play-store-item,
.layout-capacity-list .play-store-cap-item,
.layout-capacity-list .layout-cap-item {
  background-color: var(--sq-card-bg-color, #1e2230);
  background-image: var(--sq-card-bg-image, none);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--sq-card-border-color, #2c3344);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.layout-capacity-list .play-store-item-desc,
.layout-capacity-list .sq-text-desc { display: block; font-size: 0.72rem; margin-top: 2px; color: var(--sq-text-desc-color, var(--sq-text-dim, #9aa3b5)); }
.layout-capacity-list .play-store-item-meta,
.layout-capacity-list .sq-text-meta { display: block; font-size: 0.72rem; margin-top: 2px; color: var(--sq-text-meta-color, var(--sq-accent2, #9aa3b5)); }
.layout-capacity-list .capacity-tier-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.layout-capacity-list .capacity-tier-cell { flex: 1; min-width: 52px; }
.layout-capacity-list .capacity-tier-btn { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 6px 4px; font-size: 0.72rem; }
.layout-capacity-list .capacity-tier-btn small { font-size: 0.58rem; opacity: 0.85; }