.sks-configurator {
    display: grid;
    gap: 20px;
    margin: 24px 0;
    color: #172033;
}
.sks-configurator [hidden] { display: none !important; }

.sks-configurator *, .sks-configurator *::before, .sks-configurator *::after { box-sizing: border-box; }
.sks-configurator__controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px;
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #f7f9fc;
}
.sks-configurator label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.sks-configurator select, .sks-configurator textarea, .sks-configurator input {
    width: 100%;
    border: 1px solid #8795aa;
    border-radius: 7px;
    background: #fff;
    color: #172033;
    font: inherit;
}
.sks-configurator select, .sks-configurator input { min-height: 44px; padding: 8px 10px; }
.sks-configurator textarea { padding: 12px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.sks-configurator select:focus-visible, .sks-configurator textarea:focus-visible, .sks-configurator button:focus-visible { outline: 3px solid #f3a712; outline-offset: 2px; }
.sks-configurator__preview { overflow: hidden; border: 1px solid #cbd4e2; border-radius: 12px; background: #f5f7fa; }
.sks-configurator__preview iframe { display: block; width: 100%; border: 0; }
.sks-configurator__preview.is-mobile { width: 390px; max-width: 100%; justify-self: center; }
.sks-configurator__code { display: grid; gap: 10px; }
.sks-configurator__code .button { justify-self: start; min-height: 42px; padding: 8px 16px; }
.sks-configurator__code [role="status"] { min-height: 1.4em; color: #33415a; font-size: 14px; }

@media (max-width: 600px) {
    .sks-configurator__controls { grid-template-columns: 1fr; }
}