.mexela-generator {
    color: var(--mexela-ink, #2d1e2f);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mexela-generator *, .mexela-generator *::before, .mexela-generator *::after {
    box-sizing: border-box;
}
.mexela-generator [hidden] { display: none !important; }
.mexela-generator__form {
    background: var(--mexela-soft, #fff1ee);
    border: 1px solid var(--mexela-border, #e6dde4);
    border-radius: 16px;
    padding: clamp(16px, 3vw, 28px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-block: 24px;
}
.mexela-generator__field { min-width: 0; }
.mexela-generator__field--wide, .mexela-generator__actions { grid-column: 1 / -1; }
.mexela-generator label { display: block; font-weight: 650; margin-bottom: 6px; }
.mexela-generator input, .mexela-generator select, .mexela-generator textarea {
    color: #2d1e2f;
    background: #fff;
    border: 1px solid #867689;
    border-radius: 6px;
    display: block;
    font: inherit;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 11px 12px;
}
.mexela-generator [aria-invalid="true"] { border: 2px solid #a42620; }
.mexela-generator__help { color: #625866; font-size: 0.9em; margin: 8px 0 0; }
.mexela-generator__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mexela-generator button {
    border: 1px solid #2d1e2f;
    border-radius: 8px;
    background: #2d1e2f;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    min-height: 44px;
    padding: 10px 16px;
    white-space: normal;
}
.mexela-generator button:hover:enabled { background: #49314c; }
.mexela-generator button:disabled { cursor: default; opacity: 0.6; }
.mexela-generator :where(button, input, select, textarea, pre):focus-visible {
    outline: 3px solid #a42620;
    outline-offset: 3px;
}
.mexela-generator__error { color: #a42620; font-weight: 650; }
.mexela-generator__error:empty { display: none; }
.mexela-generator__status { min-height: 1.5em; }
.mexela-generator__output {
    border: 1px solid var(--mexela-border, #e6dde4);
    border-radius: 12px;
    max-width: 100%;
    min-width: 0;
    margin-block: 24px;
    padding: clamp(14px, 2.5vw, 24px);
}
.mexela-generator__output-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mexela-generator__output-heading h3 { margin: 0; }
.mexela-generator pre {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 16px 0;
    padding: 18px;
    background: #251b27;
    color: #f9f5fa;
    border: 1px solid #49314c;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 4;
}
.mexela-generator pre code {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: inherit;
    overflow-wrap: normal;
    word-break: normal;
}
.mexela-generator textarea {
    font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    resize: vertical;
    min-height: 180px;
    overflow: auto;
}
.mexela-generator__copy-status { min-height: 1.5em; font-size: 0.9em; }
@media (max-width: 540px) {
    .mexela-generator__form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mexela-generator__output-heading { align-items: flex-start; }
    .mexela-generator button { max-width: 100%; }
    .mexela-generator pre { padding: 14px; }
}