.rme-studio-modal,
.rme-studio-batch-modal,
.rme-studio-settings-modal,
.rme-style-modal,
.rme-ref-modal,
.rme-ref-view-modal {
    z-index: 1100;
}

.rme-studio-dialog {
    width: min(1120px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border: 1px solid #cfd9e2;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 52px rgba(7, 20, 33, 0.3);
}

.rme-studio-body {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.02fr);
    gap: 14px;
    padding: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #F5F0E8;
}

.rme-studio-panel,
.rme-style-panel {
    border: 1px solid #dbe4ec;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    min-height: 0;
}

.rme-studio-panel label,
.rme-style-panel label,
.rme-studio-foot-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #2d3c49;
}

.rme-studio-select,
.rme-style-input {
    width: 100%;
    border: 1px solid #cdd8e3;
    border-radius: 8px;
    padding: 0.52rem 0.6rem;
    font-size: 0.9rem;
    background: #fcfdff;
    color: #233342;
    margin-bottom: 10px;
}

.rme-studio-textarea,
.rme-style-textarea {
    width: 100%;
    border: 1px solid #cdd8e3;
    border-radius: 10px;
    padding: 0.72rem 0.82rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #233342;
    background: #fcfdff;
    resize: vertical;
}

.rme-studio-paragraph {
    min-height: 220px;
    margin-bottom: 12px;
}

