.custom-html-assist {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-5);
    color: var(--studio-text-primary);
    font-family: var(--studio-font-sans);
}

.custom-html-assist header {
    margin-bottom: var(--space-4);
}

.custom-html-assist h2 {
    margin: 0;
    font-size: var(--studio-type-dialog-title-size);
    line-height: var(--studio-type-dialog-title-line-height);
}

.custom-html-assist header p {
    margin: var(--space-1) 0 0;
    color: var(--studio-text-muted);
    font-size: var(--studio-type-body-compact-size);
}

.custom-html-assist__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    color: var(--studio-text-muted);
    font-size: var(--studio-type-meta-size);
    list-style: none;
}

.custom-html-assist__steps li { display: flex; gap: var(--space-1); align-items: center; }
.custom-html-assist__steps li.is-current { color: var(--studio-text-accent); }
.custom-html-assist__steps span { font-variant-numeric: tabular-nums; }

.custom-html-assist [data-assist-content] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
    overflow: auto;
}

.custom-html-assist label {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--studio-text-secondary);
    font-size: var(--studio-type-field-label-size);
    letter-spacing: var(--studio-type-field-label-letter-spacing);
    text-transform: uppercase;
}

.custom-html-assist textarea,
.custom-html-assist select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-small);
    background: var(--color-bg-input);
    color: var(--studio-text-primary);
    font: inherit;
    font-size: var(--studio-type-body-compact-size);
    resize: vertical;
}

.custom-html-assist button,
.custom-html-editor__actions button {
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-small);
    background: var(--color-accent-soft);
    color: var(--studio-text-accent);
    font: inherit;
    font-size: var(--studio-type-ui-label-size);
    font-weight: var(--studio-font-weight-medium);
    cursor: pointer;
}

.custom-html-assist button:hover:not(:disabled),
.custom-html-editor__actions button:hover:not(:disabled) {
    background: var(--color-accent);
    color: #06090c;
}

.custom-html-assist button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.custom-html-assist footer,
.custom-html-assist-actions,
.custom-html-editor__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.custom-html-assist-preview,
.custom-html-editor__preview iframe {
    width: 100%;
    margin-top: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-small);
    background: #fff;
}

.custom-html-assist__workspace-title { margin: 0; font-size: var(--studio-type-body-size); }
.custom-html-assist-hint { margin: 0; color: var(--studio-text-muted); font-size: var(--studio-type-meta-size); }
.custom-html-assist-success { padding: var(--space-4); border: 1px solid var(--color-accent-border); border-radius: var(--radius-small); background: var(--color-accent-soft); }
.custom-html-assist-success h3,
.custom-html-assist-success p { margin-top: 0; }

.custom-html-assist__format {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-small);
    background: var(--color-bg-input);
    color: var(--studio-text-secondary);
    font: inherit;
    font-size: var(--studio-type-meta-size);
    white-space: pre-wrap;
}

.custom-html-assist__providers {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-small);
    background: var(--color-bg-input);
}

.custom-html-assist__providers summary { padding: var(--space-3); color: var(--studio-text-secondary); cursor: pointer; }
.custom-html-assist__providers summary span { color: var(--studio-text-accent); }
.custom-html-assist__providers > div { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.custom-html-assist__providers a { color: var(--studio-text-accent); font-size: var(--studio-type-ui-label-size); }
.custom-html-assist__providers p { flex-basis: 100%; margin: 0; color: var(--studio-text-muted); font-size: var(--studio-type-meta-size); }

.custom-html-assist-error,
.custom-html-editor__validation {
    margin: 0;
    color: var(--studio-text-danger);
    font-size: var(--studio-type-meta-size);
    line-height: var(--studio-type-meta-line-height);
}