/* -= 閸忋劌鐪機SS閺嶅嘲绱＄€规矮绠?=- */

/* ==========================================================================
           閵嗘劕灏崺?1閵嗘垵鍙忕仦鈧崺铏诡攨閺嶅嘲绱?
           ========================================================================== */
:root {
    --bg-canvas: #f6f7fa;
    --glass-panel: #ffffff;
    --shadow-dock: 0 24px 60px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.02) inset;
    --shadow-float: 0 20px 50px rgba(0, 0, 0, 0.25);
    --accent: #ff4d00;
    --accent-hover: #ff6a00;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --radius-box: 32px;
    --radius-input: 10px;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    margin: 0;
    background-color: var(--bg-canvas);
    color: var(--text-main);
    font-family: var(--font-ui);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 40;
    transition: opacity 0.14s ease, background 0.14s ease;
    background: transparent;
}

body.page-file-drag-over::after {
    opacity: 1;
}

body.page-file-drag-draft::after {
    background:
        radial-gradient(circle at var(--page-drag-origin-x, 50%) var(--page-drag-origin-y, 50%),
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 120px,
            rgba(0, 0, 0, 0.06) 240px,
            rgba(0, 0, 0, 0.13) 420px,
            rgba(0, 0, 0, 0.22) 100%);
}

body.page-file-drag-product::after,
body.page-file-drag-ref::after {
    background: rgba(14, 17, 24, 0.24);
}

/* ==========================================================================
           閵嗘劕灏崺?2閵嗘垹鏁剧敮鍐х瑢妫板嫯顫嶉崠鐑樼壉瀵?           ========================================================================== */
.infinite-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    overflow: hidden;
    --canvas-grid-size: 32px;
    --canvas-grid-dot-radius: 1.5px;
    --canvas-grid-offset-x: 0px;
    --canvas-grid-offset-y: 0px;
    background-color: #f5f6f8;
    background-image: radial-gradient(circle,
            #d1d1d6 0,
            #d1d1d6 var(--canvas-grid-dot-radius),
            transparent calc(var(--canvas-grid-dot-radius) + 0.01px));
    background-size: var(--canvas-grid-size) var(--canvas-grid-size);
    background-position: var(--canvas-grid-offset-x) var(--canvas-grid-offset-y);
    z-index: 0;
}

.infinite-canvas:active {
    cursor: grabbing;
}

.canvas-stage {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    transform: none;
    overflow: visible;
}

.canvas-container {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    isolation: isolate;
    /* 銆怴38 浼樺寲銆戯細淇濊瘉缂╂斁鏃跺瓙鍏冪礌涔熸槸鐭㈤噺娓叉煋 */
    transform-style: preserve-3d;
}

.canvas-container::before {
    content: none;
}

#empty-placeholder {
    border: 1px dashed #c7c7cc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #aaa;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

/* 閵嗘€?1閵嗘垼宕忕粙璺ㄦ暰閺夊尅绱伴幎濠傚嚒闁鍞寸€瑰厜鈧粍鏂佹潻娑樼窡閻㈢喐鍨氶崠琛♀偓?*/
#empty-placeholder.draft-board,
.draft-board {
    position: relative;
    overflow: visible;
    /* allow meta outside */
    border: 1px dashed #c7c7cc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #aaa;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: auto;
}

.draft-board.drag-over {
    border-color: #ff9d63;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 3px rgba(255, 137, 57, 0.16);
}

.draft-board[data-draft-mode='uploaded-source'] {
    pointer-events: auto;
    cursor: pointer;
}


.draft-batch-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    flex-wrap: nowrap;
    overflow: visible;
}

.upload-draft-row {
    margin-top: 24px;
}

.draft-batch-row .draft-board,
.draft-batch-row .artboard-wrapper {
    flex: 0 0 auto;
    align-self: flex-start;
}

.draft-batch-row .artboard-wrapper {
    margin-bottom: 0;
    margin-top: 0;
}

.draft-board,
.draft-board .draft-overlay,
.draft-board .draft-text,
.draft-board .draft-badges,
.draft-board .draft-cta,
#draft-collage,
[id^="draft-collage-"],
.draft-board .draft-result,
.draft-board .layer-product {
    transition:
        width 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        height 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        left 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        right 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        top 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        bottom 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 260ms cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 220ms ease,
        filter 220ms ease;
}

.draft-board.is-selected-card,
.draft-board.is-card-dragging {
    transition-property: border-color, background-color, box-shadow, opacity, filter;
}

.draft-board.is-card-dragging,
.draft-board.is-card-dragging .draft-overlay,
.draft-board.is-card-dragging .draft-text,
.draft-board.is-card-dragging .draft-badges,
.draft-board.is-card-dragging .draft-cta,
.draft-board.is-card-dragging .draft-result,
.draft-board.is-card-dragging .layer-product,
.draft-board.is-card-dragging [id^="draft-collage-"] {
    transition: none !important;
}

#draft-collage,
[id^="draft-collage-"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.20;
    filter: grayscale(1) saturate(0.15) contrast(1.05);
    border-radius: 20px;
}

.draft-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 18px 16px 18px;
    z-index: 4;
    pointer-events: none;
}

.draft-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.draft-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 72%;
}

.draft-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #555;
    background: rgba(240, 240, 240, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.draft-meta {
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #7c7c84;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    pointer-events: none;
    z-index: 50;
}

/* 妫板嫯顫嶉崠鍝勪箯娑撳﹨顫楁穱鈩冧紖閿涙氨些閸掔増顢嬫径鏍电礄婢跺秶鏁ら崢鐔测偓婊堫暕鐟欏牆灏崺?1:1閳ユ繃鐗卞蹇ョ礆 */
.preview-meta-outside {
    align-self: center;
    margin-bottom: 10px;
    pointer-events: none;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.preview-meta-outside {
    display: none !important;
}

.preview-meta-title {
    font-weight: 600;
    font-size: 14px;
    color: #999;
}

.preview-meta-sub {
    font-size: 12px;
    color: #ccc;
}

.draft-text {
    width: 100%;
    max-width: 86%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draft-title {
    font-size: 20px;
    font-weight: 900;
    color: #2a2a2a;
    letter-spacing: -0.4px;
    line-height: 1.12;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.draft-sub {
    font-size: 14px;
    font-weight: 700;
    color: #4a4a4a;
    line-height: 1.3;
}

.draft-desc {
    font-size: 12px;
    font-weight: 600;
    color: #6a6a6a;
    line-height: 1.35;
}

.draft-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.draft-pill {
    font-size: 11px;
    font-weight: 800;
    color: #666;
    background: rgba(240, 240, 240, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 6px 10px;
    border-radius: 999px;
}

.draft-cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 24px;
    min-width: 72px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    background: rgba(90, 90, 90, 0.92);
    padding: 6px 10px;
    border-radius: 10px;
}

/* 銆怴41銆戞瀯鍥炬寚寮曪紙鑽夌灞傦級 */

/* V42锛氳崏绋垮尯鎺掔増寰皟锛堥伩鍏嶆枃妗堟尋鍑烘澶栵級 */
#empty-placeholder .draft-meta,
.draft-board .draft-meta {
    position: absolute;
    top: -22px;
    left: 0;
    z-index: 5;
}

#empty-placeholder .draft-badges-br,
.draft-board .draft-badges-br {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    right: auto;
    justify-content: center;
    z-index: 5;
    max-width: 92%;
}

#empty-placeholder .draft-text,
.draft-board .draft-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: 18px;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    align-items: center;
    text-align: center;
}

#empty-placeholder .draft-title,
#empty-placeholder .draft-sub,
#empty-placeholder .draft-desc,
#empty-placeholder .draft-cta,
.draft-board .draft-title,
.draft-board .draft-sub,
.draft-board .draft-desc,
.draft-board .draft-cta {
    text-shadow: none;
}

#empty-placeholder .draft-cta,
.draft-board .draft-cta {
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#empty-placeholder .draft-row,
.draft-board .draft-row {
    justify-content: center;
}

#empty-placeholder .draft-cta,
.draft-board .draft-cta {
    align-self: center;
}

/* V42锛氬彸涓婅鍙瑰彿锛坔over 灞曞紑鎻愮ず璇嶏級 */
#empty-placeholder .draft-actions,
.draft-board .draft-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 60;
}

/* V42閿涙俺宕忕粙璺ㄦ晸閹存劗绮ㄩ弸婊嗩洬閻?*/
.draft-result {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    z-index: 3;
}

/* V42锛氭瀯鍥炬彁绀猴紙鐢ㄦ祬鑹插潡锛屼笉鐢ㄧ嚎妗嗭級 */
.draft-guide {
    display: none !important;
    position: absolute;
    inset: 14px;
    border-radius: 14px;
    pointer-events: none;
    opacity: 1;
    z-index: 2;
}

.draft-guide::before,
.draft-guide::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
}

/* 姒涙顓婚敍姘湷娑擃厺瀵屾担?+ 閻ｆ瑧娅?*/
.draft-guide.guide-center-single::after {
    background:
        radial-gradient(circle at 50% 62%, rgba(0, 0, 0, 0.06) 0 38%, rgba(0, 0, 0, 0) 39%),
        linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
    mix-blend-mode: multiply;
}

.draft-guide.guide-left-right::after {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.05) 0 52%,
            rgba(0, 0, 0, 0) 52% 100%);
    mix-blend-mode: multiply;
}

.draft-guide.guide-top-bottom::after {
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.05) 0 55%,
            rgba(0, 0, 0, 0) 55% 100%);
    mix-blend-mode: multiply;
}

.draft-guide.guide-center-dual::after {
    background:
        radial-gradient(circle at 32% 60%, rgba(0, 0, 0, 0.05) 0 28%, rgba(0, 0, 0, 0) 29%),
        radial-gradient(circle at 68% 60%, rgba(0, 0, 0, 0.05) 0 28%, rgba(0, 0, 0, 0) 29%);
    mix-blend-mode: multiply;
}

.draft-guide.guide-podium::after {
    background:
        radial-gradient(120px 60px at 50% 78%, rgba(0, 0, 0, 0.08) 0 55%, rgba(0, 0, 0, 0) 56%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0 62%, rgba(0, 0, 0, 0) 62% 100%);
    mix-blend-mode: multiply;
}

.draft-guide.guide-flat-lay::after {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 0 100%);
    mix-blend-mode: multiply;
}

/* V42閿涙氨鏁撻幋鎰厬鐟曞棛娲婄仦鍌︾礄濡紕纭?閻ц棄瀵?濞翠礁鍘滈敍澶嗏偓鏂衡偓鏂剧瑝閸愬秵妯夌粈鐑樻鏉?icon */
#empty-placeholder.is-loading #draft-collage,
#empty-placeholder.is-loading .draft-text,
#empty-placeholder.is-loading .draft-badges,
#empty-placeholder.is-loading .draft-meta,
.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading .draft-text,
.draft-board.is-loading .draft-badges,
.draft-board.is-loading .draft-meta {
    filter: blur(10px);
    opacity: 0.45;
}

.draft-board.is-loading .draft-meta {
    filter: none;
    opacity: 1;
}

#empty-placeholder.is-loading #bg-draft,
.draft-board.is-loading [id^="bg-draft-"] {
    filter: blur(10px);
}

#empty-placeholder .loader,
.draft-board .loader {
    display: none;
    align-items: center;
    justify-content: center;
}

#empty-placeholder.is-loading .loader,
.draft-board.is-loading .loader {
    display: flex !important;
}

#empty-placeholder .loader-status,
.draft-board .loader-status {
    color: #111 !important;
    background: rgba(255, 255, 255, 0.0);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: none;
}

.artboard-wrapper {
    position: relative;
    animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    margin-bottom: 80px;
    margin-top: 30px;
}

.artboard-wrapper,
.artboard-wrapper .artboard,
.artboard-wrapper .layer-bg,
.artboard-wrapper .layer-product {
    cursor: pointer;
}

.draft-board.is-selected-card,
.artboard-wrapper.is-selected-card,
.artboard-wrapper.is-selected-card .artboard,
.artboard-wrapper.is-selected-card .layer-bg,
.artboard-wrapper.is-selected-card .layer-product {
    cursor: grab;
}

.draft-board.is-card-dragging,
.artboard-wrapper.is-card-dragging,
.artboard-wrapper.is-card-dragging .artboard,
.artboard-wrapper.is-card-dragging .layer-bg,
.artboard-wrapper.is-card-dragging .layer-product {
    cursor: grabbing;
}

.card-snap-guide-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 220;
}

.card-snap-guide {
    position: absolute;
    pointer-events: none;
}

.card-snap-guide--line {
    background: rgba(255, 77, 0, 0.55);
}

.card-snap-guide--vertical.card-snap-guide--line {
    width: 1px;
    transform: translateX(-0.5px);
}

.card-snap-guide--horizontal.card-snap-guide--line {
    height: 1px;
    transform: translateY(-0.5px);
}

.card-snap-guide--spacing {
    color: rgba(255, 77, 0, 0.88);
}

.card-snap-guide-spacing-line {
    position: absolute;
    background: rgba(255, 77, 0, 0.55);
}

.card-snap-guide--horizontal .card-snap-guide-spacing-line {
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    transform: translateY(-0.5px);
}

.card-snap-guide--vertical .card-snap-guide-spacing-line {
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    transform: translateX(-0.5px);
}

.card-snap-guide-spacing-line::before,
.card-snap-guide-spacing-line::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0.75;
}

.card-snap-guide--horizontal .card-snap-guide-spacing-line::before {
    left: 0;
    top: 50%;
    transform: translate(-1px, -50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid rgba(255, 77, 0, 0.55);
}

.card-snap-guide--horizontal .card-snap-guide-spacing-line::after {
    right: 0;
    top: 50%;
    transform: translate(1px, -50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid rgba(255, 77, 0, 0.55);
}

.card-snap-guide--vertical .card-snap-guide-spacing-line::before {
    left: 50%;
    top: 0;
    transform: translate(-50%, -1px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid rgba(255, 77, 0, 0.55);
}

.card-snap-guide--vertical .card-snap-guide-spacing-line::after {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 1px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255, 77, 0, 0.55);
}

.card-snap-guide-spacing-label {
    position: absolute;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 77, 0, 0.9);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 77, 0, 0.22);
    border-radius: 999px;
    padding: 3px 6px;
    box-shadow: 0 6px 16px rgba(255, 77, 0, 0.12);
}

.card-snap-guide--horizontal .card-snap-guide-spacing-label {
    left: 50%;
    top: -10px;
    transform: translate(-50%, -100%);
}

.card-snap-guide--vertical .card-snap-guide-spacing-label {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.card-marquee-selection {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 77, 0, 0.95);
    background: rgba(255, 77, 0, 0.12);
    box-shadow: 0 0 0 1px rgba(255, 77, 0, 0.12);
    z-index: 500;
    display: none;
}

.card-marquee-selection.is-visible {
    display: block;
}

.artboard-wrapper img,
.artboard-wrapper .layer-bg,
.artboard-wrapper .layer-product {
    -webkit-user-drag: none;
    user-select: none;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.artboard-wrapper .draft-meta {
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #7c7c84;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    pointer-events: none;
    z-index: 50;
}

.artboard {
    background: #fff;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.12);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 20px;
    /* 閵嗘劕宸遍崫銉ゆ叏婢跺秲鈧埊绱伴崗浣筋啅閹绘劗銇氱拠宥夋桨閺夋寧瀛╅崙鐑樻▔缁€鐚寸礉娑撳秵鍩呴弬?*/
    overflow: visible;
    pointer-events: auto;
}

.artboard .draft-meta {
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #7c7c84;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    pointer-events: none;
    z-index: 50;
}

.artboard-header {
    position: absolute;
    top: -30px;
    left: 0;
    font-family: 'JetBrains Mono';
    font-size: 10px;
    color: #999;
    display: flex;
    gap: 12px;
    align-items: center;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.draft-batch-row .artboard-header {
    display: none;
}

.btn-refresh {
    position: absolute;
    top: 14px;
    right: 90px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    user-select: none;
}

.btn-refresh:hover {
    background: rgba(0, 0, 0, 0.75);
}

.btn-download {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: 0.2s;
    backdrop-filter: blur(4px);
    transform: translateZ(0);
}

.artboard:hover .btn-refresh {
    position: absolute;
    top: 14px;
    right: 90px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    user-select: none;
}

.btn-refresh:hover {
    background: rgba(0, 0, 0, 0.75);
}

.btn-download {
    opacity: 1;
}

.btn-download:hover {
    background: var(--accent);
}

.btn-prompt-info {
    position: absolute;
    top: 20px;
    right: 64px;
    z-index: 50;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: 0.2s;
    backdrop-filter: blur(4px);
    font-size: 14px;
}

.artboard:hover .btn-prompt-info {
    opacity: 1;
}

.btn-prompt-info:hover {
    background: #007aff;
}

/* 閵嗘劖褰佺粈楦跨槤闂堛垺婢?- 娴溿倓绨伴柌宥嗙€妴?*/
.prompt-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    /* Now inside .card-actions, so 100% = card-actions height, centered horizontally */
    --prompt-tooltip-width: 820px;
    width: var(--prompt-tooltip-width);
    max-width: calc(100vw - 48px);
    background: rgba(0, 0, 0, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: none;
    z-index: 100;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    -webkit-font-smoothing: antialiased;
    max-height: 460px;
    overflow: hidden;
    transform-origin: top center;
    transform: translate(-50%, 0);
}

.prompt-tooltip::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.88) transparent;
}

.prompt-tooltip.prompt-tooltip--2cols {
    --prompt-tooltip-width: 560px;
}

.prompt-tooltip.prompt-tooltip--3cols {
    --prompt-tooltip-width: 820px;
}

