/* ════════════════════════════════════════════
   ModulPix — builder.html page styles
   Requires theme.css to be loaded first.
   ════════════════════════════════════════════ */

.sortable-ghost{opacity:0.25;border:2px dashed var(--accent) !important;border-radius:2rem}
#final-prompt::placeholder{color:var(--t3);font-family:'DM Mono',monospace;font-size:0.875rem}
.sort-mode-active [data-opt-id]{cursor:grab}
.custom-scrollbar::-webkit-scrollbar{width:4px}
.custom-scrollbar::-webkit-scrollbar-track{background:var(--bg)}
.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--b2);border-radius:10px}
.modal-active{display:flex !important}
.nav-btn{@apply px-4 py-2 text-[10px] font-black uppercase rounded-lg transition-all border border-gray-800}
.nav-btn-active{@apply bg-emerald-500 text-black border-emerald-500}
.nav-btn-inactive{@apply bg-transparent text-gray-500 hover:text-white hover:border-gray-600}
#modal-grid .group{touch-action:manipulation}
#modal-subtabs button{text-align:left}
.subtab-inactive > span:first-child{color:#9ca3af}
.subtab-inactive > span:last-child{opacity:1;color:#6b7280}
.mp-flex-fill{flex:1}
#copy-count-indicator{
    display:none;
    font-family:'DM Mono',monospace;
    font-size:11px;
    color:var(--t3);
}
.mp-ratio-icon{
    display:block;
    border:2px solid currentColor;
    border-radius:3px;
    opacity:.8;
}
.mp-ratio-icon-16-9{width:28px;height:16px}
.mp-ratio-icon-9-16{width:16px;height:28px}
.mp-ratio-icon-1-1{width:22px;height:22px}
.mp-ratio-icon-4-5{width:20px;height:25px}
.mp-ratio-icon-235-1{width:33px;height:14px}

/* ── SIDEBAR SHELL ─────────────────────────────────────────────────────── */
.mp-builder-sidebar{
    background:var(--s1);
    border-right:1px solid var(--b1) !important;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
    width:20.5% !important;
    min-width:360px !important;
    max-width:400px !important;
}
.mp-sidebar-scroll{
    padding:20px 22px 16px !important;
    gap:18px !important;
}

/* ── SIDEBAR HEADING ───────────────────────────────────────────────────── */
.mp-sidebar-hero{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.mp-sidebar-eyebrow,
.mp-sidebar-label,
.mp-step-number,
.mp-step-title{
    margin:0;
    font-family:'Syne',sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.mp-sidebar-eyebrow,
.mp-sidebar-label{
    color:var(--t3);
}
.mp-step-number{
    color:var(--t2);
}
.mp-sidebar-title{
    margin:0;
    font-family:'DM Serif Display',serif;
    font-size:clamp(26px,2.2vw,26px);
    font-weight:400;
    line-height:.92;
    letter-spacing:-.04em;
    color:var(--t1);
}
.mp-sidebar-title em{
    color:var(--accent);
    font-style:italic;
}
.mp-sidebar-section{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.mp-choice-row,
.mp-ratio-row{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

/* ── MODEL TOGGLE ──────────────────────────────────────────────────────── */
.view-toggle{display:flex;background:var(--s2);border:1px solid var(--b1);border-radius:100px;padding:3px;gap:2px}
.vt-btn{flex:1;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:none;color:var(--t2);transition:all .15s;font-family:'Syne',sans-serif}
.vt-btn.active{background:var(--accent);color:#000}

/* ── RATIO CHIPS ────────────────────────────────────────────────────────── */
#prompt-sidebar [id^="ratio-"]{
    position:relative;
    justify-content:center;
    gap:8px !important;
    min-height:44px;
    padding:8px 16px !important;
    border-radius:20px !important;
    border:1px solid var(--b1) !important;
    background:var(--s2) !important;
    color:var(--t2) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    font-family:'Syne',sans-serif;
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:-.02em !important;
    text-transform:none !important;
    transition:transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
#prompt-sidebar [id^="ratio-"]:hover{
    transform:translateY(-1px);
    border-color:var(--b2) !important;
    color:var(--t1) !important;
}
#prompt-sidebar [id^="ratio-"].bg-emerald-500{
    background:var(--accent) !important;
    color:#000 !important;
    border-color:var(--aborder) !important;
    box-shadow:none;
}
#prompt-sidebar [id^="ratio-"]{
    min-width:52px;
    min-height:66px;
    padding:7px 8px !important;
    border-radius:8px !important;
    font-size:10px !important;
    line-height:1;
}
/* Ratio chip active state */
#prompt-sidebar [id^="ratio-"].bg-emerald-500{
    background:var(--adim) !important;
    color:var(--accent) !important;
    border-color:var(--accent) !important;
}
#prompt-sidebar [id^="ratio-"] > span:first-child{
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin-bottom:4px;
    color:currentColor;
    opacity:.95 !important;
}
#prompt-sidebar [id^="ratio-"] > span:last-child{
    font-family:'DM Mono',monospace;
    font-size:10px;
    font-weight:600;
    letter-spacing:0;
}

