.f152-nav-tabs {
        margin-top: 10px;
}

.f152-field {
        margin-bottom: 16px;
}

.f152-field label {
        font-weight: 600;
        display: block;
        margin-bottom: 6px;
}

.f152-field small {
        color: #666;
        display: block;
        margin-top: 6px;
}

.f152-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
}

@media (max-width: 1100px) {
        .f152-grid {
                grid-template-columns: 1fr;
        }
}

textarea.large-text {
        min-height: 120px;
}

.f152-macros {
        margin: 16px 0 24px;
}

.f152-macros code {
        background: #f6f7f7;
        padding: 2px 6px;
        display: inline-block;
        margin: 2px 6px 2px 0;
}

.f152-macros__thanks {
        background: #e0ffdd;
        padding: 5px;
}

.f152-section-title {
        margin-top: 24px;
}

.f152-field--full {
        grid-column: 1 / -1;
}

.f152-radio-label-spaced {
        margin-left: 12px;
        display: inline-block;
}

.f152-enable-form {
        margin-bottom: 12px;
}

.f152-row-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        margin: 8px 0 16px;
}

.f152-copy-status {
        color: #2271b1;
}

.f152-copybox {
        margin-top: 12px;
}

.f152-copybox__textarea {
        width: 100%;
        min-height: 380px;
        font-family: Menlo, Consolas, Monaco, monospace;
}

.f152-grid--colors .f152-field {
        position: relative;
}

.f152-color-control {
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.f152-color-control__row {
		position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
}

.f152-color-input {
        flex: 1;
}

.f152-color-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 30px;
        padding: 5px!important;
}

.f152-color-button .dashicons {
        font-size: 18px;
        line-height: 1;
}

.f152-color-picker {
        position: absolute;
        right: 0;
        top: 0;
        width: 38px;
        height: 38px;
        opacity: 0;
		cursor: pointer;
}

.f152-color-opacity label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 400;
        margin: 0;
}

.f152-opacity__range {
        flex: 1;
}

.f152-opacity__value {
        font-weight: 600;
        margin-left: 6px;
}

@media (max-width: 782px) {
        .f152-color-control__row {
                flex-wrap: wrap;
        }

        .f152-color-button {
                width: auto;
                padding: 4px 8px;
                height: auto;
        }
}

.f152-preview {
        margin: 24px 0;
        border: 1px solid #d7d7d7;
        background: #fff;
        border-radius: 10px;
        padding: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.f152-preview__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
}

.f152-preview__hint {
        margin: 6px 0 0;
        color: #555;
}

.f152-preview__frames {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 16px;
}

.f152-preview__frame {
        border: 1px solid #ececec;
        border-radius: 10px;
        background: #fafafa;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
}

.f152-preview__label {
        font-weight: 600;
}

.f152-preview__viewport {
        background: #f3f4f6;
        border-radius: 10px;
        padding: 14px;
        border: 1px solid #e2e2e2;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        overflow: hidden;
}

.f152-preview__banner {
        position: relative;
        isolation: isolate;
}

.f152-preview .f152-banner {
        position: relative;
        inset: auto;
        box-shadow: none;
        border-radius: 8px;
        border: 1px solid var(--f152-border, rgba(0,0,0,.12));
}

.f152-preview .f152-banner__inner {
        max-width: none;
}

.f152-preview__viewport[data-f152-theme="light"] {
        --f152-bg:        #ffffff;
        --f152-text:      #1f2328;
        --f152-link:      #1e73be;
        --f152-btn-bg:    #2271b1;
        --f152-btn-text:  #ffffff;
        --f152-btn-radius: 8px;
        --f152-shadow:    0 10px 30px rgba(0,0,0,.12);
        --f152-border:    rgba(0,0,0,.12);
}

.f152-preview__viewport[data-f152-theme="dark"] {
        --f152-bg:        #111418;
        --f152-text:      #e6e8eb;
        --f152-link:      #7ab7ff;
        --f152-btn-bg:    #2c8cff;
        --f152-btn-text:  #ffffff;
        --f152-btn-radius: 8px;
        --f152-shadow:    0 10px 30px rgba(0,0,0,.5);
        --f152-border:    rgba(255,255,255,.18);
}

.f152-preview .f152-banner__text {
        font-size: 14px;
}