.prompt-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.prompt-tooltip-sections {
    --prompt-tooltip-grid-columns: repeat(3, minmax(0, 1fr));
    display: grid;
    grid-template-columns: var(--prompt-tooltip-grid-columns);
    gap: 10px;
    align-items: stretch;
    min-height: 0;
}

.prompt-tooltip-sections.prompt-tooltip-sections--2cols {
    --prompt-tooltip-grid-columns: repeat(2, minmax(0, 1fr));
}

.prompt-tooltip-sections.prompt-tooltip-sections--3cols {
    --prompt-tooltip-grid-columns: repeat(3, minmax(0, 1fr));
}

.prompt-section {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 10px 10px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
}

.prompt-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #ffd9a3;
    letter-spacing: 0.2px;
    font-family: var(--font-ui);
    padding-right: 24px;
}

.prompt-section-preview {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
    color: #d9d9d9;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
    padding-right: 2px;
}

/* 婢跺秴鍩楅幐澶愭尦閺嶅嘲绱?*/
.prompt-tooltip .copy-action-btn {
    pointer-events: auto;
}

.copy-action-btn.copy-action-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    padding: 0;
}

.copy-action-btn.copy-action-icon::before,
.copy-action-btn.copy-action-icon::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1.4px solid currentColor;
    border-radius: 2px;
}

.copy-action-btn.copy-action-icon::before {
    top: 6px;
    left: 7px;
}

.copy-action-btn.copy-action-icon::after {
    top: 4px;
    left: 5px;
    background: transparent;
}

.copy-action-btn.copy-action-icon:hover {
    border-color: rgba(255, 255, 255, 0.52);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.copy-action-btn.copy-action-icon.is-copied {
    border-color: rgba(52, 199, 89, 0.8);
    color: #34c759;
}

@media (max-width: 980px) {
    .prompt-tooltip {
        width: calc(100vw - 20px);
        right: 10px;
        max-height: 420px;
    }

    .prompt-tooltip-sections {
        grid-template-columns: 1fr;
    }

    .prompt-section-preview {
        max-height: 140px;
    }
}

.layer-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    transition: opacity 0.5s;
    border-radius: 20px;
}

.layer-product {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
    max-height: 60%;
    display: block;
    z-index: 20;
    pointer-events: none;
    opacity: 0.8;
    mix-blend-mode: overlay;
    border-radius: 20px;
}

.layer-text {
    display: none;
}

.layer-promos {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 12px 0;
    flex-wrap: wrap;
}

/* ==========================================================================
           閵嗘劕灏崺?3閵嗘垿銆婇柈銊ヮ嚤閼?           ========================================================================== */
.top-bar {
    position: fixed;
    top: 32px;
    left: 32px;
    right: 32px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 100;
}

.brand {
    background: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    pointer-events: auto;
    letter-spacing: -0.3px;
    color: #000;
}

.api-capsule {
    background: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    pointer-events: auto;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.api-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
}

.api-dot.ok {
    background: #34c759;
    box-shadow: 0 0 8px #34c759;
}

.api-dot.fail {
    background: #ff3b30;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.65);
}

.api-popover {
    position: absolute;
    top: 60px;
    right: 0;
    width: 320px;
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: none;
    pointer-events: auto;
    border: 1px solid rgba(0, 0, 0, 0.03);
    z-index: 300;
}

.api-popover.show {
    display: block;
    animation: popIn 0.2s;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.api-input {
    width: 100%;
    padding: 10px;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 16px;
    box-sizing: border-box;
    font-family: 'JetBrains Mono';
    color: #333;
}

.api-select {
    border: none;
    border-radius: 14px;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background-color: #f5f5f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5L7 9L11 5.5' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    outline: none;
}

.api-select:focus {
    border: none;
    box-shadow: none;
}

.api-save-btn {
    width: 100%;
    background: #1d1d1f;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.api-save-btn:hover {
    background: #333;
}

.api-save-btn-small {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
}

.save-dir-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.web-storage-tip {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.05);
    color: #465469;
    font-size: 12px;
    line-height: 1.6;
}

.web-account-divider {
    display: none;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    margin: 16px 0 14px;
}

.web-account-panel {
    display: none;
}

.web-account-title {
    font-size: 13px;
    font-weight: 700;
    color: #172033;
    margin-bottom: 4px;
}

.web-account-sub {
    font-size: 12px;
    line-height: 1.6;
    color: #5f6b7f;
    margin-bottom: 12px;
}

.web-inline-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 10px;
}

.web-inline-row .api-input {
    flex: 1;
    margin-bottom: 0;
}

.web-account-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.api-save-btn-ghost {
    flex: 1;
    background: rgba(15, 23, 42, 0.06);
    color: #223048;
    box-shadow: none;
}

.api-save-btn-ghost:hover {
    background: rgba(15, 23, 42, 0.1);
    transform: none;
}

.web-account-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.05);
    color: #465469;
    font-size: 12px;
    line-height: 1.6;
}

.web-history-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.web-history-title {
    font-size: 13px;
    font-weight: 700;
    color: #172033;
    margin-bottom: 4px;
}

.web-history-sub {
    font-size: 12px;
    line-height: 1.6;
    color: #5f6b7f;
    margin-bottom: 10px;
}

.web-history-group + .web-history-group {
    margin-top: 10px;
}

.web-history-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.web-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 144px;
    overflow: auto;
}

.web-history-item {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.web-history-item.is-clickable {
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.web-history-item.is-clickable:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.web-history-main {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #1f2937;
}

.web-history-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.web-history-status {
    flex-shrink: 0;
    font-size: 11px;
    color: #475569;
}

.web-history-status.is-completed {
    color: #0f9f5f;
}

.web-history-status.is-failed {
    color: #dc2626;
}

.web-history-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
}

.web-history-empty {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.web-task-log-view {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #4b5563;
}

.web-task-log-title {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.web-task-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow: auto;
}

.web-task-log-item {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.web-task-log-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 4px;
}

.web-task-log-level {
    font-size: 10px;
    font-weight: 700;
    color: #2563eb;
}

.web-task-log-level.is-error {
    color: #dc2626;
}

.web-task-log-time {
    font-size: 10px;
    color: #64748b;
}

.web-task-log-content {
    font-size: 11px;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}

.web-task-log-empty {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

.web-task-log-empty.is-error {
    color: #dc2626;
}

.web-account-pill {
    display: none;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.save-dir-row .api-input {
    flex: 1;
    height: 40px;
    margin-bottom: 0;
    padding: 0 12px;
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
}

.save-dir-row .api-save-btn-small {
    flex-shrink: 0;
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
           閵嗘劕灏崺?4閵嗘垵绨抽柈?Dock 鐢啫鐪?
           ========================================================================== */
/* ==========================================================================
           銆愬尯鍩?4銆戝簳閮?Dock 甯冨眬
           ========================================================================== */
.bottom-ui-zone {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
    align-items: stretch;
    z-index: 200;
    pointer-events: none;
}

.settings-dock {
    pointer-events: auto;
    background: var(--glass-panel);
    border-radius: var(--radius-box);
    padding: 32px 36px;
    box-shadow: var(--shadow-dock);
    display: flex;
    gap: 32px;
    height: auto;
}

.dock-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
}

/* 4涓尯鍩熺殑绮剧‘瀹藉害 */
.settings-dock>.dock-section:nth-child(1) {
    width: 97px;
    min-width: 97px;
}

.settings-dock>.dock-section:nth-child(3) {
    width: 212px;
    min-width: 212px;
}

.settings-dock>.dock-section:nth-child(5) {
    width: 133px;
    min-width: 133px;
}

.settings-dock>.dock-section:nth-child(7) {
    width: 268px;
    min-width: 268px;
}

.dock-label {
    font-size: 13px;
    font-weight: 700;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 16px;
    flex-shrink: 0;
    white-space: nowrap;
}

.dock-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    padding-top: 4px;
}

.divider {
    width: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0;
    align-self: stretch;
}

.action-dock {
    pointer-events: auto;
    background: #1d1d1f;
    border-radius: var(--radius-box);
    padding: 28px;
    box-shadow: var(--shadow-float);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 200px;
    box-sizing: border-box;
    color: #fff;
    height: auto;
}

/* Text Layer Toggle */
.toggle-label {
    font-size: 12px;
    color: #86868b;
    font-weight: 600;
}

.copy-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* Row 1: 2 Inputs */
.copy-row-1 {
    display: flex;
    gap: 12px;
}

.copy-row-1 input {
    width: 50%;
}

/* Row 2: 3 Inputs */
.copy-row-2 {
    display: flex;
    gap: 12px;
}

.copy-row-2 input {
    width: 33.33%;
}

/* Inputs Styling */
.copy-input {
    height: 44px;
    border: 1px solid #e5e5ea;
    background: #fff;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #1d1d1f;
    transition: 0.2s;
}

.copy-input:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.copy-input::placeholder {
    color: #d2d2d7;
}

/* Bottom Toolbar (4 Black Selects) */
.dock-bottom-toolbar {
    margin-top: auto;
    display: flex;
    gap: 12px;
}

.dark-select {
    flex: 1;
    height: 56px;
    background: #1d1d1f;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.dark-select:hover {
    background-color: #2d2d2f;
}

/* Action Dock (Black Island) */
.action-dock {
    pointer-events: auto;
    background: #1d1d1f;
    border-radius: 32px;
    width: 270px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}

.action-label {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}

.count-wrapper {
    margin: 20px 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.batch-input {
    background: transparent !important;
    border: none;
    color: #fff !important;
    width: auto;
    font-size: 64px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 0;
    margin: 0;
    height: auto;
    line-height: 1;
    width: 60px;
}

.unit-label {
    font-size: 16px;
    color: #86868b;
    font-weight: 600;
}

.gen-btn {
    background: #ff4d00;
    color: #fff;
    border: none;
    height: 56px;
    width: 100%;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    box-shadow: none;
    margin-top: auto;
}

.gen-btn:hover {
    background: #ff6a00;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 77, 0, 0.3);
}

/* ==========================================================================
           銆愬尯鍩?5銆慤I 缁勪欢缁嗚妭 (Partial Overwrites / Cleanup)
           ========================================================================== */
/* Hide old stack-wrapper styles if needed or let them fallback */

.stack-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: 0.4s;
    transform-origin: center bottom;
}

.stack-empty {
    width: 100%;
    height: 100%;
    border: 2px dashed #d1d1d6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 24px;
    background: rgba(245, 245, 247, 0.5);
    cursor: pointer;
    transition: 0.2s;
}

.stack-empty:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #fff;
}

.stack-expanded-view {
    position: absolute;
    bottom: 108px;
    left: -10px;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 10px;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95) translateY(8px);
    transition: 0.2s;
    white-space: nowrap;
    z-index: 210;
}

.stack-wrapper:hover .stack-expanded-view {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.thumb-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.thumb-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-btn-mini {
    width: 80px;
    height: 80px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
}

/* 02閸?濮ｆ柧绶?Grid */
.ratio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 38px);
    gap: 12px;
    width: 100%;
}

.ratio-btn {
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ratio-btn:hover {
    background: #eaeaec;
    color: #333;
}

.ratio-btn.active {
    background: #1d1d1f;
    color: #fff;
}

.ratio-full-width {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
}

select {
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    transition: 0.2s;
    color: #333;
    height: 38px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

select:hover {
    background-color: #eaeaec;
}

/* 04閸?閺傚洦顢?Grid (閸斻劍鈧線鐝惔? */
.text-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: 38px 38px auto;
    gap: 12px;
    width: 100%;
    align-items: start;
}

input {
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    transition: 0.2s;
    color: #000;
    height: 38px;
    width: 100%;
    box-sizing: border-box;
}

input:focus {
    background: #fff;
    border-color: #e1e1e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

::placeholder {
    color: #bbbbbb;
}

#txt-main {
    grid-column: 1 / -1;
    grid-row: 1;
}

#txt-sub {
    grid-column: 1 / 2;
    grid-row: 2;
}

#txt-desc {
    grid-column: 2 / 3;
    grid-row: 2;
}

#promo-container {
    grid-column: 1 / 2;
    grid-row: 3;
}

#txt-btn {
    grid-column: 2 / 3;
    grid-row: 3;
    align-self: end;
}

.promo-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

.input-group {
    position: relative;
    width: 100%;
    display: flex;
    height: 38px;
    flex-shrink: 0;
}

.input-group input {
    width: 100%;
    padding-right: 36px;
}

.btn-plus-inline {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    transition: 0.2s;
    z-index: 5;
}

.btn-plus-inline:hover {
    background: #e0e0e0;
    color: var(--accent);
}

.action-label {
    font-size: 11px;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 12px;
    display: block;
}

.count-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
}

.batch-input {
    background: transparent !important;
    border: none;
    color: #fff !important;
    width: 40px;
    font-size: 36px;
    font-weight: 700;
    padding: 0;
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

.batch-input:focus {
    outline: none;
    border-bottom: 2px solid var(--accent);
    background: transparent !important;
    color: #fff !important;
}

.unit-label {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.gen-btn {
    background: linear-gradient(135deg, #ff4d00, #ff7e00);
    color: #fff;
    border: none;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(255, 77, 0, 0.25);
    margin-top: auto;
}

.gen-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 77, 0, 0.4);
}

.gen-btn:active {
    transform: scale(0.98);
}

.gen-btn:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* -=鐢熸垚涓伄缃╀笌娴佸厜鏍峰紡=- */

.loader {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.39);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;

    overflow: hidden;
    border-radius: inherit;
}

/* 鍏夋劅娴佸姩锛堝惊鐜級 */
/* 鏂板锛氫笉瑙勫垯娴佷綋鍏夋劅鍔ㄧ敾锛堟椂闂存祦閫濇劅锛?*/
.loader::before {
    content: "";
    display: block;
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.8), transparent 70%);
    opacity: 0;
    transform: scale(0.8);
    filter: blur(20px);
    mix-blend-mode: overlay;
    animation: fluid-move 6s infinite ease-in-out, fluid-fade 3s infinite ease-in-out alternate;
    pointer-events: none;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

@keyframes fluid-move {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    33% {
        transform: translate(10%, -10%) rotate(90deg) scale(1.1);
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    66% {
        transform: translate(-5%, 15%) rotate(180deg) scale(0.9);
        border-radius: 30% 70% 70% 30% / 80% 20% 80% 20%;
    }

    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
}

@keyframes fluid-fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}

/* 涓嶈鏃嬭浆 icon */
.spinner {
    display: none !important;
}

.loader-status {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono';
    font-size: 10px;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    text-shadow: none;
    mix-blend-mode: normal;
}

/* 鐢熸垚涓細搴曞浘/浜у搧妯＄硦鐧藉寲 */
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    filter: blur(10px) brightness(1.15) saturate(0.9);
    opacity: 0.23;
}

/* -=娑撳娴囧鍦崶閺嶅嘲绱?- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.modal-box {
    background: #fff;
    width: 320px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: scale(0.95);
    animation: scaleUp 0.2s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1d1d1f;
}

.modal-desc {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 24px;
    line-height: 1.5;
}

.modal-btn-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

.modal-btn {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-normal {
    background: #f5f5f7;
    color: #1d1d1f;
}

.btn-normal:hover {
    background: #e5e5e7;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* -=涓嬭浇鎻愮ずToast鏍峰紡=- */

#download-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 1000;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#download-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 寮哄埗鑽夌鍔犺浇鍏夊甫涓嶅婧紙鍏佽meta鏄剧ず鍦ㄥ渚э級 */
#empty-placeholder.is-loading::before,
.draft-board.is-loading::before {
    inset: 0 !important;
    clip-path: inset(0 round 20px);
}

/* 闅愯棌鍏ㄥ眬棰勮鍖哄煙鎻愮ず锛堥伩鍏嶉噸澶嶏級 */
.preview-meta-outside {
    display: none !important;
}





/* 鐠佲晜妫幐澶愭尦閺嶅嘲绱℃稉宥呭叡閹靛府绱欐俊鍌涚亯鏉╂ɑ婀佸▓瀣殌閼哄倻鍋ｉ敍?*/
.btn-download,
.btn-refresh,
.btn-prompt-info {
    display: none !important;
}

/* artboard-header 閻ㄥ嫧鈧粌鏄傜€电硶鈧繂宕熼悪顒佹▔缁€鐚寸礉閻㈢喐鍨氶崜宥勭瑝閺勫墽銇氶弮褑顕Ч鍌氭槀鐎?*/
.size-label {
    color: #999;
}


/* 閵嗘€?3 娣囶喖顦查妴鎴犳晸閹存劕绱堕弫鎷岀翻閸忋儻绱版禒璁崇秿閻樿埖鈧線鍏樻穱婵囧瘮姒涙垵绨崇憴鍡氼潕閿涘牅绗夐崣妯兼閿?*/
#batch-input,
#batch-input:focus,
#batch-input:active {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

#batch-input::selection {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}


/* 閵嗘€?3閵嗘垹鏁撻幋鎰厬閿涙碍濡搁懡澶岊焾閸愬懎顔愭稉鈧挧閿嬆佺化濠勬閸?+ 濞翠礁鍘滅憰鍡欐磰 + 缁绢垵澹婂銉╊€冮弬鍥х摟 */
.draft-board.is-loading #draft-collage,
.draft-board.is-loading .draft-result,
.draft-board.is-loading .draft-overlay {
    filter: blur(8px) saturate(0.9);
    opacity: 0.90;
}

.draft-board.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    z-index: 9;
    pointer-events: none;
}

.draft-board.is-loading::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.0) 65%, transparent 100%);
    transform: translateX(-40%);
    animation: draftSheen 1.2s linear infinite;
    z-index: 10;
    pointer-events: none;
}

#empty-placeholder.is-loading::before,
.draft-board.is-loading::before {
    inset: 0;
    clip-path: inset(0 round 20px);
}