/* ── STEP HEADING ──────────────────────────────────────────────────────── */
.mp-step-heading{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:0;
}
.mp-step-title{
    color:var(--t2);
}

/* ── BASE SCENE TEXTAREA ───────────────────────────────────────────────── */
.mp-textarea-shell{
    background:var(--s2);
    border:1px solid var(--b1);
    border-radius:10px;
    padding:12px 14px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    transition:border-color .15s;
}
.mp-textarea-shell:focus-within{
    border-color:var(--aborder);
}
.mp-scene-input{
    width:100%;
    min-height:74px;
    border:none;
    outline:none;
    resize:none;
    transition:min-height .2s ease;
    background:transparent;
    color:var(--t1);
    font-family:'DM Mono',monospace;
    font-size:12px;
    line-height:1.7;
}
.mp-scene-input::placeholder,
.mp-blueprint-empty{
    color:var(--t3) !important;
}

/* ── SEQUENCE BLUEPRINT ────────────────────────────────────────────────── */
.mp-blueprint-section{
    gap:10px;
}
.mp-blueprint-list{
    position:relative;
    padding-bottom:12px;
    min-height:98px;
}.mp-blueprint-empty{
    margin:0;
    font-family:'DM Mono',monospace;
    font-size:10px;
    line-height:1.65;
    font-style:italic;
}

/* Blueprint chip cards */
#chips-container .blueprint-chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border:1px solid var(--b1) !important;
    border-radius:8px !important;
    background:var(--s2) !important;
    transition:border-color .15s;
}
#chips-container .blueprint-chip:first-of-type{
    margin-top:6px;
}
#chips-container .blueprint-chip span:nth-child(2){
    width:90px !important;
    flex-shrink:0;
    color:var(--t3) !important;
    font-family:'Syne',sans-serif;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.08em;
    text-transform:uppercase;
}
#chips-container .blueprint-chip span:last-child{
    color:var(--t1) !important;
    font-family:'DM Mono',monospace;
    font-size:11px !important;
    font-weight:600 !important;
    line-height:1.5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ── PROGRESS BAR ──────────────────────────────────────────────────────── */
.mp-progress-wrap{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.mp-progress-bar-bg{
    height:2px;
    background:var(--b1);
    border-radius:2px;
    overflow:hidden;
}
.mp-progress-bar-fill{
    height:100%;
    background:var(--accent);
    border-radius:2px;
    transition:width .4s cubic-bezier(.4,0,.2,1);
}
.mp-progress-label{
    font-size:10px;
    color:var(--t3);
    font-family:'DM Mono',monospace;
}
.mp-progress-label span{
    color:var(--accent);
}

/* ── SIDEBAR ACTIONS ───────────────────────────────────────────────────── */
.mp-sidebar-actions{
    padding:12px 22px 16px !important;
    gap:8px !important;
    border-top:1px solid var(--b1) !important;
    background:linear-gradient(180deg, rgba(9,9,9,0) 0%, var(--bg) 18%) !important;
    display:flex;
    flex-direction:column;
}

/* ── USAGE METER ───────────────────────────────────────────────────────── */
.mp-usage-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px 0 14px !important;
    margin-bottom:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    border-bottom:1px solid var(--b1) !important;
}
.mp-usage-head,
.mp-usage-foot{
    margin:0 !important;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
}
.mp-usage-label{
    color:var(--t3) !important;
    letter-spacing:.16em !important;
    font-family:'Syne',sans-serif;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}