.rme-studio-final-prompt {
    height: calc(5 * 1.55em + 1.44rem);
    min-height: calc(5 * 1.55em + 1.44rem);
    max-height: calc(5 * 1.55em + 1.44rem);
    overflow: auto;
    resize: none;
    border-color: #244c2b;
    font-family: "Courier New", "Lucida Console", monospace;
    letter-spacing: 0.01em;
    color: #8df58d;
    background:
        linear-gradient(
            180deg,
            rgba(124, 255, 124, 0.06) 0,
            rgba(124, 255, 124, 0.02) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(circle at top, rgba(144, 255, 144, 0.08), transparent 55%),
        #081008;
    box-shadow:
        inset 0 0 0 1px rgba(141, 245, 141, 0.08),
        inset 0 0 18px rgba(87, 166, 87, 0.18);
    text-shadow: 0 0 4px rgba(124, 255, 124, 0.26);
    margin-bottom: 12px;
}

.rme-studio-final-prompt::placeholder {
    color: rgba(141, 245, 141, 0.52);
}

.rme-studio-style-text {
    min-height: 0;
    height: 4.8em;
    max-height: 4.8em;
    overflow-y: auto;
    resize: none;
}

.rme-studio-preview-wrap {
    position: relative;
    height: 250px;
    border: 1px dashed #d5dee7;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}

.rme-studio-preview-empty {
    padding: 20px;
    text-align: center;
    color: #617282;
    font-size: 0.9rem;
}

.rme-studio-preview-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
}

.rme-studio-log {
    width: 100%;
    height: calc(3 * 1.45em + 1.24rem);
    min-height: calc(3 * 1.45em + 1.24rem);
    max-height: calc(3 * 1.45em + 1.24rem);
    border: 1px solid #244c2b;
    border-radius: 10px;
    padding: 0.62rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.45;
    font-family: "Courier New", "Lucida Console", monospace;
    letter-spacing: 0.01em;
    color: #8df58d;
    background:
        linear-gradient(
            180deg,
            rgba(124, 255, 124, 0.06) 0,
            rgba(124, 255, 124, 0.02) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(circle at top, rgba(144, 255, 144, 0.08), transparent 55%),
        #081008;
    box-shadow:
        inset 0 0 0 1px rgba(141, 245, 141, 0.08),
        inset 0 0 18px rgba(87, 166, 87, 0.18);
    text-shadow: 0 0 4px rgba(124, 255, 124, 0.26);
    resize: none;
    overflow: auto;
    margin-bottom: 12px;
}

.rme-studio-style-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rme-studio-foot {
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.rme-studio-foot-group {
    min-width: 180px;
}

.rme-studio-foot-group .rme-studio-select {
    margin-bottom: 0;
}

.rme-studio-foot-group-image {
    min-width: min(360px, 100%);
}

.rme-studio-hidden-select {
    display: none;
}

.rme-studio-settings-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.rme-studio-settings-trigger {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 11px;
    border: 1px solid #A0845C;
    border-radius: 8px;
    background: #8B6F47;
    color: #fff;
    cursor: pointer;
}

.rme-studio-settings-trigger:hover {
    border-color: #7A5C38;
    background: #7A5C38;
}

.rme-studio-settings-trigger-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

.rme-studio-settings-summary-box {
    flex: 1 1 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid #C4A882;
    border-radius: 8px;
    background: #EDE0CC;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #4A3520;
    word-break: break-word;
}

.rme-studio-foot-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.rme-btn-batch {
    border-color: #d89b97;
    background: #f7d9d7;
    color: #703b38;
}

.rme-btn-batch:hover {
    background: #f3cbc8;
}

.rme-studio-batch-dialog {
    width: min(760px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border: 1px solid #cfd9e2;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 52px rgba(7, 20, 33, 0.3);
}

.rme-studio-batch-body {
    display: grid;
    gap: 12px;
    padding: 14px;
    min-height: 0;
    overflow: auto;
    background: #F5F0E8;
}

.rme-studio-batch-meta {
    display: grid;
    gap: 6px;
}

.rme-studio-batch-count {
    font-size: 0.92rem;
    font-weight: 800;
    color: #223341;
}

.rme-studio-batch-status {
    min-height: 1.45em;
    font-size: 0.82rem;
    color: #536677;
}

.rme-studio-batch-list {
    display: grid;
    gap: 10px;
}

.rme-studio-batch-empty {
    padding: 18px 16px;
    border: 1px dashed #d6dfe8;
    border-radius: 8px;
    background: #fff;
    color: #5f7282;
    font-size: 0.88rem;
    line-height: 1.55;
}

.rme-studio-batch-item {
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.rme-studio-batch-item.is-current {
    border-color: #1f5ea6;
    background: #edf5ff;
    box-shadow: inset 0 0 0 1px rgba(31, 94, 166, 0.08);
}

.rme-studio-batch-item.is-done {
    border-color: #8fc5a1;
    background: #f4fbf6;
}

.rme-studio-batch-item.is-error {
    border-color: #d7a0a0;
    background: #fff6f6;
}

.rme-studio-batch-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rme-studio-batch-item-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #223341;
}

.rme-studio-batch-item-meta {
    font-size: 0.76rem;
    color: #5d6f7f;
}

.rme-studio-batch-item-preview {
    max-height: 8.2em;
    overflow: auto;
    color: #334858;
    font-size: 0.84rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.rme-studio-batch-item-status {
    min-height: 1.35em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #536677;
}

.rme-studio-batch-item.is-done .rme-studio-batch-item-status {
    color: #2d6a41;
}

.rme-studio-batch-item.is-error .rme-studio-batch-item-status {
    color: #9f3e3e;
}

.rme-studio-batch-foot {
    justify-content: flex-end;
    gap: 8px;
}

.rme-style-dialog {
    width: min(980px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border: 1px solid #cfd9e2;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 52px rgba(7, 20, 33, 0.3);
}

.rme-style-body {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    gap: 14px;
    padding: 14px;
    min-height: 0;
    overflow: auto;
    background: #F5F0E8;
}

.rme-style-list-panel {
    overflow: auto;
}

.rme-style-list {
    display: grid;
    gap: 8px;
}

.rme-style-item {
    border: 1px solid #d8e1ea;
    border-radius: 10px;
    padding: 10px;
    background: #f8fbff;
    cursor: pointer;
}

.rme-style-item.is-selected {
    border-color: #1f5ea6;
    background: #edf5ff;
    box-shadow: inset 0 0 0 1px rgba(31, 94, 166, 0.08);
}

.rme-style-item-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #223341;
}

.rme-style-item-meta {
    margin-top: 4px;
    font-size: 0.76rem;
    color: #5c6d7c;
}

.rme-style-item-preview {
    margin-top: 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #425462;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.rme-style-editor-panel {
    display: flex;
    flex-direction: column;
}

.rme-style-textarea {
    min-height: 280px;
}

#ablogimg-recipe-modal .rme-style-body {
    overflow: hidden;
}

#ablogimg-recipe-modal .rme-style-editor-panel {
    min-height: 0;
    overflow: auto;
}

#ablogimg-recipe-modal .rme-prompt-recipe-system {
    min-height: 110px;
    max-height: 22vh;
    overflow-y: auto;
}

#ablogimg-recipe-modal .rme-prompt-recipe-user {
    min-height: 150px;
    max-height: 28vh;
    overflow-y: auto;
}

.rme-style-status {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f5f9fd;
    border: 1px solid #dbe4ec;
    color: #425462;
    font-size: 0.82rem;
    font-weight: 700;
}

.rme-style-help {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #617282;
    line-height: 1.5;
}

.rme-style-foot {
    justify-content: flex-end;
}

.rme-style-foot-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rme-studio-settings-dialog {
    width: min(860px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border: 1px solid #cfd9e2;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 52px rgba(7, 20, 33, 0.3);
}

.rme-studio-settings-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.3fr);
    gap: 14px;
    padding: 14px;
    min-height: 0;
    overflow: auto;
    background: #F5F0E8;
}