@keyframes draftSheen {
    to {
        transform: translateX(40%);
    }
}

/* loader锛氬彧鏄剧ず鏂囧瓧锛屼笉瑕佹棆杞琲con */
.loader .spinner {
    display: none !important;
}

.loader {
    border-radius: 20px;
}

.loader-status {
    color: #111 !important;
    mix-blend-mode: normal !important;
    background: rgba(255, 255, 255, 0.0);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
}


/* === V39 娣囶喖顦查敍姘攱婢舵牑鈧粓顣╃憴鍫濆隘閸?+ 濮ｆ柧绶ラ垾婵嗘倱娑撯偓鐞?=== */
.preview-meta-outside {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
}

.preview-meta-title {
    margin: 0 !important;
}

.preview-meta-sub {
    margin: 0 !important;
}

/* === V39 娣囶喖顦查敍姘冲磸缁嬫寧鏋冨鍫ｅ殰闁倸绨叉稉宥呮倱濮ｆ柧绶ラ敍鍫濇尐閸?5:2閿?== */
#empty-placeholder .draft-text {
    min-width: 0;
}

#empty-placeholder .draft-title,
#empty-placeholder .draft-sub,
#empty-placeholder .draft-desc,
#empty-placeholder #draft-promos,
#empty-placeholder .draft-cta {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#empty-placeholder .draft-title {
    font-size: clamp(16px, 2.3vw, 26px);
    line-height: 1.12;
}

#empty-placeholder .draft-sub {
    font-size: clamp(12px, 1.7vw, 16px);
    line-height: 1.25;
    opacity: 0.92;
}

#empty-placeholder .draft-desc {
    font-size: clamp(11px, 1.4vw, 14px);
    line-height: 1.35;
    opacity: 0.86;
}

#empty-placeholder .draft-cta {
    font-size: clamp(12px, 1.7vw, 14px);
}

/* 5:2 / 瀹界敾骞咃細鍘嬬缉涓婁笅鐣欑櫧锛屼繚璇佹爣棰樺壇鏍囬鍙 */
#empty-placeholder.ratio-5-2 .draft-text,
#empty-placeholder.ratio-6-1 .draft-text {
    top: 16px !important;
    bottom: 16px !important;
}

#empty-placeholder.ratio-5-2 .draft-title {
    font-size: clamp(14px, 2.0vw, 20px);
}

#empty-placeholder.ratio-5-2 .draft-sub {
    font-size: clamp(11px, 1.6vw, 14px);
}

#empty-placeholder.ratio-5-2 .draft-desc {
    font-size: clamp(10px, 1.3vw, 12px);
}

#empty-placeholder.ratio-6-1 .draft-title {
    font-size: clamp(12px, 1.8vw, 18px);
}

#empty-placeholder.ratio-6-1 .draft-sub {
    font-size: clamp(10px, 1.3vw, 12px);
}

#empty-placeholder.ratio-6-1 .draft-desc {
    font-size: clamp(9px, 1.1vw, 11px);
}

#empty-placeholder.ratio-1-6 .draft-title {
    font-size: clamp(11px, 1.6vw, 16px);
}

#empty-placeholder.ratio-1-6 .draft-sub {
    font-size: clamp(9px, 1.2vw, 11px);
}

#empty-placeholder.ratio-1-6 .draft-desc,
#empty-placeholder.ratio-1-6 .draft-cta {
    font-size: clamp(8px, 1vw, 10px);
}


.loader-desc {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.62);
    letter-spacing: 0.2px;
    text-align: center;
}


/* V48: 鐢熸垚鍚庢搷浣滄寜閽彲瑙﹁揪 + 榛樿闅愯棌 */
#empty-placeholder {
    position: relative;
}

#empty-placeholder .card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 10px;
    z-index: 9999;
    pointer-events: auto;
}

#empty-placeholder .card-actions.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

#empty-placeholder .card-actions .act-btn {
    pointer-events: auto;
}

/* 閺堚偓缂佸牐顩惄鏍电窗闂呮劘妫岄崗銊ョ湰閳ユ粓顣╃憴鍫濆隘閸╃啿鈧繃褰佺粈鐚寸礄闁灝鍘ら柌宥咁槻閿?*/
.preview-meta-outside {
    display: none !important;
}

/* 閺堚偓缂佸牐顩惄鏍电窗闂呮劘妫岄崗銊ョ湰閳ユ粓顣╃憴鍫濆隘閸╃啿鈧繃褰佺粈?*/
.preview-meta-outside {
    display: none !important;
}

/* ======================================================================
           銆怴xx PATCH銆戣崏绋垮尯 16:9 / 5:2 鎸夐挳瀵归綈 + 鍏瘮渚嬪垏鎹㈡洿涓濇粦
           - 閻╊喗鐖?閿?6:9 閺冨灈鈧粏鍠樻稊鐗堝瘻闁筋喒鈧繀绗岄弽鍥暯/閺傚洦顢嶉崸妤€褰告潏鍦喘鐎靛綊缍?
           - 閻╊喗鐖?閿?:2 鐞涘奔璐熸稉?16:9 缁鎶€
           - 閻╊喗鐖?閿涙艾鍙氱粔宥嗙槷娓氬鍨忛幑銏℃閿涘本鏋冮張?閺嶅洨顒?閹稿鎸虫担宥囩枂鏉╁洦娴弴鏉戦挬濠婃埊绱欓柆鍨帳閻剛些閹扮噦绱?
           ====================================================================== */

/* 1) 璁╄崏绋垮尯灏哄涓庡竷灞€浣嶇Щ鏇撮『婊戯紙JS 鍦ㄥ垏鎹㈡瘮渚嬫椂浼氭敼 left/top/transform/maxWidth 绛夛級 */
#empty-placeholder,
#preview-meta-outside {
    will-change: width, height;
}

#empty-placeholder {
    transition: width 0.32s cubic-bezier(0.25, 0.8, 0.25, 1),
        height 0.32s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
        background 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#empty-placeholder .draft-text,
#empty-placeholder .draft-badges-br,
#empty-placeholder .draft-overlay {
    will-change: left, top, right, bottom, transform, max-width;
    transition: left 0.26s cubic-bezier(0.25, 0.8, 0.25, 1),
        top 0.26s cubic-bezier(0.25, 0.8, 0.25, 1),
        right 0.26s cubic-bezier(0.25, 0.8, 0.25, 1),
        bottom 0.26s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.26s cubic-bezier(0.25, 0.8, 0.25, 1),
        max-width 0.26s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2) 16:9 / 5:2锛氭寜閽笌鏂囨鍧椻€滃彸瀵归綈鈥濓紙璺熸爣棰樺潡鍙宠竟缂樹竴鑷达級 */
#empty-placeholder.ratio-16-9 .draft-text,
#empty-placeholder.ratio-5-2 .draft-text {
    align-items: flex-start !important;
    text-align: left !important;
}

#empty-placeholder.ratio-16-9 .draft-cta,
#empty-placeholder.ratio-5-2 .draft-cta {
    align-self: flex-end !important;
}

/* -=鐢熸垚涓伄缃╀笌娴佸厜鏍峰紡=- */


.loader {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.39);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;

    overflow: hidden;
    border-radius: inherit;
}

/* 鍏夋劅娴佸姩锛堝惊鐜級 */
.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    animation: sheen 1.6s linear infinite;
    -webkit-animation: sheen 1.6s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

@-webkit-keyframes sheen {
    to {
        -webkit-transform: translateX(100%);
    }
}

@keyframes sheen {
    to {
        transform: translateX(100%);
    }
}

/* 涓嶈鏃嬭浆 icon */
.spinner {
    display: none !important;
}

.loader-status {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono';
    font-size: 10px;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    text-shadow: none;
    mix-blend-mode: normal;
}

/* 鐢熸垚涓細搴曞浘/浜у搧妯＄硦鐧藉寲 */
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    filter: blur(10px) brightness(1.15) saturate(0.9);
    opacity: 0.23;
}

/* -=娑撳娴囧鍦崶閺嶅嘲绱?- */


.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.modal-box {
    background: #fff;
    width: 320px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: scale(0.95);
    animation: scaleUp 0.2s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1d1d1f;
}

.modal-desc {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 24px;
    line-height: 1.5;
}

.modal-btn-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

.modal-btn {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-normal {
    background: #f5f5f7;
    color: #1d1d1f;
}

.btn-normal:hover {
    background: #e5e5e7;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* -=涓嬭浇鎻愮ずToast鏍峰紡=- */


#download-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 1000;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#download-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



/* 鐠佲晜妫幐澶愭尦閺嶅嘲绱℃稉宥呭叡閹靛府绱欐俊鍌涚亯鏉╂ɑ婀佸▓瀣殌閼哄倻鍋ｉ敍?*/
.btn-download,
.btn-refresh,
.btn-prompt-info {
    display: none !important;
}

/* artboard-header 閻ㄥ嫧鈧粌鏄傜€电硶鈧繂宕熼悪顒佹▔缁€鐚寸礉閻㈢喐鍨氶崜宥勭瑝閺勫墽銇氶弮褑顕Ч鍌氭槀鐎?*/
.size-label {
    color: #999;
}


/* 閵嗘€?3 娣囶喖顦查妴鎴犳晸閹存劕绱堕弫鎷岀翻閸忋儻绱版禒璁崇秿閻樿埖鈧線鍏樻穱婵囧瘮姒涙垵绨崇憴鍡氼潕閿涘牅绗夐崣妯兼閿?*/
#batch-input,
#batch-input:focus,
#batch-input:active {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

#batch-input::selection {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}


/* 閵嗘€?3閵嗘垹鏁撻幋鎰厬閿涙碍濡搁懡澶岊焾閸愬懎顔愭稉鈧挧閿嬆佺化濠勬閸?+ 濞翠礁鍘滅憰鍡欐磰 + 缁绢垵澹婂銉╊€冮弬鍥х摟 */
.draft-board.is-loading #draft-collage,
.draft-board.is-loading .draft-result,
.draft-board.is-loading .draft-overlay {
    filter: blur(8px) saturate(0.9);
    opacity: 0.90;
}

.draft-board.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    z-index: 9;
    pointer-events: none;
}

.draft-board.is-loading::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.0) 65%, transparent 100%);
    transform: translateX(-40%);
    animation: draftSheen 1.2s linear infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes draftSheen {
    to {
        transform: translateX(40%);
    }
}

/* loader锛氬彧鏄剧ず鏂囧瓧锛屼笉瑕佹棆杞琲con */
.loader .spinner {
    display: none !important;
}

.loader {
    border-radius: 20px;
}

.loader-status {
    color: #111 !important;
    mix-blend-mode: normal !important;
    background: rgba(255, 255, 255, 0.0);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
}


/* === V39 娣囶喖顦查敍姘攱婢舵牑鈧粓顣╃憴鍫濆隘閸?+ 濮ｆ柧绶ラ垾婵嗘倱娑撯偓鐞?=== */
.preview-meta-outside {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
}

.preview-meta-title {
    margin: 0 !important;
}

.preview-meta-sub {
    margin: 0 !important;
}

/* === V39 娣囶喖顦查敍姘冲磸缁嬫寧鏋冨鍫ｅ殰闁倸绨叉稉宥呮倱濮ｆ柧绶ラ敍鍫濇尐閸?5:2閿?== */
#empty-placeholder .draft-text {
    min-width: 0;
}

#empty-placeholder .draft-title,
#empty-placeholder .draft-sub,
#empty-placeholder .draft-desc,
#empty-placeholder #draft-promos,
#empty-placeholder .draft-cta {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#empty-placeholder .draft-title {
    font-size: clamp(16px, 2.3vw, 26px);
    line-height: 1.12;
}

#empty-placeholder .draft-sub {
    font-size: clamp(12px, 1.7vw, 16px);
    line-height: 1.25;
    opacity: 0.92;
}

#empty-placeholder .draft-desc {
    font-size: clamp(11px, 1.4vw, 14px);
    line-height: 1.35;
    opacity: 0.86;
}

#empty-placeholder .draft-cta {
    font-size: clamp(12px, 1.7vw, 14px);
}

/* 5:2 / 瀹界敾骞咃細鍘嬬缉涓婁笅鐣欑櫧锛屼繚璇佹爣棰樺壇鏍囬鍙 */
#empty-placeholder.ratio-5-2 .draft-text {
    top: 12px !important;
}

#empty-placeholder.ratio-5-2 .draft-title {
    font-size: clamp(14px, 2.0vw, 20px);
}

#empty-placeholder.ratio-5-2 .draft-sub {
    font-size: clamp(11px, 1.6vw, 14px);
}

#empty-placeholder.ratio-5-2 .draft-desc {
    font-size: clamp(10px, 1.3vw, 12px);
}


.loader-desc {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.62);
    letter-spacing: 0.2px;
    text-align: center;
}


/* V48: 鐢熸垚鍚庢搷浣滄寜閽彲瑙﹁揪 + 榛樿闅愯棌 */
#empty-placeholder {
    position: relative;
}

#empty-placeholder .card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 10px;
    z-index: 9999;
    pointer-events: auto;
}

#empty-placeholder .card-actions.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

#empty-placeholder .card-actions .act-btn {
    pointer-events: auto;
}

/* -=鐢熸垚涓伄缃╀笌娴佸厜鏍峰紡=- */



.loader {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.39);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;

    overflow: hidden;
    border-radius: inherit;
}

/* 鍏夋劅娴佸姩锛堝惊鐜級 */
.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    animation: sheen 1.6s linear infinite;
    -webkit-animation: sheen 1.6s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

@-webkit-keyframes sheen {
    to {
        -webkit-transform: translateX(100%);
    }
}

@keyframes sheen {
    to {
        transform: translateX(100%);
    }
}

/* 涓嶈鏃嬭浆 icon */
.spinner {
    display: none !important;
}

.loader-status {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono';
    font-size: 10px;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    text-shadow: none;
    mix-blend-mode: normal;
}

/* 鐢熸垚涓細搴曞浘/浜у搧妯＄硦鐧藉寲 */
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    filter: blur(10px) brightness(1.15) saturate(0.9);
    opacity: 0.23;
}

/* -=娑撳娴囧鍦崶閺嶅嘲绱?- */



.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.modal-box {
    background: #fff;
    width: 320px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: scale(0.95);
    animation: scaleUp 0.2s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1d1d1f;
}

.modal-desc {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 24px;
    line-height: 1.5;
}

.modal-btn-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

.modal-btn {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-normal {
    background: #f5f5f7;
    color: #1d1d1f;
}

.btn-normal:hover {
    background: #e5e5e7;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* -=涓嬭浇鎻愮ずToast鏍峰紡=- */



#download-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 1000;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#download-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



/* 鐠佲晜妫幐澶愭尦閺嶅嘲绱℃稉宥呭叡閹靛府绱欐俊鍌涚亯鏉╂ɑ婀佸▓瀣殌閼哄倻鍋ｉ敍?*/
.btn-download,
.btn-refresh,
.btn-prompt-info {
    display: none !important;
}

/* artboard-header 閻ㄥ嫧鈧粌鏄傜€电硶鈧繂宕熼悪顒佹▔缁€鐚寸礉閻㈢喐鍨氶崜宥勭瑝閺勫墽銇氶弮褑顕Ч鍌氭槀鐎?*/
.size-label {
    color: #999;
}


/* 閵嗘€?3 娣囶喖顦查妴鎴犳晸閹存劕绱堕弫鎷岀翻閸忋儻绱版禒璁崇秿閻樿埖鈧線鍏樻穱婵囧瘮姒涙垵绨崇憴鍡氼潕閿涘牅绗夐崣妯兼閿?*/
#batch-input,
#batch-input:focus,
#batch-input:active {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

#batch-input::selection {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}


/* 閵嗘€?3閵嗘垹鏁撻幋鎰厬閿涙碍濡搁懡澶岊焾閸愬懎顔愭稉鈧挧閿嬆佺化濠勬閸?+ 濞翠礁鍘滅憰鍡欐磰 + 缁绢垵澹婂銉╊€冮弬鍥х摟 */
.draft-board.is-loading #draft-collage,
.draft-board.is-loading .draft-result,
.draft-board.is-loading .draft-overlay {
    filter: blur(8px) saturate(0.9);
    opacity: 0.90;
}

.draft-board.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    z-index: 9;
    pointer-events: none;
}

.draft-board.is-loading::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.0) 65%, transparent 100%);
    transform: translateX(-40%);
    animation: draftSheen 1.2s linear infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes draftSheen {
    to {
        transform: translateX(40%);
    }
}

/* loader锛氬彧鏄剧ず鏂囧瓧锛屼笉瑕佹棆杞琲con */
.loader .spinner {
    display: none !important;
}

.loader {
    border-radius: 20px;
}

.loader-status {
    color: #111 !important;
    mix-blend-mode: normal !important;
    background: rgba(255, 255, 255, 0.0);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
}


/* === V39 娣囶喖顦查敍姘攱婢舵牑鈧粓顣╃憴鍫濆隘閸?+ 濮ｆ柧绶ラ垾婵嗘倱娑撯偓鐞?=== */
.preview-meta-outside {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
}

.preview-meta-title {
    margin: 0 !important;
}

.preview-meta-sub {
    margin: 0 !important;
}

/* === V39 娣囶喖顦查敍姘冲磸缁嬫寧鏋冨鍫ｅ殰闁倸绨叉稉宥呮倱濮ｆ柧绶ラ敍鍫濇尐閸?5:2閿?== */
#empty-placeholder .draft-text {
    min-width: 0;
}

