.gts-design-studio {
    --gts-ds-admin-border: #d9e2ec;
    --gts-ds-admin-surface: #ffffff;
    --gts-ds-admin-muted: #52606d;
    max-width: 1440px;
}

.gts-design-studio__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 510px); gap: 24px; margin-top: 20px; align-items: start; }
.gts-design-studio__panel, .gts-design-studio__preview-wrap { margin: 0 0 18px; padding: 20px; border: 1px solid var(--gts-ds-admin-border); border-radius: 14px; background: var(--gts-ds-admin-surface); box-shadow: 0 3px 12px rgba(15, 23, 42, .04); }
.gts-design-studio__panel h2, .gts-design-studio__preview-wrap h2 { margin: 0 0 12px; }
.gts-design-studio__toggle, .gts-design-studio__preset { display: flex; align-items: center; gap: 9px; }
.gts-design-studio__presets { display: grid; gap: 8px; }
.gts-design-studio__preset { padding: 10px; border: 1px solid var(--gts-ds-admin-border); border-radius: 10px; }
.gts-design-studio__preset small { display: block; color: var(--gts-ds-admin-muted); }
.gts-design-studio__color-grid, .gts-design-studio__select-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.gts-design-studio__media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.gts-design-studio__media-field { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--gts-ds-admin-border); border-radius: 10px; }
.gts-design-studio__media-preview { display: grid; height: 68px; place-items: center; overflow: hidden; border-radius: 8px; background: #f6f8fa; }
.gts-design-studio__media-preview img { max-width: 100%; max-height: 64px; object-fit: contain; }
.gts-design-studio__preset-library { display: grid; gap: 8px; margin-top: 12px; }
.gts-design-studio__preset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eef2f6; }
.gts-design-studio__preset-row span { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.gts-design-studio__import { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gts-design-studio__color-grid label, .gts-design-studio__select-grid label { display: grid; gap: 6px; color: #1f2937; font-weight: 600; }
.gts-design-studio__color-grid input { width: 100%; min-height: 38px; padding: 3px; border: 1px solid var(--gts-ds-admin-border); border-radius: 8px; cursor: pointer; }
.gts-design-studio__select-grid select { width: 100%; }
.gts-design-studio-preview { overflow: hidden; border: 1px solid var(--gts-card-border); border-radius: var(--gts-radius-lg); background: var(--gts-page-bg); color: var(--gts-color-text); font-family: var(--gts-font-base); box-shadow: var(--gts-shadow-md); }
.gts-design-studio-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; background: var(--gts-header-bg); color: var(--gts-header-text, var(--gts-button-primary-text)); font-family: var(--gts-font-heading); }
.gts-design-studio-preview__brand-mark { display: inline-grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--gts-color-accent) 82%, #ffffff); }
.gts-design-studio-preview__brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.gts-design-studio-preview__header span { opacity: .82; font-size: 12px; }
.gts-design-studio-preview__main { display: grid; gap: 13px; padding: 16px; }
.gts-design-studio-preview__topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.gts-design-studio-preview a { color: var(--gts-link-color); font-weight: 700; }
.gts-design-studio-preview__badge { display: inline-flex; padding: 4px 9px; border-radius: var(--gts-radius-sm); background: var(--gts-badge-bg); color: var(--gts-button-primary-text); font-size: 11px; font-weight: 800; }
.gts-design-studio-preview__card { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--gts-card-border); border-radius: var(--gts-radius-md); background: var(--gts-card-bg); box-shadow: var(--gts-shadow-sm); }
.gts-design-studio-preview__image { display: grid; width: 78px; height: 78px; place-items: center; border-radius: var(--gts-radius-md); background: var(--gts-color-accent); color: var(--gts-color-secondary); font-size: 28px; font-weight: 800; }
.gts-design-studio-preview__card h3, .gts-design-studio-preview__card p { margin: 0 0 5px; }
.gts-design-studio-preview__card p { color: var(--gts-color-muted); font-size: 12px; }
.gts-design-studio-preview__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.gts-design-studio-preview button { min-height: 38px; border: 1px solid var(--gts-button-primary-bg); border-radius: var(--gts-radius-md); background: var(--gts-button-primary-bg); color: var(--gts-button-primary-text); box-shadow: var(--gts-shadow-sm); font: inherit; font-size: 12px; font-weight: 800; }
.gts-design-studio-preview button.is-secondary { background: var(--gts-button-secondary-bg); }
.gts-design-studio-preview button.is-vinted { border-color: #09b1ba; background: #09b1ba; }
.gts-design-studio-preview[data-gts-button-style="outline"] button { background: transparent; color: var(--gts-button-primary-bg); box-shadow: none; }
.gts-design-studio-preview[data-gts-button-style="gradient"] button { border-color: transparent; background: linear-gradient(135deg, var(--gts-button-primary-bg), var(--gts-color-accent)); }
.gts-design-studio-preview[data-gts-button-style="glass"] button { background: color-mix(in srgb, var(--gts-button-primary-bg) 78%, transparent); backdrop-filter: blur(4px); }
.gts-design-studio-preview[data-gts-badge-style="rectangle"] .gts-design-studio-preview__badge { border-radius: 3px; }
.gts-design-studio-preview[data-gts-badge-style="premium"] .gts-design-studio-preview__badge { border: 1px solid color-mix(in srgb, var(--gts-badge-bg) 65%, #ffffff); box-shadow: var(--gts-shadow-sm); }
.gts-design-studio-preview[data-gts-badge-style="japanese"] .gts-design-studio-preview__badge { border-radius: 4px 12px 4px 12px; }
.gts-design-studio-preview[data-gts-card-style="minimal"] .gts-design-studio-preview__card { box-shadow: none; }
.gts-design-studio-preview[data-gts-card-style="premium"] .gts-design-studio-preview__card { box-shadow: var(--gts-shadow-lg); }
.gts-design-studio-preview[data-gts-card-style="kawaii"] .gts-design-studio-preview__image { border: 3px solid color-mix(in srgb, var(--gts-color-accent) 50%, #ffffff); }
.gts-design-studio-preview[data-gts-card-style="gaming"] .gts-design-studio-preview__card { border-width: 2px; }
.gts-design-studio-preview__trust, .gts-design-studio-preview__social, .gts-design-studio-preview__cart, .gts-design-studio-preview__review { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid var(--gts-color-border); border-radius: var(--gts-radius-md); background: var(--gts-color-surface); font-size: 12px; }
.gts-design-studio-preview__trust strong { color: var(--gts-color-warning); letter-spacing: 1px; }
.gts-design-studio-preview__social b { display: inline-flex; padding: 4px 7px; border-radius: var(--gts-radius-sm); background: var(--gts-color-accent); font-size: 10px; }
.gts-design-studio-preview__field { display: grid; gap: 5px; color: var(--gts-color-muted); font-size: 12px; }
.gts-design-studio-preview__field input { box-sizing: border-box; width: 100%; padding: 9px; border: 1px solid var(--gts-color-border); border-radius: var(--gts-radius-sm); color: var(--gts-color-text); background: var(--gts-color-surface); }
.gts-design-studio-preview__cart { background: var(--gts-footer-bg); color: var(--gts-button-primary-text); }
.gts-design-studio-preview__review strong { color: var(--gts-color-warning); }
.gts-design-studio-preview__popup { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--gts-color-primary); border-radius: var(--gts-radius-lg); background: var(--gts-card-bg); box-shadow: var(--gts-shadow-sm); }
.gts-design-studio-preview__popup small { color: var(--gts-color-muted); }
.gts-design-studio-preview__variables { padding: 9px; border: 1px dashed var(--gts-color-border); border-radius: var(--gts-radius-sm); color: var(--gts-color-text); font-size: 11px; }
.gts-design-studio-preview__variables code { display: block; max-height: 180px; overflow: auto; margin-top: 8px; white-space: pre-wrap; }

@media (max-width: 960px) { .gts-design-studio__layout { grid-template-columns: 1fr; } .gts-design-studio__preview-wrap { position: static; } }
@media (max-width: 640px) { .gts-design-studio__color-grid, .gts-design-studio__select-grid, .gts-design-studio__media-grid { grid-template-columns: 1fr; } .gts-design-studio-preview__buttons { grid-template-columns: 1fr; } .gts-design-studio__preset-row { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .gts-design-studio *, .gts-design-studio *::before, .gts-design-studio *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }