/* AI Studio — магазин шаблонов */
.ai-library {
    width: 100%;
}

.ai-library-tabs {
    margin-bottom: 20px;
}

.ai-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.ai-library-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ai-library-card__preview {
    position: relative;
}

.ai-library-card__preview > .ai-studio-status {
    position: absolute;
    z-index: 3;
    top: 9px;
    right: 9px;
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .24);
}

.ai-library-card__preview img,
.ai-library-card__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-library-card__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    background: linear-gradient(145deg, rgba(37, 99, 235, .13), rgba(15, 23, 42, .32));
}

.ai-library-card__placeholder > span:not(.ai-product-spinner) {
    color: #60a5fa;
    font-size: 28px;
}

.ai-library-card__placeholder strong {
    font-size: 13px;
}

.ai-library-card__placeholder[hidden] {
    display: none;
}

.ai-library-card__placeholder .ai-product-spinner {
    width: 28px;
    height: 28px;
    margin: 0;
}

.ai-library-card .media-info {
    flex: 1;
}

.ai-library-card__actions .btn,
.ai-library-card__actions a.btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

.ai-library-empty {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    border: 1px dashed var(--border-color, rgba(255, 255, 255, .14));
    border-radius: 14px;
    background: var(--card-bg, rgba(255, 255, 255, .03));
    text-align: center;
}

.ai-library-empty > span {
    color: #60a5fa;
    font-size: 34px;
}

.ai-library-empty strong {
    font-size: 17px;
}

.ai-library-empty p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.ai-library-custom-cta {
    margin-top: 18px;
}

.ai-studio-workbench {
    width: min(100%, 1240px);
    margin-inline: auto;
}

.ai-studio-workbench__bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

[data-theme="light"] .ai-library-card__preview > .ai-studio-status {
    border-color: rgba(255, 255, 255, .95);
}

@media (max-width: 720px) {
    .ai-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ai-library-card .media-info,
    .ai-library-card .media-actions {
        padding-inline: 12px;
    }
}

@media (max-width: 480px) {
    .ai-library-grid {
        grid-template-columns: 1fr;
    }

    .ai-studio-workbench__bar {
        align-items: stretch;
        flex-direction: column;
    }

}

.ai-studio-page .ai-studio-loading,
.ai-studio-page .ai-studio-error {
    padding: 24px;
    color: var(--text-muted);
}

.ai-studio-load-state {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .22));
    border-radius: 16px;
    background: var(--card-bg, rgba(255, 255, 255, .03));
    color: var(--text-primary);
    text-align: center;
}

.ai-studio-load-state .ai-product-spinner {
    width: 32px;
    height: 32px;
    margin: 0;
}