.rme-studio-settings-tabs {
    display: grid;
    gap: 8px;
    align-content: start;
}

.rme-studio-settings-tab {
    width: 100%;
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    background: #f8fbff;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    color: #223341;
}

.rme-studio-settings-tab.is-active {
    border-color: #1f5ea6;
    background: #edf5ff;
    box-shadow: inset 0 0 0 1px rgba(31, 94, 166, 0.08);
}

.rme-studio-settings-tab-title {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
}

.rme-studio-settings-tab-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #5c6d7c;
}

.rme-studio-settings-form {
    min-height: 0;
}

.rme-settings-panel {
    display: grid;
    gap: 12px;
}

.rme-settings-panel-head {
    display: grid;
    gap: 4px;
}

.rme-settings-panel-head strong {
    font-size: 0.96rem;
    color: #223341;
}

.rme-settings-panel-head p,
.rme-settings-help {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #5c6d7c;
}

.rme-settings-fieldset {
    margin: 0;
    padding: 12px;
    border: 1px solid #dbe4ec;
    border-radius: 8px;
    background: #fff;
    min-width: 0;
}

.rme-settings-fieldset legend {
    padding: 0 4px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #2d3c49;
}

.rme-settings-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rme-settings-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    background: #f8fbff;
    font-size: 0.84rem;
    line-height: 1.35;
    color: #223341;
    cursor: pointer;
}

.rme-settings-option input {
    margin: 0;
}

.rme-settings-select,
.rme-settings-range {
    width: 100%;
    border: 1px solid #cdd8e3;
    border-radius: 8px;
    padding: 0.52rem 0.6rem;
    font-size: 0.9rem;
    background: #fcfdff;
    color: #233342;
}

.rme-settings-range {
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    height: 20px;
    cursor: pointer;
}

.rme-settings-range::-webkit-slider-runnable-track {
    height: 8px;
    border: 1px solid #cdd8e3;
    border-radius: 999px;
    background: #fcfdff;
}

.rme-settings-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 1px solid #9db2c5;
    border-radius: 50%;
    background: #233342;
    box-shadow: 0 1px 3px rgba(9, 24, 38, 0.22);
}