#empty-placeholder .draft-title,
#empty-placeholder .draft-sub,
#empty-placeholder .draft-desc,
#empty-placeholder #draft-promos,
#empty-placeholder .draft-cta {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#empty-placeholder .draft-title {
    font-size: clamp(16px, 2.3vw, 26px);
    line-height: 1.12;
}

#empty-placeholder .draft-sub {
    font-size: clamp(12px, 1.7vw, 16px);
    line-height: 1.25;
    opacity: 0.92;
}

#empty-placeholder .draft-desc {
    font-size: clamp(11px, 1.4vw, 14px);
    line-height: 1.35;
    opacity: 0.86;
}

#empty-placeholder .draft-cta {
    font-size: clamp(12px, 1.7vw, 14px);
}

/* 5:2 / 瀹界敾骞咃細鍘嬬缉涓婁笅鐣欑櫧锛屼繚璇佹爣棰樺壇鏍囬鍙 */
#empty-placeholder.ratio-5-2 .draft-text {
    top: 16px !important;
    bottom: 16px !important;
}

#empty-placeholder.ratio-5-2 .draft-title {
    font-size: clamp(14px, 2.0vw, 20px);
}

#empty-placeholder.ratio-5-2 .draft-sub {
    font-size: clamp(11px, 1.6vw, 14px);
}

#empty-placeholder.ratio-5-2 .draft-desc {
    font-size: clamp(10px, 1.3vw, 12px);
}


.loader-desc {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.62);
    letter-spacing: 0.2px;
    text-align: center;
}


/* V48: 鐢熸垚鍚庢搷浣滄寜閽彲瑙﹁揪 + 榛樿闅愯棌 */
#empty-placeholder {
    position: relative;
}

#empty-placeholder .card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 10px;
    z-index: 9999;
    pointer-events: auto;
}

#empty-placeholder .card-actions.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

#empty-placeholder .card-actions .act-btn {
    pointer-events: auto;
}

/* 鏈€缁堣鐩栵細闅愯棌鍏ㄥ眬棰勮鍖哄煙鎻愮ず锛堥伩鍏嶉噸澶嶏級 */
.preview-meta-outside {
    display: none !important;
}


/* 鐘舵€佹彁绀猴細鏈繛鎺PI */
.draft-meta.is-alert {
    color: #ff3b30 !important;
    font-weight: 800;
}

/* 鐘舵€佹枃瀛楀瓧浣撲笌鎿嶄綔鍖轰竴鑷?*/
.draft-meta {
    font-family: var(--font-ui) !important;
}

.draft-batch-row+.draft-batch-row {
    margin-top: 48px;
}

/* Override: loading collage visibility */
.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading #draft-collage,
.draft-board.is-loading .draft-result,
.draft-board.is-loading .draft-overlay {
    filter: blur(8px) saturate(0.9);
    opacity: 0.65;
}

/* Row alignment: always left */
.canvas-container {
    align-items: flex-start !important;
}

.draft-batch-row {
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

/* V5 鐢熸垚涓櫧鍖栨晥鏋滄浛鎹細Aurora Waves锛堥檺鍒跺湪棰勮鍖哄唴锛?*/
.draft-board.is-loading::before {
    content: none !important;
}

.draft-board.is-loading::after,
.artboard.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 80%),
        linear-gradient(60deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 90%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    mix-blend-mode: hard-light;
    animation: auroraMove 5s ease-in-out infinite alternate;
    filter: blur(15px);
    clip-path: inset(0 round 20px);
    pointer-events: none;
    z-index: 9;
}

.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading .draft-result,
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    filter: blur(5px) brightness(0.6);
    transform: scale(1.1);
}

@keyframes auroraMove {
    0% {
        background-position: 10% 10%;
    }

    100% {
        background-position: 90% 90%;
    }
}

/* V5 Aurora clamp: keep base layers inside preview area */
.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading .draft-result,
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    opacity: 1;
    clip-path: inset(0 round 20px);
}

/* V5 Aurora Waves override: disable old overlays + avoid gray halo */
#empty-placeholder.is-loading::before,
#empty-placeholder.is-loading::after,
.draft-board.is-loading::before {
    content: none !important;
}

.draft-board.is-loading::after,
.artboard.is-loading::after {
    content: "" !important;
    position: absolute;
    inset: 0 !important;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 80%),
        linear-gradient(60deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 90%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    mix-blend-mode: hard-light;
    opacity: 0.9;
    animation: auroraMove 5s ease-in-out infinite alternate;
    filter: blur(10px);
    clip-path: inset(0 round 20px);
    backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 9;
}

.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading .draft-result,
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    filter: blur(5px) brightness(0.6) !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: inset(0 round 20px);
}

/* V5 娴佸厜姘存尝锛堢櫧鍖栵級鏈€缁堟浛鎹細鏃犻粦鑹诧紝闄愬埗鍦ㄩ瑙堝尯鍐?*/
#empty-placeholder.is-loading::before,
#empty-placeholder.is-loading::after {
    content: none !important;
}

.draft-board.is-loading::after,
.artboard.is-loading::after {
    content: "" !important;
    position: absolute;
    inset: 0 !important;
    border-radius: 20px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 45%, rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.0) 100%),
        radial-gradient(120% 100% at 100% 100%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.0) 100%);
    mix-blend-mode: normal;
    opacity: 0.9;
    clip-path: inset(0 round 20px);
    pointer-events: none;
    z-index: 8;
}

.draft-board.is-loading::before,
.artboard.is-loading::before {
    content: "" !important;
    position: absolute;
    inset: 0 !important;
    border-radius: 20px;
    background:
        radial-gradient(60% 45% at 20% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
        radial-gradient(55% 40% at 75% 55%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
        radial-gradient(45% 35% at 55% 70%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%),
        repeating-radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.35) 0 8%, rgba(255, 255, 255, 0.0) 18% 30%);
    background-size: 180% 180%, 200% 200%, 220% 220%, 240% 240%;
    background-position: 0% 0%, 100% 0%, 0% 100%, 50% 50%;
    animation: waterWaveMove 7s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 0.75;
    clip-path: inset(0 round 20px);
    pointer-events: none;
    z-index: 9;
}

.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading .draft-result,
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product {
    filter: blur(6px) brightness(1.05) saturate(0.85) !important;
    transform: none !important;
    opacity: 0.55 !important;
    clip-path: inset(0 round 20px);
}

@keyframes waterWaveMove {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%, 40% 50%;
    }

    100% {
        background-position: 100% 100%, 0% 100%, 100% 0%, 60% 50%;
    }
}

/* V5 姘存尝娴佸厜鏄剧ず锛氬彇娑?loader 鐧藉寲閬僵锛岄伩鍏嶉伄浣忔柊鏁堟灉 */
.draft-board.is-loading .loader,
.artboard.is-loading .loader {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* V5 姘存尝娴佸厜寰皟锛氱Щ闄ら敊浣嶇殑鍏夊湀灞傦紙::before锛?*/
.draft-board.is-loading::before,
.artboard.is-loading::before {
    content: none !important;
}

/* V5 姘存尝娴佸厜鏈€缁堢増锛堝崟灞傦級锛氫慨澶嶉噸鐢熶笉鏄剧ず + 浜у搧鍋忕Щ */
#empty-placeholder.is-loading::before,
#empty-placeholder.is-loading::after,
.draft-board.is-loading::before,
.artboard.is-loading::before {
    content: none !important;
}

.draft-board.is-loading::after,
.artboard.is-loading::after {
    content: "" !important;
    position: absolute;
    inset: 0 !important;
    border-radius: 20px;
    background:
        radial-gradient(70% 55% at 20% 30%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 70%),
        radial-gradient(65% 50% at 80% 60%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
        radial-gradient(80% 70% at 45% 50%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 75%),
        repeating-radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.35) 0 10%, rgba(255, 255, 255, 0.0) 18% 32%);
    background-size: 180% 180%, 200% 200%, 220% 220%, 240% 240%;
    background-position: 0% 0%, 100% 0%, 0% 100%, 50% 50%;
    animation: waterWaveMoveV5 7s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 0.85;
    filter: blur(10px);
    clip-path: inset(0 round 20px);
    pointer-events: none;
    z-index: 9;
}

.draft-board.is-loading [id^="draft-collage-"],
.draft-board.is-loading .draft-result,
.artboard.is-loading .layer-bg,
.artboard.is-loading .layer-product,
.draft-board.is-loading .layer-product {
    filter: blur(6px) brightness(1.05) saturate(0.85) !important;
    opacity: 0.55 !important;
    clip-path: inset(0 round 20px);
}

.draft-board.is-loading .layer-product,
.artboard.is-loading .layer-product {
    transform: translate(-50%, -50%) !important;
}

@keyframes waterWaveMoveV5 {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%, 40% 50%;
    }

    100% {
        background-position: 100% 100%, 0% 100%, 100% 0%, 60% 50%;
    }
}

/* ==========================================================================
   銆怴50銆戣嚜瀹氫箟涓嬫媺鑿滃崟 & 鍘嗗彶璁板綍鏍峰紡
   ========================================================================== */

/* 鑷畾涔変笅鎷夎彍鍗曞鍣?*/
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

/* 瑙﹀彂鎸夐挳锛氱户鎵垮師鏈?Select 鐨勯儴鍒嗘牱寮忎絾鏇寸編瑙?*/
.custom-select-trigger {
    background: #fff;
    /* White bg default */
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* Gray border default */
    border-radius: var(--radius-input);
    padding: 0 12px;
    font-size: 13px;
    color: #333;
    height: 38px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select-trigger:hover {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.3);
    /* Darker border on hover */
    color: #333;
}

.custom-select-wrapper.open .custom-select-trigger {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    /* Darker border when open */
    box-shadow: none;
    color: #333;
    /* User: "directly to gray border" - interpretation: just gray border, no fancy shadow or bg change */
}

/* 鍙充晶绠ご锛氱缉灏忎竴鍗?(4px)锛岀嚎鏉℃洿缁?*/
.custom-arrow {
    width: 4px;
    height: 4px;
    border-right: 1.5px solid #666;
    border-bottom: 1.5px solid #666;
    transform: rotate(45deg) translateY(-2px);
    transition: 0.2s;
    margin-left: 8px;
    flex-shrink: 0;
    opacity: 0.6;
}

.custom-select-wrapper.open .custom-arrow {
    transform: rotate(225deg) translateY(2px);
}

/* 涓嬫媺閫夐」鍒楄〃锛氬悜涓婂睍寮€ */
.custom-options {
    position: absolute;
    bottom: 100%;
    /* 鍚戜笂 */
    top: auto;
    /* 瑕嗙洊鍙兘鐨?top 璁剧疆 */
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 6px;
    /* 鍚戜笂鐣欑櫧 */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    /* 鍚戜笂鎶曞奖 */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.03);

    /* 闅愯棌婊氬姩鏉?*/
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.custom-options::-webkit-scrollbar {
    display: none;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 閫夐」鏍峰紡 */
.custom-option {
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.1s;
}

.custom-option:hover {
    background: #f5f5f7;
    color: #000;
}

.custom-option.selected {
    background: #f0f0f0;
    font-weight: 600;
    color: var(--accent);
}

/* 鍘嗗彶璁板綍涓嬫媺妗嗭細鍚戜笂灞曞紑锛堥€氳繃JS瀹氫綅浜庤緭鍏ユ涓婃柟锛?*/
.input-history-box {
    position: fixed;
    /* JS浼氳缃甪ixed瀹氫綅 */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2000;
    padding: 6px;
    max-height: 200px;
    overflow-y: auto;
    border: none;
    /* 鏃犳弿杈?*/
    animation: fadeIn 0.2s;
    box-sizing: border-box;

    /* 闅愯棌婊氬姩鏉?*/
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.input-history-box::-webkit-scrollbar {
    display: none;
}

.history-item {
    padding: 8px 12px;
    font-size: 12px;
    color: #555;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item:hover {
    background: #f5f5f7;
    color: var(--accent);
}

/* 姣斾緥 Grid锛氬潎鍖€鍒嗗竷 */
.ratio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 38px);
    gap: 12px;
    width: 100%;
}

.ratio-full-width {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
}

.ratio-grid .custom-select-wrapper {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
}

/* END V50 Custom Dropdown Styles */

/* END */

/* END OF FILE */

/* END */

/* END */

/* END OF FILE */

/* === END === */

/* END */

/* END */

/* END FILE */

/* === END === */

/* FINAL END */

/* END */

/* END */

/* FINAL */

/* END FILE */

/* END */

/* END */

/* END */

/* END V50 Custom Dropdown Styles */

/* END V50 Custom Dropdown Styles */

/* END V50 Custom Dropdown Styles */

/* FINAL END - V50 Custom Dropdown Styles */

/* END CUSTOM DROPDOWN STYLES */

/* END ALL CUSTOM DROPDOWN STYLES */

/* END */

/* === END OF FILE === */

/* END OF CSS */

/* FINAL END */

/* === END === */

/* EOF */

/* END OF FILE */

/* DONE */

/* === STYLES END === */

/* END */

/* ==========================================================================
   銆愬尯鍩熴€戞瀬鍏夋祦娣屾晥鏋?(Aurora Waves) - 鐢熸垚杩囩▼鐧藉厜鍔ㄧ敾
   ========================================================================== */

/* 鏋佸厜鍙犲姞灞傚鍣?- 闇€瑕侀檺鍒跺湪鐖跺鍣ㄥ唴 */
.draft-board.is-loading,
#empty-placeholder.is-loading,
.artboard.is-loading {
    /* 纭繚鏋佸厜涓嶄細婧㈠嚭 */
    overflow: hidden;
}

/* 鏋佸厜鍙犲姞灞?*/
.aurora-overlay {
    position: absolute;
    inset: -50%;
    /* 鎵╁ぇ鑼冨洿浠ヤ究绉诲姩 */
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 15;
    /* 鍦ㄧ櫧鍖栧眰涔嬩笂锛屽湪loader鏂囧瓧涔嬩笅 */

    /* 鏍稿績锛氱函鐧借壊娓愬彉鍙犲姞 */
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 80%),
        linear-gradient(60deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 90%);

    mix-blend-mode: hard-light;
    /* 寮哄厜娣峰悎妯″紡 */
    animation: auroraMove 5s ease-in-out infinite alternate;
    filter: blur(15px);
    /* 妯＄硦鍏夊甫杈圭紭 */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 浠呭湪鍔犺浇鏃舵樉绀?*/
.draft-board.is-loading .aurora-overlay,
#empty-placeholder.is-loading .aurora-overlay,
.artboard.is-loading .aurora-overlay {
    opacity: 1;
}

/* 鏋佸厜鍔ㄧ敾鍏抽敭甯?*/
@keyframes auroraMove {
    0% {
        transform: translate(-20%, -20%) rotate(0deg);
    }

    100% {
        transform: translate(10%, 10%) rotate(20deg);
    }
}

/* ==========================================================================
   銆愬尯鍩熴€戠姸鎬佹彁绀烘牱寮?- 閿欒/璀﹀憡鐘舵€?
   ========================================================================== */

/* 閿欒鐘舵€佺孩鑹叉彁绀?*/
.draft-meta.is-error,
.artboard .draft-meta.is-error {
    color: #ff3b30 !important;
    font-weight: 800;
}

/* 璀﹀憡鐘舵€侊紙閾炬帴API绛夛級 */
.draft-meta.is-alert {
    color: #ff9500 !important;
}

/* ==========================================================================
   銆怳I澧炲己銆戣嚜瀹氫箟杈撳叆涓庡姛鑳藉紑鍏?
   ========================================================================== */

.input-group-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.input-group-row:last-child {
    margin-bottom: 0;
}

.custom-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0 8px;
    height: 32px;
    border-radius: 4px;
    font-size: 12px;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
    color: #fff;
}

.icon-btn:hover {
    opacity: 1;
}

.icon-btn.active {
    opacity: 1;
    color: #4facfe;
}

/* 椋庢牸鍙傝€冨浘涓婁紶 */
.style-ref-zone {
    margin-top: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    position: relative;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.style-ref-zone:hover {
    border-color: #4facfe;
    background: rgba(79, 172, 254, 0.1);
}

.style-ref-preview {
    max-width: 100%;
    max-height: 100px;
    border-radius: 4px;
    display: none;
    margin-top: 4px;
}

.style-ref-label {
    font-size: 11px;
    color: #aaa;
    pointer-events: none;
}

.style-ref-close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    display: none;
}

/* 鏂囨娓叉煋寮€鍏?*/
.text-render-switch {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 2px;
    margin-bottom: 10px;
}

.render-option {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #888;
    padding: 4px 0;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}

.render-option.active {
    background: #4facfe;
    color: #fff;
    font-weight: bold;
}

/* 浜у搧浜や簰鏍囩 */
.interaction-tags {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: space-evenly;
    padding: 4px 0;
    backdrop-filter: blur(2px);
    transform: translateY(100%);
    transition: transform 0.2s;
}

.img-item:hover .interaction-tags {
    transform: translateY(0);
}

.tag-btn {
    font-size: 10px;
    color: #ccc;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
    user-select: none;
}

.tag-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tag-btn.active {
    background: #4facfe;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(79, 172, 254, 0.5);
}

/* ==========================================================================
   銆怴2 涓ゅ眰甯冨眬銆戣璁″櫒鎿嶄綔闈㈡澘閲嶆瀯
   ========================================================================== */

/* 鏁翠綋瀹瑰櫒 */
/* 鏁翠綋瀹瑰櫒 */
.settings-dock-v2 {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* User requested Max-Width: 1200px */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Center horizontal if it's block */
    padding: 32px 48px 32px 38px !important;
    /* Inner safe area: left 38px, right 48px, vertical 32px */
    overflow: visible;
}

/* ========== 涓婂尯锛氱礌鏉愪笌鏂囨 ========== */
.dock-top-section {
    display: flex;
    gap: 24px;
    /* Gutter 24px */
    padding: 40px;
    /* Padding 40px */
    border-bottom: none;
    /* Remove separator */
}