.ai-studio-load-state p {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.ai-studio-load-state--error .ai-product-spinner {
    display: none;
}

.ai-studio-load-state__retry {
    min-width: 190px;
    justify-content: center;
}

.ai-studio-banner {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.ai-studio-banner--warn {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

.ai-studio-banner--info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

[data-theme="light"] .ai-studio-banner--warn,
[data-theme="light"] .ai-studio-banner--info {
    background: rgba(37, 99, 235, .09);
    border-color: rgba(37, 99, 235, .28);
    color: #1e3a8a;
}

.ai-store {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-store-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: 16px;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.ai-store-hero__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
}

.ai-store-hero__sub {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 520px;
}

.ai-store-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 12px;
}

.ai-store-tab {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 8px 14px;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ai-store-tab:hover {
    color: var(--text-primary, #fff);
}

.ai-store-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #fff);
}

.ai-store-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.ai-store-chip {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: rgba(0, 0, 0, 0.15);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ai-store-chip.active {
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
}

.ai-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.ai-store-template-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.ai-store-template-intro h3 {
    margin: 6px 0 5px;
    font-size: 20px;
}

.ai-store-template-intro p {
    max-width: 720px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.ai-store-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.ai-store-card:hover {
    transform: translateY(-2px);
    border-color: var(--tpl-accent, #6366f1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.ai-store-card--product {
    display: flex;
    flex-direction: column;
    cursor: default;
}

.ai-store-card--product.is-selected {
    border-color: var(--tpl-accent, #6366f1);
    box-shadow: inset 0 0 0 1px var(--tpl-accent, #6366f1);
}

.ai-store-card__preview {
    position: relative;
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--tpl-accent, #3b82f6) 55%, #0f172a);
    overflow: hidden;
}

.ai-store-card__preview--adaptive {
    background:
        radial-gradient(circle at 76% 34%, rgba(255, 255, 255, .38), transparent 25%),
        linear-gradient(135deg, #0ea5e9, #1d4ed8 58%, #172554);
}

.ai-store-card__preview--creative {
    background:
        radial-gradient(circle at 78% 30%, rgba(251, 191, 36, .65), transparent 19%),
        linear-gradient(135deg, #4c1d95, #a21caf 55%, #f97316);
}

.ai-store-card__preview--facts {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .78) 0 49%, transparent 49%),
        linear-gradient(135deg, #cbd5e1, #64748b);
}

.ai-store-card__preview--custom {
    background:
        radial-gradient(circle at 80% 32%, rgba(45, 212, 191, .42), transparent 24%),
        linear-gradient(135deg, #134e4a, #0f766e 55%, #0f172a);
}

.ai-store-card__preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-store-card__preview.has-image::after {
    display: none;
}

.ai-store-card__preview--adaptive::after,
.ai-store-card__preview--creative::after,
.ai-store-card__preview--facts::after,
.ai-store-card__preview--custom::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -36%;
    width: 70%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .06);
}

.ai-store-card__mock-copy {
    position: absolute;
    z-index: 1;
    left: 9%;
    top: 38%;
    width: 42%;
    display: grid;
    gap: 7px;
}

.ai-store-card__mock-copy i {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
}

.ai-store-card__mock-copy i:first-child {
    width: 82%;
    height: 13px;
}

.ai-store-card__mock-copy i:last-child {
    width: 64%;
    opacity: .72;
}

.ai-store-card__preview--facts .ai-store-card__mock-copy i {
    background: #334155;
}

.ai-store-card__mock-product {
    position: absolute;
    z-index: 1;
    right: 15%;
    bottom: 13%;
    width: 24%;
    height: 58%;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 10px 10px 16px 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .48));
    box-shadow: 0 16px 26px rgba(15, 23, 42, .28);
    transform: rotate(3deg);
}

.ai-store-card__mock-product i {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tpl-accent, #2563eb);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    transform: translate(-50%, -50%);
}

.ai-store-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ai-store-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ai-store-card__ratio {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    font-size: 11px;
    color: #fff;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.24);
}

.ai-store-card__example {
    margin: auto 0 10px;
    padding-top: 10px;
    font-size: 12px;
    color: #60a5fa;
    font-weight: 650;
}

[data-theme="light"] .ai-store-card__example {
    color: #1d4ed8;
}

.ai-store-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px;
}

.ai-store-card__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.ai-store-card__desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
    min-height: 2.9em;
}

.ai-store-card__btn {
    width: 100%;
}

.ai-store-custom-cta {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px dashed var(--border-color, rgba(255, 255, 255, 0.15));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-store-custom-cta p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.ai-store-detail {
    max-width: 980px;
}

.ai-store-detail__layout {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 800px) {
    .ai-store-detail__layout {
        grid-template-columns: 1fr;
    }
}

.ai-store-detail__preview-wrap {
    position: sticky;
    top: 16px;
}

.ai-store-detail__preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    display: block;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.ai-store-detail__preview-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.ai-store-detail__example {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--tpl-accent, #c7d2fe);
    font-weight: 500;
}

.ai-store-form-intro {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.ai-store-back {
    margin-bottom: 12px;
}

.ai-store-detail__head {
    padding: 18px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: color-mix(in srgb, var(--tpl-accent, #3b82f6) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--tpl-accent, #6366f1) 40%, transparent);
}

.ai-store-detail__head h3 {
    margin: 8px 0 6px;
    font-size: 20px;
}

.ai-store-detail__head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.ai-store-detail__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
}

.ai-store-detail__form {
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: rgba(0, 0, 0, 0.12);
}

.ai-store-detail__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ai-store-custom,
.ai-store-works {
    max-width: 900px;
}

.ai-store-panel-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
}

.ai-store-panel-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.ai-store-works__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ai-studio-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    margin-top: 10px;
}

.ai-studio-label:first-child {
    margin-top: 0;
}

.ai-studio-input,
.ai-studio-textarea,
.ai-studio-select {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--input-bg, rgba(0, 0, 0, 0.25));
    color: var(--text-primary, #fff);
    padding: 10px 12px;
    font: inherit;
}

.ai-studio-textarea {
    resize: vertical;
    min-height: 120px;
    margin-bottom: 14px;
}

.ai-studio-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .ai-studio-row {
        grid-template-columns: 1fr;
    }
}

.ai-studio-field {
    min-width: 0;
}

.ai-studio-select--sm {
    flex: 1;
    min-width: 0;
}

.ai-studio-jobs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-studio-empty {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.ai-studio-job {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
    .ai-studio-job {
        grid-template-columns: 1fr;
    }
}

.ai-studio-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
}

.ai-studio-preview--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 8px;
}

.ai-studio-job__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-studio-job__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-studio-job__head .ai-studio-job__meta {
    margin-bottom: 0;
    flex: 1;
}

.ai-studio-job__delete {
    flex: 0 0 auto;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    font-size: 18px;
}

.ai-studio-job__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.ai-studio-job__actions .ai-studio-select--sm {
    min-width: 140px;
    flex: 1 1 140px;
    max-width: 100%;
}

.ai-studio-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    box-sizing: border-box;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ai-studio-status__icon {
    width: 14px;
    height: 14px;
    flex: none;
}

.ai-studio-status--done { background: #eaf1ff; border-color: #c9dcff; color: #1d4ed8; }
.ai-studio-status--error { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.ai-studio-status--progress { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.ai-studio-status--pending { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }

.ai-studio-status--compact {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
}

.ai-studio-status--compact .ai-studio-status__icon {
    width: 14px;
    height: 14px;
}

.ai-studio-status--compact .ai-studio-status__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ai-studio-status--compact.ai-studio-status--done { background: #fff; color: #2563eb; }
.ai-studio-status--compact.ai-studio-status--error { background: #fff; color: #be123c; }
.ai-studio-status--compact.ai-studio-status--progress { background: #fff; color: #2563eb; }
.ai-studio-status--compact.ai-studio-status--pending { background: #fff; color: #64748b; }

[data-theme="dark"] .ai-studio-status--done { background: rgba(59, 130, 246, .2); border-color: rgba(96, 165, 250, .42); color: #bfdbfe; }
[data-theme="dark"] .ai-studio-status--error { background: rgba(244, 63, 94, .18); border-color: rgba(251, 113, 133, .42); color: #fda4af; }
[data-theme="dark"] .ai-studio-status--progress { background: rgba(59, 130, 246, .16); border-color: rgba(96, 165, 250, .36); color: #93c5fd; }
[data-theme="dark"] .ai-studio-status--pending { background: rgba(148, 163, 184, .16); border-color: rgba(148, 163, 184, .32); color: #cbd5e1; }
[data-theme="dark"] .ai-studio-status--compact { background: #fff; }
[data-theme="dark"] .ai-studio-status--compact.ai-studio-status--done { background: #fff; color: #2563eb; }
[data-theme="dark"] .ai-studio-status--compact.ai-studio-status--error { background: #fff; color: #be123c; }
[data-theme="dark"] .ai-studio-status--compact.ai-studio-status--progress { background: #fff; color: #2563eb; }
[data-theme="dark"] .ai-studio-status--compact.ai-studio-status--pending { background: #fff; color: #64748b; }

.ai-studio-job__source {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
}

.ai-studio-job__ratio {
    font-size: 11px;
    color: var(--text-muted);
}

.ai-studio-job__prompt {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-studio-job-error {
    margin: 0 0 8px;
    font-size: 12px;
    color: #f87171;
}

.ai-studio-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ai-studio-credits-link {
    color: #fde68a;
    font-weight: 600;
    text-decoration: underline;
}

.ai-studio-page-intro {
    max-width: 720px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.ai-beta-lock {
    max-width: 620px;
    margin: 48px auto;
    padding: 42px;
    text-align: center;
    border-radius: 22px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
}

.ai-beta-lock__badge,
.ai-product-eyebrow {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ai-beta-lock h2 {
    margin: 16px 0 8px;
}

.ai-beta-lock p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.ai-product-wizard,
.ai-product-result {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ai-product-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: none;
    margin: 0 0 4px;
    width: 100%;
}

.ai-product-steps > span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 12px;
    background: var(--card-bg, rgba(255, 255, 255, .035));
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 750;
}

.ai-product-steps b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, .22);
    background: rgba(59, 130, 246, .10);
    color: #60a5fa;
}

[data-theme="light"] .ai-product-steps b {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

[data-theme="light"] .ai-product-steps > span {
    border-color: #d8e2ef;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.ai-product-steps .is-active {
    color: var(--text-primary, #fff);
    border-color: rgba(59, 130, 246, .42);
    background: rgba(59, 130, 246, .08);
}

.ai-product-steps .is-active b {
    border-color: var(--accent, #3b82f6);
    background: var(--accent, #3b82f6);
    color: #fff;
}

.ai-product-steps .is-complete {
    color: var(--text-primary, #fff);
    border-color: rgba(59, 130, 246, .28);
    background: rgba(59, 130, 246, .045);
}

.ai-product-steps .is-complete b {
    border-color: rgba(59, 130, 246, .5);
    background: rgba(59, 130, 246, .14);
    color: #3b82f6;
}

[data-theme="light"] .ai-product-steps .is-active {
    border-color: #93c5fd;
    background: #eaf2ff;
}

.ai-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ai-product-photo-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "photo request";
    column-gap: 20px;
    align-items: stretch;
    margin-top: 14px;
}

.ai-product-photo-column {
    grid-area: photo;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ai-product-photo-workspace .ai-product-upload {
    height: 100%;
    min-height: 300px;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
}

.ai-product-photo-workspace .ai-product-request {
    grid-area: request;
    min-height: 300px;
    aspect-ratio: auto;
    margin-top: 0;
}

.ai-product-panel__photo-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-product-request > .ai-studio-textarea {
    min-height: 86px;
    height: 86px;
    margin-bottom: 0;
    resize: none;
}

.ai-product-exact-copy {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(59, 130, 246, .22);
    border-radius: 10px;
    background: rgba(59, 130, 246, .055);
}

.ai-product-exact-copy__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ai-product-exact-copy__head strong {
    color: var(--text-primary, #111827);
    font-size: 12px;
}

.ai-product-exact-copy__head span {
    color: var(--text-muted, #6b7280);
    font-size: 11px;
}

.ai-product-exact-copy__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr);
    gap: 7px;
}

.ai-product-exact-copy .ai-studio-input {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
}

.ai-product-exact-copy__required {
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
}

.ai-engine-select {
    display: flex;
    min-width: 225px;
    flex: 0 1 265px;
    flex-direction: column;
    gap: 5px;
}

.ai-engine-select label {
    color: var(--text-primary, #fff);
    font-size: 11px;
    font-weight: 800;
}

.ai-engine-select select {
    width: 100%;
    min-height: 38px;
    padding: 0 36px 0 12px;
    color: var(--text-primary, #fff);
    border: 1px solid rgba(59, 130, 246, .5);
    border-radius: 9px;
    outline: none;
    background: var(--card-bg, #111827);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color-scheme: dark;
    cursor: pointer;
}

.ai-engine-select select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

[data-theme="light"] .ai-engine-select select,
[data-theme="light"] .ai-engine-select select option {
    color: #0f172a;
    background: #fff;
    color-scheme: light;
}

.ai-upos-progress {
    display: flex;
    max-width: 660px;
    margin: 30px auto;
    padding: 42px 34px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(52, 211, 153, .28);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(16, 185, 129, .1), var(--card-bg, rgba(255, 255, 255, .03)));
}

.ai-upos-progress__badge {
    margin-top: 16px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #6ee7b7;
    background: rgba(16, 185, 129, .15);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
}

.ai-upos-progress h3 { margin: 12px 0 8px; }
.ai-upos-progress p { max-width: 520px; margin: 0; color: var(--text-muted); line-height: 1.55; }

.ai-upos-progress__bar {
    width: 100%;
    height: 8px;
    margin: 24px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}

.ai-upos-progress__bar i {
    display: block;
    width: 1%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #60a5fa);
    transition: width .35s ease;
}

.ai-upos-progress > strong { color: #6ee7b7; }
.ai-upos-progress > small { margin-top: 5px; color: var(--text-muted); }

.ai-upos-result-badge {
    display: none;
}

.ai-product-panel {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    transition: opacity .18s;
}

.ai-product-panel.is-disabled {
    opacity: .48;
    pointer-events: none;
}

.ai-product-panel__head,
.ai-product-custom-form__head,
.ai-product-result__head,
.ai-product-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ai-product-panel__head > div,
.ai-product-section-title {
    justify-content: flex-start;
}

.ai-product-panel__head h3,
.ai-product-section-title h3,
.ai-product-result__head h3 {
    margin: 0;
    font-size: 17px;
}

.ai-product-panel__number,
.ai-product-section-title > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 9px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 12px;
    font-weight: 800;
}

.ai-product-upload {
    display: block;
    position: relative;
    max-width: 760px;
    margin: 14px auto 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1.5px dashed rgba(59, 130, 246, .45);
    border-radius: 14px;
    background: rgba(59, 130, 246, .05);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ai-product-upload:hover,
.ai-product-upload.is-dragging {
    border-color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, .11);
}

.ai-product-upload__empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    padding: 20px;
}

.ai-product-upload__empty small,
.ai-product-section-title p,
.ai-product-result__head p,
.ai-product-custom-form__head small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 3px 0 0;
}

.ai-product-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--accent, #3b82f6);
    color: #fff;
    font-size: 25px;
}

.ai-product-upload__preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: rgba(0, 0, 0, .2);
}

.ai-product-upload.has-file {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
}

.ai-product-upload__grid {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(110px, 1fr);
    gap: 8px;
}

.ai-product-upload__grid.is-count-1 {
    grid-template-columns: minmax(0, 1fr) 118px;
}

.ai-product-upload__grid.is-count-3 {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.ai-product-upload__grid.is-count-3 .ai-product-upload__item.is-primary {
    grid-row: span 2;
}

.ai-product-upload__item {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, .2);
    border-radius: 10px;
    background: #fff;
}

.ai-product-upload__item img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100px;
    object-fit: contain;
}

.ai-product-upload__item figcaption {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(5px);
}

.ai-product-upload__item > button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ai-product-upload__add {
    display: flex;
    min-height: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px dashed rgba(59, 130, 246, .5);
    border-radius: 10px;
    color: var(--accent, #2563eb);
    text-align: center;
}

.ai-product-upload__add b {
    font-size: 26px;
    line-height: 1;
}

.ai-product-upload__add small,
.ai-product-upload__summary {
    color: var(--text-muted, #64748b);
    font-size: 10px;
}

.ai-product-upload__summary {
    display: block;
    text-align: center;
}

.ai-product-template-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
}

.ai-product-template-row {
    position: relative;
    min-width: 0;
    max-width: none;
}

.ai-product-template-row .ai-product-template {
    width: 100%;
    height: 100%;
}

.ai-product-template-menu-button {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: #fff;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .24);
    cursor: pointer;
}

.ai-product-template-menu-button:hover,
.ai-product-template-menu-button[aria-expanded="true"] {
    background: #eff6ff;
}

.ai-product-template-menu-button svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.ai-product-template-menu-button:focus-visible,
.ai-product-template-menu button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.ai-product-template-menu {
    position: absolute;
    z-index: 4;
    top: 43px;
    left: 8px;
    display: grid;
    min-width: 152px;
    padding: 5px;
    border: 1px solid var(--border-color, #dbe4f2);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .22);
}

.ai-product-template-menu button {
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary, #111827);
    text-align: left;
    cursor: pointer;
}

.ai-product-template-menu button:hover { background: rgba(59, 130, 246, .1); }
.ai-product-template-menu button.is-danger { color: #dc2626; }

.ai-product-screen-picker {
    display: grid;
    gap: 7px;
    width: 100%;
    min-width: 0;
    margin-top: 14px;
    box-sizing: border-box;
}

.ai-product-screen-picker label {
    color: var(--text-primary, #111827);
    font-size: 13px;
    font-weight: 800;
}

.ai-product-screen-picker select { width: 100%; min-width: 0; min-height: 42px; box-sizing: border-box; }


.ai-product-template {
    position: relative;
    display: flex;
    min-width: 0;
    max-width: none;
    flex-direction: column;
    gap: 9px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 12px;
    background: var(--input-bg, rgba(0, 0, 0, .14));
    color: var(--text-primary, #fff);
    text-align: left;
    cursor: pointer;
}

.ai-product-template:hover,
.ai-product-template.is-selected {
    border-color: var(--accent, #3b82f6);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .18);
}

.ai-product-template__visual {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 5px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(135deg, #2563eb, #0f172a);
}

.ai-product-template__visual.has-image {
    padding: 0;
    overflow: hidden;
}

.ai-product-template__visual.has-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8fafc;
}

.ai-product-template__visual--creative {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.ai-product-template__visual--facts {
    background: linear-gradient(135deg, #e2e8f0, #64748b);
}

.ai-product-template__visual--text {
    align-items: stretch;
    justify-content: stretch;
    padding: 12px;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 58%, #60a5fa 100%);
}

.ai-product-template-text-preview {
    display: flex;
    width: 62%;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    color: #fff;
}

.ai-product-template-text-preview b {
    font-size: clamp(8px, .85vw, 13px);
    line-height: 1.05;
}

.ai-product-template-text-preview i {
    width: 72%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
}

.ai-product-template-text-preview em {
    align-self: flex-start;
    padding: 4px 7px;
    border-radius: 6px;
    background: #f59e0b;
    color: #111827;
    font-size: clamp(7px, .7vw, 11px);
    font-style: normal;
    font-weight: 900;
}

.ai-product-template__visual--custom {
    background: linear-gradient(135deg, #0f766e, #0f172a);
}

.ai-product-template__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-product-template__copy strong {
    font-size: 13px;
}

.ai-product-template__copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ai-product-template__check {
    position: absolute;
    top: 14px;
    right: 14px;
    visibility: hidden;
}

.ai-product-template.is-selected .ai-product-template__check {
    visibility: visible;
}

.ai-product-add-template {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed #8ab3ff;
    border-radius: 12px;
    background: rgba(59, 130, 246, .06);
    color: #1d4ed8;
    font-weight: 700;
    cursor: pointer;
}

.ai-product-add-template:hover,
.ai-product-add-template:focus-visible {
    background: rgba(59, 130, 246, .12);
    border-color: #3b82f6;
    outline: none;
}

.ai-product-custom-form {
    margin-top: 14px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #eaf2ff);
    border: 1px solid #bfd5ff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .08);
}

.ai-product-custom-form__head {
    justify-content: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid #dbe8ff;
}

.ai-product-custom-form__title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ai-product-custom-form__title strong {
    font-size: 16px;
    color: #102c60;
}

.ai-product-custom-form__title small {
    color: #5d7195;
}

.ai-product-custom-form__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #5b96ff, #2563eb);
    color: #fff;
    box-shadow: 0 6px 15px rgba(37, 99, 235, .2);
}

.ai-product-custom-form__close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #526789;
    font-size: 20px;
    cursor: pointer;
}

.ai-product-custom-form__close:hover,
.ai-product-custom-form__close:focus-visible {
    background: #dce9ff;
    color: #1748a3;
    outline: none;
}

.ai-product-custom-form .ai-studio-label {
    margin-top: 16px;
    color: #24416f;
}

.ai-product-custom-form .ai-studio-input,
.ai-product-custom-form .ai-studio-textarea {
    background: #fff;
    border: 1px solid #c7d7f1;
    color: #172b4d;
}

.ai-product-custom-form .ai-studio-input::placeholder,
.ai-product-custom-form .ai-studio-textarea::placeholder {
    color: #657895;
    opacity: 1;
}

.ai-product-custom-form .ai-studio-input:focus,
.ai-product-custom-form .ai-studio-textarea:focus {
    border-color: #3b82f6;
    outline: 3px solid rgba(59, 130, 246, .14);
}

.ai-product-custom-form #ai-product-template-name {
    min-height: 44px;
}

.ai-product-custom-form .ai-studio-label[for="ai-product-template-name"] {
    margin-top: 22px;
    margin-bottom: 8px;
}

.ai-product-custom-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #dbe8ff;
}

.ai-product-custom-form__actions .btn {
    min-width: 184px;
    min-height: 44px;
    padding: 10px 20px;
}

.ai-product-custom-file {
    position: relative;
}

.ai-product-custom-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.ai-product-custom-file__drop {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 12px 14px;
    border: 1.5px dashed #82adfa;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.ai-product-custom-file__drop:hover,
.ai-product-custom-file:focus-within .ai-product-custom-file__drop,
.ai-product-custom-file.has-file .ai-product-custom-file__drop {
    border-color: #2563eb;
    background: #f3f8ff;
}

.ai-product-custom-file__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 11px;
    background: #e3edff;
    color: #2563eb;
    font-size: 23px;
    font-weight: 700;
}

.ai-product-custom-file__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ai-product-custom-file__copy strong {
    overflow: hidden;
    color: #17325c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-product-custom-file__copy small {
    color: #647999;
}

.ai-product-custom-file__action {
    margin-left: auto;
    padding: 7px 12px;
    border-radius: 8px;
    background: #e9f1ff;
    color: #1d4ed8;
    font-weight: 700;
}

.ai-product-custom-form__preview {
    display: block;
    width: 100%;
    max-height: 300px;
    margin: 10px 0 16px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(15, 23, 42, .08);
}

.ai-product-custom-form__preview[hidden] {
    display: none;
}

.ai-product-custom-copy {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
    border-radius: 12px;
}

.ai-product-custom-copy label {
    font-weight: 700;
}

.ai-product-custom-copy small {
    color: var(--text-muted);
    line-height: 1.45;
}

[data-theme="dark"] .ai-product-custom-form {
    background: linear-gradient(135deg, #14233e, #172b4a);
    border-color: #355585;
}

[data-theme="dark"] .ai-product-custom-form__head {
    border-color: #355585;
}

[data-theme="dark"] .ai-product-custom-form__actions {
    border-color: #355585;
}

[data-theme="dark"] .ai-product-custom-form__title strong,
[data-theme="dark"] .ai-product-custom-form .ai-studio-label {
    color: #e7efff;
}

[data-theme="dark"] .ai-product-custom-form__title small,
[data-theme="dark"] .ai-product-custom-file__copy small {
    color: #a7badb;
}

[data-theme="dark"] .ai-product-custom-form .ai-studio-input,
[data-theme="dark"] .ai-product-custom-form .ai-studio-textarea,
[data-theme="dark"] .ai-product-custom-file__drop {
    background: #10213b;
    border-color: #4b6b9d;
    color: #f4f7ff;
}

[data-theme="dark"] .ai-product-custom-form .ai-studio-input::placeholder,
[data-theme="dark"] .ai-product-custom-form .ai-studio-textarea::placeholder,
[data-theme="dark"] .ai-product-custom-file__copy strong {
    color: #c3d2eb;
}

@media (max-width: 600px) {
    .ai-product-custom-form { padding: 15px; }
    .ai-product-custom-file__action { display: none; }
    .ai-product-custom-form__actions .btn { width: 100%; }
}

.ai-product-language {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 650;
}

.ai-product-language > div {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .18);
}

.ai-product-language button {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    padding: 6px 9px;
    cursor: pointer;
}

.ai-product-language button.is-selected {
    background: var(--accent, #3b82f6);
    color: #fff;
}

.ai-product-generate-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(59, 130, 246, .1);
    border: 1px solid rgba(59, 130, 246, .2);
}

.ai-product-generate-bar > .btn {
    align-self: center;
}

.ai-product-request .ai-product-generate-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid rgba(59, 130, 246, .16);
    border-radius: 0;
    background: transparent;
}

.ai-product-request .ai-product-generate-bar > .btn {
    max-width: 100%;
    min-height: 40px;
}

.ai-product-request__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ai-product-request__head > label {
    flex: 1 1 auto;
}

.ai-product-logo-inline {
    display: block;
    width: 48px;
    flex: 0 0 48px;
}

.ai-product-logo-inline__control {
    position: relative;
    width: 48px;
    height: 38px;
}

.ai-product-logo-inline__preview {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 38px;
    overflow: hidden;
    border: 1px dashed rgba(59, 130, 246, .4);
    border-radius: 8px;
    background: rgba(59, 130, 246, .06);
    color: #60a5fa;
    font-size: 18px;
    padding: 0;
    cursor: pointer;
}

.ai-product-logo-inline__preview.has-logo {
    border-style: solid;
    background-color: #fff;
    background-image: conic-gradient(#d8dee8 25%, transparent 0 50%, #d8dee8 0 75%, transparent 0);
    background-size: 12px 12px;
}

.ai-product-logo-background {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(59, 130, 246, .16);
    border-radius: 10px;
    background: rgba(59, 130, 246, .035);
}

.ai-product-logo-background__copy {
    display: flex;
    min-width: 0;
}

.ai-product-logo-background__copy strong {
    color: var(--text-primary, #e2e8f0);
    font-size: 12px;
}

.ai-product-logo-background__controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.ai-product-logo-background__choices {
    display: inline-grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .24));
    border-radius: 9px;
    background: var(--bg-secondary, rgba(15, 23, 42, .06));
}

.ai-product-logo-background__choices button {
    min-height: 28px;
    padding: 4px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ai-product-logo-background__choices button.is-selected {
    background: var(--primary, #2563eb);
    color: #fff;
    box-shadow: 0 2px 7px rgba(37, 99, 235, .2);
}

.ai-product-logo-background__choices button:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.ai-product-logo-background__choices button:disabled {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 560px) {
    .ai-product-logo-background {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-product-logo-background__choices {
        width: 100%;
    }
}

.ai-product-logo-inline__preview img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
}

.ai-product-logo-inline__preview:disabled {
    opacity: .55;
    cursor: wait;
}

.ai-product-logo-inline__preview.is-disabled {
    opacity: .55;
    pointer-events: none;
    cursor: wait;
}

.ai-product-logo-inline__remove {
    position: absolute;
    z-index: 2;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid var(--card-bg, #fff);
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.ai-product-logo-inline__remove:hover {
    background: #dc2626;
}

.ai-product-processing {
    max-width: 620px;
    margin: 28px auto;
    padding: 46px 30px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    background: var(--card-bg, rgba(255, 255, 255, .03));
}

.ai-product-processing h3 {
    margin: 12px 0 8px;
    font-size: 22px;
}

.ai-product-processing p {
    max-width: 480px;
    margin: 0 auto 20px;
    color: var(--text-muted);
    line-height: 1.55;
}

.ai-product-processing > [data-product-new] {
    margin: 14px auto 0;
}

.ai-product-processing__badge {
    display: inline-flex;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.ai-product-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid rgba(59, 130, 246, .18);
    border-top-color: var(--accent, #3b82f6);
    border-radius: 50%;
    animation: ai-product-spin .9s linear infinite;
}

@keyframes ai-product-spin {
    to { transform: rotate(360deg); }
}

.ai-product-result__head {
    align-items: flex-start;
}

.ai-product-result__head h3 {
    margin-top: 0;
    font-size: 22px;
}

.ai-upos-regenerate {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.ai-product-result__head-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-product-save-file {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.ai-product-save-file > span {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 720px) {
    .ai-product-result__head {
        align-items: stretch;
        flex-direction: column;
    }
    .ai-product-result__head-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .ai-product-result--standard .ai-product-result__head-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .ai-product-save-file,
    .ai-upos-regenerate {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ai-product-result__head-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ai-upos-regenerate > span {
    font-size: 18px;
    line-height: 1;
}

.ai-product-success {
    color: #34d399;
    font-size: 11px;
    font-weight: 750;
}

.ai-product-result__secondary {
    width: 100%;
}

.ai-upos-result-steps {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 4px;
}

.ai-upos-result-steps__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.ai-product-result--standard .ai-product-result__head {
    margin-bottom: 16px;
}

.ai-product-result--standard .ai-product-result__secondary {
    margin-top: 18px;
}

.ai-upos-result-step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 50px;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 12px;
    color: var(--text-muted);
    background: var(--card-bg, rgba(255, 255, 255, .035));
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-align: left;
}

[data-theme="light"] .ai-upos-result-step {
    border-color: #d8e2ef;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

button.ai-upos-result-step {
    cursor: pointer;
}

button.ai-upos-result-step:hover:not(:disabled),
button.ai-upos-result-step:focus-visible {
    border-color: #93c5fd;
}

.ai-upos-result-step > span {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid rgba(59, 130, 246, .22);
    border-radius: 50%;
    background: rgba(59, 130, 246, .10);
    color: #60a5fa;
    font-size: 13px;
    font-weight: 850;
}

[data-theme="light"] .ai-upos-result-step > span {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.ai-upos-result-step > strong {
    font-size: inherit;
}

.ai-upos-result-step.is-active {
    color: var(--text-primary, #fff);
    border-color: rgba(59, 130, 246, .42);
    background: rgba(59, 130, 246, .08);
}

[data-theme="light"] .ai-upos-result-step.is-active {
    border-color: #93c5fd;
    background: #eaf2ff;
}

.ai-upos-result-step.is-active > span {
    color: #fff;
    border-color: var(--accent, #3b82f6);
    background: var(--accent, #3b82f6);
}

.ai-upos-result-step.is-done {
    color: var(--text-primary, #fff);
    border-color: rgba(59, 130, 246, .28);
    background: rgba(59, 130, 246, .045);
}

.ai-upos-result-step.is-done > span {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, .5);
    background: rgba(59, 130, 246, .14);
}

.ai-upos-result-step:disabled,
.ai-upos-result-steps__next:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.ai-upos-result-steps__next {
    align-self: flex-end;
    white-space: nowrap;
}

.ai-upos-result-visual {
    width: min(100%, 1040px);
    margin-inline: auto;
}

.ai-upos-result-visual .ai-product-card-preview {
    max-width: none;
}

.ai-upos-research {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.ai-upos-research.is-verified {
    border-color: rgba(16, 185, 129, .32);
    background: rgba(16, 185, 129, .075);
}

.ai-upos-research.is-unverified {
    grid-template-columns: 34px minmax(0, 1fr);
    border-color: rgba(245, 158, 11, .34);
    background: rgba(245, 158, 11, .075);
}

.ai-upos-research__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background: #10b981;
    font-weight: 800;
}

.ai-upos-research.is-unverified .ai-upos-research__icon {
    background: #f59e0b;
}

.ai-upos-research__copy {
    min-width: 0;
}

.ai-upos-research__copy strong,
.ai-upos-research__copy small {
    display: block;
}

.ai-upos-research__copy strong {
    color: var(--text-primary);
    font-size: 13px;
}

.ai-upos-research__copy small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.ai-upos-research > a {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ai-upos-research > a:hover {
    text-decoration: underline;
}

.ai-upos-fonts {
    min-width: 0;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    color: var(--text-primary, #f1f5f9);
    background: var(--bg-secondary, #fff);
}

.ai-upos-fonts fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ai-upos-fonts legend {
    padding: 0;
    font-size: 13px;
    font-weight: 700;
}

.ai-upos-fonts__hint {
    margin: 4px 0 12px;
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    line-height: 1.5;
}

.ai-upos-fonts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 8px;
}

.ai-upos-font {
    position: relative;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.ai-upos-font > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.ai-upos-font__body {
    position: relative;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 9px;
    padding: 17px 11px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-tertiary, #f8fafc);
    transition: border-color .15s ease, background .15s ease;
}

.ai-upos-font:hover .ai-upos-font__body,
.ai-upos-font > input:checked + .ai-upos-font__body {
    border-color: var(--accent, #2563eb);
}

.ai-upos-font > input:checked + .ai-upos-font__body {
    background: color-mix(in srgb, var(--accent, #2563eb) 9%, var(--bg-secondary, #fff));
}

.ai-upos-font > input:focus-visible + .ai-upos-font__body {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
}

.ai-upos-font__sample {
    display: block;
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1.25;
    font-weight: 700;
    text-shadow: none;
    white-space: nowrap;
}

.ai-upos-font__sample--modern { font-family: "Segoe UI", Arial, sans-serif; }
.ai-upos-font__sample--geometric { font-family: Bahnschrift, "Trebuchet MS", sans-serif; }
.ai-upos-font__sample--editorial { font-family: Georgia, "Times New Roman", serif; }
.ai-upos-font__sample--technical { font-family: Consolas, "Courier New", monospace; }
.ai-upos-font__sample--elegant { font-family: Candara, "Trebuchet MS", sans-serif; }

.ai-upos-font__name {
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.ai-upos-font__check {
    position: absolute;
    top: 5px;
    right: 5px;
    visibility: hidden;
}

.ai-upos-font > input:checked + .ai-upos-font__body .ai-upos-font__check {
    visibility: visible;
}

.ai-upos-fonts fieldset:disabled .ai-upos-font {
    cursor: not-allowed;
    opacity: .6;
}

.ai-upos-fonts__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.ai-upos-fonts__footer > span {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    line-height: 1.5;
}

.ai-upos-fonts__footer > button {
    min-height: 42px;
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 480px) {
    .ai-upos-fonts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-upos-font__sample { font-size: 20px; }
    .ai-upos-fonts__footer > button { width: 100%; }
}

.ai-upos-designs {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 14px;
    background: var(--card-bg, rgba(255, 255, 255, .03));
}

.ai-upos-designs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.ai-upos-designs__head > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ai-upos-designs__head strong {
    font-size: 13px;
}

.ai-upos-designs__head small,
.ai-upos-designs__head > span {
    color: var(--text-muted);
    font-size: 10px;
}

.ai-upos-designs__head > span {
    flex: 0 0 auto;
}

.ai-upos-designs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.ai-upos-design {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 11px;
    color: var(--text-primary, #fff);
    background: var(--input-bg, rgba(0, 0, 0, .16));
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ai-upos-design:hover:not(:disabled) {
    border-color: rgba(96, 165, 250, .8);
    transform: translateY(-1px);
}

.ai-upos-design.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .17);
}

.ai-upos-design:disabled {
    cursor: wait;
    opacity: .68;
}

.ai-upos-design img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0f172a;
}

.ai-upos-design > span {
    display: block;
    overflow: hidden;
    padding: 8px 9px;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-upos-design > em {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .24);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
}

[data-theme="light"] .ai-upos-designs {
    border-color: #cbd5e1;
}

.ai-upos-background-picker {
    margin-top: 12px;
}

.ai-upos-background-trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    align-items: center;
    gap: 13px;
    padding: 9px 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 14px;
    color: var(--text-primary, #fff);
    background: var(--card-bg, rgba(255, 255, 255, .03));
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ai-upos-background-trigger:hover:not(:disabled) {
    border-color: rgba(59, 130, 246, .65);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
}

.ai-upos-background-trigger:disabled {
    opacity: .58;
    cursor: wait;
}

.ai-upos-background-trigger__preview {
    display: flex;
    width: 106px;
    height: 54px;
    flex: 0 0 106px;
    overflow: hidden;
    border-radius: 9px;
    background: #0f172a;
}

.ai-upos-background-trigger__preview img {
    display: block;
    min-width: 0;
    flex: 1;
    object-fit: cover;
}

.ai-upos-background-trigger__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.ai-upos-background-trigger__copy strong,
.ai-upos-background-trigger__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-upos-background-trigger__copy strong {
    font-size: 13px;
}

.ai-upos-background-trigger__copy small {
    color: var(--text-muted);
    font-size: 10px;
}

.ai-upos-background-trigger__action {
    flex: 0 0 auto;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
}

.ai-upos-background-picker__state {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 14px;
    background: var(--card-bg, rgba(255, 255, 255, .03));
}

.ai-upos-background-picker__state > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-upos-background-picker__state p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 10px;
}

.ai-upos-background-dialog {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(8px);
}

.ai-upos-background-dialog__panel {
    display: flex;
    width: min(940px, 100%);
    max-height: min(780px, calc(100vh - 44px));
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 20px;
    background: var(--panel-bg, #101827);
    box-shadow: 0 28px 80px rgba(2, 6, 23, .38);
}

[data-theme="light"] .ai-upos-background-dialog {
    background: rgba(15, 23, 42, .46);
}

[data-theme="light"] .ai-upos-background-dialog__panel {
    background: #fff;
}

[data-theme="light"] .ai-upos-background-trigger,
[data-theme="light"] .ai-upos-background-picker__state,
[data-theme="light"] .ai-upos-background-dialog__panel,
[data-theme="light"] .ai-upos-background-dialog__head,
[data-theme="light"] .ai-upos-background-dialog__actions,
[data-theme="light"] .ai-upos-chat,
[data-theme="light"] .ai-upos-chat__messages {
    border-color: #cbd5e1;
}

[data-theme="light"] .ai-upos-chat__messages {
    background: #f8fafc;
}

[data-theme="light"] .ai-upos-chat {
    border-color: #3b82f6;
}

.ai-upos-background-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .1));
}

.ai-upos-background-dialog__head span {
    color: #60a5fa;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ai-upos-background-dialog__head h3 {
    margin: 4px 0 3px;
    font-size: 22px;
}

.ai-upos-background-dialog__head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
}

.ai-upos-background-dialog__close {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 10px;
    color: var(--text-primary, #fff);
    background: var(--input-bg, rgba(0, 0, 0, .16));
    font: 22px/1 inherit;
    cursor: pointer;
}

.ai-upos-background-dialog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: auto;
    padding: 18px 22px;
    scrollbar-width: thin;
}

.ai-upos-background {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 12px;
    color: inherit;
    background: var(--input-bg, rgba(0, 0, 0, .16));
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ai-upos-background:hover:not(:disabled) {
    border-color: rgba(96, 165, 250, .72);
    transform: translateY(-1px);
}

.ai-upos-background.is-selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .18);
}

.ai-upos-background:disabled {
    opacity: .58;
    cursor: wait;
}

.ai-upos-background img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0f172a;
}

.ai-upos-background > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px 10px;
}

.ai-upos-background strong,
.ai-upos-background small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-upos-background strong {
    white-space: nowrap;
    font-size: 10px;
}

.ai-upos-background small {
    display: -webkit-box;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ai-upos-background em {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .28);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

.ai-upos-background-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, .1));
}

.ai-upos-stage-back {
    margin-bottom: 12px;
}

.ai-upos-chat {
    display: flex;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    flex-direction: column;
    border: 2px solid rgba(59, 130, 246, .58);
    border-radius: 16px;
    background: var(--card-bg, rgba(255, 255, 255, .03));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .07);
}

.ai-upos-chat__head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .1));
}

.ai-upos-chat__avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .3);
    font-size: 11px;
    font-weight: 900;
}

.ai-upos-chat__head h3,
.ai-upos-chat__head p {
    margin: 0;
}

.ai-upos-chat__head h3 {
    font-size: 14px;
}

.ai-upos-chat__head p {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.ai-upos-chat__messages {
    display: flex;
    min-height: 170px;
    max-height: 340px;
    overflow: auto;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    margin: 12px 14px 0;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 13px;
    background: var(--input-bg, rgba(0, 0, 0, .16));
    scrollbar-width: thin;
}

.ai-upos-chat__turn {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ai-upos-chat__bubble {
    width: fit-content;
    max-width: 90%;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--text-primary, #fff);
    background: var(--input-bg, rgba(0, 0, 0, .18));
    font-size: 12px;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

.ai-upos-chat__bubble.is-user {
    align-self: flex-end;
    color: #fff;
    border-bottom-right-radius: 4px;
    background: #2563eb;
}

.ai-upos-chat__bubble.is-assistant {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.ai-upos-chat__bubble.is-working {
    display: block;
    width: min(100%, 520px);
    color: var(--text-muted);
}

.ai-upos-chat__progress {
    display: grid;
    gap: 8px;
    width: 100%;
}

.ai-upos-chat__progress-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.ai-upos-chat__progress-head strong {
    color: var(--text-primary, #fff);
    font-size: 11px;
}

.ai-upos-chat__progress-head em {
    color: #60a5fa;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ai-upos-chat__progress-message {
    color: var(--text-muted);
    font-size: 11px;
}

.ai-upos-chat__progress-track {
    position: relative;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(96, 165, 250, .14);
}

.ai-upos-chat__progress-track > i {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.ai-upos-chat__progress-track.is-indeterminate > i {
    width: 38%;
    animation: ai-chat-progress 1.35s ease-in-out infinite;
}

.ai-upos-chat__progress small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.ai-upos-chat__bubble.is-error {
    color: #fecaca;
    background: rgba(127, 29, 29, .28);
}

.ai-upos-chat__typing {
    display: inline-flex;
    gap: 3px;
}

.ai-upos-chat__typing i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #60a5fa;
    animation: ai-chat-dot 1s infinite ease-in-out;
}

.ai-upos-chat__typing i:nth-child(2) { animation-delay: .14s; }
.ai-upos-chat__typing i:nth-child(3) { animation-delay: .28s; }

@keyframes ai-chat-dot {
    0%, 70%, 100% { opacity: .35; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-2px); }
}

@keyframes ai-chat-progress {
    0% { transform: translateX(-110%); }
    55% { transform: translateX(125%); }
    100% { transform: translateX(265%); }
}

.ai-upos-chat__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.ai-upos-chat__actions em {
    padding: 3px 6px;
    border-radius: 999px;
    color: #93c5fd;
    background: rgba(59, 130, 246, .1);
    font-size: 9px;
    font-style: normal;
}

.ai-upos-chat__empty,
.ai-upos-chat__notice {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.ai-upos-chat__notice {
    margin: 0 14px 14px;
    padding: 10px 12px;
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 10px;
    background: rgba(245, 158, 11, .08);
}

.ai-upos-chat__suggestions {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 14px 9px;
}

.ai-upos-chat__suggestions button {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.ai-upos-chat__suggestions button:hover {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, .5);
}

.ai-upos-chat__composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 0 14px 14px;
}

.ai-cloud-chat__price {
    margin: 12px 14px 10px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.ai-cloud-chat .ai-upos-chat__bubble.is-assistant {
    display: grid;
    gap: 5px;
    max-width: min(90%, 600px);
}

.ai-cloud-chat .ai-upos-chat__bubble.is-assistant strong {
    font-size: 12px;
}

.ai-cloud-chat .ai-upos-chat__bubble.is-assistant small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.ai-cloud-chat__message-file {
    display: block;
    margin-top: 6px;
    opacity: .86;
}

.ai-cloud-chat__attachment-zone {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
    border: 1px dashed #93b7ff;
    border-radius: 12px;
    background: rgba(37, 99, 235, .055);
}

.ai-cloud-chat__attachment-zone.is-dragging {
    border-color: #2563eb;
    background: rgba(37, 99, 235, .14);
}

.ai-cloud-chat__attachment-zone > small,
.ai-cloud-chat__attachment-picked small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.ai-cloud-chat__attachment-add {
    position: relative;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ai-cloud-chat__attachment-add > span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #2563eb;
    font-size: 17px;
}

.ai-cloud-chat__attachment-add input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ai-cloud-chat__attachment-picked {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ai-cloud-chat__attachment-picked img,
.ai-cloud-chat__attachment-glyph {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: #dbeafe;
}

.ai-cloud-chat__attachment-glyph {
    display: grid;
    place-items: center;
    color: #1d4ed8;
    font-weight: 800;
}

.ai-cloud-chat__attachment-picked span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ai-cloud-chat__attachment-picked strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-cloud-chat__attachment-picked button {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #64748b;
    background: #e2e8f0;
    font-size: 17px;
    cursor: pointer;
}

.ai-cloud-chat__attachment-note {
    margin: 0;
    color: #8a5b12;
    font-size: 11px;
    line-height: 1.4;
}

.ai-cloud-chat__selection-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 12px;
    margin: 14px 14px 0;
}

.ai-cloud-chat__selection-control .btn.is-active {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #dbeafe;
}

.ai-cloud-chat__selection-control > span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.ai-cloud-card-selection {
    width: 100%;
}

.ai-cloud-card-selection .ai-product-edit__tools {
    margin: 4px 4px 12px;
}

.ai-cloud-card-selection__foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 5px 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.ai-cloud-card-selection__foot > span:first-child {
    color: #1d4ed8;
    font-weight: 700;
}

.ai-cloud-chat .ai-upos-chat__composer {
    grid-template-columns: minmax(0, 1fr);
}

.ai-cloud-chat .ai-upos-chat__composer button {
    width: 100%;
    min-height: 42px;
    height: auto;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
}

.ai-upos-chat__composer textarea {
    width: 100%;
    min-height: 64px;
    max-height: 124px;
    resize: vertical;
    padding: 10px 11px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 11px;
    outline: none;
    color: var(--text-primary, #fff);
    background: var(--input-bg, rgba(0, 0, 0, .18));
    font: inherit;
    font-size: 11px;
    line-height: 1.45;
}

.ai-upos-chat__composer textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

/* In the light dashboard the chat must look ready for input, not disabled. */
[data-theme="light"] .ai-upos-chat__composer textarea {
    color: #172033;
    background: #fff;
    border-color: #cbd5e1;
}

[data-theme="light"] .ai-upos-chat__composer textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

[data-theme="light"] .ai-upos-chat__composer textarea:focus {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.ai-upos-chat__composer button {
    align-self: end;
    height: 42px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #2563eb;
    font-size: 19px;
    cursor: pointer;
}

.ai-upos-chat__composer button:disabled,
.ai-upos-chat__composer textarea:disabled {
    opacity: .48;
    cursor: not-allowed;
}

/* Cloud card chat: one compact composer, with upload and send inside the pill. */
.ai-cloud-chat .ai-upos-chat__composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 12px 14px 14px;
}

.ai-cloud-chat__input-shell {
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #cad5e5;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ai-cloud-chat__input-shell:focus-within,
.ai-cloud-chat__input-shell.is-dragging {
    border-color: #6b9cff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .11);
}

.ai-cloud-chat__input-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 39px;
}

.ai-cloud-chat__attachment-add {
    position: relative;
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    color: #66758d;
    cursor: pointer;
}

.ai-cloud-chat__attachment-add:hover {
    color: #2563eb;
    background: #eef4ff;
}

.ai-cloud-chat__attachment-add input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ai-cloud-chat .ai-upos-chat__composer textarea,
[data-theme="light"] .ai-cloud-chat .ai-upos-chat__composer textarea {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 23px;
    max-height: 112px;
    height: 23px;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    resize: none;
    color: #172033;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 23px;
    overflow-y: auto;
}

.ai-cloud-chat .ai-upos-chat__composer textarea:focus,
[data-theme="light"] .ai-cloud-chat .ai-upos-chat__composer textarea:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ai-cloud-chat .ai-upos-chat__composer .ai-cloud-chat__send {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    align-self: center;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #2563eb;
    cursor: pointer;
}

.ai-cloud-chat .ai-upos-chat__composer .ai-cloud-chat__send:hover:not(:disabled) {
    background: #1d4ed8;
}

.ai-cloud-chat .ai-upos-chat__composer .ai-cloud-chat__send:disabled {
    color: #8ea5c9;
    background: #e6edf8;
    opacity: 1;
}

.ai-cloud-chat__attachment-picked {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: min(100%, 320px);
    margin: 3px 3px 6px;
    padding: 4px 5px;
    border-radius: 10px;
    background: #eef4ff;
}

.ai-cloud-chat__attachment-picked img,
.ai-cloud-chat__attachment-glyph {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    background: #dbeafe;
}

.ai-cloud-chat__attachment-glyph {
    display: grid;
    place-items: center;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
}

.ai-cloud-chat__attachment-picked strong {
    overflow: hidden;
    color: #24466f;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-cloud-chat .ai-upos-chat__composer .ai-cloud-chat__attachment-picked button {
    display: grid;
    width: 24px;
    height: 24px;
    min-height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #61718b;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}

.ai-cloud-chat .ai-upos-chat__composer .ai-cloud-chat__attachment-picked button:hover {
    color: #1d4ed8;
    background: #dceafe;
}

.ai-cloud-chat .ai-cloud-chat__price {
    margin: 0 8px;
    text-align: center;
    font-size: 10px;
}

[data-theme="dark"] .ai-cloud-chat__input-shell {
    border-color: #394150;
    background: #1b2029;
    box-shadow: none;
}

[data-theme="dark"] .ai-cloud-chat .ai-upos-chat__composer textarea {
    color: #f5f7fb;
}

[data-theme="dark"] .ai-cloud-chat__attachment-add {
    color: #a9b6ca;
}

[data-theme="dark"] .ai-cloud-chat__attachment-add:hover,
[data-theme="dark"] .ai-cloud-chat__attachment-picked {
    background: #293854;
}

[data-theme="dark"] .ai-cloud-chat__attachment-picked strong {
    color: #dce9ff;
}

@media (max-width: 600px) {
    .ai-cloud-chat .ai-upos-chat__composer textarea {
        font-size: 16px;
    }
}

[data-theme="light"] .ai-upos-chat__bubble.is-assistant {
    background: #f1f5f9;
}

[data-theme="light"] .ai-upos-chat__bubble.is-error {
    color: #991b1b;
    background: #fee2e2;
}

[data-theme="light"] .ai-upos-chat__progress-head strong {
    color: #0f172a;
}

.ai-store-hero__tools {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-balance-pill {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 2px 10px;
    min-width: 176px;
    padding: 8px 12px;
    border: 1px solid rgba(59, 130, 246, .3);
    border-radius: 12px;
    background: rgba(59, 130, 246, .1);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.ai-balance-pill span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
}

.ai-balance-pill strong {
    justify-self: end;
    color: #60a5fa;
    font-size: 17px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.ai-balance-pill small {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 10px;
}

[data-theme="light"] .ai-balance-pill strong {
    color: #1d4ed8;
}

.ai-product-card-preview,
.ai-product-animation-picker,
.ai-product-video-result {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    background: var(--card-bg, rgba(255, 255, 255, .03));
}

.ai-product-animation-picker {
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, .12), transparent 38%),
        var(--card-bg, rgba(255, 255, 255, .03));
}

[data-theme="light"] .ai-product-animation-picker {
    border-color: #cbd5e1;
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, .12), transparent 38%),
        #fff;
}

.ai-product-card-preview {
    padding: 8px;
}

.ai-product-card-preview__open {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #05070b;
    cursor: zoom-in;
}

.ai-product-card-preview__open > img,
.ai-product-video-result > video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 11px;
    background: #05070b;
}

.ai-product-card-preview__open > span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    color: #2563eb;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .24);
    transition: box-shadow .15s ease, transform .15s ease;
}

.ai-product-card-preview__open > span > svg {
    width: 16px;
    height: 16px;
}

.ai-product-card-preview__open:hover > span,
.ai-product-card-preview__open:focus-visible > span {
    box-shadow: 0 3px 12px rgba(15, 23, 42, .34);
    transform: scale(1.06);
}

.ai-card-preview-dialog {
    position: fixed;
    z-index: 10030;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 6, 23, .86);
    backdrop-filter: blur(10px);
}

.ai-card-preview-dialog__panel {
    position: relative;
    display: grid;
    width: min(1380px, 96vw);
    max-height: 94vh;
    place-items: center;
}

.ai-card-preview-dialog__panel > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .5);
}

.ai-card-preview-dialog__close {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    color: #fff;
    background: rgba(15, 23, 42, .8);
    font: 24px/1 inherit;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.ai-product-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.ai-product-section-title {
    align-items: flex-start;
    margin-bottom: 12px;
}

.ai-product-animation-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ai-product-card-preview,
.ai-product-video-result {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
}

.ai-product-anim {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 184px;
    padding: 8px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    border-radius: 13px;
    background: var(--input-bg, rgba(0, 0, 0, .12));
    color: var(--text-primary, #fff);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ai-product-anim:hover {
    border-color: rgba(96, 165, 250, .75);
    transform: translateY(-1px);
}

.ai-product-anim.is-selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .14), 0 12px 24px rgba(15, 23, 42, .12);
}

.ai-product-anim__visual {
    position: relative;
    display: block;
    height: 82px;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(135deg, #172554, #1e3a8a 52%, #60a5fa);
    isolation: isolate;
}

.ai-product-anim__visual::before,
.ai-product-anim__visual::after,
.ai-product-anim__visual i {
    position: absolute;
    display: block;
    content: '';
}

.ai-product-anim__visual b {
    position: absolute;
    z-index: 5;
    top: 7px;
    right: 7px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .24);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    letter-spacing: .02em;
}

.ai-product-anim__visual--glow::before {
    inset: 14px 28%;
    border-radius: 50%;
    background: rgba(191, 219, 254, .88);
    filter: blur(10px);
}

.ai-product-anim__visual--glow::after {
    width: 26px;
    height: 54px;
    left: calc(50% - 13px);
    bottom: 0;
    border-radius: 12px 12px 5px 5px;
    background: linear-gradient(180deg, #f8fafc, #93c5fd 46%, #1e40af);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

.ai-product-anim__visual--particles {
    background: linear-gradient(135deg, #422006, #92400e 52%, #f59e0b);
}

.ai-product-anim__visual--particles::before {
    width: 34px;
    height: 52px;
    left: calc(50% - 17px);
    bottom: 0;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #fff7ed, #fb923c 58%, #9a3412);
}

.ai-product-anim__visual--particles i {
    z-index: 2;
    width: 9px;
    height: 9px;
    border-radius: 50% 15% 50% 50%;
    background: #fde68a;
    box-shadow: 0 0 10px rgba(253, 230, 138, .7);
}

.ai-product-anim__visual--particles i:nth-child(1) { left: 20%; top: 22%; transform: rotate(28deg); }
.ai-product-anim__visual--particles i:nth-child(2) { right: 18%; top: 38%; transform: rotate(72deg) scale(.7); }
.ai-product-anim__visual--particles i:nth-child(3) { left: 31%; bottom: 16%; transform: rotate(-18deg) scale(.6); }

.ai-product-anim__visual--fresh {
    background: linear-gradient(135deg, #083344, #0369a1 52%, #67e8f9);
}

.ai-product-anim__visual--fresh::before {
    width: 32px;
    height: 54px;
    left: calc(50% - 16px);
    bottom: 0;
    border-radius: 12px 12px 5px 5px;
    background: linear-gradient(180deg, #ecfeff, #22d3ee 52%, #075985);
}

.ai-product-anim__visual--fresh i {
    z-index: 2;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(236, 254, 255, .9);
    border-radius: 50%;
    background: rgba(165, 243, 252, .35);
}

.ai-product-anim__visual--fresh i:nth-child(1) { left: 19%; top: 24%; }
.ai-product-anim__visual--fresh i:nth-child(2) { right: 22%; top: 44%; width: 8px; height: 8px; }
.ai-product-anim__visual--fresh i:nth-child(3) { left: 29%; bottom: 17%; width: 4px; height: 4px; }

.ai-product-anim__visual--default {
    background: linear-gradient(135deg, #1e293b, #334155, #60a5fa);
}

.ai-product-anim__visual--default::before {
    inset: 18px 28px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 9px;
}

.ai-product-anim__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 0 3px;
}

.ai-product-anim strong {
    font-size: 13px;
    line-height: 1.25;
}

.ai-product-anim small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

.ai-product-anim em {
    justify-self: start;
    margin: 0 3px 2px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(59, 130, 246, .11);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

[data-theme="light"] .ai-product-anim {
    border-color: #cbd5e1;
    background: #f8fafc;
}

[data-theme="light"] .ai-product-anim:hover,
[data-theme="light"] .ai-product-anim.is-selected {
    border-color: #2563eb;
}

.ai-product-animation-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(59, 130, 246, .2);
    border-radius: 12px;
    background: rgba(59, 130, 246, .07);
}

.ai-product-animation-footer > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.ai-product-animation-footer strong {
    font-size: 12px;
}

.ai-product-animation-footer small,
.ai-product-animation-empty {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.ai-product-animation-footer .btn[disabled] {
    min-width: 190px;
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
    cursor: not-allowed;
    opacity: 1;
}

.ai-product-animation-empty {
    padding: 18px;
    border: 1px dashed var(--border-color, rgba(255, 255, 255, .14));
    border-radius: 12px;
    text-align: center;
}

.ai-product-animation-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 13px;
    background: rgba(59, 130, 246, .08);
}

.ai-product-animation-progress .ai-product-spinner {
    width: 26px;
    height: 26px;
    margin: 0;
}

.ai-product-animation-progress > div:last-child,
.ai-product-animation-progress__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.ai-product-animation-progress--picker {
    margin-top: 4px;
}

.ai-product-insight {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(59, 130, 246, .12);
}

.ai-product-insight h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.ai-product-insight p {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.ai-product-insight ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 28px;
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.ai-product-insight li + li {
    margin-top: 0;
}

.ai-product-insight__avoid {
    color: #b45309;
}

.ai-product-animation-progress small {
    color: var(--text-muted);
}

.ai-product-timer {
    width: 100%;
    max-width: 420px;
    margin: 16px auto 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(59, 130, 246, .14);
    text-align: left;
}

.ai-product-timer__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.ai-product-timer__row strong {
    color: var(--text-primary, #111827);
    font-variant-numeric: tabular-nums;
}

.ai-product-timer__bar {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, .12);
    overflow: hidden;
}

.ai-product-timer__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width .8s ease;
}

.ai-product-timer__phase {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.ai-product-video-result {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
}

.ai-header-new-card {
    white-space: nowrap;
}

#btn-ai-edit-photo.is-active {
    color: #fff;
    border-color: #2563eb;
    background: #2563eb;
}

.ai-photo-editor {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.ai-photo-editor__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(219, 234, 254, .82), rgba(239, 246, 255, .52));
}

.ai-photo-editor__top h2,
.ai-photo-editor__top p {
    margin: 0;
}

.ai-photo-editor__top h2 {
    margin-top: 4px;
    color: var(--text-primary, #111827);
}

.ai-photo-editor__top p {
    margin-top: 6px;
    color: var(--text-muted);
    line-height: 1.5;
}

.ai-photo-editor__library {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.ai-photo-editor__section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 12px;
}

.ai-photo-editor__section-title h3 {
    margin: 0;
    color: var(--text-primary, #111827);
    font-size: 17px;
}

.ai-photo-editor__section-title span {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 20px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 700;
}

.ai-photo-editor__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border-color, #dbe3ef);
    border-radius: 12px;
    color: var(--text-muted);
}

.ai-photo-editor__status--error {
    border-color: #fca5a5;
    color: #b91c1c;
}

.ai-photo-editor__upload {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 170px;
    margin-bottom: 18px;
    padding: 22px;
    border: 2px dashed rgba(37, 99, 235, .35);
    border-radius: 16px;
    color: var(--text-primary, #111827);
    text-align: center;
    background: rgba(239, 246, 255, .58);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ai-photo-editor__upload:hover {
    border-color: #2563eb;
    background: rgba(219, 234, 254, .72);
}

.ai-photo-editor__upload-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    background: #2563eb;
}

.ai-photo-editor__upload small {
    color: var(--text-muted);
}

.ai-photo-editor__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 16px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.ai-photo-editor__divider::before,
.ai-photo-editor__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color, #dbe3ef);
}

.ai-photo-editor__card {
    overflow: hidden;
    border: 1px solid var(--border-color, #dbe3ef);
    border-radius: 14px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.ai-photo-editor__card > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0f172a;
}

.ai-photo-editor__card-body {
    display: grid;
    gap: 7px;
    padding: 14px;
}

.ai-photo-editor__card-body strong {
    overflow: hidden;
    color: var(--text-primary, #111827);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-photo-editor__card-body > span {
    color: var(--text-muted);
    font-size: 12px;
}

.ai-photo-editor__card-body .btn {
    width: 100%;
    margin-top: 4px;
}

.ai-studio-job__progress {
    margin: 0 0 8px;
    color: #60a5fa;
    font-size: 12px;
}

.ai-product-request {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(59, 130, 246, .16);
    border-radius: 12px;
    background: rgba(59, 130, 246, .04);
}

.ai-product-request label,
.ai-product-edit__controls > label {
    color: var(--text-primary, #111827);
    font-size: 13px;
    font-weight: 700;
}

.ai-product-request small,
.ai-product-edit__controls > small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ai-product-edit {
    width: 100%;
    max-width: 980px;
    margin: 20px auto 0;
    padding: 18px;
    border: 1px solid rgba(59, 130, 246, .24);
    border-radius: 16px;
    background: rgba(59, 130, 246, .045);
}

.ai-product-edit__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.ai-product-edit__head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-product-edit__head h3,
.ai-product-edit__head p {
    margin: 0;
}

.ai-product-edit__head p {
    max-width: 540px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ai-product-edit__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
    gap: 18px;
}

.ai-product-edit__preview {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #0f172a;
}

.ai-product-edit__preview img {
    display: block;
    width: 100%;
    height: auto;
}

.ai-product-edit__preview canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.ai-product-edit__preview[data-edit-mode="brush"] canvas {
    cursor: cell;
}

.ai-product-edit__preview[data-edit-mode="whole"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 3px solid #60a5fa;
    background: rgba(37, 99, 235, .22);
    pointer-events: none;
}

.ai-product-edit__hint {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 3;
    max-width: calc(100% - 24px);
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    background: rgba(15, 23, 42, .78);
    transform: translateX(-50%);
    pointer-events: none;
}

.ai-product-edit__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 9px;
}

.ai-product-edit__tools button {
    padding: 8px 11px;
    border: 1px solid var(--border-color, #dbe3ef);
    border-radius: 9px;
    color: var(--text-secondary, #475569);
    font-size: 12px;
    font-weight: 700;
    background: var(--card-bg, #fff);
    cursor: pointer;
}

.ai-product-edit__tools button:hover {
    border-color: #93c5fd;
}

.ai-product-edit__tools button.is-selected {
    color: #fff;
    border-color: #2563eb;
    background: #2563eb;
}

.ai-product-edit__tools button:disabled {
    opacity: .45;
    cursor: default;
}

.ai-product-edit__brush-size {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
    color: var(--text-secondary, #475569);
    font-size: 12px;
    font-weight: 700;
}

.ai-product-edit__brush-size[hidden] {
    display: none;
}

.ai-product-edit__brush-size input {
    flex: 1;
    accent-color: #2563eb;
}

#ai-edit-selection-status {
    padding: 5px 8px;
    border-radius: 999px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    background: rgba(37, 99, 235, .1);
}

.ai-product-edit__grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.ai-product-edit__grid button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(15, 23, 42, .08);
    cursor: crosshair;
    transition: background .15s ease, box-shadow .15s ease;
}

.ai-product-edit__grid button:hover {
    background: rgba(37, 99, 235, .18);
}

.ai-product-edit__grid button.is-selected {
    background: rgba(37, 99, 235, .34);
    box-shadow: inset 0 0 0 3px #60a5fa;
}

.ai-product-edit__controls {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ai-product-edit__region-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ai-product-edit__region-line .is-selected {
    color: #fff;
    border-color: #2563eb;
    background: #2563eb;
}

.ai-product-edit__controls .btn-primary {
    margin-top: auto;
}

@media (max-width: 980px) {
    .ai-product-photo-workspace {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "request";
        align-items: start;
    }
    .ai-product-photo-workspace .ai-product-upload {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    .ai-product-photo-workspace .ai-product-request {
        min-height: 0;
        aspect-ratio: auto;
    }
}

@media (max-width: 900px) {
    .ai-photo-editor__library {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ai-product-layout {
        grid-template-columns: 1fr;
    }
    .ai-product-template-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ai-product-animation-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ai-product-edit__layout {
        grid-template-columns: 1fr;
    }
    .ai-upos-background-dialog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ai-product-exact-copy__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
    .ai-product-exact-copy__row {
        grid-template-columns: 1fr;
    }
    .ai-photo-editor__top {
        flex-direction: column;
        padding: 16px;
    }
    .ai-photo-editor__top .btn {
        width: 100%;
    }
    .ai-photo-editor__library {
        grid-template-columns: 1fr;
    }
    .ai-store-hero {
        padding: 16px;
    }
    .ai-store-hero__tools,
    .ai-balance-pill {
        width: 100%;
    }
    .ai-store-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .ai-product-steps > span {
        flex-direction: column;
        justify-content: center;
        min-height: 66px;
        font-size: 10px;
    }
    .ai-product-generate-bar,
    .ai-product-result__head,
    .ai-product-language {
        align-items: stretch;
        flex-direction: column;
    }
    .ai-product-request__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .ai-product-request .ai-product-generate-bar,
    .ai-product-template-list {
        grid-template-columns: 1fr;
    }
    .ai-engine-select { width: 100%; flex-basis: auto; }
    .ai-product-generate-bar .btn {
        width: 100%;
    }
    .ai-upos-regenerate {
        width: 100%;
        justify-content: center;
    }
    .ai-product-result__head-actions,
    .ai-product-save-file {
        width: 100%;
    }
    .ai-product-panel,
    .ai-product-animation-picker,
    .ai-upos-chat {
        padding: 12px;
    }
    .ai-product-card-preview__open > span {
        right: 8px;
        bottom: 8px;
    }
    .ai-card-preview-dialog {
        padding: 8px;
    }
    .ai-card-preview-dialog__close {
        top: 6px;
        right: 6px;
    }
    .ai-upos-result-step {
        flex-direction: column;
        justify-content: center;
        min-height: 66px;
        font-size: 10px;
        text-align: center;
    }
    .ai-upos-result-steps__next {
        width: 100%;
    }
    .ai-upos-background-trigger__preview {
        width: 78px;
        flex-basis: 78px;
    }
    .ai-upos-designs__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .ai-upos-designs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ai-upos-research {
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 11px 12px;
    }
    .ai-upos-research__icon {
        width: 30px;
        height: 30px;
    }
    .ai-upos-research > a {
        grid-column: 2;
        white-space: normal;
    }
    .ai-upos-background-trigger__action {
        display: none;
    }
    .ai-upos-background-dialog {
        padding: 8px;
    }
    .ai-upos-background-dialog__panel {
        max-height: calc(100vh - 16px);
        border-radius: 16px;
    }
    .ai-upos-background-dialog__head,
    .ai-upos-background-dialog__grid,
    .ai-upos-background-dialog__actions {
        padding-inline: 14px;
    }
    .ai-upos-background-dialog__grid {
        grid-template-columns: 1fr;
    }
    .ai-upos-background-dialog__actions .btn {
        flex: 1;
    }
    .ai-upos-chat {
        min-height: 0;
        max-height: none;
        padding: 0;
    }
    .ai-product-animation-list,
    .ai-product-insight ul {
        grid-template-columns: 1fr;
    }
    .ai-product-animation-footer {
        grid-template-columns: 1fr;
    }
    .ai-product-animation-footer .btn[disabled] {
        width: 100%;
        min-width: 0;
    }
    .ai-product-edit__head {
        align-items: flex-start;
        flex-direction: column;
    }
}