.rme-settings-range::-moz-range-track {
    height: 8px;
    border: 1px solid #cdd8e3;
    border-radius: 999px;
    background: #fcfdff;
}

.rme-settings-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 1px solid #9db2c5;
    border-radius: 50%;
    background: #233342;
    box-shadow: 0 1px 3px rgba(9, 24, 38, 0.22);
}

.rme-settings-range-row {
    display: grid;
    gap: 8px;
}

.rme-settings-range-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #425462;
}

.rme-studio-settings-foot {
    justify-content: flex-end;
    gap: 8px;
}

.rme-ref-dialog {
    width: min(460px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border: 1px solid #cfd9e2;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 52px rgba(7, 20, 33, 0.3);
}

.rme-ref-view-dialog {
    width: min(520px, calc(100vw - 20px));
}

.rme-ref-body {
    display: grid;
    gap: 10px;
    padding: 14px;
    min-height: 0;
    overflow: auto;
    background: #F5F0E8;
}

.rme-ref-file {
    font-size: 0.8rem;
    font-weight: 700;
    color: #607181;
}

.rme-ref-help {
    font-size: 0.8rem;
    line-height: 1.55;
    color: #526678;
    background: #f5f8fb;
    border: 1px solid #d8e1e9;
    border-radius: 10px;
    padding: 10px 12px;
}

.rme-ref-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #2d3c49;
}

.rme-ref-select {
    width: 100%;
    border: 1px solid #cdd8e3;
    border-radius: 8px;
    padding: 0.52rem 0.6rem;
    font-size: 0.9rem;
    background: #fcfdff;
    color: #233342;
}

.rme-ref-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #304352;
}

.rme-ref-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e5eef5;
    overflow: hidden;
    border: 1px solid #d3dde6;
}

.rme-ref-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3a79c9 0%, #58b7d7 100%);
    transition: width 0.2s ease;
}

.rme-ref-status {
    font-size: 0.84rem;
    color: #42586c;
    min-height: 1.4em;
}

.rme-ref-log-box {
    margin: 0;
    min-height: 92px;
    max-height: 160px;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #d7e0e8;
    background: #f7fafc;
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #2c4052;
}

.rme-ref-foot {
    justify-content: flex-end;
    gap: 8px;
}

.rme-ref-view-method {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #eef4fb;
    border: 1px solid #d7e4f1;
    color: #3b5570;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
}

.rme-ref-view-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #314756;
}

.rme-ref-view-box {
    min-height: 120px;
    border-radius: 12px;
    border: 1px solid #d8e1ea;
    background: #f8fbfd;
    padding: 12px;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #263847;
    white-space: pre-wrap;
}

@media (max-width: 980px) {
    .rme-studio-body,
    .rme-style-body,
    .rme-studio-settings-body {
        grid-template-columns: 1fr;
    }

    .rme-studio-foot {
        align-items: stretch;
    }

    .rme-studio-foot-group {
        width: 100%;
    }

    .rme-studio-foot-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .rme-studio-settings-row {
        flex-direction: column;
    }

    .rme-studio-settings-trigger {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .rme-studio-body,
    .rme-style-body,
    .rme-studio-settings-body {
        padding: 10px;
        gap: 10px;
    }

    .rme-studio-preview-wrap {
        height: 150px;
    }

    .rme-studio-paragraph,
    .rme-studio-final-prompt,
    .rme-style-textarea {
        min-height: 180px;
    }

    .rme-studio-foot-actions,
    .rme-style-foot-actions,
    .rme-studio-batch-foot {
        justify-content: stretch;
    }

    .rme-studio-foot-actions .rme-btn,
    .rme-style-foot-actions .rme-btn,
    .rme-studio-batch-foot .rme-btn {
        flex: 1 1 120px;
    }

    .rme-studio-settings-foot .rme-btn {
        flex: 1 1 120px;
    }
}