/* 宸︿晶锛氬浘鐗囦笂浼犲尯 */
.dock-images-area {
    display: flex;
    flex-direction: column;
    /* Changed to column */
    gap: 24px;
    /* Gutter 24px */
    flex: 2;
    /* Ratio 2 */
    min-width: 0;
    justify-content: space-between;
    /* Align header top, content bottom */
}

.images-row {
    display: flex;
    gap: 24px;
    /* Gutter 24px */
    align-items: flex-end;
    /* Bottom align slots */
}

.area-header,
.area-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.product-slots-wrapper {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.product-slots {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    scrollbar-width: none;
}

.product-slots::-webkit-scrollbar {
    display: none;
}

/* 涓婁紶妲戒綅鏍峰紡 */
.add-btn-slot {
    flex-shrink: 0;
    width: 96px;
    /* 96px */
    height: 96px;
    border: 1.5px dashed #d1d1d6;
    /* Thinner border, standard color */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
    gap: 4px;
}

.add-btn-slot:hover {
    border-color: var(--accent);
    background: rgba(255, 77, 0, 0.02);
}

.add-btn-slot .add-icon {
    font-size: 24px;
    color: #aeaeae;
    font-weight: 300;
}

.add-btn-slot .add-label {
    font-size: 11px;
    color: #aeaeae;
}

/* 浜у搧鍥剧缉鐣ュ浘 - 鍦╒2甯冨眬涓?*/
.product-slots .thumb-wrap {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-slots .thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-dock {
    pointer-events: auto;
    background: #fff;
    border-radius: 32px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Vertical Stack */
    gap: 32px;
}

/* Top Section: Images + Text */
.dock-top-section {
    display: flex;
    flex-direction: row;
    height: auto;
    gap: 32px;
}

/* Left: Images */
.dock-images-area {
    width: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.area-header {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 16px;
}

.images-row {
    display: flex;
    gap: 20px;
}

/* Right: Copy */
.dock-copy-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.copy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Bottom Section: Toolbar */
.dock-bottom-toolbar {
    margin-top: auto;
    display: flex;
    gap: 12px;
}

.dark-select {
    flex: 1;
    height: 48px;
    background: #1d1d1f;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: background 0.2s;
}

.dark-select:hover {
    background: #2d2d2f;
}

/* Vertical Divider */
.dock-divider-v {
    width: 1px;
    background: #f2f2f5;
    height: auto;
}

/* Slot Styles (Simplified) */
.product-slots-wrapper,
.reference-slot {
    width: 120px;
    height: 120px;
    border: 2px dashed #e5e5ea;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    background: #fafafc;
}

.product-slots-wrapper:hover,
.reference-slot:hover {
    border-color: #007aff;
    background: #f0f8ff;
}

.add-btn-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #8e8e93;
    font-size: 12px;
    font-weight: 600;
}

.thumb-wrap {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
}

.thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-slots .thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.product-slots .thumb-wrap:hover .thumb-del {
    opacity: 1;
}

/* 鍙傝€冨浘鍥哄畾妲戒綅 */
.reference-slot {
    flex-shrink: 0;
    width: 96px;
    /* Ensure same size */
    height: 96px;
    border: 1.5px dashed #b0b0b5;
    /* Slightly different color (darker gray) */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    gap: 4px;
    /* Align content spacing */
}

.reference-slot:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.05);
}

.reference-slot .ref-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* Same gap */
}

.reference-slot .ref-label .add-icon {
    font-size: 24px;
    /* Same icon size */
    color: #a78bfa;
    /* Light purple */
}

.reference-slot .ref-label span:last-child {
    font-size: 11px;
    color: #a78bfa;
}

.reference-slot .ref-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    border-radius: 8px;
}

.reference-slot .ref-close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    cursor: pointer;
    z-index: 2;
}

.reference-slot:hover .ref-close {
    display: flex;
}

/* 鍙充晶锛氭枃妗堢紪杈戝尯 */
.dock-copy-area {
    flex: 3;
    /* Ratio 3 */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.copy-header {
    display: flex;
    justify-content: space-between;
    /* Space out title and toggle */
    align-items: center;
    margin-bottom: 8px;
}

.layer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

.layer-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

.toggle-label {
    font-weight: 500;
}

/* 鍨傜洿鍒嗛殧绾?*/
.dock-divider-v {
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 16px;
    align-self: stretch;
}

/* 鏂囨缃戞牸锛氫笂涓ゆ牸銆佷笅涓夋牸 */
.copy-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* ========== 涓婂尯锛氱礌鏉愪笌鏂囨 ========== */
.dock-top-section {
    display: flex;
    gap: 20px;
    padding: 32px 40px;
    /* Doubled padding */
    border-bottom: none;
    /* Remove separator */
}

.copy-row {
    display: flex;
    gap: 8px;
}

.copy-row-2 .copy-input {
    flex: 1;
}

.copy-row-3 .copy-input {
    flex: 1;
}


.copy-grid .copy-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* Gray border default */
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    /* White bg default */
    transition: all 0.2s;
    box-sizing: border-box;
}

.copy-grid .copy-input:focus {
    outline: none;
    background: #fff;
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.3);
    /* Slightly darker on focus */
}

/* ========== 涓嬪尯锛氬弬鏁伴厤缃伐鍏锋爮 ========== */
.dock-bottom-toolbar {
    display: flex;
    justify-content: space-around;
    padding: 24px 40px;
    /* Horizontal padding 40px to match top section */
    background: transparent;
    border-radius: 0 0 var(--radius-box) var(--radius-box);
}

.dock-bottom-toolbar .custom-select-wrapper {
    margin: 0 9px;
    /* Increased margin to reduce width further (previous 4px + 5px) */
    flex: 1;
    /* Ensure they distribute evenly but respond to margins */
}

/* 搴曢儴宸ュ叿鏍忕殑鐗规畩鏍峰紡锛氶粦搴?澶у渾瑙?*/
.dock-bottom-toolbar .custom-select-trigger {
    background: #1d1d1f;
    /* Black background */
    color: #fff;
    border: none;
    border-radius: 999px;
    /* Max rounded */
    justify-content: center;
    /* Center text */
    text-align: center;
}

.dock-bottom-toolbar .custom-select-trigger:hover {
    background: #333;
    color: #fff;
    border: none;
}

.dock-bottom-toolbar .custom-select-wrapper.open .custom-select-trigger {
    background: #333;
    border: none;
    color: #fff;
    border-radius: 999px;
    /* Keep pill shape even when open */
}

.dock-bottom-toolbar .custom-arrow {
    border-color: rgba(255, 255, 255, 0.7);
    /* White arrow */
}

.dock-bottom-toolbar .custom-select-trigger:hover .custom-arrow {
    border-color: #fff;
}

/* 鍘嗗彶璁板綍寮瑰嚭妗?(榛戝簳鐧藉瓧) */
.input-history-box {
    background: #1d1d1f;
    color: #fff;
    border-radius: 12px;
    padding: 6px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 9999;
    overflow: hidden;
    font-size: 13px;
}

.history-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 閫変腑锛堟墦寮€锛夌姸鎬侊細鐧藉簳 + 灏忕伆鎻忚竟 */
.custom-select-wrapper.open .custom-select-trigger {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Optional: keeping slight shadow too */
    color: #333;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: #333;
}

.toolbar-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.toolbar-icon {
    font-size: 16px;
}

.toolbar-text {
    font-weight: 500;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar-arrow {
    font-size: 8px;
    color: #999;
    transition: transform 0.2s;
}

.toolbar-item.open .toolbar-arrow {
    transform: rotate(180deg);
}

/* Popover 寮瑰嚭鑿滃崟 */
.toolbar-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 12px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.toolbar-popover.popover-wide {
    min-width: 220px;
}

.toolbar-item.open .toolbar-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.popover-title {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding: 0 4px;
}

/* 鑷畾涔夎緭鍏ュ尯 */
.popover-custom-input {
    margin-bottom: 8px;
}

.custom-prompt-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 12px;
    background: #fafafa;
    box-sizing: border-box;
    transition: all 0.2s;
}

.custom-prompt-input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--accent);
    background: #fff;
}

.custom-prompt-input::placeholder {
    color: #aaa;
}

.popover-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 8px 0;
}

/* 閫夐」鍒楄〃 */
.popover-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.popover-option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    color: #333;
}

.popover-option:hover {
    background: #f0f0f2;
}

.popover-option.active {
    background: rgba(255, 77, 0, 0.1);
    color: var(--accent);
    font-weight: 600;
}

/* 姣斾緥閫夐」缃戞牸 */
.popover-grid {
    display: grid;
    gap: 6px;
}

.ratio-popover-grid {
    grid-template-columns: repeat(3, 1fr);
}

.ratio-popover-grid .ratio-btn {
    padding: 12px 8px;
    text-align: center;
    background: #f5f5f7;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: #333;
    border: 2px solid transparent;
}

/* ========== Dock Area 1:1 Replica (Reference-Matched) ========== */
.bottom-ui-zone {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 1200px;
    height: 242px;
    display: flex;
    align-items: stretch;
    gap: 25px;
    padding: 0;
    margin: 0;
    pointer-events: none;
    z-index: 100;
    box-sizing: border-box;
}

.settings-dock,
.settings-dock.settings-dock-v2 {
    pointer-events: auto;
    width: 935px;
    max-width: 935px;
    height: 242px;
    flex: 0 0 935px;
    margin: 0;
    padding: 32px 48px 32px 38px !important;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(24, 25, 30, 0.10);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    overflow: visible;
}

.dock-visual {
    width: 286px;
    flex: 0 0 286px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.visual-header {
    margin: 0 0 24px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #1d1f24;
    position: relative;
    left: 1px;
    top: 2px;
}

.visual-row {
    display: flex;
    align-items: flex-end;
    gap: 34px;
    position: relative;
    top: 3px;
}

.product-stack-zone {
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
    position: relative;
    z-index: 10;
}

.product-slots {
    width: 108px;
    height: 108px;
    position: relative;
    display: block;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

.visual-row>.product-stack-zone,
.visual-row>.reference-slot {
    align-self: flex-end;
}

.add-btn-slot,
.reference-slot {
    width: 108px;
    height: 108px;
    border: 1.5px solid #d3d7df;
    border-radius: 10px;
    background: #f8f9fb;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    z-index: 1;
    gap: 6px;
}

.add-btn-slot:hover {
    border-color: #ffb07f;
    background: #fff2e8;
}

.product-stack-zone.drag-over .add-btn-slot {
    border-color: #ff9d63;
    background: #fff0e4;
    box-shadow: 0 0 0 3px rgba(255, 137, 57, 0.16);
}

.product-stack-zone.drag-over .add-btn-slot .add-icon-lz,
.product-stack-zone.drag-over .add-btn-slot .add-label {
    color: #ff6a00;
}

.product-stack-zone.drag-over .product-slots::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 2px dashed rgba(255, 137, 57, 0.75);
    background: rgba(255, 137, 57, 0.08);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 180;
}

.reference-slot:hover {
    border-color: #b39cff;
    background: #f5f2ff;
}

.reference-slot.drag-over {
    border-color: #9a84ff;
    background: #f1ebff;
    box-shadow: 0 0 0 3px rgba(154, 132, 255, 0.16);
}

.reference-slot.drag-over::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 2px dashed rgba(154, 132, 255, 0.8);
    background: rgba(154, 132, 255, 0.06);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 12;
}

.reference-slot.drag-over .ref-label>div:last-child,
.reference-slot.drag-over .add-icon-lz {
    color: #8d7cff;
}

.ref-label {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #a9aeb8;
    font-size: 12px;
    font-weight: 600;
}

.add-icon-lz {
    font-size: 38px;
    line-height: 1;
    font-weight: 300;
    color: #bcc1cb;
}

.add-btn-slot .add-label {
    font-size: 12px;
    color: #a9aeb8;
}

.reference-slot .ref-label>div:last-child {
    font-size: 12px;
    color: #a9aeb8;
}

.reference-slot .add-icon-lz {
    color: #bcc1cb;
}

.add-btn-slot:hover .add-icon-lz,
.add-btn-slot:hover .add-label {
    color: #ff6a00;
}

.reference-slot:hover .ref-label>div:last-child,
.reference-slot:hover .add-icon-lz {
    color: #9c8cff;
}

.reference-slot .ref-close {
    display: none;
}

.reference-slot.has-ref {
    border-style: solid;
    background: #fff;
}

.reference-slot.has-ref .ref-label {
    display: none;
}

.reference-slot:not(.has-ref) .ref-close,
.reference-slot:not(.has-ref):hover .ref-close {
    display: none !important;
}

.reference-slot.has-ref .ref-close {
    display: none;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(20, 21, 25, 0.65);
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding: 0;
    box-sizing: border-box;
}

.reference-slot.has-ref:hover .ref-close {
    display: flex;
}

.ref-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: none;
}

.reference-slot.has-ref .ref-preview {
    display: block;
}

.ref-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #ffffff;
    background: rgba(20, 21, 25, 0.65);
    z-index: 20;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
}

.thumb-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 108px;
    height: 108px;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 4px 12px rgba(19, 20, 24, 0.10);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-slots .thumb-wrap:nth-of-type(1) {
    z-index: 10;
    transform: rotate(0deg);
}

.product-slots .thumb-wrap:nth-of-type(2) {
    z-index: 9;
    transform: rotate(4deg) translate(2px, 0);
}

.product-slots .thumb-wrap:nth-of-type(3) {
    z-index: 8;
    transform: rotate(8deg) translate(4px, 0);
}

.product-stack-zone:hover .thumb-wrap:nth-of-type(1) {
    transform: translateY(-58px) rotate(-4deg);
    z-index: 20;
}

.product-stack-zone:hover .thumb-wrap:nth-of-type(2) {
    transform: translateY(-28px) rotate(0deg);
    z-index: 19;
}

.product-stack-zone:hover .thumb-wrap:nth-of-type(3) {
    transform: translateY(0) rotate(4deg);
    z-index: 18;
}

/* Product upload: in-place stacked cards (max 3) */
.product-slots.is-empty {
    background: transparent;
    border: none;
    overflow: visible;
}

.product-slots.is-filled {
    border-radius: 0;
    overflow: visible;
    border: none;
    background: transparent;
    cursor: pointer;
}

.product-slots.is-stacked .upload-stack-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(245, 247, 252, 0.92);
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(8, 10, 16, 0.28);
    transform-origin: 50% 50%;
    transform: translate(calc(-50% + var(--stack-shift-x, 0px)), -50%) rotate(var(--stack-rotate, 0deg));
    transition: transform 0.2s ease;
}

.product-slots.is-popover-open .upload-stack-card {
    transform: translate(calc(-50% + var(--stack-hover-shift-x, 0px)), -50%) rotate(var(--stack-hover-rotate, var(--stack-rotate, 0deg)));
}

.product-slots.is-stacked .upload-stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-slots.is-stacked .upload-hover-popover {
    position: absolute;
    left: -18px;
    bottom: calc(100% + 10px);
    transform: translateY(4px);
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    width: max-content;
    box-sizing: border-box;
    overflow: visible;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d9dde5;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(24, 25, 30, 0.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 120;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.product-slots.is-popover-open .upload-hover-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.product-slots.is-stacked .upload-pop-item,
.product-slots.is-stacked .upload-pop-add {
    width: 94px;
    height: 94px;
    flex: 0 0 94px;
    border-radius: 8px;
    position: relative;
}

.product-slots.is-stacked .upload-pop-item {
    overflow: visible;
    border: 1px solid #e1e5ec;
    background: #f5f7fb;
}

.product-slots.is-stacked .upload-pop-image-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    z-index: 1;
    background: #f5f7fb;
    pointer-events: none;
    isolation: isolate;
}

.product-slots.is-stacked .upload-pop-image-wrap::before,
.product-slots.is-stacked .upload-pop-image-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.product-slots.is-stacked .upload-pop-image-wrap::before {
    top: 0;
    height: 38px;
    z-index: 2;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.48) 42%,
            rgba(255, 255, 255, 0.12) 72%,
            rgba(255, 255, 255, 0) 100%);
}

.product-slots.is-stacked .upload-pop-image-wrap::after {
    bottom: 0;
    height: 46px;
    z-index: 2;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.26) 46%,
            rgba(0, 0, 0, 0) 100%);
}

.product-slots.is-stacked .upload-pop-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

.product-slots.is-stacked .upload-pop-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(16, 18, 24, 0.72);
    color: #ffffff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
    transition: opacity 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.product-slots.is-stacked .upload-size-trigger {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #3d434b;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 8;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: color 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
    filter: none;
}

.product-slots.is-stacked .upload-size-trigger.has-value {
    width: auto;
    min-width: 40px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid #ff9a57;
    background: rgba(255, 255, 255, 0.9);
    color: #ff6a00;
    box-shadow: none;
}