.mp-usage-count,
.mp-usage-reset{
    color:var(--t2) !important;
    font-size:9px !important;
    font-family:'DM Mono',monospace;
}
.mp-usage-track{
    width:100%;
    height:4px !important;
    border-radius:999px !important;
    background:var(--b1) !important;
    overflow:hidden;
    margin-bottom:6px;
}
#usage-bar{
    height:2px;
    border-radius:100px;
    transition:width .3s;
    width:100%;
}
.mp-usage-link{
    padding:0 !important;
    color:var(--accent) !important;
    font-family:'Syne',sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:none;
    border:none;
    cursor:pointer;
}

/* ── ACTION BUTTONS ────────────────────────────────────────────────────── */
.mp-sidebar-btn{
    min-height:46px;
    border-radius:999px !important;
    font-family:'Syne',sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:-.03em !important;
    width:100%;
    padding:12px;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:all .2s;
}
#prompt-sidebar #copyBtn.mp-copy-btn{
    background:var(--accent) !important;
    color:#000 !important;
}
#prompt-sidebar #copyBtn.mp-copy-btn:hover{
    background:var(--accent2) !important;
}
#prompt-sidebar #copyBtn.mp-copy-btn:disabled{
    opacity:.35;
    cursor:not-allowed;
}
.mp-secondary-btn{
    background:var(--s2) !important;
    border:1px solid var(--b2) !important;
    color:var(--t2) !important;
}
.mp-secondary-btn:hover{
    color:var(--t1) !important;
    border-color:var(--b2) !important;
    background:var(--s3) !important;
}
.mp-sidebar-btn svg{
    width:15px;
    height:15px;
}

/* ── ANONYMOUS NUDGE BANNER ────────────────────────────────────────────── */
#anon-nudge-banner{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:290;
    background:var(--s2);
    border-top:1px solid var(--b1);
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transform:translateY(100%);
    transition:transform .3s ease;
}
.mp-nudge-text{
    font-family:'Syne',sans-serif;
    font-size:13px;
    color:var(--t2);
    max-width:420px;
    line-height:1.5;
}
.mp-nudge-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-shrink:0;
    margin-left:16px;
}
.mp-nudge-btn{
    font-family:'Syne',sans-serif;
    font-size:12px;
    padding:8px 18px;
    border-radius:100px;
    cursor:pointer;
}
.mp-nudge-btn-secondary{
    font-weight:600;
    color:var(--t2);
    border:1px solid var(--b2);
    background:transparent;
}
.mp-nudge-btn-primary{
    font-weight:700;
    color:#000;
    background:var(--accent);
    border:none;
}
.mp-nudge-close{
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:var(--t3);
    font-size:16px;
    cursor:pointer;
    line-height:1;
}