.product-slots.is-stacked .upload-size-trigger-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.product-slots.is-stacked .upload-size-trigger-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.product-slots.is-stacked .upload-size-trigger-value {
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-slots.is-stacked .upload-size-trigger.has-value .upload-size-trigger-value {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.product-slots.is-stacked .upload-pop-item:hover .upload-size-trigger:not(.has-value) {
    color: #3d434b;
}

.product-slots.is-stacked .upload-pop-item.has-size .upload-size-trigger,
.product-slots.is-stacked .upload-size-trigger.active {
    color: #ff6a00;
}

.product-slots.is-stacked .upload-size-pop {
    position: absolute;
    top: 2px;
    left: -2px;
    transform: translateY(-100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 208px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #d9dde5;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(24, 25, 30, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 14;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.product-slots.is-stacked .upload-pop-item.is-size-open .upload-size-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-100%);
}

.product-slots.is-stacked .upload-size-option {
    height: 30px;
    min-width: 0;
    width: 100%;
    padding: 0 8px;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    background: #f7f8fa;
    color: #4a4f59;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.product-slots.is-stacked .upload-size-option:hover {
    border-color: #ffb07f;
    color: #ff6a00;
    background: #fff2e8;
}

.product-slots.is-stacked .upload-size-option.active {
    border-color: #ff9a57;
    color: #ff6a00;
    background: #ffe9d7;
    font-weight: 700;
}

.product-slots.is-stacked .upload-pop-item:hover .upload-pop-close {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.product-slots.is-stacked .upload-pop-close:hover {
    background: rgba(255, 70, 70, 0.9);
}

.product-slots.is-stacked .upload-pop-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    min-height: 46px;
    padding: 0 6px 6px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
    background: transparent;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(3px);
    z-index: 7;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.product-slots.is-stacked .upload-pop-item:hover .upload-pop-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.product-slots.is-stacked .upload-pop-item.has-active .upload-pop-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.product-slots.is-stacked .upload-tag-btn {
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.product-slots.is-stacked .upload-tag-btn.active {
    color: #ff8a2a;
    font-weight: 600;
}

.product-slots.is-stacked .upload-pop-add {
    border: 1px solid #d3d7df;
    background: #f8f9fb;
    color: #9aa1af;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.product-slots.is-stacked .upload-pop-add:hover {
    border-color: #ffb07f;
    background: #fff2e8;
    color: #ff6a00;
}

.product-slots.is-stacked .upload-pop-add-plus {
    font-size: 20px;
    line-height: 1;
}

.product-slots.is-stacked .upload-pop-add-text {
    font-size: 11px;
    line-height: 1;
}

.thumb-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    background: rgba(20, 21, 25, 0.70);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 30;
    cursor: pointer;
}

.thumb-wrap:hover .thumb-del {
    opacity: 1;
}

.dock-divider-v {
    width: 1px;
    flex: 0 0 1px;
    height: 158px;
    margin: 20px 36px 0 0;
    align-self: flex-start;
    background: #ebedf2;
}

.dock-params {
    width: 479px;
    flex: 0 0 479px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.dock-copy-area {
    flex: 0 0 auto;
    display: block;
    margin-bottom: 12px;
    padding-bottom: 0;
}

.settings-dock.settings-dock-v2 .dock-params {
    display: block !important;
    width: 526px !important;
    min-width: 526px !important;
}

.settings-dock.settings-dock-v2 .dock-copy-area {
    display: block !important;
    flex: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.settings-dock.settings-dock-v2 .copy-grid {
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.copy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 14px 0;
    padding-right: 2px;
}

.area-label {
    font-size: 14px;
    font-weight: 400;
    color: #1d1f24;
    line-height: 1;
}

.settings-dock.settings-dock-v2 .visual-header {
    left: 1px !important;
    top: 2px !important;
    line-height: 1 !important;
}

.settings-dock.settings-dock-v2 .visual-row {
    top: 3px !important;
}

.settings-dock.settings-dock-v2 .area-label {
    line-height: 1 !important;
}

.layer-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #666b78;
    cursor: pointer;
    justify-content: flex-end;
}

.layer-toggle input.chk-ios {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 16px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: #d7dce3;
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s ease;
    flex: 0 0 auto;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.layer-toggle input.chk-ios::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.18s ease;
}

.layer-toggle input.chk-ios::after {
    content: none;
    display: none;
}

.layer-toggle input.chk-ios:checked {
    background: #313742;
}

.layer-toggle input.chk-ios:checked::before {
    transform: translateX(14px);
}

.layer-toggle input.chk-ios:checked::after {
    content: none;
    display: none;
}

.toggle-label {
    font-weight: 400;
    color: #6a707d;
    position: relative;
    top: -1px;
}

.layer-toggle[data-tip] {
    position: relative;
}

.layer-toggle[data-tip]::before,
.layer-toggle[data-tip]::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    transition-delay: 0s, 0s, 0s;
    z-index: 120;
}

.layer-toggle[data-tip]::before {
    content: "";
    bottom: calc(100% + 6px);
    transform: translate(-50%, 4px);
    border-width: 8px 7px 0 7px;
    border-style: solid;
    border-color: rgba(28, 30, 36, 0.92) transparent transparent transparent;
}

.layer-toggle[data-tip]::after {
    content: attr(data-tip);
    bottom: calc(100% + 14px);
    transform: translate(-50%, 6px);
    width: 238px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(28, 30, 36, 0.92);
    color: rgba(255, 255, 255, 0.96);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.layer-toggle[data-tip]:hover::before,
.layer-toggle[data-tip]:hover::after,
.layer-toggle[data-tip]:focus-within::before,
.layer-toggle[data-tip]:focus-within::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.42s, 0.42s, 0.42s;
}

.layer-toggle[data-tip]:hover::before,
.layer-toggle[data-tip]:focus-within::before {
    transform: translate(-50%, 0);
}

.layer-toggle[data-tip]:hover::after,
.layer-toggle[data-tip]:focus-within::after {
    transform: translate(-50%, 0);
}

.copy-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.copy-row {
    display: grid !important;
    gap: 10px;
    width: 100%;
}

.copy-grid>.copy-row.copy-row-2 {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
}

.copy-grid>.copy-row.copy-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.copy-row-2 .copy-input,
.copy-row-3 .copy-input {
    flex: unset;
}

.dock-copy-area #txt-main,
.dock-copy-area #txt-sub,
.dock-copy-area #txt-desc,
.dock-copy-area #txt-btn {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
}

.copy-grid .copy-input {
    height: 38px;
    min-height: 38px;
    width: 100%;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f5f6f8;
    color: #1c1e24;
    font-size: 13px;
    font-weight: 400;
    line-height: 38px;
    transition: border-color 0.2s, background-color 0.2s;
}

.copy-grid .copy-input::placeholder {
    color: #b2b6c0;
    font-weight: 400;
}

.copy-grid .copy-input:focus {
    outline: none;
    background: #ffffff;
    border: 1px solid #d8dce5;
    box-shadow: none;
}

.dock-options-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    --dock-option-gap: 14px;
    gap: var(--dock-option-gap);
    width: 100%;
    margin-top: 0;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    top: 2px;
}

.settings-dock.settings-dock-v2 .dock-options-bar {
    margin-top: 0 !important;
}

.dock-options-bar .dark-select {
    height: 38px;
    min-height: 38px;
    border-radius: 10px;
    padding: 0 28px 0 12px;
    border: none;
    background-color: #222222;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    appearance: none;
    cursor: pointer;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px;
    box-sizing: border-box;
}

.dock-options-bar .dark-select:hover {
    background-color: #222222;
}

.dock-options-bar .select-shell {
    position: relative;
    width: 100%;
}

.dock-options-bar .model-select-shell {
    height: 38px;
    min-height: 38px;
}

.dock-options-bar .select-shell .dark-select {
    width: 100%;
}

@font-face {
    font-family: "dock-iconfont";
    src: url("fonts/iconfont-dock.ttf") format("truetype");
}

.dock-options-bar .select-caption {
    position: absolute;
    inset: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    border-radius: 10px;
    background-color: #222222;
    pointer-events: none;
    box-sizing: border-box;
}

.dock-options-bar .select-caption>span {
    position: relative;
    top: -1px;
}

.dock-options-bar .select-caption .dock-icon {
    font-family: "dock-iconfont" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dock-options-bar .select-caption .icon-theme,
.dock-options-bar .select-caption .icon-style {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.dock-options-bar .select-caption .icon-layout {
    width: 14px;
    height: 14px;
    font-size: 16px;
    transform: scale(1.08);
    transform-origin: center;
}

.dock-options-bar .select-shell.is-enhanced .select-caption {
    display: none !important;
}

.dock-options-bar .custom-select-wrapper.dock-select {
    width: 100%;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-select-trigger {
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background-color: #222222;
    color: #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 13px;
    font-weight: 400;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-arrow {
    display: none;
}

.dock-options-bar .custom-select-wrapper.dock-select .dock-trigger-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.dock-options-bar .custom-select-wrapper.dock-select .dock-trigger-text {
    position: relative;
    top: -1px;
}

.dock-options-bar .custom-select-wrapper.dock-select .dock-icon {
    font-family: "dock-iconfont" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-select-trigger:hover .dock-trigger-text,
.dock-options-bar .custom-select-wrapper.dock-select .custom-select-trigger:hover .dock-icon {
    color: #ff6a00;
}

.dock-options-bar .custom-select-wrapper.dock-select .dock-icon-theme,
.dock-options-bar .custom-select-wrapper.dock-select .dock-icon-style {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.dock-options-bar .custom-select-wrapper.dock-select .dock-icon-layout {
    width: 14px;
    height: 14px;
    font-size: 16px;
    transform: scale(1.08);
    transform-origin: center;
}

.dock-options-bar .custom-select-wrapper.dock-select.has-selection .dock-icon {
    display: none;
}

.dock-options-bar .custom-select-wrapper.dock-select.has-selection .custom-select-trigger,
.dock-options-bar .custom-select-wrapper.dock-select.has-selection .dock-trigger-text {
    color: #ff6a00;
}

/* Model select icon (SVG) */
.dock-icon-model {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.dock-icon-model-svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}

/* Model select button: make caption clickable (overrides pointer-events:none) */
.model-select-shell {
    position: relative;
}

.model-select-shell .select-caption {
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background-color: #222222;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s;
    box-sizing: border-box;
}

.model-select-shell .select-caption:hover {
    color: #ff6a00;
}

.model-select-shell .select-caption:hover .dock-icon-model {
    filter: none;
}

.model-select-shell.has-model-active .select-caption {
    color: #ff6a00;
}

.model-select-shell.is-open .select-caption {
    background-color: #222222;
    color: #ffffff;
}

/* Model popover panel */
.model-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    transform: none;
    width: 320px;
    margin: 0;
    background: #ffffff;
    border: 1px solid #d8dce5;
    border-radius: 10px;
    box-shadow: 0 7px 16px rgba(19, 22, 30, 0.18);
    z-index: 3500;
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 10px;
    max-height: 760px;
}

.model-popover.is-open {
    display: flex;
}

.model-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 8px 2px;
    border-bottom: 1px solid #eceff4;
}

.model-popover-title {
    font-size: 14px;
    font-weight: 400;
    color: #8d95a3;
    line-height: 1;
    cursor: default;
    user-select: none;
}

.model-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-toggle-label {
    font-size: 12px;
    font-weight: 400;
    color: #6a707d;
}

.model-toggle-wrap input.chk-ios {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 16px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: #d7dce3;
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s ease;
    flex: 0 0 auto;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.model-toggle-wrap input.chk-ios::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.18s ease;
}

.model-toggle-wrap input.chk-ios::after {
    content: none;
    display: none;
}

.model-toggle-wrap input.chk-ios:checked {
    background: #313742;
}

.model-toggle-wrap input.chk-ios:checked::before {
    transform: translateX(14px);
}

.model-popover-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-popover.is-disabled .model-popover-body {
    opacity: 0.55;
}

.model-persons-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #c4cad5 transparent;
    scrollbar-gutter: stable;
}

.model-popover.is-single-person {
    max-height: 900px;
}

.model-persons-container.is-single-person {
    max-height: none;
}

.model-persons-container::-webkit-scrollbar {
    width: 8px;
}

.model-persons-container::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.model-persons-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.model-persons-container::-webkit-scrollbar-thumb {
    background: #c4cad5;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 28px;
}

.model-count-row {
    --slider-thumb-width: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0 2px;
}

.model-count-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.model-count-label {
    font-size: 13px;
    font-weight: 400;
    color: #1c1e24;
    line-height: 1;
}

.model-count-value {
    font-size: 12px;
    color: #8d95a3;
    font-weight: 500;
}

.model-range-slider {
    width: calc(100% - var(--slider-thumb-width));
    margin: 0 calc(var(--slider-thumb-width) / 2);
    height: 12px;
    border-radius: 999px;
    background: #d8dce5;
    border: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    box-shadow: none;
}

.model-range-slider:hover,
.model-range-slider:focus,
.model-range-slider:active {
    background: #d8dce5;
    border: none;
    outline: none;
    box-shadow: none;
}

.model-range-slider::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    background: #d8dce5;
}

.model-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-thumb-width);
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #222222;
    margin-top: 1px;
}

.model-range-slider::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    background: #d8dce5;
    border: none;
}

.model-range-slider::-moz-range-progress {
    height: 12px;
    border-radius: 999px;
    background: #d8dce5;
    border: none;
}

.model-range-slider::-moz-range-thumb {
    width: var(--slider-thumb-width);
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #222222;
}

.model-range-slider:disabled {
    cursor: not-allowed;
}

.model-range-slider:disabled::-webkit-slider-thumb {
    background: #8f98a8;
}

.model-range-slider:disabled::-moz-range-thumb {
    background: #8f98a8;
}

.model-age-slider {
    --age-step-width: 10px;
    --slider-thumb-width: var(--age-step-width);
    background: #ffffff;
}

.model-age-slider::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    border: none;
}

.model-age-slider::-webkit-slider-thumb {
    width: var(--age-step-width);
    border-radius: 999px;
}

.model-age-slider::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    border: none;
}

.model-age-slider::-moz-range-progress {
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    border: none;
}

.model-age-slider::-moz-range-thumb {
    width: var(--age-step-width);
    border-radius: 999px;
}

.model-age-slider:hover,
.model-age-slider:focus,
.model-age-slider:active {
    background: #ffffff;
}

.model-age-slider:hover::-webkit-slider-runnable-track,
.model-age-slider:focus::-webkit-slider-runnable-track,
.model-age-slider:active::-webkit-slider-runnable-track {
    background: #ffffff;
}

.model-age-slider:hover::-moz-range-track,
.model-age-slider:focus::-moz-range-track,
.model-age-slider:active::-moz-range-track,
.model-age-slider:hover::-moz-range-progress,
.model-age-slider:focus::-moz-range-progress,
.model-age-slider:active::-moz-range-progress {
    background: #ffffff;
}

.model-range-ticks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - var(--slider-thumb-width));
    margin: 0 calc(var(--slider-thumb-width) / 2);
    font-size: 11px;
    color: #a0a6b4;
    line-height: 1;
    user-select: none;
}

.model-count-ticks span {
    cursor: pointer;
}

.model-person-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    background: #f5f6f8;
}

.model-person-card.has-expression-room {
    padding-bottom: 154px;
}

.model-person-title {
    font-size: 12px;
    font-weight: 500;
    color: #8d95a3;
    line-height: 1;
}

.model-person-fields {
    display: grid;
    grid-template-columns: 63px 63px 63px minmax(0, 1fr);
    gap: 6px;
}

.model-person-fields.is-pet {
    grid-template-columns: 63px minmax(0, 1fr);
}

.model-age-row {
    --age-step-width: 10px;
    --slider-thumb-width: var(--age-step-width);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.model-age-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.model-age-label {
    font-size: 12px;
    color: #8d95a3;
    font-weight: 400;
    line-height: 1;
}

.model-age-value {
    font-size: 12px;
    color: #1c1e24;
    font-weight: 500;
    line-height: 1;
}

.model-field-select {
    height: 30px;
    width: 100%;
    border: 1px solid #cfd3db;
    border-radius: 8px;
    background: #ffffff;
    color: #1c1e24;
    font-size: 12px;
    padding: 0 6px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    padding-right: 22px;
    -moz-appearance: none;
}

.model-field-select:focus {
    border-color: #cfd3db;
    background: #f7f8fa;
    box-shadow: none;
}

.model-field-select option {
    background: #ffffff;
    color: #1c1e24;
    border-radius: 8px;
    box-shadow: none;
}

.model-field-select option:checked {
    background: #eef1f4;
    color: #1c1e24;
    box-shadow: 0 0 0 100vmax #eef1f4 inset;
}

.model-field-select option:hover {
    background: #f2f4f6;
    color: #1c1e24;
    box-shadow: 0 0 0 100vmax #f2f4f6 inset;
}

.model-field-select:disabled {
    color: #939baa;
    background: #f0f2f5;
    border-color: #dde2ea;
    cursor: not-allowed;
}

.model-pose-input {
    height: 30px;
    width: 100%;
    border: 1px solid #cfd3db;
    border-radius: 8px;
    background: #ffffff;
    color: #1c1e24;
    font-size: 12px;
    padding: 0 8px;
    outline: none;
    box-sizing: border-box;
}

.model-pose-input::placeholder {
    color: #8d95a3;
}

.model-pose-input:focus {
    border-color: #cfd3db;
    background: #f7f8fa;
    box-shadow: none;
}

.model-pose-input:disabled {
    color: #939baa;
    background: #f0f2f5;
    border-color: #dde2ea;
    cursor: not-allowed;
}

.model-breed-input {
    height: 30px;
    width: 100%;
    grid-column: 2 / -1;
    border: 1px solid #cfd3db;
    border-radius: 8px;
    background: #ffffff;
    color: #1c1e24;
    font-size: 12px;
    padding: 0 8px;
    outline: none;
    box-sizing: border-box;
}

.model-breed-input::placeholder {
    color: #8d95a3;
}

.model-breed-input:focus {
    border-color: #cfd3db;
    background: #f7f8fa;
    box-shadow: none;
}

.model-breed-input:disabled {
    color: #939baa;
    background: #f0f2f5;
    border-color: #dde2ea;
    cursor: not-allowed;
}

.custom-select-wrapper.inline-soft .custom-select-trigger {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #cfd3db;
    border-radius: 8px;
    background: #ffffff;
    color: #1c1e24;
    font-size: 12px;
    box-shadow: none;
}

.custom-select-wrapper.inline-soft.is-disabled .custom-select-trigger {
    color: #939baa;
    background: #f0f2f5;
    border-color: #dde2ea;
}

.custom-select-wrapper.inline-soft.is-disabled .custom-arrow {
    border-top-color: #b4bcc9;
}

.custom-select-wrapper.inline-soft.open .custom-select-trigger,
.custom-select-wrapper.inline-soft .custom-select-trigger:hover {
    background: #f7f8fa;
    border-color: #cfd3db;
    color: #1c1e24;
    box-shadow: none;
}

.custom-select-wrapper.inline-soft.is-disabled.open .custom-select-trigger,
.custom-select-wrapper.inline-soft.is-disabled .custom-select-trigger:hover {
    background: #f0f2f5;
    border-color: #dde2ea;
    color: #939baa;
}

.custom-select-wrapper.inline-soft .custom-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #999;
    border-bottom: none;
    border-radius: 0;
    transform: rotate(0deg);
    opacity: 1;
    margin-left: 10px;
}

.custom-select-wrapper.inline-soft.open .custom-arrow {
    transform: rotate(180deg);
}

.custom-select-wrapper.inline-soft .custom-options {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #d8dce5;
    box-shadow: none;
    transform: translateY(-4px);
    overflow: hidden;
}

.custom-select-wrapper.inline-soft.expression-field-select .custom-options {
    width: var(--expression-panel-width, 192px);
    right: auto;
}

.custom-select-wrapper.inline-soft.open .custom-options {
    transform: translateY(0);
}

.custom-select-wrapper.inline-soft .custom-options-scroll {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 248px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-gutter: stable;
    scrollbar-width: none;
    scrollbar-color: auto;
    -ms-overflow-style: none;
}

.custom-select-wrapper.inline-soft.expression-field-select .custom-options-scroll {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 4px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.custom-select-wrapper.inline-soft .custom-options-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.custom-select-wrapper.inline-soft .custom-options-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.custom-select-wrapper.inline-soft .custom-options-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.custom-select-wrapper.inline-soft .custom-options-scroll::-webkit-scrollbar-thumb {
    background: #c4cad5;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 28px;
}

.custom-select-wrapper.inline-soft .custom-option {
    padding: 5px 10px;
    border-radius: 8px;
    color: #1c1e24;
    font-size: 12px;
    line-height: 1.1;
}

.custom-select-wrapper.inline-soft.expression-field-select .custom-option {
    min-width: 0;
}

.custom-select-wrapper.inline-soft .custom-option:hover,
.custom-select-wrapper.inline-soft .custom-option.selected {
    background: #eef1f4;
    color: #1c1e24;
    font-weight: 500;
}

.model-person-fields .custom-select-wrapper.model-inline-select {
    width: 100%;
}

.api-popover .custom-select-wrapper.api-soft-select {
    width: 100%;
    margin-bottom: 16px;
}

.api-popover .custom-select-wrapper.api-soft-select .custom-select-trigger {
    height: 36px;
    border: none;
    border-radius: 14px;
    background: #f5f5f7;
    padding: 0 12px;
}

.api-popover .custom-select-wrapper.api-soft-select.open .custom-select-trigger,
.api-popover .custom-select-wrapper.api-soft-select .custom-select-trigger:hover {
    background: #f0f2f5;
    border: none;
}

.api-popover .custom-select-wrapper.api-soft-select .custom-options {
    border-radius: 14px;
}

/* Product binding checkboxes */
.model-person-products {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.model-products-label {
    font-size: 12px;
    font-weight: 400;
    color: #8d95a3;
    flex: 0 0 auto;
    white-space: nowrap;
}

.model-products-checks {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.model-product-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #1c1e24;
    cursor: pointer;
    user-select: none;
}

.model-product-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.model-product-label span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    position: relative;
}

.model-product-label span::before {
    content: "";
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    border: 1px solid #c9ced8;
    background: #ffffff;
    box-sizing: border-box;
    flex: 0 0 12px;
}

.model-product-label span::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6a00;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.model-product-label input[type="checkbox"]:checked+span::before {
    border-color: #ff6a00;
}

.model-product-label input[type="checkbox"]:checked+span::after {
    opacity: 1;
}

.model-product-label input[type="checkbox"]:disabled+span {
    color: #9ca4b2;
    cursor: not-allowed;
}

.model-product-label input[type="checkbox"]:disabled+span::before {
    border-color: #d5dae3;
    background: #eceff3;
}

.model-product-label input[type="checkbox"]:disabled:checked+span::after {
    background: #aeb5c1;
}

.model-products-empty {
    font-size: 12px;
    color: #b2b6c0;
    font-weight: 400;
    font-style: italic;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-options {
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #d8dce5;
    box-shadow: 0 7px 16px rgba(19, 22, 30, 0.18);
    z-index: 3500;
    transform: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

/* Ratio/Layout popovers: show full option list without inner scrolling */
.dock-options-bar .custom-select-wrapper[data-select-id="ratio-select"] .custom-options,
.dock-options-bar .custom-select-wrapper[data-select-id="layout-select"] .custom-options {
    max-height: 420px;
    overflow-y: visible;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .custom-options {
    width: 248px;
    left: 0;
    right: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    max-height: none;
}

.dock-options-bar .custom-select-wrapper.dock-select.open .custom-options {
    transform: none;
}

.dock-options-bar .custom-select-wrapper.dock-select.open .custom-select-trigger {
    background-color: #222222;
    border: none;
    box-shadow: none;
    color: #ffffff;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-option {
    font-size: 13px;
    font-weight: 400;
    color: #1c1e24;
    border-radius: 8px;
    padding: 8px 10px;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-option:hover {
    background: #f3f4f7;
    color: #1c1e24;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-option.selected {
    background: #eef1f6;
    color: #1c1e24;
    font-weight: 500;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tabs-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 0 8px 2px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #eceff4;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tab-btn {
    position: relative;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8d95a3;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tab-btn.is-active {
    color: #1c1e24;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tab-btn.is-active::after {
    background: #1c1e24;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tabs-body {
    display: flex;
    flex-direction: column;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tab-panel {
    display: none;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-tab-panel.is-active {
    display: block;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-camera-tab-panel {
    min-height: 164px;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-camera-tab-placeholder {
    min-height: 164px;
    border: 1px dashed #d9dee7;
    border-radius: 12px;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-camera-tab-title {
    font-size: 14px;
    font-weight: 600;
    color: #1c1e24;
}

.dock-options-bar .custom-select-wrapper.dock-layout-select .layout-camera-tab-desc {
    font-size: 12px;
    line-height: 1.55;
    color: #7e8695;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options {
    width: calc(200% + var(--dock-option-gap));
    left: 0;
    right: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    max-height: none;
}

.dock-options-bar .custom-select-wrapper.dock-style-select .custom-options {
    width: calc(260% + var(--dock-option-gap));
    left: calc(-160% - var(--dock-option-gap));
    right: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
    max-height: none;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-header,
.dock-options-bar .custom-select-wrapper.dock-style-select .custom-options-header {
    position: relative;
    z-index: 2;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #eceff4;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-title,
.dock-options-bar .custom-select-wrapper.dock-style-select .custom-options-title {
    font-size: 14px;
    font-weight: 400;
    color: #8d95a3;
    line-height: 1;
    padding-left: 10px;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-hint-input,
.dock-options-bar .custom-select-wrapper.dock-style-select .custom-hint-input {
    width: 106px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #d8dce5;
    border-radius: 8px;
    background: #ffffff;
    color: #1c1e24;
    font-size: 12px;
    font-weight: 400;
    padding: 0 8px;
    outline: none;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-hint-input:focus,
.dock-options-bar .custom-select-wrapper.dock-style-select .custom-hint-input:focus {
    border-color: #c5cad4;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-grid,
.dock-options-bar .custom-select-wrapper.dock-style-select .custom-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 238px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    padding-right: 2px;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-grid::-webkit-scrollbar {
    width: 8px;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-grid::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-grid::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-grid::-webkit-scrollbar-thumb {
    background: #c4cad5;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 28px;
}

.dock-options-bar .custom-select-wrapper.dock-theme-select .custom-options-grid {
    scrollbar-width: thin;
    scrollbar-color: #c4cad5 transparent;
}

.dock-options-bar .custom-select-wrapper.dock-select .custom-option.ratio-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-option-icon,
.extend-support-panel .ratio-option-icon {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #b7becc;
    border-radius: 2px;
    background: #ffffff;
    flex: 0 0 auto;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-option-label,
.extend-support-panel .ratio-option-label {
    display: inline-block;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--1-1,
.extend-support-panel .ratio-preview--1-1 {
    width: 11px;
    height: 11px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--1-6,
.extend-support-panel .ratio-preview--1-6 {
    width: 3px;
    height: 16px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--16-9,
.extend-support-panel .ratio-preview--16-9 {
    width: 16px;
    height: 9px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--5-2,
.extend-support-panel .ratio-preview--5-2 {
    width: 16px;
    height: 7px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--6-1,
.extend-support-panel .ratio-preview--6-1 {
    width: 16px;
    height: 3px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--4-1,
.extend-support-panel .ratio-preview--4-1 {
    width: 16px;
    height: 4px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--3-2,
.extend-support-panel .ratio-preview--3-2 {
    width: 15px;
    height: 10px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--4-5,
.extend-support-panel .ratio-preview--4-5 {
    width: 10px;
    height: 12px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--3-4,
.extend-support-panel .ratio-preview--3-4 {
    width: 9px;
    height: 12px;
}

.dock-options-bar .custom-select-wrapper.dock-select .ratio-preview--9-16,
.extend-support-panel .ratio-preview--9-16 {
    width: 7px;
    height: 12px;
}

.input-history-box {
    background: #ffffff !important;
    color: #1c1e24 !important;
    border: 1px solid #d8dce5 !important;
    border-radius: 10px !important;
    box-shadow: 0 7px 16px rgba(19, 22, 30, 0.18) !important;
    padding: 6px !important;
}

.history-item {
    color: #1c1e24 !important;
    border-radius: 8px !important;
}

.history-item:hover {
    background: #f3f4f7 !important;
    color: #1c1e24 !important;
}

.action-dock {
    pointer-events: auto;
    width: 240px;
    height: 242px;
    flex: 0 0 240px;
    margin: 0;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 32px;
    color: #ffffff;
    background: linear-gradient(180deg, #1f2026 0%, #17181d 100%);
    box-shadow: 0 20px 42px rgba(17, 18, 22, 0.42);
    display: flex;
    flex-direction: column;
}

.action-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-bottom {
    margin-top: auto;
}

.action-label {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.95);
    text-transform: none;
    letter-spacing: 0;
}

.count-wrapper {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
}

.action-dock #batch-input,
.action-dock #batch-input:focus,
.action-dock #batch-input:active {
    width: 52px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 47px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    -moz-appearance: textfield;
}

.action-dock #batch-input::-webkit-outer-spin-button,
.action-dock #batch-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.unit-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.72);
}

.gen-btn {
    width: 100%;
    height: 46px;
    margin: 0;
    border: none;
    border-radius: 13px;
    background: #ff5a09;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(255, 92, 21, 0.34);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.gen-btn.is-busy {
    background: linear-gradient(135deg, #ff6a23, #ff8d3a);
    box-shadow: 0 12px 28px rgba(255, 92, 21, 0.42);
}

.gen-btn.is-busy span::after {
    content: "...";
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
    animation: genButtonDots 1.2s steps(4, end) infinite;
}

.gen-btn:hover {
    background: #ff6a23;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 92, 21, 0.42);
}

.gen-btn:active {
    transform: translateY(0);
}

.gen-btn:disabled {
    cursor: wait;
}

@keyframes genButtonDots {
    0% {
        width: 0;
    }

    100% {
        width: 1.4em;
    }
}

@media (max-width: 1240px) {
    .bottom-ui-zone {
        width: calc(100% - 24px);
        height: auto;
        gap: 14px;
        bottom: 16px;
    }

    .settings-dock,
    .settings-dock.settings-dock-v2 {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-height: 242px;
        height: auto;
    }

    .action-dock {
        width: 220px;
        flex-basis: 220px;
        min-height: 242px;
        height: auto;
    }
}

@media (max-width: 980px) {
    .bottom-ui-zone {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        height: auto;
        display: block;
        padding: 12px;
        box-sizing: border-box;
        margin-top: 12px;
    }

    .settings-dock,
    .settings-dock.settings-dock-v2 {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        margin-bottom: 12px;
        border-radius: 24px;
        padding: 20px !important;
        flex-direction: column;
    }

    .dock-visual {
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: 14px;
    }

    .visual-row {
        gap: 12px;
    }

    .product-stack-zone,
    .product-slots,
    .add-btn-slot,
    .reference-slot,
    .thumb-wrap {
        width: 92px;
        height: 92px;
        border-radius: 10px;
    }

    .dock-divider-v {
        display: none;
    }

    .dock-options-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-dock {
        width: 100%;
        max-width: none;
        min-height: 0;
        height: auto;
        border-radius: 24px;
    }

    .action-dock #batch-input,
    .action-dock #batch-input:focus,
    .action-dock #batch-input:active {
        font-size: 40px !important;
    }

    .unit-label {
        font-size: 20px;
    }
}

/* UI copy overlay for text-layer mode */
.ui-copy-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
}

.ui-copy-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.1vw, 12px);
    max-width: 74%;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    font-family: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
}

.ui-copy-title,
.ui-copy-sub,
.ui-copy-body,
.ui-copy-pill,
.ui-copy-btn {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ui-copy-title {
    margin: 0;
    font-weight: 820;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.ui-copy-sub {
    margin: 0;
    font-weight: 680;
    opacity: 0.95;
    word-break: break-word;
}

.ui-copy-body {
    margin: 0;
    font-weight: 560;
    max-width: 36ch;
    opacity: 0.92;
    word-break: break-word;
}

.ui-copy-promos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    margin-top: 2px;
}

.ui-copy-pill {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
    color: #ffffff;
    font-size: clamp(10px, 1.35vw, 13px);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: normal;
}

.ui-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    margin-top: 4px;
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
    color: #ffffff;
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: normal;
}

.ui-copy-variant-1 .ui-copy-inner {
    color: #1f2228;
    text-shadow: none;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
}

.ui-copy-variant-1 .ui-copy-pill {
    color: #1f2228;
    border-color: transparent;
    background: none;
}

.ui-copy-variant-1 .ui-copy-btn {
    color: #1f2228;
    border-color: transparent;
    background: none;
}

.ui-copy-variant-2 .ui-copy-inner {
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
}

.ui-copy-variant-2 .ui-copy-pill {
    background: none;
    border-color: transparent;
}

.ui-copy-variant-2 .ui-copy-btn {
    border-color: transparent;
    background: none;
}

.ui-copy-inner[style*="align-items: center"] .ui-copy-btn {
    align-self: center;
}

@media (max-width: 980px) {
    .ui-copy-inner {
        max-width: 82%;
    }
}

/* Prompt tooltip: now inside .card-actions, centering is handled in base rule */

.prompt-tooltip.show {
    transform: translate(-50%, 0) scale(0.7);
}

.prompt-section {
    border: none;
    background: transparent;
    box-shadow: none;
}

.copy-action-btn.copy-action-icon {
    width: 16px;
    height: 16px;
    top: 8px;
    right: 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    transition: color 0.2s, opacity 0.2s, transform 0.2s;
}

.copy-action-btn.copy-action-icon::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: url("icons/copy-fuzhi.svg") center / contain no-repeat;
    mask: url("icons/copy-fuzhi.svg") center / contain no-repeat;
}

.copy-action-btn.copy-action-icon::after {
    content: none;
}

.copy-action-btn.copy-action-icon:hover {
    border-color: transparent;
    background: transparent;
    color: #ffffff;
    transform: scale(1.06);
}

.copy-action-btn.copy-action-icon.is-copied {
    border-color: transparent;
    background: transparent;
    color: #34c759;
}

.copy-action-btn.copy-action-icon:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Card action popover: show only when the card is selected */
.artboard-wrapper {
    --generated-card-actions-width-cut: 42px;
}

.artboard-wrapper[data-card-kind="extend"] {
    --generated-card-actions-width-cut: 180px;
}

.artboard-wrapper>.card-actions,
.artboard>.card-actions,
.draft-board>.card-actions {
    position: absolute;
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 14px);
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    row-gap: 0;
    padding: 10px 14px;
    width: min(calc(100% - var(--generated-card-actions-width-cut, 42px)), calc(100vw - 32px));
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    background: #fff;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    transform: translateY(8px);
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 90;
}

.draft-board>.card-actions,
.card-actions.is-compact {
    width: min(360px, calc(100vw - 32px));
}

.draft-board[data-draft-mode='uploaded-source']>.card-actions {
    width: min(220px, calc(100vw - 32px));
}

.draft-board[data-draft-mode='uploaded-source']>.card-actions .act-btn.act-refresh,
.draft-board[data-draft-mode='uploaded-source']>.card-actions .act-btn.act-info,
.draft-board[data-draft-mode='uploaded-source']>.card-actions .act-btn.act-download,
.draft-board[data-draft-mode='uploaded-source']>.card-actions .prompt-tooltip {
    display: none !important;
}


.draft-board.is-selected-card>.card-actions,
.artboard-wrapper.is-selected-card>.card-actions,
.artboard-wrapper.is-selected-card>.artboard>.card-actions {
    transform: translateY(0);
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible;
}

.draft-board.is-selected-card,
.artboard-wrapper.is-selected-card,
.artboard-wrapper.is-multi-selected-card {
    position: relative;
}

.draft-board.is-card-dragging,
.artboard-wrapper.is-card-dragging {
    z-index: 120;
}

.draft-board.is-selected-card::after,
.artboard-wrapper.is-selected-card::after,
.artboard-wrapper.is-multi-selected-card::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid var(--accent);
    border-radius: calc(20px + 3px);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 55;
}

.card-actions .act-btn {
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.card-actions .act-btn:hover {
    background: #f0f0f2;
    color: #000;
}

.card-actions .act-btn.act-refresh:hover,
.card-actions .act-btn.act-info:hover {
    background: #e8f0fe;
    color: #1a73e8;
}

.card-actions .act-btn.act-extend:hover,
.card-actions .act-btn.act-extend.is-open {
    background: #eef1f6;
    color: #1c1e24;
}

.card-actions .act-btn.act-download:hover {
    background: #fff3e8;
    color: #ff6b00;
}

.card-actions .act-btn.act-delete {
    color: #666;
}

.card-actions .act-btn.act-delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

.card-actions .act-btn .act-icon {
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
}

.card-actions .act-btn .act-label {
    display: inline-block;
}

.extend-support-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: 280px;
    max-width: calc(100vw - 48px);
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 0);
    z-index: 100;
}

.extend-support-panel::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.88) transparent;
}

.extend-support-panel.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.extend-support-heading {
    width: 238px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    color: #ffd9a3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-family: var(--font-ui);
    text-align: left;
}

.extend-support-desc {
    display: none !important;
}

.extend-support-ratios {
    display: flex;
    flex-wrap: wrap;
    width: 238px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
    justify-content: flex-start;
}

.extend-ratio-option {
    flex: 0 0 74px;
    min-width: 74px;
    min-height: 30px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #f5f5f5;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.extend-ratio-option:hover {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateY(-1px);
}

.extend-ratio-option.is-active {
    border-color: rgba(255, 186, 118, 0.38);
    background: rgba(255, 186, 118, 0.12);
    color: #ffd9a3;
}

.extend-support-panel .ratio-option-icon {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 2px;
    background: transparent;
    flex: 0 0 auto;
    transform: scale(0.88);
    transform-origin: center;
}

.extend-support-panel .ratio-option-label {
    display: inline-block;
}

.draft-board:not([data-draft-mode='uploaded-source'])>.card-actions .act-btn.act-extend,
.draft-board:not([data-draft-mode='uploaded-source'])>.card-actions .extend-support-panel,
.card-actions.is-compact .act-btn.act-extend,
.card-actions.is-compact .extend-support-panel {
    display: none !important;
}

.card-delete-action {
    display: none !important;
}

/* Bottom dock collapse toggle */
.bottom-ui-zone {
    --dock-collapse-shift: 0px;
    transition: transform 0.28s cubic-bezier(.22, .8, .2, 1), opacity 0.2s ease;
    will-change: transform;
    overflow: visible;
}

.bottom-ui-zone.is-collapsed {
    transform: translateX(-50%) translateY(var(--dock-collapse-shift, 0px));
}

.bottom-ui-zone.is-collapsed .settings-dock,
.bottom-ui-zone.is-collapsed .action-dock {
    pointer-events: none !important;
}

/* Hide all dock content instantly on collapse, restore on expand */
.settings-dock>*,
.action-dock>* {
    opacity: 1;
    transition: opacity 0.15s ease 0.08s;
    /* slight delay on expand for smoothness */
}

.bottom-ui-zone.is-collapsed .settings-dock>*,
.bottom-ui-zone.is-collapsed .action-dock>* {
    opacity: 0;
    transition: opacity 0.08s ease;
    /* instant hide on collapse */
}

.dock-collapse-btn {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 24px;
    height: 20px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #b8b9ba;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 240;
    pointer-events: auto;
    box-shadow: none;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.dock-collapse-btn:hover {
    background: transparent;
    color: #d0d1d3;
}

.dock-collapse-btn:focus-visible {
    outline: 1px solid rgba(151, 152, 153, 0.45);
    outline-offset: 2px;
    border-radius: 4px;
}

.dock-collapse-btn-icon {
    width: 16px;
    height: 16px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.dock-collapse-icon-svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

.bottom-ui-zone.is-collapsed .dock-collapse-btn {
    top: 8px;
    bottom: auto;
    transform: translateX(-50%);
}

.bottom-ui-zone.is-collapsed .dock-collapse-btn .dock-collapse-btn-icon,
.dock-collapse-btn.is-collapsed .dock-collapse-btn-icon {
    transform: translateY(1px) rotate(180deg);
}

/* Draft preview fit tuning for extreme ratios */
#empty-placeholder .draft-cta,
.draft-board .draft-cta {
    min-width: 58px;
    min-height: 16px;
    padding: 3px 8px;
    border-radius: 8px;
}

#empty-placeholder.ratio-4-1 .draft-text,
.draft-board.ratio-4-1 .draft-text {
    left: 16px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 58% !important;
    gap: 4px !important;
}

#empty-placeholder.ratio-4-1 .draft-title,
.draft-board.ratio-4-1 .draft-title {
    font-size: 14px;
    line-height: 1.08;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

#empty-placeholder.ratio-4-1 .draft-sub,
.draft-board.ratio-4-1 .draft-sub {
    font-size: 10px;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#empty-placeholder.ratio-4-1 .draft-desc,
.draft-board.ratio-4-1 .draft-desc {
    font-size: 8px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#empty-placeholder.ratio-4-1 .draft-row,
.draft-board.ratio-4-1 .draft-row {
    gap: 4px;
    justify-content: flex-start;
}

#empty-placeholder.ratio-4-1 .draft-badges-br,
.draft-board.ratio-4-1 .draft-badges-br {
    max-width: 36%;
    gap: 4px;
}

#empty-placeholder.ratio-4-1 .draft-badge,
.draft-board.ratio-4-1 .draft-badge {
    font-size: 8px;
    padding: 4px 7px;
}

#empty-placeholder.ratio-4-1 .draft-pill,
.draft-board.ratio-4-1 .draft-pill {
    font-size: 8px;
    padding: 3px 6px;
}

#empty-placeholder.ratio-4-1 .draft-cta,
.draft-board.ratio-4-1 .draft-cta {
    align-self: flex-start !important;
    font-size: 9px;
}

#empty-placeholder.ratio-6-1 .draft-text,
.draft-board.ratio-6-1 .draft-text {
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 48% !important;
    gap: 3px !important;
}

#empty-placeholder.ratio-6-1 .draft-title,
.draft-board.ratio-6-1 .draft-title {
    font-size: 11px;
    line-height: 1.05;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

#empty-placeholder.ratio-6-1 .draft-sub,
.draft-board.ratio-6-1 .draft-sub {
    font-size: 8px;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#empty-placeholder.ratio-6-1 .draft-desc,
.draft-board.ratio-6-1 .draft-desc {
    font-size: 7px;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#empty-placeholder.ratio-6-1 .draft-row,
.draft-board.ratio-6-1 .draft-row {
    gap: 3px;
    justify-content: flex-start;
}

#empty-placeholder.ratio-6-1 .draft-badges-br,
.draft-board.ratio-6-1 .draft-badges-br {
    max-width: 30%;
    gap: 3px;
}

#empty-placeholder.ratio-6-1 .draft-badge,
.draft-board.ratio-6-1 .draft-badge {
    font-size: 7px;
    padding: 3px 6px;
}

#empty-placeholder.ratio-6-1 .draft-pill,
.draft-board.ratio-6-1 .draft-pill {
    font-size: 7px;
    padding: 2px 6px;
}

#empty-placeholder.ratio-6-1 .draft-cta,
.draft-board.ratio-6-1 .draft-cta {
    align-self: flex-start !important;
    font-size: 8px;
}

#empty-placeholder.ratio-1-6 .draft-text,
.draft-board.ratio-1-6 .draft-text {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 74% !important;
    gap: 4px !important;
}

#empty-placeholder.ratio-1-6 .draft-title,
.draft-board.ratio-1-6 .draft-title {
    font-size: 12px;
    line-height: 1.14;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

#empty-placeholder.ratio-1-6 .draft-sub,
.draft-board.ratio-1-6 .draft-sub {
    font-size: 9px;
    line-height: 1.2;
}

#empty-placeholder.ratio-1-6 .draft-desc,
.draft-board.ratio-1-6 .draft-desc {
    font-size: 8px;
    line-height: 1.22;
}

#empty-placeholder.ratio-1-6 .draft-row,
.draft-board.ratio-1-6 .draft-row {
    gap: 4px;
}

#empty-placeholder.ratio-1-6 .draft-badges-br,
.draft-board.ratio-1-6 .draft-badges-br {
    max-width: 78%;
    gap: 4px;
}

#empty-placeholder.ratio-1-6 .draft-badge,
.draft-board.ratio-1-6 .draft-badge {
    font-size: 8px;
    padding: 4px 7px;
}

#empty-placeholder.ratio-1-6 .draft-pill,
.draft-board.ratio-1-6 .draft-pill {
    font-size: 8px;
    padding: 3px 6px;
}

#empty-placeholder.ratio-1-6 .draft-cta,
.draft-board.ratio-1-6 .draft-cta {
    font-size: 9px;
}

/* -------------------------------
   Canvas Context Menu Styles 
------------------------------- */
.canvas-context-menu {
    position: fixed;
    z-index: 9999;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    user-select: none;
    animation: menu-fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes menu-fade-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.canvas-context-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.canvas-context-menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.canvas-context-menu .menu-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.canvas-context-menu .menu-item:hover svg {
    opacity: 1;
}

.canvas-context-menu .menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}

.canvas-context-menu .menu-item-danger:hover {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

.canvas-context-menu .menu-item-danger:hover svg {
    color: #ff453a;
}

/* Loading wave effect override (V5): unified, deterministic, clipped to artboard */
#empty-placeholder.is-loading,
.draft-board.is-loading,
.artboard.is-loading {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Disable legacy extra glow layers so all scenes use the same wave effect */
#empty-placeholder.is-loading::before,
.draft-board.is-loading::before,
.artboard.is-loading::before {
    content: none !important;
}

.draft-board.is-loading .aurora-overlay,
#empty-placeholder.is-loading .aurora-overlay,
.artboard.is-loading .aurora-overlay {
    opacity: 0 !important;
    animation: none !important;
}

/* Main wave layer (from provided snippet), bound to the same containers */
#empty-placeholder.is-loading::after,
.draft-board.is-loading::after,
.artboard.is-loading::after {
    content: "" !important;
    position: absolute;
    inset: 0 !important;
    border-radius: 20px;
    background:
        radial-gradient(70% 55% at 20% 30%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 70%),
        radial-gradient(65% 50% at 80% 60%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
        radial-gradient(80% 70% at 45% 50%, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 75%),
        repeating-radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.35) 0 10%, rgba(255, 255, 255, 0.0) 18% 32%);
    background-size: 180% 180%, 200% 200%, 220% 220%, 240% 240%;
    background-position: 0% 0%, 100% 0%, 0% 100%, 50% 50%;
    animation: waterWaveMoveV5 3s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 0.85;
    filter: blur(10px);
    clip-path: inset(0 round 20px);
    pointer-events: none;
    z-index: 9;
}

@keyframes waterWaveMoveV5 {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%, 40% 50%;
    }

    100% {
        background-position: 100% 100%, 0% 100%, 100% 0%, 60% 50%;
    }
}

/* Remove legacy loader white mask/blob so loading visuals are only wave + text */
#empty-placeholder.is-loading .loader,
.draft-board.is-loading .loader,
.artboard.is-loading .loader {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

#empty-placeholder.is-loading .loader::before,
.draft-board.is-loading .loader::before,
.artboard.is-loading .loader::before {
    content: none !important;
    animation: none !important;
    opacity: 0 !important;
}

#empty-placeholder.is-loading .loader-status,
#empty-placeholder.is-loading .loader-desc,
.draft-board.is-loading .loader-status,
.draft-board.is-loading .loader-desc,
.artboard.is-loading .loader-status,
.artboard.is-loading .loader-desc {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#empty-placeholder.is-loading .loader-status::after,
.draft-board.is-loading .loader-status::after,
.artboard.is-loading .loader-status::after {
    content: "...";
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
    animation: genButtonDots 1.2s steps(4, end) infinite;
}

#empty-placeholder.is-loading .loader-desc,
.draft-board.is-loading .loader-desc,
.artboard.is-loading .loader-desc {
    animation: loadingDescPulse 1.25s ease-in-out infinite alternate;
}

@keyframes loadingDescPulse {
    from {
        opacity: 0.56;
        transform: translateY(0);
    }

    to {
        opacity: 0.95;
        transform: translateY(-1px);
    }
}



.settings-dock.drag-over-upload,
.settings-dock.settings-dock-v2.drag-over-upload {
    box-shadow: 0 18px 42px rgba(24, 25, 30, 0.10), 0 0 0 1px rgba(255, 137, 57, 0.12);
}

.settings-dock.drag-over-product,
.settings-dock.settings-dock-v2.drag-over-product {
    box-shadow: 0 18px 42px rgba(24, 25, 30, 0.10), 0 0 0 3px rgba(255, 137, 57, 0.18);
}

.settings-dock.drag-over-ref,
.settings-dock.settings-dock-v2.drag-over-ref {
    box-shadow: 0 18px 42px rgba(24, 25, 30, 0.10), 0 0 0 3px rgba(154, 132, 255, 0.18);
}

:root {
    --window-chrome-height: 40px;
}

.window-resize-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 9999;
    -webkit-app-region: no-drag;
}

.canvas-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--window-chrome-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 16px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(18px);
    z-index: 140;
    -webkit-app-region: drag;
}

.canvas-header-bar::before,
.canvas-header-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 12px;
    height: 12px;
    z-index: 141;
    pointer-events: none;
}

.canvas-header-bar::before {
    left: 0;
    background: radial-gradient(circle at 100% 100%, transparent 12px, rgba(255, 255, 255, 0.94) 12px);
}

.canvas-header-bar::after {
    right: 0;
    background: radial-gradient(circle at 0 100%, transparent 12px, rgba(255, 255, 255, 0.94) 12px);
}

.canvas-header-bar .brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    padding: 8px 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    pointer-events: auto;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding-left: 16px;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .brand-logo {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111111;
}

.canvas-header-bar .brand-logo svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.canvas-header-bar .api-capsule {
    height: 32px;
    padding: 0 2px 0 0;
    color: #1d1d1f;
    font-weight: 600;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    pointer-events: auto;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .header-tools {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding-right: 4px;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .header-mini-divider {
    width: 1px;
    height: 14px;
    background: rgba(17, 24, 39, 0.14);
    border-radius: 999px;
    flex: 0 0 auto;
}

.canvas-header-bar .header-icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(29, 29, 31, 0.72);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .header-icon-btn:hover,
.canvas-header-bar .header-icon-btn.is-active {
    background: rgba(15, 23, 42, 0.08);
    color: #111111;
}

.canvas-header-bar .header-icon-btn.is-active {
    transform: translateY(-1px);
}

.canvas-header-bar .header-icon-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.canvas-header-bar .window-controls {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 4px;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .win-btn {
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(29, 29, 31, 0.72);
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    border-radius: 0;
    -webkit-app-region: no-drag;
}

.canvas-header-bar .win-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #111111;
}

.canvas-header-bar .win-close:hover {
    background: #ff5f57;
    color: #ffffff;
}

.canvas-header-bar .win-btn svg {
    display: block;
}

body.runtime-web .window-resize-top,
body.runtime-web .canvas-header-bar .window-controls {
    display: none;
}

body.runtime-web .save-dir-row {
    display: none;
}

body.runtime-web .web-storage-tip {
    display: block;
}

body.runtime-web .web-account-pill {
    display: inline-flex;
}

body.app-booting {
    overflow: hidden;
}

body.app-booting .infinite-canvas,
body.app-booting .canvas-header-bar,
body.app-booting .bottom-ui-zone,
body.app-booting .api-popover,
body.app-booting .usage-doc-panel {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.app-boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(255, 120, 32, 0.12), transparent 35%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.98));
    opacity: 1;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

body:not(.app-booting) .app-boot-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-boot-card {
    min-width: 280px;
    max-width: 420px;
    padding: 28px 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    text-align: center;
    color: #0f172a;
}

.app-boot-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid rgba(255, 90, 9, 0.16);
    border-top-color: #ff5a09;
    animation: appBootSpin 0.95s linear infinite;
}

.app-boot-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.app-boot-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
}

@keyframes appBootSpin {
    to {
        transform: rotate(360deg);
    }
}

body.runtime-web .web-account-divider,
body.runtime-web .web-account-panel {
    display: block;
}

.api-popover {
    position: fixed;
    top: calc(var(--window-chrome-height) + 16px);
    right: 16px;
}

.usage-doc-panel {
    position: fixed;
    top: calc(var(--window-chrome-height) + 12px);
    right: 16px;
    bottom: 16px;
    width: min(560px, calc(100vw - 24px));
    display: none;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 26px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    z-index: 290;
    backdrop-filter: blur(18px);
}

.usage-doc-panel.show {
    display: block;
    animation: usageDocPanelIn 0.22s ease;
}

@keyframes usageDocPanelIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.usage-doc-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
    display: block;
    border-radius: 26px;
}

.canvas-header-bar .brand,
.canvas-header-bar .api-capsule,
.canvas-header-bar .header-tools,
.canvas-header-bar .header-icon-btn,
.canvas-header-bar .window-controls,
.api-popover,
.usage-doc-panel {
    -webkit-app-region: no-drag;
}

.canvas-header-bar .brand *,
.canvas-header-bar .api-capsule *,
.canvas-header-bar .header-tools *,
.canvas-header-bar .header-icon-btn *,
.canvas-header-bar .window-controls *,
.api-popover *,
.usage-doc-panel * {
    -webkit-app-region: no-drag;
}