/* ── GATE MODALS ───────────────────────────────────────────────────────── */
#login-wall-modal,
#limit-reached-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:300;
    background:rgba(0,0,0,.82);
}
.mp-gate-modal-card{
    background:var(--s1);
    border:1px solid var(--b2);
    border-radius:20px;
    width:min(440px,92vw);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding-bottom:28px;
}
.mp-gate-handle{
    width:36px;
    height:4px;
    background:var(--b2);
    border-radius:2px;
    margin:12px auto 0;
}
.mp-gate-close{
    position:absolute;
    top:12px;
    right:16px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--s2);
    border:1px solid var(--b1);
    color:var(--t2);
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.mp-gate-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--adim);
    border:1px solid var(--aborder);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:20px auto 0;
    font-size:20px;
}
.mp-gate-title{
    font-family:'DM Serif Display',serif;
    font-size:22px;
    font-style:italic;
    color:var(--t1);
    text-align:center;
    margin:16px 28px 0;
}
.mp-gate-title em{
    color:var(--accent);
    font-style:italic;
}
.mp-gate-copy{
    font-family:'Syne',sans-serif;
    font-size:13px;
    color:var(--t2);
    text-align:center;
    max-width:320px;
    margin:12px auto 0;
    line-height:1.6;
}
.mp-gate-list{
    list-style:none;
    margin:20px 28px 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.mp-gate-list-item{
    display:flex;
    align-items:center;
    gap:10px;
}
.mp-gate-check{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--adim);
    color:var(--accent);
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.mp-gate-list-text{
    font-family:'Syne',sans-serif;
    font-size:13px;
    color:var(--t1);
}
.mp-gate-btn{
    display:block;
    width:calc(100% - 56px);
    margin:20px 28px 10px;
    padding:13px;
    border-radius:100px;
    font-family:'Syne',sans-serif;
    font-size:14px;
    cursor:pointer;
}
.mp-gate-btn-primary{
    background:var(--accent);
    color:#000;
    font-weight:700;
    border:none;
}
.mp-gate-btn-secondary{
    margin:0 28px;
    padding:11px;
    background:var(--s2);
    border:1px solid var(--b2);
    color:var(--t2);
    font-size:13px;
    font-weight:600;
}

/* ── OPTION CIRCLE PREVIEW ─────────────────────────────────────────────── */
.option-circle-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    margin-top:.5rem;
    width:min(100%, 320px);
    max-width:100%;
    overflow:hidden;
    --circle-count:4;
    --circle-overlap:14px;
    --circle-max-size:80px;
}
.option-circle-preview img{
    width:min(
        var(--circle-max-size),
        calc((100% + ((var(--circle-count) - 1) * var(--circle-overlap))) / var(--circle-count))
    );
    aspect-ratio:1 / 1;
    height:auto;
    border-radius:9999px;
    object-fit:cover;
    border:2px solid var(--s2);
    flex-shrink:0;
    min-width:0;
}
.option-circle-preview img + img{
    margin-left:calc(-1 * var(--circle-overlap));
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media(max-width:767px){
    #prompt-sidebar{
        position:fixed !important;
        bottom:0;left:0;right:0;
        z-index:100;
        height:90dvh;
        transform:translateY(100%);
        transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
        border-radius:1.5rem 1.5rem 0 0 !important;
        border-right:none !important;
        border-top:1px solid var(--b1);
        min-width:unset !important;
        width:100% !important;
        max-width:100% !important;
        overflow-y:auto;
        padding-bottom:2rem;
    }
    #prompt-sidebar.panel-open{transform:translateY(0)}
    #layers-main{display:none}
    #layers-main.mp-layers-visible{display:block}
    #final-prompt{min-height:180px}
    .option-circle-preview{
        --circle-overlap:10px;
        --circle-max-size:68px;
    }
    .mp-sidebar-scroll{
        padding:18px 16px 16px !important;
        gap:16px !important;
    }
    .mp-sidebar-title{
        font-size:clamp(30px,9vw,38px);
    }
    .mp-choice-row,
    .mp-ratio-row{
        gap:10px;
    }
    #prompt-sidebar [id^="model-"]{
        flex:1 1 145px;
        min-height:38px;
        padding:9px 14px !important;
        font-size:11px !important;
    }
    #prompt-sidebar [id^="ratio-"]{
        min-width:52px;
        min-height:66px;
        padding:7px 8px !important;
    }
    .mp-textarea-shell{
        padding:14px 14px;
        border-radius:10px;
    }
    .mp-scene-input{
        min-height:72px;
        font-size:12px;
    }
    .mp-sidebar-actions{
        padding:12px 16px 16px !important;
    }
    .mp-sidebar-btn{
        min-height:48px;
        font-size:13px !important;
    }
    #anon-nudge-banner{
        padding:12px 18px 14px;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .mp-nudge-actions{
        margin-left:0;
        padding-right:24px;
        flex-wrap:wrap;
    }
    .mp-gate-modal-card{
        width:min(420px,92vw);
    }
}